/* The Coefficient: PWA UI. Built ONLY from game.css tokens (STYLE.md) and .gx-* components, so the
 * install banner, settings sheet, stars, spoiler blur and offline page follow Arcade / Broadcast / Manager.
 * Load after game.css. Fallback values keep it readable if game.css is missing. No external assets. */

/* ---------- optional light/dark override of a look ----------
 * data-color-scheme is the mode actually shown (pwa.js + PWA_BOOT). Each look keeps its designed mode
 * unless the visitor picks Device/Dark/Light. Only these mismatches need new token values: */
html[data-theme="arcade"][data-color-scheme="light"],
html:not([data-theme])[data-color-scheme="light"]{      /* "Arcade Day" */
  --bg:#eef1ff; --bg-2:#e2e6fb; --surface:#ffffff; --surface-2:#f3f5ff; --surface-3:#dfe4ff;
  --text:#0b0e2e; --text-dim:#454b7a; --line:rgba(30,40,140,.14); --line-strong:rgba(30,40,140,.32);
  --accent:#00875e; --accent-ink:#ffffff; --accent-2:#0060a8; --highlight:#9a4f00; --hot:#c8146a;
  --live:#c8002a; --win:#0a8a50; --draw:#5f6690; --loss:#c41d36;
  --hdr-bg:rgba(238,241,255,.9); --hdr-text:#0b0e2e; --hdr-accent:#00875e; --bar-track:rgba(11,14,46,.1);
  --glow:0 6px 18px rgba(0,135,94,.18); --glow-2:0 4px 14px rgba(0,96,168,.14); --shadow:0 10px 28px rgba(11,14,46,.12);
  --band-elite:#00875e; --band-good:#0060a8; --band-ok:#9a6200; --band-low:#c41d36;
  color-scheme:light;
}
html[data-theme="manager"][data-color-scheme="light"]{  /* "Manager Paper" */
  --bg:#f1f2f4; --bg-2:#e6e8ec; --surface:#ffffff; --surface-2:#f6f7f9; --surface-3:#e2e5ea;
  --text:#1b1d22; --text-dim:#525866; --line:rgba(0,0,0,.09); --line-strong:rgba(0,0,0,.22);
  --accent:#2a7f41; --accent-ink:#ffffff; --accent-2:#1f5fb0; --highlight:#805d00; --hot:#c0473a;
  --live:#c8352a; --win:#2a7f41; --draw:#6b717c; --loss:#c0392b;
  --hdr-bg:#ffffff; --hdr-text:#1b1d22; --hdr-accent:#2a7f41; --bar-track:rgba(0,0,0,.07); --shadow:0 1px 4px rgba(0,0,0,.12);
  --band-elite:#2a7f41; --band-good:#5c8a1f; --band-ok:#8a6a00; --band-low:#c0392b;
  color-scheme:light;
}
html[data-theme="broadcast"][data-color-scheme="dark"]{  /* "Broadcast Night" */
  --bg:#06132b; --bg-2:#0a1b3a; --surface:#0f2247; --surface-2:#142a56; --surface-3:#1b3568;
  --text:#eef3ff; --text-dim:#a9b8d8; --line:rgba(143,216,255,.14); --line-strong:rgba(143,216,255,.32);
  --accent:#3d8bff; --accent-ink:#ffffff; --accent-2:#8fd8ff; --highlight:#ffb057; --hot:#ff4d7d;
  --live:#ff4d5e; --win:#2fc47e; --draw:#8e9bb8; --loss:#ff5b70;
  --bar-track:rgba(255,255,255,.08); --glow:0 6px 18px rgba(61,139,255,.25); --glow-2:0 4px 14px rgba(143,216,255,.18);
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --band-elite:#2fc47e; --band-good:#3d8bff; --band-ok:#ffb057; --band-low:#ff5b70;
  color-scheme:dark;
}

.pwa-hidden{display:none!important}

/* ---------- favorites ---------- */
.pwa-star{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:0 2px;
  font:700 1rem/1 var(--f-ui,system-ui);color:var(--text-dim,#aab3cf);opacity:.6;cursor:pointer;border-radius:var(--radius,6px);
  user-select:none;-webkit-tap-highlight-color:transparent}
.pwa-star:hover{opacity:1;color:var(--highlight,#ffd23f)}
.pwa-star:focus-visible{opacity:1;outline:3px solid var(--highlight,#ffd23f);outline-offset:-2px}
.pwa-star.on{color:var(--highlight,#ffd23f);opacity:1;text-shadow:var(--glow-2,none)}
.mrow.is-fav-match{background:color-mix(in srgb,var(--highlight,#ffd23f) 9%,transparent);box-shadow:inset 4px 0 0 var(--highlight,#ffd23f)}
.pwa-filter-note{color:var(--text-dim,#aab3cf);font:700 .9rem var(--f-ui,system-ui);text-transform:var(--case-ui,uppercase);letter-spacing:var(--track-ui,.06em);margin-top:14px}

/* ---------- spoilers ---------- */
html[data-spoilers="hide"] [data-spoiler]:not(.pwa-revealed){filter:blur(10px);cursor:pointer;user-select:none;transition:filter .2s}
html[data-spoilers="hide"] .card[data-spoiler]:not(.pwa-revealed) *{pointer-events:none}
html[data-spoilers="hide"] .video[data-spoiler]:not(.pwa-revealed) iframe{pointer-events:none}
/* until pwa.js (deferred) has marked spoilers, blur the known score spots so nothing flashes */
html[data-spoilers="hide"]:not([data-pwa="ready"]) :is(.mrow:not([data-state="pre"]) .sc,.board:not([data-state="pre"]) .sc,.hlcard img,.hlcard strong,.events,.video,.mrow:not([data-state="pre"]) .gx-pickmark){filter:blur(10px)}

/* ---------- floating settings button + sheet (uses .gx-btn) ---------- */
.pwa-fab.gx-btn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;width:52px;min-width:52px;height:52px;padding:0;font-size:1.4rem;box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.4))}
.pwa-settings{position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:91;width:min(340px,calc(100vw - 32px));
  background:var(--surface,#10133a);color:var(--text,#fff);border:2px solid var(--line-strong,rgba(255,255,255,.3));border-radius:var(--radius-lg,8px);
  padding:14px 16px;box-shadow:var(--shadow,0 14px 40px rgba(0,0,0,.55)),var(--glow-2,none);font:400 .95rem/1.4 var(--f-body,system-ui)}
.pwa-settings[hidden]{display:none}
.pwa-h{margin:0 0 6px;font-family:var(--f-display,system-ui);font-weight:var(--w-display,800);font-style:var(--s-display,normal);font-size:1.3rem;text-transform:uppercase;color:var(--text,#fff)}
.pwa-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line,rgba(255,255,255,.1))}
.pwa-row[hidden]{display:none}
.pwa-l{font:700 .85rem var(--f-ui,system-ui);text-transform:var(--case-ui,uppercase);letter-spacing:var(--track-ui,.06em);color:var(--text,#fff)}
.pwa-seg{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.pwa-settings .gx-btn{min-height:40px;padding:6px 10px;font-size:.82rem}
.pwa-small{margin:2px 0 6px;color:var(--text-dim,#b0b7de);font-size:.85rem}
.gx-btn.pwa-btn-primary{background:var(--accent,#00f0a8);border-color:var(--accent,#00f0a8);color:var(--accent-ink,#03140d);box-shadow:var(--glow,none)}

/* ---------- install banner ---------- */
.pwa-install{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:95;max-width:540px;margin:0 auto;
  display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface-2,#181c4c);color:var(--text,#fff);
  border:2px solid var(--accent,#00f0a8);border-radius:var(--radius-lg,8px);box-shadow:var(--shadow,0 14px 40px rgba(0,0,0,.55)),var(--glow,none);font:400 .95rem/1.35 var(--f-body,system-ui)}
.pwa-install img{width:44px;height:44px;border-radius:var(--radius,6px);flex:none}
.pwa-install-txt{flex:1}
.pwa-install-txt strong{font:700 1rem var(--f-ui,system-ui);text-transform:var(--case-ui,uppercase);letter-spacing:var(--track-ui,.06em)}
.pwa-install-txt small{color:var(--text-dim,#b0b7de)}
.pwa-x{border:0;background:transparent;color:var(--text-dim,#b0b7de);font-size:1.5rem;min-width:44px;min-height:44px;cursor:pointer}
.pwa-x:focus-visible{outline:3px solid var(--highlight,#ffd23f)}
.pwa-share{display:inline-block;font-weight:700;color:var(--accent-2,#3ad6ff)}
@media (display-mode: standalone){.btn-sub{display:none}}

/* ---------- offline page (offline.html) ---------- */
.pwa-off{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;text-align:center;background:var(--bg,#05060f);color:var(--text,#fff)}
.pwa-off-card{max-width:540px;width:100%;background:var(--surface,#10133a);border:2px solid var(--line-strong,rgba(255,255,255,.3));border-radius:var(--radius-lg,8px);padding:32px 26px;box-shadow:var(--shadow,none),var(--glow-2,none)}
.pwa-off-card img{width:84px;height:84px;border-radius:50%;margin:0 auto 14px}
.pwa-off-card h1{font-family:var(--f-display,system-ui);font-weight:var(--w-display,800);font-style:var(--s-display,normal);font-size:2.2rem;line-height:1.05;text-transform:uppercase;margin:0 0 8px}
.pwa-off-card p{color:var(--text-dim,#b0b7de);margin:0 0 16px}
.pwa-off-list{list-style:none;padding:0;margin:0 0 18px;text-align:left}
.pwa-off-list a{display:block;padding:10px 12px;border-top:1px solid var(--line,rgba(255,255,255,.1));color:var(--accent-2,#3ad6ff);text-decoration:none;font:700 .95rem var(--f-ui,system-ui)}
.pwa-off-list a:hover{background:var(--surface-2,#181c4c)}
.pwa-off-eyebrow{display:block;font:700 .82rem var(--f-ui,system-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--highlight,#ffd23f);margin-bottom:6px}
@media (prefers-reduced-motion: reduce){html[data-spoilers="hide"] [data-spoiler]{transition:none}}
/* keep the settings button clear of the install banner */
body:has(#pwa-install) .pwa-fab.gx-btn{bottom:calc(var(--pwa-banner-h,90px) + 24px + env(safe-area-inset-bottom))}
body:has(#pwa-install) .pwa-settings{bottom:calc(var(--pwa-banner-h,90px) + 86px + env(safe-area-inset-bottom))}

/* settings button inside the header menu (QA Nov 1: no floating button over content) */
.pwa-fab--menu.gx-btn{position:static;width:auto;min-width:0;height:auto;min-height:36px;padding:6px 10px;font-size:.9rem;box-shadow:none;display:inline-flex;align-items:center;gap:8px}
.pwa-fab--menu .pwa-fab__t{font-size:.85rem}
@media (min-width:1241px){.pwa-fab--menu .pwa-fab__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.pwa-fab--menu.gx-btn{font-size:1.1rem;padding:4px 10px}}
.pwa-settings.pwa-settings--top{top:74px;bottom:auto;max-height:calc(100vh - 90px);overflow:auto}
body:has(#pwa-install) .pwa-settings.pwa-settings--top{bottom:auto}