/***
 * Saidi kest: menüü, taust, tüpograafia, tabelid, vormid.
 *
 * Mängulaud oli juba tume (gameboard.css). See fail viib sama keele
 * ülejäänud saidile, et avaleht ja mäng ei näeks välja nagu kaks eri
 * toodet. Kõik värvid tulevad theme.css muutujatest.
 *
 * Laetakse VIIMASENA, custom.css järel, sest ta kirjutab vanu reegleid üle.
 ***/

/* =======================================================================
   ALUS
   ======================================================================= */

body {
	padding-top: 0;
	background-image: none;
	background-color: var(--bg-deep);
	background: var(--bg-board);
	background-attachment: fixed;
	color: var(--text);
	font-family: var(--font-ui);
	min-height: 100vh;
	overflow-x: clip;
}

/* Kiire klõbistamine ei tohi lehte suurendada. iOS Safari ei arvesta
   viewporti user-scalable=0, nii et topeltpuudutuse suumi saab keelata
   ainult touch-action'iga. See ei pärandu, seega ka nuppudele endile;
   näpuga suumimine (pinch) jääb alles. */
html,
body,
a,
button,
input,
select,
label,
[role="button"],
.button {
	touch-action: manipulation;
}

/* Täislaiuses ribad kasutavad calc(50% - 50vw). vw sisaldab kerimisriba
   laiust, sisulaius mitte, ja kummalegi servale tekib pool kerimisriba
   jagu ülelaiust - leht kerib küljele 6 px ja logiseb.

   Ainult bodyl olev overflow EI aita: see levib vaateaknale ja body ise
   käitub siis nagu "visible", nii et midagi ei lõigata. Reegel peab
   olema ka html-il. "clip", mitte "hidden", sest hidden teeks
   kerimiskonteineri ja kleepuv ülariba lakkaks töötamast. */
html {
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text);
	font-family: var(--font-ui);
	font-weight: 700;
	letter-spacing: -.01em;
}

a { color: var(--gold); }
a:hover { color: var(--gold-50); }

hr, .gradient-line2 {
	border: 0;
	height: 1px;
	background: var(--border);
}

.container-fluid {
	width: 100%;
	max-width: 1560px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}

/* Vana mängulaua vaade joondab ise - seal ei tohi kest vahele segada */
body.board .container-fluid {
	max-width: none;
	padding: 0;
}

/* =======================================================================
   ÜLARIBA (oma komponent, mitte Metro app-bar)
   Metro app-bar tõi kaasa valge tausta, fikseeritud kõrgused ja hulga
   !important-eid ning kukutas menüü kitsal ekraanil ribasse SISSE, mis
   venis ligi 1000 px kõrguseks. Siin on oma märgend ja oma käitumine.
   ======================================================================= */

.siteheader {
	position: sticky;
	top: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 68px;
	/* Riba sisu seisab samas veerus mis lehe sisu (.container-fluid: kuni
	   1560 px, 40 px serv), nii et logo on pealkirjaga ühel joonel ja ei
	   hüppa lehelt lehele. Täislaiusena jäi logo suurel ekraanil akna
	   nurka, sisust sadu piksleid eemale. Taust on niikuinii täislaiuses
	   (::before allpool). */
	margin: 0;
	padding: 0;
}
/* Metro reset annab päisele ::after-i (clearfix). Flex-reas on see
   nähtamatu element, mille ees seisab riba gap - kõik parempoolne
   nihkus 12-16 px sisuservast sissepoole. */
.siteheader::after { content: none; }

/* Taust ulatub üle kogu akna, sisu jääb sisulaiuse sisse */
.siteheader::before {
	content: "";
	position: absolute;
	inset: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	z-index: -1;
	background: rgba(5, 7, 31, .985);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--border-dim);
	transition: box-shadow var(--transition-time) ease, background .25s ease,
	            border-color .25s ease;
}
.siteheader.app-bar-collapsed::before { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }

/* Lehe tipus on riba läbipaistev (kõikjal peale mängulaua, vt index.php),
   et logo seisaks lehe tausta kuma peal. Aga niipea kui sisu hakkab selle
   alt läbi liikuma, peab taust tagasi tulema - muidu jookseb pealkiri
   menüüst läbi ja kumbki ei ole loetav. Klassi "siteheader-scrolled" paneb peale kerimiskuular (tmpl/index.html). */
.siteheader.siteheader-transparent.siteheader-scrolled::before {
	background: rgba(5, 7, 31, .985);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--border-dim);
}

.siteheader.siteheader-transparent::before {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}
.siteheader.siteheader-transparent.app-bar-collapsed::before {
	background: rgba(5, 7, 31, .985);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--border-dim);
}

.siteheader-logo { display: flex; align-items: center; flex-shrink: 0; }
.siteheader-logo .logo-image {
	height: 34px;
	width: auto;
	display: block;
	transition: filter var(--transition-time) ease;
}
.siteheader-logo:hover .logo-image {
	filter: brightness(1.12) drop-shadow(0 0 14px rgba(245, 196, 81, .35));
}

/* --- Menüüpunktid --- */

.siteheader .nav-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
}
.siteheader .nav-menu > li { display: flex; align-items: center;  position: relative; display: flex;
}

.siteheader .nav-item {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: var(--text-dim);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
	padding: 9px 18px;
	border-radius: 9px;
	white-space: nowrap;
	transition: color var(--transition-time) ease, background var(--transition-time) ease;
}
.siteheader .nav-item:hover {
	background: var(--surface);
	color: var(--text) !important;
}
.siteheader .nav-item.active {
	color: var(--text) !important;
	font-weight: 600;
}
/* Asukohta näitab joon, mitte kast. Täidetud kast luges tegevusena ja
   konkureeris "Uus mäng" nupuga, kuigi ütleb ainult "sa oled siin". */
.siteheader .nav-item.active::after {
	content: "";
	position: absolute;
	left: 18px; right: 18px;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: var(--gold);
	box-shadow: 0 0 12px rgba(245, 196, 81, .55);
}
.siteheader .nav-item > img { height: 15px; width: auto; margin-right: 7px; opacity: .75; }

/* Parem rühm surutakse serva */
.siteheader .nav-menu.ml-auto { margin-left: auto; }

/* AI-märk: pisike laualahter (sama sinine ja kuldne kui mängulaual).
   Ütleb, et mängu saab teha AI abil, aga ei ole ise nupp. Kasutusel
   päises, avalehe mängujuhi real ja mängude loendi nupul. */
.ai-mark {
	display: inline-block;
	flex: 0 0 auto;
	margin: 0 7px 0 0;
	padding: 1px 6px 2px 6px;
	border-radius: 4px;
	background: var(--cell-50);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .35);
	font-family: var(--font-numeric);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .05em;
	color: var(--gold);
	text-shadow: 0 0 10px rgba(245, 196, 81, .55);
}

/* "Uus mäng" on tegevus, mitte menüüpunkt */
.siteheader .nav-item.btn-newgame {
	background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
	color: var(--accent-dark) !important;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: 10px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 16px rgba(255, 140, 26, .3);
}
.siteheader .nav-item.btn-newgame:hover {
	filter: brightness(1.08);
	background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
	color: var(--accent-dark) !important;
}

/* Keelevahetus on tekst, mitte lipp: lipp tähistab riiki, mitte keelt,
   ja 14 px lipupilt on igal ekraanil hägune. */
.siteheader .nav-item.lang {
	padding: 7px 11px;
	font-family: var(--font-numeric);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--text-muted);
	border: 1px solid var(--border-dim);
	border-radius: 7px;
	margin-right: 6px;
}
.siteheader .nav-item.lang:hover {
	background: transparent;
	border-color: rgba(245, 196, 81, .5);
	color: var(--gold) !important;
}

/* "Logi sisse" on külalise peategevus - tal on piir ümber, "Registreeri"
   jääb tavaliseks tekstiks. Varem olid mõlemad ühtemoodi ja riba parem
   pool oli hierarhiata. */
.siteheader .nav-item.btn-signin {
	margin-left: 6px;
	border: 1px solid rgba(245, 196, 81, .45);
	color: var(--gold) !important;
	font-weight: 600;
}
.siteheader .nav-item.btn-signin:hover {
	background: rgba(245, 196, 81, .12);
	border-color: rgba(245, 196, 81, .75);
}

/* --- Kasutaja --- */

.siteheader .nav-item.user {
	gap: 10px;
	font-size: 14px;
	padding: 5px 14px 5px 5px;
	border-radius: 999px;
	border: 1px solid var(--border-dim);
	background: var(--surface);
}
.siteheader .nav-item.user:hover {
	background: var(--surface-strong);
	border-color: var(--border);
}
.siteheader .user-avatar {
	width: 30px; height: 30px; flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--gold-50) 0%, var(--gold) 100%);
	color: #0C1052;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700;
}
.siteheader .user-name { white-space: nowrap; }
.siteheader .user-arrow { flex-shrink: 0; opacity: .55; }
.siteheader .nav-item.user:hover .user-arrow { opacity: 1; }

/* --- Hamburger (ainult kitsal ekraanil) --- */

.siteheader-button {
	display: none;
	margin-left: auto;
	width: 46px; height: 46px;
	flex-shrink: 0;
	align-items: center;
	/* Ruudustik sisuserva, nagu logo teisel pool. Keskel jäi nähtav
	   ikoon 10 px servast eemale ja nupp paistis paigast ära; puutepind
	   jääb ikka 46 px. */
	justify-content: flex-end;
	border: 0;
	background: transparent;
	padding: 0;
	position: relative;
	z-index: 2;
}

/* -----------------------------------------------------------------------
   MENÜÜNUPP = VÄIKE MÄNGULAUD
   Üheksa lahtrit 3x3 ruudustikus. Lahti olekus kustuvad servakeskmised
   (2, 4, 6, 8) ja alles jäävad nurgad koos keskmisega - rist, mis on
   kokku pandud laua enda lahtritest. Sama nupp avab ja sulgeb.
   ----------------------------------------------------------------------- */

.button-grid {
	display: grid;
	grid-template-columns: repeat(3, 6px);
	grid-template-rows: repeat(3, 6px);
	gap: 4px;
}
.button-grid i {
	display: block;
	border-radius: 2px;
	/* Neutraalne hele, mitte laua sinine. Sinine on 7 px juures tumedal
	   ribal peaaegu nähtamatu ja nupp luges viie kuldse täpina, mitte
	   ruudustikuna. Hele toon loeb ka läbipaistva riba peal. */
	background: rgba(247, 245, 240, .3);
	box-shadow: none;
	transition: background .28s var(--transition-curve),
	            opacity .2s ease,
	            transform .28s var(--transition-curve);
}
/* Nurgad ja kese on kullas juba kinni olekus - nupp näeb välja nagu laud,
   millel osa lahtreid on juba mängitud */
.button-grid i:nth-child(1),
.button-grid i:nth-child(3),
.button-grid i:nth-child(5),
.button-grid i:nth-child(7),
.button-grid i:nth-child(9) {
	background: linear-gradient(180deg, var(--gold) 0%, #D9A93A 100%);
}
.siteheader-button:hover .button-grid i { transform: scale(1.12); }

body.menu-open .button-grid i:nth-child(2),
body.menu-open .button-grid i:nth-child(4),
body.menu-open .button-grid i:nth-child(6),
body.menu-open .button-grid i:nth-child(8) {
	opacity: 0;
	transform: scale(.4);
}
body.menu-open .button-grid i:nth-child(1),
body.menu-open .button-grid i:nth-child(3),
body.menu-open .button-grid i:nth-child(5),
body.menu-open .button-grid i:nth-child(7),
body.menu-open .button-grid i:nth-child(9) {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--gold) 100%);
	transform: scale(1.15);
}

/* =======================================================================
   TÖÖLAUD: navigatsioon riba keskel
   ======================================================================= */

@media screen and (min-width: 1241px) {
	.siteheader > .nav-menu:not(.ml-auto) {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media screen and (min-width: 993px) and (max-width: 1240px) {
	.siteheader .nav-item { padding: 8px 11px; font-size: 14px; }
	.siteheader-logo .logo-image { height: 36px; }
	.siteheader .user-name, .siteheader .user-arrow { display: none; }
	.siteheader .nav-item.user { padding: 5px; }
}

/* =======================================================================
   MOBIIL: paneel libiseb paremalt
   ======================================================================= */

/* -----------------------------------------------------------------------
   MOBIILIMENÜÜ = LAUA VEERG
   Sahtel, mille kohal seisab silt "MENÜÜ", on veebi vaikimisi lahendus.
   Siin on selle asemel täisekraan, kus iga punkt on laua tüpograafias
   suur rida: kuldne järjekorranumber, nimi Antonis, nool serva ääres.
   Read tulevad sisse ükshaaval, nagu laud end lahti keerab.
   ----------------------------------------------------------------------- */

.mobilemenu {
	position: fixed;
	inset: 0;
	/* Metro dialoogidest (.dialog 1050, .overlay 1040) kõrgemal: laual on
	   küsimuse- ja kuldvillaku tulemuste dialoog kogu aeg lahti ja menüü
	   avanes selle taha - mängust ei saanud välja. Menüüpunkt sulgeb
	   paneeli, nii et tema avatud dialoog jääb ikka pealmiseks. */
	z-index: 1100;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--bg-deep);
	padding: 84px 24px calc(30px + env(safe-area-inset-bottom, 0px)) 24px;
	/* overflow-x peab olema eraldi kirjas. Kui üks telg on "auto" ja
	   teine "visible", teeb brauser teisegi automaatseks - prožektorikuma
	   on paneelist laiem ja paneeli alla tekkis horisontaalne
	   kerimisriba. */
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	opacity: 0;
	transition: opacity .3s ease;
}
body.menu-open .mobilemenu { opacity: 1; }

/* Prožektorikuma ülalt, sama valgus mis avalehe saalis */
.mobilemenu-glow {
	position: absolute;
	left: 50%;
	top: -180px;
	width: 760px;
	max-width: 160%;
	height: 620px;
	transform: translateX(-50%);
	pointer-events: none;
	background: radial-gradient(48% 46% at 50% 34%,
	            rgba(40, 58, 190, .5) 0%,
	            rgba(8, 12, 48, .2) 52%,
	            rgba(1, 2, 8, 0) 100%);
}

/* Päisriba jääb paneeli peale - logo on nähtav ja sama nupp sulgeb menüü */
body.menu-open .siteheader { z-index: 1110; }
body.menu-open .siteheader::before { background: transparent; border-bottom-color: transparent; }

.mobilemenu .nav-menu {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;

	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Paneel on täisekraan, aga read ei tohi olla. Mängulaual avaneb
	   menüü ka 2400 px ekraanil ja ilma piiranguta venisid read üle terve
	   laiuse - sihtmärk oli hiiglaslik ja kiri hõljus tühjuses. */
	width: 100%;
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

.mobilemenu .nav-menu > li {
	display: block;
	border-top: 1px solid var(--border-dim);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .34s ease, transform .34s var(--transition-curve);
}
.mobilemenu .nav-menu > li:last-child { border-bottom: 1px solid var(--border-dim); }

/* Read tulevad järjest, 45 ms vahega */
.mobilemenu .nav-menu > li:nth-child(1) { transition-delay: .06s; }
.mobilemenu .nav-menu > li:nth-child(2) { transition-delay: .105s; }
.mobilemenu .nav-menu > li:nth-child(3) { transition-delay: .15s; }
.mobilemenu .nav-menu > li:nth-child(4) { transition-delay: .195s; }
.mobilemenu .nav-menu > li:nth-child(5) { transition-delay: .24s; }
.mobilemenu .nav-menu > li:nth-child(6) { transition-delay: .285s; }
.mobilemenu .nav-menu > li:nth-child(7) { transition-delay: .33s; }
.mobilemenu .nav-menu > li:nth-child(8) { transition-delay: .375s; }
body.menu-open .mobilemenu .nav-menu > li { opacity: 1; transform: none; }

.mobilemenu .nav-item {
	display: flex;
	align-items: center;
	gap: 16px;
	/* Paneeli piirab KÕRGUS, mitte laius: madalas aknas (sülearvuti
	   maastikuasendis, mängulaud) ei mahtunud read ära. min() võtab
	   kummast tahes mõõdust väiksema. */
	padding: clamp(10px, 2.2vh, 17px) 2px;
	font-family: var(--font-display);
	font-size: clamp(20px, min(7.6vw, 5.4vh), 38px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--text);
	text-align: left;
	background: transparent;
}

/* Nool tuleb serva äärde ja liigub vajutusel */
.mobilemenu .nav-item::after {
	content: "";
	margin-left: auto;
	align-self: center;
	width: 9px; height: 9px;
	border-right: 2px solid var(--gold);
	border-top: 2px solid var(--gold);
	transform: rotate(45deg);
	opacity: .5;
	transition: transform .2s ease, opacity .2s ease;
}
.mobilemenu .nav-item:active::after { transform: rotate(45deg) translate(3px, -3px); opacity: 1; }

/* AI-märk kasvab paneeli suure kirjaga kaasa; vahe tuleb rea gap-ist */
.mobilemenu .ai-mark {
	margin: 0 -6px 0 0;
	padding: 3px 8px 1px 8px;
	border-radius: 6px;
	font-size: .45em;
	letter-spacing: .05em;
}

.mobilemenu .nav-item.active { color: var(--gold); }

/* Uus mäng on tegevus, mitte sihtkoht - tema on nupp paneeli all */
.mobilemenu .nav-menu > li:has(.btn-newgame) { border: 0; }
.mobilemenu .nav-item.btn-newgame {
	justify-content: center;
	margin-bottom: 18px;
	padding: 17px 20px;
	border-radius: 13px;
	font-size: 21px;
	background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
	color: var(--accent-dark);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 30px rgba(255, 140, 26, .3);
}
.mobilemenu .nav-item.btn-newgame::after { display: none; }

/* Menüüpunktid keskele, abiread veidi eemale.

   EI kasuta automaatseid veeriseid. Varem oli esimesel real ja abireal
   kummalgi margin-top: auto, et vaba ruum jaguneks pooleks. Sisselogitud
   vaates abirida puudub ("ENGLISH" ja "Logi välja" ei ole seal menüüs),
   nii et üksainus automaatne veeris neelas kogu vaba ruumi - esimene
   punkt sai margin-top: 308px ja kogu menüü vajus paneeli alla serva.

   Nüüd tsentreerib justify-content kogu rühma ja abirida eraldub
   kindla vahega. See käitub ühtemoodi igas kombinatsioonis. */
.mobilemenu .nav-menu > li:has(.user),
.mobilemenu .nav-menu > li:has(a[href="/logout"]),
.mobilemenu .nav-menu > li:has(a[href^="https://jeopardy"]) {
	margin-top: 22px;
}
/* Kaks abirida järjest ei vaja vahet kaks korda */
.mobilemenu .nav-menu > li:has(a[href="/logout"]) + li:has(a[href^="https://jeopardy"]),
.mobilemenu .nav-menu > li:has(.user) + li:has(a[href="/logout"]) {
	margin-top: 0;
}

/* Kasutaja ja jaluse read: vaiksem hääl, väiksem kiri */
.mobilemenu .nav-menu > li:has(.user) > .nav-item,
.mobilemenu .nav-menu > li:has(a[href="/logout"]) > .nav-item,
.mobilemenu .nav-menu > li:has(a[href^="https://jeopardy"]) > .nav-item {
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 15px 4px;
	color: var(--text-muted);
}
.mobilemenu .nav-menu > li:has(.user) > .nav-item::after,
.mobilemenu .nav-menu > li:has(a[href="/logout"]) > .nav-item::after,
.mobilemenu .nav-menu > li:has(a[href^="https://jeopardy"]) > .nav-item::after {
	opacity: .3;
	width: 7px; height: 7px;
}

@media screen and (max-width: 992px) {
	/* Päis võtab siit alates oma serva. Muidu pärib ta sisukonteineri
	   40 px polsterduse ja logo ning menüünupp seisavad telefonis
	   peaaegu lehe keskel - see ei ole tavapärane ega hea. Negatiivne
	   välisserv tõmbab päise akna laiuseks, polsterdus annab talle
	   õige serva tagasi. 20 px on sama, mis avalehel samas laiuses,
	   nii et logo joondub lehe sisuga. */
	.siteheader {
		height: 66px;
		gap: 12px;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: 20px;
		padding-right: 20px;
	}
	/* Kogu lehe sisu saab sama serva, mis päis. Seni hoidis
	   sisukonteiner 40 px ka 390 px ekraanil ja iga vaade - loend,
	   juhend, kasutajad - kaotas 44 px kasutatavat laiust. */
	.content-container { padding-left: 20px !important; padding-right: 20px !important; }

	/* Menüüpaneeli read joonduvad logoga */
	.mobilemenu { padding-left: 20px; padding-right: 20px; }
	.mobilemenu .nav-item { padding-left: 0; padding-right: 0; }
	.siteheader-logo .logo-image { height: 36px; }
	.siteheader > .nav-menu { display: none; }
	.siteheader-button { display: flex; }
	/* Telefonis oli riba sunnitud läbipaistmatuks, sest kartsin
	   loetavuse pärast. Seda hirmu enam ei ole: kerimisel paneb
	   "siteheader-scrolled" tausta niikuinii tagasi. Lehe tipus jookseb saali
	   kuma logo tagant läbi, täpselt nagu töölaual. */
	/* Taust ei tohi menüü all liikuda. Ainult bodyst EI piisa: kui
	   html-il on oma overflow (meil overflow-x: clip), ei levi body oma
	   väärtus enam vaateaknale ja leht kerib edasi. */
	html:has(body.menu-open),
	body.menu-open { overflow: hidden; }
}

@media screen and (min-width: 993px) {
	/* Mängulaual on paneel kasutusel ka laial ekraanil - seal on KOGU
	   menüü nupu taga, et laua ees ei oleks ühtegi juhuslikku väljapääsu. */
	body:not(.board) .mobilemenu { display: none !important; }
}

/* =======================================================================
   MÄNGULAUD: menüü on nupu taga igal laiusel

   Laud käib projektorile või telerisse terve saali ees. Iga nähtav link
   ribal on võimalus kogemata mängust välja klõpsata ja seda ei saa
   publiku ees tagasi võtta. Ribale jääb ainult logo ja menüünupp.
   ======================================================================= */

body.board .siteheader > .nav-menu { display: none; }
body.board .siteheader-button { display: flex; }
body.board .mobilemenu { padding-left: 20px; padding-right: 20px; }
body.board .mobilemenu .nav-item { padding-left: 0; padding-right: 0; }

/* Taust ei tohi menüü all liikuda ka laual */
html:has(body.board.menu-open),
body.board.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.mobilemenu, .mobilemenu .nav-menu > li, .button-grid i { transition: none; }
}

/* =======================================================================
   SISU
   ======================================================================= */

.container-fluid > div > h3 {
	font-size: 28px;
	margin: 30px 0 18px 0;
}

/* Tühi pealkiri (vaade pani legend'i tühjaks) ei tohi võtta 48 px ruumi */
.container-fluid > div > h3:empty { display: none; }

/* Mängulaual joonistab sisu ise, kest ei lisa ülaservale midagi */
body.board .container-fluid > div > h3 { display: none; }

/* =======================================================================
   PINNAD: kaardid, tabelid, vormid
   Need on üldised, et iga leht oleks loetav ka enne, kui ta oma kuju saab.
   ======================================================================= */

.table-surface,
.dataTables_wrapper {
	color: var(--text-dim);
	width: 100%;
	box-sizing: border-box;
}

table.dataTable,
table.table:not(.playArea) {
	background: transparent;
	color: var(--text-dim);
	border-collapse: separate;
	border-spacing: 0 6px;
}

table.dataTable thead th,
table.table:not(.playArea) thead th {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 0 16px 12px 16px;
}

table.dataTable tbody td,
table.table:not(.playArea) tbody td {
	background: var(--surface);
	border: 0;
	border-top: 1px solid var(--border-dim);
	border-bottom: 1px solid var(--border-dim);
	color: var(--text);
	font-size: 15px;
	padding: 15px 16px;
}
table.dataTable tbody td:first-child,
table.table:not(.playArea) tbody td:first-child {
	border-left: 1px solid var(--border-dim);
	border-radius: var(--radius) 0 0 var(--radius);
}
table.dataTable tbody td:last-child,
table.table:not(.playArea) tbody td:last-child {
	border-right: 1px solid var(--border-dim);
	border-radius: 0 var(--radius) var(--radius) 0;
}

table.dataTable tbody tr:hover td,
table.table:not(.playArea).row-hover tbody tr:hover td {
	background: var(--surface-strong);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	padding: 8px 12px;
}

/* --- Otsinguvälja rist ---
   Metro lisab otsinguväljale tühjendusnupu, mis ka DataTablesi uuesti
   filtreerima paneb (keyup). Nupp on välja sees paremas servas ja paistab
   ainult siis, kui väljal on teksti. Brauseri enda rist on peidus, muidu
   oleks Chrome'is kaks risti. Rist on samad kaks joont kui dialoogi
   sulgemisnupul. */
.dataTables_filter input[type=search]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	display: none;
}
.dataTables_filter .input { position: relative; height: auto; }
.dataTables_filter .input .button-group {
	position: absolute;
	top: 50%;
	right: 5px;
	/* Metro sisend on positsioneeritud ja kattis nupu kinni: klõps läks väljale */
	z-index: 2;
	display: flex;
	transform: translateY(-50%);
}
.dataTables_filter .input .input-clear-button {
	position: relative;
	width: 26px;
	height: 26px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
	transition: color var(--transition-time) ease, background var(--transition-time) ease;
}
.dataTables_filter .input .input-clear-button:hover {
	background: var(--surface-strong);
	color: var(--text);
}
.dataTables_filter .input .input-clear-button > * { display: none; }
.dataTables_filter .input .input-clear-button::before,
.dataTables_filter .input .input-clear-button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.5px;
	border-radius: 1px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}
.dataTables_filter .input .input-clear-button::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.dataTables_filter .input:has(input:placeholder-shown) .input-clear-button { display: none; }

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
	color: var(--text-muted);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	color: var(--text-dim) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--gold) !important;
	border-color: var(--gold) !important;
	color: #0C1052 !important;
}

/* Metro vormielemendid */
.input, input[type=text], input[type=password], input[type=email], textarea, select {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
}
.input input, .input .input-clear-button { color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }

.button {
	background: var(--surface-strong);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-family: var(--font-ui);
	font-weight: 600;
}
.button:hover { background: var(--border); color: var(--text); }

.button.primary, .button.success {
	background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
	border: 0;
	color: var(--accent-dark);
}

/* Dialoogid, mis ei ole mängulaua omad */
.dialog:not(.jeopardyQuestion) {
	background: var(--question-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	color: var(--text);

	width: min(430px, calc(100vw - 32px)) !important;
	max-width: calc(100vw - 32px) !important;
	/* Metro asetab dialoogi JS-iga ja arvutab vasaku serva enda laiuse
	   järgi. Meie muudame laiust, nii et paneme tsentreerimise ise paika. */
	left: 50% !important;
	right: auto !important;
	margin-left: 0 !important;
	transform: translateX(-50%);
	/* Läbipaistmatu pind. --surface on rgba(255,255,255,.05), mis mujal on
	   õige (õrn kiht lehe peal), aga modaali taga peab sisu KADUMA -
	   muidu kumab mängulaud väljade tagant läbi ja dialoog ei loe
	   omaette pinnana. */
	background: linear-gradient(180deg, #0D1233 0%, #090D28 100%);
	border: 1px solid var(--border);
	border-radius: 18px;
	box-shadow: 0 34px 90px rgba(0, 0, 0, .78), 0 0 90px rgba(52, 78, 230, .16);
	color: var(--text);
}
.dialog:not(.jeopardyQuestion) .dialog-title { color: var(--text); 
	position: relative;
	padding: 24px 62px 0 24px;
	font-family: var(--font-display);
	font-size: 23px;
	font-weight: 400;
	letter-spacing: .005em;
	text-transform: uppercase;
	color: var(--text);
	border: 0;
	background: transparent;
}

/* =======================================================================
   ADMINI SQL-LOGI

   Varem seisis logi lehe all lahtise tabelina: iga vaate lõpus oli
   kolmkümmend rida SQL-i, mida keegi ei lugenud. Nüüd on jaluses üks
   vaikne rida - päringute arv ja koguaeg - ja klõps avab paneeli.

   Paneel tuleb alt, katab lehe alumise poole ja on ise keritav. Read on
   aeglasemast kiiremani, sest logi mõte on leida see üks päring, mis
   võtab kaua - mitte lugeda kõiki läbi.
   ======================================================================= */

.footer-sql {
	margin-left: 18px;
	padding: 3px 10px;
	border: 1px solid var(--border-dim);
	border-radius: 999px;
	background: transparent;
	color: var(--text-faint);
	font-family: var(--font-ui);
	font-size: 11px;
	letter-spacing: .04em;
	cursor: pointer;
	transition: color var(--transition-time) ease, border-color var(--transition-time) ease;
}
.footer-sql:hover { color: var(--text-muted); border-color: var(--border); }
.footer-sql-count { font-family: var(--font-numeric); font-weight: 600; color: var(--text-muted); }
.footer-sql-time  { font-family: var(--font-numeric); color: var(--text-faint); }

.sqlpanel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1200;
	max-height: 62vh;
	display: flex;
	flex-direction: column;
	background: var(--question-bg);
	border-top: 1px solid var(--border);
	box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
}
.sqlpanel[hidden] { display: none; }

.sqlpanel-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--border-dim);
}
.sqlpanel-title {
	font-family: var(--font-display);
	font-size: 15px;
	letter-spacing: .1em;
	color: var(--gold);
}
.sqlpanel-summary { font-size: 12px; color: var(--text-muted); }
.sqlpanel-close {
	margin-left: auto;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.sqlpanel-close:hover { background: var(--surface-strong); color: var(--text); }

.sqlpanel-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 6px 0 14px 0;
}

.sqlrow {
	display: grid;
	grid-template-columns: 34px 72px 1fr;
	gap: 10px;
	align-items: start;
	padding: 7px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.sqlrow-nr { font-family: var(--font-numeric); font-size: 11px; color: var(--text-faint); text-align: right; }
.sqlrow-time {
	font-family: var(--font-numeric);
	font-size: 12px;
	color: var(--text-muted);
	text-align: right;
}
.sqlrow-sql {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--text-dim);
	white-space: normal;
	word-break: break-word;
}
.sqlrow-sql b { color: var(--text-muted); font-weight: 600; }

/* Aeglane päring on ainus, mille pärast see logi üldse olemas on */
.sqlrow.is-warm .sqlrow-time { color: var(--accent); }
.sqlrow.is-slow { background: rgba(224, 62, 62, .07); }
.sqlrow.is-slow .sqlrow-time { color: var(--wrong); font-weight: 700; }

/* =======================================================================
   JALUS
   Instagram ja Facebook olid varem navigatsioonis "Minu mängude" kõrval,
   sama kaaluga kui rakenduse enda osad. Nende koht on siin.
   ======================================================================= */

/***
 * Jalus: kaks korrust (kujundusvariant A).
 *   üleval  [logo  kirjeldus]              [Juhend Lastemäng Kontakt English]
 *   all     [© 2026 Nutivillak]            [ig fb   Powered by itanic]
 * Igal laiusel sama ülesehitus: ≤ 980 px laotub ülemine korrus üksteise
 * alla, ≤ 560 px lähevad lingid 2x2 ja alumine korrus kahele reale.
 * Varem oli kõik ühes flex-reas ja murdus kontrollimatult (lingid püstises
 * tulbas, «Powered by» kaheks, telefonis tsentreeritud teine kujundus).
 ***/
.site-footer {
	position: relative;
	margin: 60px 0 0 0;
	padding: 30px 0 24px;
	font-size: 13px;
	color: var(--text-muted);
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	height: 1px;
	background: var(--border-dim);
}

.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--gold); }

.footer-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 22px;
}
.footer-id {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}
.footer-logo { display: block; flex-shrink: 0; }
/* pildi sees on läbipaistev äär - logo serv joondub teksti servaga */
.footer-logo img { display: block; height: 26px; width: auto; margin-left: -3px; }
.footer-tagline { color: var(--text-muted); font-size: 14px; }
.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-size: 15px;
	font-weight: 500;
}

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--border-dim);
}
.footer-copy { white-space: nowrap; font-variant-numeric: tabular-nums; }
.footer-meta {
	display: flex;
	align-items: center;
	gap: 22px;
}
.site-footer .footer-social {
	display: flex;
	gap: 16px;
	align-items: center;
	font-size: 17px;
}
.site-footer .footer-social a { color: var(--text-muted); }
.site-footer .footer-social a:hover { color: var(--gold); }

/* itanici logo jaluses: vaikne, tõuseb esile alles hõljutades */
.footer-itanic { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.footer-itanic span {
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--text-faint);
	transition: color var(--transition-time) ease;
}
.footer-itanic:hover span { color: var(--text-muted); }
.footer-itanic img {
	height: 17px;
	width: auto;
	display: block;
	opacity: .5;
	transition: opacity var(--transition-time) ease;
}
.footer-itanic:hover img { opacity: 1; }

body.board .site-footer { display: none; }

@media screen and (max-width: 1100px) {
	.site-footer { margin-top: 40px; }
}

/* Tahvel: ülemine korrus laotub - logo ja kirjeldus, nende all lingid */
@media screen and (max-width: 980px) {
	.footer-top { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* Jalus oli üks murdumatu rida ja ulatus 390 px ekraanil 410 px-ni -
   "Powered by itanic" jäi serva taha. Kitsal ekraanil laotame ta kahte
   ritta ja tsentreerime. */
@media screen and (max-width: 700px) {
	/* Sama serv, mis avalehel samas laiuses */
	.siteheader { padding-left: 16px; padding-right: 16px; }
	.content-container { padding-left: 16px !important; padding-right: 16px !important; }
	.mobilemenu { padding-left: 16px; padding-right: 16px; }
}

/* Telefon: sama ülesehitus, kokku surutud. Kõik vasakult joondatud nagu
   suurel ekraanil, lingid 2x2 (suured puutealad), alumisel korrusel
   sotsiaalmeedia ja itanic üleval, © kõige all. */
@media screen and (max-width: 560px) {
	.site-footer { padding: 26px 0 22px; }
	.footer-id { flex-direction: column; align-items: flex-start; gap: 8px; }
	.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; width: 100%; }
	.footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
	.footer-meta { width: 100%; justify-content: space-between; }
}

/* =======================================================================
   KURSOR
   Tume taust neelab süsteemi väikese musta noole ära. Siin on sama nool,
   aga suurem ja kuldse täidisega, nii et ta on igal taustal näha.
   Klikitavatel asjadel on valge nool - vahe on kohe silmaga näha.

   Nool on muutujas, sest sama pilti läheb vaja mitmes kohas. Vana
   oranži täpi kursor (custom.css) on eemaldatud - see kirjutas kõik
   !important-iga üle ja täppi ei olnud tumedal taustal peaaegu näha.

   See on päris CSS-kursor, mitte hiirt jälitav element: null viivitust
   ja süsteemi enda käitumine (tekstikursor väljal) jääb alles.
   ======================================================================= */

:root {
	--cursor-gold:  url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 38 38'%3E%3Cpath d='M7 3 L7 30 L13.5 23.8 L18.2 33.5 L23.8 30.8 L19.2 21.4 L28.5 21.4 Z' fill='%23F5C451' stroke='%2305071F' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 2;
	--cursor-white: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 38 38'%3E%3Cpath d='M7 3 L7 30 L13.5 23.8 L18.2 33.5 L23.8 30.8 L19.2 21.4 L28.5 21.4 Z' fill='%23FFFFFF' stroke='%2305071F' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 2;
}

/* html kaasa, muidu jääb kerimisriba ääres süsteemi nool */
html, body {
	cursor: var(--cursor-gold), default;
}

/* Kõik, mille peale saab vajutada. Viimased read on vana koodi
   selektorid, kus seisab oma cursor: pointer - ilma nendeta vilksataks
   seal süsteemi käsi. */
a, button, [onclick], .nav-item, .paginate_button,
summary, label[for], select, [role="button"],
.clickable, .clickedit, .show-history-btn,
.dataTables_paginate .next, .dataTables_paginate .previous,
.dataTables_paginate span a,
.customNoFilter .sorting_asc, .customNoFilter .sorting_desc {
	cursor: var(--cursor-white), pointer;
}

input, textarea, [contenteditable] {
	cursor: text;
}

/* Puuteekraanil kohandatud kursorit ei ole vaja */
@media (pointer: coarse) {
	html, body, a, button, [onclick], .nav-item { cursor: auto; }
}

/* =======================================================================
   FOOKUS
   Brauseri oma sinine raam on selle lehe värvidest väljas ja Metro
   kustutas selle mõnes kohas hoopis ära (outline: 0), nii et klaviatuuriga
   liikuja ei näinud, kus ta on. Siin on üks selge kuldne rõngas, mis
   ilmub ainult klaviatuuriga liikudes - hiirega klõpsates seda ei teki.
   ======================================================================= */

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 4px;
}
/* Metro paneb mitmel pool outline: 0 - võtame selle tagasi */
.app-bar .nav-item:focus-visible,
.siteheader :focus-visible,
.mobilemenu :focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}
/* Menüüpaneelis on rida ise juba lai - rõngas käib ümber terve rea.
   Outline ei sobi: real ei ole külgedel polsterdust, nii et -2px nihkega
   lõikas raam läbi kirja ja parempoolse noole. Raam on pseudoelement,
   mis ulatub külgedel rea servast välja ja jääb üles-alla rea sisse
   (eraldusjooned jäävad puutumata). */
.mobilemenu .nav-item { position: relative; }
.mobilemenu .nav-item:focus-visible { outline: none; }
.mobilemenu .nav-item:focus-visible::before {
	content: "";
	position: absolute;
	inset: 4px -12px;
	border: 2px solid var(--gold);
	border-radius: 8px;
	pointer-events: none;
}
/* Uus mäng on nupp - raam käib ühtlaselt tema ümber */
.mobilemenu .nav-item.btn-newgame:focus-visible::before { inset: -5px; border-radius: 17px; }
/* Paneel saab fookuse puudutusega avamisel - tema ümber raami ei ole vaja */
.mobilemenu:focus { outline: none; }
/* Hiirega klõpsates ei ole rõngast vaja */
:focus:not(:focus-visible) { outline: none; }

/* =======================================================================
   DIALOOGID

   Metro dialoog oli helesinine kast valge looriga, rohelise X-i ja
   rohelise "Sulge" nupuga - ei kuulunud kokku millegagi mujal saidil.
   Siin on üks kujundus, mis katab nad kõik: sisselogimine, registreerimine,
   kasutaja konto, laua avamine ja kinnitusteated.

   Mängulaua enda küsimusedialoogid (.jeopardyQuestion) jäävad puutumata -
   neil on oma roll ja oma kujundus gameboard.css-is.
   ======================================================================= */

.overlay {
	background-color: rgba(2, 3, 12, .82) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}



.dialog:not(.jeopardyQuestion) .dialog-content {
	padding: 18px 24px 6px 24px;
	margin-top: 0 !important;
}

.dialog:not(.jeopardyQuestion) .dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px 20px 24px;
	border-top: 1px solid var(--border-dim);
}
.dialog:not(.jeopardyQuestion) .dialog-actions > * { margin: 0; min-width: 0; }
/* Tühi tegevusteriba ei tohi joont ega ruumi võtta (nt playDialog) */
.dialog:not(.jeopardyQuestion) .dialog-actions:empty { display: none; }

/* --- Sulgemisrist: ring, mitte roheline nupp --- */
.dialog:not(.jeopardyQuestion) .button.closer,
.dialog:not(.jeopardyQuestion) .closer {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--border-dim);
	border-radius: 50%;
	background: transparent !important;
	color: var(--text-muted) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	float: none !important;
	transition: color var(--transition-time) ease, border-color var(--transition-time) ease,
	            background var(--transition-time) ease;
}
/* Rist on kaks joont, mitte fondimärk: × asukoht sõltub fondi mõõtudest
   ja jäi ringis alati veidi kõrvale. Jooned on ringi keskpunktis igas fondis. */
.dialog:not(.jeopardyQuestion) .button.closer::before,
.dialog:not(.jeopardyQuestion) .closer::before,
.dialog:not(.jeopardyQuestion) .button.closer::after,
.dialog:not(.jeopardyQuestion) .closer::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.5px;
	margin: 0;
	border-radius: 1px;
	background: currentColor;
	font-size: 0;
	transform: translate(-50%, -50%) rotate(45deg);
}
.dialog:not(.jeopardyQuestion) .button.closer::after,
.dialog:not(.jeopardyQuestion) .closer::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.dialog:not(.jeopardyQuestion) .button.closer:hover,
.dialog:not(.jeopardyQuestion) .closer:hover {
	background: var(--surface-strong) !important;
	border-color: var(--border);
	color: var(--text) !important;
}

/* --- Vaheteade sisu sees --- */
.dialog:not(.jeopardyQuestion) .modalSubHeader {
	margin: 0 0 10px 0;
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.dialog:not(.jeopardyQuestion) form + form { margin-top: 22px !important; }
.dialog:not(.jeopardyQuestion) .form-group { margin-bottom: 10px; }
.dialog:not(.jeopardyQuestion) small { color: var(--text-faint); font-size: 12px; line-height: 1.45; }

/* --- Tagasitulija vihje sisselogimise aknas --- */
/* Rahustav märkus, mitte teade: pole kasti ega ikooni, uus kasutaja
   loeb sellest üle. */
.login-returning { margin: 0 0 16px 0; color: var(--text-dim); font-size: 13px; line-height: 1.45; }

/* --- Parooli taastamine sisselogimise aknas --- */
/* Vaikne link, mitte teine nupp: enamik inimesi tuleb sisse logima,
   mitte parooli taastama. */
.login-forgot { margin: 2px 0 6px 0; text-align: center; font-size: 13px; }
.login-forgot > a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.login-forgot > a:hover { color: var(--text); }
.login-forgot p { margin: 10px 0; color: var(--text-dim); line-height: 1.45; text-align: left; }

/* --- Konto aken: e-posti kinnituse olek --- */
.useredit-hint { display: block; margin: 6px 2px 0 2px; }
.useredit-verify {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: -2px 0 12px 0;
	padding: 9px 12px;
	border-radius: var(--radius);
	border: 1px solid rgba(245, 196, 81, .32);
	background: rgba(245, 196, 81, .08);
	color: var(--text-dim);
	font-size: 12.5px;
	line-height: 1.4;
}
.useredit-verify a { flex-shrink: 0; color: var(--gold); font-weight: 700; text-decoration: none; }
.useredit-verify a:hover { text-decoration: underline; }

/* --- Väljad: sama keel mis avalehe sisenemisribal --- */
/* Väli on kast, mille sees on silt üleval ja sisestus all - sama muster
   mis avalehe sisenemisribal. Varem oli silt välja EES ("Eesnimi:") ja
   tühi väli nägi välja nagu oleks juba täidetud. */
.dialog:not(.jeopardyQuestion) .input {
	/* Ruudustik, sest kastis on kolm asja: silt (terve laius, esimene
	   rida), sisestus ja Metro oma nupud (teine rida kõrvuti). Lihtne
	   veerg lükkaks nupud eraldi reale ja kast kasvaks 86 px kõrguseks. */
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 8px;
	height: auto;
	padding: 8px 14px 9px 14px;
	background: rgba(0, 0, 0, .42);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color var(--transition-time) ease, box-shadow var(--transition-time) ease;
}
.dialog:not(.jeopardyQuestion) .input:focus-within {
	border-color: rgba(245, 196, 81, .7);
	box-shadow: 0 0 0 3px rgba(245, 196, 81, .12);
}
.dialog:not(.jeopardyQuestion) .input input {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
	height: 26px;
	background: transparent;
	border: 0;
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 16px;
	padding: 0;
}
.dialog:not(.jeopardyQuestion) .input input::placeholder { color: var(--text-faint); }
.dialog:not(.jeopardyQuestion) .input input:-webkit-autofill {
	-webkit-text-fill-color: var(--text);
	-webkit-box-shadow: 0 0 0 100px #0D1136 inset;
}
.dialog:not(.jeopardyQuestion) .input .prepend {
	grid-column: 1 / -1;
	grid-row: 1;
	display: block;
	line-height: 1;
	padding: 0 0 7px 0;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--text-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
}
.dialog:not(.jeopardyQuestion) .input .button-group {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: center;
}
/* Tühjenduskrõps igal väljal on müra - välja tühjendab ka klaviatuur.
   Parooli näitamise nupp on päris abi ja jääb alles. */
.dialog:not(.jeopardyQuestion) .input .input-clear-button { display: none; }
.dialog:not(.jeopardyQuestion) .input .button-group .button {
	height: 26px;
	min-width: 0;
	padding: 0 4px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--text-faint);
}
.dialog:not(.jeopardyQuestion) .input .button-group .button:hover {
	background: transparent;
	color: var(--gold) !important;
}

/* --- Parooli silmanupp (password-reveal.js) ---
   Lüliti, mitte Metro "hoia all" nupp. Ikoon näitab tegevust: lahtine silm
   = näita, läbikriipsutatud = peida. Kriips tõmmatakse joonena sisse, nii
   et vahetus on näha ka siis, kui pilk on sisestatud tekstil. Puutepind on
   nähtavast ikoonist suurem, aga negatiivne veeris hoiab välja kõrguse
   paigal. */
.pwreveal-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	margin: -6px -10px -6px 0;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--transition-time) ease, background var(--transition-time) ease;
}
.pwreveal-button:hover { color: var(--text-dim); background: var(--surface); }
.pwreveal-button.is-shown { color: var(--gold); }
.pwreveal-button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pwreveal-button svg {
	position: absolute;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity var(--transition-time) ease, transform var(--transition-time) ease;
}
.pwreveal-button .pwreveal-eye-off { opacity: 0; transform: scale(.85); }
.pwreveal-button .pwreveal-eye-off path:last-child {
	stroke-dasharray: 26;
	stroke-dashoffset: 26;
	transition: stroke-dashoffset .28s ease .06s;
}
.pwreveal-button.is-shown .pwreveal-eye { opacity: 0; transform: scale(.85); }
.pwreveal-button.is-shown .pwreveal-eye-off { opacity: 1; transform: none; }
.pwreveal-button.is-shown .pwreveal-eye-off path:last-child { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
	.pwreveal-button .pwreveal-eye-off path:last-child { transition: none; }
}

/* Tavaline väli (parooli taastamise leht): nupp istub välja paremas servas */
.pwreveal {
	position: relative;
	display: block;
}
.pwreveal > input { padding-right: 60px; }
.pwreveal > .pwreveal-button {
	position: absolute;
	top: 50%;
	right: 9px;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 0;
}
.pwreveal > .pwreveal-button svg { width: 22px; height: 22px; }

/* --- Nupud --- */
/* Flex tsentreerib teksti ka <a class="button"> puhul (nt «Logi välja»),
   millele Metro annab 34 px reavahe ja tekst jäi 44 px nupus üles. */
.dialog:not(.jeopardyQuestion) .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 18px;
	line-height: 1;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-strong);
	color: var(--text-dim);
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	transition: background var(--transition-time) ease, color var(--transition-time) ease,
	            border-color var(--transition-time) ease, filter var(--transition-time) ease;
}
.dialog:not(.jeopardyQuestion) .button:hover {
	background: var(--surface);
	border-color: var(--border);
	color: var(--text) !important;
}
/* Peategevus: sama kuldne nupp mis mujal saidil */
.dialog:not(.jeopardyQuestion) .button.success,
.dialog:not(.jeopardyQuestion) input.button.success {
	height: 50px;
	border: 0;
	background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
	color: var(--accent-dark) !important;
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: .03em;
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 24px rgba(255, 140, 26, .32);
}
.dialog:not(.jeopardyQuestion) .button.success:hover { filter: brightness(1.08); }
.dialog:not(.jeopardyQuestion) .button.dark {
	background: transparent;
	border-color: var(--border-dim);
	color: var(--text-muted);
}

/* --- Google nupp ---
   Nupu joonistab Google Identity Services iframe'ina, seest seda kujundada
   ei saa. Konteiner hoiab nupu kõrguse enne skripti laadimist kinni, et
   dialoog ei hüppaks, kui nupp ilmub. */
.dialog:not(.jeopardyQuestion) .gsi-button {
	display: flex;
	min-height: 44px;
}

/* Laua avamise dialoog: kaks teed, millest üks on tavaline valik.
   Varem olid mõlemad ühesugused hallid plokid ilma pealkirjata ja
   kasutaja ei saanud aru, mida ta valib.

   Klassinimi on oma, mitte .joingame: custom.css-is on pärandreegel
   .joingame { background-color: #143D59 !important }, mis võitles siin
   vastu. Seda klassi ei kasutata enam kusagil mujal. */
.dialog:not(.jeopardyQuestion) .dialog-text {
	margin: 0 0 16px 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-muted);
}
.dialog:not(.jeopardyQuestion) .home-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	border: 1px solid var(--border);
	border-radius: 11px;
	background: transparent;
	color: var(--text-dim) !important;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
}
.dialog:not(.jeopardyQuestion) .home-cta:hover {
	background: var(--surface-strong);
	color: var(--text) !important;
	border-color: var(--border);
}
.dialog:not(.jeopardyQuestion) .home-cta-primary {
	border: 0;
	background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
	color: var(--accent-dark) !important;
	font-family: var(--font-display);
	font-size: 19px;
	letter-spacing: .03em;
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 24px rgba(255, 140, 26, .32);
}
.dialog:not(.jeopardyQuestion) .home-cta-primary:hover {
	filter: brightness(1.08);
	background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
}

/* =======================================================================
   LAADURID

   Kaks tükki, sest ootamisel on kaks eri suurust:

   .loader-logo  suur - logo tähed hüppavad lainena. Terve ekraani
                 ootamine (küsimuse avamine, mängija ooteekraan).
   .loader-grid  väike - 3x3 mängulaud keerab diagonaalse lainena.
                 Mahub tabeli sisse ja räägib menüünupuga üht keelt.

   Tähed EI OLE tekst: fonti, millega logo tehtud on, ei ole projektis
   olemas (seal on ainult Roboto, CFCrayons ja ursula-handschrift, ning
   ükski neist ei ole see). Iga täht on viil päris logo pildist, nii et
   laaduris on täpselt sama kiri mis päises.

   Vana laadur oli valge ring oranži rõngaga ja PNG-logoga - heleda
   kujunduse jäänuk, mis tumedal taustal särab valge plärakana.

   Tähtede märgendi ehitab tmpl/index.html skript, et 10 <i>-elementi ei
   peaks viies mallis käsitsi kordama.
   ======================================================================= */

@keyframes loaderBounce {
	0%, 60%, 100% { transform: translateY(0) scaleY(1); }
	12%           { transform: translateY(-2px) scaleY(.92); }
	32%           { transform: translateY(-.42em) scaleY(1.04); }
	50%           { transform: translateY(0) scaleY(.94); }
}

.loader-logo {
	display: inline-flex;
	align-items: flex-end;
	height: 44px;
	user-select: none;
	-webkit-user-select: none;
}
.loader-logo > i {
	display: block;
	height: 44px;
	background-image: url('../img/nutivillak-light.png');
	background-size: 119.13px auto;
	background-repeat: no-repeat;
	transform-origin: 50% 100%;
	animation: loaderBounce 1.15s cubic-bezier(.3, .7, .4, 1) infinite;
}

/* Tähtede viilud päris logo pildist. Piirid on arvutatud pildi enda
   alfakanalist: tühjade veergude keskkohad, "t" ja "i" vahel kõige
   hõredam veerg (need kaks puutuvad kokku). Viilud katavad pildi
   pidevalt, nii et kõrvuti asetatuna taastub logo täpselt. */
.loader-logo > i:nth-child(1) { width: 17.66px; background-position: -4.19px 0; animation-delay: 0ms; }
.loader-logo > i:nth-child(2) { width: 11.67px; background-position: -21.85px 0; animation-delay: 70ms; }
.loader-logo > i:nth-child(3) { width: 11.67px; background-position: -33.52px 0; animation-delay: 140ms; }
.loader-logo > i:nth-child(4) { width: 6.29px; background-position: -45.20px 0; animation-delay: 210ms; }
.loader-logo > i:nth-child(5) { width: 13.47px; background-position: -51.48px 0; animation-delay: 280ms; }
.loader-logo > i:nth-child(6) { width: 5.99px; background-position: -64.95px 0; animation-delay: 350ms; }
.loader-logo > i:nth-child(7) { width: 6.59px; background-position: -70.94px 0; animation-delay: 420ms; }
.loader-logo > i:nth-child(8) { width: 6.59px; background-position: -77.52px 0; animation-delay: 490ms; }
.loader-logo > i:nth-child(9) { width: 15.56px; background-position: -84.11px 0; animation-delay: 560ms; }
.loader-logo > i:nth-child(10) { width: 15.27px; background-position: -99.67px 0; animation-delay: 630ms; }
/* Laadur teeb 13 elementi pikema logo jaoks; Nutivillakul on 10 tähte */
.loader-logo > i:nth-child(n+11) { display: none; }

/* jeopardy.world: sama meetodiga viilud jeopardyworld-light.png pildist.
   "r" ja "d" ning "y" ja "W" puutuvad kokku - seal on piir kõige hõredamas
   veerus. */
.site-en .loader-logo > i { background-image: url('../img/jeopardyworld-light.png'); background-size: 182.29px auto; }
.site-en .loader-logo > i:nth-child(n+11) { display: block; }
.site-en .loader-logo > i:nth-child(1) { width: 11.97px; background-position: -9.58px 0; animation-delay: 0ms; }
.site-en .loader-logo > i:nth-child(2) { width: 13.77px; background-position: -21.55px 0; animation-delay: 70ms; }
.site-en .loader-logo > i:nth-child(3) { width: 13.62px; background-position: -35.32px 0; animation-delay: 140ms; }
.site-en .loader-logo > i:nth-child(4) { width: 13.47px; background-position: -48.94px 0; animation-delay: 210ms; }
.site-en .loader-logo > i:nth-child(5) { width: 14.82px; background-position: -62.41px 0; animation-delay: 280ms; }
.site-en .loader-logo > i:nth-child(6) { width: 8.68px; background-position: -77.22px 0; animation-delay: 350ms; }
.site-en .loader-logo > i:nth-child(7) { width: 13.77px; background-position: -85.90px 0; animation-delay: 420ms; }
.site-en .loader-logo > i:nth-child(8) { width: 13.17px; background-position: -99.67px 0; animation-delay: 490ms; }
.site-en .loader-logo > i:nth-child(9) { width: 17.96px; background-position: -112.84px 0; animation-delay: 560ms; }
.site-en .loader-logo > i:nth-child(10) { width: 13.32px; background-position: -130.80px 0; animation-delay: 630ms; }
.site-en .loader-logo > i:nth-child(11) { width: 10.03px; background-position: -144.12px 0; animation-delay: 700ms; }
.site-en .loader-logo > i:nth-child(12) { width: 5.24px; background-position: -154.15px 0; animation-delay: 770ms; }
.site-en .loader-logo > i:nth-child(13) { width: 13.92px; background-position: -159.39px 0; animation-delay: 840ms; }


@keyframes loaderSpin {
	0%, 48%, 100% { transform: rotateY(0deg);   background: var(--loader-cell-dim); }
	24%           { transform: rotateY(180deg); background: var(--loader-cell-light); }
}

.loader-grid {
	--loader-step: 7px;
	--loader-gap: 4px;
	--loader-cell-dim: linear-gradient(180deg, #2B3ED6 0%, #16218F 100%);
	--loader-cell-light: linear-gradient(180deg, var(--gold) 0%, #D9A93A 100%);
	display: inline-grid;
	grid-template-columns: repeat(3, var(--loader-step));
	grid-template-rows: repeat(3, var(--loader-step));
	gap: var(--loader-gap);
}
.loader-grid > i {
	display: block;
	border-radius: 2px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
	animation: loaderSpin 1.7s ease-in-out infinite;
}
/* Diagonaalne laine: viivitus kasvab mööda diagonaali */
.loader-grid > i:nth-child(1) { animation-delay: 0ms; }
.loader-grid > i:nth-child(2),
.loader-grid > i:nth-child(4) { animation-delay: 110ms; }
.loader-grid > i:nth-child(3),
.loader-grid > i:nth-child(5),
.loader-grid > i:nth-child(7) { animation-delay: 220ms; }
.loader-grid > i:nth-child(6),
.loader-grid > i:nth-child(8) { animation-delay: 330ms; }
.loader-grid > i:nth-child(9) { animation-delay: 440ms; }

.loader-grid.is-large { --loader-step: 13px; --loader-gap: 6px; }

/* --- Kate, mille peal laadur seisab --- */

.itanic-spinner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-direction: column;
}

/* Tabeli kohal: tume loor, mitte vana valge rgba(245,245,245,.7) */
.ajax-lister-container .itanic-spinner-container {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	background: rgba(5, 7, 31, .72);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
	.loader-logo > i, .loader-grid > i { animation: none; }
	.loader-grid > i:nth-child(odd) { background: var(--loader-cell-light); }
}

/* =======================================================================
   LOENDI LAADUR (DataTables)

   DataTables näitab laadurit oma elemendis .dataTables_processing ja
   lülitab seda inline-stiiliga display: none / block. Meie EI TOHI
   display'd üle kirjutada - siis jääks laadur alatiseks nähtavale.
   Kujundame ainult katte ja selle sisu.

   Kate on tabeli kohal, mitte üle terve akna: wrapperil on juba
   position: relative, nii et inset: 0 katab täpselt loendi ala ja
   ülejäänud leht jääb kasutatavaks.
   ======================================================================= */

.dataTables_wrapper { position: relative; }

.dataTables_processing {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	min-height: 140px;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: rgba(5, 7, 31, .74);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 5;
	color: var(--text);
}
.dataTables_processing .itanic-spinner-container {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

/* Loendi laadur: laial ekraanil logo, kitsal ruudustik.

   DataTables lisab laaduri DOM-i alles päringu ajal, nii et tähed on
   mallis kirjas tähthaaval - teeLaadurid() jõuaks liiga hilja. Mujal
   ehitab märgendi ikka skript. */
.loader-narrow { display: none; }

@media screen and (max-width: 700px) {
	.loader-wide { display: none; }
	.loader-narrow { display: inline-grid; }
}

/* -----------------------------------------------------------------------
   Teated (toast) - custom.js asendab Metro.toast.create.

   Läbipaistmatu paneel nagu dialoogidel, sest teade ilmub tihti
   mängulaua peale. Tüüpi näitab süttinud märk vasakul (nagu lauaplaat)
   ja allservas tühjenev ajariba - mitte terve kasti värv, nii et
   punane viga ei karju ja roheline edu ei näe välja nagu nupp.
   ----------------------------------------------------------------------- */

.sitetoast {
	--sitetoast-color: var(--text-dim);
	--sitetoast-offset: 0px;
	position: fixed;
	left: 50%;
	bottom: calc(22px + env(safe-area-inset-bottom, 0px));
	/* Dialoogidest (1050) ja mobiilimenüüst (1100) kõrgemal - teade
	   tuleb tihti just dialoogis tehtud tegevuse kohta */
	z-index: 1200;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	max-width: min(480px, calc(100vw - 32px));
	padding: 13px 20px 15px 13px;
	overflow: hidden;
	background: var(--panel-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-panel), 0 0 46px color-mix(in srgb, var(--sitetoast-color) 16%, transparent);
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	opacity: 0;
	transform: translate(-50%, calc(14px - var(--sitetoast-offset))) scale(.97);
	transition: transform .34s var(--transition-curve), opacity .2s ease;
}
.sitetoast-shown {
	opacity: 1;
	transform: translate(-50%, calc(0px - var(--sitetoast-offset))) scale(1);
}
.sitetoast-leaving {
	opacity: 0;
	transform: translate(-50%, calc(8px - var(--sitetoast-offset))) scale(.98);
	pointer-events: none;
}

.sitetoast-success { --sitetoast-color: var(--correct); }
.sitetoast-alert   { --sitetoast-color: var(--wrong); }
.sitetoast-warning { --sitetoast-color: var(--accent); }
.sitetoast-info    { --sitetoast-color: var(--text-dim); }

.sitetoast-mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--sitetoast-color);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 18px color-mix(in srgb, var(--sitetoast-color) 50%, transparent);
	color: var(--bg-deep);
	font-size: 14px;
}

.sitetoast-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.sitetoast-text a { color: inherit; text-decoration: underline; }

.sitetoast-timer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--sitetoast-color);
	opacity: .75;
	transform-origin: left center;
	animation: sitetoast-drain linear forwards;
}
.sitetoast-paused .sitetoast-timer { animation-play-state: paused; }

@keyframes sitetoast-drain {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* Liikumise vähendamisel jookseks riba hetkega tühjaks - siis pole seda vaja */
@media (prefers-reduced-motion: reduce) {
	.sitetoast-timer { display: none; }
}

@media screen and (max-width: 520px) {
	.sitetoast {
		width: calc(100vw - 32px);
		font-size: 14px;
	}
}