/* =====================================================================
   TRUE FOOTY  —  Design System
   Black + textured / red brand accent / grass-green secondary
   ===================================================================== */

:root {
  --bg: #0a0a0a;
  --bg-elev: #141414;
  --surface: #1a1a1a;
  --surface-2: #232323;
  --border: #2a2a2a;
  --border-strong: #3a3a3a;

  --red: #d62828;
  --red-hover: #ed3a3a;
  --red-dim: rgba(214, 40, 40, 0.12);
  --red-glow: rgba(214, 40, 40, 0.35);
  --grass: #2e8b3e;
  --grass-dim: rgba(46, 139, 62, 0.15);

  /* Electric blue used for external article/video source links */
  --link-blue:       #29b6ff;
  --link-blue-hover: #66d4ff;

  --text: #ffffff;
  --text-muted: #a8a8b0;
  --text-dim: #6e6e76;

  --success: #2e8b3e;
  --warn: #f59e0b;
  --danger: #d62828;

  --font-display: 'Anton', 'Oswald', Impact, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1080px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
  --shadow-red: 0 8px 30px rgba(214, 40, 40, 0.25);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at top, rgba(214, 40, 40, 0.06) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
p  { margin: 0 0 1em; color: var(--text); }
.lead { font-size: 1.15rem; color: var(--text-muted); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.text-red { color: var(--red); }
.text-grass { color: var(--grass); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 3.5rem 0; }
.section--tight { padding: 3rem 0; }
.section--hero { padding: 6rem 0 4rem; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* NAV */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 10, 0.88);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border); }
.nav__inner { display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.5rem; max-width: var(--max-width); margin: 0 auto; }
.nav__brand { display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.04em; text-transform: uppercase; }
.nav__brand img { height: 46px; width: auto; display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.nav__brand-fallback { display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.04em; text-transform: uppercase; }
.nav__brand-fallback .red { color: var(--red); }
.nav__links { display: flex; gap: 0.25rem; align-items: center; }
.nav__link { padding: 0.6rem 1rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem;
  color: var(--text-muted); transition: all 0.15s; }
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link--active { color: var(--text); background: var(--surface); }
.nav__link--cta { background: var(--red); color: #fff !important; font-weight: 700;
  padding: 0.6rem 1.2rem; letter-spacing: 0.02em; }
.nav__link--cta:hover { background: var(--red-hover); }

.nav__toggle { display: none; }
@media (max-width: 760px) {
  .nav__toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--surface); }
  .nav__toggle span { display: block; width: 18px; height: 2px; background: var(--text); position: relative; }
  .nav__toggle span::before, .nav__toggle span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text); }
  .nav__toggle span::before { top: -6px; }
  .nav__toggle span::after  { top: 6px; }
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 0.75rem; }
  .nav__links.is-open { display: flex; }
  .nav__link { width: 100%; }
}

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.6rem; border-radius: var(--radius);
  font-weight: 700; font-size: 1rem; letter-spacing: 0.01em;
  text-transform: uppercase; transition: all 0.18s; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; }
.btn--primary { background: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.btn--primary:hover { background: var(--red-hover); transform: translateY(-2px); }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface); border-color: var(--text-muted); }
.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { color: var(--text); }
.btn--lg { padding: 1.15rem 2rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }
.btn--grass { background: var(--grass); color: #fff; }
.btn--grass:hover { background: #36a04a; }

/* HERO */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); padding: 3rem 0 5rem; }
.hero::before { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; position: relative; }

/* Hero pillars — three condensed "what we do" rows sitting below the
   hero grid, stretching the full container width in three columns. */
.hero__pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem; margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 760px) {
  .hero__pillars { grid-template-columns: 1fr; gap: 1rem; }
}
.hero__pillar {
  display: flex; align-items: flex-start; gap: 0.85rem;
}
.hero__pillar-icon {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--red-dim); color: var(--red);
  border-radius: 8px; font-size: 0.95rem; font-weight: 800;
  margin-top: 0.1rem;
}
.hero__pillar-title {
  font-family: var(--font-display);
  font-size: 0.85rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text);
  margin-bottom: 0.2rem;
}
.hero__pillar-body {
  font-size: 0.88rem; color: var(--text-muted);
  margin: 0; line-height: 1.45;
}

/* List Manager screenshot panel (replaces the old mocked-up row card) */
.lm-screenshot {
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.lm-screenshot__img {
  width: 100%; height: auto;
  display: block; border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); text-transform: uppercase; margin-bottom: 1.25rem; line-height: 1.02; }
.hero h1 .red { color: var(--red); }
.hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2.25rem; }
.hero__stats { display: flex; gap: 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.hero__stat-num { font-family: var(--font-display); font-size: 2.2rem; color: var(--red); letter-spacing: 0.02em; }
.hero__stat-label { font-size: 0.78rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }

.hero__visual { position: relative; padding: 1.5rem;
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero__visual::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--red), transparent); }
.broadcast-strip { font-family: var(--font-display); display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 8px var(--red-glow); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

.mock-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 0.85rem;
  padding: 0.7rem; border-bottom: 1px solid var(--border); }
.mock-row:last-child { border-bottom: 0; }
.mock-row__rank { font-family: var(--font-display); font-size: 1.4rem; color: var(--grass); }
.mock-row__name { font-weight: 700; font-size: 0.92rem; }
.mock-row__meta { font-size: 0.78rem; color: var(--text-muted); }
.mock-row__bar { width: 60px; height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.mock-row__bar > div { height: 100%; background: var(--red); }

/* SECTIONS */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section-head--left { text-align: left; max-width: none; margin-bottom: 2rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.75rem; transition: all 0.2s; }
.card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: var(--shadow-red); }
.card__icon { width: 48px; height: 48px; border-radius: 10px;
  background: var(--red-dim); color: var(--red); display: grid; place-items: center;
  margin-bottom: 1rem; font-size: 1.4rem; }
.card__title { font-family: var(--font-display); font-size: 1.4rem;
  letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 0.5rem; }
.card__body { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

.video-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: all 0.2s; }
.video-card:hover { border-color: var(--red); transform: translateY(-2px); }
.video-card__thumb { aspect-ratio: 16 / 9; background: var(--bg-elev); position: relative;
  display: grid; place-items: center; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.video-card__thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__thumb-fallback::after { content: '▶'; position: absolute; background: rgba(214, 40, 40, 0.9);
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.3rem; }
.video-card__body { padding: 1rem 1.25rem; }
.video-card__title { font-weight: 700; font-size: 1rem; margin-bottom: 0.3rem; }
.video-card__meta { font-size: 0.8rem; color: var(--text-muted); }

/* Featured panel — used to promote the Trade & Draft Pass on home */
.feature-panel { background:
    radial-gradient(ellipse at top right, rgba(214, 40, 40, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
  padding: 3rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem;
  align-items: center; position: relative; overflow: hidden; }
@media (max-width: 760px) { .feature-panel { grid-template-columns: 1fr; padding: 2rem; } }
.feature-panel__badge { display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--red-dim); color: var(--red);
  padding: 0.35rem 0.8rem; border-radius: 6px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; }

.newsletter { background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 3rem; text-align: center; }
.newsletter__form { display: flex; gap: 0.5rem; max-width: 480px; margin: 1.5rem auto 0; }
.input { flex: 1; background: var(--bg); border: 1px solid var(--border-strong);
  color: var(--text); padding: 0.95rem 1rem; border-radius: var(--radius); font-size: 0.98rem; font-family: inherit; }
.input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
@media (max-width: 480px) { .newsletter__form { flex-direction: column; } }

.footer { border-top: 1px solid var(--border); padding: 3rem 0 2rem; margin-top: 4rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__col h4 { font-family: var(--font-body); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-muted); }
.footer__col a { display: block; color: var(--text-muted); padding: 0.3rem 0; font-size: 0.95rem; transition: color 0.15s; }
.footer__col a:hover { color: var(--red); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center;
  padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 480px) { .footer__bottom { flex-direction: column; gap: 0.75rem; } }

/* PAGE HEADER */
.page-header { padding: 5rem 0 3rem; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, rgba(214, 40, 40, 0.1) 0%, transparent 60%); pointer-events: none; }
.page-header h1 { margin-bottom: 0.75rem; }
.page-header p { color: var(--text-muted); font-size: 1.15rem; max-width: 720px; margin: 0; }

/* HUB — PAYWALL + TABS */
.paywall { background:
    radial-gradient(ellipse at top, rgba(214, 40, 40, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
  padding: 3.5rem 3rem; text-align: center; margin: 3rem 0;
  position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.paywall__lock { width: 72px; height: 72px; border-radius: 18px;
  background: var(--red-dim); color: var(--red); display: grid; place-items: center; margin: 0 auto 1.5rem; font-size: 2rem; }
.paywall__price { display: inline-flex; align-items: baseline; gap: 0.5rem;
  background: var(--bg); border: 1px solid var(--border-strong);
  padding: 1rem 1.6rem; border-radius: var(--radius); margin: 1.5rem 0; }
.paywall__price-amount { font-family: var(--font-display); font-size: 2.6rem; color: var(--red); letter-spacing: 0.02em; line-height: 1; }
.paywall__price-currency { font-family: var(--font-display); color: var(--text); font-size: 1.2rem; }
.paywall__price-meta { color: var(--text-muted); font-size: 0.9rem; }
.paywall__tier { display: inline-block; background: var(--red); color: #fff;
  padding: 0.25rem 0.7rem; border-radius: 4px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.75rem; }
.paywall__cta { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.paywall__signin { margin-top: 1.5rem; font-size: 0.92rem; color: var(--text-muted); }
.paywall__signin a { color: var(--red); font-weight: 600; }
.paywall__signin a:hover { text-decoration: underline; }

.includes { list-style: none; padding: 0; margin: 2rem auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 2rem;
  text-align: left; max-width: 640px; }
@media (max-width: 560px) { .includes { grid-template-columns: 1fr; } }
.includes li { display: flex; align-items: center; gap: 0.6rem; color: var(--text); font-size: 0.95rem; }
.includes li::before { content: '✓'; color: var(--grass); font-weight: 900; flex-shrink: 0; }

.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0 0 2rem;
  padding: 0.4rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto; }
.tab { padding: 0.65rem 1.1rem; border-radius: 6px; font-weight: 600; font-size: 0.92rem;
  color: var(--text-muted); white-space: nowrap; transition: all 0.15s; }
.tab:hover { color: var(--text); background: var(--bg); }
.tab.is-active { background: var(--red); color: #fff; }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.premium-content { display: none; }
.is-unlocked .premium-content { display: block; }
.is-unlocked .paywall { display: none; }
.is-unlocked [data-ms-content="paywall"] { display: none; }

.unlocked-banner { display: none;
  background: var(--grass-dim); border: 1px solid rgba(46, 139, 62, 0.3);
  color: var(--grass); padding: 0.9rem 1.25rem; border-radius: var(--radius); margin-bottom: 2rem;
  align-items: center; justify-content: space-between; font-size: 0.95rem; font-weight: 600; }
.is-unlocked .unlocked-banner { display: flex; }

/* Draft Power Rankings — sleek table layout */
.prtable-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;        /* clip the first/last row's bg corners */
}
.prtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.prtable thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
  font-weight: 700;
  padding: 0.65rem 0.9rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.prtable tbody td {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.prtable tbody tr:last-child td { border-bottom: none; }
.prtable tbody tr:hover td { background: var(--bg-elev); }

/* Per-column tuning */
.prtable .prtable__rank {
  width: 56px;
  font-family: var(--font-display);
  font-size: 1.05rem; color: var(--red);
  letter-spacing: 0.02em;
}
.prtable thead th.prtable__rank { color: var(--text-muted); font-size: 0.7rem; }
.prtable .prtable__name { font-weight: 700; }
.prtable .prtable__pos { color: var(--text); }
.prtable .prtable__hgt, .prtable .prtable__st {
  color: var(--text-muted); white-space: nowrap;
}
.prtable .prtable__club { color: var(--text-muted); }
.prtable .prtable__dash { color: var(--text-dim); }
.prtable__tie {
  display: inline-block;
  background: var(--grass-dim); color: var(--grass);
  padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Shared state badges — used by both the Power Rankings table and the
   Draft Simulator player pool so the same VC / SA / WA pill colour
   appears everywhere. Colours loosely follow AFL state-league
   conventions. Uppercase + small caps for visual rhythm. */
.state-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--surface-2); color: var(--text);
  border: 1px solid transparent;
  vertical-align: middle;
}
/* Vic Country — white bg, navy text (inverse of VM) */
.state-badge[data-state="VC"] {
  background: #ffffff; color: #0b1f5c;
  border-color: #0b1f5c;
}
/* Vic Metro — navy bg, white text */
.state-badge[data-state="VM"] {
  background: #0b1f5c; color: #ffffff;
  border-color: #0b1f5c;
}
/* South Australia — red */
.state-badge[data-state="SA"] {
  background: rgba(214, 40, 40, 0.18); color: #ff6f6f;
  border-color: rgba(214, 40, 40, 0.4);
}
/* Western Australia — gold */
.state-badge[data-state="WA"] {
  background: rgba(245, 195, 67, 0.18); color: #ffd35e;
  border-color: rgba(245, 195, 67, 0.4);
}
/* Tasmania — green */
.state-badge[data-state="TAS"] {
  background: rgba(46, 139, 62, 0.22); color: #6cd07b;
  border-color: rgba(46, 139, 62, 0.45);
}
/* Queensland — maroon */
.state-badge[data-state="QLD"] {
  background: rgba(140, 30, 60, 0.22); color: #ff7a96;
  border-color: rgba(140, 30, 60, 0.45);
}
/* New South Wales — sky blue */
.state-badge[data-state="NSW"] {
  background: rgba(0, 153, 204, 0.18); color: #5cd3f3;
  border-color: rgba(0, 153, 204, 0.4);
}
/* Northern Territory — orange */
.state-badge[data-state="NT"] {
  background: rgba(236, 110, 38, 0.18); color: #ff9a5e;
  border-color: rgba(236, 110, 38, 0.4);
}
/* ACT — aqua */
.state-badge[data-state="ACT"] {
  background: rgba(38, 198, 218, 0.18); color: #6ed8e6;
  border-color: rgba(38, 198, 218, 0.4);
}
/* Allies/Academy/National catch-all — purple */
.state-badge[data-state="AW"],
.state-badge[data-state="ALLIES"] {
  background: rgba(150, 90, 220, 0.18); color: #b889ff;
  border-color: rgba(150, 90, 220, 0.4);
}

/* Mobile: hide the lower-priority columns rather than letting the table
   scroll horizontally. Rank + Player + Position + Tie stay visible. */
@media (max-width: 720px) {
  .prtable { font-size: 0.86rem; }
  .prtable thead th, .prtable tbody td { padding: 0.5rem 0.7rem; }
  .prtable .prtable__hgt, .prtable .prtable__st, .prtable .prtable__club { display: none; }
}

.empty-state { text-align: center; padding: 4rem 2rem;
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.empty-state h3 { font-family: var(--font-display); text-transform: uppercase; margin-bottom: 0.5rem; }
.empty-state p { color: var(--text-muted); margin: 0; }

/* RUMOUR TRACKER */
#rumours-app { margin-top: 0.25rem; }

.rumours-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 1.75rem; }
.club-pill { padding: 0.45rem 0.85rem; border-radius: 999px;
  font-weight: 600; font-size: 0.85rem; color: var(--text-muted); white-space: nowrap;
  background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; }
.club-pill:hover { color: var(--text); background: var(--bg); }
.club-pill.is-active { background: var(--red); color: #fff; border-color: var(--red); }
.club-pill[data-club="__summary__"] { font-weight: 800; }

.club-link { color: var(--red); font-weight: 600; text-decoration: none;
  border-bottom: 1px dotted rgba(214, 40, 40, 0.5); }
.club-link:hover { color: var(--red-hover); border-bottom-color: var(--red-hover); }
.player-link {
  color: var(--red); font-weight: 600; text-decoration: none;
  border-bottom: 0;
  transition: color 0.12s;
}
.player-link:hover { color: var(--red-hover); text-decoration: underline; text-underline-offset: 3px; }

.rumours-back { display: inline-block; margin-bottom: 0.75rem;
  color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.rumours-back:hover { color: var(--red-hover); }

.rumour-card__clubs { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.club-chip { display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.25rem 0.7rem; text-decoration: none; }
.club-chip:hover { border-color: var(--red); color: #fff; }
.club-chip__role { color: var(--text-dim); font-weight: 500; text-transform: uppercase;
  font-size: 0.64rem; letter-spacing: 0.05em; }

.rumour-section { margin-bottom: 2.25rem; }
.rumour-section__title { font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.2rem; margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.rumour-section__count { font-family: var(--font-body);
  background: var(--red-dim); color: var(--red);
  font-size: 0.78rem; font-weight: 700;
  padding: 0.1rem 0.55rem; border-radius: 999px; }

.rumour-grid { display: flex; flex-direction: column; gap: 0.85rem; }
.rumour-card { background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: var(--radius); padding: 1.25rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.65rem;
  transition: border-color 0.15s; }
.rumour-card:hover { border-color: var(--border-strong); border-left-color: var(--red-hover); }
.rumour-card__head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; }
.rumour-card__title {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
}
.rumour-card--player .rumour-card__head { align-items: center; }
.rumour-card__topmeta { font-size: 0.85rem; color: var(--text-muted); }
.rumour-card__topmeta .rumour-card__date { color: var(--text); font-weight: 600; }
.rumour-card__topmeta a { color: var(--text-muted); border-bottom: 1px dotted var(--border-strong); text-decoration: none; }
.rumour-card__topmeta a:hover { color: var(--red-hover); border-bottom-color: var(--red-hover); }
.rumour-card__body { font-size: 0.96rem; color: var(--text); line-height: 1.6; }
.rumour-card__body p { margin: 0 0 0.5rem; }
.rumour-card__body p:last-child { margin-bottom: 0; }
.rumour-card__note { font-size: 0.92rem; color: var(--text-muted); font-style: italic; margin: 0;
  padding-left: 0.85rem; border-left: 2px solid var(--border-strong); }
.rumour-card__meta { font-size: 0.82rem; color: var(--text-dim);
  border-top: 1px solid var(--border); padding-top: 0.65rem; margin-top: 0.2rem; }
.rumour-card__meta a, .src-link,
.rumour-card__body .src-link, .player-summary__body .src-link {
  color: var(--link-blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(41, 182, 255, 0.45);
}
.rumour-card__meta a:hover, .src-link:hover,
.rumour-card__body .src-link:hover, .player-summary__body .src-link:hover {
  color: var(--link-blue-hover);
  border-bottom-color: var(--link-blue-hover);
}

.conf { display: inline-flex; align-items: center;
  padding: 0.25rem 0.7rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap; flex-shrink: 0; }
.conf--redhot  { background: rgba(214, 40, 40, 0.18);  color: var(--red); }
.conf--high    { background: rgba(46, 139, 62, 0.18);  color: var(--grass); }
.conf--med     { background: rgba(245, 158, 11, 0.18); color: var(--warn); }
.conf--low     { background: var(--surface-2); color: var(--text-muted); }
.conf--cold    { background: rgba(120, 180, 230, 0.16); color: #7ec5f0; }
.conf--neutral { background: var(--surface-2); color: var(--text-muted); }
@media (max-width: 560px) { .rumour-grid { grid-template-columns: 1fr; } }

/* LIST MANAGER page */
.lm-hero { padding: 5rem 0 4rem; border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at top left, rgba(46, 139, 62, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(214, 40, 40, 0.08) 0%, transparent 55%); }
.lm-hero__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 880px) { .lm-hero__inner { grid-template-columns: 1fr; } }

.lm-tag { display: inline-block;
  background: var(--grass-dim); color: var(--grass);
  padding: 0.35rem 0.8rem; border-radius: 6px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; }

/* Title row: "THE LIST MANAGER." text + the game logo beside it */
.lm-title { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.lm-title h1 { margin: 0; }
.lm-title__logo {
  height: clamp(110px, 14vw, 170px);
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .lm-title { gap: 0.75rem; }
  .lm-title__logo { height: 90px; }
}

.lm-screen { background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-lg);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85rem; }
.lm-screen__bar { display: flex; gap: 0.4rem; padding-bottom: 0.85rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--border); }
.lm-screen__bar span { width: 12px; height: 12px; border-radius: 50%; background: var(--border); }
.lm-screen__bar span:nth-child(2) { background: var(--warn); opacity: 0.7; }
.lm-screen__bar span:nth-child(3) { background: var(--grass); opacity: 0.7; }
.lm-screen__title { font-family: var(--font-display); font-size: 1rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.6rem; }
.lm-row { display: flex; justify-content: space-between; align-items: center;
  padding: 0.45rem 0; border-bottom: 1px dashed var(--border); font-size: 0.85rem; }
.lm-row:last-child { border-bottom: 0; }
.lm-row__name { color: var(--text); }
.lm-row__age { color: var(--text-dim); margin-right: auto; margin-left: 0.5rem; }
.lm-row__val { color: var(--red); font-weight: 700; }

.roadmap { position: relative; padding-left: 2rem; }
.roadmap::before { content: ''; position: absolute; top: 0; bottom: 0; left: 8px;
  width: 2px; background: var(--border); }
.roadmap__item { position: relative; padding: 1rem 0 1.5rem 1.5rem; }
.roadmap__item::before { content: ''; position: absolute; top: 1.45rem; left: -1.25rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong); }
.roadmap__item.is-done::before { background: var(--grass); border-color: var(--grass); }
.roadmap__item.is-current::before { background: var(--red); border-color: var(--red);
  box-shadow: 0 0 0 5px rgba(214, 40, 40, 0.25); }
.roadmap__date { display: inline-block; font-size: 0.78rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 0.4rem; }
.roadmap__title { font-family: var(--font-display); font-size: 1.4rem;
  letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 0.3rem; }
.roadmap__body { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

.stats-strip { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
@media (max-width: 720px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }
.stats-strip__num { font-family: var(--font-display); font-size: 2.6rem; color: var(--red); letter-spacing: 0.02em; }
.stats-strip__label { font-size: 0.78rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }

.grass-band { height: 12px; width: 100%;
  background: repeating-linear-gradient(90deg,
    var(--grass) 0px, var(--grass) 60px,
    #246b30 60px, #246b30 120px);
  opacity: 0.55; }

/* Club Analysis grid */
.club-grid { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.9rem; }
.club-card { display: flex; flex-direction: column; align-items: center;
  gap: 0.7rem; padding: 1.25rem 0.9rem 1rem; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font: inherit;
  cursor: pointer; transition: all 0.15s; min-height: 170px;
  justify-content: center; }
.club-card:hover { border-color: var(--red); background: var(--surface-2);
  transform: translateY(-2px); box-shadow: var(--shadow-red); }
.club-card__logo { width: 84px; height: 84px; object-fit: contain;
  display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
.club-card__name { font-family: var(--font-display); font-size: 1.05rem;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1; }

/* Generic club-logo (also used on rumour cards & club page heading) */
.club-logo { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Club page heading row */
.club-page__head {
  display: flex !important; align-items: center; gap: 1.25rem;
  text-align: left !important; max-width: none !important;
}
.club-page__logo { width: 72px; height: 72px; object-fit: contain;
  flex-shrink: 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
.club-page__heading { flex: 1 1 auto; min-width: 0; }
.club-page__heading h2 { margin-bottom: 0.25rem; }
.club-page__heading .eyebrow { margin-bottom: 0.45rem; }
.club-page__heading p { margin: 0; }

/* Current draft selections strip on each club page */
.club-picks {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
}
.club-picks__label {
  font-family: var(--font-display);
  font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.club-picks__list {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.club-picks__pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.84rem; color: var(--text);
}
.club-picks__num { font-weight: 700; }
.club-picks__from {
  color: var(--text-muted); font-size: 0.78rem; font-style: italic;
}
.club-picks__pts {
  color: var(--red); font-weight: 600; font-size: 0.78rem;
}

/* Rumour summary card — current-club logo in the head row */
.rumour-card--logo .rumour-card__head { align-items: center; }
.rumour-card__logo { width: 44px; height: 44px; object-fit: contain;
  flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }

@media (max-width: 560px) {
  .club-page__head { flex-direction: row; gap: 0.85rem; }
  .club-page__logo { width: 56px; height: 56px; }
  .rumour-card__logo { width: 38px; height: 38px; }
}

/* Utility */
.center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }
.muted { color: var(--text-muted); }
.divider { height: 1px; background: var(--border); margin: 3rem 0; }
.hide { display: none !important; }

/* =====================================================================
   LIST MANAGER — release line, progress notes, screenshot gallery, lightbox
   ===================================================================== */
.lm-release {
  margin: 2rem 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.45rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--red);
}
.lm-progress {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--grass);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 0;
}
.lm-progress p { margin: 0 0 0.6rem; font-size: 0.97rem; color: var(--text); }
.lm-progress p:last-child { margin-bottom: 0; }
.lm-progress__label {
  display: inline-block; margin-right: 0.35rem;
  font-weight: 800; color: var(--grass);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem;
}

/* Gallery (main image + thumbnails) */
.lm-gallery {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 0.85rem;
  box-shadow: var(--shadow-lg);
}
.lm-gallery__main {
  position: relative;
  display: block; width: 100%;
  padding: 0; border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 16 / 9;
}
.lm-gallery__main img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s ease, opacity 0.2s;
}
.lm-gallery__main:hover img { transform: scale(1.02); }
.lm-gallery__expand {
  position: absolute; top: 0.6rem; right: 0.6rem;
  background: rgba(0,0,0,0.6); color: #fff;
  width: 32px; height: 32px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 1.1rem; pointer-events: none;
}
.lm-gallery__missing {
  display: none;
  position: absolute; inset: 0;
  padding: 1.5rem; text-align: center;
  color: var(--text-muted); font-size: 0.85rem;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 0.4rem;
}
.lm-gallery__missing code {
  background: var(--surface-2); padding: 0.1rem 0.4rem; border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', monospace; font-size: 0.8rem; color: var(--text);
}
.lm-gallery__main.is-missing .lm-gallery__missing { display: flex; }
.lm-gallery__main.is-missing .lm-gallery__expand { display: none; }

.lm-gallery__thumbs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  margin-top: 0.6rem;
}
.lm-thumb {
  position: relative;
  display: block; padding: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  transition: all 0.15s;
}
.lm-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lm-thumb:hover { border-color: var(--text-muted); }
.lm-thumb.is-active {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(214, 40, 40, 0.35);
}
.lm-thumb__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.25rem 0.5rem; font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  text-align: left;
}
.lm-gallery__caption {
  margin: 0.85rem 0.25rem 0.25rem;
  font-size: 0.85rem; color: var(--text-muted); text-align: center;
}

/* Lightbox */
.lm-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.92);
  display: grid; place-items: center;
  padding: 2rem; cursor: zoom-out;
  animation: lmFadeIn 0.18s ease-out;
}
.lm-lightbox[hidden] { display: none; }
.lm-lightbox__img {
  max-width: min(1400px, 96vw);
  max-height: 92vh;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-strong);
}
.lm-lightbox__close {
  position: absolute; top: 1rem; right: 1.25rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: #fff;
  font-size: 1.5rem; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.15);
}
.lm-lightbox__close:hover { background: rgba(255,255,255,0.15); }
@keyframes lmFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   PHANTOM DRAFTS
   ===================================================================== */
#phantom-drafts-app { margin-top: 0.25rem; }
.ph-meta { font-size: 0.9rem; margin: 0 0 1.1rem; }
.ph-meta strong { color: var(--text); }

.ph-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}
.ph-pill {
  padding: 0.45rem 0.95rem; border-radius: 999px;
  font-weight: 700; font-size: 0.85rem;
  color: var(--text-muted); white-space: nowrap;
  background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: all 0.15s;
  letter-spacing: 0.03em;
}
.ph-pill:hover { color: var(--text); background: var(--bg); }
.ph-pill.is-active { background: var(--red); color: #fff; border-color: var(--red); }

.ph-list { display: flex; flex-direction: column; gap: 0.6rem; }
.ph-pick {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center; gap: 1.25rem;
  background:
    linear-gradient(90deg, rgba(214, 40, 40, 0.06) 0%, transparent 30%),
    var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: all 0.18s;
}
.ph-pick:hover {
  border-color: var(--border-strong);
  border-left-color: var(--red-hover);
  transform: translateX(3px);
  box-shadow: var(--shadow);
}

/* Left: "Pick N" stacked label */
.ph-pick__num {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1;
}
.ph-pick__num-label {
  font-family: var(--font-body);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.ph-pick__num-val {
  font-family: var(--font-display);
  font-size: 2.4rem; color: var(--red); letter-spacing: 0.01em;
  line-height: 0.9;
}

/* Middle: player name + position/height sub-line */
.ph-pick__body { min-width: 0; }
.ph-pick__name {
  font-weight: 700; font-size: 1.15rem; color: var(--text);
  line-height: 1.25;
}
.ph-pick__sub {
  font-size: 0.82rem; color: var(--text-muted); margin-top: 0.2rem;
}
.ph-pick__tag {
  display: inline-block; margin-left: 0.55rem; vertical-align: middle;
  background: var(--grass-dim); color: var(--grass);
  padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Right: club logo + club name, junior + state below */
.ph-pick__right {
  display: flex; align-items: center; gap: 0.85rem;
  padding-left: 1rem; border-left: 1px solid var(--border);
  min-width: 200px;
}
.ph-pick__logo {
  width: 48px; height: 48px; object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.ph-pick__right-text { text-align: left; min-width: 0; }
.ph-pick__club {
  font-family: var(--font-display); font-size: 1.05rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); line-height: 1.1;
}
.ph-pick__rightmeta {
  font-size: 0.75rem; color: var(--text-muted);
  margin-top: 0.25rem; letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .ph-pick {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    row-gap: 0.7rem; column-gap: 0.85rem;
    padding: 0.85rem 1rem;
  }
  .ph-pick__num-val { font-size: 1.9rem; }
  .ph-pick__right {
    grid-column: 1 / -1;
    padding-left: 0; border-left: 0;
    border-top: 1px solid var(--border); padding-top: 0.7rem;
    min-width: 0;
  }
  .ph-pick__logo { width: 40px; height: 40px; }
}

/* =====================================================================
   SUMMARY CARDS — "True Footy says:" block + cleaner head
   ===================================================================== */
.rumour-card--summary .rumour-card__head { align-items: center; }
.rumour-card--summary .rumour-card__title {
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  line-height: 1.2;
}
/* Player-link inside a card title should look like part of the title,
   not a coloured pill. Use the title's own colour with a hover lift. */
.rumour-card__title .player-link {
  color: inherit;
  font-weight: inherit;
}
.rumour-card__title .player-link:hover {
  color: var(--red-hover);
  text-decoration: none;
}
.rumour-card__says {
  margin-top: 0.4rem;
  padding: 0.85rem 1rem;
  background: var(--bg);
  border-left: 3px solid var(--grass);
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
}
.rumour-card__says p { margin: 0 0 0.5rem; color: var(--text); }
.rumour-card__says p:last-child { margin-bottom: 0; }
.rumour-card__says-label {
  display: inline-block; margin-right: 0.35rem;
  font-weight: 800; color: var(--grass);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem;
}

/* =====================================================================
   PLAYER PAGE — top "Summary" panel + new heading row
   ===================================================================== */
.player-page__head {
  display: flex !important; align-items: center; gap: 1.25rem;
  text-align: left !important; max-width: none !important;
  flex-wrap: wrap;
}
.player-page__head .rumours-back { flex: 0 0 100%; margin-bottom: 0.25rem; }
.player-page__logo {
  width: 72px; height: 72px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
.player-page__heading h2 { margin-bottom: 0.25rem; }
.player-page__heading { flex: 1 1 auto; min-width: 0; }

.player-summary {
  margin: 0 0 1.75rem;
  background:
    linear-gradient(135deg, rgba(214, 40, 40, 0.08) 0%, transparent 50%),
    var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
}
.player-summary__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.65rem;
}
.player-summary__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
}
.player-summary__from {
  font-size: 0.82rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  margin-bottom: 0.85rem;
}
.player-summary__body {
  font-size: 1rem; line-height: 1.6; color: var(--text);
}
.player-summary__body p { margin: 0 0 0.6rem; }
.player-summary__body p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .player-page__head { gap: 0.85rem; }
  .player-page__logo { width: 56px; height: 56px; }
  .player-summary { padding: 1.15rem 1.2rem; }
}

/* =====================================================================
   UNCONTRACTED PLAYERS — table view
   ===================================================================== */
.uc-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.92rem;
}
.uc-table thead th {
  text-align: left;
  background: var(--bg-elev);
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.uc-table tbody tr { border-top: 1px solid var(--border); }
.uc-table tbody tr:first-child { border-top: 0; }
.uc-table tbody tr:hover { background: var(--surface-2); }
.uc-table td {
  padding: 0.55rem 1rem;
  color: var(--text);
}
.uc-table td:first-child { font-weight: 600; }
.uc-status {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.uc-status--ufa     { background: rgba(214, 40, 40, 0.16);  color: var(--red); }
.uc-status--rfa     { background: rgba(245, 158, 11, 0.16); color: var(--warn); }
.uc-status--nfa     { background: var(--surface-2);         color: var(--text-muted); }
.uc-status--neutral { background: var(--surface-2);         color: var(--text-muted); }

/* =====================================================================
   PHANTOM DRAFTS — final layout
   Pick (small) | Club logo + name | Player name + position/height | Junior + State
   ===================================================================== */
.ph-pick {
  grid-template-columns: 88px 200px 1fr auto;
}
.ph-pick__club-block {
  display: flex; align-items: center; gap: 0.75rem;
  padding-right: 1rem; border-right: 1px solid var(--border);
}
.ph-pick__club-logo {
  width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.ph-pick__club-name {
  font-family: var(--font-display);
  font-size: 0.98rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text);
  line-height: 1.15;
}
.ph-pick__right-block {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; gap: 0.2rem; min-width: 130px;
}
.ph-pick__junior {
  font-family: var(--font-body);
  font-size: 0.85rem; color: var(--text);
  font-weight: 600; letter-spacing: 0.02em;
}
/* .ph-pick__state is now just a positioning wrapper; the visible chip
   is the shared .state-badge sitting inside it. */
.ph-pick__state {
  margin-top: 0.25rem;
}

/* ------ Current Draft Order: condensed table view ------ */
.ph-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ph-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.ph-table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
  font-weight: 700;
  padding: 0.55rem 0.9rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ph-table tbody td {
  padding: 0.45rem 0.9rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.ph-table tbody tr:last-child td { border-bottom: none; }
.ph-table tbody tr:hover td { background: var(--bg-elev); }
.ph-table__pick {
  width: 56px;
  font-family: var(--font-display);
  font-size: 1rem; color: var(--red);
  letter-spacing: 0.02em;
}
.ph-table thead th.ph-table__pick { color: var(--text-muted); font-size: 0.7rem; }
.ph-table__club { display: flex; align-items: center; gap: 0.5rem; }
.ph-table__logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.ph-table__from { color: var(--text-muted); font-style: italic; }
.ph-table__pts { color: var(--red); font-weight: 700; white-space: nowrap; }
.ph-table__dash { color: var(--text-dim); }
@media (max-width: 720px) {
  .ph-table { font-size: 0.86rem; }
  .ph-table thead th, .ph-table tbody td { padding: 0.45rem 0.55rem; }
}
@media (max-width: 880px) {
  /* Three rows, two columns:
       Row 1: [Pick number] [Club logo + name]
       Row 2: [Player name + position/height]    (full width)
       Row 3: [Junior club · State]               (full width, inline)
     Keeps everything compact, no orphaned single-line rows. */
  .ph-pick {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.9rem; row-gap: 0.5rem;
    padding: 0.85rem 0.95rem;
  }
  .ph-pick__num {
    grid-row: 1; grid-column: 1;
  }
  .ph-pick__num-label { font-size: 0.6rem; }
  .ph-pick__num-val   { font-size: 1.75rem; }

  .ph-pick__club-block {
    grid-row: 1; grid-column: 2;
    padding-right: 0; border-right: 0;
    align-items: center; gap: 0.55rem;
    min-width: 0;
  }
  .ph-pick__club-logo { width: 32px; height: 32px; }
  .ph-pick__club-name { font-size: 0.92rem; }

  .ph-pick__body {
    grid-row: 2; grid-column: 1 / -1;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
  }
  .ph-pick__name { font-size: 1rem; line-height: 1.25; word-spacing: -0.05em; }
  .ph-pick__sub  { font-size: 0.78rem; }

  .ph-pick__right-block {
    grid-row: 3; grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline; text-align: left;
    gap: 0.5rem; min-width: 0;
    padding-top: 0; border-top: 0;
  }
  .ph-pick__junior { font-size: 0.85rem; }
  .ph-pick__state {
    font-size: 0.7rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--border);
    letter-spacing: 0.08em;
  }
}

/* =====================================================================
   RUMOUR SEARCH (summary tab)
   ===================================================================== */
.rumour-search {
  position: relative;
  margin: 0 0 1.5rem;
  max-width: 540px;
}
.rumour-search__icon {
  position: absolute; top: 50%; left: 0.95rem;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.rumour-search__input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 0.85rem 2.4rem 0.85rem 2.7rem;
  border-radius: var(--radius);
  font-size: 0.98rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rumour-search__input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.18);
}
.rumour-search__input::placeholder { color: var(--text-dim); }
.rumour-search__clear {
  position: absolute; top: 50%; right: 0.7rem;
  transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}
.rumour-search__clear:hover { background: var(--border-strong); color: var(--text); }

.rumour-search__results {
  position: absolute;
  top: calc(100% + 0.4rem); left: 0; right: 0;
  z-index: 50;
  margin: 0; padding: 0.35rem;
  list-style: none;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 360px; overflow-y: auto;
}
.rumour-search__item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
  transition: background 0.12s;
}
.rumour-search__item:hover,
.rumour-search__item.is-active {
  background: var(--surface-2);
}
.rumour-search__logo {
  width: 28px; height: 28px; object-fit: contain;
  flex-shrink: 0;
}
.rumour-search__name {
  font-weight: 700; flex: 1 1 auto;
}
.rumour-search__name mark {
  background: transparent; color: var(--red);
  font-weight: 800;
}
.rumour-search__sub {
  font-size: 0.78rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.rumour-search__none {
  padding: 0.85rem 0.9rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-style: italic;
  text-align: center;
  cursor: default;
}

/* Player page — prominent date at top of each Latest Rumour card */
.rumour-card__datepill {
  display: inline-block;
  align-self: flex-start;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 6px;
  margin: -0.25rem 0 0.35rem;
  box-shadow: 0 4px 10px rgba(214, 40, 40, 0.25);
}

/* Footer brand logo */
.footer__logo {
  display: block;
  height: 72px; width: auto;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Player page summary — "Clubs linked to:" logo row */
.player-summary__linked {
  display: flex !important;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-size: 0.95rem !important;
}
.player-summary__linked-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  flex-shrink: 0;
}
.player-summary__linked-logos {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.player-summary__linked-link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: 8px;
  transition: background 0.12s, transform 0.12s;
}
.player-summary__linked-link:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
}
.player-summary__linked-logo {
  width: 36px; height: 36px; object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}

/* =====================================================================
   Club page sub-tabs (List Position / Trade Rumours / Uncontracted)
   AND summary month tabs share the same look-and-feel.
   ===================================================================== */
.club-tabs, .month-tabs {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
  margin: 1rem 0 1.75rem;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.club-tab, .month-tab {
  padding: 0.6rem 1.05rem; border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.9rem;
  color: var(--text-muted); white-space: nowrap;
  letter-spacing: 0.02em;
  cursor: pointer; transition: all 0.15s;
}
.club-tab:hover, .month-tab:hover {
  color: var(--text); background: var(--bg);
}
.club-tab.is-active, .month-tab.is-active {
  background: var(--red); color: #fff;
  box-shadow: 0 2px 8px rgba(214, 40, 40, 0.25);
}
.month-tab__count {
  display: inline-block; margin-left: 0.35rem;
  background: rgba(255,255,255,0.18); color: inherit;
  font-size: 0.72rem; padding: 0.05rem 0.45rem;
  border-radius: 999px;
}
.month-tab:not(.is-active) .month-tab__count {
  background: var(--surface-2); color: var(--text-muted);
}

.club-panel, .month-panel { display: none; }
.club-panel.is-active, .month-panel.is-active { display: block; }

/* Trade Rumours inner sub-tabs (Linked Targets / Possible Exits) */
.rumour-subtabs {
  display: flex; gap: 0.3rem; flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: 0.3rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rumour-subtab {
  padding: 0.5rem 0.95rem; border-radius: 5px;
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.85rem;
  color: var(--text-muted); white-space: nowrap;
  letter-spacing: 0.02em;
  cursor: pointer; transition: all 0.15s;
}
.rumour-subtab:hover { color: var(--text); background: var(--surface); }
.rumour-subtab.is-active {
  background: var(--surface-2); color: var(--text);
  box-shadow: inset 0 -2px 0 var(--red);
}
.rumour-subpanel { display: none; }
.rumour-subpanel.is-active { display: block; }

/* =====================================================================
   DRAFT SIMULATOR
   ===================================================================== */
#draft-simulator-app { margin-top: 0.25rem; }

.dsim-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin: 0 0 1.5rem;
}
.dsim-header__title h2 { margin-bottom: 0.5rem; }
.dsim-header__title p { margin: 0; }
.dsim-header__controls {
  display: flex; align-items: center; gap: 1rem;
}
.dsim-progress {
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.dsim-progress__num {
  color: var(--red); font-size: 1.5rem;
}
.dsim-reset {
  padding: 0.65rem 1.1rem; font-size: 0.85rem;
}

/* "On the clock" hero block */
.dsim-clock {
  background:
    radial-gradient(ellipse at top right, rgba(214, 40, 40, 0.16) 0%, transparent 55%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin: 0 0 1.5rem;
  box-shadow: var(--shadow);
}
.dsim-clock__label {
  font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}
.dsim-clock__row {
  display: flex; align-items: center; gap: 1.25rem;
}
.dsim-clock__logo {
  width: 64px; height: 64px; object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}
.dsim-clock__pick {
  font-family: var(--font-display);
  font-size: 2.2rem; letter-spacing: 0.02em;
  color: var(--text); line-height: 1;
}
.dsim-clock__club {
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted); margin-top: 0.25rem;
}
.dsim-clock__hint {
  margin: 0.85rem 0 0;
  font-size: 0.92rem; color: var(--text-muted);
}
.dsim-clock--done { border-left-color: var(--grass); }
.dsim-clock--done .dsim-clock__label { color: var(--grass); }

/* Two-column grid */
.dsim-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 880px) {
  .dsim-grid { grid-template-columns: 1fr; }
}

.dsim-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
}
.dsim-col__title {
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 0.6rem;
  margin: 0 0 0.85rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.55rem;
}
.dsim-col__count {
  font-family: var(--font-body);
  background: var(--red-dim); color: var(--red);
  font-size: 0.72rem; font-weight: 700;
  padding: 0.12rem 0.55rem; border-radius: 999px;
}

/* Pick rows (left column) */
.dsim-picks { display: flex; flex-direction: column; gap: 0.45rem; }
.dsim-pick {
  display: grid;
  grid-template-columns: 40px 36px 110px 1fr;
  align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.dsim-pick.is-current {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red), 0 4px 12px rgba(214, 40, 40, 0.18);
}
.dsim-pick.is-done {
  background: var(--surface-2);
  opacity: 0.92;
}
.dsim-pick__num {
  font-family: var(--font-display);
  font-size: 1.35rem; color: var(--red); line-height: 1;
}
.dsim-pick__logo {
  width: 28px; height: 28px; object-fit: contain;
}
.dsim-pick__club {
  font-family: var(--font-display);
  font-size: 0.92rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text);
}
.dsim-pick__slot {
  display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end;
  font-size: 0.92rem;
}
.dsim-pick__playername { color: var(--text); font-weight: 700; }
.dsim-pick__waiting {
  color: var(--red); font-weight: 700;
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.1em;
}
.dsim-pick__empty { color: var(--text-dim); }
.dsim-pick__undo {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); color: var(--text-muted);
  font-size: 1rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer; transition: all 0.12s;
}
.dsim-pick__undo:hover { background: var(--red-dim); color: var(--red); }

/* Available players (right column) */
.dsim-players {
  display: flex; flex-direction: column; gap: 0.4rem;
  max-height: 720px; overflow-y: auto;
  padding-right: 0.25rem;
}
.dsim-player {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background 0.12s, opacity 0.12s;
}
.dsim-player.is-drafted { opacity: 0.45; }
.dsim-player__rank {
  font-family: var(--font-display);
  font-size: 1.25rem; color: var(--red); letter-spacing: 0.02em;
  line-height: 1;
}
.dsim-player__main { min-width: 0; }
.dsim-player__name { font-weight: 700; font-size: 0.98rem; }
.dsim-player__meta {
  font-size: 0.78rem; color: var(--text-muted);
  margin-top: 0.15rem;
}
.dsim-player__draft {
  padding: 0.45rem 0.95rem; font-size: 0.78rem; letter-spacing: 0.05em;
  border-radius: 6px; white-space: nowrap;
}
.dsim-player__chip {
  display: inline-block;
  padding: 0.25rem 0.7rem; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dsim-player:hover:not(.is-drafted) { background: var(--surface); }

/* Draft Simulator mobile refinements */
@media (max-width: 760px) {
  .dsim-header { gap: 0.85rem; }
  .dsim-header__controls {
    width: 100%; justify-content: space-between;
  }
  .dsim-clock { padding: 1.2rem 1.1rem; }
  .dsim-clock__logo { width: 52px; height: 52px; }
  .dsim-clock__pick { font-size: 1.85rem; }
  .dsim-clock__club { font-size: 1rem; }

  .dsim-pick {
    grid-template-columns: 34px 30px 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.6rem; row-gap: 0.25rem;
    padding: 0.55rem 0.7rem;
  }
  .dsim-pick__num { grid-row: 1; grid-column: 1; font-size: 1.15rem; }
  .dsim-pick__logo { grid-row: 1; grid-column: 2; width: 24px; height: 24px; }
  .dsim-pick__club {
    grid-row: 1; grid-column: 3;
    font-size: 0.85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dsim-pick__slot {
    grid-row: 2; grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 0.1rem;
    font-size: 0.88rem;
  }

  .dsim-player {
    grid-template-columns: 32px 1fr auto;
    column-gap: 0.6rem;
    padding: 0.5rem 0.6rem;
  }
  .dsim-player__rank { font-size: 1.1rem; }
  .dsim-player__name { font-size: 0.92rem; }
  .dsim-player__meta { font-size: 0.74rem; }
  .dsim-player__draft {
    padding: 0.4rem 0.75rem; font-size: 0.72rem;
  }
  .dsim-players { max-height: 540px; }

  /* Column padding tighter so the player list isn't crushed */
  .dsim-col { padding: 0.85rem 0.85rem 0.9rem; }

  /* Round + Pool tabs: horizontally scrollable so they never break the layout */
  .dsim-round-tabs, .dsim-pool-tabs {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;     /* space for the scrollbar so it doesn't overlay */
    scrollbar-width: thin;
  }
  .dsim-round-tab, .dsim-pool-tab {
    flex-shrink: 0;
    padding: 0.45rem 0.75rem; font-size: 0.78rem;
  }
  .dsim-round-tab__count, .dsim-pool-tab__count {
    padding: 0.05rem 0.5rem; font-size: 0.68rem;
  }

  /* Live Club View: stack heading + dropdown so the select can be full-width */
  .dsim-club-view__head {
    flex-direction: column; align-items: stretch; gap: 0.6rem;
    padding: 0.75rem 0.85rem;
  }
  .dsim-club-view__select { width: 100%; min-width: 0; }
  .dsim-club-view__logo { width: 28px; height: 28px; }
  .dsim-club-view__title { font-size: 0.72rem; }
  .dsim-club-view__list { max-height: 280px; }
  .dsim-cv-row { padding: 0.5rem 0.75rem; font-size: 0.85rem; gap: 0.6rem; }
  .dsim-cv-row__pill { min-width: 34px; padding: 0.15rem 0.4rem; font-size: 0.7rem; }

  /* Search input: a touch smaller, no horizontal padding squeeze */
  .dsim-search { gap: 0.5rem; padding: 0.6rem 0.75rem; }
  .dsim-search__input { font-size: 0.95rem; }
}

/* Phone-specific tightening (smaller than ~480px) */
@media (max-width: 480px) {
  .dsim-header__title h2 { font-size: 1.3rem; }
  .dsim-header__title p { font-size: 0.85rem; }
  .dsim-progress { font-size: 0.85rem; }
  .dsim-clock__pick { font-size: 1.5rem; }
  .dsim-clock__club { font-size: 0.92rem; }
  .dsim-clock__hint { font-size: 0.8rem; }

  /* Pool tabs: drop the count chip's letter-spacing so the labels fit */
  .dsim-round-tab, .dsim-pool-tab { letter-spacing: 0.02em; }

  /* Bid modal stacks logo above the cost rows on a narrow viewport;
     keeps everything readable rather than scrunching side-by-side. */
  .dsim-bid { padding: 1rem 0.75rem; }
  .dsim-bid__panel { padding: 1.25rem; }
  .dsim-bid__title { font-size: 1.1rem; }
  .dsim-bid__sub { font-size: 0.88rem; }
  .dsim-bid__explainer { font-size: 0.8rem; padding: 0.6rem 0.75rem; }
  .dsim-bid__row {
    flex-direction: column; align-items: stretch;
    padding: 0.85rem 0.85rem; gap: 0.8rem;
  }
  .dsim-bid__logo { width: 40px; height: 40px; align-self: flex-start; }
  .dsim-bid__cost-line { font-size: 0.85rem; }
  .dsim-bid__cost-line--total .dsim-bid__cost-val { font-size: 1rem; }
  .dsim-bid__actions .btn { padding: 0.75rem 1rem; font-size: 0.8rem; }

  /* Club picks strip on club analysis pages: tighter pills */
  .club-picks { padding: 0.7rem 0.85rem; }
  .club-picks__pill {
    padding: 0.3rem 0.6rem; font-size: 0.78rem; gap: 0.3rem;
  }
  .club-picks__from, .club-picks__pts { font-size: 0.72rem; }
}

/* =====================================================================
   Mobile overflow safety — ensure every panel and row inside the
   simulator fits inside the viewport so the user never has to scroll
   sideways. These rules only apply at narrow widths.
   ===================================================================== */
@media (max-width: 720px) {
  /* Stop the page from ever overflowing horizontally */
  #draft-simulator-app { max-width: 100%; overflow-x: hidden; }
  #draft-simulator-app * { box-sizing: border-box; }
  #draft-simulator-app .container,
  .draft-hub-page .container { padding-left: 1rem; padding-right: 1rem; }

  /* The single-column collapse happens at 880px (existing rule). Inside
     each column, tighten padding so the rounded card doesn't eat the
     viewport width. */
  .dsim-col { padding: 0.7rem 0.7rem 0.85rem; }

  /* Header: title block always full-width; controls wrap on their own line. */
  .dsim-header { gap: 0.6rem; margin-bottom: 1rem; }
  .dsim-header__title { width: 100%; min-width: 0; }
  .dsim-header__controls { width: 100%; justify-content: space-between; }

  /* Clock card padding tightened so it doesn't get cramped */
  .dsim-clock { padding: 1rem 0.95rem; }
  .dsim-clock__row { gap: 0.6rem; }

  /* Pick row: the 3rd column must be allowed to shrink. The classic
     CSS-grid pitfall: without `min-width: 0`, the auto-min size of the
     content (a long player name or club label) prevents shrinking. */
  .dsim-pick { padding: 0.5rem 0.55rem; column-gap: 0.45rem; min-width: 0; }
  .dsim-pick > * { min-width: 0; }
  .dsim-pick__club { font-size: 0.78rem; }
  .dsim-pick__num { font-size: 1rem; }

  /* Players row mirrors the same fix */
  .dsim-player { padding: 0.5rem 0.55rem; column-gap: 0.5rem; min-width: 0; }
  .dsim-player > * { min-width: 0; }
  .dsim-player__name { font-size: 0.88rem; }
  .dsim-player__meta { font-size: 0.7rem; }
  .dsim-player__draft { padding: 0.4rem 0.65rem; font-size: 0.68rem; }

  /* Live Club View rows fit edge to edge */
  .dsim-club-view { margin-top: 0.85rem; }
  .dsim-cv-row { padding: 0.45rem 0.7rem; min-width: 0; }

  /* "Take pick" button must not push the slot wider than its grid cell */
  .dsim-takepick { padding: 0.4rem 0.7rem; font-size: 0.68rem; letter-spacing: 0.08em; }
}

@media (max-width: 480px) {
  /* Tighter still on small phones */
  #draft-simulator-app .container,
  .draft-hub-page .container { padding-left: 0.75rem; padding-right: 0.75rem; }
  .dsim-col { padding: 0.6rem 0.6rem 0.8rem; }
  .dsim-pick__num { font-size: 0.9rem; }
  .dsim-pick__club { font-size: 0.74rem; letter-spacing: 0.02em; }
  .dsim-pick__logo { width: 22px; height: 22px; }
  .dsim-clock__logo { width: 42px; height: 42px; }

  /* Live Club View dropdown shouldn't push the head wider than the panel */
  .dsim-club-view__select { font-size: 0.82rem; padding: 0.45rem 0.6rem; }
}

/* =====================================================================
   Mobile player picker — only active at <= 720px so it never affects
   the desktop layout. The "Take pick" button and close button always
   exist in the DOM, but CSS makes them invisible on desktop, and shows
   the player column as a full-screen sheet only when the simulator
   root has the `is-picker-open` class.
   ===================================================================== */
.dsim-takepick {
  display: none;             /* hidden on desktop */
  margin-left: 0.6rem;
  padding: 0.5rem 0.95rem;
  background: var(--red); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 800;
  cursor: pointer;
}
.dsim-picker-close {
  display: none;             /* hidden on desktop */
  margin-left: auto;
  width: 32px; height: 32px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 50%;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}
.dsim-picker-close:hover { background: var(--red-dim); color: var(--red); }

@media (max-width: 720px) {
  /* Surface the button on the on-clock row */
  .dsim-takepick { display: inline-flex; align-items: center; }

  /* Hide the inline player column by default and reveal it as a sheet */
  .dsim-col--players { display: none; }
  #draft-simulator-app.is-picker-open .dsim-col--players {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 950;
    background: var(--bg);
    border-radius: 0;
    margin: 0;
    padding: 1rem 1rem 1.25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: dsim-picker-slide 0.18s ease-out;
  }
  #draft-simulator-app.is-picker-open .dsim-col--players .dsim-picker-close {
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Let the players list use the full sheet height */
  #draft-simulator-app.is-picker-open .dsim-players { max-height: none; }
  /* Lock body scroll while the picker is open */
  #draft-simulator-app.is-picker-open ~ * { /* no-op selector to anchor */ }
}
@keyframes dsim-picker-slide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Phantom Drafts — "draft order only" rendering (no player chosen) */
.ph-pick--empty { opacity: 0.85; }
.ph-pick__name--empty {
  font-weight: 600;
  color: var(--text-muted);
  font-style: italic;
}
.ph-pick__points {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}
.ph-pick--empty .ph-pick__points {
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
}

/* Tied-player chip in the available-players list */
.dsim-tie-badge {
  display: inline-block; vertical-align: middle;
  margin-left: 0.3rem;
  padding: 0.1rem 0.45rem;
  background: var(--grass-dim); color: var(--grass);
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.dsim-player.has-tie { border-left: 3px solid var(--grass); }

/* Pick row bid notes */
.dsim-pick__bidnote {
  display: inline-block;
  margin-left: 0.5rem; padding: 0.1rem 0.5rem;
  background: var(--red-dim); color: var(--red);
  font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px;
}
.dsim-pick__bidnote--own { background: var(--grass-dim); color: var(--grass); }
.dsim-pick.is-matched { border-color: rgba(46, 139, 62, 0.45); }

/* Bid modal overlay */
.dsim-bid {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0, 0, 0, 0.74);
  /* Scroll the overlay when the panel is taller than the viewport. */
  display: flex;
  align-items: flex-start;     /* keep panel anchored at the top so we can scroll past it */
  justify-content: center;
  padding: 2rem 1.5rem;
  overflow-y: auto;
  animation: dsim-bid-fade 0.16s ease-out;
}
@keyframes dsim-bid-fade { from { opacity: 0; } to { opacity: 1; } }
.dsim-bid__panel {
  width: 100%; max-width: 540px;
  background:
    radial-gradient(ellipse at top right, rgba(214,40,40,0.22) 0%, transparent 60%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  margin: auto 0;              /* visually centered when content fits */
}
.dsim-bid__label {
  display: inline-block;
  margin-bottom: 1rem; padding: 0.3rem 0.9rem;
  background: var(--red); color: #fff;
  font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px;
}
.dsim-bid__title {
  font-family: var(--font-display);
  font-size: 1.6rem; letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 1.15;
  margin-bottom: 0.5rem; color: var(--text);
}
.dsim-bid__title strong { color: var(--red); font-weight: inherit; }
.dsim-bid__sub {
  color: var(--text-muted); font-size: 0.95rem;
  margin-bottom: 0.85rem;
}
.dsim-bid__explainer {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--red);
  padding: 0.7rem 0.9rem;
  font-size: 0.86rem; line-height: 1.5;
  color: var(--text-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 1.25rem;
}
.dsim-bid__explainer strong { color: var(--text); font-weight: 700; }
.dsim-bid__row {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
.dsim-bid__logo {
  width: 52px; height: 52px; object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.dsim-bid__heading {
  font-family: var(--font-display);
  font-size: 1.2rem; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dsim-bid__hint { font-size: 0.88rem; color: var(--text-muted); }
.dsim-bid__actions {
  display: flex; flex-direction: column; gap: 0.55rem;
}
.dsim-bid__actions .btn {
  width: 100%; justify-content: center;
  padding: 0.85rem 1.2rem; font-size: 0.85rem;
}
@media (max-width: 540px) {
  .dsim-bid__panel { padding: 1.5rem; }
  .dsim-bid__title { font-size: 1.3rem; }
  .dsim-bid__logo { width: 44px; height: 44px; }
}

/* Bid modal — extended breakdown elements */
.dsim-bid__body { min-width: 0; flex: 1 1 auto; }
.dsim-bid__cost { margin-bottom: 0.85rem; }
.dsim-bid__cost-line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.9rem;
  padding: 0.25rem 0;
}
.dsim-bid__cost-label { color: var(--text-muted); }
.dsim-bid__cost-val { font-weight: 700; color: var(--text); }
.dsim-bid__cost-line--total {
  border-top: 1px solid var(--border);
  padding-top: 0.55rem; margin-top: 0.3rem;
}
.dsim-bid__cost-line--total .dsim-bid__cost-label { color: var(--text); font-weight: 700; }
.dsim-bid__cost-line--total .dsim-bid__cost-val { color: var(--red); font-size: 1.15rem; }

.dsim-bid__consumed {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.6rem;
}
.dsim-bid__consumed-title {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.4rem;
}
.dsim-bid__consumed-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.3rem 0; font-size: 0.88rem;
}
.dsim-bid__pick-pill {
  font-family: var(--font-display);
  background: var(--surface-2); color: var(--text);
  padding: 0.15rem 0.55rem; border-radius: 4px;
  font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.dsim-bid__pick-pts { color: var(--text-muted); font-weight: 600; }
.dsim-bid__consumed-empty {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.65rem 0.85rem;
  font-size: 0.85rem; color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.dsim-bid__deficit {
  background: rgba(245, 158, 11, 0.12); color: var(--warn);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.85rem; margin-bottom: 0.6rem;
  font-size: 0.85rem;
}
.dsim-bid__warn {
  background: rgba(214, 40, 40, 0.12); color: var(--red);
  border: 1px solid rgba(214, 40, 40, 0.32);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.85rem; margin-bottom: 0.6rem;
  font-size: 0.85rem; font-weight: 700;
}

/* Pick slot states for consumed and declined */
.dsim-pick.is-consumed {
  opacity: 0.6;
  background: var(--bg);
  border-style: dashed;
}
.dsim-pick__consumed {
  font-size: 0.78rem; color: var(--text-muted); font-style: italic;
  text-align: right;
}
.dsim-pick__bidnote--declined {
  background: var(--surface-2); color: var(--text-muted);
}

/* Multi-event pick slot (matched bids + final pick) */
.dsim-pick__events { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 auto; min-width: 0; }
.dsim-pick__bidline {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 0.78rem;
}
.dsim-pick__bidline.matched .dsim-pick__bidplayer {
  color: var(--text);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.3);
  font-weight: 600;
}
.dsim-pick__bidline .dsim-pick__bidnote {
  margin-left: 0;
  background: var(--grass-dim); color: var(--grass);
}
.dsim-pick__final {
  display: flex; align-items: center; gap: 0.5rem;
  justify-content: flex-end; flex-wrap: wrap;
}
/* Tighter mobile -- stack events vertically */
@media (max-width: 760px) {
  .dsim-pick__bidline, .dsim-pick__final { justify-content: flex-start; }
}

/* Matched-bid pick row: tied club's note about who made the original bid */
.dsim-pick.is-matched .dsim-pick__bidnote {
  background: var(--red-dim);
  color: var(--red);
}

/* Upcoming pick rows in the simulator's draft board */
.dsim-pick.is-upcoming {
  background: var(--bg);
  opacity: 0.55;
}
.dsim-pick.is-upcoming:hover { opacity: 0.8; }
.dsim-pick__upcoming {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.dsim-pick__upcoming-pts {
  margin-left: 0.6rem;
  font-size: 0.72rem; color: var(--text-dim);
  font-weight: 600;
}

/* =====================================================================
   DRAFT SIMULATOR — sticky players column + search bar
   ===================================================================== */
.dsim-col__head {
  margin-bottom: 0.85rem;
}
.dsim-col__head .dsim-col__title {
  margin-bottom: 0.75rem;
}

/* Sticky right column so the player list stays in view as you scroll */
.dsim-col--players {
  position: sticky;
  top: 80px;                                /* clear the page's sticky nav */
  align-self: start;
  max-height: calc(100vh - 110px);
  display: flex; flex-direction: column;
}
.dsim-col--players .dsim-players {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
@media (max-width: 880px) {
  .dsim-col--players {
    position: static;
    max-height: none;
  }
  .dsim-col--players .dsim-players { max-height: 540px; }
}

/* Search input inside the players column */
.dsim-search {
  position: relative;
  display: flex; align-items: center;
}
.dsim-search__icon {
  position: absolute; left: 0.85rem;
  color: var(--text-muted);
  pointer-events: none;
}
.dsim-search__input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 0.6rem 2.2rem 0.6rem 2.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dsim-search__input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.18);
}
.dsim-search__input::placeholder { color: var(--text-dim); }
.dsim-search__clear {
  position: absolute; right: 0.4rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 1rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}
.dsim-search__clear[hidden] { display: none; }
.dsim-search__clear:hover { background: var(--border-strong); color: var(--text); }

/* Bottom-5 comp pick badging + clock variant */
.dsim-comp-tag {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.15rem 0.55rem;
  background: var(--grass-dim); color: var(--grass);
  font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 999px;
}
.dsim-pick.is-comp {
  border-left: 3px solid var(--grass);
}
.dsim-clock--comp {
  border-left-color: var(--grass);
  background:
    radial-gradient(ellipse at top right, rgba(46, 139, 62, 0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg-elev) 100%);
}
.dsim-clock--comp .dsim-clock__label { color: var(--grass); }

/* Unranked players in the draft simulator pool */
.dsim-player__unranked {
  color: var(--text-dim); font-size: 1rem;
  font-family: var(--font-body); font-weight: 700;
}

/* Round tabs on the picks column + pool tabs on the players column */
.dsim-round-tabs, .dsim-pool-tabs {
  display: flex; gap: 0.3rem;
  margin-top: 0.6rem;
  padding: 0.3rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.dsim-round-tab, .dsim-pool-tab {
  flex: 1 1 0; min-width: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 5px;
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted); white-space: nowrap;
  cursor: pointer; transition: all 0.15s;
  text-align: center;
}
.dsim-round-tab:hover, .dsim-pool-tab:hover {
  color: var(--text); background: var(--surface);
}
.dsim-round-tab.is-active, .dsim-pool-tab.is-active {
  background: var(--red); color: #fff;
  box-shadow: 0 2px 6px rgba(214, 40, 40, 0.25);
}
.dsim-round-tab__count, .dsim-pool-tab__count {
  display: inline-block; margin-left: 0.3rem;
  background: rgba(255,255,255,0.18);
  font-size: 0.68rem; padding: 0.04rem 0.4rem;
  border-radius: 999px;
}
.dsim-round-tab:not(.is-active) .dsim-round-tab__count,
.dsim-pool-tab:not(.is-active) .dsim-pool-tab__count {
  background: var(--surface-2); color: var(--text-muted);
}

/* ---- Live Club View (below picks on the left column) ---- */
.dsim-club-view {
  margin-top: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.dsim-club-view__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 1rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.dsim-club-view__heading {
  display: flex; align-items: center; gap: 0.65rem; min-width: 0;
}
.dsim-club-view__logo {
  width: 32px; height: 32px; object-fit: contain; flex-shrink: 0;
}
.dsim-club-view__title {
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text);
}
.dsim-club-view__meta {
  font-size: 0.78rem; color: var(--text-muted); margin-top: 2px;
}
.dsim-club-view__select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem; font: inherit; font-size: 0.85rem;
  cursor: pointer; min-width: 180px;
}
.dsim-club-view__select:focus {
  outline: 2px solid var(--red); outline-offset: 2px;
}
.dsim-club-view__list {
  max-height: 320px; overflow-y: auto;
}
.dsim-club-view__empty {
  padding: 1rem; color: var(--text-muted); font-size: 0.88rem; text-align: center;
}
.dsim-cv-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.dsim-cv-row:last-child { border-bottom: none; }
.dsim-cv-row__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 0.18rem 0.5rem;
  background: var(--surface-2); color: var(--text);
  border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  flex-shrink: 0;
}
.dsim-cv-row__pill.is-comp {
  background: rgba(46, 204, 113, 0.18); color: #2ecc71;
}
.dsim-cv-row__player {
  font-weight: 600; color: var(--text);
}
.dsim-cv-row__sub {
  color: var(--text-muted); font-size: 0.8rem; margin-left: 0.4rem;
}
.dsim-cv-row__status {
  color: var(--text-muted); font-style: italic; font-size: 0.84rem;
}
.dsim-cv-row.is-onclock {
  background: rgba(214, 40, 40, 0.08);
}
.dsim-cv-row.is-onclock .dsim-cv-row__status {
  color: var(--red); font-style: normal; font-weight: 700;
}
.dsim-cv-row.is-match {
  background: rgba(214, 40, 40, 0.05);
}
.dsim-cv-row.is-match .dsim-cv-row__pill {
  background: rgba(214, 40, 40, 0.18); color: var(--red);
}

/* =====================================================================
   Mobile-only overflow safety + player-picker overlay.
   Desktop layout untouched: every new rule is inside a @media query or
   uses classes that only get added at narrow widths.
   ===================================================================== */

/* "Take pick" button on the on-the-clock row (hidden on desktop) */
.dsim-takepick {
  display: none;
  margin-left: 0.6rem;
  padding: 0.5rem 0.95rem;
  background: var(--red); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 800;
  cursor: pointer;
}
/* Close (×) button on the player sheet (hidden on desktop) */
.dsim-picker-close {
  display: none;
  margin-left: auto;
  width: 32px; height: 32px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 50%;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}
.dsim-picker-close:hover { background: var(--red-dim); color: var(--red); }

@media (max-width: 720px) {
  /* No horizontal scroll, ever */
  #draft-simulator-app { max-width: 100%; overflow-x: hidden; }
  #draft-simulator-app * { box-sizing: border-box; }

  /* Tighten the page wrapper so the simulator fills the viewport */
  .draft-hub-page .container { padding-left: 1rem; padding-right: 1rem; }

  /* Column padding tightened so the rounded card doesn't eat width */
  .dsim-col { padding: 0.7rem 0.7rem 0.85rem; }

  /* Header: stack title + controls so the buttons can wrap full-width */
  .dsim-header { gap: 0.6rem; margin-bottom: 1rem; }
  .dsim-header__title { width: 100%; min-width: 0; }
  .dsim-header__controls { width: 100%; justify-content: space-between; }

  /* Clock block */
  .dsim-clock { padding: 1rem 0.95rem; }
  .dsim-clock__row { gap: 0.6rem; }

  /* Pick rows must allow the content column to shrink (CSS grid pitfall:
     without `min-width: 0` on grid children, long player or club names
     prevent shrinking and overflow horizontally) */
  .dsim-pick { padding: 0.5rem 0.55rem; column-gap: 0.45rem; min-width: 0; }
  .dsim-pick > * { min-width: 0; }
  .dsim-pick__club { font-size: 0.78rem; }
  .dsim-pick__num { font-size: 1rem; }

  /* Player rows mirror the same fix */
  .dsim-player { padding: 0.5rem 0.55rem; column-gap: 0.5rem; min-width: 0; }
  .dsim-player > * { min-width: 0; }
  .dsim-player__name { font-size: 0.88rem; }
  .dsim-player__meta { font-size: 0.7rem; }
  .dsim-player__draft { padding: 0.4rem 0.65rem; font-size: 0.68rem; }

  /* Round + Pool tabs scroll horizontally rather than overflowing */
  .dsim-round-tabs, .dsim-pool-tabs {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .dsim-round-tab, .dsim-pool-tab {
    flex: 0 0 auto;
    padding: 0.45rem 0.75rem; font-size: 0.78rem;
  }

  /* Live Club View — stack heading + dropdown so the select goes full width */
  .dsim-club-view { margin-top: 0.85rem; }
  .dsim-club-view__head {
    flex-direction: column; align-items: stretch; gap: 0.6rem;
    padding: 0.75rem 0.85rem;
  }
  .dsim-club-view__select { width: 100%; min-width: 0; }
  .dsim-club-view__list { max-height: 280px; }
  .dsim-cv-row { padding: 0.45rem 0.7rem; min-width: 0; }

  /* "Take pick" button surfaces only on mobile */
  .dsim-takepick {
    display: inline-flex; align-items: center;
    padding: 0.4rem 0.7rem; font-size: 0.68rem; letter-spacing: 0.08em;
  }

  /* Mobile player picker overlay: hide the inline players column by
     default and slide it up as a full-screen sheet when the simulator
     root has the `is-picker-open` class. */
  .dsim-col--players { display: none; }
  #draft-simulator-app.is-picker-open .dsim-col--players {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 950;
    background: var(--bg);
    border-radius: 0;
    margin: 0;
    padding: 1rem 1rem 1.25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: dsim-picker-slide 0.18s ease-out;
  }
  #draft-simulator-app.is-picker-open .dsim-col--players .dsim-picker-close {
    display: inline-flex; align-items: center; justify-content: center;
  }
  #draft-simulator-app.is-picker-open .dsim-players { max-height: none; }
}

@media (max-width: 480px) {
  .draft-hub-page .container { padding-left: 0.75rem; padding-right: 0.75rem; }
  .dsim-col { padding: 0.6rem 0.6rem 0.8rem; }
  .dsim-header__title h2 { font-size: 1.3rem; }
  .dsim-header__title p { font-size: 0.85rem; }
  .dsim-clock__pick { font-size: 1.5rem; }
  .dsim-clock__club { font-size: 0.92rem; }
  .dsim-clock__logo { width: 42px; height: 42px; }
  .dsim-pick__num { font-size: 0.9rem; }
  .dsim-pick__club { font-size: 0.74rem; letter-spacing: 0.02em; }
  .dsim-pick__logo { width: 22px; height: 22px; }

  /* Bid modal — stack the logo + cost block vertically so each row uses
     the full width of the panel on narrow viewports */
  .dsim-bid { padding: 1rem 0.75rem; }
  .dsim-bid__panel { padding: 1.25rem; }
  .dsim-bid__title { font-size: 1.1rem; }
  .dsim-bid__row {
    flex-direction: column; align-items: stretch;
    padding: 0.85rem; gap: 0.8rem;
  }
  .dsim-bid__logo { width: 40px; height: 40px; align-self: flex-start; }
  .dsim-bid__actions .btn { padding: 0.75rem 1rem; font-size: 0.8rem; }

  /* Club picks strip pills on the rumour-page club view */
  .club-picks { padding: 0.7rem 0.85rem; }
  .club-picks__pill {
    padding: 0.3rem 0.6rem; font-size: 0.78rem; gap: 0.3rem;
  }
  .club-picks__from, .club-picks__pts { font-size: 0.72rem; }
}

@keyframes dsim-picker-slide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}