/* Buitenversie: donker canvas, lichte kaarten. Maten in ontwerp-pixels (1920x1080) maal --u. */
:root {
  --u: 1;
  --font:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --ink: #e8f0ff;
  --muted: #9fb3d6;
  --cold: #8fb8ff;
  --amber: #f5b342;
  --red: #ef4444;
  --card: rgb(14, 21, 40);
  --card-border: rgba(140, 170, 220, 0.28);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #060a14;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
#stage {
  position: fixed;
  inset: 0;
  display: block;
}
#overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.card {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}

.stat {
  font-size: calc(21px * var(--u));
  color: var(--muted);
  background: rgba(10, 16, 30, 0.85);
  border: 1px solid var(--card-border);
  border-radius: calc(8px * var(--u));
  padding: calc(8px * var(--u)) calc(14px * var(--u));
}
.stat b {
  color: var(--ink);
  font-weight: 600;
}

/* vakken van scene 1 en 2 */
.cell {
  border: 1px solid hsla(var(--hue), 60%, 60%, 0.3);
  border-radius: calc(10px * var(--u));
  background: linear-gradient(
    180deg,
    hsla(var(--hue), 50%, 30%, 0.22),
    rgba(10, 16, 30, 0.6)
  );
  padding: calc(12px * var(--u)) calc(16px * var(--u));
  overflow: hidden;
}
.cell-head {
  font-size: calc(20px * var(--u));
  font-weight: 700;
  color: hsl(var(--hue), 80%, 84%);
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.cell-count {
  position: absolute;
  right: calc(16px * var(--u));
  top: calc(48px * var(--u));
  text-align: right;
}
.cell-count b {
  display: block;
  font-size: calc(34px * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cell-count span {
  font-size: calc(14px * var(--u));
  color: var(--muted);
}
.lines {
  margin-top: calc(10px * var(--u));
}
.line {
  display: flex;
  align-items: flex-start;
  gap: calc(8px * var(--u));
  height: calc(78px * var(--u));
  padding-left: calc(24px * var(--u));
  font-size: calc(19px * var(--u));
  line-height: 1.2;
  opacity: 0;
}
.line.dot {
  display: none;
}
.line .txt {
  flex: 1;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* kaarten */
.panel {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: calc(12px * var(--u));
  padding: calc(18px * var(--u)) calc(22px * var(--u));
  box-shadow: 0 calc(20px * var(--u)) calc(60px * var(--u)) rgba(0, 0, 0, 0.45);
  font-size: calc(20px * var(--u));
  line-height: 1.35;
}
.card-title {
  font-size: calc(24px * var(--u));
  font-weight: 700;
  margin-bottom: calc(12px * var(--u));
}
.card-title span {
  font-weight: 400;
  color: var(--muted);
  font-size: calc(16px * var(--u));
  margin-left: calc(8px * var(--u));
}
.claim {
  margin: 0;
  font-size: calc(26px * var(--u));
  min-height: calc(72px * var(--u));
}
.onwaar {
  background: rgba(245, 179, 66, 0.08);
  border: 1px solid rgba(245, 179, 66, 0.45);
  border-radius: calc(10px * var(--u));
  padding: calc(10px * var(--u)) calc(14px * var(--u));
  margin-top: calc(14px * var(--u));
  opacity: 0;
}
.onwaar i {
  display: block;
  font-style: normal;
  font-size: calc(15px * var(--u));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber);
}
.onwaar p {
  margin: 4px 0 0;
  font-size: calc(28px * var(--u));
  font-weight: 600;
  line-height: 1.25;
  min-height: calc(72px * var(--u));
}
.progress {
  height: calc(10px * var(--u));
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #4c8eff, #9dc0ff);
}
.uitkomst {
  margin-top: calc(14px * var(--u));
  opacity: 0;
}
.chip {
  display: inline-block;
  font-size: calc(22px * var(--u));
  font-weight: 600;
  border-radius: 999px;
  padding: calc(6px * var(--u)) calc(16px * var(--u));
  border: 1px solid var(--card-border);
}
.chip.a {
  color: var(--amber);
  border-color: var(--amber);
  background: rgba(245, 179, 66, 0.12);
}
.chip.r {
  color: var(--red);
  border-color: var(--red);
  background: rgba(239, 68, 68, 0.12);
}

.legendcard {
  display: flex;
  align-items: center;
  gap: calc(30px * var(--u));
  padding: calc(8px * var(--u)) calc(18px * var(--u));
}
.lg-row {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--u));
  font-size: calc(19px * var(--u));
  white-space: nowrap;
}
.lg-row svg {
  width: calc(56px * var(--u));
  height: calc(20px * var(--u));
  flex: none;
}
.lg-row .e {
  stroke: rgba(190, 225, 255, 0.9);
  stroke-width: 2;
}
.lg-row .e.thin {
  stroke-width: 0.8;
  opacity: 0.5;
}
.lg-row .stripe {
  stroke: var(--red);
  stroke-width: 2;
}
.lg-row .half {
  fill: #0a1020;
  stroke: var(--amber);
  stroke-width: 1.2;
}
.lg-row .halffill {
  fill: var(--amber);
}

/* onderbalk */
#hud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 calc(70px * var(--u)) calc(22px * var(--u));
  pointer-events: none;
  z-index: 10;
}
#hud::before {
  content: "";
  position: absolute;
  inset: calc(-90px * var(--u)) 0 0;
  background: linear-gradient(
    180deg,
    rgba(6, 10, 20, 0),
    rgba(6, 10, 20, 0.85) 45%,
    rgba(6, 10, 20, 0.95)
  );
  z-index: -1;
}
#scene-title {
  font-size: calc(46px * var(--u));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}
#scene-line {
  font-size: calc(32px * var(--u));
  font-weight: 400;
  color: #c9d7f2;
  line-height: 1.25;
  margin: calc(6px * var(--u)) 0 calc(14px * var(--u));
  max-width: calc(1500px * var(--u));
}
#timebar {
  display: flex;
  gap: calc(5px * var(--u));
  pointer-events: auto;
}
.seg {
  position: relative;
  height: calc(14px * var(--u));
  background: rgba(150, 180, 230, 0.16);
  border-radius: calc(4px * var(--u));
  overflow: hidden;
  cursor: pointer;
}
.seg i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(160, 200, 255, 0.85);
}
.seg b {
  position: absolute;
  right: calc(6px * var(--u));
  top: 0;
  line-height: calc(14px * var(--u));
  font-size: calc(11px * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.seg.now b {
  color: #fff;
}
#scene-num {
  position: fixed;
  right: calc(70px * var(--u));
  bottom: calc(46px * var(--u));
  font-size: calc(15px * var(--u));
  color: var(--muted);
  z-index: 11;
}
#small-label {
  position: fixed;
  right: calc(24px * var(--u));
  top: calc(18px * var(--u));
  font-size: calc(14px * var(--u));
  color: rgba(200, 215, 240, 0.75);
  border: 1px solid rgba(200, 215, 240, 0.25);
  border-radius: 999px;
  padding: calc(4px * var(--u)) calc(12px * var(--u));
  z-index: 11;
  background: rgba(6, 10, 20, 0.5);
}
#paused {
  position: fixed;
  right: calc(24px * var(--u));
  top: calc(58px * var(--u));
  font-size: calc(14px * var(--u));
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: calc(4px * var(--u)) calc(12px * var(--u));
  opacity: 0;
  z-index: 11;
  background: rgba(6, 10, 20, 0.6);
}
#help {
  position: fixed;
  left: calc(24px * var(--u));
  bottom: calc(6px * var(--u));
  font-size: calc(11px * var(--u));
  color: rgba(160, 180, 220, 0.45);
  z-index: 11;
}

body.poster #hud,
body.poster #scene-num,
body.poster #help,
body.poster #paused {
  display: none;
}
#poster-title {
  display: none;
}
body.poster #poster-title {
  display: block;
  position: fixed;
  left: calc(70px * var(--u));
  bottom: calc(60px * var(--u));
  z-index: 12;
}
#poster-title h1 {
  margin: 0;
  font-size: calc(58px * var(--u));
  font-weight: 800;
  letter-spacing: -0.01em;
}
#poster-title p {
  margin: calc(8px * var(--u)) 0 0;
  font-size: calc(28px * var(--u));
  color: #c9d7f2;
}

.pred { margin: 0; font-size: calc(30px * var(--u)); font-weight: 600; color: #ffe9c9; line-height: 1.25; min-height: calc(76px * var(--u)); }
.lg-row .star { fill: #ffe9c9; stroke: rgba(255,210,130,0.9); stroke-width: 1.5; }