/***
 * Nutivillaku disainižetoonid.
 *
 * Kõik värvid, gradiendid, varjud ja tüpograafia ühes kohas. Muu CSS
 * viitab ainult nendele muutujatele, mitte kunagi otse värvikoodidele —
 * nii saab kogu ilme ühest failist ümber häälestada.
 *
 * VÄRVIDE ROLLID (neid ei tohi segamini ajada):
 *   --gold    = PUNKTID. Lahtrite väärtused, skoorid, panused.
 *   --accent = INIMESED JA ELAV TEGEVUS. Vastajad, «mäng käib», nupud.
 * Kui mõlemad tähistaksid kõike, ei tähendaks kumbki midagi.
 ***/

:root {
	/* --- Põhi --- */
	--bg-deep:      #05071F;
	--bg-board:       radial-gradient(130% 95% at 50% -10%, #1A2570 0%, #0A0F3C 48%, #05071F 100%);
	--text:            #F7F5F0;
	--text-dim:       #C6CCEC;
	--text-muted:     #8A92CC;
	--text-faint:  #5E66A8;

	/* --- Pinnad --- */
	--surface:             rgba(255, 255, 255, .05);
	--surface-strong:       rgba(255, 255, 255, .08);
	--border:             rgba(255, 255, 255, .12);
	--border-dim:        rgba(255, 255, 255, .07);
	/* Läbipaistmatu ujuv paneel (teated): selle all võib olla mängulaud */
	--panel-bg:          linear-gradient(180deg, #121A4A 0%, #0A0F33 100%);
	--shadow-panel:      0 18px 48px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07);

	/* --- Punktid: kuld astmeliselt väärtuse järgi --- */
	/* Sama number kordub reas kuus korda. Aste annab reale oma tooni,
	   nii et monotoonsus kaob ja värv hakkab infot kandma. */
	--gold:             #F5C451;
	--gold-10:          #C9A05A;
	--gold-20:          #D9B25B;
	--gold-30:          #E8C25C;
	--gold-40:          #F3CE63;
	--gold-50:          #FFDC7A;
	--on-gold:          #0C1052;   /* kiri kuldse nupu peal */

	/* --- Eriküsimuste medalid: hõbe- ja kuldvillaku pealkirja läige --- */
	/* Ainult pealkirja metall (villak.css). Panus ise on punkt ja
	   kannab ikka --gold värvi. */
	--sheen-silver:     linear-gradient(180deg, #FFFFFF 0%, #E2E6F5 46%, #A9B1D4 72%, #D8DDF0 100%);
	--sheen-gold:       linear-gradient(180deg, #FFF3C9 0%, #FFDC7A 40%, #E0A93A 70%, #F7D27A 100%);

	/* --- Inimesed ja elav tegevus --- */
	--accent:          #FF8C1A;
	--accent-light:     #FFA245;
	--accent-dark:     #2A1400;
	--accent-edge:     #8A4A0C;   /* füüsilise nupu külg - see, millesse ta vajutades vajub */
	/* Valatud kuppel (mängija pult): valguse poolt läige, varju poolt
	   sügavam toon ja kupli paks külg, mis süvendist välja paistab */
	--accent-shine:    #FFC57E;
	--accent-deep:     #DD6604;
	--accent-side:     #B85F0C;
	/* Sama kuppel punasena: liiga vara vajutus (mängija pult) */
	--wrong-shine:     #FF9A8E;
	--wrong-base:      #F05A4C;
	--wrong-deep:      #B8261A;
	--wrong-side:      #8E1C12;
	--wrong-edge:      #5A0E08;
	--wrong-ink:       #3A0804;

	/* --- Hinnangud --- */
	--correct:             #7BE39B;
	--wrong:             #FF9B9B;
	--correct-bg:       rgba(46, 156, 87, .2);
	--wrong-bg:       rgba(158, 43, 43, .28);

	/* --- Lastemäng: vastusevariandid (kids.css) --- */
	/* Kolmas värviroll: VARIANDID. Iga variant on värv JA kujund
	   (0 kolmnurk, 1 ring, 2 ruut, 3 romb), et värvipime laps eristaks
	   kujundit. Punktid jäävad kuldseks ja inimesed oranžiks. */
	--kids-opt-0:        #FF5E5B;
	--kids-opt-1:        #3AA8FF;
	--kids-opt-2:        #FFD84D;
	--kids-opt-3:        #2FD08A;
	--kids-ink:          #0A0F3C;   /* kujund ja kiri variandi peal */

	/* Mängija loomapildi taust: 6 looma x 4 värvi = 24 mängijat */
	--kids-disc-blue:    #2B3ABD;
	--kids-disc-purple:  #6A2C8C;
	--kids-disc-green:   #0F6B5C;
	--kids-disc-brown:   #8A3B1F;

	/* Lõpuekraani esikolmiku äär: kuld on --gold, need on 2. ja 3. koht */
	--kids-medal-2:      #D8DDF0;
	--kids-medal-3:      #D39A6A;

	/* --- Lahtrid: süttinud plaadid, mitte joonistatud ruudud --- */
	--cell-10:        linear-gradient(180deg, #212DA4 0%, #16208C 52%, #101872 100%);
	--cell-20:        linear-gradient(180deg, #2431AC 0%, #172194 52%, #111976 100%);
	--cell-30:        linear-gradient(180deg, #2735B4 0%, #18229A 52%, #121A78 100%);
	--cell-40:        linear-gradient(180deg, #2B3ABD 0%, #1A25A3 52%, #131C80 100%);
	--cell-50:        linear-gradient(180deg, #3042C8 0%, #1D29AE 52%, #141E88 100%);
	--cell-done:    linear-gradient(180deg, #0A0E38 0%, #0C1142 100%);
	--topic-bg:      linear-gradient(180deg, #202C96 0%, #141D6E 100%);
	--question-bg:    linear-gradient(180deg, #1B2596 0%, #141C74 100%);
	--question-top:  #1B2596;   /* paneeli ülemine toon - video pealkirjakate peab sellega sulanduma */

	/* --- Varjud --- */
	--shadow-tile:       inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.45);
	--shadow-tile-hover:   inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px rgba(0,0,0,.55);
	--shadow-inset:       inset 0 2px 10px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.04);
	--shadow-topic:       inset 0 1px 0 rgba(255,255,255,.16), 0 4px 12px rgba(0,0,0,.4);
	--shadow-raised:    0 12px 34px rgba(0,0,0,.45);

	/* --- Tüpograafia --- */
	/* Oswald ainult seal, kus numbrid KORDUVAD (laud, mängukood) — kitsas
	   ja korduses rahulik. Space Grotesk kõikjal mujal, sh ühekaupa
	   esinevatel numbritel (skoorid, ajad), kus iseloom on pluss. */
	--font-ui:          'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-numeric:     'Oswald', 'Space Grotesk', sans-serif;
	/* Suured pealkirjad avalehel - lavakiri, mitte tekstikiri */
	--font-display:    'Anton', 'Oswald', sans-serif;
	/* Lastemängu pealkirjad: ümar ja sõbralik, Anton on lastele liiga terav */
	--font-kids:       'Fredoka', 'Space Grotesk', sans-serif;

	/* Skaleeruvad suurused — suurendusnuppe ei ole enam vaja */
	--size-cell:    clamp(26px, 3.6vw, 58px);
	--size-topic:     clamp(11px, 1.05vw, 17px);
	--size-question:   clamp(24px, 3.1vw, 50px);
	--size-code:      clamp(20px, 1.9vw, 32px);

	/* --- Muu --- */
	--radius:          7px;
	--radius-lg:     12px;
	--cell-gap:      8px;
	--transition-time:    .16s;
	--transition-curve:  cubic-bezier(.2, .8, .3, 1);
}

/***
 * Liikumine: kes on süsteemis liikumise vähendamise sisse lülitanud,
 * ei pea seda taluma.
 ***/
@media (prefers-reduced-motion: reduce) {
	:root { --transition-time: 0s; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}