:root {
  color-scheme: dark;
  --ink: #100b1d;
  --paper: #fff4d7;
  --muted: #bbb1d0;
  --hot: #ff8949;
  --gold: #ffcf66;
  --cyan: #77e8f1;
  --violet: #8575e8;
  --outline: #473a67;
  --display: "Arial Black", "DejaVu Sans", system-ui, sans-serif;
  --mono: "DejaVu Sans Mono", "Courier New", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 72% 7%, #292049 0, transparent 48%),
    radial-gradient(ellipse at 16% 95%, #291328 0, transparent 54%), #0b0915;
  color: var(--paper);
  font-family: system-ui, sans-serif;
}
button {
  color: inherit;
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
button:disabled { cursor: wait; opacity: .6; }
#arcade { position: relative; width: min(100%, 1376px); padding: 15px 22px 8px; }
#viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #160f28;
  border: 1px solid #5c4a76;
  border-radius: 13px;
  box-shadow: 0 25px 85px #050310ba, 0 0 0 5px #0d0b19, 0 0 48px #bc65ed26;
  aspect-ratio: 16/9;
  touch-action: none;
}
.stage { position: absolute; width: 1152px; height: 648px; transform-origin: left top; overflow: hidden; }
#screen, .screen, .screen-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
#screen { background: #201630; }
.screen-grain {
  opacity: .16; pointer-events: none; z-index: 3;
  background:
    linear-gradient(90deg, #0f041269, transparent 12%, transparent 88%, #0f041269),
    repeating-linear-gradient(0deg, transparent 0 3px, #170f2e67 3px 4px);
}
.screen { z-index: 4; }
.outside-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 3px 2px; color: #aea1c4; font: 700 10px var(--mono); letter-spacing: .15em;
}
.outside-footer button, .text-button {
  border: 0; color: #d0c3ed; background: transparent; padding: 4px;
}
.outside-footer button:hover, .text-button:hover { color: white; }
.eyebrow, .chapter-label {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 12px var(--mono); letter-spacing: .16em; color: var(--cyan);
}
.chapter-label { color: var(--gold); }
.status-dot {
  width: 9px; height: 9px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); transform: rotate(45deg);
}
.primary, .secondary, .icon-button, .dialogue-next {
  border: 1px solid #756293;
  background: #201831;
  min-height: 42px; padding: 10px 16px; font-size: 13px;
  transition: background .13s, transform .13s, border-color .13s, color .13s;
}
.primary {
  border: 1px solid #ffde8a;
  background: linear-gradient(180deg, #ffde7d, #ff9345 91%);
  color: #251222; min-height: 55px; font-size: 17px; padding: 11px 20px;
  box-shadow: 0 5px 0 #962f4e, 0 11px 26px #ff663749;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.primary span { margin-left: 14px; }
.secondary { background: #241834f0; }
.icon-button { padding: 8px 12px; font-size: 11px; min-height: 34px; background: #141021e8; }
.primary:hover { background: linear-gradient(180deg, #fff3b7, #ffab61); transform: translateY(-2px); }
.secondary:hover, .icon-button:hover, .dialogue-next:hover { border-color: var(--cyan); background: #362650; }
button:active { transform: translateY(2px); }
.topline {
  display: flex; align-items: center; justify-content: space-between;
  position: absolute; top: 27px; left: 43px; right: 43px;
}
.title-screen {
  background:
    linear-gradient(90deg, #140a25ed 0%, #180e29e8 31%, #171125b0 47%, #1c0d3210 76%),
    linear-gradient(0deg, #120b20f0, transparent 42%);
}
.hero-copy { position: absolute; top: 134px; left: 68px; }
.hero-copy .chapter-label {
  border-left: 4px solid var(--hot); padding: 9px 13px;
  background: #2c1536d9; box-shadow: 7px 0 27px #41174a6b;
}
h1 { margin: 0; font-family: var(--display); letter-spacing: -.07em; line-height: .91; transform: skew(-7deg); }
h1 span {
  display: block; font-size: 142px; font-weight: 1000; color: #ffd16a;
  background: linear-gradient(#fff9c9 8%, #ffd36c 42%, #ff8e40 72%, #f66451);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #ffda81;
  filter: drop-shadow(0 7px 0 #8b2d53) drop-shadow(0 14px 0 #2b123b);
}
h1 b { display: block; font-size: 54px; font-weight: 1000; letter-spacing: -.045em; color: #fff0cc; text-shadow: 0 5px #5d3974, 3px 7px #211331; }
h1 i { color: #8bf2f3; font-style: normal; }
.hero-copy p { margin: 29px 0 21px; color: #e4d8ef; font-size: 18px; font-weight: 650; }
.action-row { display: flex; align-items: center; gap: 12px; }
.title-caption {
  position: absolute; bottom: 98px; right: 49px; text-align: right; display: grid; gap: 2px;
  text-shadow: 2px 2px #0c0717, 0 0 18px #201029;
}
.title-caption span { font: 800 11px var(--mono); color: var(--cyan); letter-spacing: .15em; }
.title-caption strong { font: 1000 38px var(--display); font-style: italic; letter-spacing: -.045em; line-height: 1; }
.title-caption small { font: 700 14px var(--mono); color: #f3cbae; }
.title-caption small b { color: var(--gold); }
.title-footer {
  position: absolute; bottom: 24px; left: 43px; right: 43px;
  border-top: 1px solid #a78bbd62; padding-top: 13px;
  display: flex; justify-content: space-between; font: 800 11px var(--mono); letter-spacing: .14em; color: #dccce7;
}
.title-footer i { display: inline-block; width: 24px; height: 2px; background: var(--hot); vertical-align: middle; margin: 0 7px; }
.title-footer b { color: var(--gold); }
.gear-screen { background: linear-gradient(0deg, #0c0916 0, #120b25da 11%, transparent 28%, transparent 77%, #160d2ba1); }
.gear-top {
  position: absolute; inset: 22px 34px auto;
  display: grid; align-items: center; grid-template-columns: 140px 1fr 140px; text-align: center;
}
.gear-top h2, .modal h2 {
  margin: 5px 0; font: 1000 36px/.98 var(--display); font-style: italic;
  letter-spacing: -.052em; color: #fff0d0; text-shadow: 0 4px #583866;
}
.gear-side {
  position: absolute; top: 119px; width: 252px; padding: 13px 14px 16px;
  background: linear-gradient(132deg, #221532ee, #0d0b1de8);
  border: 1px solid #6b5384; border-top: 3px solid #9b70d3;
  box-shadow: 0 8px 32px #070515a8;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.gear-left { left: 33px; } .gear-right { right: 33px; }
.gear-side h3 { margin: 2px 0 12px; font: 900 16px var(--mono); letter-spacing: .10em; }
.gear-side h3 span { margin-right: 5px; color: var(--gold); }
.gear-options { display: grid; gap: 7px; }
.gear-option {
  text-align: left; min-height: 65px; border: 1px solid #4a3c66; width: 100%;
  display: grid; grid-template-columns: 42px 1fr 12px; gap: 9px; align-items: center;
  background: #211a34; padding: 6px 8px; color: #eee3f4; letter-spacing: 0;
}
.gear-option[aria-pressed="true"] {
  border-color: #ffd376; background: linear-gradient(90deg, #562b45, #2f203b); box-shadow: inset 4px 0 #ffb653;
}
.gear-option:hover { background-color: #413057; border-color: #c7abed; }
.gear-option .gear-icon { width: 42px; height: 42px; color: var(--gear-color); display: grid; place-items: center; background: #110d22aa; border: 1px solid #5a4567; }
.gear-option .gear-icon svg { width: 29px; height: 29px; overflow: visible; }
.gear-option strong { display: block; font-size: 13px; line-height: 1.15; color: white; }
.gear-option small { display: block; margin-top: 3px; color: #c3b6d5; font-size: 10px; }
.gear-option .diamond { color: var(--gold); font-size: 12px; opacity: 0; }
.gear-option[aria-pressed="true"] .diamond { opacity: 1; }
.loadout-stats {
  position: absolute; left: 317px; right: 317px; bottom: 83px;
  min-height: 78px; padding: 10px 14px 8px;
  display: grid; grid-template-columns: 1fr 150px; gap: 10px; align-items: center;
  border: 1px solid #6e578a; border-top: 2px solid #bc8bf5;
  background: linear-gradient(115deg, #261937f4, #151126f4);
}
.loadout-stats strong { display: block; font: 900 16px var(--display); color: var(--gold); }
.loadout-stats span { display: block; margin-top: 3px; color: #d0c4e2; font: 12px/1.25 system-ui; }
.stat-bars { display: grid; gap: 4px; }
.stat { display: grid; grid-template-columns: 48px repeat(5, 1fr); align-items: center; gap: 3px; }
.stat b { font: 800 9px var(--mono); color: #e5d3f7; }
.stat i { height: 7px; background: #4a3c63; transform: skew(-14deg); }
.stat i.active { background: #8df3ec; box-shadow: 0 0 6px #8df3ec69; }
.gear-bottom {
  position: absolute; bottom: 15px; left: 298px; right: 298px;
  display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: center; gap: 10px;
}
.gear-bottom .secondary { font-size: 11px; padding-inline: 8px; }
.gear-bottom .secondary b { color: var(--gold); }

.game-screen { pointer-events: none; }
.game-screen button { pointer-events: auto; }
.hud { position: absolute; top: 18px; left: 20px; right: 20px; display: grid; grid-template-columns: 362px 1fr 255px; align-items: start; gap: 8px; }
.player-hud, .boss-hud {
  display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 8px;
  min-height: 72px; padding: 5px 11px 5px 5px;
  background: linear-gradient(90deg, #171023f7, #21152aed 72%, #1c142b94);
  border: 1px solid #775479; border-left: 3px solid var(--hot);
  box-shadow: 0 6px 20px #0b091995;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.portrait {
  width: 62px; height: 60px; overflow: hidden; border: 1px solid #866580;
  background-color: #271439; background-size: 108% auto; background-position: 50% 20%; background-repeat: no-repeat;
}
.hud-line { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0 0 5px; }
.hud-line b { color: #fff1d1; font: 1000 19px/.9 var(--display); font-style: italic; letter-spacing: -.035em; }
.hud-line span { color: var(--cyan); font: 800 10px var(--mono); text-align: right; }
.meter { height: 14px; background: #291b37; border: 2px solid #130a1b; box-shadow: 0 0 0 1px #9272a1; overflow: hidden; position: relative; }
.meter i, .meter b { width: 100%; position: absolute; inset: 0 auto 0 0; display: block; transform: scaleX(1); transform-origin: left; }
.meter i { background: #d54e69; }
.player-health b { background: linear-gradient(#d4ff95, #86d667 45%, #3a9c5c 50%, #51c374); }
.boss-health b { background: linear-gradient(#ffa38d, #ff626a 44%, #bd3257 49%, #d64865); }
.stage-hud {
  justify-self: center; text-align: center; padding: 7px 20px 8px; min-width: 250px;
  background: linear-gradient(#180d29f0, #1b1229b7); border: 1px solid #755c87; border-top: 2px solid #bd97dd;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
}
.stage-hud .eyebrow { font-size: 10px; }
#chapter-name { font: 900 15px var(--display); margin: 3px 0 4px; letter-spacing: -.025em; }
.chapter-track { display: flex; justify-content: center; gap: 5px; }
.chapter-track i { width: 21px; height: 4px; background: #695879; transform: skew(-17deg); }
.chapter-track i.done { background: #84eadf; }
.chapter-track i.now { background: #ffd677; box-shadow: 0 0 9px #ffc763a0; }
.score-hud {
  position: relative; justify-self: end; padding: 8px 50px 8px 13px; min-width: 184px;
  display: grid; gap: 5px; background: #160f27e9; border: 1px solid #5b496e;
}
.score-hud .eyebrow { font-size: 10px; justify-content: space-between; }
.score-hud span span { color: var(--paper); font-size: 13px; margin-left: 6px; }
#pause-button { position: absolute; right: 7px; top: 8px; font: 900 20px/.9 var(--mono); min-height: 32px; padding: 4px 9px; }
.tbk-hud {
  display: flex; gap: 8px; align-items: center; position: absolute; top: 101px; left: 21px;
  min-width: 250px; padding: 4px 9px; color: #311831; background: #ffdf8d; border: 2px solid #fff5b8; box-shadow: 0 4px #c45056;
}
.tbk-hud img { width: 41px; height: 34px; }
.tbk-hud b { font: 900 11px var(--mono); }
.tbk-hud i { display: block; width: 139px; height: 5px; background: #963b57; margin-top: 3px; }
.tbk-hud i span { display: block; height: 100%; background: #16896d; transform-origin: left; }
.tbk-hud strong { font: 1000 25px var(--display); }
.tbk-hud.ending { border-color: #e75260; }
.boss-hud { position: absolute; top: 95px; right: 21px; width: 358px; grid-template-columns: 50px 1fr; min-height: 53px; border-left-color: #ff6577; }
.boss-hud .portrait { width: 46px; height: 43px; }
.combo { position: absolute; top: 168px; left: 24px; font: 1000 italic 32px var(--display); color: #ffeb9b; text-shadow: 2px 4px #602958, 0 0 22px #ff824a80; }
.combo small { font: 900 12px var(--mono); color: #ffd0a8; margin-left: 5px; }
.toast {
  position: absolute; top: 157px; left: 50%; transform: translateX(-50%); min-width: 320px; text-align: center;
  display: grid; gap: 3px; padding: 12px 23px;
  background: #1a102bea; border: 1px solid #b98bd8; border-left: 4px solid var(--hot);
  box-shadow: 0 10px 30px #120919ae;
}
.toast span { color: var(--cyan); font: 900 10px var(--mono); letter-spacing: .18em; }
.toast strong { color: #ffe391; font: 1000 italic 34px/.95 var(--display); letter-spacing: -.035em; }
.toast small { color: #ebd9f5; font: 700 11px var(--mono); }
.hint-strip {
  position: absolute; bottom: 13px; left: 20px; padding: 7px 10px; border-left: 3px solid #74dce9;
  background: #171025dd; font: 800 10px var(--mono); letter-spacing: .04em; color: #f5e8ff;
}
.hint-strip b { color: var(--hot); margin: 0 4px; }
.dialogue { position: absolute; inset: 0; }
.bubble {
  position: absolute; width: 305px; min-height: 72px; padding: 10px 14px 11px;
  border: 3px solid #24142d; border-radius: 9px;
  color: #22132d; background: #fff1cd; box-shadow: 5px 6px #130d1e7a; transform: translate(-50%, -100%);
}
.bubble::after {
  position: absolute; content: ""; left: calc(50% - 9px); bottom: -11px;
  width: 15px; height: 15px; background: #fff1cd; border: solid #24142d; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.bubble strong { font: 900 10px var(--mono); letter-spacing: .12em; color: #753357; }
.bubble p { margin: 3px 0 0; font: 850 17px/1.15 system-ui; }
.dialogue-next { position: absolute; right: 23px; bottom: 15px; min-height: 35px; font-size: 11px; }
.dialogue-next span { color: var(--gold); margin-left: 6px; }

.result-screen { background: linear-gradient(90deg, #110a23e8 0%, #171023c4 28%, transparent 69%); }
.result-panel {
  width: 395px; position: absolute; left: 42px; top: 118px; padding: 24px 24px 20px;
  background: linear-gradient(135deg, #271735f5, #130e24fa); border: 1px solid #9d77a3; border-top: 4px solid var(--hot);
  box-shadow: 0 14px 42px #0c061bb5;
}
.result-panel h2 { margin: 9px 0; font: 1000 italic 50px/.93 var(--display); letter-spacing: -.06em; color: #ffe2a0; text-shadow: 0 4px #672f56; }
.result-panel p { color: #eee0f2; font-weight: 700; margin: 8px 0 14px; }
.result-stats { display: grid; grid-template-columns: 1fr .85fr 1.15fr; margin: 0 0 17px; gap: 5px; }
.result-stats div { border-top: 1px solid #795487; padding: 7px 5px; background: #150e23; }
.result-stats dt { font: 900 10px var(--mono); color: var(--cyan); }
.result-stats dd { margin: 2px 0 0; font: 900 19px var(--display); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.result-actions .primary { min-height: 42px; font-size: 12px; padding-inline: 8px; }
.result-actions .primary span { margin-left: 3px; }
.result-actions .secondary { font-size: 11px; padding-inline: 5px; }
.result-actions .text-button { grid-column: 1/-1; font-size: 10px; justify-self: start; margin-top: 5px; }
.modal { z-index: 7; display: grid; place-items: center; background: #0c091ad9; }
.modal-panel {
  width: 602px; padding: 24px 27px 22px;
  background: linear-gradient(150deg, #2e1e45, #171124); border: 1px solid #9973be; border-top: 4px solid #ffbe69;
  box-shadow: 0 20px 80px #070515f0;
}
.modal h2 { margin: 5px 0 14px; }
.control-list { display: grid; gap: 3px; margin: 10px 0 12px; }
.control-list div { display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; padding: 6px 10px; background: #100c21a8; font-size: 12px; }
.control-list div b { color: var(--cyan); font: 800 11px var(--mono); }
.control-list small { color: #d2bde4; margin-left: 4px; }
kbd { display: inline-block; min-width: 21px; padding: 3px 5px; text-align: center; color: white; background: #34284e; border: 1px solid #6f5888; }
.settings, .modal-actions { display: flex; align-items: center; gap: 8px; }
.settings .secondary, .modal-actions .secondary { font-size: 11px; }
.controller-note { color: #c9b7df; font: 650 11px var(--mono); margin: 3px 0 13px; }
.settings-mode {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  margin-top: 10px; gap: 8px; padding: 10px; background: #151024c9; border: 1px solid #614f7d;
}
.settings-mode > b, .pad-header > label, .pad-tools > label, .pad-tester > b {
  color: var(--cyan); font: 800 11px var(--mono); letter-spacing: .09em;
}
.mode-switch { display: flex; gap: 5px; }
.mode-switch button { font-size: 11px; min-height: 38px; padding: 6px 10px; }
.mode-switch button[aria-pressed="true"] { color: #21142c; border-color: #ffe69c; background: #ffc877; }
.modal-panel.pad-open { width: 835px; }
.pad-header { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 7px; }
.pad-header select {
  min-width: 0; width: 100%; padding: 9px 11px; border: 1px solid #8f72ae;
  color: var(--paper); background: #181228; font: 700 13px var(--mono);
}
.pad-header .controller-note { grid-column: 1/-1; margin: 0 0 8px; }
.pad-grid { display: grid; grid-template-columns: minmax(0,1fr) 208px; gap: 13px; }
.controller-bindings { display: grid; gap: 3px; }
.binding-row {
  display: grid; grid-template-columns: minmax(97px,1fr) minmax(110px,1.13fr) 58px 53px;
  align-items: center; gap: 6px; min-height: 38px; padding: 3px 6px;
  background: #140e24; border: 1px solid #463657;
}
.binding-row strong { color: #fbecda; font-size: 12px; }
.binding-row small { display: block; font-size: 10px; color: #c5b5db; }
.binding-row output { color: #9deeea; overflow-wrap: anywhere; font: 700 11px/1.1 var(--mono); }
.binding-row button { min-height: 30px; padding: 3px; font-size: 10px; }
.binding-row .binding-listening { color: #2c1534; border-color: #f9db91; background: #ffc975; }
.pad-tools { align-self: start; padding: 11px 10px; background: #140f24; border: 1px solid #614f7d; }
.pad-tools > label { display: flex; justify-content: space-between; gap: 5px; }
.pad-tools input[type="range"] { accent-color: var(--cyan); width: 100%; margin: 8px 0; }
.invert-controls { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 700 11px system-ui; color: #eee4f9; }
.invert-controls label { display: flex; align-items: center; gap: 3px; }
.invert-controls input { accent-color: var(--cyan); }
.pad-tester { margin-top: 10px; padding: 9px 7px 4px; text-align: center; border-top: 1px solid #5c486e; }
.pad-tester p { margin: 3px 0 5px; font: 700 10px/1.28 var(--mono); min-height: 13px; color: #ddd0ed; overflow-wrap: anywhere; }
#live-stick {
  position: relative; margin: 6px auto; width: 53px; height: 53px; border: 1px solid #876cab; border-radius: 50%;
  background: linear-gradient(transparent 49%,#7c6696 50%,transparent 52%),linear-gradient(90deg,transparent 49%,#7c6696 50%,transparent 52%);
}
#live-stick i { position: absolute; width: 9px; height: 9px; inset: 21px auto auto 21px; border-radius: 50%; background: #8cf5f4; box-shadow: 0 0 9px #79d7ed; }
#binding-status { min-height: 15px; margin: 6px 0; }
.pad-open .settings { margin-top: 5px; }
.pad-open .settings .secondary { min-height: 36px; }
button.pad-focus, select.pad-focus, input.pad-focus { outline: 3px solid var(--cyan); outline-offset: 2px; }
.touch-controls {
  --stick-size: clamp(94px, 16vh, 136px);
  --button-size: clamp(57px, 9.3vh, 82px);
  position: relative; z-index: 9; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 5px auto 0; padding: 3px max(15px,env(safe-area-inset-right)) 2px max(15px,env(safe-area-inset-left));
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.touch-side { display: grid; gap: 3px; justify-items: center; }
.touch-side small { color: #d6c5ee; font: 800 10px var(--mono); letter-spacing: .17em; }
.touch-stick {
  position: relative; width: var(--stick-size); aspect-ratio: 1; border: 2px solid #b99ad2; border-radius: 50%;
  background: radial-gradient(circle,#493360bb 0%,#261c3cdc 48%,#1c142edd 50%,#54335d99 52%,#231732ee 72%);
  box-shadow: inset 0 0 14px #9979ac45, 0 3px 16px #0a0716a0;
  touch-action: none; cursor: grab;
}
.touch-stick.is-held { border-color: #8ff5f8; box-shadow: 0 0 14px #4fd3e54a; }
.stick-tick { position: absolute; color: #e8d3f6a8; font: 800 10px var(--mono); pointer-events: none; }
.stick-n { top: 7px; left: calc(50% - 5px); } .stick-s { bottom: 7px; left: calc(50% - 5px); }
.stick-w { left: 7px; top: calc(50% - 5px); } .stick-e { right: 7px; top: calc(50% - 5px); }
.stick-knob {
  position: absolute; inset: 27%; border-radius: 50%; border: 2px solid #c4edf0;
  background: radial-gradient(circle at 34% 22%,#b0fbff,#5da8bd 43%,#3b4975 78%);
  box-shadow: 0 4px 0 #1e203e, 0 5px 9px #0007; pointer-events: none;
}
.touch-controls button {
  border: 2px solid #9277b0; color: #fcebdc; background: #352550e8; border-radius: 50%; padding: 0;
  box-shadow: inset 0 2px #d3b9fb38, 0 4px 0 #1a122a, 0 5px 9px #0007; touch-action: none;
}
.touch-controls button:active { transform: none; }
.touch-controls button[aria-pressed="true"] { color: #26162c; background: #ffc877; border-color: #fff2b9; box-shadow: inset 0 0 11px #fff2b9; }
.touch-actions { display: grid; grid-template-columns: repeat(3,var(--button-size)); align-items: center; gap: 6px; }
.touch-actions button { width: var(--button-size); aspect-ratio: 1; font-size: clamp(10px,1.6vw,14px); }
.touch-actions .touch-dash { transform: translateY(-18%); border-color: #c0aaf8; }
.touch-actions .touch-jump { border-color: #8df4eb; background: #2a5c76ef; }
.touch-actions .touch-attack { transform: translateY(-19%); color: #21152b; border-color: #ffd994; background: #ffb76bed; }
.touch-actions .touch-attack[aria-pressed="true"] { background: #ffe1a0; }
.touch-pause { width: 45px; height: 45px; font-size: 19px; }
.touch-mode .dialogue-next { min-width: 115px; min-height: 62px; font-size: 17px; }
.touch-mode #pause-button { min-width: 47px; min-height: 45px; }
.compact-touch .touch-controls {
  position: absolute; inset: auto max(4px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
  --stick-size: clamp(72px, 23vh, 103px); --button-size: clamp(49px, 16vh, 68px);
  margin: 0 auto; pointer-events: none;
}
.compact-touch .touch-controls button, .compact-touch .touch-stick { pointer-events: auto; opacity: .83; }
.compact-touch .touch-side small, .compact-touch .outside-footer { display: none; }
@media (max-width: 680px) { #arcade { padding: 7px 5px 4px; } #viewport { border-radius: 7px; } }
@media (max-width: 390px) { .touch-controls { --button-size: 51px; padding-inline: 8px; } .touch-actions { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

/* Stage 2 cinematics retain Pause and hide combat overlays. */
.family-cinematic .player-hud, .family-cinematic .stage-hud,
.family-cinematic .score-hud > .eyebrow, .family-cinematic #tbk-hud,
.family-cinematic #combo, .family-cinematic #hint-strip { visibility: hidden; }
#ending-continue { position: absolute; right: 28px; bottom: 24px; z-index: 12; pointer-events: auto; }
.family-cinematic .score-hud { opacity: .7; }
#stage-two-button { border-color: #bb794c; color: #ffcf9a; }