/* IBM 370 v plánovací komisi. Dva světy: tabelační papír (text) a obrazovka (vše „v počítači“). */
@font-face { font-family: "IBM3270"; src: url(../fonts/3270-Regular.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Plex Sans"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
@font-face { font-family: "Plex Sans"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20CF; }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20CF; }
@font-face { font-family: "Plex Sans"; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
@font-face { font-family: "Plex Sans"; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20CF; }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-024F; }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-024F; }

:root {
  --paper: #f4f1e8;
  --bar: #dcebd9;
  --ink: #1d2a24;
  --ink-soft: #52605a;
  --rule: #c9cfc4;
  --red: #c8322a;
  --phosphor: #33ff66;
  --phosphor-hi: #b8ffd0;
  --phosphor-dim: #1c8f3d;
  --glass: #041008;
  --beige: #d8d0bd;
  --beige-dark: #a79d86;
  --cabinet: #3a4a5c;
  --cabinet-hi: #5d7289;
  --floor: #9aa09a;
  --hole: #e4dfd0;
  --bar-page: #eef0e5;   /* pruh papíru na pozadí: jen náznak, ať neruší text */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 18px/1.6 "Plex Sans", system-ui, sans-serif;
}
a { color: inherit; text-decoration-color: var(--red); text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- obrazovka (kapitola 0 a 12) ---------- */
.screen-world {
  background: radial-gradient(ellipse at center, #07170c 0%, var(--glass) 65%, #000 100%);
  color: var(--phosphor); position: relative; overflow: hidden;
}
.screen-world::before { /* řádkování */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.3) 0 1px, transparent 1px 3px);
}
.glow { font-family: "IBM3270", monospace; text-shadow: 0 0 2px rgba(51,255,102,.9), 0 0 8px rgba(51,255,102,.35); }

#vstup { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 72px 16px 48px; }
#vstup .inner { width: min(760px, 100%); position: relative; }
#vstup pre {
  margin: 0 0 28px; font-size: clamp(20px, 4.6vw, 38px); line-height: 1.25; white-space: pre-wrap; min-height: 5.2em;
}
#vstup pre .cur { display: inline-block; width: .6em; border-bottom: .12em solid currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.choices { display: flex; flex-wrap: wrap; gap: 14px; }
.choices button {
  font: 26px/1 "IBM3270", monospace; color: var(--phosphor); background: transparent; cursor: pointer;
  border: 0; padding: 10px 6px; text-shadow: inherit; letter-spacing: .02em;
}
.choices button:hover, .choices button:focus-visible { background: var(--phosphor); color: #041008; text-shadow: none; outline: none; }
#vstup .about { font: 16px/1.55 "Plex Sans", sans-serif; color: #9fd8ae; max-width: 560px; margin: 30px 0 0; text-shadow: none; }
.back {
  position: absolute; top: 16px; left: 16px; z-index: 2; font: 500 14px "Plex Mono", monospace;
  color: #9fd8ae; text-decoration: none; border: 1px solid #2d6b3f; padding: 6px 10px; border-radius: 3px;
}
.back:hover { background: #0d2615; }

/* přepínač zvuku, vždy po ruce */
.soundbtn {
  position: fixed; right: 12px; top: 12px; z-index: 30;
  font: 500 13px "Plex Mono", monospace; letter-spacing: .04em;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 3px; padding: 8px 11px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.soundbtn[aria-pressed="true"] { background: var(--phosphor-dim); }

/* ---------- papír ---------- */
.paper {
  background:
    repeating-linear-gradient(to bottom, var(--bar-page) 0 3.2em, transparent 3.2em 6.4em),
    var(--paper);
  position: relative;
}
/* perforace po stranách tabelačního papíru */
.paper::before, .paper::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none;
  background: radial-gradient(circle at 17px 14px, var(--hole) 0 6px, #cfc8b4 6.5px, transparent 7.5px) 0 0 / 34px 28px repeat-y;
  border-right: 1px dashed var(--rule);
}
.paper::before { left: 0; }
.paper::after { right: 0; border-right: 0; border-left: 1px dashed var(--rule); }
@media (max-width: 700px) { .paper::before, .paper::after { display: none; } }

.chapter { padding: 64px 50px 56px; border-bottom: 1px dashed var(--rule); }
@media (max-width: 700px) { .chapter { padding: 48px 16px 40px; } }
.chapter > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.chapter > .wide { max-width: 1040px; }

.kicker {
  font: 500 13px/1.3 "Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; gap: 10px; align-items: center;
}
.kicker::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.kicker b { color: var(--red); font-weight: 500; }
h2 { font-size: clamp(28px, 4.6vw, 42px); line-height: 1.12; margin: 10px auto 18px; letter-spacing: -.01em; }
h3 { font-size: 20px; margin: 30px auto 8px; }
p { margin: 0 auto 1em; }
.lead { font-size: 20px; }

figure { margin: 28px auto; }
figure img { border: 1px solid #b9b4a4; background: #fff; }
figcaption { font: 13px/1.45 "Plex Mono", monospace; color: var(--ink-soft); margin-top: 8px; }
figcaption .credit { display: block; color: #7a8580; }
.figs { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; margin: 28px auto; }
.figs figure { margin: 0; }

blockquote {
  margin: 24px auto; padding: 14px 18px; background: #fffdf6; border: 1px solid var(--rule); border-left: 4px solid var(--ink);
  font: 16px/1.55 "Plex Mono", monospace;
}
blockquote footer { font: 13px "Plex Sans", sans-serif; color: var(--ink-soft); margin-top: 6px; }

/* poctivost: co nevíme, co je rekonstrukce, co je odjinud */
.nevime, .odjinud, .rekonstrukce {
  font-size: 16px; padding: 10px 14px 10px 44px; position: relative; margin: 20px auto; background: #fffdf6;
  border: 1px solid var(--rule);
}
.nevime::before, .odjinud::before, .rekonstrukce::before {
  position: absolute; left: 12px; top: 9px; font: 700 18px "Plex Mono", monospace;
}
.nevime { border-left: 4px solid var(--red); }
.nevime::before { content: "?"; color: var(--red); }
.odjinud { border-left: 4px solid #7a8a9c; }
.odjinud::before { content: "↗"; color: #7a8a9c; }
.rekonstrukce { border-left: 4px solid var(--phosphor-dim); }
.rekonstrukce::before { content: "≈"; color: var(--phosphor-dim); }

/* karta dokladu / pamětnice */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 26px auto; }
.card {
  background: #fffdf6; border: 1px solid #b9b4a4; padding: 16px 18px; box-shadow: 3px 3px 0 #ddd6c2;
  font-size: 16px;
}
.card .tag { font: 500 12px "Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.card h4 { margin: 4px 0 8px; font-size: 18px; }
.card p { margin: 0 0 .6em; }

/* čísla */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 26px auto; }
.fact { border-top: 3px solid var(--ink); padding-top: 8px; }
.fact b { display: block; font: 700 34px/1.1 "Plex Sans", sans-serif; }
.fact span { font-size: 14px; color: var(--ink-soft); }

/* tečkové grafy */
.dots { display: flex; flex-wrap: wrap; gap: 3px; margin: 18px auto 8px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #c3c8bd; }
.dots i.west { background: #8fa39a; }
.dots i.ibm { background: var(--ink); }
.dots i.s370 { background: var(--red); }
.dots i.ec { background: #7a8a9c; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 13px "Plex Mono", monospace; color: var(--ink-soft); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* tabulka disků */
table { border-collapse: collapse; width: 100%; font-size: 16px; margin: 20px auto; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 500 12px "Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
td.num { font-family: "Plex Mono", monospace; white-space: nowrap; }
.tablewrap { overflow-x: auto; }

/* slovníček */
dl.slova { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 20px auto; }
dl.slova div { background: #fffdf6; border: 1px solid var(--rule); padding: 10px 12px; }
dl.slova dt { font: 600 17px "Plex Mono", monospace; }
dl.slova dd { margin: 4px 0 0; font-size: 15px; color: var(--ink-soft); }

/* co se teprve dodělá (kostra: jen pro kontrolu, před spuštěním pryč) */
.todo {
  border: 2px dashed #b6a86f; background: repeating-linear-gradient(135deg, #fbf6df 0 12px, #f6efcf 12px 24px);
  padding: 12px 16px; margin: 24px auto; font-size: 15px; color: #5b5226;
}
.todo::before { content: "PŘIPRAVUJE SE · "; font: 600 12px "Plex Mono", monospace; letter-spacing: .06em; }

details.zdroje { margin-top: 30px; font-size: 14px; color: var(--ink-soft); }
details.zdroje summary { cursor: pointer; font: 500 13px "Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
details.zdroje ul { padding-left: 20px; margin: 8px 0 0; }
details.zdroje li { margin: 4px 0; }

/* kapitola 10: prototyp potřebuje širší plochu */
#zkuste > .wide { max-width: 1120px; }

/* flash */
#flash { padding: 90px 16px; }
#flash > * { max-width: 760px; margin-left: auto; margin-right: auto; position: relative; }
#flash .kicker { color: #6fbf85; }
#flash .kicker::after { border-color: #1f5a31; }
#flash h2 { color: var(--phosphor-hi); }
#flash p { color: #bfe9cb; }
#flash .todo { color: #3d3712; }
#flash .final { font-size: clamp(20px, 3.6vw, 30px); line-height: 1.35; margin: 40px auto 0; color: var(--phosphor); }

footer.paticka { text-align: center; padding: 36px 16px 60px; font-size: 15px; }
footer.paticka a { font-family: "Plex Mono", monospace; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ve skupině fotek stejné dlaždice, ať se na výšku focené nenatahují přes půl stránky */
.figs img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ---------- kapitola 8: disky ---------- */
.scrolly { height: 420vh; position: relative; margin: 20px auto 36px; }
.scrolly .platno {
  position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: 1fr auto;
  background: var(--card, #fffdf6); border: 1px solid var(--rule);
}
.scrolly canvas { width: 100%; height: 100%; min-height: 0; display: block; }
.scrolly .caps { position: relative; min-height: 5.2em; border-top: 1px dashed var(--rule); }
.scrolly .cap {
  position: absolute; inset: 0; margin: 0; padding: 12px 16px; font-size: 17px;
  opacity: 0; transition: opacity .25s;
}
.scrolly .cap.on { opacity: 1; }
/* bez pohybu: jen závěrečný obrázek a všechny popisky pod sebou */
.scrolly.static { height: auto; }
.scrolly.static .platno { position: static; height: auto; }
.scrolly.static canvas { height: 70vh; }
.scrolly.static .cap { position: static; opacity: 1; padding: 4px 16px; }

.telefon { margin: 16px auto 28px; }
.telefon .volba { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.telefon .volba button {
  font: 600 16px "Plex Mono", monospace; padding: 10px 16px; cursor: pointer; border-radius: 3px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
}
.telefon .volba button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.telefon canvas { width: 100%; height: 340px; display: block; background: #fffdf6; border: 1px solid var(--rule); border-bottom: 3px solid var(--ink); }
@media (max-width: 700px) { .telefon canvas { height: 280px; } }
.telefon .vysledek { font-size: 18px; margin: 12px 0 4px; }
.telefon .pozn { font-size: 14px; color: var(--ink-soft); }

/* ---------- kapitola 9: den na sále a štítek ---------- */
.scrolly-den .noc {
  position: absolute; top: 12px; right: 12px; font: 600 14px "Plex Mono", monospace; padding: 8px 12px; cursor: pointer;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 3px;
}
.scrolly-den .noc[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 700px) { .scrolly-den .noc { top: 56px; } }
.scrolly-den { height: 520vh; }
.scrolly-den.static .noc { position: static; margin: 8px 16px; justify-self: start; }

.stitek { margin: 16px auto 28px; }
.stitek label { display: block; font-size: 15px; color: var(--ink-soft); margin-bottom: 6px; }
.stitek input {
  width: 100%; font: 500 20px "Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 12px; border: 2px solid var(--ink); background: #fffdf6; color: var(--ink); border-radius: 3px;
}
.stitek .karta { margin: 14px 0 8px; overflow-x: auto; }
.stitek canvas { width: 100%; min-width: 560px; height: auto; display: block; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.18)); }
.stitek .pozn { font-size: 14px; color: var(--ink-soft); }
.stitek .stahnout {
  display: inline-block; margin-left: 6px; font: 600 14px "Plex Sans", sans-serif; padding: 6px 10px; cursor: pointer;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 3px;
}

/* ---------- kapitola 4: mapa a tečky po krocích ---------- */
.scrolly-mapa { height: 460vh; }
.scrolly-mapa .platno { overflow: hidden; }
.mapa { width: 100%; height: 100%; min-height: 0; display: block; }
.mapa .more { fill: #f4f1e8; }
.mapa .zem { fill: #e4e0d2; stroke: #b9b4a4; stroke-width: 1; }
.mapa .vychod { fill: #d3d8cd; stroke: #b9b4a4; stroke-width: 1; }
.mapa .cssr { fill: #c2d3bf; stroke: var(--ink); stroke-width: 1.5; }
.mapa .opona { fill: none; stroke: var(--red); stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mapa text { font: 500 20px "Plex Mono", monospace; fill: var(--ink); }
.mapa .lbl-opona { fill: var(--red); font-size: 22px; letter-spacing: .12em; opacity: 0; }
.mapa .lbl-blok, .mapa .lbl-zapad { fill: var(--ink-soft); font-size: 22px; letter-spacing: .2em; opacity: 0; }
.mapa .trasa { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0; }
.mapa .mesto { opacity: 0; }
.mapa .mesto circle { fill: var(--ink); stroke: #fffdf6; stroke-width: 1.5; r: 4.5px; }
.mapa .mesto text { font-size: 13px; font-weight: 500; paint-order: stroke; stroke: #f4f1e8; stroke-width: 3px; }
.mapa .cocom { opacity: 0; transition: opacity .3s; }
.mapa .cocom rect { fill: #fffdf6; stroke: var(--red); stroke-width: 3; }
.mapa .cocom text { fill: var(--red); font-size: 20px; font-weight: 500; text-anchor: middle; letter-spacing: .15em; }
.mapa .bedna { opacity: 0; }
.mapa .bedna .box { fill: #b08a55; stroke: #5d4526; stroke-width: 2.5; }
.mapa .bedna .ibm { fill: #fffdf6; font-size: 22px; font-weight: 500; text-anchor: middle; letter-spacing: .2em; }
.mapa .chip rect { fill: #fffdf6; stroke: var(--ink); stroke-width: 1.5; }
.mapa .chip text { font-size: 12px; text-anchor: middle; }
.mapa .chip.oriznuto rect { stroke: var(--red); }
.mapa .chip.oriznuto text { fill: var(--red); }
.scrolly-mapa.static .platno > svg { height: auto; }

.dots.krokovane i { transition: opacity .6s, background-color .6s; background: var(--ink); }
.dots.krokovane[data-krok="1"] i.east,
.dots.krokovane[data-krok="2"] i:is(.east, .west),
.dots.krokovane[data-krok="3"] i:is(.east, .west, .ibm) { opacity: .16; }
.dots.krokovane[data-krok="3"] i.s370 { background: var(--red); }
.krok-popis { font-size: 18px; margin: 6px auto 18px; min-height: 1.6em; }
.krok-popis b { font-size: 28px; margin-right: 4px; }
.krok-popis .znovu {
  margin-left: 8px; font: 600 13px "Plex Mono", monospace; padding: 4px 10px; cursor: pointer; vertical-align: 3px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 3px;
}

/* ---------- kapitola 7: řez budovou a sál ---------- */
.scrolly-prizemi { height: 560vh; }
.scrolly-prizemi .platno { overflow: hidden; }
.prizemi { width: 100%; height: 100%; min-height: 0; display: block; background: var(--paper); --k: 1; }
.prizemi * { vector-effect: non-scaling-stroke; }
.prizemi text { font-family: "Plex Mono", monospace; font-weight: 500; fill: var(--ink); }
.prizemi .lbl { font-size: min(7px, calc(11px * var(--k))); }
.prizemi .lbl.tucne { font-weight: 700; letter-spacing: .08em; }
.prizemi .lbl.slabe { fill: var(--ink-soft); }
.prizemi .cervene { fill: var(--red); }
.prizemi .big { font-size: calc(15px * var(--k)); paint-order: stroke; stroke: var(--paper); stroke-width: calc(4px * var(--k)); stroke-linejoin: round; }
.prizemi .big.sal { font-weight: 700; letter-spacing: .1em; }
.prizemi .stroj { cursor: pointer; }
.prizemi .stroj:focus { outline: none; }
.prizemi .stroj .obrys { stroke: var(--ink); stroke-width: 1; }
.prizemi .stroj:hover .obrys, .prizemi .stroj:focus-visible .obrys { stroke: var(--red); stroke-width: 2.5; }
.prizemi .programator, .prizemi .uloha, .prizemi .zvyrazneni { transition: opacity .2s; }
.scrolly-prizemi.static .platno > svg { height: 70vh; }

.stroje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -20px auto 20px; font-size: 15px; color: var(--ink-soft); }
.stroje button {
  font: 500 14px "Plex Mono", monospace; padding: 6px 10px; cursor: pointer; border-radius: 3px;
  border: 1px solid var(--ink); background: #fffdf6; color: var(--ink);
}
.stroje button:hover, .stroje button:focus-visible { background: var(--ink); color: var(--paper); }

dialog.stroj-karta {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow: auto;
  padding: 20px 20px 8px; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink);
  box-shadow: 6px 6px 0 rgba(29,42,36,.25); font-size: 17px;
}
dialog.stroj-karta::backdrop { background: rgba(4,16,8,.55); }
dialog.stroj-karta h3 { margin: 0 40px 12px 0; font-size: 22px; }
dialog.stroj-karta figure { margin: 0 0 12px; }
dialog.stroj-karta img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
dialog.stroj-karta .zavrit {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; font: 600 24px/1 "Plex Sans", sans-serif; cursor: pointer;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 3px;
}
dialog.stroj-karta .tisk {
  font: 11px/1.15 "Plex Mono", monospace; margin: 0 0 12px; padding: 8px 10px; min-height: 22em; overflow-x: auto;
  background: repeating-linear-gradient(to bottom, var(--bar) 0 2.3em, #fff 2.3em 4.6em); border: 1px solid var(--rule);
}

/* ---------- kapitola 11: fasáda v Janovského ---------- */
.scrolly-fasada { height: 480vh; }
.scrolly-fasada .platno { overflow: hidden; }
.fasada { width: 100%; height: 100%; min-height: 0; display: block; background: var(--paper); }
.fasada .ced { font: 600 22px "Plex Sans", sans-serif; letter-spacing: .06em; fill: var(--ink); }
.fasada .ced.plan { fill: var(--ink-soft); }
.fasada .ced-pozn { font: 500 14px "Plex Mono", monospace; fill: var(--red); }
.fasada .sat { transition: opacity .2s; }
.scrolly-fasada .rok {
  position: absolute; top: 14px; left: 14px; font: 500 30px/1 "Plex Mono", monospace; letter-spacing: .12em;
  background: var(--ink); color: var(--paper); padding: 8px 8px 8px 12px; border-radius: 3px;
}
.scrolly-fasada.static .platno > svg { height: 70vh; }
.scrolly-fasada.static .rok { display: none; }

/* ---------- kapitola 12: flash ---------- */
#flash > .flash-stage { max-width: 1040px; position: relative; margin: 28px auto; }
.flash-stage canvas { width: 100%; aspect-ratio: 16 / 9; display: block; border: 1px solid #1f5a31; background: rgba(0,0,0,.35); }
@media (max-width: 700px) { .flash-stage canvas { aspect-ratio: 4 / 5; } }
.flash-popisky { list-style: none; padding: 0; margin: 10px 0 0; min-height: 3.2em; position: relative; color: #bfe9cb; font-size: 16px; }
.flash-popisky li { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.flash-popisky li.on { opacity: 1; }
.flash-stage.static .flash-popisky li { position: static; opacity: 1; margin: 4px 0; }
.flash-stage .znovu {
  position: absolute; top: 12px; left: 12px; font: 600 14px "Plex Mono", monospace; padding: 8px 12px; cursor: pointer;
  background: var(--glass); color: var(--phosphor); border: 1px solid var(--phosphor-dim); border-radius: 3px;
}
.flash-stage .znovu:hover { background: var(--phosphor); color: var(--glass); }
#flash .pozn-flash { font-size: 14px; color: #7fbf92; }
@media (max-width: 700px) { .flash-popisky { min-height: 6.4em; font-size: 15px; } }

/* ---------- kapitola 1: fotka stárne, počítadlo let ---------- */
.fotostroj { position: relative; overflow: hidden; border: 1px solid #b9b4a4; }
.fotostroj img { border: 0; }
.fotostroj .zrno { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: overlay; opacity: 0; pointer-events: none; }
.pocitadlo {
  position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: #1d2a24; color: var(--paper); border: 0; border-radius: 4px; padding: 10px 14px 10px 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,.35); text-align: left;
}
.pocitadlo .valce { display: flex; gap: 3px; font: 600 clamp(26px, 5vw, 44px)/1 "Plex Mono", monospace; }
.pocitadlo .okno {
  height: 1em; width: .78em; overflow: hidden; display: block; border-radius: 3px; color: #1d2a24;
  background: linear-gradient(#bdb6a3, #fffdf6 30%, #fffdf6 70%, #bdb6a3);
  box-shadow: inset 0 0 0 1px #0006;
}
.pocitadlo .val { display: flex; flex-direction: column; will-change: transform; }
.pocitadlo .val span { height: 1em; line-height: 1em; text-align: center; }
.pocitadlo .popis { font: 500 14px/1.3 "Plex Mono", monospace; max-width: 15em; }
@media (max-width: 700px) { .pocitadlo { left: 8px; bottom: 8px; right: 8px; padding: 8px; } .pocitadlo .popis { font-size: 12px; } }

/* ---------- kapitola 2: plán ---------- */
.scrolly-plan { height: 480vh; }
.plan { width: 100%; height: 100%; min-height: 0; display: block; }
.plan .paprsek { stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 3 5; transition: stroke .3s; }
.plan.s-hlaseni .paprsek, .plan.s-plan .paprsek { stroke: var(--ink-soft); }
.plan .vazba { fill: none; stroke: var(--rule); stroke-width: 1.5; opacity: 0; transition: opacity .4s, stroke .3s; }
.plan .vazba.on { opacity: 1; stroke: var(--ink); stroke-width: 2; }
.plan .vazba.vlna { stroke: var(--red); stroke-width: 3.5; }
.plan .komise rect { fill: #d8d0bd; stroke: var(--ink); stroke-width: 2; }
.plan .komise .okna { fill: #9fb0a6; stroke: none; }
.plan .k-nazev { font: 600 11px "Plex Mono", monospace; letter-spacing: .06em; text-anchor: middle; fill: var(--ink); }
.plan .uzel rect { fill: #fffdf6; stroke: var(--ink); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.plan .uzel.vlna rect { fill: #f6dcd6; stroke: var(--red); stroke-width: 2.5; }
.plan .u-v { font: 600 15px "Plex Sans", sans-serif; text-anchor: middle; fill: var(--ink); }
.plan .u-co { font: 500 11px "Plex Mono", monospace; text-anchor: middle; fill: var(--ink-soft); }
.plan .u-plus { font: 700 13px "Plex Mono", monospace; text-anchor: end; fill: var(--red); }
.plan .chip rect { fill: var(--ink); }
.plan .chip text { font: 500 11px "Plex Mono", monospace; text-anchor: middle; fill: var(--paper); }
.plan .chip.plan rect { fill: var(--red); }
.plan .chip.tok rect { fill: #52605a; }
@media (max-width: 600px) { .plan .u-v { font-size: 13px; } .plan .u-co { font-size: 9.5px; } .plan .k-nazev { font-size: 8.5px; } }
.scrolly-plan.static .platno > svg { height: 70vh; }

.spocitej { margin: 16px auto 28px; }
.spocitej label { font-size: 17px; }
.spocitej output { font: 700 22px "Plex Mono", monospace; margin-left: 4px; }
.spocitej input[type=range] { width: 100%; margin: 12px 0 2px; accent-color: var(--ink); height: 28px; }
.spocitej .osa { display: flex; justify-content: space-between; font: 500 12px "Plex Mono", monospace; color: var(--ink-soft); margin-bottom: 12px; }
.spocitej canvas { width: min(100%, 460px); aspect-ratio: 1; display: block; border: 1px solid var(--ink); }
.spocitej .vysledek { font-size: 18px; margin: 12px 0 4px; }
.spocitej .pozn { font-size: 14px; color: var(--ink-soft); }

/* ---------- kapitola 5: přelití úlohy ---------- */
.preliti { position: relative; margin: 16px auto 8px; }
.preliti canvas { width: 100%; height: 300px; display: block; background: #fffdf6; border: 1px solid var(--rule); }
@media (max-width: 640px) { .preliti canvas { height: 440px; } }
.preliti .znovu, .vymena .znovu {
  position: absolute; right: 10px; bottom: 10px; font: 600 13px "Plex Mono", monospace; padding: 6px 10px; cursor: pointer;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 3px;
}

/* ---------- kapitola 6: výměna 360 → 370 ---------- */
.vymena { position: relative; margin: 20px auto 8px; background: #fffdf6; border: 1px solid var(--rule); padding: 20px 16px 16px; }
.vymena .scena { position: relative; height: 230px; display: flex; align-items: flex-end; gap: 28px; justify-content: center; border-bottom: 3px solid var(--ink); }
.vymena .skrin {
  width: 230px; height: 200px; background: var(--cabinet); border: 2px solid var(--ink); border-bottom: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 16px; color: var(--paper);
}
.vymena .svetla { display: grid; grid-template-columns: repeat(8, 10px); gap: 6px; }
.vymena .svetla i { width: 10px; height: 10px; border-radius: 50%; background: #e8c35a; animation: blik 1.3s steps(1) infinite; }
.vymena .svetla i:nth-child(3n) { animation-delay: .4s; } .vymena .svetla i:nth-child(4n) { animation-delay: .9s; background: var(--red); }
@keyframes blik { 50% { opacity: .25; } }
.vymena .stitek { position: relative; width: 190px; height: 34px; perspective: 400px; font: 600 15px/34px "Plex Mono", monospace; text-align: center; }
.vymena .stitek span { position: absolute; inset: 0; background: var(--paper); color: var(--ink); backface-visibility: hidden; transition: transform .7s; border: 1px solid var(--ink); }
.vymena .s370 { transform: rotateX(180deg); }
.vymena.k370 .s360 { transform: rotateX(-180deg); }
.vymena.k370 .s370 { transform: rotateX(0); background: #fff; }
.vymena .model { font: 500 14px "Plex Mono", monospace; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .4s; }
.vymena.tocit .model { opacity: 1; }
.vymena .model .okno { height: 1.6em; width: 3.2em; overflow: hidden; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); font: 700 22px/1.6em "Plex Mono", monospace; text-align: center; }
.vymena .valec { display: flex; flex-direction: column; }
.vymena .valec span { height: 1.6em; }
.vymena.stop .model .okno { background: #f6dcd6; color: var(--red); border-color: var(--red); }
.vymena .snimac {
  width: 120px; height: 110px; background: var(--beige); border: 2px solid var(--ink); border-bottom: 0; position: relative;
  display: flex; align-items: flex-end; justify-content: center; font: 500 12px "Plex Mono", monospace; padding-bottom: 8px;
  transition: transform 1.1s ease-in-out, filter 1.1s, opacity 1.1s;
}
.vymena .snimac .zasobnik { position: absolute; top: -18px; left: 20px; width: 50px; height: 18px; background: #efe3c2; border: 1px solid var(--ink); }
.vymena.snimac-pryc .snimac { transform: translateX(160px) scale(.75); transform-origin: bottom; filter: grayscale(1); opacity: .55; }
.vymena-popis { font-size: 17px; margin: 14px 0 0; min-height: 3.2em; padding-right: 90px; }
@media (max-width: 640px) {
  .vymena .scena { gap: 12px; } .vymena .skrin { width: 180px; } .vymena .stitek { width: 160px; font-size: 13px; }
  .vymena .snimac { width: 90px; } .vymena.snimac-pryc .snimac { transform: translateX(40px) scale(.7); }
  .vymena-popis { padding-right: 0; padding-bottom: 36px; }
}
.preliti .znovu { position: static; margin-top: 8px; }