/***
 * Avaleht: pime saal, milles põleb mängulaud.
 *
 * Idee: külaline ei pea lugema, mis Nutivillak on - ta näeb seda. Laual
 * jookseb päris mängu jada (juhendaja sirvib lauda, valib vihje, see
 * kasvab lahtrist välja, saalis süttivad telefonid, punktid antakse).
 *
 * Kõik värvid tulevad theme.css muutujatest.
 ***/

.home {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 calc(50vw - 50% + 40px);
	/* clip, mitte hidden: külgedel ei tohi tekkida kerimisriba, aga
	   prožektorivalgus peab ulatuma ülespoole menüüriba taha. hidden
	   lõikaks ka ülaserva ja valgusel tekiks nähtav sirge äär. */
	overflow-x: clip;
	overflow-y: visible;
}

/* =======================================================================
   SAAL

   Kõik valguskihid on AKNA laiused, mitte sisukasti laiused. Sisukast on
   polsterdatud (padding: 0 calc(50vw - 50% + 40px)), nii et kihi "left: 0"
   tähendaks teksti serva ja valgusele tekiks nähtav sirge äär keset
   ekraani. Sellepärast on igal kihil width: 100vw ja ta on keskele
   tõmmatud.
   ======================================================================= */

.home-hall {
	position: relative;
	/* Teleri laius. Muutujana, sest ka publiku siluetid istuvad selle
	   järgi: rahvahulk on teleri ees, mitte üle kogu akna laiali.
	   Mõlemas saalis SAMA - kui laste teler oli suurem, hüppas lüliti
	   vajutamisel terve leht ja kaks mängu nägid välja nagu eri tooted. */
	--wall-w: max(380px, min(950px, 64%, calc((100vh - 484px) * 2.207)));
	/* Peade vahed kasvavad teleriga kaasa, pead ise mitte - suurel
	   ekraanil tekkisid rahvahulka jälle augud. Üle 700 px enam ei kasva. */
	--crowd-w: min(var(--wall-w), 700px);
	/* Alumine varu on täpselt udu kõrgus: udu algab sealt, kus laud
	   lõpeb. Varem oli varu väiksem kui udu ja udu sõi ära laua kaks
	   alumist rida - see ei lugenud sügavusena, vaid katkise pildina. */
	padding: 14px 0 84px 0;
	min-height: 0;
}

.hall-light,
.hall-beam,
.hall-haze,
.hall-front {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	pointer-events: none;
}

.hall-light,
.hall-beam,
.hall-haze {
	z-index: 0;
}

/* Prožektor algab menüüriba tagant: avalehel on riba läbipaistev ja
   valgus peab jooksma tema alt läbi, muidu on lehe ülaserv lihtsalt must
   triip ja kogu saaliefekt algab poolelt lehelt. */
.hall-light {
	top: -150px;
	height: 940px;
	background: radial-gradient(42% 40% at 50% 34%, rgba(40, 58, 190, .44) 0%, rgba(8, 12, 48, .18) 50%, rgba(1, 2, 8, 0) 100%);
	opacity: .55;
	transition: opacity 1.1s ease;
}
.home.clue-open .hall-light { opacity: 1; }

@keyframes beamBlue {
	0%, 100% { transform: translateX(-50%) skewX(-13deg);                   opacity: .8; }
	50%      { transform: translateX(-50%) skewX(-9deg)  translateX(46px);  opacity: 1; }
}
@keyframes beamGold {
	0%, 100% { transform: translateX(-50%) skewX(11deg);                    opacity: .65; }
	50%      { transform: translateX(-50%) skewX(15deg)  translateX(-38px); opacity: 1; }
}
@keyframes hazeDrift {
	0%, 100% { transform: translateX(-50%) scale(1);      opacity: .5; }
	50%      { transform: translateX(-50%) scale(1.06);   opacity: .75; }
}

/* Vihud on kitsad, aga nende oma kast on täislaiune - nii jääb serv
   pehmeks ka siis, kui vihk ise on ekraani äärde kaldu. */
.hall-beam-a {
	top: -150px; height: 820px;
	background: linear-gradient(180deg, rgba(120, 150, 255, .17) 0%, rgba(120, 150, 255, 0) 72%);
	-webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 18%, #000 30%, transparent 38%);
	        mask-image: linear-gradient(90deg, transparent 12%, #000 18%, #000 30%, transparent 38%);
	filter: blur(22px);
	animation: beamBlue 11s ease-in-out infinite;
}
.hall-beam-b {
	top: -150px; height: 820px;
	background: linear-gradient(180deg, rgba(245, 196, 81, .15) 0%, rgba(245, 196, 81, 0) 70%);
	-webkit-mask-image: linear-gradient(90deg, transparent 62%, #000 70%, #000 81%, transparent 88%);
	        mask-image: linear-gradient(90deg, transparent 62%, #000 70%, #000 81%, transparent 88%);
	filter: blur(24px);
	animation: beamGold 13s ease-in-out infinite;
}
.hall-haze {
	top: 400px; height: 300px;
	background: radial-gradient(38% 50% at 50% 50%, rgba(90, 120, 220, .14) 0%, rgba(90, 120, 220, 0) 70%);
	filter: blur(30px);
	animation: hazeDrift 17s ease-in-out infinite;
}

/* =======================================================================
   VIDEOSEIN
   ======================================================================= */

@keyframes screenFlicker {
	0%, 100% { opacity: .97; }
	46%      { opacity: 1; }
	49%      { opacity: .91; }
	52%      { opacity: 1; }
}

/* Ümbris hoiab teleri laiust ja teleri kõrval olevat režiimipulti.
   Pult ei saa olla teleri enda sees: teler väreleb (screenFlicker) ja
   vilguks koos temaga.

   Laius (--wall-w, .home-hall juures) järgib ka akna kõrgust: 484 on
   kõik see, mis telerist üleval ja all veel mahtuma peab. Pult on teleri
   KÕRVAL, nii et kõrgust ta ei võta. Ülempiir on 950 px - suurel
   ekraanil oli 660 px teler pisike. 64% jätab külgedele ruumi pultile. */
.wall-wrap {
	position: relative;
	z-index: 2;
	width: var(--wall-w);
	margin: 0 auto;
}

.videowall {
	position: relative;
	z-index: 2;
	/* Laius järgib ka akna kõrgust. Muidu on teler suurel ekraanil ja
	   madalal sülearvutiaknal ühesuurune ning sisenemisriba - lehe
	   peategevus - jääb 13-tollisel voldi alla. Arv 523 on kõik see, mis
	   telerist üleval ja all veel mahtuma peab: riba, pealkiri, lause,
	   sisenemisriba ja saali polsterdus. 2.207 on ekraani külgede suhe
	   (874/396), mis teeb vabast kõrgusest laiuse. */
	/* Laius tuleb ümbriselt (.wall-wrap), vt allpool */
	width: 100%;
	box-sizing: border-box;
	padding: 11px;
	border-radius: 12px;
	background: #070A28;
	box-shadow: 0 0 160px rgba(52, 78, 230, .5), 0 30px 80px rgba(0, 0, 0, .85);
	animation: screenFlicker 7s ease-in-out infinite;
}

/* Ekraan on konteiner. Varem olid kirjasuurused seotud AKNA laiusega
   (vw), aga teler ise on laiuselt lukus (min(660px, 56%)) - suurel
   ekraanil kasvas kiri edasi, kuigi ekraan enam ei kasvanud, ja vihje
   ei mahtunud enam paneeli sisse. Nüüd mõõdab kõik ekraani ennast. */
.videowall-inner {
	position: relative;
	aspect-ratio: 874 / 396;
	container-type: size;
	container-name: ekraan;
	/* Ekraan lõikab oma sisu, nagu päris teler - ilma selleta ulatusid
	   üksikud lahtrid vihjepaneeli alt välja.

	   Aga "hidden" lõikas ka kursori kuma: nurga- ja servalahtril ei
	   olnud halol kuhu paista ja ta kadus ära, keskmistel lahtritel aga
	   paistis. "clip" koos clip-margin'iga lubab pehmel kumal 10 px
	   raami peale hääbuda - raam ise on 11 px, nii et telerist välja ta
	   ei jõua. Vana brauser, mis clip-margin'it ei tunne, lõikab nagu
	   ennegi: midagi katki ei lähe.

	   8 px, sest telefonis on raam just nii lai (mujal 11) - nii ei jõua
	   kuma üheski suuruses telerist endast välja. */
	overflow: clip;
	overflow-clip-margin: 8px;
	border-radius: 6px;
}

.board-layer {
	position: absolute;
	/* Mitte inset: 0. Serva- ja nurgalahtri kursorirõngas (2 px) ja kuma
	   vajavad natuke ruumi, muidu algavad nad täpselt ekraani servalt.
	   Ühikud on ekraani enda omad, nii et õhk on igal suurusel sama. */
	inset: 1.6cqh 1cqw;
	display: grid;
	/* minmax(0, ...) on siin hädavajalik: ilma selleta ei saa rada oma
	   sisust väiksemaks minna, teemarida paisutas kogu ruudustikku ja
	   laua viimane rida jäi ekraanist ~8 px allapoole. */
	grid-template-rows: minmax(0, 7%) repeat(5, minmax(0, 1fr));
	gap: 1.5%;
}

.board-row {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	/* Ilma selle reata on kaudne rada auto-suurusega ja lahtri number
	   venitas lahtri reast 1,5 px allapoole välja. */
	grid-template-rows: minmax(0, 1fr);
	gap: 1.5%;
}

.board-topic {
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #2B3ADC 0%, #16208C 100%);
	color: #E4E8FF;
	font-size: clamp(6px, 3.4cqh, 11px);
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	transition: background var(--transition-time) ease, color var(--transition-time) ease;
}
.board-topic.is-focused {
	background: linear-gradient(180deg, #3D4DF0 0%, #1E2BA8 100%);
	color: #FFFFFF;
}

.board-cell {
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-numeric);
	font-size: clamp(11px, 11cqh, 32px);
	font-weight: 600;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
	text-shadow: 0 0 18px rgba(245, 196, 81, .45);
	transition: filter var(--transition-time) ease, transform var(--transition-time) ease;
}
.board-cell.v10 { background: linear-gradient(180deg, #1E2AB4 0%, #111A7E 100%); color: #F0C96A; }
.board-cell.v20 { background: linear-gradient(180deg, #2231BE 0%, #131D88 100%); color: #F5CE70; }
.board-cell.v30 { background: linear-gradient(180deg, #2637CA 0%, #15208F 100%); color: #FFD478; }
.board-cell.v40 { background: linear-gradient(180deg, #2B3ED6 0%, #172496 100%); color: #FFDC7A; }
.board-cell.v50 { background: linear-gradient(180deg, #3044E2 0%, #1A289E 100%); color: #FFE08A; }

.board-cell.is-focused      { filter: brightness(1.6); transform: scale(1.03); }
.board-cell.is-flashing { filter: brightness(2.5); transform: scale(1.05); }
.board-cell.is-done   { background: #060A26; color: #171E4C; box-shadow: inset 0 2px 10px rgba(0,0,0,.7); text-shadow: none; }

@keyframes cursorBreathe {
	0%, 100% { box-shadow: 0 0 0 2px rgba(255, 210, 122, .9), 0 0 26px rgba(255, 210, 122, .5); }
	50%      { box-shadow: 0 0 0 2px rgba(255, 210, 122, .6), 0 0 40px rgba(255, 210, 122, .8); }
}

.board-cursor {
	position: absolute;
	border-radius: 5px;
	pointer-events: none;
	opacity: 0;
	transition: left .26s var(--transition-curve), top .26s var(--transition-curve),
	            width .26s ease, height .26s ease, opacity .2s ease;
	animation: cursorBreathe 1.3s ease-in-out infinite;
}
.board-cursor.is-visible { opacity: 1; }

/* Vihje kasvab välja sellest lahtrist, mille juhendaja valis */
.clue-panel {
	position: absolute;
	inset: 0;
	border-radius: 6px;
	background: linear-gradient(180deg, #2333B8 0%, #131C82 60%, #0D1462 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: scale(.05);
	transition: transform .46s var(--transition-curve), opacity .28s ease;
}
.clue-panel.is-open { opacity: 1; transform: scale(1); }

.clue-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 2cqw;
	padding: 4cqh 2.6cqw;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.clue-topic {
	font-size: clamp(8px, 3cqh, 11px);
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #C9D0FF;
}
.clue-value {
	font-family: var(--font-numeric);
	font-size: clamp(16px, 7.5cqh, 28px);
	font-weight: 600;
	line-height: 1;
	color: var(--gold);
}
.clue-time {
	margin-left: auto;
	width: 20%;
	height: 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .45);
	overflow: hidden;
}
.clue-time span {
	display: block;
	height: 7px;
	width: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #FFDC7A 0%, #FF8C1A 100%);
}
.clue-panel.is-open .clue-time span { width: 9%; transition: width 7s linear; }

/* flex: 1 1 auto + min-height: 0 on see, mis vihje pikkuse kinni püüab.
   Ilma min-height: 0-ta ei saa see osa oma sisust väiksemaks minna ja
   lükkab skooririba paneelist välja - pikima vihje puhul 42 px jagu. */
.clue-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2cqh 6cqw;
	text-align: center;
}
.clue-text {
	font-family: var(--font-display);
	font-size: clamp(13px, 10.5cqh, 34px);
	line-height: 1.12;
	font-weight: 400;
	text-wrap: balance;
}
.clue-shape {
	margin-top: 2.5cqh;
	font-size: clamp(7px, 3cqh, 11px);
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
}

.clue-foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1.4cqw;
	padding: 3cqh 2.6cqw;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.buzzer {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 999px;
	padding: 5px 12px 5px 5px;
	font-size: clamp(9px, 3.6cqh, 12px);
	font-weight: 600;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--border);
	color: var(--text-dim);
	opacity: 0;
	transform: translateY(10px) scale(.88);
	transition: opacity .3s ease, transform .3s var(--transition-curve),
	            background .3s ease, border-color .3s ease;
}
.buzzer.is-visible { opacity: 1; transform: none; }
.buzzer.is-first {
	background: rgba(255, 140, 26, .2);
	border-color: rgba(255, 140, 26, .6);
	color: var(--text);
}
.buzzer.is-scored {
	background: rgba(46, 156, 87, .24);
	border-color: rgba(123, 227, 155, .6);
}
.buzzer-avatar {
	width: 18px; height: 18px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	color: #0C1052;
	flex-shrink: 0;
}
.buzzer-time { font-family: var(--font-numeric); color: var(--text-muted); }
.buzzer.is-first .buzzer-time { color: #FFC98A; }

.clue-buttons {
	margin-left: auto;
	display: flex;
	gap: 7px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease;
}
.clue-buttons.is-visible { opacity: 1; transform: none; }
.button-plus, .button-minus {
	border-radius: 8px;
	font-family: var(--font-numeric);
	font-size: clamp(11px, 4cqh, 15px);
	font-weight: 600;
	padding: 6px 14px;
}
.button-plus {
	border: 1px solid rgba(123, 227, 155, .55);
	background: rgba(46, 156, 87, .24);
	color: var(--correct);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.button-plus.is-pressed {
	background: rgba(46, 156, 87, .7);
	transform: scale(.94);
	box-shadow: 0 0 26px rgba(123, 227, 155, .75);
}
.button-minus {
	border: 1px solid rgba(255, 155, 155, .5);
	background: rgba(158, 43, 43, .28);
	color: var(--wrong);
}

/* =======================================================================
   SAALI ESIPLAAN: siluetid ja telefonid
   ======================================================================= */

.hall-front {
	bottom: 0;
	height: 84px;
	z-index: 3;
	background: linear-gradient(180deg, rgba(5, 7, 31, 0) 0%, rgba(5, 7, 31, .92) 58%, var(--bg-deep) 100%);
}

/* Siluetid istuvad tiheda rahvahulgana teleri ees. Varem olid nad akna
   suhtes (1vw ... 84vw) ja laial ekraanil jäi peade vahele 150 px tühjust:
   need ei lugenud publikuna, vaid üksikute toolidena. Nüüd on iga pea
   keskkoht teleri laiuse (--crowd-w) murdosa lava keskjoonest, nii et
   rühm on alati teleri mõõtu (~1,4 teleri laiust) ja pead katavad
   üksteist kergelt. Tumedamad (b, d, f, h) istuvad tagapool.
   Ülaserva kontuur on teleri valgus peade peal - ilma selleta sulasid
   kõrvuti pead üheks mustaks künkaks. */
.silhouette {
	position: absolute;
	bottom: 0;
	background: #04060F;
	border-radius: 50% 50% 0 0 / 60% 60% 0 0;
	box-shadow: inset 0 2px 0 rgba(120, 150, 255, .16);
	z-index: 5;
	pointer-events: none;
}
.silhouette-b, .silhouette-d, .silhouette-f, .silhouette-h { box-shadow: inset 0 2px 0 rgba(120, 150, 255, .09); }
.silhouette-a { left: calc(50% - var(--crowd-w) * .70 - 59px); width: 118px; height: 76px; }
.silhouette-b { left: calc(50% - var(--crowd-w) * .53 - 49px); width: 98px;  height: 58px;  background: #03050D; z-index: 4; }
.silhouette-c { left: calc(50% - var(--crowd-w) * .36 - 54px); width: 108px; height: 67px; }
.silhouette-d { left: calc(50% - var(--crowd-w) * .19 - 46px); width: 92px;  height: 48px;  background: #03050D; z-index: 4; }
.silhouette-e { left: calc(50% - var(--crowd-w) * .02 - 51px); width: 102px; height: 54px; }
.silhouette-f { left: calc(50% + var(--crowd-w) * .16 - 47px); width: 94px;  height: 46px;  background: #03050D; z-index: 4; }
.silhouette-g { left: calc(50% + var(--crowd-w) * .33 - 50px); width: 100px; height: 56px; }
.silhouette-h { left: calc(50% + var(--crowd-w) * .51 - 55px); width: 110px; height: 68px;  background: #03050D; z-index: 4; }
.silhouette-i { left: calc(50% + var(--crowd-w) * .69 - 58px); width: 116px; height: 78px; }

.phone {
	position: absolute;
	border-radius: 9px;
	z-index: 6;
	opacity: .05;
	box-shadow: none;
	pointer-events: none;
	transition: opacity .35s ease, box-shadow .35s ease, transform .35s ease;
}
/* Iga telefon on ÜHE pea kohal, mitte peade vahel: siluetid a, e ja h,
   telefon istub pea keskel ja ulatub ~15 px pea kohale - nii loeb ta
   ülestõstetud käena, mitte õhus hõljuva asjana. Sellepärast on igal oma
   bottom: pead on eri kõrgused. */
.phone-a { left: calc(50% - var(--crowd-w) * .70 - 15px); bottom: 40px; width: 30px; height: 52px; transform: rotate(-11deg) scale(.95); background: linear-gradient(180deg, #FFA245 0%, #FF8C1A 100%); }
.phone-b { left: calc(50% - var(--crowd-w) * .02 - 13px); bottom: 22px; width: 27px; height: 47px; transform: rotate(4deg)  scale(.95); background: linear-gradient(180deg, #9BF0BD 0%, #2E9C57 100%); }
.phone-c { left: calc(50% + var(--crowd-w) * .51 - 14px); bottom: 34px; width: 28px; height: 49px; transform: rotate(9deg)  scale(.95); background: linear-gradient(180deg, #8FB8FF 0%, #3A56E8 100%); }

.phone.is-lit { opacity: 1; }
.phone-a.is-lit { transform: rotate(-11deg) scale(1); box-shadow: 0 0 54px rgba(255, 140, 26, .95); }
.phone-b.is-lit { transform: rotate(4deg)  scale(1); box-shadow: 0 0 48px rgba(123, 227, 155, .85); }
.phone-c.is-lit { transform: rotate(9deg)  scale(1); box-shadow: 0 0 46px rgba(90, 130, 255, .85); }

/* =======================================================================
   PEALKIRI JA SISENEMINE
   ======================================================================= */

.home-hero {
	position: relative;
	z-index: 6;
	text-align: center;
	padding: 18px 0 12px 0;
}

.home-title {
	margin: 0 0 12px 0;
	font-family: var(--font-display);
	font-size: clamp(34px, 4.7vw, 66px);
	line-height: .9;
	font-weight: 400;
	letter-spacing: -.018em;
	text-transform: uppercase;
	text-shadow: 0 0 80px rgba(0, 0, 0, .95), 0 0 40px rgba(60, 90, 255, .35);
}
.home-title em {
	font-style: normal;
	color: var(--gold);
	text-shadow: 0 0 70px rgba(245, 196, 81, .7), 0 0 90px rgba(0, 0, 0, .9);
}

.home-line {
	margin: 0 auto 22px auto;
	max-width: 720px;
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.5;
	color: var(--text-dim);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .9);
}

/* -----------------------------------------------------------------------
   SISENEMISRIBA

   Lehel on ÜKS selge tegevus: liitu mänguga. Varem seisid "Ava laud
   ekraanil" ja "Liitu mänguga" kõrvuti ühesuurustena ja kasutaja pidi
   enne vajutamist mõtlema, kumb tema oma on - see hetk ei tohi olla lehe
   peategevuses.

   Laua avamine ei kadunud, ta lihtsalt ei võistle enam: ta on vaikne
   tekstilink riba all ja kasutab sedasama koodivälja. Nii on ka aus -
   laua avab üks inimene korra, liitub terve saal.
   ----------------------------------------------------------------------- */

.signin-box {
	margin: 0 auto;
	max-width: 880px;
	display: flex;
	align-items: flex-end;
	gap: 14px;
	background: rgba(4, 6, 20, .78);
	border: 1px solid rgba(245, 196, 81, .3);
	border-radius: 18px;
	padding: 16px 18px;
	box-shadow: 0 0 70px rgba(245, 196, 81, .1), 0 24px 60px rgba(0, 0, 0, .75);
	text-align: left;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.signin-box label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 7px;
}

.signin-box input[type=text] {
	box-sizing: border-box;
	height: 54px;
	background: rgba(0, 0, 0, .45);
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 17px;
	padding: 0 15px;
	width: 100%;
	transition: border-color var(--transition-time) ease, box-shadow var(--transition-time) ease;
}
.signin-box input[type=text]:focus {
	outline: none;
	border-color: rgba(245, 196, 81, .75);
	box-shadow: 0 0 0 3px rgba(245, 196, 81, .12);
}

.field-code { flex-shrink: 0; width: 200px; }
.field-code input[type=text] {
	border-color: rgba(245, 196, 81, .5);
	color: var(--gold);
	font-family: var(--font-numeric);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: .28em;
	text-align: center;
	text-transform: uppercase;
	padding: 0 0 0 .28em;
	text-shadow: 0 0 20px rgba(245, 196, 81, .6);
}
.field-name { flex-grow: 1; min-width: 0; }

.cta {
	height: 54px;
	border-radius: 11px;
	padding: 0 22px;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	transition: filter var(--transition-time) ease, transform var(--transition-time) ease;
}
.cta:hover { transform: translateY(-2px); }

/* Lehe ainus täidetud nupp */
.cta-join {
	flex-shrink: 0;
	border: 0;
	background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
	color: var(--accent-dark);
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 0 30px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 30px rgba(255, 140, 26, .45);
}
.cta-join:hover { filter: brightness(1.08); }

.signin-hint {
	margin: 12px auto 0 auto;
	max-width: 680px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-muted);
	text-wrap: balance;
}

/* Mängujuhi tee: vaikne rida, mitte nupp. Ta peab olema leitav, aga ei
   tohi peategevuse kõrval võrdsena seista. */
.host-path {
	margin: 14px 0 0 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 26px;
	font-size: 14px;
	color: var(--text-faint);
}
.host-link {
	border: 0;
	background: none;
	padding: 0 0 1px 0;
	margin-left: 3px;
	font: inherit;
	font-weight: 700;
	color: var(--gold);
	border-bottom: 1px solid rgba(245, 196, 81, .4);
	cursor: pointer;
	transition: border-color var(--transition-time) ease, color var(--transition-time) ease;
}
.host-link:hover { border-bottom-color: var(--gold); color: #FFD98A; }

/* AI-märk (site.css) on siin lause sees - veidi suurem, et rea
   14 px tekstiga kokku sobida. */
.host-path .ai-mark {
	margin: 0 6px 0 2px;
	font-size: 14px;
	vertical-align: 1px;
}

/* Tõendus otsustuskoha juures: üks vaikne rida sisenemisriba all, mitte
   eraldi plokk lehe lõpus, kuhu enamik külastajaid ei keri. */
.home-proof {
	margin: 20px auto 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--text-muted);
}
.home-proof span { padding: 0 20px; }
.home-proof span + span { border-left: 1px solid var(--border-dim); }
.home-proof b {
	font-family: var(--font-numeric);
	font-size: 16px;
	font-weight: 600;
	color: var(--gold);
	margin-right: 5px;
}

/* =======================================================================
   ALLPOOL: kuidas käib, numbrid, meedia
   ======================================================================= */

.home-bottom {
	position: relative;
	z-index: 6;
	/* Lehe lõpus ei tohi jääda tühja ala: varem oli siin sammude all veel
	   80 px tühjust ja leht lõppes nagu pooleli. */
	padding: 54px 0 0 0;
}

.howto {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px;
	max-width: 1000px;
	margin: 0 auto;
}
.howto-step-nr {
	width: 34px; height: 34px;
	border-radius: 9px;
	background: rgba(245, 196, 81, .08);
	border: 1px solid rgba(245, 196, 81, .35);
	color: var(--gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-numeric);
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 12px;
}
.howto-step h3 { margin: 0 0 5px 0; font-size: 17px; }
.howto-step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }


.home-note {
	max-width: 1000px;
	margin: 0 auto 40px auto;
	padding: 20px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.home-note h3 { margin: 0 0 6px 0; font-size: 18px; }
.home-note p { margin: 0; color: var(--text-muted); line-height: 1.55; }

/* =======================================================================
   KITSAS EKRAAN

   Telefonis on külaline peaaegu alati MÄNGIJA: tal on kood juba käes ja
   ta tahab sisse saada, mitte veenmist. Sellepärast vahetub järjekord -
   kood ja nimi tulevad ette, saal jääb alla nendele, kes alles kaaluvad.

   "Ava laud ekraanil" kaob telefonis üldse ära: keegi ei pane mängulauda
   telefoniekraanile. Kood jääb alles, sest kood on mõlema tee võti.
   ======================================================================= */

/* =======================================================================
   REŽIIM: SUURTELE / LASTELE

   Kaks mängu, üks lava. Lüliti vahetab saali, pealkirja, mängujuhi rea
   ja sammud; liitumisvorm on mõlemal sama, sest lapsed liituvad sama
   koodiga. Valiku teeb tmpl/dashboard/basic.html (klass is-kids).
   ======================================================================= */

.home:not(.is-kids) .for-kids,
.home.is-kids .for-classic { display: none !important; }

.home-mode {
	position: absolute;
	right: calc(100% + 22px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 7px;
	border-radius: 20px;
	border: 1px solid var(--border);
	background: rgba(5, 7, 31, .6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: var(--shadow-raised);
}
.home-mode-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 98px;
	height: 92px;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: var(--surface);
	color: var(--text-dim);
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--transition-time) ease, color var(--transition-time) ease, transform var(--transition-time) ease;
}
.home-mode-option:hover { background: var(--surface-strong); color: var(--text); }
.home-mode-option[aria-checked="true"] {
	background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -8px rgba(255, 140, 26, .6);
	color: var(--accent-dark);
	cursor: default;
}
.home-mode-option[data-mode="kids"] {
	font-family: var(--font-kids);
	font-size: 15px;
	font-weight: 600;
}
.home-mode-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Ikoonid: suurtel laud (3x2 lahtrit), väikestel kolm värvilist varianti */
.home-mode-icon { display: inline-grid; }
.home-mode-grid {
	grid-template-columns: repeat(3, 10px);
	gap: 3px;
}
.home-mode-grid i {
	height: 8px;
	border-radius: 2px;
	background: currentColor;
	opacity: .85;
}
.home-mode-grid i:nth-child(5) { opacity: .3; }
.home-mode-shapes {
	grid-auto-flow: column;
	gap: 4px;
}
.home-mode-shapes i {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--opt);
}
.home-mode-shapes i.kids-opt-1 { border-radius: 50%; }
.home-mode-shapes i.kids-opt-2 { transform: rotate(45deg) scale(.85); }


/* --- Lastelaud: 4 veergu, 4 rida --- */
.board-layer-kids { grid-template-rows: minmax(0, 8%) repeat(4, minmax(0, 1fr)); }
.board-layer-kids .board-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.board-layer-kids .board-topic {
	font-family: var(--font-kids);
	font-size: clamp(6px, 3.8cqh, 12px);
	font-weight: 600;
	letter-spacing: .06em;
}
.board-layer-kids .board-cell { font-size: clamp(11px, 12cqh, 34px); }

/* --- Laste küsimus: kasvab laua peale nagu klassikaline vihje --- */
.kclue {
	position: absolute;
	inset: 0;
	border-radius: 6px;
	background: linear-gradient(180deg, #2333B8 0%, #131C82 60%, #0D1462 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: scale(.05);
	transform-origin: 20% 40%;
	transition: transform .46s var(--transition-curve), opacity .28s ease;
}
.kclue.is-open { opacity: 1; transform: scale(1); }
.kclue-text {
	flex: 0 0 auto;
	padding: 2.5cqh 4cqw 2cqh;
	font-family: var(--font-kids);
	font-size: clamp(12px, 9.5cqh, 32px);
	font-weight: 600;
	line-height: 1.05;
	text-align: center;
}
.kclue-options {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.2cqw;
	padding: 0 3cqw 2.5cqh;
}
.kclue-option {
	position: relative;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1cqh;
	border-radius: 7px;
	background: var(--opt);
	color: var(--kids-ink);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .14);
	transition: opacity .4s ease, transform .4s var(--transition-curve), box-shadow .4s ease;
}
.kclue-option img {
	width: auto;
	height: 21cqh;
	max-width: 70%;
}
.kclue-option b {
	font-family: var(--font-kids);
	font-size: clamp(8px, 6cqh, 20px);
	font-weight: 600;
	line-height: 1;
}
.kclue-shape {
	position: absolute;
	top: 1.6cqh;
	left: 1.6cqh;
	width: 5.5cqh;
	height: 5.5cqh;
}
.kclue-plus {
	position: absolute;
	top: 1.4cqh;
	right: 1.4cqh;
	padding: .4cqh 1.2cqh;
	border-radius: 4px;
	background: var(--cell-20);
	color: var(--gold-20);
	font-family: var(--font-numeric);
	font-size: clamp(7px, 4.4cqh, 15px);
	font-style: normal;
	font-weight: 600;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .3s ease, transform .3s ease;
}
.kclue-option.is-dim { opacity: .35; }
.kclue-option.is-correct {
	transform: scale(1.04);
	box-shadow: 0 0 0 2px var(--text), 0 0 28px 4px rgba(255, 255, 255, .28), inset 0 2px 0 rgba(255, 255, 255, .35);
}
.kclue-option.is-correct .kclue-plus { opacity: 1; transform: none; }

.kclue-foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1.6cqw;
	padding: 2.2cqh 3cqw;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.kclue-label {
	font-size: clamp(6px, 3cqh, 10px);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}
.kclue-who {
	display: flex;
	gap: 1.2cqw;
}
.kclue-who .kids-avatar {
	--kids-avatar-size: clamp(14px, 8cqh, 28px);
	opacity: .28;
	transition: opacity .3s ease, transform .3s var(--transition-curve);
}
.kclue-who .kids-avatar.is-done { opacity: 1; transform: scale(1.08); }

/* --- Publik: loomad istuvad koos teleri ees, telefon süttib valitud värvi ---
   Varem oli rida akna laiune (space-around) ja loomad jäid üksteisest
   paarisaja piksli kaugusele - see ei lugenud publikuna, vaid laiali
   pillatud piltidena. Nüüd on nad üks tihe seltskond, mis ei ulatu
   telerist laiemale. Keskmised on madalamad, et laua alumine rida ja
   vastanute rida jääksid vabaks. */
.kaudience {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 4;
	transform: translateX(-50%);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(10px, 1.4vw, 22px);
	pointer-events: none;
}
.kseat {
	position: relative;
	display: flex;
	justify-content: center;
	transform: translateY(14%);
}
.kseat .kids-avatar {
	--kids-avatar-size: 76px;
	filter: brightness(.42) saturate(.7);
	transition: filter .35s ease;
}
.kseat-m .kids-avatar { --kids-avatar-size: 66px; }
.kseat-s .kids-avatar { --kids-avatar-size: 58px; }
.kseat.is-lit .kids-avatar { filter: none; }
.kphone {
	position: absolute;
	bottom: 78%;
	left: 58%;
	width: 22px;
	height: 38px;
	border-radius: 6px;
	background: #1B2150;
	opacity: .2;
	transform: rotate(9deg);
	transition: opacity .35s ease, box-shadow .35s ease, background .35s ease;
}
.kseat.is-lit .kphone {
	opacity: 1;
	background: var(--opt);
	box-shadow: 0 0 40px var(--opt);
}

@media (prefers-reduced-motion: reduce) {
	.kclue, .kclue-option, .kclue-plus, .kseat .kids-avatar, .kphone { transition: none; }
}

@media screen and (max-width: 1100px) {
	.home {
		/* Kitsal ekraanil ei korda me enam emakonteineri sisemist serva.
		   See valem andis 390 px aknas 66 px polsterdust kummalegi
		   poole - teler sai 258 px ja sisenemisriba oli asjatult kitsas.
		   Hero on nagunii täislaiune, nii et piisab omast servast. */
		padding: 0 20px;
		display: flex;
		flex-direction: column;
	}
	.home-hero { order: 1; padding-top: 22px; }
	.kaudience { display: none; }
	.home-hall { order: 2; padding: 34px 0 36px 0; }
	.home-bottom  { order: 3; padding-top: 34px; }

	.wall-wrap { width: 100%; }
	/* Kitsal ekraanil ei ole teleri kõrval ruumi: pult tuleb laua kohale ritta */
	.home-mode {
		position: static;
		transform: none;
		flex-direction: row;
		width: max-content;
		margin: 0 auto 14px auto;
		padding: 5px;
		border-radius: 999px;
	}
	.home-mode-option {
		flex-direction: row;
		width: auto;
		height: 38px;
		padding: 0 16px;
		border-radius: 999px;
	}
	/* Siluetid ja telefonid kaovad juba siit, mitte alles telefonis.
	   Koos nendega peab kahanema ka udu: ilma peadeta ei sulanda ta enam
	   midagi ja jääb lihtsalt tühjaks mustaks alaks laua ja sammude
	   vahele. Varu ja udu kõrgus peavad olema võrdsed. */
	.silhouette, .phone { display: none; }
	.home-hall { min-height: 0; padding-bottom: 36px; }
	.hall-front { height: 36px; }

	.signin-box {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
		border-radius: 16px;
	}
	.field-code, .field-name { width: 100%; flex: 1 1 100%; }
	.cta-join { width: 100%; font-size: 21px; }

	/* Telefonis on külaline mängija. Laua avamise rida ja nimevälja
	   täpsustus on siin lihtsalt müra. */
	/* Telefonis on külaline mängija: laua avamine on müra, aga oma mängu
	   tegemise link peab alles jääma. */
	.host-open { display: none; }

	.howto { grid-template-columns: 1fr; gap: 26px; }
}

@media screen and (max-width: 700px) {
	.home { padding: 0 16px; }
	.home-hero { padding-top: 16px; }


	/* Pisikesel ekraanil ei mahu kolm vastajat ritta. Loo mõte on see,
	   KES jõudis enne - esimene jääb alles, ülejäänud kaovad. */
	.buzzer:not(.is-first) { display: none; }
	.home-line {
		font-size: 15px;
		max-width: 36ch;
	}
	.videowall { padding: 8px; }
	.hall-beam, .hall-haze { display: none; }
	/* Kolm numbrit ei mahu telefonis ühte ritta ja murdusid 2+1, mis
	   nägi välja nagu viga. Kolm ühtlast veergu, number oma real. */
	.home-proof {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		font-size: 11px;
		line-height: 1.3;
	}
	.home-proof span {
		padding: 0 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.home-proof b { margin: 0 0 3px 0; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.videowall, .hall-beam, .hall-haze { animation: none; }
	.board-cursor { display: none; }
	.clue-panel { opacity: 1; transform: none; transition: none; }
	.buzzer { opacity: 1; transform: none; transition: none; }
	.clue-buttons { opacity: 1; transform: none; }
	.phone { opacity: 1; }
	.phone-a { box-shadow: 0 0 54px rgba(255, 140, 26, .95); }
	.clue-panel.is-open .clue-time span { width: 46%; transition: none; }
}