/* sushibet.co -- "Kawaii Bento" theme
   Shared stylesheet for index.html, games/*.html, about.html, power-ratings.html.
   Copied verbatim into site/dist/static/style.css by generate_site.py at build time.
*/

:root{
  --sky:#a2d8f4; --cream:#fffaf0; --ink:#241a13; --ink-dim:#7a6a58; --navy:#1c3a52;
  --orange:#e8763a; --red:#c0392b; --gold:#e0a83c; --green:#2f8f6f;
  /* confidence ramp: 0.5u (muted, low-key) -> 5.0u (gold, called shot) --
     same family throughout so it reads as one continuous "heat" scale,
     not an arbitrary color swap. */
  --c05:#5c4a44; --c10:#6e4038; --c15:#7f382e; --c20:#8f3226; --c25:#a02b1e;
  --c30:#b12a18; --c35:#c23616; --c40:#d14a17; --c45:#de6b1a; --c50:#e8a83a;
  --cnone:#7f96a3; /* no-play: neutral, deliberately outside the ramp */
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--sky);
  background-image:
    radial-gradient(ellipse 900px 500px at 12% -10%, #c7ecfbaa, transparent 60%),
    radial-gradient(ellipse 800px 600px at 105% 15%, #82c2e455, transparent 55%);
  background-attachment:fixed;
  font-family:"Trebuchet MS","Segoe UI",ui-rounded,system-ui,sans-serif;
  color:var(--ink);
}
a{ color:inherit; }
.wrap{ max-width:1180px; margin:0 auto; padding:28px 20px 70px; }
.wrap.narrow{ max-width:920px; }

/* ---- top bar / brand ---- */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand .word{ font-size:22px; font-weight:800; color:var(--navy); display:inline-flex; align-items:center; gap:2px; }
.brand .word .bet-pill{ background:var(--navy); color:var(--cream); font-size:13px; font-weight:800; padding:2px 9px; border-radius:20px; }
.nav{ display:flex; gap:8px; flex-wrap:wrap; }
.nav a{ font-size:12.5px; font-weight:700; color:var(--navy); text-decoration:none; background:#fffaf0; border:2px solid var(--navy); border-radius:20px; padding:7px 14px; }
.back{ font-size:12.5px; font-weight:700; color:var(--navy); text-decoration:none; background:#fffaf0; border:2px solid var(--navy); border-radius:20px; padding:7px 14px; display:inline-block; }

.mascot{ width:44px; height:44px; flex-shrink:0; border-radius:50%; object-fit:cover; object-position:58% 32%; display:block; }
.mascot.small{ width:40px; height:40px; }
.hero-icon{ width:56px; height:56px; flex-shrink:0; }

/* ---- hero / card shell ---- */
.hero, .card{ background:var(--cream); border:3px solid var(--navy); border-radius:18px; box-shadow:6px 6px 0 var(--navy); padding:18px 24px; margin-bottom:22px; }
.hero{ display:flex; align-items:center; gap:16px; }
.hero h1{ font-size:18px; margin:0 0 4px; }
.hero p{ font-size:12.5px; color:var(--ink-dim); margin:0; line-height:1.5; max-width:680px; }
.card{ padding:22px 26px; }
.card h2.h{ font-size:14px; color:var(--navy); margin:0 0 4px; }
.card .sub-h{ font-size:11.5px; color:#1c3a52b0; margin:0 0 12px; }

/* ---- section headers ---- */
.section{ margin-bottom:14px; }
.section-head{ display:flex; align-items:baseline; gap:10px; margin:0 4px 12px; flex-wrap:wrap; }
.section-head h2{ font-size:16px; color:var(--navy); margin:0; }
.section-head .tag{ font-size:11px; font-weight:700; color:#7e1d13; background:var(--gold); padding:3px 10px; border-radius:20px; }
.section-note{ font-size:12px; color:#1c3a52b0; margin:-6px 4px 18px; max-width:700px; line-height:1.5; }

/* ---- filter toggle ---- */
.filter-toggle{ display:flex; align-items:center; gap:8px; margin-left:auto; font-size:12.5px; font-weight:700; color:var(--navy); background:#fffaf0; border:2px solid var(--navy); border-radius:20px; padding:6px 14px 6px 10px; cursor:pointer; user-select:none; }
.filter-toggle input{ width:15px; height:15px; accent-color:var(--red); cursor:pointer; }

/* ---- sort/filter dropdowns ---- */
.select-pill{ font-size:12.5px; font-weight:700; color:var(--navy); background:#fffaf0; border:2px solid var(--navy); border-radius:20px; padding:6px 10px; cursor:pointer; font-family:inherit; }

/* ---- rank badge (top-25 power rating) ---- */
.rank{ display:inline-flex; align-items:center; gap:2px; font-size:9.5px; font-weight:800; color:#8a5a12; background:#e0a83c2e; border:1px solid #e0a83c66; border-radius:9px; padding:1px 6px; margin-right:3px; white-space:nowrap; }
.rank.big{ font-size:12px; padding:2px 8px; border-radius:10px; }

/* ---- game tiles (bento) ---- */
.playgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:34px; align-items:start; }
.play{ border-radius:14px; padding:6px; }
.play summary{ list-style:none; cursor:pointer; padding:13px 15px 11px; display:block; background:var(--cream); border-radius:9px; }
.play[open] summary{ border-radius:9px 9px 0 0; }
.play summary::-webkit-details-marker{ display:none; }

.play .teamrow{ display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; gap:8px; }
.play .teams{ font-size:11.5px; font-weight:700; color:var(--ink-dim); }
.play .units{ font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:11px; font-weight:800; color:#fff; padding:2px 8px; border-radius:20px; white-space:nowrap; flex-shrink:0; }

.play .pickline{ font-size:19px; font-weight:800; line-height:1.2; color:var(--ink); margin-bottom:2px; }
.play .pickline.second{ font-size:15px; margin-top:2px; }
.play .sub{ font-size:11px; color:var(--ink-dim); line-height:1.4; }
.play .sub.kickoff-line{ margin-bottom:2px; }
.play .sub.score-line{ font-weight:700; color:var(--ink); margin-bottom:8px; }
.play .mkt-label{ font-weight:700; color:var(--ink); text-transform:uppercase; font-size:9.5px; letter-spacing:0.03em; margin-right:2px; }
.play .noplay-txt{ font-size:14px; font-weight:700; color:var(--ink-dim); }

.play .foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:8px; border-top:1.5px dashed #24191a1c; }
.play .expand-hint{ font-size:10.5px; font-weight:700; color:#24191a70; }
.play[open] .expand-hint .arrow{ transform:rotate(180deg); }
.play .arrow{ display:inline-block; transition:transform 0.15s; }
.play .fullbtn{ font-size:10.5px; font-weight:800; color:var(--red); text-decoration:none; display:inline-flex; align-items:center; gap:3px; }
.play .fullbtn:hover{ text-decoration:underline; }

.play .expandpanel{ padding:12px 15px 15px; border-top:2px dashed #24191a16; background:#f3ecd9; border-radius:0 0 9px 9px; }
.play .stat-row{ display:flex; justify-content:space-between; gap:10px; font-size:11px; padding:3px 0; }
.play .stat-row .k{ color:var(--ink-dim); flex-shrink:0; }
.play .stat-row .v{ font-weight:700; text-align:right; }
.play .narrative{ font-size:11px; color:#5c3d1e; background:#e8763a1c; border:1px solid #e8763a3c; border-radius:8px; padding:8px 10px; margin-top:8px; line-height:1.5; }
.play .badges{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }

.play.noplay summary{ opacity:0.85; cursor:default; }
.play.noplay .units{ background:var(--cnone) !important; }
.play.hidden{ display:none !important; }

.best-tag{ font-size:9.5px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:#8a5a12; margin-bottom:4px; display:block; }

/* ---- badge pills (QB change / weather) ---- */
.pill{ font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:20px; border:1.5px solid; cursor:help; }
.pill.qb{ color:#8a2418; background:#8a241812; border-color:#8a241840; }
.pill.wx{ color:#1d6b8f; background:#1d6b8f12; border-color:#1d6b8f40; }

/* ---- live results strip ---- */
.stat-strip{ display:flex; gap:26px; flex-wrap:wrap; }
.stat-strip .stat{ text-align:left; }
.stat-strip .stat .num{ font-size:22px; font-weight:800; color:var(--green); font-family:ui-monospace,monospace; }
.stat-strip .stat .lbl{ font-size:11px; color:var(--ink-dim); margin-top:2px; }

/* ---- game-detail page: compare boxes ---- */
.matchup-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:10px; }
.matchup-head h1{ font-size:22px; margin:0; }
.meta{ font-size:12px; color:var(--ink-dim); }

.compare{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:6px; }
.compare .box{ background:#f3ecd9; border-radius:10px; padding:12px 14px; text-align:center; }
.compare .box .l{ font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim); font-weight:700; margin-bottom:5px; }
.compare .box .v{ font-size:18px; font-weight:800; }
.compare .box.pick{ background:var(--gold); }
.compare .box.pick .v{ color:#4a2f00; }

.narratives{ display:flex; flex-direction:column; gap:8px; }
.narrative-box{ font-size:12.5px; color:#5c3d1e; background:#e8763a1c; border:1px solid #e8763a3c; border-radius:10px; padding:10px 14px; line-height:1.55; }
.no-notable{ font-size:12.5px; color:var(--ink-dim); }

table.stats{ width:100%; border-collapse:collapse; font-size:12px; }
table.stats th{ text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-dim); font-weight:700; padding:6px 8px; border-bottom:2px solid #24191a1e; }
table.stats th.num{ text-align:right; }
table.stats td{ padding:8px 8px; border-bottom:1px solid #24191a12; }
table.stats td.num{ text-align:right; font-weight:700; font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:11px; }
table.stats td.cat{ color:var(--ink-dim); }
table.stats tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }

/* ---- last-5 results ---- */
.l5wrap{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.l5team{ font-size:13px; font-weight:800; margin-bottom:8px; }
.l5row{ display:flex; gap:6px; flex-wrap:wrap; }
.l5chip{ background:#f3ecd9; border-radius:8px; padding:6px 9px; font-size:10.5px; min-width:64px; }
.l5chip .res{ font-weight:800; font-family:ui-monospace,monospace; }
.l5chip .res.w{ color:var(--green); }
.l5chip .res.l{ color:var(--red); }
.l5chip .opp{ color:var(--ink-dim); font-size:9.5px; margin-top:2px; }
.l5chip .tags{ display:flex; gap:4px; margin-top:5px; }
.tag-dot{ font-size:9px; font-weight:800; padding:1px 5px; border-radius:6px; }
.tag-dot.ats-y{ background:#2f8f6f22; color:#1e6b52; }
.tag-dot.ats-n{ background:#c0392b22; color:#8a2418; }
.tag-dot.ou-o{ background:#1d6b8f1e; color:#1d6b8f; }
.tag-dot.ou-u{ background:#6b4a1e22; color:#7a4a1e; }
.no-l5{ font-size:12px; color:var(--ink-dim); }

/* ---- about page ---- */
.panel-list{ display:flex; flex-direction:column; gap:20px; }
.card p{ font-size:13px; line-height:1.65; color:var(--ink); margin:0 0 10px; }
.card p:last-child{ margin-bottom:0; }
.card ul{ margin:0 0 10px; padding-left:20px; font-size:13px; line-height:1.65; }
.callout{ border-left:4px solid var(--gold); background:#e0a83c14; padding:10px 16px; border-radius:0 8px 8px 0; font-size:12.5px; color:#5c3d1e; margin:12px 0; }
.badge-demo, .weather-demo{ font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:20px; border:1.5px solid; display:inline-block; }
.badge-demo{ color:#8a2418; background:#8a241812; border-color:#8a241840; }
.weather-demo{ color:#1d6b8f; background:#1d6b8f12; border-color:#1d6b8f40; }
.updated{ font-size:11px; color:var(--ink-dim); text-align:center; margin-top:10px; }

footer{ text-align:center; color:#1c3a5299; font-size:11.5px; margin-top:20px; line-height:1.7; }
footer a{ color:var(--navy); font-weight:700; }