@font-face{font-family:"Alexandria";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/alexandria-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/alexandria-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/alexandria-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/alexandria-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/alexandria-arabic-800-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/alexandria-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/tajawal-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/tajawal-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/tajawal-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/tajawal-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/tajawal-arabic-800-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/tajawal-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Hessa Play design system: tokens, type scale and spacing shared by the home and curricula pages ----
   Headings and buttons: Alexandria. Body: Tajawal. Spacing steps: 8 / 12 / 16 / 24 / 32. */
/* Layout: a welcome banner, then six square tool tiles. Each tool opens full width under a slim bar. One colour per tool, one loud colour for the teacher's name. */
:root{
  --bg:#f3f5fb;
  --surface:#ffffff;
  --surface-2:#eaeef8;
  --ink:#16213e;
  --muted:#5b6585;
  --line:#d9dff0;
  --name:#e8412c;
  --name-2:#ff9a1f;
  --c-games:#6a4fe0;
  --c-rand:#0e9f8e;
  --c-noise:#d98a00;
  --c-timer:#2f7de1;
  --c-dice:#d63a64;
  --c-lesson:#2e9e4f;
  --ok:#2e9e4f;
  --warn:#e0a400;
  --bad:#e0392d;
  --f-display:'Fredoka','Trebuchet MS','Segoe UI',system-ui,sans-serif;
  --f-body:'Nunito','Segoe UI',system-ui,sans-serif;
  --shadow:0 1px 2px rgba(22,33,62,.06),0 8px 24px rgba(22,33,62,.08);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1426;--surface:#182038;--surface-2:#222c4a;--ink:#eef1fb;--muted:#a3adcc;--line:#2c3758;
  --name:#ff6a4d;--name-2:#ffbe3d;
  --c-games:#8f7bff;--c-rand:#2fd1bd;--c-noise:#ffb42e;--c-timer:#5aa2ff;--c-dice:#ff6f95;--c-lesson:#56cf7b;
  --ok:#56cf7b;--warn:#ffcc3d;--bad:#ff6a5c;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1426;--surface:#182038;--surface-2:#222c4a;--ink:#eef1fb;--muted:#a3adcc;--line:#2c3758;
  --name:#ff6a4d;--name-2:#ffbe3d;
  --c-games:#8f7bff;--c-rand:#2fd1bd;--c-noise:#ffb42e;--c-timer:#5aa2ff;--c-dice:#ff6f95;--c-lesson:#56cf7b;
  --ok:#56cf7b;--warn:#ffcc3d;--bad:#ff6a5c;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);color-scheme:dark}

*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.45;padding-inline:16px;padding-block:16px 40px}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wrap{max-width:1040px;margin-inline:auto;display:flex;flex-direction:column;gap:20px}
.tint{--c:var(--ink)}
.t-games{--c:var(--c-games)}.t-rand{--c:var(--c-rand)}.t-noise{--c:var(--c-noise)}.t-timer{--c:var(--c-timer)}.t-dice{--c:var(--c-dice)}.t-lesson{--c:var(--c-lesson)}

/* banner */
.banner{padding-block:clamp(14px,4vw,34px) 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
.banner .w{font-family:var(--f-display);font-weight:500;font-size:clamp(1.2rem,3.4vw,2rem);color:var(--muted);letter-spacing:.02em}
.banner .nm{font-family:var(--f-display);font-weight:700;font-size:clamp(2.4rem,9.5vw,6rem);line-height:1.05;margin:2px 0;background:linear-gradient(100deg,var(--name),var(--name-2));-webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:anywhere;text-wrap:balance}
.banner .cl{font-family:var(--f-display);font-weight:600;font-size:clamp(1.4rem,4.4vw,2.6rem);color:var(--ink);letter-spacing:.14em;text-transform:uppercase}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:860px;width:100%;margin-inline:auto}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,1fr);gap:12px}}
.tile{aspect-ratio:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;padding:18px;border-radius:26px;border:0;background:color-mix(in srgb,var(--c) 13%,var(--surface));box-shadow:var(--shadow);position:relative;overflow:hidden;min-width:0;transition:transform .15s}
.tile:hover{transform:translateY(-3px)}
.tile:active{transform:scale(.97)}
.tile .ic{width:clamp(44px,30%,64px);aspect-ratio:1;border-radius:18px;background:var(--c);color:var(--surface);display:grid;place-items:center}
.tile .ic svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tile .tt{font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,2.6vw,1.6rem);line-height:1.1;color:var(--ink)}
.tile .ts{font-size:.88rem;font-weight:700;color:var(--muted);line-height:1.2}

/* tool view */
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px 8px 12px;font-weight:800}
.back:hover{border-color:var(--ink)}
.bar h1{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,4vw,2.3rem);color:var(--c);flex:1;min-width:0;line-height:1.1}
.ibtn{width:44px;height:44px;border-radius:12px;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center}
.ibtn:hover{border-color:var(--ink)}
.ibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.panel{background:var(--surface);border-radius:26px;box-shadow:var(--shadow);padding:clamp(16px,3vw,28px);display:flex;flex-direction:column;gap:18px;min-width:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:14px;border:0;background:var(--c);color:var(--surface);font-family:var(--f-display);font-weight:600;font-size:1.15rem}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--surface-2);color:var(--ink)}
.btn.sm{min-height:40px;padding:6px 16px;font-size:1rem}
.btn[disabled]{opacity:.45;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lbl{font-size:.85rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.inp{background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:9px 12px;min-width:0}
.inp:focus{border-color:var(--c)}
.note{font-size:.9rem;font-weight:700;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 16px;font-weight:800}
.chip[aria-pressed=true]{background:var(--c);border-color:var(--c);color:var(--surface)}

/* randomizer */
.stage{position:relative;border-radius:22px;background:color-mix(in srgb,var(--c) 12%,var(--surface));min-height:clamp(150px,32.5cqw,240px);display:grid;place-items:center;padding:16px;text-align:center;overflow:hidden}
.stage .big{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,10cqw,5.2rem);line-height:1.1;overflow-wrap:anywhere;text-wrap:balance}
.stage .big.idle{color:var(--muted);font-size:clamp(1.4rem,5cqw,2.4rem);font-weight:500}
.stage .big.win{color:var(--c);animation:pop .5s ease-out}
.stage .badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--c);color:var(--surface);border-radius:999px;padding:3px 16px;font-family:var(--f-display);font-weight:600;font-size:1.05rem;display:flex;gap:6px;align-items:center}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.roster{display:flex;gap:8px;flex-wrap:wrap}
.stu{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:6px 12px;font-weight:700;transition:background .08s,transform .08s}
.stu.absent{opacity:.45;text-decoration:line-through}
.stu.done{border-style:dashed;color:var(--muted)}
.stu.hot{background:var(--c);border-color:var(--c);color:var(--surface);transform:scale(1.08)}
.stu.win{background:var(--c);border-color:var(--c);color:var(--surface)}
.confetti{position:absolute;width:10px;height:14px;border-radius:2px;pointer-events:none}
textarea.inp{width:100%;min-height:180px;resize:vertical}

/* noise */
.tools{display:flex;gap:10px;flex-wrap:wrap}
.tool{display:flex;align-items:center;gap:10px;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:8px 18px 8px 10px;font-weight:800}
.tool svg{width:34px;height:34px}
.tool[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--surface))}
.light{align-self:center;width:clamp(120px,27.5cqw,170px);padding:16px 14px;border-radius:70px;background:#3a4560;border:4px solid #151b2e;display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:inset 0 0 0 3px rgba(255,255,255,.08)}
.lamp{width:100%;aspect-ratio:1;border-radius:50%;border:0;background:var(--lc-off);position:relative;transition:box-shadow .2s,background .2s;box-shadow:inset 0 -6px 12px rgba(0,0,0,.35)}
.lamp.r{--lc-off:#4a0f12;--lc-on:#ff3b30}
.lamp.y{--lc-off:#4b3407;--lc-on:#ffc21a}
.lamp.g{--lc-off:#0d3d19;--lc-on:#25e04f}
.lamp.on{background:var(--lc-on);box-shadow:0 0 28px 8px var(--lc-on),0 0 70px 18px color-mix(in srgb,var(--lc-on) 55%,transparent),inset 0 -6px 12px rgba(0,0,0,.2)}
.lamp::after{content:"";position:absolute;left:18%;top:12%;width:40%;height:22%;border-radius:50%;background:rgba(255,255,255,.28);transform:rotate(-25deg)}
.mode-big{align-self:center;width:min(87.5cqw,320px);aspect-ratio:1;border-radius:50%;background:var(--surface);border:8px solid var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:var(--shadow);color:var(--c);text-align:center;padding:12px}
.mode-big svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.mode-big .nm2{font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,5cqw,1.9rem);color:var(--ink);line-height:1}
.mode-rule{text-align:center;font-weight:800;color:var(--muted)}
.modes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mbtn{width:68px;height:68px;border-radius:50%;border:4px solid var(--line);background:var(--surface);color:var(--mc);display:grid;place-items:center;padding:0}
.mbtn svg{width:70%;height:70%;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mbtn[aria-pressed=true]{border-color:var(--mc);box-shadow:0 0 0 4px color-mix(in srgb,var(--mc) 25%,transparent)}
.gauge{position:relative;height:64px;border-radius:18px;overflow:hidden;background:var(--surface-2)}
.gauge .zones,.gauge .fill{position:absolute;inset:0}
.gauge .zones{opacity:.28}
.gauge .fill{transition:clip-path .08s linear}
.gauge .mk{position:absolute;top:0;bottom:0;width:3px;background:var(--ink);opacity:.7}
.readout{font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,7.5cqw,3.2rem);text-align:center;line-height:1}
.readout.g{color:var(--ok)}.readout.y{color:var(--warn)}.readout.r{color:var(--bad)}
.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.sl{display:flex;flex-direction:column;gap:4px}
.sl input{width:100%;accent-color:var(--c)}
.flash{animation:flash .6s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 0 var(--bad)}100%{box-shadow:0 0 0 24px transparent}}

/* timer */
.timer{display:flex;align-items:center;justify-content:center;gap:clamp(12px,5cqw,40px);flex-wrap:wrap}
.ring{position:relative;width:clamp(170px,37.5cqw,260px);aspect-ratio:1;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .tr{stroke:var(--surface-2)}
.ring .pg{stroke:var(--c);transition:stroke .3s}
.ring.low .pg{stroke:var(--bad)}
.ring.low{animation:throb 1s ease-in-out infinite}
@keyframes throb{50%{transform:scale(1.04)}}
.digits{display:grid;grid-template-columns:repeat(2,auto) auto repeat(2,auto);align-items:center;column-gap:clamp(2px,1.25cqw,10px);row-gap:4px;font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums}
.dg{font-size:clamp(3.4rem,16.25cqw,8rem);line-height:1;text-align:center;min-width:.62em}
.dg.sep{min-width:0}
.pm{width:clamp(34px,8.75cqw,46px);height:34px;border:0;background:none;color:var(--muted);font-size:1.8rem;line-height:1;font-weight:700;border-radius:10px;justify-self:center;font-family:var(--f-body)}
.pm:hover{background:var(--surface-2);color:var(--ink)}
.pm[disabled]{visibility:hidden}
.tcl{display:flex;flex-direction:column;gap:10px}
.round{width:58px;height:58px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;padding:0}
.round.main{background:var(--c);border-color:var(--c);color:var(--surface)}
.round svg{width:26px;height:26px;fill:currentColor}
.done-msg{text-align:center;font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,6.25cqw,2.6rem);color:var(--bad);min-height:1.2em}

/* dice */
.dicebox{display:flex;gap:clamp(14px,5cqw,34px);justify-content:center;flex-wrap:wrap}
.die{width:clamp(130px,32.5cqw,220px);aspect-ratio:1;border-radius:22%;background:var(--surface);border:6px solid var(--ink);position:relative;box-shadow:var(--shadow);cursor:pointer;color:var(--ink)}
.die i{position:absolute;width:18%;aspect-ratio:1;border-radius:50%;background:var(--ink)}
.die.roll{animation:wob .18s linear infinite}
@keyframes wob{0%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-6px)}100%{transform:rotate(-5deg) translateY(0)}}
.sum{text-align:center;font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,6.25cqw,2.6rem);min-height:1.2em}

/* lesson */
.prog{height:14px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.prog b{display:block;height:100%;background:var(--c);border-radius:99px;transition:width .3s}
.items{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border:2px solid var(--line);border-radius:18px;background:var(--surface)}
.item.done{background:color-mix(in srgb,var(--c) 9%,var(--surface))}
.item.done .nm3{text-decoration:line-through;color:var(--muted)}
.chk{width:44px;height:44px;border-radius:50%;border:3px solid var(--line);background:var(--surface);display:grid;place-items:center;padding:0;color:transparent}
.chk svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.item.done .chk{background:var(--c);border-color:var(--c);color:var(--surface)}
.nm3{font-weight:800;font-size:1.15rem;border:0;background:none;width:100%;min-width:0;padding:2px 4px;border-radius:8px}
.nm3:focus{background:var(--bg)}
.when{font-weight:700;color:var(--muted);font-size:.92rem;padding-inline:4px;font-variant-numeric:tabular-nums}
.imeta{display:flex;flex-direction:column;min-width:0}
.iact{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.mini{width:38px;height:38px;border-radius:10px;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;padding:0}
.mini:hover{border-color:var(--ink)}
.mini svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mins{width:70px;text-align:center}
@container (max-width:560px){.item{grid-template-columns:auto 1fr}.iact{grid-column:1/-1;justify-content:flex-start}}

/* games */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.game{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:20px;border:2px solid var(--line);background:color-mix(in srgb,var(--c) 9%,var(--surface));text-decoration:none;color:inherit;min-width:0;position:relative}
.game:hover{border-color:var(--c)}
.game b{font-family:var(--f-display);font-weight:600;font-size:1.35rem;overflow-wrap:anywhere}
.game span{font-size:.9rem;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.game .x{position:absolute;top:8px;right:8px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 20px;border-radius:999px;font-weight:800;z-index:10;max-width:calc(100% - 32px);text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* home: two big squares */
.tiles.two{grid-template-columns:repeat(2,1fr);max-width:860px;gap:clamp(12px,3vw,28px)}
.tiles.two .tile{padding:clamp(16px,3vw,28px);border-radius:32px}
.tiles.two .tile .ic{width:clamp(56px,36%,104px);border-radius:26px}
.tiles.two .tile .tt{font-size:clamp(1.25rem,5vw,2.8rem);overflow-wrap:anywhere}
.tiles.two .tile .ts{font-size:clamp(.85rem,2vw,1.1rem)}
.t-manage{--c:var(--c-rand)}

/* games library */
.gcard{display:flex;flex-direction:column;gap:0;text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:24px;overflow:hidden;padding:0;box-shadow:var(--shadow);transition:transform .15s}
.gcard:hover{transform:translateY(-3px);border-color:var(--c)}
.gcard .pv{aspect-ratio:16/9;display:block;background:#2f8f46}
.gcard .pv svg{width:100%;height:100%;display:block}
.gcard .gt{padding:14px 18px 18px;display:flex;flex-direction:column;gap:4px}
.gcard b{font-family:var(--f-display);font-weight:600;font-size:1.4rem}
.gcard span.d{font-size:.92rem;color:var(--muted);font-weight:700}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}

/* background layer */
.banner .nm{font-size:clamp(2rem,7vw,4.4rem)!important}
.tiles.two .tile{aspect-ratio:auto;min-height:clamp(150px,34vh,340px)}

#bgLayer{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;background-color:#8aa0c8;transition:opacity .3s}
#app{position:relative;z-index:1}
.banner{background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:34px;padding:clamp(16px,3vw,30px) clamp(16px,4vw,48px);max-width:860px;margin-inline:auto;box-shadow:var(--shadow);width:100%}
.bar.glass{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:22px;padding:10px 12px;box-shadow:var(--shadow)}
.bgfab{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:14px;z-index:5;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px 0 14px;border-radius:999px;border:2px solid var(--line);background:var(--surface);font-weight:800;box-shadow:var(--shadow)}
.bgfab[hidden]{display:none}
.bgfab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bgfab:hover{border-color:var(--ink)}
#manage{position:fixed;inset:0;z-index:20;overflow:hidden;color:#fff;--sc-ink:#fff}
#manage[data-ink="dark"]{color:#1c2340;--sc-ink:#1c2340}
.mtop{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:max(14px,env(safe-area-inset-top,0px)) 16px 0;z-index:3000;pointer-events:none}
.mtop>*{pointer-events:auto}
.mtop .sp{flex:1}
.gbtn{display:inline-flex;align-items:center;gap:8px;height:46px;min-width:46px;justify-content:center;padding:0 16px 0 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(20,24,50,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-weight:800}
#manage[data-ink="dark"] .gbtn{background:rgba(255,255,255,.62);border-color:rgba(0,0,0,.12);color:#1c2340}
.gbtn.sq{padding:0;width:46px}
.gbtn:hover{filter:brightness(1.15)}
.gbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.clockbox{position:absolute;left:0;right:0;top:19%;text-align:center;pointer-events:none;text-shadow:0 2px 24px rgba(0,0,0,.3);z-index:1;padding-inline:16px}
#manage[data-ink="dark"] .clockbox{text-shadow:0 2px 20px rgba(255,255,255,.5)}
.clockbox .tm{font-family:var(--f-display);font-weight:600;font-size:clamp(4.2rem,20vw,11rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clockbox .dt{font-family:var(--f-display);font-weight:500;font-size:clamp(1.1rem,3.6vw,2rem);opacity:.95;margin-top:4px}
.clockbox .hint{margin-top:18px;font-weight:700;opacity:.85;font-size:clamp(.95rem,2.4vw,1.2rem)}
.hasw .clockbox .hint{display:none}
.dockwrap{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom,0px));display:flex;justify-content:center;padding-inline:10px;z-index:3000;pointer-events:none}
.dock{pointer-events:auto;display:flex;gap:clamp(4px,1.6vw,18px);padding:clamp(8px,1.6vw,14px) clamp(8px,2vw,22px);border-radius:34px;background:rgba(255,255,255,.3);border:1.5px solid rgba(255,255,255,.65);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 18px 50px rgba(20,20,60,.3);max-width:100%;overflow-x:auto}
.dk{width:clamp(52px,11vw,100px);display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:4px;border-radius:20px;color:#fff;flex:none;transition:transform .18s}
#manage[data-ink="dark"] .dk{color:#1c2340}
.dk:hover{transform:translateY(-8px) scale(1.08)}
.dk:active{transform:scale(.94)}
.dk .dki{width:100%;aspect-ratio:1;border-radius:26%;display:grid;place-items:center;background:linear-gradient(145deg,var(--g1),var(--g2));box-shadow:0 8px 18px rgba(20,20,60,.3),inset 0 2px 0 rgba(255,255,255,.45)}
.dk .dki svg{width:74%;height:74%;display:block}
.dk .dkl{font-weight:800;font-size:clamp(.5rem,1.7vw,.95rem);line-height:1.1;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.35)}
#manage[data-ink="dark"] .dk .dkl{text-shadow:none}
.dk[aria-pressed=true] .dki{outline:4px solid #fff;outline-offset:2px}
/* floating windows */
.win{position:absolute;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);border-radius:22px;box-shadow:0 14px 40px rgba(10,10,40,.35),0 0 0 1px rgba(255,255,255,.4);overflow:hidden;animation:winin .2s ease-out}
.win.front{box-shadow:0 24px 70px rgba(10,10,40,.5),0 0 0 3px var(--c)}
@keyframes winin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.win .wh{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 16px;border-bottom:2px solid var(--line);background:var(--surface);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;flex:none}
.win .wh:active{cursor:grabbing}
.win .wh h1{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.25rem;color:var(--c);flex:1;line-height:1.1;pointer-events:none}
.win .wh .ibtn{width:38px;height:38px;border-radius:10px}
.win .wb{flex:1;overflow:auto;padding:10px;container-type:inline-size;min-height:0}
.win .wb>.panel{box-shadow:none;padding:clamp(10px,2.6cqw,24px)}
.rs{position:absolute;touch-action:none;z-index:2}
.rs.r{right:0;top:48px;bottom:26px;width:12px;cursor:ew-resize}
.rs.b{bottom:0;left:0;right:26px;height:12px;cursor:ns-resize}
.rs.c{right:0;bottom:0;width:28px;height:28px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 52%,var(--muted) 52%,var(--muted) 58%,transparent 58%,transparent 70%,var(--muted) 70%,var(--muted) 76%,transparent 76%);opacity:.7;border-radius:0 0 22px 0}
/* seamless widgets */
.dk{width:clamp(40px,10vw,100px)}
.win{background:var(--surface);border-radius:20px;box-shadow:0 10px 34px rgba(10,10,40,.28)}
.win.front{box-shadow:0 18px 50px rgba(10,10,40,.42)}
.win .wh{position:absolute;left:0;right:0;top:0;height:32px;padding:0;border:0;background:none;z-index:3}
.win .wh::before{content:"";position:absolute;left:50%;top:9px;width:36px;height:5px;border-radius:3px;background:var(--line);transform:translateX(-50%)}
.win .wh h1{display:none}
.win .wh .ibtn{position:absolute;top:6px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink) 9%,transparent);opacity:.55;transition:opacity .15s}
.win:hover .wh .ibtn,.win.front .wh .ibtn,.win .wh .ibtn:focus-visible{opacity:1}
.win .wh .ibtn svg{width:16px;height:16px}
.win .wb{position:relative;padding:0;overflow:hidden;container-type:normal}
.sbox{position:absolute;left:0;top:0;transform-origin:0 0;container-type:inline-size}
.sbox.fitw{position:relative}
.win .wb:has(.fitw){overflow-x:hidden;overflow-y:auto}
.sbox>.panel{background:transparent;box-shadow:none;border-radius:0;padding:30px 24px 22px;min-height:0;justify-content:flex-start}
.rs.r{top:32px}
/* tic tac toe */
.ttt{display:grid;grid-template-columns:minmax(150px,220px) 1fr minmax(150px,220px);gap:clamp(10px,2.4vw,26px);align-items:start;margin-top:18px}
@media (max-width:760px){.ttt{grid-template-columns:1fr 1fr}.ttt .tmid{grid-column:1/-1;order:3}}
.tscore{background:color-mix(in srgb,var(--surface) 88%,transparent);border-radius:24px;box-shadow:var(--shadow);padding:14px;text-align:center;border:4px solid transparent;display:flex;flex-direction:column;align-items:center;gap:2px;--tc:#e8412c}
.tscore.o{--tc:#2f7de1}
.tscore .mk{width:44px;height:44px;color:var(--tc)}.tscore .mk svg{width:100%;height:100%}
.tscore .tn{font-family:var(--f-display);font-weight:600;font-size:1.25rem;overflow-wrap:anywhere}
.tscore .ts{font-family:var(--f-display);font-weight:700;font-size:3rem;line-height:1;color:var(--tc)}
.tscore .tl{font-weight:800;color:var(--tc);font-size:.9rem;min-height:1.2em}
.tscore.turn{border-color:var(--tc);box-shadow:0 0 0 6px color-mix(in srgb,var(--tc) 22%,transparent),var(--shadow)}
.tmid{display:flex;flex-direction:column;gap:12px;align-items:center;min-width:0}
.tmsg{background:color-mix(in srgb,var(--surface) 88%,transparent);padding:8px 20px;border-radius:999px;font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,2.6vw,1.4rem);text-align:center;box-shadow:var(--shadow)}
.tmsg.big{animation:pop .5s ease-out;color:var(--ok)}
.tboard{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.4vw,12px);width:min(100%,calc(100vh - 290px),560px);min-width:230px;aspect-ratio:1;padding:clamp(8px,1.6vw,14px);border-radius:28px;background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.tc{border:0;border-radius:20px;background:var(--surface);box-shadow:inset 0 -5px 0 rgba(22,33,62,.08);display:grid;place-items:center;padding:14%;transition:transform .12s}
.tc:not(:disabled):hover{transform:scale(1.04);background:color-mix(in srgb,var(--c-games) 12%,var(--surface))}
.tc svg{width:100%;height:100%}
.tc.x{color:#e8412c}.tc.o{color:#2f7de1}
.tc.win{background:#fff3b0;animation:pop .5s ease-out}
.tmodal{position:fixed;inset:0;z-index:70;background:rgba(10,14,34,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:14px;overflow:auto}
.tmodal[hidden]{display:none}
.tcard{background:var(--bg);color:var(--ink);border-radius:28px;padding:clamp(18px,3vw,34px);width:min(760px,100%);display:flex;flex-direction:column;gap:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);border-top:10px solid var(--tc,#e8412c);max-height:100%;overflow:auto;--tc:#e8412c;--c:var(--c-games)}
.tcard.o{--tc:#2f7de1}
.tcard.cfg{--tc:var(--c-games)}.tcard.cfg h2{margin:0;font-family:var(--f-display)}
.tcard textarea{min-height:200px}
.tbadge{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:1.2rem;color:var(--tc)}
.tbadge svg{width:34px;height:34px}
.tq{font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,4.4vw,2.6rem);line-height:1.2;text-align:center;overflow-wrap:anywhere}
.topts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:520px){.topts{grid-template-columns:1fr}}
.topt{min-height:64px;border-radius:18px;border:3px solid var(--line);background:var(--surface);font-family:var(--f-display);font-weight:600;font-size:clamp(1.1rem,2.6vw,1.5rem);padding:10px 14px;overflow-wrap:anywhere}
.topt:not(:disabled):hover{border-color:var(--tc)}
.topt.right{background:var(--ok);border-color:var(--ok);color:#fff}.topt.wrong{background:var(--bad);border-color:var(--bad);color:#fff}
.tans{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,5vw,3rem);text-align:center;color:var(--tc)}
.topts:has(.tans){display:flex;flex-direction:column;gap:14px}
.tfb{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:1.2rem}
.tfb:empty{display:none}
.tfb.good b{color:var(--ok)}.tfb.bad b{color:var(--bad)}
.tfb span{font-weight:800}
/* pilot */
#pilotView{position:fixed;inset:0;z-index:30;background:#5ba3e6;overflow:hidden;color:#fff}
#pilotView[hidden]{display:none}
#pCv{position:absolute;inset:0;touch-action:none;cursor:ns-resize;display:block}
.phud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:max(10px,env(safe-area-inset-top,0px)) 14px 10px;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none}
.phud>*{pointer-events:auto}
.phud .pt{font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,3vw,1.8rem);text-shadow:0 2px 8px rgba(20,50,100,.45);min-width:3.2ch}
.phud .ptitle{flex:1;text-align:center;font-family:var(--f-display);font-weight:500;font-size:clamp(.95rem,2.6vw,1.6rem);text-shadow:0 2px 8px rgba(20,50,100,.45);pointer-events:none}
.phud .pr{display:flex;align-items:center;gap:12px}
.phud .hearts{display:flex;gap:4px}
.hearts i{width:30px;height:30px;color:rgba(255,255,255,.35);display:block}.hearts i.on{color:#fff;filter:drop-shadow(0 2px 4px rgba(20,50,100,.4))}
.hearts svg{width:100%;height:100%;fill:currentColor}
.phud .ps{display:flex;align-items:center;gap:4px;font-family:var(--f-display);font-weight:600;font-size:1.6rem;text-shadow:0 2px 8px rgba(20,50,100,.45)}
.pq{position:absolute;left:clamp(10px,2vw,28px);right:clamp(10px,2vw,28px);top:max(64px,calc(env(safe-area-inset-top,0px) + 58px));min-height:clamp(56px,10vh,96px);display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 22px;background:rgba(25,50,95,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:18px;font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,3.6vw,2.4rem);line-height:1.2;overflow-wrap:anywhere;z-index:2;pointer-events:none}
.pfb{position:absolute;left:50%;top:max(150px,calc(env(safe-area-inset-top,0px) + 150px));transform:translateX(-50%);z-index:3;padding:8px 24px;border-radius:999px;font-family:var(--f-display);font-weight:700;font-size:clamp(1.1rem,3vw,1.8rem);max-width:calc(100% - 24px);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25);overflow-wrap:anywhere}
.pfb[hidden]{display:none}
.pfb.good{background:#18b45b;color:#fff}.pfb.bad{background:#fff;color:#c21e2e}
.pov{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(20,45,90,.35)}
.pov[hidden]{display:none}
.pcard{background:var(--bg);color:var(--ink);border-radius:28px;padding:clamp(20px,4vw,38px);width:min(520px,100%);text-align:center;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.4);--c:var(--c-timer)}
.pcard h2{margin:0;font-family:var(--f-display);font-size:clamp(1.8rem,5vw,2.6rem);color:var(--c)}
.pcard p{margin:0;font-weight:700;color:var(--muted)}
.pbig{font-family:var(--f-display);font-weight:700;font-size:clamp(3rem,10vw,5rem);line-height:1;color:var(--c)}.pbig span{font-size:.4em;color:var(--muted)}
/* mole */
#moleView{position:fixed;inset:0;z-index:30;overflow:hidden;color:#fff;background:linear-gradient(180deg,#76c3ee 0%,#c5ebfb 50%,#eaf7d6 100%);cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M10 38L26 20' stroke='%236b4423' stroke-width='6' stroke-linecap='round'/%3E%3Crect x='20' y='4' width='22' height='14' rx='3' transform='rotate(40 31 11)' fill='%23c0392b' stroke='%237a1d12' stroke-width='2'/%3E%3C/svg%3E") 8 36,pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#moleView[hidden]{display:none}
#moleView::before{content:"";position:absolute;left:8%;top:30%;width:180px;height:50px;border-radius:50px;background:#fff;opacity:.75;box-shadow:60px -22px 0 12px #fff,120px 4px 0 -2px #fff}
#moleView::after{content:"";position:absolute;right:6%;top:42%;width:150px;height:42px;border-radius:50px;background:#fff;opacity:.7;box-shadow:-50px -18px 0 8px #fff,-100px 4px 0 -2px #fff}
.mhill{position:absolute;left:-18%;right:-18%;bottom:-10%;height:72%;border-radius:50% 50% 0 0/20% 20% 0 0;background:radial-gradient(ellipse at 50% 0%,#92d56b,#62b24b 55%,#4b9641);box-shadow:inset 0 10px 0 rgba(255,255,255,.12)}
.msign{position:absolute;left:50%;top:max(62px,calc(env(safe-area-inset-top,0px) + 56px));transform:translateX(-50%);width:min(94%,860px);z-index:2;text-align:center;padding:10px 22px 14px;border-radius:16px;border:5px solid #6b4423;background:repeating-linear-gradient(90deg,#b9824a 0 46px,#ad773f 46px 48px);box-shadow:0 8px 0 #5a381c,0 14px 24px rgba(40,20,0,.3);pointer-events:none}
.msign .mrule{font-weight:800;font-size:clamp(.7rem,1.8vw,.95rem);color:#ffe9c2;letter-spacing:.05em;text-transform:uppercase;opacity:.9}
.msign .mqt{font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,3.8vw,2.5rem);line-height:1.2;color:#fff8e6;text-shadow:0 2px 0 #5a381c;overflow-wrap:anywhere;min-height:1.2em}
.mbar{height:8px;border-radius:99px;background:rgba(60,30,5,.45);overflow:hidden;margin-top:8px}
.mbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd166,#ff9f1c);border-radius:99px;transition:width .1s linear}
#moleView .pfb{top:max(190px,calc(env(safe-area-inset-top,0px) + 190px))}
.mgrid{position:absolute;left:50%;bottom:max(12px,2.5vh);transform:translateX(-50%);width:min(94%,calc((100vh - 270px)*1.5),880px);display:grid;grid-template-columns:repeat(3,1fr);gap:0 2%;z-index:1}
.hole{position:relative;aspect-ratio:1.45;border:0;background:none;padding:0;cursor:inherit;container-type:inline-size;-webkit-tap-highlight-color:transparent}
.hole .hbk{position:absolute;left:6%;right:6%;bottom:8%;height:36%;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#2a170b,#4d2d17);box-shadow:0 5px 0 #3b8a38,0 -4px 0 #7a4a2a}
.hole .hfr{position:absolute;left:3%;right:3%;bottom:0;height:24%;border-radius:0 0 50% 50%/0 0 100% 100%;background:linear-gradient(180deg,#8a5a34,#6a4023);box-shadow:0 4px 0 rgba(0,0,0,.12);z-index:3}
.mwrap{position:absolute;left:14%;right:14%;bottom:0;height:200%;clip-path:inset(0 -30% 12% -30%);z-index:2;pointer-events:none}
.mole{position:absolute;left:0;right:0;bottom:0;transform:translateY(105%);transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.mole.up{transform:translateY(0)}
.mole svg{display:block;width:100%;height:auto}
.mole .plq{position:absolute;left:2%;right:2%;bottom:23%;min-height:21%;display:grid;place-items:center;padding:3% 4%;background:#fffdf4;border:3px solid #6b4423;border-radius:12px;box-shadow:0 3px 0 rgba(0,0,0,.2);color:#2b2118;text-align:center;line-height:1.05;overflow-wrap:anywhere}
.mole .plq b{font-family:var(--f-display);font-weight:700;font-size:14cqw}
.mole .plq[data-len=m] b{font-size:10cqw}.mole .plq[data-len=l] b{font-size:7.4cqw}
.mole.good .plq{background:#c8f7d4;border-color:#18b45b}
.mole.bad .plq{background:#ffc9c9;border-color:#d92d2d;animation:moshake .3s}
@keyframes moshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.mole.good svg,.mole.bad svg{animation:mohit .35s}
@keyframes mohit{0%{transform:scaleY(1)}40%{transform:scaleY(.82)}100%{transform:scaleY(1)}}
.mallet{position:absolute;width:70px;height:70px;margin:-48px 0 0 -52px;pointer-events:none;z-index:9;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cpath d='M12 62L38 34' stroke='%236b4423' stroke-width='9' stroke-linecap='round'/%3E%3Crect x='30' y='4' width='34' height='22' rx='5' transform='rotate(40 47 15)' fill='%23c0392b' stroke='%237a1d12' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;transform-origin:20% 90%;animation:swing .36s ease-out forwards}
@keyframes swing{0%{transform:rotate(-55deg);opacity:1}55%{transform:rotate(18deg)}100%{transform:rotate(18deg);opacity:0}}
.m3{position:absolute;left:0;top:0;z-index:0;touch-action:none;display:block}
#moleView.m3on::before,#moleView.m3on::after,#moleView.m3on .mhill,#moleView.m3on .mgrid{display:none}
#moleView .phud,#moleView .pfb{z-index:6}
#moleView .msign{z-index:5}
.mfx{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.mpop{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,7vw,4.6rem);letter-spacing:.02em;white-space:nowrap;-webkit-text-stroke:6px #2b1a0e;paint-order:stroke fill;text-shadow:0 6px 0 #2b1a0e;animation:mpop .95s cubic-bezier(.2,1.4,.4,1) forwards}
.mpop.good{color:#ffe14d}.mpop.bad{color:#ff5a5a}.mpop.combo{color:#7dffb0;font-size:clamp(1.4rem,4.5vw,2.8rem)}
@keyframes mpop{0%{transform:translate(-50%,-30%) rotate(var(--r)) scale(.2);opacity:0}18%{transform:translate(-50%,-60%) rotate(var(--r)) scale(1.35);opacity:1}35%{transform:translate(-50%,-60%) rotate(var(--r)) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-150%) rotate(var(--r)) scale(1.05);opacity:0}}
.mflash{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0}
.mflash.good{background:radial-gradient(circle,rgba(255,255,255,.55),rgba(60,230,120,.4));animation:mfl .45s ease-out}
.mflash.bad{background:radial-gradient(circle,rgba(255,60,60,.05),rgba(230,30,30,.55));animation:mfl .55s ease-out}
@keyframes mfl{0%{opacity:1}100%{opacity:0}}
.mvig{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;box-shadow:inset 0 0 120px 40px rgba(230,30,30,.65);transition:opacity .3s}
.mvig.low{opacity:1;animation:mvg .6s ease-in-out infinite alternate}
@keyframes mvg{from{opacity:.35}to{opacity:1}}
.mshk .msign,.mshk .phud{animation:mshk .4s}
@keyframes mshk{0%,100%{translate:0 0}15%{translate:-9px 4px}30%{translate:8px -5px}45%{translate:-6px 3px}60%{translate:5px -2px}80%{translate:-2px 1px}}
.hearts.hit{animation:mheart .5s}
@keyframes mheart{0%,100%{transform:scale(1)}25%{transform:scale(1.35) rotate(-8deg)}50%{transform:scale(.9) rotate(8deg)}75%{transform:scale(1.15)}}
#moleView .pov{z-index:9}#moleView .tmodal{z-index:10}
.mteams{display:flex;gap:8px}
.mtm{display:flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;font-weight:800;font-size:.95rem;color:#fff;background:rgba(20,40,80,.45);border:3px solid transparent;transition:transform .2s,box-shadow .2s;max-width:30vw}
.mtm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtm b{font-family:var(--f-display);font-size:1.4rem;line-height:1;min-width:1ch;text-align:center}
.mtm.t0{background:#2f7be0}.mtm.t1{background:#e8503f}
.mtm.on{border-color:#fff;transform:scale(1.12);box-shadow:0 0 0 3px rgba(255,255,255,.4),0 6px 16px rgba(0,0,0,.3)}
.mtm:not(.on){opacity:.75}
.mteams.hit{animation:mheart .5s}
.ptitle.t0{color:#cfe4ff}.ptitle.t1{color:#ffd6d0}
.mrule.t0{color:#bcd9ff!important}.mrule.t1{color:#ffc6bd!important}
.mpop.turn{font-size:clamp(1.8rem,6vw,3.6rem);animation-duration:1.3s}
.mpop.turn.t0{color:#7db8ff}.mpop.turn.t1{color:#ff8a7a}
.mfin{display:flex;gap:14px;justify-content:center;margin:10px 0}
.mfin>div{flex:1;border-radius:16px;padding:12px;color:#fff;display:grid;gap:2px}
.mfin .t0{background:#2f7be0}.mfin .t1{background:#e8503f}
.mfin span{font-weight:800;overflow:hidden;text-overflow:ellipsis}.mfin b{font-family:var(--f-display);font-size:3rem;line-height:1}
.mdiff{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.mdiff .btn.on{background:#2f7be0;color:#fff;border-color:#2f7be0}
/* bank */
#bankView{padding-bottom:110px}
.t-bank{--c:#0e9f8e}
.tiles.two.three{grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,22px)}
.tiles.two.three .tile .tt{font-size:clamp(1.05rem,3.2vw,2.2rem)}
@media (max-width:640px){.tiles.two.three{grid-template-columns:1fr 1fr}}
.bknote{margin:16px 2px 0;font-weight:700;color:var(--muted)}
.bktree{margin-top:14px;display:grid;gap:12px}
.bktree.pick{max-height:52vh;overflow:auto;padding:2px}
.bku{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:6px;box-shadow:var(--shadow)}
.bks{background:color-mix(in srgb,var(--c) 7%,var(--surface));border-radius:14px;margin:4px 0}
.bkc2{padding-left:clamp(10px,3vw,26px)}
.bkh{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;min-height:46px;flex-wrap:wrap}
.bkh.k-u .bkn{font-family:var(--f-display);font-weight:600;font-size:1.3rem}
.bkh.k-s .bkn{font-weight:800;font-size:1.05rem}
.bkn{flex:1;min-width:90px;cursor:pointer;overflow-wrap:anywhere;font-weight:700}
.bkt{width:30px;height:30px;border:0;background:none;color:var(--muted);display:grid;place-items:center;border-radius:8px;transition:transform .15s;flex:none}
.bkt.o{transform:rotate(90deg)}
.bksp{width:30px;flex:none}
.bkck{width:22px;height:22px;accent-color:var(--c);flex:none}
.bkb{font-size:.8rem;font-weight:800;padding:3px 10px;border-radius:99px;background:var(--surface-2);color:var(--muted);flex:none}
.bkx{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bki{display:inline-flex;align-items:center;gap:6px;height:36px;min-width:36px;padding:0 10px;justify-content:center;border:0;border-radius:10px;background:var(--surface-2);color:var(--ink);font-weight:800;font-size:.85rem}
.bki.add{background:color-mix(in srgb,var(--c) 18%,var(--surface));color:var(--c)}
.bki svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bki:hover{filter:brightness(.95)}
.bkempty{padding:30px 14px;text-align:center;font-weight:700;color:var(--muted)}.bkempty.sm{padding:8px 10px;text-align:left;font-size:.9rem}
.bkplay{position:sticky;bottom:12px;margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;padding:10px 14px;border-radius:20px;z-index:5}
.bks1{font-weight:800}.bks1 b{font-family:var(--f-display);font-size:1.4rem;color:var(--c)}
.bkclr{border:0;background:none;color:var(--muted);text-decoration:underline;font-weight:700;margin-left:6px}
.bkg{display:flex;gap:8px;flex-wrap:wrap}
.bkg .btn[disabled],#bOk[disabled]{opacity:.45;pointer-events:none}
.bkm{z-index:100000}
.bkedit textarea{min-height:36vh}
/* quiz-game shell */
.qg{position:fixed;inset:0;z-index:30;overflow:hidden;color:#fff;background:#8fd5f5;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.qg[hidden]{display:none}
.qg .phud,.qg .pfb{z-index:6}
.qg .msign{z-index:5}
.qg .pfb{top:max(190px,calc(env(safe-area-inset-top,0px) + 190px))}
.qg .pov{z-index:9}
.qg .tmodal{z-index:10}

.pchips{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom,0px));display:flex;gap:8px;justify-content:center;flex-wrap:wrap;z-index:5;pointer-events:none;padding:0 12px}
.pchips b,.pchips .pc0{font-family:var(--f-display);font-weight:600;font-size:clamp(.95rem,2.4vw,1.35rem);padding:6px 14px;border-radius:99px;background:#fff;color:#14523a;box-shadow:0 4px 14px rgba(20,50,100,.25);animation:pcin .35s cubic-bezier(.3,1.6,.5,1)}
.pchips .pc0{background:rgba(20,40,80,.65);color:#fff}
@keyframes pcin{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

.fpw{position:absolute;left:50%;transform:translateX(-50%);bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:5;width:min(440px,84vw);display:none;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.fpw.on{display:flex}
.fpt{width:100%;height:24px;border-radius:99px;background:rgba(20,40,80,.55);padding:3px;box-shadow:0 4px 14px rgba(20,50,100,.3)}
.fpt i{display:block;height:100%;width:0;border-radius:99px}
.fpw span{font-family:var(--f-display);font-weight:600;font-size:clamp(.9rem,2.4vw,1.2rem);text-shadow:0 2px 8px rgba(20,50,100,.6)}
.phud{z-index:10!important}.msl{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(90deg,#6366f1 var(--v,40%),#e9e9ee var(--v,40%));outline:0;margin:9px 0;position:relative;z-index:2}.msl::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#6366f1;border:0;cursor:pointer}.msl::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#6366f1;border:0;cursor:pointer}.mcirc{width:80px;height:80px;border-radius:50%;border:1.5px solid #1c2340;background:#fff;color:#1c2340;display:grid;place-items:center;cursor:pointer}.mcirc svg,.mcnt svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mcirc.on{background:#1c2340;color:#fff}.mcnt{display:flex;align-items:center;gap:12px;height:66px;padding:0 22px;border-radius:33px;border:0;background:#eceefd;color:#6366f1;cursor:pointer}.mcnt svg{width:32px;height:32px}.mcnt b{font-family:var(--f-display);font-size:34px;font-weight:600}.clockbox{display:none!important}.gmute svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.btn.gmute{padding:6px 10px}.btn.gmute svg{display:block}
/* management: white, calm, consistent with the picture */
#manage .gbtn,#manage[data-ink="dark"] .gbtn{background:#fff;color:#1c2340;border:0;border-radius:14px;width:46px;height:46px;min-width:46px;padding:0;font-size:0;box-shadow:0 4px 16px rgba(20,20,60,.2);backdrop-filter:none;-webkit-backdrop-filter:none}
#manage .gbtn:hover{background:#f1f3fb}
#manage .gbtn svg{width:22px;height:22px}
.dockwrap{pointer-events:none}
.dockbar{pointer-events:auto;display:flex;align-items:center;gap:6px;background:#fff;border-radius:18px;box-shadow:0 10px 36px rgba(20,20,60,.3);padding:8px 10px;max-width:100%}
.dock{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;border-radius:0;gap:clamp(2px,.8vw,10px)}
.dk,#manage[data-ink="dark"] .dk{color:#1c2340}
.dk .dki{background:#fff;box-shadow:none;border-radius:16px;--tint:color-mix(in srgb,var(--g2) 13%,#fff)}
.dk .dki svg [fill="#fff"]{fill:var(--tint);stroke:var(--g2);stroke-width:2.6;stroke-linejoin:round}
.dk .dki svg [stroke="#fff"]{stroke:var(--g2)}
.dk .dkl,#manage[data-ink="dark"] .dk .dkl{text-shadow:none;color:#1c2340;font-weight:600}
.dk:hover{transform:translateY(-4px)}
.dk[aria-pressed=true] .dki{outline:0;background:color-mix(in srgb,var(--g2) 12%,#fff)}
.dkt{flex:none;width:38px;height:38px;border-radius:12px;border:0;background:#f1f3fb;color:#1c2340;display:grid;place-items:center;align-self:flex-end;cursor:pointer}
.dkt:hover{background:#e4e8f6}
.dkt svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dkt .ex{display:none}
#manage.dcol .dock{display:none}
#manage.dcol .dkt .ex{display:block}#manage.dcol .dkt .co{display:none}
#manage.dcol .dockbar{padding:6px}
/* widgets: always white, resized only by the four corners (the whole thing scales) */
.win{--surface:#fff;--surface-2:#f4f6fc;--ink:#1c2340;--muted:#6b7499;--line:#e3e7f3;background:#fff;color:#1c2340;overflow:visible;border-radius:6px;box-shadow:0 6px 24px rgba(10,10,40,.22)}
.win.front{box-shadow:0 10px 32px rgba(10,10,40,.3);outline:2px solid #7b78f0;outline-offset:0}
.win .wb{border-radius:6px;overflow:hidden;background:#fff}
.win .wh .ibtn{top:5px;right:6px}
.rs{display:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #7b78f0;z-index:6;box-shadow:0 1px 4px rgba(0,0,0,.25);background-image:none;opacity:1;top:auto;left:auto;right:auto;bottom:auto}
.win.front .rs{display:block}
.rs.nw{left:-9px;top:-9px;cursor:nwse-resize}
.rs.ne{right:-9px;top:-9px;cursor:nesw-resize}
.rs.sw{left:-9px;bottom:-9px;cursor:nesw-resize}
.rs.se{right:-9px;bottom:-9px;cursor:nwse-resize}
@media (pointer:coarse){.rs{width:26px;height:26px}.rs.nw{left:-13px;top:-13px}.rs.ne{right:-13px;top:-13px}.rs.sw{left:-13px;bottom:-13px}.rs.se{right:-13px;bottom:-13px}}
/* tighter frames, bigger content, smaller toolbar */
.sbox>.panel{padding:26px 12px 12px!important}
.win .wb:has(.fitw){overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
.dk,#manage[data-ink="dark"] .dk{width:clamp(50px,6.8vw,76px);padding:2px;gap:3px}
.dk .dki{border-radius:12px}
.dk .dkl{font-size:clamp(.55rem,.95vw,.68rem);overflow:visible}.dk .dki{width:80%}
.dockbar{padding:5px 8px;border-radius:14px}
.dkt{width:30px;height:30px;border-radius:10px}.dkt svg{width:17px;height:17px}
/* lesson v2 */
.t-lesson .panel.lsn{padding:10px 14px 6px!important;gap:0!important;background:#fff;color:#14122b}
.lsn .lh{display:flex;align-items:center;gap:8px;padding:2px 0 8px}
.lsn .lh h2{margin:0;font-size:30px;line-height:1.05;font-weight:800;letter-spacing:-.5px;flex:1;font-family:var(--f-body)}
.lsn .lc{font-weight:800;color:#6d4aff;font-size:18px}
.lsn .le{width:36px;height:36px;border-radius:10px;border:0;background:#f1edff;color:#6d4aff;display:grid;place-items:center;font-size:20px;padding:0}
.lsn .le svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lsn .lt{padding:6px 0;border-top:1px solid #ece9f6}
.lsn .lr{list-style:none;margin:0;padding:0}
.lsn .li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #ece9f6}
.lsn .ltile{flex:none;width:60px;height:60px;border-radius:14px;border:0;background:#ece6ff;color:#6d4aff;display:grid;place-items:center;padding:0}
.lsn .ltile svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.lsn .li.done .ltile{background:#6d4aff;color:#fff}
.lsn .li.done .ltile svg{display:none}
.lsn .li.done .ltile::after{content:"\2713";font-size:30px;font-weight:800}
.lsn .lm{flex:1;min-width:0}
.lsn .lnm{font-size:28px;line-height:1.1;font-weight:800;border:0;background:none;width:100%;padding:0;color:#14122b;overflow-wrap:anywhere}
.lsn input.lnm{background:#f6f4fd;border-radius:8px;padding:2px 6px}
.lsn .li.done .lnm{color:#8d89a8;text-decoration:line-through}
.lsn .ltm{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:#6c6888;margin-top:4px;font-variant-numeric:tabular-nums}
.lsn .lbar{flex:1;height:5px;border-radius:9px;background:#e6e1f7;overflow:hidden;min-width:20px}
.lsn .lbar b{display:block;height:100%;width:0;background:#6d4aff}
.lsn .li.done .lbar b{width:100%}
.lsn .lck{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid #d6d0ee;background:none;color:transparent;display:grid;place-items:center;padding:0}
.lsn .lck svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.lsn .li.done .lck{background:#6d4aff;border-color:#6d4aff;color:#fff}
.lsn .iact{margin-top:6px;justify-content:flex-start}
.lsn .iact{flex-wrap:nowrap!important;gap:4px}.lsn .iact .mins{width:56px}.lsn .iact .mini{width:34px;height:34px}

#gtools{position:fixed;inset:0;z-index:9000;pointer-events:none}
#winLayer{position:absolute;inset:0;pointer-events:none}
#gtools .win{pointer-events:auto}
#gtools .dockwrap{position:absolute;left:0;top:0;right:auto;bottom:auto;padding:0;display:block;width:max-content;max-width:100vw;z-index:3000;will-change:transform}
#gtools .dockbar{pointer-events:auto;touch-action:none}
#gtools.dcol .dock{display:none}
#gtools.dcol .dkt .ex{display:block}#gtools.dcol .dkt .co{display:none}
#gtools.dcol .dockbar{padding:6px}
.dgrip{flex:none;width:22px;height:38px;border:0;background:none;color:#a4abc8;cursor:grab;display:grid;place-items:center;padding:0;align-self:flex-end;touch-action:none}
.dgrip:active{cursor:grabbing}.dgrip svg{width:18px;height:18px;fill:currentColor}
#gallery{z-index:9500!important}.toast{z-index:9600!important}
.tiles.two.three .tile .tt{font-size:clamp(1.05rem,2.5vw,1.9rem);overflow-wrap:normal}
#fsTop,.bgfab{position:fixed}.fstop{pointer-events:auto;z-index:9100;width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:#fff;color:#1c2340;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 4px 16px rgba(20,20,60,.25);position:absolute;top:72px;right:14px}.fstop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}#gtools[data-view=home] .fstop,#gtools[data-view=games] .fstop{top:12px;right:68px}#gtools[data-view=manage] .fstop{display:none}.bgfab{width:46px;padding:0!important;font-size:0!important;gap:0!important;justify-content:center}.bgfab svg{width:22px;height:22px}
/* parents */
#parentsView{padding-bottom:110px}.t-parents{--c:#d9480f}
.pacc{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--muted);font-size:.85rem}.pacc .inp{width:76px;text-align:center}
.pacard{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:14px;margin-top:14px;box-shadow:var(--shadow)}
.pal{font-weight:800;margin-bottom:6px}.pal .note{font-weight:600;margin-left:6px}
.pachips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.patpl{display:inline-flex;align-items:stretch;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2);max-width:100%}
.patpl>button:first-child{border:0;background:none;padding:8px 12px;text-align:start;font-weight:700;font-size:.9rem;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.patpl>button:first-child:hover{background:color-mix(in srgb,var(--c) 14%,var(--surface))}
.patpl .tx{border:0;background:none;color:var(--muted);padding:0 10px;font-size:1.1rem;font-weight:800}
.palist{display:grid;gap:8px;margin-top:12px}
.para{display:grid;grid-template-columns:auto minmax(150px,1.6fr) 110px minmax(150px,1fr) minmax(140px,1.6fr) auto 110px auto;gap:8px;align-items:center;padding:8px 10px;border:2px solid var(--line);border-radius:14px;background:var(--surface)}
.para.sent{background:#e9f8ef;border-color:#9bd9b4}
.para .inp{font-size:1rem;padding:8px 10px;min-width:0}
.para .pan{font-weight:800}
.pasend{display:inline-flex;align-items:center;gap:6px;background:#1fa855!important}
.para.sent .pasend{background:#6c7a8e!important}.para.sent .pasend span::after{content:" \2713"}
.pap{margin-top:12px}.pap summary{cursor:pointer;font-weight:800}
@media (max-width:900px){.para{grid-template-columns:auto 1fr 1fr auto auto}.para .pam,.para .pamv{grid-column:2/-1}}
#paBar{position:sticky;top:10px;bottom:auto;margin:14px 0 0;z-index:30}
#paBar{background:#fff!important;box-shadow:0 6px 20px rgba(20,20,60,.18)}
.tiles.two.three{grid-template-columns:repeat(4,1fr)!important;max-width:1080px!important}.tiles.two.three .tile{min-height:clamp(150px,30vh,300px)!important;aspect-ratio:auto;padding:clamp(12px,1.8vw,22px)!important}.tiles.two.three .tile .ic{width:clamp(48px,34%,84px)!important}.tiles.two.three .tile .tt{font-size:clamp(1.05rem,2vw,1.7rem)!important}.tiles.two.three .tile .ts{font-size:clamp(.78rem,1.3vw,.98rem)!important}@media (max-width:760px){.tiles.two.three{grid-template-columns:repeat(2,1fr)!important}}
.win .wh .mbtn{right:42px}
.win .wh .mbtn svg{width:16px;height:16px;stroke-width:3}
.wbub{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;border:3px solid #fff;padding:6px;background:linear-gradient(145deg,var(--g1),var(--g2));box-shadow:0 6px 18px rgba(10,10,40,.35);pointer-events:auto;touch-action:none;cursor:grab;z-index:3100;display:grid;place-items:center;will-change:transform}
.wbub:active{cursor:grabbing}.wbub svg{width:100%;height:100%;display:block}
.win .wb:has(.fitw){scrollbar-width:none!important}
.win .wb:has(.fitw)::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.vu-only{}
body[data-view=home]{background:linear-gradient(135deg,#f3f7ff 0%,#eef4ff 45%,#fdf6ee 100%)!important}
body[data-view=home] #bgLayer{display:none!important}
body[data-view=home] #app{margin-left:236px}
body[data-view=home] .wrap{max-width:1240px}
#hsb,#hbar{display:none}
body[data-view=home] #hsb{display:flex}
body[data-view=home] #hbar{display:flex}
#hsb{position:fixed;left:14px;top:14px;bottom:14px;width:208px;z-index:5;flex-direction:column;background:#fff;border-radius:26px;box-shadow:0 10px 40px rgba(60,80,160,.12);padding:20px 14px 16px}
#hsb .lg{display:flex;align-items:center;gap:10px;padding:0 8px 18px;font:800 1.15rem/1 'Baloo 2',system-ui,sans-serif;color:#1d3a8a}
#hsb .lg i{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,#ffd24a,#ff9f1c);display:grid;place-items:center;box-shadow:0 4px 12px rgba(255,159,28,.4)}
#hsb .lg small{display:block;font-weight:600;font-size:.68rem;color:#7a8bb5;margin-top:3px}
#hsb nav{display:flex;flex-direction:column;gap:6px}
#hsb nav button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;font:700 .95rem system-ui,sans-serif;color:#3b4a73;transition:.15s}
#hsb nav button:hover{background:#f0f4ff}
#hsb nav button.on{background:linear-gradient(135deg,#4f7cff,#6b5cff);color:#fff;box-shadow:0 8px 20px rgba(79,124,255,.35)}
#hsb nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
#hsb .tag{margin-top:26px;text-align:center;font:italic 700 1.15rem/1.25 'Caveat','Segoe Script',cursive;color:#4f6bd8;padding:10px 6px}
#hbar{justify-content:flex-end;padding-right:84px;align-items:center;gap:12px;margin:6px 4px 14px}
#hbar .bell{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(60,80,160,.12)}
#hbar .usr{display:flex;align-items:center;gap:10px;background:#fff;border-radius:30px;padding:5px 16px 5px 5px;box-shadow:0 4px 14px rgba(60,80,160,.12);font:700 .92rem system-ui,sans-serif;color:#26356b}
#hbar .usr i{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffb86b,#ff7a59);color:#fff;display:grid;place-items:center;font:800 .9rem system-ui;font-style:normal}
#home .banner{display:none!important}
#vuHero{display:none}
body[data-view=home] #vuHero{display:block}
#vuHero{position:relative;container-type:inline-size;aspect-ratio:1629/305;min-height:150px;border-radius:26px;background:var(--vu-img-hero) center/cover;box-shadow:0 14px 40px rgba(60,110,200,.18);overflow:hidden}
#vuHero .tx{position:absolute;left:5%;top:50%;transform:translateY(-50%);color:#1d3a8a}
#vuHero .w{font:800 1.9cqw/1 system-ui,sans-serif;letter-spacing:.18em;color:#3b6fe0;text-transform:uppercase}
#vuHero .nm{font:800 4.3cqw/1.1 'Baloo 2',system-ui,sans-serif;margin-top:.8cqw;color:#1b2f78}
#vuHero .cl{font:900 6.6cqw/1 'Baloo 2',system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;background:linear-gradient(90deg,#2f6bff,#4f46e5);-webkit-background-clip:text;background-clip:text;color:transparent}
#vuHero .lp{font:700 1.7cqw/1 system-ui,sans-serif;margin-top:1.4cqw;color:#3c4d86;letter-spacing:.06em}
#vuHero .ch{position:absolute;left:81.5%;width:15.5%;top:16%;height:60%;display:grid;place-items:center;text-align:center;font:700 2.1cqw/1.12 'Caveat','Segoe Script',cursive;color:#f4f7ef;text-shadow:0 1px 2px rgba(0,0,0,.25);transform:rotate(-1.5deg);padding-bottom:3%}
#home .tiles.two.three{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:clamp(10px,1.6vw,22px)!important;max-width:none!important;margin-top:clamp(14px,2vw,24px)!important}
#home .tiles.two.three .tile{position:relative;aspect-ratio:1/1;min-height:0!important;padding:clamp(14px,1.8vw,24px)!important;border:0!important;border-radius:24px!important;background:#eef!important;background-size:cover!important;background-position:center!important;box-shadow:0 12px 30px rgba(60,80,160,.14)!important;display:block!important;text-align:left!important;transition:transform .18s,box-shadow .18s;overflow:hidden}
#home .tiles.two.three .tile:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(60,80,160,.22)!important}
#home .tiles.two.three .tile.t-games{background-image:var(--vu-c1)!important}
#home .tiles.two.three .tile.t-manage{background-image:var(--vu-c2)!important}
#home .tiles.two.three .tile.t-bank{background-image:var(--vu-c3)!important}
#home .tiles.two.three .tile.t-parents{background-image:var(--vu-c4)!important}
#home .tiles.two.three .tile.t-games,#home .tiles.two.three .tile.t-manage,#home .tiles.two.three .tile.t-bank,#home .tiles.two.three .tile.t-parents{background-size:116% auto!important;background-position:right bottom!important}
#home .tiles.two.three .tile .ic{display:none!important}
#home .tiles.two.three .tile .tt{display:block;font:800 clamp(1.1rem,2.1vw,1.75rem)/1.1 'Baloo 2',system-ui,sans-serif!important;color:#1d2f6e!important}
#home .tiles .tile.t-manage .tt{color:#0e5b3a!important}#home .tiles .tile.t-bank .tt{color:#8a4b00!important}#home .tiles .tile.t-parents .tt{color:#9a4a00!important}#home .tiles.two.three .tile>span:not(.arr):not(.ic){display:block!important;text-align:left;max-width:60%}#home .tiles.two.three .tile>span.ic{display:none!important}body[data-view=home] #bgFab{display:none!important}
#home .tiles.two.three .tile br{display:none}
#home .tiles.two.three .tile .ts{display:block;margin-top:6px;max-width:72%;font:600 clamp(.74rem,1.15vw,.95rem)/1.3 system-ui,sans-serif!important;color:#4a5680!important;opacity:.95}
#home .tile .arr{position:absolute;left:clamp(14px,1.8vw,24px);bottom:clamp(14px,1.8vw,24px);width:clamp(34px,3.2vw,46px);height:clamp(34px,3.2vw,46px);border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(40,60,120,.2);color:#3a56c8}
#home .tile .arr svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1000px){#hsb{display:none!important}body[data-view=home] #app{margin-left:0}}
@media (max-width:760px){#vuHero{aspect-ratio:auto;height:200px}#vuHero .w{font-size:3.4cqw}#vuHero .nm{font-size:7.4cqw}#vuHero .cl{font-size:11.5cqw}#vuHero .lp{font-size:3.2cqw}#home .tiles.two.three .tile .ts{display:none!important}#home .tiles.two.three .tile>span:not(.arr):not(.ic){max-width:100%}#home .tiles.two.three{grid-template-columns:repeat(2,1fr)!important}#vuHero .ch{display:none}}
#gtools .dockwrap{background:#fff!important;border-radius:34px!important;box-shadow:0 14px 40px rgba(60,80,160,.18)!important;padding:5px 12px 4px!important}.dk,#manage[data-ink=dark] .dk{width:clamp(40px,5.4vw,66px)!important}.dk .dki,.dk[aria-pressed=true] .dki{width:100%!important;background:none!important;border-radius:0!important;box-shadow:none!important;display:block!important}.dk .dki img{width:100%;display:block;pointer-events:none}.dk .dkl,#manage[data-ink=dark] .dk .dkl{color:#26356b!important;font-weight:700!important;font-size:clamp(.5rem,.8vw,.62rem)!important}.dk[aria-pressed=true]{background:#eef2ff;border-radius:18px}#gtools #dockbar{background:none!important;box-shadow:none!important;border:0!important;padding:0!important}.dk .dkl{margin-top:-7px}
/* homework */
.hw{gap:10px!important;background:#fff}
.hw .hwf .inp{font-size:18px}
.hwl{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.hwc{flex:none;max-width:210px;text-align:left;border:2px solid #e3e7f3;background:#fff;border-radius:14px;padding:8px 12px;display:flex;flex-direction:column;gap:1px;cursor:pointer;color:#1c2340}
.hwc b{font-size:17px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwc span{font-size:13px;font-weight:700;color:#6b7499}
.hwc[aria-pressed=true]{border-color:#6d4aff;background:#f1edff}
.hws{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hwn{flex:1;font-size:22px;font-weight:700;color:#1c2340}.hwn b{font-size:34px;color:#e5484d}.hwn span{font-size:16px;color:#6b7499}
.hwg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hwr{display:flex;align-items:center;gap:8px;border:2px solid #d7efe0;background:#effaf3;color:#1c2340;border-radius:14px;padding:10px 12px;cursor:pointer;min-width:0;text-align:left}
.hwr .hn{flex:1;font-size:21px;font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.hwr .hm{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:20px;background:#2e9e4f;color:#fff}
.hwr.no{border-color:#e5484d;background:#fdeaea}
.hwr.no .hm{background:#e5484d}
.hwr.no .hn{color:#b4232a}
.hwr .hx{flex:none;font-style:normal;font-size:13px;font-weight:800;background:#1c2340;color:#fff;border-radius:99px;padding:1px 7px}
.hw{min-height:500px}
.sbox>.panel.hw{min-height:480px!important;align-content:start}
.t-hw{--c:#f97316}
#ldr{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#5b21b6 0%,#2e1065 55%,#0b0420 100%);overflow:hidden;animation:ldin .35s ease-out}
#ldr.out{animation:ldout .35s forwards}
@keyframes ldin{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}@keyframes ldout{to{opacity:0;transform:scale(1.1)}}
.ldrays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,215,90,.22) 0 8deg,transparent 8deg 22deg);animation:ldspin 24s linear infinite;mask-image:radial-gradient(circle,#000 0%,transparent 62%);-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 62%)}
#ldr.rev .ldrays{animation-duration:9s;background:repeating-conic-gradient(from 0deg,rgba(255,225,110,.4) 0 8deg,transparent 8deg 22deg)}
@keyframes ldspin{to{transform:rotate(360deg)}}
.ldin{position:relative;z-index:2;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,22px);padding:20px}
.ldk{font:800 clamp(1.1rem,3.2vw,2.2rem)/1.1 var(--f-display),system-ui;letter-spacing:.14em;color:#fde68a;text-shadow:0 0 24px rgba(251,191,36,.8);animation:ldpulse 1s ease-in-out infinite alternate}
@keyframes ldpulse{from{transform:scale(1)}to{transform:scale(1.06)}}
.ldcr{font-size:clamp(5rem,16vw,10rem);line-height:1;filter:drop-shadow(0 0 30px rgba(251,191,36,.9));animation:ldwob 1.1s ease-in-out infinite alternate}
@keyframes ldwob{from{transform:rotate(-8deg) translateY(0)}to{transform:rotate(8deg) translateY(-12px)}}
.ldcr.drop{animation:lddrop .9s cubic-bezier(.3,1.6,.5,1) both;font-size:clamp(6rem,20vw,13rem)}
@keyframes lddrop{0%{transform:translateY(-120vh) rotate(-30deg) scale(.5)}60%{transform:translateY(0) rotate(6deg) scale(1.2)}100%{transform:translateY(0) rotate(0) scale(1)}}
.ldn{font:800 clamp(2.4rem,9vw,6.4rem)/1.05 var(--f-display),system-ui;min-height:1.1em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5);max-width:94vw;overflow-wrap:anywhere}
.ldn.ldw{background:linear-gradient(180deg,#fff7c2,#fbbf24 55%,#d97706);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(251,191,36,.85));animation:ldwin .8s cubic-bezier(.3,1.7,.5,1)}
@keyframes ldwin{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.ldh{font:700 clamp(.9rem,2vw,1.3rem) system-ui;color:#ddd6fe;opacity:.9}
#ldr.rev .ldh{display:none}
.ldp{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.ldp span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 16px;font:700 clamp(.85rem,1.8vw,1.15rem) system-ui;backdrop-filter:blur(6px);animation:ldwin .6s both}.ldp span:nth-child(2){animation-delay:.15s}.ldp span:nth-child(3){animation-delay:.3s}
.ldb{border:0;border-radius:999px;padding:14px 34px;font:800 clamp(1.1rem,2.4vw,1.6rem) system-ui;background:linear-gradient(180deg,#fde047,#f59e0b);color:#4a2c00;cursor:pointer;box-shadow:0 8px 0 #b45309,0 18px 40px rgba(0,0,0,.4);margin-top:6px}.ldb:active{transform:translateY(4px);box-shadow:0 4px 0 #b45309}
.ldst{position:absolute;top:-8%;z-index:1;animation:ldfall linear forwards;pointer-events:none}
@keyframes ldfall{to{transform:translateY(115vh) rotate(540deg)}}
#ldPin{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:8800;display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#7c3aed,#4c1d95);color:#fff;border-radius:999px;padding:4px 8px 4px 6px;box-shadow:0 8px 24px rgba(76,29,149,.5),0 0 0 2px #fbbf24;animation:ldpin 2.4s ease-in-out infinite}
@keyframes ldpin{0%,100%{box-shadow:0 8px 24px rgba(76,29,149,.5),0 0 0 2px #fbbf24}50%{box-shadow:0 8px 24px rgba(76,29,149,.5),0 0 0 2px #fbbf24,0 0 22px #fbbf24}}
#ldPin .ldc{font-size:1.5rem;filter:drop-shadow(0 0 6px #fbbf24)}
#ldPin .ldt{display:flex;flex-direction:column;line-height:1.05}#ldPin small{font:800 .54rem system-ui;letter-spacing:.14em;color:#fde68a}#ldPin b{font:800 .95rem system-ui;max-width:26vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ldPin button{border:0;background:rgba(255,255,255,.2);color:#fff;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:.9rem;line-height:1}
body[data-view=home] #ldPin{top:62px;left:calc(50% + 118px)}
#mnOrb{position:fixed;z-index:9700;touch-action:none}
#mnOrb{width:112px;height:112px}
#mnOrb .mnhost{width:100%;height:100%}
#mnOrb .mnring.go{animation:mnpulse .45s ease-in-out infinite alternate}
@keyframes mnbob{50%{transform:translateY(-3px)}}
#miniBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#mnOrb [hidden]{display:none!important}
#tttView{padding:0!important}
.txr{position:fixed;inset:0;z-index:20;overflow-y:auto;background:var(--xbg);color:var(--tx);overflow:hidden;padding:12px clamp(10px,2vw,28px) 110px;display:flex;flex-direction:column;gap:10px}
.txfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.txr>.txbar,.txr>.txstage{position:relative;z-index:1}
.txbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);backdrop-filter:blur(10px);border-radius:20px;padding:8px 12px;box-shadow:0 8px 24px rgba(0,0,0,.15);margin-right:60px;flex:none}
.txbar h1{margin:0;flex:1;white-space:nowrap;font-family:var(--f-display);font-weight:700;font-size:clamp(1.2rem,3vw,1.8rem);min-width:150px}
.txbar h1 span{background:linear-gradient(90deg,#ff4fa3,#4cc9f0);-webkit-background-clip:text;background-clip:text;color:transparent}
.txr .btn.ghost,.txr .back{color:var(--tx);border-color:currentColor;background:transparent}
.txr .lbl{color:var(--tx)}
.txstage{display:grid;grid-template-columns:minmax(130px,220px) 1fr minmax(130px,220px);gap:clamp(10px,2vw,26px);align-items:center;flex:1}
.txp{background:var(--card);backdrop-filter:blur(10px);border-radius:24px;padding:16px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border:3px solid transparent;box-shadow:0 10px 28px rgba(0,0,0,.18);transition:.25s}
.txp.turn{border-color:var(--pc);box-shadow:0 0 0 6px color-mix(in srgb,var(--pc) 25%,transparent),0 0 34px var(--pc);transform:scale(1.04)}
.txp .mk{width:clamp(44px,5vw,64px);height:clamp(44px,5vw,64px);display:grid;place-items:center}
.txg{display:block;width:100%;height:100%}.txg svg{width:100%;height:100%}.txg.em{font-size:clamp(2rem,4vw,3rem);line-height:1;display:grid;place-items:center}
.txp .tn{font-family:var(--f-display);font-weight:700;font-size:1.2rem;overflow-wrap:anywhere}
.txp .ts{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;color:var(--pc)}
.txp .tl{font-weight:800;color:var(--pc);min-height:1.2em;font-size:.9rem}
.txmid{display:flex;flex-direction:column;align-items:center;gap:12px}
.txmsg{font:700 clamp(1rem,2vw,1.35rem) var(--f-display);text-align:center;background:var(--card);padding:6px 16px;border-radius:999px;min-height:1.6em}
.txmsg.big{animation:pop .5s ease-out;font-size:clamp(1.3rem,3vw,2rem);color:#16a34a}
.txboard{--s:min(58vw,74vh,820px);width:var(--s);height:var(--s);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(6px,1.2vw,12px);padding:clamp(8px,1.4vw,16px);border-radius:30px;background:var(--bd);box-shadow:0 22px 50px rgba(0,0,0,.3),inset 0 0 0 3px var(--ln)}
[data-dark="1"] .txboard{box-shadow:0 0 40px color-mix(in srgb,var(--ln) 55%,transparent),inset 0 0 0 3px var(--ln)}
.txc{border:0;border-radius:18px;background:var(--cell);display:grid;place-items:center;cursor:pointer;padding:12%;transition:transform .15s,background .2s,box-shadow .2s;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);color:inherit}
.txc:not(:disabled):hover{transform:scale(1.06);box-shadow:0 0 0 3px var(--pc),0 0 22px var(--pc)}
.txc:disabled{cursor:default}
.txc .txg{animation:txpop .5s cubic-bezier(.2,1.7,.4,1)}
.txc.txwin{animation:txwin .7s ease-in-out infinite alternate;background:color-mix(in srgb,var(--pc) 28%,var(--cell))}
@keyframes txpop{0%{transform:scale(0) rotate(-120deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes txwin{from{transform:scale(1);box-shadow:0 0 10px var(--pc)}to{transform:scale(1.08);box-shadow:0 0 34px var(--pc)}}
.txdeco span{position:fixed;font-size:clamp(2.6rem,7vw,5.6rem);filter:drop-shadow(0 8px 6px rgba(0,0,0,.25));animation:txfl 5s ease-in-out infinite alternate;pointer-events:none}
.txdeco .d0{left:3%;bottom:100px}.txdeco .d1{right:3%;bottom:104px;animation-delay:-1.5s}.txdeco .d2{left:12%;top:22%;font-size:clamp(2rem,4vw,3.4rem);animation-delay:-3s}.txdeco .d3{right:10%;top:24%;font-size:clamp(2rem,4vw,3.4rem);animation-delay:-2s}
@keyframes txfl{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-14px) rotate(4deg)}}
.txconf{position:absolute;width:10px;height:14px;border-radius:2px;z-index:30;pointer-events:none}
.txbn{background:#111c;color:#fff;border-radius:999px;padding:5px 8px 5px 14px;font:700 .85rem system-ui}.txbn button{margin-left:8px;border:0;border-radius:999px;background:#fff;color:#111;padding:3px 10px;font-weight:700;cursor:pointer}
.txr.tmode .txstage,.txr.tmode .txdeco{visibility:hidden}
.txtour{position:absolute;inset:70px 0 0 0;overflow:auto;z-index:6!important;padding:10px clamp(10px,2vw,28px) 120px}
.trp{max-width:760px;margin:0 auto;background:var(--card);backdrop-filter:blur(14px);border-radius:26px;padding:18px 20px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.trp.wide{max-width:1200px}
.trh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}.trh h2{margin:0;font-family:var(--f-display)}.trh small{font:600 .8rem system-ui;opacity:.7;margin-left:8px}
.trch{display:flex;flex-wrap:wrap;gap:6px}
.trpl{border:0;border-radius:999px;padding:6px 13px;font:700 .85rem system-ui;cursor:pointer;background:#e8f7ee;color:#157347}
.trpl[aria-pressed=false]{background:rgba(120,120,140,.2);color:inherit;opacity:.55;text-decoration:line-through}
.txq,.txar,.txpk,.txsw{display:flex;flex-wrap:wrap;gap:6px}
.txqb{border:2px solid transparent;background:rgba(120,120,160,.18);color:inherit;border-radius:12px;padding:7px 12px;font:700 .85rem system-ui;cursor:pointer}
.txqb[aria-pressed=true]{background:#4f46e5;color:#fff}
.txsty{max-width:620px;max-height:90vh;overflow:auto}
.txat{border:3px solid transparent;border-radius:14px;padding:8px 12px;font:700 .85rem system-ui;cursor:pointer;display:flex;align-items:center;gap:6px;min-width:110px}.txat i{font-style:normal;font-size:1.4rem}
.txat[aria-pressed=true]{border-color:#4f46e5;box-shadow:0 0 0 3px #fff,0 0 0 6px #4f46e5}
.txpb{width:44px;height:44px;border-radius:12px;border:2px solid transparent;background:rgba(120,120,160,.14);cursor:pointer;font-size:1.5rem;display:grid;place-items:center;padding:7px}.txpb svg{width:100%;height:100%}
.txpb[aria-pressed=true]{border-color:#4f46e5;background:#eef}
.txsb{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #999;cursor:pointer}.txsb[aria-pressed=true]{box-shadow:0 0 0 3px #4f46e5}
.txbd{display:inline-grid;width:34px;height:34px}
.trbw{overflow:auto;padding:6px 0 10px}
.trb{position:relative;display:flex;gap:clamp(30px,5vw,70px);min-width:max-content;padding:6px}
.trw{position:absolute;left:0;top:0;pointer-events:none;z-index:0}.trw path{fill:none;stroke:rgba(130,130,160,.55);stroke-width:2.5}.trw path.on{stroke:#22c55e;stroke-width:3.5}
.trc{display:flex;flex-direction:column;min-width:170px;position:relative;z-index:1}
.trt{text-align:center;font:800 .78rem system-ui;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:8px}
.trl{display:flex;flex-direction:column;justify-content:space-around;flex:1;gap:12px}
.trm{position:relative;background:#fff;color:#1d2f6e;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.18);overflow:hidden;border:2px solid transparent}
.trm.cur{border-color:#f59e0b;animation:trpulse 1.2s ease-in-out infinite;cursor:pointer}
@keyframes trpulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.7)}50%{box-shadow:0 0 0 8px rgba(245,158,11,0)}}
.trtag{position:absolute;right:-1px;top:-1px;background:#f59e0b;color:#fff;font:800 .6rem system-ui;padding:2px 7px;border-radius:0 10px 0 10px}
.trr{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;font:700 .88rem system-ui;min-height:34px}
.trr+.trr{border-top:1px solid #e6e9f5}
.trr.tw{background:#dcfce7;color:#166534}.trr.tw i{color:#16a34a}
.trr.tlz{background:#fee2e2;color:#991b1b}.trr.tlz .trn{text-decoration:line-through;opacity:.7}.trr.tlz i{color:#dc2626}
.trr.tbd,.trr.bye{color:#9aa3bd;font-weight:600;font-style:italic}
.trr i{font-style:normal;font-weight:900}
.trsw{border:0;border-radius:7px;background:#eef2ff;color:#4f46e5;font-weight:800;cursor:pointer;padding:1px 7px}
.trnext{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(90deg,#fff7d6,#ffe9a8);color:#6a4500;border-radius:16px;padding:10px 14px;margin-bottom:10px;font:600 .95rem system-ui}.trnext span{font-weight:800;text-transform:uppercase;font-size:.72rem;letter-spacing:.08em}.trnext .btn{margin-left:auto}
.trchamp{text-align:center;padding:10px;animation:pop .6s ease-out}.trcr{font-size:4.4rem;animation:txfl 1.5s ease-in-out infinite alternate;filter:drop-shadow(0 6px 10px rgba(245,158,11,.6))}
.trcn{font:800 clamp(2rem,6vw,3.6rem) var(--f-display);background:linear-gradient(90deg,#f59e0b,#fde047,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}.trcs{font:800 .8rem system-ui;letter-spacing:.2em;opacity:.75}
@media (max-width:760px){.txstage{grid-template-columns:1fr 1fr}.txmid{grid-column:1/-1;order:3}.txbar{margin:0}.txboard{--s:min(88vw,50vh)}}
.txr .tmodal{padding-bottom:110px}
.sbox>.panel.gm{min-height:480px!important}
.gm .gmc{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.gm .gmseg{display:flex;background:#eef0fa;border-radius:12px;padding:3px}
.gm .gmseg button{border:0;background:none;padding:7px 11px;border-radius:9px;font:700 .8rem system-ui;color:#4a5680;cursor:pointer}
.gm .gmseg button[aria-pressed=true]{background:#fff;color:#4f46e5;box-shadow:0 2px 6px rgba(60,80,160,.18)}
.gm .gmn{display:flex;align-items:center;gap:8px}.gm .gmn b{min-width:28px;text-align:center;font:800 1.3rem system-ui;color:#1d2f6e}
.gm .gml{font:600 .74rem system-ui;color:#7a8bb5;margin:4px 0}
.gm .gmp{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.gm .gmx{border:0;border-radius:999px;padding:5px 11px;font:600 .8rem system-ui;background:#e8f7ee;color:#157347;cursor:pointer}
.gm .gmx[aria-pressed=false]{background:#f1f1f4;color:#9aa;text-decoration:line-through}
.gm .gmo{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.gm .gmg{background:#fff;border-radius:14px;border:2px solid var(--gc);overflow:hidden;animation:gmin .35s both}
.gm .gmg h4{margin:0;padding:7px 10px;background:var(--gc);color:#fff;font:800 .88rem system-ui;display:flex;justify-content:space-between}
.gm .gmg h4 span{background:rgba(255,255,255,.3);border-radius:999px;padding:0 8px}
.gm .gmg ul{list-style:none;margin:0;padding:6px 10px 8px}.gm .gmg li{padding:3px 0;font:600 .85rem system-ui;color:#26356b;border-bottom:1px dashed #e6e9f5}.gm .gmg li:last-child{border:0}
@keyframes gmin{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}
.gm .gmg li.dn{text-decoration:line-through;color:#9aa6c8}.gm .gmg li.dn::after{content:" \2713";color:#10b981;font-weight:800}
.gm .gmg li.hl{background:color-mix(in srgb,var(--gc) 22%,#fff);border-radius:6px}
.gm .gmg li.hit{background:var(--gc);color:#fff!important;text-decoration:none;border-radius:6px;font-weight:800;padding-left:6px;animation:gmhit .5s}
.gm .gmg li.hit::after{content:" \2605";color:#ffe27a}
.gm .gmpk{display:block;width:calc(100% - 16px);margin:0 8px 8px;border:0;border-radius:10px;padding:7px;background:var(--gc);color:#fff;font:800 .8rem system-ui;cursor:pointer}
@keyframes gmhit{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:none}}
.t-groups{--c:#0ea5e9}
.dkx{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:6;opacity:0}
.dkx i{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.35),inset 0 0 0 2px rgba(0,0,0,.2)}
.dkx i::before,.dkx i::after{content:"";position:absolute;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.dkx i::before{left:50%;top:-12px;bottom:-12px;width:3px;margin-left:-1.5px}
.dkx i::after{top:50%;left:-12px;right:-12px;height:3px;margin-top:-1.5px}
.mgl{display:flex;flex-direction:column;gap:6px;max-height:190px;overflow:auto}.mgr{display:flex;gap:6px;align-items:center}.mgr input.inp{flex:1.4;min-width:0}.mgr select.inp{flex:1;min-width:0}
body[data-view=plane] #dockbar,body[data-view=plane] #dockToggle,body[data-view=plane] #miniBtn,body[data-view=plane] #fsTop,body[data-view=plane] #winLayer{display:none!important}
/* quizzes hub */
.t-quiz{--c:#6d5cff}
.qzgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:16px}
.qzc{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:24px;background:#fff;box-shadow:0 10px 30px rgba(60,80,160,.14);transition:transform .16s,box-shadow .16s;border-top:8px solid var(--cc)}
.qzc:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(60,80,160,.24)}
.qzc:focus-visible{outline:3px solid var(--cc);outline-offset:3px}
.qzci{width:78px;height:78px;border-radius:24px;display:grid;place-items:center;font-size:2.6rem;background:linear-gradient(135deg,var(--cc),color-mix(in srgb,var(--cc) 50%,#fff))}
.qzc b{font:800 1.25rem 'Baloo 2',system-ui,sans-serif;color:#1d2f6e}
.qzcd{font:600 .85rem/1.35 system-ui,sans-serif;color:#4a5680}
.qzcf{margin-top:auto;display:flex;align-items:center;gap:8px;font:700 .78rem system-ui;color:#6b7aa6}
.qzcf i{width:18px;height:18px;border-radius:50%;flex:none}
#home .tiles .tile.t-quiz .tt{color:#3b2a8f!important}
#home .tiles.two.three .tile.t-quiz{background-image:linear-gradient(150deg,#f1ecff,#d8ccff 55%,#a998ff)!important}
#home .tiles.two.three .tile.t-quiz::before{content:"\1F9E0";position:absolute;right:9%;bottom:8%;font-size:clamp(3rem,5.5vw,5.4rem);filter:drop-shadow(0 8px 10px rgba(60,40,140,.3))}
#home .tiles.two.three .tile.t-quiz::after{content:"?";position:absolute;right:30%;top:14%;font:900 clamp(2rem,3.4vw,3.4rem) system-ui;color:rgba(109,92,255,.35)}
@media (min-width:761px){body #home .tiles.two.three{grid-template-columns:repeat(5,1fr)!important}}
/* quiz play */
body.qz-on #dockbar,body.qz-on #dockToggle,body.qz-on #miniBtn,body.qz-on #fsTop,body.qz-on #winLayer{display:none!important}
.qzr{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;overflow:hidden;color:var(--tx);font-family:var(--ff);background:var(--bg);box-shadow:var(--frame,none)}
.qzr *{box-sizing:border-box}
.qzr[data-th=show],.qzthumb[data-th=show]{--bg:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.06) 0 6deg,transparent 6deg 12deg),radial-gradient(circle at 50% 45%,#1b6fd1 0,#0b3c91 55%,#06214f 100%);--pn:rgba(6,33,79,.86);--pb:#ffe21a;--tx:#fff;--mu:#bcd2ff;--ac:#ffe21a;--ok:#22c55e;--no:#ef4444;--o1:#0a2f6b;--o2:#0a2f6b;--o3:#0a2f6b;--o4:#0a2f6b;--ot:#ffe21a;--ob:#ffe21a;--ff:'Baloo 2','Comic Sans MS',system-ui,sans-serif;--frame:inset 18px 0 0 #22c55e,inset 40px 0 0 #e11d74,inset -18px 0 0 #22c55e,inset -40px 0 0 #e11d74;--rad:12px;--btn:#e11d74;--btnt:#fff}
.qzr[data-th=lib],.qzthumb[data-th=lib]{--bg:radial-gradient(circle at 50% 40%,#f4e8cc,#dcc59a 70%,#b99a69);--pn:rgba(255,249,232,.9);--pb:#8a5a2b;--tx:#3b2a17;--mu:#7a5b36;--ac:#8a5a2b;--ok:#2f8f4e;--no:#b3382c;--o1:#f6ead0;--o2:#efdcb4;--o3:#f6ead0;--o4:#efdcb4;--ot:#3b2a17;--ob:#8a5a2b;--ff:Georgia,'Times New Roman',serif;--rad:10px;--btn:#8a5a2b;--btnt:#fff7e6}
.qzr[data-th=space],.qzthumb[data-th=space]{--bg:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff,transparent),radial-gradient(2px 2px at 40% 80%,#fff,transparent),radial-gradient(1px 1px at 85% 65%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 70%,#fff,transparent),radial-gradient(circle at 75% 90%,#5b2a9c,transparent 55%),linear-gradient(160deg,#0b0b2b,#2a1160);--pn:rgba(22,12,66,.82);--pb:#8be9fd;--tx:#fff;--mu:#b7b0ff;--ac:#ff79c6;--ok:#50fa7b;--no:#ff5555;--o1:#2a1d6e;--o2:#1d3a7e;--o3:#4a1d6e;--o4:#1d5a6e;--ot:#fff;--ob:#8be9fd;--ff:'Baloo 2',system-ui,sans-serif;--rad:18px;--btn:#ff79c6;--btnt:#1a0b3d}
.qzr[data-th=comic],.qzthumb[data-th=comic]{--bg:radial-gradient(circle,rgba(0,0,0,.2) 1.6px,transparent 2.2px) 0 0/16px 16px,#ffd23f;--pn:#fff;--pb:#111;--tx:#111;--mu:#444;--ac:#e63946;--ok:#16a34a;--no:#e63946;--o1:#fff;--o2:#9be7ff;--o3:#ffb3c7;--o4:#c7f59b;--ot:#111;--ob:#111;--ff:'Comic Sans MS','Chalkboard SE','Baloo 2',system-ui,sans-serif;--rad:6px;--btn:#e63946;--btnt:#fff;--hard:5px 5px 0 #111}
.qzr[data-th=west],.qzthumb[data-th=west]{--bg:linear-gradient(#f8cf8d 0,#f2a85f 52%,#c8793a 52%,#a45d2b 100%);--pn:#fff1d6;--pb:#6b3e1d;--tx:#4a2810;--mu:#7a4b25;--ac:#b4491f;--ok:#3f8f3a;--no:#b3261e;--o1:#fbe3b5;--o2:#f6d49a;--o3:#fbe3b5;--o4:#f6d49a;--ot:#4a2810;--ob:#6b3e1d;--ff:Rockwell,'Rockwell Nova',Georgia,serif;--rad:8px;--btn:#6b3e1d;--btnt:#ffe9c2}
.qzr[data-th=winter],.qzthumb[data-th=winter]{--bg:radial-gradient(2px 2px at 10% 20%,#fff,transparent),radial-gradient(3px 3px at 60% 10%,#fff,transparent),radial-gradient(2px 2px at 85% 55%,#fff,transparent),radial-gradient(3px 3px at 30% 70%,#fff,transparent),radial-gradient(2px 2px at 92% 12%,#fff,transparent),linear-gradient(180deg,#bfe3f7,#eaf6ff);--pn:rgba(255,255,255,.9);--pb:#c0392b;--tx:#16425b;--mu:#4c7a94;--ac:#c0392b;--ok:#2f9e5b;--no:#c0392b;--o1:#fde2e2;--o2:#e2f7e6;--o3:#e2eefc;--o4:#fff3d6;--ot:#16425b;--ob:#c0392b;--ff:'Baloo 2',system-ui,sans-serif;--rad:20px;--btn:#c0392b;--btnt:#fff}
.qzfx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.qzfx>span{position:absolute;opacity:.28;animation:qzfl 9s ease-in-out infinite alternate}
@keyframes qzfl{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-34px) rotate(10deg)}}
.qzfx>.qzcf{opacity:1;top:-40px;animation:qzcf 3.6s ease-in forwards}
@keyframes qzcf{to{transform:translateY(115vh) rotate(540deg)}}
.qzh{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:12px clamp(26px,4vw,56px) 4px;flex-wrap:wrap}
.qzt{font:800 clamp(1rem,2.2vw,1.5rem) var(--ff);color:var(--ac);flex:1;min-width:140px}
.qzsc{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.qzs1{background:var(--pn);border:3px solid var(--gc,var(--pb));border-radius:var(--rad);padding:3px 12px;text-align:center;min-width:92px;opacity:.85}
.qzs1.on{opacity:1;transform:scale(1.08);box-shadow:0 0 0 3px var(--gc),0 6px 16px rgba(0,0,0,.3)}
.qzs1 small{display:block;font:700 .72rem var(--ff);color:var(--mu);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qzs1 b{font:800 1.4rem/1.1 var(--ff);color:var(--tx)}
.qzclk{font:800 1.3rem var(--ff);background:var(--pn);border:3px solid var(--pb);border-radius:var(--rad);padding:4px 12px;font-variant-numeric:tabular-nums}
.qzs{position:relative;z-index:1;flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2vh,22px);padding:10px clamp(28px,5vw,66px) 24px}
.qzp{background:var(--pn);border:4px solid var(--pb);border-radius:calc(var(--rad) + 8px);padding:clamp(14px,2.4vw,28px);width:min(920px,100%);box-shadow:var(--hard,0 12px 34px rgba(0,0,0,.25))}
.qzp h2{margin:0 0 4px;font:800 clamp(1.5rem,3.4vw,2.4rem) var(--ff);color:var(--ac)}.qzp>p{margin:0 0 10px;color:var(--mu);font-weight:700}
.qzqn{display:flex;justify-content:space-between;gap:10px;font:700 .9rem var(--ff);color:var(--mu);margin-bottom:6px}.qzqn em{font-style:normal;color:var(--ac);font-weight:800}
.qzq{font:800 clamp(1.5rem,4.2vw,3rem)/1.18 var(--ff);text-align:center;text-wrap:balance}.qzq u{text-decoration:none;color:var(--ac);border-bottom:4px solid var(--ac)}
.qzbar{width:min(920px,100%);height:14px;border-radius:99px;background:rgba(0,0,0,.35);border:2px solid var(--pb);overflow:hidden}.qzbar i{display:block;height:100%;width:100%;background:var(--ok);transition:width .1s linear}.qzbar.hot i{background:var(--no)}
.qzos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.8vw,20px);width:min(920px,100%)}
.qzos.tf{grid-template-columns:repeat(2,1fr)}
.qzo{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:clamp(64px,12vh,120px);padding:10px 16px;border:4px solid var(--ob);border-radius:var(--rad);background:var(--o1);color:var(--ot);font:800 clamp(1.1rem,2.6vw,1.9rem)/1.15 var(--ff);box-shadow:var(--hard,0 6px 0 rgba(0,0,0,.25));transition:transform .12s}
.qzo.o1{background:var(--o2)}.qzo.o2{background:var(--o3)}.qzo.o3{background:var(--o4)}
.qzo:hover:not(:disabled){transform:translateY(-3px) scale(1.015)}.qzo:focus-visible{outline:4px solid var(--ac);outline-offset:3px}
.qzo i{font-style:normal;flex:none;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:var(--ob);color:var(--o1);font-size:1.1rem}
.qzo span{flex:1;text-align:center}
.qzo.ok{background:var(--ok)!important;color:#fff!important;border-color:#fff;animation:qzok .5s}.qzo.no{background:var(--no)!important;color:#fff!important;animation:qzsh .4s}.qzo:disabled:not(.ok):not(.no){opacity:.55}.qzo.gone{visibility:hidden}
@keyframes qzok{50%{transform:scale(1.06)}}@keyframes qzsh{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
.qzr.shk{animation:qzsh .4s}
.qzll{display:flex;gap:10px}
.qzb{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--rad);background:var(--btn);color:var(--btnt);font:800 1.05rem var(--ff);box-shadow:var(--hard,0 5px 0 rgba(0,0,0,.28));border:3px solid var(--ob,transparent)}
.qzb:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px)}.qzb:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
.qzb.sm{padding:6px 14px;font-size:.9rem}.qzb.big{padding:14px 34px;font-size:1.35rem}.qzb.ghost{background:var(--pn);color:var(--tx);border-color:var(--pb)}.qzb:disabled{opacity:.45;cursor:default}
.qzsetup{display:flex;flex-direction:column;gap:12px}
.qzrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.qzrow>b{min-width:92px;font:800 1rem var(--ff);color:var(--ac)}.qzrow.end{justify-content:flex-end;margin-top:6px}
.qzhint{font:700 .82rem var(--ff);color:var(--mu);margin:-4px 0 0}
.qzchip{background:var(--o1);color:var(--ot);border:3px solid var(--gc,var(--ob));border-radius:99px;padding:3px 14px;font:800 .95rem var(--ff)}
.qzseg{display:flex;gap:6px;flex-wrap:wrap}.qzseg button,.qzths button{all:unset;box-sizing:border-box;cursor:pointer;padding:6px 14px;border:3px solid var(--ob);border-radius:99px;background:var(--o1);color:var(--ot);font:800 .92rem var(--ff)}
.qzseg button[aria-pressed=true],.qzths button[aria-pressed=true]{background:var(--ac);color:var(--btnt,#fff);border-color:var(--tx)}
.qzths{display:flex;gap:6px;flex-wrap:wrap}.qzths button{display:flex;align-items:center;gap:7px}.qzths i{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,0,0,.35)}
.qzsel{font:700 .9rem var(--ff);padding:6px;border-radius:10px;border:3px solid var(--ob);background:var(--o1);color:var(--ot)}
.qzrl{position:absolute;inset:0;z-index:30;background:rgba(0,0,0,.62);display:grid;place-items:center}
.qzrb{background:var(--pn);border:6px solid var(--gc);border-radius:30px;padding:26px 54px;text-align:center;min-width:min(520px,90vw);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.qzrb small{display:block;font:800 1.1rem var(--ff);color:var(--gc);letter-spacing:.08em;text-transform:uppercase}.qzrb b{display:block;font:800 clamp(2.4rem,8vw,5rem)/1.1 var(--ff);margin-top:4px}
.qzrl.fin .qzrb{animation:qzfin .6s}@keyframes qzfin{0%{transform:scale(.8)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
.qzpop{position:fixed;z-index:40;font:900 2.4rem var(--ff);pointer-events:none;transform:translate(-50%,-50%);animation:qzpp 1.2s ease-out forwards;text-shadow:0 3px 0 rgba(0,0,0,.4)}.qzpop.g{color:#ffe21a}.qzpop.b{color:#ff5a5a}
@keyframes qzpp{to{transform:translate(-50%,-190%) scale(1.3);opacity:0}}
.qzboxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(88px,13vw,140px),1fr));gap:clamp(8px,1.4vw,16px);width:min(920px,100%)}
.qzbx{all:unset;box-sizing:border-box;cursor:pointer;aspect-ratio:1;border:4px solid var(--ob);border-radius:var(--rad);background:var(--o1);color:var(--ot);display:flex;flex-direction:column;align-items:center;justify-content:center;font:900 clamp(1.4rem,3vw,2.3rem) var(--ff);box-shadow:var(--hard,0 6px 0 rgba(0,0,0,.25));transition:transform .12s}
.qzbx:nth-child(4n+2){background:var(--o2)}.qzbx:nth-child(4n+3){background:var(--o3)}.qzbx:nth-child(4n){background:var(--o4)}
.qzbx span{font-size:clamp(2rem,4.4vw,3.4rem)}.qzbx small{font:800 .95rem var(--ff)}.qzbx:hover:not(:disabled){transform:translateY(-4px) rotate(-3deg)}.qzbx:disabled{cursor:default}
.qzbx.won{background:var(--ok)!important;color:#fff}.qzbx.lost{background:var(--no)!important;color:#fff;opacity:.8}.qzbx:focus-visible{outline:4px solid var(--ac);outline-offset:3px}
.qzwh{position:relative;width:min(46vh,86vw,420px);aspect-ratio:1}.qzwh canvas{width:100%;height:100%;border-radius:50%;box-shadow:0 12px 34px rgba(0,0,0,.4)}
.qzptr{position:absolute;left:50%;top:-12px;width:0;height:0;margin-left:-16px;border-left:16px solid transparent;border-right:16px solid transparent;border-top:36px solid var(--ac);filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.qzmt{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:clamp(8px,1.4vw,14px);width:min(1000px,100%)}
.qzmtile{all:unset;box-sizing:border-box;cursor:pointer;min-height:clamp(72px,13vh,120px);padding:8px 10px;border:4px solid var(--ob);border-radius:var(--rad);background:var(--o1);color:var(--ot);display:grid;place-items:center;text-align:center;font:800 clamp(.85rem,1.7vw,1.3rem)/1.15 var(--ff);box-shadow:var(--hard,0 5px 0 rgba(0,0,0,.25));overflow:hidden}
.qzmtile.a{background:var(--o3)}.qzmtile:hover:not(:disabled){transform:translateY(-3px)}.qzmtile.sel{outline:5px solid var(--ac);transform:scale(1.05)}.qzmtile.bad{background:var(--no)!important;color:#fff;animation:qzsh .4s}.qzmtile.done{opacity:0;pointer-events:none;transform:scale(.7);transition:.4s}
.qzres{text-align:center;display:flex;flex-direction:column;gap:12px}.qzmedal{font-size:clamp(3rem,9vw,5.5rem);animation:qzfin .8s}
.qzbig{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);flex-wrap:wrap}.qzbig b{display:block;font:900 clamp(2rem,6vw,3.4rem)/1 var(--ff);color:var(--ac)}.qzbig small{font:700 .85rem var(--ff);color:var(--mu)}
.qzstand{display:flex;flex-direction:column;gap:6px;max-width:460px;margin:0 auto;width:100%}.qzstand div{display:flex;align-items:center;gap:10px;border:3px solid var(--gc);border-radius:var(--rad);padding:6px 14px;background:var(--o1);color:var(--ot)}.qzstand b{flex:1;text-align:left}.qzstand em{font:900 1.3rem var(--ff);font-style:normal}
.qztb{width:100%;border-collapse:collapse;font:700 .95rem var(--ff)}.qztb th{color:var(--mu);font-size:.78rem;text-transform:uppercase;text-align:left;padding:4px 8px}.qztb td{padding:5px 8px;border-top:1px dashed color-mix(in srgb,var(--tx) 25%,transparent);text-align:left}.qztb tr.me td{background:color-mix(in srgb,var(--ac) 28%,transparent);font-weight:900}
.qzmod{position:fixed;inset:0;z-index:9500;background:rgba(10,12,40,.62);display:grid;place-items:center;padding:14px}
.qzmc{background:#fff;color:#1d2f6e;border-radius:26px;width:min(780px,100%);max-height:92vh;overflow:auto;padding:20px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 80px rgba(0,0,0,.45);font-family:system-ui,sans-serif}
.qzmh{display:flex;align-items:center;justify-content:space-between}.qzmh h2{margin:0;font:800 1.6rem 'Baloo 2',system-ui}.qzx{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;background:#eef0fa;display:grid;place-items:center}
.qzmt2{display:flex;gap:6px;flex-wrap:wrap}.qzmt2 button{all:unset;cursor:pointer;padding:6px 12px;border-radius:99px;background:#eef0fa;font:700 .85rem system-ui;color:#3b4a73}.qzmt2 button[aria-pressed=true]{background:#6d5cff;color:#fff}.qzmt2.s button[aria-pressed=true]{background:#0ea5e9}
.qzmc .qztb{color:#1d2f6e}.qzmc .qztb th{color:#7a8bb5}.qzmc .qztb td{border-color:#e6e9f5}.qzmc .qzhint{color:#7a8bb5}.qzmc .qzb{background:#eef0fa;color:#3b4a73;box-shadow:none;border-color:transparent}
@media (max-width:640px){.qzos{grid-template-columns:1fr}.qzh{padding-inline:30px}.qzr[data-th=show],.qzthumb[data-th=show]{--frame:inset 10px 0 0 #22c55e,inset 22px 0 0 #e11d74,inset -10px 0 0 #22c55e,inset -22px 0 0 #e11d74}.qzmt{--cols:3!important}}

@media (min-width:761px){#home .tiles.two.three .tile .tt{font-size:clamp(1rem,1.55vw,1.6rem)!important}#home .tiles.two.three .tile>span:not(.arr):not(.ic){max-width:100%!important}}
@media (min-width:761px) and (max-width:1600px){#home .tiles.two.three .tile .ts{display:none!important}}
.t-quiz .bknote{background:rgba(255,255,255,.88);color:#3b4a73;padding:10px 16px;border-radius:16px;display:block}
.qzwh{margin-top:18px}

/* ---- v45: thumbnails, watermark, motion ---- */
.qzthumb{display:flex;flex-direction:column;gap:5px;width:136px;height:86px;padding:9px;border-radius:10px;background:var(--bg);position:relative;overflow:hidden;border:2px solid rgba(0,0,0,.25);font-family:var(--ff)}
.qzthumb[data-th=show]{box-shadow:inset 6px 0 0 #22c55e,inset 13px 0 0 #e11d74,inset -6px 0 0 #22c55e,inset -13px 0 0 #e11d74;padding:9px 17px}
.qzthumb .tp{height:24px;border-radius:6px;background:var(--pn);border:2px solid var(--pb);flex:none;display:block}
.qzthumb .to{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex:1}
.qzthumb .to i{border-radius:4px;border:2px solid var(--ob);background:var(--o1)}.qzthumb .to i:nth-child(2){background:var(--o2)}.qzthumb .to i:nth-child(3){background:var(--o3)}.qzthumb .to i:nth-child(4){background:var(--o4)}
.qzthumb em{position:absolute;right:5px;bottom:2px;font-style:normal;font-size:1.25rem;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.qzthumb.s{width:48px;height:32px;padding:4px;gap:2px;border-width:1px;border-radius:6px;flex:none}.qzthumb.s .tp{height:8px;border-width:1px;border-radius:3px}.qzthumb.s .to{gap:2px}.qzthumb.s .to i{border-width:1px;border-radius:2px}.qzthumb.s em{display:none}
.qzthumb.s[data-th=show]{padding:4px 7px;box-shadow:inset 3px 0 0 #22c55e,inset 6px 0 0 #e11d74,inset -3px 0 0 #22c55e,inset -6px 0 0 #e11d74}
.qzths{gap:10px}.qzths button.qzth{flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:16px;border-width:3px;background:transparent;color:var(--tx);transition:transform .16s,box-shadow .16s}
.qzths button.qzth span:last-child{font:800 .8rem var(--ff)}
.qzths button.qzth:hover{transform:translateY(-4px) rotate(-1deg)}
.qzths button.qzth[aria-pressed=true]{background:var(--ac);color:var(--btnt,#fff);border-color:var(--tx);box-shadow:0 8px 20px rgba(0,0,0,.35);transform:translateY(-3px)}
.qzc .qzcf>span:last-child{flex:1}
.qzwm{position:absolute;left:0;right:0;bottom:6%;text-align:center;pointer-events:none;color:var(--tx);opacity:.075;line-height:1.05;z-index:0}
.qzwm b{display:block;font:900 clamp(2.4rem,9vw,8.5rem) var(--ff);letter-spacing:.02em;white-space:nowrap}.qzwm span{font:800 clamp(1.3rem,4.4vw,3.8rem) 'Cairo','Tahoma',system-ui,sans-serif}
.qzfx{z-index:0}.qzh,.qzs{z-index:2}
.txr::before{content:var(--hp-teacher,"");position:fixed;left:0;right:0;bottom:12%;text-align:center;pointer-events:none;z-index:0;font:900 clamp(2rem,6.4vw,6rem)/1.1 system-ui,sans-serif;letter-spacing:.02em;color:rgba(0,0,0,.05);-webkit-text-stroke:2px rgba(255,255,255,.10);white-space:nowrap}
@keyframes qzin{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
@keyframes qzpop2{0%{opacity:0;transform:translateY(16px) scale(.86)}65%{opacity:1;transform:translateY(-3px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes qzflip{from{opacity:0;transform:perspective(500px) rotateY(-90deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes qzrt{from{transform:translateY(-.35em);opacity:.2}to{transform:none;opacity:1}}
@keyframes qzbump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes qzopen{0%{transform:none}25%{transform:rotate(-8deg) scale(1.05)}50%{transform:rotate(8deg) scale(1.1)}100%{transform:scale(1.7) rotate(0);opacity:0}}
@keyframes qzpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--no) 45%,transparent)}}
@keyframes qztk{0%{transform:rotate(0)}40%{transform:rotate(-18deg)}100%{transform:rotate(0)}}
@keyframes qzrise{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.qzs>.qzp,.qzs>.qzbar{animation:qzin .5s cubic-bezier(.2,.9,.3,1.1) both}
.qzs>.qzos,.qzs>.qzboxes,.qzs>.qzmt,.qzs>.qzll,.qzs>.qzwh,.qzs>.qzrow{animation:qzin .5s .08s cubic-bezier(.2,.9,.3,1.1) both}
.qzo{animation:qzpop2 .5s cubic-bezier(.2,.9,.3,1.2) backwards}.qzo:nth-child(1){animation-delay:.12s}.qzo:nth-child(2){animation-delay:.2s}.qzo:nth-child(3){animation-delay:.28s}.qzo:nth-child(4){animation-delay:.36s}
.qzbx{animation:qzpop2 .5s calc(var(--i,0)*45ms) cubic-bezier(.2,.9,.3,1.2) backwards}.qzbx.opening{animation:qzopen .52s ease-in forwards}
.qzmtile{animation:qzflip .5s calc(var(--i,0)*45ms) cubic-bezier(.2,.9,.3,1.1) backwards;transition:transform .15s,opacity .4s}
.qzbar.hot{animation:qzpulse .6s infinite}
.qzbar i{transition:width .1s linear,background .3s}
.qzs1 b.bump,.qzbig b.bump{display:inline-block;animation:qzbump .5s}
.qzs1{transition:transform .25s,box-shadow .25s,opacity .25s}
.qzptr.tk{transform-origin:50% 0;animation:qztk .12s}
.qzpt{position:fixed;z-index:45;pointer-events:none;font-size:1.3rem}
.qzsetup,.qzres{animation:qzin .55s cubic-bezier(.2,.9,.3,1.1) both}
.qztb tbody tr{animation:qzrise .45s both}.qztb tbody tr:nth-child(1){animation-delay:.1s}.qztb tbody tr:nth-child(2){animation-delay:.18s}.qztb tbody tr:nth-child(3){animation-delay:.26s}.qztb tbody tr:nth-child(4){animation-delay:.34s}.qztb tbody tr:nth-child(5){animation-delay:.42s}.qztb tbody tr:nth-child(6){animation-delay:.5s}
.qzstand div{animation:qzrise .5s both}.qzstand div:nth-child(2){animation-delay:.12s}.qzstand div:nth-child(3){animation-delay:.24s}.qzstand div:nth-child(4){animation-delay:.36s}
.qzc{animation:qzin .5s both}.qzc:nth-child(2){animation-delay:.07s}.qzc:nth-child(3){animation-delay:.14s}.qzc:nth-child(4){animation-delay:.21s}.qzc:nth-child(5){animation-delay:.28s}
.qzc:hover .qzci{animation:qzsh .5s}
.qzrl{animation:qzin .25s both}
.qzmute{padding:6px 10px}
@media (prefers-reduced-motion:reduce){.qzr *,.qzc,.qzmod *{animation:none!important;transition:none!important}}
.qzths{display:grid!important;grid-template-columns:repeat(6,1fr);flex:1;min-width:300px}.qzths .qzthumb{width:100%;height:auto;aspect-ratio:136/86}
@media (max-width:760px){.qzths{grid-template-columns:repeat(3,1fr)}}
.qzths .qzthumb{height:92px;aspect-ratio:auto;padding-bottom:7px}.qzths .qzthumb .tp{height:20px}

/* gallery */
#gallery{position:fixed;inset:0;z-index:60;background:rgba(10,14,34,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:14px}
#gallery[hidden]{display:none}
.gpanel{background:var(--bg);color:var(--ink);border-radius:28px;width:min(940px,100%);max-height:100%;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.gpanel .gh{display:flex;align-items:center;gap:12px;padding:14px 18px 14px 24px;border-bottom:2px solid var(--line);background:var(--surface)}
.gpanel .gh h2{margin:0;flex:1;font-family:var(--f-display);font-weight:600;font-size:1.5rem}
.gpanel .gb{overflow:auto;padding:6px 22px 24px}
.gcat{display:flex;align-items:baseline;justify-content:space-between;margin:20px 0 10px}
.gcat h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.25rem}
.gcat span{font-size:.85rem;color:var(--muted);font-weight:700}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:640px){.tgrid{grid-template-columns:repeat(2,1fr)}}
.thumb{position:relative;aspect-ratio:16/9;border-radius:12px;border:3px solid transparent;background-size:cover;background-position:center;padding:0;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.thumb:hover{border-color:var(--ink)}
.thumb[aria-pressed=true]{border-color:#ffc400;box-shadow:0 0 0 2px #fff,0 0 0 4px #ffc400}
.thumb .nmx{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;font-size:.72rem;font-weight:800;padding:2px 6px;text-align:left}
.thumb.add{background:var(--surface);border:3px dashed var(--line);display:grid;place-items:center;color:var(--muted);font-weight:800}
.thumb.add svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.thumb .rm{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:0;display:grid;place-items:center;padding:0}
.thumb .rm svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
#penHost{display:none}
/* quiz games: the 16 worlds (same names and pictures as the activity skins) */
.qzr[data-th=brand],.qzthumb[data-th=brand]{--bg:linear-gradient(160deg,#F2F4FC,#E6E1FB);--pn:#fff;--pb:#E3E7F2;--tx:#182344;--mu:#52658D;--ac:#6947E8;--ok:#22c55e;--no:#ef4444;--o1:#fff;--o2:#fff;--o3:#fff;--o4:#fff;--ot:#182344;--ob:#E3E7F2;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:20px;--btn:#6947E8;--btnt:#fff}
.qzr[data-th=snow],.qzthumb[data-th=snow]{--bg:linear-gradient(180deg,#8FCBF5 0,#D9F0FF 55%,#F4FBFF 100%);--pn:rgba(255,255,255,.78);--pb:#fff;--tx:#123A5E;--mu:#4A7396;--ac:#3B8FE0;--ok:#22c55e;--no:#ef4444;--o1:rgba(255,255,255,.92);--o2:rgba(255,255,255,.92);--o3:rgba(255,255,255,.92);--o4:rgba(255,255,255,.92);--ot:#123A5E;--ob:#fff;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:22px;--btn:#3B8FE0;--btnt:#fff}
.qzr[data-th=forest],.qzthumb[data-th=forest]{--bg:radial-gradient(circle at 30% 20%,#1B6B5C 0,transparent 55%),linear-gradient(180deg,#0E3B36,#06201D);--pn:rgba(10,50,45,.8);--pb:rgba(60,220,170,.5);--tx:#E9FFF6;--mu:#A8DCC8;--ac:#19C39A;--ok:#22c55e;--no:#ef4444;--o1:#145247;--o2:#145247;--o3:#145247;--o4:#145247;--ot:#EFFFF8;--ob:rgba(60,220,170,.5);--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:18px;--btn:#19C39A;--btnt:#06201D}
.qzr[data-th=abyss],.qzthumb[data-th=abyss]{--bg:radial-gradient(circle at 50% -10%,#1A7FB0 0,transparent 55%),linear-gradient(180deg,#0B3B6E,#04122A);--pn:rgba(20,70,110,.6);--pb:rgba(120,235,255,.55);--tx:#E6FBFF;--mu:#9AD3E6;--ac:#19D3E6;--ok:#22c55e;--no:#ef4444;--o1:rgba(40,130,170,.8);--o2:rgba(40,130,170,.8);--o3:rgba(40,130,170,.8);--o4:rgba(40,130,170,.8);--ot:#F2FEFF;--ob:rgba(120,235,255,.55);--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:26px;--btn:#19D3E6;--btnt:#04122A}
.qzr[data-th=crystal],.qzthumb[data-th=crystal]{--bg:radial-gradient(circle at 80% 10%,#7FD8FF55 0,transparent 45%),linear-gradient(150deg,#3B1E72,#1B0C40);--pn:rgba(60,30,120,.65);--pb:rgba(190,150,255,.65);--tx:#F6EEFF;--mu:#CDB8F5;--ac:#B58CFF;--ok:#22c55e;--no:#ef4444;--o1:linear-gradient(135deg,#7A4FD6,#3FA9E0);--o2:linear-gradient(135deg,#7A4FD6,#3FA9E0);--o3:linear-gradient(135deg,#7A4FD6,#3FA9E0);--o4:linear-gradient(135deg,#7A4FD6,#3FA9E0);--ot:#fff;--ob:rgba(190,150,255,.65);--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:14px;--btn:#B58CFF;--btnt:#1B0C40}
.qzr[data-th=gold],.qzthumb[data-th=gold]{--bg:radial-gradient(circle at 50% 0,#3A2E12 0,transparent 55%),#14110B;--pn:#1C1810;--pb:#E8C15A;--tx:#F7E9C2;--mu:#B9A36A;--ac:#E8C15A;--ok:#22c55e;--no:#ef4444;--o1:linear-gradient(160deg,#2A2416,#15120B);--o2:linear-gradient(160deg,#2A2416,#15120B);--o3:linear-gradient(160deg,#2A2416,#15120B);--o4:linear-gradient(160deg,#2A2416,#15120B);--ot:#F6DE9A;--ob:#E8C15A;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:4px;--btn:linear-gradient(160deg,#F6DE9A,#C99A2E);--btnt:#14110B}
.qzr[data-th=holo],.qzthumb[data-th=holo]{--bg:linear-gradient(120deg,#FBE9FF,#DFF7FF,#E9FFE9,#FFF3D9);--pn:rgba(255,255,255,.65);--pb:#fff;--tx:#2A2550;--mu:#6B6796;--ac:#9A6BFF;--ok:#22c55e;--no:#ef4444;--o1:rgba(255,255,255,.85);--o2:rgba(255,255,255,.85);--o3:rgba(255,255,255,.85);--o4:rgba(255,255,255,.85);--ot:#2A2550;--ob:#fff;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:24px;--btn:#9A6BFF;--btnt:#fff}
.qzr[data-th=synth],.qzthumb[data-th=synth]{--bg:linear-gradient(180deg,#2A0F52 0,#6B1F7A 55%,#FF4FB8 100%);--pn:rgba(40,12,80,.8);--pb:#FF4FB8;--tx:#FFF0FA;--mu:#E3A8D8;--ac:#FFC857;--ok:#22c55e;--no:#ef4444;--o1:#2A0F52;--o2:#2A0F52;--o3:#2A0F52;--o4:#2A0F52;--ot:#FFE9F7;--ob:#FF4FB8;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:0px;--btn:#FF4FB8;--btnt:#fff}
.qzr[data-th=nasa],.qzthumb[data-th=nasa]{--bg:repeating-linear-gradient(0deg,transparent 0 39px,#DCE5EF 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#DCE5EF 39px 40px),#F3F6FA;--pn:#fff;--pb:#C9D6E4;--tx:#0B2A4A;--mu:#5B748E;--ac:#1F6FEB;--ok:#22c55e;--no:#ef4444;--o1:#fff;--o2:#fff;--o3:#fff;--o4:#fff;--ot:#0B2A4A;--ob:#C9D6E4;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:6px;--btn:#1F6FEB;--btnt:#fff}
.qzr[data-th=volcano],.qzthumb[data-th=volcano]{--bg:linear-gradient(180deg,#2A0B08 0,#7A1A0A 60%,#FF6A1A 135%);--pn:rgba(40,14,10,.85);--pb:#FF7A2B;--tx:#FFF1E0;--mu:#F2B48A;--ac:#FF5A1F;--ok:#22c55e;--no:#ef4444;--o1:linear-gradient(#3A1410,#1E0907);--o2:linear-gradient(#3A1410,#1E0907);--o3:linear-gradient(#3A1410,#1E0907);--o4:linear-gradient(#3A1410,#1E0907);--ot:#FFE3C7;--ob:#FF7A2B;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:10px;--btn:#FF5A1F;--btnt:#fff}
.qzr[data-th=steam],.qzthumb[data-th=steam]{--bg:radial-gradient(circle at 20% 80%,#8C5A2855 0,transparent 40%),linear-gradient(160deg,#4A2E1A,#2A190E);--pn:rgba(58,36,21,.92);--pb:#C98A3B;--tx:#FFF2D9;--mu:#DDBB8A;--ac:#C98A3B;--ok:#22c55e;--no:#ef4444;--o1:linear-gradient(#8C5A28,#5E3A18);--o2:linear-gradient(#8C5A28,#5E3A18);--o3:linear-gradient(#8C5A28,#5E3A18);--o4:linear-gradient(#8C5A28,#5E3A18);--ot:#FFF2D9;--ob:#C98A3B;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:8px;--btn:#C98A3B;--btnt:#2A190E}
.qzr[data-th=sky],.qzthumb[data-th=sky]{--bg:linear-gradient(180deg,#4FAEF5 0,#9AD6FF 60%,#E9F7FF 100%);--pn:rgba(255,255,255,.88);--pb:#fff;--tx:#17406B;--mu:#4C7CA8;--ac:#2F8FE8;--ok:#22c55e;--no:#ef4444;--o1:#fff;--o2:#fff;--o3:#fff;--o4:#fff;--ot:#17406B;--ob:#fff;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:28px;--btn:#FFB020;--btnt:#17406B}
.qzr[data-th=haunted],.qzthumb[data-th=haunted]{--bg:radial-gradient(circle at 80% 15%,#C9B6FF33 0,transparent 30%),linear-gradient(180deg,#2A1A4E,#0C0718);--pn:rgba(26,16,48,.88);--pb:#6B4FB8;--tx:#EFE9FF;--mu:#B5A8D9;--ac:#9B6BFF;--ok:#22c55e;--no:#ef4444;--o1:linear-gradient(#34205E,#1E1238);--o2:linear-gradient(#34205E,#1E1238);--o3:linear-gradient(#34205E,#1E1238);--o4:linear-gradient(#34205E,#1E1238);--ot:#EFE9FF;--ob:#6B4FB8;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:16px;--btn:#9B6BFF;--btnt:#fff}
.qzr[data-th=matrix],.qzthumb[data-th=matrix]{--bg:repeating-linear-gradient(90deg,rgba(25,255,106,.06) 0 2px,transparent 2px 26px),#020A05;--pn:rgba(2,16,8,.9);--pb:#19FF6A;--tx:#B6FFD0;--mu:#4FCB7C;--ac:#19FF6A;--ok:#22c55e;--no:#ef4444;--o1:#03140A;--o2:#03140A;--o3:#03140A;--o4:#03140A;--ot:#7CFFAE;--ob:#19FF6A;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:0px;--btn:#19FF6A;--btnt:#020A05}
.qzr[data-th=zen],.qzthumb[data-th=zen]{--bg:radial-gradient(circle at 50% 22%,#C8322B 0 9%,transparent 9.3%),#F3EEE3;--pn:rgba(255,253,247,.94);--pb:#14110F;--tx:#14110F;--mu:#6B635A;--ac:#C8322B;--ok:#22c55e;--no:#ef4444;--o1:#FFFDF7;--o2:#FFFDF7;--o3:#FFFDF7;--o4:#FFFDF7;--ot:#14110F;--ob:#14110F;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:2px;--btn:#14110F;--btnt:#F3EEE3}
.qzr[data-th=pixel],.qzthumb[data-th=pixel]{--bg:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 4px,transparent 4px 8px),linear-gradient(#0B0733,#1B1464);--pn:#24186E;--pb:#FFD319;--tx:#FFF7D6;--mu:#C9BEF5;--ac:#FFD319;--ok:#22c55e;--no:#ef4444;--o1:#3B2BB8;--o2:#3B2BB8;--o3:#3B2BB8;--o4:#3B2BB8;--ot:#fff;--ob:#FFD319;--ff:'Tajawal','Alexandria',system-ui,sans-serif;--rad:0px;--btn:#FF2975;--btnt:#fff}

/* platform */
#home{display:none!important}
/* curricula bar + dashboard */
.hpc{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;padding:10px 14px;border-radius:18px;background:color-mix(in srgb,var(--surface) 86%,transparent);box-shadow:var(--shadow)}
.bkm .hpc{box-shadow:none;background:var(--surface-2);margin-top:0}
.hpc label{display:flex;gap:10px;align-items:center;flex:1;min-width:220px;font-weight:800}
.hpc select{flex:1;min-width:0}
.hpf{display:flex;flex-direction:column;gap:4px;font-weight:800}
.hpf[hidden]{display:none}
.hpf select,.hpf input{width:100%}
#dashView{padding-bottom:60px}
.dwho{font-weight:800;color:var(--muted);padding-inline:8px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:20px;align-items:start}
.dcard{background:var(--surface);border-radius:26px;box-shadow:var(--shadow);padding:clamp(16px,3vw,24px);display:flex;flex-direction:column;gap:14px;min-width:0}
.dhd{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.dhd h2{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.5rem;color:var(--c)}
.dhd p{margin:4px 0 0;color:var(--muted);font-weight:700;font-size:.92rem;max-width:46ch}
.dlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dlist li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border:2px solid var(--line);border-radius:18px}
.dlist li.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,var(--surface))}
.dn{display:flex;flex-direction:column;min-width:0}
.dn b{font-family:var(--f-display);font-weight:600;font-size:1.15rem;overflow-wrap:anywhere}
.dn span{color:var(--muted);font-weight:700;font-size:.88rem}
.da{display:flex;gap:6px;flex-wrap:wrap}
#dT{min-height:42vh;width:100%}

.hpo{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:2px solid var(--line);border-radius:14px;cursor:pointer}
.hpo:has(input:checked){border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,var(--surface))}
.hpo input{margin-top:5px;accent-color:var(--c);width:18px;height:18px;flex:none}
.hpo span{display:flex;flex-direction:column}.hpo small{color:var(--muted);font-weight:700}
.hpb{font-size:.8rem;font-weight:800;padding:2px 10px;border-radius:99px;background:#fff0c9;color:#7a5200;vertical-align:middle}

/* students: no teacher toolbar; lessons page */
html.hp-student .dockwrap{display:none!important}
#learnView{padding-bottom:60px}
.lnf{margin-top:16px}.lnf select{flex:0 1 190px}.lnf input{flex:1 1 240px;min-width:0}
.lnbody{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.lnc{background:var(--surface);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.lnh{display:flex;width:100%;gap:12px;align-items:center;justify-content:space-between;border:0;background:none;padding:14px 18px;text-align:start}
.lnh b{font-family:var(--f-display);font-weight:600;font-size:1.25rem}.lnh small{display:block;color:var(--muted);font-weight:700}
.lnh i{font-style:normal;font-size:1.6rem;font-weight:700;color:var(--c);width:32px;text-align:center;flex:none}
.lnlist{list-style:none;margin:0;padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.lnbody>.lnlist{padding:0}
.lnu{font-weight:800;color:var(--muted);padding:8px 6px 0;font-size:.9rem}
.lnl{border:2px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.lnl.on{border-color:var(--c)}
.lnb{display:flex;flex-direction:column;width:100%;border:0;background:none;padding:10px 14px;text-align:start}
.lnb b{font-weight:800;font-size:1.08rem}.lnb span{color:var(--muted);font-weight:700;font-size:.86rem}
.lnplay{padding:12px 14px 14px;background:color-mix(in srgb,var(--c) 8%,var(--surface));display:flex;flex-direction:column;gap:4px}
.lnplay b{font-family:var(--f-display);font-weight:600;color:var(--c)}.lnplay>span{font-weight:700;color:var(--muted);font-size:.9rem}
.lng{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* profile + settings */
.dprof{margin-top:20px;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center}
@media (max-width:860px){.dprof{grid-template-columns:minmax(0,1fr)}}
.dprof+.dcard{margin-top:20px}
.dav{display:flex;flex-direction:column;align-items:center;gap:8px}
.davi{width:112px;height:112px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#e8412c,#ff9a1f);display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:700;font-size:3rem;box-shadow:var(--shadow)}
.davi img{width:100%;height:100%;object-fit:cover}
.dpi h2{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.7rem;overflow-wrap:anywhere}.dpi p{margin:0 0 10px;color:var(--muted);font-weight:700;direction:ltr;text-align:start;overflow-wrap:anywhere}
.dset{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:var(--surface-2)}
.dchk{display:flex;gap:10px;align-items:flex-start;font-weight:800;cursor:pointer}.dchk input{width:22px;height:22px;accent-color:var(--c);flex:none;margin-top:3px}
.dchk small{display:block;color:var(--muted);font-weight:700;font-size:.85rem}
.lnadd{padding:0 12px 10px}
html.hp-nodock .dockwrap{display:none!important}
.dklabel{flex:none;align-self:center;max-width:64px;font-family:var(--f-display);font-weight:600;font-size:.82rem;line-height:1.15;text-align:center;color:#6b7499;padding-inline:4px}
#gtools.dcol .dklabel{display:none}

.dpf{margin-top:12px;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.dpf span{flex:1 1 220px;min-width:0;font-weight:600;color:var(--muted);line-height:1.6}
.dpf b{display:block;color:var(--ink);font-weight:800}

/* worked explanation: small button on the feedback pill, then a card over the game */
.pfb .qxb{pointer-events:auto;margin-inline-start:12px;font:inherit;font-size:.8em;font-weight:700;border:0;border-radius:999px;padding:4px 16px;background:#fff;color:#182344;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.pfb{pointer-events:auto}
.qxp{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(14,18,40,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.qxc{width:min(560px,100%);max-height:100%;overflow:auto;background:#fff;color:#182344;border-radius:24px;padding:24px 28px;box-shadow:0 24px 60px rgba(0,0,0,.35);font-family:"Tajawal",var(--f-body);display:flex;flex-direction:column;gap:14px;animation:qxin .22s ease-out}
@keyframes qxin{from{transform:translateY(14px) scale(.97);opacity:0}}
.qxc h3{margin:0;font-family:"Alexandria",var(--f-display);font-weight:800;font-size:1.45rem;color:#6947E8}
.qxc .qxq{margin:0;font-weight:700;font-size:1.15rem;line-height:1.6;background:#F2F4FC;border-radius:12px;padding:10px 14px}
.qxc ol{margin:0;padding:0;list-style:none;counter-reset:qx;display:flex;flex-direction:column;gap:10px}
.qxc li{counter-increment:qx;display:flex;gap:12px;align-items:flex-start;font-size:1.12rem;line-height:1.6;font-weight:500}
.qxc li::before{content:counter(qx);flex:none;width:30px;height:30px;border-radius:50%;background:#E8E2FF;color:#6947E8;font-weight:800;display:grid;place-items:center;font-size:.95rem;margin-top:2px}
.qxc .qxa{margin:0;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:#E7F8EE;border-radius:12px;padding:10px 14px;font-size:1.05rem}
.qxc .qxa b{font-size:1.25rem;color:#12804a}
.qxc .btn{align-self:center;min-width:160px;min-height:52px;font-size:1.15rem;background:#6947E8;color:#fff;border:0;border-radius:14px;font-weight:700}

/* Open the Box: surprise card */
.qzsur{text-align:center;animation:qxin .3s ease-out}.qzsurI{font-size:clamp(3rem,10vmin,6rem);line-height:1.1}.qzsurT{font-family:"Alexandria",var(--f-display);font-weight:800;font-size:clamp(1.4rem,4.4vmin,2.6rem);line-height:1.5;margin:8px 0}
.qzsur.good .qzsurT{color:#12804a}.qzsur.bad .qzsurT{color:#C62828}
/* shared site header (#hpTop, built by topbar.js) — used by engine pages and by the game wrapper */
#hpTop{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#hpTop .hin{width:min(100% - 2*clamp(16px,4vw,56px),1440px);margin-inline:auto;min-height:72px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:8px}
#hpTop .hlogo{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-display,var(--fh));font-weight:800;font-size:1.55rem;color:var(--ink);text-decoration:none}
#hpTop .hlogo i{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--v),var(--v-2));display:grid;place-items:center}
#hpTop .hlogo i::before{content:"";border-inline-start:13px solid #fff;border-block:8px solid transparent;margin-inline-start:4px}
html[dir=rtl] #hpTop .hlogo i::before{transform:scaleX(-1)}
#hpTop nav{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
#hpTop nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-sm);font-weight:700;color:var(--muted);text-decoration:none}
#hpTop nav a:hover{color:var(--ink);background:var(--surface)}
#hpTop nav a.on{color:var(--v);background:var(--v-soft)}
#hpTop .hlg{display:inline-flex;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px}
#hpTop .hlg button{border:0;background:none;min-height:36px;padding:0 14px;border-radius:999px;font-weight:700;font-size:.92rem}
#hpTop .hlg button.on{background:var(--ink);color:#fff}
#hpTop nav a{white-space:nowrap}
@media (max-width:1440px){#hpTop .hin{gap:12px}#hpTop nav{gap:2px}#hpTop nav a{padding:0 8px;font-size:.96rem}}
/* below 1240px the links get their own row instead of wrapping unevenly */
@media (max-width:1239px){#hpTop nav{order:3;flex-basis:100%;justify-content:center;overflow-x:auto;flex-wrap:nowrap}#hpTop .hlogo{flex:1}}
@media (max-width:860px){#hpTop nav{justify-content:flex-start}}
@media (max-width:560px){#hpTop .hin{gap:8px}#hpTop .hlogo{font-size:1.15rem;gap:8px;min-width:0}#hpTop .hlogo i{width:38px;height:38px;flex:none}#hpTop .hlg button{padding:0 10px;font-size:.88rem}}
/* eight tabs: keep the header on one line */
#hpTop .hin{flex-wrap:nowrap;gap:10px}#hpTop nav{display:flex;flex:1 1 auto;min-width:0;justify-content:center;gap:0}
#hpTop nav a{padding:0 9px;font-size:.95rem}#hpTop .hlogo{flex:none;white-space:nowrap}#hpTop .hlg,#hpTop .hps,#hpTop .hpbell{flex:none}
@media (max-width:1600px){#hpTop nav a{padding:0 7px;font-size:.9rem}}
@media (max-width:1320px){#hpTop nav a{padding:0 5px;font-size:.82rem}#hpTop .hlogo{font-size:1.25rem}#hpTop .hlg button{padding:0 9px;font-size:.85rem}}
@media (max-width:1100px){#hpTop .hin{flex-wrap:wrap}}
/* small lessons search in every header (markup: HP.searchHtml in shared.js). Appended to site.css and top.css by build.py.
   Wide screens: a compact field. Narrow screens: an icon that opens the field across the whole header row. */
.hps{display:flex;align-items:center;gap:8px;flex:none;margin:0}
.hps svg{width:20px;height:20px;fill:none;stroke:var(--muted,#52658D);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.hps-f{display:flex;align-items:center;gap:8px;height:44px;width:clamp(170px,14vw,230px);padding:0 14px;border:1px solid var(--line,#E3E7F2);border-radius:999px;background:var(--surface,#fff);cursor:text;transition:border-color .18s}
.hps-f:focus-within{border-color:var(--v,#6947E8)}
.hps input{flex:1;min-width:0;width:100%;border:0;outline:0;background:none;font:inherit;font-family:var(--f,inherit);font-size:.95rem;font-weight:500;color:var(--ink,#182344);padding:0;margin:0;height:100%;-webkit-appearance:none;appearance:none}
.hps input::placeholder{color:var(--muted,#52658D);opacity:1}
.hps input::-webkit-search-cancel-button{display:none}
.hps-o,.hps-x{display:none;width:44px;height:44px;flex:none;border-radius:var(--r-sm,12px);border:1px solid var(--line,#E3E7F2);background:var(--surface,#fff);place-items:center;padding:0;cursor:pointer}
.hps-o svg,.hps-x svg{stroke:var(--ink,#182344)}
.hps-go{display:none;flex:none;height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--v,#6947E8);color:#fff;font:inherit;font-family:var(--fh,inherit);font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap}
/* collapsed: below 1560px the nav links, language switch and account leave no room for the field */
@media (max-width:1559px){
  .top .hps-o{display:grid}.top .hps-f{display:none}
  .top .hps.open{position:absolute;inset:0;z-index:6;background:var(--bg,#F2F4FC);padding-inline:clamp(16px,4vw,56px)}
  .top .hps.open .hps-o{display:none}.top .hps.open .hps-f{display:flex;flex:1;width:auto;min-width:0}
  .top .hps.open .hps-x{display:grid}.top .hps.open .hps-go{display:block}
}
@media (max-width:1559px){
  #hpTop .hps-o{display:grid}#hpTop .hps-f{display:none}
  #hpTop .hps.open{position:absolute;inset:0;z-index:6;background:var(--bg,#F2F4FC);padding-inline:clamp(16px,4vw,56px)}
  #hpTop .hps.open .hps-o{display:none}#hpTop .hps.open .hps-f{display:flex;flex:1;width:auto;min-width:0}
  #hpTop .hps.open .hps-x{display:grid}#hpTop .hps.open .hps-go{display:block}
}
@media (max-width:420px){.hps.open .hps-go{padding:0 12px}}

/* one look across the site: same tokens as site.css */
:root,html.hp-ar{
  --f-display:"Alexandria","Tajawal","Segoe UI",system-ui,sans-serif;
  --f-body:"Tajawal","Alexandria","Segoe UI",system-ui,sans-serif;
  --r-sm:12px;--r-card:24px;--r-sec:28px;--v:#6947E8;--v-2:#8468F0;--v-soft:#E8E2FF;
}
:root{
  --bg:#F2F4FC;--surface:#FFFFFF;--surface-2:#EEF0FA;--ink:#182344;--muted:#52658D;--line:#E3E7F2;
  --c-games:#6947E8;
  --shadow:0 12px 32px rgba(24,35,68,.07);
}
h1,h2,h3{letter-spacing:0}
:focus-visible{outline-color:var(--v)}
.dcard,.hpc{border-radius:var(--r-card)}
.dlist li{border-width:1px;border-radius:var(--r-sm)}
/* site pages inside the engine (dashboard, lessons, library): flat page + shared header */
body[data-view=dash],body[data-view=learn],body[data-view=bank]{background:var(--bg)!important}
body[data-view=dash] #bgLayer,body[data-view=learn] #bgLayer,body[data-view=bank] #bgLayer,
body[data-view=dash] #bgFab,body[data-view=learn] #bgFab,body[data-view=bank] #bgFab{display:none!important}
#dashView,#learnView,#bankView{--c:var(--v);--c-rand:var(--v);--c-lesson:var(--v)}
body[data-view=dash] .bar.glass,body[data-view=learn] .bar.glass,body[data-view=bank] .bar.glass,
body[data-view=dash] .hpc,body[data-view=learn] .hpc,body[data-view=bank] .hpc{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px 18px}
body[data-view=dash] .wrap,body[data-view=learn] .wrap,body[data-view=bank] .wrap{max-width:1200px;gap:24px}
.back{border-width:1px}
/* header rules live in top.css; inside the engine it is hidden except on site-like views */
#hpTop{display:none;margin:-16px -16px 24px}
body[data-view=dash] #hpTop,body[data-view=learn] #hpTop,body[data-view=bank] #hpTop{display:block}
body[data-view=dash] #fsTop,body[data-view=learn] #fsTop,body[data-view=bank] #fsTop{display:none!important}
body[data-view=bank] .bkplay{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--r-card)}
@media (max-width:560px){body[data-view=bank] .bar.glass h1,body[data-view=dash] .bar.glass h1,body[data-view=learn] .bar.glass h1{flex:1 1 60%!important;font-size:1.5rem!important}}
@media (max-width:700px){body[data-view=bank] .bkplay{position:static}}
/* Duck Hunt skins: lake keeps the default look; space and fair restyle the HUD. Scoped by data-skin on the game root. */
@font-face{font-family:"DkSpace";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/th-changa-latin-700-normal.woff2) format("woff2");unicode-range:U+0030-0039}
@font-face{font-family:"DkSpace";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/th-orbitron-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-002F,U+003A-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"DkSpace";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/th-changa-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"DkFair";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/th-alfa-slab-one-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"DkFair";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/th-lalezar-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ================= space: ship console ================= */
.qg[data-skin="duck-space"]{background:#05071a;--f-display:"DkSpace","Alexandria","Tajawal","Segoe UI",system-ui,sans-serif;--dk:#3fe8ff}
.qg[data-skin="duck-space"] .phud{background:linear-gradient(180deg,rgba(3,8,28,.82),rgba(3,8,28,0))}
.qg[data-skin="duck-space"] .phud .pt,.qg[data-skin="duck-space"] .phud .ptitle{color:#c9fbff;text-shadow:0 0 12px rgba(63,232,255,.85),0 2px 4px #000}
.qg[data-skin="duck-space"] .phud .pt{font-weight:700}
.qg[data-skin="duck-space"] .gbtn{border-radius:8px;border:1.5px solid rgba(63,232,255,.7);background:rgba(6,18,46,.78);color:#c9fbff;box-shadow:0 0 12px rgba(63,232,255,.25),inset 0 0 10px rgba(63,232,255,.12);font-family:var(--f-display)}
.qg[data-skin="duck-space"] .msign{border:2px solid #3fe8ff;border-radius:4px 22px 4px 22px;padding:12px 26px 14px;
  background:repeating-linear-gradient(0deg,rgba(127,246,255,.055) 0 1px,transparent 1px 4px),linear-gradient(180deg,rgba(9,26,62,.95),rgba(4,10,32,.95));
  box-shadow:0 0 0 1px rgba(63,232,255,.25),0 0 30px rgba(40,200,255,.5),inset 0 0 34px rgba(40,160,255,.22)}
.qg[data-skin="duck-space"] .msign::before,.qg[data-skin="duck-space"] .msign::after{content:"";position:absolute;top:50%;width:7px;height:46%;transform:translateY(-50%);background:#3fe8ff;box-shadow:0 0 10px #3fe8ff;border-radius:2px}
.qg[data-skin="duck-space"] .msign::before{left:-10px}.qg[data-skin="duck-space"] .msign::after{right:-10px}
.qg[data-skin="duck-space"] .msign .mrule{color:#7ff6ff;font-family:var(--f-display);font-weight:700;opacity:1;text-shadow:0 0 8px rgba(63,232,255,.6)}
.qg[data-skin="duck-space"] .msign .mqt{color:#f4feff;font-weight:700;text-shadow:0 0 16px rgba(80,220,255,.75),0 2px 0 #021026}
.qg[data-skin="duck-space"] .mbar{height:10px;border-radius:2px;background:rgba(63,232,255,.12);border:1px solid rgba(63,232,255,.5)}
.qg[data-skin="duck-space"] .mbar i{border-radius:0;background:repeating-linear-gradient(90deg,#27f0c8 0 10px,#3fb8ff 10px 12px,transparent 12px 14px);box-shadow:0 0 12px #27f0c8}
.qg[data-skin="duck-space"] .mtm{border-radius:6px;border:2px solid rgba(63,232,255,.45);background:rgba(6,18,46,.85);font-family:var(--f-display)}
.qg[data-skin="duck-space"] .mtm.t0{background:#1345c4}.qg[data-skin="duck-space"] .mtm.t1{background:#c2265e}
.qg[data-skin="duck-space"] .mtm.on{border-color:#7ff6ff;box-shadow:0 0 0 2px rgba(63,232,255,.35),0 0 18px rgba(63,232,255,.7)}
.qg[data-skin="duck-space"] .hearts i{color:rgba(127,246,255,.25)}
.qg[data-skin="duck-space"] .hearts i.on{color:#ff5ad6;filter:drop-shadow(0 0 6px rgba(255,90,214,.9))}
.qg[data-skin="duck-space"] .pfb{border-radius:6px;font-family:var(--f-display);border:2px solid currentColor;box-shadow:0 0 22px currentColor}
.qg[data-skin="duck-space"] .pfb.good{background:#04261a;color:#5dffb0}
.qg[data-skin="duck-space"] .pfb.bad{background:#2e0714;color:#ff8ea8}
.qg[data-skin="duck-space"] .mpop{-webkit-text-stroke:6px #04102a;text-shadow:0 0 22px rgba(63,232,255,.9)}
.qg[data-skin="duck-space"] .mpop.good{color:#5dffe0}.qg[data-skin="duck-space"] .mpop.bad{color:#ff6b8e}
.qg[data-skin="duck-space"] .pov{background:rgba(2,5,22,.62)}
.qg[data-skin="duck-space"] .pcard{background:linear-gradient(180deg,#0c1a44,#060b26);color:#e6f8ff;border:2px solid #3fe8ff;border-radius:6px 26px 6px 26px;box-shadow:0 0 40px rgba(40,200,255,.45),inset 0 0 40px rgba(40,160,255,.15);--c:#3fe8ff;--muted:#a9c9e6;font-family:var(--f-display)}
.qg[data-skin="duck-space"] .pcard h2{text-shadow:0 0 18px rgba(63,232,255,.8)}
.qg[data-skin="duck-space"] .pcard p{font-family:"Alexandria","Tajawal","Segoe UI",system-ui,sans-serif;color:#b9d6ee}
.qg[data-skin="duck-space"] .pcard .btn{background:#3fe8ff;color:#04122a;border-radius:6px;border:0;box-shadow:0 0 16px rgba(63,232,255,.6)}
.qg[data-skin="duck-space"] .pcard .btn.ghost{background:rgba(63,232,255,.1);color:#d4f6ff;border:1.5px solid rgba(63,232,255,.6);box-shadow:none}
.qg[data-skin="duck-space"] .pcard .btn.qgrush{background:#ff5ad6;color:#fff;box-shadow:0 0 16px rgba(255,90,214,.6)}
.qg[data-skin="duck-space"] .pcard .pbig span{color:#a9c9e6}
.qg[data-skin="duck-space"] .dkx i{left:-26px;top:-26px;width:52px;height:52px;border-radius:0;border:0;box-shadow:none;transform:rotate(45deg);
  background:linear-gradient(#5dffe0,#5dffe0) 0 0/16px 3px no-repeat,linear-gradient(#5dffe0,#5dffe0) 0 0/3px 16px no-repeat,linear-gradient(#5dffe0,#5dffe0) 100% 0/16px 3px no-repeat,linear-gradient(#5dffe0,#5dffe0) 100% 0/3px 16px no-repeat,linear-gradient(#5dffe0,#5dffe0) 0 100%/16px 3px no-repeat,linear-gradient(#5dffe0,#5dffe0) 0 100%/3px 16px no-repeat,linear-gradient(#5dffe0,#5dffe0) 100% 100%/16px 3px no-repeat,linear-gradient(#5dffe0,#5dffe0) 100% 100%/3px 16px no-repeat;
  filter:drop-shadow(0 0 5px #27f0c8) drop-shadow(0 0 1px #000)}
.qg[data-skin="duck-space"] .dkx i::before{left:50%;top:50%;bottom:auto;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#ff5ad6;box-shadow:0 0 8px #ff5ad6}
.qg[data-skin="duck-space"] .dkx i::after{display:none}

/* ================= fair: circus marquee ================= */
.qg[data-skin="duck-fair"]{background:#120c26;--f-display:"DkFair","Alexandria","Tajawal","Segoe UI",system-ui,sans-serif}
.qg[data-skin="duck-fair"] .phud{background:linear-gradient(180deg,rgba(20,8,34,.8),rgba(20,8,34,0))}
.qg[data-skin="duck-fair"] .phud .pt,.qg[data-skin="duck-fair"] .phud .ptitle{color:#ffe9a8;font-weight:400;text-shadow:0 3px 0 #5a0a18,0 0 14px rgba(255,180,60,.5)}
.qg[data-skin="duck-fair"] .gbtn{border-radius:14px;border:2.5px solid #ffcf2e;background:#c81e3a;color:#fff;box-shadow:0 4px 0 #6a0c1e;font-family:var(--f-display);font-weight:400;backdrop-filter:none;-webkit-backdrop-filter:none}
.qg[data-skin="duck-fair"] .msign{border:6px solid #ffcf2e;border-radius:26px;padding:22px 34px 22px;
  background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.16),transparent 62%),repeating-linear-gradient(90deg,#c81e3a 0 38px,#b5182f 38px 76px);
  box-shadow:0 0 0 5px #7a0f22,0 10px 0 5px #4a0714,0 18px 34px rgba(0,0,0,.55),0 0 46px rgba(255,190,60,.35)}
.qg[data-skin="duck-fair"] .msign::before,.qg[data-skin="duck-fair"] .msign::after{content:"";position:absolute;inset:3px;border-radius:18px;pointer-events:none;
  background:radial-gradient(circle,#fffbe0 0 2.6px,#ffc400 3.2px 4.6px,rgba(255,196,0,0) 5.4px) 0 0/44px 13px repeat-x,radial-gradient(circle,#fffbe0 0 2.6px,#ffc400 3.2px 4.6px,rgba(255,196,0,0) 5.4px) 0 100%/44px 13px repeat-x;
  filter:drop-shadow(0 0 5px #ffb300);animation:dkbulb 1s steps(1) infinite}
.qg[data-skin="duck-fair"] .msign::after{background-position:22px 0,22px 100%;animation-delay:-.5s}
@keyframes dkbulb{0%{opacity:1}50%{opacity:.28}}
.qg[data-skin="duck-fair"] .msign .mrule{color:#ffe9a8;font-family:var(--f-display);font-weight:400;opacity:1;text-shadow:0 2px 0 #5a0a18}
.qg[data-skin="duck-fair"] .msign .mqt{color:#fff;font-weight:400;text-shadow:0 3px 0 #5a0a18,0 0 18px rgba(255,220,120,.35)}
.qg[data-skin="duck-fair"] .mbar{height:13px;border-radius:99px;background:#5a0a18;border:2px solid #ffcf2e}
.qg[data-skin="duck-fair"] .mbar i{background:repeating-linear-gradient(115deg,#ffcf2e 0 12px,#fff6d0 12px 24px)}
.qg[data-skin="duck-fair"] .mtm{border-radius:10px;border:3px solid #ffcf2e;background:#7a0f22;font-family:var(--f-display);font-weight:400;box-shadow:0 3px 0 #4a0714}
.qg[data-skin="duck-fair"] .mtm.t0{background:#1f6fe0}.qg[data-skin="duck-fair"] .mtm.t1{background:#e23a3a}
.qg[data-skin="duck-fair"] .mtm.on{border-color:#fff6d0;box-shadow:0 0 0 3px rgba(255,207,46,.6),0 0 18px rgba(255,200,60,.8)}
.qg[data-skin="duck-fair"] .hearts i{color:rgba(255,233,168,.3)}
.qg[data-skin="duck-fair"] .hearts i.on{color:#ff4d6d;filter:drop-shadow(0 2px 0 #5a0a18) drop-shadow(0 0 5px rgba(255,120,120,.7))}
.qg[data-skin="duck-fair"] .pfb{border-radius:16px;font-family:var(--f-display);font-weight:400;border:4px solid #ffcf2e;box-shadow:0 6px 0 rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.4)}
.qg[data-skin="duck-fair"] .pfb.good{background:#149a4c;color:#fff}
.qg[data-skin="duck-fair"] .pfb.bad{background:#fff4d2;color:#c81e3a;border-color:#c81e3a}
.qg[data-skin="duck-fair"] .mpop{-webkit-text-stroke:6px #4a0714;text-shadow:0 6px 0 #4a0714}
.qg[data-skin="duck-fair"] .mpop.good{color:#ffcf2e}
.qg[data-skin="duck-fair"] .pov{background:rgba(20,8,34,.6)}
.qg[data-skin="duck-fair"] .pcard{background:#fff4d2;color:#4a0f1e;border:6px solid #c81e3a;border-radius:30px;box-shadow:0 0 0 5px #ffcf2e,0 0 0 9px #7a0f22,0 30px 80px rgba(0,0,0,.6);--c:#c81e3a;--muted:#7a4a3a;font-family:var(--f-display)}
.qg[data-skin="duck-fair"] .pcard h2{font-weight:400;text-shadow:0 3px 0 #ffcf2e}
.qg[data-skin="duck-fair"] .pcard p{font-family:"Alexandria","Tajawal","Segoe UI",system-ui,sans-serif;color:#6a3a30}
.qg[data-skin="duck-fair"] .pcard .btn{background:#c81e3a;color:#fff;border-radius:16px;border:0;font-weight:400;box-shadow:0 5px 0 #7a0f22}
.qg[data-skin="duck-fair"] .pcard .btn.ghost{background:#ffe39a;color:#5a1020;box-shadow:0 5px 0 #d9a520;border:0}
.qg[data-skin="duck-fair"] .pcard .btn.qgrush{background:#12988a;color:#fff;box-shadow:0 5px 0 #0a5a52}
.qg[data-skin="duck-fair"] .pcard .pbig{font-weight:400}
.qg[data-skin="duck-fair"] .dkx i{border:5px solid #fff;box-shadow:0 0 0 4px #e2233a,0 0 0 6px rgba(0,0,0,.35),inset 0 0 0 4px #e2233a}
.qg[data-skin="duck-fair"] .dkx i::before,.qg[data-skin="duck-fair"] .dkx i::after{background:#ffcf2e}

/* narrow screens (phones held upright): keep the top bar on one line in every Duck Hunt skin */
@media (max-width:620px){
  .qg[data-skin^="duck-"] .phud{gap:6px;padding-left:8px;padding-right:8px}
  .qg[data-skin^="duck-"] .phud .ptitle{display:none}
  .qg[data-skin^="duck-"] .phud .pr{margin-inline-start:auto;gap:6px}
  .qg[data-skin^="duck-"] .phud .gbtn{font-size:0;gap:0;padding:0;width:40px;min-width:40px;height:40px}
  .qg[data-skin^="duck-"] .phud .pt{font-size:1.15rem;min-width:0}
  .qg[data-skin^="duck-"] .hearts i{width:22px;height:22px}
  .qg[data-skin^="duck-"] .mtm{padding:4px 9px;gap:5px;font-size:.8rem;max-width:34vw}
  .qg[data-skin^="duck-"] .mtm.on{transform:none}
  .qg[data-skin="duck-fair"] .msign{padding:18px 18px 18px}
  .qg[data-skin="duck-space"] .msign{padding:10px 14px 12px}
}

/* ================= Falcon Hunt themes (HUD skins) — scoped by data-skin on the game root ================= */
@font-face{font-family:"Baloo Bhaijaan 2";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/th-baloo-bhaijaan-2-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Baloo Bhaijaan 2";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/th-baloo-bhaijaan-2-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Oxanium";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/th-oxanium-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Changa";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/th-changa-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---------- sea: blue glass, bubbles, soft rounded type ---------- */
.qg[data-skin="falcon-sea"]{--f-display:"Baloo Bhaijaan 2","Fredoka","Tajawal","Segoe UI",system-ui,sans-serif;background:#2aa2e2}
.qg[data-skin="falcon-sea"] .phud,.qg[data-skin="falcon-sea"] .msign,.qg[data-skin="falcon-sea"] .pfb,.qg[data-skin="falcon-sea"] .pov,.qg[data-skin="falcon-sea"] .mfx{font-family:var(--f-display)}
.qg[data-skin="falcon-sea"] .phud{background:linear-gradient(180deg,rgba(6,70,140,.5),transparent)}
.qg[data-skin="falcon-sea"] .phud .pt,.qg[data-skin="falcon-sea"] .phud .ptitle{font-weight:700;text-shadow:0 2px 0 rgba(4,60,120,.75),0 4px 12px rgba(0,40,90,.5)}
.qg[data-skin="falcon-sea"] .gbtn{background:rgba(255,255,255,.26);border:2px solid rgba(255,255,255,.85);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 12px rgba(0,50,110,.3);font-family:var(--f-display);font-weight:700}
.qg[data-skin="falcon-sea"] .mtm{border-radius:999px;border:3px solid rgba(255,255,255,.55);box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 4px 10px rgba(0,50,110,.3);font-family:var(--f-display)}
.qg[data-skin="falcon-sea"] .mtm.t0{background:linear-gradient(180deg,#39a5ff,#1667d8)}
.qg[data-skin="falcon-sea"] .mtm.t1{background:linear-gradient(180deg,#ff7a6a,#e0402f)}
.qg[data-skin="falcon-sea"] .mtm.on{border-color:#fff}
.qg[data-skin="falcon-sea"] .hearts i.on{color:#ff5d7a;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 2px 3px rgba(0,50,110,.5));-webkit-filter:drop-shadow(0 2px 3px rgba(0,50,110,.5))}
.qg[data-skin="falcon-sea"] .hearts svg{stroke:#fff;stroke-width:1.6px}
.qg[data-skin="falcon-sea"] .msign{border:3px solid rgba(255,255,255,.85);border-radius:34px;padding:10px 30px 16px;
  background:
   radial-gradient(circle at 3.2% 28%,transparent 0 7px,rgba(255,255,255,.75) 7.5px 9.5px,transparent 10px),
   radial-gradient(circle at 5.6% 70%,transparent 0 4px,rgba(255,255,255,.7) 4.5px 6px,transparent 6.5px),
   radial-gradient(circle at 8% 44%,rgba(255,255,255,.55) 0 3px,transparent 3.5px),
   radial-gradient(circle at 96.5% 62%,transparent 0 8px,rgba(255,255,255,.75) 8.5px 10.5px,transparent 11px),
   radial-gradient(circle at 94% 24%,transparent 0 4px,rgba(255,255,255,.7) 4.5px 6px,transparent 6.5px),
   radial-gradient(circle at 91.5% 78%,rgba(255,255,255,.55) 0 3px,transparent 3.5px),
   linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.06) 42%,rgba(255,255,255,0) 43%),
   linear-gradient(180deg,rgba(40,156,236,.88),rgba(6,84,168,.9));
  box-shadow:0 10px 28px rgba(0,50,110,.45),inset 0 -12px 26px rgba(0,40,110,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.qg[data-skin="falcon-sea"] .msign .mrule{color:#d4f3ff;opacity:1;font-size:clamp(.74rem,1.9vw,1.02rem)}
.qg[data-skin="falcon-sea"] .msign .mqt{font-weight:700;color:#fff;text-shadow:0 2px 0 rgba(3,56,118,.8),0 0 16px rgba(160,230,255,.35)}
.qg[data-skin="falcon-sea"] .mbar{height:10px;background:rgba(2,44,100,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.qg[data-skin="falcon-sea"] .mbar i{background:linear-gradient(90deg,#7ef3ff,#fff)}
.qg[data-skin="falcon-sea"] .pfb{border:3px solid #fff;box-shadow:0 6px 18px rgba(0,50,110,.4)}
.qg[data-skin="falcon-sea"] .pfb.good{background:linear-gradient(180deg,#2fd27a,#0e9f55)}
.qg[data-skin="falcon-sea"] .pfb.bad{background:#fff;color:#c21e2e;border-color:#ff8f98}
.qg[data-skin="falcon-sea"] .pov{background:rgba(4,60,130,.42)}
.qg[data-skin="falcon-sea"] .pcard{--c:#0a7fd0;background:linear-gradient(180deg,#ffffff,#d8f1ff);border:4px solid #fff;border-radius:36px;box-shadow:0 0 0 4px rgba(42,162,226,.55),0 30px 80px rgba(0,40,100,.5)}
.qg[data-skin="falcon-sea"] .pcard h2{font-weight:700;text-shadow:0 2px 0 #fff}
.qg[data-skin="falcon-sea"] .pcard .btn{border-radius:999px;font-weight:700}
.qg[data-skin="falcon-sea"] .mpop{-webkit-text-stroke:6px #053a78}
.qg[data-skin="falcon-sea"] .mpop.good{color:#8ff3ff}

/* ---------- cyberpunk: hologram panel, neon frame, scanlines, sharp digital type ---------- */
.qg[data-skin="falcon-cyber"]{--f-display:"Oxanium","Changa","Tajawal","Segoe UI",system-ui,sans-serif;background:#0a0d1e}
.qg[data-skin="falcon-cyber"] .phud,.qg[data-skin="falcon-cyber"] .msign,.qg[data-skin="falcon-cyber"] .pfb,.qg[data-skin="falcon-cyber"] .pov,.qg[data-skin="falcon-cyber"] .mfx{font-family:var(--f-display)}
.qg[data-skin="falcon-cyber"] .phud{background:linear-gradient(180deg,rgba(4,4,18,.85),transparent)}
.qg[data-skin="falcon-cyber"] .phud .pt{font-weight:700;color:#7dfcff;text-shadow:0 0 10px rgba(57,240,255,.9)}
.qg[data-skin="falcon-cyber"] .phud .ptitle{font-weight:700;font-size:clamp(.8rem,2.1vw,1.25rem);color:#fff;text-shadow:0 0 10px rgba(255,79,216,.95),0 0 2px #ff4fd8}
.qg[data-skin="falcon-cyber"] .gbtn{background:rgba(8,10,34,.82);border:1.5px solid #39f0ff;border-radius:6px;color:#bffcff;box-shadow:0 0 10px rgba(57,240,255,.55),inset 0 0 8px rgba(57,240,255,.2);backdrop-filter:none;-webkit-backdrop-filter:none;font-family:var(--f-display);font-weight:700;font-size:.82rem}
.qg[data-skin="falcon-cyber"] .mtm{border-radius:5px;border:2px solid rgba(255,255,255,.25);background:rgba(8,10,34,.85);font-family:var(--f-display);font-size:.8rem;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.qg[data-skin="falcon-cyber"] .mtm.t0{background:linear-gradient(180deg,#1d56d8,#0b2a86);border-color:#6fb2ff}
.qg[data-skin="falcon-cyber"] .mtm.t1{background:linear-gradient(180deg,#e0325c,#7c0f33);border-color:#ff8aa6}
.qg[data-skin="falcon-cyber"] .mtm.on{border-color:#fff;box-shadow:none;filter:drop-shadow(0 0 7px rgba(255,255,255,.9))}
.qg[data-skin="falcon-cyber"] .hearts i{color:rgba(255,79,216,.22)}
.qg[data-skin="falcon-cyber"] .hearts i.on{color:#ff4fd8;filter:drop-shadow(0 0 6px #ff4fd8)}
.qg[data-skin="falcon-cyber"] .msign{border:2px solid #39f0ff;border-radius:3px;padding:10px 26px 16px;
  background:
   linear-gradient(135deg,#ff4fd8 0 13px,transparent 13.5px),
   linear-gradient(315deg,#ff4fd8 0 13px,transparent 13.5px),
   repeating-linear-gradient(180deg,rgba(57,240,255,.085) 0 2px,transparent 2px 5px),
   linear-gradient(180deg,rgba(16,20,62,.93),rgba(5,6,26,.95));
  box-shadow:0 0 0 1px rgba(57,240,255,.35),0 0 22px rgba(57,240,255,.7),inset 0 0 26px rgba(57,240,255,.2),0 10px 26px rgba(0,0,0,.6)}
.qg[data-skin="falcon-cyber"] .msign .mrule{color:#ff8cea;opacity:1;font-weight:700;text-shadow:0 0 8px rgba(255,79,216,.8)}
.qg[data-skin="falcon-cyber"] .msign .mrule.t0{color:#9fc8ff!important}
.qg[data-skin="falcon-cyber"] .msign .mqt{font-weight:700;font-size:clamp(1.15rem,3.3vw,2.15rem);line-height:1.3;color:#fff;text-shadow:0 0 12px rgba(57,240,255,.9),0 0 2px #39f0ff}
.qg[data-skin="falcon-cyber"] .mbar{height:8px;border-radius:0;background:rgba(57,240,255,.14);box-shadow:inset 0 0 0 1px rgba(57,240,255,.4)}
.qg[data-skin="falcon-cyber"] .mbar i{border-radius:0;background:linear-gradient(90deg,#ff4fd8,#39f0ff);box-shadow:0 0 10px #39f0ff}
.qg[data-skin="falcon-cyber"] .pfb{border-radius:4px;border:2px solid currentColor;background:rgba(6,8,30,.94);font-size:clamp(.95rem,2.4vw,1.45rem)}
.qg[data-skin="falcon-cyber"] .pfb.good{color:#39ff88;background:rgba(3,34,20,.95);box-shadow:0 0 18px rgba(57,255,136,.7)}
.qg[data-skin="falcon-cyber"] .pfb.bad{color:#ff7d9c;background:rgba(44,5,18,.95);box-shadow:0 0 18px rgba(255,59,107,.7)}
.qg[data-skin="falcon-cyber"] .pov{background:rgba(4,3,16,.6)}
.qg[data-skin="falcon-cyber"] .pcard{--c:#39f0ff;--bg:#0b0e26;--ink:#eaf8ff;--muted:#b4c2e6;--surface:#04121c;--surface-2:#1c2350;background:repeating-linear-gradient(180deg,rgba(57,240,255,.05) 0 2px,transparent 2px 5px),linear-gradient(180deg,#141a48,#070920);color:#eaf8ff;border:2px solid #39f0ff;border-radius:6px;box-shadow:0 0 0 1px rgba(57,240,255,.35),0 0 40px rgba(57,240,255,.55),inset 0 0 30px rgba(57,240,255,.14)}
.qg[data-skin="falcon-cyber"] .pcard h2{font-weight:700;font-size:clamp(1.5rem,4.2vw,2.2rem);text-shadow:0 0 14px rgba(57,240,255,.9)}
.qg[data-skin="falcon-cyber"] .pcard p{font-family:"Changa","Tajawal","Segoe UI",system-ui,sans-serif;font-weight:700}
.qg[data-skin="falcon-cyber"] .pcard .btn{border-radius:4px;font-weight:700;font-size:1rem;box-shadow:0 0 14px rgba(57,240,255,.6)}
.qg[data-skin="falcon-cyber"] .pcard .btn.ghost{box-shadow:inset 0 0 0 1.5px #ff4fd8;color:#ffd6f6}
.qg[data-skin="falcon-cyber"] .pcard .pbig{text-shadow:0 0 18px rgba(57,240,255,.8)}
.qg[data-skin="falcon-cyber"] .mpop{-webkit-text-stroke:5px #0b0530;font-size:clamp(1.7rem,5.6vw,3.7rem)}
.qg[data-skin="falcon-cyber"] .mpop.good{color:#39ff88;text-shadow:0 0 18px #39ff88}
.qg[data-skin="falcon-cyber"] .mpop.bad{color:#ff5c86;text-shadow:0 0 18px #ff3b6b}
html.hp-ar .qg[data-skin="falcon-cyber"] .msign .mrule,html.hp-ar .qg[data-skin="falcon-sea"] .msign .mrule{letter-spacing:0}
/* narrow / portrait screens: keep the top bar on one line (the rule line inside the sign already says what to do) */
@media (max-width:640px){
  .qg[data-skin^="falcon-"] .phud{gap:6px;padding-inline:8px}
  .qg[data-skin^="falcon-"] .phud .ptitle{visibility:hidden;min-width:0;height:0;overflow:hidden}
  .qg[data-skin^="falcon-"] .phud .gbtn{font-size:0;gap:0;padding:0;width:42px;min-width:42px;height:42px}
  .qg[data-skin^="falcon-"] .phud .pr{gap:6px}
  .qg[data-skin^="falcon-"] .phud .hearts i{width:24px;height:24px}
  .qg[data-skin^="falcon-"] .mtm{max-width:34vw;padding:4px 9px}
}
/* Arabic sentences inside the cards keep their own direction (full stop at the correct end) */
.qg[data-skin^="falcon-"] .pcard p,.qg[data-skin^="falcon-"] .pfb{unicode-bidi:plaintext}
/* Fish Hunt — theme skins. The game sets data-skin="fish-dock|fish-ice|fish-deep" on #fishView. Fonts: SIL Open Font Licence 1.1 (from @fontsource). */
@font-face{font-family:"Baloo Bhaijaan 2";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/th-baloo-bhaijaan-2-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Baloo Bhaijaan 2";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/th-baloo-bhaijaan-2-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Almendra";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/th-almendra-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amiri";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/th-amiri-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* the aiming hint under the play area (all themes) */
#fishView .fhint{position:absolute;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom,0px)) + 106px);transform:translateX(-50%);z-index:5;pointer-events:none;display:none;width:max-content;max-width:calc(100% - 24px);text-align:center}
#fishView .fhint.on{display:block}
html.hp-student #fishView .fhint,html.hp-nodock #fishView .fhint{bottom:max(16px,env(safe-area-inset-bottom,0px))}
#fishView .fhint span{display:inline-block;padding:8px 22px;border-radius:999px;background:rgba(20,40,80,.6);color:#fff;font-family:var(--f-display);font-weight:600;font-size:clamp(.95rem,2.1vw,1.4rem);line-height:1.3;box-shadow:0 4px 14px rgba(10,30,60,.3)}
#fishView .fhint.far span{background:#ff9f1c!important;color:#3a2200!important;border-color:#fff!important}
#fishView[data-skin] .msign{transition:none}

/* ---------- Ice Fishing: a slab of ice with a snow cap, soft rounded lettering ---------- */
#fishView[data-skin="fish-ice"]{--f-display:"Baloo Bhaijaan 2","Alexandria","Tajawal","Segoe UI",system-ui,sans-serif;background:#0a2c4c}
#fishView[data-skin="fish-ice"] .msign{border:5px solid #c9ebfc;border-radius:26px;background:linear-gradient(180deg,#fbfeff 0%,#dbf2fe 52%,#a9dbf6 100%);box-shadow:0 8px 0 #5aa4d2,0 16px 30px rgba(0,40,90,.4),inset 0 0 0 3px rgba(255,255,255,.85),inset 0 -20px 30px rgba(110,185,235,.35);padding:16px 24px 14px}
#fishView[data-skin="fish-ice"] .msign::before{content:"";position:absolute;left:14px;right:14px;top:-15px;height:24px;background:radial-gradient(circle at 50% 100%,#fff 0 15px,transparent 16px) 0 0/34px 24px repeat-x;filter:drop-shadow(0 2px 0 rgba(120,180,220,.55));pointer-events:none}
#fishView[data-skin="fish-ice"] .msign::after{content:"";position:absolute;left:10%;right:10%;bottom:-17px;height:14px;background:linear-gradient(180deg,#cfeeff,rgba(207,238,255,0)) 0 0/100% 100%;clip-path:polygon(0 0,6% 0,8% 100%,10% 0,22% 0,25% 70%,28% 0,47% 0,49% 100%,51% 0,70% 0,73% 60%,76% 0,90% 0,92% 100%,94% 0,100% 0);pointer-events:none}
#fishView[data-skin="fish-ice"] .msign .mrule{color:#2a6f9f;opacity:1}
#fishView[data-skin="fish-ice"] .msign .mrule.t0{color:#1c62c4!important}#fishView[data-skin="fish-ice"] .msign .mrule.t1{color:#c4313f!important}
#fishView[data-skin="fish-ice"] .msign .mqt{color:#0b3558;text-shadow:0 2px 0 #fff;font-weight:700}
#fishView[data-skin="fish-ice"] .mbar{height:10px;background:rgba(30,100,150,.22);box-shadow:inset 0 1px 2px rgba(0,50,90,.3)}
#fishView[data-skin="fish-ice"] .mbar i{background:linear-gradient(90deg,#8fe6ff,#3a9bf0)}
#fishView[data-skin="fish-ice"] .phud{background:linear-gradient(180deg,rgba(4,24,50,.55),transparent)}
#fishView[data-skin="fish-ice"] .gbtn{background:rgba(225,244,255,.22);border-color:#dff4ff}
#fishView[data-skin="fish-ice"] .mtm{border-radius:16px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 4px 0 rgba(10,60,110,.35)}
#fishView[data-skin="fish-ice"] .mtm.t0{background:#3a9bdf}#fishView[data-skin="fish-ice"] .mtm.t1{background:#e0607a}
#fishView[data-skin="fish-ice"] .hearts i{color:rgba(255,255,255,.35)}#fishView[data-skin="fish-ice"] .hearts i.on{color:#ff7d9c;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 2px 3px rgba(0,30,70,.5))}
#fishView[data-skin="fish-ice"] .pfb{border-radius:20px;border:3px solid #fff;font-weight:700}
#fishView[data-skin="fish-ice"] .pfb.good{background:#14a37f}#fishView[data-skin="fish-ice"] .pfb.bad{background:#fff5f6;color:#c21e2e;border-color:#ffc4cc}
#fishView[data-skin="fish-ice"] .pov{background:rgba(6,36,76,.45)}
#fishView[data-skin="fish-ice"] .pcard{--c:#1f7fc0;border:5px solid #c9ebfc;background:linear-gradient(180deg,#fff,#e4f4fe);box-shadow:0 10px 0 #5aa4d2,0 30px 80px rgba(0,20,60,.5)}
#fishView[data-skin="fish-ice"] .fhint span{background:rgba(244,251,255,.94);color:#0b3558;border:2px solid #bfe6fb;font-weight:700}
#fishView[data-skin="fish-ice"] .mpop{-webkit-text-stroke-color:#0b3558;text-shadow:0 6px 0 #0b3558}

/* ---------- Deep Sea: a brass porthole panel with glowing lettering, old nautical type ---------- */
#fishView[data-skin="fish-deep"]{--f-display:"Almendra","Amiri","Alexandria",Georgia,serif;background:#0a5a84}
#fishView[data-skin="fish-deep"] .msign{border:6px solid #e0b04a;border-radius:70px;background:radial-gradient(ellipse at 50% -10%,#14708f 0%,#07354e 55%,#031d2c 100%);box-shadow:0 0 0 3px #6b4210,0 0 0 9px #c6923a,0 0 0 12px #5a370c,0 16px 28px rgba(0,0,0,.55),inset 0 0 0 2px #6b4210,inset 0 0 34px rgba(63,240,255,.28);padding:12px 60px 14px}
#fishView[data-skin="fish-deep"] .msign::before,#fishView[data-skin="fish-deep"] .msign::after{content:"";position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6cc 0,#d9a441 45%,#6b4210 100%);box-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
#fishView[data-skin="fish-deep"] .msign::before{left:20px}#fishView[data-skin="fish-deep"] .msign::after{right:20px}
#fishView[data-skin="fish-deep"] .msign .mrule{color:#f0c665;letter-spacing:.08em;opacity:1}
#fishView[data-skin="fish-deep"] .msign .mrule.t0{color:#8fd0ff!important}#fishView[data-skin="fish-deep"] .msign .mrule.t1{color:#ffb0a6!important}
#fishView[data-skin="fish-deep"] .msign .mqt{color:#f2ffff;text-shadow:0 0 14px rgba(63,240,255,.75),0 2px 0 #01121c;font-weight:700}
#fishView[data-skin="fish-deep"] .mbar{height:10px;background:rgba(0,0,0,.5);box-shadow:0 0 0 1.5px #b8862e}
#fishView[data-skin="fish-deep"] .mbar i{background:linear-gradient(90deg,#3ff0ff,#8dffb8);box-shadow:0 0 10px rgba(63,240,255,.8)}
#fishView[data-skin="fish-deep"] .phud{background:linear-gradient(180deg,rgba(1,16,28,.7),transparent)}
#fishView[data-skin="fish-deep"] .phud .pt,#fishView[data-skin="fish-deep"] .phud .ptitle{color:#ffe9a8;text-shadow:0 2px 6px rgba(0,0,0,.7)}
#fishView[data-skin="fish-deep"] .phud .ptitle.t0{color:#a8dcff}#fishView[data-skin="fish-deep"] .phud .ptitle.t1{color:#ffc2ba}
#fishView[data-skin="fish-deep"] .gbtn{background:rgba(4,36,56,.8);border:2px solid #d9a441;color:#ffe9a8;border-radius:12px}
#fishView[data-skin="fish-deep"] .mtm{border-radius:10px;border:2px solid #b8862e;color:#fff3c8;background:#07354e}
#fishView[data-skin="fish-deep"] .mtm.t0{background:#0c4f7e}#fishView[data-skin="fish-deep"] .mtm.t1{background:#8a2a34}
#fishView[data-skin="fish-deep"] .mtm.on{border-color:#ffe9a0;box-shadow:0 0 0 2px #5a370c,0 0 16px rgba(63,240,255,.7)}
#fishView[data-skin="fish-deep"] .hearts i{color:rgba(190,240,255,.25)}#fishView[data-skin="fish-deep"] .hearts i.on{color:#ff8a66;filter:drop-shadow(0 0 6px rgba(255,120,80,.9))}
#fishView[data-skin="fish-deep"] .pfb{border-radius:12px;border:3px solid #e0b04a;box-shadow:0 0 0 2px #5a370c,0 10px 24px rgba(0,0,0,.5);font-weight:700}
#fishView[data-skin="fish-deep"] .pfb.good{background:#0c6a3c;color:#eafff2}#fishView[data-skin="fish-deep"] .pfb.bad{background:#641420;color:#ffeaea}
#fishView[data-skin="fish-deep"] .pov{background:rgba(1,22,38,.6)}
#fishView[data-skin="fish-deep"] .pcard{--c:#ffd76a;--ink:#f2ffff;--muted:#bfe6f2;--surface:#06293c;--surface-2:#0f5672;color:#f2ffff;border:5px solid #e0b04a;border-radius:22px;background:linear-gradient(180deg,#0e5674,#052a40);box-shadow:0 0 0 3px #5a370c,0 0 0 9px #c6923a,0 0 0 12px #5a370c,0 30px 80px rgba(0,0,0,.6)}
#fishView[data-skin="fish-deep"] .pcard .mfin b,#fishView[data-skin="fish-deep"] .pcard .mfin span{color:#fff}
#fishView[data-skin="fish-deep"] .fhint span{background:rgba(4,36,56,.9);color:#f2ffff;border:2px solid #d9a441;border-radius:12px;font-weight:700}
#fishView[data-skin="fish-deep"] .mpop{-webkit-text-stroke-color:#021520;text-shadow:0 6px 0 #021520,0 0 18px rgba(63,240,255,.6)}

/* Arabic sentences inside the cards and pills read right-to-left whatever the page direction */
html.hp-ar #fishView .pcard p,html.hp-ar #fishView .pfb,html.hp-ar #fishView .fhint span{unicode-bidi:plaintext}
/* narrow screens: the HUD line repeats the rule on the sign, so drop it (team turns stay), and tighten the porthole */
@media (max-width:640px){
  #fishView .phud .ptitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #fishView .phud .ptitle:not(.t0):not(.t1){visibility:hidden}
  #fishView[data-skin="fish-deep"] .msign{border-radius:34px;padding:12px 26px 14px}
  #fishView[data-skin="fish-deep"] .msign::before,#fishView[data-skin="fish-deep"] .msign::after{width:10px;height:10px;margin-top:-5px}
  #fishView[data-skin="fish-deep"] .msign::before{left:8px}#fishView[data-skin="fish-deep"] .msign::after{right:8px}
}

/* game page embedded in the wrapper (class set by pause.js): the wrapper owns these controls until full screen */
html.hp-framed #dockbar,html.hp-framed #dockToggle,html.hp-framed #fsTop,html.hp-framed #miniBtn{display:none!important}
/* the floating pause control (pause.js) sits above the teacher-tools dock on narrow screens */
@media (max-width:900px){html:not(.hp-nodock):not(.hp-student) #hpFab{bottom:calc(88px + env(safe-area-inset-bottom))}}