/* BUG-20261103-008 (owner iPhone video, Nov 3 2026): Atkinson Hyperlegible draws a SLASHED zero, so "100/200" read as a
   garbled or struck-through "200" (worse under the 1px white text-shadow on green buttons). These faces come AFTER
   look.css's, so for the digits 0-9 only, every "Atkinson Hyperlegible" stack uses a plain system face. If no local face
   is found the browser keeps the old digits (no download, no CSP change). Weights are EXACTLY look.css's 400 and 700: Chromium only merges
   faces with identical descriptors, so a 600-1000 range never took part (found by the Pixel 7 e2e, Nov 3 6:15 PM ET). */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;unicode-range:U+0030-0039;
  src:local("Helvetica Neue"),local("HelveticaNeue"),local("Roboto"),local("Roboto Regular"),local("Arial"),local("ArialMT"),local("Inter Regular"),local("Liberation Sans")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;unicode-range:U+0030-0039;
  src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Roboto Bold"),local("Roboto-Bold"),local("Arial Bold"),local("Arial-BoldMT"),local("Inter Bold"),local("Liberation Sans Bold")}
/* Stage 1M (owner t7119u, Nov 3 2026): the mockup look (plan/mockups/lobby-friends-1103/style.css) as shared tokens.
   Navy page, light "glass" content sheets with dark text, green "felt" actions, navy top-row tiles.
   Loaded LAST on every page so it wins the colour cascade. Contrast: every text/background pair here is >= 4.5:1
   (checked by test/e2e-top-row-1m.mjs). Never put dark text straight on the navy (BUG-20261103-003). */
:root{
  --pp-navy-1:#1d3350;--pp-navy-2:#0f1c2e;--pp-navy-3:#0a1422;
  --pp-bg:radial-gradient(120% 60% at 50% 0%,#1d3350 0%,#0f1c2e 55%,#0a1422 100%);
  --pp-text:#eef3f8;--pp-text-2:#c9d6e3;--pp-h3:#9fb3c8;
  --pp-glass:linear-gradient(180deg,#f7f9fb,#dfe5eb 55%,#cfd7df);--pp-glass-ink:#13233a;--pp-glass-sub:#41536a;
  --pp-glass-shadow:inset 0 1px 0 #fff,0 3px 10px #0006;
  --pp-sheet-dark:linear-gradient(180deg,#1a2e48,#13233a 60%,#0f1c2e);
  --pp-felt:linear-gradient(180deg,#b9f07a,#6fcf3e 55%,#3f9a22);--pp-felt-ink:#0d2a08;
  --pp-felt-shadow:inset 0 1px 0 #e9ffd1,0 3px 0 #2a6a15,0 4px 10px #0007;
  --pp-tile:linear-gradient(180deg,#25405f,#1a2f49);--pp-tile-border:#33557a;--pp-tile-ink:#e8f0f8;
  --pp-tile-on:linear-gradient(180deg,#2f5a3a,#1f4029);--pp-tile-on-border:#5fae4a;
  --pp-online:#3ddc5a;--pp-badge:#ffd84d;--pp-badge-ink:#1a1a1a;
  --pp-radius:16px;--pp-font:"Inter","Helvetica Neue",Arial,"Atkinson Hyperlegible",system-ui,sans-serif
}
/* The page: navy on the canvas only (body stays clear so the content sheet can sit under page content). */
html,html[data-theme]{background:var(--pp-bg) var(--pp-navy-3)!important;background-attachment:scroll!important}
html body,html[data-theme] body{background:transparent!important}
html body{font-family:var(--pp-font)}
/* The content sheet: light glass under each page's main, starting below the top row (site-nav.js sets --pp-sheet-top). */
html body main{position:relative}
html body main::before{content:"";position:absolute;left:0;right:0;bottom:0;top:var(--pp-sheet-top,0px);z-index:-1;pointer-events:none;
  background:var(--pp-glass);border-radius:var(--pp-radius);box-shadow:var(--pp-glass-shadow)}
html[data-theme="dark"] body main::before{background:var(--pp-sheet-dark);box-shadow:inset 0 1px 0 #33557a,0 3px 10px #0006}
/* The gate and the table paint their own full-screen backgrounds; no sheet there. */
/* (index #gate stays in the DOM when signed in, hidden by class, so only while signed out; stats.html has a p#gate hint, so section.gate only: both had dark text on navy) */
html:not(.signed-in):not(.guest-play) body main:has(> section#gate.gate:not([hidden]))::before{display:none}
html:not(.signed-in):not(.guest-play) body main#lobby::before{display:none}
html body #table main::before{display:none}
/* Docked skit captions copy the first painted ancestor's colour (skit-player pageBg). With body clear that is the navy canvas,
   but the caption text is dark (#1a1e24): 1.10:1. Light theme: an opaque light sheet (#eef2f6, 15:1 with #1a1e24). Dark theme keeps navy + light text. */
html:not([data-theme="dark"]) body .goc-skit-dock{background:#eef2f6!important}
/* Text that sits straight on the navy (outside a content sheet) is light. */
html body > p,html body > h1,html body > h2,html body > footer,html body > footer p,html body > footer a{color:var(--pp-text)!important}
/* Primary actions: green felt with dark green ink (14.8:1 at the darkest stop is not needed; ink vs #3f9a22 = 4.9:1). */
html body .btn.primary,html body .btn-primary,html body button.primary{background:var(--pp-felt)!important;color:var(--pp-felt-ink)!important;box-shadow:var(--pp-felt-shadow)!important;border-color:#2a6a15!important}

/* ===== The top row (owner t7119u): Home | Settings | Music | Sign out (Sign in when signed out). ===== */
html body nav.site-nav.pp-toprow{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;align-items:stretch;width:100%;box-sizing:border-box;margin:6px 0 12px;padding:0}
html body nav.site-nav.pp-toprow > details.site-menu{display:none!important}
html body nav.site-nav.pp-toprow > .pp-tile,html body nav.site-nav.pp-toprow > .pp-set-btn{order:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;
  box-sizing:border-box!important;width:auto!important;min-width:0!important;height:58px!important;min-height:58px!important;margin:0!important;padding:4px 2px!important;
  border-radius:14px!important;background:var(--pp-tile)!important;border:1px solid var(--pp-tile-border)!important;color:var(--pp-tile-ink)!important;
  font:700 14px/1.1 var(--pp-font)!important;letter-spacing:0!important;text-decoration:none!important;text-shadow:none!important;box-shadow:0 2px 6px #0005!important;
  cursor:pointer;white-space:normal;overflow:visible;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:static!important;
  color:#e8f0f8!important;-webkit-text-fill-color:#e8f0f8!important;transition:none!important;animation:none!important}
html body nav.site-nav.pp-toprow > .pp-tile > i,html body nav.site-nav.pp-toprow > .pp-set-btn > span{display:block!important;font:normal 19px/1 var(--pp-font)!important;margin:0!important;color:#e8f0f8!important;-webkit-text-fill-color:#e8f0f8!important}
html body nav.site-nav.pp-toprow > .pp-tile > b,html body nav.site-nav.pp-toprow > .pp-set-btn > b{font-weight:700;color:#e8f0f8!important;-webkit-text-fill-color:#e8f0f8!important;transition:none!important}
html body nav.site-nav.pp-toprow > .pp-tile-home{order:1!important}
html body nav.site-nav.pp-toprow > .pp-set-btn{order:2!important}
html body nav.site-nav.pp-toprow > .pp-tile-music{order:3!important}
html body nav.site-nav.pp-toprow > .pp-tile-fw{order:4!important}
html body nav.site-nav.pp-toprow > .pp-tile-auth{order:5!important}
html body nav.site-nav.pp-toprow > .pp-tile-music[aria-pressed="true"]{background:var(--pp-tile-on)!important;border-color:var(--pp-tile-on-border)!important}
html body nav.site-nav.pp-toprow > :is(.pp-tile,.pp-set-btn):focus-visible{outline:3px solid var(--pp-badge)!important;outline-offset:2px}
html body nav.site-nav.pp-toprow > :is(.pp-tile,.pp-set-btn):active{transform:translateY(1px)}
html body nav.site-nav.pp-toprow > .pp-tile[hidden]{display:none!important}
.pp-toprow-extra{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 10px}
/* The gate row sits on the gate's own background, above its content. */
html body nav.site-nav.pp-gate-row{position:relative;z-index:7;margin:0 auto 8px;max-width:520px;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 0}
/* Settings: the old Menu pages are listed here now. */
.pp-set-pages{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 6px}
.pp-set-pages a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;background:var(--pp-tile);border:1px solid var(--pp-tile-border);color:var(--pp-tile-ink)!important;font:700 15px/1.2 var(--pp-font);text-decoration:none}
.pp-set-pages a[hidden]{display:none}
.pp-set-pages a[aria-current=page]{border-color:var(--pp-badge);color:#fff!important}
.pp-set-pages a:focus-visible{outline:3px solid var(--pp-badge);outline-offset:2px}
@media (max-width:340px){html body nav.site-nav.pp-toprow{gap:5px}html body nav.site-nav.pp-toprow > :is(.pp-tile,.pp-set-btn){font-size:14px!important;padding:4px 1px!important}}
@media print{html body nav.site-nav.pp-toprow{display:none!important}}
/* Lobby title: the yellow "Lobby" on the light-green top of .lb-head was 1.5:1 (e2e-top-row-1m contrast sweep). Dark felt ink, >= 7:1. */
html body.lobby-page header.lb-head h1{color:var(--pp-felt-ink)!important;text-shadow:0 1px 0 #ffffff59!important}
/* stats.html "Send request" was an unstyled system button (white on silver in dark mode, 1.8:1). Green felt like other actions. */
html body #askForm button[type=submit]{background:var(--pp-felt)!important;color:var(--pp-felt-ink)!important;border:1px solid #2a6a15!important;border-radius:12px!important;min-height:44px;padding:8px 16px!important;font-weight:700!important;box-shadow:var(--pp-felt-shadow)!important}