:root {
  --cyan: #08bad2;
  --cyan-deep: #007f9e;
  --cyan-light: #6ef0ef;
  --coral: #ff5473;
  --coral-deep: #a91d43;
  --ink: #063b52;
  --display: #164e48;
  --glow: #bbff8f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  min-height: 100%;
  background: #fff2c6;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 15%, rgb(255 255 255 / 78%) 0 4%, transparent 18%),
    radial-gradient(circle at 88% 80%, rgb(255 255 255 / 55%) 0 5%, transparent 22%),
    repeating-linear-gradient(135deg, transparent 0 24px, rgb(244 159 75 / 5%) 24px 26px),
    linear-gradient(145deg, #fff9dd, #ffdda1);
}

button { font: inherit; }

.page-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 22px 16px 16px;
}

.toy {
  position: relative;
  width: min(760px, calc(100vw - 24px));
  padding: clamp(18px, 4vw, 36px);
  overflow: hidden;
  isolation: isolate;
  border: 5px solid #057b97;
  border-radius: 58px 58px 92px 92px;
  background:
    linear-gradient(90deg, transparent 0 3%, rgb(255 255 255 / 20%) 6%, transparent 12% 88%, rgb(0 83 117 / 14%) 96%),
    linear-gradient(155deg, var(--cyan-light), var(--cyan) 18%, #08accb 76%, var(--cyan-deep));
  box-shadow:
    inset 0 7px 3px rgb(255 255 255 / 48%),
    inset 0 -13px 8px rgb(0 79 111 / 28%),
    0 13px 0 #005d78,
    0 24px 38px rgb(91 57 28 / 30%);
}

.toy::before,
.toy::after {
  position: absolute;
  z-index: -1;
  bottom: 12%;
  width: 28px;
  height: 38%;
  border-radius: 50%;
  background: rgb(0 92 126 / 22%);
  content: "";
}

.toy::before { left: -14px; }
.toy::after { right: -14px; }

.toy__highlight {
  position: absolute;
  top: 17px;
  left: 11%;
  width: 43%;
  height: 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 43%);
  transform: rotate(-1.5deg);
}

.scoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 10px 17px;
}

.brand-block__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #eafffb;
  font-size: clamp(8px, 1.5vw, 12px);
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 1px #007893;
}

.brand-block h1 {
  margin: 0;
  color: #fff9cb;
  font-size: clamp(20px, 4vw, 36px);
  font-style: italic;
  font-weight: 1000;
  letter-spacing: -.07em;
  line-height: .95;
  text-shadow: 1px 2px #ef4563, 3px 4px #00758e;
  transform: rotate(-2deg);
}

.brand-block h1 span { font-size: .55em; }

.digital-readout {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(9px, 2vw, 18px);
  min-width: min(315px, 49%);
  padding: 9px clamp(12px, 2vw, 20px) 10px;
  border: 4px solid #00637c;
  border-radius: 14px;
  background: linear-gradient(rgb(255 255 255 / 8%), transparent 35%), var(--display);
  box-shadow: inset 0 3px 7px rgb(0 0 0 / 46%), 0 3px rgb(133 255 246 / 56%);
}

.digital-readout__item {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.digital-readout__item + .digital-readout__item {
  border-left: 2px solid #0a373a;
}

.digital-readout__label {
  color: #8cd4a3;
  font: 700 clamp(8px, 1.4vw, 11px) / 1 monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.digital-readout__value {
  color: var(--glow);
  font: 800 clamp(22px, 5vw, 39px) / .95 "Courier New", monospace;
  letter-spacing: .04em;
  text-shadow: 0 0 8px rgb(176 255 132 / 34%);
}

.digital-readout__divider {
  width: 2px;
  height: 35px;
  background: #0a373a;
  box-shadow: 1px 0 rgb(137 205 166 / 19%);
}

.tank-bezel {
  padding: clamp(10px, 2vw, 17px);
  border: 4px solid #006b84;
  border-radius: 35px;
  background: linear-gradient(145deg, #026c86, #53e0e5 50%, #00627d);
  box-shadow: inset 0 3px 5px rgb(255 255 255 / 45%), 0 4px rgb(125 255 245 / 31%);
}

.tank {
  position: relative;
  aspect-ratio: 620 / 560;
  overflow: hidden;
  border: 5px solid #d7ffff;
  border-radius: 24px;
  background: #95e6ea;
  box-shadow: inset 0 0 32px rgb(0 88 126 / 43%), inset 0 0 0 3px rgb(20 109 134 / 42%), 0 2px #00647c;
}

#gameCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.tank__glare {
  position: absolute;
  z-index: 4;
  top: -22%;
  left: -17%;
  width: 52%;
  height: 116%;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 13%), transparent);
  transform: rotate(17deg);
}

.tank__rim {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  border-radius: 19px;
  box-shadow: inset 9px 10px 14px rgb(255 255 255 / 20%), inset -8px -10px 17px rgb(0 66 102 / 23%);
}

.level-intro {
  position: absolute;
  z-index: 5;
  top: 12%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 22px 12px;
  border-radius: 14px;
  background: rgb(8 40 54 / 62%);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -8px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.level-intro.is-visible { opacity: 1; transform: translate(-50%, 0); }

.level-intro__eyebrow {
  color: #ffe27a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.level-intro__name {
  color: #ffffff;
  font-size: clamp(17px, 4.6vw, 21px);
  font-weight: 900;
  letter-spacing: .03em;
  text-shadow: 0 2px 6px rgb(0 0 0 / 35%);
  text-transform: uppercase;
}

.game-overlay {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  background: rgb(8 82 105 / 20%);
  backdrop-filter: blur(2px);
  transition: opacity 180ms ease;
}

.game-overlay.is-visible { opacity: 1; pointer-events: auto; }

.game-overlay__panel {
  position: relative;
  width: min(410px, 90%);
  padding: clamp(20px, 5vw, 35px);
  border: 4px solid rgb(255 255 255 / 83%);
  border-radius: 28px;
  text-align: center;
  background: rgb(234 255 242 / 88%);
  box-shadow: 0 12px 35px rgb(0 52 82 / 30%), inset 0 2px white;
}

.overlay-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid rgb(6 59 82 / 25%);
  border-radius: 50%;
  color: #063b52;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  background: rgb(255 255 255 / 75%);
}

.overlay-close:active { transform: translateY(1px); }

.level-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

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

.level-select__back {
  align-self: flex-start;
  padding: 6px 4px;
  border: 0;
  color: #0a3446;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  background: transparent;
}

.level-select__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}

.level-select__item {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 3px solid #a71f43;
  border-radius: 14px;
  color: white;
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(#ff7890, #f13e62);
  box-shadow: inset 0 3px rgb(255 255 255 / 35%), 0 4px #a71f43;
}

.level-select__item:active { transform: translateY(3px); box-shadow: 0 1px #a71f43; }

.level-select__item.is-current {
  border-color: #0c7a4f;
  background: linear-gradient(#3ddc97, #12a06a);
  box-shadow: inset 0 3px rgb(255 255 255 / 35%), 0 4px #0c7a4f;
}

.level-select__item.is-locked {
  border-color: rgb(6 59 82 / 25%);
  color: rgb(6 59 82 / 45%);
  cursor: not-allowed;
  background: rgb(6 59 82 / 8%);
  box-shadow: none;
}

.level-select__item.is-locked:active { transform: none; }

.level-select__check {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #0c7a4f;
  font-size: 12px;
  background: white;
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
}

.game-overlay__kicker {
  color: #f13d61;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.game-overlay h2 {
  margin: 5px 0 8px;
  color: #007e9b;
  font-size: clamp(30px, 8vw, 54px);
  letter-spacing: -.07em;
  line-height: .95;
  text-shadow: 2px 2px white;
}

.game-overlay p {
  margin: 0 auto 20px;
  max-width: 32ch;
  font: clamp(13px, 2.5vw, 17px) / 1.4 "Trebuchet MS", sans-serif;
}

.mode-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}

.mode-button {
  min-width: 0;
  padding: 13px 10px 11px;
  border: 3px solid;
  border-radius: 17px;
  color: white;
  cursor: pointer;
  box-shadow: inset 0 3px rgb(255 255 255 / 28%), 0 5px rgb(0 66 92 / 20%);
  transition: transform 80ms ease;
}

.mode-button:active { transform: translateY(3px); }
.mode-button--solo { border-color: #a71f43; background: linear-gradient(#ff7890, #f13e62); }
.mode-button strong { display: block; font-size: 16px; text-transform: uppercase; }
.mode-button small { display: block; margin-top: 4px; font: 700 10px/1.2 "Trebuchet MS", sans-serif; }

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
}

.overlay-menu-button {
  padding: 10px 14px;
  border: 2px solid #00728d;
  border-radius: 999px;
  color: #00667f;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #bff5ec;
}

.overlay-button,
.reset-button { border: 0; cursor: pointer; text-transform: uppercase; }

.overlay-button {
  padding: 13px 25px 11px;
  border: 3px solid var(--coral-deep);
  border-radius: 999px;
  color: white;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .1em;
  background: linear-gradient(#ff7890, #f13e62);
  box-shadow: inset 0 3px rgb(255 255 255 / 35%), 0 5px var(--coral-deep);
}

.overlay-button:active { transform: translateY(4px); box-shadow: 0 1px var(--coral-deep); }

.share-card-button {
  border: 3px solid #0c7a4f;
  border-radius: 999px;
  padding: 12px 22px 10px;
  color: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(#3ddc97, #12a06a);
  box-shadow: inset 0 3px rgb(255 255 255 / 35%), 0 5px #0c7a4f;
}

.share-card-button:active { transform: translateY(4px); box-shadow: 0 1px #0c7a4f; }
.share-card-button:disabled { cursor: wait; opacity: .7; }

/* .control-labels and .controls are two independent rows that need their
   left/right columns to land in exactly the same place (labels above jet
   buttons). Pulling the shared column/gap values onto their parent as
   custom properties, instead of declaring them twice, is what guarantees
   that — two separately-tuned grids only ever line up by coincidence. */
.control-deck {
  --row-cols: minmax(100px, 1fr) minmax(70px, .55fr) minmax(100px, 1fr);
  --row-gap: clamp(11px, 4vw, 32px);
}

.control-labels {
  position: relative;
  display: grid;
  grid-template-columns: var(--row-cols);
  align-items: center;
  gap: var(--row-gap);
  padding: 10px 6% 3px;
  color: #005e78;
  font-size: clamp(9px, 2vw, 12px);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Explicit column numbers, not just source order — the tilt button between
   these two spans is taken out of grid flow (position: absolute) below, so
   with only 2 flowed items left, default auto-placement would put them in
   columns 1 and 2 instead of the outer 1 and 3. */
.control-labels span:first-child { grid-column: 1; justify-self: start; }
.control-labels span:last-child { grid-column: 3; justify-self: end; }

/* On the narrowest phones (~320-340px) this row was measured down to under
   1px of clearance between the tilt pill and "Right current" — not
   overlapping, but no breathing room either. Letter-spacing alone was
   costing "Right current" ~9px it didn't need; trimming it here (rather
   than shrinking the tilt pill further, which is already at its floor)
   buys real room back without touching legibility. Specificity bumped
   (body .control-labels, not just .control-labels) because the later
   "physical console pass" section sets its own unconditional font-size/
   letter-spacing at equal specificity and would otherwise win regardless
   of this media query, by source order alone. */
@media (max-width: 340px) {
  body .control-labels { letter-spacing: .03em; font-size: 8px; }
}

/* Tilt sits between the two jet buttons instead of in the footer row — it's
   a phone-motion control, so it belongs where a thumb rests while holding
   the device to pump both jets, not lumped in with the menu/skin/reset row.
   It's taken out of the grid flow (absolute + centered) rather than placed
   in the middle column, because its text length varies ("Tilt off" / "Hold
   steady" / "No sensor") — sizing the middle column to fit that would
   throw off the shared column widths the alignment above depends on. */
.control-labels .tilt-button {
  position: absolute;
  top: calc(50% + 2px);
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 0;
  padding: 3px 7px;
  border-radius: 20px;
  /* Smaller than the labels on either side (not just "inherit"), since its
     longer states ("Needs HTTPS"/"No sensor") need to fit centered between
     two label pills that are also fighting for the same narrow row. */
  font-size: clamp(8px, 1.7vw, 10px);
  /* Capped and allowed to wrap instead of nowrap — on a narrow phone the
     true gap between "Left current" and "Right current" can be under
     80px, less than a longer status text needs on one line. Wrapping to
     two short lines keeps it centered and readable instead of the pill
     sliding sideways into the label next to it. */
  max-width: min(58px, 19vw);
  line-height: 1.05;
  text-align: center;
  white-space: normal;
}

/* The generic .tilt-button:active rule below sets its own translateY(2px)
   at equal specificity — since it's declared later, it would win and
   replace the centering transform outright while pressed, flinging the
   pill to its top-left corner instead of just nudging it down. Keep both
   transforms, at higher specificity so this always wins regardless of
   source order. */
.control-labels .tilt-button:active {
  transform: translate(-50%, -50%) translateY(2px);
}

.controls {
  display: grid;
  grid-template-columns: var(--row-cols);
  align-items: center;
  gap: var(--row-gap);
  padding: 4px 5% 5px;
}

.player-station {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.jet-button {
  position: relative;
  min-height: clamp(72px, 15vw, 105px);
  overflow: hidden;
  border: 5px solid var(--coral-deep);
  border-radius: 28px 28px 35px 35px;
  color: white;
  cursor: pointer;
  font-size: clamp(17px, 4vw, 28px);
  font-weight: 1000;
  letter-spacing: .02em;
  line-height: .85;
  text-transform: uppercase;
  background: radial-gradient(circle at 50% 20%, #ff9ead 0 6%, transparent 38%), linear-gradient(145deg, #ff6980, #eb3158);
  box-shadow: inset 0 7px 2px rgb(255 255 255 / 24%), inset 0 -7px 5px rgb(132 13 54 / 19%), 0 9px #9e1c40, 0 13px 12px rgb(0 79 108 / 36%);
  transition: transform 70ms ease, box-shadow 70ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.jet-button:active,
.jet-button.is-pressed {
  transform: translateY(7px) scaleY(.97);
  box-shadow: inset 0 4px 6px rgb(113 0 37 / 19%), 0 2px #9e1c40, 0 5px 6px rgb(0 79 108 / 26%);
}

.jet-button:focus-visible,
.overlay-button:focus-visible,
.reset-button:focus-visible { outline: 4px solid #fff6a8; outline-offset: 3px; }

.jet-button__shine {
  position: absolute;
  top: 9px;
  left: 15%;
  width: 42%;
  height: 10px;
  border-radius: 50%;
  background: rgb(255 255 255 / 35%);
}

.jet-button__arrow { margin-right: 4px; color: #fff7aa; font-size: .85em; }

.jet-button small {
  display: block;
  margin-top: 9px;
  color: #ffd6d9;
  font: 800 clamp(8px, 1.8vw, 11px) / 1 monospace;
  letter-spacing: .1em;
}

.speaker {
  display: grid;
  grid-template-columns: repeat(3, 10px);
  justify-content: center;
  gap: 8px;
  transform: rotate(45deg);
}

.speaker span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00738e;
  box-shadow: inset 1px 2px 2px rgb(0 44 68 / 52%), 1px 1px rgb(143 255 249 / 34%);
}

.toy-footer {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  gap: clamp(4px, 2vw, 8px);
  padding: 14px 4% 0;
  color: #d7ffff;
  font-size: clamp(8px, 1.6vw, 11px);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The footer's controls share one equal-width, equal-height grid column so
   the toolbar reads as one consistent row regardless of label length. */
.toy-footer > .mode-menu-button,
.toy-footer > .sound-button,
.toy-footer > .theme-picker,
.toy-footer > .reset-button {
  min-width: 0;
}

/* The theme-picker's popover is absolutely positioned and must float above
   its own box, so it can't get overflow:hidden like its siblings — clip
   only the plain buttons, whose content never needs to escape their box. */
.toy-footer > .mode-menu-button,
.toy-footer > .sound-button,
.toy-footer > .reset-button {
  overflow: hidden;
}

.theme-switcher__button:focus-visible,
.mode-menu-button:focus-visible,
.sound-button:focus-visible,
.tilt-button:focus-visible { outline: 3px solid #fff6a8; outline-offset: 2px; }

.toy-footer__badge { padding: 5px 8px; border: 2px solid rgb(207 255 250 / 62%); border-radius: 6px; }

.mode-menu-button,
.sound-button,
.tilt-button {
  display: grid;
  place-items: center;
  min-height: 29px;
  padding: clamp(4px, 1.5vw, 5px) clamp(4px, 2.2vw, 8px);
  border: 2px solid rgb(207 255 250 / 62%);
  border-radius: 6px;
  color: #d7ffff;
  cursor: pointer;
  font-size: inherit;
  font-weight: 900;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  background: transparent;
}

.sound-button { font-size: clamp(14px, 3.2vw, 18px); }
.sound-button[aria-pressed="false"] { opacity: .5; }
.sound-button:active { transform: translateY(2px); }

.tilt-button {
  letter-spacing: .08em;
  background: rgb(0 82 105 / 18%);
  transition: transform 80ms ease, color 140ms ease, background-color 140ms ease;
}

.tilt-button[aria-pressed="true"] {
  border-color: #fff1a0;
  color: #174556;
  background: #fff1a0;
  box-shadow: inset 0 2px white, 0 2px rgb(87 77 5 / 25%);
}

.tilt-button.is-error { border-color: #ffb2bd; color: #fff0f2; background: #a62d4b; }
.tilt-button:active { transform: translateY(2px); }

.reset-button {
  display: grid;
  place-items: center;
  min-height: 29px;
  padding: clamp(4px, 1.5vw, 6px) clamp(6px, 2.4vw, 10px);
  border: 2px solid #00627b;
  border-radius: 7px;
  color: #00627b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  background: #62e3e3;
  box-shadow: 0 3px #00627b;
}

/* One tap arms reset instead of firing it immediately (see handleResetClick)
   — a thumb resting near it during frantic jet-pumping shouldn't be able to
   wipe a run by accident. This overrides every theme's own reset-button
   color via specificity, so "armed" reads as an unmistakable warning state
   regardless of skin. */
.toy-footer .reset-button.is-armed {
  border-color: #7a1f0e;
  color: #fff6ea;
  background: #e8532f;
  box-shadow: 0 3px #7a1f0e;
  animation: reset-armed-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes reset-armed-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.instructions {
  margin: 24px 0 0;
  color: #6d563c;
  font: 700 clamp(11px, 2.4vw, 14px) / 1.4 "Courier New", monospace;
  text-align: center;
}

.credits {
  margin: 8px 0 0;
  color: #a6875f;
  font: 700 clamp(9px, 2vw, 11px) / 1.4 "Courier New", monospace;
  text-align: center;
}

.credits a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.soundtrack {
  /* Audio only — the player's own control panel is not shown. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* --------------------------------------------------------------------------
   SWITCHABLE CONSOLE SKINS
   Sunburst follows the bright yellow 1980s toy direction; Clearwave uses the
   translucent aqua / navy electronics direction. Layout and controls remain
   identical so changing the shell never changes the game or thumb positions.
   -------------------------------------------------------------------------- */

body[data-theme="sunburst"] {
  --cyan: #f8bd18;
  --cyan-deep: #d78300;
  --cyan-light: #ffe85e;
  --ink: #10496b;
  background:
    radial-gradient(circle at 50% 18%, rgb(255 255 255 / 82%) 0 7%, transparent 29%),
    repeating-conic-gradient(from -8deg at 50% 44%, rgb(249 180 30 / 8%) 0 7deg, transparent 7deg 15deg),
    #fff5d2;
}

body[data-theme="sunburst"] .toy {
  border-color: #e3a100;
  background:
    linear-gradient(90deg, transparent 0 3%, rgb(255 255 255 / 34%) 6%, transparent 13% 88%, rgb(177 104 0 / 13%) 96%),
    linear-gradient(155deg, #fff277, #ffd629 20%, #ffc51e 76%, #e9a408);
  box-shadow:
    inset 0 8px 3px rgb(255 255 255 / 56%),
    inset 0 -13px 8px rgb(164 92 0 / 24%),
    0 13px 0 #bd7800,
    0 24px 38px rgb(91 57 28 / 30%);
}

body[data-theme="sunburst"] .toy::before,
body[data-theme="sunburst"] .toy::after { background: rgb(176 101 0 / 18%); }
body[data-theme="sunburst"] .brand-block__eyebrow { color: #1486ae; text-shadow: none; }
body[data-theme="sunburst"] .brand-block h1 { color: #fffdf0; text-shadow: 1px 2px #ef4563, 3px 4px #1685b0; }
body[data-theme="sunburst"] .tank-bezel { border-color: #087a93; background: linear-gradient(145deg, #0088a2, #57edf0 50%, #00647f); }
body[data-theme="sunburst"] .control-labels { color: #a74c19; }
body[data-theme="sunburst"] .speaker span { background: #9d6800; box-shadow: inset 1px 2px 2px rgb(83 44 0 / 47%), 1px 1px rgb(255 245 151 / 58%); }
body[data-theme="sunburst"] .toy-footer { color: #946000; }
body[data-theme="sunburst"] .mode-menu-button,
body[data-theme="sunburst"] .sound-button { border-color: #0786a4; color: white; background: #09a8bf; box-shadow: 0 3px #08728c; }
body[data-theme="sunburst"] .tilt-button { border-color: #d78d00; color: #895500; background: #ffe274; }
body[data-theme="sunburst"] .tilt-button[aria-pressed="true"] { border-color: #087f9b; color: white; background: #08a9c2; box-shadow: inset 0 2px rgb(255 255 255 / 45%), 0 3px #08718a; }
body[data-theme="sunburst"] .reset-button { background: #a8eddf; }

body[data-theme="clearwave"] {
  --cyan: #5bc9dc;
  --cyan-deep: #083956;
  --cyan-light: #e1ffff;
  --ink: #dffcff;
  --display: #071923;
  background:
    radial-gradient(circle at 50% 28%, rgb(46 125 161 / 42%) 0 8%, transparent 46%),
    linear-gradient(160deg, #102f4a, #061a2e 58%, #020e1d);
}

body[data-theme="clearwave"] .toy {
  border-color: rgb(211 253 255 / 76%);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 18%), transparent 13% 84%, rgb(0 30 54 / 22%)),
    linear-gradient(155deg, rgb(199 250 255 / 72%), rgb(64 172 196 / 72%) 22%, rgb(18 94 126 / 82%) 74%, rgb(5 43 70 / 94%));
  box-shadow:
    inset 0 8px 5px rgb(255 255 255 / 72%),
    inset 0 0 0 7px rgb(146 229 241 / 20%),
    inset 0 -16px 14px rgb(0 28 53 / 42%),
    0 10px 0 #05243a,
    0 27px 48px rgb(0 4 13 / 58%);
  backdrop-filter: blur(12px) saturate(1.18);
}

body[data-theme="clearwave"] .toy::before,
body[data-theme="clearwave"] .toy::after { background: rgb(220 255 255 / 22%); }
body[data-theme="clearwave"] .toy__highlight { background: rgb(255 255 255 / 68%); }
body[data-theme="clearwave"] .brand-block__eyebrow { color: #d4faff; text-shadow: 0 1px #153e55; }
body[data-theme="clearwave"] .brand-block h1 { color: #f2fdff; text-shadow: 1px 2px #5fb2bf, 3px 4px #18374b; }
body[data-theme="clearwave"] .digital-readout { border-color: #315a6a; background: linear-gradient(rgb(255 255 255 / 7%), transparent 35%), #071923; box-shadow: inset 0 3px 10px rgb(0 0 0 / 72%), 0 2px rgb(227 255 255 / 72%); }
body[data-theme="clearwave"] .tank-bezel { border-color: rgb(214 255 255 / 74%); background: linear-gradient(145deg, rgb(225 255 255 / 82%), rgb(67 169 194 / 76%) 48%, rgb(4 56 89 / 94%)); box-shadow: inset 0 3px 6px white, 0 4px #0a3854; }
body[data-theme="clearwave"] .game-overlay__panel { color: #063b52; }
body[data-theme="clearwave"] .control-labels span:first-child { color: #ffadad; }
body[data-theme="clearwave"] .control-labels span:last-child { color: #a9c8ff; }
body[data-theme="clearwave"] .speaker span { background: #072b42; box-shadow: inset 1px 2px 2px black, 1px 1px rgb(187 246 255 / 38%); }
body[data-theme="clearwave"] .toy-footer { color: #d7f8ff; }
body[data-theme="clearwave"] .mode-menu-button,
body[data-theme="clearwave"] .sound-button { border-color: #afdeea; color: #e6fbff; background: rgb(5 32 50 / 46%); }
body[data-theme="clearwave"] .tilt-button { border-color: #7ea9b7; color: #dff8ff; background: rgb(5 31 47 / 72%); }
body[data-theme="clearwave"] .tilt-button[aria-pressed="true"] { border-color: #ffd66b; color: #122f3d; background: #ffd66b; }
body[data-theme="clearwave"] .reset-button { border-color: #173d54; color: #143a51; background: #c7dce0; box-shadow: 0 3px #173d54; }

@media (max-width: 570px) {
  body { min-height: 100svh; overflow: hidden; }

  .page-shell { align-content: center; min-height: 100svh; padding: 7px; }

  .toy {
    padding: 12px 11px 16px;
    border-width: 3px;
    border-radius: 34px 34px 48px 48px;
    box-shadow: inset 0 5px 3px rgb(255 255 255 / 45%), inset 0 -9px 6px rgb(0 79 111 / 25%), 0 8px #005d78, 0 14px 24px rgb(91 57 28 / 25%);
  }

  .scoreboard { gap: 8px; margin: 4px 4px 8px; }
  .digital-readout { gap: 7px; padding: 6px 8px; border-width: 3px; border-radius: 10px; }
  .tank-bezel { padding: 6px; border-width: 3px; border-radius: 23px; }
  .tank { border-width: 3px; border-radius: 17px; }
  .game-overlay { padding: 14px; }
  .game-overlay__panel { padding: 19px 14px; border-radius: 22px; }
  .game-overlay p { margin-bottom: 15px; }
  .mode-buttons { gap: 7px; }
  .mode-button { padding: 10px 6px 9px; border-width: 2px; }
  .mode-button strong { font-size: 13px; }
  .mode-button small { font-size: 8px; }
  .overlay-actions { gap: 8px; }
  .overlay-button { padding: 11px 18px 9px; font-size: 12px; }
  .share-card-button { padding: 10px 16px 8px; font-size: 11px; }
  .overlay-menu-button { padding: 9px 12px; font-size: 10px; }
  .control-deck { --row-cols: 1fr 42px 1fr; --row-gap: 9px; }
  .speaker { grid-template-columns: repeat(3, 7px); gap: 5px; }
  .speaker span { width: 7px; height: 7px; }

  .jet-button {
    min-height: 62px;
    border-width: 3px;
    border-radius: 18px 18px 23px 23px;
    box-shadow: inset 0 5px 2px rgb(255 255 255 / 24%), inset 0 -5px 4px rgb(132 13 54 / 19%), 0 6px #9e1c40, 0 9px 8px rgb(0 79 108 / 30%);
  }

  .jet-button:active,
  .jet-button.is-pressed { transform: translateY(5px) scaleY(.97); }
  .player-station { gap: 7px; }
  .control-labels { padding-top: 6px; }
  .toy-footer { padding-top: 9px; }
  .sound-button { padding-inline: 4px; }
  .tilt-button { padding-inline: 6px; font-size: 7px; }
  .theme-switcher { gap: 2px; padding: 2px; }
  .theme-switcher__button { min-width: 37px; padding: 4px 5px 3px; font-size: 7px; }
  .instructions { display: none; }
}

@media (max-width: 570px) and (max-height: 700px) {
  .toy { width: min(calc(100vw - 12px), 430px); padding-block: 9px 13px; }
  .scoreboard { margin-bottom: 5px; }
  .game-overlay { padding: 7px; }
  .game-overlay__panel { padding: 12px 10px; border-width: 3px; }
  .game-overlay h2 { font-size: 28px; }
  .game-overlay p { margin-bottom: 8px; font-size: 11px; line-height: 1.25; }
  .mode-button { padding-block: 7px 6px; }
  .control-labels { padding-top: 4px; }
  .jet-button { min-height: 55px; }
  .toy-footer { padding-top: 6px; }
}

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

/* --------------------------------------------------------------------------
   PHYSICAL CONSOLE PASS
   Keep the cabinet handheld-sized even on a desktop. The layered seams,
   hardware, hard plastic edges and separate control deck make it read as a
   manufactured water toy instead of a responsive dashboard.
   -------------------------------------------------------------------------- */

.page-shell { padding: 12px 10px 10px; }

.toy {
  width: min(470px, calc(100vw - 20px), calc((100svh - 70px) * .66));
  padding: 18px 18px 22px;
  border-width: 3px;
  border-radius: 45px 45px 61px 61px;
}

.toy::before,
.toy::after {
  z-index: 0;
  inset: 7px;
  width: auto;
  height: auto;
  pointer-events: none;
  border: 2px solid rgb(255 255 255 / 35%);
  border-radius: 36px 36px 52px 52px;
  background: transparent;
  box-shadow: 0 1px rgb(113 66 0 / 18%);
}

.toy::after {
  inset: 13px;
  border-width: 1px;
  border-color: rgb(116 65 0 / 18%);
  border-radius: 31px 31px 47px 47px;
  box-shadow: none;
}

.toy > :not(.toy__highlight, .case-hardware) { position: relative; z-index: 1; }

.toy__highlight {
  z-index: 2;
  top: 10px;
  left: 15%;
  width: 34%;
  height: 4px;
}

.case-hardware {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.case-hardware i {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgb(91 58 0 / 38%);
  border-radius: 50%;
  background: #f4bd1e;
  box-shadow: inset 1px 1px 1px rgb(255 255 255 / 72%), 0 1px 1px rgb(97 55 0 / 35%);
}

.case-hardware i::after {
  position: absolute;
  top: 3px;
  left: 1px;
  width: 5px;
  height: 1px;
  background: rgb(84 59 11 / 52%);
  content: "";
  transform: rotate(-24deg);
}

.case-hardware i:nth-child(1) { top: 22px; left: 18px; }
.case-hardware i:nth-child(2) { top: 22px; right: 18px; }
.case-hardware i:nth-child(3) { bottom: 21px; left: 21px; }
.case-hardware i:nth-child(4) { right: 21px; bottom: 21px; }

.scoreboard {
  gap: 10px;
  margin: 2px 11px 13px;
}

.brand-block { flex: 1 1 42%; min-width: 0; }

.brand-block__eyebrow {
  font-size: clamp(7px, 1.8vw, 10px);
  letter-spacing: .16em;
}

.brand-block h1 { font-size: clamp(22px, 6.5vw, 29px); }

.digital-readout {
  min-width: 54%;
  gap: 6px;
  padding: 7px 7px 8px;
  border-width: 3px;
  border-radius: 12px;
}

.digital-readout__label { font-size: clamp(7px, 1.7vw, 9px); letter-spacing: .11em; }
.digital-readout__value,

.tank-bezel {
  padding: 8px;
  border-width: 3px;
  border-radius: 28px;
}

.tank {
  border-width: 4px;
  border-radius: 20px;
  box-shadow:
    inset 0 0 28px rgb(0 69 105 / 35%),
    inset 0 0 0 2px rgb(22 106 130 / 42%),
    0 2px #00536b;
}

.tank__rim { border-radius: 15px; }

.control-deck {
  position: relative;
  margin-top: 4px;
  padding: 0 3px 3px;
  border-radius: 0 0 34px 34px;
}

.control-labels {
  padding: 9px 6% 4px;
  font-size: 9px;
  letter-spacing: .15em;
}

.control-deck {
  --row-cols: minmax(110px, 1fr) 45px minmax(110px, 1fr);
  --row-gap: 10px;
}

.controls {
  padding: 3px 5% 5px;
}

.jet-button {
  min-height: 78px;
  border-width: 4px;
  border-radius: 23px 23px 29px 29px;
  font-size: 23px;
  box-shadow:
    inset 0 5px 0 rgb(255 255 255 / 32%),
    inset 0 0 0 2px rgb(255 255 255 / 13%),
    inset 0 -7px 4px rgb(116 8 43 / 23%),
    0 7px #941636,
    0 10px 10px rgb(75 45 4 / 28%);
}

.jet-button__shine { top: 8px; left: 13%; width: 48%; height: 6px; opacity: .82; }
.jet-button small { margin-top: 8px; font-size: 9px; }

.speaker {
  grid-template-columns: repeat(3, 7px);
  gap: 6px;
}

.speaker span { width: 7px; height: 7px; }

.toy-footer { padding: 11px 4% 0; }

.mode-menu-button,
.reset-button,
.sound-button,
.tilt-button {
  min-height: 29px;
  padding-inline: 9px;
  border-radius: 8px;
}

.theme-switcher {
  gap: 1px;
  padding: 2px;
  border-radius: 7px;
}

.theme-switcher__button {
  min-width: 37px;
  padding: 4px 5px;
  border-radius: 5px;
  font-size: 7px;
}

/* Sunburst: opaque injection-moulded ABS with a warm lower lip. */
body[data-theme="sunburst"] .toy {
  border-color: #d38d00;
  background:
    linear-gradient(90deg, transparent 0 4%, rgb(255 255 255 / 25%) 7%, transparent 11% 88%, rgb(147 74 0 / 13%) 96%),
    linear-gradient(165deg, #ffe65a 0 8%, #ffd324 31%, #ffc41a 78%, #eca60b);
  box-shadow:
    inset 0 5px 2px rgb(255 255 255 / 67%),
    inset 0 -12px 7px rgb(149 76 0 / 23%),
    0 9px 0 #bd7700,
    0 18px 30px rgb(91 57 28 / 28%);
}

body[data-theme="sunburst"] .tank-bezel {
  border-color: #00718b;
  background: linear-gradient(150deg, #07bdd0, #7bfbf0 42%, #00819c 78%);
  box-shadow:
    inset 0 3px 2px rgb(255 255 255 / 62%),
    inset 0 -3px 3px rgb(0 63 87 / 35%),
    0 3px #b57a00;
}

body[data-theme="sunburst"] .digital-readout { border-color: #07596b; box-shadow: inset 0 4px 7px rgb(0 0 0 / 56%), 0 2px #ffec79; }
body[data-theme="sunburst"] .control-deck { background: rgb(255 213 46 / 10%); }

/* Clearwave: transparent shell over a deep blue internal control plate. */
body[data-theme="clearwave"] .toy {
  border-color: rgb(226 254 255 / 85%);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 7%) 0 1px, transparent 1px 34px),
    linear-gradient(100deg, rgb(235 255 255 / 55%), transparent 11% 82%, rgb(2 28 48 / 30%)),
    linear-gradient(164deg, rgb(116 218 231 / 55%), rgb(23 112 145 / 65%) 54%, rgb(4 48 76 / 91%));
  box-shadow:
    inset 0 5px 3px rgb(255 255 255 / 84%),
    inset 0 0 0 6px rgb(157 233 244 / 23%),
    inset 0 -13px 9px rgb(0 25 48 / 43%),
    0 8px 0 #041f34,
    0 23px 45px rgb(0 4 13 / 62%);
}

body[data-theme="clearwave"] .toy::before {
  border-color: rgb(228 255 255 / 58%);
  box-shadow: inset 0 0 0 1px rgb(9 71 96 / 34%), 0 1px rgb(0 20 36 / 45%);
}

body[data-theme="clearwave"] .toy::after { border-color: rgb(219 255 255 / 25%); }

body[data-theme="clearwave"] .case-hardware i {
  border-color: rgb(207 251 255 / 70%);
  background: rgb(61 132 156 / 67%);
  box-shadow: inset 1px 1px 1px rgb(255 255 255 / 72%), 0 1px 2px rgb(0 15 29 / 75%);
}

body[data-theme="clearwave"] .case-hardware i::after { background: rgb(215 250 255 / 64%); }

body[data-theme="clearwave"] .control-deck {
  margin-top: 7px;
  padding: 0 7px 10px;
  border: 1px solid rgb(202 249 255 / 24%);
  border-top-color: rgb(222 255 255 / 48%);
  background: linear-gradient(180deg, rgb(2 37 61 / 35%), rgb(1 25 44 / 56%));
  box-shadow: inset 0 2px rgb(255 255 255 / 8%), inset 0 -2px rgb(0 9 18 / 35%);
}

body[data-theme="clearwave"] .tank-bezel {
  border-color: rgb(226 255 255 / 81%);
  background: linear-gradient(145deg, rgb(231 255 255 / 86%), rgb(83 181 202 / 70%) 43%, rgb(5 55 86 / 95%));
  box-shadow: inset 0 3px 4px white, inset 0 -3px 5px rgb(0 26 47 / 52%), 0 3px #072e49;
}

body[data-theme="clearwave"] .speaker {
  padding: 13px 8px;
  border: 1px solid rgb(179 236 245 / 25%);
  border-radius: 22px;
  background: rgb(2 31 51 / 30%);
  box-shadow: inset 0 1px rgb(255 255 255 / 12%);
}

body[data-theme="clearwave"] .jet-button {
  border-color: #7f3449;
  background: linear-gradient(155deg, #ff948f, #df5264 62%, #bb304c);
}

body[data-theme="clearwave"] .theme-switcher { border-color: rgb(185 239 247 / 44%); border-radius: 7px; }

@media (max-width: 570px) {
  .page-shell { padding: 6px; }

  .toy {
    width: min(540px, calc(100vw - 12px), calc((100svh - 58px) * .66));
    padding: 13px 12px 17px;
    border-radius: 34px 34px 46px 46px;
  }

  .toy::before { inset: 5px; border-radius: 28px 28px 39px 39px; }
  .toy::after { inset: 10px; border-radius: 24px 24px 35px 35px; }
  .case-hardware i:nth-child(1), .case-hardware i:nth-child(2) { top: 15px; }
  .case-hardware i:nth-child(1), .case-hardware i:nth-child(3) { left: 12px; }
  .case-hardware i:nth-child(2), .case-hardware i:nth-child(4) { right: 12px; }
  .case-hardware i:nth-child(3), .case-hardware i:nth-child(4) { bottom: 15px; }
  .scoreboard { margin-inline: 6px; }
  .brand-block h1 { font-size: clamp(19px, 6.3vw, 24px); }
  .digital-readout { min-width: 55%; }
  .tank-bezel { padding: 6px; }
  .jet-button { min-height: 68px; font-size: clamp(17px, 5.5vw, 22px); }
  .control-deck { --row-cols: minmax(95px, 1fr) 38px minmax(95px, 1fr); --row-gap: 8px; }
  .speaker { grid-template-columns: repeat(3, 6px); gap: 5px; }
  .speaker span { width: 6px; height: 6px; }
  body[data-theme="clearwave"] .speaker { padding: 10px 6px; }
  .toy-footer { gap: 6px; padding-inline: 3%; }
  .mode-menu-button, .reset-button, .sound-button, .tilt-button { padding-inline: 7px; }
}

@media (max-width: 570px) and (max-height: 700px) {
  .toy { width: min(540px, calc(100vw - 10px)); padding: 9px 9px 13px; }
  .scoreboard { margin-bottom: 6px; }
  .brand-block h1 { font-size: 18px; }
  .brand-block__eyebrow { font-size: 6px; }
  .digital-readout { padding-block: 5px; }
  .tank-bezel { padding: 5px; }
  .control-labels { padding-top: 5px; }
  .jet-button { min-height: 54px; border-width: 3px; }
  .jet-button small { margin-top: 5px; }
  .toy-footer { padding-top: 6px; }
  body[data-theme="clearwave"] .control-deck { margin-top: 4px; padding-bottom: 6px; }
}

/* --------------------------------------------------------------------------
   FIVE-SKIN COLLECTION
   The picker stays collapsed during play and opens over the control deck, so
   adding skins never makes the handheld taller or pushes it below a phone.
   -------------------------------------------------------------------------- */

/* .theme-picker deliberately has no position/z-index: the popover below
   needs to anchor to .toy-footer (the nearest positioned ancestor once
   this stays static) so it centers on the full footer row instead of
   this narrow button's own grid column. */

.theme-picker__summary {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 29px;
  place-items: center;
  box-sizing: border-box;
  padding: clamp(2px, 1vw, 3px) clamp(4px, 2.2vw, 8px) clamp(1px, 0.8vw, 2px);
  border: 2px solid rgb(0 79 105 / 45%);
  border-radius: 8px;
  color: #664b00;
  cursor: pointer;
  line-height: 1;
  list-style: none;
  background: #ffe675;
  box-shadow: inset 0 2px rgb(255 255 255 / 55%), 0 3px rgb(111 69 0 / 28%);
  user-select: none;
}

.theme-picker__summary span { font-size: 6px; letter-spacing: .18em; opacity: .68; }
.theme-picker__summary strong { max-width: 76px; overflow: hidden; font-size: 8px; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.theme-picker.is-open .theme-picker__summary { transform: translateY(2px); box-shadow: inset 0 2px 4px rgb(80 43 0 / 18%), 0 1px rgb(111 69 0 / 25%); }
.theme-picker__summary:focus-visible { outline: 3px solid #fff6a8; outline-offset: 2px; }

.theme-switcher {
  position: absolute;
  z-index: 24;
  bottom: calc(100% + 9px);
  left: 50%;
  display: none;
  grid-template-columns: repeat(5, minmax(45px, 1fr));
  width: min(340px, calc(100vw - 40px));
  gap: 4px;
  padding: 7px;
  border: 3px solid #07455c;
  border-radius: 14px;
  background: #e9fbf5;
  box-shadow: 0 8px 24px rgb(0 29 48 / 38%), inset 0 2px white;
  transform: translateX(-50%);
}

.theme-picker.is-open .theme-switcher { display: grid; }

.theme-switcher::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-right: 3px solid #07455c;
  border-bottom: 3px solid #07455c;
  background: #e9fbf5;
  content: "";
  transform: translate(-50%, -7px) rotate(45deg);
}

.theme-switcher__button {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  min-height: 48px;
  place-items: center;
  gap: 3px;
  padding: 5px 3px 4px;
  border: 2px solid transparent;
  border-radius: 9px;
  color: #1a4050;
  font-size: 7px;
  line-height: 1.05;
  background: #d9eee9;
}

.theme-switcher__button i {
  display: block;
  width: 22px;
  height: 14px;
  border: 2px solid rgb(6 43 57 / 24%);
  border-radius: 5px;
  background: #f8bd18;
  box-shadow: inset 0 2px rgb(255 255 255 / 48%);
}

.theme-switcher__button[data-theme-option="clearwave"] i { background: #357c9a; }
.theme-switcher__button[data-theme-option="arcade"] i { background: #f44078; }
.theme-switcher__button[data-theme-option="deepsea"] i { background: #172f47; box-shadow: inset 0 0 0 4px #f17a20; }
.theme-switcher__button[data-theme-option="spacelab"] i { background: #eee9d9; box-shadow: inset 0 0 0 4px #163b61; }

.theme-switcher__button.is-active {
  border-color: #f14f70;
  color: #0a3446;
  background: white;
  box-shadow: inset 0 2px white, 0 3px 6px rgb(0 39 61 / 18%);
}

/* Bubblegum Arcade: glossy pink plastic, aqua glass frame and party-speckled deck. */
body[data-theme="arcade"] {
  --cyan: #f44078;
  --cyan-deep: #a51f51;
  --cyan-light: #ff88ad;
  --ink: #073c55;
  --display: #101d25;
  background:
    radial-gradient(circle at 50% 12%, rgb(255 255 255 / 92%) 0 8%, transparent 34%),
    repeating-linear-gradient(118deg, transparent 0 42px, rgb(49 191 191 / 8%) 42px 45px),
    #fff7e9;
}

body[data-theme="arcade"] .toy {
  border-color: #ae1f52;
  border-radius: 48px 48px 58px 58px;
  background:
    radial-gradient(circle at 14% 12%, #ffe878 0 2px, transparent 3px),
    radial-gradient(circle at 86% 19%, #52d7cf 0 2px, transparent 3px),
    radial-gradient(circle at 9% 77%, #fff08b 0 2px, transparent 3px),
    radial-gradient(circle at 91% 68%, #5ddad4 0 2px, transparent 3px),
    linear-gradient(98deg, rgb(255 255 255 / 28%), transparent 13% 87%, rgb(122 5 48 / 18%)),
    linear-gradient(164deg, #ff6c9b, #f63f77 58%, #d62461);
  box-shadow:
    inset 0 6px 2px rgb(255 255 255 / 70%),
    inset 0 -13px 7px rgb(133 9 55 / 25%),
    0 9px 0 #9e194a,
    0 20px 35px rgb(105 34 54 / 32%);
}

body[data-theme="arcade"] .toy::before { border-color: rgb(255 220 234 / 74%); box-shadow: 0 1px rgb(117 8 47 / 34%); }
body[data-theme="arcade"] .toy::after { border-color: rgb(131 9 51 / 23%); }
body[data-theme="arcade"] .case-hardware i { border-color: #351c29; background: #eee1c8; }
body[data-theme="arcade"] .case-hardware i::after { background: #3a2630; }

body[data-theme="arcade"] .brand-block {
  padding: 8px 9px 7px;
  border: 2px solid #ea8a42;
  border-radius: 12px;
  background:
    radial-gradient(circle at 17% 25%, #f44f72 0 2px, transparent 3px),
    radial-gradient(circle at 82% 70%, #20aabd 0 2px, transparent 3px),
    #ffd861;
  box-shadow: inset 0 2px #fff6b0, 0 3px #bd2f62;
  transform: rotate(-1deg);
}

body[data-theme="arcade"] .brand-block__eyebrow { color: #805017; text-shadow: none; }
body[data-theme="arcade"] .brand-block h1 { color: #fffbed; font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; text-shadow: 2px 2px #ed4e70, 4px 4px #1a93b1; }
body[data-theme="arcade"] .digital-readout { border-color: #6a173b; border-radius: 18px; background: #101d25; box-shadow: inset 0 4px 9px black, 0 3px #ff94b5; }
body[data-theme="arcade"] .tank-bezel { border-color: #087f8b; border-radius: 31px; background: linear-gradient(145deg, #83fff0, #21c7c8 45%, #087c91); box-shadow: inset 0 4px 3px white, inset 0 -4px rgb(0 72 87 / 36%), 0 4px #9b1947; }
body[data-theme="arcade"] .control-deck { margin-top: 7px; padding: 4px 8px 9px; border: 3px solid #7e2c88; border-radius: 19px 19px 32px 32px; background: radial-gradient(circle at 12% 24%, #ffd95f 0 2px, transparent 3px), radial-gradient(circle at 79% 58%, #58dfd2 0 2px, transparent 3px), #7a4ba1; box-shadow: inset 0 3px #a978c4, 0 4px #971d50; }
body[data-theme="arcade"] .control-labels span { padding: 2px 6px 1px; border-radius: 999px; color: white; box-shadow: inset 0 2px rgb(255 255 255 / 26%), 0 2px rgb(43 17 61 / 30%); }
body[data-theme="arcade"] .control-labels span:first-child { background: #e94a63; }
body[data-theme="arcade"] .control-labels span:last-child { background: #316bc1; }
body[data-theme="arcade"] .speaker span { background: #22182e; box-shadow: inset 1px 2px black, 1px 1px rgb(255 221 255 / 30%); }
body[data-theme="arcade"] .jet-button { border-color: #9e1e45; border-radius: 26px 26px 33px 33px; background: linear-gradient(150deg, #ff8f98, #f45066 62%, #ca294d); }
body[data-theme="arcade"] .toy-footer { color: #fff5c9; }
body[data-theme="arcade"] .mode-menu-button,
body[data-theme="arcade"] .sound-button { border-color: #085f6d; color: white; background: #14b8b7; box-shadow: 0 3px #08606c; }
body[data-theme="arcade"] .reset-button { border-color: #085f6d; color: white; background: #14b8b7; box-shadow: 0 3px #08606c; }
body[data-theme="arcade"] .tilt-button { border-color: #ebc048; color: #4e2d69; background: #ffe274; }
body[data-theme="arcade"] .theme-picker__summary { border-color: #781d65; color: #4e2d69; background: #ffdd61; }

/* Deep Sea: rugged navy instrument housing with an orange pressure-tank rim. */
body[data-theme="deepsea"] {
  --cyan: #172f47;
  --cyan-deep: #071724;
  --cyan-light: #34516d;
  --ink: #f4d399;
  --display: #07131b;
  background:
    repeating-linear-gradient(12deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 8px),
    linear-gradient(155deg, #17334f, #071827 64%, #030c14);
}

body[data-theme="deepsea"] .toy {
  border-color: #07131d;
  border-radius: 29px 29px 46px 46px;
  background:
    repeating-linear-gradient(93deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 13px),
    linear-gradient(98deg, #26445e, #172f47 15% 84%, #0b1d2d),
    #172f47;
  box-shadow:
    inset 0 5px 2px rgb(124 159 183 / 45%),
    inset 0 0 0 8px rgb(5 19 30 / 18%),
    inset 0 -14px 8px rgb(0 7 13 / 48%),
    0 9px 0 #030a10,
    0 23px 48px rgb(0 4 9 / 68%);
}

body[data-theme="deepsea"] .toy::before { inset: 8px; border-color: #486277; border-radius: 22px 22px 37px 37px; box-shadow: inset 0 0 0 2px #091b29; }
body[data-theme="deepsea"] .toy::after { inset: 14px; border-color: #0a1e2e; border-radius: 18px 18px 32px 32px; }
body[data-theme="deepsea"] .case-hardware i { width: 10px; height: 10px; border-color: #02070b; background: #bd9d73; box-shadow: inset 2px 2px #f2d4a4, 0 2px 2px black; }
body[data-theme="deepsea"] .case-hardware i::after { top: 4px; left: 1px; width: 7px; background: #31271e; }

body[data-theme="deepsea"] .scoreboard { align-items: stretch; }
body[data-theme="deepsea"] .brand-block { padding: 8px 9px; border: 2px solid #07141f; border-radius: 7px; background: #1b3850; box-shadow: inset 0 2px #36536b, 0 3px #08131d; }
body[data-theme="deepsea"] .brand-block__eyebrow { color: #efbc72; text-shadow: 0 1px #06101a; }
body[data-theme="deepsea"] .brand-block h1 { color: #f5dfb8; font-size: clamp(17px, 5.2vw, 23px); letter-spacing: -.07em; text-shadow: 2px 3px #09131a; white-space: nowrap; }
body[data-theme="deepsea"] .digital-readout { border-color: #09151d; border-radius: 8px; background: #07131b; box-shadow: inset 0 4px 10px black, 0 2px #36536b; }
body[data-theme="deepsea"] .tank-bezel { position: relative; padding: 15px; border: 4px solid #9d480c; border-radius: 24px; background: linear-gradient(145deg, #ff9a3e, #f57718 52%, #bb4d0e); box-shadow: inset 0 4px 2px #ffc079, inset 0 -4px 4px #813106, 0 4px #06121b; }
body[data-theme="deepsea"] .tank-bezel::before,
body[data-theme="deepsea"] .tank-bezel::after { position: absolute; z-index: 3; top: 26%; color: #272112; font: 900 6px/2.75 "Courier New", monospace; white-space: pre; pointer-events: none; text-shadow: 0 1px rgb(255 193 111 / 52%); }
body[data-theme="deepsea"] .tank-bezel::before { left: 3px; content: "10—\A 20—\A 30—\A 40—"; }
body[data-theme="deepsea"] .tank-bezel::after { right: 3px; content: "—\A —\A —\A —"; }
body[data-theme="deepsea"] .tank { border-color: #a9bbc0; border-radius: 15px; box-shadow: inset 0 0 30px rgb(0 47 79 / 48%), inset 0 0 0 3px #244456, 0 0 0 3px #342518; }
body[data-theme="deepsea"] .control-deck { margin-top: 8px; padding: 3px 9px 10px; border: 2px solid #07141e; border-radius: 8px 8px 31px 31px; background: #152d43; box-shadow: inset 0 2px #365169, 0 3px #07131d; }
body[data-theme="deepsea"] .control-labels span:first-child { color: #ff846d; }
body[data-theme="deepsea"] .control-labels span:last-child { color: #8daaff; }
body[data-theme="deepsea"] .jet-button { margin: 7px; min-height: 72px; border-color: #301815; border-radius: 11px 11px 26px 26px; background: linear-gradient(150deg, #ff876f, #d95545 65%, #97372f); box-shadow: inset 0 5px #ffab90, inset 0 -6px #8b2f2c, 0 0 0 7px #172027, 0 8px 0 7px #070b0e, 0 14px 12px rgb(0 0 0 / 42%); }
body[data-theme="deepsea"] .speaker { position: relative; display: grid; width: 46px; aspect-ratio: 1; place-self: center; justify-items: center; align-items: end; padding: 0 0 6px; border: 3px solid #b79362; border-radius: 50%; color: #f5d282; background: #203c52; box-shadow: inset 0 0 0 4px #0b1b28, 0 2px #050b10; transform: none; }
body[data-theme="deepsea"] .speaker span { display: none; }
/* A single short word instead of a two-line "PRESSURE / OK" caption — at
   this size (and shrinking further on phones below), two lines of ~5px
   text never rendered reliably across devices. One word at a readable size
   is both simpler to keep centered and easier to actually read. */
body[data-theme="deepsea"] .speaker::before { content: "OK"; font: 900 9px/1 "Courier New", monospace; letter-spacing: .05em; }
/* Pivots from the gauge's true center so the needle points up into the
   empty half instead of cutting across the "PRESSURE OK" caption below it. */
body[data-theme="deepsea"] .speaker::after { position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; background: #ed7d37; content: ""; transform: rotate(-32deg); transform-origin: left center; }
body[data-theme="deepsea"] .toy-footer { color: #e8c99a; }
body[data-theme="deepsea"] .mode-menu-button, body[data-theme="deepsea"] .reset-button, body[data-theme="deepsea"] .sound-button, body[data-theme="deepsea"] .tilt-button { border-color: #050b10; color: #f0d3a2; background: #173a45; box-shadow: inset 0 2px #31545c, 0 3px #03080c; }
body[data-theme="deepsea"] .theme-picker__summary { border-color: #c66a25; color: #efc98f; background: #182d3c; box-shadow: inset 0 2px #385061, 0 3px #040a0e; }

/* Space Lab: warm ivory electronics, navy instrument deck and circular pumps. */
body[data-theme="spacelab"] {
  --cyan: #eee9d9;
  --cyan-deep: #aaa696;
  --cyan-light: #fffdf3;
  --ink: #17385d;
  --display: #0b1118;
  background:
    radial-gradient(circle at 50% 15%, white 0 7%, transparent 38%),
    repeating-linear-gradient(0deg, rgb(26 58 89 / 3%) 0 1px, transparent 1px 9px),
    #e9e8e4;
}

body[data-theme="spacelab"] .toy {
  border-color: #aaa697;
  border-radius: 35px 35px 45px 45px;
  background:
    linear-gradient(95deg, rgb(255 255 255 / 67%), transparent 15% 85%, rgb(103 97 79 / 13%)),
    linear-gradient(165deg, #fffdf3, #eee9d9 66%, #d1ccbc);
  box-shadow:
    inset 0 6px 3px white,
    inset 0 0 0 7px rgb(123 117 97 / 8%),
    inset 0 -13px 8px rgb(96 91 76 / 17%),
    0 8px 0 #959080,
    0 23px 40px rgb(30 38 43 / 38%);
}

body[data-theme="spacelab"] .toy::before { border-color: white; border-radius: 27px 27px 37px 37px; box-shadow: 0 1px #96907d; }
body[data-theme="spacelab"] .toy::after { border-color: rgb(103 96 75 / 26%); border-radius: 22px 22px 33px 33px; }
body[data-theme="spacelab"] .case-hardware i { border-color: #403e38; background: #dfd9c7; box-shadow: inset 1px 1px white, 0 1px 2px #6f6a5c; }
body[data-theme="spacelab"] .case-hardware i::after { background: #4b4943; }

body[data-theme="spacelab"] .brand-block { position: relative; padding: 7px 7px 7px 31px; border-left: 0; background: linear-gradient(135deg, #4288b5 0 8px, transparent 8px 12px, #e85b4f 12px 20px, transparent 20px); }
body[data-theme="spacelab"] .brand-block__eyebrow { color: #243652; text-shadow: none; }
body[data-theme="spacelab"] .brand-block h1 { color: #1f4770; font-size: clamp(17px, 5vw, 22px); letter-spacing: -.05em; text-shadow: 1px 2px #d4cfc0; transform: none; white-space: nowrap; }
body[data-theme="spacelab"] .digital-readout { border-color: #57564f; border-radius: 10px; background: #0b1118; box-shadow: inset 0 4px 10px black, 0 2px white; }
body[data-theme="spacelab"] .tank-bezel { padding: 9px; border: 3px solid #c3bdac; border-radius: 27px; background: linear-gradient(145deg, #fffdf2, #d8d3c5 58%, #9d998c); box-shadow: inset 0 4px 3px white, inset 0 -3px #827e70, 0 0 0 3px #235a7f; }
body[data-theme="spacelab"] .tank { border-color: #b9f5f6; border-radius: 16px; box-shadow: inset 0 0 28px rgb(0 72 107 / 32%), inset 0 0 0 3px #2d7395, 0 2px #143e5a; }
/* Cream, like the rest of the shell — a dark navy panel here read as a
   second, Deep-Sea-colored console bolted onto a Space Lab body. */
body[data-theme="spacelab"] .control-deck { margin-top: 9px; padding: 5px 9px 10px; border: 3px solid #aaa697; border-radius: 22px; background: linear-gradient(160deg, #fffdf3, #eee9d9 55%, #d1ccbc); box-shadow: inset 0 3px white, inset 0 -2px #9d998c, 0 4px #9d998c; }
body[data-theme="spacelab"] .control-labels span:first-child { color: #c1402c; }
body[data-theme="spacelab"] .control-labels span:last-child { color: #2f5fc0; }
body[data-theme="spacelab"] .control-deck { --row-cols: minmax(110px, 1fr) 48px minmax(110px, 1fr); }
body[data-theme="spacelab"] .jet-button { justify-self: center; width: 112px; min-height: 112px; border-color: #5b171b; border-radius: 50%; background: radial-gradient(circle at 36% 24%, #ff9b8e, #d8463f 55%, #9c2b2d); box-shadow: inset 0 8px 3px rgb(255 255 255 / 28%), inset 0 -8px 5px rgb(82 9 15 / 32%), 0 7px #52171b, 0 12px 14px rgb(0 0 0 / 50%); }
body[data-theme="spacelab"] .speaker { padding: 12px 8px; border: 1px solid #566878; border-radius: 50%; background: #050d15; }
body[data-theme="spacelab"] .speaker span { border-radius: 2px; background: #020609; box-shadow: 0 1px #52687b; }
body[data-theme="spacelab"] .toy-footer { color: #2f2b22; }
/* Brushed-aluminum switches instead of a dark navy pill — navy is Deep
   Sea's whole palette, so reusing it here (even lightened) kept reading as
   the same theme. This leans into Space Lab's own "vintage instrument
   panel" identity instead of borrowing another skin's color language. */
body[data-theme="spacelab"] .mode-menu-button, body[data-theme="spacelab"] .sound-button, body[data-theme="spacelab"] .tilt-button { border-color: #8f8875; color: #2f2b22; background: linear-gradient(160deg, #e6e1d2, #b8b19d); box-shadow: inset 0 2px rgb(255 255 255 / 65%), 0 3px #8a836f; }
/* Reset and skin get their own pop of color, pulled from the tank's sky-cyan
   accent and the brand stripe's coral — distinct from both the aluminum
   switches and from Deep Sea's dark teal/gold accent pair. */
body[data-theme="spacelab"] .reset-button { border-color: #14506f; color: #fffdf3; background: #2f8fc7; box-shadow: inset 0 2px #7fcdf2, 0 3px #14506f; }
body[data-theme="spacelab"] .theme-picker__summary { border-color: #7a2a20; color: #fffdf3; background: #e85b4f; box-shadow: inset 0 2px #f08277, 0 3px #9c2b21; }

body[data-theme="clearwave"] .theme-picker__summary { border-color: #9bdce8; color: #ddfbff; background: #12354c; box-shadow: inset 0 2px #39637a, 0 3px #041826; }

@media (max-width: 570px) {
  .theme-picker__summary { min-width: 62px; min-height: 26px; padding-inline: 6px; }
  .theme-picker__summary strong { max-width: 64px; font-size: 7px; }
  .theme-switcher { width: min(326px, calc(100vw - 34px)); gap: 3px; padding: 6px; }
  .theme-switcher__button { min-height: 44px; font-size: 6px; }

  body[data-theme="arcade"] .brand-block { padding: 6px 7px 5px; }
  body[data-theme="arcade"] .control-deck,
  body[data-theme="deepsea"] .control-deck,
  body[data-theme="spacelab"] .control-deck { margin-top: 5px; padding: 2px 5px 7px; }
  body[data-theme="deepsea"] .tank-bezel { padding: 11px; border-width: 3px; }
  /* The gauge was a fixed 46px regardless of breakpoint, but this row's
     middle column shrinks to 42px here — it was overflowing its own column
     on every phone size, which is what actually read as "misaligned". */
  body[data-theme="deepsea"] .speaker { width: 38px; padding-bottom: 5px; }
  body[data-theme="deepsea"] .speaker::before { font-size: 7px; }
  body[data-theme="deepsea"] .speaker::after { width: 11px; }
  body[data-theme="deepsea"] .jet-button { margin: 5px; min-height: 62px; box-shadow: inset 0 4px #ffab90, inset 0 -5px #8b2f2c, 0 0 0 5px #172027, 0 6px 0 5px #070b0e, 0 10px 8px rgb(0 0 0 / 38%); }
  body[data-theme="spacelab"] .brand-block { padding: 5px 4px 5px 24px; background-size: 24px 100%; background-repeat: no-repeat; }
  body[data-theme="spacelab"] .control-deck { --row-cols: minmax(90px, 1fr) 36px minmax(90px, 1fr); }
  body[data-theme="spacelab"] .jet-button { width: 88px; min-height: 88px; font-size: 19px; }
  body[data-theme="spacelab"] .speaker { padding: 8px 5px; }
}

@media (max-width: 570px) and (max-height: 700px) {
  .theme-picker__summary { min-height: 24px; }
  .theme-switcher { bottom: calc(100% + 7px); }
  body[data-theme="arcade"] .control-deck,
  body[data-theme="deepsea"] .control-deck,
  body[data-theme="spacelab"] .control-deck { margin-top: 3px; padding-bottom: 5px; }
  body[data-theme="deepsea"] .jet-button { margin: 3px; min-height: 49px; }
  body[data-theme="spacelab"] .jet-button { width: 65px; min-height: 65px; font-size: 16px; }
}

/* Tall phones get the long water window and substantial pump deck shown in
   the concept art, while the short-phone rules above keep every control in view. */
@media (max-width: 570px) and (min-height: 701px) {
  .tank { aspect-ratio: 620 / 650; }
  .control-labels { padding-top: 9px; }
  .jet-button { min-height: 78px; }
  .toy-footer { padding-top: 12px; }

  body[data-theme="arcade"] .jet-button,
  body[data-theme="deepsea"] .jet-button { min-height: 78px; }

  body[data-theme="spacelab"] .jet-button {
    width: 94px;
    min-height: 94px;
  }
}

/* Keep the mode card sized from the tank—not the browser window. The cabinet
   is height-constrained on desktop, so viewport-based type and padding could
   make this one panel taller than the water window and clip its buttons. */
.game-overlay {
  padding: 10px;
}

.game-overlay__panel {
  display: flex;
  width: min(380px, 96%);
  max-height: calc(100% - 12px);
  flex-direction: column;
  /* "safe" falls back to start-alignment instead of centering once content
     is taller than the panel — plain "center" would center-overflow the
     box, pushing content (like the copy-link button) out past the rounded
     border with no way to scroll up and reach the part that got hidden. */
  justify-content: safe center;
  overflow-y: auto;
  padding: clamp(14px, 3vw, 24px);
}

.game-overlay.is-mode-menu h2 {
  font-size: clamp(28px, 7vw, 42px);
  white-space: nowrap;
}

.game-overlay.is-mode-menu p {
  margin-bottom: 14px;
  font-size: clamp(12px, 2.2vw, 15px);
  line-height: 1.32;
}

.game-overlay.is-mode-menu .mode-buttons {
  flex: 0 0 auto;
}

@media (max-width: 570px) {
  .game-overlay { padding: 7px; }
  .game-overlay__panel { width: min(360px, 98%); max-height: calc(100% - 8px); padding: 14px 12px; }
  .game-overlay.is-mode-menu h2 { font-size: clamp(27px, 8vw, 34px); }
  .game-overlay.is-mode-menu p { margin-bottom: 10px; font-size: 12px; }
}