/* Strix — gedeelde styling. Mobile-first voor de spelerweergave,
   grootscherm-styling voor de hostweergave. */

.strix-logo {
	font-weight: bold;
	letter-spacing: 1px;
}

/* === Spelerweergave (telefoon) === */

.speler-body {
	background: #2e1a47;
	color: #fff;
	min-height: 100vh;
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

.speler-scherm {
	max-width: 480px;
	margin: 0 auto;
	padding: 16px;
	text-align: center;
}

.speler-scherm h1 {
	font-size: 28px;
	margin: 24px 0;
}

.speler-scherm .form-control {
	height: 52px;
	font-size: 20px;
	text-align: center;
}

.speler-scherm .btn-join {
	height: 52px;
	font-size: 20px;
	width: 100%;
	margin-top: 12px;
}

.joincode-invoer {
	text-transform: uppercase;
	letter-spacing: 6px;
	font-weight: bold;
}

/* 2x2 grid met grote antwoordknoppen in Kahoot-kleuren */
.antwoord-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -6px;
}

.antwoord-knop {
	flex: 1 1 40%;
	margin: 6px;
	min-height: 110px;
	border: none;
	border-radius: 8px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	padding: 12px;
	cursor: pointer;
	word-break: break-word;
}

.antwoord-knop:active { opacity: 0.8; }
.antwoord-knop[disabled] { opacity: 0.45; cursor: default; }

.kleur-rood  { background: #e21b3c; }
.kleur-blauw { background: #1368ce; }
.kleur-geel  { background: #d89e00; }
.kleur-groen { background: #26890c; }

/* Waar/onwaar: twee knoppen over de volle breedte */
.antwoord-knop.knop-waar-onwaar {
	flex: 1 1 100%;
	min-height: 90px;
	font-size: 24px;
}

/* Invoer voor open- en schattingsvragen */
#open-form .form-control,
#schatting-form .form-control {
	height: 52px;
	font-size: 20px;
	text-align: center;
}

.resultaat-goed  { color: #6f6; font-size: 26px; font-weight: bold; }
.resultaat-fout  { color: #f66; font-size: 26px; font-weight: bold; }

.speler-rang {
	font-size: 18px;
	margin-top: 12px;
}

.wacht-stip::after {
	content: '…';
	animation: stippen 1.5s infinite;
}

@keyframes stippen {
	0%   { content: ''; }
	33%  { content: '.'; }
	66%  { content: '..'; }
	100% { content: '...'; }
}

/* === Hostweergave (grootscherm) === */

.host-body {
	background: #2e1a47;
	color: #fff;
	margin: 0;
	min-height: 100vh;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.host-scherm {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
}

.host-joincode {
	font-size: 64px;
	font-weight: bold;
	letter-spacing: 12px;
	background: #fff;
	color: #2e1a47;
	display: inline-block;
	padding: 8px 28px;
	border-radius: 10px;
	margin: 12px 0;
}

.host-joinurl {
	font-size: 20px;
	color: #cbc;
	word-break: break-all;
}

#qrcode {
	display: inline-block;
	background: #fff;
	padding: 16px;
	border-radius: 10px;
	margin: 16px 0;
}

.lobby-spelers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.lobby-speler {
	background: rgba(255,255,255,0.15);
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 20px;
	cursor: pointer;
}

.lobby-speler:hover { background: #e21b3c; text-decoration: line-through; }

.host-vraag {
	font-size: 34px;
	font-weight: bold;
	margin: 18px 0;
}

.host-media img,
.host-media video {
	max-width: 100%;
	max-height: 45vh;
	border-radius: 8px;
}

.timerbalk-houder {
	background: rgba(255,255,255,0.2);
	border-radius: 6px;
	height: 18px;
	margin: 14px 0;
	overflow: hidden;
}

.timerbalk {
	background: #d89e00;
	height: 100%;
	width: 100%;
	transition: width 0.25s linear;
}

.antwoord-teller {
	font-size: 24px;
	margin: 8px 0;
}

/* Antwoordverdeling (reveal) */
.verdeling {
	max-width: 700px;
	margin: 20px auto;
	text-align: left;
}

.verdeling-rij { margin: 10px 0; }

.verdeling-label {
	font-size: 20px;
	margin-bottom: 4px;
}

.verdeling-label .juist-vink { color: #6f6; font-weight: bold; }

.verdeling-balk {
	height: 34px;
	border-radius: 6px;
	min-width: 40px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 34px;
	padding-left: 10px;
	transition: width 0.4s;
}

.verdeling-rij.niet-juist .verdeling-balk { opacity: 0.45; }

/* Reveal: open antwoorden (klikbaar voor herbeoordeling) */
.open-antwoordenlijst {
	max-width: 700px;
	margin: 10px auto;
}

.open-antwoordrij {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255,255,255,0.12);
	border-radius: 6px;
	padding: 8px 14px;
	margin: 6px 0;
	font-size: 20px;
	cursor: pointer;
}

.open-antwoordrij:hover { background: rgba(255,255,255,0.25); }
.open-antwoordrij .badge-goed { color: #6f6; font-weight: bold; }
.open-antwoordrij .badge-fout { color: #f88; font-weight: bold; }

/* Reveal: schatting */
.schatting-juist {
	font-size: 52px;
	font-weight: bold;
	background: #fff;
	color: #2e1a47;
	display: inline-block;
	padding: 6px 24px;
	border-radius: 10px;
	margin: 8px 0 16px;
}

.schatting-tabel {
	margin: 0 auto;
	font-size: 20px;
	border-collapse: separate;
	border-spacing: 0 6px;
}

.schatting-tabel td {
	background: rgba(255,255,255,0.12);
	padding: 6px 18px;
}

.schatting-tabel tr td:first-child { border-radius: 6px 0 0 6px; }
.schatting-tabel tr td:last-child { border-radius: 0 6px 6px 0; font-weight: bold; }

/* Leaderboard en podium */
.leaderboard-lijst {
	max-width: 600px;
	margin: 20px auto;
	text-align: left;
	font-size: 24px;
	list-style: none;
	padding: 0;
}

.leaderboard-lijst li {
	background: rgba(255,255,255,0.12);
	border-radius: 6px;
	padding: 10px 18px;
	margin: 8px 0;
	display: flex;
	justify-content: space-between;
}

.podium {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 16px;
	margin: 30px 0;
}

.podium-blok {
	background: rgba(255,255,255,0.15);
	border-radius: 8px 8px 0 0;
	padding: 14px;
	width: 200px;
}

.podium-blok .naam { font-size: 24px; font-weight: bold; }
.podium-blok .punten { font-size: 18px; color: #cbc; }
.podium-plek { font-size: 40px; }

.podium-1 { height: 230px; background: rgba(216,158,0,0.5); }
.podium-2 { height: 180px; }
.podium-3 { height: 140px; }

.host-knoppen { margin-top: 24px; }
.host-knoppen .btn { margin: 0 6px; min-width: 160px; }

/* === Editor === */

.optie-rij { margin-bottom: 8px; }

.optie-kleurblok {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	vertical-align: middle;
}

.media-preview img,
.media-preview video {
	max-width: 300px;
	max-height: 200px;
	border-radius: 6px;
}

.vraag-paneel .panel-heading { cursor: pointer; }