:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  --ink: #fff7d7;
  --muted: #b8c6c8;
  --blue: #07101c;
  --cyan: #92f4ff;
  --green: #8bff6a;
  --pink: #ff5da8;
  --gold: #ffd056;
  --panel: rgba(4, 10, 17, .92);
  --line: rgba(146, 244, 255, .42);
  --crt-intensity: .72;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; background: #24140f; }
body { overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.app-shell {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 400px;
  overflow: auto;
  isolation: isolate;
  background: #261712;
}
.room-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(15, 5, 2, .08), rgba(18, 6, 2, .38)),
    url("../assets/art/living-room-crt.png") center / cover no-repeat;
}
.room-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(10, 3, 1, .5) 112%);
  pointer-events: none;
}
.tv-set {
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(78vw, calc(82vh * 1.36));
  transform: translate(-50%, -50%);
  padding: clamp(12px, 1.5vw, 24px);
  border: clamp(6px, .8vw, 13px) solid #2e1710;
  border-radius: 6% / 7%;
  background: linear-gradient(145deg, #87532f 0 8%, #3b1f15 9% 78%, #17100d 100%);
  box-shadow: inset 0 0 0 4px #a46b3b, inset 0 0 45px #080302, 0 30px 70px rgba(0,0,0,.62);
}
.tv-set::before, .tv-set::after {
  content: "";
  position: absolute;
  bottom: -7%;
  width: 8%;
  height: 9%;
  z-index: -1;
  background: #21120d;
  transform: skewX(-8deg);
}
.tv-set::before { left: 13%; }
.tv-set::after { right: 13%; transform: skewX(8deg); }
.tv-brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: clamp(16px, 2vw, 28px);
  padding: 0 2%;
  color: #c9a178;
  letter-spacing: .16em;
  font: 700 clamp(8px, .75vw, 11px)/1 ui-monospace, monospace;
}
.tv-brand strong { color: #d8b994; font-size: 1.1em; }
.tv-screen-frame {
  padding: clamp(7px, 1vw, 14px);
  border: 4px solid #140d0b;
  border-radius: 5% / 7%;
  background: #080706;
  box-shadow: inset 0 0 20px #000, 0 0 0 3px #5b3826;
}
.game-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  clip-path: inset(0 round 4% 4%);
  border-radius: 4% / 5%;
  background: #07101c;
  box-shadow: inset 0 0 34px #000;
}
#app-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.scanlines {
  position: absolute;
  inset: 0;
  z-index: 32;
  pointer-events: none;
  opacity: calc(var(--crt-intensity) * .2);
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.16) 3px, rgba(0,0,0,.14) 4px);
  mix-blend-mode: overlay;
}
.glass-glare {
  position: absolute;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  opacity: calc(var(--crt-intensity) * .34);
  background: radial-gradient(ellipse at 30% 5%, rgba(255,255,255,.34), transparent 27%), radial-gradient(ellipse at center, transparent 72%, rgba(0,0,0,.48));
}
.tv-controls { display: flex; align-items: center; justify-content: flex-end; gap: clamp(5px, .7vw, 10px); height: clamp(22px, 3vw, 40px); padding: 6px 2% 0; }
.tv-speaker { width: 2px; height: 65%; background: #120c09; box-shadow: 1px 0 #6a432b; }
.tv-dial { width: clamp(13px, 1.6vw, 22px); aspect-ratio: 1; margin-left: 2%; border: 3px ridge #7a5034; border-radius: 50%; background: #1c1210; }
.tv-led { width: 7px; height: 7px; border-radius: 50%; background: #ff6a49; box-shadow: 0 0 8px #ff3d20; }

.loading-screen { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; z-index: 40; background: #07101c; color: var(--ink); text-align: center; }
.loading-screen strong { font-size: clamp(16px, 3vw, 30px); letter-spacing: .12em; }
.loading-screen span:last-child { color: var(--muted); }
.load-error { color: #ff9f9f; }
.eyebrow { display: inline-block; color: var(--cyan); font-size: clamp(8px, 1vw, 11px); font-weight: 800; letter-spacing: .22em; }

.screen-layer { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: clamp(12px, 3vw, 42px); pointer-events: none; overflow: auto; }
.screen-layer:empty { display: none; }
.title-card, .panel-card, .cutscene-card { pointer-events: auto; }
.title-card { width: min(620px, 94%); text-align: center; padding: clamp(12px, 3vw, 36px); background: linear-gradient(180deg, rgba(7,16,28,.22), rgba(7,16,28,.72)); }
.title-card h1 { margin: 6px 0 0; padding: .18em 0 .12em; color: var(--ink); font-size: clamp(42px, 9vw, 104px); line-height: 1; letter-spacing: -.04em; text-shadow: 6px 6px 0 #183a51; }
.title-card h1 em { color: var(--pink); font-style: normal; text-shadow: 6px 6px 0 #6a244c; }
.tagline { color: var(--ink); margin: 18px auto 20px; font-size: clamp(11px, 1.6vw, 16px); text-shadow: 2px 2px 0 #07101c; }
.title-actions, .secondary-actions, .panel-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.secondary-actions { margin-top: 14px; gap: 14px; }
.screen-foot { margin: 22px 0 0; color: rgba(247,244,221,.55); font-size: 8px; letter-spacing: .1em; }

.button, .text-button, .hud-button, .level-card, .touch-cluster button { border: 0; color: var(--ink); background: transparent; }
.button { min-height: 44px; padding: 10px 17px; border: 2px solid var(--line); background: rgba(13,41,61,.9); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 800; }
.button:hover, .button:focus-visible { border-color: var(--cyan); transform: translateY(-2px); }
.button-primary { color: #06131b; background: var(--cyan); border-color: var(--cyan); box-shadow: 4px 4px 0 rgba(30,105,128,.55); }
.button-ghost { background: rgba(7,16,28,.72); }
.button-danger { border-color: #ff786c; }
.text-button { min-height: 44px; color: var(--cyan); padding: 8px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }

.panel-card { width: min(720px, 94%); max-height: 92%; overflow: auto; padding: clamp(18px, 3vw, 34px); border: 2px solid var(--line); background: var(--panel); box-shadow: 8px 8px 0 rgba(4,8,14,.55); }
.panel-card h2, .cutscene-copy h2 { margin: 7px 0 10px; color: var(--ink); font-size: clamp(25px, 4vw, 46px); line-height: .95; }
.panel-card p, .cutscene-copy p { color: var(--muted); line-height: 1.45; font-size: clamp(11px, 1.4vw, 14px); }
.panel-actions { margin-top: 20px; }
.small-panel { width: min(470px, 94%); text-align: center; }
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 18px 0; }
.control-grid div { display: grid; gap: 3px; padding: 10px; border: 1px solid rgba(156,246,255,.2); background: rgba(16,46,71,.55); }
.control-grid strong { color: var(--gold); font-size: 10px; letter-spacing: .12em; }
.control-grid span { color: var(--ink); font-size: 11px; }

.level-select-card { width: min(900px, 96%); }
.level-select-toolbar { position: sticky; z-index: 2; top: calc(-1 * clamp(18px, 3vw, 34px)); display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: calc(-1 * clamp(18px, 3vw, 34px)) calc(-1 * clamp(18px, 3vw, 34px)) 18px; padding: 12px clamp(18px, 3vw, 34px); border-bottom: 1px solid rgba(156,246,255,.2); background: linear-gradient(180deg, rgba(7,22,38,.99), rgba(7,22,38,.94)); }
.level-select-toolbar small { color: var(--cyan); letter-spacing: .08em; }
.world-list { display: grid; gap: 18px; margin-top: 18px; }
.world-group header { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.world-group header span, .world-group header small { color: var(--cyan); font-size: 9px; letter-spacing: .11em; }
.world-group header strong { color: var(--ink); }
.retro-world-group { padding: 12px; border: 2px solid rgba(255,208,86,.55); background: linear-gradient(135deg, rgba(66,46,20,.58), rgba(15,50,70,.72)); }
.retro-world-group header span { color: var(--gold); }
.retro-world-group header strong { text-shadow: 2px 2px 0 rgba(0,0,0,.55); }
.level-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 10px 0; }
.level-card { display: grid; gap: 5px; min-height: 105px; padding: 11px; text-align: left; border: 2px solid rgba(156,246,255,.2); background: linear-gradient(140deg, rgba(15,50,70,.96), rgba(12,24,40,.96)); }
.retro-level-card { grid-template-columns: auto 1fr; column-gap: 8px; border-color: rgba(255,208,86,.55); background: linear-gradient(140deg, rgba(72,50,21,.96), rgba(22,29,43,.96)); }
.retro-level-card > span, .retro-level-card > strong, .retro-level-card > small { grid-column: 1 / -1; }
.retro-stage-icons { display: flex; align-items: center; gap: 7px; height: 34px; }
.retro-stage-icon { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.55)); }
.retro-pose-icon { width: 48px; height: 32px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.55)); }
.level-card:hover, .level-card:focus-visible, .level-card.selected { border-color: var(--cyan); }
.level-card.complete { box-shadow: inset 0 0 0 2px rgba(139,255,106,.22); }
.level-card:disabled { opacity: .38; cursor: not-allowed; }
.level-card span { color: var(--cyan); font-size: 8px; letter-spacing: .1em; }
.level-card strong { color: var(--ink); font-size: 13px; }
.level-card small { color: var(--muted); font-size: 9px; line-height: 1.3; }

.stage-confirm-card { position: relative; overflow: hidden; }
.stage-confirm-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--cyan), var(--pink), var(--gold)); }
.stage-confirm-card h2 { margin-top: 12px; }
.stage-confirm-details { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin: 18px 0; }
.stage-confirm-details span { padding: 9px 6px; border: 1px solid rgba(156,246,255,.24); color: var(--gold); background: rgba(16,46,71,.55); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.stage-confirm-prompt { color: var(--ink) !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.cutscene-card { display: grid; grid-template-columns: 46% 1fr; width: min(850px, 96%); max-height: 92%; overflow: auto; border: 2px solid var(--line); background: var(--panel); box-shadow: 8px 8px 0 rgba(4,8,14,.55); }
.cutscene-card img { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; image-rendering: pixelated; }
.cutscene-copy { align-self: center; padding: clamp(16px, 3vw, 30px); }
.stage-brief { display: flex; flex-wrap: wrap; gap: 8px; color: var(--gold); font-size: 8px; letter-spacing: .1em; }
.stage-brief span { padding: 6px 8px; border: 1px solid rgba(255,208,86,.35); }

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; border-bottom: 1px solid rgba(156,246,255,.18); color: var(--ink); font-size: 13px; }
.setting-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--cyan); }
.setting-slider input { flex: 1; accent-color: var(--cyan); }

.game-hud { position: absolute; inset: 0 0 auto; z-index: 12; display: flex; align-items: center; gap: clamp(7px, 1.25vw, 18px); min-height: 48px; padding: 7px clamp(9px, 2vw, 24px); background: linear-gradient(180deg, rgba(7,16,28,.92), rgba(7,16,28,0)); pointer-events: none; }
.boss-hud { position: absolute; z-index: 13; top: 58px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 32px)); display: grid; gap: 6px; pointer-events: none; }
.boss-hud-row { padding: 6px 9px 5px; border: 1px solid rgba(156,246,255,.48); background: linear-gradient(90deg, rgba(7,16,28,.92), rgba(34,12,38,.88)); box-shadow: 0 0 12px rgba(255,79,84,.12); }
.boss-hud-heading { display: flex; justify-content: space-between; color: #f3f7ff; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.boss-hud-heading strong { color: #ff7180; }
.boss-hud-track { height: 10px; margin-top: 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 2px; border: 1px solid rgba(255,255,255,.35); background: #1a1b2a; }
.boss-hud-track i { display: block; border: 1px solid rgba(255,255,255,.15); background: #351f30; }
.boss-hud-track i.filled { background: linear-gradient(90deg, #ff334e, #ff9a72); box-shadow: 0 0 8px rgba(255,51,78,.72); }
.boss-hud-row small { color: #8ffcff; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.hud-brand { display: flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ink); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.hud-dot { width: 7px; height: 7px; background: var(--green); box-shadow: 0 0 10px var(--green); }
.hud-stat { display: grid; gap: 1px; text-align: right; }
.hud-stat span { color: var(--muted); font-size: 7px; letter-spacing: .12em; }
.hud-stat strong { color: var(--ink); font-size: clamp(8px, 1.1vw, 12px); letter-spacing: .06em; }
.hud-credit-buffer { position: relative; min-width: 62px; padding: 2px 5px; border: 1px solid rgba(248,189,66,.45); background: rgba(7,16,28,.52); }
.hud-credit-buffer::after { content: attr(data-loss); position: absolute; right: 2px; top: 100%; color: #ffda69; font-size: 9px; opacity: 0; text-shadow: 0 0 7px rgba(255,150,90,.9); }
.hud-credit-buffer.credit-loss { animation: credit-buffer-hit .62s steps(4, end); }
.hud-credit-buffer.credit-loss::after { animation: credit-loss-rise .72s ease-out; }
@keyframes credit-buffer-hit { 0%, 50% { color: #07101c; background: #ffda69; transform: scale(1.16); } 25%, 75% { color: #ffda69; background: rgba(116,28,37,.94); transform: translateX(-2px); } 100% { transform: none; } }
@keyframes credit-loss-rise { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(12px); } }
.reduced-effects .hud-credit-buffer.credit-loss { animation: none; color: #ffda69; border-color: #ffda69; }
.reduced-effects .hud-credit-buffer.credit-loss::after { animation: none; opacity: 1; }
.hud-button { pointer-events: auto; width: 44px; height: 44px; border: 1px solid var(--line); color: var(--cyan); font-size: 18px; }
.toast { position: absolute; left: 50%; top: 48px; z-index: 18; transform: translateX(-50%); padding: 8px 12px; border: 1px solid var(--cyan); color: var(--ink); background: rgba(7,16,28,.9); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; }

.mobile-controls { position: fixed; inset: auto 0 0; z-index: 50; display: flex; justify-content: space-between; align-items: end; padding: 12px max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)); pointer-events: none; }
.touch-cluster { display: flex; gap: 7px; pointer-events: auto; }
.touch-move { touch-action: none; }
.touch-cluster button { display: grid; place-items: center; min-width: 48px; height: 48px; border: 1px solid rgba(156,246,255,.7); border-radius: 50%; color: var(--ink); background: rgba(7,16,28,.82); font-size: 14px; font-weight: 900; user-select: none; touch-action: none; }
.touch-actions button { min-width: 58px; border-radius: 25px; font-size: 9px; }
.touch-actions { width: 188px; flex-wrap: wrap; justify-content: flex-end; }
.touch-actions button:first-child { width: 66px; color: #06131b; background: var(--cyan); }
.touch-cluster button:active { transform: scale(.94); background: var(--pink); }

.runtime-performance-debugger, .postprocessing-lab { position: fixed; z-index: 70; right: 14px; bottom: 14px; width: min(330px, calc(100vw - 28px)); max-height: 78vh; overflow: auto; padding: 12px; border: 1px solid var(--line); background: rgba(5,13,23,.96); color: var(--ink); font: 11px/1.35 ui-monospace, monospace; }
.postprocessing-lab { right: auto; left: 14px; }
.runtime-performance-debugger strong { display: block; margin-bottom: 5px; }
.runtime-performance-overall { display: block; margin-bottom: 8px; color: var(--cyan); text-transform: uppercase; }
.runtime-performance-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid rgba(156,246,255,.12); }
.runtime-performance-row dt { color: var(--muted); }
.runtime-performance-row[data-status="red"] dd { color: #ff8585; }
.runtime-performance-row[data-status="amber"] dd { color: var(--gold); }
.runtime-performance-row[data-status="green"] dd { color: var(--green); }
.postprocessing-lab details, .postprocessing-lab-controls { display: grid; gap: 8px; }
.postprocessing-lab-title { color: var(--cyan); cursor: pointer; }
.postprocessing-lab-controls label { display: grid; gap: 3px; }
.postprocessing-lab-label { display: flex; justify-content: space-between; color: var(--muted); }
.postprocessing-lab input[type="range"] { width: 100%; accent-color: var(--cyan); }

@media (max-width: 850px) {
  .tv-set { width: min(92vw, calc(84vh * 1.36)); }
  .hud-brand { display: none; }
  .level-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (orientation: portrait) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 100svh; padding: 5vh 0 148px; }
  .tv-set { position: relative; left: auto; top: auto; width: 96vw; margin: 0 auto; transform: none; }
  .room-backdrop { background-position: 48% center; }
  .mobile-controls { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); }
  .cutscene-card { grid-template-columns: 1fr; }
  .cutscene-card img { height: 34vh; min-height: 180px; }
  .hud-stat:nth-of-type(3), .hud-stat:nth-of-type(5) { display: none; }
  .boss-hud { top: 54px; width: min(360px, calc(100% - 20px)); }
}
@media (max-width: 520px) {
  .tv-set { padding: 7px; border-width: 6px; }
  .tv-screen-frame { padding: 5px; border-width: 2px; }
  .tv-brand { height: 14px; }
  .screen-layer { padding: 8px; }
  .title-card h1 { font-size: clamp(36px, 15vw, 68px); }
  .tagline { margin: 10px 0 12px; }
  .screen-foot { margin-top: 10px; }
  .control-grid { grid-template-columns: 1fr 1fr; margin: 10px 0; }
  .panel-card { padding: 14px; }
  .level-cards { grid-template-columns: 1fr; }
  .level-select-toolbar { top: -14px; margin: -14px -14px 14px; padding: 10px 14px; }
  .stage-confirm-details { grid-template-columns: 1fr; }
  .world-group header { grid-template-columns: auto 1fr; }
  .world-group header small { display: none; }
  .touch-cluster button { min-width: 46px; height: 46px; }
  .touch-actions button { min-width: 52px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .tv-set { top: 47%; width: min(76vw, calc(90vh * 1.36)); padding: 7px; border-width: 6px; }
  .tv-brand, .tv-controls { height: 15px; padding-top: 2px; }
  .tv-screen-frame { padding: 5px; border-width: 2px; }
  .title-card { padding: 8px; }
  .title-card h1 { font-size: clamp(36px, 15vh, 68px); }
  .tagline { margin: 8px 0 10px; }
  .screen-foot { margin-top: 8px; }
  .panel-card { padding: 13px; }
  .mobile-controls { padding-top: 6px; padding-bottom: 6px; }
  .touch-cluster button { min-width: 44px; height: 44px; }
}