/* Prezentace – pergamen, inkoust, zlato. Plátno 1600 × 900, škáluje se na obrazovku. */

/* ------------------------------------------------------------------ písma (self-hosted, OFL) */

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../slides/fonts/playfair-display-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../slides/fonts/playfair-display-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../slides/fonts/playfair-display-latin-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../slides/fonts/playfair-display-latin-ext-wght-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(../slides/fonts/source-sans-3-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(../slides/fonts/source-sans-3-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 200 900; font-display: swap; src: url(../slides/fonts/source-sans-3-latin-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 200 900; font-display: swap; src: url(../slides/fonts/source-sans-3-latin-ext-wght-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(../slides/fonts/source-serif-4-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(../slides/fonts/source-serif-4-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap; src: url(../slides/fonts/source-serif-4-latin-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap; src: url(../slides/fonts/source-serif-4-latin-ext-wght-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------ tokens */

:root {
  --paper: #f4ecd8;
  --paper-2: #ebe0c4;
  --paper-3: #e2d4b2;
  --card: rgba(255, 251, 241, 0.72);
  --ink: #2a2118;
  --ink-2: #5a4b3a;
  --green: #1f4a3d;
  --green-2: #2d6553;
  --green-3: #143329;
  --gold: #b8862b;      /* jen linky, rámečky, ornamenty */
  --gold-2: #d9a943;
  --gold-3: #f1d58a;
  --gold-ink: #8a6416;  /* zlatý TEXT na papíře (kontrast 4,5 : 1) */
  --wine: #7a2430;
  --wine-2: #5a1a22;
  --cream: #f3ead2;
  --line: rgba(122, 92, 40, 0.35);
  --line-2: rgba(122, 92, 40, 0.2);
  --shadow: 0 10px 28px rgba(90, 60, 20, 0.12);
  --display: 'Playfair Display', 'Didot', 'Bodoni 72', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #0b0907; /* pruhy kolem plátna: na projektoru téměř neviditelné */
  font-family: var(--sans); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -0.125em; }
.i.arr { width: 0.85em; height: 0.85em; vertical-align: -0.08em; margin: 0 0.12em; opacity: 0.8; }

/* ------------------------------------------------------------------ plátno */

.viewport { position: fixed; inset: 0; overflow: hidden; display: block; transition: opacity 0.35s; }
body.blackout { background: #000; }
body.blackout .viewport { opacity: 0; }

.deck {
  position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; margin: -450px 0 0 -800px;
  transform-origin: center center; color: var(--ink);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at center, transparent 58%, rgba(120, 85, 30, 0.13)),
    radial-gradient(1100px 600px at 20% 10%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(900px 700px at 90% 100%, rgba(160, 120, 50, 0.16), transparent 60%),
    var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/* zlatý dvojitý rámeček – v rozích přerušený, tam sedí ornament */
.deck::before, .deck::after { content: ''; position: absolute; pointer-events: none; z-index: 2; }
.deck::before {
  inset: 22px; border: 2px solid var(--gold);
  -webkit-mask: linear-gradient(90deg, transparent 22px, #000 22px calc(100% - 22px), transparent calc(100% - 22px)), linear-gradient(transparent 22px, #000 22px calc(100% - 22px), transparent calc(100% - 22px));
          mask: linear-gradient(90deg, transparent 22px, #000 22px calc(100% - 22px), transparent calc(100% - 22px)), linear-gradient(transparent 22px, #000 22px calc(100% - 22px), transparent calc(100% - 22px));
}
.deck::after {
  inset: 30px; border: 1px solid rgba(122, 92, 40, 0.5);
  -webkit-mask: linear-gradient(90deg, transparent 14px, #000 14px calc(100% - 14px), transparent calc(100% - 14px)), linear-gradient(transparent 14px, #000 14px calc(100% - 14px), transparent calc(100% - 14px));
          mask: linear-gradient(90deg, transparent 14px, #000 14px calc(100% - 14px), transparent calc(100% - 14px)), linear-gradient(transparent 14px, #000 14px calc(100% - 14px), transparent calc(100% - 14px));
}
.corner { position: absolute; width: 80px; height: 80px; z-index: 3; pointer-events: none; overflow: visible; }
.corner.tl { top: 14px; left: 14px; }
.corner.tr { top: 14px; right: 14px; transform: scaleX(-1); }
.corner.br { bottom: 14px; right: 14px; transform: scale(-1, -1); }
.corner.bl { bottom: 14px; left: 14px; transform: scaleY(-1); }

.frame-progress {
  position: absolute; left: 44px; bottom: 29px; height: 2px; z-index: 3; pointer-events: none;
  width: calc((100% - 88px) * var(--p, 0)); background: var(--wine); opacity: 0.85;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------ snímek */

.slide {
  position: absolute; inset: 0; padding: 70px 110px 90px;
  display: flex; flex-direction: column; font-variant-numeric: lining-nums;
  opacity: 0; visibility: hidden; transform: translateX(40px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, visibility 0s 0.2s;
}
.slide.active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.45s ease 0.2s, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s, visibility 0s;
}
.slide.past { transform: translateX(-40px); }

.body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }

.head { margin-bottom: 26px; flex: none; }
.kicker { display: block; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; font-size: 22px; color: var(--gold-ink); margin-bottom: 8px; }
.head h2 { font-family: var(--display); font-weight: 800; font-size: 66px; line-height: 1.05; margin: 0; color: var(--green); }
.head h2 small { font-weight: 500; font-size: 0.55em; color: var(--ink-2); font-style: italic; }
.head h2::after {
  content: ''; display: block; width: 156px; height: 10px; margin-top: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='156' height='10'><rect x='0' y='4' width='140' height='2' fill='%23b8862b'/><path d='M149.5 0.5L154 5L149.5 9.5L145 5Z' fill='%23b8862b'/></svg>") no-repeat;
}

.slide-foot {
  position: absolute; left: 110px; right: 110px; bottom: 44px; display: flex; justify-content: space-between; align-items: baseline;
  font: 600 15px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); opacity: 0.72;
  pointer-events: none;
}
.slide-foot .folio { font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.12em; }

b { color: var(--green); font-weight: 700; }
.notes { display: none; }

.slide p, .slide li, .slide dd, .slide figcaption, .slide blockquote, .cta-note { text-wrap: pretty; }
.slide h1, .slide h2, .slide h3, .big, .moral, .quote, .slide .bullets li, .stat span, .game-cta .cta-note, .vs-verdict { text-wrap: balance; }

/* postupné odkrývání */
.step { opacity: 0; transform: translateY(18px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.step.shown { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ 1 · titul */

.title-slide, .end-slide { justify-content: center; }
.title-slide { padding-left: 150px; background: radial-gradient(640px 520px at 79% 47%, rgba(217, 169, 67, 0.24), transparent 70%); }
.title-wrap { position: relative; z-index: 1; margin-top: -24px; }
.overline { letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; font-size: 22px; margin: 0 0 18px; }
.title-slide h1, .end-slide h1 { font-family: var(--display); font-weight: 800; font-size: 120px; line-height: 0.98; margin: 0; color: var(--green); letter-spacing: -0.01em; }
.flourish { display: flex; align-items: center; width: 560px; margin: 26px 0 18px; }
.flourish span { flex: 1; height: 1.3px; background: linear-gradient(90deg, transparent, var(--gold)); }
.flourish span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.flourish svg { width: 160px; height: 24px; flex: none; }
.subtitle { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 76px; margin: 0; color: var(--wine); line-height: 1.1; }
.tagline { font-size: 32px; color: var(--ink-2); margin: 16px 0 0; }
.authors { margin: 38px 0 0; font: 600 27px/1.25 var(--sans); color: var(--ink); }
.authors span { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); }

.hoard { position: absolute; right: 118px; top: 186px; width: 340px; height: 482px; z-index: 0; perspective: 1200px; }
.coin-big {
  position: absolute; left: 0; top: 0; width: 340px; height: 340px; z-index: 1;
  filter: drop-shadow(0 22px 26px rgba(80, 52, 8, 0.38));
  animation: coin-spin 0.9s cubic-bezier(0.3, 0.6, 0.3, 1) 0.25s both, coin-float 6s ease-in-out 1.2s infinite;
}
.coin-pile { position: absolute; left: 20px; top: 352px; width: 300px; height: 130px; }
@keyframes coin-spin { from { transform: rotateY(-360deg); } to { transform: rotateY(0); } }
@keyframes coin-float { 50% { transform: translateY(-12px) rotate(2deg); } }

.imprint {
  position: absolute; left: 0; right: 0; bottom: 86px; display: flex; justify-content: center; align-items: baseline; gap: 0;
  font: 600 20px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink);
}
.imprint::before { content: ''; position: absolute; left: 50%; top: -24px; width: 360px; height: 1px; margin-left: -180px; background: linear-gradient(90deg, transparent, var(--gold) 20% 80%, transparent); }
.imprint > :not([hidden]) ~ :not([hidden])::before { content: '·'; margin: 0 0.9em; }
.imprint .presenter { margin: 0; font: inherit; color: inherit; }

/* ------------------------------------------------------------------ 2 · autor */

.grid-portrait { display: grid; grid-template-columns: 440px 1fr; gap: 56px; align-items: center; }
.medallion { margin: 0; display: flex; flex-direction: column; align-items: center; }
.cameo {
  position: relative; overflow: hidden; width: 300px; height: 360px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(ellipse at 50% 35%, #3a7562, var(--green) 70%);
  border: 9px solid var(--gold-2);
  box-shadow: 0 0 0 4px #fbf3df, 0 0 0 6px var(--gold), 0 22px 44px rgba(40, 30, 10, 0.34);
}
.cameo::after { /* vnitřní perličkový prstenec */
  content: ''; position: absolute; inset: 5px; border-radius: 50%; pointer-events: none;
  border: 3px dotted rgba(251, 236, 190, 0.85);
  box-shadow: inset 0 0 0 1px rgba(122, 84, 16, 0.4), inset 0 0 36px rgba(30, 20, 5, 0.45);
}
.mono { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 66px; color: var(--gold-3); }
.portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.plaque {
  position: relative; z-index: 1; margin-top: -22px; padding: 7px 22px 8px; border-radius: 6px;
  background: linear-gradient(180deg, #f6dd96, #d9a943 60%, #b8862b); color: #4a3208;
  font: 700 19px/1 var(--sans); letter-spacing: 0.18em; font-variant-numeric: lining-nums;
  box-shadow: 0 4px 10px rgba(80, 52, 8, 0.3), inset 0 1px 0 rgba(255, 245, 210, 0.8);
}
.medallion figcaption { margin-top: 18px; font-family: var(--display); font-style: italic; font-size: 25px; text-align: center; color: var(--ink-2); max-width: 440px; line-height: 1.3; text-wrap: balance; }
.medallion figcaption small { display: block; font-family: var(--sans); font-style: normal; font-size: 20px; margin-top: 6px; color: var(--gold-ink); letter-spacing: 0.02em; }
.medallion figcaption .credit { margin-top: 12px; font-size: 14px; letter-spacing: 0.04em; color: var(--ink-2); opacity: 0.75; }

.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
.facts li { display: flex; gap: 22px; align-items: center; font-size: 31px; line-height: 1.3; }
.ico, .card .lbl .i { color: var(--gold-ink); }
.ico {
  flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fbf4e2, var(--paper-2)); border: 2px solid var(--line);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.35);
}
.ico .i { width: 52%; height: 52%; }

/* ------------------------------------------------------------------ 3 · karty */

.cards.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; align-items: stretch; }
.card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 20px;
  padding: 30px 32px 32px; box-shadow: var(--shadow); position: relative;
}
.card::before { content: ''; position: absolute; top: 0; left: 32px; right: 32px; height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-3)); border-radius: 0 0 4px 4px; }
.fig { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.fig .num { font: 800 60px/1 var(--display); color: var(--wine); font-variant-numeric: lining-nums; letter-spacing: -0.01em; }
.fig .lbl { display: flex; align-items: center; gap: 10px; font: 700 18px/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.fig .lbl .i { width: 26px; height: 26px; }
.card h3 { font-family: var(--display); font-size: 34px; margin: 0 0 12px; color: var(--green); }
.card p { font-size: 27px; line-height: 1.42; margin: 0; }

.epitaph {
  margin: 34px auto 0; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 14px 10px; max-width: 1240px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  font: italic 500 25px/1.35 var(--display); color: var(--ink-2); text-align: center;
}
.epitaph .i { width: 26px; height: 26px; color: var(--gold-ink); }

/* ------------------------------------------------------------------ 4 · Lidská komedie */

.stats { display: grid; grid-template-columns: 0.9fr 0.9fr 1.5fr; gap: 24px; margin-bottom: 40px; }
.stat {
  display: flex; align-items: center; gap: 22px; padding: 20px 28px; border-radius: 18px;
  background: linear-gradient(160deg, var(--green-2), var(--green) 55%, var(--green-3)); color: var(--cream);
  box-shadow: 0 10px 26px rgba(20, 50, 40, 0.28), inset 0 0 0 1px rgba(241, 213, 138, 0.25);
}
.stat strong { flex: none; font: 800 62px/1 var(--display); color: var(--gold-3); font-variant-numeric: lining-nums tabular-nums; }
.stat span { font-size: 24px; line-height: 1.25; }
.two-col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 54px; align-items: center; }
.bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.bullets li { position: relative; padding-left: 34px; font-size: 29px; line-height: 1.36; }
.bullets li::before { content: ''; position: absolute; left: 4px; top: 0.52em; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.quote {
  position: relative; margin: 0; padding: 40px 40px 34px; border-radius: 20px; background: var(--card); border: 1.5px solid var(--line);
  box-shadow: var(--shadow);
  font-family: var(--display); font-style: italic; font-size: 36px; line-height: 1.32; color: var(--ink);
}
.quote::before { content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 6px; border-radius: 0 4px 4px 0; background: var(--wine); }
.qmark { position: absolute; right: 26px; top: -26px; width: 64px; height: 64px; padding: 12px; border-radius: 50%; background: var(--wine); fill: var(--gold-3); box-shadow: 0 6px 14px rgba(90, 26, 34, 0.35); }
.quote cite { display: block; margin-top: 18px; font-family: var(--sans); font-style: normal; font-size: 21px; color: var(--gold-ink); letter-spacing: 0.04em; }
.quote cite::before { content: '– '; }

/* ------------------------------------------------------------------ 5 · základní údaje */

.info-layout { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: stretch; }
.info { margin: 0; display: grid; align-self: center; border-top: 2px solid var(--line); }
.info > div { display: grid; grid-template-columns: 210px 1fr; gap: 22px; padding: 11px 4px; border-bottom: 1px solid var(--line); align-items: baseline; }
.info dt { font-weight: 700; color: var(--gold-ink); text-transform: uppercase; letter-spacing: 0.08em; font-size: 21px; }
.info dd { margin: 0; font-size: 26px; line-height: 1.3; }

.versus {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 30px 32px; border-radius: 22px;
  background: radial-gradient(circle at 50% 0%, #2a5c4b, var(--green) 55%, var(--green-3)); color: var(--cream);
  box-shadow: 0 14px 34px rgba(20, 50, 40, 0.3), inset 0 0 0 1px rgba(241, 213, 138, 0.3);
  text-align: center;
}
.vs-title { margin: 0 0 14px; font: 700 18px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-3); opacity: 0.9; }
.vs-side h3 { margin: 0; font: 800 44px/1.05 var(--display); color: #fff8e6; }
.vs-src { margin: 6px 0 10px; font-size: 21px; color: #c9d8cd; }
.vs-verdict { margin: 0; font-size: 26px; line-height: 1.3; }
.vs-verdict b { color: var(--gold-3); }
.vs-x { display: flex; align-items: center; gap: 16px; margin: 14px 0; font: 700 60px/1 var(--display); color: var(--gold-2); }
.vs-x span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(241, 213, 138, 0.6)); }
.vs-x span:last-child { background: linear-gradient(90deg, rgba(241, 213, 138, 0.6), transparent); }

/* ------------------------------------------------------------------ 6 · mapa postav */

.relmap { position: relative; width: 1380px; height: 560px; margin: 0 auto; }
.relmap .edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.edges .edge { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.edges .dash { stroke-dasharray: 10 9; }
.edges .love { stroke: var(--wine); stroke-width: 4; transition: stroke 0.4s, stroke-dasharray 0.4s; }
.relmap:has(.betrayal.shown) .edges .love { stroke: #8f7a66; stroke-dasharray: 3 9; }
.edges .lbl rect { fill: #f6efdd; stroke: var(--line-2); stroke-width: 1; }
.edges .lbl text { font: 700 19px var(--sans); fill: #7a5a17; letter-spacing: 0.06em; text-transform: uppercase; text-anchor: middle; }
.node {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 18px;
  padding: 12px 28px 12px 12px; border-radius: 999px; background: #fffaf0; border: 2px solid var(--line);
  box-shadow: 0 8px 22px rgba(90, 60, 20, 0.14); white-space: nowrap;
}
.node.main { border: 3px solid var(--gold); background: #fffdf6; padding: 13px 32px 13px 13px; }
.node .av {
  flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, var(--green-2), var(--green) 70%); color: var(--gold-3);
  box-shadow: 0 0 0 3px #fffaf0, 0 0 0 5px var(--gold);
}
.node.main .av { width: 92px; height: 92px; }
.node.villain .av { background: radial-gradient(circle at 40% 30%, #7a2a34, var(--wine-2) 70%); }
.node .av .i { width: 56%; height: 56%; }
.node h3, .node p { white-space: nowrap; }
.node h3 { margin: 0; font: 700 31px/1.1 var(--display); color: var(--wine); }
.node.main h3 { font-size: 36px; }
.node p { margin: 5px 0 0; font-size: 23px; color: var(--ink-2); }
.love-badge {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: 999px; background: #fffaf0; border: 2px solid var(--wine);
  color: var(--wine); font: 700 18px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(90, 26, 34, 0.18);
}
.love-badge .i { width: 28px; height: 28px; }
.love-badge .i.arr { width: 16px; height: 16px; margin: 0; }
.love-badge.betrayal { background: var(--wine); color: #fff4dc; border-color: var(--wine); transform: translate(-50%, -50%) scale(0.6); box-shadow: 0 0 0 5px rgba(244, 236, 216, 0.85), 0 6px 14px rgba(90, 26, 34, 0.25); }
.love-badge.betrayal.shown { transform: translate(-50%, -50%); }
.relmap:has(.betrayal.shown) .love-badge:not(.betrayal) { opacity: 0; transition: opacity 0.2s; }

/* ------------------------------------------------------------------ 7–8 · děj (příběhová osa) */

.story { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 40px; align-items: start; }
.story::before { /* tečkovaná osa: kam příběh ještě dojde */
  content: ''; position: absolute; top: 41px; left: calc((100% - 120px) / 8); right: calc((100% - 120px) / 8); height: 0;
  border-top: 2px dotted rgba(184, 134, 43, 0.45);
}
.story li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.story li:not(:last-child)::after {
  content: ''; position: absolute; top: 41px; left: calc(50% + 47px); width: calc(100% + 40px - 94px); height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform-origin: left; transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}
.story li:has(+ li.shown)::after { transform: scaleX(1); }
.medal {
  position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fffaf0, var(--paper-2)); border: 3px solid var(--gold); color: var(--wine);
  box-shadow: 0 0 0 7px rgba(244, 236, 216, 0.9), 0 8px 18px rgba(90, 60, 20, 0.2);
}
.medal .i { width: 48%; height: 48%; }
.story li.step { opacity: 1; transform: none; }
.story li.step > :not(.medal):not(.chip) { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease 0.1s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s; }
.story li.step.shown > :not(.medal):not(.chip) { opacity: 1; transform: none; }
.story li.step .medal { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, background 0.3s, box-shadow 0.3s; }
.story li.step:not(.shown) .medal { transform: scale(0.62); border: 2px dashed rgba(184, 134, 43, 0.6); background: var(--paper); box-shadow: 0 0 0 7px rgba(244, 236, 216, 0.9); }
.story li.step .medal .i { transition: opacity 0.3s 0.1s; }
.story li.step:not(.shown) .medal .i { opacity: 0; }
.story li.step .chip { transition: opacity 0.3s; }
.story li.step:not(.shown) .chip { opacity: 0.4; }
.chip { margin-top: 18px; font: 700 18px/1 var(--display); letter-spacing: 0.3em; color: var(--gold-ink); padding-left: 0.3em; }
.chip::before, .chip::after { content: '—'; letter-spacing: 0; margin: 0 0.5em; color: var(--gold); font-weight: 400; }
.story h3 { margin: 10px 0 12px; font: 700 35px/1.12 var(--display); color: var(--wine); }
.story p { margin: 0; font-size: 26px; line-height: 1.42; max-width: 320px; }
.story.compact h3 { font-size: 33px; }
.story.compact p { font-size: 25px; line-height: 1.38; }
.moral {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin: 34px 0 0; padding: 20px 34px; border-radius: 16px;
  background: linear-gradient(160deg, var(--green-2), var(--green) 55%, var(--green-3)); color: var(--gold-3);
  font-family: var(--display); font-style: italic; font-size: 33px; text-align: center;
  box-shadow: 0 10px 26px rgba(20, 50, 40, 0.25);
}
.moral .i { width: 34px; height: 34px; flex: none; opacity: 0.9; }

/* ------------------------------------------------------------------ 9 · rozbor */

.analysis { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 20px 28px; align-content: center; }
.panel { background: var(--card); border: 1.5px solid var(--line); border-radius: 20px; padding: 22px 30px 24px; box-shadow: var(--shadow); }
.panel h3 { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 32px; margin: 0 0 14px; color: var(--wine); }
.panel h3 .i { width: 30px; height: 30px; color: var(--gold-ink); }
.panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.panel li { position: relative; padding-left: 26px; font-size: 26px; line-height: 1.34; }
.panel li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.motifs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.motifs > span { padding: 7px 18px; border-radius: 999px; background: #fbf5e6; border: 1px solid var(--line); font-size: 22px; font-weight: 600; color: var(--ink); }
.motifs .motifs-label { display: inline-flex; align-items: center; gap: 10px; padding: 7px 4px 7px 0; background: none; border: 0; font-size: 19px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.motifs .motifs-label .i { width: 26px; height: 26px; }
.panel.highlight {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 36px; padding: 20px 38px;
  background: linear-gradient(160deg, var(--green-2), var(--green) 55%, var(--green-3)); border-color: var(--green); color: var(--cream);
}
.panel.highlight h3 { flex: none; margin: 0; color: var(--gold-3); font-size: 22px; font-family: var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.panel.highlight h3 .i { color: var(--gold-3); }
.panel .big { margin: 0; font-family: var(--display); font-style: italic; font-size: 36px; line-height: 1.25; color: #fffaf0; }

/* ------------------------------------------------------------------ 10 · další díla */

.books { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
.book { display: flex; gap: 24px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.spine {
  position: relative; flex: none; width: 78px; display: grid; place-items: center;
  background: linear-gradient(90deg, #6a1e29, var(--wine) 40%, #8f3340);
  box-shadow: inset 0 22px 0 -18px var(--gold-3), inset 0 30px 0 -27px var(--gold-3), inset 0 -22px 0 -18px var(--gold-3), inset 0 -30px 0 -27px var(--gold-3), inset -6px 0 10px rgba(0, 0, 0, 0.25);
}
.spine span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 25px/1 var(--display); letter-spacing: 0.08em; color: var(--gold-3); font-variant-numeric: lining-nums; }
.book:nth-child(2) .spine { background: linear-gradient(90deg, #163a30, var(--green) 40%, #2a5d4c); }
.book:nth-child(3) .spine { background: linear-gradient(90deg, #4b3a1a, #6d5523 40%, #85692e); }
.book:nth-child(4) .spine { background: linear-gradient(90deg, #2f2318, #4a3826 40%, #5d4631); }
.book-text { padding: 17px 26px 18px 0; }
.book h3 { font-family: var(--display); font-size: 32px; margin: 0 0 4px; color: var(--wine); }
.book p { font-size: 25px; line-height: 1.35; margin: 0; }
.minor-books { margin-top: 22px; }
.minor-label { display: flex; align-items: center; gap: 18px; margin: 0 0 12px; font: 700 18px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); }
.minor-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.minor-books ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
.minor-books li { position: relative; padding-left: 22px; font-size: 21px; line-height: 1.3; color: var(--ink-2); }
.minor-books li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.minor-books i { font-family: var(--display); font-weight: 700; font-size: 1.08em; color: var(--wine); }
.minor-books .yr { font-variant-numeric: lining-nums; }

/* ------------------------------------------------------------------ 11–13 · ukázka a otázky z čítanky */

.reading { display: grid; grid-template-columns: 1.45fr 1fr; gap: 40px; }
.excerpt {
  min-height: 0; overflow: auto; background: #fffaf0; border: 1.5px solid var(--line); border-radius: 18px; padding: 26px 38px 30px;
  box-shadow: inset 0 0 40px rgba(160, 120, 50, 0.1), var(--shadow);
  scrollbar-width: thin; scrollbar-color: rgba(184, 134, 43, 0.7) transparent; overscroll-behavior: contain;
}
.excerpt::-webkit-scrollbar { width: 8px; }
.excerpt::-webkit-scrollbar-thumb { background: rgba(184, 134, 43, 0.6); border-radius: 8px; }
.excerpt::-webkit-scrollbar-track { background: transparent; }
/* delší ukázka: dole se text rozplyne a šipka ukáže, že pokračuje (→ / mezerník posune text) */
.excerpt::before, .excerpt::after { content: ''; position: sticky; z-index: 1; display: block; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.excerpt::before { /* nahoře: text odjíždí pod jemný přechod (sticky se počítá od obsahu, proto −padding) */
  top: -26px; height: 44px; margin: -26px -38px -18px;
  background: linear-gradient(#fffaf0 30%, rgba(255, 250, 240, 0));
}
.excerpt.scrolled::before { opacity: 1; }
.excerpt::after {
  bottom: -30px; height: 84px; margin: -84px -38px 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'><path d='M3 3l11 10 11-10' fill='none' stroke='%238a6416' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center bottom 16px no-repeat,
    linear-gradient(rgba(255, 250, 240, 0), #fffaf0 62%);
}
.excerpt.more::after { opacity: 1; }
.excerpt-src { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 700; color: var(--gold-ink); font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; }
.excerpt-src .i { width: 26px; height: 26px; }
.excerpt-text { font-size: 30px; }
.excerpt-text p { font-family: var(--serif); font-size: 1em; line-height: 1.55; margin: 0 0 0.45em; text-indent: 1.5em; hyphens: auto; }
.excerpt-text p:first-child { text-indent: 0; }
.placeholder { color: #8a7656; font-style: italic; }
.excerpt-text p.placeholder { text-indent: 0; }
.focus { display: flex; flex-direction: column; min-height: 0; }
.focus h3 { font-family: var(--display); font-size: 34px; margin: 4px 0 14px; color: var(--wine); }
.focus ol { margin: 0; padding-left: 34px; display: grid; gap: 12px; }
.focus li { font-size: 28px; line-height: 1.32; padding-left: 4px; }
.focus li::marker { color: var(--gold-ink); font-weight: 700; font-family: var(--display); }
.from-book {
  flex: 1; min-height: 0; overflow: auto; margin-top: 24px; padding: 18px 24px; border-radius: 16px; border: 2px dashed var(--line);
  background: rgba(255, 250, 240, 0.4); font-size: 24px; scrollbar-width: thin; scrollbar-color: rgba(184, 134, 43, 0.7) transparent;
}
.from-book h4 { margin: 0 0 8px; font-size: 20px; color: var(--gold-ink); text-transform: uppercase; letter-spacing: 0.14em; }
.focus .from-book p, .focus .from-book li { margin: 0; font-size: 1em; line-height: 1.35; }
.focus .from-book ol, .focus .from-book ul { margin: 6px 0 0; padding-left: 1.4em; gap: 0.5em; }
/* jakmile jsou doplněné otázky z čítanky, dostanou celý sloupec */
.focus:has(.from-book ol, .from-book ul) > h3, .focus:has(.from-book ol, .from-book ul) > ol { display: none; }
.focus:has(.from-book ol, .from-book ul) .from-book { margin-top: 0; border-style: solid; background: var(--card); box-shadow: var(--shadow); }
.focus:has(.from-book ol, .from-book ul) .from-book h4 { margin-bottom: 12px; font-size: 22px; }

/* ukázka přes celou šířku ve dvou sloupcích jako otevřená kniha – vejde se bez posouvání */
.reading-book { grid-template-columns: 1fr; }
.slide:has(.reading-book) .head { margin-bottom: 14px; }
.reading-book .excerpt { padding: 18px 46px 20px; }
.reading-book .excerpt-text { column-count: 2; column-gap: 66px; column-rule: 1px solid var(--line-2); }
.reading-book .excerpt-src { margin-bottom: 10px; }
.reading-book .excerpt-text p { line-height: 1.44; margin-bottom: 0.28em; }
.excerpt-src .excerpt-credit { margin-left: auto; font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 21px; color: var(--ink-2); }
.book-ref { margin: 20px 4px 0; text-align: right; font-size: 19px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }

/* ------------------------------------------------------------------ 14 · hra */

.game-slide { background: radial-gradient(640px 520px at 80% 58%, rgba(31, 74, 61, 0.12), transparent 70%); }
.game-layout { display: grid; grid-template-columns: 1.32fr 1fr; gap: 54px; align-items: center; }
.game-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.game-rules li { display: flex; gap: 22px; align-items: flex-start; font-size: 28px; line-height: 1.32; }
.game-rules li > div { padding-top: 10px; }
.tile {
  flex: none; width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; color: var(--gold-3);
  background: linear-gradient(160deg, var(--green-2), var(--green) 60%, var(--green-3));
  box-shadow: 0 6px 14px rgba(20, 50, 40, 0.25), inset 0 0 0 1px rgba(241, 213, 138, 0.3);
}
.tile .i { width: 52%; height: 52%; }
.mini { display: inline-flex; flex-wrap: nowrap; gap: 7px; vertical-align: middle; margin: 2px 0 2px 10px; }
.mini.bets { display: flex; margin: 8px 0 0; }
.mini i { font-style: normal; }
.suits i { width: 34px; height: 42px; display: grid; place-items: center; border-radius: 7px; background: #fffaf0; border: 1px solid var(--line); box-shadow: 0 3px 6px rgba(60, 40, 10, 0.15); }
.suits svg { width: 21px; height: 21px; }
.s-sp, .s-cl { fill: #1d2a36; }
.s-he, .s-di { fill: #b3363f; }
.bets i { padding: 6px 14px; border-radius: 999px; font: 700 19px/1 var(--sans); color: #4a3208; font-variant-numeric: lining-nums; background: linear-gradient(180deg, #f6dd96, #d9a943); box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.8), 0 2px 5px rgba(80, 52, 8, 0.25); }
.choices i { padding: 8px 14px; border-radius: 10px; font: 700 18px/1 var(--sans); color: #fff8e6; }
.choices .give { background: var(--green); }
.choices .keep { background: var(--wine); }

.game-cta {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 42px 40px 40px; border-radius: 28px; text-align: center;
  background: radial-gradient(circle at 50% 22%, #2b6551, #143329 72%); color: var(--cream);
  box-shadow: 0 24px 60px rgba(14, 42, 34, 0.42), inset 0 0 0 1px rgba(241, 213, 138, 0.35);
  border: 3px solid var(--gold);
}
.game-cta::before { content: ''; position: absolute; inset: 10px; border-radius: 20px; border: 1px solid rgba(241, 213, 138, 0.28); pointer-events: none; }
.cta-coin { width: 150px; height: 150px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.4)); animation: coin-float 6s ease-in-out infinite; }
.cta-kicker { margin: 0; font: 700 18px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-3); }
.cta {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none; padding: 20px 50px; border-radius: 999px;
  font-weight: 800; font-size: 38px; color: #241a08;
  background: linear-gradient(180deg, #f8e2a0, #e2b54a 55%, #a97b22);
  box-shadow: 0 9px 0 #6e4f12, 0 18px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s, box-shadow 0.12s;
}
.cta .i { width: 30px; height: 30px; }
.cta:hover { transform: translateY(2px); box-shadow: 0 7px 0 #6e4f12, 0 14px 24px rgba(0, 0, 0, 0.4); }
.cta:active { transform: translateY(8px); box-shadow: 0 1px 0 #6e4f12, 0 6px 14px rgba(0, 0, 0, 0.4); }
.cta:not([href]) { filter: grayscale(0.5); opacity: 0.7; cursor: default; }
.cta-note { margin: 4px 0 0; font-size: 22px; line-height: 1.35; color: #c9d8cd; max-width: 440px; text-wrap: balance; }
.cta-note b { color: var(--gold-3); }

/* ------------------------------------------------------------------ 13, 15 · otázky */

.questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.questions li { display: flex; align-items: center; gap: 32px; padding: 20px 36px 20px 24px; border-radius: 22px; background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.questions li.step { opacity: 0.32; transform: none; transition: opacity 0.4s ease; }
.questions li.step.shown { opacity: 1; }
.questions li.shown:has(~ li.shown) { opacity: 0.6; }
.body:has(.bonus.shown) .questions li.shown { opacity: 1; }
.questions li.step p { opacity: 0; transition: opacity 0.4s ease 0.1s; }
.questions li.step.shown p { opacity: 1; }
.qn {
  flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  font: 800 50px/1 var(--display); font-variant-numeric: lining-nums; color: var(--gold-3);
  background: radial-gradient(circle at 40% 30%, var(--green-2), var(--green) 70%);
  box-shadow: 0 0 0 3px #fffaf0, 0 0 0 5px var(--gold);
}
.questions p { margin: 0; font-size: 38px; line-height: 1.28; font-family: var(--display); }
/* po všech otázkách ještě jeden klik ukáže odpovědi přímo pod otázkami */
.qa { min-width: 0; }
.answers-step { display: none; }
.questions p.ans { display: none; margin: 10px 0 0; font: 400 23px/1.38 var(--sans); color: var(--ink-2); }
.ans-lbl { margin-right: 12px; font: 700 15px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.body:has(.answers-step.shown) .questions p.ans { display: block; animation: ans-in 0.5s ease both; }
.body:has(.answers-step.shown) .questions li.shown { opacity: 1; }
.body:has(.answers-step.shown) .questions { gap: 14px; }
.body:has(.answers-step.shown) .questions li { padding-top: 14px; padding-bottom: 14px; gap: 26px; }
.body:has(.answers-step.shown) .questions p:not(.ans) { font-size: 27px; }
.body:has(.answers-step.shown) .qn { width: 60px; height: 60px; font-size: 32px; }
@keyframes ans-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bonus {
  display: flex; align-items: center; gap: 22px; margin: 22px 0 0; padding: 18px 30px; border: 2px dashed var(--gold); border-radius: 18px;
  font: italic 500 30px/1.3 var(--display); color: var(--wine); background: rgba(255, 250, 240, 0.45);
}
.bonus-chip { flex: none; padding: 7px 14px 6px; border-radius: 8px; background: var(--wine); color: var(--gold-3); font: 700 18px/1 var(--sans); font-style: normal; letter-spacing: 0.22em; text-transform: uppercase; }

/* ------------------------------------------------------------------ 16 · konec */

.end-slide { align-items: center; text-align: center; padding-bottom: 210px; background: radial-gradient(760px 480px at 50% 40%, rgba(217, 169, 67, 0.2), transparent 70%); }
.end-wrap { display: flex; flex-direction: column; align-items: center; }
.end-coin { width: 120px; height: 120px; margin-bottom: 22px; filter: drop-shadow(0 10px 14px rgba(80, 52, 8, 0.35)); }
.end-slide h1 { font-size: 108px; }
.end-slide .flourish { margin: 24px auto 16px; }
.end-slide .tagline { margin: 0; font: italic 500 40px/1.2 var(--display); color: var(--wine); }
.sources { position: absolute; left: 130px; right: 130px; bottom: 54px; padding-top: 16px; border-top: 1px solid var(--gold); text-align: left; }
.sources-label { margin: 0 0 8px; font: 700 16px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); }
.sources ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 36px; }
.sources li { font-size: 19px; line-height: 1.32; color: var(--ink-2); }
.sources .ph { background: rgba(217, 169, 67, 0.24); border-radius: 3px; padding: 0 2px; margin: 0 -2px; }
.sources-credit { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); opacity: 0.75; letter-spacing: 0.02em; }

/* zkratka font: vrací číslice na minuskové (Playfair) – všude na snímcích chceme verzálkové */
.epitaph, .story h3, .node h3, .vs-side h3, .bonus, .end-slide .tagline, .chip { font-variant-numeric: lining-nums; }
.focus li::marker { font-variant-numeric: lining-nums tabular-nums; } /* UA styl ::marker jinak vnutí minuskové tabulkové */

/* ------------------------------------------------------------------ ovládání (mimo plátno) */

.hud { position: fixed; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 14px; z-index: 20; opacity: 0; transition: opacity 0.3s; }
.hud:hover, body.show-hud .hud { opacity: 1; }
.nav { width: 38px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; }
.nav .i { width: 18px; height: 18px; }
.nav.prev .i { transform: scaleX(-1); }
.counter { color: #e8dcc0; font-size: 14px; background: rgba(0, 0, 0, 0.55); padding: 7px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; }

.notes-panel {
  position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); width: min(900px, calc(100% - 32px));
  max-height: 60vh; overflow: auto; z-index: 30; padding: 16px 20px; border-radius: 14px;
  background: rgba(20, 16, 10, 0.95); color: #f3ead2; font-size: 17px; line-height: 1.5; white-space: pre-line;
  border: 1px solid rgba(217, 169, 67, 0.5); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.notes-panel::before { content: 'Poznámky  ·  vidí je i třída – pro soukromé poznámky stiskni P'; display: block; font-weight: 700; color: var(--gold-2); margin-bottom: 6px; font-size: 14px; letter-spacing: 0.04em; }

.help-toast { /* uvnitř plátna (škáluje se s ním), nad zlatým rámečkem */
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 30;
  padding: 7px 18px; border-radius: 999px; background: rgba(20, 16, 10, 0.86); color: #f3ead2; font-size: 16px;
  border: 1px solid rgba(217, 169, 67, 0.35); transition: opacity 0.8s; pointer-events: none; white-space: nowrap;
}
.help-toast b { color: var(--gold-2); }
.help-toast .touch-hint { display: none; }
@media (pointer: coarse) { .help-toast .kbd-hint { display: none; } .help-toast .touch-hint { display: inline; } }
.help-toast.hide { opacity: 0; }

.help-card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; width: min(620px, calc(100% - 32px));
  padding: 28px 34px 26px; border-radius: 18px; background: var(--paper); color: var(--ink);
  border: 2px solid var(--gold); box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--gold), 0 30px 80px rgba(0, 0, 0, 0.6);
}
.help-card[hidden] { display: none; }
.help-card h2 { margin: 0 0 14px; font: 800 30px/1 var(--display); color: var(--green); }
.help-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 22px; align-items: baseline; font-size: 17px; }
.help-card dt { white-space: nowrap; color: var(--ink-2); font-size: 15px; }
.help-card dd { margin: 0; }
kbd { display: inline-block; min-width: 1.8em; padding: 3px 7px 2px; border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 2px; background: #fffaf0; font: 700 14px/1.2 var(--sans); text-align: center; color: var(--ink); }

/* ------------------------------------------------------------------ okno přednášejícího (P) */

body.presenter { background: #100d09; color: #efe6d0; }
body.presenter .viewport { inset: 72px calc(36% + 8px) 20px 20px; border-radius: 10px; }
body.presenter .hud, body.presenter .help-toast, body.presenter .notes-panel { display: none; }
body.presenter.blackout .viewport { opacity: 0.25; }
.pv-bar { position: fixed; left: 20px; right: 20px; top: 0; height: 64px; display: flex; align-items: center; gap: 24px; font-size: 18px; color: #d8cdb4; }
.pv-bar strong { color: #fff6e0; font-weight: 700; }
.pv-bar .pv-black { display: none; padding: 5px 12px; border-radius: 999px; background: #000; border: 1px solid #555; color: #fff; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; }
body.blackout .pv-bar .pv-black { display: inline-block; }
.pv-bar .pv-spacer { flex: 1; }
.pv-clock, .pv-timer { font: 700 30px/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff6e0; }
.pv-timer { background: none; border: 1px solid rgba(217, 169, 67, 0.4); border-radius: 10px; padding: 6px 12px; cursor: pointer; color: var(--gold-3); }
.pv-side { position: fixed; top: 72px; right: 20px; bottom: 20px; width: calc(36% - 28px); display: flex; flex-direction: column; gap: 14px; }
.pv-label { font: 700 13px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 8px; }
.pv-next-box { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #000; }
.pv-next-box .deck { box-shadow: none; }
.pv-next-box .slide { transition: none !important; }
.pv-next-box .step { transition: none !important; }
.pv-end { position: absolute; inset: 0; display: grid; place-items: center; color: #a89a7c; font-size: 18px; }
.pv-end[hidden] { display: none; }
.pv-notes { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pv-notes-text { flex: 1; overflow: auto; padding: 16px 18px; border-radius: 10px; background: #1d1810; border: 1px solid rgba(217, 169, 67, 0.25); font-size: 22px; line-height: 1.5; white-space: pre-line; color: #f3ead2; }

/* ------------------------------------------------------------------ telefon na výšku: čtecí režim */

@media (max-width: 760px) and (orientation: portrait) {
  html, body { overflow: auto; height: auto; }
  body { background: var(--paper); }
  .viewport { position: static; display: block; }
  .deck { position: static; margin: 0; width: auto; height: auto; transform: none !important; box-shadow: none; overflow: visible; }
  .deck::before, .deck::after, .corner, .frame-progress, .slide-foot { display: none; }
  .slide {
    position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; transition: none;
    zoom: 0.56; padding: 54px 40px 60px; border-bottom: 2px solid var(--line);
  }
  .slide.past { transform: none; }
  .step, .questions li.step, .questions li.step p, .story li.step .medal { opacity: 1 !important; transform: none !important; }
  .story li::after, .story::before { display: none; }
  .story li.step > *, .story li.step .medal .i, .story li.step .chip { opacity: 1 !important; transform: none !important; }
  .story li.step:not(.shown) .medal { border: 3px solid var(--gold); background: radial-gradient(circle at 40% 35%, #fffaf0, var(--paper-2)); }
  .panel.highlight { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hud, .help-toast, .notes-panel, .help-card { display: none !important; }

  .title-slide { padding-left: 40px; min-height: 0; }
  .title-wrap { margin: 0; }
  .title-slide h1 { font-size: 96px; }
  .subtitle { font-size: 64px; }
  .flourish { width: 100%; }
  .hoard { position: relative; right: auto; top: auto; width: 340px; height: 420px; margin: 40px auto 0; }
  .coin-pile { top: 300px; }
  .imprint { position: static; margin-top: 40px; flex-wrap: wrap; }
  .imprint::before { display: none; }

  .grid-portrait, .cards.three, .two-col, .info-layout, .analysis, .books, .reading, .game-layout, .stats, .minor-books ul, .sources ol {
    grid-template-columns: 1fr !important; grid-template-rows: none !important;
  }
  .stats { gap: 14px; }
  .info > div { grid-template-columns: 1fr; gap: 4px; }
  .versus { margin-top: 10px; }
  .story { grid-template-columns: 1fr; gap: 34px; }
  .story li { display: grid; grid-template-columns: 84px 1fr; column-gap: 24px; text-align: left; align-items: start; }
  .story li .medal { grid-row: span 3; }
  .story .chip { margin-top: 0; }
  .story .chip::before { display: none; }
  .story p { max-width: none; }

  .relmap { width: auto; height: auto; display: grid; gap: 14px; }
  .relmap .edges { display: none; }
  .node, .love-badge { position: relative; left: auto !important; top: auto !important; transform: none !important; white-space: normal; }
  .love-badge { justify-self: start; }
  .love-badge:not(.betrayal) { display: none; }
  .relmap > * { order: 3; }
  .relmap > :nth-child(-n+4) { order: 1; }
  .relmap > .love-badge.betrayal { order: 2; margin-left: 24px; }
  .love-badge.betrayal span::before { content: 'Evženie a Karel: láska → '; }

  .excerpt, .from-book { overflow: visible; }
  .reading-book .excerpt-text { column-count: 1; column-rule: none; }
  .excerpt-src { flex-wrap: wrap; }
  .excerpt-src .excerpt-credit { white-space: nowrap; }
  .excerpt::before, .excerpt::after { display: none; }
  .sources { position: static; margin-top: 50px; }
  .end-slide { padding-bottom: 60px; }
  .game-cta { margin-top: 20px; }
}

/* ------------------------------------------------------------------ omezený pohyb */

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.active, .step, .story li::after, .medal, .frame-progress, .questions li.step, .questions li.step p { transition: none !important; }
  .coin-big, .cta-coin { animation: none !important; }
}