/* ============================================================
   KEEP OR CUT — design system
   Primetime-broadcast-meets-trading-card-pack. Dark stadium base,
   green=keep / red=cut, gold brand gradient, heavy display type.
   ============================================================ */

:root {
  --bg: #070b14;
  --bg2: #0b1120;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-hi: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.10);
  --ink: #f2f5fb;
  --ink-dim: #9aa6bd;
  --ink-faint: #5d6a84;
  --brand-a: #ffb612;
  --brand-b: #ff5f1f;
  --brand-c: #ff2d78;
  --grad: linear-gradient(100deg, var(--brand-a), var(--brand-b) 55%, var(--brand-c));
  --keep: #2ee68a;
  --cut: #ff4d5e;
  --good: #2ee68a;
  --bad: #ff4d5e;
  --gold: #ffd24a;
  --radius: 18px;
  --dock-h: 92px;
  --font-display: -apple-system, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* body must GROW with content (min-height, not height) or it becomes a
   one-viewport containing block and the sticky topbar stops sticking */
html { height: 100%; }
body { min-height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  background-image: radial-gradient(1200px 700px at 80% -10%, rgba(46, 230, 138, 0.13), transparent 60%),
    radial-gradient(1000px 600px at -10% 20%, rgba(255, 77, 94, 0.10), transparent 55%);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  user-select: none;
}

#bggl {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; opacity: 0.9;
}

.hidden { display: none !important; }
.hidden-canvas { position: fixed; left: -3000px; top: 0; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 560px; margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: linear-gradient(rgba(7, 11, 20, 0.92), rgba(7, 11, 20, 0.75) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.brand {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; color: var(--ink);
}
.brand-bench { font-size: 20px; filter: drop-shadow(0 2px 6px rgba(255, 77, 94, .5)); }
.brand-word {
  font-family: var(--font-display);
  font-weight: 900; font-size: 21px; letter-spacing: 0.03em;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.brand-word em { font-style: normal; }
.bw-keep { color: var(--keep); }
.bw-or { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.bw-cut { color: var(--cut); text-decoration: line-through; text-decoration-thickness: 3px; }

.topbar-right { display: flex; gap: 8px; }

.chip {
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink);
  font-size: 13px; font-weight: 700; padding: 7px 12px;
  cursor: pointer; transition: background .15s, transform .1s;
}
.chip:active { transform: scale(0.94); }
.icon-chip { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; font-size: 15px; }
.streak-chip b { color: var(--gold); }

/* ---------- screens ---------- */
#app { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 0 16px 40px; }
.screen { display: none; animation: screen-in .28s ease both; }
.screen.active { display: block; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- home ---------- */
.hero { padding: 18px 2px 16px; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 900; font-size: clamp(38px, 11vw, 56px);
  line-height: 0.98; letter-spacing: -0.02em;
}
.keep-text {
  background: linear-gradient(100deg, var(--keep), #a6ffd4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cut-text { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--cut); text-decoration-thickness: 4px; }
.hero-sub { margin-top: 10px; color: var(--ink-dim); font-size: 15px; max-width: 42ch; }
.hero-sub em { color: var(--ink); font-style: normal; font-weight: 700; }

.daily-card {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; padding: 18px;
  border: 1px solid transparent; border-radius: var(--radius);
  background:
    linear-gradient(var(--bg2), var(--bg2)) padding-box,
    var(--grad) border-box;
  color: var(--ink); cursor: pointer; text-align: left;
  box-shadow: 0 10px 40px rgba(255, 45, 120, 0.18);
  transition: transform .12s;
}
.daily-card:active { transform: scale(0.985); }
.daily-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--brand-b); }
.daily-title { font-family: var(--font-display); font-weight: 900; font-size: 22px; margin-top: 4px; }
.daily-tag { color: var(--ink-dim); font-size: 13px; margin-top: 3px; }
.daily-right { text-align: center; }
.daily-cta {
  font-weight: 900; font-size: 13px; letter-spacing: 0.08em;
  padding: 8px 14px; border-radius: 999px; background: var(--grad); color: #fff;
  box-shadow: 0 4px 18px rgba(255, 95, 31, 0.4);
}
.daily-cta.played { background: var(--panel-hi); box-shadow: none; color: var(--ink-dim); }
.daily-sport { font-size: 26px; margin-top: 8px; }

.challenge-strip {
  margin-top: 12px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-radius: var(--radius); border: 1px dashed var(--brand-b);
  background: rgba(255, 45, 120, 0.08); font-size: 14px;
}

.sport-chips { display: flex; gap: 8px; overflow-x: auto; padding: 18px 2px 4px; scrollbar-width: none; }
.sport-chips::-webkit-scrollbar { display: none; }
.sport-chip { flex: 0 0 auto; }
.sport-chip.on { background: var(--grad); border-color: transparent; color: #fff; }
/* All-Stars toggle: a real switch, not a filter chip */
.allstar-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid rgba(255, 210, 74, 0.35); border-radius: var(--radius);
  background: rgba(255, 210, 74, 0.05);
}
.allstar-label { font-size: 13px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.allstar-label b { font-family: var(--font-display); }
.allstar-label small { color: var(--ink-dim); font-size: 11px; }
.switch {
  position: relative; flex: 0 0 auto; width: 52px; height: 30px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-hi); cursor: pointer;
  transition: background .2s, border-color .2s; padding: 0;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px;
  background: var(--ink-dim); transition: transform .2s, background .2s;
}
.switch.on { background: linear-gradient(100deg, #b8860b, var(--gold)); border-color: var(--gold); }
.switch.on .knob { transform: translateX(22px); background: #201500; }
.switch:active .knob { width: 26px; }

.pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pack-card {
  position: relative; text-align: left; padding: 14px; min-height: 110px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); cursor: pointer;
  transition: transform .12s, border-color .15s;
  overflow: hidden;
}
.pack-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent, var(--grad));
}
.pack-card:active { transform: scale(0.97); }
.pack-emoji { font-size: 22px; }
.pack-name { font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.15; }
.pack-sub { color: var(--ink-dim); font-size: 12px; }
.pack-done { position: absolute; top: 10px; right: 10px; font-size: 14px; }
.pack-card.locked { opacity: 0.85; }
.pack-card.locked .pack-name { color: var(--gold); }

.promo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.promo-card {
  display: flex; gap: 10px; align-items: center; text-align: left;
  padding: 13px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.promo-card b { display: block; font-size: 14px; }
.promo-card span { display: block; color: var(--ink-dim); font-size: 11px; margin-top: 2px; }
.promo-emoji { font-size: 22px; }
/* "Get the app" bar for non-Safari iOS browsers (Safari gets Apple's own).
   Sits at the very top and pushes nothing — position:fixed with a body offset
   would fight the app's single-viewport draft layout, so it floats over the
   header and is dismissible. */
.appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: rgba(11, 17, 32, 0.97); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding-top: calc(8px + env(safe-area-inset-top));
}
.appbar-x { background: none; border: none; color: var(--ink-faint); font-size: 15px; cursor: pointer; padding: 4px; }
.appbar-icon { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.appbar-text { flex: 1; min-width: 0; }
.appbar-text b { display: block; font-size: 13px; color: var(--ink); }
.appbar-text span { display: block; font-size: 11px; color: var(--ink-dim); }
.appbar-cta {
  flex: none; padding: 7px 16px; border-radius: 999px; background: var(--grad);
  color: #fff; font-size: 12px; font-weight: 900; text-decoration: none; letter-spacing: .04em;
}

.pro-card { border-color: rgba(255, 210, 74, 0.35); }
/* Pro owned: the card stops selling and starts confirming. */
.pro-card.pro-on { border-color: var(--gold); background: rgba(255, 210, 74, 0.09); cursor: default; }
.pro-card.pro-on b { color: var(--gold); }
.arena-card { border-color: rgba(46, 230, 138, 0.3); }

.ad-slot {
  margin-top: 16px; min-height: 64px; border-radius: 14px;
  border: 1px dashed var(--line); overflow: hidden;
}

.fineprint { margin-top: 14px; text-align: center; color: var(--ink-faint); font-size: 11.5px; }
.fineprint span {
  text-decoration: underline; cursor: pointer;
  /* inflate the tap target to ~44px without moving the layout */
  display: inline-block; padding: 16px 10px; margin: -16px -10px;
}

/* ---------- draft ---------- */
.draft-head { display: flex; align-items: center; gap: 12px; padding: 12px 0 4px; }
.draft-headtext { flex: 1; min-width: 0; }
.draft-title { font-family: var(--font-display); font-weight: 900; font-size: 19px; }
.draft-tag { color: var(--ink-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-chip { font-size: 10px; letter-spacing: 0.12em; padding: 6px 10px; cursor: default; }
.mode-chip.daily { border-color: var(--brand-b); color: var(--brand-b); }
.mode-chip.challenge { border-color: var(--good); color: var(--good); }

.slotbar-wrap {
  /* topbar is 56px + the device notch; pin just below it */
  position: sticky; top: calc(54px + env(safe-area-inset-top)); z-index: 30;
  padding: 8px 0 14px;
  background: linear-gradient(var(--bg) 88%, transparent);
}
.slotbar-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--ink-dim); margin-bottom: 8px; }
.slotbar-label span { color: var(--brand-b); }
.slotbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.slot {
  height: 66px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1.5px dashed var(--line); background: rgba(10, 15, 28, 0.92);
  font-size: 22px; transition: all .18s; cursor: pointer; overflow: hidden;
}
.slot.filled {
  border-style: solid; border-color: var(--slot-color, var(--brand-b));
  background: color-mix(in srgb, var(--slot-color, #ff2d78) 20%, #0a0f1c);
  animation: slot-pop .25s ease;
}
@keyframes slot-pop { 0% { transform: scale(.7); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.slot-name {
  font-size: 8.5px; font-weight: 800; color: var(--ink-dim); white-space: nowrap;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis; line-height: 1;
}

.player-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding-bottom: calc(var(--dock-h) + 20px); }
.pcard {
  position: relative; text-align: left; padding: 12px; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--panel); color: var(--ink);
  cursor: pointer; transition: transform .12s, border-color .15s, opacity .2s, filter .2s;
  overflow: hidden;
}
.pcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pc, var(--line)); }
.pcard:active { transform: scale(0.96); }
.pcard-top { display: flex; align-items: center; gap: 9px; }
.pcard-jersey {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 20px; background: color-mix(in srgb, var(--pc, #888) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #888) 45%, transparent);
}
.pcard-name { font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1.1; overflow-wrap: anywhere; }
.pcard-meta { color: var(--ink-dim); font-size: 10.5px; margin-top: 2px; font-weight: 600; }
.pcard-accolade { margin-top: 8px; font-size: 11px; color: var(--ink-dim); line-height: 1.3; }
.pcard .tag {
  position: absolute; top: 7px; right: 7px; font-size: 8px; font-weight: 900; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 6px; opacity: 0; transform: rotate(6deg) scale(.6); transition: all .18s;
  pointer-events: none;
}
.pcard .pcard-name { padding-right: 4px; }
.pcard.starting { border-color: var(--brand-b); box-shadow: 0 6px 24px rgba(255, 45, 120, 0.22); }
.pcard.starting .tag.start { opacity: 1; transform: rotate(0) scale(1); background: var(--grad); color: #fff; }
.pcard.benched { opacity: 0.55; filter: saturate(0.4); }
.pcard.benched .tag.sit { opacity: 1; transform: rotate(-4deg) scale(1); background: var(--panel-hi); color: var(--ink-dim); border: 1px solid var(--line); }

.lockdock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(7, 11, 20, 0.92) 40%);
  display: flex; justify-content: center;
}
.lockdock .btn { max-width: 528px; }

/* ---------- buttons ---------- */
.btn {
  width: 100%; padding: 16px 20px; border: none; border-radius: 16px;
  background: var(--grad); color: #fff; cursor: pointer;
  font-family: var(--font-display); font-weight: 900; font-size: 16px; letter-spacing: 0.06em;
  box-shadow: 0 8px 30px rgba(255, 45, 120, 0.35);
  transition: transform .12s, opacity .15s, box-shadow .15s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { background: var(--panel-hi); color: var(--ink-faint); box-shadow: none; cursor: default; }
.btn.small { width: auto; padding: 10px 16px; font-size: 13px; border-radius: 12px; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-dim); box-shadow: none; }
.lock-btn:not(:disabled) { animation: lock-pulse 1.6s ease-in-out infinite; }
@keyframes lock-pulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(255, 45, 120, 0.35); }
  50% { box-shadow: 0 8px 44px rgba(255, 95, 31, 0.6); }
}

/* ---------- results ---------- */
.results-flow { padding: 14px 0 60px; display: flex; flex-direction: column; gap: 14px; }
.rpanel {
  border: 1px solid var(--line); border-radius: var(--radius); background: rgba(11, 17, 32, 0.75);
  padding: 16px; animation: rpanel-in .4s cubic-bezier(.2, .9, .3, 1.2) both;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@keyframes rpanel-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.rpanel h3 { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.16em; color: var(--ink-dim); margin-bottom: 10px; }

.lineup-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lineup-chipp {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  font-size: 12px; font-weight: 700;
}
.lineup-chipp .je { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; background: color-mix(in srgb, var(--pc, #888) 30%, transparent); }
.lineup-chipp .ovr { color: var(--gold); font-weight: 900; font-size: 11px; }
.lineup-chipp.dim { opacity: 0.6; }
.bench-strike { text-decoration: line-through; text-decoration-color: var(--brand-b); }

.power-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.power-box { flex: 1; text-align: center; padding: 10px; border-radius: 12px; background: var(--panel); }
.power-box .num { font-family: var(--font-display); font-weight: 900; font-size: 26px; }
.power-box .lbl { font-size: 10px; letter-spacing: 0.12em; color: var(--ink-dim); }
.power-vs { font-family: var(--font-display); font-weight: 900; color: var(--ink-faint); }

/* sim */
.sim-board { text-align: center; }
.sim-series { display: flex; justify-content: center; gap: 8px; margin: 6px 0 12px; }
.sdot { width: 12px; height: 12px; border-radius: 999px; background: var(--panel-hi); border: 1px solid var(--line); transition: all .2s; }
.sdot.w { background: var(--good); border-color: var(--good); box-shadow: 0 0 10px rgba(46, 230, 138, .6); }
.sdot.l { background: var(--bad); border-color: var(--bad); box-shadow: 0 0 10px rgba(255, 77, 94, .6); }
.sim-score {
  font-family: var(--font-display); font-weight: 900; font-size: 40px; letter-spacing: 0.02em;
  display: flex; justify-content: center; align-items: baseline; gap: 14px;
}
.sim-score .tname { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim); display: block; margin-top: 2px; }
.sim-ticker {
  margin-top: 12px; min-height: 44px; font-size: 13px; color: var(--ink-dim);
  border-top: 1px solid var(--line); padding-top: 10px;
}
.sim-ticker b { color: var(--ink); }
.sim-verdict { font-family: var(--font-display); font-weight: 900; font-size: 22px; margin-top: 10px; line-height: 1.15; }
.sim-verdict.good { color: var(--good); }
.sim-verdict.bad { color: var(--bad); }

/* hot take meter */
.temp-wrap { text-align: center; }
.temp-big { font-family: var(--font-display); font-weight: 900; font-size: 44px; }
.temp-label { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; margin-top: 2px; }
.temp-bar { height: 10px; border-radius: 999px; background: var(--panel-hi); margin-top: 12px; overflow: hidden; }
.temp-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #3da5ff, var(--gold), var(--brand-a), var(--brand-b)); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.temp-note { margin-top: 10px; font-size: 12.5px; color: var(--ink-dim); }
.temp-note b { color: var(--ink); }

.crowd-row { display: flex; flex-direction: column; gap: 6px; }
.crowd-line { display: grid; grid-template-columns: 120px 1fr 40px; align-items: center; gap: 8px; font-size: 12px; }
.crowd-line .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crowd-line .bar { height: 7px; border-radius: 999px; background: var(--panel-hi); overflow: hidden; }
.crowd-line .bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.crowd-line .pc2 { text-align: right; color: var(--ink-dim); font-weight: 700; }
.crowd-line.you .nm::after { content: " ✔"; color: var(--good); }

/* share panel */
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.share-actions .btn { font-size: 13px; padding: 13px 10px; }
.share-actions .wide { grid-column: 1 / -1; }
.share-preview { width: 60%; max-width: 200px; margin: 4px auto 0; border-radius: 14px; border: 1px solid var(--line); display: block; }
/* smaller now that it sits BELOW chat + the rematch CTA — it's a preview of what
   you'd post, not the headline of the screen */
.share-preview.match-recap { width: 62%; max-width: 220px; margin: 10px auto 4px; }

.h2h-note { font-size: 13px; color: var(--ink-dim); text-align: center; margin-top: 6px; }

/* ---------- modals ---------- */
.modal-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(3, 5, 10, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal {
  position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 420px); padding: 22px; border-radius: 22px;
  background: var(--bg2); border: 1px solid var(--line);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  animation: modal-in .22s ease both;
}
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.modal h2 { font-family: var(--font-display); font-weight: 900; font-size: 22px; margin-bottom: 12px; }
.modal .btn { margin-top: 14px; }
.howto-list { padding-left: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--ink-dim); }
.howto-list b { color: var(--ink); }
.pro-list { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-dim); }
.pro-list li::before { content: "✓ "; color: var(--good); font-weight: 900; }
.pro-price { margin-top: 14px; font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--gold); }
.modal p { font-size: 14px; color: var(--ink-dim); line-height: 1.5; }

.ad-label { font-size: 10px; letter-spacing: 0.2em; color: var(--ink-faint); font-weight: 800; }
.ad-fake { margin-top: 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.ad-fake-inner { height: 220px; display: grid; place-items: center; text-align: center; padding: 16px; font-size: 14px; color: var(--ink-dim); }

.name-input {
  width: 100%; padding: 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-size: 16px; font-weight: 700; outline: none;
}
.name-input:focus { border-color: var(--brand-b); }

/* house ad inside banner slot */
.house-ad {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  background: linear-gradient(100deg, rgba(255, 95, 31, .12), rgba(123, 45, 255, .12));
}
.house-ad .he { font-size: 24px; }
.house-ad b { display: block; font-size: 13px; }
.house-ad span { font-size: 11px; color: var(--ink-dim); }
.house-ad .ad-tag { margin-left: auto; font-size: 9px; color: var(--ink-faint); letter-spacing: .15em; font-weight: 800; }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; z-index: 80; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  padding: 11px 18px; border-radius: 999px; background: rgba(20, 27, 45, 0.95);
  border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 700;
  animation: toast-in .25s ease both; box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  max-width: 88vw; text-align: center;
}
.toast.out { animation: toast-out .3s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- confetti ---------- */
.confetti-canvas { position: fixed; inset: 0; z-index: 70; pointer-events: none; }

/* ---------- wider screens ---------- */
@media (min-width: 560px) {
  .player-grid, .pack-grid { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: 58px; }
}
@media (max-width: 360px) {
  .player-grid { grid-template-columns: 1fr; }
  .pcard-name { font-size: 13px; }
  .crowd-line { grid-template-columns: 96px 1fr 36px; }
}

/* ============================================================
   KEEP OR CUT v2 — one-card-at-a-time draft
   ============================================================ */

.fineprint.dim { opacity: 0.7; font-size: 10.5px; }

/* battle-a-friend card */
.battle-card {
  width: 100%; display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 14px 16px; text-align: left;
  border: 1px solid rgba(46, 230, 138, 0.35); border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(46, 230, 138, 0.10), rgba(255, 77, 94, 0.08));
  color: var(--ink); cursor: pointer; transition: transform .12s;
}
.battle-card:active { transform: scale(0.985); }
.battle-emoji { font-size: 24px; }
.battle-text { flex: 1; min-width: 0; }
.battle-text b { display: block; font-family: var(--font-display); font-size: 15px; }
.battle-text span { display: block; color: var(--ink-dim); font-size: 12px; margin-top: 2px; }
.battle-go {
  font-weight: 900; font-size: 12px; letter-spacing: 0.08em; white-space: nowrap;
  padding: 8px 12px; border-radius: 999px; background: var(--keep); color: #04140b;
}

/* kept / cut rows */
.squadbar { padding: 8px 0 2px; }
.squadbar.cutbar { padding-bottom: 0; }
.squadbar-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; margin-bottom: 7px; }
.keep-label { color: var(--keep); }
.cut-label { color: var(--cut); }
.squadbar-label span { color: var(--ink-dim); }
.slot { height: 58px; font-size: 19px; }
.slot.keep-slot.filled { border-color: color-mix(in srgb, var(--slot-color, #888) 70%, var(--keep)); }
.slot.cut-slot.filled {
  border-color: color-mix(in srgb, var(--slot-color, #888) 45%, transparent);
  filter: saturate(0.5); opacity: 0.75;
}
.slot.cut-slot.filled .slot-name { text-decoration: line-through; text-decoration-color: var(--cut); }

/* deck status */
.deck-status {
  text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--ink-dim); padding: 12px 0 8px;
}
.deck-status .k { color: var(--keep); }
.deck-status .c { color: var(--cut); }

/* ---- one-viewport draft: everything (rows, card, KEEP/CUT) fits on screen,
   no scrolling to find the buttons. svh = small viewport, so iOS Safari's
   collapsed toolbar can never cover the dock. ---- */
#screen-draft.active {
  display: flex; flex-direction: column;
  height: calc(100vh - 56px - env(safe-area-inset-top));
  height: calc(100svh - 56px - env(safe-area-inset-top));
  overflow: hidden;
}
#app:has(#screen-draft.active) { padding-bottom: 0; }
#screen-draft .draft-head { padding: 8px 0 2px; flex: 0 0 auto; }
#screen-draft .squadbar, #screen-draft .deck-status, #screen-draft .decision-feedback { flex: 0 0 auto; }

/* the big card */
.card-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center;
  touch-action: pan-y;
}
.bigcard {
  position: absolute; width: min(88%, 330px);
  border-radius: 24px; padding: 18px 18px 16px;
  border: 1.5px solid color-mix(in srgb, var(--pc, #888) 55%, var(--line));
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--pc, #888) 32%, transparent), transparent 60%),
    linear-gradient(rgba(13, 19, 36, 0.97), rgba(9, 13, 26, 0.97));
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 40px color-mix(in srgb, var(--pc, #888) 18%, transparent);
  text-align: center; cursor: grab; will-change: transform;
  animation: card-in .32s cubic-bezier(.2, .9, .3, 1.2) both;
  user-select: none;
}
@keyframes card-in { from { opacity: 0; transform: translateY(26px) scale(.92) rotate(1.5deg); } to { opacity: 1; transform: none; } }
.bigcard:active { cursor: grabbing; }

.bigcard-top { display: flex; justify-content: space-between; align-items: center; }
.bc-pos {
  font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--pc, #888) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #888) 50%, transparent);
}
.bc-season { font-size: 11.5px; font-weight: 700; color: var(--ink-dim); letter-spacing: 0.04em; }

.bigcard-jersey {
  width: 84px; height: 84px; margin: 16px auto 10px; border-radius: 24px;
  display: grid; place-items: center; font-size: 42px;
  background: color-mix(in srgb, var(--pc, #888) 26%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--pc, #888) 55%, transparent);
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--pc, #888) 25%, transparent);
}
.bigcard-name {
  font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 1.05;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.bigcard-accolade { margin-top: 7px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.35; min-height: 32px; }

.bigcard-fp {
  margin-top: 12px; padding: 10px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); border: 1px dashed var(--line);
}
.bigcard-fp b { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--gold); display: block; }
.bigcard-fp b.fp-mystery { color: var(--ink-faint); letter-spacing: 0.2em; }
.bigcard-fp span { font-size: 9px; letter-spacing: 0.18em; color: var(--ink-faint); font-weight: 800; }
.bigcard-fp.shown { border-style: solid; border-color: rgba(255, 210, 74, 0.4); animation: fp-pop .3s ease; }
@keyframes fp-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* stamps */
.stamp {
  position: absolute; top: 40%; font-family: var(--font-display); font-weight: 900;
  font-size: 30px; letter-spacing: 0.06em; padding: 6px 14px; border-radius: 10px;
  border: 4px solid; opacity: 0; pointer-events: none; z-index: 2;
  transform: rotate(-14deg) scale(1.6);
  transition: opacity .12s, transform .18s;
}
.stamp-keep { left: 10px; color: var(--keep); border-color: var(--keep); background: rgba(4, 20, 11, 0.75); }
.stamp-cut { right: 10px; color: var(--cut); border-color: var(--cut); background: rgba(26, 5, 8, 0.75); transform: rotate(14deg) scale(1.6); }
.bigcard.lean-keep .stamp-keep,
.bigcard.decided-keep .stamp-keep { opacity: 1; transform: rotate(-14deg) scale(1); }
.bigcard.lean-cut .stamp-cut,
.bigcard.decided-cut .stamp-cut { opacity: 1; transform: rotate(14deg) scale(1); }
.bigcard.decided-keep { border-color: var(--keep); }
.bigcard.decided-cut { border-color: var(--cut); }
.bigcard.decided-cut .bigcard-name { text-decoration: line-through; text-decoration-color: var(--cut); text-decoration-thickness: 4px; }

.auto-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 900; letter-spacing: 0.2em; color: var(--bg);
  padding: 4px 10px; border-radius: 999px; background: var(--gold);
}
.bigcard.partner { animation: door2-in .34s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes door2-in { from { opacity: 0; transform: translateY(-30px) scale(.9) rotate(-2deg); } to { opacity: 1; transform: none; } }

/* fly-out */
.bigcard.fly-keep { animation: fly-keep .3s ease-in both; }
.bigcard.fly-cut { animation: fly-cut .3s ease-in both; }
@keyframes fly-keep { to { opacity: 0; transform: translate(120%, -30%) rotate(18deg) scale(.7); } }
@keyframes fly-cut { to { opacity: 0; transform: translate(-120%, 30%) rotate(-18deg) scale(.7); } }

/* decision feedback line */
.decision-feedback {
  text-align: center; font-size: 13.5px; color: var(--ink-dim); min-height: 40px;
  padding: 6px 8px 8px; line-height: 1.35;
}
.decision-feedback b { color: var(--ink); }

/* decision dock: CUT left, KEEP right — in-flow at the bottom of the draft
   column (NOT fixed), so it's always on screen by construction */
.decision-dock {
  position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  flex: 0 0 auto; background: none;
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
}
.decision-dock .btn { max-width: none; font-size: 17px; }
.keep-btn { background: linear-gradient(100deg, #1db56b, var(--keep)); box-shadow: 0 8px 30px rgba(46, 230, 138, 0.35); color: #04140b; }
.cut-btn { background: linear-gradient(100deg, #d63447, var(--cut)); box-shadow: 0 8px 30px rgba(255, 77, 94, 0.3); }
.decision-dock .btn:disabled { background: var(--panel-hi); color: var(--ink-faint); box-shadow: none; }

/* persistent banner at the TOP of the draft (below the header, above the KEPT row) —
   deliberately away from the rapidly-tapped KEEP/CUT buttons so a real AdSense/AdMob
   ad here won't trip accidental-click policy. A slim, bordered strip so it reads as an
   ad; flex:0 0 auto → the card-stage shrinks to make room. max-height caps it to a
   banner even if a network serves something taller. */
.draft-ad {
  flex: 0 0 auto; overflow: hidden;
  margin: 2px 0 6px; border-bottom: 1px solid var(--line);
  min-height: 54px; max-height: 104px;
  display: flex; align-items: center; justify-content: center;
}
.draft-ad.hidden { display: none; }
.draft-ad .house-ad { width: 100%; padding: 9px 12px; border-radius: 10px; margin: 2px 0; }
.draft-ad .house-ad .he { font-size: 22px; }

/* ---- THIS OR THAT (Full Squad): two cards side by side, tap to keep ---- */
.duel-wrap {
  position: relative; display: flex; gap: 10px; width: 100%; height: 100%;
  align-items: center; justify-content: center; padding: 4px 0;
}
.bigcard.duel {
  position: relative; flex: 1 1 0; max-width: 178px; min-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 12px 10px; cursor: pointer;
}
.bigcard.duel .bigcard-fp { margin-top: auto; padding: 6px; }
.bigcard.duel .bigcard-jersey { width: 54px; height: 54px; font-size: 26px; margin: 10px auto 6px; border-radius: 16px; }
.bigcard.duel .bigcard-name { font-size: 15.5px; }
.bigcard.duel .bigcard-fp b { font-size: 17px; }
.bigcard.duel .bigcard-fp span { font-size: 8px; }
.bigcard.duel .stamp { font-size: 16px; border-width: 3px; top: 34%; padding: 4px 8px; }
.bigcard.duel:not(.decided-keep):not(.decided-cut):active { transform: scale(0.97); }
.duel-vs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 900; font-size: 14px; color: var(--gold);
  background: var(--bg2); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 9px; z-index: 3; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.duel-hint {
  display: none; grid-column: 1 / -1; text-align: center;
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--ink-dim);
  padding: 16px 0;
}
#screen-draft.duel-pack .decision-dock .btn { display: none; }
#screen-draft.duel-pack .duel-hint { display: block; }

/* ---- backend UI: arena, auth, stats/battles, save panel ---- */
.arena-home-card { border-color: rgba(255, 210, 74, 0.4); background: linear-gradient(100deg, rgba(255, 182, 18, 0.10), rgba(61, 165, 255, 0.08)); }
.arena-go { background: var(--gold); color: #201500; }
.mode-chip.arena { border-color: var(--gold); color: var(--gold); }

.auth-sub { font-size: 13px; color: var(--ink-dim); line-height: 1.45; margin-bottom: 12px; }
.auth-divider { text-align: center; color: var(--ink-faint); font-size: 12px; font-weight: 700; margin: 10px 0 2px; }
#google-slot { display: flex; justify-content: center; }
#google-slot > div { margin: 0 auto; }
#auth-code-step .name-input { letter-spacing: 0.3em; text-align: center; font-size: 20px; }
.auth-testmode {
  font-size: 12.5px; color: var(--gold); background: rgba(255, 210, 74, 0.08);
  border: 1px dashed rgba(255, 210, 74, 0.4); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px;
}
.modal .name-input { margin-bottom: 10px; }
.modal .btn + .btn { margin-top: 8px; }

.save-panel { text-align: center; }
.save-panel .save-note { font-size: 12.5px; color: var(--ink-dim); margin: 4px 0 10px; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.stat-box { text-align: center; padding: 10px 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.stat-box b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--gold); }
.stat-box span { font-size: 9px; letter-spacing: 0.1em; color: var(--ink-dim); font-weight: 800; }
.stats-h { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; color: var(--ink-dim); margin: 14px 0 8px; }
.battles-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.battle-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--panel); }
.battle-row .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-row .res { font-weight: 900; font-size: 11px; letter-spacing: 0.08em; flex: 0 0 auto; }
.battle-row .res.w { color: var(--keep); }
.battle-row .res.l { color: var(--cut); }
.battle-row .res.p { color: var(--ink-faint); }
.stats-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 14px; }
.stats-actions .btn { margin-top: 0; }

/* points face-off (arena + 1v1 official result) */
.faceoff { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 4px; }
.faceoff .fo { text-align: center; flex: 1; padding: 10px; border-radius: 12px; background: var(--panel); }
.faceoff .fo b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 24px; }
.faceoff .fo span { font-size: 10px; letter-spacing: 0.1em; color: var(--ink-dim); font-weight: 800; }
.faceoff .fo.win { border: 1px solid var(--keep); }
.faceoff .fo.win b { color: var(--keep); }
.faceoff .fo.loss b { color: var(--cut); }

/* ===== live head-to-head ===== */
/* home: two entry cards */
.versus-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.versus-card {
  padding: 16px 12px; border-radius: var(--radius); cursor: pointer; text-align: center;
  border: 1px solid var(--line); color: var(--ink); transition: transform .12s, border-color .15s;
}
.versus-card:active { transform: scale(0.97); }
.versus-card.friend { border-color: rgba(46, 230, 138, 0.4); background: linear-gradient(160deg, rgba(46, 230, 138, 0.12), transparent); }
.versus-card.public { border-color: rgba(61, 165, 255, 0.4); background: linear-gradient(160deg, rgba(61, 165, 255, 0.12), transparent); }
.versus-emoji { font-size: 30px; }
.versus-title { font-family: var(--font-display); font-weight: 900; font-size: 16px; margin-top: 6px; }
.versus-sub { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }

/* pre-lobby name field */
.ch-name-row { margin: 0 0 12px; }
.ch-name-row label { display: block; font-size: 12px; font-weight: 800; color: var(--ink-dim); margin-bottom: 6px; }
.ch-name-row label span { font-weight: 600; color: var(--ink-faint); }
.ch-name-row .name-input { margin-bottom: 0; }

/* pre-lobby pack picker */
.ch-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.ch-opt {
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink);
  font-size: 12.5px; font-weight: 700; padding: 8px 12px; cursor: pointer;
}
.ch-opt.on { background: var(--grad); border-color: transparent; color: #fff; }
.ch-allstar { margin-top: 8px; }

/* lobby */
.lobby-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 8px; gap: 18px; }
.lobby-orb { position: relative; width: 120px; height: 120px; display: grid; place-items: center; font-size: 46px; }
.lobby-ring { position: absolute; inset: 0; border-radius: 999px; border: 3px solid var(--keep); opacity: 0.5; animation: lobby-pulse 1.8s ease-out infinite; }
.lobby-ring.r2 { animation-delay: 0.9s; border-color: var(--brand-a); }
@keyframes lobby-pulse { 0% { transform: scale(0.7); opacity: 0.6; } 100% { transform: scale(1.25); opacity: 0; } }
.lobby-status { font-size: 15px; color: var(--ink-dim); max-width: 34ch; }
.lobby-share { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 10px; }
.lobby-share-label { font-size: 12.5px; color: var(--ink-dim); }
.lobby-link { padding: 12px; border-radius: 12px; border: 1px dashed var(--line); background: var(--panel); font-size: 13px; font-weight: 700; word-break: break-all; }

/* end-of-match scoreboard — per-player points for both lineups */
.scoreboard { margin-top: 14px; }
.sb-title {
  font-size: 10px; letter-spacing: 0.16em; font-weight: 800;
  color: var(--ink-faint); text-align: center; margin-bottom: 8px;
}
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-side {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); padding: 10px; min-width: 0;
}
.sb-side.win { border-color: rgba(46, 230, 138, 0.45); background: rgba(46, 230, 138, 0.06); }
.sb-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.sb-head span {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.sb-head b { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: var(--ink); }
.sb-side.win .sb-head b { color: var(--keep); }
.sb-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.sb-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; }
.sb-pos {
  flex: none; width: 30px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--ink-faint); text-transform: uppercase;
}
.sb-name {
  flex: 1; min-width: 0; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-pts { flex: none; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink-dim); }
/* very narrow phones: stack the two lineups instead of squeezing names to nothing */
@media (max-width: 360px) {
  .sb-grid { grid-template-columns: 1fr; }
}
.lobby-share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lobby-bot { max-width: 300px; }

/* live match board */
.vs-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 0 2px; }
.vs-side { padding: 8px 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.vs-side.opp { border-color: rgba(61, 165, 255, 0.35); }
.vs-name { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--ink-dim); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.vs-dot { height: 10px; border-radius: 3px; background: var(--panel-hi); border: 1px solid var(--line); transition: background .2s; }
.vs-dot.k { background: var(--keep); border-color: var(--keep); }
.vs-dot.c { background: var(--cut); border-color: var(--cut); }
.vs-dot.pending { background: repeating-linear-gradient(45deg, var(--panel-hi), var(--panel-hi) 2px, transparent 2px, transparent 4px); }
.match-waiting { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink-dim); text-align: center; width: 100%; padding: 14px; }

/* the live card flows in-place (no absolute swipe-stack like solo) so it never
   overlaps the reveal strips */
#screen-match .card-stage { height: auto; min-height: 300px; padding: 6px 0; }
#screen-match .bigcard { position: relative; width: min(92%, 340px); }

/* post-battle quick chat */
/* chat sits ABOVE the share recap on the end screen so it needs no scrolling.
   The log is capped short — it grows upward into its own scroller instead of
   pushing the buttons off-screen. */
.chat-block {
  margin-top: 16px; padding: 12px 10px 10px; border: 1px solid var(--line);
  border-radius: 14px; background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.chat-head {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-dim);
  text-transform: uppercase; margin-bottom: 8px;
}
.chat-log { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 20vh; overflow-y: auto; }
.chat-log:empty { display: none; }
.chat-bubble {
  max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 14px; font-weight: 600;
  animation: chat-in .2s ease both; word-break: break-word;
}
@keyframes chat-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.chat-bubble.mine { align-self: flex-end; background: var(--keep); color: #04140b; border-bottom-right-radius: 4px; }
.chat-bubble.theirs { align-self: flex-start; background: var(--panel-hi); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-bubble.theirs b { color: var(--brand-a); font-weight: 800; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; justify-content: center; }
.chat-btn {
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink);
  font-size: 13px; font-weight: 700; padding: 8px 14px; cursor: pointer; transition: transform .1s, background .15s;
}
.chat-btn:active { transform: scale(0.93); }
.chat-btn:disabled { opacity: 0.4; }

/* --- rematch alert: the opponent tapped REMATCH and is waiting on you.
   Pinned to the top of the end screen, pulsing, with its own accept button so
   the answer is one tap from wherever you are on the card. --- */
/* stacks by default so it never collides on a phone; goes side-by-side only
   when there's real width for it */
.rematch-alert {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  margin: 0 0 12px; padding: 11px 12px; border-radius: 14px;
  border: 1.5px solid var(--keep); background: color-mix(in srgb, var(--keep) 18%, var(--panel));
  animation: ra-pulse 1.5s ease-in-out infinite; text-align: center;
}
.rematch-alert .ra-body { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; }
.rematch-alert .ra-text { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.rematch-alert .ra-text b { color: var(--keep); font-weight: 900; }
.rematch-alert .ra-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--keep); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--keep) 70%, transparent);
  animation: ra-ring 1.5s ease-out infinite;
}
.rematch-alert .ra-accept {
  width: 100%; padding: 10px 16px; font-size: 14px; font-weight: 800;
  background: var(--keep); color: #04140b; border: none; border-radius: 999px; cursor: pointer;
}
@media (min-width: 520px) {
  .rematch-alert { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .rematch-alert .ra-accept { width: auto; flex: none; }
}
.rematch-alert .ra-accept:active { transform: scale(0.94); }
@keyframes ra-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--keep) 42%, transparent); }
  50%      { box-shadow: 0 0 18px 3px color-mix(in srgb, var(--keep) 30%, transparent); }
}
@keyframes ra-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--keep) 70%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}
/* the main rematch button also goes hot when they're waiting on you */
.btn.rematch-hot {
  background: var(--keep); color: #04140b; border-color: var(--keep);
  animation: ra-pulse 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rematch-alert, .rematch-alert .ra-dot, .btn.rematch-hot { animation: none; }
}

/* match end */
.match-end { text-align: center; width: 100%; padding: 4px; }
.match-end-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.match-end-actions .btn { max-width: none; }
/* "explore more" CTA — invited 1v1 players missed that other modes exist */
.explore-btn {
  background: linear-gradient(100deg, #1db56b, var(--keep)); color: #04140b;
  box-shadow: 0 8px 26px rgba(46, 230, 138, 0.3); margin-top: 4px;
  animation: explore-pulse 2s ease-in-out infinite;
}
@keyframes explore-pulse {
  0%, 100% { box-shadow: 0 8px 26px rgba(46, 230, 138, 0.28); }
  50% { box-shadow: 0 8px 40px rgba(46, 230, 138, 0.55); }
}
.explore-hint { font-size: 11.5px; color: var(--ink-dim); margin-top: -2px; }

/* short phones: compress the draft column so it still fits one viewport */
@media (max-height: 740px) {
  #screen-draft .draft-head { padding: 4px 0 0; }
  .draft-title { font-size: 16px; }
  .squadbar { padding: 4px 0 0; }
  .squadbar-label { font-size: 10px; margin-bottom: 4px; }
  .slot { height: 44px; font-size: 15px; border-radius: 12px; }
  .slot-name { font-size: 7.5px; }
  .deck-status { padding: 6px 0 4px; }
  .bigcard { padding: 12px 14px; }
  .bigcard-jersey { width: 60px; height: 60px; font-size: 30px; margin: 10px auto 8px; }
  .bigcard-name { font-size: 19px; }
  .bigcard-fp { margin-top: 8px; padding: 6px; }
  .bigcard-fp b { font-size: 20px; }
  .bigcard.duel { min-height: 210px; }
  .decision-feedback { min-height: 32px; font-size: 12px; padding: 4px 6px; }
  .decision-dock .btn { padding: 12px 14px; font-size: 15px; }
  .duel-hint { padding: 12px 0; }
}

/* spotlight the challenge button after a "battle a friend" run */
.btn.spotlight { border-color: var(--keep); color: var(--keep); animation: spotlight-pulse 1.4s ease-in-out infinite; }
@keyframes spotlight-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(46, 230, 138, 0); }
  50% { box-shadow: 0 0 24px rgba(46, 230, 138, 0.45); }
}

/* reduce motion — also pin iteration-count so infinite animations (lock-pulse)
   don't restart 1000x/sec and strobe */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* ---- all-32-teams picker (franchise duels) ---- */
.teams-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; max-height: 46vh; overflow-y: auto; }
.team-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.09); background: linear-gradient(160deg, rgba(255,255,255,0.05), transparent 70%); color: var(--ink); cursor: pointer; position: relative; border-bottom: 2px solid var(--accent, #888); }
.team-cell .tc-emoji { font-size: 22px; }
.team-cell .tc-name { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.team-cell.locked { opacity: 0.55; }
.team-cell .tc-today { position: absolute; top: -6px; right: -4px; background: var(--good, #2ee68a); color: #06281a; font-size: 8px; font-weight: 900; padding: 2px 5px; border-radius: 8px; letter-spacing: 0.06em; }
.modal-sub { color: var(--ink-dim); font-size: 13px; margin: 6px 0 2px; }

/* destructive action (account deletion) — must be visibly distinct from Sign out */
.danger-text { color: #ff8a99 !important; }
.danger-text[data-armed="1"] { color: #fff !important; background: #e0364a !important; border-color: #e0364a !important; }