/* =====================================================================
   Peg Surge — styles
   Layout: one full-bleed canvas (board + in-canvas HUD) under full-screen
   menu layers. Works in both orientations; the board geometry itself
   switches in JS (see setOrientation in levels.js).
   ===================================================================== */

:root {
  --bg-0: #070b1c;
  --bg-1: #0f1638;
  --bg-2: #1a2352;
  --panel: rgba(16, 23, 56, .86);
  --panel-solid: #141c44;
  --edge: rgba(140, 170, 255, .18);
  --edge-hot: rgba(160, 200, 255, .42);

  --ink: #eef3ff;
  --ink-dim: #9fb0da;
  --ink-faint: #6c7db0;

  --blue: #4aa8ff;
  --orange: #ff8c1a;   /* UI accent only */
  --ruby: #e0284e;
  --green: #55e06a;
  --purple: #c46bff;
  --gold: #ffd24a;
  --red: #ff5a6e;

  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, .4);
  --radius: 14px;

  --sans: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --mono: "Consolas", "SF Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* Author display rules (.big-btn etc.) would otherwise beat the UA's
   [hidden] rule and leave "hidden" buttons on screen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* iOS enlarges text when the phone turns sideways unless told not to;
     every layout here was measured at the sizes written */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* A finger held still while aiming, or on a button, must not select text or
   bring up iOS's callout and magnifier. */
#app, button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body::before {
  /* ambient nebula behind everything */
  content: "";
  position: fixed;
  /* the long hand first, for Safari before 14.5, which has no inset */
  top: -20%; right: -20%; bottom: -20%; left: -20%;
  inset: -20%;
  background:
    radial-gradient(48% 40% at 22% 18%, rgba(84, 60, 190, .40), transparent 62%),
    radial-gradient(44% 44% at 82% 72%, rgba(18, 96, 180, .34), transparent 64%),
    radial-gradient(60% 50% at 50% 110%, rgba(190, 70, 160, .22), transparent 70%),
    linear-gradient(170deg, var(--bg-1), var(--bg-0) 70%);
  z-index: -2;
  animation: drift 40s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.09); }
}

/* ======================= APP SHELL ======================= */

/* align-items must stay `stretch` (the default) — with `center` the stage
   never takes the container's height, so Game.resize sees a short box and
   the canvas ends up scaled down and overflowing. */
/* iOS Safari sizes a `position: fixed; inset: 0` box to the LAYOUT viewport,
   which is taller than what you can actually see while the URL bar is up —
   the canvas then gets scaled to a height that runs off under the browser
   chrome and the board looks zoomed in. Height is pinned in JS from
   visualViewport (see fitApp); these are ordered fallbacks for before that
   runs, weakest first. */
#app {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  display: flex;
  padding:
    calc(2px + env(safe-area-inset-top))
    calc(2px + env(safe-area-inset-right))
    calc(2px + env(safe-area-inset-bottom))
    calc(2px + env(safe-area-inset-left));
}

/* The canvas is sized in JS (Game.resize) so the painted box exactly
   matches the element box — pointer-to-board mapping depends on it. */
#stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the stage around the canvas aims too (see wireInput) */
  touch-action: none;
}

#game {
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--edge) inset;
  background: #0a1030;
  touch-action: none;
  cursor: crosshair;
}

/* ======================= PEG LEGEND DOTS ======================= */
/* (the playing HUD is painted inside the canvas now — see Game._drawHud) */

.peg-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.peg-dot.blue   { background: radial-gradient(circle at 32% 30%, #d4ecff, var(--blue) 60%, #0d4a8f); }
.peg-dot.ruby   { background: radial-gradient(circle at 32% 30%, #ffd2dc, var(--ruby) 60%, #8c0f2a); }
.peg-dot.green  { background: radial-gradient(circle at 32% 30%, #c6ffcf, var(--green) 60%, #17863a); }
.peg-dot.purple { background: radial-gradient(circle at 32% 30%, #eccfff, var(--purple) 60%, #6b25a8); }
/* the same marks the board draws on the emerald and the amethyst, so the
   legend teaches the shape as well as the colour */
.peg-legend .peg-dot { width: 15px; height: 15px; position: relative; }
.peg-dot.green::after, .peg-dot.purple::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; background: #fff;
}
.peg-dot.green::after {
  clip-path: polygon(50% 4%, 58.5% 41.5%, 96% 50%, 58.5% 58.5%, 50% 96%, 41.5% 58.5%, 4% 50%, 41.5% 41.5%);
}
.peg-dot.purple::after {
  clip-path: polygon(50% 4%, 61.2% 34.6%, 93.7% 35.8%, 68.1% 55.9%, 77% 87.2%, 50% 69%, 23% 87.2%, 31.9% 55.9%, 6.3% 35.8%, 38.8% 34.6%);
}

/* ======================= BUTTONS ======================= */

button { font-family: inherit; color: inherit; cursor: pointer; }

.mini-btn {
  flex: 1;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--edge);
  transition: background .15s, transform .1s, border-color .15s;
}
.mini-btn:hover { background: rgba(255, 255, 255, .14); border-color: var(--edge-hot); }
.mini-btn:active { transform: translateY(1px); }
.mini-btn.warn { color: var(--red); border-color: rgba(255, 90, 110, .4); }

.big-btn {
  display: block;
  width: 100%;
  padding: 13px 22px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-md);
  transition: transform .12s cubic-bezier(.2, 1.6, .4, 1), background .16s, border-color .16s;
}
.big-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .17); border-color: var(--edge-hot); }
.big-btn:active { transform: translateY(0); }

.big-btn.primary {
  background: linear-gradient(180deg, #ffb03a, #f4761a);
  border-color: #ffd98a;
  color: #2a1400;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow: 0 8px 22px rgba(255, 140, 26, .38);
}
.big-btn.primary:hover { background: linear-gradient(180deg, #ffc250, #ff8a26); }

.back-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--edge);
}
.back-btn:hover { background: rgba(255, 255, 255, .14); }
.back-btn, .screen-head h2 { white-space: nowrap; }
.back-btn { flex: 0 0 auto; position: relative; }
/* taps land a little outside it too: drawn, it is 74x35 px on a phone */
.back-btn::after { content: ""; position: absolute; top: -6px; right: -8px; bottom: -6px; left: -8px; }

/* ======================= SCREENS ======================= */

.screen {
  --pad: clamp(14px, 3vh, 34px);
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  /* shorthand first: the per-side safe-area values must come after it,
     or it wipes them and Back buttons slide under the notch */
  padding: var(--pad);
  padding-top: max(var(--pad), env(safe-area-inset-top));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
  padding-left: max(var(--pad), env(safe-area-inset-left));
  background: rgba(6, 10, 26, .93);
  /* Safari 17 and earlier know only the prefixed name (and not with var()) */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow-y: auto;
  animation: fadeIn .28s ease;
}
.screen.active { display: flex; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}
.screen-head h2 {
  margin: 0;
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: .04em;
  color: var(--gold);
}
.total-score { font-size: 13px; color: var(--ink-dim); }
.total-score b { color: var(--gold); font-size: 17px; }

/* ---- title ---- */

#screen-title { align-items: center; justify-content: center; justify-content: safe center; gap: clamp(16px, 4vh, 40px); }

.title-art { text-align: center; }

.logo {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: .88;
  letter-spacing: .02em;
  display: flex; flex-direction: column; align-items: center;
}
.logo span {
  font-size: clamp(46px, 11vw, 104px);
  color: #fff;
  text-shadow: 0 0 34px rgba(120, 180, 255, .55), 0 6px 0 rgba(0, 0, 0, .35);
}
.logo em {
  font-style: normal;
  font-size: clamp(56px, 14vw, 132px);
  background: linear-gradient(180deg, #ffe58a, #ff8c1a 58%, #ff4d6d);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 20px rgba(255, 130, 30, .45));
  animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.tagline {
  margin: 14px 0 0;
  font-size: clamp(13px, 1.9vw, 16px);
  color: var(--ink-dim);
  font-style: italic;
}

.menu { display: flex; flex-direction: column; gap: 10px; width: min(330px, 84vw); }

/* click-through: on a short screen it can land over a menu button */
.credits { position: absolute; bottom: 12px; font-size: 11px; color: var(--ink-faint); text-align: center; padding: 0 14px; pointer-events: none; }

/* sits above the credits line rather than on top of it */
#screen-title ~ .tap-hint, .tap-hint { bottom: 44px; }

/* ---- level grid ---- */

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
  align-content: start;
  padding-bottom: 30px;
}

.lv-stage {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 2px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lv-stage::after { content: ""; flex: 1; height: 1px; background: var(--edge); }
.lv-stage .st-master { font-size: 17px; }

.lv-card {
  position: relative;
  padding: 10px;
  min-height: 92px;
  text-align: left;
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--edge);
  transition: transform .14s cubic-bezier(.2, 1.6, .4, 1), background .16s, border-color .16s;
  display: flex; flex-direction: column; gap: 3px;
}
.lv-card:hover:not(.locked) { transform: translateY(-3px); background: rgba(255, 255, 255, .11); border-color: var(--edge-hot); }
.lv-card.locked { opacity: .36; cursor: not-allowed; }
.lv-card.cleared { border-color: rgba(85, 224, 106, .4); }
.lv-card.current { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(255, 210, 74, .25); }

.lv-num { font-size: 10px; letter-spacing: .14em; color: var(--ink-faint); }
.lv-name { font-size: 13px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.lv-best { margin-top: auto; font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; }
.lv-lock { position: absolute; top: 9px; right: 9px; font-size: 13px; opacity: .7; }
.lv-check { position: absolute; top: 7px; right: 9px; color: var(--green); font-size: 14px; }

/* ---- master grid ---- */

.master-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 11px;
  align-content: start;
}

.ms-card {
  padding: 13px;
  text-align: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--edge);
  transition: transform .14s cubic-bezier(.2, 1.6, .4, 1), background .16s, border-color .16s;
}
.ms-card:hover:not(.locked) { transform: translateY(-3px); background: rgba(255, 255, 255, .11); }
.ms-card.locked { opacity: .35; cursor: not-allowed; }
.ms-card.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(255, 210, 74, .22); background: rgba(255, 210, 74, .09); }
.ms-face { font-size: 40px; line-height: 1; }
.ms-name { font-weight: 700; margin-top: 7px; font-size: 14px; }
.ms-power { font-size: 12px; color: var(--green); margin-top: 1px; }
.ms-desc { font-size: 11px; color: var(--ink-dim); margin-top: 6px; line-height: 1.42; }

/* On a phone the Warden cards run past the bottom of the screen, and Play
   sat below them with nothing to say it was there (135% of the way down at
   iPhone-in-Safari size). The cards scroll in a box of their own instead,
   so the board picker and Play stay on screen; where everything fits, as
   on a desktop, nothing moves. The padding (and the margin undoing it)
   leaves room for a card's lift and glow inside the scroll box. */
#screen-masters .master-grid {
  flex: 0 1 auto;
  min-height: 150px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  margin: -6px;
}

.quick-foot {
  display: flex; align-items: flex-end; gap: 12px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--edge);
  flex: 0 0 auto;
}
.quick-foot .big-btn { width: auto; min-width: 150px; }

.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-dim); flex: 1; }
.field select, .field input[type=range] { width: 100%; }
.field select {
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--panel-solid);
  color: var(--ink);
  border: 1px solid var(--edge);
  font-family: inherit;
  font-size: 16px;   /* iOS force-zooms the page below 16px, and the zoom sticks */
}
.field input, .field output, select, input, textarea { font-size: 16px; }

/* ---- help ---- */

.help-body {
  display: grid;
  /* Two text columns at most. This used to be auto-fit, but the full-width
     green-peg block below spans every track, which stops an empty third one
     from collapsing and squeezes the prose. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  max-width: 1040px;
  margin: 0 auto;
  padding-bottom: 30px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}
@media (min-width: 700px) { .help-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.help-body h3 { color: var(--ink); font-size: 15px; margin: 22px 0 7px; letter-spacing: .05em; }
.help-body h3:first-child { margin-top: 0; }
.help-body p { margin: 0 0 9px; }
.help-body ul { margin: 0; padding-left: 18px; }
.help-body li { margin-bottom: 5px; }
.help-body b.ruby { color: var(--ruby); }

.peg-legend { list-style: none; padding: 0; }
.peg-legend li { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }

.keys { list-style: none; padding: 0; }
.keys li { display: flex; align-items: center; gap: 9px; }
kbd {
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--mono); font-size: 11px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--edge);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--ink);
  white-space: nowrap;   /* "Slide your finger" stood three lines tall on a phone */
  flex: 0 0 auto;
}

/* ---- green peg / Warden powers ---- */

.help-wide { grid-column: 1 / -1; }
.help-body b.emerald { color: var(--green); }

.power-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 10px 20px;
  margin-top: 4px;
}
.power-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--edge);
  border-radius: 9px;
}
.pw-face { font-size: 21px; line-height: 1.2; flex: none; }
.pw-text { min-width: 0; }
.pw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pw-power { color: var(--green); font-size: 14px; }
.pw-who { color: var(--ink-faint); font-size: 11.5px; }
.pw-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.5; }

/* ---- settings ---- */

.settings-body {
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 17px;
  font-size: 14px;
}
.field.range { flex-direction: row; align-items: center; gap: 12px; color: var(--ink); }
.field.range input { flex: 1; accent-color: var(--orange); }
.field.range output { width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.field.check { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); cursor: pointer; }
.field.check input { width: 17px; height: 17px; accent-color: var(--orange); cursor: pointer; }
.danger { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--edge); }
.danger .mini-btn { flex: none; padding: 9px 16px; }

/* ======================= OVERLAYS ======================= */

.overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 7, 20, .78);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  animation: fadeIn .2s ease;
  /* a landscape phone is shorter than the result panel: let it scroll */
  overflow-y: auto;
}
.overlay.active { display: flex; }

.panel {
  margin: auto;   /* centres, but never pushes the top out of reach */
  width: min(360px, 92vw);
  padding: 26px;
  border-radius: 18px;
  background: var(--panel-solid);
  border: 1px solid var(--edge-hot);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 10px;
  text-align: center;
  animation: popIn .28s cubic-bezier(.2, 1.5, .4, 1);
}
.panel.wide { width: min(430px, 94vw); }
.panel h2 { margin: 0 0 8px; font-size: 26px; color: var(--gold); letter-spacing: .03em; }

@keyframes popIn { from { transform: scale(.9) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.res-sub { font-size: 13px; color: var(--ink-dim); margin: -4px 0 8px; font-style: italic; }

.tally { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; }
.tally td { padding: 5px 2px; border-bottom: 1px dashed rgba(255, 255, 255, .1); text-align: left; color: var(--ink-dim); }
.tally td:last-child { text-align: right; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tally tr.hi td:last-child { color: var(--green); }

.res-total { font-size: 15px; color: var(--ink-dim); margin: 6px 0 2px; }
.res-total b { display: block; font-size: 34px; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(255, 210, 74, .35); }
.res-best { font-size: 12px; color: var(--green); min-height: 16px; margin-bottom: 8px; }

.res-btns { display: flex; flex-direction: column; gap: 8px; }

/* ======================= BANNERS (in-stage) ======================= */

#bannerLayer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 4;
}

.banner {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  padding: 8px 26px;
  border-radius: 999px;
  white-space: nowrap;
  animation: bannerIn 1.9s cubic-bezier(.16, 1, .3, 1) forwards;
  /* a one-pixel dark outline under the soft shadow: on the bright skies
     (dunes, candy, circus, jade) the white letters' edge was down to
     2.7-3.9:1 against the see-through tint; the tint itself stays (the
     owner's choice), and so does the shadow */
  text-shadow: 0 0 1px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .8),
               0 1px 2px rgba(0, 0, 0, .85), 0 3px 10px rgba(0, 0, 0, .7);
}

/* Each size is also capped by the board's width (--bw, set by main.js), so
   the longest banner of each kind still fits across it. Only a landscape
   phone, whose board is half the screen, ever reaches the cap -- and an
   iPhone SE, whose 338 px board is too narrow for "SECOND CHANCE -- EXTRA
   BALL" at the 18 px floor. The first declaration is the fallback for
   browsers without min(). */
.banner.style   { font-size: clamp(20px, 3.6vw, 34px); font-size: min(clamp(20px, 3.6vw, 34px), calc(var(--bw, 100vw) * .058));
                  color: #fff; background: linear-gradient(90deg, rgba(255,140,26,.28), rgba(255,80,140,.28)); border: 1px solid rgba(255,190,120,.45); }
.banner.free    { font-size: clamp(18px, 3.2vw, 30px); font-size: min(clamp(18px, 3.2vw, 30px), calc(var(--bw, 100vw) * .052));
                  color: #d9ffe2; background: rgba(40, 180, 90, .26); border: 1px solid rgba(120, 255, 160, .45); }
.banner.power   { font-size: clamp(17px, 3vw, 27px); font-size: min(clamp(17px, 3vw, 27px), calc(var(--bw, 100vw) * .055));
                  color: #dff0ff; background: rgba(70, 130, 255, .26); border: 1px solid rgba(150, 200, 255, .45); }
.banner.fever   { font-size: clamp(26px, 5.4vw, 56px); font-size: min(clamp(26px, 5.4vw, 56px), calc(var(--bw, 100vw) * .086));
                  color: #fff; background: none; border: none;
                  background-image: linear-gradient(180deg, #fff6c9, #ffb03a 55%, #ff4d6d);
                  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
                  /* .banner's dark text-shadow is painted over clipped text: it turned
                     the gold to bronze, nearly gone on the orange skies. A tight dark
                     drop-shadow keeps the letters' edge instead. */
                  text-shadow: none;
                  /* the same outline, as two tight drop-shadows: gold OVERLOAD on the
                     Big Top sky went from 1.5:1 at its edge to 2.6:1 */
                  filter: drop-shadow(0 0 1px rgba(40, 12, 0, .95)) drop-shadow(0 0 1px rgba(40, 12, 0, .95))
                          drop-shadow(0 2px 1.5px rgba(40, 12, 0, .8)) drop-shadow(0 4px 16px rgba(255, 130, 30, .6));
                  animation: feverIn 3.2s cubic-bezier(.16, 1, .3, 1) forwards; }

@keyframes bannerFade {
  0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes bannerIn {
  0%   { opacity: 0; transform: scale(.55) translateY(16px); }
  14%  { opacity: 1; transform: scale(1.1) translateY(0); }
  24%  { transform: scale(1); }
  78%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06) translateY(-22px); }
}
@keyframes feverIn {
  0%   { opacity: 0; transform: scale(.3) rotate(-7deg); }
  12%  { opacity: 1; transform: scale(1.18) rotate(2deg); }
  20%  { transform: scale(1) rotate(0); }
  84%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ======================= MISC ======================= */

.fps {
  position: absolute; left: 10px; top: 10px;
  font-family: var(--mono); font-size: 11px;
  color: var(--green);
  background: rgba(0, 0, 0, .45);
  padding: 3px 7px; border-radius: 5px;
  z-index: 5; pointer-events: none;
}

/* Centred by its margins, not translateX(-50%): the pulse animation sets
   transform too, which threw the translate away and left the pill's left
   edge on the centre line. */
.tap-hint {
  position: fixed;
  left: 0; right: 0; bottom: 22px;
  margin: 0 auto;
  width: -webkit-max-content; width: max-content;
  z-index: 50;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(255, 210, 74, .16);
  border: 1px solid rgba(255, 210, 74, .4);
  color: var(--gold);
  animation: pulse 2s ease-in-out infinite;
  pointer-events: none;
}

/* ======================= RESPONSIVE ======================= */

@media (max-width: 560px) {
  .menu { width: min(300px, 88vw); }
  /* the board list gets the whole width; beside Play it cut the names off */
  .quick-foot { flex-direction: column; align-items: stretch; }
  .quick-foot .big-btn { width: 100%; }
  .big-btn { padding: 11px 18px; font-size: 15px; }
  .screen { --pad: 12px; }
}

/* A phone on its side: the logo goes beside the menu. Stacked, a logo sized
   by the screen's width pushed the menu off the bottom. */
@media (max-height: 600px) and (orientation: landscape) {
  #screen-title { flex-direction: row; gap: clamp(20px, 5vw, 56px); }
  .logo span { font-size: clamp(40px, 15vh, 84px); }
  .logo em { font-size: clamp(48px, 19vh, 106px); }
  .tagline { max-width: 15em; margin-left: auto; margin-right: auto; }
  /* Centred on the page, the sound pill sat on the Settings button. Centre
     it under the logo instead: that column's middle is half the menu (330)
     and half the 5vw gap left of the page's. */
  .tap-hint { right: calc(330px + 5vw); }
}
/* An iPhone SE on its side: the tagline line ran over the last button. */
@media (max-height: 340px) { .credits { display: none; } }


@media (max-width: 360px) {
  .screen-head { gap: 8px; }
  .screen-head h2 { font-size: 17px; }
  .back-btn { padding: 8px 10px; }
  .total-score b { font-size: 15px; }
}

/* Help takes focus itself for keyboard players, so Space scrolls it (on
   Back, Space left the screen); the page needs no ring of its own */
#screen-help:focus { outline: none; }

/* Forced colours (Windows High Contrast): the gold borders that mark the
   chosen Warden and the board you are up to are painted over, so outline
   them in the system highlight; the legend's gem dots keep their colours. */
@media (forced-colors: active) {
  .ms-card.sel, .lv-card.current { outline: 3px solid Highlight; outline-offset: 2px; }
  .peg-dot { forced-color-adjust: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .logo em, .tap-hint, .screen, .overlay, .panel { animation: none; }
  /* banners still come and go, but by fading, without the zoom and swing */
  .banner, .banner.fever { animation: bannerFade 1.9s ease forwards; }
  .banner.fever { animation-duration: 3.2s; }
  .big-btn, .lv-card, .ms-card { transition: none; }
}