/* PositionU styles. Asset URLs are auto-cache-busted by .github/workflows/cache-bust.yml */
  @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Oswald:wght@400;600;700&family=Roboto+Condensed:wght@400;700&display=swap');

  :root {
    /* ── BACKGROUNDS ── */
    --bg:        #0C0C0E;   /* dark brown, never black */
    --felt:      #111115;   /* slightly lighter for header/dock */
    --surface:   #18181C;   /* cards */
    --surface2:  #1E1E24;   /* inset/secondary surfaces */

    /* ── BORDERS/RULES ── */
    --rule:      #262630;   /* subtle inner rules */
    --rule2:     #32323E;   /* card borders, dividers */

    /* ── TYPE ── */
    --text:      #F0E4C0;   /* primary — warm cream */
    --cream:     #D8C898;   /* secondary text */
    --aged:      #8A7240;   /* muted labels, metadata */
    --dim:       #4A3420;   /* very muted, disabled states */

    /* ── GOLD — primary accent ── */
    --gold:      #9A7016;   /* base gold */
    --gold2:     #C09020;   /* brighter gold, CTAs */
    --gold-worn: #6A5A20;   /* press shadow */
    --gold-dim:  rgba(154,112,22,0.12);

    /* ── BURNT ORANGE — defense accent ── */
    --orange:    #B85C1A;
    --orange-dim: rgba(184,92,26,0.12);

    /* ── UTILITY ── */
    --green:     #4A7030;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Roboto Condensed', sans-serif;
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    overflow-x: hidden;
    overscroll-behavior: none; /* no rubber-band / pull-to-refresh bounce */
  }

  /* ── HEADER ── */
  .header {
    background: var(--felt);
    border-bottom: 2px solid var(--gold);
    display: flex;
    flex-direction: column;
  }
  .header-stripe {
    height: 3px;
    background: var(--gold);
    opacity: 0.4;
  }
  .header-inner-row {
    display: flex;
    align-items: center;
    padding: 10px 16px 12px;
  }
  .logo {
    font-family: 'Alfa Slab One', serif;
    font-size: 21px;
    color: var(--text);
    letter-spacing: -0.5px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
    white-space: nowrap;
  }
  .logo span { color: var(--gold2); }
  .round-badge {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--aged);
    text-transform: uppercase;
    margin-left: auto;
  }
  /* Phase badge — kept in JS but hidden visually */
  .phase-badge { display: none; }

  /* ── SPIN SCREEN ── */
  .spin-screen {
    background: var(--bg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    /* Fit exactly the play area between the 52px header and the ~82px dock (plus the
       phone's bottom safe-area), so the content centers there and the page never scrolls. */
    min-height: calc(100vh - 134px);
    min-height: calc(100dvh - 134px - env(safe-area-inset-bottom, 0px));
  }
  .spin-target {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--aged);
    text-align: center;
  }
  .spin-target strong { color: var(--gold2); }

  .cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  .spin-card {
    background: var(--surface);
    border: 2px solid var(--rule2);
    padding: 12px 12px 10px;
    position: relative;
  }
  .spin-card::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--rule);
    pointer-events: none;
  }
  .team-card { border-color: var(--gold); background: linear-gradient(160deg, #141418 0%, var(--surface) 60%); }
  .era-card  { border-color: var(--gold); background: linear-gradient(160deg, #141418 0%, var(--surface) 60%); }
  .spin-card.locked { border-color: var(--rule2); opacity: 0.35; }
  .spin-card.spinning { border-color: var(--gold2); }
  .spin-card.spinning .card-value { color: var(--gold2); animation: slotRoll 0.1s linear infinite; }

  @keyframes slotRoll {
    0%   { opacity: 1;   transform: translateY(0); }
    30%  { opacity: 0.2; transform: translateY(-5px); }
    50%  { opacity: 0;   transform: translateY(0); }
    70%  { opacity: 0.2; transform: translateY(5px); }
    100% { opacity: 1;   transform: translateY(0); }
  }

  .card-label {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cream);
    margin-bottom: 8px;
  }
  .locked .card-label { color: var(--dim); }

  .card-value {
    font-family: 'Alfa Slab One', serif;
    font-size: 42px;
    color: var(--text);
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  }
  .locked .card-value { color: var(--dim); }

  .spin-status {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--aged);
    text-align: center;
    min-height: 14px;
  }

  /* ── SPIN BUTTON ── */
  .spin-btn {
    width: 100%;
    height: 54px;
    background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
    border: 2px solid var(--gold2);
    font-family: 'Alfa Slab One', serif;
    font-size: 18px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--bg);
    cursor: pointer;
    position: relative;
    box-shadow: 4px 4px 0 var(--gold-worn), 4px 4px 0 1px rgba(0,0,0,0.4);
    transition: transform 0.08s, box-shadow 0.08s;
  }
  .spin-btn::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,0.08); pointer-events: none; }
  .spin-btn:active  { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--gold-worn); }
  .spin-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

  /* ── RESPIN BUTTONS ── */
  .respin-btn {
    flex: 1;
    height: 54px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--surface);
    border: 2px solid var(--rule2);
    color: var(--gold2);
    cursor: pointer;
    position: relative;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
    transition: transform 0.08s, border-color 0.15s, background 0.15s;
  }
  .respin-btn::before { content: ''; position: absolute; inset: 3px; border: 1px solid var(--rule); pointer-events: none; }
  .respin-btn.available:hover { border-color: var(--gold); background: var(--gold-dim); transform: translate(-1px,-1px); }
  .respin-btn.available:hover .respin-icon  { color: var(--gold2); }
  .respin-btn.available:hover .respin-label { color: var(--gold); }
  .respin-btn.used     { opacity: 0.25; cursor: not-allowed; }
  .respin-btn:disabled { opacity: 0.25; cursor: not-allowed; }

  .respin-icon  { font-size: 16px; color: var(--gold2); line-height: 1; }
  .respin-label { font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold2); line-height: 1; }

  /* ── DOCK — persistent bottom bar ── */
  .dock {
    background: var(--felt);
    border-top: 2px solid var(--gold);
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: auto;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 430px;
    z-index: 200;
    box-shadow: 0 -3px 0 var(--gold-worn);
  }
  .dock-sections { display: flex; align-items: flex-start; }
  .dock-group    { display: flex; gap: 2px; }
  .dock-divider  { width: 2px; background: var(--rule2); margin: 0 6px; align-self: stretch; min-height: 44px; }

  .dock-slot   { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; padding: 0 1px; }
  .dock-circle {
    width: 41px; height: 41px;
    border: 2px solid var(--rule2);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 11px; font-weight: 700;
    color: var(--dim);
    text-transform: uppercase;
    background: var(--surface);
  }
  .dock-circle.offense-filled { border-color: var(--gold2);  background: var(--gold2);  color: var(--bg); }
  .dock-circle.defense-filled { border-color: var(--orange); background: var(--orange); color: var(--bg); }
  .dock-label { font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
  .dock-label.filled-label { color: var(--aged); }

  /* Armed slot — the room you picked lights up here; tap it to lock the room in */
  .dock-slot.armed { cursor: pointer; }
  .dock-slot.armed .dock-circle {
    border-color: var(--gold2); color: var(--gold2);
    animation: dock-armed 0.9s ease-in-out infinite;
  }
  .dock-slot.armed .dock-label { color: var(--gold2); }
  /* Defense slots glow orange to match their side */
  .dock-slot.armed.def-slot .dock-circle { border-color: var(--orange); color: var(--orange); }
  .dock-slot.armed.def-slot .dock-label  { color: var(--orange); }
  @keyframes dock-armed { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

  /* Selected — the solid fill pops as it lands, then stays filled */
  .dock-circle.just-filled { animation: dock-fill 0.4s ease-out; }
  @keyframes dock-fill { 0% { transform: scale(0.8); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }

  /* ── ROOM SCREEN ── */
  .room-screen { background: var(--bg); min-height: 100vh; padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }

  .result-header {
    display: flex;
    align-items: stretch;
    background: var(--felt);
    border-bottom: 2px solid var(--gold);
  }
  .result-pill {
    font-family: 'Alfa Slab One', serif;
    font-size: 17px;
    padding: 10px 16px;
    border-right: 2px solid var(--rule2);
    color: var(--text);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
  }
  .result-pill.school { color: var(--text); }
  .result-pill.era    { color: var(--text); }

  .result-header .respin-btn {
    width: auto; height: auto;
    flex: none;
    flex-direction: row;
    gap: 6px;
    white-space: nowrap;
    padding: 0 18px;
    border-top: none; border-bottom: none; border-right: none;
    border-left: 2px solid var(--rule2);
    box-shadow: none;
  }
  .result-header .respin-btn::before { display: none; }
  .result-header > div[style*="flex:1"] { flex: 1; }

  .pos-instruction {
    font-family: 'Oswald', sans-serif;
    font-size: 9px; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--aged); padding: 8px 16px 4px; opacity: 0.7;
  }

  /* ── POSITION CARDS ── */
  .pos-card {
    background: var(--surface);
    border: 2px solid var(--rule2);
    margin-bottom: 8px;
    position: relative;
  }
  .pos-card.selected { border-color: var(--gold); }
  .pos-card.selected::after { content: ''; position: absolute; inset: 3px; border: 1px solid var(--gold-dim); pointer-events: none; }
  .pos-card.filled-card { opacity: 0.35; }

  .pos-card-header { display: flex; align-items: stretch; }

  .pos-avatar {
    width: 44px;
    display: flex; align-items: center; justify-content: flex-start; padding-left: 10px;
    border-right: 2px solid var(--rule2);
    font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px;
    color: var(--aged); flex-shrink: 0; background: var(--surface2);
  }
  .pos-card.selected .pos-avatar { background: var(--gold-dim); border-right-color: var(--gold); color: var(--gold2); }
  .offense-pos { color: var(--gold) !important; }
  .defense-pos { color: var(--orange) !important; }

  .pos-card-title { flex: 1; padding: 9px 12px; }
  .pos-card-title strong { font-family: 'Alfa Slab One', serif; font-size: 15px; color: var(--text); display: block; line-height: 1.1; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); }
  .pos-card-title small  { font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--aged); margin-top: 2px; display: block; }

  .pos-card-check {
    font-family: 'Alfa Slab One', serif; font-size: 24px;
    color: var(--aged);
    border-left: 2px solid var(--rule2);
    padding: 0 14px; display: flex; align-items: center;
    min-width: 56px; justify-content: center;
  }
  .pos-card.selected .pos-card-check { color: var(--gold2); border-left-color: var(--gold); }

  /* Stat table */
  .stat-header-row { display: flex; align-items: center; padding: 4px 12px 3px 56px; border-top: 2px solid var(--rule2); background: var(--surface2); }
  .stat-header-name { flex: 1; font-family: 'Oswald', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--aged); }
  .stat-header-col  { font-family: 'Oswald', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--aged); text-align: right; width: 52px; flex-shrink: 0; }

  .player-row   { display: flex; align-items: center; padding: 5px 12px; background: var(--surface); border-top: 1px solid var(--rule); }
  .player-info  { flex: 1; min-width: 0; }
  .player-name  { font-family: 'Roboto Condensed', sans-serif; font-size: 14px; font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat-cols    { display: flex; gap: 0; flex-shrink: 0; }
  .stat-col     { text-align: right; width: 52px; flex-shrink: 0; }
  .stat-val     { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 400; color: var(--cream); line-height: 1.1; }
  .stat-lbl     { font-family: 'Oswald', sans-serif; font-size: 8px; font-weight: 600; letter-spacing: 0.5px; color: var(--aged); text-transform: uppercase; }

  /* ── CONFIRM BAR ── */
  .confirm-bar {
    position: fixed; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
    width: 430px; padding: 10px 16px 12px;
    background: linear-gradient(transparent, var(--bg) 40%);
    z-index: 50;
  }
  .confirm-btn {
    width: 100%; height: 52px;
    background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
    border: 2px solid var(--gold2);
    font-family: 'Alfa Slab One', serif;
    font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--bg); cursor: pointer;
    box-shadow: 4px 4px 0 var(--gold-worn), 4px 4px 0 1px rgba(0,0,0,0.4);
    transition: transform 0.08s, box-shadow 0.08s;
    position: relative;
  }
  .confirm-btn::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,0.06); pointer-events: none; }
  .confirm-btn:active  { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--gold-worn); }
  .confirm-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

  /* ── RESULTS SCREEN ── */
  .results-screen { background: var(--bg); min-height: 100vh; }

  /* Results header — 2-column: record (left) + result tag under it, OFF/DEF (right).
     Shared by the post-draft results page and the playoff end card. */
  .results-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: var(--felt);
    padding: 22px 16px 18px;
  }
  .results-record-col { text-align: left; min-width: 0; }
  .record-num {
    font-family: 'Alfa Slab One', serif;
    font-size: 58px; color: var(--text);
    letter-spacing: -3px; line-height: 0.9;
    text-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  }
  .record-num.champ { color: var(--gold2); }
  .record-num.elim  { color: var(--cream); }

  .ratings-stack {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 8px; flex-shrink: 0;
  }
  .rating-line { display: flex; align-items: baseline; gap: 8px; }
  .rating-label {
    font-family: 'Oswald', sans-serif;
    font-size: 15px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; color: var(--aged);
  }
  .rating-val {
    font-family: 'Alfa Slab One', serif;
    font-size: 34px; line-height: 1; letter-spacing: -1px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    min-width: 48px; text-align: right;
  }
  .rating-line.offense .rating-val { color: var(--gold2); }
  .rating-line.defense .rating-val { color: var(--orange); }

  /* Result / qualification tag sitting directly under the record */
  .playoff-status { text-align: left; margin-top: 7px; }
  .playoff-status:empty { display: none; }
  .ps-badge {
    font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; line-height: 1.2;
  }
  .ps-badge.in  { color: var(--gold2); }
  .ps-badge.out { color: var(--orange); }



  /* Grade + ratings row */
  .grade-row, .grade-ratings-row {
    display: flex;
    background: var(--felt);
    border-bottom: 2px solid var(--rule2);
  }
  .grade-badge-block { display: none; }
  .grade-badge       { display: none; }
  .grade-label       { display: none; }

  .score-chips { display: none; }
  .score-chip {
    flex: 1; padding: 12px 16px 10px;
    border-right: 2px solid var(--rule2);
    position: relative;
    background: var(--felt);
  }
  .score-chip:last-child { border-right: none; }
  .score-chip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
  .score-chip.offense::before { background: var(--gold); }
  .score-chip.defense::before { background: var(--orange); }
  .chip-label { font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--aged); margin-bottom: 4px; }
  .chip-val   { font-family: 'Alfa Slab One', serif; font-size: 36px; line-height: 1; letter-spacing: -1px; text-shadow: 2px 2px 0 rgba(0,0,0,0.4); }
  .score-chip.offense .chip-val { color: var(--gold2); }
  .score-chip.defense .chip-val { color: var(--orange); }

  /* Inline ratings in grade-ratings-row */
  .grade-ratings-row .score-chip { display: flex; flex-direction: column; align-items: center; text-align: center; }

  /* All-time percentile banner */
  .alltime-rank {
    text-align: center; padding: 9px 16px;
    background: var(--felt);
    border-top: 2px solid var(--rule2);
    border-bottom: 2px solid var(--rule2);
    font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase; color: var(--aged);
  }
  .alltime-rank:empty { display: none; }
  .alltime-rank .pct {
    color: var(--gold2); font-family: 'Alfa Slab One', serif;
    font-size: 17px; letter-spacing: 0; margin-left: 6px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  }

  /* Result rows */
  .result-row {
    display: flex; align-items: stretch;
    background: var(--surface);
    border: 2px solid var(--rule2);
    margin-bottom: 5px;
  }
  .offense-row { border-left: 4px solid var(--gold); }
  .defense-row { border-left: 4px solid var(--orange); }

  .pos-avatar.offense-pos, .pos-avatar.defense-pos,
  .result-row .pos-avatar {
    width: 40px;
    display: flex; align-items: center; justify-content: center;
    border-right: 2px solid var(--rule2);
    font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px;
    flex-shrink: 0; background: var(--surface2);
    padding-left: 0;
  }
  .offense-pos { color: var(--gold) !important; }
  .defense-pos { color: var(--orange) !important; }

  .result-info { flex: 1; padding: 8px 10px; }
  .result-school { font-family: 'Roboto Condensed', sans-serif; font-size: 14px; font-weight: 400; color: var(--text); line-height: 1; }
  .result-meta   { font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--aged); margin-top: 2px; }
  .result-era, .result-players { font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--aged); display: inline; }
  .result-score-col { display: none; }
  .result-score     { display: none; }

  /* CTA */
  .cta-row { display: flex; gap: 10px; padding: 14px 16px; }
  .cta-btn {
    flex: 1; height: 50px;
    font-family: 'Alfa Slab One', serif; font-size: 13px;
    letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; border: 2px solid;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
    transition: transform 0.08s;
  }
  .cta-btn:active { transform: translate(2px,2px); }
  .cta-again { background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%); border-color: var(--gold2); color: var(--bg); }
  .cta-share { background: var(--surface); border-color: var(--rule2); color: var(--cream); }

  /* ── PLAYOFF MODE ── */
  .playoff-cta-row { display: flex; padding: 4px 16px 0; }
  .cta-playoffs {
    width: 100%;
    height: 56px; font-size: 16px; letter-spacing: 2.5px;
    background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
    border-color: var(--gold2); color: var(--bg);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  }
  .cta-ico { font-size: 16px; margin-right: 6px; vertical-align: -1px; }

  .playoff-screen { background: var(--bg); min-height: 100vh; padding-bottom: 40px; }

  .pf-header { background: var(--felt); padding: 16px; border-bottom: 2px solid var(--rule2); }
  .pf-title {
    font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase; color: var(--gold2);
    text-align: center;
  }
  /* Playoff bracket — progressive stack: Your Team on top, opponents build below */
  .pf-stack { padding: 14px 16px 36px; }
  .pf-rt { font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
  .pf-rt.off { color: var(--gold2); }
  .pf-rt.def { color: var(--orange); }

  .pf-yourteam {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 8px 0 12px; border-bottom: 2px solid var(--gold);
  }
  .pf-yt-name { font-family: 'Alfa Slab One', serif; font-size: 22px; color: var(--text); letter-spacing: -0.5px; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
  .pf-yt-ratings { display: flex; gap: 12px; flex-shrink: 0; }

  .pf-opp {
    background: var(--surface); border: 2px solid var(--rule2);
    border-left: 4px solid var(--orange);
    margin-top: 12px; padding: 12px 14px;
  }
  .pf-opp.dim { opacity: 0.45; }
  .pf-opp.enter { animation: pf-opp-in 0.45s ease-out both; }
  @keyframes pf-opp-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

  .pf-opp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .pf-opp-info { min-width: 0; }
  .pf-opp-round { font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold2); margin-bottom: 3px; }
  .pf-opp-name { font-family: 'Roboto Condensed', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.1; }
  .pf-opp-note { font-family: 'Roboto Condensed', sans-serif; font-size: 12.5px; font-weight: 400; letter-spacing: 0.2px; color: var(--cream); margin-top: 3px; line-height: 1.3; }
  .pf-opp-ratings { display: flex; gap: 12px; flex-shrink: 0; }
  .pf-opp-final { font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; flex-shrink: 0; white-space: nowrap; }
  .pf-opp-final.w { color: var(--green); }
  .pf-opp-final.l { color: var(--orange); }

  .pf-current { margin-top: 12px; }

  .pf-middle { padding: 16px; }

  /* Quarter-by-quarter scoreboard */
  .pf-sb-status {
    text-align: center; font-family: 'Oswald', sans-serif; font-size: 12px;
    font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
    color: var(--gold2); margin: 2px 0 12px; min-height: 16px;
  }
  .pf-scoreboard { border: 2px solid var(--rule2); background: var(--surface); }
  .pf-sb-row { display: grid; grid-template-columns: 1fr 30px 30px 30px 30px 48px; align-items: center; }
  .pf-sb-row + .pf-sb-row { border-top: 1px solid var(--rule); }
  .pf-sb-head { background: var(--surface2); }
  .pf-sb-head > div { font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--aged); text-align: center; padding: 6px 0; }
  .pf-sb-team { text-align: left; padding-left: 12px; }
  .pf-sb-row .pf-sb-team {
    font-family: 'Roboto Condensed', sans-serif; font-size: 14px; font-weight: 700;
    color: var(--text); padding: 12px 0 12px 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pf-sb-q {
    font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 600;
    color: var(--cream); text-align: center; padding: 12px 0;
    opacity: 0.25; transition: opacity 0.2s;
  }
  .pf-sb-q.shown { opacity: 1; }
  .pf-sb-f { font-family: 'Alfa Slab One', serif; font-size: 21px; color: var(--text); text-align: center; }
  .pf-sb-f.lead { color: var(--gold2); }
  .pf-sb-win {
    display: inline-block; margin-left: 8px; padding: 1px 7px;
    background: var(--green); color: var(--text);
    font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 1px; vertical-align: middle;
  }

  .pf-stamp-wrap { text-align: center; margin-top: 16px; }
  .pf-stamp {
    display: inline-block; padding: 7px 26px;
    font-family: 'Alfa Slab One', serif; font-size: 17px; letter-spacing: 2px;
    border: 2px solid;
  }
  .pf-stamp.win  { background: var(--green);  border-color: var(--green);  color: var(--text); }
  .pf-stamp.loss { background: var(--orange); border-color: var(--orange); color: var(--bg); }
  .pf-advance { width: 100%; margin-top: 16px; height: 50px; }

  .pf-end { text-align: center; padding: 26px 16px 10px; }
  .pf-trophy { font-size: 60px; line-height: 1; margin-bottom: 6px; }
  .pf-end-record {
    font-family: 'Alfa Slab One', serif; font-size: 60px; line-height: 0.95;
    letter-spacing: -3px; color: var(--text); text-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  }
  .pf-end.champion   .pf-end-record { color: var(--gold2); }
  .pf-end.eliminated .pf-end-record { color: var(--cream); }
  .pf-end-title { font-family: 'Alfa Slab One', serif; font-size: 26px; color: var(--gold2); letter-spacing: -0.5px; margin-top: 6px; text-shadow: 3px 3px 0 rgba(0,0,0,0.5); }
  .pf-end.eliminated .pf-end-title { color: var(--orange); }
  .pf-end-sub { font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 1px; color: var(--cream); margin-top: 10px; }
  .pf-end-alltime { font-family: 'Roboto Condensed', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0.2px; text-transform: none; color: var(--aged); margin-top: 14px; text-align: left; padding: 0 16px; }
  .pf-end-alltime .pct { color: var(--cream); font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0; margin: 0 2px; }

  .pf-recap { margin: 18px 0 6px; }
  .pf-recap-row { display: flex; align-items: center; background: var(--surface); border: 2px solid var(--rule2); padding: 9px 12px; margin-bottom: 5px; }
  .pf-recap-row.win  { border-left: 4px solid var(--green); }
  .pf-recap-row.loss { border-left: 4px solid var(--orange); }
  .pf-recap-rd    { font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--aged); width: 84px; text-align: left; }
  .pf-recap-opp   { flex: 1; font-family: 'Roboto Condensed', sans-serif; font-size: 13px; color: var(--text); text-align: left; }
  .pf-recap-score { font-family: 'Alfa Slab One', serif; font-size: 15px; color: var(--cream); }

  /* Room screen padding for fixed dock */
  .room-screen .pos-card { }

  .hidden { display: none !important; }

  .spin-intro {
    text-align: center;
    padding: 36px 8px;
  }
  .spin-intro-line1 {
    font-family: 'Alfa Slab One', serif;
    font-size: 32px;
    color: var(--text);
    letter-spacing: -1px;
    line-height: 1.1;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  }
  .spin-intro-line2 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--aged);
    margin-top: 8px;
  }