/* scope2-skin.css - give the three SCOPE 2 pages SCOPE 1's visual identity.
   -------------------------------------------------------------------------
   SCOPE 2's client is served by the Lab's Lambda, which injects rl-ui.css just
   before </body> - so it out-orders anything the page declares. Everything here
   is scoped under `.s2` (on <body>), which raises specificity ABOVE rl-ui's bare
   `.btn` / `.card` / `.tile` / `.pill`, so the SCOPE 1 look wins WITHOUT
   !important and WITHOUT touching the tested game JS.

   SCOPE 1's palette + Inter, from client/play.html + index.html. The Lab
   topbar stays RMIT navy (CLAUDE.md requires it on every page); everything below
   is SCOPE 1. -------------------------------------------------------------- */

/* Inter, SELF-HOSTED. The old page pulled this from Google Fonts; the
   Lab's release gate blocks remote fonts, so the family silently fell back to
   Inter and the pages lost their SCOPE 1 voice. These two files are the Google
   Fonts latin / latin-ext slices of the Inter VARIABLE face (SIL Open Font
   License), fetched once and committed next to the pages - one family, every
   weight 100-900, zero network calls at runtime. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('vendor-montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('vendor-montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

.s2{
  --red:#E60028; --navy:#0b1b3f; --bg:#f4f6fb; --card:#fff; --line:#e8ecf3;
  --muted:#586074; --ok:#1b8a5a; --warn:#c77700;
  --c1:#2f6fb0; --c2:#d0443f;                 /* the competing chains */
  /* SCOPE 1's exact page background */
  background:
    radial-gradient(1000px 480px at 50% -6%, #eef3fc 0%, rgba(238,243,252,0) 60%),
    linear-gradient(180deg, #f8fafd, #eef2f8) !important;
  color:#0f1024;
}
/* Inter everywhere - the single biggest SCOPE 1 cue. The universal rule is
   the one place !important is justified: it only sets a font family, which can't
   break layout, and it has to beat dozens of `font:` shorthands set inline. */
.s2, .s2 *{ font-family:'Inter', system-ui, -apple-system, sans-serif !important; }

/* ---- headings / eyebrows keep SCOPE 1's navy + tight tracking ---- */
.s2 h1, .s2 .lead, .s2 .card-name, .s2 .rls-h{ color:var(--navy); letter-spacing:-.02em; }

/* ---- cards: SCOPE 1's soft floating card ---- */
.s2 .card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,32,.06);
}

/* ---- buttons: SCOPE 1's .btn-red / .btn-navy / .btn-ghost, mapped onto the
        classes my pages already use (.btn.red / .btn.navy / .btn.gh) ---- */
.s2 .btn{
  border:none; border-radius:12px; padding:13px 18px; font-size:14px;
  font-weight:800; cursor:pointer; transition:transform .1s, opacity .2s, filter .2s;
}
.s2 .btn:hover{ transform:translateY(-1px); }
.s2 .btn.red{ background:var(--red); color:#fff; box-shadow:none; }
.s2 .btn.navy{ background:var(--navy); color:#fff; box-shadow:none; }
.s2 .btn.gh, .s2 .btn.ghost{ background:#eef1f8; color:#333; border:none; }
.s2 .btn.red:hover, .s2 .btn.navy:hover{ filter:brightness(1.06); }

/* ---- the phase banner: SCOPE 1's coloured phase pills ---- */
.s2 .phase{ background:var(--navy); color:#fff; border-radius:14px; }
.s2 .phase.wait{ background:#e8ecf3; color:var(--navy); }
.s2 .phase .clock{ color:#fff; }
.s2 .phase.wait .clock{ color:var(--navy); }

/* ---- SCOPE 1's board card: red eyebrow over a scrolling SVG well ---- */
.s2 .boardcard{ padding:14px 12px 10px; }
.s2 .boardcard .btitle{
  font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--red); margin:0 2px 8px; display:flex; align-items:center; gap:8px;
}
.s2 .boardcard .btitle span{ color:var(--muted); letter-spacing:.04em; font-weight:700; text-transform:none; }
.s2 .boardwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.s2 .boardwrap svg{ display:block; }

/* ---- stat tiles: SCOPE 1's .stat ---- */
.s2 .tile{ background:#f6f8fd; border:1px solid var(--line); border-radius:11px; }
.s2 .tile .v{ color:var(--navy); }
.s2 .tile.good .v{ color:var(--ok); }
.s2 .tile.bad  .v{ color:var(--c2); }

/* ---- the eyebrow/tag pill: SCOPE 1's red uppercase tag ---- */
.s2 .pill{
  background:var(--red); color:#fff; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; border-radius:20px;
}
.s2 .pill.ok{ background:#e6f6ee; color:var(--ok); }

/* ---- seat badges + the join-code block get SCOPE 1's chain colours ---- */
.s2 .seat .badge, .s2 .badge{ background:var(--navy); }
.s2 .codebox{ background:var(--navy) !important; }
.s2 .code{ letter-spacing:.16em; }
/* colour the two lead chains the SCOPE 1 way; further chains fall back to navy */
.s2 .st.filled{ border-color:var(--ok); background:#f2fbf6; }
.s2 .st.waiting{ border-color:var(--warn); background:#fff8ee; }
.s2 .win{ background:#f2fbf6; }

/* ---- range sliders in SCOPE 1's navy ---- */
.s2 input[type=range]{ accent-color:var(--navy); }

/* ---- inputs pick up SCOPE 1's focus navy ---- */
.s2 .in:focus, .s2 .cin:focus, .s2 input:focus, .s2 select:focus{
  border-color:var(--navy) !important; box-shadow:0 0 0 3px rgba(11,27,63,.10) !important;
}

/* the Lab topbar sits ABOVE .s2 in the DOM, so it doesn't inherit the skin - and
   on these pages its links were rendering as default browser blue on navy.
   Force the house white. (Scoped to when body.s2 is present so it only affects
   the SCOPE 2 pages, never the rest of the Lab.) */
body.s2 .rl-topbar a, body.s2 .rl-brand, body.s2 .rl-back{
  color:#fff !important; text-decoration:none !important;
}
body.s2 .rl-back{ opacity:.82; }
body.s2 .rl-back:hover{ opacity:1; }