:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font:14px/1.4 system-ui,sans-serif}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout podľa návrhu „Rok hore dole.dc.html“: stránka sa posúva celá, aktuálna karta je prilepená hore,
   dva stĺpce (os + panel „Viac o tom“) sa pod ~720 px zložia pod seba. */
:root{
  --bg:#f2f3f0; --surface:#ffffff; --surface-2:#f7f8f6; --fg:#1d1f1e; --fg-2:#3a3f3c; --muted:#7a807c; --line:#e1e3df; --rail:#d9dcd8; --dot:#c4c8c3; --dash:#c9cdc8;
  --accent:#12705f; --accent-hover:#0b5246; --accent-ink:#ffffff; --accent-soft:#e6f2ee; --accent-line:#cfe3dd;
  --ok:#12705f; --ok-bg:#e6f2ee; --bad:#c23a3a; --bad-bg:#fbe8e5; --bad-line:#f0c4be;
  --heart:#e0315b; --hist-ok:#3fae7f; --hist-bad:#e0315b; --hero:#0f5f51;
  --c-svet:#2f66ad; --c-sk:#bb3a2d; --c-veda:#6356c4; --c-kultura:#9e6d05; --c-sport:#1d8369; --c-objavy:#b5561b; --c-kauzy:#9b2f6e; --c-celeb:#c2185b;
  --shadow:0 10px 30px rgba(20,40,30,.10),0 1px 0 var(--line);
  --font-display:"Bricolage Grotesque","Segoe UI",Arial,sans-serif;
  --font-body:"Figtree","Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141917; --surface:#1d2321; --surface-2:#232a28; --fg:#e8ecea; --fg-2:#c8cfcc; --muted:#98a29e; --line:#2e3633; --rail:#3a4440; --dot:#4a5550; --dash:#46514c;
    --accent:#4fcfb4; --accent-hover:#79dcc6; --accent-ink:#0b1f1b; --accent-soft:#163530; --accent-line:#24504a;
    --ok:#4fcfb4; --ok-bg:#163530; --bad:#ff7b72; --bad-bg:#43211f; --bad-line:#6a2f2b;
    --heart:#ff5c80; --hist-ok:#4fcf94; --hist-bad:#ff5c80; --hero:#0d4a40;
    --c-svet:#7fb0f0; --c-sk:#ff8a7d; --c-veda:#aba2ff; --c-kultura:#e6b84a; --c-sport:#5fd0b2; --c-objavy:#f0a06a; --c-kauzy:#f08ac4; --c-celeb:#ff8ab8;
    --shadow:0 10px 30px rgba(0,0,0,.35),0 1px 0 var(--line);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141917; --surface:#1d2321; --surface-2:#232a28; --fg:#e8ecea; --fg-2:#c8cfcc; --muted:#98a29e; --line:#2e3633; --rail:#3a4440; --dot:#4a5550; --dash:#46514c;
  --accent:#4fcfb4; --accent-hover:#79dcc6; --accent-ink:#0b1f1b; --accent-soft:#163530; --accent-line:#24504a;
  --ok:#4fcfb4; --ok-bg:#163530; --bad:#ff7b72; --bad-bg:#43211f; --bad-line:#6a2f2b;
  --heart:#ff5c80; --hist-ok:#4fcf94; --hist-bad:#ff5c80; --hero:#0d4a40;
  --c-svet:#7fb0f0; --c-sk:#ff8a7d; --c-veda:#aba2ff; --c-kultura:#e6b84a; --c-sport:#5fd0b2; --c-objavy:#f0a06a; --c-kauzy:#f08ac4; --c-celeb:#ff8ab8;
  --shadow:0 10px 30px rgba(0,0,0,.35),0 1px 0 var(--line);
  color-scheme:dark;
}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 var(--font-body);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button{font-family:inherit;touch-action:manipulation}
button:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
a{color:var(--accent);text-decoration:none;font-weight:600}
a:hover{color:var(--accent-hover);text-decoration:underline}
.app{max-width:1040px;margin:0 auto;padding:32px 20px 64px;display:flex;flex-direction:column;gap:24px}
@media (max-width:600px){.app{padding:16px 16px 40px;gap:16px}}

/* hlavička */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.name{margin:0;font:800 34px/1 var(--font-display);letter-spacing:-.02em;white-space:nowrap}
.daynum{font-weight:600;color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}
@media (max-width:600px){.name{font-size:26px}}
@media (max-width:460px){.daynum{display:none}}
@media (max-width:440px){.top{gap:8px}.pills{gap:6px}.name{white-space:normal;font-size:24px;line-height:.95}}
@media (max-width:360px){.name{font-size:22px}.brand{gap:6px}}
.pills{display:flex;align-items:center;gap:8px}
.pill{height:40px;padding:0 14px;border-radius:20px;background:var(--surface);border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.iconbtn{width:40px;height:40px;border-radius:20px;background:var(--surface);border:1px solid var(--line);color:var(--fg);font-weight:700;font-size:16px;cursor:pointer}
.iconbtn:hover{background:var(--surface-2)}
.userbtn{height:40px;max-width:180px;padding:0 14px 0 10px;border-radius:20px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;gap:7px;font:700 14px var(--font-body);cursor:pointer;color:var(--fg)}
.userbtn:hover{background:var(--surface-2);border-color:var(--accent-line)}
.userbtn.in{padding-left:5px}
.userbtn .ui{font-size:16px;line-height:1}
.userbtn .un{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbtn .av{flex:none}
@media (max-width:560px){.userbtn{width:40px;padding:0;justify-content:center}.userbtn.in{padding:0}.userbtn .un{display:none}}
.linkbtn{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--accent);text-decoration:underline;cursor:pointer}
.lbbtn{height:40px;padding:0 4px 0 12px;border-radius:20px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;cursor:pointer;color:var(--fg)}
.lbbtn:hover{background:var(--surface-2);border-color:var(--accent-line)}
.lbbtn.on{background:var(--accent-soft)}
.lbbtn .rk{display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.lbbtn .stk{height:30px;padding:0 10px;border-radius:15px;background:#fdf0e6;color:#b5561b;display:flex;align-items:center;gap:4px;font-size:13px;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .lbbtn .stk{background:#3a2a1c;color:#f0a06a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lbbtn .stk{background:#3a2a1c;color:#f0a06a}}
/* rebríček */
.lb{display:flex;flex-direction:column;gap:20px;max-width:640px;width:100%;margin:0 auto}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lb-back{height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--rail);background:var(--surface);font-weight:700;font-size:13px;cursor:pointer;color:var(--fg)}
.lb-back:hover{background:var(--surface-2)}
.lb-reset{font-size:13px;color:var(--muted)} .lb-reset b{color:var(--fg)}
.lb-hero{background:var(--hero);color:#fff;border-radius:22px;padding:24px 20px 0;display:flex;flex-direction:column;gap:20px;overflow:hidden}
.lb-hero .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.lb-hero h2{margin:4px 0 0;font:800 32px/1.05 var(--font-display);letter-spacing:-.02em}
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:10px}
.pd{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.pd .av-wrap{position:relative}
.pd .medal{position:absolute;top:-8px;left:-8px;font-size:24px;line-height:1}
.pd .pst{position:absolute;bottom:-6px;right:-6px;height:24px;padding:0 7px;border-radius:12px;background:#fff;color:#b5561b;font-size:12px;font-weight:800;display:flex;align-items:center;gap:2px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pd .pn{font-weight:700;font-size:14px;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd .pillar{width:100%;border-radius:12px 12px 0 0;display:flex;flex-direction:column;align-items:center;padding-top:10px;gap:2px}
.pd .pillar b{font:800 28px/1 var(--font-display)}
.pd .pillar span{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.av{border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex:none;letter-spacing:-.02em}
.lb-table{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.lb-row{display:grid;grid-template-columns:56px minmax(0,1fr) 64px 56px;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--bg)}
.lb-row:last-child{border-bottom:0}
.lb-head{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}
.lb-row .r{font-weight:800;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.lb-row .who{display:flex;align-items:center;gap:10px;min-width:0}
.lb-row .who .av-wrap{position:relative;flex:none}
.lb-row .who .medal{position:absolute;bottom:-4px;right:-6px;font-size:16px;line-height:1}
.lb-row .nm{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .st{text-align:right;font-weight:700;font-size:14px;color:#b5561b;font-variant-numeric:tabular-nums}
.lb-row .sc{text-align:right;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.lb-row.me{background:var(--accent-soft);padding-block:14px}
.lb-row.me .r{color:var(--accent)} .lb-row.me .nm{font-weight:700}
.lb-row.me .av{box-shadow:0 0 0 2px var(--accent)}
.lb-gap{padding:6px 16px;text-align:center;color:var(--muted);font-weight:700;letter-spacing:.2em;border-bottom:1px solid var(--bg)}
.lb-empty{padding:20px 16px;text-align:center;color:var(--muted);font-weight:600}
.lb-note{margin:0;font-size:13px;color:var(--muted);text-align:center;text-wrap:pretty}
@media (max-width:480px){.lb-row{grid-template-columns:40px minmax(0,1fr) 52px 44px;gap:8px;padding-inline:12px}.lb-hero h2{font-size:26px}}

/* pás: okruh, skóre, životy, postup */
.strip{padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;container-type:inline-size}
.stripin{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"topic score lives btn" "prog prog prog prog";align-items:center;column-gap:18px;row-gap:12px}
@container (min-width:600px){.stripin{grid-template-columns:auto auto auto minmax(120px,1fr) auto;grid-template-areas:"topic score lives prog btn";column-gap:20px}}
.st{display:flex;flex-direction:column;gap:2px;min-width:0}
.st .lbl{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.st b{font-weight:700;font-size:15px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.st-topic{grid-area:topic} .st-score{grid-area:score} .st-lives{grid-area:lives} .st-prog{grid-area:prog}
.lives{display:flex;gap:3px;font-size:17px;line-height:22px;color:var(--heart)}
.lives .lost{color:var(--rail)}
.lives span{display:inline-block;transform-origin:50% 60%}
.lives.beat span:not(.lost){animation:heartbeat 1.6s ease-in-out infinite}
.lives.beat.last span:not(.lost){animation-duration:1s}
.lives .broke{animation:heartbreak .7s ease-out}
@keyframes heartbeat{0%,45%,100%{transform:scale(1)}12%{transform:scale(1.12)}24%{transform:scale(1.03)}34%{transform:scale(1.08)}}
@keyframes heartbreak{0%{transform:scale(1);color:var(--heart)}30%{transform:scale(1.6) rotate(-14deg);color:var(--heart)}55%{transform:scale(1.15) rotate(10deg)}100%{transform:none;color:var(--rail)}}
.prow{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.prow b{font-weight:600;font-variant-numeric:tabular-nums}
.segs{display:flex;gap:4px}
.segs i{flex:1;height:6px;border-radius:3px;background:var(--line)}
.segs i.ok{background:linear-gradient(var(--ok),var(--ok)) no-repeat var(--line)} .segs i.bad{background:linear-gradient(var(--bad),var(--bad)) no-repeat var(--line)}
.segs i.new{animation:segfill .45s cubic-bezier(.3,.7,.4,1) both,segpop .5s ease-out}
.segs i.new.bad{animation:segfill .45s cubic-bezier(.3,.7,.4,1) both,segshake .45s ease-out}
@keyframes segfill{from{background-size:0 100%}to{background-size:100% 100%}}
@keyframes segpop{0%,100%{transform:scaleY(1)}45%{transform:scaleY(1.7)}}
@keyframes segshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px) scaleY(1.5)}45%{transform:translateX(3px) scaleY(1.3)}70%{transform:translateX(-2px)}}
.modebtn{grid-area:btn;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--accent-line);background:var(--surface);color:var(--accent);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.modebtn:hover{background:var(--accent-soft)}
.modebtn.giveup{color:var(--bad);border-color:var(--bad-line)}
.modebtn.giveup:hover{background:var(--bad-bg)}
.modebtn.armed{background:var(--bad);border-color:var(--bad);color:#fff}

/* rozcestník */
.home{display:flex;flex-direction:column;gap:20px}
.home .hh{display:flex;flex-direction:column;gap:6px}
.home h2{margin:0;font:800 28px/1.1 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.home p{margin:0;color:var(--muted);font-size:15px;text-wrap:pretty}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px}
.topic{text-align:left;padding:0;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.topic:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,40,30,.12);border-color:var(--accent-line)}
.topic:active{transform:scale(.99)}
.topic .tb{height:150px;display:flex;align-items:flex-end;padding:18px 20px;position:relative;overflow:hidden}
.topic .te{position:absolute;right:-14px;top:-18px;font-size:120px;line-height:1;opacity:.9;transform:rotate(-8deg);pointer-events:none}
.topic .tt{display:flex;flex-direction:column;gap:4px;position:relative}
.topic .tn{font:800 30px/1 var(--font-display);letter-spacing:-.02em;color:#fff;text-wrap:balance;max-width:75%;text-shadow:0 1px 12px rgba(0,0,0,.18)}
.topic .tc{font-size:13px;font-weight:600;color:#fff}
.topic .tf{padding:14px 18px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.topic .sqs{display:flex;gap:3px}
.topic .sqs i{width:12px;height:12px;border-radius:3px;background:var(--line)}
.topic .sqs i.ok{background:var(--hist-ok)} .topic .sqs i.bad{background:var(--hist-bad)}
.topic .ts{font-size:13px;font-weight:700;color:var(--fg)}
.topic .ts.done{color:var(--ok)} .topic .ts.prog{color:#b5561b} .topic .ts.gave{color:var(--bad)}

/* hracia plocha: os vľavo, panel vpravo */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;align-items:start}
.play{display:flex;flex-direction:column;gap:20px;min-width:0}

/* aktuálna karta */
.current{position:sticky;top:12px;z-index:3}
.cur{background:var(--surface);border-radius:18px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.cur-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cur .tsec{color:var(--accent);font-variant-numeric:tabular-nums;font-size:14px;text-transform:none;letter-spacing:0}
.cur .tsec.low{color:var(--bad)}
.cur-main{display:flex;gap:16px;align-items:center}
.cur-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.cur .t{margin:0;font:600 24px/1.15 var(--font-display);letter-spacing:-.01em;text-wrap:pretty}
.cur .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cur .yq{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.08em}
@media (max-width:600px){.cur{padding:16px;gap:12px}.cur .t{font-size:20px}}
.timer{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.timer i{display:block;height:100%;background:var(--accent);border-radius:3px;transform-origin:left center}
.timer.low i{background:var(--bad)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:6px;border:1px solid currentColor;white-space:nowrap;line-height:1.2}
.tag-kauzy{color:var(--c-kauzy)} .tag-celeb{color:var(--c-celeb)} .tag-svet{color:var(--c-svet)} .tag-sk{color:var(--c-sk)} .tag-veda{color:var(--c-veda)} .tag-kultura{color:var(--c-kultura)} .tag-sport{color:var(--c-sport)} .tag-objavy{color:var(--c-objavy)}

/* náhľady (fotka článku alebo emoji) */
.thumb{position:relative;display:grid;place-items:center;flex:none;overflow:hidden;border-radius:14px;background:var(--bg)}
.thumb .te{line-height:1}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cur .thumb{width:60px;height:60px;font-size:32px}
.card .body .thumb{width:34px;height:34px;border-radius:9px;font-size:22px}
.card .body .thumb.noimg{width:auto;background:transparent}
.fb-ev .thumb{width:48px;height:48px;border-radius:12px;font-size:30px}
.fb-ev .thumb.noimg{background:transparent}

/* časová os */
.tl{position:relative}
.timeline{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column}
.timeline::before{content:"";position:absolute;left:35px;top:8px;bottom:8px;width:2px;background:var(--rail);border-radius:1px}
.card,.slot{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;padding:4px 0}
.slot::before{content:"";justify-self:center;width:8px;height:8px;border-radius:4px;background:var(--dot);position:relative;z-index:1}
.slotbtn{height:40px;width:100%;border-radius:10px;border:1.5px dashed var(--dash);background:transparent;color:var(--accent);font-weight:700;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s}
.slotbtn .plus{font-size:16px;line-height:1}
.slotbtn:hover,.slotbtn:focus-visible{background:var(--accent-soft);border-color:var(--accent);border-style:solid}
.play.locked .slotbtn,.play.done .slotbtn{pointer-events:none;opacity:.35}
.year{justify-self:center;position:relative;z-index:1;min-width:56px;text-align:center;padding:5px 6px;border-radius:14px;font-weight:700;font-size:14px;line-height:1.2;font-variant-numeric:tabular-nums;background:var(--fg);color:var(--bg)}
.year small{display:block;font-size:9px;letter-spacing:.04em;opacity:.8}
.card.ok .year{background:var(--ok);color:var(--accent-ink)}
.card.bad .year{background:var(--bad);color:#fff}
.card .body{min-height:52px;padding:10px 14px;border-radius:12px;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);min-width:0}
.card .body .t{flex:1;min-width:0;font-weight:600;font-size:15px;line-height:1.3}
.card .mark{font-size:12px;font-weight:700;color:var(--muted);flex:none}
.card.ok .mark{color:var(--ok)}
.card.bad .body{background:var(--bad-bg);border-color:var(--bad-line)}
.card.bad .mark{color:var(--bad)}
.card.flash-ok .body{animation:flashok .6s ease-out}
.card.flash-bad .body{animation:flashbad .6s ease-out}
@keyframes flashok{0%{background:var(--ok-bg);transform:scale(1.02)}100%{background:var(--surface);transform:none}}
@keyframes flashbad{0%{transform:translateX(-4px)}30%{transform:translateX(4px)}60%{transform:translateX(-2px)}100%{transform:none}}

/* panel „Viac o tom“ */
.aside{display:flex;flex-direction:column;gap:20px;min-width:0}
.box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px}
.box h3{margin:0;font:600 18px var(--font-display)}
.box p{margin:0;font-size:15px;line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.fb-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--ok)}
.fb-head.bad{color:var(--bad)}
.fb-head .ic{width:22px;height:22px;border-radius:11px;background:currentColor;display:grid;place-items:center;flex:none}
.fb-head .ic b{color:var(--surface);font-size:12px;line-height:1}
.fb-head .x{margin-left:auto;width:30px;height:30px;border:0;background:transparent;color:var(--muted);font:700 20px/1 var(--font-body);cursor:pointer;border-radius:8px}
.fb-head .x:hover{background:var(--accent-soft);color:var(--fg)}
.aside .fb-head .x{display:none}
.fb-ev{display:flex;gap:12px;align-items:center}
.fb-ev .tt{display:flex;flex-direction:column;gap:4px;min-width:0}
.fb-ev .it{font:600 18px/1.2 var(--font-display)}
.fb-ev .meta{font-size:13px;font-weight:600;color:var(--muted)}
.box .more{font-size:14px;align-self:flex-start}
.info-inline{display:none}
@media (max-width:719px){.info-inline{display:block}.aside .fb{display:none}}
.hist{display:flex;flex-direction:column;gap:10px}
.hist h3{margin:0;padding-bottom:8px;border-bottom:1px solid var(--rail);font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hist .empty{font-size:14px;color:var(--muted)}
.hrow{display:flex;align-items:center;gap:10px;font-size:14px;width:100%;text-align:left;background:transparent;border:0;border-radius:10px;padding:6px 8px;margin:0 -8px;color:var(--fg);cursor:pointer;font-family:inherit}
.hrow:hover{background:var(--surface-2)}
.hrow.sel{background:var(--accent-soft)}
.hrow.sel .ht{color:var(--accent)}
.hist .sq{width:10px;height:10px;border-radius:3px;background:var(--hist-ok);flex-shrink:0}
.hist .sq.bad{background:var(--hist-bad)}
.hist .sq.start{background:var(--fg)}
.hist .y{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;width:38px;flex:none}
.hist .ht{font-weight:600}
.fb-head.start{color:var(--fg)}
.card .body{cursor:pointer;transition:border-color .15s}
.card .body:hover{border-color:var(--accent-line)}
.card.sel .body{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* karta článku zo Šport.sk */
.art{--sk:#253F68;--sk2:#2C4C7D;display:block;text-decoration:none;color:var(--fg);font-weight:400;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);transition:box-shadow .15s,transform .12s,border-color .15s}
.art:hover{box-shadow:var(--shadow);border-color:var(--sk2);transform:translateY(-1px);text-decoration:none;color:var(--fg)}
.art .ph{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--sk) 0%,var(--sk2) 100%);overflow:hidden;display:grid;place-items:center}
.art .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art .ph .fb{display:flex;align-items:center;justify-content:center}
.art .ph .fb .sklogo{height:26px}
.art .ph.noimg::after,.art .ph.noimg .badge{display:none}
.art .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(10,20,35,.55));pointer-events:none}
.art .badge{position:absolute;left:10px;top:10px;z-index:1;display:flex;align-items:center;background:var(--sk);border-radius:7px;padding:6px 9px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.sklogo{display:block;height:13px;width:auto}
.zvlogo{display:block;height:14px;width:auto}
.aklogo{display:block;height:12px;width:auto}
.dvlogo{display:block;height:14px;width:auto}
.art.b-diva{--sk:#c2185b;--sk2:#9c1149}
.art.b-diva .ph{background:linear-gradient(135deg,#fbeef3 0%,#f3dde6 100%)}
.art.b-diva .badge{background:#fff}
.art.b-diva .ph .fb .dvlogo{height:38px}
.art.b-diva.mini .ph .fb .dvlogo{height:16px}
.art.b-diva.mini .badge .dvlogo{height:9px}
:root[data-theme="dark"] .art.b-diva.mini .go{color:#ff8ab8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .art.b-diva.mini .go{color:#ff8ab8}}
.art.b-akt{--sk:#CE3031;--sk2:#a82526}
.art.b-akt .ph{background:linear-gradient(135deg,#f6f1f1 0%,#ece3e3 100%)}
.art.b-akt .badge{background:#fff}
.art.b-akt .ph .fb .aklogo{height:30px}
.art.b-akt.mini .ph .fb .aklogo{height:12px}
.art.b-akt.mini .badge .aklogo{height:8px}
:root[data-theme="dark"] .art.b-akt.mini .go{color:#ff8a8a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .art.b-akt.mini .go{color:#ff8a8a}}
.art.b-zive{--sk:#257E3D;--sk2:#1d6a32}
.art.b-zive .ph{background:linear-gradient(135deg,#eef4ef 0%,#dfeae1 100%)}
.art.b-zive .badge{background:#fff}
.art.b-zive .ph .fb .zvlogo{height:44px}
.art.b-zive.mini .ph .fb .zvlogo{height:22px}
.art.b-zive.mini .badge .zvlogo{height:10px}
:root[data-theme="dark"] .art.b-zive.mini .go{color:#7fd39a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .art.b-zive.mini .go{color:#7fd39a}}
.art .ab{padding:11px 13px 13px;display:flex;flex-direction:column;gap:6px}
.art .src{font-size:11px;font-weight:700;line-height:1;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.art .at{font:600 16px/1.28 var(--font-display);text-wrap:pretty}
.art .cta{align-self:flex-start;margin-top:4px;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--sk) 0%,var(--sk2) 100%);color:#fff;border-radius:9px;padding:6px 14px 6px 6px;font-weight:600;font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.12)}
.art:hover .cta{filter:brightness(1.08)}
.art .cta .fav{width:24px;height:24px;padding:3px;border-radius:6px;flex:none;background:linear-gradient(145deg,#fff 0%,#fff 45%,rgba(255,255,255,.72) 100%);box-shadow:0 1px 3px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.5)}
.art.mini{display:grid;grid-template-columns:104px minmax(0,1fr);border-radius:12px;margin-top:4px}
.art.mini .ph{aspect-ratio:auto;min-height:78px;height:100%}
.art.mini .ph .fb .sklogo{height:13px}
.art.mini .ph::after{display:none}
.art.mini .badge{left:6px;top:6px;padding:4px 6px;border-radius:5px}
.art.mini .badge .sklogo{height:9px}
.art.mini .ab{padding:8px 10px;gap:4px}
.art.mini .at{font-size:13.5px}
.art.mini .go{font-weight:600;font-size:12px;color:var(--sk2)}
:root[data-theme="dark"] .art.mini .go{color:#8fb2ea}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .art.mini .go{color:#8fb2ea}}

/* vyhodnotenie */
.res{border-radius:20px;overflow:hidden;box-shadow:0 14px 36px rgba(10,60,50,.18);display:flex;flex-direction:column;background:var(--surface)}
.res-hero{background:var(--hero);color:#fff;padding:24px 24px 20px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.res-hero .wm{position:absolute;right:-30px;top:-40px;font:800 200px/1 var(--font-display);color:rgba(255,255,255,.06);letter-spacing:-.05em;pointer-events:none;white-space:nowrap}
.res-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;position:relative}
.res-badge{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 10px;border-radius:12px;background:#3fae7f;color:#fff}
.res-badge.bad{background:#c23a3a}
.res-sub{font-size:13px;font-weight:600;opacity:.8}
.res-main{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative}
.res-rank{display:flex;flex-direction:column;gap:4px}
.res-rank span{font-size:14px;font-weight:600;opacity:.8}
.res-rank b{font:800 40px/1 var(--font-display);letter-spacing:-.02em}
.res-score{display:flex;align-items:baseline;gap:6px}
.res-score b{font:800 72px/.85 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.res-score span{font-weight:700;font-size:18px;opacity:.8}
.res-steps{display:flex;gap:5px;position:relative}
.res-steps i{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.18)}
.res-steps i.ok{background:#5fd3a0} .res-steps i.bad{background:#ff6b81}
@media (max-width:600px){.res-hero{padding:20px 18px 18px}.res-rank b{font-size:30px}.res-score b{font-size:60px}}
.res-axis{padding:22px 24px 8px;display:flex;flex-direction:column;gap:6px}
.res-lbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.maxis{position:relative;height:112px;margin:0 18px}
.maxis::before{content:"";position:absolute;left:0;right:0;top:55px;height:2px;background:var(--rail)}
.maxis .mk{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;border:0;padding:0;cursor:pointer;font-family:inherit;color:inherit}
.maxis .mk .thumb{width:30px;height:30px;border-radius:50%;font-size:17px;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--rail);transition:transform .12s}
.maxis .mk:hover .thumb,.maxis .mk:focus-visible .thumb{transform:scale(1.15)}
.maxis .mk.ok .thumb{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--ok)} .maxis .mk.bad .thumb{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--bad)}
.maxis .mk.sel .thumb{transform:scale(1.2);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.maxis .mk.dn{flex-direction:column-reverse}
.maxis .mk .me{font-size:20px;line-height:1}
.maxis .mk .my{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg)}
.maxis .mk.ok .my{color:var(--ok)} .maxis .mk.bad .my{color:var(--bad)}
.maxis .md{position:absolute;top:50px;width:12px;height:12px;border-radius:6px;transform:translateX(-50%);background:var(--fg);box-shadow:0 0 0 3px var(--surface)}
.maxis .md.ok{background:var(--ok)} .maxis .md.bad{background:var(--bad)}
.res-stats{padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.res-stats div{background:var(--bg);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.res-stats span{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.res-stats b{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.res-actions{padding:20px 24px 22px;display:flex;flex-direction:column;gap:8px}
.res-actions .row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.btn{height:44px;border-radius:12px;border:1px solid var(--rail);background:var(--surface);color:var(--fg);font-weight:700;font-size:14px;cursor:pointer;padding:0 16px;transition:background .15s,transform .12s}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:scale(.98)}
.btn.primary{height:50px;border:0;background:var(--accent);color:var(--accent-ink);font-size:15px}
.btn.primary:hover{background:var(--accent-hover)}
.countdown{text-align:center;font-size:13px;color:var(--muted);padding-top:6px}
.countdown b{color:var(--fg);font-variant-numeric:tabular-nums}
.sharebox{width:100%;min-height:90px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font:14px/1.4 var(--font-body);padding:8px}

/* návod */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(18,30,26,.55);display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow:auto}
.panel{margin:auto 0;width:100%;max-width:520px;background:var(--surface);color:var(--fg);border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column}
.panel .ph{background:var(--hero);color:#fff;padding:24px 24px 22px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px}
.panel .px{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:17px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.panel .px:hover{background:rgba(255,255,255,.24)}
.panel h2{margin:0;font:800 32px/1.05 var(--font-display);letter-spacing:-.02em}
.panel .ph p{margin:0;font-size:15px;line-height:1.55;max-width:420px;text-wrap:pretty}
.panel .demo{display:flex;align-items:center;gap:6px;padding-top:6px}
.panel .demo .dy{padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.14);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.panel .demo .ds{flex:1;height:30px;border-radius:8px;border:1.5px dashed rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.panel .rules{padding:8px 24px;display:flex;flex-direction:column}
.panel .rule{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.panel .rule:last-child{border-bottom:0}
.panel .ri{width:36px;height:36px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.panel .ri.ok{background:var(--ok-bg)} .panel .ri.bad{background:var(--bad-bg)} .panel .ri.warm{background:#fdf0e6}
:root[data-theme="dark"] .panel .ri.warm{background:#3a2a1c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .panel .ri.warm{background:#3a2a1c}}
.panel .rk{display:block;font-weight:700;font-size:15px}
.panel .rv{display:block;font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.panel .lf{padding:20px 24px 24px;display:flex;flex-direction:column;gap:8px}
.panel .lf label{font-weight:700;font-size:14px}
.panel .lf input{height:50px;border-radius:12px;border:1px solid var(--rail);background:var(--surface-2);color:var(--fg);font:500 17px var(--font-body);padding:0 14px}
.panel .lf input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.panel .lf .err{min-height:18px;font-size:13px;color:var(--bad)}
.panel .lf .btn{width:100%;height:52px;border-radius:14px;font-size:16px}
.panel .pf{padding:12px 24px 24px}
.panel .pf .btn{width:100%;height:52px;border-radius:14px;font-size:16px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:600;box-shadow:var(--shadow);pointer-events:none;white-space:nowrap}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- výzva kamaráta ---------- */
.chal{display:flex;flex-direction:column;gap:16px;max-width:640px;width:100%;margin:0 auto}
.ch-hero{position:relative;overflow:hidden;color:#fff;border-radius:22px;padding:26px 22px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 14px 36px rgba(10,40,40,.18)}
.ch-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.14) 0%,rgba(0,0,0,.18) 100%);pointer-events:none}
.ch-hero>*{position:relative}
.ch-hero .ch-em{position:absolute;right:-6px;top:-14px;font-size:120px;line-height:1;opacity:.16;transform:rotate(-12deg)}
.ch-hero .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.ch-hero h2{margin:0;font:800 34px/1.05 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.ch-hero p{margin:0;font-size:15px;line-height:1.5;max-width:460px;opacity:.95}
.ch-hero .ch-go{margin-top:8px;height:52px;border:0;border-radius:14px;background:#fff;color:#1d1f1e;font-size:16px;box-shadow:0 6px 18px rgba(0,0,0,.18);animation:chgo 2.4s ease-in-out infinite}
.ch-hero .ch-go:hover{background:#f4f4f2}
@keyframes chgo{0%,100%{transform:none}50%{transform:scale(1.03)}}
.ch-table{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.ch-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto 64px;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--bg)}
.ch-row:last-child{border-bottom:0}
.ch-row.me{background:var(--accent-soft)}
.ch-row .r{font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.ch-row .who{display:flex;align-items:center;gap:10px;min-width:0}
.ch-row .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.ch-row .nm small{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--bg);padding:2px 6px;border-radius:6px}
.ch-row .sc{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.ch-row .sc b{font:800 20px var(--font-display);font-variant-numeric:tabular-nums}
.ch-row .sc small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ch-sq{display:flex;gap:3px}
.ch-sq i{width:9px;height:14px;border-radius:3px;background:var(--line)}
.ch-sq i.ok{background:var(--ok)} .ch-sq i.bad{background:var(--bad)}
@media (max-width:480px){.ch-row{grid-template-columns:28px minmax(0,1fr) 56px;gap:8px}.ch-row .ch-sq{grid-column:2;grid-row:2}.ch-row .r{grid-row:span 2}.ch-row .sc{grid-row:span 2;grid-column:3;grid-row-start:1}.ch-hero h2{font-size:28px}}
.ch-actions{display:flex;flex-direction:column;gap:8px}
.ch-wait{margin:0;color:var(--muted);font-size:14px}
.res-chal{padding:18px 24px 0;display:flex;flex-direction:column;gap:8px}
.btn.chalbtn{height:48px;border:0;color:#fff;background:linear-gradient(135deg,#6b3fa0 0%,#b8323a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn.chalbtn:hover{filter:brightness(1.08);background:linear-gradient(135deg,#6b3fa0 0%,#b8323a 100%)}
.btn:disabled{opacity:.6;cursor:default}

/* ---------- efekty ---------- */
.year.rolling{filter:blur(.4px);opacity:.85}
.year.landed{animation:yearland .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes yearland{0%{transform:scale(1.45)}100%{transform:none}}
.combo{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);font:800 20px var(--font-display);color:#b5561b;background:#fdf0e6;padding:7px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(181,86,27,.25);white-space:nowrap;animation:comboup 1.3s ease-out forwards}
@keyframes comboup{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-90%) scale(1.12)}70%{opacity:1;transform:translate(-50%,-120%) scale(1)}100%{opacity:0;transform:translate(-50%,-170%) scale(.95)}}
.confetti{position:fixed;inset:0;z-index:70;pointer-events:none}

/* ---------- zdieľacie okno výzvy ---------- */
.sh-body{padding:18px 24px 24px;display:flex;flex-direction:column;gap:12px}
.sh-copied{font-size:13px;font-weight:700;border-radius:10px;padding:8px 12px;animation:shin .3s ease-out}
.sh-copied:empty{display:none}
.sh-copied.ok{background:var(--ok-bg);color:var(--ok)} .sh-copied.no{background:var(--bad-bg);color:var(--bad)}
@keyframes shin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sh-msg{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:15px;line-height:1.5;white-space:pre-line;user-select:text}
.sh-msg a{display:block;margin-top:4px;color:var(--accent);font-weight:600;word-break:break-all}
.sh-link{display:flex;gap:8px}
.sh-link input{flex:1;min-width:0;height:44px;border-radius:12px;border:1px solid var(--rail);background:var(--surface);color:var(--fg);font:500 14px var(--font-body);padding:0 12px}
.sh-link .btn{flex:none}
.sh-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:4px}
.sh-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px 6px}
.sh-app{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--fg);font-size:12px;font-weight:600;background:none;border:0;padding:4px 0;cursor:pointer;font-family:inherit}
.sh-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 6px rgba(0,0,0,.15);transition:transform .12s}
.sh-ic i{width:24px;height:24px;background:#fff;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.sh-app:hover .sh-ic{transform:translateY(-2px) scale(1.05)}
.sh-app:active .sh-ic{transform:scale(.95)}

/* ---------- štart: kostra dlaždíc a ich nábeh ---------- */
.topic.sk{cursor:default;pointer-events:none}
.topic.sk .tb{background:var(--line)}
.topic.sk .tf i{display:block;height:12px;border-radius:6px;background:var(--line)}
.topic.sk .tf i:first-child{width:46%} .topic.sk .tf i:last-child{width:18%}
.topic.sk .tb,.topic.sk .tf i{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);background-size:220% 100%;animation:skshine 1.3s linear infinite}
:root[data-theme="dark"] .topic.sk .tb,:root[data-theme="dark"] .topic.sk .tf i{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .topic.sk .tb,:root:not([data-theme="light"]) .topic.sk .tf i{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%)}}
@keyframes skshine{from{background-position:120% 0}to{background-position:-100% 0}}
.topics.enter .topic{animation:tilein .5s cubic-bezier(.2,.8,.2,1) both}
.topics.enter .topic:nth-child(2){animation-delay:.05s} .topics.enter .topic:nth-child(3){animation-delay:.1s}
.topics.enter .topic:nth-child(4){animation-delay:.15s} .topics.enter .topic:nth-child(5){animation-delay:.2s}
.topics.enter .topic:nth-child(6){animation-delay:.25s}
@keyframes tilein{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- okná: hlavička a tlačidlo ostávajú, posúva sa obsah; stránka pod oknom sa nehýbe ---------- */
.sheet{overscroll-behavior:contain}
body:has(.sheet:not([hidden])){overflow:hidden}
#help .panel{max-height:calc(100dvh - 40px)}
#help .ph,#help .pf{flex:none}
#help .rules{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:linear-gradient(var(--surface) 30%,transparent) top/100% 24px no-repeat local,linear-gradient(transparent,var(--surface) 70%) bottom/100% 24px no-repeat local,
  radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.12),transparent) top/100% 10px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.12),transparent) bottom/100% 10px no-repeat scroll}
#help .pf{border-top:1px solid var(--line)}
@media (max-height:700px){#help .ph{padding:18px 20px 16px;gap:8px}#help .ph h2{font-size:26px}#help .ph .demo{display:none}}
#help .rule{flex:none}

/* ---------- vypínač zvuku ---------- */
.sndbtn{display:grid;place-items:center;padding:0}
.sndbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sndbtn .spk{fill:currentColor}
.sndbtn .off{display:none}
.sndbtn.muted{color:var(--muted)} .sndbtn.muted .on{display:none} .sndbtn.muted .off{display:inline}
@media (max-width:400px){.pills .iconbtn,.pills .userbtn{width:36px;height:36px}.pills .lbbtn{height:36px}.pills{gap:4px}}

/* ---------- detail udalosti na mobile: panel vysunutý zospodu ---------- */
.evsheet{align-items:flex-end;padding:0}
.evsheet .panel{position:relative;margin:0;max-width:640px;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:22px 22px 0 0;padding:22px 0 calc(16px + env(safe-area-inset-bottom,0px));animation:evup .28s cubic-bezier(.2,.8,.2,1)}
.evsheet .grip{position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--rail)}
.evsheet .evx{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:17px;border:0;background:var(--bg);color:var(--fg);font-size:15px;font-weight:700;cursor:pointer;z-index:1}
.evsheet .box{border:0;border-radius:0;padding:14px 20px 4px}
@keyframes evup{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}