:root {
  color-scheme: dark;
  --bg: #0a3027;
  --panel: #0d493b;
  --panel-soft: #12604d;
  --gold: #f4dda5;
  --gold-strong: #e5bd67;
  --line: #c5a35d;
  --muted: #bed2c7;
  --cream: #fff6df;
  --danger: #ffb9a9;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(ellipse at 45% 20%, #27765d 0, #0b4638 44%, #06251e 100%);
  color: var(--cream);
  font-family: Arial, sans-serif;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Set on the root, not on button/a. The machine itself is the tap target --
 * #scene carries role="button" -- and it was inheriting the browser default,
 * so every tap painted a translucent overlay across the whole canvas and the
 * cabinet appeared to flash blue. The property inherits, so covering the root
 * covers the canvas and anything added later.
 */
html { -webkit-tap-highlight-color: transparent; }

button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(#24745b, #0b4336);
  box-shadow: inset 0 1px #ffffff28, 0 3px 8px #001c1645;
  color: var(--cream);
  cursor: pointer;
  font: 700 14px Arial, sans-serif;
}

button:hover { filter: brightness(1.1); }

button:focus-visible,
a:focus-visible {
  outline: 3px solid #aaffd5;
  outline-offset: 3px;
}

button:disabled {
  opacity: .5;
  cursor: wait;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 12px 3vw;
  border-bottom: 1px solid #d0ad654f;
  background: #073329ed;
  box-shadow: 0 8px 30px #001a1438;
}

header .eyebrow { margin: auto; }

.brand {
  color: var(--gold);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1px;
  text-decoration: none;
}

.eyebrow {
  color: #e0c983;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  max-width: 1540px;
  margin: auto;
  padding: 24px;
}

.machine-shell {
  overflow: hidden;
  border: 1px solid #d1b26c;
  border-radius: 26px;
  background: linear-gradient(145deg, #125443, #07372d);
  box-shadow: 0 20px 70px #001a1454, inset 0 0 0 4px #f5d78e0f;
}

.game-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px 12px;
}

h1 {
  margin: 6px 0 0;
  color: #fff0c5;
  font: 700 clamp(25px, 2.6vw, 38px) Georgia, serif;
}

h2 {
  margin: 8px 0 10px;
  font: 700 22px Georgia, serif;
}

p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

#help {
  width: 44px;
  padding: 0;
  border-radius: 50%;
  font: 24px Georgia, serif;
}

.hud {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: start;
  justify-content: center;
  gap: clamp(22px, 4vw, 52px);
  padding-inline: 14px;
  text-align: center;
}

.hud > div { min-width: 100px; }

.hud span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.hud strong {
  display: block;
  margin: 4px 0;
  color: #ffe9ad;
  font: 700 24px Georgia, serif;
}

.hud strong small {
  color: #ddc98f;
  font: 700 11px Arial, sans-serif;
}

#progress-meter {
  display: block;
  width: 118px;
  height: 5px;
  margin: 2px auto 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #d8c68d30;
  accent-color: #f1cf77;
}

#progress-meter::-webkit-progress-bar { background: #d8c68d30; }
#progress-meter::-webkit-progress-value { background: linear-gradient(90deg, #d8ad51, #fff0b2); }
#progress-meter::-moz-progress-bar { background: linear-gradient(90deg, #d8ad51, #fff0b2); }

#playfield {
  position: relative;
  height: clamp(540px, 72vh, 820px);
  /* pan-y, not none: a vertical swipe scrolls the page, a tap still drops. */
  touch-action: pan-y;
  user-select: none;
  cursor: pointer;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#loading,
#paused {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  padding: 24px;
  background: #0a4036ed;
  color: var(--gold);
  text-align: center;
  font: 24px Georgia, serif;
}

#paused[hidden],
#loading[hidden],
#sign-in[hidden] { display: none; }

#paused small {
  display: block;
  margin: 12px;
  font: 14px Arial, sans-serif;
}

.wallet-status-wrap {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 20px);
  transform: translateX(-50%);
  pointer-events: none;
}

#wallet-status {
  overflow: hidden;
  padding: 6px 11px;
  border: 1px solid #d4bd7f78;
  border-radius: 999px;
  background: #0b4338d9;
  box-shadow: 0 4px 16px #001d1760;
  color: #dcebe4;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#wallet-status[data-state="checking"],
#wallet-status[data-state="pending"] { color: #ffe3a1; }

#wallet-status[data-state="guest"],
#wallet-status[data-state="error"] {
  border-color: #efb19b99;
  background: #5b2d28e6;
  color: #ffe1d7;
}

#sign-in {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #f2d18a;
  border-radius: 999px;
  background: linear-gradient(#fff0b8, #d7aa50);
  box-shadow: 0 4px 14px #001d1760;
  color: #173b30;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  pointer-events: auto;
  white-space: nowrap;
}

#celebration {
  position: absolute;
  bottom: 17%;
  left: 50%;
  z-index: 5;
  box-sizing: border-box;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  color: #ffecb4;
  font: 700 24px Georgia, serif;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 3px 5px #00231d;
  pointer-events: none;
  white-space: normal;
}

#celebration.reward {
  padding: 9px 18px;
  border: 1px solid #f2d68e;
  border-radius: 999px;
  background: #1b654ee8;
  box-shadow: 0 8px 30px #001c1688, 0 0 28px #ffe59a45;
}

#tap-hint {
  position: absolute;
  bottom: 9px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  padding: 7px 15px;
  border: 1px solid #d0ae65a8;
  border-radius: 999px;
  background: #0a3a31dc;
  box-shadow: 0 4px 18px #001c1666;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

#tap-hint strong {
  display: block;
  color: #ffe7a8;
  font-size: 12px;
  letter-spacing: 1.2px;
}

#tap-hint span {
  display: block;
  max-width: min(76vw, 520px);
  margin-top: 2px;
  overflow: hidden;
  color: #c1d6cc;
  font-size: 10px;
  text-overflow: ellipsis;
}

#tap-hint.blocked { opacity: .68; }

/*
 * The hint is also the thumb-reachable way into the Redeemable Collection on a
 * phone, where the header Collection button sits at the far top of the screen.
 * It stays purely informational until there is something to convert, then
 * becomes an explicit call to action so the label matches what tapping does.
 */
#tap-hint {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  cursor: pointer;
  min-height: 44px;
}

#tap-hint.has-redeemable {
  border-color: #ffe7a8;
  background: linear-gradient(#12594a, #0a3a31);
  box-shadow: 0 0 0 1px #ffe7a855, 0 6px 22px #001c1680;
}

#tap-hint.has-redeemable #tap-hint-title { color: #fff3c4; }

#tap-hint-redeem {
  display: block;
  margin-top: 2px;
  color: #aaffd5;
  font-size: 11px;
  font-weight: 700;
}

button[aria-pressed="true"] {
  border-color: #ffe3a1;
  background: #28765e;
  box-shadow: inset 0 0 0 1px #eac664, 0 0 16px #ffd55a29;
}

.gold {
  border: 1px solid #ffe9b1;
  background: linear-gradient(#fff4c7 0, #f0d383 42%, #c9933b 100%);
  box-shadow: inset 0 2px #ffffff80, 0 4px 0 #8b642a, 0 0 22px #efd26e25;
  color: #17352c;
  text-shadow: 0 1px #fff8;
}

.gold:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px #fff5, 0 2px 0 #8b642a;
}

aside { align-self: start; }

aside section {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid #d0ad6575;
  border-radius: 22px;
  background: #0c4538e8;
  box-shadow: 0 12px 34px #001a1430, inset 0 1px #ffffff12;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  max-height: 380px;
  overflow: auto;
  padding: 3px;
}

.theme-grid button {
  min-height: 66px;
  padding: 5px;
  border-color: #a9b78073;
  border-radius: 12px;
}

.theme-grid img {
  display: block;
  width: 100%;
  height: 44px;
  object-fit: contain;
}

.theme-grid span {
  display: block;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record > div:first-of-type {
  display: flex;
  justify-content: space-between;
}

.record strong {
  color: var(--gold);
  font: 28px Georgia, serif;
}

.recent {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 14px;
}

.recent img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

.disclaimer {
  color: #b9ccc2;
  font-size: 12px;
  text-align: center;
}

.note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

dialog {
  width: min(90vw, 500px);
  padding: 28px;
  border: 1px solid var(--gold);
  border-radius: 22px;
  background: #10503f;
  box-shadow: 0 25px 90px #001a14b8;
  color: var(--cream);
}

dialog::backdrop {
  background: #00130fa6;
  backdrop-filter: blur(4px);
}

dialog li {
  margin: 13px 0;
  font-size: 15px;
  line-height: 1.45;
}

dialog button { margin-top: 10px; }

#scene { outline: none; }

#scene:focus-visible {
  outline: 2px solid #aaffd5;
  outline-offset: -4px;
}

@media (max-width: 900px) {
  header {
    height: 58px;
    padding: 8px 12px;
  }

  header .eyebrow { display: none; }
  header .brand { margin-right: auto; font-size: 14px; }
  header button { min-height: 38px; padding: 7px 10px; font-size: 12px; }
  main { display: block; padding: 10px; }
  .game-heading { padding: 15px 18px 8px; }
  .game-heading .eyebrow { font-size: 10px; }
  .hud { gap: clamp(12px, 5vw, 26px); }
  .hud > div { min-width: 76px; }
  .hud strong { font-size: 20px; }
  .hud span { font-size: 8px; letter-spacing: .7px; }
  #progress-meter { width: 86px; }
  #playfield { height: clamp(430px, calc(100dvh - 190px), 680px); }
  .machine-shell { border-radius: 20px; }
  .wallet-status-wrap { top: 5px; }
  #wallet-status { max-width: min(62vw, 300px); }
  aside { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 0; }
  .theme-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-height: 220px; }
  .theme-grid img { height: 46px; }
  .collection-panel p { margin: 4px 0 12px; }
  aside section { padding: 16px; }
  h1 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

@media (max-height: 650px) and (min-width: 901px) {
  #playfield { height: 420px; }
}

/* ------------------------------------------------------------------ *
 * Redeemable Collection
 *
 * The only collection in the game. It is server-certified and convertible; the
 * device-local souvenir list that used to sit beneath it has been removed.
 * ------------------------------------------------------------------ */

.redeemable {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #d8ad5155;
  border-radius: 14px;
  background: linear-gradient(#0d4a3a66, #07281f66);
}

.redeemable-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.redeemable-head h2 { margin: 0; font-size: 17px; }
.redeemable-head strong { color: #ffe9a8; font-size: 16px; white-space: nowrap; }
.redeemable-note { margin: 0; font-size: 12px; opacity: 0.82; line-height: 1.45; }

.redeemable-lifetime {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--gold, #f3c969);
  opacity: 0.92;
}

.redeemable-list { display: grid; gap: 8px; }
.redeemable-empty { margin: 0; font-size: 12.5px; opacity: 0.75; }

.redeemable-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid #ffffff1f;
  border-radius: 12px;
  background: #04241c66;
}

.redeemable-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: #ffffff10;
}

.redeemable-item .meta { display: grid; gap: 2px; min-width: 0; }
.redeemable-item .name {
  font-weight: 700;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.redeemable-item .sub { font-size: 11.5px; opacity: 0.8; }
.redeemable-item button { min-height: 40px; padding: 8px 12px; font-size: 12.5px; }
.redeemable-item[data-redeemable="false"] { opacity: 0.65; }

.redeem-all { min-height: 44px; font-weight: 800; }
.redeem-all[disabled] { opacity: 0.5; cursor: not-allowed; }

.redeemable-status { margin: 0; font-size: 12px; min-height: 1.2em; line-height: 1.4; }
.redeemable-status[data-state="error"] { color: #ffb4a2; }
.redeemable-status[data-state="success"] { color: #aaffd5; }
.redeemable-status[data-state="pending"] { opacity: 0.85; }

#redeem-confirm {
  border: 1px solid #d8ad5166;
  border-radius: 16px;
  padding: 20px;
  max-width: min(420px, 92vw);
  color: var(--cream, #f6ecd2);
  background: linear-gradient(#0b3a2e, #062018);
}
#redeem-confirm::backdrop { background: #02120dcc; }
#redeem-confirm h2 { margin: 0 0 8px; font-size: 18px; }
#redeem-confirm p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }

.redeem-confirm-list {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 13px;
  display: grid;
  gap: 4px;
  max-height: 34vh;
  overflow-y: auto;
}

.redeem-confirm-total { font-size: 14px; }
.redeem-confirm-total strong { color: #ffe9a8; }
.redeem-confirm-warning { font-size: 11.5px; opacity: 0.8; }

.redeem-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.redeem-confirm-actions button { min-height: 44px; min-width: 96px; }
.redeem-confirm-actions .primary {
  background: linear-gradient(#d8ad51, #a97d24);
  color: #241a04;
  font-weight: 800;
}
.redeem-confirm-actions button[disabled] { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 520px) {
  .redeemable-item { grid-template-columns: 34px 1fr auto; }
  .redeemable-item img { width: 34px; height: 34px; }
  .redeemable-item .name { font-size: 12.5px; }
}

/* ------------------------------------------------------------------ *
 * Auto play (hidden)
 *
 * PUSH carries no affordance of its own -- it must look like the rest of the
 * heading until someone finds it. Once running, the word glows gently: auto
 * play spends real chips, so it must never be ambiguous whether it is on.
 * ------------------------------------------------------------------ */

#push-secret {
  /* Inherits everything; deliberately indistinguishable until activated. */
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
}

body[data-auto-tap="on"] #push-secret {
  color: #aaffd5;
  text-shadow: 0 0 10px #aaffd5a8;
  animation: auto-tap-pulse 1.6s ease-in-out infinite;
}

@keyframes auto-tap-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-auto-tap="on"] #push-secret { animation: none; }
}

/*
 * The faint dot beside COLLECT: a second, more discreet way into auto play.
 * Barely visible by design, but a real 44px tap target so it can actually be
 * hit on a phone. It brightens as clicks accumulate (set inline from the JS)
 * and, once auto play is running, glows alongside PUSH so the state is never
 * ambiguous -- it is spending chips.
 */
#push-secret-dot {
  display: inline-block;
  margin-left: 6px;
  /*
   * Faint, but findable. At 0.05 it was genuinely invisible and the owner could
   * not locate their own control. The heading already separates words with "·",
   * so a dim trailing bullet reads as part of that pattern rather than as a
   * button -- hidden in plain sight instead of hidden outright.
   */
  opacity: 0.28;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  /* Padding gives it a touchable area without moving the heading. */
  padding: 14px;
  margin-right: -14px;
  margin-top: -14px;
  margin-bottom: -14px;
  line-height: 0;
  vertical-align: middle;
}

body[data-auto-tap="on"] #push-secret-dot {
  opacity: 0.85;
  color: #aaffd5;
  text-shadow: 0 0 8px #aaffd5a8;
}