/* Fusion Pixel Font (OFL-1.1) — 12px proportional, latin + zh_hans */
@font-face {
  font-family: "Fusion Pixel 12";
  src: url("./assets/Font_FusionPixel12Latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fusion Pixel 12";
  src: url("./assets/Font_FusionPixel12ZhHans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF,
    U+20000-2A6DF, U+2F800-2FA1F;
}

:root {
  --ink: #000000;
  --paper: #e8e8e8;
  --panel: #1a1a1a;
  --panel-edge: #808080;
  --panel-hi: #c0c0c0;
  --accent: #e04040;
  --accent-soft: #f0d060;
  --hud: #e8e8e8;
  --danger: #e04040;
  --ok: #60c040;
  --shadow: rgba(0, 0, 0, 0.8);
  /* Latin pixel titles + CJK pixel body — matches 8-bit stage art */
  --font-pixel: "Fusion Pixel 12", "Press Start 2P", monospace;
  --font-display: "Press Start 2P", "Fusion Pixel 12", monospace;
  --font-mono: "Press Start 2P", "Fusion Pixel 12", monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --pixel: 2px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 0%, #1a1a1a 0%, #000 55%),
    #000;
  color: var(--hud);
  font-family: var(--font-pixel);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  image-rendering: pixelated;
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* While virtual stick is active — stop Safari scroll / back-swipe from eating touches. */
html.touch-play-lock,
body.touch-play-lock {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  width: min(1320px, 100%);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-areas:
    "hero side"
    "stage side";
  gap: 14px;
  align-items: start;
}

.hero { grid-area: hero; }
.mobile-hud { grid-area: hud; }
.stage-shell { grid-area: stage; }
.touch-stick-wrap { grid-area: stick; }
.touch-actions-wrap { grid-area: actions; }
.side { grid-area: side; }

.hero {
  display: grid;
  gap: 10px;
  justify-items: center;
  justify-self: center;
  width: min(100%, 780px);
  padding: 4px 0 0;
  text-align: center;
}

.title-banner {
  display: block;
  width: min(780px, 100%);
  height: auto;
  max-height: 180px;
  object-fit: contain;
  image-rendering: pixelated;
  background: #000;
  border: 3px solid #808080;
  box-shadow:
    inset 0 0 0 2px #303030,
    0 0 0 2px #000;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.75));
  cursor: pointer;
}

/* Reuse the original pixel art for a separate, heavier GRAVITY word layer. */
.title-gravity-cover,
.title-gravity-art {
  position: absolute;
  pointer-events: none;
  inset: 0;
}

.title-gravity-cover {
  z-index: 2;
  left: 8%;
  right: 6%;
  top: 17%;
  bottom: 43%;
  background: #000;
}

.title-gravity-art {
  z-index: 3;
  background: url("./assets/Texture_UiTitleBanner.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  clip-path: inset(17% 6% 43% 8%);
  transform-origin: 50% 18%;
  filter: drop-shadow(0 4px 0 #4b3c12);
}

@media (prefers-reduced-motion: no-preference) {
  .title-gravity-art {
    animation: gravity-word-drop 3.6s steps(7, end) infinite;
  }
}

@keyframes gravity-word-drop {
  0%, 100% { transform: perspective(480px) rotateX(0deg) rotateZ(-0.2deg) skewX(-1deg) translateY(1px) scaleY(1); }
  38% { transform: perspective(480px) rotateX(3deg) rotateZ(-0.8deg) skewX(-2deg) translateY(5px) scaleY(1.03); }
  56% { transform: perspective(480px) rotateX(7deg) rotateZ(-1.4deg) skewX(-3deg) translateY(12px) scaleY(1.08); }
  76% { transform: perspective(480px) rotateX(4deg) rotateZ(-0.9deg) skewX(-2deg) translateY(7px) scaleY(1.04); }
}

.hero-logo {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.hero-logo .title-banner {
  width: min(780px, 100%);
}

.game-version {
  position: absolute;
  z-index: 5;
  right: 10px;
  bottom: 10px;
  padding: 3px 7px;
  border: 2px solid #808080;
  background: #101010;
  color: #ffe060;
  font-family: "Press Start 2P", var(--font-mono), monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  user-select: none;
}

.debug-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 40;
  width: min(220px, calc(100vw - 24px));
  background:
    linear-gradient(#1c1c1c, #1c1c1c) padding-box,
    linear-gradient(135deg, #c0c0c0, #505050 40%, #202020) border-box;
  border: 3px solid transparent;
  box-shadow: 0 8px 0 #000, inset 0 0 0 1px #101010;
  padding: 8px;
  font-family: "Press Start 2P", monospace;
}

.debug-panel[hidden] { display: none !important; }

.debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #f0d060;
  font-size: 0.48rem;
  letter-spacing: 0.08em;
}

.debug-close {
  appearance: none;
  border: 2px solid #808080;
  background: #303030;
  color: #fff;
  font: inherit;
  font-size: 0.55rem;
  line-height: 1;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.debug-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.debug-body button {
  appearance: none;
  border: 2px solid #707070;
  background: #101010;
  color: #e8e8e8;
  font: inherit;
  font-size: 0.38rem;
  letter-spacing: 0.04em;
  padding: 8px 4px;
  min-height: 34px;
  cursor: pointer;
  touch-action: manipulation;
}

.debug-body button.is-on {
  border-color: #70ff98;
  color: #70ff98;
  background: #0c2818;
}

.debug-stage-label {
  margin: 10px 0 6px;
  color: #f0d060;
  font-size: 0.34rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debug-stage-pick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.debug-stage-pick button {
  appearance: none;
  border: 2px solid #707070;
  background: #101010;
  color: #e8e8e8;
  font: inherit;
  font-size: 0.36rem;
  letter-spacing: 0.04em;
  padding: 8px 2px;
  min-height: 34px;
  cursor: pointer;
  touch-action: manipulation;
}

.debug-stage-pick button.is-on {
  border-color: #f0d060;
  color: #fff8e0;
  background: #603010;
}

.debug-status {
  margin: 8px 0 0;
  color: #808080;
  font-size: 0.34rem;
  line-height: 1.5;
}

.brand {
  margin: 0;
  font-size: clamp(0.85rem, 3vw, 1.15rem);
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--accent-soft);
  text-transform: uppercase;
}

.brand small {
  display: block;
  margin-top: 8px;
  font-size: 0.45rem;
  letter-spacing: 0.14em;
  color: #808080;
  font-weight: 400;
}

.tagline {
  margin: 0;
  color: #a8a8a8;
  max-width: 48ch;
  line-height: 1.8;
  font-family: var(--font-pixel);
  font-size: 0.85rem;
}

.inline-token {
  display: inline-block;
  vertical-align: -2px;
  image-rendering: pixelated;
  width: 14px;
  height: 14px;
}

.mobile-hud {
  display: none;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 3px solid #808080;
  background: #101010;
  font-size: 0.48rem;
  color: #c8c8c8;
  box-shadow: inset 0 0 0 2px #303030;
}

.mobile-hud b {
  font-family: var(--font-mono);
  color: var(--accent-soft);
  margin-left: 2px;
}

.mobile-hud .hud-pause {
  margin-left: auto;
  appearance: none;
  border: 2px solid #c0c0c0;
  background: #202020;
  color: #f0d060;
  border-radius: 0;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.45rem;
  min-height: 32px;
  touch-action: manipulation;
}

.stage-shell {
  position: relative;
  background: #000;
  border: 4px solid #808080;
  box-shadow:
    0 0 0 2px #000,
    inset 0 0 0 2px #404040,
    0 12px 0 #101010;
  border-radius: 0;
  overflow: hidden;
  justify-self: center;
  /* Desktop: ~50% larger than the old 520px cap. Mobile breakpoints keep prior size. */
  width: min(100%, 780px);
  touch-action: none;
  user-select: none;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  background: #000;
  vertical-align: top;
  touch-action: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.86);
  z-index: 5;
}

.overlay[hidden] { display: none !important; }

.incident-report {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: 10px;
  right: 10px;
  padding: 10px 12px 12px;
  border: 2px solid #ff6040;
  background: rgba(30, 4, 2, 0.94);
  box-shadow: 0 0 0 2px #160000, 0 4px 0 rgba(0, 0, 0, 0.72);
  color: #ffe8d8;
  text-align: center;
  pointer-events: none;
  animation: incident-report-in 0.18s steps(2, end) both;
}

.incident-report[hidden] { display: none !important; }

.incident-kicker {
  margin-bottom: 7px;
  color: #ff8060;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.incident-report p {
  margin: 4px 0;
  font-family: var(--font-pixel);
  font-size: clamp(0.62rem, 1.6vw, 0.86rem);
  line-height: 1.45;
}

.incident-report strong { color: #fff0a0; }

.incident-cause {
  color: #ffb090;
  font-size: clamp(0.55rem, 1.35vw, 0.72rem) !important;
}

.incident-denial {
  margin-top: 8px;
  color: #ff6040;
  font-family: var(--font-pixel);
  font-size: clamp(0.8rem, 2.2vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-shadow: 2px 2px 0 #000;
}

@keyframes incident-report-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.overlay h2 {
  margin: 0;
  font-size: clamp(1rem, 3.6vw, 1.35rem);
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.45;
  text-shadow: 2px 2px 0 #000;
}

.overlay p {
  margin: 0;
  max-width: 38ch;
  color: #e8e8e8;
  line-height: 1.55;
  font-family: var(--font-pixel);
  font-size: 1rem;
  font-weight: 500;
}

.overlay .hint {
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  color: #a0a0a0;
  line-height: 1.55;
}

.diff-hint {
  margin: 0;
  max-width: 38ch;
  color: #c8b870;
  line-height: 1.5;
  font-family: var(--font-pixel);
  font-size: 0.85rem;
}

button.primary {
  appearance: none;
  border: 3px solid #f0d060;
  background: #802010;
  color: #fff8e0;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 14px 20px;
  min-height: 48px;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 4px 0 #401008;
  touch-action: manipulation;
  text-transform: uppercase;
}

button.primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #401008;
}

.start-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

button.continue-action {
  border-color: #70ff98;
  background: #14502c;
  box-shadow: 0 4px 0 #082818;
}

.checkpoint-hint,
.overlay .checkpoint-hint {
  color: #8fffb0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.checkpoint-hint[hidden] { display: none !important; }

.upgrade-overlay {
  gap: 14px;
  padding: 18px 14px;
  justify-content: flex-start;
  overflow-y: auto;
}

.upgrade-overlay h2 {
  font-size: clamp(0.85rem, 3.5vw, 1.15rem);
  color: #f0d060;
  text-shadow: 2px 2px 0 #000;
}

.upgrade-overlay > p {
  max-width: 28rem;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e0e0e0;
}

.upgrade-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(440px, 100%);
}

.upgrade-card {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: #f2f2f2;
  font-family: var(--font-pixel);
  cursor: pointer;
  touch-action: manipulation;
  background: transparent;
  box-shadow: 0 5px 0 #000;
  image-rendering: pixelated;
}

.upgrade-card:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #000;
}

.upgrade-card-body {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
  min-height: 92px;
  padding: 14px 14px 12px 12px;
  /* Battle City riveted metal plaque via 9-slice */
  border: 12px solid transparent;
  border-image-source: url("./assets/Texture_UpgradeCardSlice.png");
  border-image-slice: 14 fill;
  border-image-width: 12px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  background-color: #0e0e0e;
}

.upgrade-card.is-special .upgrade-card-body {
  border-image-source: url("./assets/Texture_UpgradeCardSliceSpecial.png");
  background-color: #1a1208;
}

.upgrade-card.is-tutorial .upgrade-card-body {
  border-image-source: url("./assets/Texture_UpgradeCardSliceTutorial.png");
  background-color: #0c141c;
}

.upgrade-icon-well {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(#303030, #303030) padding-box,
    linear-gradient(135deg, #c0c0c0, #404040 45%, #101010) border-box;
  border: 3px solid transparent;
  box-shadow:
    inset 0 0 0 2px #000,
    inset 0 0 0 4px #1a1a1a;
}

.upgrade-card.is-special .upgrade-icon-well {
  background:
    linear-gradient(#201808, #201808) padding-box,
    linear-gradient(135deg, #ffe080, #a07020 45%, #402000) border-box;
}

.upgrade-card.is-tutorial .upgrade-icon-well {
  background:
    linear-gradient(#081018, #081018) padding-box,
    linear-gradient(135deg, #b0d8ff, #3060a0 45%, #102030) border-box;
}

.upgrade-icon-well::before,
.upgrade-icon-well::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #808080;
  box-shadow: inset 1px 1px 0 #e0e0e0, inset -1px -1px 0 #303030;
  pointer-events: none;
}

.upgrade-icon-well::before { top: 2px; left: 2px; }
.upgrade-icon-well::after { bottom: 2px; right: 2px; }

.upgrade-card.is-special .upgrade-icon-well::before,
.upgrade-card.is-special .upgrade-icon-well::after {
  background: #f0d060;
  box-shadow: inset 1px 1px 0 #fff0b0, inset -1px -1px 0 #805010;
}

.upgrade-card.is-tutorial .upgrade-icon-well::before,
.upgrade-card.is-tutorial .upgrade-icon-well::after {
  background: #70b0f0;
  box-shadow: inset 1px 1px 0 #d0e8ff, inset -1px -1px 0 #204070;
}

.upgrade-icon {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  background: #000;
}

.upgrade-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 4px 2px 2px;
}

.upgrade-card .upgrade-tag {
  display: inline-block;
  align-self: start;
  margin: 0;
  padding: 4px 7px;
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: #101010;
  background: #70ff98;
  border: 2px solid #101010;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  text-transform: uppercase;
  line-height: 1.2;
}

.upgrade-card.is-special .upgrade-tag {
  color: #201000;
  background: #f0d060;
}

.upgrade-card.is-tutorial .upgrade-tag {
  color: #081018;
  background: #80c8ff;
}

.upgrade-card .upgrade-name {
  display: block;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-shadow: 1px 1px 0 #000;
}

.upgrade-card .upgrade-desc {
  display: block;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
  color: #d6d6d6;
}

/* Recommended for next stage — simple amber highlight, no soft bloom. */
.upgrade-card.is-recommend {
  box-shadow: 0 5px 0 #000, 0 0 0 2px #f0d060;
  z-index: 1;
}

.upgrade-card.is-recommend .upgrade-card-body {
  background-color: #1a1608;
  box-shadow: inset 0 0 0 2px rgba(240, 208, 96, 0.55);
  animation: upgradeRecPulse 1.4s steps(2, end) infinite;
}

.upgrade-card.is-recommend .upgrade-name {
  color: #ffe08a;
}

.upgrade-card.is-recommend .upgrade-desc {
  color: #e8d8a8;
}

.upgrade-rec {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 2;
  padding: 3px 7px;
  font-family: var(--font-display);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #201000;
  background: #f0d060;
  border: 2px solid #101010;
  box-shadow: 2px 2px 0 #000;
  pointer-events: none;
  text-transform: uppercase;
}

@keyframes upgradeRecPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(240, 208, 96, 0.35); }
  50% { box-shadow: inset 0 0 0 2px rgba(240, 208, 96, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .upgrade-card.is-recommend .upgrade-card-body {
    animation: none;
  }
}

.side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Common laptop viewport: keep the complete square battlefield above the fold. */
@media (min-width: 861px) and (max-height: 900px) {
  body {
    padding: max(6px, var(--safe-top)) max(6px, var(--safe-right)) max(6px, var(--safe-bottom)) max(6px, var(--safe-left));
  }

  #app {
    width: min(1240px, 100%);
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 8px;
  }

  .hero {
    height: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0;
    overflow: hidden;
  }

  .hero-logo {
    flex: 0 1 210px;
    width: 210px;
  }

  .title-banner {
    max-height: 58px;
    border-width: 2px;
  }

  .game-version {
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 0.48rem;
  }

  .tagline {
    flex: 0 1 31rem;
    max-width: 31rem;
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: left;
  }

  .stage-shell {
    width: min(100%, calc(100dvh - 86px));
  }

  .side {
    max-height: calc(100dvh - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 2px;
  }

}

.panel {
  background:
    linear-gradient(#2a2a2a, #2a2a2a) padding-box,
    linear-gradient(135deg, #c0c0c0, #505050 40%, #202020) border-box;
  border: 3px solid transparent;
  border-radius: 0;
  padding: 14px 14px 12px;
  box-shadow: inset 0 0 0 1px #101010;
}

.panel h3 {
  margin: 0 0 12px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f0d060;
  font-weight: 400;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 2px dashed #303030;
  font-size: 0.68rem;
  color: #d0d0d0;
}

.stat-row:last-child { border-bottom: 0; }

.stat-row b {
  font-family: var(--font-mono);
  color: var(--accent-soft);
  font-weight: 400;
  font-size: 0.72rem;
}

.panel-pause {
  appearance: none;
  width: 100%;
  margin-top: 12px;
  border: 2px solid #c0c0c0;
  background: #202020;
  color: #f0d060;
  border-radius: 0;
  padding: 12px 8px;
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  touch-action: manipulation;
}

.panel-pause:active {
  background: #802010;
  color: #fff8e0;
}

.enemy-icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  min-height: 72px;
}

.enemy-icons i {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background:
    linear-gradient(#c8c8c8, #c8c8c8) 30% 20% / 40% 12% no-repeat,
    linear-gradient(#8a8a8a, #8a8a8a) 20% 35% / 60% 45% no-repeat,
    linear-gradient(#5a5a5a, #5a5a5a) 8% 20% / 18% 70% no-repeat,
    linear-gradient(#5a5a5a, #5a5a5a) 74% 20% / 18% 70% no-repeat,
    #101010;
  image-rendering: pixelated;
  border: 1px solid #404040;
  opacity: 0.95;
}

.enemy-icons i.gone {
  opacity: 0.18;
  filter: grayscale(1);
}

.controls {
  margin: 0;
  padding-left: 1.1rem;
  color: #c8c8c8;
  line-height: 1.85;
  font-family: var(--font-pixel);
  font-size: 0.82rem;
}

.controls kbd {
  display: inline-block;
  min-width: 1.2em;
  padding: 3px 5px;
  border: 2px solid #808080;
  border-bottom-width: 3px;
  border-radius: 0;
  background: #101010;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: #f0e6c8;
  text-align: center;
}

.feature {
  color: #e0e0e0;
  font-family: var(--font-pixel);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

.feature strong { color: var(--accent-soft); }

.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.72em;
  color: #e0e0e0;
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  line-height: 1.45;
}

.rule-list li {
  margin: 0;
  padding: 0 0 0.72em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rule-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.rule-list .rule-good { color: #70ff98; }
.rule-list .rule-ultra { color: #ffe060; }
.rule-list .rule-bad { color: #ff6060; }

.rule-list kbd {
  display: inline-block;
  min-width: 1.1em;
  padding: 1px 4px;
  border: 1px solid #808080;
  background: #101010;
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: #f0e6c8;
  text-align: center;
}

.start-blurb,
#startStageBlurb {
  white-space: pre-line;
  max-width: 28ch;
  line-height: 1.65;
}

.credit {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  color: #808080;
  line-height: 1.55;
}

.credit a { color: #a0a0a0; }

.vol-row {
  display: grid;
  grid-template-columns: 2.8em 1fr 2.2em;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-size: 0.68rem;
  color: #d0d0d0;
}

.vol-row input[type="range"] {
  width: 100%;
  accent-color: #e04040;
}

.vol-row b {
  font-family: var(--font-mono);
  color: var(--accent-soft);
  text-align: right;
  font-size: 0.68rem;
  font-weight: 400;
}

.mute-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: #c0c0c0;
  font-size: 0.68rem;
}

.pause-audio {
  width: min(260px, 90%);
  text-align: left;
  margin: 4px 0 8px;
}

.pause-audio .vol-row {
  grid-template-columns: 2.8em 1fr;
}

@media (min-width: 861px) and (max-height: 900px) {
  .panel {
    padding: 10px 11px 9px;
  }

  .panel h3 {
    margin-bottom: 8px;
  }

  .stat-row {
    padding: 5px 0;
  }

  .panel-pause {
    margin-top: 8px;
    padding: 9px 6px;
  }
}

.mobile-hint { display: none; }
.desktop-hint { display: list-item; }
p.desktop-hint { display: block; }
p.mobile-hint { display: none; }

.touch-stick-wrap,
.touch-actions-wrap {
  display: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* Stick matches FIRE + CARRY + gap + PAUSE column footprint. */
  --touch-fire: 108px;
  --touch-carry-h: 48px;
  --touch-pause-h: 40px;
  --touch-actions-gap: 10px;
  --touch-stick: calc(var(--touch-fire) + var(--touch-carry-h) + var(--touch-pause-h) + 2 * var(--touch-actions-gap));
  --touch-knob: calc(var(--touch-stick) * 0.38);
}

.touch-stick-wrap[hidden],
.touch-actions-wrap[hidden] {
  display: none !important;
}

.touch-stick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.stick-base {
  position: relative;
  width: var(--touch-stick);
  height: var(--touch-stick);
  border-radius: 0;
  border: 3px solid #808080;
  background:
    linear-gradient(#303030 0 0) center / 2px 40% no-repeat,
    linear-gradient(#303030 0 0) center / 40% 2px no-repeat,
    #101010;
  box-shadow: inset 0 0 0 2px #202020, 0 4px 0 #000;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.stick-cross { display: none; }

.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--touch-knob);
  height: var(--touch-knob);
  margin: calc(var(--touch-knob) / -2) 0 0 calc(var(--touch-knob) / -2);
  border-radius: 0;
  border: 3px solid #f0d060;
  background: #802010;
  box-shadow: 0 3px 0 #401008;
  pointer-events: none;
  transition: transform 0.05s linear;
}

.touch-label {
  margin: 0;
  font-size: 0.4rem;
  letter-spacing: 0.12em;
  color: #808080;
  text-transform: uppercase;
}

.touch-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--touch-actions-gap);
}

.touch-fire {
  appearance: none;
  width: var(--touch-fire);
  height: var(--touch-fire);
  border-radius: 0;
  border: 3px solid #f0d060;
  background: #802010;
  color: #fff8ec;
  font: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  box-shadow: 0 5px 0 #401008;
  touch-action: none;
  cursor: pointer;
}

.touch-fire:active,
.touch-fire.is-active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #401008;
  filter: brightness(1.1);
}

.touch-fire.is-disabled,
.touch-fire:disabled {
  border-color: #808080;
  background: #302020;
  color: #ff8080;
  opacity: 0.72;
  cursor: not-allowed;
}

.touch-carry {
  appearance: none;
  width: var(--touch-fire);
  height: var(--touch-carry-h);
  border-radius: 0;
  border: 3px solid #80e0ff;
  background: #184868;
  color: #e8f8ff;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  box-shadow: 0 4px 0 #0a2030;
  touch-action: none;
  cursor: pointer;
}

.touch-carry[hidden] {
  display: none !important;
}

.touch-carry:active,
.touch-carry.is-active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0a2030;
  filter: brightness(1.12);
}

body:not(.has-carry-control) .touch-actions-wrap {
  --touch-carry-h: 0px;
  --touch-stick: calc(var(--touch-fire) + var(--touch-pause-h) + var(--touch-actions-gap));
}

.touch-pause {
  appearance: none;
  min-width: 72px;
  min-height: var(--touch-pause-h);
  border-radius: 0;
  border: 2px solid #808080;
  background: #181818;
  color: #e8e8e8;
  font: inherit;
  font-size: 0.42rem;
  touch-action: manipulation;
}

body.is-touch .mobile-hint,
body.force-touch .mobile-hint {
  display: list-item;
}

body.is-touch p.mobile-hint,
body.force-touch p.mobile-hint {
  display: block;
}

body.is-touch .desktop-hint,
body.force-touch .desktop-hint {
  display: none;
}

body.is-touch .touch-stick-wrap:not([hidden]),
body.force-touch .touch-stick-wrap:not([hidden]) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

body.is-touch .touch-actions-wrap:not([hidden]),
body.force-touch .touch-actions-wrap:not([hidden]) {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

body.is-touch #app,
body.force-touch #app {
  grid-template-columns: 1fr 1fr 220px;
  grid-template-areas:
    "hero hero hero"
    "stage stage side"
    "stick actions side";
}

/* Portrait / narrow */
@media (max-width: 860px) {
  body {
    padding: max(8px, var(--safe-top)) max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));
  }

  #app {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "hero hero"
      "hud hud"
      "stage stage"
      "stick actions"
      "side side";
    gap: 10px;
  }

  .hero {
    gap: 6px;
    padding: 2px 2px 0;
  }

  .title-banner { max-height: 96px; }

  .tagline {
    font-family: var(--font-pixel);
    font-size: 0.78rem;
    max-width: none;
  }

  .mobile-hud { display: flex; }

  .stage-shell {
    width: min(100%, 96vw);
    max-width: min(520px, calc(100dvh - 280px));
  }

  body.is-touch .touch-stick-wrap:not([hidden]),
  body.force-touch .touch-stick-wrap:not([hidden]) {
    display: flex;
    justify-content: flex-start;
    padding-left: 4px;
  }

  body.is-touch .touch-actions-wrap:not([hidden]),
  body.force-touch .touch-actions-wrap:not([hidden]) {
    display: flex;
    justify-content: flex-end;
    padding-right: 4px;
    align-items: flex-end;
  }

  .side { gap: 8px; }
  .panel-stats { display: none; }
  .panel-controls-help { order: -1; }
}

/* ===== Portrait phones (primary mobile layout) ===== */
@media (orientation: portrait) and (max-width: 900px) {
  body.is-touch,
  body.force-touch {
    padding-top: max(6px, var(--safe-top));
    padding-left: max(8px, var(--safe-left));
    padding-right: max(8px, var(--safe-right));
    padding-bottom: max(6px, var(--safe-bottom));
  }

  body.is-touch #app,
  body.force-touch #app {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "hero hero"
      "hud hud"
      "stage stage"
      "stick actions"
      "side side";
    gap: 8px;
  }

  body.is-touch .title-banner,
  body.force-touch .title-banner {
    max-height: 72px;
  }

  body.is-touch .game-version,
  body.force-touch .game-version {
    right: 6px;
    bottom: 6px;
    font-size: 0.48rem;
    padding: 2px 5px;
  }

  body.is-touch .tagline {
    font-size: 0.4rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.is-touch .mobile-hud {
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    font-size: 0.4rem;
  }

  body.is-touch .mobile-hud .hud-pause {
    min-height: 28px;
    padding: 4px 8px;
  }

  body.is-touch .stage-shell {
    width: min(100%, calc(100vw - 16px));
    max-width: min(100%, calc(100dvh - 260px));
    justify-self: center;
  }

  body.is-touch .side .panel:not(.panel-audio):not(.panel-controls-help),
  body.force-touch .side .panel:not(.panel-audio):not(.panel-controls-help) {
    display: none;
  }

  body.is-touch .side .credit,
  body.force-touch .side .credit {
    display: none;
  }

  body.is-touch .touch-stick-wrap:not([hidden]),
  body.force-touch .touch-stick-wrap:not([hidden]) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 2px;
  }

  body.is-touch .touch-actions-wrap:not([hidden]),
  body.force-touch .touch-actions-wrap:not([hidden]) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 2px;
  }

  body.is-touch.is-touch-play,
  body.force-touch.is-touch-play {
    overflow: hidden;
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: 0;
  }

  body.is-touch.is-touch-play #app,
  body.force-touch.is-touch-play #app {
    height: 100%;
    max-height: 100dvh;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "hud hud"
      "stage stage"
      "stick actions";
    gap: 6px;
    align-content: stretch;
  }

  body.is-touch.is-touch-play .hero,
  body.force-touch.is-touch-play .hero,
  body.is-touch.is-touch-play .side,
  body.force-touch.is-touch-play .side {
    display: none !important;
  }

  body.is-touch.is-touch-play .stage-shell,
  body.force-touch.is-touch-play .stage-shell {
    width: min(100%, calc(100vw - 16px));
    max-width: min(100%, calc(100dvh - 220px));
    align-self: center;
    justify-self: center;
  }

  body.is-touch.is-touch-play .touch-stick-wrap:not([hidden]),
  body.force-touch.is-touch-play .touch-stick-wrap:not([hidden]),
  body.is-touch.is-touch-play .touch-actions-wrap:not([hidden]),
  body.force-touch.is-touch-play .touch-actions-wrap:not([hidden]) {
    --touch-fire: 108px;
    --touch-pause-h: 40px;
    min-height: calc(var(--touch-stick) + 24px);
    padding-bottom: max(10px, var(--safe-bottom));
    align-self: end;
  }
}

@media (orientation: portrait) and (max-width: 420px) {
  body.is-touch.is-touch-play .touch-stick-wrap:not([hidden]),
  body.force-touch.is-touch-play .touch-stick-wrap:not([hidden]),
  body.is-touch.is-touch-play .touch-actions-wrap:not([hidden]),
  body.force-touch.is-touch-play .touch-actions-wrap:not([hidden]) {
    --touch-fire: 100px;
    --touch-pause-h: 40px;
  }

  body.is-touch.is-touch-play .touch-fire,
  body.force-touch.is-touch-play .touch-fire {
    font-size: 0.5rem;
  }

  body.is-touch.is-touch-play .touch-label,
  body.force-touch.is-touch-play .touch-label {
    font-size: 0.35rem;
  }
}

@media (orientation: portrait) and (max-height: 700px) and (max-width: 900px) {
  body.is-touch.is-touch-play #app,
  body.force-touch.is-touch-play #app { gap: 4px; }

  body.is-touch.is-touch-play .mobile-hud,
  body.force-touch.is-touch-play .mobile-hud {
    padding: 4px 6px;
    font-size: 0.36rem;
  }

  body.is-touch.is-touch-play .touch-stick-wrap:not([hidden]),
  body.force-touch.is-touch-play .touch-stick-wrap:not([hidden]),
  body.is-touch.is-touch-play .touch-actions-wrap:not([hidden]),
  body.force-touch.is-touch-play .touch-actions-wrap:not([hidden]) {
    --touch-fire: 96px;
    --touch-pause-h: 32px;
    min-height: calc(var(--touch-stick) + 12px);
    padding-bottom: max(6px, var(--safe-bottom));
  }

  body.is-touch.is-touch-play .touch-pause,
  body.force-touch.is-touch-play .touch-pause {
    font-size: 0.35rem;
  }

  body.is-touch.is-touch-play .touch-label,
  body.force-touch.is-touch-play .touch-label {
    display: none;
  }
}

@media (max-width: 420px) {
  .touch-stick-wrap,
  .touch-actions-wrap {
    --touch-fire: 100px;
    --touch-pause-h: 40px;
  }
  .touch-fire { font-size: 0.5rem; }
  .overlay { padding: 14px; gap: 10px; }
  .overlay h2 { font-size: 1.05rem; }
  .overlay p { font-size: 0.88rem; }
  .overlay .hint { font-size: 0.75rem; }
  .incident-report { top: 8px; left: 6px; right: 6px; padding: 8px 8px 10px; }
}

/* Landscape phones */
@media (orientation: landscape) and (max-height: 560px) {
  body.is-touch,
  body.force-touch {
    padding-top: max(4px, var(--safe-top));
    padding-bottom: max(4px, var(--safe-bottom));
  }

  body.is-touch #app,
  body.force-touch #app {
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "hud hud hud"
      "stick stage actions";
    gap: 8px;
    align-items: center;
  }

  body.is-touch .hero,
  body.force-touch .hero,
  body.is-touch .side,
  body.force-touch .side {
    display: none;
  }

  body.is-touch .mobile-hud,
  body.force-touch .mobile-hud {
    display: flex;
  }

  body.is-touch .stage-shell,
  body.force-touch .stage-shell {
    width: min(100%, calc(100dvh - 56px));
    max-width: calc(100dvh - 56px);
    justify-self: center;
  }

  body.is-touch .touch-stick-wrap:not([hidden]),
  body.force-touch .touch-stick-wrap:not([hidden]) {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;
  }

  body.is-touch .touch-actions-wrap:not([hidden]),
  body.force-touch .touch-actions-wrap:not([hidden]) {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;
  }

  body.is-touch.is-touch-play,
  body.force-touch.is-touch-play {
    overflow: hidden;
    height: 100dvh;
  }
}

@media (orientation: landscape) and (max-height: 420px) {
  .touch-stick-wrap,
  .touch-actions-wrap {
    --touch-fire: 92px;
    --touch-pause-h: 32px;
  }
  .touch-fire { font-size: 0.45rem; }
  .touch-label { display: none; }
}