:root {
  color-scheme: dark;
  --ink: #050812;
  --panel: #0b1220;
  --line: #2c5c80;
  --ice: #dceeff;
  --red: #e32131;
  --red-hot: #ff5b31;
  --blue: #1468c4;
  --gold: #ffce42;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #02040a;
  color: var(--ice);
  font-family: "Arial Black", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

.game-shell {
  position: relative;
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr) calc(126px + var(--safe-bottom));
  width: min(100%, 480px);
  height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: #050812;
  border-inline: 1px solid #18334d;
  box-shadow: 0 0 60px #000;
  isolation: isolate;
}

.hud {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1.15fr .55fr 2.25fr 42px;
  gap: 7px;
  align-items: stretch;
  padding: 8px;
  background: linear-gradient(180deg, #101c2a 0%, #080d16 100%);
  border-bottom: 2px solid #3e7095;
  box-shadow: 0 4px 0 #03050a;
}

.hud-cell,
.hud-gauges {
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid #284b67;
  background: #050912;
  box-shadow: inset 0 0 0 1px #10283d;
}

.hud-cell { display: flex; flex-direction: column; justify-content: center; }
.hud-cell span,
.gauge-row > span {
  color: #80b9dc;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.hud-cell strong {
  margin-top: 5px;
  color: #fff8dc;
  font: 900 17px/1 ui-monospace, monospace;
  text-shadow: 2px 2px 0 #5b1c1f;
}
.hud-stage strong { color: var(--gold); text-align: center; }
.hud-gauges { display: grid; gap: 7px; align-content: center; }
.gauge-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 5px; }
.meter {
  height: 9px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid #617284;
  background: #111821;
}
.meter i { display: block; width: 100%; height: 100%; transform-origin: left; transition: transform 180ms linear; }
.meter-guts i { background: linear-gradient(90deg, #0f67d9, #55c9ff); box-shadow: 0 0 8px #24a8ff; }
.meter-spirit i { background: linear-gradient(90deg, #b51623, #ffb12b); box-shadow: 0 0 8px #ff3d25; }
.sound-button {
  align-self: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid #496d89;
  border-radius: 3px;
  background: #0a1420;
  color: #ffdc65;
  font-size: 20px;
  box-shadow: inset 0 -3px 0 #05080c;
}
.sound-button.is-muted { color: #607180; }

.arena {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #02050a;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.announcement {
  position: absolute;
  z-index: 5;
  top: 45%;
  left: 50%;
  width: 92%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size: clamp(24px, 8vw, 40px);
  line-height: 1.15;
  letter-spacing: .06em;
  text-shadow: 3px 3px 0 #b81424, -2px -2px 0 #07090e, 0 0 16px #ff243b;
  pointer-events: none;
  opacity: 0;
}
.announcement.show { animation: announce .82s steps(4, end) both; }

.power-button {
  position: absolute;
  z-index: 7;
  right: 14px;
  bottom: 14px;
  min-width: 142px;
  min-height: 54px;
  padding: 10px 13px;
  border: 3px solid #fff4ce;
  border-radius: 5px;
  background: linear-gradient(#ff3f28, #a70718);
  color: #fff;
  font-size: 17px;
  letter-spacing: .03em;
  box-shadow: 0 5px 0 #54040d, 0 0 18px #ff4a22;
  animation: powerPulse .7s steps(2, end) infinite;
}

.tap-button {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 14%;
  border: 0;
  background: rgba(2, 3, 8, .54);
  color: #fff;
  text-shadow: 3px 3px 0 #a20819;
}
.tap-button span { display: block; font-size: clamp(28px, 9vw, 46px); }
.tap-button small { display: block; margin-top: 9px; color: #ffdc72; font-size: 16px; letter-spacing: .12em; }
.tap-button i { display: block; height: 17px; margin-top: 16px; padding: 2px; border: 2px solid #d6e7f7; background: #08101c; }
.tap-button b { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #e31e32, #ffdb42); box-shadow: 0 0 10px #ff2f34; }

.controls {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 1.25fr minmax(90px, 1fr);
  gap: 10px;
  padding: 11px 12px calc(11px + var(--safe-bottom));
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(#101b28, #080c13);
  border-top: 3px solid #315a79;
}

.move-button {
  min-width: 0;
  border: 2px solid #638aac;
  border-radius: 7px;
  background: linear-gradient(#19354d, #0a1724);
  color: #f4fbff;
  font: 900 44px/1 ui-monospace, monospace;
  box-shadow: inset 0 -7px 0 #050a10, 0 4px 0 #020408;
}
.move-button.is-held,
.move-button:active {
  transform: translateY(4px);
  border-color: #d7efff;
  background: linear-gradient(#2a6e9f, #112a41);
  box-shadow: inset 0 -3px 0 #050a10;
}

.control-center { display: grid; place-content: center; gap: 6px; text-align: center; color: #688aa2; }
.control-center strong { color: #dbeaff; font: 900 15px/1 ui-monospace, monospace; letter-spacing: .18em; }
.control-center span { font: 700 10px/1.25 system-ui, sans-serif; }

.screen {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: none;
  overflow: hidden;
  background: #040812;
}
.screen.is-visible { display: flex; }

.title-screen {
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(30, 84, 137, .42), transparent 47%),
    linear-gradient(180deg, #02040a 0%, #07101d 56%, #14050b 100%);
}
.title-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(90, 171, 221, .12) 50%, transparent 50.5%),
    linear-gradient(rgba(79, 157, 207, .08) 1px, transparent 1px) 0 0 / 100% 28px;
}
.scanlines { position: absolute; z-index: 9; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 4px); mix-blend-mode: multiply; }
.title-copy { position: relative; z-index: 4; width: 100%; padding: max(28px, env(safe-area-inset-top)) 12px 0; text-align: center; }
.title-kicker { margin: 0 0 9px; color: #5ba0cd; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .15em; }
.title-copy h1 { margin: 0; line-height: 1; }
.title-copy h1 span {
  display: block;
  color: #fff4dc;
  font-size: clamp(38px, 12vw, 59px);
  letter-spacing: -.05em;
  text-shadow: 4px 4px 0 #8e0e1b, -2px -2px 0 #203a51, 0 0 12px #000;
}
.title-copy h1 small {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 16px 7px;
  background: linear-gradient(90deg, transparent, #a70d1d 15% 85%, transparent);
  color: #fff;
  font-size: clamp(18px, 5.5vw, 28px);
  transform: skew(-5deg);
  text-shadow: 2px 2px 0 #52050c;
}
.title-portrait {
  position: relative;
  z-index: 3;
  flex: 1;
  width: min(84%, 360px);
  min-height: 0;
  margin-top: 5px;
}
.title-portrait img {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -2%;
  height: 104%;
  width: auto;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px #1b6498) drop-shadow(11px 9px 0 rgba(0,0,0,.36));
}
.title-aura {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 78%;
  height: 74%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(220, 20, 43, .42), transparent 66%);
  filter: blur(15px);
  animation: aura 1.2s steps(3, end) infinite;
}
.title-actions { position: relative; z-index: 5; width: 100%; padding: 9px 16px calc(24px + var(--safe-bottom)); text-align: center; background: linear-gradient(transparent, rgba(2,4,10,.92) 32%); }
.title-actions p { margin: 12px 0 0; color: #7d9cb3; font-size: 12px; letter-spacing: .06em; }
.die-games-link {
  display: inline-block;
  margin-top: 12px;
  color: #b9cee0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  text-shadow: 2px 2px 0 #02040a;
}
.die-games-link:hover { color: var(--gold); }
.die-games-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.die-games-link--end { display: block; width: fit-content; margin: 18px auto 0; }
.start-button {
  min-width: 230px;
  min-height: 62px;
  border: 3px solid #fff1c7;
  border-radius: 4px;
  background: linear-gradient(#e72c38 0 48%, #a40818 49% 100%);
  color: #fff;
  font: 900 22px/1 ui-monospace, monospace;
  letter-spacing: .08em;
  text-shadow: 2px 2px 0 #4d0710;
  box-shadow: inset 0 -6px 0 #6b0611, 0 5px 0 #270208, 0 0 20px rgba(239,33,49,.4);
}
.start-button:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 #6b0611, 0 1px 0 #270208; }

.end-screen { z-index: 18; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 46%, #10263d 0%, #050812 56%, #010205 100%); }
.end-content { width: 100%; padding: 24px; text-align: center; }
.end-content img { width: auto; height: min(45svh, 340px); image-rendering: pixelated; filter: drop-shadow(0 0 14px #b20f23); }
.end-content p { margin: 12px auto; max-width: 360px; color: #fff1d8; font-size: 18px; line-height: 1.5; }
.end-content h2 { margin: 8px 0 6px; color: #fff; font: 900 clamp(34px, 11vw, 56px)/1 ui-monospace, monospace; text-shadow: 4px 4px 0 #9d0a1b; }
#finalScore { margin-bottom: 22px; color: var(--gold); font: 800 16px/1 ui-monospace, monospace; }
.end-screen.is-gameover .end-content img { transform: rotate(90deg) translateY(7%); filter: grayscale(.55) brightness(.55); }

[hidden] { display: none !important; }

@keyframes announce { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 18%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; } }
@keyframes powerPulse { 50% { filter: brightness(1.35); transform: scale(1.045); } }
@keyframes aura { 50% { opacity: .58; transform: translateX(-50%) scale(1.12, 1.04); } }

@media (max-height: 690px) {
  .game-shell { grid-template-rows: 68px minmax(0, 1fr) calc(108px + var(--safe-bottom)); }
  .hud { padding: 6px; gap: 5px; }
  .hud-cell, .hud-gauges { padding: 4px; }
  .controls { padding-top: 8px; padding-bottom: calc(8px + var(--safe-bottom)); }
  .title-copy { padding-top: max(18px, env(safe-area-inset-top)); }
  .title-copy h1 span { font-size: clamp(34px, 10vw, 48px); }
  .title-actions { padding-bottom: calc(14px + var(--safe-bottom)); }
  .die-games-link { margin-top: 9px; }
  .start-button { min-height: 54px; }
}

@media (min-width: 620px) {
  body { background: radial-gradient(circle at 50% 45%, #101a28, #020308 58%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}