* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-top: #1a1f38;
  --bg-bottom: #3a2233;
  --frame: #5a3b22;
  --accent: #c8a24a;
}

html, body { height: 100%; }

body {
  /* Mobile Safari's collapsing URL bar makes 100% taller than what is actually
     on screen, which slides the top of the app (the HUD labels) up underneath
     the browser chrome. dvh tracks the real, currently-visible viewport.
     The 100% above stays as the fallback for engines without dvh. */
  height: 100dvh;
  font-family: Georgia, 'Times New Roman', serif;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  color: #f0ead8;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* notch / home-indicator safe areas (Capacitor & PWA) */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Full-viewport painted scene behind everything */
#scene-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#scene-layer svg { width: 100%; height: 100%; display: block; }
.scene-lightning { animation: lightningFlicker 4s infinite; }
@keyframes lightningFlicker {
  0%, 88%, 93%, 100% { opacity: 0; }
  90%, 91.5% { opacity: 0.9; }
}

#app {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
}

.screen { display: none; width: 100%; height: 100%; flex-direction: column; }
.screen.active { display: flex; }

/* ---------- Title screen ---------- */
#screen-title {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 24px;
}
#screen-title h1 {
  font-size: 44px;
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 0 3px 0 rgba(0,0,0,0.45);
  line-height: 1.1;
}
#screen-title .subtitle { font-size: 17px; opacity: 0.85; font-style: italic; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
#screen-title .flag-row { font-size: 34px; letter-spacing: 6px; }

.big-btn {
  font-family: inherit;
  font-size: 20px;
  padding: 14px 40px;
  border: 3px solid var(--accent);
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  color: #fff;
  cursor: pointer;
  letter-spacing: 1px;
  transition: transform 0.1s;
}
.big-btn:hover { transform: scale(1.05); background: rgba(255,255,255,0.08); }
.big-btn:disabled { opacity: 0.45; cursor: default; transform: none; }

.chip-btn {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 16px;
  background: rgba(0,0,0,0.4);
  color: #eee;
  cursor: pointer;
}
.chip-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.chip-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- Coins ---------- */
.coin-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.45);
  border: 2px solid #d9b23c;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 15px;
  font-weight: bold;
  color: #ffe9a0;
}
.coin-chip.small { font-size: 13px; padding: 3px 9px; }

/* ---------- Map & museum ---------- */
#screen-map, #screen-museum { overflow-y: auto; padding: 12px 14px 40px; }
#map-topbar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  /* Five chips need ~389px; a 393px phone only offers 365px of content width.
     Without wrapping, justify-content:flex-end pushed the overflow off the LEFT
     edge and clipped the coin chip. Wrap instead of clip. */
  flex-wrap: wrap;
  margin-bottom: 6px;
}
#map-topbar .coin-chip { margin-right: auto; }
#screen-museum #map-topbar .coin-chip { margin-right: 0; margin-left: auto; }
#screen-map h2, #screen-museum h2 {
  text-align: center;
  color: var(--accent);
  margin: 6px 0 12px;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.museum-sub { text-align: center; font-size: 13px; font-style: italic; opacity: 0.85; margin-bottom: 12px; }
.episode {
  margin-bottom: 18px;
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 12px;
  background: rgba(10,10,20,0.55);
}
.episode-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.episode-header .portrait-svg { width: 52px; height: 56px; flex-shrink: 0; }
.episode-header .ep-name { font-size: 18px; font-weight: bold; color: var(--accent); }
.episode-header .ep-years { font-size: 13px; opacity: 0.75; }
.episode-header .ep-tag { font-size: 13px; font-style: italic; opacity: 0.85; }
.level-row { display: flex; gap: 8px; flex-wrap: wrap; }
.level-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
  gap: 2px;
}
.level-btn .lv-stars { font-size: 10px; letter-spacing: 1px; }
.level-btn:hover:not(.locked) { transform: scale(1.08); }
.level-btn.locked {
  border-color: #555;
  color: #777;
  background: rgba(0,0,0,0.3);
  cursor: default;
}

/* museum: a vertical list of era wings */
#museum-grid { display: block; }
.museum-card {
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(10,10,20,0.6);
  padding: 12px 10px;
  text-align: center;
  min-height: 120px;
  cursor: pointer;
}
.museum-card.earned { border-color: var(--accent); }
.museum-card .mc-emoji { font-size: 34px; }
.museum-card .mc-name { font-size: 13px; font-weight: bold; margin-top: 4px; color: #ffe9a0; }
.museum-card .mc-year { font-size: 11px; opacity: 0.7; }
.museum-card .mc-hint { font-size: 11px; opacity: 0.6; margin-top: 6px; font-style: italic; }
.museum-card .mc-fact {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 6px;
  text-align: left;
  display: none;
}
.museum-card.open { grid-column: 1 / -1; }
.museum-card.open .mc-fact { display: block; }
.museum-card.locked { filter: grayscale(1); opacity: 0.65; cursor: default; }

/* ---------- Game screen ---------- */
#screen-game { padding: 8px 10px; gap: 5px; }

#hud {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
#btn-back {
  font-family: inherit;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  color: #eee;
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
}
.hud-box { text-align: center; flex: 1; background: rgba(0,0,0,0.35); border-radius: 10px; padding: 2px 4px; }
.hud-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; }
.hud-value { font-size: 21px; font-weight: bold; }
#hud-moves.low { color: #ff7a6b; animation: pulse 0.8s infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

#progress-wrap {
  width: 100%; height: 10px;
  background: rgba(0,0,0,0.4);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}
#progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), #fff3c4);
  transition: width 0.35s;
}

#scene-label {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.35);
  border-radius: 12px;
  padding: 2px 12px;
  align-self: center;
}

#objectives {
  display: flex;
  gap: 14px;
  justify-content: center;
  font-size: 15px;
  min-height: 22px;
  align-items: center;
}
.objective { display: flex; align-items: center; gap: 4px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.objective.done { opacity: 0.55; }
.objective .obj-glyph { font-size: 19px; }
.obj-art { width: 22px; height: 22px; vertical-align: middle; }

/* Character strip */
#character-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* the portrait column (90px art + name) is the tallest thing in here; sizing
     the strip to it means the bubble can vary underneath without moving the
     board, as long as it stays shorter — see #speech.long below */
  min-height: 104px;
}
/* portrait column keeps its size; the bubble takes exactly what is left */
#character-strip > div:first-child { flex: 0 0 auto; }
.portrait-svg svg { width: 100%; height: 100%; display: block; }
#char-portrait {
  width: 84px;
  height: 90px;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));
  animation: idleBob 3.2s ease-in-out infinite;
}
@keyframes idleBob { 50% { transform: translateY(-3px); } }
#char-portrait.excited { animation: hop 0.5s; }
@keyframes hop {
  30% { transform: translateY(-12px) rotate(-5deg); }
  60% { transform: translateY(0) rotate(4deg); }
}
#char-portrait.grumble { animation: grumble 0.4s; }
@keyframes grumble {
  25% { transform: translateX(-5px) rotate(-3deg); }
  50% { transform: translateX(5px) rotate(3deg); }
  75% { transform: translateX(-3px); }
}
#speech {
  position: relative;
  background: rgba(255,252,240,0.96);
  color: #2a2318;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  /* Was max-width:76%. In a flex row that fought the ~106px portrait column:
     76% + 106px overflows any viewport under ~460px, so the bubble's real
     width came out of a flex-shrink negotiation and changed with every quote.
     flex+min-width:0 gives it the remaining space deterministically, and
     min-width:0 is what lets it shrink below its longest word instead of
     pushing off-screen. */
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow-wrap: anywhere;
  /* reserve enough for the common case so short quotes don't collapse the
     strip and bounce the whole board as lines rotate mid-level */
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
  line-height: 1.3;
}
/* Quotes run 20-138 characters. Rather than let the long ones grow the bubble
   past the portrait column and shove the board down, step them down a size:
   this keeps the tallest bubble (~97px) under the 104px strip, so the board
   holds perfectly still no matter which quote comes up. */
#speech.long { font-size: 12.5px; }
#speech.long #speech-src { font-size: 10px; }
#speech.show { opacity: 1; }
#speech::before {
  content: '';
  position: absolute;
  left: -8px; top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: rgba(255,252,240,0.96);
  border-left: none;
}
#speech-text { font-style: italic; }
#speech-src { font-size: 11px; opacity: 0.65; margin-top: 3px; text-align: right; }
#char-name {
  /* 12px/100px keeps "King George III" on one line; the longest names
     (Elizabeth Cady Stanton, Nurse Josie Brown, USN) still wrap to two, which
     is fine — what we're avoiding is a stray "III" on its own line. */
  font-size: 12px; font-weight: bold; text-align: center; margin-top: -2px;
  color: var(--accent);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  max-width: 100px;
  line-height: 1.15;
}
.intro-name {
  font-size: 15px;
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 2px;
  letter-spacing: 0.5px;
}
.artifact-hint { font-size: 12px; opacity: 0.8; font-style: italic; }

/* in-level powers bar */
#powers {
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
  margin-top: 2px;
}
.power-btn {
  font-family: inherit;
  flex: 1;
  max-width: 150px;
  font-size: 13px;
  padding: 6px 4px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  background: rgba(0,0,0,0.42);
  color: #f0ead8;
  cursor: pointer;
  line-height: 1.2;
}
.power-btn .pw-cost { display: block; font-size: 10px; opacity: 0.7; }
.power-btn:hover { background: rgba(255,255,255,0.1); }
.power-btn.armed {
  border-color: #ffd75e;
  background: rgba(217,178,60,0.3);
  animation: pulse 0.8s infinite;
}

/* era epilogue */
.epilogue-panel { border-color: #b8ae98; text-align: left; }
.epilogue-panel h2 { text-align: center; color: #e3d9be; }
#epilogue-text {
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.55;
  margin: 10px 0 16px;
  opacity: 0.95;
}

/* museum wings (one per era, 3 artifact slots) */
.museum-wing {
  margin-bottom: 14px;
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(10,10,20,0.55);
  padding: 10px;
}
.museum-wing-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.museum-wing-header .portrait-svg { width: 44px; height: 48px; flex-shrink: 0; }
.museum-wing-header .mc-note-btn { margin-left: auto; font-size: 12px; }
.museum-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.museum-row .museum-card { min-height: 100px; padding: 8px 6px; }
.museum-row .museum-card.open { grid-column: 1 / -1; }

/* Moments shelf: every level's brain snack, re-readable at 3-stars */
.snack-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.snack-chip {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  color: #f0ead8;
  cursor: pointer;
  line-height: 1.2;
}
.snack-chip:hover:not(.locked) { background: rgba(255,255,255,0.12); }
.snack-chip.locked { opacity: 0.45; cursor: default; }
.snack-fact {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 9px 11px;
}
.snack-fact b { color: #ffe9a0; }

/* Board */
#board-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
#board {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  touch-action: none; /* piece drags must never scroll the page */
  border-radius: 14px;
  border: 6px solid var(--frame);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.35);
  background: rgba(4,6,14,0.55);
  cursor: pointer;
  display: block;
}
#board.shake { animation: shake 0.35s; }

/* ---------- Tablet (iPad and desktop-sized viewports) ----------
   The phone layout at tablet sizes reads as a phone app in a frame: the
   board pins to its 480px cap in a 1024pt-wide canvas and the lower third
   of the screen is empty sky and ground. Three fixes, gated so no iPhone
   (max ~440pt wide) can ever match:
     - the column and board grow into the space,
     - the board cap is height-aware so the stack can never outgrow the
       viewport (the min() term is the vertical chrome around the board),
     - the game stack centers vertically, splitting the leftover sky
       above and below instead of pooling it all at the bottom.
   Landscape iPad proper (two-pane) is a separate, later piece of work —
   this only makes the portrait presentation use what it is given. */
@media (min-width: 700px) and (min-height: 600px) {
  #app { max-width: 780px; }
  /* clamp floor: a short desktop window must never get LESS board than a
     phone. Ceiling 640 is the tablet target; the middle term keeps the
     stack inside the viewport. */
  #board { max-width: clamp(480px, calc(100dvh - 440px), 640px); }
}
/* Centering is gated taller than the size gains: justify-content:center
   clips overflow at BOTH ends, so on short viewports (a laptop browser
   window, 1024x768) a visible quote bubble could nip the HUD. With 900px+
   the stack always has slack and centering only ever moves sky. */
@media (min-width: 700px) and (min-height: 900px) {
  #screen-game { justify-content: center; padding: 14px 16px; }
}
@keyframes shake {
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 2px); }
}

/* Banners over board */
#banner {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  /* The longest banners ("PRESIDENTIAL ORDER!", "COMMANDER IN CHIEF!") ran
     ~400px at a fixed 30px — wider than the 373px board on a phone, and the
     pop animation peaks at scale(1.12) on top of that, so the first and last
     letters were clipped off the screen. Scale the type to the viewport and
     cap it at the original 30px for tablets/desktop. */
  font-size: clamp(16px, 6vw, 30px);
  font-weight: bold;
  letter-spacing: 0.06em;   /* was 2px — now tracks the font size */
  color: #fff;
  text-shadow: 0 0 14px var(--accent), 0 3px 0 rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  /* safety net: nothing wraps at the sizes above, but a longer string added
     later will break onto two lines instead of running off-screen */
  max-width: 88%;
  text-align: center;
}
#banner.show { animation: bannerPop 1.15s ease-out; }
@keyframes bannerPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  30%  { transform: translate(-50%, -50%) scale(1.0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1.05); }
}

/* Overlays */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 20, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 30;
  /* Overlays sit outside #app, so the body's safe-area padding doesn't
     reach them — without this a panel can run under the notch and home
     indicator on device, which is why the store looked wall-to-wall tall. */
  padding: max(14px, env(safe-area-inset-top, 0)) 12px
           max(14px, env(safe-area-inset-bottom, 0));
}
.overlay.active { display: flex; }
.panel {
  background: linear-gradient(180deg, #2e2a3d, #1d1a29);
  border: 3px solid var(--accent);
  border-radius: 16px;
  padding: 22px 26px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.panel h2 { color: var(--accent); margin-bottom: 6px; letter-spacing: 1px; }
.panel .panel-portrait { font-size: 52px; margin-bottom: 4px; }
.panel .panel-portrait.portrait-svg {
  font-size: unset;
  width: 96px; height: 102px;
  margin: 0 auto 6px;
}
.panel .panel-sub { font-style: italic; opacity: 0.92; margin-bottom: 2px; font-size: 15px; line-height: 1.35; }
.quote-src { font-size: 12px; opacity: 0.6; margin-bottom: 12px; }
.moment-chip {
  display: inline-block;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--accent);
  border-radius: 14px;
  font-size: 13px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.panel .stars-row { font-size: 34px; letter-spacing: 8px; margin-bottom: 8px; }
.panel .goal-line { font-size: 14px; margin-bottom: 10px; opacity: 0.85; }
.coin-award { font-size: 16px; color: #ffe9a0; font-weight: bold; margin-bottom: 10px; min-height: 20px; }
.panel .btn-row { display: flex; gap: 10px; justify-content: center; align-items: center; }

.booster-btn {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 16px;
  border: 2px dashed #d9b23c;
  border-radius: 10px;
  background: rgba(0,0,0,0.3);
  color: #ffe9a0;
  cursor: pointer;
  margin-bottom: 14px;
}
.booster-btn.bought { border-style: solid; background: rgba(217,178,60,0.25); }
.big-btn.danger, .chip-btn.danger { border-color: #c0392b; color: #ff9c90; }
.big-btn.danger:hover, .chip-btn.danger:hover { background: rgba(192,57,43,0.22); }
.booster-btn:disabled { opacity: 0.45; cursor: default; }

/* Artifact card */
.artifact-card {
  border: 2px solid #ffd75e;
  border-radius: 12px;
  background: rgba(60,45,10,0.5);
  padding: 12px 14px;
  margin-bottom: 14px;
  animation: artifactIn 0.6s ease-out;
}
@keyframes artifactIn {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
.artifact-head { font-size: 12px; letter-spacing: 2px; color: #ffd75e; margin-bottom: 6px; }
.artifact-emoji { font-size: 40px; }
.artifact-name { font-weight: bold; color: #ffe9a0; margin: 4px 0; }
.artifact-fact { font-size: 13px; line-height: 1.45; text-align: left; opacity: 0.95; }

/* Simulated ads */
.ad-panel { border-color: #888; }
.ad-tag {
  font-size: 11px;
  letter-spacing: 2px;
  color: #aaa;
  border: 1px solid #666;
  border-radius: 4px;
  display: inline-block;
  padding: 2px 8px;
  margin-bottom: 12px;
}
.ad-body {
  background: repeating-linear-gradient(45deg, #333 0 12px, #3a3a3a 12px 24px);
  border-radius: 10px;
  padding: 26px 16px;
  margin-bottom: 14px;
}
.ad-emoji { font-size: 44px; }
.ad-headline { font-size: 22px; font-weight: bold; letter-spacing: 2px; color: #ddd; margin: 6px 0; }
.ad-sub { font-size: 12px; opacity: 0.7; line-height: 1.5; }

#banner-ad {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  background: repeating-linear-gradient(45deg, #2a2a30 0 10px, #32323a 10px 20px);
  border-top: 1px solid #555;
  color: #999;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
  padding: 8px 0;
  z-index: 20;
  display: none;
}
#banner-ad.show { display: block; }
.banner-spacer { height: 44px; flex-shrink: 0; }

#toast {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  border: 1px solid var(--accent);
  color: #fff;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 40;
}
#toast.show { opacity: 1; }

/* Narrow phones: tighten the chrome so the map top bar still fits on one row
   and the two-button result row doesn't wrap "THE END (FOR NOW)" onto 3 lines. */
@media (max-width: 420px) {
  .chip-btn { font-size: 13px; padding: 6px 10px; }
  #map-topbar .coin-chip { padding: 5px 9px; }
  .big-btn { font-size: 18px; padding: 12px 18px; }
}

@media (max-height: 780px) {
  /* same trick at the smaller portrait size: strip 94px > tallest bubble ~85px */
  #character-strip { min-height: 94px; }
  #char-portrait { width: 64px; height: 68px; }
  #speech { min-height: 74px; font-size: 13px; padding: 7px 10px; }
  #speech.long { font-size: 11px; }
  #speech.long #speech-src { font-size: 9.5px; }
  #screen-title h1 { font-size: 36px; }
  .panel { padding: 16px 18px; }
}

/* ---------- Store ---------- */
/* The store panel pins its header and CLOSE button and scrolls ONLY the
   product list. The generic .panel scrolls as one block, which at eight
   rows meant a 92vh wall with the escape hatch buried inside the scroll.
   dvh + the .overlay safe-area padding keep it honest on notched phones. */
#overlay-store .panel {
  display: flex;
  flex-direction: column;
  max-height: 100%;   /* the padded .overlay box, not the raw viewport */
  overflow: hidden;   /* the list below is the one scroller */
}
#store-list {
  display: flex; flex-direction: column; gap: 8px; margin: 14px 0 10px;
  overflow-y: auto;
  min-height: 0;      /* lets a flex child actually shrink and scroll */
  -webkit-overflow-scrolling: touch;
}
.store-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  width: 100%;
}
.store-row.featured { border-style: solid; border-color: #ffd75e; }
.store-name { display: flex; flex-direction: column; line-height: 1.25; }
.store-name em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #ffd75e;
}
.store-sub { font-size: 11px; opacity: 0.75; margin-top: 2px; }
.store-price {
  font-weight: bold;
  color: #ffe9a0;
  white-space: nowrap;
  flex-shrink: 0;
}
#store-list .goal-line { text-align: center; }

/* Purchase failures include StoreKit's own message, which can wrap. */
#store-status { white-space: pre-line; font-size: 12px; line-height: 1.35; }