/*
  Steam Punk Star Killer stylesheet
  ---------------------------------
  Visual system goals:
  - Brass Observatory AAA arcade cabinet.
  - High contrast copper/gold UI surfaces.
  - Pinball-style score displays and dense game information.
  - Canvas remains the visual focus; controls sit as a cabinet side console.

  File map:
  1. Design tokens and global reset
  2. Page shell and cabinet layout
  3. Header marquee and stat panels
  4. Canvas frame and overlays
  5. Control panel, upgrades, score displays, perks
  6. Rules modal
  7. Responsive adjustments
*/

/* -------------------------------------------------------------------------- */
/* 1. Design Tokens And Global Reset                                          */
/* -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;
  --ink: #f8fbff;
  --muted: #ffe0a4;
  --panel: rgba(60, 34, 12, 0.92);
  --panel-strong: rgba(78, 43, 14, 0.98);
  --line: rgba(255, 220, 128, 0.58);
  --hot: #ff8a3d;
  --gold: #ffd166;
  --aqua: #9de7d3;
  --green: #b9ffb0;
  --violet: #c28746;
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

html {
  min-height: 100svh;
  background: #050712;
}

/* -------------------------------------------------------------------------- */
/* 2. Page Shell And Cabinet Layout                                           */
/* -------------------------------------------------------------------------- */

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.2), transparent 38rem),
    linear-gradient(rgba(12, 7, 3, 0.08), rgba(12, 7, 3, 0.24)),
    url("assets/nebula-background.png") center / cover fixed,
    radial-gradient(circle at 18% 14%, rgba(255, 209, 102, 0.2), transparent 31rem),
    radial-gradient(circle at 82% 18%, rgba(180, 82, 28, 0.22), transparent 28rem),
    linear-gradient(145deg, #050712 0%, #10172f 47%, #071b24 100%);
  color: var(--ink);
  font-family: "Sora", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body::before {
  content: "";
  position: fixed;
  inset: 8px;
  z-index: 30;
  pointer-events: none;
  border: 2px solid rgba(255, 220, 128, 0.34);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(90, 45, 12, 0.82),
    0 0 38px rgba(255, 173, 64, 0.22),
    0 0 0 10px rgba(20, 9, 2, 0.14) inset,
    0 0 42px rgba(255, 220, 128, 0.18) inset;
}

button,
input {
  font: inherit;
}

button {
  min-height: 44px;
  border: 1px solid rgba(255, 226, 145, 0.54);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 230, 159, 0.22), rgba(57, 26, 6, 0.84)),
    rgba(89, 47, 14, 0.8);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 246, 205, 0.14) inset, 0 10px 24px rgba(0, 0, 0, 0.28);
  touch-action: manipulation;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 245, 188, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 239, 184, 0.34), rgba(84, 39, 8, 0.9)),
    rgba(124, 66, 19, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 246, 205, 0.2) inset, 0 0 24px rgba(255, 188, 79, 0.24), 0 12px 28px rgba(0, 0, 0, 0.34);
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(255, 209, 102, 0.78);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.game-shell {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 360px;
  grid-template-areas:
    "title stats"
    "canvas command"
    "canvas score"
    "canvas upgrades"
    "canvas perks";
  align-content: start;
  gap: 20px;
  width: min(1320px, 100%);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

.stage-wrap,
.control-panel {
  min-width: 0;
}

.layout-title {
  grid-area: title;
}

.layout-run-stats {
  grid-area: stats;
}

.layout-canvas {
  grid-area: canvas;
}

.layout-score {
  grid-area: score;
}

.layout-upgrades {
  grid-area: upgrades;
}

.command-panel {
  grid-area: command;
}

.perks-panel {
  grid-area: perks;
}

/* -------------------------------------------------------------------------- */
/* 3. Header Marquee And Stat Panels                                          */
/* -------------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: stretch;
  margin-bottom: 14px;
}

.title-block {
  min-width: 0;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.eyebrow {
  margin: 0 0 5px;
  color: #ffdf8f;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.45), 0 1px 8px rgba(0, 0, 0, 0.8);
}

h1,
h2 {
  margin: 0;
  line-height: 1;
  letter-spacing: 0;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  width: 100%;
  min-height: 72px;
  padding: 9px 24px 11px;
  border: 1px solid rgba(255, 226, 145, 0.66);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 232, 153, 0.3), rgba(83, 39, 8, 0.88) 46%, rgba(26, 9, 1, 0.94)),
    url("assets/steampunk-panel.png") center / cover;
  overflow-wrap: normal;
  white-space: nowrap;
  color: #fff4c2;
  font-size: clamp(2.15rem, 3.8vw, 3.45rem);
  box-shadow:
    0 0 0 1px rgba(255, 249, 218, 0.2) inset,
    0 0 0 5px rgba(60, 32, 12, 0.64),
    0 18px 44px rgba(0, 0, 0, 0.34),
    0 0 32px rgba(255, 188, 79, 0.14);
  text-shadow: 0 2px 0 rgba(60, 22, 2, 0.8), 0 0 20px rgba(255, 209, 102, 0.28);
}

.title-full {
  display: inline;
}

.title-compact {
  display: none;
}

h2 {
  font-size: clamp(1.9rem, 5vw, 3.8rem);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 8px;
  grid-template-areas: "level balls";
  width: 100%;
  margin-bottom: 14px;
}

.stat,
.panel-section {
  border: 1px solid rgba(255, 220, 128, 0.64);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 233, 171, 0.3), rgba(78, 36, 8, 0.78) 34%, rgba(26, 11, 2, 0.72)),
    url("assets/steampunk-panel.png") center / cover,
    var(--panel);
  box-shadow:
    0 0 0 1px rgba(255, 246, 205, 0.24) inset,
    0 0 32px rgba(255, 181, 64, 0.14),
    0 18px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.stat {
  min-height: 72px;
  padding: 10px;
  overflow: hidden;
}

.stat-small:first-child {
  grid-area: level;
}

.stat-small:nth-child(2) {
  grid-area: balls;
}

.stat-coins {
  grid-area: auto;
}

.stat-score {
  grid-area: auto;
}

.stat span,
.angle-readout span {
  display: block;
  color: #fff0c4;
  font-size: 0.76rem;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.stat strong,
.angle-readout strong {
  display: block;
  margin-top: 2px;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(255, 209, 102, 0.38), 0 1px 10px rgba(0, 0, 0, 0.74);
}

.stat-display {
  min-height: 88px;
  border-color: rgba(255, 232, 153, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 209, 102, 0.22), rgba(0, 0, 0, 0.3)),
    url("assets/steampunk-panel.png") center / cover,
    rgba(8, 4, 0, 0.88);
  box-shadow: 0 0 0 1px rgba(255, 239, 184, 0.22) inset, 0 0 30px rgba(255, 159, 64, 0.2), 0 18px 60px rgba(0, 0, 0, 0.35);
}

.stat-display span {
  text-align: center;
  color: #ffd166;
}

.stat-display strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 7px 8px 5px;
  border: 1px solid rgba(255, 209, 102, 0.26);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 209, 102, 0.08) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(22, 7, 0, 0.92));
  color: #ffd166;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.55rem, 3.3vw, 2.65rem);
  font-weight: 900;
  letter-spacing: 0.045em;
  text-shadow: 0 0 6px rgba(255, 209, 102, 0.9), 0 0 18px rgba(255, 116, 54, 0.6);
}

.stat-score strong,
.stat-coins strong {
  font-size: clamp(1.45rem, 2.65vw, 2.25rem);
}

.score-panel {
  display: grid;
  gap: 10px;
}

/* -------------------------------------------------------------------------- */
/* 4. Canvas Frame And Game Overlay                                           */
/* -------------------------------------------------------------------------- */

.score-panel .stat-display {
  min-height: 96px;
}

.score-panel .stat-display strong {
  min-height: 56px;
}

.score-panel .stat-score strong,
.score-panel .stat-coins strong {
  font-size: clamp(1.48rem, 3.55vw, 2.22rem);
  letter-spacing: 0.035em;
}

.canvas-card {
  position: relative;
  overflow: hidden;
  border: 3px solid rgba(255, 220, 128, 0.78);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 209, 102, 0.22), rgba(88, 43, 9, 0.7)),
    url("assets/steampunk-panel.png") center / cover,
    #040713;
  box-shadow:
    0 0 0 5px rgba(36, 15, 3, 0.9),
    0 0 0 10px rgba(145, 82, 23, 0.75),
    0 0 0 13px rgba(255, 220, 128, 0.18),
    0 28px 90px rgba(0, 0, 0, 0.55),
    0 0 54px rgba(255, 173, 64, 0.22),
    0 0 0 1px rgba(255, 232, 153, 0.38) inset;
}

.canvas-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: calc(var(--radius) - 1px);
  box-shadow:
    0 0 0 1px rgba(255, 246, 205, 0.24) inset,
    0 0 0 8px rgba(34, 13, 2, 0.08) inset,
    0 0 0 16px rgba(255, 220, 128, 0.03) inset,
    0 0 42px rgba(255, 220, 128, 0.16) inset;
}

canvas {
  display: block;
  width: 100%;
  height: min(calc(100vh - 172px), 820px);
  min-height: 520px;
  touch-action: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(5, 7, 18, 0.12), rgba(5, 7, 18, 0.68));
}

.overlay.is-visible {
  display: grid;
}

.overlay-panel {
  width: min(560px, 100%);
  max-height: calc(100svh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 26px;
  border: 1px solid rgba(255, 220, 128, 0.58);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 226, 145, 0.24), rgba(47, 20, 5, 0.88)),
    url("assets/steampunk-panel.png") center / cover,
    rgba(47, 20, 5, 0.92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
}

.overlay-panel p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.mode-select {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.mode-select[hidden] {
  display: none;
}

.mode-card {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 12px;
  text-align: left;
}

.mode-card span {
  color: #fff8dd;
  font-size: 1.02rem;
  font-weight: 950;
}

.mode-card strong {
  color: #ffe0a4;
  font-size: 0.72rem;
  line-height: 1.25;
}

.mode-card.is-active {
  border-color: rgba(255, 245, 188, 0.96);
  background:
    linear-gradient(135deg, rgba(255, 138, 61, 0.96), rgba(255, 209, 102, 0.94));
  color: #1a0710;
}

.mode-card.is-active span,
.mode-card.is-active strong {
  color: #1a0710;
  text-shadow: none;
}

.scoreboard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(255, 220, 128, 0.66);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 245, 188, 0.32), transparent 7rem),
    linear-gradient(180deg, rgba(5, 7, 18, 0.74), rgba(46, 18, 4, 0.88)),
    url("assets/nebula-background.png") center / cover;
  box-shadow:
    0 0 0 1px rgba(255, 246, 205, 0.18) inset,
    0 0 34px rgba(255, 188, 79, 0.2),
    0 18px 50px rgba(0, 0, 0, 0.44);
}

.scoreboard[hidden] {
  display: none;
}

.scoreboard::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid rgba(255, 238, 183, 0.22);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 209, 102, 0.06) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(255, 209, 102, 0.08), rgba(0, 0, 0, 0.22));
  box-shadow: 0 0 36px rgba(255, 188, 79, 0.16) inset;
}

.scoreboard-hero {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.58;
}

.scoreboard-gear {
  position: absolute;
  width: 84px;
  aspect-ratio: 1;
  border: 9px dotted rgba(255, 209, 102, 0.42);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(84, 39, 8, 0.44) inset, 0 0 28px rgba(255, 188, 79, 0.24);
}

.gear-one {
  right: -26px;
  top: -30px;
}

.gear-two {
  left: -30px;
  bottom: 18px;
  width: 58px;
}

.scoreboard-orbit {
  position: absolute;
  right: 34px;
  bottom: 30px;
  width: 100px;
  aspect-ratio: 1;
  border: 1px solid rgba(157, 231, 211, 0.34);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(157, 231, 211, 0.14);
}

.scoreboard-entry {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.scoreboard-entry label {
  color: #fff1bc;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.74);
}

.scoreboard-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.scoreboard-entry input {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 226, 145, 0.64);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.86), rgba(22, 7, 0, 0.92));
  color: #ffd166;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 0 0 1px rgba(255, 246, 205, 0.14) inset;
}

.scoreboard-entry p {
  min-height: 20px;
  margin: 0;
  color: #b9ffb0;
  font-size: 0.8rem;
  font-weight: 900;
}

.scoreboard-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 10px;
}

.scoreboard-mode-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scoreboard-tab {
  min-height: 36px;
  padding: 6px 4px;
  font-size: 0.72rem;
  font-weight: 900;
}

.scoreboard-tab.is-active {
  border-color: rgba(255, 245, 188, 0.96);
  background:
    linear-gradient(135deg, var(--hot), var(--gold));
  color: #1a0710;
}

.scoreboard-list {
  display: grid;
  gap: 5px;
  max-height: min(290px, 34svh);
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  list-style: none;
}

.scoreboard-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 42px minmax(104px, auto);
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 220, 128, 0.2);
  border-radius: 6px;
  background: rgba(8, 4, 0, 0.58);
  color: #ffe8b8;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 900;
}

.scoreboard-rank {
  color: #ffd166;
}

.scoreboard-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoreboard-level {
  color: #9de7d3;
}

.scoreboard-list strong {
  color: #ffd166;
  text-align: right;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.78);
}

.scoreboard-empty {
  grid-template-columns: 1fr !important;
  justify-items: center;
  color: #fff1bc;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* 5. Control Panel, Upgrades, Score Displays, And Perks                      */
/* -------------------------------------------------------------------------- */

#primary-action,
.primary {
  width: 100%;
  border: 0;
  background: linear-gradient(135deg, var(--hot), var(--gold));
  color: #160611;
  font-weight: 900;
  box-shadow: 0 14px 40px rgba(255, 77, 125, 0.28);
}

.control-panel {
  display: contents;
}

.panel-section {
  padding: 16px;
}

.control-panel .panel-section,
.layout-upgrades,
.score-panel .stat-display {
  position: relative;
  overflow: hidden;
}

.control-panel .panel-section::before,
.layout-upgrades::before,
.score-panel .stat-display::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 238, 183, 0.18);
  border-radius: 6px;
  box-shadow: 0 0 26px rgba(255, 188, 79, 0.16) inset;
}

.control-panel .panel-section > *,
.layout-upgrades > *,
.score-panel .stat-display > * {
  position: relative;
  z-index: 1;
}

.panel-section.compact {
  min-height: 170px;
}

.angle-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
  margin: 4px 0 16px;
}

.button-row,
.upgrade-grid {
  display: grid;
  gap: 8px;
}

.button-row {
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}

.rules-button {
  width: 100%;
  margin-top: 8px;
}

.launch-state {
  min-height: 22px;
  margin: 10px 0 0;
  color: #b8ffc6;
  font-size: 0.84rem;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(116, 255, 141, 0.38);
}

.upgrade-grid {
  grid-template-columns: 1fr 1fr;
}

.upgrade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.upgrade-header .eyebrow {
  margin-bottom: 0;
}

.auto-upgrade-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  padding: 2px 6px;
  border: 1px solid rgba(255, 209, 102, 0.34);
  border-radius: 999px;
  background: rgba(32, 13, 4, 0.42);
  color: #fff1bc;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95), 0 0 12px rgba(255, 188, 79, 0.38);
  cursor: pointer;
  user-select: none;
}

.auto-upgrade-toggle input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--gold);
}

.upgrade-panel {
  border-color: rgba(255, 238, 166, 0.82);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 245, 188, 0.42), transparent 11rem),
    linear-gradient(180deg, rgba(255, 232, 153, 0.48), rgba(112, 56, 13, 0.72) 38%, rgba(37, 16, 3, 0.84)),
    url("assets/steampunk-panel.png") center / cover,
    var(--panel-strong);
  box-shadow:
    0 0 0 1px rgba(255, 252, 224, 0.3) inset,
    0 0 38px rgba(255, 188, 79, 0.26),
    0 18px 60px rgba(0, 0, 0, 0.42);
}

.upgrade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: 96px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 13px;
  border-color: rgba(255, 239, 184, 0.82);
  background-blend-mode: normal;
  text-align: left;
  box-shadow:
    0 0 0 1px rgba(255, 252, 224, 0.42) inset,
    0 0 22px rgba(255, 188, 79, 0.24),
    0 10px 26px rgba(0, 0, 0, 0.34);
}

.upgrade::before,
.upgrade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.upgrade::before {
  opacity: 0.7;
  background:
    linear-gradient(108deg, transparent 0 28%, rgba(255, 249, 218, 0.46) 39%, transparent 52%),
    linear-gradient(180deg, rgba(255, 252, 224, 0.22), transparent 32%);
  transform: translateX(-55%);
  animation: upgrade-shimmer 5.8s ease-in-out infinite;
}

.upgrade::after {
  opacity: 0.9;
  mix-blend-mode: screen;
}

.upgrade[data-upgrade="balls"] {
  background:
    linear-gradient(135deg, rgba(34, 17, 4, 0.12), rgba(82, 43, 8, 0.14)),
    url("assets/steampunk-panel.png") center / cover,
    radial-gradient(circle at 78% 22%, rgba(255, 209, 102, 0.55), transparent 42px);
}

.upgrade[data-upgrade="balls"]::after {
  background:
    radial-gradient(circle at 72% 27%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 82% 62%, #ffd166 0 2px, transparent 3px),
    radial-gradient(circle at 58% 48%, #ffd166 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0 45%, rgba(255, 209, 102, 0.52) 46% 48%, transparent 49%);
}

.upgrade[data-upgrade="impact"] {
  background:
    linear-gradient(135deg, rgba(82, 40, 6, 0.16), rgba(160, 82, 18, 0.12)),
    url("assets/steampunk-panel.png") center / cover,
    radial-gradient(circle at 80% 26%, rgba(255, 209, 102, 0.58), transparent 44px);
}

.upgrade[data-upgrade="impact"]::after {
  background:
    radial-gradient(circle at 78% 28%, rgba(255, 209, 102, 0.92) 0 8px, transparent 9px),
    radial-gradient(circle at 68% 48%, rgba(255, 209, 102, 0.8) 0 6px, transparent 7px),
    radial-gradient(circle at 88% 52%, rgba(255, 209, 102, 0.8) 0 5px, transparent 6px),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(255, 209, 102, 0.26) 13px 15px);
}

.upgrade[data-upgrade="launchTime"] {
  background:
    linear-gradient(135deg, rgba(98, 28, 5, 0.22), rgba(178, 70, 18, 0.16)),
    url("assets/steampunk-panel.png") center / cover,
    radial-gradient(circle at 78% 26%, rgba(255, 138, 61, 0.66), transparent 46px);
}

.upgrade[data-upgrade="launchTime"]::after {
  background:
    radial-gradient(circle at 78% 38%, rgba(255, 209, 102, 0.78) 0 15px, transparent 16px),
    radial-gradient(circle at 78% 38%, transparent 0 22px, rgba(255, 209, 102, 0.48) 23px 25px, transparent 26px),
    linear-gradient(90deg, transparent 0 76%, rgba(255, 245, 188, 0.72) 77% 79%, transparent 80%),
    linear-gradient(0deg, transparent 0 36%, rgba(255, 245, 188, 0.52) 37% 39%, transparent 40%);
}

.upgrade[data-upgrade="powerupChance"] {
  background:
    linear-gradient(135deg, rgba(58, 34, 9, 0.18), rgba(164, 104, 35, 0.12)),
    url("assets/steampunk-panel.png") center / cover,
    radial-gradient(circle at 78% 25%, rgba(157, 231, 211, 0.46), transparent 46px);
}

.upgrade[data-upgrade="powerupChance"]::after {
  background:
    radial-gradient(circle at 72% 28%, rgba(157, 231, 211, 0.92) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 42%, rgba(255, 209, 102, 0.86) 0 5px, transparent 6px),
    radial-gradient(circle at 66% 56%, rgba(255, 138, 61, 0.82) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 64%, rgba(255, 245, 188, 0.8) 0 4px, transparent 5px);
}

.upgrade span {
  color: #fff1bc;
  font-size: 0.82rem;
  font-weight: 900;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95), 0 0 12px rgba(255, 188, 79, 0.38);
}

.upgrade strong {
  color: #fff8dd;
  font-size: 1.32rem;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.9), 0 0 22px rgba(255, 116, 54, 0.55);
}

.upgrade strong::before {
  content: "$";
}

@keyframes upgrade-shimmer {
  0%,
  54% {
    transform: translateX(-62%);
    opacity: 0.2;
  }

  68% {
    opacity: 0.72;
  }

  82%,
  100% {
    transform: translateX(62%);
    opacity: 0.2;
  }
}

.mod-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mod-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 220, 128, 0.18);
  background: rgba(255, 220, 128, 0.1);
  color: #ffe8b8;
  font-size: 0.85rem;
}

/* -------------------------------------------------------------------------- */
/* 6. Rules Modal                                                             */
/* -------------------------------------------------------------------------- */

.rules-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 5, 14, 0.78);
}

.rules-modal.is-visible {
  display: flex;
}

.rules-panel {
  width: min(980px, 100%);
  max-height: min(86vh, 820px);
  overflow: auto;
  border: 1px solid rgba(255, 220, 128, 0.64);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 232, 153, 0.22), rgba(45, 18, 4, 0.9)),
    url("assets/steampunk-panel.png") center / cover,
    var(--panel-strong);
  box-shadow: 0 0 0 1px rgba(255, 246, 205, 0.2) inset, 0 28px 90px rgba(0, 0, 0, 0.58);
}

.rules-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 232, 153, 0.24), rgba(62, 27, 6, 0.96)),
    rgba(62, 27, 6, 0.96);
}

.rules-header h2 {
  font-size: clamp(1.55rem, 3vw, 2.4rem);
}

.rules-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rules-link-button {
  min-height: 40px;
  padding: 0 13px;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.icon-button {
  width: 44px;
  min-width: 44px;
  padding: 0;
  font-size: 1.75rem;
  line-height: 1;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.rules-grid article {
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(34, 14, 3, 0.68);
}

.rules-grid h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.rules-grid p,
.rules-grid li {
  color: #ffe7b5;
  font-size: 0.92rem;
  line-height: 1.5;
}

.rules-grid p,
.rules-grid ul {
  margin: 0;
}

.rules-grid ul {
  padding-left: 18px;
}

/* -------------------------------------------------------------------------- */
/* 7. Responsive Adjustments                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 940px) {
  body {
    background-attachment: scroll;
  }

  .game-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "stats"
      "canvas"
      "score"
      "upgrades"
      "command"
      "perks";
    gap: 14px;
    width: min(720px, 100%);
  }

  .topbar {
    width: 100%;
  }

  h1 {
    min-height: 62px;
    font-size: 2.55rem;
  }

  .stat-grid {
    width: 100%;
  }

  canvas {
    height: min(68vh, 760px);
    height: min(68svh, 760px);
    min-height: 520px;
  }

  .score-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rules-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body::before {
    inset: 4px;
    border-radius: 7px;
  }

  .game-shell {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title stats"
      "canvas canvas"
      "score score"
      "upgrades upgrades"
      "command command"
      "perks perks";
    width: min(430px, 100%);
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .topbar {
    margin-bottom: 0;
  }

  h1 {
    min-height: 46px;
    padding: 7px 9px 8px;
    font-size: clamp(0.94rem, 3.85vw, 1.13rem);
    text-align: center;
  }

  .title-full {
    display: inline;
  }

  .title-compact {
    display: none;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 66px);
    grid-template-areas: "level balls";
    gap: 6px;
    justify-self: end;
    width: max-content;
    margin-bottom: 0;
  }

  .stat-small {
    width: 66px;
    min-height: 46px;
    padding: 6px 5px;
  }

  .stat span,
  .angle-readout span {
    font-size: 0.68rem;
  }

  .stat strong,
  .angle-readout strong {
    font-size: 1.22rem;
  }

  .canvas-card {
    border-width: 2px;
    box-shadow:
      0 0 0 3px rgba(36, 15, 3, 0.9),
      0 0 0 6px rgba(145, 82, 23, 0.72),
      0 16px 50px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 232, 153, 0.34) inset;
  }

  canvas {
    height: clamp(390px, 58svh, 560px);
    min-height: 0;
  }

  .control-panel {
    gap: 10px;
  }

  .button-row,
  .upgrade-grid,
  .score-panel {
    gap: 7px;
  }

  .panel-section {
    padding: 10px;
  }

  .panel-section.compact {
    min-height: 128px;
  }

  .upgrade {
    min-height: 58px;
    padding: 7px;
  }

  .stat-display {
    min-height: 60px;
  }

  .score-panel .stat-display {
    min-height: 60px;
  }

  .score-panel .stat-display strong {
    min-height: 34px;
    padding: 5px 6px 4px;
    font-size: clamp(1.05rem, 3.6vw, 1.24rem);
    letter-spacing: 0.025em;
  }

  .score-panel .stat-coins strong,
  .score-panel .stat-score strong {
    font-size: clamp(1.05rem, 3.6vw, 1.24rem);
  }

  .upgrade span,
  .mod-list li {
    font-size: 0.68rem;
  }

  .upgrade strong {
    font-size: 0.98rem;
  }

  .upgrade-panel .eyebrow {
    margin-bottom: 4px;
  }

  .upgrade-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .button-row {
    grid-template-columns: 1fr 1fr;
  }

  .overlay {
    padding: 14px;
  }

  .overlay-panel {
    max-height: calc(100svh - 28px);
    padding: 18px;
  }

  .overlay-panel p:not(.eyebrow) {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .mode-select {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .mode-card {
    min-height: 58px;
    padding: 9px 10px;
  }

  .scoreboard {
    margin: 12px 0;
    padding: 12px;
  }

  .scoreboard-entry-row {
    grid-template-columns: 1fr;
  }

  .scoreboard-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .scoreboard-tab {
    min-height: 34px;
    font-size: 0.66rem;
  }

  .scoreboard-list {
    max-height: min(218px, 30svh);
  }

  .scoreboard-list li {
    grid-template-columns: 28px minmax(0, 1fr) 34px minmax(82px, auto);
    gap: 5px;
    padding: 6px;
    font-size: 0.72rem;
  }

  .rules-modal {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .rules-header,
  .rules-grid article {
    padding: 14px;
  }

  .rules-actions {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 8px;
  }

  .rules-link-button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.68rem;
  }
}

@media (max-width: 380px) {
  .game-shell {
    gap: 8px;
  }

  h1 {
    min-height: 44px;
    padding: 7px 6px;
    font-size: 0.86rem;
  }

  .stat-grid,
  .score-panel,
  .upgrade-grid {
    gap: 6px;
  }

  .stat-small {
    width: 60px;
    min-height: 44px;
    padding: 6px 4px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 60px);
  }

  .stat span,
  .angle-readout span,
  .eyebrow {
    font-size: 0.68rem;
  }

  canvas {
    height: clamp(350px, 55svh, 500px);
    min-height: 0;
  }

  .panel-section {
    padding: 10px;
  }

  .upgrade {
    min-height: 54px;
    padding: 6px;
  }

  .score-panel .stat-display strong,
  .score-panel .stat-coins strong,
  .score-panel .stat-score strong {
    font-size: 1rem;
  }

  .upgrade strong {
    font-size: 0.9rem;
  }

  .scoreboard-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .scoreboard-list li {
    grid-template-columns: 24px minmax(0, 1fr) 30px minmax(70px, auto);
    font-size: 0.66rem;
  }
}

@media (max-width: 940px) and (orientation: landscape) {
  .game-shell {
    grid-template-columns: minmax(420px, 1fr) minmax(260px, 330px);
    grid-template-areas:
      "title stats"
      "canvas score"
      "canvas upgrades"
      "canvas command"
      "canvas perks";
    width: min(1120px, 100%);
    min-height: 100vh;
    min-height: 100svh;
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  h1 {
    min-height: 54px;
    font-size: 2rem;
  }

  canvas {
    height: min(calc(100vh - 106px), 600px);
    height: min(calc(100svh - 106px), 600px);
    min-height: 360px;
  }

  .score-panel {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 760px) and (max-height: 520px) and (orientation: landscape) {
  .game-shell {
    grid-template-columns: minmax(360px, 1fr) minmax(232px, 280px);
    grid-template-areas:
      "title stats"
      "canvas score"
      "canvas upgrades"
      "canvas command"
      "canvas perks";
    gap: 10px;
  }

  .topbar {
    margin-bottom: 8px;
  }

  h1 {
    min-height: 44px;
    padding: 6px 10px 7px;
    font-size: 1.55rem;
  }

  canvas {
    height: min(calc(100vh - 72px), 470px);
    height: min(calc(100svh - 72px), 470px);
    min-height: 300px;
  }

  .stat-grid {
    gap: 6px;
    margin-bottom: 0;
  }

  .stat {
    min-height: 48px;
    padding: 7px;
  }

  .stat-display,
  .score-panel .stat-display {
    min-height: 66px;
  }

  .stat strong,
  .angle-readout strong {
    font-size: 1.12rem;
  }

  .score-panel .stat-display strong {
    min-height: 38px;
  }

  .panel-section {
    padding: 10px;
  }

  .panel-section.compact {
    min-height: 0;
  }

  .upgrade {
    min-height: 68px;
    padding: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .overlay,
  .rules-modal,
  .scoreboard-gear,
  .scoreboard-orbit {
    animation: none !important;
  }
}