:root{
    --bg: #0A0D12;
    --surface: #000000;
    --surface-2: #0D1117;
    --border: #252C36;
    --text: #ECEFF2;
    --text-muted: #8B96A3;
    --accent: #0EE23F;
    --accent-ink: #06120A;
    --field: #22C55E;
    --danger: #FF5A5F;
    --danger-bg: #3A1518;
    --good: #0EE23F;
    --good-bg: #12291B;
    --warn: #F2B705;
    --warn-bg: #332B0C;
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.45), 0 3px 12px rgba(0,0,0,0.40);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.45);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg: #0A0D12; --surface: #000000; --surface-2: #0D1117; --border: #252C36;
      --text: #ECEFF2; --text-muted: #8B96A3; --accent: #0EE23F; --accent-ink: #06120A;
      --field: #22C55E; --danger: #FF5A5F; --danger-bg: #3A1518; --good: #0EE23F; --good-bg: #12291B;
      --warn: #F2B705; --warn-bg: #332B0C;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.45), 0 3px 12px rgba(0,0,0,0.40);
      --shadow-md: 0 6px 20px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.45);
    }
  }
  :root[data-theme="dark"]{
    --bg: #0A0D12; --surface: #000000; --surface-2: #0D1117; --border: #252C36;
    --text: #ECEFF2; --text-muted: #8B96A3; --accent: #0EE23F; --accent-ink: #06120A;
    --field: #22C55E; --danger: #FF5A5F; --danger-bg: #3A1518; --good: #0EE23F; --good-bg: #12291B;
    --warn: #F2B705; --warn-bg: #332B0C;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.45), 0 3px 12px rgba(0,0,0,0.40);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.45);
  }

  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background: var(--bg); color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    font-feature-settings: "tnum" 1, "lnum" 1;
    line-height: 1.5; min-height: 100vh;
  }
  h1,h2,h3,.display{
    font-family: 'Oswald', 'Inter', sans-serif; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.02em; margin: 0;
  }
  a{ color: inherit; }
  button{ font-family: inherit; }
  ::selection{ background: var(--accent); color: var(--accent-ink); }

  .skip-link{ position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--accent-ink); padding:8px 14px; z-index:100; }
  .skip-link:focus{ left:8px; top:8px; }

  header.topbar{
    position: sticky; top:0; z-index: 20;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 24px; flex-wrap: wrap; gap: 12px;
  }
  .brand{ display:flex; align-items:baseline; gap:10px; }
  .brand .mark{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.5rem; letter-spacing:0.03em; }
  .brand .mark .dash{ color: var(--accent); }
  .brand .tag{ color: var(--text-muted); font-size:0.78rem; }
  nav.tabs{ display:flex; gap:2px; background: var(--surface-2); border-radius: var(--radius); padding:4px; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  nav.tabs::-webkit-scrollbar{ display:none; }
  /* On narrow screens these tab bars scroll horizontally with no scrollbar -- fade both edges so it's
     obvious there's more to swipe to, instead of looking like the bar just ends. */
  @media (max-width:620px){
    nav.tabs, nav.subtabs{
      -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
      mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
    }
  }
  nav.tabs button{
    border:none; background:transparent; color:var(--text-muted); position:relative; flex-shrink:0; white-space:nowrap;
    padding: 9px 18px; font-size:0.92rem; font-weight:600; cursor:pointer; border-radius: 6px;
    font-family:'Oswald',sans-serif; letter-spacing:0.03em; text-transform:uppercase;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  @media (max-width:620px){ nav.tabs button{ padding:9px 13px; font-size:0.8rem; } }
  nav.tabs button:hover:not([aria-selected="true"]){ background: rgba(127,127,127,0.12); color: var(--text); }
  nav.tabs button[aria-selected="true"]{ background: var(--field); color: #fff; box-shadow: var(--shadow-sm); }
  nav.tabs button .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:6px; }
  nav.tabs button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  nav.subtabs{ display:flex; gap:4px; padding:10px 24px; background:var(--surface-2); border-bottom:1px solid var(--border); overflow-x:auto; }
  nav.subtabs button{ border:none; background:transparent; color:var(--text-muted); padding:8px 14px; font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; font-size:0.8rem; border-radius:6px; cursor:pointer; white-space:nowrap; transition: background-color 0.12s ease, color 0.12s ease; }
  nav.subtabs button:hover{ background: rgba(127,127,127,0.14); color:var(--text); }
  nav.subtabs button.active{ background:var(--field); color:#fff; }
  @media (max-width:620px){ nav.subtabs{ padding:8px 14px; } }

  main{ max-width: 1680px; margin: 0 auto; padding: 30px 20px 80px; }
  section.view{ display:none; }
  section.view.active{ display:block; }

  .panel{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px; box-shadow: var(--shadow-sm); }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
  .panel-head h2{ font-size:1.05rem; }
  .hint{ color: var(--text-muted); font-size:0.85rem; margin: 4px 0 14px; max-width: 68ch; }

  .row{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
  .field{ display:flex; flex-direction:column; gap:4px; min-width: 90px; }
  .field label{ font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
  input[type=text], input[type=number], select, textarea{
    background: var(--bg); border:1px solid var(--border); color:var(--text);

    padding:9px 11px; border-radius:6px; font-size:0.9rem; font-family:inherit; width:100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  input[type=text]:hover, input[type=number]:hover, select:hover, textarea:hover{ border-color: var(--field); }
  textarea{ resize: vertical; min-height: 90px; }
  input[type=file]{ font-size:0.85rem; color:var(--text-muted); }

  .toggle-group{ display:inline-flex; border:1px solid var(--field); border-radius: var(--radius); overflow:hidden; }
  .toggle-group button{ border:none; background:var(--surface); color:var(--text); padding:9px 16px; cursor:pointer; font-weight:600; font-family:'Oswald',sans-serif; letter-spacing:0.02em; transition: background-color 0.15s ease, color 0.15s ease; }
  .toggle-group button:hover:not(.active):not(:disabled){ background: var(--surface-2); }
  .toggle-group button.active{ background:var(--field); color:#fff; }
  .toggle-group button:disabled{ opacity:0.4; cursor:not-allowed; }
  .cap-readout{ font-family:'Oswald',sans-serif; font-size:1.15rem; }
  .cap-readout .num{ color: var(--accent); }

  .btn{ border:1px solid var(--field); background:var(--field); color:#fff; padding:10px 20px; border-radius:6px; cursor:pointer; font-weight:600; font-family:'Oswald',sans-serif; letter-spacing:0.02em; text-transform:uppercase; font-size:0.85rem; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; }
  .btn:hover:not(:disabled){ filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .btn:active:not(:disabled){ transform: translateY(0); filter: brightness(0.97); }
  .btn.secondary{ background:transparent; color:var(--text); border-color:var(--border); }
  .btn.secondary:hover:not(:disabled){ background: var(--surface-2); border-color: var(--field); }
  .btn.accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .btn.danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
  .btn.danger:hover:not(:disabled){ background: var(--danger-bg); }
  .btn:disabled{ opacity:0.5; cursor:not-allowed; }
  .btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
  .editor-toolbar{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
  .editor-toolbar .btn{ padding:7px 11px; font-size:0.8rem; }
  .editor-toolbar-sep{ width:1px; align-self:stretch; background:var(--border); margin:2px 4px; }

  table{ width:100%; border-collapse:collapse; font-size:0.87rem; }
  th{ text-align:left; font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:0.03em; color:var(--text-muted); background: var(--surface-2); border-bottom:2px solid var(--field); padding:10px 8px; white-space:nowrap; }
  td{ padding:8px; border-bottom:1px solid var(--border); vertical-align:middle; }
  td.num, th.num{ text-align:right; font-variant-numeric: tabular-nums; }
  .table-wrap{ overflow-x:auto; border-radius: var(--radius); }
  tbody tr{ transition: background-color 0.1s ease; }
  tbody tr:hover{ background: var(--surface-2); }
  td input, td select{ padding:5px 6px; font-size:0.85rem; min-width: 56px; border-radius:4px; }
  td input.name-input{ min-width: 130px; }
  .team-cell{ display:flex; align-items:center; gap:6px; }
  .pill{ display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.72rem; font-weight:600; letter-spacing:0.02em; }

  /* ---- Prop research card system ---- */
  .prop-card{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 18px; border:1px solid var(--border); border-radius:14px; margin-bottom:12px; background:var(--surface); box-shadow:var(--shadow-sm); transition: box-shadow 0.15s ease, transform 0.15s ease; }
  .rating-ring{ display:inline-flex; align-items:center; justify-content:center; position:relative; width:46px; height:46px; flex-shrink:0; }
  .rating-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .rating-ring .ring-num{ position:absolute; font-family:'Oswald',sans-serif; font-weight:700; font-size:0.85rem; }
  .prop-table-wrap{ overflow-x:auto; }
  .prop-table{ width:100%; border-collapse:separate; border-spacing:0 8px; font-size:0.84rem; min-width:920px; }
  .prop-table th{ text-align:left; padding:0 10px 6px; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); font-weight:700; }
  .prop-table td{ padding:10px; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); vertical-align:middle; }
  .prop-table tr.data-row td:first-child{ border-left:1px solid var(--border); border-radius:10px 0 0 10px; }
  .prop-table tr.data-row td:last-child{ border-right:1px solid var(--border); border-radius:0 10px 10px 0; }
  .prop-table tr.chart-row td{ background:var(--surface-2); border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; padding:14px 18px; }
  .matchup-badge{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:4px 10px; border-radius:8px; font-size:0.72rem; font-weight:700; min-width:64px; }

  /* ---- Tier board (drag-and-drop rankings) ---- */
  .tier-row{ border:1px solid var(--border); border-radius:12px; margin-bottom:12px; overflow:hidden; background:var(--surface); }
  .tier-header{ display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); }
  .tier-header .tier-name{ font-family:'Oswald',sans-serif; font-weight:700; font-size:0.95rem; background:transparent; border:none; color:var(--text); width:150px; }
  .tier-header .tier-count{ margin-left:auto; font-size:0.72rem; color:var(--text-muted); }
  .tier-chips{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; min-height:46px; }
  .tier-chip{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); cursor:grab; font-size:0.85rem; user-select:none; flex-wrap:wrap; color:var(--text); }
  .tier-chip .chip-rank{ font-family:'Oswald',sans-serif; font-weight:800; font-size:0.95rem; color:var(--accent); min-width:22px; text-align:right; }
  /* Publishing (blog New Post / Edit / Delete) is owner-only -- hidden by default and revealed only once
     the real Supabase profile check confirms canEditSite (body.owner-mode), never shown by default while
     that check is still resolving. */
  .owner-only-blog{ display:none; }
  body.owner-mode .owner-only-blog{ display:inline-block; }
  .owner-only-panel{ display:none; }
  body.owner-mode .owner-only-panel{ display:block; }
  .tier-chip .chip-name{ font-weight:600; min-width:150px; }
  .tier-chip .chip-vs{ font-size:0.78rem; color:var(--text-muted); display:flex; align-items:center; gap:4px; }
  .tier-chip .chip-dvp{ margin-left:auto; }
  .tier-chip:active{ cursor:grabbing; }
  .tier-chip .chip-remove{ cursor:pointer; color:var(--text-muted); font-size:0.7rem; padding-left:2px; }
  .tier-chip .chip-remove:hover{ color:var(--danger); }
  .sortable-ghost{ opacity:0.35; }
  .sortable-drag{ box-shadow:var(--shadow-md); }

  /* ---- Player detail modal ---- */
  .modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 16px; }
  .modal-backdrop.show{ display:flex; }
  .modal-panel{ background:var(--surface); border:1px solid var(--border); border-radius:16px; max-width:640px; width:100%; padding:24px; box-shadow:var(--shadow-md); position:relative; }
  .modal-close{ position:absolute; top:14px; right:16px; z-index:5; cursor:pointer; font-size:1.1rem; line-height:1; color:var(--text-muted); background:none; border:none; }
  /* Banners (the player card's team-color header) bleed right up to the modal's edges and can paint over
     a plain close button, so give it a backdrop that stays visible against any team color, not just the
     page's own surface color. */
  .player-modal .modal-close, .modal-panel .modal-close{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4); color:#fff; }
  .modal-close:hover{ color:var(--text); }
  .clickable-name{ cursor:pointer; text-decoration:none; padding:1px 5px; margin:-1px -5px; border-radius:4px; transition:background-color .12s ease, color .12s ease; }
  .clickable-name:hover{ background:var(--good-bg); color:var(--good); }
  .modal-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:16px 0; }

  /* ---- Player detail modal ---- */
  .player-modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 16px; }
  .player-modal-backdrop.show{ display:flex; }
  .player-modal{ background:var(--surface); border:1px solid var(--border); border-radius:16px; max-width:640px; width:100%; padding:24px; box-shadow:var(--shadow-md); }
  .player-modal-close{ float:right; cursor:pointer; font-size:1.3rem; color:var(--text-muted); line-height:1; }
  .player-modal-close:hover{ color:var(--text); }
  .chip-name.clickable, .compare-name-click{ cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
  .chip-name.clickable:hover, .compare-name-click:hover{ color:var(--accent); }
  .prop-card:hover{ box-shadow:var(--shadow-md); transform: translateY(-1px); }
  .prop-card-id{ display:flex; flex-direction:column; gap:5px; min-width:180px; }
  .prop-card-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:1.02rem; letter-spacing:0.01em; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .prop-card-meta{ font-size:0.78rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .prop-card-tiles{ display:flex; gap:9px; flex-wrap:wrap; flex:1; justify-content:flex-start; }
  .stat-tile{ background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:9px 13px; text-align:center; min-width:98px; }
  .stat-tile-label{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); font-weight:700; margin-bottom:5px; }
  .stat-tile-value{ font-family:'Oswald',sans-serif; font-size:0.98rem; font-weight:600; color:var(--text); line-height:1.1; }
  .stat-tile-badge{ display:inline-block; margin-top:6px; padding:2px 9px; border-radius:7px; font-size:0.66rem; font-weight:700; letter-spacing:0.01em; }
  .stat-tile-badge.tier-good{ background:var(--good-bg); color:var(--good); }
  .stat-tile-badge.tier-warn{ background:var(--warn-bg); color:var(--warn); }
  .stat-tile-badge.tier-danger{ background:var(--danger-bg); color:var(--danger); }
  .stat-tile-badge.tier-flat{ background:var(--surface); color:var(--text-muted); border:1px solid var(--border); }
  /* Whole-tile grading (green = good, yellow = mid, red = bad) for at-a-glance scanning -- used across the
     player profile's Advanced Stats grid and the Advanced tab's matchup grid. */
  .stat-tile.grade-good{ background:var(--good-bg); border-color:var(--good); }
  .stat-tile.grade-mid{ background:var(--warn-bg); border-color:var(--warn); }
  .stat-tile.grade-bad{ background:var(--danger-bg); border-color:var(--danger); }
  .stat-tile.grade-good .stat-tile-value{ color:var(--good); }
  .stat-tile.grade-mid .stat-tile-value{ color:var(--warn); }
  .stat-tile.grade-bad .stat-tile-value{ color:var(--danger); }
  .pm-section{ margin-top:22px; }
  .pm-section-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-bottom:8px; border-bottom:2px solid var(--border); }
  .pm-section-head h3{ margin:0; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:0.98rem; }
  .pm-section-head .hint{ margin:0 0 0 auto; }
  .pm-legend-grade{ display:flex; gap:12px; font-size:0.68rem; color:var(--text-muted); margin:0 0 0 auto; }
  .pm-legend-grade span{ display:inline-flex; align-items:center; gap:4px; }
  .pm-legend-grade i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
  /* PropFinder-style matchup grid (Advanced tab, per-team detail) -- real per-week split defense metrics,
     one colored cell per position/metric, ranked across the whole league for that window. */
  .dvp-matrix{ width:100%; border-collapse:separate; border-spacing:4px; margin-top:10px; }
  .dvp-matrix th{ font-size:0.62rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--text-muted); padding:4px 6px; font-weight:700; }
  .dvp-matrix td{ padding:0; }
  .dvp-matrix td:first-child, .dvp-matrix th:first-child{ text-align:left; padding-left:6px; }
  .dvp-cell{ background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:7px 4px; text-align:center; min-width:56px; }
  .dvp-cell.grade-good{ background:var(--good-bg); border-color:var(--good); box-shadow:0 0 0 1px var(--good) inset; }
  .dvp-cell.grade-mid{ background:var(--warn-bg); border-color:var(--warn); box-shadow:0 0 0 1px var(--warn) inset; }
  .dvp-cell.grade-bad{ background:var(--danger-bg); border-color:var(--danger); box-shadow:0 0 0 1px var(--danger) inset; }
  .dvp-cell-val{ font-family:'Oswald',sans-serif; font-weight:800; font-size:0.92rem; }
  .dvp-cell.grade-good .dvp-cell-val{ color:var(--good); }
  .dvp-cell.grade-mid .dvp-cell-val{ color:var(--warn); }
  .dvp-cell.grade-bad .dvp-cell-val{ color:var(--danger); }
  .dvp-cell-rank{ font-size:0.6rem; color:var(--text-muted); margin-top:1px; }
  .dvp-matrix tr.pm-own-row td:first-child{ position:relative; font-weight:800; color:var(--accent); }
  .dvp-matrix tr.pm-own-row td:first-child::before{ content:''; position:absolute; left:-4px; top:2px; bottom:2px; width:3px; border-radius:2px; background:var(--accent); }
  .pm-category-block{ margin-bottom:18px; }
  .pm-category-block:last-of-type{ margin-bottom:0; }
  .pm-category-head{ margin:0 0 6px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); }
  .dvp-window-tabs{ display:flex; gap:4px; margin:10px 0 2px; }
  .dvp-window-tabs button{ border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); padding:4px 11px; border-radius:7px; font-size:0.7rem; font-weight:700; cursor:pointer; text-transform:uppercase; letter-spacing:0.02em; }
  .dvp-window-tabs button.active{ background:var(--field); color:#fff; border-color:var(--field); }
  /* One-game-at-a-time page layout (Advanced + TD Matchups): a game dropdown up top, then the selected
     game fills the rest of the page instead of stacking every game one after another. A plain <select>
     (not a horizontally-scrolling chip strip) so every game in the week is reachable, not just whichever
     ones fit on screen. */
  .game-picker-select-wrap{ margin-bottom:14px; }
  .game-picker-select{ width:100%; max-width:420px; font-size:0.88rem; font-weight:600; padding:10px 12px; }
  .game-page{ border:1px solid var(--border); border-radius:16px; padding:22px; background:linear-gradient(180deg, var(--surface-2), var(--surface) 140px); }
  /* Wide data tables here have a real min-width (.prop-table: 920px). Fitting two side by side needs
     ~960px each plus a gap -- well more than this column ever actually gets given main's own max-width --
     so side-by-side was always just squeezing each table well under its real min-width and forcing an
     internal horizontal scrollbar per table (the "cramped, cut off" look). Away/home now stack full-width
     instead, so every table renders at its real size with nothing to scroll. */
  .game-page-cols{ display:grid; grid-template-columns:1fr; gap:24px; }
  /* A grid item won't shrink below its content's own min-content width by default (here, .prop-table's
     own 920px min-width) -- min-width:0 overrides that so THIS column can go narrower than 920px, letting
     .table-wrap's overflow-x:auto actually do its job on a small screen instead of the whole page
     overflowing horizontally. */
  .game-page-col{ min-width:0; }
  .game-page-col h4{ margin:0 0 10px; font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--text-muted); }
  .game-page-grid-section{ margin-top:26px; padding-top:20px; border-top:1px solid var(--border); }
  @media (max-width:640px){ .game-page{ padding:14px; } }

  /* Team header cards + VS panel -- the game's real identity up top, team-colored, logo watermarked. */
  .tdm-header-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch; margin-bottom:22px; }
  .tdm-team-card{ position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:14px; border:2px solid var(--team-c1); background:linear-gradient(120deg, color-mix(in srgb, var(--team-c1) 24%, var(--surface)), var(--surface) 75%); box-shadow:0 4px 14px rgba(0,0,0,0.25); }
  .tdm-team-home{ flex-direction:row-reverse; text-align:right; }
  .tdm-team-card-logo{ position:absolute; top:50%; right:-12%; width:68%; height:220%; transform:translateY(-50%) rotate(-6deg); background-size:contain; background-repeat:no-repeat; background-position:center; opacity:0.16; pointer-events:none; }
  .tdm-team-home .tdm-team-card-logo{ right:auto; left:-12%; transform:translateY(-50%) rotate(6deg); }
  .tdm-team-card .team-badge{ position:relative; z-index:1; width:54px; height:54px; font-size:0.98rem; flex-shrink:0; }
  .tdm-team-card-info{ position:relative; z-index:1; min-width:0; }
  .tdm-team-card-name{ font-family:'Oswald',sans-serif; font-weight:800; font-size:1.4rem; letter-spacing:0.02em; line-height:1.1; }
  .tdm-team-card-sub{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); margin-top:4px; font-weight:700; }
  .tdm-vs-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:14px 22px; border-radius:14px; border:1px solid var(--border); background:var(--surface); min-width:130px; }
  .tdm-vs-week{ font-family:'Oswald',sans-serif; font-size:0.66rem; letter-spacing:0.09em; color:var(--text-muted); text-transform:uppercase; font-weight:700; }
  .tdm-vs-big{ font-family:'Oswald',sans-serif; font-weight:800; font-size:1.8rem; color:var(--accent); letter-spacing:0.03em; line-height:1; }
  .tdm-vs-sub{ font-size:0.64rem; color:var(--text-muted); text-align:center; white-space:nowrap; }
  .tdm-vs-meta{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; }
  @media (max-width:700px){ .tdm-header-row{ grid-template-columns:1fr; } .tdm-vs-card{ order:-1; flex-direction:row; flex-wrap:wrap; gap:8px 14px; } .tdm-team-home{ flex-direction:row; text-align:left; } .tdm-team-home .tdm-team-card-logo{ right:-12%; left:auto; transform:translateY(-50%) rotate(-6deg); } }

  /* Icon+title section headers used across the Advanced page's sub-panels. */
  .tdm-section-head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .tdm-section-icon{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--field); font-size:0.85rem; flex-shrink:0; }
  .tdm-section-head h3{ margin:0; font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:0.88rem; letter-spacing:0.03em; }
  .tdm-section-head .hint{ margin:0 0 0 auto; }
  .tdm-mini-panel{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:14px; }

  .tdm-insights{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .tdm-insights li{ padding:10px 13px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); font-size:0.82rem; line-height:1.4; }
  .tdm-insights li.tdm-good{ border-color:var(--good); background:var(--good-bg); color:var(--good); }
  .tdm-insights li.tdm-bad{ border-color:var(--danger); background:var(--danger-bg); color:var(--danger); }
  .tdm-key-advantage{ margin-top:18px; border:2px solid var(--accent); border-radius:14px; padding:16px; background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--surface-2)), var(--surface-2)); }
  .tdm-key-label{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em; font-size:0.74rem; color:var(--accent); margin-bottom:12px; font-weight:800; text-align:center; }
  .tdm-key-row{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
  .tdm-key-badge{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 18px; border:2px solid var(--border); border-radius:12px; background:var(--surface); min-width:150px; }
  .tdm-key-badge .team-badge{ width:44px; height:44px; font-size:0.85rem; }
  .tdm-key-badge-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:0.88rem; text-align:center; }
  .tdm-key-badge-sub{ font-size:0.66rem; color:var(--text-muted); text-align:center; }
  .tdm-key-vs{ font-family:'Oswald',sans-serif; color:var(--accent); font-size:1rem; font-weight:800; }
  .prop-card-signal{ margin-left:auto; text-align:center; min-width:128px; padding-left:10px; border-left:1px solid var(--border); }
  .prop-card-signal .score-num{ font-family:'Oswald',sans-serif; font-size:1.7rem; font-weight:700; line-height:1; }
  .prop-card-signal .score-label{ margin-top:4px; }
  @media (max-width: 720px){
    .prop-card{ padding:14px; }
    .prop-card-signal{ margin-left:0; border-left:none; padding-left:0; width:100%; padding-top:10px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; text-align:left; }
  }
  .pill.pos-QB{ background:#3B5BA5; color:#fff; }
  .pill.pos-RB{ background:#2E7D4F; color:#fff; }
  .pill.pos-WR{ background:#B8790A; color:#fff; }
  .pill.pos-TE{ background:#7A4FA0; color:#fff; }
  .pill.pos-DST{ background:#555; color:#fff; }
  .pill.pos-K{ background:#7A6A2E; color:#fff; }
  .pill.pos-MVP{ background:var(--accent); color:var(--accent-ink); }
  .inj-tag{ font-size:0.7rem; font-weight:700; color:var(--danger); border:1px solid var(--danger); border-radius:4px; padding:1px 5px; }
  .value-badge{ font-family:'Oswald',sans-serif; font-weight:600; }
  .icon-btn{ border:none; background:transparent; color:var(--danger); cursor:pointer; font-size:1rem; line-height:1; padding:4px 7px; border-radius:5px; transition: background-color 0.12s ease; }
  .icon-btn:hover{ background: var(--danger-bg); }
  .copy-row-btn{ border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:0.85rem; line-height:1; padding:4px 7px; border-radius:5px; transition: background-color 0.12s ease, color 0.12s ease; flex-shrink:0; }
  .copy-row-btn:hover{ background: var(--surface-2); color: var(--field); }
  .status-btn{ border:none; background:transparent; cursor:pointer; font-size:0.95rem; padding:3px 6px; border-radius:5px; opacity:0.35; transition: opacity 0.12s ease, background-color 0.12s ease; }
  .status-btn:hover{ opacity:0.75; background: var(--surface-2); }
  .status-btn.active{ opacity:1; }
  tr.row-locked{ background: var(--good-bg); }
  tr.row-excluded{ background: var(--danger-bg); opacity:0.55; }
  tr.row-excluded .ptitle, tr.row-excluded input.name-input{ text-decoration: line-through; }

  .team-badge{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:24px; height:24px; border-radius:50%; color:#fff; vertical-align:middle;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:0.56rem; letter-spacing:0.01em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.25);
    text-shadow: 0 1px 1px rgba(0,0,0,0.45);
  }
  .team-badge.lg{ width:40px; height:40px; font-size:0.78rem; }
  .team-badge.md{ width:30px; height:30px; font-size:0.62rem; }

  details.disclosure{ border-top:1px solid var(--border); margin-top:14px; padding-top:12px; }
  details.disclosure summary{ cursor:pointer; font-weight:600; font-family:'Oswald',sans-serif; letter-spacing:0.02em; text-transform:uppercase; font-size:0.85rem; color:var(--text-muted); }
  details.disclosure[open] summary{ margin-bottom:12px; }

  .empty{ color:var(--text-muted); font-style:italic; padding: 18px 4px; }

  /* Official lineup card */
  .lineup-card{ border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow: var(--shadow-md); }
  .lineup-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:14px; align-items:start; }
  @media (max-width: 820px){ .lineup-grid{ grid-template-columns: 1fr; } }
  .lineup-card-head{
    background: linear-gradient(135deg, var(--field), color-mix(in srgb, var(--field) 70%, black));
    color:#fff; padding:11px 14px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  }
  .lineup-card-head .title-block h2{ color:#fff; font-size:1.02rem; letter-spacing:0.03em; }
  .lineup-card-head .title-block .sub{ font-size:0.68rem; opacity:0.85; margin-top:1px; letter-spacing:0.04em; text-transform:uppercase; }
  .seal{
    display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.4);
    border-radius:20px; padding:4px 9px; font-size:0.64rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  }
  .seal .checkmark{ color: var(--accent); font-size:0.8rem; }
  .lineup-card-body{ padding:10px 14px; background:var(--surface); }
  .lineup-row{ display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid var(--border); font-size:0.86rem; }
  .news-row{ display:flex; align-items:flex-start; gap:12px; padding:14px 4px; border-bottom:1px solid var(--border); }
  .news-row:last-child{ border-bottom:none; }
  .status-chip{ flex-shrink:0; color:#fff; font-family:'Oswald',sans-serif; font-weight:700; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.03em; padding:4px 9px; border-radius:5px; white-space:nowrap; margin-top:2px; }
  .news-body{ flex:1; min-width:0; }
  .news-title{ font-weight:600; margin-bottom:2px; }
  .news-note{ color:var(--text-muted); font-size:0.88rem; margin:4px 0 6px; }
  .lineup-row:last-child{ border-bottom:none; }
  .lineup-row .slot-pill{ width:36px; text-align:center; flex-shrink:0; font-size:0.66rem; padding:1px 6px; }
  .lineup-row .player-info{ flex:1; min-width:0; }
  .lineup-row .player-name{ font-weight:600; }
  .lineup-row .player-meta{ color:var(--text-muted); font-size:0.7rem; }
  .lineup-row .pm-line{ font-size:0.68rem; }
  .lineup-row .stat-block{ text-align:right; flex-shrink:0; min-width:52px; }
  .lineup-row .stat-block .stat-num{ font-family:'Oswald',sans-serif; font-weight:600; font-size:0.9rem; }
  .lineup-row .stat-block .stat-label{ font-size:0.58rem; color:var(--text-muted); text-transform:uppercase; }
  .lineup-row .team-badge{ width:20px; height:20px; }

  .totals-strip{ display:flex; gap:26px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:2px solid var(--field); }
  .totals-strip .stat{ display:flex; flex-direction:column; }
  .totals-strip .stat .label{ font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.03em; }
  .totals-strip .stat .val{ font-family:'Oswald',sans-serif; font-size:1.3rem; }
  .totals-strip .stat .val.accent{ color:var(--accent); }

  .exposure-cell{ display:flex; align-items:center; gap:8px; min-width:140px; }
  .exposure-bar-track{ flex:1; height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
  .exposure-bar-fill{ height:100%; background:var(--accent); }
  .exposure-pct{ font-family:'Oswald',sans-serif; font-weight:600; font-size:0.82rem; min-width:38px; text-align:right; }

  @keyframes reveal{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
  .reveal{ animation: reveal 0.35s ease-out; }
  @media (prefers-reduced-motion: reduce){ .reveal{ animation:none; } }

  /* Blog */
  .blog-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
  .cat-filters{ display:flex; gap:6px; flex-wrap:wrap; }
  .cat-filters button{ border:1px solid var(--border); background:var(--surface); color:var(--text-muted); padding:7px 13px; border-radius:16px; font-size:0.8rem; cursor:pointer; font-weight:600; transition: background-color 0.12s ease, border-color 0.12s ease; }
  .cat-filters button:hover:not(.active){ background: var(--surface-2); border-color: var(--field); }
  .cat-filters button.active{ background:var(--field); border-color:var(--field); color:#fff; }
  .post-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px; }
  .post-row{ display:flex; flex-direction:column; width:100%; max-width:320px; border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; background:var(--surface-2); transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .post-row:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,0.28); }
  .post-thumb-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; flex-shrink:0; }
  .post-thumb{ width:100%; height:100%; object-fit:contain; display:block; }
  .post-thumb-noimg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.4rem; background:var(--field); }
  .post-row .post-body{ padding:12px 14px 14px; min-width:0; }
  .post-row .ptitle{ display:block; font-family:'Oswald',sans-serif; font-size:1.2rem; font-weight:800; margin:6px 0 4px; line-height:1.25; }
  .post-row .pmeta, .blog-preview-card .pmeta{ color:var(--text-muted); font-size:0.78rem; white-space:nowrap; }
  .post-row .pexcerpt{ display:block; color:var(--text-muted); font-size:0.85rem; margin-top:3px; }
  .blog-hero{ padding: 10px 4px 20px; }
  .blog-hero h1{ font-size:1.7rem; margin-bottom:8px; }
  .reader-hero-image{ width:100%; max-height:340px; object-fit:cover; border-radius:10px; margin-bottom:18px; }
  .blog-preview-card{ display:flex; flex-direction:column; width:100%; max-width:320px; border:1px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer; margin-bottom:14px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .blog-preview-card:last-child{ margin-bottom:0; }
  .blog-preview-card:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.26); }
  .blog-preview-thumb-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
  .blog-preview-card img{ width:100%; height:100%; object-fit:contain; display:block; }
  .blog-preview-noimg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.2rem; background:var(--field); }
  .blog-preview-body{ padding:10px 12px 12px; }
  .blog-preview-card .ptitle{ display:block; font-family:'Oswald',sans-serif; font-size:1.2rem; font-weight:800; margin:6px 0 4px; line-height:1.25; }
  .cat-tag{ display:inline-block; padding:3px 9px; border-radius:5px; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.03em; font-weight:700; margin-right:8px; }
  .cat-tag.Waiver{ background:#2E7D4F; color:#fff; }
  .cat-tag.StartSit{ background:#3B5BA5; color:#fff; }
  .cat-tag.Trade{ background:#B8790A; color:#fff; }
  .cat-tag.General{ background:#555; color:#fff; }
  .cat-tag.Injury{ background:#A6362F; color:#fff; }
  .cat-tag.GameRecap{ background:#6B4FA0; color:#fff; }

  .reader{ display:none; }
  .reader.show{ display:block; }
  .reader-head{ margin-bottom:16px; }
  .reader-head h2{ font-size:1.6rem; margin-bottom:6px; }
  .reader-body{ font-size:1rem; max-width: 74ch; }
  .reader-body p{ margin: 0 0 1em; }
  .reader-body strong{ color: var(--text); }
  .reader-actions{ display:flex; gap:10px; margin-top:22px; }

  .editor{ display:none; }
  .editor.show{ display:block; }
  .editor .field{ margin-bottom:14px; min-width: unset; }

  footer.foot{ text-align:center; color:var(--text-muted); font-size:0.78rem; padding: 30px 20px 50px; }

  /* Trial / paywall */
  .trial-pill{ font-size:0.72rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; background: var(--surface-2); border:1px solid var(--border); padding:6px 12px; border-radius:14px; }
  .trial-pill.warn{ color: var(--danger); background: var(--danger-bg); border-color: transparent; }
  .trial-pill.good{ color: var(--good); background: var(--good-bg); border-color: transparent; }

  .topbar-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .social-links{ display:flex; align-items:center; gap:8px; }
  .twitter-link{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:0.92rem; text-decoration:none; flex-shrink:0; }
  .twitter-link:hover{ border-color:var(--accent); color:var(--accent); }
  .twitter-follow-card{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }
  .twitter-follow-text p{ margin:0; color:var(--text-muted); }

  /* Home */
  .home-hero{
    position: relative; overflow: hidden;
    padding: 72px 32px 56px; margin: -4px -4px 24px; border-radius: 14px;
    background: #05070a;
    box-shadow: var(--shadow-md);
    color: #fff;
    text-align: center;
  }
  .home-hero::after{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background: radial-gradient(ellipse 70% 40% at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
  }
  #home-sims-panel{ border:1px solid var(--accent); box-shadow:0 0 0 1px rgba(0,255,100,.12), 0 10px 40px -18px var(--accent); background:linear-gradient(135deg, rgba(0,255,100,.07), transparent 60%), var(--panel, transparent); }
  #home-sims-panel{ border:1px solid rgba(34,230,90,.55) !important; }
  #home-sims-panel .feature-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  @media (max-width:1100px){ #home-sims-panel .feature-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (max-width:560px){ #home-sims-panel .feature-grid{ grid-template-columns:1fr; } }
  .home-sims-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:2px 0 16px; }
  .home-sims-chips button img, #home-sims-panel .feature-icon img{ object-fit:contain; vertical-align:middle; }
  #subtabs-sims button{ display:inline-flex; align-items:center; gap:8px; } #subtabs-sims .sport-logo{ width:20px; height:20px; }
  img[src$="/img/nhl.png"]{ filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 3px rgba(255,255,255,.28)); }
  .home-sims-chips button{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:700; padding:8px 18px; border-radius:999px; border:1px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer; }
  .home-sims-chips button:hover{ background:var(--accent); color:#000; }
  .home-sims-chips span{ color:var(--text-muted); font-size:.85rem; }
  .home-hero-text{ position:relative; z-index:1; max-width: 620px; margin: 0 auto; display:flex; flex-direction:column; align-items:center; }
  .home-hero .eyebrow{ color: var(--accent); font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; font-size:0.78rem; margin-bottom:14px; }
  .home-hero h1{ font-size:2rem; line-height:1.2; letter-spacing:0.01em; margin-bottom:10px; color:#fff; }
  .home-lede{ color: rgba(255,255,255,0.72); font-size:0.98rem; max-width:48ch; margin: 0 auto 26px; }
  .hero-stats{ display:flex; gap:32px; margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.14); flex-wrap:wrap; justify-content:center; }
  .hero-stat-num{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.6rem; color: var(--accent); }
  .hero-stat-label{ font-size:0.75rem; color: rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.03em; margin-top:2px; }
  .home-hero .btn.secondary{ color:#fff; border-color:rgba(255,255,255,0.45); }
  .home-hero .btn.secondary:hover:not(:disabled){ background: rgba(255,255,255,0.14); border-color:#fff; }
  .feature-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
  @media (max-width: 620px){
    .feature-grid{ grid-template-columns: 1fr; }
    .home-hero{ padding:44px 20px; border-radius:10px; margin:-2px -2px 20px; }
    .home-hero h1{ font-size:1.5rem; }
    .hero-stats{ gap:22px; }
  }
  .feature-card{ border:1px solid var(--border); border-radius:10px; padding:18px; background:var(--surface-2); transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .feature-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .feature-icon{ font-size:1.4rem; margin-bottom:8px; }
  .feature-title{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:6px; color:var(--field); }
  .feature-card p{ margin:0; color:var(--text-muted); font-size:0.88rem; }

  .pricing-card{ border:2px solid var(--field); border-radius:12px; padding:26px; max-width:340px; margin:0 auto; box-shadow: var(--shadow-md); }
  .pricing-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
  .pricing-amount{ font-family:'Oswald',sans-serif; font-size:2.2rem; font-weight:700; }
  .pricing-amount span{ font-size:1rem; color:var(--text-muted); font-weight:400; }
  .pricing-badge{ background:var(--accent); color:var(--accent-ink); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:4px 10px; border-radius:12px; }
  .pricing-list{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:10px; font-size:0.9rem; }
  .pricing-list li{ padding-left:22px; position:relative; }
  .pricing-list li::before{ content:'✓'; position:absolute; left:0; color:var(--good); font-weight:700; }

  @media (max-width: 620px){
    header.topbar{ padding:12px 14px; }
    main{ padding: 18px 12px 60px; }
    .panel{ padding:14px; }
    .totals-strip{ gap:16px; }
    .lineup-card-head{ padding:14px 16px; }
  }
@media print{
  .topbar, .subtabs, .trial-pill{ display:none !important; }
  #view-rankings .row, #view-rankings .cat-filters, #view-rankings .btn-row,
  #view-rankings #rankings-add-form-wrap, #view-rankings #rankings-filter-note,
  .chip-remove, .icon-btn{ display:none !important; }
  #view-rankings .panel{ box-shadow:none; border:1px solid #ccc; }
  .tier-chip{ cursor:default; background:#f4f4f4 !important; color:#111 !important; border:1px solid #ccc; }
  .tier-chip .chip-vs, .tier-chip .hint{ color:#444 !important; }
  body{ background:#fff; color:#111; }
}

  /* ---- Start/Sit Scorer + Tier Board (added tools) ---- */
  .ss-weights{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 22px; margin:6px 0 18px; }
  .ss-weights label{ display:flex; justify-content:space-between; font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
  .ss-weights label b{ font-family:'Oswald',sans-serif; color:var(--text); font-size:0.85rem; }
  .ss-weights input[type=range]{ width:100%; accent-color:var(--field); padding:0; }
  .ss-verdict{ border:1px solid var(--border); border-left:4px solid var(--accent); background:var(--surface-2); border-radius:var(--radius); padding:12px 16px; margin-bottom:18px; }
  .ss-verdict b{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.02em; }
  .ss-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; }
  .ss-card{ position:relative; border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--surface); box-shadow:var(--shadow-sm); }
  .ss-card.winner{ border-color:var(--good); box-shadow:0 0 0 1px var(--good), var(--shadow-md); }
  .ss-card .ss-name{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--border); border-radius:0; font-family:'Oswald',sans-serif; font-weight:600; font-size:1.15rem; padding:4px 0; margin-bottom:12px; }
  .ss-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
  .ss-grid label{ font-size:0.66rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; display:block; margin-bottom:2px; }
  .ss-score{ display:flex; align-items:baseline; gap:8px; margin:16px 0 8px; flex-wrap:wrap; }
  .ss-score .ss-num{ font-family:'Oswald',sans-serif; font-weight:700; font-size:2.4rem; line-height:1; }
  .ss-tag{ font-size:0.66rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; padding:3px 9px; border-radius:10px; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
  .ss-card.winner .ss-tag.start{ background:var(--good-bg); color:var(--good); border-color:transparent; }
  .ss-factor{ margin:9px 0; font-size:0.76rem; }
  .ss-factor .ss-row{ display:flex; justify-content:space-between; gap:8px; color:var(--text-muted); }
  .ss-factor .ss-row b{ font-family:'Oswald',sans-serif; color:var(--text); }
  .ss-bar{ height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden; margin-top:4px; }
  .ss-bar i{ display:block; height:100%; border-radius:4px; background:var(--field); }
  .ss-bar i.good{ background:var(--good); } .ss-bar i.warn{ background:var(--warn); } .ss-bar i.danger{ background:var(--danger); }
  .ss-rm{ position:absolute; top:8px; right:10px; }


  /* ---- Projections, player detail, defense vs position, tier board v2 ---- */
  .mu{ display:inline-block; min-width:40px; text-align:center; padding:2px 8px; border-radius:6px; font-family:'Oswald',sans-serif; font-weight:600; font-size:0.78rem; border:1px solid var(--border); color:var(--text); cursor:help; }
  .d-up{ color:var(--good); font-weight:600; } .d-dn{ color:var(--danger); font-weight:600; }
  .clickable-name{ font-weight:600; }
  .heat-legend{ display:flex; align-items:center; gap:10px; font-size:0.75rem; color:var(--text-muted); margin:10px 0 14px; flex-wrap:wrap; }
  .heat-legend .bar{ height:10px; width:220px; border-radius:5px; border:1px solid var(--border); background:linear-gradient(90deg,color-mix(in srgb,var(--danger) 55%,var(--surface)),var(--surface),color-mix(in srgb,var(--good) 55%,var(--surface))); }
  #dvp-table th[data-dsort]{ cursor:pointer; user-select:none; }
  #dvp-table th.sorted{ color:var(--text); border-bottom-color:var(--accent); }
  .dvp-cell{ text-align:center; font-variant-numeric:tabular-nums; }
  .dvp-cell small{ color:var(--text-muted); margin-left:4px; }
  /* Sleeper-style player banner: full-bleed team-color gradient, a big faded team logo watermarked across
     it, the real cutout photo bleeding off the bottom edge (no white circle, no boxed thumbnail), and the
     name/meta sitting in white text over the color instead of in a separate plain row. */
  .pm-head{
    position:relative; overflow:hidden; display:flex; align-items:flex-end; gap:16px;
    margin:-24px -24px 18px; padding:18px 20px 16px 150px; min-height:185px; border-radius:16px 16px 0 0;
  }
  .pm-head-logo{
    position:absolute; top:50%; right:-8%; width:75%; height:230%; transform:translateY(-50%) rotate(-8deg);
    background-size:contain; background-repeat:no-repeat; background-position:center;
    opacity:0.25; filter:saturate(1.3) brightness(1.15); pointer-events:none;
  }
  /* Absolutely positioned (not a flex child) so its top offset is exact and doesn't depend on how tall the
     name/meta text next to it is. Inset a real margin on every side -- flush against the banner's top edge
     read as a rendering glitch (a photo with a hard-cropped corner looks "crooked" right where the rounded
     banner corner and the square photo corner meet) -- and a clear left gap before the text column so a
     long name can never overlap the photo. */
  .pm-head-photo{
    position:absolute; z-index:1; left:20px; top:16px; bottom:20px; width:112px; overflow:hidden;
    border-radius:10px;
  }
  .pm-headshot{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; background:transparent; border:none; box-shadow:none; }
  @media (max-width:640px){ .pm-head{ padding-left:118px; min-height:165px; } .pm-head-photo{ width:84px; bottom:18px; } }
  .pm-head-info{ position:relative; z-index:1; color:#fff; padding-bottom:2px; flex:1; min-width:0; }
  .pm-head h2{ font-size:1.5rem; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.5); margin-bottom:8px; }
  .pm-head-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
  .pm-head-team{ color:rgba(255,255,255,0.85); font-weight:600; font-size:0.85rem; }
  .pm-head-bio{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
  .pm-head-bio span{ color:rgba(255,255,255,0.75); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.03em; display:flex; flex-direction:column; gap:2px; }
  .pm-head-bio b{ color:#fff; font-size:0.95rem; font-family:'Oswald',sans-serif; letter-spacing:normal; text-transform:none; }
  .pm-head .fmt-toggle{ margin-top:2px; }
  .adv-sample{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 12px; } .adv-sample-label{ font-size:0.72rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
  .adv-sample .dvp-window-tabs{ margin:0; }
  .pm-outbanner{ margin:0 0 10px; padding:9px 14px; border-radius:10px; background:var(--danger-bg, rgba(166,54,47,0.16)); border:1px solid var(--danger); color:var(--text); font-size:0.84rem; line-height:1.4; } .pm-outbanner b{ color:var(--danger); text-transform:uppercase; letter-spacing:0.04em; }
  .pm-rank{ margin-top:4px; font-size:0.68rem; font-weight:700; color:var(--text-muted); } .pm-rank.up{ color:var(--good); } .pm-rank.dn{ color:var(--danger); }
  .pm-barcell{ width:34%; } .pm-bar{ display:block; height:8px; border-radius:5px; background:var(--text-muted); } .pm-bar.up{ background:var(--good); } .pm-bar.dn{ background:var(--danger); }
  .pm-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:10px; margin:14px 0; }
  .pm-tiles .stat-tile{ min-width:0; }
  /* Player profile subtabs -- sections render once and are shown/hidden by data-pm-tab, so switching
     tabs is instant (no re-render) and each tab keeps its own scroll state. */
  /* Research-opened profile: a big, wide screen (not the normal ~860px fantasy card) so the real-stat
     tabs -- Opponent's matchup grid, Player Props' book comparisons, Advanced Stats -- have real room,
     closer to a dedicated research-tool page than a modal. */
  #pl-modal.research-mode #pl-panel{ max-width:1240px !important; }
  .pm-research-badge{ display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,0.16); color:#fff; font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; padding:3px 9px; border-radius:20px; }
  .pm-tabbar{ display:flex; gap:2px; overflow-x:auto; margin:0 -24px 18px; padding:0 20px; background:var(--surface-2); border-bottom:1px solid var(--border); -webkit-overflow-scrolling:touch; }
  .pm-tabbar::-webkit-scrollbar{ display:none; }
  .pm-tab-btn{ flex-shrink:0; border:none; background:transparent; color:var(--text-muted); padding:11px 14px; font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; font-size:0.74rem; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
  .pm-tab-btn:hover{ color:var(--text); }
  .pm-tab-btn.active{ color:var(--accent); border-bottom-color:var(--accent); }
  @media (max-width:640px){ .pm-tabbar{ padding:0 14px; } .pm-tab-btn{ padding:10px 11px; font-size:0.7rem; } }
  .pm-sub{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.03em; font-size:0.85rem; color:var(--text-muted); margin:18px 0 8px; }
  .pm-legend{ display:flex; gap:14px; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; }
  .pm-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
  .pm-svg{ width:100%; height:auto; display:block; }
  .pm-p{ fill:var(--field); opacity:0.45; } .pm-a{ fill:var(--accent); }
  .pm-txt{ fill:var(--text-muted); font-size:10px; font-family:Inter,sans-serif; }
  .pm-grid{ stroke:var(--border); stroke-width:1; }
  tr.pm-bye td{ color:var(--text-muted); font-style:italic; }
  .pm-dnp{ color:var(--danger); font-weight:700; letter-spacing:0.02em; }
  tr.pm-future td{ color:var(--text-muted); }
  .pm-line{ font-size:0.78rem; color:var(--text-muted); }
  /* PropFinder-style prop drill-down: a row of prop tabs (each showing its own real hit%), and below,
     one full-width detail block for whichever prop is selected -- big labeled bar chart plus the
     Season/L3/L5/L10(/H2H) hit-rate table -- instead of several small side-by-side mini graphs. */
  .pm-prop-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 16px; }
  .pm-prop-tab{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); padding:7px 12px; border-radius:9px; cursor:pointer; font-family:Inter,sans-serif; }
  .pm-prop-tab:hover{ border-color:var(--accent); color:var(--text); }
  .pm-prop-tab.active{ background:var(--field); border-color:var(--field); color:#fff; }
  .pm-prop-tab-label{ font-size:0.76rem; font-weight:700; }
  .pm-prop-tab-pct{ font-size:0.68rem; font-weight:800; padding:1px 6px; border-radius:5px; background:var(--surface); }
  .pm-prop-tab-pct.grade-good{ color:var(--good); } .pm-prop-tab-pct.grade-mid{ color:var(--warn); } .pm-prop-tab-pct.grade-bad{ color:var(--danger); }
  .pm-prop-tab.active .pm-prop-tab-pct{ background:rgba(255,255,255,0.18); color:#fff; }
  .pm-prop-detail{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
  .pm-prop-detail-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
  .pm-prop-detail-head b{ font-family:'Oswald',sans-serif; font-size:1rem; letter-spacing:0.01em; }
  .pm-prop-detail-line{ font-size:0.8rem; color:var(--text-muted); }
  .pm-prop-detail .dvp-matrix{ margin-top:14px; }
  /* Player Props tab: one real sportsbook-comparison card per market, instead of a single blended tile --
     matches how a real odds-comparison site presents a prop (book, line, price, side by side). */
  .pm-props-market{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:14px; }
  .pm-props-market:last-child{ margin-bottom:0; }
  .pm-props-market-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
  .pm-props-market-head b{ font-family:'Oswald',sans-serif; font-size:1rem; letter-spacing:0.01em; }
  .pm-props-table td:first-child{ text-align:left; font-weight:600; }
  .pm-book-link{ color:var(--sx-mint,var(--accent)); text-decoration:none; }
  .pm-book-link:hover{ text-decoration:underline; }
  .pm-best-price{ color:var(--good); font-weight:800; position:relative; }
  .pm-best-price::after{ content:'best'; display:block; font-size:0.56rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--good); opacity:0.8; }
  .proj-num{ font-family:'Oswald',sans-serif; font-weight:600; }
  .game-info{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 16px; }
  .gi-item{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
  .gi-label{ font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); font-weight:700; margin-bottom:4px; }
  .gi-value{ font-family:'Oswald',sans-serif; font-weight:600; font-size:1rem; }
  .tb-wx{ font-size:0.78rem; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:0 6px; cursor:help; white-space:nowrap; }

  .sb-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
  .sb-scatter circle{ fill-opacity:0.78; stroke:var(--surface); stroke-width:0.6; cursor:pointer; }
  .sb-scatter circle:hover{ stroke:var(--text); stroke-width:1.6; }
  .sb-scatter .sb-diag{ stroke:var(--text-muted); stroke-width:1; stroke-dasharray:4 4; fill:none; }
  .pm-legend i.sq{ border-radius:50%; }
  .ss-why{ font-size:0.78rem; color:var(--text-muted); margin:6px 0 0; }

  .tb-add{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; }
  .tb-tier{ display:flex; border:1px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden; background:var(--surface); }
  .tb-label{
    width:88px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; text-align:center; padding:6px 4px; font-family:'Oswald',sans-serif; color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.35);
  }
  .tb-label-letter{ font-weight:700; font-size:1.4rem; line-height:1; }
  .tb-label-text{ font-weight:600; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.02em; line-height:1.15; }
  @media (max-width:640px){ .tb-label{ width:64px; } .tb-label-letter{ font-size:1.15rem; } .tb-label-text{ font-size:0.55rem; } }
  .tb-drop{ flex:1; min-height:62px; padding:10px; display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; transition:background-color 0.12s ease; }
  .tb-drop.over{ background:var(--surface-2); }
  .tb-pool{ border:1px dashed var(--border); border-radius:12px; margin-top:16px; }
  .tb-pool h3{ margin:12px 14px 0; font-size:0.8rem; color:var(--text-muted); }
  .tb-chip{ display:flex; align-items:center; gap:7px; padding:5px 9px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); cursor:grab; font-size:0.83rem; user-select:none; }
  .tb-chip:active{ cursor:grabbing; }
  .tb-chip .tb-nm{ font-weight:600; cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
  .tb-label .tb-tsort{ margin-top:6px; font:inherit; font-size:0.58rem; font-weight:800; letter-spacing:0.03em; padding:2px 7px; border-radius:999px; border:1px solid rgba(255,255,255,0.6); background:rgba(0,0,0,0.25); color:#fff; cursor:pointer; line-height:1.2; }
  .tb-label .tb-tsort:hover{ background:rgba(0,0,0,0.45); }
  #view-tierboard.read-only .tb-tsort{ display:none !important; }
  .tb-chip .tb-rk{ flex:none; min-width:20px; height:20px; padding:0 5px; display:inline-grid; place-items:center; border-radius:6px; background:var(--bg); color:var(--text-muted); font-size:0.7rem; font-weight:800; font-variant-numeric:tabular-nums; }
  .tb-chip .tb-nm:hover{ color:var(--accent); }
  .tb-chip .tb-tm{ font-size:0.68rem; color:var(--text-muted); }
  .tb-chip .tb-pr{ font-family:'Oswald',sans-serif; font-size:0.72rem; background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:0 5px; color:var(--field); white-space:nowrap; cursor:help; }
  .tb-chip .tb-pr small{ color:var(--text-muted); font-weight:400; }
  .tb-chip .tb-note{ cursor:pointer; font-size:0.78rem; opacity:0.4; }
  .tb-chip .tb-note.has{ opacity:1; }
  .tb-chip .tb-x{ cursor:pointer; color:var(--text-muted); font-size:0.7rem; }

  /* ---- trade analyzer ---- */
  .trade-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:start; margin-top:10px; }
  .trade-side h3{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.03em; font-size:0.9rem; color:var(--text-muted); margin:0 0 10px; }
  .trade-side .ss-cards{ grid-template-columns:1fr; margin-bottom:10px; }
  .trade-vs{ display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--text-muted); padding-top:34px; }
  .trade-verdict{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; border:1px solid var(--border); border-left:4px solid var(--accent); background:var(--surface-2); border-radius:var(--radius); padding:14px 18px; margin:18px 0; }
  .trade-grade{ font-family:'Oswald',sans-serif; font-weight:700; font-size:2.6rem; line-height:1; min-width:64px; text-align:center; border-radius:12px; padding:6px 10px; }
  .trade-grade.good{ background:var(--good-bg); color:var(--good); }
  .trade-grade.warn{ background:var(--surface); color:var(--text-muted); border:1px solid var(--border); }
  .trade-grade.danger{ background:var(--danger-bg); color:var(--danger); }
  @media (max-width: 720px){ .trade-grid{ grid-template-columns:1fr; } .trade-vs{ padding-top:0; } }

  /* ---- tier board / rankings: read-only for everyone but the site owner ---- */
  #view-tierboard.read-only #tb-sortproj, #view-tierboard.read-only #tb-sync, #view-tierboard.read-only #tb-push,
  #view-tierboard.read-only #tb-clear, #view-tierboard.read-only .disclosure, #view-tierboard.read-only .tb-x,
  #view-tierboard.read-only .tb-note, #view-tierboard.read-only #tb-stream{ display:none !important; }
  #view-tierboard.read-only .tb-chip{ cursor:default; }
  .owner-badge{ display:inline-flex; align-items:center; gap:5px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:3px 9px; border-radius:999px; background:var(--good-bg); color:var(--good); margin-left:8px; }
  .readonly-note{ font-size:0.78rem; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-bottom:12px; }

  /* ---- practice report ---- */
  .practice-status{ display:inline-block; min-width:64px; text-align:center; padding:2px 8px; border-radius:6px; font-family:'Oswald',sans-serif; font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.02em; }
  .practice-status.full{ background:var(--good-bg); color:var(--good); }
  .practice-status.limited{ background:color-mix(in srgb, var(--warn, #B8A10A) 22%, var(--surface)); color:var(--warn, #B8A10A); }
  .practice-status.dnp{ background:var(--danger-bg); color:var(--danger); }
  .prac-summary{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 12px; }
  .prac-chip{ font:inherit; font-size:0.78rem; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); cursor:pointer; }
  .prac-chip b{ font-size:1rem; color:var(--text); font-variant-numeric:tabular-nums; }
  .prac-chip.dnp b{ color:var(--danger); } .prac-chip.limited b{ color:var(--warn, #d9a520); } .prac-chip.full b{ color:var(--good); }
  .prac-chip.on{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color:var(--text); }
  .prac-note{ max-width:38ch; font-size:0.78rem; color:var(--text-muted); line-height:1.35; } .prac-note b{ color:var(--text); }
  .prac-last{ margin-top:16px; border-top:1px solid var(--border); padding-top:12px; } .prac-last > summary{ cursor:pointer; font-weight:700; font-size:0.9rem; color:var(--accent); }
  .prac-last .hint{ margin:8px 0; }
  @media (max-width:640px){ .prac-hide-sm{ display:none; } }
  .practice-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:1px; }
  .practice-dot.full{ background:var(--good); }
  .practice-dot.limited{ background:var(--warn, #B8A10A); }
  .practice-dot.dnp{ background:var(--danger); }
  .tb-headshot{ width:22px; height:22px; border-radius:50%; object-fit:cover; background:#fff; border:1.5px solid var(--accent); flex-shrink:0; vertical-align:middle; }
  .tb-chip .tb-x:hover{ color:var(--danger); }
  #tb-out{ display:none; margin-top:12px; min-height:170px; font-family:ui-monospace,Consolas,monospace; font-size:0.8rem; }

  /* ---- waiver wire: Top 5 Adds ---- */
  .wa5-row{ display:grid; grid-template-columns:44px minmax(190px,1.3fr) minmax(300px,1.6fr) 150px minmax(160px,1fr); gap:14px; align-items:center; padding:12px 10px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); margin-bottom:10px; }
  .wa5-row.empty{ grid-template-columns:44px 1fr; opacity:0.92; }
  .wa5-rank{ font-family:'Oswald',sans-serif; font-weight:800; font-size:1.7rem; color:var(--accent); text-align:center; line-height:1; }
  .wa5-row:first-of-type .wa5-rank{ text-shadow:0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
  .wa5-who{ display:flex; align-items:center; gap:10px; }
  .wa5-who .tb-headshot{ width:46px; height:46px; }
  .wa5-name{ font-weight:800; font-size:1rem; }
  .wa5-ctl{ margin-left:auto; display:flex; gap:2px; }
  .wa5-ctl .icon-btn{ padding:3px 7px; font-size:0.72rem; }
  .wa5-ctl .icon-btn[disabled]{ opacity:0.3; cursor:default; }
  .wa5-input{ width:100%; margin-top:8px; }
  .wa5-row.empty .wa5-input{ margin-top:0; }
  .wa5-metrics{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
  .wa5-m{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
  .wa5-m b{ font-family:'Oswald',sans-serif; font-size:1.15rem; }
  .wa5-m span{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
  .wa5-spark{ display:flex; align-items:center; justify-content:center; }
  .wa5-note textarea{ width:100%; resize:vertical; font:inherit; font-size:0.8rem; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--field-bg, var(--surface)); color:var(--text); }
  .wa5-note-txt{ font-size:0.82rem; font-style:italic; color:var(--text-muted); }
  .wa5-suggest{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0 10px; }
  .wa5-chip{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px; padding:3px 10px; font-size:0.76rem; font-weight:600; cursor:pointer; }
  .wa5-chip:hover{ border-color:var(--accent); color:var(--accent); }
  @media (max-width:1100px){ .wa5-row{ grid-template-columns:44px 1fr; } .wa5-row > .wa5-metrics, .wa5-row > .wa5-spark, .wa5-row > .wa5-note{ grid-column:2; } .wa5-spark{ justify-content:flex-start; } }

  /* ---- trade analyzer: charts and proof ---- */
  .tr-spark{ width:132px; height:54px; display:block; }
  .tr-card-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
  .tr-mini{ display:flex; gap:14px; margin-top:8px; font-size:0.72rem; color:var(--text-muted); } .tr-mini b{ color:var(--text); font-family:'Oswald',sans-serif; font-size:0.95rem; }
  .tr-verdict-main{ flex:1; min-width:240px; }
  .tr-headline{ font-family:'Oswald',sans-serif; font-size:1.35rem; font-weight:700; letter-spacing:0.01em; }
  .tr-nums{ display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:6px; font-size:0.82rem; color:var(--text-muted); } .tr-nums b{ color:var(--text); font-family:'Oswald',sans-serif; font-size:1rem; } .tr-nums .d-up b{ color:var(--good); } .tr-nums .d-dn b{ color:var(--danger); }
  .tr-gauge{ margin:-4px 0 16px; }
  .tr-gauge-track{ position:relative; display:flex; height:14px; border-radius:999px; overflow:hidden; border:1px solid var(--border); }
  .tr-gauge-track i{ display:block; height:100%; } .tr-gauge-track .z-bad{ flex:0 0 45%; background:var(--danger-bg); } .tr-gauge-track .z-even{ flex:0 0 10%; background:var(--surface-2); border-left:1px solid var(--border); border-right:1px solid var(--border); } .tr-gauge-track .z-good{ flex:1; background:var(--good-bg); }
  .tr-gauge-track b{ position:absolute; top:-3px; width:6px; height:20px; margin-left:-3px; border-radius:3px; background:var(--accent); box-shadow:0 0 0 2px var(--surface); }
  .tr-gauge-labels{ display:flex; justify-content:space-between; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); margin-top:5px; }
  .tr-chart{ border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:14px 16px; margin-bottom:14px; min-width:0; }
  .tr-chart h4{ margin:0 0 10px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:0.85rem; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
  .tr-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .tr-two .tr-chart{ margin-bottom:14px; }
  @media (max-width:1000px){ .tr-two{ grid-template-columns:1fr; } }
  .tr-why{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
  .tr-why li{ display:flex; gap:10px; align-items:flex-start; font-size:0.9rem; line-height:1.4; }
  .tr-why li i{ font-style:normal; font-size:0.7rem; margin-top:4px; width:16px; flex-shrink:0; text-align:center; }
  .tr-why li.good i{ color:var(--good); } .tr-why li.bad i{ color:var(--danger); }
  .tr-vrow{ display:grid; grid-template-columns:72px 1fr 64px; gap:10px; align-items:center; margin-bottom:8px; }
  .tr-vlabel{ font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
  .tr-vbar{ display:flex; gap:2px; height:30px; } .tr-seg{ display:flex; align-items:center; justify-content:center; border-radius:6px; color:#fff; font-size:0.7rem; font-weight:700; overflow:hidden; white-space:nowrap; min-width:3px; text-shadow:0 1px 2px rgba(0,0,0,0.4); }
  .tr-vtotal{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.2rem; text-align:right; } .tr-vtotal.good{ color:var(--good); }
  .tr-legend{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:8px; font-size:0.72rem; color:var(--text-muted); } .tr-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
  .tr-key.give{ background:var(--text-muted); } .tr-key.get{ background:var(--accent); }
  .tr-svg{ width:100%; height:auto; display:block; }
  .tr-grid{ stroke:var(--border); stroke-width:1; } .tr-svg .pm-txt{ fill:var(--text-muted); font-size:10px; }
  .tr-line{ fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } .tr-line.give{ stroke:var(--text-muted); stroke-dasharray:6 4; } .tr-line.get{ stroke:var(--accent); }
  .tr-dot.give{ fill:var(--text-muted); } .tr-dot.get{ fill:var(--accent); }
  .tr-end{ font-size:11px; font-weight:700; } .tr-end.give{ fill:var(--text-muted); } .tr-end.get{ fill:var(--accent); }
  .tr-gap.good{ fill:var(--good); opacity:0.16; } .tr-gap.bad{ fill:var(--danger); opacity:0.16; }
  .tr-bar.give{ fill:var(--text-muted); opacity:0.75; } .tr-bar.get{ fill:var(--accent); }
  table.tr-tape{ width:100%; border-collapse:collapse; font-size:0.84rem; }
  .tr-tape th{ text-align:left; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); padding:6px 8px; border-bottom:1px solid var(--border); }
  .tr-tape td{ padding:7px 8px; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align:middle; }
  .tr-cat{ font-weight:600; }
  .tr-barwrap{ display:flex; align-items:center; gap:8px; min-width:150px; } .tr-num{ width:52px; font-family:'Oswald',sans-serif; font-size:0.95rem; text-align:right; flex-shrink:0; }
  .tr-hbar{ display:block; height:10px; border-radius:5px; background:var(--text-muted); opacity:0.45; } .tr-hbar.get{ background:var(--accent); opacity:0.55; } .tr-hbar.win{ opacity:1; }
  .tr-edge{ font-weight:800; font-size:0.78rem; white-space:nowrap; color:var(--text-muted); } .tr-edge.good{ color:var(--good); } .tr-edge.bad{ color:var(--danger); }

  /* ---- homepage: Top 5 Adds strip ---- */
  .h5-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
  @media (max-width:1100px){ .h5-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media (max-width:700px){ .h5-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:440px){ .h5-grid{ grid-template-columns:1fr; } }
  .h5-card{ display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); cursor:pointer; transition:transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; }
  .h5-card:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 8px 22px rgba(0,0,0,0.28); }
  .h5-card:first-child{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
  .h5-top{ display:flex; align-items:center; gap:9px; min-width:0; }
  .h5-rank{ font-family:'Oswald',sans-serif; font-weight:800; font-size:1.5rem; color:var(--accent); line-height:1; width:20px; text-align:center; flex-shrink:0; }
  .h5-hs{ width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:top; background:#fff; border:2px solid var(--accent); flex-shrink:0; }
  .h5-who{ min-width:0; }
  .h5-name{ font-weight:800; font-size:0.95rem; line-height:1.2; overflow-wrap:anywhere; }
  .h5-sub{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:3px; font-size:0.7rem; color:var(--text-muted); }
  .h5-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding-top:8px; border-top:1px solid var(--border); text-align:center; }
  .h5-stats b{ display:block; font-family:'Oswald',sans-serif; font-size:1.1rem; }
  .h5-stats span{ font-size:0.58rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
  .h5-note{ font-size:0.76rem; font-style:italic; color:var(--text-muted); line-height:1.35; }
  /* mobile: long tier-board chips (name + weather + status) were wider than the screen and pushed the page sideways */
  .tb-drop{ min-width:0; } .tb-chip{ max-width:100%; flex-wrap:wrap; min-width:0; }
  /* ---- DFS: floor/ceiling board, live waiver tables ---- */
  .fc-top{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
  .fc-col h3{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.03em; font-size:0.85rem; color:var(--text-muted); margin:0 0 10px; }
  .fc-cards{ display:flex; flex-direction:column; gap:8px; }
  .fc-card{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--surface-2); display:flex; align-items:center; flex-wrap:wrap; gap:2px 14px; }
  .fc-card-name{ font-weight:600; flex:1; min-width:140px; }
  .fc-card-num{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.3rem; color:var(--accent); }
  #wa-adds td, #wa-drops td{ vertical-align:middle; }

  /* ---- DFS Player Pool: Optimize Lineup is the only button that belongs here -- the pool already
     auto-loads on first visit and auto-refreshes itself when stale (see ensureFreshSlate), so the manual
     Load/Clear buttons are redundant clutter, not a second way in. ---- */
  #pool-load-slate, #pool-clear-btn, button[onclick="loadWeek2()"]{ display:none !important; }

  /* ---- site-wide score ticker: every real game this week, scrolling continuously, visible on every
     view (not just Home) -- fixed to the bottom so it never displaces page content. Built from the same
     real SCHEDULE/TEAM_LOGOS data as the rest of the site in renderScoreTicker() (snippet2.js). ---- */
  body{ padding-bottom:40px; }
  .score-ticker{
    position:fixed; left:0; right:0; bottom:0; z-index:21; height:40px;
    background:#000; border-top:1px solid var(--border); overflow:hidden;
    display:flex; align-items:center;
    /* The ticker scrolls continuously, so whatever game is mid-transit at either edge gets clipped
       mid-logo/mid-number at a hard line -- fade both edges to black instead so that reads as "more
       content, keep watching" rather than a broken/cut-off rendering glitch. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  .score-ticker-track{ display:flex; align-items:center; white-space:nowrap; will-change:transform; }
  @media (prefers-reduced-motion: no-preference){
    .score-ticker-track{ animation-name:scoreTickerScroll; animation-timing-function:linear; animation-iteration-count:infinite; }
    .score-ticker:hover .score-ticker-track{ animation-play-state:paused; }
    @keyframes scoreTickerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  }
  @media (prefers-reduced-motion: reduce){
    .score-ticker{ overflow-x:auto; }
  }
  .ticker-item{
    display:inline-flex; align-items:center; gap:7px; padding:0 18px; height:40px;
    border-right:1px solid var(--border); flex-shrink:0;
  }
  /* phones: the big sticky header slides away while you scroll down and returns the moment you scroll up (see snippet-ticker.js) */
  @media (max-width:640px){
    header.topbar{ transition:transform .22s ease; will-change:transform; }
    header.topbar.tb-hide{ transform:translateY(-100%); }
  }
  @media (prefers-reduced-motion:reduce){ header.topbar{ transition:none; } }
  /* touch feel: taps register instantly (no double-tap-zoom wait) and buttons don't flash grey on iOS/Android */
  button, a, [role="tab"], select, summary, label{ touch-action:manipulation; }
  *{ -webkit-tap-highlight-color:transparent; }
  .ticker-item img{ height:22px; width:22px; object-fit:contain; flex-shrink:0; }
  .ticker-team{ font-family:'Oswald',sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:0.02em; color:var(--text); }
  .ticker-at{ color:var(--text-muted); font-size:0.72rem; }
  .ticker-meta{ color:var(--text-muted); font-size:0.74rem; margin-left:6px; white-space:nowrap; }
  .ticker-odds{ color:var(--accent); font-weight:700; font-size:0.78rem; margin-left:8px; white-space:nowrap; }
  .ticker-score{ font-family:'Oswald',sans-serif; font-weight:700; font-size:0.9rem; color:var(--text-muted); margin-left:-2px; }
  .ticker-score.win{ color:var(--text); }
  .ticker-final{ color:var(--accent); font-weight:700; font-size:0.7rem; letter-spacing:0.06em; margin-left:6px; white-space:nowrap; }
  /* sport tag that opens each block of the strip (NFL | NHL | NBA) */
  .ticker-sport{ display:inline-flex; align-items:center; height:40px; padding:0 4px 0 14px; flex-shrink:0; border-right:1px solid var(--border); }
  .ticker-sport span{ font-family:'Oswald',sans-serif; font-weight:700; font-size:0.7rem; letter-spacing:0.14em; padding:3px 9px; border-radius:6px; background:var(--accent); color:#000; }
  .ticker-sport.nhl span{ background:#4aa8ff; } .ticker-sport.nba span{ background:#ff8a3d; }
  .ticker-final.live{ color:#ff5a4a; } .ticker-item-live .ticker-score{ color:var(--text); }
  @media (max-width:640px){
    .ticker-sport{ height:36px; padding:0 2px 0 10px; }
    body{ padding-bottom:36px; }
    .score-ticker{ height:36px; }
    .ticker-item{ height:36px; padding:0 12px; gap:5px; }
    .ticker-item img{ height:19px; width:19px; }
  }

  /* ---- Advanced + TD Matchups "stat lines": one card per category, headshot player cells, and a bar behind
     every number sized against the best on that team so leaders read at a glance ---- */
  .sl-team-head{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-family:'Oswald',sans-serif; font-size:1rem !important; letter-spacing:0.04em; color:var(--text) !important; }
  .sl-card{ border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden; margin-bottom:16px; box-shadow:0 2px 10px rgba(0,0,0,0.18); }
  .sl-card-head{ display:flex; align-items:center; gap:9px; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .sl-card-head h5{ margin:0; font-family:'Oswald',sans-serif; font-size:0.86rem; letter-spacing:0.07em; text-transform:uppercase; }
  .sl-card-head .sl-ico{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--field); font-size:0.85rem; flex-shrink:0; }
  .sl-card-head .hint{ margin:0 0 0 auto; font-size:0.7rem; }
  .sl-card .table-wrap{ margin:0; }
  table.stat-lines{ width:100%; min-width:0; border-collapse:collapse; font-size:0.86rem; }
  .stat-lines th{ padding:9px 10px; font-size:0.64rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); font-weight:700; text-align:right; white-space:nowrap; border-bottom:1px solid var(--border); background:var(--surface); }
  .stat-lines th:first-child{ text-align:left; padding-left:14px; }
  .stat-lines th[onclick]:hover{ color:var(--text); }
  .stat-lines td{ padding:8px 10px; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align:middle; font-variant-numeric:tabular-nums; background:transparent; border-top:none; }
  .stat-lines tbody tr:last-child td{ border-bottom:none; }
  .stat-lines tr.sl-row{ cursor:pointer; transition:background-color 0.12s ease; }
  .stat-lines tr.sl-row:hover td{ background:color-mix(in srgb, var(--surface-2) 70%, transparent); }
  .stat-lines tr.sl-row td:first-child{ border-left:3px solid var(--pc, #555); border-radius:0; }
  .stat-lines tr.sl-row.sl-open td{ background:var(--surface-2); }
  .stat-lines tr.pos-QB{ --pc:#4F74C9; } .stat-lines tr.pos-RB{ --pc:#3FA46A; } .stat-lines tr.pos-WR{ --pc:#D9961A; } .stat-lines tr.pos-TE{ --pc:#9B6AD0; }
  .sl-pwrap{ display:flex; align-items:center; gap:10px; min-width:150px; }
  .sl-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:top; background:var(--surface-2); flex-shrink:0; box-shadow:0 0 0 2px var(--pc, #555); }
  .sl-initials{ display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:800; color:var(--text-muted); }
  .sl-pname{ min-width:0; line-height:1.25; }
  .sl-pname .clickable-name{ font-weight:700; }
  .sl-sub{ display:flex; align-items:center; gap:7px; margin-top:2px; font-size:0.7rem; color:var(--text-muted); }
  .sl-sub .pill{ padding:1px 7px; font-size:0.62rem; }
  td.sl-bar{ background-image:linear-gradient(90deg, color-mix(in srgb, var(--pc, #888) 22%, transparent) var(--bar), transparent var(--bar)); background-repeat:no-repeat; background-size:100% 56%; background-position:left center; }
  td.sl-bar span{ position:relative; }
  td.sl-lead span{ font-weight:800; color:var(--text); }
  td.sl-null{ color:var(--text-muted); }
  td.sl-chev{ color:var(--text-muted); font-size:0.7rem; width:28px; text-align:center; }
  .stat-lines tr.sl-open + tr td{ background:var(--surface-2) !important; padding:14px 16px; border-left:3px solid var(--pc, #555); }
  /* Away and home side by side on wide screens (no more scrolling past one whole team to reach the other);
     stacked below that so each table keeps the room it needs. */
  @media (min-width:900px){
    .game-page-cols{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:18px; }
    .stat-lines td, .stat-lines th{ padding-left:4px; padding-right:4px; }
    .stat-lines th:first-child{ padding-left:10px; }
    td.sl-chev{ width:20px; padding-left:2px; padding-right:6px; }
    .sl-pwrap{ min-width:0; gap:8px; }
    .sl-avatar{ width:30px; height:30px; }
    .stat-lines th{ white-space:normal; line-height:1.15; font-size:0.58rem; letter-spacing:0.03em; }
    .stat-lines{ font-size:0.8rem; }
    .sl-card-head .hint{ display:none; }
    .game-page-col .dvp-matrix{ border-spacing:3px; }
    .game-page-col .dvp-matrix th{ padding:3px 2px; font-size:0.56rem; letter-spacing:0; }
    .game-page-col .dvp-cell{ min-width:0; padding:5px 1px; border-radius:7px; }
    .game-page-col .dvp-cell-val{ font-size:0.82rem; }
    .game-page-col .dvp-cell-rank{ font-size:0.54rem; }
  }
  @media (min-width:1400px){
    .stat-lines td, .stat-lines th{ padding-left:8px; padding-right:8px; }
    .sl-pwrap{ min-width:140px; }
    .sl-avatar{ width:36px; height:36px; }
    .stat-lines{ font-size:0.86rem; }
    .sl-card-head .hint{ display:block; }
    .game-page-col .dvp-matrix{ border-spacing:4px; }
    .game-page-col .dvp-matrix th{ padding:4px 6px; font-size:0.62rem; }
    .game-page-col .dvp-cell{ min-width:56px; padding:7px 4px; border-radius:9px; }
    .game-page-col .dvp-cell-val{ font-size:0.92rem; }
    .game-page-col .dvp-cell-rank{ font-size:0.6rem; }
  }
  @media (max-width:640px){ .sl-pwrap{ min-width:120px; } .sl-avatar{ width:30px; height:30px; } .stat-lines td, .stat-lines th{ padding-left:7px; padding-right:7px; } }

  .pm-alt-lines{ margin:8px 0 2px; font-size:0.8rem; }
  .pm-alt-lines summary{ cursor:pointer; color:var(--text-muted); font-weight:600; padding:4px 0; }
  .pm-alt-lines[open] summary{ color:var(--text); }

  /* ---- brand: real logo, real team logos, help/about pages ---- */
  .brand-logo{ height:28px; width:auto; display:block; }
  .team-badge.has-logo{ background:#fff; padding:3px; box-shadow: 0 0 0 2px var(--accent), 0 1px 4px rgba(0,0,0,0.45); }
  .team-badge.lg.has-logo{ padding:4px; }
  .team-badge.has-logo img{ width:100%; height:100%; object-fit:contain; border-radius:0; display:block; }
  /* keep the real logo squarely on the text baseline wherever it sits next to a name/label -- DFS Player Pool,
     Best Value, and the lineup card all pair a badge with text inline, so give every pairing the same recipe. */
  .team-cell{ min-height:30px; }
  .team-cell input{ height:30px; padding:4px 8px; }
  td .team-badge, .lineup-row .team-badge{ vertical-align:middle; }
  .lineup-row .team-badge{ align-self:center; }
  .app-icon-mark{ height:22px; width:22px; border-radius:6px; vertical-align:-5px; margin-right:6px; }
  .soon-badge{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:999px; background:var(--surface-2); color:var(--muted); margin-left:4px; vertical-align:middle; }

  /* ---- homepage hero: logo, free-tier callouts, social entry buttons ---- */
  .hero-logo{ height:120px; width:auto; display:block; margin:0 auto 18px; }
  .free-tier-badge{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.85); font-size:0.82rem; padding:8px 16px; border-radius:999px; margin-bottom:24px; }
  .free-tier-badge b{ color:var(--accent); }
  .free-tier-badge .dot{ opacity:0.4; }
  .social-login-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; justify-content:center; }
  .social-btn{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.3); color:#fff; padding:9px 16px; border-radius:8px; font-size:0.86rem; font-weight:600; cursor:pointer; transition:background-color 0.12s ease, border-color 0.12s ease; }
  .social-btn:hover{ background:rgba(255,255,255,0.16); border-color:#fff; }
  .social-btn .social-glyph{ font-size:1rem; line-height:1; width:18px; text-align:center; flex-shrink:0; }
  .email-gate-form{ display:flex; gap:8px; flex-wrap:wrap; width:100%; justify-content:center; }
  .email-gate-form input{ flex:1; min-width:220px; max-width:320px; padding:10px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.08); color:#fff; font-size:0.9rem; }
  .email-gate-form input::placeholder{ color:rgba(255,255,255,0.5); }
  .email-gate-form input:focus{ outline:none; border-color:var(--accent); }
  @media (max-width: 640px){ .hero-logo{ height:76px; } .social-login-row{ flex-direction:column; width:100%; } .free-tier-badge{ flex-direction:column; gap:4px; } .free-tier-badge .dot{ display:none; } }

  /* ---- consumer mode: only the site owner can upload rosters/CSVs or hand-edit pool & rankings rows ---- */
  body.consumer-mode #pool-editor-tools,
  body.consumer-mode #pool-clear-btn,
  body.consumer-mode #rankings-editor-tools,
  body.consumer-mode #rankings-add-form-wrap,
  body.consumer-mode #rankings-owner-toolbar,
  body.consumer-mode #rosters-file-input,
  body.consumer-mode .rankings-drag-handle,
  body.consumer-mode #tb-sortproj,
  body.consumer-mode .tb-tsort,
  body.consumer-mode .rk-tsort,
  body.consumer-mode #tb-sync,
  body.consumer-mode #tb-push,
  body.consumer-mode #tb-copy,
  body.consumer-mode #tb-png,
  body.consumer-mode #tb-story,
  body.consumer-mode #tb-clear{ display:none !important; }
  body.consumer-mode #pool-table select,
  body.consumer-mode #pool-table input{ pointer-events:none; background:transparent; border:none; color:inherit; appearance:none; -webkit-appearance:none; }
  body.consumer-mode #pool-table .icon-btn{ display:none; }
  body.consumer-mode .tb-chip{ cursor:default; }
  .consumer-note{ font-size:0.78rem; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-bottom:12px; display:none; }
  body.consumer-mode .consumer-note{ display:block; }

  .about-hero{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:8px; }
  .about-hero img{ height:56px; width:auto; }
  .help-toc{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
  .help-toc a{ text-decoration:none; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:6px 12px; border-radius:16px; font-size:0.82rem; font-weight:600; }
  .help-toc a:hover{ border-color:var(--field); }
  .help-section{ border-top:1px solid var(--border); padding-top:16px; margin-top:16px; }
  .help-section:first-of-type{ border-top:none; margin-top:0; padding-top:0; }
  .help-section h3{ font-family:'Oswald',sans-serif; font-size:1.05rem; margin-bottom:8px; color:var(--field); }
  .help-section p{ margin:0 0 8px; color:var(--text-muted); font-size:0.9rem; max-width:74ch; }
  .help-section ul{ margin:0 0 8px; padding-left:20px; color:var(--text-muted); font-size:0.9rem; }
  .help-section li{ margin-bottom:4px; }
  .source-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:10px; }
  .source-card{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--surface-2); }
  .source-card b{ display:block; font-family:'Oswald',sans-serif; margin-bottom:4px; }
  .source-card span{ font-size:0.8rem; color:var(--text-muted); }
  footer.foot .foot-brand{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px; }
  footer.foot .foot-brand img{ height:18px; width:auto; opacity:0.85; }
  footer.foot .foot-links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
  footer.foot .foot-links button{ background:none; border:none; color:var(--text-muted); font-size:0.78rem; cursor:pointer; text-decoration:underline; text-decoration-style:dotted; padding:0; }
  footer.foot .foot-links button:hover{ color:var(--field); }

  /* ---- sitewide player search (header) ---- */
  .site-search{ position:relative; flex:1 1 220px; max-width:280px; }
  .site-search input{ width:100%; padding:8px 12px; border-radius:20px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:0.84rem; }
  .site-search input:focus{ outline:none; border-color:var(--field); }
  .site-search-results{ display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-md); max-height:340px; overflow-y:auto; z-index:50; }
  .site-search-row{ display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; font-size:0.85rem; }
  .site-search-row:hover{ background:var(--surface-2); }
  .site-search-empty{ padding:12px; color:var(--text-muted); font-size:0.85rem; }
  @media (max-width:640px){ .site-search{ order:99; flex-basis:100%; max-width:none; } }

  /* ---- DFS Player Pool: cleaner, less spreadsheet-y ---- */
  #pool-table{ font-size:0.84rem; }
  #pool-table th{ padding:10px 10px; font-size:0.72rem; }
  #pool-table td{ padding:9px 10px; }
  #pool-table tbody tr:nth-child(even){ background:rgba(255,255,255,0.02); }
  #pool-table tbody tr:hover{ background:var(--surface-2); }
  #pool-table .clickable-name{ font-weight:600; }
  #pool-table input[type=number]::-webkit-inner-spin-button,
  #pool-table input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
  #pool-table input[type=number]{ -moz-appearance:textfield; }
  #pool-table .status-btn{ border-radius:6px; }
  body.consumer-mode #pool-table td{ vertical-align:middle; }
  body.consumer-mode #pool-table .team-cell{ gap:8px; }

  /* Mobile: a 13-column table can't fit a 375px screen no matter the font size. Keep the columns you need
     to make a quick call (pos/name/team/opp/injury/salary/proj/lock) always visible; the more analytical
     ones (spread/total/matchup/usage/adj.pts) are still there via horizontal scroll, not lost. */
  @media (max-width:640px){
    /* Was a solid-color ::before/::after block painted on top of whichever column happened to sit at the
       scroll boundary -- fine on the dense Player Pool table this was designed for (narrow columns, only
       ever clips a sliver), but on wide-celled tables like the DVP grid (each cell ~70px, a big bold
       number) that same 22px opaque block ate a third of a cell and looked like missing/broken data, not
       a scroll hint. A mask-image fades the table's own content to transparent at both edges instead of
       painting over it -- a number at the boundary now fades out smoothly rather than getting chopped by
       a hard rectangle, and it never looks like data went missing. */
    .table-wrap{
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }
    #pool-table th:nth-child(8), #pool-table td:nth-child(8),
    #pool-table th:nth-child(9), #pool-table td:nth-child(9),
    #pool-table th:nth-child(10), #pool-table td:nth-child(10),
    #pool-table th:nth-child(11), #pool-table td:nth-child(11),
    #pool-table th:nth-child(12), #pool-table td:nth-child(12){ display:none; }
  }

  .plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; align-items:stretch; }
  .plan-grid .pricing-card{ max-width:none; margin:0; display:flex; flex-direction:column; }
  .plan-grid .pricing-card.featured{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow-md); }
  .pricing-plan-name{ font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; font-size:1rem; color:var(--field); margin-bottom:10px; }
  .plan-grid .pricing-list{ flex:1; }

  /* ---- homepage visual polish pass ---- */
  .home-hero{
    background:
      radial-gradient(ellipse 60% 50% at 15% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
      radial-gradient(ellipse 50% 40% at 100% 110%, color-mix(in srgb, var(--field) 14%, transparent), transparent 65%),
      linear-gradient(180deg, #05070a 0%, #060a08 100%);
    border:1px solid rgba(255,255,255,0.06);
  }
  .home-hero::after{
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
    font-size:0.72rem; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding:6px 14px; border-radius:999px;
    margin-bottom:16px;
  }
  .home-hero h1{
    background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.82) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-size:2.3rem;
  }
  .home-hero .btn.accent{
    padding:14px 30px; font-size:0.92rem;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .home-hero .btn.accent:hover:not(:disabled){
    box-shadow: 0 0 0 1px var(--accent), 0 10px 34px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .hero-stats{ gap:0; }
  .hero-stat{ padding:0 28px; position:relative; }
  .hero-stat + .hero-stat::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:rgba(255,255,255,0.14); }

  .feature-grid{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
  .feature-card{ position:relative; overflow:hidden; border-color:rgba(255,255,255,0.08); }
  .feature-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--accent), transparent);
    opacity:0; transition:opacity 0.15s ease;
  }
  .feature-card:hover::before{ opacity:1; }
  .feature-card:hover{ box-shadow:0 10px 28px rgba(0,0,0,0.35), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); border-color:transparent; }
  .feature-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:10px;
    background:color-mix(in srgb, var(--accent) 14%, transparent);
    font-size:1.2rem; margin-bottom:12px;
  }

  .plan-grid .pricing-top{ flex-wrap:wrap; row-gap:8px; }
  .plan-grid .pricing-card.featured{ position:relative; }
  .plan-grid .pricing-card.featured::before{
    content:'Most Popular'; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    background:var(--accent); color:var(--accent-ink); font-family:'Oswald',sans-serif; font-weight:700;
    font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; padding:4px 14px; border-radius:999px;
    box-shadow:0 2px 10px rgba(0,0,0,0.35);
  }

  #view-home .panel-head h2{ position:relative; padding-left:14px; }
  #view-home .panel-head h2::before{
    content:''; position:absolute; left:0; top:2px; bottom:2px; width:3px; border-radius:2px; background:var(--accent);
  }

  @media (max-width:640px){
    .hero-stat + .hero-stat::before{ display:none; }
    .hero-stats{ gap:18px; }
    .home-hero h1{ font-size:1.5rem; }
  }

  /* ---- homepage motion pass: load-in choreography, scroll reveal, small live touches ----
     Everything here is wrapped in prefers-reduced-motion so a visitor who's asked for less motion gets
     the finished, fully-visible layout immediately with no animation at all. */
  @media (prefers-reduced-motion: no-preference){
    @keyframes heroFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
    .home-hero-text > *{ opacity:0; animation: heroFadeUp 0.7s cubic-bezier(.16,.84,.44,1) forwards; }
    .home-hero-text > *:nth-child(1){ animation-delay:0.02s; }
    .home-hero-text > *:nth-child(2){ animation-delay:0.10s; }
    .home-hero-text > *:nth-child(3){ animation-delay:0.18s; }
    .home-hero-text > *:nth-child(4){ animation-delay:0.26s; }
    .home-hero-text > *:nth-child(5){ animation-delay:0.34s; }
    .home-hero-text > *:nth-child(6){ animation-delay:0.42s; }
    .home-hero-text > *:nth-child(7){ animation-delay:0.50s; }
    .home-hero-text > *:nth-child(8){ animation-delay:0.50s; }
    .home-hero-text > *:nth-child(9){ animation-delay:0.58s; }

    @keyframes ctaPulse{
      0%,100%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent); }
      50%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 68%, transparent), 0 10px 36px color-mix(in srgb, var(--accent) 55%, transparent); }
    }
    .home-hero .btn.accent{ animation: heroFadeUp 0.7s cubic-bezier(.16,.84,.44,1) forwards, ctaPulse 2.6s ease-in-out 0.9s infinite; }

    /* scroll-reveal: panels (and their feature cards, staggered) fade/slide up once as they enter view --
       toggled by a tiny IntersectionObserver in snippet2.js adding .in-view the first time each is seen */
    #view-home .panel{ opacity:0; transform:translateY(28px); transition:opacity 0.7s cubic-bezier(.16,.84,.44,1), transform 0.7s cubic-bezier(.16,.84,.44,1); }
    #view-home .panel.in-view{ opacity:1; transform:none; }
    .feature-card{ opacity:0; transform:translateY(16px); transition:opacity 0.5s ease, transform 0.5s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
    #view-home .panel.in-view .feature-card{ opacity:1; transform:none; }
    #view-home .panel.in-view .feature-card:hover{ transform:translateY(-2px); }
    #view-home .panel.in-view .feature-card:nth-child(1){ transition-delay:0.04s; }
    #view-home .panel.in-view .feature-card:nth-child(2){ transition-delay:0.09s; }
    #view-home .panel.in-view .feature-card:nth-child(3){ transition-delay:0.14s; }
    #view-home .panel.in-view .feature-card:nth-child(4){ transition-delay:0.19s; }
    #view-home .panel.in-view .feature-card:nth-child(5){ transition-delay:0.24s; }
    #view-home .panel.in-view .feature-card:nth-child(6){ transition-delay:0.29s; }

    /* a fresh coat on every view switch, sitewide -- a quick fade instead of a hard cut */
    @keyframes viewFadeIn{ from{ opacity:0; } to{ opacity:1; } }
    section.view.active{ animation: viewFadeIn 0.3s ease; }

    .btn{ transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; }
    .btn:active:not(:disabled){ transform:scale(0.97); }
  }

  .live-dot{
    display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent);
    margin-right:7px; vertical-align:middle; position:relative; top:-1px;
  }
  @media (prefers-reduced-motion: no-preference){
    .live-dot{ animation: liveDotPulse 1.8s ease-out infinite; }
    @keyframes liveDotPulse{
      0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
      70%{ box-shadow:0 0 0 8px rgba(0,0,0,0); }
      100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); }
    }
  }

  /* ================= homepage + header redesign: stronger, more "real sports media brand" look =================
     Nav goes from pill-buttons to plain text-links with an underline, the logo gets more room, the sign-in
     pill becomes a real "Start Free" CTA when signed out, and the hero becomes a real two-column layout
     (copy left, photo right) instead of one centered block. Everything below is additive/override, loaded
     after the rest of the stylesheet, so it wins the cascade without needing to touch the base rules. */

  /* ---- header ---- */
  .brand-logo{ height:34px; }
  .social-links{ display:none; }
  header.topbar{ gap:18px; }
  nav.tabs{ background:transparent; padding:0; gap:2px; flex:1 1 auto; justify-content:center; }
  nav.tabs button{
    padding:10px 15px; border-radius:0; text-transform:none; font-family:'Inter',sans-serif;
    font-weight:600; letter-spacing:normal; font-size:0.92rem; color:var(--text-muted);
    border-bottom:2px solid transparent;
  }
  nav.tabs button:hover:not([aria-selected="true"]){ background:transparent; color:#fff; }
  nav.tabs button[aria-selected="true"]{ background:transparent; color:#fff; box-shadow:none; border-bottom-color:var(--accent); }
  .site-search{ flex:0 1 190px; }
  .site-search input{ border-radius:999px; background:var(--surface-2); font-size:0.82rem; padding:8px 16px; }
  #trial-pill{ cursor:pointer; }
  .trial-pill.start-cta{
    background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
    font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.02em;
    padding:10px 20px; border-radius:8px; font-size:0.85rem;
  }
  .trial-pill.start-cta:hover{ filter:brightness(1.08); }
  @media (max-width:900px){ nav.tabs{ justify-content:flex-start; } }

  /* ---- hero: two columns, real photo on the right ---- */
  .home-hero{ display:flex; align-items:stretch; padding:0; text-align:left; }
  .home-hero::after{ display:none; }
  .home-hero-text{
    flex:1 1 54%; max-width:none; margin:0; align-items:flex-start; text-align:left;
    padding:60px 48px;
  }
  .home-hero h1{ text-align:left; }
  .home-lede{ text-align:left; margin:0 0 26px; max-width:46ch; }
  .hero-accent-line{ color:var(--accent); }
  .home-hero .btn-row{ justify-content:flex-start; }
  .home-hero-media{ flex:1 1 46%; position:relative; overflow:hidden; background:#05070a; }
  @media (max-width:900px){
    .home-hero{ flex-direction:column; }
    .home-hero-text{ padding:40px 24px 32px; align-items:center; text-align:center; }
    .home-hero h1, .home-lede{ text-align:center; }
    .home-hero .btn-row{ justify-content:center; }
    .home-hero-media{ min-height:260px; width:100%; }
  }

  /* ---- featured-game promo: real next-game matchup (teams, colors, logos, spread/total) rendered
     into .home-hero-media by renderFeaturedGameHero() in snippet2.js -- always the real next game on the
     real schedule, so this never goes stale the way a hardcoded photo/graphic would week to week. ---- */
  .matchup-promo{ position:absolute; inset:0; display:flex; }
  .matchup-side{ flex:1; display:flex; align-items:center; justify-content:center; position:relative; }
  .matchup-side.away{ background-image:radial-gradient(circle at 35% 50%, rgba(255,255,255,0.22), transparent 62%); }
  .matchup-side.home{ background-image:radial-gradient(circle at 65% 50%, rgba(255,255,255,0.22), transparent 62%); }
  .matchup-side img{ width:72%; max-width:230px; height:auto; filter:drop-shadow(0 10px 24px rgba(0,0,0,0.6)); }
  .matchup-vs{
    position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); z-index:2;
    font-family:'Oswald',sans-serif; font-weight:800; font-size:1.5rem; color:#fff; letter-spacing:0.02em;
    background:rgba(0,0,0,0.55); border:2px solid rgba(255,255,255,0.35); border-radius:50%;
    width:60px; height:60px; display:flex; align-items:center; justify-content:center;
    text-shadow:0 2px 10px rgba(0,0,0,0.7);
  }
  .matchup-info{
    position:absolute; left:0; right:0; bottom:0; padding:18px 18px 16px;
    background:linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 55%, transparent 100%);
    text-align:center; color:#fff;
  }
  .matchup-date{
    font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    font-size:0.86rem; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,0.8);
  }
  .matchup-odds{
    font-family:'Oswald',sans-serif; font-weight:800; font-size:1.4rem; margin-top:6px; color:var(--accent);
    text-shadow:0 1px 6px rgba(0,0,0,0.8);
  }
  .matchup-odds .dot{ margin:0 12px; opacity:0.6; color:#fff; }

  /* ---- trust strip: real feature row under the hero ---- */
  .home-trust-strip{
    display:flex; flex-wrap:wrap; margin:0 0 22px; padding:20px 32px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  }
  .trust-item{ display:flex; align-items:center; gap:12px; flex:1 1 190px; padding:6px 20px; position:relative; }
  .trust-item + .trust-item::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--border); }
  .trust-icon{ font-size:1.5rem; flex-shrink:0; }
  .trust-title{ font-family:'Oswald',sans-serif; font-weight:600; font-size:0.9rem; }
  .trust-sub{ color:var(--text-muted); font-size:0.76rem; margin-top:2px; }
  @media (max-width:900px){ .trust-item + .trust-item::before{ display:none; } .home-trust-strip{ padding:16px 20px; } }

  /* ---- section headers: eyebrow + bigger, bolder title ---- */
  .section-eyebrow{
    font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
    font-size:0.72rem; color:var(--accent); margin-bottom:6px;
  }
  #view-home .panel-head h2{ font-size:1.4rem; text-transform:uppercase; letter-spacing:0.01em; padding-left:0; }
  #view-home .panel-head h2::before{ display:none; }
  #pricing-panel > h2{ font-size:1.4rem; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:10px; }

  /* ---- tools grid: clickable cards straight into the real tool, one clean row on desktop ---- */
  #home-tools-panel .feature-card{ cursor:pointer; }
  #home-tools-panel .feature-grid{ grid-template-columns:repeat(6, 1fr); gap:14px; }
  @media (max-width:1100px){ #home-tools-panel .feature-grid{ grid-template-columns:repeat(3, 1fr); } }
  @media (max-width:640px){ #home-tools-panel .feature-grid{ grid-template-columns:1fr; } }

  /* ---- blog preview: real vertical cards with image/category/excerpt/date ---- */
  #home-blog-preview{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
  #home-blog-preview .blog-preview-card{ flex-direction:column; align-items:stretch; border:1px solid var(--border); border-radius:12px; overflow:hidden; padding:0; gap:0; }
  #home-blog-preview .blog-preview-card img,
  #home-blog-preview .blog-preview-noimg{ width:100%; height:140px; object-fit:cover; border-radius:0; border:none; display:block; margin:0; }
  #home-blog-preview .blog-preview-noimg{ display:flex; align-items:center; justify-content:center; font-size:2rem; background:var(--surface-2); }
  #home-blog-preview .blog-preview-body{ padding:14px 16px 16px; }
  #home-blog-preview .ptitle{ display:block; margin:8px 0 6px; }
  #home-blog-preview .pexcerpt{ display:block; color:var(--text-muted); font-size:0.84rem; }
  #home-blog-preview .blog-preview-meta{ margin-top:10px; font-size:0.74rem; color:var(--text-muted); }

  /* ---- blog + pricing combined row ---- */
  .home-blog-pricing-row{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; }
  .home-blog-pricing-row > .panel{ margin-bottom:0; height:100%; }
  @media (max-width:1000px){ .home-blog-pricing-row{ grid-template-columns:1fr; } }

  /* ---- pricing panel: intro + checklist, then the two real plan cards side by side ---- */
  .pricing-check-list{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:8px; font-size:0.86rem; }
  .pricing-check-list li{ padding-left:22px; position:relative; }
  .pricing-check-list li::before{ content:'✓'; position:absolute; left:0; color:var(--good); font-weight:700; }
  .pricing-cards-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .pricing-cards-row .pricing-card{ max-width:none; margin:0; padding:16px; }
  .pricing-cards-row .pricing-plan-name{ margin-bottom:8px; font-size:0.88rem; }
  .pricing-cards-row .pricing-amount{ font-size:1.5rem; }
  .pricing-cards-row .pricing-card.featured{ position:relative; }
  .pricing-cards-row .pricing-card.featured::before{
    content:'Best Value'; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    background:var(--accent); color:var(--accent-ink); font-family:'Oswald',sans-serif; font-weight:700;
    font-size:0.64rem; letter-spacing:0.06em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
    box-shadow:0 2px 10px rgba(0,0,0,0.35); white-space:nowrap;
  }
  @media (max-width:640px){ .pricing-cards-row{ grid-template-columns:1fr; } }

  /* ---- My Picks (pick'em) ---- */
  .pk-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
  .pk-tile{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
  .pk-tile-label{ font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:700; }
  .pk-tile-val{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.7rem; line-height:1.15; margin-top:2px; }
  .pk-tile-val.good{ color:var(--good); } .pk-tile-val.bad{ color:var(--danger); }
  .pk-tile-sub{ font-size:0.72rem; color:var(--text-muted); margin-top:2px; }
  .pk-weeks{ margin-top:12px; } .pk-weeks summary{ cursor:pointer; color:var(--text-muted); font-weight:600; padding:4px 0; }

  .pk-favbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 8px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; }
  .pk-fav-title{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; font-size:0.8rem; margin-right:4px; }
  .pk-fav-chip{ display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--accent) 16%, var(--surface)); border:1px solid var(--accent); color:var(--text); padding:3px 10px; border-radius:999px; font-size:0.8rem; font-weight:700; text-decoration:none; cursor:pointer; }
  .pk-fav-chip span{ font-weight:500; color:var(--text-muted); font-size:0.72rem; }
  .pk-filter{ margin-left:auto; padding:5px 12px; font-size:0.78rem; }
  .pk-filter.on{ border-color:var(--accent); color:var(--accent); }

  .pk-day{ margin:18px 0 10px; font-family:'Oswald',sans-serif; font-size:0.95rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--border); padding-bottom:6px; }
  .pk-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:900px){ .pk-grid{ grid-template-columns:1fr 1fr; } }
  @media (min-width:1500px){ .pk-grid{ grid-template-columns:1fr 1fr 1fr; } }

  .pk-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:12px; box-shadow:0 2px 10px rgba(0,0,0,0.18); }
  .pk-card.locked{ opacity:0.96; }
  .pk-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; min-height:22px; }
  .pk-time{ font-size:0.76rem; font-weight:700; color:var(--text-muted); letter-spacing:0.03em; }
  .pk-badge{ font-size:0.62rem; font-weight:800; letter-spacing:0.06em; padding:2px 9px; border-radius:999px; background:var(--field); color:#fff; white-space:nowrap; }
  .pk-badge.fin{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
  .pk-badge.live{ background:var(--warn-bg, #3a2f10); color:var(--warn, #e0a82e); border:1px solid var(--warn, #e0a82e); }
  .pk-badge.dirty{ background:var(--accent); color:var(--accent-ink); }
  .pk-badge.saved{ background:var(--good-bg); color:var(--good); border:1px solid var(--good); }

  .pk-sides{ display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); align-items:stretch; gap:4px; }
  .pk-at{ display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-weight:800; font-size:0.8rem; }
  .pk-side{ position:relative; }
  .pk-side-btn{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 8px 10px; border-radius:14px; border:2px solid var(--border); background:linear-gradient(180deg, color-mix(in srgb, var(--tc) 14%, var(--surface-2)), var(--surface-2)); color:var(--text); cursor:pointer; font-family:inherit; transition:transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease; }
  .pk-side-btn:hover:not(:disabled){ border-color:var(--tc); transform:translateY(-1px); }
  .pk-side-btn:disabled{ cursor:default; }
  .pk-side.sel .pk-side-btn{ border-color:var(--tc); box-shadow:0 0 0 2px var(--tc), 0 6px 18px color-mix(in srgb, var(--tc) 35%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--tc) 34%, var(--surface-2)), color-mix(in srgb, var(--tc) 14%, var(--surface-2))); }
  .pk-side.win .pk-side-btn{ border-color:var(--good); box-shadow:0 0 0 2px var(--good); }
  .pk-side.loss .pk-side-btn{ border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); }
  .pk-side.push .pk-side-btn{ border-color:var(--text-muted); box-shadow:0 0 0 2px var(--text-muted); }
  .pk-side.disabled:not(.sel) .pk-side-btn{ opacity:0.82; }
  .pk-team{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:0.02em; margin-top:6px; }
  .pk-nick{ font-size:0.68rem; color:var(--text-muted); text-align:center; }
  .pk-line{ font-family:'Oswald',sans-serif; font-weight:800; font-size:1.55rem; margin-top:6px; line-height:1; }
  .pk-ml{ font-size:0.7rem; color:var(--text-muted); }
  .pk-tag{ min-height:14px; font-size:0.6rem; font-weight:800; letter-spacing:0.08em; color:var(--accent); margin-top:4px; }
  .pk-side.win .pk-tag{ color:var(--good); } .pk-side.loss .pk-tag{ color:var(--danger); }
  .pk-star{ position:absolute; top:6px; right:8px; z-index:2; border:none; background:transparent; color:var(--text-muted); font-size:1.25rem; line-height:1; padding:2px 4px; cursor:pointer; border-radius:6px; }
  .pk-star:hover{ color:var(--accent); background:rgba(127,127,127,0.14); }
  .pk-star.on{ color:var(--accent); text-shadow:0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }

  .pk-ou{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:stretch; margin-top:10px; }
  .pk-ou-btn{ display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 8px; border-radius:12px; border:2px solid var(--border); background:var(--surface-2); color:var(--text); font-family:inherit; cursor:pointer; transition:border-color 0.12s ease; }
  .pk-ou-btn:hover:not(:disabled){ border-color:var(--accent); }
  .pk-ou-btn:disabled{ cursor:default; }
  .pk-ou-btn.sel{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 18%, var(--surface-2)); box-shadow:0 0 0 2px var(--accent); }
  .pk-ou-btn.win{ border-color:var(--good); box-shadow:0 0 0 2px var(--good); background:var(--good-bg); }
  .pk-ou-btn.loss{ border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); background:var(--danger-bg); }
  .pk-ou-btn.push{ border-color:var(--text-muted); box-shadow:0 0 0 2px var(--text-muted); }
  .pk-ou-dir{ font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.05em; font-size:0.9rem; }
  .pk-ou-num{ font-family:'Oswald',sans-serif; font-weight:800; font-size:1.05rem; color:var(--text-muted); }
  .pk-ou-btn.sel .pk-ou-num{ color:var(--accent); }
  .pk-ou-mid{ display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); min-width:64px; }
  .pk-ou-mid b{ font-family:'Oswald',sans-serif; font-size:1.1rem; color:var(--text); letter-spacing:0; }

  .pk-info{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); font-size:0.74rem; color:var(--text-muted); }
  .pk-info b{ color:var(--text); font-weight:700; margin-right:4px; text-transform:uppercase; font-size:0.62rem; letter-spacing:0.05em; }
  .pk-results{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
  .pk-res{ font-size:0.74rem; font-weight:800; padding:3px 10px; border-radius:999px; border:1px solid var(--border); }
  .pk-res.win{ color:var(--good); border-color:var(--good); background:var(--good-bg); }
  .pk-res.loss{ color:var(--danger); border-color:var(--danger); background:var(--danger-bg); }
  .pk-res.push, .pk-res.none{ color:var(--text-muted); }
  .pk-foot{ margin-top:10px; font-size:0.76rem; } .pk-foot a{ color:var(--accent); font-weight:700; text-decoration:none; }

  .pk-savebar{ position:sticky; bottom:46px; z-index:20; display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:14px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,0.35); }
  .pk-savebar.dirty{ border-color:var(--accent); }
  .pk-save-note{ margin-right:auto; font-size:0.82rem; color:var(--text-muted); font-weight:600; }
  .pk-savebar.dirty .pk-save-note{ color:var(--accent); }
  .pk-savebar .btn[disabled]{ opacity:0.5; cursor:default; }
  @media (max-width:520px){ .pk-line{ font-size:1.3rem; } .pk-team{ font-size:1rem; } .pk-ou-mid{ min-width:52px; } }

  /* ---- Research > Player Stats ---- */
  .ps-chiprow{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin:12px 0 4px; }
  .ps-opt{ border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); border-radius:999px; padding:5px 12px; font-size:0.78rem; font-weight:700; cursor:pointer; }
  .ps-opt.on{ border-color:var(--accent); color:var(--accent); }
  .ps-strip{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin:14px 0 6px; }
  .ps-strip-team{ display:flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid var(--border); background:var(--surface-2); border-radius:12px; } .ps-strip-team b{ font-family:'Oswald',sans-serif; font-size:1.2rem; } .ps-strip-team span{ font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
  .ps-tile{ min-width:104px; padding:8px 14px; border:1px solid var(--border); background:var(--surface-2); border-radius:12px; text-align:center; }
  .ps-tile-l{ font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:700; } .ps-tile-v{ font-family:'Oswald',sans-serif; font-size:1.35rem; line-height:1.2; } .ps-tile-s{ font-size:0.62rem; color:var(--text-muted); }
  .ps-wrap{ margin-top:10px; max-height:none; }
  table.ps-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:0.84rem; min-width:0; }
  .ps-table th{ position:sticky; top:0; z-index:2; padding:9px 9px; font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted); font-weight:700; text-align:right; white-space:nowrap; background:var(--surface); border-bottom:1px solid var(--border); cursor:pointer; }
  .ps-table th.sorted{ color:var(--accent); } .ps-table th:hover{ color:var(--text); }
  .ps-table th.ps-th-player, .ps-table td.ps-player{ position:sticky; left:0; z-index:3; text-align:left; cursor:default; background:var(--surface); min-width:170px; }
  .ps-table th.ps-th-player{ z-index:4; }
  .ps-table td{ padding:7px 9px; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align:middle; font-variant-numeric:tabular-nums; background:transparent; }
  .ps-table td.ps-player{ background:var(--surface); }
  .ps-row{ cursor:pointer; } .ps-row:hover td{ background:color-mix(in srgb, var(--surface-2) 70%, transparent); } .ps-row:hover td.ps-player{ background:var(--surface-2); }
  .ps-row.open td, .ps-row.open td.ps-player{ background:var(--surface-2); }
  td.ps-cell{ white-space:nowrap; text-align:right; }
  td.ps-bar{ background-image:linear-gradient(90deg, color-mix(in srgb, var(--accent) 17%, transparent) var(--bar), transparent var(--bar)); background-repeat:no-repeat; background-size:100% 62%; background-position:left center; }
  .ps-v{ position:relative; font-weight:600; }
  .ps-d{ display:block; font-size:0.62rem; font-weight:800; line-height:1.1; } .ps-d.up{ color:var(--good); } .ps-d.dn{ color:var(--danger); }
  .ps-pwrap{ display:flex; align-items:center; gap:9px; }
  .ps-hs{ width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:top; background:#fff; border:2px solid var(--accent); flex-shrink:0; } .ps-hs-ph{ display:inline-block; background:var(--surface-2); border-color:var(--border); }
  .ps-sub{ display:flex; align-items:center; gap:5px; margin-top:2px; font-size:0.66rem; color:var(--text-muted); } .ps-sub .pill{ padding:1px 6px; font-size:0.58rem; }
  .ps-detail > td{ background:var(--surface-2) !important; padding:14px 16px; border-bottom:1px solid var(--border); }
  .ps-sparks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:12px; }
  .ps-sp{ border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:8px 12px; }
  .ps-sp-l{ font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:700; } .ps-sp-v{ font-family:'Oswald',sans-serif; font-size:1.05rem; } .ps-sp-v span{ font-family:inherit; font-size:0.6rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
  .ps-spark{ width:100%; max-width:130px; height:34px; display:block; } .ps-sline{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .ps-sdot{ fill:var(--surface-2); stroke:var(--accent); stroke-width:1.4; } .ps-sdot.last{ fill:var(--accent); }
  table.ps-mini{ width:100%; border-collapse:collapse; font-size:0.78rem; min-width:0; }
  .ps-mini th{ position:static; background:transparent; cursor:default; padding:6px 8px; } .ps-mini td{ padding:5px 8px; border-bottom:1px solid color-mix(in srgb, var(--border) 45%, transparent); text-align:right; } .ps-mini td:first-child, .ps-mini td:nth-child(2){ text-align:left; }
  .ps-mini tr.ps-season td{ font-weight:800; color:var(--accent); border-top:1px solid var(--border); }
  .ps-weeks-head{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:8px 0; } .ps-weeks-head label{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; color:var(--text-muted); } .ps-weeks-head select{ min-width:220px; }
  td.ps-hm{ text-align:center; font-weight:700; } td.ps-season-c{ color:var(--accent); } .ps-matrix td.num{ vertical-align:middle; }
  @media (max-width:700px){ .ps-table th.ps-th-player, .ps-table td.ps-player{ min-width:136px; } .ps-hs{ width:28px; height:28px; } }

  /* ---- NBA (owner-only) ---- */
  .nba-private{ color:var(--accent); font-weight:700; }
  .nba-chiprow{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin:12px 0 6px; }
  .nba-badge{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; overflow:hidden; box-shadow:0 0 0 2px var(--c, var(--border)); vertical-align:middle; flex-shrink:0; font-size:0.6rem; font-weight:800; color:#222; }
  .nba-badge img{ width:82%; height:82%; object-fit:contain; }
  .nba-hs{ width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:top; background:#fff; border:2px solid var(--accent); flex-shrink:0; display:inline-block; }
  .nba-hs.lg{ width:64px; height:64px; } .nba-hs-ph{ background:var(--surface-2); border-color:var(--border); }
  .nba-wrap{ margin-top:10px; }
  table.nba-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:0.84rem; min-width:0; }
  .nba-table th{ position:sticky; top:0; z-index:2; padding:9px 9px; font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted); font-weight:700; text-align:left; white-space:nowrap; background:var(--surface); border-bottom:1px solid var(--border); }
  .nba-table th.num, .nba-table td.num{ text-align:right; }
  .nba-table th[data-nsort]{ cursor:pointer; } .nba-table th.sorted{ color:var(--accent); }
  .nba-table td{ padding:7px 9px; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align:middle; font-variant-numeric:tabular-nums; background:transparent; }
  .nba-table th.nba-th-player, .nba-table td.nba-player{ position:sticky; left:0; z-index:3; background:var(--surface); min-width:190px; }
  .nba-table th.nba-th-player{ z-index:4; }
  .nba-row{ cursor:pointer; } .nba-row:hover td{ background:color-mix(in srgb, var(--surface-2) 70%, transparent); } .nba-row:hover td.nba-player{ background:var(--surface-2); } .nba-row.open td, .nba-row.open td.nba-player{ background:var(--surface-2); }
  td.nba-cell{ white-space:nowrap; }
  td.nba-bar{ background-image:linear-gradient(90deg, color-mix(in srgb, var(--accent) 17%, transparent) var(--bar), transparent var(--bar)); background-repeat:no-repeat; background-size:100% 62%; background-position:left center; }
  .nba-v{ position:relative; font-weight:600; }
  .nba-d{ display:block; font-size:0.62rem; font-weight:800; line-height:1.1; } .nba-d.up, .nba-up{ color:var(--good); } .nba-d.dn, .nba-dn{ color:var(--danger); }
  .nba-pwrap{ display:flex; align-items:center; gap:9px; }
  .nba-name{ font-weight:700; }
  .nba-sub{ display:flex; align-items:center; gap:6px; margin-top:2px; font-size:0.68rem; color:var(--text-muted); }
  .nba-pos{ font-weight:700; letter-spacing:0.03em; }
  .nba-new{ font-size:0.56rem; font-weight:800; letter-spacing:0.06em; padding:1px 6px; border-radius:999px; background:color-mix(in srgb, var(--accent) 22%, var(--surface)); color:var(--accent); }
  .nba-tm{ font-size:0.74rem; color:var(--text-muted); font-weight:700; }
  .nba-inj{ display:inline-block; margin-left:6px; font-size:0.58rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; padding:1px 7px; border-radius:999px; border:1px solid var(--border); vertical-align:middle; }
  .nba-inj.out{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); } .nba-inj.doubt{ background:color-mix(in srgb, var(--warn, #B8A10A) 20%, var(--surface)); color:var(--warn, #B8A10A); border-color:var(--warn, #B8A10A); } .nba-inj.dtd{ background:var(--surface-2); color:var(--text-muted); }
  .nba-counts{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; } .nba-counts .nba-inj{ margin-left:0; font-size:0.7rem; padding:3px 10px; }
  .nba-note{ max-width:340px; font-size:0.78rem; color:var(--text-muted); }
  tr.nba-out td{ opacity:0.6; }
  .nba-detail > td{ background:var(--surface-2) !important; padding:14px 16px; }
  .nba-detail-in{ display:grid; grid-template-columns:minmax(180px,1fr) minmax(260px,1.3fr) minmax(220px,1fr); gap:18px; align-items:start; }
  @media (max-width:900px){ .nba-detail-in{ grid-template-columns:1fr; } }
  .nba-bio{ font-size:0.84rem; line-height:1.6; } .nba-injnote{ margin-top:6px; font-size:0.78rem; color:var(--text-muted); }
  table.nba-mini{ width:100%; border-collapse:collapse; font-size:0.78rem; min-width:0; } .nba-mini th{ position:static; background:transparent; padding:5px 8px; } .nba-mini td{ padding:4px 8px; border-bottom:1px solid color-mix(in srgb, var(--border) 45%, transparent); }
  .nba-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .nba-tile{ border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:8px 12px; text-align:center; }
  .nba-tile-l{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:700; } .nba-tile-v{ font-family:'Oswald',sans-serif; font-size:1.25rem; } .nba-tile-s{ font-size:0.6rem; color:var(--text-muted); }
  .nba-strip{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin:12px 0 14px; }
  .nba-strip .nba-tile{ min-width:100px; background:var(--surface-2); }
  .nba-strip-team{ display:flex; align-items:center; gap:12px; padding:8px 16px; border:1px solid var(--border); background:var(--surface-2); border-radius:12px; } .nba-strip-team b{ font-family:'Oswald',sans-serif; font-size:1.2rem; display:block; } .nba-strip-team span{ font-size:0.64rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
  .nba-chart{ border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:14px 16px; margin-bottom:14px; min-width:0; }
  .nba-chart h4{ margin:0 0 10px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:0.85rem; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
  .nba-starters{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; } @media (max-width:900px){ .nba-starters{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .nba-start{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:12px 8px; border:1px solid var(--border); background:var(--surface); border-radius:14px; }
  .nba-start-pos{ font-family:'Oswald',sans-serif; font-weight:800; font-size:0.8rem; letter-spacing:0.08em; color:var(--accent); } .nba-start-name{ font-weight:800; font-size:0.9rem; line-height:1.2; } .nba-start-sub{ font-size:0.68rem; color:var(--text-muted); }
  .nba-mstack{ display:flex; height:34px; border-radius:8px; overflow:hidden; gap:1px; background:var(--border); } .nba-mseg{ display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.66rem; font-weight:800; overflow:hidden; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,0.45); }
  .nba-mcell{ min-width:150px; } .nba-mbar{ position:relative; height:20px; background:color-mix(in srgb, var(--border) 50%, transparent); border-radius:6px; overflow:hidden; } .nba-mbar i{ display:block; height:100%; background:color-mix(in srgb, var(--accent) 55%, transparent); } .nba-mbar b{ position:absolute; left:8px; top:0; line-height:20px; font-size:0.74rem; }
  .nba-role{ font-size:0.6rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); white-space:nowrap; }
  .nba-role.start{ background:var(--good-bg); color:var(--good); border-color:var(--good); } .nba-role.sixth{ background:color-mix(in srgb, var(--accent) 20%, var(--surface)); color:var(--accent); border-color:var(--accent); } .nba-role.out{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
  .nba-moves{ display:grid; gap:6px; font-size:0.84rem; line-height:1.5; }
  @media (max-width:700px){ .nba-table th.nba-th-player, .nba-table td.nba-player{ min-width:140px; } .nba-hs{ width:28px; height:28px; } }

  /* ---- NBA rankings / draft guide ---- */
  .nba-lbl{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; color:var(--text-muted); margin-right:6px; }
  .nba-punt{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
  .nba-pchip{ border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); border-radius:999px; padding:3px 10px; font-size:0.72rem; font-weight:800; cursor:pointer; }
  .nba-pchip.on{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); text-decoration:line-through; }
  .nba-table th.punted, .nba-table td.punted{ opacity:0.35; }
  tr.nba-tier td{ background:color-mix(in srgb, var(--accent) 14%, var(--surface)); color:var(--accent); font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; font-size:0.72rem; padding:4px 10px; }
  .nba-tierpill{ font-size:0.62rem; font-weight:800; padding:1px 7px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); }
  td.nba-z{ text-align:center; font-weight:700; font-size:0.78rem; }
  .nba-two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media (max-width:900px){ .nba-two{ grid-template-columns:1fr; } }
  .nba-chart h5{ margin:0 0 8px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:0.78rem; }
  .nba-bullets{ margin:0; padding-left:18px; display:grid; gap:7px; font-size:0.88rem; line-height:1.5; }
  .nba-clock{ display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; margin-bottom:14px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; } .nba-clock b{ font-family:'Oswald',sans-serif; font-size:1.5rem; margin:0 6px; } .nba-clock-l{ display:block; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:700; }
  .nba-picks{ display:flex; flex-wrap:wrap; gap:6px; }
  .nba-pick{ display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-size:0.8rem; text-align:left; }
  .nba-pick:hover{ border-color:var(--accent); } .nba-pickn{ font-family:'Oswald',sans-serif; font-weight:800; color:var(--accent); min-width:22px; text-align:center; } .nba-pickname{ font-weight:700; } .nba-pickmeta{ font-size:0.66rem; color:var(--text-muted); }
  .nba-find{ width:100%; max-width:340px; }
  .nba-myteam{ display:grid; gap:4px; font-size:0.84rem; margin-bottom:10px; } .nba-myrow{ padding:4px 8px; border-radius:8px; background:var(--surface); border:1px solid var(--border); }
  .nba-needs{ display:grid; gap:5px; } .nba-need{ display:grid; grid-template-columns:42px 1fr 44px; gap:8px; align-items:center; font-size:0.74rem; font-weight:700; }
  .nba-needbar{ position:relative; height:12px; background:color-mix(in srgb, var(--border) 50%, transparent); border-radius:6px; } .nba-needbar i{ position:absolute; top:0; bottom:0; border-radius:6px; } .nba-needbar i.pos{ background:var(--good); } .nba-needbar i.neg{ background:var(--danger); } .nba-need b{ text-align:right; }
  .nba-tiers{ display:grid; gap:6px; } .nba-tierrow{ display:grid; grid-template-columns:44px 1fr; gap:10px; align-items:start; padding:6px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent); }
  .nba-tiern{ font-family:'Oswald',sans-serif; font-weight:800; color:var(--accent); } .nba-tierp{ display:flex; flex-wrap:wrap; gap:5px; }
  .nba-tp{ font-size:0.76rem; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface); border:1px solid var(--border); } .nba-tp i{ font-style:normal; font-size:0.58rem; color:var(--text-muted); margin-left:5px; } .nba-tp.gone{ opacity:0.3; text-decoration:line-through; }
  .nba-gap{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 45%, transparent); font-size:0.82rem; } .nba-gap i{ font-style:normal; font-weight:800; }
  .nba-scar{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } .nba-scol{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; } .nba-scol > b{ font-family:'Oswald',sans-serif; font-size:1.1rem; }
  .nba-sbars{ display:flex; gap:4px; align-items:flex-end; height:130px; width:100%; justify-content:center; } .nba-sbar{ position:relative; flex:1; max-width:34px; height:100%; display:flex; align-items:flex-end; justify-content:center; } .nba-sbar i{ display:block; width:100%; background:color-mix(in srgb, var(--accent) 65%, transparent); border-radius:5px 5px 0 0; } .nba-sbar em{ position:absolute; top:-2px; font-style:normal; font-size:0.6rem; font-weight:800; transform:translateY(-100%); } .nba-sbar span{ position:absolute; bottom:-16px; font-size:0.54rem; color:var(--text-muted); } .nba-scol{ padding-bottom:6px; } .nba-sbars{ margin-bottom:18px; }
  /* ---- NBA DFS ---- */
  .nba-games{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; margin:12px 0; }
  .nba-game{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center; padding:10px 14px; border:1px solid var(--border); background:var(--surface-2); border-radius:14px; }
  .nba-game-teams{ display:flex; align-items:center; gap:6px; } .nba-at{ color:var(--text-muted); font-weight:800; }
  .nba-game-names b{ display:block; font-family:'Oswald',sans-serif; } .nba-game-names span, .nba-game-line span{ font-size:0.72rem; color:var(--text-muted); }
  .nba-game-line{ grid-column:1 / -1; display:flex; gap:12px; align-items:baseline; } .nba-game-line b{ color:var(--accent); } .nba-game-inj{ grid-column:1 / -1; font-size:0.7rem; color:var(--danger); font-weight:700; }
  /* ---- schedule: finals, live scores, box score window ---- */
  .nba-game-box{ cursor:pointer; transition:border-color .15s, transform .15s; } .nba-game-box:hover, .nba-game-box:focus-visible{ border-color:var(--accent); transform:translateY(-1px); outline:none; }
  .nba-game-res{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
  .nbsc-score{ display:flex; gap:14px; font-family:'Oswald',sans-serif; } .nbsc-score i{ font-style:normal; color:var(--text-muted); font-size:.95rem; } .nbsc-score i b{ font-size:1.25rem; color:var(--text); } .nbsc-score i.w, .nbsc-score i.w b{ color:var(--accent); }
  .nbsc-tag{ font-size:.68rem; font-weight:800; letter-spacing:.06em; padding:2px 8px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text-muted); } .nbsc-tag.live{ color:#fff; background:var(--danger); border-color:var(--danger); } .nbsc-tag.final{ color:var(--text); }
  .nbsc-box{ margin-left:auto; font-size:.74rem; font-weight:700; color:var(--accent); }
  body.nbsc-lock{ overflow:hidden; }
  .nbsc-modal{ position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.7); display:flex; align-items:flex-start; justify-content:center; padding:4vh 12px; overflow-y:auto; } .nbsc-modal[hidden]{ display:none; }
  .nbsc-card{ position:relative; width:min(980px,100%); background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:20px 18px 16px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
  .nbsc-x{ position:absolute; top:8px; right:12px; background:none; border:0; color:var(--text-muted); font-size:1.8rem; line-height:1; cursor:pointer; } .nbsc-x:hover{ color:var(--text); }
  .nbsc-big{ display:flex; align-items:center; justify-content:center; gap:26px; } .nbsc-big em{ font-style:normal; color:var(--text-muted); font-weight:800; }
  .nbsc-bt{ display:flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; color:var(--text-muted); } .nbsc-bt span{ font-size:1.2rem; } .nbsc-bt b{ font-size:2.4rem; color:var(--text); } .nbsc-bt.w b{ color:var(--accent); }
  .nbsc-st{ text-align:center; margin:6px 0 10px; }
  .nbsc-lines{ margin:0 auto; border-collapse:collapse; font-size:.85rem; } .nbsc-lines th, .nbsc-lines td{ padding:5px 12px; text-align:center; color:var(--text-muted); } .nbsc-lines th{ font-size:.7rem; font-weight:700; } .nbsc-lines td.nbsc-ln-t{ text-align:left; color:var(--text); } .nbsc-lines td.nbsc-ln-f{ color:var(--text); font-weight:800; } .nbsc-lines td.nbsc-ln-f.w{ color:var(--accent); } .nbsc-ln-t b{ font-family:'Oswald',sans-serif; margin-left:4px; }
  .nbsc-tabs{ display:flex; gap:8px; margin:14px 0 8px; flex-wrap:wrap; } .nbsc-tabs button{ display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-weight:700; cursor:pointer; } .nbsc-tabs button.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 18%, var(--surface)); }
  .nbsc-tbl{ width:100%; border-collapse:collapse; font-size:.82rem; } .nbsc-tbl th{ font-size:.66rem; color:var(--text-muted); font-weight:700; text-align:right; padding:6px 7px; border-bottom:1px solid var(--border); white-space:nowrap; } .nbsc-tbl td{ text-align:right; padding:6px 7px; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .nbsc-tbl th.nbsc-pl, .nbsc-tbl td.nbsc-pl{ text-align:left; position:sticky; left:0; background:var(--surface); min-width:150px; } .nbsc-pl{ display:table-cell; } .nbsc-tbl td.nbsc-pl span{ display:inline-flex; flex-direction:column; vertical-align:middle; line-height:1.15; } .nbsc-tbl td.nbsc-pl img{ width:26px; height:26px; border-radius:50%; object-fit:cover; background:var(--surface-2); vertical-align:middle; margin-right:8px; } .nbsc-tbl td.nbsc-pl small{ color:var(--text-muted); font-size:.62rem; }
  .nbsc-tbl td.pts{ font-weight:800; color:var(--text); } .nbsc-tbl tr.tot td{ font-weight:800; border-top:1px solid var(--border); } .nbsc-tbl tr.nbsc-sep td{ text-align:left; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); padding-top:10px; }
  .nbsc-dnp{ margin:8px 2px 0; } .nbsc-fine{ margin:12px 2px 0; }
  .nbsc-cmp{ margin-top:16px; } .nbsc-cmp h4{ margin:0 0 6px; } .nbsc-cr{ display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:8px; padding:5px 4px; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size:.85rem; text-align:center; } .nbsc-cr span{ color:var(--text-muted); font-size:.76rem; } .nbsc-cr b:first-child{ text-align:left; } .nbsc-cr b:last-child{ text-align:right; }
  @media (max-width:640px){ .nbsc-big{ gap:12px; } .nbsc-bt b{ font-size:1.8rem; } .nbsc-card{ padding:16px 10px 12px; } .nbsc-lines th, .nbsc-lines td{ padding:4px 7px; } }
  .nba-upload{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px; font-size:0.84rem; }
  .nba-lk{ white-space:nowrap; } .nba-lkb{ border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:2px 6px; cursor:pointer; opacity:0.45; font-size:0.8rem; } .nba-lkb.on{ opacity:1; border-color:var(--accent); background:color-mix(in srgb, var(--accent) 20%, var(--surface)); }
  .nba-est{ color:var(--accent); font-weight:800; }
  .nba-lus{ display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:14px; margin-top:12px; } .nba-lus > .hint, .nba-lus > .empty, .nba-lus > .nba-chart{ grid-column:1 / -1; }
  .nba-lu{ border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:12px; }
  .nba-lu-head{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; font-size:0.84rem; } .nba-lu-head b:first-child{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; }
  .nba-lu-row{ display:grid; grid-template-columns:42px 30px 1fr auto 46px 62px; gap:8px; align-items:center; padding:4px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 45%, transparent); font-size:0.82rem; }
  .nba-lu-row .nba-hs{ width:28px; height:28px; } .nba-lu-slot{ font-family:'Oswald',sans-serif; font-weight:800; font-size:0.74rem; color:var(--accent); } .nba-lu-name{ font-weight:700; } .nba-lu-meta{ font-size:0.68rem; color:var(--text-muted); text-align:right; } .nba-lu-proj{ text-align:right; font-weight:800; } .nba-lu-sal{ text-align:right; color:var(--text-muted); }
  .nba-exp{ display:grid; gap:5px; } .nba-exprow{ display:grid; grid-template-columns:180px 1fr 44px; gap:10px; align-items:center; font-size:0.8rem; } .nba-exprow b{ text-align:right; }
  @media (max-width:520px){ .nba-lus{ grid-template-columns:1fr; } .nba-lu-row{ grid-template-columns:38px 1fr auto 56px; } .nba-lu-row .nba-hs, .nba-lu-meta{ display:none; } }
  #nba-gd-body, #nba-rk-body, #nba-pl-body{ margin-top:16px; }

  /* ---- Football / Basketball switch ---- */
  /* Fantasy / Research / DFS: the Football sections row, directly under the sport tabs */
  nav.subtabs.sport-cats{ display:none; gap:6px; padding-top:8px; padding-bottom:8px; background:var(--surface); }
  body.sport-fb:not(.sport-nba) nav.subtabs.sport-cats#subtabs-football{ display:flex; }
  body.sport-nba nav.subtabs.sport-cats#subtabs-nba-cats{ display:flex; }
  nav.subtabs.sport-cats button{ font-size:0.92rem; padding:9px 20px; font-weight:700; letter-spacing:0.04em; border:1px solid transparent; }
  nav.subtabs.sport-cats button[aria-selected="true"]{ background:var(--field); color:#fff; box-shadow:var(--shadow-sm); }
  nav.subtabs.sport-cats button:hover:not([aria-selected="true"]){ background:rgba(127,127,127,0.14); color:var(--text); }
  nav.tabs button.sport-tab{ border:1px solid var(--border); margin:0 2px; }
  nav.tabs button.sport-tab[aria-selected="true"]{ border-color:var(--accent); }
  body:not(.consumer-mode) #tab-basketball .soon-badge{ display:none; }
  /* ---- NBA profile ---- */
  [data-nplayer]{ cursor:pointer; } [data-nplayer]:hover{ color:var(--accent); text-decoration:underline; }
  .nbp-pos{ background:var(--surface); color:var(--text); font-weight:800; }
  .nbp-chart{ margin:8px 0 14px; } .nbp-w{ fill:var(--good); background:var(--good); } .nbp-l{ fill:var(--danger); background:var(--danger); } .nbp-avg{ stroke:var(--accent); stroke-width:1.4; stroke-dasharray:5 3; }
  .nbp-legend{ display:flex; gap:14px; font-size:0.7rem; color:var(--text-muted); margin-top:4px; } .nbp-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
  .nbp-tools{ display:flex; flex-wrap:wrap; gap:10px 18px; margin:6px 0 12px; }
  table.nbp-table{ width:100%; border-collapse:collapse; font-size:0.8rem; min-width:0; }
  .nbp-table th{ padding:7px 8px; font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted); font-weight:700; text-align:left; white-space:nowrap; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; }
  .nbp-table th.num, .nbp-table td.num{ text-align:right; } .nbp-table td{ padding:6px 8px; border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .nbp-sum td{ background:var(--surface-2); font-weight:700; color:var(--accent); } .nbp-post td{ background:color-mix(in srgb, var(--accent) 7%, transparent); }
  .nbp-grp td{ background:var(--surface-2); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:0.7rem; color:var(--text-muted); }
  .nbp-tag{ font-size:0.55rem; font-weight:800; padding:1px 5px; border-radius:6px; margin-left:4px; background:var(--surface-2); border:1px solid var(--border); } .nbp-tag.td{ background:color-mix(in srgb, var(--accent) 25%, var(--surface)); color:var(--accent); border-color:var(--accent); }
  .nbp-bio{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:6px 0 12px; font-size:0.84rem; } .nbp-bio span{ display:block; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:700; }
  .nbp-inj{ padding:10px 14px; border:1px solid var(--border); background:var(--surface-2); border-radius:12px; margin-bottom:12px; font-size:0.86rem; }
  .nbp-cats{ display:grid; gap:6px; max-width:520px; }
  #pl-modal .nba-need{ grid-template-columns:42px 1fr 44px; }
  nav.tabs button.sport-tab{ display:inline-flex; align-items:center; gap:7px; }
  .sport-logo{ width:22px; height:22px; object-fit:contain; flex-shrink:0; }

  /* ---- NBA league views / tools ---- */
  td.nba-rk{ text-align:center; } td.nba-rk b{ display:block; font-size:0.84rem; } td.nba-rk span{ font-size:0.6rem; color:var(--text-muted); }
  .nba-b2b{ font-size:0.6rem; font-weight:800; padding:1px 7px; border-radius:999px; background:color-mix(in srgb, var(--accent) 22%, var(--surface)); color:var(--accent); }
  .nba-leads{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-bottom:14px; }
  .nba-lead{ display:grid; gap:2px; padding:8px 12px; border:1px solid var(--border); background:var(--surface-2); border-radius:12px; } .nba-lead span{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:700; } .nba-lead b{ font-size:0.86rem; cursor:pointer; } .nba-lead i{ font-style:normal; font-family:'Oswald',sans-serif; font-size:1.2rem; color:var(--accent); }
  .nba-gcount{ display:flex; gap:12px; align-items:flex-start; padding:6px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 45%, transparent); } .nba-gcount > b{ font-family:'Oswald',sans-serif; font-size:1.4rem; color:var(--accent); min-width:26px; } .nba-gcount > div{ display:flex; flex-wrap:wrap; gap:5px; }
  tr.nba-playin td{ opacity:0.85; background:color-mix(in srgb, var(--accent) 6%, transparent); }
  .nba-leadlist{ display:grid; gap:4px; margin-top:8px; } .nba-leadrow{ display:flex; align-items:center; gap:10px; padding:4px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 40%, transparent); } .nba-leadrow .nba-hs{ width:30px; height:30px; } .nba-lname{ min-width:210px; display:flex; flex-direction:column; } .nba-lname i{ font-style:normal; font-size:0.66rem; color:var(--text-muted); } .nba-leadv{ min-width:56px; text-align:right; font-family:'Oswald',sans-serif; }
  .nba-news{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent); text-decoration:none; color:var(--text); } .nba-news img{ width:112px; height:64px; object-fit:cover; border-radius:8px; flex-shrink:0; } .nba-news b{ display:block; font-size:0.9rem; line-height:1.3; } .nba-news p{ margin:3px 0; font-size:0.78rem; color:var(--text-muted); line-height:1.35; } .nba-news span{ font-size:0.66rem; color:var(--text-muted); } .nba-news:hover b{ color:var(--accent); }
  .nba-best{ color:var(--good); font-weight:800; background:color-mix(in srgb, var(--good) 12%, transparent); }
  .nba-cmp-h{ text-align:center !important; min-width:150px; } .nba-cmp td.num{ text-align:center; }
  .nba-verdict{ display:grid; gap:6px; font-size:0.9rem; } .nba-role.sit{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
  .nba-fa{ background:var(--surface-2); color:var(--text-muted); box-shadow:0 0 0 2px var(--border); }
  /* ---- NBA Spread Model: charts, game cards, projections, analytics ---- */
  .nbm-chart{ margin:6px 0 4px; } .nbm-chart svg{ width:100%; height:auto; display:block; overflow:visible; }
  .nbm-grid{ stroke:var(--border); stroke-width:1; opacity:0.55; } .nbm-avg{ stroke:var(--text-muted); stroke-width:1; stroke-dasharray:4 4; opacity:0.55; }
  .nbm-trend{ stroke:var(--accent); stroke-width:2; opacity:0.9; }
  .nbm-ax{ fill:var(--text-muted); font-size:10.5px; } .nbm-axt{ fill:var(--text-muted); font-size:11.5px; font-weight:700; letter-spacing:0.04em; }
  .nbm-lab{ fill:var(--text); font-size:10.5px; font-weight:600; paint-order:stroke; stroke:var(--surface); stroke-width:3px; stroke-linejoin:round; } .nbm-val{ fill:var(--text); font-size:11px; font-weight:800; }
  .nbm-legrow{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:2px 0 6px; } .nbm-leg i{ display:inline-block; width:10px; height:10px; border-radius:50%; margin:0 4px 0 10px; vertical-align:-1px; }
  .nbm-stat{ font-size:0.74rem; font-weight:600; color:var(--text-muted); margin-left:8px; } .nbm-stat b{ color:var(--accent); }
  .nbm-games{ display:grid; grid-template-columns:repeat(auto-fit,minmax(460px,1fr)); gap:14px; margin-top:14px; }
  .nbm-game{ border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:14px; }
  .nbm-game-head{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; }
  .nbm-nums{ display:flex; gap:18px; } .nbm-nums > div{ display:grid; gap:1px; text-align:center; } .nbm-nums label{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); font-weight:700; } .nbm-nums b{ font-family:'Oswald',sans-serif; font-size:1.05rem; } .nbm-nums span{ font-size:0.7rem; color:var(--text-muted); }
  .nbm-wp{ display:flex; align-items:center; gap:10px; margin:12px 0 8px; font-size:0.74rem; font-weight:700; } .nbm-wpbar{ flex:1; display:flex; height:9px; border-radius:6px; overflow:hidden; background:var(--surface); } .nbm-wpbar i{ display:block; height:100%; opacity:0.9; }
  .nbm-picks{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .nbm-pick{ border:1px solid var(--border); border-radius:10px; padding:5px 10px; font-size:0.8rem; background:var(--surface); } .nbm-pick b{ text-transform:uppercase; font-size:0.66rem; letter-spacing:0.06em; margin-right:4px; } .nbm-pick i{ color:var(--text-muted); font-style:normal; font-size:0.72rem; }
  .nbm-pick.good{ border-color:var(--good); background:color-mix(in srgb, var(--good) 14%, var(--surface)); } .nbm-pick.good b{ color:var(--good); } .nbm-pick.warn{ border-color:var(--accent); } .nbm-pick.warn b{ color:var(--accent); }
  .nbm-why{ margin-top:10px; } .nbm-why summary{ cursor:pointer; font-size:0.78rem; color:var(--text-muted); font-weight:700; } .nbm-whygrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
  .nbm-facs h5{ margin:0 0 6px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em; font-size:0.78rem; display:flex; align-items:center; gap:6px; } .nbm-facs h5 i{ font-style:normal; font-size:0.6rem; color:var(--text-muted); }
  .nbm-fac{ display:flex; justify-content:space-between; gap:10px; font-size:0.78rem; padding:3px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 45%, transparent); } .nbm-fac span{ color:var(--text-muted); } .nbm-fac-t{ border-bottom:0; font-weight:800; } .nbm-fac-t span{ color:var(--text); }
  .nbm-method p{ margin:0 0 10px; font-size:0.88rem; line-height:1.55; max-width:980px; }
  .nbm-conf{ font-size:0.55rem; font-weight:800; padding:1px 5px; border-radius:6px; border:1px solid var(--border); } .nbm-cA{ color:var(--good); border-color:var(--good); } .nbm-cB{ color:var(--accent); border-color:var(--accent); } .nbm-cC{ color:var(--text-muted); }
  .nbm-rng{ color:var(--text-muted); font-size:0.78rem; }
  @media (max-width:560px){ .nbm-games{ grid-template-columns:1fr; } .nbm-whygrid{ grid-template-columns:1fr; } .nbm-nums{ gap:12px; } }
  /* mobile: leader rows were a fixed 210px name column + bar + value and pushed the whole page sideways */
  @media (max-width:560px){ .nba-lname{ min-width:0; flex:1 1 0; } .nba-leadrow .nba-needbar{ display:none; } .nba-leadrow{ gap:8px; } .nba-leadv{ min-width:48px; } }
  .nba-leadrow > *{ min-width:0; } .nba-lname b, .nba-lname i{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nba-two > *{ min-width:0; }   /* grid children containing wide tables otherwise force the whole page wider than a phone */
  /* home: NBA launch panel */
  #home-nba-panel{ border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 55%); }
  #home-nba-panel .feature-grid{ grid-template-columns:repeat(6, 1fr); gap:14px; } @media (max-width:1100px){ #home-nba-panel .feature-grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:640px){ #home-nba-panel .feature-grid{ grid-template-columns:1fr; } }
  .nba-eyebrow{ display:flex; align-items:center; gap:7px; } .nba-eyebrow img{ border-radius:50%; background:#fff; }
  .nba-search-pill{ background:var(--accent); color:#04120a; font-weight:800; font-size:0.62rem; }
  #home-x-feed{ min-height:120px; max-width:760px; } #home-x-feed .twitter-timeline{ color:var(--text-muted); }
  .hx-admin{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 14px; } .hx-admin input{ flex:1 1 320px; min-width:0; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:0.9rem; }
  .hx-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; align-items:start; } .hx-item{ position:relative; min-width:0; } .hx-item .twitter-tweet{ margin:0 !important; }
  .hx-del{ position:absolute; top:6px; right:6px; z-index:3; border:0; border-radius:50%; width:26px; height:26px; background:rgba(0,0,0,0.7); color:#fff; cursor:pointer; }
  /* X posts: equal-size cards so mixed-length posts line up in a tidy grid (long posts scroll inside their card) */
  .hx-grid{ grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); align-items:stretch; }
  .hx-item{ height:470px; overflow-y:auto; overflow-x:hidden; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); padding:6px; display:flex; justify-content:center; align-items:flex-start; scrollbar-width:thin; }
  .hx-item .twitter-tweet, .hx-item .twitter-tweet-rendered, .hx-item iframe{ width:100% !important; max-width:100% !important; margin:0 auto !important; }
  @media (max-width:420px){ .hx-grid{ grid-template-columns:1fr; } }
  /* X posts are fixed in place: no scrolling inside a card, anything that doesn't fit is simply cropped */
  .hx-item{ overflow:hidden !important; position:relative; }
  .hx-item::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:34px; background:linear-gradient(to bottom, transparent, var(--surface-2)); pointer-events:none; border-radius:0 0 14px 14px; }/* ---------- NBA Player Props ---------- */
.nbpr-sum{ font-size:0.82rem; color:var(--text-muted); margin:0 0 12px; line-height:1.5; } .nbpr-sum b{ color:var(--text); }
.nbp-games{ padding-top:0; } .nbp-games button em{ font-style:normal; font-size:0.68rem; opacity:0.75; }
#nbp-mkts button .nbp-n{ font-style:normal; font-size:0.66rem; background:var(--surface-2); border-radius:9px; padding:1px 6px; margin-left:4px; color:var(--text-muted); }
#nbp-mkts button.active .nbp-n{ background:rgba(255,255,255,0.22); color:#fff; }
.nbp-table td small{ display:block; color:var(--text-muted); font-size:0.66rem; font-weight:400; }
.nbp-row{ cursor:pointer; } .nbp-row:hover td{ background:color-mix(in srgb, var(--accent) 6%, transparent); } .nbp-row.open td{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.nbp-who{ display:flex; align-items:center; gap:10px; min-width:200px; } .nbp-who .nba-hs{ width:32px; height:32px; }
.nbp-who small{ display:flex !important; align-items:center; gap:4px; }
.nbp-line{ font-family:'Oswald',sans-serif; font-size:1rem; color:var(--accent); }
.nbp-lean b{ font-size:0.82rem; } .nbp-time{ min-width:76px; }
.nbp-detail td{ background:var(--surface-2); padding:12px 14px !important; white-space:normal !important; }
.nbp-dgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
.nbp-dgrid h4{ margin:0 0 6px; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.nbp-mini{ width:100%; border-collapse:collapse; font-size:0.78rem; }
.nbp-mini th, .nbp-mini td{ padding:5px 8px; border-top:1px solid var(--border); text-align:left; white-space:nowrap; }
.nbp-mini thead th{ border-top:0; font-size:0.64rem; text-transform:uppercase; color:var(--text-muted); } .nbp-mini .num{ text-align:right; }
.nbp-mini small{ display:block; font-size:0.62rem; color:var(--text-muted); }
.nbp-rate{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:22px; padding:0 7px; margin-right:7px; border-radius:11px; font-family:'Oswald',sans-serif; font-size:0.82rem; font-weight:700; background:var(--surface-2); color:var(--text-muted); vertical-align:middle; }
.nbp-rate.hi{ background:var(--accent); color:#04130a; } .nbp-rate.mid{ background:rgba(255,194,51,0.22); color:#ffd166; border:1px solid rgba(255,194,51,0.5); } .nbp-rate.lo{ background:var(--surface-2); color:var(--text-muted); }
.nbp-rate.big{ min-width:54px; height:54px; border-radius:50%; font-size:1.45rem; margin:0; padding:0; flex:none; }
.nbr-how{ margin:0 0 14px; border:1px solid var(--border); border-radius:12px; padding:10px 14px; background:var(--surface-2); } .nbr-how summary{ cursor:pointer; font-weight:700; } .nbr-how div{ font-size:0.86rem; line-height:1.55; color:var(--text-muted); } .nbr-how ul{ margin:6px 0; padding-left:18px; } .nbr-how li{ margin:4px 0; } .nbr-how b{ color:var(--text); }
.nbr-h{ margin:22px 0 10px; font-family:'Oswald',sans-serif; font-size:1.15rem; letter-spacing:0.02em; } .nbr-h small{ font-family:inherit; font-size:0.74rem; font-weight:400; color:var(--text-muted); margin-left:8px; letter-spacing:0; }
.nbr-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:12px; }
.nbr-card{ border:1px solid var(--border); border-radius:14px; padding:14px; background:var(--surface); display:flex; flex-direction:column; gap:10px; }
.nbr-top{ display:flex; align-items:center; gap:12px; } .nbr-who{ display:flex; align-items:center; gap:9px; min-width:0; } .nbr-who b{ display:block; } .nbr-who small{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:0.72rem; color:var(--text-muted); }
.nbr-pick{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 10px; border-radius:10px; background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .nbr-pick b{ font-size:1rem; } .nbr-pick span{ font-weight:700; } .nbr-pick em{ font-style:normal; font-weight:400; font-size:0.72rem; color:var(--text-muted); }
.nbr-stats{ display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; text-align:center; } .nbr-stats i{ display:block; font-style:normal; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); } .nbr-stats b{ font-size:0.86rem; }
.nbr-why{ margin:0; padding-left:16px; font-size:0.78rem; line-height:1.45; color:var(--text-muted); } .nbr-why li{ margin:3px 0; }
.nbr-act{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; } .nbr-act .btn{ padding:6px 12px; font-size:0.78rem; }
.nbr-games{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px; } .nbr-game{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--surface); }
.nbr-game h4{ margin:0 0 6px; font-size:0.9rem; } .nbr-game h4 small{ color:var(--text-muted); font-weight:400; margin-left:6px; } .nbr-game ul{ list-style:none; margin:0; padding:0; } .nbr-game li{ display:flex; align-items:center; gap:4px; padding:5px 0; border-top:1px solid var(--border); font-size:0.82rem; cursor:pointer; } .nbr-game li:first-child{ border-top:0; } .nbr-game li:hover{ color:var(--accent); } .nbr-px{ margin-left:auto; font-weight:700; }
#view-nba-research .nhl-sel{ flex-wrap:nowrap; } @media (max-width:700px){ #view-nba-research .nhl-sel{ flex-wrap:wrap; } }
.nbr-altrow{ cursor:pointer; } .nbr-altrow:hover td{ background:color-mix(in srgb, var(--accent) 6%, transparent); }
@media (max-width:700px){ .nbr-grid, .nbr-games{ grid-template-columns:1fr; } .nbr-stats{ grid-template-columns:repeat(3, 1fr); row-gap:6px; } }
@media (max-width:700px){ .nbp-table:not(.nbr-alt) tr:not(.nbp-detail) > :nth-child(2), .nbp-table:not(.nbr-alt) tr:not(.nbp-detail) > :nth-child(11), .nbp-table:not(.nbr-alt) tr:not(.nbp-detail) > :nth-child(12), .nbp-table:not(.nbr-alt) tr:not(.nbp-detail) > :nth-child(13){ display:none; } .nbp-who{ min-width:150px; } #view-nba-props #nbp-q{ width:100%; min-height:44px; font-size:16px; } }

/* ---------- NBA Hit Rates ---------- */
.nbh-pill{ display:inline-flex; align-items:baseline; gap:5px; padding:2px 8px; border-radius:9px; background:var(--surface-2); font-variant-numeric:tabular-nums; } .nbh-pill b{ font-size:0.86rem; } .nbh-pill i{ font-style:normal; font-size:0.7rem; color:var(--text-muted); }
.nbh-pill.hi{ background:color-mix(in srgb, var(--accent) 18%, transparent); } .nbh-pill.hi b{ color:var(--accent); } .nbh-pill.mid{ background:rgba(255,194,51,0.16); } .nbh-pill.mid b{ color:#ffd166; } .nbh-pill.lo{ background:rgba(255,93,93,0.15); } .nbh-pill.lo b{ color:#ff7a7a; }
.nbh-none{ color:var(--text-muted); } .nbh-note{ margin:0 0 10px; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,194,51,0.45); background:rgba(255,194,51,0.08); color:#ffe29a; font-size:0.82rem; }
.nbh-spark i.push{ background:#8fa0b2; } .nbh-table td{ white-space:nowrap; }

/* ---------- NBA Season Predictor ---------- */
.nbd-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; } .nbd-bar .btn.on{ border-color:var(--accent); color:var(--accent); }
.nbd-total{ margin:0 0 12px; font-size:0.84rem; color:#ffd166; } .nbd-total.ok{ color:var(--accent); }
.nbd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .nbd-conf h3{ margin:0 0 8px; font-family:'Oswald',sans-serif; letter-spacing:0.04em; }
.nbd-rows{ display:grid; gap:4px; }
.nbd-div{ margin:8px 0 2px; font-size:0.66rem; letter-spacing:0.12em; font-weight:800; color:var(--text-muted); } .nbd-div.po{ color:var(--accent); } .nbd-div.pi{ color:#ffd166; }
.nbd-row{ display:grid; grid-template-columns:26px 14px auto minmax(0, 1fr) auto auto; gap:8px; align-items:center; padding:6px 8px; border-radius:10px; border:1px solid var(--border); background:var(--surface); cursor:grab; }
.nbd-row.po{ border-left:3px solid var(--accent); } .nbd-row.pi{ border-left:3px solid #ffc233; } .nbd-row.lo{ border-left:3px solid #55606c; opacity:0.92; }
.nbd-row.drag{ opacity:0.4; } .nbd-row.over{ outline:2px dashed var(--accent); }
.nbd-seed{ font-family:'Oswald',sans-serif; font-size:1.05rem; color:var(--text-muted); text-align:center; } .nbd-grip{ color:var(--text-muted); font-size:0.8rem; letter-spacing:-2px; }
.nbd-name{ min-width:0; } .nbd-name b{ display:block; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nbd-name small{ color:var(--text-muted); font-size:0.66rem; }
.nbd-wl{ display:flex; align-items:center; gap:4px; } .nbd-wl input{ width:52px; padding:5px 6px; text-align:center; font-weight:700; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text); } .nbd-wl i{ font-style:normal; color:var(--text-muted); } .nbd-wl i::before{ content:'–'; margin-right:4px; } .nbd-wl small{ display:none; }
.nbd-wl input.nbd-l{ color:var(--text-muted); font-weight:600; } .nbd-wl input.nbd-l::before{ content:'–'; }
.nbd-ov{ color:var(--accent); font-weight:800; } .nbd-un{ color:#ff7a7a; font-weight:800; }
.nbd-auto{ display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--text-muted); cursor:pointer; } .nbd-auto input{ accent-color:var(--accent); width:18px; height:18px; }
.nbd-mv{ display:flex; gap:2px; } .nbd-mv button{ width:26px; height:26px; border-radius:7px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); cursor:pointer; padding:0; } .nbd-mv button:disabled{ opacity:0.3; cursor:default; } .nbd-mv button:hover:not(:disabled){ color:var(--text); }
.nbd-champs{ margin:18px 0 6px; } .nbd-champs h3{ margin:0 0 8px; font-family:'Oswald',sans-serif; } .nbd-cgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; } .nbd-cgrid label{ display:grid; gap:4px; font-size:0.78rem; color:var(--text-muted); } .nbd-cgrid select{ padding:8px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); }
.nbd-stagewrap{ position:fixed; left:-10000px; top:0; width:720px; height:900px; pointer-events:none; }
@media (max-width:820px){ .nbd-grid{ grid-template-columns:1fr; } .nbd-row{ grid-template-columns:22px auto minmax(0, 1fr) auto auto; } .nbd-grip{ display:none; } }
/* the exported picture (720x900) */
.nbd-stage{ position:relative; width:720px; height:900px; box-sizing:border-box; padding:22px 26px 14px; display:flex; flex-direction:column; overflow:hidden; background:#0a0e14; color:#f2f6fb; font-family:Inter,sans-serif; }
.nbd-stage *{ box-sizing:border-box; } .nbd-sbg{ position:absolute; inset:0; background:radial-gradient(700px 320px at 10% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(600px 360px at 100% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 60px); }
.nbd-stage > *:not(.nbd-sbg){ position:relative; }
.nbd-stop{ display:flex; align-items:center; gap:14px; margin-bottom:12px; } .nbd-stop img{ height:44px; width:auto; } .nbd-stop h2{ margin:0; font-family:'Oswald',sans-serif; font-size:27px; letter-spacing:0.05em; line-height:1; } .nbd-stop span{ display:block; margin-top:3px; font-size:10px; letter-spacing:0.18em; color:#9fb0c2; }
.nbd-champ{ margin-left:auto; text-align:center; background:var(--accent); color:#04130a; border-radius:10px; padding:5px 12px; } .nbd-champ small{ display:block; font-size:8px; letter-spacing:0.14em; font-weight:800; } .nbd-champ b{ font-family:'Oswald',sans-serif; font-size:15px; }
.nbd-scols{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; } .nbd-sc h4{ margin:0 0 5px; font-family:'Oswald',sans-serif; font-size:16px; letter-spacing:0.16em; color:var(--accent); }
.nbd-sr{ display:grid; grid-template-columns:20px 26px 1fr auto; gap:7px; align-items:center; height:44px; padding:0 9px; margin-bottom:3px; border-radius:8px; background:rgba(255,255,255,0.05); border-left:3px solid #55606c; }
.nbd-sr.po{ border-left-color:var(--accent); } .nbd-sr.pi{ border-left-color:#ffc233; } .nbd-sr .n{ font-family:'Oswald',sans-serif; font-size:15px; color:#9fb0c2; text-align:center; } .nbd-sr img{ width:26px; height:26px; object-fit:contain; } .nbd-sr b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nbd-sr em{ font-style:normal; font-family:'Oswald',sans-serif; font-size:15px; }
.nbd-sc u, .nbd-sc s{ display:block; height:2px; margin:2px 0 4px; background:repeating-linear-gradient(90deg, #ffc233 0 6px, transparent 6px 10px); text-decoration:none; } .nbd-sc s{ background:repeating-linear-gradient(90deg, #55606c 0 6px, transparent 6px 10px); }
.nbd-sfoot{ text-align:center; margin-top:4px; font-family:'Oswald',sans-serif; font-size:26px; letter-spacing:0.12em; color:var(--accent); text-transform:uppercase; line-height:1; }

/* ---------- NBA season switch (2026-27 / 2025-26) ---------- */
.nba-seasonbar{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:8px 0 12px; padding:8px 12px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); }
.nba-seasonbar .toggle-group button{ font-weight:800; } .nba-snote{ font-size:0.8rem; color:var(--text-muted); line-height:1.4; flex:1 1 280px; }
/* hit-rate dropdowns + profile tab */
.nbh-top{ margin-bottom:6px; } .nbh-lab{ display:grid; gap:3px; font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted); } .nbh-lab select{ text-transform:none; letter-spacing:0; }
.nhl-sel select.nbh-lab-sel, .nbh-lab select{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:10px; padding:7px 10px; font-size:0.82rem; }
select.nbh-line{ border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:8px; padding:4px 6px; font-size:0.84rem; font-weight:700; font-family:'Oswald',sans-serif; color:var(--accent); max-width:150px; }
.nph-tools{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; margin:6px 0 10px; }
/* ---- NBA player profile: locked tabs for non-members ---- */
.pm-tab-btn.pm-tab-locked{ opacity:.72; } .pm-tab-btn.pm-tab-locked.active{ opacity:1; }
.nbp-lock{ text-align:center; padding:34px 18px 30px; margin:14px 6px; border:1px dashed var(--border); border-radius:14px; background:var(--surface-2); }
.nbp-lock-ic{ font-size:2.2rem; } .nbp-lock h3{ margin:8px 0 6px; } .nbp-lock p{ max-width:46ch; margin:0 auto 14px; color:var(--text-muted); font-size:.88rem; line-height:1.45; }
/* ---- bigger hit-rate bar graph: taller bars with each game's number on top, the line drawn across ---- */
.nhl-spark.nbh-spark{ height:78px; gap:5px; padding:15px 4px 0; min-width:150px; box-sizing:border-box; }
.nbh-spark i{ position:relative; width:15px; border-radius:3px 3px 0 0; }
.nbh-spark i em{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:2px; font-style:normal; font-size:.64rem; font-weight:700; color:var(--text-muted); line-height:1; white-space:nowrap; }
.nbh-spark i.hit em{ color:var(--good); } .nbh-spark i.miss em{ color:var(--danger); }
.nbh-spark u{ border-top-width:2px; opacity:.9; }
.nbh-table td{ vertical-align:middle; }
@media (max-width:640px){ .nhl-spark.nbh-spark{ min-width:132px; height:70px; } .nbh-spark i{ width:12px; } }
/* ---- player profile Hit Rates: prop chips + one big labeled chart (NFL style) ---- */
.nph-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 12px; }
.nph-chip{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:92px; padding:9px 12px 8px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-family:inherit; font-size:.8rem; font-weight:700; cursor:pointer; }
.nph-chip i{ font-style:normal; font-size:.74rem; padding:1px 8px; border-radius:7px; background:rgba(127,127,127,.18); color:var(--text-muted); } .nph-chip i.hi{ background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--good); } .nph-chip i.lo{ background:rgba(255,90,90,.2); color:var(--danger); } .nph-chip i.mid{ background:rgba(255,194,51,.2); color:#e0a800; }
.nph-chip.on{ background:var(--accent); border-color:var(--accent); color:#04130a; } .nph-chip.on i{ background:rgba(0,0,0,.2); color:#04130a; }
.nph-card{ border:1px solid var(--border); border-radius:16px; background:var(--surface-2); padding:16px 16px 14px; margin:6px 0 10px; }
.nph-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .nph-head b{ font-family:'Oswald',sans-serif; font-size:1.2rem; letter-spacing:.02em; } .nph-head span{ color:var(--text-muted); font-size:.86rem; font-weight:600; }
.nph-svg{ width:100%; height:auto; display:block; }
.nph-grid{ stroke:var(--border); stroke-width:1; opacity:.7; } .nph-tick{ fill:var(--text-muted); } .nph-opp{ fill:var(--text); font-weight:700; } .nph-dt{ fill:var(--text-muted); }
.nph-bar.hit{ fill:var(--good); } .nph-bar.miss{ fill:var(--danger); opacity:.9; } .nph-bar.push{ fill:#8fa0b2; }
.nph-val{ font-weight:800; fill:var(--text); } .nph-val.hit{ fill:var(--good); } .nph-val.miss{ fill:var(--danger); }
.nph-line{ stroke:#ffc233; stroke-width:2.5; stroke-dasharray:7 5; } .nph-linebg{ fill:#ffc233; } .nph-linelab{ fill:#201700; font-weight:800; }
.nph-legend{ margin-top:6px; }
.nph-sum{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:12px; }
.nph-hr{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px; border-radius:12px; background:rgba(127,127,127,.08); } .nph-hr small{ font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .nph-hr span{ font-size:.74rem; color:var(--text-muted); text-align:center; }
.nph-hr .nbh-pill{ font-size:1rem; padding:6px 14px; }
@media (max-width:640px){ .nph-sum{ grid-template-columns:1fr; } .nph-chip{ min-width:0; flex:1 1 30%; } .nph-card{ padding:12px 10px; } }

/* ---- Hit Rates page rows: bigger bars, opponent under each bar ---- */
.nhl-spark.nbh-spark{ height:92px; gap:30px; padding:16px 14px 22px; min-width:330px; }
.nbh-spark i{ width:30px; }
.nbh-spark i b{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:5px; font-size:.74rem; font-weight:700; font-style:normal; color:var(--text-muted); letter-spacing:.04em; white-space:nowrap; }
.nbh-spark i em{ font-size:.82rem; }
@media (max-width:640px){ .nhl-spark.nbh-spark{ min-width:250px; height:84px; gap:20px; padding:16px 10px 22px; } .nbh-spark i{ width:24px; } }

/* in-depth tracking: rating breakdown bars, opportunity profile, card chips */
.nbp-dgrid3{ grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.nbp-bd{ display:flex; flex-direction:column; gap:5px; } .nbp-bd-r{ display:grid; grid-template-columns:92px 1fr 40px; align-items:center; gap:8px; font-size:.76rem; }
.nbp-bd-bar{ position:relative; height:8px; border-radius:99px; background:var(--surface-2); } .nbp-bd-bar::after{ content:''; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--border); }
.nbp-bd-bar i{ position:absolute; top:0; bottom:0; border-radius:99px; } .nbp-bd-bar i.pos{ background:var(--accent); } .nbp-bd-bar i.neg{ background:#ff6b6b; }
.nbp-bd-r b{ text-align:right; font-variant-numeric:tabular-nums; } .nbp-bd-t{ margin-top:4px; font-size:.7rem; color:var(--text-muted); }
.nbp-opp td small{ display:inline; margin-left:4px; } .nbp-opp tr.lead td:first-child{ font-weight:700; } .nbp-opp tr.lead{ background:color-mix(in srgb, var(--accent) 7%, transparent); }
.nbp-up{ color:var(--accent); font-style:normal; font-size:.7rem; margin-left:4px; } .nbp-dn{ color:#ff6b6b; font-style:normal; font-size:.7rem; margin-left:4px; }
.nbp-trk-line{ margin:8px 0 0; font-size:.76rem; line-height:1.5; } .nbp-trk-line small{ color:var(--text-muted); }
.nbr-trk{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; } .nbr-trk span{ font-size:.7rem; padding:3px 8px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); } .nbr-trk b{ color:var(--text); }
.nbr-chips{ display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 6px; } .nbr-chips span{ font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:99px; border:1px solid var(--border); cursor:help; }
.nbr-chips span.pos{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); } .nbr-chips span.neg{ color:#ff8a8a; border-color:rgba(255,107,107,.45); }
.nbp-dgrid3{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .nbp-alt-scroll{ max-height:340px; overflow:auto; border:1px solid var(--border); border-radius:10px; } .nbp-alt-scroll .nbp-mini{ margin:0; }
@media (max-width:760px){ .nbp-dgrid3{ grid-template-columns:minmax(0, 1fr); } }
.nbp-moved{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px; font-size:.62rem; font-weight:800; letter-spacing:.03em; color:#ffd23a; border:1px solid rgba(255,210,58,.5); vertical-align:middle; cursor:help; }
/* Group by game: a header row opens each game's props */
.nbp-table tr.nbp-gamehead td{ padding:14px 12px 8px; background:var(--surface-2); border-top:2px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-bottom:1px solid var(--border); }
.nbp-table tr.nbp-gamehead td > b{ display:inline-flex; align-items:center; gap:6px; font-family:'Oswald',sans-serif; font-size:1.02rem; letter-spacing:.03em; text-transform:uppercase; }
.nbp-table tr.nbp-gamehead td > span{ margin-left:12px; color:var(--text-muted); font-size:.82rem; font-weight:600; } .nbp-table tr.nbp-gamehead td > i{ margin-left:10px; font-style:normal; font-size:.7rem; color:var(--text-muted); padding:1px 8px; border-radius:99px; border:1px solid var(--border); }
@media (max-width:700px){ .nbp-table tr.nbp-gamehead td{ display:block; padding:12px 6px 6px; } }

/* injuries / volume / matchup cells: one tidy line of names, never a tall wrapped block */
#view-nba-props .nbp-table td small{ max-width:170px; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:700px){ #view-nba-props tr.nbp-row > td:nth-child(n+7):nth-child(-n+9) small{ white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; } }
/* grouped by game, the tip-off time is already in each game's header, so the column goes and the table fits the screen */
.nbp-table.by-game tr > :nth-child(2){ display:none; }
.nbp-table td:nth-child(n+7):nth-child(-n+9) small{ max-width:120px; }
@media (min-width:701px){
  #view-nba-props .nbp-table td.nhl-pl{ max-width:230px; white-space:normal; }
  #view-nba-props .nbp-who{ min-width:0; }
  #view-nba-props .nbp-table td:nth-child(n+7):nth-child(-n+9) small{ max-width:120px; }
  #view-nba-props .nbp-table td:nth-child(12){ white-space:normal; max-width:100px; }
}
@media (min-width:701px){ #view-nba-props .nbp-table th, #view-nba-props .nbp-table td{ padding-left:6px; padding-right:6px; } }
/* ---------- NBA First Basket Simulator ---------- */
.nfb-games button i, .nhl-dates button i{ font-style:normal; }
.nfb-card{ border:1px solid var(--border); border-radius:16px; background:var(--surface-2); padding:16px 18px 6px; margin:12px 0; }
.nfb-match{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.nfb-tm{ display:flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em; }
.nfb-vs{ display:flex; flex-direction:column; align-items:center; color:var(--text-muted); } .nfb-vs span{ font-family:'Oswald',sans-serif; font-size:1.3rem; } .nfb-vs small{ font-size:.74rem; }
.nfb-tip{ display:flex; height:30px; border-radius:999px; overflow:hidden; margin:14px 0 8px; font-weight:800; font-size:.8rem; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.nfb-tip span{ display:flex; align-items:center; padding:0 14px; white-space:nowrap; min-width:0; transition:width .4s; } .nfb-tip span:last-child{ justify-content:flex-end; }
.nfb-tipnote{ margin:0 0 10px !important; }
.nfb-ctl{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin:6px 0 12px; }
.nfb-ctl label{ display:flex; flex-direction:column; gap:4px; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.nfb-prog{ margin-left:auto; color:var(--text-muted); font-size:.84rem; font-variant-numeric:tabular-nums; align-self:center; }
.nfb-h{ margin:24px 0 8px; font-size:1.05rem; }

/* the ranked list: bars drawn from a shared scale (the leader fills the track), one line per player */
.nfb-list{ display:flex; flex-direction:column; gap:8px; }
.nfb-row{ border:1px solid var(--border); border-radius:14px; background:var(--surface-2); overflow:hidden; transition:border-color .15s; }
.nfb-row.open{ border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
.nfb-main{ display:grid; grid-template-columns:34px 44px minmax(120px, 210px) 1fr 92px; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; }
.nfb-rank{ font-family:'Oswald',sans-serif; font-size:1.5rem; font-weight:700; color:var(--text-muted); text-align:center; } .nfb-row[data-nfb-rank="1"] .nfb-rank, .nfb-row[data-nfb-rank="2"] .nfb-rank, .nfb-row[data-nfb-rank="3"] .nfb-rank{ color:var(--accent); }
.nfb-who{ display:flex; flex-direction:column; min-width:0; } .nfb-who b{ font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nfb-who small{ color:var(--text-muted); font-size:.74rem; display:flex; align-items:center; gap:5px; }
.nfb-barwrap{ height:22px; border-radius:11px; background:rgba(127,127,127,.14); overflow:hidden; }
.nfb-bar{ display:block; height:100%; border-radius:11px; min-width:4px; transition:width .25s ease-out; }
.nfb-p{ text-align:right; } .nfb-p b{ display:block; font-family:'Oswald',sans-serif; font-size:1.25rem; font-variant-numeric:tabular-nums; } .nfb-p small{ color:var(--text-muted); font-size:.78rem; font-variant-numeric:tabular-nums; }
.nfb-more{ padding:4px 16px 16px; border-top:1px solid var(--border); }
.nfb-sum{ margin:12px 0 10px; font-weight:600; font-size:.92rem; line-height:1.45; }
.nfb-tiles{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin-bottom:12px; }
.nfb-tiles > div{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px 6px; text-align:center; } .nfb-tiles small{ display:block; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .nfb-tiles b{ display:block; font-family:'Oswald',sans-serif; font-size:1.15rem; margin-top:2px; } .nfb-tiles i{ display:block; font-style:normal; font-size:.66rem; color:var(--text-muted); }
.nfb-why{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:6px; }
.nfb-why li{ display:grid; grid-template-columns:96px 1fr; gap:10px; padding:8px 10px; border-radius:10px; background:var(--surface); border-left:4px solid var(--border); font-size:.84rem; line-height:1.45; }
.nfb-why li b{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } .nfb-why li.good{ border-left-color:var(--good); } .nfb-why li.bad{ border-left-color:var(--danger); }
.nfb-bookrow{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .nfb-bookrow label{ display:flex; flex-direction:column; gap:3px; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.nfb-book{ width:130px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:.95rem; }
.nfb-ev{ display:inline-block; padding:4px 10px; border-radius:999px; font-weight:800; font-size:.8rem; background:rgba(127,127,127,.18); } .nfb-ev.pos{ background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--good); } .nfb-ev.neg{ background:rgba(255,90,90,.18); color:var(--danger); }
.nfb-stats{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.nfb-stats > div{ border:1px solid var(--border); border-radius:12px; background:var(--surface-2); padding:10px 12px; } .nfb-stats small{ display:block; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .nfb-stats b{ font-family:'Oswald',sans-serif; font-size:1.4rem; } .nfb-stats i{ display:block; font-style:normal; font-size:.7rem; color:var(--text-muted); }
.nfb-replay{ border:1px solid var(--border); border-radius:14px; background:var(--surface-2); padding:12px 16px; }
.nfb-replay ol{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.nfb-replay li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; line-height:1.4; animation:nfbIn .3s ease; }
@keyframes nfbIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.nfb-dot{ flex:none; width:9px; height:9px; margin-top:6px; border-radius:50%; background:var(--text-muted); } .nfb-replay li.make .nfb-dot{ background:var(--good); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); } .nfb-replay li.miss .nfb-dot{ background:var(--danger); } .nfb-replay li.tip .nfb-dot{ background:#ffc233; } .nfb-replay li.make{ font-weight:800; }
.nfb-winner{ margin-top:10px; padding:10px 14px; border-radius:12px; background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid var(--accent); font-size:1rem; }
.nfb-edit{ margin:18px 0 6px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); padding:10px 14px; } .nfb-edit summary{ cursor:pointer; font-size:.84rem; color:var(--text-muted); font-weight:600; }
.nfb-lus{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; } .nfb-lu h4{ margin:0 0 6px; font-size:.9rem; display:flex; align-items:center; gap:6px; } .nfb-lu select{ display:block; width:100%; margin-bottom:6px; padding:7px 9px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); }

@media (max-width:760px){
  .nfb-main{ grid-template-columns:26px 36px 1fr 74px; gap:8px; padding:10px; } .nfb-barwrap{ grid-column:1 / -1; grid-row:2; height:16px; }
  .nfb-rank{ font-size:1.2rem; } .nfb-p b{ font-size:1.1rem; }
  .nfb-tiles{ grid-template-columns:repeat(3, 1fr); } .nfb-why li{ grid-template-columns:1fr; gap:2px; }
  .nfb-stats{ grid-template-columns:repeat(2, 1fr); } .nfb-lus{ grid-template-columns:1fr; }
  .nfb-tm{ font-size:.95rem; } .nfb-match{ gap:12px; }
}
/* lineup status pills (confirmed / expected / projected) */
.nfb-lps{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:2px 0 8px; }
.nfb-lpill{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:.74rem; font-weight:800; letter-spacing:.02em; background:rgba(127,127,127,.2); color:var(--text-muted); }
.nfb-lpill.ok{ background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--good); } .nfb-lpill.exp{ background:rgba(255,194,51,.2); color:#e0a800; }
/* ---------- "Watch the sim" show window ---------- */
.nfs-wrap{ position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center; padding:12px; background:rgba(0,0,0,.86); backdrop-filter:blur(4px); }
.nfs-wrap.show{ display:flex; }
.nfs-card{ position:relative; width:100%; max-width:1180px; max-height:100%; overflow:auto; border-radius:18px; background:#080b11; border:1px solid color-mix(in srgb, var(--accent) 55%, #222); box-shadow:0 24px 80px rgba(0,0,0,.7); color:#ecf0f4; }
.nfs-x{ position:absolute; top:10px; right:12px; z-index:3; width:34px; height:34px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:1rem; cursor:pointer; }
.nfs-stage{ position:relative; width:100%; background:#000; border-radius:18px 18px 0 0; overflow:hidden; }
.nfs-stage canvas{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; }
.nfs-load{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.85); font-family:'Oswald',sans-serif; font-size:1.2rem; letter-spacing:.04em; }
.nfs-bar{ padding:12px 16px 14px; }
.nfs-bar input[type=range]{ width:100%; accent-color:var(--accent); margin:0 0 10px; }
.nfs-btns{ display:flex; flex-wrap:wrap; gap:8px; } .nfs-btns .btn{ min-height:38px; padding:7px 14px; font-size:.82rem; }
.nfs-note{ margin:10px 0 0 !important; color:#97a3b2 !important; font-size:.8rem; }
body.nfs-open{ overflow:hidden; }
@media (max-width:640px){ .nfs-wrap{ padding:0; align-items:flex-end; } .nfs-card{ border-radius:18px 18px 0 0; } .nfs-btns .btn{ flex:1 1 44%; } }

.nfs-speed{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:#c9d3df; margin-right:4px; } .nfs-speed select{ min-height:38px; padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff; font:inherit; font-weight:700; cursor:pointer; }

/* ---- First Basket: the chance column (big number + small %, fair price underneath) and a thicker, cleaner bar ---- */
.nfb-main{ grid-template-columns:34px 44px minmax(120px, 210px) 1fr 112px; }
.nfb-barwrap{ height:14px; border-radius:7px; background:rgba(127,127,127,.16); } .nfb-bar{ border-radius:7px; }
.nfb-p{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.nfb-p b{ display:inline-flex; align-items:baseline; justify-content:flex-end; min-width:84px; padding:3px 12px 3px 14px; border-radius:12px; background:rgba(127,127,127,.14); font-family:'Oswald',sans-serif; font-size:1.45rem; font-weight:700; line-height:1.15; letter-spacing:.01em; }
.nfb-p b u{ text-decoration:none; font-size:.8rem; font-weight:600; margin-left:1px; opacity:.7; }
.nfb-p small{ font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); } .nfb-p small em{ font-style:normal; font-weight:800; color:var(--text); letter-spacing:.02em; font-size:.8rem; }
.nfb-row[data-nfb-rank="1"] .nfb-p b, .nfb-row[data-nfb-rank="2"] .nfb-p b, .nfb-row[data-nfb-rank="3"] .nfb-p b{ background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent); }
@media (max-width:760px){ .nfb-main{ grid-template-columns:26px 36px 1fr auto; } .nfb-p b{ min-width:0; font-size:1.25rem; padding:2px 10px; } }

/* ---- First Basket list v2: team-colored cards, a gradient meter with the chance inside it, the fair price as a chip ---- */
.nfb-row{ border:1px solid color-mix(in srgb, var(--tc, #4f9dff) 38%, var(--border)); border-left:5px solid var(--tc, #4f9dff); background:linear-gradient(100deg, color-mix(in srgb, var(--tc, #4f9dff) 12%, var(--surface-2)), var(--surface-2) 55%); }
.nfb-row.open{ border-color:color-mix(in srgb, var(--tc, #4f9dff) 70%, var(--border)); border-left-width:5px; }
.nfb-main{ grid-template-columns:34px 58px minmax(120px, 210px) 1fr 104px; gap:14px; }
.nfb-ph{ display:inline-flex; width:54px; height:54px; border-radius:50%; padding:2px; border:3px solid var(--tc, #4f9dff); background:var(--surface); box-shadow:0 0 0 0 transparent; overflow:hidden; }
.nfb-ph img, .nfb-ph .nba-hs{ width:100% !important; height:100% !important; border-radius:50%; object-fit:cover; }
.nfb-row[data-nfb-rank="1"] .nfb-ph, .nfb-row[data-nfb-rank="2"] .nfb-ph, .nfb-row[data-nfb-rank="3"] .nfb-ph{ box-shadow:0 0 14px color-mix(in srgb, var(--tc, #4f9dff) 65%, transparent); }
.nfb-meter{ height:34px; border-radius:17px; background:rgba(127,127,127,.16); overflow:hidden; }
.nfb-meter .nfb-bar{ height:100%; min-width:92px; border-radius:17px; display:flex; align-items:center; justify-content:flex-end; padding:0 14px 0 10px; background:linear-gradient(90deg, color-mix(in srgb, var(--tc, #4f9dff) 55%, #000), var(--tc, #4f9dff)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); transition:width .25s ease-out; }
.nfb-pin{ display:inline-flex; align-items:baseline; font-family:'Oswald',sans-serif; font-size:1.3rem; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.65); font-variant-numeric:tabular-nums; } .nfb-pin u{ text-decoration:none; font-size:.8rem; margin-left:1px; opacity:.85; }
.nfb-p{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; } .nfb-p small{ font-size:.6rem; letter-spacing:.1em; font-weight:800; color:var(--text-muted); }
.nfb-p em{ font-style:normal; font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:600; padding:3px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--tc, #4f9dff) 70%, transparent); background:color-mix(in srgb, var(--tc, #4f9dff) 14%, transparent); font-variant-numeric:tabular-nums; }
@media (max-width:760px){ .nfb-main{ grid-template-columns:26px 46px 1fr auto; gap:10px; } .nfb-ph{ width:44px; height:44px; } .nfb-meter{ grid-column:1 / -1; grid-row:2; height:30px; } .nfb-pin{ font-size:1.15rem; } }

/* ---- First Basket: compare with a sportsbook ---- */
.nfb-odds summary{ cursor:pointer; font-weight:700; } .nfb-odds summary i{ font-style:normal; color:var(--accent); font-weight:600; }
.nfb-odds-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.nfb-odds textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-size:.95rem; resize:vertical; }
.nfb-best{ border:1px solid var(--accent); border-radius:16px; padding:14px 16px; margin:0 0 12px; background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2) 70%); box-shadow:0 12px 36px -20px var(--accent); }
.nfb-best.none{ border-color:var(--border); background:var(--surface-2); box-shadow:none; display:flex; flex-direction:column; gap:3px; } .nfb-best.none span{ color:var(--text-muted); font-size:.86rem; }
.nfb-best-tag{ display:inline-block; padding:3px 10px; border-radius:999px; background:var(--accent); color:#000; font-size:.7rem; font-weight:800; letter-spacing:.08em; } .nfb-best > b{ display:block; font-family:'Oswald',sans-serif; font-size:1.6rem; margin:6px 0 8px; }
.nfb-best-n{ display:flex; flex-wrap:wrap; gap:8px; } .nfb-best-n > div{ min-width:84px; padding:8px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--border); text-align:center; } .nfb-best-n small{ display:block; font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .nfb-best-n b{ font-family:'Oswald',sans-serif; font-size:1.25rem; } .nfb-best-n .up{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--surface)); } .nfb-best-n .up b{ color:var(--accent); }
.nfb-best p{ margin:8px 0 0; font-size:.85rem; color:var(--text-muted); }
.nfb-cmp{ display:inline-block; margin-top:3px; padding:2px 9px; border-radius:999px; font-size:.7rem; font-weight:700; white-space:nowrap; background:rgba(127,127,127,.16); color:var(--text-muted); } .nfb-cmp b{ color:var(--text); } .nfb-cmp.pos{ background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent); } .nfb-cmp.pos b{ color:var(--accent); } .nfb-cmp u{ text-decoration:none; font-weight:900; }
.nfb-row.evpos{ box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 10px 30px -16px var(--accent); }
.nfb-main{ grid-template-columns:34px 58px minmax(120px, 210px) 1fr 150px; }
@media (max-width:760px){ .nfb-main{ grid-template-columns:26px 46px 1fr auto; } }
/* ---- Spread Score page ---- */
.ss-controls{ display:flex; flex-direction:column; gap:10px; margin:14px 0 14px; }
.ss-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ss-sp{ flex:1 1 20px; }
.ss-q{ min-width:190px; padding:9px 14px; border-radius:999px; border:1px solid var(--border, rgba(255,255,255,.18)); background:rgba(255,255,255,.05); color:inherit; font:inherit; }
.ss-table td, .ss-table th{ white-space:nowrap; } .ss-table td.l{ white-space:normal; }
.ss-sub{ display:block; color:var(--text-muted, #97a3b2); font-size:.74rem; margin-top:1px; }
.ss-rk{ color:var(--text-muted, #97a3b2); font-weight:700; }
.ss-score{ font-size:1.12rem; color:var(--accent); }
.ss-range{ color:var(--text-muted, #97a3b2); }
.ss-whys{ min-width:220px; }
.ss-why{ display:inline-block; margin:2px 6px 2px 0; padding:2px 9px; border-radius:999px; font-size:.74rem; font-weight:700; border:1px solid currentColor; }
.ss-why.pos{ color:#22d65a; } .ss-why.neg{ color:#ff6b6b; }
.ss-why-none{ color:var(--text-muted, #97a3b2); font-size:.78rem; }
.ss-rec td small{ color:var(--text-muted, #97a3b2); font-weight:500; } .ss-best{ color:var(--accent); font-weight:800; }
.ss-fgrid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:10px; }
.ss-f{ border:1px solid var(--border, rgba(255,255,255,.12)); border-radius:12px; padding:12px 14px; background:rgba(255,255,255,.03); }
.ss-f h4{ margin:0 0 8px; font-size:1rem; } .ss-f h4 small{ font-weight:500; color:var(--text-muted, #97a3b2); font-size:.74rem; margin-left:6px; }
.ss-f ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.ss-f li{ display:flex; justify-content:space-between; gap:8px; font-size:.8rem; } .ss-f li b.pos{ color:#22d65a; } .ss-f li b.neg{ color:#ff6b6b; }
@media (max-width:1000px){ .ss-fgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .ss-fgrid{ grid-template-columns:1fr; } .ss-q{ flex:1 1 100%; } }
/* ---- Game dropdown (snippet-gamedd.js) ---- */
.gdd{ position:relative; margin:10px 0 12px; max-width:640px; z-index:5; }
.gdd-btn{ width:100%; display:flex; align-items:center; gap:12px; text-align:left; padding:12px 16px; min-height:54px; border-radius:14px; border:1px solid var(--border, rgba(255,255,255,.16)); background:var(--surface, #12161d); color:var(--text, #fff); font:inherit; cursor:pointer; }
.gdd-btn:hover, .gdd.open .gdd-btn{ border-color:var(--accent, var(--accent)); }
.gdd-cur{ flex:1 1 auto; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
.gdd-t{ display:inline-flex; align-items:center; gap:8px; min-width:0; } .gdd-t b{ font-family:'Oswald',sans-serif; font-weight:600; font-size:1rem; letter-spacing:.01em; }
.gdd em{ font-style:normal; color:var(--text-muted, #97a3b2); font-weight:700; }
.gdd-logo{ width:26px; height:26px; object-fit:contain; flex-shrink:0; }
.gdd img[src$="nhl/ANA.png"], .gdd img[src*="/img/nhl/"]{ filter:drop-shadow(0 0 1px rgba(255,255,255,.55)); }
.gdd-all{ font-family:'Oswald',sans-serif; font-weight:600; font-size:1rem; }
.gdd-meta{ flex:0 0 auto; color:var(--text-muted, #97a3b2); font-size:.8rem; white-space:nowrap; }
.gdd-car{ color:var(--text-muted, #97a3b2); transition:transform .15s; } .gdd.open .gdd-car{ transform:rotate(180deg); }
.gdd-list{ display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); max-height:min(62vh, 520px); overflow:auto; border-radius:14px; border:1px solid var(--accent, var(--accent)); background:var(--surface, #12161d); box-shadow:0 18px 50px -10px rgba(0,0,0,.7); padding:6px; }
.gdd.open .gdd-list{ display:block; }
.gdd-row{ width:100%; display:flex; align-items:center; gap:12px; text-align:left; padding:10px 12px; min-height:52px; border:0; border-radius:10px; background:none; color:var(--text, #fff); font:inherit; cursor:pointer; }
.gdd-row:hover, .gdd-row:focus-visible{ background:rgba(255,255,255,.07); } .gdd-row.on{ background:color-mix(in srgb, var(--accent, var(--accent)) 16%, transparent); }
.gdd-row.lock{ opacity:.8; }
.gdd-main{ flex:1 1 auto; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; }
.gdd-abbr{ display:none; }
@media (max-width:640px){
  .gdd{ max-width:none; }
  /* phones: short team codes (CLE @ PHI), one tidy line per game; the start time sits under it, the caret stays at the right */
  .gdd-full{ display:none; } .gdd-abbr{ display:inline; }
  .gdd-t{ gap:6px; flex:0 0 auto; } .gdd-t b{ font-size:1.12rem; letter-spacing:.03em; } .gdd-logo{ width:30px; height:30px; }
  .gdd-btn{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px; padding:10px 14px; min-height:60px; }
  .gdd-cur{ grid-column:1; flex-wrap:nowrap; gap:8px; } .gdd-car{ grid-column:2; grid-row:1; font-size:1.1rem; }
  .gdd-btn .gdd-meta{ grid-column:1 / -1; grid-row:2; white-space:normal; font-size:.78rem; }
  .gdd-row{ min-height:58px; padding:8px 10px; } .gdd-row .gdd-main{ flex-wrap:nowrap; gap:8px; } .gdd-row .gdd-meta{ font-size:.74rem; text-align:right; max-width:42%; white-space:normal; }
  .gdd-list{ position:fixed; left:8px; right:8px; top:auto; bottom:calc(var(--ab-h, 58px) + var(--ab-safe, 0px) + 40px); max-height:64vh; z-index:70; }
  .gdd.open::before{ content:''; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:69; }
}
/* ---- Star games (snippet-stars.js) ---- */
.star-badge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font:800 .72rem 'Oswald',sans-serif; letter-spacing:.08em; color:#1a1300; background:linear-gradient(135deg,#ffd84d,#ffb300); box-shadow:0 0 0 1px rgba(255,200,0,.5), 0 4px 14px -4px rgba(255,190,0,.55); white-space:nowrap; }
.star-badge.s3{ background:linear-gradient(135deg,#fff1a8,#ffc400 60%,#ff9d00); }
.star-strip{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; max-width:900px; }
.star-head{ flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; } .star-head b{ font-family:'Oswald',sans-serif; letter-spacing:.04em; color:#ffc400; } .star-head span{ color:var(--text-muted); font-size:.78rem; }
.star-chip{ flex:1 1 240px; display:grid; grid-template-columns:auto 1fr; gap:0 10px; align-items:center; text-align:left; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,196,0,.45); background:linear-gradient(135deg, rgba(255,196,0,.1), transparent 70%), var(--surface-2); color:var(--text); font:inherit; cursor:pointer; }
.star-chip:hover{ border-color:#ffc400; }
.star-n{ grid-row:1 / span 2; font:800 .95rem 'Oswald',sans-serif; letter-spacing:.08em; color:#ffc400; } .star-chip b{ font-family:'Oswald',sans-serif; font-size:1rem; } .star-chip small{ grid-column:2; color:var(--text-muted); font-size:.74rem; line-height:1.3; }
.nbh-star{ margin:8px auto 0; max-width:34ch; text-align:center; } .nbh-star b{ display:block; color:#ffc400; font:800 .86rem 'Oswald',sans-serif; letter-spacing:.06em; text-transform:uppercase; } .nbh-star span{ display:block; font-size:.74rem; line-height:1.3; opacity:.85; }

.star-share{ margin-left:auto; font:700 .72rem 'Oswald',sans-serif; letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:999px; border:1px solid #ffc400; color:#ffc400 !important; text-decoration:none; }
.star-share:hover{ background:#ffc400; color:#000 !important; }
/* ---- NBA Prop Lab (snippet-nba-lab.js) ---- */
.nlab-filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin:8px 0; }
.nlab-chk{ flex-direction:row !important; align-items:center; gap:6px !important; padding-bottom:10px; }
.nlab-wrap{ max-height:none; }
.nlab-table th{ cursor:pointer; user-select:none; white-space:nowrap; } .nlab-table th.on{ color:var(--accent); }
.nlab-table td{ white-space:nowrap; } .nlab-table tr[data-nlab-open]{ cursor:pointer; } .nlab-table tr[data-nlab-open]:hover{ background:rgba(255,255,255,.05); }
.nlab-pl b{ display:block; } .nlab-pl small, .nlab-table td small{ display:block; color:var(--text-muted); font-size:.72rem; font-weight:500; }
.nlab-pill{ display:inline-flex; align-items:baseline; gap:5px; padding:2px 9px; border-radius:999px; background:rgba(127,127,127,.16); font-size:.8rem; white-space:nowrap; } .nlab-pill b{ font-weight:700; } .nlab-pill i{ font-style:normal; color:var(--text-muted); font-size:.74rem; }
.nlab-pill.hi{ background:color-mix(in srgb, var(--good) 26%, transparent); } .nlab-pill.mid{ background:color-mix(in srgb, var(--good) 13%, transparent); } .nlab-pill.lo{ background:color-mix(in srgb, var(--danger) 20%, transparent); }
.nlab-none{ color:var(--text-muted); }
.nlab-dv{ display:inline-flex; align-items:baseline; gap:4px; padding:2px 9px; border-radius:999px; background:rgba(127,127,127,.14); font-weight:700; font-size:.8rem; } .nlab-dv i{ font-style:normal; font-weight:500; font-size:.68rem; color:var(--text-muted); }
.nlab-dv.soft{ background:color-mix(in srgb, var(--good) 26%, transparent); color:var(--good); } .nlab-dv.tough{ background:color-mix(in srgb, var(--danger) 22%, transparent); color:var(--danger); }
.nlab-go{ min-height:32px !important; padding:4px 12px !important; font-size:.78rem !important; }
/* deep dive window */
.nlab-modal{ display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.72); overflow-y:auto; padding:20px 12px 40px; }
.nlab-modal.show{ display:block; } body.nlab-open{ overflow:hidden; }
.nlab-card-w{ position:relative; max-width:1000px; margin:0 auto; background:var(--surface, #12161d); border:1px solid var(--border, rgba(255,255,255,.14)); border-radius:18px; padding:20px 22px 26px; }
.nlab-x{ position:absolute; top:12px; right:14px; width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); color:inherit; font-size:1.1rem; cursor:pointer; z-index:2; }
.nlab-head{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; padding-right:48px; margin-bottom:14px; }
.nlab-who{ display:flex; align-items:center; gap:12px; } .nlab-who h2{ margin:0; font-size:1.5rem; } .nlab-who small{ color:var(--text-muted); }
.nlab-top{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; } .nlab-top > div{ min-width:84px; padding:8px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); text-align:center; }
.nlab-top small, .nlab-sum small{ display:block; font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .nlab-top b, .nlab-sum b{ font-family:'Oswald',sans-serif; font-size:1.15rem; }
.nlab-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.nlab-tools{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; margin-bottom:12px; }
.nlab-step{ display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:12px; overflow:hidden; } .nlab-step button{ width:40px; height:42px; background:var(--surface-2); border:0; color:inherit; font-size:1.2rem; cursor:pointer; } .nlab-step input{ width:74px; height:42px; text-align:center; border:0; background:var(--surface); color:inherit; font-size:1rem; font-weight:700; }
.nlab-card{ border:1px solid var(--border); border-radius:14px; background:var(--surface-2); padding:12px 14px; }
.nlab-sum{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; } .nlab-sum > div{ min-width:90px; padding:6px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--border); text-align:center; }
.nlab-h3{ margin:22px 0 8px; font-size:1.05rem; } .nlab-h3 small{ font-weight:500; color:var(--text-muted); font-size:.78rem; margin-left:6px; } .nlab-h4{ margin:0 0 6px; font-size:.92rem; }
.nlab-split td, .nlab-lines td{ white-space:nowrap; } .nlab-grp td{ background:rgba(255,255,255,.05); font-weight:800; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.nlab-lines tr[data-nlab-line]{ cursor:pointer; } .nlab-lines tr.nlab-cur td{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
.nlab-mus{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; } .nlab-mu{ padding:8px 10px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); text-align:center; } .nlab-mu small{ display:block; font-size:.64rem; letter-spacing:.07em; color:var(--text-muted); font-weight:700; } .nlab-mu b{ font-family:'Oswald',sans-serif; font-size:1.1rem; } .nlab-mu i{ display:block; font-style:normal; font-size:.72rem; color:var(--text-muted); }
.nlab-mu.soft{ border-color:var(--good); background:color-mix(in srgb, var(--good) 14%, var(--surface-2)); } .nlab-mu.tough{ border-color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, var(--surface-2)); }
.nlab-tsb{ margin:8px 0 0; font-size:.82rem; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:4px 14px; } .nlab-tsb b{ color:var(--text); }
.nlab-cols{ display:grid; grid-template-columns:1.2fr 1fr; gap:18px; }
.nlab-part{ display:grid; grid-template-columns:130px 1fr 52px; align-items:center; gap:8px; font-size:.82rem; margin-bottom:4px; } .nlab-part i{ display:block; height:10px; border-radius:5px; } .nlab-part i.pos{ background:var(--good); } .nlab-part i.neg{ background:var(--danger); } .nlab-part b{ text-align:right; } .nlab-part b.pos{ color:var(--good); } .nlab-part b.neg{ color:var(--danger); }
.nlab-mates{ list-style:none; margin:0 0 6px; padding:0; display:grid; gap:6px; } .nlab-mates li{ padding:7px 10px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); font-size:.86rem; } .nlab-mates small{ display:block; color:var(--text-muted); font-size:.72rem; }
.nlab-adv{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:.82rem; color:var(--text-muted); } .nlab-adv b{ color:var(--text); }
.nlab-act{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px; }
@media (max-width:760px){
  .nlab-modal{ padding:0; } .nlab-card-w{ border-radius:0; min-height:100vh; padding:16px 12px calc(30px + var(--ab-h, 58px)); } .nlab-who h2{ font-size:1.25rem; } .nlab-top{ margin-left:0; width:100%; } .nlab-top > div{ flex:1 1 28%; min-width:0; }
  .nlab-cols{ grid-template-columns:1fr; } .nlab-part{ grid-template-columns:96px 1fr 46px; } .nlab-filters .nbh-lab{ flex:1 1 44%; } .nlab-step{ order:-1; }
  .nlab-card-w .btn{ min-height:44px; }
}

.nlab-chk{ align-self:center; } .nlab-chk input{ width:20px; height:20px; }
.nlab-table, .nlab-split, .nlab-lines{ min-width:640px; }

/* ---- Deep dive v2: bigger window, two-column layout, shared by the big window and the profile "Research" tab ---- */
.nlab-card-w{ max-width:1400px; width:min(97vw, 1400px); padding:26px 30px 34px; border-radius:20px; }
.nlab-modal{ padding:24px 8px 48px; }
.nlab-page{ container-type:inline-size; }
.nlab-page .nph-svg{ width:100%; height:auto; display:block; }
/* hit-rate pill on the chart (class fills, no color-mix, so the PNG export keeps them) */
.nph-hrbg{ fill:var(--text-muted); fill-opacity:.16; stroke:var(--text-muted); stroke-opacity:.7; stroke-width:1; } .nph-hrlab{ fill:var(--text); font-weight:700; font-family:'Oswald',sans-serif; letter-spacing:.02em; }
.nph-hrbg.good{ fill:var(--good); fill-opacity:.2; stroke:var(--good); } .nph-hrbg.bad{ fill:var(--danger); fill-opacity:.2; stroke:var(--danger); } .nph-hrbg.mid{ fill:var(--warn, #f5b942); fill-opacity:.2; stroke:var(--warn, #f5b942); }
.nph-hrlab.good{ fill:var(--good); } .nph-hrlab.bad{ fill:var(--danger); }
.nph-small{ display:block; margin:2px 0 6px; font-size:.74rem; color:var(--text-muted); }
.nlab-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 28px; padding-right:52px; margin-bottom:12px; }
.nlab-page.profile .nlab-head{ padding-right:0; }
.nlab-who h2{ font-size:1.9rem; line-height:1.1; } .nlab-who .nba-hs{ width:64px; height:64px; }
.nlab-next{ display:flex; flex-direction:column; align-items:flex-end; padding:8px 16px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); } .nlab-next small{ font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .nlab-next b{ font-family:'Oswald',sans-serif; font-size:1.25rem; } .nlab-next span{ font-size:.8rem; color:var(--text-muted); }
.nlab-bar{ display:flex; flex-direction:column; gap:10px; padding:10px 0 12px; margin-bottom:6px; border-bottom:1px solid var(--border); }
.nlab-modal .nlab-bar{ position:sticky; top:0; z-index:4; background:var(--surface, #12161d); }
.nlab-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0; } .nlab-chips .nph-chip{ display:inline-flex; align-items:center; gap:7px; }
.nlab-rt{ font-style:normal; font-size:.7rem; font-weight:800; padding:1px 7px; border-radius:999px; background:rgba(127,127,127,.25); } .nlab-rt.good, .nlab-rt.hi, .nlab-rt.great{ background:var(--good); color:#000; }
.nlab-grid{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; margin-top:14px; }
@container (min-width: 880px){ .nlab-grid{ grid-template-columns:minmax(0, 1.6fr) minmax(320px, 1fr); } .nlab-side{ position:sticky; top:84px; } .nlab-page.profile .nlab-side{ top:12px; } }
.nlab-main, .nlab-side{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.nlab-box{ border:1px solid var(--border); border-radius:16px; background:var(--surface-2); padding:14px 16px 16px; min-width:0; }
.nlab-box .nlab-h3{ margin:0 0 10px; font-size:1.05rem; } .nlab-box .table-wrap{ border:0; }
.nlab-ch{ display:flex; justify-content:space-between; align-items:baseline; }
.nlab-sum{ gap:10px; } .nlab-sum > div{ flex:1 1 90px; background:var(--surface-3, var(--surface)); }
.nlab-sum b{ font-size:1.3rem; }
.nlab-pickc{ border:1px solid var(--accent); border-radius:16px; padding:14px 16px; background:linear-gradient(130deg, color-mix(in srgb, var(--accent) 14%, var(--surface-2)), var(--surface-2) 70%); }
.nlab-pickc.none{ border-color:var(--border); background:var(--surface-2); display:flex; flex-direction:column; gap:3px; } .nlab-pickc.none small{ text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; color:var(--text-muted); font-weight:700; } .nlab-pickc.none b{ font-family:'Oswald',sans-serif; font-size:1.3rem; } .nlab-pickc.none span{ color:var(--text-muted); font-size:.84rem; }
.nlab-pk-top{ display:flex; align-items:center; gap:14px; } .nlab-pk-top small{ display:block; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .nlab-pk-top b:not(.nbp-rate){ font-family:'Oswald',sans-serif; font-size:1.45rem; line-height:1.15; display:block; } .nlab-pk-top span{ color:var(--text-muted); font-size:.86rem; }
.nlab-pk-n{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:12px; } .nlab-pk-n > div{ padding:7px 6px; border-radius:12px; background:var(--surface); border:1px solid var(--border); text-align:center; } .nlab-pk-n small{ display:block; font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .nlab-pk-n b{ font-family:'Oswald',sans-serif; font-size:1.15rem; }
.nlab-mu.cur{ outline:2px solid var(--accent); }
.nlab-mus{ grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); }
.nlab-act{ margin-top:18px; }
@media (max-width:760px){ .nlab-card-w{ padding:16px 12px calc(30px + var(--ab-h, 58px)); border-radius:0; width:100%; } .nlab-who h2{ font-size:1.4rem; } .nlab-who .nba-hs{ width:52px; height:52px; } .nlab-next{ align-items:flex-start; } .nlab-pk-n{ grid-template-columns:repeat(2, 1fr); } .nlab-box{ padding:12px 10px 14px; } }

.nlab-page.profile .nlab-who{ display:none; } .nlab-page.profile .nlab-head{ justify-content:flex-end; margin-bottom:4px; }
.nlab-page.profile .nlab-bar{ padding-top:2px; }

/* ---- Deep Dive: intro callout and bigger buttons ---- */
.dd-intro{ display:flex; gap:14px; align-items:flex-start; margin:10px 0 14px; padding:14px 16px; border:1px solid var(--accent); border-radius:14px; background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 13%, var(--surface-2)), var(--surface-2) 75%); font-size:.92rem; line-height:1.5; }
.dd-intro .dd-ic{ font-size:1.6rem; line-height:1; } .dd-intro b{ color:var(--accent); }
.nbr-dive-btn{ min-height:50px !important; font-size:1.05rem !important; font-weight:800 !important; padding:12px 24px !important; flex:1 1 auto; }
.nbr-act{ gap:10px; } .nbr-act .btn{ min-height:46px; }
.nlab-go{ min-height:44px !important; padding:8px 20px !important; font-size:.92rem !important; font-weight:800 !important; background:var(--accent) !important; color:#000 !important; border-color:var(--accent) !important; }
.nbr-name, .nhl-name, .nlab-pl b{ cursor:pointer; } .nbr-name:hover, .nhl-name:hover, .nlab-pl b:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.nbr-altrow, .nbr-game li[data-nbr-dive]{ cursor:pointer; }
@media (max-width:640px){ .dd-intro{ padding:12px; font-size:.86rem; } .nbr-dive-btn{ width:100%; } }

.nbr-card > .nbr-dive-btn{ width:100%; margin:2px 0 10px; }

.nbr-card > .nbr-dive-btn{ flex:none !important; height:54px; min-height:54px !important; align-self:stretch; font-size:1.1rem !important; }

/* ---- Deep Dive search bar ---- */
.dd-search-w{ position:relative; margin:12px 0 14px; }
.dds-box{ position:relative; display:flex; align-items:center; gap:10px; padding:0 16px; min-height:56px; border:2px solid var(--accent); border-radius:16px; background:var(--surface-2); box-shadow:0 10px 34px -18px var(--accent); }
.dds-box:focus-within{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 10px 34px -14px var(--accent); }
.dds-ic{ font-size:1.5rem; line-height:1; }
.dds-in{ flex:1; min-width:0; height:54px; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:1.1rem; font-weight:600; }
.dds-in::placeholder{ color:var(--text-muted); font-weight:500; }
.dds-list{ position:absolute; left:-2px; right:-2px; top:calc(100% + 6px); z-index:60; max-height:420px; overflow:auto; border:1px solid var(--accent); border-radius:14px; background:var(--surface, #12161d); box-shadow:0 18px 50px -10px rgba(0,0,0,.75); padding:6px; }
.dds-row{ width:100%; display:flex; align-items:center; gap:12px; text-align:left; padding:10px 12px; min-height:54px; border:0; border-radius:10px; background:none; color:var(--text); font:inherit; cursor:pointer; }
.dds-row:hover, .dds-row.on{ background:color-mix(in srgb, var(--accent) 16%, transparent); }
.dds-n{ flex:1; min-width:0; display:flex; flex-direction:column; } .dds-n b{ font-size:1rem; } .dds-n small{ color:var(--text-muted); font-size:.78rem; }
.dds-go{ color:var(--accent); font-weight:800; font-size:.82rem; white-space:nowrap; }
.dds-none{ padding:14px; color:var(--text-muted); }
.dds-chips{ display:flex; gap:6px; margin-top:8px; } .dds-chips button{ padding:6px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; min-height:34px; } .dds-chips button.on{ background:var(--accent); color:#000; border-color:var(--accent); }
.dd-search.big .dds-box{ min-height:64px; } .dd-search.big .dds-in{ height:62px; font-size:1.2rem; }
/* ---- compact vertical Top Plays ---- */
.nbr-list{ display:flex; flex-direction:column; gap:8px; }
.nbr-row{ display:grid; grid-template-columns:52px minmax(190px, 1.3fr) minmax(150px, 1fr) minmax(190px, .9fr) 150px; align-items:center; gap:10px 16px; padding:10px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); }
.nbr-row:hover{ border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
.nbr-row .nbp-rate.big{ width:46px; height:46px; font-size:1.2rem; }
.nbr-row .nbr-who{ display:flex; align-items:center; gap:10px; min-width:0; } .nbr-row .nbr-who b{ display:block; font-size:1rem; } .nbr-row .nbr-who small{ display:flex; align-items:center; gap:5px; color:var(--text-muted); font-size:.74rem; }
.nbr-row .nbr-pick{ display:flex; flex-direction:column; gap:1px; padding:0; border:0; background:none; } .nbr-row .nbr-pick b{ font-size:1rem; } .nbr-row .nbr-pick span{ color:var(--text-muted); font-size:.82rem; } .nbr-row .nbr-pick em{ font-style:normal; }
.nbr-mini3{ display:flex; gap:18px; } .nbr-mini3 span{ display:flex; flex-direction:column; align-items:center; } .nbr-mini3 i{ font-style:normal; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .nbr-mini3 b{ font-family:'Oswald',sans-serif; font-size:1.1rem; }
.nbr-row .nbr-dive-btn{ width:100%; height:44px; min-height:44px !important; font-size:.95rem !important; padding:0 14px !important; }
@media (max-width:900px){ .nbr-row{ grid-template-columns:48px 1fr auto; } .nbr-row .nbr-pick{ grid-column:2; } .nbr-mini3{ grid-column:3; grid-row:2; gap:12px; } .nbr-row .nbr-dive-btn{ grid-column:1 / -1; } }
@media (max-width:560px){ .dds-in{ font-size:1rem; } .dd-search.big .dds-in{ font-size:1.05rem; } .dds-go{ display:none; } .nbr-mini3{ grid-column:2 / -1; grid-row:3; justify-content:space-between; } .nbr-row .nbr-pick{ grid-column:2 / -1; } }

/* =====================================================================
   Prop Research polish: quieter chrome, one clear hierarchy, ghost buttons, tidy filters.
   (later rules on purpose: they override the first pass above)
   ===================================================================== */
/* intro + search: an info strip and one clean search field instead of two loud green boxes */
.dd-intro{ gap:12px; align-items:center; margin:12px 0 10px; padding:11px 14px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:12px; background:var(--surface-2); font-size:.84rem; line-height:1.5; color:var(--text-muted); }
.dd-intro .dd-ic{ font-size:1.25rem; opacity:.9; } .dd-intro b{ color:var(--text); }
.dd-search-w{ margin:0 0 14px; }
.dds-box{ min-height:52px; padding:0 16px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease; }
.dds-box:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.dds-box:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.dds-ic{ font-size:1.2rem; opacity:.85; } .dds-in{ height:50px; font-size:1rem; }
.dd-search.big .dds-box{ min-height:54px; } .dd-search.big .dds-in{ height:52px; font-size:1.05rem; }
.dds-list{ border-color:var(--border); border-radius:14px; }
/* "how the rating works" */
.nbr-how{ margin:0 0 16px; padding:0; border-radius:12px; overflow:hidden; }
.nbr-how summary{ padding:12px 14px; font-weight:700; font-size:.9rem; list-style:none; display:flex; align-items:center; gap:8px; color:var(--text); }
.nbr-how summary::-webkit-details-marker{ display:none; } .nbr-how summary::after{ content:'+'; margin-left:auto; color:var(--accent); font-size:1.2rem; line-height:1; }
.nbr-how[open] summary::after{ content:'–'; } .nbr-how > div{ padding:0 14px 12px; }
/* section headings */
.nbr-h{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:26px 0 12px; font-size:1.2rem; letter-spacing:.03em; text-transform:uppercase; }
.nbr-h::before{ content:''; align-self:center; width:4px; height:18px; border-radius:3px; background:var(--accent); }
.nbr-h small{ margin:0; font-family:Inter,system-ui,sans-serif; font-size:.74rem; text-transform:none; letter-spacing:0; }
/* date tabs, market pills and dropdowns */
#view-nba-research .nhl-dates{ gap:8px; margin:6px 0 12px; }
#view-nba-research .cat-filters{ gap:6px; }
#view-nba-research .cat-filters button, #view-nba-research .nhl-dates button{ font-size:.8rem; padding:6px 13px; min-height:34px; }
#view-nba-research .nhl-ctl{ gap:10px 14px; }
#view-nba-research select, .nlab-filters select, .nlab-tools select{ appearance:none; -webkit-appearance:none; height:40px; min-width:150px; padding:0 34px 0 13px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238fa0b2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; color:var(--text); font:inherit; font-size:.84rem; font-weight:600; cursor:pointer; text-overflow:ellipsis; }
#view-nba-research select:hover, .nlab-filters select:hover, .nlab-tools select:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
#view-nba-research select:focus-visible, .nlab-filters select:focus-visible{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#view-nba-research .nhl-sel select{ min-width:170px; }
.nlab-filters{ gap:12px 14px; margin:10px 0 8px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); }
.nbh-lab{ font-size:.64rem !important; font-weight:800; letter-spacing:.08em !important; }
.nlab-filters input[type=text], .nlab-filters input[type=search]{ height:40px; border-radius:10px; padding:0 14px; border:1px solid var(--border); background:var(--surface); color:var(--text); min-width:220px; }
.nlab-chk input{ accent-color:var(--accent); }
/* rating badge: a ring, not a solid blob */
.nbp-rate{ box-sizing:border-box; border:1.5px solid transparent; }
.nbp-rate.hi{ background:color-mix(in srgb, var(--accent) 16%, transparent); border-color:var(--accent); color:var(--accent); }
.nbp-rate.mid{ background:rgba(255,194,51,.14); border-color:rgba(255,194,51,.7); color:#ffc233; }
.nbp-rate.lo{ background:rgba(127,127,127,.12); border-color:rgba(127,127,127,.35); color:var(--text-muted); }
.nbp-rate.big{ box-shadow:0 0 0 4px color-mix(in srgb, currentColor 10%, transparent); border-width:2px; }
/* Top plays rows */
.nbr-list{ gap:8px; }
.nbr-row{ position:relative; gap:10px 18px; padding:12px 16px 12px 18px; border-radius:14px; background:var(--surface-2); transition:border-color .15s ease, transform .15s ease, background .15s ease; overflow:hidden; }
.nbr-row::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:rgba(127,127,127,.35); }
.nbr-row:has(.nbp-rate.hi)::before{ background:var(--accent); } .nbr-row:has(.nbp-rate.mid)::before{ background:#ffc233; }
.nbr-row:hover{ background:color-mix(in srgb, var(--accent) 5%, var(--surface-2)); transform:translateY(-1px); }
.nbr-row .nbr-who b{ font-weight:700; letter-spacing:.005em; } .nbr-row .nbr-pick b{ font-family:'Oswald',sans-serif; font-size:1.1rem; letter-spacing:.02em; font-weight:600; }
.nbr-row .nbr-pick span{ font-size:.8rem; } .nbr-row .nbr-pick span em{ color:var(--text-muted); opacity:.9; }
.nbr-mini3{ gap:8px; } .nbr-mini3 span{ min-width:62px; padding:5px 10px; border-radius:10px; background:var(--surface); border:1px solid var(--border); }
.nbr-mini3 i{ font-size:.58rem; } .nbr-mini3 b{ font-size:1.05rem; line-height:1.2; }
/* buttons: quiet by default, filled on hover */
.nbr-dive-btn, .nbr-row .nbr-dive-btn, .nlab-go{ background:transparent !important; color:var(--accent) !important; border:1px solid color-mix(in srgb, var(--accent) 60%, transparent) !important; border-radius:10px !important; font-weight:700 !important; letter-spacing:.01em; box-shadow:none !important; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.nbr-dive-btn:hover, .nlab-go:hover{ background:var(--accent) !important; color:#04130a !important; border-color:var(--accent) !important; }
.nbr-row .nbr-dive-btn{ height:38px; min-height:38px !important; font-size:.86rem !important; }
.nlab-go{ min-height:34px !important; padding:4px 14px !important; font-size:.8rem !important; }
/* the research board */
.nlab-wrap{ border:1px solid var(--border); border-radius:14px; overflow:auto; background:var(--surface); }
.nlab-table{ border-collapse:separate; border-spacing:0; }
.nlab-table thead th{ position:sticky; top:0; z-index:2; background:var(--surface-2); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:11px 10px; color:var(--text-muted); border-bottom:1px solid var(--border); }
.nlab-table th.on{ color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }
.nlab-table tbody td{ padding:10px; border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent); vertical-align:middle; }
.nlab-table tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--surface-2) 45%, transparent); }
.nlab-table tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 7%, transparent) !important; }
.nlab-table tbody tr:last-child td{ border-bottom:0; }
.nlab-pill, .nlab-dv{ font-variant-numeric:tabular-nums; }
.nlab-pl b{ font-weight:700; }
/* panel header: a live dot on the timestamp */
#view-nba-research .nhl-asof{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-size:.74rem; color:var(--text-muted); white-space:nowrap; }
#view-nba-research .nhl-asof::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
/* best-by-game cards */
.nbr-game{ border-radius:14px; padding:12px 14px; background:var(--surface-2); }
.nbr-game h4{ font-family:'Oswald',sans-serif; letter-spacing:.03em; font-size:.98rem; }
.nbr-game li{ gap:8px; padding:8px 0; } .nbr-game li:hover{ color:var(--text); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.nbr-game .nbp-rate{ min-width:28px; height:22px; margin-right:2px; }
/* Deep Dive window */
.nlab-box{ border-radius:16px; } .nlab-box .nlab-h3, .nlab-h3{ font-family:'Oswald',sans-serif; letter-spacing:.03em; text-transform:uppercase; font-size:.98rem; }
.nlab-h3 small{ font-family:Inter,system-ui,sans-serif; text-transform:none; letter-spacing:0; }
.nlab-side .nlab-lines{ min-width:0; font-size:.76rem; } .nlab-side .nlab-lines th, .nlab-side .nlab-lines td{ padding:8px 6px; } .nlab-side .nlab-lines th{ font-size:.6rem; white-space:normal; line-height:1.2; }
.nlab-side .nlab-lines td small{ font-size:.62rem; }
.nlab-pickc{ box-shadow:0 14px 40px -26px var(--accent); }
.nlab-pk-n > div, .nlab-sum > div, .nlab-top > div{ border-radius:12px; }
.nlab-modal{ backdrop-filter:blur(3px); }
/* phones */
@media (max-width:900px){
  #view-nba-research .nhl-dates, #view-nba-research .cat-filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin-left:-2px; padding-bottom:4px; }
  #view-nba-research .nhl-ctl{ display:flex; flex-direction:column; align-items:stretch; min-width:0; max-width:100%; } #view-nba-research .nhl-dates, #view-nba-research .cat-filters{ max-width:100%; min-width:0; }
  #view-nba-research .panel, #view-nba-research #nbr-body{ min-width:0; max-width:100%; }
  #view-nba-research .nhl-dates::-webkit-scrollbar, #view-nba-research .cat-filters::-webkit-scrollbar{ display:none; }
  #view-nba-research .nhl-dates button, #view-nba-research .cat-filters button{ flex:none; white-space:nowrap; }
  #view-nba-research .nhl-sel{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; } #view-nba-research .nhl-sel select{ min-width:0; width:100%; } #view-nba-research #nbr-game{ grid-column:1 / -1; }
  .nlab-filters{ padding:10px; gap:10px; } .nlab-filters .nbh-lab{ flex:1 1 44%; } .nlab-filters select, .nlab-filters input[type=text]{ min-width:0; width:100%; }
}
@media (max-width:560px){
  .nbr-row{ grid-template-columns:50px minmax(0, 1fr); gap:6px 12px; padding:12px 12px 12px 15px; }
  .nbr-row > .nbp-rate{ grid-row:1 / 3; align-self:start; margin-top:2px; }
  .nbr-row .nbr-who{ grid-column:2; grid-row:1; } .nbr-row .nbr-pick{ grid-column:2; grid-row:2; flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:2px 10px; }
  .nbr-row .nbr-pick b{ font-size:1.05rem; }
  .nbr-mini3{ grid-column:1 / -1; grid-row:3; justify-content:stretch; gap:6px; } .nbr-mini3 span{ flex:1 1 0; min-width:0; flex-direction:row; justify-content:space-between; align-items:baseline; padding:6px 10px; }
  .nbr-row .nbr-dive-btn{ grid-column:1 / -1; grid-row:4; width:100%; height:40px; min-height:40px !important; }
  .nbr-h{ font-size:1.05rem; margin:22px 0 10px; }
}
.nlab-chk{ display:inline-flex !important; align-items:center; gap:8px !important; height:40px; padding:0 12px !important; border:1px solid var(--border); border-radius:10px; background:var(--surface); font-size:.78rem; text-transform:none !important; letter-spacing:0 !important; color:var(--text) !important; cursor:pointer; align-self:flex-end !important; }
.nlab-chk input{ appearance:none; -webkit-appearance:none; width:18px !important; height:18px !important; margin:0; border:1.5px solid var(--text-muted); border-radius:5px; background:transparent; display:grid; place-content:center; cursor:pointer; }
.nlab-chk input:checked{ background:var(--accent); border-color:var(--accent); } .nlab-chk input:checked::after{ content:''; width:9px; height:5px; border-left:2px solid #04130a; border-bottom:2px solid #04130a; transform:rotate(-45deg) translate(1px,-1px); }
.nlab-filters .btn{ height:40px; align-self:flex-end; margin-left:auto; border-radius:10px; }
/* phone: the NBA board keeps the six columns that decide a bet (rating, player, pick, matchup, minutes, injuries) and fits the screen; tap a row for the rest in the Deep Dive */
@media (max-width:700px){
  #nbr-lab .nlab-wrap{ overflow-x:auto; border-radius:12px; }
  #nbr-lab .nlab-table{ min-width:0 !important; width:100%; table-layout:auto; }
  #nbr-lab .nlab-table tr > *:nth-child(n){ display:none; }
  #nbr-lab .nlab-table tr > *:nth-child(1), #nbr-lab .nlab-table tr > *:nth-child(2), #nbr-lab .nlab-table tr > *:nth-child(3), #nbr-lab .nlab-table tr > *:nth-child(4), #nbr-lab .nlab-table tr > *:nth-child(5), #nbr-lab .nlab-table tr > *:nth-child(6){ display:table-cell; }
  #nbr-lab .nlab-table td{ white-space:normal; padding:10px 4px; } #nbr-lab .nlab-table th{ padding:10px 4px; font-size:.6rem; } #nbr-lab .nlab-table td:first-child, #nbr-lab .nlab-table th:first-child{ padding-left:8px; } #nbr-lab .nlab-table td .nbp-rate{ margin-right:0; }
  #nbr-lab .nlab-table td:nth-child(3){ min-width:78px; }
  #nbr-lab .nlab-table td:nth-child(2) small{ display:none; } #nbr-lab .nlab-table td:nth-child(2) b{ font-size:.86rem; } #nbr-lab .nlab-pill{ padding:2px 7px; font-size:.74rem; }
}
.nlab-filters select{ min-width:120px; } .nlab-filters input[type=text], .nlab-filters input[type=search]{ flex:1 1 200px; min-width:180px; } .nlab-filters .btn{ margin-left:0; }
/* markets with book prices only (no game history): dashed chips */
.nph-chip.po{ border-style:dashed; font-weight:600; } .nph-chip.po.on{ border-style:solid; }

/* Prop Research cards: the six setup tiles (matchup, minutes, injuries, volume, projection, gap) get their own strip under the pick, so nothing crowds the Deep dive button */
.nbr-row{ grid-template-columns:52px minmax(0, 1.15fr) minmax(0, 1fr) 176px; grid-template-areas:"rate who pick btn" ". tiles tiles tiles"; align-items:center; gap:12px 18px; }
.nbr-row > .nbp-rate{ grid-area:rate; align-self:center; margin:0; }
.nbr-row .nbr-who{ grid-area:who; } .nbr-row .nbr-pick{ grid-area:pick; }
.nbr-row .nbr-dive-btn{ grid-area:btn; width:100%; height:44px; min-height:44px !important; font-size:.92rem !important; padding:0 16px !important; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.nbr-row .nbr-mini3{ grid-area:tiles; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px; }
.nbr-row .nbr-mini3 span{ min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:7px 6px; text-align:center; }
.nbr-row .nbr-mini3 i{ white-space:nowrap; } .nbr-row .nbr-mini3 b{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.98rem; }
@media (max-width:900px){
  .nbr-row{ grid-template-columns:50px minmax(0, 1fr); grid-template-areas:"rate who" "rate pick" "tiles tiles" "btn btn"; gap:8px 12px; }
  .nbr-row > .nbp-rate{ align-self:start; margin-top:2px; }
  .nbr-row .nbr-mini3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .nbr-row .nbr-pick{ flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:2px 10px; }
  .nbr-row .nbr-dive-btn{ height:46px; min-height:46px !important; margin-top:2px; }
}

/* Research Board: the Deep dive button is pinned to the right edge so it is always in view (the table is wider than the screen), with room around it */
.nlab-table thead th:last-child, .nlab-table tbody td:last-child{ position:sticky; right:0; z-index:3; background:var(--surface-2); padding:8px 12px; text-align:center; box-shadow:-10px 0 14px -10px rgba(0, 0, 0, .55); }
.nlab-table tbody tr:hover td:last-child{ background:color-mix(in srgb, var(--accent) 7%, var(--surface-2)) !important; }
.nlab-table tbody td:last-child .nlab-go{ height:36px; min-height:36px !important; padding:0 16px !important; font-size:.82rem !important; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.nlab-table thead th, .nlab-table tbody td{ padding-left:8px; padding-right:8px; }
.nlab-table td:nth-child(6) small, .nlab-table td:nth-child(7) small{ max-width:150px; overflow:hidden; text-overflow:ellipsis; }
/* NFL Primetime Sim page (the show modal reuses the .nfs-* styles from snippet-nba-fb.css) */
.nsim-chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin:14px 0 16px; }
.nsim-chip{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; font-family:inherit; }
.nsim-chip:hover{ border-color:var(--accent); }
.nsim-chip.active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; background:color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.nsim-slot{ font:800 .68rem/1 'Oswald',sans-serif; letter-spacing:.14em; color:var(--accent); }
.nsim-ch-t{ display:flex; align-items:center; gap:6px; font:700 1.02rem/1 'Oswald',sans-serif; } .nsim-ch-t em{ font-style:normal; opacity:.55; font-size:.8rem; }
.nsim-ch-w{ font-size:.74rem; color:var(--text-muted); }
.nsim-wait{ padding:46px 12px; text-align:center; } #nsim-prog{ max-width:420px; margin:0 auto; } #nsim-prog span{ display:block; margin-top:10px; color:var(--text-muted); font-size:.88rem; }
.nsim-progbar{ height:10px; border-radius:99px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border); } .nsim-progbar i{ display:block; height:100%; background:var(--accent); transition:width .12s; }
.nsim-card{ border:1px solid var(--border); border-radius:16px; background:linear-gradient(160deg, var(--surface-2), var(--surface)); padding:18px 16px 16px; }
.nsim-mu{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.nsim-tm{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; } .nsim-tm b{ font:700 1.08rem/1.1 'Oswald',sans-serif; } .nsim-tm span{ font-size:.78rem; color:var(--text-muted); }
.nsim-tm img{ object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.nsim-vs{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; } .nsim-vs em{ font:800 .8rem/1.1 'Oswald',sans-serif; font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); } .nsim-vs span{ font-size:.76rem; color:var(--text-muted); }
.nsim-win{ margin:16px 0 4px; } .nsim-wb{ display:flex; height:40px; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.nsim-wb i{ display:flex; align-items:center; font-style:normal; min-width:0; } .nsim-wb i.a{ justify-content:flex-start; padding-left:12px; } .nsim-wb i.h{ justify-content:flex-end; padding-right:12px; }
.nsim-wb b{ color:#fff; font:700 1rem/1 'Oswald',sans-serif; text-shadow:0 1px 3px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; }
.nsim-mkw{ margin-top:6px; font-size:.78rem; color:var(--text-muted); text-align:center; }
.nsim-nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0 4px; }
.nsim-nums > div{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:rgba(255,255,255,.02); display:flex; flex-direction:column; gap:2px; }
.nsim-nums span{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); } .nsim-nums b{ font:700 1.2rem/1.15 'Oswald',sans-serif; } .nsim-nums small{ font-size:.74rem; color:var(--text-muted); }
.nsim-acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.nsim-sec{ margin-top:22px; } .nsim-sec h3{ margin:0 0 10px; font:700 1.1rem/1.2 'Oswald',sans-serif; letter-spacing:.02em; }
.nsim-t{ width:100%; border-collapse:collapse; font-size:.86rem; } .nsim-t th{ text-align:right; font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); padding:6px 8px; border-bottom:1px solid var(--border); }
.nsim-t td{ padding:7px 8px; text-align:right; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); font-variant-numeric:tabular-nums; } .nsim-t .l{ text-align:left; } .nsim-t img{ vertical-align:middle; }
.nsim-edges td{ vertical-align:top; padding:11px 10px; } .nsim-side{ text-align:left !important; } .nsim-side b{ display:block; font-size:.98rem; } .nsim-side span{ display:block; color:var(--text-muted); font-size:.8rem; } .nsim-side i{ display:block; font-style:normal; font-size:.78rem; margin-top:2px; }
.nsim-side.pick{ background:color-mix(in srgb, var(--accent) 9%, transparent); border-radius:8px; } .nsim-side.pick i{ color:var(--accent); font-weight:700; }
.nsim-lean{ text-align:left !important; } .nsim-lean b{ display:block; } .nsim-edge{ display:inline-block; margin-top:3px; font-size:.74rem; padding:2px 8px; border-radius:99px; border:1px solid var(--border); color:var(--text-muted); } .nsim-edge.on{ border-color:var(--accent); color:var(--accent); font-weight:700; }
.nsim-props td small{ color:var(--text-muted); font-size:.72rem; } .nsim-edge-c{ font-weight:700; } .nsim-edge-c.hot{ color:var(--accent); }
.nsim-line{ max-width:420px; } .nsim-box2{ display:grid; grid-template-columns:minmax(260px,330px) 1fr; gap:18px; margin-top:14px; align-items:start; }
.nsim-stats .k{ text-align:center; color:var(--text-muted); font-size:.8rem; } .nsim-stats .v{ font-weight:600; width:30%; } .nsim-stats .v.hi{ color:var(--accent); font-weight:800; }
.nsim-pls{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; } .nsim-pls > *{ min-width:0; } .nsim-pl .table-wrap{ overflow-x:auto; max-width:100%; } @media (max-width:1180px){ .nsim-pls{ grid-template-columns:minmax(0, 1fr); } } .nsim-pl h4{ margin:0 0 6px; font:700 .98rem/1.2 'Oswald',sans-serif; display:flex; align-items:center; gap:8px; } .nsim-pl .nsim-t{ margin-bottom:8px; } .nsim-k{ font-size:.76rem; color:var(--text-muted); margin:2px 0 0; }
.nsim-hist{ display:flex; align-items:flex-end; gap:3px; height:120px; padding:6px 0; border-bottom:1px solid var(--border); } .nsim-hist i{ flex:1; border-radius:3px 3px 0 0; min-height:2px; background:var(--text-muted); }
.nsim-hist i.a{ background:#6aa7ff; } .nsim-hist i.h{ background:var(--accent); } .nsim-hist i.m{ background:#e5e7eb; } .nsim-hist-l{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--text-muted); margin-top:4px; }
.nsim-how p{ margin:0; color:var(--text-muted); font-size:.88rem; line-height:1.55; }
@media (max-width:760px){
  .nsim-chips{ grid-template-columns:1fr; } .nsim-chip{ flex-direction:row; justify-content:space-between; padding:10px 12px; }
  .nsim-nums{ grid-template-columns:1fr 1fr; } .nsim-mu{ grid-template-columns:1fr 1fr; } .nsim-vs{ grid-column:1 / -1; order:3; } .nsim-tm img{ width:64px; height:64px; }
  .nsim-box2{ grid-template-columns:1fr; } .nsim-pls{ grid-template-columns:1fr; } .nsim-edges td{ display:block; } .nsim-edges tr{ display:block; padding:6px 0; border-bottom:1px solid var(--border); }
}

/* ---- First Touchdown: our pick + EV highlight ---- */
.ftd-pick{ border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin:0 0 14px; background:var(--surface-2); display:grid; grid-template-columns:minmax(180px, 1fr) auto; gap:8px 20px; align-items:center; }
.ftd-pick.ev{ border-color:var(--accent); background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2) 70%); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 12px 36px -18px var(--accent); }
.ftd-pick-l{ display:flex; flex-direction:column; gap:2px; } .ftd-pick-l b{ font-family:'Oswald',sans-serif; font-size:1.6rem; line-height:1.1; } .ftd-pick-l small{ color:var(--text-muted); }
.ftd-pick-tag{ display:inline-block; align-self:flex-start; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.1); font-size:.7rem; font-weight:800; letter-spacing:.08em; } .ftd-pick.ev .ftd-pick-tag{ background:var(--accent); color:#000; }
.ftd-pick-n{ display:flex; flex-wrap:wrap; gap:8px; } .ftd-pick-n > div{ min-width:84px; padding:8px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--border); text-align:center; }
.ftd-pick-n small{ display:block; font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .ftd-pick-n b{ display:block; font-family:'Oswald',sans-serif; font-size:1.3rem; } .ftd-pick-n i{ display:block; font-style:normal; font-size:.66rem; color:var(--text-muted); }
.ftd-pick-n .ev-up{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--surface)); } .ftd-pick-n .ev-up b{ color:var(--accent); }
.ftd-pick p{ grid-column:1 / -1; margin:2px 0 0; font-size:.86rem; color:var(--text-muted); line-height:1.45; }
.nsim-ftd tr.ftd-pos > td{ background:color-mix(in srgb, var(--accent) 9%, transparent); }
.nsim-ftd tr.ftd-isPick > td{ background:color-mix(in srgb, var(--accent) 20%, transparent); font-weight:700; } .nsim-ftd tr.ftd-isPick > td:first-child{ box-shadow:inset 4px 0 0 var(--accent); }
.ftd-evtag{ display:inline-block; padding:1px 7px; border-radius:6px; background:var(--accent); color:#000; font-size:.66rem; font-weight:900; letter-spacing:.04em; }
.ftd-ev.pos{ color:var(--accent); font-weight:800; } .ftd-ev.neg{ color:var(--text-muted); }
@media (max-width:640px){ .ftd-pick{ grid-template-columns:1fr; } .ftd-pick-l b{ font-size:1.4rem; } .ftd-pick-n > div{ flex:1 1 40%; } }
/* ---- NBA DFS: position pills and pool details (the rest reuses the NFL DFS styles) ---- */
.pill.pos-PG{ background:#3B5BA5; color:#fff; }
.pill.pos-SG{ background:#2E7D4F; color:#fff; }
.pill.pos-SF{ background:#B8790A; color:#fff; }
.pill.pos-PF{ background:#7A4FA0; color:#fff; }
.pill.pos-C{ background:#A04F4F; color:#fff; }
.pill.pos-UTIL{ background:#555; color:#fff; }
#nbd-table td small{ display:block; font-size:.62rem; color:var(--text-muted); }
#nbd-table .nbp-who, #nbd-value .nbp-who{ display:flex; align-items:center; gap:8px; }
#nbd-table .nba-hs, #nbd-value .nba-hs{ width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--surface-2); flex-shrink:0; }
#nbd-table .team-cell, #nbd-value .team-cell{ display:flex; align-items:center; gap:6px; }
#nbd-table tr.row-excluded td{ opacity:.45; }
.nbd-link{ cursor:pointer; } .nbd-link:hover{ color:var(--accent); text-decoration:underline; }
/* NBA Game Sim page (shares the .nsim-* styles with the NFL Primetime Sim in snippet-nfl-sim.css; the show modal reuses .nfs-* from snippet-nba-fb.css) */
.nbsim-chips{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.nbsim-t{ font-size:.8rem; } .nbsim-t th, .nbsim-t td{ padding:6px 5px; } .nbsim-t td.l{ white-space:nowrap; } .nbsim-t td small{ color:var(--text-muted); font-size:.64rem; margin-left:3px; }
.nbsim-t tr.st td.l b{ color:var(--text); } .nbsim-t tr:not(.st):not(.tot) td{ color:var(--text-muted); } .nbsim-t tr:not(.st):not(.tot) td b{ color:var(--text); } .nbsim-t tr.tot td{ border-top:2px solid var(--border); font-weight:700; }
.nbsim-pl .table-wrap{ overflow-x:auto; }
.nsim-t td small{ display:block; color:var(--text-muted); font-size:.64rem; font-weight:500; } .nsim-t td.l small{ display:inline; }
.nsim-t td.nsim-mk{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.nbsim-t td small.nbsim-r, .nsim-t td small.nbsim-r{ color:var(--accent); font-weight:800; border:1px solid var(--accent); border-radius:4px; padding:0 3px; font-size:.58rem; }
.nbsim-box .nsim-box2{ display:block; } .nbsim-box .nsim-stats{ max-width:460px; margin:0 auto 18px; }
.nbsim-box .nsim-pls{ grid-template-columns:1fr; gap:22px; } .nbsim-t td, .nbsim-t th{ white-space:nowrap; }

  /* ---- Rankings: game-by-game ranker ---- */
  .rkg-modebar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
  .rkg-progress{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; align-items:center; font-size:0.84rem; color:var(--text-muted); margin-bottom:12px; } .rkg-progress b{ color:var(--text); }
  .rkg-pbar{ flex:1 1 220px; max-width:420px; height:8px; border-radius:6px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border); } .rkg-pbar i{ display:block; height:100%; background:linear-gradient(90deg, var(--accent), #6ee7a0); transition:width .25s ease; }
  .rkg-gstrip{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:thin; scroll-snap-type:x proximity; }
  .rkg-gcard{ flex:0 0 150px; scroll-snap-align:start; display:grid; gap:3px; justify-items:center; text-align:center; padding:10px 8px 9px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; font-family:inherit; transition:border-color .12s ease, transform .12s ease, background-color .12s ease; }
  .rkg-gcard:hover{ transform:translateY(-1px); border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
  .rkg-gcard.on{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, var(--surface-2)); box-shadow:0 0 0 1px var(--accent); }
  .rkg-gcard.done{ opacity:0.78; } .rkg-gcard.done .rkg-gp{ color:var(--good); font-weight:800; }
  .rkg-gt{ display:flex; align-items:center; gap:6px; } .rkg-gt i{ font-style:normal; font-size:0.7rem; color:var(--text-muted); }
  .rkg-gcard b{ font-family:'Oswald',sans-serif; letter-spacing:0.03em; font-size:0.86rem; } .rkg-gw{ font-size:0.68rem; color:var(--text-muted); }
  .rkg-gbar{ width:100%; height:5px; border-radius:4px; background:var(--surface); overflow:hidden; margin-top:3px; } .rkg-gbar i{ display:block; height:100%; background:var(--accent); } .rkg-gp{ font-size:0.68rem; color:var(--text-muted); }
  .rkg-ghead{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 22px; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface-2)), var(--surface-2) 60%); margin:2px 0 14px; }
  .rkg-gteams{ display:flex; align-items:center; gap:12px; } .rkg-gteams > span{ color:var(--text-muted); } .rkg-gteams b{ display:block; font-family:'Oswald',sans-serif; font-size:1.25rem; letter-spacing:0.03em; } .rkg-gteams small{ color:var(--text-muted); font-size:0.78rem; }
  .rkg-gmeta{ display:flex; gap:22px; flex-wrap:wrap; font-weight:700; } .rkg-gmeta label{ display:block; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); font-weight:700; }
  .rkg-gnav{ display:flex; gap:8px; }
  .rkg-layout{ display:grid; grid-template-columns:minmax(300px, 380px) 1fr; gap:16px; align-items:start; }
  @media (max-width:860px){ .rkg-layout{ grid-template-columns:1fr; } }
  .rkg-pool{ border:1px dashed var(--border); border-radius:14px; background:var(--surface); position:sticky; top:12px; max-height:calc(100vh - 24px); display:flex; flex-direction:column; }
  @media (max-width:860px){ .rkg-pool{ position:static; max-height:none; } }
  .rkg-pool.over{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); }
  .rkg-pool-h{ padding:12px 12px 8px; display:grid; gap:8px; border-bottom:1px solid var(--border); } .rkg-pool-h h3{ margin:0; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); } .rkg-pool-h h3 span{ color:var(--accent); margin-left:4px; }
  .rkg-pool-h input[type=text]{ padding:8px 10px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:0.85rem; min-width:0; }
  .rkg-tog{ font-size:0.74rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; cursor:pointer; } .rkg-tog i{ font-style:normal; }
  .rkg-pool-list{ padding:8px; display:grid; gap:6px; overflow-y:auto; align-content:start; min-height:80px; }
  .rkg-chip{ position:relative; display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border); cursor:grab; user-select:none; transition:border-color .1s ease, box-shadow .1s ease, opacity .1s ease; flex-wrap:wrap; }
  .rkg-chip:hover{ border-color:color-mix(in srgb, var(--accent) 50%, var(--border)); } .rkg-chip:active{ cursor:grabbing; }
  .rkg-chip.sel{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); background:color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
  .rkg-chip.dragging{ opacity:0.35; }
  .rkg-hs{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--surface); flex:none; border:1px solid var(--border); } .rkg-hs-ph{ display:inline-block; }
  .rkg-who{ display:grid; gap:2px; min-width:0; flex:1 1 110px; } .rkg-nm{ font-size:0.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rkg-sub{ display:flex; align-items:center; gap:6px; font-size:0.68rem; color:var(--text-muted); } .rkg-sub .pill{ font-size:0.56rem; padding:1px 6px; }
  .rkg-inj{ font-size:0.58rem; font-weight:800; padding:1px 5px; border-radius:5px; background:var(--danger-bg); color:var(--danger); }
  .rkg-stats{ display:flex; align-items:center; gap:7px; flex:none; } .rkg-pts{ font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:700; color:var(--accent); min-width:34px; text-align:right; } .rkg-pts.none{ color:var(--text-muted); }
  .rkg-mu{ font-size:0.62rem; font-weight:800; padding:2px 6px; border-radius:6px; }
  .rkg-quick{ display:flex; gap:5px; flex:1 1 100%; padding-top:4px; border-top:1px dashed var(--border); } .rkg-quick button{ flex:1; min-width:0; padding:5px 0; border:0; border-radius:8px; background:var(--c, var(--surface)); color:#fff; font-weight:800; cursor:pointer; text-shadow:0 1px 1px rgba(0,0,0,0.35); font-family:'Oswald',sans-serif; } .rkg-quick button:hover{ filter:brightness(1.15); } .rkg-quick button.x{ background:var(--surface); color:var(--text-muted); border:1px solid var(--border); text-shadow:none; }
  .rkg-tiers{ display:grid; gap:10px; }
  .rkg-tier{ display:flex; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
  .rkg-tlabel{ width:62px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.4); font-family:'Oswald',sans-serif; } .rkg-tlabel b{ font-size:1.7rem; line-height:1; } .rkg-tlabel small{ font-size:0.54rem; letter-spacing:0.12em; opacity:0.9; }
  .rkg-slot{ flex:1; min-height:74px; padding:9px; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:8px; align-content:start; transition:background-color .12s ease; }
  .rkg-slot.over{ background:color-mix(in srgb, var(--accent) 9%, var(--surface)); outline:2px dashed var(--accent); outline-offset:-4px; }
  .rkg-empty{ grid-column:1 / -1; align-self:center; text-align:center; color:var(--text-muted); font-size:0.78rem; border:1px dashed var(--border); border-radius:10px; padding:18px 8px; opacity:0.75; }
  .rkg-tother{ width:34px; flex:none; display:flex; align-items:center; justify-content:center; font-size:0.66rem; font-weight:700; color:var(--text-muted); border-left:1px solid var(--border); background:var(--surface-2); }
  .rkg-tactions{ display:flex; justify-content:center; }
  .rkg-keys{ margin:14px 2px 0; } .rkg-keys kbd{ display:inline-block; min-width:18px; text-align:center; padding:0 5px; margin:0 1px; border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; background:var(--surface-2); font-size:0.72rem; font-family:inherit; color:var(--text); }
  @media (max-width:520px){ .rkg-slot{ grid-template-columns:1fr; } .rkg-gcard{ flex-basis:132px; } .rkg-gmeta{ gap:14px; } }

  /* ---- Rankings player card (public tiers, game ranker, numbered list) ---- */
  .rkc{ position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:12px; align-items:center; width:100%; text-align:left; }
  .rkc-l{ display:flex; flex-direction:column; align-items:center; gap:5px; }
  .rkc-hs{ width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--surface); border:2px solid var(--border); display:block; } .rkc-hs-ph{ background:var(--surface); }
  .rkc-rk{ text-align:center; line-height:1.05; } .rkc-rank{ display:block; font-family:'Oswald',sans-serif; font-weight:800; font-size:1.1rem; color:var(--accent); background:none; border:0; padding:0; margin:0 auto; } button.rkc-rank.edit{ cursor:text; border-bottom:1px dashed var(--accent); } .rkc-rank-in{ width:54px; padding:3px 4px; background:var(--surface); border:1px solid var(--accent); border-radius:6px; color:var(--text); font-weight:800; text-align:center; } .rkc-rk small{ display:block; font-size:0.6rem; color:var(--text-muted); font-weight:700; }
  .rkc-name{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .rkc-nm{ font-size:1rem; font-weight:800; } .rkc-name .pill{ font-size:0.58rem; } .rkc-tm{ font-size:0.7rem; color:var(--text-muted); font-weight:700; }
  .rkc-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(74px, 1fr)); gap:6px; margin:8px 0 7px; }
  .rkc-tile{ background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:5px 8px 6px; display:grid; gap:1px; } .rkc-tile label{ font-size:0.54rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); font-weight:700; white-space:nowrap; } .rkc-tile b{ font-family:'Oswald',sans-serif; font-size:1rem; line-height:1.1; }
  .rkc-bar{ display:block; height:3px; border-radius:2px; background:var(--surface-2); overflow:hidden; margin-top:2px; } .rkc-bar i{ display:block; height:100%; border-radius:2px; }
  .rkc-form{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:0 0 7px; font-size:0.74rem; } .rkc-form span{ display:inline-flex; align-items:baseline; gap:4px; } .rkc-form label{ font-size:0.56rem; color:var(--text-muted); font-weight:800; letter-spacing:0.08em; } .rkc-form b{ font-family:'Oswald',sans-serif; font-size:0.95rem; }
  .rkc-trend{ font-weight:800; color:var(--text-muted); } .rkc-trend.up{ color:var(--good); } .rkc-trend.dn{ color:var(--danger); }
  .rkc-spark{ margin-left:auto; display:block; } .rkc-sl{ font-size:6.5px; fill:var(--text-muted); }
  .rkc-chips{ display:flex; flex-wrap:wrap; gap:5px; } .rkc-chip{ display:inline-flex; align-items:center; gap:4px; font-size:0.66rem; font-weight:700; padding:2px 7px; border-radius:6px; background:var(--surface); border:1px solid var(--border); white-space:nowrap; } .rkc-chip.bye{ color:var(--warn); border-color:var(--warn); }
  .rkc-proj{ text-align:center; min-width:78px; padding-left:12px; border-left:1px solid var(--border); display:grid; gap:1px; } .rkc-proj label{ font-size:0.54rem; letter-spacing:0.09em; color:var(--text-muted); font-weight:800; } .rkc-proj b{ font-family:'Oswald',sans-serif; font-size:1.9rem; line-height:1; color:var(--accent); } .rkc-proj b.none{ color:var(--text-muted); font-size:1.3rem; } .rkc-proj small{ font-size:0.62rem; color:var(--text-muted); font-weight:700; } .rkc-proj span{ font-size:0.6rem; color:var(--text-muted); white-space:nowrap; }
  .rkc-x{ position:absolute; top:-4px; right:-2px; cursor:pointer; color:var(--text-muted); font-size:0.72rem; }
  .rkc.compact .rkc-hs{ width:46px; height:46px; } .rkc.compact .rkc-proj b{ font-size:1.45rem; } .rkc.compact .rkc-proj{ min-width:64px; padding-left:9px; } .rkc.compact .rkc-tiles{ grid-template-columns:repeat(3, 1fr); gap:5px; margin:6px 0 5px; } .rkc.compact .rkc-tile{ padding:3px 6px 4px; } .rkc.compact .rkc-tile b{ font-size:0.88rem; }
  @media (max-width:560px){ .rkc{ grid-template-columns:auto minmax(0,1fr); } .rkc-proj{ grid-column:1 / -1; border-left:0; border-top:1px solid var(--border); padding:6px 0 0; display:flex; align-items:baseline; justify-content:center; gap:8px; } }
  /* public tier board: cards in a grid */
  .tier-chips{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(440px, 1fr)); gap:10px !important; }
  @media (max-width:520px){ .tier-chips{ grid-template-columns:1fr; } }
  .tier-chip.rk-card-chip{ display:block; padding:12px 14px; border-radius:14px; position:relative; }
  /* ranker uses cards too */
  .rkg-chip{ display:block; padding:9px 10px; } .rkg-layout{ grid-template-columns:minmax(340px, 440px) 1fr; } .rkg-slot{ grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); }
  @media (max-width:860px){ .rkg-layout{ grid-template-columns:1fr; } } @media (max-width:520px){ .rkg-slot{ grid-template-columns:1fr; } }
  .rkg-quick{ margin-top:7px; }
  /* numbered list */
  .rkn-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; } .rkn-bar input[type=text]{ padding:8px 10px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:0.85rem; min-width:180px; }
  /* per-tier "order by projected points" button (all Rankings views) */
  .rk-tsort{ flex:none; font:inherit; font-size:0.66rem; font-weight:800; letter-spacing:0.04em; text-transform:none; padding:3px 9px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--accent); cursor:pointer; line-height:1.2; }
  .rk-tsort:hover{ background:color-mix(in srgb, var(--accent) 22%, transparent); }
  .rkn-tier{ display:flex; align-items:center; gap:10px; }
  .rkg-tlabel .rk-tsort{ margin-top:5px; padding:2px 6px; font-size:0.56rem; color:#fff; border-color:rgba(255,255,255,0.55); background:rgba(0,0,0,0.22); text-shadow:none; }
  .rkn-tier{ margin:16px 0 7px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.08em; color:var(--c); border-bottom:2px solid var(--c); padding-bottom:4px; font-size:0.85rem; }
  .rkn-row{ position:relative; display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-left:5px solid var(--c); border-radius:14px; background:var(--surface); padding:9px 14px; margin-bottom:7px; }
  .rkn-row[draggable="true"]{ cursor:grab; } .rkn-row.dragging{ opacity:0.35; } .rkn-row.over{ outline:2px dashed var(--accent); outline-offset:2px; }
  .rkn-num{ font-family:'Oswald',sans-serif; font-weight:800; font-size:1.7rem; width:48px; text-align:center; color:var(--c); flex:none; }
  .rkn-ctl{ display:flex; flex-direction:column; gap:3px; flex:none; } .rkn-ctl input{ width:58px; padding:3px 4px; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; color:var(--text); text-align:center; font-weight:700; } .rkn-ctl button{ border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); border-radius:6px; font-size:0.62rem; padding:1px 0; cursor:pointer; line-height:1.3; } .rkn-ctl button:hover{ color:var(--text); border-color:var(--accent); }
  .rkn-card{ flex:1; min-width:0; } .rkn-row .rkc-rk{ display:none; }
  @media (max-width:560px){ .rkn-row{ flex-wrap:wrap; padding:8px; } .rkn-num{ font-size:1.3rem; width:34px; } }
  @media print{ .rkc-spark, .rkc-tile .rkc-bar{ display:none; } }
  /* card refinements: one row of four tiles, small team badges, quieter chips */
  .rkc .team-badge{ width:20px !important; height:20px !important; font-size:0.46rem !important; flex:none; }
  .rkc-tiles{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:5px; } .rkc.compact .rkc-tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .rkc-tile label{ font-size:0.5rem; overflow:hidden; text-overflow:ellipsis; } .rkc-tile b{ font-size:0.95rem; }
  .rkc-form{ flex-wrap:nowrap; gap:10px; } .rkc-spark{ width:104px; height:auto; flex:none; }
  .rkc.compact .rkc-chips .rkc-chip:nth-child(n+4){ display:none; }
  .rkc-hs{ align-self:center; }
  .rkc-tiles{ grid-template-columns:repeat(4, minmax(0, 150px)); } .rkc.compact .rkc-tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .rkn-bar input[type=text]{ width:240px; flex:none; } .rkn-card{ max-width:980px; }
  .rkc-trend{ white-space:nowrap; } .rkc-tile label{ letter-spacing:0.03em; font-size:0.52rem; text-overflow:clip; }
  /* ---------- polish: fewer, calmer blocks; one place for each thing ---------- */

  /* Home: the trust strip, the hero tag line and the second "follow on X" card only repeated things already on the page */
  #view-home .home-trust-strip{ display:none; }
  #view-home .hero-eyebrow.promo{ cursor:pointer; }
  #home-twitter-panel{ display:none; }

  /* Home: panels quieter and tighter */
  #view-home .panel{ padding:20px 22px; margin-bottom:16px; box-shadow:none; background:var(--surface); border-color:rgba(255,255,255,0.07); }
  #view-home .panel-head{ margin-bottom:12px; }
  #view-home .panel-head h2{ font-size:1.2rem; }
  #view-home .section-eyebrow{ margin-bottom:4px; }
  #home-nba-panel{ border-color:rgba(255,255,255,0.07); background:var(--surface); }
  #home-nba-panel .panel-head{ margin-bottom:12px; }

  /* Home: tool cards become a tidy list of links (icon + name) instead of two walls of paragraphs */
  #home-nba-panel .feature-card p, #home-tools-panel .feature-card p{ display:none; }
  #home-nba-panel .feature-grid, #home-tools-panel .feature-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
  #home-nba-panel .feature-card, #home-tools-panel .feature-card{ display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; }
  #home-nba-panel .feature-icon, #home-tools-panel .feature-icon{ margin:0; flex:none; }
  #home-nba-panel .feature-title, #home-tools-panel .feature-title{ margin:0; font-size:0.92rem; }
  @media (max-width:640px){
    #home-nba-panel .feature-grid, #home-tools-panel .feature-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    #home-nba-panel .feature-card, #home-tools-panel .feature-card{ padding:10px 11px; gap:9px; }
    #home-nba-panel .feature-title, #home-tools-panel .feature-title{ font-size:0.8rem; }
  }

  /* Basketball: the Blog section button repeated the Blog tab in the main menu */
  #subtabs-nhl-cats{ display:none !important; }   /* hockey has one section: no category row needed (basketball now has Betting / Players / Season / News) */

  /* Charts: side captions on the green / red bars, and a collapsible table so a chart and its table don't stack */
  .nbm-hd{ font-size:10.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
  .nbm-hd-neg{ fill:var(--danger); } .nbm-hd-pos{ fill:var(--good); }
  .nbm-fold{ padding:0; }
  .nbm-fold > summary{ cursor:pointer; list-style:none; padding:12px 16px; font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; font-size:0.85rem; color:var(--text); }
  .nbm-fold > summary::-webkit-details-marker{ display:none; }
  .nbm-fold > summary::before{ content:'\25B8'; display:inline-block; margin-right:8px; color:var(--text-muted); transition:transform .15s ease; }
  .nbm-fold[open] > summary::before{ transform:rotate(90deg); }
  .nbm-fold > :not(summary){ margin:0 16px 14px; }

  /* ---------- section tabs (after clicking Football / Basketball): one light bar, not two heavy rows ---------- */
  nav.subtabs{ gap:2px; padding:0 24px; background:var(--surface); border-bottom:1px solid var(--border); scrollbar-width:none; }
  nav.subtabs::-webkit-scrollbar{ display:none; }
  /* row 2: Fantasy / DFS / Research as small pills */
  nav.subtabs.sport-cats{ padding:12px 24px 4px; gap:8px; border-bottom:0; }
  nav.subtabs.sport-cats button{ font-family:Inter,sans-serif; text-transform:none; letter-spacing:0; font-size:0.84rem; font-weight:600; padding:6px 16px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--text-muted); box-shadow:none; }
  nav.subtabs.sport-cats button:hover:not([aria-selected="true"]){ background:rgba(127,127,127,0.1); color:var(--text); }
  nav.subtabs.sport-cats button[aria-selected="true"]{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); box-shadow:none; }
  /* row 3: the pages, as quiet underline tabs in normal case */
  nav.subtabs:not(.sport-cats) button{ font-family:Inter,sans-serif; text-transform:none; letter-spacing:0; font-size:0.88rem; font-weight:600; padding:12px 14px; border-radius:0; background:transparent; color:var(--text-muted); position:relative; }
  nav.subtabs:not(.sport-cats) button:hover{ background:transparent; color:var(--text); }
  nav.subtabs:not(.sport-cats) button.active{ background:transparent; color:var(--text); }
  nav.subtabs:not(.sport-cats) button.active::after{ content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:2px; background:var(--accent); }
  @media (max-width:620px){
    nav.subtabs{ padding:0 12px; }
    nav.subtabs.sport-cats{ padding:10px 12px 2px; }
    nav.subtabs:not(.sport-cats) button{ padding:11px 11px; font-size:0.84rem; }
  }
  /* sub tabs: smaller so every page is visible without scrolling; on narrow screens they wrap onto a second line */
  nav.subtabs:not(.sport-cats) button{ font-size:0.8rem; padding:10px 9px; }
  nav.subtabs:not(.sport-cats) button.active::after{ left:9px; right:9px; }
  @media (max-width:900px){
    nav.subtabs:not(.sport-cats){ flex-wrap:wrap; overflow-x:visible; padding:2px 10px 0; gap:0; }
    nav.subtabs:not(.sport-cats) button{ font-size:0.76rem; padding:8px 8px; }
    nav.subtabs:not(.sport-cats) button.active::after{ left:8px; right:8px; }
  }
  /* Our Record: season and week blocks */
  .pk-rec-h{ margin:16px 0 8px; font-family:'Oswald',sans-serif; font-size:0.95rem; letter-spacing:0.03em; text-transform:uppercase; }
  .pk-rec-h:first-of-type{ margin-top:4px; }
  .pk-rec-h span{ font-family:Inter,sans-serif; font-size:0.74rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-muted); margin-left:6px; }
  /* ranker: "game saved, on to the next" banner */
  .rkg-note{ flex:1 1 100%; order:5; padding:8px 12px; border-radius:8px; background:color-mix(in srgb, var(--good) 14%, transparent); border:1px solid color-mix(in srgb, var(--good) 40%, transparent); color:var(--good); font-size:0.84rem; font-weight:600; }
  /* ranker: players ranked from other games stay in the tiers, dimmed, with their game tagged */
  .rkg-chip.rkg-other{ opacity:0.62; border-style:dashed; }
  .rkg-chip.rkg-other:hover, .rkg-chip.rkg-other.sel{ opacity:1; }
  .rkg-gtag{ position:absolute; top:-8px; right:10px; z-index:2; padding:1px 7px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:0.62rem; font-weight:700; letter-spacing:0.04em; color:var(--text-muted); }
  .rkg-pool-h{ row-gap:6px; }
  /* ---------- finished rankings list: 1 to N, one line per player, position rank on every row ---------- */
  .rkf-tabs button{ display:inline-flex; align-items:center; gap:6px; }
  .rkf-tabs button i{ font-style:normal; font-size:0.7rem; font-weight:700; padding:1px 6px; border-radius:999px; background:rgba(127,127,127,0.2); }
  .rkf-tabs button.active i{ background:rgba(0,0,0,0.25); }
  .rkf-head{ display:grid; grid-template-columns:76px minmax(0,1.7fr) minmax(0,1.3fr) 96px; gap:12px; padding:6px 14px 6px 19px; font-size:0.66rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-muted); }
  .rkf-row{ position:relative; display:grid; grid-template-columns:76px minmax(0,1.7fr) minmax(0,1.3fr) 96px; align-items:center; gap:12px; padding:9px 14px; margin-bottom:5px; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--c); border-radius:12px; }
  .rkf-row:hover{ border-color:color-mix(in srgb, var(--c) 55%, var(--border)); }
  .rkf-row[draggable="true"]{ cursor:grab; } .rkf-row.dragging{ opacity:0.35; } .rkf-row.over{ outline:2px dashed var(--accent); outline-offset:2px; }
  .rkf-n{ display:flex; flex-direction:column; align-items:center; gap:2px; }
  .rkf-n b{ font-family:'Oswald',sans-serif; font-size:1.7rem; line-height:1; color:var(--c); }
  .rkf-pr{ font-size:0.7rem; font-weight:800; letter-spacing:0.04em; padding:1px 8px; border-radius:999px; background:rgba(127,127,127,0.18); color:var(--text); }
  .rkf-sub{ font-size:0.66rem; font-weight:600; color:var(--text-muted); white-space:nowrap; }
  .rkf-pl{ display:flex; align-items:center; gap:10px; min-width:0; } .rkf-pl .rkc-hs{ width:44px; height:44px; flex:none; }
  .rkf-id{ min-width:0; } .rkf-name{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .rkf-name b{ font-size:0.98rem; }
  .rkf-row .rkc-chips{ margin-top:4px; }
  .rkf-stats{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; }
  .rkf-st{ display:flex; flex-direction:column; line-height:1.15; } .rkf-st label{ font-size:0.6rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); } .rkf-st b{ font-size:0.92rem; }
  .rkf-proj{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; } .rkf-proj label{ font-size:0.6rem; font-weight:700; letter-spacing:0.06em; color:var(--text-muted); } .rkf-proj b{ font-family:'Oswald',sans-serif; font-size:1.55rem; color:var(--good); } .rkf-proj b.none{ color:var(--text-muted); font-size:1.1rem; } .rkf-proj small{ font-size:0.66rem; color:var(--text-muted); }
  .rkf-row .rkn-ctl{ position:absolute; right:12px; bottom:6px; opacity:0; transition:opacity .12s ease; } .rkf-row:hover .rkn-ctl{ opacity:1; }
  .rkf-row .rkc-x{ position:absolute; top:6px; right:8px; }
  @media (max-width:860px){
    .rkf-head{ display:none; }
    .rkf-row{ grid-template-columns:58px minmax(0,1fr) auto; grid-template-areas:'n pl proj' 'n st st'; gap:6px 10px; padding:9px 10px; }
    .rkf-n{ grid-area:n; } .rkf-pl{ grid-area:pl; } .rkf-proj{ grid-area:proj; } .rkf-stats{ grid-area:st; }
    .rkf-n b{ font-size:1.4rem; } .rkf-pl .rkc-hs{ width:38px; height:38px; }
    .rkf-row .rkn-ctl{ position:static; opacity:1; grid-column:1 / -1; }
  }
  /* visitors get the list without the owner's upload instructions */
  body:not(.owner-mode) #view-rankings .consumer-note + p.hint, body:not(.owner-mode) #rankings-roster-banner{ display:none; }
  /* public rankings: no owner-only notes, tighter rows on phones */
  body:not(.owner-mode) #view-rankings .consumer-note{ display:none; }
  @media (max-width:560px){
    .rkf-row{ grid-template-columns:50px minmax(0,1fr) auto; padding:8px 9px; gap:4px 8px; }
    .rkf-n b{ font-size:1.25rem; } .rkf-pr, .rkf-sub{ font-size:0.62rem; padding:0 6px; }
    .rkf-pl{ gap:8px; } .rkf-pl .rkc-hs{ width:34px; height:34px; }
    .rkf-name{ gap:4px; } .rkf-name b{ font-size:0.9rem; } .rkf-name .rkc-tm{ display:none; }
    .rkf-row .rkc-chips{ flex-wrap:nowrap; gap:4px; overflow:hidden; } .rkf-row .rkc-chips .rkc-chip:nth-child(n+3){ display:none; }
    .rkf-stats{ gap:2px 10px; } .rkf-st b{ font-size:0.82rem; } .rkf-st:nth-child(3), .rkf-stats .rkc-trend{ display:none; }
    .rkf-proj b{ font-size:1.25rem; }
    .rkn-bar{ flex-wrap:wrap; } .rkn-bar input[type=text]{ width:100%; }
  }
/* ---------- community: Discord + free-year giveaway ---------- */
#view-home .hero-eyebrow.giveaway-pill{ display:inline-block; text-decoration:none; margin-left:8px; background:rgba(255,194,51,0.14); border-color:rgba(255,194,51,0.6); color:#ffd166; font-weight:700; }
#view-home .hero-eyebrow.giveaway-pill:hover{ background:rgba(255,194,51,0.24); }
.community-card{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:0 0 16px; padding:16px 20px; border-radius:16px; border:1px solid rgba(255,194,51,0.55); background:linear-gradient(115deg, rgba(255,194,51,0.14), color-mix(in srgb, var(--accent) 8%, transparent) 60%, transparent), var(--surface, #121a25); box-shadow:0 8px 28px rgba(0,0,0,0.18); }
.community-card .cc-badge{ flex:none; font-family:'Oswald',sans-serif; letter-spacing:0.14em; font-size:0.9rem; color:#1a1300; background:#ffc233; border-radius:999px; padding:6px 16px; font-weight:700; }
.community-card .cc-main{ flex:1 1 280px; min-width:0; }
.community-card h3{ margin:0 0 3px; font-family:'Oswald',sans-serif; font-size:1.35rem; letter-spacing:0.02em; }
.community-card p{ margin:0; color:var(--text-muted); font-size:0.92rem; line-height:1.45; }
.community-card .cc-btn{ flex:none; display:inline-flex; align-items:center; gap:8px; text-decoration:none; white-space:nowrap; }
#tab-discord{ color:#7289ff; }
@media (max-width:640px){ .community-card{ padding:14px; gap:12px; } .community-card .cc-btn{ width:100%; justify-content:center; } #view-home .hero-eyebrow.giveaway-pill{ margin:6px 0 0; } }
/* ---------- brand v2 (2026-10-17): neon-green S emblem + stacked wordmark; page background matches the logo art ---------- */
html{ background:#060706; }
body{ background:transparent !important; }
body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 0% 0%, rgba(30,130,16,0.42), transparent 68%),
    radial-gradient(1100px 650px at 100% 100%, rgba(22,100,12,0.32), transparent 70%),
    url('/assets/bg-tile.webp') 0 0 / 348px 348px repeat,
    #070807; }
.panel{ background-color:rgba(0,0,0,0.74); }

.foot-brand{ gap:14px !important; }
.foot-brand img{ height:58px !important; width:auto; opacity:1 !important; }
.foot-brand img.foot-emblem{ border-radius:50%; box-shadow:0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.about-hero img{ height:84px; width:auto; border-radius:50%; box-shadow:0 0 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.tdr-st-brand img{ height:58px; width:auto; display:block; }
.sst-brand img{ height:42px; width:auto; display:block; }
.tall .sst-brand img{ height:54px; }
header.topbar .brand .brand-logo{ height:88px !important; filter:drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 22%, transparent)); }
@media (max-width:640px){ header.topbar .brand .brand-logo{ height:60px !important; } }

.community-card .gw-line{ margin-top:4px; font-size:0.9rem; color:var(--text); } .community-card .gw-rules{ margin-top:6px; font-size:0.82rem; color:var(--text-muted); } .community-card .gw-rules summary{ cursor:pointer; color:#ffd166; } .community-card .gw-rules p{ margin:6px 0 0; }

/* ---------- big Membership section on the home page ---------- */
#view-home .mship{ position:relative; overflow:hidden; padding:34px 34px 22px; margin-bottom:20px; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius:20px;
  background:radial-gradient(900px 380px at 0% 0%, rgba(30,130,16,0.40), transparent 70%), radial-gradient(700px 320px at 100% 100%, rgba(255,194,51,0.10), transparent 70%), rgba(0,0,0,0.82); box-shadow:0 18px 60px rgba(0,0,0,0.55), 0 0 50px color-mix(in srgb, var(--accent) 10%, transparent); }
.mship-eyebrow{ display:inline-block; font-family:'Oswald',sans-serif; letter-spacing:0.22em; font-size:0.85rem; color:#04130a; background:var(--accent); border-radius:999px; padding:5px 16px; font-weight:700; }
#view-home .mship h2{ margin:14px 0 8px; font-family:'Oswald',sans-serif; font-size:clamp(2rem, 5vw, 3.5rem); line-height:1.05; text-transform:uppercase; letter-spacing:0.01em; }
#view-home .mship h2 span{ color:var(--accent); display:inline-block; }
.mship-head p{ margin:0 0 20px; max-width:62ch; color:var(--text-muted); font-size:1.05rem; line-height:1.5; }
.mship-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:22px; align-items:stretch; }
.mship-plans{ display:grid; gap:14px; }
.mship-plan{ position:relative; border:1px solid var(--border); border-radius:16px; padding:20px 22px 18px; background:rgba(13,17,13,0.9); display:flex; flex-direction:column; gap:6px; }
.mship-plan.main{ border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 10px 34px color-mix(in srgb, var(--accent) 14%, transparent); }
.mship-plan.best{ border-color:rgba(255,194,51,0.6); }
.mship-tag{ position:absolute; top:-12px; left:20px; font-family:'Oswald',sans-serif; letter-spacing:0.14em; font-size:0.78rem; font-weight:700; color:#04130a; background:var(--accent); border-radius:999px; padding:4px 14px; } .mship-tag.gold{ background:#ffc233; color:#1a1300; }
.mship-name{ font-family:'Oswald',sans-serif; font-size:1.05rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); margin-top:4px; }
.mship-price b{ font-family:'Oswald',sans-serif; font-size:3.4rem; line-height:1; } .mship-price span{ color:var(--text-muted); font-size:0.95rem; margin-left:8px; }
.mship-plan ul{ list-style:none; margin:4px 0 8px; padding:0; display:grid; gap:5px; font-size:0.95rem; } .mship-plan li{ position:relative; padding-left:24px; } .mship-plan li::before{ content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:800; }
.mship-cta{ width:100%; padding:15px 18px; font-size:1.1rem; letter-spacing:0.02em; }
.mship-plan.main .mship-cta{ box-shadow:0 0 30px color-mix(in srgb, var(--accent) 45%, transparent); animation:mshipglow 2.6s ease-in-out infinite; }
@keyframes mshipglow{ 0%,100%{ box-shadow:0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); } 50%{ box-shadow:0 0 38px color-mix(in srgb, var(--accent) 65%, transparent); } }
@media (prefers-reduced-motion:reduce){ .mship-plan.main .mship-cta{ animation:none; } }
.mship-compare{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:rgba(13,17,13,0.9); display:flex; flex-direction:column; }
.mc-row{ display:grid; grid-template-columns:1fr 112px 112px; gap:8px; align-items:center; padding:11px 16px; border-top:1px solid rgba(255,255,255,0.06); font-size:0.9rem; line-height:1.3; } .mc-row:first-child{ border-top:0; }
.mc-row span:not(:first-child){ text-align:center; color:var(--text-muted); } .mc-row span.on{ color:var(--accent); font-weight:800; } .mc-row span.no{ opacity:0.8; }
.mc-hd{ background:rgba(255,255,255,0.04); font-family:'Oswald',sans-serif; letter-spacing:0.14em; text-transform:uppercase; font-size:0.85rem; } .mc-hd span.on{ background:var(--accent); color:#04130a; border-radius:8px; padding:4px 0; }
.mship-fine{ margin:16px 0 0; font-size:0.78rem; color:var(--text-muted); text-align:center; }
@media (max-width:960px){ .mship-grid{ grid-template-columns:1fr; } #view-home .mship{ padding:26px 18px 18px; } .mship-price b{ font-size:2.8rem; } .mc-row{ grid-template-columns:1fr 84px 84px; padding:10px 12px; font-size:0.84rem; } }
.home-blog-pricing-row{ grid-template-columns:1fr !important; }
#tab-membership{ color:var(--accent) !important; font-weight:700; } #tab-membership::after{ content:'30 days free'; margin-left:8px; font-size:0.62rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#04130a; background:var(--accent); border-radius:999px; padding:2px 8px; vertical-align:middle; }
@media (max-width:640px){ #tab-membership::after{ display:none; } }
#view-home .home-hero .btn.gold-cta{ background:#ffc233; color:#1a1300; border-color:#ffc233; font-weight:700; }
  /* ---------- TD Research: Spread TD Rating ---------- */
  .tdr-wrap{ margin:4px 0 18px; }
  .tdr-loading{ padding:26px; text-align:center; color:var(--text-muted); border:1px dashed var(--border); border-radius:12px; }
  .tdr-top{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:10px; }
  .tdr-top h3{ font-family:'Oswald',sans-serif; font-size:1.35rem; text-transform:uppercase; letter-spacing:0.02em; margin:0 0 4px; }
  .tdr-top h3 span{ font-family:Inter,sans-serif; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:middle; }
  .tdr-top p{ margin:0; max-width:640px; color:var(--text-muted); font-size:0.88rem; }
  .tdr-ctl{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
  .tdr-ctl input{ width:200px; }
  .tdr-legend{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:0.74rem; color:var(--text-muted); margin:6px 0 12px; }
  .tdr-legend i{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; } .tdr-legend i.g{ background:var(--good); } .tdr-legend i.y{ background:var(--warn); } .tdr-legend i.r{ background:var(--danger); }
  .tdr-stamp{ margin-left:auto; }
  .tdr-row{ border:1px solid var(--border); border-left:4px solid var(--border); border-radius:14px; background:var(--surface); margin-bottom:8px; overflow:hidden; transition:border-color .15s ease; }
  .tdr-row.open{ border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); border-left-color:var(--accent); }
  .tdr-head{ display:grid; grid-template-columns:34px minmax(0,2.2fr) minmax(0,1.3fr) 76px 118px 22px; gap:12px; align-items:center; padding:10px 14px; cursor:pointer; }
  .tdr-head:hover{ background:rgba(127,127,127,0.06); }
  .tdr-rk{ font-family:'Oswald',sans-serif; font-size:1.2rem; color:var(--text-muted); text-align:center; }
  .tdr-pl{ display:flex; align-items:center; gap:10px; min-width:0; } .tdr-pl .rkc-hs{ width:46px; height:46px; flex:none; }
  .tdr-id{ min-width:0; } .tdr-name{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .tdr-name b{ font-size:1rem; }
  .tdr-mini{ display:flex; gap:14px; } .tdr-mini div{ display:flex; flex-direction:column; line-height:1.15; } .tdr-mini label{ font-size:0.58rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); } .tdr-mini b{ font-size:0.95rem; }
  .tdr-rate{ display:flex; flex-direction:column; align-items:center; gap:2px; } .tdr-rate span{ font-size:0.56rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
  .tdr-prob{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; text-align:right; } .tdr-prob b{ font-family:'Oswald',sans-serif; font-size:1.45rem; } .tdr-prob span{ font-size:0.6rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted); } .tdr-prob em{ font-style:normal; font-size:0.68rem; font-weight:700; color:var(--text-muted); white-space:nowrap; }
  .tdr-prob em.up, .tdr-defstats .up b, .tdr-st-prob em.up{ color:var(--good); } .tdr-prob em.dn, .tdr-defstats .dn b, .tdr-st-prob em.dn{ color:var(--danger); }
  .tdr-chev{ color:var(--text-muted); font-size:0.8rem; text-align:center; }
  /* gauge */
  .tdr-gauge{ position:relative; width:var(--s); height:var(--s); flex:none; }
  .tdr-gauge svg{ width:100%; height:100%; } .tdr-g-bg{ fill:none; stroke:rgba(127,127,127,0.22); stroke-width:10; } .tdr-g-fg{ fill:none; stroke:var(--c); stroke-width:10; stroke-linecap:round; }
  .tdr-gauge b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:calc(var(--s) * 0.38); color:var(--c); }
  .tdr-gauge i{ position:absolute; left:0; right:0; bottom:-2px; text-align:center; font-style:normal; font-size:calc(var(--s) * 0.075); font-weight:800; letter-spacing:0.1em; color:var(--text-muted); }
  /* expanded body */
  .tdr-body{ padding:6px 14px 14px; border-top:1px solid var(--border); background:color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
  .tdr-grid-body{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:10px; }
  .tdr-panel{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; min-width:0; }
  .tdr-panel.tdr-wide{ grid-column:1 / -1; }
  .tdr-panel h5{ margin:0 0 8px; font-family:'Oswald',sans-serif; font-size:0.92rem; letter-spacing:0.03em; text-transform:uppercase; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
  .tdr-panel h5 small{ font-family:Inter,sans-serif; font-size:0.68rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-muted); }
  /* component bars */
  .tdr-bars{ display:flex; flex-direction:column; gap:7px; }
  .tdr-bar{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) 54px; gap:12px; align-items:center; }
  .tdr-bar-l{ display:flex; flex-direction:column; min-width:0; } .tdr-bar-l b{ font-size:0.84rem; } .tdr-bar-l span{ font-size:0.68rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tdr-bar-t{ position:relative; height:14px; background:rgba(127,127,127,0.14); border-radius:7px; }
  .tdr-bar-t .mid{ position:absolute; left:50%; top:-3px; bottom:-3px; width:2px; background:var(--text-muted); opacity:.7; }
  .tdr-bar-t .fill{ position:absolute; top:0; bottom:0; border-radius:7px; } .tdr-bar-t .fill.up{ background:var(--good); } .tdr-bar-t .fill.dn{ background:var(--danger); }
  .tdr-bar-v{ font-family:'Oswald',sans-serif; font-size:1.05rem; text-align:right; } .tdr-bar-v small{ font-family:Inter,sans-serif; font-size:0.6rem; color:var(--text-muted); margin-left:4px; } .tdr-bar-v.up{ color:var(--good); } .tdr-bar-v.dn{ color:var(--danger); }
  .tdr-bar-note{ font-size:0.68rem; color:var(--text-muted); margin-top:2px; }
  .tdr-why{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:0.8rem; }
  .tdr-why li{ padding:6px 10px; border-radius:8px; border-left:3px solid var(--text-muted); background:rgba(127,127,127,0.08); } .tdr-why li.up{ border-left-color:var(--good); } .tdr-why li.dn{ border-left-color:var(--danger); }
  /* target map */
  .tdr-map{ width:100%; height:auto; max-height:340px; display:block; }
  .tdr-map-v{ font-family:'Oswald',sans-serif; font-size:17px; fill:var(--text); } .tdr-map-v.hi{ fill:#fff; }
  .tdr-map-ax, .tdr-ax{ font-size:10.5px; fill:var(--text-muted); } .tdr-map-leg{ font-size:9.5px; fill:var(--text-muted); }
  .tdr-grid{ stroke:var(--border); stroke-dasharray:3 3; } .tdr-avg{ stroke:var(--accent); stroke-width:1.6; stroke-dasharray:5 3; }
  .tdr-rzs{ width:100%; height:auto; display:block; }
  /* routes */
  .tdr-rt{ display:grid; grid-template-columns:108px minmax(0,1fr) 40px auto; gap:8px; align-items:center; margin:5px 0; font-size:0.8rem; }
  .tdr-rt > div{ height:12px; background:rgba(127,127,127,0.14); border-radius:6px; overflow:hidden; } .tdr-rt i{ display:block; height:100%; border-radius:6px; }
  .tdr-rt b{ text-align:right; } .tdr-rt em{ font-style:normal; font-size:0.68rem; color:var(--text-muted); white-space:nowrap; }
  /* defense */
  .tdr-mz{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; font-size:0.78rem; font-weight:700; margin-bottom:8px; }
  .tdr-mz > div{ height:14px; border-radius:7px; background:color-mix(in srgb, var(--accent) 38%, rgba(127,127,127,0.2)); overflow:hidden; } .tdr-mz i{ display:block; height:100%; background:var(--warn); }
  .tdr-shells{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:8px; } .tdr-shells div{ background:rgba(127,127,127,0.1); border-radius:8px; padding:6px 4px; text-align:center; display:flex; flex-direction:column; } .tdr-shells b{ font-family:'Oswald',sans-serif; font-size:1.05rem; } .tdr-shells span{ font-size:0.62rem; color:var(--text-muted); }
  .tdr-defstats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .tdr-defstats div{ background:rgba(127,127,127,0.1); border-radius:8px; padding:8px; display:flex; flex-direction:column; } .tdr-defstats b{ font-family:'Oswald',sans-serif; font-size:1.2rem; } .tdr-defstats span{ font-size:0.62rem; color:var(--text-muted); line-height:1.25; }
  .tdr-foot{ font-size:0.66rem; color:var(--text-muted); margin:6px 0 0; }
  .tdr-tiles{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; } .tdr-tiles div{ background:rgba(127,127,127,0.1); border-radius:10px; padding:9px 10px; display:flex; flex-direction:column; } .tdr-tiles label{ font-size:0.6rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); } .tdr-tiles b{ font-family:'Oswald',sans-serif; font-size:1.3rem; } .tdr-tiles small{ font-size:0.62rem; color:var(--text-muted); }
  .tdr-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  details.tdr-old{ margin-top:14px; border:1px solid var(--border); border-radius:12px; padding:0 14px; } details.tdr-old > summary{ cursor:pointer; padding:12px 0; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.03em; font-size:0.88rem; }
  @media (max-width:900px){
    .tdr-head{ grid-template-columns:28px minmax(0,1fr) 62px 22px; grid-template-areas:'rk pl rate chev' '. mini prob prob'; gap:6px 10px; padding:9px 10px; }
    .tdr-rk{ grid-area:rk; } .tdr-pl{ grid-area:pl; } .tdr-rate{ grid-area:rate; } .tdr-chev{ grid-area:chev; } .tdr-mini{ grid-area:mini; } .tdr-prob{ grid-area:prob; }
    .tdr-grid-body{ grid-template-columns:1fr; } .tdr-tiles{ grid-template-columns:repeat(3, 1fr); } .tdr-bar{ grid-template-columns:minmax(0,1fr) 54px; } .tdr-bar-t{ grid-column:1 / 2; } .tdr-bar-l{ grid-column:1 / -1; } .tdr-stamp{ margin-left:0; }
    .tdr-ctl{ align-items:stretch; width:100%; } .tdr-ctl input{ width:100%; }
  }

  /* ---------- video mode: a 1280x720 stage (exports at 1920x1080, records to WebM) ---------- */
  .tdr-stage-wrap{ display:none; position:fixed; inset:0; z-index:9999; background:radial-gradient(1200px 700px at 50% 0%, #0d1520, #05070a); flex-direction:column; align-items:center; overflow:hidden; } .tdr-stage-wrap.show{ display:flex; }
  body.tdr-staging{ overflow:hidden; }
  .tdr-stage-bar{ position:relative; display:flex; gap:14px; align-items:center; padding:10px 16px; width:100%; justify-content:center; flex-wrap:wrap; background:rgba(8,12,18,0.92); border-bottom:1px solid #1e2630; backdrop-filter:blur(6px); }
  .tdr-sb-g{ display:flex; gap:6px; align-items:center; } .tdr-sb-g span{ color:#9aa7b4; font-size:0.82rem; min-width:48px; text-align:center; font-weight:600; }
  .tdr-stage-bar button, .tdr-stage-bar select{ background:#141b25; color:#e8eef5; border:1px solid #2a3544; border-radius:999px; padding:7px 15px; font-weight:700; font-size:0.82rem; cursor:pointer; font-family:Inter,sans-serif; transition:border-color .12s ease, color .12s ease, background .12s ease; }
  .tdr-stage-bar button:hover:not(:disabled), .tdr-stage-bar button.on{ border-color:var(--accent); color:var(--accent); } .tdr-stage-bar button:disabled{ opacity:.55; cursor:default; }
  .tdr-stage-bar button.on[data-tdrs="star"]{ color:#ffc233; border-color:#ffc233; background:rgba(255,194,51,0.1); }
  .tdr-sb-out button[data-tdrs="video"]{ background:var(--accent); color:#04130a; border-color:var(--accent); } .tdr-sb-out button[data-tdrs="video"]:disabled{ background:#1b3a26; color:#9ee8b4; }
  .tdr-sb-dots{ display:flex; gap:6px; } .tdr-sb-dots i{ width:9px; height:9px; border-radius:50%; background:#2a3544; cursor:pointer; } .tdr-sb-dots i.on{ background:var(--accent); transform:scale(1.25); }
  .tdr-sb-x{ margin-left:auto; } .tdr-sb-prog{ position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent; } .tdr-sb-prog i{ display:block; height:100%; background:var(--accent); animation:tdrProg 8s linear forwards; }
  @keyframes tdrProg{ from{ width:0 } to{ width:100% } }
  .tdr-stage-fit{ width:1280px; height:720px; transform-origin:top center; flex:none; margin-top:8px; }
  .tdr-stage{ position:relative; width:1280px; height:720px; box-sizing:border-box; padding:22px 32px 18px; display:flex; flex-direction:column; color:#f2f6fb; font-family:Inter,sans-serif; overflow:hidden; border-radius:14px; background:#0a0e14;
    --text:#f2f6fb; --text-muted:#93a4b6; --border:#2a3646; --surface:#121a25; --good:#18e255; --danger:#ff5d5d; --warn:#ffc233; --accent:#18e255; }
  .tdr-st-bg{ position:absolute; inset:0; background:
      linear-gradient(115deg, color-mix(in srgb, var(--ta) 52%, #0a0e14) 0%, rgba(10,14,20,0.2) 38%, rgba(10,14,20,0.2) 62%, color-mix(in srgb, var(--tb) 40%, #0a0e14) 100%),
      radial-gradient(900px 420px at 50% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 64px); }
  .tdr-st-logo{ position:absolute; right:-70px; top:40px; width:560px; height:560px; object-fit:contain; opacity:0.07; filter:grayscale(0.2); pointer-events:none; }
  .tdr-stage > *:not(.tdr-st-bg):not(.tdr-st-logo){ position:relative; z-index:1; }
  .tdr-st-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .tdr-st-brand{ font-family:'Oswald',sans-serif; font-size:27px; letter-spacing:0.05em; } .tdr-st-brand span{ color:var(--accent); }
  .tdr-st-wk{ font-family:'Oswald',sans-serif; font-size:18px; letter-spacing:0.16em; color:#b6c3d1; }
  .tdr-st-count{ font-family:'Oswald',sans-serif; font-size:24px; background:rgba(0,0,0,0.35); border:1px solid #2a3646; border-radius:999px; padding:2px 16px; } .tdr-st-count small{ color:#8fa0b2; font-size:15px; }
  .tdr-st-main{ flex:1; display:grid; grid-template-columns:340px 1fr 392px; gap:24px; min-height:0; }
  .tdr-st-l{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .tdr-st-rank{ font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:0.14em; color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:999px; padding:3px 14px; margin-bottom:10px; }
  .tdr-st-hs{ width:156px; height:156px; border-radius:50%; overflow:hidden; background:#1a2330; border:4px solid var(--accent); box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent), 0 12px 40px rgba(0,0,0,0.5); } .tdr-st-hs img{ width:100%; height:100%; object-fit:cover; }
  .tdr-st-l h2{ font-family:'Oswald',sans-serif; font-size:40px; text-transform:uppercase; margin:12px 0 2px; line-height:1.02; text-shadow:0 3px 18px rgba(0,0,0,0.55); }
  .tdr-st-sub{ font-size:19px; color:#c6d2de; display:flex; align-items:center; gap:8px; } .tdr-st-sub b{ color:#fff; }
  .tdr-st-gauge{ margin-top:14px; } .tdr-st-gauge .tdr-gauge b{ text-shadow:0 2px 14px rgba(0,0,0,0.5); }
  .tdr-st-prob{ margin-top:14px; display:flex; flex-direction:column; align-items:center; line-height:1.1; } .tdr-st-prob b{ font-family:'Oswald',sans-serif; font-size:50px; color:#fff; } .tdr-st-prob span{ font-size:12px; letter-spacing:0.14em; font-weight:700; color:#8fa0b2; }
  .tdr-st-prob em{ font-style:normal; margin-top:6px; font-size:14px; font-weight:800; letter-spacing:0.06em; padding:3px 12px; border-radius:999px; background:rgba(255,255,255,0.08); color:#c6d2de; } .tdr-st-prob em.up{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); } .tdr-st-prob em.dn{ background:rgba(255,93,93,0.16); color:#ff7b7b; }
  .tdr-st-m{ display:flex; flex-direction:column; min-width:0; }
  .tdr-st-mapwrap{ flex:1; min-height:0; } .tdr-st-mapwrap .tdr-panel{ height:100%; background:rgba(12,18,27,0.78); border-color:#2a3646; display:flex; flex-direction:column; } .tdr-st-mapwrap .tdr-panel h5{ font-size:16px; } .tdr-st-mapwrap .tdr-panel h5 small{ display:none; }
  .tdr-st-mapwrap .tdr-map{ flex:1; min-height:0; max-height:none; } .tdr-st-mapwrap .tdr-map-v{ font-size:22px; } .tdr-st-mapwrap .tdr-map-ax{ font-size:12.5px; } .tdr-st-mapwrap .tdr-map-leg{ font-size:11px; }
  .tdr-st-chips{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin-top:10px; } .tdr-st-chips div{ background:rgba(12,18,27,0.85); border:1px solid #2a3646; border-radius:12px; padding:8px 4px; text-align:center; display:flex; flex-direction:column; } .tdr-st-chips label{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#8fa0b2; } .tdr-st-chips b{ font-family:'Oswald',sans-serif; font-size:27px; } .tdr-st-chips small{ font-size:10px; color:#8fa0b2; margin-top:-3px; }
  .tdr-st-r{ background:rgba(12,18,27,0.78); border:1px solid #2a3646; border-radius:14px; padding:12px 16px; display:flex; flex-direction:column; justify-content:center; }
  .tdr-st-rt{ font-family:'Oswald',sans-serif; font-size:16px; letter-spacing:0.14em; color:#8fa0b2; margin-bottom:8px; }
  .tdr-st-r .tdr-bars{ gap:11px; } .tdr-st-r .tdr-bar{ grid-template-columns:152px minmax(0,1fr) 56px; gap:10px; } .tdr-st-r .tdr-bar-l span{ display:none; } .tdr-st-r .tdr-bar-l b{ font-size:14.5px; line-height:1.15; } .tdr-st-r .tdr-bar-t{ height:19px; border-radius:10px; } .tdr-st-r .tdr-bar-t .fill{ border-radius:10px; } .tdr-st-r .tdr-bar-v{ font-size:23px; }
  .tdr-st-foot{ display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:14.5px; color:#c6d2de; padding-top:10px; margin-top:10px; border-top:1px solid #243040; } .tdr-st-foot b{ color:#fff; margin-right:4px; } .tdr-st-url{ font-family:'Oswald',sans-serif; letter-spacing:0.08em; color:var(--accent); font-size:17px; }
  /* entrance animation when a slide is drawn (switched off for image / video capture) */
  .tdr-stage.anim .tdr-st-l, .tdr-stage.anim .tdr-st-m, .tdr-stage.anim .tdr-st-r, .tdr-stage.anim .tdr-st-foot{ animation:tdrUp .55s cubic-bezier(.16,.84,.44,1) both; }
  .tdr-stage.anim .tdr-st-m{ animation-delay:.08s; } .tdr-stage.anim .tdr-st-r{ animation-delay:.16s; } .tdr-stage.anim .tdr-st-foot{ animation-delay:.28s; }
  .tdr-stage.anim .tdr-bar-t .fill{ animation:tdrGrow .8s cubic-bezier(.16,.84,.44,1) both; animation-delay:var(--d, .2s); }
  .tdr-stage.anim .tdr-g-fg{ animation:tdrSweep 1.1s cubic-bezier(.16,.84,.44,1) both .15s; }
  @keyframes tdrUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
  @keyframes tdrGrow{ from{ width:0 } to{ width:var(--w) } }
  @keyframes tdrSweep{ from{ stroke-dashoffset:var(--len) } to{ stroke-dashoffset:var(--off) } }
  .tdr-stage.still *{ animation:none !important; transition:none !important; }
  /* the page's own position filter + search belong to the old raw tables (now folded away); the rated list has its own */
  #view-tdmatchup > .panel > .row{ display:none; }
  .tdr-gauge i{ bottom:19%; }

  /* stars, tracking tiles, route tags, data-source line */
  .tdr-rk{ display:flex; flex-direction:column; align-items:center; gap:2px; } .tdr-rk span{ font-family:'Oswald',sans-serif; font-size:1.05rem; color:var(--text-muted); line-height:1; }
  .tdr-star{ background:transparent; border:0; cursor:pointer; font-size:1.25rem; line-height:1; color:var(--text-muted); padding:2px; transition:transform .12s ease, color .12s ease; } .tdr-star:hover{ color:#ffc233; transform:scale(1.18); } .tdr-star.on{ color:#ffc233; }
  .tdr-row.starred{ border-left-color:#ffc233; }
  .tdr-seg button i{ font-style:normal; font-size:0.7rem; font-weight:800; padding:1px 7px; border-radius:999px; background:rgba(255,194,51,0.18); color:#ffc233; margin-left:4px; }
  .tdr-src{ display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:12px; font-size:0.68rem; color:var(--text-muted); } .tdr-src span{ padding:2px 10px; border-radius:999px; border:1px solid var(--border); } .tdr-src span.old{ border-style:dashed; }
  .tdr-trk{ grid-template-columns:repeat(5, minmax(0,1fr)); } .tdr-trk .up b{ color:var(--good); } .tdr-trk .dn b{ color:var(--danger); }
  .tdr-sep{ margin-top:10px; } .tdr-sep > span{ font-size:0.7rem; color:var(--text-muted); } .tdr-sepsvg{ width:100%; max-width:420px; height:auto; display:block; }
  .tdr-rt{ grid-template-columns:108px minmax(0,1fr) 40px auto 44px; } .tdr-rt u{ text-decoration:none; font-size:0.66rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; padding:1px 7px; border-radius:999px; text-align:center; background:rgba(127,127,127,0.16); color:var(--text-muted); } .tdr-rt u.up{ background:color-mix(in srgb, var(--good) 20%, transparent); color:var(--good); } .tdr-rt u.dn{ background:color-mix(in srgb, var(--danger) 20%, transparent); color:var(--danger); }
  .tdr-defstats.tdr-two{ grid-template-columns:repeat(2, 1fr); margin-top:8px; }
  @media (max-width:900px){ .tdr-trk{ grid-template-columns:repeat(2, minmax(0,1fr)); } .tdr-rt{ grid-template-columns:92px minmax(0,1fr) 36px 44px; } .tdr-rt em{ display:none; } }
  /* football-field target map */
  .tdr-field{ width:100%; height:auto; max-height:560px; display:block; }
  .tdr-fld-n{ font-size:9.5px; font-weight:700; fill:#9fb7a6; } .tdr-fld-n.los{ fill:#ffd23f; font-size:10px; }
  .tdr-fld-pct{ font-family:'Oswald',sans-serif; font-size:13px; fill:#fff; }
  .tdr-fld-adot{ font-size:9.5px; font-weight:800; fill:#0a2a13; }
  .tdr-fld-td{ font-size:6.2px; font-weight:900; fill:#3a2500; }
  .tdr-fieldpanel .tdr-map-leg{ fill:var(--text-muted); font-size:9.5px; }
  .tdr-st-m{ overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) 128px; grid-template-rows:minmax(0,1fr); gap:12px; min-height:0; } .tdr-st-mapwrap{ height:100%; min-height:0; }
  .tdr-st-chips{ grid-template-columns:1fr; margin-top:0; gap:8px; align-content:stretch; } .tdr-st-chips div{ justify-content:center; } .tdr-st-chips b{ font-size:30px; }
  .tdr-st-mapwrap{ overflow:hidden; } .tdr-st-mapwrap .tdr-fieldpanel{ overflow:hidden; }
  .tdr-st-mapwrap .tdr-field{ flex:1 1 0; min-height:0; height:0; width:100%; max-height:none; } .tdr-st-mapwrap .tdr-fieldpanel{ padding:8px 12px; } .tdr-st-mapwrap .tdr-fld-n{ font-size:11px; } .tdr-st-mapwrap .tdr-fld-pct{ font-size:15px; }
/* ---------- readability pass ---------- */
.tdr-legend i.l{ background:#9bd65a; }
.tdr-colhead{ display:grid; grid-template-columns:34px minmax(0,2.2fr) minmax(0,1.3fr) 76px 118px 22px; gap:12px; padding:0 14px 6px 18px; font-size:0.64rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.tdr-colhead span:nth-child(4){ text-align:center; } .tdr-colhead span:nth-child(5){ text-align:right; }
.tdr-word{ font-size:0.62rem !important; letter-spacing:0.1em; }
.tdr-name b{ font-size:1.02rem; }
.tdr-mini label{ font-size:0.62rem !important; } .tdr-mini b{ font-size:1.02rem !important; }
.tdr-prob b{ font-size:1.6rem !important; } .tdr-prob em{ font-size:0.72rem !important; font-style:normal; font-weight:600; }
.tdr-row{ box-shadow:0 1px 0 rgba(255,255,255,0.03); } .tdr-row:hover{ border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); }
.tdr-panel{ border-radius:14px; } .tdr-panel h5{ font-size:0.8rem; letter-spacing:0.06em; } .tdr-panel h5 small{ display:block; margin-top:3px; font-size:0.72rem; font-weight:400; text-transform:none; letter-spacing:0; }
.tdr-bar-l b{ font-size:0.86rem; } .tdr-bar-l span{ font-size:0.74rem; }
.tdr-bar-t{ height:12px !important; border-radius:7px !important; } .tdr-bar-t .fill{ border-radius:7px !important; }
@media (max-width:900px){ .tdr-colhead{ display:none; } }
/* ---------- field map redesign ---------- */
.tdr-fieldgrid{ display:grid; grid-template-columns:minmax(300px, 460px) minmax(0, 1fr); gap:22px; align-items:start; }
.tdr-fieldsvg .tdr-field{ width:100%; height:auto; display:block; background:none; padding:0; }
.tdr-zpct{ fill:#fff; font-family:'Oswald',sans-serif; font-weight:700; paint-order:stroke; stroke:rgba(0,0,0,0.5); stroke-width:3px; }
.tdr-zname{ fill:var(--text); font-family:'Oswald',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.06em; } .tdr-zsub{ fill:var(--text-muted); font-size:11px; }
.tdr-fld-n.big{ fill:var(--text-muted); font-size:13px; font-weight:700; } .tdr-fld-n.los{ fill:#ffd23f; font-size:11px; font-weight:800; letter-spacing:0.05em; }
.tdr-fld-td{ font-size:9.5px; font-weight:800; fill:#2b1d00; } .tdr-fld-adot{ font-size:12px; font-weight:800; fill:#0b3a1a; }
.tdr-depth h6{ margin:0 0 8px; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.tdr-dz{ display:grid; grid-template-columns:96px minmax(60px, 1fr) 58px 76px; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border); }
.tdr-dzh b{ display:block; font-family:'Oswald',sans-serif; letter-spacing:0.05em; font-size:0.9rem; } .tdr-dzh span, .tdr-dzn small, .tdr-dzc small{ display:block; font-size:0.68rem; color:var(--text-muted); }
.tdr-dzb{ height:12px; border-radius:7px; background:var(--surface-2); overflow:hidden; } .tdr-dzb i{ display:block; height:100%; border-radius:7px; background:linear-gradient(90deg, #2fbf71, #6fd79a); }
.tdr-dzn, .tdr-dzc{ text-align:right; } .tdr-dzn b, .tdr-dzc b{ font-size:1.05rem; font-variant-numeric:tabular-nums; } .tdr-dzc.up b{ color:var(--good); } .tdr-dzc.dn b{ color:var(--danger); }
.tdr-take{ margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--surface-2); font-size:0.84rem; line-height:1.55; } .tdr-take p{ margin:0 0 6px; } .tdr-take p:last-child{ margin:0; }
.tdr-fkey{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:12px; font-size:0.78rem; color:var(--text-muted); }
.tdr-fkey i{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; margin-right:6px; font-style:normal; font-size:0.62rem; font-weight:800; vertical-align:-4px; }
.tdr-fkey i.c{ background:#fff; border:1.5px solid #0b3a1a; } .tdr-fkey i.x{ color:#ff8f8f; font-size:0.9rem; } .tdr-fkey i.t{ background:#ffc233; color:#2b1d00; width:22px; height:22px; border:2px solid #fff; }
.tdr-fkey i.soft, .tdr-fkey i.tough{ border-radius:4px; width:16px; height:12px; background:none; } .tdr-fkey i.soft{ border:2px dashed #ffe14d; } .tdr-fkey i.tough{ border:2px solid #ff6b6b; }
.tdr-fkey .note{ flex:1 1 100%; font-size:0.72rem; }
@media (max-width:900px){ .tdr-fieldgrid{ grid-template-columns:1fr; } .tdr-dz{ grid-template-columns:84px minmax(50px, 1fr) 52px 70px; gap:8px; } }.tdr-st-mapwrap .tdr-fieldgrid{ display:flex; flex:1 1 0; min-height:0; } .tdr-st-mapwrap .tdr-depth, .tdr-st-mapwrap .tdr-fkey{ display:none; }
.tdr-st-mapwrap .tdr-fieldsvg{ flex:1; min-height:0; display:flex; justify-content:center; } .tdr-st-mapwrap .tdr-fieldsvg .tdr-field{ height:100% !important; width:auto !important; max-width:100%; flex:none; }.tdr-fieldgrid{ grid-template-columns:minmax(300px, 44%) minmax(0, 1fr) !important; }
.tdr-sepsvg, .tdr-rzs{ max-width:520px; margin:0 auto; display:block; }
@media (max-width:900px){ .tdr-fieldgrid{ grid-template-columns:1fr !important; } .tdr-fieldsvg{ max-width:440px; margin:0 auto; } }@media (max-width:520px){ .tdr-dz{ grid-template-columns:78px 1fr 1fr !important; } .tdr-dzb{ display:none; } .tdr-dzn, .tdr-dzc{ text-align:right; } }
/* ---------- TD Research: run game (running backs + quarterbacks) ---------- */
.tdr-fld-adot2{ font-size:10.5px; font-weight:800; fill:#fff; paint-order:stroke; stroke:rgba(0,0,0,0.65); stroke-width:3px; }
.tdr-fld-n{ fill:#cfe5d6; }
.tdr-runfield .tdr-zname{ font-size:12px; } .tdr-runfield .tdr-zsub{ font-size:10px; }
.tdr-fkey i.g{ background:#fff; border:2.5px solid #2fe08a; width:22px; height:22px; font-size:0.5rem; color:#0b3a1a; }
.tdr-lz{ display:grid; grid-template-columns:62px minmax(34px, 1fr) 56px 74px 84px; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--border); }
.tdr-lz.tdr-lzh{ border-top:0; padding:0 0 4px; font-size:0.6rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.tdr-lz.tdr-lzh span:nth-child(n+3){ text-align:right; }
.tdr-dza{ text-align:right; } .tdr-dza b{ display:block; font-size:1.02rem; font-variant-numeric:tabular-nums; } .tdr-dza small{ display:block; font-size:0.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; font-weight:700; }
.tdr-dza.soft b, .tdr-dza.soft small{ color:var(--good); } .tdr-dza.tough b, .tdr-dza.tough small{ color:var(--danger); }
.tdr-runtiles{ grid-template-columns:repeat(5, minmax(0,1fr)); }
.tdr-runtiles div.up b{ color:var(--good); } .tdr-runtiles div.dn b{ color:var(--danger); }
.tdr-runstats{ grid-template-columns:repeat(4, minmax(0,1fr)); } .tdr-runstats div{ min-width:0; } .tdr-runstats b{ font-size:1.25rem; } .tdr-runstats small, .tdr-runsit small{ font-size:0.62rem; color:var(--text-muted); line-height:1.25; margin-top:2px; }
.tdr-runsit{ grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:10px; } .tdr-runsit b{ font-size:1.15rem; } .tdr-runsit .up b{ color:var(--good); } .tdr-runsit .dn b{ color:var(--danger); }
.tdr-lanestrip{ margin:14px 0 4px; padding:12px 12px 10px; border-radius:12px; background:var(--surface-2); }
.tdr-ls-h{ font-size:0.74rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; } .tdr-ls-h small{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--text-muted); margin-left:6px; }
.tdr-ls-row{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.tdr-ls{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px 7px; border-radius:10px; border:2px solid transparent; text-align:center; }
.tdr-ls.used{ border-color:rgba(255,255,255,0.55); } .tdr-ls.soft.used{ border-color:#ffe14d; } .tdr-ls.tough.used{ border-color:#ff6b6b; }
.tdr-ls-v{ font-size:0.74rem; font-weight:800; font-variant-numeric:tabular-nums; } .tdr-ls.soft .tdr-ls-v{ color:var(--good); } .tdr-ls.tough .tdr-ls-v{ color:var(--danger); }
.tdr-ls-b{ position:relative; width:100%; max-width:34px; height:78px; background:rgba(127,127,127,0.12); border-radius:6px; overflow:hidden; }
.tdr-ls-b u{ position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(127,127,127,0.55); }
.tdr-ls-b i{ position:absolute; left:15%; right:15%; border-radius:3px; } .tdr-ls-b i.up{ background:var(--good); } .tdr-ls-b i.dn{ background:var(--danger); }
.tdr-ls b{ font-family:'Oswald',sans-serif; font-size:0.85rem; letter-spacing:0.05em; } .tdr-ls small{ font-size:0.62rem; color:var(--text-muted); } .tdr-ls em{ font-style:normal; font-size:0.58rem; color:var(--text-muted); line-height:1.15; }
@media (max-width:900px){ .tdr-runtiles{ grid-template-columns:repeat(3, minmax(0,1fr)); } .tdr-runstats{ grid-template-columns:repeat(2, minmax(0,1fr)); } .tdr-lz{ grid-template-columns:54px minmax(28px, 1fr) 52px 66px 74px; gap:6px; } }
@media (max-width:520px){ .tdr-runtiles{ grid-template-columns:repeat(2, minmax(0,1fr)); } .tdr-runsit{ grid-template-columns:repeat(2, minmax(0,1fr)); } .tdr-ls-row{ gap:3px; } .tdr-ls em{ display:none; } .tdr-ls-b{ height:62px; } .tdr-lz{ grid-template-columns:44px minmax(20px, 1fr) 46px 58px 62px; gap:5px; } .tdr-lz .tdr-dzh span{ display:none; } }@media (max-width:520px){
  .tdr-runfield .tdr-zname{ font-size:17px; } .tdr-runfield .tdr-zsub{ display:none; } .tdr-runfield .tdr-fld-n{ font-size:13px; } .tdr-runfield .tdr-fld-adot2{ font-size:13px; } .tdr-ls-v{ font-size:0.6rem; letter-spacing:-0.02em; }
  .tdr-lz{ grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:6px; } .tdr-lz .tdr-dzb{ display:none; } .tdr-lz.tdr-lzh span:nth-child(3){ display:none; } .tdr-lz .tdr-dzn{ text-align:left; } .tdr-lz.tdr-lzh span:nth-child(2){ text-align:left; } .tdr-lz .tdr-dzn small{ font-size:0.6rem; } .tdr-lz.tdr-lzh{ font-size:0.54rem; }
}

  /* ---------- game-day injury board ---------- */
  .injl .panel-head h2{ display:flex; align-items:center; gap:10px; }
  .injl-live{ font-family:Inter,sans-serif; font-size:0.62rem; font-weight:800; letter-spacing:0.1em; color:#04130a; background:var(--good); border-radius:999px; padding:2px 9px; animation:injlPulse 2s ease-in-out infinite; }
  @keyframes injlPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
  .injl-seg{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; } .injl-count{ margin-left:auto; font-size:0.78rem; color:var(--text-muted); } .injl-count b{ color:var(--text); }
  .injl-games{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .injl-game{ border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
  .injl-gh{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); } .injl-gh b{ font-family:'Oswald',sans-serif; letter-spacing:0.03em; }
  .injl-g{ font-size:0.68rem; font-weight:700; color:var(--text-muted); } .injl-g.live{ color:var(--warn); } .injl-g.fin{ color:var(--text-muted); text-decoration:line-through; text-decoration-color:transparent; }
  .injl-cols{ display:grid; grid-template-columns:1fr 1fr; } .injl-col{ padding:10px 12px; min-width:0; } .injl-col + .injl-col{ border-left:1px solid var(--border); }
  .injl-col h4{ margin:0 0 8px; font-family:'Oswald',sans-serif; font-size:0.9rem; letter-spacing:0.03em; display:flex; align-items:center; gap:6px; }
  .injl-p{ padding:6px 0; border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); } .injl-p:first-of-type{ border-top:0; }
  .injl-ph{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .injl-ph b{ font-size:0.88rem; } .injl-ph time{ margin-left:auto; font-size:0.62rem; color:var(--text-muted); white-space:nowrap; }
  .injl-chip{ font-size:0.6rem; font-weight:800; letter-spacing:0.06em; padding:1px 7px; border-radius:999px; } .injl-chip.out{ background:color-mix(in srgb, var(--danger) 22%, transparent); color:var(--danger); } .injl-chip.out.off{ background:var(--danger); color:#fff; }
  .injl-chip.dbt{ background:color-mix(in srgb, #ff9a3c 22%, transparent); color:#ff9a3c; } .injl-chip.q{ background:color-mix(in srgb, var(--warn) 22%, transparent); color:var(--warn); }
  .injl-note{ margin-top:3px; font-size:0.72rem; color:var(--text-muted); line-height:1.35; } .injl-none{ margin:0; font-size:0.74rem; color:var(--text-muted); }
  details.injl-old{ margin-top:14px; border:1px solid var(--border); border-radius:12px; padding:0 14px; } details.injl-old > summary{ cursor:pointer; padding:12px 0; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.03em; font-size:0.88rem; }
  @media (max-width:900px){ .injl-games{ grid-template-columns:1fr; } .injl-count{ margin-left:0; width:100%; } }
  @media (max-width:520px){ .injl-cols{ grid-template-columns:1fr; } .injl-col + .injl-col{ border-left:0; border-top:1px solid var(--border); } }/* ---------- injury opportunity ratings (NFL, NBA, NHL injury pages) + shared injury card styles ---------- */
.opp-box{ margin-top:12px; padding:10px 12px; border-radius:12px; background:var(--surface-2); }
.opp-box h5{ margin:0 0 8px; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
.opp-box h5 small{ text-transform:none; letter-spacing:0; font-weight:400; margin-left:4px; }
.opp-row{ display:grid; grid-template-columns:minmax(90px, 1.1fr) minmax(60px, 1fr) 28px minmax(78px, auto); align-items:center; gap:8px; padding:4px 0; font-size:0.78rem; }
.opp-row b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.opp-row small{ color:var(--text-muted); font-size:0.68rem; text-align:right; white-space:nowrap; }
.opp-bar{ height:8px; border-radius:5px; background:var(--surface); overflow:hidden; display:block; }
.opp-bar i{ display:block; height:100%; border-radius:5px; background:var(--text-muted); }
.opp-bar i.hi, .opp-score.hi{ background:var(--good); color:#fff; } .opp-bar i.mh{ background:#8fcf7a; } .opp-bar i.mid{ background:var(--text-muted); } .opp-bar i.ml{ background:#e5a04a; }
.opp-score{ font-weight:800; font-size:0.78rem; text-align:center; border-radius:8px; padding:2px 0; background:var(--surface); }
.opp-score.hi{ background:var(--good); color:#fff; } .opp-score.mh{ background:#8fcf7a; color:#14230f; } .opp-score.mid{ background:var(--surface); color:var(--text); } .opp-score.ml{ background:#e5a04a; color:#2a1a05; }
.opp-count{ font-style:normal; font-size:0.66rem; font-weight:600; color:var(--text-muted); margin-left:6px; }
.opp-out{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:2px; }
.injl-opp{ margin-top:16px; }
.nba-name.opp-n{ cursor:pointer; }

/* the team-card layout shared by every injury page */
.nhl-injgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap:14px; }
.nhl-injteam{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--surface); min-width:0; }
.nhl-injteam h4{ margin:0 0 8px; font-size:0.9rem; }
.nhl-injrow{ display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:7px 0; border-top:1px solid var(--border); font-size:0.8rem; }
.nhl-injrow small{ color:var(--text-muted); }
.nhl-injnote{ grid-column:1 / -1; font-size:0.73rem; color:var(--text-muted); line-height:1.4; }
.nhl-chip{ display:inline-block; font-size:0.64rem; font-weight:700; letter-spacing:0.03em; padding:2px 7px; border-radius:8px; background:var(--warn-bg, rgba(184,134,11,0.15)); color:var(--warn); }
.nhl-chip.out{ background:var(--danger-bg, rgba(166,54,47,0.14)); color:var(--danger); } .nhl-chip.dbt{ background:rgba(230,126,34,0.16); color:#d9731a; }
@media (max-width: 640px){ .opp-row{ grid-template-columns:minmax(80px, 1fr) 54px 26px; } .opp-row small{ grid-column:1 / -1; text-align:left; margin-top:-3px; } }

/* ---------- betting labs ---------- */
.lab-tabs{ margin:6px 0 10px; }
.lab-tip{ font-size:0.84rem; line-height:1.55; color:var(--text-muted); margin:0 0 12px; max-width:900px; } .lab-tip b{ color:var(--text); }
.lab-frame{ border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:6px; overflow:hidden; }
.lab-frame statyx-widget{ display:block; width:100%; }
.lab-pill{ display:inline-block; min-width:46px; padding:3px 7px; border-radius:9px; font-weight:700; font-size:0.78rem; text-align:center; font-variant-numeric:tabular-nums; background:var(--surface-2); color:var(--text-muted); }
.lab-pill small{ display:block; font-weight:400; font-size:0.6rem; opacity:0.85; }
.lab-pill.hi{ background:var(--good); color:#fff; } .lab-pill.mh{ background:color-mix(in srgb, var(--good) 38%, var(--surface-2)); color:var(--text); } .lab-pill.ml{ background:color-mix(in srgb, var(--danger) 30%, var(--surface-2)); color:var(--text); } .lab-pill.lo{ background:var(--danger); color:#fff; }
.lab-tbl td small{ display:block; font-size:0.62rem; color:var(--text-muted); font-weight:400; } .lab-tbl td.num{ white-space:nowrap; }
.lab-us{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap:14px; }
.lab-us-card{ border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:12px 14px; min-width:0; }
.lab-us-h{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; } .lab-us-h small{ color:var(--text-muted); font-size:0.7rem; margin-left:auto; }
.lab-us-row{ display:grid; grid-template-columns:minmax(100px, 1.2fr) 24px 56px 40px minmax(100px, auto) minmax(90px, auto) minmax(90px, auto); align-items:center; gap:8px; padding:5px 0; border-top:1px solid var(--border); font-size:0.78rem; }
.lab-us-row b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lab-us-row small{ color:var(--text-muted); font-size:0.66rem; } .lab-us-s{ font-size:0.72rem; white-space:nowrap; color:var(--text-muted); }
.opp-bar i.hi{ background:var(--good); } .opp-bar i.mh{ background:#8fcf7a; } .opp-bar i.mid{ background:var(--text-muted); }
@media (max-width:760px){ .lab-us-row{ grid-template-columns:minmax(90px, 1fr) 54px 38px minmax(96px, auto); } .lab-us-row small, .hide-s{ display:none; } .lab-us-row .lab-us-s:not(.hide-s){ grid-column:auto; } }
/* ---------- betting lab: game by game + locked state ---------- */
.lab-weeks{ margin:2px 0 10px; }
.lab-game{ border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:18px; margin-top:4px; }
.lab-gh{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.lab-gh > div:not(.lab-mid){ display:flex; align-items:center; gap:10px; font-size:1.25rem; font-family:'Oswald',sans-serif; } .lab-gh > div:last-child{ justify-content:flex-end; flex-direction:row-reverse; }
.lab-gh .team-badge, .lab-gh img{ width:44px; height:44px; }
.lab-mid{ text-align:center; display:flex; flex-direction:column; gap:3px; } .lab-mid span{ font-weight:700; font-size:0.9rem; } .lab-mid small{ color:var(--text-muted); font-size:0.76rem; }
.lab-defs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.lab-def{ border:1px solid var(--border); border-radius:14px; padding:14px 16px; background:var(--bg); min-width:0; }
.lab-def h4{ margin:0 0 10px; font-size:0.95rem; } .lab-def h4 small{ color:var(--text-muted); font-weight:400; font-size:0.74rem; margin-left:4px; }
.lab-stack{ display:flex; height:30px; border-radius:9px; overflow:hidden; background:var(--surface-2); }
.lab-stack i{ display:flex; align-items:center; justify-content:center; font-style:normal; font-size:0.7rem; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.45); min-width:0; overflow:hidden; }
.lab-key{ display:flex; flex-wrap:wrap; gap:4px 12px; margin:8px 0 12px; font-size:0.72rem; color:var(--text-muted); } .lab-key i{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; }
.lab-lanes{ display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; }
.lab-lanes div{ border-radius:9px; text-align:center; padding:6px 0 5px; background:var(--surface-2); } .lab-lanes small{ display:block; font-size:0.62rem; letter-spacing:0.05em; color:var(--text-muted); font-weight:700; } .lab-lanes b{ font-size:0.92rem; font-variant-numeric:tabular-nums; }
.lab-lanehint{ font-size:0.68rem; color:var(--text-muted); margin:6px 0 8px; }
.lab-notes{ margin:0; padding-left:18px; font-size:0.8rem; line-height:1.55; } .lab-notes li{ margin-bottom:3px; }
.lab-pcols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .lab-ps h4{ margin:0 0 8px; font-size:0.92rem; }
.lab-lock{ max-width:640px; margin:30px auto; text-align:center; padding:40px 26px; border:1px dashed var(--border); border-radius:18px; background:var(--surface); }
.lab-lock-ic{ font-size:2.6rem; margin-bottom:8px; } .lab-lock h2{ margin:0 0 10px; } .lab-lock p{ color:var(--text-muted); line-height:1.6; margin:0 0 18px; }
.lab-lock-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
@media (max-width:860px){ .lab-defs, .lab-pcols{ grid-template-columns:1fr; } .lab-gh{ grid-template-columns:1fr; justify-items:center; } .lab-gh > div:last-child{ justify-content:center; flex-direction:row; } .lab-game{ padding:12px; } }.lab-tbl tr.lab-first td{ border-top:1px solid var(--border); } .lab-tbl tr:not(.lab-first) td{ border-top:1px dashed color-mix(in srgb, var(--border) 50%, transparent); }
.lab-ln{ font-weight:700; color:var(--accent); margin-left:3px; }
.lab-pill{ min-width:52px; } .lab-pill small{ font-size:0.62rem; }@media (max-width:700px){ .lab-x, .lab-avg{ display:none; } .lab-pill{ min-width:46px; padding:3px 4px; } .lab-tbl th, .lab-tbl td{ padding:7px 6px !important; } .lab-tbl td.nhl-pl{ min-width:74px; white-space:normal; } }.lab-tbl tr.lab-ph td{ background:var(--surface-2); padding:6px 10px !important; border-top:1px solid var(--border); font-size:0.86rem; } .lab-tbl tr.lab-ph small{ display:inline; color:var(--text-muted); }
.lab-tbl td.lab-pr{ white-space:normal; } .lab-tbl td.lab-pr small{ display:inline; margin-left:6px; }
/* ---------- NBA Betting Lab: team picker + cleaner cards ---------- */
.lab-teams{ display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:7px; margin:6px 0 14px; }
.lab-team{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px 7px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; font-family:inherit; font-size:.72rem; font-weight:700; letter-spacing:.04em; transition:border-color .15s, background .15s, transform .15s; }
.lab-team:hover{ transform:translateY(-1px); border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
.lab-team.on{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface-2)); box-shadow:0 0 0 1px var(--accent) inset; }
.lab-team i{ position:absolute; top:4px; right:5px; font-style:normal; font-size:.6rem; color:var(--text-muted); font-weight:600; }
.lab-th{ display:flex; align-items:center; gap:12px; margin:2px 0 12px; padding:12px 14px; border-radius:14px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2)); border:1px solid var(--border); }
.lab-th .team-badge, .lab-th .nba-badge{ transform:scale(1.35); margin:0 8px 0 6px; }
.lab-th b{ font-family:'Oswald',sans-serif; font-size:1.15rem; letter-spacing:.02em; text-transform:uppercase; } .lab-th small{ display:block; color:var(--text-muted); font-size:.78rem; margin-top:2px; }
.lab-us-card{ border-left:3px solid var(--accent); box-shadow:0 1px 0 rgba(0,0,0,.15); }
.lab-us-h b{ font-size:1rem; }
.lab-us-row{ border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.lab-cta{ margin:10px 0 4px; }
@media (max-width:640px){
  .lab-teams{ display:flex; overflow-x:auto; gap:6px; padding-bottom:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .lab-teams::-webkit-scrollbar{ display:none; }
  .lab-team{ flex:0 0 68px; } .lab-th{ padding:10px 12px; }
  .lab-us{ grid-template-columns:1fr; }
}
/* ---------- Hockey (NHL) research ---------- */
.nhl-panel{ padding-top:18px; }
.nhl-asof{ font-size:0.74rem; color:var(--text-muted); border:1px solid var(--border); border-radius:12px; padding:3px 10px; white-space:nowrap; }
.nhl-fine{ font-size:0.74rem; color:var(--text-muted); line-height:1.5; margin:14px 0 0; max-width:900px; }
.nhl-logo{ width:20px; height:20px; object-fit:contain; vertical-align:-5px; flex:none; }
.nhl-logo.lg{ width:44px; height:44px; vertical-align:middle; }
.nhl-pos{ color:var(--good); font-weight:700; } .nhl-neg{ color:var(--danger); font-weight:700; }

/* date chips */
.nhl-dates{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 12px; margin:0 -2px; scrollbar-width:thin; }
.nhl-dates button{ flex:none; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); padding:7px 12px; border-radius:16px; font-size:0.8rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.nhl-dates button i{ font-style:normal; font-size:0.68rem; background:var(--surface-2); border-radius:9px; padding:1px 7px; color:var(--text-muted); }
.nhl-dates button.active{ background:var(--field); border-color:var(--field); color:#fff; }
.nhl-dates button.active i{ background:rgba(255,255,255,0.22); color:#fff; }

/* controls */
.nhl-ctl{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; margin:4px 0 14px; }
.nhl-sel{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.nhl-sel select, .nhl-sel input[type=search]{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:10px; padding:7px 10px; font-size:0.82rem; max-width:210px; }

/* game cards */
.nhl-games{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap:14px; }
.nhl-game{ border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:14px 16px 12px; min-width:0; }
.nhl-gh{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.nhl-side{ display:flex; align-items:center; gap:10px; min-width:0; }
.nhl-side.home{ flex-direction:row-reverse; text-align:right; }
.nhl-side b{ display:block; font-size:0.95rem; line-height:1.2; overflow-wrap:anywhere; }
.nhl-tl{ display:block; font-size:0.72rem; color:var(--text-muted); margin-top:2px; }
.nhl-tl em{ font-style:normal; font-weight:700; font-size:0.66rem; padding:1px 6px; border-radius:8px; margin-left:4px; }
.nhl-tl em.b2b{ background:var(--danger-bg, rgba(166,54,47,0.12)); color:var(--danger); }
.nhl-tl em.rst{ background:var(--good-bg, rgba(46,125,79,0.12)); color:var(--good); }
.nhl-mid{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:84px; }
.nhl-st{ font-size:0.72rem; font-weight:700; letter-spacing:0.03em; color:var(--text-muted); }
.nhl-st.live{ color:var(--danger); } .nhl-st.live::before{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--danger); margin-right:5px; animation:nhlPulse 1.4s ease-in-out infinite; }
.nhl-st.fin{ color:var(--text); }
@keyframes nhlPulse{ 50%{ opacity:0.25; } }
.nhl-score{ display:flex; align-items:center; gap:8px; font-size:1.5rem; font-weight:800; line-height:1; }
.nhl-score span{ color:var(--text-muted); font-weight:400; }
.nhl-sog{ font-size:0.7rem; color:var(--text-muted); }
.nhl-proj{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:0.78rem; color:var(--text-muted); margin:12px 0 8px; padding:8px 10px; background:var(--surface-2); border-radius:10px; }
.nhl-proj b{ color:var(--text); }
.nhl-venue{ opacity:0.8; }
.nhl-noline{ margin:6px 0; }

.nhl-mkt{ width:100%; border-collapse:collapse; font-size:0.8rem; }
.nhl-mkt th, .nhl-mkt td{ padding:6px 6px; border-top:1px solid var(--border); text-align:left; vertical-align:middle; }
.nhl-mkt thead th{ border-top:0; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); font-weight:600; }
.nhl-mkt tbody th{ font-size:0.74rem; color:var(--text-muted); font-weight:600; white-space:nowrap; width:1%; }
.nhl-mkt td small, .nhl-props td small, .nhl-pl small{ display:block; color:var(--text-muted); font-size:0.68rem; font-weight:400; }
.nhl-mkt td b{ margin-left:4px; }
.nhl-mkt td.num, .nhl-props td.num, .nhl-tbl td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.nhl-mkt th.num, .nhl-props th.num, .nhl-tbl th.num{ text-align:right; }
.nhl-edge{ display:inline-block; min-width:42px; text-align:center; padding:2px 7px; border-radius:8px; font-weight:700; font-size:0.74rem; background:var(--surface-2); color:var(--text-muted); font-variant-numeric:tabular-nums; }
.nhl-edge.up{ background:var(--good-bg, rgba(46,125,79,0.14)); color:var(--good); }
.nhl-edge.dn{ background:var(--danger-bg, rgba(166,54,47,0.14)); color:var(--danger); }
.nhl-val{ font-style:normal; font-size:0.6rem; font-weight:800; letter-spacing:0.05em; color:var(--accent-ink, #14100A); background:var(--accent); border-radius:6px; padding:2px 5px; margin-left:5px; vertical-align:2px; }

.nhl-more{ margin-top:10px; border-top:1px solid var(--border); padding-top:8px; }
.nhl-more summary{ cursor:pointer; font-size:0.8rem; font-weight:600; color:var(--text-muted); list-style:none; }
.nhl-more summary::before{ content:'▸ '; } .nhl-more[open] summary::before{ content:'▾ '; }
.nhl-cmps{ margin:10px 0; }
.nhl-cmphead, .nhl-cmp{ display:grid; grid-template-columns:70px 1fr 70px; align-items:center; text-align:center; gap:8px; padding:4px 0; font-size:0.8rem; }
.nhl-cmphead b{ font-size:0.78rem; }
.nhl-cmp span{ font-size:0.72rem; color:var(--text-muted); }
.nhl-cmp b{ font-variant-numeric:tabular-nums; font-weight:500; padding:2px 0; border-radius:6px; }
.nhl-cmp b.lead{ background:var(--good-bg, rgba(46,125,79,0.14)); color:var(--good); font-weight:700; }
.nhl-injcols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:12px 0; }
.nhl-injcols h5{ margin:0 0 6px; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.nhl-inj{ font-size:0.78rem; padding:3px 0; } .nhl-inj small{ color:var(--text-muted); margin-left:4px; }
.nhl-chip{ display:inline-block; font-size:0.64rem; font-weight:700; letter-spacing:0.03em; padding:2px 7px; border-radius:8px; background:var(--warn-bg, rgba(184,134,11,0.15)); color:var(--warn); }
.nhl-chip.out{ background:var(--danger-bg, rgba(166,54,47,0.14)); color:var(--danger); }
.nhl-chip.dbt{ background:rgba(230,126,34,0.16); color:#d9731a; }
.nhl-linkrow{ margin-top:6px; }

/* props */
.nhl-props, .nhl-tbl{ width:100%; border-collapse:collapse; font-size:0.8rem; }
.nhl-props th, .nhl-props td, .nhl-tbl th, .nhl-tbl td{ padding:7px 8px; border-top:1px solid var(--border); text-align:left; white-space:nowrap; vertical-align:middle; }
.nhl-props thead th, .nhl-tbl thead th{ border-top:0; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); font-weight:600; position:sticky; top:0; background:var(--surface); }
.nhl-tbl thead th[data-nhlp-sort], .nhl-tbl thead th[data-nhlt-sort]{ cursor:pointer; }
.nhl-tbl thead th.sorted{ color:var(--text); }
.nhl-tbl td.strong{ font-weight:700; }
.nhl-pl b{ font-weight:600; }
.nhl-heat{ text-align:right; }
.nhl-spark{ position:relative; display:inline-flex; align-items:flex-end; gap:2px; height:30px; padding:0 2px; }
.nhl-spark i{ display:block; width:6px; border-radius:2px 2px 0 0; min-height:3px; }
.nhl-spark i.hit{ background:var(--good); } .nhl-spark i.miss{ background:var(--danger); opacity:0.85; }
.nhl-spark u{ position:absolute; left:0; right:0; height:0; border-top:1px dashed var(--text-muted); opacity:0.7; }
.nhl-props sup{ color:var(--text-muted); cursor:help; }

/* players */
.nhl-leads{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; margin:0 0 16px; }
.nhl-lead{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--surface); }
.nhl-lead h4{ margin:0 0 6px; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); } .nhl-lead h4 small{ text-transform:none; letter-spacing:0; font-weight:400; }
.nhl-lead > div{ display:flex; align-items:center; gap:7px; padding:3px 0; font-size:0.8rem; }
.nhl-lead > div span{ width:12px; color:var(--text-muted); font-size:0.7rem; }
.nhl-lead > div b{ font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nhl-lead > div em{ font-style:normal; font-size:0.68rem; color:var(--text-muted); }
.nhl-lead > div strong{ font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }
.nhl-grp{ margin:18px 0 8px; font-size:0.95rem; }

/* injuries */
.nhl-injgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap:14px; }
.nhl-injteam{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--surface); }
.nhl-injteam h4{ margin:0 0 8px; font-size:0.9rem; } .nhl-injteam h4 em{ font-style:normal; font-size:0.66rem; color:var(--accent); font-weight:700; margin-left:6px; }
.nhl-injrow{ display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:7px 0; border-top:1px solid var(--border); font-size:0.8rem; }
.nhl-injrow small{ color:var(--text-muted); }
.nhl-injnote{ grid-column:1 / -1; font-size:0.73rem; color:var(--text-muted); line-height:1.4; }

/* guide + tools */
.nhl-guide{ display:grid; gap:12px; max-width:880px; }
.nhl-gsec{ border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:0 16px; }
.nhl-gsec summary{ cursor:pointer; padding:13px 0; font-weight:700; font-size:0.98rem; }
.nhl-gsec > div{ padding:0 0 14px; font-size:0.88rem; line-height:1.6; color:var(--text); }
.nhl-gsec ul{ margin:0; padding-left:18px; } .nhl-gsec li{ margin:0 0 8px; }
.nhl-tools{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:14px; }
.nhl-tool{ border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:14px 16px; }
.nhl-tool h3{ margin:0 0 2px; font-size:1rem; } .nhl-tool .hint{ margin:0 0 10px; }
.nhl-f{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.nhl-f label{ display:flex; flex-direction:column; gap:4px; font-size:0.72rem; color:var(--text-muted); font-weight:600; flex:1 1 90px; min-width:90px; }
.nhl-f input{ border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:9px; padding:8px 10px; font-size:0.92rem; width:100%; box-sizing:border-box; }
.nhl-legs label{ flex:1 1 80px; min-width:80px; }
.nhl-res{ font-size:0.86rem; line-height:1.65; padding:10px 12px; background:var(--surface-2); border-radius:10px; min-height:20px; }

/* home panel + hockey tab */
#home-nhl-panel .feature-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
#home-nhl-panel .feature-card{ display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; }
#home-nhl-panel .feature-card p{ display:none; }
#home-nhl-panel .feature-icon{ margin:0; flex:none; }
#home-nhl-panel .feature-title{ margin:0; font-size:0.92rem; }
nav.tabs button#tab-hockey{ border:1px solid var(--border); margin:0 2px; display:inline-flex; align-items:center; gap:7px; }
nav.tabs button#tab-hockey[aria-selected="true"]{ border-color:var(--accent); }
nav.tabs button#tab-hockey .sport-logo{ width:22px; height:22px; object-fit:contain; flex-shrink:0; }

@media (max-width: 640px){
  #home-nhl-panel .feature-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #home-nhl-panel .feature-card{ padding:10px 11px; gap:9px; } #home-nhl-panel .feature-title{ font-size:0.8rem; }
  .nhl-gh{ grid-template-columns:1fr; justify-items:stretch; gap:8px; }
  .nhl-side.home{ flex-direction:row; text-align:left; }
  .nhl-mid{ flex-direction:row; justify-content:center; gap:12px; order:-0; }
  .nhl-gh .nhl-mid{ order:2; } .nhl-gh .nhl-side.home{ order:3; }
  .nhl-injcols{ grid-template-columns:1fr; }
  .nhl-game{ padding:12px; }
  .nhl-ctl{ flex-direction:column; align-items:stretch; }
  .nhl-sel select, .nhl-sel input[type=search]{ max-width:none; flex:1 1 140px; }
}

/* ---------- goal research + profiles ---------- */
.nhl-name{ cursor:pointer; } .nhl-name:hover{ color:var(--accent); text-decoration:underline; }
.nhg-games{ display:grid; gap:18px; }
.nhg-game{ border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:16px; min-width:0; }
.nhg-gh{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:12px; }
.nhg-gh > div{ display:flex; align-items:center; gap:10px; font-size:1rem; } .nhg-gh > div:last-child{ justify-content:flex-end; text-align:right; flex-direction:row-reverse; }
.nhg-gh > span{ text-align:center; display:flex; flex-direction:column; gap:3px; } .nhg-gh small{ color:var(--text-muted); font-size:0.72rem; }
.nhg-teams{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nhg-team{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--bg); min-width:0; }
.nhg-th{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .nhg-th b{ display:block; } .nhg-th span{ font-size:0.76rem; color:var(--text-muted); }
.nhg-th em, .nhg-edges em{ font-style:normal; font-weight:700; }
.nhg-team h5, .nhg-edges h5{ margin:12px 0 5px; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
.nhg-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.nhg-tag{ font-size:0.7rem; font-weight:700; padding:3px 9px; border-radius:10px; } .nhg-tag i{ font-style:normal; opacity:0.8; margin-left:4px; }
.nhg-tag.good{ background:var(--good-bg, rgba(46,125,79,0.16)); color:var(--good); } .nhg-tag.bad{ background:var(--danger-bg, rgba(166,54,47,0.16)); color:var(--danger); }
.nhg-bar{ display:grid; grid-template-columns:minmax(96px, 150px) 1fr 30px; align-items:center; gap:8px; padding:3px 0; font-size:0.76rem; }
.nhg-bar > div{ height:8px; border-radius:5px; background:var(--surface-2); overflow:hidden; } .nhg-bar i{ display:block; height:100%; border-radius:5px; }
.nhg-bar b{ text-align:right; font-variant-numeric:tabular-nums; }
.hi{ --c:var(--good); } .mh{ --c:#8fcf7a; } .mid{ --c:var(--text-muted); } .ml{ --c:#e5a04a; } .lo{ --c:var(--danger); }
.nhg-bar i, .nhg-badge{ background:var(--c, var(--text-muted)); } .nhg-bar b, .nhg-th em{ color:var(--c, var(--text)); }
/* Goal Research reads green = target, red = fade, grey = neutral */
.nhg-call{ display:inline-block; margin-left:6px; font-size:0.58rem; font-weight:800; letter-spacing:0.07em; padding:1px 6px; border-radius:6px; vertical-align:middle; }
.nhg-call.hi{ background:var(--good-bg); color:var(--good); } .nhg-call.lo{ background:var(--danger-bg); color:var(--danger); }
.nhg-badge.mid{ background:color-mix(in srgb, var(--text-muted) 60%, var(--bg)); }
.nhg-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:0 0 12px; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); font-size:0.8rem; }
.nhg-legend i{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--c, var(--text-muted)); margin-right:6px; vertical-align:-1px; }
.nhg-legend b{ font-weight:700; } .nhg-legend small{ flex-basis:100%; color:var(--text-muted); font-size:0.72rem; }
.nhg-team h5 small{ text-transform:none; letter-spacing:0; font-weight:500; opacity:0.85; margin-left:4px; }
.nhg-edges{ margin:14px 0 4px; padding:10px 14px; border:1px dashed var(--border); border-radius:12px; font-size:0.8rem; line-height:1.55; }
.nhg-edges div{ padding:2px 0; } .nhg-edges i{ font-style:normal; color:var(--text-muted); }
.nhg-lists{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.nhg-side h4{ margin:0 0 8px; font-size:0.9rem; }
.nhg-row{ border:1px solid var(--border); border-radius:12px; margin-bottom:7px; background:var(--surface); overflow:hidden; }
.nhg-main{ width:100%; display:grid; grid-template-columns:20px 36px minmax(0, 1fr) 46px 62px 74px 56px auto 14px; align-items:center; gap:9px; padding:8px 10px; background:none; border:0; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.nhg-main:hover{ background:var(--surface-2); }
.nhg-i{ font-size:0.72rem; color:var(--text-muted); text-align:center; }
.nhg-hs{ width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:top; background:var(--surface-2); display:block; }
.nhg-n b{ display:block; font-size:0.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nhg-n small{ color:var(--text-muted); font-size:0.7rem; }
.nhg-badge{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; font-size:0.95rem; color:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--c, #888) 22%, transparent); }
.nhg-badge b{ color:#fff; font-weight:800; }
.nhg-c{ text-align:center; line-height:1.2; } .nhg-c b{ display:block; font-size:0.86rem; } .nhg-c small{ display:block; color:var(--text-muted); font-size:0.64rem; }
.nhg-chev{ font-style:normal; color:var(--text-muted); transition:transform .15s; } .nhg-row.open .nhg-chev{ transform:rotate(180deg); }
.nhg-detail{ border-top:1px solid var(--border); padding:12px 14px; display:grid; grid-template-columns:1.2fr 1fr; gap:16px; background:var(--bg); }
.nhg-comp{ display:grid; grid-template-columns:minmax(110px, 1fr) 118px 1fr 40px; align-items:center; gap:8px; padding:3px 0; font-size:0.76rem; } .nhg-comp small{ color:var(--text-muted); font-size:0.68rem; }
.nhg-cbar{ position:relative; height:8px; background:var(--surface-2); border-radius:5px; } .nhg-cbar::after{ content:''; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--text-muted); opacity:0.5; }
.nhg-cbar i{ position:absolute; top:0; bottom:0; border-radius:4px; } .nhg-cbar i.pos{ background:var(--good); } .nhg-cbar i.neg{ background:var(--danger); }
.nhg-comp b{ text-align:right; font-variant-numeric:tabular-nums; }
.nhg-notes p{ margin:0 0 6px; font-size:0.78rem; line-height:1.5; }
.nhg-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px; } .nhg-chips span{ font-size:0.68rem; padding:3px 8px; border-radius:9px; background:var(--surface-2); color:var(--text-muted); }
.nhg-slate > div{ margin-bottom:6px; } .nhg-gt{ display:block; font-size:0.66rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin:6px 0 3px 4px; }
.nhg-cell{ background:color-mix(in srgb, var(--c, transparent) 26%, transparent); color:var(--text); font-weight:600; } .nhg-cell small{ display:block; font-weight:400; font-size:0.62rem; color:var(--text-muted); }
.nhg-grid thead th.grp{ border-left:1px solid var(--border); } .nhg-grid td, .nhg-grid th{ padding:6px 7px; }
.nhg-prof{ display:flex; align-items:center; gap:14px; margin:6px 0 14px; }
.nhp-svg{ width:100%; height:auto; display:block; }
.nhp-head .pm-head-logo{ opacity:0.14; }

@media (max-width: 760px){
  .nhg-teams, .nhg-lists, .nhg-detail{ grid-template-columns:1fr; }
  .nhg-gh{ grid-template-columns:1fr; justify-items:center; } .nhg-gh > div:last-child{ justify-content:center; flex-direction:row; text-align:left; }
  .nhg-main{ grid-template-columns:18px 32px minmax(0, 1fr) 40px 52px auto 12px; gap:7px; padding:8px; }
  .nhg-main .nhl-spark, .nhg-hide{ display:none; } .nhg-hs{ width:32px; height:32px; }
  .nhg-badge{ width:38px; height:38px; font-size:0.86rem; }
  .nhg-comp{ grid-template-columns:minmax(96px, 1fr) 1fr 38px; } .nhg-comp small{ display:none; }
  .nhg-bar{ grid-template-columns:minmax(88px, 120px) 1fr 28px; }
  .nhg-game{ padding:12px; }
}
/* ---------- goal research: cleaner layout ---------- */
.nhg-game{ padding:22px 24px; border-radius:18px; }
.nhg-gh{ margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.nhg-gh > div{ font-family:'Oswald',sans-serif; font-size:1.2rem; letter-spacing:0.01em; }
.nhg-strips{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nhg-strip{ display:flex; gap:14px; align-items:center; padding:12px 14px; border-radius:14px; background:var(--bg); border:1px solid var(--border); }
.nhg-strip > div > b{ display:block; font-size:0.95rem; margin-bottom:5px; }
.nhg-sc{ display:flex; gap:16px; font-size:0.78rem; color:var(--text-muted); margin-bottom:7px; } .nhg-sc em{ font-style:normal; font-weight:800; font-size:1.05rem; color:var(--c, var(--text)); margin-left:3px; }
.nhg-edges{ margin:14px 0 8px; border:0; background:var(--surface-2); border-radius:12px; padding:11px 14px; } .nhg-edges h5{ margin-top:0; }
.nhg-fullbtn{ display:block; margin:8px 0 14px; background:none; border:0; color:var(--accent); font:inherit; font-size:0.8rem; font-weight:600; cursor:pointer; padding:4px 0; } .nhg-fullbtn:hover{ text-decoration:underline; }
.nhg-listhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:10px 0 8px; } .nhg-listhead h4{ margin:0; font-size:1.05rem; }
.nhg-cols, .nhg-main{ grid-template-columns:24px 40px minmax(0, 1.5fr) 46px minmax(100px, 1fr) 84px 58px 16px; }
.nhg-cols{ display:grid; gap:12px; padding:0 14px 6px; font-size:0.62rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.nhg-cols span:nth-child(4), .nhg-cols span:nth-child(6), .nhg-cols span:nth-child(7){ text-align:center; }
.nhg-list{ display:grid; gap:6px; }
.nhg-row{ margin:0; border-radius:14px; border:1px solid var(--border); }
.nhg-row.open{ border-color:color-mix(in srgb, var(--accent) 50%, var(--border)); }
.nhg-main{ gap:12px; padding:10px 14px; }
.nhg-n small{ display:flex; align-items:center; gap:5px; margin-top:2px; }
.nhg-n small .nhl-logo{ width:14px; height:14px; vertical-align:-3px; }
.nhg-ch{ display:flex; align-items:center; gap:9px; } .nhg-ch b{ font-size:0.95rem; min-width:36px; font-variant-numeric:tabular-nums; }
.nhg-cb{ flex:1; height:9px; border-radius:6px; background:var(--surface-2); overflow:hidden; } .nhg-cb i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, #2fbf71, #8fd36a); }
.nhg-bk, .nhg-ed{ text-align:center; line-height:1.2; } .nhg-bk b{ display:block; font-size:0.9rem; } .nhg-bk small{ display:block; font-size:0.64rem; color:var(--text-muted); }
.nhg-detail{ grid-template-columns:1.1fr 1fr; gap:22px; padding:16px 18px; }
.nhg-dh{ font-size:0.68rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
.nhg-shots{ margin:10px 0 12px; } .nhg-shots > span{ font-size:0.7rem; color:var(--text-muted); } .nhg-shots i{ font-style:normal; opacity:0.8; }
.nhg-shots > div{ display:flex; align-items:flex-end; gap:5px; height:58px; margin-top:6px; }
.nhg-shots b{ flex:1; max-width:26px; border-radius:5px 5px 2px 2px; background:var(--text-muted); opacity:0.55; position:relative; min-height:8px; } .nhg-shots b.g{ background:var(--good); opacity:1; }
.nhg-shots em{ position:absolute; top:-15px; left:0; right:0; text-align:center; font-style:normal; font-size:0.62rem; color:var(--text-muted); }
@media (max-width:760px){
  .nhg-strips{ grid-template-columns:1fr; } .nhg-game{ padding:14px 12px; }
  .nhg-cols{ display:none; }
  .nhg-main{ grid-template-columns:20px 34px minmax(0, 1fr) 42px 82px 14px; gap:9px; padding:9px 10px; }
  .nhg-bk, .nhg-ed{ display:none; } .nhg-ch b{ min-width:30px; font-size:0.85rem; } .nhg-cb{ display:none; }
  .nhg-ch{ justify-content:center; } .nhg-main > .nhg-ch{ grid-column:5; }
}@media (max-width:760px){
  .nhg-detail{ grid-template-columns:1fr !important; gap:14px; padding:14px 12px; }
  .nhg-main{ grid-template-columns:18px 32px minmax(0, 1fr) 40px 42px 12px !important; gap:8px !important; padding:9px 8px !important; }
  .nhg-n b{ font-size:0.84rem; } .nhg-n small{ font-size:0.66rem; flex-wrap:wrap; }
  .nhg-detail .btn{ white-space:nowrap; }
  .nhg-comp{ grid-template-columns:minmax(110px, 1fr) 1fr 40px !important; }
}
/* phones: Home + Football + Basketball + Hockey must all fit on one row */
@media (max-width:640px){
  nav.tabs button.sport-tab{ padding:6px 7px !important; font-size:0.78rem !important; gap:4px !important; margin:0 1px !important; letter-spacing:0 !important; }
  nav.tabs button.sport-tab img, nav.tabs button.sport-tab .sport-logo{ width:17px !important; height:17px !important; }
  nav.tabs button#tab-home{ padding-left:8px !important; padding-right:8px !important; }
}/* the NHL shield is mostly black: no plate behind it (transparent logo on the dark theme); a soft light edge keeps it readable */
nav.tabs button#tab-hockey .sport-logo, #home-nhl-panel .nba-eyebrow img{ background:none; padding:0; border-radius:0; filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 3px rgba(255,255,255,.28)); }
/* team logos: dark crests (BOS, VGK, ANA, PIT...) get a faint light edge so they pop on the dark bar, plus a tiny shadow for depth */
.nhl-logo, .ticker-item img[src*="/img/nhl/"]{ filter:drop-shadow(0 0 1px rgba(255,255,255,.4)) drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
/* ---------- goal research: teams side by side ---------- */
.nhg-listhead{ flex-direction:column; align-items:flex-start; gap:2px; }
.nhg-sides{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.nhg-sidecol{ min-width:0; }
.nhg-sidehead{ display:flex; align-items:center; gap:8px; padding:8px 4px; margin-bottom:6px; border-bottom:2px solid var(--border); } .nhg-sidehead b{ font-family:'Oswald',sans-serif; font-size:1rem; } .nhg-sidehead span{ margin-left:auto; font-size:0.72rem; color:var(--text-muted); }
.nhg-sidecol .nhg-cols, .nhg-sidecol .nhg-main{ grid-template-columns:20px 36px minmax(0, 1fr) 44px 58px 66px 12px; gap:9px; }
.nhg-sidecol .nhg-cols{ padding:0 12px 4px; } .nhg-sidecol .nhg-main{ padding:8px 10px; }
.nhg-sidecol .nhg-hs{ width:36px; height:36px; }
.nhg-ch{ flex-direction:column !important; align-items:stretch !important; gap:3px !important; } .nhg-ch b{ text-align:center; font-size:0.9rem; min-width:0 !important; } .nhg-cb{ flex:none !important; height:6px !important; }
.nhg-bk{ display:flex; flex-direction:column; align-items:center; gap:3px; } .nhg-bk .nhl-edge{ min-width:0; padding:1px 6px; font-size:0.66rem; }
.nhg-sidecol .nhg-detail{ grid-template-columns:1fr !important; gap:12px; }
.nhg-extra{ margin:14px 2px 0; font-size:0.78rem; color:var(--text-muted); line-height:1.6; } .nhg-extra em{ font-style:normal; color:var(--text); font-weight:600; }
@media (max-width:980px){ .nhg-sides{ grid-template-columns:1fr; } }
@media (max-width:760px){
  .nhg-sidecol .nhg-cols{ display:none; }
  .nhg-sidecol .nhg-main{ grid-template-columns:18px 32px minmax(0, 1fr) 38px 40px 56px 10px !important; gap:7px !important; padding:8px 8px !important; }
  .nhg-bk{ display:flex !important; } .nhg-ch{ display:flex !important; } .nhg-cb{ display:block !important; }
}@media (max-width:760px){
  .nhg-sidecol .nhg-hs{ display:none; }
  .nhg-sidecol .nhg-main{ grid-template-columns:16px minmax(0, 1fr) 38px 40px 54px 10px !important; gap:7px !important; }
  .nhg-sidecol .nhg-n small .nhl-logo{ display:none; }
  .nhg-sidecol .nhg-n b{ white-space:normal; line-height:1.15; }
}@media (max-width:760px){
  .nhg-sidecol .nhg-main{ display:flex !important; align-items:center; gap:8px !important; }
  .nhg-sidecol .nhg-main > .nhg-i{ flex:0 0 16px; } .nhg-sidecol .nhg-main > .nhg-n{ flex:1 1 0; min-width:0; }
  .nhg-sidecol .nhg-main > .nhg-badge{ flex:0 0 38px; } .nhg-sidecol .nhg-main > .nhg-ch{ flex:0 0 44px; } .nhg-sidecol .nhg-main > .nhg-bk{ flex:0 0 56px; } .nhg-sidecol .nhg-main > .nhg-chev{ flex:0 0 10px; }
}

/* ======== Goal Research: game picker, search by game, and the phone layout (supersedes the patches above on small screens) ======== */
.nhg-gpick{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; margin:0 -2px 6px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; overscroll-behavior-x:contain; }
.nhg-gchip{ flex:0 0 auto; scroll-snap-align:start; display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:3px 5px; min-width:122px; padding:8px 12px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:14px; font:inherit; font-size:0.8rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.nhg-gchip b{ font-family:'Oswald',sans-serif; letter-spacing:0.02em; } .nhg-gchip i{ font-style:normal; color:var(--text-muted); }
.nhg-gchip small{ flex-basis:100%; text-align:center; color:var(--text-muted); font-size:0.68rem; }
.nhg-gchip .nhl-logo{ width:18px; height:18px; vertical-align:middle; }
.nhg-gchip.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface)); } .nhg-gchip.active small{ color:var(--text); }
.nhg-sidetabs{ display:none; }
@media (max-width:760px){
  #view-nhl-goals .nhg-sidetabs{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0 10px; }
  #view-nhl-goals .nhg-sidetabs button{ display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-weight:700; font-size:0.86rem; -webkit-tap-highlight-color:transparent; }
  #view-nhl-goals .nhg-sidetabs button.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface)); }
  #view-nhl-goals .nhg-sidetabs i{ font-style:normal; font-weight:600; color:var(--text-muted); font-size:0.72rem; }
  /* one team's list at a time instead of two long stacked lists */
  #view-nhl-goals .nhg-sides{ display:block !important; }
  #view-nhl-goals .nhg-sides[data-side="away"] > .nhg-sidecol:nth-child(2), #view-nhl-goals .nhg-sides[data-side="home"] > .nhg-sidecol:nth-child(1){ display:none !important; }
  #view-nhl-goals .nhg-sidehead{ display:none; }
  /* compact game header: logos either side of the status */
  #view-nhl-goals .nhg-game{ padding:12px 10px !important; border-radius:14px; }
  #view-nhl-goals .nhg-gh{ grid-template-columns:1fr auto 1fr !important; gap:6px !important; justify-items:stretch !important; margin-bottom:10px !important; padding-bottom:10px !important; }
  #view-nhl-goals .nhg-gh > div, #view-nhl-goals .nhg-gh > div:last-child{ flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; gap:4px !important; font-size:0.8rem !important; line-height:1.15; text-align:center !important; }
  #view-nhl-goals .nhg-gh .nhl-logo.lg{ width:42px; height:42px; }
  #view-nhl-goals .nhg-gh > span{ gap:2px; font-size:0.78rem; }
  /* the two team cards sit side by side and stay short */
  #view-nhl-goals .nhg-strips{ grid-template-columns:1fr 1fr !important; gap:8px !important; }
  #view-nhl-goals .nhg-strip{ padding:8px 9px !important; gap:0 !important; border-radius:12px; }
  #view-nhl-goals .nhg-strip .nhl-logo{ display:none; }
  #view-nhl-goals .nhg-strip > div > b{ font-size:0.8rem; margin-bottom:3px; }
  #view-nhl-goals .nhg-sc{ gap:10px !important; margin-bottom:5px !important; font-size:0.7rem !important; } #view-nhl-goals .nhg-sc em{ font-size:0.92rem !important; }
  #view-nhl-goals .nhg-strip .nhg-tags{ gap:4px; } #view-nhl-goals .nhg-tag{ font-size:0.62rem !important; padding:2px 7px !important; }
  #view-nhl-goals .nhg-edges{ margin:10px 0 6px !important; padding:9px 11px !important; font-size:0.76rem !important; }
  #view-nhl-goals .nhg-listhead{ margin:6px 0 8px; } #view-nhl-goals .nhg-listhead h4{ font-size:0.95rem; }
  /* player row: name on top; chance + price under it; rating badge on the right */
  #view-nhl-goals .nhg-main{ display:grid !important; grid-template-columns:34px minmax(0, 1fr) minmax(0, 1fr) 42px 14px !important; grid-template-areas:"hs n n badge chev" "hs ch bk badge chev" !important; column-gap:9px !important; row-gap:3px !important; align-items:center; padding:9px 10px !important; }
  #view-nhl-goals .nhg-main > .nhg-i{ display:none !important; }
  #view-nhl-goals .nhg-main > .nhg-hs{ grid-area:hs; display:block !important; width:34px !important; height:34px !important; }
  #view-nhl-goals .nhg-main > .nhg-n{ grid-area:n; min-width:0; } #view-nhl-goals .nhg-n b{ font-size:0.88rem; white-space:nowrap; } #view-nhl-goals .nhg-n small{ font-size:0.68rem; }
  #view-nhl-goals .nhg-main > .nhg-badge{ grid-area:badge; width:40px; height:40px; font-size:0.9rem; }
  #view-nhl-goals .nhg-main > .nhg-ch{ grid-area:ch; display:flex !important; flex-direction:row !important; align-items:center !important; gap:7px !important; min-width:0; }
  #view-nhl-goals .nhg-ch b{ font-size:0.82rem; min-width:0 !important; } #view-nhl-goals .nhg-cb{ display:block !important; flex:1 1 auto !important; height:5px !important; }
  #view-nhl-goals .nhg-main > .nhg-bk{ grid-area:bk; display:flex !important; flex-direction:row !important; align-items:center; justify-content:flex-end; gap:6px !important; }
  #view-nhl-goals .nhg-bk b{ font-size:0.82rem; } #view-nhl-goals .nhg-bk small{ font-size:0.62rem; }
  #view-nhl-goals .nhg-main > .nhg-chev{ grid-area:chev; }
  #view-nhl-goals .nhg-detail{ grid-template-columns:1fr !important; gap:12px !important; padding:12px 10px !important; }
  #view-nhl-goals .nhg-comp{ grid-template-columns:minmax(0, 1fr) 1fr 36px !important; font-size:0.74rem; }
  #view-nhl-goals .nhg-detail .btn{ width:100%; justify-content:center; }
  #view-nhl-goals .nhl-sel{ width:100%; } #view-nhl-goals #nhg-q{ width:100%; min-height:44px; font-size:16px; }   /* 16px: stops iOS zooming the page when the box is focused */
}
/* NHL props: period + special markets live in a dropdown next to the main market chips */
#nhl-mkts select{ background:var(--surface-2,#141b25); color:var(--text); border:1px solid var(--border); border-radius:999px; padding:7px 14px; font-weight:600; font-size:0.85rem; cursor:pointer; max-width:100%; }
#nhl-mkts select.active{ border-color:var(--accent); color:var(--accent); }
.nhl-search-pill{ background:#4f9dff; color:#04101f; font-weight:800; font-size:0.62rem; }
.site-search-row .nhl-logo{ width:18px; height:18px; }

/* NHL Player props on a phone: each prop is a card (setup, player, bet and price on top; matchup / ice time / injuries / volume tiles; then the price numbers) instead of a 14-column table */
@media (max-width:700px){
  #view-nhl-props .table-wrap{ overflow:visible !important; border:0 !important; }
  #view-nhl-props table.nhl-props, #view-nhl-props table.nhl-props tbody{ display:block; width:100%; min-width:0 !important; }
  #view-nhl-props table.nhl-props thead{ display:none; }
  #view-nhl-props table.nhl-props tbody tr{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:6px; padding:12px 10px; margin:0 0 10px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); cursor:pointer; }
  #view-nhl-props table.nhl-props tbody tr > td{ display:block; border:0 !important; padding:0 !important; min-width:0; white-space:normal; text-align:left; background:transparent !important; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(1){ grid-column:1 / span 2; grid-row:1 / span 2; align-self:center; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(2){ grid-column:3 / -1; grid-row:1; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(3){ grid-column:3 / span 6; grid-row:2; align-self:center; font-weight:700; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(8){ grid-column:9 / -1; grid-row:2; text-align:right; align-self:center; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(n+4):nth-child(-n+7), #view-nhl-props table.nhl-props tbody tr > td:nth-child(n+11):nth-child(-n+14){ grid-column:span 3; text-align:center; padding:7px 2px !important; border-radius:10px; background:rgba(255, 255, 255, .055) !important; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(9), #view-nhl-props table.nhl-props tbody tr > td:nth-child(10){ grid-column:span 6; text-align:center; padding:7px 2px !important; border-radius:10px; background:rgba(255, 255, 255, .055) !important; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(n+4):nth-child(-n+7)::before, #view-nhl-props table.nhl-props tbody tr > td:nth-child(n+9):nth-child(-n+14)::before{ display:block; margin-bottom:2px; font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(4)::before{ content:'Matchup'; } #view-nhl-props table.nhl-props tbody tr > td:nth-child(5)::before{ content:'Ice time'; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(6)::before{ content:'Injuries'; } #view-nhl-props table.nhl-props tbody tr > td:nth-child(7)::before{ content:'Volume'; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(9)::before{ content:'Last 10 games'; } #view-nhl-props table.nhl-props tbody tr > td:nth-child(10)::before{ content:'L5 / season avg'; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(11)::before{ content:'Book'; } #view-nhl-props table.nhl-props tbody tr > td:nth-child(12)::before{ content:'Model'; }
  #view-nhl-props table.nhl-props tbody tr > td:nth-child(13)::before{ content:'Edge'; } #view-nhl-props table.nhl-props tbody tr > td:nth-child(14)::before{ content:'EV'; }
  #view-nhl-props table.nhl-props tbody tr > td small{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* ---------- shared chart polish: one look for every bar chart on the site ---------- */
.pm-svg, .nbm-chart svg, .nhp-svg, .tdr-rzs, .tdr-sepsvg, .tr-svg{ background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, transparent), transparent); border-radius:12px; padding:6px 4px 2px; box-sizing:border-box; }
.pm-svg rect:not([fill="none"]), .nbm-chart svg rect[rx], .nhp-svg rect, .tdr-rzs rect, .tdr-sepsvg rect{ rx:4px; ry:4px; transition:opacity .15s ease, filter .15s ease; transform-box:fill-box; transform-origin:bottom; animation:chartGrow .55s cubic-bezier(.2,.8,.2,1) both; }
.pm-svg rect:hover, .nbm-chart svg rect:hover, .nhp-svg rect:hover, .tdr-rzs rect:hover, .tdr-sepsvg rect:hover{ filter:brightness(1.18) saturate(1.1); opacity:1 !important; }
@keyframes chartGrow{ from{ transform:scaleY(0.02); opacity:0.3; } to{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .pm-svg rect, .nbm-chart svg rect, .nhp-svg rect, .tdr-rzs rect, .tdr-sepsvg rect{ animation:none; } }
.pm-grid, .nbm-grid, .tdr-grid, .tr-grid{ stroke:var(--border); stroke-dasharray:2 5; opacity:0.7; }
.pm-txt, .nbm-ax, .tdr-ax{ fill:var(--text-muted); font-size:10.5px; font-weight:500; }
.nbp-avg, .tdr-avg, .nbm-avg{ stroke:var(--accent); stroke-width:1.6; stroke-dasharray:6 4; opacity:0.95; }
.nbp-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; font-size:0.74rem; color:var(--text-muted); margin:6px 2px 4px; }
.nbp-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.nbp-w, .nbp-l{ rx:4px; }
.nbp-legend i.nbp-w{ background:var(--good); } .nbp-legend i.nbp-l{ background:var(--danger); }
.nbp-chart, .tdr-panel svg{ max-width:100%; }/* ---------- UFC research ---------- */
:root{ --ufb:#ff8a3d; }
body.sport-ufc #subtabs-ufc{ display:flex; }
#subtabs-ufc{ display:none; }
.ufc-panel .panel-head{ margin-bottom:6px; }
/* event tabs */
.uf-events{ gap:8px; margin:12px 0; } .uf-events button i{ font-style:normal; margin-left:8px; font-size:.7rem; opacity:.75; }
.uf-ev-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; margin:6px 0 10px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 9%, var(--surface-2)), var(--surface-2) 70%); }
.uf-ev-head h3{ margin:0; font-family:'Oswald',sans-serif; font-size:1.35rem; letter-spacing:.02em; text-transform:uppercase; } .uf-ev-head span{ color:var(--text-muted); font-size:.84rem; } .uf-ev-head > div:first-child{ flex:1 1 260px; min-width:0; }
.uf-ev-n{ text-align:center; padding:6px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--border); } .uf-ev-n b{ display:block; font-family:'Oswald',sans-serif; font-size:1.4rem; line-height:1.1; } .uf-ev-n small{ font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
/* a fight */
.uf-list{ display:flex; flex-direction:column; gap:10px; }
.uf-fight{ position:relative; border:1px solid var(--border); border-radius:16px; background:var(--surface-2); padding:12px 16px 10px; overflow:hidden; }
.uf-fight.main{ border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow:0 14px 40px -28px var(--accent); }
.uf-meta{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:var(--text-muted); margin-bottom:10px; }
.uf-meta .uf-wc{ color:var(--text); } .uf-meta span + span::before{ content:'·'; margin-right:10px; opacity:.6; } .uf-meta .uf-main-b{ margin-left:auto; padding:2px 10px; border-radius:99px; background:var(--accent); color:#04130a; } .uf-meta .uf-main-b::before{ content:none !important; margin:0; }
.uf-main{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(190px, 260px) minmax(0, 1fr); gap:12px 18px; align-items:center; }
.uf-side{ display:flex; align-items:center; gap:12px; min-width:0; } .uf-side.b{ flex-direction:row-reverse; text-align:right; }
.uf-who{ display:flex; align-items:center; gap:12px; min-width:0; padding:0; background:none; border:0; color:inherit; font:inherit; cursor:pointer; text-align:inherit; } .uf-side.b .uf-who{ flex-direction:row-reverse; }
.uf-who b{ display:block; font-size:1.02rem; line-height:1.2; } .uf-who:hover b{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.uf-who small{ display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.74rem; margin-top:2px; } .uf-side.b .uf-who small{ justify-content:flex-end; }
.uf-flag{ width:18px; height:12px; object-fit:cover; border-radius:2px; }
.uf-odds{ margin-left:auto; } .uf-side.b .uf-odds{ margin-left:0; margin-right:auto; }
.uf-odds b{ font-family:'Oswald',sans-serif; font-size:1.15rem; padding:4px 10px; border-radius:10px; background:var(--surface); border:1px solid var(--border); } .uf-odds b.fav{ color:var(--accent); } .uf-odds b.dog{ color:var(--ufb); }
/* photos */
.uf-ph{ position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; width:58px; height:58px; border-radius:50%; overflow:hidden; background:var(--surface); border:2px solid var(--accent); }
.uf-ph.b{ border-color:var(--ufb); } .uf-ph.sm{ width:34px; height:34px; border-width:1.5px; } .uf-ph.lg{ width:92px; height:92px; border-width:3px; }
.uf-ph b{ font-family:'Oswald',sans-serif; font-size:1rem; color:var(--text-muted); } .uf-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
/* middle */
.uf-mid{ text-align:center; }
.uf-big{ display:flex; align-items:baseline; justify-content:center; gap:10px; } .uf-big b{ font-family:'Oswald',sans-serif; font-size:1.6rem; line-height:1; color:var(--text-muted); } .uf-big b.lean{ color:var(--text); } .uf-big small{ font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.uf-split{ position:relative; display:flex; height:10px; border-radius:99px; overflow:hidden; background:var(--surface); margin:6px 0; } .uf-split i{ display:block; height:100%; } .uf-split i.a{ background:var(--accent); } .uf-split i.b{ background:var(--ufb); }
.uf-split span{ position:absolute; top:50%; transform:translateY(-50%); font-size:.66rem; font-weight:800; color:#04130a; padding:0 8px; } .uf-split span.l{ left:0; } .uf-split span.r{ right:0; }
.uf-split:has(span){ height:20px; } .uf-split.slim{ height:8px; }
.uf-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:6px; } .uf-chips span{ font-size:.68rem; color:var(--text-muted); padding:2px 8px; border-radius:8px; background:var(--surface); border:1px solid var(--border); } .uf-chips b{ color:var(--text); } .uf-chips .edge{ border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
.uf-lean{ margin-top:10px; padding:8px 12px; border-radius:10px; background:var(--surface); font-size:.84rem; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; } .uf-lean b{ color:var(--accent); } .uf-endq{ margin-left:auto; color:var(--text-muted); font-size:.76rem; }
.uf-val{ font-style:normal; font-size:.66rem; font-weight:800; padding:1px 8px; border-radius:99px; background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 50%, transparent); white-space:nowrap; }
.uf-more{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:8px; padding:8px; background:none; border:0; border-top:1px solid var(--border); color:var(--text-muted); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; } .uf-more:hover{ color:var(--accent); } .uf-more i{ font-style:normal; font-size:.7rem; }
/* detail */
.uf-detail{ margin-top:4px; } .uf-detail-in{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 22px; padding-top:6px; }
.uf-sec{ min-width:0; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface); } .uf-sec h4{ margin:0 0 8px; font-family:'Oswald',sans-serif; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; } .uf-sec h4 small{ font-family:Inter,sans-serif; text-transform:none; letter-spacing:0; font-weight:500; color:var(--text-muted); font-size:.72rem; margin-left:6px; }
.uf-detail-in > .uf-sec:nth-child(3), .uf-detail-in > .uf-sec:nth-child(4){ grid-row:span 2; } .uf-hist{ grid-column:1 / -1; }
.uf-p3{ margin-bottom:6px; } .uf-p3 > span{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.uf-why{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:.84rem; line-height:1.45; color:var(--text-muted); } .uf-why li{ padding:8px 10px; border-left:3px solid var(--accent); border-radius:0 10px 10px 0; background:var(--surface-2); } .uf-why b{ color:var(--text); }
.uf-rows{ display:flex; flex-direction:column; gap:6px; }
.uf-row{ display:grid; grid-template-columns:62px minmax(0, 1fr) 62px; gap:10px; align-items:center; } .uf-row > b{ font-family:'Oswald',sans-serif; font-size:1rem; color:var(--text-muted); } .uf-row > b:first-child{ text-align:right; } .uf-row > b.win{ color:var(--text); }
.uf-rb{ text-align:center; } .uf-rb span{ display:block; font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700; color:var(--text-muted); margin-bottom:3px; }
.uf-rbar{ display:flex; height:7px; border-radius:99px; overflow:hidden; background:var(--surface-2); } .uf-rbar i{ display:block; height:100%; } .uf-rbar i.a{ background:var(--accent); } .uf-rbar i.b{ background:var(--ufb); margin-left:2px; }
.uf-end{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:10px; } .uf-end > div{ padding:8px 6px; text-align:center; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); } .uf-end small{ display:block; font-size:.58rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .uf-end b{ font-family:'Oswald',sans-serif; font-size:1.25rem; }
.uf-mtab td small{ display:block; color:var(--text-muted); font-size:.66rem; } .uf-mtab td em{ display:inline-block; margin-top:2px; font-style:normal; font-size:.6rem; font-weight:800; color:var(--accent); }
.uf-hcols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .uf-hcols ul{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.uf-hcols li{ display:grid; grid-template-columns:26px minmax(0, 1fr); grid-template-rows:auto auto; gap:0 8px; padding:6px 8px; border-radius:10px; background:var(--surface-2); font-size:.82rem; } .uf-hcols li b{ grid-row:1 / 3; align-self:center; text-align:center; font-family:'Oswald',sans-serif; color:var(--text-muted); } .uf-hcols li.w b{ color:var(--accent); } .uf-hcols li.l b{ color:#ff6b6b; } .uf-hcols li small{ color:var(--text-muted); font-size:.68rem; } .uf-hcols li span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* fighters table */
.uf-filters{ margin:10px 0; } .uf-table td.uf-nm{ display:flex; align-items:center; gap:10px; min-width:200px; } .uf-table td.uf-nm b{ display:block; } .uf-table td.uf-nm small{ display:block; color:var(--text-muted); font-size:.68rem; font-weight:500; } .uf-table tr[data-uf-fighter]{ cursor:pointer; } .uf-table tr[data-uf-fighter]:hover td{ background:color-mix(in srgb, var(--accent) 6%, transparent); } .uf-table td, .uf-table th{ white-space:nowrap; }
/* profile window */
.ufc-card-w{ max-width:880px !important; } .uf-prof{ padding-top:4px; }
.uf-ph-head{ display:flex; align-items:center; gap:16px; margin-bottom:12px; padding-right:44px; } .uf-ph-head h2{ margin:0; font-family:'Oswald',sans-serif; font-size:1.8rem; line-height:1.1; text-transform:uppercase; }
.uf-sub{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; color:var(--text-muted); font-size:.84rem; margin-top:4px; }
.uf-bio{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .uf-bio span{ padding:5px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .uf-bio b{ display:block; font-family:'Oswald',sans-serif; font-size:1rem; letter-spacing:0; color:var(--text); text-transform:none; }
.uf-mixrow{ margin:8px 0 2px; } .uf-mixrow > span{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.uf-mix{ display:flex; height:26px; border-radius:99px; overflow:hidden; margin-top:4px; background:var(--surface-2); } .uf-mix i{ display:flex; align-items:center; justify-content:center; font-style:normal; font-size:.66rem; font-weight:800; color:#04130a; white-space:nowrap; overflow:hidden; } .uf-mix i.h{ background:var(--accent); } .uf-mix i.b{ background:#7bdcff; } .uf-mix i.l{ background:var(--ufb); }
.uf-res{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:22px; border-radius:7px; font-weight:800; font-size:.76rem; background:var(--surface-2); } .uf-res.W{ background:color-mix(in srgb, var(--accent) 24%, transparent); color:var(--accent); } .uf-res.L{ background:rgba(255,107,107,.2); color:#ff6b6b; }
/* compare */
.uf-pick{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:12px; align-items:center; margin:12px 0; } .uf-vs{ font-family:'Oswald',sans-serif; color:var(--text-muted); letter-spacing:.1em; }
.uf-pickbox{ min-width:0; padding:10px 12px; border:1px solid var(--accent); border-radius:14px; background:var(--surface-2); } .uf-pickbox.b{ border-color:var(--ufb); }
.uf-picked{ display:flex; align-items:center; gap:12px; } .uf-picked > span:not(.uf-ph){ flex:1; min-width:0; } .uf-picked b{ display:block; } .uf-picked small{ color:var(--text-muted); font-size:.74rem; }
.uf-x{ width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:inherit; cursor:pointer; }
.uf-search{ position:relative; } .uf-search input{ width:100%; height:44px; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:1rem; font-weight:600; }
.uf-sug{ position:absolute; left:-12px; right:-12px; top:calc(100% + 10px); z-index:30; max-height:340px; overflow:auto; padding:6px; border:1px solid var(--border); border-radius:14px; background:var(--surface, #12161d); box-shadow:0 18px 50px -10px rgba(0,0,0,.75); }
.uf-sug button{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; min-height:50px; border:0; border-radius:10px; background:none; color:var(--text); font:inherit; text-align:left; cursor:pointer; } .uf-sug button:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); } .uf-sug b{ display:block; } .uf-sug small{ color:var(--text-muted); font-size:.74rem; }
.uf-cmp-top{ margin:10px auto 14px; text-align:center; max-width:720px; }
.uf-quick h4{ font-family:'Oswald',sans-serif; text-transform:uppercase; margin:14px 0 8px; } .uf-qlist{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px; } .uf-qlist button{ padding:10px 12px; text-align:left; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); color:var(--text); font:inherit; cursor:pointer; } .uf-qlist button:hover{ border-color:var(--accent); } .uf-qlist small{ display:block; color:var(--text-muted); font-size:.68rem; margin-top:2px; }
.uf-gloss{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:8px; } .uf-gloss > div{ padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); } .uf-gloss b{ display:block; margin-bottom:2px; } .uf-gloss span{ color:var(--text-muted); font-size:.82rem; line-height:1.4; }
/* phones */
@media (max-width:860px){ .uf-detail-in{ grid-template-columns:minmax(0, 1fr); } .uf-detail-in > .uf-sec:nth-child(3), .uf-detail-in > .uf-sec:nth-child(4){ grid-row:auto; } }
@media (max-width:700px){
  .uf-main{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .uf-mid{ grid-column:1 / -1; grid-row:2; } .uf-side{ flex-direction:column; align-items:center; text-align:center; gap:8px; } .uf-side.b{ flex-direction:column; text-align:center; }
  .uf-who, .uf-side.b .uf-who{ flex-direction:column; text-align:center; } .uf-who small, .uf-side.b .uf-who small{ justify-content:center; } .uf-odds, .uf-side.b .uf-odds{ margin:0; }
  .uf-ph{ width:64px; height:64px; } .uf-who b{ font-size:.96rem; }
  .uf-fight{ padding:12px 12px 8px; } .uf-meta .uf-main-b{ margin-left:0; } .uf-lean .uf-endq{ margin-left:0; flex-basis:100%; }
  .uf-ph-head{ flex-direction:column; align-items:flex-start; padding-right:0; } .uf-ph-head h2{ font-size:1.5rem; }
  .uf-pick{ grid-template-columns:minmax(0, 1fr); } .uf-vs{ text-align:center; }
  .uf-hcols{ grid-template-columns:minmax(0, 1fr); } .uf-end{ grid-template-columns:repeat(2, 1fr); } .uf-row{ grid-template-columns:50px minmax(0, 1fr) 50px; gap:8px; }
  .uf-ev-head{ padding:12px; } .uf-ev-head h3{ font-size:1.15rem; }
  #view-ufc-card .nhl-dates, .uf-events{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; } .uf-events::-webkit-scrollbar{ display:none; } .uf-events button{ flex:none; white-space:nowrap; }
  .ufc-panel, #view-ufc-card, #view-ufc-fighters, #view-ufc-compare{ min-width:0; max-width:100%; }
}
@media (max-width:700px){ .uf-table{ min-width:0 !important; width:100%; } .uf-table tr > *:nth-child(n){ display:none; } .uf-table tr > *:nth-child(1), .uf-table tr > *:nth-child(5), .uf-table tr > *:nth-child(8), .uf-table tr > *:nth-child(9), .uf-table tr > *:nth-child(12){ display:table-cell; } .uf-table td.uf-nm{ min-width:0; white-space:normal; } .uf-table td, .uf-table th{ padding:9px 5px; } .uf-table td.uf-nm small{ font-size:.62rem; } .uf-table .uf-ph.sm{ display:none; } }
/* ---------- live reports (injury / practice notes + news), see snippet-reports.js ---------- */
.spr-live:empty{ display:none; }
.spr-card{ border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:16px 16px 14px; margin:0 0 18px; min-width:0; }
.spr-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.spr-head h3{ margin:0 0 3px; font-family:'Oswald',sans-serif; font-size:1.15rem; letter-spacing:0.01em; }
.spr-head .hint{ margin:0; max-width:62ch; }
.spr-live-tag{ display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700; color:var(--good); border:1px solid color-mix(in srgb, var(--good) 40%, var(--border)); border-radius:999px; padding:4px 10px; white-space:nowrap; }
.spr-live-tag i{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation:sprPulse 2s infinite; }
.spr-live-tag small{ color:var(--text-muted); font-weight:500; font-size:0.7rem; }
@keyframes sprPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion:reduce){ .spr-live-tag i{ animation:none; } }
.spr-ctl{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:6px 0 12px; }
.spr-q{ min-width:200px; flex:0 1 260px; }
.spr-list{ display:grid; gap:8px; }
.spr-row{ display:grid; grid-template-columns:44px minmax(0, 1fr); gap:12px; align-items:start; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--bg); }
.spr-hs{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top; background:var(--surface-2); display:block; }
.spr-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.spr-top b{ font-size:0.95rem; }
.spr-meta{ display:inline-flex; align-items:center; gap:5px; font-size:0.74rem; color:var(--text-muted); }
.spr-meta img{ width:16px; height:16px; object-fit:contain; }
.spr-line{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:5px 0 3px; font-size:0.76rem; color:var(--text-muted); }
.spr-line em{ font-style:normal; }
.spr-line time{ margin-left:auto; white-space:nowrap; font-size:0.72rem; }
.spr-pill{ font-size:0.68rem; font-weight:800; letter-spacing:0.03em; padding:2px 9px; border-radius:999px; text-transform:uppercase; }
.spr-pill.out{ background:var(--danger-bg, rgba(166,54,47,0.18)); color:var(--danger); }
.spr-pill.dbt{ background:rgba(224,130,48,0.18); color:#e08230; }
.spr-pill.q{ background:rgba(224,176,48,0.18); color:#d9a520; }
.spr-pill.ok{ background:var(--good-bg, rgba(46,125,79,0.16)); color:var(--good); }
.spr-row p{ margin:4px 0 0; font-size:0.82rem; line-height:1.5; }
.spr-row details{ margin-top:4px; font-size:0.78rem; color:var(--text-muted); }
.spr-row details summary{ cursor:pointer; color:var(--accent); font-weight:600; width:max-content; }
.spr-row details p{ color:var(--text-muted); }
.spr-more{ margin:12px auto 0; display:block; }
.spr-news{ display:grid; grid-template-columns:120px minmax(0, 1fr); gap:14px; align-items:start; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--bg); color:var(--text); text-decoration:none; }
.spr-news:hover{ border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
.spr-news:not(:has(img)){ grid-template-columns:1fr; }
.spr-news img{ width:120px; height:80px; object-fit:cover; border-radius:10px; background:var(--surface-2); }
.spr-news b{ display:block; font-size:0.95rem; line-height:1.3; margin-bottom:3px; }
.spr-news p{ margin:0 0 5px; font-size:0.8rem; color:var(--text-muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.spr-news span{ font-size:0.72rem; color:var(--text-muted); }
.spr-news span i{ font-style:normal; font-weight:700; font-size:0.64rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--accent); margin-right:7px; }
.spr-retry{ background:none; border:0; color:var(--accent); font:inherit; font-weight:600; cursor:pointer; padding:0; text-decoration:underline; }
/* NBA: once the live ESPN list is showing, hide the build-time snapshot underneath it */
.spr-live:not(:empty) + #nba-nw-body{ display:none; }
@media (max-width:640px){
  .spr-card{ padding:12px 10px; border-radius:14px; }
  .spr-row{ grid-template-columns:38px minmax(0, 1fr); gap:10px; padding:9px 10px; }
  .spr-hs{ width:38px; height:38px; }
  .spr-news{ grid-template-columns:92px minmax(0, 1fr); gap:10px; }
  .spr-news img{ width:92px; height:68px; }
  .spr-q{ flex:1 1 100%; min-height:44px; font-size:16px; }
  .spr-line time{ margin-left:0; }
}
/* ---------- Start/Sit Studio (owner only): controls + a 1280x720 / 720x1280 broadcast stage that is exported to PNG / WebM ---------- */
body.consumer-mode #tab-ss-studio, body.consumer-mode #view-ss-studio{ display:none !important; }
.sst-page .panel-head{ flex-wrap:wrap; gap:8px; }
.sst-ctl{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:flex-end; margin:6px 0 12px; }
.sst-picks{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sst-pk{ position:relative; display:flex; flex-wrap:wrap; gap:4px; align-items:center; max-width:100%; }
.sst-call{ display:flex; width:100%; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.sst-call button{ flex:1; background:var(--surface-2, #141b25); color:var(--text-muted); border:0; padding:6px 8px; font-size:0.75rem; font-weight:800; letter-spacing:0.06em; cursor:pointer; }
.sst-call button + button{ border-left:1px solid var(--border); }
.sst-call button.on{ background:#2a3544; color:#fff; } .sst-call button.st.on{ background:var(--accent); color:#04130a; } .sst-call button.si.on{ background:#ff5d5d; color:#fff; }
.sst-pick{ width:260px; max-width:100%; background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:9px 12px; font-size:0.9rem; }
.sst-rm{ background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:999px; width:28px; height:28px; cursor:pointer; }
.sst-opts{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sst-opts label{ display:flex; gap:6px; align-items:center; font-size:0.85rem; color:var(--text-muted); }
.sst-opts select, .sst-bar2 select{ background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 8px; }
.sst-strip{ display:flex; gap:6px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:thin; }
.sst-strip button{ flex:none; display:flex; gap:6px; align-items:center; background:var(--surface-2, #141b25); color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:6px 12px; font-size:0.78rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.sst-strip button i{ font-style:normal; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,0.08); font-size:0.7rem; }
.sst-strip button.on{ color:#04130a; background:var(--accent); border-color:var(--accent); } .sst-strip button.on i{ background:rgba(0,0,0,0.18); }
.sst-host{ width:100%; display:flex; justify-content:center; background:#05070a; border:1px solid var(--border); border-radius:14px; padding:10px; box-sizing:border-box; overflow:hidden; }
.sst-outer{ position:relative; overflow:hidden; border-radius:12px; flex:none; }
.sst-fit{ position:absolute; left:0; top:0; }
.sst-bar2{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
.sst-bar2 .btn.on{ border-color:var(--accent); color:var(--accent); }
.sst-notes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sst-notes h4{ margin:0 0 8px; display:flex; gap:10px; align-items:center; justify-content:space-between; font-size:0.9rem; }
.sst-notes ul{ margin:0; padding-left:18px; display:grid; gap:7px; font-size:0.9rem; line-height:1.45; }
.sst-notes textarea{ width:100%; box-sizing:border-box; background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px; font:inherit; font-size:0.85rem; resize:vertical; }
@media (max-width:760px){ .sst-notes{ grid-template-columns:1fr; } .sst-pick{ width:100%; } .sst-pk{ width:100%; } }

/* present mode: the stage takes the whole screen */
body.sst-present-on{ overflow:hidden; }
#view-ss-studio.sst-presenting .sst-page{ position:fixed; inset:0; z-index:9998; margin:0; padding:0; border:0; border-radius:0; background:radial-gradient(1200px 700px at 50% 0%, #0d1520, #05070a); display:flex; flex-direction:column; align-items:center; overflow:hidden; }
#view-ss-studio.sst-presenting .panel-head, #view-ss-studio.sst-presenting .page-sub, #view-ss-studio.sst-presenting .hint, #view-ss-studio.sst-presenting .sst-ctl, #view-ss-studio.sst-presenting .sst-strip, #view-ss-studio.sst-presenting .sst-bar2, #view-ss-studio.sst-presenting .sst-notes{ display:none; }
#view-ss-studio.sst-presenting #sst-root{ width:100%; display:flex; justify-content:center; }
#view-ss-studio.sst-presenting .sst-host{ border:0; background:transparent; padding:52px 0 0; }
#sst-pbar{ position:fixed; top:0; left:0; right:0; z-index:9999; display:flex; gap:10px; align-items:center; justify-content:center; padding:8px 14px; background:rgba(8,12,18,0.94); border-bottom:1px solid #1e2630; color:#e8eef5; font-size:0.85rem; font-weight:700; }
#sst-pbar button{ background:#141b25; color:#e8eef5; border:1px solid #2a3544; border-radius:999px; padding:6px 14px; font-weight:700; cursor:pointer; } #sst-pbar button:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- the stage ---------- */
.sst-stage{ position:relative; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; color:#f2f6fb; font-family:Inter,sans-serif; background:#0a0e14; padding:20px 34px 14px;
  --text:#f2f6fb; --text-muted:#93a4b6; --border:#2a3646; --surface:#121a25; --good:#18e255; --danger:#ff5d5d; --warn:#ffc233; --accent:#18e255; }
.sst-stage *{ box-sizing:border-box; }
.sst-bg{ position:absolute; inset:0; z-index:0; background:
    linear-gradient(115deg, color-mix(in srgb, var(--ta) 48%, #0a0e14) 0%, rgba(10,14,20,0.15) 40%, rgba(10,14,20,0.15) 60%, color-mix(in srgb, var(--tb) 38%, #0a0e14) 100%),
    radial-gradient(900px 420px at 50% 112%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 64px); }
.sst-stage > *:not(.sst-bg){ position:relative; z-index:1; }
.sst-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex:none; }
.sst-brand{ font-family:'Oswald',sans-serif; font-size:26px; letter-spacing:0.05em; } .sst-brand span{ color:var(--accent); }
.sst-title{ font-family:'Oswald',sans-serif; font-size:19px; letter-spacing:0.18em; color:#c4d0dc; }
.sst-count{ font-family:'Oswald',sans-serif; font-size:22px; background:rgba(0,0,0,0.35); border:1px solid #2a3646; border-radius:999px; padding:1px 15px; } .sst-count small{ color:#8fa0b2; font-size:14px; }
.sst-body{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.sst-foot{ display:flex; justify-content:space-between; gap:10px; margin-top:8px; flex:none; font-size:12px; letter-spacing:0.08em; color:#7d8da0; text-transform:uppercase; } .sst-foot span:nth-child(2){ color:var(--accent); font-weight:700; }

.sst-face{ width:84px; height:84px; flex:none; border-radius:50%; overflow:hidden; background:#1a2330; border:3px solid var(--c, var(--accent)); box-shadow:0 0 0 4px rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.5); display:grid; place-items:center; font-family:'Oswald',sans-serif; font-size:30px; }
.sst-face img{ width:100%; height:100%; object-fit:cover; }
.sst-lg{ width:26px; height:26px; object-fit:contain; vertical-align:middle; }
.pill{ display:inline-block; }

/* intro */
.sst-intro{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.sst-kick{ font-family:'Oswald',sans-serif; letter-spacing:0.28em; color:var(--accent); font-size:22px; border:1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius:999px; padding:4px 22px; background:color-mix(in srgb, var(--accent) 8%, transparent); }
.sst-intro h1{ margin:0; font-family:'Oswald',sans-serif; font-size:132px; line-height:0.95; letter-spacing:0.02em; text-shadow:0 6px 30px rgba(0,0,0,0.5); } .sst-intro h1 span{ color:var(--accent); }
.sst-faces{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
.sst-faces em{ font-style:normal; font-family:'Oswald',sans-serif; font-size:30px; color:#8fa0b2; }
.sst-fb{ display:flex; flex-direction:column; align-items:center; gap:4px; } .sst-fb .sst-face{ width:128px; height:128px; font-size:44px; } .sst-fb b{ font-family:'Oswald',sans-serif; font-size:28px; letter-spacing:0.03em; } .sst-fb small{ color:#a7b6c6; font-size:15px; }
.sst-sub{ color:#b6c3d1; font-size:20px; letter-spacing:0.04em; }

/* columns (overview, form, bets) */
.sst-cols{ display:grid; grid-template-columns:repeat(var(--n), 1fr); gap:18px; align-items:stretch; }
.sst-col{ background:linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #0e1520), #0c121b); border:1px solid color-mix(in srgb, var(--c) 45%, #2a3646); border-radius:16px; padding:16px 14px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; min-width:0; }
.sst-card{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; position:relative; }
.sst-card .sst-face{ width:112px; height:112px; font-size:38px; }
.sst-card h2{ margin:0; font-family:'Oswald',sans-serif; font-size:30px; letter-spacing:0.02em; line-height:1.05; }
.sst-card.win .sst-face{ border-color:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 35%, transparent); }
.sst-crown{ font-family:'Oswald',sans-serif; letter-spacing:0.18em; font-size:16px; color:#04130a; background:var(--accent); border-radius:999px; padding:2px 16px; }
.sst-crown.sit{ background:#ff5d5d; color:#fff; }
.sst-also > div{ background:color-mix(in srgb, var(--accent) 8%, transparent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); } .sst-also em{ color:var(--accent); } .sst-also .sst-face{ border-color:var(--accent); }
.sst-meta{ display:flex; gap:8px; align-items:center; justify-content:center; font-size:18px; flex-wrap:wrap; } .sst-meta b{ font-family:'Oswald',sans-serif; letter-spacing:0.04em; }
.sst-kickoff{ color:#9fb0c1; font-size:14px; min-height:18px; }
.sst-ring{ --p:0; --rc:#18e255; width:150px; height:150px; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(closest-side, #0a0e14 76%, transparent 78% 100%), conic-gradient(var(--rc) calc(var(--p) * 1%), rgba(255,255,255,0.1) 0); }
.sst-ring b{ font-family:'Oswald',sans-serif; font-size:58px; line-height:1; color:var(--rc); }
.sst-ringwrap{ display:grid; justify-items:center; gap:5px; } .sst-ringwrap small{ font-size:11px; letter-spacing:0.18em; color:#9fb0c1; }
.sst-mini{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; width:100%; margin-top:4px; }
.sst-mini > div{ display:flex; flex-direction:column; align-items:center; gap:0; background:rgba(0,0,0,0.3); border:1px solid #243041; border-radius:10px; padding:5px 4px; }
.sst-mini small{ font-size:9.5px; letter-spacing:0.14em; color:#8fa0b2; } .sst-mini b{ font-family:'Oswald',sans-serif; font-size:24px; line-height:1.05; } .sst-mini i{ font-style:normal; font-size:10.5px; letter-spacing:0.1em; color:#8fa0b2; min-height:12px; }
.sst-mini .good{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:color-mix(in srgb, var(--accent) 10%, transparent); } .sst-mini .good b, .sst-mini .good i{ color:#46f07a; }
.sst-mini .bad{ border-color:rgba(255,93,93,0.55); background:rgba(255,93,93,0.1); } .sst-mini .bad b, .sst-mini .bad i{ color:#ff7a7a; }
.sst-chips{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.chip{ border:1px solid #2a3646; background:rgba(0,0,0,0.3); border-radius:999px; padding:3px 11px; font-size:13px; color:#c4d0dc; letter-spacing:0.04em; } .chip b{ color:#fff; }
.chip.good{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, transparent); } .chip.warn{ color:#ffc233; border-color:rgba(255,194,51,0.5); } .chip.bad{ color:#ff5d5d; border-color:rgba(255,93,93,0.5); }
.sst-prac{ display:flex; gap:7px; align-items:center; justify-content:center; font-size:13px; color:#9fb0c1; } .sst-prac span{ letter-spacing:0.14em; font-size:11px; }
.pr{ font-style:normal; font-size:11px; font-weight:800; letter-spacing:0.06em; padding:2px 7px; border-radius:6px; background:#2a3646; color:#c4d0dc; }
.pr.full{ background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent); } .pr.limited{ background:rgba(255,194,51,0.2); color:#ffc233; } .pr.dnp{ background:rgba(255,93,93,0.22); color:#ff5d5d; } .pr.none{ opacity:0.5; }

/* comparison table */
.sst-tbl{ display:flex; flex-direction:column; gap:6px; }
.sst-row{ display:grid; grid-template-columns:230px repeat(var(--n, 2), minmax(0, 1fr)); gap:8px; align-items:stretch; }
.sst-tbl .sst-row{ grid-template-columns:230px repeat(var(--n), minmax(0, 1fr)); }
.sst-lab{ display:flex; flex-direction:column; justify-content:center; font-family:'Oswald',sans-serif; font-size:19px; letter-spacing:0.04em; color:#d5deea; line-height:1.1; } .sst-lab small{ font-family:Inter,sans-serif; letter-spacing:0; font-size:11px; color:#7d8da0; margin-top:2px; text-transform:none; }
.sst-cell{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:46px; padding:5px 8px; border-radius:10px; background:rgba(18,26,37,0.85); border:1px solid #243041; }
.sst-cell b{ font-family:'Oswald',sans-serif; font-size:26px; line-height:1.05; letter-spacing:0.01em; } .sst-cell small{ font-size:11.5px; color:#8fa0b2; line-height:1.2; margin-top:1px; }
.sst-cell.best{ border-color:#ffc233; box-shadow:inset 0 0 0 1px rgba(255,194,51,0.5); background:linear-gradient(180deg, rgba(255,194,51,0.16), rgba(18,26,37,0.85)); } .sst-cell.best b{ color:#ffd166; }
.sst-cell.good{ background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(18,26,37,0.85)); border-color:color-mix(in srgb, var(--accent) 55%, transparent); } .sst-cell.good b{ color:#46f07a; }
.sst-cell.bad{ background:linear-gradient(180deg, rgba(255,93,93,0.24), rgba(18,26,37,0.85)); border-color:rgba(255,93,93,0.55); } .sst-cell.bad b{ color:#ff7a7a; }
.sst-cell.best.good, .sst-cell.best.bad{ border-color:#ffc233; box-shadow:inset 0 0 0 1px rgba(255,194,51,0.6); }
.sst-cell.best::after{ content:'▲ EDGE'; position:absolute; top:3px; right:7px; font:800 9px Inter,sans-serif; letter-spacing:0.12em; color:#ffc233; }
.sst-bar{ position:absolute; left:0; bottom:0; height:4px; background:linear-gradient(90deg, var(--accent), #7dffa6); border-radius:0 3px 0 0; }
.sst-hdr .sst-who{ background:transparent; border:0; gap:2px; padding:0 4px; } .sst-hdr .sst-who .sst-face{ width:62px; height:62px; font-size:22px; margin-bottom:2px; }
.sst-hdr .sst-who b{ font-size:22px; } .sst-hdr .sst-who small{ font-size:12.5px; color:#a7b6c6; }
.sst-range .rng{ position:relative; width:100%; height:10px; border-radius:6px; background:rgba(255,255,255,0.1); margin:4px 0; } .sst-range .rng i{ position:absolute; top:0; bottom:0; border-radius:6px; background:linear-gradient(90deg, #ff7a7a, #ffc233, var(--accent)); } .sst-range .rng u{ position:absolute; top:-4px; width:4px; height:18px; background:#fff; border-radius:2px; }
.sst-range b{ font-size:22px; }
.sst-legend{ display:flex; gap:18px; justify-content:center; font-size:12.5px; color:#9fb0c1; margin-bottom:6px; } .sst-legend i{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; background:var(--accent); } .sst-legend i.r{ background:#ff5d5d; } .sst-legend i.c{ background:transparent; border:2px solid #ffc233; }

/* form */
.sst-formh{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:4px; width:100%; } .sst-formh h2{ margin:0; font-family:'Oswald',sans-serif; font-size:26px; } .sst-formh small{ color:#8fa0b2; font-size:12.5px; }
.sst-formh .sst-face{ width:76px; height:76px; font-size:26px; }
.sst-g{ display:grid; grid-template-columns:70px 1fr 54px; gap:8px; align-items:center; width:100%; }
.sst-g .wk{ font-family:'Oswald',sans-serif; font-size:17px; text-align:left; display:flex; flex-direction:column; line-height:1.05; } .sst-g .wk small{ font-family:Inter,sans-serif; font-size:10.5px; color:#8fa0b2; }
.bars{ position:relative; height:24px; background:rgba(255,255,255,0.06); border-radius:7px; overflow:hidden; } .bars i{ position:absolute; left:0; top:0; bottom:0; border-radius:7px; }
.bars .pj{ background:rgba(255,255,255,0.18); } .bars .ac{ top:7px; bottom:7px; } .bars .ac.up{ background:var(--accent); } .bars .ac.dn{ background:#ff5d5d; }
.sst-g b{ font-family:'Oswald',sans-serif; font-size:23px; text-align:right; } .sst-g b.up, .sst-avg em.up{ color:var(--accent); } .sst-g b.dn, .sst-avg em.dn{ color:#ff7a7a; }
.sst-avg{ margin-top:auto; padding-top:8px; font-family:'Oswald',sans-serif; font-size:22px; letter-spacing:0.06em; color:#c4d0dc; } .sst-avg b{ color:#fff; font-size:30px; } .sst-avg em{ font-style:normal; font-size:15px; margin-left:8px; font-family:Inter,sans-serif; }
.sst-none{ color:#7d8da0; font-size:15px; margin:14px 0; }

/* bets */
.sst-prop{ display:grid; grid-template-columns:1fr auto; gap:0 10px; width:100%; align-items:baseline; text-align:left; background:rgba(0,0,0,0.3); border:1px solid #243041; border-radius:10px; padding:7px 12px; }
.sst-prop span{ font-size:14px; color:#c4d0dc; } .sst-prop b{ font-family:'Oswald',sans-serif; font-size:28px; } .sst-prop small{ grid-column:1 / 3; color:#8fa0b2; font-size:12px; }
.sst-prop.atd b{ color:#ffc233; }
.sst-td{ margin-top:auto; width:100%; background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:12px; padding:8px 12px; display:grid; } .sst-td span{ font-size:11px; letter-spacing:0.16em; color:var(--accent); } .sst-td b{ font-family:'Oswald',sans-serif; font-size:42px; line-height:1; } .sst-td small{ color:#9fb0c1; font-size:12.5px; }

/* verdict */
.sst-verdict{ display:flex; flex-direction:column; gap:14px; }
.sst-vcard{ display:flex; align-items:center; gap:22px; padding:18px 24px; border-radius:18px; background:linear-gradient(115deg, color-mix(in srgb, var(--c) 40%, #0e1520), #0c121b 70%); border:2px solid var(--accent); box-shadow:0 0 50px color-mix(in srgb, var(--accent) 20%, transparent); }
.sst-vcard .sst-face{ width:132px; height:132px; font-size:44px; border-color:var(--accent); }
.sst-vcard > div:nth-child(2){ flex:1; min-width:0; } .sst-vk{ font-family:'Oswald',sans-serif; letter-spacing:0.3em; font-size:26px; color:var(--accent); }
.sst-vcard h1{ margin:0; font-family:'Oswald',sans-serif; font-size:68px; line-height:1; letter-spacing:0.01em; }
.sst-vscore{ text-align:center; } .sst-vscore b{ display:block; font-family:'Oswald',sans-serif; font-size:84px; line-height:1; color:var(--accent); } .sst-vscore small{ letter-spacing:0.16em; font-size:13px; color:#9fb0c1; }
.sst-sit{ display:flex; gap:12px; flex-wrap:wrap; } .sst-sit > div{ display:flex; gap:12px; align-items:center; flex:1; min-width:0; background:rgba(255,93,93,0.08); border:1px solid rgba(255,93,93,0.4); border-radius:14px; padding:8px 14px; }
.sst-sit em{ font-style:normal; font-family:'Oswald',sans-serif; letter-spacing:0.2em; color:#ff7a7a; font-size:20px; } .sst-sit .sst-face{ width:50px; height:50px; font-size:18px; border-color:#ff5d5d; } .sst-sit b{ font-family:'Oswald',sans-serif; font-size:24px; } .sst-sit small{ color:#a7b6c6; margin-left:auto; font-size:14px; }
.sst-why{ background:rgba(18,26,37,0.85); border:1px solid #243041; border-radius:14px; padding:12px 18px; } .sst-why h3{ margin:0 0 6px; font-family:'Oswald',sans-serif; letter-spacing:0.22em; font-size:16px; color:#9fb0c1; }
.sst-why > div{ display:flex; gap:12px; align-items:center; font-size:19px; padding:5px 0; } .sst-why i{ font-style:normal; font-family:'Oswald',sans-serif; display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--accent); color:#04130a; font-size:18px; } .sst-why b{ color:var(--accent); }

.sst-fac{ background:rgba(18,26,37,0.85); border:1px solid #243041; border-radius:14px; padding:10px 18px 8px; } .sst-fac h3{ margin:0 0 6px; font-family:'Oswald',sans-serif; letter-spacing:0.22em; font-size:14px; color:#9fb0c1; }
.sst-fr{ display:flex; gap:10px; align-items:center; padding:2px 0; } .sst-fr > span{ width:170px; flex:none; font-size:14px; color:#c4d0dc; } .sst-fr small{ margin-left:6px; color:#7d8da0; font-size:11px; }
.sst-fb2{ flex:1; position:relative; height:20px; border-radius:6px; background:rgba(255,255,255,0.07); overflow:hidden; border-left:3px solid var(--c); } .sst-fb2 i{ position:absolute; left:0; top:0; bottom:0; opacity:0.9; background:#ffc233; } .sst-fb2 i.g{ background:var(--accent); } .sst-fb2 i.r{ background:#ff5d5d; }
.sst-fb2 b{ position:absolute; right:7px; top:0; line-height:20px; font-family:'Oswald',sans-serif; font-size:15px; text-shadow:0 1px 3px #000; }
.sst-fkey{ display:flex; gap:16px; justify-content:flex-end; font-size:12px; color:#9fb0c1; margin-top:4px; } .sst-fkey span{ border-left:3px solid var(--c); padding-left:6px; }
.tall .sst-fr > span{ width:120px; } .tall .sst-fac{ padding:12px 16px; } .tall .sst-fb2{ height:26px; } .tall .sst-fb2 b{ line-height:26px; }

/* verdict score breakdown: bars carry the player's name */
.sst-fb2 u{ position:absolute; left:8px; top:0; line-height:20px; text-decoration:none; font:800 11px Inter,sans-serif; letter-spacing:0.12em; color:rgba(255,255,255,0.92); text-shadow:0 1px 3px rgba(0,0,0,0.9); }
.sst-fb2 i.g{ background:linear-gradient(90deg, #12a843, var(--accent)); } .sst-fb2 i.w{ background:linear-gradient(90deg, #c98f12, #ffc233); } .sst-fb2 i.r{ background:linear-gradient(90deg, #b83434, #ff5d5d); }
/* panels use the whole height of the frame instead of floating in the middle */
.sst-body > .sst-cols{ flex:1; min-height:0; } .sst-col{ justify-content:center; }
.sst-g{ row-gap:0; } .sst-g .bars{ height:30px; } .sst-g .bars .ac{ top:9px; bottom:9px; } .sst-g .wk{ font-size:19px; } .sst-g b{ font-size:26px; }
.sst-nolines{ font-size:11px; letter-spacing:0.16em; color:#8fa0b2; margin:2px 0 2px; }
.sst-allgood{ width:100%; text-align:center; background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:12px; padding:16px 10px; font-family:'Oswald',sans-serif; letter-spacing:0.1em; font-size:20px; color:#46f07a; } .sst-allgood small{ display:block; font-family:Inter,sans-serif; letter-spacing:0; font-size:12.5px; color:#9fb0c1; margin-top:3px; }
.tall .sst-cols[style*="--n:2"] .sst-im{ padding:12px 14px; } .tall .sst-cols[style*="--n:2"] .sst-im b{ font-size:24px; } .tall .sst-cols[style*="--n:2"] .sst-im small{ font-size:13.5px; } .tall .sst-cols[style*="--n:2"] .sst-boost b{ font-size:58px; } .tall .sst-cols[style*="--n:2"] .sst-boost{ padding:14px 12px; } .tall .sst-cols[style*="--n:2"] .sst-allgood{ font-size:24px; padding:22px 10px; }
.tall .sst-cols[style*="--n:3"] .sst-im, .tall .sst-cols[style*="--n:4"] .sst-im{ padding:5px 10px; } .tall .sst-cols[style*="--n:3"] .sst-boost, .tall .sst-cols[style*="--n:4"] .sst-boost{ padding:4px 10px; margin-top:4px; } .tall .sst-cols[style*="--n:3"] .sst-boost b, .tall .sst-cols[style*="--n:4"] .sst-boost b{ font-size:30px; } .tall .sst-cols[style*="--n:3"] .sst-allgood, .tall .sst-cols[style*="--n:4"] .sst-allgood{ padding:8px; font-size:17px; } .tall .sst-cols[style*="--n:3"] .sst-boost small, .tall .sst-cols[style*="--n:4"] .sst-boost small{ display:none; }
.sst-ov[style*="--n:4"] .sst-mini{ display:none; } .sst-ov[style*="--n:4"] .sst-card .sst-face{ width:84px; height:84px; } .sst-ov[style*="--n:4"] .sst-ring{ width:118px; height:118px; } .sst-ov[style*="--n:4"] .sst-ring b{ font-size:44px; } .sst-ov[style*="--n:4"] .sst-card h2{ font-size:26px; }
.tall .sst-cols:not(.sst-ov)[style*="--n:3"] .sst-nolines, .tall .sst-cols:not(.sst-ov)[style*="--n:4"] .sst-nolines{ display:none; }
/* tighten the wide stage so the START/SIT tags never push a slide past the frame */
.sst-stage{ padding-top:16px; padding-bottom:10px; } .sst-top{ margin-bottom:6px; } .sst-foot{ margin-top:6px; }
.sst-hdr .sst-who .sst-face{ width:52px; height:52px; font-size:19px; } .sst-hdr .sst-who{ gap:1px; } .sst-tbl{ gap:5px; }
.sst-formh .sst-face{ width:62px; height:62px; } .sst-formh{ gap:2px; margin-bottom:2px; }
.sst-sit > div{ padding:6px 14px; } .sst-fac{ padding:8px 16px 6px; } .sst-why{ padding:10px 16px; } .sst-why > div{ padding:3px 0; font-size:18px; }
.sst-im{ padding:5px 10px; } .sst-prop{ padding:5px 12px; }
/* injuries & opportunity */
.sst-im{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; text-align:left; background:rgba(0,0,0,0.3); border:1px solid #243041; border-radius:10px; padding:6px 10px; }
.sst-im b{ display:block; font-family:'Oswald',sans-serif; font-size:19px; letter-spacing:0.02em; } .sst-im small{ color:#8fa0b2; font-size:12px; }
.sst-im .chip{ flex:none; font-weight:800; font-size:12px; }
.sst-boost{ margin-top:8px; width:100%; border:1px solid #2a3646; background:rgba(0,0,0,0.28); border-radius:12px; padding:8px 12px; display:grid; text-align:center; }
.sst-boost span{ font-size:11px; letter-spacing:0.16em; color:#9fb0c1; } .sst-boost b{ font-family:'Oswald',sans-serif; font-size:40px; line-height:1.05; color:#c4d0dc; } .sst-boost b i{ font-style:normal; font-size:16px; color:#9fb0c1; } .sst-boost small{ color:#8fa0b2; font-size:12px; }
.sst-boost.good{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); } .sst-boost.good b, .sst-boost.good span{ color:var(--accent); }
.sst-boost.warn{ border-color:rgba(255,194,51,0.55); background:rgba(255,194,51,0.1); } .sst-boost.warn b, .sst-boost.warn span{ color:#ffc233; }
.sst-boost.bad{ border-color:rgba(255,93,93,0.6); background:rgba(255,93,93,0.12); } .sst-boost.bad b, .sst-boost.bad span{ color:#ff6b6b; }

/* START (green) / SIT (red) tag on every slide */
.sst-tag{ font-style:normal; font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.14em; font-size:15px; line-height:1; padding:4px 13px; border-radius:999px; margin-top:4px; display:inline-block; }
.sst-tag.st{ background:var(--accent); color:#04130a; box-shadow:0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.sst-tag.si{ background:#ff4d4d; color:#fff; box-shadow:0 0 18px rgba(255,77,77,0.4); }
.sst-col:has(.sst-tag.st), .sst-card.win{ border-color:var(--accent); } .sst-col:has(.sst-tag.si){ border-color:rgba(255,77,77,0.7); }
.sst-hdr .sst-who:has(.sst-tag.st) .sst-face{ border-color:var(--accent); } .sst-hdr .sst-who:has(.sst-tag.si) .sst-face{ border-color:#ff4d4d; }
.sst-bye{ color:#ffc233; font-family:'Oswald',sans-serif; letter-spacing:0.08em; }
.sst-vk{ color:var(--accent); text-shadow:0 0 24px color-mix(in srgb, var(--accent) 50%, transparent); }
.sst-sit em{ background:#ff4d4d; color:#fff; padding:3px 12px; border-radius:999px; font-size:18px; }
.sst-also em{ background:var(--accent); color:#04130a; }

/* ---------- tall (9:16) layout: players become full-width rows, tables stretch to use the whole height ---------- */
.tall .sst-body{ justify-content:stretch; }
.tall .sst-tbl{ flex:1; gap:8px; justify-content:space-evenly; }
.tall .sst-tbl .sst-row:not(.sst-hdr){ flex:1; max-height:104px; }
.tall .sst-hdr{ flex:none; } .tall .sst-hdr .sst-who{ gap:3px; } .tall .sst-hdr .sst-who small{ font-size:12px; }
.tall .sst-cell b{ font-size:30px; } .tall .sst-cell small{ font-size:12.5px; } .tall .sst-lab{ font-size:18px; } .tall .sst-lab small{ font-size:11.5px; }
.tall .sst-tag{ font-size:14px; padding:4px 10px; }
/* overview: one big row per player */
.tall .sst-ov{ grid-template-columns:1fr; flex:1; gap:14px; }
.tall .sst-ov .sst-col{ padding:14px 18px; }
.tall .sst-ov .sst-card{ display:grid; grid-template-columns:128px 1fr 150px; grid-template-rows:repeat(5, auto); column-gap:18px; row-gap:6px; align-content:center; justify-items:start; text-align:left; height:100%; }
.tall .sst-ov .sst-card .sst-face{ grid-column:1; grid-row:1 / span 5; width:128px; height:128px; align-self:center; }
.tall .sst-ov .sst-card h2{ grid-column:2; grid-row:1; font-size:34px; }
.tall .sst-ov .sst-meta{ grid-column:2; grid-row:2; justify-content:flex-start; } .tall .sst-ov .sst-kickoff{ grid-column:2; grid-row:3; min-height:0; }
.tall .sst-ov .sst-chips{ grid-column:2; grid-row:4; justify-content:flex-start; } .tall .sst-ov .sst-prac{ grid-column:2; grid-row:5; justify-content:flex-start; }
.tall .sst-ov .sst-ringwrap{ grid-column:3; grid-row:1 / span 4; align-self:center; justify-self:center; } .tall .sst-ov .sst-ring{ width:140px; height:140px; }
.tall .sst-ov .sst-mini{ grid-column:1 / -1; grid-row:6; margin-top:10px; } .tall .sst-ov .sst-card{ grid-template-rows:repeat(5, auto) auto; } .tall .sst-ov .sst-card .sst-face{ grid-row:1 / span 5; }
.tall .sst-ov[style*="--n:4"] .sst-mini{ display:none; }
.tall .sst-ov[style*="--n:2"] .sst-mini{ margin-top:22px; gap:12px; } .tall .sst-ov[style*="--n:2"] .sst-mini > div{ padding:14px 6px; border-radius:14px; } .tall .sst-ov[style*="--n:2"] .sst-mini b{ font-size:38px; } .tall .sst-ov[style*="--n:2"] .sst-mini small{ font-size:11.5px; } .tall .sst-ov[style*="--n:2"] .sst-mini i{ font-size:12.5px; }
.tall .sst-ov[style*="--n:2"] .sst-chips{ margin:6px 0; } .tall .sst-ov[style*="--n:2"] .chip{ font-size:15px; padding:5px 14px; } .tall .sst-ov[style*="--n:2"] .sst-kickoff{ font-size:16px; } .tall .sst-ov[style*="--n:2"] .sst-meta{ font-size:22px; }
.tall .sst-ov .sst-crown{ grid-column:3; grid-row:5; justify-self:center; font-size:22px; padding:4px 22px; }
.tall .sst-ov[style*="--n:2"] .sst-card{ grid-template-columns:170px 1fr 190px; } .tall .sst-ov[style*="--n:2"] .sst-card .sst-face{ width:170px; height:170px; font-size:56px; }
.tall .sst-ov[style*="--n:2"] .sst-card h2{ font-size:42px; } .tall .sst-ov[style*="--n:2"] .sst-ring{ width:180px; height:180px; } .tall .sst-ov[style*="--n:2"] .sst-ring b{ font-size:66px; }
/* form + bets: 2 players side by side, 3-4 stacked as full-width panels */
.tall .sst-cols:not(.sst-ov){ flex:1; }
.tall .sst-cols:not(.sst-ov)[style*="--n:3"], .tall .sst-cols:not(.sst-ov)[style*="--n:4"]{ grid-template-columns:1fr; gap:12px; }
.tall .sst-cols:not(.sst-ov)[style*="--n:3"] .sst-col, .tall .sst-cols:not(.sst-ov)[style*="--n:4"] .sst-col{ display:grid; grid-template-columns:170px 1fr; align-items:center; text-align:left; column-gap:14px; row-gap:6px; padding:10px 16px; }
.tall .sst-cols:not(.sst-ov)[style*="--n:3"] .sst-col > :not(.sst-formh), .tall .sst-cols:not(.sst-ov)[style*="--n:4"] .sst-col > :not(.sst-formh){ grid-column:2; }
.tall .sst-cols:not(.sst-ov)[style*="--n:3"] .sst-formh, .tall .sst-cols:not(.sst-ov)[style*="--n:4"] .sst-formh{ grid-column:1; grid-row:1 / span 8; }
.tall .sst-cols:not(.sst-ov) .sst-formh h2{ font-size:24px; text-align:center; } .tall .sst-col .sst-prop{ padding:5px 12px; } .tall .sst-col .sst-prop b{ font-size:24px; } .tall .sst-col .sst-td b{ font-size:34px; }
.tall .sst-g{ grid-template-columns:70px 1fr 54px; } .tall .sst-avg{ margin-top:4px; padding-top:2px; font-size:19px; } .tall .sst-avg b{ font-size:26px; }
/* verdict */
.tall .sst-verdict{ flex:1; justify-content:flex-start; gap:14px; }
.tall .sst-vcard{ flex-direction:column; padding:16px 22px; gap:6px; flex:1.4; justify-content:center; align-items:center; text-align:center; }
.tall .sst-vcard > div:nth-child(2){ flex:none; } .tall .sst-vcard .sst-meta{ justify-content:center; } .tall .sst-vk{ text-align:center; }
.tall .sst-why{ flex:1; display:flex; flex-direction:column; justify-content:space-evenly; padding:16px 22px; } .tall .sst-fac{ flex:none; }
.tall .sst-cols.sst-stackrows{ grid-template-columns:1fr !important; gap:22px; flex:none !important; margin:auto 0; }
.tall .sst-cols.sst-stackrows .sst-col{ display:grid; grid-template-columns:190px 1fr; align-items:center; text-align:left; column-gap:20px; row-gap:10px; padding:24px 20px; justify-content:stretch; }
.tall .sst-stackrows .sst-col > :not(.sst-formh){ grid-column:2; } .tall .sst-stackrows .sst-formh{ grid-column:1; grid-row:1 / span 8; } .tall .sst-stackrows .sst-formh .sst-face{ width:96px; height:96px; }
.tall .sst-why h3{ font-size:19px; } .tall .sst-why > div{ font-size:24px; padding:6px 0; gap:16px; } .tall .sst-why i{ width:40px; height:40px; font-size:24px; }
.tall .sst-vcard{ flex:1.15; }
.tall .sst-verdict:has(.sst-sit > div:nth-child(3)) .sst-why{ padding:8px 18px; } .tall .sst-verdict:has(.sst-sit > div:nth-child(3)) .sst-why > div{ font-size:19px; padding:1px 0; } .tall .sst-verdict:has(.sst-sit > div:nth-child(3)) .sst-why i{ width:28px; height:28px; font-size:16px; } .tall .sst-verdict:has(.sst-sit > div:nth-child(3)) .sst-vcard{ flex:.7; } .tall .sst-verdict:has(.sst-sit > div:nth-child(3)) .sst-sit > div{ padding:5px 14px; } .tall .sst-verdict:has(.sst-sit > div:nth-child(3)) .sst-vcard .sst-face{ width:84px; height:84px; } .tall .sst-verdict:has(.sst-sit > div:nth-child(3)) .sst-vcard h1{ font-size:50px; }
.tall .sst-cols[style*="--n:2"] .sst-col{ justify-content:space-evenly; padding:22px 16px; } .tall .sst-vcard h1{ font-size:64px; } .tall .sst-vk{ font-size:34px; }
.tall .sst-sit > div{ padding:12px 18px; } .tall .sst-sit b{ font-size:30px; } .tall .sst-sit .sst-face{ width:64px; height:64px; } .tall .sst-sit em{ font-size:22px; }/* intro */
.tall .sst-intro{ flex:1; justify-content:center; gap:28px; } .tall .sst-intro h1{ font-size:170px; }

/* tall (9:16, 720x1280) base: kept AFTER the specific rules above only for things they do not set */
.sst-stage.tall{ padding:26px 28px 18px; }
.tall .sst-top{ margin-bottom:14px; } .tall .sst-title{ font-size:17px; } .tall .sst-brand{ font-size:24px; }
.tall .sst-faces{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 18px; } .tall .sst-faces em{ display:none; } .tall .sst-fb .sst-face{ width:104px; height:104px; } .tall .sst-fb b{ font-size:24px; }
.tall .sst-vscore b{ font-size:70px; } .tall .sst-vcard .sst-face{ width:120px; height:120px; }
.tall .sst-row, .tall .sst-tbl .sst-row{ grid-template-columns:150px repeat(var(--n), minmax(0, 1fr)); gap:6px; }
.tall .sst-hdr .sst-who .sst-face{ width:56px; height:56px; } .tall .sst-hdr .sst-who b{ font-size:18px; }
.tall .sst-sit{ flex-direction:column; } .tall .sst-sit > div{ flex:none; }
.tall .sst-legend{ flex-wrap:wrap; gap:8px 14px; }
.tall .sst-fr > span{ width:120px; } .tall .sst-fac{ padding:12px 16px; } .tall .sst-fb2{ height:26px; } .tall .sst-fb2 b{ line-height:26px; }
@media (prefers-reduced-motion:no-preference){ .sst-strip button{ transition:background .12s ease, color .12s ease; } }

/* wide stage: tighter prop rows so 4 lines + the TD rating fit under the taller logo bar */
.sst-stage:not(.tall) .sst-prop{ padding:3px 12px; } .sst-stage:not(.tall) .sst-prop b{ font-size:24px; } .sst-stage:not(.tall) .sst-prop small{ font-size:11px; } .sst-stage:not(.tall) .sst-td b{ font-size:34px; } .sst-stage:not(.tall) .sst-td{ padding:5px 12px; }

.sst-share{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; } .sst-tpl{ margin-top:6px; } .sst-tpl summary{ cursor:pointer; color:var(--text-muted); font-size:0.85rem; } .sst-tpl textarea{ width:100%; box-sizing:border-box; background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px; font:inherit; font-size:0.85rem; margin:6px 0; } .sst-tpl small{ color:var(--text-muted); }
/* ---------- Waiver Wire Graphic (owner only): controls + a 1280x720 / 720x1280 stage exported to PNG / JPEG ---------- */
body.consumer-mode #tab-ww-studio, body.consumer-mode #view-ww-studio{ display:none !important; }
.ww-page .panel-head{ flex-wrap:wrap; gap:8px; }
.ww-ctl{ display:grid; gap:12px; margin:6px 0 12px; }
.ww-picks{ display:grid; gap:6px; }
.ww-pk{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ww-n{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#04130a; font-weight:800; font-size:0.78rem; flex:none; } .ww-pk.add .ww-n{ background:var(--surface-2, #141b25); color:var(--text-muted); border:1px dashed var(--border); }
.ww-pick, .ww-note, #ww-title{ background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 11px; font-size:0.88rem; }
#ww-root .ww-pick{ width:280px; max-width:100%; flex:0 0 auto; } #ww-root .ww-note{ flex:1 1 220px; width:auto; min-width:160px; } #ww-root #ww-title{ width:170px; } #ww-root .ww-bar2 select, #ww-root .ww-opts select{ width:auto; } #ww-root .ww-ib{ padding:0; flex:none; }
.ww-ib{ background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:8px; width:30px; height:30px; cursor:pointer; } .ww-ib:disabled{ opacity:0.3; cursor:default; } .ww-ib:hover:not(:disabled){ color:var(--text); border-color:var(--text-muted); }
.ww-quick{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px; }
.ww-opts{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .ww-opts label{ display:flex; gap:6px; align-items:center; font-size:0.85rem; color:var(--text-muted); }
.ww-opts select, .ww-bar2 select{ background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 8px; }
.ww-format h4{ margin:0 0 8px; font-size:0.85rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-muted); }
.ww-fcards{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
#ww-root .ww-fc{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; text-align:left; min-width:250px; padding:10px 16px 10px 12px; border-radius:14px; border:2px solid var(--border); background:var(--surface-2, #141b25); color:var(--text); cursor:pointer; }
#ww-root .ww-fc b{ font-size:0.98rem; } #ww-root .ww-fc small{ grid-column:2; color:var(--text-muted); font-size:0.76rem; } #ww-root .ww-fc .ww-ic{ grid-row:1 / span 2; display:block; border:2px solid currentColor; border-radius:4px; opacity:0.8; } .ww-ic.wide{ width:38px; height:22px; } .ww-ic.tall{ width:22px; height:38px; }
#ww-root .ww-fc.on{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } #ww-root .ww-fc.on .ww-ic{ color:var(--accent); opacity:1; }
.ww-ft{ display:flex; flex-direction:column; justify-content:center; gap:4px; padding:0 4px; } .ww-ft small{ color:var(--text-muted); font-size:0.76rem; } .ww-ft i{ font-style:normal; opacity:0.65; font-size:0.72em; margin-left:4px; }
.ww-host{ width:100%; display:flex; justify-content:center; background:#05070a; border:1px solid var(--border); border-radius:14px; padding:10px; box-sizing:border-box; overflow:hidden; }
.ww-outer{ position:relative; overflow:hidden; border-radius:12px; flex:none; } .ww-fit{ position:absolute; left:0; top:0; }
.ww-bar2{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
.ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .ww-caps h4{ margin:0 0 8px; display:flex; gap:10px; align-items:center; justify-content:space-between; font-size:0.9rem; }
.ww-caps textarea{ width:100%; box-sizing:border-box; background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px; font:inherit; font-size:0.85rem; resize:vertical; } .ww-caps small{ color:var(--text-muted); }
@media (max-width:760px){ .ww-caps{ grid-template-columns:1fr; } #ww-root .ww-pick{ flex:1 1 200px; width:auto; } }

/* ---------- the stage ---------- */
.ww-stage{ position:relative; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; color:#f2f6fb; font-family:Inter,sans-serif; background:#0a0e14; padding:18px 30px 12px;
  --text:#f2f6fb; --text-muted:#93a4b6; --border:#2a3646; --good:#18e255; --danger:#ff5d5d; --warn:#ffc233; --accent:#18e255; }
.ww-stage *{ box-sizing:border-box; }
.ww-bg{ position:absolute; inset:0; z-index:0; background:radial-gradient(900px 380px at 12% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), radial-gradient(800px 420px at 100% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 64px); }
.ww-stage > *:not(.ww-bg){ position:relative; z-index:1; }
.ww-top{ display:flex; align-items:center; gap:18px; margin-bottom:10px; flex:none; }
.ww-brand img{ height:46px; width:auto; display:block; }
.ww-title{ flex:1; min-width:0; } .ww-title h1{ margin:0; font-family:'Oswald',sans-serif; font-size:38px; line-height:1; letter-spacing:0.06em; color:#fff; } .ww-title span{ display:block; margin-top:4px; font-size:12px; letter-spacing:0.16em; color:#9fb0c2; }
.ww-badge{ font-family:'Oswald',sans-serif; font-size:26px; line-height:1; text-align:center; color:#04130a; background:var(--accent); border-radius:12px; padding:6px 16px; } .ww-badge small{ display:block; font-size:11px; letter-spacing:0.18em; margin-top:2px; }
.ww-list{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
.ww-foot{ display:flex; justify-content:center; margin-top:6px; flex:none; font-family:'Oswald',sans-serif; font-size:26px; line-height:1; letter-spacing:0.12em; color:var(--accent); text-transform:uppercase; text-shadow:0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); }

.ww-row{ flex:1; min-height:0; display:grid; gap:10px; align-items:stretch; padding:8px 12px; border-radius:12px; border:1px solid var(--border); border-left:4px solid var(--c, var(--accent)); background:linear-gradient(90deg, color-mix(in srgb, var(--c, var(--accent)) 16%, #0f1620), #0f1620 42%); }
.ww-stage.wide .ww-row{ grid-template-columns:292px 212px 226px 204px minmax(0, 1fr); } .ww-stage.wide .ww-who h2{ font-size:17px; } .ww-stage.wide .ww-id{ gap:7px; } .ww-stage.wide .ww-rank{ font-size:26px; width:18px; } .ww-mate .chip{ font-size:7.5px !important; padding:2px 5px !important; }
.ww-sec h3 .chip{ margin-left:auto; font-size:8.5px; padding:1px 7px; letter-spacing:0.05em; font-family:Inter,sans-serif; }
.ww-foot span{ white-space:nowrap; }
.ww-sec{ min-width:0; display:flex; flex-direction:column; gap:5px; overflow:hidden; } .ww-sec h3{ margin:0; font-family:'Oswald',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.14em; color:var(--accent); display:flex; align-items:baseline; gap:6px; white-space:nowrap; } .ww-sec h3 small{ font-family:Inter,sans-serif; font-size:10px; letter-spacing:0.04em; color:#8fa0b2; font-weight:600; }
.ww-sec + .ww-sec{ border-left:1px solid #1e2937; padding-left:10px; }

/* identity */
.ww-id{ display:grid; grid-template-columns:auto auto minmax(0, 1fr) auto; align-items:center; gap:9px; min-width:0; }
.ww-rank{ font-family:'Oswald',sans-serif; font-size:30px; color:var(--accent); width:22px; text-align:center; }
.ww-face{ width:62px; height:62px; flex:none; border-radius:50%; overflow:hidden; background:#1a2330; border:3px solid var(--c, var(--accent)); box-shadow:0 6px 16px rgba(0,0,0,0.5); display:grid; place-items:center; font-family:'Oswald',sans-serif; font-size:22px; } .ww-face img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.ww-who{ min-width:0; } .ww-who h2{ margin:0; font-family:'Oswald',sans-serif; font-size:19px; line-height:1.1; letter-spacing:0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ww-meta{ display:flex; align-items:center; gap:5px; margin-top:3px; font-size:11px; color:#c4d0dc; white-space:nowrap; } .ww-meta b{ font-weight:700; } .ww-meta .bye{ color:#ff5d5d; font-weight:800; }
.ww-lg{ width:18px; height:18px; object-fit:contain; } .ww-meta .pill{ font-size:10px; font-weight:800; padding:1px 6px; border-radius:6px; color:#fff; }
.ww-sub{ margin-top:2px; font-size:10px; color:#8fa0b2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ww-sub em{ font-style:normal; color:var(--accent); font-weight:700; }
.ww-proj{ text-align:center; display:grid; gap:1px; } .ww-proj b{ font-family:'Oswald',sans-serif; font-size:30px; line-height:1; } .ww-proj small{ font-size:8.5px; letter-spacing:0.1em; color:#8fa0b2; } .ww-proj .chip{ margin-top:3px; }
.chip{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:9.5px; font-weight:800; letter-spacing:0.06em; background:#202b39; color:#c4d0dc; white-space:nowrap; }
.ww-stage .chip.good{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); } .ww-stage .chip.warn{ background:rgba(255,194,51,0.2); color:#ffc233; } .ww-stage .chip.bad{ background:rgba(255,93,93,0.2); color:#ff7a7a; }

/* tiles */
.ww-tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; } .ww-tiles > div{ background:rgba(255,255,255,0.05); border-radius:8px; padding:4px 3px 3px; text-align:center; min-width:0; }
.ww-tiles b{ display:block; font-family:'Oswald',sans-serif; font-size:17px; line-height:1.1; white-space:nowrap; } .ww-tiles small{ display:block; margin-top:1px; font-size:7.5px; letter-spacing:0.05em; color:#8fa0b2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ww-tiles i{ display:block; font-style:normal; font-size:7.5px; color:#6f8195; white-space:nowrap; }
.ww-tiles .good{ background:color-mix(in srgb, var(--accent) 16%, transparent); } .ww-tiles .good b{ color:var(--accent); } .ww-tiles .bad{ background:rgba(255,93,93,0.16); } .ww-tiles .bad b{ color:#ff7a7a; }
.ww-pts{ display:flex; align-items:baseline; gap:6px; font-size:11px; color:#c4d0dc; } .ww-pts b{ font-family:'Oswald',sans-serif; font-size:20px; color:#fff; } .ww-pts em{ margin-left:auto; font-style:normal; font-weight:800; color:#04130a; background:var(--accent); border-radius:6px; padding:0 6px; font-size:10px; }
.up{ color:var(--accent); } .dn{ color:#ff7a7a; } .ww-pts span{ font-weight:700; font-size:10.5px; }
.ww-bars{ display:flex; gap:6px; align-items:flex-end; height:44px; } .ww-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:1px; height:100%; } .ww-bar b{ font-size:9.5px; font-weight:700; } .ww-bar b.up{ color:var(--accent); } .ww-bar b.dn{ color:#ff7a7a; } .ww-bar i{ display:block; width:100%; border-radius:3px 3px 0 0; min-height:4px; } .ww-bar i.up{ background:var(--accent); } .ww-bar i.dn{ background:#ff5d5d; } .ww-bar em{ font-style:normal; font-size:8px; color:#8fa0b2; }
.ww-l3{ font-size:10px; letter-spacing:0.05em; color:#9fb0c2; } .ww-l3 b{ font-family:'Oswald',sans-serif; font-size:14px; color:#fff; } .ww-l3 b.up{ color:var(--accent); } .ww-l3 b.dn{ color:#ff7a7a; }
.ww-none{ font-size:11px; color:#7d8da0; padding:6px 0; }

/* injuries */
.ww-st{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.ww-prac{ font-size:8.5px; letter-spacing:0.08em; color:#8fa0b2; display:flex; gap:5px; align-items:center; } .ww-prac span{ display:inline-flex; gap:3px; align-items:center; font-size:10px; color:#c4d0dc; letter-spacing:0; }
.ww-prac i{ font-style:normal; font-weight:800; font-size:8.5px; padding:1px 4px; border-radius:4px; background:#202b39; } .ww-prac i.full{ background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent); } .ww-prac i.lp, .ww-prac i.limited{ background:rgba(255,194,51,0.22); color:#ffc233; } .ww-prac i.dnp{ background:rgba(255,93,93,0.22); color:#ff7a7a; }
.ww-mates{ display:grid; gap:4px; } .ww-mate{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:1px 6px; align-items:center; } .ww-mate b{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ww-mate small{ grid-column:2; font-size:9px; color:#8fa0b2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ww-mate .chip{ grid-row:1 / span 2; font-size:8px; padding:2px 6px; }
.ww-clear{ font-size:10.5px; color:var(--accent); }

/* notables */
.ww-not ul{ margin:0; padding:0; list-style:none; display:grid; gap:4px; align-content:start; } .ww-not li{ position:relative; padding-left:12px; font-size:11px; line-height:1.28; color:#dbe4ee; }
.ww-not li::before{ content:''; position:absolute; left:0; top:0.42em; width:6px; height:6px; border-radius:50%; background:#8fa0b2; } .ww-not li.good::before{ background:var(--accent); } .ww-not li.bad::before{ background:#ff5d5d; } .ww-not li.warn::before{ background:#ffc233; }
.ww-not li.mine{ color:#fff; font-weight:700; } .ww-not li.mine::before{ background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* landscape density */
.ww-stage.wide[data-n="5"] .ww-row{ padding:6px 10px; } .ww-stage.wide[data-n="5"] .ww-face{ width:52px; height:52px; } .ww-stage.wide[data-n="5"] .ww-bars, .ww-stage.wide[data-n="4"] .ww-bars{ display:none; }
.ww-stage.wide[data-n="5"] .ww-tiles b{ font-size:15px; } .ww-stage.wide[data-n="5"] .ww-who h2{ font-size:17px; } .ww-stage.wide[data-n="5"] .ww-not li{ font-size:10.5px; } .ww-stage.wide[data-n="5"] .ww-l3{ display:none; }
.ww-stage.wide[data-n="2"] .ww-row, .ww-stage.wide[data-n="3"] .ww-row{ padding:10px 14px; } .ww-stage.wide[data-n="2"] .ww-tiles b, .ww-stage.wide[data-n="3"] .ww-tiles b{ font-size:22px; } .ww-stage.wide[data-n="2"] .ww-not li, .ww-stage.wide[data-n="3"] .ww-not li{ font-size:13px; } .ww-stage.wide[data-n="2"] .ww-face, .ww-stage.wide[data-n="3"] .ww-face{ width:76px; height:76px; } .ww-stage.wide[data-n="2"] .ww-who h2, .ww-stage.wide[data-n="3"] .ww-who h2{ font-size:22px; }

/* two or three players: names may wrap instead of being cut off, and the vertical cards scale up to use the room */
.ww-stage[data-n="2"] .ww-who h2, .ww-stage[data-n="3"] .ww-who h2{ white-space:normal; overflow:visible; line-height:1.05; }
.ww-stage.wide[data-n="2"] .ww-who h2, .ww-stage.wide[data-n="3"] .ww-who h2{ font-size:21px; } .ww-stage.wide[data-n="2"] .ww-face, .ww-stage.wide[data-n="3"] .ww-face{ width:68px; height:68px; } .ww-stage.wide[data-n="2"] .ww-bars, .ww-stage.wide[data-n="3"] .ww-bars{ height:56px; }
.ww-stage.tall[data-n="3"] .ww-tiles b{ font-size:22px; } .ww-stage.tall[data-n="3"] .ww-not li{ font-size:14.5px; } .ww-stage.tall[data-n="3"] .ww-mate b{ font-size:13px; } .ww-stage.tall[data-n="3"] .ww-bars{ height:52px; } .ww-stage.tall[data-n="3"] .ww-sec h3{ font-size:13px; }
.ww-stage.tall[data-n="2"] .ww-tiles b{ font-size:28px; } .ww-stage.tall[data-n="2"] .ww-tiles > div{ padding:8px 3px 6px; } .ww-stage.tall[data-n="2"] .ww-not li{ font-size:18px; line-height:1.3; } .ww-stage.tall[data-n="2"] .ww-mate b{ font-size:16px; } .ww-stage.tall[data-n="2"] .ww-mate small{ font-size:12px; } .ww-stage.tall[data-n="2"] .ww-bars{ height:96px; } .ww-stage.tall[data-n="2"] .ww-pts b{ font-size:30px; } .ww-stage.tall[data-n="2"] .ww-sec h3{ font-size:15px; } .ww-stage.tall[data-n="2"] .ww-sec{ gap:8px; } .ww-stage.tall[data-n="2"] .ww-l3{ font-size:12px; } .ww-stage.tall[data-n="2"] .ww-l3 b{ font-size:16px; } .ww-stage.tall[data-n="2"] .ww-proj b{ font-size:44px; }/* one player: a spotlight card. Identity across the top, the four sections in a row (wide) or a 2x2 grid (tall), everything scaled up so it reads from a phone */
.ww-stage[data-n="1"] .ww-list{ justify-content:center; } .ww-stage[data-n="1"] .ww-who h2{ white-space:normal; overflow:visible; line-height:1.05; }
.ww-stage.wide[data-n="1"] .ww-row{ flex:0 0 auto; min-height:470px; padding:18px 22px; gap:14px 22px; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:auto 1fr; }
.ww-stage.wide[data-n="1"] .ww-id{ grid-column:1 / -1; grid-template-columns:auto auto minmax(0, 1fr) auto; gap:16px; } .ww-stage.wide[data-n="1"] .ww-sec + .ww-sec{ padding-left:18px; } .ww-stage.wide[data-n="1"] .ww-sec:nth-child(2){ border-left:0; padding-left:0; }
.ww-stage.wide[data-n="1"] .ww-face{ width:92px; height:92px; } .ww-stage.wide[data-n="1"] .ww-rank{ font-size:40px; } .ww-stage.wide[data-n="1"] .ww-who h2{ font-size:36px; } .ww-stage.wide[data-n="1"] .ww-meta{ font-size:15px; } .ww-stage.wide[data-n="1"] .ww-sub{ font-size:13px; } .ww-stage.wide[data-n="1"] .ww-proj b{ font-size:56px; } .ww-stage.wide[data-n="1"] .ww-proj small{ font-size:11px; }
.ww-stage[data-n="1"] .ww-sec{ gap:9px; } .ww-stage[data-n="1"] .ww-sec h3{ font-size:15px; } .ww-stage[data-n="1"] .ww-sec h3 small{ font-size:12px; } .ww-stage[data-n="1"] .ww-tiles{ gap:7px; } .ww-stage[data-n="1"] .ww-tiles > div{ padding:8px 4px 6px; border-radius:10px; } .ww-stage[data-n="1"] .ww-tiles b{ font-size:25px; } .ww-stage[data-n="1"] .ww-tiles small{ font-size:9.5px; letter-spacing:0.03em; } .ww-stage[data-n="1"] .ww-tiles i{ font-size:9px; }
.ww-stage[data-n="1"] .ww-pts{ font-size:14px; } .ww-stage[data-n="1"] .ww-pts b{ font-size:32px; } .ww-stage[data-n="1"] .ww-l3{ font-size:13px; } .ww-stage[data-n="1"] .ww-l3 b{ font-size:20px; } .ww-stage[data-n="1"] .ww-bars{ height:84px; } .ww-stage[data-n="1"] .ww-bar b{ font-size:12px; } .ww-stage[data-n="1"] .ww-bar em{ font-size:10px; }
.ww-stage[data-n="1"] .ww-mate b{ font-size:16px; } .ww-stage[data-n="1"] .ww-mate small{ font-size:12px; } .ww-stage[data-n="1"] .ww-mate .chip{ font-size:9.5px !important; } .ww-stage[data-n="1"] .ww-mates{ gap:10px; } .ww-stage[data-n="1"] .ww-not ul{ gap:9px; } .ww-stage[data-n="1"] .ww-not li{ font-size:17px; line-height:1.3; padding-left:16px; } .ww-stage[data-n="1"] .ww-not li::before{ width:8px; height:8px; } .ww-stage[data-n="1"] .ww-clear{ font-size:14px; } .ww-stage[data-n="1"] .ww-prac span{ font-size:13px; }
.ww-stage.tall[data-n="1"] .ww-row{ flex:0 0 auto; grid-template-columns:1fr 1fr; grid-template-rows:auto auto 1fr; gap:22px 22px; padding:22px; } .ww-stage.tall[data-n="1"] .ww-id{ grid-column:1 / -1; grid-template-columns:auto auto minmax(0, 1fr) auto; } .ww-stage.tall[data-n="1"] .ww-face{ width:96px; height:96px; } .ww-stage.tall[data-n="1"] .ww-who h2{ font-size:36px; } .ww-stage.tall[data-n="1"] .ww-meta{ font-size:16px; } .ww-stage.tall[data-n="1"] .ww-proj b{ font-size:60px; } .ww-stage.tall[data-n="1"] .ww-rank{ font-size:40px; }
.ww-stage.tall[data-n="1"] .ww-tiles b{ font-size:34px; } .ww-stage.tall[data-n="1"] .ww-tiles > div{ padding:12px 4px 9px; } .ww-stage.tall[data-n="1"] .ww-tiles small{ font-size:11px; } .ww-stage.tall[data-n="1"] .ww-sec h3{ font-size:17px; } .ww-stage.tall[data-n="1"] .ww-not li{ font-size:22px; } .ww-stage.tall[data-n="1"] .ww-mate b{ font-size:19px; } .ww-stage.tall[data-n="1"] .ww-mate small{ font-size:14px; } .ww-stage.tall[data-n="1"] .ww-pts b{ font-size:38px; } .ww-stage.tall[data-n="1"] .ww-bars{ height:120px; }/* vertical (9:16): each player is a card with the identity across the top and a 2x2 grid of sections below */
.ww-stage.tall{ padding:20px 26px 12px; } .ww-stage.tall .ww-brand img{ height:42px; } .ww-stage.tall .ww-title h1{ font-size:34px; } .ww-stage.tall .ww-title span{ font-size:10.5px; } .ww-stage.tall .ww-badge{ font-size:22px; padding:5px 12px; }
.ww-stage.tall .ww-row{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto 1fr; gap:6px 12px; padding:8px 12px 8px; }
.ww-stage.tall .ww-id{ grid-column:1 / -1; } .ww-stage.tall .ww-sec + .ww-sec{ border-left:0; padding-left:0; } .ww-stage.tall .ww-sec.ww-adv{ border-left:1px solid #1e2937; padding-left:12px; } .ww-stage.tall .ww-sec.ww-not{ border-left:1px solid #1e2937; padding-left:12px; }
.ww-stage.tall .ww-id{ grid-template-columns:auto auto minmax(0, 1fr) auto; } .ww-stage.tall .ww-face{ width:56px; height:56px; } .ww-stage.tall .ww-who h2{ font-size:21px; } .ww-stage.tall .ww-meta{ font-size:12px; } .ww-stage.tall .ww-sub{ font-size:10.5px; }
.ww-stage.tall .ww-proj{ grid-template-columns:auto auto; align-items:center; column-gap:8px; } .ww-stage.tall .ww-proj b{ grid-row:1 / span 2; font-size:34px; } .ww-stage.tall .ww-proj small{ text-align:left; } .ww-stage.tall .ww-proj .chip{ grid-column:2; justify-self:start; margin:0; }
.ww-stage.tall .ww-tiles b{ font-size:17px; } .ww-stage.tall .ww-tiles small{ font-size:8px; } .ww-stage.tall .ww-tiles > div{ padding:3px 2px 2px; } .ww-stage.tall .ww-sec{ gap:4px; } .ww-stage.tall .ww-l3{ font-size:9.5px; } .ww-stage.tall .ww-l3 b{ font-size:12.5px; } .ww-stage.tall .ww-foot{ font-size:26px; } .ww-stage.tall .ww-not li{ font-size:11.5px; } .ww-stage.tall .ww-sec h3{ font-size:11.5px; }
.ww-stage.tall[data-n="5"] .ww-row{ padding:5px 10px; gap:3px 10px; } .ww-stage.tall[data-n="5"] .ww-face{ width:44px; height:44px; } .ww-stage.tall[data-n="5"] .ww-who h2{ font-size:18px; } .ww-stage.tall[data-n="5"] .ww-rank{ font-size:24px; } .ww-stage.tall[data-n="5"] .ww-tiles b{ font-size:15px; } .ww-stage.tall[data-n="5"] .ww-tiles > div{ padding:2px 2px 1px; } .ww-stage.tall[data-n="5"] .ww-tiles i{ display:none; } .ww-stage.tall[data-n="5"] .ww-sec{ gap:3px; } .ww-stage.tall[data-n="5"] .ww-pts b{ font-size:17px; } .ww-stage.tall[data-n="5"] .ww-not li{ font-size:10.5px; } .ww-stage.tall[data-n="5"] .ww-l3, .ww-stage.tall[data-n="5"] .ww-prac{ display:none; } .ww-stage.tall[data-n="5"] .ww-sub{ display:none; }
.ww-stage.tall[data-n="2"] .ww-tiles b, .ww-stage.tall[data-n="3"] .ww-tiles b{ font-size:22px; } .ww-stage.tall[data-n="2"] .ww-not li, .ww-stage.tall[data-n="3"] .ww-not li{ font-size:13px; } .ww-stage.tall[data-n="2"] .ww-face, .ww-stage.tall[data-n="3"] .ww-face{ width:70px; height:70px; } .ww-stage.tall[data-n="2"] .ww-who h2, .ww-stage.tall[data-n="3"] .ww-who h2{ font-size:25px; }

/* ---------- Members page (owner only) ---------- */
body.consumer-mode #tab-members, body.consumer-mode #view-members{ display:none !important; }
.mb-comp{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; padding:6px 0; border-top:1px solid var(--border); font-size:0.88rem; } .mb-comp:first-child{ border-top:0; }
.mb-confirm{ margin-left:6px; padding:2px 9px; font-size:0.74rem; }
.mb-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin:6px 0 14px; }
.mb-card{ background:var(--surface-2, #0d1117); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.mb-card b{ font-family:'Oswald',sans-serif; font-size:1.9rem; line-height:1.05; } .mb-card span{ color:var(--text-muted); font-size:0.8rem; letter-spacing:0.04em; }
.mb-card.hot{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent); } .mb-card.hot b{ color:var(--accent); }
.mb-box{ border:1px solid var(--border); border-radius:12px; padding:10px 14px 4px; margin-bottom:14px; background:rgba(0,0,0,0.25); } .mb-box h4{ margin:0 0 6px; font-size:0.9rem; color:var(--text-muted); } .mb-chart{ width:100%; height:auto; display:block; }
.mb-ctl{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; } .mb-ctl input{ background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 12px; min-width:220px; }
.mb-table td, .mb-table th{ white-space:nowrap; } .mb-warn{ color:#ffc233; margin-left:6px; } .mb-err{ color:#ff7a7a; font-weight:700; }
.mb-plan{ border:1px solid var(--border); border-radius:999px; padding:2px 10px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); } .mb-plan.on{ color:#04130a; background:var(--accent); border-color:var(--accent); font-weight:800; }
.mb-temp{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); } .mb-code{ font-size:1.1rem; font-weight:800; letter-spacing:.06em; padding:3px 10px; border-radius:8px; background:rgba(0,0,0,.35); user-select:all; }
/* ---------- Membership pop-up + lock badges ---------- */
.tab-locked::after{ content:'🔒'; font-size:0.68em; margin-left:6px; opacity:0.9; filter:saturate(0.8); }
body.up-open{ overflow:hidden; }
.up-wrap{ position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,0.72); backdrop-filter:blur(4px); }
.up-wrap.show{ display:flex; animation:upfade .16s ease; }
@keyframes upfade{ from{ opacity:0 } to{ opacity:1 } }
.up-card{ position:relative; width:100%; max-width:460px; max-height:92vh; overflow:auto; box-sizing:border-box; padding:26px 26px 20px; border-radius:18px; border:1px solid color-mix(in srgb, var(--accent) 50%, transparent); outline:none;
  background:radial-gradient(520px 260px at 0% 0%, rgba(30,130,16,0.35), transparent 70%), #080a08; box-shadow:0 24px 70px rgba(0,0,0,0.7), 0 0 40px color-mix(in srgb, var(--accent) 12%, transparent); color:var(--text, #ecf0f4); }
.up-x{ position:absolute; top:10px; right:12px; background:transparent; border:0; color:var(--text-muted); font-size:1.05rem; cursor:pointer; padding:6px 8px; border-radius:8px; } .up-x:hover{ color:#fff; background:rgba(255,255,255,0.08); }
.up-badge{ display:inline-block; font-family:'Oswald',sans-serif; letter-spacing:0.16em; font-size:0.78rem; color:#1a1300; background:#ffc233; border-radius:999px; padding:4px 14px; font-weight:700; }
.up-card h3{ margin:12px 0 4px; font-family:'Oswald',sans-serif; font-size:1.55rem; line-height:1.15; letter-spacing:0.01em; }
.up-sub{ margin:0 0 12px; color:var(--text-muted); font-size:0.93rem; line-height:1.45; }
.up-perks{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:7px; font-size:0.92rem; }
.up-perks li{ position:relative; padding-left:26px; line-height:1.35; } .up-perks li::before{ content:'✓'; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#04130a; font-weight:800; font-size:0.72rem; display:grid; place-items:center; }
.up-price{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid rgba(255,194,51,0.5); background:rgba(255,194,51,0.08); border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.up-price b{ font-family:'Oswald',sans-serif; font-size:1.25rem; color:#ffd166; display:block; } .up-price span{ font-size:0.82rem; color:var(--text-muted); } .up-alt{ font-size:0.85rem; color:var(--text-muted); } .up-alt b{ display:inline; font-size:0.95rem; color:#fff; }
.up-cta{ width:100%; padding:13px 16px; font-size:1rem; } .up-alt-btn{ width:100%; margin-top:8px; }
.up-fine{ margin:10px 0 0; font-size:0.78rem; color:var(--text-muted); line-height:1.45; text-align:center; }
.up-links{ display:flex; justify-content:center; gap:18px; margin-top:10px; } .up-link{ background:none; border:0; color:var(--text-muted); font-size:0.82rem; cursor:pointer; text-decoration:underline; padding:4px; } .up-link:hover{ color:#fff; }
@media (max-width:520px){ .up-wrap{ align-items:flex-end; padding:0; } .up-card{ max-width:none; border-radius:18px 18px 0 0; padding:22px 18px 16px; } }
.rk-unlock{ width:100%; margin:10px 0 4px; padding:14px; border-radius:12px; border:1px dashed rgba(255,194,51,0.6); background:rgba(255,194,51,0.07); color:#ffd166; font-weight:700; cursor:pointer; font-size:0.95rem; } .rk-unlock:hover{ background:rgba(255,194,51,0.14); }

/* ---------- free preview on Members pages ---------- */
.pv-banner{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:0 0 14px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,194,51,0.55); background:rgba(255,194,51,0.09); color:#ffe29a; font-size:0.92rem; }
.pv-banner b{ color:#ffd166; }
.pv-locked{ filter:blur(5px) saturate(0.7); opacity:0.75; user-select:none; cursor:pointer; }
.pv-locked *{ pointer-events:none !important; }
tr.pv-cta > td{ padding:0 !important; border:0 !important; }
.pv-cta{ position:relative; z-index:2; }
.pv-cta-in{ display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; padding:14px 16px; margin:6px 0; border-radius:12px; border:1px dashed color-mix(in srgb, var(--accent) 60%, transparent); background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(0,0,0,0.6)); font-size:0.95rem; }
.pv-cta-in b{ color:var(--accent); font-size:1.05rem; } .pv-cta-in span{ color:var(--text-muted); }
.pk-grid > .pv-cta{ grid-column:1 / -1; }
.mc-row span.pv{ color:#ffd166; font-weight:700; font-size:0.82rem; }/* ---------- Home hero: NBA games slideshow (snippet-home-nba.js) ---------- */
.home-hero-media .nbh{ position:absolute; inset:0; outline:none; }
.nbh-track{ position:absolute; inset:0; }
.nbh-pane{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .55s ease, visibility .55s; }
.nbh-pane.on{ opacity:1; visibility:visible; }
.nbh-slide{ position:absolute; inset:0; cursor:pointer; color:#fff; }
/* banner slide */
.nbh-banner{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px 30px 44px; background:linear-gradient(145deg,#0b1220 0%,#101a33 45%,#1c0f2b 100%); overflow:hidden; }
.nbh-bglow{ position:absolute; inset:-30%; background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%), radial-gradient(circle at 75% 80%, rgba(255,120,60,.20), transparent 45%); animation:nbhGlow 9s ease-in-out infinite alternate; pointer-events:none; }
@keyframes nbhGlow{ from{ transform:translate3d(-2%,-2%,0) scale(1); } to{ transform:translate3d(3%,3%,0) scale(1.08); } }
.nbh-nbalogo{ position:relative; width:64px; height:auto; margin-bottom:8px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)); }
.nbh-kick{ position:relative; font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.22em; font-size:.78rem; color:var(--accent); }
.nbh-banner h3{ position:relative; margin:6px 0 8px; font-family:'Oswald',sans-serif; font-weight:800; font-size:clamp(1.7rem,3.1vw,2.5rem); line-height:1.02; letter-spacing:.01em; text-transform:uppercase; color:#fff; }
.nbh-banner p{ position:relative; margin:0 0 16px; max-width:38ch; font-size:.92rem; line-height:1.4; color:rgba(255,255,255,.78); }
.nbh-btns{ position:relative; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
/* game slide */
.nbh-game{ display:flex; }
.nbh-side{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding-bottom:70px; position:relative; }
.nbh-side.away{ background-image:radial-gradient(circle at 35% 45%, rgba(255,255,255,.24), transparent 62%); }
.nbh-side.home{ background-image:radial-gradient(circle at 65% 45%, rgba(255,255,255,.24), transparent 62%); }
.nbh-side img{ width:62%; max-width:190px; height:auto; max-height:46%; object-fit:contain; filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)); }
.nbh-side b{ font-family:'Oswald',sans-serif; font-weight:800; font-size:1.25rem; letter-spacing:.06em; text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.nbh-side small{ opacity:.85; font-weight:600; letter-spacing:.04em; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.nbh-vs{ position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); z-index:2; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:800; font-size:1.3rem; background:rgba(0,0,0,.6); border:2px solid rgba(255,255,255,.35); }
.nbh-info{ position:absolute; left:0; right:0; bottom:0; padding:30px 16px 34px; text-align:center; background:linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.78) 58%, transparent 100%); }
.nbh-when{ font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.9rem; }
.nbh-when small{ opacity:.8; font-weight:500; margin-left:6px; }
.nbh-live{ display:inline-block; padding:1px 7px; border-radius:6px; background:#ff3b3b; color:#fff; font-size:.72rem; letter-spacing:.08em; margin-right:4px; animation:nbhPulse 1.4s infinite; }
@keyframes nbhPulse{ 50%{ opacity:.55; } }
.nbh-odds{ margin-top:4px; font-family:'Oswald',sans-serif; font-weight:800; font-size:1.3rem; color:var(--accent); }
.nbh-odds .dot{ margin:0 10px; opacity:.55; color:#fff; }
.nbh-go{ margin-top:8px; background:var(--accent); color:#04130a; border:0; border-radius:999px; padding:7px 16px; font-weight:800; font-size:.8rem; letter-spacing:.03em; cursor:pointer; }
/* controls */
.nbh-arrow{ position:absolute; top:42%; transform:translateY(-50%); z-index:5; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.45); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; opacity:0; transition:opacity .2s; }
.nbh-arrow.prev{ left:10px; } .nbh-arrow.next{ right:10px; }
.nbh:hover .nbh-arrow, .nbh:focus-within .nbh-arrow{ opacity:1; }
.nbh-dots{ position:absolute; left:0; right:0; bottom:10px; z-index:5; display:flex; justify-content:center; gap:7px; }
.nbh-dots button{ width:9px; height:9px; padding:0; border-radius:50%; border:0; background:rgba(255,255,255,.35); cursor:pointer; }
.nbh-dots button.on{ background:var(--accent); width:22px; border-radius:6px; }
@media (max-width:900px){
  .home-hero-media{ min-height:330px !important; }
  .nbh-arrow{ opacity:.9; width:34px; height:34px; }
  .nbh-banner h3{ font-size:1.7rem; }
}
@media (max-width:640px){
  .home-hero-media{ min-height:300px !important; }
  .nbh-banner{ padding:20px 18px 40px; } .nbh-nbalogo{ width:48px; }
  .nbh-banner p{ font-size:.84rem; margin-bottom:12px; }
  .nbh-side b{ font-size:1rem; } .nbh-vs{ width:44px; height:44px; font-size:1.05rem; }
  .nbh-odds{ font-size:1.1rem; } .nbh-info{ padding:24px 12px 30px; }
}
@media (prefers-reduced-motion: reduce){ .nbh-bglow{ animation:none; } .nbh-pane{ transition:none; } }
.nbh-pill{ align-self:flex-start; margin:0 0 12px; padding:7px 14px; border-radius:999px; border:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); font-family:'Oswald',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.06em; cursor:pointer; }
.nbh-pill:hover{ background:color-mix(in srgb, var(--accent) 22%, transparent); }
@media (max-width:900px){ .nbh-pill{ align-self:center; text-align:center; } }

/* hero banner with the three leagues (NFL / NBA / NHL) */
.nbh-logos{ position:relative; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.nbh-lg{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:68px; padding:10px 12px 8px; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; font:700 .72rem 'Oswald',sans-serif; letter-spacing:.08em; cursor:pointer; }
.nbh-lg img{ width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.nbh-lg:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); }

/* ---- game slide v2: teams on top, a solid info panel underneath (nothing overlaps, on any screen) ---- */
.nbh-game{ flex-direction:column; }
.nbh-teams{ position:relative; display:flex; flex:1 1 auto; min-height:0; }
.nbh-side{ padding:16px 8px 14px; justify-content:center; gap:8px; text-align:center; }
.nbh-side img{ width:auto; height:clamp(84px, 20vw, 130px); max-width:78%; max-height:none; }
.nbh-side b{ font-size:1.15rem; line-height:1.1; max-width:100%; overflow-wrap:anywhere; }
.nbh-side small{ font-size:.82rem; }
.nbh-vs{ top:50%; width:44px; height:44px; font-size:1rem; }
.nbh-info{ position:static; padding:14px 16px 38px; background:#05080b; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; align-items:center; gap:6px; }
.nbh-info .nbh-odds{ margin:0; font-size:1.15rem; line-height:1.2; display:flex; flex-wrap:wrap; justify-content:center; gap:2px 6px; }
.nbh-info .nbh-odds .dot{ margin:0 4px; }
.nbh-info .nbh-star{ margin:2px 0 0; max-width:none; }
.nbh-info .nbh-star b{ font-size:.82rem; } .nbh-info .nbh-star span{ font-size:.76rem; }
.nbh-info .nbh-go{ margin-top:6px; min-height:42px; padding:9px 20px; font-size:.86rem; }
.nbh-arrow{ top:34%; }
@media (max-width:900px){ .home-hero-media{ min-height:470px !important; } }
@media (max-width:640px){ .home-hero-media{ min-height:500px !important; } .nbh-side img{ height:88px; } .nbh-side b{ font-size:1.02rem; } }
/* Thursday Night Football promos only while that game is still ahead or in progress (body.tnf-on, set in snippet-home-nba.js) */
[data-tnf]{ display:none !important; } body.tnf-on [data-tnf]{ display:revert !important; } body.tnf-on [data-notnf]{ display:none !important; }
/* ---------- Guided tour (snippet-tour.js) ---------- */
.tour-wrap{ display:none; position:fixed; z-index:9000; left:0; right:0; bottom:58px; padding:0 14px; pointer-events:none; justify-content:center; }
.tour-wrap.show{ display:flex; }
.tour-wrap.center{ top:0; bottom:44px; align-items:center; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); pointer-events:auto; }
.tour-card{ position:relative; pointer-events:auto; width:100%; max-width:460px; box-sizing:border-box; padding:20px 22px 16px; border-radius:18px; color:var(--text); background:linear-gradient(180deg, #131b2c, #0b101b); border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow:0 20px 60px rgba(0,0,0,.65), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); animation:tourIn .22s ease; }
@keyframes tourIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.tour-x{ position:absolute; top:10px; right:12px; width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:var(--text-muted); font-size:.9rem; cursor:pointer; }
.tour-step{ font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.14em; font-size:.7rem; color:var(--accent); text-transform:uppercase; }
.tour-card h3{ margin:4px 28px 6px 0; font-family:'Oswald',sans-serif; font-size:1.35rem; line-height:1.15; text-transform:uppercase; letter-spacing:.01em; }
.tour-card p{ margin:0 0 12px; font-size:.9rem; line-height:1.5; color:var(--text-muted); }
.tour-dots{ display:flex; gap:6px; margin:0 0 12px; }
.tour-dots button{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.22); cursor:pointer; } .tour-dots button.on{ width:22px; border-radius:6px; background:var(--accent); }
.tour-row{ display:flex; align-items:center; gap:8px; }
.tour-skip{ background:none; border:0; color:var(--text-muted); font-size:.82rem; text-decoration:underline; cursor:pointer; padding:6px 2px; }
.tour-btn{ min-height:38px; padding:8px 18px; }
/* the real menu items the step is about */
.tour-hl{ outline:3px solid var(--accent) !important; outline-offset:3px; border-radius:10px; box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent) !important; position:relative; z-index:3; }
nav.subtabs.tour-hl{ outline-offset:-3px; border-radius:0; }
body.tour-on header.topbar{ transform:none !important; }
@media (max-width:640px){
  .tour-wrap{ bottom:52px; padding:0 8px; }
  .tour-card{ max-width:none; padding:16px 16px 12px; border-radius:16px; }
  .tour-card h3{ font-size:1.15rem; } .tour-card p{ font-size:.84rem; margin-bottom:10px; }
}
@media (prefers-reduced-motion: reduce){ .tour-card{ animation:none; } }
/* Help page: the "take the tour" box */
.help-tour{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 16px; padding:14px 16px; border-radius:14px; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); }
.help-tour b{ display:block; font-family:'Oswald',sans-serif; font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase; } .help-tour span{ color:var(--text-muted); font-size:.84rem; }
/* ---------- "Your first 3 steps" card on Home (snippet-start.js) ---------- */
.start-card{ position:relative; padding:16px 18px 14px; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent); }
.start-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.start-eye{ font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.14em; font-size:.7rem; color:var(--accent); }
.start-card h3{ margin:2px 0 8px; font-family:'Oswald',sans-serif; font-size:1.25rem; text-transform:uppercase; line-height:1.15; }
.start-x{ flex:none; width:32px; height:32px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:var(--text-muted); cursor:pointer; font-size:.9rem; }
.start-bar{ height:5px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; margin:0 0 12px; }
.start-bar i{ display:block; height:100%; background:var(--accent); border-radius:4px; transition:width .35s ease; }
.start-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.start-list li{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border, rgba(255,255,255,.12)); border-radius:12px; min-width:0; }
.start-list li.on{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.start-n{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 .85rem 'Oswald',sans-serif; background:rgba(255,255,255,.1); }
.start-list li.on .start-n{ background:var(--accent); color:#000; }
.start-list b{ display:block; font-size:.92rem; }
.start-list small{ display:block; color:var(--text-muted); font-size:.78rem; line-height:1.35; margin-top:2px; }
@media (max-width:640px){ .start-list{ grid-template-columns:1fr; } .start-card{ padding:14px 14px 12px; } }
/* ---------- Customization: light theme, accent / background / corners / text size, Customize page, "For you" panel (snippet-custom.js) ---------- */

/* ===== light theme: content goes light; the header, score ticker, footer and hero stay dark "brand islands" (they are built around the dark logo art) ===== */
:root[data-theme="light"]{
  --bg:#EEF1F5; --surface:#FFFFFF; --surface-2:#F1F4F8; --border:#D3DAE3; --text:#121923; --text-muted:#56637A;
  --danger:#C62828; --danger-bg:#FBE4E4; --good:#0E8A3A; --good-bg:#DDF3E5; --warn:#A87400; --warn-bg:#FFF1CC;
  --shadow-sm:0 1px 2px rgba(20,30,50,.06), 0 3px 10px rgba(20,30,50,.08); --shadow-md:0 6px 20px rgba(20,30,50,.12), 0 1px 3px rgba(20,30,50,.08);
  color-scheme:light;
}
:root[data-theme="light"] header.topbar, :root[data-theme="light"] .score-ticker, :root[data-theme="light"] footer.foot, :root[data-theme="light"] .home-hero,
:root[data-theme="light"] .tour-card, :root[data-theme="light"] .up-card, :root[data-theme="light"] .mship{
  --surface:#000000; --surface-2:#0D1117; --border:#252C36; --text:#ECEFF2; --text-muted:#8B96A3; --good:#0EE23F; --danger:#FF5A5F; --warn:#F2B705; color-scheme:dark;
}
:root[data-theme="light"]{ background:#E5E9EF; }
:root[data-theme="light"] body::before{ background:radial-gradient(1100px 650px at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 66%), radial-gradient(900px 600px at 100% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%), #EEF1F5; }
:root[data-theme="light"] .panel{ background-color:#FFFFFF; }
:root[data-theme="light"] .panel .panel, :root[data-theme="light"] .feature-card, :root[data-theme="light"] .mb-box{ background-color:var(--surface-2); }
:root[data-theme="light"] .table-wrap, :root[data-theme="light"] table{ color:var(--text); }
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea{ color:var(--text); }
:root[data-theme="light"] .home-hero .btn.secondary{ color:#fff; }
:root[data-theme="light"] ::selection{ background:var(--accent); color:var(--accent-ink); }
:root[data-theme="light"] header.topbar nav.tabs button[aria-selected="true"]{ color:#fff; }
/* things that were built with translucent black on a dark page */
:root[data-theme="light"] .pv-banner{ background:#FFF4D6; color:#4a3500; border-color:#E8C560; }
:root[data-theme="light"] .nph-card, :root[data-theme="light"] .nbr-card, :root[data-theme="light"] .lab-us-card, :root[data-theme="light"] .lab-def, :root[data-theme="light"] .lab-game{ background:var(--surface); }
:root[data-theme="light"] .nph-chip.on{ color:var(--accent-ink); }
:root[data-theme="light"] .nph-linelab{ fill:#201700; }
:root[data-theme="light"] .pm-head, :root[data-theme="light"] .nbd-stage{ color:#fff; }

/* ===== background styles ===== */
html[data-bg="plain"] body::before{ background:var(--bg) !important; }
html[data-bg="glow"] body::before{ background:radial-gradient(900px 520px at 15% -5%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%), radial-gradient(800px 500px at 95% 105%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--bg) !important; }

/* ===== corners ===== */
html[data-radius="sharp"]{ --radius:2px; }
html[data-radius="sharp"] .panel, html[data-radius="sharp"] .btn, html[data-radius="sharp"] button.btn, html[data-radius="sharp"] .feature-card, html[data-radius="sharp"] .pricing-card, html[data-radius="sharp"] .nph-card,
html[data-radius="sharp"] .lab-us-card, html[data-radius="sharp"] .nbr-card, html[data-radius="sharp"] .cz-card, html[data-radius="sharp"] .fy-team, html[data-radius="sharp"] .home-hero, html[data-radius="sharp"] .table-wrap,
html[data-radius="sharp"] input, html[data-radius="sharp"] select, html[data-radius="sharp"] .modal, html[data-radius="sharp"] .up-card, html[data-radius="sharp"] .tour-card, html[data-radius="sharp"] .pill{ border-radius:3px !important; }
html[data-radius="round"]{ --radius:18px; }
html[data-radius="round"] .panel, html[data-radius="round"] .feature-card, html[data-radius="round"] .pricing-card, html[data-radius="round"] .nph-card, html[data-radius="round"] .lab-us-card, html[data-radius="round"] .nbr-card,
html[data-radius="round"] .cz-card, html[data-radius="round"] .fy-team, html[data-radius="round"] .home-hero, html[data-radius="round"] .up-card, html[data-radius="round"] .tour-card{ border-radius:24px !important; }
html[data-radius="round"] .btn, html[data-radius="round"] button.btn, html[data-radius="round"] input, html[data-radius="round"] select{ border-radius:999px !important; }

/* ===== text size ===== */
html[data-fs="s"]{ font-size:14.5px; } html[data-fs="l"]{ font-size:18px; }
@media (max-width:640px){ html[data-fs="s"]{ font-size:12.5px !important; } html[data-fs="l"]{ font-size:16px !important; } }

/* ===== header quick toggle + Customize tab ===== */
.theme-btn{ color:#fff !important; background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.25) !important; width:36px; height:36px; padding:0; border-radius:50%; font-size:1.05rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
#tab-customize{ white-space:nowrap; }

/* ===== Customize page ===== */
.cz-page{ max-width:1000px; margin:0 auto; }
.cz-h{ margin:24px 0 6px; font-size:1.1rem; } .cz-h small{ color:var(--text-muted); font-weight:500; font-size:.8rem; margin-left:6px; }
.cz-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; }
.cz-card{ border:1px solid var(--border); border-radius:14px; background:var(--surface-2); padding:14px; }
.cz-card h4{ margin:0 0 10px; font-family:'Oswald',sans-serif; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.cz-seg{ display:flex; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.cz-seg button{ flex:1; padding:10px 6px; border:0; background:transparent; color:var(--text); font-family:inherit; font-size:.82rem; font-weight:700; cursor:pointer; }
.cz-seg button + button{ border-left:1px solid var(--border); }
.cz-seg button.on{ background:var(--accent); color:var(--accent-ink); }
.cz-sw{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.cz-dot{ width:32px; height:32px; border-radius:50%; border:3px solid transparent; box-shadow:0 0 0 1px var(--border); cursor:pointer; padding:0; }
.cz-dot.on{ border-color:var(--surface); box-shadow:0 0 0 3px var(--text); }
.cz-pick{ position:relative; display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:var(--text-muted); cursor:pointer; }
.cz-pick input{ width:34px; height:34px; padding:0; border:0; background:none; cursor:pointer; border-radius:50%; }
.cz-n{ font-style:normal; margin-left:4px; padding:0 6px; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-size:.7rem; }
.cz-teams{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin-top:10px; }
.cz-team{ position:relative; display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-family:inherit; font-size:.8rem; font-weight:700; text-align:left; cursor:pointer; }
.cz-team img{ width:34px; height:34px; object-fit:contain; flex:none; } .cz-team span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cz-team i{ font-style:normal; color:var(--border); font-size:1rem; }
.cz-team.on{ border-color:var(--accent); background:var(--accent-soft, color-mix(in srgb, var(--accent) 14%, transparent)); } .cz-team.on i{ color:var(--accent); }
@media (max-width:640px){ .cz-teams{ grid-template-columns:repeat(2, 1fr); } }

/* ===== Home: For you ===== */
.fy{ margin-bottom:20px; }
.fy-prompt{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .fy-prompt > div:first-child{ flex:1 1 320px; } .fy-prompt h2{ margin:2px 0; } .fy-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.fy-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; margin-top:6px; }
.fy-team{ border:1px solid var(--border); border-radius:14px; background:var(--surface-2); padding:12px 14px; }
.fy-th{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .fy-th img{ width:40px; height:40px; object-fit:contain; } .fy-th b{ display:block; font-family:'Oswald',sans-serif; font-size:1.02rem; letter-spacing:.02em; } .fy-th small{ color:var(--text-muted); font-size:.72rem; }
.fy-row{ display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--border); font-size:.84rem; } .fy-row small{ width:34px; flex:none; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.fy-row span{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; } .fy-row img{ vertical-align:middle; }
.fy-w{ color:var(--good); } .fy-l{ color:var(--danger); } .fy-live{ color:#fff; background:#ff3b3b; border-radius:5px; padding:0 6px; font-size:.7rem; } .fy-when{ color:var(--text-muted); font-size:.78rem; } .fy-none{ color:var(--text-muted); }
.fy-news{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:8px; }
.fy-n{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); text-decoration:none; }
.fy-n:hover{ border-color:var(--accent); } .fy-n img{ width:22px; height:22px; object-fit:contain; margin-top:2px; flex:none; } .fy-n b{ display:block; font-size:.86rem; line-height:1.3; } .fy-n small{ color:var(--text-muted); font-size:.72rem; }
.fy-links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; }
.fy-ql{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; } .fy-ql small{ color:var(--text-muted); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.66rem; }
.fy-ql button{ border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:999px; padding:5px 12px; font-family:inherit; font-size:.78rem; font-weight:600; cursor:pointer; } .fy-ql button:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:640px){ .fy-grid{ grid-template-columns:1fr; } .fy-news{ grid-template-columns:1fr; } }
/* ---------- My Bets (bet tracker) ---------- */
.bt-panel{ max-width:1000px; margin:0 auto; }
.bt-bar{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; margin:4px 0 12px; }
.bt-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.bt-btns .btn{ padding:9px 14px; }
.bt-sync{ font-size:0.78rem; color:var(--text-muted); }
.bt-sync.on{ color:var(--good); font-weight:600; }
.bt-sync a{ color:var(--accent); }
.bt-flash{ margin:0 0 10px; padding:8px 12px; border-radius:9px; background:var(--good-bg); color:var(--good); font-size:0.84rem; font-weight:600; }
.bt-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; min-width:0; }
.bt-filters select{ width:auto; max-width:100%; flex:0 1 auto; }
.bt-filters select, .bt-unit input{ background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:7px 10px; font:inherit; font-size:0.84rem; }
.bt-unit{ margin-left:auto; font-size:0.8rem; color:var(--text-muted); display:flex; align-items:center; gap:4px; }
.bt-unit input{ width:68px; }
.bt-tiles{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin:0 0 14px; }
.bt-tile{ min-width:0; padding:12px 8px; }
.bt-tile .stat-tile-value{ font-size:1.35rem; }
.bt-tile.good{ background:var(--good-bg); border-color:var(--good); }
.bt-tile.good .stat-tile-value{ color:var(--good); }
.bt-tile.bad{ background:var(--danger-bg); border-color:var(--danger); }
.bt-tile.bad .stat-tile-value{ color:var(--danger); }
.bt-sub{ font-size:0.68rem; color:var(--text-muted); margin-top:4px; }
.bt-box{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; margin:0 0 14px; min-width:0; }
.bt-chart{ width:100%; height:auto; display:block; }
.bt-zero{ stroke:var(--border); stroke-width:1; stroke-dasharray:4 4; }
.bt-line{ fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.bt-line.up{ stroke:var(--good); } .bt-line.dn{ stroke:var(--danger); }
.bt-area.up{ fill:var(--good); opacity:0.12; } .bt-area.dn{ fill:var(--danger); opacity:0.12; }
.bt-dot.up{ fill:var(--good); } .bt-dot.dn{ fill:var(--danger); }
.bt-end{ font-family:'Oswald',sans-serif; font-size:14px; font-weight:600; } .bt-end.up{ fill:var(--good); } .bt-end.dn{ fill:var(--danger); }
.bt-ax{ font-size:11px; fill:var(--text-muted); }
.bt-bds{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 18px; }
.bt-bd h4{ margin:0 0 4px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.bt-tbl td:first-child{ white-space:normal; }
.bt-pos{ color:var(--good); font-weight:700; } .bt-neg{ color:var(--danger); font-weight:700; }
.bt-lock{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; background:var(--surface-2); border:1px dashed var(--border); border-radius:12px; padding:14px; margin:0 0 14px; }
.bt-lock span{ font-size:0.86rem; color:var(--text-muted); }
.bt-list{ display:flex; flex-direction:column; gap:10px; }
.bt-card{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border); border-radius:12px; padding:12px 14px; min-width:0; }
.bt-card.won{ border-left-color:var(--good); } .bt-card.lost{ border-left-color:var(--danger); } .bt-card.pending{ border-left-color:var(--accent); }
.bt-top{ display:flex; align-items:center; gap:12px; }
.bt-main{ flex:1; min-width:0; }
.bt-main b{ display:block; font-size:0.98rem; overflow-wrap:anywhere; }
.bt-main small{ color:var(--text-muted); font-size:0.78rem; }
.bt-chip{ flex:none; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:4px 9px; border-radius:7px; background:var(--surface-2); color:var(--text-muted); }
.bt-chip.won{ background:var(--good-bg); color:var(--good); } .bt-chip.lost{ background:var(--danger-bg); color:var(--danger); } .bt-chip.pending{ background:var(--warn-bg); color:var(--warn); }
.bt-amt{ flex:none; text-align:right; }
.bt-amt small{ display:block; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.bt-amt b{ font-family:'Oswald',sans-serif; font-size:1.1rem; }
.bt-legs{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:0.84rem; }
.bt-legs li{ display:flex; gap:8px; align-items:flex-start; }
.bt-legs em{ font-style:normal; color:var(--text-muted); font-size:0.78rem; }
.bt-legs small{ display:block; color:var(--text-muted); }
.bt-lg{ flex:none; width:18px; height:18px; border-radius:50%; background:var(--surface-2); color:var(--text-muted); font-style:normal; font-size:0.7rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.bt-lg.won{ background:var(--good); color:#fff; } .bt-lg.lost{ background:var(--danger); color:#fff; }
.bt-tags{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.bt-tag{ font-size:0.7rem; padding:2px 8px; border-radius:6px; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
.bt-note{ margin:8px 0 0; font-size:0.8rem; color:var(--text-muted); }
.bt-acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; align-items:center; }
.bt-sp{ flex:1; }
.bt-mini{ font:inherit; font-size:0.76rem; font-weight:600; padding:5px 11px; border-radius:7px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; }
.bt-mini:hover{ background:var(--surface-2); }
.bt-mini.won{ color:var(--good); border-color:var(--good); } .bt-mini.lost{ color:var(--danger); border-color:var(--danger); }
.bt-mini.del{ color:var(--text-muted); }
.bt-empty{ text-align:center; padding:34px 16px; background:var(--surface); border:1px dashed var(--border); border-radius:14px; margin:6px 0 14px; }
.bt-empty.small{ padding:16px; margin:0; font-size:0.86rem; color:var(--text-muted); }
.bt-empty h3{ margin:6px 0; font-family:'Oswald',sans-serif; }
.bt-empty p{ max-width:560px; margin:6px auto 14px; color:var(--text-muted); font-size:0.9rem; }
.bt-big{ font-size:2.4rem; }
.bt-sync-box{ display:flex; flex-direction:column; gap:3px; margin:16px 0 8px; padding:12px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); font-size:0.82rem; }
.bt-sync-box span{ color:var(--text-muted); }

/* tabs + calendar */
.bt-tabs{ display:flex; gap:6px; margin:0 0 12px; }
.bt-tabs button{ font:inherit; font-weight:600; font-size:0.86rem; padding:8px 16px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; }
.bt-tabs button.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.bt-cal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; }
.bt-cal-nav{ display:flex; align-items:center; gap:10px; }
.bt-cal-nav h3{ margin:0; font-family:'Oswald',sans-serif; font-size:1.3rem; min-width:9.5em; text-align:center; }
.bt-cal-nav .btn, .bt-cal-head > .btn{ padding:7px 14px; }
.bt-dow{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; margin:0 0 4px; text-align:center; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.bt-grid-cal{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.bt-day{ font:inherit; color:var(--text); text-align:left; min-width:0; min-height:74px; padding:6px 7px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); cursor:pointer; display:flex; flex-direction:column; gap:2px; position:relative; }
.bt-day .n{ font-size:0.74rem; font-weight:700; color:var(--text-muted); }
.bt-day b{ font-family:'Oswald',sans-serif; font-size:0.98rem; line-height:1.1; }
.bt-day i{ font-style:normal; font-size:0.62rem; color:var(--text-muted); line-height:1.2; }
.bt-day.out{ opacity:0.38; }
.bt-day.pos{ background:var(--good-bg); border-color:var(--good); } .bt-day.pos b{ color:var(--good); }
.bt-day.neg{ background:var(--danger-bg); border-color:var(--danger); } .bt-day.neg b{ color:var(--danger); }
.bt-day.open{ border-style:dashed; border-color:var(--accent); }
.bt-day.today .n{ color:var(--accent); }
.bt-day.today::after{ content:''; position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.bt-day.sel{ outline:2px solid var(--accent); outline-offset:1px; }
.bt-day:hover{ filter:brightness(1.08); }
.bt-gh{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.bt-seg button{ padding:7px 14px; }
.bt-sh{ margin:14px 0 6px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.bt-bar.up{ fill:var(--good); } .bt-bar.dn{ fill:var(--danger); }
.bt-val{ font-size:11px; font-weight:700; } .bt-val.up{ fill:var(--good); } .bt-val.dn{ fill:var(--danger); }

/* the ＋ button on props rows and the Track button in the Deep Dive */
.bt-add{ font:inherit; line-height:1; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--accent); border-radius:50%; width:22px; height:22px; padding:0; margin-left:6px; font-size:0.95rem; font-weight:700; vertical-align:middle; display:inline-flex; align-items:center; justify-content:center; }
.bt-add:hover, .bt-add.static{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.bt-add.static{ cursor:default; margin:0 2px; }
.bt-add.wide{ width:auto; height:auto; border-radius:9px; margin:10px 0 0; padding:9px 14px; font-size:0.84rem; font-family:'Oswald',sans-serif; letter-spacing:0.02em; display:flex; width:100%; background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.bt-add.wide:hover{ filter:brightness(1.07); }

/* add / import window */
.bt-modal{ position:fixed; inset:0; z-index:10050; background:rgba(5,10,7,0.62); display:none; align-items:center; justify-content:center; padding:14px; overflow-y:auto; }
.bt-modal.show{ display:flex; }
body.bt-open{ overflow:hidden; }
.bt-sheet{ position:relative; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:16px; width:100%; max-width:560px; max-height:calc(100vh - 28px); overflow-y:auto; padding:20px 18px 16px; box-shadow:var(--shadow-md); outline:none; }
.bt-sheet h3{ margin:0 28px 12px 0; font-family:'Oswald',sans-serif; font-size:1.25rem; }
.bt-close{ position:absolute; top:10px; right:10px; border:none; background:transparent; color:var(--text-muted); font-size:1.1rem; cursor:pointer; padding:6px 9px; border-radius:8px; }
.bt-close:hover{ background:var(--surface-2); }
.bt-sheet label{ display:flex; flex-direction:column; gap:4px; font-size:0.74rem; font-weight:600; color:var(--text-muted); min-width:0; }
.bt-sheet label small{ font-weight:400; }
.bt-sheet input, .bt-sheet select{ background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:9px 10px; font:inherit; font-size:0.92rem; font-weight:500; min-width:0; width:100%; box-sizing:border-box; }
.bt-leg{ border:1px solid var(--border); border-radius:12px; padding:10px; margin:0 0 10px; display:flex; flex-direction:column; gap:8px; background:var(--surface-2); }
.bt-lrow{ display:flex; gap:8px; align-items:flex-end; }
.bt-lrow label{ flex:1; }
.bt-lrow label.grow{ flex:2; }
.bt-team{ font-size:0.76rem; color:var(--text-muted); padding-bottom:10px; white-space:nowrap; }
.bt-x{ flex:none; border:1px solid var(--border); background:transparent; color:var(--text-muted); border-radius:8px; width:36px; height:38px; cursor:pointer; }
.bt-link{ border:none; background:transparent; color:var(--accent); font:inherit; font-size:0.84rem; font-weight:600; cursor:pointer; padding:2px 0 12px; }
.bt-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:0 0 10px; }
.bt-grid.one{ grid-template-columns:1fr; }
.bt-n{ margin:0 0 6px; }
.bt-wins{ min-height:1.2em; margin:4px 0; font-size:0.84rem; color:var(--good); font-weight:600; }
.bt-err{ margin:0; min-height:1.1em; font-size:0.82rem; color:var(--danger); font-weight:600; }
.bt-foot{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.bt-toast{ position:fixed; left:50%; bottom:78px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; z-index:10060; background:var(--surface); color:var(--text); border:1px solid var(--accent); border-radius:12px; padding:10px 16px; font-size:0.86rem; font-weight:600; box-shadow:var(--shadow-md); transition:opacity .2s, transform .2s; }
.bt-toast.show{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.bt-toast a{ color:var(--accent); margin-left:8px; }

@media (max-width:720px){
  .bt-tiles{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .bt-bds{ grid-template-columns:1fr; }
  .bt-unit{ margin-left:0; }
  .bt-top{ flex-wrap:wrap; }
  .bt-amt{ margin-left:auto; }
}
@media (max-width:640px){
  .bt-day{ min-height:54px; padding:4px 4px; border-radius:7px; }
  .bt-day b{ font-size:0.74rem; }
  .bt-day i{ display:none; }
  .bt-grid-cal, .bt-dow{ gap:3px; }
  .bt-cal-nav h3{ min-width:0; font-size:1.05rem; }
}
@media (max-width:480px){
  .bt-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bt-btns .btn{ flex:1 1 calc(50% - 8px); }
  .bt-lrow{ flex-wrap:wrap; }
  .bt-sheet{ padding:18px 14px 14px; }
}
/* ---------- Deep Dive: the opposing team's card (see snippet-oppcard.js) ---------- */
.opp-card{ display:block; }
.opp-head{ display:flex; align-items:center; gap:10px; margin:0 0 6px; } .opp-head > div{ min-width:0; }
.opp-head img, .opp-head .team-badge, .opp-head .nhl-logo{ flex:none; }
.opp-head b{ display:block; font-family:'Oswald',sans-serif; font-size:1.08rem; line-height:1.15; } .opp-head small{ display:block; color:var(--text-muted); font-size:.74rem; }
.opp-q{ margin:0 0 8px; font-size:.84rem; line-height:1.45; color:var(--text); }
.opp-legend{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:0 0 10px; font-size:.7rem; font-weight:600; color:var(--text-muted); }
.opp-legend span{ display:inline-flex; align-items:center; gap:5px; } .opp-legend i{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.opp-legend i.g{ background:var(--good); } .opp-legend i.r{ background:var(--danger); } .opp-legend i.m{ background:var(--text-muted); opacity:.65; }
.opp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; }
.opp-grid-info{ grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); }
.opp-sub{ margin:14px 0 6px; font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
.opp-t{ --c:var(--text-muted); --bg:5%; position:relative; padding:8px 10px 11px; border-radius:12px; border:1px solid color-mix(in srgb, var(--c) 55%, var(--border)); background:color-mix(in srgb, var(--c) var(--bg), var(--surface-2)); overflow:hidden; text-align:left; }
.opp-t.hi{ --c:var(--good); --bg:22%; } .opp-t.lo{ --c:var(--danger); --bg:22%; }
.opp-t::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c); opacity:.9; }
.opp-t.mid::before, .opp-t.na::before{ opacity:.3; }
.opp-t em{ display:block; font-style:normal; font-size:.56rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c); margin:0 0 3px 2px; }
.opp-t.mid em{ color:var(--text-muted); }
.opp-t small{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.04em; color:var(--text-muted); margin-left:2px; }
.opp-t b{ display:block; font-family:'Oswald',sans-serif; font-size:1.35rem; line-height:1.15; margin:1px 0 1px 2px; color:var(--text); }
.opp-t.hi b{ color:var(--good); } .opp-t.lo b{ color:var(--danger); }
.opp-t i{ display:block; font-style:normal; font-size:.7rem; color:var(--text-muted); margin-left:2px; }
.opp-t.na{ padding-top:10px; } .opp-t.na b{ font-size:1.12rem; }
.opp-t.cur{ outline:2px solid var(--accent); outline-offset:1px; }
.opp-bar{ display:block; position:relative; height:5px; margin:7px 2px 0; border-radius:3px; background:linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--text-muted) 60%, var(--surface-2)) 50%, var(--good)); opacity:.9; }
.opp-bar u{ position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--text); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border); }
.opp-notes{ margin-top:10px; font-size:.78rem; color:var(--text-muted); display:flex; flex-direction:column; gap:3px; } .opp-notes b{ color:var(--text); }
@media (max-width:560px){ .opp-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .opp-grid-info{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .opp-t b{ font-size:1.2rem; } }
/* ---------- phones: denser layout so more information fits on screen (<=640px; desktop is untouched) ----------
   Measured on the live site at 375px: header 191px -> 131px and pages 14-29% shorter, with the same content.
   Loaded last so it wins over the older per-page rules. Text inputs stay 16px: below that iOS zooms the page when a box is focused. */
@media (max-width:640px){
  html{ font-size:14px; }                       /* every rem-sized size, padding and gap scales down ~12% */
  body{ line-height:1.4; }
  main{ padding:10px 8px 56px !important; }
  .panel{ padding:11px !important; margin-bottom:11px !important; border-radius:12px !important; }
  .panel-head{ margin-bottom:7px !important; gap:6px !important; }
  .hint{ font-size:0.78rem !important; margin:2px 0 8px !important; line-height:1.38 !important; }
  h1:not(#cb-fit h1):not(.th h1){ font-size:1.5rem !important; } h2{ font-size:1rem !important; } h3{ font-size:0.95rem !important; }
  table th, table td{ padding-top:5px !important; padding-bottom:5px !important; }
  /* header: logo and the Start Free / trial pill share the first row, section tabs next, search last */
  header.topbar{ padding:6px 10px !important; gap:6px 8px !important; }
  header.topbar .brand{ order:1; } header.topbar .brand img{ height:34px !important; width:auto !important; }
  header.topbar .topbar-right{ order:2; margin-left:auto; }
  header.topbar nav.tabs{ order:3; flex:1 1 100%; width:100%; }
  header.topbar nav.tabs button{ padding:7px 11px !important; font-size:0.78rem !important; }
  header.topbar .site-search{ order:4; flex:1 1 100%; width:100%; }
  header.topbar .site-search input{ width:100% !important; height:34px; }
  nav.subtabs{ padding:6px 10px !important; } nav.subtabs button{ padding:6px 11px !important; }
  input, select, textarea{ font-size:16px !important; }

  /* sub-tabs: one swipeable row instead of three or four wrapped lines (the active tab is scrolled into view) */
  nav.subtabs:not(.sport-cats){ flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none; -webkit-overflow-scrolling:touch; gap:2px !important; padding:2px 10px 0 !important;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 22px), transparent); mask-image:linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 22px), transparent); }
  nav.subtabs:not(.sport-cats)::-webkit-scrollbar{ display:none; }
  nav.subtabs:not(.sport-cats) button{ flex:0 0 auto; white-space:nowrap; padding:11px 12px !important; }

  /* comfortable thumb targets */
  .btn, button.btn{ min-height:40px; }
  .toggle-group button, .cat-filters button{ min-height:36px; }
  select{ min-height:42px; }
  body{ padding-bottom:56px; }                                  /* keeps the last line clear of the live score ticker */

  /* NBA Player Props: each prop becomes a card instead of an 11-column table that runs off the screen */
  #view-nba-props .table-wrap{ overflow:visible !important; border:0 !important; }
  #view-nba-props table.nbp-table:not(.nbr-alt), #view-nba-props table.nbp-table:not(.nbr-alt) tbody{ display:block; width:100%; min-width:0 !important; }
  #view-nba-props table.nbp-table:not(.nbr-alt) thead{ display:none; }
  #view-nba-props tr.nbp-row{ display:grid; grid-template-columns:repeat(12, 1fr); gap:6px; padding:10px 8px; margin:0 0 8px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
  #view-nba-props tr.nbp-row.open{ border-color:var(--accent); border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; }
  #view-nba-props tr.nbp-row > td{ display:block; border:0 !important; padding:0 !important; text-align:left; white-space:normal; min-width:0; }
  #view-nba-props tr.nbp-row > td:nth-child(2), #view-nba-props tr.nbp-row > td:nth-child(11), #view-nba-props tr.nbp-row > td:nth-child(12), #view-nba-props tr.nbp-row > td:nth-child(13){ display:none !important; }
  #view-nba-props tr.nbp-row > td:nth-child(1){ grid-column:1 / -1; }
  #view-nba-props tr.nbp-row > td:nth-child(3), #view-nba-props tr.nbp-row > td:nth-child(4), #view-nba-props tr.nbp-row > td:nth-child(5), #view-nba-props tr.nbp-row > td:nth-child(6), #view-nba-props tr.nbp-row > td:nth-child(7), #view-nba-props tr.nbp-row > td:nth-child(8), #view-nba-props tr.nbp-row > td:nth-child(9){ display:block !important; text-align:center; background:rgba(0,0,0,.28); border-radius:9px; padding:6px 2px !important; }
  #view-nba-props tr.nbp-row > td:nth-child(3), #view-nba-props tr.nbp-row > td:nth-child(4), #view-nba-props tr.nbp-row > td:nth-child(5), #view-nba-props tr.nbp-row > td:nth-child(6){ grid-column:span 3; }
  #view-nba-props tr.nbp-row > td:nth-child(7), #view-nba-props tr.nbp-row > td:nth-child(8), #view-nba-props tr.nbp-row > td:nth-child(9){ grid-column:span 4; }
  #view-nba-props tr.nbp-row > td:nth-child(3)::before, #view-nba-props tr.nbp-row > td:nth-child(4)::before, #view-nba-props tr.nbp-row > td:nth-child(5)::before, #view-nba-props tr.nbp-row > td:nth-child(6)::before, #view-nba-props tr.nbp-row > td:nth-child(7)::before, #view-nba-props tr.nbp-row > td:nth-child(8)::before, #view-nba-props tr.nbp-row > td:nth-child(9)::before{ display:block; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; }
  #view-nba-props tr.nbp-row > td:nth-child(3)::before{ content:'Line'; } #view-nba-props tr.nbp-row > td:nth-child(4)::before{ content:'Over'; }
  #view-nba-props tr.nbp-row > td:nth-child(5)::before{ content:'Under'; } #view-nba-props tr.nbp-row > td:nth-child(6)::before{ content:'Our proj'; }
  #view-nba-props tr.nbp-row > td:nth-child(7)::before{ content:'Matchup'; } #view-nba-props tr.nbp-row > td:nth-child(8)::before{ content:'Volume'; } #view-nba-props tr.nbp-row > td:nth-child(9)::before{ content:'Injuries'; }
  #view-nba-props tr.nbp-row > td:nth-child(10){ display:block !important; grid-column:1 / span 9; }
  #view-nba-props tr.nbp-row > td:nth-child(14){ display:block !important; grid-column:span 3; text-align:right; align-self:center; }
  #view-nba-props tr.nbp-row > td:nth-child(14)::before{ content:'EV '; font-size:.62rem; color:var(--text-muted); }
  #view-nba-props tr.nbp-detail{ display:block; margin:0 0 8px; border:1px solid var(--accent); border-top:0; border-radius:0 0 12px 12px; background:var(--surface-2); }
  #view-nba-props tr.nbp-detail > td{ display:block; padding:8px !important; }
  #view-nba-props .nbp-dgrid{ grid-template-columns:1fr !important; }
  #view-nba-props .nbp-who{ min-width:0; }

  /* Season Predictor rows fit a 390px screen: smaller grip/inputs, tighter name column */
  .nbd-row{ gap:6px !important; padding:7px 6px !important; } .nbd-grip{ display:none !important; }
  .nbd-name{ min-width:0; } .nbd-name b{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; font-size:.86rem; line-height:1.15; display:block; }
  .nbd-wl{ gap:3px !important; } .nbd-wl input{ width:40px !important; padding:5px 1px !important; } .nbd-name small{ font-size:.66rem; white-space:normal; }
  .nbd-mv button{ min-width:34px; min-height:34px; }
}

/* ================= phone "app" layout (<=640px) =================
   A bottom tab bar replaces the top sport tabs, the page gets bigger type and thumb-sized controls, the live scores sit just above the bar,
   and everything respects the notch / home-indicator safe areas. Desktop and tablets keep the normal site. */
#appbar, #appsheet{ display:none; }
@media (max-width:640px){
  :root{ --ab-h:58px; --ab-safe:env(safe-area-inset-bottom, 0px); }
  html{ font-size:15px; }
  body{ line-height:1.5; padding-bottom:calc(var(--ab-h) + var(--ab-safe) + 36px) !important; overscroll-behavior-y:none; }
  main{ padding:10px 10px 18px !important; }
  /* header: just the logo, the account pill and search; the sections live in the bottom bar */
  header.topbar{ padding:calc(6px + env(safe-area-inset-top, 0px)) 12px 6px !important; position:sticky; top:0; z-index:40; }
  header.topbar nav.tabs{ display:none !important; }
  header.topbar .brand img{ height:32px !important; }
  header.topbar .site-search input{ height:40px; border-radius:12px; }
  header.topbar .site-search{ display:none !important; } body.ab-search header.topbar .site-search{ display:block !important; }   /* search lives under More; it slides open when asked for */
  /* Spread Score: one card per player instead of a 9-column table */
  #view-spreadscore .table-wrap{ overflow:visible !important; border:0 !important; }
  #view-spreadscore .ss-table, #view-spreadscore .ss-table tbody{ display:block; width:100%; min-width:0 !important; } #view-spreadscore .ss-table thead{ display:none; }
  #view-spreadscore .ss-table tr{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:12px; margin:0 0 10px; border:1px solid var(--border, rgba(255,255,255,.12)); border-radius:14px; background:var(--surface-2, rgba(255,255,255,.04)); }
  #view-spreadscore .ss-table td{ display:block; border:0 !important; padding:0 !important; white-space:normal !important; text-align:left; font-size:.82rem; color:var(--text-muted, #97a3b2); }
  #view-spreadscore .ss-table td:nth-child(1){ order:1; flex:0 0 26px; font-size:1.05rem; } #view-spreadscore .ss-table td:nth-child(2){ order:2; flex:1 1 calc(100% - 140px); color:inherit; } #view-spreadscore .ss-table td:nth-child(2) .clickable-name{ font-size:1.05rem; font-weight:700; }
  #view-spreadscore .ss-table td:nth-child(5){ order:3; flex:0 0 90px; text-align:right; } #view-spreadscore .ss-score{ font-size:1.55rem; }
  #view-spreadscore .ss-table td:nth-child(3){ order:4; margin-left:38px; } #view-spreadscore .ss-table td:nth-child(4){ order:5; } #view-spreadscore .ss-table td:nth-child(6){ order:6; } #view-spreadscore .ss-table td:nth-child(7){ order:7; } #view-spreadscore .ss-table td:nth-child(8){ order:8; }
  #view-spreadscore .ss-table td:nth-child(3)::before{ content:'vs '; } #view-spreadscore .ss-table td:nth-child(4)::before{ content:'Vegas '; } #view-spreadscore .ss-table td:nth-child(6)::before{ content:'Range '; } #view-spreadscore .ss-table td:nth-child(7)::before{ content:'Market '; } #view-spreadscore .ss-table td:nth-child(8)::before{ content:'Model '; }
  #view-spreadscore .ss-table td:nth-child(9){ order:9; flex:1 1 100%; padding-top:4px !important; } #view-spreadscore .ss-whys{ min-width:0; }
  /* bottom tab bar */
  #appbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; height:calc(var(--ab-h) + var(--ab-safe)); padding:0 4px var(--ab-safe);
    background:rgba(10,13,18,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--border, rgba(255,255,255,.12)); }
  #appbar button{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:none; border:0; color:var(--text-muted, #97a3b2); font:inherit; padding:6px 0 4px; cursor:pointer; position:relative; }
  #appbar .ab-ic{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; } #appbar .ab-ic svg{ width:24px; height:24px; } #appbar .ab-ic img{ width:24px; height:24px; object-fit:contain; opacity:.7; filter:grayscale(.4); }
  #appbar .ab-nhl{ filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) grayscale(.4) !important; }
  #appbar .ab-l{ font-size:.66rem; font-weight:700; letter-spacing:.02em; }
  #appbar button.on{ color:var(--accent, var(--accent)); } #appbar button.on .ab-ic img{ opacity:1; filter:none; } #appbar button.on .ab-nhl{ filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) !important; }
  #appbar button.on::before{ content:''; position:absolute; top:0; left:26%; right:26%; height:3px; border-radius:0 0 3px 3px; background:var(--accent, var(--accent)); }
  #appbar button:active{ background:rgba(255,255,255,.06); }
  /* live scores ride right above the bar */
  .score-ticker{ bottom:calc(var(--ab-h) + var(--ab-safe)) !important; height:32px !important; z-index:59 !important; border-top:1px solid var(--border, rgba(255,255,255,.12)); }
  .ticker-item, .ticker-sport{ height:32px !important; }
  .tour-wrap{ bottom:calc(var(--ab-h) + var(--ab-safe) + 40px) !important; }
  /* More sheet */
  #appsheet{ display:block; position:fixed; inset:0; z-index:80; visibility:hidden; pointer-events:none; }
  #appsheet.show{ visibility:visible; pointer-events:auto; }
  #appsheet .as-back{ position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .2s; } #appsheet.show .as-back{ opacity:1; }
  #appsheet .as-card{ position:absolute; left:0; right:0; bottom:0; max-height:82vh; overflow:auto; border-radius:20px 20px 0 0; background:var(--surface, #12161d); border-top:1px solid var(--border, rgba(255,255,255,.14));
    padding:8px 12px calc(14px + var(--ab-h) + var(--ab-safe)); transform:translateY(102%); transition:transform .24s ease; }
  #appsheet.show .as-card{ transform:none; }
  .as-grab{ width:40px; height:4px; border-radius:4px; background:rgba(255,255,255,.25); margin:4px auto 10px; }
  .as-row{ width:100%; display:flex; align-items:center; gap:14px; text-align:left; background:none; border:0; border-bottom:1px solid var(--border, rgba(255,255,255,.08)); color:inherit; font:inherit; padding:14px 6px; min-height:60px; }
  .as-row:last-child{ border-bottom:0; } .as-row:active{ background:rgba(255,255,255,.05); }
  .as-e{ font-size:1.35rem; width:34px; text-align:center; } .as-t{ flex:1; display:flex; flex-direction:column; } .as-t b{ font-size:1rem; } .as-t small{ color:var(--text-muted, #97a3b2); font-size:.8rem; margin-top:1px; }
  .as-go{ color:var(--text-muted, #97a3b2); font-size:1.4rem; }
  body.as-open{ overflow:hidden; }
  /* readable, tappable content */
  .panel{ padding:14px !important; border-radius:16px !important; margin-bottom:12px !important; }
  h2{ font-size:1.15rem !important; } h3{ font-size:1.02rem !important; }
  .hint{ font-size:.84rem !important; line-height:1.45 !important; }
  .btn, button.btn{ min-height:46px; font-size:.95rem; border-radius:12px; }
  .btn-row{ display:flex; flex-wrap:wrap; gap:8px; } .btn-row .btn{ flex:1 1 calc(50% - 8px); }
  .cat-filters, .toggle-group{ gap:6px !important; } .cat-filters button, .toggle-group button, .nsim-chip, .ss-chip{ min-height:42px !important; padding:8px 14px !important; font-size:.9rem !important; }
  nav.subtabs:not(.sport-cats) button{ padding:12px 14px !important; font-size:.92rem !important; }
  nav.subtabs.sport-cats button, nav.sport-cats-sims button{ padding:11px 16px !important; font-size:.95rem !important; }
  table td, table th{ font-size:.84rem; } .table-wrap{ border-radius:12px; }
  .feature-grid{ grid-template-columns:1fr !important; } .feature-card{ padding:14px !important; }
  .home-hero{ padding:20px 16px !important; border-radius:18px !important; }
  /* full-screen sheets (player profiles, sim shows) clear the home indicator */
  .modal-close{ top:calc(8px + env(safe-area-inset-top, 0px)); }
  .nfs-card{ padding-bottom:calc(10px + var(--ab-safe)); }
}
/* ---- Owner-only tabs: Members and Web Analytics ---- */
body.consumer-mode #tab-analytics, body.consumer-mode #view-analytics, body.consumer-mode #tab-members, body.consumer-mode #view-members{ display:none !important; }
nav.tabs button.owner-tab{ border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius:10px; }
nav.tabs button.owner-tab.active, nav.tabs button.owner-tab[aria-selected="true"]{ color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
/* ---- Web Analytics page ---- */
.wa-top{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:6px 0 14px; } .wa-live{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:.92rem; } .wa-live b{ font-family:'Oswald',sans-serif; font-size:1.2rem; color:var(--accent); }
.wa-dot{ width:10px; height:10px; border-radius:50%; background:#22d65a; box-shadow:0 0 0 0 rgba(34,214,90,.6); animation:waPulse 1.8s infinite; } @keyframes waPulse{ 70%{ box-shadow:0 0 0 9px rgba(34,214,90,0); } 100%{ box-shadow:0 0 0 0 rgba(34,214,90,0); } }
.wa-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; margin-bottom:16px; }
.wa-tile{ border:1px solid var(--border); border-radius:14px; background:var(--surface-2); padding:12px 14px; display:flex; flex-direction:column; gap:2px; } .wa-tile small{ font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .wa-tile b{ font-family:'Oswald',sans-serif; font-size:1.8rem; line-height:1.1; } .wa-tile span{ font-size:.76rem; color:var(--text-muted); }
.wa-tile.big{ border-color:var(--accent); background:linear-gradient(130deg, color-mix(in srgb, var(--accent) 14%, var(--surface-2)), var(--surface-2) 70%); } .wa-tile.hot b{ color:var(--accent); }
.wa-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:14px; } .wa-box{ border:1px solid var(--border); border-radius:16px; background:var(--surface-2); padding:14px 16px 16px; min-width:0; } .wa-box.wa-wide{ grid-column:1 / -1; } .wa-box.wa-eye{ border-color:color-mix(in srgb, var(--accent) 50%, var(--border)); }
.wa-box h3{ margin:0 0 10px; font-size:1rem; } .wa-box h3 small{ font-weight:500; color:var(--text-muted); font-size:.74rem; margin-left:6px; } .wa-box h4{ margin:14px 0 6px; font-size:.84rem; color:var(--text-muted); }
.wa-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; } .wa-bars li{ position:relative; display:grid; grid-template-columns:minmax(80px, 42%) 1fr auto; align-items:center; gap:8px; font-size:.86rem; } .wa-bars li i{ display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, #000), var(--accent)); } .wa-bars .wa-l{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wa-bars b{ font-family:'Oswald',sans-serif; } .wa-bars small{ grid-column:2 / -1; color:var(--text-muted); font-size:.7rem; margin-top:-5px; }
.wa-sp{ display:inline-block; padding:1px 6px; border-radius:6px; font-size:.62rem; font-weight:800; background:rgba(127,127,127,.25); margin-right:4px; } .wa-sp.nba{ background:#ff8a3d; color:#000; } .wa-sp.nfl{ background:#2ee66b; color:#000; } .wa-sp.nhl{ background:#4aa8ff; color:#000; }
.wa-chart{ width:100%; height:auto; display:block; } .wa-g{ stroke:var(--border); stroke-width:1; } .wa-t{ fill:var(--text-muted); font-size:10px; } .wa-pv{ fill:color-mix(in srgb, var(--accent) 55%, var(--surface-2)); } .wa-ss{ fill:var(--accent); }
.wa-leg{ display:flex; gap:16px; font-size:.8rem; color:var(--text-muted); margin-top:4px; } .wa-leg i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle; } .wa-leg i.pv{ background:color-mix(in srgb, var(--accent) 55%, var(--surface-2)); } .wa-leg i.ss{ background:var(--accent); }
.wa-hours{ display:flex; align-items:flex-end; gap:3px; height:150px; } .wa-hours > div{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; } .wa-hours i{ display:block; width:100%; border-radius:3px 3px 0 0; background:var(--accent); } .wa-hours span{ font-size:.6rem; color:var(--text-muted); height:10px; }
.wa-fun{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .wa-fun li{ display:grid; grid-template-columns:150px 1fr 56px 44px; align-items:center; gap:8px; font-size:.86rem; } .wa-fun i{ display:block; height:18px; border-radius:9px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, #000), var(--accent)); } .wa-fun b{ font-family:'Oswald',sans-serif; text-align:right; } .wa-fun small{ color:var(--text-muted); text-align:right; }
@media (max-width:640px){ .wa-grid{ grid-template-columns:1fr; } .wa-tiles{ grid-template-columns:repeat(2, 1fr); } .wa-fun li{ grid-template-columns:110px 1fr 44px 38px; } .wa-live{ margin-left:0; width:100%; } }

/* campaign links table */
.wa-src{ width:100%; border-collapse:collapse; font-size:.88rem; }
.wa-src th, .wa-src td{ text-align:right; padding:6px 8px; border-bottom:1px solid var(--border, rgba(255,255,255,.1)); }
.wa-src th:first-child, .wa-src td:first-child{ text-align:left; word-break:break-word; }
.wa-src th{ color:var(--text-muted); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
/* ---- Smooth long tables (snippet-smooth.js) ---- */
.sm-more{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; padding:14px 0 6px; }
.sm-more .hint{ margin:0; }
tr[hidden]{ display:none !important; }
/* page changes feel instant: the existing fade is 0.3 s, shorten it */
.view.active{ animation-duration:.14s; }
@media (prefers-reduced-motion:reduce){ .view.active{ animation:none; } }
/* ---- Click any player name (snippet-playerlinks.js) ---- */
.pl-hint{ cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.pl-hint:hover{ color:var(--accent); }
.pm-tab-locked{ opacity:.75; }

.tdr-name b, .tdr-id b, .rkc-name{ cursor:pointer; } .tdr-name b:hover, .tdr-id b:hover{ color:var(--accent); text-decoration:underline dotted; text-underline-offset:3px; }
/* ---- Save chart as image (snippet-chartexport.js) ---- */
.cx-bar{ display:flex; justify-content:flex-end; margin:2px 0 8px; }
.cx-btn{ font:700 .72rem 'Oswald',sans-serif; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); cursor:pointer; }
.cx-btn:hover{ color:var(--accent); border-color:var(--accent); }
.cx-btn:disabled{ opacity:.7; cursor:default; }
/* ---- Screenshot cards (snippet-shot.js) ---- */
.shot-host{ position:relative; }
.shot-btn{ position:absolute; top:10px; right:10px; z-index:6; width:36px; height:36px; padding:0; border-radius:50%; border:1px solid var(--border); background:color-mix(in srgb, var(--surface-2) 90%, transparent); color:var(--text); font-size:1rem; line-height:1; cursor:pointer; opacity:.78; display:flex; align-items:center; justify-content:center; }
.shot-btn:hover{ opacity:1; border-color:var(--accent); } .shot-btn:disabled{ cursor:default; }
.shot-brand{ display:none; }
.shot-mode .shot-brand{ display:flex; align-items:center; gap:14px; padding:14px 20px; background:#05080b; color:#fff; }
.shot-mode .shot-top{ border-bottom:3px solid #22e65a; margin:-1px -1px 14px; } .shot-mode .shot-top img{ height:54px; width:auto; } .shot-mode .shot-top span{ margin-left:auto; font:800 1.5rem 'Oswald',sans-serif; letter-spacing:.02em; text-transform:uppercase; text-align:right; }
.shot-mode .shot-bot{ border-top:3px solid #22e65a; margin:14px -1px -1px; flex-wrap:wrap; gap:2px 14px; } .shot-mode .shot-bot b{ font:700 1.3rem 'Oswald',sans-serif; } .shot-mode .shot-bot span{ color:#9aa6b2; font-size:.8rem; } .shot-mode .shot-bot i{ margin-left:auto; font-style:normal; color:#9aa6b2; font-size:.8rem; }
.shot-mode .shot-btn, .shot-mode .cx-bar, .shot-mode .gdd-list, .shot-mode .dd-search, .shot-mode .pv-banner, .shot-mode .modal-close, .shot-mode .star-strip .star-head span{ display:none !important; }
.shot-mode *, .shot-mode *::before, .shot-mode *::after{ animation:none !important; transition:none !important; }

/* long panels are cropped to their top with a soft fade into the footer */
.shot-mode .shot-clip{ position:relative; overflow:hidden; }
.shot-mode .shot-clip::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:36px; background:linear-gradient(0deg, var(--surface, #0D1117), transparent); pointer-events:none; }/* the picture shows content, not controls */
.shot-mode .nhl-dates, .shot-mode .nbp-games, .shot-mode .nsim-chips, .shot-mode .gdd, .shot-mode .cat-filters, .shot-mode .nhl-ctl, .shot-mode .fmt-toggle, .shot-mode .toggle-group, .shot-mode details.nbr-how, .shot-mode .subtabs, .shot-mode select{ display:none !important; }
.shot-mode .hint.pl-clamp{ display:block !important; -webkit-line-clamp:unset !important; overflow:visible !important; } .shot-mode .hint.pl-clamp::after{ content:none !important; }

.shot-mode .shot-bot{ justify-content:space-between; } .shot-mode .shot-bot b{ order:1; } .shot-mode .shot-bot i{ order:2; margin-left:0 !important; } .shot-mode .shot-bot span{ order:3; flex-basis:100%; }
.shot-mode .shot-target > .panel-head h2:first-child, .shot-mode .shot-target .panel-head > div > h2:first-child{ display:none; }

/* ---- profile card (1080 px wide at 2x): built off-screen from the open profile ---- */
.shot-prof{ position:fixed; left:0; top:0; width:540px; z-index:-1; pointer-events:none; background:#0a0d12; color:#fff; font-family:Inter, system-ui, sans-serif; overflow:hidden; }
.shot-prof .sp-top{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:#05080b; border-bottom:3px solid #22e65a; }
.shot-prof .sp-top img{ height:44px; width:auto; } .shot-prof .sp-top span{ font:800 1.05rem 'Oswald',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#22e65a; }
.shot-prof .pm-head{ margin:0 !important; border-radius:0 !important; padding:18px 18px 16px 150px !important; min-height:170px !important; }
.shot-prof .pm-head-photo{ left:18px !important; width:112px !important; }
.shot-prof .sp-body{ padding:14px 14px 4px; display:flex; flex-direction:column; gap:12px; }
.shot-prof .nlab-pickc, .shot-prof .nlab-box{ margin:0 !important; width:auto !important; }
.shot-prof .nlab-box{ padding:12px 12px 14px; } .shot-prof .nlab-box .nlab-h3{ font-size:1rem; }
.shot-prof .nlab-sum{ display:grid !important; grid-template-columns:repeat(5, 1fr) !important; gap:6px; } .shot-prof .nlab-sum > div{ grid-column:auto !important; padding:8px 4px !important; } .shot-prof .nlab-sum b{ font-size:1.05rem !important; }
.shot-prof .nlab-pk-n{ grid-template-columns:repeat(4, 1fr) !important; }
.shot-prof .sp-clip{ max-height:760px; overflow:hidden; }
.shot-prof .sp-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 12px; padding:14px 18px 16px; margin-top:10px; background:#05080b; border-top:3px solid #22e65a; }
.shot-prof .sp-foot b{ font:700 1.25rem 'Oswald',sans-serif; } .shot-prof .sp-foot i{ font-style:normal; color:#9aa6b2; font-size:.8rem; } .shot-prof .sp-foot span{ flex-basis:100%; color:#9aa6b2; font-size:.8rem; }

.shot-prof .nph-svg{ width:100%; height:auto; max-height:330px; } .shot-prof .nlab-pickc{ padding:12px 14px; }

/* ---- Phone readability pass: stats and analytics you can read (and screenshot) on a phone ---- */
@media (max-width:640px){
  /* long intros take a screen of their own: two lines, the rest is in Help */
  .dd-intro > div:last-child{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .dd-search.big .dds-in{ font-size:1rem; }

  /* NFL Props Edge: the 13-column table becomes one card per player (rating + name on top, then labeled stat tiles) */
  #view-props .prop-table-wrap{ overflow:visible; }
  #view-props .prop-table, #view-props .prop-table tbody{ display:block; width:100%; min-width:0 !important; }
  #view-props .prop-table thead{ display:none; }
  #view-props .prop-table tr.data-row{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; padding:12px; margin:0 0 12px; border:1px solid var(--border); border-radius:16px; background:var(--surface-2); }
  #view-props .prop-table tr.data-row > td{ display:block; padding:0; border:0; min-width:0; text-align:left; background:transparent !important; }
  #view-props .prop-table tr.data-row > td:nth-child(1){ grid-column:1; grid-row:1 / span 2; align-self:center; }
  #view-props .prop-table tr.data-row > td:nth-child(3){ grid-column:2 / 5; grid-row:1; }
  #view-props .prop-table tr.data-row > td:nth-child(2){ grid-column:2; grid-row:2; align-self:center; }
  #view-props .prop-table tr.data-row > td:nth-child(12){ grid-column:3 / 5; grid-row:2; align-self:center; }
  #view-props .prop-table tr.data-row > td:nth-child(7){ grid-column:1 / 5; order:-1; }   /* the live line leads, then the tiles pack two to a row */
  #view-props .prop-table tr.data-row > td:nth-child(n+4):nth-child(-n+6), #view-props .prop-table tr.data-row > td:nth-child(n+8):nth-child(-n+11), #view-props .prop-table tr.data-row > td:nth-child(13){ grid-column:span 2; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.055) !important; }
  #view-props .prop-table tr.data-row > td:nth-child(14){ grid-column:1 / 5; }
  #view-props .prop-table tr.data-row > td:nth-child(14) .btn{ width:100%; padding:10px 12px !important; font-size:.8rem !important; }
  #view-props .prop-table tr.data-row > td:nth-child(n+4):nth-child(-n+11)::before, #view-props .prop-table tr.data-row > td:nth-child(13)::before{ display:block; margin-bottom:3px; font:700 .62rem 'Oswald',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
  #view-props .prop-table tr.data-row > td:nth-child(4)::before{ content:'Matchup'; } #view-props .prop-table tr.data-row > td:nth-child(5)::before{ content:'Usage'; }
  #view-props .prop-table tr.data-row > td:nth-child(6)::before{ content:'Injury'; } #view-props .prop-table tr.data-row > td:nth-child(7)::before{ content:'Market line'; }
  #view-props .prop-table tr.data-row > td:nth-child(8)::before{ content:'2026 avg'; } #view-props .prop-table tr.data-row > td:nth-child(9)::before{ content:'Trend'; }
  #view-props .prop-table tr.data-row > td:nth-child(10)::before{ content:'Environment'; } #view-props .prop-table tr.data-row > td:nth-child(11)::before{ content:'Score'; } #view-props .prop-table tr.data-row > td:nth-child(13)::before{ content:'Value'; }
  #view-props .prop-table tr.data-row > td:nth-child(7) > *{ white-space:normal; }
  #view-props .prop-table tr.chart-row{ display:block; margin:-4px 0 12px; } #view-props .prop-table tr.chart-row > td{ display:block; }
  #view-props .prop-table .rating-ring{ transform:scale(1.15); transform-origin:left center; }

  /* every other wide table: scrolls sideways and keeps the player name in view */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  .table-wrap table td:first-child, .table-wrap table th:first-child{ position:sticky; left:0; z-index:2; background:var(--surface, #12161d); }

  /* stat tiles and numbers: a notch bigger so a screenshot is readable at a glance */
  .stat-tile-value{ font-size:1.5rem; } .stat-tile-label{ font-size:.7rem; }
  .nlab-table td, .nlab-table th, .nbp-table td, .nbp-table th{ font-size:.86rem; }
}

@media (max-width:640px){
  /* quiet scrollbars on the sideways chip rows (they scroll by swipe), and a little air in the home hero */
  .nhl-dates, .cat-filters, .nbp-games, nav.subtabs, nav.tabs{ scrollbar-width:none; -ms-overflow-style:none; }
  .nhl-dates::-webkit-scrollbar, .cat-filters::-webkit-scrollbar, .nbp-games::-webkit-scrollbar, nav.subtabs::-webkit-scrollbar, nav.tabs::-webkit-scrollbar{ display:none; }
  .nbpr-detail{ display:none; }
  .home-hero-text > button, .home-hero-text > .hero-eyebrow, .home-hero-text > a{ margin-bottom:10px; }
  .home-hero-text h1{ margin-top:20px; }
}

@media (max-width:640px){
  /* Player Props cards: one calm surface (no black cells), derived combined markets show only line + projection */
  #view-nba-props tr.nbp-row > td{ background:transparent !important; }
  #view-nba-props tr.nbp-row > td:nth-child(3), #view-nba-props tr.nbp-row > td:nth-child(4), #view-nba-props tr.nbp-row > td:nth-child(5), #view-nba-props tr.nbp-row > td:nth-child(6), #view-nba-props tr.nbp-row > td:nth-child(7), #view-nba-props tr.nbp-row > td:nth-child(8), #view-nba-props tr.nbp-row > td:nth-child(9){ background:rgba(255,255,255,.055) !important; padding:8px 2px !important; }
  #view-nba-props tr.nbp-row{ padding:12px 10px; gap:8px; margin-bottom:10px; border-radius:14px; }
  #view-nba-props tr.nbp-row.derived > td:nth-child(4), #view-nba-props tr.nbp-row.derived > td:nth-child(5), #view-nba-props tr.nbp-row.derived > td:nth-child(7), #view-nba-props tr.nbp-row.derived > td:nth-child(8){ display:none !important; }
  #view-nba-props tr.nbp-row.derived > td:nth-child(3), #view-nba-props tr.nbp-row.derived > td:nth-child(6), #view-nba-props tr.nbp-row.derived > td:nth-child(9){ grid-column:span 4; }
  #view-nba-props tr.nbp-row > td.noev{ visibility:hidden; }
  #view-nba-props .nbp-who{ min-width:0; }
}
@media (max-width:640px){ #view-nba-props tr.nbp-row.derived > td:nth-child(3)::before{ content:'Line (sum of parts)' !important; } }

@media (max-width:640px){
  /* the home hero keeps one pill and four buttons (the promos have their own cards further down) */
  .home-hero-text .hero-eyebrow.promo, .home-hero-text .giveaway-pill{ display:none !important; }
  .home-hero-text .btn-row .btn.secondary:nth-child(2){ display:none; }
  .home-hero-text .btn-row{ gap:10px; }
  .home-hero-text .btn-row .btn{ min-height:52px; }
  .home-hero-text .btn-row .btn.accent:first-child, .home-hero-text .btn-row .btn.gold-cta{ grid-column:1 / -1; }
}

.shot-host > .panel-head{ padding-right:50px; }
@media (max-width:640px){
  .hint.pl-clamp{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer; position:relative; }
  .hint.pl-clamp::after{ content:'more ▾'; position:absolute; right:0; bottom:0; padding-left:28px; background:linear-gradient(90deg, transparent, var(--surface, #0D1117) 40%); color:var(--accent); font-weight:700; font-size:.8rem; }
  .hint.pl-clamp.open{ display:block; -webkit-line-clamp:unset; overflow:visible; } .hint.pl-clamp.open::after{ content:none; }
}

/* ---- phones: Touchdown Research rows get a clean two-tier card (player + score on top, numbers below) ---- */
@media (max-width:640px){
  .tdr-head{ grid-template-columns:30px minmax(0,1fr) 70px 20px !important; grid-template-areas:'rk pl rate chev' 'mini mini mini mini' 'prob prob prob prob' !important; gap:10px 8px !important; padding:12px !important; align-items:center; }
  .tdr-pl{ min-width:0; } .tdr-name{ flex-wrap:wrap; gap:4px 6px; } .tdr-name b{ font-size:1.02rem; line-height:1.2; }
  .tdr-pl .rkc-chips{ flex-wrap:wrap; gap:5px; margin-top:6px; }
  .tdr-mini{ display:grid !important; grid-template-columns:repeat(3, 1fr); gap:8px; padding:10px; border-radius:12px; background:rgba(255,255,255,.05); }
  .tdr-mini > div{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; text-align:center; } .tdr-mini label{ font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); white-space:normal; line-height:1.15; } .tdr-mini b{ font-size:1.15rem; }
  .tdr-prob{ flex-direction:row !important; flex-wrap:wrap; align-items:baseline !important; justify-content:space-between; gap:2px 12px; text-align:left !important; padding-top:2px; border-top:1px solid var(--border); padding:10px 2px 0; }
  .tdr-prob b{ font-size:1.5rem !important; } .tdr-prob span{ order:2; margin-right:auto; } .tdr-prob em{ order:3; flex-basis:100%; white-space:normal; font-size:.76rem !important; }
  .tdr-gauge{ --s:52px; }
  /* Rankings / Tier cards and other multi-number rows: let numbers wrap instead of overlapping */
  .nba-mseg{ min-width:0; overflow-wrap:anywhere; } .nba-mseg b{ display:block; }
  #view-floorceiling .fc-card b, #view-floorceiling [class*="card"] > b{ white-space:normal; }
  .shot-btn{ top:8px; right:8px; width:32px; height:32px; font-size:.9rem; }
  .panel-head{ padding-right:44px; }
}

/* ---- phone: header never changes height or wraps (no jump when sign-in state arrives) and the hero reserves its note ---- */
@media (max-width:640px){
  .topbar-right{ flex-wrap:nowrap !important; gap:6px; flex:0 0 auto; }
  .topbar-right .owner-badge, #header-signout-btn{ display:none !important; }
  .topbar{ min-height:73px; }
  .home-hero-text .home-trial-note{ min-height:4.6em; }
}

/* reserve the space these fill in once the account state is known, so nothing below them moves */
@media (max-width:640px){
  .topbar-right .trial-pill{ min-height:42px; min-width:62px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
  .home-hero-text .home-trial-note{ min-height:56px; }
  .home-hero-text .btn-row .btn.accent:first-child{ min-height:90px; }
}
@media (max-width:640px){ #home-trial-note{ min-height:56px; display:block; } #home-cta{ min-height:90px; } .home-hero-text .btn-row{ min-height:204px; } }
/* ---- Phone: player profile + Deep Dive as clean, full-screen sheets ---- */
.nph-dash i{ display:inline-block; width:18px; border-top:2px dashed #ffc400; vertical-align:middle; margin-right:6px; }
.nph-val{ paint-order:stroke; stroke:var(--surface-2, #0D1117); stroke-width:3.5px; stroke-linejoin:round; }
.nlab-morelines{ display:none; }
@media (max-width:760px){
  /* the profile fills the screen (no side strips), its tab bar stays pinned while you scroll */
  #pl-modal.modal-backdrop{ padding:0; background:var(--surface, #000); align-items:stretch; }
  #pl-modal #pl-panel{ max-width:none !important; width:100%; min-height:100%; margin:0; border:0; border-radius:0; box-shadow:none; padding:0 14px calc(var(--ab-h, 58px) + 36px); }
  #pl-modal .pm-head{ margin:0 -14px; border-radius:0; padding:calc(env(safe-area-inset-top, 0px) + 16px) 14px 14px 112px; min-height:150px; }
  #pl-modal .pm-head-photo{ left:14px; width:84px; }
  #pl-modal .pm-head h2{ font-size:1.35rem; margin-bottom:6px; } #pl-modal .pm-head-bio{ gap:14px; margin-bottom:4px; }
  #pl-modal .pm-tabbar{ margin:0 -14px 14px; padding:0 8px; position:sticky; top:0; z-index:6; }
  #pl-modal .modal-close{ top:calc(env(safe-area-inset-top, 0px) + 12px); right:12px; width:36px; height:36px; font-size:1.1rem; }

  /* Deep Dive: header, one-row market chips, a compact control block */
  .nlab-card-w{ padding:14px 12px calc(var(--ab-h, 58px) + 30px); }
  .nlab-head{ padding-right:0; gap:8px; margin-bottom:8px; }
  .nlab-next{ flex-direction:row; align-items:baseline; justify-content:flex-start; gap:6px 10px; flex-wrap:wrap; width:100%; padding:8px 12px; border-radius:12px; }
  .nlab-next small::after{ content:':'; } .nlab-next b{ font-size:1.05rem; } .nlab-next span{ font-size:.82rem; }
  .nlab-bar, .nlab-modal .nlab-bar{ position:static; border:0; padding:0 0 6px; margin:0; gap:10px; }
  .nlab-chips{ flex-wrap:nowrap; overflow-x:auto; margin:0 -12px; padding:2px 12px 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity; }
  .nlab-chips::-webkit-scrollbar{ display:none; }
  .nlab-chips .nph-chip{ flex:0 0 auto; scroll-snap-align:start; min-height:42px; padding:6px 13px; font-size:.88rem; white-space:nowrap; }
  .nlab-tools{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; margin:0; }
  .nlab-tools .toggle-group{ display:flex; grid-column:1; } .nlab-tools .toggle-group button{ flex:1; min-height:46px; }
  .nlab-step{ order:0; grid-column:2; display:flex; width:100%; } .nlab-step button{ flex:0 0 46px; height:46px; } .nlab-step input{ flex:1; min-width:0; width:auto; height:46px; font-size:1.05rem; }
  .nlab-tools label.nbh-lab{ display:flex; flex-direction:column; gap:4px; margin:0; font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
  .nlab-tools label.nbh-lab select{ width:100%; min-height:46px; font-size:.95rem; text-transform:none; letter-spacing:0; color:var(--text); }

  /* one calm column, in reading order: chart, our pick, matchup, splits, lines, rating */
  .nlab-grid{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
  .nlab-main, .nlab-side{ display:contents; }
  .nlab-grid .sec-chart{ order:1; } .nlab-grid .nlab-pickc{ order:2; } .nlab-grid .sec-game{ order:3; } .nlab-grid .sec-match{ order:4; } .nlab-grid .sec-rate{ order:5; }
  .nlab-grid .sec-splits{ order:6; } .nlab-grid .sec-adv{ order:7; } .nlab-grid .sec-lines{ order:8; } .nlab-grid .sec-lineup{ order:9; }
  .nlab-box{ padding:14px 12px 16px; border-radius:16px; }
  .nlab-box .nlab-h3{ font-size:1.02rem; margin:0 0 10px; } .nlab-h3 small{ display:block; margin:2px 0 0; font-size:.78rem; }
  .nlab-page .nph-svg{ margin:0 -2px; }
  .nph-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.8rem; margin-top:4px; }

  /* the numbers under the chart: one big hit-rate tile, then a tidy 2 x 2 */
  .nlab-sum{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
  .nlab-sum > div{ min-width:0; padding:10px 8px; border:0; border-radius:12px; background:rgba(255,255,255,.055); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
  .nlab-sum > div:first-child{ grid-column:1 / -1; } .nlab-sum b{ font-size:1.3rem; line-height:1.15; }
  .nlab-pk-n > div{ background:rgba(255,255,255,.055); border:0; padding:9px 6px; }
  .nlab-pickc{ padding:14px 12px; }
  .nlab-mus{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
  .nlab-mu{ padding:8px 4px; } .nlab-mu b{ font-size:1.05rem; } .nlab-mu i{ font-size:.68rem; }

  /* tables: no sideways scrolling, only the columns that matter */
  .nlab-box .table-wrap{ overflow:visible; margin:0 -4px; }
  .nlab-split, .nlab-lines, .nlab-box table.nbp-table{ min-width:0 !important; width:100%; table-layout:auto; }
  .nlab-split th, .nlab-split td, .nlab-lines th, .nlab-lines td, .nlab-box table.nbp-table th, .nlab-box table.nbp-table td{ padding:9px 6px; font-size:.86rem; white-space:normal; }
  .nlab-split th:nth-child(n+5), .nlab-split td:nth-child(n+5){ display:none; }
  .nlab-split td:first-child{ width:46%; line-height:1.25; }
  .nlab-lines th:nth-child(n+5), .nlab-lines td:nth-child(n+5){ display:none; }
  .nlab-lines td small, .nlab-box table.nbp-table td small{ display:block; font-size:.68rem; color:var(--text-muted); font-weight:500; }
  .nlab-lines:not(.all) tr.far{ display:none; }
  .nlab-pill{ padding:3px 8px; font-size:.82rem; } .nlab-pill i{ font-size:.72rem; }
  .nlab-morelines{ display:block; width:100%; margin-top:10px; }
  .nlab-part{ grid-template-columns:92px 1fr 42px; }
  .nlab-act{ flex-direction:column; } .nlab-act .btn{ width:100%; }
  .nhl-fine{ font-size:.74rem; line-height:1.5; margin-top:14px; }
  .nlab-pickc{ align-self:stretch; width:100%; }
  .nlab-page.profile .nlab-chips{ margin:0 -14px; padding:2px 14px 6px; }
  /* one calm surface inside the cards (no black cells, no pinned first column) */
  .nlab-box .table-wrap table td:first-child, .nlab-box .table-wrap table th:first-child{ position:static; background:transparent; }
  .nlab-box table th, .nlab-box table td{ background:transparent; border-color:var(--border); }
  .nlab-box table thead th{ position:static !important; border-bottom:1px solid var(--border); font-size:.74rem; }
  .nlab-box table .nlab-grp td{ background:rgba(255,255,255,.055) !important; }
  .nlab-box table tr.nlab-cur td, .nlab-box .table-wrap table tr.nlab-cur td:first-child{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
}
#pl-panel > .shot-btn{ right:56px; top:12px; }
/* ---- NBA Hot Zones (profile tab + Creator Studio) ---- */
.hz-host{ display:block; }
.hz-tools{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.hz-tools .cat-filters{ margin:0; flex-wrap:wrap; }
.hz-tools .cat-filters button small{ opacity:.65; margin-left:3px; font-weight:600; }
.hz-body{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:start; }
.hz-chart{ min-width:0; }
.hz-svg{ display:block; width:100%; height:auto; border-radius:14px; }
.hz-p{ fill:#fff; font:700 14px 'Oswald',sans-serif; paint-order:stroke; stroke:rgba(8,12,18,.65); stroke-width:2.4px; stroke-linejoin:round; }
.hz-n{ fill:rgba(255,255,255,.92); font:600 9.5px 'Inter',sans-serif; paint-order:stroke; stroke:rgba(8,12,18,.6); stroke-width:2px; stroke-linejoin:round; }
.hz-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; font-size:.78rem; color:var(--text-muted); }
.hz-legend .hz-lg-t{ flex:1 1 100%; }
.hz-bar{ flex:1 1 100%; height:9px; border-radius:6px; background:linear-gradient(90deg, rgb(56,128,242), rgb(58,68,90), rgb(244,102,34)); }
.hz-lg-e{ flex:1 1 100%; display:flex; justify-content:space-between; margin-top:-4px; }
.hz-lg-e b{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.hz-dot{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:6px; vertical-align:-1px; }
.hz-dot.made{ background:#3ecf8e; } .hz-dot.miss{ width:auto; height:auto; background:none; color:#ef6a5b; font-style:normal; font-weight:700; margin-right:5px; }
.hz-side{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.hz-tiles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.hz-tiles > div{ padding:10px 10px 9px; border-radius:12px; background:var(--surface-2, rgba(255,255,255,.05)); border:1px solid var(--border); }
.hz-tiles small, .hz-co small{ display:block; font:700 .62rem 'Oswald',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
.hz-tiles b{ font:700 1.35rem 'Oswald',sans-serif; line-height:1.15; }
.hz-mixrow{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.hz-mix{ padding:9px 10px; border-radius:12px; border:1px solid var(--border); display:flex; flex-direction:column; gap:1px; }
.hz-mix span{ font-size:.72rem; color:var(--text-muted); } .hz-mix b{ font:700 1.2rem 'Oswald',sans-serif; } .hz-mix small{ font-size:.72rem; color:var(--text-muted); }
.hz-callouts{ display:grid; gap:8px; }
.hz-co{ padding:11px 13px; border-radius:12px; border:1px solid var(--border); border-left-width:4px; display:flex; flex-direction:column; gap:1px; }
.hz-co.hot{ border-left-color:rgb(240,100,44); } .hz-co.cold{ border-left-color:rgb(61,123,217); }
.hz-co b{ font:700 1.05rem 'Oswald',sans-serif; } .hz-co span{ font-size:.8rem; color:var(--text-muted); }
.hz-foot{ margin-top:12px; }
@media (max-width:760px){
  .hz-body{ grid-template-columns:minmax(0,1fr); }
  .hz-tiles, .hz-mixrow{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* ---- Creator Studio (owner only) ---- */
body.consumer-mode #tab-creator, body.consumer-mode #view-creator, body.consumer-mode .cr-stage-btn{ display:none !important; }
nav.tabs button#tab-creator{ border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius:10px; }
nav.tabs button#tab-creator.active, nav.tabs button#tab-creator[aria-selected="true"]{ color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }

/* shared menu bar (on the Creator page and on the Start/Sit Studio + Waiver Graphic pages) */
.cr-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; padding:8px 10px; border:1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:14px; background:color-mix(in srgb, var(--accent) 5%, transparent); }
.cr-nav-t{ font:700 .9rem 'Oswald',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-right:6px; }
.cr-nav button{ padding:8px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2, transparent); color:var(--text); font-weight:600; font-size:.88rem; cursor:pointer; }
.cr-nav button:hover{ border-color:var(--accent); }
.cr-nav button.on{ background:var(--accent); border-color:var(--accent); color:#04130a; }

.cr-page .panel-head{ flex-wrap:wrap; gap:8px; }
.cr-h{ margin:22px 0 10px; font:700 1rem 'Oswald',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
.cr-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px; }
.cr-card{ display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid var(--border); border-radius:16px; background:var(--surface-2, rgba(255,255,255,.04)); }
.cr-card .cr-ce{ font-size:1.8rem; line-height:1; }
.cr-card .cr-cb{ flex:1; } .cr-card b{ display:block; font-size:1.05rem; margin-bottom:4px; } .cr-card p{ margin:0; font-size:.84rem; color:var(--text-muted); line-height:1.45; }
.cr-card .btn{ align-self:flex-start; }
#cr-toast{ position:fixed; left:50%; bottom:84px; transform:translate(-50%, 20px); max-width:min(92vw, 520px); padding:12px 18px; border-radius:12px; background:#0f1620; color:#f2f6fb; border:1px solid var(--accent); box-shadow:0 10px 30px rgba(0,0,0,.45); font-size:.9rem; z-index:10000; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
#cr-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* profile button */
.cr-stage-btn{ position:absolute; top:12px; right:64px; z-index:5; padding:7px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.35); color:#fff; font-weight:700; font-size:.8rem; cursor:pointer; backdrop-filter:blur(6px); }
.cr-stage-btn:hover{ background:var(--accent); color:#04130a; border-color:var(--accent); }

/* board controls */
.cr-pick{ display:grid; gap:10px; margin-bottom:14px; }
.cr-search{ position:relative; max-width:460px; }
.cr-search input{ width:100%; box-sizing:border-box; padding:11px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2, #141b25); color:var(--text); font-size:1rem; }
.cr-sug{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; display:grid; padding:6px; border-radius:12px; border:1px solid var(--border); background:var(--surface, #12161d); box-shadow:0 14px 34px rgba(0,0,0,.4); }
.cr-sug[hidden]{ display:none; }
.cr-sug button{ display:flex; align-items:center; gap:10px; padding:7px 9px; border:0; border-radius:8px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.cr-sug button:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
.cr-sug small, .cr-chip small{ color:var(--text-muted); margin-left:auto; font-size:.74rem; }
.cr-row{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; } .cr-row > small{ font:700 .7rem 'Oswald',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); margin-right:4px; }
.cr-chip{ display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 5px; border-radius:99px; border:1px solid var(--border); background:var(--surface-2, transparent); color:var(--text); font-size:.82rem; font-weight:600; cursor:pointer; }
.cr-chip:hover{ border-color:var(--accent); } .cr-chip.on{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
.cr-chip-hs{ width:26px; height:26px; border-radius:50%; object-fit:cover; background:#222; flex:none; }
.cr-empty{ padding:40px 14px; }
.cr-ctl{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cr-slides{ display:flex; flex-wrap:wrap; gap:6px; }
.cr-slides button{ padding:8px 13px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2, transparent); color:var(--text); font-size:.84rem; font-weight:600; cursor:pointer; }
.cr-slides button.on{ background:var(--accent); border-color:var(--accent); color:#04130a; }
.cr-opts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cr-host{ width:100%; display:flex; justify-content:center; background:#05070a; border:1px solid var(--border); border-radius:14px; padding:10px; box-sizing:border-box; overflow:hidden; }
.cb-outer{ position:relative; overflow:hidden; border-radius:12px; flex:none; } .cb-fit{ position:absolute; left:0; top:0; }
.cr-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
.cr-bar select{ background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px; }
.cr-notes{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:6px; }
.cr-notes h4{ margin:0 0 8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; font-size:.9rem; }
.cr-notes ul{ margin:0; padding-left:18px; display:grid; gap:6px; font-size:.9rem; line-height:1.45; }
.cr-notes textarea{ width:100%; box-sizing:border-box; background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px; font:inherit; font-size:.85rem; resize:vertical; }

/* present (full screen) */
#view-creator.cr-presenting .cr-page{ position:fixed; inset:0; z-index:9998; margin:0; padding:0; border:0; border-radius:0; background:radial-gradient(1200px 700px at 50% 0%, #0d1520, #05070a); display:flex; flex-direction:column; align-items:center; overflow:hidden; }
#view-creator.cr-presenting .panel-head, #view-creator.cr-presenting .cr-pick, #view-creator.cr-presenting .cr-ctl, #view-creator.cr-presenting .cr-bar, #view-creator.cr-presenting .cr-notes, #view-creator.cr-presenting > .cr-nav{ display:none; }
#view-creator.cr-presenting #cr-root{ width:100%; display:flex; justify-content:center; }
#view-creator.cr-presenting .cr-host{ border:0; background:transparent; padding:52px 0 0; }
#cr-pbar{ position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:10001; display:flex; gap:8px; align-items:center; padding:6px 10px; border-radius:14px; background:rgba(15,22,32,.92); border:1px solid #2a3646; color:#f2f6fb; opacity:.35; transition:opacity .2s; }
#cr-pbar:hover{ opacity:1; } #cr-pbar button{ padding:6px 12px; border-radius:8px; border:1px solid #2a3646; background:#141b25; color:#f2f6fb; cursor:pointer; font-weight:700; } #cr-pbar span{ font-size:.82rem; padding:0 6px; }
@media (max-width:760px){ .cr-notes{ grid-template-columns:1fr; } .cr-nav-t{ flex:1 1 100%; } }

/* ================= the stage (fixed px, scaled by JS; exported to 1920x1080 / 1080x1920) ================= */
.cb-stage{ position:relative; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; color:#f2f6fb; font-family:Inter,sans-serif; background:#0a0e14; padding:14px 36px 12px;
  --text:#f2f6fb; --text-muted:#93a4b6; --border:#2a3646; --up:#2fd37a; --dn:#ff6a5e; --gold:#ffc233; --card:#101722; }
.cb-stage.tall{ padding:22px 32px 16px; }
.cb-stage *{ box-sizing:border-box; }
.cb-stage .cx-bar, .cb-stage .shot-btn, .cb-stage .cx-btn{ display:none !important; }
#view-creator > .cr-nav .cr-nav-t{ display:none; }
.cb-bg{ position:absolute; inset:0; z-index:0; background:radial-gradient(900px 430px at 6% -12%, color-mix(in srgb, var(--ta) 42%, transparent), transparent 70%), radial-gradient(820px 460px at 104% 112%, color-mix(in srgb, var(--tb) 30%, transparent), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 64px); }
.cb-stage > *:not(.cb-bg){ position:relative; z-index:1; }
.cb-top{ display:flex; align-items:center; gap:20px; height:58px; flex:none; }
.cb-brand img{ height:42px; width:auto; display:block; }
.cb-ttl{ flex:1; min-width:0; font:700 32px/1 'Oswald',sans-serif; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-ttl small{ display:block; margin-top:6px; font:600 12px/1 Inter,sans-serif; letter-spacing:.2em; color:var(--text-muted); }
.cb-count{ font:700 30px/1 'Oswald',sans-serif; color:#0a0e14; background:var(--accent); border-radius:12px; padding:8px 14px; } .cb-count small{ font-size:15px; opacity:.7; }
.cb-body{ flex:1; min-height:0; display:grid; gap:20px; margin-top:12px; }
.cb-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; flex:none; font:600 12px Inter,sans-serif; letter-spacing:.12em; color:#6f8196; text-transform:uppercase; }
.cb-foot span:nth-child(2){ font:700 20px 'Oswald',sans-serif; letter-spacing:.12em; color:var(--accent); }
.cb-sec{ font:700 13px/1 Inter,sans-serif; letter-spacing:.16em; color:var(--text-muted); margin-bottom:10px; }
.cb-empty{ padding:18px; border:1px dashed var(--border); border-radius:14px; color:var(--text-muted); font-size:18px; } .cb-empty.big{ display:grid; place-items:center; text-align:center; font-size:26px; padding:60px; align-self:center; }
.cb-chart{ border:1px solid var(--border); border-radius:16px; background:var(--card); padding:8px 10px 0; }
.cb-svg{ display:block; width:100%; height:auto; }
.cb-bv{ fill:#f2f6fb; font:700 17px 'Oswald',sans-serif; } .cb-bl{ fill:#c4d0dd; font:700 13px Inter,sans-serif; } .cb-bl2{ fill:#7f90a3; font:600 11px Inter,sans-serif; } .cb-avg{ fill:#ffc233; font:700 14px 'Oswald',sans-serif; letter-spacing:.06em; }
.cb-tile{ border:1px solid var(--border); border-radius:16px; background:var(--card); padding:12px 14px; display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; }
.cb-tile small{ font:700 13px/1 Inter,sans-serif; letter-spacing:.14em; color:var(--text-muted); } .cb-tile b{ font:700 58px/1 'Oswald',sans-serif; color:#fff; } .cb-tile em{ font:600 14px/1.2 Inter,sans-serif; font-style:normal; color:var(--text-muted); }
.cb-tile.sm b{ font-size:34px; } .cb-tile.big{ background:linear-gradient(160deg, color-mix(in srgb, var(--ta) 24%, var(--card)), var(--card) 75%); }
.up{ color:var(--up); font-weight:700; } .dn{ color:var(--dn); font-weight:700; }
.cb-inj{ padding:3px 10px; border-radius:99px; font:700 13px Inter,sans-serif; background:#ffc233; color:#1b1300; } .cb-inj.out{ background:#ff6a5e; color:#fff; } .cb-inj.doubt{ background:#ff9a3d; color:#1b1000; }
.cb-face{ object-fit:contain; } .cb-face.ph{ display:grid; place-items:center; width:120px; height:120px; border-radius:50%; background:#1d2836; font:700 40px Oswald,sans-serif; } .cb-face.big{ height:250px; width:auto; max-width:100%; } .cb-face.big.ph{ width:200px; height:200px; }
.cb-lg{ width:30px; height:30px; object-fit:contain; vertical-align:middle; } .cb-lg.sm{ width:26px; height:26px; margin:0 4px 0 2px; } .cb-lgbig{ width:150px; height:150px; object-fit:contain; } .cb-lgt{ font:700 14px Inter,sans-serif; }

/* slide 1: overview */
.cb-s-overview{ grid-template-columns:340px minmax(0,1fr); }
.cb-hero{ position:relative; display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:22px; border:1px solid var(--border); overflow:hidden; background:linear-gradient(165deg, color-mix(in srgb, var(--ta) 40%, #0f1620), #0f1620 72%); }
.cb-hshot{ position:relative; height:250px; display:flex; align-items:flex-end; justify-content:center; }
.cb-hlg{ position:absolute; right:-24px; top:-8px; opacity:.2; }
.cb-hinfo h2{ margin:0; font:700 36px/1.05 'Oswald',sans-serif; letter-spacing:.02em; }
.cb-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .cb-meta span:not(.cb-inj){ padding:3px 10px; border-radius:8px; background:rgba(255,255,255,.1); font:700 14px Inter,sans-serif; letter-spacing:.06em; }
.cb-bio{ margin-top:8px; font:600 14px Inter,sans-serif; color:var(--text-muted); }
.cb-next{ margin-top:auto; padding:12px 14px; border-radius:14px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:2px; }
.cb-next small{ font:700 12px Inter,sans-serif; letter-spacing:.16em; color:var(--text-muted); } .cb-next b{ font:700 26px 'Oswald',sans-serif; } .cb-next span{ font:600 13px Inter,sans-serif; color:#c4d0dd; }
.cb-ov-r{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.cb-tiles6{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:10px; } .cb-tiles6 .big{ height:108px; } .cb-tiles6 .big b{ font-size:54px; } .cb-tiles6.sm{ grid-template-columns:repeat(6, minmax(0,1fr)); } .cb-tiles6.sm .sm{ height:78px; } .cb-tiles6.sm .sm b{ font-size:30px; }
.cb-s-overview .cb-chart{ margin-top:0; }
.cb-stage.tall .cb-s-overview{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; gap:18px; }
.cb-stage.tall .cb-hero{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:18px; padding:16px 20px; }
.cb-stage.tall .cb-hshot{ height:210px; width:260px; flex:none; } .cb-stage.tall .cb-face.big{ height:210px; }
.cb-stage.tall .cb-hinfo{ flex:1; min-width:0; } .cb-stage.tall .cb-hinfo h2{ font-size:42px; }
.cb-stage.tall .cb-next{ flex:1 1 100%; margin-top:0; flex-direction:row; align-items:baseline; gap:12px; flex-wrap:wrap; }
.cb-stage.tall .cb-tiles6 .big{ height:140px; } .cb-stage.tall .cb-tiles6.sm .sm{ height:92px; } .cb-stage.tall .cb-tiles6 .big b{ font-size:62px; } .cb-stage.tall .cb-tiles6.sm .sm b{ font-size:34px; }
.cb-stage.tall .cb-tiles6.sm{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* slide 2: recent games */
.cb-s-games{ grid-template-columns:minmax(0,1fr) 440px; }
.cb-gl{ min-width:0; } .cb-gr{ min-width:0; display:flex; flex-direction:column; }
.cb-tbl{ width:100%; border-collapse:separate; border-spacing:0 5px; font:600 18px Inter,sans-serif; }
.cb-tbl th{ text-align:center; padding:0 6px 4px; font:700 12px Inter,sans-serif; letter-spacing:.14em; color:var(--text-muted); } .cb-tbl th:first-child, .cb-tbl th:nth-child(2){ text-align:left; }
.cb-tbl td{ text-align:center; padding:0 6px; height:46px; background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); white-space:nowrap; }
.cb-tbl td:first-child{ text-align:left; padding-left:12px; border-left:1px solid var(--border); border-radius:12px 0 0 12px; color:#c4d0dd; } .cb-tbl td:last-child{ border-right:1px solid var(--border); border-radius:0 12px 12px 0; }
.cb-tbl td.opp{ text-align:left; } .cb-tbl td small{ color:var(--text-muted); font-size:13px; font-weight:600; }
.cb-tbl td.n{ font:700 24px 'Oswald',sans-serif; } .cb-tbl td.hot{ color:var(--up); background:color-mix(in srgb, var(--up) 12%, var(--card)); } .cb-tbl td.cold{ color:var(--dn); background:color-mix(in srgb, var(--dn) 12%, var(--card)); }
.cb-tbl .w{ color:var(--up); font-weight:800; } .cb-tbl .l{ color:var(--dn); font-weight:800; }
.cb-tbl tr.sum td{ background:color-mix(in srgb, var(--ta) 22%, var(--card)); font-weight:800; } .cb-tbl tr.sum td:first-child{ color:#fff; letter-spacing:.06em; }
.cb-tiles3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px; } .cb-tiles3 .cb-tile{ height:104px; } .cb-tiles3 .cb-tile b{ font-size:40px; } .cb-tiles3.pj{ grid-template-columns:repeat(6, minmax(0,1fr)); margin-top:0; margin-bottom:12px; } .cb-tiles3.pj .cb-tile{ height:84px; padding:9px 12px; } .cb-tiles3.pj .cb-tile b{ font-size:36px; } .cb-tiles3.pj .cb-tile small{ font-size:11px; letter-spacing:.1em; }
.cb-stage.tall .cb-tiles3.pj{ grid-template-columns:repeat(3, minmax(0,1fr)); } .cb-stage.tall .cb-tiles3.pj .cb-tile{ height:92px; }
.cb-stage.tall .cb-s-games{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-content:start; gap:16px; } .cb-stage.tall .cb-tbl td{ height:48px; } .cb-stage.tall .cb-tbl{ font-size:18px; }

/* slide 3: hot zones */
.cb-s-zones{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start; }
.cb-zc{ min-width:0; } .cb-zc .hz-svg{ width:100%; max-height:470px; } .cb-zc .hz-legend{ font-size:13px; margin-top:8px; gap:4px 12px; color:var(--text-muted); } .cb-zc .hz-lg-t{ display:none; } .cb-zc .hz-lg-e b{ font-size:12px; } .cb-zc .hz-lg-e{ margin-top:0; }
.cb-zr{ min-width:0; display:flex; flex-direction:column; gap:10px; }
.cb-tiles4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; } .cb-tiles4 .cb-tile{ height:88px; padding:9px 10px; } .cb-tiles4 .cb-tile b{ font-size:32px; } .cb-tiles4 .cb-tile small{ font-size:11px; letter-spacing:.1em; } .cb-tiles4 .cb-tile em{ font-size:11px; }
.cb-mixrow{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.cb-mix{ padding:8px 14px; border:1px solid var(--border); border-radius:14px; background:var(--card); display:flex; flex-direction:column; } .cb-mix small{ font:700 12px Inter,sans-serif; letter-spacing:.14em; color:var(--text-muted); } .cb-mix b{ font:700 32px/1.1 'Oswald',sans-serif; } .cb-mix em{ font:600 14px Inter,sans-serif; font-style:normal; color:var(--text-muted); }
.cb-co{ padding:10px 16px; border:1px solid var(--border); border-left-width:6px; border-radius:14px; background:var(--card); display:flex; flex-direction:column; gap:2px; } .cb-co.hot{ border-left-color:rgb(240,100,44); } .cb-co.cold{ border-left-color:rgb(61,123,217); }
.cb-co small{ font:700 12px Inter,sans-serif; letter-spacing:.16em; color:var(--text-muted); } .cb-co b{ font:700 28px/1.1 'Oswald',sans-serif; } .cb-co span{ font:600 14px Inter,sans-serif; color:#c4d0dd; }
.cb-stage.tall .cb-s-zones{ grid-template-columns:minmax(0,1fr); align-content:start; gap:14px; } .cb-stage.tall .cb-zc .hz-svg{ max-height:none; } .cb-stage.tall .cb-tiles4 .cb-tile{ height:96px; } .cb-stage.tall .cb-tiles4 .cb-tile b{ font-size:38px; } .cb-stage.tall .cb-mixrow{ grid-template-columns:repeat(4, minmax(0,1fr)); } .cb-stage.tall .cb-mix b{ font-size:30px; } .cb-stage.tall .cb-co b{ font-size:26px; }

/* slide 4: splits */
.cb-s-splits{ align-content:start; } .cb-sp{ min-width:0; }
.cb-tbl.sp td{ height:48px; } .cb-tbl.sp td.g{ text-align:left; width:130px; font:700 12px Inter,sans-serif; letter-spacing:.14em; color:var(--text-muted); background:transparent; border:0; padding-left:0; border-radius:0; } .cb-tbl.sp td.lbl{ text-align:left; font-weight:700; border-left:1px solid var(--border); border-radius:12px 0 0 12px; padding-left:14px; }
.cb-tbl.sp th:first-child, .cb-tbl.sp th:nth-child(2){ text-align:left; }
.cb-stage.tall .cb-tbl.sp td{ height:52px; font-size:16px; } .cb-stage.tall .cb-tbl.sp td.g{ width:70px; font-size:10px; } .cb-stage.tall .cb-tbl.sp td.n{ font-size:22px; }

/* slide 5: next game and props */
.cb-s-props{ align-content:start; } .cb-pl{ min-width:0; }
.cb-tbl.pr td{ height:52px; } .cb-tbl.pr td.lbl{ text-align:left; font-weight:800; font-size:20px; } .cb-tbl.pr td.n{ font-size:30px; color:var(--gold); } .cb-tbl.pr .rt{ font:700 28px 'Oswald',sans-serif; color:var(--accent); }
.cb-tbl.pr th:first-child{ text-align:left; }
.cb-note{ margin:10px 0 0; font:500 13px Inter,sans-serif; color:#6f8196; }
.cb-stage.tall .cb-tbl.pr td{ font-size:16px; } .cb-stage.tall .cb-tbl.pr td.lbl{ font-size:17px; } .cb-stage.tall .cb-tbl.pr td.n{ font-size:26px; }
/* ---- Creator Studio, part 2: Tier Board, Top Plays, Thumbnails, Injury Report + shared form bits ---- */
.cr-form{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; max-width:900px; }
.cr-form label{ display:flex; flex-direction:column; gap:4px; font:700 .72rem 'Oswald',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
.cr-form input{ padding:9px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2, #141b25); color:var(--text); font:500 .95rem Inter,sans-serif; letter-spacing:0; text-transform:none; }
.cr-check{ display:inline-flex; align-items:center; gap:7px; font-size:.86rem; color:var(--text); cursor:pointer; } .cr-check input{ width:17px; height:17px; accent-color:var(--accent); }
.cr-pick .cr-row .btn{ padding:7px 12px; font-size:.82rem; }
.cr-pick .toggle-group{ flex-wrap:wrap; }
.cr-script{ margin-top:14px; } .cr-script h4{ margin:0 0 8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.9rem; } .cr-script h4 small{ color:var(--text-muted); font-weight:500; margin-right:auto; }
.cr-script textarea{ width:100%; box-sizing:border-box; background:var(--surface-2, #141b25); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:12px; font:inherit; font-size:.88rem; line-height:1.5; resize:vertical; }

/* shared in-stage bits */
.cb-stage.bare{ padding:0; }
.cb-stage .ph{ display:grid; place-items:center; background:#1d2836; color:#c4d0dd; font:700 18px Oswald,sans-serif; border-radius:50%; }
.cb-stage .ct-face, .cb-stage .ci-face, .cb-stage .cp-face{ border-radius:50%; object-fit:cover; object-position:50% 8%; background:#1a2331; flex:none; }

/* ---------- Tier Board ---------- */
.ct-board{ display:flex; flex-direction:column; gap:8px; height:100%; }
.ct-row{ flex:1 1 0; min-height:0; display:flex; border:1px solid var(--border); border-radius:14px; background:var(--card); overflow:hidden; }
.ct-lab{ width:150px; flex:none; background:var(--tc); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#fff; text-align:center; padding:0 6px; }
.ct-lab b{ font:700 66px/1 'Oswald',sans-serif; } .ct-lab span{ font:700 13px Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.ct-chips{ flex:1; display:flex; flex-wrap:wrap; align-content:center; gap:5px 7px; padding:6px 10px; min-width:0; overflow:hidden; }
.ct-chip{ display:flex; align-items:center; gap:7px; padding:3px 10px 3px 3px; border-radius:99px; background:rgba(255,255,255,.07); border:1px solid var(--border); }
.ct-chip .ct-face{ width:34px; height:34px; } .ct-chip .ct-face.ph{ font-size:13px; }
.ct-chip .n{ display:flex; flex-direction:column; line-height:1.05; } .ct-chip .n b{ font:700 16px 'Oswald',sans-serif; letter-spacing:.02em; white-space:nowrap; } .ct-chip .n small{ font:600 9.5px Inter,sans-serif; color:var(--text-muted); letter-spacing:.06em; }
.ct-chip em{ font:700 16px 'Oswald',sans-serif; font-style:normal; color:var(--gold); margin-left:1px; }
.ct-more{ align-self:center; padding:6px 12px; border-radius:99px; border:1px dashed var(--border); font:700 16px 'Oswald',sans-serif; color:var(--text-muted); }
.cb-stage.tall .ct-lab{ width:96px; } .cb-stage.tall .ct-lab b{ font-size:48px; } .cb-stage.tall .ct-lab span{ font-size:10px; letter-spacing:.08em; }
.cb-stage.tall .ct-chip .ct-face{ width:30px; height:30px; } .cb-stage.tall .ct-chip .n b{ font-size:14px; } .cb-stage.tall .ct-chip em{ font-size:14px; } .cb-stage.tall .ct-chip{ padding-right:8px; gap:5px; }
.ct-tier{ display:flex; flex-direction:column; gap:14px; height:100%; }
.ct-head{ display:flex; align-items:center; gap:16px; padding:12px 18px; border-radius:18px; background:linear-gradient(90deg, var(--tc), color-mix(in srgb, var(--tc) 45%, #0a0e14)); color:#fff; }
.ct-head b{ font:700 66px/1 'Oswald',sans-serif; } .ct-head span{ font:700 44px/1 'Oswald',sans-serif; letter-spacing:.04em; text-transform:uppercase; } .ct-head em{ margin-left:auto; font:700 13px Inter,sans-serif; font-style:normal; letter-spacing:.12em; opacity:.9; text-align:right; }
.ct-cards{ flex:1; min-height:0; display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; gap:12px; }
.ct-card{ position:relative; width:191px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:10px 8px 10px; border:1px solid var(--border); border-top:4px solid var(--tc); border-radius:16px; background:var(--card); }
.ct-card .rk{ position:absolute; left:8px; top:8px; width:28px; height:28px; border-radius:50%; background:var(--tc); color:#fff; font:700 15px/28px 'Oswald',sans-serif; }
.ct-photo{ width:100px; height:100px; border-radius:50%; object-fit:cover; object-position:50% 8%; border:3px solid var(--tc); background:#0b1119; } .ct-photo.ph{ font-size:30px; }
.ct-card b{ margin-top:6px; font:700 21px/1.1 'Oswald',sans-serif; letter-spacing:.02em; } .ct-card small{ margin-top:3px; font:600 12px Inter,sans-serif; color:var(--text-muted); letter-spacing:.08em; }
.ct-card em{ margin-top:6px; font:700 36px/1 'Oswald',sans-serif; font-style:normal; color:var(--gold); } .ct-card em i{ font:700 12px Inter,sans-serif; font-style:normal; letter-spacing:.14em; color:var(--text-muted); margin-left:4px; } .ct-card em.na{ color:var(--text-muted); }
.ct-card.more{ justify-content:center; font:700 44px 'Oswald',sans-serif; color:var(--text-muted); border-style:dashed; } .ct-card.more small{ font-size:12px; }
.cb-stage.tall .ct-card{ width:205px; } .cb-stage.tall .ct-head b{ font-size:56px; } .cb-stage.tall .ct-head span{ font-size:36px; } .cb-stage.tall .ct-head em{ font-size:11px; }

/* ---------- Top Plays ---------- */
.cp-board{ display:flex; flex-direction:column; gap:8px; height:100%; }
.cp-board .cb-note{ margin:2px 0 0; flex:none; }
.cp-row{ flex:1; min-height:0; max-height:96px; display:grid; grid-template-columns:34px 60px minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.85fr) minmax(0,.55fr) minmax(0,.75fr) minmax(0,.7fr); align-items:center; gap:12px; padding:6px 16px 6px 12px; border:1px solid var(--border); border-radius:16px; background:var(--card); }
.cp-row .no{ font:700 24px 'Oswald',sans-serif; color:var(--text-muted); text-align:center; }
.cp-row .cp-face{ width:54px; height:54px; } .cp-row .cp-face.ph{ font-size:18px; }
.cp-row .who b, .cp-row .call b{ display:block; font:700 24px/1.2 'Oswald',sans-serif; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-row small{ display:block; margin-top:3px; font:600 11px Inter,sans-serif; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-row .call b{ color:var(--gold); } .cp-row .price b, .cp-row .mt b, .cp-row .mn b, .cp-row .hit b{ font:700 24px/1.05 'Oswald',sans-serif; display:block; text-align:center; } .cp-row .price small, .cp-row .mt small, .cp-row .mn small, .cp-row .hit small, .cp-row .rt small{ text-align:center; }
.cp-row .rt{ text-align:center; } .cp-row .rt b{ display:grid; place-items:center; margin:0 auto; width:56px; height:56px; border-radius:50%; font:700 28px 'Oswald',sans-serif; color:#04130a; background:var(--accent); }
.cb-stage.tall .cp-row{ grid-template-columns:30px 54px minmax(0,1.25fr) minmax(0,1fr) minmax(0,.62fr) minmax(0,.62fr) 54px; gap:8px; padding:6px 10px; max-height:112px; } .cb-stage.tall .cp-row .price, .cb-stage.tall .cp-row .mn{ display:none; }
.cb-stage.tall .cp-row .who b, .cb-stage.tall .cp-row .call b{ font-size:20px; } .cb-stage.tall .cp-row .mt b, .cb-stage.tall .cp-row .hit b{ font-size:20px; } .cb-stage.tall .cp-row .rt b{ width:48px; height:48px; font-size:24px; } .cb-stage.tall .cp-row .cp-face{ width:50px; height:50px; }
.cp-card{ display:grid; grid-template-columns:400px minmax(0,1fr); gap:22px; height:100%; }
.cp-hero{ position:relative; border-radius:22px; border:1px solid var(--border); overflow:hidden; background:linear-gradient(165deg, color-mix(in srgb, var(--ta) 44%, #0f1620), #0f1620 74%); display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.cp-hero .lg{ position:absolute; right:-30px; top:-10px; opacity:.18; }
.cp-photo{ position:relative; height:420px; width:auto; max-width:100%; object-fit:contain; object-position:50% 100%; } .cp-photo.ph{ width:230px; height:230px; font-size:70px; margin-bottom:30px; }
.cp-hero .nm{ position:relative; width:100%; padding:14px 18px 18px; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent); } .cp-hero .nm b{ display:block; font:700 40px/1.05 'Oswald',sans-serif; } .cp-hero .nm small{ display:block; margin-top:4px; font:600 14px Inter,sans-serif; letter-spacing:.1em; color:#c4d0dd; }
.cp-main{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.cp-call{ padding:6px 4px; } .cp-call small{ font:700 13px Inter,sans-serif; letter-spacing:.18em; color:var(--text-muted); } .cp-call b{ display:block; font:700 100px/1 'Oswald',sans-serif; color:var(--gold); text-shadow:0 6px 0 rgba(0,0,0,.35); white-space:nowrap; } .cp-call span{ font:700 28px 'Oswald',sans-serif; letter-spacing:.14em; color:#fff; }
.cp-pr{ display:flex; gap:14px; } .cp-pr > div{ flex:1; padding:12px 18px; border:1px solid var(--border); border-radius:16px; background:var(--card); display:flex; flex-direction:column; } .cp-pr small{ font:700 12px Inter,sans-serif; letter-spacing:.16em; color:var(--text-muted); } .cp-pr b{ font:700 56px/1.05 'Oswald',sans-serif; } .cp-pr em{ font:600 14px Inter,sans-serif; font-style:normal; color:var(--text-muted); } .cp-pr .rate b{ color:var(--accent); }
.cp-tiles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } .cp-tiles .cb-tile{ height:98px; padding:8px 14px; } .cp-tiles .cb-tile b{ font-size:42px; } .cp-tiles .cb-tile em{ font-size:14px; }
.cp-why{ margin:0; font:500 16px/1.4 Inter,sans-serif; color:#c4d0dd; } .cp-why b{ color:#fff; }
.cb-stage.tall .cp-card{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; gap:16px; } .cb-stage.tall .cp-photo{ height:300px; } .cb-stage.tall .cp-call b{ font-size:96px; } .cb-stage.tall .cp-pr b{ font-size:50px; } .cb-stage.tall .cp-tiles .cb-tile{ height:104px; }

/* ---------- Thumbnails (YouTube / X 16:9 and TikTok 9:16) ---------- */
.th, .cb-stage.bare > .th{ position:absolute; inset:0; overflow:hidden; font-family:Inter,sans-serif; color:#fff; }
.th > *{ position:absolute; }
.th-fx{ inset:0; background:radial-gradient(1000px 760px at 74% 44%, color-mix(in srgb, var(--tc) 85%, transparent), transparent 66%), radial-gradient(760px 560px at 0% 0%, color-mix(in srgb, var(--tc) 40%, transparent), transparent 70%), radial-gradient(rgba(255,255,255,.08) 2px, transparent 2.6px) 0 0 / 24px 24px, #05080d; }
.th::after{ content:''; position:absolute; inset:0; z-index:8; pointer-events:none; box-shadow:inset 0 0 0 8px var(--ac), inset 0 0 0 11px #05070a, inset 0 0 140px rgba(0,0,0,.5); }
.th-wm{ left:-90px; bottom:-130px; width:520px; height:auto; opacity:.1; filter:saturate(.7); }
.th-art{ right:0; top:0; bottom:0; width:60%; }
.th-art > *{ position:absolute; }
.th-burst{ inset:0; background:radial-gradient(ellipse 70% 62% at 56% 44%, color-mix(in srgb, var(--tc) 55%, #fff), var(--tc) 38%, color-mix(in srgb, var(--tc) 38%, #03050a) 100%); clip-path:polygon(30% 0, 100% 0, 100% 100%, 4% 100%); }
.th-burst::after{ content:''; position:absolute; inset:0; background:repeating-conic-gradient(from 8deg at 56% 46%, rgba(255,255,255,.2) 0 5deg, transparent 5deg 15deg); -webkit-mask-image:radial-gradient(circle at 56% 46%, #000 0, rgba(0,0,0,.55) 46%, transparent 82%); mask-image:radial-gradient(circle at 56% 46%, #000 0, rgba(0,0,0,.55) 46%, transparent 82%); }
.th-edge{ inset:0; background:var(--ac); clip-path:polygon(30% 0, 32.6% 0, 6.6% 100%, 4% 100%); filter:drop-shadow(0 0 16px var(--ac)) drop-shadow(0 0 40px var(--ac)); }
.th-edge::after{ content:''; position:absolute; inset:0; background:#fff; clip-path:polygon(33.6% 0, 34.4% 0, 8.4% 100%, 7.6% 100%); opacity:.85; }
.th-glow{ left:6%; right:0; top:0; height:86%; background:radial-gradient(ellipse at 54% 42%, rgba(255,255,255,.62), rgba(255,255,255,.14) 36%, transparent 64%); mix-blend-mode:screen; }
.th-logo{ right:3%; top:5%; width:44%; height:auto; opacity:.16; object-fit:contain; }
.th-photo{ right:-8%; bottom:-1.5%; height:99%; width:auto; max-width:none; object-fit:contain; object-position:50% 100%; filter:contrast(1.04) drop-shadow(0 0 30px color-mix(in srgb, var(--ac) 70%, transparent)) drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.th-photo.out{ filter:drop-shadow(7px 0 0 #fff) drop-shadow(-7px 0 0 #fff) drop-shadow(0 7px 0 #fff) drop-shadow(0 -7px 0 #fff) drop-shadow(0 0 34px var(--ac)) drop-shadow(0 22px 28px rgba(0,0,0,.6)); }
.th-photo.blk{ -webkit-mask-image:radial-gradient(ellipse 50% 54% at 50% 46%, #000 52%, transparent 96%); mask-image:radial-gradient(ellipse 50% 54% at 50% 46%, #000 52%, transparent 96%); filter:none; }
.th-photo.ph{ width:420px; height:420px; font-size:120px; right:8%; bottom:12%; }
.th-txt{ left:44px; top:0; bottom:96px; width:46%; display:flex; flex-direction:column; justify-content:center; gap:20px; z-index:3; }
.th-badge{ align-self:flex-start; padding:6px 24px; border-radius:10px; background:var(--ac); color:#05110a; font:700 32px/1.1 'Oswald',sans-serif; letter-spacing:.08em; border:3px solid #05070a; box-shadow:0 7px 0 #05070a, 0 0 28px color-mix(in srgb, var(--ac) 60%, transparent); transform:rotate(-2deg); }
.th h1{ margin:0; font-family:'Oswald',sans-serif; font-weight:700; line-height:1; text-transform:uppercase; letter-spacing:.01em; color:#fff; -webkit-text-stroke:13px #05070a; paint-order:stroke fill; text-shadow:0 5px 0 #05070a, 0 10px 0 #05070a, 0 16px 22px rgba(0,0,0,.7); }
.th h1 i{ font-style:normal; display:inline-block; color:#04100a; background:var(--ac); -webkit-text-stroke:0; text-shadow:none; padding:0 .13em .04em; margin:.04em -.02em .02em; border-radius:.08em; transform:skewX(-7deg) rotate(-1.4deg); box-shadow:0 .06em 0 #05070a, 0 0 .22em #05070a, 0 0 .5em color-mix(in srgb, var(--ac) 65%, transparent); }
.th h1 span{ display:block; }
.th p{ margin:0; font:800 34px/1.2 Inter,sans-serif; color:#fff; -webkit-text-stroke:7px #05070a; paint-order:stroke fill; text-shadow:0 4px 0 #05070a; }
.th-stats{ display:flex; gap:14px; flex-wrap:wrap; }
.th-stats div{ min-width:138px; padding:0 14px 6px; border-radius:14px; overflow:hidden; background:#05070a; border:3px solid var(--ac); display:flex; flex-direction:column; align-items:center; box-shadow:0 8px 0 #05070a, 0 0 30px color-mix(in srgb, var(--ac) 50%, transparent); }
.th-stats small{ align-self:stretch; margin:0 -14px; text-align:center; padding:3px 0 2px; background:var(--ac); color:#04100a; font:800 15px Inter,sans-serif; letter-spacing:.16em; } .th-stats b{ font:700 62px/1.04 'Oswald',sans-serif; color:#fff; text-shadow:0 0 22px color-mix(in srgb, var(--ac) 70%, transparent); }
.th-brand{ left:40px; bottom:22px; display:flex; align-items:center; gap:14px; z-index:3; }
.th-brand .em{ width:74px; height:74px; border-radius:50%; box-shadow:0 0 0 3px #05070a, 0 0 0 6px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 70%, transparent); background:#05070a; object-fit:cover; }
.th-brand .wm{ height:60px; width:auto; }
.th-brand span{ font:700 22px 'Oswald',sans-serif; letter-spacing:.12em; color:var(--accent); text-shadow:0 3px 0 rgba(0,0,0,.6); }

/* TikTok / Reels / Shorts cover: 720 x 1280. TikTok shows the middle 3:4 (y 160-1120) in the profile grid and covers the bottom with the caption and the right edge with buttons, so every word sits in the middle. */
.th.tall .th-fx{ background:radial-gradient(820px 760px at 50% 62%, color-mix(in srgb, var(--tc) 88%, transparent), transparent 68%), radial-gradient(640px 440px at 50% 0%, color-mix(in srgb, var(--tc) 42%, transparent), transparent 70%), radial-gradient(rgba(255,255,255,.08) 2px, transparent 2.6px) 0 0 / 24px 24px, #05080d; }
.th.tall .th-burst::after{ background:repeating-conic-gradient(from 8deg at 50% 46%, rgba(255,255,255,.2) 0 5deg, transparent 5deg 15deg); -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 0, rgba(0,0,0,.55) 46%, transparent 82%); mask-image:radial-gradient(circle at 50% 46%, #000 0, rgba(0,0,0,.55) 46%, transparent 82%); }
.th.tall .th-wm{ left:50%; bottom:auto; top:420px; width:640px; transform:translateX(-50%); opacity:.09; }
.th.tall .th-art{ left:0; right:0; top:380px; bottom:auto; height:830px; width:auto; }
.th.tall .th-burst{ clip-path:polygon(0 26%, 100% 12%, 100% 100%, 0 100%); }
.th.tall .th-edge{ clip-path:polygon(0 26%, 100% 12%, 100% 13.4%, 0 27.8%); } .th.tall .th-edge::after{ clip-path:polygon(0 28.6%, 100% 14.2%, 100% 14.8%, 0 29.2%); }
.th.tall .th-glow{ left:0; right:0; top:0; height:80%; background:radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.6), rgba(255,255,255,.12) 40%, transparent 68%); }
.th.tall .th-photo{ left:50%; right:auto; transform:translateX(-50%); top:5px; bottom:auto; height:920px; max-width:none; }
.th.tall .th-photo.ph{ left:50%; right:auto; transform:translateX(-50%); }
.th.tall .th-logo{ width:64%; right:-8%; top:10%; }
.th.tall .th-txt{ left:40px; right:90px; top:172px; bottom:auto; width:auto; align-items:center; text-align:center; justify-content:flex-start; gap:14px; }
.th.tall .th-badge{ align-self:center; font-size:26px; }
.th.tall h1{ -webkit-text-stroke:9px #05070a; }
.th.tall p{ font-size:28px; -webkit-text-stroke:5px #05070a; }
.th.tall .th-stats{ position:absolute; left:40px; right:90px; top:1008px; justify-content:center; flex-wrap:nowrap; gap:10px; z-index:4; }
.th.tall .th-stats div{ min-width:0; flex:1; padding:5px 10px 7px; } .th.tall .th-stats b{ font-size:46px; } .th.tall .th-stats small{ font-size:12px; }
.th.tall .th-brand{ left:0; right:0; bottom:auto; top:1128px; justify-content:center; } .th.tall .th-brand .wm{ height:58px; } .th.tall .th-brand span{ display:none; }
.th-url{ left:0; right:0; top:1196px; text-align:center; font:700 24px 'Oswald',sans-serif; letter-spacing:.14em; color:var(--accent); text-shadow:0 3px 0 rgba(0,0,0,.6); z-index:3; }
/* editor-only overlay (not exported): the 3:4 grid crop and the areas TikTok covers */
.th-guide{ inset:0; z-index:9; pointer-events:none; }
.th-guide .g-top, .th-guide .g-bot{ position:absolute; left:0; right:0; background:rgba(0,0,0,.5); } .th-guide .g-top{ top:0; height:160px; border-bottom:2px dashed #fff; } .th-guide .g-bot{ top:1120px; bottom:0; border-top:2px dashed #fff; }
.th-guide .g-rail{ position:absolute; right:0; top:690px; width:90px; height:430px; background:rgba(255,80,80,.18); border-left:2px dashed #ff8a8a; }
.th-guide b{ position:absolute; font:700 13px Inter,sans-serif; letter-spacing:.08em; color:#fff; background:rgba(0,0,0,.6); padding:3px 8px; border-radius:6px; }
.th-guide .g-top b{ left:10px; bottom:8px; } .th-guide .g-bot b{ left:10px; top:8px; } .th-guide .g-rail b{ right:6px; bottom:8px; font-size:10px; }

/* ---------- Injury Report ---------- */
.ci-list{ display:flex; flex-direction:column; gap:8px; height:100%; }
.ci-row{ flex:1; min-height:0; max-height:84px; display:grid; grid-template-columns:132px 58px minmax(0,1.3fr) minmax(0,1.5fr) 290px; align-items:center; gap:14px; padding:6px 18px 6px 12px; border:1px solid var(--border); border-radius:16px; background:var(--card); }
.ci-row .st{ text-align:center; padding:6px 4px; border-radius:10px; font:700 15px 'Oswald',sans-serif; letter-spacing:.1em; background:#ffc233; color:#1b1300; } .ci-row .st.out{ background:#ff5d52; color:#fff; } .ci-row .st.doubt{ background:#ff8f3a; color:#1b0e00; }
.ci-row .ci-face{ width:54px; height:54px; } .ci-row .ci-face.ph{ font-size:18px; }
.ci-row .who b{ display:block; font:700 26px/1.2 'Oswald',sans-serif; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ci-row small{ display:block; margin-top:3px; font:600 11.5px Inter,sans-serif; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase; }
.ci-row .note{ font:500 15px/1.3 Inter,sans-serif; color:#c4d0dd; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ci-row .num{ text-align:right; } .ci-row .num b{ display:block; font:700 22px/1.1 'Oswald',sans-serif; color:#fff; letter-spacing:.02em; }
.cb-stage.tall .ci-row{ grid-template-columns:104px 52px minmax(0,1fr) 210px; gap:10px; padding:6px 12px 6px 8px; max-height:116px; } .cb-stage.tall .ci-row .note{ display:none; } .cb-stage.tall .ci-row .who b{ font-size:22px; } .cb-stage.tall .ci-row .num b{ font-size:17px; } .cb-stage.tall .ci-row .ci-face{ width:48px; height:48px; } .cb-stage.tall .ci-row .st{ font-size:13px; }

/* ---- Creator Studio, part 3: systems check, ideas, tier editor, scoreboard ---- */
.cr-health{ margin:0 0 6px; padding:14px 16px; border:1px solid var(--border); border-radius:16px; background:var(--surface-2, rgba(255,255,255,.04)); }
.cr-health-h{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; } .cr-health-h b{ font:700 1rem 'Oswald',sans-serif; letter-spacing:.06em; text-transform:uppercase; } .cr-health-h small{ color:var(--text-muted); margin-right:auto; } .cr-health-h .btn{ padding:6px 12px; font-size:.82rem; }
.cr-hs{ padding:3px 12px; border-radius:99px; font-weight:700; font-size:.82rem; } .cr-hs.ok{ background:rgba(34,214,90,.16); color:#2fe07a; } .cr-hs.warn{ background:rgba(255,194,51,.18); color:#ffc233; } .cr-hs.bad{ background:rgba(255,93,82,.18); color:#ff6f64; } .cr-hs.wait{ background:rgba(255,255,255,.08); color:var(--text-muted); }
.cr-health-g{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px; margin-top:12px; }
.cr-health-g > div{ display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:12px; border:1px solid var(--border); } .cr-health-g i{ font-style:normal; font-weight:800; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:.8rem; }
.cr-health-g .ok i{ background:rgba(34,214,90,.2); color:#2fe07a; } .cr-health-g .warn i{ background:rgba(255,194,51,.22); color:#ffc233; } .cr-health-g .bad i{ background:rgba(255,93,82,.22); color:#ff6f64; } .cr-health-g .bad{ border-color:rgba(255,93,82,.5); }
.cr-health-g b{ display:block; font-size:.86rem; } .cr-health-g small{ color:var(--text-muted); font-size:.74rem; }
.cr-ideas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; }
.cr-idea{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; text-align:left; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:var(--surface-2, rgba(255,255,255,.04)); color:var(--text); cursor:pointer; }
.cr-idea:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); } .cr-idea span{ grid-row:1 / span 2; font-size:1.7rem; } .cr-idea b{ font-size:.95rem; } .cr-idea small{ color:var(--text-muted); font-size:.78rem; }
.cr-edit{ margin-top:16px; padding:14px 16px; border:1px solid var(--border); border-radius:16px; background:var(--surface-2, rgba(255,255,255,.04)); }
.cr-edit h4{ margin:0 0 12px; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:.95rem; } .cr-edit h4 small{ color:var(--text-muted); font-weight:500; margin-right:auto; } .cr-edit h4 .btn{ padding:7px 13px; font-size:.82rem; }
.cr-addrow{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-bottom:12px; } .cr-addrow label{ display:flex; flex-direction:column; gap:4px; font:700 .72rem 'Oswald',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); } .cr-addrow select{ padding:9px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2, #141b25); color:var(--text); font-size:.9rem; }
.cr-tr{ display:flex; gap:10px; align-items:stretch; margin-top:8px; border:1px solid var(--border); border-left:6px solid var(--tc); border-radius:12px; overflow:hidden; }
.cr-tl{ width:128px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px 6px; background:color-mix(in srgb, var(--tc) 28%, transparent); text-align:center; } .cr-tl b{ font:700 1.7rem/1 'Oswald',sans-serif; } .cr-tl span{ font:600 .66rem Inter,sans-serif; letter-spacing:.08em; text-transform:uppercase; } .cr-tl button{ margin-top:4px; padding:2px 8px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text); font-size:.7rem; cursor:pointer; }
.cr-tc{ flex:1; display:flex; flex-wrap:wrap; gap:6px; align-content:center; padding:8px 8px 8px 0; min-width:0; } .cr-none{ color:var(--text-muted); padding:6px; }
.cr-tp{ display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 6px; border-radius:99px; border:1px solid var(--border); background:rgba(255,255,255,.05); font-size:.82rem; } .cr-tp b{ font-weight:600; } .cr-tp small{ color:var(--text-muted); font-size:.68rem; } .cr-tp.out{ opacity:.5; text-decoration:line-through; }
.cr-tp button{ border:0; background:transparent; color:var(--text-muted); cursor:pointer; padding:0 5px; font-size:1rem; line-height:1; border-radius:50%; } .cr-tp button:hover{ color:var(--text); background:rgba(255,255,255,.12); } .cr-tp button.x:hover{ color:#ff6f64; }
@media (max-width:760px){ .cr-tr{ flex-direction:column; } .cr-tl{ width:auto; flex-direction:row; gap:10px; } }

/* scoreboard stage */
.cs-list{ display:flex; flex-direction:column; gap:8px; height:100%; }
.cs-row{ flex:1; min-height:0; max-height:80px; display:grid; grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr) 300px; align-items:center; gap:12px; padding:6px 18px; border:1px solid var(--border); border-radius:16px; background:var(--card); }
.cs-row .tm{ display:flex; align-items:center; gap:12px; min-width:0; } .cs-row .h .tm{ flex-direction:row-reverse; text-align:right; } .cs-row .tm img{ width:50px; height:50px; object-fit:contain; flex:none; }
.cs-row .tm b{ display:block; font:700 30px/1.1 'Oswald',sans-serif; letter-spacing:.03em; } .cs-row small{ display:block; font:600 12px Inter,sans-serif; letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-row .m{ text-align:center; } .cs-row .sc{ display:flex; align-items:center; justify-content:center; gap:10px; } .cs-row .sc b{ font:700 44px/1.05 'Oswald',sans-serif; color:#c4d0dd; min-width:56px; } .cs-row .sc b.w{ color:#fff; } .cs-row .sc b.l{ color:#7f90a3; } .cs-row .sc i{ font-style:normal; color:var(--text-muted); font-size:26px; }
.cs-row .at{ font:700 30px 'Oswald',sans-serif; color:var(--text-muted); } .cs-row .m small.live{ color:#ff6a5e; font-weight:800; }
.cs-row .info b{ display:block; font:700 22px/1.15 'Oswald',sans-serif; letter-spacing:.02em; color:var(--gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-stage.tall .cs-row{ grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr); grid-template-rows:auto auto; row-gap:2px; padding:6px 14px; max-height:112px; } .cb-stage.tall .cs-row .info{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-top:1px solid var(--border); padding-top:3px; }
.cb-stage.tall .cs-row .tm img{ width:40px; height:40px; } .cb-stage.tall .cs-row .tm b{ font-size:24px; } .cb-stage.tall .cs-row .sc b{ font-size:36px; min-width:40px; } .cb-stage.tall .cs-row .info b{ font-size:17px; }
.cs-lead{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; height:100%; align-items:start; } .cs-lead .col{ padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--card); }
.cs-lead h3{ margin:0 0 10px; font:700 26px 'Oswald',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.cs-lead .r{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--border); } .cs-lead .n{ width:22px; font:700 20px 'Oswald',sans-serif; color:var(--text-muted); text-align:center; }
.cs-face{ width:58px; height:58px; border-radius:50%; object-fit:cover; object-position:50% 10%; background:#1a2331; flex:none; } .cs-face.ph{ font-size:20px; }
.cs-lead .w{ flex:1; min-width:0; } .cs-lead .w b{ display:block; font:700 22px/1.15 'Oswald',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cs-lead em{ font:700 40px 'Oswald',sans-serif; font-style:normal; color:var(--gold); }
.cb-stage.tall .cs-lead{ grid-template-columns:minmax(0,1fr); gap:12px; } .cb-stage.tall .cs-lead .col{ padding:10px 14px; } .cb-stage.tall .cs-lead h3{ font-size:22px; margin-bottom:4px; } .cb-stage.tall .cs-lead .r{ padding:4px 0; } .cb-stage.tall .cs-face{ width:46px; height:46px; } .cb-stage.tall .cs-lead .w b{ font-size:19px; } .cb-stage.tall .cs-lead em{ font-size:32px; }

.cb-body.cb-s-score, .cb-body.cb-s-leaders, .cb-body.cb-s-page, .cb-body.cb-s-play, .cb-body.cb-s-cmpintro, .cb-body.cb-s-cmpradar, .cb-body.cb-s-cmprows, .cb-body.cb-s-cmpedge{ grid-template-rows:minmax(0,1fr); }

.cs-list.noinfo .cs-row{ grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr); padding:6px 40px; } .cs-list.noinfo .info{ display:none; } .cb-stage.tall .cs-list.noinfo .cs-row{ grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr); grid-template-rows:auto; padding:6px 16px; max-height:104px; }

.cr-sug-note{ padding:10px 12px; font-size:.86rem; color:var(--text-muted); }
/* thumbnail layout 2: "Poster" - the player is huge and centered, the headline sits across the bottom */
.th.poster.wide .th-fx{ background:radial-gradient(ellipse 820px 600px at 50% 38%, color-mix(in srgb, var(--tc) 92%, transparent), transparent 72%), radial-gradient(rgba(255,255,255,.08) 2px, transparent 2.6px) 0 0 / 24px 24px, #05080d; }
.th.poster .th-art{ left:0; right:0; width:auto; }
.th.poster.wide .th-burst{ clip-path:none; background:radial-gradient(ellipse 60% 70% at 50% 40%, color-mix(in srgb, var(--tc) 55%, #fff), var(--tc) 40%, color-mix(in srgb, var(--tc) 30%, #05070a) 100%); opacity:.95; } .th.poster.wide .th-burst::after{ background:repeating-conic-gradient(from 8deg at 50% 42%, rgba(255,255,255,.2) 0 5deg, transparent 5deg 15deg); -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 0, rgba(0,0,0,.55) 46%, transparent 82%); mask-image:radial-gradient(circle at 50% 42%, #000 0, rgba(0,0,0,.55) 46%, transparent 82%); }
.th.poster .th-edge{ display:none; }
.th.poster .th-glow{ left:20%; right:20%; top:0; height:80%; background:radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.5), rgba(255,255,255,.08) 46%, transparent 68%); }
.th.poster.wide .th-logo{ left:50%; right:auto; transform:translateX(-50%); width:50%; top:-4%; opacity:.2; }
.th.poster.wide .th-photo{ left:50%; right:auto; transform:translateX(-50%); height:114%; bottom:-6%; }
.th.poster .th-art::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:46%; background:linear-gradient(0deg, rgba(4,6,9,.96) 8%, rgba(4,6,9,.55) 60%, transparent); pointer-events:none; }
.th.poster.wide .th-txt{ left:0; right:0; width:auto; top:auto; bottom:92px; align-items:center; text-align:center; gap:10px; }
.th.poster.wide h1{ white-space:nowrap; }
.th.poster .th-badge{ position:absolute; z-index:4; } .th.poster.wide .th-badge{ left:40px; top:36px; transform:rotate(-3deg); }
.th.poster.wide .th-stats{ position:absolute; left:44px; top:112px; flex-direction:column; flex-wrap:nowrap; gap:14px; z-index:4; }
.th.poster.wide .th-stats div{ min-width:150px; }
.th.poster.wide p{ font-size:30px; }
.th.poster.wide .th-brand{ left:0; right:0; justify-content:center; bottom:20px; }
.th.poster.tall .th-txt{ top:auto; bottom:290px; }
.th.poster.tall .th-badge{ top:165px; left:50%; transform:translateX(-50%) rotate(-2deg); }
.th.poster.tall .th-art{ top:0; bottom:0; height:auto; }
.th.poster.tall .th-photo{ top:70px; height:940px; }
.th.poster.tall .th-burst{ background:radial-gradient(ellipse 80% 55% at 50% 42%, color-mix(in srgb, var(--tc) 55%, #fff), var(--tc) 42%, color-mix(in srgb, var(--tc) 30%, #05070a) 100%); clip-path:none; }
.th.poster.tall .th-stats{ top:1022px; }
.th.poster.tall .th-url{ top:1196px; }
.th.poster .th-photo{ -webkit-mask-image:linear-gradient(180deg, #000 76%, transparent 97%); mask-image:linear-gradient(180deg, #000 76%, transparent 97%); }
.th.poster.wide .th-txt{ width:auto; }

/* football photos are cropped tight (no headroom): keep the head clear of the logo, badge and frame */
.th.poster.wide.tight .th-photo{ height:94%; bottom:0; }
.th.poster.tall.tight .th-photo{ top:215px; height:860px; }
.th.tall.tight:not(.poster) .th-photo{ top:40px; height:880px; }

/* logos: the S emblem sits top right, the wordmark + web address sit along the bottom */
.th-emblem{ right:40px; top:36px; width:116px; height:116px; border-radius:50%; background:#05070a; object-fit:cover; z-index:7; box-shadow:0 0 0 4px #05070a, 0 0 0 8px var(--accent), 0 0 44px color-mix(in srgb, var(--accent) 75%, transparent), 0 10px 24px rgba(0,0,0,.55); }
.th.tall .th-emblem{ right:44px; top:52px; width:96px; height:96px; }
.th-brand .wm{ height:64px; }
/* what the three number chips are (season average, last game, last 5...) */
.th-stats .cap{ flex:0 0 auto; margin-right:100%; align-self:flex-start; padding:4px 14px 3px; border-radius:99px; background:#05070a; border:2px solid var(--ac); color:#fff; font:800 15px/1.2 Inter,sans-serif; letter-spacing:.12em; box-shadow:0 0 18px color-mix(in srgb, var(--ac) 45%, transparent); margin-bottom:-4px; white-space:nowrap; }
.th.tall .th-stats .cap{ position:absolute; left:50%; transform:translateX(-50%); top:-42px; font-size:14px; margin:0; }
.th.poster.wide .th-stats .cap{ margin-right:0; align-self:flex-start; }
/* ---------- Compare video ---------- */
.cv-start{ margin-top:10px; }
.cv-pchip{ border-color:var(--pc); box-shadow:inset 4px 0 0 var(--pc); }
.cv-hs{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 8%; } .cv-hs.ph{ display:grid; place-items:center; font:700 44px 'Oswald',sans-serif; color:#fff; }
/* head to head */
.cv-intro{ display:flex; align-items:stretch; justify-content:center; gap:26px; height:100%; max-height:560px; margin:auto 0; } .cv-intro .cv-vs{ align-self:center; }
.cv-pl{ flex:1 1 0; min-width:0; max-width:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:26px 20px; border-radius:26px; border:1px solid var(--border); border-top:8px solid var(--pc); background:linear-gradient(180deg, color-mix(in srgb, var(--pc) 20%, #0e141c), #0e141c 78%); box-shadow:0 0 50px color-mix(in srgb, var(--pc) 22%, transparent); }
.cv-ph{ width:230px; height:230px; border-radius:50%; overflow:hidden; background:color-mix(in srgb, var(--pc) 28%, #0b1118); box-shadow:0 0 0 6px var(--pc), 0 0 40px color-mix(in srgb, var(--pc) 55%, transparent); flex:none; }
.cv-pn b{ display:block; font:700 46px/1.05 'Oswald',sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.cv-tm{ display:inline-flex; align-items:center; gap:10px; margin-top:8px; font:600 22px Inter,sans-serif; color:#c4d0dd; } .cv-tm img{ width:38px; height:38px; object-fit:contain; } .cv-tm i{ font-style:normal; font-weight:800; color:#fff; padding:2px 14px; border-radius:99px; background:rgba(255,255,255,.12); }
.cv-pn small{ display:block; margin-top:10px; font:500 18px/1.35 Inter,sans-serif; color:#8fa0b4; } .cv-pn em{ display:block; margin-top:8px; font:600 16px Inter,sans-serif; font-style:normal; color:#ffc233; }
.cv-vs{ flex:none; width:104px; height:104px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#04100a; font:700 44px 'Oswald',sans-serif; letter-spacing:.04em; box-shadow:0 0 0 6px #05070a, 0 0 46px rgba(24,226,90,.7); transform:rotate(-6deg); }
.cv-intro.n3 .cv-ph, .cv-intro.n4 .cv-ph{ width:170px; height:170px; } .cv-intro.n3 .cv-pn b, .cv-intro.n4 .cv-pn b{ font-size:34px; } .cv-intro.n4 .cv-pn b{ font-size:28px; } .cv-intro.n4 .cv-pn small, .cv-intro.n3 .cv-pn small{ font-size:15px; } .cv-intro.n4{ gap:14px; } .cv-intro.n4 .cv-pl{ padding:20px 10px; }
.cb-stage.tall .cv-intro{ flex-direction:column; gap:14px; max-height:none; margin:0; } .cb-stage.tall .cv-pl{ flex-direction:row; max-width:none; width:100%; text-align:left; padding:16px 22px; border-top:1px solid var(--border); border-left:10px solid var(--pc); gap:22px; } .cb-stage.tall .cv-ph{ width:150px; height:150px; } .cb-stage.tall .cv-pn b{ font-size:38px; } .cb-stage.tall .cv-pn small{ font-size:16px; }
.cb-stage.tall .cv-vs{ width:82px; height:82px; font-size:34px; margin:-8px 0; } .cb-stage.tall .cv-intro.n3 .cv-ph, .cb-stage.tall .cv-intro.n4 .cv-ph{ width:118px; height:118px; } .cb-stage.tall .cv-intro.n4 .cv-pn b, .cb-stage.tall .cv-intro.n3 .cv-pn b{ font-size:30px; } .cb-stage.tall .cv-intro.n4 .cv-pl{ padding:12px 18px; }
/* radar */
.cv-radar{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:center; height:100%; }
.cv-rsvg svg{ width:100%; height:auto; max-height:560px; display:block; } .cv-rsvg .cmp-ring, .cv-rsvg .cmp-spoke{ stroke:rgba(255,255,255,.18); } .cv-rsvg .cmp-axl{ fill:#dbe5f0; font-weight:700; }
.cv-leg{ display:flex; flex-direction:column; gap:16px; } .cv-lg{ padding:14px 18px; border-radius:18px; border:1px solid var(--border); border-left:8px solid var(--pc); background:rgba(255,255,255,.04); } .cv-lg .dot{ display:none; }
.cv-lg b{ display:block; font:700 30px/1.1 'Oswald',sans-serif; text-transform:uppercase; color:var(--pc); } .cv-lg small{ display:block; margin-top:6px; font:600 17px/1.35 Inter,sans-serif; color:#c4d0dd; } .cv-leg p{ margin:4px 0 0; font:500 15px/1.4 Inter,sans-serif; color:#6f8196; }
.cb-stage.tall .cv-radar{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-content:start; gap:14px; } .cb-stage.tall .cv-rsvg svg{ max-height:620px; } .cb-stage.tall .cv-lg b{ font-size:26px; } .cb-stage.tall .cv-lg small{ font-size:15px; } .cb-stage.tall .cv-leg{ gap:10px; } .cb-stage.tall .cv-lg{ padding:10px 16px; }
/* stat battles */
.cv-rows{ display:flex; flex-direction:column; gap:10px; height:100%; }
.cv-hd, .cv-r{ display:grid; grid-template-columns:260px repeat(var(--n, 2), minmax(0,1fr)); gap:14px; align-items:center; }
.cv-rows{ --n:2; } .cv-hd > div{ display:flex; align-items:center; justify-content:center; gap:12px; padding-bottom:8px; border-bottom:5px solid var(--pc); } .cv-hd .ph{ width:56px; height:56px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 3px var(--pc); background:#0b1118; flex:none; } .cv-hd b{ font:700 28px/1 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em; color:var(--pc); }
.cv-r{ flex:1; min-height:0; max-height:92px; padding:4px 0; border-bottom:1px solid var(--border); } .cv-l{ font:700 22px/1.15 'Oswald',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#dbe5f0; } .cv-l small{ display:block; font:600 11px Inter,sans-serif; letter-spacing:.1em; color:#6f8196; margin-top:2px; }
.cv-c{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 8px; border-radius:14px; } .cv-c b{ font:700 40px/1 'Oswald',sans-serif; color:#f2f6fb; display:flex; align-items:baseline; gap:8px; } .cv-c b em{ font:800 15px Inter,sans-serif; font-style:normal; color:var(--pc); }
.cv-c u{ display:block; width:80%; height:9px; border-radius:99px; background:rgba(255,255,255,.09); text-decoration:none; overflow:hidden; } .cv-c u i{ display:block; height:100%; border-radius:99px; background:color-mix(in srgb, var(--pc) 55%, transparent); }
.cv-c.lead{ background:color-mix(in srgb, var(--pc) 22%, transparent); box-shadow:inset 0 0 0 2px var(--pc); } .cv-c.lead b{ color:var(--pc); font-size:46px; } .cv-c.lead u i{ background:var(--pc); } .cv-c.na b{ color:#6f8196; font-weight:500; }
.cb-stage.tall .cv-hd, .cb-stage.tall .cv-r{ grid-template-columns:150px repeat(var(--n, 2), minmax(0,1fr)); gap:8px; } .cb-stage.tall .cv-l{ font-size:18px; } .cb-stage.tall .cv-c b{ font-size:32px; } .cb-stage.tall .cv-c.lead b{ font-size:36px; } .cb-stage.tall .cv-hd b{ font-size:21px; } .cb-stage.tall .cv-hd .ph{ width:44px; height:44px; } .cb-stage.tall .cv-hd > div{ flex-direction:column; gap:4px; } .cb-stage.tall .cv-r{ max-height:150px; }
/* who leads */
.cv-edge{ display:flex; flex-direction:column; justify-content:center; gap:20px; height:100%; }
.cv-bigs{ display:flex; gap:18px; justify-content:center; } .cv-big{ flex:1 1 0; min-width:0; max-width:420px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:18px 14px; border-radius:24px; border:1px solid var(--border); border-top:8px solid var(--pc); background:linear-gradient(180deg, color-mix(in srgb, var(--pc) 16%, #0e141c), #0e141c 80%); }
.cv-big .ph{ width:110px; height:110px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 5px var(--pc); background:#0b1118; } .cv-big > span{ font:700 130px/1 'Oswald',sans-serif; color:var(--pc); } .cv-big b{ font:700 30px/1.1 'Oswald',sans-serif; text-transform:uppercase; } .cv-big small{ font:600 16px/1.35 Inter,sans-serif; color:#c4d0dd; min-height:44px; }
.cv-big.top{ box-shadow:0 0 0 3px var(--pc), 0 0 60px color-mix(in srgb, var(--pc) 45%, transparent); transform:scale(1.04); }
.cv-split{ display:flex; gap:4px; height:26px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.08); } .cv-split i{ background:var(--pc); min-width:4px; }
.cv-cap{ margin:0; text-align:center; font:600 34px/1.2 'Oswald',sans-serif; letter-spacing:.03em; text-transform:uppercase; } .cv-cap b{ color:var(--accent); } .cv-edge .cb-note{ text-align:center; margin:0; }
.cv-bigs.n3 .cv-big > span, .cv-bigs.n4 .cv-big > span{ font-size:100px; } .cv-bigs.n4 .cv-big b{ font-size:24px; } .cv-bigs.n4 .cv-big .ph, .cv-bigs.n3 .cv-big .ph{ width:90px; height:90px; }
.cb-stage.tall .cv-bigs{ flex-direction:column; gap:12px; } .cb-stage.tall .cv-big{ max-width:none; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; text-align:left; align-items:center; gap:4px 18px; padding:12px 18px; border-top:1px solid var(--border); border-left:10px solid var(--pc); } .cb-stage.tall .cv-big .ph{ width:84px; height:84px; } .cb-stage.tall .cv-big > span{ font-size:84px; min-width:96px; text-align:center; } .cb-stage.tall .cv-big b{ font-size:26px; flex:1 1 40%; } .cb-stage.tall .cv-big small{ flex:1 1 100%; min-height:0; } .cb-stage.tall .cv-big.top{ transform:none; }
.cb-stage.tall .cv-cap{ font-size:28px; }
/* Compare video, head-to-head style (two players) */
.cv-clintro{ display:grid; grid-template-columns:minmax(0,1fr) 270px minmax(0,1fr); align-items:center; gap:10px; height:100%; }
.cv-clp{ display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; } .cv-clph{ width:100%; max-width:430px; aspect-ratio:1/1; border-radius:22px; overflow:hidden; background:linear-gradient(180deg, color-mix(in srgb, var(--pc) 26%, #0b1118), #0b1118); box-shadow:0 0 0 5px var(--pc), 0 0 46px color-mix(in srgb, var(--pc) 45%, transparent); max-height:380px; }
.cv-clph .cv-hs{ object-position:50% 6%; } .cv-clp b{ font:700 44px/1.05 'Oswald',sans-serif; text-transform:uppercase; text-align:center; color:var(--pc); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:7px; } .cv-clp .cv-tm{ margin-top:2px; } .cv-clp small{ font:500 17px Inter,sans-serif; color:#8fa0b4; text-align:center; }
.cv-clm{ display:flex; flex-direction:column; align-items:center; gap:14px; } .cv-clm img{ width:100%; height:auto; } .cv-clm span{ font:700 38px 'Oswald',sans-serif; color:var(--accent); letter-spacing:.06em; } .cv-clm small{ font:600 15px/1.4 Inter,sans-serif; color:#8fa0b4; text-align:center; letter-spacing:.06em; text-transform:uppercase; }
.cb-stage.tall .cv-clintro{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; align-content:start; gap:18px 14px; } .cb-stage.tall .cv-clm{ grid-column:1 / -1; grid-row:1; flex-direction:row; justify-content:center; gap:20px; } .cb-stage.tall .cv-clm img{ width:260px; } .cb-stage.tall .cv-clp{ grid-row:2; align-self:start; } .cb-stage.tall .cv-clph{ max-height:none; } .cb-stage.tall .cv-clp b{ font-size:32px; }
.cv-clh, .cv-clr{ display:grid; grid-template-columns:minmax(0,1fr) 330px minmax(0,1fr); align-items:stretch; } .cv-cl{ display:flex; flex-direction:column; height:100%; }
.cv-clh{ margin-bottom:8px; } .cv-clh > div{ display:flex; align-items:center; justify-content:center; gap:14px; padding-bottom:8px; border-bottom:5px solid var(--pc); } .cv-clh .ph{ width:64px; height:64px; border-radius:14px; overflow:hidden; background:#0b1118; box-shadow:0 0 0 3px var(--pc); flex:none; } .cv-clh b{ font:700 32px/1 'Oswald',sans-serif; color:var(--pc); text-transform:uppercase; letter-spacing:.03em; } .cv-clh .mid{ border-bottom-color:rgba(255,255,255,.12); }
.cv-clr{ flex:1; min-height:0; max-height:96px; border-bottom:1px solid var(--border); } .cv-clr .v{ display:grid; place-items:center; font:700 48px/1 'Oswald',sans-serif; color:#f2f6fb; } .cv-clr .v.win{ background:color-mix(in srgb, #22d65f 30%, transparent); color:#fff; box-shadow:inset 0 0 0 2px rgba(34,214,95,.8); font-size:54px; } .cv-clr .v.na{ color:#6f8196; font-weight:500; }
.cv-clr .l{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font:700 25px/1.15 'Oswald',sans-serif; letter-spacing:.07em; text-transform:uppercase; color:#dbe5f0; padding:0 10px; } .cv-clr .l small{ font:600 12px Inter,sans-serif; letter-spacing:.1em; color:#6f8196; margin-top:2px; }
.cb-stage.tall .cv-clh, .cb-stage.tall .cv-clr{ grid-template-columns:minmax(0,1fr) 210px minmax(0,1fr); } .cb-stage.tall .cv-clr .v{ font-size:40px; } .cb-stage.tall .cv-clr .v.win{ font-size:44px; } .cb-stage.tall .cv-clr .l{ font-size:19px; } .cb-stage.tall .cv-clh b{ font-size:22px; } .cb-stage.tall .cv-clh > div{ flex-direction:column; gap:4px; } .cb-stage.tall .cv-clh .ph{ width:52px; height:52px; } .cb-stage.tall .cv-clr{ max-height:150px; }
.cb-stage.tall .cv-clintro{ align-content:center; } .cb-stage.tall .cv-clph{ aspect-ratio:3 / 4; } .cb-stage.tall .cv-clm{ margin-bottom:6px; }
.cb-stage.tall .cv-clintro{ grid-template-rows:auto auto; align-content:center; gap:22px 14px; }

/* ---------- TikTok / Reels cover v3 (9:16): much bigger headline and numbers, logo in its own clear plate. Landscape is untouched. ---------- */
.th.tall .th-txt{ left:24px; right:24px; top:146px; gap:10px; }
.th.tall h1{ line-height:.97; -webkit-text-stroke:11px #05070a; text-shadow:0 5px 0 #05070a, 0 10px 0 #05070a, 0 16px 22px rgba(0,0,0,.72); }
.th.tall h1 span{ white-space:nowrap; }
.th.tall .th-badge{ font-size:30px; padding:5px 24px; }
.th.tall p{ font-size:36px; -webkit-text-stroke:6px #05070a; }
.th.tall .th-photo{ top:40px; }
.th.tall.tight:not(.poster) .th-photo{ top:130px; height:840px; }
.th.tall .th-stats{ left:40px; right:90px; top:918px; gap:12px; }
.th.tall .th-stats div{ padding:0 6px 10px; border-radius:16px; }
.th.tall .th-stats b{ font-size:78px; line-height:1.02; }
.th.tall .th-stats small{ font-size:19px; padding:5px 0 3px; letter-spacing:.14em; margin:0 -6px; }
.th.tall .th-stats .cap{ top:-52px; font-size:18px; padding:6px 20px 5px; letter-spacing:.1em; }
.th.tall .th-brand{ left:50%; right:auto; top:1050px; transform:translateX(-50%); justify-content:center; gap:16px; padding:7px 26px 7px 20px; border-radius:22px; background:rgba(5,7,10,.9); border:2px solid var(--accent); box-shadow:0 0 34px rgba(24,226,90,.4), 0 8px 0 rgba(0,0,0,.35); white-space:nowrap; z-index:6; }
.th.tall .th-brand .wm{ height:54px; } .th.tall .th-brand span{ display:block; font:700 25px 'Oswald',sans-serif; letter-spacing:.1em; color:var(--accent); text-shadow:none; }
.th.tall .th-emblem{ right:40px; top:44px; width:108px; height:108px; }
.th.poster.tall .th-txt{ top:auto; bottom:430px; }
.th.poster.tall .th-stats{ top:918px; }
.th.poster.tall .th-photo{ top:30px; height:900px; }
.th.poster.tall.tight .th-photo{ top:140px; height:800px; }
/* v3 tuning: the face must sit clear of the headline above and the numbers below */
.th.tall .th-photo{ top:14px; height:800px; }
.th.tall.tight:not(.poster) .th-photo{ top:96px; height:730px; }
.th.poster.tall .th-photo{ top:16px; height:850px; }
.th.poster.tall.tight .th-photo{ top:120px; height:760px; }
.th.tall .th-photo{ -webkit-mask-image:linear-gradient(180deg, #000 82%, transparent 99%); mask-image:linear-gradient(180deg, #000 82%, transparent 99%); }
.th.tall .th-art::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:230px; background:linear-gradient(0deg, rgba(5,7,10,.9), transparent); pointer-events:none; }

.th.tall .th-stats, .th.poster.tall .th-stats{ top:908px; } .th.tall .th-brand{ top:1038px; }

/* v3.1: clear air above and below the face (headline ends ~y500, caption starts ~y870, face between) */
.th.tall .th-photo{ top:16px; height:760px; }
.th.tall.tight:not(.poster) .th-photo{ top:112px; height:690px; }
.th.tall.tight.ln3:not(.poster) .th-photo{ top:150px; height:650px; }
.th.tall .th-stats, .th.poster.tall .th-stats{ top:920px; }
.th.tall .th-stats .cap{ top:-46px; font-size:17px; padding:5px 18px 4px; }
.th.tall .th-brand{ top:1046px; }
.th.poster.tall .th-photo{ top:16px; height:830px; }
.th.poster.tall.tight .th-photo{ top:110px; height:740px; }
/* ---------- Creator Studio on a phone ---------- */
.cr-pick{ grid-template-columns:minmax(0,1fr); }
.cr-form input{ width:100%; box-sizing:border-box; min-width:0; } .cr-search input{ min-width:0; }
@media (max-width:640px){
  .cr-nav{ flex-wrap:nowrap; overflow-x:auto; gap:6px; padding:8px; margin:0 0 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
  .cr-nav::-webkit-scrollbar{ display:none; }
  .cr-nav-t{ flex:none; margin-right:2px; font-size:.8rem; white-space:nowrap; }
  .cr-nav button{ flex:none; min-height:42px; padding:10px 14px; font-size:.84rem; white-space:nowrap; scroll-snap-align:start; }
  .cr-page{ padding-left:12px; padding-right:12px; } .cr-page .panel-head h2{ font-size:1.15rem; } .cr-page .panel-head .hint{ font-size:.78rem; }
  .cr-cards, .cr-ideas, .cr-health-g{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .cr-card{ padding:14px; } .cr-card .btn{ align-self:stretch; justify-content:center; min-height:44px; text-align:center; }
  .cr-pick .toggle-group{ width:100%; } .cr-pick .toggle-group button{ flex:1 1 auto; min-height:42px; }
  .cr-pick .cr-row .btn{ min-height:42px; flex:1 1 auto; }
  .cr-row{ gap:8px; } .cr-chip{ min-height:42px; padding:6px 12px 6px 7px; } .cr-check{ min-height:38px; }
  .cr-search{ max-width:none; } .cr-search input{ font-size:16px; padding:13px 14px; } .cr-form input{ font-size:16px; padding:12px; }
  .cr-addrow{ flex-direction:column; align-items:stretch; } .cr-addrow select{ min-height:44px; font-size:16px; width:100%; } .cr-addrow .cr-search{ width:100%; }
  .cr-sug{ max-height:52vh; overflow:auto; } .cr-sug button{ min-height:48px; padding:8px 10px; }
  .cr-ctl{ flex-direction:column; align-items:stretch; gap:8px; }
  .cr-slides{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .cr-slides::-webkit-scrollbar{ display:none; } .cr-slides button{ flex:none; min-height:40px; white-space:nowrap; }
  .cr-opts{ width:100%; } .cr-opts .toggle-group{ width:100%; } .cr-opts .toggle-group button{ flex:1; min-height:42px; }
  .cr-host{ padding:6px; border-radius:12px; }
  .cr-bar{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
  .cr-bar .btn, .cr-bar button{ min-height:46px; justify-content:center; text-align:center; }
  .cr-bar [data-cr-act="present"], .cr-bar [data-cr-act="share"], .cr-bar .toggle-group, .cr-bar select{ grid-column:1 / -1; }
  .cr-bar .toggle-group button{ flex:1; }
  .cr-bar select{ min-height:44px; font-size:16px; }
  .cr-notes textarea, .cr-script textarea{ font-size:16px; } .cr-notes h4 .btn, .cr-script h4 .btn{ min-height:40px; }
  .cr-edit{ padding:12px; } .cr-edit h4 .btn{ flex:1 1 100%; min-height:42px; }
  .cr-tl button{ min-height:36px; padding:4px 12px; }
  .cr-tp{ padding:2px 2px 2px 10px; } .cr-tp button{ min-width:38px; min-height:38px; font-size:1.2rem; }
  #cr-pbar{ top:6px; max-width:96vw; } #cr-pbar button{ min-height:40px; min-width:40px; }
  .cr-stage-btn{ right:56px; }
}
/* flex/grid children must be allowed to shrink, or a long row of slide buttons widens the whole page */
#cr-root, .cr-page, .cr-ctl, .cr-ctl > div, .cr-slides, .cr-opts, .cr-pick, .cr-bar, .cr-notes > div, .cr-host{ min-width:0; max-width:100%; }
#view-creator{ overflow-x:clip; }
/* the site-wide camera icon would snapshot the whole page: Creator Studio has its own Save image buttons */
#view-creator .shot-btn, #view-creator .cx-bar{ display:none !important; }

/* ---------- Marker: draw on a thumbnail ---------- */
.cr-mk{ margin-top:22px; padding:14px 16px; border:1px solid var(--border); border-radius:16px; background:var(--surface-2, rgba(255,255,255,.04)); }
.cr-mk h4{ margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:1rem; } .cr-mk h4 small{ color:var(--text-muted); font-weight:500; font-size:.8rem; }
.cr-mk-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:4px 0 12px; }
.cr-mk-sw{ display:inline-flex; gap:8px; }
.cr-mk-sw button{ width:40px; height:40px; border-radius:50%; border:3px solid rgba(255,255,255,.28); background:var(--c); cursor:pointer; padding:0; }
.cr-mk-sw button.on{ border-color:#fff; box-shadow:0 0 0 3px var(--c), 0 0 18px var(--c); }
.cr-mk-w{ display:inline-flex; align-items:center; gap:8px; font:700 .72rem 'Oswald',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); } .cr-mk-w input{ width:150px; accent-color:var(--accent); }
.cr-mk-text{ padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2, #141b25); color:var(--text); font-size:1rem; min-width:200px; }
.cr-mk-cv{ display:block; max-width:100%; height:auto; margin:0 auto; border-radius:12px; touch-action:none; cursor:crosshair; background:#05070a; box-shadow:0 8px 30px rgba(0,0,0,.45); -webkit-user-select:none; user-select:none; }
.cr-mk-cv.tall{ max-height:76vh; width:auto; }
.cr-mk-act{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
@media (max-width:640px){
  .cr-mk{ padding:12px; } .cr-mk-bar{ gap:10px; } .cr-mk-bar .toggle-group{ width:100%; flex-wrap:wrap; } .cr-mk-bar .toggle-group button{ flex:1 1 30%; min-height:42px; }
  .cr-mk-sw{ width:100%; justify-content:space-between; } .cr-mk-sw button{ width:44px; height:44px; }
  .cr-mk-w{ width:100%; } .cr-mk-w input{ flex:1; width:auto; } .cr-mk-text{ width:100%; font-size:16px; }
  .cr-mk-act{ display:grid; grid-template-columns:1fr 1fr; } .cr-mk-act .btn{ min-height:46px; justify-content:center; text-align:center; } .cr-mk-act [data-cd="mk-save"], .cr-mk-act [data-cd="mk-share"]{ grid-column:1 / -1; }
}
/* Marker: player picker + selected-object bar */
.cr-mk-pp{ display:grid; gap:8px; margin:0 0 12px; padding:12px; border:1px dashed var(--border); border-radius:12px; }
.cr-mk-selbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px; padding:10px 12px; border:1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); border-radius:12px; background:color-mix(in srgb, var(--accent) 7%, transparent); }
.cr-mk-selbar > b{ margin-right:6px; font-size:.95rem; } .cr-mk-selbar .btn{ padding:8px 12px; font-size:.84rem; } .cr-mk-selbar .cr-mk-del:hover{ border-color:#ff5148; color:#ff6f64; }
@media (max-width:640px){
  .cr-mk-pp{ padding:10px; } .cr-mk-selbar{ display:grid; grid-template-columns:1fr 1fr; } .cr-mk-selbar > b{ grid-column:1 / -1; } .cr-mk-selbar .btn{ min-height:44px; justify-content:center; text-align:center; }
  .cr-mk-bar .toggle-group button{ flex:1 1 22%; }
}
.cr-mk-w input[type=range]{ height:30px; } @media (max-width:640px){ .cr-mk-w input[type=range]{ height:38px; } }
/* ---------- Compare page ---------- */
.cmp-panel{ max-width:1100px; margin:0 auto; }
.cmp-top h2{ margin:0; font:650 1.5rem var(--font); letter-spacing:-.02em; text-transform:none; }
.cmp-sports{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 12px; }
.cmp-sports button{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:99px; border:1px solid var(--border); background:var(--surface-2, rgba(255,255,255,.04)); color:var(--text); font:700 .95rem Inter,sans-serif; cursor:pointer; }
.cmp-sports button:hover{ border-color:var(--accent); }
.cmp-sports button.active{ background:var(--accent); border-color:var(--accent); color:#04100a; }
.cmp-sports img{ width:22px; height:22px; object-fit:contain; }
.cmp-add{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cmp-search{ position:relative; flex:1 1 320px; min-width:0; }
.cmp-si{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:1.05rem; pointer-events:none; }
.cmp-in{ width:100%; box-sizing:border-box; padding:13px 14px 13px 42px; border-radius:14px; border:1px solid var(--border); background:var(--surface-2, rgba(255,255,255,.05)); color:var(--text); font-size:1rem; }
.cmp-in:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.cmp-in:disabled{ opacity:.6; }
.cmp-sug{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px); max-height:380px; overflow:auto; border:1px solid var(--border); border-radius:14px; background:var(--card, #121923); box-shadow:0 16px 40px rgba(0,0,0,.45); padding:6px; }
.cmp-sug[hidden]{ display:none; }
.cmp-sug-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:var(--text); cursor:pointer; }
.cmp-sug-row:hover, .cmp-sug-row.on{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
.cmp-sug-row img, .cmp-sug-row .ph{ width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 12%; background:#1a2331; flex:none; }
.cmp-sug-n{ flex:1; min-width:0; } .cmp-sug-n b{ display:block; font-size:.95rem; } .cmp-sug-n small{ color:var(--text-muted); font-size:.78rem; }
.cmp-sug-go{ color:var(--accent); font-weight:700; font-size:.82rem; }
.cmp-sug-none{ padding:14px; color:var(--text-muted); }
.cmp-starter{ margin:14px 0 4px; display:flex; flex-direction:column; gap:10px; }
.cmp-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cmp-row > small{ color:var(--text-muted); font:700 .72rem 'Oswald',sans-serif; letter-spacing:.1em; text-transform:uppercase; margin-right:2px; }
.cmp-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px 6px 7px; border-radius:99px; border:1px solid var(--border); background:var(--surface-2, rgba(255,255,255,.04)); color:var(--text); cursor:pointer; font-size:.88rem; }
.cmp-chip:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.cmp-chip img{ width:24px; height:24px; border-radius:50%; object-fit:cover; object-position:50% 12%; background:#1a2331; }
.cmp-chip small{ color:var(--text-muted); font-size:.72rem; }
.cmp-chip.vs{ padding:7px 14px; } .cmp-chip.vs i{ font-style:normal; color:var(--accent); font-weight:800; font-size:.75rem; text-transform:uppercase; }
.cmp-note{ margin:8px 0 0; }
#cmp-body{ margin-top:16px; }

.cmp-actions{ display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:space-between; align-items:center; margin:0 0 12px; }
.cmp-act-l, .cmp-act-r{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cmp-ctl{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .cmp-ctl > small{ color:var(--text-muted); font:700 .72rem 'Oswald',sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.cmp-ctl select{ padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2, #141b25); color:var(--text); font-size:.9rem; }

.cmp-card{ border:1px solid var(--border); border-radius:20px; background:var(--card, #121923); padding:18px; }
.cmp-ct{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cmp-ct b{ display:block; font:650 1.3rem/1.2 var(--font); letter-spacing:-.02em; text-transform:none; } .cmp-ct small{ color:var(--text-muted); font-size:.82rem; }
.cmp-brand{ display:inline-flex; align-items:center; gap:9px; font:600 .8rem var(--font); letter-spacing:.04em; color:var(--accent); } .cmp-brand img{ border-radius:50%; box-shadow:0 0 0 2px #05070a, 0 0 0 4px var(--accent); }
.cmp-pcs{ display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.cmp-pcs.n1{ grid-template-columns:minmax(0,420px); } .cmp-pcs.n3{ grid-template-columns:repeat(3, minmax(0,1fr)); } .cmp-pcs.n4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.cmp-pc{ position:relative; display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:16px; border:1px solid var(--border); border-top:5px solid var(--pc); background:linear-gradient(180deg, color-mix(in srgb, var(--pc) 13%, transparent), transparent 70%); min-width:0; }
.cmp-ph{ flex:none; width:84px; height:84px; border-radius:50%; overflow:hidden; background:color-mix(in srgb, var(--pc) 25%, #0b1118); box-shadow:0 0 0 3px var(--pc); }
.cmp-hs{ width:100%; height:100%; object-fit:cover; object-position:50% 8%; display:block; } .cmp-hs.ph{ display:grid; place-items:center; font:700 1.6rem 'Oswald',sans-serif; color:#fff; }
.cmp-pn{ min-width:0; } .cmp-pn b{ display:block; font:650 1.05rem/1.2 var(--font); letter-spacing:-.01em; }
.cmp-pm{ display:flex; align-items:center; gap:6px; margin-top:3px; color:var(--text-muted); font-size:.82rem; flex-wrap:wrap; } .cmp-pm i{ font-style:normal; font-weight:700; color:var(--text); padding:1px 8px; border-radius:99px; background:rgba(255,255,255,.09); }
.cmp-tl{ width:20px; height:20px; object-fit:contain; vertical-align:middle; } .cmp-pm .team-badge, .cmp-pm img{ max-height:22px; }
.cmp-pn small{ display:block; margin-top:4px; color:var(--text-muted); font-size:.74rem; line-height:1.35; }
.cmp-none{ display:block; margin-top:5px; font-style:normal; font-size:.78rem; color:#ffc233; }
.cmp-x{ position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:var(--text-muted); cursor:pointer; font-size:.8rem; line-height:1; } .cmp-x:hover{ background:rgba(255,93,82,.25); color:#ff6f64; }
.cmp-one{ margin:14px 0 2px; color:var(--text-muted); }

.cmp-mid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:14px; margin:14px 0; }
.cmp-radar, .cmp-edge{ border:1px solid var(--border); border-radius:16px; padding:12px 14px; background:var(--surface-2, rgba(255,255,255,.03)); min-width:0; }
.cmp-rh b, .cmp-eh b{ display:block; font:700 .95rem 'Oswald',sans-serif; letter-spacing:.1em; text-transform:uppercase; } .cmp-rh small, .cmp-eh small{ color:var(--text-muted); font-size:.74rem; line-height:1.3; display:block; margin-top:2px; }
.cmp-radar svg{ width:100%; height:auto; display:block; margin-top:4px; }
.cmp-ring{ fill:none; stroke:var(--border); stroke-width:1; } .cmp-ring:nth-of-type(4){ stroke-width:1.5; } .cmp-spoke{ stroke:var(--border); stroke-width:1; }
.cmp-axl{ fill:var(--text-muted); font:600 11.5px Inter,sans-serif; }
.cmp-poly{ fill:color-mix(in srgb, var(--pc) 22%, transparent); stroke:var(--pc); stroke-width:2.4; stroke-linejoin:round; } .cmp-dot{ fill:var(--pc); stroke:var(--card, #121923); stroke-width:1.5; }
.cmp-radar-note p{ margin:6px 0 0; color:var(--text-muted); font-size:.88rem; }
.cmp-split{ display:flex; height:16px; border-radius:99px; overflow:hidden; margin:12px 0 10px; background:var(--border); gap:2px; } .cmp-split i{ background:var(--pc); min-width:3px; }
.cmp-tally{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.cmp-tally li{ display:flex; align-items:baseline; gap:8px; } .cmp-tally .dot{ width:11px; height:11px; border-radius:50%; background:var(--pc); flex:none; align-self:center; } .cmp-tally b{ font:700 1.5rem/1 'Oswald',sans-serif; min-width:1.4em; } .cmp-tally span:last-child{ color:var(--text-muted); font-size:.9rem; }
.cmp-sum{ margin:12px 0 0; font-size:.92rem; }

.cmp-tw{ margin-top:6px; }
.cmp-t{ width:100%; border-collapse:collapse; table-layout:fixed; }
.cmp-t .cmp-l{ width:30%; text-align:left; }
.cmp-t thead th{ padding:8px 8px; font:700 1rem 'Oswald',sans-serif; letter-spacing:.06em; text-transform:uppercase; border-bottom:3px solid var(--pc); } .cmp-t thead .cmp-l{ border-bottom-color:var(--border); }
.cmp-t tbody th, .cmp-t tbody td{ background:none; }
.cmp-sh th{ padding:14px 0 6px; text-align:left; border:0; } .cmp-sh button{ display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border:0; border-radius:10px; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--text); font:700 .9rem 'Oswald',sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; text-align:left; }
.cmp-sh small{ margin-left:auto; color:var(--text-muted); font:600 .72rem Inter,sans-serif; } .cmp-chev{ display:inline-block; transition:transform .15s; color:var(--accent); }
.cmp-sec.closed .cmp-r{ display:none; } .cmp-sec.closed .cmp-chev{ transform:rotate(-90deg); }
.cmp-r > th, .cmp-r > td{ padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.cmp-r .cmp-l{ font-weight:600; font-size:.88rem; } .cmp-r .cmp-l small{ display:block; color:var(--text-muted); font-weight:500; font-size:.68rem; }
.cmp-c{ text-align:center; }
.cmp-v{ display:flex; align-items:baseline; justify-content:center; gap:6px; font:700 1.12rem 'Oswald',sans-serif; letter-spacing:.02em; color:var(--text); } .cmp-v em{ font:700 .72rem Inter,sans-serif; font-style:normal; color:var(--pc); }
.cmp-bar{ height:5px; border-radius:99px; background:var(--border); margin:4px auto 0; max-width:150px; overflow:hidden; } .cmp-bar i{ display:block; height:100%; border-radius:99px; background:color-mix(in srgb, var(--pc) 55%, transparent); }
.cmp-c.lead{ background:color-mix(in srgb, var(--pc) 16%, transparent); } .cmp-c.lead .cmp-v span{ color:var(--pc); font-size:1.22rem; } .cmp-c.lead .cmp-bar i{ background:var(--pc); }
.cmp-c.na .cmp-v{ color:var(--text-muted); font-weight:500; }
.cmp-fine{ margin-top:14px; color:var(--text-muted); font-size:.72rem; line-height:1.4; }

@media (max-width:860px){
  .cmp-pcs.n3, .cmp-pcs.n4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cmp-mid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .cmp-card{ padding:12px; border-radius:16px; }
  .cmp-pcs, .cmp-pcs.n3, .cmp-pcs.n4{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .cmp-pcs.n1{ grid-template-columns:minmax(0,1fr); }
  .cmp-pc{ flex-direction:column; text-align:center; padding:12px 8px 10px; } .cmp-pm{ justify-content:center; } .cmp-ph{ width:70px; height:70px; }
  .cmp-t .cmp-l{ width:34%; } .cmp-r .cmp-l{ font-size:.78rem; } .cmp-v{ font-size:.98rem; } .cmp-c.lead .cmp-v span{ font-size:1.05rem; } .cmp-v em{ display:none; }
  .cmp-ct b{ font-size:1.1rem; } .cmp-brand span{ display:none; }
  .cmp-actions{ flex-direction:column; align-items:stretch; } .cmp-act-r .btn{ flex:1; }
}

.cmp-gaps{ margin-top:14px; padding-top:10px; border-top:1px solid var(--border); } .cmp-gaps > b{ display:block; font:700 .85rem 'Oswald',sans-serif; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }
.cmp-gaps ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .cmp-gaps li{ display:flex; gap:9px; align-items:baseline; font-size:.88rem; } .cmp-gaps .dot{ width:9px; height:9px; border-radius:50%; background:var(--pc); flex:none; align-self:center; } .cmp-gaps li b{ font-weight:700; }

/* ---------- head-to-head layout (two players) ---------- */
.cmp-clh{ display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,230px) minmax(0,1fr); align-items:stretch; margin-top:6px; }
.cmp-cp{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding:0 14px 12px; border-bottom:4px solid var(--pc); }
.cmp-cph{ width:100%; max-width:300px; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:linear-gradient(180deg, color-mix(in srgb, var(--pc) 24%, #0b1118), #0b1118); box-shadow:0 0 0 2px color-mix(in srgb, var(--pc) 55%, transparent); }
.cmp-cph img, .cmp-cph .ph{ width:100%; height:100%; object-fit:cover; object-position:50% 6%; display:block; } .cmp-cph .ph{ display:grid; place-items:center; font:700 3rem 'Oswald',sans-serif; color:#fff; }
.cmp-cpn{ display:flex; align-items:center; justify-content:center; min-height:2.35em; font:650 1.3rem/1.15 var(--font); letter-spacing:-.02em; text-transform:none; text-align:center; color:var(--text); text-wrap:balance; overflow-wrap:anywhere; }
.cmp-cpm{ display:flex; align-items:center; gap:6px; min-height:26px; color:var(--text-muted); font-size:.88rem; flex-wrap:wrap; justify-content:center; } .cmp-cpm i{ font-style:normal; font-weight:700; color:var(--text); padding:1px 8px; border-radius:99px; background:rgba(255,255,255,.09); }
.cmp-clm{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:0 8px 14px; } .cmp-clm img{ width:100%; max-width:200px; height:auto; } .cmp-clm small{ text-align:center; color:var(--text-muted); font-size:.78rem; line-height:1.35; }
.cmp-cl-t{ margin-top:14px; }
.cmp-cl-t thead th{ border-bottom:3px solid var(--pc, var(--border)); } .cmp-cl-t .cmp-cv-h{ width:34%; padding:8px; text-align:center; font:700 .95rem 'Oswald',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--pc); } .cmp-cl-t thead th:nth-child(2){ border-bottom-color:var(--border); }
.cmp-cl-t .cmp-sh th{ text-align:center; } .cmp-cl-t .cmp-sh button{ justify-content:center; }
.cmp-cv{ text-align:center; padding:10px 8px; border-bottom:1px solid var(--border); font:700 1.3rem 'Oswald',sans-serif; letter-spacing:.02em; color:var(--text); }
.cmp-cv.win{ background:color-mix(in srgb, #22d65f 28%, transparent); color:#fff; font-size:1.4rem; } .cmp-cv.na{ color:var(--text-muted); font-weight:500; }
.cmp-cl-l{ width:32%; text-align:center; padding:10px 6px; border-bottom:1px solid var(--border); font:700 .92rem Inter,sans-serif; letter-spacing:.02em; color:var(--text); } .cmp-cl-l small{ display:block; margin-top:2px; font-size:.66rem; font-weight:500; color:var(--text-muted); }
.cmp-r.cl:hover td, .cmp-r.cl:hover th{ background-color:rgba(255,255,255,.03); } .cmp-r.cl:hover td.win{ background-color:color-mix(in srgb, #22d65f 34%, transparent); }
@media (max-width:640px){
  .cmp-clh{ grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr); } .cmp-cp{ padding:0 4px 10px; } .cmp-cph{ max-width:150px; border-radius:10px; } .cmp-cpn{ font-size:.92rem; min-height:2.4em; } .cmp-cpm{ font-size:.74rem; } .cmp-clm{ padding:0 2px 10px; } .cmp-clm small{ display:none; }
  .cmp-cv{ font-size:1.05rem; padding:8px 4px; } .cmp-cv.win{ font-size:1.12rem; } .cmp-cl-l{ font-size:.74rem; padding:8px 3px; } .cmp-cl-t .cmp-cv-h{ font-size:.8rem; }
}
/* even head-to-head: both cards start at the same line, photos the same size and crop, names on two reserved lines */
.cmp-cph img, .cmp-cph .ph{ object-position:50% 8%; }
.cmp-cph{ border-radius:var(--r-lg); }
.cmp-pc, .cmp-card, .cmp-radar, .cmp-edge{ border-radius:var(--r-lg); }
.cmp-sports button, .cmp-chip, .cmp-in{ border-radius:var(--r-md); }
.cmp-ph, .cmp-chip img, .cmp-sug-row img{ border-radius:50%; }
.cmp-loadcar{ min-height:180px; }
.cmp-cl-t .cmp-cv-h, .cmp-t thead th{ font-family:var(--font); font-weight:650; letter-spacing:.01em; text-transform:none; font-size:.95rem; }
.cmp-sh button{ font-family:var(--font); font-size:.78rem; letter-spacing:.07em; }
.cmp-v{ font-family:var(--font); font-weight:650; }
.cmp-cv{ font-family:var(--font); font-weight:650; }
.cmp-cv.win{ background:color-mix(in srgb, var(--accent) 22%, transparent); }
.cmp-mid:not(:has(.cmp-radar)){ grid-template-columns:minmax(0,1fr); }
.cmp-actions .cmp-ctl{ gap:6px; }
@media (max-width:640px){
  .cmp-act-l{ gap:8px 14px; }
  .cmp-ctl .toggle-group button{ min-height:36px !important; padding:6px 12px !important; font-size:.82rem !important; }
}
/* ---- Profile / Deep Dive windows: easy to leave, fit the screen (snippet-profilenav.js) ---- */
img.nba-hs, img.rkc-hs, img.tb-headshot{ cursor:pointer; }
#pl-panel img, .nlab-modal img{ cursor:auto; }
@media (max-width:760px){
  /* a big close button that stays on screen while you scroll */
  #pl-modal .modal-close, .nlab-modal .nlab-x{
    position:fixed !important; top:calc(env(safe-area-inset-top, 0px) + 10px) !important; right:12px !important; z-index:400;
    width:46px !important; height:46px !important; border-radius:50% !important; display:flex !important; align-items:center; justify-content:center;
    background:rgba(0,0,0,.72) !important; color:#fff !important; border:1px solid rgba(255,255,255,.35) !important; font-size:1.25rem !important; line-height:1;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 4px 16px rgba(0,0,0,.5);
  }
  #pl-modal:not(.show) .modal-close, .nlab-modal:not(.show) .nlab-x{ display:none !important; }
  /* nothing hides under the button or the notch */
  #pl-modal .pm-tabbar{ padding-right:64px !important; top:0; }
  #pl-modal .pm-head{ padding-right:64px; }
  #pl-modal .pm-head h2{ overflow-wrap:anywhere; }
  .nlab-modal .nlab-card-w{ padding-top:calc(env(safe-area-inset-top, 0px) + 62px) !important; }
  .nlab-modal .nlab-head{ padding-right:0; }
  /* the profile sheet always fills the screen exactly: no side scroll, long names wrap */
  #pl-modal, .nlab-modal{ overscroll-behavior:contain; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
  #pl-modal #pl-panel{ overflow-x:hidden; }
  #pl-modal .pm-head-photo{ width:84px; }
  #pl-modal .pm-head-meta{ gap:6px; } #pl-modal .pm-head-bio{ gap:10px 14px; }
  #pl-modal .pm-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #pl-modal table{ font-size:.86rem; }
  #pl-modal .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* leave room for the bottom app bar so the last section can be scrolled fully into view */
  #pl-modal #pl-panel, .nlab-modal .nlab-card-w{ padding-bottom:calc(var(--ab-h, 58px) + env(safe-area-inset-bottom, 0px) + 40px) !important; }
}
/* the camera button sits beside the close button */
@media (max-width:760px){ #pl-panel > .shot-btn{ position:absolute; right:70px !important; top:calc(env(safe-area-inset-top, 0px) + 12px) !important; } }

/* Advanced stats inside the NFL Deep Dive tab */
.pm-adv-embed{ margin-top:18px; padding:14px 16px 16px; border:1px solid var(--border); border-radius:16px; background:var(--surface-2); }
.pm-adv-embed .pm-section-head, .pm-adv-embed > h3{ margin-top:0; }
@media (max-width:760px){ .pm-adv-embed{ padding:12px 10px 14px; } .pm-adv-embed .pm-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* ---------- display ads: one quiet, clearly labeled unit at the end of a page (snippet-ads.js) ---------- */
.ad-slot{ display:block; margin:22px auto 6px; max-width:970px; text-align:center; }
.ad-slot[hidden]{ display:none; }
.ad-slot small{ display:block; margin-bottom:6px; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); opacity:.75; }
.ad-slot ins.adsbygoogle{ min-height:90px; border-radius:12px; overflow:hidden; background:transparent; }
.ad-slot ins.adsbygoogle[data-ad-status="unfilled"]{ display:none !important; }
@media (max-width:640px){ .ad-slot{ margin:18px 0 4px; } .ad-slot ins.adsbygoogle{ min-height:100px; } }
@media print{ .ad-slot{ display:none !important; } }
/* ---------- top tabs: one row that fits the window (sizes scale with the screen width; wraps to two tidy rows only on small laptops/tablets) ---------- */
@media (min-width:901px){
  header.topbar nav.tabs{ flex-wrap:nowrap; overflow:visible; gap:0; justify-content:center; min-width:0; }
  header.topbar nav.tabs button{ flex:0 1 auto; white-space:nowrap; padding:9px clamp(5px, .8vw, 13px); font-size:clamp(.7rem, .95vw, .9rem); }
  header.topbar nav.tabs button.sport-tab{ gap:clamp(4px, .45vw, 7px); margin:0 1px; }
  header.topbar nav.tabs button.sport-tab img, header.topbar nav.tabs button.sport-tab .sport-logo{ width:clamp(15px, 1.4vw, 22px); height:clamp(15px, 1.4vw, 22px); }
  header.topbar nav.tabs .trial-badge, header.topbar nav.tabs button .pill, header.topbar nav.tabs button .badge{ font-size:clamp(.5rem, .6vw, .62rem); padding:2px clamp(4px, .5vw, 8px); }
}
@media (min-width:901px) and (max-width:1139px){
  header.topbar nav.tabs button{ padding:8px 4px; font-size:.66rem; } header.topbar nav.tabs button.sport-tab{ gap:3px; margin:0; } header.topbar nav.tabs button.sport-tab img, header.topbar nav.tabs button.sport-tab .sport-logo{ width:14px; height:14px; }
  header.topbar nav.tabs .trial-badge, header.topbar nav.tabs button .pill, header.topbar nav.tabs button .badge{ font-size:.46rem; padding:1px 4px; }
}
/* tablets: the main tabs wrap into two tidy rows instead of scrolling off the side */
@media (min-width:641px) and (max-width:900px){
  header.topbar nav.tabs{ flex-wrap:nowrap; overflow:visible; justify-content:center; }
  header.topbar nav.tabs button{ flex:0 1 auto; white-space:nowrap; padding:8px 8px; font-size:.78rem; }
  header.topbar nav.tabs button.sport-tab img, header.topbar nav.tabs button.sport-tab .sport-logo{ width:16px; height:16px; }
}
/* phones: the section rows under the header are smaller so more of each row is on screen at once */
@media (max-width:640px){
  nav.subtabs:not(.sport-cats) button{ padding:11px 9px !important; font-size:.78rem !important; }
  nav.subtabs.sport-cats button, nav.sport-cats-sims button{ padding:8px 11px !important; font-size:.8rem !important; }
  nav.subtabs{ gap:0 !important; }
}
/* ---------- compact header on tablets and laptops (641-1599px): a small logo + search + account on one line, the tabs in one slim row under it ---------- */
@media (min-width:641px) and (max-width:1599px){
  header.topbar{ display:grid !important; grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:"brand search right" "tabs tabs tabs"; align-items:center; gap:4px 16px; padding:8px 18px 6px !important; }
  header.topbar .brand{ grid-area:brand; } header.topbar .brand .brand-logo{ height:50px !important; }
  header.topbar .site-search{ grid-area:search; justify-self:center; width:100%; max-width:340px; flex:none; order:0; }
  header.topbar .topbar-right{ grid-area:right; }
  header.topbar nav.tabs{ grid-area:tabs; width:100%; flex:none; order:0; justify-content:center; }
}
/* below 1280px the secondary tabs (Settings, Customize, Blog, Help, About, Discord) move into a "More" menu so the main tabs stay one slim row */
/* the fit check (snippet-nav.js) puts every tab that does not fit into a More drop-down */
.nav-more{ display:none; position:relative; white-space:nowrap; }
.nav-more.show{ display:inline-flex; align-items:center; gap:4px; }
.nav-more .nm-l{ max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.nav-more.more-on{ color:#fff; border-bottom-color:var(--accent); font-weight:700; }
.tab-overflow{ display:none !important; }
.fit-measure{ flex-wrap:nowrap !important; justify-content:flex-start !important; }
header.topbar nav.tabs, nav.subtabs, nav.cr-nav{ flex-wrap:nowrap !important; }
.cr-nav .nav-more.show{ min-height:42px; }
@media (min-width:641px) and (max-width:1279px){
  header.topbar nav.tabs button{ padding:8px clamp(6px, 1vw, 12px); font-size:clamp(.74rem, 1.2vw, .86rem); }
}
.nav-more-menu{ position:fixed; z-index:300; min-width:200px; padding:6px; border:1px solid var(--border); border-radius:12px; background:var(--surface, #12161d); box-shadow:0 18px 50px -12px rgba(0,0,0,.75); display:none; }
.nav-more-menu.show{ display:block; }
.nav-more-menu button.on{ background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent); }
.nav-more-menu{ max-height:70vh; overflow:auto; }
.nav-more-menu button{ display:flex; align-items:center; gap:8px; width:100%; padding:10px 12px; border:0; border-radius:8px; background:none; color:var(--text); font:inherit; font-size:.9rem; font-weight:600; text-align:left; cursor:pointer; }
.nav-more-menu button:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
@media (min-width:641px) and (max-width:760px){
  header.topbar nav.tabs button{ padding:7px 5px !important; font-size:.7rem !important; } header.topbar nav.tabs button.sport-tab{ gap:3px !important; margin:0 !important; }
  header.topbar nav.tabs button.sport-tab img, header.topbar nav.tabs button.sport-tab .sport-logo{ width:14px !important; height:14px !important; }
  header.topbar nav.tabs #tab-membership > *:not(:first-child), header.topbar nav.tabs #tab-membership .trial-badge{ display:none !important; }
}
/* ---------- Surface Pro / tablet / laptop (641-1599px): every tab row is a notch smaller so the whole stack under the logo takes less of the screen ---------- */
@media (min-width:641px) and (max-width:1599px){
  header.topbar nav.tabs button{ padding:6px clamp(5px, .7vw, 11px); font-size:clamp(.68rem, .88vw, .82rem); }
  header.topbar nav.tabs button.sport-tab{ padding:5px clamp(5px, .7vw, 10px); }
  header.topbar nav.tabs button.sport-tab img, header.topbar nav.tabs button.sport-tab .sport-logo{ width:15px; height:15px; }
  header.topbar .brand .brand-logo{ height:44px !important; }
  header.topbar .site-search input{ padding:6px 14px; font-size:.78rem; }
  nav.subtabs.sport-cats{ padding-top:4px !important; padding-bottom:4px !important; }
  nav.subtabs.sport-cats button, nav.sport-cats-sims button{ font-size:.76rem !important; padding:4px 13px !important; }
  nav.subtabs:not(.sport-cats) button{ font-size:.8rem !important; padding:9px 11px !important; }
}
/* Self-hosted fonts (no third-party request, preloaded). Redesign v2 (Nov 2026): Geist for everything, Geist Mono for stat labels. The site's CSS still says 'Oswald' (labels, tabs, buttons, numerals) and 'Inter' (text) in hundreds of places, so BOTH names now point at the Geist file; new CSS should say 'Geist' directly. 'Geist' (the page text, preloaded) uses font-display:optional so a slow connection cannot re-paint the headline late; the 'Inter', 'Oswald' and 'Geist Mono' ALIAS faces use swap, because they are not preloaded under their own names and optional would leave them on a generic font for the whole visit. Old Inter/Oswald/Big Shoulders/Schibsted/Plex files are deleted. */
@font-face{ font-family:'Geist'; font-style:normal; font-weight:400 800; font-display:optional; src:url(/fonts/geist-400-800-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/geist-400-800-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/geist-400-800-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Geist'; font-style:normal; font-weight:400 800; font-display:optional; src:url(/fonts/geist-400-800-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/geist-400-800-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/geist-400-800-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Geist Mono'; font-style:normal; font-weight:400 600; font-display:swap; src:url(/fonts/geist-mono-400-600-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Geist Mono'; font-style:normal; font-weight:400 600; font-display:swap; src:url(/fonts/geist-mono-400-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- grouped primary navigation (snippet-gnav.js) ---- */
.gnav{ display:none; }
html.has-gnav .gnav{ display:flex; align-items:center; justify-content:center; gap:2px; flex:1 1 auto; min-width:0; }
html.has-gnav header.topbar nav.tabs{ display:none !important; }
@media (max-width:640px){ html.has-gnav .gnav{ display:none; } }
header.topbar{ padding:10px 20px; gap:16px; }
.gn-dd{ position:relative; }
.gn-link{ position:relative; display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 12px; border:0; border-radius:var(--r-md); background:transparent; color:var(--text-muted); font:550 0.9rem/1 var(--font); letter-spacing:-0.005em; cursor:pointer; white-space:nowrap; transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.gn-link:hover{ color:var(--text); background:color-mix(in srgb, var(--text) 7%, transparent); }
.gn-link.on{ color:var(--text); }
.gn-link.on::after{ content:''; position:absolute; left:12px; right:12px; bottom:-11px; height:2px; border-radius:2px; background:var(--accent); }
.gn-pro{ color:var(--accent); }
.gn-pro:hover{ color:var(--accent); }
.gn-icon{ padding:0 8px; }
.gn-chev{ transition:transform var(--t-fast) var(--ease); opacity:0.7; }
.gn-trigger[aria-expanded="true"] .gn-chev{ transform:rotate(180deg); }
.gn-trigger[aria-expanded="true"]{ color:var(--text); background:color-mix(in srgb, var(--text) 7%, transparent); }
.gn-menu{ position:absolute; top:calc(100% + 12px); left:0; z-index:60; min-width:330px; padding:6px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }
.gn-menu.show{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.gn-menu.gn-right{ left:auto; right:0; min-width:220px; }
.gn-item{ display:flex; align-items:flex-start; gap:12px; width:100%; padding:9px 10px; border:0; border-radius:var(--r-md); background:transparent; color:var(--text); text-align:left; cursor:pointer; font-family:var(--font); transition:background-color var(--t-fast) var(--ease); }
.gn-item:hover, .gn-item:focus-visible{ background:var(--surface-2); outline:none; }
.gn-item .ic{ flex:none; margin-top:2px; color:var(--text-muted); }
.gn-item:hover .ic{ color:var(--accent); }
.gn-it{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.gn-it b{ font-size:0.88rem; font-weight:600; letter-spacing:-0.005em; }
.gn-it small{ font-size:0.76rem; color:var(--text-muted); line-height:1.35; }
.gn-right .gn-item{ align-items:center; }
.gn-right .gn-item .ic{ margin-top:0; }
@media (max-width:900px){ .gn-link{ padding:0 8px; font-size:0.84rem; } .gn-menu{ min-width:280px; } }
@media (prefers-reduced-motion: reduce){ .gn-menu, .gn-chev{ transition:none; } }

/* header layout with the grouped menu: ONE row (logo, menu, search, account) from 900px up; two slim rows on tablets */
@media (min-width:900px){
  html.has-gnav header.topbar{ display:flex !important; flex-wrap:nowrap; align-items:center; gap:18px; padding:8px 20px !important; }
  html.has-gnav header.topbar .brand .brand-logo{ height:40px !important; }
  html.has-gnav .gnav{ justify-content:flex-start; margin-left:6px; }
  html.has-gnav header.topbar .site-search{ flex:0 1 250px; width:auto; max-width:none; justify-self:auto; margin-left:auto; }
  .gn-link.on::after{ bottom:-9px; }
}
@media (min-width:641px) and (max-width:899px){
  html.has-gnav .gnav{ grid-area:tabs; width:100%; justify-content:flex-start; flex-wrap:nowrap; overflow:visible; }
  .gn-link.on::after{ bottom:-7px; }
}

/* fixed header height from 900px up, so nothing below it can shift while fonts and the menu load */
@media (min-width:900px){ html.has-gnav header.topbar{ height:53px; box-sizing:border-box; } }

/* ---- new Home (snippet-home2.js) ---- */
#home2{ max-width:1180px; margin:0 auto; }
#home2 .h2-slot:empty{ display:none; }
#home2 .h2-slot > *{ margin-bottom:16px; }
.h2-hero{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:40px; align-items:center; padding:48px 0 40px; }
.h2-eyebrow{ display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--text-muted); font-size:0.74rem; font-weight:600; letter-spacing:0.02em; margin-bottom:18px; }
.h2-eyebrow .ic{ color:var(--accent); }
.h2-hero h1{ font-size:clamp(2.1rem, 4.4vw, 3.5rem); line-height:1.04; letter-spacing:-0.035em; font-weight:680; margin:0 0 14px; max-width:15em; color:var(--text); background:none; -webkit-text-fill-color:currentColor; }
.h2-lede{ color:var(--text-muted); font-size:1.06rem; line-height:1.55; max-width:34em; margin:0 0 22px; }
.h2-cta{ display:flex; flex-wrap:wrap; gap:10px; }
.h2-cta .btn{ padding:11px 20px; font-size:0.92rem; }
.h2-fine{ color:var(--text-faint); font-size:0.78rem; line-height:1.5; max-width:44em; margin:14px 0 0; }

.h2-board{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.h2-board-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); }
.h2-board-title{ color:var(--text-muted); font-size:0.78rem; font-weight:550; }
.h2-seg{ display:inline-flex; padding:2px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); }
.h2-seg button{ border:0; background:transparent; color:var(--text-muted); font:600 0.78rem/1 var(--font); padding:7px 12px; border-radius:var(--r-sm); cursor:pointer; transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.h2-seg button:hover{ color:var(--text); }
.h2-seg button[aria-selected="true"]{ background:var(--surface-3); color:var(--text); }
.h2-board-body{ padding:6px 14px 10px; min-height:250px; }
.h2-tr{ display:grid; grid-template-columns:96px minmax(0, 1fr) minmax(0, 1.1fr); gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--border); font-size:0.86rem; }
.h2-tbl .h2-tr:last-child{ border-bottom:0; }
.h2-tbl:not(:has(.h2-mk)) .h2-tr{ grid-template-columns:110px minmax(0, 1fr); }
.h2-th{ padding:8px 0; color:var(--text-muted); font-size:0.68rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; }
.h2-when{ color:var(--text-muted); font-variant-numeric:tabular-nums; font-size:0.8rem; white-space:nowrap; }
.h2-mu{ display:flex; align-items:center; gap:7px; font-weight:600; min-width:0; }
.h2-mu i{ color:var(--text-faint); font-style:normal; font-weight:400; }
.h2-mu em{ font-style:normal; font-size:0.66rem; font-weight:600; letter-spacing:0.05em; color:var(--text-muted); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:1px 5px; }
.h2-mk{ color:var(--text); font-variant-numeric:tabular-nums; font-size:0.82rem; text-align:right; white-space:nowrap; }
.h2-th .h2-mk{ color:var(--text-muted); }
.h2-board-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid var(--border); background:color-mix(in srgb, var(--bg) 40%, var(--surface)); }
.h2-board-meta{ color:var(--text-faint); font-size:0.72rem; line-height:1.35; }
.h2-link{ display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:var(--accent); font:600 0.82rem/1.2 var(--font); cursor:pointer; padding:4px 0; white-space:nowrap; }
.h2-link:hover{ text-decoration:underline; text-underline-offset:3px; }

.h2-sec{ padding:30px 0 6px; }
.h2-sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.h2-sec-head h2{ font-size:1.25rem; letter-spacing:-0.02em; margin:0; }
.h2-sec-head p{ margin:0; color:var(--text-muted); font-size:0.86rem; }
.h2-sports{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.h2-sport{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); display:flex; flex-direction:column; transition:border-color var(--t-fast) var(--ease); }
.h2-sport:hover{ border-color:var(--border-strong); }
.h2-sport-main{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; border:0; background:transparent; color:var(--text); padding:18px 18px 12px; cursor:pointer; font-family:var(--font); flex:1; }
.h2-sport-name{ font-size:1.5rem; font-weight:700; letter-spacing:-0.03em; }
.h2-sport-blurb{ color:var(--text-muted); font-size:0.88rem; line-height:1.45; }
.h2-sport-count{ color:var(--text-faint); font-size:0.76rem; font-variant-numeric:tabular-nums; min-height:1.1em; margin-top:4px; }
.h2-sport-links{ display:flex; flex-wrap:wrap; gap:4px 16px; padding:12px 18px 14px; border-top:1px solid var(--border); }
.h2-tools{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.h2-tool{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:14px; align-items:start; text-align:left; width:100%; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); color:var(--text); cursor:pointer; font-family:var(--font); transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.h2-tool:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.h2-tool-ic{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r-md); background:var(--surface-3); color:var(--accent); }
.h2-tool-tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.h2-tool-tx b{ font-size:0.94rem; font-weight:600; letter-spacing:-0.01em; }
.h2-tool-tx small{ color:var(--text-muted); font-size:0.8rem; line-height:1.45; }
.h2-tag{ font-size:0.68rem; font-weight:600; letter-spacing:0.03em; color:var(--text-muted); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:2px 7px; white-space:nowrap; }
.h2-why{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:28px; padding:6px 0 10px; }
.h2-why-i .ic{ color:var(--accent); margin-bottom:10px; }
.h2-why-i h3{ font-size:1rem; margin:0 0 6px; letter-spacing:-0.015em; }
.h2-why-i p{ color:var(--text-muted); font-size:0.88rem; line-height:1.55; margin:0; }
.h2-final{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:28px 0 20px; padding:28px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); }
.h2-final h2{ font-size:1.5rem; letter-spacing:-0.025em; margin:0 0 4px; }
.h2-final p{ margin:0; color:var(--text-muted); font-size:0.9rem; }
/* panels that were moved in */
#home2 #pricing-panel, #home2 #home-deepdive-panel, #home2 #home-top5-panel, #home2 #start-card{ margin-top:14px; }
#home2 #home-deepdive-panel{ margin-top:28px; }
#home2 #pricing-panel{ margin-top:30px; }

@media (max-width:900px){
  .h2-hero{ grid-template-columns:minmax(0, 1fr); gap:28px; padding:28px 0 24px; }
  .h2-sports, .h2-why{ grid-template-columns:minmax(0, 1fr); }
  .h2-tools{ grid-template-columns:minmax(0, 1fr); }
  .h2-why{ gap:20px; }
}
@media (max-width:640px){
  .h2-hero h1{ font-size:2.15rem; }
  .h2-cta .btn{ flex:1 1 100%; }
  .h2-tr{ grid-template-columns:84px minmax(0, 1fr); }
  .h2-tr .h2-mk{ grid-column:2; text-align:left; color:var(--text-muted); margin-top:-4px; }
  .h2-tr.h2-th .h2-mk{ display:none; }
  .h2-tbl:not(:has(.h2-mk)) .h2-tr{ grid-template-columns:96px minmax(0, 1fr); }
  .h2-tool{ grid-template-columns:auto minmax(0, 1fr); }
  .h2-tool .h2-tag{ grid-column:2; justify-self:start; }
  .h2-final{ padding:20px; }
  .h2-board-body{ min-height:0; }
}

/* reserve the board's height so the hero does not re-centre when real rows replace the skeleton */
.h2-board-body{ min-height:300px; }
@media (max-width:640px){ .h2-board-body{ min-height:0; } }

/* sign-in / sign-up dialog (the form was lifted out of the hidden hero by snippet-home2.js) */
#email-gate-wrap.spread-auth-wrap{ position:fixed; inset:0; z-index:500; overflow:auto; max-width:none; margin:0; padding:8vh 16px 24px; background:rgba(5,8,6,0.74); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
#email-gate-wrap #spread-auth-panel, #email-gate-wrap #spread-auth-account{ position:relative; max-width:420px; margin:0 auto; padding:24px 22px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); }
#email-gate-wrap .sp-gate-x{ position:fixed; top:calc(8vh + 10px); left:50%; margin-left:178px; z-index:2; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:0; border-radius:var(--r-md); background:transparent; color:var(--text-muted); cursor:pointer; }
#email-gate-wrap .sp-gate-x:hover{ background:var(--surface-2); color:var(--text); }
@media (max-width:480px){ #email-gate-wrap.spread-auth-wrap{ padding-top:5vh; } #email-gate-wrap .sp-gate-x{ top:calc(5vh + 10px); left:auto; right:26px; margin-left:0; } }

/* ---- member home (html.is-pro): no selling ---- */
.h2-pro-copy{ display:none; }
html.is-pro .h2-hero-copy.h2-mkt{ display:none; }
html.is-pro .h2-pro-copy{ display:block; }
html.is-pro #home2 .h2-mkt, html.is-pro #home2 .giveaway-card, html.is-pro #home2 #pricing-panel, html.is-pro #home2 .community-card{ display:none !important; }
html.is-pro .h2-hero{ padding:36px 0 28px; }
.h2-pro-badge{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.h2-pro-copy h1{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom:10px; }
.h2-quick{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:22px; max-width:640px; }
.h2-q{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:13px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); color:var(--text); cursor:pointer; font-family:var(--font); transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.h2-q:hover{ border-color:var(--accent); background:var(--surface-2); }
.h2-q b{ font-size:0.92rem; font-weight:600; letter-spacing:-0.01em; }
.h2-q small{ color:var(--text-muted); font-size:0.74rem; line-height:1.35; }
@media (max-width:640px){ .h2-quick{ grid-template-columns:repeat(2, minmax(0, 1fr)); } html.is-pro .h2-hero{ padding:18px 0 16px; } }

/* ===== full-width home on computers: the page uses the whole screen, not a 1180px column in the middle ===== */
main:has(#view-home.active){ max-width:none; padding-left:clamp(16px, 2.6vw, 56px); padding-right:clamp(16px, 2.6vw, 56px); }
#home2{ max-width:none; }
@media (min-width:901px){ .h2-hero{ grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr); gap:clamp(32px, 4vw, 72px); padding-top:clamp(36px, 5vh, 64px); } }
.h2-pro-copy .h2-quick{ max-width:none; }
@media (min-width:1500px){ .h2-tools{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .h2-quick{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1100px){ #home2 #home-top5-panel .h5-grid, #home2 #home-top5-panel .h5-list{ gap:14px; } }

/* ===== news (posts under 5 days old) ===== */
.h2-newsgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:16px; }
@media (min-width:1100px){ .h2-newsgrid:has(.h2-post:nth-child(4)) { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.h2-post{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.h2-post:hover, .h2-post:focus-visible{ border-color:var(--border-strong); background:var(--surface-2); outline:none; }
.h2-post:focus-visible{ box-shadow:0 0 0 2px var(--accent); }
.h2-post-img{ aspect-ratio:2 / 1; background:var(--surface-3); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.h2-post-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.h2-post-img span{ font-size:0.78rem; font-weight:700; letter-spacing:0.14em; color:var(--text-faint); }
.h2-post-body{ display:flex; flex-direction:column; gap:8px; padding:14px 16px 16px; min-width:0; flex:1; }
.h2-post-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:0.72rem; color:var(--text-muted); }
.h2-post-meta b{ font-weight:700; letter-spacing:0.08em; color:var(--accent); }
.h2-post-meta i{ font-style:normal; border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:1px 6px; }
.h2-post-meta time{ margin-left:auto; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.h2-post h3{ margin:0; font-size:1.05rem; line-height:1.3; letter-spacing:-0.015em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.h2-post p{ margin:0; color:var(--text-muted); font-size:0.86rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* the old home blog panel (3 NFL posts, no age limit) is replaced by the section above */
.home-blog-pricing-row, #home-blog-panel{ display:none !important; }

/* the old scroll-reveal fade (opacity 0 until scrolled into view) left late-added panels, like "your first 3 steps", invisible but still taking space: the new home shows everything straight away */
#home2 .panel, #home2 .h2-post, #home2 .start-card, #home2 .community-card{ opacity:1 !important; transform:none !important; }

/* ================= DESIGN SYSTEM v2 (Nov 2026): premium sports-analytics look =================
   Loaded LAST so it wins over the 49 older stylesheets. It sets surfaces, type, shape and motion only; it never sets --accent / --field (the visitor's Customize choice owns those;
   the default accent is #24C76B, set in snippet-custom.js DEFAULT_T). Rules: one radius scale, one button system (primary / secondary / ghost), hairline borders, no glows, no
   gradient fills, no shadows except on floating layers, numbers in tabular figures, motion 150-200 ms and off for reduced-motion.
   Fonts: Geist (the CSS names 'Inter' and 'Oswald' are aliases of it, see snippet-fonts.css) and Geist Mono for small data labels. */

:root{
  --bg:#0B0F0D; --surface:#141A17; --surface-2:#1C2520; --surface-3:#25312B;
  --border:#262E29; --border-strong:#36423B;
  --text:#F5F7F5; --text-muted:#9BA8A0; --text-faint:#6E7B73;
  --accent:#28F800; --accent-ink:#04140A; --good:#24C76B; --good-bg:#10261A;
  --danger:#F0605A; --danger-bg:#2E1715; --warn:#E3B53B; --warn-bg:#2A2410; --info:#5AA9E6;
  --r-sm:4px; --r-md:6px; --r-lg:10px; --radius:6px;
  --shadow-sm:none; --shadow-md:0 12px 32px rgba(0,0,0,0.45); --shadow-pop:0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px var(--border);
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:150ms; --t:200ms;
  --font:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0B0F0D; --surface:#141A17; --surface-2:#1C2520; --border:#262E29; --text:#F5F7F5; --text-muted:#9BA8A0; --accent-ink:#04140A; --good:#24C76B; --good-bg:#10261A; --danger:#F0605A; --danger-bg:#2E1715; --warn:#E3B53B; --warn-bg:#2A2410; --radius:6px; --shadow-sm:none; --shadow-md:0 12px 32px rgba(0,0,0,0.45); }
}
:root[data-theme="dark"]{ --bg:#0B0F0D; --surface:#141A17; --surface-2:#1C2520; --border:#262E29; --text:#F5F7F5; --text-muted:#9BA8A0; --accent-ink:#04140A; --good:#24C76B; --good-bg:#10261A; --danger:#F0605A; --danger-bg:#2E1715; --warn:#E3B53B; --warn-bg:#2A2410; --radius:6px; --shadow-sm:none; --shadow-md:0 12px 32px rgba(0,0,0,0.45); }
/* light mode: the same system on a cool paper, header / ticker / hero stay dark islands (snippet-custom.css) */
:root[data-theme="light"]{
  --bg:#F3F6F4; --surface:#FFFFFF; --surface-2:#ECF1EE; --surface-3:#E1E8E4; --border:#D8DFDB; --border-strong:#BFC9C3;
  --text:#101612; --text-muted:#56635B; --text-faint:#7B887F; --good:#0D7D3D; --good-bg:#DBEFE3; --danger:#B3261E; --danger-bg:#F7E1DE; --warn:#8F6200; --warn-bg:#F5E8C2;
  --shadow-sm:none; --shadow-md:0 12px 32px rgba(16,22,18,0.14); --radius:6px; color-scheme:light;
}
:root[data-theme="light"]{ background:var(--bg); }

/* ---- page: flat near-black, no texture (replaces the blobs / tile) ---- */
html body::before, :root[data-theme="light"] body::before{ background:var(--bg) !important; }
html{ font-size:15px; }
@media (max-width:640px){ html{ font-size:16px; } }
body{ font-family:var(--font); font-feature-settings:normal; letter-spacing:-0.006em; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ---- type scale: sentence case, tight, restrained weights ---- */
h1, h2, h3, .display{ font-family:var(--font); text-transform:none; font-weight:650; letter-spacing:-0.022em; line-height:1.15; }
h1{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing:-0.03em; line-height:1.08; }
.panel-head h2{ font-size:1.2rem; letter-spacing:-0.018em; }
.panel h3, h3{ font-size:1.02rem; }
.hint{ color:var(--text-muted); font-size:0.86rem; line-height:1.5; }
/* small labels: one style (uppercase micro-label), used for column heads, eyebrows, field labels */
.section-eyebrow, .field label, th, .sl-card-head h5, .nbm-hd, .hero-eyebrow, .mship-eyebrow, .mship-tag, .cc-badge{ font-family:var(--font) !important; font-size:0.7rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; }
.section-eyebrow{ color:var(--text-muted); margin-bottom:6px; }
.section-eyebrow::before{ content:none; }
/* numbers: tabular figures wherever digits line up */
td, th, .ticker-score, .ticker-odds, .ticker-meta, .num, .pill, .chip, [class*="-val"], [class*="stat-"], [class*="-num"], [class*="rate"], [class*="odds"]{ font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1, "lnum" 1; }
.mono{ font-family:var(--mono); }

/* ---- buttons: three styles only. primary (green), secondary (outlined), ghost (text). Same height, radius, weight ---- */
.btn, .trial-pill.start-cta, button.gold-cta{ font-family:var(--font); font-size:0.875rem; font-weight:600; letter-spacing:-0.005em; text-transform:none; border-radius:var(--r-md); padding:9px 16px; line-height:1.2; box-shadow:none; transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); animation:none !important; }
.btn:hover:not(:disabled){ filter:none; transform:none; box-shadow:none; }
.btn:active:not(:disabled){ transform:translateY(1px); filter:none; }
.btn.accent, .trial-pill.start-cta, .btn.gold-cta, .gold-cta{ background:var(--accent); border:1px solid var(--accent); color:var(--accent-ink); }
.btn.accent:hover:not(:disabled), .trial-pill.start-cta:hover, .btn.gold-cta:hover:not(:disabled){ background:color-mix(in srgb, var(--accent) 88%, #fff); border-color:color-mix(in srgb, var(--accent) 88%, #fff); filter:none; }
.btn.secondary{ background:transparent; color:var(--text); border:1px solid var(--border-strong); }
.btn.secondary:hover:not(:disabled){ background:var(--surface-2); border-color:var(--text-faint); color:var(--text); }
.btn.danger{ border-radius:var(--r-md); }
.btn:disabled{ opacity:0.45; }
.home-hero .btn.accent, .start-card .btn.accent, .mship-plan.main .mship-cta{ box-shadow:none; animation:none !important; }

/* ---- surfaces: cards are a surface + hairline border + one radius ---- */
.panel, #view-home .panel, #home-nba-panel, .start-card, .community-card, .mship-compare, .mship-plan, .blog-preview-card, .h5-card, .feature-card, .sl-card, .nph-card, .nbr-card, .tour-card, .up-card, .dd-intro, .dds-box, .pv-banner, .nbr-game, .nbr-pick, .nbr-row{ border-radius:var(--r-lg); box-shadow:none; }
.panel, #view-home .panel, #home-nba-panel{ background:var(--surface); border:1px solid var(--border); padding:20px 22px; margin-bottom:16px; }
.panel-head{ border-bottom:0; padding-bottom:0; margin-bottom:14px; }
.feature-card{ background:var(--surface-2); border:1px solid var(--border); transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.feature-card:hover{ border-color:var(--border-strong); background:var(--surface-3); box-shadow:none; transform:none; }
.feature-title{ font-size:0.95rem !important; font-weight:600; letter-spacing:-0.01em; text-transform:none; }
.feature-icon{ border-radius:var(--r-md); background:var(--surface-3); }
.community-card.giveaway-card{ background:var(--surface) !important; border-color:var(--border-strong); }
.mship-plan.main{ background:var(--surface-2); box-shadow:none; border-color:var(--accent); }
.pv-banner{ background:var(--warn-bg); border:1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); }

/* ---- chips, pills, badges: small square-cornered labels (round logos / avatars / carousel arrows stay round) ---- */
.pill, .chip, .nba-badge, .nlab-pill, .nlab-dv, .nbh-pill, .nba-inj, .nbp-moved, .nba-new, .nbp-rate, .nhl-edge, .nsim-edge, .cmp-chip, .stat-tile-badge, .matchup-badge, .nhl-asof, .cc-badge, .mship-tag, .mship-eyebrow{ border-radius:var(--r-sm); font-family:var(--font); font-weight:600; letter-spacing:0.02em; }
button:not(.nbh-arrow):not(.start-x), .shot-btn, .gdd-btn, .bt-add{ border-radius:var(--r-md); }
select, input, textarea, .dds-in, .site-search input{ border-radius:var(--r-md); }
input[type=text], input[type=number], input[type=search], input[type=email], input[type=password], select, textarea{ background:var(--bg); border:1px solid var(--border); color:var(--text); transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
input:focus, select:focus, textarea:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
button:focus-visible, a:focus-visible, [role="tab"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- tables: quiet header, hairline rows, hover row ---- */
th{ background:transparent; color:var(--text-muted); border-bottom:1px solid var(--border-strong); font-size:0.7rem; padding:10px 10px; }
td{ border-bottom:1px solid var(--border); }
tbody tr{ transition:background-color var(--t-fast) var(--ease); }
tbody tr:hover td{ background:color-mix(in srgb, var(--text) 3.5%, transparent); }
.stat-lines th{ background:transparent; }
.table-wrap{ border-radius:var(--r-lg); }

/* ---- sub navigation (rows under a sport): flat underlined tabs ---- */
nav.subtabs{ background:var(--bg); border-bottom:1px solid var(--border); padding-left:20px; padding-right:20px; }
nav.subtabs.sport-cats button{ font-family:var(--font); font-size:0.8rem; font-weight:600; letter-spacing:0; text-transform:none; border-radius:var(--r-md); }
nav.subtabs:not(.sport-cats) button{ font-family:var(--font); font-size:0.86rem; font-weight:550; letter-spacing:-0.005em; text-transform:none; transition:color var(--t-fast) var(--ease); }
nav.subtabs:not(.sport-cats) button.active::after{ height:2px; border-radius:2px; }

/* ---- header + score ticker ---- */
header.topbar{ background:color-mix(in srgb, var(--bg) 92%, transparent); border:0; border-bottom:1px solid var(--border); box-shadow:none; -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px); }
.brand-logo{ filter:none !important; }
.score-ticker{ background:var(--surface); border-top:1px solid var(--border); }
.ticker-sport span{ border-radius:var(--r-sm); font-family:var(--font); font-size:0.66rem; letter-spacing:0.06em; }
.ticker-team, .ticker-score{ font-family:var(--font); font-weight:650; font-size:0.82rem; letter-spacing:0; }
.ticker-meta{ font-family:var(--font); }
footer.foot{ font-family:var(--font); font-size:0.76rem; border-top:1px solid var(--border); }
.site-search input{ background:var(--surface); border:1px solid var(--border); padding:8px 14px; font-size:0.85rem; }

/* ---- motion: quiet view change, skeletons, off for reduced motion ---- */
@keyframes sp-view-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes sp-sk{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
/* only AFTER the page has loaded (html.sp-anim, set by snippet-redesign.js): a fade that starts at opacity 0 kept the first view invisible on busy phones until the scripts finished (largest paint 10 s) */
html.sp-anim section.view.active{ animation:sp-view-in var(--t) var(--ease); }
.sp-sk{ display:block; border-radius:var(--r-md); background:linear-gradient(90deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size:200% 100%; animation:sp-sk 1.4s linear infinite; min-height:14px; }
.sp-empty{ border:1px dashed var(--border-strong); border-radius:var(--r-lg); padding:28px 20px; text-align:center; color:var(--text-muted); font-size:0.9rem; }
.sp-empty b{ display:block; color:var(--text); font-weight:600; margin-bottom:4px; }
.sp-error{ border:1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); background:var(--danger-bg); border-radius:var(--r-lg); padding:14px 16px; color:var(--text); font-size:0.9rem; }
@media (prefers-reduced-motion: reduce){ html.sp-anim section.view.active, .sp-sk{ animation:none !important; } *{ scroll-behavior:auto !important; transition-duration:0.01ms !important; } }

/* ---- thin scrollbars ---- */
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }

/* ---- phones ---- */
@media (max-width:640px){
  .panel, #view-home .panel{ padding:16px; }
  .panel-head h2{ font-size:1.12rem; }
  .btn{ padding:11px 16px; }
}

/* the old hero blocks are replaced by the new Home (snippet-home2.js); kept in the page so every tool behind them still works */
#view-home > .home-hero, #home-sims-panel, #home-nba-panel, #home-nhl-panel, #home-tools-panel, #home-x-panel, #home-twitter-panel, #home-trust-strip{ display:none !important; }

/* ---- pass 2: leftovers from the older styles ---- */
h1, h2, h3, h4, .display, .panel-head h2, .feature-title, .nbm-fold > summary{ text-transform:none !important; }
#home2 .h2-slot > *{ margin-top:16px; margin-bottom:0; }
#home2 .h2-slot:first-child > *{ margin-top:0; }
.community-card .cc-badge, .mship-eyebrow, .mship-tag{ border-radius:var(--r-sm) !important; }
.mship-eyebrow, .cc-badge{ background:var(--accent); color:var(--accent-ink); letter-spacing:0.06em; }
.mship-tag.gold, .cc-badge.gold{ background:var(--warn); color:#171200; }
#pricing-panel h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.12; }
#pricing-panel h2 em, #pricing-panel h2 span{ font-style:normal; }
#home-top5-panel .panel-head h2, #home-deepdive-panel .panel-head h2{ font-size:1.25rem; }

/* light mode: header, ticker and footer stay dark islands (the logo art is built for dark), with the dark tokens re-declared so everything inside reads correctly */
:root[data-theme="light"] header.topbar, :root[data-theme="light"] .score-ticker, :root[data-theme="light"] footer.foot{
  --bg:#0B0F0D; --surface:#141A17; --surface-2:#1C2520; --surface-3:#25312B; --border:#262E29; --border-strong:#36423B;
  --text:#F5F7F5; --text-muted:#9BA8A0; --text-faint:#6E7B73; color-scheme:dark; color:var(--text);
}
:root[data-theme="light"] header.topbar{ background:#0B0F0D; }
:root[data-theme="light"] .score-ticker{ background:#141A17; }
:root[data-theme="light"] footer.foot{ background:#0B0F0D; }

/* ---- logo: horizontal lockup in the header and footer, the S emblem on phones; brand green everywhere it is the accent ---- */
.brand{ display:flex; align-items:center; }
.brand-emblem{ display:none; border-radius:50%; }
html.has-gnav header.topbar .brand .brand-lockup{ height:32px !important; width:auto; }
footer.foot .foot-brand{ gap:12px; }
footer.foot .foot-brand img.foot-emblem{ height:30px !important; width:30px; border-radius:50%; }
footer.foot .foot-brand img.foot-lockup{ height:24px !important; width:auto; }
@media (max-width:540px){
  html.has-gnav header.topbar .brand .brand-lockup{ display:none !important; }
  .brand-emblem{ display:block; height:40px; width:40px; }
}
/* the light page uses a darker green for green TEXT (the neon is for dark surfaces and filled buttons) */
:root[data-theme="light"] #home2 .h2-link, :root[data-theme="light"] #home2 .h2-g, :root[data-theme="light"] #home2 .h2-tool-ic, :root[data-theme="light"] #home2 .h2-why-i .ic, :root[data-theme="light"] #home2 .h2-eyebrow .ic{ color:#0B8A00; }
.h2-g{ color:var(--accent); }

/* light mode: the player-profile banner (NFL / NBA / NHL) is a LIGHT banner with black lettering instead of a dark team-colour gradient with white lettering */
:root[data-theme="light"] .pm-head{ background:var(--surface-2) !important; color:#000; border-bottom:1px solid var(--border); }
:root[data-theme="light"] .pm-head-info, :root[data-theme="light"] .pm-head h2, :root[data-theme="light"] .pm-head-bio b{ color:#000 !important; text-shadow:none !important; }
:root[data-theme="light"] .pm-head-team, :root[data-theme="light"] .pm-head-bio span{ color:#26302a !important; }
:root[data-theme="light"] .pm-head-logo{ opacity:0.08; filter:invert(1); }
:root[data-theme="light"] .pm-head .modal-close{ background:#000; color:#fff; }

/* ================= PRODUCT POLISH PASS (lead-designer review) ================= */
/* 1. page intros: a research page opens with data, not three stacked explainers */
.pv-banner{ display:flex; align-items:center; gap:12px; padding:9px 14px; font-size:0.84rem; line-height:1.4; background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--warn); border-radius:var(--r-md); }
.pv-banner b, .pv-banner strong{ color:var(--text); }
.pv-banner .btn{ margin-left:auto; padding:6px 12px; font-size:0.78rem; white-space:nowrap; }
.shot-host > .pv-banner:first-child{ margin-right:50px; }
.dd-intro{ margin:10px 0 8px; padding:8px 12px; font-size:0.8rem; line-height:1.45; border-radius:var(--r-md); background:transparent; border:1px solid var(--border); border-left:3px solid var(--accent); }
.dd-intro .dd-ic{ display:none; }
.dd-intro > :last-child{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* one search box (the old one was a box inside a box, with an emoji) */
.dds-box{ min-height:44px !important; padding:0 12px !important; border-radius:var(--r-md) !important; background:var(--surface) !important; border:1px solid var(--border) !important; box-shadow:none !important; }
.dds-box:focus-within{ border-color:var(--accent) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
.dds-in{ background:transparent !important; border:0 !important; box-shadow:none !important; outline:none !important; font-size:0.92rem !important; padding-left:0 !important; }
.dds-ic{ font-size:0 !important; width:18px; height:18px; flex:none; background:var(--text-muted); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat; }
.dds-list{ border-radius:var(--r-md); box-shadow:var(--shadow-pop); }

/* 2. filter rows: every control the same height, labels on one baseline */
.row{ align-items:flex-end; gap:12px 16px; }
.field label{ display:block; margin-bottom:6px; line-height:1; }
.field select, .field input[type=text], .field input[type=number], .field input[type=search]{ height:38px; padding:0 12px; }
.cat-filters button, .toggle-group button{ min-height:38px; }
.cat-filters button, .toggle-group button, .nph-chip, .cmp-chip{ font-size:0.84rem; font-weight:600; }

/* 3. data tables: a ledger, not a stack of cards (desktop). Phones keep their card layout. */
@media (min-width:641px){
  .prop-table{ border-collapse:collapse !important; border-spacing:0 !important; }
  .prop-table td{ background:transparent; border-top:0; border-bottom:1px solid var(--border); padding:11px 10px; }
  .prop-table tr.data-row td:first-child{ border-left:0; border-radius:0; }
  .prop-table tr.data-row td:last-child{ border-right:0; border-radius:0; }
  .prop-table tr.data-row:hover td{ background:color-mix(in srgb, var(--text) 4%, transparent); }
  .prop-table tr.chart-row td{ background:var(--surface-2); border-bottom:1px solid var(--border); border-radius:0; }
}
/* chips in tables: one size, one corner, semantic colour only */
.matchup-badge, .stat-tile-badge, .inj-tag, .nbp-rate, .nhl-edge{ border-radius:var(--r-sm); font-size:0.7rem; font-weight:600; letter-spacing:0.01em; }
.rating-ring .ring-num{ font-variant-numeric:tabular-nums; font-weight:650; }

/* 4. upgrade pop-up: calm, neutral, one accent (was gold + gold + gold) */
.up-badge{ background:var(--surface-3); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--r-sm); font-family:var(--font); letter-spacing:0.06em; font-size:0.7rem; padding:4px 10px; }
.up-card h3{ font-family:var(--font); font-size:1.4rem; font-weight:650; letter-spacing:-0.02em; text-transform:none; }
.up-price{ border:1px solid var(--border-strong); background:var(--surface-2); border-radius:var(--r-md); }
.up-price b{ font-family:var(--font); color:var(--text); font-size:1.15rem; }
.up-card, .up-modal, .spread-auth-card{ border-radius:var(--r-lg); box-shadow:var(--shadow-pop); }

/* 5. phones: data first. Compact banner, no explainer callout, brand name in the header */
@media (max-width:640px){
  .pv-banner{ flex-wrap:wrap; padding:8px 12px; font-size:0.8rem; gap:8px; }
  .pv-banner .btn{ margin-left:0; padding:7px 12px; }
  .shot-host > .pv-banner:first-child{ margin-right:0; }
  .dd-intro{ display:none; }
  nav.subtabs.sport-cats{ padding:8px 12px 0; }
  .panel-head .hint{ margin-bottom:8px; }
}
@media (max-width:540px){
  html.has-gnav header.topbar .brand .brand-lockup{ display:block !important; height:22px !important; width:auto; }
  .brand-emblem{ display:none !important; }
}
@media (max-width:359px){
  html.has-gnav header.topbar .brand .brand-lockup{ display:none !important; }
  .brand-emblem{ display:block !important; }
}

/* 6. loading: a shimmer block instead of the words "Loading..." (class set by snippet-redesign.js) */
.sp-loading{ position:relative; color:transparent !important; min-height:84px; display:block; border-radius:var(--r-md); overflow:hidden; text-indent:-9999px; white-space:nowrap; }
.sp-loading::before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(180deg, transparent 0 10px, var(--surface-2) 10px 24px, transparent 24px 34px); -webkit-mask:linear-gradient(90deg, #000 0 92%, transparent 92%); }
.sp-loading::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text) 8%, transparent) 50%, transparent 100%); background-size:50% 100%; background-repeat:no-repeat; animation:sp-sweep 1.3s var(--ease) infinite; }
@keyframes sp-sweep{ from{ background-position:-60% 0; } to{ background-position:160% 0; } }
td.sp-loading, th.sp-loading{ display:table-cell; }
@media (prefers-reduced-motion: reduce){ .sp-loading::after{ animation:none; } }

/* the "save picture" camera sits on the panel's top edge instead of on top of the banner / title */
.shot-host > .shot-btn{ top:-16px; right:16px; width:32px; height:32px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border-strong); }
.shot-host > .pv-banner:first-child{ margin-right:0; }
/* phones: filters in an even two-column grid, controls full width, position chips on their own row */
@media (max-width:640px){
  .row{ gap:10px; }
  .row > .field{ flex:1 1 calc(50% - 6px); min-width:0; }
  .row > .field:has(.cat-filters), .row > .field:has(input[type=text]){ flex-basis:100%; }
  .field select, .field input[type=text], .field input[type=number], .field input[type=search]{ width:100%; }
}

/* ================= PLAYER PROFILE: compact on phones ================= */
@media (max-width:640px){
  #pl-panel .pm-head{ min-height:0 !important; padding:12px 14px 10px 104px !important; }
  #pl-panel .pm-head-photo{ width:76px !important; bottom:10px !important; left:14px !important; }
  #pl-panel .pm-head h2{ font-size:1.12rem !important; margin-bottom:4px !important; letter-spacing:-0.01em; }
  #pl-panel .pm-head-meta{ margin-bottom:6px; gap:6px; }
  #pl-panel .pm-head-bio{ gap:4px 14px !important; margin-bottom:6px !important; }
  #pl-panel .pm-head-bio b{ font-size:0.86rem; } #pl-panel .pm-head-bio span{ font-size:0.6rem; }
  #pl-panel .pm-head .fmt-toggle{ margin-top:0; }
  #pl-panel .pm-head .fmt-toggle button{ min-height:30px !important; padding:4px 10px !important; font-size:0.74rem !important; }
  #pl-panel .pm-tab-btn{ padding:9px 11px; font-size:0.68rem; }
  #pl-panel .pm-tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin:10px 0; }
  #pl-panel .stat-tile{ padding:7px 6px; border-radius:var(--r-md); min-width:0; }
  #pl-panel .stat-tile-label{ font-size:0.56rem; margin-bottom:3px; letter-spacing:0.04em; }
  #pl-panel .stat-tile-value{ font-size:1.02rem; }
  #pl-panel .pm-section{ margin-top:14px; }
  #pl-panel .pm-section-head{ margin-bottom:8px; padding-bottom:6px; border-bottom-width:1px; }
  #pl-panel .pm-section-head h3{ font-size:0.95rem; text-transform:none; letter-spacing:-0.01em; }
  #pl-panel .modal-body, #pl-panel .pm-body{ padding-left:12px; padding-right:12px; }
}
.pm-section-head h3{ font-family:var(--font); text-transform:none; letter-spacing:-0.01em; font-weight:650; }
.stat-tile{ border-radius:var(--r-md); }
.stat-tile-value{ font-family:var(--font); font-weight:650; font-variant-numeric:tabular-nums; }
.stat-tile-label{ font-weight:600; }
.pm-tab-btn{ font-family:var(--font); font-weight:600; letter-spacing:0.02em; }

/* ================= SIMULATIONS (NFL / NBA / NHL share the .nsim-* components) ================= */
.nsim-card{ background:var(--surface); border-radius:var(--r-lg); padding:20px 18px 18px; }
.nsim-mu{ gap:16px; }
.nsim-tm b{ font:650 1.15rem/1.15 var(--font); letter-spacing:-0.015em; }
.nsim-tm span{ font-size:0.76rem; }
.nsim-tm img{ filter:none; }
.nsim-vs em{ font:600 0.7rem/1.2 var(--font); letter-spacing:0.12em; color:var(--text-muted); }
.nsim-win{ margin:18px 0 6px; }
.nsim-wb{ height:30px; border-radius:var(--r-md); border:0; gap:2px; background:transparent; }
.nsim-wb i{ filter:saturate(0.8) brightness(0.92); }
.nsim-wb i.a{ border-radius:var(--r-md) 2px 2px var(--r-md); } .nsim-wb i.h{ border-radius:2px var(--r-md) var(--r-md) 2px; }
.nsim-wb b{ font:650 0.86rem/1 var(--font); letter-spacing:0; }
.nsim-mkw{ text-align:left; font-size:0.74rem; color:var(--text-faint); }
.nsim-nums{ gap:8px; margin:16px 0 4px; }
.nsim-nums > div{ border-radius:var(--r-md); background:var(--surface-2); padding:12px 14px; gap:4px; }
.nsim-nums span{ font-size:0.66rem; font-weight:600; letter-spacing:0.07em; }
.nsim-nums b{ font:650 1.3rem/1.15 var(--font); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.nsim-nums small{ font-size:0.72rem; line-height:1.35; }
.nsim-acts{ margin-top:16px; }
.nsim-sec{ margin-top:30px; }
.nsim-sec h3{ font:650 1.1rem/1.2 var(--font); letter-spacing:-0.015em; padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--border); }
.nsim-sec h3 + p.hint{ border:1px dashed var(--border-strong); border-radius:var(--r-md); padding:16px 18px; font-style:normal; color:var(--text-muted); background:transparent; margin:0; }
.nsim-t th{ font-size:0.66rem; font-weight:600; letter-spacing:0.07em; border-bottom:1px solid var(--border-strong); }
.nsim-t td{ border-bottom:1px solid var(--border); padding:8px 10px; }
.nsim-t tbody tr:hover td{ background:color-mix(in srgb, var(--text) 3.5%, transparent); }
.nsim-pl h4{ font:650 1rem/1.2 var(--font); letter-spacing:-0.01em; }
.nsim-edge{ border-radius:var(--r-sm); font-weight:600; }
.nsim-side.pick{ border-radius:var(--r-md); }
.nsim-edge-c{ font-variant-numeric:tabular-nums; }
.nsim-stats .v.hi{ color:var(--accent); font-weight:700; }
.nsim-hist{ gap:2px; height:96px; border-bottom:1px solid var(--border-strong); }
.nsim-hist i{ border-radius:2px 2px 0 0; }
.nsim-hist i.a{ background:color-mix(in srgb, var(--info) 78%, transparent); } .nsim-hist i.h{ background:color-mix(in srgb, var(--accent) 78%, transparent); } .nsim-hist i.m{ background:var(--text-faint); }
.nsim-how p{ max-width:78ch; font-size:0.84rem; }
.nsim-chip{ border-radius:var(--r-md); }
.nsim-chip.active{ box-shadow:none; background:var(--surface-3); }
.nsim-slot{ font:600 0.64rem/1 var(--font); letter-spacing:0.1em; color:var(--text-muted); }
.nsim-ch-t{ font:650 0.98rem/1 var(--font); }
.gdd-btn{ border-radius:var(--r-md); background:var(--surface); }
@media (max-width:640px){
  .nsim-card{ padding:14px 12px; }
  .nsim-tm img{ width:56px !important; height:56px !important; }
  .nsim-tm b{ font-size:0.98rem; }
  .nsim-nums{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nsim-nums > div{ padding:10px 11px; }
  .nsim-nums b{ font-size:1.12rem; }
  .nsim-sec{ margin-top:24px; }
  .nsim-wb{ height:28px; }
}

/* ================= LIGHT MODE readability fixes ================= */
/* dark "islands" (pricing, tour, upgrade pop-up, hero) get the full dark token set AND their own text colour: they used to inherit the page's dark ink and were unreadable */
:root[data-theme="light"] .mship, :root[data-theme="light"] .tour-card, :root[data-theme="light"] .up-card, :root[data-theme="light"] .home-hero{
  --bg:#0B0F0D; --surface:#141A17; --surface-2:#1C2520; --surface-3:#25312B; --border:#262E29; --border-strong:#36423B;
  --text:#F5F7F5; --text-muted:#9BA8A0; --text-faint:#6E7B73; --good:#24C76B; --warn:#E3B53B; --danger:#F0605A; color-scheme:dark; color:var(--text);
}
:root[data-theme="light"] .mship, :root[data-theme="light"] .up-card{ background-color:var(--surface); }
/* yellow text that was written for dark pages becomes a dark amber on light pages */
:root[data-theme="light"] .nbp-rate.mid, :root[data-theme="light"] .nbp-moved, :root[data-theme="light"] .nlab-rt.mid, :root[data-theme="light"] .nbh-pill.mid b, :root[data-theme="light"] .nbh-pill.mid i,
:root[data-theme="light"] .star-n, :root[data-theme="light"] .star-share, :root[data-theme="light"] .star-head b, :root[data-theme="light"] .gdd-star b, :root[data-theme="light"] [class*="star-"] b{ color:#7A5600 !important; }
:root[data-theme="light"] .lab-pill small, :root[data-theme="light"] .nbh-pill small{ color:inherit; opacity:0.85; }
:root[data-theme="light"] .modal-close{ background:#101612; color:#fff; border:0; }
:root[data-theme="light"] .cz-team i{ color:#9AA6A0; }

/* ================= SCROLL STABILITY (iPhone): the bottom bar and the ticker stay pinned while scrolling =================
   iOS Safari leaves position:fixed layers behind during momentum scrolling when they use backdrop-filter or a CSS mask on a page this large (the bars then "float" mid-screen with content under them).
   So: solid colours instead of blur, edge fades from two gradient strips instead of a mask, and each bar on its own compositor layer. */
header.topbar{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg); }
#appbar, #appsheet .as-sheet{ -webkit-backdrop-filter:none; backdrop-filter:none; }
#appbar{ background:#0B0F0D; }
#appbar, .score-ticker{ transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); backface-visibility:hidden; -webkit-backface-visibility:hidden; contain:layout paint style; }
.score-ticker{ -webkit-mask-image:none; mask-image:none; background:var(--surface); }
.score-ticker::before, .score-ticker::after{ content:''; position:absolute; top:0; bottom:0; width:28px; z-index:2; pointer-events:none; }
.score-ticker::before{ left:0; background:linear-gradient(90deg, var(--surface), transparent); }
.score-ticker::after{ right:0; background:linear-gradient(270deg, var(--surface), transparent); }
header.topbar.tb-hide{ transition:transform .2s var(--ease); }
@media (max-width:640px){
  header.topbar{ will-change:transform; contain:layout paint; }
  html, body{ overflow-x:clip; }
}

/* ================= CREATOR STUDIO: thumbnail maker on phones ================= */
/* present / full screen: only the picture, centred, filling the screen; the control bar fades out after a few seconds (tap to bring it back) so a screenshot is just the thumbnail */
#view-creator.cr-presenting #cr-root{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; }
#view-creator.cr-presenting #cr-root > *:not(.cr-host){ display:none !important; }
#view-creator.cr-presenting .cr-host{ padding:0 !important; margin:0 !important; border:0 !important; background:transparent !important; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
#view-creator.cr-presenting .cr-page{ justify-content:center; background:#000; }
#cr-pbar{ transition:opacity .25s ease; }
body.cr-pbar-off #cr-pbar{ opacity:0; pointer-events:none; }
body.cr-present-on #appbar, body.cr-present-on .score-ticker, body.cr-present-on header.topbar{ display:none !important; }
#cr-pbar{ top:max(8px, env(safe-area-inset-top)); border-radius:var(--r-lg); background:rgba(11,15,13,.92); border:1px solid var(--border-strong); font-family:var(--font); }
#cr-pbar button{ border-radius:var(--r-md); font-family:var(--font); min-height:40px; min-width:40px; }

@media (max-width:640px){
  /* the live preview stays on screen while you edit; the controls scroll underneath it */
  #view-creator #cr-root:has(.cr-host .th.wide){ display:flex; flex-direction:column; }
  #view-creator #cr-root:has(.cr-host .th.wide) > .cr-host{ order:1; position:sticky; top:0; z-index:45; background:var(--bg); padding:8px 0 8px; margin:0 -10px; border-bottom:1px solid var(--border); }
  #view-creator #cr-root:has(.cr-host .th.wide) > .cr-bar{ order:2; }
  #view-creator #cr-root:has(.cr-host .th.wide) > .cr-ctl{ order:3; }
  #view-creator #cr-root:has(.cr-host .th.wide) > .cr-pick{ order:4; }
  #view-creator #cr-root:has(.cr-host .th.wide) > .cr-mk{ order:5; }
  #view-creator #cr-root:has(.cr-host .th.wide) .cb-outer{ margin:0 auto; border-radius:var(--r-md); overflow:hidden; box-shadow:0 0 0 1px var(--border-strong); }
  /* the action buttons: Present full width, then Save + Share side by side, the file type under them */
  #view-creator .cr-bar{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 12px; }
  #view-creator .cr-bar > [data-cr-act="present"]{ grid-column:1 / -1; min-height:46px; font-size:.95rem; }
  #view-creator .cr-bar > .btn{ min-height:44px; padding:10px 8px; font-size:.84rem; white-space:normal; line-height:1.2; }
  #view-creator .cr-bar > .toggle-group{ grid-column:1 / -1; }
  #view-creator .cr-bar > .toggle-group button{ min-height:40px; }
  #view-creator .cr-pick .cr-row{ gap:8px; }
  #view-creator .cr-pick .cr-form label{ font-size:.78rem; }
  #view-creator .cr-pick input[type=text]{ font-size:16px; }   /* 16px stops iOS zooming the page when a field is tapped */
}

/* Questionable players: "simulate with / without them" switch above a game (snippet-simq.js) */
.nsim-q{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--warn); border-radius:var(--r-md); }
.nsim-q-t{ font-size:0.84rem; color:var(--text-muted); line-height:1.45; min-width:0; flex:1 1 320px; }
.nsim-q-t b{ color:var(--text); font-weight:600; }
.nsim-q-t small{ color:var(--text-faint); font-size:0.72rem; letter-spacing:0.04em; }
.nsim-q .toggle-group button{ min-height:36px; font-size:0.82rem; }
@media (max-width:640px){ .nsim-q .toggle-group{ width:100%; } .nsim-q .toggle-group button{ flex:1; padding:8px 6px; } }
.spread-auth-wrap{ max-width:360px; margin-top:18px; }
.spread-auth-card{
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:20px; text-align:left;
}
.spread-auth-card h3{ margin:0 0 14px; color:var(--text); }
.spread-google-btn{
  width:100%; background:#fff; color:#1f1f1f; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.spread-auth-divider{ display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--text-muted); font-size:0.8rem; }
.spread-auth-divider::before, .spread-auth-divider::after{ content:''; flex:1; height:1px; background:var(--border); }
.email-gate-form{ display:flex; flex-direction:column; gap:10px; }
.email-gate-form input{
  width:100%; padding:10px 12px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:0.9rem;
}
.spread-auth-passrow{ position:relative; display:flex; }
.spread-auth-passrow input{ padding-right:64px; }
.spread-auth-show{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--accent); font-size:0.78rem; font-weight:700; cursor:pointer; padding:8px; }
.spread-auth-link{ background:none; border:none; color:var(--accent); font-size:inherit; text-decoration:underline; cursor:pointer; padding:0 2px; font-family:inherit; }
.spread-auth-forgot{ align-self:flex-end; font-size:0.8rem; padding:2px; margin-top:-4px; }
#email-gate-error{ line-height:1.45; font-size:0.84rem; }
.spread-auth-toggle{
  display:block; width:100%; text-align:center; margin-top:12px; background:none; border:none;
  color:var(--accent); font-size:0.82rem; cursor:pointer; padding:4px;
}.brand-logo{ height:64px !important; }
.foot-brand img{ height:32px !important; opacity:1 !important; }
@media (max-width:640px){ .brand-logo{ height:48px !important; } }
.owner-badge{
  font-size:0.72rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  color:#1a1200; background:linear-gradient(135deg,#ffe27a,#f2b705); border:1px solid rgba(0,0,0,0.15);
  padding:6px 12px; border-radius:14px; white-space:nowrap;
}body.stream-mode header.topbar, body.stream-mode nav.tabs, body.stream-mode .subtabs,
body.stream-mode footer.foot, body.stream-mode .panel-head, body.stream-mode #tb-edit-hint,
body.stream-mode .tb-add, body.stream-mode .disclosure, body.stream-mode #tb-out,
body.stream-mode #tb-readonly-note{ display:none !important; }
body.stream-mode main{ max-width:480px; margin:0 auto; padding:14px 10px 90px; overflow-x:hidden; }
body.stream-mode .panel{ padding:10px; border:none; box-shadow:none; }
body.stream-mode .tb-label{ width:64px; padding:4px 2px; }
body.stream-mode .tb-label-letter{ font-size:1.5rem; }
body.stream-mode .tb-label-text{ font-size:0.56rem; }
/* grid instead of flex-wrap so 2-3 chips sit per row (however many fit at ~125px each) instead of one
   full-width chip per row -- each chip still wraps its own contents onto a second internal line if its
   own narrower column isn't wide enough for name + team + projection + weather badge on one line */
body.stream-mode .tb-drop{ display:grid; grid-template-columns:repeat(auto-fill, minmax(125px, 1fr)); min-height:70px; padding:10px; gap:8px; }
body.stream-mode .tb-chip{
  font-size:0.74rem; padding:7px 8px; gap:5px; border-radius:10px;
  flex-wrap:wrap; row-gap:3px; box-sizing:border-box; width:100%;
}
body.stream-mode .tb-chip .tb-nm{ font-size:0.76rem; white-space:normal; }
body.stream-mode .tb-chip .tb-tm{ font-size:0.62rem; }
body.stream-mode .tb-chip .tb-pr{ font-size:0.64rem; padding:1px 4px; }
body.stream-mode .tb-pool h3{ font-size:1rem; text-align:center; }
body.stream-mode .tb-pool .tb-drop{ grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); }
/* the player card's stat tiles (season totals, game info, and the "Advanced stats" section with
   snap%/EPA/red zone/etc.) both use .modal-stat-grid/.pm-tiles as the grid and .stat-tile as each
   card -- shrink the columns and text so all of them stay readable without spilling sideways */
body.stream-mode .modal-stat-grid, body.stream-mode .pm-tiles{
  grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)) !important; gap:6px !important; margin:10px 0 !important;
}
body.stream-mode .stat-tile{ padding:6px 5px !important; min-width:0 !important; }
body.stream-mode .stat-tile-value{ font-size:0.82rem !important; }
body.stream-mode .stat-tile-label{ font-size:0.52rem !important; margin-bottom:3px !important; }
body.stream-mode .pm-sub{ font-size:0.7rem !important; margin:12px 0 6px !important; }
body.stream-mode .pm-line{ font-size:0.62rem !important; }
/* the player-card popup is a fixed full-viewport overlay, so on a wide browser window it would
   otherwise center itself against the whole window instead of the narrow portrait column above --
   pin it to the same width and bump its text up a notch so it still reads on camera */
body.stream-mode .modal-backdrop{ padding:16px 10px; }
body.stream-mode .modal-panel{ max-width:460px; }
body.stream-mode .pm-head h2{ font-size:1.7rem; }
body.stream-mode .pm-head-bio b{ font-size:1.1rem; }
body.stream-mode .modal-stat-grid{ font-size:1.05rem; }
#stream-exit-btn{
  position:fixed; top:10px; right:10px; z-index:999; background:rgba(0,0,0,0.65); color:#fff;
  border:1px solid rgba(255,255,255,0.3); border-radius:20px; padding:8px 16px; font-size:0.8rem;
  cursor:pointer; backdrop-filter:blur(4px);
}