/* Grade 9 Games — shared brand layer for game pages. Loaded AFTER each game's own styles; overrides tokens + key components.
   Paper-cut look: flat matte colours, thick ink outlines, hard offset shadows. Subject colour comes from data-subject on <html>. */
:root{
  --paper:#f7f3ea; --surface:#ffffff; --ink:#15151c; --muted:#5f5e6b;
  --cobalt:#5aa9ff; --orange:#ff6728; --yellow:#ffe14a; --green:#19b36b; --violet:#8a3fc9;
  --bg:var(--paper); --line:var(--ink); --slot:#efeadf; --track:#e8e2d4; --ring:#e8e2d4; --key:#ffffff; --chip:var(--yellow); --chip-ink:#15151c; --chip-line:var(--ink);
  --accent:var(--cobalt); --accent-ink:#ffffff;
  --link:var(--green); --link-soft:#dff6ea; --good:var(--green); --good-soft:#dff6ea; --warn:#c43d2f; --warn-soft:#fde3df; --bad:#c43d2f; --bad-soft:#fde3df;
  --shadow:5px 5px 0 var(--ink); --shadow-sm:3px 3px 0 var(--ink);
}
:root[data-subject="biology"]{--accent:var(--green);--accent-ink:#15151c}
:root[data-subject="chemistry"]{--accent:var(--orange);--accent-ink:#15151c}
:root[data-subject="physics"]{--accent:var(--violet);--accent-ink:#ffffff}
:root[data-subject="maths"]{--accent:var(--cobalt);--accent-ink:#15151c}
:root[data-subject="mixed"]{--accent:var(--yellow);--accent-ink:#15151c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#121218; --surface:#1c1c25; --ink:#f4f1e8; --muted:#a4a2b2;
  --cobalt:#7dbcff; --orange:#ff7d47; --green:#35cf85; --violet:#b07aea;
  --bg:var(--paper); --line:var(--ink); --slot:#262633; --track:#2a2a38; --ring:#2a2a38; --key:#23232f; --chip:#ffe14a; --chip-ink:#15151c;
  --link-soft:#1a3b2c; --good-soft:#1a3b2c; --warn:#ff8c6a; --warn-soft:#3f1d19; --bad:#ff8c6a; --bad-soft:#3f1d19; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#121218; --surface:#1c1c25; --ink:#f4f1e8; --muted:#a4a2b2;
  --cobalt:#7dbcff; --orange:#ff7d47; --green:#35cf85; --violet:#b07aea;
  --bg:var(--paper); --line:var(--ink); --slot:#262633; --track:#2a2a38; --ring:#2a2a38; --key:#23232f; --chip:#ffe14a; --chip-ink:#15151c;
  --link-soft:#1a3b2c; --good-soft:#1a3b2c; --warn:#ff8c6a; --warn-soft:#3f1d19; --bad:#ff8c6a; --bad-soft:#3f1d19; color-scheme:dark}

body{background:var(--paper);background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1px);background-size:22px 22px}

/* ---- nav with stamp logo ---- */
.g9nav{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:560px;margin:0 auto 18px;font:800 13px/1 var(--body,system-ui)}
.g9nav .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;opacity:1}
.g9nav .stamp{width:36px;height:36px;border-radius:9px;background:var(--orange);border:2.5px solid #15151c;box-shadow:2.5px 2.5px 0 #15151c;display:grid;place-items:center;transform:rotate(-6deg);flex:none}
.g9nav .stamp b{font:800 23px/1 var(--display,"Arial Black");color:#15151c;letter-spacing:-.05em;transform:rotate(6deg)}
.g9nav .wm{font:800 15px/1 var(--display);letter-spacing:-.02em;text-transform:uppercase}
.g9nav .wm small{display:block;font:700 10px/1.2 var(--body);letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.g9nav .right{display:flex;gap:8px;align-items:center}
.g9nav .pill{border:2.5px solid var(--ink);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 12px;font:800 12px var(--body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s}
.g9nav .pill:hover{transform:translate(-1px,-1px)}
.g9nav .pill.back{text-decoration:none;background:var(--yellow);color:#15151c}
.g9r-inline{all:unset;cursor:pointer;font:800 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:8px;border-bottom:1.5px dotted var(--muted)}
.g9r-inline:hover{color:var(--ink);border-color:var(--ink)}

/* ---- common components ---- */
h1{text-transform:uppercase;letter-spacing:-.035em!important}
h1 span{color:var(--accent)}
.eyebrow{letter-spacing:.16em}
.chip,.chipbtn,.btn.ghost{border:2.5px solid var(--ink)!important;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);font-weight:800!important;letter-spacing:.04em;text-transform:uppercase;font-size:12px!important;transition:transform .12s}
.chip:hover,.chipbtn:hover,.btn.ghost:hover{transform:translate(-1px,-1px)}
.chip[aria-pressed="true"],.chipbtn[aria-pressed="true"]{background:var(--ink)!important;color:var(--paper)!important}
.btn{border:2.5px solid var(--ink)!important;box-shadow:var(--shadow-sm);font-weight:800!important;letter-spacing:.04em;text-transform:uppercase;transition:transform .12s}
.btn:hover{transform:translate(-1px,-1px)}
.btn:disabled{transform:none;box-shadow:none}
.rules,.hud div,.stage,.card,.expr,.daily{border:2.5px solid var(--ink)!important;box-shadow:var(--shadow)!important;background:var(--surface)}
.hud div{box-shadow:var(--shadow-sm)!important;border-radius:14px}
.hud small{letter-spacing:.14em}
.timer{border:2px solid var(--ink);height:12px;border-radius:999px}
.timer i{border-radius:0}
.msg,.verdict,.clue{border-radius:12px}
.msg.good,.msg.bad,.verdict.good,.verdict.bad{border:2.5px solid var(--ink);box-shadow:var(--shadow-sm)}
.end:not(.bead),.win,.overlay{border:3px solid var(--ink)!important}
.end:not(.bead),.win{background:var(--ink);color:var(--paper);box-shadow:var(--shadow)}
.end:not(.bead) .big,.overlay .big{color:var(--accent)}
.end:not(.bead) h2,.win h2,.overlay h2{text-transform:uppercase;letter-spacing:-.03em}
input[type=text],textarea{border-color:var(--ink)!important}

/* chain reaction */
.bead .card{box-shadow:none!important;border-width:2.5px!important;margin-bottom:12px}
.bead.filled .card{box-shadow:var(--shadow-sm)!important}
.bead.live .card{box-shadow:var(--shadow-sm)!important;border-style:solid!important;border-color:var(--accent)!important}
.bead .dot{border:2.5px solid var(--ink)!important;font-weight:800}
.bead.start .dot,.bead.end .dot{background:var(--ink);color:var(--paper)}
.bead.filled .dot{background:var(--accent);color:var(--accent-ink);border-color:var(--ink)!important}
.bead.live .dot{background:var(--yellow);color:#15151c}
.bead .stem{width:3px;left:20.5px;background:var(--ink)!important;opacity:.25}
.bead.filled .stem{opacity:1;background:var(--accent)!important}
.why b{color:var(--accent)}
.clue b{color:var(--accent)}
form .btn{box-shadow:none}

/* odd one out */
.card.odd{background:var(--good-soft)!important;border-color:var(--good)!important}
.card.wrong{background:var(--bad-soft)!important;border-color:var(--bad)!important}
.card .key{border:1.5px solid var(--ink);border-radius:6px;padding:1px 5px;color:var(--ink);background:var(--yellow)}

/* target three */
.num{border:2.5px solid var(--ink)!important;box-shadow:var(--shadow)!important;background:var(--yellow)!important;color:#15151c!important}
.num.used{box-shadow:none!important}
.key{border:2.5px solid var(--ink)!important;box-shadow:var(--shadow-sm);background:var(--key)}
.key:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.key.go{background:var(--accent)!important;color:var(--accent-ink)!important}
.key.soft{color:var(--muted)}
.target b{color:var(--accent)}

/* times table rush */
.stage{min-height:340px}
.overlay{z-index:5;padding:28px 22px;gap:12px}
.overlay h2{margin-top:4px}
.ring{border:2.5px solid var(--ink)!important}
.q .ans{color:var(--accent)}
.best b{color:var(--accent)}
.overlay .wrongline{border:2px solid var(--ink)}

/* report widget */
.g9r-btn{border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);color:var(--ink);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:12px}
.g9r-box{border:3px solid var(--ink)}
@media (prefers-reduced-motion:reduce){.chip,.btn,.key,.g9nav .pill{transition:none}}