.chms-stage {
  --wine: #901322;
  --orange: #f92b01;
  --teal: #0f7767;
  --purple: #6e2c7d;
  --ink: #252129;
  --paper: #fff8ee;
  --cream: #f4ead7;
  --line: #171018;
  --muted: #6f6668;
  --sky: #2d95d4;
  --good: #2f8f4f;
  --warning: #e7a819;
  --danger: #b81f2d;
}
.chms-stage, .chms-stage * {
  box-sizing: border-box;
}
.chms-stage [hidden] {
  display: none !important;
}
.chms-stage, .chms-stage {
  min-height: 100%;
}
.chms-stage {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, #1c6fa8 0, #7fd0f2 34%, #f4ead7 34%, #e6dcc8 100%);
  font-family: "Trebuchet MS", Verdana, sans-serif;
}
.chms-stage button {
  font: inherit;
}
.chms-stage .game-shell {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
.chms-stage .screen {
  min-height: 100vh;
  display: none;
}
.chms-stage .screen.is-active {
  display: block;
}
.chms-stage .title-screen {
  position: relative;
  isolation: isolate;
  background: #000;
}
.chms-stage .title-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  z-index: -2;
}
.chms-stage .title-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 13, 24, 0.03), rgba(14, 13, 24, 0.42));
  z-index: -1;
}
.chms-stage .title-overlay {
  width: min(920px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: clamp(24px, 5vh, 56px) 0 28px;
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 0 #000, 4px 0 0 #000, -4px 0 0 #000, 0 -4px 0 #000;
}
.chms-stage .kicker {
  margin: 0 0 10px;
  color: #fff;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 700;
  text-transform: uppercase;
}
.chms-stage h1, .chms-stage h2, .chms-stage h3 {
  margin: 0;
  line-height: 1.06;
}
.chms-stage h1 {
  max-width: 900px;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(42px, 9cqw, 112px);
  text-transform: uppercase;
}
.chms-stage .tagline {
  width: min(720px, 100%);
  margin: 16px auto 0;
  font-size: clamp(18px, 2.2cqw, 28px);
  font-weight: 800;
}
.chms-stage .title-actions, .chms-stage .ending-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
}
.chms-stage .primary-btn, .chms-stage .secondary-btn, .chms-stage .choice-btn {
  border: 4px solid #100a12;
  border-radius: 8px;
  box-shadow: 0 5px 0 #100a12;
  cursor: pointer;
  font-weight: 900;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.chms-stage .primary-btn {
  min-height: 52px;
  padding: 12px 22px;
  color: #fff;
  background: var(--orange);
}
.chms-stage .secondary-btn {
  min-height: 52px;
  padding: 12px 22px;
  color: #fff;
  background: var(--teal);
}
.chms-stage .primary-btn:hover, .chms-stage .secondary-btn:hover, .chms-stage .choice-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #100a12;
}
.chms-stage .primary-btn:active, .chms-stage .secondary-btn:active, .chms-stage .choice-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #100a12;
}
.chms-stage .primary-btn:focus-visible, .chms-stage .secondary-btn:focus-visible, .chms-stage .choice-btn:focus-visible, .chms-stage .meter:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}
.chms-stage .game-screen {
  position: relative;
  width: min(960px, 94cqw);
  aspect-ratio: 16 / 9;
  min-height: 0;
  margin: clamp(16px, 4vh, 48px) auto;
  overflow: hidden;
  border: 3px solid #100a12;
  border-radius: 14px;
  background: #0e0b18;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.chms-stage .scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.chms-stage .scene img, .chms-stage .scene svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.chms-stage .scene img {
  image-rendering: auto;
}
.chms-stage .scene svg {
  image-rendering: pixelated;
}
.chms-stage .scene .scenario-raster {
  transform: none;
  animation: none;
}
.chms-stage .scene .drift {
  animation: chms-drift 2800ms steps(8) infinite alternate;
}
.chms-stage .scene .blink {
  animation: chms-blink 3800ms steps(1) infinite;
}
.chms-stage .hud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 8px 10px 18px;
  background: linear-gradient(180deg, rgba(10, 8, 18, 0.85), rgba(10, 8, 18, 0));
  pointer-events: none;
}
.chms-stage .hud-decision, .chms-stage .hud-credit, .chms-stage .meter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  color: #fff;
  background: rgba(10, 8, 18, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-left: 4px solid var(--bar, rgba(255, 255, 255, 0.55));
  border-radius: 7px;
  white-space: nowrap;
  font-weight: 800;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.chms-stage .hud-decision {
  --bar: #19a98f;
}
.chms-stage .hud-credit {
  --bar: #f9764f;
  margin-left: auto;
  color: #ffe28a;
}
.chms-stage .meters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.chms-stage .meter-label {
  font-weight: 800;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.chms-stage .meter-value {
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  font-weight: 900;
  color: #ffe28a;
}
.chms-stage .meter.bumped {
  animation: chms-bump 520ms ease;
}
.chms-stage .dialogue {
  position: absolute;
  left: 3.5%;
  right: 3.5%;
  bottom: 4%;
  z-index: 30;
  width: auto;
  overflow: visible;
  padding: clamp(14px, 2.2cqw, 24px);
  color: #f6eeda;
  background: rgba(17, 20, 46, 0.93);
  border: 4px solid #1f9e86;
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 3px rgba(8, 10, 26, 0.92),
    inset 0 0 0 6px rgba(31, 158, 134, 0.45),
    0 12px 34px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.chms-stage .dialogue-nameplate {
  position: absolute;
  top: -18px;
  left: 26px;
  padding: 4px 16px;
  color: #fff;
  background: var(--wine);
  border: 3px solid #1f9e86;
  border-radius: 10px;
  font-weight: 900;
  font-size: clamp(14px, 1.4cqw, 19px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
.chms-stage .dialogue-content {
  position: relative;
  overflow: hidden;
}
.chms-stage .dialogue-text {
  margin: 6px 0 0;
  min-height: 1.5em;
  font-size: clamp(15px, 1.9cqw, 20px);
  line-height: 1.45;
}
.chms-stage .dialogue-next {
  display: inline-block;
  margin-top: 8px;
  color: #ffe28a;
  font-size: 20px;
  animation: chms-bob 760ms steps(2) infinite alternate;
}
.chms-stage .choice-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.chms-stage .choice-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  text-align: left;
  color: #f6eeda;
  background: rgba(255, 255, 255, 0.06);
  border: 3px solid rgba(31, 158, 134, 0.7);
  border-radius: 10px;
  box-shadow: none;
}
.chms-stage .choice-btn:hover, .chms-stage .choice-btn:focus-visible {
  background: var(--teal);
  border-color: #fff;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}
.chms-stage .choice-key {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--wine);
  border: 2px solid #fff;
  border-radius: 6px;
  font-weight: 900;
}
.chms-stage .choice-label {
  font-size: clamp(15px, 1.3cqw, 18px);
  line-height: 1.3;
  font-weight: 700;
}
.chms-stage .continue-prompt {
  margin-top: 16px;
  padding: 11px 24px;
  color: #fff;
  background: var(--orange);
  border: 3px solid #100a12;
  border-radius: 10px;
  box-shadow: 0 4px 0 #100a12;
  font-weight: 900;
  cursor: pointer;
}
.chms-stage .ending-screen {
  display: none;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 16%, rgba(249, 43, 1, 0.22), transparent 25%),
    linear-gradient(145deg, #0f7767 0, #901322 64%, #31101a 100%);
}
.chms-stage .ending-screen.is-active {
  display: grid;
}
.chms-stage .ending-copy, .chms-stage .share-card {
  border: 5px solid #100a12;
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 9px 0 rgba(16, 10, 18, 0.35);
}
.chms-stage .ending-copy .kicker {
  color: var(--teal);
  text-shadow: none;
}
.chms-stage .ending-copy h2 {
  font-size: clamp(28px, 4cqw, 46px);
  color: var(--wine);
}
.chms-stage .ending-copy p {
  font-size: 19px;
  line-height: 1.55;
}
.chms-stage .ending-wrap {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(300px, 420px);
  gap: 18px;
  align-items: stretch;
}
.chms-stage .ending-copy {
  padding: clamp(18px, 3cqw, 32px);
}
.chms-stage .real-life {
  padding: 14px;
  border: 4px solid #100a12;
  border-radius: 8px;
  background: #fff;
}
.chms-stage .score-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.chms-stage .score-tile {
  padding: 10px;
  border: 3px solid #100a12;
  border-radius: 8px;
  background: #fff;
  font-weight: 900;
}
.chms-stage .share-card {
  display: flex;
  min-height: 520px;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(15, 119, 103, 0.88), rgba(144, 19, 34, 0.92)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08) 4px, transparent 4px, transparent 12px);
}
.chms-stage .ending-cta {
  margin: 16px 0 4px;
  padding: 12px 14px;
  border: 4px solid #100a12;
  border-radius: 8px;
  background: #fff3d6;
  font-weight: 900;
  color: var(--wine);
}
.chms-stage a.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.chms-stage .methodology {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.chms-stage .share-kicker {
  margin: 0;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
}
.chms-stage .share-metrics {
  font-weight: 900;
  font-size: 18px;
}
.chms-stage .share-hook {
  font-style: italic;
  opacity: 0.95;
}
.chms-stage .share-url {
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
  color: #ffe28a;
}
.chms-stage .share-card h3 {
  font-size: 36px;
  text-transform: uppercase;
}
.chms-stage .share-card .big-score {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 76px;
  line-height: 0.95;
  color: #ffe28a;
  text-shadow: 0 4px 0 #100a12;
}
.chms-stage .transition-wipe {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  transform: translateX(-105%);
  background:
    repeating-linear-gradient(90deg, #100a12 0 18px, var(--orange) 18px 32px, var(--wine) 32px 46px);
}
body.is-wiping .chms-stage .transition-wipe {
  animation: chms-wipe 620ms steps(12);
}
.chms-stage .screen-pop {
  animation: chms-popIn 420ms steps(6);
}
@keyframes chms-wipe {
  0% {
    transform: translateX(-105%);
  }
  45%,
  55% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(105%);
  }
}
@keyframes chms-popIn {
  from {
    transform: translateY(8px);
    opacity: 0.4;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes chms-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes chms-imageDrift {
  from {
    transform: scale(1.015) translateX(-4px);
  }
  to {
    transform: scale(1.025) translateX(4px);
  }
}
@keyframes chms-blink {
  0%,
  84%,
  100% {
    opacity: 1;
  }
  85%,
  88% {
    opacity: 0;
  }
}
@keyframes chms-bob {
  from {
    transform: translateY(0);
    opacity: 0.55;
  }
  to {
    transform: translateY(4px);
    opacity: 1;
  }
}
@keyframes chms-bump {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}


@media (prefers-reduced-motion: reduce) {
.chms-stage, .chms-stage *, .chms-stage *::before, .chms-stage *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}
/* =================================================================
   Care Home Manager Simulator — responsive stage
   Desktop & tablet-landscape: 16:9. Mobile / tablet-portrait: a vertical
   layout (full scene on top, controls below). Internals scale via CSS
   container-query units (cqw) so everything fits at any size.
   ================================================================= */

.chms-game-root { width: 100%; margin: 0 auto; }

.chms-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  container-name: chms;
  overflow: hidden;
  min-height: 0;
  border: 3px solid #100a12;
  border-radius: 14px;
  background: #0e0b18;                 /* override inherited title gradient */
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  isolation: isolate;
  color: var(--ink);
  font-family: "Trebuchet MS", Verdana, sans-serif;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

/* Each screen fills the square; [hidden] hides the inactive ones. */
.chms-stage .screen { position: absolute; inset: 0; min-height: 0; display: block; }
.chms-stage .screen.is-active { display: block; }

/* ---- Title ---- */
.chms-stage .title-overlay {
  width: 100%;
  height: 100%;
  min-height: 0;
  justify-content: center;
  padding: 6cqw 5cqw;
  overflow-y: auto;
}
.chms-stage h1 { max-width: 100%; font-size: clamp(26px, 11cqw, 66px); }
.chms-stage .tagline { width: 100%; font-size: clamp(13px, 3.4cqw, 22px); margin-top: 2.5cqw; }
.chms-stage .kicker { font-size: clamp(10px, 2.4cqw, 15px); }
.chms-stage .title-actions { margin-top: 4cqw; gap: 2cqw; }
.chms-stage .primary-btn,
.chms-stage .secondary-btn { min-height: 0; padding: clamp(9px, 2cqw, 14px) clamp(14px, 3cqw, 24px); font-size: clamp(12px, 2.4cqw, 17px); }

/* ---- Gameplay scene fills the square (image crops via object-fit:cover) ---- */
.chms-stage .game-screen {
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #0e0b18;
}

/* ---- HUD: decision left, meters centred, credit right ---- */
.chms-stage .hud-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.5cqw;
  padding: 2.2cqw 2.4cqw 5cqw;
}
.chms-stage .hud-decision,
.chms-stage .hud-credit,
.chms-stage .meter { font-size: clamp(8px, 1.9cqw, 13px); padding: 0.6cqw 1.1cqw; gap: 0.7cqw; }
.chms-stage .meter-label { font-size: clamp(8px, 1.9cqw, 13px); }
.chms-stage .meter-value { font-size: clamp(8px, 2cqw, 13px); }
.chms-stage .hud-decision { justify-self: start; }
.chms-stage .meters { justify-self: stretch; margin: 0; gap: 1.2cqw; flex-wrap: wrap; justify-content: center; }
.chms-stage .hud-credit { justify-self: end; margin-left: 0; text-align: right; }

/* ---- Dialogue box: lower band. Grows to fit its content (no inner scroll);
        choices and short narration stay fully visible. ---- */
.chms-stage .dialogue {
  left: 3.5%; right: 3.5%; bottom: 3.5%;
  padding: clamp(9px, 2.2cqw, 18px);
  max-height: 88%;
}
.chms-stage .dialogue-nameplate { font-size: clamp(12px, 2.6cqw, 19px); top: -2.6cqw; }
.chms-stage .dialogue-content { max-height: none; overflow: visible; }
.chms-stage .dialogue-text { font-size: clamp(13px, 2.5cqw, 18px); margin-top: 2cqw; }
.chms-stage .choice-list { gap: 1.2cqw; margin-top: 2cqw; }
.chms-stage .choice-btn { min-height: 0; padding: clamp(6px, 1.5cqw, 11px) clamp(8px, 1.6cqw, 12px); gap: 1.2cqw; align-items: center; }
.chms-stage .choice-label { font-size: clamp(11px, 2cqw, 15px); line-height: 1.25; }
.chms-stage .choice-key { width: clamp(20px, 4cqw, 27px); height: clamp(20px, 4cqw, 27px); }
.chms-stage .continue-prompt { margin-top: 2cqw; padding: clamp(7px,1.6cqw,11px) clamp(16px,3.5cqw,24px); }

/* ---- Button hardening --------------------------------------------------
   Host themes frequently force `button { white-space:nowrap; width:auto;
   display:inline-flex }` with !important, which stops the choice labels wrapping
   and blows the 2-up grid wider than the box (options spill off the right edge).
   Two-layer defence:
   1) minmax(0,1fr) tracks + overflow:clip mean the grid can NEVER be wider than
      the box, no matter what the theme does to the buttons;
   2) high-specificity overrides force the labels to wrap normally. */
.chms-stage .dialogue .choice-list {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
}
.chms-stage .dialogue .choice-list .choice-btn {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: hidden;
}
.chms-stage .dialogue .choice-list .choice-btn .choice-label {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  min-width: 0 !important;
}
.chms-stage .primary-btn,
.chms-stage .secondary-btn,
.chms-stage .continue-prompt { white-space: normal !important; }
.chms-stage .secondary-btn,
.chms-stage .continue-prompt { white-space: normal !important; }

/* ---- Ending: single scrolling column inside the square ---- */
.chms-stage .ending-screen { position: absolute; inset: 0; overflow-y: auto; padding: 4.5cqw; display: none; place-items: stretch; }
.chms-stage .ending-screen.is-active { display: block; }
.chms-stage .ending-wrap { width: 100%; grid-template-columns: 1fr; gap: 4cqw; }
.chms-stage .ending-copy { padding: 4.5cqw; }
.chms-stage .ending-copy h2 { font-size: clamp(22px, 5.5cqw, 44px); }
.chms-stage .ending-copy p { font-size: clamp(13px, 2.6cqw, 18px); }
.chms-stage .real-life { font-size: clamp(13px, 2.6cqw, 18px); }
.chms-stage .share-card { min-height: 0; padding: 5cqw; gap: 2.5cqw; }
.chms-stage .share-card h3 { font-size: clamp(22px, 6cqw, 36px); }
.chms-stage .share-card .big-score { font-size: clamp(44px, 13cqw, 76px); }
.chms-stage .methodology { font-size: clamp(10px, 2cqw, 13px); }

/* ---- Wipe transition confined to the stage (was fixed over the whole page) ---- */
.chms-stage .transition-wipe { position: absolute; }

/* ---- Square-tuned breakpoints (based on the stage width, not the viewport) ---- */
@container chms (max-width: 480px) {
  .chms-stage .dialogue .choice-list { grid-template-columns: minmax(0, 1fr) !important; }
  .chms-stage .score-breakdown { grid-template-columns: 1fr; }
}

/* ---- Theme-proofing -----------------------------------------------------
   The host theme will usually style bare h1/h2/p/a. The game sets several
   colours on parent containers and relies on inheritance, which a theme's
   element rules can override. Re-assert the game's colours and display fonts
   at higher specificity (>= 0,2,x) so nothing bleeds in. -------------------- */
.chms-stage .title-overlay h1,
.chms-stage .title-overlay .kicker,
.chms-stage .title-overlay .tagline,
.chms-stage .title-overlay p { color: #fff; }
.chms-stage .title-overlay h1 {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  text-transform: uppercase;
}
.chms-stage .dialogue .dialogue-text,
.chms-stage .dialogue > p { color: #f6eeda; }
.chms-stage .ending-copy,
.chms-stage .ending-copy p,
.chms-stage .ending-copy .real-life { color: var(--ink); }
.chms-stage .ending-copy h2 { color: var(--wine); }
.chms-stage .ending-copy .kicker { color: var(--teal); }
.chms-stage .ending-copy .methodology { color: var(--muted); }
.chms-stage .ending-copy .ending-cta { color: var(--wine); }
.chms-stage .share-card,
.chms-stage .share-card h3,
.chms-stage .share-card p { color: #fff; }
.chms-stage a.primary-btn { color: #fff; text-decoration: none; }

/* =================================================================
   MOBILE / TABLET-PORTRAIT — vertical layout
   Applies to phones (any orientation up to 699px) and tablets held in
   portrait (700–1023px portrait). Desktop and tablet-landscape keep the
   16:9 layout above. The scene shows in full (16:9) at the top, with the
   HUD over it and the dialogue + choices stacked below.
   ================================================================= */
@media (max-width: 699px), (max-width: 1023px) and (orientation: portrait) {

  .chms-stage { aspect-ratio: 3 / 5; }

  /* Gameplay becomes a vertical stack instead of full-bleed overlay */
  .chms-stage .game-screen { display: flex; flex-direction: column; }

  /* Scene: full 16:9 band at the top (no cropping) */
  .chms-stage .scene {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
  }

  /* HUD overlays the top of the scene band; stack it so it fits a narrow width:
     decision + credit on the first row, meters centred on the second. */
  .chms-stage .hud-top {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 1.6cqw;
    padding: 2.6cqw 2.6cqw 3cqw;
    background: linear-gradient(180deg, rgba(10, 8, 18, 0.9), rgba(10, 8, 18, 0));
  }
  .chms-stage .hud-decision { justify-self: start; grid-column: 1; grid-row: 1; }
  .chms-stage .hud-credit   { justify-self: end;   grid-column: 2; grid-row: 1; }
  .chms-stage .meters       { grid-column: 1 / -1; grid-row: 2; justify-self: center; }

  /* Dialogue + choices flow below the scene and fill the rest of the box */
  .chms-stage .dialogue {
    position: relative;
    left: auto; right: auto; bottom: auto;
    flex: 1 1 auto;
    margin: 3.2cqw;
    margin-top: 4cqw;
    max-height: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .chms-stage .dialogue-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

  /* Stack the four options in one column; with the vertical room they all fit */
  .chms-stage .dialogue .choice-list { grid-template-columns: minmax(0, 1fr) !important; }

  /* Type scales from the (now narrower) stage width — nudge a few sizes up so
     they stay legible on a phone */
  .chms-stage .dialogue-text { font-size: clamp(14px, 3.4cqw, 19px); }
  .chms-stage .choice-label  { font-size: clamp(13px, 3cqw, 16px); }
  .chms-stage .dialogue-nameplate { font-size: clamp(13px, 3.4cqw, 18px); }
  .chms-stage .hud-decision,
  .chms-stage .hud-credit,
  .chms-stage .meter { font-size: clamp(9px, 2.6cqw, 13px); }
}