/* ============================================================
   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;

  /* 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.jpg');
  /* 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.
     stadium.jpg has NO stumps baked in, which is what lets the stumps exist
     as a real layer the batsman stands in front of (and that can topple). */
  --pitch-img: url('../assets/images/stadium.jpg');
}

* { 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;
}

/* 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%20web.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 .np-flag,
.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; }

/* Nepal flag accents — double pennant */
.np-flag {
  position: absolute; top: 22%; z-index: 2;
  width: 52px; height: 66px;
  background: var(--np-red);
  border: 2px solid var(--np-blue);
  clip-path: polygon(0 0, 100% 26%, 22% 50%, 100% 76%, 0 100%);
  opacity: 0.85;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  animation: flag-wave 5s ease-in-out infinite;
}
.np-flag-left { left: 4%; }
.np-flag-right { right: 4%; transform: scaleX(-1); animation-delay: 1.2s; }

.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 ============================ */

.corner-brand { position: absolute; top: calc(14px + var(--safe-t)); z-index: 4; }
.corner-npl { left: 14px; 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. */
.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;
}
/* Fixed plate height so the two marks sit as a balanced pair despite their
   very different aspect ratios; each logo centres inside its own plate. */
.logo-row-footer .logo-plate { height: 50px; }

/* ============================ 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; }

.powered-label {
  font-family: var(--f-ui); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 3px; color: var(--tx-2); margin: 2px 0 8px;
}

.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;
}

.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; }

.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-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 {
  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;
}
.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); }

.edit-btn {
  background: none; border: none; color: var(--gold);
  font-size: 0.85rem; cursor: pointer; padding: 2px 6px;
  vertical-align: middle;
}

.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;
}
.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;
}
.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;
}
.pb-cta:hover { color: var(--gold-lt); border-bottom-color: var(--gold-lt); }

/* ============================ 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); }

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

@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:hover,
.team-card:focus-visible {
  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 {
  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:hover,
.mode-card:focus-visible {
  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; }
.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 ----
   Two columns each holding a kicker, a title/logo and a CTA is too cramped
   below ~430px; the bank column in particular has nowhere to put a 3.8:1
   lockup. Stack instead of squeezing. */
@media (max-width: 430px) {
  .promo-banner { flex-direction: column; gap: 10px; }
  .pb-divider { width: auto; height: 1px; }
  .pb-cta { margin-top: 2px; }
}