:root {
  /* Palette pulled from the Philippine flag — the accent red/gold pairing
     and the flag blue used for tags/badges are deliberate, not incidental,
     so this reads as PBA/Philippine basketball rather than a generic
     dark-mode sports app. */
  --pb-bg: #080b13;
  --pb-bg-panel: #10182a;
  --pb-bg-card: #17203a;
  --pb-border: #263355;
  --pb-accent: #e4002b;      /* PBA red */
  --pb-accent-2: #ffd400;    /* sun/star gold */
  --pb-blue: #2f6fed;        /* flag blue, brightened for legibility on dark */
  --pb-navy: #0038a8;        /* true flag blue — solid fills / gradients */
  --pb-maroon: #7a1130;      /* deep red variant, for position-badge variety */
  --pb-text: #eef2f8;
  --pb-text-dim: #8d9ab3;
  --pb-good: #2ecc71;
  --pb-bad: #ff4757;
  --pb-radius: 14px;
  --pb-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% -10%, #0a2a5c 0%, transparent 55%),
    radial-gradient(circle at 90% 10%, #3a0b18 0%, transparent 45%),
    var(--pb-bg);
  color: var(--pb-text);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.pb-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.pb-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.pb-right-col {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-width: 0; /* lets grids/cards shrink instead of overflowing the column */
}

/* ---------- Landing screen (mode select) ---------- */

.pb-landing { display: flex; flex-direction: column; gap: 28px; }

.pb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pb-border);
}

.pb-nav-brand { display: flex; align-items: center; gap: 8px; }
.pb-nav-logo { font-size: 22px; }
.pb-nav-name { font-weight: 900; font-size: 18px; letter-spacing: 1px; }
.pb-nav-name span { color: var(--pb-accent-2); }

.pb-nav-links { display: flex; gap: 18px; flex-wrap: wrap; }

.pb-nav-link {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--pb-text-dim);
  text-decoration: none;
}

.pb-nav-link.is-active { color: var(--pb-accent-2); }
.pb-nav-link.is-soon { opacity: 0.6; }
.pb-nav-link.is-soon:hover { opacity: 1; }

.pb-hero { text-align: center; }

.pb-hero-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--pb-accent);
  color: var(--pb-accent-2);
  margin-bottom: 14px;
}

.pb-hero-badge span { color: var(--pb-text-dim); font-weight: 700; margin-left: 6px; }

.pb-hero-title {
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 10px;
}

.pb-hero-title span { color: var(--pb-accent); }

.pb-hero-sub { color: var(--pb-text-dim); font-size: 14px; margin: 0 0 20px; }

.pb-mode-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: var(--pb-accent);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pb-accent);
  display: inline-block;
}

.pb-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.pb-mode-card {
  background: var(--pb-bg-panel);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pb-mode-icon { font-size: 34px; margin-bottom: 10px; }
.pb-mode-card h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: 1px; }
.pb-mode-card p { font-size: 12px; color: var(--pb-text-dim); margin: 0 0 16px; flex: 1; }
.pb-mode-btn { width: 100%; }

.pb-mode-locked { opacity: 0.75; }
.pb-mode-locked .pb-mode-icon { filter: grayscale(0.4); }

.pb-btn-locked {
  background: transparent;
  border: 1px solid var(--pb-border);
  color: var(--pb-text-dim);
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.pb-friend-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 14px 16px;
}

.pb-friend-text { display: flex; align-items: center; gap: 12px; }
.pb-friend-icon { font-size: 22px; }
.pb-friend-text strong { font-size: 13px; letter-spacing: 0.5px; }
.pb-friend-text p { margin: 2px 0 0; font-size: 11px; color: var(--pb-text-dim); }

/* ---------- Game screen wrapper ---------- */

.pb-back-btn {
  background: none;
  border: none;
  color: var(--pb-text-dim);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 0 0 12px;
}

.pb-back-btn:hover { color: var(--pb-accent-2); }

/* ---------- Empty state (right column, before the first spin) ---------- */

.pb-empty {
  background: var(--pb-bg-panel);
  border: 1px dashed var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 28px 22px;
  text-align: center;
}

.pb-empty-icon { font-size: 40px; margin-bottom: 10px; }

.pb-empty h3 { margin: 0 0 8px; font-size: 18px; }

.pb-empty > p {
  margin: 0 auto 22px;
  max-width: 420px;
  font-size: 13px;
  color: var(--pb-text-dim);
}

.pb-empty > p strong { color: var(--pb-accent-2); }

.pb-empty-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
  text-align: left;
}

.pb-empty-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-border);
  border-radius: 10px;
  padding: 12px;
}

.pb-empty-step-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pb-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pb-empty-step strong { display: block; font-size: 13px; }
.pb-empty-step p { margin: 2px 0 0; font-size: 11px; color: var(--pb-text-dim); }

.pb-empty-stats {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px dashed var(--pb-border);
}

.pb-empty-stat { text-align: center; }
.pb-empty-stat strong { display: block; font-size: 20px; color: var(--pb-accent-2); }
.pb-empty-stat span { font-size: 10px; letter-spacing: 1px; color: var(--pb-text-dim); }

/* ---------- Header ---------- */

.pb-header { text-align: center; margin-bottom: 24px; }

.pb-logo {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pb-text);
  text-shadow: 0 0 22px rgba(228, 0, 43, 0.45);
}
.pb-logo span { color: var(--pb-accent); }

.pb-tagline {
  margin: 6px 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--pb-blue);
}

.pb-blurb {
  max-width: 520px;
  margin: 0 auto;
  color: var(--pb-text-dim);
  font-size: 14px;
}

/* ---------- Lineup ---------- */

/* Always a slim left-hand sidebar, at every screen size, so the lineup
   stays in view next to the roster on the right — no scrolling down to
   compare a spun-in player against your slots. Width scales fluidly with
   the viewport (30vw) between a phone-friendly floor and the original
   300px desktop ceiling. */
.pb-lineup-panel {
  background: var(--pb-bg-panel);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 10px 6px;
  box-shadow: var(--pb-shadow);
  flex: 0 0 clamp(92px, 30vw, 300px);
  min-width: 0;
  position: sticky;
  top: 10px;
  align-self: flex-start;
}

.pb-lineup {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

/* Compact row layout (position badge + name) for every slot, since the
   panel is a narrow sidebar at every breakpoint now, not just on desktop. */
.pb-slot {
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-border);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: left;
  min-height: unset;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  transition: border-color 0.2s, transform 0.2s;
}

.pb-slot-pos {
  flex: 0 0 24px;
  text-align: center;
}

.pb-slot-info {
  flex: 1 1 auto;
  min-width: 0;
}

.pb-slot-name,
.pb-slot-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-slot.filled {
  border-color: var(--pb-accent);
  background: linear-gradient(160deg, #1d2740, #141c2e);
}

.pb-slot-target {
  border-color: var(--pb-blue);
  box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.35);
  cursor: pointer;
  animation: pb-target-pulse 1s infinite alternate;
}
.pb-slot-target .pb-slot-sub { color: var(--pb-blue); font-weight: 700; }

@keyframes pb-target-pulse {
  from { box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.25); }
  to   { box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.55); }
}

.pb-slot-pos {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--pb-text-dim);
}

.pb-slot.filled .pb-slot-pos { color: var(--pb-accent-2); }

.pb-slot-name {
  font-size: 13px;
  font-weight: 700;
}

.pb-slot-sub {
  font-size: 11px;
  color: var(--pb-text-dim);
}

/* Button and meta each take the sidebar's full width and wrap onto their
   own line — the sidebar is only as wide as clamp() above allows, so
   nothing here forces it wider than that (no fixed min-width). */
.pb-spinbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pb-spin-btn {
  flex: 1 1 100%;
  min-width: 0;
  background: linear-gradient(135deg, var(--pb-accent), #9c0018);
  color: #fff;
  font-size: clamp(13px, 4.5vw, 20px);
  font-weight: 900;
  letter-spacing: 1px;
  border: none;
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(228, 0, 43, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pb-spin-btn:hover:not(:disabled) { transform: translateY(-2px); }
.pb-spin-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pb-spin-btn.spinning { animation: pb-pulse 0.5s infinite alternate; }

@keyframes pb-pulse {
  from { box-shadow: 0 8px 20px rgba(228, 0, 43, 0.35); }
  to   { box-shadow: 0 8px 34px rgba(228, 0, 43, 0.75); }
}

.pb-spin-meta {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: clamp(10px, 3vw, 13px);
  color: var(--pb-text-dim);
}

.pb-link-btn {
  background: none;
  border: none;
  color: var(--pb-blue);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ---------- Spin result / roster ---------- */

.pb-result {
  background: var(--pb-bg-panel);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 18px;
  margin-bottom: 22px;
  box-shadow: var(--pb-shadow);
}

.pb-spin-boxes {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pb-spin-box {
  flex: 1 1 150px;
  max-width: 220px;
  background: var(--pb-bg-card);
  border: 3px solid var(--pb-accent);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 0 18px rgba(228, 0, 43, 0.45), inset 0 0 14px rgba(228, 0, 43, 0.08);
  transition: box-shadow 0.15s ease;
}

.pb-spin-box-era {
  border-color: var(--pb-blue);
  box-shadow: 0 0 18px rgba(47, 111, 237, 0.45), inset 0 0 14px rgba(47, 111, 237, 0.08);
}

.pb-spin-box-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--pb-accent);
  margin-bottom: 6px;
}

.pb-spin-box-era .pb-spin-box-label { color: var(--pb-blue); }

/* Slot-machine reel: a fixed-height window (one row tall) clipping a tall
   vertical strip of stacked candidate values. To "spin", app.js stacks a
   randomized run of values in the strip (ending on the real, server-decided
   result) and animates the strip's transform upward with a decelerating
   easing curve — so it looks like a wheel whirring past names/years and
   gradually slowing to a stop, rather than just swapping text. The edges
   fade via a mask so values scroll in/out softly instead of clipping hard. */
.pb-reel {
  height: 34px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
}

.pb-reel-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.pb-reel-item {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: var(--pb-text);
  letter-spacing: 1px;
  white-space: nowrap;
}

.pb-spin-box.landed {
  animation: pb-box-land 0.4s ease;
}

@keyframes pb-box-land {
  0%   { transform: scale(0.9); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.pb-result-combo {
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  padding: 14px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pb-navy), #001f5c);
  border: 2px solid var(--pb-blue);
  box-shadow: 0 6px 18px rgba(0, 56, 168, 0.45);
  max-width: 340px;
  margin: 0 auto 6px;
}

.pb-result-combo.landed {
  animation: pb-land 0.4s ease;
}

@keyframes pb-land {
  0%   { transform: scale(0.9); opacity: 0.4; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

.pb-roster-hint {
  text-align: center;
  color: var(--pb-text-dim);
  font-size: 13px;
  margin: 8px 0 14px;
}

/* Single column by default — the roster now always shares the screen with
   the lineup sidebar, so it has less room than a full-width column used
   to have. Two columns only once there's actually space to spare. */
.pb-roster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 480px) {
  .pb-roster { grid-template-columns: repeat(2, 1fr); }
}

.pb-player-card {
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-border);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.pb-player-card:hover { border-color: var(--pb-blue); transform: translateY(-1px); }
.pb-player-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pb-player-card.selected {
  border-color: var(--pb-accent);
  box-shadow: 0 0 0 2px rgba(228, 0, 43, 0.4);
  background: linear-gradient(160deg, #2a2013, #182238);
}

.pb-player-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}

.pb-player-name { font-weight: 800; font-size: 14px; }

.pb-player-ovr {
  font-size: 15px;
  font-weight: 900;
  color: var(--pb-accent-2);
}

.pb-player-meta {
  font-size: 12px;
  color: var(--pb-text-dim);
  margin: 2px 0 8px;
}

.pb-attr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pb-attr {
  font-size: 10px;
  background: #0d1320;
  border: 1px solid var(--pb-border);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--pb-text-dim);
}
.pb-attr strong { color: var(--pb-text); }

/* ---------- Final screen ---------- */

.pb-final {
  background: var(--pb-bg-panel);
  border: 1px solid var(--pb-accent);
  border-radius: var(--pb-radius);
  padding: 22px 18px;
  box-shadow: var(--pb-shadow);
}

.pb-final h2 {
  margin: 0 0 16px;
  letter-spacing: 2px;
  color: var(--pb-accent-2);
  text-align: center;
}

/* Two-column layout: record/actions on the left, the five players + squad
   averages on the right. Stacks on narrow screens. */
.pb-final-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 760px) {
  .pb-final-grid { grid-template-columns: 1fr; }
}

/* ---------- Left: hero record card + actions + challenge teaser ---------- */

.pb-final-hero { display: flex; flex-direction: column; gap: 12px; }

.pb-hero-card {
  background: #0d1320;
  border: 2px solid var(--pb-accent);
  border-radius: 16px;
  padding: 20px 16px 16px;
  text-align: center;
  box-shadow: 0 0 22px rgba(228, 0, 43, 0.28);
}

.pb-hero-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: var(--pb-text-dim);
}

.pb-hero-sub {
  font-size: 11px;
  color: var(--pb-text-dim);
  margin-top: 3px;
  opacity: 0.8;
}

.pb-hero-score {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  margin: 12px 0 6px;
}

.pb-hero-score #standWins { color: var(--pb-good); }
.pb-hero-score #standLosses { color: var(--pb-bad); }
.pb-hero-dash { color: var(--pb-text-dim); margin: 0 6px; }

/* Re-triggered on every counted game so each tick reads as a scored point. */
.pb-hero-score span.bump { animation: pb-stand-bump 0.22s ease; display: inline-block; }

@keyframes pb-stand-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.pb-hero-recordline {
  font-size: 12px;
  color: var(--pb-text-dim);
  min-height: 16px;
  margin-bottom: 10px;
}

.pb-standings-progress {
  height: 7px;
  border-radius: 999px;
  background: #060a12;
  border: 1px solid var(--pb-border);
  margin-bottom: 14px;
  overflow: hidden;
}

.pb-standings-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pb-good), var(--pb-accent-2));
  transition: width 0.15s linear;
}

.pb-hero-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pb-hero-tag {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 5px 9px;
  border-radius: 999px;
  min-height: 14px;
}

.pb-hero-mode {
  background: rgba(47, 111, 237, 0.16);
  color: var(--pb-blue);
  border: 1px solid rgba(47, 111, 237, 0.4);
}

.pb-hero-grade.elite { color: #1a0e00; background: linear-gradient(135deg, var(--pb-accent-2), var(--pb-accent)); }
.pb-hero-grade.good  { color: #06281c; background: var(--pb-good); }
.pb-hero-grade.mid   { color: #04101c; background: var(--pb-blue); }
.pb-hero-grade.bad   { color: #2a0a0d; background: var(--pb-bad); }

.pb-hero-power {
  font-size: 11px;
  color: var(--pb-text-dim);
  letter-spacing: 0.5px;
  align-self: center;
}

.pb-hero-power strong { color: var(--pb-accent-2); font-size: 12px; }

.pb-hero-actions { display: flex; gap: 8px; }
.pb-hero-actions .pb-btn { flex: 1; }

.pb-challenge-card {
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pb-challenge-text { flex: 1; }
.pb-challenge-text strong { font-size: 13px; }
.pb-challenge-text p { margin: 2px 0 0; font-size: 11px; color: var(--pb-text-dim); }

.pb-btn-small { padding: 8px 14px; font-size: 12px; white-space: nowrap; }

/* ---------- Right: player list + squad averages ---------- */

.pb-final-roster { display: flex; flex-direction: column; }

.pb-final-players { display: flex; flex-direction: column; gap: 8px; }

.pb-final-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-border);
  border-radius: 10px;
  padding: 9px 12px;
}

.pb-final-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.15;
}

.pb-final-avatar .pos { font-size: 8px; font-weight: 800; opacity: 0.9; letter-spacing: 0.5px; }

.pos-PG { background: linear-gradient(135deg, var(--pb-blue), var(--pb-navy)); }
.pos-SG { background: linear-gradient(135deg, var(--pb-accent-2), #b8860b); color: #1a1200; }
.pos-SF { background: linear-gradient(135deg, var(--pb-accent), #8a0021); }
.pos-PF { background: linear-gradient(135deg, var(--pb-maroon), #430a1b); }
.pos-C  { background: linear-gradient(135deg, #2ecc71, #1b9a55); }

.pb-final-namewrap { flex: 1 1 120px; min-width: 96px; }
.pb-final-name { font-weight: 800; font-size: 13px; }
.pb-final-sub { font-size: 11px; color: var(--pb-text-dim); margin-top: 1px; }

.pb-final-stats { display: flex; gap: 14px; flex: 0 0 auto; }
.pb-final-stat { text-align: center; min-width: 30px; }
.pb-final-stat .v { font-size: 13px; font-weight: 800; }
.pb-final-stat .k { font-size: 9px; color: var(--pb-text-dim); letter-spacing: 0.5px; }

.pb-final-avgrow {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 12px 12px 2px;
  margin-top: 4px;
  border-top: 1px dashed var(--pb-border);
}

.pb-final-avgrow .pb-final-stat .v { font-size: 16px; color: var(--pb-accent-2); }

@media (max-width: 560px) {
  .pb-final-player-row { flex-wrap: wrap; }
  .pb-final-stats { gap: 9px; margin-left: 50px; }
  .pb-final-avgrow { justify-content: space-around; }
}

.pb-btn {
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  font-size: 14px;
}

.pb-btn-primary {
  background: linear-gradient(135deg, var(--pb-accent), #9c0018);
  color: #fff;
}

.pb-btn-ghost {
  background: transparent;
  border: 1px solid var(--pb-blue);
  color: var(--pb-blue);
}

/* ---------- Misc ---------- */

.pb-footer {
  margin-top: 32px;
  text-align: center;
  font-size: 11px;
  color: var(--pb-text-dim);
}

.pb-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-accent);
  color: var(--pb-text);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: var(--pb-shadow);
  z-index: 60;
}

[hidden] { display: none !important; }

/* ---------- Wider desktop breathing room ---------- */
/* The left/right split itself now holds at every width (see .pb-columns /
   .pb-lineup-panel above); this just gives the sidebar a bit more padding
   once there's room to spare, and lets the page grow past the 760px
   mobile-first cap. */

@media (min-width: 900px) {
  .pb-wrap { max-width: 1080px; }

  .pb-lineup-panel { padding: 14px; top: 20px; }

  .pb-slot { padding: 10px 12px; gap: 10px; }

  .pb-slot-pos { flex-basis: 30px; }
}

/* ---------- Mock Draft mode ---------- */

.pb-blind-game .pb-header { margin-bottom: 18px; }

.pb-blind-intro {
  background: var(--pb-bg-panel);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow);
  padding: 32px 22px;
  text-align: center;
}

.pb-blind-intro-icon { font-size: 40px; margin-bottom: 10px; }
.pb-blind-intro h3 { margin: 0 0 8px; font-size: 18px; }
.pb-blind-intro p {
  margin: 0 auto 20px;
  max-width: 440px;
  font-size: 13px;
  color: var(--pb-text-dim);
}

.pb-blind-intro-edition {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-blue);
  border-radius: 10px;
  padding: 8px 18px;
  margin: 0 auto 18px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pb-blind-intro-edition-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--pb-blue);
}

.pb-blind-intro-edition strong { font-size: 14px; }

.pb-blind-intro-edition-team {
  font-size: 12px;
  font-weight: 600;
  color: var(--pb-text-dim);
}

/* While the shuffle is spinning through years/teams before landing, the
   whole card glows and jitters like a slot machine reel — same visual
   language as the score-count reveal, so it's clear something is actively
   rolling rather than just flickering oddly. */
.pb-blind-intro-edition.shuffling {
  border-color: var(--pb-accent-2);
  box-shadow: 0 0 16px rgba(255, 212, 0, 0.45);
  animation: pb-score-jitter 0.15s ease infinite;
}

.pb-blind-intro-countdown[hidden] { display: none; }

.pb-blind-intro-countdown {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--pb-accent-2);
}

.pb-blind-intro-countdown #blindIntroCountdownNum {
  display: inline-block;
  font-size: 16px;
  font-weight: 900;
  animation: pb-countdown-pulse 1s ease infinite;
}

@keyframes pb-countdown-pulse {
  0% { transform: scale(1.3); opacity: 0.6; }
  30% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.pb-blind-intro-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Edition badge — which draft year/season is live. Sits above the shot
   clock bar and stays put through the result screen (only the topbar and
   player pool get hidden once the board is done), so it's always visible
   as a reminder of which draft this is. */
.pb-blind-edition-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, rgba(47, 111, 237, 0.16), rgba(228, 0, 43, 0.12));
  border: 1px solid var(--pb-blue);
  border-radius: var(--pb-radius);
  padding: 10px 16px;
  margin-bottom: 12px;
}

.pb-blind-edition-icon { font-size: 18px; line-height: 1; }

.pb-blind-edition-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.pb-blind-edition-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--pb-blue);
}

.pb-blind-edition-text strong {
  font-size: 15px;
  font-weight: 900;
  color: var(--pb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shot clock + on-the-clock banner */

.pb-blind-topbar[hidden] { display: none; }

.pb-blind-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--pb-bg-panel);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: var(--pb-shadow);
}

.pb-blind-clock-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}

.pb-blind-clock-ring { width: 64px; height: 64px; transform: rotate(-90deg); }

.pb-blind-clock-track {
  fill: none;
  stroke: var(--pb-border);
  stroke-width: 5;
}

.pb-blind-clock-fill {
  fill: none;
  stroke: var(--pb-accent-2);
  stroke-width: 5;
  stroke-linecap: round;
  /* circumference of r=28 ≈ 175.93 — app.js animates stroke-dashoffset
     from 0 (full ring) down to this value (empty) over the 24s clock. */
  stroke-dasharray: 175.93;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.2s ease;
}

.pb-blind-clock-fill.urgent { stroke: var(--pb-bad); }

.pb-blind-clock-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: var(--pb-text);
}

.pb-blind-clock-num.urgent {
  color: var(--pb-bad);
  animation: pb-clock-pulse 0.6s ease infinite;
}

@keyframes pb-clock-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

.pb-blind-onclock { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pb-blind-onclock-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--pb-accent);
}

.pb-blind-onclock-pick { font-size: 13px; color: var(--pb-text-dim); }

.pb-blind-onclock-team {
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Board (left) + player pool (right), side by side at every width so the
   pool of tappable names never sits below a scroll of pick rows. Both
   panels size to their natural content height — no internal scrollbar. */
.pb-blind-columns {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

/* Draft board */

.pb-blind-board {
  display: flex;
  flex: 1 1 56%;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.pb-blind-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-border);
  border-radius: 10px;
  padding: 10px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pb-blind-row-num {
  flex: 0 0 26px;
  font-size: 13px;
  font-weight: 900;
  color: var(--pb-text-dim);
  text-align: center;
}

.pb-blind-row-team {
  flex: 1 1 40%;
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-blind-row-answer {
  flex: 1 1 45%;
  font-size: 13px;
  text-align: right;
  color: var(--pb-text-dim);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-blind-row-answer .name { color: var(--pb-text); font-weight: 700; }
.pb-blind-row-answer .reveal { font-size: 11px; margin-left: 6px; }

.pb-blind-row.on-clock {
  border-color: var(--pb-accent-2);
  box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.25), 0 0 16px rgba(255, 212, 0, 0.25);
  background: rgba(255, 212, 0, 0.06);
}

.pb-blind-row.guessed { border-color: var(--pb-blue); }

.pb-blind-row.correct {
  border-color: var(--pb-good);
  background: rgba(46, 204, 113, 0.08);
}

.pb-blind-row.wrong,
.pb-blind-row.violation {
  border-color: var(--pb-bad);
  background: rgba(255, 71, 87, 0.08);
}

.pb-blind-row.wrong .pb-blind-row-answer .name.wrong-guess {
  text-decoration: line-through;
  color: var(--pb-text-dim);
  margin-right: 6px;
}

.pb-blind-row-badge {
  flex: 0 0 auto;
  font-size: 14px;
}

/* Player pool */

.pb-blind-pool-wrap {
  background: var(--pb-bg-panel);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 16px;
  box-shadow: var(--pb-shadow);
  flex: 1 1 44%;
  min-width: 0;
  position: sticky;
  top: 10px;
}

.pb-blind-pool-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--pb-text-dim);
  text-align: center;
}

.pb-blind-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.pb-blind-chip {
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

.pb-blind-chip:hover { border-color: var(--pb-blue); transform: translateY(-1px); }
.pb-blind-chip:active { transform: translateY(0); }

/* Result panel — sits in the right column, in the same slot the tappable
   name pool used to occupy, so it appears right beside the board (sticky,
   like the pool was) instead of a separate full-width block underneath
   everything. Only one score display now, no duplicate top bar. */
@keyframes pb-score-jitter {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.pb-blind-result[hidden] { display: none; }

.pb-blind-result {
  background: var(--pb-bg-panel);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow);
  padding: 20px 16px;
  text-align: center;
  flex: 1 1 44%;
  min-width: 0;
  position: sticky;
  top: 10px;
}

.pb-blind-score-badge {
  display: inline-block;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--pb-navy), #001f5c);
  border: 2px solid var(--pb-blue);
  border-radius: 999px;
  padding: 8px 22px;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.pb-blind-score-badge.counting {
  border-color: var(--pb-accent-2);
  box-shadow: 0 0 22px rgba(255, 212, 0, 0.45);
  animation: pb-score-jitter 0.15s ease infinite;
}

/* Tier accents — the badge (and the reveal) reads differently depending on
   how the guest actually did, instead of a flat neutral "X/Y" every time. */
.pb-blind-score-badge.tier-perfect,
.pb-blind-score-badge.tier-great {
  border-color: var(--pb-accent-2);
  box-shadow: 0 0 26px rgba(255, 212, 0, 0.5);
  animation: pb-badge-pop 0.55s ease;
}

.pb-blind-score-badge.tier-good {
  border-color: var(--pb-good);
  box-shadow: 0 0 18px rgba(46, 204, 113, 0.35);
}

.pb-blind-score-badge.tier-mid {
  border-color: var(--pb-blue);
}

.pb-blind-score-badge.tier-low,
.pb-blind-score-badge.tier-rough {
  border-color: var(--pb-bad);
  box-shadow: 0 0 14px rgba(255, 71, 87, 0.25);
}

@keyframes pb-badge-pop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.pb-blind-result h2 { margin: 0 0 8px; font-size: 16px; }
.pb-blind-result p { margin: 0 auto 18px; max-width: 100%; font-size: 12px; color: var(--pb-text-dim); }

.pb-blind-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pb-blind-actions .pb-btn { width: 100%; }

@media (max-width: 560px) {
  .pb-blind-row-team, .pb-blind-row-answer { font-size: 12px; }
  .pb-blind-onclock-team { font-size: 15px; }
}

/* ============================================================ */
/* HEAD-TO-HEAD MODE                                              */
/* ============================================================ */

.pb-h2h-game .pb-header { margin-bottom: 18px; }

/* ---------- budget bar ---------- */

.pb-h2h-budgetbar {
  background: var(--pb-bg-panel);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.pb-h2h-budget-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--pb-text-dim);
  margin-bottom: 8px;
}

.pb-h2h-budget-track {
  height: 10px;
  border-radius: 999px;
  background: #0d1320;
  border: 1px solid var(--pb-border);
  overflow: hidden;
}

.pb-h2h-budget-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pb-blue), var(--pb-navy));
  transition: width 0.25s ease;
}

.pb-h2h-budget-fill.low {
  background: linear-gradient(90deg, var(--pb-accent-2), var(--pb-accent));
}

.pb-h2h-budget-nums {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--pb-text-dim);
}

.pb-h2h-budget-nums strong { color: var(--pb-accent-2); font-size: 15px; }
.pb-h2h-budget-spent { color: var(--pb-text-dim); }

/* ---------- squad (starters + bench) ---------- */

.pb-h2h-squad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (min-width: 560px) {
  .pb-h2h-squad { grid-template-columns: 1fr 1fr; align-items: start; }
}

.pb-h2h-squad-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--pb-text-dim);
  margin-bottom: 8px;
}

.pb-h2h-slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.pb-h2h-slot {
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pb-h2h-slot.filled {
  border-color: var(--pb-accent);
  background: linear-gradient(160deg, #1d2740, #141c2e);
}

.pb-h2h-slot-pos {
  flex: 0 0 28px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--pb-text-dim);
}

.pb-h2h-slot.filled .pb-h2h-slot-pos { color: var(--pb-accent-2); }

.pb-h2h-slot-info { flex: 1 1 auto; min-width: 0; }

.pb-h2h-slot-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-h2h-slot-sub {
  font-size: 11px;
  color: var(--pb-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-h2h-slot-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--pb-border);
  background: transparent;
  color: var(--pb-text-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.pb-h2h-slot-remove:hover {
  border-color: var(--pb-accent);
  color: var(--pb-accent);
}

/* ---------- match button ---------- */

.pb-h2h-match-btn {
  width: 100%;
  margin-bottom: 24px;
  font-size: 15px;
  padding: 14px 20px;
}

.pb-h2h-match-btn:disabled {
  background: var(--pb-bg-card);
  color: var(--pb-text-dim);
  cursor: not-allowed;
}

/* ---------- player market ---------- */

.pb-h2h-market-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pb-h2h-market-head h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--pb-text-dim);
}

.pb-h2h-market-hint {
  margin: 6px 0 14px;
  font-size: 12px;
  color: var(--pb-text-dim);
}

.pb-h2h-market-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 480px) {
  .pb-h2h-market-grid { grid-template-columns: repeat(2, 1fr); }
}

.pb-h2h-market-empty {
  font-size: 13px;
  color: var(--pb-text-dim);
  text-align: center;
  padding: 20px 0;
}

/* Market cards reuse .pb-player-card's look, but nothing on the card
   itself is clickable — only the per-slot buy buttons inside it are —
   so the pointer/hover-lift behaviour from Spin/Mock Draft is turned off. */
.pb-h2h-player-card {
  cursor: default;
}
.pb-h2h-player-card:hover {
  border-color: var(--pb-border);
  transform: none;
}
.pb-h2h-player-card.disabled { opacity: 0.45; }

.pb-h2h-cost {
  font-size: 15px;
  font-weight: 900;
  color: var(--pb-accent-2);
}

.pb-h2h-buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.pb-h2h-buy-btn {
  background: var(--pb-blue);
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}

.pb-h2h-buy-btn:hover { background: var(--pb-navy); }

.pb-h2h-buy-btn.disabled {
  background: transparent;
  border: 1px solid var(--pb-border);
  color: var(--pb-text-dim);
  cursor: not-allowed;
}

.pb-h2h-no-slot {
  font-size: 11px;
  color: var(--pb-text-dim);
  font-style: italic;
}

/* ---------- match result ---------- */

.pb-h2h-result {
  margin-top: 26px;
  background: var(--pb-bg-panel);
  border: 1px solid var(--pb-accent);
  border-radius: var(--pb-radius);
  padding: 20px 18px;
  box-shadow: var(--pb-shadow);
}

.pb-h2h-result-banner {
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.pb-h2h-result-banner.win { color: var(--pb-accent-2); }
.pb-h2h-result-banner.loss { color: var(--pb-text-dim); }

.pb-h2h-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
}

.pb-h2h-score-side { text-align: center; flex: 1 1 auto; }
.pb-h2h-score-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--pb-text-dim);
  margin-bottom: 4px;
}
.pb-h2h-score-num { font-size: 34px; font-weight: 900; }
.pb-h2h-score-mid {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--pb-text-dim);
}

.pb-h2h-quarters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.pb-h2h-quarter {
  background: var(--pb-bg-card);
  border: 1px solid var(--pb-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--pb-text-dim);
  display: flex;
  gap: 6px;
}
.pb-h2h-quarter strong { color: var(--pb-text); }
.pb-h2h-quarter.pb-h2h-ot { border-color: var(--pb-accent-2); }

.pb-h2h-compare-block { margin-bottom: 18px; }

.pb-h2h-compare-title {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--pb-text-dim);
  margin-bottom: 10px;
}

.pb-h2h-compare { display: flex; flex-direction: column; gap: 6px; }

.pb-h2h-compare-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.pb-h2h-compare-val {
  font-weight: 800;
  color: var(--pb-text-dim);
}
.pb-h2h-compare-row .pb-h2h-compare-val:first-child { text-align: right; }
.pb-h2h-compare-val.edge { color: var(--pb-accent-2); }

.pb-h2h-compare-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--pb-text-dim);
  text-align: center;
  min-width: 34px;
}

.pb-h2h-rival-roster {
  border-top: 1px dashed var(--pb-border);
  padding-top: 14px;
  margin-bottom: 18px;
}

.pb-h2h-rival-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--pb-text-dim);
  margin-bottom: 8px;
}

.pb-h2h-rival-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}

.pb-h2h-rival-pos {
  flex: 0 0 28px;
  font-weight: 800;
  color: var(--pb-text-dim);
  font-size: 11px;
}

.pb-h2h-rival-name { font-weight: 700; flex: 0 0 auto; }
.pb-h2h-rival-sub { color: var(--pb-text-dim); }

.pb-h2h-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pb-h2h-actions .pb-btn { width: 100%; }

@media (max-width: 560px) {
  .pb-h2h-score-num { font-size: 26px; }
  .pb-h2h-rival-row { flex-wrap: wrap; }
}