:root {
  --bg:          #0b0b14;
  --bg-soft:     #16162a;
  --fg:          #e9e4d4;
  --fg-dim:      #8e8878;
  --accent:      #e0c180;
  --accent-br:   #ffe299;

  /* Orb palette — single-hue system as requested.
     Default: red. Selected: yellow. Hit: orange. Miss: dim red. */
  --orb-red:     #b30b00;
  --orb-red-br:  #d71800;
  --orb-yellow:  #f2c94c;
  --orb-yellow-br:#ffdd66;
  --orb-orange:  #f28c28;
  --orb-orange-br:#ffa640;
  --orb-miss:    #4a0700;

  --hit:         var(--orb-orange);
  --miss:        var(--orb-miss);
  --danger:      #c44b4b;

  --serif:       "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:        system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Base UI font size — 20pt as requested. Orb labels are capped
     smaller below so they still fit inside the reduced circle. */
  --ui-font:     20pt;
}

* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans);
  font-size: var(--ui-font);
  line-height: 1.35;
}
body {
  background: radial-gradient(ellipse at center top, #1d1c34 0%, #0b0b14 70%);
  overflow-x: hidden;
}

/* ============================================================
   Venue skin — concert-hall backdrop.
   Stacking: curtains > floor > lights, all under the container
   (z-index 0; container has its own stacking context).
   ============================================================ */
#venue {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.container { position: relative; z-index: 1; }

/* House lights — warm radial glows softening the upper stage. */
.venue-light {
  position: absolute;
  width: 60vmin; height: 60vmin;
  top: -20vmin;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .35;
  animation: venue-pulse 9s ease-in-out infinite;
}
.venue-light-left   { left:  -10vw; background: radial-gradient(circle, rgba(224,193,128,.22), transparent 60%); }
.venue-light-center { left: calc(50% - 30vmin); animation-delay: -3s; background: radial-gradient(circle, rgba(224,193,128,.18), transparent 62%); }
.venue-light-right  { right: -10vw; animation-delay: -6s; background: radial-gradient(circle, rgba(224,193,128,.22), transparent 60%); }

@keyframes venue-pulse {
  0%, 100% { opacity: .32; transform: translateY(0); }
  50%      { opacity: .42; transform: translateY(4px); }
}

/* Side curtains — red velvet via layered gradients. Vertical pleats
   come from repeating-linear-gradient striping; the warm rope at the
   top edge is a simple gold band. Width scales with the viewport so
   mobile shows thinner curtains but the effect still reads. */
.venue-curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 14vw, 160px);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, transparent 12%, transparent 85%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.22) 10px,
      rgba(255,255,255,.04) 16px,
      rgba(0,0,0,0) 32px
    ),
    linear-gradient(to right, #4a0a10 0%, #7e1420 40%, #4a0a10 100%);
  box-shadow: 0 0 32px rgba(0,0,0,.6);
  opacity: .92;
}
.venue-curtain::before {
  /* gold trim at the top of each curtain */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(to right, #a78444, #e0c180, #a78444);
  box-shadow: 0 1px 6px rgba(224,193,128,.3);
}
.venue-curtain-left  { left:  0; transform-origin: left top; }
.venue-curtain-right { right: 0; transform-origin: right top; }

/* Stage floor — wooden band at the bottom of the viewport with a
   subtle perspective via darker grain at the edges. */
.venue-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(40px, 10vh, 120px);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 18%, transparent 80%, rgba(0,0,0,.75) 100%),
    repeating-linear-gradient(
      to right,
      #3a2414 0px,
      #3a2414 24px,
      #2a1a0f 25px,
      #3a2414 50px
    );
  opacity: .55;
  box-shadow: inset 0 14px 32px rgba(0,0,0,.65);
}

/* While a round is playing the lights dim slightly and shift to
   an amber spotlight — hooked via body.performing in ui.js. */
body.performing .venue-light { opacity: .22; animation-duration: 4s; }
body.performing .venue-curtain { opacity: .75; }

@media (max-width: 600px) {
  /* On phones the curtains and floor can feel cramped — soften. */
  .venue-curtain { width: clamp(40px, 10vw, 80px); opacity: .78; }
  .venue-floor { opacity: .35; }
  .venue-light { opacity: .22; }
}

.container {
  max-width: 1000px; margin: 0 auto; padding: 20px 20px 40px;
}

header {
  text-align: center; margin-bottom: 14px;
}
header h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 4.2vw, 44px);
  letter-spacing: .1em; margin: 0 0 2px; color: var(--accent);
}
header p.sub {
  font-family: var(--serif); font-style: italic; color: var(--fg-dim);
  margin: 0; font-size: 14pt;
}

/* Start panel — a single button before audio can be unlocked */
#start-panel {
  text-align: center; padding: 60px 0;
}
#start-btn {
  font-family: var(--serif); font-size: 22pt; letter-spacing: .15em;
  padding: 14px 48px; background: transparent; color: var(--accent);
  border: 1px solid var(--accent); cursor: pointer;
  min-height: 44px;
  transition: background .2s, color .2s;
}
#start-btn:hover, #start-btn:active { background: var(--accent); color: var(--bg); }

/* Stage */
#stage { display: none; }

/* Launcher gate — shown by index.php when CONDUCTOR_MODE=production
   and no session has been injected. The game UI never renders. */
.launcher-gate {
  max-width: 520px;
  margin: 80px auto;
  padding: 32px;
  background: var(--bg-soft);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
  font-family: var(--serif);
}
.launcher-gate p {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 22pt;
}
.launcher-gate-sub {
  color: var(--fg-dim) !important;
  font-size: 14pt !important;
  font-style: italic;
}

/* Orchestra silhouette — sits between header and the play layout.
   Programmer-art placeholder per the vault hub's open threads. */
.orchestra {
  max-width: 640px;
  margin: 0 auto 4px;
  height: clamp(58px, 10vh, 96px);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: visible;
}
.orch-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
}

/* Idle breathing — every figure sways subtly. Staggered so the row feels
   alive rather than mechanical. */
.orch-figure {
  transform-origin: center 124px;
  animation: orch-breath 4.6s ease-in-out infinite;
}
/* Per-figure animation-delay is set inline by orchestra.js to stagger
   the breathing — nth-of-type doesn't work after the outer-wrapper. */

@keyframes orch-breath {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-1.5px) scaleY(1.01); }
}

/* Bow on note fire — brief forward tilt. */
.orch-figure.is-bowing {
  animation: orch-bow 320ms ease-out;
}
@keyframes orch-bow {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}
.orch-figure.is-bowing .orch-head {
  fill: rgba(224, 193, 128, 0.9);
  transition: fill 150ms ease-out;
}

/* Conductor baton swing — rotates the nested .orch-baton group, not the
   whole figure, so the body stays still. */
.orch-baton { transform-origin: 0 48px; }
.orch-conductor.is-batoning .orch-baton {
  animation: orch-baton-swing 620ms ease-out;
}
@keyframes orch-baton-swing {
  0%   { transform: rotate(-40deg); }
  35%  { transform: rotate(18deg); }
  70%  { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}
.orch-conductor.is-batoning .orch-head {
  fill: rgba(224, 193, 128, 0.85);
  transition: fill 300ms ease-out;
}

@media (max-width: 600px) {
  .orchestra { height: clamp(60px, 12vh, 100px); }
}

/* Two-column play layout: orb grid on the left, wallet column on the right.
   Collapses into a single column on mobile (wallet strip above the grid). */
.play-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 20px;
  align-items: start;
  margin: 4px 0 12px;
}

/* Wallet — four stacked tiles on desktop (right sidebar),
   flips to a 2x2 or 4-column strip on narrower viewports. */
.wallet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.wallet-tile {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 12px;
  background: var(--bg-soft);
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .4s, box-shadow .4s, background .4s;
}
.wallet-label {
  font-family: var(--serif); font-size: 12pt;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--fg-dim);
}
.wallet-value {
  font-family: var(--serif); font-size: 18pt;
  font-weight: 400; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.wallet-tile.win {
  border-color: var(--orb-orange);
  box-shadow: inset 0 0 24px rgba(242, 140, 40, .18);
}
.wallet-tile.win .wallet-value { color: var(--orb-orange); }
.wallet-tile.loss {
  border-color: rgba(90, 26, 24, .8);
}
.wallet-tile.loss .wallet-value { color: var(--fg-dim); }
.wallet-tile.neutral .wallet-value { color: var(--fg-dim); }
.wallet-net-positive { color: var(--orb-orange); }
.wallet-net-negative { color: var(--fg-dim); }

@keyframes flash-win {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.wallet-tile-flash.animating { animation: flash-win .5s ease-out; }

/* Grid of 80 orbs (10×8).
   Circle size reduced ~50% from the original design — orbs use
   minmax(0, 44px) columns so they stay capped at 44px but scale down
   on narrow viewports. Grid stays 10-wide across all breakpoints so
   the 80-number surface stays iconic. */
#grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 42px));
  gap: 6px;
  margin: 0 auto;
  justify-content: center;
  justify-items: stretch;
}
.orb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, transform .1s, box-shadow .25s;
}
.orb::before {
  content: ""; position: absolute; inset: 2px;
  background: radial-gradient(circle at 35% 35%, var(--orb-red-br), var(--orb-red) 72%);
  border-radius: 50%;
  opacity: .9;
  transition: opacity .2s, background .2s, transform .15s;
}
/* Inner dot removed — cleaner single-colour orbs read better at small sizes.
   The class is kept so the DOM structure in ui.js doesn't need to change,
   but it paints nothing. */
.orb-dot { display: none; }
.orb-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); color: #fff; font-weight: 700;
  font-size: clamp(15px, 3.2vw, 21px);
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* Pointer hover only on devices that actually have a hover pointer
   (desktop). Mobile won't stick with stale hover states. */
@media (hover: hover) {
  .orb:hover {
    border-color: rgba(255,255,255,.35);
    transform: translateY(-1px);
  }
  .orb:hover::before { opacity: 1; }
}

.orb.picked {
  border-color: var(--orb-yellow-br);
  box-shadow: 0 0 12px rgba(242, 201, 76, .55);
}
.orb.picked::before {
  background: radial-gradient(circle at 35% 35%, var(--orb-yellow-br), var(--orb-yellow) 72%);
  opacity: 1;
}
.orb.picked .orb-label { color: #2b2200; }

/* Hit takes precedence over picked (both classes present when a picked
   orb is drawn). On the next Play press `.hit` is stripped, leaving only
   `.picked` → the orb returns to yellow automatically. */
.orb.hit {
  border-color: var(--orb-orange-br);
  box-shadow: 0 0 22px var(--orb-orange), inset 0 0 12px rgba(255, 166, 64, .35);
}
.orb.hit::before {
  background: radial-gradient(circle at 35% 35%, var(--orb-orange-br), var(--orb-orange) 72%);
}
.orb.hit .orb-label { color: #2b1400; }

.orb.miss {
  border-color: rgba(179, 11, 0, .25);
  opacity: .55;
}
.orb.miss::before {
  background: radial-gradient(circle at 35% 35%, #631000, var(--orb-miss) 72%);
}

/* Controls */
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-center { justify-content: center; }
.row-between { justify-content: space-between; gap: 16px; }

.section { margin: 12px 0; }
.section h2 {
  font-family: var(--serif); font-weight: 400; font-size: 12pt;
  letter-spacing: .15em; color: var(--fg-dim); text-transform: uppercase;
  margin: 0 0 6px;
}

/* Bet chips */
#bet-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bet-chip {
  font-family: var(--serif); background: transparent; color: var(--fg-dim);
  border: 1px solid rgba(224,193,128,.2);
  padding: 6px 12px; cursor: pointer;
  font-size: 13pt; line-height: 1.1;
  min-height: 36px; min-width: 52px;
  transition: color .15s, border-color .15s, background .15s;
}
.bet-chip:hover { color: var(--accent); border-color: var(--accent); }
.bet-chip.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Primary buttons — large enough for touch (44px min target) */
.btn {
  font-family: var(--serif); letter-spacing: .1em;
  font-size: 15pt;
  padding: 8px 18px; background: transparent; color: var(--accent);
  border: 1px solid var(--accent); cursor: pointer;
  min-height: 40px;
  transition: background .15s, color .15s;
}
.btn:hover, .btn:active { background: var(--accent); color: var(--bg); }
.btn:disabled { opacity: .35; cursor: default; }
.btn.primary {
  background: var(--accent); color: var(--bg); font-weight: 600;
  padding: 10px 28px; font-size: 17pt;
}
.btn.primary:hover { background: var(--accent-br); }

/* Progress bar during the 10-second performance */
#progress {
  height: 2px; background: rgba(255,255,255,.05); margin: 8px 0;
  position: relative; overflow: hidden;
}
#progress-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(to right, var(--orb-yellow), var(--orb-orange));
}

#response {
  font-family: var(--serif); font-style: italic; font-size: 14pt;
  text-align: center; margin-top: 6px; min-height: 1.4em;
  color: var(--accent);
}

/* Help / rules modal */
.help-panel {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 4, 12, .78);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.help-card {
  position: relative;
  max-width: 640px; max-height: 86vh;
  overflow-y: auto;
  background: var(--bg-soft);
  border: 1px solid rgba(255,255,255,.12);
  padding: 28px 32px;
  font-family: var(--serif);
  color: var(--fg);
}
.help-card h3 {
  font-weight: 400; margin: 0 0 18px;
  color: var(--accent);
  font-size: 26pt; letter-spacing: .08em;
}
.help-card h4 {
  font-weight: 400; margin: 20px 0 8px;
  color: var(--accent);
  font-size: 16pt; letter-spacing: .08em;
  text-transform: uppercase;
}
.help-card p {
  margin: 0 0 12px;
  font-size: 14pt; line-height: 1.5;
  color: var(--fg);
}
.help-card .muted {
  color: var(--fg-dim);
  font-size: 12pt;
  font-style: italic;
}
.help-paytable {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0 12px;
  font-size: 12pt;
}
.help-paytable th, .help-paytable td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-variant-numeric: tabular-nums;
}
.help-paytable th {
  color: var(--fg-dim);
  font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  font-size: 10pt;
}
.help-paytable th:first-child, .help-paytable td:first-child {
  text-align: left;
  color: var(--accent);
}
.help-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: none; color: var(--fg-dim);
  font-size: 28pt; line-height: 1; cursor: pointer;
  padding: 4px 12px;
}
.help-close:hover { color: var(--accent); }

/* Achievement toasts — slide in from the top-right, auto-dismiss. */
.achievement-toasts {
  position: fixed; top: 20px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.achievement-toast {
  min-width: 260px; max-width: 340px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2a2538 0%, #16162a 100%);
  border: 1px solid var(--orb-yellow-br);
  box-shadow: 0 4px 22px rgba(242, 201, 76, .18);
  font-family: var(--serif);
  color: var(--fg);
  transform: translateX(20px);
  opacity: 0;
  transition: opacity .32s ease-out, transform .32s ease-out;
  pointer-events: auto;
}
.achievement-toast.visible {
  opacity: 1;
  transform: translateX(0);
}
.achievement-toast-title {
  font-size: 10pt; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orb-yellow-br); margin-bottom: 4px;
}
.achievement-toast-name {
  font-size: 18pt; color: var(--accent-br);
}
.achievement-toast-hint {
  font-size: 12pt; color: var(--fg-dim); font-style: italic;
  margin-top: 4px;
}

/* Achievement list panel */
#ach-list { display: flex; flex-direction: column; gap: 10px; }
.ach-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  font-family: var(--serif);
}
.ach-row.locked { opacity: .55; }
.ach-row.unlocked { border-color: var(--orb-yellow-br); background: rgba(242, 201, 76, .05); }
.ach-icon { font-size: 16pt; color: var(--fg-dim); text-align: center; }
.ach-row.unlocked .ach-icon { color: var(--orb-yellow-br); }
.ach-body { display: flex; flex-direction: column; gap: 2px; }
.ach-name { color: var(--accent); font-size: 14pt; }
.ach-row.unlocked .ach-name { color: var(--accent-br); }
.ach-hint { color: var(--fg-dim); font-size: 11pt; font-style: italic; }
.ach-date { color: var(--fg-dim); font-size: 10pt; }

@media (max-width: 600px) {
  .achievement-toasts { top: 12px; right: 12px; left: 12px; }
  .achievement-toast { max-width: none; }
}

/* Library */
#library-panel {
  background: var(--bg-soft); border: 1px solid rgba(255,255,255,.05);
  padding: 14px; margin-top: 16px;
}
.library-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto auto;
  gap: 10px; padding: 6px 0; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-family: var(--serif); color: var(--fg-dim);
  font-size: 14pt;
}
.library-row:last-child { border-bottom: none; }
.library-row button {
  font-family: var(--serif); background: transparent; color: var(--accent);
  border: 1px solid var(--accent); padding: 6px 12px; cursor: pointer;
  font-size: 13pt; min-height: 36px;
}
.library-row button:hover { background: var(--accent); color: var(--bg); }

.stats {
  font-family: var(--serif); color: var(--fg-dim);
  font-size: 14pt;
  text-align: right;
}
.stats strong { color: var(--fg); font-weight: 500; }

footer {
  margin-top: 20px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.05);
  font-family: var(--serif); color: var(--fg-dim); font-size: 11pt;
  text-align: center; font-style: italic;
}
footer a { color: var(--accent); text-decoration: none; }

/* When picking is frozen during performance, dim non-drawn orbs */
#stage.performing .orb:not(.hit):not(.miss):not(.picked) { opacity: .3; }

/* ============================================================
   Responsive breakpoints
   ============================================================ */

/* Tablet — shrink the wallet column so the grid has more room. */
@media (max-width: 900px) {
  .container { padding: 24px 16px 48px; }
  .play-layout { grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; }
  .wallet-tile { padding: 8px 10px; }
  .wallet-value { font-size: 18pt; }
}

/* Below 760px the wallet can't stay beside the grid without squeezing
   the orbs too far — collapse to a single column. Wallet goes ABOVE the
   grid (orbs still command the viewport) as a 4-column strip. */
@media (max-width: 760px) {
  .play-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .wallet {
    order: -1;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile portrait — tighter grid, two-row wallet, stacked controls.
   Priority: keep Play + the main buttons above the fold on a 375×667
   iPhone SE. Vertical budget is the enemy; everything gets trimmed. */
@media (max-width: 600px) {
  :root { --ui-font: 15pt; }
  .container { padding: 8px 12px 20px; }

  header { margin-bottom: 4px; }
  header h1 { font-size: 22pt; letter-spacing: .08em; margin: 0; }
  header p.sub { font-size: 10pt; margin-top: 1px; }

  #start-panel { padding: 24px 0; }
  #start-btn { font-size: 16pt; padding: 10px 28px; }

  .orchestra {
    height: clamp(48px, 8vh, 70px);
    margin-bottom: 0;
  }

  .play-layout { gap: 8px; margin: 4px 0 8px; }

  #grid {
    grid-template-columns: repeat(10, minmax(0, 34px));
    gap: 4px;
  }
  .orb-label { font-size: 14px; }

  .wallet {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .wallet-tile { padding: 5px 6px; }
  .wallet-value { font-size: 12pt; }
  .wallet-label { font-size: 8pt; letter-spacing: .08em; }

  .section { margin: 8px 0; }
  .section h2 { font-size: 10pt; margin-bottom: 4px; }

  .row-between { flex-direction: column; align-items: stretch; gap: 6px; }
  .stats { text-align: left; font-size: 11pt; }
  .bet-chip { font-size: 11pt; padding: 5px 9px; min-height: 32px; min-width: 44px; }

  .row-center { gap: 6px; }
  .btn { font-size: 12pt; padding: 7px 12px; min-height: 34px; }
  .btn.primary { font-size: 14pt; padding: 9px 20px; }

  #progress { margin: 4px 0; }
  #response { font-size: 12pt; margin-top: 4px; }

  footer { margin-top: 10px; padding-top: 6px; font-size: 10pt; }

  .library-row {
    grid-template-columns: 1fr 1fr auto;
    font-size: 11pt;
    row-gap: 4px;
  }
}

/* Very narrow screens — squeeze the last few pixels out of the grid */
@media (max-width: 360px) {
  #grid {
    grid-template-columns: repeat(10, minmax(0, 28px));
    gap: 3px;
  }
  .orb-label { font-size: 12px; }
  header h1 { font-size: 18pt; }
  header p.sub { font-size: 9pt; }
  .orchestra { height: clamp(40px, 7vh, 60px); }
}

/* Short viewports — iPhone SE and similar. Header + orchestra shrink
   further so controls stay reachable without scrolling. */
@media (max-height: 700px) {
  .container { padding-top: 4px; }
  header { margin-bottom: 2px; }
  header h1 { font-size: 18pt; }
  header p.sub { font-size: 9pt; }
  .orchestra { height: clamp(38px, 6vh, 58px); margin-bottom: -2px; }
  .wallet-tile { padding: 4px 6px; }
  .wallet-value { font-size: 11pt; }
  .wallet-label { font-size: 7.5pt; }
  .section { margin: 4px 0; }
  .section h2 { margin-bottom: 2px; }
  .btn { min-height: 32px; padding: 6px 10px; font-size: 11pt; }
  .btn.primary { font-size: 13pt; padding: 7px 18px; }
  .bet-chip { min-height: 28px; padding: 4px 8px; font-size: 10pt; }
  #progress { margin: 3px 0; height: 1px; }
  #response { font-size: 11pt; margin-top: 2px; min-height: 1em; }
  footer { margin-top: 6px; padding-top: 4px; }
}

/* Landscape phones — keep grid compact so controls stay above the fold */
@media (max-height: 600px) and (orientation: landscape) {
  header { margin-bottom: 10px; }
  header h1 { font-size: 32pt; }
  #grid { grid-template-columns: repeat(10, minmax(0, 32px)); }
}