/* Games platform chrome: light, warm paper like the hubs; games bring their own bold identity inside. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format("woff2")}
:root{color-scheme:light;
  --paper:#f7f3ea;--card:#fffdf8;--ink:#1f1b24;--muted:#6d6573;--line:#e7dfd1;
  --tomato:#e4572e;--teal:#1f7a8c;--mustard:#f2b134;--mint:#9fd8b0;--plum:#6a4c93;
  --you:#e4572e;--them:#2e86ab;
  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --r:18px;--shadow:0 1px 0 rgba(31,27,36,.06),0 10px 30px -12px rgba(31,27,36,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;color:var(--ink);font:16px/1.5 var(--sans);-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;color:inherit}
.g-btn{appearance:none;border:0;border-radius:999px;padding:12px 20px;font:700 16px/1 var(--display);letter-spacing:.01em;cursor:pointer;
  background:var(--ink);color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .12s ease, box-shadow .12s ease;touch-action:manipulation;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.g-btn:active{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,.25)}
.g-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.g-btn.soft{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 rgba(0,0,0,.06)}
.g-btn[disabled]{opacity:.45;pointer-events:none}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.g-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#bbb;vertical-align:1px}
.g-dot.on{background:#2fb67c;box-shadow:0 0 0 3px rgba(47,182,124,.2)}
.g-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font:600 14px var(--display);transition:all .25s ease;z-index:100;pointer-events:none;max-width:90vw;text-align:center}
.g-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
