:root{
  --blue:#1763b6; --blue-dark:#114a8a; --teal:#16a394;
  --bg:#eef3f9; --card:#ffffff; --ok:#1c8c4a; --err:#d23b30; --warn:#b7791f;
  --line:#d8e2ee; --text:#1f2c3a; --muted:#637689;
  --fig-fill:#eaf2fc; --fig-fill2:#dbe9fb; --fig-fill3:#cadcf3;
  --radius:14px; --tap:48px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI",Roboto,Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);
  overscroll-behavior-y:none}

/* ---------- horní lišta ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(180deg,var(--blue),var(--blue-dark));color:#fff;
  padding:10px clamp(12px,3vw,22px);padding-top:max(10px,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo{width:42px;height:42px;flex:0 0 auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.brand-txt{display:flex;flex-direction:column;line-height:1.05;font-size:24px;font-weight:800;letter-spacing:.3px}
.brand-txt b{font-weight:800;color:#bfe6ff}
.brand-txt .bn{font-size:24px;font-weight:800}
.brand-txt em{font-style:normal;color:#bfe6ff}
.brand-txt i{font-style:normal;font-size:12px;font-weight:400;opacity:.85;margin-top:3px}
.navbtns{display:flex;gap:8px;flex:0 0 auto;align-items:center}
.userbadge{display:inline-flex;align-items:center;gap:8px;margin-right:6px;padding:4px 6px 4px 10px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:999px;
  color:#fff;font-size:13px;line-height:1.2;max-width:46vw}
.userbadge .ub-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userbadge .ub-label b{font-weight:800}
.userbadge.role-demo{background:rgba(183,121,31,.85);border-color:#e6b566}
.userbadge .ub-out{padding:4px 9px;min-height:0;font-size:12px;background:rgba(255,255,255,.9);color:var(--blue-dark);border:none;border-radius:999px}
.userbadge .ub-out:hover{background:#fff}
@media(max-width:560px){.userbadge{max-width:40vw}.userbadge .ub-label{font-size:12px}}
.ghost.fs{padding:10px 12px;font-size:18px;line-height:1}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:18px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.foot a{color:var(--blue);text-decoration:none;font-weight:600}
.foot a:hover{text-decoration:underline}
main{max-width:920px;margin:0 auto;padding:clamp(14px,3vw,24px) clamp(12px,3vw,18px)}

h1,h2{color:var(--blue-dark);margin:.2em 0 .5em}
h2{font-size:clamp(20px,4vw,26px)}
.crumbs{color:var(--muted);font-size:14px;margin-bottom:14px;line-height:1.5}
.crumbs b{color:var(--text)}

/* ---------- úvodní obrazovka ---------- */
.intro{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,4vw,30px);box-shadow:0 2px 10px rgba(20,60,120,.06)}
.intro h1{font-size:clamp(24px,5vw,34px);margin-top:0}
.intro p{font-size:clamp(15px,2.4vw,17px);line-height:1.6;color:#33424f;max-width:60ch}
.intro .lead{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.intro .biglogo{width:84px;height:84px;flex:0 0 auto}
.year-title{margin:24px 0 12px;font-weight:700;color:var(--blue-dark);font-size:18px}
.years{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.year-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:120px;border-radius:var(--radius);cursor:pointer;color:#fff;font-weight:700;
  background:linear-gradient(150deg,var(--blue),var(--teal));border:none;transition:.12s;
  box-shadow:0 3px 8px rgba(20,60,120,.18)}
.year-card .yn{font-size:42px;line-height:1}
.year-card .yl{font-size:14px;font-weight:600;opacity:.95}
.year-card:hover,.year-card:active{transform:translateY(-3px);box-shadow:0 8px 18px rgba(20,60,120,.28)}

/* ---------- oživená úvodní obrazovka ---------- */
.intro .hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.intro .mascot{width:104px;height:104px;flex:0 0 auto;filter:drop-shadow(0 6px 12px rgba(20,60,120,.18));animation:mascotFloat 3.6s ease-in-out infinite}
.intro .hero-txt h1{margin:0 0 4px}
.intro .tagline{margin:0;font-size:clamp(15px,2.4vw,18px);font-weight:600;color:var(--blue-dark);
  background:linear-gradient(180deg,#eef6ff,#e7f6f1);display:inline-block;padding:6px 12px;border-radius:12px;
  border:1px solid #d9ecf7}
.intro .hero-txt h1 .h1-acc{color:#1d74c9}
.tagline .tg-lab{color:#1d74c9}
.intro .intro-tip{margin:-4px 0 12px;font-size:14px;color:var(--muted);max-width:none}
.intro .intro-desc{font-size:clamp(15px,2.4vw,17px);line-height:1.6;color:#33424f;max-width:none}
.stupen-label{display:flex;align-items:center;gap:12px;margin:20px 0 10px;font-weight:800;
  color:var(--blue-dark);font-size:15px;text-transform:uppercase;letter-spacing:.03em}
.stupen-label::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,#cfe0f0,transparent)}
.year-card{position:relative;overflow:hidden}
.year-card .glyph{position:absolute;right:6px;bottom:-10px;font-size:58px;font-weight:800;line-height:1;
  opacity:.18;pointer-events:none;font-style:italic}
.year-card .yn{position:relative;z-index:1}
.year-card .yl{position:relative;z-index:1}
/* barvy ročníků – 1. stupeň teple, 2. stupeň chladněji */
.year-card.yc-1{background:linear-gradient(150deg,#ff9e66,#f0704f)}
.year-card.yc-2{background:linear-gradient(150deg,#ffb457,#f2913a)}
.year-card.yc-3{background:linear-gradient(150deg,#f7c948,#e79a24)}
.year-card.yc-4{background:linear-gradient(150deg,#8ed081,#4faf57)}
.year-card.yc-5{background:linear-gradient(150deg,#3fc0a3,#199e86)}
.year-card.yc-6{background:linear-gradient(150deg,#2fb3d6,#1685b0)}
.year-card.yc-7{background:linear-gradient(150deg,#4d8bf0,#2f66df)}
.year-card.yc-8{background:linear-gradient(150deg,#7d74f0,#5a45d6)}
.year-card.yc-9{background:linear-gradient(150deg,#a86ae8,#8a3fd1)}
/* jemný nástup dlaždic */
.years .year-card{animation:cardIn .35s ease both}
.years .year-card:nth-child(2){animation-delay:.04s}
.years .year-card:nth-child(3){animation-delay:.08s}
.years .year-card:nth-child(4){animation-delay:.12s}
.years .year-card:nth-child(5){animation-delay:.16s}
.years .year-card:nth-child(6){animation-delay:.2s}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.intro .mascot,.years .year-card{animation:none}}

/* ---------- dětský režim výběru (1.–3. ročník) ---------- */
.grid.kids{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.card.kid{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;min-height:152px;padding:20px 12px 16px;border-radius:18px;
  background:var(--card);border:1px solid var(--line);cursor:pointer;transition:.12s}
.card.kid:hover,.card.kid:active{transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,60,120,.16)}
.card.kid .kic{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 5px 12px rgba(20,60,120,.20)}
.card.kid .kic svg{width:38px;height:38px}
.card.kid .kt{font-size:16px;font-weight:800;color:var(--blue-dark);line-height:1.2}
.say{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:none;
  background:#eef4fb;color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.say svg{width:20px;height:20px}
.say:hover{background:#dbeafb}
.count-kids{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.ck-opt{position:relative;min-width:150px;min-height:130px;border-radius:18px;border:3px solid var(--line);
  background:var(--card);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:16px 14px;transition:.12s}
.ck-opt:hover,.ck-opt:active{transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,60,120,.14)}
.ck-opt.rec{border-color:var(--blue);box-shadow:0 6px 16px rgba(23,99,182,.18)}
.ck-opt .stars{font-size:24px;letter-spacing:3px;color:#f6b93b;line-height:1}
.ck-opt .stars .dim{color:#e3e7ec}
.ck-opt .ckl{font-size:19px;font-weight:800;color:var(--blue-dark)}
.ck-opt .ckn{font-size:13px;color:var(--muted)}
@media(max-width:560px){.grid.kids{grid-template-columns:1fr 1fr}.count-kids{gap:10px}.ck-opt{min-width:110px}}

/* ---------- dlaždice Trénuj na přijímačky (stejná velikost jako ročníky) ---------- */
.exam-card{text-decoration:none;background:linear-gradient(150deg,#16a394,#1763b6)}
.exam-card .yn{font-size:34px}
.exam-card .yl{font-weight:700;text-align:center;padding:0 6px}
.karel-card{text-decoration:none;background:linear-gradient(150deg,#6a4fd0,#2a8fe0)}
.karel-card .yn{font-size:34px}
.karel-card .yl{font-weight:700;text-align:center;padding:0 6px}
.geo-card{text-decoration:none;background:linear-gradient(150deg,#ef8f3c,#e0668a)}
.geo-card .yn{font-size:34px}
.geo-card .yl{font-weight:700;text-align:center;padding:0 6px}
.data-card{text-decoration:none;background:linear-gradient(150deg,#16a394,#114a8a)}
.data-card .yn{font-size:34px}
.data-card .yl{font-weight:700;text-align:center;padding:0 6px}
.fin-card{text-decoration:none;background:linear-gradient(150deg,#1c8c4a,#199e86)}
.fin-card .yn{font-size:34px}
.fin-card .yl{font-weight:700;text-align:center;padding:0 6px}
/* Modul Čeština – velký pruh přes celou šířku v její vlastní grafice */
.cj-banner{display:flex;align-items:center;gap:16px;width:100%;margin-top:12px;padding:16px 20px;
  text-decoration:none;color:#fff;border-radius:18px;
  background:linear-gradient(120deg,#9a63ff,#b95be0 55%,#ff5e93);
  box-shadow:0 8px 22px rgba(122,63,228,.28);transition:transform .12s ease,box-shadow .12s ease}
.cj-banner:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(122,63,228,.36)}
.cj-banner .cjb-logo{flex:0 0 auto;display:flex;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.cj-banner .cjb-txt{display:flex;flex-direction:column;line-height:1.15}
.cj-banner .cjb-txt b{font-size:26px;font-weight:800;letter-spacing:.2px}
.cj-banner .cjb-sub{font-size:14px;opacity:.95;font-weight:600}
.cj-banner .cjb-go{margin-left:auto;flex:0 0 auto;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:9px 18px;font-weight:800;font-size:15px;white-space:nowrap}
@media(max-width:520px){.cj-banner .cjb-go{display:none}.cj-banner .cjb-txt b{font-size:22px}}
/* Modul 3D laboratoř – pruh přes celou šířku v barvách MatikZŠ (součást všech licencí) */
.lab-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;width:100%;margin-top:12px;padding:16px 20px;
  text-decoration:none;color:#fff;border-radius:18px;
  background:repeating-linear-gradient(30deg,rgba(255,255,255,.07) 0 1px,transparent 1px 26px),repeating-linear-gradient(150deg,rgba(255,255,255,.07) 0 1px,transparent 1px 26px),linear-gradient(120deg,#2a8fe0,#1d74c9 45%,#16a394);
  box-shadow:0 8px 22px rgba(23,99,182,.28);transition:transform .12s ease,box-shadow .12s ease}
.lab-banner:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(23,99,182,.38)}
.lab-banner .lbb-logo{flex:0 0 auto;display:flex;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.lab-banner .lbb-txt{display:flex;flex-direction:column;line-height:1.15}
.lab-banner .lbb-txt b{font-size:26px;font-weight:800;letter-spacing:.2px}
.lab-banner .lbb-sub{font-size:14px;opacity:.95;font-weight:600}
.lab-banner .lbb-go{margin-left:auto;flex:0 0 auto;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:9px 18px;font-weight:800;font-size:15px;white-space:nowrap}
@media(max-width:520px){.lab-banner .lbb-go{display:none}.lab-banner .lbb-txt b{font-size:22px}}
.exam-tile{display:flex;align-items:center;gap:14px;margin-top:16px;text-decoration:none;color:#fff;
  background:linear-gradient(150deg,#16427c,#1763b6 60%,#16a394);border-radius:var(--radius);
  padding:15px 18px;box-shadow:0 3px 10px rgba(20,60,120,.22);transition:.12s}
.exam-tile:hover,.exam-tile:active{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,60,120,.32)}
.exam-tile .et-ic{font-size:28px;flex:0 0 auto;line-height:1}
.exam-tile .et-tx{display:flex;flex-direction:column;flex:1}
.exam-tile .t1{font-weight:800;font-size:18px}
.exam-tile .t2{font-size:13px;opacity:.92;margin-top:2px}
.exam-tile .et-arr{font-size:20px;opacity:.9;flex:0 0 auto}

/* ---------- mřížka karet ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  cursor:pointer;transition:.12s;box-shadow:0 1px 3px rgba(0,0,0,.05);min-height:var(--tap)}
.card:hover,.card:active{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 6px 14px rgba(23,99,182,.14)}
.card .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  background:var(--blue);color:#fff;border-radius:50%;font-size:14px;font-weight:700;margin-right:9px;flex:0 0 auto}
.card .t{font-weight:600;display:flex;align-items:center}
.card .sub{color:var(--muted);font-size:13px;margin-top:6px}

/* ---------- tlačítka ---------- */
button{font-family:inherit;font-size:16px;border:none;border-radius:10px;padding:12px 20px;cursor:pointer;
  min-height:var(--tap);touch-action:manipulation}
.primary{background:var(--blue);color:#fff;font-weight:700}
.primary:hover,.primary:active{background:var(--blue-dark)}
.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.ghost.dark{color:var(--blue);border-color:var(--line)}
.ghost:hover,.ghost:active{background:rgba(255,255,255,.14)}
.ghost.dark:hover{background:#f1f5fb}

/* ---------- počet příkladů ---------- */
.count-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,4vw,26px);max-width:480px}
.count-row{display:flex;align-items:center;gap:14px;margin:16px 0;justify-content:center}
.count-row input{width:110px;font-size:24px;padding:10px;border:2px solid var(--line);border-radius:10px;text-align:center}
.step{width:54px;height:54px;font-size:26px;font-weight:700;border:2px solid var(--line);background:#fff;color:var(--blue);border-radius:12px}
.rec{color:var(--muted);font-size:14px;text-align:center}

/* ---------- procvičování ---------- */
.practice{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,4vw,28px)}
.progress{height:9px;background:#e4edf8;border-radius:5px;overflow:hidden;margin-bottom:7px}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--teal));transition:.3s}
.pinfo{display:flex;justify-content:space-between;color:var(--muted);font-size:13.5px;margin-bottom:18px}
.question{font-size:clamp(20px,4.5vw,26px);line-height:1.55;margin:8px 0 14px}
.fig{display:block;margin:8px 0 16px;width:min(260px,70vw);height:auto;color:var(--text)}
.answer-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.answer-row input{font-size:22px;padding:12px 14px;border:2px solid var(--line);border-radius:10px;
  width:min(240px,70vw);min-height:var(--tap)}
.answer-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,99,182,.15)}
.choices{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.choices button{background:#fff;border:2px solid var(--line);color:var(--text);min-width:74px;font-weight:600}
.choices button:hover,.choices button:active{border-color:var(--blue);background:#f3f8ff}
.choices button:disabled{opacity:.55}
.feedback{margin-top:16px;font-size:17px;min-height:24px}
.feedback.ok{color:var(--ok);font-weight:700}
.feedback.err{color:var(--err);font-weight:700}
.feedback.retry{color:var(--warn);font-weight:700}
.solution{margin-top:12px;background:#fbf7ec;border:1px solid #efe3bf;border-radius:10px;padding:13px 15px;font-size:15.5px;line-height:1.55}

/* ---------- zlomky ---------- */
.frac{display:inline-flex;flex-direction:column;text-align:center;vertical-align:middle;margin:0 4px;font-size:.95em}
.frac .n{border-bottom:2px solid currentColor;padding:0 6px}
.frac .d{padding:0 6px}
sup{font-size:.7em}

/* ---------- výsledek ---------- */
.result{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,5vw,32px);text-align:center;max-width:540px;margin:0 auto}
.grade{font-size:72px;font-weight:800;line-height:1;margin:6px 0}
.g1{color:#1c8c4a}.g2{color:#3a9d35}.g3{color:#d4a017}.g4{color:#e07b1a}.g5{color:#d23b30}
.stats{display:flex;justify-content:center;gap:22px;margin:20px 0;flex-wrap:wrap}
.stat b{display:block;font-size:28px}
.stat span{color:var(--muted);font-size:13px}
.actions{display:flex;gap:12px;justify-content:center;margin-top:12px;flex-wrap:wrap}

/* ---------- menší obrazovky ---------- */
@media (max-width:560px){
  .brand-txt i{display:none}
  .brand-txt{font-size:21px}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:13px}
  .card .sub{font-size:12px}
  .years{grid-template-columns:1fr 1fr}
  .answer-row{flex-direction:column;align-items:stretch}
  .answer-row input{width:100%}
  .answer-row button{width:100%}
}
@media (max-width:360px){
  .grid{grid-template-columns:1fr}
}

/* ---------- časovač (na rychlost) ---------- */
.timer{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.tbar-wrap{flex:1;height:11px;background:#e4edf8;border-radius:6px;overflow:hidden}
.tbar-wrap > i{display:block;height:100%;width:100%;
  background:linear-gradient(90deg,#d23b30,#f5b400 40%,#28a745);transition:width .1s linear}
#ttxt{font-weight:700;color:var(--muted);min-width:40px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- pexeso ---------- */
.pexeso{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px;margin-top:6px}
.pcard{aspect-ratio:1/1;min-height:60px;font-size:clamp(15px,4vw,19px);font-weight:700;border:2px solid transparent;
  background:linear-gradient(150deg,var(--blue),var(--teal));color:#fff;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:4px;line-height:1.1;transition:.12s}
.pcard.flipped{background:#fff;color:var(--text);border-color:var(--blue)}
.pcard.matched{background:#e7f6ec;color:var(--ok);border-color:#bfe3cb;cursor:default}
.pcard:not(.matched):active{transform:scale(.96)}
@media (max-width:440px){ .pexeso{grid-template-columns:repeat(3,1fr);gap:8px} }

/* ---------- navigační tlačítka na malých displejích ---------- */
@media (max-width:560px){
  .navbtns button{padding:10px 12px;font-size:14px}
}

/* ---------- kompaktní režim 1.–4. ročníku (vše na obrazovku, bez scrollu) ---------- */
main:has(.practice.young){padding-top:8px;padding-bottom:8px}
main:has(.practice.young) .crumbs{margin-bottom:6px;font-size:12px}
.practice.young{padding:12px 14px}
.practice.young .progress{margin-bottom:5px}
.practice.young .pinfo{margin-bottom:6px;font-size:12px}
.practice.young .timer{margin-bottom:8px}
.practice.young .question{font-size:clamp(17px,4.6vw,22px);line-height:1.4;margin:4px 0 8px}
.practice.young .fig{max-height:20vh !important;width:auto !important;margin:2px auto 8px}
.practice.young .kp{max-width:300px;margin:0 auto}
.practice.young .kp-disp{min-height:44px;font-size:24px;margin-bottom:8px;padding:8px}
.practice.young .kp-keys{gap:6px}
.practice.young .kp-key{min-height:clamp(36px,7.6vh,54px);font-size:clamp(17px,4.8vw,22px)}
.practice.young .kp-ok{min-height:44px;margin-top:8px}
.practice.young .choices{gap:8px}
.practice.young .choices button{min-height:46px}
.practice.young .feedback{margin-top:8px;font-size:15px}
.practice.young .solution{font-size:14px;padding:10px 12px}

/* ---------- virtuální numerická klávesnice (1.–4. ročník) ---------- */
.kp{max-width:300px}
.kp-disp{display:block;width:100%;font-size:28px;text-align:center;padding:12px;border:2px solid var(--line);
  border-radius:10px;background:#fff;min-height:54px;margin-bottom:12px;font-variant-numeric:tabular-nums;color:var(--text)}
.kp-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kp-key{font-size:24px;font-weight:700;min-height:56px;border:2px solid var(--line);background:#fff;border-radius:12px;color:var(--text);padding:0}
.kp-key:hover,.kp-key:active{background:#eef3fb;border-color:var(--blue)}
.kp-key.fn{background:#f7f2e9;color:#8a6d1f}
.kp-key:disabled{opacity:.5}
.kp-ok{width:100%;margin-top:12px}

/* ---------- kalkulačka ---------- */
.calc-toggle{margin-top:14px;background:#fff;border:2px solid var(--blue);color:var(--blue);font-weight:700}
.calc-toggle:hover,.calc-toggle:active{background:#f1f7ff}
.hint-btn{margin-top:12px;margin-left:8px;background:#fff;border:2px solid var(--warn,#e0a423);color:#a5720f;font-weight:700}
.hint-btn:hover,.hint-btn:active{background:#fff8ec}
.hint-btn[disabled]{opacity:.55;cursor:default}
.hintbox{margin-top:12px;background:#fff8ec;border:1px solid #f0dca6;border-radius:10px;padding:12px 14px;font-size:15px;line-height:1.55}
.hintbox b{color:#a5720f}
.practice.young .hintbox{font-size:14px;padding:10px 12px}
.calc{position:fixed;right:18px;bottom:18px;z-index:60;width:250px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 12px 34px rgba(20,40,80,.28);overflow:hidden;user-select:none}
.calc-head{display:flex;justify-content:space-between;align-items:center;cursor:move;touch-action:none;
  background:linear-gradient(180deg,var(--blue),var(--blue-dark));color:#fff;padding:8px 12px;font-weight:700;font-size:14px}
.calc-head button{background:transparent;border:none;color:#fff;font-size:16px;min-height:auto;padding:2px 8px;cursor:pointer}
.calc-disp{font-size:26px;text-align:right;padding:12px 14px;min-height:30px;overflow:hidden;
  background:#f6f9fd;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px}
.ck{min-height:46px;font-size:18px;border:1px solid var(--line);background:#fff;border-radius:9px;
  color:var(--text);font-weight:600;padding:0}
.ck:hover,.ck:active{background:#f1f5fb}
.ck.op{background:#eef3fb;color:var(--blue-dark)}
.ck.fn{background:#f7f2e9;color:#8a6d1f}
.ck.zero{grid-column:span 2}
.ck.eq{grid-column:span 4;background:var(--blue);color:#fff}
.ck.eq:hover,.ck.eq:active{background:var(--blue-dark)}
.calc-transfer{display:block;width:calc(100% - 20px);margin:0 10px 12px;background:var(--blue);color:#fff;
  font-weight:700;border:none;border-radius:9px;min-height:46px;cursor:pointer}
.calc-transfer:hover,.calc-transfer:active{background:var(--blue-dark)}
@media (max-width:560px){ .calc{right:8px;left:8px;width:auto;bottom:8px} }

/* ---- úvodní obrazovka: pevný počet sloupců (bez osamocených dlaždic) a zamčené moduly ---- */
.years.cols{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
@media (max-width:600px){.years.cols{grid-template-columns:repeat(var(--nm),minmax(0,1fr));gap:10px}}
.year-card.is-locked{filter:grayscale(.9);opacity:.5;cursor:pointer}
.year-card.is-locked:hover{opacity:.7}
.year-card .lk{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11px;font-weight:700;color:#fff;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cj-banner.is-locked{filter:grayscale(.9);opacity:.55}
.cj-banner.is-locked:hover{opacity:.75}

/* ================= efektní dlaždice: lesk, světlo za myší, náklon, stisk, vlnka, postupné objevení ================= */
.year-card,.cj-banner,.lab-banner{position:relative;overflow:hidden;isolation:isolate;
  --ty:0px;--sc:1;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty)) scale(var(--sc));
  transition:transform .35s cubic-bezier(.2,.9,.25,1.15),box-shadow .3s ease,filter .3s ease,opacity .3s ease;will-change:transform}
.year-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,0,0,.10),0 4px 10px rgba(20,60,120,.16),0 14px 26px -14px rgba(20,60,120,.45)}
/* lesk shora + jemná textura */
.year-card::before,.cj-banner::before,.lab-banner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.06) 38%,rgba(255,255,255,0) 55%),
             radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.14),transparent 60%)}
/* světlo za myší + přejezd odlesku */
.year-card::after,.cj-banner::after,.lab-banner::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(circle 140px at var(--mx,50%) var(--my,30%),rgba(255,255,255,.38),rgba(255,255,255,0) 70%),
             linear-gradient(115deg,transparent 35%,rgba(255,255,255,.42) 48%,rgba(255,255,255,.08) 54%,transparent 62%);
  background-size:100% 100%,260% 100%;background-repeat:no-repeat;background-position:0 0,140% 0;
  transition:opacity .3s ease,background-position .8s cubic-bezier(.2,.8,.2,1)}
.year-card>*,.cj-banner>*,.lab-banner>*{position:relative;z-index:1}
.year-card .glyph{z-index:0;transition:transform .5s cubic-bezier(.2,.9,.25,1.2),opacity .4s}
.year-card .yn{transition:transform .45s cubic-bezier(.2,.9,.25,1.4);text-shadow:0 2px 6px rgba(0,0,0,.18)}
.year-card .yl{text-shadow:0 1px 3px rgba(0,0,0,.18)}
.cj-banner .cjb-go,.lab-banner .lbb-go{transition:transform .3s cubic-bezier(.2,.9,.25,1.3),background .3s}
.cj-banner .cjb-logo,.lab-banner .lbb-logo{transition:transform .45s cubic-bezier(.2,.9,.25,1.4)}
@media (hover:hover){
  .year-card:hover{--ty:-6px;--sc:1.035;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.08),0 10px 18px rgba(20,60,120,.20),0 24px 40px -16px rgba(20,60,120,.55)}
  .year-card:hover::after,.cj-banner:hover::after,.lab-banner:hover::after{opacity:1;background-position:0 0,-60% 0}
  .year-card:hover .yn{transform:scale(1.14) rotate(-4deg)}
  .year-card:hover .glyph{transform:rotate(-12deg) scale(1.25) translate(-4px,-6px);opacity:.3}
  .cj-banner:hover,.lab-banner:hover{--ty:-4px;--sc:1.008}
  .cj-banner:hover .cjb-go,.lab-banner:hover .lbb-go{transform:translateX(5px);background:rgba(255,255,255,.32)}
  .cj-banner:hover .cjb-logo,.lab-banner:hover .lbb-logo{transform:rotate(-8deg) scale(1.08)}
  .year-card.is-locked:hover{--ty:-2px;--sc:1;opacity:.72}
  .year-card.is-locked:hover .yn{transform:none}
  .year-card.is-locked:hover .lk{animation:fxWiggle .5s ease}
  .cj-banner.is-locked:hover{--ty:-1px}
}
/* stisk */
.year-card:active,.cj-banner:active,.lab-banner:active{--ty:0px;--sc:.95;transition-duration:.08s;filter:brightness(.96)}
.cj-banner:active,.lab-banner:active{--sc:.985}
.year-card:focus-visible,.cj-banner:focus-visible,.lab-banner:focus-visible{outline:3px solid #fff;outline-offset:-5px;box-shadow:0 0 0 4px rgba(23,99,182,.55),0 10px 24px -10px rgba(20,60,120,.5)}
/* vlnka při stisku */
.fx-rip{position:absolute;z-index:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55) 0,rgba(255,255,255,.25) 40%,rgba(255,255,255,0) 70%);
  transform:scale(0);animation:fxRip .65s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fxRip{to{transform:scale(1);opacity:0}}
@keyframes fxWiggle{0%,100%{transform:none}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
/* postupné objevení (jen „před" startem, aby nepřebíjelo hover) */
.years.cols .year-card{animation:fxIn .55s cubic-bezier(.2,.9,.25,1.15) backwards;animation-delay:calc(var(--i,0) * 55ms)}
.cj-banner,.lab-banner{animation:fxIn .55s cubic-bezier(.2,.9,.25,1.1) .3s backwards}
@keyframes fxIn{from{opacity:0;transform:perspective(800px) translateY(18px) scale(.9) rotateX(12deg)}}
@media (prefers-reduced-motion:reduce){
  .year-card,.cj-banner,.lab-banner{transition:box-shadow .2s,filter .2s,opacity .2s;transform:none!important;animation:none!important}
  .year-card::after,.cj-banner::after,.lab-banner::after{transition:opacity .2s}.fx-rip{display:none}
}
.year-card:hover,.year-card:active,.cj-banner:hover,.cj-banner:active,.lab-banner:hover,.lab-banner:active{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty)) scale(var(--sc))}

/* ===== Přijímačky – úvodní obrazovky s maskotem (matematika i čeština) ===== */
.pm-mascot{flex:0 0 auto;width:112px;height:112px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.18);animation:pmFloat 3.6s ease-in-out infinite}
.pm-mascot svg{width:88px;height:88px}
@keyframes pmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pm-bub{display:inline-block;background:rgba(255,255,255,.2);border-radius:12px;padding:6px 12px;font-size:14px;line-height:1.4;margin-bottom:10px}
.pm-hero{position:relative;overflow:hidden;color:#fff;border-radius:16px;padding:clamp(18px,3vw,28px);margin-bottom:14px;display:flex;gap:20px;align-items:center;
  background:linear-gradient(135deg,#1763b6 0%,#1d84c9 55%,#16a394 100%)}
.pm-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.pm-hero>div{position:relative;z-index:1;min-width:0}
.pm-hero h1{color:#fff;margin:0 0 6px}.pm-hero p{margin:0 0 12px;line-height:1.5;max-width:720px;opacity:.96;color:#fff}
.pm-levs{display:flex;flex-wrap:wrap;gap:8px}
.pm-lev{font-size:13px;font-weight:700;border-radius:999px;padding:5px 12px;border:1.5px solid rgba(255,255,255,.6);color:#fff;text-decoration:none}
a.pm-lev:hover{background:rgba(255,255,255,.25)}.pm-lev.on{background:#fff;border-color:#fff;color:#1763b6}
.pm-modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pm-mode{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.pm-mode.main{grid-column:1/-1;border:2px solid var(--blue)}
.pm-mode h2{margin:0 0 6px;font-size:20px}.pm-mode p{margin:0 0 12px;line-height:1.5;color:#33475b}
.pm-list{margin:0;padding-left:20px;line-height:1.6;color:#33475b}
.pm-facts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.pm-fact{display:flex;flex-direction:column;align-items:center;min-width:92px;border-radius:12px;padding:8px 12px;font-size:12px;color:#5b6b7d;background:#eef6ff;border:1px solid #cfe0f4}
.pm-fact b{font-size:22px;line-height:1.1;color:var(--blue-dark)}
.pm-btns{display:flex;gap:10px;flex-wrap:wrap}
.pm-btns .primary{font-size:18px;padding:12px 22px}
.pm-rules{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-top:14px}
.pm-rules summary{font-weight:700;cursor:pointer;color:var(--blue-dark)}.pm-rules li{margin:5px 0;line-height:1.45}
@media(max-width:700px){.pm-modes{grid-template-columns:1fr}}
@media(max-width:600px){.pm-hero{flex-direction:column;align-items:flex-start;gap:12px}.pm-mascot{width:84px;height:84px}.pm-mascot svg{width:66px;height:66px}
  .pm-fact{min-width:70px;padding:6px 8px}.pm-fact b{font-size:18px}}
@media(prefers-reduced-motion:reduce){.pm-mascot{animation:none}}