@layer components {
:root{--red-primary: #FF1A1A;--red-bright: #FF3B30;--red-crimson: #8B0000;--red-glow: #FF2D2D;--orange-accent: #FF6A00;--gold-accent: #F0BD30;--black-pure: #000000;--black-bg: #050505;--black-card: #0A0A0A;--black-soft: #111111;--gray-border: #2A2A2A;--gray-light: #8A8A8A;--white-bright: #F5F5F5;--bg-page: var(--black-bg);--bg-surface: var(--black-card);--bg-surface-2: var(--black-soft);--bg-surface-3: #1A1A1A;--border-accent: var(--red-primary);--border-accent-2: var(--red-bright);--text-primary: var(--white-bright);--text-muted: var(--gray-light);--text-faint: #5E626E;--hairline: rgba(255,255,255,.06);--hairline-2: rgba(255,255,255,.1);--gold-medal: #D4A847;--silver-medal: #CFD2D6;--bronze-medal: #C7884A;--f-display: "Graduate", "Oswald", "Anton", sans-serif;--f-body: "Inter", system-ui, sans-serif;--f-numeral: "JetBrains Mono", ui-monospace, monospace;--f-mono: "JetBrains Mono", ui-monospace, monospace;--sidebar-w: 250px;--row-gap: 24px;--col-gap: 16px;--card-pad: 20px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--black-bg);color:var(--white-bright);font-family:var(--f-body);font-size:16px}html{color-scheme:dark}body{min-height:100vh}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}img{display:block;max-width:100%}.skip{position:absolute;top:-100px;left:0;padding:8px 16px;background:var(--red-primary);color:#fff;z-index:100}.skip:focus{top:0}.numeral-accent{color:#FFFFFF!important;font-family:var(--f-display)}.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh}.content{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;gap:var(--row-gap);padding:0 24px 32px;min-width:0}.sidebar{background:var(--black-pure);border-right:1px solid var(--red-primary);box-shadow:4px 0 16px #ff000040;padding:28px 18px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.nav-brand{display:flex;align-items:center;justify-content:center;border-radius:10px;filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 8px rgba(255,0,0,.4));padding:6px;height:64px;margin-bottom:8px;flex:0 0 auto}.nav-brand img{width:100%;height:100%;object-fit:contain}.nav-list{display:flex;flex-direction:column;gap:22px;padding:18px 0 0;flex:1 1 auto;overflow-y:auto;min-height:0}.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;font-family:var(--f-display);font-weight:400;font-size:17px;letter-spacing:1px;line-height:1.3;text-transform:uppercase;color:var(--gray-light);border-radius:8px;background:transparent;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .15s ease}.nav-item .nav-ic{width:16px;height:16px;display:inline-block;background:currentColor;-webkit-mask:var(--ic, none) center/contain no-repeat;mask:var(--ic, none) center/contain no-repeat;flex:0 0 16px}.nav-item .ic-home{--ic: 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'><path d='M3 11l9-8 9 8M5 10v10h14V10'/></svg>")}.nav-item .ic-trophy{--ic: 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'><path d='M7 4h10v4a5 5 0 0 1-10 0V4z'/><path d='M5 4H3v3a3 3 0 0 0 3 3'/><path d='M19 4h2v3a3 3 0 0 1-3 3'/><path d='M9 20h6v-4H9z'/></svg>")}.nav-item .ic-tree{--ic: 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'><path d='M4 6h6M4 12h6M4 18h6M14 9h6M14 15h6M10 6v6M20 9v6'/></svg>")}.nav-item .ic-users{--ic: 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'><circle cx='9' cy='8' r='3'/><circle cx='17' cy='9' r='2.5'/><path d='M3 20c0-3 3-5 6-5s6 2 6 5'/><path d='M14 20c0-2 2-3.5 4-3.5s3 1 3 3.5'/></svg>")}.nav-item .ic-star{--ic: 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'><polygon points='12,3 14.6,9 21,9.6 16.2,13.8 17.7,20 12,16.8 6.3,20 7.8,13.8 3,9.6 9.4,9'/></svg>")}.nav-item .ic-feed{--ic: 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'><path d='M4 5h16M4 11h12M4 17h8'/></svg>")}.nav-item .ic-dice{--ic: 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'><rect x='4' y='4' width='16' height='16' rx='3'/><circle cx='8.5' cy='8.5' r='1.2' fill='black'/><circle cx='15.5' cy='15.5' r='1.2' fill='black'/><circle cx='12' cy='12' r='1.2' fill='black'/></svg>")}.nav-item:hover,.nav-item:focus-visible{background:#ff1a1a1a;color:var(--white-bright);outline:none;transform:scale(1.02)}.nav-item:active{transform:scale(.98)}.nav-item.is-active{background:var(--red-primary);color:var(--white-bright);box-shadow:inset 0 0 12px #ff50508c,0 0 10px #ff000059}.nav-new{margin-left:auto;padding:2px 6px;font-size:16px;font-family:var(--f-display);letter-spacing:.12em;background:var(--red-primary);color:#fff;border-radius:3px}.nav-bottom{display:flex;flex-direction:column;gap:8px;padding:12px 0 16px;border-top:1px solid rgba(255,26,26,.18);margin-top:8px}.nav-user{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--black-soft);border:1px solid rgba(255,26,26,.25);border-radius:10px;transition:border-color .2s ease,transform .15s ease}.nav-user:hover{border-color:var(--red-primary);transform:scale(1.02)}.nav-user:active{transform:scale(.98)}.nu-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--red-primary),var(--orange-accent));flex:0 0 28px;box-shadow:0 0 0 2px var(--black-card)}.nu-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:3px;min-width:0}.nu-hi{font-size:16px;color:var(--gray-light);white-space:nowrap}.nu-pro{font-family:var(--f-display);font-size:16px;background:var(--red-primary);color:#fff;padding:1px 5px;border-radius:3px;letter-spacing:.14em}.nav-iconrow{display:flex;flex-direction:row;gap:12px;align-items:center}.nav-icbtn{display:inline-flex;align-items:center;justify-content:center;flex:1;height:34px;background:var(--black-soft);border:1px solid var(--hairline);border-radius:8px;color:var(--gray-light);transition:color .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease}.nav-icbtn:hover{color:var(--white-bright);border-color:var(--red-primary);transform:scale(1.05);box-shadow:0 0 10px #ff000059}.nav-icbtn:active{transform:scale(.95)}.ic-srch,.ic-bell{width:16px;height:16px;display:inline-block;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}.ic-srch{-webkit-mask-image: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'><circle cx='10.5' cy='10.5' r='6'/><path d='M20 20l-5-5'/></svg>");mask-image: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'><circle cx='10.5' cy='10.5' r='6'/><path d='M20 20l-5-5'/></svg>")}.ic-bell{-webkit-mask-image: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'><path d='M5 17h14l-2-3V9a5 5 0 0 0-10 0v5l-2 3z'/><path d='M10 20a2 2 0 0 0 4 0'/></svg>");mask-image: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'><path d='M5 17h14l-2-3V9a5 5 0 0 0-10 0v5l-2 3z'/><path d='M10 20a2 2 0 0 0 4 0'/></svg>")}.hero{position:relative;height:240px;border-radius:12px;overflow:hidden;margin-top:24px;border:1px solid rgba(255,0,0,.4);box-shadow:0 0 14px #f003}.hero-bg{position:absolute;inset:0;overflow:hidden}.hero-stadium{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(1.4) brightness(1.15) contrast(1.05);transform:translateY(0);will-change:transform}.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center 40%,transparent 30%,rgba(5,5,5,.3) 75%,rgba(5,5,5,.55) 100%),linear-gradient(180deg,#0505051a,#0505054d);pointer-events:none}.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 60%,var(--black-bg) 100%);pointer-events:none}.hero-wordmark{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:240px;height:auto;object-fit:contain;filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 8px rgba(255,0,0,.4)) drop-shadow(0 6px 20px rgba(0,0,0,.7));z-index:2}@keyframes hero-in{0%{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes hero-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.hero-stadium{animation:hero-in 1.2s cubic-bezier(.32,.72,0,1) both}@media(prefers-reduced-motion:reduce){.hero-stadium{animation:none}}.scoreticker{background:var(--black-bg);border:2px solid var(--red-primary);box-shadow:0 0 8px #ff000080;border-radius:6px;height:44px;overflow:hidden;display:flex;align-items:center}.ticker-track{position:relative;width:100%;height:100%;display:flex;align-items:center;padding:0;white-space:nowrap;overflow:hidden}.ticker-inner{display:inline-flex;align-items:center;gap:14px;padding:0 14px;flex:0 0 auto;will-change:transform}.t-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:16px;color:var(--red-bright);letter-spacing:.12em;padding:4px 8px;background:#ff1a1a26;border:1px solid rgba(255,26,26,.5);border-radius:4px;flex:0 0 auto}.t-dot{width:6px;height:6px;border-radius:50%;background:var(--red-bright);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1;box-shadow:0 0 8px var(--red-bright)}}.ticker-track .tg{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;font-family:var(--f-mono);font-size:16px;font-weight:500;color:var(--white-bright);border-radius:4px;white-space:nowrap;flex:0 0 auto}.tg-eyebrow{font-family:var(--f-display);letter-spacing:.14em;color:#FFFFFF;font-size:16px}.tg-team{display:inline-flex;align-items:center;gap:4px}.tg-team .tg-sc{color:#FFFFFF;margin-left:4px;font-family:var(--f-display);font-weight:700;font-size:16px}.tg-vs{color:var(--text-faint)}.tg-meta{color:var(--gray-light);font-size:16px;padding-left:4px}.tg-meta.tg-live{color:var(--red-bright)}.tg-final .tg-meta{color:var(--gray-light)}.tg-all{color:var(--red-bright)}.tg-all .t-arrow{margin-left:4px}.tg:hover{background:#ff1a1a14}img.ticker-logo{width:24px;height:24px;object-fit:contain;vertical-align:middle;margin-right:6px;border-radius:50%;background:#ffffff08;flex:0 0 24px}.row{display:grid;gap:var(--col-gap);align-items:stretch;grid-auto-rows:1fr}.row-news-rankings{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.row-fantasy-heisman{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.row-scoreboard-other{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.card{background:linear-gradient(180deg,#0d0d0d,#050505);border:1px solid rgba(255,0,0,.6);border-radius:10px;box-shadow:0 0 12px #ff000040,inset 0 0 6px #ff000014;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;padding:var(--card-pad);display:flex;flex-direction:column;min-width:0}.card:hover{transform:translateY(-2px);border-color:var(--red-bright);box-shadow:0 0 18px #ff000073,inset 0 0 8px #ff00001f}.card-head{display:flex;align-items:center;gap:10px;padding:0 0 14px;position:relative;flex:0 0 auto}.card-eyebrow{font-family:var(--f-mono);font-size:16px;color:#FFFFFF;letter-spacing:.14em;padding:2px 6px;border:1px solid rgba(240,189,48,.35);border-radius:3px}.card-title{font-family:var(--f-display);font-size:26px;letter-spacing:.04em;margin:0;color:var(--white-bright);font-weight:400;line-height:1.1;min-width:0;overflow-wrap:break-word}.card-link{margin-left:auto;font-family:var(--f-body);font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-bright);padding:4px 6px;transition:color .2s ease,transform .15s ease}.card-link:hover{color:var(--white-bright);transform:scale(1.03)}.card-link:active{transform:scale(.97)}.card-link .arrow{transition:transform .2s;display:inline-block}.card-link:hover .arrow{transform:translate(3px)}.sn--c_myleague{background:linear-gradient(135deg,#0d0d0d,#050505,#0d0d0d);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;padding:24px 28px;position:relative;overflow:hidden}.ml-text{display:flex;flex-direction:column;position:relative;z-index:2;min-width:0}.ml-text .card-eyebrow{align-self:flex-start;margin-bottom:10px}.ml-text .card-title{font-family:var(--f-display);font-size:36px;letter-spacing:.04em;line-height:1.05;color:var(--white-bright);margin:0 0 4px}.ml-sub{font-size:16px;color:var(--gray-light);margin:0 0 16px}.ml-sub .dot{color:var(--orange-accent);padding:0 6px}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:0;list-style:none;position:relative;z-index:1}.stat-row li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:#00000073;border:1px solid var(--hairline-2);border-radius:6px;backdrop-filter:blur(2px)}.st-lbl{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.12em}.st-val{font-family:var(--f-display);font-size:22px;font-weight:400;color:#FFFFFF;letter-spacing:.04em}.ml-helmet-wrap{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:38%;height:92%;min-height:180px;max-width:300px;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:.92;z-index:0}.helmet-halo{position:absolute;inset:-10%;background:radial-gradient(circle at 60% 50%,rgba(255,26,26,.4) 0%,transparent 55%);filter:blur(8px);pointer-events:none}.ml-helmet{position:relative;z-index:1;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 8px rgba(255,0,0,.4)) drop-shadow(0 8px 22px rgba(0,0,0,.6))}.ml-actions{display:flex;gap:10px;margin-top:18px;position:relative;z-index:2}.ap-list{list-style:none;margin:0;padding:0;flex:1 1 auto;display:flex;flex-direction:column}.ap-row{display:grid;grid-template-columns:28px 28px 1fr auto auto;gap:10px;align-items:center;padding:10px 4px;border-radius:6px;font-size:16px;transition:background .2s ease,transform .15s ease}.ap-row+.ap-row{border-top:1px solid var(--hairline)}.ap-row:hover{background:#ff1a1a14;transform:translate(2px)}.ap-rank{font-family:var(--f-display);font-weight:400;font-size:20px;color:#FFFFFF;letter-spacing:.04em}.ap-team{font-family:var(--f-body);font-weight:600;font-size:16px;letter-spacing:.04em;color:var(--white-bright)}.ap-rec{font-family:var(--f-mono);font-size:16px;color:var(--gray-light)}.ap-mv{font-family:var(--f-mono);font-size:16px;font-weight:700;min-width:22px;text-align:right}.ap-mv.mv-up{color:#5ad07a}.ap-mv.mv-dn{color:var(--red-bright)}.news-list{list-style:none;margin:0;padding:0;flex:1 1 auto;display:flex;flex-direction:column}.news-row{display:grid;grid-template-columns:56px 1fr 50px;gap:12px;align-items:center;padding:11px 4px;border-radius:6px;transition:background .2s ease,transform .15s ease}.news-row+.news-row{border-top:1px solid var(--hairline)}.news-row:hover{background:#ff1a1a14;transform:translate(2px)}.news-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--bg-surface-3);border:1px solid var(--hairline-2)}.news-body{display:flex;flex-direction:column;gap:4px;min-width:0}.news-cat{font-family:var(--f-mono);font-size:16px;font-weight:700;padding:2px 5px;border-radius:3px;letter-spacing:.1em;align-self:flex-start}.news-cat.pill-cb{background:#ff6a0026;color:var(--orange-accent);border:1px solid rgba(255,106,0,.45)}.news-cat.pill-general{background:var(--bg-surface-3);color:var(--gray-light);border:1px solid var(--hairline-2)}.news-cat.pill-hq{background:#ff1a1a2e;color:var(--red-bright);border:1px solid rgba(255,26,26,.45)}.news-title{font-size:16px;color:var(--white-bright);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.news-time{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);text-align:right;align-self:center}.sn--c_scoreboard .sb-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:150px;position:relative}.sb-viewport{overflow:hidden;position:relative;min-height:110px}.sb-track{display:flex;transition:transform .35s cubic-bezier(.32,.72,0,1);will-change:transform}.sb-match{flex:0 0 100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:6px 0;min-width:0}.sb-team{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:10px 12px;border-radius:8px;min-width:0}.sb-team:hover{background:#ff1a1a14}.sb-helmet{grid-row:1 / 4;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,var(--bg-surface-3),var(--black-card));border:1px solid var(--hairline-2)}.sb-team-name{font-family:var(--f-display);font-size:20px;letter-spacing:.04em;color:var(--white-bright);grid-column:2;white-space:nowrap;overflow:visible;min-width:0}.sb-team-rec{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);grid-column:2;white-space:nowrap}.sb-team-score{font-family:var(--f-display);font-size:40px;font-weight:400;color:#FFFFFF;grid-row:1 / 4;grid-column:3;letter-spacing:.02em}.sb-vs{font-family:var(--f-mono);font-size:16px;color:var(--text-faint);letter-spacing:.2em}.sb-pagination{display:flex;align-items:center;gap:6px;padding:4px 0 0}.sb-pagination .dot{width:8px;height:8px;border-radius:50%;background:var(--hairline-2);cursor:pointer;transition:background .2s ease,width .2s ease,transform .15s ease;border:0;padding:0}.sb-pagination .dot:hover{background:#ff1a1a80;transform:scale(1.2)}.sb-pagination .dot.active{background:var(--red-primary);width:22px;border-radius:4px}.sb-status{margin-left:auto;font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.12em}.og-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;flex:1 1 auto;align-content:stretch;min-width:0}.tile-bento,.og-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--black-soft);border:1px solid var(--hairline-2);border-radius:8px;padding:16px;min-height:200px;transition:border-color .2s ease,background .2s ease,transform .15s ease,box-shadow .2s ease}.tile-bento:hover,.og-tile:hover{border-color:var(--red-primary);background:linear-gradient(135deg,var(--black-soft),rgba(255,26,26,.08));transform:translateY(-2px);box-shadow:0 0 14px #ff000059}.tile-bento:active,.og-tile:active{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.tile-bento{transition:none}.tile-bento:hover,.tile-bento:active{transform:none}}.og-meta{display:flex;flex-direction:column;gap:2px;text-align:center}.og-name{font-family:var(--f-display);font-size:16px;letter-spacing:.06em;color:var(--white-bright)}.og-sub{font-size:16px;color:var(--gray-light)}.og-new{margin-left:auto;background:var(--red-primary);color:#fff;font-family:var(--f-display);font-size:16px;padding:2px 7px;border-radius:3px;letter-spacing:.14em}.other-game-art{width:auto;max-width:100%;max-height:140px;height:auto;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,0,0,.35));transition:transform .2s ease,filter .2s ease}.other-game-art:hover{transform:scale(1.06);filter:drop-shadow(0 0 14px rgba(255,0,0,.55))}.perf-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;flex:1 1 auto;align-content:stretch;min-width:0}.perf-card{display:grid;grid-template-rows:auto auto auto auto auto;justify-items:center;gap:4px;padding:12px 6px;min-width:0;overflow:hidden;background:var(--black-soft);border:1px solid var(--hairline-2);border-radius:8px;text-align:center;cursor:pointer;transition:border-color .2s ease,transform .15s ease,box-shadow .2s ease}.perf-card:hover{border-color:var(--red-primary);transform:translateY(-2px);box-shadow:0 0 14px #ff000059}.perf-card:active{transform:translateY(0)}.perf-pos{font-family:var(--f-display);font-size:16px;padding:2px 6px;border-radius:3px;background:var(--bg-surface-3);color:var(--orange-accent);letter-spacing:.12em}.pos-qb{background:#ff1a1a2e;color:var(--red-bright)}.pos-rb{background:#ff6a002e;color:var(--orange-accent)}.pos-wr{background:#5aaadc26;color:#6aa9d7}.pos-te{background:#78c89624;color:#7fc89a}.pos-k{background:#b48cdc24;color:#b58cd6}.perf-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card));border:2px solid var(--hairline-2);margin-top:2px;object-fit:cover;object-position:center top}.perf-name{font-size:16px;font-weight:600;color:var(--white-bright);letter-spacing:.02em}.perf-school{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.08em}.perf-ppg{font-family:var(--f-display);font-size:22px;font-weight:400;color:#FFFFFF;margin-top:2px;letter-spacing:.02em}.perf-ppg .perf-unit{font-size:16px;color:var(--gray-light);font-family:var(--f-mono);letter-spacing:.12em}.perf-total{font-family:var(--f-mono);font-size:16px;color:var(--gray-light)}.hw-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1 1 auto;align-content:stretch}.hw-card{display:grid;grid-template-columns:auto 44px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;column-gap:8px;row-gap:2px;padding:12px 10px;background:linear-gradient(135deg,var(--black-soft) 0%,var(--black-card) 100%);border:1px solid var(--hairline-2);border-radius:10px;cursor:pointer;min-width:0;overflow:hidden;transition:border-color .2s ease,transform .15s ease,box-shadow .2s ease}.hw-card:hover{border-color:var(--red-primary);box-shadow:0 0 16px #ff000059;transform:translateY(-2px)}.hw-card:active{transform:translateY(0)}.hw-medal{grid-row:1 / 4;grid-column:1;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:18px;color:#1a1207;box-shadow:inset 0 -3px 6px #0000004d,0 0 0 2px var(--black-card)}.hw-gold{background:linear-gradient(180deg,#f5d57e,var(--gold-medal))}.hw-silver{background:linear-gradient(180deg,#e8eaee,var(--silver-medal))}.hw-bronze{background:linear-gradient(180deg,#d49b6a,var(--bronze-medal));color:#1c0e06}.hw-avatar{grid-row:1 / 4;grid-column:2;width:44px;height:44px;background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card));border:2px solid var(--hairline-2);border-radius:50%;object-fit:cover;object-position:center top}.hw-name{grid-row:1;grid-column:3;font-family:var(--f-body);font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--white-bright);letter-spacing:.02em}.hw-school{grid-row:2;grid-column:3;font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.08em}.hw-score{grid-row:3;grid-column:3;font-family:var(--f-display);font-size:22px;font-weight:400;color:#FFFFFF;letter-spacing:.02em}.hw-score .hw-unit{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.12em;display:block}img.slot-img.ap-logo{width:24px;height:24px;border-radius:50%;border:1px solid var(--hairline-2);background:var(--bg-surface-3);object-fit:contain}img.slot-img.sb-helmet{grid-row:1 / 4;width:36px;height:36px;border-radius:50%;border:1px solid var(--hairline-2);background:var(--bg-surface-3);object-fit:contain}img.slot-img.perf-avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--hairline-2);margin-top:2px;background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card))}img.slot-img.hw-avatar{width:44px;height:44px;border-radius:50%;border:2px solid var(--hairline-2);background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card))}.exp-overlay{position:fixed;inset:0;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:998;opacity:0;pointer-events:none;transition:opacity .25s ease}.exp-overlay.is-open{opacity:1;pointer-events:auto}.exp-stage{position:fixed;z-index:999;pointer-events:none}.exp-card{position:fixed;left:50%;top:50%;background:linear-gradient(180deg,#0d0d0d,#050505);border:1px solid rgba(255,0,0,.7);border-radius:12px;box-shadow:0 0 32px #ff000080,0 16px 56px #000000bf;width:min(720px,92vw);max-height:80vh;overflow:auto;z-index:999;padding:28px;display:flex;flex-direction:column;gap:14px;transform:translate(-50%,-50%);transform-origin:center center;will-change:transform,opacity;opacity:0;pointer-events:none}.exp-overlay.is-open~.exp-card,body.exp-open .exp-card{opacity:1;pointer-events:auto}.exp-close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#ff000026;border:1px solid rgba(255,0,0,.5);border-radius:8px;color:var(--white-bright);cursor:pointer;font-size:18px;line-height:1;transition:background .2s ease,transform .15s ease}.exp-close:hover{background:#ff000059;transform:scale(1.06)}.exp-close:active{transform:scale(.94)}.exp-top{display:flex;gap:22px;align-items:center}.exp-headshot{width:180px;height:180px;border-radius:50%;object-fit:cover;object-position:center top;border:3px solid var(--red-primary);box-shadow:0 0 20px #ff000080;background:var(--black-soft);flex:0 0 180px}.exp-headline{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 auto}.exp-name{font-family:var(--f-display);font-size:44px;letter-spacing:.04em;margin:0;color:var(--white-bright);line-height:1.05}.exp-meta{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);margin:0;letter-spacing:.08em;display:flex;align-items:center;flex-wrap:wrap;gap:10px}.exp-pos{display:inline-block;padding:3px 10px;border-radius:4px;background:#ff1a1a33;color:var(--red-bright);font-family:var(--f-display);letter-spacing:.12em;font-size:16px}.exp-school-logo{width:36px;height:36px;object-fit:contain;border-radius:50%;background:#ffffff0a;border:1px solid var(--hairline-2);padding:2px}.exp-school{font-family:var(--f-display);font-size:18px;color:var(--white-bright);letter-spacing:.06em}.exp-jersey{font-family:var(--f-mono);font-size:16px;color:var(--gray-light)}.exp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 0}.exp-stat{background:#ff1a1a0f;border:1px solid rgba(255,26,26,.3);border-radius:10px;padding:16px 12px;text-align:center}.exp-stat-label{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.14em;text-transform:uppercase}.exp-stat-val{font-family:var(--f-display);font-size:36px;font-weight:400;color:#FFFFFF;margin-top:6px;letter-spacing:.04em;line-height:1}.exp-actions{display:flex;gap:10px;margin-top:8px}.exp-watchlist{flex:1;padding:14px;background:linear-gradient(180deg,#ff2a2a,#c40000);border:1px solid #FF4D4D;border-radius:8px;color:#fff;font-family:var(--f-body);font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:transform .15s ease,filter .2s ease,box-shadow .2s ease}.exp-watchlist:hover{filter:brightness(1.1);transform:scale(1.02);box-shadow:0 6px 22px #f009}.exp-watchlist:active{transform:scale(.98)}@media(max-width:880px){.exp-card{width:100vw;height:100vh;max-height:100vh;border-radius:0;padding:56px 16px 24px}.exp-top{flex-direction:column;align-items:center;text-align:center}.exp-headshot{width:140px;height:140px;flex:0 0 140px}.exp-name{font-size:32px;text-align:center}.exp-stat-val{font-size:28px}}.player-modal-overlay{position:fixed;inset:0;background:#000000bf;z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease}.player-modal-overlay.is-open{opacity:1;pointer-events:auto}.player-modal{background:linear-gradient(180deg,#0d0d0d,#050505);border:1px solid rgba(255,0,0,.7);border-radius:12px;box-shadow:0 0 24px #ff000073,0 12px 48px #000000b3;width:440px;max-width:92vw;max-height:90vh;padding:24px;position:relative;transform:scale(.94);transition:transform .2s cubic-bezier(.2,.8,.4,1);overflow-y:auto}.player-modal-overlay.is-open .player-modal{transform:scale(1)}.pm-close{position:absolute;top:12px;right:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#ff00001f;border:1px solid rgba(255,0,0,.4);border-radius:6px;color:var(--white-bright);cursor:pointer;font-size:18px;line-height:1}.pm-close:hover{background:#ff000059}@media(prefers-reduced-motion:no-preference){@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes ticker-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.reveal{opacity:0;transform:translateY(20px);transition:opacity .4s cubic-bezier(.2,.8,.4,1),transform .4s cubic-bezier(.2,.8,.4,1)}.reveal.is-in{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.reveal{opacity:0;transition:opacity .3s ease;transform:none}.reveal.is-in{opacity:1}}.mob-nav-toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.mob-nav-burger{display:none;position:fixed;top:12px;left:12px;z-index:60;width:44px;height:44px;align-items:center;justify-content:center;background:var(--black-soft);border:1px solid var(--red-primary);border-radius:8px;color:var(--white-bright);box-shadow:0 0 12px #ff00004d;cursor:pointer}.mob-nav-scrim{display:none;position:fixed;inset:0;background:#000000b3;z-index:55}@media(max-width:1100px){.row-news-rankings,.row-fantasy-heisman,.row-scoreboard-other{grid-template-columns:1fr 1fr}}@media(max-width:880px){:root{--row-gap: 16px;--col-gap: 12px;--card-pad: 12px}.app{grid-template-columns:1fr;max-width:100%}.content{padding:56px 12px 24px}.sidebar{position:fixed;top:0;left:0;height:100vh;width:240px;z-index:70;transform:translate(-100%);transition:transform .25s ease}#mob-nav-toggle:checked~.app .sidebar{transform:translate(0)}#mob-nav-toggle:checked~.mob-nav-scrim{display:block}.mob-nav-burger{display:inline-flex}.mob-nav-burger svg{transition:transform .2s ease}#mob-nav-toggle:checked~.mob-nav-burger svg{transform:rotate(90deg)}.hero{height:200px;margin-top:12px}.hero-wordmark{width:180px}.scoreticker{height:36px}.ticker-track .tg{font-size:16px;padding:4px 8px}.t-live{font-size:16px}img.ticker-logo{width:20px;height:20px;flex:0 0 20px}.row,.row-news-rankings,.row-fantasy-heisman,.row-scoreboard-other{grid-template-columns:1fr}.row{grid-auto-rows:auto}.sn--c_myleague{grid-template-columns:1fr;padding:16px}.ml-text .card-title{font-size:clamp(24px,7vw,32px)}.ml-helmet-wrap{width:55%;right:-30px}.ml-actions{flex-direction:column}.btn{width:100%;min-height:44px}.card-title{font-size:22px}.stat-row,.perf-row{grid-template-columns:repeat(2,1fr)}.hw-row{grid-template-columns:1fr}.og-row{grid-template-columns:repeat(2,1fr)}.og-tile{min-height:160px;padding:14px}.other-game-art{max-height:110px}.news-row{grid-template-columns:48px 1fr 50px;gap:10px}.news-thumb{width:48px;height:48px}}@media(max-width:600px){.perf-row{grid-template-columns:repeat(2,1fr)}.og-row{grid-template-columns:1fr}.og-tile{min-height:140px}.other-game-art{max-height:100px}.hero{height:180px}.card-title{font-size:20px}}@media(hover:none)and (pointer:coarse){.nav-item,.btn,.card-link,.news-row,.ap-row,.perf-card,.hw-card,.og-tile{min-height:44px}}@media print{body{background:#fff;color:#000}.card{border-color:#000}}.card-eyebrow,.tg-eyebrow{color:#FFFFFF}img.slot-img.perf-avatar,.perf-avatar{width:96px;height:96px;border-radius:50%;border:2px solid rgba(240,189,48,.35);background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card));object-fit:cover;object-position:center top;-webkit-mask-image:radial-gradient(ellipse at center,black 55%,transparent 95%);mask-image:radial-gradient(ellipse at center,black 55%,transparent 95%);filter:drop-shadow(0 4px 12px rgba(255,26,26,.25));margin:4px auto 2px}.hw-card{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;justify-items:center;text-align:center;row-gap:4px;padding:16px 12px;position:relative}.hw-medal{grid-row:1;grid-column:1;position:absolute;top:10px;left:10px}img.slot-img.hw-avatar,.hw-avatar{grid-row:2;grid-column:1;width:96px;height:96px;border-radius:50%;border:2px solid rgba(240,189,48,.35);background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card));object-fit:cover;object-position:center top;-webkit-mask-image:radial-gradient(ellipse at center,black 55%,transparent 95%);mask-image:radial-gradient(ellipse at center,black 55%,transparent 95%);filter:drop-shadow(0 4px 12px rgba(255,26,26,.25));margin:4px 0 2px}.hw-name{grid-row:3;grid-column:1}.hw-school{grid-row:4;grid-column:1}.hw-score{grid-row:5;grid-column:1}.card-title,h2.card-title{font-family:var(--f-display)!important;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;font-size:28px;line-height:1;color:#FFFFFF}.ml-text .card-title,.sn--c_myleague .card-title{font-family:var(--f-display)!important;font-size:44px;letter-spacing:1.5px;line-height:1;color:var(--white-bright)}@media(max-width:880px){img.slot-img.perf-avatar,.perf-avatar,img.slot-img.hw-avatar,.hw-avatar{width:72px;height:72px}.card-title,h2.card-title{font-size:22px}.ml-text .card-title,.sn--c_myleague .card-title{font-size:32px}}@media(max-width:600px){.card-title,h2.card-title{font-size:20px}}.app{grid-template-columns:250px minmax(0,1fr)}.sidebar{padding:28px 20px 0;overflow-x:visible}.nav-list{overflow-x:visible}.nav-item{font-size:18px;white-space:nowrap;overflow:visible;text-overflow:clip}.nav-lbl{white-space:nowrap;overflow:visible;text-overflow:clip;display:inline-block}.nav-item .nav-new{flex:0 0 auto}.nu-hi{white-space:nowrap;overflow:visible}.nav-brand{filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 8px rgba(255,26,26,.55))}.nav-brand-text,.sns-brand-text{font-family:var(--f-display);color:#fff;letter-spacing:.05em;text-shadow:0 0 8px rgba(255,26,26,.5),0 2px 4px rgba(0,0,0,.8);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.hero-stadium{filter:saturate(1.25) contrast(1.15) brightness(1.05)}.hero:after{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:70%;height:60%;background:radial-gradient(ellipse at center,rgba(0,0,0,.5) 0%,transparent 60%);pointer-events:none;z-index:1}.hero-wordmark-text{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-family:var(--f-display);color:#fff;font-size:72px;font-weight:400;letter-spacing:.06em;line-height:1;text-align:center;text-shadow:0 0 20px rgba(255,26,26,.7),0 4px 12px rgba(0,0,0,.9);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;z-index:3;white-space:nowrap}.ml-helmet-wrap{opacity:1}.ml-helmet{animation:var(--sns-anim-float-helmet,float-helmet 4.5s ease-in-out infinite alternate);filter:drop-shadow(0 0 30px rgba(255,26,26,.55)) drop-shadow(0 0 60px rgba(255,26,26,.3)) drop-shadow(0 8px 22px rgba(0,0,0,.6));will-change:transform,filter}@keyframes float-helmet{0%{transform:translateY(0)}to{transform:translateY(-14px)}}@media(prefers-reduced-motion:reduce){.ml-helmet{animation:var(--sns-anim-float-helmet,float-helmet 4.5s ease-in-out infinite alternate)!important}}.ml-helmet-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;margin:0;cursor:pointer;pointer-events:auto;border-radius:14px;color:var(--text-primary)}.ml-helmet-btn .ml-helmet{pointer-events:none}.ml-helmet-caret{position:absolute;bottom:2%;left:50%;transform:translate(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#FFFFFF;background:#0000008c;border:1px solid var(--hairline-2);border-radius:999px;z-index:2;transition:transform .18s ease}.ml-helmet-btn[aria-expanded=true] .ml-helmet-caret{transform:translate(-50%) rotate(180deg)}.ml-helmet-initials{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);font-family:var(--f-display);font-size:clamp(20px,4.2vw,38px);font-weight:700;letter-spacing:.02em;color:#FFFFFF;text-shadow:0 2px 6px rgba(0,0,0,.85);z-index:2;pointer-events:none;max-width:70%;text-align:center;line-height:1}.ml-helmet-name{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-body);font-size:clamp(11px,1.4vw,14px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary);background:#0009;border:1px solid var(--hairline-2);border-radius:999px;padding:4px 12px;z-index:2}.ml-helmet-btn:hover .ml-helmet-caret,.ml-helmet-btn:focus-visible .ml-helmet-caret{background:#000c;border-color:var(--gold-bright)}.ml-helmet-btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:4px}.ml-helmet-btn:focus:not(:focus-visible){outline:none}.ml-league-menu{position:absolute;top:calc(100% - 8px);right:0;min-width:220px;max-width:280px;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:var(--bg-surface-3);border:1px solid var(--border-accent);border-radius:10px;box-shadow:0 12px 40px #000000b3;z-index:30;transform-origin:top right}.ml-league-menu[hidden]{display:none}@media(prefers-reduced-motion:no-preference){.ml-league-menu:not([hidden]){animation:ml-menu-in .14s ease-out}@keyframes ml-menu-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}}.ml-league-option{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--text-primary);font-family:var(--f-body);font-size:16px;font-weight:600;letter-spacing:.02em;user-select:none}.ml-league-option .ml-opt-badge{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#00000080;border:1px solid var(--hairline-2);font-family:var(--f-display);font-size:16px;font-weight:700;color:#FFFFFF}.ml-league-option .ml-opt-name{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-league-option .ml-opt-check{flex:0 0 auto;color:var(--white-bright, #F5F5F5);visibility:hidden}.ml-league-option[aria-selected=true] .ml-opt-check{visibility:visible}.ml-league-option[aria-selected=true]{background:#f0bd301a}.ml-league-option:hover,.ml-league-option.is-active{background:#ffffff14;outline:none}.ml-league-option.is-active{box-shadow:inset 0 0 0 2px var(--gold-bright)}.ml-helmet-static[hidden],.ml-helmet-wrap[hidden]{display:none}.ml-helmet-static .ml-helmet-initials{color:#FFFFFF}.sb-team-name{font-family:var(--f-body);font-size:19px;font-weight:600;letter-spacing:.02em;line-height:1.45}.sb-team-score{font-family:var(--f-display);font-size:26px;font-weight:400;color:#FFFFFF;letter-spacing:.02em;line-height:1.1}.sb-team-rec{font-size:16px;line-height:1.45}.sb-status{font-size:16px}.sb-team{padding:14px;row-gap:4px}.sn--c_scoreboard .sb-body{min-height:180px;gap:14px}.ap-row{padding:14px 6px;font-size:16px;line-height:1.45}.ap-rank{font-family:var(--f-display);font-size:28px;color:#FFFFFF;line-height:1}.ap-team{font-family:var(--f-body);font-weight:600;font-size:17px;letter-spacing:.02em;line-height:1.45}.ap-rec{font-family:var(--f-mono);font-size:16px;line-height:1.45}.ap-mv{font-size:16px}.news-row{padding:14px 6px;line-height:1.45}.news-title{font-family:var(--f-body);font-weight:600;font-size:17px;line-height:1.4;-webkit-line-clamp:2}.news-time{font-size:16px;line-height:1.45}.news-cat{font-size:16px}@media(max-width:880px){.hero-wordmark-text{font-size:40px}.sb-team-name{font-size:17px}.ap-team,.news-title{font-size:16px}}@media(max-width:600px){.hero-wordmark-text{font-size:32px}}@media(max-width:480px){.hero-wordmark-text{font-size:24px;letter-spacing:.04em}}@media(max-width:360px){.hero-wordmark-text{font-size:20px;letter-spacing:.03em}}.hero-logo{display:block;max-width:min(360px,32%);max-height:90%;width:auto;height:auto;object-fit:contain;position:static;transform:none}@media(max-width:1100px){.hero-logo{max-width:min(240px,30%)}}@media(max-width:880px){.hero-logo{max-width:38vw;max-height:85%}}@media(max-width:600px){.hero-logo{max-width:44vw}}@media(max-width:480px){.hero-logo{max-width:50vw}}@media(max-width:360px){.hero-logo{max-width:58vw}}.hero-wordmark-text{display:none!important}.exp-card{width:min(760px,92vw);max-height:86vh}.exp-stats-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 0}.exp-stats-4 .exp-stat{background:#ff1a1a0f;border:1px solid rgba(255,26,26,.3);border-radius:10px;padding:14px 10px;text-align:center}.exp-stats-4 .exp-stat-label{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.14em;text-transform:uppercase}.exp-stats-4 .exp-stat-val{font-family:var(--f-display);font-size:34px;font-weight:400;color:var(--white-bright);margin-top:6px;letter-spacing:.03em;line-height:1}.exp-stats-4 .exp-stat-val.is-gold{color:#FFFFFF}.exp-stats-4 .exp-stat-val.is-small{font-size:24px}.exp-form{font-family:var(--f-mono);color:var(--gray-light);font-size:16px;letter-spacing:.04em;padding:6px 4px 2px}.exp-form .lbl{color:var(--text-faint);margin-right:8px;letter-spacing:.12em;text-transform:uppercase;font-size:16px}.exp-form .vals{color:var(--white-bright)}.exp-actions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:4px}.exp-btn{min-height:44px;padding:10px 12px;background:#ff1a1a14;border:1px solid rgba(255,26,26,.55);border-radius:8px;color:var(--white-bright);font-family:var(--f-body);font-size:16px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:background .15s ease,transform .12s ease,border-color .15s ease,color .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px}.exp-btn:hover{background:#ff1a1a59;transform:translateY(-1px)}.exp-btn:active{transform:translateY(0)}.exp-btn[disabled]{opacity:.5;cursor:not-allowed}.exp-btn.is-active{background:linear-gradient(180deg,#ff2a2a,#c40000);border-color:#ff4d4d;color:#fff}.exp-btn-fav.is-active{background:#d4a72a2e;border-color:#FFFFFF;color:#FFFFFF}.sns-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%) translateY(10px);background:linear-gradient(180deg,#181818,#0a0a0a);border:1px solid var(--red-primary);color:var(--white-bright);font-family:var(--f-body);font-size:16px;font-weight:500;padding:12px 18px;border-radius:8px;box-shadow:0 6px 24px #ff000059,0 4px 14px #0009;z-index:1100;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;letter-spacing:.02em}.sns-toast.is-on{opacity:1;transform:translate(-50%) translateY(0)}.exp-top-team .exp-headshot{width:96px;height:96px;flex:0 0 96px;background:var(--black-soft);border-radius:14px;object-fit:contain;padding:6px}.exp-top-team .exp-name{font-size:30px}.exp-top-team .exp-meta{font-size:16px}.exp-conf{color:var(--gray-light);font-family:var(--f-mono);font-size:16px;letter-spacing:.06em}.exp-team-logo-fallback{width:96px;height:96px;flex:0 0 96px;background:linear-gradient(135deg,#2a0a0a,#0a0a0a);border:2px solid var(--red-primary);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:32px;color:#FFFFFF;letter-spacing:.04em}.exp-actions-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}.exp-game{display:flex;flex-direction:column;gap:18px}.exp-game-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}.exp-game-team{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.exp-game-helmet{width:64px;height:64px;object-fit:contain;background:#ffffff08;border-radius:10px;padding:4px}.exp-game-helmet-fallback{width:64px;height:64px;flex:0 0 64px;background:linear-gradient(135deg,#2a0a0a,#0a0a0a);border:2px solid var(--red-primary);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:22px;color:#FFFFFF;letter-spacing:.04em}.exp-game-tname{font-family:var(--f-display);font-size:16px;letter-spacing:.08em;color:var(--white-bright);line-height:1.1;word-break:break-word}.exp-game-score{font-family:var(--f-display);font-size:2.4rem;font-weight:400;color:var(--white-bright);letter-spacing:.02em;line-height:1}.exp-game-score.is-winning{color:#FFFFFF}.exp-game-divider{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 8px}.exp-game-status{font-family:var(--f-mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-light);opacity:.85}.exp-game-vs{font-family:var(--f-display);font-size:22px;color:var(--text-faint);letter-spacing:.08em}.exp-game-venue{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);opacity:.6;text-align:center;letter-spacing:.06em;text-transform:uppercase}.exp-game-cta{display:block;width:100%;padding:13px 20px;background:#f0bd3014;border:1px solid var(--gold-accent);border-radius:8px;color:#FFFFFF;font-family:var(--f-display);font-size:18px;letter-spacing:.12em;text-align:center;text-decoration:none;cursor:pointer;transition:background .15s ease,transform .12s ease,box-shadow .15s ease;box-sizing:border-box}.exp-game-cta:hover{background:#f0bd302e;transform:translateY(-1px);box-shadow:0 4px 18px #f0bd3040}.exp-game-cta:active{transform:translateY(0)}@media(max-width:880px){.exp-card{width:100vw;height:100vh;max-height:100vh;border-radius:0;padding:56px 14px 24px}.exp-stats-4,.exp-actions-grid{grid-template-columns:repeat(2,1fr)}.exp-stats-4 .exp-stat-val{font-size:28px}}@media(max-width:880px){.app{grid-template-columns:1fr}.content{padding:56px 12px 24px}.card,section.row,article.card{width:100%;max-width:100%;box-sizing:border-box}.row,.row-news-rankings,.row-fantasy-heisman,.row-scoreboard-other,.row-league{grid-template-columns:1fr;width:100%;max-width:100%}.ml-helmet-wrap{width:45%;right:-20px;opacity:.6}}@media(max-width:600px){.content{padding:56px 12px 18px}.ml-helmet-wrap{display:none}.perf-row{grid-template-columns:repeat(2,1fr)}.hw-row,.og-row{grid-template-columns:1fr}.stat-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.content{padding:56px 10px 16px}.perf-row{grid-template-columns:1fr}.hw-card,.perf-card{width:100%}}@media(max-width:360px){.content{padding:56px 8px 16px}.card-title{font-size:18px}}.hero-logo{filter:drop-shadow(0 0 24px rgba(255,26,26,.4))}.nav-brand img,.sns-brand-img{filter:drop-shadow(0 0 12px rgba(255,26,26,.4))}.nav-item .ic-tv{--ic: 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'><rect x='2' y='6' width='20' height='13' rx='2'/><path d='M8 21h8'/><path d='M12 17v4'/><path d='M7 3l5 3 5-3'/></svg>")}.nav-item .ic-user-square{--ic: 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'><rect x='3' y='3' width='18' height='18' rx='3'/><circle cx='12' cy='10' r='3'/><path d='M7 19c.5-2.5 2.5-4 5-4s4.5 1.5 5 4'/></svg>")}.nav-item .ic-list-ordered{--ic: 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'><line x1='10' y1='6' x2='21' y2='6'/><line x1='10' y1='12' x2='21' y2='12'/><line x1='10' y1='18' x2='21' y2='18'/><path d='M4 6h1v4'/><path d='M4 10h2'/><path d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/></svg>")}.nav-item .ic-newspaper{--ic: 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'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0V11h4'/><path d='M18 14h-8M15 18h-5M10 6h8v4h-8z'/></svg>")}.nav-item .ic-gamepad{--ic: 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'><line x1='6' y1='11' x2='10' y2='11'/><line x1='8' y1='9' x2='8' y2='13'/><line x1='15' y1='12' x2='15.01' y2='12'/><line x1='18' y1='10' x2='18.01' y2='10'/><path d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258A4 4 0 0 0 17.32 5z'/></svg>")}.nav-item .ic-more{--ic: 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='12' cy='12' r='1.5' fill='black'/><circle cx='5' cy='12' r='1.5' fill='black'/><circle cx='19' cy='12' r='1.5' fill='black'/></svg>")}.nav-chev{margin-left:auto;width:14px;height:14px;display:inline-block;background:currentColor;-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.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></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.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;transition:transform .2s ease;flex:0 0 14px}.nav-more[aria-expanded=true] .nav-chev{transform:rotate(180deg)}.nav-divider{border:0;height:1px;background:var(--gray-border, #2A2A2A);margin:6px 4px 2px;opacity:.85}.nav-more{appearance:none;-webkit-appearance:none;width:100%;border:0;cursor:pointer;text-align:left;font:inherit}.nav-more-list{display:flex;flex-direction:column;gap:14px;padding:6px 0 2px;margin-left:8px;border-left:2px solid var(--red-primary)}.nav-more-list[hidden]{display:none}.nav-item.nav-sub{padding-left:18px;font-size:16px;white-space:nowrap;overflow:visible}.nav-item:hover .nav-ic,.nav-item:hover .nav-chev{color:#FFFFFF}.nav-item.is-active .nav-ic,.nav-item.is-active .nav-chev{color:var(--white-bright)}.nav-list,.nav-more-list{overflow-x:visible}.nav-lbl{white-space:nowrap}.nav-more:hover{background:#ff1a1a1a;color:var(--white-bright)}.nav-more:focus-visible{outline:2px solid var(--gold-accent);outline-offset:2px}@media(max-width:880px){.nav-more-list{gap:18px}.nav-item.nav-sub{font-size:16px;padding-left:20px}}.nav-list{overflow-x:hidden}.nav-item.nav-sub{font-size:16px;padding-left:14px;padding-right:6px}.nav-item.nav-sub .nav-lbl{font-size:16px;letter-spacing:.6px}.nav-more-list{margin-left:6px}.nav-item.nav-sub .nav-new{font-size:16px;padding:1px 4px}.sidebar{border:1px solid var(--red-primary);box-shadow:0 0 20px #ff000047,inset 0 0 6px #ff00000f;overflow:hidden}body{display:flex;flex-direction:column;align-items:stretch}.app{width:100%}.app{transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1)}.app.sidebar-collapsed{grid-template-columns:0px minmax(0,1fr)!important}.sidebar{min-width:0;transition:min-width .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,padding .25s ease,border .25s ease}.app.sidebar-collapsed .sidebar{min-width:0!important;opacity:0;padding:0!important;border-width:0!important;pointer-events:none}.nav-collapse-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:30px;background:transparent;border:1px solid var(--hairline, #2a2a2a);border-radius:6px;color:var(--gray-mid, #666);cursor:pointer;font-family:var(--f-body, "Inter", sans-serif);font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:6px 0 8px;flex-shrink:0;transition:color .2s ease,border-color .2s ease,background .2s ease}.nav-collapse-btn:hover{color:var(--white-bright, #fff);border-color:var(--red-primary, #FF1A1A);background:#ff1a1a14}.nc-chev{width:12px;height:12px;flex-shrink:0;display:inline-block;background:currentColor;-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.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></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.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") center/contain no-repeat;transition:transform .28s cubic-bezier(.4,0,.2,1)}.nav-collapse-btn.is-collapsed .nc-chev{transform:rotate(180deg)}.nc-lbl{font-size:16px;letter-spacing:.14em}.sidebar-restore-btn{display:none;position:fixed;top:50%;left:0;transform:translateY(-50%);z-index:90;width:18px;height:52px;background:var(--red-primary, #FF1A1A);border:1px solid var(--red-bright, #FF3B30);border-left:none;border-radius:0 6px 6px 0;cursor:pointer;align-items:center;justify-content:center;transition:background .2s ease,width .15s ease;padding:0}.sidebar-restore-btn:hover{background:var(--red-bright, #FF3B30);width:22px}.sr-chev{width:10px;height:10px;display:inline-block;background:#fff;-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='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></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='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat}@media(max-width:880px){.nav-collapse-btn,.sidebar-restore-btn{display:none!important}}.nav-item .ic-target{--ic: 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='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/><line x1='2' y1='12' x2='22' y2='12'/><line x1='12' y1='2' x2='12' y2='22'/></svg>")}.nav-item .ic-shield{--ic: 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'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>")}.nav-item .ic-bar{--ic: 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'><line x1='12' y1='20' x2='12' y2='10'/><line x1='18' y1='20' x2='18' y2='4'/><line x1='6' y1='20' x2='6' y2='16'/></svg>")}.nav-item .ic-bolt{--ic: 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'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>")}.card-title{overflow-wrap:break-word;white-space:normal;max-width:100%}.card-hero .card-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sb-team-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:8ch}.sb-team-role{font-size:.6rem;font-weight:700;letter-spacing:.08em;opacity:.55;text-transform:uppercase;display:block;grid-column:2;line-height:1.2}.sb-venue{font-size:.65rem;opacity:.55;text-align:center;margin-top:.25rem;letter-spacing:.06em;grid-column:1 / -1}:root{--text: var(--white-bright);--text-dim: var(--text-faint);--accent: var(--red-primary);--accent-bright: var(--red-bright)}.title,.h1{font-family:var(--f-display);font-size:36px;font-weight:400;line-height:1.05;letter-spacing:.04em;color:var(--text-primary);margin:0}.subtitle{font-family:var(--f-body);font-size:16px;font-weight:500;line-height:1.4;color:var(--text-muted)}.h2{font-family:var(--f-display);font-size:24px;font-weight:400;line-height:1.1;letter-spacing:.04em;color:var(--text-primary)}.h3{font-family:var(--f-body);font-size:18px;font-weight:700;line-height:1.25;color:var(--text-primary)}.body{font-family:var(--f-body);font-size:16px;font-weight:500;line-height:1.5;color:var(--text-primary)}.body-sm{font-family:var(--f-body);font-size:16px;font-weight:500;line-height:1.45;color:var(--text-primary)}.muted{color:var(--text-muted)}.dim{color:var(--text-faint)}.stat-big{font-family:var(--f-display);font-size:32px;font-weight:400;line-height:1;letter-spacing:.02em}.stat-med{font-family:var(--f-display);font-size:20px;font-weight:400;line-height:1;letter-spacing:.02em}.badge{font-family:var(--f-body);font-size:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:inline-flex;align-items:center}.sn--c_news .news-row{padding:6px 4px;grid-template-columns:44px 1fr 44px;gap:10px}.sn--c_news .news-thumb{width:44px;height:44px}.sn--c_news .news-title{font-size:16px;-webkit-line-clamp:2;line-height:1.3}.sn--c_news .news-time{font-size:16px}.sn--c_scoreboard .sb-match{grid-template-columns:1fr auto 1fr;align-items:center}.sn--c_scoreboard .sb-team{grid-template-columns:40px minmax(0,1fr)}.sn--c_scoreboard .sb-team-score{grid-row:auto;grid-column:auto}.sn--c_scoreboard .sb-team--away .sb-helmet{grid-column:1}.sn--c_scoreboard .sb-team--home{grid-template-columns:minmax(0,1fr) 40px;text-align:right}.sn--c_scoreboard .sb-team--home .sb-helmet{grid-column:2;grid-row:1 / 4}.sn--c_scoreboard .sb-team--home .sb-team-name,.sn--c_scoreboard .sb-team--home .sb-team-role,.sn--c_scoreboard .sb-team--home .sb-team-rec{grid-column:1;text-align:right}.sn--c_scoreboard .sb-center{display:inline-flex;align-items:baseline;gap:8px;justify-self:center}.sn--c_scoreboard .sb-center .sb-team-score{font-family:var(--f-display);font-size:32px;font-weight:400;color:#FFFFFF;letter-spacing:.02em}.sn--c_scoreboard .sb-vs{color:var(--white-bright);font-size:16px;font-weight:600;letter-spacing:.15em;align-self:center}.sn--c_scoreboard .sb-meta{grid-column:1 / -1;display:flex;gap:14px;justify-content:center;align-items:center;font-family:var(--f-mono);font-size:16px;color:var(--gray-light);margin-top:8px;flex-wrap:wrap}.sn--c_scoreboard .sb-venue,.sn--c_scoreboard .sb-broadcast{white-space:nowrap}.sn--c_news .news-thumb{background:var(--white-bright);border:2px solid var(--white-bright);box-shadow:0 0 0 1px #f5f5f559}.sn--c_aptop25 .ap-logo{background:var(--white-bright);border:2px solid var(--white-bright);border-radius:50%;box-shadow:0 0 0 1px #f5f5f559}.sn--c_aptop25 .ap-rec{color:var(--white-bright)}body .hero.sn--c_hero{display:flex!important;justify-content:center!important;align-items:center!important}.sn--c_hero .hero-stadium{object-fit:contain!important;object-position:center center!important}body .hero.sn--c_hero{height:clamp(13rem,40vh,26rem)!important;aspect-ratio:auto!important;width:100%!important}@media(max-width:880px){body .hero.sn--c_hero{height:200px!important;min-height:200px!important}}@media(max-width:600px){body .hero.sn--c_hero{height:170px!important;min-height:170px!important}}.sn--c_hero .hero-logo{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:2!important}.sn--c_aptop25 .ap-logo{padding:3px;object-fit:contain;box-sizing:border-box}.app{max-width:none}.content{padding:0 var(--space-fluid-md, clamp(.75rem, .45rem + 1.5vw, 1.5rem)) var(--space-fluid-lg, clamp(1.5rem, 1.3rem + 1vw, 2rem));gap:var(--row-gap, var(--space-fluid-lg, clamp(1rem, .7rem + 1.5vw, 1.5rem)))}.title,.h1{font-size:var(--fs-fluid-h1, clamp(1.75rem, 1.3rem + 2vw, 2.25rem))}.h2{font-size:var(--fs-fluid-h2, clamp(1.25rem, 1.07rem + .8vw, 1.5rem))}.h3{font-size:var(--fs-fluid-h3, clamp(1.0625rem, 1.01rem + .27vw, 1.25rem))}.body{font-size:var(--fs-fluid-body, clamp(.875rem, .84rem + .18vw, 1rem))}.body-sm{font-size:var(--fs-fluid-small, clamp(.75rem, .73rem + .11vw, .8125rem))}.stat-big{font-size:var(--fs-fluid-h2, clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem))}.card-title,h2.card-title{font-size:var(--fs-fluid-h2, clamp(1.25rem, .95rem + 1.4vw, 1.75rem))!important}.ml-text .card-title,.sn--c_myleague .card-title{font-size:var(--fs-fluid-h1, clamp(2rem, 1.4rem + 2.7vw, 2.75rem))!important}.hero{height:clamp(11.25rem,8rem + 14vw,15rem)}.hero-wordmark{width:clamp(7.5rem,4rem + 16vw,15rem)}.scoreticker{height:clamp(2.25rem,2rem + 1.1vw,2.75rem)}@media(min-width:55.0625rem){.row-news-rankings,.row-fantasy-heisman,.row-scoreboard-other{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}}.card.sn--c_fantasy,.card.sn--c_other{container-type:inline-size;container-name:snscard}@container snscard (max-width: 22rem){.perf-row{grid-template-columns:repeat(2,minmax(0,1fr))}.og-row{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}}@container snscard (max-width: 14rem){.perf-row,.og-row{grid-template-columns:1fr}}.hw-card.is-school-colored{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .15s ease,box-shadow .2s ease}.hw-card.is-school-colored:hover{box-shadow:0 0 16px #00000059}.hw-card.is-school-colored .hw-name{color:var(--card-text, var(--white-bright))}.hw-card.is-school-colored .hw-school{color:var(--card-text-mute, var(--gray-light))}.hw-card.is-school-colored .hw-score{color:var(--card-text, var(--accent-gold))}.hw-card.is-school-colored .hw-score .hw-unit{color:var(--card-text-mute, var(--gray-light))}/* ====================================================================
   AP TOP 25 — inline-scroll tile w/ sticky header  (Issue #696)
   Pattern: Aceternity "Expandable Card" (Tier 1A, MIT) — bounded card
   body becomes a scroll region so all 25 ranks are reachable in-tile,
   while the header stays pinned. RESEARCH/frontend.md L24.
   Fluid 344-2160 via clamp() height (no fixed px). WCAG AA scrollbar.
   ==================================================================== */
.sn--c_aptop25{
  /* #696 inline-scroll tile RETIRED: the dashboard renders a 5-rank preview
     (no JS ever injects all 25), so the bounded overflow region had nothing
     to scroll — it only captured the wheel/touch so the PAGE would not scroll
     over the tile. On phones that was an outright touch dead-zone, and at
     >880px the bounded widget survived even after the old mobile override, so
     a thumb/cursor landing on the card still couldn't move the page. The card
     now sizes to its content like every other dashboard card at every width;
     "FULL POLL →" links to all 25. (Was: overflow-y:auto + max-height:clamp +
     overscroll-behavior:contain + a sticky blurred header + an 880px override.) */
  overflow-x:hidden;
}
/* WebKit/Blink thin on-brand scrollbar (Chrome/Safari/Edge). */
.sn--c_aptop25::-webkit-scrollbar{width:8px}
.sn--c_aptop25::-webkit-scrollbar-track{background:transparent}
.sn--c_aptop25::-webkit-scrollbar-thumb{
  background:var(--red-primary);                /* #FF1A1A on #050505 = AA for non-text UI */
  border-radius:8px;
  border:2px solid var(--black-bg);             /* inset look, keeps thumb ~4px visible */
}
.sn--c_aptop25::-webkit-scrollbar-thumb:hover{background:var(--red-bright)}
/* a11y: each .ap-row anchor is wrapped in <li class="ap-li"> so the <ol> has
   only <li> direct children (axe-core 'list' rule / WCAG 2.1 SC 1.3.1).
   display:contents removes the <li>'s own box, so the .ap-row anchors stay
   adjacent flex siblings — the .ap-list flex column, the .ap-row grid, and the
   .ap-row+.ap-row hairline divider all render exactly as before. */
.ap-li{display:contents}
/* keyboard focus inside the scroller stays visible against the pinned head */
.sn--c_aptop25 .ap-row:focus-visible{
  outline:2px solid var(--gold-accent);
  outline-offset:-2px;
  background:#ff1a1a14;
}
/* reduced-motion: kill row hover translate so scroll feels calm (no jump). */
@media (prefers-reduced-motion: reduce){
  .sn--c_aptop25{scroll-behavior:auto}
  .sn--c_aptop25 .ap-row{transition:none}
  .sn--c_aptop25 .ap-row:hover{transform:none}
}

/* DESIGN_SYSTEM_RESET 2026-05-31 ruling #3 - wide-monitor fill = professional whitespace, NOT more columns.
   Shell (--container-fluid) now fills to 135rem/2160px; content centers + caps at --content-max so auto-fill
   grids do not sprawl into 5-6 columns on wide displays. Per-page column caps refined in Wave 2. */
.app .content{max-width:var(--content-max,100rem);margin-inline:auto;width:100%}


/* FAVORITE TEAMS tile fill (DESIGN_SYSTEM_RESET 2026-05-31 ruling #1) — stack the favorite-team games vertically and size the tile to its content instead of a 1-at-a-time carousel floating in ~100px of black space. Scoped to the dashboard scoreboard tile. */
.sn--c_scoreboard .sb-body{min-height:0!important;justify-content:flex-start!important}
.sn--c_scoreboard .sb-viewport{min-height:0!important;overflow:visible!important}
.sn--c_scoreboard .sb-track{flex-direction:column!important;gap:12px!important;transform:none!important}
.sn--c_scoreboard .sb-match{flex:0 0 auto!important}


/* Kill the top score-ticker/"news bar" on inner content pages (audio directive; DESIGN_SYSTEM_RESET 6.2) so content aligns to the top. Dashboard/home keep it. */
html[data-route="/scores"] .sn--c_scoreticker,html[data-route="/bracket"] .sn--c_scoreticker,html[data-route="/heisman"] .sn--c_scoreticker{display:none!important}

}


/* ============================================================================
   [Workflow A] /scores LIVE-CFB-GAME surface — canonical components
   Appended to components.css (@layer components). ZERO per-page CSS.
   Consumes design tokens; team identity comes in via inline --team on rows.
   Concept: concept-art/scoreboard/ + vision/transcript hard-rules
   (away-top/home-bottom, team-color tiles, loser fade, FINAL red pill,
   favorites→live→final→upcoming, frozen filters, whole-tile→ESPN field).
   ============================================================================ */
@layer components {

  /* ---- Page header + sticky filter bar ---------------------------------- */
  .sb-head { padding: 4px 0 2px; }
  .sb-title {
    font-family: var(--f-display, "Graduate", serif);
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
    line-height: .95; letter-spacing: .02em; margin: 0;
    color: var(--white-bright, #F5F5F5);
    text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 26px rgba(255,26,26,.18);
  }
  .sb-subtitle {
    font: 500 clamp(.8125rem, .78rem + .18vw, .9375rem)/1.3 var(--f-body, "Inter", sans-serif);
    color: var(--gray-light, #8A8A8A); margin: 6px 0 0; letter-spacing: .02em;
  }

  .sb-filterbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    padding: 12px 0; margin: 10px 0 4px;
    background: linear-gradient(180deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.88) 100%);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--gray-border, #2A2A2A);
  }
  .sb-filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
  .sb-filter {
    font: 700 12px/1 var(--f-mono, "JetBrains Mono", monospace);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gray-light, #8A8A8A);
    background: var(--black-soft, #111); border: 1px solid var(--gray-border, #2A2A2A);
    padding: 8px 13px; border-radius: 7px; cursor: pointer;
    transition: color .16s, border-color .16s, background .16s, transform .16s;
  }
  .sb-filter:hover { color: var(--white-bright, #F5F5F5); border-color: var(--gold-accent, #F0BD30); }
  .sb-filter.is-active {
    color: var(--white-bright, #F5F5F5);
    background: linear-gradient(135deg, rgba(255,26,26,.18), rgba(240,189,48,.05));
    border-color: var(--red-primary, #FF1A1A);
    box-shadow: inset 0 0 0 1px rgba(255,26,26,.4), 0 0 12px rgba(255,26,26,.18);
  }
  .sb-filter:active { transform: scale(.96); box-shadow: inset 0 0 0 1px rgba(255,26,26,.6); }
  @media (prefers-reduced-motion: reduce) { .sb-filter:active { transform: none; } }
  .sb-week { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
  .sb-week-btn {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--black-soft, #111); border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 6px; color: var(--white-bright, #F5F5F5); cursor: pointer; font-size: 16px;
    transition: border-color .15s;
  }
  .sb-week-btn:hover { border-color: var(--red-primary, #FF1A1A); }
  .sb-week-label {
    min-width: 88px; text-align: center;
    font-family: var(--f-display, "Graduate", serif); font-size: 18px; letter-spacing: .06em;
    color: var(--white-bright, #F5F5F5);
  }
  .sb-conf-wrap { display: inline-flex; align-items: center; gap: 7px; }
  .sb-conf-label {
    font: 700 12px/1 var(--f-mono, monospace); letter-spacing: .14em; text-transform: uppercase;
    color: var(--gray-light, #8A8A8A);
  }
  .sb-conf {
    font: 600 12px/1 var(--f-body, sans-serif); color: var(--white-bright, #F5F5F5);
    background: var(--black-soft, #111); border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 6px; padding: 7px 9px; cursor: pointer;
  }
  .sb-conf:focus-visible, .sb-filter:focus-visible, .sb-week-btn:focus-visible {
    outline: 2px solid var(--red-primary, #FF1A1A); outline-offset: 2px;
  }

  /* ---- Layout: main column + AP right rail ------------------------------ */
  .sb-layout {
    display: grid; gap: 18px;
    grid-template-columns: minmax(0, 1fr) clamp(15rem, 22vw, 19rem);
    align-items: start;
  }
  .sb-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

  /* ---- Sections --------------------------------------------------------- */
  .sb-section { min-width: 0; }
  .sb-section[hidden] { display: none; }
  .sb-section-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; }
  .sb-section-title {
    font-family: var(--f-display, "Graduate", serif);
    font-size: clamp(1.05rem, .98rem + .4vw, 1.4rem); letter-spacing: .05em; margin: 0;
    color: var(--white-bright, #F5F5F5);
    position: relative; padding-left: 13px;
  }
  .sb-section-title::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 1em; border-radius: 2px; background: var(--red-primary, #FF1A1A);
  }
  .sb-section[data-section="live"] .sb-section-title::before { background: #3dba6e; box-shadow: 0 0 8px rgba(61,186,110,.6); }
  .sb-section[data-section="favorites"] .sb-section-title::before { background: var(--gold-accent, #F0BD30); }

  .sb-games {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  }

  .sb-empty {
    grid-column: 1 / -1; padding: 22px 16px; text-align: center;
    color: var(--gray-light, #8A8A8A); font: 500 13px/1.5 var(--f-body, sans-serif);
    background: var(--black-soft, #111); border: 1px dashed var(--gray-border, #2A2A2A); border-radius: 12px;
  }
  .sb-error { border-style: solid; border-color: rgba(255,26,26,.35); }
  .sb-error-title { font-family: var(--f-display, serif); font-size: 16px; color: var(--white-bright, #F5F5F5); letter-spacing: .03em; }
  .sb-error-msg { margin: 6px 0 12px; }
  .sb-retry {
    font: 700 12px/1 var(--f-mono, monospace); letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: var(--red-primary, #FF1A1A); border: 0; border-radius: 7px;
    padding: 9px 16px; cursor: pointer;
  }
  .sb-retry:hover { background: var(--red-bright, #FF3B30); }

  /* ---- Game tile -------------------------------------------------------- */
  .game-tile {
    position: relative; display: flex; flex-direction: column; gap: 0;
    background: var(--black-card, #0A0A0A); border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 13px; overflow: hidden; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease;
    container-type: inline-size;
  }
  .game-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,0,0,.5); border-color: rgba(255,26,26,.35); }
  .game-tile:active { transform: scale(.98); box-shadow: inset 0 0 0 1px rgba(255,26,26,.3); }
  .game-tile:focus-visible { outline: 2px solid var(--red-primary, #FF1A1A); outline-offset: 2px; }
  .game-tile.is-live { border-color: rgba(61,186,110,.4); box-shadow: 0 0 0 1px rgba(61,186,110,.12), 0 6px 22px rgba(0,0,0,.45); }

  .gt-top {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 13px; border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .gt-pill {
    font: 700 12px/1 var(--f-mono, monospace); letter-spacing: .16em; text-transform: uppercase;
    color: #fff; padding: 4px 8px; border-radius: 4px; flex-shrink: 0;
  }
  .gt-pill.live { background: var(--red-primary, #FF1A1A); box-shadow: 0 0 10px rgba(255,26,26,.5); animation: wfa-livepulse 1.6s ease-in-out infinite; }
  .gt-pill.final { background: var(--red-primary, #FF1A1A); }
  .gt-pill.pre { background: var(--gray-border, #2A2A2A); color: #A8A8A8; }
  .gt-meta {
    font: 600 12px/1.2 var(--f-mono, monospace); letter-spacing: .08em; text-transform: uppercase;
    color: var(--white-bright, #F5F5F5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .gt-status { margin-left: auto; font: 600 12px/1 var(--f-mono, monospace); color: var(--gray-light, #8A8A8A); letter-spacing: .04em; white-space: nowrap; }
  .game-tile.is-live .gt-status { color: #6fe39a; }
  .gt-countdown { flex-basis: 100%; font: 600 12px/1 var(--f-mono, monospace); color: var(--white-bright, #F5F5F5); letter-spacing: .06em; }

  .gt-teams { display: flex; flex-direction: column; }

  /* Team row — tinted with that team's color via --team (away on top, home on bottom) */
  .gt-team {
    --team: #3A3A3A;
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 11px 13px;
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--team) 80%, #000) 0%,
        color-mix(in srgb, var(--team) 34%, #0a0a0a) 62%,
        color-mix(in srgb, var(--team) 16%, #0a0a0a) 100%);
    color: #fff;
  }
  .gt-team.away { border-bottom: 1px solid rgba(0,0,0,.45); }
  .gt-team.is-loser { opacity: .5; filter: saturate(.55); }
  .gt-team.is-winner::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--gold-accent, #F0BD30); box-shadow: 0 0 10px rgba(240,189,48,.7);
  }
  .gt-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  .gt-rank {
    font: 700 12px/1 var(--f-mono, monospace); color: var(--white-bright, #F5F5F5);
    align-self: flex-start; margin-top: 1px; min-width: 0; letter-spacing: 0;
  }
  .gt-rank:empty { display: none; }
  .gt-name {
    font-family: var(--f-display, "Graduate", serif);
    font-size: clamp(.95rem, .9rem + .35vw, 1.15rem); letter-spacing: .02em; line-height: 1;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .gt-rec { font: 600 12px/1 var(--f-mono, monospace); color: rgba(255,255,255,.7); flex-shrink: 0; }
  .gt-poss { display: inline-flex; align-items: center; flex-shrink: 0; }
  .gt-poss .football-svg { width: 19px; height: 13px; filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }
  .gt-score {
    margin-left: auto; flex-shrink: 0;
    font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1 var(--f-numeral, var(--f-mono, monospace));
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); letter-spacing: -.01em; min-width: 1.6ch; text-align: right;
  }
  .game-tile.is-pre .gt-score { display: none; }
  .gt-score.flash { animation: wfa-scoreflash .7s ease; }

  .gt-foot {
    display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
    padding: 8px 13px; border-top: 1px solid rgba(255,255,255,.05);
    font: 500 12px/1.3 var(--f-body, sans-serif); color: var(--gray-light, #8A8A8A);
  }
  .gt-venue { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  .gt-network { color: var(--white-bright, #F5F5F5); font-weight: 600; letter-spacing: .04em; flex-shrink: 0; }
  .gt-network:empty { display: none; }
  .gt-downdistance { flex-basis: 100%; color: #6fe39a; font: 600 12px/1.2 var(--f-mono, monospace); letter-spacing: .03em; }
  .game-tile.is-pre .gt-downdistance { color: var(--gray-light, #8A8A8A); }

  /* ---- AP Top-25 right rail --------------------------------------------- */
  .sb-rail { min-width: 0; position: sticky; top: 64px; }
  .ap-rankings {
    background: var(--black-card, #0A0A0A); border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 13px; padding: 14px 12px 8px; overflow: hidden;
  }
  .ap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .ap-row {
    --team: #3A3A3A;
    display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px;
    padding: 8px 8px; border-top: 1px solid rgba(255,255,255,.05);
    position: relative;
  }
  .ap-row:first-child { border-top: 0; }
  .ap-row::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px;
    background: var(--team); opacity: .85;
  }
  .ap-rank { font: 700 13px/1 var(--f-display, "Graduate", serif); color: var(--white-bright, #F5F5F5); text-align: center; }
  .ap-row:nth-child(1) .ap-rank { color: var(--red-primary, #FF1A1A); }
  .ap-team { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
  .ap-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
  .ap-name {
    font: 600 12.5px/1.1 var(--f-body, sans-serif); color: var(--white-bright, #F5F5F5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .ap-rec { font: 600 12px/1 var(--f-mono, monospace); color: var(--gray-light, #8A8A8A); white-space: nowrap; }
  .ap-pts { display: none; }

  /* ---- Blow-up game modal ----------------------------------------------- */
  .game-modal {
    width: min(720px, calc(100vw - 24px)); max-height: 88vh; padding: 0;
    background: var(--black-card, #0A0A0A); color: var(--white-bright, #F5F5F5);
    border: 1px solid var(--gray-border, #2A2A2A); border-radius: 16px; overflow: hidden;
  }
  .game-modal:not([open]) { display: none; }
  .game-modal[open] { display: flex; flex-direction: column; animation: wfa-modalin .22s ease; }
  .game-modal::backdrop { background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: muBackdropIn .22s ease both; }
  @media (prefers-reduced-motion: reduce) { .game-modal::backdrop { animation: none; } }
  .gm-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 18px; border-bottom: 1px solid var(--gray-border, #2A2A2A);
  }
  .gm-title { font-family: var(--f-display, "Graduate", serif); font-size: clamp(1rem, .9rem + .5vw, 1.3rem); letter-spacing: .04em; }
  .gm-close { background: none; border: 0; color: var(--gray-light, #8A8A8A); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
  .gm-close:hover { color: var(--white-bright, #F5F5F5); background: rgba(255,255,255,.06); }
  .gm-body { overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; }

  .gm-status { display: flex; align-items: center; gap: 10px; }
  .gm-status-detail { font: 600 13px/1 var(--f-mono, monospace); color: var(--gray-light, #8A8A8A); letter-spacing: .04em; }

  .gm-scoreboard { display: flex; flex-direction: column; gap: 6px; }
  .gm-sb-team {
    --team: #3A3A3A; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--team) 78%, #000), color-mix(in srgb, var(--team) 26%, #0a0a0a));
    color: #fff;
  }
  .gm-sb-team.is-loser { opacity: .55; filter: saturate(.6); }
  .gm-sb-id { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
  .gm-sb-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
  .gm-sb-namewrap { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .gm-sb-rank { font: 700 12px/1 var(--f-mono, monospace); color: var(--white-bright, #F5F5F5); }
  .gm-sb-name { font-family: var(--f-display, "Graduate", serif); font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gm-sb-rec { font: 600 12px/1 var(--f-mono, monospace); color: rgba(255,255,255,.7); }
  .gm-big-score { font: 700 clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--f-numeral, var(--f-mono, monospace)); margin-left: auto; flex-shrink: 0; text-shadow: 0 2px 4px rgba(0,0,0,.6); }

  /* ESPN-style animated football field tracker */
  .cfb-field {
    position: relative; width: 100%; aspect-ratio: 16 / 6; min-height: 120px; border-radius: 12px; overflow: hidden;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 10%),
      linear-gradient(180deg, #1f7a3a 0%, #176030 50%, #1f7a3a 100%);
    border: 1px solid rgba(0,0,0,.5); box-shadow: inset 0 0 40px rgba(0,0,0,.45);
  }
  .cff-endzone {
    --team: #3A3A3A; position: absolute; top: 0; bottom: 0; width: 12%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--team) 86%, #000), color-mix(in srgb, var(--team) 60%, #000));
    box-shadow: inset 0 0 24px rgba(0,0,0,.5);
  }
  .cff-endzone.away { left: 0; border-right: 2px solid rgba(255,255,255,.5); }
  .cff-endzone.home { right: 0; border-left: 2px solid rgba(255,255,255,.5); }
  .cff-ez-label {
    font-family: var(--f-display, "Graduate", serif); font-size: clamp(.6rem, 2.2cqi, .95rem);
    color: #fff; letter-spacing: .04em; text-shadow: 0 1px 3px rgba(0,0,0,.7);
    writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase;
  }
  .cff-hashes { position: absolute; inset: 0 12%; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,.28) calc(10% - 1px) 10%); }
  .cff-ball {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 3;
    transition: left .6s cubic-bezier(.4,0,.2,1);
  }
  .cff-ball-svg { width: 30px; height: 20px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); animation: wfa-ballbob 1.8s ease-in-out infinite; }
  .cff-arrow { width: 16px; height: 16px; color: #fff; filter: drop-shadow(0 0 4px rgba(0,0,0,.8)); }
  .cff-arrow svg { width: 100%; height: 100%; display: block; }
  .cff-dd {
    position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 4;
    font: 700 12px/1 var(--f-mono, monospace); letter-spacing: .04em; color: #fff;
    background: rgba(0,0,0,.55); padding: 3px 9px; border-radius: 5px; white-space: nowrap;
  }
  .cff-dd.redzone { background: var(--red-primary, #FF1A1A); box-shadow: 0 0 12px rgba(255,26,26,.6); }
  .cff-dd:empty { display: none; }

  .gm-lastplay { display: flex; flex-direction: column; gap: 3px; background: var(--black-soft, #111); border-radius: 9px; padding: 10px 12px; }
  .gm-lastplay-label { font: 700 12px/1 var(--f-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--white-bright, #F5F5F5); }
  .gm-lastplay-text { font: 500 13px/1.4 var(--f-body, sans-serif); color: var(--white-bright, #F5F5F5); }

  .gm-timeouts { display: flex; gap: 10px; flex-wrap: wrap; }
  .gm-to-row { display: inline-flex; align-items: center; gap: 6px; background: var(--black-soft, #111); border-radius: 8px; padding: 6px 10px; }
  .gm-to-team { font: 700 12px/1 var(--f-mono, monospace); color: var(--white-bright, #F5F5F5); }
  .gm-to-dots { display: inline-flex; gap: 3px; }
  .gm-to-dot { width: 7px; height: 7px; border-radius: 50%; }
  .gm-to-dot.on { background: var(--gold-accent, #F0BD30); }
  .gm-to-dot.off { background: var(--gray-border, #2A2A2A); }
  .gm-to-label { font: 600 12px/1 var(--f-mono, monospace); letter-spacing: .1em; color: var(--gray-light, #8A8A8A); }

  .gm-loading, .gm-perf-empty { color: var(--gray-light, #8A8A8A); font: 500 13px/1.4 var(--f-body, sans-serif); text-align: center; padding: 14px; }

  .gm-linescore { overflow-x: auto; }
  .gm-ls-table { width: 100%; border-collapse: collapse; font: 600 13px/1 var(--f-mono, monospace); }
  .gm-ls-th { padding: 7px 9px; color: var(--gray-light, #8A8A8A); font-size: 16px; letter-spacing: .06em; border-bottom: 1px solid var(--gray-border, #2A2A2A); text-align: center; }
  .gm-ls-team-h { text-align: left; }
  .gm-ls-team { text-align: left; color: var(--white-bright, #F5F5F5); font-weight: 700; padding: 8px 9px; }
  .gm-ls-cell { text-align: center; color: var(--gray-light, #8A8A8A); padding: 8px 9px; }
  .gm-ls-total, .gm-ls-total-h { text-align: center; color: var(--white-bright, #F5F5F5); font-weight: 700; padding: 8px 9px; }
  .gm-ls-row.home .gm-ls-team, .gm-ls-row.home .gm-ls-cell { border-top: 1px solid rgba(255,255,255,.05); }

  .gm-performers { display: flex; flex-direction: column; gap: 8px; }
  .gm-performers-title { font-family: var(--f-display, "Graduate", serif); font-size: 16px; letter-spacing: .04em; margin: 0; color: var(--white-bright, #F5F5F5); }
  .gm-perf-list { display: flex; flex-direction: column; gap: 6px; }
  .gm-perf-row { --team: #3A3A3A; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px; background: var(--black-soft, #111); border-left: 3px solid var(--team); }
  .gm-perf-tag { font: 700 12px/1 var(--f-mono, monospace); color: var(--white-bright, #F5F5F5); }
  .gm-perf-name { font: 600 13px/1.2 var(--f-body, sans-serif); color: var(--white-bright, #F5F5F5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .gm-perf-stat { font: 600 12px/1 var(--f-mono, monospace); color: var(--gray-light, #8A8A8A); white-space: nowrap; }

  .gm-countdown { display: flex; align-items: baseline; gap: 10px; justify-content: center; padding: 6px; }
  .gm-countdown-label { font: 600 12px/1 var(--f-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light, #8A8A8A); }
  .gm-countdown-val { font-family: var(--f-display, "Graduate", serif); font-size: 28px; letter-spacing: .04em; color: var(--white-bright, #F5F5F5); }

  .gm-facts { display: flex; flex-direction: column; gap: 1px; border-radius: 9px; overflow: hidden; }
  .gm-fact { display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; background: var(--black-soft, #111); }
  .gm-fact-label { font: 700 12px/1.2 var(--f-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light, #8A8A8A); }
  .gm-fact-value { font: 500 12.5px/1.3 var(--f-body, sans-serif); color: var(--white-bright, #F5F5F5); text-align: right; }

  /* ---- Skeletons -------------------------------------------------------- */
  .game-tile.sb-skeleton { min-height: 132px; cursor: default; background: linear-gradient(90deg, #0d0d0d, #151515, #0d0d0d); background-size: 200% 100%; animation: wfa-shimmer 1.4s infinite; }
  .game-tile.sb-skeleton:hover { transform: none; box-shadow: none; border-color: var(--gray-border, #2A2A2A); }
  .ap-row.sb-skeleton { height: 30px; background: linear-gradient(90deg, #0d0d0d, #151515, #0d0d0d); background-size: 200% 100%; animation: wfa-shimmer 1.4s infinite; border-radius: 6px; margin: 4px 0; }
  .ap-row.sb-skeleton::before { display: none; }

  /* ---- Responsive ------------------------------------------------------- */
  @media (max-width: 960px) {
    .sb-layout { grid-template-columns: 1fr; }
    .sb-rail { position: static; order: 2; }
    .sb-main { order: 1; }
  }
  @media (max-width: 620px) {
    .sb-games { grid-template-columns: 1fr; }
    .sb-filterbar { gap: 8px; flex-wrap: nowrap; }
    .sb-filters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .sb-filters::-webkit-scrollbar { display: none; }
    .sb-filter { flex-shrink: 0; white-space: nowrap; }
    .sb-week { margin-left: 0; flex-shrink: 0; }
    .sb-conf-wrap { margin-left: auto; flex-shrink: 0; }
    .cfb-field { aspect-ratio: 16 / 8; }
  }

  /* ---- Keyframes (route-prefixed to avoid cross-page collisions) -------- */
  @keyframes wfa-livepulse { 0%,100% { box-shadow: 0 0 10px rgba(255,26,26,.5); } 50% { box-shadow: 0 0 18px rgba(255,26,26,.85); } }
  @keyframes wfa-scoreflash { 0% { color: var(--white-bright, #F5F5F5); transform: scale(1.25); } 100% { color: #fff; transform: scale(1); } }
  @keyframes wfa-modalin { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes wfa-ballbob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
  @keyframes wfa-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) {
    .gt-pill.live, .cff-ball-svg, .game-tile.sb-skeleton, .ap-row.sb-skeleton, .cff-ball { animation: none; transition: none; }
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /scoreboard folded from scoreboard/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/scoreboard"].
   WARNING: source page <html> has NO data-route attr — fell back to "/scoreboard".
   Resets dropped (canonical reset/base own them); no per-page :root block existed
   (tokens come from canonical tokens.css); page keyframes route-prefixed
   (scoreboard-) to avoid cross-route collision.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/scoreboard"]{

  /* ============ ACTIVE NAV — Dashboard OFF, Scores ON ============ */
  .stage-scoreboard .sn--c_sidebar .nav-item[data-id="t_nav_dashboard"] {
    background: transparent;
    color: var(--text-muted);
    border-left: 0;
  }
  .stage-scoreboard .sn--c_sidebar .nav-item.is-active {
    background: linear-gradient(90deg, rgba(193,26,38,.22), rgba(193,26,38,0));
    color: var(--text-primary);
    border-left: 2px solid var(--border-accent);
  }
  /* SCORES nav icon — football */
  .nav-item .ic-ball {
    --ic: 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'><ellipse cx='12' cy='12' rx='9' ry='5' transform='rotate(-25 12 12)'/><path d='M7 14l3-3 4 4 3-3'/><path d='M8 11l1 1M11 14l1 1M14 11l1 1M10 8l1 1M13 10l1 1'/></svg>");
  }

  /* Scoreboard stage uses full 1440x900 viewport; content fills exactly */
  .stage-scoreboard {
    aspect-ratio: 1440 / 900;
    height: auto;
  }
  @supports not (aspect-ratio: 1 / 1) {
    .stage-scoreboard { height: 900px; }
  }

  /* Reset .hotspot to in-flow inside list/grid/row bodies — same pattern as my-leagues */
  .stage-scoreboard .game-card.hotspot,
  .stage-scoreboard .rk-row.hotspot,
  .stage-scoreboard .up-row.hotspot,
  .stage-scoreboard .filter-pill.hotspot,
  .stage-scoreboard .toggle-pill.hotspot,
  .stage-scoreboard .section-link.hotspot,
  .stage-scoreboard .picker-chip.hotspot,
  .stage-scoreboard .td-tab.hotspot,
  .stage-scoreboard .td-box.hotspot,
  .stage-scoreboard .td-stat.hotspot,
  .stage-scoreboard .td-header.hotspot,
  .stage-scoreboard .ranking-paginator.hotspot {
    position: relative !important;
    left: auto !important; top: auto !important;
  }
  .stage-scoreboard .rk-row.hotspot { display: table-row; }

  /* ============ HEADER · FILTERS ============ */
  .sn--c_header {
    padding: 18px 24px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid var(--hairline);
    background:
      linear-gradient(180deg, rgba(193,26,38,.06) 0%, transparent 60%),
      var(--bg-page);
  }
  .page-title {
    margin: 0;
    font-family: var(--f-display);
    font-size: 30px;
    letter-spacing: .12em;
    color: var(--text-primary);
  }
  .page-title .numeral-accent {
    color: var(--white-bright, #F5F5F5);
    margin-right: 6px;
    font-family: var(--f-display);
  }
  .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  /* #681 — freeze-pane the header/filter row while the games list scrolls */
  .sb-hdr {
    position: sticky;
    top: 0;
    z-index: 60;
    background:
      linear-gradient(180deg, rgba(193,26,38,.06) 0%, var(--bg-page) 70%),
      var(--bg-page);
    padding-bottom: 12px;
    margin-bottom: 4px;
    box-shadow: 0 8px 18px -12px rgba(0,0,0,.8);
  }
  /* #681 — a section the conference filter has emptied collapses out of flow */
  .sb-section[hidden] { display: none !important; }
  /* #681 — visually-hidden labels for the new filter selects */
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }
  /* #681 — native select styled to look like a filter pill */
  .filter-pill-select {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .filter-pill-select select {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 26px 7px 12px;
    font-family: var(--f-body); font-weight: 600; font-size: 16px;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--bg-surface);
    color: var(--text-muted);
    border: 1px solid var(--hairline-2);
    border-radius: 999px;
    cursor: pointer;
    transition: all .18s ease;
  }
  .filter-pill-select select:hover,
  .filter-pill-select select:focus-visible {
    background: var(--bg-surface-2);
    color: var(--text-primary);
    border-color: var(--border-accent);
  }
  .filter-pill-select.is-active select {
    background: var(--bg-surface-2);
    color: var(--text-primary);
    border-color: var(--border-accent);
    box-shadow: 0 0 0 1px var(--border-accent), 0 0 14px rgba(220,31,46,.15);
  }
  .filter-pill-select::after {
    content: "\25BE";
    position: absolute;
    right: 11px;
    font-size: 16px;
    opacity: .7;
    pointer-events: none;
    color: inherit;
  }
  .filter-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    font-family: var(--f-body); font-weight: 600; font-size: 16px;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--bg-surface);
    color: var(--text-muted);
    border: 1px solid var(--hairline-2);
    border-radius: 999px;
    cursor: pointer;
    transition: all .18s ease;
  }
  .filter-pill:hover, .filter-pill:focus-visible {
    background: var(--bg-surface-2);
    color: var(--text-primary);
    border-color: var(--border-accent);
  }
  .filter-pill.is-active {
    background: var(--bg-surface-2);
    color: var(--text-primary);
    border-color: var(--border-accent);
    box-shadow: 0 0 0 1px var(--border-accent), 0 0 14px rgba(220,31,46,.15);
  }
  .filter-pill-ghost {
    border-style: dashed;
  }
  .pill-caret {
    font-size: 16px;
    opacity: .7;
    margin-left: 2px;
  }
  .filter-toggles {
    margin-left: auto;
    display: inline-flex;
    gap: 0;
    background: var(--bg-surface);
    border: 1px solid var(--hairline-2);
    border-radius: 999px;
    padding: 2px;
  }
  .toggle-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    font-family: var(--f-body); font-weight: 700; font-size: 16px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s, color .18s;
  }
  .toggle-pill:hover { color: var(--text-primary); }
  .toggle-pill.is-active {
    background: var(--border-accent);
    color: #fff;
    box-shadow: 0 0 12px rgba(220,31,46,.45);
  }
  .toggle-count {
    font-family: var(--f-mono); font-size: 16px;
    padding: 1px 6px;
    background: rgba(0,0,0,.25);
    border-radius: 999px;
  }

  /* ============ SECTION HEADERS (Live / Final) ============ */
  .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 24px 8px 24px;
  }
  .section-h {
    margin: 0;
    font-family: var(--f-display);
    font-size: 18px;
    letter-spacing: .14em;
    color: var(--text-primary);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .section-count {
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--text-muted);
    letter-spacing: .08em;
    margin-left: 4px;
  }
  .section-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
  }
  .section-dot-live  { background: var(--border-accent); box-shadow: 0 0 8px var(--border-accent); animation: scoreboard-live-pulse 1.4s ease-in-out infinite; }
  .section-dot-final { background: var(--accent-gold); }
  .section-link {
    font-family: var(--f-body); font-weight: 600; font-size: 16px;
    color: var(--border-accent-2);
    letter-spacing: .08em; text-transform: uppercase;
  }
  .section-link:hover { color: var(--text-primary); }
  .link-arrow { display: inline-block; transition: transform .18s ease; }
  .section-link:hover .link-arrow { transform: translateX(3px); }

  /* ============ GAME CARDS ============ */
  .game-grid {
    display: grid;
    gap: 12px;
    padding: 0 24px 12px 24px;
  }
  .game-grid-live  { grid-template-columns: repeat(4, 1fr); }
  .game-grid-final { grid-template-columns: repeat(5, 1fr); }

  .game-card {
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2));
    border: 1px solid var(--hairline-2);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none; color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .game-card:hover, .game-card:focus-visible {
    border-color: var(--border-accent);
    box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 0 1px var(--border-accent);
    transform: translateY(-3px);
  }
  .game-card-live {
    border-color: rgba(220,31,46,.32);
  }
  .game-card-live::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(220,31,46,.4);
    opacity: 0;
    transition: opacity .2s;
  }
  .game-card-live:hover::before { opacity: 1; }

  .gc-meta {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--text-muted);
    letter-spacing: .08em;
  }
  .gc-clock {
    color: var(--text-muted);
    font-family: var(--f-mono); font-weight: 700;
    font-size: 16px;
    letter-spacing: .1em;
  }
  .live-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px;
    background: var(--border-accent);
    color: #fff;
    font-family: var(--f-body); font-weight: 700; font-size: 16px;
    letter-spacing: .12em; text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(220,31,46,.5);
  }
  .lp-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #fff;
    animation: scoreboard-live-pulse 1.2s ease-in-out infinite;
  }
  .final-pill {
    padding: 2px 7px;
    background: transparent;
    color: var(--white-bright, #F5F5F5);
    font-family: var(--f-body); font-weight: 700; font-size: 16px;
    letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid var(--accent-gold);
    border-radius: 3px;
  }

  .gc-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    font-family: var(--f-body);
  }
  .game-card-final .gc-row { grid-template-columns: auto 1fr auto; }

  .gc-helm {
    width: 24px; height: 24px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--bg-surface-3), var(--bg-surface));
    border: 1px solid var(--hairline-2);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .gc-team {
    font-weight: 700; font-size: 16px;
    color: var(--text-primary);
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gc-winner { color: var(--white-bright, #F5F5F5); }
  .gc-rec {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--text-muted);
    letter-spacing: .04em;
  }
  .gc-score {
    font-family: var(--f-display);
    font-size: 22px;
    line-height: 1;
    letter-spacing: .03em;
    color: var(--white-bright, #F5F5F5);
    min-width: 30px;
    text-align: right;
  }
  .gc-foot {
    display: flex; justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--text-faint);
    letter-spacing: .04em;
    border-top: 1px dashed var(--hairline);
    padding-top: 6px;
    margin-top: 2px;
  }
  .gc-tv {
    color: var(--white-bright, #F5F5F5);
    font-weight: 700;
  }

  /* ============ RANKINGS PANEL ============ */
  .sn--c_rankings,
  .sn--c_teamdetail,
  .sn--c_upcoming {
    padding: 14px;
    background: linear-gradient(180deg, var(--bg-surface), var(--bg-page));
    border: 1px solid var(--hairline);
    border-radius: 12px;
    margin: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sn--c_rankings  { margin-left: 12px; margin-right: 4px; }
  .sn--c_teamdetail{ margin-left: 4px;  margin-right: 4px; }
  .sn--c_upcoming  { margin-left: 4px;  margin-right: 12px; }

  .panel-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 10px;
  }
  .panel-h {
    margin: 0;
    font-family: var(--f-display); font-size: 16px;
    letter-spacing: .14em;
    color: var(--text-primary);
  }
  .panel-pickers {
    display: inline-flex; gap: 4px; flex-wrap: wrap;
  }
  .picker-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px;
    font-family: var(--f-mono); font-size: 16px;
    letter-spacing: .08em;
    color: var(--text-muted);
    background: var(--bg-surface-2);
    border: 1px solid var(--hairline-2);
    border-radius: 4px;
    cursor: pointer;
  }
  .picker-chip.is-active, .picker-chip:hover {
    color: var(--text-primary);
    border-color: var(--border-accent);
  }
  .pick-caret { font-size: 16px; opacity: .7; }

  .ranking-tbl {
    width: 100%; border-collapse: collapse;
    flex: 1;
  }
  .ranking-tbl thead th {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--text-muted);
    letter-spacing: .12em;
    text-align: left;
    padding: 4px 6px;
    border-bottom: 1px solid var(--hairline);
  }
  .ranking-tbl tbody td {
    padding: 6px 6px;
    font-family: var(--f-body); font-size: 16px;
    border-bottom: 1px solid var(--hairline);
  }
  .rk-row { cursor: pointer; transition: background .18s; }
  .rk-row:hover td { background: var(--bg-surface-2); }
  .rk-num {
    font-family: var(--f-display);
    font-size: 18px;
    color: var(--white-bright, #F5F5F5);
    width: 28px;
  }
  .rk-team {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600;
  }
  .rk-helm {
    width: 18px; height: 18px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--bg-surface-3), var(--bg-surface));
    border: 1px solid var(--hairline-2);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex: 0 0 18px;
  }
  .rk-rec, .rk-pts {
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--text-muted);
  }
  .rk-trend {
    font-family: var(--f-mono);
    font-size: 16px;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: .04em;
  }
  .rk-trend-up   { color: #4ade80; background: rgba(74,222,128,.1); }
  .rk-trend-down { color: #f87171; background: rgba(248,113,113,.1); }
  .rk-trend-flat { color: var(--text-muted); background: var(--bg-surface-2); }

  .ranking-paginator {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--hairline);
  }
  .pag-btn {
    width: 28px; height: 28px;
    border-radius: 4px;
    background: var(--bg-surface-2);
    border: 1px solid var(--hairline-2);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
  }
  .pag-btn:hover { color: var(--text-primary); border-color: var(--border-accent); }
  .pag-info {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--text-muted); letter-spacing: .12em;
  }

  /* ============ TEAM DETAIL · INDIANA ============ */
  .td-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .18s;
  }
  .td-header:hover {
    background: rgba(193,26,38,.05);
  }
  .td-crest {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #aa0c2b, #6b0b1b);
    border: 1px solid var(--border-accent);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .td-titles { display: flex; flex-direction: column; gap: 2px; }
  .td-h {
    margin: 0;
    font-family: var(--f-display); font-size: 18px;
    letter-spacing: .12em;
    color: var(--text-primary);
  }
  .td-sub {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--text-muted); letter-spacing: .08em;
  }
  .td-stats {
    display: flex; align-items: baseline; gap: 8px;
  }
  .td-rec {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--text-muted);
  }
  .td-pts {
    font-family: var(--f-display); font-size: 18px;
    color: var(--white-bright, #F5F5F5);
  }

  .td-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 10px;
  }
  .td-tab {
    padding: 6px 10px;
    font-family: var(--f-body); font-weight: 600; font-size: 16px;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .18s, border-color .18s;
  }
  .td-tab:hover { color: var(--text-primary); }
  .td-tab.is-active {
    color: var(--text-primary);
    border-bottom-color: var(--border-accent);
  }

  .td-box-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .td-box {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px;
    background: var(--bg-surface-2);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    text-decoration: none; color: inherit;
    transition: border-color .18s, box-shadow .18s;
  }
  .td-box:hover {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 1px var(--border-accent);
  }
  .td-box-label {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--text-muted); letter-spacing: .14em;
  }
  .td-box-team {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
  }
  .td-box-helm {
    width: 22px; height: 22px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--bg-surface-3), var(--bg-surface));
    border: 1px solid var(--hairline-2);
    background-size: contain; background-repeat: no-repeat; background-position: center;
  }
  .td-box-name {
    font-size: 16px; font-weight: 600;
    color: var(--text-primary);
  }
  .td-box-score {
    font-family: var(--f-display); font-size: 18px;
    color: var(--white-bright, #F5F5F5);
  }
  .td-box-foot {
    display: flex; justify-content: space-between;
    font-family: var(--f-mono); font-size: 16px;
  }
  .td-box-date { color: var(--text-muted); letter-spacing: .08em; }
  .td-box-result { color: var(--text-muted); }
  .td-result-win { color: #4ade80; font-weight: 700; }

  .td-stats-h {
    margin: 0 0 6px 0;
    font-family: var(--f-mono); font-size: 16px;
    color: var(--text-muted); letter-spacing: .14em;
  }
  .td-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .td-stat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 8px;
    background: var(--bg-surface-2);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .18s, background .18s;
  }
  .td-stat:hover {
    border-color: var(--border-accent);
    background: var(--bg-surface-3);
  }
  .td-stat-lbl {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--text-muted); letter-spacing: .12em;
  }
  .td-stat-val {
    font-family: var(--f-display); font-size: 18px;
    color: var(--text-primary); letter-spacing: .02em;
  }
  .td-stat-rank {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--white-bright, #F5F5F5);
  }

  /* ============ UPCOMING GAMES LIST ============ */
  .upcoming-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .up-row {
    display: grid;
    grid-template-columns: 70px 70px auto auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-surface-2);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none; color: inherit;
    transition: border-color .18s, transform .18s;
  }
  .up-row:hover {
    border-color: var(--border-accent);
    transform: translateX(2px);
  }
  .up-date {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--text-primary); letter-spacing: .06em;
  }
  .up-time {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--white-bright, #F5F5F5);
  }
  .up-vs {
    font-family: var(--f-mono); font-size: 16px;
    color: var(--text-faint);
  }
  .up-helm {
    width: 22px; height: 22px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--bg-surface-3), var(--bg-surface));
    border: 1px solid var(--hairline-2);
    background-size: contain; background-repeat: no-repeat; background-position: center;
  }
  .up-team {
    font-size: 16px; font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ============ STAGGERED FADE-IN ============ */
  .reveal { opacity: 0; transform: translateY(8px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.is-in { opacity: 1; transform: translateY(0); }

  /* ============ MOBILE — EDGE-TO-EDGE (≤880px) ============
     Cards stretch screen-edge to screen-edge.
     Only the page wrapper has 12px padding for breathing room.
     No fixed pixel widths — width 100%, max-width 100% everywhere.
     NOTE: source had a bare `html, body { overflow-x: hidden; }` reset here;
     dropped per fold recipe (can't be scoped under route; canonical base owns it). */
  @media (max-width: 880px) {
    .stage-scoreboard {
      aspect-ratio: auto;
      height: auto;
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0 12px;
      overflow: visible;
      display: flex;
      flex-direction: column;
    }
    .stage-scoreboard .sn {
      position: static !important;
      left: auto !important; top: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      margin: 0 0 12px 0 !important;
      box-sizing: border-box;
    }

    .sn--c_sidebar {
      order: 0;
      border-right: 0;
      border-bottom: 1px solid var(--border-accent);
      margin: 0 -12px 12px -12px !important;
      width: calc(100% + 24px) !important;
    }

    .sn--c_header {
      order: 1;
      padding: 14px 0 10px 0;
      background:
        linear-gradient(180deg, rgba(193,26,38,.06) 0%, transparent 60%),
        transparent;
      border-bottom: 1px solid var(--hairline);
      margin-bottom: 12px !important;
    }
    .page-title { font-size: 22px; }
    .filter-row { gap: 6px; flex-wrap: wrap; }
    .filter-toggles {
      margin-left: 0;
      width: 100%;
      justify-content: space-between;
      margin-top: 6px;
    }
    .toggle-pill { flex: 1; justify-content: center; }

    .sn--c_live_sec   { order: 2; padding: 0; }
    .sn--c_teamdetail { order: 3; }
    .sn--c_final_sec  { order: 4; padding: 0; }
    .sn--c_rankings   { order: 5; }
    .sn--c_upcoming   { order: 6; }

    .section-header { padding: 0 0 8px 0; }

    .game-grid-live,
    .game-grid-final {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      padding: 0;
      gap: 10px;
    }

    .sn--c_rankings,
    .sn--c_teamdetail,
    .sn--c_upcoming {
      margin: 0 0 12px 0 !important;
      padding: 14px;
      border-radius: 10px;
      width: 100% !important;
      max-width: 100% !important;
    }

    .td-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .td-tab  { flex: 1 0 auto; min-width: max-content; }
    .td-box-row   { grid-template-columns: 1fr; }
    .td-stats-row { grid-template-columns: 1fr; }
    .td-stat      { flex-direction: row; justify-content: space-between; align-items: center; }
    .td-header { grid-template-columns: auto 1fr; row-gap: 6px; }
    .td-stats { grid-column: 1 / -1; justify-content: flex-end; }

    .ranking-tbl { width: 100%; }
    .rk-team    { gap: 6px; }
    .ranking-paginator { width: 100%; }

    .upcoming-list { width: 100%; }
    .up-row {
      grid-template-columns: auto auto auto 1fr;
      column-gap: 8px;
      row-gap: 2px;
      padding: 10px 12px;
      width: 100%;
    }
    .up-date { grid-column: 1; grid-row: 1; font-size: 16px; }
    .up-time { grid-column: 1; grid-row: 2; font-size: 16px; }
    .up-vs   { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .up-helm { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
    .up-team { grid-column: 4; grid-row: 1 / span 2; align-self: center; font-size: 16px; }

    .gc-team  { font-size: 16px; }
    .gc-score { font-size: 24px; }
  }

  /* ============ EXTRA-SMALL PHONES (≤600px) ============ */
  @media (max-width: 600px) {
    .stage-scoreboard { padding: 0 10px; }
    .sn--c_sidebar    { margin: 0 -10px 10px -10px !important; width: calc(100% + 20px) !important; }
    .page-title       { font-size: 20px; letter-spacing: .08em; }
    .filter-pill      { font-size: 16px; padding: 6px 10px; }
    .toggle-pill      { font-size: 16px; padding: 5px 8px; letter-spacing: .1em; }
    .toggle-count     { font-size: 16px; padding: 1px 5px; }

    .game-grid-live,
    .game-grid-final { grid-template-columns: 1fr; gap: 8px; }

    .game-card { padding: 10px 12px; gap: 6px; }
    .gc-row    { grid-template-columns: auto 1fr auto auto; column-gap: 6px; }
    .gc-rec    { font-size: 16px; }
    .gc-foot   { font-size: 16px; }
    .gc-score  { font-size: 22px; min-width: 26px; }
    .gc-helm   { width: 22px; height: 22px; flex: 0 0 22px; }

    .ranking-tbl thead th:nth-child(4),
    .ranking-tbl tbody td:nth-child(4) { display: none; }
    .rk-num  { font-size: 16px; width: 22px; }
    .rk-team { font-size: 16px; }
    .rk-helm { width: 16px; height: 16px; flex: 0 0 16px; }
    .rk-rec, .rk-pts, .rk-trend { font-size: 16px; }

    .sn--c_rankings,
    .sn--c_teamdetail,
    .sn--c_upcoming { padding: 12px; }

    .panel-header  { flex-wrap: wrap; gap: 6px; }
    .panel-pickers { flex-wrap: wrap; }
    .picker-chip   { font-size: 16px; padding: 3px 6px; }

    .td-h     { font-size: 16px; letter-spacing: .08em; }
    .td-sub   { font-size: 16px; }
    .td-crest { width: 36px; height: 36px; }

    .up-row  { padding: 9px 10px; }
    .up-date { font-size: 16px; }
    .up-time { font-size: 16px; }
    .up-team { font-size: 16px; }
    .up-helm { width: 20px; height: 20px; }
  }

  /* v2.10 — Scoreboard horizontal scroll carousel (#5)
     game-grid is scrollable on narrow viewports with snap.       */
  .game-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    padding-bottom: 6px;
  }
  .game-grid::-webkit-scrollbar { display: none; }
  .game-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 260px;
  }
  /* Arrow controls — shown on desktop */
  .game-grid-wrap {
    position: relative;
  }
  .gg-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 32px; height: 32px;
    background: var(--black-soft, #111);
    border: 1px solid var(--red-primary, #FF1A1A);
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    transition: background .2s ease;
  }
  .gg-arrow:hover { background: var(--red-primary, #FF1A1A); }
  .gg-arrow-left  { left: -18px; }
  .gg-arrow-right { right: -18px; }
  @media (min-width: 881px) {
    .gg-arrow { display: flex; }
  }
  /* Team-picker strip above team-detail panel */
  .td-team-picker {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 0 6px;
    margin-bottom: 4px;
  }
  .td-team-picker::-webkit-scrollbar { display: none; }
  .td-pick-chip {
    scroll-snap-align: start;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--black-soft, #111);
    border: 1px solid var(--hairline, #2a2a2a);
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--f-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--gray-light, #aaa);
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color .2s, color .2s, background .2s;
  }
  .td-pick-chip:hover,
  .td-pick-chip.is-active {
    border-color: var(--red-primary, #FF1A1A);
    color: #fff;
    background: rgba(255,26,26,.12);
  }

  /* ============================================================
     All Matchups Grid - wireMatchGrid() output
     ============================================================ */

  .match-grid-section {
    padding: 1.5rem 24px 2rem;
  }

  .match-grid-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .match-grid-section .section-title {
    margin: 0;
    font-family: var(--f-display);
    font-size: 18px;
    letter-spacing: .14em;
    color: var(--white-bright);
  }

  .match-week-label {
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--gray-light);
    letter-spacing: .08em;
  }

  .match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
  }

  .match-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 16px;
  }

  .match-team {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
  }

  .match-away {
    border-bottom: 1px solid var(--hairline);
  }

  .match-helmet {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    flex-shrink: 0;
  }

  .match-tname {
    flex: 1;
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--white-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .match-score {
    font-family: var(--f-display);
    font-size: 24px;
    line-height: 1;
    color: var(--gray-light);
    flex-shrink: 0;
    min-width: 2rem;
    text-align: right;
  }

  .match-score.is-winning {
    color: #FFFFFF;
  }

  .match-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 0 4px;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .06em;
    color: var(--gray-light);
  }

  .match-at {
    font-size: 16px;
    opacity: .55;
  }

  .match-venue {
    font-size: 16px;
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  @media (max-width: 768px) {
    .match-grid-section {
      padding: 1.25rem 16px 1.5rem;
    }
    .match-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 390px) {
    .match-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* keyframes hoisted to top level + route-prefixed (were global in scoreboard/style.css) */
@keyframes scoreboard-live-pulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(1.3); opacity: .55; }
}

/* re-added: source dropped `html,body{overflow-x:hidden}` inside @media(<=880px); canonical has none */
@media (max-width:880px){
  html[data-route="/scoreboard"]{overflow-x:hidden;}
  html[data-route="/scoreboard"] body{overflow-x:hidden;}
}
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /news folded from news/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/news"] (static attr, FOUC-safe).
   Resets dropped (none present); no per-page :root (no --f-display present);
   page keyframe + container-name route-prefixed (news-) to avoid cross-route
   collision. Faithful 1:1 fold — render identical.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/news"]{

  /* ============ HERO ============ */
  .content .hero-wordmark-text::before { content: none !important; }

  /* ============ FILTER STRIP ============ */
  .row-nw-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 0;
  }
  .nw-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .nw-chip {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--text-muted, #8A8A8A);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .nw-chip:hover {
    color: var(--white-bright, #F5F5F5);
    border-color: var(--gold-accent, #F0BD30);
  }
  .nw-chip.is-active {
    color: var(--white-bright, #F5F5F5);
    background: linear-gradient(135deg, rgba(255,26,26,.16), rgba(240,189,48,.04));
    border-color: var(--red-primary, #FF1A1A);
    box-shadow: inset 0 0 0 1px rgba(255,26,26,.42), 0 0 12px rgba(255,26,26,.18);
  }
  .nw-meta {
    display: flex;
    gap: 14px;
    align-items: baseline;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .12em;
    color: var(--text-muted, #8A8A8A);
  }
  .nw-count { color: var(--white-bright, #F5F5F5); }
  .nw-source { color: var(--white-bright, #F5F5F5); }

  /* Team filter — a dropdown sibling to the category chips. Matches chip styling
     so it reads as part of the same toolbar ("a General, but then also a Team tab"). */
  .nw-team {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
  }
  .nw-team[hidden] { display: none; }
  .nw-team-label {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--text-muted, #8A8A8A);
  }
  .nw-team-select {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--white-bright, #F5F5F5);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    padding: 7px 28px 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    max-width: 200px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%238A8A8A' stroke-width='1.6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
  }
  .nw-team-select:hover { border-color: var(--gold-accent, #F0BD30); }
  .nw-team-select:focus-visible { outline: 2px solid var(--gold-accent, #F0BD30); outline-offset: 1px; }
  /* Native option list reads dark on most platforms; force readable contrast. */
  .nw-team-select option { color: #F5F5F5; background: #111; }

  /* ============ LEAD STORY + TRENDING ============ */
  .row-nw-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 12px;
  }
  .sn--c_lead {
    padding: 0;
    overflow: hidden;
    position: relative;
    min-height: 360px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .sn--c_lead:hover {
    transform: translateY(-2px);
    border-color: var(--red-bright, #FF3B30);
    box-shadow: 0 6px 28px rgba(255,26,26,.30);
  }
  .lead-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0a0a0a linear-gradient(135deg, rgba(255,26,26,.06), rgba(240,189,48,.02));
    overflow: hidden;
    border-bottom: 1px solid var(--gray-border, #2A2A2A);
  }
  .lead-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .lead-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,5,5,0) 45%, rgba(5,5,5,.85) 100%);
    pointer-events: none;
  }
  .lead-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    background: var(--red-primary, #FF1A1A);
    padding: 5px 10px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
  }
  .lead-body {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lead-eyebrow {
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    font-weight: 700;
  }
  .lead-title {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: .01em;
    color: var(--white-bright, #F5F5F5);
    margin: 0;
  }
  .lead-excerpt {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-muted, #8A8A8A);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lead-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .12em;
    color: var(--text-muted, #8A8A8A);
    margin-top: 4px;
  }
  .lead-meta .lead-school-logo {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1a1a1a;
    object-fit: contain;
  }
  .lead-meta .lead-school { color: var(--white-bright, #F5F5F5); }

  /* Trending side card */
  .sn--c_trending { padding-bottom: 8px; }
  .trend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .trend-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid rgba(42,42,42,.5);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease;
  }
  .trend-row:first-child { border-top: none; }
  .trend-row:hover { background: rgba(255,26,26,.05); }
  .trend-rank {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 22px;
    line-height: 1;
    color: var(--white-bright, #F5F5F5);
    letter-spacing: .04em;
    text-align: center;
  }
  .trend-row:nth-child(1) .trend-rank { color: var(--red-primary, #FF1A1A); }
  .trend-title {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--white-bright, #F5F5F5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .trend-skel .trend-title.sk-bar {
    height: 12px;
    background: linear-gradient(90deg, #1a1a1a, #2a2a2a, #1a1a1a);
    background-size: 200% 100%;
    animation: news-shimmer 1.4s infinite;
    border-radius: 3px;
  }

  /* ============ FEED GRID ============ */
  .row-nw-feed { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .sn--c_feed { padding-bottom: 18px; }
  .nw-feed-meta {
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .12em;
    color: var(--text-muted, #8A8A8A);
    text-decoration: none;
  }
  .nw-feed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 4px 16px 8px;
  }
  .nw-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    min-height: 200px;
  }
  .nw-card:hover {
    transform: translateY(-3px);
    border-color: var(--red-primary, #FF1A1A);
    box-shadow: 0 6px 22px rgba(255,26,26,.30);
  }
  .nw-card-head {
    position: relative;
    padding: 12px 14px 6px;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .nw-card-cat {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    padding: 3px 8px;
    border-radius: 3px;
  }
  .nw-card-cat.cat-injury { background: #b3261e; }
  .nw-card-cat.cat-game-recap { background: #1f6fcd; }
  .nw-card-cat.cat-ranking { background: var(--gold-accent, #F0BD30); color: #050505; }
  .nw-card-cat.cat-transaction { background: #6b3fa0; }
  .nw-card-cat.cat-coaching { background: #2e7d57; }
  .nw-card-cat.cat-general { background: var(--gray-border, #2A2A2A); color: var(--text-muted, #8A8A8A); }
  .nw-card-time {
    margin-left: auto;
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--text-muted, #8A8A8A);
    letter-spacing: .1em;
  }
  .nw-card-body {
    padding: 0 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }
  .nw-card-title {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--white-bright, #F5F5F5);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nw-card-excerpt {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted, #8A8A8A);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nw-card-foot {
    margin-top: auto;
    padding: 10px 14px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-top: 1px solid rgba(42,42,42,.55);
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--text-muted, #8A8A8A);
  }
  .nw-card-school-logo {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1a1a1a;
    object-fit: contain;
    flex-shrink: 0;
  }
  .nw-card-school {
    color: var(--white-bright, #F5F5F5);
    text-transform: uppercase;
  }
  .nw-card-source {
    margin-left: auto;
    color: var(--white-bright, #F5F5F5);
  }

  /* ============ CARD PHOTO + ATTRIBUTION (Unsplash, #762 media) ============ */
  .nw-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--gray-border, #2A2A2A);
  }
  .nw-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
  }
  .nw-card:hover .nw-card-img { transform: scale(1.04); }

  /* "Photo: NAME / Unsplash" overlay — shared by lead hero + feed thumbnails.
     Required attribution per the Unsplash API ToS. */
  .nw-credit {
    position: absolute;
    right: 8px;
    bottom: 7px;
    z-index: 3;
    max-width: calc(100% - 16px);
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .02em;
    line-height: 1.3;
    color: rgba(255,255,255,.66);
    background: rgba(5,5,5,.52);
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .nw-credit a { color: rgba(255,255,255,.85); text-decoration: none; }
  .nw-credit a:hover { color: var(--white-bright, #F5F5F5); text-decoration: underline; }
  .nw-credit--compact { font-size: 16px; right: 6px; bottom: 6px; padding: 1px 5px; }

  .nw-feed-empty {
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }
  .nw-feed-empty-title {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 22px;
    letter-spacing: .05em;
    color: var(--white-bright, #F5F5F5);
  }
  .nw-feed-empty-sub {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    color: var(--text-muted, #8A8A8A);
  }

  /* ============ SKELETON SHIMMER ============ */
  .lead-skeleton {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  .sk-bar {
    height: 14px;
    background: linear-gradient(90deg, #1a1a1a, #2a2a2a, #1a1a1a);
    background-size: 200% 100%;
    animation: news-shimmer 1.4s infinite;
    border-radius: 3px;
  }
  .sk-cat { width: 50px; height: 14px; }
  .sk-h1 { height: 28px; }
  .sk-body { height: 12px; }
  .sk-short { width: 65%; }

  /* ============ RESPONSIVE — TABLET ============ */
  @media (max-width: 1080px) {
    .row-nw-lead { grid-template-columns: 1fr; }
    .nw-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ============ RESPONSIVE — MOBILE (edge-to-edge, no fixed pixel grids) ============ */
  @media (max-width: 720px) {
    .row-nw-filters {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    .nw-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .nw-chip { flex-shrink: 0; }
    .nw-feed-grid { grid-template-columns: 1fr; padding: 4px 12px 8px; gap: 10px; }
    .lead-title { font-size: 24px; }
    .nw-card-title { font-size: 17px; }
    .sn--c_lead { min-height: 0; }
    .nw-card { min-height: 0; }
  }
  @media (max-width: 360px) {
    .row-nw-filters { padding: 4px 0 0; }
    .nw-meta { flex-wrap: wrap; gap: 6px; }
    .lead-body { padding: 14px 14px 16px; }
    .lead-title { font-size: 21px; }
    .nw-card-head { padding: 10px 12px 4px; }
    .nw-card-body { padding: 0 12px 10px; }
    .nw-card-foot { padding: 8px 12px 10px; }
  }

  /* ============================================================
     DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER  (Issue #762, FLUID agent)
     ------------------------------------------------------------
     Appended last. CONSUMES contract vars (--fs-fluid-*, --space-fluid-*)
     from tokens.css (Tokens agent) with inline clamp() fallbacks of the
     same intent, so correct regardless of PR merge order. tokens.css is
     not edited here.

     Patterns: Utopia.fyi fluid type/space (CC-BY); CSS-Tricks "Modern
     Fluid Typography Using CSS Clamp"; MDN container queries (CC-BY-SA).
     Range 344→2160px; rem base + vw slope preserves zoom (WCAG 1.4.4).
     ============================================================ */

  /* Lead headline: one clamp replaces the 30→24→21px step ladder. */
  .lead-title{ font-size: var(--fs-fluid-h1, clamp(1.3125rem, 0.95rem + 1.8vw, 1.875rem)); } /* 21 → 30px */

  /* Feed grid: fluid auto-fit minmax folds the 3-/2-/1-col breakpoint
     ladder into one track that reflows by available width. The card
     title then responds to the CARD width via container query. */
  .nw-feed-grid{ grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); } /* 248px floor */
  .nw-card{ container-type: inline-size; container-name: news-nwcard; }
  .nw-card-title{ font-size: var(--fs-fluid-h3, clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem)); } /* 17 → 19px */
  @container news-nwcard (max-width: 13rem){
    .nw-card-title{ font-size: 1rem; -webkit-line-clamp: 2; }
  }

  /* Lead/feed body copy + trending rank scale gently. */
  .lead-excerpt{ font-size: var(--fs-fluid-body, clamp(0.875rem, 0.84rem + 0.18vw, 1rem)); } /* 14 → 16px */
  .trend-rank{ font-size: var(--fs-fluid-h2, clamp(1.375rem, 1.3rem + 0.36vw, 1.625rem)); }  /* 22 → 26px */

  /* Lead card min-height: fluid instead of fixed 360px so it tracks the
     16:9 image at any column width and never over-reserves on mobile. */
  .sn--c_lead{ min-height: clamp(0px, -10rem + 40vw, 22.5rem); } /* 0 → 360px */

  /* ============================================================
     END DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER
     ============================================================ */
}

/* keyframes hoisted to top level + route-prefixed (was global in news/style.css) */
@keyframes news-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /heisman folded from heisman/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/heisman"] (static attr, FOUC-safe).
   Resets dropped (canonical reset/base own them); --f-display dropped so the
   canonical display token owns it (none present here); ex-:root vars scoped
   here; page keyframes + container-name route-prefixed (heisman-) to avoid
   cross-route collision.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/heisman"]{
  /* ex-:root local overrides (supplement canonical tokens; --f-display intentionally omitted — none present) */
  --ht-bronze: var(--bronze-medal, #C7884A);
  --ht-bronze-deep: #8a5a2b;
  --ht-gold: var(--gold-accent, #F0BD30);

  /* ---- HERO — pomp & circumstance -------------------------- */
  .row-ht-hero { margin-bottom: 0; }
  .ht-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 30px 34px;
    /* bronze + gold, not just bronze (per Brock / legal) */
    background:
      radial-gradient(circle at 90% 20%, rgba(240,189,48,.28), transparent 55%),
      linear-gradient(135deg, rgba(199,136,74,.42) 0%, rgba(138,90,43,.30) 45%, rgba(10,10,10,.95) 100%);
    border: 1px solid rgba(240,189,48,.45);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(245,213,126,.18), 0 0 28px rgba(199,136,74,.18);
  }
  .ht-hero::before {
    /* faint chalk/print texture lines — college-font vibe (L344-376) */
    content: '';
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(115deg, rgba(245,213,126,.05) 0 2px, transparent 2px 9px),
      radial-gradient(ellipse at 88% 50%, rgba(240,189,48,.10), transparent 60%);
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .ht-hero-text { position: relative; z-index: 1; }
  .ht-hero-title {
    font-family: var(--f-display) !important;
    font-size: clamp(34px, 6vw, 48px) !important;
    letter-spacing: 3px;
    color: var(--white-bright) !important;
    margin: 6px 0 4px;
    text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 0 24px rgba(240,189,48,.22);
  }
  .ht-hero-sub {
    color: var(--gray-light);
    font: 500 14px var(--f-body);
    margin: 4px 0 6px;
    display: flex; align-items: center; gap: 8px;
  }
  .ht-hero-sub span { color: var(--white-bright, #F5F5F5); font-weight: 700; }
  .ht-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ht-gold); }
  .ht-hero-tagline {
    /* was --text-faint (#5E626E) — illegibly dim on the bronze hero. Warm cream reads clean. */
    color: rgba(245, 232, 208, .82);
    font: 400 14px var(--f-body);
    margin: 4px 0 0;
    letter-spacing: .02em;
    max-width: 46ch;
  }
  .ht-hero-trophy {
    display: grid; place-items: center;
    position: relative; z-index: 1;
    /* Larger, stronger spotlight so the right side reads as a lit stage rather
       than dead bronze space on wide monitors. Extends left past the trophy. */
    background: radial-gradient(circle at 60% 50%, rgba(240,189,48,.34), rgba(240,189,48,.10) 45%, rgba(240,189,48,0) 72%);
    min-width: clamp(180px, 22vw, 320px);
  }
  .ht-trophy-img {
    height: clamp(140px, 18vw, 210px);
    width: auto; display: block;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(240,189,48,.5));
    animation: heisman-ht-trophy-float 4.5s ease-in-out infinite alternate;
  }
  @media (prefers-reduced-motion: reduce) { .ht-trophy-img { animation: none; } }

  /* ---- DUAL SECTION ROW (side-by-side >= 768) -------------- */
  .row-ht-dual {
    display: grid;
    grid-template-columns: 1fr;   /* mobile: stacked */
    gap: var(--col-gap, 16px);
    align-items: start;
    grid-auto-rows: auto;
  }
  @media (min-width: 768px) {
    .row-ht-dual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }

  .ht-section { padding: 22px 24px; display: flex; flex-direction: column; }
  /* Race section gets a bronze top-edge accent; vote gets gold. */
  .ht-section--race { border-top: 2px solid var(--ht-bronze); }
  .ht-section--vote { border-top: 2px solid var(--ht-gold); }

  .ht-subhead {
    font: 700 12px var(--f-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--white-bright, #F5F5F5);
    margin: 18px 0 8px;
  }

  .ht-source {
    font: 500 12px var(--f-mono);
    color: var(--text-faint);
    letter-spacing: .04em;
  }
  .ht-note {
    font: 400 12px var(--f-body);
    color: var(--text-faint);
    line-height: 1.5;
    margin: 14px 0 0;
  }
  .ht-note code {
    font-family: var(--f-mono);
    color: var(--gray-light);
    background: rgba(255,255,255,.05);
    padding: 1px 5px; border-radius: 4px;
  }
  .ht-empty {
    font: 500 13px var(--f-body);
    color: var(--gray-light);
    padding: 20px 8px;
    text-align: center;
  }

  /* ---- SKELETON ------------------------------------------- */
  .ht-leader-skeleton, .ht-vote-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
  .skel-row {
    height: 48px; border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
    background-size: 200% 100%;
    animation: heisman-ht-shimmer 1.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) { .skel-row { animation: none; } }

  /* ============ SECTION A — RACE TRACKER ============ */
  .ht-leader-card {
    position: relative;
    padding: 16px 18px;
    border-radius: 12px;
    background:
      radial-gradient(circle at 100% 0%, rgba(240,189,48,.16), transparent 60%),
      linear-gradient(135deg, rgba(199,136,74,.22), var(--black-card));
    border: 1px solid rgba(199,136,74,.5);
    box-shadow: inset 0 1px 0 rgba(245,213,126,.18);
    overflow: hidden;
  }
  .ht-leader-eyebrow {
    font: 700 12px var(--f-mono);
    letter-spacing: .16em;
    color: var(--white-bright, #F5F5F5);
  }
  .ht-leader-body {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
  }
  .ht-leader-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--ht-bronze), var(--ht-bronze-deep));
    border: 2px solid var(--ht-gold);
    font: 700 18px var(--f-display);
    color: #1a0f06;
    box-shadow: 0 0 16px rgba(240,189,48,.3);
  }
  .ht-leader-info { min-width: 0; }
  .ht-leader-name {
    font: 400 26px var(--f-display);
    letter-spacing: .02em;
    color: var(--white-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ht-leader-meta {
    font: 500 12px var(--f-mono);
    color: var(--gray-light);
    letter-spacing: .04em;
    margin-top: 2px;
  }
  .ht-leader-foot { margin-top: 12px; }
  .ht-badge {
    display: inline-block;
    font: 700 12px var(--f-mono);
    letter-spacing: .1em;
    padding: 3px 9px;
    border-radius: 4px;
  }
  .ht-badge--live { background: rgba(34,197,94,.14); color: #34c759; border: 1px solid rgba(34,197,94,.4); }
  .ht-badge--placeholder { background: rgba(255,255,255,.05); color: var(--text-faint); border: 1px solid var(--hairline-2); }

  /* delta chips (shared by leader + trend) */
  .ht-delta, .ht-trend-delta {
    font: 700 12px var(--f-mono);
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .mv-up { color: #34c759; }
  .mv-dn { color: var(--red-bright); }
  .mv-flat { color: var(--text-faint); }
  .mv-new { color: var(--white-bright, #F5F5F5); }

  /* trend list */
  .ht-trend-head, .ht-tally-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
  }
  .ht-trend-list, .ht-tally-list { list-style: none; margin: 0; padding: 0; }
  .ht-trend-item {
    display: grid;
    grid-template-columns: 24px 1fr auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
  }
  .ht-trend-item + .ht-trend-item { border-top: 1px solid var(--hairline); }
  .ht-trend-rank { font: 400 18px var(--f-display); color: var(--ht-bronze); text-align: center; }
  .ht-trend-info { min-width: 0; }
  .ht-trend-name {
    display: block;
    font: 600 13px var(--f-body); color: var(--white-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ht-trend-meta { display: block; font: 500 12px var(--f-mono); color: var(--gray-light); letter-spacing: .05em; margin-top: 1px; }
  .ht-trend-odds { font: 700 12px var(--f-mono); color: var(--white-bright, #F5F5F5); }
  .ht-trend-ap { font: 500 12px var(--f-mono); color: var(--gray-light); }

  /* ============ SECTION B — VOTING ============ */
  .ht-vote-sub { font: 400 13px var(--f-body); color: var(--gray-light); line-height: 1.5; margin: 2px 0 6px; }
  .ht-vote-sub strong { color: var(--white-bright, #F5F5F5); }
  .ht-deadline { font: 600 12px var(--f-mono); color: var(--text-faint); letter-spacing: .04em; margin: 0 0 14px; }
  .ht-deadline span { color: var(--white-bright, #F5F5F5); }

  .ht-vote-options { display: flex; flex-direction: column; gap: 8px; }
  .ht-vote-opt {
    display: grid;
    grid-template-columns: 40px 1fr 22px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: linear-gradient(135deg, var(--black-soft), var(--black-card));
    border: 1px solid var(--hairline-2);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, transform .12s, box-shadow .15s, background .15s;
  }
  .ht-vote-opt:hover:not(:disabled) { border-color: var(--ht-gold); transform: translateY(-1px); }
  .ht-vote-opt:disabled { opacity: .55; cursor: not-allowed; }
  .ht-vote-opt.is-selected {
    border-color: var(--ht-gold);
    background: linear-gradient(135deg, rgba(240,189,48,.14), rgba(199,136,74,.10));
    box-shadow: 0 0 16px rgba(240,189,48,.22), inset 0 0 0 1px rgba(240,189,48,.3);
  }
  .ht-vote-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--bg-surface-3), var(--black-card));
    border: 2px solid var(--hairline-2);
    font: 700 13px var(--f-display); color: var(--white-bright, #F5F5F5);
  }
  .ht-vote-opt.is-selected .ht-vote-avatar { border-color: var(--ht-gold); box-shadow: 0 0 12px rgba(240,189,48,.35); }
  .ht-vote-opt-info { min-width: 0; }
  .ht-vote-opt-name {
    display: block; font: 600 14px var(--f-body); color: var(--white-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ht-vote-opt-meta { display: block; font: 500 12px var(--f-mono); color: var(--gray-light); letter-spacing: .05em; margin-top: 1px; }
  .ht-vote-check { font-size: 16px; color: var(--white-bright, #F5F5F5); opacity: 0; transition: opacity .15s; }
  .ht-vote-opt.is-selected .ht-vote-check { opacity: 1; }

  .ht-vote-actions { display: flex; gap: 10px; margin-top: 14px; }
  .ht-vote-actions .btn[hidden] { display: none; }
  .ht-vote-status { font: 500 12px var(--f-body); color: var(--gray-light); margin: 10px 0 0; min-height: 1em; }

  /* fan leaderboard */
  .ht-tally-item {
    display: grid;
    grid-template-columns: 1fr 90px auto;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
  }
  .ht-tally-item + .ht-tally-item { border-top: 1px solid var(--hairline); }
  .ht-tally-item.is-mine {
    background: rgba(240,189,48,.06);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(240,189,48,.25);
  }
  .ht-tally-info { min-width: 0; }
  .ht-tally-name {
    display: block; font: 600 13px var(--f-body); color: var(--white-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ht-yours {
    font: 700 12px var(--f-mono); letter-spacing: .1em;
    color: #1a0f06; background: var(--ht-gold);
    padding: 1px 5px; border-radius: 3px; vertical-align: middle;
  }
  .ht-tally-meta { display: block; font: 500 12px var(--f-mono); color: var(--gray-light); letter-spacing: .05em; margin-top: 1px; }
  .ht-tally-bar-wrap { height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
  .ht-tally-bar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ht-bronze), var(--ht-gold)); transition: width .4s ease; }
  .ht-tally-count { font: 700 13px var(--f-display); color: var(--white-bright); letter-spacing: .04em; text-align: right; }

  /* ---- TOAST ---------------------------------------------- */
  .ht-toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: linear-gradient(135deg, var(--ht-bronze), var(--ht-bronze-deep));
    color: #fff;
    font: 600 13px var(--f-body);
    padding: 11px 22px;
    border-radius: 8px;
    border: 1px solid var(--ht-gold);
    box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 18px rgba(240,189,48,.25);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 80;
  }
  .ht-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
  @media (prefers-reduced-motion: reduce) { .ht-toast { transition: opacity .25s ease; } }

  /* ---- MOBILE (320 / 390) --------------------------------- */
  @media (max-width: 600px) {
    .ht-hero { grid-template-columns: 1fr; padding: 22px 18px; }
    .ht-hero-trophy { display: none; }
    .ht-section { padding: 18px 16px; }
    .ht-leader-body { grid-template-columns: 48px 1fr; }
    .ht-leader-body .ht-delta { grid-column: 2; justify-self: start; margin-top: 4px; }
    .ht-leader-name { font-size: 22px; white-space: normal; }
    .ht-trend-item { grid-template-columns: 22px 1fr auto; }
    .ht-trend-odds, .ht-trend-ap { grid-column: 2 / -1; justify-self: start; }
    .ht-vote-actions { flex-direction: column; }
    .ht-tally-item { grid-template-columns: 1fr auto; }
    .ht-tally-bar-wrap { grid-column: 1 / -1; order: 3; }
  }

  /* ============================================================
     DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER  (Issue #762, FLUID agent)
     ------------------------------------------------------------
     Appended last. CONSUMES contract vars (--fs-fluid-*, --space-fluid-*)
     from tokens.css (Tokens agent) with inline clamp() fallbacks of the
     same intent, so correct regardless of PR merge order. tokens.css is
     not edited here. The hero title already used clamp() — left as-is.

     Patterns: Utopia.fyi fluid type/space (CC-BY); CSS-Tricks "Modern
     Fluid Typography Using CSS Clamp"; MDN container queries (CC-BY-SA).
     Range 344→2160px; rem base + vw slope preserves zoom (WCAG 1.4.4).

     Key change: the dual race/vote layout switched from a viewport
     media query (min-width:768px) to a CONTAINER query so it goes
     side-by-side based on the CONTENT column width (correct whether
     the sidebar is open, collapsed, or the page is on a narrow rail).
     ============================================================ */

  /* Dual section: container query instead of viewport media query.
     The row itself is the query container; it goes 2-up once the row
     is at least 40rem (~640px) wide, regardless of viewport. */
  .row-ht-dual{ container-type: inline-size; container-name: heisman-htdual; }
  @container heisman-htdual (min-width: 40rem){
    .row-ht-dual{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }

  /* Section padding + leader name: fluid instead of 22/18px + 26/22px steps. */
  .ht-section{ padding: var(--space-fluid-lg, clamp(1.125rem, 0.9rem + 0.9vw, 1.375rem)) var(--space-fluid-md, clamp(1rem, 0.75rem + 1.2vw, 1.5rem)); }
  .ht-leader-name{ font-size: var(--fs-fluid-h2, clamp(1.375rem, 1.18rem + 0.9vw, 1.625rem)); } /* 22 → 26px */
  .ht-vote-opt-name{ font-size: var(--fs-fluid-h3, clamp(0.875rem, 0.84rem + 0.18vw, 1rem)); } /* 14 → 16px */

  /* ============================================================
     END DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER
     ============================================================ */
}

/* keyframes hoisted to top level + route-prefixed (were global in heisman/style.css) */
@keyframes heisman-ht-trophy-float {
  0%   { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes heisman-ht-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /players folded from players/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/players"] (static attr, FOUC-safe).
   Resets dropped (canonical reset/base own them); no :root/--f-display in src;
   no page keyframes or container-name to rename. Faithful 1:1 fold.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/players"]{
  /* ensure [hidden] beats any display:flex override */
  [hidden] { display: none !important; }

  /* SNS Players — page-specific styles. Chrome inherited from style.base.css. */

  .content .hero-wordmark-text::before { content: none !important; }

  /* ============ TOOLBAR ============ */
  .row-pl-bar { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 0; }
  .pl-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }
  /* search grows to fill; the position chips + the conf/team/sort selects flow
     after it and wrap to a second line as needed (toolbar now holds 5 controls). */
  .pl-search { position: relative; flex: 1 1 240px; min-width: 220px; }
  .pl-search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 6px;
    color: var(--white-bright, #F5F5F5);
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .pl-search-input::placeholder { color: var(--text-muted, #8A8A8A); font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; }
  .pl-search-input:focus { border-color: var(--red-primary, #FF1A1A); box-shadow: 0 0 0 2px rgba(255,26,26,.18); }
  .pl-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white-bright, #F5F5F5);
    font-size: 16px;
    pointer-events: none;
  }
  .pl-pos { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
  .pl-chip {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--text-muted, #8A8A8A);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    padding: 7px 11px;
    border-radius: 5px;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
  }
  .pl-chip:hover { color: var(--white-bright, #F5F5F5); border-color: var(--gold-accent, #F0BD30); }
  .pl-chip.is-active {
    color: var(--white-bright, #F5F5F5);
    background: linear-gradient(135deg, rgba(255,26,26,.16), rgba(240,189,48,.04));
    border-color: var(--red-primary, #FF1A1A);
    box-shadow: inset 0 0 0 1px rgba(255,26,26,.42), 0 0 12px rgba(255,26,26,.18);
  }
  .pl-sort {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
  }
  .pl-sort-lbl {
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    font-weight: 700;
  }
  .pl-sort-select {
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    color: var(--white-bright, #F5F5F5);
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .12em;
    padding: 7px 10px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
  }
  .pl-sort-select:focus { border-color: var(--red-primary, #FF1A1A); }
  .pl-meta {
    display: flex;
    gap: 14px;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .12em;
    color: var(--white-bright, #F5F5F5);
  }
  .pl-meta-source { color: var(--white-bright, #F5F5F5); margin-left: auto; }

  /* ============ LEADER STRIP ============ */
  .row-pl-leaders { display: grid; grid-template-columns: 1fr; }
  .sn--c_leaders { padding-bottom: 18px; }
  .pl-leaders-foot { font-family: var(--f-mono); font-size: 16px; letter-spacing: .12em; color: var(--white-bright, #F5F5F5); }
  .leader-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 16px 8px;
  }
  .leader-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 12px;
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    min-height: 156px;
  }
  .leader-card:hover { transform: translateY(-3px); border-color: var(--red-primary, #FF1A1A); box-shadow: 0 6px 22px rgba(255,26,26,.28); }
  .leader-pos {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    padding: 3px 8px;
    border-radius: 3px;
    align-self: flex-start;
  }
  .leader-pos.pos-qb { background: #b3261e; }
  .leader-pos.pos-rb { background: #1f6fcd; }
  .leader-pos.pos-wr { background: #2e7d57; }
  .leader-pos.pos-te { background: #6b3fa0; }
  .leader-pos.pos-k { background: var(--gold-accent, #F0BD30); color: #050505; }
  .leader-pos.pos-def { background: var(--gray-border, #2A2A2A); }
  .leader-name {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 19px;
    line-height: 1.05;
    letter-spacing: .02em;
    color: var(--white-bright, #F5F5F5);
    text-transform: uppercase;
  }
  .leader-school {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    color: var(--text-muted, #8A8A8A);
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  /* legibility sweep 2026-06-05: school/team links hug their text so the
     click target matches the writing (was a full-column-width hit box). */
  .leader-school.team-link,
  .pl-card-school.team-link {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    justify-self: start;
  }
  .leader-ppg {
    margin-top: auto;
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 30px;
    line-height: 1;
    color: var(--white-bright, #F5F5F5);
    letter-spacing: .02em;
  }
  .leader-ppg-unit { font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; color: var(--text-muted, #8A8A8A); font-weight: 700; }

  /* ============ BROWSE GRID ============ */
  .row-pl-grid { display: grid; grid-template-columns: 1fr; }
  .sn--c_browse { padding-bottom: 6px; }
  .pl-paging { font-family: var(--f-mono); font-size: 16px; letter-spacing: .12em; color: var(--text-muted, #8A8A8A); }

  /* --- player-tile grid: 5-col desktop / 3 tablet / 2 mobile --- */
  .pl-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 4px 16px 12px;
  }

  /* === PLAYER-TILE (concept-art redesign, D42) ===
     Dense browse card: circular gold-ring avatar at top, name, school,
     position chip + primary stat (PPG) below. Consistent height via flex.
     school-color gradient applied at runtime via applySchoolColor(). */
  .pl-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px 12px;
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    min-height: 168px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .pl-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold-accent, #F0BD30);
    box-shadow: 0 6px 22px rgba(240,189,48,.28);
  }

  /* Circular avatar with gold ring */
  .pl-card-img-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
  }
  .pl-card-img-wrap::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--gold-accent, #F0BD30);
    z-index: 0;
  }
  .pl-card-img {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--black-card, #0A0A0A);
    border: 2px solid var(--black-soft, #111);
    display: block;
  }

  /* Body below the avatar */
  .pl-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    width: 100%;
  }
  .pl-card-head { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
  .pl-card-pos {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--white-bright, #F5F5F5);
  }
  .pl-card-pos.pos-qb { background: #b3261e; }
  .pl-card-pos.pos-rb { background: #1f6fcd; }
  .pl-card-pos.pos-wr { background: #2e7d57; }
  .pl-card-pos.pos-te { background: #6b3fa0; }
  .pl-card-pos.pos-k { background: var(--gold-accent, #F0BD30); color: #050505; }
  .pl-card-pos.pos-def { background: var(--gray-border, #2A2A2A); }
  .pl-card-pos.pos-other { background: var(--gray-border, #2A2A2A); color: var(--text-muted, #8A8A8A); }
  .pl-card-name {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 16px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white-bright, #F5F5F5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .pl-card-school {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    color: var(--text-muted, #8A8A8A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .pl-card-stats {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .08em;
    justify-content: center;
  }
  .pl-card-stats .stat-val { color: var(--gold-accent, #F0BD30); font-weight: 700; }
  .pl-card-stats .stat-lbl { color: var(--text-muted, #8A8A8A); margin-left: 2px; }

  /* Pager */
  .pl-pager {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-top: 1px solid rgba(42,42,42,.5);
  }
  .pl-pg-btn {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    padding: 7px 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
  }
  .pl-pg-btn:hover { border-color: var(--red-primary, #FF1A1A); }
  .pl-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
  .pl-pg-info { font-family: var(--f-mono); font-size: 16px; letter-spacing: .12em; color: var(--text-muted, #8A8A8A); }

  .pl-empty {
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }
  .pl-empty-title { font-family: var(--f-display, "Graduate", sans-serif); font-size: 22px; color: var(--white-bright, #F5F5F5); letter-spacing: .04em; }
  .pl-empty-sub { font-family: var(--f-body, "Inter", sans-serif); font-size: 16px; color: var(--text-muted, #8A8A8A); }

  /* ============ MODAL ============ */
  .pl-modal {
    background: linear-gradient(180deg, #0D0D0D, #050505);
    border: 1px solid var(--red-primary, #FF1A1A);
    border-radius: 12px;
    color: var(--white-bright, #F5F5F5);
    max-width: 520px;
    width: 92vw;
    padding: 22px 22px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 28px rgba(255,26,26,.22);
  }
  .pl-modal::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
  .pl-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: 0;
    color: var(--text-muted, #8A8A8A);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
  }
  .pl-modal-close:hover { color: var(--red-bright, #FF3B30); }
  .pl-modal-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
  .pl-modal-img { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.06); object-fit: cover; }
  .pl-modal-meta { display: flex; flex-direction: column; gap: 2px; }
  .pl-modal-name { font-family: var(--f-display, "Graduate", sans-serif); font-size: 26px; letter-spacing: .02em; line-height: 1; }
  .pl-modal-school { font-family: var(--f-body, "Inter", sans-serif); font-size: 16px; color: var(--text-muted, #8A8A8A); }
  .pl-modal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pl-modal-stat { background: var(--black-soft, #111); border: 1px solid var(--gray-border, #2A2A2A); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
  .pl-modal-stat-lbl { font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; color: var(--white-bright, #F5F5F5); font-weight: 700; }
  .pl-modal-stat-val { font-family: var(--f-display, "Graduate", sans-serif); font-size: 22px; }
  .pl-modal-row { margin-top: 12px; font-family: var(--f-body, "Inter", sans-serif); font-size: 16px; color: var(--text-muted, #8A8A8A); }
  .pl-modal-row strong { color: var(--white-bright, #F5F5F5); font-weight: 600; }

  /* ============ RESPONSIVE ============ */
  /* pl-grid: 5 desktop → 3 tablet → 2 mobile */
  @media (max-width: 1180px) {
    .pl-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .pl-sort { justify-content: flex-start; }
    .leader-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* BUG-FIX: in column-flex .pl-bar, flex-basis applies to HEIGHT not width.
       flex:1 1 240px was giving .pl-search a 240px min-height, creating a ~180px
       empty gap below the input and leaving the abs-positioned icon floating at
       the vertical midpoint of that inflated div (orphan magnifier). Reset to
       auto so the container hugs its content. min-width:0 lets stretch handle
       the full-width sizing; max-width:100% prevents any inline overflow. */
    .pl-search { flex: 0 0 auto; min-width: 0; max-width: 100%; width: 100%; }
  }
  @media (max-width: 720px) {
    .leader-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 12px 8px; }
    .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 12px 8px; }
    .pl-meta { flex-direction: column; gap: 4px; }
    .pl-meta-source { margin-left: 0; }
    .pl-pos { overflow-x: auto; flex-wrap: nowrap; }
    .pl-chip { flex-shrink: 0; }
    /* BUG-FIX: "ALL PLAYERS" card-title word-breaks mid-word at narrow widths
       because overflow-wrap:break-word (global) fires when flex squeezes the title.
       Truncate with ellipsis instead — keeps the heading on one line and readable. */
    .card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                  font-size: clamp(16px, 4.5vw, 26px); }
  }
  @media (max-width: 360px) {
    .leader-row { grid-template-columns: 1fr; }
    .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-pager { gap: 8px; padding: 10px 12px; }
    .pl-pg-info { font-size: 16px; }
  }

  /* player action buttons in modal (v1 2026-05-18) */
  .pl-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-border, #2A2A2A);
  }
  /* #684: concise 3-action row (Favorites / Watchlist / Season Stats) */
  .pl-modal-actions--3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 480px) { .pl-modal-actions--3 { grid-template-columns: 1fr; } }
  /* "Season Stats" is an <a>, not a <button> — keep it visually identical and
     centered, and drop the underline anchors normally get. */
  a.pl-act-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  .pl-act-btn {
    padding: 9px 8px;
    font-family: var(--f-mono, monospace);
    font-size: 16px;
    letter-spacing: .10em;
    font-weight: 700;
    color: var(--white-bright, #F5F5F5);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    text-align: center;
  }
  .pl-act-btn:hover { border-color: var(--red-primary, #FF1A1A); background: rgba(255,26,26,.10); }
  .pl-act-btn:active { transform: scale(.97); }
  .pl-act-btn.is-active { border-color: var(--gold-accent, #F0BD30); color: var(--white-bright, #F5F5F5); background: rgba(240,189,48,.08); }
  /* SNS Toast */
  .sns-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(20,20,20,.96);
    color: var(--white-bright, #F5F5F5);
    font-family: var(--f-mono, monospace);
    font-size: 16px;
    letter-spacing: .10em;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid var(--red-primary, #FF1A1A);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 9999;
    white-space: nowrap;
  }
  .sns-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ── Mobile tap-target compliance (wave-3, ≤880px). Primary controls only;
     dense inline .pl-card-school/.leader-school links stay small by design —
     HIG exempts inline cell links; their parent rows are already ≥44px. ── */
  @media (max-width: 880px) {
    .pl-chip { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .pl-search-input { min-height: 44px; }
    .pl-sort-select { min-height: 44px; }
  }

  /* ============ SCHOOL-COLOR CARD THEME (feat/player-card-colors, 2026-05-26) ============
     Applied inline by script.js applySchoolColor(): card root gets
     --card-text + --card-text-mute CSS vars, a gradient background,
     a contrast-aware border, and the .is-school-colored class. */
  .leader-card.is-school-colored,
  .pl-card.is-school-colored { border-width: 1px; }
  .leader-card.is-school-colored:hover,
  .pl-card.is-school-colored:hover {
    filter: brightness(1.07) saturate(1.05);
    box-shadow: 0 8px 26px rgba(0,0,0,.45);
  }
  .pl-card.is-school-colored .pl-card-name,
  .leader-card.is-school-colored .leader-name {
    color: var(--card-text, #fff);
    text-shadow: 0 1px 1px rgba(0,0,0,.18);
  }
  .pl-card.is-school-colored .pl-card-school,
  .pl-card.is-school-colored .pl-card-school.team-link,
  .leader-card.is-school-colored .leader-school,
  .leader-card.is-school-colored .leader-school.team-link {
    color: var(--card-text-mute, rgba(255,255,255,.74));
  }
  .pl-card.is-school-colored .pl-card-school.team-link:hover,
  .leader-card.is-school-colored .leader-school.team-link:hover {
    color: var(--card-text, #fff);
    text-decoration: underline;
  }
  .pl-card.is-school-colored .pl-card-stats .stat-val,
  .leader-card.is-school-colored .leader-ppg {
    color: var(--card-text, #fff);
  }
  .pl-card.is-school-colored .pl-card-stats .stat-lbl,
  .leader-card.is-school-colored .leader-ppg-unit {
    color: var(--card-text-mute, rgba(255,255,255,.74));
  }
  .pl-card.is-school-colored .pl-card-img {
    background: rgba(255,255,255,.16);
    box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.18);
  }
  /* Position pills get a contrast ring so they read on any school color */
  .pl-card.is-school-colored .pl-card-pos,
  .leader-card.is-school-colored .leader-pos {
    box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.22);
  }
}
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /rankings folded from rankings/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/rankings"] (static attr, FOUC-safe).
   Resets dropped (none present); --f-display dropped (no :root here);
   page keyframes route-prefixed (rankings-) to avoid cross-route collision.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/rankings"]{

  /* ============ SCREEN-READER ONLY ============ */
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  /* ============ PAGE HEADER ============ */
  .row-pr-header { padding-top: 8px; }
  .sn--c_prheader {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a0000 50%, #0d0d0d 100%);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px;
    padding: 24px 20px 20px;
  }
  .pr-page-title {
    font-family: var(--f-display, 'Graduate', sans-serif);
    font-size: 36px;
    letter-spacing: 0.04em;
    line-height: 1.05;
    margin: 0;
  }
  .pr-subtitle {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    letter-spacing: 0.12em;
    color: var(--white-bright, #F5F5F5);
  }

  /* ============ CONTROLS BAR ============ */
  .row-pr-controls { display: flex; }
  .pr-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    width: 100%;
  }
  .pr-control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .pr-control-label {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted, #8A8A8A);
    text-transform: uppercase;
  }
  .pr-toggle-group {
    display: flex;
    gap: 0;
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 6px;
    overflow: hidden;
  }
  .pr-toggle {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted, #8A8A8A);
    background: transparent;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
  }
  .pr-toggle:hover { color: var(--white-bright, #F5F5F5); }
  .pr-toggle.is-active {
    color: var(--white-bright, #F5F5F5);
    background: linear-gradient(135deg, rgba(255,26,26,.16), rgba(240,189,48,.04));
    box-shadow: inset 0 0 0 1px rgba(255,26,26,.42);
  }
  .pr-select {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--white-bright, #F5F5F5);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%238A8A8A'><path d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
  }
  .pr-select:focus {
    outline: 2px solid var(--red-primary, #FF1A1A);
    outline-offset: 2px;
  }

  /* ============ POSITION TABS + SEARCH ============ */
  .row-pr-filters { display: flex; }
  .pr-filters {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
  }
  .pr-pos-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .pr-pos-tab {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted, #8A8A8A);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }
  .pr-pos-tab:hover { color: var(--white-bright, #F5F5F5); border-color: var(--gold-accent, #F0BD30); }
  .pr-pos-tab.is-active {
    color: var(--white-bright, #F5F5F5);
    background: linear-gradient(135deg, rgba(255,26,26,.16), rgba(240,189,48,.04));
    border-color: var(--red-primary, #FF1A1A);
    box-shadow: inset 0 0 0 1px rgba(255,26,26,.42), 0 0 12px rgba(255,26,26,.18);
  }
  /* Position color hints on active tabs */
  .pr-pos-tab[data-pos="QB"].is-active { border-color: var(--sns-pos-qb-text, #FF3B30); box-shadow: inset 0 0 0 1px rgba(255,59,48,.42), 0 0 12px rgba(255,59,48,.18); }
  .pr-pos-tab[data-pos="RB"].is-active { border-color: var(--sns-pos-rb-text, #FF6A00); box-shadow: inset 0 0 0 1px rgba(255,106,0,.42), 0 0 12px rgba(255,106,0,.18); }
  .pr-pos-tab[data-pos="WR"].is-active { border-color: var(--sns-pos-wr-text, #6aa9d7); box-shadow: inset 0 0 0 1px rgba(106,169,215,.42), 0 0 12px rgba(106,169,215,.18); }
  .pr-pos-tab[data-pos="TE"].is-active { border-color: var(--sns-pos-te-text, #7fc89a); box-shadow: inset 0 0 0 1px rgba(127,200,154,.42), 0 0 12px rgba(127,200,154,.18); }
  .pr-pos-tab[data-pos="K"].is-active  { border-color: var(--sns-pos-k-text, #b58cd6); box-shadow: inset 0 0 0 1px rgba(181,140,214,.42), 0 0 12px rgba(181,140,214,.18); }
  .pr-pos-tab[data-pos="DEF"].is-active { border-color: var(--gold-accent, #F0BD30); box-shadow: inset 0 0 0 1px rgba(240,189,48,.42), 0 0 12px rgba(240,189,48,.18); }

  .pr-search-wrap {
    position: relative;
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 360px;
    margin-left: auto;
  }
  .pr-search {
    width: 100%;
    font-family: var(--f-body, 'Inter', sans-serif);
    font-size: 16px;
    color: var(--white-bright, #F5F5F5);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 6px;
    padding: 9px 12px 9px 34px;
    transition: border-color 0.18s ease;
  }
  .pr-search::placeholder { color: var(--text-muted, #8A8A8A); }
  .pr-search:focus { outline: none; border-color: var(--red-primary, #FF1A1A); }
  .pr-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #8A8A8A);
    pointer-events: none;
  }

  /* ============ RANKINGS TABLE CARD ============ */
  .sn--c_prtable {
    background: linear-gradient(180deg, #0D0D0D 0%, #050505 100%);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
  }
  .sn--c_prtable .card-head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--gray-border, #2A2A2A);
  }
  .pr-player-count {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    letter-spacing: 0.12em;
    color: var(--white-bright, #F5F5F5);
  }

  /* ============ SKELETON LOADING ============ */
  .pr-skeleton {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
  }
  .pr-skel-row {
    height: 52px;
    background: linear-gradient(90deg,
      var(--black-soft, #111) 0%,
      rgba(255,255,255,0.04) 40%,
      var(--black-soft, #111) 80%
    );
    background-size: 200% 100%;
    animation: rankings-pr-shimmer 1.8s ease-in-out infinite;
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }
  .pr-skel-row:nth-child(odd) { animation-delay: 0.15s; }
  .pr-skeleton.is-hidden { display: none; }

  /* ============ TABLE ============ */
  .pr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pr-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--f-body, 'Inter', sans-serif);
    font-size: 16px;
    display: none;
  }
  .pr-table.is-visible { display: table; }

  .pr-table thead th {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted, #8A8A8A);
    text-transform: uppercase;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--gray-border, #2A2A2A);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: #0D0D0D;
    z-index: 2;
  }
  .pr-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.18s ease;
  }
  .pr-table thead th.sortable:hover { color: var(--white-bright, #F5F5F5); }
  .pr-table thead th.sortable::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid var(--text-muted, #8A8A8A);
    transition: transform 0.18s ease, border-top-color 0.18s ease;
  }
  .pr-table thead th.sortable.is-sorted::after {
    border-top-color: var(--gold-accent, #F0BD30);
  }
  .pr-table thead th.sortable.is-sorted.asc::after {
    transform: rotate(180deg);
  }
  .pr-table thead th.th-chk { width: 36px; text-align: center; }
  .pr-table thead th.th-rank { width: 44px; text-align: center; }
  .pr-table thead th.th-pos { width: 50px; }
  .pr-table thead th.th-team { width: 80px; }
  .pr-table thead th.th-gp { width: 40px; text-align: center; }
  .pr-table thead th.th-pts { width: 70px; text-align: right; }
  .pr-table thead th.th-ppg { width: 64px; text-align: right; }
  .pr-table thead th.th-trend { width: 60px; text-align: center; }
  .pr-table thead th.th-own { width: 60px; text-align: right; }

  /* ============ TABLE ROWS ============ */
  .pr-row {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s ease;
    cursor: pointer;
  }
  .pr-row:hover { background: rgba(255,26,26,0.05); }
  .pr-row.is-selected { background: rgba(255,26,26,0.08); }

  .pr-row td {
    padding: 10px 12px;
    vertical-align: middle;
    white-space: nowrap;
  }

  /* Tier separator rows */
  .pr-tier-row td {
    padding: 6px 12px;
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--white-bright, #F5F5F5);
    text-transform: uppercase;
    border-bottom: 2px solid var(--gold-accent, #F0BD30);
    background: rgba(240,189,48,0.04);
  }
  .pr-tier-row.tier-1 td { color: var(--red-primary, #FF1A1A); border-bottom-color: var(--red-primary, #FF1A1A); background: rgba(255,26,26,0.04); }
  .pr-tier-row.tier-2 td { color: var(--orange-accent, #FF6A00); border-bottom-color: var(--orange-accent, #FF6A00); background: rgba(255,106,0,0.03); }
  .pr-tier-row.tier-3 td { color: var(--white-bright, #F5F5F5); border-bottom-color: var(--gold-accent, #F0BD30); background: rgba(240,189,48,0.03); }
  .pr-tier-row.tier-4 td { color: var(--text-muted, #8A8A8A); border-bottom-color: var(--text-muted, #8A8A8A); background: rgba(138,138,138,0.03); }

  /* Cell specifics */
  .td-chk { text-align: center; }
  .td-chk input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--red-primary, #FF1A1A);
    cursor: pointer;
  }
  .td-rank {
    text-align: center;
    font-family: var(--f-display, 'Graduate', sans-serif);
    font-size: 20px;
    letter-spacing: 0.02em;
    color: var(--white-bright, #F5F5F5);
  }
  .td-rank.rank-top5 { color: var(--white-bright, #F5F5F5); }

  .td-player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
  }
  .pr-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A1A1A, #0A0A0A);
    border: 1px solid var(--gray-border, #2A2A2A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display, 'Graduate', sans-serif);
    font-size: 16px;
    color: var(--text-muted, #8A8A8A);
    flex-shrink: 0;
  }
  .pr-player-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .pr-player-name {
    font-family: var(--f-body, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 16px;
    color: var(--white-bright, #F5F5F5);
    line-height: 1.3;
  }
  .pr-player-school {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    letter-spacing: 0.08em;
    color: var(--text-muted, #8A8A8A);
    line-height: 1.2;
  }

  /* Position pill */
  .td-pos .pos-pill {
    display: inline-block;
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    border-radius: 3px;
  }
  .pos-pill.pos-qb { color: var(--sns-pos-qb-text, #FF3B30); background: var(--sns-pos-qb-bg, rgba(255,26,26,.18)); }
  .pos-pill.pos-rb { color: var(--sns-pos-rb-text, #FF6A00); background: var(--sns-pos-rb-bg, rgba(255,106,0,.18)); }
  .pos-pill.pos-wr { color: var(--sns-pos-wr-text, #6aa9d7); background: var(--sns-pos-wr-bg, rgba(90,170,220,.15)); }
  .pos-pill.pos-te { color: var(--sns-pos-te-text, #7fc89a); background: var(--sns-pos-te-bg, rgba(120,200,150,.14)); }
  .pos-pill.pos-k  { color: var(--sns-pos-k-text, #b58cd6);  background: var(--sns-pos-k-bg, rgba(180,140,220,.14)); }
  .pos-pill.pos-def { color: var(--white-bright, #F5F5F5); background: rgba(240,189,48,.14); }

  .td-team {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    letter-spacing: 0.08em;
    color: var(--text-muted, #8A8A8A);
  }
  .td-gp { text-align: center; font-family: var(--f-numeral, 'JetBrains Mono', monospace); font-size: 16px; color: var(--text-muted, #8A8A8A); }
  .td-pts {
    text-align: right;
    font-family: var(--f-numeral, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    color: var(--white-bright, #F5F5F5);
  }
  .td-ppg {
    text-align: right;
    font-family: var(--f-numeral, 'JetBrains Mono', monospace);
    font-size: 16px;
    color: var(--text-muted, #8A8A8A);
  }
  .td-trend { text-align: center; }
  .trend-up { color: var(--sns-trend-up, #5ad07a); }
  .trend-down { color: var(--sns-trend-down, #FF3B30); }
  .trend-flat { color: var(--text-muted, #8A8A8A); }
  .trend-arrow {
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }
  .td-own {
    text-align: right;
    font-family: var(--f-numeral, 'JetBrains Mono', monospace);
    font-size: 16px;
    color: var(--text-muted, #8A8A8A);
  }

  /* ============ LOAD MORE ============ */
  .pr-load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--gray-border, #2A2A2A);
  }
  .pr-load-more {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--white-bright, #F5F5F5);
    background: linear-gradient(180deg, #FF2A2A 0%, #C40000 100%);
    border: none;
    border-radius: 6px;
    padding: 10px 28px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,26,26,.45), inset 0 1px 0 rgba(255,255,255,.18);
    transition: box-shadow 0.18s ease, transform 0.15s ease;
  }
  .pr-load-more:hover {
    box-shadow: 0 6px 22px rgba(255,0,0,0.65), inset 0 1px 0 rgba(255,255,255,.25);
    transform: translateY(-1px);
  }
  .pr-load-more:active { transform: scale(0.98); }
  .pr-load-more.is-hidden { display: none; }
  .pr-showing {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    letter-spacing: 0.12em;
    color: var(--text-muted, #8A8A8A);
  }

  /* ============ COMPARISON BAR ============ */
  .pr-compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: linear-gradient(180deg, #181818 0%, #0a0a0a 100%);
    border-top: 2px solid var(--red-primary, #FF1A1A);
    box-shadow: 0 -6px 24px rgba(255,0,0,0.25), 0 -4px 14px rgba(0,0,0,0.6);
    padding: 12px 20px;
    animation: rankings-pr-compare-slide-up 0.25s cubic-bezier(0.32,0.72,0,1);
  }
  .pr-compare-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .pr-compare-label {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--white-bright, #F5F5F5);
    white-space: nowrap;
  }
  .pr-compare-players {
    display: flex;
    gap: 12px;
    flex: 1;
    overflow-x: auto;
  }
  .pr-compare-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 6px;
    padding: 6px 12px;
    white-space: nowrap;
  }
  .pr-compare-chip-name {
    font-family: var(--f-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--white-bright, #F5F5F5);
  }
  .pr-compare-chip-pos {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    letter-spacing: 0.1em;
  }
  .pr-compare-chip-remove {
    font-size: 16px;
    color: var(--text-muted, #8A8A8A);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
  }
  .pr-compare-chip-remove:hover { color: var(--red-primary, #FF1A1A); }
  .pr-compare-btn {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--white-bright, #F5F5F5);
    background: linear-gradient(180deg, #FF2A2A 0%, #C40000 100%);
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,26,26,.45);
    white-space: nowrap;
  }
  .pr-compare-btn:hover { box-shadow: 0 6px 22px rgba(255,0,0,0.65); }
  .pr-compare-clear {
    font-size: 22px;
    color: var(--text-muted, #8A8A8A);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }
  .pr-compare-clear:hover { color: var(--red-primary, #FF1A1A); }

  /* ============ COMPARISON MODAL ============ */
  .pr-compare-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pr-compare-modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
  }
  .pr-compare-modal-body {
    position: relative;
    background: linear-gradient(180deg, #0D0D0D 0%, #050505 100%);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 0 32px rgba(255,0,0,0.5), 0 16px 56px rgba(0,0,0,0.75);
    animation: rankings-pr-modal-in 0.3s cubic-bezier(0.2,0.8,0.4,1);
  }
  .pr-compare-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--gray-border, #2A2A2A);
  }
  .pr-compare-modal-close {
    font-size: 28px;
    color: var(--text-muted, #8A8A8A);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }
  .pr-compare-modal-close:hover { color: var(--white-bright, #F5F5F5); }
  .pr-compare-modal-content {
    padding: 20px;
  }

  /* Comparison grid */
  .pr-cmp-grid {
    display: grid;
    gap: 1px;
    background: var(--gray-border, #2A2A2A);
    border-radius: 8px;
    overflow: hidden;
  }
  .pr-cmp-grid.cols-2 { grid-template-columns: 120px 1fr 1fr; }
  .pr-cmp-grid.cols-3 { grid-template-columns: 120px 1fr 1fr 1fr; }
  .pr-cmp-cell {
    background: var(--black-soft, #111);
    padding: 10px 14px;
    display: flex;
    align-items: center;
  }
  .pr-cmp-cell.is-header {
    background: #0A0A0A;
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted, #8A8A8A);
  }
  .pr-cmp-cell.is-label {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted, #8A8A8A);
  }
  .pr-cmp-cell.is-best {
    color: var(--white-bright, #F5F5F5);
    font-weight: 700;
  }
  .pr-cmp-name {
    font-family: var(--f-body, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 16px;
    color: var(--white-bright, #F5F5F5);
  }
  .pr-cmp-val {
    font-family: var(--f-numeral, 'JetBrains Mono', monospace);
    font-size: 16px;
    color: var(--white-bright, #F5F5F5);
  }

  /* ============ MOBILE RESPONSIVE ============ */
  @media (max-width: 880px) {
    .pr-controls { gap: 10px; }
    .pr-filters { flex-direction: column; gap: 10px; }
    .pr-search-wrap { max-width: 100%; margin-left: 0; flex: 1 1 100%; }
    .pr-pos-tabs { gap: 4px; }
    .pr-pos-tab { padding: 6px 10px; font-size: 16px; }

    .sn--c_prheader { padding: 16px 12px 14px; }
    .pr-page-title { font-size: 28px; }

    .sn--c_prtable .card-head { padding: 12px 12px 10px; }

    /* Hide less essential columns on mobile */
    .th-gp, .td-gp,
    .th-own, .td-own,
    .th-team, .td-team { display: none; }

    .pr-table thead th { padding: 8px 8px; font-size: 16px; }
    .pr-row td { padding: 8px 8px; }
    .td-rank { font-size: 16px; }
    .pr-avatar { width: 28px; height: 28px; font-size: 16px; }
    .pr-player-name { font-size: 16px; }
    .pr-player-school { font-size: 16px; }
    .td-pts { font-size: 16px; }

    .pr-compare-inner { flex-wrap: wrap; gap: 8px; }
    .pr-compare-players { gap: 6px; }
    .pr-compare-chip { padding: 4px 8px; }

    .pr-cmp-grid.cols-2 { grid-template-columns: 80px 1fr 1fr; }
    .pr-cmp-grid.cols-3 { grid-template-columns: 80px 1fr 1fr 1fr; }
    .pr-cmp-cell { padding: 8px 10px; }
  }

  @media (max-width: 480px) {
    .pr-pos-tab { padding: 5px 8px; font-size: 16px; letter-spacing: 0.10em; }
    .pr-toggle { padding: 6px 10px; font-size: 16px; }

    /* Stack player name and hide trends on tiny screens */
    .th-trend, .td-trend { display: none; }
    .th-ppg, .td-ppg { display: none; }
    .td-player { min-width: 120px; }
  }

  /* ============ REDUCED MOTION ============ */
  @media (prefers-reduced-motion: reduce) {
    .pr-skel-row { animation: none; }
    .pr-compare-bar { animation: none; }
    .pr-compare-modal-body { animation: none; }
    .pr-row { transition: none; }
  }

  /* ============ FOCUS VISIBLE ============ */
  .pr-pos-tab:focus-visible,
  .pr-toggle:focus-visible,
  .pr-load-more:focus-visible,
  .pr-compare-btn:focus-visible {
    outline: 2px solid var(--red-primary, #FF1A1A);
    outline-offset: 2px;
  }

  /* ============ CARD SHARED (from style.base.css pattern) ============ */
  .card {
    background: linear-gradient(180deg, #0D0D0D 0%, #050505 100%);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px;
  }
  .card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 18px 20px 14px;
  }
  .card-eyebrow {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--red-primary, #FF1A1A);
    text-transform: uppercase;
  }
  .card-title {
    font-family: var(--f-display, 'Graduate', sans-serif);
    font-size: 26px;
    letter-spacing: 0.04em;
    line-height: 1.05;
    color: var(--white-bright, #F5F5F5);
    margin: 0;
  }
  .card-link {
    margin-left: auto;
  }
}

/* keyframes hoisted to top level + route-prefixed (were @layer-page in rankings/style.css) */
@keyframes rankings-pr-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes rankings-pr-compare-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes rankings-pr-modal-in {
  from { transform: scale(0.92) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /leagues folded from leagues/style.css (per-page CSS folded)
   Route-scoped under :is(html[data-route="/leagues"],html[data-route="/my-leagues"])
   (static attr, FOUC-safe). leagues/style.css is SHARED by both routes, so the
   scope wraps BOTH via :is(). No :root vars present (none to scope); --f-display
   not present (dropped n/a). No page @keyframes (animations inherited from base).
   @container container-name route-prefixed (leagues-) to avoid cross-route collision.
   No bare element/universal reset rules present — nothing dropped.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
:is(html[data-route="/leagues"],html[data-route="/my-leagues"]){

/* ============ LEAGUE SELECTOR — full-width row of league avatar cards ============ */
.row-mly-selector { display: grid; }
.sn--c_selector .card-head { padding-bottom: 16px; }
.lg-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.lg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, var(--black-soft) 0%, var(--black-card) 100%);
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  min-height: 168px;
}
.lg-card:hover {
  transform: translateY(-3px);
  border-color: var(--red-primary);
  box-shadow: 0 6px 22px rgba(255, 26, 26, 0.32);
}
.lg-card.is-active {
  border-color: var(--red-primary);
  background: linear-gradient(135deg, rgba(255, 26, 26, 0.10), rgba(240, 189, 48, 0.04)), var(--black-card);
  box-shadow: inset 0 0 0 1px rgba(255, 26, 26, 0.35), 0 0 18px rgba(255, 26, 26, 0.20);
}
.lg-badge-active {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 7px;
  font-family: var(--f-display); font-size: 16px; letter-spacing: .14em;
  background: var(--red-primary); color: #000;
  border-radius: 3px;
}
.lg-helmet {
  width: 64px; height: 64px;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.lg-card.is-active .lg-helmet {
  filter: drop-shadow(0 0 14px rgba(255, 26, 26, 0.5)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.lg-name {
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: .03em;
  color: var(--white-bright);
  line-height: 1.1;
}
.lg-meta {
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--gray-light);
  letter-spacing: .08em;
}
.lg-record {
  font-family: var(--f-display);
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: .04em;
  margin-top: auto;
}

/* ============ 3-COL ROWS ============ */
.row-mly-3col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.8fr);
  gap: var(--col-gap);
  align-items: stretch;
}
.row-mly-3col-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: stretch;
}

/* ============ STANDINGS LIST ============ */
.standings-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.st-row {
  display: grid;
  grid-template-columns: 28px 36px 1fr 56px 64px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s ease, transform .15s ease, border-color .15s ease;
  min-height: 52px;
}
.st-row + .st-row { border-top: 1px solid var(--hairline); border-radius: 0; }
.st-row.st-head {
  cursor: default; padding: 6px 12px; min-height: 28px;
  border-bottom: 1px solid var(--hairline-2);
  background: transparent;
}
.st-rank-h, .st-name-h, .st-record-h, .st-pf-h {
  font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; color: var(--gray-light); text-transform: uppercase;
}
.st-name-h { text-align: left; }
.st-record-h, .st-pf-h { text-align: right; }
.st-row:hover {
  background: rgba(255, 26, 26, 0.06);
  transform: translateX(2px);
}
.st-row.is-you {
  background: linear-gradient(90deg, rgba(255, 26, 26, 0.12), transparent 70%);
  border-color: rgba(255, 26, 26, 0.35);
}
.st-rank { font-family: var(--f-display); font-size: 22px; color: #FFFFFF; text-align: center; }
.st-row.is-you .st-rank { color: var(--red-bright); }
.st-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--black-pure); border: 1px solid var(--hairline-2); }
.st-name { font-family: var(--f-body); font-size: 16px; font-weight: 600; color: var(--white-bright); line-height: 1.3; display: flex; align-items: center; gap: 6px; }
.you-tag { font-family: var(--f-display); font-size: 16px; letter-spacing: .14em; background: var(--red-primary); color: #000; padding: 2px 5px; border-radius: 2px; font-style: normal; }
.st-record { font-family: var(--f-display); font-size: 19px; color: #FFFFFF; letter-spacing: .02em; text-align: right; }
.st-pf { font-family: var(--f-numeral, var(--f-body)); font-weight: 600; font-size: 16px; color: var(--gray-light); text-align: right; }

.card-foot { padding-top: 10px; flex: 0 0 auto; }
.paginator { font-family: var(--f-mono); font-size: 16px; color: var(--gray-light); letter-spacing: .14em; }

/* ============ MATCHUPS — VS centered, 50/50 (kept from v1.1) ============ */
.mu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.mu-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "ta vs tb" "sb sb sb";
  align-items: center;
  column-gap: 14px; row-gap: 8px;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, var(--black-soft) 0%, var(--black-card) 100%);
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.mu-row:hover { border-color: var(--red-primary); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255, 26, 26, 0.2); }
.mu-row.is-you-match { border-color: rgba(255, 26, 26, 0.5); background: linear-gradient(90deg, rgba(255, 26, 26, 0.10), var(--black-soft) 30%, var(--black-soft) 70%, rgba(255, 26, 26, 0.10)); }
.mu-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mu-team-a { grid-area: ta; justify-self: end; flex-direction: row-reverse; text-align: right; }
.mu-team-b { grid-area: tb; justify-self: start; flex-direction: row; text-align: left; }
.mu-logo { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; background: var(--black-pure); border: 1px solid var(--hairline-2); flex: 0 0 36px; }
.mu-name { font-family: var(--f-body); font-size: 18px; font-weight: 600; color: var(--white-bright); line-height: 1.25; display: inline-flex; align-items: center; gap: 6px; ;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-vs { grid-area: vs; font-family: var(--f-display); font-size: 24px; letter-spacing: .12em; color: var(--red-bright); padding: 0 10px; justify-self: center; }
.mu-score-bar { grid-area: sb; display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 8px; border-top: 1px dashed var(--hairline); }
.mu-score-a, .mu-score-b { font-family: var(--f-display); font-size: 28px; color: #FFFFFF; line-height: 1; }
.mu-score-sep { font-family: var(--f-display); font-size: 22px; color: var(--gray-light); }
.mu-tag { font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; color: var(--gray-light); padding: 3px 8px; border: 1px solid var(--hairline-2); border-radius: 3px; margin-left: 8px; }
.mu-tag.mu-tag-w { color: #6bd083; border-color: rgba(107, 208, 131, 0.4); background: rgba(107, 208, 131, 0.08); }

/* ============ LEAGUE RULES ============ */
.rules-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.rule-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--black-soft);
  border: 1px solid var(--hairline-2);
  transition: border-color .2s ease, transform .15s ease, background .2s ease;
  min-height: 56px;
}
.rule-row:hover { border-color: var(--red-primary); transform: translateX(2px); background: var(--bg-surface-3, #1A1A1A); }
.rule-ic { font-size: 22px; text-align: center; }
.rule-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rule-lbl { font-family: var(--f-body); font-size: 16px; font-weight: 600; color: var(--white-bright); line-height: 1.3; }
.rule-desc { font-family: var(--f-body); font-size: 16px; color: var(--gray-light); line-height: 1.4; }
.rule-val { font-family: var(--f-display); font-size: 16px; letter-spacing: .04em; color: #FFFFFF; white-space: nowrap; }

/* ============ MY LINEUP — full-width row ============ */
.row-mly-lineup { display: grid; grid-template-columns: 1fr; }
.lu-ovr-wrap { font-family: var(--f-mono); font-size: 16px; color: var(--gray-light); letter-spacing: .12em; margin-left: 8px; }
.lu-ovr-wrap .lu-ovr { color: #FFFFFF; font-family: var(--f-display); font-size: 22px; font-style: normal; margin-left: 4px; letter-spacing: .04em; }
.lu-list-h {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
.lu-slot {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px;
  background: var(--black-soft);
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s ease, transform .15s ease, background .2s ease;
}
.lu-slot:hover { border-color: var(--red-primary); transform: translateY(-2px); background: var(--bg-surface-3, #1A1A1A); }
.lu-pos { font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; color: var(--red-bright); font-weight: 700; }
.lu-pl { font-family: var(--f-body); font-size: 16px; font-weight: 600; color: var(--white-bright); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-tm { font-family: var(--f-mono); font-size: 16px; letter-spacing: .1em; color: #FFFFFF; text-transform: uppercase; }

/* ============ RECENT ACTIVITY ============ */
.act-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.act-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--black-soft);
  border: 1px solid var(--hairline-2);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s ease, transform .15s ease, background .2s ease;
  min-height: 58px;
}
.act-row:hover { border-color: var(--red-primary); transform: translateX(2px); background: var(--bg-surface-3, #1A1A1A); }
.act-ic { font-size: 22px; text-align: center; }
.act-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-line { font-family: var(--f-body); font-size: 16px; font-weight: 500; color: var(--white-bright); line-height: 1.4; }
.act-line strong { color: #FFFFFF; margin-right: 4px; font-weight: 700; }
.act-meta { font-family: var(--f-mono); font-size: 16px; color: var(--gray-light); letter-spacing: .04em; }
.act-time { font-family: var(--f-display); font-size: 16px; letter-spacing: .12em; color: var(--gray-light); }

/* ============ INVITES ============ */
.inv-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.inv-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 14px;
  background: var(--black-soft);
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  transition: border-color .2s ease, transform .15s ease;
}
.inv-row:hover { border-color: var(--red-primary); transform: translateY(-1px); }
.inv-helmet { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; background: var(--black-pure); border: 1px solid var(--hairline-2); }
.inv-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inv-lg { font-family: var(--f-display); font-size: 20px; letter-spacing: .04em; color: var(--white-bright); line-height: 1.1; }
.inv-meta { font-family: var(--f-mono); font-size: 16px; color: var(--gray-light); letter-spacing: .04em; margin-bottom: 6px; }
.inv-actions { display: flex; gap: 8px; }
.btn-mini-join { padding: 10px 14px !important; font-size: 16px !important; flex: 1 1 auto; }
.btn-mini-decl { padding: 10px 12px !important; font-size: 16px !important; flex: 0 0 auto; }

/* ============ TRANSFER PORTAL ============ */
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1 1 auto; }
.tp-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  background: var(--black-soft);
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s ease, transform .15s ease, background .2s ease;
  min-height: 96px;
}
.tp-btn:hover { background: var(--bg-surface-3, #1A1A1A); border-color: var(--red-primary); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(255, 26, 26, 0.2); }
.tp-ic { font-size: 28px; }
.tp-lbl { font-family: var(--f-body); font-size: 16px; font-weight: 600; color: var(--white-bright); letter-spacing: .04em; text-align: center; line-height: 1.3; }

/* ============ RESPONSIVE — edge-to-edge mobile (mirrors dashboard pattern) ============ */
@media (max-width: 880px) {
  .lg-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .row-mly-3col, .row-mly-3col-bottom, .row-mly-lineup { grid-template-columns: 1fr; }
  .lu-list-h { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .mu-name { font-size: 16px; }
  .mu-vs { font-size: 20px; padding: 0 6px; }
}
@media (max-width: 600px) {
  .lg-row { grid-template-columns: 1fr 1fr; }
  .lu-list-h { grid-template-columns: 1fr 1fr; }
  .tp-grid { grid-template-columns: 1fr 1fr; }
  .st-row { grid-template-columns: 24px 28px 1fr auto; gap: 8px; padding: 10px 8px; }
  .st-pf, .st-pf-h { display: none; }
  .st-name { font-size: 16px; }
  .mu-row { padding: 12px; }
  .mu-logo { width: 28px; height: 28px; flex: 0 0 28px; }
  .mu-name { font-size: 16px; }
  .mu-score-a, .mu-score-b { font-size: 22px; }
  .rule-row { grid-template-columns: 28px 1fr; grid-template-rows: auto auto; grid-template-areas: "ic body" "ic val"; }
  .rule-ic { grid-area: ic; align-self: start; font-size: 18px; }
  .rule-body { grid-area: body; }
  .rule-val { grid-area: val; justify-self: start; font-size: 16px; }
}
@media (max-width: 360px) {
  .lg-row { grid-template-columns: 1fr; }
  .lu-list-h { grid-template-columns: 1fr; }
  .tp-grid { grid-template-columns: 1fr; }
}

/* ============ v2.1: player avatars in lineup slots ============ */
.lu-slot {
  position: relative;
  padding-top: 50px;          /* room for avatar at top */
  text-align: center;
}
.lu-av {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--hairline-2);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  transition: transform .2s ease, border-color .2s ease, filter .2s ease;
}
.lu-slot:hover .lu-av {
  border-color: var(--red-primary);
  filter: drop-shadow(0 0 8px rgba(255,26,26,0.5));
  transform: translateX(-50%) translateY(-1px);
}
.lu-pos, .lu-pl, .lu-tm { text-align: center; }
.lu-pl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ v2.1: cursor + accessibility for data-href rows ============ */
[data-href] { cursor: pointer; }
[data-href]:focus-visible { outline: 2px solid var(--gold-accent); outline-offset: 2px; }

/* ============ SEASON SANDBOX CTA — discover the animated demo ============ */
.row-mly-sandbox-cta { display: grid; }
.sn--c_sandbox-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(255, 53, 82, 0.10), rgba(255, 186, 46, 0.08));
  border: 1px solid rgba(255, 186, 46, 0.30);
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  color: inherit;
}
.sn--c_sandbox-cta:hover,
.sn--c_sandbox-cta:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 186, 46, 0.65);
  box-shadow: 0 10px 28px rgba(255, 186, 46, 0.18);
}
.sandbox-cta-text .card-eyebrow { color: #ffba2e; letter-spacing: .22em; }
.sandbox-cta-text .card-title { margin: 6px 0 4px; }
.sandbox-cta-sub { margin: 0; color: rgba(255, 255, 255, 0.70); font-size: 16px; line-height: 1.45; }
.sandbox-cta-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #ff3552, #c01e3a);
  color: #fff; font-size: 20px;
  box-shadow: 0 6px 18px rgba(255, 53, 82, 0.40);
  transition: transform .2s ease, filter .2s ease;
}
.sn--c_sandbox-cta:hover .sandbox-cta-play { transform: scale(1.06); filter: brightness(1.08); }
@media (max-width: 720px) {
  .sn--c_sandbox-cta { grid-template-columns: 1fr; text-align: left; }
  .sandbox-cta-play { width: 44px; height: 44px; font-size: 16px; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .sn--c_sandbox-cta, .sandbox-cta-play { transition: none !important; transform: none !important; }
}

/* ── JOIN VIA INVITE CODE (GAP-3 / Forgejo #504) ───────────────────── */
.row-mly-joinby { display: block; }
.sn--c_joinby { padding-bottom: 16px; }
.join-by-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px 16px; }
.jbc-input {
  flex: 0 1 200px;
  min-width: 160px;
  background: #070707;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  color: #F5F5F5;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 11px 14px;
}
.jbc-input::placeholder { color: #5A5A5A; letter-spacing: 0.18em; }
.jbc-input:focus { outline: none; border-color: #FF1A1A; box-shadow: 0 0 0 2px rgba(255, 26, 26, 0.18); }
.jbc-btn { flex: 0 0 auto; padding: 11px 22px; cursor: pointer; }
.jbc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.jbc-msg { font-size: 16px; color: #8A8A8A; flex: 1 1 220px; min-width: 0; }
.jbc-msg-ok { color: #3dba6e; }
.jbc-msg-error { color: #FFFFFF; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) {
  .join-by-code { padding: 12px 14px 14px; }
  .jbc-input { flex: 1 1 100%; }
  .jbc-btn { flex: 1 1 100%; }
}

/* ---------- Phase 9 (Pat, 2026-05-22): My Leagues page polish ---------- */
/* 9a: hide the hero banner and the live game ticker on this page only. */
body .hero.sn--c_hero, body .scoreticker.sn--c_scoreticker { display: none !important; }
/* 9b: side-by-side SIMULATE FULL SEASON + JOIN VIA INVITE CODE. */
.row-mly-cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row-mly-cta-pair > .card { min-height: 0; }
@media (max-width: 720px) { .row-mly-cta-pair { grid-template-columns: 1fr; } }

/* ---------- Phase 10 (Pat, 2026-05-22): standings + matchups polish ---------- */
/* 10a: fix-width W-L and PF/PA columns so they align across rows; stack PF over PA. */
.sn--c_standings .st-row { grid-template-columns: 28px 32px 1fr 64px 72px; gap: 10px; align-items: center; }
.sn--c_standings .st-record, .sn--c_standings .st-record-h { text-align: center; font-variant-numeric: tabular-nums; }
.sn--c_standings .st-pf-h, .sn--c_standings .st-pts { text-align: right; }
.sn--c_standings .st-pts { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; gap: 0; }
.sn--c_standings .st-pts .st-pf { font-family: var(--f-numeral); font-size: 16px; color: var(--white-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.sn--c_standings .st-pts .st-pa { font-family: var(--f-numeral); font-size: 16px; color: var(--gray-light); font-variant-numeric: tabular-nums; border-top: 1px solid var(--hairline); padding-top: 2px; min-width: 48px; text-align: right; }
/* 10b: matchup rows — icon above name; left side name+score-right, right side score-left+name. */
.sn--c_matchups .mu-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px 8px; }
.sn--c_matchups .mu-team-a { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 14px; }
.sn--c_matchups .mu-team-b { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 14px; }
.sn--c_matchups .mu-team-stack { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.sn--c_matchups .mu-team-stack .mu-logo { width: 36px; height: 36px; border-radius: 50%; background: var(--white-bright); }
.sn--c_matchups .mu-team-stack .mu-name { font-size: 16px; line-height: 1.2; white-space: nowrap; text-align: center; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.sn--c_matchups .mu-score { font-family: var(--f-display); font-size: 26px; color: #FFFFFF; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sn--c_matchups .mu-vs { color: var(--white-bright); font-weight: 600; font-size: 16px; letter-spacing: .15em; font-family: var(--f-mono); }

/* ============================================================
   DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER  (Issue #762, FLUID agent)
   ------------------------------------------------------------
   Appended last. CONSUMES contract vars (--fs-fluid-*, --space-fluid-*,
   --container-fluid) from tokens.css (Tokens agent) with inline clamp()
   fallbacks of the same intent, so correct regardless of PR merge order.
   tokens.css is not edited here.

   Patterns: Utopia.fyi fluid type/space (CC-BY); CSS-Tricks "Modern
   Fluid Typography Using CSS Clamp"; MDN container queries (CC-BY-SA).
   Range 344→2160px; rem base + vw slope preserves zoom (WCAG 1.4.4).

   Highest-value change: the fixed 5-col league grid and 10-col lineup
   grid become repeat(auto-fit, minmax(...)) so they reflow by width
   instead of stepping at 880/600/360px. Container queries make the
   league-card and lineup-slot type respond to their own width.
   ============================================================ */

/* League selector: auto-fit replaces the 5→auto-fit@880→2col@600→1col
   ladder. minmax floor 150px keeps a card legible at 344px. */
.lg-row{ grid-template-columns: repeat(auto-fit, minmax(min(9.375rem, 100%), 1fr)); }
.lg-card{ container-type: inline-size; container-name: leagues-lgcard; }
.lg-name{ font-size: var(--fs-fluid-h2, clamp(1.25rem, 1.18rem + 0.27vw, 1.375rem)); } /* 20 → 22px */
@container leagues-lgcard (max-width: 9rem){ .lg-name{ font-size: 1.125rem; } }

/* Lineup: 10 fixed columns → auto-fit so slots wrap by width. */
.lu-list-h{ grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 100%), 1fr)); }

/* Names / records / scores: fluid clamps instead of per-breakpoint px. */
.st-name{ font-size: var(--fs-fluid-h3, clamp(0.9375rem, 0.9rem + 0.18vw, 1rem)); }  /* 15 → 16px */
.st-rank{ font-size: var(--fs-fluid-h2, clamp(1.25rem, 1.18rem + 0.27vw, 1.375rem)); } /* 20 → 22px */
.mu-name{ font-size: var(--fs-fluid-h3, clamp(0.875rem, 0.73rem + 0.7vw, 1.125rem)); } /* 14 → 18px */
.mu-vs{ font-size: var(--fs-fluid-h2, clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem)); }       /* 20 → 24px */
.mu-score-a, .mu-score-b{ font-size: var(--fs-fluid-h1, clamp(1.375rem, 1.13rem + 1.1vw, 1.75rem)); } /* 22 → 28px */

/* ============================================================
   END DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER
   ============================================================ */
}
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /leagues-new folded from leagues/new/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/leagues/new"] (static attr, FOUC-safe).
   Resets dropped (none present); --f-display dropped (none present); no ex-:root
   vars present; page keyframes route-prefixed (leagues-new-) to avoid
   cross-route collision. No @container queries present.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/leagues/new"]{

  /* ── Layout ─────────────────────────────────────────────────────────── */
  .lcf-row { grid-template-columns: 1fr; }

  .lcf-card {
    max-width: 760px;
    width: 100%;
    margin: 24px auto;
    /* Suppress the global card:hover lift — this is a form card, not a nav card */
    transition: none;
  }
  .lcf-card:hover {
    transform: none;
    border-color: var(--gray-border);
    box-shadow: 0 0 0 1px var(--hairline-2);
  }

  .lcf-head {
    border-bottom: 1px solid var(--hairline-2);
    margin-bottom: 24px;
  }

  /* ── Section labels ─────────────────────────────────────────────────── */
  .lcf-section-label {
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .14em;
    color: #FFFFFF;
    border-bottom: 1px solid var(--hairline-2);
    padding-bottom: 8px;
    margin: 24px 0 16px;
  }

  /* ── Field rows ─────────────────────────────────────────────────────── */
  .lcf-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .lcf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* ── Labels, inputs, selects ────────────────────────────────────────── */
  .lcf-label {
    font-family: var(--f-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white-bright);
  }

  .lcf-req { color: var(--red-bright); margin-left: 2px; }

  .lcf-hint {
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--text-muted);
    letter-spacing: .04em;
  }

  .lcf-input {
    background: var(--bg-surface-2);
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    padding: 11px 14px;
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--white-bright);
    min-height: 44px;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
  }
  .lcf-input::placeholder { color: var(--text-faint); }
  .lcf-input:focus {
    outline: none;
    border-color: var(--red-primary);
    box-shadow: 0 0 0 3px rgba(255, 26, 26, .18);
  }
  .lcf-input:invalid:not(:placeholder-shown) {
    border-color: var(--red-bright);
  }

  .lcf-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238A8A8A' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
    cursor: pointer;
  }
  .lcf-select option { background: var(--black-card); color: var(--white-bright); }

  /* ── Radio card buttons ─────────────────────────────────────────────── */
  .lcf-radio-group {
    display: flex;
    gap: 10px;
  }

  .lcf-radio-card {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-surface-2);
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    min-height: 44px;
  }
  .lcf-radio-card:hover {
    border-color: var(--red-primary);
    background: var(--bg-surface-3);
  }
  .lcf-radio-card.is-selected {
    border-color: var(--red-primary);
    background: rgba(255, 26, 26, .08);
    box-shadow: 0 0 0 1px var(--red-primary);
  }

  .lcf-radio-input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-border);
    border-radius: 50%;
    flex: 0 0 20px;
    margin-top: 2px;
    cursor: pointer;
    transition: border-color .15s ease;
    background: transparent;
  }
  .lcf-radio-input:checked {
    border-color: var(--red-primary);
    background: var(--red-primary);
    box-shadow: inset 0 0 0 3px var(--bg-surface-2);
  }
  .lcf-radio-input:focus-visible {
    outline: 2px solid var(--red-bright);
    outline-offset: 2px;
  }

  .lcf-radio-body { display: flex; flex-direction: column; gap: 2px; }

  .lcf-radio-title {
    font-family: var(--f-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--white-bright);
  }
  .lcf-radio-desc {
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.4;
  }

  /* ── Draft scheduling note ──────────────────────────────────────────── */
  .lcf-draft-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 12px 14px;
    background: rgba(240, 189, 48, .06);
    border: 1px solid rgba(240, 189, 48, .2);
    border-radius: 8px;
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.5;
  }
  .lcf-draft-note-icon { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }

  /* ── Error banner ───────────────────────────────────────────────────── */
  .lcf-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: rgba(255, 26, 26, .10);
    border: 1px solid rgba(255, 26, 26, .4);
    border-radius: 8px;
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--red-bright);
    line-height: 1.5;
  }
  .lcf-error[hidden] { display: none; }
  .lcf-error-icon { flex: 0 0 auto; font-size: 16px; margin-top: 1px; }

  /* ── Success panel ──────────────────────────────────────────────────── */
  .lcf-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 32px 24px;
  }
  .lcf-success[hidden] { display: none; }

  .lcf-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a4a1a, #0d2e0d);
    border: 2px solid #2a7a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #4cde4c;
    line-height: 1;
  }

  .lcf-success-title {
    font-family: var(--f-display);
    font-size: 32px;
    letter-spacing: .06em;
    color: var(--white-bright);
    margin: 0;
  }

  .lcf-success-sub {
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--text-muted);
    margin: 0;
    max-width: 420px;
    line-height: 1.6;
  }

  .lcf-invite-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .lcf-invite-wrap[hidden] { display: none; }

  .lcf-invite-label {
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .14em;
    color: #FFFFFF;
  }

  .lcf-invite-code {
    font-family: var(--f-mono);
    font-size: 24px;
    letter-spacing: .2em;
    color: var(--white-bright);
    background: var(--bg-surface-2);
    border: 1px solid var(--hairline-2);
    border-radius: 8px;
    padding: 10px 24px;
    user-select: all;
  }

  .lcf-go-btn { min-width: 200px; margin-top: 8px; }
  .lcf-success-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
  .lcf-import-btn { min-width: 240px; }
  .lcf-import-btn, .lcf-success-actions .lcf-go-btn { margin-top: 0; }

  /* ── Submit button spinner ──────────────────────────────────────────── */
  .lcf-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: leagues-new-lcf-spin .7s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
  }
  .lcf-spinner[hidden] { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .lcf-spinner { animation-duration: 2s; }
    .lcf-radio-card,
    .lcf-input,
    .lcf-radio-input { transition: none; }
  }

  /* ── #689/#690: custom scoring + roster, conferences, pool, dynasty ───── */
  .lcf-custom-scoring,
  .lcf-custom-roster {
    margin: -4px 0 8px;
    padding: 14px;
    background: var(--bg-surface-2);
    border: 1px solid var(--hairline-2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lcf-custom-scoring[hidden],
  .lcf-custom-roster[hidden],
  .lcf-keeper-count[hidden],
  .lcf-commish-invite[hidden],
  .lcf-import-pre[hidden],
  .lcf-commish-link[hidden],
  .lcf-draft-sched[hidden] { display: none; }

  .lcf-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .lcf-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--f-body);
    font-size: 16px;
    letter-spacing: .04em;
    color: var(--text-muted);
  }
  .lcf-stat input {
    min-height: 38px;
    font-size: 16px;
    padding: 8px 10px;
  }

  .lcf-conf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
  .lcf-conf-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    background: var(--bg-surface-2);
    border: 1px solid var(--gray-border);
    border-radius: 7px;
    cursor: pointer;
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--white-bright);
    transition: border-color .15s ease, opacity .15s ease;
    min-height: 44px;
  }
  .lcf-conf-chip:hover { border-color: var(--red-primary); }
  .lcf-conf-chip.is-off { opacity: .5; }
  .lcf-conf-chip input { width: 20px; height: 20px; accent-color: var(--red-primary); cursor: pointer; flex: 0 0 20px; }

  .lcf-pool {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(240, 189, 48, .05);
    border: 1px solid rgba(240, 189, 48, .2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .lcf-pool-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .lcf-pool-lbl { font-family: var(--f-body); font-size: 16px; color: var(--text-muted); }
  .lcf-pool-val { font-family: var(--f-mono); font-size: 16px; color: var(--white-bright); font-weight: 700; }
  .lcf-pool-warn {
    margin-top: 4px;
    padding: 9px 11px;
    background: rgba(255, 26, 26, .10);
    border: 1px solid rgba(255, 26, 26, .4);
    border-radius: 6px;
    font-family: var(--f-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--red-bright);
  }
  .lcf-pool-warn[hidden] { display: none; }

  .lcf-radio-group--3 { flex-wrap: wrap; }
  .lcf-radio-group--3 .lcf-radio-card { flex: 1 1 30%; min-width: 140px; }

  .lcf-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 12px;
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--white-bright);
    cursor: pointer;
    min-height: 44px; /* ≥44px tap target */
    padding: 4px 0;
  }
  .lcf-check input { width: 20px; height: 20px; accent-color: var(--red-primary); cursor: pointer; flex: 0 0 20px; }

  .lcf-import-pre {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 12px 14px;
    background: rgba(240, 189, 48, .06);
    border: 1px solid rgba(240, 189, 48, .2);
    border-radius: 8px;
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.5;
  }

  .lcf-commish-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
  }
  .lcf-commish-url {
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--white-bright);
    background: var(--bg-surface-2);
    border: 1px solid var(--hairline-2);
    border-radius: 8px;
    padding: 10px 16px;
    word-break: break-all;
    user-select: all;
    max-width: 100%;
  }

  .lcf-draft-sched {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(240, 189, 48, .06);
    border: 1px solid rgba(240, 189, 48, .2);
    border-radius: 8px;
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: left;
  }

  /* #689: custom-scoring save failure — warning tone (amber/red), distinct
     from the informational draft-sched note. */
  .lcf-scoring-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(224, 64, 64, .08);
    border: 1px solid rgba(224, 64, 64, .28);
    border-radius: 8px;
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--text);
    line-height: 1.5;
    text-align: left;
  }
  .lcf-scoring-warn[hidden] { display: none; }
  .lcf-scoring-warn-icon { flex: 0 0 auto; font-size: 16px; margin-top: 1px; }

  @media (max-width: 600px) {
    .lcf-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .lcf-radio-group--3 .lcf-radio-card { flex: 1 1 100%; }
  }

  /* ── Actions row ────────────────────────────────────────────────────── */
  .lcf-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    justify-content: flex-end;
  }
  .lcf-actions .btn { min-width: 160px; flex: 0 0 auto; }

  /* ── Responsive ─────────────────────────────────────────────────────── */
  @media (max-width: 600px) {
    .lcf-field-row { grid-template-columns: 1fr; }
    .lcf-radio-group { flex-direction: column; }
    .lcf-actions {
      flex-direction: column-reverse;
    }
    .lcf-actions .btn { width: 100%; min-height: 48px; flex: 0 0 auto; }
    .lcf-card { margin: 0; }
    .lcf-success-title { font-size: 26px; }
    .lcf-invite-code { font-size: 18px; letter-spacing: .14em; }
  }
}

/* keyframes hoisted to top level + route-prefixed (was global in leagues/new/style.css) */
@keyframes leagues-new-lcf-spin { to { transform: rotate(360deg); } }
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /leagues-sandbox folded from leagues/sandbox/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/leagues/sandbox"] (static attr, FOUC-safe).
   Resets dropped (none present here); --f-display dropped (none present);
   ex-:root vars scoped here; page keyframes route-prefixed (leagues-sandbox-)
   to avoid cross-route collision.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/leagues/sandbox"]{
  /* ex-:root local overrides (--f-display intentionally omitted — none present) */
  --sb-bg: #0a0a0d;
  --sb-card: rgba(20, 20, 26, 0.96);
  --sb-card-2: rgba(28, 28, 36, 0.92);
  --sb-line: rgba(255, 255, 255, 0.10);
  --sb-line-2: rgba(255, 255, 255, 0.18);
  --sb-text: #f5f5f7;
  --sb-text-dim: rgba(245, 245, 247, 0.70);
  --sb-text-mute: rgba(245, 245, 247, 0.50);
  --sb-accent: #ff3552;      /* SNS red */
  --sb-accent-2: #ffba2e;    /* SNS yellow */
  --sb-good: #2cd07e;        /* gain / win */
  --sb-bad: #ff5a5a;         /* loss */
  --sb-user: #ff3552;        /* user-team highlight */
  --sb-glow: 0 0 24px rgba(255, 53, 82, 0.45);

  /* ─── Phase scaffolding ──────────────────────────────────────────── */

  .sb-phase {
    display: none;
    padding: 32px 28px 64px;
    max-width: 1200px;
    margin: 0 auto;
    color: var(--sb-text);
  }
  .sb-phase.is-active {
    display: block;
    animation: leagues-sandbox-sb-phase-in 360ms ease-out both;
  }

  .sb-phase-head {
    margin-bottom: 24px;
  }
  .sb-phase-tag {
    display: inline-block;
    font-family: var(--f-display);
    letter-spacing: 0.18em;
    font-size: 16px;
    color: var(--sb-accent-2);
    border: 1px solid rgba(255, 186, 46, 0.45);
    border-radius: 3px;
    padding: 3px 10px;
    margin-bottom: 12px;
  }
  .sb-phase-title {
    font-family: var(--f-display);
    letter-spacing: 0.06em;
    font-size: clamp(28px, 4vw, 44px);
    margin: 0 0 6px;
    color: var(--sb-text);
  }
  .sb-phase-sub {
    margin: 0;
    color: var(--sb-text-dim);
    font-size: 16px;
  }

  /* ─── Intro ───────────────────────────────────────────────────────── */

  .sb-intro-card {
    background: var(--sb-card);
    border: 1px solid var(--sb-line);
    border-radius: 14px;
    padding: 48px 36px;
    text-align: center;
    margin: 36px auto 0;
    max-width: 720px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  }
  .sb-eyebrow {
    font-family: var(--f-display);
    letter-spacing: 0.22em;
    font-size: 16px;
    color: var(--sb-accent-2);
  }
  .sb-headline {
    font-family: var(--f-display);
    letter-spacing: 0.04em;
    font-size: clamp(28px, 4.5vw, 48px);
    line-height: 1.05;
    margin: 12px 0 18px;
  }
  .sb-sub {
    margin: 0 auto 32px;
    max-width: 560px;
    color: var(--sb-text-dim);
    font-size: 16px;
    line-height: 1.55;
  }

  .sb-cta {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--sb-accent), #c01e3a);
    border: none;
    color: #fff;
    font-family: var(--f-display);
    letter-spacing: 0.10em;
    font-size: 20px;
    padding: 14px 28px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
    box-shadow: 0 6px 18px rgba(255, 53, 82, 0.35);
  }
  .sb-cta:hover,
  .sb-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255, 53, 82, 0.55); }
  .sb-cta:active { transform: translateY(0); filter: brightness(0.95); }
  .sb-cta-icon { font-size: 16px; }

  .sb-cta--secondary {
    background: linear-gradient(135deg, #1e1e26, #2a2a36);
    border: 1px solid var(--sb-line-2);
    box-shadow: none;
  }
  .sb-cta--secondary:hover { box-shadow: 0 6px 18px rgba(255, 255, 255, 0.10); }
  .sb-cta--tertiary {
    background: transparent;
    border: 1px solid var(--sb-line-2);
    box-shadow: none;
    color: var(--sb-text-dim);
  }

  .sb-hint {
    margin: 14px 0 24px;
    font-size: 16px;
    color: var(--sb-text-mute);
  }
  .sb-speed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--sb-line);
    border-radius: 999px;
  }
  .sb-speed-label {
    font-family: var(--f-display);
    letter-spacing: 0.18em;
    color: var(--sb-text-mute);
    padding: 0 12px 0 8px;
    font-size: 16px;
  }
  .sb-speed-btn {
    appearance: none;
    background: transparent;
    color: var(--sb-text-dim);
    border: none;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 16px;
    transition: background 140ms ease, color 140ms ease;
  }
  .sb-speed-btn:hover { color: var(--sb-text); background: rgba(255, 255, 255, 0.06); }
  .sb-speed-btn.is-active {
    background: var(--sb-accent);
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 53, 82, 0.40);
  }

  /* ─── Draft phase ────────────────────────────────────────────────── */

  .sb-draft-stage {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .sb-draft-board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    background: var(--sb-card);
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    padding: 14px;
  }
  .sb-team-col {
    background: var(--sb-card-2);
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    padding: 10px;
    min-height: 280px;
  }
  .sb-team-col.is-user {
    border-color: var(--sb-user);
    box-shadow: 0 0 0 1px rgba(255, 53, 82, 0.35), var(--sb-glow);
  }
  .sb-team-col-name {
    font-family: var(--f-display);
    letter-spacing: 0.06em;
    font-size: 16px;
    color: var(--sb-text);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sb-team-col-tag {
    font-size: 16px;
    color: var(--sb-accent);
    border: 1px solid var(--sb-accent);
    border-radius: 3px;
    padding: 1px 5px;
  }
  .sb-team-picks {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 16px;
    color: var(--sb-text-dim);
  }
  .sb-team-picks li {
    padding: 3px 0;
    border-bottom: 1px solid var(--sb-line);
    opacity: 0;
    transform: translateY(-6px);
    animation: leagues-sandbox-sb-pick-in 320ms ease-out forwards;
  }
  .sb-team-picks li:last-child { border-bottom: 0; }
  .sb-pick-pos {
    display: inline-block;
    width: 26px;
    color: var(--sb-accent-2);
    font-weight: 600;
  }

  .sb-draft-feed {
    background: var(--sb-card);
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    padding: 16px;
    position: sticky;
    top: 88px;
  }
  .sb-feed-title {
    font-family: var(--f-display);
    letter-spacing: 0.18em;
    font-size: 16px;
    color: var(--sb-accent-2);
    margin: 0 0 10px;
  }
  .sb-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    max-height: 360px;
    overflow: hidden;
  }
  .sb-feed-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--sb-line);
    color: var(--sb-text-dim);
    opacity: 0;
    transform: translateX(8px);
    animation: leagues-sandbox-sb-feed-in 280ms ease-out forwards;
  }
  .sb-feed-list li:last-child { border-bottom: 0; }
  .sb-feed-name { color: var(--sb-text); font-weight: 600; }
  .sb-feed-meta { color: var(--sb-text-mute); font-size: 16px; font-family: "JetBrains Mono", monospace; }

  /* ─── Season phase ────────────────────────────────────────────────── */

  .sb-season-stage {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .sb-matchups {
    background: var(--sb-card);
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .sb-match {
    background: var(--sb-card-2);
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .sb-match.is-user { border-color: var(--sb-user); box-shadow: 0 0 0 1px rgba(255, 53, 82, 0.30); }
  .sb-match-team {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--sb-text);
  }
  .sb-match-team .sb-match-rank {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    color: var(--sb-text-mute);
    font-size: 16px;
    margin-right: 4px;
  }
  .sb-match-score {
    font-family: var(--f-display);
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--sb-text);
    min-width: 56px;
    text-align: center;
    transition: color 200ms ease;
  }
  .sb-match-score.is-winning { color: var(--sb-good); }
  .sb-match-score.is-losing { color: var(--sb-bad); }
  .sb-match-vs {
    font-family: var(--f-display);
    font-size: 16px;
    color: var(--sb-text-mute);
  }
  .sb-match-row-away { text-align: right; }

  .sb-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sb-feed, .sb-standings {
    background: var(--sb-card);
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    padding: 14px;
  }
  .sb-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: rank;
    font-size: 16px;
  }
  .sb-rank-list li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--sb-line);
    color: var(--sb-text-dim);
    transition: transform 280ms ease, color 200ms ease;
  }
  .sb-rank-list li:last-child { border-bottom: 0; }
  .sb-rank-list li.is-user { color: var(--sb-text); font-weight: 600; }
  .sb-rank-list li.is-user .sb-rank-name::after {
    content: "YOU";
    font-family: var(--f-display);
    font-size: 16px;
    letter-spacing: 0.15em;
    background: var(--sb-user);
    color: #fff;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 6px;
    vertical-align: 2px;
  }
  .sb-rank-num {
    font-family: "JetBrains Mono", monospace;
    color: var(--sb-text-mute);
    font-size: 16px;
  }
  .sb-rank-record {
    font-family: "JetBrains Mono", monospace;
    font-size: 16px;
    color: var(--sb-text-mute);
  }

  /* Transactions */
  .sb-txn-trade  .sb-feed-meta { color: var(--sb-accent-2); }
  .sb-txn-waiver .sb-feed-meta { color: var(--sb-good); }
  .sb-txn-nil    .sb-feed-meta { color: #6ec9ff; }
  .sb-txn-booster.sb-feed-meta { color: var(--sb-accent); }
  .sb-txn-injury .sb-feed-meta { color: var(--sb-bad); }

  .sb-nil-float {
    position: fixed;
    pointer-events: none;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    color: var(--sb-good);
    font-size: 16px;
    animation: leagues-sandbox-sb-nil-float 1800ms ease-out forwards;
    z-index: 9000;
    text-shadow: 0 0 8px rgba(44, 208, 126, 0.65);
  }
  .sb-nil-float.is-spend { color: var(--sb-bad); text-shadow: 0 0 8px rgba(255, 90, 90, 0.65); }

  /* ─── Playoffs phase ─────────────────────────────────────────────── */

  .sb-bracket {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    background: var(--sb-card);
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    padding: 20px;
  }
  .sb-br-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
  }
  .sb-br-col-title {
    font-family: var(--f-display);
    letter-spacing: 0.18em;
    font-size: 16px;
    color: var(--sb-text-mute);
    margin: 0 0 6px;
    text-align: center;
  }
  .sb-br-match {
    background: var(--sb-card-2);
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    gap: 6px;
    min-height: 80px;
  }
  .sb-br-match.is-live {
    border-color: var(--sb-accent);
    box-shadow: var(--sb-glow);
    animation: leagues-sandbox-sb-pulse 1400ms ease-in-out infinite;
  }
  .sb-br-match.is-final-game {
    border-color: var(--sb-accent-2);
    box-shadow: 0 0 22px rgba(255, 186, 46, 0.35);
  }
  .sb-br-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 16px;
  }
  .sb-br-row.is-winner {
    color: var(--sb-good);
    font-weight: 700;
  }
  .sb-br-seed {
    font-family: "JetBrains Mono", monospace;
    color: var(--sb-text-mute);
    font-size: 16px;
  }
  .sb-br-team {
    color: var(--sb-text);
  }
  .sb-br-score {
    font-family: var(--f-display);
    font-size: 18px;
  }
  .sb-br-bye {
    color: var(--sb-text-mute);
    font-style: italic;
    font-size: 16px;
    text-align: center;
    padding: 14px 0;
  }

  .sb-champion {
    text-align: center;
    margin: 28px auto 0;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 186, 46, 0.18), rgba(255, 53, 82, 0.22));
    border: 1px solid rgba(255, 186, 46, 0.50);
    border-radius: 14px;
    max-width: 480px;
    animation: leagues-sandbox-sb-champ-in 600ms ease-out both;
    box-shadow: 0 0 40px rgba(255, 186, 46, 0.35);
  }
  .sb-champion-eyebrow {
    font-family: var(--f-display);
    letter-spacing: 0.22em;
    color: var(--sb-accent-2);
    font-size: 16px;
  }
  .sb-champion-name {
    display: block;
    font-family: var(--f-display);
    letter-spacing: 0.05em;
    font-size: clamp(28px, 4.5vw, 46px);
    margin-top: 6px;
    color: #fff;
    text-shadow: 0 0 18px rgba(255, 186, 46, 0.65);
  }

  /* ─── Recap phase ────────────────────────────────────────────────── */

  .sb-recap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
  }
  .sb-recap-card {
    background: var(--sb-card);
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    animation: leagues-sandbox-sb-recap-in 480ms ease-out both;
  }
  .sb-recap-card:nth-child(1) { animation-delay: 0ms; }
  .sb-recap-card:nth-child(2) { animation-delay: 90ms; }
  .sb-recap-card:nth-child(3) { animation-delay: 180ms; }
  .sb-recap-card:nth-child(4) { animation-delay: 270ms; }
  .sb-recap-eyebrow {
    font-family: var(--f-display);
    letter-spacing: 0.18em;
    font-size: 16px;
    color: var(--sb-accent-2);
  }
  .sb-recap-stat {
    display: block;
    font-family: var(--f-display);
    letter-spacing: 0.04em;
    font-size: 38px;
    color: var(--sb-text);
    margin: 8px 0 4px;
    line-height: 1.0;
  }
  .sb-recap-stat--small { font-size: 22px; }
  .sb-recap-meta { color: var(--sb-text-dim); font-size: 16px; }

  .sb-recap-cta {
    text-align: center;
    padding: 24px 16px;
    background: var(--sb-card);
    border: 1px solid var(--sb-line);
    border-radius: 12px;
  }
  .sb-recap-cta-text {
    font-family: var(--f-display);
    letter-spacing: 0.06em;
    font-size: clamp(22px, 3.5vw, 32px);
    margin: 0 0 18px;
  }
  .sb-recap-cta .sb-cta { margin: 0 6px 8px; }

  /* ─── Mobile ──────────────────────────────────────────────────────── */

  @media (max-width: 880px) {
    .sb-phase { padding: 20px 12px 48px; }
    .sb-draft-stage { grid-template-columns: 1fr; }
    .sb-draft-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-draft-feed { position: static; top: auto; }
    .sb-season-stage { grid-template-columns: 1fr; }
    .sb-matchups { grid-template-columns: 1fr; }
    .sb-bracket { grid-template-columns: 1fr; gap: 14px; }
    .sb-recap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 480px) {
    .sb-draft-board { grid-template-columns: 1fr; }
    .sb-recap-grid { grid-template-columns: 1fr; }
    .sb-headline { font-size: 28px; }
    .sb-intro-card { padding: 32px 18px; }
  }

  /* ─── Reduced motion ─────────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .sb-phase,
    .sb-phase.is-active,
    .sb-team-picks li,
    .sb-feed-list li,
    .sb-rank-list li,
    .sb-recap-card,
    .sb-champion,
    .sb-nil-float,
    .sb-br-match.is-live {
      animation: none !important;
      transition: none !important;
    }
    .sb-rank-list li { transform: none !important; }
    .sb-team-picks li, .sb-feed-list li, .sb-recap-card { opacity: 1 !important; transform: none !important; }
  }
}

/* keyframes hoisted to top level + route-prefixed (were global in leagues/sandbox/style.css) */
@keyframes leagues-sandbox-sb-phase-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes leagues-sandbox-sb-pick-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes leagues-sandbox-sb-feed-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes leagues-sandbox-sb-nil-float {
  from { opacity: 0; transform: translateY(0); }
  20%  { opacity: 1; }
  to   { opacity: 0; transform: translateY(-48px); }
}
@keyframes leagues-sandbox-sb-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 53, 82, 0.30); }
  50%      { box-shadow: 0 0 28px rgba(255, 53, 82, 0.65); }
}
@keyframes leagues-sandbox-sb-champ-in {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes leagues-sandbox-sb-recap-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /bracket folded from bracket/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/bracket"] (static attr, FOUC-safe).
   Resets dropped (canonical reset/base own them); --f-display dropped so the
   canonical display token owns it (none present here); no ex-:root vars in
   source; page keyframes route-prefixed (bracket-) to avoid cross-route
   collision. Trophy watermark (.bk-tree::before, trophy_bg.png) preserved
   verbatim — durable feature.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/bracket"]{

  /* live-bracket count badge in the header */
  .bk-live-count{
    align-self:center; font-family:var(--f-mono); font-size:16px; font-weight:700;
    letter-spacing:.12em; color:var(--red-primary);
    padding:2px 8px; border:1px solid rgba(255,26,26,.35); border-radius:999px;
  }
  .bk-live-count:empty{ display:none; }

  /* switcher (current view) + year bar (history) — chip rows */
  .bk-switcher, .bk-yearbar{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    padding:0 24px 4px; margin:0;
  }
  .bk-chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:999px;
    font-family:var(--f-body); font-weight:700; font-size:16px;
    letter-spacing:.1em; text-transform:uppercase;
    background:var(--bg-surface); color:var(--text-muted);
    border:1px solid var(--hairline-2); cursor:pointer;
    transition:background .18s, color .18s, border-color .18s;
    white-space:nowrap;
  }
  .bk-chip:hover, .bk-chip:focus-visible{ color:var(--white-bright); border-color:var(--red-primary); }
  .bk-chip--active{
    background:rgba(255,26,26,.15); color:var(--white-bright);
    border-color:var(--red-primary);
    box-shadow:0 0 0 1px var(--red-primary), 0 0 14px rgba(220,31,46,.15);
  }
  .bk-chip--ghost{ border-style:dashed; color:var(--text-muted); }
  .bk-chip--nodata{ opacity:.45; }
  .bk-chip--nodata:hover{ opacity:.7; }
  .bk-chip-ic{ font-size:16px; }
  .bk-chip-note{ color:var(--text-muted); font-weight:600; }

  /* always-visible season selector bar (CFFSeason.mountToggle target) */
  .bk-season-bar{
    display:flex; align-items:center; justify-content:flex-end;
    padding:10px 24px 0;
  }
  .bk-season-bar:empty{ display:none; }

  /* first-round bye tag on a team row */
  .bk-bye-tag{
    display:inline-block; margin-left:6px; vertical-align:middle;
    font-family:var(--f-mono); font-size:16px; font-weight:700; letter-spacing:.12em;
    color:var(--gray-light); background:rgba(255,255,255,.06);
    border:1px solid var(--hairline-2); border-radius:3px; padding:1px 4px;
    text-transform:uppercase;
  }

  /* empty state (a season with no bracket data — never fake/filler) */
  .bk-empty{ padding:48px 24px; }
  .bk-empty-inner{
    max-width:520px; margin:0 auto; text-align:center;
    background:var(--bg-surface); border:1px solid var(--hairline-2);
    border-radius:14px; padding:36px 28px;
  }
  .bk-empty-icon{ font-size:40px; display:block; margin-bottom:14px; opacity:.8; }
  .bk-empty-msg{ color:var(--text-muted); font-size:16px; line-height:1.5; margin:0; }

  /* inline modal message (validation / result) — never yellow */
  .bk-modal-msg{ min-height:16px; margin:4px 0 12px; font-size:16px; color:var(--text-muted); }
  .bk-modal-msg--err{ color:var(--red-bright); }
  .bk-modal-msg--ok{ color:#3dba6e; }

  /* mobile: tighten chip rows + let the tree scroll on small screens */
  @media (max-width:560px){
    .bk-switcher, .bk-yearbar{ padding:0 12px 4px; gap:6px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .bk-switcher::-webkit-scrollbar, .bk-yearbar::-webkit-scrollbar{ display:none; }
    .bk-chip{ padding:7px 11px; font-size:16px; letter-spacing:.08em; flex-shrink:0; }
    .bk-live-count{ font-size:16px; flex-shrink:0; }
    .bk-empty{ padding:32px 12px; }
    .bk-empty-inner{ padding:28px 18px; }
  }

  /* ── Page Header ──────────────────────────────────────── */
  .bk-page-header {
    background: var(--sns-grad-page-header);
    border-bottom: 1px solid var(--hairline-2);
    padding: 0;
    /* Prevent button labels from escaping the header edge on narrow viewports. */
    overflow: hidden;
  }
  .bk-page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 20px;
    max-width: var(--sns-app-max);
    margin: 0 auto;
  }
  .bk-title-block { flex: 1; min-width: 0; }
  .bk-page-title {
    font-family: var(--f-display);
    font-size: 38px;
    letter-spacing: var(--sns-ls-display);
    color: var(--white-bright);
    line-height: var(--sns-lh-title);
    margin: 0;
  }
  .bk-page-subtitle {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-11);
    letter-spacing: var(--sns-ls-eyebrow);
    color: var(--white-bright);
    margin: 4px 0 0;
    font-weight: 700;
    /* Truncate cleanly when the champion name makes this overflow on mobile. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .bk-header-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }
  .bk-btn-icon {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  /* ── Type Tabs ────────────────────────────────────────── */
  .bk-type-tabs {
    display: flex;
    gap: 2px;
    padding: 0 24px;
    border-bottom: 1px solid var(--hairline);
    max-width: var(--sns-app-max);
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bk-type-tab {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-11);
    font-weight: 500;
    letter-spacing: var(--sns-ls-eyebrow);
    color: var(--gray-light);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 14px 20px;
    cursor: pointer;
    text-transform: uppercase;
    transition: color var(--sns-dur-base) var(--sns-ease-out),
                border-color var(--sns-dur-base) var(--sns-ease-out);
    white-space: nowrap;
    min-height: var(--sns-touch-target);
  }
  .bk-type-tab:hover { color: var(--white-bright); }
  .bk-type-tab--active {
    color: var(--red-primary);
    border-bottom-color: var(--red-primary);
    font-weight: 700;
  }

  /* ── Skeleton Loading ─────────────────────────────────── */
  .bk-skeleton {
    padding: 24px;
    max-width: var(--sns-app-max);
    margin: 0 auto;
  }
  .bk-skeleton-tree {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    padding-bottom: 16px;
  }
  .bk-skeleton-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 220px;
  }
  .bk-skeleton-head {
    width: 140px;
    height: 16px;
    border-radius: var(--sns-radius-sm);
    background: var(--bg-surface-2);
    animation: bracket-bk-shimmer 1.8s ease-in-out infinite;
  }
  .bk-skeleton-match {
    width: 240px;
    height: 88px;
    border-radius: var(--sns-radius-lg);
    background: var(--bg-surface-2);
    animation: bracket-bk-shimmer 1.8s ease-in-out infinite;
  }
  .bk-skeleton-col:nth-child(2) .bk-skeleton-match { animation-delay: 0.15s; }
  .bk-skeleton-col:nth-child(3) .bk-skeleton-match { animation-delay: 0.3s; }
  .bk-skeleton-col:nth-child(4) .bk-skeleton-match { animation-delay: 0.45s; }

  /* ── Error State ──────────────────────────────────────── */
  .bk-error {
    padding: 64px 24px;
    text-align: center;
    max-width: var(--sns-app-max);
    margin: 0 auto;
  }
  .bk-error-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .bk-error-icon {
    font-size: 40px;
    color: var(--red-primary);
  }
  .bk-error-msg {
    font-family: var(--f-body);
    font-size: var(--sns-fs-17);
    color: var(--white-bright);
    font-weight: 600;
    margin: 0;
  }
  .bk-error-detail {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-12);
    color: var(--gray-light);
    margin: 0;
  }

  /* ── Bracket Tree ─────────────────────────────────────── */
  .bk-tree-wrap {
    padding: 24px;
    max-width: var(--sns-app-max);
    margin: 0 auto;
    /* Contain the horizontally-scrollable tree within this box so the
       wide bracket doesn't create a page-level horizontal scrollbar
       that would clip the header and other full-width sections. */
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
  }
  .bk-tree-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding-bottom: 16px;
    /* Explicit 100% width ensures the scroll container fills the
       tree-wrap and never bleeds past it. */
    width: 100%;
    box-sizing: border-box;
  }
  .bk-tree {
    display: flex;
    gap: 48px;
    min-width: max-content;
    position: relative;
    padding: 8px 0;
    /* Sit above the spark canvas (z-index:1) so the spark reads as a
       flourish on the connector lines, behind the match cards. */
    z-index: 2;
  }
  .bk-connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .bk-connectors line,
  .bk-connectors path {
    stroke: var(--gray-border);
    stroke-width: 2;
    fill: none;
  }
  .bk-connectors .bk-conn-winner {
    stroke: var(--gold-accent);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 4px rgba(240,189,48,.35));
  }

  /* ── Spark-trail flourish ─────────────────────────────────
     A spark travels along the winner-path connectors, lighting each
     advancing team line as it passes. Purely decorative; the canvas
     sits above the connectors but below the match cards so the spark
     reads as a flourish on the line, not over the text.
     Source: SnapDraft v5 spark-trail reference
     (apps/web/snapdraft_html/bracket/index.html). */
  .bk-spark-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
  }
  .bk-team--winner.bk-spark-lit {
    background: rgba(240,189,48,.10);
    box-shadow: inset 0 0 0 1px rgba(240,189,48,.35),
                0 0 14px rgba(240,189,48,.22);
    transition: background .3s ease, box-shadow .3s ease;
  }

  /* ── Round Columns ────────────────────────────────────── */
  .bk-round {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 250px;
    position: relative;
  }
  .bk-round-header {
    margin-bottom: 16px;
  }
  .bk-round-name {
    font-family: var(--f-display);
    font-size: var(--sns-fs-18);
    letter-spacing: var(--sns-ls-base);
    color: var(--white-bright);
    margin: 0;
    line-height: var(--sns-lh-title);
  }
  .bk-round-sub {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-10);
    letter-spacing: var(--sns-ls-eyebrow);
    color: var(--gray-light);
    margin: 2px 0 0;
  }
  .bk-round--current .bk-round-name {
    color: var(--red-primary);
  }
  .bk-round--current .bk-round-header::after {
    content: 'LIVE';
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: var(--sns-ls-button);
    color: var(--white-bright);
    background: var(--red-primary);
    padding: 2px 8px;
    border-radius: var(--sns-radius-xs);
    margin-left: 10px;
    vertical-align: middle;
    animation: bracket-bk-pulse 2s ease-in-out infinite;
  }

  /* ── Matchup Cards ────────────────────────────────────── */
  .bk-matches {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    gap: 12px;
  }
  .bk-match {
    background: var(--bg-surface);
    border: 1px solid var(--hairline-2);
    border-radius: var(--sns-radius-lg);
    overflow: hidden;
    transition: transform var(--sns-dur-fast) var(--sns-ease-out),
                box-shadow var(--sns-dur-fast) var(--sns-ease-out),
                border-color var(--sns-dur-fast) var(--sns-ease-out);
    animation: bracket-bk-card-in 450ms var(--sns-ease-snappy) both;
  }
  .bk-match:hover {
    transform: translateY(-2px);
    box-shadow: var(--sns-shadow-card-hover);
    border-color: rgba(255,26,26,.3);
  }
  .bk-match--championship {
    border-color: #FFFFFF;
    box-shadow: 0 0 16px rgba(240,189,48,.2);
  }
  .bk-match--championship:hover {
    box-shadow: 0 0 24px rgba(240,189,48,.4);
  }

  /* Team rows inside match cards */
  .bk-team {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 0;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--sns-dur-base) var(--sns-ease-out);
  }
  .bk-team:first-child {
    border-bottom: 1px solid var(--hairline);
  }
  .bk-team:hover {
    background: rgba(255,255,255,.03);
  }
  .bk-team--winner {
    background: rgba(255,26,26,.06);
  }
  .bk-team--winner .bk-team-name {
    color: var(--white-bright);
    font-weight: 700;
  }
  .bk-team--winner .bk-team-score {
    color: var(--white-bright);
    font-weight: 700;
  }
  .bk-team--loser {
    opacity: 0.5;
  }
  .bk-team-seed {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-11);
    color: var(--gray-light);
    font-weight: 500;
    text-align: center;
    min-width: 28px;
  }
  .bk-team-name {
    font-family: var(--f-body);
    font-size: var(--sns-fs-14);
    color: var(--white-bright);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
  }
  .bk-team-score {
    font-family: var(--f-numeral);
    font-size: var(--sns-fs-14);
    color: var(--gray-light);
    font-weight: 500;
    text-align: right;
    min-width: 32px;
  }

  /* Match venue label */
  .bk-match-venue {
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: var(--sns-ls-mono);
    color: var(--text-faint);
    padding: 4px 14px 6px;
    text-transform: uppercase;
  }

  /* ── Winner Path Animation ────────────────────────────── */
  .bk-match--decided .bk-team--winner {
    position: relative;
  }
  .bk-match--decided .bk-team--winner::after {
    content: '\2713';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white-bright);
    font-size: 16px;
    opacity: 0;
    animation: bracket-bk-check-in 300ms var(--sns-ease-snappy) forwards;
    animation-delay: 600ms;
  }

  /* ── Losers Bracket ───────────────────────────────────── */
  .bk-losers-wrap {
    padding: 0 24px 24px;
    max-width: var(--sns-app-max);
    margin: 0 auto;
  }
  .bk-section-title {
    font-family: var(--f-display);
    font-size: var(--sns-fs-24);
    letter-spacing: var(--sns-ls-base);
    color: var(--white-bright);
    margin: 0 0 16px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
  }

  /* ── Modal ────────────────────────────────────────────── */
  .bk-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--sns-z-modal);
    padding: 24px;
    animation: bracket-bk-fade-in 200ms ease;
  }
  /* CRITICAL (#848): the explicit display:flex above out-specifies the UA
     [hidden]{display:none} rule, so without this the overlay stays painted
     on page load — covering the viewport at z-modal and trapping the user
     with no working close affordance. Mirror the established pattern used by
     the scores/leagues pages: re-assert display:none when [hidden] is set. */
  .bk-modal-overlay[hidden] {
    display: none !important;
  }
  .bk-modal {
    background: var(--bg-surface);
    border: 1px solid var(--gray-border);
    border-radius: var(--sns-radius-2xl);
    width: 100%;
    max-width: 440px;
    box-shadow: var(--sns-shadow-modal);
    animation: bracket-bk-modal-in 300ms var(--sns-ease-snappy);
  }
  .bk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
  }
  .bk-modal-title {
    font-family: var(--f-display);
    font-size: var(--sns-fs-24);
    letter-spacing: var(--sns-ls-base);
    color: var(--white-bright);
    margin: 0;
  }
  .bk-modal-close {
    background: none;
    border: none;
    color: var(--gray-light);
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color var(--sns-dur-base) var(--sns-ease-out);
    min-width: var(--sns-touch-target);
    min-height: var(--sns-touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bk-modal-close:hover { color: var(--white-bright); }
  .bk-modal-body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .bk-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .bk-label {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-10);
    font-weight: 700;
    letter-spacing: var(--sns-ls-button);
    color: var(--white-bright);
    text-transform: uppercase;
  }
  .bk-input,
  .bk-select {
    font-family: var(--f-body);
    font-size: var(--sns-fs-14);
    color: var(--white-bright);
    background: var(--bg-surface-2);
    border: 1px solid var(--gray-border);
    border-radius: var(--sns-radius-md);
    padding: 10px 14px;
    outline: none;
    transition: border-color var(--sns-dur-base) var(--sns-ease-out),
                box-shadow var(--sns-dur-base) var(--sns-ease-out);
    min-height: var(--sns-touch-target);
  }
  .bk-input::placeholder { color: var(--text-faint); }
  .bk-input:focus,
  .bk-select:focus {
    border-color: var(--red-primary);
    box-shadow: 0 0 0 2px rgba(255,26,26,.2);
  }
  .bk-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A8A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
  }
  .bk-select option {
    background: var(--black-bg);
    color: var(--white-bright);
  }

  /* ── Reduced Motion ───────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .bk-match { animation: none; }
    .bk-skeleton-match,
    .bk-skeleton-head { animation: none; opacity: 0.4; }
    .bk-round--current .bk-round-header::after { animation: none; }
    .bk-match--decided .bk-team--winner::after { animation: none; opacity: 1; }
    .bk-modal-overlay,
    .bk-modal { animation: none; }
    .bk-connectors .bk-conn-winner { filter: none; }
    /* Spark-trail is a motion flourish — disable it entirely. The winner
       rows are still highlighted via the static lit state (applied without
       animation by script.js) so the meaning survives. */
    .bk-spark-canvas { display: none !important; }
    .bk-team--winner.bk-spark-lit { transition: none; }
  }

  /* ── Desktop (>767px) ─────────────────────────────────── */
  @media (min-width: 768px) {
    .bk-tree { gap: 56px; }
    .bk-round { min-width: 270px; }
    .bk-match { min-width: 260px; }
  }

  /* ── Tablet / Small Desktop ───────────────────────────── */
  @media (max-width: 767px) {
    .bk-page-header-inner {
      flex-direction: column;
      align-items: flex-start;
      padding: 18px 16px 14px;
    }
    .bk-page-title { font-size: 30px; }
    .bk-header-actions { width: 100%; }
    .bk-header-actions .btn { flex: 1; justify-content: center; }
    .bk-type-tabs { padding: 0 16px; }
    .bk-type-tab { padding: 12px 14px; font-size: 16px; }
    .bk-tree-wrap { padding: 16px; }
    .bk-tree { gap: 32px; }
    .bk-round { min-width: 220px; }
    .bk-skeleton { padding: 16px; }
    .bk-losers-wrap { padding: 0 16px 16px; }
  }

  /* ── Narrow Mobile (<=480px) ─────────────────────────── */
  /* 390px devices: tighten cards so the bracket scrolls with
     smaller steps; teams truncate cleanly within each card. */
  @media (max-width: 480px) {
    .bk-round { min-width: 190px; }
    .bk-match { min-width: 185px; }
    .bk-team { padding: 9px 10px; grid-template-columns: 26px 1fr auto; }
    .bk-team-name { font-size: 16px; }
    .bk-team-score { min-width: 26px; }
    .bk-header-actions { flex-direction: column; gap: 8px; }
    .bk-header-actions .btn { min-width: 0; white-space: normal; text-align: center; }
  }

  /* ── Mobile (<=359px) ─────────────────────────────────── */
  @media (max-width: 359px) {
    .bk-page-header-inner { padding: 14px 12px 10px; }
    .bk-page-title { font-size: 26px; }
    .bk-page-subtitle { font-size: 16px; }
    .bk-header-actions { flex-direction: column; }
    .bk-type-tabs { padding: 0 12px; }
    .bk-type-tab { padding: 10px 10px; font-size: 16px; }
    .bk-tree-wrap { padding: 12px; }
    .bk-tree { gap: 24px; }
    .bk-round { min-width: 200px; }
    .bk-match { min-width: 195px; }
    .bk-team { padding: 8px 10px; grid-template-columns: 26px 1fr auto; }
    .bk-team-name { font-size: var(--sns-fs-12); }
    .bk-team-seed { font-size: 16px; }
    .bk-team-score { font-size: var(--sns-fs-12); }
    .bk-modal { border-radius: var(--sns-radius-lg); }
    .bk-modal-body { padding: 16px; }
  }

  /* ============================================================
     DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER  (Issue #762, FLUID agent)
     ------------------------------------------------------------
     Appended last. CONSUMES contract vars (--fs-fluid-*, --space-fluid-*)
     from tokens.css (Tokens agent) with inline clamp() fallbacks of the
     same intent, so correct regardless of PR merge order. tokens.css is
     not edited here.

     Patterns: Utopia.fyi fluid type/space (CC-BY); CSS-Tricks "Modern
     Fluid Typography Using CSS Clamp"; MDN container queries (CC-BY-SA).
     Range 344→2160px; rem base + vw slope preserves zoom (WCAG 1.4.4).

     NOTE: the bracket TREE is intentionally horizontally-scrollable
     (a tournament tree must not reflow into a column), so we do NOT
     auto-fit it. We fluidize the page title, the section paddings
     (24/16/12px ladder), and the inter-round gap so spacing breathes
     smoothly from 344px to ultrawide instead of stepping.
     ============================================================ */

  /* Page title: one clamp replaces the 38→30→26px step ladder. */
  .bk-page-title{ font-size: var(--fs-fluid-h1, clamp(1.625rem, 1.18rem + 2.0vw, 2.375rem)); } /* 26 → 38px */

  /* Section horizontal/vertical padding: fluid 12→24px. */
  .bk-page-header-inner,
  .bk-tree-wrap,
  .bk-skeleton{ padding: var(--space-fluid-lg, clamp(0.75rem, 0.45rem + 1.5vw, 1.5rem)); }
  .bk-losers-wrap{ padding: 0 var(--space-fluid-lg, clamp(0.75rem, 0.45rem + 1.5vw, 1.5rem)) var(--space-fluid-lg, clamp(0.75rem, 0.45rem + 1.5vw, 1.5rem)); }
  .bk-type-tabs{ padding-left: var(--space-fluid-lg, clamp(0.75rem, 0.45rem + 1.5vw, 1.5rem)); padding-right: var(--space-fluid-lg, clamp(0.75rem, 0.45rem + 1.5vw, 1.5rem)); }

  /* Inter-round gap: fluid 24→56px (was 48 base, 56 desktop, 32/24 mobile). */
  .bk-tree{ gap: var(--space-fluid-xl, clamp(1.5rem, 0.9rem + 2.8vw, 3.5rem)); }

  /* ============================================================
     END DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER
     ============================================================ */


  /* Championship trophy backdrop (DESIGN_SYSTEM_RESET 2026-05-31 §6.6) — RESTORE the gold
     CFP trophy behind the bracket tree. Asset /bracket/assets/trophy_bg.png was orphaned
     from this route (wired only in snapdraft_html/bracket). Mounted as a CSS watermark on
     the existing .bk-tree container (position:relative) so no JS/DOM change is needed; a
     chrome-health-safe approach that cannot drift out of the markup again. */
  .bk-tree{position:relative;isolation:isolate}
  .bk-tree::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    right:clamp(4px,2vw,40px);top:48px;
    width:min(42%,460px);height:min(46%,440px);
    background:url('/bracket/assets/trophy_bg.png') center/contain no-repeat;
    opacity:.34;filter:drop-shadow(0 0 30px rgba(255,201,72,.18));
  }
}

/* keyframes hoisted to top level + route-prefixed (were global in bracket/style.css) */
@keyframes bracket-bk-shimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}
@keyframes bracket-bk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes bracket-bk-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes bracket-bk-winner-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(240,189,48,.2); }
  50% { box-shadow: 0 0 20px rgba(240,189,48,.45); }
}
@keyframes bracket-bk-check-in {
  from { opacity: 0; transform: translateY(-50%) scale(0.5); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes bracket-bk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bracket-bk-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /nil folded from nil/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/nil"] (static attr, FOUC-safe).
   Resets dropped (canonical reset/base own them); --f-display dropped so the
   canonical display token owns it; ex-:root vars scoped here; page keyframes
   route-prefixed (nil-) to avoid cross-route collision.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/nil"]{
  /* ex-:root local overrides (supplement canonical tokens; --f-display intentionally omitted) */
  --nil-green: #22c55e;
  --nil-green-bg: rgba(34,197,94,.12);
  --nil-green-border: rgba(34,197,94,.25);
  --nil-purple: #9333ea;
  --nil-purple-bg: rgba(147,51,234,.15);
  --nil-purple-border: rgba(147,51,234,.35);
  --bg-surface-2: #1A1A1A;
  --hairline: rgba(255,255,255,.06);
  --hairline-2: rgba(255,255,255,.10);

  /* === SKIP LINK === */
  .skip{position:absolute;top:-100px;left:0;padding:8px 16px;background:var(--red-primary);color:#fff;z-index:100;font-size:16px;}
  .skip:focus{top:0;}

  /* === LAYOUT === */

  /* === MOBILE NAV === */

  /* === PAGE HEADER === */
  .page-header{background:linear-gradient(135deg,#0d0d0d 0%,#0a120d 50%,#0d0d0d 100%);border-bottom:2px solid var(--nil-green);padding:32px 24px 20px;position:relative;overflow:hidden;flex-shrink:0;}
  .page-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 20px,rgba(34,197,94,.02) 20px,rgba(34,197,94,.02) 21px);pointer-events:none;}
  .page-header-inner{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .ph-left{flex:1;min-width:200px;}
  .page-eyebrow{font-family:var(--f-display);font-size:16px;letter-spacing:.2em;color:var(--nil-green);text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:4px;}
  .page-title{font-family:var(--f-display);font-size:clamp(28px,4vw,48px);letter-spacing:.04em;color:var(--white-bright);margin:0 0 4px;line-height:1;}
  .page-subtitle{font-size:16px;color:var(--gray-light);margin:0;}
  .ph-beta{display:inline-block;font-family:var(--f-display);font-size:16px;background:var(--nil-purple-bg);color:#c084fc;border:1px solid var(--nil-purple-border);border-radius:4px;padding:1px 6px;letter-spacing:.14em;vertical-align:middle;}

  /* === BALANCE CHIP === */
  .balance-chip{display:flex;align-items:center;gap:12px;background:var(--black-card);border:1px solid var(--nil-green);border-radius:12px;padding:14px 20px;white-space:nowrap;flex-shrink:0;}
  .bc-icon{font-size:22px;line-height:1;}
  .bc-label{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.12em;font-family:var(--f-display);}
  .bc-value{font-family:var(--f-display);font-size:28px;color:var(--nil-green);letter-spacing:.05em;line-height:1.1;}
  .bc-sub{font-size:16px;color:var(--nil-green);opacity:.7;margin-top:2px;}

  /* === PLAY MONEY BANNER === */
  .playmoney-bar{background:rgba(34,197,94,.06);border-bottom:1px solid rgba(34,197,94,.15);padding:8px 24px;font-size:16px;color:var(--nil-green);display:flex;align-items:center;gap:8px;}
  .pm-icon{font-size:16px;line-height:1;}

  /* === TAB BAR === */
  .tab-bar{display:flex;gap:4px;padding:0 24px;margin-top:0;border-bottom:2px solid var(--hairline);overflow-x:auto;background:var(--black-card);}
  .tab-btn{font-family:var(--f-display);font-size:16px;letter-spacing:.12em;padding:12px 20px;background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;color:var(--gray-light);cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;}
  .tab-btn:hover{color:var(--white-bright);}
  .tab-btn.active{color:var(--nil-green);border-bottom-color:var(--nil-green);}
  .tab-btn:focus-visible{outline:2px solid var(--nil-green);outline-offset:-2px;}
  .tab-pane{display:none;padding:24px;}
  .tab-pane.active{display:block;animation:nil-fadeSlide .2s ease;}

  /* === CARD === */
  .card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;}
  .card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-border);gap:12px;flex-wrap:wrap;}
  .card-eyebrow{font-size:16px;font-family:var(--f-display);letter-spacing:.18em;color:var(--nil-green);text-transform:uppercase;}
  .card-title{font-family:var(--f-display);font-size:18px;letter-spacing:.06em;color:var(--white-bright);margin:0;}
  .card-body{padding:20px;}

  /* === SECTION HEADERS === */
  .section-title{font-family:var(--f-display);font-size:20px;letter-spacing:.08em;color:var(--white-bright);margin:0 0 4px;}
  .section-sub{color:var(--gray-light);font-size:16px;margin:0 0 16px;line-height:1.45;}

  /* === FILTER BAR === */
  .filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
  .filter-select{background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:8px;color:var(--white-bright);font-size:16px;padding:8px 12px;cursor:pointer;appearance:none;min-width:140px;font-family:var(--f-body);}
  .filter-select:focus{outline:none;border-color:var(--nil-green);}
  .filter-chip{background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:20px;color:var(--gray-light);font-size:16px;padding:6px 14px;cursor:pointer;transition:all .15s;white-space:nowrap;}
  .filter-chip.on{background:var(--nil-green-bg);border-color:var(--nil-green);color:var(--nil-green);}
  .filter-chip:hover{border-color:var(--white-bright);color:var(--white-bright);}
  .filter-spacer{flex:1;}
  .search-box{background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:8px;color:var(--white-bright);font-size:16px;padding:8px 12px;width:200px;font-family:var(--f-body);}
  .search-box::placeholder{color:var(--gray-light);}
  .search-box:focus{outline:none;border-color:var(--nil-green);}

  /* === MARKETPLACE GRID === */
  .mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
  .mkt-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .18s,box-shadow .18s;cursor:pointer;position:relative;overflow:hidden;}
  .mkt-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(34,197,94,.02));pointer-events:none;}
  .mkt-card:hover{border-color:var(--nil-green);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(34,197,94,.15);}
  .mkt-card:focus-visible{outline:2px solid var(--nil-green);outline-offset:2px;}
  .mkt-card.owned{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.03);}
  .mkt-avatar{width:52px;height:52px;border-radius:50%;background:var(--bg-surface-2);border:2px solid var(--hairline-2);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:18px;color:var(--gray-light);flex-shrink:0;overflow:hidden;}
  .mkt-avatar img{width:100%;height:100%;object-fit:cover;}
  .mkt-header{display:flex;align-items:center;gap:10px;}
  .mkt-name{font-weight:700;font-size:16px;line-height:1.2;}
  .mkt-meta{font-size:16px;color:var(--gray-light);}
  .mkt-pos{display:inline-block;font-family:var(--f-display);font-size:16px;padding:2px 6px;border-radius:4px;margin-top:2px;letter-spacing:.06em;}
  .mkt-pos-qb{background:var(--sns-pos-qb-bg);color:var(--sns-pos-qb-text);}
  .mkt-pos-rb{background:var(--sns-pos-rb-bg);color:var(--sns-pos-rb-text);}
  .mkt-pos-wr{background:var(--sns-pos-wr-bg);color:var(--sns-pos-wr-text);}
  .mkt-pos-te{background:var(--sns-pos-te-bg);color:var(--sns-pos-te-text);}
  .mkt-pos-k{background:var(--sns-pos-k-bg);color:var(--sns-pos-k-text);}
  .mkt-divider{border:none;border-top:1px solid var(--hairline);margin:0;}
  .mkt-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .mkt-stat{display:flex;flex-direction:column;gap:2px;}
  .mkt-stat-label{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.08em;font-family:var(--f-display);}
  .mkt-stat-val{font-family:'JetBrains Mono',var(--f-mono,monospace);font-size:16px;font-weight:700;color:var(--white-bright);}
  .mkt-stat-val.green{color:var(--nil-green);}
  .mkt-buy-btn{width:100%;padding:10px;border:none;border-radius:8px;background:var(--nil-green);color:#0a200f;font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:opacity .15s,transform .1s;font-family:var(--f-body);}
  .mkt-buy-btn:hover{opacity:.9;transform:scale(1.02);}
  .mkt-buy-btn:focus-visible{outline:2px solid var(--white-bright);outline-offset:2px;}
  .mkt-buy-btn:disabled{background:var(--gray-border);color:var(--gray-light);cursor:default;transform:none;}
  .mkt-owned-badge{text-align:center;font-size:16px;color:var(--nil-green);font-weight:600;padding:7px;background:var(--nil-green-bg);border-radius:6px;}

  /* === WALLET / TRANSACTION HISTORY === */
  .wallet-section{margin-bottom:24px;}
  .wallet-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
  .wallet-stat{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;padding:16px 20px;}
  .wallet-stat-label{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;font-family:var(--f-display);}
  .wallet-stat-val{font-family:var(--f-display);font-size:32px;color:var(--white-bright);line-height:1;}
  .wallet-stat-val.up{color:var(--nil-green);}
  .wallet-stat-val.down{color:var(--red-primary);}
  .wallet-stat-sub{font-size:16px;color:var(--gray-light);margin-top:4px;}

  .tx-table{width:100%;border-collapse:collapse;font-size:16px;}
  .tx-table th{font-size:16px;text-transform:uppercase;letter-spacing:.12em;color:var(--gray-light);padding:10px 12px;text-align:left;border-bottom:1px solid var(--gray-border);font-family:var(--f-display);}
  .tx-table td{padding:12px;border-bottom:1px solid var(--hairline);vertical-align:middle;}
  .tx-table tr:hover td{background:rgba(255,255,255,.02);}
  .tx-type{display:inline-block;font-size:16px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.08em;}
  .tx-credit{background:var(--nil-green-bg);color:var(--nil-green);}
  .tx-debit{background:rgba(255,26,26,.12);color:var(--red-primary);}
  .tx-amount{font-family:'JetBrains Mono',var(--f-mono,monospace);font-weight:700;}
  .tx-amount.positive{color:var(--nil-green);}
  .tx-amount.negative{color:var(--red-primary);}
  .tx-desc{color:var(--white-bright);}
  .tx-date{color:var(--gray-light);font-family:'JetBrains Mono',var(--f-mono,monospace);font-size:16px;}

  /* === SINGLE WALLET PANEL (NIL Coins + Points, distinguished by source badge) === */
  .wallet-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:14px;}
  .wallet-bal{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:18px 20px;position:relative;overflow:hidden;}
  .wallet-bal--nil{border-color:var(--nil-green-border);}
  .wallet-bal--nil::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--nil-green);}
  .wallet-bal--points{border-color:var(--nil-purple-border);}
  .wallet-bal--points::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--nil-purple);}
  .wallet-bal-top{margin-bottom:10px;}
  .wallet-bal-val{font-family:var(--f-display);font-size:34px;line-height:1;letter-spacing:.04em;}
  .wallet-bal--nil .wallet-bal-val{color:var(--nil-green);}
  .wallet-bal--points .wallet-bal-val{color:#c084fc;}
  .wallet-bal-sub{font-size:16px;color:var(--gray-light);margin-top:6px;}
  .wallet-sep-note{font-size:16px;color:var(--gray-light);background:var(--hairline);border-radius:8px;padding:8px 12px;margin:0 0 24px;display:flex;align-items:center;gap:8px;line-height:1.4;}

  /* Source badge — the single visual device that distinguishes NIL Coins vs Points.
     Color + icon + label all differ so it reads even without color (a11y). */
  .src-badge{display:inline-flex;align-items:center;gap:5px;font-size:16px;font-weight:700;padding:3px 9px 3px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;border:1px solid transparent;line-height:1.3;}
  .src-badge .src-ico{font-size:16px;line-height:1;}
  .src-badge--nil{background:var(--nil-green-bg);color:var(--nil-green);border-color:var(--nil-green-border);}
  .src-badge--points{background:var(--nil-purple-bg);color:#c084fc;border-color:var(--nil-purple-border);}
  /* Row accent: a thin left rule echoing the badge color on each activity row */
  .tx-table tr.tx-row-nil td:first-child{box-shadow:inset 3px 0 0 var(--nil-green);}
  .tx-table tr.tx-row-points td:first-child{box-shadow:inset 3px 0 0 var(--nil-purple);}
  .tx-src-sub{display:block;font-size:16px;color:var(--gray-light);margin-top:3px;letter-spacing:.04em;text-transform:none;}
  @media (max-width:560px){.wallet-panel{grid-template-columns:1fr;}}

  /* === PORTFOLIO === */
  .portfolio-header{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
  .port-stat{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;padding:16px 20px;}
  .port-stat-label{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;font-family:var(--f-display);}
  .port-stat-val{font-family:var(--f-display);font-size:32px;color:var(--white-bright);line-height:1;}
  .port-stat-val.up{color:var(--nil-green);}
  .port-stat-val.down{color:var(--red-primary);}
  .port-stat-sub{font-size:16px;color:var(--gray-light);margin-top:4px;}

  .port-table{width:100%;border-collapse:collapse;font-size:16px;}
  .port-table th{font-size:16px;text-transform:uppercase;letter-spacing:.12em;color:var(--gray-light);padding:10px 12px;text-align:left;border-bottom:1px solid var(--gray-border);font-family:var(--f-display);}
  .port-table td{padding:12px;border-bottom:1px solid var(--hairline);vertical-align:middle;}
  .port-table tr:hover td{background:rgba(255,255,255,.02);}
  .port-player-cell{display:flex;align-items:center;gap:10px;}
  .port-mini-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg-surface-2);border:1px solid var(--hairline-2);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gray-light);flex-shrink:0;font-family:var(--f-display);}
  .port-name{font-weight:600;font-size:16px;}
  .port-school{font-size:16px;color:var(--gray-light);}
  .badge-type{display:inline-block;font-size:16px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.08em;}
  .badge-end{background:rgba(240,189,48,.12);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);}
  .badge-soc{background:var(--nil-purple-bg);color:#c084fc;border:1px solid var(--nil-purple-border);}
  .badge-app{background:rgba(59,130,246,.12);color:#93c5fd;border:1px solid rgba(59,130,246,.25);}
  .pnl-up{color:var(--nil-green);font-family:'JetBrains Mono',var(--f-mono,monospace);font-weight:700;}
  .pnl-dn{color:var(--red-primary);font-family:'JetBrains Mono',var(--f-mono,monospace);font-weight:700;}
  .sell-btn{background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:6px;color:var(--gray-light);font-size:16px;padding:6px 12px;cursor:pointer;transition:all .15s;font-family:var(--f-body);}
  .sell-btn:hover{border-color:var(--red-primary);color:var(--red-primary);}
  .sell-btn:focus-visible{outline:2px solid var(--nil-green);outline-offset:2px;}

  /* === INVENTORY (Equip/Unequip) === */
  .inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
  .inv-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s;}
  .inv-card.equipped{border-color:var(--nil-green);box-shadow:0 0 12px rgba(34,197,94,.08);}
  .inv-card-header{display:flex;align-items:center;gap:12px;}
  .inv-avatar{width:48px;height:48px;border-radius:50%;background:var(--bg-surface-2);border:2px solid var(--hairline-2);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:17px;color:var(--gray-light);flex-shrink:0;}
  .inv-name{font-weight:700;font-size:16px;}
  .inv-school{font-size:16px;color:var(--gray-light);}
  .inv-status{display:flex;align-items:center;gap:6px;margin-left:auto;}
  .inv-status-dot{width:8px;height:8px;border-radius:50%;}
  .inv-status-dot.active{background:var(--nil-green);}
  .inv-status-dot.inactive{background:var(--gray-border);}
  .inv-status-label{font-size:16px;font-family:var(--f-display);letter-spacing:.1em;text-transform:uppercase;}
  .inv-details{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--bg-surface-2);border-radius:8px;padding:10px 12px;}
  .inv-detail{display:flex;flex-direction:column;gap:2px;}
  .inv-detail-label{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.08em;font-family:var(--f-display);}
  .inv-detail-val{font-family:'JetBrains Mono',var(--f-mono,monospace);font-size:16px;font-weight:700;}
  .inv-detail-val.gold{color:#FFFFFF;}
  .inv-actions{display:flex;gap:8px;}
  .inv-btn{flex:1;padding:9px;border-radius:8px;font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .15s;font-family:var(--f-body);}
  .inv-btn.equip{background:rgba(34,197,94,.12);border:1px solid var(--nil-green);color:var(--nil-green);}
  .inv-btn.equip:hover{background:rgba(34,197,94,.22);}
  .inv-btn.unequip{background:rgba(255,26,26,.08);border:1px solid var(--red-primary);color:var(--red-primary);}
  .inv-btn.unequip:hover{background:rgba(255,26,26,.18);}
  .inv-btn:focus-visible{outline:2px solid var(--white-bright);outline-offset:2px;}

  /* === MODAL === */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
  .modal-overlay.open{opacity:1;pointer-events:all;}
  .modal-box{background:var(--black-card);border:1px solid var(--nil-green);border-radius:16px;padding:28px;min-width:340px;max-width:440px;width:90%;transform:scale(.95);transition:transform .2s;position:relative;}
  .modal-overlay.open .modal-box{transform:scale(1);}
  .modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--gray-light);font-size:20px;cursor:pointer;line-height:1;padding:4px;}
  .modal-close:hover{color:var(--white-bright);}
  .modal-close:focus-visible{outline:2px solid var(--nil-green);outline-offset:2px;}
  .modal-title{font-family:var(--f-display);font-size:26px;letter-spacing:.04em;margin-bottom:4px;}
  .modal-sub{font-size:16px;color:var(--gray-light);margin-bottom:20px;}
  .modal-detail{background:var(--bg-surface-2);border-radius:8px;padding:14px;margin-bottom:16px;}
  .modal-detail-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:16px;}
  .modal-detail-row+.modal-detail-row{border-top:1px solid var(--hairline);}
  .modal-detail-label{color:var(--gray-light);}
  .modal-detail-val{font-weight:600;}
  .modal-detail-val.green{color:var(--nil-green);}
  .modal-actions{display:flex;gap:10px;margin-top:4px;}
  .modal-confirm-btn{flex:1;padding:11px;border-radius:8px;border:none;background:var(--nil-green);color:#0a200f;font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:opacity .15s;font-family:var(--f-body);}
  .modal-confirm-btn:hover{opacity:.9;}
  .modal-confirm-btn:focus-visible{outline:2px solid var(--white-bright);outline-offset:2px;}
  .modal-cancel-btn{padding:11px 20px;border-radius:8px;border:1px solid var(--gray-border);background:transparent;color:var(--gray-light);font-size:16px;cursor:pointer;transition:all .15s;font-family:var(--f-body);}
  .modal-cancel-btn:hover{border-color:var(--white-bright);color:var(--white-bright);}
  .modal-note{font-size:16px;color:var(--gray-light);text-align:center;margin-top:10px;}

  /* === TOAST === */
  .toast{position:fixed;bottom:24px;right:24px;background:var(--black-card);border:1px solid var(--nil-green);border-radius:10px;padding:14px 18px;font-size:16px;z-index:400;transform:translateY(80px);opacity:0;transition:all .3s;max-width:320px;}
  .toast.show{transform:translateY(0);opacity:1;}
  .toast-inner{display:flex;align-items:center;gap:10px;}
  .toast-icon{font-size:20px;}
  .toast-msg{line-height:1.4;}
  .toast-title{font-weight:700;color:var(--nil-green);}
  .toast-sub{font-size:16px;color:var(--gray-light);}

  /* === SKELETON LOADING === */
  .skeleton-line{background:linear-gradient(90deg,var(--black-soft) 25%,#1c1c1c 50%,var(--black-soft) 75%);background-size:200% 100%;border-radius:4px;height:16px;margin-bottom:8px;}
  .skeleton-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:16px;min-height:180px;}
  .skeleton-card .skeleton-line{margin-bottom:12px;}
  .skeleton-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(90deg,var(--black-soft) 25%,#1c1c1c 50%,var(--black-soft) 75%);background-size:200% 100%;}

  /* === EMPTY STATE === */
  .empty-state{text-align:center;padding:48px 20px;color:var(--gray-light);}
  .empty-icon{font-size:36px;margin-bottom:12px;}
  .empty-msg{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;color:var(--gray-light);margin:0 0 8px;}
  .empty-sub{font-size:16px;color:var(--gray-light);margin:0;}
  .loading-text{color:var(--gray-light);font-size:16px;padding:32px;text-align:center;}

  /* === ANIMATIONS === */
  .stagger-in{opacity:0;animation:nil-fadeInUp .3s ease both;}
  .skeleton-line,.skeleton-avatar{animation:nil-shimmer 1.4s infinite;}

  /* === REDUCED MOTION === */
  @media(prefers-reduced-motion:reduce){
    .stagger-in{animation:none;opacity:1;}
    .skeleton-line,.skeleton-avatar{animation:none;background:var(--black-soft);}
    .mkt-card{transition:none;}
    .tab-pane.active{animation:none;}
    .modal-overlay{transition:none;}
    .modal-box{transition:none;}
    .toast{transition:none;}
    .inv-card{transition:none;}
  }

  /* === RESPONSIVE: TABLET (<=1024px) === */
  @media(max-width:1024px){
    .mkt-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
    .inv-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
    .wallet-summary,.portfolio-header{grid-template-columns:repeat(2,1fr);}
  }

  /* === RESPONSIVE: MOBILE (<=767px) === */
  @media(max-width:767px){
    .page-header{padding:16px 12px;}
    .page-header-inner{flex-direction:column;gap:12px;}
    .balance-chip{width:100%;}
    .tab-bar{padding:0 12px;}
    .tab-pane{padding:16px 12px;}
    .mkt-grid{grid-template-columns:1fr 1fr;}
    .inv-grid{grid-template-columns:1fr;}
    .wallet-summary,.portfolio-header{grid-template-columns:1fr;}
    .filter-bar{gap:8px;}
    .search-box{width:100%;}
    .port-table{font-size:16px;}
    .port-table th,.port-table td{padding:8px 6px;}
    .tx-table{font-size:16px;}
    .tx-table th,.tx-table td{padding:8px 6px;}
    .modal-box{min-width:auto;padding:20px;}
    .playmoney-bar{padding:8px 12px;}
  }

  /* === RESPONSIVE: NARROW (<=359px) === */
  @media(max-width:359px){
    .page-header{padding:12px 8px;}
    .page-title{font-size:22px !important;}
    .tab-pane{padding:12px 8px;}
    .mkt-grid{grid-template-columns:1fr !important;}
    .mkt-stat-val{font-size:16px;}
    .wallet-stat-val,.port-stat-val{font-size:24px;}
    .bc-value{font-size:22px;}
    .inv-grid{grid-template-columns:1fr !important;}
    .hide-narrow{display:none !important;}
  }
}

/* keyframes hoisted to top level + route-prefixed (were global in nil/style.css) */
@keyframes nil-fadeSlide{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes nil-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes nil-fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* Workflow D — /nil-redeem folded from nil/redeem/style.css (per-page CSS folded) */
@layer components {
html[data-route="/nil/redeem"]{
  --rd-gap: clamp(12px, 2.2vw, 22px);
  --rd-pad: clamp(14px, 2.6vw, 26px);
  --rd-radius: 14px;

  .skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--brand-gold, #d4af37);
    color: #000;
    padding: 10px 16px;
    z-index: 100;
    font-weight: 700;
  }
  .skip:focus { left: 8px; top: 8px; }

  .app { min-height: 100vh; }

  .content {
    width: min(100% - 2 * clamp(12px, 4vw, 48px), 1320px);
    margin-inline: auto;
    padding-block: clamp(16px, 3vw, 32px);
  }

  /* Play-money banner */
  .playmoney-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--brand-gold, #d4af37) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-gold, #d4af37) 45%, transparent);
    border-radius: 10px;
    padding: clamp(10px, 1.8vw, 14px) clamp(12px, 2vw, 18px);
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.4;
    margin-bottom: var(--rd-gap);
  }
  .pm-icon { font-size: 1.2em; flex: none; }

  /* Header */
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rd-gap);
    margin-bottom: clamp(16px, 2.6vw, 26px);
  }
  .ph-left { min-width: 0; }
  .page-eyebrow {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 16px;
    letter-spacing: .18em;
    color: var(--brand-gold, #d4af37);
    text-transform: uppercase;
  }
  .page-title {
    font-family: var(--font-display, "Graduate", sans-serif);
    font-size: clamp(34px, 6vw, 58px);
    line-height: .95;
    margin: 4px 0 6px;
    letter-spacing: .01em;
  }
  .page-subtitle {
    margin: 0;
    max-width: 56ch;
    color: var(--gray-light, #b8b8c0);
    font-size: clamp(14px, 1.5vw, 17px);
  }

  /* Balance chip */
  .balance-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--black-card, #131318);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: 12px;
    padding: 12px 18px;
    flex: none;
  }
  .bc-icon { font-size: 1.8em; }
  .bc-label {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gray-light, #9a9aa4);
  }
  .bc-value {
    font-family: var(--font-numerals, var(--font-mono, monospace));
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    color: var(--brand-gold, #d4af37);
    line-height: 1.05;
  }
  .bc-sub { font-size: 16px; color: var(--gray-light, #8a8a94); }

  /* Filter bar */
  .filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: var(--rd-gap);
  }
  .filter-btn {
    appearance: none;
    background: var(--black-card, #131318);
    color: var(--gray-light, #c8c8d0);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: 999px;
    padding: 9px 18px;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .filter-btn:hover { border-color: var(--brand-gold, #d4af37); }
  .filter-btn.is-active {
    background: var(--brand-gold, #d4af37);
    color: #1a1207;
    border-color: var(--brand-gold, #d4af37);
    font-weight: 700;
  }
  .filter-btn:focus-visible {
    outline: 3px solid var(--accent-bright, #5aa9ff);
    outline-offset: 2px;
  }

  /* Grid */
  .redeem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--rd-gap);
  }

  .redeem-card {
    display: flex;
    flex-direction: column;
    background: var(--black-card, #131318);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: var(--rd-radius);
    padding: var(--rd-pad);
    position: relative;
    overflow: hidden;
  }
  .redeem-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--brand-gold, #d4af37);
    opacity: .8;
  }
  .redeem-card[data-kind="boost"]::before { background: var(--accent-bright, #5aa9ff); }

  .rc-kind {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono, monospace);
    font-size: 16px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 6px;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--brand-gold, #d4af37) 18%, transparent);
    color: var(--brand-gold, #d4af37);
  }
  .redeem-card[data-kind="boost"] .rc-kind {
    background: color-mix(in srgb, var(--accent-bright, #5aa9ff) 18%, transparent);
    color: var(--accent-bright, #7fbcff);
  }
  .rc-name {
    font-family: var(--font-display, "Graduate", sans-serif);
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.05;
    margin: 0 0 6px;
  }
  .rc-desc {
    font-size: 16px;
    color: var(--gray-light, #b0b0ba);
    line-height: 1.45;
    margin: 0 0 14px;
    flex: 1;
  }
  .rc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .rc-cost {
    font-family: var(--font-numerals, var(--font-mono, monospace));
    font-weight: 700;
    font-size: clamp(16px, 2vw, 20px);
    color: var(--brand-gold, #d4af37);
  }
  .rc-cost-sub { font-size: 16px; color: var(--gray-light, #8a8a94); display: block; }

  .btn {
    appearance: none;
    font: inherit;
    cursor: pointer;
    border-radius: 9px;
    padding: 10px 18px;
    font-weight: 700;
    border: 1px solid transparent;
    transition: transform .12s ease, background .15s ease, opacity .15s ease;
  }
  .btn:focus-visible {
    outline: 3px solid var(--accent-bright, #5aa9ff);
    outline-offset: 2px;
  }
  .btn-redeem {
    background: var(--brand-gold, #d4af37);
    color: #1a1207;
  }
  .btn-redeem:hover:not(:disabled) { transform: translateY(-1px); }
  .btn-redeem:disabled {
    background: var(--gray-border, #2a2a33);
    color: var(--gray-light, #7a7a84);
    cursor: not-allowed;
  }

  /* Skeleton */
  .skeleton-card {
    background: var(--black-card, #131318);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: var(--rd-radius);
    padding: var(--rd-pad);
    animation: nil-redeem-pulse 1.3s ease-in-out infinite;
  }
  .sk-line {
    height: 14px;
    border-radius: 5px;
    background: var(--gray-border, #2a2a33);
    margin-bottom: 12px;
  }

  .compliance-note {
    margin-top: clamp(20px, 3vw, 34px);
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--black-card, #131318);
    border: 1px solid var(--gray-border, #2a2a33);
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-light, #a8a8b2);
  }

  /* Empty / error state */
  .empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 16px;
    color: var(--gray-light, #9a9aa4);
  }

  /* Modal */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 200;
  }
  .modal-overlay[hidden] { display: none; }
  .modal-box {
    background: var(--black-card, #16161c);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: 16px;
    padding: clamp(20px, 3vw, 30px);
    width: min(100%, 440px);
    position: relative;
  }
  .modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--gray-light, #b0b0ba);
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
  }
  .modal-close:focus-visible { outline: 3px solid var(--accent-bright, #5aa9ff); outline-offset: 2px; }
  .modal-title {
    font-family: var(--font-display, "Graduate", sans-serif);
    font-size: clamp(24px, 3vw, 30px);
    margin: 0 0 4px;
  }
  .modal-sub { margin: 0 0 16px; color: var(--gray-light, #a8a8b2); font-size: 16px; }
  .modal-detail {
    background: var(--bg-page, #0a0a0e);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
  }
  .modal-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 16px;
  }
  .modal-label { color: var(--gray-light, #9a9aa4); }
  .modal-val { font-weight: 700; text-align: right; }
  .modal-val.gold { color: var(--brand-gold, #d4af37); font-family: var(--font-numerals, monospace); }
  .modal-actions { display: flex; gap: 10px; }
  .modal-actions .btn { flex: 1; }
  .btn-cancel { background: var(--gray-border, #23232b); color: var(--gray-light, #d0d0d8); }
  .btn-confirm { background: var(--brand-gold, #d4af37); color: #1a1207; }
  .btn-confirm:disabled { opacity: .6; cursor: not-allowed; }
  .modal-note { margin: 14px 0 0; font-size: 16px; text-align: center; color: var(--gray-light, #7a7a84); }

  /* Toast */
  .toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(8px);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--black-card, #16161c);
    border: 1px solid var(--gray-border, #2a2a33);
    border-left: 4px solid var(--brand-gold, #d4af37);
    border-radius: 12px;
    padding: 14px 18px;
    max-width: min(92vw, 420px);
    z-index: 300;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    animation: nil-redeem-toastIn .22s ease;
  }
  .toast[hidden] { display: none; }
  .toast.is-error { border-left-color: var(--danger, #e0556b); }
  .toast-icon { font-size: 1.3em; flex: none; }
  .toast-title { font-weight: 700; font-size: 16px; }
  .toast-sub { font-size: 16px; color: var(--gray-light, #a8a8b2); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
    .btn-redeem:hover:not(:disabled) { transform: none; }
  }
}

/* keyframes hoisted to top level + route-prefixed (were global in nil/redeem/style.css) */
@keyframes nil-redeem-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes nil-redeem-toastIn { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /pickems folded from pickems/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/pickems"] (static attr, FOUC-safe).
   Resets dropped (canonical reset/base own them); --f-display dropped so the
   canonical display token owns it; ex-:root vars scoped here; page keyframes
   route-prefixed (pickems-) to avoid cross-route collision.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/pickems"]{
  /* ex-:root local overrides (supplement canonical tokens; --f-display intentionally dropped) */
  --bg-surface-2: #1A1A1A;
  --hairline: rgba(255,255,255,.06);
  --hairline-2: rgba(255,255,255,.10);
  --green-correct: #3dba6e;
  --green-correct-bg: rgba(61,186,110,.12);
  --green-correct-border: rgba(61,186,110,.25);
  --red-wrong: rgba(255,26,26,.10);
  --red-wrong-border: rgba(255,26,26,.20);
  --streak-fire: #FF6A00;

  /* === SKIP LINK === */
  .skip{position:absolute;top:-100px;left:0;padding:8px 16px;background:var(--red-primary);color:#fff;z-index:100;font-size:16px;}
  .skip:focus{top:0;}

  /* === PAGE HEADER === */
  .page-header{background:linear-gradient(135deg,#0d0d0d 0%,#1a0000 50%,#0d0d0d 100%);border-bottom:2px solid var(--red-primary);padding:32px 24px 24px;position:relative;overflow:hidden;flex-shrink:0;}
  .page-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 20px,rgba(255,26,26,.03) 20px,rgba(255,26,26,.03) 21px);pointer-events:none;}
  .page-header-inner{position:relative;z-index:1;}
  .page-eyebrow{font-family:var(--f-display);font-size:16px;letter-spacing:.2em;color:var(--red-primary);text-transform:uppercase;display:block;margin-bottom:4px;}
  .page-title{font-family:var(--f-display);font-size:clamp(28px,4vw,48px);letter-spacing:.04em;color:var(--white-bright);margin:0 0 4px;line-height:1;}
  .page-subtitle{font-size:16px;color:var(--gray-light);margin:0;transition:opacity .2s;}

  /* === FOR FUN BANNER === */
  .fun-banner{display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(240,189,48,.06);border:1px solid rgba(240,189,48,.2);border-radius:8px;font-size:16px;color:#FFFFFF;margin-top:4px;}
  .fun-banner-icon{font-size:16px;flex-shrink:0;}
  .fun-banner-text{line-height:1.4;}
  .fun-banner-text strong{color:var(--white-bright);font-weight:700;}

  /* === CARD === */
  .card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;}
  .card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-border);gap:12px;flex-wrap:wrap;}
  .card-eyebrow{font-size:16px;font-family:var(--f-display);letter-spacing:.18em;color:var(--red-primary);text-transform:uppercase;}
  .card-title{font-family:var(--f-display);font-size:18px;letter-spacing:.06em;color:var(--white-bright);margin:0;}
  .card-body{padding:20px;}

  /* === BADGES === */
  .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
  .badge-gold{background:rgba(240,189,48,.12);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);}
  .badge-green{background:rgba(61,186,110,.12);color:#3dba6e;border:1px solid rgba(61,186,110,.25);}
  .badge-red{background:rgba(255,26,26,.12);color:var(--red-primary);border:1px solid rgba(255,26,26,.25);}
  .badge-gray{background:rgba(138,138,138,.12);color:var(--gray-light);border:1px solid rgba(138,138,138,.25);}
  .badge-streak{background:rgba(255,106,0,.12);color:var(--streak-fire);border:1px solid rgba(255,106,0,.3);}

  /* === LEAGUE TABS === */
  .league-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 4px;}
  .league-tab{padding:8px 16px;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;}
  .league-tab[aria-selected="true"],
  .league-tab.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  .league-tab:hover{color:var(--white-bright);}
  .league-tab:active{background:rgba(255,26,26,.22);transform:scale(.96);}
  .league-tab:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}

  /* === COUNTDOWN TIMER === */
  .countdown-wrap{display:flex;align-items:center;gap:12px;padding:14px 20px;background:linear-gradient(135deg,rgba(255,26,26,.05) 0%,rgba(255,26,26,.02) 100%);border-bottom:1px solid var(--gray-border);}
  .countdown-label{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:var(--red-primary);text-transform:uppercase;flex-shrink:0;}
  .countdown-timer{display:flex;gap:6px;align-items:baseline;}
  .cd-segment{display:flex;flex-direction:column;align-items:center;gap:2px;}
  .cd-num{font-family:var(--f-mono);font-size:22px;font-weight:700;color:var(--white-bright);line-height:1;}
  .cd-unit{font-size:16px;font-family:var(--f-display);letter-spacing:.12em;color:#B8B8B8;text-transform:uppercase;}
  .cd-sep{font-family:var(--f-mono);font-size:18px;color:#B8B8B8;line-height:1;padding-top:2px;}
  .countdown-locked{color:var(--red-primary);font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}

  /* === PAGE TABS === */
  .page-tabs{display:flex;gap:0;border-bottom:1px solid var(--gray-border);}
  .page-tab{padding:12px 20px;font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-light);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s;}
  .page-tab:hover{color:var(--white-bright);}
  .page-tab.active,.page-tab[aria-selected="true"]{color:var(--white-bright);border-bottom-color:var(--red-primary);}
  .page-tab:focus-visible{outline:2px solid var(--red-primary);outline-offset:-2px;}
  .tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:8px;font-size:16px;background:var(--red-primary);color:#fff;margin-left:4px;padding:0 3px;}

  /* === STATS STRIP === */
  .stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gray-border);border-bottom:1px solid var(--gray-border);}
  .ss-stat{background:var(--black-soft);padding:14px 16px;display:flex;flex-direction:column;gap:2px;}
  .ss-label{font-size:16px;font-family:var(--f-display);letter-spacing:.14em;color:#B8B8B8;text-transform:uppercase;}
  .ss-value{font-family:var(--f-mono);font-size:22px;font-weight:700;color:var(--white-bright);line-height:1;}
  .ss-sub{font-size:16px;color:#B8B8B8;}

  /* === WEEK NAV === */
  .week-nav{display:flex;align-items:center;gap:10px;}
  .wn-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:6px;color:var(--white-bright);font-size:16px;cursor:pointer;transition:border-color .15s;flex-shrink:0;}
  .wn-btn:hover{border-color:var(--red-primary);}
  .wn-btn:disabled{opacity:.35;cursor:default;}
  .wn-week{font-family:var(--f-display);font-size:20px;letter-spacing:.08em;color:var(--white-bright);min-width:100px;text-align:center;}

  /* === GAME PICK CARDS === */
  .picks-list{display:flex;flex-direction:column;gap:10px;padding:16px;}

  .pick-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;overflow:hidden;transition:border-color .15s,transform .18s,box-shadow .18s;}
  .pick-card:hover{border-color:rgba(255,26,26,.2);}
  .pick-card.is-locked{opacity:.7;pointer-events:none;}

  .pc-head{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--hairline);}
  .pc-time{font-size:16px;color:var(--gray-light);}
  .pc-status{font-size:16px;}

  .pc-body{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:12px 14px;}

  .pc-team{display:flex;flex-direction:column;gap:4px;}
  .pc-team.right{align-items:flex-end;text-align:right;}
  .pc-team-name{font-size:16px;font-weight:700;line-height:1.2;color:var(--white-bright);}
  .pc-team-record{font-size:16px;color:#B8B8B8;}

  .pc-pick-btn{width:100%;padding:9px 14px;border-radius:7px;border:1px solid var(--gray-border);background:var(--bg-surface-2);color:var(--white-bright);font-size:16px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:var(--f-body);}
  .pc-pick-btn:hover:not(:disabled){border-color:rgba(255,26,26,.4);color:var(--white-bright);}
  .pc-pick-btn.selected{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  .pc-pick-btn.correct{background:rgba(61,186,110,.15);border-color:#3dba6e;color:#3dba6e;}
  .pc-pick-btn.wrong{background:rgba(255,26,26,.08);border-color:rgba(255,26,26,.3);color:rgba(255,100,100,.7);}
  .pc-pick-btn:disabled{cursor:default;opacity:.6;}

  .pc-vs{font-family:var(--f-display);font-size:18px;color:#B8B8B8;text-align:center;letter-spacing:.06em;}
  .pc-spread{font-size:16px;color:#B8B8B8;text-align:center;margin-top:2px;}
  .pc-score{font-family:var(--f-mono);font-size:22px;font-weight:700;color:var(--white-bright);text-align:center;line-height:1;}
  .pc-final{font-size:16px;font-family:var(--f-display);letter-spacing:.1em;color:var(--gray-light);text-align:center;}
  .pc-score.live,.pc-final.live{color:#3dba6e;}
  .pc-spread--none{opacity:.5;font-style:italic;}

  /* === AGAINST-THE-SPREAD: PREDICTED MARGIN (#692) === */
  .pc-margin{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
    padding:10px 14px;border-top:1px solid var(--hairline);background:rgba(255,255,255,.015);}
  .pc-margin--hint{color:var(--gray-light);font-size:16px;font-style:italic;background:none;}
  .pc-margin-label{font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--gray-light);text-transform:uppercase;}
  .pc-stepper{display:inline-flex;align-items:center;gap:6px;}
  .pc-step{width:30px;height:30px;flex:0 0 30px;border-radius:7px;border:1px solid var(--gray-border);
    background:var(--bg-surface-2);color:var(--white-bright);font-size:18px;line-height:1;font-weight:700;
    cursor:pointer;transition:border-color .15s,background .15s;display:flex;align-items:center;justify-content:center;}
  .pc-step:hover{border-color:rgba(255,26,26,.4);background:rgba(255,26,26,.08);}
  .pc-step:active{transform:translateY(1px);}
  .pc-margin-input{width:56px;height:30px;text-align:center;border-radius:7px;border:1px solid var(--gray-border);
    background:var(--black-soft);color:var(--white-bright);font-family:var(--f-mono);font-size:16px;font-weight:700;
    -moz-appearance:textfield;}
  .pc-margin-input:focus{outline:none;border-color:var(--red-primary);}
  .pc-margin-input::-webkit-outer-spin-button,.pc-margin-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .pc-margin-unit{font-size:16px;color:var(--gray-light);}

  /* Final-state margin result (predicted vs actual + band) */
  .pc-margin--result{font-size:16px;}
  .pc-mr-line{color:var(--gray-light);}
  .pc-mr-line strong{color:var(--white-bright);font-family:var(--f-mono);}
  .pc-mr-band{font-family:var(--f-display);letter-spacing:.06em;font-size:16px;padding:2px 8px;border-radius:5px;
    border:1px solid var(--gray-border);}
  .pc-mr-pts{font-family:var(--f-mono);font-weight:700;}
  .pc-margin--result.band-tight .pc-mr-band,.pc-margin--result.band-tight .pc-mr-pts{color:#3dba6e;}
  .pc-margin--result.band-tight .pc-mr-band{border-color:rgba(61,186,110,.4);background:rgba(61,186,110,.1);}
  .pc-margin--result.band-mid .pc-mr-band,.pc-margin--result.band-mid .pc-mr-pts{color:var(--white-bright, #F5F5F5);}
  .pc-margin--result.band-mid .pc-mr-band{border-color:rgba(224,179,65,.4);background:rgba(224,179,65,.08);}
  .pc-margin--result.band-wide .pc-mr-band,.pc-margin--result.band-wide .pc-mr-pts{color:var(--gray-light);}

  /* === SCORING EXPLAINER (collapsible) === */
  .scoring-explainer{margin:0 16px 4px;border:1px solid var(--gray-border);border-radius:10px;
    background:var(--black-soft);overflow:hidden;}
  .sx-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;cursor:pointer;
    list-style:none;}
  .sx-summary::-webkit-details-marker{display:none;}
  .sx-summary-title{font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--white-bright);}
  .sx-summary-hint{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.1em;}
  .scoring-explainer[open] .sx-summary-hint::after{content:" ▲";}
  .scoring-explainer:not([open]) .sx-summary-hint::after{content:" ▼";}
  .sx-body{padding:0 14px 14px;border-top:1px solid var(--hairline);}
  .sx-intro{font-size:16px;line-height:1.5;color:var(--gray-light);margin:12px 0;}
  .sx-intro strong{color:var(--white-bright);}
  .sx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .sx-winner,.sx-band{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;
    padding:10px 6px;border:1px solid var(--gray-border);border-radius:8px;background:rgba(255,255,255,.02);}
  .sx-band-pts{font-family:var(--f-display);font-size:22px;line-height:1;color:var(--white-bright);}
  .sx-band-name{font-size:16px;font-weight:700;color:var(--white-bright);}
  .sx-band-range{font-size:16px;color:var(--gray-light);}
  .sx-winner{border-color:rgba(255,26,26,.3);}
  .sx-winner .sx-band-pts{color:var(--red-primary);}
  .sx-band.band-tight{border-color:rgba(61,186,110,.3);}
  .sx-band.band-tight .sx-band-pts{color:#3dba6e;}
  .sx-band.band-mid{border-color:rgba(224,179,65,.3);}
  .sx-band.band-mid .sx-band-pts{color:var(--white-bright, #F5F5F5);}
  .sx-note{font-size:16px;color:var(--gray-light);margin:12px 0 0;font-style:italic;}

  /* === SEED / SAMPLE-DATA BANNER === */
  .seed-banner{padding:10px 16px;background:rgba(224,179,65,.08);border-bottom:1px solid rgba(224,179,65,.25);
    color:var(--white-bright, #F5F5F5);font-size:16px;font-weight:600;letter-spacing:.03em;}

  /* === SUBMIT BAR === */
  .submit-bar{padding:14px 16px;border-top:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .submit-count{font-size:16px;color:var(--gray-light);}
  .submit-btn{padding:10px 24px;background:var(--red-primary);border:none;border-radius:8px;color:#fff;font-size:16px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:background .15s;font-family:var(--f-body);}
  .submit-btn:hover{background:#cc1515;}
  .submit-btn:disabled{background:var(--gray-border);color:var(--gray-light);cursor:default;}

  /* === RESULTS TAB === */
  .results-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gray-border);border-bottom:1px solid var(--gray-border);}
  .rt-stat{background:var(--black-soft);padding:16px 14px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
  .rt-num{font-family:var(--f-display);font-size:30px;line-height:1;letter-spacing:.02em;color:var(--white-bright);}
  .rt-stat.good .rt-num{color:#3dba6e;}
  .rt-stat.bad .rt-num{color:var(--red-primary);}
  .rt-lbl{font-size:16px;font-family:var(--f-display);letter-spacing:.14em;color:var(--gray-light);text-transform:uppercase;}

  .recap-week{border-bottom:1px solid var(--hairline);}
  .recap-week:last-child{border-bottom:none;}
  .recap-week-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--hairline);}
  .rw-title{font-family:var(--f-display);font-size:16px;letter-spacing:.08em;color:var(--white-bright);}
  .rw-sum{font-size:16px;color:var(--gray-light);text-align:right;}

  .recap-row{padding:9px 16px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16px;}
  .recap-row:last-child{border-bottom:none;}
  .recap-row.correct{background:rgba(61,186,110,.045);}
  .recap-row.incorrect{background:rgba(255,26,26,.04);}
  .rr-matchup{font-weight:600;color:var(--white-bright);flex:1;min-width:0;}
  .rr-pick{font-weight:700;color:#FFFFFF;}
  .rr-score{font-family:var(--f-mono);font-weight:700;color:var(--white-bright);}
  .rr-outcome{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:4px;font-size:16px;font-weight:700;}
  .rr-outcome.win{background:rgba(61,186,110,.15);color:#3dba6e;}
  .rr-outcome.loss{background:rgba(255,26,26,.12);color:var(--red-primary);}
  .rr-outcome.push{background:rgba(240,189,48,.14);color:#FFFFFF;padding:0 6px;font-size:16px;}
  .rr-outcome.pending{background:rgba(138,138,138,.12);color:var(--gray-light);padding:0 6px;}

  /* === STREAK DISPLAY === */
  .streak-row{display:flex;gap:16px;padding:14px 16px;border-top:1px solid var(--gray-border);background:var(--black-soft);}
  .streak-item{display:flex;flex-direction:column;gap:2px;flex:1;}
  .streak-label{font-size:16px;font-family:var(--f-display);letter-spacing:.14em;color:var(--gray-light);text-transform:uppercase;}
  .streak-value{font-family:var(--f-mono);font-size:18px;font-weight:700;color:var(--streak-fire);}
  .streak-sub{font-size:16px;color:var(--gray-light);}

  /* === LEADERBOARD === */
  .lb-table{width:100%;border-collapse:collapse;font-size:16px;}
  .lb-table th{font-family:var(--f-display);font-size:16px;letter-spacing:.12em;color:var(--gray-light);text-align:left;padding:8px 14px;border-bottom:1px solid var(--gray-border);white-space:nowrap;text-transform:uppercase;}
  .lb-table th.r{text-align:right;}
  .lb-table td{padding:10px 14px;border-bottom:1px solid var(--hairline);vertical-align:middle;}
  .lb-table td.r{text-align:right;}
  .lb-table tr:last-child td{border-bottom:none;}
  .lb-table tbody tr{transition:background .15s;}
  .lb-table tbody tr:hover td{background:rgba(255,26,26,.04);}
  .lb-table tr.is-me td{background:rgba(255,26,26,.06);}

  .lb-rank{font-family:var(--f-display);font-size:18px;width:28px;}
  .lb-rank.r1{color:#FFD700;}
  .lb-rank.r2{color:#C0C0C0;}
  .lb-rank.r3{color:#CD7F32;}
  .lb-rank.rn{color:var(--gray-light);}

  .lb-name{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0;}
  .lb-av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;}
  .lb-av-ini{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--bg-surface-2);border:1px solid var(--gray-border);font-size:16px;font-weight:700;color:var(--gray-light);flex-shrink:0;}
  .lb-uname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lb-correct{font-family:var(--f-mono);font-size:16px;font-weight:700;color:#3dba6e;text-align:right;}
  .lb-pct{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);text-align:right;}
  .lb-streak{font-family:var(--f-mono);font-size:16px;color:var(--streak-fire);text-align:right;}

  /* === REWARD BADGES (cosmetic only) === */
  .reward-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:10px;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid;}
  .reward-badge.hot-streak{background:rgba(255,106,0,.1);color:var(--streak-fire);border-color:rgba(255,106,0,.3);}
  .reward-badge.perfect-week{background:rgba(240,189,48,.1);color:#FFFFFF;border-color:rgba(255,255,255,.3);}
  .reward-badge.iron-picker{background:rgba(138,138,138,.1);color:var(--gray-light);border-color:rgba(138,138,138,.3);}
  .reward-badge.season-champ{background:rgba(255,26,26,.1);color:var(--red-primary);border-color:rgba(255,26,26,.3);}
  .reward-flair{font-size:16px;margin-right:2px;}

  /* === COSMETIC REWARDS SECTION === */
  .rewards-section{padding:16px;border-top:1px solid var(--gray-border);}
  .rewards-title{font-family:var(--f-display);font-size:16px;letter-spacing:.12em;color:var(--gray-light);text-transform:uppercase;margin:0 0 10px;}
  .rewards-grid{display:flex;gap:8px;flex-wrap:wrap;}
  .reward-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:8px;min-width:140px;transition:border-color .15s;}
  .reward-card.earned{border-color:#FFFFFF;}
  .reward-card.locked{opacity:.4;}
  .rc-icon{font-size:24px;flex-shrink:0;}
  .rc-info{display:flex;flex-direction:column;gap:2px;}
  .rc-name{font-size:16px;font-weight:700;color:var(--white-bright);}
  .rc-desc{font-size:16px;color:var(--gray-light);}

  /* === EMPTY STATE === */
  .empty-state{text-align:center;padding:48px 20px;color:var(--gray-light);}
  .empty-icon{font-size:36px;margin-bottom:12px;}
  .empty-msg{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;color:var(--gray-light);margin:0 0 8px;}
  .empty-sub{font-size:16px;color:var(--gray-light);margin:0;}

  /* === SKELETON === */
  .skeleton-line{background:linear-gradient(90deg,var(--black-soft) 25%,#1c1c1c 50%,var(--black-soft) 75%);background-size:200% 100%;border-radius:4px;height:16px;margin-bottom:8px;}
  .skeleton-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;padding:20px;margin-bottom:10px;}

  /* === ANIMATIONS === */
  .stagger-in{opacity:0;animation:pickems-fadeInUp .25s ease both;}
  .skeleton-line{animation:pickems-shimmer 1.4s infinite;}
  .pulse{animation:pickems-pulse 2s ease-in-out infinite;}

  @media(prefers-reduced-motion:reduce){
    .stagger-in{animation:none !important;opacity:1;}
    .skeleton-line{animation:none !important;background:var(--black-soft);}
    .pulse{animation:none !important;}
    .pick-card,.pc-pick-btn,.league-tab,.page-tab,.wn-btn,.submit-btn{transition:none !important;}
  }

  /* === RESPONSIVE: TABLET (767px) === */
  @media(max-width:767px){
    .page-header{padding:16px 12px;}

    .stats-strip{grid-template-columns:1fr 1fr;}
    .results-totals{grid-template-columns:1fr 1fr;}
    .rt-num{font-size:26px;}

    .page-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    .page-tabs::-webkit-scrollbar{display:none;}
    .page-tab{flex:0 0 auto;white-space:nowrap;padding:12px 16px;}

    .pc-team-name{font-size:16px;}
    .pc-pick-btn{padding:6px 10px;font-size:16px;}

    .sx-grid{grid-template-columns:1fr 1fr;}
    .pc-margin{gap:8px;}

    .countdown-wrap{flex-wrap:wrap;}
    .cd-num{font-size:18px;}

    .recap-row{font-size:16px;gap:6px;}
    .streak-row{flex-wrap:wrap;gap:10px;}

    .rewards-grid{flex-direction:column;}
    .reward-card{min-width:unset;}

    .lb-table{font-size:16px;}
  }

  /* === RESPONSIVE: SMALL PHONE (359px) === */
  @media(max-width:359px){
    .page-header{padding:12px 8px;}
    .page-title{font-size:22px !important;}
    .card-header{padding:12px 14px;}
    .card-body{padding:12px 10px;}

    .stats-strip{grid-template-columns:1fr 1fr;}
    .ss-value{font-size:18px;}

    .pc-body{grid-template-columns:1fr auto 1fr;}

    .hide-xs{display:none !important;}

    .countdown-wrap{padding:10px 12px;}
    .cd-num{font-size:16px;}

    .lb-table th,.lb-table td{padding:8px 10px;}
  }
}

/* keyframes hoisted to top level + route-prefixed (were global in pickems/style.css) */
@keyframes pickems-fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pickems-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes pickems-pulse{0%,100%{opacity:1}50%{opacity:.5}}
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /running-the-gauntlet folded from running-the-gauntlet/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/running-the-gauntlet"] (static attr, FOUC-safe).
   Resets dropped (canonical reset/base own them); --f-display dropped so the
   canonical display token owns it (none present here); ex-:root vars scoped
   here; page keyframes route-prefixed (running-the-gauntlet-) to avoid
   cross-route collision. Bare @import for fonts dropped (invalid inside a
   nested style rule; fonts load via global tokens/base stylesheets).
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/running-the-gauntlet"]{
  /* ex-:root local overrides (RTG-specific; --f-display intentionally omitted — none present) */
  --rtg-streak-flame: #FF6A00;
  --rtg-win:          #5AD07A;
  --rtg-loss:         #FF3B30;
  --rtg-draw:         #F0BD30;
  --rtg-arena-bg:     #0D0D0D;
  --rtg-ticker-speed: 600ms;

  /* -- Skip link ------------------------------------------------ */
  .skip { position: absolute; top: -100px; left: 0; padding: 8px 16px; background: var(--red-primary, #FF1A1A); color: #fff; z-index: var(--sns-z-skip, 100); font-family: var(--f-body); font-size: 16px; }
  .skip:focus { top: 0; }

  /* -- Mobile nav (chrome.js sidebar drawer) -------------------- */
  /* Desktop: sidebar lives in the grid; burger/scrim/toggle hidden. */
  .mob-nav-toggle { display: none; }
  .mob-nav-burger {
    display: none;
    position: fixed; top: 14px; left: 14px;
    z-index: var(--sns-z-mobile-burger, 60);
    background: var(--black-card, #0A0A0A);
    border: 1px solid var(--red-primary, #FF1A1A);
    border-radius: var(--sns-radius-lg, 8px);
    padding: 6px 8px; color: var(--white-bright, #F5F5F5);
    box-shadow: var(--sns-shadow-burger, 0 0 12px rgba(255,0,0,.3));
  }
  .mob-nav-burger:focus-visible { outline: 2px solid var(--red-bright, #FF3B30); outline-offset: 2px; }
  .mob-nav-scrim { display: none; }

  /* -- App layout ----------------------------------------------- */
  .app { display: grid; grid-template-columns: var(--sidebar-w, 250px) minmax(0, 1fr); min-height: 100vh; max-width: var(--sns-app-max, 1440px); margin: 0 auto; }
  .content { display: flex; flex-direction: column; gap: var(--row-gap, 24px); padding: var(--sns-content-px-dt, 24px); padding-bottom: 48px; min-width: 0; }

  /* -- Page header ---------------------------------------------- */
  .page-header {
    background: var(--sns-grad-page-header, linear-gradient(135deg,#0d0d0d 0%,#1a0000 50%,#0d0d0d 100%));
    border: 1px solid rgba(255,26,26,0.45); border-radius: var(--sns-radius-2xl, 12px);
    padding: 28px 32px; box-shadow: var(--sns-shadow-card);
    position: relative; overflow: hidden;
    animation: running-the-gauntlet-rtg-fade-in 0.5s var(--sns-ease-soft, ease) both;
  }
  .page-header::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(800px 200px at 80% -10%, rgba(255,42,42,0.12), transparent 60%);
  }
  .page-header h1 {
    font-family: var(--f-display, 'Graduate', sans-serif);
    font-size: clamp(36px, 5vw, 56px); letter-spacing: var(--sns-ls-base, 0.04em);
    line-height: var(--sns-lh-title, 1.05); text-transform: uppercase;
    color: var(--white-bright); text-shadow: 0 0 12px rgba(255,42,42,0.45); position: relative;
  }
  .page-header .subtitle { font-size: var(--sns-fs-14, 14px); color: var(--gray-light, #8A8A8A); margin-top: 6px; max-width: 60ch; }
  .header-badges { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .header-badge {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: var(--sns-fs-10, 10px); letter-spacing: var(--sns-ls-eyebrow, 0.12em);
    padding: 4px 8px; background: rgba(240,189,48,0.08);
    border: 1px solid rgba(240,189,48,0.35); border-radius: var(--sns-radius-sm, 4px);
    color: var(--white-bright, #F5F5F5); text-transform: uppercase;
  }

  /* -- Section cards -------------------------------------------- */
  .section-card {
    background: var(--sns-grad-card, linear-gradient(180deg, #0D0D0D, #050505));
    border: 1px solid rgba(255,26,26,0.35); border-radius: var(--sns-radius-xl, 10px);
    padding: var(--card-pad, 20px); box-shadow: var(--sns-shadow-card);
    animation: running-the-gauntlet-rtg-fade-in 0.5s var(--sns-ease-soft) both;
  }
  .section-card h2 {
    font-family: var(--f-display); font-size: var(--sns-fs-24, 24px);
    letter-spacing: var(--sns-ls-base, 0.04em); text-transform: uppercase;
    color: var(--white-bright); margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
  }
  .section-card h2 .icon { color: var(--red-primary); font-size: 20px; }

  /* -- Rules / Explanation -------------------------------------- */
  .rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
  .rule-item {
    display: flex; gap: 12px; padding: 14px; background: var(--black-soft, #111);
    border: 1px solid var(--hairline-2, rgba(255,255,255,0.10)); border-radius: var(--sns-radius-lg, 8px);
    transition: border-color var(--sns-dur-base, 200ms) ease;
  }
  .rule-item:hover { border-color: rgba(255,26,26,0.35); }
  .rule-icon {
    flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,26,26,0.08); border-radius: var(--sns-radius-md, 6px);
    color: var(--red-primary); font-size: 18px;
  }
  .rule-text h3 { font-family: var(--f-display); font-size: var(--sns-fs-17, 17px); letter-spacing: var(--sns-ls-tight, 0.02em); text-transform: uppercase; color: var(--white-bright); margin-bottom: 4px; }
  .rule-text p { font-size: var(--sns-fs-13, 13px); color: var(--gray-light); line-height: 1.45; }

  /* -- Battle Arena --------------------------------------------- */
  .arena {
    background: var(--rtg-arena-bg); border: 1px solid rgba(255,26,26,0.55);
    border-radius: var(--sns-radius-2xl, 12px); box-shadow: var(--sns-shadow-card-hover);
    overflow: hidden; animation: running-the-gauntlet-rtg-fade-in 0.6s var(--sns-ease-soft) both; animation-delay: 0.1s;
  }
  .arena-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; background: linear-gradient(90deg, rgba(255,26,26,0.12), transparent 40%, rgba(255,26,26,0.12));
    border-bottom: 1px solid rgba(255,26,26,0.25);
  }
  .arena-title { font-family: var(--f-display); font-size: var(--sns-fs-22, 22px); letter-spacing: var(--sns-ls-base); text-transform: uppercase; }
  .arena-round { font-family: var(--f-mono); font-size: var(--sns-fs-11, 11px); color: #FFFFFF; letter-spacing: var(--sns-ls-eyebrow); text-transform: uppercase; }
  .arena-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px; gap: 16px; }
  .arena-team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .arena-team.is-away { align-items: flex-end; }
  .team-avatar {
    width: 56px; height: 56px; border-radius: 50%; background: var(--sns-grad-avatar);
    border: 2px solid var(--red-primary); box-shadow: 0 0 12px rgba(255,26,26,0.3);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-size: var(--sns-fs-22); color: var(--white-bright);
  }
  .team-name { font-family: var(--f-display); font-size: var(--sns-fs-18, 18px); letter-spacing: var(--sns-ls-tight); text-transform: uppercase; }
  .team-record { font-family: var(--f-mono); font-size: var(--sns-fs-11); color: var(--gray-light); letter-spacing: var(--sns-ls-mono, 0.08em); }
  .arena-vs { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .vs-badge { font-family: var(--f-display); font-size: var(--sns-fs-28, 28px); color: var(--red-primary); text-shadow: 0 0 16px rgba(255,26,26,0.5); letter-spacing: var(--sns-ls-wide, 0.20em); }
  .arena-scores { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 20px 16px; gap: 16px; }
  .arena-score { font-family: var(--f-mono); font-size: var(--sns-fs-44, 44px); font-weight: 700; text-align: center; line-height: 1; color: var(--white-bright); text-shadow: 0 0 8px rgba(255,255,255,0.15); }
  .arena-score.is-winning { color: var(--rtg-win); text-shadow: 0 0 12px rgba(90,208,122,0.4); }
  .arena-score.is-losing { color: var(--rtg-loss); text-shadow: 0 0 12px rgba(255,59,48,0.4); }
  .score-dash { font-family: var(--f-display); font-size: var(--sns-fs-24); color: var(--gray-light); }

  /* -- Position matchups ---------------------------------------- */
  .matchups { border-top: 1px solid rgba(255,26,26,0.15); }
  .matchup-row {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 12px 20px; border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.06));
    transition: background var(--sns-dur-base) ease;
  }
  .matchup-row:hover { background: rgba(255,26,26,0.04); }
  .matchup-row:last-child { border-bottom: none; }
  .matchup-player { display: flex; align-items: center; gap: 10px; }
  .matchup-player.is-away { flex-direction: row-reverse; text-align: right; }
  .pos-pill {
    font-family: var(--f-mono); font-size: var(--sns-fs-10, 10px); font-weight: 700;
    letter-spacing: var(--sns-ls-eyebrow); padding: 2px 6px; border-radius: var(--sns-radius-xs, 3px);
    text-transform: uppercase; flex-shrink: 0;
  }
  .pos-qb { color: var(--sns-pos-qb-text); background: var(--sns-pos-qb-bg); }
  .pos-rb { color: var(--sns-pos-rb-text); background: var(--sns-pos-rb-bg); }
  .pos-wr { color: var(--sns-pos-wr-text); background: var(--sns-pos-wr-bg); }
  .pos-te { color: var(--sns-pos-te-text); background: var(--sns-pos-te-bg); }
  .pos-k  { color: var(--sns-pos-k-text);  background: var(--sns-pos-k-bg); }
  .matchup-name { font-size: var(--sns-fs-14); font-weight: 600; color: var(--white-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .matchup-pts { font-family: var(--f-mono); font-size: var(--sns-fs-13); color: var(--gray-light); }
  .matchup-pos-label { font-family: var(--f-display); font-size: var(--sns-fs-13); letter-spacing: var(--sns-ls-eyebrow); color: var(--gray-light); text-transform: uppercase; text-align: center; min-width: 40px; }
  .matchup-win { color: var(--rtg-win); }
  .matchup-loss { color: var(--rtg-loss); }

  /* -- Score ticker --------------------------------------------- */
  .ticker { overflow: hidden; background: var(--black-card, #0A0A0A); border: 1px solid rgba(255,26,26,0.25); border-radius: var(--sns-radius-lg, 8px); padding: 0; }
  .ticker-header {
    font-family: var(--f-mono); font-size: var(--sns-fs-10); letter-spacing: var(--sns-ls-eyebrow);
    color: var(--red-primary); text-transform: uppercase; padding: 8px 14px;
    border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 6px;
  }
  .ticker-dot { width: 6px; height: 6px; background: var(--red-primary); border-radius: 50%; animation: running-the-gauntlet-ticker-pulse 2s ease-in-out infinite; }
  .ticker-events { max-height: 200px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--red-primary) transparent; }
  .ticker-event {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    border-bottom: 1px solid var(--hairline); font-size: var(--sns-fs-13);
    animation: running-the-gauntlet-ticker-slide-in var(--rtg-ticker-speed) var(--sns-ease-snappy, ease) both;
  }
  .ticker-event:last-child { border-bottom: none; }
  .ticker-event .te-time { font-family: var(--f-mono); font-size: var(--sns-fs-10); color: var(--gray-light); flex-shrink: 0; min-width: 40px; }
  .ticker-event .te-icon { flex-shrink: 0; font-size: 16px; }
  .ticker-event .te-text { flex: 1; color: var(--white-bright); }
  .ticker-event .te-pts { font-family: var(--f-mono); font-weight: 700; color: var(--rtg-win); flex-shrink: 0; }
  .ticker-event .te-pts.is-opp { color: var(--rtg-loss); }

  /* -- Result screen -------------------------------------------- */
  .result-screen {
    text-align: center; padding: 40px 24px; border-radius: var(--sns-radius-2xl);
    border: 1px solid rgba(255,26,26,0.5); position: relative; overflow: hidden;
    animation: running-the-gauntlet-rtg-fade-in 0.5s var(--sns-ease-soft) both;
  }
  .result-screen.is-win { background: linear-gradient(180deg, rgba(90,208,122,0.08), var(--black-bg)); border-color: rgba(90,208,122,0.4); }
  .result-screen.is-loss { background: linear-gradient(180deg, rgba(255,59,48,0.08), var(--black-bg)); border-color: rgba(255,59,48,0.4); }
  .result-label { font-family: var(--f-display); font-size: clamp(48px, 8vw, 72px); letter-spacing: var(--sns-ls-display, 0.06em); text-transform: uppercase; margin-bottom: 8px; line-height: 1; }
  .result-screen.is-win .result-label { color: var(--rtg-win); text-shadow: 0 0 24px rgba(90,208,122,0.5); }
  .result-screen.is-loss .result-label { color: var(--rtg-loss); text-shadow: 0 0 24px rgba(255,59,48,0.5); }
  .result-score { font-family: var(--f-mono); font-size: var(--sns-fs-32, 32px); font-weight: 700; color: var(--white-bright); margin-bottom: 24px; }
  .result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; max-width: 600px; margin: 0 auto; }
  .result-stat { padding: 14px; background: var(--black-soft); border: 1px solid var(--hairline-2); border-radius: var(--sns-radius-lg); }
  .result-stat .rs-val { font-family: var(--f-mono); font-size: var(--sns-fs-22); font-weight: 700; color: #FFFFFF; display: block; }
  .result-stat .rs-label { font-family: var(--f-mono); font-size: var(--sns-fs-10); letter-spacing: var(--sns-ls-eyebrow); color: var(--gray-light); text-transform: uppercase; margin-top: 4px; }
  .result-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

  /* -- Buttons -------------------------------------------------- */
  .btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; font-family: var(--f-display); font-size: var(--sns-fs-17);
    letter-spacing: var(--sns-ls-button, 0.14em); text-transform: uppercase;
    background: var(--sns-grad-btn-primary); color: #fff;
    border: 1px solid var(--red-bright); border-radius: var(--sns-radius-lg);
    box-shadow: var(--sns-shadow-btn-primary);
    transition: box-shadow var(--sns-dur-base) ease, transform var(--sns-dur-snap, 120ms) ease;
    min-height: var(--sns-touch-target, 44px); cursor: pointer; position: relative; overflow: hidden;
  }
  .btn-primary::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-100%); animation: running-the-gauntlet-shimmer var(--sns-dur-shimmer, 3000ms) ease-in-out infinite;
  }
  .btn-primary:hover { box-shadow: var(--sns-shadow-btn-primary-h); transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0) scale(0.98); }
  .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; font-family: var(--f-display); font-size: var(--sns-fs-17);
    letter-spacing: var(--sns-ls-button); text-transform: uppercase;
    background: var(--black-soft); color: var(--white-bright);
    border: 1px solid var(--gray-border, #2A2A2A); border-radius: var(--sns-radius-lg);
    transition: border-color var(--sns-dur-base) ease, background var(--sns-dur-base) ease;
    min-height: var(--sns-touch-target); cursor: pointer;
  }
  .btn-secondary:hover { border-color: var(--red-primary); background: rgba(255,26,26,0.06); }

  /* -- Streak tracker ------------------------------------------- */
  .streak-bar {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    background: var(--black-card); border: 1px solid rgba(255,106,0,0.35);
    border-radius: var(--sns-radius-xl); box-shadow: 0 0 12px rgba(255,106,0,0.15);
    animation: running-the-gauntlet-rtg-fade-in 0.5s var(--sns-ease-soft) both; animation-delay: 0.15s;
  }
  .streak-flame { font-size: 28px; animation: running-the-gauntlet-flame-bob 1.5s ease-in-out infinite alternate; }
  .streak-info { flex: 1; }
  .streak-label { font-family: var(--f-display); font-size: var(--sns-fs-20, 20px); letter-spacing: var(--sns-ls-base); text-transform: uppercase; color: var(--rtg-streak-flame); }
  .streak-count { font-family: var(--f-mono); font-size: var(--sns-fs-13); color: var(--gray-light); letter-spacing: var(--sns-ls-mono); }
  .streak-badges { display: flex; gap: 6px; }
  .streak-pip { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); transition: all var(--sns-dur-base) ease; }
  .streak-pip.is-win { background: var(--rtg-win); border-color: var(--rtg-win); box-shadow: 0 0 6px rgba(90,208,122,0.5); }
  .streak-pip.is-loss { background: var(--rtg-loss); border-color: var(--rtg-loss); box-shadow: 0 0 6px rgba(255,59,48,0.5); }
  .streak-pip.is-pending { background: transparent; border-color: var(--gray-border); }

  /* -- Leaderboard ---------------------------------------------- */
  .leaderboard-table { width: 100%; border-collapse: collapse; }
  .leaderboard-table th {
    font-family: var(--f-mono); font-size: var(--sns-fs-10); letter-spacing: var(--sns-ls-eyebrow);
    color: var(--gray-light); text-transform: uppercase; text-align: left;
    padding: 8px 12px; border-bottom: 1px solid var(--gray-border);
  }
  .leaderboard-table th:last-child, .leaderboard-table td:last-child { text-align: right; }
  .leaderboard-table td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); font-size: var(--sns-fs-14); vertical-align: middle; }
  .leaderboard-table tr:hover td { background: rgba(255,26,26,0.04); }
  .lb-rank { font-family: var(--f-mono); font-weight: 700; color: #FFFFFF; min-width: 28px; display: inline-block; }
  .lb-rank.is-gold { color: #D4A847; }
  .lb-rank.is-silver { color: #CFD2D6; }
  .lb-rank.is-bronze { color: #C7884A; }
  .lb-user { display: flex; align-items: center; gap: 10px; }
  .lb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--sns-grad-avatar); border: 1px solid var(--hairline-2); flex-shrink: 0; }
  .lb-name { font-weight: 600; }
  .lb-name.is-you { color: #FFFFFF; }
  .lb-streak-val { font-family: var(--f-mono); font-weight: 700; color: var(--rtg-streak-flame); }
  .lb-badge {
    display: inline-flex; align-items: center; gap: 4px; font-size: var(--sns-fs-10);
    padding: 2px 6px; border-radius: var(--sns-radius-xs);
    background: rgba(255,106,0,0.1); border: 1px solid rgba(255,106,0,0.3); color: var(--rtg-streak-flame);
  }
  .lb-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
  .lb-tab {
    padding: 8px 16px; font-family: var(--f-display); font-size: var(--sns-fs-14);
    letter-spacing: var(--sns-ls-button); text-transform: uppercase;
    border-radius: var(--sns-radius-md); border: 1px solid var(--hairline-2);
    background: transparent; color: var(--gray-light); cursor: pointer;
    transition: all var(--sns-dur-base) ease; min-height: var(--sns-touch-target);
  }
  .lb-tab:hover { border-color: var(--red-primary); color: var(--white-bright); }
  .lb-tab.is-active { background: var(--red-primary); border-color: var(--red-primary); color: #fff; }

  /* -- Challenge friends ---------------------------------------- */
  .challenge-card {
    display: flex; align-items: center; gap: 16px; padding: 16px 20px;
    background: var(--black-soft); border: 1px solid var(--hairline-2);
    border-radius: var(--sns-radius-lg); transition: border-color var(--sns-dur-base) ease;
  }
  .challenge-card:hover { border-color: rgba(255,26,26,0.35); }
  .challenge-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--sns-grad-avatar);
    border: 1px solid var(--hairline-2); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-size: var(--sns-fs-18); color: var(--gray-light);
  }
  .challenge-info { flex: 1; min-width: 0; }
  .challenge-name { font-weight: 600; font-size: var(--sns-fs-14); color: var(--white-bright); }
  .challenge-record { font-family: var(--f-mono); font-size: var(--sns-fs-11); color: var(--gray-light); letter-spacing: var(--sns-ls-mono); }
  .challenge-btn {
    padding: 8px 16px; font-family: var(--f-display); font-size: var(--sns-fs-13);
    letter-spacing: var(--sns-ls-button); text-transform: uppercase;
    background: rgba(255,26,26,0.12); border: 1px solid var(--red-primary);
    border-radius: var(--sns-radius-md); color: var(--red-primary); cursor: pointer;
    transition: all var(--sns-dur-base) ease; white-space: nowrap; min-height: var(--sns-touch-target);
  }
  .challenge-btn:hover { background: var(--red-primary); color: #fff; }
  .challenge-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

  /* -- Rewards / Badges ----------------------------------------- */
  .rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
  .reward-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 12px; background: var(--black-soft);
    border: 1px solid var(--hairline-2); border-radius: var(--sns-radius-lg);
    text-align: center; transition: border-color var(--sns-dur-base) ease, transform var(--sns-dur-snap) ease;
  }
  .reward-tile:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-2px); }
  .reward-tile.is-locked { opacity: 0.4; filter: grayscale(0.8); }
  .reward-icon { font-size: 32px; line-height: 1; }
  .reward-name { font-family: var(--f-display); font-size: var(--sns-fs-13); letter-spacing: var(--sns-ls-tight); text-transform: uppercase; color: var(--white-bright); }
  .reward-desc { font-size: var(--sns-fs-11); color: var(--gray-light); line-height: 1.35; }

  /* -- Skeleton loading ----------------------------------------- */
  .skeleton {
    background: linear-gradient(90deg, var(--black-soft) 25%, rgba(255,255,255,0.06) 50%, var(--black-soft) 75%);
    background-size: 200% 100%; animation: running-the-gauntlet-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--sns-radius-sm); color: transparent !important; pointer-events: none; user-select: none;
  }
  .skeleton * { visibility: hidden; }
  .skeleton-text { height: 14px; margin-bottom: 8px; border-radius: var(--sns-radius-sm); }
  .skeleton-text.w-75 { width: 75%; }
  .skeleton-text.w-50 { width: 50%; }
  .skeleton-text.w-100 { width: 100%; }
  .skeleton-circle { border-radius: 50%; }
  .skeleton-card { min-height: 120px; }

  /* -- Two-column layout ---------------------------------------- */
  .two-col { display: grid; grid-template-columns: 2fr 1fr; gap: var(--row-gap); align-items: start; }

  /* -- Toast ---------------------------------------------------- */
  .rtg-toast {
    position: fixed; bottom: 24px; right: 24px; padding: 14px 20px;
    background: var(--sns-grad-toast); border: 1px solid rgba(255,26,26,0.4);
    border-radius: var(--sns-radius-lg); box-shadow: var(--sns-shadow-toast);
    font-size: var(--sns-fs-14); color: var(--white-bright);
    z-index: var(--sns-z-toast, 1100); transform: translateY(120%);
    transition: transform 0.3s var(--sns-ease-snappy); pointer-events: none;
  }
  .rtg-toast.is-visible { transform: translateY(0); pointer-events: auto; }

  /* -- Visually hidden (a11y) ----------------------------------- */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* -- Responsive: Tablet (<=767px) ----------------------------- */
  @media (max-width: 767px) {
    .app { grid-template-columns: 1fr; }
    .mob-nav-burger { display: flex; align-items: center; justify-content: center; }
    .mob-nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: var(--sns-z-mobile-scrim, 55); }
    .mob-nav-toggle:checked ~ .mob-nav-scrim { display: block; }
    /* leave room for the fixed burger at top-left */
    .content { padding: 60px var(--sns-content-px-mb, 12px) 80px; gap: 16px; }
    .page-header { padding: 20px 16px; }
    .page-header h1 { font-size: clamp(28px, 7vw, 40px); }
    .rules-grid { grid-template-columns: 1fr; }
    .arena-teams { padding: 16px 12px; }
    .team-avatar { width: 44px; height: 44px; }
    .arena-score { font-size: var(--sns-fs-32); }
    .matchup-row { padding: 10px 12px; gap: 8px; }
    .matchup-name { font-size: var(--sns-fs-13); max-width: 10ch; }
    .two-col { grid-template-columns: 1fr; }
    .result-label { font-size: clamp(36px, 10vw, 56px); }
    .result-stats { grid-template-columns: repeat(2, 1fr); }
    .rewards-grid { grid-template-columns: repeat(2, 1fr); }
    .leaderboard-table { font-size: var(--sns-fs-13); }
    .leaderboard-table th, .leaderboard-table td { padding: 8px; }
    .streak-bar { padding: 12px 14px; gap: 10px; }
  }

  /* -- Responsive: Small mobile (<=359px) ----------------------- */
  @media (max-width: 359px) {
    .content { padding: 8px; gap: 12px; }
    .page-header { padding: 16px 12px; }
    .section-card { padding: 12px; }
    .arena-teams { padding: 12px 8px; gap: 8px; }
    .team-avatar { width: 36px; height: 36px; font-size: var(--sns-fs-14); }
    .team-name { font-size: var(--sns-fs-14); }
    .arena-score { font-size: var(--sns-fs-24); }
    .matchup-name { max-width: 8ch; }
    .btn-primary, .btn-secondary { padding: 10px 16px; font-size: var(--sns-fs-14); }
    .result-stats { grid-template-columns: 1fr 1fr; }
    .rewards-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .challenge-card { padding: 12px; gap: 10px; }
  }

  /* -- Reduced motion ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .skeleton { animation: none; background: var(--black-soft); }
    .streak-flame { animation: none; }
    .btn-primary::after { animation: none; }
    .ticker-dot { animation: none; }
  }
}

/* keyframes hoisted to top level + route-prefixed (were global in running-the-gauntlet/style.css) */
@keyframes running-the-gauntlet-ticker-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes running-the-gauntlet-ticker-slide-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes running-the-gauntlet-shimmer { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } }
@keyframes running-the-gauntlet-flame-bob { from { transform: translateY(0) scale(1); } to { transform: translateY(-3px) scale(1.05); } }
@keyframes running-the-gauntlet-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes running-the-gauntlet-rtg-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /duels folded from duels/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/duels"] (static attr, FOUC-safe).
   Resets dropped (canonical reset/base own them); --f-display dropped so the
   canonical display token owns it (none present here); no ex-:root vars here;
   page keyframes route-prefixed (duels-) to avoid cross-route collision.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/duels"]{

  /* === SKIP LINK === */
  .skip{position:absolute;top:-100px;left:0;padding:8px 16px;background:var(--red-primary);color:#fff;z-index:var(--sns-z-skip);}.skip:focus{top:0;}

  /* === LAYOUT === */

  /* === PAGE HEADER === */
  .page-header{background:var(--sns-grad-page-header);border-bottom:2px solid var(--red-primary);padding:32px 24px 24px;position:relative;overflow:hidden;flex-shrink:0;}
  .page-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 20px,rgba(255,26,26,.03) 20px,rgba(255,26,26,.03) 21px);pointer-events:none;}
  .page-header-inner{position:relative;z-index:1;}
  .page-eyebrow{font-family:var(--f-display);font-size:var(--sns-fs-11);letter-spacing:var(--sns-ls-wide);color:var(--red-primary);text-transform:uppercase;display:block;margin-bottom:var(--sns-space-2);}
  .page-title{font-family:var(--f-display);font-size:clamp(28px,4vw,48px);letter-spacing:var(--sns-ls-base);color:var(--white-bright);margin:0 0 var(--sns-space-2);line-height:var(--sns-lh-title);}
  .page-subtitle{font-size:var(--sns-fs-13);color:var(--gray-light);margin:0;}

  /* === COMPLIANCE BANNER === */
  .compliance-banner{display:flex;align-items:flex-start;gap:var(--sns-space-4);padding:var(--sns-space-6) var(--sns-space-8);background:rgba(240,189,48,.06);border:1px solid rgba(240,189,48,.2);border-radius:var(--sns-radius-lg);font-size:var(--sns-fs-12);color:#FFFFFF;line-height:1.5;}
  .cb-icon{flex-shrink:0;margin-top:1px;stroke:var(--gold-accent);}
  .cb-text{flex:1;}

  /* === LEAGUE TABS === */
  .league-tabs{display:flex;gap:var(--sns-space-4);flex-wrap:wrap;padding:0 0 var(--sns-space-2);}
  .league-tab{padding:var(--sns-space-4) var(--sns-space-8);border-radius:var(--sns-radius-lg);font-size:var(--sns-fs-12);font-weight:var(--sns-fw-semi);letter-spacing:var(--sns-ls-mono);text-transform:uppercase;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;transition:all var(--sns-dur-fast);}
  .league-tab.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  .league-tab:hover{color:var(--white-bright);}
  .league-tab:active{background:rgba(255,26,26,.22);transform:scale(.96);}
  .league-tab:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}

  /* === DUEL STATS STRIP === */
  .duel-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-border);border-radius:var(--sns-radius-xl);overflow:hidden;}
  .ds-stat{background:var(--black-soft);padding:var(--sns-space-6) var(--sns-space-8);display:flex;flex-direction:column;gap:var(--sns-space-1);}
  .ds-label{font-size:16px;font-family:var(--f-display);letter-spacing:var(--sns-ls-button);color:var(--gray-light);}
  .ds-value{font-family:var(--f-numeral);font-size:var(--sns-fs-20);font-weight:var(--sns-fw-bold);color:var(--white-bright);}
  .ds-sub{font-size:var(--sns-fs-10);color:var(--gray-light);}

  /* === CARD === */
  .card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:var(--sns-radius-2xl);overflow:hidden;}
  .card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sns-space-8) var(--sns-space-10);border-bottom:1px solid var(--gray-border);gap:var(--sns-space-6);}
  .card-eyebrow{font-size:var(--sns-fs-10);font-family:var(--f-display);letter-spacing:var(--sns-ls-eyebrow);color:var(--red-primary);text-transform:uppercase;}
  .card-title{font-family:var(--f-display);font-size:var(--sns-fs-18);letter-spacing:var(--sns-ls-display);color:var(--white-bright);margin:0;}
  .card-body{padding:var(--sns-space-10);}

  /* === CREATE DUEL BUTTON === */
  .btn-create-duel{display:inline-flex;align-items:center;gap:var(--sns-space-3);padding:var(--sns-space-4) var(--sns-space-8);background:var(--sns-grad-btn-primary);border:none;border-radius:var(--sns-radius-md);color:#fff;font-size:var(--sns-fs-11);font-weight:var(--sns-fw-bold);letter-spacing:var(--sns-ls-mono);text-transform:uppercase;box-shadow:var(--sns-shadow-btn-primary);transition:box-shadow var(--sns-dur-fast),transform var(--sns-dur-fast);}
  .btn-create-duel:hover{box-shadow:var(--sns-shadow-btn-primary-h);transform:translateY(-1px);}
  .btn-create-duel:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px;}

  /* === PAGE TABS === */
  .page-tabs{display:flex;gap:0;border-bottom:1px solid var(--gray-border);}
  .page-tab{padding:var(--sns-space-6) var(--sns-space-10);font-size:var(--sns-fs-12);font-weight:var(--sns-fw-semi);letter-spacing:var(--sns-ls-mono);text-transform:uppercase;color:var(--gray-light);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;transition:color var(--sns-dur-fast),border-color var(--sns-dur-fast);}
  .page-tab:hover{color:var(--white-bright);}
  .page-tab.active,.page-tab[aria-selected="true"]{color:var(--white-bright);border-bottom-color:var(--red-primary);}
  .page-tab:focus-visible{outline:2px solid var(--red-primary);outline-offset:-2px;}
  .tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:8px;font-size:16px;background:var(--red-primary);color:#fff;margin-left:var(--sns-space-2);padding:0 3px;}

  /* === DUEL MATCHUP CARD (active duels list) === */
  .duel-list{display:flex;flex-direction:column;gap:var(--sns-space-5);padding:var(--sns-space-8);}
  .duel-matchup{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:var(--sns-radius-xl);overflow:hidden;cursor:pointer;transition:border-color var(--sns-dur-fast),box-shadow var(--sns-dur-fast);}
  .duel-matchup:hover{border-color:rgba(255,26,26,.4);box-shadow:var(--sns-shadow-tile-hover);}
  .duel-matchup:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  .dm-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sns-space-4) var(--sns-space-7);background:rgba(255,255,255,.02);border-bottom:1px solid var(--hairline);}
  .dm-meta{font-size:var(--sns-fs-11);color:var(--gray-light);}
  .dm-status{font-size:var(--sns-fs-10);font-weight:var(--sns-fw-bold);letter-spacing:var(--sns-ls-mono);text-transform:uppercase;}
  .dm-status.live{color:#3dba6e;}
  .dm-status.pending{color:#FFFFFF;}
  .dm-status.final{color:var(--gray-light);}
  .dm-body{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sns-space-4);align-items:center;padding:var(--sns-space-6) var(--sns-space-7);}
  .dm-team{display:flex;flex-direction:column;gap:var(--sns-space-1);}
  .dm-team.right{align-items:flex-end;text-align:right;}
  .dm-team-name{font-size:var(--sns-fs-14);font-weight:var(--sns-fw-bold);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px;}
  .dm-team-sub{font-size:var(--sns-fs-10);color:var(--gray-light);}
  .dm-team-avatar{width:32px;height:32px;border-radius:var(--sns-radius-round);background:var(--sns-grad-avatar);border:1px solid var(--gray-border);display:flex;align-items:center;justify-content:center;font-size:var(--sns-fs-12);font-weight:var(--sns-fw-bold);color:var(--gray-light);flex-shrink:0;}
  .dm-center{display:flex;flex-direction:column;align-items:center;gap:var(--sns-space-1);min-width:60px;}
  .dm-score{font-family:var(--f-numeral);font-size:var(--sns-fs-22);font-weight:var(--sns-fw-bold);color:var(--white-bright);line-height:1;}
  .dm-score.live{color:#3dba6e;}
  .dm-vs{font-family:var(--f-display);font-size:var(--sns-fs-14);color:var(--gray-light);letter-spacing:var(--sns-ls-wide);}
  .dm-foot{display:flex;align-items:center;justify-content:space-between;padding:var(--sns-space-3) var(--sns-space-7);border-top:1px solid var(--hairline);font-size:var(--sns-fs-10);color:var(--gray-light);}
  .dm-reward{display:inline-flex;align-items:center;gap:var(--sns-space-2);}
  .dm-reward svg{stroke:var(--gold-accent);}

  /* === BADGE PILLS === */
  .badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--sns-radius-sm);font-size:var(--sns-fs-10);font-weight:var(--sns-fw-bold);letter-spacing:var(--sns-ls-eyebrow);text-transform:uppercase;}
  .badge-gold{background:rgba(240,189,48,.12);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);}
  .badge-green{background:rgba(61,186,110,.12);color:#3dba6e;border:1px solid rgba(61,186,110,.25);}
  .badge-red{background:rgba(255,26,26,.12);color:var(--red-primary);border:1px solid rgba(255,26,26,.25);}
  .badge-gray{background:rgba(138,138,138,.12);color:var(--gray-light);border:1px solid rgba(138,138,138,.25);}

  /* === CHALLENGE INBOX === */
  .inbox-list{display:flex;flex-direction:column;gap:var(--sns-space-5);padding:var(--sns-space-8);}
  .inbox-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:var(--sns-radius-xl);overflow:hidden;transition:border-color var(--sns-dur-fast);}
  .inbox-card:hover{border-color:rgba(255,26,26,.3);}
  .inbox-card.outgoing{border-left:3px solid var(--gold-accent);}
  .inbox-card.incoming{border-left:3px solid var(--red-primary);}
  .ic-body{display:flex;align-items:center;justify-content:space-between;padding:var(--sns-space-6) var(--sns-space-7);gap:var(--sns-space-4);}
  .ic-info{display:flex;flex-direction:column;gap:var(--sns-space-1);min-width:0;}
  .ic-dir{font-size:var(--sns-fs-10);font-weight:var(--sns-fw-bold);letter-spacing:var(--sns-ls-mono);text-transform:uppercase;color:var(--gray-light);}
  .ic-dir.incoming{color:var(--red-primary);}
  .ic-dir.outgoing{color:#FFFFFF;}
  .ic-name{font-size:var(--sns-fs-14);font-weight:var(--sns-fw-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ic-details{font-size:var(--sns-fs-11);color:var(--gray-light);}
  .ic-actions{display:flex;gap:var(--sns-space-3);flex-shrink:0;}
  .ic-btn{padding:var(--sns-space-3) var(--sns-space-6);border-radius:var(--sns-radius-md);font-size:var(--sns-fs-11);font-weight:var(--sns-fw-bold);letter-spacing:var(--sns-ls-mono);text-transform:uppercase;border:1px solid var(--gray-border);background:var(--bg-surface-2);color:var(--gray-light);cursor:pointer;transition:all var(--sns-dur-fast);min-height:var(--sns-touch-target);}
  .ic-btn:hover{color:var(--white-bright);border-color:rgba(255,26,26,.4);}
  .ic-btn.accept{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  .ic-btn.accept:hover{background:rgba(255,26,26,.25);}
  .ic-btn.decline{color:var(--gray-light);}
  .ic-btn.decline:hover{color:var(--red-primary);border-color:var(--red-primary);}
  .ic-btn:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}

  /* === HISTORY TABLE === */
  .history-list{display:flex;flex-direction:column;gap:0;}
  .history-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--sns-space-4);align-items:center;padding:var(--sns-space-5) var(--sns-space-7);border-bottom:1px solid var(--hairline);transition:background var(--sns-dur-fast);}
  .history-row:hover{background:rgba(255,255,255,.02);}
  .history-row:last-child{border-bottom:none;}
  .hr-result{font-family:var(--f-display);font-size:var(--sns-fs-18);width:32px;text-align:center;}
  .hr-result.win{color:#3dba6e;}
  .hr-result.loss{color:var(--red-primary);}
  .hr-info{display:flex;flex-direction:column;gap:var(--sns-space-1);min-width:0;}
  .hr-opponent{font-size:var(--sns-fs-14);font-weight:var(--sns-fw-semi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hr-meta{font-size:var(--sns-fs-10);color:var(--gray-light);}
  .hr-score{font-family:var(--f-numeral);font-size:var(--sns-fs-14);font-weight:var(--sns-fw-bold);text-align:right;white-space:nowrap;}
  .hr-badge-cell{display:flex;align-items:center;gap:var(--sns-space-2);}
  .hr-badge{display:inline-flex;align-items:center;gap:var(--sns-space-1);padding:2px 6px;border-radius:var(--sns-radius-sm);font-size:16px;font-weight:var(--sns-fw-bold);letter-spacing:var(--sns-ls-eyebrow);text-transform:uppercase;background:rgba(240,189,48,.1);color:#FFFFFF;border:1px solid rgba(240,189,48,.2);}
  .hr-badge svg{width:10px;height:10px;stroke:var(--gold-accent);fill:none;}

  /* === DUEL DETAIL MODAL === */
  .duel-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:var(--sns-z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--sns-space-8);}
  .duel-detail-modal{background:var(--black-card);border:1px solid var(--gray-border);border-radius:var(--sns-radius-2xl);width:100%;max-width:720px;max-height:85vh;overflow-y:auto;box-shadow:var(--sns-shadow-modal);}
  .dd-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sns-space-8) var(--sns-space-10);border-bottom:1px solid var(--gray-border);}
  .dd-title{font-family:var(--f-display);font-size:var(--sns-fs-20);letter-spacing:var(--sns-ls-display);margin:0;}
  .dd-close{background:none;border:none;color:var(--gray-light);font-size:var(--sns-fs-24);cursor:pointer;padding:var(--sns-space-2);line-height:1;}
  .dd-close:hover{color:var(--white-bright);}
  .dd-close:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  .dd-body{padding:var(--sns-space-10);}

  /* Side-by-side lineup comparison */
  .lineup-compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--sns-space-8);}
  .lc-side{display:flex;flex-direction:column;gap:var(--sns-space-4);}
  .lc-head{display:flex;align-items:center;gap:var(--sns-space-4);padding-bottom:var(--sns-space-4);border-bottom:1px solid var(--gray-border);}
  .lc-avatar{width:36px;height:36px;border-radius:var(--sns-radius-round);background:var(--sns-grad-avatar);border:1px solid var(--gray-border);display:flex;align-items:center;justify-content:center;font-size:var(--sns-fs-14);font-weight:var(--sns-fw-bold);color:var(--gray-light);}
  .lc-name{font-size:var(--sns-fs-14);font-weight:var(--sns-fw-bold);}
  .lc-score-total{font-family:var(--f-numeral);font-size:var(--sns-fs-22);font-weight:var(--sns-fw-bold);color:var(--white-bright);margin-left:auto;}
  .lc-row{display:flex;align-items:center;justify-content:space-between;padding:var(--sns-space-3) 0;border-bottom:1px solid var(--hairline);gap:var(--sns-space-4);}
  .lc-row:last-child{border-bottom:none;}
  .lc-pos{font-size:var(--sns-fs-10);font-weight:var(--sns-fw-bold);letter-spacing:var(--sns-ls-mono);text-transform:uppercase;width:26px;flex-shrink:0;}
  .lc-pos.qb{color:var(--sns-pos-qb-text);}
  .lc-pos.rb{color:var(--sns-pos-rb-text);}
  .lc-pos.wr{color:var(--sns-pos-wr-text);}
  .lc-pos.te{color:var(--sns-pos-te-text);}
  .lc-pos.k{color:var(--sns-pos-k-text);}
  .lc-pos.flex{color:#FFFFFF;}
  .lc-player{font-size:var(--sns-fs-13);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
  .lc-pts{font-family:var(--f-numeral);font-size:var(--sns-fs-13);font-weight:var(--sns-fw-bold);color:var(--white-bright);flex-shrink:0;}
  .lc-pts.live{color:#3dba6e;}

  /* Detail compliance footer */
  .dd-compliance{padding:var(--sns-space-6) var(--sns-space-10);border-top:1px solid var(--gray-border);font-size:var(--sns-fs-11);color:var(--gray-light);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--sns-space-3);}

  /* === CREATE DUEL FORM === */
  .duel-create-modal{max-width:480px;}
  .create-form{display:flex;flex-direction:column;gap:var(--sns-space-10);}
  .cf-fieldset{border:none;margin:0;padding:0;}
  .cf-legend{font-family:var(--f-display);font-size:var(--sns-fs-12);letter-spacing:var(--sns-ls-eyebrow);color:var(--red-primary);text-transform:uppercase;margin-bottom:var(--sns-space-4);display:block;}
  .cf-search-wrap{position:relative;}
  .cf-input{width:100%;padding:var(--sns-space-5) var(--sns-space-6);background:var(--black-soft);border:1px solid var(--gray-border);border-radius:var(--sns-radius-md);color:var(--white-bright);font-size:var(--sns-fs-14);font-family:var(--f-body);outline:none;transition:border-color var(--sns-dur-fast);}
  .cf-input::placeholder{color:var(--gray-light);}
  .cf-input:focus{border-color:var(--red-primary);}
  .cf-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--black-card);border:1px solid var(--gray-border);border-radius:var(--sns-radius-md);max-height:160px;overflow-y:auto;z-index:10;box-shadow:var(--sns-shadow-card);}
  .cf-dropdown-item{padding:var(--sns-space-4) var(--sns-space-6);font-size:var(--sns-fs-13);cursor:pointer;transition:background var(--sns-dur-fast);}
  .cf-dropdown-item:hover{background:rgba(255,26,26,.08);}
  .cf-selected{display:flex;align-items:center;gap:var(--sns-space-4);padding:var(--sns-space-4) var(--sns-space-6);background:rgba(255,26,26,.08);border:1px solid rgba(255,26,26,.25);border-radius:var(--sns-radius-md);margin-top:var(--sns-space-3);}
  .cf-sel-name{font-size:var(--sns-fs-14);font-weight:var(--sns-fw-semi);flex:1;}
  .cf-sel-clear{background:none;border:none;color:var(--gray-light);font-size:var(--sns-fs-18);cursor:pointer;padding:0 var(--sns-space-2);line-height:1;}
  .cf-sel-clear:hover{color:var(--red-primary);}
  .cf-radio-group{display:flex;gap:var(--sns-space-4);flex-wrap:wrap;}
  .cf-radio{display:flex;align-items:center;gap:var(--sns-space-3);padding:var(--sns-space-4) var(--sns-space-6);background:var(--black-soft);border:1px solid var(--gray-border);border-radius:var(--sns-radius-md);font-size:var(--sns-fs-12);font-weight:var(--sns-fw-semi);letter-spacing:var(--sns-ls-mono);color:var(--gray-light);cursor:pointer;transition:all var(--sns-dur-fast);min-height:var(--sns-touch-target);}
  .cf-radio:hover{color:var(--white-bright);border-color:rgba(255,26,26,.3);}
  .cf-radio:has(input:checked){background:rgba(255,26,26,.12);border-color:var(--red-primary);color:var(--white-bright);}
  .cf-radio input{appearance:none;-webkit-appearance:none;width:14px;height:14px;border:2px solid var(--gray-border);border-radius:var(--sns-radius-round);background:transparent;cursor:pointer;position:relative;}
  .cf-radio input:checked{border-color:var(--red-primary);background:var(--red-primary);}
  .cf-radio input:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px;}
  .cf-select{width:100%;padding:var(--sns-space-5) var(--sns-space-6);background:var(--black-soft);border:1px solid var(--gray-border);border-radius:var(--sns-radius-md);color:var(--white-bright);font-size:var(--sns-fs-14);font-family:var(--f-body);}
  .cf-select:focus{border-color:var(--red-primary);outline:none;}
  .cf-reward-notice{display:flex;align-items:flex-start;gap:var(--sns-space-3);padding:var(--sns-space-5) var(--sns-space-6);background:rgba(240,189,48,.06);border:1px solid rgba(240,189,48,.15);border-radius:var(--sns-radius-md);font-size:var(--sns-fs-11);color:#FFFFFF;line-height:1.4;}
  .cf-reward-notice svg{flex-shrink:0;margin-top:1px;stroke:var(--gold-accent);}
  .cf-actions{display:flex;gap:var(--sns-space-4);justify-content:flex-end;padding-top:var(--sns-space-4);}
  .cf-btn-cancel{padding:var(--sns-space-5) var(--sns-space-8);border:1px solid var(--gray-border);border-radius:var(--sns-radius-md);background:transparent;color:var(--gray-light);font-size:var(--sns-fs-12);font-weight:var(--sns-fw-semi);letter-spacing:var(--sns-ls-mono);text-transform:uppercase;cursor:pointer;transition:all var(--sns-dur-fast);min-height:var(--sns-touch-target);}
  .cf-btn-cancel:hover{color:var(--white-bright);border-color:rgba(255,26,26,.3);}
  .cf-btn-submit{padding:var(--sns-space-5) var(--sns-space-10);background:var(--sns-grad-btn-primary);border:none;border-radius:var(--sns-radius-md);color:#fff;font-size:var(--sns-fs-12);font-weight:var(--sns-fw-bold);letter-spacing:var(--sns-ls-mono);text-transform:uppercase;box-shadow:var(--sns-shadow-btn-primary);cursor:pointer;transition:box-shadow var(--sns-dur-fast),transform var(--sns-dur-fast);min-height:var(--sns-touch-target);}
  .cf-btn-submit:hover{box-shadow:var(--sns-shadow-btn-primary-h);transform:translateY(-1px);}
  .cf-btn-submit:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px;}

  /* === EMPTY + LOADING === */
  .empty-state{text-align:center;padding:48px var(--sns-space-10);color:var(--gray-light);}
  .empty-icon{font-size:36px;margin-bottom:var(--sns-space-6);}
  .empty-msg{font-family:var(--f-display);font-size:var(--sns-fs-20);letter-spacing:var(--sns-ls-display);margin:0 0 var(--sns-space-4);}
  .empty-sub{font-size:var(--sns-fs-13);margin:0;}
  .skeleton-line{background:linear-gradient(90deg,var(--black-soft) 25%,#1c1c1c 50%,var(--black-soft) 75%);background-size:200% 100%;border-radius:var(--sns-radius-sm);height:16px;margin-bottom:var(--sns-space-4);}

  /* === ANIMATIONS === */
  .stagger-in{opacity:0;animation:duels-fadeInUp .25s ease both;}
  .skeleton-line{animation:duels-shimmer 1.4s infinite;}

  /* === REDUCED MOTION === */
  @media(prefers-reduced-motion:reduce){
    .stagger-in{animation:none;opacity:1;}
    .skeleton-line{animation:none;background:var(--black-soft);}
    .duel-matchup,.inbox-card,.page-tab,.league-tab,.ic-btn,.btn-create-duel,.cf-btn-submit,.cf-btn-cancel,.cf-radio,.cf-input{transition:none;}
  }

  /* === RESPONSIVE: TABLET (767px) === */
  @media(max-width:767px){
    .page-header{padding:var(--sns-space-8) var(--sns-space-6);}
    .page-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    .page-tabs::-webkit-scrollbar{display:none;}
    .page-tab{flex:0 0 auto;white-space:nowrap;padding:var(--sns-space-6) var(--sns-space-8);}
    .lineup-compare{grid-template-columns:1fr;gap:var(--sns-space-12);}
    .lc-side + .lc-side{border-top:1px solid var(--gray-border);padding-top:var(--sns-space-8);}
    .duel-detail-modal{max-width:100%;margin:0 var(--sns-space-4);max-height:90vh;}
    .duel-create-modal{max-width:100%;}
    .dm-team-name{max-width:100px;font-size:var(--sns-fs-12);}
    .history-row{grid-template-columns:auto 1fr auto;gap:var(--sns-space-3);}
    .hr-badge-cell{display:none;}
    .cf-radio-group{flex-direction:column;gap:var(--sns-space-3);}
    .ic-body{flex-direction:column;align-items:stretch;gap:var(--sns-space-4);}
    .ic-actions{justify-content:flex-end;}
  }

  /* === RESPONSIVE: SMALL MOBILE (359px) === */
  @media(max-width:359px){
    .page-title{font-size:22px !important;}
    .duel-strip{grid-template-columns:1fr 1fr 1fr;}
    .ds-value{font-size:var(--sns-fs-17);}
    .dm-body{padding:var(--sns-space-4);}
    .dm-team-name{font-size:var(--sns-fs-11);max-width:70px;}
    .dm-score{font-size:var(--sns-fs-18);}
    .compliance-banner{font-size:var(--sns-fs-11);}
    .dd-body{padding:var(--sns-space-6);}
  }

}
/* keyframes hoisted to top level + route-prefixed (were global in duels/style.css) */
@keyframes duels-fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes duels-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /profile folded from profile/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/profile"] (static attr, FOUC-safe).
   Resets dropped (canonical reset/base own them); --f-display dropped so the
   canonical display token owns it; ex-:root vars scoped here; page keyframes
   route-prefixed (profile-) to avoid cross-route collision.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/profile"]{
  /* ex-:root local overrides (supplement canonical tokens; --f-display intentionally omitted) */
  --bg-surface-2: #1A1A1A;
  --hairline: rgba(255,255,255,.06);
  --hairline-2: rgba(255,255,255,.10);
  --profile-green: #3dba6e;
  --profile-green-bg: rgba(61,186,110,.12);
  --profile-green-border: rgba(61,186,110,.25);
  --profile-blue: #6aa9d7;
  --profile-blue-bg: rgba(106,169,215,.12);
  --profile-blue-border: rgba(106,169,215,.25);

  /* === SKIP LINK === */
  .skip{position:absolute;top:-100px;left:0;padding:8px 16px;background:var(--red-primary);color:#fff;z-index:100;font-size:16px;}
  .skip:focus{top:0;}

  /* === LAYOUT === */

  /* === PAGE HEADER / PROFILE HERO === */
  .page-header{background:var(--sns-grad-page-header);border-bottom:2px solid var(--red-primary);padding:32px 24px 24px;position:relative;overflow:hidden;flex-shrink:0;}
  .page-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 20px,rgba(255,26,26,0.03) 20px,rgba(255,26,26,0.03) 21px);pointer-events:none;}
  .page-header-inner{position:relative;z-index:1;}

  .profile-hero{display:flex;align-items:center;gap:20px;margin-bottom:12px;}
  .profile-avatar{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--red-primary),var(--gold-accent));flex:0 0 88px;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:34px;letter-spacing:.04em;color:#fff;box-shadow:0 0 0 3px #0A0A0A,0 0 0 5px var(--red-primary);overflow:hidden;}
  .profile-avatar img{width:100%;height:100%;object-fit:cover;}
  .profile-info{flex:1;min-width:0;}
  .profile-eyebrow{font-family:var(--f-display);font-size:16px;letter-spacing:.2em;color:var(--red-primary);text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:4px;}
  .profile-name{font-family:var(--f-display);font-size:clamp(28px,4vw,44px);letter-spacing:.04em;color:var(--white-bright);margin:0 0 2px;line-height:1.05;}
  .profile-handle{font-size:16px;color:var(--gray-light);margin:0 0 4px;}
  .profile-join{font-size:16px;color:var(--gray-light);opacity:.7;margin:0;}
  .profile-bio{font-size:16px;color:var(--gray-light);margin:8px 0 0;line-height:1.5;max-width:520px;}

  .profile-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center;}

  .privacy-indicator{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;font-size:16px;color:var(--gray-light);letter-spacing:.06em;font-family:var(--f-display);text-transform:uppercase;}
  .privacy-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .privacy-dot--public{background:var(--profile-green);}
  .privacy-dot--private{background:var(--gold-accent);}

  /* === MAIN GRID === */
  .profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px 24px 0;}

  /* === CARD SYSTEM === */
  .card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;}
  .card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-border);}
  .card-eyebrow{font-size:16px;font-family:var(--f-display);letter-spacing:.18em;color:var(--red-primary);text-transform:uppercase;}
  .card-title{font-family:var(--f-display);font-size:18px;letter-spacing:.06em;color:var(--white-bright);margin:0;}
  .card-body{padding:20px;}
  .card--full{grid-column:1 / -1;}

  /* === STATS CARD === */
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
  .stat-box{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:14px 12px;text-align:center;}
  .stat-box-num{font-family:var(--f-display);font-size:28px;letter-spacing:.04em;color:var(--white-bright);display:block;line-height:1;}
  .stat-box-label{font-size:16px;font-family:var(--f-display);letter-spacing:.14em;color:var(--gray-light);text-transform:uppercase;margin-top:4px;display:block;}
  .stat-box--accent .stat-box-num{color:#FFFFFF;}

  /* === TROPHY CASE === */
  .trophy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;}
  .trophy-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;text-align:center;transition:border-color var(--sns-dur-base),transform var(--sns-dur-fast);}
  .trophy-item:hover{border-color:#FFFFFF;transform:translateY(-2px);}
  .trophy-icon{font-size:28px;line-height:1;}
  .trophy-name{font-size:16px;font-family:var(--f-display);letter-spacing:.08em;color:var(--gray-light);text-transform:uppercase;line-height:1.2;}
  .trophy-year{font-size:16px;color:var(--gray-light);opacity:.6;font-family:var(--f-mono);}

  /* === LEAGUE HISTORY === */
  .league-history-table{width:100%;border-collapse:collapse;font-size:16px;}
  .league-history-table th{font-family:var(--f-display);font-size:16px;letter-spacing:.12em;color:var(--gray-light);text-align:left;padding:6px 12px;border-bottom:1px solid var(--gray-border);white-space:nowrap;text-transform:uppercase;}
  .league-history-table td{padding:10px 12px;border-bottom:1px solid var(--hairline);color:var(--white-bright);vertical-align:middle;}
  .league-history-table tr:last-child td{border-bottom:none;}
  .league-history-table tr:hover td{background:rgba(255,26,26,.04);}
  .finish-1st{color:#FFFFFF;font-weight:700;font-family:var(--f-mono);}
  .finish-2nd{color:var(--silver-medal);font-family:var(--f-mono);}
  .finish-3rd{color:var(--bronze-medal);font-family:var(--f-mono);}
  .finish-other{color:var(--gray-light);font-family:var(--f-mono);}

  /* === ACTIVITY FEED === */
  .activity-list{display:flex;flex-direction:column;gap:0;}
  .activity-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline);}
  .activity-item:last-child{border-bottom:none;}
  .activity-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .activity-icon--trade{background:var(--profile-blue-bg);border:1px solid var(--profile-blue-border);}
  .activity-icon--waiver{background:var(--profile-green-bg);border:1px solid var(--profile-green-border);}
  .activity-icon--lineup{background:rgba(255,26,26,.12);border:1px solid rgba(255,26,26,.25);}
  .activity-icon--pickem{background:rgba(240,189,48,.12);border:1px solid rgba(240,189,48,.25);}
  .activity-content{flex:1;min-width:0;}
  .activity-text{font-size:16px;color:var(--white-bright);line-height:1.45;}
  .activity-text strong{color:var(--white-bright);font-weight:600;}
  .activity-meta{font-size:16px;color:var(--gray-light);margin-top:2px;font-family:var(--f-mono);letter-spacing:.04em;}

  /* === NIL PORTFOLIO === */
  .nil-summary{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
  .nil-stat{flex:1;min-width:120px;background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:14px 16px;}
  .nil-stat-label{font-size:16px;font-family:var(--f-display);letter-spacing:.14em;color:var(--gray-light);text-transform:uppercase;margin-bottom:4px;}
  .nil-stat-value{font-family:var(--f-display);font-size:24px;color:var(--profile-green);letter-spacing:.04em;line-height:1;}
  .nil-holdings{display:flex;flex-direction:column;gap:8px;}
  .nil-holding{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--hairline);}
  .nil-holding:last-child{border-bottom:none;}
  .nil-player{font-size:16px;font-weight:600;color:var(--white-bright);}
  .nil-school{font-size:16px;color:var(--gray-light);}
  .nil-value{font-family:var(--f-mono);font-size:16px;color:var(--profile-green);letter-spacing:.04em;}
  .nil-change{font-size:16px;font-family:var(--f-mono);letter-spacing:.04em;}
  .nil-change--up{color:var(--sns-trend-up);}
  .nil-change--down{color:var(--sns-trend-down);}

  /* === SKELETON LOADING === */
  .skeleton-line{background:linear-gradient(90deg,var(--black-soft) 25%,#1c1c1c 50%,var(--black-soft) 75%);background-size:200% 100%;animation:profile-shimmer 1.4s infinite;border-radius:4px;height:16px;margin-bottom:8px;}
  .skeleton-circle{width:88px;height:88px;border-radius:50%;background:linear-gradient(90deg,var(--black-soft) 25%,#1c1c1c 50%,var(--black-soft) 75%);background-size:200% 100%;animation:profile-shimmer 1.4s infinite;}
  .skeleton-box{background:linear-gradient(90deg,var(--black-soft) 25%,#1c1c1c 50%,var(--black-soft) 75%);background-size:200% 100%;animation:profile-shimmer 1.4s infinite;border-radius:8px;}

  /* === EMPTY STATE === */
  .empty-state{text-align:center;padding:32px 20px;color:var(--gray-light);}
  .empty-icon{font-size:32px;margin-bottom:8px;}
  .empty-msg{font-family:var(--f-display);font-size:18px;letter-spacing:.06em;color:var(--gray-light);margin:0 0 4px;}
  .empty-sub{font-size:16px;color:var(--gray-light);margin:0;}

  /* === BADGES === */
  .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
  .badge-gold{background:rgba(240,189,48,.12);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);}
  .badge-green{background:var(--profile-green-bg);color:var(--profile-green);border:1px solid var(--profile-green-border);}
  .badge-red{background:rgba(255,26,26,.12);color:var(--red-primary);border:1px solid rgba(255,26,26,.25);}
  .badge-gray{background:rgba(138,138,138,.12);color:var(--gray-light);border:1px solid rgba(138,138,138,.25);}

  /* === ANIMATIONS === */
  .stagger-in{opacity:0;animation:profile-fadeInUp .3s ease both;}
  .lift{transition:transform var(--sns-dur-fast),box-shadow var(--sns-dur-fast),border-color var(--sns-dur-base) !important;}
  .lift:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,26,26,.12);}
  .lift:active{transform:translateY(0) scale(.98);}

  /* === REDUCED MOTION === */
  @media(prefers-reduced-motion:reduce){
    .stagger-in{animation:none !important;opacity:1 !important;}
    .profile-avatar{animation:none !important;}
    .skeleton-line,.skeleton-circle,.skeleton-box{animation:none !important;background:var(--black-soft) !important;}
    .lift,.trophy-item{transition:none !important;}
  }

  /* === RESPONSIVE: TABLET (<=767px) === */
  @media(max-width:767px){
    .page-header{padding:20px 16px 16px;}
    .profile-hero{gap:14px;}
    .profile-avatar{width:64px;height:64px;flex:0 0 64px;font-size:26px;}
    .profile-name{font-size:28px !important;}
    .profile-grid{grid-template-columns:1fr;padding:16px 16px 0;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .trophy-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));}
    .nil-summary{flex-direction:column;}
    .card-body{padding:16px;}
  }

  /* === RESPONSIVE: SMALL MOBILE (<=359px) === */
  @media(max-width:359px){
    .page-header{padding:12px 8px;}
    .profile-hero{flex-direction:column;text-align:center;gap:10px;}
    .profile-avatar{width:56px;height:56px;flex:0 0 56px;font-size:22px;}
    .profile-name{font-size:22px !important;}
    .profile-eyebrow{justify-content:center;}
    .profile-actions{justify-content:center;}
    .profile-grid{padding:8px 8px 0;gap:10px;}
    .stats-grid{grid-template-columns:1fr 1fr;gap:8px;}
    .stat-box{padding:10px 8px;}
    .stat-box-num{font-size:22px;}
    .card-body{padding:12px 10px;}
    .card-header{padding:12px 10px;}
    .league-history-table{font-size:16px;}
    .league-history-table th,.league-history-table td{padding:6px 5px;}
    .trophy-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
    .trophy-item{padding:8px 4px;}
    .trophy-icon{font-size:22px;}
    .nil-summary{gap:8px;}
  }
}

/* keyframes hoisted to top level + route-prefixed (were global in profile/style.css) */
@keyframes profile-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes profile-fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes profile-helmetFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /signin folded from signin/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/signin"] (static attr, FOUC-safe).
   Resets dropped (canonical reset/base own them): `*,*::before,*::after`
   box-sizing and the bare `html,body` reset (no overflow-x to re-add).
   No :root vars and no --f-display present. Page keyframe route-prefixed
   (signin-) to avoid cross-route collision.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/signin"], html[data-route="/forgot-password"], html[data-route="/reset-password"]{
  .skip {
    position: absolute;
    top: -100px;
    left: 0;
    padding: var(--sns-space-4, 8px) var(--sns-space-8, 16px);
    background: var(--red-primary, #FF1A1A);
    color: var(--white-bright, #F5F5F5);
    z-index: var(--sns-z-skip, 100);
    border-radius: 0 0 var(--sns-radius-md, 6px) 0;
  }
  .skip:focus { top: 0; }

  /* Full-viewport centering. 100dvh keeps it centered on mobile browser chrome;
     100vh is the fallback. Padding guarantees breathing room on short screens
     while the card stays centered. */
  .auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-fluid-lg, clamp(1.5rem, 1.1161rem + 1.7857vw, 2.5rem))
             var(--space-fluid-md, clamp(1rem, .808rem + .8929vw, 1.5rem));
    background:
      radial-gradient(circle at 15% 12%, rgba(255, 45, 45, .14), transparent 42%),
      radial-gradient(circle at 85% 88%, rgba(255, 106, 0, .10), transparent 46%),
      var(--black-bg, #050505);
  }

  .auth-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .auth-card {
    width: 100%;
    max-width: 26.25rem; /* 420px */
    background: var(--black-card, #0A0A0A);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: var(--sns-radius-3xl, 14px);
    padding: var(--space-fluid-lg, clamp(1.5rem, 1.1161rem + 1.7857vw, 2.5rem))
             var(--space-fluid-md, clamp(1rem, .808rem + .8929vw, 1.5rem));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px var(--hairline, rgba(255,255,255,.06)) inset;
    animation: signin-auth-in .42s var(--sns-ease-snappy, cubic-bezier(.16,1,.3,1)) both;
  }

  .auth-eyebrow {
    display: block;
    font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: var(--sns-fs-11, 11px);
    letter-spacing: var(--sns-ls-eyebrow, .12em);
    color: var(--orange-accent, #FF6A00);
    margin-bottom: var(--sns-space-4, 8px);
  }
  .auth-title {
    font-family: var(--font-display, "Bungee", "Graduate", sans-serif);
    font-size: var(--fs-fluid-h2, clamp(1.5rem, 1.2121rem + 1.3393vw, 2.25rem));
    line-height: var(--sns-lh-title, 1.05);
    letter-spacing: var(--sns-ls-tight, .02em);
    margin: 0 0 var(--sns-space-4, 8px);
    color: var(--text-primary, #F5F5F5);
  }
  .auth-sub {
    margin: 0 0 var(--sns-space-12, 24px);
    color: var(--text-muted, #8A8A8A);
    font-size: var(--fs-fluid-small, clamp(.75rem, .702rem + .2232vw, .875rem));
    line-height: var(--sns-lh-body, 1.5);
  }

  .fld { display: flex; flex-direction: column; margin-bottom: var(--sns-space-8, 16px); }
  .fld label {
    font-size: var(--sns-fs-13, 13px);
    font-weight: var(--sns-fw-semi, 600);
    margin-bottom: var(--sns-space-3, 6px);
    color: var(--text-primary, #F5F5F5);
  }
  .fld input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--black-soft, #111111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: var(--sns-radius-lg, 8px);
    color: var(--text-primary, #F5F5F5);
    font: inherit;
    font-size: var(--sns-fs-15, 15px);
    padding: 13px 14px;
    min-height: var(--sns-touch-target, 44px);
    transition: border-color var(--sns-dur-fast, .15s) ease, box-shadow var(--sns-dur-fast, .15s) ease;
  }
  .fld input::placeholder { color: var(--text-faint, #7A7E8C); }
  .fld input:focus-visible {
    outline: none;
    border-color: var(--red-primary, #FF1A1A);
    box-shadow: 0 0 0 3px rgba(255, 26, 26, .30);
  }
  .fld input.invalid { border-color: var(--red-bright, #FF3B30); }
  .fld-err {
    min-height: 16px;
    margin-top: 5px;
    font-size: var(--sns-fs-12, 12px);
    color: var(--red-bright, #FF3B30);
  }

  .remember {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: var(--sns-space-1, 2px) 0 var(--sns-space-9, 18px);
    font-size: var(--fs-fluid-small, clamp(.75rem, .702rem + .2232vw, .875rem));
    color: var(--text-muted, #8A8A8A);
    cursor: pointer;
    user-select: none;
  }
  .remember input {
    width: 18px;
    height: 18px;
    accent-color: var(--red-primary, #FF1A1A);
    cursor: pointer;
  }
  .remember input:focus-visible {
    outline: 2px solid var(--brand-red-bright, #FF3434);
    outline-offset: 2px;
  }

  .auth-formerr {
    margin: var(--sns-space-2, 4px) 0 var(--sns-space-7, 14px);
    min-height: 0;
    font-size: var(--sns-fs-13, 13px);
    color: var(--red-bright, #FF3B30);
  }
  .auth-formerr.show {
    min-height: 20px;
    padding: var(--sns-space-5, 10px) var(--sns-space-6, 12px);
    background: rgba(255, 26, 26, .12);
    border: 1px solid rgba(255, 26, 26, .50);
    border-radius: var(--sns-radius-lg, 8px);
  }
  .auth-formerr a { color: var(--white-bright, #F5F5F5); font-weight: var(--sns-fw-semi, 600); }

  /* Make the canonical .btn full-width + a touch taller for the primary CTA,
     without overriding its color/contrast/focus from tokens.css. */
  #submit-btn {
    width: 100%;
    min-height: 50px;
    font-size: var(--sns-fs-13, 13px);
    margin-top: var(--sns-space-1, 2px);
  }

  .auth-alt {
    margin: var(--sns-space-10, 20px) 0 0;
    text-align: center;
    font-size: var(--fs-fluid-small, clamp(.75rem, .702rem + .2232vw, .875rem));
    color: var(--text-muted, #8A8A8A);
  }
  .auth-alt a {
    color: var(--orange-accent, #FF6A00);
    font-weight: var(--sns-fw-semi, 600);
    text-decoration: none;
    border-radius: var(--sns-radius-sm, 4px);
  }
  .auth-alt a:hover { text-decoration: underline; }
  .auth-alt a:focus-visible {
    outline: 2px solid var(--brand-red-bright, #FF3434);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .auth-card { animation: none; }
    .fld input { transition: none; }
  }
}

/* keyframes hoisted to top level + route-prefixed (was global in signin/style.css) */
@keyframes signin-auth-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow D — /signup folded from signup/style.css (per-page CSS folded)
   Route-scoped under html[data-route="/signup"] (static attr, FOUC-safe).
   Resets dropped (canonical reset/base own them); --f-display dropped so the
   canonical display token owns it; ex-:root vars scoped here; page keyframes
   route-prefixed (signup-) to avoid cross-route collision.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/signup"]{
  /* ex-:root local overrides (supplement canonical tokens; --f-display intentionally omitted) */
  --black-bg: #050505;
  --black-card: #0A0A0A;
  --black-soft: #111111;
  --red-primary: #FF1A1A;
  --orange-accent: #FF6A00;
  --gray-border: #2A2A2A;
  --gray-light: #8A8A8A;
  --white-bright: #F5F5F5;
  --hairline: rgba(255,255,255,0.06);
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  .skip { position: absolute; top: -100px; left: 0; padding: 8px 16px; background: var(--red-primary); color: #fff; z-index: 100; }
  .skip:focus { top: 0; }

  .auth-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px 80px;
    min-height: 60vh;
  }
  .auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--black-card);
    border: 1px solid var(--gray-border);
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px var(--hairline) inset;
    animation: signup-auth-in .42s cubic-bezier(.2,.7,.3,1) both;
  }

  .auth-eyebrow {
    display: block;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .22em;
    color: var(--orange-accent);
    margin-bottom: 8px;
  }
  .auth-title {
    font-family: var(--f-display);
    font-size: 38px;
    line-height: 1.02;
    letter-spacing: .01em;
    margin: 0 0 8px;
  }
  .auth-sub { margin: 0 0 24px; color: var(--gray-light); font-size: 16px; line-height: 1.5; }

  .fld { display: flex; flex-direction: column; margin-bottom: 16px; }
  .fld label { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--white-bright); }
  .fld input {
    appearance: none;
    background: var(--black-soft);
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    color: var(--white-bright);
    font: inherit;
    font-size: 16px;
    padding: 13px 14px;
    min-height: 46px;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .fld input::placeholder { color: #5E626E; }
  .fld input:focus {
    outline: none;
    border-color: var(--red-primary);
    box-shadow: 0 0 0 3px rgba(255,26,26,.18);
  }
  .fld input.invalid { border-color: var(--red-primary); }
  .fld-err { min-height: 16px; margin-top: 5px; font-size: 16px; color: #FF6B6B; }

  .auth-formerr {
    margin: 4px 0 14px;
    min-height: 0;
    font-size: 16px;
    color: #FF6B6B;
  }
  .auth-formerr.show {
    min-height: 20px;
    padding: 10px 12px;
    background: rgba(255,26,26,.10);
    border: 1px solid rgba(255,26,26,.45);
    border-radius: 8px;
  }
  .auth-formerr a { color: var(--white-bright); font-weight: 600; }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    font-family: var(--f-display);
    font-size: 17px;
    letter-spacing: .12em;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .2s ease, filter .2s ease;
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--red-primary), var(--orange-accent));
    color: #fff;
    border: 0;
  }
  .btn-primary:hover { box-shadow: 0 8px 22px rgba(255,42,45,.40); transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0); }
  .btn[disabled] { opacity: .6; cursor: progress; filter: saturate(.6); transform: none; }

  .auth-alt { margin: 20px 0 0; text-align: center; font-size: 16px; color: var(--gray-light); }
  .auth-alt a { color: var(--orange-accent); font-weight: 600; text-decoration: none; }
  .auth-alt a:hover { text-decoration: underline; }

  @media (max-width: 480px) {
    .auth-wrap { padding: 24px 12px 64px; }
    .auth-card { padding: 26px 20px; border-radius: 12px; }
    .auth-title { font-size: 32px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .auth-card { animation: none; }
    .btn, .fld input { transition: none; }
    .btn-primary:hover { transform: none; }
  }
}

/* keyframes hoisted to top level + route-prefixed (were global in signup/style.css) */
@keyframes signup-auth-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@layer components {
  /* ===== [Workflow C] Item 1 — hero banner + helmet proportions =====
     Refs: cff-setup/concept-art/1.2/Desktop_BO_Home_v2_2026-05-15.png,
           cff-setup/concept-art/2.1/Dashboard Concept Art.png,
           cff-setup/vision/home.md ("stadium ... cropped off at top and bottom ... revert to the original image").
     Appended override (architecture rule: append, don't edit). */

  /* Banner: was object-fit:contain → the 1440x810 art letterboxed to a ~700px island inside the
     full-width hero, leaving dark side-bars ("proportionally out of whack"). Restore the full-bleed
     broadcast banner the concept shows, biased toward the stadium horizon/field. */
  .sn--c_hero .hero-stadium { object-fit: cover !important; object-position: center 45% !important; }

  /* Helmet must FIT inside the red-border My-League card at every width. The prior
     width:55%/right:-30px and width:45%/right:-20px offsets bled the helmet under the card's
     overflow:hidden and clipped its right edge at common laptop/tablet widths. */
  .sn--c_myleague .ml-helmet-wrap { right: 2% !important; width: clamp(168px, 38%, 300px) !important; }
  @media (max-width: 600px) {
    /* Stacked card: keep the helmet a centered, fully-visible watermark — never edge-clipped. */
    .sn--c_myleague .ml-helmet-wrap {
      right: auto !important; left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: min(240px, 62%) !important; opacity: .55 !important;
    }
  }
}

@layer components {
  /* ===== [Workflow C] Item 3 — Heisman trophy (inline SVG) =====
     Replaces the raster /heisman/assets/trophy.png with a crisp inline SVG (generic gold cup,
     NOT the trademarked Heisman pose). Theme-guide treatment: gold + red glow.
     Ref: cff-setup/concept-art/sns_design_system_theme_guide.md. */
  .ht-trophy-svg {
    display: block;
    width: clamp(116px, 15vw, 168px);
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6))
            drop-shadow(0 0 14px rgba(240, 189, 48, .45))
            drop-shadow(0 0 26px rgba(255, 26, 26, .30));
  }

  /* =====================================================================
     [W-DASHBOARD-NEWS #1022] Dashboard FE fixes — APPEND-ONLY (A1).
     Canonical components only; no per-page CSS. White text, no yellow.
     ===================================================================== */

  /* ---- Fix 1: dashboard-local NEWS TICKER (Magic UI "Marquee" pattern) ---- */
  .dash-ticker {
    display: flex; align-items: center; gap: 12px;
    width: 100%; margin: 0 0 clamp(10px, 1.6vw, 18px);
    padding: 8px clamp(10px, 1.6vw, 16px);
    background: var(--black-card, #0A0A0A);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 12px; overflow: hidden;
  }
  .dash-ticker[hidden] { display: none; }
  .dash-ticker-eyebrow {
    flex: 0 0 auto;
    font: 700 12px/1 var(--f-display, "Graduate", serif);
    letter-spacing: .16em; color: var(--white-bright, #F5F5F5);
    padding: 4px 10px; border-radius: 6px;
    background: var(--red-primary, #FF1A1A);
  }
  .dash-ticker-viewport {
    flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .dash-ticker-track {
    display: inline-flex; align-items: center; gap: 0;
    list-style: none; margin: 0; padding: 0;
    white-space: nowrap; will-change: transform;
  }
  .dash-ticker-item { flex: 0 0 auto; display: inline-flex; align-items: center; }
  .dash-ticker-item + .dash-ticker-item::before {
    content: "\2022"; color: var(--text-faint, #6A6A6A); padding: 0 16px;
  }
  .dash-ticker-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--white-bright, #F5F5F5); text-decoration: none;
    font: 600 13px/1.2 var(--f-body, sans-serif);
  }
  .dash-ticker-link:hover .dash-ticker-headline { text-decoration: underline; }
  .dash-ticker-cat {
    flex: 0 0 auto;
    font: 700 12px/1 var(--f-mono, monospace); letter-spacing: .08em;
    color: var(--white-bright, #F5F5F5);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    padding: 3px 6px; border-radius: 5px;
  }
  .dash-ticker-headline { color: var(--white-bright, #F5F5F5); }
  .dash-ticker-empty {
    color: var(--text-muted, #9A9A9A);
    font: 600 13px/1.2 var(--f-body, sans-serif); padding: 2px 0;
  }
  .dash-ticker-link:focus-visible {
    outline: 2px solid var(--red-bright, #FF3B30); outline-offset: 3px; border-radius: 4px;
  }
  @keyframes dash-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--dash-ticker-shift, -50%)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .dash-ticker-track { animation: none !important; }
    .dash-ticker-viewport { overflow-x: auto; }
  }

  /* ---- Fix 2: FAVORITE TEAMS in the /scores game-tile language --------- */
  /* .game-tile / .gt-* are the shared Scores game-card classes (reused). */
  .fav-teams {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }
  .fav-teams .game-tile { cursor: pointer; }
  .fav-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center; padding: clamp(20px, 4vw, 40px) 16px;
    border: 1px dashed var(--gray-border, #2A2A2A); border-radius: 12px;
    background: rgba(255,255,255,.02);
  }
  .fav-empty-msg {
    margin: 0; max-width: 38ch;
    font: 600 14px/1.45 var(--f-body, sans-serif); color: var(--text-muted, #9A9A9A);
  }
  .fav-empty-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font: 700 12px/1 var(--f-display, "Graduate", serif); letter-spacing: .1em;
    color: var(--white-bright, #F5F5F5); text-decoration: none;
    padding: 9px 16px; border-radius: 8px;
    background: var(--red-primary, #FF1A1A);
  }
  .fav-empty-cta:hover { filter: brightness(1.08); }
  .fav-empty-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* ---- Fix 3: ML LEAGUE SWITCHER carousel (moved off the helmet) -------- */
  .ml-switcher {
    display: flex; flex-direction: column; gap: 6px;
    margin: 4px 0 14px; max-width: 360px; position: relative; z-index: 2;
  }
  .ml-switcher[hidden] { display: none; }
  .ml-switcher-label {
    font: 700 12px/1 var(--f-display, "Graduate", serif); letter-spacing: .18em;
    color: var(--text-muted, #9A9A9A);
  }
  .ml-switcher-control {
    display: flex; align-items: stretch; gap: 6px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px; padding: 4px;
  }
  .ml-switcher-arrow {
    flex: 0 0 auto; width: 34px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 7px; cursor: pointer;
    color: var(--white-bright, #F5F5F5);
  }
  .ml-switcher-arrow:hover { background: rgba(255,255,255,.10); }
  .ml-switcher-arrow:focus-visible { outline: 2px solid var(--red-bright, #FF3B30); outline-offset: 1px; }
  .ml-switcher-stage {
    flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden;
    background: transparent; border: 0; border-radius: 7px; cursor: pointer;
    color: var(--white-bright, #F5F5F5); text-align: left; padding: 0;
  }
  .ml-switcher-stage:focus-visible { outline: 2px solid var(--red-bright, #FF3B30); outline-offset: 1px; }
  .ml-switcher-viewport { display: block; overflow: hidden; width: 100%; }
  .ml-switcher-rail {
    display: flex; flex-wrap: nowrap;
    transform: translateX(var(--ml-slide, 0%));
  }
  @media (prefers-reduced-motion: no-preference) {
    .ml-switcher-rail { transition: transform 360ms cubic-bezier(.32,.72,0,1); }
  }
  .ml-switcher-slide {
    flex: 0 0 100%; min-width: 0; display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 8px;
  }
  .ml-switcher-badge {
    flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; background: rgba(0,0,0,.5); border: 1px solid var(--gray-border, #2A2A2A);
    font: 700 12px/1 var(--f-display, "Graduate", serif); color: var(--white-bright, #F5F5F5);
  }
  .ml-switcher-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 700 14px/1.1 var(--f-display, "Graduate", serif); letter-spacing: .01em;
    color: var(--white-bright, #F5F5F5);
  }
  @media (prefers-reduced-motion: no-preference) {
    .ml-switcher-rail.ml-slide-l .ml-switcher-slide { animation: ml-slide-in-l 360ms cubic-bezier(.32,.72,0,1); }
    .ml-switcher-rail.ml-slide-r .ml-switcher-slide { animation: ml-slide-in-r 360ms cubic-bezier(.32,.72,0,1); }
  }
  @keyframes ml-slide-in-l { from { opacity: .35; transform: translateX(14px); } to { opacity: 1; transform: none; } }
  @keyframes ml-slide-in-r { from { opacity: .35; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

  /* ---- Fix 4: AP TOP 25 (now Top 5) row spacing ------------------------ */
  /* Original grid (22px 1fr auto) put the flexible 1fr track on the logo,
     opening a huge gap between rank/logo and the team name. Repack so rank
     and logo size to content, the team name takes the flexible track, and
     record/move chips sit flush right. */
  .sn--c_aptop25 .ap-row {
    grid-template-columns: 20px 22px 1fr auto auto;
    gap: 8px;
  }
  .sn--c_aptop25 .ap-row .ap-team {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

}

/* =========================================================================
   Worker A / pward 2026-06-01 - issue #953
   Dashboard hero banner too big - fills viewport, pushes content below fold.
   Closes #953.
   Source: Brock's ticket body (Forgejo #953) cited "~40vh header banner per
   concept-art/2.1 + 1.2 proportions" - concept-art is not present on disk,
   so spec is from the ticket text: cap hero to ~40vh.
   Note: components.css already has an earlier .sn--c_hero{height:clamp(13rem,
   40vh,26rem)!important;...} rule, but cascade order with later/legacy rules
   AND chrome.js runtime <style> injection means the cap can lose at certain
   viewports/load timings. This rule raises specificity to (0,3,2) via
   main.content > section.hero.sn--c_hero so it wins regardless.
   Append-only, no existing rules edited.
   ========================================================================= */
main.content > section.hero.sn--c_hero {
  height: clamp(13rem, 40vh, 26rem) !important;
  max-height: 40vh !important;
  min-height: 13rem !important;
  aspect-ratio: auto !important;
  width: 100% !important;
}
main.content > section.hero.sn--c_hero .hero-bg,
main.content > section.hero.sn--c_hero .hero-stadium,
main.content > section.hero.sn--c_hero .hero-vignette {
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
}
@media (prefers-reduced-motion: reduce) {
  main.content > section.hero.sn--c_hero,
  main.content > section.hero.sn--c_hero .hero-stadium {
    animation: none !important;
    transition: none !important;
  }
}

@layer components {
  /* ===== [W-CROSS] No yellow text — WHITE ONLY =====
     Brock (June 1 audio): "We don't like yellow writing at all. Really anything, honestly."
     Source: vision/june1/cross-cutting-rules.md #1 + dashboard.md (record/rank/PF/PA, top-25,
     points-per-game, helmet initials, AP numbering). Gold stays for medals/trophy/borders/
     gradients/glows (background & fill only) — this rule recolors TEXT to white site-wide.
     Appended override (architecture: append, don't edit). */
  .act-line strong,.ap-rank,.arena-round,.badge-end,.badge-gold,.card-eyebrow,.card-eyebrow,.tg-eyebrow,.card-title,h2.card-title,.cf-reward-notice,.compliance-banner,.dm-status.pending,.exp-btn-fav.is-active,.exp-game-cta,.exp-game-helmet-fallback,.exp-game-score.is-winning,.exp-stat-val,.exp-stats-4 .exp-stat-val.is-gold,.exp-team-logo-fallback,.finish-1st,.fun-banner,.hr-badge,.hw-score,.ic-dir.outgoing,.inv-detail-val.gold,.jbc-msg-error,.lb-name.is-you,.lb-rank,.lc-pos.flex,.lu-ovr-wrap .lu-ovr,.lu-tm,.ml-helmet-btn:hover .ml-helmet-caret,.ml-helmet-btn:focus-visible .ml-helmet-caret,.ml-helmet-caret,.ml-helmet-initials,.ml-helmet-static .ml-helmet-initials,.ml-league-option .ml-opt-badge,.ml-league-option .ml-opt-check,.mu-score-a, .mu-score-b,.nav-item:hover .nav-ic,.nav-item:hover .nav-chev,.numeral-accent,.perf-ppg,.result-stat .rs-val,.reward-badge.perfect-week,.reward-card.earned,.rr-outcome.push,.rr-pick,.rule-val,.sb-team-score,.sn--c_matchups .mu-score,.sn--c_scoreboard .sb-center .sb-team-score,.st-rank,.st-record,.st-val,.stat-box--accent .stat-box-num,.tg-eyebrow,.tg-team .tg-sc,.trophy-item:hover,
  .stat-card .card-title, .lb-rank.is-gold { color: var(--white-bright) !important; }
}

@layer components {
  /* ===== [W-CROSS] News/score ticker lives ONLY on the dashboard =====
     Brock (June 1 audio): the news feed/ticker is chrome.js-injected onto every page, but
     "the dashboard is the ONLY page where we actually want the news feed" — other pages show a
     "lingering news banner" that must be killed. The ticker has no baked markup (chrome.js
     injects it sitewide), so hide it on every route except the dashboard (/ and /dashboard).
     W-DASHBOARD-NEWS keeps the dashboard feed independent of this strip (coordinated).
     Ref: vision/june1/cross-cutting-rules.md #2 + dashboard.md + more-pages.md. */
  html:not([data-route="/"]):not([data-route="/dashboard"]) .scoreticker,
  html:not([data-route="/"]):not([data-route="/dashboard"]) .sn--c_scoreticker {
    display: none !important;
  }
}
/* ════════════════════════════════════════════════════════════════════════
   W-DASHBOARD-NEWS · A4 — News page redesign (append-only).
   Adds the single CYCLING HERO tile (replaces lead + side-rail), kills the
   "large black box" gap, and makes the page reflow down to iPhone width.
   Scoped under html[data-route="/news"]; appended last so it wins the cascade
   over the legacy .row-nw-lead / .sn--c_lead / .trend-* rules above (those
   classes are no longer emitted by the redesigned markup).

   Patterns cited (RESEARCH/): Aceternity UI "Cards Carousel" / hero-slider
   crossfade + dot nav; Magic UI "Marquee/Hero" auto-advance pause-on-hover;
   Utopia.fyi fluid type/space (CC-BY) for clamp() ladders; MDN container
   queries (CC-BY-SA). prefers-reduced-motion honored (no auto-advance, no
   slide transition). Fluid range 344→2160px.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
html[data-route="/news"]{

  /* ---- ROW ---------------------------------------------------------------
     Single full-width tile. No 2-column grid, no reserved side-rail column —
     that empty reserved column was the source of the "large black box" gap
     once the trending rail was removed. The row now hugs its one child. */
  .row-nw-hero { display: block; }

  /* ---- HERO TILE ---------------------------------------------------------
     BLACK-BOX FIX: height is driven by content, not a fixed min-height, and
     the media is capped by max-height so a very wide column (32" 4K) can't
     stretch the 16:9 image into a giant dark band. The tile is a horizontal
     split (media | body) on desktop that stacks on narrow widths. */
  .sn--c_hero {
    position: relative;
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    min-height: 0;                 /* never reserve empty space */
    cursor: default;
  }

  .hero-track { position: relative; display: contents; }

  /* Each slide spans the full tile (media + body). Crossfade between slides. */
  .hero-slide {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    cursor: pointer;
    opacity: 0;
    transition: opacity .5s ease;
  }
  /* Non-subgrid fallback: re-declare the split so older engines still lay out. */
  @supports not (grid-template-columns: subgrid) {
    .hero-slide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  }
  .hero-slide.is-active { opacity: 1; position: relative; z-index: 1; }
  .hero-slide[hidden] { display: none; }
  .sn--c_hero:hover .hero-slide.is-active { box-shadow: none; }

  .hero-media {
    position: relative;
    overflow: hidden;
    background: #0a0a0a linear-gradient(135deg, rgba(255,26,26,.06), rgba(240,189,48,.02));
    aspect-ratio: 16 / 9;
    /* CAP the media so wide columns don't grow a tall black band. */
    max-height: clamp(220px, 30vw, 420px);
    border-right: 1px solid var(--gray-border, #2A2A2A);
  }
  .hero-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
  .sn--c_hero:hover .hero-slide.is-active .hero-img { transform: scale(1.03); }
  .hero-media.no-photo .hero-img { object-fit: cover; }
  .hero-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, rgba(5,5,5,0) 55%, rgba(5,5,5,.55) 100%),
                linear-gradient(180deg, rgba(5,5,5,0) 55%, rgba(5,5,5,.6) 100%);
  }
  .hero-cat {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    background: var(--red-primary, #FF1A1A);
    padding: 5px 10px; border-radius: 4px;
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
  }
  .hero-cat.cat-injury { background: #b3261e; }
  .hero-cat.cat-game-recap { background: #1f6fcd; }
  .hero-cat.cat-ranking { background: var(--gold-accent, #F0BD30); color: #050505; }
  .hero-cat.cat-transaction { background: #6b3fa0; }
  .hero-cat.cat-coaching { background: #2e7d57; }
  .hero-cat.cat-general { background: rgba(20,20,20,.85); }

  .hero-body {
    display: flex; flex-direction: column; justify-content: center; gap: 12px;
    padding: clamp(18px, 2vw, 34px);
    min-width: 0;
  }
  .hero-eyebrow {
    font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; font-weight: 700;
    color: var(--white-bright, #F5F5F5);
  }
  .hero-title {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: var(--fs-fluid-h1, clamp(1.5rem, 1.1rem + 2vw, 2.5rem)); /* 24 → 40px */
    line-height: 1.04; letter-spacing: .01em; margin: 0;
    color: var(--white-bright, #F5F5F5);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-excerpt {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: var(--fs-fluid-body, clamp(0.875rem, 0.84rem + 0.18vw, 1rem));
    line-height: 1.5; margin: 0; color: var(--text-muted, #8A8A8A);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-meta {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 2px;
    font-family: var(--f-mono); font-size: 16px; letter-spacing: .12em;
    color: var(--text-muted, #8A8A8A);
  }
  .hero-school-logo { width: 18px; height: 18px; border-radius: 50%; background: #1a1a1a; object-fit: contain; }
  .hero-school { color: var(--white-bright, #F5F5F5); }
  .hero-dot-sep { opacity: .5; }

  /* ---- CONTROLS ---------------------------------------------------------- */
  .hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%;
    color: var(--white-bright, #F5F5F5);
    background: rgba(5,5,5,.55);
    border: 1px solid rgba(255,255,255,.18);
    cursor: pointer;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .hero-nav:hover { background: var(--red-primary, #FF1A1A); border-color: var(--red-primary, #FF1A1A); }
  .hero-nav:focus-visible { outline: 2px solid var(--gold-accent, #F0BD30); outline-offset: 2px; }
  .hero-prev { left: 12px; }
  .hero-next { right: 12px; }

  .hero-dots {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4;
    display: flex; gap: 8px; justify-content: center;
  }
  .hero-dot {
    width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.32);
    border: 1px solid rgba(255,255,255,.25);
    transition: background .18s ease, transform .18s ease, width .18s ease;
  }
  .hero-dot:hover { background: rgba(255,255,255,.6); }
  .hero-dot:focus-visible { outline: 2px solid var(--gold-accent, #F0BD30); outline-offset: 2px; }
  .hero-dot.is-active { background: var(--red-primary, #FF1A1A); border-color: var(--red-primary, #FF1A1A); width: 22px; border-radius: 5px; }

  .hero-skeleton {
    grid-column: 1 / -1;
    padding: clamp(18px, 2vw, 34px);
    display: flex; flex-direction: column; gap: 12px; justify-content: center;
    min-height: clamp(200px, 26vw, 360px);
  }
  .hero-empty {
    grid-column: 1 / -1;
    padding: 48px 24px; text-align: center;
    font-family: var(--f-body, "Inter", sans-serif); font-size: 16px;
    color: var(--text-muted, #8A8A8A);
  }

  /* Credit node already styled above; ensure it sits above the hero vignette. */
  .hero-media .nw-credit { z-index: 3; }

  /* prefers-reduced-motion: no crossfade, no scale; JS already disables auto-advance. */
  @media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
    .hero-img { transition: none; }
    .sn--c_hero:hover .hero-slide.is-active .hero-img { transform: none; }
  }

  /* ---- RESPONSIVE: stack media over body, reflow to iPhone width --------- */
  @media (max-width: 760px) {
    .sn--c_hero { grid-template-columns: 1fr; }
    .hero-slide { grid-template-columns: 1fr; }
    @supports not (grid-template-columns: subgrid) { .hero-slide { grid-template-columns: 1fr; } }
    .hero-media {
      grid-column: 1; grid-row: auto;
      max-height: none;            /* let the 16:9 image set its own height when stacked */
      border-right: none; border-bottom: 1px solid var(--gray-border, #2A2A2A);
    }
    .hero-body { grid-column: 1; }
    .hero-nav { width: 34px; height: 34px; }
  }
  @media (max-width: 420px) {
    .hero-body { padding: 14px; gap: 9px; }
    .hero-cat { top: 10px; left: 10px; font-size: 16px; padding: 4px 8px; }
    .hero-prev { left: 8px; } .hero-next { right: 8px; }
    .hero-nav { width: 32px; height: 32px; }
    .hero-dots { bottom: 8px; }
    /* Filter chips: keep on one scrollable row instead of stacking tall. */
    .nw-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nw-filters::-webkit-scrollbar { display: none; }
    .nw-chip { flex: 0 0 auto; }
    .nw-feed-grid { padding-inline: 10px; }
  }
  /* Smallest iPhone (344–360px): nothing should overflow horizontally. */
  @media (max-width: 360px) {
    .hero-title { -webkit-line-clamp: 2; }
    .hero-excerpt { -webkit-line-clamp: 2; }
  }
}
}


@layer components {
  /* ===== [W-CROSS] Sub-page inline-<style> drain → canonical (route-scoped) =====
     Brock (June 1 audio): sub-pages 'don't auto-scale', use 'fixed pixel sizes' + the wrong
     font (legacy display face) because each carried a big inline <style> that re-declared the design system
     and overrode canonical. Per W-CROSS rule #2 (vision/june1/cross-cutting-rules.md +
     more-pages.md), the 21 inline blocks were deleted from the page HTML; their genuinely
     page-unique component rules are folded here, route-scoped via html[data-route] (canonical,
     NOT per-page files). Canonical Graduate font + fluid layout now apply to every sub-page.
     ZERO legacy-display / ZERO 1440px caps / ZERO yellow text in this fold (auto-verified). */
  /* --- /alerts (alerts) --- */
  html[data-route="/alerts"] .alert-tabs{display:flex;gap:0;border-bottom:1px solid var(--gray-border);overflow-x:auto;}
  html[data-route="/alerts"] .alert-tab{padding:12px 18px;font-family:var(--f-display);font-size:16px;letter-spacing:.1em;color:var(--gray-light);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;}
  html[data-route="/alerts"] .alert-tab:hover{color:var(--white-bright);}
  html[data-route="/alerts"] .alert-tab.active{color:var(--white-bright);border-bottom-color:var(--red-primary);}
  html[data-route="/alerts"] .alert-tab .pill{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;background:var(--red-primary);color:#fff;border-radius:10px;font-family:var(--f-body);font-size:16px;font-weight:700;letter-spacing:0;}
  html[data-route="/alerts"] .alert-list{display:flex;flex-direction:column;}
  html[data-route="/alerts"] .alert-row{display:flex;align-items:flex-start;gap:14px;padding:14px 20px;border-bottom:1px solid var(--hairline);transition:background .12s;}
  html[data-route="/alerts"] .alert-row:last-child{border-bottom:none;}
  html[data-route="/alerts"] .alert-row:hover{background:rgba(255,255,255,.015);}
  html[data-route="/alerts"] .alert-row.unread{background:rgba(255,26,26,.025);}
  html[data-route="/alerts"] .alert-row.unread .alert-title{color:var(--white-bright);}
  html[data-route="/alerts"] .alert-icon{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--black-soft);border:1px solid var(--gray-border);display:flex;align-items:center;justify-content:center;font-size:18px;}
  html[data-route="/alerts"] .alert-row.unread .alert-icon{border-color:rgba(255,26,26,.4);background:rgba(255,26,26,.06);}
  html[data-route="/alerts"] .alert-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
  html[data-route="/alerts"] .alert-title{font-size:16px;font-weight:600;color:var(--white-bright);line-height:1.35;}
  html[data-route="/alerts"] .alert-text{font-size:16px;color:var(--gray-light);line-height:1.4;}
  html[data-route="/alerts"] .alert-meta{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--gray-light);margin-top:2px;}
  html[data-route="/alerts"] .alert-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto;}
  @media(max-width:767px){
    html[data-route="/alerts"] .alert-row{padding:12px 14px;gap:10px;}
    html[data-route="/alerts"] .alert-actions{flex-direction:row;align-items:center;}
  }
  @media(max-width:359px){
    html[data-route="/alerts"] .alert-icon{display:none;}
    html[data-route="/alerts"] .hide-320{display:none !important;}
  }
  /* --- /compare (compare) --- */
  html[data-route="/compare"] .school-sel-wrap{display:flex;flex-direction:column;gap:8px;}
  html[data-route="/compare"] .school-chip{display:flex;align-items:center;gap:8px;}
  html[data-route="/compare"] .school-logo{width:40px;height:40px;border-radius:8px;object-fit:contain;background:var(--surface2);}
  html[data-route="/compare"] .comp-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
  html[data-route="/compare"] .comp-stat-lbl{font-size:16px;color:var(--text-muted);width:120px;text-align:right;font-weight:600;}
  html[data-route="/compare"] .comp-bar-track{flex:1;height:8px;background:var(--surface2);border-radius:4px;overflow:hidden;display:flex;}
  html[data-route="/compare"] .comp-bar-a{height:100%;background:var(--red-primary);border-radius:4px;transition:width .6s;}
  html[data-route="/compare"] .comp-bar-b{height:100%;background:#3dba6e;margin-left:auto;border-radius:4px;transition:width .6s;}
  html[data-route="/compare"] .comp-val{font-size:16px;font-weight:700;width:50px;}
  html[data-route="/compare"] .comp-school-header{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;}
  html[data-route="/compare"] .search-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--surface2);border:1px solid var(--border);border-radius:6px;z-index:50;max-height:240px;overflow-y:auto;}
  html[data-route="/compare"] .cmp-search-result{padding:8px 12px;font-size:16px;cursor:pointer;border-bottom:1px solid var(--border);}
  html[data-route="/compare"] .cmp-search-result:last-child{border-bottom:none;}
  html[data-route="/compare"] .cmp-search-result:hover{background:rgba(200,16,46,.1);}
  html[data-route="/compare"] .cmp-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 0;border-bottom:1px solid var(--border);}
  html[data-route="/compare"] .cmp-row:last-child{border-bottom:none;}
  html[data-route="/compare"] .cmp-val{font-size:16px;font-weight:700;min-width:60px;}
  /* --- /draft (draft) --- */
  @layer components {
  html[data-route="/draft"]{
    /* ex-:root local supplements — canonical tokens own fonts/brand colors.
       --f-disp aliased to the canonical display token (NOT var(--f-display)); gold for
       non-text fills aliased to --gold-accent. Text gold was neutralized to
       --white-bright inline below. */
    --f-disp: var(--f-display);
    --black-2: #0A0A0A;
    --black-3: #0D0D0D;
    --black-4: #111;
    --red: var(--red-primary, #FF1A1A);
    --gold: var(--gold-accent, #F0BD30);
    --gold-dim: rgba(240,189,48,.15);
    --green: #5ED47A;
    --text-hi: var(--white-bright, #F0F0F0);
    --text-mid: #8A8A8A;
    --text-lo: #4A4A4A;
    --hair: var(--hairline, rgba(255,255,255,.06));
    --hair2: var(--hairline-2, rgba(255,255,255,.10));
    --pos-qb: #FF6B5B;
    --pos-rb: #5ED47A;
    --pos-wr: #5AAFFF;
    --pos-te: #FFB340;
    --pos-flex: #BF7BE0;
    --pos-def: #AAAAAA;
    --pos-k: #F0BD30;
  }
  
  html[data-route="/draft"] .d-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
  
  html[data-route="/draft"] .skel { background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%); background-size: 200% 100%; animation: draft-skel-shimmer 1.5s ease-in-out infinite; border-radius: 4px; }
  @keyframes draft-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  html[data-route="/draft"] .skel-text { height: 12px; margin-bottom: 6px; }
  html[data-route="/draft"] .skel-heading { height: 28px; width: 60%; margin-bottom: 10px; }
  html[data-route="/draft"] .skel-block { height: 40px; }
  html[data-route="/draft"] .skel-row { display: flex; gap: 8px; margin-bottom: 6px; }
  html[data-route="/draft"] .skel-row > * { flex: 1; }
  
  html[data-route="/draft"] .d-card { background: var(--black-3); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
  
  html[data-route="/draft"] .reveal { opacity: 0; transform: translateY(7px); transition: opacity .4s cubic-bezier(.2,.8,.4,1), transform .4s cubic-bezier(.2,.8,.4,1); }
  html[data-route="/draft"] .reveal.is-in { opacity: 1; transform: none; }
  
  html[data-route="/draft"] .view-lobby, html[data-route="/draft"] .view-draft, html[data-route="/draft"] .view-complete { display: none; }
  html[data-route="/draft"] .app[data-view="lobby"] .view-lobby { display: flex; }
  html[data-route="/draft"] .app[data-view="draft"] .view-draft { display: flex; }
  html[data-route="/draft"] .app[data-view="complete"] .view-complete { display: flex; }
  
  html[data-route="/draft"] .fmt-snake, html[data-route="/draft"] .fmt-auction { display: none; }
  html[data-route="/draft"] .app[data-format="snake"] .fmt-snake { display: flex; }
  html[data-route="/draft"] .app[data-format="auction"] .fmt-auction { display: flex; }
  
  html[data-route="/draft"] .lobby-wrap { flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding: 32px 24px; text-align: center; gap: 24px; }
  html[data-route="/draft"] .lobby-icon { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,26,26,.15), rgba(240,189,48,.1)); border: 2px solid rgba(255,26,26,.3); display: flex; align-items: center; justify-content: center; font-size: 36px; box-shadow: 0 0 24px rgba(255,26,26,.15); }
  html[data-route="/draft"] .lobby-title { font-family: var(--f-disp); font-size: 42px; letter-spacing: .06em; color: var(--text-hi); }
  html[data-route="/draft"] .lobby-sub { font-size: 16px; color: var(--text-mid); max-width: 400px; line-height: 1.5; }
  html[data-route="/draft"] .lobby-countdown { font-family: var(--f-disp); font-size: 64px; color: var(--white-bright); text-shadow: 0 0 28px rgba(240,189,48,.3); letter-spacing: .08em; }
  html[data-route="/draft"] .lobby-countdown-label { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .2em; color: var(--text-lo); text-transform: uppercase; margin-top: -8px; }
  html[data-route="/draft"] .lobby-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; width: 100%; max-width: 480px; }
  html[data-route="/draft"] .lobby-stat { background: rgba(255,255,255,.03); border: 1px solid var(--hair); border-radius: 8px; padding: 12px; text-align: center; }
  html[data-route="/draft"] .lobby-stat-val { font-family: var(--f-disp); font-size: 22px; color: var(--text-hi); }
  html[data-route="/draft"] .lobby-stat-lbl { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .14em; color: var(--text-lo); text-transform: uppercase; margin-top: 2px; }
  html[data-route="/draft"] .lobby-participants { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 480px; width: 100%; }
  html[data-route="/draft"] .lobby-member { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); border-radius: 20px; font-size: 16px; font-weight: 600; }
  html[data-route="/draft"] .lobby-member .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(94,212,122,.5); }
  html[data-route="/draft"] .lobby-member .dot.offline { background: var(--text-lo); box-shadow: none; }
  html[data-route="/draft"] .lobby-chat { width: 100%; max-width: 480px; background: rgba(255,255,255,.02); border: 1px solid var(--hair); border-radius: 8px; display: flex; flex-direction: column; max-height: 200px; }
  html[data-route="/draft"] .lobby-chat-messages { flex: 1; overflow-y: auto; padding: 10px; min-height: 80px; font-size: 16px; color: var(--text-mid); }
  html[data-route="/draft"] .lobby-chat-input { display: flex; border-top: 1px solid var(--hair); }
  html[data-route="/draft"] .lobby-chat-input input { flex: 1; background: none; border: none; padding: 10px 12px; color: var(--text-hi); font-size: 16px; }
  html[data-route="/draft"] .lobby-chat-input button { background: none; border: none; padding: 10px 14px; color: var(--white-bright); font-family: var(--f-mono); font-size: 16px; font-weight: 700; cursor: pointer; letter-spacing: .08em; }
  html[data-route="/draft"] .lobby-start-btn { padding: 14px 32px; background: linear-gradient(180deg, #FF2A2A, #C40000); border: 1px solid #FF4D4D; border-radius: 8px; color: #fff; font-family: var(--f-disp); font-size: 18px; letter-spacing: .08em; cursor: pointer; display: none; }
  html[data-route="/draft"] .lobby-start-btn.show { display: inline-flex; align-items: center; gap: 8px; }
  
  html[data-route="/draft"] .draft-wrap { flex-direction: column; gap: 8px; }
  html[data-route="/draft"] .d-row { display: flex; gap: 8px; min-height: 0; }
  html[data-route="/draft"] .d-row--top { flex: 0 0 126px; }
  /* D4/D11: d-row--bot (Queue+Roster) now appears before d-row--mid (Board) in DOM;
     give it a taller fixed height so both Queue and Roster are comfortably visible */
  html[data-route="/draft"] .d-row--bot { flex: 0 0 220px; }
  html[data-route="/draft"] .d-row--mid { flex: 1; min-height: 360px; }
  html[data-route="/draft"] .d-row--foot { flex: 0 0 36px; display: flex; justify-content: flex-end; align-items: center; }
  
  html[data-route="/draft"] .d-clock { flex: 0 0 calc(44% - 3px); flex-direction: row; align-items: stretch; padding: 12px 14px; gap: 12px; background: linear-gradient(140deg, #0D0D0D 0%, #120808 100%); border-color: rgba(255,26,26,.22); box-shadow: 0 0 18px rgba(255,26,26,.06); }
  html[data-route="/draft"] .clock-rp { display: flex; gap: 14px; flex-shrink: 0; align-items: center; }
  html[data-route="/draft"] .clock-stat { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
  html[data-route="/draft"] .clock-stat-lbl { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .18em; color: #3A3A3A; text-transform: uppercase; }
  html[data-route="/draft"] .clock-stat-val { font-family: var(--f-disp); font-size: 40px; line-height: 1; color: var(--text-hi); }
  html[data-route="/draft"] .clock-div { width: 1px; background: rgba(255,255,255,.07); align-self: stretch; margin: 4px 0; }
  html[data-route="/draft"] .clock-team { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  html[data-route="/draft"] .clock-helmet-wrap { flex-shrink: 0; width: 58px; display: flex; align-items: center; justify-content: center; position: relative; }
  html[data-route="/draft"] .clock-helmet { width: 52px; height: 70px; border-radius: 8px; background: linear-gradient(150deg, #1A1A2E, #0D0D1E); border: 2px solid rgba(255,26,26,.25); display: flex; align-items: center; justify-content: center; font-family: var(--f-disp); font-size: 18px; color: rgba(255,255,255,.25); filter: drop-shadow(0 0 10px rgba(255,26,26,.18)); animation: draft-float-h 4.5s ease-in-out infinite alternate; }
  @keyframes draft-float-h { from { transform: translateY(0); } to { transform: translateY(-8px); } }
  html[data-route="/draft"] .clock-team-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  html[data-route="/draft"] .clock-otc { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .18em; color: var(--white-bright); text-transform: uppercase; }
  html[data-route="/draft"] .clock-tname { font-family: var(--f-disp); font-size: 21px; letter-spacing: .04em; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-route="/draft"] .clock-rec { font-family: var(--f-mono); font-size: 16px; color: var(--text-mid); }
  html[data-route="/draft"] .clock-timer { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.07); }
  html[data-route="/draft"] .clock-tval { font-family: var(--f-disp); font-size: 46px; line-height: 1; color: var(--white-bright); letter-spacing: .04em; text-shadow: 0 0 22px rgba(240,189,48,.35); min-width: 88px; text-align: right; transition: color .3s, text-shadow .3s; }
  html[data-route="/draft"] .clock-tval.urgent { color: var(--red-bright); text-shadow: 0 0 22px rgba(255,59,48,.5); animation: draft-t-pulse .6s ease-in-out infinite; }
  @keyframes draft-t-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
  html[data-route="/draft"] .clock-tlbl { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .2em; color: #333; text-transform: uppercase; }
  
  html[data-route="/draft"] .pix-ring { position: absolute; inset: 50% auto auto 50%; width: 64px; height: 64px; transform: translate(-50%,-50%); pointer-events: none; }
  html[data-route="/draft"] .pix-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); shape-rendering: crispEdges; }
  html[data-route="/draft"] .pix-ring .pr-track { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 4; }
  html[data-route="/draft"] .pix-ring .pr-fill { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: butt; stroke-dasharray: 175.93; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .3s; }
  html[data-route="/draft"] .pix-ring.urgent .pr-fill { stroke: var(--red-bright); animation: draft-pr-pulse .55s steps(2,end) infinite; }
  @keyframes draft-pr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
  
  html[data-route="/draft"] .d-upnext { flex: 1; padding: 10px 14px; gap: 7px; }
  html[data-route="/draft"] .upnext-hd { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  html[data-route="/draft"] .upnext-lbl { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .2em; color: #333; text-transform: uppercase; }
  html[data-route="/draft"] .upnext-status { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
  html[data-route="/draft"] .status-live { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .1em; color: var(--red-bright); text-transform: uppercase; }
  html[data-route="/draft"] .status-time { font-family: var(--f-body); font-size: 16px; color: var(--text-mid); }
  html[data-route="/draft"] .upnext-chips { display: flex; gap: 6px; flex: 1; min-height: 0; align-items: stretch; }
  html[data-route="/draft"] .un-chip { flex: 1; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; cursor: pointer; transition: all .15s; }
  html[data-route="/draft"] .un-chip:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
  html[data-route="/draft"] .un-logo { width: 36px; height: 48px; border-radius: 5px; flex-shrink: 0; background: linear-gradient(150deg, #1C1C2E, #12121E); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-family: var(--f-disp); font-size: 16px; color: rgba(255,255,255,.3); }
  html[data-route="/draft"] .un-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  html[data-route="/draft"] .un-name { font-family: var(--f-body); font-size: 16px; font-weight: 700; color: var(--text-hi); line-height: 1.2; }
  html[data-route="/draft"] .un-rec { font-family: var(--f-mono); font-size: 16px; color: #5A5A5A; }
  html[data-route="/draft"] .un-num { margin-left: auto; font-family: var(--f-disp); font-size: 24px; color: rgba(255,255,255,.12); flex-shrink: 0; }
  
  html[data-route="/draft"] .auction-clock { flex: 0 0 calc(44% - 3px); padding: 12px 14px; background: linear-gradient(140deg, #0D0D0D, #0D0A08); border-color: rgba(255,255,255,.22); }
  html[data-route="/draft"] .auction-nominator { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .14em; color: var(--white-bright); text-transform: uppercase; margin-bottom: 6px; }
  html[data-route="/draft"] .auction-player-name { font-family: var(--f-disp); font-size: 28px; letter-spacing: .04em; color: var(--text-hi); }
  html[data-route="/draft"] .auction-player-meta { font-family: var(--f-mono); font-size: 16px; color: var(--text-mid); margin-top: 2px; }
  html[data-route="/draft"] .auction-bid-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
  html[data-route="/draft"] .auction-current-bid { font-family: var(--f-disp); font-size: 36px; color: var(--white-bright); text-shadow: 0 0 16px rgba(240,189,48,.25); }
  html[data-route="/draft"] .auction-bid-label { font-family: var(--f-mono); font-size: 16px; color: var(--text-lo); letter-spacing: .14em; text-transform: uppercase; }
  html[data-route="/draft"] .auction-bidder { font-family: var(--f-body); font-size: 16px; font-weight: 600; color: var(--text-mid); }
  html[data-route="/draft"] .auction-bid-controls { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
  html[data-route="/draft"] .auction-bid-input { width: 80px; padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: var(--text-hi); font-family: var(--f-mono); font-size: 16px; text-align: center; }
  html[data-route="/draft"] .auction-bid-input:focus { border-color: rgba(255,255,255,.5); }
  html[data-route="/draft"] .auction-bid-btn { padding: 8px 16px; background: linear-gradient(180deg, #FF2A2A, #C40000); border: 1px solid #FF4D4D; border-radius: 6px; color: #fff; font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .1em; cursor: pointer; text-transform: uppercase; min-height: 44px; }
  html[data-route="/draft"] .auction-bid-btn:hover { filter: brightness(1.1); }
  html[data-route="/draft"] .auction-bid-btn:disabled { opacity: .4; cursor: not-allowed; }
  html[data-route="/draft"] .auction-budget-bar { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
  html[data-route="/draft"] .auction-budget-val { font-family: var(--f-disp); font-size: 18px; color: var(--green); }
  html[data-route="/draft"] .auction-budget-lbl { font-family: var(--f-mono); font-size: 16px; color: var(--text-lo); letter-spacing: .1em; text-transform: uppercase; }
  
  html[data-route="/draft"] .panel-hd { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 7px; border-bottom: 1px solid var(--hair); flex-shrink: 0; }
  html[data-route="/draft"] .panel-title { font-family: var(--f-disp); font-size: 16px; letter-spacing: .06em; color: var(--white-bright); }
  html[data-route="/draft"] .panel-meta { font-family: var(--f-mono); font-size: 16px; color: var(--text-lo); letter-spacing: .1em; }
  
  html[data-route="/draft"] .d-board { flex: 0 0 calc(40% - 3px); }
  html[data-route="/draft"] .pos-row { display: flex; gap: 3px; padding: 5px 10px; flex-shrink: 0; flex-wrap: wrap; }
  html[data-route="/draft"] .pos-btn { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .07em; padding: 4px 7px; border-radius: 4px; border: 1px solid rgba(255,255,255,.09); background: transparent; color: #5A5A5A; cursor: pointer; transition: all .15s; min-height: 44px; display: inline-flex; align-items: center; }
  html[data-route="/draft"] .pos-btn:hover { border-color: rgba(255,255,255,.18); color: var(--text-hi); }
  html[data-route="/draft"] .pos-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  html[data-route="/draft"] .pos-btn.active { background: rgba(255,26,26,.12); border-color: rgba(255,26,26,.45); color: var(--red-bright); }
  html[data-route="/draft"] .search-wrap { display: flex; align-items: center; gap: 5px; padding: 4px 9px; min-height: 42px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; cursor: text; transition: border-color .15s; }
  html[data-route="/draft"] .search-wrap:focus-within { border-color: rgba(255,255,255,.45); }
  html[data-route="/draft"] .search-wrap svg { flex-shrink: 0; opacity: .4; }
  html[data-route="/draft"] .search-wrap input { background: none; border: none; font-family: var(--f-mono); font-size: 16px; color: var(--text-hi); width: 110px; }
  
  html[data-route="/draft"] .board-cols { display: grid; grid-template-columns: 28px minmax(0,1fr) 52px 44px 44px 20px; padding: 3px 12px; gap: 4px; flex-shrink: 0; }
  html[data-route="/draft"] .board-ch { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .15em; color: #8A8A8A; text-transform: uppercase; } /* #2E2E2E was ~1.3:1 on the dark board — invisible column headers (vision: "gray-on-gray"). #8A8A8A ≈ 5:1. */
  html[data-route="/draft"] .board-ch.r { text-align: right; }
  html[data-route="/draft"] .pl-list { flex: 1; overflow-y: auto; min-height: 0; }
  html[data-route="/draft"] .pl-list::-webkit-scrollbar { width: 3px; }
  html[data-route="/draft"] .pl-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
  html[data-route="/draft"] .pl-row { display: grid; grid-template-columns: 28px minmax(0,1fr) 52px 44px 44px 20px; padding: 0 12px; gap: 4px; align-items: center; height: 44px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.025); transition: background .15s, transform .1s; }
  html[data-route="/draft"] .pl-row:hover { background: rgba(255,26,26,.07); transform: translateX(2px); }
  html[data-route="/draft"] .pl-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  html[data-route="/draft"] .pl-rank { font-family: var(--f-mono); font-size: 16px; color: #9AA0A6; font-weight: 700; }
  html[data-route="/draft"] .pl-namewrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
  html[data-route="/draft"] .pl-dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-disp); font-size: 16px; }
  html[data-route="/draft"] .pl-name { font-family: var(--f-body); font-size: 16px; font-weight: 600; color: #E0E0E0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-route="/draft"] .pos-badge { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .05em; padding: 2px 5px; border-radius: 3px; text-align: center; }
  html[data-route="/draft"] .pb-qb { background: rgba(255,107,91,.18); color: var(--pos-qb); border: 1px solid rgba(255,107,91,.3); }
  html[data-route="/draft"] .pb-rb { background: rgba(94,212,122,.18); color: var(--pos-rb); border: 1px solid rgba(94,212,122,.3); }
  html[data-route="/draft"] .pb-wr { background: rgba(90,175,255,.18); color: var(--pos-wr); border: 1px solid rgba(90,175,255,.3); }
  html[data-route="/draft"] .pb-te { background: rgba(255,179,64,.18); color: var(--pos-te); border: 1px solid rgba(255,179,64,.3); }
  html[data-route="/draft"] .pb-flex { background: rgba(191,123,224,.18); color: var(--pos-flex); border: 1px solid rgba(191,123,224,.3); }
  html[data-route="/draft"] .pb-def { background: rgba(170,170,170,.15); color: var(--pos-def); border: 1px solid rgba(170,170,170,.25); }
  html[data-route="/draft"] .pb-k { background: rgba(240,189,48,.15); color: var(--white-bright); border: 1px solid rgba(240,189,48,.28); }
  html[data-route="/draft"] .pl-school { font-family: var(--f-mono); font-size: 16px; font-weight: 700; color: #B0B6BC; letter-spacing: .03em; text-align: center; }
  html[data-route="/draft"] .pl-adp { font-family: var(--f-mono); font-size: 16px; color: #9AA0A6; text-align: right; }
  html[data-route="/draft"] .pl-addq { font-family: var(--f-mono); font-size: 16px; font-weight: 700; color: #9AA0A6; text-align: center; cursor: pointer; transition: color .15s, transform .1s; }
  html[data-route="/draft"] .pl-addq:hover { color: var(--white-bright); transform: scale(1.2); }
  html[data-route="/draft"] .pl-empty { padding: 18px; text-align: center; font-family: var(--f-mono); font-size: 16px; color: #B0B6BC; letter-spacing: .1em; }
  
  html[data-route="/draft"] .d-grid { flex: 1; }
  html[data-route="/draft"] .grid-heads { display: grid; grid-template-columns: 46px repeat(var(--team-count, 12), 1fr); padding: 6px 10px 4px; gap: 3px; border-bottom: 1px solid var(--hair); flex-shrink: 0; }
  html[data-route="/draft"] .grid-th-space { }
  html[data-route="/draft"] .grid-th { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  html[data-route="/draft"] .grid-th-logo { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(150deg, #1A1A2E, #0D0D1E); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-family: var(--f-disp); font-size: 16px; color: rgba(255,255,255,.35); }
  html[data-route="/draft"] .grid-th-abbr { font-family: var(--f-mono); font-size: 16px; color: #9AA0A6; letter-spacing: .04em; }
  html[data-route="/draft"] .grid-th-clock .grid-th-logo { background: rgba(240,189,48,.18) !important; border-color: var(--gold) !important; color: var(--white-bright) !important; box-shadow: 0 0 8px rgba(240,189,48,.4); }
  html[data-route="/draft"] .grid-th-mine .grid-th-logo { background: rgba(255,26,26,.14) !important; border-color: var(--red) !important; color: var(--red) !important; }
  html[data-route="/draft"] .grid-body { flex: 1; overflow-y: auto; padding: 4px 10px; min-height: 0; }
  html[data-route="/draft"] .grid-body::-webkit-scrollbar { width: 3px; }
  html[data-route="/draft"] .grid-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }
  html[data-route="/draft"] .grid-round { display: grid; grid-template-columns: 46px repeat(var(--team-count, 12), 1fr); gap: 3px; margin-bottom: 3px; }
  html[data-route="/draft"] .grid-rlbl { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .1em; color: #2C2C2C; }
  html[data-route="/draft"] .grid-cell { height: 36px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid transparent; overflow: hidden; }
  html[data-route="/draft"] .gc-empty { background: rgba(255,255,255,.018); border-color: rgba(255,255,255,.035); }
  html[data-route="/draft"] .gc-done { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.09); cursor: pointer; }
  html[data-route="/draft"] .gc-done:hover { background: rgba(255,255,255,.1); }
  html[data-route="/draft"] .gc-mine { background: rgba(240,189,48,.1); border-color: rgba(255,255,255,.38); box-shadow: 0 0 8px rgba(240,189,48,.12); cursor: pointer; }
  html[data-route="/draft"] .gc-onclock { background: rgba(255,204,0,.07); border-color: rgba(255,204,0,.38); animation: draft-oc-pulse 1.3s ease-in-out infinite; }
  @keyframes draft-oc-pulse { 0%, 100% { border-color: rgba(255,204,0,.25); box-shadow: 0 0 4px rgba(255,204,0,.08); } 50% { border-color: rgba(255,204,0,.7); box-shadow: 0 0 12px rgba(255,204,0,.28); } }
  html[data-route="/draft"] .gc-pos { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .04em; }
  html[data-route="/draft"] .gc-name { font-family: var(--f-body); font-size: 16px; font-weight: 600; color: #A0A0A0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; text-align: center; }
  html[data-route="/draft"] .gc-mine .gc-name { color: var(--white-bright); font-size: 16px; font-weight: 700; }
  
  html[data-route="/draft"] .d-history { flex: 0 0 calc(20% - 3px); min-width: 180px; }
  html[data-route="/draft"] .history-list { flex: 1; overflow-y: auto; padding: 4px 8px; min-height: 0; }
  html[data-route="/draft"] .history-list::-webkit-scrollbar { width: 3px; }
  html[data-route="/draft"] .history-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }
  html[data-route="/draft"] .hist-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.025); font-size: 16px; }
  html[data-route="/draft"] .hist-pick-num { font-family: var(--f-mono); font-size: 16px; font-weight: 700; color: var(--text-lo); min-width: 28px; text-align: right; }
  html[data-route="/draft"] .hist-player-name { font-weight: 600; color: var(--text-hi); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-route="/draft"] .hist-team-abbr { font-family: var(--f-mono); font-size: 16px; color: var(--text-mid); }
  html[data-route="/draft"] .hist-auto { font-family: var(--f-mono); font-size: 16px; color: var(--pos-te); letter-spacing: .06em; }
  
  html[data-route="/draft"] .d-queue { flex: 0 0 calc(40% - 3px); }
  html[data-route="/draft"] .queue-cards { display: flex; gap: 6px; flex: 1; padding: 7px 10px; min-height: 0; overflow-x: auto; }
  html[data-route="/draft"] .q-card { flex: 0 0 120px; display: flex; flex-direction: column; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; overflow: hidden; cursor: grab; position: relative; transition: background .15s, border-color .15s; }
  html[data-route="/draft"] .q-card:hover { background: rgba(255,26,26,.055); border-color: rgba(255,26,26,.2); }
  html[data-route="/draft"] .q-card:first-child { border-color: rgba(255,255,255,.22); background: rgba(240,189,48,.04); }
  html[data-route="/draft"] .q-card[draggable="true"]:active { cursor: grabbing; }
  html[data-route="/draft"] .q-card.q-drag { opacity: .4; }
  html[data-route="/draft"] .q-card.q-over { outline: 2px dashed rgba(240,189,48,.6); outline-offset: -2px; }
  html[data-route="/draft"] .q-grip { position: absolute; top: 5px; left: 5px; font-family: var(--f-mono); font-size: 16px; color: #4A4A4A; letter-spacing: -1px; z-index: 2; pointer-events: none; }
  html[data-route="/draft"] .q-rank-pill { position: absolute; bottom: 5px; left: 5px; font-family: var(--f-disp); font-size: 16px; color: var(--white-bright); background: rgba(0,0,0,.5); border-radius: 3px; padding: 0 4px; z-index: 2; }
  html[data-route="/draft"] .q-photo { flex: 1; min-height: 60px; background: linear-gradient(180deg, rgba(18,18,34,.8), rgba(8,8,18,.95)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
  html[data-route="/draft"] .q-photo::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: linear-gradient(0deg, #0D0D0D, transparent); }
  html[data-route="/draft"] .q-info { padding: 5px 8px 7px; flex-shrink: 0; }
  html[data-route="/draft"] .q-pname { font-family: var(--f-body); font-size: 16px; font-weight: 700; color: #E0E0E0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-route="/draft"] .q-ps { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
  html[data-route="/draft"] .q-school { font-family: var(--f-mono); font-size: 16px; color: #9AA0A6; } /* #555 was ~2.5:1 on the queue card — bumped to match the board's secondary mono labels (.pl-adp/.pl-rank). */
  html[data-route="/draft"] .q-rm { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,59,48,.14); border: 1px solid rgba(255,59,48,.28); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #FF6B5B; cursor: pointer; z-index: 2; transition: all .15s; }
  html[data-route="/draft"] .q-rm:hover { background: rgba(255,59,48,.3); }
  html[data-route="/draft"] .q-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--f-mono); font-size: 16px; color: #8A8A8A; letter-spacing: .12em; line-height: 1.6; padding: 8px; } /* #2E2E2E was invisible — this is the default empty-queue instruction, must be readable. */
  
  html[data-route="/draft"] .auto-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .14em; color: var(--text-mid); text-transform: uppercase; }
  html[data-route="/draft"] .auto-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
  html[data-route="/draft"] .auto-knob { width: 30px; height: 16px; border-radius: 8px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); position: relative; transition: background .18s, border-color .18s; flex-shrink: 0; }
  html[data-route="/draft"] .auto-knob::after { content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #888; top: 2px; left: 2px; transition: left .18s, background .18s; }
  html[data-route="/draft"] .auto-toggle input:checked + .auto-knob { background: rgba(240,189,48,.28); border-color: rgba(255,255,255,.6); }
  html[data-route="/draft"] .auto-toggle input:checked + .auto-knob::after { left: 16px; background: var(--gold); }
  html[data-route="/draft"] .auto-toggle input:focus-visible + .auto-knob { outline: 2px solid var(--gold); outline-offset: 2px; }
  
  html[data-route="/draft"] .d-roster { flex: 1; }
  html[data-route="/draft"] .roster-grid { display: flex; gap: 5px; flex: 1; padding: 7px 10px; min-height: 0; overflow-x: auto; }
  html[data-route="/draft"] .r-col { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center; min-width: 48px; }
  html[data-route="/draft"] .r-head { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .08em; padding: 2px 4px; border-radius: 3px; width: 100%; text-align: center; }
  html[data-route="/draft"] .rh-qb { background: rgba(255,107,91,.15); color: var(--pos-qb); border: 1px solid rgba(255,107,91,.25); }
  html[data-route="/draft"] .rh-rb { background: rgba(94,212,122,.15); color: var(--pos-rb); border: 1px solid rgba(94,212,122,.25); }
  html[data-route="/draft"] .rh-wr { background: rgba(90,175,255,.15); color: var(--pos-wr); border: 1px solid rgba(90,175,255,.25); }
  html[data-route="/draft"] .rh-te { background: rgba(255,179,64,.15); color: var(--pos-te); border: 1px solid rgba(255,179,64,.25); }
  html[data-route="/draft"] .rh-flex { background: rgba(191,123,224,.15); color: var(--pos-flex); border: 1px solid rgba(191,123,224,.25); }
  html[data-route="/draft"] .rh-def { background: rgba(170,170,170,.12); color: var(--pos-def); border: 1px solid rgba(170,170,170,.2); }
  html[data-route="/draft"] .rh-k { background: rgba(240,189,48,.12); color: var(--white-bright); border: 1px solid rgba(240,189,48,.22); }
  html[data-route="/draft"] .r-slot { width: 100%; background: rgba(255,255,255,.025); border: 1px dashed rgba(255,255,255,.08); border-radius: 4px; height: 28px; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 16px; color: #8A8A8A; }
  html[data-route="/draft"] .r-slot.filled { background: rgba(255,255,255,.07); border-style: solid; border-color: rgba(255,255,255,.14); color: #ECECEC; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
  html[data-route="/draft"] .roster-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 5px 10px; border-top: 1px solid var(--hair); flex-shrink: 0; }
  html[data-route="/draft"] .roster-total-lbl { font-family: var(--f-mono); font-size: 16px; color: var(--text-lo); letter-spacing: .1em; text-transform: uppercase; }
  html[data-route="/draft"] .roster-total-val { font-family: var(--f-disp); font-size: 18px; color: var(--white-bright); }
  
  html[data-route="/draft"] .pick-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center; z-index: 200; backdrop-filter: blur(5px); }
  html[data-route="/draft"] .pick-overlay.open { display: flex; }
  html[data-route="/draft"] .pick-dialog { background: #111; border: 1px solid rgba(240,189,48,.28); border-radius: 12px; padding: 28px 30px; max-width: 360px; width: 90%; text-align: center; }
  html[data-route="/draft"] .pick-dialog h3 { font-family: var(--f-disp); font-size: 24px; letter-spacing: .06em; color: var(--white-bright); margin-bottom: 6px; }
  html[data-route="/draft"] .pick-dialog .pick-player-info { font-size: 16px; color: var(--text-hi); margin-bottom: 4px; }
  html[data-route="/draft"] .pick-dialog .pick-player-meta { font-family: var(--f-mono); font-size: 16px; color: var(--text-mid); margin-bottom: 20px; }
  html[data-route="/draft"] .pick-dialog-btns { display: flex; gap: 9px; }
  html[data-route="/draft"] .pick-dialog-btn { flex: 1; padding: 12px; border-radius: 6px; border: none; font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .1em; cursor: pointer; min-height: 44px; }
  html[data-route="/draft"] .pick-btn-cancel { background: rgba(255,255,255,.07); color: var(--text-mid); }
  html[data-route="/draft"] .pick-btn-confirm { background: linear-gradient(180deg, #FF2A2A, #C40000); color: #fff; border: 1px solid #FF4D4D; }
  
  html[data-route="/draft"] .d-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center; z-index: 200; backdrop-filter: blur(5px); }
  html[data-route="/draft"] .d-overlay.open { display: flex; }
  html[data-route="/draft"] .d-dialog { background: #111; border: 1px solid rgba(255,59,48,.28); border-radius: 12px; padding: 28px 30px; max-width: 320px; width: 90%; text-align: center; }
  html[data-route="/draft"] .d-dialog h3 { font-family: var(--f-disp); font-size: 24px; letter-spacing: .06em; color: var(--red-bright); margin-bottom: 10px; }
  html[data-route="/draft"] .d-dialog p { font-size: 16px; color: var(--text-mid); line-height: 1.55; margin-bottom: 20px; }
  html[data-route="/draft"] .d-dialog-btns { display: flex; gap: 9px; }
  html[data-route="/draft"] .d-dialog-btn { flex: 1; padding: 9px; border-radius: 6px; border: none; font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .1em; cursor: pointer; min-height: 44px; }
  html[data-route="/draft"] .d-btn-stay { background: rgba(255,255,255,.07); color: var(--text-mid); }
  html[data-route="/draft"] .d-btn-leave { background: linear-gradient(180deg, #FF2A2A, #C40000); color: #fff; border: 1px solid #FF4D4D; }
  
  html[data-route="/draft"] .btn-leave { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .14em; padding: 7px 18px; background: transparent; border: 1px solid rgba(255,59,48,.35); border-radius: 5px; color: #FF6B5B; cursor: pointer; transition: all .2s; text-transform: uppercase; min-height: 44px; }
  html[data-route="/draft"] .btn-leave:hover { background: rgba(255,59,48,.1); border-color: rgba(255,59,48,.65); color: var(--red-bright); }
  
  html[data-route="/draft"] .d-toast { position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%) translateY(14px); background: rgba(240,189,48,.96); color: #050505; font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: .1em; padding: 9px 18px; border-radius: 7px; opacity: 0; transition: opacity .28s, transform .28s; pointer-events: none; z-index: 300; }
  html[data-route="/draft"] .d-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  
  html[data-route="/draft"] #draft-phase-gate { display: none; padding: 48px 24px; text-align: center; max-width: 600px; margin: 0 auto; }
  html[data-route="/draft"] #draft-phase-gate h2 { font-family: var(--f-disp); font-size: 32px; letter-spacing: .06em; color: var(--text-hi); margin: 0 0 8px; }
  html[data-route="/draft"] #draft-phase-gate p { font-size: 16px; color: #8A8A8A; margin: 0 0 20px; }
  
  @media (max-width: 880px) {
    html[data-route="/draft"] .d-history { display: none; }
    html[data-route="/draft"] .d-board { flex: none; width: 100%; }
    html[data-route="/draft"] .d-grid { flex: none; width: 100%; }
  }
  @media (max-width: 600px) {
    html[data-route="/draft"] .d-row--top { flex-direction: column; flex: 0 0 auto; height: auto; }
    html[data-route="/draft"] .d-clock, html[data-route="/draft"] .auction-clock { flex: none; width: 100%; min-height: 100px; }
    html[data-route="/draft"] .d-upnext { flex: none; width: 100%; min-height: 80px; }
    html[data-route="/draft"] .d-row--mid { flex-direction: column; min-height: auto; }
    html[data-route="/draft"] .d-board { flex: none; width: 100%; height: 300px; }
    html[data-route="/draft"] .d-grid { flex: none; width: 100%; height: 260px; }
    html[data-route="/draft"] .d-row--bot { flex-direction: column; flex: 0 0 auto; height: auto; }
    html[data-route="/draft"] .d-queue { flex: none; width: 100%; height: 160px; }
    html[data-route="/draft"] .d-roster { flex: none; width: 100%; min-height: 150px; }
    html[data-route="/draft"] .lobby-countdown { font-size: 48px; }
    html[data-route="/draft"] .lobby-title { font-size: 28px; }
  }
  @media (max-width: 390px) {
    html[data-route="/draft"] .d-main { padding: 4px; gap: 4px; }
    html[data-route="/draft"] .clock-tval { font-size: 32px; }
    html[data-route="/draft"] .clock-rp { gap: 8px; }
    html[data-route="/draft"] .auction-current-bid { font-size: 28px; }
    html[data-route="/draft"] .un-chip:nth-child(3) { display: none; }
  }
  @media (max-width: 320px) {
    html[data-route="/draft"] .d-row--top { flex-direction: column; }
    html[data-route="/draft"] .pos-row { flex-wrap: wrap; }
    html[data-route="/draft"] .clock-helmet-wrap { display: none; }
  }
  }
  /* --- /events (events) --- */
  html[data-route="/events"] .events-filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
  html[data-route="/events"] .ev-filter-btn{padding:7px 14px;border-radius:7px;font-size:16px;font-weight:700;letter-spacing:.1em;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;font-family:var(--f-body);transition:all .15s;text-transform:uppercase;}
  html[data-route="/events"] .ev-filter-btn.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/events"] .ev-filter-btn:hover{color:var(--white-bright);}
  html[data-route="/events"] .events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
  html[data-route="/events"] .ev-card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;cursor:pointer;text-decoration:none;display:block;}
  html[data-route="/events"] .ev-card:hover{border-color:var(--red-primary);}
  html[data-route="/events"] .ev-card-header{padding:8px 14px;background:var(--black-soft);border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;font-size:16px;color:var(--gray-light);}
  html[data-route="/events"] .ev-matchup{padding:14px;}
  html[data-route="/events"] .ev-teams{font-size:16px;font-weight:700;color:var(--white-bright);margin:0 0 6px;}
  html[data-route="/events"] .ev-meta{font-size:16px;color:var(--gray-light);display:flex;gap:12px;flex-wrap:wrap;}
  @media(max-width:480px){html[data-route="/events"] .events-grid{grid-template-columns:1fr;}}
  html[data-route="/events"] .nav-sub-label{display:block;padding:6px 32px 2px;font-size:16px;letter-spacing:1.5px;color:#888;font-weight:700;text-transform:uppercase;}
  /* --- /free-agents (free-agents) --- */
  html[data-route="/free-agents"] .filter-search{flex:1 1 200px;min-width:0;background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:8px;padding:10px 14px;font-size:16px;color:var(--white-bright);outline:none;font-family:var(--f-body);min-height:40px;}
  html[data-route="/free-agents"] .filter-search::placeholder{color:var(--gray-light);}
  html[data-route="/free-agents"] .filter-search:focus{border-color:var(--red-primary);}
  html[data-route="/free-agents"] .pos-filters{display:flex;gap:4px;flex-wrap:wrap;}
  html[data-route="/free-agents"] .pos-btn{padding:6px 12px;border-radius:6px;font-size:16px;font-weight:700;letter-spacing:.08em;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;transition:all .12s;min-height:36px;font-family:var(--f-body);}
  html[data-route="/free-agents"] .pos-btn.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/free-agents"] .pos-btn:hover{color:var(--white-bright);}
  html[data-route="/free-agents"] .sort-select{padding:8px 12px;border-radius:8px;font-size:16px;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--white-bright);outline:none;cursor:pointer;font-family:var(--f-body);min-height:36px;}
  html[data-route="/free-agents"] .sort-select:focus{border-color:var(--red-primary);}
  html[data-route="/free-agents"] .fa-count{font-size:16px;color:var(--gray-light);white-space:nowrap;margin-left:auto;}
  html[data-route="/free-agents"] .fa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
  html[data-route="/free-agents"] .btn-waiver{background:rgba(240,189,48,.1);border-color:rgba(255,255,255,.25);color:#FFFFFF;}
  html[data-route="/free-agents"] .btn-waiver:hover{background:rgba(240,189,48,.2);}
  html[data-route="/free-agents"] .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;display:none;align-items:center;justify-content:center;padding:24px;}
  html[data-route="/free-agents"] .modal-backdrop.open{display:flex;}
  html[data-route="/free-agents"] .modal{background:var(--black-card);border:1px solid var(--gray-border);border-radius:14px;width:100%;max-width:520px;max-height:90vh;overflow:auto;}
  html[data-route="/free-agents"] .modal-head{padding:18px 22px;border-bottom:1px solid var(--gray-border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
  html[data-route="/free-agents"] .modal-head h2{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;margin:0;}
  html[data-route="/free-agents"] .modal-close{background:transparent;border:1px solid var(--gray-border);color:var(--gray-light);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;}
  html[data-route="/free-agents"] .modal-close:hover{border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/free-agents"] .modal-body{padding:22px;display:flex;flex-direction:column;gap:16px;}
  html[data-route="/free-agents"] .player-summary{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;padding:14px 16px;}
  html[data-route="/free-agents"] .form-row{display:flex;flex-direction:column;gap:6px;}
  html[data-route="/free-agents"] .form-row label{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:var(--gray-light);}
  html[data-route="/free-agents"] .form-row input,html[data-route="/free-agents"] .form-row select{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:10px 12px;font-size:16px;color:var(--white-bright);outline:none;font-family:var(--f-body);min-height:44px;}
  html[data-route="/free-agents"] .form-row input:focus,html[data-route="/free-agents"] .form-row select:focus{border-color:var(--red-primary);}
  html[data-route="/free-agents"] .form-hint{font-size:16px;color:var(--gray-light);}
  html[data-route="/free-agents"] .modal-foot{padding:14px 22px;border-top:1px solid var(--gray-border);display:flex;justify-content:flex-end;gap:10px;}
  html[data-route="/free-agents"] .save-msg{font-size:16px;color:#3dba6e;align-self:center;margin-right:auto;}
  html[data-route="/free-agents"] .save-msg.err{color:var(--red-primary);}
  @keyframes fa-fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  html[data-route="/free-agents"] .stagger-in{opacity:0;animation:fa-fadeInUp .25s ease both;}
  @media(prefers-reduced-motion:reduce){html[data-route="/free-agents"] .stagger-in{animation:none;opacity:1;}}
  @media(max-width:767px){html[data-route="/free-agents"] .fa-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:480px){html[data-route="/free-agents"] .fa-grid{grid-template-columns:1fr;}html[data-route="/free-agents"] .fa-count{display:none;}}
  @media(max-width:359px){html[data-route="/free-agents"] .hide-320{display:none !important;}}
  /* --- /h2h (h2h) --- */
  html[data-route="/h2h"] .game-pred-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;}
  html[data-route="/h2h"] .teams-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  html[data-route="/h2h"] .team-col{text-align:center;flex:1;}
  html[data-route="/h2h"] .team-name{font-size:16px;font-weight:800;}
  html[data-route="/h2h"] .team-conf{font-size:16px;color:var(--text-muted);}
  html[data-route="/h2h"] .pred-score{font-size:24px;font-weight:900;color:var(--white-bright);}
  html[data-route="/h2h"] .vs-sep{font-size:18px;font-weight:900;color:var(--red-primary);padding:0 8px;}
  html[data-route="/h2h"] .win-prob-bar{height:8px;border-radius:4px;overflow:hidden;display:flex;margin-top:8px;}
  html[data-route="/h2h"] .win-a{background:var(--red-primary);transition:width .6s;}
  html[data-route="/h2h"] .win-b{background:#3dba6e;transition:width .6s;}
  html[data-route="/h2h"] .prob-labels{display:flex;justify-content:space-between;font-size:16px;color:var(--text-muted);margin-top:4px;}
  html[data-route="/h2h"] .conf-badge{font-size:16px;padding:2px 6px;border-radius:3px;font-weight:700;}
  /* --- /help (help) --- */
  html[data-route="/help"] .page-header{background:linear-gradient(135deg,#0d0d0d 0%,#1a0000 50%,#0d0d0d 100%);border-bottom:2px solid var(--red-primary);padding:32px 24px 24px;position:relative;overflow:hidden;flex-shrink:0;}
  html[data-route="/help"] .page-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 20px,rgba(255,26,26,0.03) 20px,rgba(255,26,26,0.03) 21px);pointer-events:none;}
  html[data-route="/help"] .page-header-inner{position:relative;z-index:1;}
  html[data-route="/help"] .page-eyebrow{font-family:var(--f-display);font-size:16px;letter-spacing:.2em;color:var(--red-primary);text-transform:uppercase;display:block;margin-bottom:4px;}
  html[data-route="/help"] .page-title{font-family:var(--f-display);font-size:clamp(28px,4vw,48px);letter-spacing:.04em;color:var(--white-bright);margin:0 0 4px;line-height:1;}
  html[data-route="/help"] .page-subtitle{font-size:16px;color:var(--gray-light);margin:0;}
  html[data-route="/help"] .card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;}
  html[data-route="/help"] .card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-border);}
  html[data-route="/help"] .card-eyebrow{font-size:16px;font-family:var(--f-display);letter-spacing:.18em;color:var(--red-primary);text-transform:uppercase;}
  html[data-route="/help"] .card-title{font-family:var(--f-display);font-size:18px;letter-spacing:.06em;color:var(--white-bright);margin:0;}
  html[data-route="/help"] .card-body{padding:20px;}
  html[data-route="/help"] .empty-state{text-align:center;padding:48px 20px;color:var(--gray-light);}
  html[data-route="/help"] .empty-icon{font-size:36px;margin-bottom:12px;}
  html[data-route="/help"] .empty-msg{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;color:var(--gray-light);margin:0 0 8px;}
  html[data-route="/help"] .empty-sub{font-size:16px;color:var(--gray-light);margin:0;}
  html[data-route="/help"] .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
  html[data-route="/help"] .badge-gold{background:rgba(240,189,48,.12);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);}
  html[data-route="/help"] .badge-green{background:rgba(61,186,110,.12);color:#3dba6e;border:1px solid rgba(61,186,110,.25);}
  html[data-route="/help"] .badge-red{background:rgba(255,26,26,.12);color:var(--red-primary);border:1px solid rgba(255,26,26,.25);}
  html[data-route="/help"] .badge-gray{background:rgba(138,138,138,.12);color:var(--gray-light);border:1px solid rgba(138,138,138,.25);}
  @keyframes helpFadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  html[data-route="/help"] .stagger-in{opacity:0;animation:helpFadeInUp .3s ease both;}
  html[data-route="/help"] .lift{transition:transform .18s,box-shadow .18s,border-color .15s !important;}
  html[data-route="/help"] .lift:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,26,26,.12);}
  html[data-route="/help"] .lift:active{transform:translateY(0) scale(.98);}
  html[data-route="/help"] .press-btn{transition:transform .1s,background .15s,border-color .15s,color .15s,box-shadow .15s;}
  html[data-route="/help"] .press-btn:active{transform:scale(.96);}
  @media(max-width:359px){html[data-route="/help"] .page-header{padding:12px 8px;}html[data-route="/help"] .page-title{font-size:22px !important;}html[data-route="/help"] .card-body{padding:12px 10px;}}
  html[data-route="/help"] .help-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;}
  html[data-route="/help"] .faq-item{border-bottom:1px solid var(--hairline);}
  html[data-route="/help"] .faq-item:last-child{border-bottom:none;}
  html[data-route="/help"] .faq-q{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;color:var(--white-bright);gap:12px;}
  html[data-route="/help"] .faq-q::-webkit-details-marker{display:none;}
  html[data-route="/help"] .faq-chev{font-size:16px;color:var(--gray-light);transition:transform .2s;flex:0 0 auto;}
  html[data-route="/help"] details[open] .faq-chev{transform:rotate(180deg);}
  html[data-route="/help"] .faq-a{padding:0 20px 16px;font-size:16px;color:var(--gray-light);line-height:1.7;}
  html[data-route="/help"] .quick-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  html[data-route="/help"] .quick-link-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:6px;cursor:pointer;text-decoration:none;}
  html[data-route="/help"] .quick-link-card:hover{border-color:var(--red-primary);}
  html[data-route="/help"] .ql-icon{font-size:20px;}
  html[data-route="/help"] .ql-label{font-family:var(--f-display);font-size:16px;letter-spacing:.08em;color:var(--white-bright);}
  html[data-route="/help"] .ql-sub{font-size:16px;color:var(--gray-light);}
  html[data-route="/help"] .contact-card{background:linear-gradient(135deg,#0d0000,#1a0000);border:1px solid rgba(255,26,26,.2);border-radius:12px;padding:24px;text-align:center;}
  html[data-route="/help"] .contact-icon{font-size:32px;margin-bottom:12px;}
  html[data-route="/help"] .contact-title{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;color:var(--white-bright);margin:0 0 8px;}
  html[data-route="/help"] .contact-sub{font-size:16px;color:var(--gray-light);margin:0 0 16px;}
  html[data-route="/help"] .contact-btn{display:inline-block;padding:10px 24px;background:var(--red-primary);color:#fff;border-radius:8px;font-weight:700;font-size:16px;letter-spacing:.06em;}
  html[data-route="/help"] .contact-btn:hover{background:#cc1515;}
  html[data-route="/help"] .version-tag{font-size:16px;color:var(--gray-light);text-align:center;margin-top:8px;}
  @media(max-width:767px){html[data-route="/help"] .help-grid{grid-template-columns:1fr;}}
  @media(max-width:359px){html[data-route="/help"] .quick-links{grid-template-columns:1fr;}}
  html[data-route="/help"] .nav-sub-label{display:block;padding:6px 32px 2px;font-size:16px;letter-spacing:1.5px;color:#888;font-weight:700;text-transform:uppercase;}
  /* --- /learn (learn) --- */
  html[data-route="/learn"] .learn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
  html[data-route="/learn"] .learn-card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;text-decoration:none;}
  html[data-route="/learn"] .learn-card:hover{border-color:var(--red-primary);}
  html[data-route="/learn"] .learn-thumb{height:80px;display:flex;align-items:center;justify-content:center;font-size:36px;background:linear-gradient(135deg,var(--black-soft),var(--bg-surface-2));}
  html[data-route="/learn"] .learn-body{padding:14px 16px;flex:1;display:flex;flex-direction:column;gap:6px;}
  html[data-route="/learn"] .learn-cat{font-size:16px;font-family:var(--f-display);letter-spacing:.14em;color:var(--red-primary);}
  html[data-route="/learn"] .learn-title{font-size:16px;font-weight:700;color:var(--white-bright);line-height:1.35;}
  html[data-route="/learn"] .learn-sub{font-size:16px;color:var(--gray-light);flex:1;}
  html[data-route="/learn"] .learn-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
  html[data-route="/learn"] .learn-time{font-size:16px;color:var(--gray-light);}
  html[data-route="/learn"] .cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
  html[data-route="/learn"] .cat-tab{padding:7px 14px;border-radius:7px;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;font-family:var(--f-body);transition:all .15s;}
  html[data-route="/learn"] .cat-tab.active,html[data-route="/learn"] .cat-tab:hover{color:var(--white-bright);}
  html[data-route="/learn"] .cat-tab.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);}
  html[data-route="/learn"] .nav-sub-label{display:block;padding:6px 32px 2px;font-size:16px;letter-spacing:1.5px;color:#888;font-weight:700;text-transform:uppercase;}
  @media(max-width:480px){html[data-route="/learn"] .learn-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:359px){html[data-route="/learn"] .learn-grid{grid-template-columns:1fr;}}
  /* --- /lineup (lineup) --- */
  html[data-route="/lineup"] .header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
  html[data-route="/lineup"] .week-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--black-soft);border:1px solid var(--gray-border);border-radius:var(--sns-radius-md);color:var(--white-bright);font-size:16px;cursor:pointer;transition:border-color var(--sns-dur-base);flex-shrink:0;min-width:var(--sns-touch-target);min-height:var(--sns-touch-target);}
  html[data-route="/lineup"] .week-btn:hover{border-color:var(--red-primary);}
  html[data-route="/lineup"] .week-btn:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  html[data-route="/lineup"] .week-btn:disabled{opacity:.35;cursor:not-allowed;}
  html[data-route="/lineup"] .week-label{font-family:var(--f-display);font-size:var(--sns-fs-17);letter-spacing:var(--sns-ls-display);color:var(--white-bright);min-width:80px;text-align:center;}
  html[data-route="/lineup"] .btn-optimal{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--sns-radius-lg);font-size:var(--sns-fs-12);font-weight:700;letter-spacing:.06em;background:rgba(240,189,48,.08);border:1px solid rgba(240,189,48,.25);color:#FFFFFF;transition:all var(--sns-dur-base);min-height:var(--sns-touch-target);}
  html[data-route="/lineup"] .btn-optimal:hover{background:rgba(240,189,48,.15);border-color:#FFFFFF;}
  html[data-route="/lineup"] .btn-optimal:focus-visible{outline:2px solid var(--gold-accent);outline-offset:2px;}
  html[data-route="/lineup"] .btn-optimal svg{flex-shrink:0;}
  html[data-route="/lineup"] .league-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 4px;}
  html[data-route="/lineup"] .alert-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--sns-radius-lg);font-size:var(--sns-fs-12);line-height:1.5;}
  html[data-route="/lineup"] .alert-bar--warn{background:rgba(240,189,48,.07);border:1px solid rgba(240,189,48,.2);color:#FFFFFF;}
  html[data-route="/lineup"] .alert-bar--error{background:rgba(255,26,26,.07);border:1px solid rgba(255,26,26,.2);color:var(--red-bright);}
  html[data-route="/lineup"] .alert-bar--info{background:rgba(90,140,255,.07);border:1px solid rgba(90,140,255,.2);color:#5a8cff;}
  html[data-route="/lineup"] .alert-icon{font-size:18px;flex:0 0 auto;line-height:1;}
  html[data-route="/lineup"] .lineup-grid{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start;}
  html[data-route="/lineup"] .section-label{font-family:var(--f-display);font-size:var(--sns-fs-10);letter-spacing:var(--sns-ls-button);color:var(--gray-light);text-transform:uppercase;padding:4px 2px;margin-top:4px;}
  html[data-route="/lineup"] .slot-list{display:flex;flex-direction:column;gap:6px;}
  html[data-route="/lineup"] .lineup-slot{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--black-soft);border:1px solid var(--gray-border);border-radius:var(--sns-radius-xl);transition:border-color var(--sns-dur-fast),background var(--sns-dur-fast);cursor:grab;position:relative;min-height:var(--sns-touch-target);}
  html[data-route="/lineup"] .lineup-slot:hover{border-color:rgba(255,26,26,.3);}
  html[data-route="/lineup"] .lineup-slot:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  html[data-route="/lineup"] .lineup-slot[aria-grabbed="true"]{border-color:var(--red-primary);background:rgba(255,26,26,.06);}
  html[data-route="/lineup"] .lineup-slot.slot--empty{border-style:dashed;opacity:.7;cursor:default;}
  html[data-route="/lineup"] .lineup-slot.slot--locked{cursor:not-allowed;opacity:.7;}
  html[data-route="/lineup"] .lineup-slot.slot--locked::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.25);pointer-events:none;}
  html[data-route="/lineup"] .lineup-slot.slot--selected{border-color:var(--red-primary);background:rgba(255,26,26,.07);}
  html[data-route="/lineup"] .lineup-slot.slot--bye{border-color:rgba(255,255,255,.3);background:rgba(240,189,48,.04);}
  html[data-route="/lineup"] .lineup-slot.slot--drag-over{border-color:#FFFFFF;background:rgba(240,189,48,.08);box-shadow:0 0 12px rgba(240,189,48,.15);}
  html[data-route="/lineup"] .bench-slot{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--black-card);border:1px solid var(--hairline);border-radius:var(--sns-radius-xl);transition:border-color var(--sns-dur-fast),background var(--sns-dur-fast);cursor:grab;position:relative;min-height:var(--sns-touch-target);}
  html[data-route="/lineup"] .bench-slot:hover{border-color:rgba(255,26,26,.2);}
  html[data-route="/lineup"] .bench-slot:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  html[data-route="/lineup"] .bench-slot.slot--selected{border-color:var(--red-primary);background:rgba(255,26,26,.07);}
  html[data-route="/lineup"] .bench-slot.slot--locked{cursor:not-allowed;opacity:.7;}
  html[data-route="/lineup"] .bench-slot.slot--bye{border-color:rgba(255,255,255,.3);background:rgba(240,189,48,.04);}
  html[data-route="/lineup"] .bench-slot.slot--drag-over{border-color:#FFFFFF;background:rgba(240,189,48,.08);}
  html[data-route="/lineup"] .pos-badge{font-family:var(--f-display);font-size:var(--sns-fs-11);letter-spacing:.1em;padding:4px 8px;border-radius:5px;flex:0 0 auto;min-width:46px;text-align:center;font-weight:700;}
  html[data-route="/lineup"] .pos-badge.QB{background:rgba(255,90,90,.1);color:#ff5a5a;border:1px solid rgba(255,90,90,.25);}
  html[data-route="/lineup"] .pos-badge.RB{background:rgba(61,186,110,.1);color:#3dba6e;border:1px solid rgba(61,186,110,.25);}
  html[data-route="/lineup"] .pos-badge.WR{background:rgba(90,140,255,.1);color:#5a8cff;border:1px solid rgba(90,140,255,.25);}
  html[data-route="/lineup"] .pos-badge.TE{background:rgba(240,189,48,.1);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);}
  html[data-route="/lineup"] .pos-badge.FLEX{background:rgba(180,90,255,.1);color:#b45aff;border:1px solid rgba(180,90,255,.25);}
  html[data-route="/lineup"] .pos-badge.K{background:rgba(255,150,30,.1);color:#ff961e;border:1px solid rgba(255,150,30,.25);}
  html[data-route="/lineup"] .pos-badge.DEF{background:rgba(138,138,138,.1);color:var(--gray-light);border:1px solid rgba(138,138,138,.25);}
  html[data-route="/lineup"] .pos-badge.BN{background:var(--bg-surface-3);color:var(--gray-light);border:1px solid var(--gray-border);}
  html[data-route="/lineup"] .player-info{flex:1;min-width:0;}
  html[data-route="/lineup"] .player-name{font-size:var(--sns-fs-13);font-weight:700;color:var(--white-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;}
  html[data-route="/lineup"] .player-meta{font-size:var(--sns-fs-10);color:var(--gray-light);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  html[data-route="/lineup"] .injury-tag{font-size:16px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:.05em;text-transform:uppercase;display:inline-block;}
  html[data-route="/lineup"] .injury-tag--Q{background:rgba(240,189,48,.15);color:#FFFFFF;border:1px solid rgba(240,189,48,.3);}
  html[data-route="/lineup"] .injury-tag--D{background:rgba(255,150,30,.15);color:#ff961e;border:1px solid rgba(255,150,30,.3);}
  html[data-route="/lineup"] .injury-tag--O{background:rgba(255,26,26,.15);color:var(--red-bright);border:1px solid rgba(255,26,26,.3);}
  html[data-route="/lineup"] .injury-tag--IR{background:rgba(138,138,138,.15);color:var(--gray-light);border:1px solid rgba(138,138,138,.3);}
  html[data-route="/lineup"] .game-time{font-size:16px;color:var(--gray-light);font-family:var(--f-mono);letter-spacing:.04em;}
  html[data-route="/lineup"] .bye-tag{font-size:16px;font-weight:700;padding:1px 5px;border-radius:3px;background:rgba(240,189,48,.12);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);letter-spacing:.05em;}
  html[data-route="/lineup"] .lock-icon{flex:0 0 auto;color:var(--gray-light);opacity:.6;}
  html[data-route="/lineup"] .lock-icon svg{width:14px;height:14px;}
  html[data-route="/lineup"] .proj-pts{font-family:var(--f-mono);font-size:var(--sns-fs-13);font-weight:700;color:#FFFFFF;flex:0 0 auto;min-width:42px;text-align:right;}
  html[data-route="/lineup"] .swap-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--sns-radius-md);font-size:16px;background:var(--bg-surface-3);color:var(--gray-light);border:1px solid var(--gray-border);cursor:pointer;transition:all var(--sns-dur-snap);flex:0 0 auto;min-width:var(--sns-touch-target);min-height:var(--sns-touch-target);}
  html[data-route="/lineup"] .swap-btn:hover{color:var(--white-bright);border-color:var(--red-primary);}
  html[data-route="/lineup"] .swap-btn:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  html[data-route="/lineup"] .swap-btn.active{background:rgba(255,26,26,.18);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/lineup"] .sidebar-widgets{display:flex;flex-direction:column;gap:14px;}
  html[data-route="/lineup"] .widget-proj{background:linear-gradient(135deg,#0d0000,#180400);border:1px solid rgba(255,26,26,.2);border-radius:var(--sns-radius-2xl);padding:20px;text-align:center;}
  html[data-route="/lineup"] .widget-proj__label{font-size:var(--sns-fs-10);font-family:var(--f-display);letter-spacing:var(--sns-ls-button);color:var(--gray-light);display:block;margin-bottom:4px;text-transform:uppercase;}
  html[data-route="/lineup"] .widget-proj__num{font-family:var(--f-display);font-size:52px;letter-spacing:.02em;color:var(--white-bright);display:block;line-height:1;}
  html[data-route="/lineup"] .widget-proj__rank{font-size:var(--sns-fs-11);color:#FFFFFF;margin-top:6px;}
  html[data-route="/lineup"] .widget-proj__bar{height:4px;background:var(--gray-border);border-radius:2px;margin-top:12px;overflow:hidden;}
  html[data-route="/lineup"] .widget-proj__fill{height:100%;background:var(--red-primary);border-radius:2px;transition:width var(--sns-dur-track);}
  html[data-route="/lineup"] .widget-matchup{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:var(--sns-radius-xl);padding:14px 16px;}
  html[data-route="/lineup"] .widget-matchup__eyebrow{font-size:16px;font-family:var(--f-display);letter-spacing:var(--sns-ls-eyebrow);color:var(--red-primary);margin-bottom:8px;text-transform:uppercase;}
  html[data-route="/lineup"] .widget-matchup__vs{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  html[data-route="/lineup"] .widget-matchup__team{text-align:center;flex:1;}
  html[data-route="/lineup"] .widget-matchup__name{font-size:var(--sns-fs-13);font-weight:700;color:var(--white-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html[data-route="/lineup"] .widget-matchup__owner{font-size:var(--sns-fs-10);color:var(--gray-light);margin-top:2px;}
  html[data-route="/lineup"] .widget-matchup__score{font-family:var(--f-mono);font-size:var(--sns-fs-20);font-weight:700;margin-top:4px;}
  html[data-route="/lineup"] .widget-matchup__score--you{color:#FFFFFF;}
  html[data-route="/lineup"] .widget-matchup__score--opp{color:var(--gray-light);}
  html[data-route="/lineup"] .widget-matchup__divider{font-family:var(--f-display);font-size:var(--sns-fs-12);letter-spacing:var(--sns-ls-wide);color:var(--gray-light);flex:0 0 auto;}
  html[data-route="/lineup"] .widget-tips{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:var(--sns-radius-xl);padding:14px 16px;}
  html[data-route="/lineup"] .widget-tips__eyebrow{font-size:16px;font-family:var(--f-display);letter-spacing:var(--sns-ls-eyebrow);color:#FFFFFF;margin-bottom:8px;text-transform:uppercase;}
  html[data-route="/lineup"] .tip-row{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:var(--sns-fs-12);line-height:1.5;color:var(--gray-light);}
  html[data-route="/lineup"] .tip-row:last-child{border-bottom:none;}
  html[data-route="/lineup"] .tip-row__icon{flex:0 0 16px;font-size:16px;line-height:1.5;}
  html[data-route="/lineup"] .save-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);}
  html[data-route="/lineup"] .save-btn{padding:10px 22px;border-radius:var(--sns-radius-lg);font-size:var(--sns-fs-13);font-weight:700;letter-spacing:.06em;background:var(--sns-grad-btn-primary);color:#fff;border:none;cursor:pointer;transition:opacity var(--sns-dur-fast),box-shadow var(--sns-dur-fast);min-height:var(--sns-touch-target);box-shadow:var(--sns-shadow-btn-primary);}
  html[data-route="/lineup"] .save-btn:hover{box-shadow:var(--sns-shadow-btn-primary-h);}
  html[data-route="/lineup"] .save-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
  html[data-route="/lineup"] .save-btn:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  html[data-route="/lineup"] .save-msg{font-size:var(--sns-fs-12);font-family:var(--f-mono);letter-spacing:.04em;}
  html[data-route="/lineup"] .save-msg--ok{color:#4CD964;}
  html[data-route="/lineup"] .save-msg--error{color:#FFFFFF;}
  html[data-route="/lineup"] .stagger-in{opacity:0;animation:fadeInUp-lineup .25s ease both;}
  @keyframes fadeInUp-lineup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  html[data-route="/lineup"] .drag-ghost{position:fixed;pointer-events:none;z-index:var(--sns-z-modal);opacity:.85;transform:rotate(2deg) scale(1.03);box-shadow:var(--sns-shadow-card-hover);}
  @media(max-width:960px){
    html[data-route="/lineup"] .lineup-grid{grid-template-columns:1fr;}
    html[data-route="/lineup"] .sidebar-widgets{order:-1;}
  }
  @media(max-width:767px){
    html[data-route="/lineup"] .header-actions{width:100%;justify-content:space-between;}
  }
  @media(max-width:359px){
    html[data-route="/lineup"] .lineup-slot,html[data-route="/lineup"] .bench-slot{padding:8px 10px;gap:8px;}
    html[data-route="/lineup"] .pos-badge{min-width:38px;font-size:16px;padding:3px 6px;}
    html[data-route="/lineup"] .player-name{font-size:16px;}
  }
  /* --- /marketplace (marketplace) --- */
  html[data-route="/marketplace"] .mkt-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
  html[data-route="/marketplace"] .mkt-tab{padding:8px 16px;border-radius:8px;font-size:16px;font-weight:700;letter-spacing:.1em;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;font-family:var(--f-body);transition:all .15s;text-transform:uppercase;}
  html[data-route="/marketplace"] .mkt-tab.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/marketplace"] .mkt-tab:hover{color:var(--white-bright);}
  html[data-route="/marketplace"] .mkt-panel{display:none;}
  html[data-route="/marketplace"] .mkt-panel.active{display:block;}
  html[data-route="/marketplace"] .mkt-listing-card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:16px;}
  html[data-route="/marketplace"] .mkt-player-info{flex:1;min-width:0;}
  html[data-route="/marketplace"] .mkt-player-name{font-size:16px;font-weight:700;color:var(--white-bright);}
  html[data-route="/marketplace"] .mkt-player-meta{font-size:16px;color:var(--gray-light);margin-top:2px;}
  html[data-route="/marketplace"] .mkt-price{font-family:var(--f-mono);font-size:16px;color:#FFFFFF;font-weight:700;flex:0 0 auto;}
  html[data-route="/marketplace"] .mkt-action-btn{padding:8px 16px;border-radius:8px;font-size:16px;font-weight:700;letter-spacing:.06em;cursor:pointer;font-family:var(--f-body);border:1px solid var(--red-primary);background:rgba(255,26,26,.1);color:var(--red-primary);}
  html[data-route="/marketplace"] .mkt-action-btn:hover{background:rgba(255,26,26,.2);}
  @media(max-width:359px){html[data-route="/marketplace"] .mkt-listing-card{flex-wrap:wrap;}}
  html[data-route="/marketplace"] .nav-sub-label{display:block;padding:6px 32px 2px;font-size:16px;letter-spacing:1.5px;color:#888;font-weight:700;text-transform:uppercase;}
  /* --- /matchups (matchups) --- */
  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(--gold-accent);}
  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(--gold-accent);box-shadow:0 0 16px rgba(240,189,48,.08);}
  html[data-route="/matchups"] .matchup-card.is-mine:hover{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 20px rgba(240,189,48,.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(240,189,48,.1);border:1px solid rgba(240,189,48,.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(--gold-accent);}
  html[data-route="/matchups"] .bracket-matchup.champ-slot{border-color:#FFFFFF;background:rgba(240,189,48,.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(--gold-accent);border-radius:12px;background:rgba(240,189,48,.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;}
  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:90vh;overflow:hidden;display:flex;flex-direction:column;}
  html[data-route="/matchups"] .mu-modal[open]{animation:muModalIn .22s cubic-bezier(.16,1,.3,1) both;}
  html[data-route="/matchups"] .mu-modal::backdrop{background:rgba(0,0,0,.75);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-battle-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(255,26,26,.06);border:1px solid rgba(255,26,26,.2);border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s;text-decoration:none;color:inherit;}
  html[data-route="/matchups"] .mu-battle-card:hover{background:rgba(255,26,26,.11);border-color:rgba(255,26,26,.4);}
  html[data-route="/matchups"] .mu-battle-icon{font-size:26px;flex:0 0 auto;}
  html[data-route="/matchups"] .mu-battle-text strong{display:block;font-size:16px;font-weight:700;color:var(--white-bright);}
  html[data-route="/matchups"] .mu-battle-text span{font-size:16px;color:var(--gray-light);}
  html[data-route="/matchups"] .mu-battle-arrow{margin-left:auto;font-size:18px;color:var(--red-primary);flex:0 0 auto;}
  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(240,189,48,.1);color:#FFFFFF;border:1px solid rgba(240,189,48,.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);}
  @keyframes muFadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes muHelmetFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  @keyframes muLivePulse{0%,100%{opacity:1}50%{opacity:.3}}
  @keyframes muModalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes muBackdropIn{from{opacity:0}to{opacity:1}}
  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;}}
  @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;}}
  /* --- /nilshop (nilshop) --- */
  html[data-route="/nilshop"] .nil-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
  html[data-route="/nilshop"] .nil-card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;cursor:pointer;text-decoration:none;display:flex;flex-direction:column;}
  html[data-route="/nilshop"] .nil-card:hover{border-color:#FFFFFF;}
  html[data-route="/nilshop"] .nil-img{height:120px;background:linear-gradient(135deg,#0d0d0d,#1a1a1a);display:flex;align-items:center;justify-content:center;font-size:48px;position:relative;}
  html[data-route="/nilshop"] .nil-badge-wrap{position:absolute;top:8px;right:8px;}
  html[data-route="/nilshop"] .nil-body{padding:12px 14px;flex:1;display:flex;flex-direction:column;gap:6px;}
  html[data-route="/nilshop"] .nil-name{font-size:16px;font-weight:700;color:var(--white-bright);}
  html[data-route="/nilshop"] .nil-price-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;}
  html[data-route="/nilshop"] .nil-price{font-family:var(--f-mono);font-size:16px;color:#FFFFFF;}
  html[data-route="/nilshop"] .nil-buy-btn{padding:5px 12px;border-radius:6px;font-size:16px;font-weight:700;background:var(--gold-accent);color:#1a1207;border:none;cursor:pointer;letter-spacing:.06em;font-family:var(--f-body);}
  html[data-route="/nilshop"] .nil-buy-btn:hover{background:#d4a82a;}
  html[data-route="/nilshop"] .nil-filter-row{display:flex;gap:8px;flex-wrap:wrap;}
  html[data-route="/nilshop"] .nil-filter-btn{padding:7px 14px;border-radius:7px;font-size:16px;font-weight:700;letter-spacing:.1em;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;font-family:var(--f-body);transition:all .15s;text-transform:uppercase;}
  html[data-route="/nilshop"] .nil-filter-btn.active{background:rgba(240,189,48,.12);border-color:#FFFFFF;color:#FFFFFF;}
  html[data-route="/nilshop"] .nil-filter-btn:hover{color:var(--white-bright);}
  html[data-route="/nilshop"] .nav-sub-label{display:block;padding:6px 32px 2px;font-size:16px;letter-spacing:1.5px;color:#888;font-weight:700;text-transform:uppercase;}
  @media(max-width:480px){html[data-route="/nilshop"] .nil-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:359px){html[data-route="/nilshop"] .nil-grid{grid-template-columns:1fr;}}
  /* --- /notifications (notifications) --- */
  html[data-route="/notifications"] .press-btn{transition:transform .1s,background .15s;}
  html[data-route="/notifications"] .press-btn:active{transform:scale(.96);}
  html[data-route="/notifications"] .btn-ghost{background:rgba(255,26,26,.1);color:var(--red-primary);}
  html[data-route="/notifications"] .btn:disabled{opacity:.5;cursor:not-allowed;}
  html[data-route="/notifications"] .status-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
  html[data-route="/notifications"] .status-label{font-size:16px;color:var(--gray-light);}
  html[data-route="/notifications"] .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--hairline);gap:16px;}
  html[data-route="/notifications"] .row:last-child{border-bottom:none;}
  html[data-route="/notifications"] .row-label{font-size:16px;font-weight:600;color:var(--white-bright);}
  html[data-route="/notifications"] .row-sub{font-size:16px;color:var(--gray-light);margin-top:2px;}
  html[data-route="/notifications"] .toggle{position:relative;width:44px;height:24px;flex:0 0 44px;cursor:pointer;}
  html[data-route="/notifications"] .toggle input{opacity:0;width:0;height:0;position:absolute;}
  html[data-route="/notifications"] .toggle .tk{position:absolute;inset:0;background:var(--gray-border);border-radius:12px;transition:background .2s;}
  html[data-route="/notifications"] .toggle .th{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s;}
  html[data-route="/notifications"] .toggle input:checked~.tk{background:var(--red-primary);}
  html[data-route="/notifications"] .toggle input:checked~.th{transform:translateX(20px);}
  html[data-route="/notifications"] .toggle input:disabled~.tk{opacity:.5;}
  html[data-route="/notifications"] .hint{font-size:16px;color:var(--gray-light);margin:14px 0 0;line-height:1.6;}
  html[data-route="/notifications"] .toast{margin-top:14px;font-size:16px;color:#3dba6e;min-height:18px;}
  html[data-route="/notifications"] .toast.err{color:var(--red-primary);}
  @media(max-width:359px){html[data-route="/notifications"] .content{padding:52px 8px 24px;}html[data-route="/notifications"] .page-header{padding:12px 8px;}html[data-route="/notifications"] .page-title{font-size:22px;}html[data-route="/notifications"] .card-body{padding:14px 12px;}}
  /* --- /optimizer (optimizer) --- */
  html[data-route="/optimizer"] .scatter-wrap{position:relative;width:100%;}
  html[data-route="/optimizer"] .scatter-wrap svg{width:100%;height:320px;overflow:visible;}
  html[data-route="/optimizer"] .rec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;display:flex;align-items:center;gap:12px;}
  html[data-route="/optimizer"] .rec-badge{font-size:16px;font-weight:800;padding:4px 8px;border-radius:4px;letter-spacing:.5px;min-width:56px;text-align:center;}
  html[data-route="/optimizer"] .rec-start{background:rgba(61,186,110,.15);color:#3dba6e;border:1px solid rgba(61,186,110,.3);}
  html[data-route="/optimizer"] .rec-flex{background:rgba(201,168,76,.15);color:var(--white-bright);border:1px solid rgba(201,168,76,.3);}
  html[data-route="/optimizer"] .rec-sit{background:rgba(200,16,46,.15);color:#e05070;border:1px solid rgba(200,16,46,.3);}
  html[data-route="/optimizer"] .rec-monitor{background:rgba(200,200,100,.1);color:var(--white-bright);border:1px solid rgba(200,200,100,.2);}
  html[data-route="/optimizer"] .rec-score-bar{width:80px;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;}
  html[data-route="/optimizer"] .rec-score-fill{height:100%;background:var(--red-primary);border-radius:3px;}
  html[data-route="/optimizer"] .pos-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
  /* --- /recap (recap) --- */
  @layer components{
  html[data-route="/recap"] .page-header{background:linear-gradient(135deg,#0d0d0d 0%,#1a0000 50%,#0d0d0d 100%);border-bottom:2px solid var(--red-primary);padding:32px 24px 24px;position:relative;overflow:hidden;flex-shrink:0;}
  html[data-route="/recap"] .page-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 20px,rgba(255,26,26,0.03) 20px,rgba(255,26,26,0.03) 21px);pointer-events:none;}
  html[data-route="/recap"] .page-header-inner{position:relative;z-index:1;}
  html[data-route="/recap"] .page-eyebrow{font-family:var(--f-display);font-size:16px;letter-spacing:.2em;color:var(--red-primary);text-transform:uppercase;display:block;margin-bottom:4px;}
  html[data-route="/recap"] .page-title{font-family:var(--f-display);font-size:clamp(28px,4vw,48px);letter-spacing:.04em;color:var(--white-bright);margin:0 0 4px;line-height:1;}
  html[data-route="/recap"] .page-subtitle{font-size:16px;color:var(--gray-light);margin:0;}
  html[data-route="/recap"] .card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;}
  html[data-route="/recap"] .card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-border);gap:12px;flex-wrap:wrap;}
  html[data-route="/recap"] .card-eyebrow{font-size:16px;font-family:var(--f-display);letter-spacing:.18em;color:var(--red-primary);text-transform:uppercase;}
  html[data-route="/recap"] .card-title{font-family:var(--f-display);font-size:18px;letter-spacing:.06em;color:var(--white-bright);margin:0;}
  html[data-route="/recap"] .card-body{padding:20px;}
  html[data-route="/recap"] .empty-state{text-align:center;padding:48px 20px;color:var(--gray-light);}
  html[data-route="/recap"] .empty-icon{font-size:36px;margin-bottom:12px;}
  html[data-route="/recap"] .empty-msg{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;color:var(--gray-light);margin:0 0 8px;}
  html[data-route="/recap"] .empty-sub{font-size:16px;color:var(--gray-light);margin:0 0 18px;}
  html[data-route="/recap"] .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
  html[data-route="/recap"] .badge-gold{background:rgba(240,189,48,.12);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);}
  @keyframes recap-fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  html[data-route="/recap"] .stagger-in{opacity:0;animation:recap-fadeInUp .3s ease both;}
  html[data-route="/recap"] .lift{transition:transform .18s,box-shadow .18s,border-color .15s;}
  html[data-route="/recap"] .lift:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,26,26,.12);}
  html[data-route="/recap"] .press-btn{transition:transform .1s,background .15s,border-color .15s,color .15s,box-shadow .15s;}
  html[data-route="/recap"] .press-btn:active{transform:scale(.96);}
  html[data-route="/recap"] .ctl{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:9px 12px;font-size:16px;color:var(--white-bright);font-family:var(--f-body);outline:none;min-width:160px;}
  html[data-route="/recap"] .ctl:focus{border-color:var(--red-primary);}
  html[data-route="/recap"] .btn{padding:10px 18px;border-radius:8px;font-size:16px;font-weight:700;letter-spacing:.06em;cursor:pointer;font-family:var(--f-body);border:1px solid var(--red-primary);background:var(--red-primary);color:#fff;}
  html[data-route="/recap"] .btn:hover{filter:brightness(1.08);}
  html[data-route="/recap"] .btn-ghost{background:rgba(255,26,26,.1);color:var(--red-primary);}
  html[data-route="/recap"] .btn:disabled{opacity:.5;cursor:not-allowed;}
  html[data-route="/recap"] .recap-body{font-size:16px;line-height:1.7;color:var(--white-bright);}
  html[data-route="/recap"] .recap-body h2{font-family:var(--f-display);font-size:24px;letter-spacing:.04em;color:#FFFFFF;margin:0 0 14px;}
  html[data-route="/recap"] .recap-body p{margin:0 0 10px;color:#d8d8d8;}
  html[data-route="/recap"] .recap-body strong{color:var(--white-bright);}
  html[data-route="/recap"] .recap-body em{color:var(--gray-light);font-style:italic;}
  html[data-route="/recap"] .recap-meta{font-size:16px;color:var(--gray-light);margin-top:16px;border-top:1px solid var(--hairline);padding-top:12px;}
  html[data-route="/recap"] .spinner{width:22px;height:22px;border:3px solid var(--gray-border);border-top-color:var(--red-primary);border-radius:50%;animation:recap-spin .8s linear infinite;margin:0 auto;}
  @keyframes recap-spin{to{transform:rotate(360deg)}}
  html[data-route="/recap"] .controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
  html[data-route="/recap"] .ctl-group{display:flex;flex-direction:column;gap:6px;}
  html[data-route="/recap"] .ctl-label{font-size:16px;letter-spacing:.1em;color:var(--gray-light);text-transform:uppercase;font-weight:700;}
  @media(max-width:359px){html[data-route="/recap"] .page-header{padding:12px 8px;}html[data-route="/recap"] .page-title{font-size:22px !important;}html[data-route="/recap"] .card-body{padding:14px 12px;}html[data-route="/recap"] .ctl{min-width:0;width:100%;}html[data-route="/recap"] .controls{flex-direction:column;align-items:stretch;}}
  @media(prefers-reduced-motion:reduce){html[data-route="/recap"] .stagger-in{animation:none;opacity:1;}html[data-route="/recap"] .lift{transition:none;}html[data-route="/recap"] .lift:hover{transform:none;box-shadow:none;}html[data-route="/recap"] .press-btn{transition:none;}html[data-route="/recap"] .spinner{animation:none;}}
  }
  /* --- /regression (regression) --- */
  html[data-route="/regression"] .scatter-wrap{position:relative;width:100%;}
  html[data-route="/regression"] .scatter-wrap svg{width:100%;height:320px;overflow:visible;}
  html[data-route="/regression"] .corr-hero{text-align:center;padding:32px 20px;border-radius:8px;margin-bottom:20px;}
  html[data-route="/regression"] .corr-r{font-size:56px;font-weight:900;letter-spacing:-2px;}
  html[data-route="/regression"] .corr-label{font-size:16px;font-weight:700;letter-spacing:1px;margin-top:4px;}
  html[data-route="/regression"] .corr-n{font-size:16px;color:var(--text-muted);margin-top:6px;}
  html[data-route="/regression"] .dot-highlight{fill:var(--gold) !important;r:8 !important;}
  /* --- /scout (scout) --- */
  html[data-route="/scout"] .scout-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
  html[data-route="/scout"] .scout-input{flex:1;min-width:180px;background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:10px 14px;font-size:16px;color:var(--white-bright);outline:none;font-family:var(--f-body);}
  html[data-route="/scout"] .scout-input:focus{border-color:var(--red-primary);}
  html[data-route="/scout"] .scout-select{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:10px 12px;font-size:16px;color:var(--white-bright);outline:none;font-family:var(--f-body);cursor:pointer;}
  html[data-route="/scout"] .scout-select:focus{border-color:var(--red-primary);}
  html[data-route="/scout"] .scout-table-wrap{overflow-x:auto;}
  html[data-route="/scout"] .scout-table{width:100%;border-collapse:collapse;font-size:16px;}
  html[data-route="/scout"] .scout-table th{font-family:var(--f-display);font-size:16px;letter-spacing:.12em;color:var(--gray-light);text-align:left;padding:6px 10px;border-bottom:1px solid var(--gray-border);white-space:nowrap;cursor:pointer;}
  html[data-route="/scout"] .scout-table th:hover{color:var(--white-bright);}
  html[data-route="/scout"] .scout-table td{padding:9px 10px;border-bottom:1px solid var(--hairline);vertical-align:middle;}
  html[data-route="/scout"] .scout-table tr:last-child td{border-bottom:none;}
  html[data-route="/scout"] .scout-table tr:hover td{background:rgba(255,255,255,0.02);}
  html[data-route="/scout"] .scout-name-link{color:var(--white-bright);font-weight:600;font-size:16px;}
  html[data-route="/scout"] .scout-name-link:hover{color:var(--red-primary);}
  html[data-route="/scout"] .scout-pos-badge{display:inline-block;padding:1px 5px;border-radius:3px;font-size:16px;background:rgba(255,26,26,.15);color:var(--red-primary);margin-right:4px;}
  @media(max-width:359px){html[data-route="/scout"] .scout-hide-320{display:none !important;}}
  /* --- /search (search) --- */
  html[data-route="/search"] .search-shell{display:flex;flex-direction:column;gap:16px;}
  html[data-route="/search"] .input-wrap{position:relative;}
  html[data-route="/search"] .search-input{width:100%;background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:18px 22px 18px 56px;font-size:16px;color:var(--white-bright);outline:none;font-family:var(--f-body);min-height:60px;letter-spacing:.01em;}
  html[data-route="/search"] .search-input:focus{border-color:var(--red-primary);box-shadow:0 0 0 3px rgba(255,26,26,.12);}
  html[data-route="/search"] .search-glyph{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--gray-light);pointer-events:none;}
  html[data-route="/search"] .results-status{font-size:16px;color:var(--gray-light);font-family:var(--f-mono);padding:0 4px;}
  html[data-route="/search"] .results-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:start;}
  html[data-route="/search"] .result-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--white-bright);transition:background .12s;cursor:pointer;min-height:52px;}
  html[data-route="/search"] .result-row:last-child{border-bottom:none;}
  html[data-route="/search"] .result-row:hover{background:rgba(255,26,26,.04);}
  html[data-route="/search"] .rr-icon{flex:0 0 32px;width:32px;height:32px;border-radius:7px;background:var(--black-soft);border:1px solid var(--gray-border);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:16px;color:#FFFFFF;overflow:hidden;letter-spacing:.04em;}
  html[data-route="/search"] .rr-body{flex:1;min-width:0;}
  html[data-route="/search"] .rr-title{font-size:16px;font-weight:600;color:var(--white-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html[data-route="/search"] .rr-sub{font-size:16px;color:var(--gray-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html[data-route="/search"] .rr-tag{font-family:var(--f-display);font-size:16px;letter-spacing:.1em;padding:2px 6px;border-radius:4px;background:rgba(255,26,26,.1);color:var(--red-primary);flex:0 0 auto;}
  @keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  @media(max-width:1024px){html[data-route="/search"] .results-cols{grid-template-columns:1fr 1fr;}}
  @media(max-width:767px){html[data-route="/search"] .results-cols{grid-template-columns:1fr;}html[data-route="/search"] .search-input{font-size:16px;padding:14px 18px 14px 50px;}}
  /* --- /settings (settings) --- */
  html[data-route="/settings"] .page-header{background:linear-gradient(135deg,#0d0d0d 0%,#1a0000 50%,#0d0d0d 100%);border-bottom:2px solid var(--red-primary);padding:32px 24px 24px;position:relative;overflow:hidden;flex-shrink:0;}
  html[data-route="/settings"] .page-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 20px,rgba(255,26,26,.03) 20px,rgba(255,26,26,.03) 21px);pointer-events:none;}
  html[data-route="/settings"] .page-header-inner{position:relative;z-index:1;}
  html[data-route="/settings"] .page-eyebrow{font-family:var(--f-display);font-size:16px;letter-spacing:.2em;color:var(--red-primary);text-transform:uppercase;display:block;margin-bottom:4px;}
  html[data-route="/settings"] .page-title{font-family:var(--f-display);font-size:clamp(28px,4vw,48px);letter-spacing:.04em;color:var(--white-bright);margin:0 0 4px;line-height:1;}
  html[data-route="/settings"] .page-subtitle{font-size:16px;color:var(--gray-light);margin:0;}
  html[data-route="/settings"] .card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;}
  html[data-route="/settings"] .card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-border);gap:12px;}
  html[data-route="/settings"] .card-eyebrow{font-size:16px;font-family:var(--f-display);letter-spacing:.18em;color:var(--red-primary);text-transform:uppercase;}
  html[data-route="/settings"] .card-title{font-family:var(--f-display);font-size:18px;letter-spacing:.06em;color:var(--white-bright);margin:0;}
  html[data-route="/settings"] .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
  html[data-route="/settings"] .badge-gold{background:rgba(240,189,48,.12);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);}
  html[data-route="/settings"] .badge-green{background:rgba(61,186,110,.12);color:#3dba6e;border:1px solid rgba(61,186,110,.25);}
  html[data-route="/settings"] .badge-gray{background:rgba(138,138,138,.12);color:var(--gray-light);border:1px solid rgba(138,138,138,.25);}
  html[data-route="/settings"] .settings-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start;}
  html[data-route="/settings"] .settings-nav{position:sticky;top:18px;display:flex;flex-direction:column;gap:4px;background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;padding:10px;}
  html[data-route="/settings"] .settings-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:16px;font-weight:600;letter-spacing:.06em;color:var(--gray-light);text-decoration:none;text-transform:uppercase;transition:all .15s;min-height:44px;}
  html[data-route="/settings"] .settings-nav a:hover{color:var(--white-bright);background:rgba(255,255,255,.03);}
  html[data-route="/settings"] .settings-nav a.active{color:var(--white-bright);background:rgba(255,26,26,.08);}
  html[data-route="/settings"] .settings-nav .dot{width:6px;height:6px;border-radius:50%;background:var(--gray-border);}
  html[data-route="/settings"] .settings-nav a.active .dot{background:var(--red-primary);}
  html[data-route="/settings"] .settings-grid{display:flex;flex-direction:column;gap:20px;}
  html[data-route="/settings"] .section-card{scroll-margin-top:16px;}
  html[data-route="/settings"] .section-body{padding:6px 0 4px;}
  html[data-route="/settings"] .row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--hairline);gap:16px;}
  html[data-route="/settings"] .row:last-child{border-bottom:none;}
  html[data-route="/settings"] .row-label{font-size:16px;font-weight:600;color:var(--white-bright);}
  html[data-route="/settings"] .row-sub{font-size:16px;color:var(--gray-light);margin-top:2px;line-height:1.4;}
  html[data-route="/settings"] .row-ctl{flex:0 0 auto;display:flex;align-items:center;gap:8px;}
  html[data-route="/settings"] .in{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:10px 12px;font-size:16px;color:var(--white-bright);font-family:var(--f-body);min-width:200px;outline:none;min-height:44px;}
  html[data-route="/settings"] .in:focus{border-color:var(--red-primary);}
  html[data-route="/settings"] .in[readonly]{opacity:.6;cursor:not-allowed;}
  html[data-route="/settings"] .in-ta{min-height:90px;resize:vertical;width:100%;}
  html[data-route="/settings"] .sel{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:10px 12px;font-size:16px;color:var(--white-bright);font-family:var(--f-body);outline:none;cursor:pointer;min-height:44px;}
  html[data-route="/settings"] .sel:focus{border-color:var(--red-primary);}
  html[data-route="/settings"] .toggle{position:relative;width:48px;height:28px;flex:0 0 48px;}
  html[data-route="/settings"] .toggle input{opacity:0;width:0;height:0;position:absolute;}
  html[data-route="/settings"] .toggle .track{position:absolute;inset:0;background:var(--gray-border);border-radius:14px;cursor:pointer;transition:background .2s;}
  html[data-route="/settings"] .toggle .thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform .2s;}
  html[data-route="/settings"] .toggle input:checked+.track{background:var(--red-primary);}
  html[data-route="/settings"] .toggle input:checked+.track+.thumb{transform:translateX(20px);}
  html[data-route="/settings"] .avatar-row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--hairline);}
  html[data-route="/settings"] .avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--red-primary),var(--gold-accent));display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:26px;color:#fff;flex:0 0 64px;overflow:hidden;}
  html[data-route="/settings"] .avatar img{width:100%;height:100%;object-fit:cover;}
  html[data-route="/settings"] .avatar-meta{flex:1;min-width:0;}
  html[data-route="/settings"] .section-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--gray-border);background:rgba(0,0,0,.2);}
  html[data-route="/settings"] .save-msg{font-size:16px;color:#3dba6e;margin-right:auto;}
  html[data-route="/settings"] .save-msg.err{color:var(--red-primary);}
  html[data-route="/settings"] .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:8px;font-size:16px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:all .15s;border:1px solid transparent;font-family:var(--f-body);text-transform:uppercase;}
  html[data-route="/settings"] .btn-ghost{background:transparent;border-color:var(--gray-border);color:var(--gray-light);}
  html[data-route="/settings"] .btn-ghost:hover{border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/settings"] .btn-primary{background:var(--red-primary);color:#fff;}
  html[data-route="/settings"] .btn-primary:hover{background:#cc1515;}
  html[data-route="/settings"] .btn[disabled]{opacity:.55;cursor:not-allowed;}
  html[data-route="/settings"] .link-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;background:var(--bg-surface-2,#1A1A1A);border:1px solid var(--gray-border);color:var(--gray-light);font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;min-height:44px;font-family:var(--f-body);}
  html[data-route="/settings"] .link-pill:hover{border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/settings"] .link-pill.linked{color:#3dba6e;border-color:rgba(61,186,110,.4);}
  @keyframes settings-fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  html[data-route="/settings"] .stagger-in{opacity:0;animation:settings-fadeInUp .3s ease both;}
  @media(prefers-reduced-motion:reduce){html[data-route="/settings"] .stagger-in{animation:none;opacity:1;}}
  @media(max-width:900px){
    html[data-route="/settings"] .settings-shell{grid-template-columns:1fr;}
    html[data-route="/settings"] .settings-nav{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
    html[data-route="/settings"] .settings-nav a{min-height:40px;}
  }
  @media(max-width:767px){
    html[data-route="/settings"] .page-header{padding:16px 12px;}
    html[data-route="/settings"] .row{flex-wrap:wrap;}
    html[data-route="/settings"] .row-ctl{flex-basis:100%;justify-content:flex-end;}
    html[data-route="/settings"] .in{min-width:0;width:100%;}
  }
  @media(max-width:359px){
    html[data-route="/settings"] .page-title{font-size:22px !important;}
  }
  /* --- /standings (standings) --- */
  html[data-route="/standings"] .section-tabs{display:flex;gap:8px;flex-wrap:wrap;}
  html[data-route="/standings"] .section-tab{padding:8px 16px;border-radius:8px;font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--bg-surface-2,#111);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;transition:all .15s;}
  html[data-route="/standings"] .section-tab:hover{color:var(--white-bright);}
  html[data-route="/standings"] .section-tab:active{transform:scale(.98);}
  html[data-route="/standings"] .section-tab:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  html[data-route="/standings"] .section-tab.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/standings"] .league-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 4px;}
  html[data-route="/standings"] .league-tab{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:8px;font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--bg-surface-2,#111);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;transition:all .15s;}
  html[data-route="/standings"] .league-tab.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/standings"] .league-tab:hover{color:var(--white-bright);}
  html[data-route="/standings"] .league-tab:active{background:rgba(255,26,26,.22);transform:scale(.96);}
  html[data-route="/standings"] .league-tab:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
  html[data-route="/standings"] .league-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gray-border);}
  html[data-route="/standings"] .ls-stat{background:var(--black-soft,#111);padding:12px 16px;display:flex;flex-direction:column;gap:2px;}
  html[data-route="/standings"] .ls-label{font-size:16px;font-family:var(--f-display);letter-spacing:.14em;color:var(--gray-light);text-transform:uppercase;}
  html[data-route="/standings"] .ls-value{font-family:var(--f-display);font-size:20px;letter-spacing:.04em;color:var(--white-bright);}
  html[data-route="/standings"] .st-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  html[data-route="/standings"] .st-table{width:100%;border-collapse:collapse;font-size:16px;}
  html[data-route="/standings"] .st-table th{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:var(--gray-light);text-align:left;padding:10px 12px;border-bottom:1px solid var(--gray-border);white-space:nowrap;position:sticky;top:0;background:var(--black-card);z-index:1;}
  html[data-route="/standings"] .st-table th.r{text-align:right;}
  html[data-route="/standings"] .st-table th.sortable{cursor:pointer;user-select:none;transition:color .15s;}
  html[data-route="/standings"] .st-table th.sortable:hover{color:var(--white-bright);}
  html[data-route="/standings"] .st-table th.sort-active{color:var(--white-bright);}
  html[data-route="/standings"] .sort-arrow{display:inline-block;margin-left:3px;font-size:16px;}
  html[data-route="/standings"] .st-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;}
  html[data-route="/standings"] .st-table td.r{text-align:right;}
  html[data-route="/standings"] .st-table tr:last-child td{border-bottom:none;}
  html[data-route="/standings"] .st-table tbody tr{transition:background .15s;}
  html[data-route="/standings"] .st-table tbody tr:hover td{background:rgba(255,26,26,.04);}
  html[data-route="/standings"] .st-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.015);}
  html[data-route="/standings"] .st-table tbody tr:nth-child(even):hover td{background:rgba(255,26,26,.06);}
  html[data-route="/standings"] .st-rank{width:36px;text-align:center;}
  html[data-route="/standings"] .rank-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-family:var(--f-display);font-size:16px;font-weight:700;}
  html[data-route="/standings"] .rank-badge.r1{background:rgba(240,189,48,.2);color:#FFFFFF;border:1px solid rgba(240,189,48,.4);}
  html[data-route="/standings"] .rank-badge.r2{background:rgba(192,192,192,.15);color:#C0C0C0;border:1px solid rgba(192,192,192,.3);}
  html[data-route="/standings"] .rank-badge.r3{background:rgba(205,127,50,.15);color:#CD7F32;border:1px solid rgba(205,127,50,.3);}
  html[data-route="/standings"] .rank-badge.rn{background:transparent;color:var(--gray-light);border:none;font-size:16px;}
  html[data-route="/standings"] .st-team-name{font-size:16px;font-weight:600;color:var(--white-bright);}
  html[data-route="/standings"] .st-owner{font-size:16px;color:var(--gray-light);}
  html[data-route="/standings"] .st-rec{font-family:var(--f-display);font-size:16px;white-space:nowrap;}
  html[data-route="/standings"] .st-w{color:#3dba6e;}
  html[data-route="/standings"] .st-l{color:#e55;}
  html[data-route="/standings"] .st-t{color:#FFFFFF;}
  html[data-route="/standings"] .st-sep{color:var(--gray-light);}
  html[data-route="/standings"] .st-pts{font-family:var(--f-mono);font-size:16px;color:#FFFFFF;}
  html[data-route="/standings"] .st-pts-dim{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);}
  html[data-route="/standings"] .st-pct{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);}
  html[data-route="/standings"] .st-streak{display:inline-flex;align-items:center;padding:2px 6px;border-radius:4px;font-size:16px;font-weight:700;letter-spacing:.06em;font-family:var(--f-display);}
  html[data-route="/standings"] .st-streak.w{background:rgba(61,186,110,.12);color:#3dba6e;border:1px solid rgba(61,186,110,.2);}
  html[data-route="/standings"] .st-streak.l{background:rgba(255,85,85,.1);color:#e55;border:1px solid rgba(255,85,85,.2);}
  html[data-route="/standings"] .last5{display:inline-flex;gap:3px;align-items:center;}
  html[data-route="/standings"] .last5-dot{width:8px;height:8px;border-radius:50%;}
  html[data-route="/standings"] .last5-dot.win{background:#3dba6e;}
  html[data-route="/standings"] .last5-dot.loss{background:#e55;}
  html[data-route="/standings"] .last5-dot.tie{background:var(--gold-accent);}
  html[data-route="/standings"] .playoff-in td{border-left:3px solid #3dba6e;}
  html[data-route="/standings"] .playoff-bubble td{border-left:3px solid var(--gold-accent);}
  html[data-route="/standings"] .playoff-out{opacity:.55;}
  html[data-route="/standings"] .playoff-out .st-team-name{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3);}
  html[data-route="/standings"] .playoff-cutoff td{border-bottom:2px dashed rgba(255,26,26,.4) !important;position:relative;}
  html[data-route="/standings"] .playoff-cutoff td:first-child::after{content:'PLAYOFF LINE';position:absolute;left:0;bottom:-11px;font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:var(--red-primary);background:var(--black-card);padding:0 6px;line-height:18px;white-space:nowrap;}
  html[data-route="/standings"] .playoff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:16px 20px;}
  html[data-route="/standings"] .pf-slot{background:var(--black-soft,#111);border:1px solid var(--gray-border);border-radius:8px;padding:12px;display:flex;align-items:center;gap:10px;transition:border-color .15s;}
  html[data-route="/standings"] .pf-slot.pf-in{border-color:#3dba6e;}
  html[data-route="/standings"] .pf-slot.pf-bubble{border-color:#FFFFFF;}
  html[data-route="/standings"] .pf-slot.pf-bye{border-color:rgba(106,169,215,.5);background:rgba(106,169,215,.06);}
  html[data-route="/standings"] .pf-seed{font-family:var(--f-display);font-size:22px;color:var(--red-primary);min-width:28px;text-align:center;}
  html[data-route="/standings"] .pf-team-info{flex:1;min-width:0;}
  html[data-route="/standings"] .pf-team-name{font-size:16px;font-weight:600;color:var(--white-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html[data-route="/standings"] .pf-team-rec{font-size:16px;color:var(--gray-light);font-family:var(--f-mono);}
  html[data-route="/standings"] .pf-badge{font-size:16px;font-family:var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:3px;}
  html[data-route="/standings"] .pf-badge-bye{background:rgba(106,169,215,.12);color:#6aa9d7;border:1px solid rgba(106,169,215,.3);}
  html[data-route="/standings"] .pf-badge-in{background:rgba(61,186,110,.12);color:#3dba6e;border:1px solid rgba(61,186,110,.25);}
  html[data-route="/standings"] .pf-badge-bubble{background:rgba(240,189,48,.12);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);}
  html[data-route="/standings"] .pf-section-label{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-light);padding:16px 20px 4px;}
  html[data-route="/standings"] .pr-row{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid rgba(255,255,255,.06);transition:background .15s;}
  html[data-route="/standings"] .pr-row:hover{background:rgba(255,26,26,.04);}
  html[data-route="/standings"] .pr-row:last-child{border-bottom:none;}
  html[data-route="/standings"] .pr-rank{font-family:var(--f-display);font-size:18px;color:var(--red-primary);min-width:28px;text-align:center;}
  html[data-route="/standings"] .pr-info{flex:1;min-width:0;}
  html[data-route="/standings"] .pr-name{font-size:16px;font-weight:600;color:var(--white-bright);}
  html[data-route="/standings"] .pr-detail{font-size:16px;color:var(--gray-light);}
  html[data-route="/standings"] .pr-bar-wrap{width:100px;height:6px;background:var(--bg-surface-2,#111);border-radius:3px;overflow:hidden;}
  html[data-route="/standings"] .pr-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--red-primary),var(--gold-accent));transition:width .35s cubic-bezier(.32,.72,0,1);}
  html[data-route="/standings"] .pr-score{font-family:var(--f-mono);font-size:16px;color:#FFFFFF;min-width:40px;text-align:right;}
  html[data-route="/standings"] .recap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;padding:16px 20px;}
  html[data-route="/standings"] .recap-card{background:var(--black-soft,#111);border:1px solid var(--gray-border);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:6px;}
  html[data-route="/standings"] .recap-label{font-size:16px;font-family:var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-light);}
  html[data-route="/standings"] .recap-value{font-family:var(--f-display);font-size:22px;color:var(--white-bright);letter-spacing:.04em;}
  html[data-route="/standings"] .recap-detail{font-size:16px;color:var(--gray-light);}
  html[data-route="/standings"] .recap-highlight{color:#FFFFFF;font-family:var(--f-mono);font-weight:700;}
  html[data-route="/standings"] .chart-container{padding:20px;position:relative;}
  html[data-route="/standings"] .chart-svg{width:100%;height:auto;display:block;}
  html[data-route="/standings"] .chart-legend{display:flex;flex-wrap:wrap;gap:12px;padding:12px 20px 16px;border-top:1px solid rgba(255,255,255,.06);}
  html[data-route="/standings"] .chart-legend-item{display:flex;align-items:center;gap:6px;font-size:16px;color:var(--gray-light);cursor:pointer;transition:opacity .15s;}
  html[data-route="/standings"] .chart-legend-item.dimmed{opacity:.3;}
  html[data-route="/standings"] .chart-legend-swatch{width:10px;height:3px;border-radius:2px;}
  @keyframes standings-fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  html[data-route="/standings"] .stagger-in{opacity:0;animation:standings-fadeInUp .25s ease both;}
  @media(prefers-reduced-motion:reduce){html[data-route="/standings"] .stagger-in{animation:none;opacity:1;}}
  @media(max-width:767px){
  html[data-route="/standings"] .league-summary{grid-template-columns:repeat(2,1fr);}
  html[data-route="/standings"] .playoff-grid{grid-template-columns:1fr;}
  html[data-route="/standings"] .recap-grid{grid-template-columns:1fr;}
  html[data-route="/standings"] .pr-bar-wrap{width:60px;}
  }
  @media(max-width:359px){
  html[data-route="/standings"] .st-table{font-size:16px;}
  html[data-route="/standings"] .st-table th,html[data-route="/standings"] .st-table td{padding:7px 6px;}
  html[data-route="/standings"] .ls-value{font-size:16px;}
  html[data-route="/standings"] .league-summary{grid-template-columns:repeat(2,1fr);}
  }
  /* --- /waivers (waivers) --- */
  html[data-route="/waivers"] .section-tabs{display:flex;gap:4px;border-bottom:1px solid var(--gray-border);padding:0 20px;}
  html[data-route="/waivers"] .section-tab{padding:12px 16px;font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-light);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;background:none;border-left:0;border-right:0;border-top:0;font-family:var(--f-body);min-height:44px;display:inline-flex;align-items:center;}
  html[data-route="/waivers"] .section-tab.active{color:var(--white-bright);border-bottom-color:var(--red-primary);}
  html[data-route="/waivers"] .section-tab:hover{color:var(--white-bright);}
  html[data-route="/waivers"] .schedule-strip{display:flex;align-items:center;gap:14px;padding:14px 18px;background:rgba(240,189,48,.06);border:1px solid rgba(240,189,48,.22);border-radius:10px;font-size:16px;color:#FFFFFF;}
  html[data-route="/waivers"] .ss-icon{font-size:22px;flex-shrink:0;}
  html[data-route="/waivers"] .ss-text{flex:1;font-size:16px;color:#FFFFFF;line-height:1.4;}
  html[data-route="/waivers"] .ss-text strong{color:#fff;font-family:var(--f-display);letter-spacing:.04em;}
  html[data-route="/waivers"] .ss-countdown{font-family:var(--f-mono);font-size:16px;color:#fff;background:rgba(0,0,0,.35);padding:6px 12px;border-radius:8px;border:1px solid var(--gray-border);white-space:nowrap;}
  html[data-route="/waivers"] .faab-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;background:rgba(90,140,255,.06);border:1px solid rgba(90,140,255,.22);border-radius:10px;}
  html[data-route="/waivers"] .faab-label{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:var(--blue);text-transform:uppercase;flex-shrink:0;}
  html[data-route="/waivers"] .faab-track{flex:1;height:8px;background:var(--black-soft);border-radius:4px;overflow:hidden;border:1px solid var(--gray-border);}
  html[data-route="/waivers"] .faab-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--gold-accent));border-radius:4px;transition:width .4s ease;}
  html[data-route="/waivers"] .faab-amount{font-family:var(--f-mono);font-size:16px;color:var(--white-bright);flex-shrink:0;}
  html[data-route="/waivers"] .faab-amount span{color:var(--gray-light);font-size:16px;}
  html[data-route="/waivers"] .wt-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--f-body);}
  html[data-route="/waivers"] .wt-standard{background:rgba(240,189,48,.1);color:#FFFFFF;border:1px solid rgba(240,189,48,.2);}
  html[data-route="/waivers"] .wt-faab{background:rgba(90,140,255,.1);color:var(--blue);border:1px solid rgba(90,140,255,.2);}
  html[data-route="/waivers"] .wt-rolling{background:rgba(61,186,110,.1);color:var(--green);border:1px solid rgba(61,186,110,.2);}
  html[data-route="/waivers"] .waivers-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start;}
  html[data-route="/waivers"] .pos-filters{display:flex;gap:4px;flex-wrap:wrap;}
  html[data-route="/waivers"] .filter-search{flex:1 1 200px;min-width:0;background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:8px;padding:10px 14px;font-size:16px;color:var(--white-bright);outline:none;font-family:var(--f-body);min-height:44px;}
  html[data-route="/waivers"] .filter-search::placeholder{color:var(--gray-light);}
  html[data-route="/waivers"] .filter-search:focus{border-color:var(--red-primary);box-shadow:0 0 0 2px rgba(255,26,26,.15);}
  html[data-route="/waivers"] .pos-btn{padding:6px 12px;border-radius:6px;font-size:16px;font-weight:700;letter-spacing:.08em;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;transition:all .12s;min-height:44px;min-width:44px;font-family:var(--f-body);display:inline-flex;align-items:center;justify-content:center;}
  html[data-route="/waivers"] .pos-btn.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/waivers"] .pos-btn:hover{color:var(--white-bright);}
  html[data-route="/waivers"] .sort-select{padding:8px 12px;border-radius:8px;font-size:16px;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--white-bright);outline:none;cursor:pointer;font-family:var(--f-body);min-height:44px;}
  html[data-route="/waivers"] .sort-select:focus{border-color:var(--red-primary);}
  html[data-route="/waivers"] .fa-count{font-size:16px;color:var(--gray-light);white-space:nowrap;margin-left:auto;}
  html[data-route="/waivers"] .player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
  html[data-route="/waivers"] .pc-waiver-badge{font-size:16px;font-weight:700;padding:2px 6px;border-radius:3px;background:rgba(240,189,48,.1);color:#FFFFFF;border:1px solid rgba(240,189,48,.2);}
  html[data-route="/waivers"] .claim-list{display:flex;flex-direction:column;}
  html[data-route="/waivers"] .claim-row{display:grid;grid-template-columns:28px 32px 1fr 22px 1fr auto;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hairline);transition:background .15s;}
  html[data-route="/waivers"] .claim-row:last-child{border-bottom:none;}
  html[data-route="/waivers"] .claim-row:hover{background:rgba(255,255,255,.02);}
  html[data-route="/waivers"] .cr-handle{cursor:grab;color:var(--gray-light);display:flex;align-items:center;justify-content:center;touch-action:none;}
  html[data-route="/waivers"] .cr-handle:active{cursor:grabbing;}
  html[data-route="/waivers"] .cr-handle svg{width:14px;height:14px;}
  html[data-route="/waivers"] .cr-pri{font-family:var(--f-display);font-size:22px;color:#FFFFFF;text-align:center;}
  html[data-route="/waivers"] .cr-side{display:flex;flex-direction:column;gap:2px;min-width:0;}
  html[data-route="/waivers"] .cr-eyebrow{font-size:16px;font-family:var(--f-display);letter-spacing:.14em;color:var(--gray-light);}
  html[data-route="/waivers"] .cr-pos{display:inline-block;padding:1px 6px;border-radius:3px;font-size:16px;font-weight:700;background:rgba(240,189,48,.1);color:#FFFFFF;border:1px solid rgba(240,189,48,.2);width:fit-content;}
  html[data-route="/waivers"] .cr-name{font-weight:600;font-size:16px;color:var(--white-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html[data-route="/waivers"] .cr-school{font-size:16px;color:var(--gray-light);}
  html[data-route="/waivers"] .cr-arrow{font-size:18px;color:var(--gray-light);text-align:center;}
  html[data-route="/waivers"] .cr-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
  html[data-route="/waivers"] .cr-status{display:inline-flex;padding:2px 8px;border-radius:4px;font-size:16px;font-weight:700;letter-spacing:.08em;}
  html[data-route="/waivers"] .cr-status.queued{background:rgba(240,189,48,.12);color:#FFFFFF;border:1px solid rgba(240,189,48,.25);}
  html[data-route="/waivers"] .cr-status.awarded{background:rgba(61,186,110,.12);color:var(--green);border:1px solid rgba(61,186,110,.25);}
  html[data-route="/waivers"] .cr-status.denied,html[data-route="/waivers"] .cr-status.cancelled,html[data-route="/waivers"] .cr-status.expired{background:rgba(138,138,138,.12);color:var(--gray-light);border:1px solid rgba(138,138,138,.25);}
  html[data-route="/waivers"] .cr-bid{font-family:var(--f-mono);font-size:16px;color:#FFFFFF;}
  html[data-route="/waivers"] .claim-row.dragging{opacity:.4;background:rgba(255,26,26,.05);}
  html[data-route="/waivers"] .result-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hairline);}
  html[data-route="/waivers"] .result-row:last-child{border-bottom:none;}
  html[data-route="/waivers"] .rr-icon{flex:0 0 30px;width:30px;height:30px;border-radius:7px;background:var(--black-soft);border:1px solid var(--gray-border);display:flex;align-items:center;justify-content:center;font-size:16px;}
  html[data-route="/waivers"] .rr-body{flex:1;min-width:0;}
  html[data-route="/waivers"] .rr-title{font-size:16px;color:var(--white-bright);}
  html[data-route="/waivers"] .rr-sub{font-size:16px;color:var(--gray-light);margin-top:2px;}
  html[data-route="/waivers"] .rr-pri{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);white-space:nowrap;flex-shrink:0;}
  html[data-route="/waivers"] .txn-row{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hairline);}
  html[data-route="/waivers"] .txn-row:last-child{border-bottom:none;}
  html[data-route="/waivers"] .txn-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:5px;}
  html[data-route="/waivers"] .txn-dot.add{background:var(--green);}
  html[data-route="/waivers"] .txn-dot.drop{background:var(--red-primary);}
  html[data-route="/waivers"] .txn-dot.claim{background:var(--gold-accent);}
  html[data-route="/waivers"] .txn-body{flex:1;min-width:0;}
  html[data-route="/waivers"] .txn-headline{font-size:16px;color:var(--white-bright);line-height:1.3;}
  html[data-route="/waivers"] .txn-meta{font-size:16px;color:var(--gray-light);margin-top:2px;}
  html[data-route="/waivers"] .pri-table{width:100%;border-collapse:collapse;font-size:16px;}
  html[data-route="/waivers"] .pri-table th{font-family:var(--f-display);font-size:16px;letter-spacing:.12em;color:var(--gray-light);text-align:left;padding:8px 14px;border-bottom:1px solid var(--gray-border);}
  html[data-route="/waivers"] .pri-table td{padding:10px 14px;border-bottom:1px solid var(--hairline);}
  html[data-route="/waivers"] .pri-table tr:last-child td{border-bottom:none;}
  html[data-route="/waivers"] .pri-num{font-family:var(--f-display);font-size:18px;color:#FFFFFF;width:28px;}
  html[data-route="/waivers"] .pri-mine{background:rgba(255,26,26,.04);}
  html[data-route="/waivers"] .btn-ghost{background:transparent;border-color:var(--gray-border);color:var(--gray-light);}
  html[data-route="/waivers"] .btn-ghost:hover{border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/waivers"] .btn-waiver{background:rgba(240,189,48,.1);border-color:rgba(255,255,255,.25);color:#FFFFFF;}
  html[data-route="/waivers"] .btn-waiver:hover{background:rgba(240,189,48,.2);}
  html[data-route="/waivers"] .btn[disabled]{opacity:.55;cursor:not-allowed;}
  html[data-route="/waivers"] .btn-sm{min-height:44px;padding:10px 16px;font-size:16px;}
  html[data-route="/waivers"] .pl-act-btn{min-height:44px;padding:11px 12px;display:inline-flex;align-items:center;justify-content:center;}
  html[data-route="/waivers"] .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;display:none;align-items:center;justify-content:center;padding:24px;}
  html[data-route="/waivers"] .modal-backdrop.open{display:flex;}
  html[data-route="/waivers"] .modal{background:var(--black-card);border:1px solid var(--gray-border);border-radius:14px;width:100%;max-width:560px;max-height:90vh;overflow:auto;}
  html[data-route="/waivers"] .modal-head{padding:18px 22px;border-bottom:1px solid var(--gray-border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
  html[data-route="/waivers"] .modal-head h2{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;margin:0;}
  html[data-route="/waivers"] .modal-close{background:transparent;border:1px solid var(--gray-border);color:var(--gray-light);width:44px;height:44px;border-radius:8px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;}
  html[data-route="/waivers"] .modal-close:hover{border-color:var(--red-primary);color:var(--white-bright);}
  html[data-route="/waivers"] .modal-body{padding:22px;display:flex;flex-direction:column;gap:16px;}
  html[data-route="/waivers"] .player-summary{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;padding:14px 16px;}
  html[data-route="/waivers"] .form-row{display:flex;flex-direction:column;gap:6px;}
  html[data-route="/waivers"] .form-row label{font-family:var(--f-display);font-size:16px;letter-spacing:.14em;color:var(--gray-light);}
  html[data-route="/waivers"] .form-row input,html[data-route="/waivers"] .form-row select{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:8px;padding:10px 12px;font-size:16px;color:var(--white-bright);outline:none;font-family:var(--f-body);min-height:44px;}
  html[data-route="/waivers"] .form-row input:focus,html[data-route="/waivers"] .form-row select:focus{border-color:var(--red-primary);}
  html[data-route="/waivers"] .form-hint{font-size:16px;color:var(--gray-light);}
  html[data-route="/waivers"] .form-error{font-size:16px;color:var(--red-primary);}
  html[data-route="/waivers"] .modal-foot{padding:14px 22px;border-top:1px solid var(--gray-border);display:flex;justify-content:flex-end;gap:10px;}
  html[data-route="/waivers"] .save-msg{font-size:16px;color:var(--green);align-self:center;margin-right:auto;}
  html[data-route="/waivers"] .save-msg.err{color:var(--red-primary);}
  html[data-route="/waivers"] .drop-list{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;}
  html[data-route="/waivers"] .drop-option{display:flex;align-items:center;gap:10px;padding:12px 10px;min-height:44px;border-radius:6px;border:1px solid var(--gray-border);background:var(--black-soft);cursor:pointer;transition:all .12s;}
  html[data-route="/waivers"] .drop-option:hover{border-color:var(--red-primary);background:rgba(255,26,26,.04);}
  html[data-route="/waivers"] .drop-option.selected{border-color:var(--red-primary);background:rgba(255,26,26,.08);}
  html[data-route="/waivers"] .drop-option .do-pos{font-size:16px;font-weight:700;padding:1px 5px;border-radius:3px;background:rgba(138,138,138,.1);color:var(--gray-light);border:1px solid rgba(138,138,138,.2);}
  html[data-route="/waivers"] .drop-option .do-name{font-size:16px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html[data-route="/waivers"] .drop-option .do-pts{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);}
  html[data-route="/waivers"] .skeleton-block{background:linear-gradient(90deg,var(--black-soft) 25%,#1c1c1c 50%,var(--black-soft) 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.4s infinite;}
  html[data-route="/waivers"] .empty-msg{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;margin:0 0 8px;}
  html[data-route="/waivers"] .empty-sub{font-size:16px;margin:0;}
  @media(prefers-reduced-motion:reduce){html[data-route="/waivers"] .skeleton-block{animation:none;background:var(--black-soft);}}
  @media(max-width:1024px){html[data-route="/waivers"] .waivers-layout{grid-template-columns:1fr;}}
  @media(max-width:767px){
    html[data-route="/waivers"] .claim-row{grid-template-columns:28px 32px 1fr auto;gap:8px;}
    html[data-route="/waivers"] .claim-row .cr-arrow,html[data-route="/waivers"] .claim-row .cr-side[data-side="drop"]{display:none;}
    html[data-route="/waivers"] .player-grid{grid-template-columns:1fr 1fr;}
    html[data-route="/waivers"] .section-tabs{padding:0 12px;gap:0;}
    html[data-route="/waivers"] .section-tab{padding:10px 10px;font-size:16px;}
    html[data-route="/waivers"] .filter-bar{gap:6px;}
    html[data-route="/waivers"] .schedule-strip,html[data-route="/waivers"] .faab-bar{flex-wrap:wrap;gap:10px;}
  }
  @media(max-width:480px){html[data-route="/waivers"] .player-grid{grid-template-columns:1fr;}html[data-route="/waivers"] .fa-count{display:none;}}
  @media(max-width:359px){html[data-route="/waivers"] .page-title{font-size:22px !important;}html[data-route="/waivers"] .hide-320{display:none !important;}}
}

@layer components {
  /* ===== [W-CHROME-CLEAN / refs #1017] No yellow text — /scores game-tile meta =====
     Workflow A's upcoming-game tiles added .gt-meta/.gt-countdown/.gt-network in gold
     (var(--gold-accent)) AFTER the #1040 no-yellow sweep, so /scores still showed ~296
     yellow elements (countdown / TV network / meta). White per the sitewide no-yellow rule. */
  .gt-meta, .gt-countdown, .gt-network { color: var(--white-bright) !important; }
}

/* ============================================================================
   PLAYER TILE — shared component (2026-06-04)
   One component, three sizes: .sns-ptile--sm | --lg | --banner
   Goal: replace the ~15 route-scoped player-tile implementations with a single
   reference. See docs/PLAYER-TILE-STANDARD.md. Built on tokens.css.
   Anatomy:
     <a|div class="sns-ptile sns-ptile--sm" data-pos="QB">
       <span class="sns-ptile__photo">JM</span>        (img OR initials)
       <span class="sns-ptile__body">
         <span class="sns-ptile__name">Jaden Miller</span>
         <span class="sns-ptile__meta"><span class="sns-ptile__pos">QB</span> Georgia</span>
       </span>
       <span class="sns-ptile__stat"><b class="sns-ptile__stat-val">24.6</b>
         <span class="sns-ptile__stat-lbl">PPG</span></span>
       <span class="sns-ptile__action">…optional button…</span>
     </a>
   ============================================================================ */
.sns-ptile{display:flex;align-items:center;gap:var(--sns-space-5,10px);
  background:var(--black-soft,#111);border:1px solid var(--gray-border,#2A2A2A);
  border-radius:var(--sns-radius-xl,10px);padding:var(--sns-space-4,8px) var(--sns-space-6,12px);
  text-decoration:none;color:inherit;transition:border-color var(--sns-dur-fast,.15s),
  transform var(--sns-dur-fast,.15s),box-shadow var(--sns-dur-fast,.15s);}
a.sns-ptile:hover,.sns-ptile--interactive:hover{border-color:rgba(255,26,26,.35);
  box-shadow:var(--sns-shadow-tile-hover,0 0 14px rgba(255,0,0,.35));transform:translateY(-1px);}
.sns-ptile.is-selected{border-color:var(--red-primary,#FF1A1A);background:rgba(255,26,26,.08);}

.sns-ptile__photo{flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--sns-radius-round,50%);overflow:hidden;
  background:var(--sns-grad-avatar,linear-gradient(135deg,#1A1A1A,#0A0A0A));
  font-family:var(--font-numerals);font-weight:700;font-size:var(--sns-fs-11,11px);
  color:var(--white-bright,#F5F5F5);text-transform:uppercase;}
.sns-ptile__photo img{width:100%;height:100%;object-fit:cover;}
.sns-ptile__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sns-ptile__name{font-weight:700;color:var(--white-bright,#F5F5F5);
  font-size:var(--sns-fs-13,13px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sns-ptile__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  color:var(--gray-light,#8A8A8A);font-size:var(--sns-fs-10,10px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sns-ptile__stat{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;}
.sns-ptile__stat-val{font-family:var(--font-numerals);font-weight:700;
  color:var(--white-bright,#F5F5F5);font-size:var(--sns-fs-14,14px);}
.sns-ptile__stat-lbl{color:var(--gray-light,#8A8A8A);font-size:var(--sns-fs-10,10px);
  text-transform:uppercase;letter-spacing:var(--sns-ls-base,.04em);}
.sns-ptile__action{flex-shrink:0;display:flex;align-items:center;gap:6px;}

/* position badge — colored from the shared --sns-pos-* tokens */
.sns-ptile__pos{display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;padding:1px 6px;border-radius:var(--sns-radius-sm,4px);
  font-family:var(--font-numerals);font-weight:700;font-size:var(--sns-fs-10,10px);
  text-transform:uppercase;letter-spacing:.02em;
  background:rgba(255,255,255,.06);color:var(--white-bright,#F5F5F5);
  border:1px solid var(--gray-border,#2A2A2A);}
.sns-ptile[data-pos="QB"] .sns-ptile__pos{background:var(--sns-pos-qb-bg);color:var(--sns-pos-qb-text);border-color:transparent;}
.sns-ptile[data-pos="RB"] .sns-ptile__pos{background:var(--sns-pos-rb-bg);color:var(--sns-pos-rb-text);border-color:transparent;}
.sns-ptile[data-pos="WR"] .sns-ptile__pos{background:var(--sns-pos-wr-bg);color:var(--sns-pos-wr-text);border-color:transparent;}
.sns-ptile[data-pos="TE"] .sns-ptile__pos{background:var(--sns-pos-te-bg);color:var(--sns-pos-te-text);border-color:transparent;}
.sns-ptile[data-pos="K"]  .sns-ptile__pos{background:var(--sns-pos-k-bg);color:var(--sns-pos-k-text);border-color:transparent;}
.sns-ptile[data-pos="DEF"] .sns-ptile__pos,.sns-ptile[data-pos="DST"] .sns-ptile__pos{background:rgba(240,189,48,.14);color:var(--gold-accent,#F0BD30);border-color:transparent;}

/* ---- SMALL (default workhorse: list row / grid cell) ---- */
.sns-ptile--sm{padding:var(--sns-space-4,8px) var(--sns-space-6,12px);}

/* ---- LARGE (vertical hero card: detail page, featured) ---- */
.sns-ptile--lg{flex-direction:column;text-align:center;gap:var(--sns-space-6,12px);
  padding:var(--sns-space-10,20px);}
.sns-ptile--lg .sns-ptile__photo{width:96px;height:96px;font-size:var(--sns-fs-28,28px);}
.sns-ptile--lg .sns-ptile__body{align-items:center;gap:4px;}
.sns-ptile--lg .sns-ptile__name{font-size:var(--sns-fs-20,20px);white-space:normal;}
.sns-ptile--lg .sns-ptile__meta{justify-content:center;font-size:var(--sns-fs-13,13px);}
.sns-ptile--lg .sns-ptile__stat{align-items:center;}
.sns-ptile--lg .sns-ptile__stat-val{font-size:var(--sns-fs-28,28px);}
.sns-ptile--lg .sns-ptile__action{margin-top:4px;}

/* ---- BANNER (full-width horizontal strip: player-of-week, headliner) ---- */
.sns-ptile--banner{width:100%;gap:var(--sns-space-8,16px);
  padding:var(--sns-space-7,14px) var(--sns-space-10,20px);
  background:var(--grad-card-pop,linear-gradient(160deg,#16161A,#060608));}
.sns-ptile--banner .sns-ptile__photo{width:64px;height:64px;border-radius:var(--sns-radius-lg,8px);font-size:var(--sns-fs-20,20px);}
.sns-ptile--banner .sns-ptile__name{font-size:var(--sns-fs-18,18px);}
.sns-ptile--banner .sns-ptile__meta{font-size:var(--sns-fs-12,12px);}
.sns-ptile--banner .sns-ptile__stat+.sns-ptile__stat{margin-left:var(--sns-space-8,16px);
  padding-left:var(--sns-space-8,16px);border-left:1px solid var(--gray-border,#2A2A2A);}
.sns-ptile--banner .sns-ptile__stat-val{font-size:var(--sns-fs-22,22px);}

/* ---- CARD (grid-cell workhorse: vertical, multi-stat + footer action) ----
   The most common real pattern (free-agents, waivers, players, nil grids):
   identity on top, a row of stats, a footer with ownership + action button. */
.sns-ptile__stats{display:flex;gap:var(--sns-space-4,8px);justify-content:space-between;}
.sns-ptile__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sns-space-4,8px);}
.sns-ptile__own{color:var(--gray-light,#8A8A8A);font-size:var(--sns-fs-11,11px);}
.sns-ptile--card{flex-direction:column;align-items:stretch;text-align:left;
  gap:var(--sns-space-6,12px);padding:var(--sns-space-7,14px) var(--sns-space-8,16px);}
.sns-ptile--card .sns-ptile__name{font-size:var(--sns-fs-15,15px);}
.sns-ptile--card .sns-ptile__stats{padding:var(--sns-space-5,10px) 0;
  border-top:1px solid var(--gray-border,#2A2A2A);border-bottom:1px solid var(--gray-border,#2A2A2A);}
.sns-ptile--card .sns-ptile__stat{align-items:flex-start;flex:1;}
.sns-ptile--card .sns-ptile__stat-val{font-size:var(--sns-fs-17,17px);}
.sns-ptile__stat-val.up{color:var(--sns-trend-up,#5ad07a);}
.sns-ptile__stat-val.down{color:var(--sns-trend-down,#FF3B30);}
.sns-ptile__stat-val.flat{color:var(--gray-light,#8A8A8A);}
.sns-ptile.is-disabled{opacity:.35;pointer-events:none;}

/* === school-color fade — set --ptile-accent (school primary hex) inline per tile.
   Small/row: left→right fade. Card/large/banner: top→bottom fade. Subtle tint
   over the dark base so text stays legible; no accent set => no tint. === */
.sns-ptile{background:linear-gradient(90deg,color-mix(in srgb,var(--ptile-accent,transparent) 26%,transparent) 0%,transparent 62%),var(--black-soft,#111);}
.sns-ptile--card,.sns-ptile--lg{background:linear-gradient(180deg,color-mix(in srgb,var(--ptile-accent,transparent) 30%,transparent) 0%,transparent 60%),var(--black-soft,#111);}
.sns-ptile--banner{background:linear-gradient(180deg,color-mix(in srgb,var(--ptile-accent,transparent) 32%,transparent) 0%,transparent 60%),var(--grad-card-pop,linear-gradient(160deg,#16161A,#060608));}
.sns-ptile.is-selected{background:linear-gradient(90deg,color-mix(in srgb,var(--ptile-accent,transparent) 26%,transparent) 0%,transparent 62%),rgba(255,26,26,.10);}
/* photo gets a school-tinted ring when an accent is present */
.sns-ptile[style*="--ptile-accent"] .sns-ptile__photo{border:2px solid color-mix(in srgb,var(--ptile-accent) 55%,transparent);}

/* ============================================================
   SEASON TOGGLE  (D37a — season.js / window.CFFSeason)
   Gold pill radiogroup. Include season.js per-page; this CSS
   is global (route-agnostic).
   ============================================================ */
.season-toggle{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;        /* hide scrollbar on FF */
  padding:2px;                 /* room for focus ring */
  /* Mobile-safety: as a flex item the toggle must be allowed to shrink so its
     own overflow-x scrolling engages instead of overflowing/pushing off-screen
     (this is what hid the year picker in tight flex containers). Works in any
     mount — block containers are unaffected. */
  min-width:0;
  max-width:100%;
}
.season-toggle::-webkit-scrollbar{display:none;}

.season-toggle__opt{
  flex:0 0 auto;
  padding:5px 14px;
  border-radius:20px;
  border:1px solid var(--gray-border,#2A2A2A);
  background:var(--black-soft,#111);
  color:var(--gray-light,#8A8A8A);
  font-family:var(--f-body,"Inter",system-ui,sans-serif);
  font-size:16px;              /* above the 12px legibility floor */
  font-weight:500;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}

/* active season = gold fill, dark text (matches .nu-pro gold-chip pattern) */
.season-toggle__opt[aria-checked="true"]{
  background:var(--gold-accent,#F0BD30);
  border-color:var(--gold-accent,#F0BD30);
  color:#1a1207;               /* near-black for AA contrast on gold */
  font-weight:600;
}

/* hover on inactive pills */
.season-toggle__opt:not([aria-checked="true"]):hover{
  background:var(--bg-surface-2,#111);
  border-color:var(--gold-accent,#F0BD30);
  color:var(--white-bright,#F5F5F5);
}

/* live/current season (2026) — small green "live" dot before the year */
.season-toggle__opt.is-current::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  margin-right:6px;
  border-radius:50%;
  background:#3dba6e;
  vertical-align:middle;
}
.season-toggle__opt.is-current[aria-checked="true"]::before{ background:#0a3d1f; }

/* keyboard focus ring */
.season-toggle__opt:focus-visible{
  outline:2px solid var(--gold-accent,#F0BD30);
  outline-offset:2px;
}
/* ============================================================ */

/* ==================================================================
   DASHBOARD HEISMAN WATCH TILES — prestige trading-card theme
   Matches the Heisman page front-runner card + Pat's reference
   (screens/heisman/ref/Heisman_Watch_Player_Tile.png).

   Pat decision 2026-06-07: full gold incl. name/score on these tiles,
   intentionally overriding the [W-CROSS] no-gold-text rule HERE ONLY.
   Unlayered + scoped to html[data-route="/"] so no other page moves;
   !important beats the per-card school-color inline styles set by
   script.js (ie()/is-school-colored). Append-only, per convention.
   ================================================================== */
html[data-route="/"] .hw-row{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch;
}
html[data-route="/"] .hw-card,
html[data-route="/"] .hw-card.is-school-colored{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  isolation:isolate;
  padding:14px 12px 12px!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  border:1px solid rgba(232,199,122,.5)!important;     /* gold inner rule */
  border-radius:11px!important;
  background:
    radial-gradient(ellipse 95% 55% at 50% 26%, rgba(140,104,56,.24) 0%, transparent 62%),
    radial-gradient(ellipse 135% 120% at 50% 46%, transparent 42%, rgba(0,0,0,.66) 100%),
    linear-gradient(180deg, #2c2014 0%, #201609 52%, #120c06 100%)!important;
  box-shadow:0 0 0 5px #080604, 0 12px 30px rgba(0,0,0,.5)!important; /* black frame + drop */
  color:#E8C77A!important;
  overflow:hidden;
}
html[data-route="/"] .hw-card:hover,
html[data-route="/"] .hw-card.is-school-colored:hover{
  border-color:rgba(232,199,122,.7)!important;
  box-shadow:0 0 0 5px #080604, 0 14px 36px rgba(0,0,0,.62)!important;
  transform:translateY(-2px);
}
/* keep content above the texture/facet pseudo layers */
html[data-route="/"] .hw-card > *{ position:relative; z-index:2; }
html[data-route="/"] .hw-card picture{ display:contents; }
/* dot-matrix texture, faded behind the portrait */
html[data-route="/"] .hw-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(232,199,122,.13) 1px, transparent 1.5px);
  background-size:11px 11px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 36%, transparent 26%, #000 92%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 36%, transparent 26%, #000 92%);
  opacity:.55;
}
/* two bright-edged diagonal corner facets (dark top-left / warm bottom-right) */
html[data-route="/"] .hw-card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom right,
      rgba(8,5,2,.34) 0, rgba(8,5,2,.34) 22%,
      rgba(232,199,122,.32) 22%, rgba(232,199,122,.32) 22.6%, transparent 22.6%),
    linear-gradient(to top left,
      rgba(140,102,55,.26) 0, rgba(140,102,55,.26) 27%,
      rgba(232,199,122,.34) 27%, rgba(232,199,122,.34) 27.7%, transparent 27.7%);
}
/* rank medal — pinned to the corner, keeps gold/silver/bronze fills */
html[data-route="/"] .hw-card .hw-medal{
  position:absolute!important; top:8px; left:8px; z-index:3;
  width:26px!important; height:26px!important; font-size:16px!important;
}
/* gold-ring portrait */
html[data-route="/"] .hw-card .hw-avatar,
html[data-route="/"] .hw-card img.slot-img.hw-avatar{
  width:84px!important; height:84px!important;
  margin-top:8px;
  border-radius:50%!important;
  border:2px solid #E8C77A!important;
  box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.5)!important;
  object-fit:cover; object-position:50% 20%;
  background:radial-gradient(circle at 50% 35%, #2e2114, #120b04)!important;
  -webkit-mask-image:none!important; mask-image:none!important;
}
/* gold-foil player name */
html[data-route="/"] .hw-card .hw-name{
  margin-top:12px;
  max-width:100%;
  font-family:'Inter',system-ui,sans-serif!important;
  font-weight:800!important;
  font-size:clamp(13px,3.4vw,16px)!important;
  letter-spacing:.005em!important;
  text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(180deg,#E0BE73 0%,#F6E29A 38%,#EBCB7E 52%,#B98232 80%,#8A5A2B 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent!important;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.4));
}
/* school with full-width flanking rules */
html[data-route="/"] .hw-card .hw-school{
  display:flex!important; align-items:center; justify-content:center; gap:8px;
  width:92%; margin-top:8px;
  font-family:'Inter',system-ui,sans-serif!important;
  font-weight:600!important; font-size:16px!important;
  letter-spacing:.2em!important; text-transform:uppercase;
  color:rgba(244,236,216,.62)!important;
}
html[data-route="/"] .hw-card .hw-school::before,
html[data-route="/"] .hw-card .hw-school::after{
  content:""; flex:1 1 auto; height:1px;
}
html[data-route="/"] .hw-card .hw-school::before{ background:linear-gradient(90deg,transparent,rgba(199,136,74,.7)); }
html[data-route="/"] .hw-card .hw-school::after{ background:linear-gradient(90deg,rgba(199,136,74,.7),transparent); }
/* gold score + muted unit label */
html[data-route="/"] .hw-card .hw-score{
  margin-top:8px;
  font-family:var(--f-display,"Graduate",sans-serif)!important;
  font-size:24px!important;
  color:#E8C77A!important;
}
html[data-route="/"] .hw-card .hw-score .hw-unit{
  color:rgba(232,199,122,.7)!important;
  letter-spacing:.14em!important;
}
/* ============================================================ */

/* ============================================================
 * ADS-02 — house-ad slots (.sns-ad)
 * Native "Sponsored" cards filled by /assets/ads.js from
 * /assets/house-ads.json. First-party only (no ad network).
 * Shared chrome: components.css. Suppressed for PRO users.
 * The slot reserves a fixed height from first paint so filling
 * it in place causes zero layout shift (CLS).
 * ============================================================ */
.sns-ad{
  display:block;
  min-height:150px;            /* reserved from first paint; NOT released on
                                  fill — the card fills it, so injecting content
                                  causes no layout shift (CLS). ~matches card. */
  margin:18px 0;
}
.sns-ad__card{
  min-height:150px;
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px 20px;
  background:linear-gradient(180deg,#0D0D0D 0%,#050505 100%);
  border:1px solid var(--gray-border,#2A2A2A);
  border-left:3px solid var(--red-primary,#FF1A1A);
  border-radius:10px;
  text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.sns-ad__card:hover{
  border-color:var(--red-primary,#FF1A1A);
  transform:translateY(-1px);
}
.sns-ad__badge{
  position:absolute;
  top:12px;
  right:14px;
  font-family:var(--f-mono,'JetBrains Mono',monospace);
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted,#8A8A8A);
  border:1px solid var(--gray-border,#2A2A2A);
  border-radius:4px;
  padding:2px 6px;
  background:rgba(0,0,0,.4);
}
.sns-ad__eyebrow{
  font-family:var(--f-mono,'JetBrains Mono',monospace);
  font-size:16px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red-primary,#FF1A1A);
  padding-right:88px;          /* clear the badge */
}
.sns-ad__title{
  font-family:var(--f-display,'Graduate',sans-serif);
  font-size:22px;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--white-bright,#F5F5F5);
}
.sns-ad__body{
  font-size:16px;
  line-height:1.4;
  color:var(--text-muted,#8A8A8A);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sns-ad__cta{
  margin-top:4px;
  font-size:16px;
  font-weight:600;
  color:var(--red-primary,#FF1A1A);
}
/* In-feed grid slots span the full row so they read as a break, not a card. */
.nw-feed-grid > .sns-ad,
.pl-grid > .sns-ad{ grid-column:1 / -1; }

/* ── D-LG4 / P9 Art-shape fix — scoped to /leagues only ─────────────────
   Transparent-PNG helmets are square art; 50%+cover crops the edges badly.
   Override to 8px rounded square + contain, scoped so other routes are unaffected.
   (.lg-helmet 64px league-card art now also unified to border-radius:8px.)
   ─────────────────────────────────────────────────────────────────────── */
html[data-route="/leagues"] .st-avatar {
  border-radius: 8px;
  object-fit: contain;
}
html[data-route="/leagues"] .mu-logo,
html[data-route="/leagues"] .sn--c_matchups .mu-team-stack .mu-logo {
  border-radius: 8px;
  object-fit: contain;
}
html[data-route="/leagues"] .inv-helmet {
  border-radius: 8px;
  object-fit: contain;
}

/* ── btn-master: reusable primary CTA — red bg + animated aura glow ─────────
   Extracted from the Join-via-Invite-Code button that Brock calls the design
   bar. Apply to any primary action CTA across league surfaces.

   Usage:  <button class="btn btn-primary btn-master">…</button>
           <button class="btn btn-primary btn-master btn-master--aura">…</button>
   (btn-master--aura = explicit alias; .btn-master already includes the aura;
    the modifier exists for clarity when overriding per-route.)

   Shine sweep (moving light L→R) stays JOIN-LEAGUE exclusive via .jbc-btn
   on the btn-primary::after rule — not added here.

   prefers-reduced-motion: aura collapses to a static ring (no pulse).
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes btn-master-aura-pulse {
  0%   { box-shadow: 0 0  8px 0px rgba(255,26,26,.55),  0 4px 14px rgba(255,26,26,.40); }
  50%  { box-shadow: 0 0 18px 4px rgba(255,26,26,.80),  0 6px 22px rgba(255,0,0,.65); }
  100% { box-shadow: 0 0  8px 0px rgba(255,26,26,.55),  0 4px 14px rgba(255,26,26,.40); }
}

.btn-master {
  /* Red gradient — same as var(--sns-grad-btn-primary) */
  background: linear-gradient(180deg, #FF2A2A 0%, #C40000 100%);
  color: #fff;
  border: 1px solid #FF4D4D;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-display, "Graduate", sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 11px 22px;
  min-height: 44px;
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, opacity .15s ease;
  /* Animated aura glow — the "beat" Brock wants */
  animation: btn-master-aura-pulse 2.4s ease-in-out infinite;
}

.btn-master:hover {
  transform: translateY(-1px);
  opacity: .93;
}
.btn-master:active {
  transform: translateY(0) scale(.98);
}
.btn-master:focus-visible {
  outline: 2px solid #FF4D4D;
  outline-offset: 2px;
}

/* The --aura modifier is a semantic alias (no extra styles; .btn-master already pulses) */
.btn-master.btn-master--aura { /* intentionally empty — aura is always on */ }

/* Reduced motion: kill the pulse, keep a static ring glow */
@media (prefers-reduced-motion: reduce) {
  .btn-master {
    animation: none;
    box-shadow: 0 0 0 2px rgba(255,26,26,.6), 0 4px 14px rgba(255,26,26,.35);
  }
}

/* ── §3b: .btn-primary IS the master button treatment (D-LG2, merge gate) ──────
   Global rule promoting .btn-primary to the full red+aura master button.
   Extends tokens.css button canon without forking it. League surfaces that use
   .btn-primary get the aura automatically.
   Press state (scale .97 + glow tighten, 80ms) on all .btn variants below.
   ────────────────────────────────────────────────────────────────────────────── */

/* Ensure the canonical tokens.css .btn-primary also carries the aura glow on
   league surfaces. The selector is intentionally global here — league pages
   are the primary consumer; other routes inherit a better primary button. */
.btn-primary,
.btn--primary {
  animation: btn-master-aura-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn--primary {
    animation: none;
    box-shadow: 0 0 0 2px rgba(255,26,26,.5), var(--sns-shadow-btn-primary);
  }
}

/* Press state for ALL button variants (§3b — buttons that don't acknowledge
   the press read as broken even when they work). 80ms per spec. */
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-danger:active,
.btn-master:active {
  transform: translateY(0) scale(.97) !important;
  transition-duration: var(--sns-dur-press, .08s) !important;
}

/* ── §3e: Aceternity components — spotlight-card + glowing/moving-border ────────
   Ported to vanilla CSS following sns-aceternity-port conventions.
   Spotlight cards: for major containers (§3e, §4A hero + league-card backplate).
   Glowing border: for live/hot states (draft live, week-live canvas frame).
   Moving border: animated gradient border for premium interactive elements.
   Source: Aceternity UI "Spotlight" + "Moving Border" (MIT) — no JS required.
   All use CSS custom properties and respect prefers-reduced-motion.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── spotlight-card: major container card with spotlight reveal on hover ─ */
.sns-spotlight-card {
  position: relative;
  isolation: isolate;
  background: var(--grad-card-pop, linear-gradient(160deg, #16161A 0%, #0A0A0C 60%, #060608 100%));
  border: 1px solid var(--hairline-2, rgba(255,255,255,.1));
  border-radius: var(--sns-radius-card, 12px);
  box-shadow: var(--sns-glow-1);
  overflow: hidden;
  transition:
    box-shadow .2s var(--sns-ease-soft, ease),
    border-color .2s var(--sns-ease-soft, ease),
    transform .15s var(--sns-ease-soft, ease);
}
/* Spotlight radial overlay — red/crimson center fades outward */
.sns-spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    60% 45% at var(--sp-x, 50%) var(--sp-y, 30%),
    rgba(255, 52, 52, .18) 0%,
    rgba(240, 189, 48, .06) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .35s ease;
}
.sns-spotlight-card:hover::before,
.sns-spotlight-card:focus-within::before {
  opacity: 1;
}
/* Subtle border accent on hover */
.sns-spotlight-card:hover {
  border-color: rgba(255, 52, 52, .35);
  box-shadow: var(--sns-glow-2);
  transform: translateY(-2px);
}
/* Content stays above the spotlight layer */
.sns-spotlight-card > * { position: relative; z-index: 1; }
/* JS hook: set --sp-x/--sp-y from mousemove to follow the pointer */

/* ── glowing-border: animated glow border for live/hot container states ─ */
.sns-glowing-border {
  position: relative;
  border-radius: var(--sns-radius-card, 12px);
  background: var(--grad-card-pop, linear-gradient(160deg, #16161A 0%, #0A0A0C 60%, #060608 100%));
  isolation: isolate;
}
/* The glowing border is a pseudo-element outside the element bounds */
.sns-glowing-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: calc(var(--sns-radius-card, 12px) + 1px);
  background: conic-gradient(
    from var(--sns-glowing-border-angle, 0deg),
    rgba(255, 26, 26, 0)   0deg,
    rgba(255, 26, 26, 0.9) 60deg,
    rgba(240, 189, 48, 0.6) 90deg,
    rgba(255, 26, 26, 0)   120deg
  );
  animation: sns-glowing-border-spin 2.4s linear infinite;
}
/* Solid card surface masks the inner area so only the 1px border glows */
.sns-glowing-border::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(var(--sns-radius-card, 12px) - 1px);
  background: inherit;
}
@property --sns-glowing-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes sns-glowing-border-spin {
  to { --sns-glowing-border-angle: 360deg; }
}
/* Fallback for browsers that don't support @property */
@supports not (background: conic-gradient(from 0deg, red, red)) {
  .sns-glowing-border::before {
    background: linear-gradient(180deg, rgba(255,26,26,.8), rgba(240,189,48,.4), rgba(255,26,26,.8));
    animation: sns-glowing-border-fallback 1.8s ease-in-out infinite;
    border-radius: calc(var(--sns-radius-card, 12px) + 1px);
  }
  @keyframes sns-glowing-border-fallback {
    0%,100% { opacity: .5; }
    50% { opacity: 1; }
  }
}
/* Content stays above the pseudo-element layers */
.sns-glowing-border > * { position: relative; z-index: 1; }

/* ── moving-border: gradient border that chases the perimeter (Aceternity) ─ */
.sns-moving-border {
  position: relative;
  border-radius: var(--sns-radius-btn, 10px);
  padding: 1px; /* the "border" is the gradient bg showing through */
  background: conic-gradient(
    from var(--sns-moving-border-angle, 0deg),
    rgba(255, 52, 52, .9)    0deg,
    rgba(240, 189, 48, .7)  90deg,
    rgba(0, 183, 255, .5)  180deg,
    rgba(255, 52, 52, .9)  360deg
  );
  animation: sns-moving-border-rotate 2s linear infinite;
}
.sns-moving-border__inner {
  background: var(--bg-surface, #0A0A0A);
  border-radius: calc(var(--sns-radius-btn, 10px) - 1px);
  padding: 10px 20px;
  position: relative;
  z-index: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@property --sns-moving-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes sns-moving-border-rotate {
  to { --sns-moving-border-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .sns-moving-border {
    background: transparent;
    border: 2px solid var(--red-primary, #FF1A1A);
    animation: sns-moving-border-fallback 1.8s ease-in-out infinite;
  }
  @keyframes sns-moving-border-fallback {
    0%,100% { border-color: var(--red-primary, #FF1A1A); }
    50% { border-color: var(--gold-accent, #F0BD30); }
  }
}

/* Reduced motion: kill all spinning/pulsing border animations */
@media (prefers-reduced-motion: reduce) {
  .sns-glowing-border::before {
    animation: none;
    background: none;
    border: 1px solid rgba(255, 26, 26, .5);
    inset: 0;
  }
  .sns-glowing-border::after { display: none; }
  .sns-moving-border {
    animation: none;
    background: none;
    border: 1px solid rgba(255, 26, 26, .5);
    padding: 0;
  }
  .sns-spotlight-card:hover { transform: none; }
  .sns-spotlight-card::before { animation: none; opacity: .35; }
}