:root {
  color-scheme: dark;
  --cyan: #62efff;
  --gold: #ffd55e;
  --orange: #ff733f;
  --ink: #06121d;
  --glass: rgba(5, 19, 31, .82);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #06121d;
  color: #eefbff;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button { font: inherit; }

.local-arcade-bar {
  position: absolute;
  z-index: 40;
  inset: 0;
  height: 0;
  pointer-events: none;
}

.local-actions {
  position: absolute;
  top: max(7px, env(safe-area-inset-top));
  right: max(7px, env(safe-area-inset-right));
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.local-control {
  display: inline-flex;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(142, 235, 255, .7);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(17, 58, 75, .94), rgba(3, 18, 29, .97));
  color: #dcfbff;
  box-shadow: 0 4px 13px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .11);
  text-decoration: none;
  cursor: pointer;
  opacity: .8;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.local-back {
  position: absolute;
  top: max(7px, env(safe-area-inset-top));
  left: max(7px, env(safe-area-inset-left));
}

.local-reset { border-color: rgba(104, 221, 244, .68); color: #6eeaff; }
.local-pause { border-color: rgba(170, 191, 255, .68); color: #bdc9ff; }
.local-clean { border-color: rgba(130, 255, 190, .7); color: #82ffbe; }
.local-control:hover, .local-control:focus-visible, .local-control:active { opacity: 1; outline: 2px solid rgba(108, 235, 255, .45); outline-offset: 2px; }
.local-control span { display: block; font: 900 17px/1 Arial, Helvetica, sans-serif; }
.local-back span { margin-top: -1px; font-size: 24px; }
.local-control strong {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.is-arcade-embed .local-arcade-bar { display: none; }
html.rag-clean-screen .local-back,
html.rag-clean-screen .local-pause,
html.rag-clean-screen .local-reset,
html.rag-clean-screen .arcade-trial-chip,
html.rag-clean-screen .arcade-trial-prompt { display: none !important; }

.game-shell {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
  background: #071827;
  isolation: isolate;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #122f45;
  touch-action: none;
}

.hud {
  position: absolute;
  z-index: 8;
  top: max(6px, env(safe-area-inset-top));
  left: max(78px, calc(env(safe-area-inset-left) + 78px));
  right: max(126px, calc(env(safe-area-inset-right) + 126px));
  display: grid;
  grid-template-columns: auto auto minmax(135px, 1fr) auto 32px;
  gap: 5px;
  pointer-events: none;
}

.hud-cell,
.sound-button {
  min-height: 36px;
  border: 1px solid rgba(111, 230, 255, .55);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(10, 42, 59, .93), rgba(2, 12, 21, .93));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .12);
}

.hud-cell {
  display: grid;
  align-content: center;
  padding: 3px 9px;
  white-space: nowrap;
}

.hud-cell span {
  color: #73d9ec;
  font: 800 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
}

.hud-cell strong {
  overflow: hidden;
  color: #f8fcff;
  font: 900 12px/1.15 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis;
}

.hud-cell.lives strong { color: #ff7766; }
.hud-cell.weapon strong { color: var(--gold); }
.hud-cell.section { text-align: center; }
.hud-cell.score { text-align: right; }

.sound-button {
  width: 32px;
  padding: 0;
  color: #bff8ff;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.sound-button:active { transform: scale(.94); }

.boss-meter {
  position: absolute;
  z-index: 9;
  top: max(50px, calc(env(safe-area-inset-top) + 50px));
  left: 50%;
  width: min(520px, 58vw);
  padding: 5px 10px 7px;
  transform: translateX(-50%);
  border: 2px solid #ff735b;
  border-radius: 8px;
  background: rgba(24, 8, 9, .88);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  text-align: center;
  pointer-events: none;
}

.boss-meter[hidden] { display: none; }

.boss-meter > span,
.boss-meter > strong {
  display: block;
  font: 900 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
}

.boss-meter > span { color: #fff; }
.boss-meter > strong { margin-top: 4px; color: #ffcf6b; }

.boss-meter > div {
  height: 8px;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid #49181a;
  background: #150609;
}

.boss-meter i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff4b43, #ffb13e, #fff068);
  transition: width 120ms linear;
}

.notice {
  position: absolute;
  z-index: 11;
  top: 24%;
  left: 50%;
  max-width: min(76vw, 620px);
  padding: 8px 16px;
  transform: translate(-50%, -10px);
  border: 1px solid rgba(100, 238, 255, .7);
  border-radius: 7px;
  background: rgba(3, 16, 26, .88);
  color: #fff;
  font: 900 15px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.notice.show { opacity: 1; transform: translate(-50%, 0); }

.touch-controls {
  position: absolute;
  z-index: 10;
  inset: auto 0 max(8px, env(safe-area-inset-bottom)) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 max(18px, calc(env(safe-area-inset-right) + 18px)) 0 max(18px, calc(env(safe-area-inset-left) + 18px));
  pointer-events: none;
}

.dpad {
  position: relative;
  width: 142px;
  height: 142px;
  border: 2px solid rgba(142, 238, 255, .36);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 44, 59, .24) 0 26%, rgba(4, 16, 25, .4) 27% 65%, rgba(5, 17, 25, .15) 66%);
  box-shadow: inset 0 0 24px rgba(71, 218, 255, .1), 0 6px 24px rgba(0, 0, 0, .2);
  opacity: .44;
  pointer-events: auto;
  touch-action: none;
}

.dpad.active { opacity: .82; }

.dpad-ring {
  position: absolute;
  inset: 31px;
  border: 1px solid rgba(207, 248, 255, .22);
  border-radius: 50%;
}

.dpad-arrow {
  position: absolute;
  color: rgba(226, 250, 255, .82);
  font: 900 19px/1 Arial, sans-serif;
}

.dpad-arrow.up { top: 10px; left: 50%; transform: translateX(-50%); }
.dpad-arrow.right { right: 10px; top: 50%; transform: translateY(-50%); }
.dpad-arrow.down { bottom: 10px; left: 50%; transform: translateX(-50%); }
.dpad-arrow.left { left: 10px; top: 50%; transform: translateY(-50%); }

.dpad-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(189, 243, 255, .65);
  border-radius: 50%;
  background: rgba(53, 152, 178, .38);
  box-shadow: inset 0 0 12px rgba(231, 255, 255, .18);
}

.action-buttons {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  pointer-events: auto;
}

.action {
  width: 92px;
  height: 92px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  color: #fff;
  font: 900 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .07em;
  text-shadow: 0 2px 3px #000;
  box-shadow: inset 0 0 22px rgba(255, 255, 255, .08), 0 7px 18px rgba(0, 0, 0, .28);
  opacity: .52;
  touch-action: none;
}

.action.fire { background: rgba(198, 50, 32, .56); border-color: rgba(255, 151, 83, .72); }
.action.jump { width: 104px; height: 104px; background: rgba(25, 130, 173, .54); border-color: rgba(100, 233, 255, .72); }
.action.active { opacity: .94; transform: scale(.95); }

.screen {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: none;
  place-items: center;
  padding: max(50px, calc(env(safe-area-inset-top) + 45px)) max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow-y: auto;
  background: radial-gradient(circle at 50% 45%, rgba(12, 66, 88, .32), rgba(1, 8, 15, .83));
  backdrop-filter: blur(3px);
}

.screen.active { display: grid; }

.panel {
  width: min(620px, 90vw);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  padding: 20px 26px;
  border: 2px solid rgba(91, 225, 255, .7);
  border-radius: 14px;
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(255, 160, 53, .09) 72%),
    linear-gradient(180deg, rgba(9, 34, 50, .97), rgba(2, 11, 20, .98));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .1);
  text-align: center;
}

.panel .kicker {
  margin: 0 0 5px;
  color: var(--cyan);
  font: 900 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .2em;
}

.title-panel h1 {
  margin: 0;
  color: #fff;
  font: 900 clamp(36px, 7vw, 66px)/.88 Impact, Haettenschweiler, sans-serif;
  letter-spacing: .035em;
  text-shadow: 0 4px 0 #0b2a3c, 0 0 22px rgba(67, 224, 255, .22);
}

.title-panel h1 em { color: var(--orange); font-style: normal; }

.panel h2 {
  margin: 8px 0;
  color: var(--gold);
  font: 900 20px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

.panel p:not(.kicker) {
  max-width: 520px;
  margin: 9px auto;
  color: #c4dbe4;
  font: 700 13px/1.42 system-ui, sans-serif;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0;
}

.mission-grid span {
  padding: 7px;
  border: 1px solid rgba(111, 231, 255, .2);
  border-radius: 5px;
  background: rgba(12, 42, 57, .52);
  color: #dffbff;
  font: 800 9px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.primary {
  min-width: 220px;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid #ffdc60;
  border-radius: 7px;
  background: linear-gradient(180deg, #ff8d3b, #bf371e);
  color: #fff;
  box-shadow: 0 4px 0 #5a1c11, inset 0 1px rgba(255, 255, 255, .32);
  font: 900 14px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
  cursor: pointer;
  touch-action: manipulation;
}

.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a1c11; }

.compact-panel { width: min(450px, 86vw); }

.results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 14px 0;
}

.results div {
  padding: 8px 4px;
  border: 1px solid rgba(99, 232, 255, .25);
  background: rgba(7, 25, 37, .7);
}

.results span,
.results strong { display: block; }
.results span { color: #70ddeb; font: 800 8px/1 ui-monospace, monospace; }
.results strong { margin-top: 4px; color: #fff2a0; font: 900 13px/1 ui-monospace, monospace; }

.rotate-message {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: #06121d;
  color: #fff;
  font: 900 18px/1.25 ui-monospace, monospace;
  letter-spacing: .1em;
  text-align: center;
}

.build-badge {
  position: absolute;
  z-index: 9;
  right: max(7px, env(safe-area-inset-right));
  bottom: max(4px, env(safe-area-inset-bottom));
  color: rgba(222, 247, 255, .5);
  font: 800 8px/1 ui-monospace, monospace;
  letter-spacing: .08em;
  pointer-events: none;
}

.game-shell[data-phase="title"] .touch-controls,
.game-shell[data-phase="paused"] .touch-controls,
.game-shell[data-phase="checkpoint"] .touch-controls,
.game-shell[data-phase="victory"] .touch-controls { opacity: .18; pointer-events: none; }

@media (max-height: 520px) and (orientation: landscape) {
  .local-actions { top: max(5px, env(safe-area-inset-top)); right: max(5px, env(safe-area-inset-right)); gap: 5px; }
  .local-control { width: 30px; min-width: 30px; height: 30px; min-height: 30px; border-radius: 9px; }
  .local-back { top: max(5px, env(safe-area-inset-top)); left: max(5px, env(safe-area-inset-left)); }
  .local-control span { font-size: 14px; }
  .local-back span { font-size: 21px; }

  .hud {
    top: max(4px, env(safe-area-inset-top));
    left: max(72px, calc(env(safe-area-inset-left) + 72px));
    right: max(112px, calc(env(safe-area-inset-right) + 112px));
    grid-template-columns: auto auto minmax(90px, 1fr) auto 28px;
    gap: 3px;
  }

  .hud-cell,
  .sound-button { min-height: 30px; border-radius: 6px; }
  .hud-cell { padding: 2px 6px; }
  .hud-cell span { font-size: 6px; }
  .hud-cell strong { font-size: 10px; }
  .sound-button { width: 28px; }

  .boss-meter { top: max(39px, calc(env(safe-area-inset-top) + 39px)); width: min(480px, 54vw); }
  .boss-meter > span, .boss-meter > strong { font-size: 7px; }

  .touch-controls { bottom: max(5px, env(safe-area-inset-bottom)); padding-inline: max(10px, calc(env(safe-area-inset-left) + 10px)); }
  .dpad { width: 116px; height: 116px; }
  .dpad-ring { inset: 26px; }
  .dpad-knob { width: 38px; height: 38px; }
  .dpad-arrow { font-size: 15px; }
  .dpad-arrow.up { top: 8px; }
  .dpad-arrow.right { right: 8px; }
  .dpad-arrow.down { bottom: 8px; }
  .dpad-arrow.left { left: 8px; }
  .action-buttons { gap: 9px; }
  .action { width: 74px; height: 74px; font-size: 12px; }
  .action.jump { width: 84px; height: 84px; }

  .screen { padding-top: max(39px, calc(env(safe-area-inset-top) + 39px)); }
  .panel { width: min(600px, 84vw); max-height: calc(100dvh - 48px); padding: 12px 20px; }
  .title-panel h1 { font-size: clamp(31px, 8vh, 46px); }
  .panel h2 { margin: 5px 0; font-size: 15px; }
  .panel p:not(.kicker) { margin: 6px auto; font-size: 11px; line-height: 1.3; }
  .mission-grid { margin: 7px 0; }
  .mission-grid span { padding: 5px; font-size: 7px; }
  .primary { min-height: 36px; min-width: 200px; font-size: 11px; }
  .results { margin: 8px 0; }
  .results div { padding: 5px 3px; }
}

@media (max-width: 680px) and (orientation: landscape) {
  .hud-cell.section { display: none; }
  .hud { grid-template-columns: auto auto 1fr 28px; }
  .action { width: 66px; height: 66px; }
  .action.jump { width: 76px; height: 76px; }
  .dpad { width: 104px; height: 104px; }
  .dpad-ring { inset: 23px; }
}

@media (orientation: portrait) and (max-width: 700px) {
  .rotate-message { display: none; }
  .hud { left: 48px; right: 48px; grid-template-columns: auto 1fr auto; }
  .hud-cell.section { grid-column: 1 / -1; grid-row: 2; }
  .hud .sound-button { display: none; }
  .touch-controls { bottom: 16px; padding-inline: 8px; }
  .dpad { width: 100px; height: 100px; }
  .action { width: 66px; height: 66px; }
  .action.jump { width: 76px; height: 76px; }
  .action-buttons { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .notice,
  .boss-meter i { transition: none; }
}

.primary[hidden] { display: none; }
.primary + .primary { margin-top: 10px; }
body.is-arcade-embed .hud { grid-template-columns: auto auto minmax(90px,1fr) auto; }
@media (orientation: portrait) { body.is-arcade-embed .hud { grid-template-columns: auto 1fr auto; } }