/* Vypínač · shared styles for every drug page
   Layout: same lab-monitor language as steroidy.html — dark panels, signal colours, one condensed display face */
:root {
  color-scheme: dark;
  --bg: #0D1216; --surface: #141B21; --surface-2: #1B242C; --line: #2A3641;
  --fg: #E8EDF1; --muted: #8F9DA9;
  --gnrh: #8EA2FF; --lh: #FFB020; --fsh: #E58BFF; --own: #2BD4C0; --exo: #FF4D3D;
  --exo-soft: rgba(255, 77, 61, .14); --own-soft: rgba(43, 212, 192, .12); --lh-soft: rgba(255, 176, 32, .14); --gnrh-soft: rgba(142, 162, 255, .14);
  --accent: var(--exo); --accent-soft: var(--exo-soft);
  /* svetlejšie odtiene pre malý text na tónovanom pozadí (kontrast ≥ 4,5:1, WCAG 1.4.3) */
  --exo-ink: #FF8A7D; --lh-ink: #FFC14A;
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --radius: 10px; --wrap: 1180px;
  --spring: cubic-bezier(.34, 1.56, .64, 1); --out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg, canvas { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lh); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; line-height: .95; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 900; }
h3 { font-size: 1.5rem; font-weight: 800; }
p { margin: 0; }
.eyebrow { font: 600 .74rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: 1.06rem; color: var(--muted); max-width: 64ch; }
.lede b { color: var(--fg); }
.note { font-size: .8rem; color: var(--muted); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
section { padding-block: 52px; border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 12px; margin-bottom: 24px; }

/* ---------- top bar ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 16px; padding-block: 10px; }
.brand { font: 900 1.45rem/1 var(--font-display); text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: 8px; flex: none; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--exo); box-shadow: 0 0 10px var(--exo); }
.drugnav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; margin-left: auto; min-width: 0; }
.drugnav::-webkit-scrollbar { display: none; }
.drugnav a { text-decoration: none; color: var(--muted); font: 600 .84rem/1 var(--font-body); padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
.drugnav a:hover { color: var(--fg); background: var(--surface-2); }
.drugnav a[aria-current="page"] { color: var(--fg); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.top .navbtn { display: none; flex: none; padding: 9px 12px; }
/* .fold (set by engine.js: narrow screen, or a header CTA eating the room): 12 drugs don't fit in one row,
   so the list folds into a panel under the bar */
.top.fold .brand { margin-right: auto; }
.top.fold .navbtn { display: inline-flex; order: 2; }
.top.fold.open .navbtn { border-color: var(--accent); background: var(--accent-soft); }
.top.fold .drugnav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; overflow-y: auto; max-height: calc(100dvh - 64px);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px;
  padding: 12px max(16px, env(safe-area-inset-right, 0px), calc((100% - var(--wrap)) / 2 + 16px)) 16px max(16px, env(safe-area-inset-left, 0px), calc((100% - var(--wrap)) / 2 + 16px));
  background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0, 0, 0, .35); }
.top.fold.open .drugnav { display: grid; }
.top.fold.open .drugnav a { animation: chipPop .36s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
.top.fold .drugnav a { padding: 13px 12px; font-size: .95rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 420px) { .top .navbtn span { display: none; } .top .navbtn { padding: 9px 10px; } }

/* ---------- controls ---------- */
.btn { appearance: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font: 600 .88rem/1 var(--font-body); padding: 10px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: transform .3s var(--spring), border-color .2s; }
.btn:hover { border-color: var(--muted); transform: translateY(-1px); }
.btn:active { transform: scale(.95); transition-duration: .08s; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 600 .82rem/1 var(--font-body); padding: 10px 12px; cursor: pointer; transition: transform .3s var(--spring), background .2s, color .2s; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
.seg button:active { transform: scale(.94); transition-duration: .08s; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.field { display: grid; gap: 6px; }
.field label { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-size: .92rem; }
.field label output { font: 600 .95rem/1.2 var(--font-mono); color: var(--accent); }
.pill { font: 700 .72rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 20px; border: 1px solid currentColor; justify-self: start; }
.pill.ok { color: var(--own); background: var(--own-soft); }
.pill.warn { color: var(--lh-ink); background: var(--lh-soft); }
.pill.bad { color: var(--exo-ink); background: var(--exo-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 .8rem/1 var(--font-body); padding: 7px 9px; border-radius: 6px; border: 1px solid var(--line); color: var(--fg); background: var(--surface-2); }
.chip.pop { animation: chipPop .36s var(--spring) backwards; }
@keyframes chipPop { from { transform: scale(.6); opacity: .2; } }

/* play button (shared with steroid page look) */
.playbtn { appearance: none; border: 0; cursor: pointer; color: #0D1216; text-align: left; display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 40px; background: var(--exo); box-shadow: 0 6px 22px var(--exo-soft), inset 0 -3px 0 rgba(0,0,0,.18); position: relative; isolation: isolate; transition: transform .32s var(--spring), filter .2s; }
.playbtn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.playbtn:active { transform: scale(.95); transition-duration: .08s; }
.playbtn[disabled] { filter: saturate(.4); cursor: progress; transform: none; }
.playbtn .ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--exo); display: grid; place-items: center; flex: none; position: relative; }
.playbtn .ico svg { width: 20px; height: 20px; }
.playbtn .ico::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); opacity: 0; }
.playbtn.fresh .ico::after { animation: ping 1.6s ease-out infinite; }
.playbtn .txt { display: grid; gap: 3px; }
.playbtn .txt b { font: 900 1.25rem/1 var(--font-display); text-transform: uppercase; }
.playbtn .txt small { font: 500 .72rem/1 var(--font-mono); opacity: .9; }
@keyframes ping { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- hero ---------- */
.hero { padding-block: 40px 30px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-grid > * { min-width: 0; }
.hero h1 { overflow-wrap: break-word; hyphens: auto; }
.hero h1 { font-size: clamp(3rem, 8.4vw, 6.8rem); font-weight: 900; line-height: .96; }
/* stĺpce hero sú zarovnané na vrch: eyebrow vľavo začína na úrovni úvodného textu vpravo */
.hero h1 em { font-style: normal; color: var(--accent); }
.hero h1 .ln { display: block; animation: rise .7s var(--out) backwards; }
.hero h1 .ln + .ln { animation-delay: .09s; }
.hero-side { display: grid; gap: 18px; animation: rise .7s var(--out) .18s backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.switch-card { padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; gap: 14px; }
.sc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-eyebrow { font: 700 .72rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.tap-hint { font: 700 .72rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lh); display: inline-flex; align-items: center; gap: 6px; animation: nudge 1.4s ease-in-out infinite; }
.tap-hint svg { width: 16px; height: 16px; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.switch-card.used .tap-hint { display: none; }
.sc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.sc-lab { overflow-wrap: anywhere; font: 900 1.55rem/1 var(--font-display); text-transform: uppercase; color: var(--muted); opacity: .55; cursor: pointer; user-select: none; transition: color .25s, opacity .25s; }
.sc-lab.l { text-align: right; }
.sc-lab.on.l { color: var(--own); opacity: 1; }
.sc-lab.on.r { color: var(--exo); opacity: 1; }
.switch { appearance: none; position: relative; width: 136px; height: 64px; border-radius: 40px; cursor: pointer; padding: 0; border: 2px solid var(--own); background: linear-gradient(180deg, var(--own-soft), transparent), var(--surface-2); box-shadow: inset 0 2px 8px rgba(0,0,0,.25); transition: background .3s, border-color .3s, box-shadow .3s; }
.switch .knob { position: absolute; top: 5px; left: 5px; width: 50px; height: 50px; border-radius: 50%; background: var(--own); color: #0D1216; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.18); transition: transform .42s var(--spring), background .3s, width .12s; }
.switch .knob svg { width: 24px; height: 24px; }
.switch .knob::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--own); opacity: 0; }
.switch-card:not(.used) .switch .knob::after { animation: ping 1.8s ease-out infinite; }
.switch:hover .knob { transform: translateX(8px); }
.switch[aria-checked="true"] { border-color: var(--exo); background: linear-gradient(180deg, var(--exo-soft), transparent), var(--surface-2); box-shadow: inset 0 2px 8px rgba(0,0,0,.25), 0 0 26px var(--exo-soft); }
.switch[aria-checked="true"] .knob { transform: translateX(72px); background: var(--exo); }
.switch[aria-checked="true"]:hover .knob { transform: translateX(64px); }
.switch:active .knob { width: 60px; }
.sc-status { font-size: .95rem; color: var(--muted); text-align: center; }
.sc-status b { color: var(--fg); }
@media (max-width: 420px) { .sc-lab { font-size: 1.1rem; } .switch { width: 120px; height: 58px; } .switch .knob { width: 46px; height: 46px; } .switch[aria-checked="true"] .knob { transform: translateX(60px); } .switch[aria-checked="true"]:hover .knob { transform: translateX(54px); } }
/* čísla pod hero na celú šírku, oddelené čiarou (vpravo ostáva len úvod a vypínač) */
.facts-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); grid-auto-rows: 1fr; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); animation: rise .7s var(--out) .26s backwards; }
/* dve rovnaké karty: veľké číslo hore, popis pod ním; rovnaká výška v riadku */
.fact-chip { display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 6px; min-width: 0; font: 500 .92rem/1.4 var(--font-body); color: var(--muted); padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.fact-chip b { display: block; color: var(--accent); font: 900 1.7rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }

/* ---------- synapse ---------- */
.syn { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; scroll-margin-top: 72px; }
@media (max-width: 900px) { .syn { grid-template-columns: 1fr; } }
.syn-stage { padding: 10px; display: grid; gap: 8px; }
.syn-stage canvas { width: 100%; height: auto; display: block; aspect-ratio: 600 / 380; border-radius: 8px; }
.syn-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 2px 6px 6px; font: 500 .76rem/1.3 var(--font-mono); color: var(--muted); }
.syn-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.syn-legend i.dia { border-radius: 1px; transform: rotate(45deg) scale(.85); }
.syn-legend i.hex { border-radius: 0; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); width: 12px; height: 12px; }
.guide { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 4px 2px; }
.guide-k { font: 700 .68rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lh); margin-right: 4px; }
.guide button { appearance: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font: 600 .84rem/1 var(--font-body); padding: 7px 11px 7px 7px; border-radius: 20px; cursor: pointer; transition: transform .25s var(--spring), border-color .2s, background .2s; }
.guide button b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--lh); color: #111; font: 700 .72rem/1 var(--font-mono); }
.guide button[aria-pressed="true"] { border-color: var(--lh); background: var(--lh-soft); }
.guide button:active { transform: scale(.93); }
.guide-text { display: grid; gap: 4px; padding: 12px 14px; border-radius: 8px; background: var(--surface-2); border-left: 4px solid var(--lh); min-height: 88px; align-content: start; }
.guide-text b { font: 800 1.15rem/1.1 var(--font-display); text-transform: uppercase; }
.guide-text span { font-size: .92rem; color: var(--muted); }
.syn-read { padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.syn-read .seg { width: 100%; }
.syn-read .seg button { flex: 1 1 auto; }
.syn-title { font: 900 1.85rem/1 var(--font-display); text-transform: uppercase; }
.syn-text { color: var(--muted); font-size: .95rem; min-height: 5.5em; }
.meter { display: grid; gap: 6px; }
.meter .k { display: flex; justify-content: space-between; font: 600 .7rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.meter .k b { color: var(--fg); font-size: .9rem; letter-spacing: 0; }
.bar { height: 10px; border-radius: 5px; background: var(--surface-2); position: relative; overflow: hidden; }
.bar b { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--accent); transition: width .2s linear, background .3s; }
.bar .norm { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--fg); opacity: .5; }
.phase-swap { animation: phaseIn .38s var(--out); }
@keyframes phaseIn { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

/* ---------- timeline ---------- */
.tl { padding: 18px; display: grid; gap: 14px; }
.tl-top { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.tl-top .seg { margin-left: auto; }
.tl svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: ew-resize; }
.tl svg text { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.tl-read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 14px 16px; border-radius: 8px; background: var(--surface-2); min-height: 92px; }
.tl-read .t { font: 600 1.4rem/1 var(--font-mono); color: var(--accent); grid-row: span 2; }
.tl-read b { font: 800 1.2rem/1.1 var(--font-display); text-transform: uppercase; }
.tl-read p { color: var(--muted); font-size: .92rem; }
.beat { transform-box: fill-box; transform-origin: center; animation: beat 1s ease-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.4); } 30% { transform: scale(1); } }
.draw { stroke-dasharray: 1; animation: draw 1s var(--out) backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- tool ---------- */
.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; }
@media (max-width: 900px) { .tool { grid-template-columns: 1fr; } }
.tool-in { padding: 20px; display: grid; gap: 18px; align-content: start; }
.tool-out { padding: 20px; display: grid; gap: 14px; align-content: start; }
.big { font: 900 clamp(3rem, 8vw, 5rem)/.9 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.big small { font-size: .35em; color: var(--muted); margin-left: 6px; }
.zone { padding: 14px 16px; border-radius: 8px; background: var(--surface-2); border-left: 4px solid var(--own); display: grid; gap: 4px; }
.zone.warn { border-color: var(--lh); } .zone.bad { border-color: var(--exo); background: linear-gradient(var(--exo-soft), var(--exo-soft)), var(--surface-2); }
.zone b { font: 800 1.2rem/1.1 var(--font-display); text-transform: uppercase; }
.zone p { font-size: .9rem; color: var(--muted); }
.counter { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.counter span small { display: block; font-size: .74rem; color: var(--muted); }
.counter .n { font: 600 1.2rem/1 var(--font-mono); min-width: 2ch; text-align: center; }
.counter button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font: 700 1.2rem/1 var(--font-body); cursor: pointer; transition: transform .25s var(--spring); }
.counter button:active { transform: scale(.88); }
.scale { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--own), var(--lh) 45%, var(--exo) 75%, #7a0d06); }
.scale i { position: absolute; top: -5px; width: 4px; height: 24px; border-radius: 2px; background: var(--fg); transition: left .35s var(--spring); }
.scale-l { display: flex; justify-content: space-between; font: 500 .7rem/1 var(--font-mono); color: var(--muted); }
.miles { display: grid; gap: 6px; }
.mile { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); opacity: .45; transition: opacity .3s, border-color .3s, background .3s; }
.mile.on { opacity: 1; border-color: var(--own); background: var(--own-soft); }
.mile b { font: 600 .82rem/1.3 var(--font-mono); color: var(--own); }
.mile p { font-size: .9rem; }
.monitor { background: #071014; border-radius: 10px; padding: 10px; border: 1px solid var(--line); }
.monitor canvas { width: 100%; height: auto; display: block; aspect-ratio: 600 / 220; }
.vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vital { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; }
.vital .k { font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vital .v { font: 600 1.35rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.vital .v.bad { color: var(--exo); } .vital .v.warn { color: var(--lh); } .vital .v.ok { color: var(--own); }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.tog { appearance: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: 600 .84rem/1 var(--font-body); padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: transform .25s var(--spring), border-color .2s, color .2s, background .2s; }
.tog[aria-pressed="true"] { color: var(--fg); border-color: var(--exo); background: var(--exo-soft); }
.tog:active { transform: scale(.94); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .92rem; }
.steps li::before { content: counter(st); width: 30px; height: 30px; border-radius: 50%; background: var(--exo); color: #0D1216; display: grid; place-items: center; font: 700 .85rem/1 var(--font-mono); }
.steps li b { display: block; }

/* ---------- body scanner ---------- */
.scan { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .scan { grid-template-columns: 1fr; } }
.body-panel { padding: 18px; display: grid; gap: 14px; justify-items: center; }
.bodysvg { width: 100%; max-width: 280px; height: auto; }
/* silhouette: wide stroke underneath, fill on top, so head + body read as one outline */
.sil-edge { fill: none; stroke: var(--line); stroke-width: 3; stroke-linejoin: round; }
.bodysvg .part { fill: url(#bodyFill); stroke: none; }
.sil-dots { opacity: .13; pointer-events: none; }
.sil-flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 93; opacity: .75; animation: silFlow 7s linear infinite; filter: drop-shadow(0 0 3px var(--accent)); pointer-events: none; }
.sil-flow.b { animation-delay: -3.5s; }
@keyframes silFlow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* idle breathing: the whole figure (hotspots included) rises a hair from the feet */
.fig { transform-box: view-box; transform-origin: 150px 590px; animation: figBreathe 4.2s ease-in-out infinite; }
@keyframes figBreathe { 50% { transform: scale(1.012, 1.006); } }
.pad-glow { fill: var(--accent); opacity: .1; filter: blur(6px); }
.pad-ring { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: .45; }
.pad-spin { stroke-dasharray: 14 10; opacity: .7; animation: padSpin 9s linear infinite; }
@keyframes padSpin { to { stroke-dashoffset: -240; } }
.pad-wave { fill: none; stroke: var(--accent); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: padWave 3s ease-out infinite; }
@keyframes padWave { from { transform: scale(.8); opacity: .8; } to { transform: scale(2); opacity: 0; } }
.scanline { fill: var(--gnrh); opacity: .9; }
.xhair { pointer-events: none; opacity: 0; transition: transform .55s var(--out), opacity .3s; }
.xhair.on { opacity: 1; }
.xhair line { stroke: var(--lh); stroke-width: 1; stroke-dasharray: 2 5; opacity: .35; }
.xh-box { fill: none; stroke: var(--lh); stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: xhSpin 6s linear infinite; }
.xhair.lock .xh-box { animation: xhLock .5s var(--spring), xhSpin 6s linear .5s infinite; }
@keyframes xhSpin { to { transform: rotate(360deg); } }
@keyframes xhLock { from { transform: scale(2.4) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
/* arteries: faint line + a pulse leaving the heart on every idle beat (1.1 s) */
.vessel { fill: none; stroke: var(--exo); stroke-width: 1.3; opacity: .16; stroke-linecap: round; }
.vessel-pulse { fill: none; stroke: var(--exo); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 9 91; animation: vesselPulse 1.1s cubic-bezier(.3, .6, .5, 1) infinite; filter: drop-shadow(0 0 2px var(--exo)); }
@keyframes vesselPulse { 0% { stroke-dashoffset: 9; opacity: .95; } 100% { stroke-dashoffset: -91; opacity: 0; } }
/* pick: a wave runs through the body from the chosen point */
.wave { fill: none; stroke: var(--lh); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.wave.hot { stroke: var(--exo); }
.wave.go { animation: bodyWave 1.1s var(--out); }
@keyframes bodyWave { from { transform: scale(.4); opacity: .8; stroke-width: 6; } to { transform: scale(18); opacity: 0; stroke-width: .4; } }
/* first view: outline draws in, then fill, organs and points pop in */
.bodysvg.pre .sil-edge > * { stroke-dasharray: 100; stroke-dashoffset: 100; }
.bodysvg.pre :is(.sil .part, .sil-dots, .sil-flow, .organs, .vessels, #hotspots, .xhair, #organGlow, .pad, .scanbar) { opacity: 0; }
.bodysvg.boot .sil-edge > * { stroke-dasharray: 100; animation: silDraw 1.2s var(--out) both; }
.bodysvg.boot :is(.sil .part, .sil-dots) { animation: bootFade .7s ease-out .6s both; }
.bodysvg.boot :is(.organs, .vessels, #organGlow, .xhair) { animation: bootFade .6s ease-out 1s both; }
.bodysvg.boot .pad { transform-box: fill-box; transform-origin: center; animation: bootPad .7s var(--spring) .1s both; }
.bodysvg.boot .hs { transform-box: fill-box; transform-origin: center; animation: bootPop .45s var(--spring) both; animation-delay: calc(1.15s + var(--i, 0) * 90ms); }
@keyframes silDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes bootFade { from { opacity: 0; } }
@keyframes bootPad { from { transform: scale(.2); opacity: 0; } }
@keyframes bootPop { from { transform: scale(0); opacity: 0; } }
.bodysvg.idle, .bodysvg.idle * { animation-play-state: paused !important; }
.org[data-org="heart"]:not(.on) { animation: orgBeat var(--hr-s, 1.1s) ease-in-out infinite; }
.org[data-org="lungs"]:not(.on) { animation: orgBreathe 4.2s ease-in-out infinite; }
.org { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: fill .3s, stroke .3s; }
.org-line { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-linecap: round; pointer-events: none; }
.org.on { fill: var(--exo-soft); stroke: var(--exo); stroke-width: 2.2; }
.org.on[data-org="heart"] { animation: orgBeat var(--hr-s, .9s) ease-in-out infinite; }
.org.on[data-org="lungs"] { animation: orgBreathe 3.2s ease-in-out infinite; }
.org.on:not([data-org="heart"]):not([data-org="lungs"]) { animation: orgPulse 1.8s ease-in-out infinite; }
@keyframes orgBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.16); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes orgBreathe { 50% { transform: scale(1.06, 1.1); } }
@keyframes orgPulse { 50% { fill-opacity: .55; stroke-width: 3; } }
.scanbar { pointer-events: none; animation: scanSweep 4.5s linear infinite; }
@keyframes scanSweep { from { transform: translateY(-50px); } to { transform: translateY(600px); } }
.hs { cursor: pointer; }
.hs .ring { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hsPing 2.2s ease-out infinite; }
.hs .hit { fill: transparent; }
.hs .core { fill: var(--accent); stroke: var(--bg); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .3s var(--spring), fill .2s; }
.hs .dot { fill: var(--bg); pointer-events: none; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .3s var(--spring); }
.hs:hover .core { transform: scale(1.3); }
/* touch acknowledgement on a body hotspot: squash on press, spring back */
.hs:active .core { transform: scale(.82); transition-duration: .08s; }
@media (prefers-reduced-motion: reduce) { .hs:active .core { transform: none; } }
.hs.sel .core { fill: var(--lh); } .hs.sel .ring { stroke: var(--lh); } .hs.sel .dot { transform: scale(1); }
.hs:focus { outline: none; } .hs:focus-visible .core { stroke: var(--lh); stroke-width: 4; }
@keyframes hsPing { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
.organ-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.organ-list button { appearance: none; font: 500 .8rem/1 var(--font-body); padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: transform .25s var(--spring); }
.organ-list button[aria-pressed="true"] { color: var(--fg); border-color: var(--lh); background: var(--lh-soft); }
.organ-list button:active { transform: scale(.94); }
.detail { padding: 24px; display: grid; gap: 14px; align-content: start; }
.detail h3 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900; }
.detail-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
.sev { display: flex; gap: 4px; align-items: center; font: 600 .7rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sev i { width: 22px; height: 8px; border-radius: 2px; background: var(--line); transform-origin: left center; }
.sev i.on { background: var(--exo); }
.rev { font: 700 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 6px; justify-self: start; }
.rev.r0 { color: var(--exo-ink); background: var(--exo-soft); } .rev.r1 { color: var(--lh-ink); background: var(--lh-soft); } .rev.r2 { color: var(--own); background: var(--own-soft); }
.detail .lead { font-size: 1.1rem; font-weight: 500; max-width: 60ch; }
.detail ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 64ch; }
.detail li { padding-left: 22px; position: relative; color: var(--muted); }
.detail li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--exo); }
.detail li strong { color: var(--fg); font-weight: 600; }
.src-line { font: 400 .76rem/1.4 var(--font-mono); color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.detail.enter > * { animation: rise .42s var(--out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.detail.enter li { animation: rise .42s var(--out) backwards; animation-delay: calc(140ms + var(--i, 0) * 55ms); }

/* ---------- roulette ---------- */
.roul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
@media (max-width: 900px) { .roul { grid-template-columns: 1fr; } }
.drum-panel { padding: 20px; display: grid; gap: 16px; justify-items: center; align-content: start; }
.drums { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.drum { margin: 0; display: grid; gap: 8px; justify-items: center; }
.drum figcaption { font: 700 .72rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.drum figcaption b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); color: var(--bg); margin-right: 6px; font-size: .7rem; }
.drum svg { width: 100%; max-width: 220px; height: auto; overflow: visible; }
.drum .rot { transform-box: view-box; transform-origin: 110px 120px; }
/* valec revolvera (engine.js build): oceľ, drážky, vŕtané komory, náboje podľa závažnosti */
.drum svg.rv { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.drum .cyl { stroke: #0a0e12; stroke-width: 2; }
.drum .flute { fill: var(--surface); stroke: #0a0e12; stroke-width: 1.5; }
.drum .bore { stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.drum .ch { stroke-width: 2.5; transition: opacity .35s, filter .35s; }
.drum .ch.s1 { fill: var(--own); stroke: #9af3e8; color: var(--own); }
.drum .ch.s2 { fill: var(--lh); stroke: #ffd98a; color: var(--lh); }
.drum .ch.s3 { fill: var(--exo); stroke: #ffaaa1; color: var(--exo); }
.drum .primer { fill: none; stroke: rgba(0, 0, 0, .28); stroke-width: 2; pointer-events: none; }
/* význam nielen farbou: obrys náboja je čistý, závažnosť nesie vnútorný krúžok (ako v zozname: plný / čiarkovaný / hrubý) */
.drum svg.rv .ch:not(.hit) { stroke-dasharray: none; stroke-width: 2.5; }
.drum svg.rv .ch.s1:not(.hit) { stroke: #9af3e8; } .drum svg.rv .ch.s2:not(.hit) { stroke: #ffd98a; } .drum svg.rv .ch.s3:not(.hit) { stroke: #ffaaa1; }
.drum .cg.s2 .primer { stroke-dasharray: 3.5 3; stroke: rgba(0, 0, 0, .45); }
.drum .cg.s3 .primer { stroke-width: 3.5; stroke: rgba(0, 0, 0, .45); }
.drum .chn { font: 800 14px var(--font-mono); fill: #0D1216; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.drum .ratchet { fill: #56626d; stroke: #0a0e12; stroke-width: 1.5; stroke-linejoin: round; }
.drum .pin { fill: #9aa6b0; stroke: #0a0e12; stroke-width: 1.5; }
.drum .glare { pointer-events: none; }
.drum .hm { fill: #2c3640; stroke: var(--exo); stroke-width: 2; stroke-linejoin: round; }
.drum .aim { fill: none; stroke: var(--exo); stroke-width: 2; stroke-dasharray: 3 6; opacity: .4; transition: opacity .3s; }
.drum .cg { transition: opacity .4s; }
.drum svg.landed .cg:not(.hit) { opacity: .3; }
.drum svg.landed .cg.hit .ch { filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 2px currentColor); }
.drum svg.landed .aim { opacity: 1; stroke-dasharray: none; animation: aimLock .5s ease-out 2; }
@keyframes aimLock { from { stroke-width: 10; stroke-opacity: .15; } to { stroke-width: 2; stroke-opacity: 1; } }
.drum-res { min-height: 2.6em; margin: 0; max-width: 200px; text-align: center; font: 800 .82rem/1.25 var(--font-body); color: var(--muted); display: grid; place-items: center; }
.drum-res.on { animation: verdictIn .4s var(--spring); }
.drum-res.s1 { color: var(--own); } .drum-res.s2 { color: var(--lh-ink); } .drum-res.s3 { color: var(--exo-ink); }
@media (prefers-reduced-motion: reduce) { .drum svg.landed .aim, .drum-res.on { animation: none; } }
.spins { font: 500 .8rem/1.4 var(--font-mono); color: var(--muted); text-align: center; }
.roul-out { padding: 20px; display: grid; gap: 18px; align-content: start; }
.verdict { padding: 16px; border-radius: 10px; background: var(--surface-2); display: grid; gap: 8px; min-height: 110px; align-content: start; border: 1px solid transparent; }
.verdict.bad { border-color: var(--exo); background: linear-gradient(var(--exo-soft), var(--exo-soft)), var(--surface-2); }
.verdict.mid { border-color: var(--lh); }
.verdict .v-pair { font: 900 1.45rem/1.05 var(--font-display); text-transform: uppercase; }
.verdict .v-pair i { font-style: normal; color: var(--muted); padding: 0 6px; }
.verdict .v-end { font-size: .92rem; color: var(--muted); }
.verdict.in { animation: verdictIn .45s var(--spring); }
@keyframes verdictIn { from { transform: translateY(8px) scale(.97); opacity: .4; } }
.outs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .outs { grid-template-columns: 1fr; } }
.outs .eyebrow { margin-bottom: 8px; }
.outlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: ch; }
.outlist li { counter-increment: ch; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); transition: opacity .25s, background .25s; }
.outlist li::before { content: counter(ch); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem/1 var(--font-mono); }
.outlist li.s1::before { background: var(--own-soft); color: var(--own); } .outlist li.s2::before { background: var(--lh-soft); color: var(--lh-ink); } .outlist li.s3::before { background: var(--exo-soft); color: var(--exo-ink); }
.outlist li b { font-weight: 600; font-size: .9rem; }
.outlist li span { font-size: .8rem; color: var(--muted); grid-column: 2; display: none; }
.outlist.done li { opacity: .5; }
.outlist li.hit { opacity: 1; border-color: var(--fg); background: var(--surface-2); }
.outlist li.hit span { display: block; }

/* ---------- myths ---------- */
.myths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; perspective: 1400px; }
@media (max-width: 920px) { .myths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .myths { grid-template-columns: 1fr; } }
.myth { appearance: none; text-align: left; cursor: pointer; color: var(--fg); font: inherit; padding: 20px; display: grid; gap: 12px; align-content: start; min-height: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; transition: transform .32s var(--spring), border-color .2s, box-shadow .2s; }
.myth:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.myth .tag { font: 700 .68rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.myth .q { font: 800 1.5rem/1.02 var(--font-display); text-transform: uppercase; }
.myth .a { color: var(--fg); font-size: .95rem; display: none; }
.myth .stamp { position: absolute; top: 14px; right: 14px; font: 900 1.05rem/1 var(--font-display); text-transform: uppercase; color: var(--exo); border: 2px solid var(--exo); padding: 4px 8px; border-radius: 4px; transform: rotate(-7deg); opacity: 0; }
.myth[aria-expanded="true"] { border-color: var(--own); background: linear-gradient(var(--own-soft), var(--own-soft)), var(--surface); }
.myth[aria-expanded="true"] .q { text-decoration: line-through; text-decoration-color: var(--exo); text-decoration-thickness: 3px; color: var(--muted); font-size: 1.15rem; }
.myth[aria-expanded="true"] .a { display: block; }
.myth[aria-expanded="true"] .tag span:first-child { color: var(--own); }
.myth[aria-expanded="true"] .tag span:last-child { visibility: hidden; }
.myth[aria-expanded="true"] .stamp { opacity: .95; animation: slam .46s var(--spring) .12s both; }
@keyframes slam { 0% { transform: scale(2.6) rotate(-10deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotate(-7deg); opacity: .95; } }

/* ---------- help + sources ---------- */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.help { padding: 24px; display: grid; gap: 12px; align-content: start; }
.help .line { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); align-items: center; }
.help .num { font: 600 1.2rem/1.2 var(--font-mono); user-select: all; }
.help .line span { color: var(--muted); font-size: .9rem; }
.help.sos { border-color: var(--exo); }
.help.sos h3 { color: var(--exo); }
.src-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .src-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .src-grid { grid-template-columns: 1fr; } }
.src-card { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--fg); transition: transform .3s var(--spring), border-color .2s; }
.src-card:hover { transform: translateY(-2px); border-color: var(--muted); }
.src-card b { font: 800 1.15rem/1.05 var(--font-display); text-transform: uppercase; }
.src-card p { font-size: .86rem; color: var(--muted); }
.src-card small { font: 500 .7rem/1.35 var(--font-mono); color: var(--muted); }
.src-tag { font: 700 .64rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gnrh); }
.src-go { font: 600 .8rem/1 var(--font-body); margin-top: 4px; }

footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: .85rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ---------- hub ---------- */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cards { grid-template-columns: 1fr; } }
.dcard { position: relative; display: grid; gap: 10px; align-content: start; padding: 20px; min-height: 210px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--fg); overflow: hidden; transition: transform .35s var(--spring), border-color .2s, box-shadow .2s; }
.dcard.wide { grid-column: 1 / -1; min-height: 0; grid-template-columns: auto 1fr auto; grid-template-areas: "sw nm go" "sw p go"; align-items: center; column-gap: 18px; }
.dcard.wide .sw { grid-area: sw; align-self: center; }
.dcard.wide .nm { grid-area: nm; font-size: 1.7rem; }
.dcard.wide p { grid-area: p; }
.dcard.wide .go { grid-area: go; margin-top: 0; }
@media (max-width: 1000px) { .dcard.wide { grid-template-columns: 1fr; grid-template-areas: "sw" "nm" "p" "go"; } }
.dcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--exo)); }
.dcard:hover { transform: translateY(-4px); border-color: var(--c, var(--exo)); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.dcard:active { transform: scale(.97); }
.dcard .nm { font: 900 2.2rem/.9 var(--font-display); text-transform: uppercase; }
.dcard .sw { font: 700 .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c, var(--exo)); }
.dcard p { font-size: .9rem; color: var(--muted); }
.dcard .go { margin-top: auto; font: 600 .85rem/1 var(--font-body); }
.harm { padding: 20px; display: grid; gap: 12px; }
.hbar { display: grid; grid-template-columns: minmax(96px, 210px) minmax(0, 1fr) 40px; gap: 12px; align-items: center; text-decoration: none; color: var(--fg); padding: 3px 0; border-radius: 6px; }
.hbar:hover .hb-name { color: var(--exo); }
.hb-name { font-weight: 600; font-size: .9rem; }
@media (min-width: 640px) { .hb-name { white-space: nowrap; } }
.hb-track { height: 18px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.hb-track i { display: block; height: 100%; border-radius: 4px; background: var(--exo); width: 0; transition: width .9s var(--out); }
.hb-track i.oth { background: var(--lh); }
.hb-val { font: 600 .9rem/1 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.hbar.here .hb-name::after { content: " ↗"; color: var(--muted); }

/* ---------- fx ---------- */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 59; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, var(--exo) 150%); }
#vignette.amber { background: radial-gradient(ellipse at center, transparent 45%, var(--lh) 150%); }
#vignette.green { background: radial-gradient(ellipse at center, transparent 50%, var(--own) 170%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .draw { stroke-dasharray: none; }
}

/* ---------- resist: refusal techniques, group pressure, trainer ---------- */
.rs-h { margin-bottom: 14px; }
.techs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 1000px) { .techs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .techs { grid-template-columns: 1fr; } }
.tech { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); position: relative; }
.tech-n { font: 600 .72rem/1 var(--font-mono); color: var(--own); letter-spacing: .1em; }
.tech b { font: 800 1.35rem/1 var(--font-display); text-transform: uppercase; }
.tech p { font-size: .9rem; color: var(--muted); }
.tech q { quotes: none; display: block; margin-top: 2px; padding: 8px 10px; border-left: 3px solid var(--own); background: var(--own-soft); border-radius: 0 6px 6px 0; font-weight: 600; font-size: .92rem; }
.tips li::before { background: var(--own); color: #0D1216; }
.tips li span { color: var(--muted); }
.tips li b { color: var(--fg); }
.trainer { padding: 24px; display: grid; gap: 12px; align-content: start; align-self: start; border-color: var(--own); }
.tr-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-dots { display: flex; gap: 5px; }
.tr-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); }
.tr-dots i.done { background: var(--own); border-color: var(--own); }
.tr-dots i.now { background: var(--lh); border-color: var(--lh); }
.tr-sit { font-size: 1rem; }
.tr-say { font: 800 1.6rem/1.05 var(--font-display); text-transform: uppercase; color: var(--lh); }
.tr-opts { display: grid; gap: 8px; }
.tr-opt { appearance: none; text-align: left; cursor: pointer; font: 500 .94rem/1.4 var(--font-body); color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; transition: transform .3s var(--spring), border-color .2s, opacity .2s; }
.tr-opt:hover:not(:disabled) { border-color: var(--muted); transform: translateY(-1px); }
.tr-opt:disabled { cursor: default; opacity: .5; }
.tr-opt.picked { opacity: 1; }
.tr-opt.ok { border-color: var(--own); background: var(--own-soft); }
.tr-opt.warn { border-color: var(--lh); background: var(--lh-soft); }
.tr-opt.bad { border-color: var(--exo); background: var(--exo-soft); }
.tr-fb { display: grid; gap: 10px; animation: rise .4s var(--out) backwards; }
.tr-fb .btn { justify-self: start; }
.rs-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (max-width: 860px) { .rs-side { order: -1; } }
.tr-opt.hint { opacity: 1; border-style: dashed; border-color: var(--own); }
.tr-alt { font-size: .92rem; color: var(--muted); }
.tr-alt b { color: var(--own); }
.tr-tech { justify-self: start; font: 600 .78rem/1.2 var(--font-mono); letter-spacing: .04em; color: var(--own); text-decoration: none; border-bottom: 1px dashed currentColor; }
.tr-tech:hover { border-bottom-style: solid; }
.tech:focus { outline: none; }
.tech.flash, .pl-card.flash { animation: techFlash 1.1s var(--out); }
@keyframes techFlash { 0% { box-shadow: 0 0 0 0 var(--own); border-color: var(--own); } 40% { box-shadow: 0 0 0 6px var(--own-soft); border-color: var(--own); } }
.plan { padding: 24px; display: grid; gap: 14px; align-content: start; }
.pl-lab, .plan label { font-weight: 600; font-size: .92rem; }
.plan label small { font: 500 .72rem/1 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-left: 6px; }
.plan .chip { cursor: pointer; font-family: var(--font-body); transition: transform .3s var(--spring), border-color .2s, background .2s; }
.plan .chip:hover { border-color: var(--muted); }
.plan .chip:active { transform: scale(.94); }
.pl-where .chip[aria-pressed="true"] { border-color: var(--own); background: var(--own-soft); }
.pl-sugg .chip { font-size: .74rem; color: var(--muted); }
.plan textarea, .plan input[type="text"] { width: 100%; font: 500 .95rem/1.4 var(--font-body); color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; }
.plan textarea:focus, .plan input[type="text"]:focus { outline: 2px solid var(--own); outline-offset: 1px; border-color: transparent; }
.pl-card { padding: 14px 16px; border-radius: 8px; border: 1px solid var(--own); background: var(--own-soft); display: grid; gap: 6px; }
.pl-card p { font-weight: 600; overflow-wrap: anywhere; }
.pl-tag { font: 700 .66rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--own); }
.pl-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rs-tips { align-self: start; }

/* resist: result recap, refusal myths, friend panel */
.tr-recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tr-recap li { display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); font-size: .9rem; }
.tr-recap li.ok { border-color: color-mix(in srgb, var(--own) 45%, var(--line)); }
.tr-recap li.bad { border-color: color-mix(in srgb, var(--exo) 45%, var(--line)); }
.tr-recap li.warn { border-color: color-mix(in srgb, var(--lh) 45%, var(--line)); }
.tr-recap .pill { padding: 5px 8px; font-size: .62rem; }
.rs-sub { margin-top: 36px; }
.friend { margin-top: 18px; border-color: var(--gnrh); }
.friend .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; }
@media (max-width: 760px) { .friend .tips { grid-template-columns: minmax(0, 1fr); } }
.friend .tips li::before { background: var(--gnrh); }

/* hub: combinations + more substances */
.combos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 920px) { .combos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .combos { grid-template-columns: 1fr; } }
.combo { display: grid; gap: 8px; align-content: start; padding: 18px; }
.combo b { font: 800 1.15rem/1.15 var(--font-display); text-transform: uppercase; }
.combo p { font-size: .9rem; color: var(--muted); }
.minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1080px) { .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .minis { grid-template-columns: 1fr; } }
.mini { position: relative; display: grid; gap: 10px; align-content: start; padding: 20px; overflow: hidden; }
.mini::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--exo)); }
.mini .sw { font: 700 .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c, var(--exo)); }
.mini h3 { font: 900 1.9rem/.95 var(--font-display); text-transform: uppercase; }
.mini ul { display: grid; gap: 8px; padding-left: 18px; font-size: .9rem; color: var(--muted); }
.mini-sos { font-size: .88rem; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--exo); }

/* per-drug takeaways + hub glossary */
.take { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: take; }
@media (max-width: 920px) { .take { grid-template-columns: 1fr; } }
.take li { counter-increment: take; display: grid; gap: 8px; align-content: start; padding: 20px 20px 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; }
.take li::before { content: counter(take); position: absolute; right: 14px; top: 6px; font: 900 3.6rem/1 var(--font-display); color: var(--c, var(--exo)); opacity: .18; }
.take li::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c, var(--exo)); }
.take b { font: 800 1.3rem/1.08 var(--font-display); text-transform: uppercase; padding-right: 44px; }
.take span { font-size: .93rem; color: var(--muted); }
.terms { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .terms { grid-template-columns: 1fr; } }
.term { padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.term dt { font: 800 1.15rem/1.1 var(--font-display); text-transform: uppercase; }
.term dd { margin: 0; font-size: .9rem; color: var(--muted); }

/* header call-to-action (pages with a poster or similar) and grouped source headings */
.top .top-cta { margin-left: 12px; background: var(--exo); border-color: var(--exo); color: #0D1216; white-space: nowrap; }
.top .top-cta:hover { filter: brightness(1.08); }
.top.fold .top-cta { margin-left: 0; }
.src-grid .src-h { grid-column: 1 / -1; font-size: 1.5rem; margin: 18px 0 2px; }
.src-grid .src-h:first-child { margin-top: 0; }

/* hub: banner pre rodičov pod kartami drog; pätička s dvoma tlačidlami */
.parents-cta { margin-top: 14px; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; text-decoration: none; color: var(--fg); border-left: 4px solid var(--gnrh); transition: transform .35s var(--spring), border-color .2s; }
.parents-cta:hover { transform: translateY(-2px); border-color: var(--gnrh); }
.parents-cta .eyebrow { color: var(--gnrh); grid-column: 1; }
.parents-cta b { font: 900 1.7rem/1 var(--font-display); text-transform: uppercase; grid-column: 1; }
.parents-cta .pc-p { color: var(--muted); font-size: .92rem; grid-column: 1; }
.parents-cta .btn { grid-column: 2; grid-row: 1 / span 3; }
@media (max-width: 600px) { .parents-cta { grid-template-columns: minmax(0, 1fr); } .parents-cta .btn { grid-column: 1; grid-row: auto; justify-self: start; } }
.foot-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- prístupnosť: význam nikdy len farbou (WCAG 1.4.1), stavy majú aj tvar, vzor alebo znak ---------- */
:is(.bar, .lv, .metric .bar) [data-fill="bad"], [data-fill="bad"] { background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0) 0 5px, rgba(0, 0, 0, .32) 5px 8px); }
:is(.bar, .lv, .metric .bar) [data-fill="warn"], [data-fill="warn"] { background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 7px, rgba(0, 0, 0, .3) 7px 9px); }
.pill.ok::before { content: "✓ "; } .pill.warn::before { content: "! "; } .pill.bad::before { content: "✕ "; }
.rev.r0::before { content: "✕ "; } .rev.r1::before { content: "~ "; } .rev.r2::before { content: "✓ "; }
.vital .v.bad::after { content: " !"; } .vital .v.warn::after { content: " ~"; }
.zone.bad b::before { content: "⚠ "; } .zone.warn { border-left-style: dashed; }
.drum .ch.s1:not(.hit) { stroke: var(--own); } .drum .ch.s2:not(.hit) { stroke: var(--lh); stroke-dasharray: 5 3; } .drum .ch.s3:not(.hit) { stroke: var(--exo); stroke-width: 3; }
.outlist li.s1::before { border: 2px solid var(--own); } .outlist li.s2::before { border: 2px dashed var(--lh); } .outlist li.s3::before { border: 2px solid var(--exo); }
.sev i.on { background-image: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)); }

/* ---------- tlač plagátu (posterCta v engine.js, plagat-droga.html) ---------- */
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.ghost { background: transparent; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-self: start; }
.poster-cta { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.poster-cta .btn { border-color: var(--c, var(--exo)); }
.poster-cta span { font-size: .9rem; color: var(--muted); }