/* MatMaster — styl dle mockupů (brief §12). Zdroj pravdy barev: mockupy. */
:root{
  --bg:#1e4fc9; --panel:#163a96; --panel-dark:#0f2a70; --outline:#0a1b47;
  --panel-light:#2a66f0; --text:#ffffff; --muted:#c7d6ff;
  --cta:#ffc928; --cta-edge:#c78a00; --cta-text:#3a2500;
  --ok:#3ec94a; --ok-edge:#1f8a2c; --ok-text:#07300d;
  --challenge:#7c3aed; --challenge-edge:#4c1d95;
  --l1:#d08a4e; --l2:#cfd8e6; --l3:#ffc928; --l4:#b78bff; --l5:#5ff0ff;
  --radius:20px;
}
/* Barevné palety (D16) — hráč přecvakává tlačítkem 🎨; výchozí: matika modrá, čeština červená */
body[data-theme="modra"]{
  --bg:#1e4fc9; --panel:#163a96; --panel-dark:#0f2a70; --outline:#0a1b47;
  --panel-light:#2a66f0; --muted:#c7d6ff;
}
body[data-theme="cervena"]{
  --bg:#c2362f; --panel:#9c2620; --panel-dark:#741b17; --outline:#3a0b08;
  --panel-light:#dc4a40; --muted:#ffd5d0;
}
body[data-theme="zelena"]{
  --bg:#1f8a4c; --panel:#176b3a; --panel-dark:#0f4d29; --outline:#062a15;
  --panel-light:#27a85c; --muted:#c9f2d8;
}
body[data-theme="ruzova"]{
  --bg:#c2307f; --panel:#9a2465; --panel-dark:#6f1849; --outline:#360a22;
  --panel-light:#de4a9a; --muted:#ffd3ea;
}
body[data-theme="nocni"]{
  --bg:#262b3d; --panel:#1b1f2e; --panel-dark:#121520; --outline:#05060b;
  --panel-light:#373e57; --muted:#c3c9dc;
}
.theme-btn{width:44px; height:44px; padding:0; flex:none;
  border:3px solid var(--outline); border-radius:50%; background:var(--panel-dark);
  font-size:22px; line-height:1; cursor:pointer}
.theme-btn.float{position:absolute; top:12px; right:12px; z-index:50}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Nunito',system-ui,sans-serif; font-weight:700;
  font-size:17px; line-height:1.5; min-height:100vh;
}
h1,h2,h3,.display{font-family:'Lilita One',sans-serif; font-weight:400; letter-spacing:.01em}
.wrap{max-width:1024px; margin:0 auto; padding:20px 24px 60px}
a{color:var(--text)}

.topbar{display:flex; align-items:center; gap:14px; padding:10px 0 18px}
.topbar .title{font-family:'Lilita One',sans-serif; font-size:22px}
.topbar .spacer{flex:1}
.chip{background:var(--panel-dark); border:3px solid var(--outline); border-radius:14px;
  padding:6px 14px; font-weight:900; font-size:15px; white-space:nowrap}
.xpbar{background:var(--panel-dark); border:3px solid var(--outline); border-radius:14px;
  height:22px; min-width:140px; overflow:hidden}
.xpbar>div{background:var(--cta); height:100%}

.panel{background:var(--panel); border:3px solid var(--outline); border-radius:var(--radius);
  padding:20px; margin:0 0 16px}
.panel.dark{background:var(--panel-dark)}
.panel.light{background:var(--panel-light)}

.btn{display:inline-block; border:3px solid var(--outline); border-radius:16px;
  font-family:'Nunito',sans-serif; font-weight:900; font-size:18px; cursor:pointer;
  padding:14px 26px; min-height:44px; min-width:44px; text-decoration:none; text-align:center;
  color:var(--text); background:var(--panel-light);
  box-shadow:0 6px 0 var(--panel-dark), 0 6px 0 3px var(--outline);
  transform:translateY(0); transition:transform .08s, box-shadow .08s;}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 var(--panel-dark), 0 2px 0 3px var(--outline)}
.btn.cta{background:var(--cta); color:var(--cta-text);
  box-shadow:0 6px 0 var(--cta-edge), 0 6px 0 3px var(--outline)}
.btn.cta:active{box-shadow:0 2px 0 var(--cta-edge), 0 2px 0 3px var(--outline)}
.btn.ok{background:var(--ok); color:var(--ok-text);
  box-shadow:0 6px 0 var(--ok-edge), 0 6px 0 3px var(--outline)}
.btn.ok:active{box-shadow:0 2px 0 var(--ok-edge), 0 2px 0 3px var(--outline)}
.btn.challenge{background:var(--challenge);
  box-shadow:0 6px 0 var(--challenge-edge), 0 6px 0 3px var(--outline)}
.btn.big{font-size:24px; padding:20px 40px; width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--muted); border-color:var(--panel-dark);
  box-shadow:none; font-size:15px; padding:10px 18px}
.btn.ghost:active{transform:none}
.btn.warn{background:#ff8a3d; color:#2a1200; font-size:15px; padding:10px 18px;
  box-shadow:0 6px 0 #b85a12, 0 6px 0 3px var(--outline)}
.btn.warn:active{box-shadow:0 2px 0 #b85a12, 0 2px 0 3px var(--outline)}
.btn.kat{width:100%; text-align:left; display:flex; flex-direction:column;
  gap:8px; align-items:flex-start; min-height:96px; padding:14px 16px}
.kat-nazev{font-family:'Lilita One',sans-serif; font-size:19px; line-height:1.2}
.kat-stav{display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  font-weight:700; font-size:14px}
.kat-stav .lvl-badge{font-size:14px; white-space:nowrap}
.hero{position:relative; margin-top:18px;
  background:linear-gradient(90deg, var(--cta) 0 6px, var(--panel) 6px)}
.hero .refresh{position:absolute; top:10px; right:12px; background:none; border:none;
  color:var(--muted); font-size:20px; cursor:pointer; min-width:44px; min-height:44px}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.btn:focus-visible, a:focus-visible, input:focus-visible{outline:4px solid var(--cta); outline-offset:2px}

.muted{color:var(--muted)}
.center{text-align:center}
.row{display:flex; gap:16px; flex-wrap:wrap}
.row>*{flex:1; min-width:220px}

/* karta zadání — vždy bílá, tmavý text */
.taskcard{background:#fff; color:#10214d; border:3px solid var(--outline);
  border-radius:var(--radius); padding:24px; font-size:19px; font-weight:700}
.taskcard p{margin:.4em 0}
.taskcard .figure{margin:14px 0; text-align:center}
.taskcard .figure svg{max-width:100%; height:auto}

.answer{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:16px}
.answer label{font-weight:900}
.answer input[type=text]{border:3px solid var(--outline); border-radius:14px;
  font:inherit; font-weight:900; font-size:20px; padding:12px 14px; width:170px;
  background:#fff; color:#10214d}
.unit{font-size:19px; font-weight:900; color:#10214d}
.choice-grid{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.choice-grid label{display:inline-block; background:#fff; color:#10214d;
  border:3px solid var(--outline); border-radius:14px; padding:12px 20px;
  font-weight:900; font-size:19px; cursor:pointer; min-width:44px; text-align:center}
.choice-grid input{position:absolute; opacity:0}
.choice-grid input:checked+span{background:var(--cta); display:block; margin:-12px -20px;
  padding:12px 20px; border-radius:11px; color:var(--cta-text)}
.choice-grid label:focus-within{outline:4px solid var(--cta); outline-offset:2px}

.serie{display:flex; align-items:center; gap:10px; font-weight:900}
.serie .dot{width:18px; height:18px; border-radius:50%; border:3px solid var(--outline);
  background:var(--panel-dark)}
.serie .dot.on{background:var(--ok)}

.lvl-badge{display:inline-block; border:3px solid var(--outline); border-radius:12px;
  padding:2px 10px; font-family:'Lilita One',sans-serif}
.lvl-1{background:var(--l1)} .lvl-2{background:var(--l2); color:#10214d}
.lvl-3{background:var(--l3); color:var(--cta-text)} .lvl-4{background:var(--l4); color:#241047}
.lvl-5{background:var(--l5); color:#053a42}

.startlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.startlist button{width:100%; text-align:left}

.err{background:#a33329; border:3px solid var(--outline); border-radius:14px;
  padding:10px 16px; font-weight:900; margin-bottom:14px}

.feedback-big{font-family:'Lilita One',sans-serif; font-size:42px; margin:.2em 0}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* --- mobil (brief cílil ≥1024 px; základní responsivita doplněna 21. 9.) --- */
@media (max-width: 700px){
  body{font-size:16px}
  .wrap{padding:10px 10px 40px}
  h1{font-size:26px}
  h2{font-size:21px}
  .topbar{flex-wrap:wrap; gap:6px 8px; padding-bottom:10px}
  .topbar .title{font-size:19px}
  .topbar .spacer{display:none}
  .xpbar{flex:1 1 100%; order:9; min-width:0}
  .chip{font-size:13px; padding:5px 10px}
  .btn{font-size:16px; padding:12px 18px}
  .btn.big{font-size:19px; padding:16px 20px}
  .row{gap:10px}
  .row>*{min-width:100%}
  .panel{padding:14px; margin-bottom:12px}
  .taskcard{padding:16px; font-size:17px}
  .answer input[type=text]{width:130px; font-size:18px}
  .choice-grid label{padding:12px 16px; font-size:17px}
  .feedback-big{font-size:30px}
  .serie{flex-wrap:wrap}
  .lvl-badge{font-size:14px; padding:2px 8px}
  .startlist button{font-size:19px}
  img{height:auto}
}

@media (max-width: 420px){
  .btn.big{font-size:17px}
  .answer{gap:8px}
  .taskcard{font-size:16px}
}

/* rodičovský přehled: statistiky po obdobích */
.stat-hlava{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px}
.stat-hlava h3{margin:0; font-size:22px}
.seg{display:inline-flex; background:var(--panel-dark); border:3px solid var(--outline); border-radius:16px; padding:3px; gap:3px}
.seg a{text-decoration:none; font-size:15px; padding:5px 14px; border-radius:11px; color:var(--muted)}
.seg a.on{background:var(--cta); color:var(--cta-text)}
.stat-karty{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; margin-top:12px}
.stat-karta{background:var(--panel-dark); border:3px solid var(--outline); border-radius:var(--radius); padding:12px 16px 14px}
.stat-karta.ted{background:var(--panel-light)}
.stat-karta.celkem{border-color:var(--cta); grid-column:1 / -1}
.stat-obdobi{display:flex; align-items:center; justify-content:space-between; gap:8px}
.stat-popis{font-family:'Lilita One',sans-serif; font-size:20px; letter-spacing:.01em}
.stat-obdobi .chip{font-size:13px; padding:2px 10px; white-space:nowrap}
.stat-cisla{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:8px; text-align:center}
.stat-cisla b{display:block; font-size:24px; line-height:1.1; font-family:'Lilita One',sans-serif; font-weight:400; white-space:nowrap}
.stat-cisla{grid-template-columns:repeat(4, minmax(0,1fr))}
.stat-cisla span{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.stat-bar{height:8px; background:var(--outline); border-radius:6px; margin:10px 0 8px; overflow:hidden}
.stat-bar>div{height:100%; background:var(--cta); border-radius:6px}
.stat-drobne{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--muted)}
.stat-drobne b{color:var(--text)}
.stat-pozn{font-size:13px; margin:8px 0 0}

/* rodičovský přehled: sbalené dítě + chyby v příkladech */
details.hrac > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
details.hrac > summary::-webkit-details-marker{display:none}
details.hrac > summary::before{content:'▸'; font-size:20px; width:16px}
details[open].hrac > summary::before{content:'▾'}
.hrac-jmeno{font-family:'Lilita One',sans-serif; font-size:26px}
.hrac-tyden{font-size:14px; margin-left:auto}
.hrac-tyden a{color:var(--cta)}
.hrac-odkazy{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 0 4px}
.chyba-hlava{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 10px}
.chip.spatne{background:#7a1d2e; border-color:#3f0b16}
.chip.ok{background:var(--ok); color:var(--ok-text); border-color:var(--ok-edge)}
.chyba-odpovedi{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.odp{border:3px solid var(--outline); border-radius:12px; padding:3px 10px; font-size:14px; background:var(--panel-dark)}
.odp.spatne{background:#7a1d2e}
.odp.ok, .odp.spravne{background:var(--ok); color:var(--ok-text)}
details.reseni{margin-top:10px} details.reseni > summary{cursor:pointer; color:var(--muted)}


/* rodič: infografika levelů po tématech */
.lvl-hlava{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px}
.lvl-hlava h3{margin:0; font-size:22px}
.lvl-souhrn{display:flex; gap:6px; flex-wrap:wrap}
.lvl-souhrn .lvl-badge{font-size:14px; padding:2px 10px}
.lvl-karty{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; margin-top:12px}
.lvl-karta{background:var(--panel-dark); border:3px solid var(--outline); border-radius:16px; padding:10px 12px 12px}
.lvl-karta.due{border-color:var(--cta)}
.lvl-radek{display:flex; align-items:center; justify-content:space-between; gap:8px}
.lvl-tema{font-size:16px; line-height:1.2}
.lvl-radek .lvl-badge{font-size:14px; padding:2px 9px; white-space:nowrap}
.lvl-stupnice{display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; margin:10px 0 8px}
.lvl-stupnice .seg{height:14px; border-radius:6px; border:2px solid var(--outline); background:rgba(255,255,255,.08)}
.lvl-stupnice .seg.prov{background:repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); opacity:.9}
.lvl-info{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; min-height:20px}
.lvl-tag{padding:1px 8px; border-radius:999px; background:var(--panel); border:2px solid var(--outline)}
.lvl-tag.prov{border-color:var(--l2)}
.lvl-tag.shaky{background:#7a3410; border-color:#ff8a3d}
.lvl-serie{display:inline-flex; align-items:center; gap:4px}
.lvl-serie .dot{width:12px; height:12px; border-radius:50%; border:2px solid var(--outline); background:var(--panel)}
.lvl-serie .dot.on{background:var(--ok)}
.lvl-obh{color:var(--muted); margin-left:auto; white-space:nowrap}
.lvl-obh.due{color:var(--cta); font-weight:900}
.lvl-stupnice .seg.on.lvl-1{background:var(--l1)} .lvl-stupnice .seg.on.lvl-2{background:var(--l2)}
.lvl-stupnice .seg.on.lvl-3{background:var(--l3)} .lvl-stupnice .seg.on.lvl-4{background:var(--l4)}
.lvl-stupnice .seg.on.lvl-5{background:var(--l5)}

/* slovní odpověď (čeština): široké pole */
.answer input.wide{width:100%; max-width:560px}

/* hlasove zadani odpovedi (D14) */
.btn.mic{min-width:52px; padding:8px 12px; font-size:22px; background:var(--panel-light); margin-left:8px}
.btn.mic.on{background:var(--warn); color:#2a1200; animation:mic-pulz 1s infinite}
@keyframes mic-pulz{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){.btn.mic.on{animation:none}}
@media print{ .theme-btn{display:none} }