:root {
  --bg: #0F0F23;
  --panel: #16162e;
  --panel-2: #1c1c38;
  --line: #2b2b52;
  --txt: #E2E8F0;
  --muted: #8b93b8;
  --primary: #7C3AED;
  --primary-2: #A78BFA;
  --cta: #F43F5E;
  --win: #34d399;
  --gold: #fbbf24;
  --glow: 0 0 18px rgba(124, 58, 237, .45);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 16px;
  min-height: 100vh;
  padding-bottom: 48px;
}
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(124,58,237,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}
main, header, nav { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 10px; max-width: 760px; margin: 0 auto;
}
.brand { display: flex; gap: 12px; align-items: center; }
.logo { width: 40px; height: 40px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
h1 { font-family: "Russo One", sans-serif; font-size: 1.25rem; letter-spacing: .04em; }
h1 .neon {
  color: var(--primary-2);
  text-shadow: 0 0 10px rgba(167,139,250,.9), 0 0 32px rgba(124,58,237,.6);
  animation: neonPulse 3.2s ease-in-out infinite;
}
@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(167,139,250,.9), 0 0 32px rgba(124,58,237,.55); }
  50% { text-shadow: 0 0 16px rgba(167,139,250,1), 0 0 48px rgba(124,58,237,.85); }
}
.sub { color: var(--muted); font-size: .8rem; letter-spacing: .06em; }
.live-pill {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px; font-size: .72rem; letter-spacing: .08em; color: var(--muted);
  background: rgba(22,22,46,.7); backdrop-filter: blur(6px);
}
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--win);
  box-shadow: 0 0 8px var(--win); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.hdr-right { display: flex; align-items: center; gap: 8px; }
.pos-btn {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px;
  color: var(--muted); background: var(--panel); font-family: "Chakra Petch", sans-serif;
  font-weight: 700; font-size: .72rem; letter-spacing: .07em; transition: all .18s;
}
.pos-btn svg { width: 15px; height: 15px; flex: none; }
.pos-btn:hover { color: var(--txt); border-color: var(--primary-2); }
.pos-btn.active { color: #fff; border-color: var(--primary);
  background: rgba(124,58,237,.16); box-shadow: inset 0 0 0 1px var(--primary), var(--glow); }
/* slim live/status line under the tabs (relocated out of the header) */
.status-line { display: flex; justify-content: center; padding: 2px 16px 8px;
  max-width: 760px; margin: 0 auto; }
.status-line .live-pill { font-size: .68rem; }
@media (max-width: 560px) {
  .pos-btn .pos-lbl { display: none; }              /* phones: icon + count only */
  .pos-btn { padding: 7px 9px; }
  .topbar .sub { display: none; }                   /* free up header width */
  .topbar h1 { font-size: 1.1rem; }
  .topbar { padding: 14px 12px 8px; gap: 8px; }
  .brand { min-width: 0; }
  .brand > div { min-width: 0; }
  /* fit all four tabs: drop icons, tighten type */
  .tabs { gap: 6px; padding: 8px 12px; }
  .tab { font-size: .62rem; letter-spacing: .02em; gap: 0; min-height: 40px; padding: 0 4px; }
  .tab svg { display: none; }
}

/* ---------- tabs ---------- */
.tabs {
  display: flex; gap: 8px; padding: 8px 16px; max-width: 760px; margin: 0 auto;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--bg) 82%, transparent);
}
.tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--line); border-radius: 12px;
  min-height: 44px; font-family: "Chakra Petch", sans-serif; font-weight: 600;
  font-size: .78rem; letter-spacing: .07em; cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.tab svg { width: 16px; height: 16px; }
.tab.active { color: #fff; border-color: var(--primary);
  box-shadow: var(--glow); }
.tab .badge {
  background: var(--cta); color: #fff; border-radius: 999px;
  font-size: .68rem; padding: 1px 7px;
}

/* ---------- board ---------- */
.view { display: none; max-width: 760px; margin: 0 auto; padding: 10px 16px 30px; }
.view.active { display: block; animation: viewIn .28s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } }

.budget-wrap { margin: 6px 0 16px; }
.budget-head { display: flex; justify-content: space-between; font-size: .74rem;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.budget-head b { color: var(--gold); font-size: 1rem; }
.budget-bar { height: 10px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--line); overflow: hidden; }
.budget-fill {
  height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2), var(--gold));
  box-shadow: 0 0 12px rgba(124,58,237,.7);
  transition: width .45s cubic-bezier(.22,1,.36,1);
}

.cards { display: flex; flex-direction: column; gap: 14px; }
.skeleton { height: 168px; border-radius: 16px; background:
  linear-gradient(100deg, var(--panel) 40%, var(--panel-2) 50%, var(--panel) 60%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.card {
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  animation: cardIn .5s cubic-bezier(.22,1,.36,1) backwards;
}
.card:nth-child(1) { animation-delay: .03s } .card:nth-child(2) { animation-delay: .09s }
.card:nth-child(3) { animation-delay: .15s } .card:nth-child(4) { animation-delay: .21s }
.card:nth-child(5) { animation-delay: .27s } .card:nth-child(6) { animation-delay: .33s }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }

.card.disagree { border-color: rgba(244,63,94,.55); }
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px 0; font-size: .68rem; letter-spacing: .12em; color: var(--muted);
}
.fire {
  color: var(--cta); font-weight: 700; display: flex; gap: 5px; align-items: center;
  animation: firePulse 1.8s ease-in-out infinite;
}
.fire svg { width: 13px; height: 13px; }
@keyframes firePulse { 50% { opacity: .55; } }

.teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  gap: 6px; padding: 10px 12px 4px; }
.team {
  border: 1px solid var(--line); background: rgba(15,15,35,.5);
  border-radius: 12px; padding: 10px; cursor: pointer; text-align: left;
  color: var(--txt); font-family: inherit;
  transition: border-color .18s, box-shadow .18s, background .18s;
  min-height: 44px;
}
.team:hover { border-color: var(--primary-2); }
.team.picked {
  border-color: var(--primary); background: rgba(124,58,237,.16);
  box-shadow: inset 0 0 0 1px var(--primary), var(--glow);
}
.team .t-name { font-weight: 700; font-size: .86rem; line-height: 1.25; }
.team .t-proj { font-family: "Russo One", sans-serif; font-size: 1.3rem;
  margin-top: 4px; color: var(--primary-2); }
.team .t-line { font-size: .7rem; color: var(--primary-2); letter-spacing: .05em; }
.team.picked .t-line { text-shadow: 0 0 8px rgba(167,139,250,.65); }
.team .t-line.yah { color: var(--muted); text-shadow: none; }
.team .t-live { font-family: "Russo One", sans-serif; font-size: 1.05rem;
  color: var(--win); line-height: 1.1; margin-top: 2px;
  text-shadow: 0 0 10px rgba(52,211,153,.5); }
.team .t-live small { display: block; font-family: "Chakra Petch", sans-serif;
  font-size: .6rem; font-weight: 600; color: var(--muted); letter-spacing: .04em;
  text-shadow: none; margin-top: 1px; }
.live-pill.games-live { border-color: var(--cta); }
.live-pill.games-live .dot { background: var(--cta); box-shadow: 0 0 8px var(--cta); }
.live-pill.games-live #updated { color: var(--cta); }
.vs { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; min-width: 64px; }
.vs .spread {
  font-family: "Russo One", sans-serif; color: var(--gold);
  font-size: .95rem; text-shadow: 0 0 12px rgba(251,191,36,.5);
}
.vs .ou { font-size: .68rem; color: var(--muted); letter-spacing: .06em; }
.vs .flash { animation: lineFlash .9s ease; }
@keyframes lineFlash { 0% { color: #fff; text-shadow: 0 0 20px #fff; } }

.wager-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px 4px; }
.wager-row .lbl { font-size: .68rem; letter-spacing: .1em; color: var(--muted); }
.wager-row .amt {
  min-width: 46px; height: 38px; display: flex; align-items: center;
  justify-content: center; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: "Russo One", sans-serif; color: var(--gold); font-size: 1rem;
}
.wager-slider {
  --p: 0%;
  flex: 1; -webkit-appearance: none; appearance: none; height: 44px;
  background: transparent; cursor: pointer;
}
.wager-slider::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--gold) var(--p), var(--panel-2) var(--p));
  box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
}
.wager-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%; margin-top: -9px;
  background: radial-gradient(circle at 35% 35%, #fff, var(--gold) 55%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 14px rgba(251,191,36,.8);
  transition: transform .15s;
}
.wager-slider:active::-webkit-slider-thumb { transform: scale(1.25); }
.wager-slider::-moz-range-track {
  height: 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2);
}
.wager-slider::-moz-range-progress {
  height: 10px; border-radius: 999px; background: var(--gold);
}
.wager-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--gold) 55%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 14px rgba(251,191,36,.8);
}
.wager-slider:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 8px; }
.amt.bump { animation: bump .25s ease; }
@keyframes bump { 50% { transform: scale(1.25); } }

.toggles { display: flex; gap: 8px; margin: 8px 14px 14px; }
.toggles .take-toggle, .toggles .lu-toggle { width: auto; flex: 1; margin: 0; }
.lu-toggle {
  min-height: 42px; background: transparent; color: var(--gold);
  border: 1px dashed rgba(251,191,36,.4); border-radius: 10px;
  font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: .74rem;
  letter-spacing: .12em; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 8px; transition: border-color .2s, color .2s;
}
.lu-toggle:hover { border-color: var(--gold); color: #fff; }
.lu-toggle svg { width: 14px; height: 14px; transition: transform .25s; }
.card.lu-open .lu-toggle svg { transform: rotate(180deg); }

.lineups {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.22,1,.36,1);
  margin: 0 14px;
}
.card.lu-open .lineups { max-height: 720px; margin-bottom: 14px; }
.lu-wrap {
  max-height: 700px; overflow-y: auto; padding: 10px 8px 12px;
  background: rgba(15,15,35,.55); border: 1px solid var(--line);
  border-radius: 12px;
}
.lu-sub { font-size: .6rem; letter-spacing: .16em; color: var(--muted);
  padding: 2px 4px 6px; }
.lu-sub.center { text-align: center; }
.lu-modes { display: flex; gap: 6px; justify-content: center; margin: 2px 0 10px; }
.lu-modes .pm {
  flex: 1; max-width: 120px; min-height: 34px; cursor: pointer;
  background: rgba(15,15,35,.6); color: var(--muted);
  border: 1px solid var(--line); border-radius: 9px;
  font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: .72rem;
  letter-spacing: .1em; transition: color .18s, border-color .18s, background .18s;
}
.lu-modes .pm.on { color: #fff; border-color: var(--primary);
  background: rgba(124,58,237,.18); box-shadow: var(--glow); }
.lu-modes .pm:hover:not(.on) { color: var(--txt); border-color: var(--primary-2); }
.lu-sub.bench { border-top: 1px dashed var(--line); margin-top: 8px;
  padding-top: 8px; }

/* mirrored head-to-head grid: img · name · pts · slot · pts · name · img */
.vs-head, .vs-row {
  display: grid; align-items: center; column-gap: 6px;
  grid-template-columns: 24px minmax(0,1fr) auto 38px auto minmax(0,1fr) 24px;
  padding: 3px 2px; border-radius: 8px;
}
.vs-head { padding-bottom: 8px; border-bottom: 1px solid var(--line);
  margin-bottom: 6px; }
.vs-head span { font-weight: 700; font-size: .76rem; line-height: 1.2; }
.vs-head span.l { grid-column: 1 / 3; }
.vs-head span.r { grid-column: 6 / 8; text-align: right; }
.vs-head b { font-family: "Russo One", sans-serif; color: var(--primary-2);
  font-size: .92rem; text-shadow: 0 0 10px rgba(167,139,250,.5); }
.vs-head b.r { text-align: left; }
.vs-row:nth-child(even) { background: rgba(124,58,237,.05); }
.vs-row.bn { opacity: .68; }
.vs-name { min-width: 0; font-size: .74rem; font-weight: 700;
  line-height: 1.15; letter-spacing: .01em; color: #f1f5fd;
  overflow-wrap: break-word; }
.vs-name.r { text-align: right; }
.vs-row.bn .vs-name { font-weight: 600; color: #c3cadf; }
.vs-pts { font-family: "Russo One", sans-serif; font-size: .76rem;
  color: var(--muted); min-width: 28px; }
.vs-pts.l { text-align: right; }
.vs-pts.win { color: var(--gold); text-shadow: 0 0 10px rgba(251,191,36,.55); }
.vs-chip {
  font-size: .56rem; font-weight: 600; letter-spacing: .05em;
  color: var(--primary-2); border: 1px solid rgba(124,58,237,.5);
  border-radius: 6px; padding: 2px 0; text-align: center;
  background: rgba(124,58,237,.12);
}
.vs-chip.head { color: var(--muted); border-color: var(--line);
  background: transparent; }
.vs-row.bn .vs-chip { color: var(--muted); border-color: var(--line);
  background: transparent; }
.lu-img {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover; object-position: top;
  background: radial-gradient(circle at 35% 30%, var(--panel-2), var(--bg));
  border: 1px solid var(--line);
}
.lu-ph { display: flex; align-items: center; justify-content: center;
  color: var(--primary-2); font-weight: 700; font-size: .7rem; }

.take-toggle {
  width: calc(100% - 28px); margin: 8px 14px 14px; min-height: 42px;
  background: transparent; color: var(--primary-2);
  border: 1px dashed rgba(167,139,250,.4); border-radius: 10px;
  font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: .74rem;
  letter-spacing: .12em; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 8px; transition: border-color .2s, color .2s;
}
.take-toggle:hover { border-color: var(--primary-2); color: #fff; }
.take-toggle svg { width: 14px; height: 14px; transition: transform .25s; }
.card.open .take-toggle svg { transform: rotate(180deg); }
.take {
  max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.22,1,.36,1);
  margin: 0 14px;
}
.card.open .take { max-height: 340px; margin-bottom: 14px; }
.take-inner {
  border-left: 3px solid var(--primary); background: rgba(124,58,237,.08);
  border-radius: 0 10px 10px 0; padding: 12px 14px; font-size: .86rem;
  line-height: 1.65; color: #cdd4ea;
}
.take-inner .yline { color: var(--muted); font-size: .74rem; display: block;
  margin-top: 8px; letter-spacing: .05em; }

/* ---------- slip ---------- */
.slip-panel {
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 16px; padding: 18px;
}
.slip-panel h2 { font-family: "Russo One", sans-serif; letter-spacing: .05em;
  margin-bottom: 12px; }
.name-label { display: block; font-size: .7rem; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 6px; }
#username {
  width: 100%; min-height: 46px; background: var(--bg); color: var(--txt);
  border: 1px solid var(--line); border-radius: 10px; padding: 0 14px;
  font-family: inherit; font-size: 1rem; margin-bottom: 14px;
}
#username:focus { outline: 2px solid var(--primary); border-color: transparent; }
.slip-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.slip-list li {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(15,15,35,.5); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-size: .84rem;
  animation: viewIn .25s ease backwards;
}
.slip-list .pk { font-weight: 700; }
.slip-list .w { color: var(--gold); font-family: "Russo One", sans-serif; }
.slip-total { display: flex; justify-content: space-between; padding: 14px 4px 10px;
  font-size: .78rem; letter-spacing: .1em; color: var(--muted); }
.slip-total b { color: var(--gold); font-size: 1.15rem; font-family: "Russo One", sans-serif; }
.lock-btn {
  width: 100%; min-height: 52px; display: flex; align-items: center;
  justify-content: center; gap: 10px; border: none; border-radius: 12px;
  background: linear-gradient(90deg, var(--cta), #fb7185);
  color: #fff; font-family: "Russo One", sans-serif; font-size: 1rem;
  letter-spacing: .08em; cursor: pointer;
  box-shadow: 0 0 22px rgba(244,63,94,.45);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.lock-btn svg { width: 18px; height: 18px; }
.lock-btn:hover:not(:disabled) { filter: brightness(1.1);
  box-shadow: 0 0 34px rgba(244,63,94,.65); }
.lock-btn:active:not(:disabled) { transform: scale(.98); }
.lock-btn:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed;
  box-shadow: none; }
.slip-msg { margin-top: 12px; font-size: .84rem; min-height: 1.2em; }
.slip-msg.ok { color: var(--win); }
.slip-msg.err { color: var(--cta); }

/* ---------- ladder ---------- */
.ladder-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.ladder-row .rank { color: var(--gold); font-family: "Russo One", sans-serif;
  width: 34px; }
.ladder-row .who { flex: 1; font-weight: 600; }
.ladder-row .pts { color: var(--muted); font-size: .78rem; }

/* ---------- market ---------- */
.worth-chip { color: var(--muted); }
.worth-chip b { color: var(--win); text-shadow: 0 0 10px rgba(52,211,153,.5); }
.t-proj.flash { animation: priceFlash .9s ease; }
@keyframes priceFlash { 0% { color: #fff; text-shadow: 0 0 22px #fff; } }

.chart {
  display: block; width: calc(100% - 28px); height: auto;
  margin: 8px 14px 0; border: 1px solid var(--line); border-radius: 12px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(124,58,237,.10), transparent 60%),
    rgba(12,12,28,.7);
}
.chart .ch-grid { stroke: rgba(124,58,237,.10); stroke-width: .5; }
.chart .ch-grid.mid { stroke: rgba(167,139,250,.30); stroke-width: .6;
  stroke-dasharray: 3 3; }
.chart .ch-axis { fill: rgba(139,147,184,.65); font-size: 6px;
  font-family: "Chakra Petch", sans-serif; }
.chart .price-line {
  fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round;
}
.chart .model-line {
  stroke: var(--primary-2); stroke-width: .8; stroke-dasharray: 3 3; opacity: .55;
}
.chart .last-dot {
  fill: #fff; stroke: var(--gold); stroke-width: 1.6;
  animation: dotPulse 1.6s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
@keyframes dotPulse { 50% { opacity: .4; } }
/* a marker for each bet — gold = bet on home, pink = bet on away */
.chart .trade-dot { stroke: rgba(12,12,28,.9); stroke-width: 1; cursor: pointer; }
.chart .trade-dot.yes { fill: var(--gold); }
.chart .trade-dot.no { fill: var(--cta); }
/* floating current-price tag */
.ch-price rect { fill: rgba(12,12,28,.92); stroke: var(--gold); stroke-width: .7; }
.ch-price text { fill: var(--gold); font-size: 8px; font-weight: 700;
  text-anchor: middle; font-family: "Russo One", sans-serif; }
.ch-price.down rect { stroke: var(--cta); }
.ch-price.down text { fill: var(--cta); }

.buy-btn {
  width: calc(100% - 28px); margin: 10px 14px 0; min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 12px;
  background: linear-gradient(90deg, var(--cta), #fb7185);
  color: #fff; font-family: "Russo One", sans-serif; font-size: .92rem;
  letter-spacing: .08em; cursor: pointer;
  box-shadow: 0 0 22px rgba(244,63,94,.4);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.buy-btn small { font-family: "Chakra Petch", sans-serif; font-weight: 600;
  font-size: .7rem; color: rgba(255,255,255,.85); letter-spacing: .04em; }
.buy-btn:hover:not(:disabled) { filter: brightness(1.1);
  box-shadow: 0 0 34px rgba(244,63,94,.65); }
.buy-btn:active:not(:disabled) { transform: scale(.98); }
.buy-btn:disabled { filter: grayscale(.7) brightness(.55); cursor: not-allowed;
  box-shadow: none; }

.ladder-row .worth-num { color: var(--gold); font-family: "Russo One", sans-serif;
  font-size: .95rem; }
.std-rec { flex: none; font-family: "Russo One", sans-serif; font-size: .9rem;
  color: var(--txt); min-width: 52px; text-align: right; }
.std-streak { flex: none; min-width: 40px; text-align: right;
  font-family: "Russo One", sans-serif; font-size: .82rem; color: var(--muted); }
.std-streak.up { color: var(--win); text-shadow: 0 0 8px rgba(52,211,153,.5); }
.std-streak.down { color: var(--cta); text-shadow: 0 0 8px rgba(244,63,94,.5); }
/* five tabs — scroll horizontally on narrow phones */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { flex: 1 0 auto; min-width: 72px; font-size: .72rem;
  letter-spacing: .03em; gap: 5px; padding: 0 8px; }
.tabs .tab svg { width: 15px; height: 15px; }
@media (max-width: 460px) { .tabs .tab svg { display: none; }
  .tabs .tab { min-width: 66px; } }

/* ---------- player props ---------- */
.props-wrap { display: flex; flex-direction: column; gap: 14px; }
.prop-game {
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  animation: viewIn .3s ease backwards;
}
.prop-head { display: flex; justify-content: space-between; align-items: baseline; }
.prop-label { font-family: "Russo One", sans-serif; font-size: .9rem;
  color: var(--primary-2); letter-spacing: .04em;
  text-shadow: 0 0 12px rgba(167,139,250,.5); }
.prop-kick { font-size: .68rem; color: var(--muted); letter-spacing: .04em; }
.prop-match { font-weight: 700; font-size: .96rem; margin: 4px 0 12px; }
.prop-match em { color: var(--muted); font-style: normal; font-weight: 400; }

/* NFL game lines — spread / total / moneyline */
.game-lines { border: 1px solid var(--line); border-radius: 12px;
  background: rgba(15,15,35,.4); padding: 10px 12px; margin-bottom: 12px; }
.gl-head { font-size: .64rem; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.gl-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr .85fr; gap: 6px; align-items: center; }
.gl-col { font-size: .56rem; letter-spacing: .06em; color: var(--muted); text-align: center; }
.gl-team { font-weight: 700; font-size: .8rem; }
.gl-cell { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 42px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(15,15,35,.6); color: var(--txt); cursor: pointer;
  font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: .8rem;
  transition: border-color .15s, background .15s; }
.gl-cell i { font-style: normal; font-family: "Russo One", sans-serif;
  color: var(--win); font-size: .64rem; margin-top: 2px; }
.gl-cell:hover { border-color: var(--primary-2); background: rgba(124,58,237,.12); }

/* the Strat's prop of the night — the hero card */
.pon {
  border: 1px solid rgba(251,191,36,.5); border-radius: 12px;
  background: radial-gradient(120% 130% at 0% 0%, rgba(251,191,36,.14), transparent 60%), rgba(15,15,35,.5);
  padding: 12px 13px; margin-bottom: 12px;
}
.pon-head { display: flex; align-items: center; gap: 7px; font-size: .68rem;
  letter-spacing: .1em; color: var(--gold); font-weight: 700; margin-bottom: 8px; }
.pon-head svg { width: 15px; height: 15px; filter: drop-shadow(0 0 5px rgba(251,191,36,.7)); }
.pon-pick { display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: .95rem; }
.pon-pick b { font-family: "Russo One", sans-serif; color: var(--gold);
  font-size: 1.05rem; text-shadow: 0 0 10px rgba(251,191,36,.5); }
.pon-why { font-size: .82rem; line-height: 1.55; color: #cdd4ea; margin-top: 7px; }

.p2p { border: 1px solid var(--line); border-radius: 12px;
  background: rgba(15,15,35,.4); padding: 10px 12px; margin-bottom: 12px; }
.p2p-head { font-size: .64rem; letter-spacing: .1em; color: var(--muted);
  margin-bottom: 8px; }
.p2p-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; }
.p2p-side { border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  background: rgba(15,15,35,.5); }
.p2p-side b { display: block; font-size: .82rem; }
.p2p-side span { font-size: .68rem; color: var(--muted); }
.p2p-side.lean { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), var(--glow); }
.p2p-side.lean span { color: var(--primary-2); }
.p2p-vs { font-family: "Russo One", sans-serif; font-size: .72rem; color: var(--muted); }
.p2p-why { font-size: .74rem; color: var(--primary-2); margin-top: 8px; text-align: center; }

.prop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* phones: give ANYTIME TD / 1ST TD the full card width so names fit */
@media (max-width: 560px) { .prop-cols { grid-template-columns: 1fr; } }
.prop-list { background: rgba(15,15,35,.45); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; }
.prop-list-head { font-size: .62rem; letter-spacing: .12em; color: var(--muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.prop-row { display: flex; justify-content: space-between; align-items: center;
  gap: 6px; padding: 4px 0; font-size: .78rem; }
.prop-row .pr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-row .pr-odds { font-family: "Russo One", sans-serif; color: var(--win);
  font-size: .78rem; flex: none; }

/* bettable rows */
.bet-row { cursor: pointer; transition: background .15s, border-color .15s; }
.prop-row.bet-row { border-radius: 7px; padding-left: 6px; padding-right: 6px; margin: 0 -4px; }
.prop-row.bet-row:hover { background: rgba(124,58,237,.14); }
.pon.bet-row:hover { border-color: var(--gold); }
.pon-tap { text-align: right; font-size: .64rem; color: var(--gold); letter-spacing: .08em; margin-top: 6px; opacity: .8; }
button.p2p-side { font-family: inherit; color: var(--txt); text-align: left; cursor: pointer; }
button.p2p-side:hover { border-color: var(--primary-2); }

/* RB/WR/QB featured props */
.pp-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pp { border: 1px solid var(--line); border-radius: 12px; background: rgba(15,15,35,.4); padding: 10px 12px; }
.pp-head { font-size: .64rem; letter-spacing: .1em; color: var(--muted); }
.pp-why { font-size: .8rem; margin: 5px 0 8px; color: #cdd4ea; }
.pp-why b { color: #fff; }
.pp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-btn { display: flex; justify-content: center; align-items: center; gap: 8px;
  min-height: 40px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(15,15,35,.6); color: var(--txt); cursor: pointer;
  font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; transition: border-color .15s, background .15s; }
.pp-btn span { font-family: "Russo One", sans-serif; color: var(--win); font-size: .74rem; }
.pp-btn:hover { border-color: var(--primary-2); }
.pp-btn.lean { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(251,191,36,.5); }
.pp-btn.lean span { color: var(--gold); }

/* prop bet in the feed + positions */
.fdot.prop { background: var(--primary-2); box-shadow: 0 0 6px rgba(167,139,250,.6); }
.pk-sub { display: block; font-size: .62rem; color: var(--muted); font-weight: 400; }

/* bet slip */
.bs-pick { font-family: "Russo One", sans-serif; font-size: 1.1rem; text-align: center;
  color: #fff; margin-top: 8px; }
.bs-sub { text-align: center; font-size: .72rem; color: var(--muted); letter-spacing: .08em; margin-top: 3px; }
.bs-odds { text-align: center; font-size: .72rem; color: var(--muted); letter-spacing: .1em; margin-top: 12px; }
.bs-odds b { font-family: "Russo One", sans-serif; color: var(--gold); font-size: 1.1rem;
  margin-left: 6px; text-shadow: 0 0 10px rgba(251,191,36,.5); }
.bs-payout { text-align: center; font-size: .82rem; color: var(--muted); margin-top: 8px; }
.bs-payout b { color: var(--win); font-family: "Russo One", sans-serif; }
.bs-actions { display: flex; gap: 8px; margin-top: 16px; }
.bs-cancel { flex: 1; min-height: 48px; border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  font-family: "Chakra Petch", sans-serif; font-weight: 600; letter-spacing: .08em; }
.bs-cancel:hover { color: var(--txt); border-color: var(--primary-2); }
.bs-actions .buy-btn { flex: 2; width: auto; }

/* ---------- team picker (identity) ---------- */
.picker {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(9,9,20,.86); backdrop-filter: blur(8px);
  overflow-y: auto;
}
.picker.show { display: flex; animation: viewIn .3s ease; }
.picker-card {
  width: 100%; max-width: 460px; margin: auto;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid var(--primary); border-radius: 18px; padding: 22px 18px;
  box-shadow: var(--glow);
}
.picker-card h2 { font-family: "Russo One", sans-serif; letter-spacing: .04em;
  text-align: center; }
.picker-card .sub { text-align: center; margin: 8px 0 18px; }
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick-team {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: rgba(15,15,35,.6); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; cursor: pointer; color: var(--txt);
  font-family: inherit; min-height: 58px;
  transition: border-color .18s, box-shadow .18s, background .18s, transform .1s;
}
.pick-team:hover:not(.taken) { border-color: var(--primary-2);
  box-shadow: var(--glow); }
.pick-team:active:not(.taken) { transform: scale(.97); }
.pick-name { font-weight: 700; font-size: .84rem; line-height: 1.15; }
.pick-mgr { font-size: .72rem; color: var(--gold); letter-spacing: .02em; }
.pick-team.taken { opacity: .4; cursor: not-allowed; }
.pick-team.taken .pick-mgr { color: var(--muted); }
.who-mgr { display: block; font-size: .7rem; color: var(--gold);
  font-weight: 400; letter-spacing: .02em; margin-top: 1px; }

/* ---------- fantasy-team logos (owner avatars, scraped from Yahoo) ---------- */
.t-logo {
  display: block; width: 34px; height: 34px; border-radius: 9px;
  object-fit: cover; margin-bottom: 7px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.team.picked .t-logo { border-color: var(--primary);
  box-shadow: 0 0 8px rgba(124,58,237,.4); }
.row-logo {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  object-fit: cover; margin: 0 9px 0 2px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.pick-logo {
  width: 38px; height: 38px; border-radius: 10px; object-fit: cover;
  margin-bottom: 4px; border: 1px solid var(--line); background: var(--panel-2);
}

/* ---------- prop player headshots (ESPN, top-cropped circles) ---------- */
.pr-pic { flex: none; width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; object-position: center top; background: var(--panel-2); }
.prop-row .pr-name { flex: 1; min-width: 0; }
.pp-pic { width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  object-position: center top; background: var(--panel-2);
  vertical-align: middle; margin-right: 7px; }
.pon-pic { flex: none; width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; object-position: center top; background: var(--panel-2);
  border: 1px solid var(--gold); }
.pon-pick span { flex: 1; padding-left: 11px; text-align: left; }
.p2p-pic { display: block; width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; object-position: center top; background: var(--panel-2);
  margin: 0 auto 6px; border: 1px solid var(--line); }
.p2p-row .p2p-side { text-align: center; }
.p2p-side.lean .p2p-pic { border-color: var(--primary); }
@media (max-width: 380px) { .pick-grid { grid-template-columns: 1fr; } }

/* ---------- live bet feed ---------- */
.feed {
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px 8px; margin-bottom: 14px;
}
.feed-head {
  display: flex; align-items: center; gap: 7px; font-size: .68rem;
  letter-spacing: .16em; color: var(--muted); margin-bottom: 6px;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cta);
  box-shadow: 0 0 8px var(--cta); animation: blink 1.4s infinite; }
.feed-empty { font-size: .8rem; color: var(--muted); padding: 4px 2px 6px; }
.feed-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 2px;
  font-size: .82rem; border-top: 1px solid rgba(43,43,82,.5);
}
.feed-row:first-of-type { border-top: none; }
.feed-row .fdot { width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1px solid rgba(15,15,35,.7); }
.fdot.yes { background: var(--gold); box-shadow: 0 0 6px rgba(251,191,36,.6); }
.fdot.no { background: var(--cta); box-shadow: 0 0 6px rgba(244,63,94,.6); }
.feed-row .ftxt { flex: 1; min-width: 0; color: #d7ddf0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.feed-row .ftxt b { color: #fff; font-weight: 700; }
.feed-row .ftxt .famt { color: var(--gold); }
.feed-row .fmeta { flex: none; font-size: .68rem; color: var(--muted);
  letter-spacing: .02em; }
.feed-row.you { background: rgba(124,58,237,.10); border-radius: 8px;
  box-shadow: inset 2px 0 0 var(--primary); }
.feed-row.new { animation: feedIn .5s cubic-bezier(.22,1,.36,1); }
@keyframes feedIn { from { opacity: 0; transform: translateX(-10px); } }

/* ---------- live bet toasts ---------- */
.toast-wrap {
  position: fixed; top: 12px; left: 0; right: 0; z-index: 55;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; padding: 0 12px;
}
.toast {
  display: flex; align-items: center; gap: 9px; max-width: 92vw;
  background: rgba(22,22,46,.96); border: 1px solid var(--primary);
  border-radius: 999px; padding: 9px 16px; font-size: .84rem;
  color: #eef1fb; box-shadow: var(--glow), 0 8px 24px rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-18px) scale(.96);
  transition: opacity .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.toast.in { opacity: 1; transform: translateY(0) scale(1); }
.toast.no { border-color: var(--cta); }
.toast b { color: #fff; }

/* ---------- fill FX: shockwave ring + upward gold sparks (no confetti) ---------- */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.fx-ring {
  position: fixed; left: 50%; top: 42%; width: 22px; height: 22px;
  margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 16px rgba(251,191,36,.7), inset 0 0 10px rgba(251,191,36,.4);
  animation: fxRing .9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fxRing {
  from { transform: scale(.3); opacity: .95; }
  to { transform: scale(10); opacity: 0; }
}
.fx-spark {
  position: fixed; left: 50%; top: 42%; width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--gold) 60%);
  box-shadow: 0 0 9px var(--gold);
  animation: fxSpark .85s cubic-bezier(.16,.8,.3,1) forwards;
}
@keyframes fxSpark {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

/* ---------- parlay: add-to-parlay button, tray, review slip ---------- */
.fdot.parlay { background: linear-gradient(135deg, var(--gold), var(--cta));
  box-shadow: 0 0 6px rgba(251,191,36,.6); }
.add-parlay-btn {
  width: 100%; margin-top: 12px; padding: 10px; cursor: pointer;
  background: rgba(124,58,237,.12); color: var(--primary-2);
  border: 1px dashed var(--primary); border-radius: 10px;
  font-family: "Chakra Petch", sans-serif; font-weight: 600;
  font-size: .74rem; letter-spacing: .1em; transition: all .18s;
}
.add-parlay-btn:hover { background: rgba(124,58,237,.22); color: #fff; }

.parlay-tray {
  position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%);
  z-index: 58; display: none; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px 20px; border-radius: 999px;
  background: linear-gradient(100deg, var(--primary), #b45cf0);
  border: 1px solid var(--primary-2);
  box-shadow: 0 10px 30px rgba(124,58,237,.5), var(--glow);
  color: #fff; font-family: "Chakra Petch", sans-serif;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.parlay-tray.show { display: flex; transform: translate(-50%, 0); }
.parlay-tray .pt-n { font-weight: 700; font-size: .8rem; letter-spacing: .08em; }
.parlay-tray .pt-odds { font-family: "Russo One", sans-serif; color: var(--gold);
  font-size: .95rem; text-shadow: 0 0 8px rgba(251,191,36,.5); }
.parlay-tray .pt-go { font-size: .72rem; letter-spacing: .06em; opacity: .9; }

.pl-legs { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.pl-leg { display: flex; align-items: center; gap: 8px;
  background: rgba(15,15,35,.5); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; }
.pl-leg-txt { flex: 1; min-width: 0; font-size: .82rem; color: #eef1fb; }
.pl-leg-txt b { color: #fff; }
.pl-leg-txt small { display: block; font-size: .64rem; color: var(--muted);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-rm { flex: none; width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  font-size: .7rem; line-height: 1; }
.pl-rm:hover { color: var(--cta); border-color: var(--cta); }
.pl-odds { text-align: center; font-size: .74rem; color: var(--muted);
  letter-spacing: .1em; margin-top: 12px; }
.pl-odds b { font-family: "Russo One", sans-serif; color: var(--gold);
  font-size: 1.1rem; text-shadow: 0 0 10px rgba(251,191,36,.5); margin-left: 6px; }

/* ---------- mobile: give player names the full width ---------- */
@media (max-width: 540px) {
  .vs-name { font-size: .7rem; }
  .vs-pts { font-size: .7rem; min-width: 24px; }
  .vs-head, .vs-row { grid-template-columns: 22px minmax(0,1fr) auto 32px auto minmax(0,1fr) 22px; column-gap: 5px; }
  .lu-img { width: 22px; height: 22px; }
  .teams { gap: 4px; padding: 10px 8px 4px; }
  .team { padding: 8px; }
  .team .t-name { font-size: .8rem; }
  .team .t-line { font-size: .64rem; letter-spacing: .02em; }
  .vs { min-width: 52px; }
  .toggles { flex-direction: row; }
  .toggles .take-toggle, .toggles .lu-toggle { font-size: .66rem;
    letter-spacing: .08em; gap: 5px; }
}

/* ---------- install prompt bar ---------- */
.install-bar {
  position: fixed; left: 12px; bottom: 14px; z-index: 54;
  display: flex; align-items: center; gap: 10px; max-width: 330px;
  padding: 9px 10px 9px 9px; background: rgba(22,22,46,.97);
  border: 1px solid var(--primary); border-radius: 14px;
  box-shadow: var(--glow), 0 10px 26px rgba(0,0,0,.45); backdrop-filter: blur(8px);
  animation: viewIn .35s ease;
}
.install-bar[hidden] { display: none; }
.ib-ico { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; }
.ib-txt { flex: 1; min-width: 0; font-size: .82rem; color: #eef1fb; line-height: 1.2; }
.ib-txt b { color: #fff; }
.ib-txt small { display: block; font-size: .64rem; color: var(--muted); margin-top: 2px; }
.ib-go { flex: none; cursor: pointer; border: none; border-radius: 999px;
  background: linear-gradient(90deg, var(--cta), #fb7185); color: #fff;
  font-family: "Chakra Petch", sans-serif; font-weight: 800; font-size: .74rem;
  letter-spacing: .08em; padding: 9px 15px; }
.ib-go:hover { filter: brightness(1.08); }
.ib-x { flex: none; cursor: pointer; width: 22px; height: 22px; border-radius: 6px;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  font-size: .66rem; line-height: 1; }
.ib-x:hover { color: var(--cta); border-color: var(--cta); }
.ios-share { color: var(--gold); font-weight: 700; }
@media (max-width: 430px) { .install-bar { left: 10px; right: 10px; max-width: none; } }

/* ---------- league chat (slide-out drawer) ---------- */
.chat-fab {
  position: fixed; right: 16px; bottom: 18px; z-index: 56; cursor: pointer;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), #b45cf0);
  border: 1px solid var(--primary-2); color: #fff;
  box-shadow: 0 8px 24px rgba(124,58,237,.5), var(--glow);
  transition: transform .15s;
}
.chat-fab:active { transform: scale(.94); }
.chat-fab svg { width: 24px; height: 24px; }
.chat-dot { position: absolute; top: 7px; right: 8px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--cta); border: 2px solid var(--bg);
  box-shadow: 0 0 8px var(--cta); }
.chat-scrim { position: fixed; inset: 0; z-index: 61; background: rgba(9,9,20,.6);
  opacity: 0; pointer-events: none; transition: opacity .3s; }
.chat-scrim.show { opacity: 1; pointer-events: auto; }
.chat-drawer {
  position: fixed; top: 0; right: 0; z-index: 62; height: 100%;
  width: min(400px, 90vw); transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,1,.36,1);
  background: linear-gradient(160deg, var(--panel), var(--bg));
  border-left: 1px solid var(--primary); display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0,0,0,.5);
}
.chat-drawer.open { transform: translateX(0); }
.chat-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.chat-head h2 { font-family: "Russo One", sans-serif; color: var(--gold); font-size: 1rem; }
.chat-close { background: transparent; border: 1px solid var(--line); color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: .8rem; }
.chat-close:hover { color: var(--cta); border-color: var(--cta); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 92%; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.cm-ava { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: none;
  background: var(--panel-2); border: 1px solid var(--line); }
.cm-body { min-width: 0; }
.cm-who { font-size: .66rem; color: var(--primary-2); font-weight: 700; margin-bottom: 3px; }
.chat-msg.mine .cm-who { text-align: right; color: var(--gold); }
.cm-bubble { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 11px; font-size: .86rem; color: #eef1fb; line-height: 1.35;
  word-break: break-word; white-space: pre-wrap; }
.chat-msg.mine .cm-bubble { background: rgba(124,58,237,.22); border-color: var(--primary); }
.cm-time { font-size: .6rem; color: var(--muted); margin-top: 3px; }
.chat-msg.mine .cm-time { text-align: right; }
.chat-empty { text-align: center; color: var(--muted); font-size: .84rem; padding: 34px 12px; }
.chat-form { display: flex; gap: 8px; border-top: 1px solid var(--line);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
.chat-input { flex: 1; min-width: 0; background: rgba(15,15,35,.6);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  color: var(--txt); font-family: inherit; font-size: .9rem; }
.chat-input:focus { outline: 2px solid var(--primary); border-color: transparent; }
.chat-send { flex: none; width: 46px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), #b45cf0); border: none;
  color: #fff; display: flex; align-items: center; justify-content: center; }
.chat-send svg { width: 20px; height: 20px; }
.chat-send:active { filter: brightness(1.1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
    transition-duration: .01ms !important; }
}
@media (min-width: 700px) {
  .cards { display: grid; grid-template-columns: 1fr 1fr; }
}