/* Ebitdle – vzhľad „učiť sa hrou“: kráľovsky tmavomodrý základ (hlavička, pásy, tlačidlá) s bielymi a ľadovo modrými
   plochami na čítanie, akcenty obloha, slnko, bobuľa; žiadne zelené ani tyrkysové odtiene, ani pri správnej odpovedi.
   Zaoblené písmo Nunito a hmatateľné tlačidlá so spodnou hranou, ktorá sa pri stlačení zatlačí.
   Jedna vec naraz: celoobrazovkové herné obrazovky (úvod, lekcia, úloha) s postupom hore a pevným pásom dole,
   ktorý po odpovedi ukáže spätnú väzbu. Cesta: Základy ako spojené karty, pyramída Consultingu, graf levelu v IB.
   Pohyb len keď ho hráč nemá vypnutý (prefers-reduced-motion).
   Písmo Nunito (The Nunito Project Authors, SIL OFL 1.1) je na vlastnom serveri, pozri /fonts/LICENSE.txt.
   Všetko sa kreslí cez CSS a súbory SVG z /img (žiadne vložené štýly, CSP style-src 'self'). */
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(/fonts/nunito-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(/fonts/nunito-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Denný (svetlý) a nočný (tmavý) režim: tokeny pre tmu sú pod :root a platia pri html[data-theme="dark"].
   data-theme nastaví /js/theme.js ešte pred vykreslením – podľa voľby hráča (prepínač v hlavičke), inak podľa systému.
   Kontrasty svetlej témy (WCAG 2.1 AA, overené výpočtom):
   – text --ink 16 : 1, --ink-2 8,5 : 1, --ink-3 6,3 : 1 na bielej (aspoň 5,3 : 1 na ľadovo modrých podkladoch);
   – na tmavomodrej hlavičke (--navy) text --navy-ink 12 : 1 a biely fokus;
   – tlačidlá s textom majú tmavšie odtiene (--royal-btn, --sky-btn, --berry-btn, farby hier --tbtn), biely text aspoň 5 : 1;
   – jasné farby (--royal, --sky, --sun, --berry, --tbright) sú len plochy, okraje a ikony, nikdy podklad pod drobný text;
   – text na jemných podkladoch: --royal-ink, --sky-ink, --sun-ink, --berry-ink, --tdeep (aspoň 5 : 1);
   – okraje polí a prepínačov --edge 4,3 : 1.
   Pri systémovom „Zvýšiť kontrast“ (prefers-contrast: more) sa tmavnú sivé texty a okraje, pozri koniec súboru. */
:root {
  color-scheme: light;
  --white: #FFFFFF;
  --wash: #F2F6FD;
  --wash-2: #E5ECF8;
  --line: #DCE4F2;
  --line-2: #C3CFE4;
  --edge: #6B7A96;
  --ink: #0E1C3B;
  --ink-2: #3B4A68;
  --ink-3: #536079;
  --navy: #0B1E4B; --navy-2: #16306E; --navy-ink: #D9E3FA;
  --royal: #3F6BF2; --royal-edge: #2449C2; --royal-soft: #E4ECFF; --royal-ink: #17398F;
  --royal-btn: #1E44B4; --royal-btn-edge: #112C7C;
  --sky: #1CA0E8; --sky-soft: #E3F3FF; --sky-ink: #0B5FA0; --sky-btn: #1769C2; --sky-btn-edge: #0F4F96;
  --sun: #FFB020; --sun-edge: #E08A00; --sun-soft: #FFF1D6; --sun-ink: #8A4B00;
  --berry: #E5484D; --berry-soft: #FFE4E1; --berry-ink: #B42318; --berry-btn: #C5352B; --berry-btn-edge: #94231B; --berry-line: #F0B6B1;
  --amber-ink: #B45309; --mix-3: #7D8A96;
  --zak: #1B3577; --zak-bright: #3F6BF2; --zak-soft: #E4ECFF; --zak-deep: #142A63; --zak-edge: #0B1E4B;
  --kons: #1D4ED8; --kons-bright: #5B86F7; --kons-soft: #E6EDFE; --kons-deep: #173C9C; --kons-edge: #12317F;
  --ib: #4C3BC9; --ib-bright: #7B6CF4; --ib-soft: #ECEAFE; --ib-deep: #37299C; --ib-edge: #291E7E;
  /* sémantické tokeny, ktoré sa v tme menia inak než ich svetlý zdroj */
  --accent-text: var(--royal-btn); --you-ink: var(--sky-btn); --focus: var(--sky-btn); --ib-text: var(--ib);
  --solid: var(--ink); --pop: var(--ink); --raised: var(--white); --shade: var(--ink); --on-bright: #0E1C3B;
  --sans: 'Nunito', ui-rounded, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --r: 18px; --r-s: 14px; --r-xs: 10px;
  --w: 1080px;
  --nav-h: 0px;
  /* názvy, ktoré používa aj admin (/admin/admin.css) */
  --paper: var(--white); --sheet: var(--white); --panel: var(--white); --soft: var(--wash); --soft-2: var(--wash-2);
  --rule: var(--line); --rule-2: var(--line-2);
  --good: var(--royal); --good-soft: var(--royal-soft); --good-ink: var(--royal-ink);
  --warn: var(--sun); --warn-soft: var(--sun-soft); --mid-ink: var(--sun-ink);
  --crit: var(--berry-ink); --crit-soft: var(--berry-soft);
  --gold: var(--sun); --gold-soft: var(--sun-soft); --gold-ink: var(--sun-ink);
  --input: var(--sky-btn); --input-soft: var(--sky-soft);
  --serif: var(--sans);
  --bg: var(--white); --card: var(--white); --line-1: var(--line);
  --primary: var(--sky-btn); --primary-ink: var(--sky-ink); --primary-soft: var(--sky-soft); --on-primary: #FFFFFF; --input-ink: var(--sky-btn);
  --font-ui: var(--sans); --font-num: var(--sans);
  --shadow: 0 2px 0 var(--line); --radius: 14px;
}
.g-zak { --tc: var(--zak); --tbtn: var(--zak); --tedge: var(--zak-edge); --tbright: var(--zak-bright); --tsoft: var(--zak-soft); --tdeep: var(--zak-deep); }
.g-kons, .ck { --tc: var(--kons); --tbtn: var(--kons); --tedge: var(--kons-edge); --tbright: var(--kons-bright); --tsoft: var(--kons-soft); --tdeep: var(--kons-deep); }
.g-ib, .cb { --tc: var(--ib); --tbtn: var(--ib); --tedge: var(--ib-edge); --tbright: var(--ib-bright); --tsoft: var(--ib-soft); --tdeep: var(--ib-deep); }
.g-sun { --tc: var(--sun-ink); --tbright: var(--sun); --tsoft: var(--sun-soft); --tdeep: var(--sun-ink); }

/* ---------- nočný režim (html[data-theme="dark"]: voľba hráča alebo systém; Apple HIG dark-mode.md, color.md) ----------
   Rovnaké tokeny, tmavé hodnoty: podklad tmavý navy, zmäkčená biela na text, akcenty zosvetlené pre text na tme.
   Hlavička a spodný pás ostávajú v značkovej navy #0B1E4B (vystupujú nad tmavším podkladom).
   Plné tlačidlá s bielym textom majú tmavšie odtiene (biely text ≥ 5,3 : 1) a od podkladu sa líšia aspoň 2,3 : 1 + spodná hrana.
   Kontrasty na podklade --white #0A1228 (WCAG, vypočítané): --ink 15,7 : 1, --ink-2 10,5, --ink-3 7,7 (na --wash-2 6,2);
   --royal-ink 10,3 (na --royal-soft 7,8), --sky-ink 10,2 (na --sky-soft 8,0), --sun-ink 12,1 (na --sun-soft 9,6),
   --berry-ink 9,2 (na --berry-soft 8,0), --kons-deep 10,5 / --ib-deep 10,3 / --zak-deep 10,7 (na svojich -soft ≥ 8,0);
   biely text na --royal-btn 5,8, --sky-btn 5,3, --berry-btn 5,4, --kons 6,7, --ib 7,6, --zak 8,2; --edge 5,7 (na --wash 5,2);
   fokus --focus 8,6 na podklade a 7,5 na navy. Admin (html.only-light) ostáva svetlý. Tlač vždy svetlá (len screen). */
@media screen {
  :root[data-theme="dark"]:not(.only-light) {
    color-scheme: dark;
    --white: #0A1228;
    --wash: #111C38;
    --wash-2: #18264A;
    --line: #22325A;
    --line-2: #34477A;
    --edge: #7F8EB4;
    --ink: #E6ECF8;
    --ink-2: #B8C3DC;
    --ink-3: #9AA7C4;
    --navy: #0B1E4B; --navy-2: #1F3A7E; --navy-ink: #D9E3FA;
    --royal: #5B82F5; --royal-edge: #2F55D0; --royal-soft: #16295C; --royal-ink: #A9C0FF;
    --royal-btn: #2F5BDB; --royal-btn-edge: #17359A;
    --sky: #38B2F0; --sky-soft: #0D2A48; --sky-ink: #7CC8FF; --sky-btn: #1B6BC6; --sky-btn-edge: #0F4A8C;
    --sun: #FFB020; --sun-edge: #E08A00; --sun-soft: #33260A; --sun-ink: #FFC861;
    --berry: #F06368; --berry-soft: #3A1520; --berry-ink: #FF9C94; --berry-btn: #C5352B; --berry-btn-edge: #85201A; --berry-line: #7A2E33;
    --amber-ink: #F5A54A; --mix-3: #8C99A6;
    --zak: #2A4A9E; --zak-bright: #5B82F5; --zak-soft: #16295C; --zak-deep: #AFC3FF; --zak-edge: #12286A;
    --kons: #1D4ED8; --kons-bright: #6B93FA; --kons-soft: #14275C; --kons-deep: #A9C2FF; --kons-edge: #12317F;
    --ib: #4C3BC9; --ib-bright: #8B7EF7; --ib-soft: #221D55; --ib-deep: #C2B9FF; --ib-edge: #291E7E;
    --accent-text: var(--royal-ink); --you-ink: var(--sky-ink); --focus: #5AB8FF; --ib-text: var(--ib-deep);
    --solid: #2B3C6B; --pop: #22325E; --raised: #111C38; --shade: #000000;
    --shadow: 0 2px 0 var(--line);
  }
  /* --tc slúži aj ako farba textu (nadpisy, čísla): v tme svetlý odtieň časti; plné plochy majú --tbtn. */
  :root[data-theme="dark"]:not(.only-light) .g-zak, :root[data-theme="dark"]:not(.only-light) .g-kons, :root[data-theme="dark"]:not(.only-light) .ck,
  :root[data-theme="dark"]:not(.only-light) .g-ib, :root[data-theme="dark"]:not(.only-light) .cb { --tc: var(--tdeep); --tnum: var(--tdeep); }
  /* Obrázok s bielou kartou by v tme žiaril (dark-mode.md › Soften the color of white backgrounds). */
  :root[data-theme="dark"]:not(.only-light) .deco-chart, :root[data-theme="dark"]:not(.only-light) .mentor.is-missing::after { filter: brightness(.82); }
  :root[data-theme="dark"]:not(.only-light) .auth-dlg::backdrop { background: rgba(0, 0, 0, .66); }
  :root[data-theme="dark"]:not(.only-light) .app-game .mast { border-bottom-color: var(--navy-2); }
  /* Biele tlačidlo na farebnom páse ostáva svetlé (zmäkčená biela), text značková navy 14 : 1. */
  :root[data-theme="dark"]:not(.only-light) .btn.on-color { background: var(--ink); color: var(--on-bright); }
  :root[data-theme="dark"]:not(.only-light) .btn.on-color .ic { color: var(--on-bright); }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.55; font-variant-numeric: tabular-nums; }
a { color: var(--sky-ink); text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
@media (hover: hover) { a:hover { text-decoration-color: currentColor; } }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app { max-width: 1160px; margin-inline: auto; padding: 0 24px 64px; }
.app.app-game { max-width: none; padding: 0; min-height: 100dvh; display: flex; flex-direction: column; }
.app-game > .view { flex: 1 0 auto; }

/* ikony z /img/ic/*.svg (maska, farba z textu) */
.ic { display: inline-block; flex: none; width: 1.2em; height: 1.2em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -.2em; }
.ic-book { --i: url(/img/ic/book.svg); } .ic-kons { --i: url(/img/ic/kons.svg); } .ic-ib { --i: url(/img/ic/ib.svg); }
.ic-trophy { --i: url(/img/ic/trophy.svg); } .ic-user { --i: url(/img/ic/user.svg); } .ic-home { --i: url(/img/ic/home.svg); }
.ic-star { --i: url(/img/ic/star.svg); } .ic-check { --i: url(/img/ic/check.svg); } .ic-cross { --i: url(/img/ic/cross.svg); }
.ic-calc { --i: url(/img/ic/calc.svg); } .ic-back { --i: url(/img/ic/back.svg); } .ic-target { --i: url(/img/ic/target.svg); } .ic-redo { --i: url(/img/ic/redo.svg); }

/* ---------- hlavička ---------- */
.skip { position: absolute; left: 16px; top: -100px; z-index: 60; background: var(--ink); color: var(--white); padding: 12px 18px; border-radius: var(--r-s); font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
.mast { border-bottom: 2px solid var(--line); background: var(--white); }
/* Hlavička je širšia ako obsah, aby sa plné názvy častí aj s účtom zmestili; wrap je len poistka proti pretečeniu. */
.mast-row { max-width: 1280px; margin: 0 auto; min-height: 72px; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: var(--r-xs); flex: none; }
.brand-mark { width: 38px; height: 38px; flex: none; background: url(/favicon.svg) center / contain no-repeat; }
.brand-name { font-size: 1.875rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--accent-text); }
.brand-sub { display: none; }
@media (hover: hover) { a.brand:hover .brand-name { color: var(--royal-btn-edge); } }
.secnav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.sn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 14px; border: 2px solid transparent; border-radius: var(--r-s); color: var(--ink-2); font-size: .9375rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.sn-ic { width: 24px; height: 24px; color: var(--tc, var(--ink-2)); }
@media (hover: hover) { .sn:hover { background: var(--wash); color: var(--ink); } }
.sn:active { background: var(--wash); color: var(--ink); }
.sn[aria-current="page"] { color: var(--tdeep, var(--ink)); background: var(--tsoft, var(--wash)); border-color: color-mix(in srgb, var(--tbright, var(--line-2)) 70%, var(--white)); }
.sn-short { display: none; }
.top-nav { display: flex; align-items: center; gap: 10px; flex: none; }
.secnav + .top-nav { margin-left: 4px; }
.mast-row > .top-nav:only-of-type, .brand + .top-nav { margin-left: auto; }
.navbtn { display: inline-flex; align-items: center; min-height: 46px; padding: 8px 18px; border: 2px solid var(--line-2); border-radius: var(--r-s); background: var(--white); color: var(--sky-ink); font-size: .9375rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 var(--line-2); margin-bottom: 4px; white-space: nowrap; }
@media (hover: hover) { .navbtn:hover { background: var(--wash); } }
.navbtn:active { background: var(--wash); }
.nav-me, .nav-rating { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 14px; border: 2px solid var(--line); border-radius: var(--r-s); background: var(--white); color: var(--ink-2); font-size: .9375rem; font-weight: 700; white-space: nowrap; }
.nav-me { cursor: pointer; box-shadow: 0 4px 0 var(--line); margin-bottom: 4px; }
@media (hover: hover) { .nav-me:hover { background: var(--wash); } }
.nav-me:active { background: var(--wash); }
.nav-me[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-soft); color: var(--sky-ink); }
.nav-me .ic { color: var(--sky-ink); }
.nav-rating .ic { color: var(--sun-edge); }
.nav-nick { font-weight: 900; color: var(--ink); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
.nav-r { display: inline-flex; gap: 6px; align-items: baseline; }
.nav-r b, .nav-rating b { color: var(--ink); font-weight: 900; }
.nav-title { color: var(--ink-3); font-weight: 700; }
.navlink { color: var(--ink-2); font-weight: 800; text-decoration: none; padding: 10px 6px; border-radius: var(--r-xs); }
@media (hover: hover) { .navlink:hover { color: var(--ink); text-decoration: underline; } }
.dateline { display: none; }
/* Hra a verejné stránky: tmavomodrá hlavička (admin má vlastnú svetlú). Aktuálna časť je svetlá „pilulka“ vo farbe časti. */
.app-game .mast { background: var(--navy); border-bottom-color: var(--navy-2); }
.app-game .brand-name { color: #FFFFFF; }
.app-game .mast .brand-mark { border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); }
@media (hover: hover) { .app-game a.brand:hover .brand-name { color: var(--navy-ink); } }
.app-game .mast .sn { color: var(--navy-ink); }
.app-game .mast .sn-ic { color: currentColor; }
@media (hover: hover) { .app-game .mast .sn:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; } }
.app-game .mast .sn:active { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.app-game .mast .sn[aria-current="page"] { color: var(--tdeep, var(--ink)); background: var(--tsoft, var(--wash)); border-color: var(--tbright, var(--line-2)); }
.app-game .mast .sn[aria-current="page"] .sn-ic { color: var(--tc, var(--ink)); }
.app-game .mast .navlink { color: var(--navy-ink); }
@media (hover: hover) { .app-game .mast .navlink:hover { color: #FFFFFF; } }
.app-game .mast :focus-visible { outline-color: #FFFFFF; }
/* Prepínač denný/nočný režim (/js/theme-toggle.js): ikona režimu, na ktorý sa prepne; v navy hlavičke vždy rovnaký. */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.875rem; height: 2.875rem; padding: 0; border: 2px solid var(--line-2); border-radius: var(--r-s); background: var(--white); color: var(--ink-2); cursor: pointer; }
.theme-btn .ic { width: 1.375rem; height: 1.375rem; vertical-align: 0; }
@media (hover: hover) { .theme-btn:hover { background: var(--wash); color: var(--ink); } }
.app-game .mast .theme-btn { background: transparent; border-color: rgba(217, 227, 250, .55); color: var(--navy-ink); }
@media (hover: hover) { .app-game .mast .theme-btn:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; } }
.app-game .mast .theme-btn:active { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.ic-sun { --i: url(/img/ic/sun.svg); } .ic-moon { --i: url(/img/ic/moon.svg); }

/* priebeh hry nad výsledkom: úlohy s bodmi */
.session { max-width: 980px; width: 100%; margin: 18px auto 0; padding: 0 24px; display: grid; gap: 8px; }
.sess { font-size: .9375rem; color: var(--ink-2); }
.sess b { color: var(--tc, var(--ink)); font-weight: 900; }
.tabs { overflow-x: auto; scrollbar-width: none; border-radius: var(--r-xs); }
.tabs::-webkit-scrollbar { display: none; }
/* Kroky sa na úzkej obrazovke zalomia do ďalšieho riadka – žiadny zrezaný krok ani skrytý posun do strany. */
.tabs ol { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; list-style: none; margin: 0; padding: 4px 2px; }
.tab { display: flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--ink-3); white-space: nowrap; }
.tab + .tab::before { content: ''; width: 20px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 0 8px 0 0; }
.tab .n { width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; font-size: .875rem; font-weight: 900; background: var(--wash-2); color: var(--ink-2); }
.tab.done .n { background: var(--ink-2); color: var(--white); }
.tab.current { color: var(--ink); font-weight: 800; }
.tab.current .n { background: var(--tbtn, var(--solid)); color: #FFFFFF; box-shadow: 0 0 0 4px var(--tsoft, var(--wash)); }
.pts { font-weight: 900; font-size: .90625rem; }
.pts.good { color: var(--royal-ink); } .pts.mid { color: var(--sun-ink); } .pts.low { color: var(--berry-ink); }

/* ---------- všeobecné ---------- */
.view { padding-top: 0; }
.view:focus { outline: none; }
.loading { color: var(--ink-3); padding: 64px 24px; margin: 0 auto; max-width: var(--w); font-weight: 700; }
.stack { display: grid; gap: 18px; padding-top: 20px; }
.card { background: var(--white); border: 2px solid var(--line); border-radius: var(--r); padding: 20px 22px 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.card-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.sec-h, .kicker, .label, .fb-h, .hint-h, .remember-h, .unit-kicker, .word-kicker { margin: 0; font-size: .84375rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4; }
.card-h { font-size: 1.3125rem; font-weight: 900; color: var(--ink); }
.kicker { color: var(--tdeep, var(--royal-ink)); }
.lead { color: var(--ink-2); font-size: 1.1875rem; max-width: 60ch; }
.dek { color: var(--ink-2); font-size: 1.125rem; max-width: 58ch; }
.small { font-size: .90625rem; color: var(--ink-3); }
.note { font-size: 1rem; color: var(--ink-2); background: var(--wash); border-radius: var(--r-xs); padding: 10px 14px; }
.note b { color: var(--ink); }
.notice { margin: 0; padding: 14px 18px; border: 2px solid var(--line-2); border-radius: var(--r-s); background: var(--white); font-size: 1rem; font-weight: 700; }
.notice.ok { border-color: var(--royal); background: var(--royal-soft); color: var(--royal-ink); }
.notice.warn { border-color: var(--sun); background: var(--sun-soft); color: var(--sun-ink); }
.notice.info { border-color: var(--sky); background: var(--sky-soft); color: var(--sky-ink); }
.msg { min-height: 1.4em; font-size: .96875rem; font-weight: 700; color: var(--berry-ink); }
.msg:empty { display: none; }
.msg.ok { color: var(--royal-ink); }
.facts-line { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 1rem; color: var(--ink-2); }
.facts-line b { color: var(--ink); font-weight: 900; }

/* Tlačidlá: hmatateľné, so spodnou hranou; pri stlačení sa „zatlačia“ (posun nadol, hrana zmizne). */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { --b: var(--tbtn, var(--royal-btn)); --bd: var(--tedge, var(--royal-btn-edge)); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px; margin-bottom: 5px; border: 0; border-radius: var(--r-s); background: var(--b); color: #FFFFFF; font-size: 1rem; font-weight: 900; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 5px 0 var(--bd); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .btn:hover { filter: brightness(1.07); } }
/* Text tlačidla sa nedá označiť: klik vedľa tlačidla (alebo zapnuté prechádzanie kurzorom) inak vloží blikajúci kurzor do jeho textu. */
.btn { -webkit-user-select: none; user-select: none; caret-color: transparent; }
.btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 var(--bd); }
.btn.big { min-height: 56px; font-size: 1.0625rem; padding: 14px 28px; }
.btn.wide { width: 100%; }
.btn.small { min-height: 42px; font-size: .875rem; padding: 8px 16px; }
.btn.secondary { background: var(--white); color: var(--sky-ink); border: 2px solid var(--line-2); box-shadow: 0 4px 0 var(--line-2); margin-bottom: 4px; }
@media (hover: hover) { .btn.secondary:hover { background: var(--wash); filter: none; } }
.btn.secondary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--line-2); }
.btn.quiet { background: transparent; color: var(--ink-2); border: 2px solid var(--line-2); box-shadow: none; margin-bottom: 0; }
@media (hover: hover) { .btn.quiet:hover { background: var(--wash); filter: none; } }
.btn.quiet:active:not(:disabled) { transform: translateY(2px); }
.btn.danger { background: var(--white); color: var(--berry-ink); border: 2px solid var(--berry-line); box-shadow: 0 4px 0 var(--berry-line); }
.btn.on-color { background: var(--white); color: var(--tdeep, var(--royal-ink)); box-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
.btn.on-color:active:not(:disabled) { box-shadow: 0 0 0 transparent; transform: translateY(4px); }
.btn.on-color .ic { color: var(--tc, var(--royal-btn)); }
.btn:disabled { background: var(--wash-2); color: var(--ink-3); border-color: var(--wash-2); box-shadow: 0 5px 0 var(--line-2); cursor: not-allowed; filter: none; }
.btn[aria-busy="true"] { cursor: progress; }
.linkish { background: none; border: 0; padding: 6px 2px; color: var(--sky-ink); font-size: .96875rem; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) { .linkish:hover { text-decoration-color: currentColor; } }
/* Vo vete sa správa ako odkaz: bez zvislého odsadenia, aby neroztiahol riadok. */
p .linkish, .msg .linkish { padding-block: 0; }
.badge { display: inline-block; font-size: .78125rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--sun-ink); background: var(--sun-soft); border: 2px solid var(--sun); border-radius: 8px; padding: 0 8px; line-height: 1.5; }

/* prepínače */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { min-height: 44px; padding: 6px 16px; border: 2px solid var(--line-2); border-radius: var(--r-s); background: var(--white); color: var(--ink-2); font-size: .96875rem; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--line-2); margin-bottom: 3px; }
@media (hover: hover) { .seg button:hover:not(:disabled) { background: var(--wash); color: var(--ink); } }
.seg button[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-soft); color: var(--sky-ink); box-shadow: 0 3px 0 var(--sky); }
.seg button:disabled { opacity: .5; cursor: not-allowed; }
.seg button:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.field { display: grid; gap: 8px; }
.cell { display: flex; align-items: stretch; border: 2px solid var(--edge); border-radius: var(--r-s); background: var(--white); max-width: 100%; }
.cell:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.cell input { color: var(--ink); border: 0; outline: 0; padding: 11px 14px; min-width: 0; background: transparent; border-radius: var(--r-s); font-weight: 700; }
.check { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--royal-btn); }

/* tabuľky */
.table-wrap { overflow-x: auto; border-radius: var(--r-xs); }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 2px solid var(--line); vertical-align: baseline; }
th:last-child, td:last-child { padding-right: 0; }
thead th { font-size: .84375rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--line-2); }
td.num, th.num { text-align: right; white-space: nowrap; }
td.code { font-size: .90625rem; color: var(--ink-3); white-space: nowrap; width: 1%; }
/* Zbaliteľný stĺpec „Riadok“ (row-codes.js codeHead/codeCell/placeCodes – hra, Učenie, Denná výzva, Prípady): v tabuľke ostáva len úzky stĺpec s tlačidlom.
   Kódy sa vysúvajú ako pás mimo tabuľky (vľavo, --codes-x/--codes-w z placeCodes), tabuľka sa nehýbe;
   mení sa len transform a opacity. Zbalené sú skryté aj pre čítačky (visibility). */
.table-wrap.codes-wrap { overflow: visible; }
table.has-codes th.code, table.has-codes td.code { position: relative; width: 1%; white-space: nowrap; padding-left: 0; padding-right: 12px; }
table.has-codes .code { --codes-slide: 20px; }
table.has-codes.codes-over .code { --codes-slide: -20px; }
table.has-codes.codes-open .code { --codes-slide: 0px; }
table.has-codes .code::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--codes-x, 0px); width: var(--codes-w, 0px); background: var(--soft); border-radius: 6px; pointer-events: none; transform: translateX(var(--codes-slide)); opacity: 0; visibility: hidden; }
table.has-codes.codes-over .code::before { background: var(--sheet); border-radius: 0; box-shadow: 10px 0 14px -10px color-mix(in srgb, var(--shade) 45%, transparent); border-right: 2px solid var(--line); }
table.has-codes .code-in { display: inline-block; width: 0; white-space: nowrap; }
table.has-codes .code-tx { display: inline-block; position: relative; transform: translateX(calc(-100% + var(--codes-x, 0px) + var(--codes-w, 0px) - 12px + var(--codes-slide))); opacity: 0; visibility: hidden; }
table.has-codes.codes-open .code::before, table.has-codes.codes-open .code-tx { opacity: 1; visibility: visible; }
.code-tog { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 9px; background: var(--sky-soft); color: var(--sky-ink); cursor: pointer; vertical-align: middle; }
@media (hover: hover) { .code-tog:hover { background: var(--wash-2); } }
.code-tog:active { background: var(--wash-2); }
.code-ar { width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateX(1px) rotate(135deg); }
.codes-open .code-ar { transform: translateX(-1px) rotate(-45deg); }
/* Kód riadku ako odkaz na zdroj (Učenie: oficiálny formulár) a poznámka so zdrojom, kým je pás otvorený. */
table.has-codes .code-link { color: var(--sky-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; pointer-events: auto; }
table.has-codes .code-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* Pás v tabuľke (codes-inline): otvorené kódy sú skutočný stĺpec s podkladom – nič neprekrývajú a nevytŕčajú z karty.
   Stĺpec sa plynulo rozšíri presne na šírku kódov (--code-w meria row-codes.js) a text sa len odkrýva spolu s ním
   (clip-path, žiadna vlastná animácia textu) – lišta aj text sa objavia a skryjú naraz. */
table.has-codes.codes-inline .code::before { content: none; }
table.has-codes.codes-inline .code-in { width: auto; max-width: 0; clip-path: inset(0); }
table.has-codes.codes-inline.codes-open .code-in { max-width: var(--code-w, 12rem); }
table.has-codes.codes-inline .code-tx { transform: none; opacity: 1; visibility: hidden; transition: visibility 0s linear .45s; }
table.has-codes.codes-inline.codes-open .code-tx { visibility: visible; transition: visibility 0s; }
table.has-codes.codes-inline th.code, table.has-codes.codes-inline td.code { background-color: transparent; }
table.has-codes.codes-inline.codes-open th.code, table.has-codes.codes-inline.codes-open td.code { padding-left: 10px; background-color: var(--soft); }
table.has-codes.codes-inline.codes-open th.code .code-in { margin-right: 8px; }
table.has-codes.codes-inline .code-link:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  table.has-codes.codes-inline .code-in { transition: max-width .45s cubic-bezier(.4, 0, .2, 1), margin .45s cubic-bezier(.4, 0, .2, 1); }
  table.has-codes.codes-inline th.code, table.has-codes.codes-inline td.code { transition: padding-left .45s cubic-bezier(.4, 0, .2, 1), background-color .45s cubic-bezier(.4, 0, .2, 1); }
}
/* Tlačidlá a kódy sa neoznačujú ako text a neukazujú kurzor na písanie. */
.code-tog, .src-tog, .calc-tog, .l-card, table.has-codes .code { -webkit-user-select: none; user-select: none; caret-color: transparent; }
.codes-note { display: none; margin: 10px 0 0; font-size: .875rem; line-height: 1.55; color: var(--ink-2); }
.codes-shown > .codes-note { display: block; }

details.disc { background: var(--white); border: 2px solid var(--line); border-radius: var(--r); padding: 0 20px; }
details.disc > summary { list-style: none; cursor: pointer; padding: 16px 0; font-size: 1.0625rem; font-weight: 900; display: flex; align-items: center; gap: 12px; border-radius: var(--r-xs); }
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary::before, details.why-d > summary::before, details.fb.src > summary::before { content: '+'; width: 1.75rem; height: 1.75rem; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 1.25rem; line-height: 1; font-weight: 900; color: var(--sky-ink); background: var(--sky-soft); }
details.disc[open] > summary::before, details.why-d[open] > summary::before, details.fb.src[open] > summary::before { content: '−'; }
details.disc[open] { padding-bottom: 18px; }
.disc-p { margin: 0 0 12px; color: var(--ink-2); max-width: 70ch; }

/* ---------- mentor a bublina ---------- */
.mentor { position: relative; display: inline-block; flex: none; }
.mentor-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; color: transparent; user-select: none; }
.mentor.m-xl { width: min(460px, 100%); aspect-ratio: 1; }
.mentor.m-l { width: 240px; aspect-ratio: 1; }
.mentor.m-m { width: 180px; aspect-ratio: 1; }
.mentor.m-s { width: 140px; aspect-ratio: 1; }
/* Poprsie v krúžku (pri bubline): z celej postavy je vidno tvár, kalkulačku a gesto ruky. */
.mentor.pose-bust { width: 92px; height: 92px; aspect-ratio: auto; border-radius: 50%; overflow: hidden; background: var(--royal-soft); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .05); }
.mentor.pose-bust .mentor-img { width: 168%; max-width: none; height: auto; margin: 4% 0 0 -37%; object-fit: initial; }
.mentor.is-missing .mentor-img { display: none; }
.mentor.is-missing::after { content: ''; position: absolute; inset: 14%; background: url(/img/deco-chart.svg) center / contain no-repeat; }
.bubble { position: relative; flex: 1 1 auto; min-width: 0; background: var(--white); border: 2px solid var(--line-2); border-radius: var(--r); padding: 14px 18px; color: var(--ink); }
.bubble::before { content: ''; position: absolute; left: -10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--white); border-left: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); transform: rotate(45deg); border-bottom-left-radius: 4px; }
.say-en { display: block; font-size: .7em; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }

/* ---------- úvod (landing) ---------- */
.hub { display: grid; }
.hub-notes { max-width: var(--w); width: 100%; margin: 18px auto 0; padding: 0 24px; display: grid; gap: 12px; }
.hero { max-width: var(--w); width: 100%; margin: 0 auto; min-height: min(640px, calc(100dvh - 74px)); padding: 28px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px 56px; }
.hero-art { position: relative; display: grid; place-items: center; min-height: 300px; }
.hero-blob { position: absolute; left: 12%; right: 12%; bottom: 4%; aspect-ratio: 1; border-radius: 46% 54% 48% 52% / 54% 46% 54% 46%; background: var(--royal-soft); }
.deco { position: absolute; background: center / contain no-repeat; }
.deco-coin { background-image: url(/img/deco-coin.svg); }
.deco-pie { background-image: url(/img/deco-pie.svg); }
.deco-chart { background-image: url(/img/deco-chart.svg); }
.hero .d1 { width: 64px; height: 64px; left: 4%; top: 16%; }
.hero .d2 { width: 56px; height: 56px; right: 4%; top: 30%; }
.hero .d3 { width: 92px; height: 92px; left: 2%; bottom: 8%; }
.hero-art .mentor { z-index: 1; }
.hero-text { display: grid; justify-items: center; text-align: center; gap: 22px; }
.hero h1 { font-size: clamp(2.125rem, 4.4vw, 3.125rem); font-weight: 900; line-height: 1.1; max-width: 13ch; color: var(--ink); }
.hero h1 .hl { color: var(--accent-text); }
.hero-sub { font-size: 1.1875rem; color: var(--ink-2); max-width: 34ch; }
.hero-next { display: inline-flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 800; color: var(--royal-ink); background: var(--royal-soft); border-radius: var(--r-s); padding: 10px 16px; max-width: 100%; }
.hero-next .ic { width: 22px; height: 22px; }
.hero-go { display: grid; gap: 14px; width: 100%; max-width: 340px; }
.hero-more { margin-top: -6px; }
/* pod záhybom: striedavé riadky */
.feats { max-width: 1000px; width: 100%; margin: 0 auto; padding: 56px 24px 24px; display: grid; gap: 96px; }
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px 64px; }
.feat.flip .feat-text { order: 2; }
.feat-text { display: grid; gap: 14px; justify-items: start; }
.feat h2 { font-size: clamp(1.875rem, 3.8vw, 2.75rem); color: var(--tc); }
.feat-text > p:not(.kicker):not(.feat-meta) { font-size: 1.125rem; color: var(--ink-2); max-width: 46ch; }
.feat .prog { width: min(100%, 360px); }
.feat-meta { display: flex; align-items: center; gap: 8px; }
.feat-art { display: grid; place-items: center; min-height: 260px; }
.st-badge { font-size: .90625rem; font-weight: 800; color: var(--ink-2); background: var(--wash); border-radius: 10px; padding: 4px 12px; }
.st-badge.done { color: var(--royal-ink); background: var(--royal-soft); }
.st-badge.done::before { content: '✓ '; }
.mini-path { position: relative; display: grid; gap: 18px; justify-items: center; padding: 8px 0; }
.mini-node { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: var(--tbright); box-shadow: 0 7px 0 var(--tedge); }
.mini-node .ic { width: 38px; height: 38px; }
.mini-node.is-done { background: var(--sun); box-shadow: 0 7px 0 var(--sun-edge); }
.mini-node { position: relative; }
.mini-node + .mini-node::before { content: ''; position: absolute; left: 50%; top: -20px; width: 6px; height: 16px; margin-left: -3px; border-radius: 6px; background: var(--line-2); }
.q-card { margin: 0; width: min(100%, 400px); background: var(--white); border: 2px solid var(--line); border-bottom-width: 6px; border-radius: 24px; padding: 22px 24px 24px; display: grid; gap: 10px; transform: rotate(-1.5deg); }
.feat.flip .q-card { transform: rotate(1.5deg); }
.q-card figcaption { display: flex; align-items: center; gap: 10px; font-size: .84375rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--tdeep); }
.q-card figcaption .ic { width: 28px; height: 28px; color: var(--tc); }
.q-card blockquote { margin: 0; font-size: 1.3125rem; font-weight: 800; line-height: 1.35; color: var(--ink); }
.prog { display: grid; gap: 6px; }
.prog-bar { height: 16px; border-radius: 999px; background: var(--wash-2); overflow: hidden; }
.prog-bar span { display: block; height: 100%; border-radius: 999px; background: var(--tbright, var(--royal)); }
.prog-l { font-size: .90625rem; font-weight: 800; color: var(--ink-2); }
.sources { max-width: 1000px; width: 100%; margin: 0 auto; padding: 96px 24px 56px; display: grid; gap: 22px; }
.sources-head { display: grid; gap: 10px; text-align: center; justify-items: center; }
.sources h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.src-lead { font-size: 1.125rem; color: var(--ink-2); max-width: 56ch; }
.lede-stats { margin: 4px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 56px; }
.lede-stats .stat { display: flex; flex-direction: column-reverse; align-items: center; }
.lede-stats dd { margin: 0; font-size: 3rem; font-weight: 900; line-height: 1.05; color: var(--tc); }
.lede-stats dt { font-size: 1rem; font-weight: 800; color: var(--ink-2); }
.src-more { display: grid; gap: 12px; }
.firms { list-style: none; margin: 0; padding: 0; columns: 2 250px; column-gap: 34px; }
.firms li { break-inside: avoid; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 2px solid var(--line); font-size: 1rem; }
.firms .fs { color: var(--ink-3); font-size: .90625rem; text-align: right; }
table.market { font-size: .96875rem; }
table.market td:first-child { width: 52%; }
table.market td.num { font-weight: 900; font-size: 1.03125rem; }
table.market td:last-child { color: var(--ink-2); font-size: .9375rem; }
.cta-band { background: var(--royal-btn); color: #FFFFFF; margin-top: 40px; position: relative; overflow: hidden; }
.cta-band::before, .cta-band::after { content: ''; position: absolute; background: center / contain no-repeat; opacity: .9; }
.cta-band::before { width: 90px; height: 90px; left: 6%; top: 50%; margin-top: -45px; background-image: url(/img/deco-coin.svg); }
.cta-band::after { width: 80px; height: 80px; right: 7%; top: 50%; margin-top: -40px; background-image: url(/img/deco-pie.svg); }
.cta-in { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 64px 24px; display: grid; justify-items: center; gap: 22px; text-align: center; }
.cta-band h2 { font-size: clamp(1.75rem, 3.8vw, 2.625rem); color: #FFFFFF; }
.cta-band .btn { min-width: 260px; }
.banner { border: 2px solid var(--sky); border-radius: var(--r); background: var(--sky-soft); padding: 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; }
.login { border: 2px solid var(--sky-soft); }
.login h2 { font-size: 1.625rem; }
.login .lead { font-size: 1.09375rem; }
.dev-login { display: grid; gap: 8px; }
.dev-login input { padding: 10px 12px; border: 2px solid var(--edge); border-radius: var(--r-s); background: var(--white); }

/* ---------- pätička ---------- */
.foot { margin-top: 0; border-top: 2px solid var(--line); background: var(--white); font-size: .9375rem; color: var(--ink-2); }
.foot-in, .app-doc .foot { max-width: var(--w); margin: 0 auto; padding: 28px 24px 36px; display: grid; gap: 8px; }
.app-doc .foot { margin-top: 48px; }
.foot p { max-width: 90ch; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 1.125rem; color: var(--accent-text); }
.foot-brand .brand-mark { width: 26px; height: 26px; }
.foot a { color: var(--ink-2); }
.foot-links a { display: inline-block; padding: 6px 0; }
.foot-notes { display: grid; gap: 2px; font-size: .875rem; line-height: 1.5; color: var(--ink-3); }
.foot-op, .foot-links { font-size: .875rem; line-height: 1.5; color: var(--ink-3); }
.foot-op { margin-top: 6px; }

/* ---------- stránky (hra, Základy, rebríček, profil) ---------- */
.page, .game-page, .result { max-width: 1000px; width: 100%; margin: 0 auto; padding: 24px 24px 64px; display: grid; gap: 22px; align-content: start; }
.page > .notice, .game-page > .notice, .page > .banner, .game-page > .banner { margin: 0; }
/* Hlavička časti ako pás jednotky na ceste: plná farba hry, biely text, spodná hrana. */
.unit-banner, .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 22px; padding: 22px 26px 24px; border-radius: 22px; background: var(--tbtn, var(--solid)); color: #FFFFFF; box-shadow: 0 6px 0 var(--tedge, #0F1720); margin-bottom: 6px; }
.unit-text, .page-head > * { min-width: 0; }
.unit-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.unit-kicker, .page-head .kicker { color: rgba(255, 255, 255, .92); }
.unit-banner h1, .unit-banner h2, .page-head h1 { color: #FFFFFF; font-size: clamp(1.75rem, 3.6vw, 2.5rem); overflow-wrap: anywhere; }
.unit-banner h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.unit-dek, .page-head .dek, .page-head .facts-line { color: #FFFFFF; font-size: 1.0625rem; max-width: 60ch; }
.page-head .facts-line b { color: #FFFFFF; }
.page-head { grid-template-columns: minmax(0, 1fr); }
.page-head.g-none, .board-page:not([class*="g-"]) .page-head, .profile .page-head { --tbtn: var(--sky-btn); --tedge: var(--sky-btn-edge); }
.unit-ic { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.unit-ic .ic { width: 50px; height: 50px; color: #FFFFFF; }
.unit-side { display: flex; align-self: start; }
.unit-banner .prog { max-width: 380px; margin-top: 6px; }
.unit-banner .prog-bar { background: rgba(0, 0, 0, .22); }
.unit-banner .prog-bar span { background: var(--sun); }
.unit-banner .prog-l { color: #FFFFFF; }
.unit-banner .tip-btn { border-color: rgba(255, 255, 255, .7); background: transparent; color: #FFFFFF; }
/* Na ceste je plný len prvý pás (Základy, nadpis stránky); Consulting a IB sú tichšie – jemný podklad časti,
   text v jej tmavom odtieni (--tdeep na --tsoft ≥ 8 : 1 v svetlom aj tmavom režime), --ink-2 na --tsoft ≥ 7 : 1. */
.unit-banner.quiet { background: var(--tsoft); color: var(--ink); box-shadow: none; border: 2px solid color-mix(in srgb, var(--tbright) 40%, transparent); }
.unit-banner.quiet .unit-kicker, .unit-banner.quiet h2 { color: var(--tdeep); }
.unit-banner.quiet .unit-dek, .unit-banner.quiet .unit-next { color: var(--ink-2); }
.unit-banner.quiet .unit-next b { color: var(--tdeep); }

/* ---------- cesta 1: Základy ako spojené karty ----------
   Lekcie idú pod sebou v poradí. Čísla spája krátka spojka (plná za prejdenou lekciou), ďalší krok je zvýraznený. */
.path-page { gap: 18px; }
.course-unit { display: grid; gap: 14px; margin-bottom: 30px; }
.unit-next { font-size: 1rem; color: #FFFFFF; }
.unit-next b { font-weight: 900; }
.trail { --dot: 3.25rem; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.step { position: relative; }
.step + .step::before { content: ''; position: absolute; z-index: 1; left: calc(20px + var(--dot) / 2 - 3px); top: -14px; width: 6px; height: 16px; border-radius: 6px; background: var(--line-2); }
.step.is-done + .step::before { background: var(--tbright); }
.node-btn { width: 100%; display: grid; grid-template-columns: var(--dot) minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 14px 18px; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: var(--r); background: var(--white); color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .node-btn:hover { background: var(--wash); border-color: var(--line-2); } }
.node-btn:active { transform: translateY(2px); }
.node-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.step-n { width: var(--dot); height: var(--dot); border-radius: 50%; display: grid; place-items: center; font-size: 1.375rem; font-weight: 900; color: var(--ink-2); background: var(--white); border: 3px solid var(--line-2); }
.step-n .ic { width: 26px; height: 26px; }
.step-text { display: grid; gap: 2px; min-width: 0; }
.step-t { font-size: 1.125rem; font-weight: 900; line-height: 1.25; }
.step-sub { font-size: .9375rem; font-weight: 700; color: var(--ink-3); }
.step-end { display: grid; justify-items: end; gap: 6px; }
.step-state { font-size: .78125rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); background: var(--wash-2); border-radius: 8px; padding: 2px 10px; white-space: nowrap; }
.step-go { font-size: .9375rem; font-weight: 900; color: var(--tdeep); white-space: nowrap; }
.step.is-done .step-n { color: var(--tdeep); background: var(--tsoft); border-color: var(--tbright); }
.step.is-done .step-state { color: var(--tdeep); background: var(--tsoft); }
.step.is-next .node-btn { border-color: var(--tbright); box-shadow: 0 0 0 4px var(--tsoft); }
.step.is-next .step-n { color: #FFFFFF; background: var(--tbtn); border-color: var(--tbtn); }
.step.is-next .step-state { color: var(--sun-ink); background: var(--sun-soft); }
.step.is-next .step-go { color: #FFFFFF; background: var(--tbtn); border-radius: 10px; padding: 5px 14px; box-shadow: 0 3px 0 var(--tedge); }

/* ---------- cesta 2: pyramída Consultingu ----------
   Poschodie = riadok: vľavo lichobežník (tvar a výplň nastaví game.js cez CSSOM), vpravo téma a výsledok. */
.pyr-card, .ib-card { background: var(--white); border: 2px solid var(--line); border-bottom-width: 6px; border-radius: 22px; padding: 20px 22px; display: grid; gap: 16px; min-width: 0; }
.pyramid { --shape: min(300px, 38%); list-style: none; margin: 0; padding: 0; display: grid; }
.floor-btn { width: 100%; min-height: 96px; display: grid; grid-template-columns: var(--shape) minmax(0, 1fr) auto; align-items: stretch; gap: 0 18px; padding: 0 12px 0 0; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .floor-btn:hover { background: var(--wash); } }
.floor-btn:active { background: var(--wash); }
.floor-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.floor-shape { position: relative; display: grid; place-items: center; background: var(--wash-2); }
.floor + .floor .floor-shape { border-top: 3px solid var(--white); }
.floor-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tbright); transform-origin: left center; }
/* Číslo poschodia rastie s písmom len mierne: vrchol pyramídy je úzky a väčší krúžok by orezal. */
.floor-num { position: relative; min-width: min(1.75rem, 34px); height: min(1.75rem, 34px); padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: min(.9375rem, 18px); font-weight: 900; color: #FFFFFF; background: var(--navy); }
.floor-text { display: grid; align-content: center; gap: 1px; padding: 10px 0; min-width: 0; }
.floor-t { font-size: 1.125rem; font-weight: 900; line-height: 1.25; }
.floor-meta { font-size: .8125rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--tdeep); }
.floor-ex { font-size: .9375rem; color: var(--ink-2); }
.floor-res { font-size: .9375rem; font-weight: 900; color: var(--ink); }
.floor.is-empty .floor-res { font-weight: 700; color: var(--ink-3); }
.floor-none { color: var(--sun-ink); }
.floor-go { align-self: center; font-size: 1.375rem; font-weight: 900; color: var(--tdeep); }
.pyr-rule { font-size: .96875rem; color: var(--ink-2); max-width: 70ch; }
.daily-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.daily-act .btn { margin-bottom: 5px; }

/* ---------- cesta 3: graf levelu v IB ---------- */
.ib-top { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px 24px; align-items: start; }
.lvl-now { display: grid; gap: 14px; align-content: start; padding: 16px 18px; border-radius: 18px; background: var(--tsoft); }
.lvl-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--tdeep); }
.lvl-word { flex-basis: 100%; }
.lvl-word { font-size: .9375rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lvl-big b { font-size: 4rem; font-weight: 900; line-height: 1; color: var(--tnum, var(--tbtn)); }
.lvl-of { font-size: 1.125rem; font-weight: 900; }
.lvl-facts { margin: 0; display: grid; gap: 10px; }
.lvl-fact dt { font-size: .78125rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.lvl-fact dd { margin: 0; font-size: 1.03125rem; font-weight: 900; color: var(--ink); }
.ib-graph { margin: 0; display: grid; gap: 8px; min-width: 0; }
.gr { display: block; width: 100%; height: auto; font-family: var(--sans); }
.gr-lane { fill: var(--white); }
.gr-lane.odd { fill: var(--wash); }
.gr-lane.is-cur { fill: var(--tsoft); }
.gr-grid { stroke: var(--line); stroke-width: 1.5; }
.gr-frame { fill: none; stroke: var(--line-2); stroke-width: 2; }
.gr-lvl { fill: var(--ink-2); font-size: 13px; font-weight: 800; }
.gr-tick { fill: var(--ink-3); font-size: 12.5px; font-weight: 800; }
.gr-axis { fill: var(--ink-2); font-size: 13.5px; font-weight: 900; }
.gr-line { fill: none; stroke: var(--tbright); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.gr-dot { fill: var(--tbtn); stroke: var(--white); stroke-width: 2; }
.gr-halo { fill: var(--tbright); opacity: .3; }
.gr-core { fill: var(--tbtn); stroke: var(--white); stroke-width: 3; }
.gr-pin { fill: var(--white); }
.gr-tag { fill: var(--tdeep); font-size: 14px; font-weight: 900; paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round; }
.gr-cur.is-empty .gr-core { fill: var(--edge); }
.gr-empty { fill: var(--ink-3); font-size: 16px; font-weight: 900; }
.ib-go { display: grid; gap: 16px; }
.lvl-table caption { text-align: left; padding-bottom: 6px; }
.path-foot { text-align: center; }
dl.gloss { margin: 0; display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.gl { padding: 10px 0; border-top: 2px solid var(--line); }
.gl dt { font-weight: 900; }
.gl dd { margin: 2px 0 0; color: var(--ink-2); font-size: 1rem; }

/* ---------- stránka hry ---------- */
.game-head { margin-top: 0; }
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.mode { background: var(--white); border: 2px solid var(--line); border-bottom-width: 6px; border-radius: 22px; padding: 22px 24px 22px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.mode.daily { border-color: var(--sun); }
.mode-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; }
.mode-ic { grid-row: span 2; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: var(--tbright, var(--royal)); box-shadow: 0 5px 0 var(--tedge, var(--royal-edge)); margin-bottom: 5px; }
.mode-ic.t-sun { background: var(--sun); box-shadow: 0 5px 0 var(--sun-edge); }
.mode-ic .ic { width: 28px; height: 28px; }
.mode h2 { font-size: 1.625rem; display: flex; align-items: center; gap: 10px; }
.mode-sub { color: var(--ink-2); font-size: 1rem; }
.mode-body { display: grid; gap: 16px; align-content: start; }
.mode-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mode-go .btn { min-width: 220px; }
.go-note { font-size: .96875rem; color: var(--ink-2); }
.cat-list { list-style: none; counter-reset: c; margin: 0; padding: 0; display: grid; gap: 8px; }
.cat-list li { counter-increment: c; display: flex; align-items: center; gap: 12px; font-size: 1.03125rem; font-weight: 800; }
.cat-list li::before { content: counter(c); width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .875rem; font-weight: 900; color: var(--tdeep); background: var(--tsoft); }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { min-height: 46px; padding: 8px 16px; border: 2px solid var(--line-2); border-radius: var(--r-s); background: var(--white); color: var(--ink); font-size: .96875rem; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--line-2); margin-bottom: 3px; }
@media (hover: hover) { .topic:hover { background: var(--wash); } }
.topic[aria-pressed="true"] { border-color: var(--tbright); background: var(--tsoft); color: var(--tdeep); box-shadow: 0 3px 0 var(--tbright); }
.topic[aria-pressed="true"]::after { content: ' ✓'; }
.topic:active { transform: translateY(3px); box-shadow: none; }
.topic-desc { font-size: 1rem; color: var(--ink-2); min-height: 1.5em; }
.topic-desc b { color: var(--ink); }
.pool { font-size: .9375rem; color: var(--ink-3); }
.pool:empty { display: none; }
.info { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.main-col, .side { display: grid; gap: 22px; align-content: start; min-width: 0; }
.set-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.set-info { color: var(--ink-2); font-size: 1rem; max-width: 70ch; }
.seg-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 16px; border: 2px dashed var(--zak); border-radius: var(--r-s); background: var(--zak-soft); color: var(--zak-deep); font-size: .96875rem; font-weight: 800; text-decoration: none; }
@media (hover: hover) { .seg-link:hover { border-style: solid; } }
.seg-go { font-weight: 900; }
.big { font-size: 2.75rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.rating-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.rating-now .rt { font-size: 1.0625rem; font-weight: 900; color: var(--sun-ink); background: var(--sun-soft); border-radius: 10px; padding: 2px 12px; }
.rating-now .tip { align-self: center; }
.ladder-tip { display: grid; margin: 6px 0; }
.ladder-tip .me { font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
ul.rules { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 1rem; color: var(--ink-2); }

/* ---------- herná obrazovka (úvod a lekcia) ----------
   Postup hore, jedna otázka v strede, pevný pás dole (sticky). Pás po kontrole zafarbí: kráľovská modrá / červená. */
.gs { min-height: 100dvh; display: flex; flex-direction: column; padding: 0 20px; }
.gs-top { width: 100%; max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 22px 0 6px; }
.gs-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-3); cursor: pointer; }
.gs-icon .ic { width: 26px; height: 26px; }
@media (hover: hover) { .gs-icon:hover { background: var(--wash); color: var(--ink); } }
.gs-icon:active { background: var(--wash); color: var(--ink); }
.gs-prog { position: relative; height: 18px; border-radius: 999px; background: var(--wash-2); overflow: hidden; }
.gs-prog span { position: relative; display: block; height: 100%; border-radius: 999px; background: var(--tbright, var(--royal)); }
.gs-prog span::after { content: ''; position: absolute; left: 10px; right: 10px; top: 4px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .35); }
.gs-skip { min-height: 46px; padding: 6px 12px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-3); font-size: .9375rem; font-weight: 900; cursor: pointer; }
@media (hover: hover) { .gs-skip:hover { background: var(--wash); color: var(--ink); } }
.gs-skip:active { background: var(--wash); color: var(--ink); }
.gs-top-l { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .90625rem; font-weight: 800; color: var(--ink-3); }
.gs-top-pad { width: 46px; }
.gs-stage { width: 100%; max-width: 640px; margin: 0 auto; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 28px 0 32px; }
.gs-say { display: flex; align-items: center; gap: 18px; }
.gs-q { font-size: clamp(1.4375rem, 3vw, 1.875rem); font-weight: 900; line-height: 1.25; color: var(--ink); }
.bubble .gs-q { font-size: clamp(1.25rem, 2.6vw, 1.625rem); }
.gs-body { display: grid; gap: 14px; }
.gs-note { color: var(--ink-2); font-size: 1rem; }
.gs-loading { color: var(--ink-3); font-weight: 800; }
.gs-firm { color: var(--ink-2); font-size: 1rem; }
.gs-firm b { color: var(--ink); }
.gs-foot { position: sticky; bottom: 0; z-index: 20; margin: 0 -20px; background: var(--white); border-top: 2px solid var(--line); }
.gs-foot-in { max-width: 1000px; margin: 0 auto; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.gs-actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.gs-actions .btn.big { min-width: 200px; }
/* Lekcia (Základy): žiadna pätička – tlačidlo je v toku hneď pod úlohou, spätná väzba pod ním ako nenápadný blok.
   Obsah začína hore (nie na stred), aby sa po zobrazení spätnej väzby nič neposunulo. */
.gs.lesson .gs-stage { justify-content: flex-start; }
.l-actions { display: flex; justify-content: flex-end; }
.l-actions .btn.big { min-width: 220px; }
.gs-fb.l-fb { flex: none; padding: 4px 0 0 16px; border-left: 4px solid var(--royal-btn); }
.l-fb.is-bad { border-left-color: var(--berry-btn); }
.l-fb .gs-fb-ic { width: 40px; height: 40px; background: var(--royal-soft); }
.l-fb.is-bad .gs-fb-ic { background: var(--berry-soft); }
.l-fb .gs-fb-ic .ic { width: 22px; height: 22px; }
.l-fb .gs-fb-h { font-size: 1.25rem; }
.gs-foot.is-ok { background: var(--royal-soft); border-top-color: var(--royal-soft); }
.gs-foot.is-bad { background: var(--berry-soft); border-top-color: var(--berry-soft); }
.gs-foot.is-ok .btn:not(.secondary) { --b: var(--royal-btn); --bd: var(--royal-btn-edge); }
.gs-foot.is-bad .btn:not(.secondary) { --b: var(--berry-btn); --bd: var(--berry-btn-edge); }
.gs-foot.is-bad .btn.secondary { color: var(--berry-ink); }
.gs-fb { display: flex; align-items: flex-start; gap: 16px; flex: 1 1 380px; min-width: 0; }
.gs-fb:empty { display: none; }
.gs-fb-ic { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--royal-btn); }
.gs-fb-ic .ic { width: 34px; height: 34px; }
.is-bad .gs-fb-ic { color: var(--berry-ink); }
.gs-fb-text { display: grid; gap: 4px; min-width: 0; }
.gs-fb-h { font-size: 1.5rem; font-weight: 900; line-height: 1.2; color: var(--royal-ink); }
.is-bad .gs-fb-h { color: var(--berry-ink); }
.gs-fb-right { font-size: 1.125rem; font-weight: 800; color: var(--berry-ink); }
.gs-fb-why { font-size: 1rem; color: var(--ink); max-width: 64ch; }
.gs-fb-src, .gs-fb-src .src-line { font-size: .9375rem; }
/* možnosti (úvod, lekcie) */
.choices { display: grid; gap: 12px; }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 18px; margin-bottom: 4px; text-align: left; background: var(--white); color: var(--ink); border: 2px solid var(--line-2); border-radius: var(--r); box-shadow: 0 4px 0 var(--line-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .choice:hover:not(:disabled) { background: var(--wash); } }
.choice:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--line-2); }
.choice:disabled { cursor: default; }
.choice-key { width: 2rem; height: 2rem; display: grid; place-items: center; border: 2px solid var(--line-2); border-radius: 10px; font-size: .875rem; font-weight: 900; color: var(--ink-3); background: var(--white); }
.choice-text { display: grid; gap: 2px; min-width: 0; }
.choice-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
.choice-s { font-size: .9375rem; font-weight: 700; color: var(--ink-2); }
.choice-num { font-size: 1.125rem; font-weight: 900; white-space: nowrap; }
.choice[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-soft); box-shadow: 0 4px 0 var(--sky); }
.choice[aria-pressed="true"] .choice-t { color: var(--sky-ink); }
.choice[aria-pressed="true"] .choice-key { border-color: var(--sky); color: var(--sky-ink); }
.choice.correct { border-color: var(--royal); background: var(--royal-soft); box-shadow: 0 4px 0 var(--royal); }
.choice.correct .choice-t, .choice.correct .choice-key { color: var(--royal-ink); border-color: var(--royal); }
.choice.wrong { border-color: var(--berry); background: var(--berry-soft); box-shadow: 0 4px 0 var(--berry); }
.choice.wrong .choice-t, .choice.wrong .choice-key { color: var(--berry-ink); border-color: var(--berry); }
.choices.paths .choice { border-left: 10px solid var(--tbright); }
.choices.paths .choice[aria-pressed="true"] { border-color: var(--tbright); background: var(--tsoft); box-shadow: 0 4px 0 var(--tedge); }
.choices.paths .choice[aria-pressed="true"] .choice-t { color: var(--tdeep); }
.choices.paths .choice[aria-pressed="true"] .choice-key { border-color: var(--tbright); color: var(--tdeep); }
.choice.row .choice-s { font-size: .875rem; color: var(--ink-3); }
/* nové slovo */
.word-kicker { display: flex; align-items: center; gap: 8px; color: var(--ib-text); }
.word-kicker .ic { width: 22px; height: 22px; }
.word-card { display: grid; gap: 14px; }
.word-term { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 900; line-height: 1.05; color: var(--accent-text); }
.word-term-sub { font-size: 1.0625rem; font-weight: 800; color: var(--ink-2); }
.word-def { font-size: 1.25rem; font-weight: 700; line-height: 1.5; max-width: 56ch; }
.word-ex { margin: 0; display: grid; gap: 12px; }
.word-ex > figcaption:not(.sr-only) { font-size: .84375rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.word-ex-t { font-size: 1.0625rem; font-weight: 700; }
.ex-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--r-s); }
.ex-row .code { font-size: .90625rem; color: var(--ink-3); white-space: nowrap; }
.src-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-size: .9375rem; color: var(--ink-2); }
.src-line a { color: var(--sky-ink); white-space: nowrap; }
table.l-rows { font-size: 1rem; }
table.l-rows th, table.l-rows td { padding: 9px 10px; }
table.l-rows td.num { font-weight: 900; }
.word-ex .table-wrap { border: 2px solid var(--line); border-radius: var(--r-s); padding: 2px 10px; }
.word-ex table tbody tr:last-child td { border-bottom: 0; }
/* dvojice */
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.pair-col { display: grid; gap: 12px; align-content: start; }
.pair { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; margin-bottom: 4px; text-align: left; background: var(--white); color: var(--ink); border: 2px solid var(--line-2); border-radius: var(--r); box-shadow: 0 4px 0 var(--line-2); font-size: 1.03125rem; font-weight: 700; line-height: 1.35; cursor: pointer; }
.pair[data-side="l"] { font-weight: 900; }
@media (hover: hover) { .pair:hover:not(:disabled) { background: var(--wash); } }
.pair:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--line-2); }
.pair[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-soft); color: var(--sky-ink); box-shadow: 0 4px 0 var(--sky); }
@media (hover: hover) { .pair[aria-pressed="true"]:hover:not(:disabled) { border-color: var(--sky); background: var(--sky-soft); color: var(--sky-ink); box-shadow: 0 4px 0 var(--sky); } }
.pair[aria-pressed="true"] .choice-key { border-color: var(--sky); color: var(--sky-ink); }
.pair.matched { border-color: var(--line); background: var(--wash); color: var(--ink-3); box-shadow: 0 4px 0 var(--line); cursor: default; }
.pair.matched .choice-key { border-color: var(--line); }
.pair.miss { border-color: var(--berry); background: var(--berry-soft); color: var(--berry-ink); box-shadow: 0 4px 0 var(--berry); }
@media (hover: hover) { .pair.miss:hover:not(:disabled) { border-color: var(--berry); background: var(--berry-soft); color: var(--berry-ink); box-shadow: 0 4px 0 var(--berry); } }
.l-status { min-height: 1.5em; font-size: .96875rem; color: var(--ink-2); }
/* koniec lekcie a úvodu: odmena */
.gs-stage.is-done { align-items: center; text-align: center; position: relative; }
.gs-stage.is-done .gs-q { font-size: clamp(1.875rem, 4vw, 2.5rem); color: var(--amber-ink); }
.gs-done { display: grid; gap: 18px; justify-items: center; }
.gs-done-p { font-size: 1.125rem; color: var(--ink-2); max-width: 46ch; }
.gs-spark { position: absolute; width: 74px; height: 74px; right: 14%; top: 4%; background: url(/img/deco-spark.svg) center / contain no-repeat; }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.tile { --tt: var(--royal); --ti: var(--royal-ink); min-width: 150px; display: grid; border: 3px solid var(--tt); border-radius: 18px; overflow: hidden; background: var(--white); }
.tile.t-sun { --tt: var(--sun); --ti: var(--sun-ink); }
.tile.t-grass { --tt: var(--royal); --ti: var(--royal-ink); }
.tile-h { background: var(--tt); color: var(--on-bright); padding: 4px 10px; font-size: .78125rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tile.t-grass .tile-h { background: var(--royal-soft); color: var(--royal-ink); }
.tile.t-sun .tile-h { background: var(--sun); color: var(--on-bright); }
.tile-v { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; font-size: 1.375rem; font-weight: 900; color: var(--ti); }
.tile-v .ic { width: 24px; height: 24px; }
.words-d { width: 100%; text-align: left; }
.gs-foot.is-done .gs-actions { margin-left: 0; width: 100%; justify-content: space-between; }

/* ---------- úloha (hodnotená hra) ----------
   Hore pás: odísť a kroky hry; pod tým hra a téma. Obsah v jednom stĺpci,
   odpoveď aj tlačidlá nasledujú pod zadaním a výsledkom v bežnom toku. */
.round { display: flex; flex-direction: column; min-height: 100dvh; padding: 0 20px; }
.round-bar { position: sticky; top: 0; z-index: 15; margin: 0 -20px; padding: 14px 20px 10px; background: var(--white); border-bottom: 2px solid var(--line); }
.round-top { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.round-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.round-steps li { flex: 1 1 0; height: 16px; border-radius: 999px; background: var(--wash-2); }
.round-steps li.cur { background: var(--tbtn); box-shadow: 0 0 0 3px var(--tsoft); }
.round-steps li.done.good { background: var(--royal); }
.round-steps li.done.mid { background: var(--sun); }
.round-steps li.done.low { background: var(--berry); }
.where { max-width: 760px; margin: 8px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .9375rem; color: var(--ink-2); }
.where b { color: var(--tdeep, var(--ink)); font-weight: 900; }
.round-main { width: 100%; max-width: 760px; margin: 0 auto; flex: 1 0 auto; display: grid; gap: 22px; align-content: start; padding: 26px 0 32px; }
.task-head { display: grid; gap: 8px; }
.task-title { font-size: clamp(1.625rem, 3.4vw, 2.25rem); }
.firm-text { display: grid; gap: 1px; }
.firm-line { font-size: 1.09375rem; }
.firm-name { font-weight: 900; }
.firm-sector { color: var(--ink-2); }
.firm-meta { font-size: .9375rem; color: var(--ink-3); }
.firm-blurb { color: var(--ink-2); font-size: 1rem; max-width: 70ch; }
.firm-blurb b { color: var(--ink); }
.extract { border: 2px solid var(--line); border-radius: var(--r); padding: 14px 20px 6px; }
.extract-h { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.extract table { font-size: 1.03125rem; }
.extract tbody tr:last-child td { border-bottom: 0; }
.extract td.code { padding-right: 18px; }
.extract td.num { font-weight: 900; font-size: 1.09375rem; }
.extract tr.grp th { font-size: 1.03125rem; font-weight: 900; color: var(--ink); padding-top: 14px; border-bottom: 2px solid var(--line-2); text-transform: none; letter-spacing: 0; }
.q-block { display: grid; gap: 14px; }
.q { font-size: 1.375rem; font-weight: 800; line-height: 1.4; max-width: 62ch; }
.options { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .options.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.option { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px 16px; margin-bottom: 4px; background: var(--white); color: var(--ink); border: 2px solid var(--line-2); border-radius: var(--r); box-shadow: 0 4px 0 var(--line-2); cursor: pointer; }
@media (hover: hover) { .option:hover:not(:disabled) { background: var(--wash); } }
.option:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--line-2); }
.option:disabled { cursor: default; }
.option[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-soft); box-shadow: 0 4px 0 var(--sky); }
.option.correct { border-color: var(--royal); background: var(--royal-soft); box-shadow: 0 4px 0 var(--royal); }
.option.wrong { border-color: var(--berry); background: var(--berry-soft); box-shadow: 0 4px 0 var(--berry); }
.opt-key { flex: none; width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center; border: 2px solid var(--line-2); font-weight: 900; font-size: .90625rem; line-height: 1; color: var(--ink-3); }
.option[aria-pressed="true"] .opt-key { border-color: var(--sky); color: var(--sky-ink); }
.option.correct .opt-key { border-color: var(--royal); color: var(--royal-ink); }
.option.wrong .opt-key { border-color: var(--berry); color: var(--berry-ink); }
.opt-text { display: grid; gap: 1px; min-width: 0; }
.opt-label { font-weight: 800; font-size: 1.0625rem; }
.opt-sub { color: var(--ink-2); font-size: .9375rem; }
.hint-wrap { display: grid; gap: 10px; justify-items: start; }
.btn-hint { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 16px; border: 2px dashed var(--sun-edge); border-radius: var(--r-s); background: var(--sun-soft); color: var(--ink); font-size: 1rem; font-weight: 800; cursor: pointer; }
@media (hover: hover) { .btn-hint:hover { border-style: solid; } }
.btn-hint:active { border-style: solid; }
.btn-hint .cost { font-size: .90625rem; color: var(--sun-ink); }
.hint-box { background: var(--sun-soft); border-radius: var(--r-s); padding: 14px 18px; display: grid; gap: 8px; max-width: 72ch; }
.hint-h { color: var(--sun-ink); }
.hint-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.hint-steps li::marker { font-weight: 900; color: var(--sun-ink); }
.answer-box { display: grid; gap: 8px; }
.answer-top { display: flex; align-items: center; gap: 8px; }
.answer-input { display: flex; align-items: baseline; gap: 10px; padding: 8px 16px; border: 2px solid var(--edge); border-radius: var(--r); background: var(--white); box-shadow: 0 4px 0 var(--line-2); }
.answer-input:focus-within { border-color: var(--sky-btn); background: var(--sky-soft); box-shadow: 0 4px 0 var(--sky); }
.answer-input input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 2.25rem; font-weight: 800; line-height: 1.2; color: var(--you-ink); padding: 0; }
.answer-input input::placeholder { font-weight: 600; }
.answer-input input:disabled { color: var(--you-ink); opacity: 1; -webkit-text-fill-color: var(--you-ink); }
.unit { font-size: 1.125rem; font-weight: 800; color: var(--ink-3); white-space: nowrap; }
.echo { font-size: .9375rem; color: var(--ink-3); min-height: 1.45em; }
.est { position: relative; padding-bottom: 1.375rem; }
.est-range { width: 100%; accent-color: var(--sky-btn); margin: 4px 0 0; }
.est-scale { position: absolute; left: 8px; right: 8px; bottom: 0; height: 1.125rem; font-size: .84375rem; color: var(--ink-3); }
.est-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.abort { margin: 0; }
.task-go { display: grid; justify-items: start; gap: 10px; }
.task-go .btn.go { min-width: 220px; }

/* ---------- kalkulačka v úlohe (calc-panel.js) ----------
   Tlačidlo v páse úlohy. Na širokej obrazovke panel vedľa zadania (lepí sa pod pás úlohy), inak list pri spodnom okraji
   a obsah úlohy dostane dole miesto, aby sa dalo dorolovať ku každému riadku. Čísla .calc-val sú klikateľné len pri otvorenej kalkulačke. */
.calc-tog { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 14px; border: 2px solid var(--line-2); border-radius: var(--r-s); background: var(--white); color: var(--sky-ink); font-size: .9375rem; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--line-2); margin-bottom: 3px; white-space: nowrap; touch-action: manipulation; }
.calc-tog .ic { width: 1.375rem; height: 1.375rem; }
@media (hover: hover) { .calc-tog:hover { background: var(--wash); } }
.calc-tog[aria-expanded="true"] { border-color: var(--sky); background: var(--sky-soft); box-shadow: 0 3px 0 var(--sky); }
.round-body { flex: 1 0 auto; display: flex; flex-direction: column; }
.calc-val { cursor: default; }
.calc-on .calc-val { cursor: pointer; -webkit-user-select: none; user-select: none; caret-color: transparent; -webkit-tap-highlight-color: transparent; border-radius: 6px; padding: 0 3px; margin: 0 -3px; text-decoration: underline dotted var(--sky-btn); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) { .calc-on .calc-val:hover { background: var(--sky-soft); color: var(--sky-ink); } }
.calc-on .calc-val:focus-visible { outline-offset: 1px; }
.calc-val.calc-hit { background: var(--sky-soft); color: var(--sky-ink); }
.calc-panel { display: grid; gap: 10px; align-content: start; background: var(--white); border: 2px solid var(--line); border-bottom-width: 6px; border-radius: var(--r); padding: 12px 14px 14px; min-width: 0; }
.calc-panel[hidden] { display: none; }
.cp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cp-h:focus { outline: 0; }
.cp-mems { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cp-chip { flex: none; min-width: 2.5rem; min-height: 2.125rem; padding: 0 8px; border: 2px solid var(--line-2); border-radius: var(--r-xs); background: var(--white); color: var(--ink-2); font: inherit; font-size: .84375rem; font-weight: 800; cursor: pointer; touch-action: manipulation; white-space: nowrap; }
@media (hover: hover) { .cp-chip:hover { background: var(--wash); color: var(--ink); } }
.cp-hist-t { margin-left: auto; color: var(--sky-ink); }
.cp-hist-t[aria-expanded="true"] { border-color: var(--sky); background: var(--sky-soft); }
.cp-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-mem { flex: none; max-width: 60%; padding: 0 8px; border-radius: 8px; background: var(--wash); color: var(--ink-2); font-size: .8125rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 50%; }
.cp-x { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ink-3); cursor: pointer; touch-action: manipulation; }
.cp-x .ic { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) { .cp-x:hover { background: var(--wash); color: var(--ink); } }
.cp-disp { display: grid; gap: 2px; padding: 6px 12px 8px; border: 2px solid var(--edge); border-radius: var(--r-s); background: var(--white); }
.cp-disp:focus-within { border-color: var(--sky-btn); background: var(--sky-soft); }
.cp-expr { flex: 1 1 0; width: 100%; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; font: inherit; font-size: 1.375rem; font-weight: 800; color: var(--you-ink); text-align: right; }
.cp-expr::placeholder { color: var(--ink-3); }
.cp-out { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 2rem; flex-wrap: wrap; }
.cp-res { font-size: 1rem; font-weight: 900; color: var(--ink); overflow-wrap: anywhere; text-align: right; }
.cp-res.err { color: var(--berry-ink); font-weight: 800; font-size: .9375rem; }
.cp-use { flex: none; min-height: 2rem; padding: 2px 10px; border: 2px solid var(--line-2); border-radius: var(--r-xs); background: var(--white); color: var(--sky-ink); font-size: .875rem; font-weight: 800; cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { .cp-use:hover { background: var(--wash); } }
.cp-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cp-k { min-width: 0; min-height: 2.75rem; padding: 0; border: 2px solid var(--line-2); border-radius: var(--r-xs); background: var(--white); color: var(--ink); font: inherit; font-size: 1.125rem; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--line-2); margin-bottom: 3px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .cp-k:hover { background: var(--wash); } }
.cp-k:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-2); }
.cp-k.fn { color: var(--ink-2); background: var(--wash); }
.cp-k.op { color: var(--sky-ink); background: var(--sky-soft); border-color: color-mix(in srgb, var(--sky) 55%, var(--line-2)); }
.cp-k.eq { grid-column: 5; grid-row: 2 / span 4; background: var(--tbtn, var(--royal-btn)); border-color: var(--tbtn, var(--royal-btn)); color: #FFFFFF; box-shadow: 0 3px 0 var(--tedge, var(--royal-btn-edge)); font-size: 1.375rem; }
.cp-hist-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 12rem; overflow: auto; }
.cp-hist-l[hidden] { display: none; }
.cp-hist-b { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 6px; padding: 6px 10px; border: 0; border-radius: var(--r-xs); background: var(--wash); color: var(--ink); font: inherit; font-size: .9375rem; text-align: right; cursor: pointer; overflow-wrap: anywhere; }
@media (hover: hover) { .cp-hist-b:hover { background: var(--wash-2); } }
.cp-hist-e { color: var(--ink-2); font-weight: 700; min-width: 0; }
.cp-hist-0 { font-size: .9375rem; color: var(--ink-3); }
/* Široká obrazovka: zadanie a kalkulačka vedľa seba, kalkulačka ostáva pri rolovaní na mieste. */
@media (min-width: 1100px) {
  .round.calc-on .round-body { flex-direction: row; justify-content: center; align-items: flex-start; gap: 28px; }
  .round.calc-on .round-body > .round-main { flex: 0 1 760px; margin: 0; min-width: 0; }
  .round.calc-on .calc-panel { position: sticky; top: calc(var(--bar-h, 96px) + 16px); flex: 0 0 21rem; margin-top: 26px; max-height: calc(100dvh - var(--bar-h, 96px) - 32px); overflow: auto; }
}
/* Užšia obrazovka: list pri spodnom okraji, obsah úlohy sa dá dorolovať nad neho. */
@media (max-width: 1099.98px) {
  .calc-panel { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; max-width: 34rem; margin: 0 auto; max-height: 72dvh; overflow: auto; overscroll-behavior: contain; border-bottom-width: 0; border-radius: 22px 22px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -12px color-mix(in srgb, var(--shade) 40%, transparent); }
  .round.calc-on .round-main { padding-bottom: calc(var(--calc-h, 0px) + 24px); }
}
@media (max-width: 760px) {
  .calc-panel { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .cp-keys { gap: 5px; }
  .cp-k { min-height: 2.25rem; font-size: 1.0625rem; }
  .cp-expr { font-size: 1.25rem; }
  .cp-hist-l { max-height: 8rem; }
}
/* Úzky displej alebo veľké písmo: na tlačidle len ikona (názov ostáva pre čítačku). */
@media (max-width: 22em) {
  .calc-tog { padding: 6px 10px; }
  .calc-tog-t { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
.status-l { font-size: 1.5rem; font-weight: 900; color: var(--royal-ink); }
.fb.verdict .status-l { font-size: inherit; letter-spacing: inherit; }
.fb.verdict.mid .status-l { color: var(--sun-ink); }
.fb.verdict.low .status-l { color: var(--berry-ink); }
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 900; font-size: 1rem; }

/* po odpovedi */
.fb { display: grid; gap: 14px; background: var(--white); border: 2px solid var(--line); border-radius: var(--r); padding: 18px 22px 20px; min-width: 0; scroll-margin-top: 120px; }
.fb.verdict { border-width: 2px; border-bottom-width: 6px; }
.fb.verdict.good { border-color: var(--royal); }
.fb.verdict.mid { border-color: var(--sun); }
.fb.verdict.low { border-color: var(--berry); }
.fb-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.compare { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0; }
.compare dt { font-size: .78125rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.compare dd { margin: 0; font-size: 1.375rem; font-weight: 900; }
.compare dd.you { color: var(--you-ink); }
.levels { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--wash); border-radius: var(--r-s); padding: 4px; }
.lvl { min-height: 38px; padding: 4px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font-size: .9375rem; font-weight: 800; cursor: pointer; }
@media (hover: hover) { .lvl:hover { color: var(--ink); } }
.lvl:active { color: var(--ink); }
.lvl[aria-pressed="true"] { color: var(--sky-ink); background: var(--white); box-shadow: 0 2px 0 var(--line-2); }
.explain { display: grid; gap: 14px; }
.fb-h { margin: 6px 0 -4px; }
.howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: st; max-width: 72ch; }
.howto li { counter-increment: st; position: relative; padding-left: 2.5rem; line-height: 1.6; }
.howto li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .875rem; color: #FFFFFF; background: var(--tbtn, var(--solid)); }
.calc { display: block; width: fit-content; max-width: 100%; margin-top: 6px; font-weight: 800; font-size: 1.0625rem; background: var(--wash); border-radius: var(--r-xs); padding: 6px 12px; overflow-wrap: anywhere; }
.num-hl { font-weight: 900; white-space: nowrap; }
.short { font-size: 1.125rem; max-width: 66ch; }
.extra { font-size: 1rem; color: var(--ink-2); }
.why, .bridge { color: var(--ink-2); max-width: 70ch; }
.why b, .bridge b { color: var(--ink); }
details.why-d > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-weight: 900; padding: 4px 0; border-radius: var(--r-xs); }
details.why-d > summary::-webkit-details-marker { display: none; }
details.why-d[open] > summary { margin-bottom: 6px; }
details.fb.src > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 2px 0; border-radius: var(--r-xs); }
details.fb.src > summary::-webkit-details-marker { display: none; }
.src-sum { font-size: 1rem; color: var(--ink-2); }
.remember { background: var(--sun-soft); border-radius: var(--r-s); padding: 14px 18px; display: grid; gap: 8px; max-width: 72ch; }
.remember-h { color: var(--sun-ink); }
.remember-h::before { content: '★ '; color: var(--sun-edge); }
.remember-rule { font-size: 1.25rem; font-weight: 900; line-height: 1.3; }
.remember-lead { font-size: 1.15625rem; font-weight: 800; line-height: 1.4; }
.remember-text { color: var(--ink-2); }
.next-steps { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: .96875rem; }
.next-l { font-weight: 900; color: var(--ink-2); }
.ns b { font-weight: 900; margin-right: 5px; color: var(--tdeep, var(--ink)); }
.terms { display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.term { display: grid; gap: 3px; padding: 10px 0; border-top: 2px solid var(--line); align-content: start; }
.term .ref { justify-self: start; }
.term-name { font-weight: 900; }
.term-def { color: var(--ink-2); font-size: .96875rem; }
.ref { font-weight: 800; color: var(--ink); white-space: nowrap; text-decoration: underline dotted var(--edge); text-underline-offset: 3px; }
a.ref { color: var(--sky-ink); text-decoration: underline; text-decoration-color: currentColor; }
.ref-ic { font-size: .75rem; }
.tipscale { display: grid; gap: 4px; }
.ts-track { position: relative; height: 10px; border-radius: 999px; background: var(--wash-2); margin: 2rem 8px; }
.ts-zone { position: absolute; top: 0; bottom: 0; background: var(--line-2); border-radius: 999px; }
.ts-mk { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--white); }
.ts-mk.ans { background: var(--ink); }
.ts-mk.you { background: var(--sky-btn); }
.ts-lab { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .90625rem; font-weight: 900; }
.ts-mk.ans .ts-lab { bottom: 22px; color: var(--ink); }
.ts-mk.you .ts-lab { top: 22px; color: var(--you-ink); }
.ts-mk.l .ts-lab { left: -2px; transform: none; }
.ts-mk.r .ts-lab { left: auto; right: -2px; transform: none; }
.ts-text { font-size: .96875rem; color: var(--ink-2); }
.ts-text b { color: var(--ink); }
.mix { margin: 0; display: grid; gap: 8px; max-width: 72ch; }
.mix-bar { display: flex; gap: 3px; height: 16px; border-radius: 999px; overflow: hidden; }
.mix-bar span { flex-basis: 0; min-width: 3px; }
.m1 { background: var(--sky-btn); } .m2 { background: var(--sun-edge); } .m3 { background: var(--mix-3); }
.mix-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .96875rem; }
.mix-legend li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.mix-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; align-self: center; }
.mix-legend b { font-weight: 900; min-width: 4ch; }
.mix-l { font-weight: 800; }
.mix-s { color: var(--ink-3); font-size: .90625rem; }
.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 80ch; }
.src-links { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.src-link { color: var(--sky-ink); font-size: 1rem; text-decoration-color: currentColor; }
.src-link b { font-weight: 900; }
.src-all { font-size: .9375rem; color: var(--ink-2); }
.method { font-size: 1rem; color: var(--ink-2); max-width: 74ch; }
.method b { color: var(--ink); }

/* ---------- výsledok ---------- */
.result-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 28px; padding: 26px 30px; border: 2px solid var(--line); border-bottom-width: 6px; border-radius: 24px; }
.result.celebrate .result-head { border-color: var(--sun); }
.result-main { display: grid; gap: 12px; }
.result-art { position: relative; }
.result-art .gs-spark { right: -6px; top: -6px; width: 56px; height: 56px; }
.result-say { margin-top: 4px; }
.result-say .bubble p { margin: 0; }
.score { font-size: clamp(4rem, 10vw, 6.5rem); line-height: .95; letter-spacing: -.04em; color: var(--tdeep, var(--ink)); }
.score small { font-size: 1.25rem; font-weight: 800; color: var(--ink-2); letter-spacing: 0; }
.result-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.rating-line { font-size: 1rem; color: var(--ink-2); background: var(--wash); border-radius: 12px; padding: 6px 14px; }
.rating-line b { color: var(--ink); font-weight: 900; }
.rating-line .lab { color: var(--ink-3); }
.delta-up { color: var(--royal-ink); font-weight: 900; } .delta-down { color: var(--berry-ink); font-weight: 900; }
.res-sec { padding: 18px 22px 22px; border: 2px solid var(--line); border-radius: var(--r); display: grid; gap: 12px; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(150px, 320px) minmax(0, 1fr) 6ch; gap: 16px; align-items: center; }
.bar-label { font-size: 1rem; }
.bar-n { font-weight: 900; color: var(--tdeep, var(--ink)); margin-right: 6px; }
.bar-track { height: 16px; border-radius: 999px; background: var(--wash-2); overflow: hidden; }
.bar-track span { display: block; height: 100%; border-radius: 999px; background: var(--tbright, var(--royal)); }
.bar-val { text-align: right; font-weight: 900; }
.results td.you { color: var(--you-ink); }
details.md-sec { display: block; padding-top: 0; }
details.md-sec > summary { padding: 14px 0; font-size: 1.0625rem; font-weight: 900; cursor: pointer; }
.res-sec details { border-top: 2px solid var(--line); }
.res-sec details summary { cursor: pointer; padding: 10px 0; font-weight: 800; }
pre.md { margin: 0; padding: 0 0 14px; font-family: var(--sans); font-size: .90625rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 380px; overflow: auto; color: var(--ink-2); }
.fallback textarea { width: 100%; min-height: 120px; font-size: .90625rem; background: var(--white); color: var(--ink); border: 2px solid var(--edge); border-radius: var(--r-s); padding: 8px; }

/* ---------- rebríček a profil ---------- */
.board-controls { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.board-body { display: grid; gap: 10px; border: 2px solid var(--line); border-radius: var(--r); padding: 16px 20px 18px; }
table.board td:nth-child(2) { font-weight: 800; }
table.board tr.me td { background: var(--sky-soft); }
table.board tbody tr:nth-child(-n+3) td.num:first-child { font-weight: 900; color: var(--sun-ink); }
table.board th.num:first-child, table.board td.num:first-child { text-align: right; width: 3.5ch; padding-right: 16px; }
.you-tag { margin-left: 8px; font-size: .75rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: #FFFFFF; background: var(--sky-btn); border-radius: 8px; padding: 1px 8px; }
.nick-form { display: grid; gap: 8px; }
.profile .cell input { width: 22ch; }

/* ---------- právne stránky a stránky účtu ---------- */
.doc { max-width: 860px; width: 100%; margin: 0 auto; padding: 28px 24px 0; }
.doc .card { gap: 12px; }
.doc .card:first-child { border-bottom-width: 6px; }
.doc h1 { font-size: clamp(2rem, 4.2vw, 2.75rem); }
.doc p { max-width: 72ch; }
/* Dlhá adresa či odkaz sa pri veľkom písme zalomí, aby stránka nepretiekla do strany. */
.doc a, .foot a { overflow-wrap: anywhere; }
.doc ul.rules { font-size: 1.03125rem; gap: 8px; max-width: 76ch; color: var(--ink); }
.doc ul.rules b { font-weight: 900; }
.doc code { font-size: .90625rem; background: var(--wash); border-radius: 6px; padding: 1px 6px; }
.doc table.cookies { font-size: .96875rem; }
.doc table.cookies td:first-child { width: 36%; }
.doc table.cookies .kind { font-size: .875rem; color: var(--ink-2); }
.doc table.cookies code { font-size: .84375rem; overflow-wrap: anywhere; }
.doc table.cookies td + td code { white-space: nowrap; }
/* Právne stránky s obsahom: text vľavo, obsah (TOC) vpravo sa pri posúvaní drží na mieste; na mobile rozbaľovací nad textom. */
.doc.doc-toc { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 0 36px; align-items: start; }
.doc-main { padding-top: 0; min-width: 0; }
.doc-meta { font-size: .96875rem; font-weight: 700; color: var(--ink-2); }
.tldr { background: var(--wash); border-radius: var(--r-s); padding: 16px 20px 18px; display: grid; gap: 8px; margin-top: 4px; }
.tldr-h { font-size: 1.125rem; font-weight: 900; color: var(--ink); }
.doc .tldr ul.rules { gap: 6px; }
.doc-main > section[id], .tldr { scroll-margin-top: 24px; }
.toc-side { position: sticky; top: 24px; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 4px 4px 16px 0; }
.toc-h { font-size: .8125rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--line); }
.toc-list a { display: block; margin-left: -2px; padding: 7px 12px; border-left: 3px solid transparent; border-radius: 0 var(--r-xs) var(--r-xs) 0; color: var(--ink-2); font-size: .96875rem; font-weight: 700; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.toc-list a:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .toc-list a:hover { background: var(--wash); color: var(--ink); } }
.toc-list a[aria-current="true"] { color: var(--accent-text); border-left-color: currentColor; font-weight: 900; }
.doc-toc .toc-m { display: none; }
.toc-m nav { padding-top: 2px; }
@media (prefers-reduced-motion: no-preference) { html:has(.doc-toc) { scroll-behavior: smooth; } }
@media (max-width: 900px) {
  .doc.doc-toc { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
  .doc-toc .toc-side { display: none; }
  .doc-toc .toc-m { display: block; }
}
.acct { max-width: 520px; width: 100%; margin: 32px auto 0; padding: 0 20px; display: grid; gap: 14px; }
.acct h1 { font-size: 1.875rem; }
.acct .card { border-bottom-width: 6px; }
.pw-form { max-width: 30rem; }

/* ---------- vysvetlivky: krúžok „i“ a tlačidlá s vysvetlením pri nabehnutí myšou ---------- */
.tip, .tipw { position: relative; display: inline-flex; vertical-align: middle; max-width: 100%; }
.tip-btn { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 50%; border: 2px solid var(--line-2); background: var(--white); color: var(--ink-2); cursor: help; flex: none; }
.tip-btn .tip-i { font-style: normal; font-weight: 900; font-size: .875rem; line-height: 1; }
.tip.open .tip-btn { border-color: var(--edge); color: var(--ink); background: var(--wash); }
@media (hover: hover) { .tip-btn:hover { border-color: var(--edge); color: var(--ink); background: var(--wash); } }
.tip-btn.has-label { width: auto; height: auto; min-width: 0; max-width: 100%; min-height: 40px; border-radius: 12px; padding: 4px 14px; font-size: .9375rem; font-weight: 800; color: var(--ink); }
.tip-pop { --dx: 0px; position: absolute; z-index: 40; left: 50%; top: calc(100% + 10px); transform: translateX(calc(-50% + var(--dx))); width: max-content; max-width: min(330px, calc(100vw - 24px)); background: var(--pop); color: #FFFFFF; font-family: var(--sans); font-size: .9375rem; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; padding: 10px 14px; border-radius: var(--r-s); box-shadow: 0 12px 24px -12px rgba(31, 43, 55, .55); display: none; white-space: normal; }
.tip-pop::before { content: ''; position: absolute; left: calc(50% - var(--dx)); top: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--pop); transform: rotate(45deg); }
.tip-pop::after { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
@media (hover: hover) {
  .tip:hover > .tip-pop, .tipw:hover > .tip-pop { display: block; }
}
.tip-btn:focus-visible + .tip-pop, .tipw > :focus-visible + .tip-pop, .tip.open > .tip-pop { display: block; }
.tip.dismissed > .tip-pop, .tipw.dismissed > .tip-pop { display: none !important; }
.tip-pop a { color: #FFFFFF; }
.kicker .tip { vertical-align: -6px; margin-left: 2px; }

/* ---------- prihlasovacie okno a formuláre účtu ---------- */
html:has(dialog.auth-dlg[open]) { overflow: hidden; }
.auth-dlg { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; padding: 24px 26px 22px; margin: auto; border: 2px solid var(--line); border-bottom-width: 6px; border-radius: 26px; background: var(--raised); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(31, 43, 55, .6); }
.auth-dlg::backdrop { background: rgba(31, 43, 55, .55); }
.auth-dlg > * + * { margin-top: 14px; }
.auth-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.auth-top h2 { font-size: 1.625rem; line-height: 1.2; }
.auth-top h2:focus { outline: none; }
.auth-top h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.auth-x { flex: none; width: 46px; height: 46px; margin: -8px -10px 0 0; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-3); font-size: 1.875rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { .auth-x:hover { color: var(--ink); background: var(--wash); } }
.auth-x:active { color: var(--ink); background: var(--wash); }
.auth-lead { font-size: 1.03125rem; color: var(--ink-2); }
.auth-note { font-size: .96875rem; background: var(--sky-soft); color: var(--sky-ink); border-radius: var(--r-xs); padding: 10px 14px; }
.auth-google { display: flex; width: 100%; background: var(--white); color: var(--ink); border: 2px solid var(--line-2); box-shadow: 0 4px 0 var(--line-2); margin-bottom: 4px; }
@media (hover: hover) { .auth-google:hover { background: var(--wash); filter: none; } }
.auth-google:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--line-2); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: .875rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.auth-or::before, .auth-or::after { content: ''; flex: 1; border-top: 2px solid var(--line); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--wash); border-radius: var(--r-s); padding: 4px; }
.auth-tabs [role="tab"] { min-height: 44px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font-weight: 900; font-size: .96875rem; cursor: pointer; touch-action: manipulation; }
.auth-tabs [role="tab"][aria-selected="true"] { color: var(--sky-ink); background: var(--white); box-shadow: 0 2px 0 var(--line-2); }
@media (hover: hover) { .auth-tabs [role="tab"]:hover { color: var(--ink); } }
.auth-tabs [role="tab"]:active { color: var(--ink); }
.auth-panel { padding-top: 14px; }
.auth-form { display: grid; gap: 14px; }
.afield { display: grid; gap: 6px; min-width: 0; }
.afield input[type="email"], .afield input[type="text"], .afield input[type="password"] { width: 100%; font-size: 1.0625rem; font-weight: 700; color: var(--ink); background: var(--wash); border: 2px solid var(--edge); border-radius: var(--r-s); padding: 11px 14px; min-width: 0; }
.afield input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; background: var(--white); }
.afield input[aria-invalid="true"] { border-color: var(--berry-ink); }
.pw-box { display: flex; align-items: stretch; }
.pw-box input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.pw-toggle { flex: none; border: 2px solid var(--edge); border-left: 0; border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--white); color: var(--sky-ink); font-size: .90625rem; font-weight: 900; padding: 0 14px; cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { .pw-toggle:hover { background: var(--wash); } }
.pw-toggle:active { background: var(--wash); }
.pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .90625rem; color: var(--ink-3); }
.pw-rules li { display: inline-flex; align-items: center; gap: 6px; }
.pw-mark { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge); }
.pw-rules li.ok { color: var(--royal-ink); }
.pw-rules li.ok .pw-mark { border-color: var(--royal); background: var(--royal); box-shadow: inset 0 0 0 2px var(--white); }
.acheck .check { align-items: flex-start; font-weight: 600; line-height: 1.45; }
.acheck .check input { margin-top: 3px; flex: none; }
.field-err, .auth-err { font-size: .9375rem; font-weight: 700; color: var(--berry-ink); }
.field-err:empty, .auth-err:empty { display: none; }
.auth-ok { font-size: .9375rem; font-weight: 700; color: var(--royal-ink); }
.auth-ok:empty { display: none; }
.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.auth-actions .btn:not(.quiet):not(.secondary) { flex: 1 1 auto; }
.auth-mail { overflow-wrap: anywhere; }
.auth-foot { margin: 16px 0 0; padding-top: 12px; border-top: 2px solid var(--line); font-size: .875rem; color: var(--ink-3); }
.auth-foot a { color: var(--ink-2); }

/* ---------- celoobrazovkové herné obrazovky: bez hlavičky, navigácie a päty ---------- */
body.in-focus .mast, body.in-focus .foot, body.in-focus .session { display: none; }

/* ---------- úzke obrazovky ---------- */
@media (max-width: 960px) {
  .info { grid-template-columns: minmax(0, 1fr); }
}
/* Stredné šírky: krátke názvy častí, užšie medzery, bez titulu pri ratingu. */
@media (min-width: 761px) and (max-width: 1320px) {
  .secnav { gap: 2px; }
  .sn { padding: 6px 10px; gap: 6px; }
  .sn-long { display: none; }
  .sn-short { display: inline; }
  .top-nav, .secnav + .top-nav { margin-left: auto; gap: 8px; }
  .nav-title { display: none; }
  .nav-nick { max-width: 10ch; }
  .nav-me, .nav-rating { padding: 6px 12px; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 12px; gap: 8px; }
  .hero-art { min-height: 0; }
  .hero-art .mentor.m-xl { width: min(300px, 78vw, 34dvh); }
  .hero-blob { left: 50%; right: auto; width: min(270px, 70vw, 31dvh); transform: translateX(-50%); }
  .hero .d1 { width: 46px; height: 46px; left: 6%; top: 18%; }
  .hero .d2 { width: 42px; height: 42px; right: 6%; top: 22%; }
  .hero .d3 { width: 64px; height: 64px; left: 4%; bottom: 6%; }
  .feat, .feat.flip { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .feat.flip .feat-text { order: 0; }
  .feat-art { min-height: 0; }
  .feats { gap: 64px; padding-top: 32px; }
  .sources { padding-top: 72px; }
  .modes { grid-template-columns: minmax(0, 1fr); }
  .ib-top { grid-template-columns: minmax(0, 1fr); }
  .lvl-now { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 22px; }
  .lvl-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
}
/* Veľké písmo na telefóne (media query v em rastie s nastavením písma prehliadača: 34em = 544 px pri 16 px,
   ale 1 088 px pri 200 %): ilustrácia ustúpi a hlavné tlačidlo ide hneď pod nadpis, aby bolo vidno bez posúvania.
   Pri bežnom písme sa nemení nič (najnižší bežný telefón na výšku, 568 px, má 35,5em). */
@media (max-width: 860px) and (max-height: 34em) {
  .hero-art { display: none; }
  .hero { padding-top: 16px; }
  .hero-text { gap: 18px; }
  .hero-go { order: 1; }
  .hero-sub, .hero-next, .hero-more { order: 2; }
}
/* Mobil: časti hry v pevnom páse dole (ikona nad názvom), hlavička len s logom a účtom. */
@media (max-width: 760px) {
  /* Zalomené kroky bez spojovacej čiary (na začiatku riadka by visela), oddelí ich medzera. */
  .tabs ol { column-gap: 18px; }
  .tab + .tab::before { display: none; }
  :root { --nav-h: calc(50px + min(1.125rem, 24px)); } /* 68 px pri 16 px písme; s väčším písmom rastie s popiskom */
  body:not(.in-focus) .app-game { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .mast-row { min-height: 60px; padding: 8px 16px; gap: 10px; justify-content: space-between; }
  .brand-name { font-size: 1.625rem; }
  .brand-mark { width: 32px; height: 32px; }
  .secnav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--navy); border-top: 2px solid var(--navy-2); }
  /* Popisky spodného pasu rastú s písmom len po 16 px (ako tab bar v iOS), inak by sa nezmestili ani skrátené. */
  .sn { flex-direction: column; gap: 2px; min-width: 0; min-height: 54px; padding: 4px 2px; font-size: min(.75rem, 16px); border-radius: 12px; justify-content: center; }
  .sn-ic { width: 26px; height: 26px; }
  .sn-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .sn-long { display: none; }
  .sn-short { display: inline; }
  .top-nav { margin-left: auto; }
  .nav-title { display: none; }
  .nav-nick { max-width: 9ch; }
  .navbtn, .nav-me, .nav-rating { min-height: 44px; padding: 6px 12px; font-size: .875rem; }
  .hub-notes, .session { padding: 0 16px; }
  .hero { padding: 8px 16px 40px; }
  .hero h1 { font-size: clamp(1.875rem, 8.4vw, 2.5rem); }
  .hero-sub { font-size: 1.09375rem; }
  .feats, .sources { padding-left: 16px; padding-right: 16px; }
  .cta-in { padding: 48px 16px; }
  .cta-band::before { width: 54px; height: 54px; left: 3%; top: 22px; margin-top: 0; }
  .cta-band::after { width: 48px; height: 48px; right: 4%; top: auto; bottom: 22px; margin-top: 0; }
  .cta-band .btn { min-width: 0; width: 100%; max-width: 340px; }
  .lede-stats { gap: 12px 32px; }
  .lede-stats dd { font-size: 2.5rem; }
  .page, .game-page, .result { padding: 16px 16px 48px; gap: 18px; }
  .unit-banner, .page-head { padding: 18px 18px 20px; border-radius: 20px; }
  .unit-ic { width: 60px; height: 60px; border-radius: 18px; }
  .unit-ic .ic { width: 36px; height: 36px; }
  .unit-banner { grid-template-columns: minmax(0, 1fr); }
  .unit-side { justify-self: start; }
  .game-head .unit-ic { display: none; }
  .mode { padding: 18px 16px; }
  .mode-go .btn { width: 100%; }
  .card { padding: 16px 16px 18px; }
  .banner { grid-template-columns: minmax(0, 1fr); }
  .pyr-card, .ib-card { padding: 16px 14px; }
  .gs { padding: 0 16px; }
  .gs-top { padding-top: 14px; gap: 10px; }
  .gs-top-l { display: none; }
  .gs-stage { padding: 18px 0 24px; justify-content: flex-start; gap: 18px; }
  .gs-say { gap: 12px; align-items: flex-start; }
  .mentor.pose-bust { width: 72px; height: 72px; }
  .bubble { padding: 12px 14px; }
  .bubble::before { top: 30px; }
  .gs-foot { margin: 0 -16px; }
  .gs-foot-in { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
  .gs-actions { width: 100%; margin-left: 0; }
  .gs-actions .btn { flex: 1 1 130px; padding-left: 14px; padding-right: 14px; }
  .gs-actions .btn.big { min-width: 0; }
  .gs-fb { flex-basis: 100%; gap: 12px; }
  .gs-fb-ic { width: 48px; height: 48px; }
  .gs-fb-ic .ic { width: 26px; height: 26px; }
  .gs-fb-h { font-size: 1.3125rem; }
  .gs-fb-why { font-size: .9375rem; }
  .l-actions .btn.big { width: 100%; min-width: 0; }
  .l-fb { gap: 12px; padding-left: 12px; }
  .l-fb .gs-fb-ic { width: 36px; height: 36px; }
  .l-fb .gs-fb-ic .ic { width: 20px; height: 20px; }
  .l-fb .gs-fb-h { font-size: 1.1875rem; }
  .choice { padding: 12px 14px; gap: 12px; min-height: 58px; }
  .choice-t { font-size: 1.03125rem; }
  .choice-s { font-size: .875rem; }
  .choice-key { width: 1.75rem; height: 1.75rem; font-size: .8125rem; }
  .choice.row { grid-template-columns: auto minmax(0, 1fr); }
  .choice.row .choice-num { grid-column: 2; justify-self: start; font-size: 1.0625rem; }
  .word-def { font-size: 1.125rem; }
  .pairs { gap: 10px; }
  .pair-col { gap: 10px; }
  .pair { grid-template-columns: minmax(0, 1fr); min-height: 56px; padding: 10px 12px; font-size: .9375rem; }
  .pair .choice-key { display: none; }
  .round { padding: 0 16px; }
  .round-bar { margin: 0 -16px; padding: 10px 16px 8px; }
  .round-top { gap: 10px; }
  .round-steps { gap: 4px; }
  .round-main { padding-top: 18px; gap: 18px; }
  .extract { padding: 10px 12px 2px; }
  .q { font-size: 1.1875rem; }
  .answer-input input { font-size: 1.875rem; }
  .task-go { justify-items: stretch; }
  .task-go .btn.go { width: 100%; min-width: 0; }
  .status-l { font-size: 1.25rem; }
  .fb { padding: 14px 14px 16px; }
  .res-sec, .board-body { padding: 14px 14px 18px; }
  .result-head { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .result-art { justify-self: center; grid-row: 1; }
  .result-art .mentor.m-m { width: 140px; }
  .bar-row { grid-template-columns: minmax(0, 1fr) 6ch; gap: 4px 12px; }
  .bar-label { grid-column: 1 / -1; }
  table.results thead { display: none; }
  table.results tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; border-bottom: 2px solid var(--line); }
  table.results td { border: 0; padding: 0; text-align: left; white-space: normal; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  table.results td.r-task { grid-column: 1 / -1; font-weight: 900; }
  table.results td.r-src { grid-column: 1 / -1; font-size: .9375rem; color: var(--ink-2); }
  table.results td.num::before { content: attr(data-label); display: block; font-size: .78125rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
  .doc { padding: 18px 16px 0; }
  .foot-in, .app-doc .foot { padding: 22px 16px 28px; }
  .auth-dlg { padding: 18px 16px 16px; border-radius: 22px; }
  .auth-top h2 { font-size: 1.4375rem; }
}
@media (max-width: 560px) {
  table.market thead { display: none; }
  table.market tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 0; border-bottom: 2px solid var(--line); }
  table.market td { border: 0; padding: 0; width: auto; }
  table.market td:first-child { width: auto; }
  table.market td:last-child { grid-column: 1 / -1; }
  .compare dd { font-size: 1.1875rem; }
  .tiles .tile { min-width: 132px; }
  .trail { --dot: 2.75rem; }
  .node-btn { grid-template-columns: var(--dot) minmax(0, 1fr); padding: 12px 14px; gap: 8px 12px; }
  .step + .step::before { left: calc(16px + var(--dot) / 2 - 3px); }
  .step-n { font-size: 1.1875rem; }
  .step-t { font-size: 1.0625rem; }
  .step-end { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
  .pyramid { --shape: 112px; }
  .floor-btn { grid-template-columns: var(--shape) minmax(0, 1fr); gap: 0 12px; padding-right: 6px; }
  .floor-go { display: none; }
  .floor-t { font-size: 1.03125rem; }
  .floor-ex, .floor-res { font-size: .875rem; }
  .floor-meta { font-size: .75rem; }
  .lvl-big b { font-size: 3.25rem; }
  /* Úroveň a fakty pod sebou: vedľa seba sa na telefóne nezmestia (text by pretiekol a stránka by sa posúvala do strany). */
  .lvl-now { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .mast-row { padding: 8px 12px; }
  .brand-name { font-size: 1.5rem; }
  .brand-mark { width: 28px; height: 28px; }
  .navbtn { padding: 6px 10px; font-size: .8125rem; }
  .pyramid { --shape: 96px; }
  .lvl-now { grid-template-columns: minmax(0, 1fr); }
  .pairs { grid-template-columns: minmax(0, 1fr); }
  .gs-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .gs-skip { padding: 6px 6px; font-size: .84375rem; }
  .tiles .tile { min-width: 120px; }
  .tile-v { font-size: 1.1875rem; }
}

/* ---------- prístupnosť a systémové nastavenia (Apple HIG: accessibility.md, color.md, layout.md) ---------- */
/* Fokus na plných farebných pásoch: modrý obrys by na tmavomodrom podklade nebol vidno, preto biely. */
.unit-banner :focus-visible, .page-head :focus-visible, .cta-band :focus-visible { outline-color: #FFFFFF; }
.unit-banner.quiet :focus-visible { outline-color: var(--focus); }
/* Ťuknutie bez čakania na dvojité priblíženie. */
.btn, .choice, .option, .pair, .topic, .seg button, .lvl, .node-btn, .floor-btn, .tip-btn, .code-tog, .gs-icon, .gs-skip, .sn, .navbtn, .nav-me, .linkish { touch-action: manipulation; }
/* Dotykové obrazovky: plocha na ťuknutie aspoň 44 × 44 px (malé krúžky ostávajú vizuálne rovnaké, väčšia je len neviditeľná plocha). */
@media (pointer: coarse) {
  .btn.small, .lvl, .linkish, .tip-btn.has-label { min-height: 44px; }
  .tip-btn { position: relative; }
  .tip-btn::after, .code-tog::after { content: ''; position: absolute; inset: -8px; }
  /* Odkaz-tlačidlo vnútri vety: výška 44 px by roztiahla riadok, preto len neviditeľná väčšia plocha. */
  p .linkish, .msg .linkish { min-height: 0; position: relative; }
  p .linkish::after, .msg .linkish::after { content: ''; position: absolute; inset: -10px -4px; }
}
/* Správna a nesprávna možnosť nielen farbou: v políčku s číslom sa ukáže fajka alebo krížik (accessibility.md › Vision). */
.choice.correct .choice-key, .choice.wrong .choice-key, .option.correct .opt-key, .option.wrong .opt-key { position: relative; color: transparent; }
.choice.correct .choice-key::after, .choice.wrong .choice-key::after, .option.correct .opt-key::after, .option.wrong .opt-key::after { content: ''; position: absolute; inset: 5px; background: var(--royal-ink); -webkit-mask: url(/img/ic/check.svg) center / contain no-repeat; mask: url(/img/ic/check.svg) center / contain no-repeat; }
.choice.wrong .choice-key::after, .option.wrong .opt-key::after { background: var(--berry-ink); -webkit-mask-image: url(/img/ic/cross.svg); mask-image: url(/img/ic/cross.svg); }
/* Výrez displeja pri telefóne na šírku (viewport-fit=cover): obsah ani ovládanie nesmú byť pod ním. */
.app-game > .view, .foot { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (orientation: landscape) and (max-height: 500px) {
  .mast-row { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .secnav { padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px)); }
}
/* Zvýšený kontrast: tmavšie sivé texty, okraje a jemné podklady. */
@media (prefers-contrast: more) {
  :root { --ink-2: #26344F; --ink-3: #3B4A68; --line: #9AA8C2; --line-2: var(--edge); --wash: #E9EFF9; --wash-2: #D5DFF0; }
}
@media screen and (prefers-contrast: more) {
  :root[data-theme="dark"]:not(.only-light) { --ink-2: #D3DBEC; --ink-3: #BAC5DD; --line: #4A5C8C; --line-2: var(--edge); --edge: #9AA8C8; --wash: #0E1832; --wash-2: #1C2B52; }
}
/* Vysoký kontrast Windows (forced-colors): tlačidlá si nechajú okraj, postup a výplne ostanú viditeľné. */
@media (forced-colors: active) {
  .btn, .choice, .option, .pair, .node-btn, .floor-btn { border: 2px solid ButtonText; }
  .gs-prog span, .prog-bar span, .bar-track span, .round-steps li, .floor-fill, .mix-bar span { forced-color-adjust: none; }
  /* Ikony sú maska s pozadím currentColor: bez tohto by im systém prepísal pozadie a zmizli. */
  .ic { forced-color-adjust: none; background: CanvasText !important; }
  a .ic { background: LinkText !important; }
  button .ic { background: ButtonText !important; }
  .choice-key::after, .opt-key::after { forced-color-adjust: none; background: CanvasText !important; }
}

/* ---------- pohyb (len keď ho hráč nemá vypnutý) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .choice, .option, .pair, .topic, .seg button, .navbtn, .nav-me, .node-btn, .floor-btn, .auth-google { transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease, border-color .15s ease, filter .15s ease; }
  .gs-prog span, .prog-bar span { transition: width .45s cubic-bezier(.3, 1.4, .5, 1); }
  .gs-stage, .round-main { animation: rise .26s ease-out both; }
  .mentor.is-joy, .gs-stage.is-done .mentor { animation: hop .8s ease-out 1 both; }
  .gs-spark { animation: spark 1.2s ease-out 1 both; }
  .gs-foot.is-ok, .gs-foot.is-bad { animation: slide-up .22s ease-out both; }
  .l-fb.is-ok, .l-fb.is-bad { animation: rise .22s ease-out both; }
  .choice.correct, .option.correct, .pair.matched { animation: pop .3s ease-out both; }
  .pair.miss, .choice.wrong, .option.wrong { animation: shake .32s ease-in-out both; }
  .floor-fill { animation: fill-in .7s ease-out both; }
  /* Aktuálny bod grafu: presun z predošlej polohy (game.js mení transform) a pulzujúci kruh. */
  /* Stĺpec „Riadok“: pás sa vysunie (len transform + opacity, bez prepočtu tabuľky); pri zbalení sa skryje pre čítačky až po dobehnutí.
     Otvorenie 360 ms s mäkkým dobehom (ease-out), kódy sa ukážu o chvíľu po páse; zbalenie kratšie (240 ms). Šípka sa otáča s pásom. */
  table.has-codes .code::before, table.has-codes .code-tx { transition: transform .24s cubic-bezier(.4, 0, 1, 1), opacity .2s ease-in, visibility 0s linear .24s; }
  table.has-codes.codes-open .code::before { transition: transform .36s cubic-bezier(.22, 1, .36, 1), opacity .28s ease-out, visibility 0s; }
  table.has-codes.codes-open .code-tx { transition: transform .36s cubic-bezier(.22, 1, .36, 1) .04s, opacity .28s ease-out .06s, visibility 0s; }
  .code-ar { transition: transform .24s cubic-bezier(.4, 0, 1, 1); }
  .codes-open .code-ar { transition: transform .36s cubic-bezier(.22, 1, .36, 1); }
  .gr-cur { transition: transform .9s cubic-bezier(.3, 1.3, .5, 1); }
  /* Opakovaný pohyb len krátko (do 5 s, WCAG 2.2.2), potom stojí – motion.md › Best practices. */
  .gr-halo { transform-box: fill-box; transform-origin: center; animation: halo 1.8s ease-out 2; }
  @keyframes fill-in { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes halo { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
  .hero-art .deco { animation: float 4s ease-in-out 1; }
  .hero-art .d2 { animation-delay: .4s; } .hero-art .d3 { animation-delay: .8s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes hop { 0% { transform: translateY(0) scale(.94); } 40% { transform: translateY(-16px) scale(1.03); } 70% { transform: translateY(0) scale(.99); } 100% { transform: none; } }
  @keyframes spark { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.1) rotate(4deg); } 100% { opacity: 1; transform: none; } }
  @keyframes slide-up { from { transform: translateY(16px); opacity: .4; } to { transform: none; opacity: 1; } }
  @keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(4deg); } }
  .auth-dlg[open] { animation: auth-in .18s ease-out; }
  @keyframes auth-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
}
@media print {
  .mast .top-nav, .secnav, .session, .round-bar, .task-go, .actions, .abort, .gs-foot, .l-actions, .gs-top, .calc-panel, .toc-side, .toc-m { display: none !important; }
  .doc.doc-toc { grid-template-columns: minmax(0, 1fr); }
  body { background: #FFFFFF; }
  table.has-codes .code-in { width: auto; }
  table.has-codes .code-tx { transform: none; opacity: 1; visibility: visible; transition: none; }
  table.has-codes .code::before, .code-tog { display: none; }
}

/* ---------- Učenie (2.4) ---------- */
.l-app{max-width:1180px;margin:0 auto;padding:0 16px 52px}
.l-mast{border-bottom:1px solid var(--line);background:var(--white)}
.l-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-left:auto}
.l-nav-a{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:11px;font-weight:800;color:var(--ink-2);text-decoration:none;font-size:.92rem}
.l-nav-a small{font-weight:700;font-size:.68rem;background:var(--wash-2);padding:2px 6px;border-radius:999px}
.l-nav-a.is-on{background:var(--navy);color:#FFFFFF}
.l-nav-a.is-off{opacity:.65;cursor:not-allowed}
.l-nav-game{border:1px solid var(--line)}
.l-nav-game.is-on{border-color:var(--navy)}
.l-main{max-width:1100px;margin:0 auto;padding:24px 0 0}

/* Spoločný úvod iných sekcií (Denná výzva, Rapid, Prípady): redesign Učenia ho nesmie odstrániť. */
.l-hero{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#FFFFFF;border-radius:18px;padding:22px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.l-hero h1{font-size:1.35rem;margin:.1em 0 .3em;line-height:1.25}
.l-hero p{margin:0;opacity:.9;max-width:62ch}

/* Úvodná karta Učenia: biely vzdušný úvod, jediné hlavné CTA, postup ako tenká linka. */
.l-hero-course{position:relative;overflow:hidden;display:grid;gap:0;padding:34px 36px 26px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(165deg,var(--wash) 0%,var(--white) 68%);color:var(--ink)}
.l-hero-course::after{content:"";position:absolute;right:-120px;top:-150px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--royal-soft) 0%,transparent 70%);pointer-events:none}
.l-hero-copy{position:relative;z-index:1;max-width:730px}
.l-eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.l-eyebrow b{color:var(--royal-ink);letter-spacing:.04em}
.l-hero-course h1{margin:0 0 10px;max-width:26ch;font-size:clamp(1.65rem,3.3vw,2.35rem);font-weight:900;line-height:1.12;letter-spacing:-.015em;color:var(--ink)}
.l-hero-sub{margin:0;max-width:58ch;font-size:1rem;line-height:1.55;color:var(--ink-2)}
.l-hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.l-btn.l-btn-primary{background:var(--navy);color:#FFFFFF;border-radius:14px;padding:13px 20px;min-height:48px;box-shadow:0 4px 0 rgba(0,0,0,.32)}
.l-quietlink{border:0;background:none;font:inherit;font-size:.92rem;font-weight:800;color:var(--ink-2);cursor:pointer;padding:10px 2px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--line-2)}
.l-hero-progress{position:relative;z-index:1;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.l-hero-progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:.82rem;font-weight:800;color:var(--ink-3)}
.l-hero-progress-top b{color:var(--royal-ink);font-size:.95rem}

.l-pathbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 0}
.l-pathbar-label{font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.l-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0;min-width:0}
.l-chip{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:8px 14px;font:inherit;font-weight:800;font-size:.88rem;color:var(--ink-2);cursor:pointer;min-height:42px}
.l-chip.is-on{background:var(--navy);color:#FFFFFF;border-color:var(--navy)}
.l-guestnote{margin:16px 0 0;max-width:72ch;font-size:.88rem;line-height:1.55;color:var(--ink-3)}
.l-guestnote a{color:var(--royal-ink);font-weight:800}

.l-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 16px;font:inherit;font-weight:800;cursor:pointer;text-decoration:none;background:#FFFFFF;color:var(--navy);box-shadow:0 3px 0 rgba(0,0,0,.18);transition:transform .12s ease,box-shadow .12s ease,background .15s ease}
.l-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.l-btn.secondary{background:var(--royal-soft);color:var(--ink);box-shadow:0 3px 0 rgba(11,30,75,.16)}
.l-btn.ghost{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.4);box-shadow:none}
.l-btn.small{padding:7px 11px;font-size:.82rem;box-shadow:none;border:1px solid var(--line)}
.l-btn:focus-visible,.l-nav-a:focus-visible,.l-chip:focus-visible,.l-quietlink:focus-visible,.l-step-link:focus-visible,.l-topic-link:focus-visible,.l-term a:focus-visible,.l-back:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.l-detail .l-btn{background:var(--navy);color:#FFFFFF;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.l-detail .l-btn.secondary{background:var(--white);color:var(--ink);border:1px solid var(--line);box-shadow:none}

.l-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:16px 0}
.l-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:16px;color:inherit;text-decoration:none;display:block}
.l-card h3{margin:.2em 0 .4em;font-size:1rem}
.l-card p{margin:.2em 0;font-size:.9rem;color:var(--ink-2)}
.l-card:hover{border-color:var(--line-2)}

.l-section{margin:36px 0 0}
.l-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.l-section h2{margin:0;font-size:1.3rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.l-section .l-sub{margin:4px 0 0;max-width:70ch;font-size:.9rem;line-height:1.5;color:var(--ink-3)}
.l-count{font-size:.82rem;font-weight:900;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Ekonómia: dve mäkké témy namiesto tabuľky riadkov. */
.l-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.l-topic{border:1px solid transparent;border-radius:20px;padding:20px 20px 12px;background:var(--sky-soft)}
.l-topic--sun{background:var(--sun-soft)}
.l-topic h3{margin:0 0 6px;font-size:1.05rem;color:var(--ink)}
.l-topic p{margin:0 0 8px;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.l-topic-links{display:grid}
.l-topic-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:700;line-height:1.35}
.l-topic-link::after{content:"→";flex:none;color:var(--ink-3);font-weight:900}
.l-topic-link:last-child{padding-bottom:12px}

/* Mapa: číslovaná cesta s jednou spojnicou, bez 109 rámčekov. */
.l-map{list-style:none;margin:0;padding:0;position:relative}
.l-map::before{content:"";position:absolute;left:17px;top:28px;bottom:28px;width:2px;border-radius:2px;background:var(--line)}
.l-step{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:start}
.l-step-n{position:relative;z-index:1;width:34px;height:34px;margin-top:11px;display:grid;place-items:center;border:1.5px solid var(--line-2);border-radius:50%;background:var(--white);color:var(--ink-3);font-size:.72rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.l-step-link{display:block;min-height:56px;padding:11px 14px;border-radius:14px;text-decoration:none;color:inherit}
.l-step-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.l-step-title{display:block;min-width:0;font-size:.95rem;font-weight:700;line-height:1.4;color:var(--ink)}
.l-step-state{flex:none;margin-top:2px;font-size:.74rem;font-weight:900;color:var(--ink-3);white-space:nowrap}
.l-step-meta{display:block;margin-top:4px;font-size:.8rem;line-height:1.45;color:var(--ink-3)}
.l-step-prog{display:flex;align-items:center;gap:8px;margin-top:7px}
.l-step.is-locked .l-step-title{color:var(--ink-2);font-weight:600}
.l-step.is-locked .l-step-n{background:var(--wash);border-color:var(--wash-2);color:var(--ink-3)}
.l-step.is-next .l-step-n{background:var(--navy);border-color:var(--navy);color:#FFFFFF;box-shadow:0 0 0 4px var(--royal-soft)}
.l-step.is-next .l-step-link{background:var(--royal-soft)}
.l-step.is-next .l-step-state{color:var(--royal-ink)}
.l-step.is-done .l-step-n{background:var(--royal-ink);border-color:var(--royal-ink);color:#FFFFFF}
.l-step.is-done .l-step-state{color:var(--royal-ink)}

.l-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;background:var(--wash-2);color:var(--ink-2);font-size:.72rem;font-weight:900;white-space:nowrap}
.l-badge.ok{background:var(--royal-soft);color:var(--royal-ink)}
.l-badge.progress{background:var(--sun-soft);color:var(--sun-ink)}
.l-badge.locked{background:var(--wash-2);color:var(--ink-2)}
progress.l-progress{appearance:none;display:block;border:0;width:64px;height:6px;border-radius:99px;background:var(--wash-2);overflow:hidden;flex:none}
progress.l-progress::-webkit-progress-bar{background:var(--wash-2);border-radius:99px}
progress.l-progress::-webkit-progress-value{background:var(--navy);border-radius:99px}
progress.l-progress::-moz-progress-bar{background:var(--navy);border-radius:99px}
progress.l-progress.l-progress-wide{width:100%;height:8px}

.l-detail{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px}
.page-ucenie .l-detail{max-width:780px;margin-left:auto;margin-right:auto}
.l-detail h1{margin:.1em 0 .4em;font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.25;letter-spacing:-.01em}
.l-detail h2{margin:24px 0 8px;font-size:1.05rem;line-height:1.35}
.l-detail p{margin:.45em 0;line-height:1.65;color:var(--ink-2)}
.l-detail h1,.l-detail h2{color:var(--ink)}
.l-meta{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0;font-size:.82rem;color:var(--ink-3)}
.l-objectives{margin:0 0 6px}
.l-objectives summary{display:inline-flex;align-items:center;min-height:32px;list-style:none;cursor:pointer;font-size:.82rem;font-weight:800;color:var(--ink-3)}
.l-objectives summary::-webkit-details-marker{display:none}
.l-objectives summary::after{content:"+";margin-left:6px;font-weight:900}
.l-objectives[open] summary::after{content:"–"}
.l-objectives summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.l-objectives p{max-width:72ch;margin:6px 0 0;font-size:.85rem;line-height:1.6;color:var(--ink-3)}
.l-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.9rem}
.l-table th,.l-table td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.l-table th{background:var(--wash);font-weight:800}
.l-form{display:grid;gap:12px;margin:14px 0}
.l-field{display:grid;gap:5px}
.l-field label{font-size:.9rem;font-weight:800}
.l-field input,.l-field select{max-width:340px;padding:10px 11px;border:1px solid var(--edge);border-radius:10px;background:var(--white);color:var(--ink);font:inherit}
.l-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.l-detail .l-actions{justify-content:flex-start}
.l-note{margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--wash);color:var(--ink-2);font-size:.92rem;line-height:1.5}
.l-note.ok{background:var(--royal-soft);border-color:var(--line);color:var(--ink)}
.l-note.bad{background:var(--berry-soft);border-color:var(--berry-line);color:var(--berry-ink)}
.l-steps{padding-left:20px}
.l-steps li{margin:.3em 0;line-height:1.55}
.l-small{font-size:.8rem;line-height:1.5;color:var(--ink-3)}
/* Návrat nad detailom: v zarovnanom stĺpci s kartou, veľký dotykový terč, jasný smer. */
.l-crumb{max-width:780px;margin:0 auto 8px;width:100%}
.l-crumb .l-note{margin:0 0 10px}
.l-back{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px 0 6px;margin-left:-6px;border-radius:10px;color:var(--ink-2);font-size:.9rem;font-weight:800;text-decoration:none;transition:background .15s ease,color .15s ease}
.l-back-arrow{font-size:1.15em;line-height:1;transform:translateY(-1px)}
.l-gap{margin-top:16px}
.l-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--white);text-decoration:none;color:inherit}
.l-row:hover{border-color:var(--line-2)}
.l-row-main{min-width:0}
.l-row-title{display:block;font-size:.94rem;font-weight:700;line-height:1.35}
.l-row-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;font-size:.78rem;color:var(--ink-3)}
.l-row-side{display:flex;align-items:center;gap:8px;flex:none}
.l-term-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:2px}
.l-term-link{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:2px 0;border:0;background:none;font:inherit;font-size:.82rem;font-weight:800;color:var(--royal-ink);text-decoration:none;cursor:pointer}
.l-term-link::after{content:"→";font-weight:900}
.l-term-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

/* Pojmy: rozbaľovacie, aby 60 kariet nepredlžovalo mapu. */
.l-terms-box{margin:40px 0 0;border-top:1px solid var(--line);padding-top:4px}
.l-terms-box summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 0;list-style:none;cursor:pointer;font-size:1.05rem;font-weight:900;color:var(--ink)}
.l-terms-box summary::-webkit-details-marker{display:none}
.l-terms-box summary::after{content:"+";font-size:1.45rem;font-weight:700;line-height:1;color:var(--ink-3)}
.l-terms-box[open] summary::after{content:"–"}
.l-terms-box summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:8px}
.l-terms-box .l-sub{margin:0 0 14px}
.l-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;list-style:none;padding:0;margin:0 0 10px}
.l-term{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--white)}
.l-term b{font-size:.92rem;line-height:1.35}
.l-term span{font-size:.78rem;line-height:1.45;color:var(--ink-3)}

@media (hover:hover){
  .l-nav-a:hover{background:var(--wash);color:var(--ink)}
  .l-nav-a.is-on:hover{background:var(--navy-2);color:#FFFFFF}
  .l-chip:hover{border-color:var(--line-2);background:var(--wash);color:var(--ink)}
  .l-chip.is-on:hover{background:var(--navy-2);border-color:var(--navy-2);color:#FFFFFF}
  .l-btn.l-btn-primary:hover{background:var(--navy-2)}
  .l-quietlink:hover{color:var(--navy)}
  .l-step-link:hover{background:var(--wash)}
  .l-step.is-next .l-step-link:hover{background:var(--royal-soft)}
  .l-topic-link:hover{color:var(--royal-ink)}
  .l-term-link:hover{text-decoration:underline;text-underline-offset:3px}
  .l-card:hover{border-color:var(--line-2)}
  .l-back:hover{color:var(--navy);background:var(--wash)}
}
@media (prefers-reduced-motion: reduce){
  .l-btn{transition:none}
}

@media (max-width:760px){
  .l-app{padding:0 12px 40px}
  .l-mast .mast-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand theme" "nav nav";gap:8px 10px;min-height:0;padding:10px 12px}
  .l-mast .brand{grid-area:brand}
  .l-mast .brand-sub{display:none}
  .l-mast .l-nav{grid-area:nav;width:100%;justify-content:space-between;gap:2px;flex-wrap:nowrap;margin-left:0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .l-mast .l-nav::-webkit-scrollbar{display:none}
  .l-mast .theme-btn{grid-area:theme}
  .l-nav-a{padding:8px 6px;font-size:.82rem;white-space:nowrap}
  .l-nav-game{border:0;background:var(--wash)}
  .l-main{padding-top:16px}
  .l-hero{padding:16px;border-radius:14px}
  .l-hero h1{font-size:1.12rem}
  .l-hero-course{padding:22px 18px 18px;border-radius:18px}
  .l-hero-course h1{max-width:none;font-size:1.55rem}
  .l-hero-actions{align-items:stretch;gap:4px}
  .l-hero-actions .l-btn{width:100%}
  .l-quietlink{width:100%;text-align:center;padding:12px}
  .l-pathbar{display:block;margin-top:22px}
  .l-pathbar-label{display:block;margin-bottom:8px}
  .l-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .l-chip{width:100%;padding:10px 8px;font-size:.82rem;min-height:44px}
  .l-chip:last-child{grid-column:1 / -1}
  .l-topics{grid-template-columns:1fr}
  .l-topic{padding:16px 16px 8px}
  .l-step{grid-template-columns:30px minmax(0,1fr);gap:6px}
  .l-map::before{left:14px}
  .l-step-n{width:28px;height:28px;margin-top:13px;font-size:.66rem}
  .l-step-link{padding:10px 6px}
  .l-step-top{display:block}
  .l-step-state{display:block;margin-top:2px}
  .l-section{margin-top:30px}
  .l-section h2{font-size:1.15rem}
  .l-sechead .l-count{display:none}
  .l-detail{padding:18px;border-radius:18px}
  .l-detail h1{font-size:1.3rem}
  .l-detail .l-actions .l-btn{width:100%}
  .l-table{font-size:.82rem}
  .l-table th,.l-table td{padding:6px}
  .l-terms{grid-template-columns:1fr}
  .l-terms-box{margin-top:32px}
}

/* Nočný režim: aktívne prvky nesmú splývať s podkladom (tokeny tmy sú nad :root). */
@media screen {
  :root[data-theme="dark"]:not(.only-light) .l-nav-a.is-on,
  :root[data-theme="dark"]:not(.only-light) .l-chip.is-on,
  :root[data-theme="dark"]:not(.only-light) .l-step.is-next .l-step-n{background:var(--royal-btn);border-color:var(--royal-btn)}
  :root[data-theme="dark"]:not(.only-light) .l-btn.l-btn-primary{background:var(--royal-btn);border:1px solid rgba(255,255,255,.18)}
  :root[data-theme="dark"]:not(.only-light) .l-detail .l-btn{background:var(--royal-btn);color:#FFFFFF;border:1px solid rgba(255,255,255,.18);box-shadow:0 3px 0 rgba(0,0,0,.4)}
  :root[data-theme="dark"]:not(.only-light) .l-detail .l-btn.secondary{background:var(--white);color:var(--ink);border:1px solid var(--line);box-shadow:none}
  :root[data-theme="dark"]:not(.only-light) .l-back:hover{color:var(--royal-ink);background:var(--wash)}
  :root[data-theme="dark"]:not(.only-light) .l-quietlink:hover{color:var(--royal-ink)}
  :root[data-theme="dark"]:not(.only-light) .l-step.is-done .l-step-n{background:var(--royal);border-color:var(--royal)}
  :root[data-theme="dark"]:not(.only-light) progress.l-progress::-webkit-progress-value{background:var(--royal)}
  :root[data-theme="dark"]:not(.only-light) progress.l-progress::-moz-progress-bar{background:var(--royal)}
}

/* ---------- Učenie ako Základy (len .page-ucenie; zdieľané .l-* pravidlá ostávajú) ----------
   Hlavička je navy ako pri hre; pás jednotky, karty a tlačidlá používajú pravidlá Základov vyššie. */
.page-ucenie .l-mast { background: var(--navy); border-bottom-color: var(--navy-2); }
.page-ucenie .l-mast .brand-name { color: #FFFFFF; }
.page-ucenie .l-mast .brand-mark { border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); }
.page-ucenie .l-mast .l-nav-a { color: var(--navy-ink); }
.page-ucenie .l-mast .l-nav-game { border-color: rgba(217, 227, 250, .45); }
.page-ucenie .l-mast .l-nav-a small { color: var(--ink); }
.page-ucenie .l-mast .theme-btn { background: transparent; border-color: rgba(217, 227, 250, .55); color: var(--navy-ink); }
.page-ucenie .l-mast :focus-visible { outline-color: #FFFFFF; }
.page-ucenie .l-mast .l-nav-a.is-on { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
@media (hover: hover) {
  .page-ucenie .l-mast .l-nav-a:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
  .page-ucenie .l-mast .l-nav-a.is-on:hover { background: #FFFFFF; color: var(--navy); }
  .page-ucenie .l-mast .theme-btn:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
}
:root[data-theme="dark"]:not(.only-light) .page-ucenie .l-mast { border-bottom-color: var(--navy-2); }
:root[data-theme="dark"]:not(.only-light) .page-ucenie .l-mast .l-nav-a.is-on { background: #FFFFFF; border-color: #FFFFFF; color: var(--navy); }
.page-ucenie .l-nav-game { background: transparent; }
.page-ucenie .l-main { max-width: 960px; }
.page-ucenie .l-main .node-btn, .page-ucenie .l-main .btn { text-decoration: none; }
.page-ucenie .l-main a.btn:focus-visible, .page-ucenie .l-main .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.page-ucenie .unit-banner .btn.on-color:focus-visible { outline-color: #FFFFFF; }
.page-ucenie .unit-banner h1 { overflow-wrap: break-word; }
.page-ucenie .unit-banner h1:focus { outline: none; }
.page-ucenie .unit-banner h1:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 4px; border-radius: 6px; }
.page-ucenie .u-maph { font-size: 1.3rem; line-height: 1.25; color: var(--ink); margin: 0; }
.page-ucenie .step-t, .page-ucenie .step-sub { overflow-wrap: anywhere; }
.page-ucenie .u-rest { margin-top: 4px; }
.page-ucenie .u-rest .trail { margin-top: 12px; }
.page-ucenie .u-rest > summary, .page-ucenie .u-path > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 16px; list-style: none; cursor: pointer; border: 2px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink); font-weight: 900; }
.page-ucenie .u-rest > summary::-webkit-details-marker, .page-ucenie .u-path > summary::-webkit-details-marker { display: none; }
.page-ucenie .u-rest > summary::after, .page-ucenie .u-path > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--ink-3); }
.page-ucenie .u-rest[open] > summary::after, .page-ucenie .u-path[open] > summary::after { content: "–"; }
.page-ucenie .u-rest > summary:focus-visible, .page-ucenie .u-path > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.page-ucenie .u-path { margin: 0 0 18px; }
.page-ucenie .u-path > summary { justify-content: flex-start; }
.page-ucenie .u-path > summary::after { margin-left: auto; }
.page-ucenie .u-path-change { color: var(--ink-3); font-weight: 700; }
.page-ucenie .u-path .l-chips { margin-top: 12px; }
.page-ucenie .l-guestnote { margin: 0 0 18px; max-width: none; font-size: 1rem; color: var(--ink-2); }
.page-ucenie .l-guestnote .l-quietlink { padding: 10px 2px; min-height: 44px; }
.page-ucenie .l-guestnote a { display: inline-block; padding: 10px 0; }
.page-ucenie .l-terms-box { margin-top: 8px; }
.page-ucenie .l-lesson { max-width: 780px; margin: 0 auto 16px; width: 100%; }
.page-ucenie .l-lesson .l-detail { max-width: none; margin: 0; }
.page-ucenie .l-lesson .unit-banner h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
@media (max-width: 640px) {
  .page-ucenie .unit-banner { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 20px; }
  .page-ucenie .unit-side .btn { width: 100%; }
  .page-ucenie .node-btn { grid-template-columns: var(--dot) minmax(0, 1fr); padding: 12px 14px; }
  .page-ucenie .step-end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .page-ucenie .l-lesson .l-detail .l-actions .btn { width: 100%; }
}

/* Jedna aktivita naraz: pôvodný mentor, hmatateľné voľby a jasný výsledok. */
.page-ucenie .u-practice{max-width:780px;margin:0 auto;width:100%}
.page-ucenie .u-activity-top{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.page-ucenie .u-phases{display:flex;flex:1;gap:8px;list-style:none;margin:0;padding:0;justify-content:space-between}
.page-ucenie .u-phases li{display:flex;align-items:center;gap:7px;font-size:.85rem;font-weight:800;color:var(--ink-3)}
.page-ucenie .u-phases li>span{display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--wash-2)}
.page-ucenie .u-phases .is-current{color:var(--royal-ink)}
.page-ucenie .u-phases .is-current>span{background:var(--royal-btn);color:#FFFFFF}
.page-ucenie .u-phases .is-done>span{background:var(--sun-soft);color:var(--sun-ink)}
.page-ucenie .u-reading{border-top:5px solid var(--sky);background:var(--sky-soft)}
.page-ucenie .u-reading[data-kind="worked"]{border-color:var(--sun);background:var(--sun-soft)}
.page-ucenie .u-reading[data-kind="guided"]{border-color:var(--royal);background:var(--royal-soft)}
.page-ucenie .u-reading .gs-say{margin-bottom:18px}
.page-ucenie .u-reading h2{margin:0;font-size:1.3rem}
.page-ucenie .u-reading-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.page-ucenie .u-exercise{border-top:5px solid var(--sky)}
.page-ucenie .u-exercise .gs-say{margin:20px 0 28px;align-items:flex-start}
.page-ucenie .u-exercise .gs-q{font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.45;white-space:pre-line}
.page-ucenie .u-task-data{background:var(--sun-soft);border-radius:var(--r-s);padding:8px 12px;margin-bottom:20px}
.page-ucenie .u-options{min-width:0;border:0;padding:0;margin:0;display:grid;gap:12px}
.page-ucenie .u-options legend{font-weight:900;margin-bottom:12px}
.page-ucenie .u-option{display:flex;align-items:center;gap:12px;min-height:70px;padding:14px 18px;border:2px solid var(--line-2);border-bottom-width:5px;border-radius:var(--r);background:var(--white);color:var(--ink);font-size:1.1rem;font-weight:800;cursor:pointer;overflow-wrap:anywhere}
.page-ucenie .u-option input{width:22px;height:22px;flex:none;accent-color:var(--royal-btn)}
.page-ucenie .u-option .choice-key{flex:none}
.page-ucenie .u-option:has(input:checked){background:var(--sky-soft);border-color:var(--sky-btn);color:var(--sky-ink)}
.page-ucenie .u-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.page-ucenie .u-exercise .l-field input{width:100%;max-width:none;min-height:60px;border-width:2px;border-bottom-width:5px;border-radius:var(--r-s);font-size:1.25rem;background:var(--sky-soft)}
.page-ucenie .u-result{border:2px solid var(--sun-edge);border-bottom-width:6px;background:var(--sun-soft)}
.page-ucenie .u-result.is-bad{border-color:var(--berry-line);background:var(--berry-soft)}
.page-ucenie .u-result-head{margin:0 0 24px}
.page-ucenie .u-result h1{color:var(--sun-ink);font-size:1.9rem}
.page-ucenie .u-result.is-bad h1{color:var(--berry-ink)}
.page-ucenie .u-result-count{margin:0 0 24px;font-size:1.2rem;font-weight:900;color:var(--ink)}
.page-ucenie .u-feedback-group{margin:24px 0}
.page-ucenie .u-feedback-group h3{font-size:1.15rem;margin:0 0 12px}
.page-ucenie .u-feedback-list{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.page-ucenie .u-feedback-item{padding:16px;border:1px solid var(--line-2);border-left:5px solid var(--line-2);border-radius:var(--r-s);background:var(--white);overflow-wrap:anywhere}
.page-ucenie .u-feedback-item.is-ok{border-left-color:var(--royal)}
.page-ucenie .u-feedback-item.is-bad{border-left-color:var(--berry)}
.page-ucenie .u-feedback-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-ucenie .u-feedback-head h4{margin:0;font-size:1rem;flex:1 1 180px}
.page-ucenie .u-feedback-status{margin:0!important;font-size:.9rem;font-weight:900}
.page-ucenie .is-ok>.u-feedback-head .u-feedback-status{color:var(--royal-ink)}
.page-ucenie .is-bad>.u-feedback-head .u-feedback-status{color:var(--berry-ink)}
.page-ucenie .u-feedback-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0 0}
.page-ucenie .u-feedback-values dt{font-size:.8rem;color:var(--ink-3)}
.page-ucenie .u-feedback-values dd{margin:4px 0 0;font-size:1rem;font-weight:800;color:var(--ink)}
.page-ucenie .u-result-explanation{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-2)}
.page-ucenie .u-result-explanation h2{margin:0 0 16px}
.page-ucenie .u-result-explanation p{margin:0 0 16px;line-height:1.65}
.page-ucenie .u-answer-summary{display:grid;gap:10px}
.page-ucenie .u-answer-summary>div{border-radius:var(--r-s);background:var(--white);padding:12px 16px}
.page-ucenie .u-answer-summary dt{font-size:.9rem;color:var(--ink-2)}
.page-ucenie .u-answer-summary dd{margin:4px 0 0;font-size:1.3rem;font-weight:900;color:var(--ink)}
@media(max-width:640px){
  .page-ucenie .u-activity-top{gap:8px}
  .page-ucenie .u-phases{gap:4px}
  .page-ucenie .u-phases li{flex-direction:column;gap:4px;font-size:.75rem}
  .page-ucenie .u-exercise .gs-say{display:block}
  .page-ucenie .u-exercise .mentor{margin-bottom:12px}
  .page-ucenie .u-practice .l-actions .btn{width:100%}
  .page-ucenie .u-result-head{align-items:flex-start}
  .page-ucenie .u-result-head .mentor{width:64px;height:64px}
}

/* Neutrálne zadania príkladov: situácie, čísla a otázky oddelene. */
.page-ucenie .u-example-section{margin:20px 0 24px;padding:16px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--white)}
.page-ucenie .u-example-section h3{margin:0 0 12px;font-size:1.15rem}
.page-ucenie .u-example-scroll{max-width:100%;overflow-x:auto}
.page-ucenie .u-example-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.page-ucenie .u-example-table{width:100%;min-width:18rem;table-layout:fixed;border-collapse:collapse;font-size:.94rem}
.page-ucenie .u-example-table caption{text-align:left;padding:0 0 12px;font-size:.9rem;color:var(--ink-2)}
.page-ucenie .u-example-table th,.page-ucenie .u-example-table td{padding:10px 8px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top;overflow-wrap:break-word}
.page-ucenie .u-example-table thead th{background:var(--wash);font-size:.8rem;font-weight:900}
.page-ucenie .u-example-table tbody th{font-weight:600}
.page-ucenie .u-example-table .u-example-value{width:6.5rem;text-align:right;font-variant-numeric:tabular-nums}
.page-ucenie .u-example-table .u-example-row{width:4.5rem}
.page-ucenie .u-example-table thead .u-example-row{white-space:nowrap;letter-spacing:0}
.page-ucenie .u-example-codes{margin-bottom:4px}
.page-ucenie .u-example-table.has-codes{table-layout:auto}
.page-ucenie .u-example-question{margin:16px 0 0!important;line-height:1.55}
@media(max-width:640px){
  .page-ucenie .u-example-section{padding:12px}
  .page-ucenie .u-example-table th,.page-ucenie .u-example-table td{padding:10px 4px}
  .page-ucenie .u-example-table .u-example-value{width:5.5rem}
  .page-ucenie .u-example-table .u-example-row{width:4rem}
}

/* Vysvetlenie výkazu: skupiny majetku ako riadky tabuľky, kódy a odkazy do formulára v páse zo šípky (row-codes.js). */
.page-ucenie .u-sheet-map{margin-top:24px;padding:20px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--white)}
.page-ucenie .u-sheet-map h3{margin:0 0 8px;font-size:1.2rem;line-height:1.3;color:var(--ink)}
.page-ucenie .u-sheet-wrap{margin-top:12px}
.page-ucenie .u-sheet-table{border-collapse:separate;border-spacing:0 10px}
.page-ucenie .u-sheet-table th,.page-ucenie .u-sheet-table td{border-bottom:0}
.page-ucenie .u-sheet-table thead th{padding-bottom:0;vertical-align:middle}
.page-ucenie .u-sheet-cell{padding:12px 14px;border-left:4px solid var(--sky);border-radius:var(--r-xs);background:var(--sky-soft)}
.page-ucenie .u-sheet-cell b{display:block;color:var(--ink);font-size:1rem}
.page-ucenie .u-sheet-desc{display:block;margin-top:4px;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.page-ucenie .u-sheet-table.codes-open td.code{border-radius:var(--r-xs)}
.page-ucenie .u-sheet-table .is-total .u-sheet-cell{border-left-color:var(--sun-edge);background:var(--sun-soft)}
.page-ucenie .u-sheet-table .is-other .u-sheet-cell{border-left-color:var(--line-2);background:var(--wash)}
.page-ucenie .u-sheet-table tr.grp th{padding:14px 0 0;font-size:.8rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:640px){
  .page-ucenie .u-sheet-map{padding:16px}
}

/* ---------- Spoločná úloha (task-view.js): precvičenie v Učení, Denná výzva a Prípady ----------
   Rovnaký jazyk ako Základy: mentor s bublinou, situácie ako karty, veľké odpovede so spodnou hranou,
   tabuľka zo závierky s pásom „Riadok“ (row-codes.js) a kalkulačka z hry (calc-panel.js). */
.t-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.t-head > :first-child { min-width: 0; }
.t-tools { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 8px; }
.t-task .gs-say { margin: 16px 0 18px; align-items: flex-start; }
.t-task .bubble .gs-q { margin: 0; font-size: clamp(1.125rem, 2.2vw, 1.375rem); line-height: 1.4; color: var(--ink); white-space: normal; }
.t-steps { margin: 0 0 22px; padding: 0 0 0 1.6rem; display: grid; gap: 8px; color: var(--ink); line-height: 1.55; }
.t-steps li { padding-left: 4px; }
.t-steps li::marker { font-weight: 900; color: var(--royal-ink); }
.t-sit { margin: 0 0 22px; padding: 16px 18px 20px; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: var(--r); background: var(--white); }
.t-task .t-sit-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.1875rem; line-height: 1.3; color: var(--ink); }
.t-sit-key { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--royal-btn); color: #FFFFFF; font-size: 1rem; font-weight: 900; }
.t-task .t-sit-text { margin: 0 0 10px; line-height: 1.55; color: var(--ink-2); }
.t-table-wrap { margin: 6px 0 18px; }
.t-table thead th { white-space: normal; }
.t-table caption.t-unit { caption-side: top; text-align: right; padding: 0 0 6px; font-size: .8125rem; font-weight: 800; color: var(--ink-3); }
.t-table tbody th { font-weight: 700; color: var(--ink); }
.t-table td.num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.t-table td.t-txt { line-height: 1.5; color: var(--ink); }
.t-fields { display: grid; gap: 20px; }
.t-options { min-width: 0; border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.t-options legend { padding: 0; margin-bottom: 10px; font-weight: 900; color: var(--ink); }
.t-options.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .t-options.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t-task .u-option { -webkit-user-select: none; user-select: none; caret-color: transparent; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 2px solid var(--line-2); border-bottom-width: 5px; border-radius: var(--r); background: var(--white); color: var(--ink); font-size: 1.0625rem; font-weight: 800; cursor: pointer; overflow-wrap: anywhere; }
.t-task .u-option input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--royal-btn); }
.t-task .u-option .choice-key { flex: none; }
.t-task .u-option:has(input:checked) { background: var(--sky-soft); border-color: var(--sky-btn); color: var(--sky-ink); }
.t-task .u-option:has(input:checked) .choice-key { border-color: var(--sky); color: var(--sky-ink); }
.t-task .u-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.t-task .u-option:has(input:disabled) { cursor: default; }
@media (hover: hover) {
  .t-task .u-option:hover { background: var(--wash); }
  .t-task .u-option:has(input:checked):hover { background: var(--sky-soft); }
}
.t-task .t-field label { font-size: 1rem; font-weight: 900; color: var(--ink); }
.t-task .t-field input, .t-task .t-field select { width: 100%; max-width: 26rem; min-height: 56px; padding: 10px 14px; border: 2px solid var(--edge); border-bottom-width: 5px; border-radius: var(--r-s); background: var(--sky-soft); color: var(--you-ink); font: inherit; font-size: 1.25rem; font-weight: 800; }
.t-task .t-field select { font-size: 1.0625rem; color: var(--ink); background: var(--white); }
.t-task .t-field input:focus-visible, .t-task .t-field select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.t-task .t-field input:disabled, .t-task .t-field select:disabled { opacity: 1; color: var(--ink); background: var(--wash); }
.t-form .l-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.t-feedback { margin: 20px 0 0; padding: 16px 18px; border: 2px solid var(--sun-edge); border-bottom-width: 5px; border-radius: var(--r); background: var(--sun-soft); }
.t-feedback.is-bad { border-color: var(--berry-line); background: var(--berry-soft); }
.t-feedback.is-info { border-color: var(--line-2); background: var(--wash); }
.t-task .t-feedback p { color: var(--ink); }
.t-task .t-feedback-h { margin: 0 0 4px; font-size: 1.125rem; font-weight: 900; color: var(--sun-ink); }
.t-task .is-bad .t-feedback-h { color: var(--berry-ink); }
.t-task .is-info .t-feedback-h { color: var(--ink); }
.t-task .t-diff { margin: 0 0 4px; }
/* Firma a obdobie zo skutočnej závierky: zvýraznený odkaz priamo na závierku v RÚZ. */
.t-task .t-firm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: -4px 0 16px; font-size: 1rem; font-weight: 800; color: var(--ink); }
.t-firm-n { padding: 4px 10px; border-radius: 999px; background: var(--wash); }
.t-firm-a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--sky-soft); color: var(--sky-ink); font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.t-firm-a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .t-firm-a:hover { background: var(--wash-2); } }
/* Úlohy po krokoch (stepThrough): vždy jedna úloha, pod ňou Ďalej / Predchádzajúca. */
.t-sit[hidden], .t-form .l-actions[hidden] { display: none !important; }
.is-stepping .t-sits { display: block; }
.t-step-nav { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.t-step-nav .btn.big:only-child { margin-left: auto; }
.t-task .t-sit-h:focus { outline: none; }
.t-task .t-sit-h:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.t-src a { color: var(--sky-ink); font-weight: 800; }
.u-result-src a { color: var(--sky-ink); font-weight: 800; }
/* Zdroj pri tabuľke bez kódov riadkov: šípka vyroluje poznámku (mení sa len výška a priehľadnosť). */
.src-box { margin: -6px 0 18px; }
.src-tog { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border: 0; border-radius: 10px; background: var(--sky-soft); color: var(--sky-ink); font: inherit; font-size: .9375rem; font-weight: 900; cursor: pointer; }
.src-tog .code-ar { transform: translateX(-1px) rotate(-45deg); }
.src-tog[aria-expanded="true"] .code-ar { transform: translateY(-2px) rotate(45deg); }
.src-tog:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .src-tog:hover { background: var(--wash-2); } }
.src-panel { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.src-panel > div { overflow: hidden; }
.src-tog[aria-expanded="true"] + .src-panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.t-task .src-panel p { margin: 10px 0 0; padding: 12px 14px; border-left: 4px solid var(--sky); border-radius: var(--r-xs); background: var(--sky-soft); font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .src-panel { transition: grid-template-rows .24s cubic-bezier(.4, 0, 1, 1), opacity .2s ease-in, visibility 0s linear .24s; }
  .src-tog[aria-expanded="true"] + .src-panel { transition: grid-template-rows .36s cubic-bezier(.22, 1, .36, 1), opacity .28s ease-out, visibility 0s; }
  .src-tog .code-ar { transition: transform .36s cubic-bezier(.22, 1, .36, 1); }
}
/* Rozloženie Učenia, Dennej výzvy a Prípadov: na počítači do 1100 px (ako ostatné časti), dlhý text ostane čitateľný.
   Situácie A/B, príklady a výsledky po položkách sú na širokej ploche vedľa seba (kontajnerové dotazy). */
:is(.page-ucenie, .page-denna, .page-pripady) .l-main { max-width: 1100px; }
.page-ucenie .l-crumb, .page-ucenie .l-lesson, .page-ucenie .l-detail, .page-ucenie .u-practice { max-width: none; }
:is(.page-ucenie, .page-denna, .page-pripady) .l-detail p { max-width: 52rem; }
.page-ucenie .u-reading, .page-ucenie .u-result, .t-calc-main { container-type: inline-size; }
.u-example-grid { margin: 20px 0 24px; }
.page-ucenie .u-example-grid > .u-example-section { margin: 0 0 20px; }
@container (min-width: 900px) {
  .u-example-grid, .t-sits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .page-ucenie .u-example-grid > .u-example-section, .t-sits > .t-sit { margin: 0; }
  .t-sits { margin: 0 0 22px; }
  .page-ucenie .u-feedback-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Kalkulačka z hry pri úlohe: na širokej obrazovke vedľa zadania (ostáva na mieste pri rolovaní), inak list dole. */
@media (min-width: 1100px) {
  .l-main:has(.t-calc-wrap.calc-on), .page-ucenie .l-main:has(.t-calc-wrap.calc-on), .page-ucenie .u-practice:has(.t-calc-wrap.calc-on) { max-width: 1180px; }
  .t-calc-wrap.calc-on { display: flex; align-items: flex-start; justify-content: center; gap: 24px; }
  .t-calc-wrap.calc-on > .t-calc-main { flex: 1 1 auto; min-width: 0; margin: 0; }
  .t-calc-wrap.calc-on > .calc-panel { position: sticky; top: 16px; flex: 0 0 21rem; margin: 0; max-height: calc(100dvh - 32px); overflow: auto; }
}
@media (max-width: 1099.98px) {
  .t-calc-wrap.calc-on > .t-calc-main { padding-bottom: calc(var(--calc-h, 0px) + 24px); }
}
@media (max-width: 640px) {
  .codes-wrap.t-table-wrap, .page-ucenie .u-example-codes, .page-ucenie .u-sheet-wrap { overflow-x: auto; }
  .codes-wrap.t-table-wrap:focus-visible, .page-ucenie .u-example-codes:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .t-head { flex-wrap: wrap; }
  .t-sit { padding: 14px 12px 16px; }
  .t-task .gs-say { display: block; }
  .t-task .gs-say .mentor { margin-bottom: 12px; }
  .t-task .u-option { min-height: 56px; padding: 10px 12px; gap: 10px; font-size: 1rem; }
  .t-options.is-pair .u-option .choice-key { display: none; }
  .t-table { font-size: .9375rem; }
  .t-form .l-actions .btn { width: 100%; }
}