/* ============================================================
   NPL CRICKET CHALLENGE — core tokens, backdrop, cards, buttons
   ============================================================ */

:root {
  /* Brand */
  --gold: #f7c515;
  --gold-lt: #ffe27a;
  --gold-dk: #c99a00;
  --np-red: #d9232e;
  --np-red-dk: #8e1219;
  --np-blue: #1d4ed8;
  --np-blue-dk: #0b2a6b;

  /* Surfaces */
  --bg-0: #020812;
  --bg-1: #061426;
  --bg-2: #0b1e35;
  --card: rgba(9, 25, 45, 0.82);
  --card-2: rgba(13, 33, 58, 0.9);
  --line: rgba(120, 160, 210, 0.18);
  --line-gold: rgba(247, 197, 21, 0.35);

  /* Text */
  --tx: #ffffff;
  --tx-2: #d8e2ee;
  --tx-3: #8ea3bd;

  /* Type */
  --f-mega: 'Anton', 'Bebas Neue', sans-serif;
  --f-head: 'Bebas Neue', 'Oswald', sans-serif;
  --f-ui: 'Oswald', sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  /* The bank's strapline, set in its own face rather than the game's
     display type. Poppins is not bundled — the project makes no external
     font requests — so this is Helvetica where it exists and the
     platform's nearest grotesque elsewhere (Arial on Windows, Roboto on
     Android). Drop poppins-500.woff2 into assets/fonts and add it to the
     front of this stack to switch. */
  --f-slogan: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Metrics */
  --r-card: 18px;
  --r-tile: 12px;
  --r-btn: 10px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Photoreal stadium. Portrait crop by default (mobile-first); the wide
     version is swapped in on larger landscape viewports below.
     Spaces in the filenames are URL-encoded. */
  --stadium-img: url('../assets/images/stadium-3-night.png');
  /* The gameplay panel is always tall and narrow, so it keeps the portrait
     crop at every breakpoint — the wide shot puts the pitch too far away.
     The plate must have NO stumps baked in, which is what lets them exist as
     a real layer the batsman stands in front of (and that can topple).
     stadium-3-night.png satisfies that at both ends. Its crease geometry matches
     the plate the constants in game.css were derived from — the popping
     crease still falls on image row ~1599 — so --crease-near/--crease-far
     carry over unchanged. Re-measure them if a future plate is reframed. */
  --pitch-img: url('../assets/images/stadium-3-night.png');
}

* { box-sizing: border-box; }

/* `hidden` must win over component display rules (e.g. .high-pill). */
[hidden] { display: none !important; }

/* Themed scrollbar (gold thumb on a dark track) for every scrollable
   element (`.screen`, `.history-list`) instead of the browser default —
   global rather than per-selector since anything that scrolls in this UI
   should look the same. Firefox has no equivalent to `-webkit-scrollbar`'s
   shape/padding control, only track+thumb colour via `scrollbar-color`. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dk) rgba(255,255,255,0.06);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 8px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold-dk));
  border-radius: 8px;
  border: 1px solid rgba(2,8,18,0.4);
}
*::-webkit-scrollbar-thumb:hover { background: var(--gold); }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--bg-0);
  color: var(--tx);
  font-family: var(--f-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* Both shots are a press HELD for up to two seconds now, which is exactly
     the gesture a phone reads as "select this text": Android pops the
     selection handles and iOS the callout + magnifier, over the pitch, while
     the player is trying to time a ball. Selection is turned off for the game
     and turned back on for the few places a player might legitimately want it
     (their own name, their score) — see .selectable below. */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Opt back in: inputs must stay editable, and a player copying their own
   score or name is a reasonable thing to want. */
input,
textarea,
.selectable {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* container-type so `cqw` below means "% of #app's own width", not the
   browser viewport's. Below 768px #app IS the viewport width, so cqw and
   vw are the same there — this only matters once the portrait cap below
   makes them diverge. */
#app { position: relative; width: 100%; height: 100vh; height: 100dvh; container-type: inline-size; }

/* On a wide viewport (desktop web), #app filling 100% width has no
   portrait shape of its own — it's just however wide the browser window
   is, so the game reads as a wide/square panel instead of the phone-shaped
   promo it's designed as. Above 768px, cap #app to a phone-like aspect
   (9:19.5, roughly a modern phone) derived from the viewport HEIGHT, not
   a fixed px width, so it stays correctly portrait-shaped at any window
   size instead of just being narrower — a fixed max-width alone would
   still go square (or landscape) on a short, wide browser window. Capped
   at 480px so an unusually tall, narrow desktop window doesn't stretch it
   past what the UI was designed at.

   The letterbox (everything outside #app) gets its own copy of the
   stadium backdrop on `body` — flat black there read as broken/unstyled.
   It's blurred and dimmed so it never competes with the sharp, undimmed
   copy inside #app; those are two independent background layers, not one
   bleeding through, since #app's own opaque game UI sits on top of
   whatever is behind it regardless. */
@media (min-width: 768px) {
  body {
    background: var(--stadium-img) center 42%/cover no-repeat, var(--bg-0);
  }
  body::before {
    content: '';
    position: fixed; inset: 0;
    backdrop-filter: blur(18px);
    background: rgba(2, 8, 18, 0.55);
    z-index: 0;
  }
  #app {
    max-width: min(480px, calc(100vh * 9 / 19.5));
    margin: 0 auto;
    box-shadow: 0 0 80px rgba(0,0,0,0.65);
    z-index: 1;
  }
}

/* ============================ WORLD BACKDROP ============================ */

/* Wide crop for roomier landscape viewports. */
@media (min-width: 820px) {
  :root { --stadium-img: url('../assets/images/stadium-web-3.png'); }
}

.world { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.world-sky {
  position: absolute; inset: 0;
  background:
    var(--stadium-img) center 42%/cover no-repeat,
    radial-gradient(ellipse at 50% 8%, #17335f 0%, var(--bg-1) 48%, var(--bg-0) 100%);
}

/* The photo already contains mountains, floodlights, crowd, flags and turf.
   `has-photo` is set by app.js once the image actually loads, so the
   CSS-drawn stadium below stays as the fallback if it ever fails. */
.world.has-photo .world-mountains,
.world.has-photo .world-stands,
.world.has-photo .world-crowd,
.world.has-photo .world-field,
.world.has-photo .floodlight,
.world.has-photo .world-haze { display: none; }

/* Photo needs a heavier scrim than the drawn version to keep UI readable. */
.world.has-photo .world-vignette {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(2,8,18,0.30) 20%, rgba(2,8,18,0.68) 72%, rgba(2,8,18,0.92) 100%),
    linear-gradient(to bottom, rgba(2,8,18,0.60) 0%, rgba(2,8,18,0.30) 26%, rgba(2,8,18,0.45) 58%, rgba(2,8,18,0.88) 100%);
}

/* Himalayan silhouette (inline SVG) */
.world-mountains {
  position: absolute; left: 0; right: 0; top: 14%;
  width: 100%; height: 24%;
  display: block;
}

/* Upper stand band */
.world-stands {
  position: absolute; left: 0; right: 0; top: 34%; height: 10%;
  background: linear-gradient(to bottom, rgba(4,12,24,0.85), rgba(8,20,38,0.6));
  border-top: 1px solid rgba(140,175,220,0.12);
}

/* Crowd texture */
.world-crowd {
  position: absolute; left: 0; right: 0; top: 40%; height: 16%;
  background:
    repeating-linear-gradient(90deg,
      rgba(217,35,46,0.30) 0 1.6%, rgba(29,78,216,0.28) 1.6% 3%,
      rgba(247,197,21,0.22) 3% 4.4%, rgba(255,255,255,0.14) 4.4% 6%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.35) 0 0.7%, transparent 0.7% 1.6%);
  filter: blur(1.6px);
  opacity: 0.75;
}

/* Outfield */
.world-field {
  position: absolute; left: -12%; right: -12%; bottom: -8%; height: 52%;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,0.035) 0 3.5%, transparent 3.5% 8%),
    radial-gradient(ellipse at 50% 92%, #2f7f35 0%, #1d5c24 48%, #0d2f14 100%);
}

.world-haze {
  position: absolute; left: 0; right: 0; top: 20%; height: 40%;
  background: linear-gradient(to bottom, rgba(140,180,235,0.10), transparent);
  filter: blur(12px);
}

/* Floodlight banks sit above the vignette so they actually read as lights. */
/* Kept below the corner logos so the two never collide. */
.floodlight { position: absolute; top: 11%; width: 78px; z-index: 3; }
.floodlight.fl-1 { left: 4%; }
.floodlight.fl-2 { right: 4%; }
.floodlight i {
  display: block; height: 20px; border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, #fffdf2 0 22%, #ffe9a8 22%, #fff9dd 26%) ,
    #fffdf2;
  box-shadow:
    0 0 18px 6px rgba(255,240,190,0.85),
    0 0 48px 18px rgba(255,228,150,0.45),
    0 0 110px 50px rgba(255,220,130,0.18);
  animation: light-flicker 4.5s ease-in-out infinite;
}
/* Light spill cone below each bank */
.floodlight::after {
  content: ''; position: absolute; top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 240px; height: 260px;
  background: linear-gradient(to bottom, rgba(255,232,160,0.16), transparent 72%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.floodlight.fl-2 i { animation-delay: 1.4s; }

.world-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(2,8,18,0.55) 78%, rgba(2,8,18,0.9) 100%),
    linear-gradient(to bottom, rgba(2,8,18,0.45) 0%, transparent 25%, transparent 55%, rgba(2,8,18,0.75) 100%);
}

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

.screen {
  position: absolute; inset: 0; z-index: 2;
  display: none; flex-direction: column;
  align-items: center;
  /* `justify-content: center` on a SCROLLABLE flex container is a trap: when
     the content is taller than the box, the overflow is split across BOTH
     ends and the part above the start edge cannot be scrolled to. On the
     result screen that silently ate the top padding and 17px of the card —
     the title sat flush against the top edge with no way to reach it.
     `safe center` centres while it fits and falls back to flex-start the
     moment it does not. The plain `center` above it is the fallback for
     engines that do not understand the keyword. */
  justify-content: center;
  justify-content: safe center;
  padding: calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b));
  overflow-y: auto;
}
.screen.active { display: flex; animation: screen-in 0.35s ease both; }

/* ============================ CORNER BRANDING ============================ */

/* The splash carries one mark up here, so it is centred rather than pinned to
   a corner — a single logo hard against the left edge reads as the leftover of
   a pair. #screen-game still uses .corner-bank, which keeps its own corner. */
.corner-brand { position: absolute; top: calc(14px + var(--safe-t)); z-index: 4; }
.corner-npl {
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
}
.corner-bank { right: 14px; }

/* ----------------------------- LOGO PLATES -----------------------------
   Both official logos are transparent PNGs with dark artwork (NPL's wordmark
   is navy, Siddhartha Bank's is black), so they are illegible directly on the
   dark UI. Each sits on a white plate instead — the artwork is never recoloured
   or altered. If the brand kits supply reversed/white variants, drop them in
   and remove `.logo-plate`'s background to place them bare on the dark UI.

   Keep these sizes generous. Undersized marks were the original bug: at a
   27px-wide plate the bank wordmark rendered ~8px tall, which read as a white
   smudge with the black text vanishing into it rather than as a logo. */
.logo-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  /* An inline-flex box does not shrink on its own. The Siddhartha lockup is
     257x67, so at the `xs` height of 27px it renders ~103px wide plus 24px
     of plate padding — wider than its column in the result-screen promo,
     where `overflow: hidden` then chopped the wordmark in half. */
  max-width: 100%;
}
/* Height stays the driver of legibility (see the sizing note below), but the
   mark may scale down when the column is narrower than it wants.
   `object-fit: contain` is what keeps the aspect ratio while it does. */
.logo-plate img {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Sizes are driven by LEGIBILITY of the smallest text inside each mark, not
   by matching the two logos' box heights.
     NPL  (439x227, aspect 1.9) carries a small "NEPAL PREMIER LEAGUE" line.
     SBL  (257x67,  aspect 3.8) is a wide lockup, so the same box height would
                                render its wordmark roughly half the size.
   Below ~26px the bank wordmark and below ~34px the NPL subtitle stop being
   readable, so those are the floors. */
/* The co-branded lockup carries the bank block AND the league mark in one
   image, so it is sized off the smallest thing in it — the NEPAL PREMIER
   LEAGUE line — rather than off the box, like the two single marks below. */
.logo-plate.lockup { margin-top: 10px; }
.logo-plate.lockup.lg img { height: 96px; }
.logo-plate.lockup.sm img { height: 72px; }
.logo-plate.lockup.xs img { height: 48px; }

.logo-plate.npl.lg img { height: 76px; }
.logo-plate.npl.sm img { height: 54px; }
.logo-plate.npl.xs img { height: 38px; }

.logo-plate.sbl.lg img { height: 54px; }
.logo-plate.sbl.sm img { height: 38px; }
.logo-plate.sbl.xs img { height: 27px; }

.logo-plate.lg { padding: 12px 18px; border-radius: 10px; }
.logo-plate.xs { padding: 6px 10px; border-radius: 7px; }

.logo-row-footer {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 8px;
}
/* One plate (the co-branded lockup), so the height follows the mark rather
   than being fixed to balance a pair. */
.logo-row-footer { margin-top: 16px; }
.logo-row-head {
  display: flex; justify-content: center;
  margin: 0 0 14px;
}

/* ============================ SPLASH ============================ */

.splash-content { position: relative; z-index: 3; text-align: center; }

.mega-title { margin: 0 0 14px; display: flex; flex-direction: column; align-items: center; gap: 0; }

/* Gradient-filled 3D title. The outline is built from stacked drop-shadows
   rather than -webkit-text-stroke, which would paint over the gradient fill. */
.mt-line {
  font-family: var(--f-mega);
  font-size: clamp(2.9rem, 15cqw, 5.4rem);
  line-height: 0.88;
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(2px 0 0 #08182c) drop-shadow(-2px 0 0 #08182c)
    drop-shadow(0 2px 0 #08182c) drop-shadow(0 -2px 0 #08182c)
    drop-shadow(0 6px 0 rgba(3,11,22,0.7))
    drop-shadow(0 14px 24px rgba(0,0,0,0.65));
  animation: title-drop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.mt-white { background-image: linear-gradient(180deg, #fff 0%, #fff 46%, #ccd8e7 60%, #8fa4be 100%); }
.mt-gold {
  background-image: linear-gradient(180deg, #fff7d2 0%, var(--gold) 42%, #e0a800 64%, #916a00 100%);
  animation-delay: 0.12s;
}
.mt-sm { font-size: clamp(1.7rem, 8.5cqw, 3rem); animation-delay: 0.24s; }

.loading-text {
  font-family: var(--f-ui); font-size: 0.66rem; letter-spacing: 3px;
  color: var(--tx-3); margin: 26px 0 0;
}
.dots span { animation: dot-blink 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

.loading-bar {
  width: 150px; height: 3px; margin: 9px auto 0;
  background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden;
}
.loading-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--np-red), var(--gold));
  animation: loading-fill 1.9s ease forwards;
}

/* Sits on the bottom edge of the splash, clear of the loading bar, and quiet
   enough that it never competes with the two brand marks above it. */
.dev-credit {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(12px + var(--safe-b, 0px));
  z-index: 4;
  margin: 0;
  text-align: center;
  font-family: var(--f-ui);
  font-size: 0.55rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(220, 230, 245, 0.55);
}
.dev-credit strong { font-weight: 700; color: rgba(235, 242, 252, 0.78); }

/* Same credit inside a card, where it flows after the content instead of
   being pinned to the screen's bottom edge. */
.dev-credit.inline {
  position: static;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.splash-ball {
  position: absolute; top: 30%; left: -50px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ff6b6b, var(--np-red) 55%, var(--np-red-dk) 100%);
  box-shadow: 0 0 16px rgba(217,35,46,0.7);
  animation: fly-across 2.1s ease-in-out forwards;
}

.confetti-static { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.confetti-static .p {
  position: absolute; width: 6px; height: 10px; opacity: 0.85;
  animation: confetti-drift linear infinite;
}

/* ============================ CARDS ============================ */

.card {
  position: relative; z-index: 3;
  width: 100%; max-width: 400px; margin: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: card-in 0.4s ease both;
}

.card-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.card-topbar .spacer { width: 34px; }
/* Only the sound button left in the bar: keep it on the right, where
   space-between had been holding it. */
.card-topbar.solo { justify-content: flex-end; }

.card-title {
  font-family: var(--f-mega);
  font-size: clamp(1.6rem, 7cqw, 2.1rem);
  line-height: 1.02; letter-spacing: 0.5px;
  text-align: center; margin: 0 0 8px; text-transform: uppercase;
}
.card-title.sm { font-size: 1.4rem; }
.card-title.xs { font-size: 1.05rem; letter-spacing: 1px; flex: 1; margin: 0; }
.card-title .gold, .card-title.gold { color: var(--gold); }
.card-title .gold { display: block; font-size: 1.35em; }

.card-sub {
  text-align: center; color: var(--tx-2);
  font-size: 0.92rem; line-height: 1.45; margin: 0 0 20px;
}

/* ============================ FORM ============================ */

.field { margin-bottom: 12px; }

.input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0 14px;
  transition: border-color 0.18s, background 0.18s;
}
.input-wrap:focus-within { border-color: var(--gold); background: rgba(255,255,255,0.09); }
.input-wrap.invalid { border-color: var(--np-red); }
.input-icon { font-size: 0.95rem; opacity: 0.7; }

.input-wrap input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--tx);
  font-family: var(--f-body); font-size: 0.95rem;
  padding: 14px 0;
}
.input-wrap input::placeholder { color: var(--tx-3); }

.field-error {
  display: block; min-height: 16px; margin-top: 4px;
  color: #ff8f8f; font-size: 0.78rem;
}

.field-label {
  display: block; margin-bottom: 8px;
  color: var(--tx-2); font-size: 0.85rem;
}

/* Yes/No account question -- plain .btn-outline until picked, so the
   default state doesn't read as "No" already selected. */
.yn-btn.selected {
  color: #14120a;
  background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 45%, var(--gold-dk) 100%);
  border-color: var(--gold-dk);
}
#bank-account-toggle.invalid .yn-btn { border-color: var(--np-red); }

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

.btn {
  font-family: var(--f-ui); font-weight: 600;
  border: none; border-radius: var(--r-btn);
  cursor: pointer; letter-spacing: 1px;
  transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s;
}
.btn:active { transform: scale(0.96); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-block { display: block; width: 100%; }

.btn-gold {
  padding: 15px;
  font-size: 1.05rem;
  color: #14120a;
  background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 45%, var(--gold-dk) 100%);
  box-shadow: 0 10px 26px rgba(247,197,21,0.32), inset 0 1px 0 rgba(255,255,255,0.5);
  text-transform: uppercase;
}

.btn-outline {
  padding: 12px 10px;
  font-size: 0.82rem;
  color: var(--tx);
  background: rgba(255,255,255,0.05);
  border: 1.5px solid var(--line);
  text-transform: uppercase;
}

/* Real hover only -- a touch tap is not a mouseover, but a phone browser
   applies :hover anyway on tap and leaves it "stuck" until something else
   is tapped. Without this guard, a Yes/No button (or any outline/gold
   button) reads as highlighted in the desktop hover colour right after a
   tap, instead of showing its actual selected state. */
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover { box-shadow: 0 12px 32px rgba(247,197,21,0.45), inset 0 1px 0 rgba(255,255,255,0.6); }
  .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--line-gold); }
}
.btn-outline.sm-text { font-size: 0.68rem; }

.btn-share {
  padding: 12px 10px; font-size: 0.85rem; color: #fff;
  background: linear-gradient(180deg, #34c759, #1f9c42);
  box-shadow: 0 8px 20px rgba(52,199,89,0.3);
  text-transform: uppercase; flex: 1;
}

.btn-link {
  display: block; width: 100%; margin-top: 10px;
  background: none; color: var(--tx-3);
  font-size: 0.78rem; padding: 8px;
  text-decoration: underline; letter-spacing: 0;
}

.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.btn-row { display: flex; gap: 8px; margin-top: 14px; }
.btn-row .btn-outline { flex: 1; }
.btn-stack { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 14px; }
.mt { margin-top: 14px; }

.icon-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  border: 1.5px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: #fff; font-size: 0.95rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn.ghost { border-color: rgba(255,255,255,0.16); background: rgba(2,8,18,0.5); }
.icon-btn:active { transform: scale(0.94); }

.share-ic {
  width: 15px; height: 15px;
  vertical-align: -2px; margin-right: 5px;
  fill: currentColor; stroke: currentColor; stroke-width: 1.6;
}

/* ============================ DASHBOARD ============================ */

.welcome-line {
  font-family: var(--f-ui); font-weight: 500;
  font-size: 0.9rem; letter-spacing: 2.5px;
  color: var(--tx-2); text-align: center; margin: 2px 0 0;
}
.welcome-name {
  font-family: var(--f-mega); font-size: 2.1rem;
  text-align: center; margin: 2px 0 18px;
  letter-spacing: 0.5px; text-transform: uppercase;
}

/* ============================ TILES ============================ */

.tile-row { display: flex; gap: 9px; margin-bottom: 9px; }
.tile-row > .tile { flex: 1; min-width: 0; }

.tile {
  position: relative;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 11px 10px 12px;
  text-align: center;
}
.tile.wide { margin-bottom: 9px; }
.tile.left { text-align: left; }

.tile-label {
  display: block;
  font-family: var(--f-ui); font-weight: 500;
  font-size: 0.6rem; letter-spacing: 1.6px;
  color: var(--tx-3); text-transform: uppercase;
}
.tile-value {
  display: block;
  font-family: var(--f-mega); font-size: 1.9rem;
  line-height: 1.05; margin-top: 2px;
}
.tile-value.gold { color: var(--gold); }
.tile-value.md { font-size: 1.2rem; letter-spacing: 0.5px; }
.tile-value.sm { font-size: 1.35rem; }

.high-pill {
  display: inline-block; margin-top: 5px;
  background: var(--np-red); color: #fff;
  font-family: var(--f-ui); font-weight: 600;
  font-size: 0.55rem; letter-spacing: 0.8px;
  padding: 3px 7px; border-radius: 4px;
  box-shadow: 0 0 14px rgba(217,35,46,0.6);
  animation: pill-pulse 1.4s ease-in-out infinite;
}

/* ============================ HOW TO PLAY ============================ */

.steps { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.step {
  display: flex; align-items: center; gap: 11px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 11px 13px;
}
/* Redemption steps carry a title and a sentence of detail, so they stack
   instead of centring a single line, and the numbers align to the title
   rather than to the middle of the block. */
.step.rstep { align-items: flex-start; }
.step.rstep .step-num { margin-top: 1px; }
.step.rstep .step-text { display: flex; flex-direction: column; gap: 3px; }
.step-title { font-family: var(--f-ui); font-weight: 600; font-size: 0.86rem; color: var(--tx); }
.step-desc { font-size: 0.78rem; line-height: 1.45; color: var(--tx-3); }

/* The "your points are safe" warning above Journey B. Loud enough to be read
   before the steps, because clearing app data at the wrong moment is the one
   thing that actually loses a player their points. */
.note-callout {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border-radius: var(--r-tile);
  background: rgba(247, 197, 21, 0.10);
  border: 1px solid rgba(247, 197, 21, 0.35);
  font-size: 0.78rem; line-height: 1.5; color: var(--tx-2);
}
.note-callout strong { color: var(--gold); }

.step-num {
  width: 25px; height: 25px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: var(--f-ui); font-weight: 600; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}
.step-art { font-size: 1.3rem; width: 40px; flex-shrink: 0; display: flex; gap: 4px; }
.step-text { font-size: 0.85rem; color: var(--tx-2); line-height: 1.3; }

.run-chip {
  width: 20px; height: 20px; border-radius: 4px;
  font-family: var(--f-mega); font-size: 0.8rem; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.run-chip.blue { background: var(--np-blue); }
.run-chip.red { background: var(--np-red); }

.key-hint { text-align: center; color: var(--tx-3); font-size: 0.75rem; margin: 4px 0 14px; }
kbd {
  background: rgba(255,255,255,0.12); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 7px; font-family: var(--f-ui); font-size: 0.72rem;
}

/* ============================ MY SCORE ============================ */

.stat-rows { display: flex; flex-direction: column; }
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem; color: var(--tx-2);
}
.stat-row:last-child { border-bottom: none; }
.stat-row b { font-family: var(--f-mega); font-size: 1.2rem; color: var(--gold); font-weight: 400; }

.history-list {
  margin: 12px 0 16px; max-height: 132px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.history-item {
  display: flex; justify-content: space-between;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 11px; font-size: 0.78rem;
  color: var(--tx-2);
}
.history-item .h-points { color: var(--gold); font-weight: 700; }
.history-empty { text-align: center; color: var(--tx-3); font-size: 0.82rem; padding: 16px 0; }

/* ============================ RESULT / PROMO ============================ */

/* Promotional banner (result screen footer) */
.promo-banner {
  position: relative; overflow: hidden;
  margin-top: 4px;
  display: flex; align-items: stretch; gap: 12px;
  border-radius: var(--r-tile);
  border: 1px solid rgba(120,170,235,0.28);
  background: linear-gradient(120deg, #0d2f6b 0%, #123f86 38%, #0a2450 100%);
  padding: 14px 13px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}
.pb-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(247,197,21,0.18), transparent 42%),
    radial-gradient(circle at 88% 100%, rgba(217,35,46,0.22), transparent 46%);
}
.pb-col {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.pb-divider { width: 1px; background: rgba(255,255,255,0.16); flex-shrink: 0; }

.pb-kicker {
  margin: 0;
  font-family: var(--f-ui); font-weight: 500;
  font-size: 0.52rem; letter-spacing: 1.2px;
  color: rgba(216,226,238,0.8); text-transform: uppercase;
}
.pb-title {
  margin: 0;
  font-family: var(--f-mega); font-weight: 400;
  font-size: 0.98rem; line-height: 1.05;
  letter-spacing: 0.5px; color: #fff;
}
/* The bank's own strapline, set under its mark. Deliberately quieter than
   the kicker above the logo: it belongs to the logo, not to the layout. */
.pb-slogan {
  margin: -2px 0 0;
  font-family: var(--f-slogan); font-weight: 500; font-style: italic;
  /* Helvetica/Arial run smaller than Oswald at the same size, so the slogan
     is nudged up to keep the line it had under the logo. */
  font-size: 0.56rem; letter-spacing: 0.3px;
  color: rgba(216,226,238,0.7);
}

.pb-cta {
  margin-top: auto;
  font-family: var(--f-ui); font-weight: 600;
  font-size: 0.55rem; letter-spacing: 0.8px;
  color: var(--gold); text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(247,197,21,0.45);
  padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .pb-cta:hover { color: var(--gold-lt); border-bottom-color: var(--gold-lt); }
}

/* ---------------------- BANK-ACCOUNT PROMPT ---------------------- */
/* Only ever shown to a player who registered as having no account; see
   maybeAskBankAccount() in js/app.js. */
.ba-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(2, 8, 18, 0.88);
  backdrop-filter: blur(6px);
}
.ba-modal.show { display: flex; }
.ba-card {
  width: 100%; max-width: 380px;
  background: var(--card);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-card);
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: ba-pop 220ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.ba-icon { font-size: 2rem; line-height: 1; display: block; margin-bottom: 8px; }
.ba-title {
  font-family: var(--f-ui); font-weight: 700; font-size: 1.02rem;
  margin: 0 0 8px; color: var(--tx);
}
.ba-sub {
  font-size: 0.82rem; line-height: 1.5; color: var(--tx-3);
  margin: 0 0 18px;
}
@keyframes ba-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-card { animation: none; }
}

/* ============================ SHARE ============================ */

.share-card {
  background: linear-gradient(160deg, rgba(29,78,216,0.22), rgba(9,25,45,0.5));
  border: 1px solid var(--line-gold);
  border-radius: var(--r-tile);
  padding: 18px 16px;
  text-align: left;
}
.share-lead { font-size: 1rem; line-height: 1.4; margin: 0 0 10px; color: var(--tx); }
.share-lead b { color: var(--gold); font-family: var(--f-mega); font-size: 1.35rem; font-weight: 400; }
.share-q { font-size: 0.92rem; color: var(--tx-2); margin: 0 0 14px; }
.share-by { font-size: 0.78rem; color: var(--tx-3); line-height: 1.5; margin: 0 0 12px; }
.share-by b { color: var(--gold); font-size: 0.9rem; }
.share-tags { font-size: 0.7rem; color: var(--tx-3); line-height: 1.6; margin: 0; }

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

.powered-mini {
  text-align: center; font-size: 0.62rem; letter-spacing: 1.5px;
  color: var(--tx-3); margin: 18px 0 6px; text-transform: uppercase;
}
.center { text-align: center; }

.toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(16px);
  background: rgba(2,8,18,0.96);
  border: 1px solid var(--line-gold);
  padding: 11px 18px; border-radius: 10px;
  font-size: 0.85rem; max-width: 88%; text-align: center;
  opacity: 0; pointer-events: none; z-index: 999;
  transition: opacity 0.22s, transform 0.22s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.tc-agree {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.8rem; color: var(--tx-2); cursor: pointer;
}
.tc-agree input { margin-top: 2px; flex-shrink: 0; }
.tc-link {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--gold); text-decoration: underline; cursor: pointer;
  font-size: inherit; font-family: inherit;
}

/* The terms are a full screen now, not a dialog, so the body just flows in
   the card and the screen scrolls. */
.tc-body { font-size: 0.82rem; color: var(--tx-2); line-height: 1.55; }
.tc-body p { margin: 0 0 10px; }
.tc-intro {
  font-family: var(--f-ui); font-weight: 600; font-size: 0.8rem;
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 14px;
}
.tc-h {
  font-family: var(--f-ui); font-weight: 600; font-size: 0.82rem;
  color: var(--tx); text-transform: uppercase; letter-spacing: 0.4px;
  margin: 18px 0 7px;
}
.tc-h:first-of-type { margin-top: 6px; }

@media (min-width: 768px) {
  .card { max-width: 440px; padding: 28px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================ MODE PICKER ============================
   Batting vs bowling. Two big tap targets rather than a segmented
   control: this is the first real choice a player makes, and on a phone
   a 44px-plus target beats a neat toggle. */

/* ============================ TEAM PICKER ============================
   Crests are a mix of transparent PNGs and solid-background JPEGs. Every one
   is drawn inside an identical round chip so the two formats look the same:
   the JPEGs' own backgrounds fill the circle edge to edge, and the PNGs show
   the chip behind them. All eight source files are 160x160, so a 1:1 chip
   neither crops nor letterboxes either kind. */
.team-crest {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;          /* 1:1 into 1:1 — no crop, just fills the chip */
  background: #f2f5fa;
  border: 1.5px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.team-crest.sm { width: 34px; height: 34px; border-width: 1px; }

/* `1fr` is shorthand for `minmax(auto, 1fr)`, and that auto MINIMUM is the
   trap: a track can never shrink below its content's min-content width, so
   the longest franchise name ("Sudurpaschim Royals", 157px min-content)
   forced its column open and the grid overflowed the card. The computed
   tracks gave it away — `142.516px 156.625px` from a supposedly equal
   `1fr 1fr`. minmax(0, 1fr) drops the floor to zero so both tracks stay
   equal and shrinkable. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 4px 0 16px;
}
/* The single-column fallback that used to live here is gone: with the crest
   stacked above the name, two columns read cleanly even at 280px. */

/* Crest ABOVE the name, not beside it. Side by side, the crest ate ~64px of
   a ~190px card and left the name barely 100px, so two-word franchise names
   wrapped to four cramped lines. Stacking gives the name the full card width
   and it fits on one or two comfortable lines instead. */
.team-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 13px 9px 12px;
  text-align: center;
  cursor: pointer;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(18,42,74,0.92), rgba(9,24,46,0.94));
  color: #fff;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.team-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(0,0,0,0.42);
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 10px 24px rgba(0,0,0,0.42);
  }
}
.team-card:active { transform: translateY(0); }
.team-card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(247,197,21,0.35); }

.team-card .tc-name {
  font-family: var(--f-ui); font-weight: 600;
  font-size: 0.72rem; line-height: 1.25;
  letter-spacing: 0.3px;
  text-align: center;
  min-width: 0;
  /* `break-word`, NOT `anywhere`. `anywhere` also shrinks the min-content
     size, so the browser broke words eagerly even when there was room —
     "Kathmandu Gurkhas" came out as "Kath / man / du / Gur / khas". This
     only breaks a word that genuinely cannot fit. */
  overflow-wrap: break-word;
}

/* ---- fixture strip: YOUR SIDE vs DRAWN OPPONENT ---- */
/* Shown only when the innings ended early, e.g. "Out on ball 3 of 6." */
.result-note {
  text-align: center;
  font-family: var(--f-ui); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.6px;
  color: #ff8f8f;
  margin: -4px 0 12px;
}

.matchup[hidden] { display: none; }
.matchup {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid var(--line-gold);
  background: linear-gradient(145deg, rgba(18,42,74,0.9), rgba(9,24,46,0.92));
}
.mu-side {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
}
.mu-side:last-of-type { flex-direction: row-reverse; text-align: right; }
.mu-name {
  font-family: var(--f-ui); font-weight: 600;
  font-size: 0.68rem; line-height: 1.2; color: var(--tx-2);
  min-width: 0;
}
.mu-vs {
  font-family: var(--f-mega); font-size: 1rem;
  color: var(--gold); letter-spacing: 1px; flex-shrink: 0;
}

.card-wide { max-width: 430px; }

@media (min-width: 768px) {
  .card-wide { max-width: 520px; }
  .team-crest { width: 62px; height: 62px; }
  .team-card .tc-name { font-size: 0.8rem; }
}

.mode-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  margin-bottom: 12px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(18,42,74,0.92), rgba(9,24,46,0.94));
  color: #fff;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.mode-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 10px 26px rgba(0,0,0,0.42);
}
@media (hover: hover) and (pointer: fine) {
  .mode-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 10px 26px rgba(0,0,0,0.42);
  }
}
.mode-card:active { transform: translateY(0); }

.mode-emoji { font-size: 2rem; line-height: 1; flex-shrink: 0; }
/* The bowling card's inline cricket-ball SVG. display:block lives here, not as
   a style attribute, so the page's style-src 'self' CSP doesn't block it. */
.mode-emoji .ball-icon { display: block; }
.mode-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mode-name {
  font-family: var(--f-mega); font-size: 1.35rem;
  letter-spacing: 0.5px; color: var(--gold);
}
.mode-desc {
  font-family: var(--f-ui); font-size: 0.76rem;
  line-height: 1.35; color: var(--tx-2);
}
.mode-note {
  margin: 4px 0 14px;
  font-family: var(--f-ui); font-size: 0.7rem;
  line-height: 1.4; color: var(--tx-3); text-align: center;
}

/* Mode tag on a My Score history row. */
.h-mode {
  display: inline-block;
  margin-right: 7px; padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--f-ui); font-weight: 700;
  font-size: 0.58rem; letter-spacing: 0.8px;
  vertical-align: 1px;
}
.h-mode.bat  { background: rgba(79,212,99,0.18); color: #7fe08d; }
.h-mode.bowl { background: rgba(143,211,255,0.18); color: #8fd3ff; }

/* ---- Promo banner on narrow screens ----
   The two columns stay side by side; it was stacking below 430px, which is
   most phones, so the "banner" was really a tall block almost everywhere.
   What actually did not fit was the bank's 3.8:1 lockup at a 27px height
   next to a full-URL link — so those shrink rather than the layout folding.
   Both CTAs sit on one line each (the labels are short in the markup now)
   and are pinned to the bottom of their column, so the two read as a pair. */
@media (max-width: 430px) {
  .promo-banner { gap: 10px; padding: 12px 11px; }
  .pb-col { gap: 5px; }
  .pb-title { font-size: 0.84rem; }
  .pb-kicker { font-size: 0.48rem; letter-spacing: 0.9px; }
  .pb-slogan { font-size: 0.52rem; letter-spacing: 0.2px; }
  .pb-cta { font-size: 0.5rem; letter-spacing: 0.4px; }
  .logo-plate.sbl.xs img { height: 22px; }
  .logo-plate.xs { padding: 5px 8px; }
}

/* Below ~330px there is genuinely no room for two of anything. */
@media (max-width: 330px) {
  .promo-banner { flex-direction: column; gap: 10px; }
  .pb-divider { width: auto; height: 1px; }
  .pb-cta { margin-top: 2px; }
}