/* shared/base.css — the look of every Beat the Shark game. Copied from the football game's index.html (6 Oct 2026); the football game keeps its own inline copy until it moves onto the shared core. */
  :root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
    --bg:#eceadf;--panel:#fffdf8;--panel2:#f6f3e9;--ink:#122a1c;--ink2:#47574b;--mute:#8b9a8e;--line:#dcd7c6;
    --pitch:#173a26;--pitch2:#2d6b48;--amber:#c9901a;--red:#a8322b;--blue:#2b5877;--good:#2d6b48;--bad:#a8322b;
    --onPitch:#f6f4ea;--paper:#f4f1e4;--paperink:#1a1a17;
    --disp:"Barlow Condensed",Impact,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
    --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --bg:#0d120e;--panel:#161d17;--panel2:#1c241d;--ink:#e9e5d7;--ink2:#b4bfb5;--mute:#7c8a7e;--line:#2a332a;
    --pitch:#245c3c;--pitch2:#43976a;--amber:#e3b03c;--red:#d96a61;--blue:#6fa3c9;--good:#43976a;--bad:#d96a61;
    --onPitch:#f2efe4;--paper:#e8e4d6;--paperink:#16160f;}}
  :root[data-theme="dark"]{--bg:#0d120e;--panel:#161d17;--panel2:#1c241d;--ink:#e9e5d7;--ink2:#b4bfb5;--mute:#7c8a7e;
    --line:#2a332a;--pitch:#245c3c;--pitch2:#43976a;--amber:#e3b03c;--red:#d96a61;--blue:#6fa3c9;--good:#43976a;--bad:#d96a61;
    --onPitch:#f2efe4;--paper:#e8e4d6;--paperink:#16160f;}
  *,*::before,*::after{box-sizing:inherit}
  html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
  body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
  .wrap{max-width:560px;margin:0 auto;padding:0 13px 34px}
  header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;
    background:linear-gradient(180deg,var(--pitch),color-mix(in srgb,var(--pitch) 84%,black));
    color:var(--onPitch);margin:0 -13px 11px;padding:9px 13px 10px;border-bottom:3px solid var(--amber)}
  .homelink{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--amber);text-decoration:none;margin:-2px 0 6px;opacity:.9}
  .homelink:hover{opacity:1;text-decoration:underline}
  .hmain{display:flex;align-items:center;gap:11px}
  .bigscore{font-family:var(--disp);font-size:40px;font-weight:700;line-height:.95;min-width:56px}
  .bigscore .sub{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;opacity:.7;font-weight:400;margin-top:3px}
  .twos{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;flex:1}
  .two{background:rgba(255,255,255,.11);border-radius:7px;padding:5px 8px 6px}
  .two .k{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.74}
  .two .v{font-family:var(--mono);font-size:15px;font-weight:600;line-height:1.2}
  .two .v.neg{color:#ffb3ab}
  .two .pts{font-family:var(--mono);font-size:9px;opacity:.7}
  .trend{font-family:var(--mono);font-size:12px;padding:1px 6px;border-radius:4px;white-space:nowrap}
  .trend.up{background:rgba(127,211,162,.22);color:#9ce0b9}
  .trend.dn{background:rgba(224,138,128,.22);color:#f0a89f}
  .trend.fl{background:rgba(255,255,255,.12);opacity:.8}
  .season{margin-top:9px}
  .season .lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;opacity:.82;margin-bottom:3px}
  .track{height:5px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
  .track i{display:block;height:100%;background:var(--amber);transition:width .4s ease}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px;margin-bottom:11px}
  .datechip{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:600}
  h1{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.1;margin:6px 0 9px}
  h2{font-family:var(--disp);font-weight:700;font-size:20px;margin:0 0 9px}
  p{margin:0 0 10px;color:var(--ink2)}p.lede{color:var(--ink);font-size:16.5px}.small{font-size:13px}
  button{font:inherit;cursor:pointer}
  .choice{display:block;width:100%;text-align:left;background:var(--panel2);color:var(--ink);
    border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px;transition:.12s}
  .choice:hover{border-color:var(--pitch2);background:var(--panel)}
  .choice:disabled{opacity:.42;cursor:not-allowed}
  .choice .t{font-weight:600;font-size:15px;display:block;color:var(--ink)}
  .choice .d{font-size:12.5px;color:var(--mute);margin-top:2px;display:block}
  .choice.primary{background:var(--pitch);border-color:var(--pitch);color:var(--onPitch)}
  .choice.primary .t{color:var(--onPitch)}.choice.primary .d{color:rgba(246,244,234,.78)}
  .outcome{border-left:3px solid var(--pitch2);background:color-mix(in srgb,var(--pitch2) 9%,transparent);
    padding:9px 11px;border-radius:0 6px 6px 0;margin:0 0 10px;font-size:14.5px;color:var(--ink)}
  .delta{font-family:var(--mono);font-size:12px;margin-top:7px;display:flex;flex-wrap:wrap;gap:4px 11px}
  .up{color:var(--good)}.down{color:var(--bad)}
  .est{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
  /* squad rows with quality + condition */
  .sq{display:flex;flex-direction:column;gap:5px;margin:4px 0 11px}
  .pl{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13.5px}
  .pl.me{outline:1.5px solid var(--amber)}
  .pl.gone{opacity:.38;text-decoration:line-through}
  .pl .pos{font-family:var(--mono);font-size:10px;color:var(--onPitch);background:var(--pitch2);border-radius:3px;padding:1px 5px;flex:none}
  .pl .nm{flex:1;font-weight:500;min-width:0}
  .pl .nm small{display:block;font-size:11px;color:var(--mute);font-weight:400}
  .pl .stat{text-align:right;flex:none;width:56px}
  .pl .stat .lb{font-family:var(--mono);font-size:8px;letter-spacing:.07em;color:var(--mute);text-transform:uppercase}
  .pl .stat .vv{font-family:var(--mono);font-size:13px;font-weight:600}
  .pips{display:flex;gap:2px;justify-content:flex-end;margin-top:2px}
  .pips i{width:6px;height:6px;border-radius:1px;background:var(--line);display:block}
  .pips i.on{background:var(--pitch2)}
  .pips i.hot{background:var(--amber)}
  .pips i.bad{background:var(--bad)}
  .market{border:1px solid var(--line);border-radius:9px;padding:10px 11px;margin-bottom:8px;background:var(--panel2)}
  .market .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .market .nm{font-weight:600}
  .market .fee{font-family:var(--mono);font-weight:600}
  .market .meta{font-size:12.5px;color:var(--mute);margin-top:2px}
  .market .quip{font-size:13px;color:var(--ink2);margin-top:6px;font-style:italic}
  .paper{background:var(--paper);color:var(--paperink);border-radius:9px;padding:14px 15px;margin-bottom:10px;border:1px solid rgba(0,0,0,.12)}
  .paper .masthead{font-family:var(--disp);font-size:15px;letter-spacing:.12em;text-transform:uppercase;
    border-bottom:2px solid var(--paperink);padding-bottom:4px;margin-bottom:8px;display:flex;justify-content:space-between}
  .paper .hl{font-family:var(--disp);font-size:28px;line-height:1.02;font-weight:700;margin:0 0 6px;text-transform:uppercase}
  .paper .standfirst{font-size:13.5px;color:#3a3a32;margin:0}
  .paper .byline{font-family:var(--mono);font-size:10px;color:#5a5a50;margin-top:7px}
  .pod{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:10px}
  .pod .show{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
  .quote{display:flex;gap:9px;margin-bottom:9px}
  .quote .who{font-family:var(--mono);font-size:10.5px;color:var(--mute);width:54px;flex:none;padding-top:2px;text-align:right}
  .quote .said{flex:1;font-size:14px;color:var(--ink);font-style:italic}
  .shark{display:flex;gap:9px;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--amber);
    border-radius:0 8px 8px 0;padding:9px 11px;margin:0 0 11px;font-size:13.5px;color:var(--ink2)}
  .shark b{color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;display:block;margin-bottom:2px}
  .beat{text-align:center;color:var(--mute);font-family:var(--mono);font-size:11px;letter-spacing:.14em;margin:12px 0;opacity:.75}
  .vp{font-family:var(--mono);font-size:13.5px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px;min-height:160px}
  .vp .teams{display:flex;justify-content:space-between;font-weight:600;font-size:13.5px;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .ln{display:flex;gap:9px;padding:3px 0;animation:fade .25s}
  .ln .min{width:36px;color:var(--mute);flex:none}.ln .tx{flex:1}.ln .sc{font-weight:600}
  .ln.goal .tx{color:var(--pitch2);font-weight:600}.ln.against .tx{color:var(--bad)}
  .ln.ft{margin-top:6px;padding-top:7px;border-top:1px solid var(--line);font-weight:600;color:var(--ink)}
  @keyframes fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1}}
  .res{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;padding:6px 8px;border-radius:7px;background:var(--panel2);margin-bottom:5px}
  .res.mine{outline:1.5px solid var(--amber)}
  .res .sc{font-family:var(--mono);font-weight:600;flex:none}
  .tbl{width:100%;border-collapse:collapse;font-size:13px}
  .tbl th{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:left;padding:4px 3px;border-bottom:1px solid var(--line)}
  .tbl td{padding:5px 3px;border-bottom:1px solid var(--line)}
  .tbl td.n,.tbl th.n{text-align:right;font-family:var(--mono)}
  .tbl tr.me td{background:color-mix(in srgb,var(--amber) 16%,transparent);font-weight:600}
  .tbl tr.rel td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
  .tbl tr:last-child td{border-bottom:0}
  .verdict{font-family:var(--disp);font-size:32px;font-weight:700;line-height:1.05;margin:2px 0 6px}
  .verdict.ok{color:var(--good)}.verdict.fail{color:var(--bad)}
  .brk{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .brk .bk{font-size:13.5px;width:120px;flex:none;color:var(--ink2)}
  .brk .bb{flex:1;height:10px;border-radius:5px;background:var(--line);overflow:hidden}
  .brk .bb i{display:block;height:100%;background:var(--pitch2)}
  .brk .bv{font-family:var(--mono);font-size:12.5px;width:52px;text-align:right;flex:none}
  .opt{border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;margin-bottom:8px;background:var(--panel2);width:100%;text-align:left;color:var(--ink)}
  .opt .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
  .opt h3{font-family:var(--disp);font-size:21px;margin:3px 0 4px;font-weight:700}
  .opt p{margin:0;font-size:13.5px}
  .opt .mis{font-size:12.5px;color:var(--ink);margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
  .opt .mis b{color:var(--amber)}
  .seed{font-family:var(--mono);font-size:10.5px;color:var(--mute);text-align:center;margin-top:14px}
  .foot{font-size:11.5px;color:var(--mute);text-align:center;margin-top:12px;line-height:1.55}
  /* ---- pitch view and bench ---- */
  .pitchbox{margin:6px 0 11px}
  .pitch{background:linear-gradient(180deg,#2e6b43,#285f3b);border-radius:10px;padding:8px 5px;
    display:flex;flex-direction:column;gap:7px;position:relative;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
  .pitch::before{content:"";position:absolute;left:8%;right:8%;top:50%;border-top:2px solid rgba(255,255,255,.18)}
  .prow{display:flex;justify-content:center;gap:4px;position:relative}
  .chip{flex:1;max-width:108px;min-width:0;background:rgba(10,24,15,.78);color:#f4f1e6;border:1.5px solid rgba(255,255,255,.25);
    border-radius:7px;padding:4px 4px 5px;text-align:center;font:inherit;cursor:default}
  .chip[data-xi]{cursor:pointer}
  .chip.oop{border-color:#e8b45c}
  .chip.sel{border-color:#9ce0b9;box-shadow:0 0 0 2px #9ce0b9}
  .chip.me{border-color:var(--amber)}
  .chip .cn{display:block;font-size:10.5px;font-weight:600;line-height:1.15;min-height:24px;
    display:flex;align-items:center;justify-content:center}
  .chip .cs{display:block;font-family:var(--mono);font-size:10px;opacity:.9;margin-top:2px}
  .chip .cs b{color:#f0c87e;font-weight:600}
  .cb{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.2);margin:3px auto 0;overflow:hidden;width:80%}
  .cb i{display:block;height:100%}
  .benchh{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin:10px 0 5px}
  .bench{display:flex;flex-direction:column;gap:4px}
  .bp{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
    padding:6px 9px;font:inherit;color:var(--ink);text-align:left;cursor:default}
  .bp[data-bench]{cursor:pointer}.bp[data-bench]:hover{border-color:var(--pitch2)}
  .bp.out{opacity:.55}.bp.me{outline:1.5px solid var(--amber)}
  .bp .bpos{font-family:var(--mono);font-size:10px;color:var(--onPitch);background:var(--pitch2);border-radius:3px;padding:1px 5px;flex:none}
  .bp .bn{flex:1;font-size:13px;font-weight:500;min-width:0}
  .bp .bn small{display:block;font-size:11px;color:var(--mute);font-weight:400}
  .bp .bq{font-family:var(--mono);font-size:13px;font-weight:600}
  .bp .cb{width:34px;margin:0;flex:none}
  .xibar{font-size:12.5px;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin-bottom:8px}
  /* ---- static footer (crawlable text + links into the site) ---- */
  .about{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink2)}
  .about h2{font-size:17px;margin:0 0 7px}
  .about ul{margin:0 0 10px;padding-left:18px}
  .about li{margin-bottom:4px}
  .about a{color:var(--pitch2)}
  /* Your Team, unmissable in every table */
  .tbl tr.me td{background:color-mix(in srgb,var(--amber) 30%,transparent);font-weight:700;color:var(--ink)}
  .tbl tr.me td:first-child{box-shadow:inset 4px 0 0 var(--amber)}
  .you{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;font-weight:700;
    background:var(--amber);color:#1a1a17;border-radius:3px;padding:1px 4px;margin-left:5px;vertical-align:1px}
  /* ---- the pitch, mirroring the site's Starting Lineups ---- */
  .pitch2{position:relative;width:100%;aspect-ratio:3/4;max-height:520px;background:#1d4a30;border:2px solid #2d6b48;
    border-radius:9px;overflow:hidden;margin:0 auto}
  .pitch2 .ln-half{position:absolute;left:12px;right:12px;top:50%;border-top:1px solid rgba(246,244,234,.25)}
  .pitch2 .ln-circle{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);
    border:1px solid rgba(246,244,234,.25);border-radius:50%}
  .pitch2 .ln-box{position:absolute;left:50%;width:40%;height:9%;transform:translateX(-50%);border:1px solid rgba(246,244,234,.25)}
  .pitch2 .ln-box.top{top:0;border-top:0}.pitch2 .ln-box.bot{bottom:0;border-bottom:0}
  .pm{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;
    background:none;border:0;padding:0;font:inherit;color:#f6f4ea;cursor:default;width:22%;max-width:96px}
  .pm[data-xi]{cursor:pointer}
  .pm .dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:11px;font-weight:600;background:#245c3c;border:2px solid rgba(246,244,234,.7)}
  .pm:hover .dot{border-color:var(--amber)}
  .pm.sel .dot{background:var(--amber);border-color:#f0c87e;color:#1a1a17}
  .pm.me .dot{box-shadow:0 0 0 2px var(--amber)}
  .dot.advanced{border-color:#34d399}.dot.deeper{border-color:#dc5a4f}
  .dot.sm{display:inline-block;width:9px;height:9px;border-width:2px;background:none;vertical-align:-1px}
  .pm .pn{font-size:9.5px;font-weight:500;line-height:1.1;text-align:center;max-width:100%;overflow:hidden;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pm .pq{font-family:var(--mono);font-size:8.5px;opacity:.8;display:flex;align-items:center;gap:3px}
  .cb2{display:inline-block;width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
  .cb2 i{display:block;height:100%}
  .pm .pr{font-family:var(--mono);font-size:8.5px;text-transform:uppercase;color:#f0c87e}
  .pm .pr .up{color:#34d399;margin-left:2px}.pm .pr .dn{color:#dc5a4f;margin-left:2px}
  .pm .psp{font-family:var(--mono);font-size:8.5px;font-weight:600;color:#f0c87e}
  .pm .pf{font-family:var(--mono);font-size:8.5px;text-transform:uppercase;color:#7cb9e8}
  .plegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:10.5px;color:var(--mute);margin:6px 2px 0}
  .tip{border-left:3px solid #34d399;background:color-mix(in srgb,#34d399 8%,transparent);border-radius:0 7px 7px 0;
    padding:8px 11px;margin:8px 0;font-size:13px;color:var(--ink)}
  .tip b{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:2px;color:var(--ink2)}
  .tip a{color:var(--pitch2)}
  .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:6px 0 8px}
  .strip div{border-radius:6px;padding:5px 4px;text-align:center;font-size:11px;color:#f6f4ea}
  .strip b{display:block;font-family:var(--mono);font-size:10px;opacity:.85}
  /* ---- the season dashboard ---- */
  .kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:10px 0}
  @media (min-width:520px){.kpis{grid-template-columns:repeat(4,1fr)}}
  .kpi{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 9px 6px;min-width:0}
  .kpi .kl{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
  .kpi .kb{font-family:var(--disp);font-size:24px;font-weight:700;line-height:1.1}
  .kpi .ks{font-size:11px;color:var(--ink2);margin-bottom:3px;min-height:15px}
  /* "Why?" fold-outs */
  details.why{margin:10px 0;border-top:1px solid var(--line);padding-top:6px}
  details.why>summary{cursor:pointer;color:var(--pitch2);font-size:12.5px;list-style:none}
  details.why>summary::before{content:"+ ";font-family:var(--mono)}
  details.why[open]>summary::before{content:"\2212  "}
  details.why>.whybody{margin-top:6px}
  /* consequence tags */
  .tag{display:inline-block;margin:3px 5px 3px 0;padding:3px 9px;border-radius:999px;font-size:12.5px;font-weight:600;
    background:var(--panel2);border:1px solid var(--line);color:var(--ink2)}
  .tag.up{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent)}
  .tag.down{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
  /* theatrical opening */
  .hero{text-align:center;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--amber) 16%,var(--panel2)) 0%,var(--panel2) 60%)}
  .hero-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--amber);margin-bottom:6px}
  .mission{font-family:var(--disp);font-size:34px;font-weight:700;line-height:1.05;letter-spacing:.01em}
  .bigstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 12px}
  .bigstat{font-family:var(--disp);font-size:52px;font-weight:700;line-height:1}
  .bigstat.neg{color:var(--bad)}
  .biglabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:4px}
  /* big cash, with its change */
  .two.cash .cashv{font-family:var(--disp);font-size:38px;font-weight:700;line-height:1}
  .two.cash .cashd{font-family:var(--mono);font-size:14px;font-weight:700;margin-top:2px}
  .two.cash .cashd.up{color:#7ee2a8}.two.cash .cashd.down{color:#ffb3ab}
  /* pay day, announced */
  .payday{margin:14px 0 12px;padding:12px;border-radius:10px;border:1.5px solid color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 7%,transparent);text-align:center}
  .payday .payamt{font-family:var(--disp);font-size:44px;font-weight:700;line-height:1;color:var(--bad)}

/* stat label above its value, in buttons as in divs */
.pl .stat .lb,.pl .stat .vv{display:block}