/* ============================================================
   THE LEGEND OF DOMINIC — EP 1: THE CHIP
   The look of the story player.

   A full picture above a compact reading console. Dialogue, chapter
   titles and choices share the console so controls never cover the art.
   Slim warm borders and gold accents frame the pixel illustrations. The reading
   text is set in Jersey 15, a heavy pixel face that stays legible at
   reading size; the labels in Silkscreen.

   Loaded only by the EP 1 page (src/pages/ep1.html).

     1. the stage, its palette and the device
     2. the screen: frame, picture, grade, grain, dissolve
     3. the act title card
     4. the hud and the panel
     5. the console: portrait, name, text
     6. the choices and the clock
     7. the resume card
     8. small screens, reduced motion
   ============================================================ */

/* ---------- 1. the stage ---------- */
.ep1 {
  --u: clamp(3px, .25vw, 4px);           /* one "pixel" of the frames */
  --ink: #0D0A08;
  --panel: #18120F;
  --panel-2: #241C17;
  --bezel: #2B221C;
  --bezel-hi: #4A3C31;
  --edge-dim: #8C7D66;
  --gold: #F2B417;
  --gold-hi: #FFD35A;
  --paper: #F6EEDC;
  --dim: #A89C88;
  --red: #E0473A;
  --tint: var(--gold);                   /* the speaker's colour */
  --hud: 52px;
  --ep1-scale: 1;
  --read: 'Jersey 15', 'Courier New', monospace;
  --label: Silkscreen, 'Courier New', monospace;

  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 15%, #29231C, #100F0E 75%);
  color: var(--paper);
  font-family: var(--read);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
:where(.ep1) button { font-family: inherit; }

/* the notched pixel frame used by the small boxes */
.ep1-pick, .ep1-panel, .ep1-open-card, .ep1-clock {
  box-shadow:
    0 calc(var(--u) * -1) 0 0 var(--edge-dim),
    0 var(--u) 0 0 var(--edge-dim),
    calc(var(--u) * -1) 0 0 0 var(--edge-dim),
    var(--u) 0 0 0 var(--edge-dim),
    0 calc(var(--u) * -2) 0 0 var(--ink),
    0 calc(var(--u) * 2) 0 0 var(--ink),
    calc(var(--u) * -2) 0 0 0 var(--ink),
    calc(var(--u) * 2) 0 0 0 var(--ink),
    calc(var(--u) * 2) calc(var(--u) * 3) 0 0 rgba(0, 0, 0, .55);
}

/* The stage is everything under the hud, and the device is sized to
   it: the screen as wide as it can be while the whole 16:9 picture
   and the console both fit. */
.ep1-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  container-type: size;
  display: grid; place-items: center;
  padding: 10px clamp(12px, 1.6vw, 28px) max(16px, env(safe-area-inset-bottom));
  cursor: pointer;
}
.ep1-device {
  --gap: 12px;
  --con-h: clamp(174px, 21cqh, 198px);
  position: relative;
  width: min(100cqw, (100cqh - var(--con-h) - var(--gap)) * 16 / 9, 1800px);
  display: flex; flex-direction: column; gap: var(--gap);
}

/* ---------- 2. the screen ---------- */
.ep1-screen {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 1px #65533B, 0 0 0 4px #181512, 0 12px 36px #0006;
}
.ep1-scene {
  position: absolute; inset: 0;
  transition: filter 1.1s cubic-bezier(.4, 0, .2, 1);
}
.ep1-layer {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 1;
  transition: opacity .9s ease;
}
.ep1-layer.is-off { opacity: 0; }
/* the whole picture, edge to edge, nothing cropped */
.ep1-layer img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: contain;
}
/* a change mid-conversation: the new picture breathes in */
.ep1-layer.is-enter { animation: ep1-layer-in 1s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes ep1-layer-in {
  from { opacity: 0; filter: brightness(1.5) saturate(.6) blur(6px); }
  to   { opacity: 1; filter: none; }
}

/* A light screen texture preserves the artwork's brightness. */
.ep1-grade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .035) 0 1px, transparent 1px 3px);
}
.ep1-grain {
  position: absolute; inset: -50%; z-index: 3; pointer-events: none;
  opacity: .025; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: ep1-grain .9s steps(6) infinite;
}
@keyframes ep1-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* Decisions live below the picture, which keeps its colour and brightness. */
.ep1.is-choosing .ep1-scene {
  filter: none;
}

/* the pixel dissolve, drawn by js */
.ep1-dissolve {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ---------- 3. the act title card ---------- */
.ep1-title {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.ep1.is-titling .ep1-title { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.ep1-title-act {
  margin: 0;
  font-family: var(--label); font-size: clamp(13px, 1.2vw, 18px);
  letter-spacing: .3em; color: var(--gold);
  text-shadow: 3px 3px 0 #000;
}
.ep1-title-name {
  margin: 0;
  font-family: var(--read);
  font-size: clamp(28px, 3.2vw, 54px); line-height: 1;
  color: var(--paper);
  text-shadow: 0 .05em 0 #000, .05em .05em 0 #000, 0 0 .5em rgba(242, 180, 23, .25);
}
.ep1-title-name span { display: inline-block; opacity: 0; transform: translateY(.3em); }
.ep1.is-titling .ep1-title-name span {
  animation: ep1-letter .45s cubic-bezier(.2, 1.4, .4, 1) forwards;
  animation-delay: calc(.25s + var(--i) * 55ms);
}
@keyframes ep1-letter { to { opacity: 1; transform: none; } }
.ep1-title-rule {
  display: block; height: var(--u); width: 0;
  background: var(--gold);
  box-shadow: 0 var(--u) 0 #7A5A0C;
  transition: width .9s steps(18) .35s;
}
.ep1.is-titling .ep1-title-rule { width: 40%; }

/* ---------- 4. the hud ---------- */
.ep1-hud {
  position: relative; z-index: 9; flex: none;
  height: var(--hud);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(14px, 2.5vw, 34px);
  border-bottom: 1px solid #ffffff0d;
}
.ep1-chaptertag {
  margin: 0; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--label); font-size: clamp(11px, .9vw, 14px);
  letter-spacing: .1em; color: var(--gold); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep1-chaptertag::before {
  content: ''; flex: none; width: 8px; height: 8px; background: var(--gold);
  box-shadow: 0 0 0 2px #000;
}
@keyframes ep1-blink { 50% { opacity: .25; } }
.ep1-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.ep1-saved { font-family: var(--label); font-size: 12px; color: var(--gold); }
.ep1-tool {
  font-family: var(--label); font-size: clamp(10px, .8vw, 12px); line-height: 1;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--dim); background: var(--panel-2);
  border: 1px solid #4A3E33; min-height: 32px; padding: 7px 11px; cursor: pointer;
  box-shadow: 0 2px 0 #0006;
  transition: color .12s steps(2), background .12s steps(2), transform .12s steps(2);
}
.ep1-tool:hover, .ep1-tool[aria-expanded="true"] {
  color: var(--ink); background: var(--gold); border-color: var(--gold);
}
.ep1-tool:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }

/* the panel: checkpoints, scenes, settings */
.ep1-panel {
  position: absolute; z-index: 10;
  top: calc(var(--hud) + 8px); right: clamp(14px, 2.5vw, 34px);
  width: min(92vw, 560px); max-height: calc(100% - var(--hud) - 30px); overflow: auto;
  padding: 20px 22px 18px;
  background: var(--panel);
  font-family: Nunito, 'Trebuchet MS', sans-serif;
  animation: ep1-pop .28s cubic-bezier(.2, 1.3, .4, 1) both;
  scrollbar-width: thin;
}
@keyframes ep1-pop { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.ep1-panel-head { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--dim); }
.ep1-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ep1-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 13px; background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 2px #3A3029;
}
.ep1-row.is-empty { color: var(--dim); justify-content: center; }
.ep1-row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ep1-row-label { font-size: 17px; font-weight: 700; }
.ep1-row-sub { font-size: 13px; color: var(--dim); }
.ep1-row-acts { display: flex; gap: 8px; flex: none; }
.ep1-mini, .ep1-seg-btn {
  font-family: var(--label); font-size: 12px; line-height: 1; text-transform: uppercase;
  color: var(--paper); background: #2E251F; border: 0; cursor: pointer;
  padding: 9px 11px;
  box-shadow: inset 0 0 0 2px #5A4B3E;
  transition: background .1s steps(2), color .1s steps(2);
}
.ep1-mini:hover, .ep1-seg-btn:hover { background: #3E3229; box-shadow: inset 0 0 0 2px var(--gold); }
.ep1-mini.is-warn:hover { box-shadow: inset 0 0 0 2px var(--red); color: var(--red); }
.ep1-mini:disabled { opacity: .5; cursor: default; }
.ep1-shut { margin-top: 16px; }
.ep1-set { padding: 12px 14px; }
.ep1-set > .ep1-row-label { flex: none; width: 116px; font-family: var(--label); font-size: 12px; font-weight: 400; color: var(--gold); text-transform: uppercase; }
.ep1-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.ep1-seg-btn { min-width: 44px; height: 32px; }
.ep1-seg-btn[aria-checked="true"] { background: var(--gold); color: var(--ink); box-shadow: inset 0 0 0 2px #000; }
.ep1-slide { flex: 1; display: flex; align-items: center; gap: 12px; }
.ep1-slide input[type="range"] { flex: 1; height: 22px; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }
.ep1-slide input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--gold) var(--fill, 50%), #3A3029 var(--fill, 50%)); box-shadow: 0 0 0 2px #000; }
.ep1-slide input[type="range"]::-moz-range-track { height: 8px; background: #3A3029; }
.ep1-slide input[type="range"]::-moz-range-progress { height: 8px; background: var(--gold); }
.ep1-slide input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 20px; margin-top: -6px; background: var(--paper); box-shadow: 0 0 0 2px #000; }
.ep1-slide input[type="range"]::-moz-range-thumb { width: 14px; height: 18px; border: 0; border-radius: 0; background: var(--paper); }
.ep1-slide-val { width: 50px; text-align: right; font-family: var(--label); font-size: 12px; }
.ep1-acct { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.ep1-acct .ep1-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body:has(#ep1) #accountBar { display: none !important; }

/* ---------- 5. the console ---------- */
.ep1-console {
  position: relative; height: var(--con-h); flex: none;
  display: flex; flex-direction: column;
  background: linear-gradient(130deg, #29231D, #1B1815);
  border: 1px solid #514333;
  box-shadow: 0 4px 0 #0004;
}
.ep1-console:has(.ep1-picks:not([hidden])) .ep1-box,
.ep1-console:has(.ep1-picks:not([hidden])) .ep1-reading-tools { display: none; }
.ep1.is-titling .ep1-box, .ep1.is-titling .ep1-reading-tools { visibility: hidden; }
.ep1-reading-tools {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex: none; padding: 0 20px 8px; min-height: 30px;
}
.ep1-reading-label { font: 9px var(--label); letter-spacing: .12em; color: var(--dim); }
.ep1-reading-label span { color: #6E5D43; margin: 0 6px; }
.ep1-advance {
  display: flex; align-items: center; gap: 12px;
  padding: 3px 0 3px 14px; border: 0; background: none;
  color: var(--gold-hi); font: 12px var(--label); cursor: pointer;
}
.ep1-advance:hover { color: #fff; }
.ep1-advance:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.ep1-box {
  --pin: 16px;
  position: relative;
  display: flex; align-items: stretch; gap: clamp(14px, 1.6vw, 24px);
  flex: 1; min-height: 0; width: 100%;
  padding: var(--pin) 24px 8px;
}
/* the speaker's colour along the top of the console */
.ep1-box::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--u);
  background: var(--tint);
  opacity: 0; transition: opacity .3s ease, background .3s steps(3);
}
.ep1-box.is-speech::before { opacity: 1; }

/* the portrait, filling the console's height */
.ep1-portrait {
  flex: none; position: relative;
  height: min(100%, 100px); aspect-ratio: 1; align-self: center;
  background: #1A1410;
  box-shadow: 0 0 0 1px var(--tint), 0 0 0 4px #100E0C;
  transition: box-shadow .3s steps(3);
}
.ep1-portrait[hidden] { display: none; }
.ep1-portrait img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; image-rendering: pixelated;
}
.ep1-portrait.is-pop { animation: ep1-portrait-in .42s cubic-bezier(.2, 1.5, .4, 1) both; }
.ep1-portrait.is-bump img { animation: ep1-bump .3s steps(4) both; }
@keyframes ep1-portrait-in { from { opacity: 0; transform: translateY(10px) scale(.88); } }
@keyframes ep1-bump { 0% { transform: translateY(0); } 40% { transform: translateY(-5%); } 100% { transform: none; } }

.ep1-words {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.2, .4, 1);
}
.ep1-box.is-shown .ep1-words { opacity: 1; transform: none; }

/* the name, right beside the face */
.ep1-name {
  align-self: flex-start;
  margin: 0; padding: 0 0 2px;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--label); font-weight: 700;
  font-size: clamp(12px, 1vw, 15px); letter-spacing: .1em; line-height: 1.3;
  color: var(--tint);
}
.ep1-name[hidden] { display: none; }
.ep1-name::before { content: ''; width: 5px; height: 5px; background: var(--tint); }
.ep1-box.is-new-speaker .ep1-name { animation: ep1-plate .38s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes ep1-plate { from { opacity: 0; transform: translateX(-14px); } }

/* the line, typed in a letter at a time; shrunk by js (--fit) only if
   a long one would not fit the console */
.ep1-line {
  flex: 1 1 0; min-height: 0; overflow: hidden;
  margin: 0;
  font-family: var(--read);
  font-size: calc(clamp(24px, 2vw, 32px) * var(--ep1-scale) * var(--fit, 1));
  line-height: 1.25; letter-spacing: .01em;
  color: var(--paper);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .8);
}
.ep1-box.is-narr .ep1-line { color: #E9DCC0; }
.ep1-box.is-narr .ep1-line::before {
  content: '\25C6'; color: var(--gold); margin-right: .45em; font-size: .7em; vertical-align: .12em;
}
.ep1-line .w { display: inline-block; white-space: nowrap; }
.ep1-line .ch { display: inline-block; opacity: 0; transform: translateY(.35em) scale(.9); }
.ep1-line .ch.on { animation: ep1-ch .2s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.ep1-line .ch.is-instant { animation: none; opacity: 1; transform: none; }
@keyframes ep1-ch { to { opacity: 1; transform: none; } }
.ep1-line .em { color: #FFE7B0; }
/* a word in capitals is shouted: gold, and it shakes as it lands */
.ep1-line .w.is-shout { color: var(--gold-hi); }
.ep1-line .w.is-shout .ch.on { animation: ep1-ch .2s cubic-bezier(.2, 1.4, .4, 1) forwards, ep1-shake .36s steps(3) .2s 2; }
@keyframes ep1-shake { 33% { transform: translate(-1px, 1px); } 66% { transform: translate(1px, -1px); } }

/* the "more" marker, once the line is all there */
.ep1-more {
  display: none;
  position: absolute; right: clamp(14px, 1.6vw, 22px); bottom: clamp(10px, 1.4cqh, 16px);
  width: 14px; height: 11px;
  background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 80% 20%, 80% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 40%, 20% 40%, 20% 20%, 0 20%);
  opacity: 0;
}
.ep1-more.is-on { opacity: 1; animation: ep1-more .8s steps(2) infinite; }
@keyframes ep1-more { 50% { transform: translateY(4px); } }

/* ---------- 6. the choices ----------
   Choices replace the dialogue within the console, below the picture. */
.ep1-picks {
  position: relative; z-index: 1; width: 100%; height: 100%; overflow-y: auto;
  padding: 16px 20px; display: flex; flex-direction: column; justify-content: safe center; gap: 14px;
}
.ep1-picks[hidden] { display: none; }
.ep1-decision-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ep1-decision-label { margin: 0; color: var(--dim); font: 11px var(--label); letter-spacing: .06em; }
.ep1-picklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
.ep1-pick {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-width: 0; min-height: 62px; padding: 12px; text-align: left;
  font-family: var(--read);
  font-size: calc(clamp(20px, 1.5vw, 25px) * var(--ep1-scale)); line-height: 1.2; letter-spacing: .01em;
  color: var(--paper); background: rgba(20, 16, 13, .94);
  border: 1px solid #6F5A3E; cursor: pointer; box-shadow: 0 3px 0 #0005;
  opacity: 0; transform: translateY(14px);
  animation: ep1-pick-in .45s cubic-bezier(.2, 1.2, .4, 1) forwards;
  animation-delay: calc(.1s + var(--i) * 80ms);
  transition: background .15s steps(2), color .15s steps(2), transform .18s cubic-bezier(.2, 1.4, .4, 1), opacity .4s ease, filter .4s ease;
}
@keyframes ep1-pick-in { to { opacity: 1; transform: none; } }
.ep1-pick::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 10px; height: 14px; margin-top: -7px;
  background: var(--gold);
  clip-path: polygon(0 0, 30% 0, 30% 14%, 60% 14%, 60% 36%, 100% 36%, 100% 64%, 60% 64%, 60% 86%, 30% 86%, 30% 100%, 0 100%);
  opacity: 0; transform: translateX(-6px); transition: opacity .15s steps(2), transform .15s steps(2);
}
.ep1-pick:hover, .ep1-pick:focus-visible { background: #3D3020; border-color: var(--gold); outline: 1px solid var(--gold); outline-offset: 0; }
.ep1-pick:hover::after, .ep1-pick:focus-visible::after { opacity: 1; transform: none; }
.ep1-key {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px;
  font-family: var(--label); font-weight: 700; font-size: 14px;
  color: var(--ink); background: var(--gold);
  box-shadow: inset -3px -3px 0 0 #B07F0B, inset 3px 3px 0 0 var(--gold-hi), 0 0 0 2px #000;
}
.ep1-picktext { flex: 1 1 auto; padding-right: 24px; }

/* one way on: small, centred, no clock, no grey */
.ep1-picks.is-single { align-items: stretch; }
.ep1-picks.is-single .ep1-decision-label { font-size: 0; }
.ep1-picks.is-single .ep1-decision-label::after { content: 'Continue the story'; font-size: 11px; }
.ep1-picks.is-single .ep1-picklist { display: flex; }
.ep1-picks.is-single .ep1-pick { width: auto; max-width: 100%; min-width: min(200px, 100%); padding: 12px 20px; }
.ep1-picks.is-single .ep1-key { display: none; }
.ep1-picks.is-single .ep1-picktext { padding-right: 18px; }
.ep1-picks.is-single .ep1-pick::after { opacity: 1; transform: none; animation: ep1-nudge 1s steps(2) infinite; }
@keyframes ep1-nudge { 50% { transform: translateX(4px); } }

/* chosen: the pick lights up gold and the rest fall away */
.ep1-pick.is-chosen {
  opacity: 1;
  background: var(--gold); color: var(--ink);
  transform: scale(1.02);
  animation: ep1-chosen .5s steps(4) both;
  z-index: 1;
}
.ep1-pick.is-chosen .ep1-key { background: var(--ink); color: var(--gold); box-shadow: 0 0 0 2px #000; }
.ep1-pick.is-chosen::after { background: var(--ink); opacity: 1; transform: none; }
@keyframes ep1-chosen {
  0% { filter: brightness(2.2); } 50% { filter: brightness(1.2); } 75% { filter: brightness(1.6); } 100% { filter: none; }
}
.ep1-pick.is-dismissed { opacity: 0 !important; transform: translateY(10px) !important; filter: blur(2px); pointer-events: none; }
.ep1-pick.is-timeout::before {
  content: 'TIME'; position: absolute; left: -2px; top: -12px;
  padding: 3px 6px; font-family: var(--label); font-size: 11px;
  color: var(--paper); background: var(--red); box-shadow: 0 0 0 2px #000;
}

/* the clock: a row of blocks that run out */
.ep1-clock {
  align-self: center; flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0; background: none; box-shadow: none;
  animation: ep1-pop .3s cubic-bezier(.2, 1.3, .4, 1) both;
}
.ep1-clock[hidden] { display: none; }
.ep1-clock-label { font-family: var(--label); font-size: 12px; letter-spacing: .2em; color: var(--gold); }
.ep1-clock-bar { display: flex; gap: 3px; }
.ep1-clock-bar i { width: clamp(6px, .6vw, 9px); height: 10px; background: var(--gold); box-shadow: inset -2px -2px 0 #B07F0B; transition: background .1s steps(1); }
.ep1-clock-bar i.is-out { background: #3A3029; box-shadow: none; }
.ep1-clock.is-low .ep1-clock-bar i:not(.is-out) { background: var(--red); box-shadow: inset -2px -2px 0 #8E1F16; animation: ep1-blink .5s steps(2) infinite; }
.ep1-clock.is-low .ep1-clock-label { color: var(--red); }

/* ---------- 7. resume ---------- */
.ep1-open {
  position: absolute; inset: 0; z-index: 12;
  display: grid; place-items: center;
  background: rgba(8, 6, 5, .6);
  cursor: default;
}
.ep1-open[hidden] { display: none; }
.ep1-open-card {
  padding: 26px 30px 24px; text-align: center;
  background: var(--panel);
  animation: ep1-pop .4s cubic-bezier(.2, 1.3, .4, 1) both;
}
.ep1-open-kicker { margin: 0 0 12px; font-family: var(--label); font-size: 12px; letter-spacing: .2em; color: var(--gold); }
.ep1-open-head { margin: 0 0 20px; font-family: var(--read); font-size: 34px; }
.ep1-open-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ep1-btn {
  font-family: var(--label); font-size: 14px; text-transform: uppercase;
  color: var(--paper); background: #2E251F; border: 0; cursor: pointer;
  padding: 12px 18px;
  box-shadow: 0 -3px 0 0 #000, 0 3px 0 0 #000, -3px 0 0 0 #000, 3px 0 0 0 #000, inset 0 0 0 2px #5A4B3E, 3px 6px 0 0 rgba(0,0,0,.6);
  transition: transform .12s steps(2), background .12s steps(2);
}
.ep1-btn:hover { transform: translateY(-3px); background: #3E3229; }
.ep1-btn.is-gold { background: var(--gold); color: var(--ink); box-shadow: 0 -3px 0 0 #000, 0 3px 0 0 #000, -3px 0 0 0 #000, 3px 0 0 0 #000, inset -3px -3px 0 0 #B07F0B, 3px 6px 0 0 rgba(0,0,0,.6); }
.ep1-btn.is-gold:hover { background: var(--gold-hi); }

.ep1.is-ending .ep1-chaptertag { color: var(--paper); }

/* ---------- 8. small screens, reduced motion ---------- */
/* a phone: the screen across the top, the console under it, and the
   choices under that, in the flow */
@media (max-width: 760px) {
  .ep1 { --hud: 80px; }
  .ep1-hud { padding: 10px 12px; gap: 8px; flex-wrap: wrap; align-content: center; }
  .ep1-tools { gap: 6px; }
  .ep1-tool { padding: 7px 9px; font-size: 9px; min-height: 32px; }
  .ep1-chaptertag { width: 100%; font-size: 10px; }
  .ep1-stage { place-items: start center; padding: 10px 12px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; container-type: inline-size; }
  .ep1-device { --gap: 12px; --con-h: auto; width: 100%; }
  .ep1-console { min-height: 206px; }
  .ep1-box { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; min-height: 146px; padding: 16px; }
  .ep1-portrait { height: 60px; grid-column: 1; grid-row: 1; }
  .ep1-words { display: contents; }
  .ep1-name { grid-column: 2; grid-row: 1; align-self: center; }
  .ep1-name { font-size: 12px; }
  .ep1-line { grid-column: 1 / -1; flex: none; overflow: visible; font-size: calc(24px * var(--ep1-scale)); }
  .ep1-box.is-narr { display: block; }
  .ep1-reading-tools { padding: 4px 16px 12px; min-height: 44px; }
  .ep1-advance { min-height: 32px; }
  .ep1-picks { height: auto; padding: 16px; }
  .ep1-picklist { grid-template-columns: 1fr; gap: 10px; }
  .ep1-pick { font-size: calc(22px * var(--ep1-scale)); min-height: 54px; padding: 10px 12px; gap: 12px; }
  .ep1-key { width: 24px; height: 24px; font-size: 12px; }
  .ep1-picktext { padding-right: 14px; }
  .ep1-pick::after { display: none; }
  .ep1-panel { left: 10px; right: 10px; width: auto; }
  .ep1-row { flex-direction: column; align-items: stretch; gap: 9px; }
  .ep1-set > .ep1-row-label { width: auto; }
  .ep1-clock-bar i { width: 6px; height: 10px; }
  .ep1-open-card { max-width: calc(100vw - 32px); padding: 24px 16px; }
  .ep1-open-head { font-size: 28px; }
}

/* In a short landscape window, reading alongside the full image gives
   both more room than squeezing a console beneath it. */
@media (min-width: 600px) and (max-height: 600px) and (orientation: landscape) {
  .ep1 { --hud: 46px; }
  .ep1-hud { flex-wrap: nowrap; padding: 0 12px; }
  .ep1-chaptertag { width: auto; font-size: 10px; }
  .ep1-stage { container-type: size; padding: 8px 12px 12px; place-items: center; }
  .ep1-device { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 32%); align-items: center; }
  .ep1-screen { width: min(100%, 100cqh * 16 / 9); justify-self: center; }
  .ep1-console { height: 100cqh; min-height: 0; overflow-y: auto; }
  .ep1-box { flex: 1 0 auto; display: flex; flex-direction: column; padding: 14px; gap: 12px; }
  .ep1-portrait { height: 54px; align-self: flex-start; }
  .ep1-words { display: flex; transform: none; }
  .ep1-line { flex: none; overflow: visible; font-size: calc(23px * var(--ep1-scale)); }
  .ep1-reading-tools { padding: 6px 14px 10px; }
  .ep1-reading-label { display: none; }
  .ep1-picks { height: auto; min-height: 100%; overflow: visible; padding: 14px; }
  .ep1-picklist { grid-template-columns: 1fr; gap: 10px; }
  .ep1-decision-head { flex-wrap: wrap; }
  .ep1-pick { min-height: 48px; font-size: 21px; }
  .ep1-title-name { font-size: 28px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ep1-grain, .ep1-more.is-on, .ep1-chaptertag::before { animation: none; }
  .ep1-layer.is-enter { animation: none; }
  .ep1-line .ch, .ep1-line .ch.on { animation: none; opacity: 1; transform: none; }
  .ep1-pick { animation: none; opacity: 1; transform: none; }
  .ep1-title-name span { animation: none !important; opacity: 1; transform: none; }
  .ep1-scene { transition-duration: .2s; }
}