:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#f3f6fa;background:#0b1524}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer}.site-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem max(1rem,calc((100vw - 1200px)/2));background:#142640;border-bottom:2px solid #9baec6}.brand{font-weight:900;letter-spacing:.08em;font-size:1.2rem}.brand span{color:#9fc7ff}.preview{font-size:.72rem;letter-spacing:.06em;color:#f7d88c;border:1px solid #b89a54;border-radius:20px;padding:.35rem .65rem}main{max-width:1200px;margin:auto;padding:1.5rem 1rem 4rem}.intro{margin:1rem 0 2rem}.eyebrow{color:#9fc7ff;letter-spacing:.15em;font-weight:700;font-size:.8rem}h1{font-size:clamp(2rem,5vw,3.6rem);margin:.3rem 0}.intro>p:last-child{color:#b9c8d9}.toolbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.25rem}.toolbar label{font-weight:700}select{background:#fff;color:#142640;border-radius:9px;border:0;padding:.7rem;min-width:160px}#game-status{color:#f7d88c;font-size:.9rem}.game-title{margin:1.2rem 0 .3rem;font-size:clamp(1.3rem,3vw,2rem)}.game-meta{color:#b7c6d7;margin:0 0 1rem}.notice{border-left:4px solid #f7d88c;background:#233149;padding:.8rem 1rem;margin:1rem 0;border-radius:4px}.full-comic{display:block;width:100%;height:auto;border:4px solid #f1f4f9;border-radius:10px;background:#1c2b40}.panel-viewer{display:none}.panel-controls{display:flex;justify-content:center;align-items:center;gap:1rem;margin:1rem 0}.panel-controls button{background:#b6d7ff;color:#102039;border:0;border-radius:12px;min-height:52px;min-width:76px;font-weight:800}.panel-controls button:disabled{opacity:.35;cursor:default}.panel-count{font-weight:700;font-variant-numeric:tabular-nums}.panel-img{width:100%;height:auto;border:3px solid #fff;border-radius:8px;display:block}.error{color:#ffb5b5}footer{text-align:center;color:#9eafc5;border-top:1px solid #2b405a;padding:1.5rem;font-size:.8rem}@media(max-width:700px){.site-header{padding:1rem}.brand{font-size:.95rem}.preview{font-size:.6rem}.full-comic{display:none}.panel-viewer{display:block}.panel-controls{justify-content:space-between}.intro{margin-top:.5rem}.notice{display:none}}
/* Mobile comic-reader layout: distinct intro, selector, story, and artwork sections. */
@media(max-width:700px){
 main{padding:0 0 3rem}
 .intro{margin:0;padding:1.1rem 1rem 1.25rem;background:#101f34;border-bottom:1px solid #344d6b}
 .intro>p:last-child{display:none}
 .intro h1{font-size:clamp(1.7rem,6vw,2.25rem);line-height:1.12;margin:.45rem 0 0}
 .toolbar{margin:0;padding:1rem;gap:.65rem;background:#172b45;border-bottom:3px solid #4778b4}
 .toolbar select{flex:1;min-width:0;max-width:220px}
 #game-status{display:none}
 #comic-gallery{background:#0b1524}
 .story-header{padding:1.1rem 1rem 1.25rem;background:#243c5c;border-left:5px solid #f7d88c;border-bottom:3px solid #5c83b1;margin:0 0 1rem}
 .story-header .game-title{margin:0 0 .65rem;font-size:clamp(1.45rem,5.6vw,1.9rem);line-height:1.18;letter-spacing:-.02em;color:#fff}
 .story-header .game-meta{margin:0;color:#d1dfef;font-size:.9rem}
 .notice{display:none}
 .panel-viewer{padding:0 1rem}
 .panel-img{box-shadow:0 5px 18px rgba(0,0,0,.35)}
 .panel-controls{margin:.9rem 0}
}

/* Compact phone reader: keep the week selector finger-friendly and leave room for future season/team controls. */
@media(max-width:700px){
 .site-header{padding:.55rem 1rem;min-height:44px;border-bottom:1px solid #45617e}
 .site-header .preview{display:none}
 .intro{display:none}
 .toolbar{padding:.45rem 1rem;margin:0;gap:.65rem;border-bottom:1px solid #4778b4;flex-wrap:nowrap}
 .toolbar label{white-space:nowrap;font-size:.95rem}
 .toolbar select{height:52px;min-height:52px;min-width:160px;max-width:220px;padding:.6rem .8rem;flex:1}
 .story-header{padding:.6rem 1rem .65rem;margin:0 0 .5rem;border-left:4px solid #f7d88c;border-bottom:1px solid #5c83b1}
 .story-header .game-title{font-size:clamp(1.1rem,4.6vw,1.35rem);line-height:1.2;margin:0}
 .story-header .game-meta{display:none}
 .panel-viewer{padding:0 .65rem}
}

/* Bright, prominent Football Comics masthead on phones; story heading restored. */
@media(max-width:700px){
 .site-header{background:#f7edcf;border-bottom:3px solid #d1b66c}
 .site-header .brand{color:#10233d;font-size:clamp(1.35rem,5.5vw,1.8rem);font-weight:900;letter-spacing:.035em}
 .site-header .brand span{color:#185c99}
}

/* Requested mobile colors: light-blue masthead, cream game-title banner. */
@media(max-width:700px){
 .site-header{background:#b9dffc;border-bottom:3px solid #6da8d5}
 .site-header .brand{color:#10233d}
 .site-header .brand span{color:#185c99}
 .story-header{background:#f7edcf;border-left:5px solid #d8ae49;border-bottom:2px solid #e0cc96;padding:.7rem 1rem;margin:0 0 .55rem}
 .story-header .game-title{color:#10233d;font-size:clamp(1.4rem,5.4vw,1.75rem);line-height:1.15;font-weight:900;letter-spacing:-.02em}
}

/* Responsive conference/division team picker; original typographic marks avoid official logos. */
.team-picker-open{border:1px solid #7198c7;background:#233f62;color:#fff;border-radius:10px;padding:.65rem .9rem;font-weight:750;min-height:44px}
.team-picker-open:hover,.team-picker-open:focus-visible{background:#31557e}
.team-picker[hidden]{display:none}
.team-picker{position:fixed;inset:0;z-index:1000;background:rgba(4,12,24,.72);display:flex;align-items:center;justify-content:center;padding:1rem}
.team-picker-panel{width:min(740px,100%);max-height:min(85vh,850px);overflow-y:auto;background:#142640;color:#fff;border:1px solid #6585ab;border-radius:16px;padding:1.2rem;box-shadow:0 20px 60px #0008}
.team-picker-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.team-picker-head h2{margin:.2rem 0 1rem;font-size:1.45rem}
#team-picker-close{background:transparent;color:#fff;border:1px solid #7f9bb8;border-radius:8px;padding:.5rem .75rem;min-width:44px;min-height:44px}
.conference-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}
.conference-tabs button{background:#223d5e;color:#e8f1ff;border:1px solid #597da7;border-radius:9px;padding:.75rem;font-weight:800;min-height:48px}
.conference-tabs button[aria-pressed=true]{background:#b9dffc;color:#10233d}
.team-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.team-division{background:#1b3350;border:1px solid #3d5a7b;border-radius:12px;padding:.75rem}
.team-division h3{font-size:.85rem;color:#b9dffc;letter-spacing:.08em;margin:.2rem 0 .6rem}
.team-choice{display:flex;align-items:center;text-align:left;gap:.7rem;width:100%;padding:.5rem;background:transparent;border:1px solid transparent;border-radius:9px;color:#fff;min-height:52px;font-size:.9rem}
.team-choice:hover,.team-choice:focus-visible{background:#2b4c72}
.team-choice[aria-pressed=true]{border-color:#f7d88c;background:#304a69}
.team-monogram{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:50%;background:#385d84;border:1px solid #8aa9c8;color:#fff;font-weight:900;font-size:.8rem}
.picker-open{overflow:hidden}
@media(max-width:700px){
 .team-picker-open{padding:.45rem .55rem;font-size:.8rem;max-width:48%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:#e6f4ff;color:#10233d;border-color:#6da8d5}
 .team-picker{padding:0;align-items:stretch}
 .team-picker-panel{width:100%;max-height:100dvh;border:0;border-radius:0;padding:1rem;overflow-y:auto}
 .team-picker-grid{grid-template-columns:1fr;gap:.7rem}
 .team-division{padding:.55rem}
 .team-choice{min-height:52px}
}

/* Mobile header and unpublished-comic presentation. */
.coming-soon{max-width:760px;margin:1.25rem auto;padding:clamp(2rem,5vw,4rem) 1.5rem;text-align:center;border:2px dashed #6689af;border-radius:16px;background:linear-gradient(145deg,#1a304d,#233e5e);box-shadow:0 8px 30px #0003}
.coming-soon-eyebrow{color:#b9dffc;text-transform:uppercase;font-size:.82rem;font-weight:800;letter-spacing:.1em}
.coming-soon h2{font-size:clamp(2rem,6vw,3rem);margin:.4rem 0 .7rem;color:#f7edcf}
.coming-soon p:last-child{color:#d0dfed;line-height:1.5}
.team-monogram{font-size:.72rem;letter-spacing:-.02em}
@media(max-width:700px){
 .site-header{display:flex;flex-direction:column;align-items:stretch;gap:.45rem;padding:.7rem 1rem}
 .site-header .brand{white-space:nowrap;text-align:center;font-size:clamp(1.25rem,5vw,1.7rem);line-height:1.15}
 .team-picker-open{max-width:none;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.95rem;white-space:nowrap;min-height:44px}
 #active-team-label{overflow:hidden;text-overflow:ellipsis}
 .coming-soon{margin:.85rem .65rem;padding:2.25rem 1rem}
}

/* Match the active team button to the circular abbreviations in the picker. */
.team-picker-open{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.team-picker-open .team-monogram{flex:0 0 32px;height:32px;font-size:.68rem;letter-spacing:-.02em}

/* Team logos are identifiers, never part of the Football Comics masthead. */
.team-monogram.has-logo{background:transparent;border-color:transparent;overflow:visible}
.team-logo{display:block;width:100%;height:100%;object-fit:contain}
.team-picker-open .team-monogram.has-logo{flex-basis:38px;height:38px}

/* Keep the introductory copy on mobile, but give desktop more room for comics. */
@media (min-width:701px){.intro{display:none}}

/* Football-and-ink-pen brand mark on desktop and mobile */
.brand{display:flex;align-items:center;gap:.55rem;min-width:0}.brand-logo{width:43px;height:38px;object-fit:contain;flex:none}.brand-name{white-space:nowrap}.brand-name>span{color:#9fc7ff}@media(max-width:700px){.brand-logo{width:35px;height:32px}.brand{gap:.3rem}.brand-name{font-size:.85em}}

/* Clean reader + football-field footer, shared desktop/mobile visual system. */
:root{background:#0b1524;color:#10233d}
body{background:#0b1524}
.site-header{max-width:1200px;margin:18px auto 0;background:#edf4ff;border:0;border-radius:18px 18px 0 0;padding:20px 28px;display:flex;flex-direction:column;align-items:stretch;gap:16px}
.site-header .brand{color:#10233d;font-size:clamp(1.2rem,2.4vw,1.85rem);letter-spacing:.015em}
.site-header .brand span{color:#10233d}
.site-header .brand-name>span{color:#175aa3}
.brand-logo{width:50px;height:43px}
.team-picker-open{width:100%;justify-content:space-between;background:#fff;color:#10233d;border:2px solid #1966b5;border-radius:13px;padding:12px 20px;min-height:68px;font-size:1.22rem;box-shadow:0 2px 5px #0b152412}
.team-picker-open:hover,.team-picker-open:focus-visible{background:#f4f9ff}
.team-picker-open .team-monogram.has-logo{flex-basis:48px;height:48px}
#active-team-label{flex:1;text-align:left}
main{max-width:1200px;margin:0 auto;padding:0;background:#edf4ff;border-radius:0 0 18px 18px;overflow:hidden}
.toolbar{background:#e4efff;color:#102d56;margin:0;padding:15px 28px 20px;display:flex;align-items:center;gap:20px;border-bottom:1px solid #cbd9ea}
.toolbar label{font-size:1.05rem}
.toolbar select{background:#fff;color:#10233d;border:1px solid #c4d0e0;border-radius:12px;padding:12px 18px;min-height:54px;min-width:245px;box-shadow:0 2px 6px #0b152415}
#comic-gallery{background:#edf4ff;padding:0 28px 20px}
.story-header{background:#fff2c7;color:#10233d;border-left:6px solid #ffb525;margin:0 -28px 14px;padding:16px 25px}
.story-header .game-title{color:#10233d;font-weight:900;line-height:1.2;margin:0;font-size:clamp(1.35rem,2.5vw,2.1rem)}
.story-header .game-meta{color:#4d5870;margin:.4rem 0 0}
.full-comic{max-width:100%;width:auto;height:auto;margin:0 auto;border:3px solid #10233d;border-radius:10px}
.panel-viewer{color:#10233d}
.panel-img{width:100%;height:auto;object-fit:contain;border:3px solid #10233d;border-radius:10px}
.panel-controls{margin:16px 0 8px;color:#10233d;justify-content:space-between}
.panel-controls button{background:#0b5cba;color:#fff;border:1px solid #06428c;border-radius:12px;min-width:110px;padding:0 15px}
.panel-controls button:first-child{background:#dce6f4;color:#10233d;border-color:#a4b4cb}
.panel-controls button:disabled{opacity:.48}
.game-meta{color:#4b5f77}
.field-footer{height:110px;background:#101114;padding:9px 0;border:5px solid #22262c;border-top-color:#42474f;border-bottom-color:#090a0d;border-radius:0 0 18px 18px;overflow:hidden;box-shadow:inset 0 0 15px #000}
.led-marquee{height:100%;overflow:hidden;display:flex;align-items:center;background:repeating-linear-gradient(0deg,transparent 0 3px,#0003 3px 4px),radial-gradient(ellipse at center,#c90013 0%,#840009 100%);box-shadow:inset 0 0 18px #280000;position:relative}
.led-track{display:flex;align-items:center;width:max-content;white-space:nowrap;animation:led-scroll 17s linear infinite;color:#fff1e8;font:italic 900 clamp(1.65rem,4vw,3.25rem)/1 system-ui,sans-serif;letter-spacing:.06em;text-shadow:0 0 5px #fff,0 0 13px #ffd1cc}
.led-track span{flex:none}
@keyframes led-scroll{to{transform:translateX(-50%)}}
.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}
@media(prefers-reduced-motion:reduce){.led-track{animation:none}}
footer{max-width:1200px;margin:0 auto;color:#9eafc5;border-top:0}
@media(max-width:700px){
 .site-header{margin:0;border-radius:0;padding:13px 15px 9px;gap:10px;background:#edf4ff;border:0}
 .site-header .brand{color:#10233d;font-size:clamp(1.25rem,5vw,1.7rem);justify-content:flex-start}
 .site-header .brand span{color:#10233d}
 .site-header .brand-name>span{color:#175aa3}
 .brand-logo{width:37px;height:34px}
 .team-picker-open{max-width:none;min-height:62px;background:#fff;color:#10233d;border:2px solid #1966b5;font-size:1rem;padding:8px 12px;justify-content:space-between;gap:10px}
 .team-picker-open .team-monogram.has-logo{flex-basis:44px;height:44px}
 main{padding:0;border-radius:0;background:#edf4ff}
 .toolbar{background:#e4efff;color:#102d56;padding:10px 15px 15px;margin:0;gap:10px;border:0;flex-wrap:nowrap}
 .toolbar label{font-size:.92rem}
 .toolbar select{flex:1;max-width:none;min-width:0;min-height:50px;height:50px;padding:8px 10px;font-size:.92rem}
 #comic-gallery{padding:0 10px 8px;background:#edf4ff}
 .story-header{margin:0 -10px 12px;padding:13px 15px;background:#fff2c7;border-left:5px solid #ffb525;border-bottom:0}
 .story-header .game-title{color:#10233d;font-size:clamp(1.3rem,5.1vw,1.75rem)}
 .panel-viewer{display:block;padding:0}
 .panel-img{width:100%;height:auto;object-fit:contain;border:3px solid #10233d}
 .panel-controls{margin:14px 0 8px;gap:8px}
 .panel-controls button{min-width:88px;min-height:52px;padding:0 10px;font-size:.95rem}
 .panel-count{font-size:.9rem;white-space:nowrap}
 .panel-viewer>.game-meta{font-size:.85rem;margin:8px 2px 12px;color:#4b5f77}
 .field-footer{height:85px;border-radius:0;padding:7px 0;border-width:4px}.led-track{font-size:1.7rem}
 .coming-soon{color:#fff}
}
@media(min-width:701px){.panel-viewer{display:none}.full-comic{display:block}}

/* Compact stats link and shared desktop/mobile stats dialog. */
.story-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.story-heading .game-title{flex:1;min-width:0}
.stats-trigger{flex:none;align-self:flex-end;border:0;background:transparent;color:#155aa4;text-decoration:underline;text-underline-offset:3px;font-size:.88rem;font-weight:800;padding:5px 2px;white-space:nowrap;min-height:32px}
.stats-trigger:hover,.stats-trigger:focus-visible{color:#073b79}
.stats-dialog[hidden]{display:none}
.stats-dialog{position:fixed;inset:0;z-index:1100;background:rgba(4,12,24,.75);display:flex;align-items:center;justify-content:center;padding:14px;color:#10233d}
.stats-panel{background:#f7faff;border-radius:15px;width:min(720px,100%);max-height:min(90dvh,900px);display:flex;flex-direction:column;box-shadow:0 20px 60px #0007;overflow:hidden}
.stats-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid #cad6e6}
.stats-top h2{margin:0;font-size:1.35rem}
#stats-close{border:1px solid #a8b7c9;background:#fff;color:#10233d;border-radius:8px;width:40px;height:40px}
#stats-content{padding:16px 18px 22px;overflow-y:auto;overscroll-behavior:contain}
.stats-open{overflow:hidden}
.stats-score{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;background:#e5effb;padding:14px;border-radius:10px;text-align:center}
.stats-score>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.stats-score strong{font-size:.9rem;overflow-wrap:anywhere}
.stats-score div span{font-size:1.8rem;font-weight:900}
.stats-final{font-size:.7rem;font-weight:900;letter-spacing:.06em;color:#4b5f77}
.stats-section{margin-top:20px}
.stats-section h3{font-size:1rem;margin:0 0 8px}
.stats-table-wrap{max-width:100%;overflow-x:auto;border:1px solid #cbd8e8;border-radius:8px}
.stats-section table{border-collapse:collapse;width:100%;font-size:.85rem;white-space:nowrap}
.stats-section th,.stats-section td{padding:9px 10px;text-align:right;border-bottom:1px solid #e0e7f1}
.stats-section th:first-child,.stats-section td:first-child{text-align:left;font-weight:650}
.stats-section th{background:#dfeafa;font-weight:850}
.stats-section tr:last-child td{border-bottom:0}
.stats-empty{text-align:center;padding:28px 8px;color:#4b5f77}
@media(max-width:700px){.story-heading{align-items:flex-end;gap:8px}.stats-trigger{font-size:.8rem;padding:4px 0;min-height:30px}.stats-dialog{padding:8px}.stats-panel{max-height:92dvh}.stats-top{padding:11px 13px}#stats-content{padding:12px}.stats-section th,.stats-section td{padding:8px;font-size:.8rem}}

/* Mobile panel navigation: Previous and Next share the same enabled state. */
@media(max-width:700px){
  .panel-controls button:first-child:not(:disabled){background:#0b5cba;color:#fff;border-color:#06428c}
  .panel-controls button:first-child:disabled{background:#dce6f4;color:#52627a;border-color:#a4b4cb;opacity:.65}
  .panel-controls button:active:not(:disabled){background:#06428c;filter:brightness(1.13)}
  .panel-controls button:focus-visible{outline:3px solid #ffcb47;outline-offset:2px}
}