:root { --ink:#153050; --muted:#63758b; --blue:#2b74bc; --sky:#eaf6ff; --cream:#fffdf8; --line:#d9e5ee; --mint:#e5f7ed; --orange:#fff0d8; --danger:#b64040; --page-a:#f8fcff; --page-b:#fffdf8; --page-c:#f2fbf7; --hero-a:#e7f5ff; --hero-b:#f7fcff; --hero-c:#eaf9f1; --surface:#ffffffbf; --solid:#fff; --player:#102945; --orb-shadow:#cde8fa; }
:root[data-theme="mint"] { --ink:#164438; --muted:#628178; --blue:#288664; --sky:#e7f7f0; --cream:#fcfffd; --line:#d5e8df; --mint:#e0f5e9; --orange:#fff0d8; --page-a:#f2fcf7; --page-b:#fbfffd; --page-c:#e3f6ec; --hero-a:#daf4e5; --hero-b:#f8fffb; --hero-c:#d5f0e1; --surface:#ffffffc7; --solid:#fff; --player:#123d34; --orb-shadow:#c4ead6; }
:root[data-theme="sunset"] { --ink:#4e3545; --muted:#836d7a; --blue:#b55c76; --sky:#fff0f2; --cream:#fffdf9; --line:#eedde1; --mint:#f9e8ec; --orange:#fff0d8; --page-a:#fff6f1; --page-b:#fffafa; --page-c:#fceddf; --hero-a:#ffe4d9; --hero-b:#fff8f5; --hero-c:#fde6ec; --surface:#ffffffc9; --solid:#fff; --player:#543342; --orb-shadow:#f2c9d3; }
:root[data-theme="midnight"] { --ink:#edf4ff; --muted:#aebed2; --blue:#76b5ff; --sky:#15263e; --cream:#0d1b2e; --line:#334b69; --mint:#173f38; --orange:#443619; --danger:#ff9ca2; --page-a:#07111f; --page-b:#0b1728; --page-c:#101e33; --hero-a:#102b4b; --hero-b:#102039; --hero-c:#152840; --surface:#162942dc; --solid:#172a43; --player:#050b14; --orb-shadow:#274b76; }
:root[data-theme="stadium"] { --ink:#f6f0df; --muted:#c5bda9; --blue:#f0ba39; --sky:#243327; --cream:#19251d; --line:#455548; --mint:#334d38; --orange:#57451d; --danger:#ff9b83; --page-a:#111a13; --page-b:#1a271e; --page-c:#263e2d; --hero-a:#263f2d; --hero-b:#1d3024; --hero-c:#344c37; --surface:#243529d9; --solid:#26382b; --player:#09130c; --orb-shadow:#57633c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:linear-gradient(120deg,var(--page-a) 0%,var(--page-b) 48%,var(--page-c) 100%); color:var(--ink); font-family:"DM Sans",sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.site-header { height:74px; max-width:1160px; margin:auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font-weight:700; text-decoration:none; letter-spacing:-.03em; font-size:20px; display:flex; align-items:center; gap:6px; }.brand small { display:block; margin-top:1px; color:var(--muted); font-size:9px; font-weight:600; letter-spacing:.01em; }.ball { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:0; border-radius:50%; background:var(--blue); color:white; font-size:10px; vertical-align:1px; }
nav { display:flex; gap:26px; margin-left:auto; margin-right:22px; } nav a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; } nav a.active { color:var(--ink); }.theme-control select { appearance:none; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--solid); padding:8px 27px 8px 11px; font-size:13px; font-weight:600; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 13px) 53%,calc(100% - 9px) 53%; background-size:4px 4px,4px 4px; background-repeat:no-repeat; margin-right:8px; }
.admin-trigger,.secondary-button { border:1px solid var(--line); background:var(--solid); color:var(--ink); border-radius:10px; padding:9px 14px; font-weight:600; font-size:14px; }.admin-trigger:hover,.secondary-button:hover { border-color:#a8bed1; }
main { max-width:1112px; margin:0 auto; padding:32px 24px 68px; }.hero { display:flex; align-items:center; justify-content:space-between; min-height:242px; padding:20px 6.5% 25px; border-radius:25px; background:linear-gradient(120deg,var(--hero-a),var(--hero-b) 55%,var(--hero-c)); overflow:hidden; }.eyebrow { margin:0 0 8px; text-transform:uppercase; letter-spacing:.12em; color:var(--blue); font-weight:700; font-size:11px; }.hero h1,h2,h3 { font-family:Fraunces,serif; letter-spacing:-.04em; }.hero h1 { font-size:clamp(38px,6vw,66px); margin:0; line-height:1.02; }.lede { max-width:410px; color:var(--muted); line-height:1.55; margin:14px 0 0; }.hero-orb { width:126px; height:126px; border-radius:50%; background:var(--blue); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(11deg); box-shadow:15px 16px 0 var(--orb-shadow); }.hero-orb span { font-size:12px; font-weight:700; letter-spacing:.14em; }.hero-orb strong { font-family:Fraunces,serif; font-size:55px; line-height:.9; }
.watch-section,.schedule-section { margin-top:52px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }.section-heading h2 { margin:0; font-size:30px; }.quiet-status { color:var(--muted); font-size:13px; padding-bottom:4px; }.player-shell { background:var(--player); border-radius:18px; overflow:hidden; min-height:340px; display:grid; place-items:center; box-shadow:0 16px 40px rgba(19,48,80,.13); }.player-empty { text-align:center; color:white; }.player-empty h3 { font-size:26px; margin:13px 0 6px; }.player-empty p { margin:0; color:#c6d5e5; }.play-mark { display:grid; place-items:center; width:58px; height:58px; margin:auto; padding-left:4px; border-radius:50%; background:#4d91d2; }.player-frame,.player-frame iframe { width:100%; height:100%; min-height:340px; border:0; }.watch-details { min-height:22px; margin-top:13px; font-size:14px; color:var(--muted); }.watch-details strong { color:var(--ink); }.plays { margin-top:30px; }.plays-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:11px; }.plays-heading h3 { margin:0; font-size:23px; }.plays-heading span { font-size:12px; color:var(--muted); }.play-list { background:var(--surface); border-radius:14px; overflow:hidden; }.play-row { display:grid; grid-template-columns:74px 1fr; gap:15px; padding:13px 15px; border-bottom:1px solid var(--line); font-size:13px; line-height:1.45; }.play-row:last-child { border-bottom:0; }.play-time { color:var(--blue); font-size:12px; font-weight:700; }.play-note { color:var(--muted); padding:22px 15px; font-size:13px; }
.week-picker { display:flex; align-items:center; border:1px solid var(--line); background:white; border-radius:10px; overflow:hidden; }.week-picker button { border:0; background:white; color:var(--blue); padding:9px 12px; font-size:17px; }.week-picker button:hover { background:var(--sky); }.week-picker span { font-size:13px; min-width:148px; text-align:center; font-weight:600; }.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }.filter { border:0; background:transparent; padding:8px 11px; color:var(--muted); font-size:13px; font-weight:600; border-radius:8px; }.filter.is-selected { color:var(--ink); background:white; box-shadow:0 1px 4px rgba(28,69,107,.12); }
.game-list { display:grid; gap:10px; }.game-card { display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:22px; padding:16px 18px; background:rgba(255,255,255,.75); border:1px solid transparent; border-radius:15px; transition:.18s ease; }.game-card:hover { transform:translateY(-1px); border-color:var(--line); background:white; }.game-time { font-size:13px; color:var(--muted); line-height:1.4; }.game-time strong { display:block; color:var(--ink); font-size:14px; }.matchup { display:flex; align-items:center; gap:13px; font-weight:700; }.team { min-width:104px; }.at { color:#9aabba; font-weight:500; font-size:13px; }.game-right { min-width:98px; text-align:right; }.game-score { color:var(--ink); font-size:19px; font-weight:800; letter-spacing:-.05em; margin-bottom:5px; }.game-score b { color:var(--muted); margin:0 3px; font-weight:500; }.status { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:5px 7px; border-radius:6px; background:#edf3f7; color:var(--muted); }.status.live { background:var(--mint); color:#177144; }.status.final { background:#f0f1f5; color:#667184; }.watch-button { display:block; margin-top:7px; color:var(--blue); border:0; background:none; padding:0; font-size:13px; font-weight:700; float:right; }.watch-button:disabled { color:#94a8b9; cursor:not-allowed; }.empty-list { color:var(--muted); padding:30px 0; text-align:center; }
footer { border-top:1px solid var(--line); max-width:1112px; margin:auto; padding:20px 24px 32px; font-size:12px; color:var(--muted); }.dialog { border:0; padding:0; background:transparent; max-width:min(94vw,520px); }.dialog::backdrop { background:rgba(15,40,67,.42); backdrop-filter:blur(3px); }.dialog-card { position:relative; border:0; border-radius:18px; padding:34px; background:#fffefa; color:var(--ink); box-shadow:0 20px 60px rgba(11,39,68,.25); }.dialog-card h2 { margin:0; font-size:31px; }.dialog-copy { color:var(--muted); line-height:1.5; font-size:14px; margin:10px 0 24px; }.close { position:absolute; top:13px; right:15px; border:0; background:transparent; color:var(--muted); font-size:26px; }.dialog label { display:block; font-size:13px; font-weight:700; margin:16px 0 7px; }.dialog input,.dialog select,.dialog textarea { width:100%; border:1px solid var(--line); border-radius:9px; padding:11px; background:white; color:var(--ink); }.dialog textarea { resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.45; }.primary-button { border:0; border-radius:10px; background:var(--blue); color:white; width:100%; padding:11px 16px; margin-top:18px; font-weight:700; }.primary-button:hover { background:#1d609f; }.form-error { min-height:18px; margin:8px 0 0; color:var(--danger); font-size:12px; }.manager { width:min(94vw,600px); }.manager-actions { display:flex; gap:10px; margin-top:18px; }.manager-actions button { margin:0; flex:1; }.sign-out { display:block; margin:18px auto 0; color:var(--muted); background:transparent; border:0; text-decoration:underline; font-size:12px; }
@media (max-width:650px) { .site-header { padding:0 18px; } nav { display:none; }.theme-control { margin-left:auto; }.theme-control select { margin-right:7px; width:72px; }.admin-trigger { padding:9px 10px; }.hero { padding:36px 26px; min-height:270px; }.hero-orb { width:92px; height:92px; margin-left:15px; flex:none; }.hero-orb strong { font-size:40px; }.section-heading { align-items:start; flex-direction:column; }.schedule-heading { gap:13px; }.game-card { grid-template-columns:1fr auto; gap:9px 14px; }.game-time { grid-column:1/-1; }.matchup { gap:8px; }.team { min-width:0; }.game-right { min-width:76px; }.player-shell,.player-frame,.player-frame iframe { min-height:220px; }.week-picker span { min-width:144px; }.manager-actions { flex-direction:column-reverse; } main { padding-left:18px; padding-right:18px; } }
.chat { margin-top:30px; }.chat-shell { background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:14px; overflow:hidden; }.chat-messages { min-height:170px; max-height:330px; overflow-y:auto; padding:6px 16px; }.chat-message { padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; line-height:1.45; }.chat-message:last-child { border-bottom:0; }.chat-name { color:var(--blue); font-weight:700; margin-right:6px; }.chat-time { color:var(--muted); font-size:11px; margin-left:7px; }.chat-note { color:var(--muted); font-size:13px; text-align:center; padding:48px 0; }.chat-form { display:grid; grid-template-columns:150px 1fr auto; gap:8px; padding:11px; border-top:1px solid var(--line); background:var(--cream); }.chat-form input { min-width:0; border:1px solid var(--line); border-radius:9px; padding:10px; background:white; color:var(--ink); font-size:13px; }.chat-form .primary-button { width:auto; margin:0; padding:10px 16px; }.chat-guidance { color:var(--muted); font-size:11px; margin:9px 0 0; }@media (max-width:650px) { .chat-form { grid-template-columns:1fr auto; }.chat-form #nickname { grid-column:1/-1; } }
.color-control input { width:36px; height:36px; padding:3px; border:1px solid var(--line); background:var(--solid); border-radius:10px; vertical-align:middle; margin-right:8px; }.color-control input::-webkit-color-swatch-wrapper { padding:0; }.color-control input::-webkit-color-swatch { border:0; border-radius:7px; }:root[data-theme="custom"] body { background:linear-gradient(120deg,color-mix(in srgb,var(--brand,var(--blue)) 13%,white),#fffdf8 48%,color-mix(in srgb,var(--brand,var(--blue)) 8%,white)); }:root[data-theme="custom"] .hero { background:linear-gradient(120deg,color-mix(in srgb,var(--brand,var(--blue)) 18%,white),#f7fcff 55%,color-mix(in srgb,var(--brand,var(--blue)) 12%,white)); }.ball,.hero-orb,.primary-button { background:var(--brand,var(--blue)); }:root[data-theme="custom"] .hero-orb { box-shadow:15px 16px 0 color-mix(in srgb,var(--brand,var(--blue)) 20%,white); }:root[data-theme="custom"] .player-shell { background:color-mix(in srgb,var(--brand,var(--blue)) 72%,#0b1f35); }.play-mark { background:color-mix(in srgb,var(--brand,var(--blue)) 72%,white); }.eyebrow,.watch-button,.play-time,.chat-name { color:var(--brand,var(--blue)); }.theme-control select { margin-right:5px; }@media (max-width:650px) { .color-control input { width:32px; height:32px; margin-right:6px; } }.viewer-count { margin:9px 0 0; color:var(--muted); font-size:13px; }.viewer-count span { color:#29a36a; font-size:16px; vertical-align:-1px; }.viewer-count strong { color:var(--ink); }
.game-card,.chat-shell { background:var(--surface); border-color:var(--line); }.game-card:hover { background:var(--solid); }.week-picker,.week-picker button,.filter.is-selected,.dialog-card,.dialog input,.dialog select,.dialog textarea,.chat-form,.chat-form input { background:var(--solid); color:var(--ink); }