/* Hot Corner v1 - restyled to match the Claude mockups (hot-corner.html / hot-corner-v2.html, Oct 19).
   Mockup variables, fonts, spacing and components copied exactly. No new palette invented.
   Scoring is untouched in scoring.js. */
:root{color-scheme:dark;--bg:#0E0F12;--sf:#0F2233;--sf2:#1B2E45;--ln:#2C3E55;--tx:#F3EFE6;--mu:#9AA5B1;--ac:#FE7C04;--ok:#A9A64A;--bad:#e5322d;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:500 16px/1.5 Barlow,system-ui,sans-serif;max-width:560px;margin:0 auto;padding-bottom:84px}
h1,h2,.num{font-family:'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.2px}
header{padding:16px 16px 10px}
header h1{margin:0;font-size:30px;line-height:1}
.site-logo{display:block;width:100%;max-width:560px;height:auto;margin:0 auto 12px}
.hero-eyebrow{margin:0 0 6px;font:700 16px 'Barlow Condensed',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--mu)}
.hero-eyebrow .slashes{color:var(--ac);letter-spacing:1px}
.tag,.tagline{color:var(--mu);font-size:16px}
.tagline{margin:4px 0 0}
.badge{display:inline-block;background:var(--sf);border:1px solid var(--ln);border-radius:6px;padding:4px 8px;font-size:16px;margin:6px 6px 0 0;color:var(--mu)}
main{padding:0 16px}
h2{font-size:20px;margin:26px 0 10px}
.card{background:var(--sf);border:1px solid var(--ln);border-radius:10px;padding:18px;margin:0 0 20px}
.card h2{margin:0 0 10px;font-size:20px}
#view-home .card h2{font-size:26px}
.card h3{margin:22px 0 8px;font-size:16px}
#view-about .card h3{font-weight:700;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:20px}
.board-global h4{margin:20px 0 4px;font:700 16px 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--tx)}
.board-global h4:first-of-type{margin-top:8px}
.muted{color:var(--mu);font-size:16px;line-height:1.5}
.row{display:flex;justify-content:space-between;align-items:baseline}
.num{font-size:24px;font-weight:700}
#cap-used,#cap-left,#roster-count,#team-points,#relive-cap-used,#relive-cap-left,#relive-roster-count,#relive-team-points{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:24px;font-weight:700}
/* Cap bar: mockup .cap + .bar */
.capbar{height:8px;background:var(--sf2);border-radius:4px;overflow:hidden;margin-top:8px}
.capbar div{height:100%;background:#c9f73a;transition:width .25s}
/* Tabs: mockup fixed bottom nav (3 tabs in this app, not the mockup's 5) */
nav.tabs{position:fixed;bottom:0;left:0;right:0;max-width:560px;margin:0 auto;display:flex;background:var(--sf);border-top:1px solid var(--ln);padding-bottom:env(safe-area-inset-bottom,0px);z-index:20}
nav.tabs button{flex:1;background:none;border:0;color:var(--mu);padding:15px 0;font:700 16px 'Barlow Condensed',sans-serif;cursor:pointer;border-radius:0}
nav.tabs button.active{color:#c9f73a;box-shadow:inset 0 3px #c9f73a}
.tab-badge{display:inline-block;min-width:22px;height:22px;line-height:22px;text-align:center;background:#c9f73a;color:#0E0F12;border-radius:999px;font:700 16px Barlow,sans-serif;padding:0 5px;margin-left:4px;vertical-align:middle}
#play-sub-builder.active,#play-sub-roster.active,#play-sub-grade.active{background:#c9f73a;color:#0E0F12;border-color:#c9f73a}
/* Site-wide header: brand banner, continuous on every page. Mobile shows
   logo + sign in; desktop adds the nav links. Sticky so it stays on top. */
.site-header{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:12px;height:64px;padding:0 12px;background:var(--bg);border-bottom:1px solid var(--ln)}
.header-brand{flex:none;display:flex;align-items:center}
.header-logo{height:48px;width:auto;display:block}
@media(max-width:420px){
  .header-logo{height:36px}
  .header-signin{padding:8px 10px}
}
.header-links{display:none;margin-left:auto}
.header-links button{background:none;border:0;color:var(--tx);font:700 16px 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;padding:8px 10px;cursor:pointer}
.header-links button:hover{color:var(--ac)}
.header-signin{flex:none;margin-left:auto;padding:8px 16px;font-size:16px}
@media(min-width:768px){
  .header-links{display:flex}
  .header-signin{margin-left:0}
}
label{display:block;font-size:16px;color:var(--mu);margin:10px 0 4px}
input[type=text],input[type=search],input[type=email],select{width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--ln);background:var(--sf2);color:var(--tx);font:500 16px Barlow,system-ui,sans-serif}
/* Visual How to Play on Home, same mockup palette, no new colors */
.howto-home{scroll-margin-top:12px}
.howto-rail{display:flex;align-items:center;gap:0;margin:14px 0 6px}
.howto-dot{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ac);color:#140800;display:flex;align-items:center;justify-content:center;font:700 17px 'Barlow Condensed',sans-serif;text-decoration:none}
.howto-line{flex:1;height:2px;background:var(--ln);margin:0 4px}
.howto-step{border-top:1px solid var(--ln);padding:14px 0 6px;margin-top:10px;scroll-margin-top:12px}
.howto-step:first-of-type{border-top:0}
.howto-num{width:34px;height:34px;border-radius:50%;background:var(--ac);color:#140800;display:flex;align-items:center;justify-content:center;font:700 17px 'Barlow Condensed',sans-serif;margin-bottom:6px}
.howto-step h3{margin:0 0 8px;font-size:19px}
.howto-visual{background:var(--sf2);border:1px solid var(--ln);border-radius:10px;padding:12px;margin-bottom:8px}
.howto-caption{margin:8px 0 0;color:var(--mu);font-size:16px;line-height:1.5}
.howto-total{margin:10px 0 0;display:flex;align-items:baseline;gap:8px}
.howto-points{margin:10px 0 0}
.team-demo{display:flex;align-items:center;gap:10px;background:var(--sf);border:1px solid var(--ln);border-radius:8px;padding:9px 11px}
/* Team identity header on Play and Friends: logo + team name in one row
   at the top of the view, before the roster and management. The name
   keeps .team-name-display styling so it matches the Profile header. */
.team-identity{margin-bottom:12px}
.team-identity .team-name-display{margin:0;flex:1;min-width:0}
.team-identity .team-logo{flex:none}
.team-identity .logo-svg{flex:none}
.logo-mark{flex:none;width:40px;height:40px;border-radius:50%;background:var(--ac);color:#140800;display:flex;align-items:center;justify-content:center;font:700 18px 'Barlow Condensed',sans-serif}
.team-name-demo{font:700 20px 'Barlow Condensed',sans-serif;color:var(--tx)}
.howto-arrow{text-align:center;color:var(--ac);font-size:24px;line-height:1.2}
/* Tap-for-stats demo on Home: live-tappable name plus a mini replica of the slide-in panel */
.howto-tap-demo .tap-num{font-size:20px}
.tap-demo-row{flex-wrap:wrap}
.tap-hint{flex:none;background:var(--ac);color:#140800;border-radius:999px;padding:4px 10px;font:700 16px Barlow,sans-serif;white-space:nowrap;animation:tap-pulse 1.6s ease-in-out infinite}
@keyframes tap-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.howto-mini-panel{background:var(--bg);border:1px solid var(--ln);border-left:3px solid var(--ac);border-radius:8px;padding:12px;margin-top:10px}
.howto-mini-panel .statline{margin:10px 0 0}
.mini-panel-title{margin:0 0 6px;color:var(--mu);font-size:16px;text-transform:uppercase;letter-spacing:.5px}
.mini-panel-name{margin:0;font:700 22px 'Barlow Condensed',sans-serif;color:var(--tx)}
/* Tappable player name in the mini stat panel: keeps its big display
   font, adds the dotted-underline tap cue from .namebtn. */
.mini-panel-name.pname{cursor:pointer;text-decoration:underline dotted var(--mu);text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.tap-hint{animation:none}}
.howto-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--ac);background:transparent}
.dot.used{background:var(--ac)}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.filters>div:last-child{grid-column:1/-1}
/* Player rows and roster slots: mockup .slot */
.player,.slotrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--sf);border:1px solid var(--ln);border-radius:8px;padding:13px 14px;margin-bottom:10px;color:var(--tx);font:inherit}
.slotrow{margin-bottom:16px}
.pname{flex:1;min-width:0}
.pname{cursor:pointer}
.pname .namebtn{background:none;border:0;color:var(--tx);font:500 16px Barlow,system-ui,sans-serif;text-align:left;padding:0;cursor:pointer;text-decoration:underline dotted var(--mu);text-underline-offset:3px}
.pmeta{font-size:16px;color:var(--mu);margin-top:2px}
.pmeta small{display:block;color:var(--mu);font-size:16px}
.price{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;white-space:nowrap}
.pts{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;white-space:nowrap}
.slot{min-width:38px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;color:var(--ac);flex:none}
.empty{color:var(--mu)}
/* Buttons: mockup .btn (orange) and .btn.g (ghost) */
.btn{background:var(--ac);color:#140800;border:0;border-radius:8px;padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font:600 16px Barlow,sans-serif;cursor:pointer;white-space:nowrap}
.btn.g{background:var(--sf2);color:var(--tx);border:1px solid var(--ln)}
.lockbtn{flex:none;width:44px;min-width:44px;padding:10px 0;font-size:20px}
.btn.primary{background:var(--ac);color:#140800;border:0}
.btn.gold{background:var(--ok);color:#140800;border:0}
.btn.cream{background:#F3EFE6;color:#0E0F12;border:0}
.btn.lime{background:#c9f73a;color:#140800;border:0}
/* Three ways to play: each way gets its own accent color so they read as
   three different games, not three identical rows. */
.play-way{border:1px solid var(--ln);border-left:5px solid var(--pw,#FE7C04);border-radius:10px;padding:14px 16px;margin-bottom:12px;background:var(--sf)}
.play-way.solo{--pw:#FE7C04}
.play-way.relive{--pw:#F3EFE6}
.play-way.friends{--pw:#c9f73a}
.play-way h3{margin:0 0 4px;color:var(--pw)}
.play-way p{margin:0 0 10px}
.play-way .btn{border:0;color:#140800;background:var(--pw)}
.btn.danger{background:var(--sf2);color:var(--bad);border:1px solid var(--ln)}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* Greyed-out but still tappable: a disabled button fires no click, so the
   lock-in button uses this class + a popup instead when it cannot act. */
.btn.off{opacity:.45;cursor:not-allowed}
.grade{font-size:56px;line-height:1;color:var(--ac);font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700}
.big{font-size:56px;line-height:1;color:var(--ac);font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700}
table.rules{width:100%;border-collapse:collapse;font-size:16px}
table.rules td{padding:8px 4px;border-bottom:1px solid var(--ln);color:var(--mu)}
table.rules td:last-child{text-align:right;font-weight:700;color:var(--tx);font-family:'Barlow Condensed',sans-serif;font-size:18px}
/* Banner space reserved for V2, mockup .ban */
.ban{border:1px dashed var(--ln);color:var(--mu);font-size:16px;text-align:center;padding:6px;border-radius:6px;margin:24px 0}
/* Stat panel: mockup #dr slide-in from the right */
.overlay{position:fixed;inset:0;background:#0008;display:none;z-index:29}
.overlay.open{display:block}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);background:var(--bg);border-left:1px solid var(--ln);transform:translateX(105%);transition:transform .22s;z-index:30;overflow:auto;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 30px}
.panel.open{transform:none}
/* Stat panel opened from inside the How to Play modal must sit above
   the modal (z-index 31), not under it. Added by openPanel() only when
   a howto modal is open, removed by closePanel(). */
.panel.panel-over-modal{z-index:32}
.panel h2{margin:0 0 4px}
@media(prefers-reduced-motion:reduce){.panel{transition:none}}
/* Stat grid: mockup .sg */
.statline{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0}
.statline div{background:var(--sf2);border-radius:8px;padding:8px;text-align:center}
.statline b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700}
.statline span{font-size:16px;color:var(--mu)}
footer{padding:18px 16px 40px;color:var(--mu);font-size:16px;line-height:1.6;border-top:1px solid var(--ln)}
footer a{color:var(--ac)}
.notice{background:var(--sf);border:1px solid var(--ln);border-radius:10px;padding:12px;font-size:16px;line-height:1.5;color:var(--mu)}
.notice strong{color:var(--tx)}
/* Beta banner: top of Home during early access. Navy card, orange left
accent, brand type. Removed when the game officially launches. */
.beta-banner{background:#0F2233;border-bottom:3px solid #FE7C04;padding:12px 16px;margin:0 -16px 0;font-size:16px;line-height:1.5;color:#F3EFE6;text-align:center}
.beta-banner strong{color:#FE7C04}
.beta-banner .btn{margin-left:8px;white-space:nowrap}
/* v2 additions, same mockup palette */
.hero h2{font-size:26px}
details.faq{background:var(--sf);border:1px solid var(--ln);border-radius:8px;padding:10px 12px;margin-bottom:6px}
details.faq summary{cursor:pointer;font-weight:600;color:var(--tx)}
details.faq p{margin:8px 0 0}
select{width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--ln);background:var(--sf2);color:var(--tx);font:500 16px Barlow,system-ui,sans-serif}

/* Standalone leaderboards, Relive year picker, and event cards */
.lb-you{border-left:3px solid var(--ac);background:var(--sf2)}
.year-picker{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.yr-btn{flex:1;min-width:64px;background:var(--sf2);color:var(--tx);border:1px solid var(--ln);border-radius:8px;padding:10px 0;font:700 18px 'Barlow Condensed',sans-serif;cursor:pointer}
.yr-btn.active{background:var(--ac);color:#140800;border-color:var(--ac)}
.yr-btn.soon{background:var(--sf);color:var(--mu);border-style:dashed;cursor:default;opacity:.6}
.event-card{background:var(--bg);border:1px solid var(--ln);border-left:3px solid var(--ac);border-radius:8px;padding:12px;margin:10px 0}
.event-card p{margin:6px 0}
.reel-week{display:flex;gap:6px;margin:10px 0}
.reel-week span{flex:1;text-align:center;background:var(--sf);border:1px solid var(--ln);border-radius:6px;padding:8px 0;font:700 16px 'Barlow Condensed',sans-serif}
/* Profile badges: same mockup palette, no new colors */
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.badge-item{background:var(--sf);border:1px solid var(--ln);border-radius:8px;padding:10px 8px;text-align:center}
.badge-item.locked{opacity:.45}
.badge-tier{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:28px;line-height:1;color:var(--ok)}
.badge-name{font-weight:700;font-size:16px;margin-top:4px}
.badge-sub{font-size:16px;color:var(--mu);margin-top:2px;line-height:1.4}

/* Custom profile fonts, DaFont 100% Free, self-hosted in fonts/. See fonts/FONTS.md. */
@font-face{font-family:'Freshman';src:url('fonts/Freshman.ttf') format('truetype');font-display:swap}
@font-face{font-family:'College';src:url('fonts/College.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Sports World';src:url('fonts/SportsWorld.ttf') format('truetype');font-display:swap}
@font-face{font-family:'College Slab';src:url('fonts/CollegeSlab.otf') format('opentype');font-display:swap}
@font-face{font-family:'Varsity Team';src:url('fonts/VarsityTeam.otf') format('opentype');font-display:swap}
@font-face{font-family:'Sports Jersey';src:url('fonts/SportsJersey.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Secrets Stencil';src:url('fonts/SecretsStencil.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Nashville';src:url('fonts/Nashville.ttf') format('truetype');font-display:swap}
/* Team name display on the Profile page: uses the custom font and color. */
.team-name-display{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:38px;line-height:1.1;color:var(--ac);word-break:break-word;margin:4px 0 10px}
.team-slogan{font-size:17px;color:var(--mu);font-style:italic;margin:0 0 10px}
/* Featured badges as chips on a public profile. */
/* The "(you)" tag on branded leaderboard rows stays in plain Barlow:
   decorative display fonts garble parentheses. */
.you-tag{font-family:'Barlow',sans-serif;font-size:16px}
.logo-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.logo-pick{background:var(--sf2);border:1px solid var(--ln);border-radius:10px;padding:6px;cursor:pointer;line-height:0}
.logo-pick.picked{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}
.logo-display{margin:8px 0}
.paid-tier-tag{display:inline-block;background:var(--ac);color:#0E0F12;font-weight:700;border-radius:4px;padding:2px 8px;font-size:16px;line-height:1.4;margin-bottom:6px}
/* Pro badge: broadcast lower-third style. Dark background, HG monogram,
   bold condensed text, orange accent. Shown next to the team name for
   Pro members (FOUNDING PRO for the first 25). 16px floor. */
.pro-badge{display:inline-flex;align-items:center;gap:6px;background:#0E0F12;border:1px solid var(--ac);border-radius:4px;padding:2px 8px;font:700 16px 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:1px;color:var(--tx);vertical-align:middle;white-space:nowrap}
.pro-badge-hg{background:var(--ac);color:#0E0F12;border-radius:2px;padding:0 4px;font-weight:700}
.od-countdown{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--ac);margin:10px 0 0}
.logo-display-big{margin:12px 0;text-align:center}
.logo-display-big .logo-svg{margin:0 auto}
.team-name-preview{margin:12px 0;text-align:center;padding:12px;background:var(--bg);border:1px solid var(--ln);border-radius:10px}
.team-name-preview span{font-size:36px;line-height:1.2;font-weight:700}
.logo-svg svg{width:100%;height:100%;display:block}
.pub-logo{margin:0 0 10px}
.featured-chip{display:inline-block;background:var(--sf2);border:1px solid var(--ac);color:var(--tx);border-radius:20px;padding:6px 12px;margin:2px 4px 2px 0;font-size:16px}
/* Featured badges row on the Profile page. */
.featured-row .badge-item{padding:14px 10px}
.feature-btn{margin-top:8px;font-size:16px}
/* MySpace branding: the profile page takes your team color. */
#profile-body.branded h3{color:var(--ac)}
.tier-grid{display:grid;grid-template-columns:1fr;gap:12px}
.tier-col{background:var(--sf2);border:1px solid var(--ln);border-radius:8px;padding:12px}
.tier-col p{margin:4px 0}
@media(min-width:768px){.tier-grid{grid-template-columns:1fr 1fr}}
.swatch-row{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.swatch{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0}
.swatch.picked{border-color:var(--tx)}
.font-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.font-pick{font-size:20px;line-height:1.2}
.font-pick.picked{border-color:var(--ac);color:var(--ac)}
.swatch.locked,.font-pick.locked,.logo-pick.locked,.btn.locked{opacity:.85}
/* Customize popup pickers: boxed sections with visible labels so the color
   and font choices cannot be missed below the fold. */
.pick-section{background:var(--sf2);border:1px solid var(--ln);border-radius:10px;padding:14px;margin:16px 0}
.pick-section h3{margin-top:0}
.swatch-item{display:inline-flex;flex-direction:column;align-items:center;gap:4px;width:64px}
.swatch{width:52px;height:52px}
.swatch-name{font-size:16px;color:var(--tx);text-align:center;line-height:1.2}
.font-pick{font-size:22px;line-height:1.2;padding:12px 16px}
.benefits-box{background:var(--sf2);border:1px solid var(--ln);border-radius:10px;padding:14px;margin:12px 0}
.benefits-box h4{margin:10px 0 4px;font-size:16px}
.benefits-box h4:first-child{margin-top:0}
.benefits-box ul{margin:4px 0 4px 20px;padding:0}
.benefits-box li{font-size:16px;line-height:1.5}

/* Player pools: scroll inside their own card instead of stretching the page. Solo has 1,470 players, Relive 22 per era. */
#pool-list,#relive-pool-list{max-height:600px;overflow-y:auto}
/* Responsive pass, Nov 8 2026: mobile-first breathing room, desktop uses the width.
   Same mockup palette, no new colors. */
/* Hero buttons: wrap instead of squeezing. Play Solo takes its own row on phones. */
.hero-actions{display:flex;flex-wrap:wrap;gap:8px}
.hero-actions .btn{flex:1 1 30%}
.hero-actions .btn.primary{flex:1 1 100%}
.hero-actions .hero-row-btn{flex:1 1 100%}
/* Cap line: four stats that wrap two-by-two on a phone instead of one long line. */
.cap-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;margin:10px 0}
.cap-stats>span{display:flex;flex-direction:column;align-items:center;min-width:0}
.cap-label{font-size:16px;color:var(--mu);white-space:nowrap}

@media(min-width:768px){
  body{max-width:1024px;padding-bottom:32px;font-size:16px}
  header{padding:24px 24px 12px}
  header h1{font-size:38px}
  main{padding:0 24px}
  /* Web nav: a top bar that sticks while you scroll, instead of the phone bottom nav. */
  nav.tabs{position:sticky;top:64px;max-width:none;border-top:0;border-bottom:1px solid var(--ln);justify-content:center}
  nav.tabs button{flex:0 1 auto;padding:15px 30px;font-size:17px}
  nav.tabs button.active{box-shadow:inset 0 -3px #c9f73a}
  /* Hero: all five buttons inline at natural width on a wide screen. */
  .hero-actions .btn,.hero-actions .btn.primary,.hero-actions .hero-row-btn{flex:0 1 auto}
  /* How-to / Relive / Friends steps: two columns of cards, wide demo spans both. */
  .steps-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start}
  .steps-grid .howto-step{border:1px solid var(--ln);border-radius:10px;background:var(--sf);padding:16px;margin:0 0 16px}
  .steps-grid .howto-step:first-of-type{border-top:1px solid var(--ln)}
  .steps-grid .howto-tap-demo{grid-column:1/-1}
  /* Play: single column now that the right-side banner is gone. */
  #view-builder{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
  /* Play: "How it works" is a big centered button that opens a popup. */
  .howto-open{text-align:center;margin:4px 0 16px}
  .howto-open .btn{font-size:18px;padding:14px 28px}
  /* How to Play carousel: a visual card image at the top of each step. */
  .howto-visual{text-align:center;margin:16px 0 4px}
  .howto-visual img{width:128px;height:128px;border-radius:18px}
  /* Player and roster rows: two columns so the lists stop scrolling forever. */
  #pool-list,#roster-list{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-items:start}
  /* Leaderboards: Solo, Friends, Relive side by side. */
  .boards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
  .board-badges{margin-top:8px}
  .badge-grid{grid-template-columns:repeat(4,1fr)}
  .panel{width:min(88vw,420px)}
}
/* How to Play home carousel: one card at a time, scroll sideways. */
.howto-home .steps-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;align-items:start}
.howto-home .steps-grid .howto-step{flex:0 0 min(420px,86%);scroll-snap-align:start;border:1px solid var(--ln);border-radius:10px;background:var(--sf);padding:16px;margin:0}
.howto-home .steps-grid .howto-step:first-of-type{border-top:1px solid var(--ln)}
.howto-dot.on{outline:2px solid var(--tx);outline-offset:2px}
/* First-visit How to Play popup. */
.howto-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,560px);max-height:86vh;overflow:auto;background:var(--bg);border:1px solid var(--ln);border-radius:12px;padding:18px;z-index:31;display:none}
.howto-modal.open{display:block}
/* Profile view, Nov 10 2026: the page is a clean view of how your profile looks.
   Customization lives in a popup. More white space between sections. */
.profile-card{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:22px;margin:0 0 28px}
.profile-card h3{margin:24px 0 10px;font-weight:700;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:22px}
.profile-card h3:first-of-type{margin-top:18px}
#profile-body h3{margin:28px 0 10px;font-weight:700;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:22px}
#profile-body h3:first-child{margin-top:0}
#pubprofile-body h3{font-weight:700;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:22px}
#profile-body h3,#pubprofile-body h3{color:var(--ac)}
#profile-body p{margin:12px 0}
.setup-row{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;background:var(--sf);border:1px solid var(--ln);border-radius:10px;padding:16px;margin:0 0 14px}
.setup-row>div{flex:1;min-width:0}
.setup-row .btn{flex:none}
.setup-row .muted{margin:6px 0 0}
.badge-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;align-items:stretch}
.badge-rail .badge-item{flex:0 0 150px;scroll-snap-align:start}
/* Builder position tabs: one tap filters the pool, with a count per spot. */
.pos-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding:4px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin:14px 0 4px}
.pos-tab{flex:none;scroll-snap-align:start;background:var(--sf2);color:var(--tx);border:1px solid var(--ln);border-radius:999px;padding:10px 16px;font:700 16px 'Barlow Condensed',sans-serif;cursor:pointer;white-space:nowrap}
.pos-tab.active{background:#c9f73a;color:#140800;border-color:#c9f73a}
.pos-count{font:600 16px Barlow,sans-serif;opacity:.75;margin-left:4px}
.pos-tab.active .pos-count{opacity:.85}
.slotrow.lb-top1{border-color:#ffc81e;background:rgba(255,200,30,.10)}
.slotrow.lb-top2{border-color:#d7d7d7;background:rgba(215,215,215,.07)}
.slotrow.lb-top3{border-color:#b87333;background:rgba(184,115,51,.10)}
.slotrow.lb-top1 .slot,.slotrow.lb-top2 .slot,.slotrow.lb-top3 .slot{font-size:22px;font-weight:700}
/* Stat panel points breakdown: one row per scoring stat, total at the bottom. */
.pts-breakdown{margin:12px 0 4px}
.pts-row{display:flex;justify-content:space-between;gap:12px;padding:7px 2px;border-bottom:1px solid var(--ln);font-size:16px}
.pts-row span{color:var(--mu)}
.pts-row b{color:var(--tx);white-space:nowrap}
.pts-row.pts-total{border-bottom:none;padding-top:10px;font-size:16px}
.pts-row.pts-total span{color:var(--tx);font-weight:700}

/* Homepage refresh, Nov 11 2026: the Home view leads with real game
   visuals instead of long explanations. Same palette, 16px floor. */
.hero-howto{margin-top:0}
.hero-howto h2{margin:0 0 4px}
.hero-howto .howto-visual{margin:12px 0 4px}
/* Homepage How to Play carousel, fixed size: the card is the same height
   on every step, the visual is cropped to fit, and the Back/Next buttons
   sit in a fixed footer so they are always reachable without scrolling. */
#hero-howto-body{display:flex;flex-direction:column;height:480px}
.hero-howto-content{flex:1;overflow:hidden;min-height:0}
.hero-howto-nav{margin:12px 0 0}
/* Compact single-line rows for the fixed-size How to Play carousel.
   The full .slotrow (13px padding, two lines) is too tall to fit in the
   480px card, so the carousel previews use these tighter one-line rows. */
.howto-visual .crow{display:flex;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px solid var(--ln)}
.howto-visual .crow:last-child{border-bottom:0}
.howto-visual .crow .slot{min-width:30px}
/* Tighten the spacing inside the fixed-size carousel body so the visual
   gets more room. The card stays 480px and the copy is unchanged. */
#hero-howto-body>p{margin:8px 0}
#hero-howto-body>p.hero-howto-nav{margin:8px 0 0}
#hero-howto-body h3{margin:10px 0 4px}
/* How to Play guide page: short visual sections, not a wall of text */
#howto-body h3{font-size:20px}
#howto-body .play-way h3{font-size:20px}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0}
@media (max-width:700px){.guide-grid{grid-template-columns:1fr}}
.guide-card{background:var(--sf);border:1px solid var(--ln);border-radius:10px;padding:14px 16px}
.guide-card h3{margin:0 0 6px;font-size:18px}
.guide-card p{margin:0;font-size:16px;line-height:1.5;color:var(--mu)}
.slot-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.slot-chip{background:var(--sf2);color:var(--tx);border:1px solid var(--ln);border-radius:999px;padding:10px 16px;font:700 16px 'Barlow Condensed',sans-serif}
.hero-row{margin-bottom:0;padding:9px 12px}
.hero-row .price,.hero-row .pts{font-size:17px}
.hero-row .slot{min-width:32px;font-size:16px}
/* Injured list card in My Roster: same palette, 16px floor. */
.il-card{background:var(--sf2);border:1px solid var(--ln);border-left:3px solid var(--ac);border-radius:10px;padding:14px 16px;margin:0 0 16px}
.il-card h3{margin:0 0 8px;font-size:18px}
.il-card p{margin:8px 0}
.il-card ul{margin:8px 0 4px 20px;padding:0}
.il-card li{font-size:16px;line-height:1.5}
.il-tag{display:inline-block;background:var(--ac);color:#0E0F12;font-weight:700;border-radius:4px;padding:0 6px;margin-left:6px;font-size:16px;line-height:1.4;vertical-align:1px}
.il-block{background:var(--sf2);border:1px solid var(--ln);border-left:3px solid var(--ac);border-radius:10px;padding:12px 14px;margin:12px 0}
.il-block p{margin:6px 0}
.mini-rows{display:grid;gap:8px;margin:10px 0 12px;max-height:420px;overflow-y:auto;padding-right:4px}
.lb-scroll{max-height:360px;overflow-y:auto;padding-right:4px}
.mini-rows .hero-row{margin-bottom:0}
.era-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.era-chip{background:var(--sf2);color:var(--tx);border:1px solid var(--ln);border-radius:999px;padding:10px 16px;font:700 16px 'Barlow Condensed',sans-serif;cursor:pointer}
.era-chip:hover{border-color:var(--ac);color:var(--ac)}
.relive-mini-fact{background:var(--bg);border:1px solid var(--ln);border-left:3px solid var(--ac);border-radius:8px;padding:12px;margin:10px 0 12px;font-size:16px;line-height:1.5}
#home-friends-visual{margin:10px 0 12px}
.home-fmt-row{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--ln);border-radius:8px;padding:10px 12px;margin-bottom:8px;font-size:16px}
.home-fmt-row img{width:32px;height:32px;border-radius:8px;flex:none}
.home-id-stage{display:flex;align-items:center;gap:16px;background:var(--bg);border:1px solid var(--ln);border-radius:10px;padding:16px;margin:12px 0}
.home-id-stage .logo-svg{flex:none}
.home-id-name{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:32px;line-height:1.1;color:var(--tx);word-break:break-word}
#home-identity .logo-row{margin:8px 0}
#home-identity input[type=text]{margin:4px 0 8px}

/* Site-wide visual pass, Nov 11 2026: section-header brand icons and
   compact leaderboard rows, same palette, 16px floor. */
.view-icon{width:36px;height:36px;border-radius:9px;vertical-align:middle;margin-right:10px}
.lb-row{padding:9px 12px;margin-bottom:8px}
.lb-row .slot{font-size:20px}

/* How to Play visual tour, Nov 11 2026: the step visuals are real
   game-interface renderings (roster rows, cap bar, stat panel, grade
   card), not standalone icons. Same palette, 16px floor. */
.howto-visual .slotrow{margin-bottom:8px}
.howto-visual .team-demo{align-items:center}
.howto-visual .team-name-display{margin:0;flex:1;min-width:0}
.howto-visual .team-logo{flex:none;border-radius:10px}
.howto-visual .howto-mini-panel{margin-top:10px}
/* Step 1 of the tour: a mini profile card inside the visual, tighter than
   the full profile card, with the grade beside the points. */
.howto-profile-demo{padding:14px;margin:0 0 12px;text-align:left}
.howto-id-grade{display:flex;align-items:center;gap:16px;margin-top:12px}
.howto-id-grade p{margin:0}

/* Glowing confirm button for the "Choose your team name" prompt: an
   orange pulse so it is obvious where to tap to save the name. */
.glow-btn{animation:glowPulse 1.6s ease-in-out infinite}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(254,124,4,.55)}
  50%{box-shadow:0 0 18px 4px rgba(254,124,4,.75)}
}