/*
  SmashDrop — device mockups
  ------------------------------------------------------------------
  The app's screens, rebuilt in HTML. Not screenshots: an image of a
  phone screen is a 300KB request that goes soft on a retina display
  and can never be edited, and these have to survive both.

  SCALE. `.phone` sets `--pw` (its own width) and derives its font-size
  from it, so every measurement inside is authored in `em` and the whole
  device scales from that one value. 1em = --pw / 26, i.e. 10px at the
  260px default — so an `em` value is just "the px I want, over ten".
*/

.phone {
  --pw: 260px;
  position: relative;
  width: var(--pw);
  font-size: calc(var(--pw) / 26);
  flex: none;
}

@media (min-width: 480px) { .phone { --pw: 288px; } }
@media (min-width: 1000px) { .phone { --pw: 306px; } }

.phone--sm { --pw: 240px; }
@media (min-width: 1000px) { .phone--sm { --pw: 268px; } }

/* the body: a dark bezel with the app's own near-black inside it */
.phone__body {
  position: relative;
  border-radius: 4.4em;
  padding: 1.1em;
  background: linear-gradient(160deg, #1c2b24, #060d0a 40%, #14201b);
  box-shadow:
    0 0 0 0.1em rgba(255, 255, 255, 0.08),
    0 3em 6em rgba(11, 26, 19, 0.28),
    0 0.6em 2em rgba(11, 26, 19, 0.16);
}

.phone__screen {
  position: relative;
  aspect-ratio: 260 / 552;
  border-radius: 3.5em;
  overflow: hidden;
  background: #04130D;
  display: flex;
  flex-direction: column;
  color: #EAF7F0;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* dynamic island */
.phone__island {
  position: absolute;
  top: 0.9em;
  left: 50%;
  transform: translateX(-50%);
  width: 8.4em;
  height: 2.4em;
  border-radius: 1.2em;
  background: #000;
  z-index: 20;
}

/* a soft emerald bloom behind the whole screen, as in the app */
.phone__screen::before {
  content: '';
  position: absolute;
  inset: -20% -30% auto;
  height: 55%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0, 232, 143, 0.22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- shared screen furniture ---------- */
.sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4em 2em 0.5em;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0;
  position: relative;
  z-index: 10;
}

.sb__icons { display: flex; align-items: center; gap: 0.4em; opacity: 0.9; }
.sb__icons i {
  display: block;
  width: 1.4em;
  height: 0.9em;
  border-radius: 0.15em;
  background: currentColor;
}
.sb__icons i:nth-child(2) { width: 1.1em; }
.sb__icons i:nth-child(3) { width: 1.8em; border-radius: 0.25em; opacity: 0.75; }

.scr {
  position: relative;
  z-index: 5;
  flex: 1;
  min-height: 0;
  padding: 0.6em 1.4em 0;
  overflow: hidden;
}

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.6em 0 1em;
}

.appbar__title { font-size: 1.9em; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.appbar__sub { font-size: 1.05em; color: #8FAA9C; font-weight: 500; margin-top: 0.15em; }

.iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: 1.2em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.8);
  color: #EAF7F0;
  flex: none;
}

.iconbtn svg { width: 1.7em; height: 1.7em; }

.iconbtn b {
  position: absolute;
  top: -0.35em;
  right: -0.35em;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  border-radius: 0.8em;
  background: #FF6B35;
  color: #fff;
  font-size: 0.9em;
  font-weight: 800;
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

/* avatars */
.av {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #00190E;
  flex: none;
  /* 3.4 parent-em ÷ 1.1 own font-size — see the note above */
  width: 3.09em;
  height: 3.09em;
  font-size: 1.1em;
  background: linear-gradient(140deg, #2BF0A0, #00B87D);
}

.av--b { background: linear-gradient(140deg, #FFE066, #FF9F1C); }
.av--c { background: linear-gradient(140deg, #C79AF8, #8B5CF6); color: #160726; }
.av--d { background: linear-gradient(140deg, #7CC0FF, #1B4FBF); color: #F2F8F4; }
.av--e { background: linear-gradient(140deg, #FF9B7A, #FF4D4D); color: #2A0B06; }
.av--lg { width: 3.47em; height: 3.47em; font-size: 1.5em; } /* 5.2 parent-em */

/* rank badge, on-media variant (dark scrim at every rung — see CLAUDE.md) */
.rankbadge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.85em 0.35em 0.6em;
  border-radius: 1em;
  background: rgba(0, 12, 7, 0.55);
  font-size: 0.95em;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.rankbadge i { width: 0.7em; height: 0.7em; border-radius: 50%; background: currentColor; flex: none; }
.rank-rookie { color: #9FC7B4; }
.rank-aspirant { color: #7CC0FF; }
.rank-shot { color: #00E88F; }
.rank-general { color: #FFD84D; }
.rank-master { color: #FF9F5A; }

/* pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.85em;
  border-radius: 1em;
  border: 0.1em solid #1E4633;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.95em;
  font-weight: 700;
  color: #8FAA9C;
  white-space: nowrap;
}

.pill--on { border-color: rgba(0, 232, 143, 0.34); background: rgba(0, 232, 143, 0.14); color: #00E88F; }
.pill--gold { border-color: rgba(255, 216, 77, 0.34); background: rgba(255, 216, 77, 0.14); color: #FFD84D; }
.pill--live { border-color: rgba(255, 107, 53, 0.4); background: rgba(255, 107, 53, 0.16); color: #FF6B35; }
.pill--haven { border-color: rgba(180, 124, 245, 0.4); background: rgba(180, 124, 245, 0.16); color: #C79AF8; }

/* generic surface card inside a screen */
.pcard {
  border-radius: 1.8em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.7);
  padding: 1.4em;
}

.pcard + .pcard { margin-top: 1em; }

/* segmented icon rail — Play's own navigation */
.rail {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em;
  border-radius: 1.8em;
  border: 0.1em solid #1E4633;
  background: rgba(10, 31, 22, 0.9);
  margin-bottom: 1.2em;
}

.rail__item {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border-radius: 1.4em;
  color: #8FAA9C;
  flex: none;
}

.rail__item svg { width: 1.6em; height: 1.6em; }

.rail__item--on {
  flex: 1;
  width: auto;
  gap: 0.5em;
  grid-auto-flow: column;
  padding-inline: 1em;
  background: linear-gradient(135deg, #2BF0A0, #00C97F);
  color: #00190E;
  font-size: 1.05em;
  font-weight: 800;
}

/* quiet sub-chooser: bare text with a sliding rule */
.quiet {
  display: flex;
  gap: 1.6em;
  border-bottom: 0.1em solid #1E4633;
  margin-bottom: 1.2em;
}

.quiet span {
  position: relative;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: 700;
  color: #5F7A6C;
}

.quiet span.on { color: #EAF7F0; }
.quiet span.on::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.1em;
  height: 0.2em;
  border-radius: 0.1em;
  background: #00E88F;
}

/* floating tab bar */
.tabbar {
  position: absolute;
  left: 1.4em;
  right: 1.4em;
  bottom: 1.2em;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9em 1.4em;
  border-radius: 2em;
  border: 0.1em solid rgba(44, 96, 70, 0.9);
  background: rgba(6, 24, 16, 0.92);
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
  box-shadow: 0 1.2em 2.4em rgba(0, 0, 0, 0.55);
}

.tabbar a {
  display: grid;
  justify-items: center;
  gap: 0.25em;
  color: #5F7A6C;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0;
}

.tabbar a svg { width: 1.9em; height: 1.9em; }
.tabbar a.on { color: #00E88F; }

/* fade the content out under the floating bar */
.scr::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7em;
  background: linear-gradient(180deg, transparent, #04130D 78%);
  pointer-events: none;
  z-index: 11;
}

.scr--nofade::after { display: none; }

/* ---------- HOME ---------- */
/* the flip-card hero, front face: rank gradient, record left, points right */
.hero-card {
  position: relative;
  border-radius: 2.2em;
  padding: 1.3em;
  overflow: hidden;
  color: #00190E;
  background: linear-gradient(135deg, #FFE066 0%, #FF9F1C 100%);
}

.hero-card--general { background: linear-gradient(135deg, #FFE98A, #FFC53D); }
.hero-card--shot { background: linear-gradient(135deg, #3BF5AC, #00AE78); }

/* the rank motion layer — steep streaks for Smash Master */
.hero-card__motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.32;
}

.hero-card__motion i {
  position: absolute;
  width: 0.25em;
  height: 3.5em;
  border-radius: 0.2em;
  background: linear-gradient(180deg, transparent, #00190E);
  transform: rotate(28deg);
  animation: streak 2.6s linear infinite;
}

@keyframes streak {
  0% { transform: translate3d(0, -6em, 0) rotate(28deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate3d(6em, 14em, 0) rotate(28deg); opacity: 0; }
}

.hero-card__top { position: relative; display: flex; align-items: center; gap: 1em; }
.hero-card__name { display: block; font-size: 1.5em; font-weight: 800; letter-spacing: -0.035em; }
.hero-card__where { display: block; font-size: 0.95em; font-weight: 600; opacity: 0.72; }

.hero-card__row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1em;
  margin-top: 1.2em;
}

.hero-card__record { display: flex; gap: 1.3em; min-width: 0; }
.hero-card__stat { min-width: 0; }
.hero-card__stat b { display: block; font-size: 1.7em; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.hero-card__stat span { display: block; font-size: 0.8em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.62; margin-top: 0.3em; }

/* no backing, no colour of its own — see the note in CLAUDE.md */
.hero-card__points { margin-left: auto; text-align: right; flex-shrink: 0; }
.hero-card__points b { display: block; font-size: 2.1em; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.hero-card__points span { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.8em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.66; margin-top: 0.3em; }
.hero-card__points span::before { content: ''; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }

.hero-card__flip {
  position: absolute;
  top: 1.4em;
  right: 1.4em;
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: rgba(0, 25, 14, 0.16);
}

.hero-card__flip svg { width: 1.3em; height: 1.3em; }

/* three action tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; margin-top: 0.9em; }

.tile {
  display: grid;
  gap: 0.5em;
  padding: 0.9em 0.7em;
  border-radius: 1.6em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.75);
  text-align: left;
}

.tile svg { width: 1.9em; height: 1.9em; color: #00E88F; }
.tile b { font-size: 1em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.tile--gold svg { color: #FFD84D; }
.tile--haven svg { color: #C79AF8; }

/* the gear band — court gradient, kit drifting behind the words */
.gearband {
  position: relative;
  margin-top: 0.9em;
  border-radius: 1.8em;
  padding: 1.2em 1.3em;
  overflow: hidden;
  color: #00190E;
  background: linear-gradient(120deg, #2BF0A0, #00B87D 60%, #00A9C4);
}

.gearband__drift { position: absolute; inset: 0; pointer-events: none; opacity: 0.26; }
.gearband__drift svg { position: absolute; width: 2.6em; height: 2.6em; animation: drift-across 9s linear infinite; }

@keyframes drift-across {
  0% { transform: translateX(-4em) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(24em) rotate(48deg); opacity: 0; }
}

.gearband b { position: relative; display: block; font-size: 1.35em; font-weight: 800; letter-spacing: -0.035em; }
.gearband span { position: relative; display: block; font-size: 1em; font-weight: 600; opacity: 0.72; margin-top: 0.2em; }

/* spotlight banner */
.spot {
  position: relative;
  margin-top: 0.9em;
  border-radius: 1.8em;
  overflow: hidden;
  padding: 1.2em 1.3em;
  min-height: 7.6em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(135deg, #17392A, #0A1F16);
  border: 0.1em solid #1E4633;
}

.spot__glow { position: absolute; inset: 0; background: radial-gradient(90% 130% at 85% 0%, rgba(255, 216, 77, 0.28), transparent 62%); }
.spot b { position: relative; display: block; font-size: 1.2em; font-weight: 800; letter-spacing: -0.03em; }
.spot span { position: relative; display: block; font-size: 0.95em; color: #8FAA9C; margin-top: 0.2em; }
.spot .pill { position: relative; display: inline-flex; align-self: flex-start; margin-bottom: 0.7em; }

/* ---------- MATCH / SCORING ---------- */
.score-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  margin-bottom: 1.2em;
}

.score-board {
  border-radius: 2.2em;
  padding: 1.4em 1.1em;
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(255, 107, 53, 0.16), transparent 62%),
    rgba(16, 44, 32, 0.8);
  border: 0.1em solid rgba(255, 107, 53, 0.28);
}

.score-side {
  display: flex;
  align-items: center;
  gap: 0.8em;
}

.score-side + .score-side { margin-top: 1.2em; padding-top: 1.2em; border-top: 0.1em solid #1E4633; }
.score-side__who { min-width: 0; flex: 1 1 auto; }
.score-side__name { display: block; font-size: 1.1em; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-side__meta { display: block; font-size: 0.85em; color: #8FAA9C; margin-top: 0.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.score-side__games { display: flex; gap: 0.35em; flex: none; }

.score-side__games b {
  display: grid;
  place-items: center;
  /* 2.3 / 2.6 parent-em, divided by this element's own 1.05em — the same
     compounding trap the avatars fell into. */
  width: 2.19em;
  height: 2.48em;
  border-radius: 0.75em;
  background: rgba(255, 255, 255, 0.05);
  border: 0.1em solid #1E4633;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.score-side__games b.won { background: rgba(0, 232, 143, 0.16); border-color: rgba(0, 232, 143, 0.4); color: #00E88F; }

.score-note {
  margin-top: 1.2em;
  padding: 1em 1.2em;
  border-radius: 1.4em;
  border: 0.1em solid rgba(255, 216, 77, 0.3);
  background: rgba(255, 216, 77, 0.1);
  font-size: 0.95em;
  color: #FFD84D;
  line-height: 1.45;
  font-weight: 600;
}

.pbtn {
  display: grid;
  place-items: center;
  height: 3.8em;
  border-radius: 1.4em;
  font-size: 1.1em;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 1em;
  background: linear-gradient(135deg, #2BF0A0, #00C97F);
  color: #00190E;
}

.pbtn--ghost { background: none; border: 0.1em solid #2C6046; color: #EAF7F0; }

/* skills up for review, called out before the match */
.watchlist { margin-top: 1.2em; }
.watchlist__head { font-size: 0.9em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #5F7A6C; margin-bottom: 0.7em; }
.watchlist__row {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.9em 1.1em;
  border-radius: 1.3em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.6);
  font-size: 1.05em;
  font-weight: 700;
}
.watchlist__row + .watchlist__row { margin-top: 0.6em; }
.watchlist__row svg { width: 1.5em; height: 1.5em; color: #FFD84D; flex: none; }
.watchlist__row span { margin-left: auto; font-size: 0.85em; font-weight: 700; color: #8FAA9C; }

/* ---------- LEADERBOARD ---------- */
.lb-row {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.9em 1.1em;
  border-radius: 1.5em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.6);
}

.lb-row + .lb-row { margin-top: 0.6em; }

.lb-row--me { border-color: rgba(0, 232, 143, 0.45); background: rgba(0, 232, 143, 0.1); }

.lb-row__pos {
  width: 1.91em; /* 2.2 parent-em */
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #5F7A6C;
  flex: none;
  text-align: center;
}

.lb-row--1 .lb-row__pos { color: #FFC53D; }
.lb-row--2 .lb-row__pos { color: #C9D8D0; }
.lb-row--3 .lb-row__pos { color: #E08A4B; }

.lb-row__who { min-width: 0; flex: 1; }
.lb-row__name { display: block; font-size: 1.1em; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row__meta { display: flex; align-items: center; gap: 0.5em; margin-top: 0.25em; font-size: 0.85em; color: #8FAA9C; }
.lb-row__pts { text-align: right; flex: none; }
.lb-row__pts b { display: block; font-size: 1.2em; font-weight: 800; letter-spacing: -0.035em; color: #00E88F; }
.lb-row__pts span { display: block; font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5F7A6C; }

.scopebar { display: flex; gap: 0.5em; margin-bottom: 1em; overflow: hidden; }

/* ---------- TOURNAMENT ---------- */
.tcover {
  position: relative;
  border-radius: 2em;
  padding: 1.4em;
  min-height: 10em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: linear-gradient(135deg, #00E88F, #00A9C4);
  color: #00190E;
}

.tcover__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 25, 14, 0.28)); }
.tcover b { position: relative; font-size: 1.5em; font-weight: 800; letter-spacing: -0.04em; line-height: 1.12; }
.tcover span { position: relative; font-size: 0.98em; font-weight: 600; opacity: 0.76; margin-top: 0.25em; }
.tcover .pill { position: relative; align-self: flex-start; margin-bottom: 0.8em; background: rgba(0, 25, 14, 0.2); border-color: transparent; color: #00190E; }

.bracket { display: flex; gap: 0.7em; margin-top: 1.2em; }
.bracket__col { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 0.6em; }
.bracket__head { font-size: 0.8em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #5F7A6C; margin-bottom: 0.2em; text-align: center; }

.tie {
  border-radius: 1em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.75);
  overflow: hidden;
}

.tie div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.55em 0.7em;
  font-size: 0.92em;
  font-weight: 700;
  color: #8FAA9C;
}

.tie div + div { border-top: 0.1em solid #1E4633; }
.tie div.w { color: #EAF7F0; background: rgba(0, 232, 143, 0.09); }
.tie div.w b { color: #00E88F; }
.tie div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tie div b { flex: none; letter-spacing: -0.02em; }
.tie--empty div { color: #3E5A4C; }

/* ---------- SKILLS ---------- */
.claim {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 1em 1.1em;
  border-radius: 1.5em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.6);
}

.claim + .claim { margin-top: 0.6em; }
.claim__thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.6em;
  height: 3.6em;
  border-radius: 1.1em;
  background: linear-gradient(140deg, #17392A, #0A1F16);
  border: 0.1em solid #2C6046;
  color: #00E88F;
  flex: none;
}
.claim__thumb svg { width: 1.6em; height: 1.6em; }
.claim__who { flex: 1; min-width: 0; }
.claim__name { display: block; font-size: 1.1em; font-weight: 700; letter-spacing: -0.025em; }
.claim__state { display: block; font-size: 0.88em; color: #8FAA9C; margin-top: 0.2em; }

/* the six-vote track */
.votes { display: flex !important; gap: 0.3em; margin-top: 0.45em; }
.votes i {
  width: 1.5em;
  height: 0.4em;
  border-radius: 0.2em;
  background: rgba(255, 255, 255, 0.1);
}
.votes i.on { background: #00E88F; }

/* ---------- GEAR ---------- */
.gear-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }

.gcard {
  border-radius: 1.5em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.6);
  overflow: hidden;
}

.gcard__img {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #17392A, #0A1F16);
  color: rgba(0, 232, 143, 0.5);
}

.gcard__img svg { width: 3.4em; height: 3.4em; }

.gcard__badge {
  position: absolute;
  top: 0.6em;
  left: 0.6em;
  padding: 0.25em 0.7em;
  border-radius: 0.8em;
  font-size: 0.82em;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #00E88F;
  color: #00190E;
}

.gcard__badge--drop { background: #FFD84D; color: #231A00; }

.gcard__body { padding: 0.8em 0.9em 1em; }
.gcard__title { font-size: 0.98em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard__place { font-size: 0.82em; color: #5F7A6C; margin-top: 0.2em; }
.gcard__price { display: flex; align-items: baseline; gap: 0.45em; margin-top: 0.5em; }
.gcard__price b { display: inline; font-size: 1.1em; font-weight: 800; letter-spacing: -0.03em; color: #00E88F; }
.gcard__price s { font-size: 0.85em; color: #5F7A6C; }

/* ---------- PLAYERS (flip card front) ---------- */
.pl-card {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1.1em;
  border-radius: 1.6em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.6);
}

.pl-card + .pl-card { margin-top: 0.7em; }
.pl-card__who { flex: 1; min-width: 0; }
.pl-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; font-size: 1.15em; font-weight: 700; letter-spacing: -0.025em; }
.pl-card__line { display: block; font-size: 0.88em; color: #8FAA9C; margin-top: 0.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-card__add {
  display: grid;
  place-items: center;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  border: 0.1em solid rgba(0, 232, 143, 0.4);
  background: rgba(0, 232, 143, 0.14);
  color: #00E88F;
  flex: none;
}
.pl-card__add svg { width: 1.4em; height: 1.4em; }

@media (prefers-reduced-motion: reduce) {
  .hero-card__motion, .gearband__drift { display: none; }
}

/* ------------------------------------------------------------------
   THE LIVE BOARD

   CricHeroes puts "Live scores" in its top-level nav, and it is right
   to: a board with a game actually running on it is the fastest proof
   that anybody is using the thing. This is that board.

   The cards are built to take real data — see `data-live` in site.js.
   Until an endpoint is wired up they run a scripted demo, and the
   heading says so rather than letting a reader assume otherwise.
------------------------------------------------------------------ */
.live {
  position: relative;
  overflow: hidden;
}

.live__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-2xl);
}

.live__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(194, 65, 12, 0.34);
  background: rgba(255, 107, 53, 0.12);
  color: var(--streak);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.live__pill .dot { background: var(--streak-bright); }

@keyframes pulse-live {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.65); }
  70% { box-shadow: 0 0 0 9px rgba(255, 107, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

.live__pill .dot--live { animation: pulse-live 1.8s infinite; }

/*
  A rail on a phone, a grid from 760px.

  Horizontal scroll is the right shape on a small screen — the cards are
  a feed, and a feed that forces you to scroll the whole page past four
  of them buries everything under it.
*/
.live__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 320px);
  gap: var(--sp-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-md);
  margin-inline: calc(var(--sp-xl) * -1);
  padding-inline: var(--sp-xl);
  scrollbar-width: none;
}

.live__rail::-webkit-scrollbar { display: none; }
.live__rail > * { scroll-snap-align: start; }

@media (min-width: 760px) {
  .live__rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (min-width: 1100px) {
  .live__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- one live match ---------- */
.lmatch {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-xl);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.lmatch::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FF6B35, transparent);
  opacity: 0.7;
}

.lmatch:hover {
  transform: translateY(-4px);
  border-color: var(--court-border);
  box-shadow: var(--shadow-lg);
}

/* a court-green wash that breathes, so a card reads as "on" at a glance */
.lmatch__wash {
  position: absolute;
  inset: -40% -30% auto;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 107, 53, 0.13), transparent 72%);
  pointer-events: none;
  animation: breathe 4.5s var(--ease-in-out) infinite alternate;
}

@keyframes breathe { to { opacity: 0.45; transform: scale(1.1); } }

.lmatch__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.lmatch__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(194, 65, 12, 0.32);
  background: rgba(255, 107, 53, 0.12);
  color: var(--streak);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.lmatch__tag .dot { width: 6px; height: 6px; background: var(--streak-bright); animation: pulse-live 1.8s infinite; }

.lmatch__format { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }

.lmatch__side {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding-block: 10px;
}

.lmatch__side + .lmatch__side { border-top: 1px solid var(--border); }

.lmatch__av {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--on-court);
  background: linear-gradient(140deg, #2BF0A0, #00B87D);
  flex: none;
}

.lmatch__av--b { background: linear-gradient(140deg, #FFE066, #FF9F1C); }
.lmatch__av--c { background: linear-gradient(140deg, #C79AF8, #8B5CF6); color: #160726; }
.lmatch__av--d { background: linear-gradient(140deg, #7CC0FF, #1B4FBF); color: #F2F8F4; }

.lmatch__who { min-width: 0; flex: 1; }

.lmatch__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the shuttle marks who is serving — the one thing a scoreboard must say */
.lmatch__serve {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--shuttle-bright);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.lmatch__side.is-serving .lmatch__serve { opacity: 1; transform: none; }

.lmatch__rank { font-size: 0.72rem; color: var(--faint); margin-top: 1px; }

.lmatch__games { display: flex; gap: 5px; flex: none; }

.lmatch__games b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.lmatch__games b.won { border-color: var(--court-border); background: var(--court-soft); color: var(--court); font-weight: 800; }

/* the running score. `is-bump` is added for one frame when it changes */
.lmatch__now {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-sm);
  border: 1px solid rgba(194, 65, 12, 0.26);
  background: rgba(255, 107, 53, 0.1);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: transform 0.22s var(--ease), background-color 0.4s var(--ease),
    border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.lmatch__now.is-bump {
  transform: scale(1.16);
  background: var(--court-bright);
  border-color: var(--court-bright);
  color: var(--on-court);
}

.lmatch__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--faint);
}

.lmatch__place { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lmatch__place svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.lmatch__place span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lmatch__watch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--court);
  flex: none;
}

.lmatch__watch svg { width: 14px; height: 14px; }

/* the rally ticker — the last few points, newest on the right */
.lmatch__rally { display: flex; gap: 3px; margin-top: 10px; }

.lmatch__rally i {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background-color 0.4s var(--ease);
}

.lmatch__rally i.a { background: var(--court-bright); }
.lmatch__rally i.b { background: var(--info); }

@media (prefers-reduced-motion: reduce) {
  .lmatch__wash, .lmatch__tag .dot, .live__pill .dot--live { animation: none; }
  .lmatch__now.is-bump { transform: none; }
}

/* ---------- COACHING ----------
   A coach's page inside the phone: who they are, then the sessions they
   have actually published. The slot row is the whole point of the screen,
   so it carries the time, the place, the price and what is left. */
.coach-head {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1.2em;
  border-radius: 1.8em;
  border: 0.1em solid #1E4633;
  background: linear-gradient(150deg, rgba(23, 57, 42, 0.9), rgba(10, 31, 22, 0.9));
}

.coach-head__who { min-width: 0; flex: 1; }
.coach-head__name { display: block; font-size: 1.25em; font-weight: 800; letter-spacing: -0.03em; }
.coach-head__at { display: block; font-size: 0.9em; color: #8FAA9C; margin-top: 0.15em; }
.coach-head__tags { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.6em; }

.slot {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.9em 1em;
  border-radius: 1.4em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.6);
}

.slot + .slot { margin-top: 0.6em; }

.slot__when {
  display: grid;
  place-items: center;
  width: 3.4em;
  padding: 0.5em 0;
  border-radius: 1em;
  background: rgba(0, 232, 143, 0.12);
  border: 0.1em solid rgba(0, 232, 143, 0.3);
  flex: none;
  line-height: 1.1;
}

.slot__when b { display: block; font-size: 1.05em; font-weight: 800; color: #00E88F; }
.slot__when span { display: block; font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8FAA9C; }

.slot__what { flex: 1; min-width: 0; }
.slot__time { display: block; font-size: 1em; font-weight: 700; letter-spacing: -0.02em; }
.slot__where { display: block; font-size: 0.85em; color: #8FAA9C; margin-top: 0.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.slot__book { text-align: right; flex: none; }
.slot__price { display: block; font-size: 1.05em; font-weight: 800; letter-spacing: -0.03em; color: #EAF7F0; }
.slot__left { display: block; font-size: 0.78em; color: #FFD84D; margin-top: 0.1em; }
.slot--full .slot__when { background: rgba(255, 255, 255, 0.05); border-color: #1E4633; }
.slot--full .slot__when b { color: #5F7A6C; }
.slot--full .slot__left { color: #5F7A6C; }

/* ---------- LIVE SCORING ----------
   The pad you hold on the bench. Two big targets, one per side: tap
   whoever won the rally. Everything else on the screen is worked out
   from those taps, which is why the only other control is Undo. */
.pad { display: grid; gap: 0.7em; }

.pad__games {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.7em;
  border-radius: 1.2em;
  border: 0.1em solid #1E4633;
  background: rgba(16, 44, 32, 0.6);
  font-size: 0.95em;
  font-weight: 700;
  color: #8FAA9C;
}

.pad__games b { color: #EAF7F0; letter-spacing: -0.02em; }
.pad__games i { font-style: normal; color: #3E5A4C; }

/* one side's target */
.pad__side {
  position: relative;
  display: grid;
  gap: 0.2em;
  padding: 1.2em 1.3em;
  border-radius: 1.8em;
  border: 0.12em solid #1E4633;
  background: linear-gradient(150deg, rgba(23, 57, 42, 0.85), rgba(10, 31, 22, 0.9));
  overflow: hidden;
}

/* the side holding serve is the one about to be tapped most */
.pad__side--serving {
  border-color: rgba(0, 232, 143, 0.5);
  background: linear-gradient(150deg, rgba(0, 232, 143, 0.14), rgba(10, 31, 22, 0.9));
}

.pad__top { display: flex; align-items: center; gap: 0.6em; }

.pad__name {
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pad__serve {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  color: #FFD84D;
}

.pad__score {
  font-size: 4.2em;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.pad__cue {
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5F7A6C;
}

.pad__side--serving .pad__cue { color: #00E88F; }

/* game point / match point, called out where the eye already is */
.pad__flag {
  position: absolute;
  top: 1.1em;
  right: 1.2em;
  padding: 0.3em 0.8em;
  border-radius: 0.9em;
  background: rgba(255, 216, 77, 0.16);
  border: 0.1em solid rgba(255, 216, 77, 0.4);
  color: #FFD84D;
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pad__undo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  height: 3.4em;
  border-radius: 1.3em;
  border: 0.1em solid #2C6046;
  color: #8FAA9C;
  font-size: 1.05em;
  font-weight: 700;
}

.pad__undo svg { width: 1.5em; height: 1.5em; }

.pad__watch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: 0.9em;
  font-weight: 600;
  color: #5F7A6C;
}

.pad__watch b { color: #8FAA9C; font-weight: 700; }

/* ---------- the pad, driven ----------
   site.js plays one game across every pad and watcher on the page, so the
   serve, game point and the tap are classes it sets rather than markup. */
.pad__side { transition: transform 0.18s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); }
.pad__flag { display: none; }
.pad__side.is-gp .pad__flag { display: block; }
.pad__serve { opacity: 0; transition: opacity 0.3s var(--ease); }
.pad__side.is-serving .pad__serve { opacity: 1; }
.pad__side.is-serving {
  border-color: rgba(0, 232, 143, 0.5);
  background: linear-gradient(150deg, rgba(0, 232, 143, 0.14), rgba(10, 31, 22, 0.9));
}
.pad__side.is-serving .pad__cue { color: #00E88F; }
.pad__side.is-tapped { transform: scale(0.965); border-color: #00E88F; }

/* ---------- the watcher ----------
   The same court with the controls taken away, which is what the app
   shows anybody who is not holding the phone. */
.wv { display: grid; gap: 0.7em; }
.wv__row {
  display: flex; align-items: center; gap: 0.9em;
  padding: 1.1em 1.2em; border-radius: 1.6em;
  border: 0.1em solid #1E4633; background: rgba(16, 44, 32, 0.7);
  transition: border-color 0.3s var(--ease);
}
.wv__row.is-serving { border-color: rgba(0, 232, 143, 0.45); }
.wv__who { flex: 1; min-width: 0; }
.wv__who b { display: block; font-size: 1.1em; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv__who span { display: block; font-size: 0.85em; color: #8FAA9C; margin-top: 0.15em; }
.wv__serve { width: 1.3em; height: 1.3em; flex: none; color: #FFD84D; opacity: 0; transition: opacity 0.3s var(--ease); }
.wv__row.is-serving .wv__serve { opacity: 1; }
.wv__score {
  min-width: 1.5em; text-align: right;
  font-size: 3em; font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  font-variant-numeric: tabular-nums; transition: color 0.4s var(--ease);
}
.wv__score.is-bump { color: #00E88F; }
.wv__flag {
  justify-self: center; min-height: 2.2em;
  padding: 0.4em 1em; border-radius: 1em;
  font-size: 0.9em; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: #FFD84D; background: rgba(255, 216, 77, 0.14); border: 0.1em solid rgba(255, 216, 77, 0.4);
  visibility: hidden;
}
.wv__flag.is-on { visibility: visible; }
.wv__feed { display: grid; gap: 0.45em; }
.wv__feed span {
  padding: 0.7em 1em; border-radius: 1.1em; background: rgba(255, 255, 255, 0.04);
  font-size: 0.9em; font-weight: 600; color: #8FAA9C;
}
.wv__feed span:first-child { color: #EAF7F0; }

/* ---------- the courts board ---------- */
.cg { display: grid; grid-template-columns: 3.4em repeat(3, 1fr); gap: 0.45em; margin: 0.2em 0 0.4em; }
.cg__h { font-size: 0.8em; font-weight: 700; color: #8FAA9C; text-align: center; }
.cg__t { font-size: 0.85em; font-weight: 700; color: #8FAA9C; align-self: center; }
.cg__c { display: block; height: 2.7em; border-radius: 0.8em; }
.cg__c--b { background: rgba(255, 255, 255, 0.05); border: 0.1em solid #1E4633; }
.cg__c--f { background: rgba(0, 232, 143, 0.08); border: 0.12em solid rgba(0, 232, 143, 0.45); }
.cg__c--s { background: linear-gradient(135deg, #2BF0A0, #00C97F); }