:root { --pine:#082c25; --pine-2:#0f4034; --green:#17846b; --cream:#f6f0e7; --paper:#fffdf9; --ink:#17251f; --muted:#78817a; --line:#e9e4dc; --orange:#d98a48; --gold:#e9bf77; --red:#d35b4b; font-family:"DM Sans", system-ui, sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); }
button, input { font:inherit; }
button { cursor:pointer; }
.app-shell { display:grid; grid-template-columns:244px minmax(0, 1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; padding:28px 22px; color:#e6f3ec; background:linear-gradient(160deg, #06241e, #0c3830); display:flex; flex-direction:column; }
.brand { display:flex; gap:10px; align-items:center; color:white; text-decoration:none; font-family:"Barlow Condensed", sans-serif; font-size:31px; font-weight:800; letter-spacing:.03em; line-height:.72; }
.brand small { display:block; color:#89b6a5; font-size:14px; letter-spacing:.2em; margin:8px 0 0 2px; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border:1px solid #62a892; border-radius:50%; color:#f4c07c; font-size:23px; }
.nav-links { display:grid; gap:6px; margin-top:72px; }
.nav-links a { padding:13px 12px; border-radius:7px; color:#a8c5b9; text-decoration:none; font-size:14px; font-weight:600; transition:.2s; }
.nav-links a span { display:inline-block; width:27px; color:#6e9b8d; font-family:"Barlow Condensed"; font-size:12px; }
.nav-links a:hover, .nav-links a.is-active { color:white; background:rgba(255,255,255,.09); }
.nav-links a.is-active span { color:#e6ae6d; }
.sidebar-foot { margin-top:auto; color:#aecabd; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.sidebar-foot p { margin:9px 0 0 17px; color:#6e9b8d; font-size:10px; }
.live-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#61d1a1; box-shadow:0 0 0 4px rgba(97,209,161,.12); }
main { overflow:hidden; }
.topbar { height:76px; padding:0 clamp(20px, 4vw, 58px); display:flex; justify-content:space-between; align-items:center; background:rgba(255,253,249,.95); border-bottom:1px solid var(--line); }
.week-label { display:grid; gap:2px; }
.week-label span, .eyebrow { margin:0; color:var(--orange); font-family:"Barlow Condensed"; font-size:12px; letter-spacing:.15em; font-weight:700; }
.week-label strong { font-size:13px; }
.topbar-actions, .profile-button { display:flex; align-items:center; gap:18px; }
.text-button { padding:7px 0; border:0; border-bottom:1px solid #b3b9b4; background:none; color:#5d675f; font-size:12px; font-weight:700; }
.profile-button { border:0; background:none; text-align:left; padding:0; }
.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:white; background:#173b32; font-size:11px; font-weight:700; }
.profile-copy { display:grid; gap:2px; color:#23352d; font-size:12px; font-weight:700; }.profile-copy small { color:#89918b; font-size:10px; font-weight:500; }
.menu-button { display:none; }
.hero { position:relative; min-height:300px; overflow:hidden; color:white; background:#092921; }
.hero > img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center 44%; filter:saturate(.76) contrast(1.08); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(3,21,17,.91), rgba(3,26,21,.54) 55%, rgba(3,16,14,.08)); }
.hero-content { position:relative; z-index:1; padding:42px clamp(20px, 5vw, 72px); }.hero h1 { margin:5px 0 8px; font-family:"Barlow Condensed"; font-size:clamp(54px, 6vw, 86px); font-weight:800; line-height:.78; text-transform:uppercase; letter-spacing:-.04em; }.hero h1 em { color:#ecd0a0; font-style:normal; }.hero-content > p:not(.eyebrow) { max-width:350px; color:#d6e4dc; font-size:13px; line-height:1.55; }.hero-link { display:inline-flex; gap:17px; margin-top:13px; color:white; border-bottom:1px solid #dca25f; padding-bottom:5px; text-decoration:none; font-size:12px; font-weight:700; }.hero-link span { color:#e8bd7a; }
.hero-scoreboard { position:absolute; z-index:1; top:36px; right:clamp(20px, 5vw, 72px); display:grid; gap:4px; padding:16px 0 16px 19px; border-left:1px solid rgba(255,255,255,.45); }.hero-scoreboard span { color:#b9d3c7; font-family:"Barlow Condensed"; font-size:11px; font-weight:700; letter-spacing:.15em; }.hero-scoreboard strong { font-family:"Barlow Condensed"; font-size:37px; line-height:.9; }.hero-scoreboard small { color:#d0dbd4; font-size:10px; }
.content { max-width:1240px; padding:42px clamp(20px, 5vw, 72px) 76px; margin:auto; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }.section-heading h2 { margin:2px 0 0; font-family:"Barlow Condensed"; font-size:40px; line-height:.95; text-transform:uppercase; letter-spacing:-.025em; }.section-heading p { margin:0; color:var(--muted); font-size:13px; }.deadline { display:flex; align-items:center; gap:8px; color:#496158; font-size:12px; font-weight:700; }.deadline strong { color:#173b32; }
.notice { display:flex; gap:11px; align-items:flex-start; margin-bottom:22px; padding:13px 15px; border:1px solid #e5d7bf; border-radius:8px; background:#fffaf0; color:#625648; font-size:12px; line-height:1.45; }.notice b { color:#a56227; }.notice .tag { flex:0 0 auto; padding:3px 6px; border-radius:3px; color:#8c5b2b; background:#f5e5cb; font-size:9px; font-weight:700; letter-spacing:.09em; }
.picks-layout { display:grid; grid-template-columns:minmax(0, 1fr) 275px; gap:26px; }.game-list { display:grid; gap:9px; }.game-card { display:grid; grid-template-columns:104px minmax(0,1fr) 44px; min-height:77px; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--paper); }.game-time { padding:16px 12px; background:#f5f1e9; color:#5b665f; font-family:"Barlow Condensed"; font-size:12px; font-weight:700; line-height:1.05; letter-spacing:.06em; }.game-time small { display:block; margin-top:5px; color:#999c93; font-family:"DM Sans"; font-size:9px; letter-spacing:0; }.teams { display:grid; gap:5px; padding:10px 13px; }.team-choice { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 7px; border:1px solid transparent; border-radius:4px; color:#23332b; background:transparent; text-align:left; font-size:12px; font-weight:700; }.team-choice:hover { background:#f3f5f1; }.team-choice.is-picked { border-color:#7fb9a5; color:#0b6b54; background:#edf8f2; }.team-choice span:last-child { color:#9da59f; font-size:10px; font-weight:500; }.game-status { display:grid; place-items:center; color:#839189; border-left:1px solid var(--line); font-size:15px; }.game-card.locked .game-status { color:#bf8645; }
.picks-side { display:grid; align-content:start; gap:14px; }.side-card { padding:20px; border-radius:9px; background:#173b32; color:#eff7f1; }.side-card.light { color:#28372f; background:var(--paper); border:1px solid var(--line); }.side-card h3 { margin:0 0 8px; font-family:"Barlow Condensed"; font-size:21px; text-transform:uppercase; }.side-card p { margin:0; color:#bad0c5; font-size:11px; line-height:1.5; }.side-card.light p { color:#6e7770; }.tie-input { width:100%; margin:15px 0 10px; padding:12px; border:1px solid #598579; border-radius:5px; outline:none; color:white; background:#0d3028; font-size:23px; font-weight:700; }.side-card.light .tie-input { color:#123c32; border-color:#d9ddd6; background:#fbfaf7; }.mini-rule { display:flex; gap:8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.16); }.light .mini-rule { border-color:var(--line); }.primary-button { display:flex; justify-content:center; align-items:center; gap:16px; width:100%; margin-top:12px; padding:12px; border:0; border-radius:5px; color:#0c3027; background:#eac084; font-size:12px; font-weight:800; }.primary-button:hover { background:#f1cf9c; }.light .primary-button { color:white; background:#16745d; }
.progress-head { display:flex; justify-content:space-between; margin-bottom:7px; color:#718078; font-size:10px; font-weight:700; }.progress { height:5px; overflow:hidden; border-radius:99px; background:#e3e9e4; }.progress span { display:block; height:100%; border-radius:inherit; background:#1e856b; }
.stat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:13px; margin:0 0 24px; }.stat-card { padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }.stat-card span { display:block; color:#758078; font-family:"Barlow Condensed"; font-size:11px; letter-spacing:.12em; font-weight:700; }.stat-card strong { display:block; margin-top:4px; font-family:"Barlow Condensed"; color:#173b32; font-size:34px; line-height:.9; }.stat-card small { display:block; margin-top:8px; color:#78837b; font-size:10px; }
.standings-table { width:100%; border-collapse:collapse; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--paper); }.standings-table th { padding:11px 15px; color:#68746d; background:#f6f2eb; font-family:"Barlow Condensed"; font-size:11px; letter-spacing:.1em; text-align:left; }.standings-table td { padding:13px 15px; border-top:1px solid var(--line); font-size:12px; }.standings-table td:first-child { width:56px; color:#7b877f; font-family:"Barlow Condensed"; font-size:16px; font-weight:700; }.rank-medal { color:#b1783c!important; }.member { display:flex; align-items:center; gap:9px; font-weight:700; }.member .avatar { width:25px; height:25px; background:#eaf0eb; color:#356055; font-size:9px; }.up { color:#198264; font-weight:700; }.down { color:#c56757; font-weight:700; }
.season-grid, .commissioner-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:23px; }.card { padding:24px; border:1px solid var(--line); border-radius:9px; background:var(--paper); }.card h3 { margin:0 0 4px; font-family:"Barlow Condensed"; font-size:25px; text-transform:uppercase; }.card .subcopy { margin:0 0 22px; color:var(--muted); font-size:12px; }.payout-row { display:grid; grid-template-columns:1fr auto 74px; gap:15px; align-items:center; padding:13px 0; border-top:1px solid var(--line); font-size:12px; }.payout-row:first-of-type { border-top:0; }.payout-row b { font-size:13px; }.payout-row span { color:#6d7770; }.payout-bar { height:7px; border-radius:99px; background:#edf0ec; }.payout-bar i { display:block; height:100%; border-radius:inherit; background:#dca566; }.fund-box { padding:20px; border-radius:7px; background:#f7f1e7; }.fund-box span { color:#7d8076; font-family:"Barlow Condensed"; font-size:11px; letter-spacing:.1em; font-weight:700; }.fund-box strong { display:block; margin:5px 0 14px; color:#1c3f35; font-family:"Barlow Condensed"; font-size:40px; line-height:.9; }.fund-box p { margin:0; color:#7a7f77; font-size:11px; line-height:1.5; }
.admin-list { display:grid; gap:0; }.admin-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:12px; }.admin-row .member { font-size:12px; }.status { padding:4px 7px; border-radius:99px; background:#ebf7ee; color:#1b805f; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }.status.due { background:#fff0e6; color:#b36233; }.status.review { background:#f6f0dd; color:#996f27; }.tiny-button { border:1px solid #d6ddd7; border-radius:4px; padding:6px 8px; color:#426054; background:white; font-size:10px; font-weight:700; }.tiny-button:hover { background:#f3f7f4; }.admin-actions { display:grid; gap:10px; }.admin-action { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:13px 0; border-top:1px solid var(--line); }.admin-action b { display:block; font-size:12px; }.admin-action span { color:#7e877f; font-size:10px; }.admin-action button { flex:0 0 auto; border:1px solid #cbd5cf; border-radius:5px; padding:8px 10px; background:white; color:#22483d; font-size:10px; font-weight:800; }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(4,27,22,.6); backdrop-filter:blur(3px); }.modal-backdrop[hidden] { display:none; }.auth-modal { position:relative; width:min(100%, 440px); padding:36px; border-radius:10px; color:#17372e; background:#fffdf9; box-shadow:0 23px 70px rgba(0,0,0,.25); }.auth-modal h2 { margin:5px 0 10px; font-family:"Barlow Condensed"; font-size:38px; line-height:.95; text-transform:uppercase; }.auth-modal > p:not(.eyebrow) { margin:0 0 22px; color:#68736b; font-size:12px; line-height:1.55; }.auth-modal label { display:block; margin-bottom:6px; color:#4e5e55; font-size:11px; font-weight:700; }.auth-modal input { width:100%; border:1px solid #d7ddd8; border-radius:5px; outline-color:#2b8a70; }.auth-modal .primary-button { margin-top:12px; }.close-button { position:absolute; top:13px; right:15px; border:0; background:none; color:#668075; font-size:26px; line-height:1; }.form-note { margin:14px 0 0; color:#88928b; font-size:10px; line-height:1.4; }
@media (max-width:860px) { .app-shell { display:block; }.sidebar { position:fixed; z-index:8; transform:translateX(-100%); width:245px; transition:.25s; }.sidebar.is-open { transform:translateX(0); }.menu-button { display:block; border:0; color:#173b32; background:none; font-size:20px; }.topbar { height:66px; }.week-label { margin-right:auto; margin-left:14px; }.topbar-actions { gap:10px; }.text-button, .profile-copy { display:none; }.hero { min-height:260px; }.hero-scoreboard { top:auto; bottom:21px; }.hero-scoreboard strong { font-size:30px; }.content { padding-top:30px; }.picks-layout, .season-grid, .commissioner-grid { grid-template-columns:1fr; }.picks-side { grid-template-columns:1fr 1fr; }.section-heading h2 { font-size:35px; }.deadline { display:none; } }
@media (max-width:560px) { .hero-content { padding-top:32px; }.hero h1 { font-size:58px; }.hero-scoreboard { display:none; }.section-heading { align-items:start; flex-direction:column; gap:6px; }.game-card { grid-template-columns:75px minmax(0,1fr) 31px; }.game-time { padding:15px 8px; font-size:10px; }.teams { padding:10px 7px; }.team-choice { padding:4px; font-size:11px; }.team-choice span:last-child { display:none; }.picks-side, .stat-grid { grid-template-columns:1fr; }.standings-table th:nth-child(4), .standings-table td:nth-child(4) { display:none; }.topbar { padding:0 16px; }.content { padding-inline:16px; }.auth-modal { padding:30px 22px; } }

/* --- Live result states, week switcher, and post-kickoff pick reveal --- */
.team-choice.is-winner { border-color: rgba(34,139,94,.85); box-shadow: inset 0 0 0 1px rgba(34,139,94,.45); }
.team-choice.is-miss { opacity: .55; }
.game-final { display: block; margin-top: 4px; font-weight: 700; letter-spacing: .04em; }

.pick-reveal { grid-column: 1 / -1; margin-top: 10px; font-size: 13px; }
.pick-reveal summary { cursor: pointer; opacity: .7; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.pick-reveal summary:hover { opacity: 1; }
.reveal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.reveal-grid b { display: block; margin-bottom: 3px; }
.reveal-grid p { margin: 0; opacity: .75; line-height: 1.45; }

.deadline select {
  margin-top: 4px; width: 100%; padding: 6px 8px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25); background: transparent; color: inherit;
  font: inherit; font-size: 14px;
}
.deadline select option { color: #10231d; }

.admin-control[disabled], .primary-button[disabled], .tiny-button[disabled] { opacity: .45; cursor: not-allowed; }

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

/* The mobile breakpoint hides .deadline, which would also hide the week
   switcher that lives inside it. Keep the interactive one. */
@media (max-width: 860px) {
  .deadline:has(select) { display: block; margin-left: auto; }
}