/* Illustrated Home. Scoped to the opt-in Home entry; other routes retain their styles. */
@font-face{font-family:HomeComic;src:url('assets/bangers.ttf') format('truetype');font-display:swap}
body.home-beta-active{--hb-ink:#020b16;--hb-cream:#fff0cc;--hb-gold:#ffd333;--hb-blue:#086ecb;--hb-cut:polygon(3% 0,96% 1%,100% 7%,99% 92%,96% 100%,3% 99%,0 92%,1% 7%);background:#04213c url('assets/home-comic/home-ink.webp') center top/600px auto repeat-y;color:var(--hb-cream);min-height:100svh}
.home-beta-active .app{container-type:inline-size;width:100%;max-width:580px;padding:6px 15px max(22px,env(safe-area-inset-bottom));margin:0 auto}
.home-beta-active .topbar{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:100px;padding:0 0 4px;gap:10px;border:0}
.home-beta-active .topbar .brand{width:220px;height:96px;min-width:0;padding:0;border:0;background:none;box-shadow:none;flex:0 1 220px;filter:drop-shadow(2px 4px 0 #000b)}
.home-beta-active .topbar .brand-photo{display:block;width:100%;height:100%;object-fit:contain;max-width:none;object-position:left center;border:0;box-shadow:none}
.home-beta-active .topright{display:grid;grid-template-columns:auto auto;gap:5px 7px;align-items:center;justify-items:end;flex:0 0 auto;max-width:126px}
.home-beta-active .account-pill{padding:0;border:3px solid #ffce35;border-radius:50%;box-shadow:2px 3px 0 #010a16,0 0 0 2px #061424,inset 0 0 0 2px #071324;width:55px;height:55px;min-width:55px;background:#092945;grid-column:2}
.home-beta-active .account-pill .profile-portrait.compact{width:49px;height:49px;border:0;margin:0;box-shadow:none}
.home-beta-active .account-pill .profile-portrait img{width:100%;height:100%;object-fit:cover}
.home-beta-active .account-pill .username{display:none}
.home-beta-active .season-switch{grid-column:1;grid-row:1;max-width:65px;margin:0;color:var(--hb-cream)}
.home-beta-active .season-switch select{font:14px/1 HomeComic,Impact,sans-serif;max-width:65px;padding:7px 4px;min-height:36px;border:1px solid #dccb9a;background:#062947;color:#fff0cc;border-radius:3px}
.home-beta-active .admin-link{grid-column:2;min-height:26px;padding:2px 8px;font:13px/1 HomeComic,Impact,sans-serif;letter-spacing:.6px;border:1px solid #80919d;background:#06192b;color:#f8ecc8;border-radius:2px;box-shadow:2px 2px #000}
.home-beta-active .hb-home{margin:5px 0 0;padding:0;display:grid;gap:22px;animation:none;isolation:isolate}
.hb-home .hb-panel{position:relative;min-width:0;margin:0;color:var(--hb-ink);filter:drop-shadow(3px 7px 0 #010913)}
.hb-current{background:transparent;padding:4px;isolation:isolate}.hb-current:before{content:'';position:absolute;inset:0;background:#040b12;clip-path:var(--hb-cut);z-index:-1;pointer-events:none}
.hb-current-inner{background:#fff0cc;clip-path:var(--hb-cut);padding:5px;border:0;position:relative}
.hb-current-inner:after{content:'';pointer-events:none;position:absolute;inset:0;background:url('assets/home-comic/ink-grain.svg') center/260px;opacity:.35;mix-blend-mode:multiply}
.hb-current h1{font:400 clamp(24px,7.1cqw,34px)/1.05 HomeComic,Impact,sans-serif;color:#fff3d3;letter-spacing:.7px;text-shadow:2px 3px 0 #020b16;margin:0;padding:9px 10px 11px;background:#075dad url('assets/home-comic/home-ink.webp') 50% 20%/420px auto;border:3px solid #020b16;clip-path:polygon(1% 3%,100% 0,99% 94%,0 100%);white-space:nowrap;position:relative;z-index:1}
.hb-current h1 span{color:#ffe16d}
.hb-pick-rows{min-height:112px;display:flex;flex-direction:column;justify-content:stretch}
.hb-pick-row{width:100%;min-height:112px;flex:1;display:grid;grid-template-columns:79px minmax(0,1fr) 15px;align-items:center;gap:9px;text-align:center;background:transparent;color:var(--hb-ink);border:0;padding:14px 7px 12px;position:relative;z-index:1;font-family:var(--body,system-ui)}
.hb-pick-row+.hb-pick-row{border-top:3px solid #061522;border-image:repeating-linear-gradient(90deg,#061522 0 20px,transparent 20px 23px) 3}
.hb-pick-stub{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:62px;padding-right:8px;border-right:2px solid #958c73}
.hb-kicker{font:400 22px/1 HomeComic,Impact,sans-serif;letter-spacing:.6px;text-transform:uppercase;display:block}
.hb-pick-status{display:block;font:400 12px/1.2 HomeComic,Impact,sans-serif;letter-spacing:.3px;padding:5px 3px;border:1px solid #071b24;box-shadow:1px 2px 0 #071622;transform:rotate(-3deg);text-align:center;overflow-wrap:normal;align-self:stretch;clip-path:polygon(2% 4%,100% 0,97% 95%,0 100%)}
.hb-submitted{background:#067947;color:#fff6df}
.hb-needed{background:#ffd333;color:#081624}
.hb-lost{background:#b62632;color:#fff6df}
.hb-closed{background:#d5d4cd;color:#172134}
.hb-pick-identity{min-width:0;display:flex;flex-direction:column;gap:4px;justify-content:center}
.hb-matchup{display:flex;align-items:center;justify-content:center;gap:8px;font:400 17px/1 HomeComic,Impact,sans-serif;letter-spacing:.35px;color:#142943;min-width:0}
.hb-matchup .team-logo{width:37px;height:34px;object-fit:contain;margin:0;filter:drop-shadow(1px 1px 0 #fff)}
.hb-pick-selection{font:400 clamp(22px,6.6cqw,28px)/1.05 HomeComic,Impact,sans-serif;letter-spacing:.25px;display:block;overflow-wrap:anywhere;margin:2px 0}
.hb-your-move{font-size:13px;letter-spacing:.7px;margin-bottom:3px;color:#465264}
.hb-row-arrow{align-self:center;display:block;width:10px;color:#092441}
.hb-row-arrow svg{display:block;width:10px;height:20px}
.hb-pick-enhancement{font:400 12px/1 HomeComic,Impact,sans-serif;display:flex;align-items:center;gap:4px;justify-content:center;letter-spacing:.6px}
.hb-pick-enhancement .enhancement-icon{width:24px!important;height:24px!important;object-fit:contain;margin:0}
.hb-special{background:#ffd665;border-top:3px solid #041323}
.hb-special .hb-kicker{font-size:17px}
.hb-empty{padding:20px 12px;font-size:14px}
.hb-performance-panel{padding:7px 5px 9px;background:#0764be;border:4px solid #030d19;border-radius:3px;box-shadow:inset 3px 3px 0 #45b4ff,inset -4px -4px 0 #023165;isolation:isolate}
.hb-performance-panel:before{content:'';position:absolute;inset:2px;background:url('assets/home-comic/home-ink.webp') center/500px auto;opacity:.52;mix-blend-mode:luminosity;z-index:-1;pointer-events:none}
.hb-section-title{display:table;max-width:94%;position:relative;top:-12px;margin:0 0 -5px 4px;padding:5px 14px 6px 11px;background:#010d1d;color:#fff2d3;font:400 clamp(21px,6.4cqw,29px)/1 HomeComic,Impact,sans-serif;letter-spacing:.5px;transform:rotate(-1.5deg);box-shadow:2px 3px 0 #001425;clip-path:polygon(0 7%,100% 0,96% 100%,1% 92%)}
.hb-performance{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.8fr);gap:3px;align-items:center;min-height:112px;position:relative}
.hb-burst{position:relative;isolation:isolate;height:109px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;color:#07101a;transform:rotate(-3deg)}
.hb-points{transform:rotate(3deg)}
.hb-burst-art{position:absolute;inset:-3px -4px;width:calc(100% + 8px);height:calc(100% + 6px);z-index:-1;overflow:visible}
.hb-burst-shadow{fill:#000914;transform:translate(2px,5px);stroke:#000914;stroke-width:4}
.hb-burst-face{fill:#fff0c9;stroke:#020a16;stroke-width:2;stroke-linejoin:round}
.hb-points .hb-burst-face{fill:#ffd332}
.hb-burst-hatch{fill:none;stroke:#685227;stroke-width:.6;opacity:.65}
.hb-burst span{font:400 15px/1 HomeComic,Impact,sans-serif;letter-spacing:.6px;margin:0 0 5px}
.hb-burst strong{font:400 clamp(27px,7.9cqw,37px)/1 HomeComic,Impact,sans-serif;letter-spacing:-.9px;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:.5px 1px #77500044}
.hb-trend{background:#fff0cf url('assets/home-comic/ink-grain.svg') center/300px;border:2px solid #050e1d;min-width:0;padding:3px 3px 0;position:relative;box-shadow:2px 3px 0 #031329;clip-path:polygon(2% 0,99% 2%,100% 94%,96% 100%,0 97%,1% 5%)}
.hb-trend h3{font:400 15px/1 HomeComic,Impact,sans-serif;text-align:center;margin:0;padding:3px 0 6px;letter-spacing:.3px;border-bottom:1px solid #26302e7a}
.hb-plot{height:92px;position:relative}
.hb-plot>svg{width:100%;height:92px;position:absolute;inset:0;pointer-events:none;z-index:1}
.hb-plot svg line{stroke:#0a1627;stroke-width:2;vector-effect:non-scaling-stroke}
.hb-plot-points{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:92px}
.hb-point{height:92px;width:100%;min-width:0;padding:0;border:0;background:transparent;position:relative;color:#061329;isolation:isolate}
.hb-point-value{position:absolute;top:calc(var(--point-y) - 19px);left:50%;transform:translateX(-50%);font:400 13px/16px HomeComic,Impact,sans-serif;letter-spacing:0;white-space:nowrap;background:#fff0c9df;border-radius:1px;z-index:2}
.hb-negative .hb-point-value{top:calc(var(--point-y) + 9px)}
.hb-point-dot{position:absolute;top:calc(var(--point-y) - 5px);left:calc(50% - 5px);width:11px;height:11px;background:#05a768;border:2px solid #061329;border-radius:50%;box-shadow:0 0 0 1px #fff0c9;z-index:2}
.hb-point-dot:after{content:'';position:absolute;top:1px;left:1px;width:2px;height:2px;border-radius:50%;background:#fff}
.hb-negative .hb-point-dot{background:#ee2337}
.hb-neutral .hb-point-dot{background:#fff0c9}
.hb-point-week{position:absolute;bottom:2px;left:0;right:0;text-align:center;font:10px/1.2 var(--body,system-ui);color:#435069}
.hb-watermark{position:absolute;inset:27px 0 auto;opacity:.23;filter:grayscale(1) sepia(.7);pointer-events:none;z-index:0}
.hb-watermark .enhancement-icon{display:block;width:100%!important;height:36px!important;max-width:45px!important;object-fit:contain;margin:0 auto!important}
.hb-trend-empty{display:grid;place-items:center;font-size:22px;color:#ada48a}
.hb-no-results{position:absolute;left:5px;right:5px;top:55px;text-align:center;background:#fff0c9de;font:400 12px/1 HomeComic,Impact,sans-serif;padding:5px 0;color:#3a485a;z-index:3}
.hb-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px 13px;padding-top:2px}
.hb-nav-button{--plate:#fff0c9;--highlight:#fffbed;--shade:#aea383;position:relative;min-width:0;min-height:125px;border:0;display:grid;grid-template-columns:42% minmax(0,1fr) 9px;align-items:center;gap:2px;padding:10px 12px 12px 5px;background:transparent!important;color:#041223;isolation:isolate;text-align:left;border-radius:0;filter:drop-shadow(3px 7px 0 #010914);transition:transform 120ms ease,filter 120ms ease}
.hb-nav-button:before{content:'';position:absolute;inset:0;background:#020a13;clip-path:polygon(6% 0,94% 1%,100% 11%,99% 89%,92% 100%,6% 98%,0 90%,1% 9%);z-index:-3}
.hb-nav-plate{position:absolute;inset:3px;background:var(--plate);box-shadow:inset 4px 4px 0 var(--highlight),inset -5px -7px 0 var(--shade);clip-path:polygon(6% 0,94% 1%,100% 11%,99% 89%,92% 100%,6% 98%,0 90%,1% 9%);z-index:-2;pointer-events:none}
.hb-nav-plate:before{content:'';position:absolute;inset:5px;border:1px solid #11263ab0;clip-path:polygon(5% 0,95% 0,100% 9%,100% 90%,95% 100%,5% 100%,0 92%,0 8%);background-image:url('assets/home-comic/ink-grain.svg');background-size:240px;mix-blend-mode:multiply;opacity:.85}
.hb-nav-plate:after{content:'';position:absolute;inset:8px;background:radial-gradient(#041327 1px,transparent 1.4px);background-size:4px 4px;mask-image:linear-gradient(145deg,#000,transparent 26%,transparent 75%,#000);opacity:.6}
.hb-gold{--plate:#ffd436;--highlight:#fff29d;--shade:#aa780e;transform:rotate(-1.1deg)}
.hb-blue{--plate:#0778d4;--highlight:#68c0ff;--shade:#003e80;color:#fff2d5;transform:rotate(.8deg)}
.hb-nav-button:nth-child(2){transform:rotate(.6deg)}
.hb-nav-button:nth-child(3){transform:rotate(-.4deg)}
.hb-nav-art{display:block;width:calc(100% + 6px);max-width:none;height:auto;aspect-ratio:1;object-fit:contain;position:relative;left:-6px;filter:drop-shadow(1px 3px 0 #0006);pointer-events:none}
.hb-nav-label{font:400 clamp(23px,6.6cqw,32px)/1.02 HomeComic,Impact,sans-serif;letter-spacing:.25px;min-width:0;position:relative;z-index:1;text-shadow:.5px 1px 0 #fff7c965}
.hb-blue .hb-nav-label{text-shadow:1px 2px 0 #002650}
.hb-nav-arrow{width:9px;display:block;margin-left:0}
.hb-nav-arrow svg{width:9px;height:21px;display:block}
.hb-beta-label{justify-self:center;margin:1px 0 -15px;padding:8px 5px;min-height:32px;font:10px/1.3 var(--body,system-ui);color:#fff0c9;text-decoration:none;letter-spacing:.4px}
.hb-beta-label span{color:#a5bacd}
.home-beta-active .app-footer{border:0;margin:17px 0 0;padding:0;justify-content:center}
.home-beta-active .app-footer>span{display:none}
.home-beta-active .app-footer button{font-size:11px;color:#c8d8e5;min-height:44px}
.home-beta-active .app-footer div{gap:20px}
.hb-home button:focus-visible,.home-beta-active .topbar button:focus-visible{outline:3px solid #ffdf4d;outline-offset:4px}
.hb-home .hb-pick-row:focus-visible{outline-color:#0751a3;outline-offset:-5px}
.hb-home .hb-point:focus-visible{outline-color:#cb2439;outline-offset:-1px}
@media(hover:hover){.hb-home .hb-nav-button:hover{transform:translateY(-3px) rotate(0deg);filter:drop-shadow(3px 10px 0 #010914)}}
.hb-home .hb-nav-button:active{transform:translate(3px,5px)!important;filter:drop-shadow(0 2px 0 #010914)}
.hb-home .hb-point:active{transform:none!important}
.hb-detail{width:min(90vw,380px);margin:auto;padding:25px 20px;border:4px solid #041025;border-radius:3px;box-shadow:7px 8px 0 #041025;background:#fff0c9 url('assets/home-comic/ink-grain.svg') center/300px;color:#091629}
.hb-detail::backdrop{background:#04142acc}
.hb-detail>button{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;background:transparent;font-size:29px;color:#061528}
.hb-detail h2{font:400 32px/1.1 HomeComic,Impact,sans-serif;margin:0 30px 18px 0}
.hb-detail h3{font:400 25px/1.2 HomeComic,Impact,sans-serif;margin:8px 0;overflow-wrap:anywhere}
.hb-detail p{font-size:13px;line-height:1.5}
.hb-detail-points{display:block;font:400 30px/1 HomeComic,Impact,sans-serif;margin-top:18px}
@container(max-width:340px){.home-beta-active .app{padding-left:10px;padding-right:12px}.home-beta-active .topbar .brand{width:184px;flex-basis:184px;height:88px}.home-beta-active .topbar{min-height:92px}.home-beta-active .topright{gap:4px}.home-beta-active .account-pill{width:47px;height:47px;min-width:47px}.home-beta-active .account-pill .profile-portrait.compact{width:41px;height:41px}.hb-home{gap:20px}.hb-current h1{font-size:23px;padding-left:7px;letter-spacing:.35px}.hb-pick-row{grid-template-columns:65px minmax(0,1fr) 9px;gap:6px;padding-left:4px;padding-right:3px}.hb-pick-stub{padding-right:6px}.hb-kicker{font-size:20px}.hb-pick-status{font-size:10px}.hb-matchup{gap:4px;font-size:15px}.hb-matchup .team-logo{width:29px;height:29px}.hb-burst strong{font-size:25px}.hb-burst span{font-size:13px}.hb-performance{grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.8fr);gap:1px}.hb-point-value{font-size:11px}.hb-trend h3{font-size:13px}.hb-section-title{font-size:21px}.hb-nav{gap:16px 10px}.hb-nav-button{min-height:111px;grid-template-columns:39% minmax(0,1fr) 7px;padding:9px 10px 11px 5px}.hb-nav-label{font-size:clamp(20px,6.5cqw,23px)}.hb-nav-arrow,.hb-nav-arrow svg{width:7px}.hb-burst{height:107px}}
@container(min-width:470px){.home-beta-active .app{padding-top:15px}.home-beta-active .topbar{min-height:112px}.home-beta-active .topbar .brand{width:260px;flex-basis:260px;height:110px}.hb-home .hb-nav-button{min-height:156px}.hb-nav-label{font-size:35px}.hb-burst{height:126px}.hb-burst strong{font-size:40px}.hb-pick-row{min-height:124px}}
@media(prefers-reduced-motion:reduce){.hb-home button{transition:none}.hb-home .hb-nav-button:hover,.hb-home .hb-nav-button:active{transform:none!important}}


/* Login shares the current comic-page background; auth behavior is unchanged. */
body:has(.login-shell){background:#04213c url('assets/home-comic/home-ink.webp') center top/600px auto repeat-y;color:#fff0cc;min-height:100svh}
body:has(.login-shell) .login{background:rgba(2,11,22,.88);border:1px solid #246196;border-radius:20px;padding:26px 22px;box-shadow:0 12px 34px #0008}
body:has(.login-shell) .login label,body:has(.login-shell) .login-links .text-button{color:#fff0cc}
body:has(.login-shell) .login input{background:#fff8e7;color:#071d2e;border-color:#7392a8}
body:has(.login-shell) .login .text-button{color:#fff0cc}
body:has(.login-shell) .login input:focus-visible{outline:3px solid #ffd333;outline-offset:2px}
body:has(.login-shell) .login-logo{width:min(360px,100%);height:auto;aspect-ratio:3/2;object-fit:contain;object-position:center;margin:0 auto 20px}