/* Rocket Teddy — cabinet styling.
   Palette: ink, plum panel, hot pink, mint, cream, amber. */

:root {
  --ink:    #14101f;
  --plum:   #241a33;
  --plum-2: #2f2144;
  --pink:   #ff3d7f;
  --mint:   #38e8b0;
  --cream:  #ffe9c9;
  --amber:  #ffb23f;
  --ui: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
}

body {
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px);
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.stage {
  width: min(1040px, 100%);
  padding: 24px 16px 64px;
}

.marquee { margin: 0 0 20px; }

.marquee h1 {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pink);
  text-shadow: 3px 3px 0 var(--plum-2), 6px 6px 0 rgba(0,0,0,.55);
}

.marquee__sub {
  margin: 4px 0 0;
  max-width: 52ch;
  color: #cbbcd8;
}

.cabinet {
  position: relative;
  background: var(--plum);
  border: 3px solid var(--pink);
  padding: 14px;
  display: flex;
  justify-content: center;
}

#screen {
  display: block;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 320 / 224;
  height: auto;
  image-rendering: pixelated;
  background: #000;
  touch-action: none;
}

/* Overlay panels sit on top of the screen */
.panel {
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 31, .93);
}

.panel.is-hidden { display: none; }

.panel__inner {
  width: min(420px, 92%);
  max-height: 100%;
  overflow-y: auto;
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 1.35rem;
  color: var(--mint);
}

.field { margin-bottom: 12px; }

.field label {
  display: block;
  font-size: .85rem;
  color: #cbbcd8;
  margin-bottom: 4px;
}

input, select {
  width: 100%;
  padding: 9px 10px;
  background: var(--plum-2);
  color: var(--cream);
  border: 2px solid #4a3866;
  border-radius: 6px;
  font: inherit;
}

input:focus-visible, select:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.row { display: flex; gap: 8px; margin-top: 10px; }
.row--join #joinCode { flex: 0 0 96px; text-transform: uppercase; letter-spacing: .18em; }

.btn {
  flex: 1;
  padding: 11px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--plum-2);
  color: var(--cream);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover { background: #3b2a55; }
.btn--go { background: var(--pink); color: #23101a; }
.btn--go:hover { background: #ff5f95; }
.btn--quiet { flex: 0 0 96px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.rule { border: 0; border-top: 2px dashed #4a3866; margin: 18px 0; }

.msg { min-height: 1.4em; margin: 10px 0 0; color: var(--amber); font-size: .9rem; }
.hint { color: #cbbcd8; font-size: .85rem; margin: 0 0 10px; }

.players { list-style: none; margin: 0 0 6px; padding: 0; }

.players li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-left: 4px solid var(--slot, var(--mint));
  background: var(--plum-2);
  margin-bottom: 6px;
}

.code { color: var(--amber); letter-spacing: .22em; }

/* Status line and small tool buttons under the screen */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  margin-top: 6px;
}

.netstate {
  margin: 0;
  font-size: .8rem;
  color: #a694bd;
}

.toolbar__buttons { display: none; gap: 8px; }
.is-playing .toolbar__buttons { display: flex; }

.tool {
  width: 44px;
  height: 36px;
  border: 2px solid #4a3866;
  border-radius: 8px;
  background: var(--plum-2);
  color: var(--cream);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.tool:hover { background: #3b2a55; }
.tool.is-on { background: var(--amber); color: #23101a; border-color: var(--amber); }
.tool[hidden] { display: none; }
.tool:focus-visible, .pad__btn:focus-visible, .linkbtn:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* On-screen controls. Three layouts (data-layout on #pad): "gamepad" with a
   d-pad cross and round action buttons, "stick" with a touch pad, and "row"
   with plain buttons. .pad--lefty swaps the two sides. */
.pad {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.is-playing .pad { display: flex; flex-wrap: wrap; }
body:not(.touch) .pad__cluster { display: none !important; }

/* Weapon bar: every weapon one tap away, with the shots that are left. */
.wbar { display: flex; gap: 5px; flex: 1 0 100%; justify-content: center; }
.wbar__btn {
  position: relative;
  flex: 1 1 0;
  max-width: 76px;
  height: 46px;
  padding: 0;
  border: 2px solid #4a3866;
  border-radius: 10px;
  background: var(--plum-2);
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  touch-action: none;
}
.wbar__btn canvas { width: 28px; height: 28px; image-rendering: pixelated; pointer-events: none; vertical-align: middle; }
.wbar__n { position: absolute; right: 4px; bottom: 1px; font-size: .72rem; font-weight: 700; pointer-events: none; }
.wbar__l { position: absolute; left: 3px; bottom: 1px; font-size: .62rem; font-weight: 700; color: var(--amber); pointer-events: none; }
.wbar__btn.is-top .wbar__l { color: #ffffff; text-shadow: 0 0 4px var(--amber); }
/* A power star can still go into this weapon: a gold rim on the whole button. */
.wbar__btn.can-up { border-color: var(--amber); }
.wbar__btn.can-up.is-active { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(255, 61, 127, .35), inset 0 0 0 2px var(--amber); }
/* Star button: puts a power star into the weapon in hand. Same size as a weapon button. */
.wbar__stars {
  flex: 1 1 0;
  max-width: 76px;
  min-width: 44px;
  height: 46px;
  padding: 0 2px;
  border: 2px solid var(--amber);
  border-radius: 10px;
  background: #4a3418;
  color: var(--amber);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  animation: pulse 1.2s ease-in-out infinite;
}
.wbar__stars[hidden] { display: none; }
.wbar__stars:disabled { opacity: .45; animation: none; cursor: default; }
.wbar__stars:active { filter: brightness(1.3); }
@keyframes pulse { 50% { box-shadow: 0 0 10px rgba(255, 178, 63, .6); } }
.wbar__btn.is-active { border-color: var(--pink); background: #4a2350; box-shadow: 0 0 0 2px rgba(255, 61, 127, .35); }
.wbar__btn.is-empty { opacity: .32; }
.wbar__btn.is-pressed { filter: brightness(1.3); }
.wbar__btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.pad--lefty { flex-direction: row-reverse; }

.pad__cluster { --size: min(46vw, 34vh, 220px); }

.pad__btn {
  padding: 0;
  border: 2px solid #5a4680;
  border-bottom-width: 6px;
  border-radius: 16px;
  background: #2f2144;
  color: var(--cream);
  font: inherit;
  font-weight: 700;
  font-size: clamp(1.3rem, 6vw, 2rem);
  line-height: 1;
  touch-action: none;
  cursor: pointer;
}

.pad__btn--drop, .pad__btn--up { color: #cbbcd8; }
.pad__btn--fire, .pad__btn--jump { font-size: clamp(.9rem, 4vw, 1.2rem); letter-spacing: .04em; }
.pad__btn--swap { font-size: clamp(.62rem, 2.6vw, .8rem); letter-spacing: .04em; color: #ffe0ee; background: #6e1a40; border-color: #c2356f; }
.pad__btn--jump { color: #10261f; background: var(--mint); border-color: #1a8265; }
.pad__btn--fire { color: #2a1a05; background: var(--amber); border-color: #a8690f; }

.pad__btn.is-pressed {
  border-bottom-width: 2px;
  transform: translateY(4px);
  filter: brightness(1.25);
}

.pad__stick { display: none; }

/* --- layout: gamepad ---------------------------------------------------- */
.pad[data-layout="gamepad"] .pad__cluster--move {
  display: grid;
  width: var(--size);
  height: var(--size);
  grid-template: "a up b" 1fr "left mid right" 1fr "c down d" 1fr / 1fr 1fr 1fr;
  gap: 4px;
  padding: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a1f3d 0 62%, transparent 63%);
}
.pad[data-layout="gamepad"] .pad__btn--up { grid-area: up; border-radius: 14px 14px 4px 4px; }
.pad[data-layout="gamepad"] .pad__btn--left { grid-area: left; border-radius: 14px 4px 4px 14px; }
.pad[data-layout="gamepad"] .pad__btn--right { grid-area: right; border-radius: 4px 14px 14px 4px; }
.pad[data-layout="gamepad"] .pad__btn--drop { grid-area: down; border-radius: 4px 4px 14px 14px; }
.pad[data-layout="gamepad"] .pad__cluster--move .pad__btn { font-size: clamp(1.1rem, 5vw, 1.7rem); border-bottom-width: 4px; }

/* Round action buttons, set diagonally like on a controller: the thumb
   rests on FIRE and rolls down to JUMP. */
.pad[data-layout="gamepad"] .pad__cluster--act,
.pad[data-layout="stick"] .pad__cluster--act {
  position: relative;
  width: var(--size);
  height: var(--size);
}
.pad[data-layout="gamepad"] .pad__cluster--act .pad__btn,
.pad[data-layout="stick"] .pad__cluster--act .pad__btn {
  position: absolute;
  width: 54%;
  height: 54%;
  border-radius: 50%;
}
.pad[data-layout="gamepad"] .pad__cluster--act .pad__btn--swap,
.pad[data-layout="stick"] .pad__cluster--act .pad__btn--swap { width: 36%; height: 36%; right: 2%; top: 0; border-bottom-width: 4px; }
.pad--lefty[data-layout="gamepad"] .pad__cluster--act .pad__btn--swap,
.pad--lefty[data-layout="stick"] .pad__cluster--act .pad__btn--swap { right: auto; left: 2%; }
.pad[data-layout="gamepad"] .pad__btn--fire,
.pad[data-layout="stick"] .pad__btn--fire { left: 0; top: 2%; }
.pad[data-layout="gamepad"] .pad__btn--jump,
.pad[data-layout="stick"] .pad__btn--jump { right: 0; bottom: 2%; }
.pad--lefty[data-layout="gamepad"] .pad__btn--fire,
.pad--lefty[data-layout="stick"] .pad__btn--fire { left: auto; right: 0; }
.pad--lefty[data-layout="gamepad"] .pad__btn--jump,
.pad--lefty[data-layout="stick"] .pad__btn--jump { right: auto; left: 0; }

/* --- layout: stick (touch pad) ------------------------------------------ */
.pad[data-layout="stick"] .pad__cluster--move { width: var(--size); height: var(--size); }
.pad[data-layout="stick"] .pad__cluster--move .pad__btn { display: none; }
.pad[data-layout="stick"] .pad__stick {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #5a4680;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 30%, rgba(90, 70, 128, .35) 31% 32%, transparent 33%),
    #241a33;
  touch-action: none;
}
.pad__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  margin: -21% 0 0 -21%;
  border-radius: 50%;
  border: 2px solid #8a6fc0;
  background: #4a3866;
  pointer-events: none;
}
.pad__stick.is-pressed .pad__knob { background: var(--pink); border-color: #ffd0e4; }

/* --- layout: one hand ----------------------------------------------------
   Everything under one thumb: a large touch pad in the corner of the playing
   hand, FIRE right next to it, the weapon bar above. JUMP is the upward
   flick, and the tomato fires by itself. */
.pad[data-layout="one"] { flex-direction: row-reverse; justify-content: flex-start; align-items: flex-end; }
.pad--lefty[data-layout="one"] { flex-direction: row; }
.pad[data-layout="one"] .pad__cluster { --size: min(54vw, 36vh, 250px); }
.pad[data-layout="one"] .pad__cluster--move { width: var(--size); height: var(--size); }
.pad[data-layout="one"] .pad__cluster--move .pad__btn { display: none; }
.pad[data-layout="one"] .pad__stick {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #5a4680;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 30%, rgba(90, 70, 128, .35) 31% 32%, transparent 33%),
    #241a33;
  touch-action: none;
}
.pad[data-layout="one"] .pad__cluster--act { display: flex; align-items: flex-end; }
.pad[data-layout="one"] .pad__btn--jump { display: none; }
.pad[data-layout="one"] .pad__btn--fire { width: min(26vw, 110px); height: min(26vw, 110px); border-radius: 50%; }
.pad[data-layout="one"] .wbar { justify-content: flex-end; }
.pad--lefty[data-layout="one"] .wbar { justify-content: flex-start; }

/* --- layout: row -------------------------------------------------------- */
.pad[data-layout="row"] { align-items: stretch; }
.pad[data-layout="row"] .pad__cluster { display: flex; gap: 8px; flex: 1 1 0; min-width: 0; }
.pad[data-layout="row"] .pad__cluster--move { max-width: 300px; flex-grow: 1.25; }
.pad[data-layout="row"] .pad__cluster--act { max-width: 240px; justify-content: flex-end; }
.pad--lefty[data-layout="row"] .pad__cluster--act { justify-content: flex-start; }
.pad[data-layout="row"] .pad__btn { flex: 1 1 0; min-width: 0; height: clamp(76px, 20vh, 168px); }
.pad[data-layout="row"] .pad__btn--drop { flex: 0.72 1 0; min-width: 46px; font-size: clamp(1rem, 4.4vw, 1.5rem); }
.pad[data-layout="row"] .pad__btn--up { display: none; }
.pad[data-layout="row"] .pad__btn--swap { flex: 0.6 1 0; min-width: 44px; }
.pad[data-layout="row"] .pad__cluster--act { max-width: 290px; }

.tool--wide { width: auto; min-width: 58px; padding: 0 8px; font-size: .75rem; letter-spacing: .04em; }
.tool--touch { display: none; }
.touch .tool--touch { display: inline-block; }

.linkbtn {
  border: 0;
  padding: 0;
  background: none;
  color: var(--mint);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* "How to play" card shown before a game */
.btn--help { flex: 0 0 auto; }
.panel--help .panel__inner { width: min(760px, 96%); }
.panel--help:not(.is-hidden) .panel__inner { animation: flyout .28s ease-out; }
@keyframes flyout {
  from { transform: translateY(18px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.help { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; }
.help__list { columns: 2; column-gap: 12px; }
.help__list li { break-inside: avoid; }
.panel--help .row { position: sticky; bottom: 0; }
.panel--help .panel__inner { width: min(900px, 97%); }
.help__card { background: var(--plum-2); border-top: 3px solid var(--pink); border-radius: 6px; padding: 10px 12px; }
.help__card:nth-child(2) { border-top-color: var(--mint); }
.help__card:nth-child(3) { border-top-color: var(--amber); }
.help__card h3 { margin: 0 0 6px; font-size: 1rem; color: var(--cream); }
.help__card p { margin: 0; font-size: .88rem; color: #dccfe8; }
.help__list { list-style: none; margin: 0 0 6px; padding: 0; font-size: .86rem; color: #dccfe8; }
.help__list li { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.help__list b { color: var(--cream); }
.help__icon { flex: 0 0 26px; width: 26px; height: 26px; image-rendering: pixelated; }
.help__card .help__note { font-size: .8rem; color: #b9a8cc; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .9rem; color: #cbbcd8; cursor: pointer; }
.check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--pink); flex: 0 0 auto; }
@media (max-width: 860px) { .help { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 520px) { .help__list { columns: 1; } }
/* Phones: the card gets the whole page and the start button stays in reach. */
@media (max-width: 680px) {
  .is-help .marquee { display: none; }
  .is-help .stage { padding-top: 6px; }
  .panel--help h2 { margin-bottom: 8px; font-size: 1.15rem; }
  .help__card { padding: 8px 10px; }
  .help__card h3 { margin-bottom: 2px; font-size: .95rem; }
  .help__card p, .help__list { font-size: .84rem; line-height: 1.4; }
  .help__list li { margin-bottom: 2px; }
  .help__icon { flex-basis: 22px; width: 22px; height: 22px; }
  .panel--help .check { margin-top: 8px; }
  .panel--help .row { position: sticky; bottom: 8px; }
}

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field.is-dim { opacity: .5; }

.controls { margin-top: 28px; }
.controls h2 { font-size: 1.1rem; color: var(--mint); margin: 0 0 8px; }

.controls table {
  border-collapse: collapse;
  width: min(560px, 100%);
  font-size: .9rem;
}

.controls th, .controls td {
  text-align: left;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid #3a2b52;
}

.controls th { color: #cbbcd8; font-weight: 600; }

/* The key table is wider than a phone: it scrolls inside its own box instead
   of widening the whole page. */
@media (max-width: 760px) {
  .controls table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
}

/* Footer with the operator's imprint */
.footer { margin-top: 36px; padding-top: 14px; border-top: 2px dashed #4a3866; font-size: .85rem; color: #cbbcd8; }
.footer a { color: var(--mint); }
.footer__line { margin: 0 0 8px; }
.imprint summary { display: inline-block; cursor: pointer; color: var(--mint); text-decoration: underline; padding: 6px 0; }
.imprint summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.imprint[open] summary { color: var(--cream); text-decoration: none; font-weight: 600; }
.imprint__list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0; padding: 12px 14px; background: var(--plum); border-left: 4px solid var(--pink); max-width: 560px; }
.imprint__list dt { color: #a694bd; }
.imprint__list dd { margin: 0; color: var(--cream); overflow-wrap: anywhere; }
.imprint__meta { margin: 6px 0 0; font-size: .8rem; color: #a694bd; }
@media (max-width: 480px) { .imprint__list { grid-template-columns: 1fr; gap: 0; } .imprint__list dd { margin-bottom: 8px; } }
.touch.is-playing .footer { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Small screens: menus get the full width instead of sitting on the screen */
@media (max-width: 680px) {
  .stage { padding: 12px 10px 32px; }
  .marquee { margin-bottom: 12px; }
  .cabinet { padding: 8px; }
  body:not(.is-playing) #screen { display: none; }
  body:not(.is-playing) .panel { position: static; background: none; width: 100%; }
  .panel__inner { width: 100%; }
  .fields { grid-template-columns: 1fr; gap: 0; }
  input, select, .btn { min-height: 46px; font-size: 16px; }
}

/* Touch devices while a game runs: nothing but screen, status and buttons.
   The screen shrinks so that the buttons always stay inside the viewport. */
.touch.is-playing { overscroll-behavior: none; }
.touch.is-playing .marquee,
.touch.is-playing .controls { display: none; }
.touch.is-playing .stage { padding: 4px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
.touch.is-playing .cabinet { padding: 4px; border-width: 2px; }
.touch.is-playing #screen {
  width: min(100%, calc((100vh - 190px) * 320 / 224));
  width: min(100%, calc((100dvh - 190px) * 320 / 224));
}

@media (max-width: 480px) {
  .touch.is-playing .netstate { display: none; }
  .touch.is-playing .toolbar { justify-content: center; }
  .touch.is-playing .toolbar__buttons { gap: 6px; }
  .touch.is-playing .tool { width: 44px; }
  .touch.is-playing .tool--wide { width: auto; min-width: 54px; padding: 0 6px; }
}

/* Phones held sideways: the screen takes the full height and the controls
   move into the free space left and right of it. */
@media (orientation: landscape) and (max-height: 540px) {
  .touch.is-playing .stage { padding: 4px; width: 100%; }
  .touch.is-playing .cabinet { margin: 0 auto; width: fit-content; }
  .touch.is-playing #screen {
    width: min(calc(100vw - 316px), calc((100vh - 20px) * 320 / 224));
    width: min(calc(100vw - 316px), calc((100dvh - 20px) * 320 / 224));
  }
  .touch.is-playing .toolbar {
    position: fixed;
    top: 6px;
    right: calc(6px + env(safe-area-inset-right, 0px));
    margin: 0;
    flex-direction: column;
    align-items: flex-end;
    width: 142px;
  }
  .touch.is-playing .toolbar__buttons { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .touch.is-playing .tool { width: 42px; height: 34px; }
  .touch.is-playing .tool--wide { width: auto; }
  .touch.is-playing .pad { margin: 0; }
  .touch.is-playing .pad__cluster {
    --size: min(150px, 54vh);
    position: fixed;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .touch.is-playing .pad__cluster--move { left: calc(6px + env(safe-area-inset-left, 0px)); }
  .touch.is-playing .pad__cluster--act { right: calc(6px + env(safe-area-inset-right, 0px)); }
  .touch.is-playing .pad--lefty .pad__cluster--move { left: auto; right: calc(6px + env(safe-area-inset-right, 0px)); }
  .touch.is-playing .pad--lefty .pad__cluster--act { right: auto; left: calc(6px + env(safe-area-inset-left, 0px)); }
  /* Left-handed: the tools move away from the movement thumb. */
  .touch.is-playing:has(.pad--lefty) .toolbar { right: auto; left: calc(6px + env(safe-area-inset-left, 0px)); align-items: flex-start; }
  .touch.is-playing:has(.pad--lefty) .toolbar__buttons { justify-content: flex-start; }
  /* Weapons sit above the movement cluster, opposite the tool buttons. */
  .touch.is-playing .netstate { display: none; }
  .touch.is-playing .toolbar { width: 150px; }
  .touch.is-playing .tool, .touch.is-playing .tool--wide { width: 46px; min-width: 0; height: 34px; padding: 0; font-size: .68rem; }
  .touch.is-playing .wbar {
    position: fixed;
    width: 150px;
    flex-wrap: wrap;
    gap: 4px;
    bottom: calc(166px + env(safe-area-inset-bottom, 0px));
    left: calc(6px + env(safe-area-inset-left, 0px));
  }
  .touch.is-playing .wbar__btn { flex: 1 1 28%; height: 40px; max-width: none; }
  .touch.is-playing .pad--lefty .wbar { left: auto; right: calc(6px + env(safe-area-inset-right, 0px)); }

  /* One hand: pad, FIRE and weapons all on the playing side, tools opposite. */
  .touch.is-playing .pad[data-layout="one"] .pad__cluster--move,
  .touch.is-playing .pad[data-layout="one"] .pad__cluster--act,
  .touch.is-playing .pad[data-layout="one"] .wbar { left: auto; right: calc(6px + env(safe-area-inset-right, 0px)); }
  .touch.is-playing .pad--lefty[data-layout="one"] .pad__cluster--move,
  .touch.is-playing .pad--lefty[data-layout="one"] .pad__cluster--act,
  .touch.is-playing .pad--lefty[data-layout="one"] .wbar { right: auto; left: calc(6px + env(safe-area-inset-left, 0px)); }
  .touch.is-playing .pad[data-layout="one"] .pad__cluster--act { width: 150px; justify-content: center; bottom: calc(162px + env(safe-area-inset-bottom, 0px)); }
  .touch.is-playing .pad[data-layout="one"] .pad__btn--fire { width: 72px; height: 72px; }
  .touch.is-playing .pad[data-layout="one"] .wbar { bottom: calc(240px + env(safe-area-inset-bottom, 0px)); }
  .touch.is-playing:has(.pad[data-layout="one"]:not(.pad--lefty)) .toolbar { right: auto; left: calc(6px + env(safe-area-inset-left, 0px)); align-items: flex-start; }
  .touch.is-playing:has(.pad[data-layout="one"]:not(.pad--lefty)) .toolbar__buttons { justify-content: flex-start; }
  .touch.is-playing:has(.pad--lefty[data-layout="one"]) .toolbar { left: auto; right: calc(6px + env(safe-area-inset-right, 0px)); align-items: flex-end; }
  .touch.is-playing:has(.pad--lefty[data-layout="one"]) .toolbar__buttons { justify-content: flex-end; }
  .touch.is-playing .pad[data-layout="row"] .pad__cluster { width: 142px; flex-wrap: wrap; max-width: none; }
  .touch.is-playing .pad[data-layout="row"] .pad__btn { flex: 1 1 40%; height: 76px; }
  .touch.is-playing .pad[data-layout="row"] .pad__btn--drop,
  .touch.is-playing .pad[data-layout="row"] .pad__btn--swap { order: 3; flex: 1 1 100%; height: 48px; }
}

/* Star shop between levels: big cards, easy to hit with a thumb. */
.panel--shop .panel__inner { width: min(720px, 96%); }
.panel--shop:not(.is-hidden) .panel__inner { animation: flyout .28s ease-out; }
.panel--shop h2 { color: var(--slot, var(--mint)); margin-bottom: 6px; }
.shop__lead { margin: 0 0 10px; font-size: .92rem; color: #dccfe8; }
.shop__stars { display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: 999px; background: #4a3418; color: var(--amber); font-weight: 700; font-size: 1.1rem; }
.shop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.shop__card {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 8px;
  align-items: center;
  min-height: 76px;
  padding: 8px;
  border: 2px solid var(--amber);
  border-radius: 10px;
  background: var(--plum-2);
  color: var(--cream);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.shop__card canvas { grid-row: 1 / 4; width: 40px; height: 40px; image-rendering: pixelated; pointer-events: none; }
.shop__card span { pointer-events: none; line-height: 1.25; }
.shop__name { font-weight: 700; font-size: .92rem; }
.shop__lvl { color: var(--amber); font-weight: 700; font-size: .85rem; }
.shop__ammo { color: #b9a8cc; font-size: .78rem; }
.shop__card:hover:not(:disabled) { background: #3b2a55; }
.shop__card:active:not(:disabled) { filter: brightness(1.3); transform: scale(.97); }
.shop__card:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.shop__card:disabled { border-color: #4a3866; cursor: default; }
.shop__card:disabled:not(.is-top) { opacity: .45; }
.shop__card.is-top .shop__lvl { color: #ffffff; text-shadow: 0 0 4px var(--amber); }
.shop__card.is-new .shop__lvl { color: var(--mint); }
.shop__players { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.shop__chip { min-height: 40px; padding: 4px 12px; border: 2px solid var(--slot); border-radius: 999px; background: none; color: var(--cream); font: inherit; font-weight: 600; cursor: pointer; }
.shop__chip.is-on { background: var(--slot); color: #23101a; }
.shop__row { margin-top: 12px; }
.shop__row .btn { min-height: 52px; font-size: 1.05rem; }
.shop__note { margin: 8px 0 0; font-size: .82rem; color: #b9a8cc; }
@media (max-width: 760px) { .shop__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .is-shop .marquee { display: none; }
  .is-shop .stage { padding-top: 6px; }
  .panel--shop .shop__row { position: sticky; bottom: 8px; }
}
/* Phones held sideways: four columns, smaller cards, everything on one screen. */
@media (orientation: landscape) and (max-height: 540px) {
  .is-shop .marquee { display: none; }
  .panel--shop { position: fixed; inset: 0; z-index: 20; background: var(--ink); }
  .panel--shop .panel__inner { max-height: 100%; padding: 8px 0; }
  .panel--shop h2 { font-size: 1.1rem; margin-bottom: 2px; }
  .shop__lead { margin-bottom: 6px; font-size: .85rem; }
  .shop__grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .shop__card { min-height: 60px; padding: 6px; grid-template-columns: 32px 1fr; }
  .shop__card canvas { width: 32px; height: 32px; }
  .shop__row { margin-top: 8px; }
  .shop__row .btn { min-height: 46px; }
}