@layer components {
  html[data-route="/matchups"] .view-tabs{display:flex;gap:6px;flex-wrap:wrap;}
  html[data-route="/matchups"] .view-tab{padding:11px 16px;min-height:44px;border-radius:8px;font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;transition:all .15s;}
  html[data-route="/matchups"] .view-tab.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/matchups"] .view-tab:hover:not(.active){color:var(--white-bright);}
  html[data-route="/matchups"] .view-tab:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  html[data-route="/matchups"] .view-tab:active{transform:scale(.96);}
  html[data-route="/matchups"] .league-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 4px;}
  html[data-route="/matchups"] .league-tab{padding:11px 16px;min-height:44px;border-radius:8px;font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;transition:all .15s;}
  html[data-route="/matchups"] .league-tab.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/matchups"] .league-tab:hover{color:var(--white-bright);}
  html[data-route="/matchups"] .league-tab:active{background:rgba(255,26,26,.22);transform:scale(.96);}
  html[data-route="/matchups"] .league-tab:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  html[data-route="/matchups"] .week-strip{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:6px 0;}
  html[data-route="/matchups"] .week-strip::-webkit-scrollbar{display:none;}
  html[data-route="/matchups"] .week-chip{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:32px;padding:0 10px;background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:6px;font-family:var(--f-display);font-size:16px;letter-spacing:.06em;color:var(--gray-light);cursor:pointer;transition:all .15s;flex-shrink:0;white-space:nowrap;}
  html[data-route="/matchups"] .week-chip:hover{border-color:rgba(255,26,26,.4);color:var(--white-bright);}
  html[data-route="/matchups"] .week-chip.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/matchups"] .week-chip.current-indicator{box-shadow:inset 0 -2px 0 var(--accent, #FF2D2D);}
  html[data-route="/matchups"] .week-chip.playoff{color:#FFFFFF;border-color:rgba(255,255,255,.3);}
  html[data-route="/matchups"] .week-summary{font-size:16px;color:var(--gray-light);flex-shrink:0;}
  html[data-route="/matchups"] .matchup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
  html[data-route="/matchups"] .matchup-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .15s;}
  html[data-route="/matchups"] .matchup-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(255,26,26,.03));pointer-events:none;}
  html[data-route="/matchups"] .matchup-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,26,26,.2);border-color:rgba(255,26,26,.3);}
  html[data-route="/matchups"] .matchup-card:active{transform:scale(.98);}
  html[data-route="/matchups"] .matchup-card.is-final{border-color:rgba(61,186,110,.18);}
  html[data-route="/matchups"] .matchup-card.is-live{border-color:rgba(61,186,110,.4);box-shadow:0 0 20px rgba(61,186,110,.07);}
  html[data-route="/matchups"] .matchup-card.is-mine{border:2px solid var(--accent, #FF2D2D);box-shadow:0 0 16px rgba(255,45,45,.08);}
  html[data-route="/matchups"] .matchup-card.is-mine:hover{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 20px rgba(255,45,45,.12);border-color:#FFFFFF;}
  html[data-route="/matchups"] .matchup-card.is-bye{border-style:dashed;opacity:.7;cursor:default;}
  html[data-route="/matchups"] .matchup-card.is-bye:hover{opacity:.85;transform:none;box-shadow:none;}
  html[data-route="/matchups"] .mc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  html[data-route="/matchups"] .mc-week-lbl{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:var(--gray-light);}
  html[data-route="/matchups"] .mc-mine-tag{font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF;background:rgba(255,45,45,.1);border:1px solid rgba(255,45,45,.2);padding:1px 6px;border-radius:3px;}
  html[data-route="/matchups"] .mc-matchup{display:flex;flex-direction:column;gap:6px;}
  html[data-route="/matchups"] .mc-team-row{display:flex;align-items:center;gap:10px;}
  html[data-route="/matchups"] .mc-helmet{width:36px;height:36px;object-fit:contain;flex:0 0 36px;animation:muHelmetFloat 2.4s ease-in-out infinite;}
  html[data-route="/matchups"] .mc-helmet-ph{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);flex:0 0 36px;}
  html[data-route="/matchups"] .mc-team-info{flex:1;min-width:0;}
  html[data-route="/matchups"] .mc-name{font-size:16px;font-weight:600;color:var(--white-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html[data-route="/matchups"] .mc-owner{font-size:16px;color:var(--gray-light);}
  html[data-route="/matchups"] .mc-record{font-size:16px;color:var(--gray-light);font-family:var(--f-mono);}
  html[data-route="/matchups"] .mc-score{font-family:var(--f-display);font-size:26px;letter-spacing:.03em;color:var(--white-bright);flex:0 0 auto;min-width:52px;text-align:right;line-height:1;}
  html[data-route="/matchups"] .mc-score.winning{color:#FFFFFF;}
  html[data-route="/matchups"] .mc-score.losing{color:var(--gray-light);}
  html[data-route="/matchups"] .mc-proj-row{display:flex;justify-content:space-between;font-size:16px;color:var(--gray-light);padding:0 46px 0 46px;}
  html[data-route="/matchups"] .mc-divider{display:flex;align-items:center;gap:8px;padding:0 2px;}
  html[data-route="/matchups"] .mc-divider-line{flex:1;height:1px;background:var(--hairline);}
  html[data-route="/matchups"] .mc-divider-vs{font-size:16px;color:var(--gray-light);letter-spacing:.08em;font-family:var(--f-display);}
  html[data-route="/matchups"] .mc-footer{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--hairline);gap:8px;}
  html[data-route="/matchups"] .mc-view-link{font-size:16px;font-weight:600;letter-spacing:.06em;color:var(--red-primary);}
  html[data-route="/matchups"] .mc-winner-note{font-size:16px;color:var(--gray-light);font-style:italic;}
  html[data-route="/matchups"] .schedule-table{width:100%;border-collapse:collapse;font-size:16px;}
  html[data-route="/matchups"] .schedule-table th{font-family:var(--f-display);font-size:16px;letter-spacing:.12em;color:var(--gray-light);text-align:left;padding:8px 10px;border-bottom:1px solid var(--gray-border);text-transform:uppercase;}
  html[data-route="/matchups"] .schedule-table th.r{text-align:right;}
  html[data-route="/matchups"] .schedule-table td{padding:10px;border-bottom:1px solid var(--hairline);color:var(--white-bright);vertical-align:middle;}
  html[data-route="/matchups"] .schedule-table td.r{text-align:right;font-family:var(--f-mono);font-weight:600;}
  html[data-route="/matchups"] .schedule-table tr:hover td{background:rgba(255,255,255,.02);}
  html[data-route="/matchups"] .schedule-table tr.current-week td{background:rgba(255,26,26,.06);}
  html[data-route="/matchups"] .schedule-table tr.current-week td:first-child{box-shadow:inset 3px 0 0 var(--red-primary);}
  html[data-route="/matchups"] .sched-result{font-family:var(--f-mono);font-weight:700;font-size:16px;padding:2px 6px;border-radius:3px;}
  html[data-route="/matchups"] .sched-result.W{color:#fff;background:rgba(61,186,110,.2);}
  html[data-route="/matchups"] .sched-result.L{color:var(--gray-light);background:rgba(138,138,138,.12);}
  html[data-route="/matchups"] .sched-opp{display:flex;align-items:center;gap:8px;}
  html[data-route="/matchups"] .sched-opp-helmet{width:24px;height:24px;object-fit:contain;}
  html[data-route="/matchups"] .sched-bye{color:var(--gray-light);font-style:italic;}
  html[data-route="/matchups"] .h2h-section{display:flex;flex-direction:column;gap:12px;}
  html[data-route="/matchups"] .h2h-summary{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:16px;background:linear-gradient(135deg,rgba(255,26,26,.04),transparent);border:1px solid var(--gray-border);border-radius:10px;}
  html[data-route="/matchups"] .h2h-side{display:flex;flex-direction:column;gap:2px;}
  html[data-route="/matchups"] .h2h-side.left{align-items:flex-start;}
  html[data-route="/matchups"] .h2h-side.right{align-items:flex-end;text-align:right;}
  html[data-route="/matchups"] .h2h-name{font-size:16px;font-weight:700;color:var(--white-bright);}
  html[data-route="/matchups"] .h2h-wins{font-family:var(--f-display);font-size:36px;color:#FFFFFF;line-height:1;}
  html[data-route="/matchups"] .h2h-center{display:flex;flex-direction:column;align-items:center;gap:4px;}
  html[data-route="/matchups"] .h2h-vs{font-family:var(--f-display);font-size:16px;letter-spacing:.1em;color:var(--gray-light);}
  html[data-route="/matchups"] .h2h-game{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--black-soft);border:1px solid var(--hairline-2);border-radius:8px;font-size:16px;}
  html[data-route="/matchups"] .h2h-game-week{font-family:var(--f-display);font-size:16px;letter-spacing:.08em;color:var(--gray-light);min-width:80px;}
  html[data-route="/matchups"] .h2h-game-score{font-family:var(--f-mono);font-weight:700;color:var(--white-bright);}
  html[data-route="/matchups"] .h2h-game-score .winner{color:#FFFFFF;}
  html[data-route="/matchups"] .bracket-container{overflow-x:auto;padding:16px 0;}
  html[data-route="/matchups"] .bracket{display:flex;gap:48px;align-items:stretch;min-width:max-content;}
  html[data-route="/matchups"] .bracket-round{display:flex;flex-direction:column;justify-content:space-around;position:relative;min-width:220px;}
  html[data-route="/matchups"] .bracket-round-label{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:var(--red-primary);text-transform:uppercase;text-align:center;margin-bottom:12px;flex-shrink:0;}
  html[data-route="/matchups"] .bracket-games{display:flex;flex-direction:column;justify-content:space-around;flex:1;gap:16px;}
  html[data-route="/matchups"] .bracket-matchup{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;position:relative;}
  html[data-route="/matchups"] .bracket-matchup.is-mine{border:2px solid var(--accent, #FF2D2D);}
  html[data-route="/matchups"] .bracket-matchup.champ-slot{border-color:#FFFFFF;background:rgba(255,45,45,.04);}
  html[data-route="/matchups"] .bracket-team{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:16px;}
  html[data-route="/matchups"] .bracket-seed{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);min-width:16px;}
  html[data-route="/matchups"] .bracket-name{flex:1;font-weight:600;color:var(--white-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html[data-route="/matchups"] .bracket-name.winner{color:#FFFFFF;}
  html[data-route="/matchups"] .bracket-name.tbd{color:var(--gray-light);font-style:italic;font-weight:400;}
  html[data-route="/matchups"] .bracket-pts{font-family:var(--f-mono);font-weight:700;font-size:16px;color:var(--white-bright);min-width:40px;text-align:right;}
  html[data-route="/matchups"] .bracket-sep{height:1px;background:var(--hairline);margin:2px 0;}
  html[data-route="/matchups"] .bracket-status{font-size:16px;text-align:center;color:var(--gray-light);letter-spacing:.06em;text-transform:uppercase;padding-top:2px;}
  html[data-route="/matchups"] .bracket-champ-banner{text-align:center;padding:20px;border:2px solid var(--accent, #FF2D2D);border-radius:12px;background:rgba(255,45,45,.06);margin-top:16px;}
  html[data-route="/matchups"] .bracket-champ-label{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:#FFFFFF;text-transform:uppercase;margin-bottom:4px;}
  html[data-route="/matchups"] .bracket-champ-name{font-family:var(--f-display);font-size:24px;color:#FFFFFF;letter-spacing:.04em;}
  html[data-route="/matchups"] .bracket-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
  html[data-route="/matchups"] .bracket-line{stroke:var(--gray-border);stroke-width:1;fill:none;}
  /* Q-EXP-5 spot-check: token drift only (max-height 90vh→86vh, scrim .75→.6 per D-EXPCARD-0716 §1) */
  html[data-route="/matchups"] .mu-modal{border:1px solid var(--gray-border);border-radius:16px;background:var(--black-card);color:var(--white-bright);padding:0;max-width:760px;width:calc(100vw - 32px);max-height:86vh;overflow:hidden;}
  html[data-route="/matchups"] .mu-modal:not([open]){display:none;}
  html[data-route="/matchups"] .mu-modal[open]{display:flex;flex-direction:column;animation:muModalIn .22s cubic-bezier(.16,1,.3,1) both;}
  html[data-route="/matchups"] .mu-modal::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:muBackdropIn .22s ease both;}
  @media(prefers-reduced-motion:reduce){html[data-route="/matchups"] .mu-modal[open]{animation:none;}html[data-route="/matchups"] .mu-modal::backdrop{animation:none;}}
  html[data-route="/matchups"] .mu-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-border);flex-shrink:0;}
  html[data-route="/matchups"] .mu-modal-title{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;color:var(--white-bright);}
  html[data-route="/matchups"] .mu-modal-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px;background:transparent;border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;font-size:16px;transition:border-color .15s,color .15s;}
  html[data-route="/matchups"] .mu-modal-close:hover{border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/matchups"] .mu-modal-close:active{background:rgba(255,255,255,.12);border-color:var(--red-bright);}
  html[data-route="/matchups"] .mu-modal-body{overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px;flex:1;}
  html[data-route="/matchups"] .mu-modal-tabs{display:flex;gap:6px;border-bottom:1px solid var(--gray-border);padding-bottom:10px;}
  html[data-route="/matchups"] .mu-modal-tab{padding:6px 12px;border-radius:6px;font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:transparent;border:1px solid transparent;color:var(--gray-light);cursor:pointer;transition:all .15s;}
  html[data-route="/matchups"] .mu-modal-tab.active{background:rgba(255,26,26,.12);border-color:rgba(255,26,26,.3);color:var(--white-bright);}
  html[data-route="/matchups"] .mu-modal-tab:hover:not(.active){color:var(--white-bright);}
  html[data-route="/matchups"] .mu-modal-tab:active{background:rgba(255,26,26,.2);transform:scale(.96);}
  html[data-route="/matchups"] .mu-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(255,26,26,.04),transparent);border:1px solid var(--gray-border);border-radius:10px;padding:16px;}
  html[data-route="/matchups"] .mu-sb-side{display:flex;flex-direction:column;gap:3px;}
  html[data-route="/matchups"] .mu-sb-side.left{align-items:flex-start;}
  html[data-route="/matchups"] .mu-sb-side.right{align-items:flex-end;text-align:right;}
  html[data-route="/matchups"] .mu-sb-name{font-size:16px;font-weight:700;color:var(--white-bright);}
  html[data-route="/matchups"] .mu-sb-owner{font-size:16px;color:var(--gray-light);}
  html[data-route="/matchups"] .mu-sb-rec{font-size:16px;color:var(--gray-light);font-family:var(--f-mono);}
  html[data-route="/matchups"] .mu-sb-center{display:flex;flex-direction:column;align-items:center;gap:6px;}
  html[data-route="/matchups"] .mu-sb-scores{display:flex;align-items:baseline;gap:6px;}
  html[data-route="/matchups"] .mu-sb-score{font-family:var(--f-display);font-size:34px;letter-spacing:.04em;}
  html[data-route="/matchups"] .mu-sb-score.winning{color:#FFFFFF;}
  html[data-route="/matchups"] .mu-sb-score.losing{color:var(--gray-light);}
  html[data-route="/matchups"] .mu-sb-dash{font-family:var(--f-display);font-size:20px;color:var(--gray-light);}
  html[data-route="/matchups"] .mu-sb-proj{font-size:16px;color:var(--gray-light);}
  html[data-route="/matchups"] .mu-breakdown{display:flex;flex-direction:column;gap:8px;}
  html[data-route="/matchups"] .mu-breakdown-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
  html[data-route="/matchups"] .mu-breakdown-title{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:var(--red-primary);text-transform:uppercase;}
  html[data-route="/matchups"] .mu-breakdown-total{font-family:var(--f-mono);font-size:16px;font-weight:700;color:#FFFFFF;}
  html[data-route="/matchups"] .mu-table{width:100%;border-collapse:collapse;font-size:16px;}
  html[data-route="/matchups"] .mu-table th{font-family:var(--f-display);font-size:16px;letter-spacing:.12em;color:var(--gray-light);text-align:left;padding:5px 8px;border-bottom:1px solid var(--gray-border);}
  html[data-route="/matchups"] .mu-table th.r{text-align:right;}
  html[data-route="/matchups"] .mu-table td{padding:7px 8px;border-bottom:1px solid var(--hairline);color:var(--white-bright);vertical-align:middle;}
  html[data-route="/matchups"] .mu-table td.r{text-align:right;}
  html[data-route="/matchups"] .mu-table tr:last-child td{border-bottom:none;}
  html[data-route="/matchups"] .mu-table tr:hover td{background:rgba(255,255,255,.02);}
  html[data-route="/matchups"] .mu-pos{display:inline-block;padding:1px 5px;border-radius:3px;font-size:16px;font-weight:700;letter-spacing:.08em;background:rgba(255,45,45,.1);color:#FFFFFF;border:1px solid rgba(255,45,45,.2);}
  html[data-route="/matchups"] .mu-pts{font-family:var(--f-mono);font-weight:700;font-size:16px;}
  html[data-route="/matchups"] .mu-pts.top{color:#FFFFFF;}
  html[data-route="/matchups"] .mu-pts.low{color:var(--gray-light);}
  html[data-route="/matchups"] .mu-proj-val{font-size:16px;color:var(--gray-light);}
  html[data-route="/matchups"] .mu-stat{font-size:16px;color:var(--gray-light);}
  html[data-route="/matchups"] .stagger-in{opacity:0;animation:muFadeInUp .3s ease both;}
  html[data-route="/matchups"] .live-dot{animation:muLivePulse 1.4s ease-in-out infinite;}
  @media(prefers-reduced-motion:reduce){html[data-route="/matchups"] .stagger-in{animation:none;opacity:1;}html[data-route="/matchups"] .mc-helmet{animation:none;}html[data-route="/matchups"] .live-dot{animation:none;}html[data-route="/matchups"] .mu-modal[open]{animation:none;}html[data-route="/matchups"] .mu-modal::backdrop{animation:none;}html[data-route="/matchups"] .view-tab:active{transform:none;}html[data-route="/matchups"] .league-tab:active{transform:none;}html[data-route="/matchups"] .mu-modal-tab:active{transform:none;}}
  @media(max-width:767px){html[data-route="/matchups"] .matchup-grid{grid-template-columns:1fr;}html[data-route="/matchups"] .mu-modal{width:calc(100vw - 16px);}html[data-route="/matchups"] .mu-sb-score{font-size:26px;}html[data-route="/matchups"] .mu-scoreboard{padding:12px 10px;gap:8px;}html[data-route="/matchups"] .bracket{gap:24px;}html[data-route="/matchups"] .bracket-round{min-width:170px;}html[data-route="/matchups"] .schedule-table{font-size:16px;}html[data-route="/matchups"] .schedule-table th,html[data-route="/matchups"] .schedule-table td{padding:6px 6px;}
  /* A multi-league account (5-6 leagues) wrapped this into a wall of
     full-width pills that pushed the H2H card below the fold on phone
     (LEDGER matchups route.css:8, P2). Same horizontal-scroll-strip pattern
     already used for .week-strip just below it in this file — one row,
     swipe for more, matchup content stays above the fold. */
  html[data-route="/matchups"] .league-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;}
  html[data-route="/matchups"] .league-tabs::-webkit-scrollbar{display:none;}
  html[data-route="/matchups"] .league-tab{flex-shrink:0;white-space:nowrap;}
  }
  @media(max-width:359px){html[data-route="/matchups"] .matchup-grid{grid-template-columns:1fr !important;}html[data-route="/matchups"] .mc-score{font-size:22px;min-width:44px;}html[data-route="/matchups"] .hide-320{display:none !important;}html[data-route="/matchups"] .mu-sb-score{font-size:20px;}html[data-route="/matchups"] .mu-table{font-size:16px;}html[data-route="/matchups"] .mu-table th,html[data-route="/matchups"] .mu-table td{padding:5px 4px;}html[data-route="/matchups"] .bracket-round{min-width:140px;}}
}