/* Mirror Lab: end-of-lesson mini game for "Mirror Molecules".
   Everything is scoped under .mirror-game and uses tokens.css only.
   Lesson colour rule: LEFT-handed twin = teal, RIGHT-handed twin = rose. */

/* Draft only: keep the game a dark "screen" on the light theme (same values as base.css's dark-scope list).
   Once .mirror-game is added to that list in base.css, this block can go. */
[data-theme="light"] .mirror-game{
  --void:#18131d; --deck:#211a27; --panel:#2b2232; --raise:#362b3e; --line:#4b3c4b;
  --text:#f8f1f3; --text-2:#e9dfe3; --dim:#c0b2ba;
  --teal:#8fd3dc; --teal-glow:#c3f1f5; --teal-deep:#2f6f7a;
  --rose:#e3959b; --dusk:#b96f74; --plum:#764953; --blush:#d8b7bd; --ok:#a6dcc0; --warn:#f2917f;
  --nebula:radial-gradient(120% 80% at 75% 20%, rgba(143,211,220,.22) 0%, transparent 45%),
           radial-gradient(90% 70% at 20% 60%, rgba(185,111,116,.28) 0%, transparent 55%),
           radial-gradient(80% 60% at 60% 90%, rgba(118,73,83,.35) 0%, transparent 60%), #18131d;
  color:var(--text); color-scheme:dark;
}

.mirror-game{
  container-type:inline-size;
  position:relative;
  color:var(--text);
  font-family:var(--display);
  background:var(--nebula);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(14px,3vw,28px);
  overflow:hidden;
  isolation:isolate;
}
.mirror-game *,.mirror-game *::before,.mirror-game *::after{box-sizing:border-box}
.mirror-game [hidden]{display:none!important}
.mirror-game > section{padding:0;border:0;margin:0} /* neutralise the site's generic section styles */
.mirror-game figure{margin:0}
.mirror-game :focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.mirror-game .mg-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- shared bits ---------- */
.mirror-game .mg-eyebrow,.mirror-game .mg-tag{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0}
.mirror-game .mg-btn{
  font-family:var(--display);font-weight:600;font-size:1rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;
  transition:border-color var(--t-tap) var(--e-out),background var(--t-tap) var(--e-out),transform var(--t-tap) var(--e-out),opacity var(--t-tap) var(--e-out);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none
}
.mirror-game .mg-btn:hover{border-color:var(--teal)}
.mirror-game .mg-btn:active{transform:scale(.96)}
.mirror-game .mg-btn:disabled{opacity:.45;cursor:default;transform:none}
.mirror-game .mg-btn.mg-primary{background:var(--teal);border-color:var(--teal);color:var(--void)}
.mirror-game .mg-btn.mg-primary:hover{background:var(--teal-glow);border-color:var(--teal-glow)}
.mirror-game .mg-btn.mg-big{font-size:1.15rem;min-height:56px;padding:16px 44px}

.mirror-game .mg-star{display:inline-block;width:1em;height:1em;color:var(--line);vertical-align:-.12em}
.mirror-game .mg-star svg{width:100%;height:100%;display:block;fill:currentColor}
.mirror-game .mg-star.is-on{color:var(--teal);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--teal) 55%,transparent))}

.mirror-game .mg-enter{animation:mg-in var(--t-reveal) var(--e-out) both}
@keyframes mg-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- molecules (SVG) ---------- */
.mirror-game .mg-molsvg{display:block;width:100%;height:auto;overflow:visible}
.mirror-game .mg-bond{stroke:var(--dim);stroke-width:.09;stroke-linecap:round}
.mirror-game .mg-core{fill:var(--text-2);stroke:var(--void);stroke-width:.04}
.mirror-game .mg-ball{stroke:var(--void);stroke-width:.04}
.mirror-game .mg-c0{fill:var(--ok)}
.mirror-game .mg-c1{fill:var(--blush)}
.mirror-game .mg-c2{fill:var(--silver)}
.mirror-game .mg-shine{fill:var(--text);opacity:.35;pointer-events:none}
.mirror-game .mg-mol.is-left .mg-core{fill:var(--teal)}
.mirror-game .mg-mol.is-right .mg-core{fill:var(--rose)}
.mirror-game .mg-mirrorline{stroke:var(--teal-glow);stroke-width:.04;stroke-dasharray:.12 .1;opacity:.6}
.mirror-game .mg-mark circle{fill:none;stroke-width:.06}
.mirror-game .mg-mark text{font:700 .34px var(--display)}
.mirror-game .mg-mark.is-ok circle{stroke:var(--ok)}
.mirror-game .mg-mark.is-ok text{fill:var(--ok)}
.mirror-game .mg-mark.is-no circle{stroke:var(--rose);stroke-dasharray:.1 .07}
.mirror-game .mg-mark.is-no text{fill:var(--rose)}

/* ---------- start screen ---------- */
.mirror-game .mg-start{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:clamp(12px,4vw,36px) 4px clamp(8px,3vw,24px)}
.mirror-game .mg-hero-art{width:min(300px,80%)}
.mirror-game .mg-title{font-family:var(--display);font-size:var(--step-3);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0;color:var(--text)}
.mirror-game .mg-pitch{font-family:var(--read);font-size:var(--step-1);line-height:1.4;color:var(--text-2);max-width:34ch;margin:0}
.mirror-game .mg-meta{font-family:var(--display);font-size:.95rem;color:var(--dim);margin:0}
.mirror-game .mg-meta b{color:var(--teal);font-family:var(--mono)}

/* ---------- play screen ---------- */
.mirror-game .mg-play{display:grid;gap:14px;max-width:760px;margin:0 auto}
.mirror-game .mg-hud{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mirror-game .mg-hud h3{font-family:var(--display);font-size:var(--step-1);font-weight:700;margin:2px 0 0;color:var(--text)}
.mirror-game .mg-hud-right{display:flex;align-items:center;gap:14px}
.mirror-game .mg-pips{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.mirror-game .mg-pips li{width:22px;height:6px;border-radius:99px;background:var(--line);transition:background var(--t-reveal) var(--e-out),width var(--t-reveal) var(--e-out)}
.mirror-game .mg-pips li.is-done{background:var(--teal-deep)}
.mirror-game .mg-pips li.is-now{background:var(--teal);width:34px}
.mirror-game .mg-score{font-family:var(--mono);font-weight:600;font-size:1rem;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.mirror-game .mg-score.is-bump{animation:mg-bump var(--t-celebrate) var(--e-spring)}
@keyframes mg-bump{30%{transform:scale(1.22)}100%{transform:none}}

.mirror-game .mg-talk{display:flex;align-items:flex-start;gap:12px}
.mirror-game .mg-talk neu-mascot{--size:clamp(56px,11cqi,80px);flex:none}
.mirror-game .mg-speech{
  position:relative;flex:1;margin:4px 0 0;min-height:3em;
  background:var(--panel);border:1px solid color-mix(in srgb,var(--teal) 45%,var(--line));
  border-radius:var(--r-md);padding:12px 14px;
  font-family:var(--read);font-size:1.05rem;line-height:1.45;color:var(--text)
}
.mirror-game .mg-speech::before{
  content:"";position:absolute;left:-7px;top:20px;width:12px;height:12px;background:var(--panel);
  border-left:1px solid color-mix(in srgb,var(--teal) 45%,var(--line));border-bottom:1px solid color-mix(in srgb,var(--teal) 45%,var(--line));transform:rotate(45deg)
}
.mirror-game .mg-speech b{color:var(--teal-glow);font-weight:700}
.mirror-game .mg-speech em{color:var(--text);font-style:italic}
.mirror-game .mg-speech em.is-teal{color:var(--teal);font-style:normal;font-weight:700}
.mirror-game .mg-speech em.is-rose{color:var(--rose);font-style:normal;font-weight:700}
.mirror-game .mg-speech.is-new{animation:mg-in var(--t-reveal) var(--e-out) both}

.mirror-game .mg-stage{display:grid;gap:14px;min-width:0}
.mirror-game .mg-sub{font-family:var(--mono);font-size:.9rem;color:var(--dim);margin:0}
.mirror-game .mg-note{font-family:var(--read);font-size:1.05rem;line-height:1.45;color:var(--text-2);margin:0;min-height:1.45em}
.mirror-game .mg-note b{color:var(--text)}
.mirror-game .mg-q{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0;color:var(--text)}

/* ✓ / ✕ badges on answer buttons: shape + colour */
.mirror-game .mg-badge{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 1rem/1 var(--display);border:2px solid var(--void);animation:mg-pop var(--t-celebrate) var(--e-spring) both}
.mirror-game .mg-badge.is-ok{background:var(--ok);color:var(--void)}
.mirror-game .mg-badge.is-no{background:var(--rose);color:var(--void)}
@keyframes mg-pop{from{transform:scale(0)}to{transform:none}}

/* shared tile style for tappable pictures */
.mirror-game :is(.mg-cand,.mg-twin,.mg-pair,.mg-opt){
  position:relative;font:inherit;color:var(--text);cursor:pointer;
  background:var(--panel);border:2px solid var(--line);border-radius:var(--r-md);
  transition:border-color var(--t-tap) var(--e-out),transform var(--t-tap) var(--e-out),opacity var(--t-tap) var(--e-out),filter var(--t-tap) var(--e-out);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation
}
.mirror-game :is(.mg-cand,.mg-twin,.mg-pair,.mg-opt):hover:not(:disabled){border-color:var(--teal)}
.mirror-game :is(.mg-cand,.mg-twin,.mg-pair,.mg-opt):active:not(:disabled){transform:scale(.96)}
.mirror-game :is(.mg-cand,.mg-twin,.mg-pair,.mg-opt):disabled{cursor:default}
.mirror-game :is(.mg-cand,.mg-twin,.mg-opt).is-right{border-color:var(--ok)}
.mirror-game :is(.mg-cand,.mg-twin,.mg-opt).is-wrong{border-color:var(--rose);border-style:dashed}

/* round 1 */
.mirror-game .mg-r1{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.mirror-game .mg-ref{background:var(--void);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;display:grid;justify-items:center;gap:4px}
.mirror-game .mg-ref .mg-molsvg{width:min(200px,60vw)}
.mirror-game .mg-cands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mirror-game .mg-cand{padding:8px;min-height:72px}
.mirror-game .mg-cand.is-twin .mg-core{fill:var(--rose)}
.mirror-game .mg-letter{position:absolute;top:6px;left:9px;font:700 .95rem/1 var(--display);color:var(--dim)}
.mirror-game .mg-ghost{filter:drop-shadow(0 0 .06px var(--text))}
@container (min-width:600px){
  .mirror-game .mg-r1{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:center}
  .mirror-game .mg-cands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mirror-game .mg-cand .mg-molsvg{width:80%;margin:0 auto}
}
@container (max-width:420px){
  .mirror-game .mg-cands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mirror-game .mg-ref .mg-molsvg{width:150px}
  .mirror-game .mg-pocket .mg-molsvg{width:200px}
  .mirror-game .mg-cand .mg-molsvg{width:72%;margin:0 auto}
}

/* round 2 */
.mirror-game .mg-r2{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.mirror-game .mg-pocket{background:var(--void);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;display:grid;justify-items:center;gap:6px}
.mirror-game .mg-pocket .mg-molsvg{width:min(240px,66vw)}
.mirror-game .mg-protein{fill:var(--plum);opacity:.85}
.mirror-game .mg-bump{fill:var(--dusk);opacity:.18}
.mirror-game .mg-channel{stroke:var(--void);stroke-width:.34;stroke-linecap:round}
.mirror-game .mg-hole{fill:var(--void)}
.mirror-game .mg-socket{stroke-width:.07;stroke-dasharray:.1 .06}
.mirror-game .mg-s0{stroke:var(--ok);fill:color-mix(in srgb,var(--ok) 28%,var(--void))}
.mirror-game .mg-s1{stroke:var(--blush);fill:color-mix(in srgb,var(--blush) 28%,var(--void))}
.mirror-game .mg-s2{stroke:var(--silver);fill:color-mix(in srgb,var(--silver) 28%,var(--void))}
.mirror-game .mg-socket.is-lit{stroke:var(--teal-glow);stroke-dasharray:none;stroke-width:.08}
.mirror-game .mg-drop.is-fit{filter:drop-shadow(0 0 .12px var(--teal-glow))}
.mirror-game .mg-twins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mirror-game .mg-twin{padding:10px;display:grid;justify-items:center;gap:6px;min-height:120px}
.mirror-game .mg-twin .mg-molsvg{width:min(130px,80%)}
.mirror-game .mg-twin-name{font-family:var(--display);font-weight:600;font-size:.95rem}
.mirror-game .mg-twin.is-left .mg-twin-name{color:var(--teal)}
.mirror-game .mg-twin.is-right .mg-twin-name{color:var(--rose)}
.mirror-game .mg-twin.is-left .mg-core{fill:var(--teal)}
.mirror-game .mg-twin.is-right .mg-core{fill:var(--rose)}
.mirror-game .mg-twin:disabled.is-wrong{opacity:.6}
@container (min-width:600px){
  .mirror-game .mg-r2{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
  .mirror-game .mg-twins{grid-template-columns:minmax(0,1fr)}
  .mirror-game .mg-twin{grid-template-columns:auto 1fr;justify-items:start;align-items:center}
  .mirror-game .mg-twin .mg-molsvg{width:120px}
}

/* round 3 */
.mirror-game .mg-def{background:var(--deck);border:1px solid var(--teal-deep);border-left:4px solid var(--teal);border-radius:var(--r-sm);padding:10px 14px}
.mirror-game .mg-def p{margin:4px 0 0;font-family:var(--read);font-size:1.02rem;line-height:1.45;color:var(--text-2)}
.mirror-game .mg-def b{color:var(--text)}
.mirror-game .mg-bin{background:var(--void);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;display:grid;gap:8px}
.mirror-game .mg-binsvg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.mirror-game .mg-counts{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:.92rem;color:var(--text-2)}
.mirror-game .mg-key{display:inline-flex;align-items:center;gap:6px}
.mirror-game .mg-key.is-left::before,.mirror-game .mg-key.is-right::before{content:"";width:12px;height:12px;border-radius:50%}
.mirror-game .mg-key.is-left::before{background:var(--teal)}
.mirror-game .mg-key.is-right::before{background:var(--rose)}
.mirror-game .mg-dot{transition:opacity var(--t-reveal) var(--e-out)}
.mirror-game .mg-dot.is-left{fill:var(--teal)}
.mirror-game .mg-dot.is-right{fill:var(--rose)}
.mirror-game .mg-dot.is-pair{opacity:.28}
.mirror-game .mg-dot.is-lean{filter:drop-shadow(0 0 1.2px var(--teal-glow))}
.mirror-game .mg-formula{font-family:var(--mono);font-size:.92rem;color:var(--dim);margin:0}
.mirror-game .mg-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mirror-game .mg-opt{min-height:52px;padding:10px 12px;font-family:var(--display);font-weight:600;font-size:1rem}
.mirror-game .mg-opt.mg-num{font-family:var(--mono);font-size:1.15rem}
.mirror-game .mg-opts.is-wide{grid-template-columns:minmax(0,1fr)}
@container (min-width:600px){ .mirror-game .mg-opts.is-wide{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* round 4 */
.mirror-game .mg-pairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mirror-game .mg-pair{padding:8px 6px 6px;min-height:64px;display:grid;justify-items:center;gap:2px}
.mirror-game .mg-pair svg{width:100%;max-width:90px;height:auto;display:block}
.mirror-game .mg-pbond{stroke:var(--dim);stroke-width:4}
.mirror-game .mg-pball.is-left{fill:var(--teal)}
.mirror-game .mg-pball.is-right{fill:var(--rose)}
.mirror-game .mg-plabel{font:700 11px var(--display);fill:var(--void)}
.mirror-game .mg-sit{font-family:var(--display);font-size:.78rem;font-weight:600;color:var(--dim);visibility:hidden}
.mirror-game .mg-pair.is-bench{border-style:dashed;background:var(--deck)}
.mirror-game .mg-pair.is-bench svg{filter:grayscale(1);opacity:.45}
.mirror-game .mg-pair.is-bench .mg-sit{visibility:visible}
.mirror-game .mg-pair.is-right{border-color:var(--ok)}
.mirror-game .mg-pair.is-wrong{border-color:var(--rose)}
.mirror-game .mg-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mirror-game .mg-count{color:var(--dim);font-size:.95rem}
.mirror-game .mg-bars{display:grid;gap:14px;background:var(--void);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.mirror-game .mg-barrow{display:grid;gap:6px}
.mirror-game .mg-barrow p{margin:0;font-family:var(--display);font-size:.95rem;color:var(--text-2)}
.mirror-game .mg-bar{display:flex;height:16px;border-radius:99px;background:var(--raise);overflow:hidden}
.mirror-game .mg-bar i{display:block;height:100%;width:0;transition:width var(--t-morph) var(--e-out)}
.mirror-game .mg-bar i.is-left{background:var(--teal)}
.mirror-game .mg-bar i.is-right{background:var(--rose)}
.mirror-game .mg-pct b{color:var(--teal);font-size:1.1rem}

/* round 5 */
.mirror-game .mg-r5{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:center}
.mirror-game .mg-jar{background:var(--void);border:1px solid var(--line);border-radius:var(--r-md);padding:8px}
.mirror-game .mg-jarsvg{display:block;width:100%;max-width:220px;height:auto;margin:0 auto}
.mirror-game .mg-glass{fill:color-mix(in srgb,var(--teal) 6%,transparent);stroke:var(--dim);stroke-width:1.2}
.mirror-game .mg-dot.is-pop{animation:mg-dotpop var(--t-reveal) var(--e-spring)}
@keyframes mg-dotpop{40%{r:3.4}}
.mirror-game .mg-readout{display:grid;gap:8px}
.mirror-game .mg-readout p{margin:0;font-family:var(--display);font-size:.95rem;color:var(--text-2);display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px}
.mirror-game .mg-readout p.mg-tag{display:block}
.mirror-game .mg-readout b{color:var(--text)}
.mirror-game .mg-meter{height:14px;border-radius:99px;background:var(--rose);overflow:hidden}
.mirror-game .mg-meter i{display:block;height:100%;background:var(--teal);border-right:2px solid var(--void)}
@container (max-width:420px){
  .mirror-game .mg-r5{grid-template-columns:minmax(0,1fr)}
  .mirror-game .mg-jarsvg{max-width:170px}
}

/* result + controls */
.mirror-game .mg-result{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line)}
.mirror-game .mg-result b{font-family:var(--display);font-size:1.3rem;font-weight:700}
.mirror-game .mg-stars{display:flex;gap:6px;font-size:1.9rem}
.mirror-game .mg-stars .mg-star{transform:scale(.6);opacity:.6;transition:transform var(--t-celebrate) var(--e-spring),opacity var(--t-tap) var(--e-out),color var(--t-tap) var(--e-out)}
.mirror-game .mg-stars .mg-star.is-on,.mirror-game .mg-stars .mg-star.is-off{transform:none;opacity:1}
.mirror-game .mg-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;justify-content:flex-end}
.mirror-game .mg-learn{font-family:var(--display);font-size:.95rem;color:var(--teal);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--teal) 40%,transparent);text-underline-offset:3px;margin-right:auto;padding:10px 0}
.mirror-game .mg-learn:hover{text-decoration-color:var(--teal)}

/* ---------- end screen ---------- */
.mirror-game .mg-end{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:clamp(8px,3vw,28px) 0}
.mirror-game .mg-end neu-mascot{--size:clamp(96px,22cqi,130px)}
.mirror-game .mg-rank{font-family:var(--display);font-size:var(--step-3);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0;color:var(--text);text-shadow:0 0 28px color-mix(in srgb,var(--teal) 45%,transparent)}
.mirror-game .mg-total{font-family:var(--mono);color:var(--dim);display:flex;align-items:baseline;gap:8px;margin:0}
.mirror-game .mg-total b{font-size:clamp(2.4rem,9cqi,3.4rem);color:var(--teal);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.mirror-game .mg-endline{font-family:var(--read);font-size:var(--step-0);color:var(--text-2);max-width:40ch;margin:0}
.mirror-game .mg-recap{list-style:none;margin:6px 0 0;padding:0;width:100%;max-width:520px;display:grid;gap:8px}
.mirror-game .mg-recap li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:10px 14px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line);font-size:.98rem;text-align:left}
.mirror-game .mg-stars-s{font-size:1.05rem;display:flex;gap:2px}
.mirror-game .mg-recap-learn{grid-column:1/-1;font-family:var(--display);font-size:.9rem;color:var(--teal);text-underline-offset:3px;padding:4px 0}
.mirror-game .mg-best{font-family:var(--display);font-size:.95rem;color:var(--dim);margin:0}
.mirror-game .mg-best .mg-new{color:var(--void);background:var(--ok);border-radius:999px;padding:2px 8px;margin-left:6px;font-weight:600}

.mirror-game .mg-foot{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line);font-family:var(--read);font-size:.92rem;line-height:1.5;color:var(--dim)}

/* Neu fallback if sfn.js is missing */
.mirror-game neu-mascot.mg-neu-fallback{display:inline-block;width:var(--size,80px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--teal-glow),var(--teal) 45%,var(--teal-deep))}

@container (max-width:420px){
  .mirror-game .mg-speech{font-size:1rem;padding:10px 12px}
  .mirror-game .mg-pips li{width:14px}
  .mirror-game .mg-pips li.is-now{width:24px}
  .mirror-game .mg-pairs{gap:8px}
}

@media (prefers-reduced-motion: reduce){
  .mirror-game .mg-enter,.mirror-game .mg-speech.is-new,.mirror-game .mg-score.is-bump,.mirror-game .mg-badge,.mirror-game .mg-dot.is-pop{animation:none!important}
  .mirror-game .mg-bar i,.mirror-game .mg-stars .mg-star,.mirror-game .mg-pips li,.mirror-game .mg-dot{transition:none!important}
}

/* floating pill that brings the reader back to the game after reviewing (lives on <body>) */
.mg-backpill{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 18px;border-radius:999px;background:var(--teal);color:var(--void);font:600 .95rem/1 var(--display);text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.35);animation:mg-pill-in .45s var(--e-spring,ease-out)}
.mg-backpill[hidden]{display:none}
@keyframes mg-pill-in{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion: reduce){.mg-backpill{animation:none}}