/* =====================================================================
   StraightUp — app styles
   Mobile-first, dark stadium palette, motion used to explain state.
   ===================================================================== */

:root {
  --bg:        #070b14;
  --bg-2:      #0b1220;
  --surface:   #111a2b;
  --surface-2: #16223a;
  --surface-3: #1d2b47;
  --line:      rgba(148, 163, 184, .14);
  --line-hi:   rgba(148, 163, 184, .28);

  --text:   #e8edf7;
  --text-2: #b9c5db;
  --muted:  #7f8fab;

  --accent:   #f5a524;   /* confidence points */
  --accent-2: #ffca62;
  --turf:     #1fa54a;   /* selected / correct */
  --turf-dim: rgba(31, 165, 74, .16);
  --loss:     #ef4444;
  --loss-dim: rgba(239, 68, 68, .14);
  --info:     #4a9bf5;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;

  --shadow:    0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);

  --tab-h: 62px;
  --bar-h: 58px;

  --ease:   cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  /* Archivo has proper tabular figures, so scores and point values stop
     jittering sideways as they change. System stack is the fallback. */
  font: 15px/1.5 Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { min-height: 100dvh; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9;
      stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
[hidden] { display: none !important; }

/* ---------------------------------------------- animated field lines */
.field-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(31, 165, 74, .13), transparent 60%),
    radial-gradient(90% 50% at 90% 110%, rgba(245, 165, 36, .08), transparent 60%),
    repeating-linear-gradient(90deg,
      transparent 0 78px,
      rgba(148, 163, 184, .045) 78px 79px);
  background-color: var(--bg);
  animation: drift 40s linear infinite;
}
@keyframes drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 0, 158px 0; }
}

/* =====================================================================
   Auth
   ===================================================================== */
.auth-body { display: grid; place-items: center; padding: 24px 18px 40px; }

.auth-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  animation: riseIn .55s var(--ease) both;
}

.auth-hero { text-align: center; margin-bottom: 24px; }

.logo-mark {
  width: 74px; height: 74px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 24px;
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-hi);
  box-shadow: var(--shadow);
}
.logo-ball { font-size: 34px; display: block; animation: tumble 4.5s var(--ease) infinite; }
@keyframes tumble {
  0%, 72%, 100% { transform: rotate(0) scale(1); }
  78%  { transform: rotate(-16deg) scale(1.12); }
  86%  { transform: rotate(14deg)  scale(1.06); }
  92%  { transform: rotate(-5deg)  scale(1.02); }
}

.auth-title { font-size: 27px; }
.auth-sub { color: var(--muted); margin-top: 8px; font-size: 14px; }

.auth-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-lg);
}

.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(0, 0, 0, .28);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 16px;
}
.seg-btn {
  position: relative; z-index: 1;
  padding: 10px 8px;
  font-size: 14px; font-weight: 600;
  color: var(--muted);
  border-radius: 9px;
  transition: color .25s var(--ease);
}
.seg-btn.is-active { color: #08111f; }
.seg-thumb {
  position: absolute;
  z-index: 0;
  top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  border-radius: 9px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  transition: transform .38s var(--spring);
}
.seg[data-tab="register"] .seg-thumb { transform: translateX(100%); }

.auth-form { display: none; }
.auth-form.is-active { display: grid; gap: 13px; animation: fadeSlide .3s var(--ease) both; }

.fld { display: grid; gap: 6px; }
.fld > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: .01em; }
.fld > span em { color: var(--muted); font-style: normal; font-weight: 500; }
.fld input, .fld select, .inline-form input {
  width: 100%;
  padding: 12px 13px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.fld input:focus, .fld select:focus, .inline-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 3px rgba(245, 165, 36, .16);
}
.fld .hint { font-size: 12px; color: var(--muted); }

.check-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.check-row input {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.link-btn {
  display: block;
  margin: 2px auto 0;
  padding: 8px 4px;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  background: none; border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.link-btn:hover, .link-btn:active { color: var(--accent-2); }

.auth-note {
  background: var(--turf-dim);
  border: 1px solid rgba(31, 165, 74, .4);
  color: #b8f5cd;
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  margin-bottom: 13px;
  animation: riseIn .35s var(--ease) both;
}

.auth-error {
  background: var(--loss-dim);
  border: 1px solid rgba(239, 68, 68, .4);
  color: #ffc9c9;
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  margin-bottom: 13px;
  animation: shake .4s var(--ease);
}

.auth-points {
  margin-top: 22px;
  display: grid; gap: 10px;
  font-size: 13.5px; color: var(--muted);
}
.auth-points li { display: flex; gap: 10px; align-items: center; }
.auth-points span { font-size: 16px; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 650;
  font-size: 14.5px;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .16s var(--spring), filter .2s, opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(.965); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-block { width: 100%; }
/* .btn grew up on <button>; on an <a> the browser adds a link underline
   and inline display, neither of which a button should have. */
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
a.btn.btn-block { display: flex; }
.btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }

.btn-primary {
  --btn-bg: linear-gradient(180deg, var(--accent-2), var(--accent));
  --btn-fg: #0a1220;
  border-color: transparent;
}
.btn-ghost { --btn-bg: transparent; border-color: var(--line-hi); color: var(--text-2); }
.btn-lock {
  --btn-bg: linear-gradient(180deg, #26c95d, var(--turf));
  --btn-fg: #05130a;
  border-color: transparent;
  font-size: 16px; padding: 15px;
}
.btn-lock:not(:disabled)::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.42) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: sweep 2.6s var(--ease) infinite;
}
@keyframes sweep { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.btn-send {
  --btn-bg: linear-gradient(180deg, var(--accent-2), var(--accent));
  --btn-fg: #0a1220;
  border-color: transparent;
  padding: 0; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
}
.btn-send svg { fill: currentColor; stroke: none; }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--muted);
  transition: background .2s, color .2s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* =====================================================================
   App shell
   ===================================================================== */
.app-body {
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-top: calc(var(--bar-h) + env(safe-area-inset-top));
}

.appbar {
  position: fixed; z-index: 30;
  top: 0; left: 0; right: 0;
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(9, 14, 25, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.appbar-pool {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
  padding: 6px 8px; margin-left: -8px;
  border-radius: 10px;
  transition: background .2s;
}
.appbar-pool:active { background: var(--surface-2); }
.pool-name {
  font-weight: 700; font-size: 16px;
  max-width: 46vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pool-week {
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: rgba(245, 165, 36, .12);
  border: 1px solid rgba(245, 165, 36, .25);
  padding: 2px 7px; border-radius: 20px;
  white-space: nowrap;
}
.chev { width: 16px; height: 16px; color: var(--muted); align-self: center; }

.appbar-right { display: flex; align-items: center; gap: 10px; }

.presence { display: flex; }
.presence .pip {
  width: 26px; height: 26px; margin-left: -8px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  background: var(--surface-2);
  border: 2px solid var(--bg-2);
  animation: popIn .3s var(--spring) both;
}
.presence .pip:first-child { margin-left: 0; }

.avatar-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px;
  background: color-mix(in srgb, var(--avatar, #f59e0b) 22%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--avatar, #f59e0b) 55%, transparent);
  transition: transform .18s var(--spring);
}
.avatar-btn:active { transform: scale(.9); }

/* ------------------------------------------------------------- views */
.views { position: relative; z-index: 1; }
.view { padding: 16px 14px 30px; max-width: 720px; margin: 0 auto; }
/*
 * View swapping. Tabs sit in a fixed order, so moving right slides the
 * new view in from the right and vice versa — the motion tells you which
 * way you travelled instead of everything fading in place.
 */
.view:not([hidden]) { animation: viewIn .34s var(--ease) both; }
.views.go-fwd .view:not([hidden]) { animation: viewInFwd .32s var(--ease) both; }
.views.go-back .view:not([hidden]) { animation: viewInBack .32s var(--ease) both; }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes viewInFwd {
  from { opacity: 0; transform: translateX(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes viewInBack {
  from { opacity: 0; transform: translateX(-26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* the outgoing view gets a brief fade so the swap is not a hard cut */
.view.is-leaving {
  animation: viewOut .16s var(--ease) both;
  position: absolute; inset: 0; pointer-events: none;
}
@keyframes viewOut { to { opacity: 0; transform: scale(.99); } }

.view-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.view-title { font-size: 21px; }
.view-sub { color: var(--muted); font-size: 13.5px; margin-top: 3px; }

.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.card.pad { padding: 16px; }
.card-title { font-size: 15px; margin-bottom: 8px; }
.stack { display: grid; gap: 12px; }

.empty {
  text-align: center; color: var(--muted);
  padding: 46px 20px; font-size: 14px;
  border: 1px dashed var(--line-hi);
  border-radius: var(--r);
}
.empty strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 6px; }

/* ------------------------------------------------------------ tabbar */
.tabbar {
  position: fixed; z-index: 30;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(9, 14, 25, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.tab {
  position: relative;
  display: grid; place-items: center; gap: 3px;
  color: var(--muted);
  font-size: 10.5px; font-weight: 600;
  transition: color .22s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 21px; height: 21px; transition: transform .3s var(--spring); }
.tab.is-active { color: var(--accent); }
.tab.is-active svg { transform: translateY(-2px) scale(1.1); }
.tab:active svg { transform: scale(.88); }
.tab.just-picked svg { animation: tabPop .42s var(--spring); }
@keyframes tabPop {
  0%   { transform: translateY(-2px) scale(1.1); }
  40%  { transform: translateY(-5px) scale(1.28); }
  100% { transform: translateY(-2px) scale(1.1); }
}

/* the active tab carries a small marker that slides with it */
.tab.is-active::before {
  content: "";
  position: absolute; top: 2px;
  width: 20px; height: 3px; border-radius: 3px;
  background: var(--accent);
  animation: tabMark .32s var(--spring) both;
}
@keyframes tabMark {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.tab-dot {
  position: absolute; top: 8px; right: calc(50% - 18px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--loss);
  border: 1.5px solid var(--bg-2);
  animation: popIn .3s var(--spring) both;
}

/* =====================================================================
   Pick cards
   ===================================================================== */
.lockbar {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; margin-bottom: 13px;
  background: rgba(245, 165, 36, .09);
  border: 1px solid rgba(245, 165, 36, .24);
  border-radius: 12px;
  font-size: 13px; font-weight: 600; color: var(--accent-2);
}
.lockbar.is-locked {
  background: var(--loss-dim);
  border-color: rgba(239, 68, 68, .35);
  color: #ffb4b4;
}
.lock-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  70%      { opacity: .55; box-shadow: 0 0 0 7px transparent; }
}

.progress-rail {
  position: relative;
  height: 30px; margin-bottom: 16px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
.progress-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(31,165,74,.5), rgba(245,165,36,.55));
  transition: width .5s var(--ease);
}
.progress-label {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}

.pick-list { display: grid; gap: 13px; }

.pick-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: riseIn .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 65ms);
  transition: border-color .3s, box-shadow .3s;
}
.pick-card.has-points { border-color: rgba(245, 165, 36, .4); }
.pick-card.is-locked { opacity: .92; }

.pick-meta {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .18);
}
.pick-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.pick-meta .live {
  color: var(--loss); display: inline-flex; align-items: center; gap: 5px;
}
.pick-meta .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--loss); animation: pulseDot 1.4s ease-in-out infinite;
}
.pick-meta .tv { margin-left: auto; }

/* Away on the left, home on the right — always, everywhere. */
.team-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/*
 * The logo sits ABOVE the name rather than beside it. Beside a logo a
 * team gets about 95px of text at phone width, which truncates
 * "Pittsburgh Steelers" and most of the interesting college names.
 * Stacked, the name gets the full half-width and a second line.
 */
.team {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 7px;
  padding: 14px 10px 13px;
  min-height: 108px;
  text-align: center;
  transition: background .28s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.team + .team { border-left: 1px solid var(--line); }
.team:active:not(:disabled) { background: rgba(255, 255, 255, .05); }

.team-logo {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface-2);
  font-size: 12px; font-weight: 800; letter-spacing: -.03em;
  overflow: hidden;
  transition: transform .3s var(--spring);
}
.team-logo img { width: 30px; height: 30px; object-fit: contain; }
.team.is-picked .team-logo { transform: scale(1.08); }

.team-id { min-width: 0; width: 100%; }
.team-name {
  font-size: 15px; font-weight: 650;
  line-height: 1.18;
  /* two lines, then ellipsis — nothing is cut off at one word */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.team-sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  color: var(--muted); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.team-rank {
  font-size: 11px; font-weight: 800; color: var(--accent);
  margin-right: 3px;
}
.team-score {
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* selection fill rises from the bottom of the tapped side */
.team::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--turf-dim), transparent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .32s var(--ease);
}
.team.is-picked::before { transform: scaleY(1); }
.team.is-picked { box-shadow: inset 0 -3px 0 var(--turf); }
.team.is-picked .team-name { color: #b8f5cd; font-weight: 750; }
.team.is-picked .team-sub  { color: #7dd3a8; }

.team.is-win  { box-shadow: inset 0 -3px 0 var(--turf); }
.team.is-lose { opacity: .45; }

/* which league this game belongs to, since a card can mix them */
.league-badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 5px;
  color: #0a1220;
  background: var(--tint, #94a3b8);
}

/* day dividers so a weekend card reads chronologically */
.day-head {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 2px 2px;
  animation: riseIn .4s var(--ease) both;
}
.day-head span {
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  color: var(--muted); white-space: nowrap;
}
.day-head i { flex: 1; height: 1px; background: var(--line); }

.pick-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .2);
}
.pick-foot .label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

.conf-chips { display: flex; gap: 6px; margin-left: auto; min-width: 0; }

/* A long card puts the label on its own line and gives the numbers the
   full width to swipe along. Below six they still sit inline, which
   reads better and needs no scrolling. */
.pick-foot.has-many { flex-wrap: wrap; row-gap: 9px; }
.pick-foot.has-many .label { flex: 1 1 100%; }
.pick-foot.has-many .conf-chips { margin-left: 0; width: 100%; }

.conf-chips.is-scroll {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 3px;            /* room for the is-on chip's scale(1.08) */
  /* Fading the ends is the only hint that there is more to swipe to. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px,
                                      #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12px,
                                      #000 calc(100% - 16px), transparent);
}
.conf-chips.is-scroll::-webkit-scrollbar { display: none; }
/* Bigger targets once you are swiping to reach them. */
.conf-chips.is-scroll .conf-chip { width: 40px; height: 40px; scroll-snap-align: center; }

.conf-chip {
  flex: none;                    /* never squash: a 12-game card shrank
                                    these to an unhittable sliver */
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .32);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: transform .22s var(--spring), background .22s, color .22s, border-color .22s;
}
.conf-chip:active { transform: scale(.88); }
.conf-chip.is-on {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: transparent;
  color: #0a1220;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(245, 165, 36, .35);
}
.conf-chip.is-taken { opacity: .32; }
.conf-chip.just-set { animation: pointPop .45s var(--spring); }
@keyframes pointPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.42) rotate(-7deg); }
  100% { transform: scale(1.08); }
}

/* Sits in the meta row rather than floating over it - absolutely
   positioned, it landed on top of the broadcast label. */
.card-badge {
  margin-left: auto;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
/* when a result badge is present it takes the right edge, so the
   broadcast label stops claiming it */
.pick-meta .card-badge ~ .tv,
.pick-meta .tv + .card-badge { margin-left: 8px; }
.badge-win  { background: var(--turf-dim); color: #7ff0a6; }
.badge-loss { background: var(--loss-dim); color: #ffa8a8; }

/* --------------------------------------------------------- submit dock */
.tiebreak { margin-top: 14px; }

.submit-dock {
  position: sticky; bottom: calc(var(--tab-h) + 8px);
  margin-top: 18px; padding: 13px;
  background: rgba(11, 18, 32, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  z-index: 5;
}
.dock-warn {
  font-size: 12px; color: var(--muted);
  text-align: center; margin-bottom: 10px;
}

/* =====================================================================
   The room (board)
   ===================================================================== */
.gate {
  text-align: center;
  padding: 44px 22px;
  border: 1px dashed var(--line-hi);
  border-radius: var(--r);
  background: radial-gradient(90% 70% at 50% 0%, rgba(245,165,36,.07), transparent);
}
.gate-lock { font-size: 46px; display: block; margin-bottom: 14px; animation: swing 3.4s var(--ease) infinite; }
@keyframes swing {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(-11deg); }
  84% { transform: rotate(9deg); }
  91% { transform: rotate(-4deg); }
}
.gate h3 { font-size: 18px; margin-bottom: 8px; }
.gate p { color: var(--muted); font-size: 14px; max-width: 34ch; margin: 0 auto; }

.entry-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 13px;
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: flipIn .6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes flipIn {
  from { opacity: 0; transform: perspective(900px) rotateX(-14deg) translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.entry-card.is-me { border-color: rgba(245, 165, 36, .45); }

.entry-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px;
  border-bottom: 1px solid var(--line);
}
.entry-avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  display: grid; place-items: center; font-size: 19px;
  background: color-mix(in srgb, var(--avatar, #f59e0b) 22%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--avatar, #f59e0b) 55%, transparent);
}
.entry-who { min-width: 0; flex: 1; }
.entry-name { font-weight: 700; font-size: 15px; }
.entry-when { font-size: 11.5px; color: var(--muted); }
.entry-score {
  text-align: right;
  font-size: 24px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
}
.entry-score small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; }

.entry-picks { padding: 6px 0; }
.epick {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  position: relative;
  transition: background .2s;
}
.epick + .epick { border-top: 1px solid rgba(148, 163, 184, .07); }
.epick-pts {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 13.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(245, 165, 36, .14);
  color: var(--accent-2);
  border: 1px solid rgba(245, 165, 36, .25);
}
.epick.is-right .epick-pts { background: var(--turf-dim); color: #7ff0a6; border-color: rgba(31,165,74,.4); }
.epick.is-wrong .epick-pts { background: var(--loss-dim); color: #ffa8a8; border-color: rgba(239,68,68,.35); }
.epick-id { min-width: 0; flex: 1; font-size: 13.5px; }
.epick-at { color: #55637d; }
.epick-team { font-size: 14px; font-weight: 600; }
.epick-vs { font-size: 12px; color: var(--muted); }
.epick-mark { font-size: 15px; width: 16px; text-align: right; }
.epick-reacts { display: flex; gap: 4px; margin-left: auto; }
.epick-reacts .react-pill { padding: 3px 7px; font-size: 12px; }
.epick { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.epick:active { background: rgba(255, 255, 255, .04); }
.epick.is-right { background: linear-gradient(90deg, var(--turf-dim), transparent); }
.epick.is-wrong { background: linear-gradient(90deg, var(--loss-dim), transparent); }

.react-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 13px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .18);
}
.react-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
  transition: transform .2s var(--spring), background .2s, border-color .2s;
}
.react-pill:active { transform: scale(.9); }
.react-pill.is-mine { background: rgba(245, 165, 36, .16); border-color: rgba(245, 165, 36, .4); }
.react-pill .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.react-add {
  color: var(--muted);
  font-size: 12px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px dashed var(--line-hi);
  transition: color .2s, border-color .2s;
}
.react-add:active { color: var(--text); border-color: var(--accent); }

/* floating emoji burst */
.emoji-fly {
  position: fixed;
  z-index: 90;
  font-size: 26px;
  pointer-events: none;
  animation: flyUp 1.05s var(--ease) forwards;
}
@keyframes flyUp {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.5); }
  18%  { opacity: 1; transform: translate(-50%, -14px) scale(1.25); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -110px) scale(.9); }
}

/* =====================================================================
   How the room split

   Each row carries its two team colours as --away / --home, set inline
   from the provider data and already normalised for this dark ground in
   app.js. Nothing here depends on the colours being distinguishable:
   counts, abbreviations and percentages all say the same thing in text.
   ===================================================================== */
.split-card {
  margin-top: 14px;
  padding: 15px 0 7px;
  background:
    radial-gradient(120% 100% at 50% 0, rgba(74, 155, 245, .07), transparent 62%),
    var(--surface);
}
.split-head { padding: 0 16px 10px; }
.split-head .card-title { margin-bottom: 2px; }
.split-hint { font-size: 11.5px; color: var(--muted); letter-spacing: .01em; }

.split-rows { display: flex; flex-direction: column; }

.split-row {
  border-top: 1px solid var(--line);
  animation: riseIn .5s var(--ease) both;
  animation-delay: calc(var(--i) * 45ms);
}
.split-row:first-child { border-top: 0; }

/* The whole head is the control, so it is a real button. */
.split-btn {
  display: block; width: 100%;
  padding: 11px 16px 12px;
  background: none; border: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: background .2s var(--ease);
}
.split-btn:hover { background: rgba(148, 163, 184, .05); }
.split-btn:focus-visible {
  outline: 2px solid var(--info); outline-offset: -2px; border-radius: var(--r-sm);
}
.split-row.is-open .split-btn { background: rgba(148, 163, 184, .06); }

.split-top {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}
.split-side { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.split-side.is-home { margin-left: auto; }
.split-n {
  font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.split-side.is-away .split-n { color: var(--away); }
.split-side.is-home .split-n { color: var(--home); }
.split-abbr {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-2); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The team that actually won, once the game is graded. */
.split-side.is-won .split-abbr { color: var(--text); }
.split-side.is-won .split-abbr::after {
  content: '✓'; margin-left: 4px; color: var(--turf); font-size: 11px;
}
.split-tag {
  flex: 1; text-align: center;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- bar */
.split-bar {
  position: relative; display: flex; gap: 3px;
  height: 9px; border-radius: 5px;
  background: rgba(148, 163, 184, .10);
  overflow: visible;
}
.split-fill {
  display: block; height: 100%; min-width: 3px;
  border-radius: 5px;
  transition: transform .45s var(--ease);
}
/* The growth animation lives on the inner b so the row can still slide
   the fills apart on open without the two transforms fighting. */
.split-fill > b {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  animation: splitGrow .8s var(--ease) both;
  animation-delay: calc(140ms + var(--i) * 60ms);
}
.split-fill.is-away > b {
  transform-origin: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--away) 74%, #000), var(--away));
  box-shadow: 0 0 14px -4px var(--away);
}
.split-fill.is-home > b {
  transform-origin: right;
  background: linear-gradient(90deg, var(--home), color-mix(in srgb, var(--home) 74%, #000));
  box-shadow: 0 0 14px -4px var(--home);
}
@keyframes splitGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Graded: the side that was wrong steps back so the eye lands on the one
   that was right. The ✓ beside the abbreviation says it in text too. */
.split-row.is-final .split-fill { opacity: .42; }
.split-row.is-final .split-fill.is-won { opacity: 1; }

/* Where the room divided. */
.split-seam {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  margin-left: -1px; border-radius: 2px;
  background: rgba(232, 237, 247, .55);
  opacity: 0; transform: scaleY(.4);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.split-row.is-open .split-seam { opacity: 1; transform: scaleY(1); }
/* Open: the two sides pull away from the seam. */
.split-row.is-open .split-fill.is-away { transform: translateX(-4px); }
.split-row.is-open .split-fill.is-home { transform: translateX(4px); }

.split-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted);
}
.split-chev {
  display: inline-flex; color: var(--muted);
  transition: transform .34s var(--spring), color .2s var(--ease);
}
.split-row.is-open .split-chev { transform: rotate(180deg); color: var(--text-2); }

/* ------------------------------------------------------------- reveal */
.split-reveal {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease);
}
.split-row.is-open .split-reveal { grid-template-rows: 1fr; }
/* Bare clipper. Padding must live INSIDE it: overflow clips at the
   padding box, so anything padded out here would still paint while the
   row is supposed to be shut. */
.split-reveal-in { overflow: hidden; min-height: 0; }
.split-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 2px 16px 14px;
}
.split-col { min-width: 0; }
.split-col h4 {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 7px;
}
.split-col.is-away h4 { color: var(--away); }
.split-col.is-home h4 { color: var(--home); text-align: right; }
.split-col h4 em { font-style: normal; color: var(--turf); }

.split-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px; margin-bottom: 5px;
  border-radius: var(--r-sm);
  background: rgba(148, 163, 184, .07);
  border: 1px solid transparent;
  opacity: 0;
}
.split-col.is-home .split-chip { flex-direction: row-reverse; }
.split-row.is-open .split-chip {
  animation: chipIn .42s var(--ease) both;
  animation-delay: calc(130ms + var(--i) * 50ms);
}
@keyframes chipIn {
  from { opacity: 0; transform: translateX(var(--from)) scale(.88); }
  to   { opacity: 1; transform: none; }
}
.split-chip.is-me { border-color: var(--line-hi); background: rgba(148, 163, 184, .14); }
/* Graded: right and wrong are told apart by fill AND by the text going
   grey, never by colour alone. Dimming with opacity would fight the
   entrance animation, so the weight comes out of the colours instead. */
.split-chip.is-right { background: var(--turf-dim); }
.split-chip.is-wrong { background: var(--loss-dim); }
.split-chip.is-wrong .split-nm,
.split-chip.is-wrong .split-pts { color: var(--muted); }
.split-chip.is-wrong .split-av { filter: saturate(.5); }

.split-av {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; font-style: normal;
  background: color-mix(in srgb, var(--avatar, #f59e0b) 24%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--avatar, #f59e0b) 55%, transparent);
}
.split-nm {
  flex: 1; min-width: 0;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.split-col.is-home .split-nm { text-align: right; }
.split-pts {
  flex: none; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.split-none { font-size: 11.5px; color: var(--muted); padding: 5px 2px; }
.split-col.is-home .split-none { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .split-row, .split-fill > b, .split-row.is-open .split-chip { animation: none; }
  .split-chip, .split-fill > b { opacity: 1; }
  .split-reveal, .split-fill, .split-chev, .split-seam { transition: none; }
}

/* =====================================================================
   Chat
   ===================================================================== */
.view-chat {
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--bar-h) - var(--tab-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 0;
}
.chat-scroll { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.chat-list { display: grid; gap: 10px; }

.msg { display: flex; gap: 9px; align-items: flex-end; animation: msgIn .34s var(--spring) both; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.msg.is-me { flex-direction: row-reverse; }
.msg-avatar {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%;
  display: grid; place-items: center; font-size: 15px;
  background: color-mix(in srgb, var(--avatar, #f59e0b) 22%, var(--surface));
}
.msg-bubble {
  max-width: 76%;
  padding: 9px 13px;
  border-radius: 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.42;
  word-break: break-word;
}
.msg.is-me .msg-bubble {
  background: linear-gradient(180deg, rgba(245,165,36,.22), rgba(245,165,36,.12));
  border-color: rgba(245, 165, 36, .3);
}
.msg-who { font-size: 11.5px; font-weight: 700; color: var(--accent-2); margin-bottom: 2px; }
.msg-time { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.msg-react { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }

.msg-system {
  display: flex; align-items: center; gap: 9px;
  margin: 4px auto;
  padding: 8px 14px;
  max-width: 92%;
  border-radius: 20px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
  text-align: center;
  animation: msgIn .34s var(--spring) both;
}
.msg-system .sys-icon { font-size: 15px; }
.msg-system.is-drop {
  background: linear-gradient(90deg, rgba(245,165,36,.14), rgba(31,165,74,.1));
  border-color: rgba(245, 165, 36, .3);
  color: var(--accent-2); font-weight: 600;
}

.chat-compose {
  border-top: 1px solid var(--line);
  background: rgba(9, 14, 25, .9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 9px 12px 12px;
}
.quick-react { display: flex; gap: 6px; margin-bottom: 8px; }
.quick-react button {
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 18px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  transition: transform .2s var(--spring), background .2s;
}
.quick-react button:active { transform: scale(1.25) translateY(-3px); background: var(--surface-2); }

.compose-row { display: flex; gap: 9px; align-items: center; }
.compose-row input {
  flex: 1;
  padding: 12px 15px;
  border-radius: 22px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid var(--line);
  color: var(--text);
}
.compose-row input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 165, 36, .14);
}

/* =====================================================================
   Standings
   ===================================================================== */
.stand-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 9px;
  animation: riseIn .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.stand-row.is-me { border-color: rgba(245, 165, 36, .45); }
.stand-rank {
  width: 30px; flex: 0 0 30px;
  text-align: center;
  font-size: 17px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.stand-row:nth-child(1) .stand-rank { color: var(--accent); }
.stand-who { flex: 1; min-width: 0; }
.stand-name { font-weight: 700; font-size: 15px; }
.stand-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.stand-pts {
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.stand-pts small { font-size: 10.5px; color: var(--muted); display: block; text-align: right; font-weight: 600; }

.sparks { display: flex; gap: 3px; margin-top: 6px; }
.spark {
  width: 5px; border-radius: 3px;
  background: rgba(245, 165, 36, .55);
  animation: growUp .6s var(--ease) both;
  transform-origin: bottom;
}
@keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* =====================================================================
   Commissioner
   ===================================================================== */
.week-picker {
  display: flex; gap: 7px; overflow-x: auto;
  padding-bottom: 12px; margin-bottom: 12px;
  scrollbar-width: none;
}
.week-picker::-webkit-scrollbar { display: none; }
.week-chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 650; color: var(--muted);
  transition: all .22s var(--ease);
}
.week-chip.is-on {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #0a1220; border-color: transparent;
}

.commish-tray {
  position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top) + 6px);
  z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  margin-bottom: 13px;
  background: rgba(11, 18, 32, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.tray-chips { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.tray-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-radius: 20px;
  background: rgba(245, 165, 36, .14);
  border: 1px solid rgba(245, 165, 36, .3);
  font-size: 12px; font-weight: 650;
  animation: popIn .3s var(--spring) both;
}
.tray-chip .x { color: var(--muted); font-size: 13px; }
.tray-slot {
  width: 30px; height: 26px;
  border-radius: 8px;
  border: 1px dashed var(--line-hi);
}

/* ------------------------------------------------------------- search */
.search-row {
  position: relative;
  display: flex; align-items: center;
  margin-bottom: 13px;
}
.search-row input {
  width: 100%;
  padding: 12px 38px 12px 40px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  -webkit-appearance: none;
}
.search-row input::-webkit-search-cancel-button { display: none; }
.search-row input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 165, 36, .14);
}
.search-icon {
  position: absolute; left: 12px;
  width: 18px; height: 18px;
  color: var(--muted); pointer-events: none;
}
.search-clear {
  position: absolute; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--muted); font-size: 12px;
  display: grid; place-items: center;
}
.search-clear:active { background: var(--surface-2); color: var(--text); }

.game-pool { display: grid; gap: 10px; }
.pg-rank { color: var(--accent); font-size: 12px; font-weight: 800; }
.pg-at { color: var(--muted); font-weight: 500; }
.pool-game {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  width: 100%;
  transition: border-color .25s, transform .18s var(--spring), background .25s;
  animation: riseIn .4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.pool-game:active { transform: scale(.985); }
.pool-game.is-on {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(245,165,36,.13), var(--bg-2));
}
.pool-game .pg-teams { flex: 1; min-width: 0; }
.pool-game .pg-line {
  display: block;
  font-size: 14px; font-weight: 650; line-height: 1.3;
}
.pool-game .pg-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 11.5px; color: var(--muted); margin-top: 4px;
}
/* model read stamped on each candidate game */
.pg-read { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.pg-read:empty { display: none; }
.read-chip {
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(148, 163, 184, .14); color: var(--text-2);
}
.read-chip.lock  { background: var(--turf-dim); color: #7ff0a6; }
.read-chip.solid { background: rgba(245, 165, 36, .16); color: var(--accent-2); }
.read-chip.coin  { background: rgba(124, 92, 255, .18); color: #c4b5fd; }
.read-tier { font-size: 10.5px; color: var(--muted); font-weight: 600; }

.pool-game .pg-check {
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line-hi);
  display: grid; place-items: center;
  font-size: 13px; color: transparent;
  transition: all .25s var(--spring);
}
.pool-game.is-on .pg-check {
  background: var(--accent); border-color: var(--accent); color: #0a1220;
  transform: scale(1.12);
}

/* =====================================================================
   Strategist sheet
   ===================================================================== */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(3, 6, 12, .68);
  backdrop-filter: blur(3px);
  animation: fadeIn .25s ease both;
}
.sheet {
  position: fixed; z-index: 50;
  left: 0; right: 0; bottom: 0;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-2), var(--bg-2));
  border-top: 1px solid var(--line-hi);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-lg);
  animation: sheetUp .42s var(--ease) both;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grab {
  width: 38px; height: 4px; border-radius: 4px;
  background: var(--line-hi);
  margin: 9px auto 0;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.sheet-head h2 { font-size: 18px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px 18px; -webkit-overflow-scrolling: touch; }
.sheet-foot {
  display: flex; gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.sheet-foot .btn { flex: 1; }

.strat-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  margin-bottom: 15px;
}
.strat-stat {
  padding: 11px 9px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
}
.strat-stat b {
  display: block; font-size: 19px; font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.strat-stat span { font-size: 10.5px; color: var(--muted); }

.strat-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 11px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  animation: riseIn .4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.strat-pts {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #0a1220;
}
.strat-row.is-upset .strat-pts {
  background: linear-gradient(180deg, #7c5cff, #5b3ff0); color: #fff;
}
.strat-pick { font-size: 15px; font-weight: 700; }
.strat-vs { font-size: 12px; color: var(--muted); margin-top: 1px; }
.strat-bar {
  height: 5px; border-radius: 4px;
  background: rgba(0, 0, 0, .35);
  margin: 8px 0 7px;
  overflow: hidden;
}
.strat-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--turf), var(--accent));
  transition: width .8s var(--ease);
}
.strat-why { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.strat-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(148, 163, 184, .12); color: var(--text-2);
}
.tag.for      { background: var(--turf-dim); color: #7ff0a6; }
.tag.against  { background: var(--loss-dim); color: #ffa8a8; }
.tag.tier     { background: rgba(245, 165, 36, .16); color: var(--accent-2); }

/* week-preview rows: tap to add the game to the card */
.week-row {
  cursor: pointer;
  border-radius: 12px;
  padding: 12px 10px;
  margin: 0 -10px;
  transition: background .22s var(--ease);
}
.week-row:active { background: rgba(255, 255, 255, .05); }
.week-row.is-on { background: rgba(245, 165, 36, .1); }
.week-row .strat-pts {
  font-size: 12px; letter-spacing: -.02em;
  padding: 0 4px; text-align: center; line-height: 1.1;
}
.week-row .strat-pts.is-coin {
  background: linear-gradient(180deg, #7c5cff, #5b3ff0); color: #fff;
  font-size: 10.5px;
}

.strat-note {
  margin-top: 14px; padding: 12px;
  border-radius: 12px;
  background: rgba(74, 155, 245, .1);
  border: 1px solid rgba(74, 155, 245, .25);
  font-size: 13px; color: #bcd9ff;
}

/* =====================================================================
   Toasts, confetti, misc
   ===================================================================== */
.toast-stack {
  position: fixed; z-index: 95;
  left: 12px; right: 12px;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
  display: grid; gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 12px 15px;
  border-radius: 13px;
  background: rgba(22, 34, 58, .97);
  border: 1px solid var(--line-hi);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  animation: toastIn .4s var(--spring) both;
}
.toast.is-bad { border-color: rgba(239, 68, 68, .45); background: rgba(58, 22, 22, .97); }
.toast.is-good { border-color: rgba(31, 165, 74, .45); background: rgba(16, 46, 28, .97); }
.toast.is-out { animation: toastOut .3s var(--ease) forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px) scale(.97); } }

.confetti {
  position: fixed; inset: 0; z-index: 92;
  pointer-events: none;
}

.inline-form { display: flex; gap: 9px; }
.inline-form input { flex: 1; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

.or-split {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--muted); font-size: 12px;
}
.or-split::before, .or-split::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.onboard { display: grid; gap: 0; max-width: 460px; margin: 0 auto; }

.code-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px;
  border-radius: 11px;
  background: rgba(0, 0, 0, .32);
  border: 1px dashed var(--line-hi);
  font-size: 17px; font-weight: 800; letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
}

.pool-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 13px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
  margin-bottom: 9px;
  text-align: left;
}
.pool-row.is-on { border-color: var(--accent); background: rgba(245, 165, 36, .1); }

.skeleton {
  border-radius: var(--r);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  height: 96px; margin-bottom: 13px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* =====================================================================
   What-if simulator
   ===================================================================== */
.scenario-head {
  display: grid; gap: 6px;
  padding: 13px;
  border-radius: 12px;
  background: rgba(74, 155, 245, .1);
  border: 1px solid rgba(74, 155, 245, .25);
  font-size: 13.5px; color: #cfe4ff;
  margin-bottom: 14px;
}
.scenario-head b { color: #fff; }
.sc-winner {
  font-size: 16px; font-weight: 700; color: #fff;
  display: block;
}
.sc-winner b { color: var(--accent-2); }
.sc-sub { font-size: 12.5px; }

.sc-section {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  margin: 18px 0 9px;
}

.sc-game {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.sc-game.is-final { opacity: .72; }
.sc-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.sc-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-team {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 650;
  transition: all .2s var(--ease);
}
.sc-team img { width: 20px; height: 20px; object-fit: contain; }
.sc-team b { margin-left: auto; font-variant-numeric: tabular-nums; }
.sc-team.is-on {
  background: var(--turf-dim);
  border-color: var(--turf);
  color: #b8f5cd;
}
.sc-team:disabled { cursor: default; }
.sc-team:not(:disabled):active { transform: scale(.96); }

.sc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(148, 163, 184, .08);
}
.sc-row.is-me { background: rgba(245, 165, 36, .07); border-radius: 10px; padding-left: 8px; }
.sc-rank {
  width: 22px; text-align: center;
  font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sc-who { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; }
.sc-who small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.sc-pts {
  font-size: 18px; font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sc-pts small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; }

.mv { font-size: 11px; font-weight: 800; }
.mv.up { color: #4ade80; }
.mv.down { color: #f87171; }

/* ------------------------------------------------------- emoji picker */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  max-height: 232px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.emoji-grid button {
  aspect-ratio: 1;
  border-radius: 10px;
  font-size: 20px;
  background: transparent;
  border: 1px solid transparent;
  transition: transform .18s var(--spring), background .2s;
}
.emoji-grid button:active { transform: scale(1.22); }
.emoji-grid button.is-on {
  background: rgba(245, 165, 36, .22);
  border-color: rgba(245, 165, 36, .5);
}

/* --------------------------------------------------- chat delete + invite */
.msg-del {
  color: var(--muted);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 6px;
  opacity: .5;
  transition: opacity .2s, color .2s, background .2s;
}
.msg-del:hover, .msg-del:active { opacity: 1; color: #ffa8a8; background: var(--loss-dim); }

.invite-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 13px;
  background: rgba(31, 165, 74, .12);
  border: 1px solid rgba(31, 165, 74, .32);
  font-size: 13.5px; color: #b8f5cd;
  animation: riseIn .4s var(--ease) both;
}
.invite-banner span:first-child { font-size: 20px; }

/* =====================================================================
   Admin panel
   ===================================================================== */
.admin-body { padding-bottom: 40px; }

/* Auto-flow, not a fixed column count: the site-admin-only tabs are
   hidden for a plain group leader, and a fixed grid would leave their
   empty columns behind as dead space. */
.admin-seg {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-bottom: 16px;
}
.admin-seg .seg-btn { white-space: nowrap; }
.admin-seg .seg-btn.is-active {
  color: #08111f;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
}
.admin-seg .seg-thumb { display: none; }

.admin-pane { display: none; }
.admin-pane.is-active { display: block; animation: fadeSlide .3s var(--ease) both; }

.admin-row {
  display: flex; gap: 12px;
  padding: 14px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 10px;
}
.admin-who { flex: 1; min-width: 0; }
.admin-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-meta { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-word; }
.admin-actions {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-top: 10px;
}
.admin-actions .btn { padding: 7px 11px; font-size: 12.5px; }
.btn.danger, .btn-danger {
  color: #ffb4b4;
  border-color: rgba(239, 68, 68, .38);
}
.btn.danger:active, .btn-danger:active { background: var(--loss-dim); }
.btn-danger { --btn-bg: var(--loss-dim); }

.mini-select {
  padding: 7px 10px;
  font-size: 12.5px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
}
.mini-select:focus { outline: none; border-color: var(--accent); }

/* manual score entry */
.score-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.score-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid rgba(148, 163, 184, .08);
}
.score-team { font-size: 13px; font-weight: 650; }
.score-at { font-size: 11.5px; color: var(--muted); }
.score-in {
  width: 58px;
  padding: 7px 8px;
  text-align: center;
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .34);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
}
.score-in:focus { outline: none; border-color: var(--accent); }

.danger-card { border-color: rgba(239, 68, 68, .3); }
.kill-panel {
  margin-top: 10px; padding: 12px;
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: 12px;
  background: rgba(239, 68, 68, .07);
}
.kill-panel input {
  width: 100%; padding: 9px 11px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid var(--line);
  border-radius: 10px; color: var(--text);
}
.kill-panel input:focus { outline: none; border-color: var(--loss); }
.pw-reveal { margin-top: 12px; border-color: rgba(245, 165, 36, .4); }

/* ===================================================================
   Extra motion pass
   =================================================================== */

/* points chip: a springy press, and a flash when it lands */
.conf-chip { position: relative; overflow: hidden; }
.conf-chip.is-on::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), transparent 62%);
  animation: chipFlash .5s var(--ease) forwards;
}
@keyframes chipFlash { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.7); } }

/* a team tap sends a ring out from the card */
.team.just-picked::after {
  content: "";
  position: absolute; left: 50%; top: 42%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid var(--turf);
  animation: ripple .55s var(--ease) forwards;
  pointer-events: none;
}
@keyframes ripple {
  from { opacity: .8; transform: scale(1); }
  to   { opacity: 0; transform: scale(9); }
}

/* the whole card acknowledges the pick */
.pick-card.just-set { animation: cardNudge .4s var(--spring); }
@keyframes cardNudge {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.014); }
  100% { transform: scale(1); }
}

/* live score ticking over */
.team-score.bumped { animation: scoreBump .55s var(--spring); }
@keyframes scoreBump {
  0%   { transform: scale(1); color: var(--text); }
  35%  { transform: scale(1.32); color: var(--accent-2); }
  100% { transform: scale(1); }
}

/* progress rail shimmer while the card is incomplete */
.progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: sweep 2.4s var(--ease) infinite;
}
.progress-fill { position: relative; overflow: hidden; }

/* sheets get a backdrop that fades rather than snapping */
.sheet-scrim { animation: fadeIn .22s ease both; }
.sheet-body > * { animation: riseIn .34s var(--ease) both; }

/* league chips */
.league-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; min-height: 38px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 13px; font-weight: 650;
  transition: transform .2s var(--spring), background .22s, color .22s, border-color .22s;
}
.league-chip:active { transform: scale(.94); }
.league-chip .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.league-chip.is-on {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: transparent; color: #0a1220;
}
.league-chip.is-on .n { color: rgba(10, 18, 32, .6); }
.league-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.league-row::-webkit-scrollbar { display: none; }

/* league toggles in the admin panel */
.league-opt {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
  margin-bottom: 9px;
  cursor: pointer;
  transition: border-color .22s, background .22s;
}
.league-opt.is-on { border-color: rgba(31, 165, 74, .45); background: rgba(31, 165, 74, .08); }
.league-opt.is-off { opacity: .55; cursor: not-allowed; border-style: dashed; }
.league-opt input { width: 20px; height: 20px; accent-color: var(--turf); cursor: pointer; }
.league-opt b { display: block; font-size: 15px; font-weight: 700; }
.league-opt span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* =====================================================================
   Late entry

   The forfeited games stay on the card rather than being hidden: the
   point of the penalty is that you can see what it cost.
   ===================================================================== */
.late-note {
  padding: 14px 15px; margin-bottom: 13px;
  border-radius: 13px;
  border: 1px solid rgba(239, 68, 68, .34);
  background: linear-gradient(180deg, rgba(239, 68, 68, .13), rgba(239, 68, 68, .06));
  animation: riseIn .5s var(--ease) both;
}
.late-note strong { display: block; font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.late-note p { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.late-note b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }

.pick-card.is-forfeit {
  border-style: dashed;
  border-color: rgba(239, 68, 68, .3);
  background: rgba(239, 68, 68, .05);
}
.pick-card.is-forfeit .team-row { opacity: .5; }
.pick-card.is-forfeit .conf-chip.is-on {
  background: var(--loss-dim);
  border-color: rgba(239, 68, 68, .45);
  color: #ff8f8f;
}
/* The forced side is NOT a choice they made, so it must not wear the
   green "you picked this" marker. It reads as the loss it is. */
.pick-card.is-forfeit .team.is-picked { box-shadow: inset 0 -3px 0 var(--loss); }
.pick-card.is-forfeit .team.is-picked::before { transform: scaleY(0); }
.pick-card.is-forfeit .team.is-picked .team-name { color: #ffc9c9; font-weight: 700; }
.pick-card.is-forfeit .team.is-picked .team-sub  { color: #e79a9a; }

/* A single on/off row, same furniture as the league switches. */
.fld-check {
  display: grid; grid-template-columns: 20px 1fr; gap: 4px 13px; align-items: center;
  padding: 14px 15px; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .22);
  margin-bottom: 13px; cursor: pointer;
  transition: border-color .22s, background .22s;
}
.fld-check:has(input:checked) { border-color: rgba(31, 165, 74, .45); background: rgba(31, 165, 74, .08); }
.fld-check input { width: 20px; height: 20px; accent-color: var(--turf); cursor: pointer; }
/* Present but not usable yet, because its migration has not been run. */
.fld-check.is-off { opacity: .6; border-style: dashed; cursor: not-allowed; }
.fld-check.is-off input { cursor: not-allowed; }
.fld-check code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; padding: 1px 5px; border-radius: 5px;
  background: rgba(148, 163, 184, .16); color: var(--text-2);
}
.fld-check > span { font-size: 15px; font-weight: 700; }
.fld-check .hint { grid-column: 2; font-size: 12px; color: var(--muted); line-height: 1.5; }


/* =====================================================================
   Premium
   ===================================================================== */
.pro-wall {
  text-align: center;
  padding: 34px 22px;
  border: 1px dashed rgba(245, 165, 36, .4);
  border-radius: var(--r);
  background: radial-gradient(90% 70% at 50% 0%, rgba(245, 165, 36, .1), transparent);
}
.pro-crest {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #0a1220;
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  margin-bottom: 14px;
}
.pro-wall h3 { font-size: 18px; margin-bottom: 9px; }
.pro-wall p { color: var(--text-2); font-size: 14px; max-width: 40ch; margin: 0 auto; line-height: 1.5; }
.pro-note { margin-top: 12px !important; font-size: 12.5px !important; color: var(--muted) !important; }

.pro-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 5px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #0a1220;
}

/* accuracy-by-confidence bars */
.tier-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.tier-pts {
  width: 30px; height: 28px; flex-shrink: 0;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(245, 165, 36, .14);
  border: 1px solid rgba(245, 165, 36, .25);
  color: var(--accent-2);
  font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tier-bar {
  flex: 1; height: 8px; border-radius: 5px;
  background: rgba(0, 0, 0, .35);
  overflow: hidden;
}
.tier-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--turf), var(--accent));
  transition: width .7s var(--ease);
}
.tier-num {
  width: 62px; text-align: right;
  font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tier-num small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* who is holding the next card */
.week-job {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(74, 155, 245, .09);
  border: 1px solid rgba(74, 155, 245, .25);
  font-size: 13px; color: #cfe4ff;
  margin-bottom: 13px;
}
.week-job b { color: #fff; }

/* ------------------------------------------------------------ motion */
@keyframes riseIn   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeSlide{ from { opacity: 0; transform: translateX(8px);  } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

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

/* --------------------------------------------------------- larger up */
@media (min-width: 700px) {
  .view { padding: 24px 20px 40px; }
  .sheet { left: 50%; transform: translateX(-50%); max-width: 640px; border-radius: 24px; bottom: 20px; }
  @keyframes sheetUp {
    from { transform: translate(-50%, 100%); }
    to   { transform: translate(-50%, 0); }
  }
  .tabbar { max-width: 640px; margin: 0 auto; border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: 0; }
}

/* =====================================================================
   Report a problem

   .seg / .seg-btn already belong to the sign-in segmented control, so
   these carry their own names rather than inheriting a grid and a
   sliding thumb they do not want.
   ===================================================================== */
.kind-row { display: flex; flex-wrap: wrap; gap: 7px; }
.kind-btn {
  flex: 1 1 auto;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .26);
  color: var(--text-2);
  font-size: 13px; font-weight: 600;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.kind-btn.is-on {
  border-color: var(--accent);
  background: rgba(245, 165, 36, .14);
  color: var(--text);
}
#reportForm textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  font: inherit;
  line-height: 1.5;
}

/* =====================================================================
   What's new — the public changelog page
   ===================================================================== */
.cl-body { min-height: 100vh; background: var(--bg); }
.cl-wrap {
  position: relative; z-index: 2;
  max-width: 640px; margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(60px + env(safe-area-inset-bottom));
}
.cl-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 22px;
}
.cl-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
}
.cl-back:hover { color: var(--text-2); }
.cl-back svg { width: 16px; height: 16px; }

.cl-head h1 { font-size: 30px; font-weight: 800; line-height: 1.1; }
.cl-head p  { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-2); }

.cl-day { margin-top: 28px; }
.cl-day h2 {
  margin-bottom: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.cl-entry {
  padding: 16px; margin-bottom: 10px;
  animation: riseIn .5s var(--ease) both;
  animation-delay: calc(min(var(--i), 10) * 45ms);
}
/* Arrived since this person last opened the page. */
.cl-entry.is-unseen { box-shadow: inset 0 0 0 1px rgba(245, 165, 36, .55); }
.cl-entry h3 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 16px; font-weight: 750; line-height: 1.3;
}
.cl-entry p {
  margin-top: 8px;
  font-size: 14px; line-height: 1.62; color: var(--text-2);
  white-space: pre-line;          /* line breaks typed in the console survive */
}
.cl-tag {
  padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.cl-tag.is-new      { background: rgba(245, 165, 36, .16); color: var(--accent-2); }
.cl-tag.is-improved { background: rgba(74, 155, 245, .16); color: #9cc8ff; }
.cl-tag.is-fixed    { background: var(--turf-dim);         color: #7ee2a3; }

.cl-feedback { margin-top: 34px; padding: 18px; scroll-margin-top: 16px; }
.cl-feedback .muted { margin: 4px 0 14px; line-height: 1.5; }
.cl-feedback textarea {
  width: 100%; min-height: 120px; resize: vertical; line-height: 1.5;
}
.cl-thanks {
  padding: 14px; border-radius: var(--r-sm);
  background: var(--turf-dim); color: #b6f0cb;
  font-size: 14px; font-weight: 600; text-align: center;
}

/* A dot on the avatar while there is an update this person has not read. */
.avatar-btn { position: relative; }
.avatar-btn.has-news::after {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-2);
}
.news-pill {
  margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  background: var(--accent); color: #0a1220;
}

@media (prefers-reduced-motion: reduce) {
  .cl-entry { animation: none; }
}