/* Mouthful — the looks you can buy in the shop (English app): pets, colour themes (skins), bar styles, the coin chip, the shop itself. */

/* ---------- pets (pet-art.js, "Mochi Big-eyes", 2026-10-29): every class scoped to svg.pet4; the face rules the app owns stay in base.css ---------- */
/* Mouthful pets — "Mochi Big-eyes" (pet-art.js). Every rule is scoped to svg.pet4; the app owns .mascot, .m-body, .m-blink,
   .m-pupil, .m-smile and .m-mouth (base.css). Per-pet colours come from the svg's style: --b body · --d shade · --c / --c2 / --c3
   markings · --i inner ear · --x iris. */
/* body */
.pet4 .mo-sh{fill:var(--d)}
.pet4 .mo-f{fill:var(--b)}
.pet4 .mo-rim{fill:none;stroke:var(--d);stroke-width:2.2;opacity:.55}
.pet4 .mo-gloss{fill:#fff;opacity:.7}
.pet4 .mo-gloss2{fill:#fff;opacity:.85}
.pet4 .mo-shadow{fill:#2A1F33;opacity:.12}
.pet4 .mo-nub{fill:var(--d)}
.pet4 .mo-c{fill:var(--c)}
.pet4 .mo-c2{fill:var(--c2)}
.pet4 .mo-c3{fill:var(--c3)}
.pet4 .mo-i{fill:var(--i)}
.pet4 .mo-w{fill:#fff}
.pet4 .ol{stroke:var(--d);stroke-width:2.4;stroke-linejoin:round}
.pet4 .ol2{stroke:var(--d);stroke-width:2;stroke-linejoin:round}
.pet4 .ol3{stroke:var(--d);stroke-width:2.2;stroke-linejoin:round;stroke-opacity:.7}
.pet4 .o6{opacity:.6}
.pet4 .o45{opacity:.45}
/* eyes (the .m-white base is restyled here: .pet4 .mo-eb beats the app's .m-white) */
.pet4 .mo-eb{fill:#2B2035;stroke:none}
.pet4.pet-pandi .mo-eb,.pet4.pet-dozy .mo-eb,.pet4.pet-goma .mo-eb{stroke:#fff;stroke-width:2.4}
.pet4 .mo-iris{fill:var(--x)}
.pet4 .mo-hl{fill:#fff}
.pet4 .mo-hl2{fill:#fff;opacity:.75}
.pet4 .mo-wet{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:.9}
.pet4 .mo-lid{fill:var(--b)}
.pet4.pet-pandi .mo-lid,.pet4.pet-pip .mo-lid,.pet4.pet-whom .mo-lid,.pet4.pet-minty .mo-lid{fill:var(--c)}
.pet4.pet-dozy .mo-lid{fill:var(--c2)}
.pet4.pet-dozy .mo-lid{fill:var(--c2)}
/* face lines */
.pet4 .mo-ln{fill:none;stroke:#3B2B36;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.pet4 .mo-ln.b{stroke-width:3.6}
.pet4 .mo-ln.t{stroke-width:2.8}
.pet4.pet-goma .mo-ln.b,.pet4.pet-goma .mo-ln.t,.pet4.pet-pandi .mo-ln.b,.pet4.pet-dozy .mo-ln.b{stroke:#fff}
.pet4.pet-goma .mo-ln.lidln,.pet4.pet-pandi .mo-ln.lidln,.pet4.pet-dozy .mo-ln.lidln{stroke:#fff}   /* the lid line on a dark lid */
.pet4 .mo-ln.sp{stroke-width:2.6}
.pet4 .mo-ln.mt{stroke-width:2.8}     /* thin mouth lines: stay dark on every pet (goma has a light muzzle) */
.pet4 .mo-open{fill:#B04E63}
.pet4 .mo-tongue{fill:#FF98AC}
.pet4 .mo-tongue.out{stroke:#D4506F;stroke-width:1.6;stroke-linejoin:round}   /* a tongue out of the mouth still shows on pink pets */
.pet4 .mo-tln{fill:none;stroke:#E2607E;stroke-width:1.6;stroke-linecap:round}
.pet4 .mo-blush{fill:#FF8FAE;opacity:.55}
.pet4 .mo-blush.dim{opacity:.3}
.pet4 .mo-blush.hot{fill:#FF5B5B;opacity:.5}
.pet4 .mo-tear{fill:#A8DEFF}
.pet4 .mo-spk{fill:#FFD36B}
.pet4 .mo-vein{fill:none;stroke:#FF4D5E;stroke-width:3.4;stroke-linecap:round}
.pet4 .mo-z{fill:none;stroke:#8A7FA0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pet4 .mo-heart{fill:#FF5C8A}
.pet4 .mo-shades{fill:#1D1A22}
.pet4 .mo-shln{fill:none;stroke:#1D1A22;stroke-width:3;stroke-linecap:round}
.pet4 .mo-shine{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;opacity:.75}
.pet4 .mo-bub{fill:#fff;stroke:#D5CCE0;stroke-width:2}
.pet4 .mo-qdot{fill:#3B2B36}
.pet4 .mo-star{fill:#FFD36B;stroke:#3B2B36;stroke-width:2.6;stroke-linejoin:round}
.pet4 .mo-flame{fill:#FF7A3D}
.pet4 .mo-flame2{fill:#FFD36B}
.pet4 .mo-note{fill:#6E5BD6}
.pet4 .mo-noteln{fill:none;stroke:#6E5BD6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pet4 .mo-nose{fill:#E96C8A}
.pet4 .mo-knose{fill:#3A3040}
.pet4 .mo-beak{fill:#FFA53A}
.pet4 .mo-billln{fill:none;stroke:#E07F1A;stroke-width:1.8;stroke-linecap:round}
/* markings and parts */
.pet4 .mo-stem{fill:none;stroke:var(--d);stroke-width:5;stroke-linecap:round}
.pet4 .mo-mark{fill:none;stroke:var(--d);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.pet4 .mo-stripe{fill:none;stroke:var(--d);stroke-width:5;stroke-linecap:round}
.pet4 .mo-tail1{fill:none;stroke:var(--d);stroke-width:15;stroke-linecap:round}
.pet4 .mo-tail2{fill:none;stroke:var(--b);stroke-width:9.5;stroke-linecap:round}
.pet4 .mo-skirt{fill:var(--b);stroke:var(--d);stroke-width:2.2;stroke-opacity:.6}
.pet4 .mo-wing{fill:var(--d)}
.pet4 .mo-wingw{fill:#fff;opacity:.85;stroke:#BFDDF2;stroke-width:2}
.pet4 .mo-belly{fill:none;stroke:var(--d);stroke-width:2.4;stroke-linecap:round;opacity:.5}
.pet4 .mo-feath{fill:none;stroke:var(--d);stroke-width:2.6;stroke-linecap:round}
.pet4 .mo-tent{fill:none;stroke:var(--d);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.pet4 .mo-tentw{fill:none;stroke:var(--d);stroke-width:5;stroke-linecap:round}
.pet4 .mo-ant{fill:none;stroke:var(--c);stroke-width:3.4;stroke-linecap:round}
.pet4 .mo-antl{fill:none;stroke:var(--c2);stroke-width:4;stroke-linecap:round}
.pet4 .mo-hornln{fill:none;stroke:#E0A82E;stroke-width:2;stroke-linecap:round}
.pet4 .mo-spine{fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;opacity:.9}
.pet4 .mo-pot{fill:#D9744A}
.pet4 .mo-stemg{fill:none;stroke:#4E9A32;stroke-width:4;stroke-linecap:round}
.pet4 .mo-stemb{fill:none;stroke:var(--c3);stroke-width:4;stroke-linecap:round}
.pet4 .mo-wh{fill:#5A5470}
.pet4 .mo-tuft{fill:none;stroke:var(--d);stroke-width:4;stroke-linecap:round}
.pet4 .mo-shellln{fill:none;stroke:var(--c2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.pet4 .mo-cleft{fill:none;stroke:var(--d);stroke-width:2.6;stroke-linecap:round;opacity:.7}
.pet4 .mo-red{fill:#FF5B5B}
.pet4 .mo-redf{fill:#FF4F7B}
.pet4 .mo-gold{fill:#FFC94A}
.pet4 .mo-green{fill:#5EDC9A}
.pet4 .mo-orange{fill:#FFA53A}
.pet4 .mo-leaf{fill:#6CC46F}
.pet4 .mo-leafln{fill:none;stroke:#3F9A47;stroke-width:1.8;stroke-linecap:round}
/* held items */
.pet4 .mo-bamboo{fill:#7CCB6A;stroke:#4E9A40;stroke-width:2}
.pet4 .mo-bamln{fill:none;stroke:#4E9A40;stroke-width:2}
.pet4 .mo-pencil{fill:#FFC94A;stroke:#C98F1A;stroke-width:1.6}
.pet4 .mo-tip{fill:#F3D9B1;stroke:#C98F1A;stroke-width:1.6;stroke-linejoin:round}
.pet4 .mo-eraser{fill:#FF8FA9}
.pet4 .mo-book{fill:#5B8BD9;stroke:#3E66AE;stroke-width:2}
.pet4 .mo-bookln{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.85}
.pet4 .mo-seed{fill:#5A4E5E}
.pet4 .mo-seedln{fill:none;stroke:#EDE4D3;stroke-width:1.8;stroke-linecap:round}
.pet4 .o35{opacity:.35}
.pet4 .mo-q{fill:none;stroke:#3B2B36;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.pet4.pet-goma .mo-shades{stroke:#fff;stroke-width:1.6}
/* soft pets: no hard sticker shadow (each draws a soft floor shadow, .mo-shadow) */
.mascot.pet4,.sh-prev .mascot.pet4,.pl-done-mascot .mascot.pet4{filter:none}

/* ---------- coins in the nav ---------- */
.nav-coins{display:inline-flex;align-items:center;gap:5px;border:2px solid var(--ink);border-radius:999px;background:var(--b1-tint);color:var(--ink);padding:4px 10px 4px 6px;font:inherit;font-weight:800;font-size:.88rem;transition:transform .4s var(--spring)}
.nav-coins .ic{width:1.3em;height:1.3em}
.nav-coins:active{transform:scale(.92)}
/* the coin chip makes the phone nav one item longer: tighten it so nothing is cut at the edge */
@media (max-width:480px){
  .nav-coins{padding:3px 7px 3px 4px;font-size:.8rem;gap:3px}
  .nav{gap:6px;padding-left:10px}
  .nav-right{gap:5px}
  .nav-right .icon-btn{width:36px;height:36px}
}
@media (max-width:380px){ .nav .logo-mark{display:none} }

/* ---------- colour themes (skins): html[data-skin], light + dark ---------- */
html[data-skin="ocean"]{--paper:#EEF7FB;--paper-2:#D6EAF2;--a2:#4DB6AC;--a2-tint:#D7F0EE;--b1:#4FC3F7;--b1-tint:#D9F1FC;--b2:#80DEEA;--b2-tint:#DCF5F8;--tomato:#42A5F5;--lilac:#9FA8DA;--sky:#26C6DA;--sky-tint:#D4F2F6}
html[data-skin="matcha"]{--paper:#F4F6EA;--paper-2:#E3E9CF;--a2:#66BB6A;--a2-tint:#DCEFDD;--b1:#D4E157;--b1-tint:#F2F6CC;--b2:#E6A57E;--b2-tint:#F6E3D6;--tomato:#8BC34A;--lilac:#C5A880;--sky:#9CCC65;--sky-tint:#E5F2D6}
html[data-skin="sunset"]{--paper:#FFF1EA;--paper-2:#FFDCCB;--a2:#F48FB1;--a2-tint:#FCE0EA;--b1:#FFB74D;--b1-tint:#FFEBCD;--b2:#F06292;--b2-tint:#FBD9E5;--tomato:#FF7043;--lilac:#CE93D8;--sky:#FF8A65;--sky-tint:#FFE3D9}
html[data-skin="candy"]{--paper:#FFF5FA;--paper-2:#FCE3EF;--a2:#69F0AE;--a2-tint:#DDFCEC;--b1:#FFD180;--b1-tint:#FFF1DA;--b2:#FF8DB8;--b2-tint:#FFE1EC;--tomato:#FF80AB;--lilac:#B388FF;--sky:#84FFFF;--sky-tint:#E0FFFF}
html[data-skin="mono"]{--paper:#F5F5F5;--paper-2:#E5E5EA;--a2:#D1D1D6;--a2-tint:#EFEFF4;--b1:#E5E5EA;--b1-tint:#F2F2F7;--b2:#C7C7CC;--b2-tint:#EDEDF2;--tomato:#FF5B37;--lilac:#C7C7CC;--sky:#D1D1D6;--sky-tint:#F2F2F7}
@media (prefers-color-scheme: dark){
  html[data-skin="ocean"]:not([data-theme="light"]){--paper:#0E1820;--paper-2:#15232D;--card:#1A2A35;--a2-tint:#12302D;--b1-tint:#10293A;--b2-tint:#123236;--sky-tint:#0F2C33}
  html[data-skin="matcha"]:not([data-theme="light"]){--paper:#121610;--paper-2:#1B2117;--card:#20271C;--a2-tint:#1E3320;--b1-tint:#2E3315;--b2-tint:#3A2A20;--sky-tint:#24311B}
  html[data-skin="sunset"]:not([data-theme="light"]){--paper:#1A1214;--paper-2:#251A1D;--card:#2A1E22;--a2-tint:#3A2028;--b1-tint:#3A2A14;--b2-tint:#3A1C26;--sky-tint:#3A2219}
  html[data-skin="candy"]:not([data-theme="light"]){--paper:#1A1420;--paper-2:#241C2B;--card:#2A2131;--a2-tint:#163326;--b1-tint:#382B16;--b2-tint:#3A1C2A;--sky-tint:#163338}
  html[data-skin="mono"]:not([data-theme="light"]){--paper:#111111;--paper-2:#1C1C1E;--card:#232325;--a2-tint:#2C2C2E;--b1-tint:#2C2C2E;--b2-tint:#2C2C2E;--sky-tint:#2C2C2E}
}
html[data-skin="ocean"][data-theme="dark"]{--paper:#0E1820;--paper-2:#15232D;--card:#1A2A35;--a2-tint:#12302D;--b1-tint:#10293A;--b2-tint:#123236;--sky-tint:#0F2C33}
html[data-skin="matcha"][data-theme="dark"]{--paper:#121610;--paper-2:#1B2117;--card:#20271C;--a2-tint:#1E3320;--b1-tint:#2E3315;--b2-tint:#3A2A20;--sky-tint:#24311B}
html[data-skin="sunset"][data-theme="dark"]{--paper:#1A1214;--paper-2:#251A1D;--card:#2A1E22;--a2-tint:#3A2028;--b1-tint:#3A2A14;--b2-tint:#3A1C26;--sky-tint:#3A2219}
html[data-skin="candy"][data-theme="dark"]{--paper:#1A1420;--paper-2:#241C2B;--card:#2A2131;--a2-tint:#163326;--b1-tint:#382B16;--b2-tint:#3A1C2A;--sky-tint:#163338}
html[data-skin="mono"][data-theme="dark"]{--paper:#111111;--paper-2:#1C1C1E;--card:#232325;--a2-tint:#2C2C2E;--b1-tint:#2C2C2E;--b2-tint:#2C2C2E;--sky-tint:#2C2C2E}
/* Midnight neon is always dark, whatever the light/dark switch says */
html[data-skin="midnight"]{--paper:#0B0A12;--paper-2:#14121F;--card:#1A1828;--ink:#F4F0FF;--ink-soft:#CFC8E8;--muted:#9A92B8;--shadow:#00E5FF;--dot:rgba(0,229,255,.10);
  --a2:#B9FF3B;--a2-tint:#1D2A10;--b1:#00E5FF;--b1-tint:#0B2630;--b2:#FF2E97;--b2-tint:#33102A;--tomato:#FF2E97;--lilac:#B388FF;--sky:#00E5FF;--sky-tint:#0B2630;
  --stage:#05040A;--stage-text:#F4F0FF;color-scheme:dark}

/* ---------- bar styles: html[data-bar] restyles the phone tab bar and the top nav ---------- */
html[data-bar="glass"] .tabbar,html[data-bar="glass"] .nav{background:color-mix(in srgb,var(--card) 52%,transparent);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.16)}
html[data-bar="glass"] .tabbar a.active{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
html[data-bar="neon"] .tabbar,html[data-bar="neon"] .nav{background:#0B0A12;border:2px solid #00E5FF;box-shadow:0 0 0 2px rgba(0,229,255,.22),0 0 22px rgba(0,229,255,.45)}
html[data-bar="neon"] .tabbar a,html[data-bar="neon"] .nav .logo,html[data-bar="neon"] .nav-links a{color:#9EEBFF}
html[data-bar="neon"] .tabbar a.active{background:#00E5FF;color:#0B0A12;box-shadow:0 0 16px #00E5FF}
html[data-bar="retro"] .tabbar,html[data-bar="retro"] .nav{background:var(--b1);border:4px solid var(--ink);border-radius:8px;box-shadow:6px 6px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-bar="retro"] .tabbar a{border-radius:3px;font-family:"Courier New",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.02em;color:#1D1A22}
html[data-bar="retro"] .tabbar a.active{background:#1D1A22;color:var(--b1)}
html[data-bar="retro"] .nav .logo,html[data-bar="retro"] .nav-links a{color:#1D1A22}
html[data-bar="bubble"] .tabbar{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:6px;padding:4px}
html[data-bar="bubble"] .tabbar a{min-width:0;background:var(--card);border:var(--bw) solid var(--ink);border-radius:20px;box-shadow:3px 3px 0 var(--shadow)}
@media (max-width:680px){ html[data-bar="bubble"] .tabbar{gap:4px;padding:2px} html[data-bar="bubble"] .tabbar a{border-width:2px;border-radius:16px;font-size:.62rem;box-shadow:2px 2px 0 var(--shadow)} }
html[data-bar="bubble"] .tabbar a:nth-child(4n+1){background:var(--a2-tint)}
html[data-bar="bubble"] .tabbar a:nth-child(4n+2){background:var(--b1-tint)}
html[data-bar="bubble"] .tabbar a:nth-child(4n+3){background:var(--b2-tint)}
html[data-bar="bubble"] .tabbar a:nth-child(4n+4){background:var(--sky-tint)}
html[data-bar="bubble"] .tabbar a.active{background:var(--tomato);color:var(--on-color);transform:translateY(-5px)}
html[data-bar="bubble"] .nav{background:var(--b2-tint)}

/* ---------- the shop (shop.js) ---------- */
.shop{position:fixed;inset:0;z-index:145;display:flex;flex-direction:column;background:var(--paper);transform:translateY(102%);visibility:hidden;transition:transform .5s var(--out),visibility 0s .5s}
.shop.open{transform:none;visibility:visible;transition:transform .5s var(--out)}
.shop-top{display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 16px 12px;border-bottom:var(--bw) solid var(--ink);background:var(--card)}
.shop-top h2{flex:1;margin:0;font-size:1.35rem;letter-spacing:-.02em}
.shop-bal{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:1.1rem;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--b1-tint)}
.shop-bal .ic{width:1.4em;height:1.4em}
.shop-tabs{display:flex;gap:8px;padding:12px 16px 2px;overflow-x:auto}
.shop-tabs button{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font:inherit;font-weight:800;color:var(--ink)}
.shop-tabs button.on{background:var(--ink);color:var(--paper)}
.shop-body{flex:1;overflow-y:auto;padding:14px 16px calc(28px + env(safe-area-inset-bottom))}
.shop-note{margin:0 0 14px;color:var(--ink-soft);font-weight:600;font-size:.95rem;line-height:1.45}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.sh-item{display:flex;flex-direction:column;gap:8px;padding:12px;border:var(--bw) solid var(--ink);border-radius:22px;background:var(--card);box-shadow:4px 4px 0 var(--shadow)}
.sh-item.on{outline:4px solid var(--a2);outline-offset:2px}
.shop-grid.faces{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.shop-grid.faces .sh-item{padding:8px;gap:6px}
.shop-grid.faces .sh-prev{height:88px}
.shop-grid.faces .sh-prev .mascot{width:80px}
.shop-grid.faces h4{font-size:.9rem}
.shop-grid.faces .btn{white-space:nowrap;padding:8px 6px;font-size:.84rem}
/* pet names (bag: rename in place; home: a name tag under the hero pet) */
.pet-name{display:flex;align-items:center;gap:6px;min-width:0}
.pet-name h4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pet-ren{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;border:2px solid var(--ink);background:var(--paper-2);color:var(--ink);cursor:pointer;padding:0}
.pet-ren .ic{width:15px;height:15px}
.pet-kind{margin-top:-6px;font-size:.76rem;font-weight:700;color:var(--ink-soft)}
.pet-ren-form{display:flex;flex-direction:column;gap:6px}
.pet-ren-form input{width:100%;min-width:0;padding:8px 10px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;font-weight:700}
.pet-ren-form .btn{padding:7px 10px;font-size:.84rem;justify-content:center}
.pet-tag{position:absolute;bottom:-8px;left:50%;padding:2px 16px;border:2px solid var(--ink);border-radius:99px;background:var(--card);color:var(--ink);font-size:1.35rem;white-space:nowrap;box-shadow:3px 3px 0 var(--shadow);transform:translateX(-50%) rotate(-3deg)}
.hero-mascot:has(.pet-tag) .hero-note{display:none}     /* the name tag takes the place of the note about Schwa */
.sh-prev{display:grid;place-items:center;height:120px;border-radius:16px;background:var(--paper-2);overflow:hidden}
.sh-prev .mascot{width:100px;filter:drop-shadow(4px 5px 0 var(--shadow))}
.sh-item h4{margin:0;font-size:1rem}
.sh-item p{margin:0;font-size:.84rem;color:var(--ink-soft);font-weight:600;line-height:1.35;flex:1}
.sh-item .btn{justify-content:center;padding:11px 14px;font-size:.92rem}
.sh-item .btn[disabled]{opacity:.55;box-shadow:none}
.sh-price{display:inline-flex;align-items:center;gap:4px}
.sh-need{margin-top:-2px;text-align:center;font-size:.76rem;font-weight:700;color:var(--muted)}
.sh-price .ic{width:1.2em;height:1.2em}
.sh-skin{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:72%}
.sh-skin i{height:30px;border-radius:10px;border:2px solid #1D1A22}
.sh-bar{width:86%;height:42px;border-radius:16px;display:flex;align-items:center;justify-content:space-around;padding:0 6px}
.sh-bar span{width:18px;height:18px;border-radius:6px;background:currentColor;opacity:.7}
.sh-bar span:first-child{opacity:1}
.sh-bar.bar-classic{background:var(--card);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);color:var(--ink)}
.sh-bar.bar-glass{background:color-mix(in srgb,var(--card) 50%,transparent);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);box-shadow:0 6px 18px rgba(0,0,0,.18);color:var(--ink)}
.sh-bar.bar-neon{background:#0B0A12;border:2px solid #00E5FF;box-shadow:0 0 14px rgba(0,229,255,.55);color:#00E5FF}
.sh-bar.bar-retro{background:var(--b1);border:3px solid var(--ink);border-radius:5px;box-shadow:4px 4px 0 var(--ink);color:#1D1A22}
.sh-bar.bar-bubble{color:#1D1A22;justify-content:center;gap:5px}
.sh-bar.bar-bubble span{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);opacity:1;background:var(--a2-tint)}
.sh-bar.bar-bubble span:nth-child(2){background:var(--b1-tint)}
.sh-bar.bar-bubble span:nth-child(3){background:var(--tomato)}
.sh-bar.bar-bubble span:nth-child(4){background:var(--sky-tint)}
.sh-modes{display:grid;gap:10px;margin-bottom:6px}
.sh-mode{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:12px 14px;border:var(--bw) solid var(--ink);border-radius:20px;background:var(--card);color:var(--ink);font:inherit;box-shadow:3px 3px 0 var(--shadow)}
.sh-mode .ic{width:1.8em;height:1.8em;flex:none}
.sh-mode b{display:block;font-size:1.05rem}
.sh-mode small{display:block;font-weight:600;color:var(--ink-soft);line-height:1.35;margin-top:2px}
.sh-mode.on{background:var(--a2-tint);outline:3px solid var(--a2);outline-offset:1px}
.sh-mode.hell.on{background:#3A0F12;color:#FFE6E0;outline-color:#FF3B30}
.sh-mode.hell.on small{color:#FFC9BF}
.sh-mode.peace.on{background:#E3F4EA;color:#1D1A22;outline-color:#5EDC9A}
.sh-mode.peace.on small{color:#3B4A40}

/* ---------- lesson modes in the player (player.js) ---------- */
.pl-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 16px}
.pl-mode{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border:2px solid var(--ink);border-radius:18px;background:var(--card);color:var(--ink);font:inherit;text-align:center;transition:transform .3s var(--spring),background-color .25s}
.pl-mode .ic{width:1.7em;height:1.7em}
.pl-mode b{font-size:.98rem}
.pl-mode small{font-size:.72rem;font-weight:600;line-height:1.25;color:var(--ink-soft)}
.pl-mode:active{transform:scale(.95)}
.pl-mode.on{box-shadow:3px 3px 0 var(--shadow);transform:translateY(-2px)}
.pl-mode.peace.on{background:#DDF7E8;color:#1D1A22}
.pl-mode.peace.on small{color:#3B4A40}
.pl-mode.normal.on{background:var(--b1);color:#1D1A22}
.pl-mode.normal.on small{color:#3B3420}
.pl-mode.hell.on{background:#3A0F12;color:#FFE6E0;border-color:#FF3B30}
.pl-mode.hell.on small{color:#FFC9BF}
.pl-hearts{display:inline-flex;gap:1px}
.pl-hearts[hidden]{display:none}
.pl-hearts .ic{width:1.45em;height:1.45em}
.pl-hearts.shake{animation:shake .45s}
.pl-clock{position:relative;width:100%;max-width:760px;height:7px;margin:0 auto;padding:0 16px}
.pl-clock[hidden]{display:none}
.pl-clock i{display:block;height:100%;width:100%;border-radius:999px;background:var(--a2);border:2px solid var(--ink);transition:width .2s linear,background-color .3s}
.pl-clock.low i{background:#FF3B30}
.player.mode-hell .pl-top{background:linear-gradient(180deg,rgba(255,59,48,.16),transparent)}
.player.mode-hell .pl-bar i{background:#FF3B30}
.player.mode-hell [data-rate]{display:none}
.player.mode-peace .pl-bar i{background:#5EDC9A}
.pl-stats:has(.pl-coins){grid-template-columns:repeat(4,1fr);max-width:520px}
.pl-coins{background:var(--b1-tint)!important}
.pl-coins span{display:inline-flex;align-items:center;gap:3px}
.pl-coins .ic{width:1.2em;height:1.2em}
.pl-hellwin{color:#C62828}
.pl-shopbtn{margin-top:10px}
.pl-fail h2{color:#C62828}
.pl-again{display:grid;gap:10px;max-width:360px;margin:18px auto 0}
.pl-again .btn{justify-content:center}
@media (max-width:420px){ .pl-stats:has(.pl-coins){grid-template-columns:repeat(2,1fr)} .pl-mode small{font-size:.68rem} }

/* ---------- tiers (pets.js): A1 plain … C2 a neon-gold frame that runs around the card ---------- */
@property --tier-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.sh-prev{position:relative}
.tier-tag{position:absolute;top:7px;left:7px;padding:2px 8px;border-radius:999px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-weight:900;font-size:.72rem;letter-spacing:.02em;line-height:1.4}
.tier-tag.t-A2{background:#E5E5EA;color:#1D1A22}
.tier-tag.t-B1{background:#5EDC9A;color:#1D1A22}
.tier-tag.t-B2{background:#4FA8FF;color:#fff}
.tier-tag.t-C1{background:#A35BFF;color:#fff}
.tier-tag.t-C2{background:linear-gradient(135deg,#FFE259,#FFA751);color:#1D1A22;border-color:#1D1A22;box-shadow:0 0 10px #FFD23F}
.sh-item.tier-A2{border-color:#9A9AA2}
.sh-item.tier-B1{border-color:#2FB874;box-shadow:4px 4px 0 #2FB874}
.sh-item.tier-B2{border-color:#2F8BFF;box-shadow:4px 4px 0 #2F8BFF,0 0 14px rgba(47,139,255,.45)}
.sh-item.tier-C1{border-color:#9B4DFF;box-shadow:4px 4px 0 #9B4DFF,0 0 18px rgba(155,77,255,.55);background:linear-gradient(160deg,color-mix(in srgb,#9B4DFF 10%,var(--card)),var(--card) 55%)}
/* C2: a big conic square spins behind the card (transform only: the compositor does it, nothing is repainted) and the card face covers all but a
   frame of var(--bw) */
.sh-item.tier-C2{position:relative;isolation:isolate;overflow:hidden;border:0;padding:calc(12px + var(--bw));background:#FFD23F;box-shadow:0 0 22px rgba(255,210,63,.65)}
.sh-item.tier-C2::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:260%;aspect-ratio:1;
  background:conic-gradient(#FFF6B0,#FFD23F,#FF9F1C,#FFE259,#FFFFFF,#FFD23F,#FF9F1C,#FFF6B0);transform:translate(-50%,-50%);animation:tierSpin 3s linear infinite;will-change:transform}
.sh-item.tier-C2::after{content:"";position:absolute;z-index:-1;inset:var(--bw);border-radius:calc(22px - var(--bw));background:var(--card)}
@keyframes tierSpin{to{transform:translate(-50%,-50%) rotate(1turn)}}
.sh-item.tier-C2 .sh-prev{background:radial-gradient(circle at 50% 40%,color-mix(in srgb,#FFD23F 26%,var(--paper-2)),var(--paper-2) 70%)}
html.calm .sh-item.tier-C2::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .sh-item.tier-C2::before{animation:none} }
.sh-item.mystery .sh-prev{background:repeating-linear-gradient(45deg,var(--paper-2) 0 10px,color-mix(in srgb,var(--ink) 6%,var(--paper-2)) 10px 20px)}
.chest-q{font-size:3rem;font-weight:900;color:var(--muted)}
.shop-grid.mini{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.shop-grid.mini .sh-prev{height:96px}
.shop-grid.mini .sh-prev .mascot{width:80px}
.shop-grid.mini .sh-item p{display:none}

/* ---------- hats and accessories (chests): drawn on the pet by core.js hatSVG ---------- */
.m-hat *{stroke:#1D1A22;stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.h-stem{fill:none}.h-leaf{fill:#5EDC9A}
.h-party{fill:#FF7FAE}.m-hat .h-stripe{fill:none;stroke:#FFE259;stroke-width:6}.h-pom{fill:#FFE259}
.h-bow{fill:#FF4F7B}.h-bowk{fill:#FF8FA9}
.h-pencil{fill:#FFC738}.h-tip{fill:#F3D9B1}.h-eraser{fill:#FF8FA9}
.h-beanie{fill:#4FA8FF}.h-band{fill:#2F6FD6}
.m-hat .h-vine{fill:none;stroke:#3FA46A}.m-hat .h-flower{stroke-width:3}.m-hat .h-dot{fill:#FFE259;stroke-width:2}.m-hat .h-dot.w{fill:#fff}
.h-glass{fill:rgba(255,255,255,.18)}.h-line{fill:none}
.m-hat .h-band2{fill:none;stroke-width:9}.h-cup{fill:#FF5B37}
.h-chef{fill:#fff}.h-chefband{fill:#F1EDE6}
.h-bandana{fill:#E63946}
.h-star{fill:#FFD23F}.m-hat .h-star.sm{stroke-width:3}
.h-scarf{fill:#FF7043}
.h-wiz{fill:#5B3FD6}.h-brim{fill:#4A2FB8}
.h-cow{fill:#A0683A}.h-cowbrim{fill:#8A5A3B}
.m-hat .h-laurel{fill:#5EBD5A;stroke-width:3}
.h-crown{fill:#FFD23F}.m-hat .h-gem{fill:#FF4F7B;stroke-width:3}.m-hat .h-gem.b{fill:#4FC3F7}
.m-hat .h-halo{fill:none;stroke:#FFD23F;stroke-width:9}
.h-horn{fill:#F3E7C9}.h-helm{fill:#9AA4B2}
.m-hat .h-rainbow{fill:none;stroke:#FF5B9E;stroke-width:8}.m-hat .h-rainbow2{fill:none;stroke:#4FC3F7;stroke-width:6}
.h-gcrown{fill:#2A1A66}.m-hat .h-spark{fill:#FFF6B0;stroke-width:2}

/* ---------- chests (shop.js) ---------- */
.chest-hero{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;padding:16px;border:var(--bw) solid var(--ink);border-radius:24px;background:var(--b1-tint);box-shadow:4px 4px 0 var(--shadow);margin-bottom:16px}
.chest-hero h3{margin:0 0 6px;font-size:1.3rem}
.chest-hero p{margin:0 0 12px;font-weight:600;color:var(--ink-soft);line-height:1.4}
.chest-art{width:150px;overflow:visible;filter:drop-shadow(5px 6px 0 var(--shadow));animation:chestBob 2.4s ease-in-out infinite;will-change:transform}
html.calm .chest-art{animation-play-state:paused}
@keyframes chestBob{50%{transform:translateY(-5px) rotate(-2deg)}}
.ch-lid{fill:#C9763A;stroke:#1D1A22;stroke-width:5;stroke-linejoin:round}.ch-box{fill:#A85E2C;stroke:#1D1A22;stroke-width:5}
.ch-band{stroke:#FFD23F;stroke-width:8}.ch-lock{fill:#FFD23F;stroke:#1D1A22;stroke-width:4}.ch-hole{fill:#1D1A22}
.ch-spark{fill:#FFE259;stroke:#1D1A22;stroke-width:2}
.chest-btns{display:flex;flex-wrap:wrap;gap:10px}
.chest-btns .btn{justify-content:center}
.chest-h{margin:18px 0 10px;font-size:1.05rem}
.chest-odds{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.chest-odds>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:30px 4px 8px;border:2px solid var(--ink);border-radius:14px;background:var(--card)}
.chest-odds .tier-tag{left:50%;transform:translateX(-50%)}
.chest-odds b{font-size:1.1rem}
.chest-odds small{display:inline-flex;align-items:center;gap:2px;font-size:.68rem;font-weight:700;color:var(--muted)}
.chest-odds small .ic{width:1.1em;height:1.1em}
@media (max-width:560px){ .chest-hero{grid-template-columns:1fr;justify-items:center;text-align:center} .chest-btns{justify-content:center} .chest-odds{grid-template-columns:repeat(3,1fr)} }
.chest-out{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb,#0B0A12 72%,transparent);opacity:0;transition:opacity .3s}
.chest-out[hidden]{display:none}
.chest-out.show{opacity:1}
.chest-res{width:min(760px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:18px;border:var(--bw) solid var(--ink);border-radius:26px;background:var(--paper);box-shadow:6px 6px 0 var(--shadow);text-align:center}
.chest-res h3{margin:0 0 14px;font-size:1.4rem}
.chest-got{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px;text-align:left}
.chest-res:not(.many) .chest-got{grid-template-columns:minmax(0,240px);justify-content:center}
.chest-got .sh-item{animation:chestPop .55s var(--out) both;animation-delay:var(--d)}
.chest-got .sh-item.tier-C2{animation:chestPop .55s var(--out) var(--d) both}
.chest-res .chest-btns{justify-content:center}
.new-tag{padding:1px 7px;border-radius:999px;background:var(--tomato);color:var(--on-color);font-size:.72rem}
@keyframes chestPop{from{opacity:0;transform:scale(.6) rotateY(90deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .chest-got .sh-item{animation:none} }

/* ---------- chest-only themes ---------- */
html[data-skin="sakura"]{--paper:#FFF4F8;--paper-2:#FFE1EC;--a2:#8FD9A8;--a2-tint:#E0F5E7;--b1:#FFC2D8;--b1-tint:#FFEAF2;--b2:#C9A7FF;--b2-tint:#EFE6FF;--tomato:#FF6FA3;--lilac:#C9A7FF;--sky:#FF9EC4;--sky-tint:#FFE6F0}
@media (prefers-color-scheme:dark){ html[data-skin="sakura"]:not([data-theme="light"]){--paper:#1C1218;--paper-2:#281A22;--card:#2E1F28;--a2-tint:#183024;--b1-tint:#3A1E2C;--b2-tint:#2C2140;--sky-tint:#3A1E2C} }
html[data-skin="sakura"][data-theme="dark"]{--paper:#1C1218;--paper-2:#281A22;--card:#2E1F28;--a2-tint:#183024;--b1-tint:#3A1E2C;--b2-tint:#2C2140;--sky-tint:#3A1E2C}
/* Lava and Galaxy are always dark, like Midnight neon */
html[data-skin="lava"]{--paper:#140B08;--paper-2:#1F120D;--card:#271712;--ink:#FFF1E6;--ink-soft:#F2CDB8;--muted:#B88E7A;--shadow:#FF5A1F;--dot:rgba(255,90,31,.10);
  --a2:#FFD740;--a2-tint:#33270C;--b1:#FF9100;--b1-tint:#3A2108;--b2:#FF3D00;--b2-tint:#3A1206;--tomato:#FF3D00;--lilac:#FF8A65;--sky:#FFAB40;--sky-tint:#3A240C;
  --stage:#0A0504;--stage-text:#FFF1E6;color-scheme:dark}
html[data-skin="galaxy"]{--paper:#0D0820;--paper-2:#160F30;--card:#1D1540;--ink:#F2EEFF;--ink-soft:#CFC6F5;--muted:#9C90D0;--shadow:#7C4DFF;--dot:rgba(0,229,255,.12);
  --a2:#00E5FF;--a2-tint:#0C2340;--b1:#FF4081;--b1-tint:#3A1236;--b2:#B388FF;--b2-tint:#2A1A55;--tomato:#FF4081;--lilac:#B388FF;--sky:#00E5FF;--sky-tint:#0C2340;
  --stage:#070414;--stage-text:#F2EEFF;color-scheme:dark}
html[data-skin="galaxy"] body{background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 70% 60%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 40% 80%,#00E5FF88 50%,transparent 51%),radial-gradient(1px 1px at 85% 15%,#FF408188 50%,transparent 51%);background-size:220px 220px,170px 170px,260px 260px,300px 300px}

/* ---------- chest-only bars ---------- */
html[data-bar="rainbow"] .tabbar,html[data-bar="rainbow"] .nav{border:3px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(90deg,#FF5B5B,#FFB03B,#FFE259,#5EDC9A,#4FC3F7,#A35BFF) border-box}
html[data-bar="rainbow"] .tabbar a.active{background:linear-gradient(135deg,#FF5B9E,#FFB03B);color:#1D1A22}
html[data-bar="goldneon"] .tabbar,html[data-bar="goldneon"] .nav{border:2.5px solid transparent;background:linear-gradient(#120E05,#120E05) padding-box,conic-gradient(from var(--tier-a),#FFF6B0,#FFD23F,#FF9F1C,#FFE259,#fff,#FFD23F,#FF9F1C,#FFF6B0) border-box;box-shadow:0 0 18px rgba(255,210,63,.55)}
html[data-bar="goldneon"] .tabbar a,html[data-bar="goldneon"] .nav .logo,html[data-bar="goldneon"] .nav-links a{color:#FFE7A0}
html[data-bar="goldneon"] .tabbar a.active{background:linear-gradient(135deg,#FFE259,#FFA751);color:#1D1A22;box-shadow:0 0 14px #FFD23F}
.sh-bar.bar-rainbow{border:3px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(90deg,#FF5B5B,#FFB03B,#FFE259,#5EDC9A,#4FC3F7,#A35BFF) border-box;color:var(--ink)}
.sh-bar.bar-goldneon{border:2.5px solid #FFD23F;background:#120E05;box-shadow:0 0 14px rgba(255,210,63,.6);color:#FFD23F}
.chest-got p .ic{width:1.1em;height:1.1em;vertical-align:-.22em}
.chest-got p{white-space:nowrap}

/* smooth shop: previews stand still (21 blinking, squishing pets with shadows made every scroll frame repaint), cards off screen skip rendering,
   and the page under a full-screen overlay (shop, lesson) rests */
.shop .mascot,.shop .mascot *{animation:none!important}
.shop-body .sh-item{content-visibility:auto;contain-intrinsic-size:auto 250px}
html.pl-lock body>:not([role=dialog]):not(#toast) *{animation-play-state:paused!important}   /* every overlay (lesson, shop, fun mode, mock test, HSK list, writing pad…) is a dialog */

/* ---------- gradient themes (chest only): the page sits on a still gradient layer (fixed, painted once, so scrolling stays cheap); primary
   buttons and the active tab wear --btn-grad. Peach, Mint, Holo and Prism follow the light/dark switch; Aurora and Royal gold are always dark. ---------- */
html[data-skin="peach"]{--paper:#FFEDE3;--paper-2:#FFDCD3;--card:#FFFFFF;--a2:#7EDDB0;--a2-tint:#E2F7EE;--b1:#FFC48A;--b1-tint:#FFEBD9;--b2:#FF8FA3;--b2-tint:#FFE3E8;--tomato:#FF6A88;--lilac:#C9A7FF;--sky:#FFB38A;--sky-tint:#FFE9DD;
  --page-grad:linear-gradient(160deg,#FFE1C6 0%,#FFD0D7 48%,#E9D5FF 100%);--btn-grad:linear-gradient(135deg,#FF9A8B,#FF6A88 55%,#FF99AC)}
html[data-skin="mint"]{--paper:#EAFBF1;--paper-2:#D3F3E6;--card:#FFFFFF;--a2:#43E97B;--a2-tint:#DDF9E6;--b1:#C6F68D;--b1-tint:#F0FCDD;--b2:#5ED6C9;--b2-tint:#DCF6F3;--tomato:#22C38E;--lilac:#7CC8FF;--sky:#38F9D7;--sky-tint:#D8FBF3;
  --page-grad:linear-gradient(160deg,#E6FFD9 0%,#C9F7E8 48%,#CDEBFF 100%);--btn-grad:linear-gradient(135deg,#43E97B,#38F9D7)}
html[data-skin="holo"]{--paper:#F7F1FF;--paper-2:#EAE4FB;--card:#FFFFFF;--a2:#8CF5D2;--a2-tint:#E2FBF3;--b1:#FFE38A;--b1-tint:#FFF6D8;--b2:#FF9EE6;--b2-tint:#FFE6F8;--tomato:#B57BFF;--lilac:#9EC5FF;--sky:#9EC5FF;--sky-tint:#E6F0FF;
  --page-grad:linear-gradient(135deg,#FFE3F6 0%,#E3EEFF 30%,#DFFFF4 55%,#FFF7D6 80%,#F3E3FF 100%);--btn-grad:linear-gradient(135deg,#FF9EE6,#9EC5FF 50%,#8CF5D2)}
html[data-skin="prism"]{--paper:#FFF7F2;--paper-2:#FCEBDF;--card:#FFFFFF;--a2:#6BFFB8;--a2-tint:#DEFCEC;--b1:#FFE66D;--b1-tint:#FFF8D2;--b2:#FF6B9E;--b2-tint:#FFE0EB;--tomato:#FF6B9E;--lilac:#B98BFF;--sky:#6BC8FF;--sky-tint:#DFF2FF;
  --page-grad:linear-gradient(120deg,#FFD6E0 0%,#FFE9C7 20%,#FFFBC7 38%,#D7FFD9 55%,#CCF2FF 72%,#E4D7FF 88%,#FFD6F3 100%);--btn-grad:linear-gradient(90deg,#FF6B9E,#FFB347,#FFE66D,#6BFFB8,#6BC8FF,#B98BFF)}
@media (prefers-color-scheme:dark){
  html[data-skin="peach"]:not([data-theme="light"]){--paper:#1E1418;--paper-2:#2A1C22;--card:#2E2027;--a2-tint:#17302A;--b1-tint:#3A2818;--b2-tint:#3C1C26;--sky-tint:#3A2218;--page-grad:linear-gradient(160deg,#2C1A1C 0%,#2A1630 60%,#1B1530 100%)}
  html[data-skin="mint"]:not([data-theme="light"]){--paper:#0F1A16;--paper-2:#16261F;--card:#1B2C25;--a2-tint:#14301F;--b1-tint:#26311A;--b2-tint:#123230;--sky-tint:#12302C;--page-grad:linear-gradient(160deg,#0F231C 0%,#0E2328 50%,#101A2E 100%)}
  html[data-skin="holo"]:not([data-theme="light"]){--paper:#17131F;--paper-2:#211B2D;--card:#272035;--a2-tint:#14302A;--b1-tint:#352E16;--b2-tint:#361C33;--sky-tint:#18243A;--page-grad:linear-gradient(135deg,#251A33 0%,#15243A 35%,#13302B 65%,#2D2516 100%)}
  html[data-skin="prism"]:not([data-theme="light"]){--paper:#17141C;--paper-2:#221D28;--card:#28222F;--a2-tint:#143024;--b1-tint:#353014;--b2-tint:#3A1C2A;--sky-tint:#16283A;--page-grad:linear-gradient(120deg,#33182A 0%,#33261A 22%,#2F2E16 40%,#162E1F 56%,#142838 72%,#221A3A 88%,#33182F 100%)}
}
html[data-skin="peach"][data-theme="dark"]{--paper:#1E1418;--paper-2:#2A1C22;--card:#2E2027;--a2-tint:#17302A;--b1-tint:#3A2818;--b2-tint:#3C1C26;--sky-tint:#3A2218;--page-grad:linear-gradient(160deg,#2C1A1C 0%,#2A1630 60%,#1B1530 100%)}
html[data-skin="mint"][data-theme="dark"]{--paper:#0F1A16;--paper-2:#16261F;--card:#1B2C25;--a2-tint:#14301F;--b1-tint:#26311A;--b2-tint:#123230;--sky-tint:#12302C;--page-grad:linear-gradient(160deg,#0F231C 0%,#0E2328 50%,#101A2E 100%)}
html[data-skin="holo"][data-theme="dark"]{--paper:#17131F;--paper-2:#211B2D;--card:#272035;--a2-tint:#14302A;--b1-tint:#352E16;--b2-tint:#361C33;--sky-tint:#18243A;--page-grad:linear-gradient(135deg,#251A33 0%,#15243A 35%,#13302B 65%,#2D2516 100%)}
html[data-skin="prism"][data-theme="dark"]{--paper:#17141C;--paper-2:#221D28;--card:#28222F;--a2-tint:#143024;--b1-tint:#353014;--b2-tint:#3A1C2A;--sky-tint:#16283A;--page-grad:linear-gradient(120deg,#33182A 0%,#33261A 22%,#2F2E16 40%,#162E1F 56%,#142838 72%,#221A3A 88%,#33182F 100%)}
html[data-skin="aurora"]{--paper:#07101F;--paper-2:#0E1A2E;--card:#122038;--ink:#EAFBFF;--ink-soft:#BFE3EE;--muted:#86A9B8;--shadow:#00F5A0;--dot:rgba(0,245,160,.10);
  --a2:#00F5A0;--a2-tint:#0B2A26;--b1:#00D9F5;--b1-tint:#0B2635;--b2:#FF5ACD;--b2-tint:#2E1230;--tomato:#00D9F5;--lilac:#8E54E9;--sky:#00D9F5;--sky-tint:#0B2635;
  --stage:#040A14;--stage-text:#EAFBFF;color-scheme:dark;
  --page-grad:radial-gradient(120% 70% at 10% 0%,rgba(0,245,160,.32),transparent 60%),radial-gradient(100% 60% at 95% 35%,rgba(142,84,233,.42),transparent 62%),radial-gradient(90% 55% at 40% 100%,rgba(0,217,245,.28),transparent 62%),#07101F;
  --btn-grad:linear-gradient(135deg,#00F5A0,#00D9F5 50%,#8E54E9)}
html[data-skin="royal"]{--paper:#0B0F2E;--paper-2:#151A42;--card:#1A1F4D;--ink:#FFF6DE;--ink-soft:#F0DFB0;--muted:#B9A877;--shadow:#F2B53A;--dot:rgba(255,210,63,.10);
  --a2:#FFD23F;--a2-tint:#2E2A1A;--b1:#F2B53A;--b1-tint:#2E2618;--b2:#B38CFF;--b2-tint:#251A4A;--tomato:#F2B53A;--lilac:#B38CFF;--sky:#FFE58A;--sky-tint:#2A2A3A;
  --stage:#060820;--stage-text:#FFF6DE;color-scheme:dark;
  --page-grad:radial-gradient(80% 45% at 50% 0%,rgba(255,210,63,.22),transparent 70%),radial-gradient(70% 50% at 100% 100%,rgba(124,77,255,.25),transparent 70%),linear-gradient(170deg,#0B0F2E,#1B0F3B 60%,#120A24);
  --btn-grad:linear-gradient(135deg,#FFE58A,#F2B53A 55%,#D9952B)}
:is(html[data-skin="peach"],html[data-skin="mint"],html[data-skin="holo"],html[data-skin="prism"],html[data-skin="aurora"],html[data-skin="royal"]) body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page-grad)}
:is(html[data-skin="peach"],html[data-skin="mint"],html[data-skin="holo"],html[data-skin="prism"],html[data-skin="aurora"],html[data-skin="royal"]) :is(.shop,.player){background:var(--page-grad)}
:is(html[data-skin="peach"],html[data-skin="mint"],html[data-skin="holo"],html[data-skin="prism"],html[data-skin="aurora"],html[data-skin="royal"]) .btn-primary{background:var(--btn-grad);color:#1D1A22}
:is(html[data-skin="peach"],html[data-skin="mint"],html[data-skin="holo"],html[data-skin="prism"],html[data-skin="aurora"],html[data-skin="royal"]):not([data-bar="neon"]):not([data-bar="goldneon"]) .tabbar a.active{background:var(--btn-grad);color:#1D1A22}
html[data-skin="royal"] .btn-primary{box-shadow:4px 4px 0 #8A5A12}
/* the shop preview of a gradient theme */
.sh-skin.grad{padding:9px;border:2px solid #1D1A22;border-radius:16px}
.sh-skin.g-peach{background:linear-gradient(160deg,#FFE1C6,#FFD0D7 48%,#E9D5FF)}
.sh-skin.g-mint{background:linear-gradient(160deg,#E6FFD9,#C9F7E8 48%,#CDEBFF)}
.sh-skin.g-holo{background:linear-gradient(135deg,#FFE3F6,#E3EEFF 30%,#DFFFF4 55%,#FFF7D6 80%,#F3E3FF)}
.sh-skin.g-prism{background:linear-gradient(120deg,#FFD6E0,#FFE9C7 20%,#FFFBC7 38%,#D7FFD9 55%,#CCF2FF 72%,#E4D7FF 88%,#FFD6F3)}
.sh-skin.g-aurora{background:radial-gradient(120% 80% at 10% 0%,rgba(0,245,160,.6),transparent 60%),radial-gradient(100% 70% at 95% 40%,rgba(142,84,233,.7),transparent 62%),#07101F}
.sh-skin.g-royal{background:radial-gradient(80% 60% at 50% 0%,rgba(255,210,63,.45),transparent 70%),linear-gradient(170deg,#0B0F2E,#1B0F3B)}

/* ---------- more themes (2026-10-29): patterned and gradient pages, still pictures (no animation, so no battery cost) ----------
   Bubble tea, Strawberry milk, Cloud nine and Rainbow sherbet follow the light/dark switch; Starry night and Synthwave are always dark. */
html[data-skin="bubbletea"]{--paper:#F6EBDD;--paper-2:#EADBC6;--card:#FFFDF9;--a2:#9BC98A;--a2-tint:#E4F1DE;--b1:#E8B77A;--b1-tint:#F7E6CF;--b2:#C98B6B;--b2-tint:#F1DDD2;--tomato:#8B5A3C;--lilac:#B9A2D9;--sky:#C9A27E;--sky-tint:#F0E3D3;--on-color:#FFF8EE;
  --page-grad:radial-gradient(circle at 12px 12px,rgba(60,36,20,.16) 4px,transparent 4.6px) 0 0/46px 46px,radial-gradient(circle at 35px 33px,rgba(60,36,20,.10) 3px,transparent 3.6px) 0 0/46px 46px,linear-gradient(175deg,#F8EEE2,#EEDCC5);
  --btn-grad:linear-gradient(135deg,#B07A52,#8B5A3C)}
html[data-skin="strawberry"]{--paper:#FFF0F3;--paper-2:#FFDCE4;--card:#FFFFFF;--a2:#7FD3A0;--a2-tint:#E1F6EA;--b1:#FFD1DC;--b1-tint:#FFEDF1;--b2:#FF8FAB;--b2-tint:#FFE2EA;--tomato:#F0507A;--lilac:#D7A6FF;--sky:#FF9FB8;--sky-tint:#FFE8EE;
  --page-grad:radial-gradient(ellipse 2px 3px at 10px 10px,rgba(255,236,150,.9) 98%,transparent) 0 0/34px 34px,radial-gradient(ellipse 2px 3px at 27px 25px,rgba(255,236,150,.8) 98%,transparent) 0 0/34px 34px,linear-gradient(180deg,#FFE9EF,#FFD3DF);
  --btn-grad:linear-gradient(135deg,#FF7EA0,#F0507A)}
html[data-skin="cloud"]{--paper:#EEF6FF;--paper-2:#DCEBFC;--card:#FFFFFF;--a2:#8FE3C5;--a2-tint:#E1F8F0;--b1:#FFE59A;--b1-tint:#FFF6D6;--b2:#B7C8FF;--b2-tint:#E7EDFF;--tomato:#5B8DEF;--lilac:#B7A6FF;--sky:#7FB8FF;--sky-tint:#E1EEFF;
  --page-grad:radial-gradient(60px 26px at 14% 18%,#fff 98%,transparent),radial-gradient(44px 22px at 20% 15%,#fff 98%,transparent),radial-gradient(70px 30px at 82% 34%,#fff 98%,transparent),radial-gradient(48px 24px at 76% 30%,#fff 98%,transparent),radial-gradient(64px 26px at 40% 78%,rgba(255,255,255,.85) 98%,transparent),linear-gradient(180deg,#CFE6FF,#EEF6FF 60%);
  --btn-grad:linear-gradient(135deg,#7FB8FF,#5B8DEF)}
html[data-skin="sherbet"]{--paper:#FFF8F0;--paper-2:#FFEBDD;--card:#FFFFFF;--a2:#7FE0B0;--a2-tint:#E0F8EC;--b1:#FFE37A;--b1-tint:#FFF6CF;--b2:#FF9EC7;--b2-tint:#FFE4F0;--tomato:#FF7A59;--lilac:#B79CFF;--sky:#7CCBFF;--sky-tint:#E0F2FF;
  --page-grad:linear-gradient(28deg,transparent 47.5%,rgba(255,122,89,.32) 47.5% 52.5%,transparent 52.5%) 0 0/72px 72px,linear-gradient(-36deg,transparent 47.5%,rgba(124,203,255,.32) 47.5% 52.5%,transparent 52.5%) 36px 24px/72px 72px,linear-gradient(70deg,transparent 47.5%,rgba(127,224,176,.36) 47.5% 52.5%,transparent 52.5%) 16px 46px/72px 72px,linear-gradient(160deg,#FFE0EC,#FFF3D6 35%,#E2FBEF 65%,#E3EEFF);
  --btn-grad:linear-gradient(90deg,#FF9EC7,#FFB36B,#FFE37A,#7FE0B0,#7CCBFF)}
@media (prefers-color-scheme:dark){
  html[data-skin="bubbletea"]:not([data-theme="light"]){--paper:#1E1712;--paper-2:#2A2019;--card:#30251D;--a2-tint:#1D2A1B;--b1-tint:#3A2B18;--b2-tint:#3A251C;--sky-tint:#33261B;--page-grad:radial-gradient(circle at 12px 12px,rgba(255,230,200,.10) 4px,transparent 4.6px) 0 0/46px 46px,linear-gradient(175deg,#241B15,#1A140F)}
  html[data-skin="strawberry"]:not([data-theme="light"]){--paper:#22131A;--paper-2:#2E1A23;--card:#341E28;--a2-tint:#163024;--b1-tint:#3A1E29;--b2-tint:#3C1C2A;--sky-tint:#3A1E29;--page-grad:radial-gradient(ellipse 2px 3px at 10px 10px,rgba(255,236,150,.35) 98%,transparent) 0 0/34px 34px,linear-gradient(180deg,#2A1720,#1C1016)}
  html[data-skin="cloud"]:not([data-theme="light"]){--paper:#101826;--paper-2:#172235;--card:#1C2940;--a2-tint:#123026;--b1-tint:#332C14;--b2-tint:#1F2747;--sky-tint:#16273F;--page-grad:radial-gradient(60px 26px at 14% 18%,rgba(255,255,255,.08) 98%,transparent),radial-gradient(70px 30px at 82% 34%,rgba(255,255,255,.07) 98%,transparent),linear-gradient(180deg,#14223A,#101826 60%)}
  html[data-skin="sherbet"]:not([data-theme="light"]){--paper:#1A1518;--paper-2:#251E22;--card:#2B2328;--a2-tint:#163024;--b1-tint:#353014;--b2-tint:#3A1C2A;--sky-tint:#16283A;--page-grad:linear-gradient(28deg,transparent 47%,rgba(255,122,89,.35) 47% 53%,transparent 53%) 0 0/60px 60px,linear-gradient(-36deg,transparent 47%,rgba(124,203,255,.35) 47% 53%,transparent 53%) 30px 20px/60px 60px,linear-gradient(160deg,#2A1823,#1E1A14 50%,#14221C)}
}
html[data-skin="bubbletea"][data-theme="dark"]{--paper:#1E1712;--paper-2:#2A2019;--card:#30251D;--a2-tint:#1D2A1B;--b1-tint:#3A2B18;--b2-tint:#3A251C;--sky-tint:#33261B;--page-grad:radial-gradient(circle at 12px 12px,rgba(255,230,200,.10) 4px,transparent 4.6px) 0 0/46px 46px,linear-gradient(175deg,#241B15,#1A140F)}
html[data-skin="strawberry"][data-theme="dark"]{--paper:#22131A;--paper-2:#2E1A23;--card:#341E28;--a2-tint:#163024;--b1-tint:#3A1E29;--b2-tint:#3C1C2A;--sky-tint:#3A1E29;--page-grad:radial-gradient(ellipse 2px 3px at 10px 10px,rgba(255,236,150,.35) 98%,transparent) 0 0/34px 34px,linear-gradient(180deg,#2A1720,#1C1016)}
html[data-skin="cloud"][data-theme="dark"]{--paper:#101826;--paper-2:#172235;--card:#1C2940;--a2-tint:#123026;--b1-tint:#332C14;--b2-tint:#1F2747;--sky-tint:#16273F;--page-grad:radial-gradient(60px 26px at 14% 18%,rgba(255,255,255,.08) 98%,transparent),radial-gradient(70px 30px at 82% 34%,rgba(255,255,255,.07) 98%,transparent),linear-gradient(180deg,#14223A,#101826 60%)}
html[data-skin="sherbet"][data-theme="dark"]{--paper:#1A1518;--paper-2:#251E22;--card:#2B2328;--a2-tint:#163024;--b1-tint:#353014;--b2-tint:#3A1C2A;--sky-tint:#16283A;--page-grad:linear-gradient(28deg,transparent 47%,rgba(255,122,89,.35) 47% 53%,transparent 53%) 0 0/60px 60px,linear-gradient(-36deg,transparent 47%,rgba(124,203,255,.35) 47% 53%,transparent 53%) 30px 20px/60px 60px,linear-gradient(160deg,#2A1823,#1E1A14 50%,#14221C)}
html[data-skin="starry"]{--paper:#0A0F24;--paper-2:#121A38;--card:#16204A;--ink:#F4F1FF;--ink-soft:#CFD3F2;--muted:#8E95C2;--shadow:#FFD36B;--dot:rgba(255,255,255,.08);
  --a2:#7FE3C9;--a2-tint:#102B33;--b1:#FFD36B;--b1-tint:#2E2A1A;--b2:#9FA8FF;--b2-tint:#1C2350;--tomato:#FFD36B;--lilac:#9FA8FF;--sky:#7FC8FF;--sky-tint:#13284A;--stage:#060A1A;--stage-text:#F4F1FF;color-scheme:dark;
  --page-grad:radial-gradient(1.6px 1.6px at 8% 12%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 22% 64%,#fff 98%,transparent),radial-gradient(2px 2px at 37% 28%,#FFE9A8 98%,transparent),radial-gradient(1.2px 1.2px at 51% 82%,#fff 98%,transparent),radial-gradient(1.6px 1.6px at 66% 16%,#fff 98%,transparent),radial-gradient(2.2px 2.2px at 79% 52%,#FFE9A8 98%,transparent),radial-gradient(1.2px 1.2px at 91% 24%,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 14% 90%,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 86% 88%,#fff 98%,transparent),radial-gradient(90% 60% at 50% 110%,rgba(110,90,255,.35),transparent 70%),linear-gradient(180deg,#070B1C,#101A40);
  --btn-grad:linear-gradient(135deg,#FFE58A,#FFC24A)}
html[data-skin="synthwave"]{--paper:#140A24;--paper-2:#1E1036;--card:#241443;--ink:#FFEFFF;--ink-soft:#F3C9F5;--muted:#B58CC9;--shadow:#FF3EA5;--dot:rgba(255,62,165,.10);
  --a2:#3EF0E0;--a2-tint:#10303A;--b1:#FFB23E;--b1-tint:#33230E;--b2:#FF3EA5;--b2-tint:#3A1030;--tomato:#FF3EA5;--lilac:#B46BFF;--sky:#3EF0E0;--sky-tint:#10303A;--stage:#0A0414;--stage-text:#FFEFFF;color-scheme:dark;
  --page-grad:linear-gradient(transparent 96%,rgba(62,240,224,.28) 96%) 0 0/100% 42px,linear-gradient(90deg,transparent 96%,rgba(255,62,165,.22) 96%) 0 0/42px 100%,radial-gradient(60% 40% at 50% 0%,rgba(255,178,62,.28),transparent 70%),linear-gradient(180deg,#1A0B30,#140A24 55%,#24082E);
  --btn-grad:linear-gradient(135deg,#FF3EA5,#B46BFF)}
:is(html[data-skin="bubbletea"],html[data-skin="strawberry"],html[data-skin="cloud"],html[data-skin="sherbet"],html[data-skin="starry"],html[data-skin="synthwave"]) body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page-grad)}
:is(html[data-skin="bubbletea"],html[data-skin="strawberry"],html[data-skin="cloud"],html[data-skin="sherbet"],html[data-skin="starry"],html[data-skin="synthwave"]) :is(.shop,.player){background:var(--page-grad)}
:is(html[data-skin="bubbletea"],html[data-skin="strawberry"],html[data-skin="cloud"],html[data-skin="sherbet"],html[data-skin="starry"],html[data-skin="synthwave"]) .btn-primary{background:var(--btn-grad);color:#1D1A22}
html[data-skin="bubbletea"] .btn-primary,html[data-skin="synthwave"] .btn-primary{color:#FFF8EE}
:is(html[data-skin="bubbletea"],html[data-skin="strawberry"],html[data-skin="cloud"],html[data-skin="sherbet"],html[data-skin="starry"],html[data-skin="synthwave"]):not([data-bar="neon"]):not([data-bar="goldneon"]):not([data-bar="starlight"]) .tabbar a.active{background:var(--btn-grad);color:#1D1A22}
html[data-skin="starry"] .btn-primary{box-shadow:4px 4px 0 #8A6A1A}
/* shop previews of the new themes */
.sh-skin.g-bubbletea{background:radial-gradient(circle at 10px 10px,rgba(60,36,20,.3) 4px,transparent 4.6px) 0 0/30px 30px,linear-gradient(175deg,#F8EEE2,#EEDCC5)}
.sh-skin.g-strawberry{background:radial-gradient(ellipse 2px 3px at 8px 8px,#FFE896 98%,transparent) 0 0/20px 20px,linear-gradient(180deg,#FFE9EF,#FFC3D4)}
.sh-skin.g-cloud{background:radial-gradient(30px 14px at 25% 30%,#fff 98%,transparent),radial-gradient(34px 15px at 75% 70%,#fff 98%,transparent),linear-gradient(180deg,#BFDDFF,#EEF6FF)}
.sh-skin.g-sherbet{background:linear-gradient(28deg,transparent 46%,rgba(255,122,89,.7) 46% 54%,transparent 54%) 0 0/34px 34px,linear-gradient(-36deg,transparent 46%,rgba(124,203,255,.7) 46% 54%,transparent 54%) 17px 10px/34px 34px,linear-gradient(160deg,#FFE0EC,#FFF3D6 40%,#E2FBEF 70%,#E3EEFF)}
.sh-skin.g-starry{background:radial-gradient(1.6px 1.6px at 20% 20%,#fff 98%,transparent),radial-gradient(2px 2px at 70% 30%,#FFE9A8 98%,transparent),radial-gradient(1.4px 1.4px at 40% 80%,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 85% 75%,#fff 98%,transparent),linear-gradient(180deg,#070B1C,#1B2560)}
.sh-skin.g-synthwave{background:linear-gradient(transparent 92%,rgba(62,240,224,.5) 92%) 0 0/100% 16px,linear-gradient(90deg,transparent 92%,rgba(255,62,165,.45) 92%) 0 0/16px 100%,linear-gradient(180deg,#2A0F45,#140A24)}

/* ---------- more bars (2026-10-29): .tabbar on phones and tablets, .nav at the top; still pictures ---------- */
html[data-bar="squish"] .tabbar,html[data-bar="squish"] .nav{background:color-mix(in srgb,var(--card) 92%,var(--lilac));border:3px solid color-mix(in srgb,var(--lilac) 70%,var(--ink));border-radius:30px;box-shadow:0 8px 0 color-mix(in srgb,var(--lilac) 45%,transparent),inset 0 3px 0 rgba(255,255,255,.65)}
html[data-bar="squish"] .nav{border-radius:999px}
html[data-bar="squish"] .tabbar a{border-radius:22px}
html[data-bar="squish"] .tabbar a.active{background:color-mix(in srgb,var(--lilac) 55%,#fff);color:#1D1A22;box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--lilac) 80%,#1D1A22),inset 0 3px 0 rgba(255,255,255,.8);transform:translateY(-3px)}
html[data-bar="candycane"] .tabbar,html[data-bar="candycane"] .nav{border:5px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,repeating-linear-gradient(45deg,#FF4F7B 0 10px,#fff 10px 20px) border-box;box-shadow:0 6px 0 rgba(29,26,34,.25)}
html[data-bar="candycane"] .tabbar a.active{background:#FF4F7B;color:#fff}
html[data-bar="pixel"] .tabbar,html[data-bar="pixel"] .nav{border:0;border-radius:0;background:var(--card);box-shadow:0 -4px 0 var(--ink),0 4px 0 var(--ink),-4px 0 0 var(--ink),4px 0 0 var(--ink),8px 8px 0 color-mix(in srgb,var(--ink) 35%,transparent)}
html[data-bar="pixel"] .tabbar a{border-radius:0;font-family:"Courier New",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.02em}
html[data-bar="pixel"] .tabbar a.active{background:var(--a2);color:#1D1A22;box-shadow:inset -4px -4px 0 rgba(0,0,0,.22),inset 4px 4px 0 rgba(255,255,255,.45)}
html[data-bar="frost"] .tabbar,html[data-bar="frost"] .nav{background:linear-gradient(120deg,rgba(0,245,160,.22),rgba(0,217,245,.2) 45%,rgba(142,84,233,.24)),color-mix(in srgb,var(--card) 55%,transparent);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border:1.5px solid rgba(255,255,255,.55);box-shadow:0 12px 30px rgba(60,40,140,.22),inset 0 1px 0 rgba(255,255,255,.7)}
html[data-bar="frost"] .tabbar a.active{background:linear-gradient(135deg,rgba(0,245,160,.55),rgba(142,84,233,.55));color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
html[data-bar="holofoil"] .tabbar,html[data-bar="holofoil"] .nav{border:2px solid rgba(255,255,255,.85);background:linear-gradient(115deg,#FFD6F3,#D7E4FF 22%,#D2FFF1 44%,#FFF6C9 64%,#F1D9FF 84%,#FFD6F3);box-shadow:0 0 0 2px rgba(29,26,34,.75),0 10px 26px rgba(180,120,255,.35)}
html[data-bar="holofoil"] .tabbar a,html[data-bar="holofoil"] .nav .logo,html[data-bar="holofoil"] .nav-links a{color:#2A2140}
html[data-bar="holofoil"] .tabbar a.active{background:rgba(255,255,255,.75);color:#1D1A22;box-shadow:inset 0 0 0 2px rgba(29,26,34,.6)}
html[data-bar="starlight"] .tabbar,html[data-bar="starlight"] .nav{border:2px solid #FFD36B;background:radial-gradient(1.4px 1.4px at 12% 30%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 38% 70%,#fff 98%,transparent),radial-gradient(1.8px 1.8px at 64% 25%,#FFE9A8 98%,transparent),radial-gradient(1.2px 1.2px at 88% 65%,#fff 98%,transparent),linear-gradient(180deg,#0B1030,#151E4A);box-shadow:0 0 20px rgba(255,211,107,.45)}
html[data-bar="starlight"] .tabbar a,html[data-bar="starlight"] .nav .logo,html[data-bar="starlight"] .nav-links a{color:#E9E6FF}
html[data-bar="starlight"] .tabbar a.active{background:linear-gradient(135deg,#FFE58A,#FFC24A);color:#1D1A22;box-shadow:0 0 16px rgba(255,211,107,.8)}
/* shop previews of the new bars */
.sh-bar.bar-squish{background:color-mix(in srgb,#fff 88%,#B79CFF);border:3px solid #9B86D9;border-radius:22px;box-shadow:0 5px 0 rgba(183,156,255,.5),inset 0 2px 0 #fff;color:#7A62C9}
.sh-bar.bar-candycane{border:4px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,repeating-linear-gradient(45deg,#FF4F7B 0 7px,#fff 7px 14px) border-box;color:#FF4F7B}
.sh-bar.bar-pixel{border-radius:0;background:var(--card);box-shadow:0 -3px 0 var(--ink),0 3px 0 var(--ink),-3px 0 0 var(--ink),3px 0 0 var(--ink);color:var(--ink)}
.sh-bar.bar-pixel span{border-radius:0}
.sh-bar.bar-frost{background:linear-gradient(120deg,rgba(0,245,160,.35),rgba(0,217,245,.3) 45%,rgba(142,84,233,.38)),color-mix(in srgb,var(--card) 60%,transparent);border:1.5px solid rgba(255,255,255,.7);box-shadow:0 8px 18px rgba(60,40,140,.22);color:#5A3FB8}
.sh-bar.bar-holofoil{border:2px solid #fff;background:linear-gradient(115deg,#FFD6F3,#D7E4FF 22%,#D2FFF1 44%,#FFF6C9 64%,#F1D9FF 84%);box-shadow:0 0 0 2px #1D1A22;color:#2A2140}
.sh-bar.bar-starlight{border:2px solid #FFD36B;background:radial-gradient(1.4px 1.4px at 20% 30%,#fff 98%,transparent),radial-gradient(1.8px 1.8px at 70% 60%,#FFE9A8 98%,transparent),linear-gradient(180deg,#0B1030,#151E4A);box-shadow:0 0 12px rgba(255,211,107,.55);color:#FFD36B}

/* ---------- the "Fairy garden" event (garden.js, 2026-10-29): its themes, bars, the shop tab, the home banner and the falling leaves ---------- */
/* Flower meadow follows the light/dark switch; Firefly night is always dark. Still pictures, like the other patterned themes. */
html[data-skin="meadow"]{--paper:#F4FBEA;--paper-2:#E4F3D4;--card:#FFFFFF;--a2:#7CCB6B;--a2-tint:#E3F5DC;--b1:#FFE27A;--b1-tint:#FFF7D1;--b2:#FF9EC4;--b2-tint:#FFE6F0;--tomato:#4E9A3E;--lilac:#C9A7FF;--sky:#8FD3C1;--sky-tint:#E0F5EF;
  --page-grad:radial-gradient(circle at 12px 12px,#FFB3D1 3px,transparent 3.6px) 0 0/58px 58px,radial-gradient(circle at 40px 36px,#fff 3px,transparent 3.6px) 0 0/58px 58px,radial-gradient(circle at 26px 48px,#FFE27A 2.4px,transparent 3px) 0 0/58px 58px,radial-gradient(ellipse 6px 3px at 46px 14px,rgba(92,170,80,.35) 98%,transparent) 0 0/58px 58px,linear-gradient(180deg,#E8F6D8,#F7FCEF 60%,#E9F5DA);
  --btn-grad:linear-gradient(135deg,#A6E08F,#5DB04C)}
@media (prefers-color-scheme:dark){
  html[data-skin="meadow"]:not([data-theme="light"]){--paper:#111A12;--paper-2:#18241A;--card:#1D2B1F;--a2-tint:#17301B;--b1-tint:#332E14;--b2-tint:#3A1C2A;--sky-tint:#15302A;--page-grad:radial-gradient(circle at 12px 12px,rgba(255,179,209,.35) 3px,transparent 3.6px) 0 0/58px 58px,radial-gradient(circle at 40px 36px,rgba(255,255,255,.18) 3px,transparent 3.6px) 0 0/58px 58px,linear-gradient(180deg,#152217,#0F1710)}
}
html[data-skin="meadow"][data-theme="dark"]{--paper:#111A12;--paper-2:#18241A;--card:#1D2B1F;--a2-tint:#17301B;--b1-tint:#332E14;--b2-tint:#3A1C2A;--sky-tint:#15302A;--page-grad:radial-gradient(circle at 12px 12px,rgba(255,179,209,.35) 3px,transparent 3.6px) 0 0/58px 58px,radial-gradient(circle at 40px 36px,rgba(255,255,255,.18) 3px,transparent 3.6px) 0 0/58px 58px,linear-gradient(180deg,#152217,#0F1710)}
html[data-skin="firefly"]{--paper:#0C1F1B;--paper-2:#12302A;--card:#163A32;--ink:#F1FFF4;--ink-soft:#CBEBD9;--muted:#86B5A0;--shadow:#E9FF7A;--dot:rgba(233,255,122,.07);
  --a2:#7FE3A8;--a2-tint:#113A2C;--b1:#E9FF7A;--b1-tint:#2A3314;--b2:#7FD3C9;--b2-tint:#123A36;--tomato:#E9FF7A;--lilac:#A99BFF;--sky:#7FD3C9;--sky-tint:#123A36;--stage:#07140F;--stage-text:#F1FFF4;color-scheme:dark;
  --page-grad:radial-gradient(circle at 30px 40px,rgba(244,255,138,.9) 1.4px,rgba(233,255,122,.22) 3px,transparent 8px) 0 0/130px 120px,radial-gradient(circle at 95px 85px,rgba(244,255,138,.8) 1.8px,rgba(233,255,122,.2) 3.5px,transparent 10px) 0 0/130px 120px,radial-gradient(circle at 70px 20px,rgba(190,255,170,.6) 1.2px,transparent 6px) 0 0/130px 120px,radial-gradient(80% 50% at 50% 110%,rgba(63,191,143,.35),transparent 70%),linear-gradient(180deg,#081A16,#0F2A23);
  --btn-grad:linear-gradient(135deg,#F4FF8A,#9BE36B)}
:is(html[data-skin="meadow"],html[data-skin="firefly"]) body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page-grad)}
:is(html[data-skin="meadow"],html[data-skin="firefly"]) :is(.shop,.player){background:var(--page-grad)}
:is(html[data-skin="meadow"],html[data-skin="firefly"]) .btn-primary{background:var(--btn-grad);color:#1D1A22}
:is(html[data-skin="meadow"],html[data-skin="firefly"]):not([data-bar="neon"]):not([data-bar="goldneon"]):not([data-bar="starlight"]):not([data-bar="ivy"]):not([data-bar="blossom"]) .tabbar a.active{background:var(--btn-grad);color:#1D1A22}
html[data-skin="firefly"] .btn-primary{box-shadow:4px 4px 0 #4C6A1A}
.sh-skin.g-meadow{background:radial-gradient(circle at 8px 8px,#FFB3D1 3px,transparent 3.6px) 0 0/26px 26px,radial-gradient(circle at 19px 18px,#fff 2.6px,transparent 3.2px) 0 0/26px 26px,linear-gradient(180deg,#DDF2C8,#F7FCEF)}
.sh-skin.g-firefly{background:radial-gradient(circle at 25% 30%,#F4FF8A 1.6px,rgba(233,255,122,.25) 3px,transparent 8px),radial-gradient(circle at 70% 60%,#F4FF8A 2px,rgba(233,255,122,.25) 4px,transparent 10px),radial-gradient(circle at 45% 80%,#C8FFAA 1.4px,transparent 6px),linear-gradient(180deg,#081A16,#14352C)}
/* bars: Ivy (leaves along a mossy bar) and Blossom (petals on cream, a pink glow) */
html[data-bar="ivy"] .tabbar,html[data-bar="ivy"] .nav{background:radial-gradient(ellipse 6px 3.4px at 11px 9px,rgba(78,154,62,.32) 98%,transparent) 0 0/24px 18px,radial-gradient(ellipse 5px 3px at 22px 15px,rgba(124,203,107,.32) 98%,transparent) 0 0/24px 18px,color-mix(in srgb,var(--card) 90%,#7CCB6B);border:3px solid #4E9A3E;border-radius:26px;box-shadow:0 6px 0 rgba(78,154,62,.35)}
html[data-bar="ivy"] .nav{border-radius:999px}
html[data-bar="ivy"] .tabbar a.active{background:linear-gradient(135deg,#A6E08F,#4E9A3E);color:#fff;box-shadow:inset 0 -3px 0 #3A7A2E}
html[data-bar="blossom"] .tabbar,html[data-bar="blossom"] .nav{background:radial-gradient(circle at 8px 8px,rgba(255,158,196,.55) 2.6px,transparent 3.2px) 0 0/26px 22px,radial-gradient(circle at 19px 15px,rgba(255,216,107,.7) 1.8px,transparent 2.4px) 0 0/26px 22px,linear-gradient(180deg,#FFF6FA,#FFE6F1);border:2px solid #F28AB8;box-shadow:0 0 0 3px rgba(255,179,209,.35),0 8px 18px rgba(242,138,184,.35)}
html[data-bar="blossom"] .tabbar a,html[data-bar="blossom"] .nav .logo,html[data-bar="blossom"] .nav-links a{color:#7A3E5C}
html[data-bar="blossom"] .tabbar a.active{background:linear-gradient(135deg,#FF9EC4,#FFD86B);color:#1D1A22;box-shadow:0 0 14px rgba(255,158,196,.7)}
.sh-bar.bar-ivy{background:radial-gradient(ellipse 6px 3.4px at 11px 9px,rgba(78,154,62,.32) 98%,transparent) 0 0/24px 18px,color-mix(in srgb,#fff 86%,#7CCB6B);border:3px solid #4E9A3E;box-shadow:0 4px 0 rgba(78,154,62,.35);color:#4E9A3E}
.sh-bar.bar-blossom{background:radial-gradient(circle at 8px 8px,rgba(255,158,196,.6) 2.6px,transparent 3.2px) 0 0/26px 22px,linear-gradient(180deg,#FFF6FA,#FFE6F1);border:2px solid #F28AB8;box-shadow:0 0 10px rgba(242,138,184,.5);color:#F28AB8}
/* Fae's wings (pet-art.js) */
.pet4 .mo-fwing{fill:#DCCBFF;stroke:#A88BE6;stroke-width:2.2;opacity:.92}
.pet4 .mo-fwing.b{fill:#C7F2E0;stroke:#6CC4A0}
/* the shop: the event tab, its badge on cards, the event hero and the collection bar */
.shop-tabs button.ev{border-color:#4E9A3E;color:color-mix(in srgb,#3A7A2E 55%,var(--ink));background:color-mix(in srgb,#7CCB6B 16%,var(--card))}
.shop-tabs button.ev.on{background:linear-gradient(135deg,#A6E08F,#5DB04C);color:#13310D}
.ev-tag{position:absolute;top:7px;right:7px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#5DB04C;border:2px solid var(--ink);color:#fff}
.ev-tag .ic{width:15px;height:15px}
.ev-hero{background:radial-gradient(circle at 12% 20%,rgba(255,179,209,.5) 4px,transparent 5px) 0 0/46px 46px,radial-gradient(circle at 70% 70%,rgba(255,226,122,.6) 3px,transparent 4px) 0 0/46px 46px,linear-gradient(135deg,color-mix(in srgb,#A6E08F 26%,var(--card)),color-mix(in srgb,#FFD6E8 30%,var(--card)))}
.ev-art{display:flex;align-items:flex-end;justify-content:center}
.ev-art .mascot{width:96px;height:96px;flex:none;filter:none}
.ev-art .mascot+.mascot{margin-left:-22px;width:80px;height:80px}
.ev-hero .ev-art .mascot{width:112px;height:112px}.ev-hero .ev-art .mascot+.mascot{margin-left:-40px;width:90px;height:90px}
.ev-kicker{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;background:#5DB04C;color:#fff;font-weight:900;font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:6px}
.ev-kicker .ic{width:14px;height:14px}
.ev-bar{height:12px;border-radius:999px;border:2px solid var(--ink);background:var(--paper-2);overflow:hidden;margin:-2px 0 6px}
.ev-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#A6E08F,#5DB04C,#FF9EC4)}
/* the home page: a banner under the hero, and leaves and petals drifting down the hero (fireflies in the dark) */
.ev-banner-wrap{margin-top:-46px;margin-bottom:52px;position:relative;z-index:3}
.ev-banner{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:16px 52px 16px 18px;border:var(--bw) solid var(--ink);border-radius:26px;box-shadow:5px 5px 0 var(--shadow);
  background:radial-gradient(circle at 12px 12px,rgba(255,179,209,.55) 3px,transparent 3.6px) 0 0/44px 44px,radial-gradient(circle at 32px 30px,rgba(255,226,122,.6) 2.4px,transparent 3px) 0 0/44px 44px,linear-gradient(120deg,color-mix(in srgb,#A6E08F 26%,var(--card)),color-mix(in srgb,#FFD6E8 30%,var(--card)))}
.ev-banner h3{margin:0 0 4px;font-size:1.35rem;letter-spacing:-.01em}
.ev-banner p{margin:0 0 10px;font-weight:600;color:var(--ink-soft);line-height:1.4}
.ev-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.ev-x .ic{width:16px;height:16px}
@media (max-width:560px){ .ev-banner{grid-template-columns:1fr;justify-items:center;text-align:center;padding:16px} .ev-banner-wrap{margin-top:-30px} }
.ev-leaves{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.ev-leaves span{position:absolute;left:var(--x);top:-24px;width:16px;height:10px;border-radius:0 100% 0 100%;background:#7CCB6B;opacity:.85;animation:evFall var(--t) linear var(--d) infinite;will-change:transform}
.ev-leaves span.l2{background:#A6D96A;width:13px;height:8px}
.ev-leaves span.p{background:#FFB3D1;width:11px;height:9px;border-radius:100% 0 100% 30%}
.ev-leaves b{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;border-radius:50%;background:#F4FF8A;box-shadow:0 0 10px 4px rgba(244,255,138,.55);opacity:0;display:none;animation:evGlow 3.6s ease-in-out var(--d) infinite}
@keyframes evFall{0%{transform:translate3d(0,0,0) rotate(0)}30%{transform:translate3d(26px,32vh,0) rotate(120deg)}60%{transform:translate3d(-14px,66vh,0) rotate(230deg)}100%{transform:translate3d(18px,108vh,0) rotate(360deg)}}
@keyframes evGlow{0%,100%{opacity:0;transform:translate3d(0,0,0)}50%{opacity:1;transform:translate3d(8px,-10px,0)}}
html[data-theme="dark"] .ev-leaves b,html[data-skin="firefly"] .ev-leaves b,html[data-skin="starry"] .ev-leaves b{display:block}
@media (prefers-color-scheme:dark){ html:not([data-theme="light"]) .ev-leaves b{display:block} }
html.calm .ev-leaves *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .ev-leaves{display:none} }

/* ---------- "Try it" (shop.js): a button on every card you don't own, and the bar while an item is on trial ---------- */
.sh-try{position:absolute;right:7px;bottom:7px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 7px;border-radius:999px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:.74rem;cursor:pointer}
.sh-try .ic{width:14px;height:14px}
.sh-try:active{transform:scale(.94)}
.try-bar{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:8px;width:min(620px,calc(100% - 24px));padding:8px 8px 8px 12px;border:var(--bw) solid var(--ink);border-radius:22px;background:var(--card);color:var(--ink);box-shadow:5px 5px 0 var(--shadow);transform:translate(-50%,calc(100% + 140px));visibility:hidden;pointer-events:none;transition:transform .45s var(--spring),visibility 0s .45s}
.try-bar.show{transform:translate(-50%,0);visibility:visible;pointer-events:auto;transition:transform .45s var(--spring)}   /* hidden: fully off screen (an empty bar is short, so 140% of it left an edge above the phone tab bar) */
.try-bar .tb-eye{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--b1-tint);border:2px solid var(--ink)}
.try-bar .tb-eye .ic{width:20px;height:20px}
.try-bar .tb-txt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.try-bar .tb-txt small{font-weight:700;color:var(--ink-soft);font-size:.74rem}
.try-bar .tb-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.try-bar .btn{padding:8px 12px;font-size:.85rem;white-space:nowrap}
.try-bar .tb-x{width:36px;height:36px;flex:none;border-radius:50%;border:2px solid var(--ink);background:var(--paper-2);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.try-bar .tb-x .ic{width:16px;height:16px}
@media (max-width:680px){ .try-bar{bottom:calc(96px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:6px} .try-bar .tb-txt{flex-basis:calc(100% - 104px)} .try-bar .tb-x{order:1} .try-bar .btn{order:2;flex:1} }

/* ---------- style themes (2026-10-29): beyond colours, they restyle cards, buttons, borders, the headline pill and the bars ----------
   Each sets the shared variables (--bw border width, --radius, --sh / --shadow hard shadows) and then the card-like parts listed in
   :is(...) below. "[data-skin][data-skin]" outranks the dark-mode :root rules, so the light-only ones stay light; chalk and cosmos are
   always dark; glassy follows the light/dark switch. Fonts (pets.js font) are fetched only while the theme is on and all have Vietnamese. */
html[data-skin="notebook"] body::before,html[data-skin="glassy"] body::before,html[data-skin="clay"] body::before,html[data-skin="memphis"] body::before,html[data-skin="chalk"] body::before,html[data-skin="washi"] body::before,html[data-skin="cosmos"] body::before,html[data-skin="watercolor"] body::before,html[data-skin="lilypond"] body::before,html[data-skin="mushwood"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page-grad)}
:is(html[data-skin="notebook"],html[data-skin="glassy"],html[data-skin="clay"],html[data-skin="memphis"],html[data-skin="chalk"],html[data-skin="washi"],html[data-skin="cosmos"],html[data-skin="watercolor"],html[data-skin="lilypond"],html[data-skin="mushwood"]) :is(.shop,.player){background:var(--page-grad)}

/* 1 Notebook: lined paper with a red margin, sticky-note cards, a highlighter headline, handwriting */
html[data-skin="notebook"][data-skin]{--paper:#FFFDF6;--paper-2:#F2EEDF;--card:#FFFEF9;--ink:#2A3550;--ink-soft:#4A5577;--muted:#7C86A3;--shadow:#D9534F;--dot:transparent;
  --a2:#9EDDB5;--a2-tint:#E2F5E8;--b1:#FFE45C;--b1-tint:#FFF7C9;--b2:#FFB0C8;--b2-tint:#FFE6EE;--tomato:#2A3550;--lilac:#B9A6F0;--sky:#9CC7F2;--sky-tint:#E3EFFB;--on-color:#2A3550;--stage:#2A3550;--stage-text:#FFFDF6;
  --bw:2px;--radius:6px;--sh:3px 3px 0 rgba(42,53,80,.18);--sh-lg:5px 5px 0 rgba(42,53,80,.18);color-scheme:light;
  --page-grad:linear-gradient(90deg,transparent 30px,rgba(242,139,139,.8) 30px 32px,transparent 32px),repeating-linear-gradient(#FFFDF6 0 27px,#C9DDF3 27px 28px)}
html[data-skin="notebook"] .btn-primary{background:#2A3550;color:#fff;box-shadow:3px 3px 0 #D9534F}
html[data-skin="notebook"] .rot{background:linear-gradient(transparent 46%,#FFE45C 46% 92%,transparent 92%);background-color:transparent!important;border:0;box-shadow:none;transform:rotate(-1deg)}
html[data-skin="notebook"] :is(.hand,.kicker){font-family:"Patrick Hand","Bricolage Grotesque",cursive;font-weight:400}
html[data-skin="notebook"] .kicker{color:#D9534F}
html[data-skin="notebook"] .lesson:nth-child(3n+1){background:#FFF7C9}html[data-skin="notebook"] .lesson:nth-child(3n+2){background:#E2F5E8}html[data-skin="notebook"] .lesson:nth-child(3n){background:#FFE6EE}
html[data-skin="notebook"] .tabbar,html[data-skin="notebook"] .nav{border-radius:14px 18px 12px 20px/18px 12px 20px 14px}
html[data-skin="notebook"] .tabbar a.active{background:#FFE45C;color:#2A3550}

/* 2 Frosted glass: colour blobs behind see-through cards with bright edges (follows light/dark) */
html[data-skin="glassy"][data-skin]{--paper:#F2EEFF;--paper-2:#E6E0FA;--card:rgba(255,255,255,.62);--ink:#26214A;--ink-soft:#4C4675;--muted:#7D77A6;--shadow:rgba(90,70,180,.16);--dot:transparent;
  --a2:#7FE3C1;--a2-tint:#E3F8F1;--b1:#FFD86B;--b1-tint:#FFF4D2;--b2:#FF9AD5;--b2-tint:#FFE6F4;--tomato:#8B7CFF;--lilac:#B69CFF;--sky:#7FD8FF;--sky-tint:#E2F5FF;--on-color:#fff;
  --bw:1.5px;--radius:24px;--sh:0 10px 28px rgba(90,70,180,.16);--sh-lg:0 16px 40px rgba(90,70,180,.2);color-scheme:light;
  --page-grad:radial-gradient(circle at 12% 18%,rgba(255,154,213,.85) 0 130px,transparent 300px),radial-gradient(circle at 92% 42%,rgba(127,216,255,.8) 0 150px,transparent 330px),radial-gradient(circle at 30% 88%,rgba(182,156,255,.85) 0 160px,transparent 340px),#F2EEFF}
html[data-skin="glassy"] :is(.nav,.tabbar,.lesson,.profile,.wotd,.tabs,.modal-card,.game,.stop-card,.me-card,.bubble,.sheet-card,.st-opt,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.pl-confirm-card,.try-bar,.btn:not(.btn-primary)){border-color:rgba(255,255,255,.85)!important;box-shadow:var(--sh)}
html[data-skin="glassy"] :is(.nav,.tabbar,.try-bar){background:rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-skin="glassy"] .btn-primary{background:linear-gradient(135deg,#FF7AC6,#8B7CFF);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(139,124,255,.45)}
html[data-skin="glassy"] .rot{background:linear-gradient(135deg,#FF7AC6,#8B7CFF);color:#fff;border-color:rgba(255,255,255,.9);box-shadow:0 10px 26px rgba(139,124,255,.45)}
html[data-skin="glassy"] .tabbar a.active{background:rgba(255,255,255,.85);color:#7A5CE0}
html[data-skin="glassy"][data-theme="dark"]{--paper:#141026;--paper-2:#1D1838;--card:rgba(40,32,80,.62);--ink:#F1EDFF;--ink-soft:#CFC8F2;--muted:#9C94C8;--a2-tint:#163A33;--b1-tint:#3A3217;--b2-tint:#3D1A33;--sky-tint:#16304A;color-scheme:dark;
  --page-grad:radial-gradient(circle at 12% 18%,rgba(255,90,190,.45) 0 120px,transparent 300px),radial-gradient(circle at 92% 42%,rgba(60,170,255,.4) 0 140px,transparent 320px),radial-gradient(circle at 30% 88%,rgba(140,100,255,.5) 0 150px,transparent 330px),#141026}
@media (prefers-color-scheme:dark){ html[data-skin="glassy"]:not([data-theme="light"]){--paper:#141026;--paper-2:#1D1838;--card:rgba(40,32,80,.62);--ink:#F1EDFF;--ink-soft:#CFC8F2;--muted:#9C94C8;--a2-tint:#163A33;--b1-tint:#3A3217;--b2-tint:#3D1A33;--sky-tint:#16304A;color-scheme:dark;
  --page-grad:radial-gradient(circle at 12% 18%,rgba(255,90,190,.45) 0 120px,transparent 300px),radial-gradient(circle at 92% 42%,rgba(60,170,255,.4) 0 140px,transparent 320px),radial-gradient(circle at 30% 88%,rgba(140,100,255,.5) 0 150px,transparent 330px),#141026} }
html[data-skin="glassy"][data-theme="dark"] :is(.nav,.tabbar,.try-bar),html[data-skin="glassy"][data-theme="dark"] .tabbar a.active{background:rgba(40,32,80,.6)}

/* 3 Clay 3D: no outlines, puffy shapes with an inner light and a soft deep shadow */
html[data-skin="clay"][data-skin]{--paper:#F4E9DF;--paper-2:#EBDDD0;--card:#FFF6EE;--ink:#4A3B52;--ink-soft:#6B5A73;--muted:#998A9E;--shadow:transparent;--dot:transparent;
  --a2:#B9E4C9;--a2-tint:#E6F5EC;--b1:#FFE7A3;--b1-tint:#FFF4D6;--b2:#FFB8A8;--b2-tint:#FFE7E1;--tomato:#FF9F8E;--lilac:#C9B8FF;--sky:#A9D8FF;--sky-tint:#E5F2FF;--on-color:#4A3B52;--stage:#4A3B52;--stage-text:#FFF6EE;
  --bw:0px;--radius:26px;--clay:inset -4px -5px 10px rgba(190,150,120,.25),inset 4px 5px 10px rgba(255,255,255,.95),8px 10px 22px rgba(160,120,90,.22);--sh:var(--clay);--sh-lg:var(--clay);color-scheme:light;--page-grad:#F4E9DF}
html[data-skin="clay"] :is(.nav,.tabbar,.lesson,.profile,.wotd,.tabs,.modal-card,.game,.stop-card,.me-card,.bubble,.sheet-card,.st-opt,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.pl-confirm-card,.try-bar,.btn,.shop-tabs button,.nav-coins){box-shadow:var(--clay)!important}
html[data-skin="clay"] .btn-primary{background:#FF9F8E;color:#fff;box-shadow:inset -3px -4px 8px rgba(160,60,40,.3),inset 3px 3px 6px rgba(255,255,255,.55),6px 8px 16px rgba(220,110,90,.35)!important}
html[data-skin="clay"] .rot{background:#B9E4C9;color:#3E5A48;box-shadow:inset -4px -5px 8px rgba(60,140,90,.25),inset 4px 4px 8px rgba(255,255,255,.8),6px 8px 16px rgba(60,140,90,.25);border-radius:.3em}
html[data-skin="clay"] .tabbar a.active{background:#FFD9CF;color:#4A3B52;box-shadow:inset 3px 3px 6px rgba(200,110,90,.25)}

/* 4 Memphis 90s: polka dots, thick outlines, square corners, offset shadows in three colours */
html[data-skin="memphis"][data-skin]{--paper:#FFF4D6;--paper-2:#FFE9B0;--card:#FFFFFF;--ink:#1D1A22;--ink-soft:#3B3640;--muted:#6F6874;--shadow:#FF5DA2;--dot:transparent;
  --a2:#2EC4B6;--a2-tint:#D6F5F2;--b1:#FFC93C;--b1-tint:#FFF0C4;--b2:#FF5DA2;--b2-tint:#FFE0EE;--tomato:#2EC4B6;--lilac:#9B7BFF;--sky:#4FB7FF;--sky-tint:#DDF0FF;--on-color:#1D1A22;
  --bw:3px;--radius:0px;--sh:6px 6px 0 #FF5DA2;--sh-lg:9px 9px 0 #FF5DA2;color-scheme:light;
  --page-grad:radial-gradient(circle at 10px 10px,rgba(29,26,34,.55) 2px,transparent 2.6px) 0 0/30px 30px,#FFF4D6}
html[data-skin="memphis"] .lesson:nth-child(3n+2){box-shadow:6px 6px 0 #2EC4B6}html[data-skin="memphis"] .lesson:nth-child(3n){box-shadow:6px 6px 0 #FFC93C}
html[data-skin="memphis"] :is(.nav,.tabbar,.btn,.shop-tabs button,.nav-coins,.tabbar a,.sh-prev,.tier-tag){border-radius:0!important}
html[data-skin="memphis"] .tabbar{box-shadow:6px 6px 0 #FFC93C}
html[data-skin="memphis"] .rot{background:#FF5DA2;color:#fff;border-radius:0;box-shadow:6px 6px 0 #1D1A22;transform:rotate(-3deg)}
html[data-skin="memphis"] .kicker{display:inline-block;background:#1D1A22;color:#FFF4D6;padding:2px 12px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.06em}
html[data-skin="memphis"] .tabbar a.active{background:#FF5DA2;color:#fff}

/* 5 Chalkboard (always dark): a green board in a wooden frame, dashed chalk lines, chalk handwriting */
html[data-skin="chalk"][data-skin]{--paper:#2F4A3A;--paper-2:#36543F;--card:rgba(255,255,255,.05);--ink:#F3F1E4;--ink-soft:#DDE8DA;--muted:#A9BDAE;--shadow:transparent;--dot:transparent;
  --a2:#9FE3B0;--a2-tint:#2C5A40;--b1:#FFE38A;--b1-tint:#4A5A36;--b2:#FFB3C7;--b2-tint:#58474A;--tomato:#FFE38A;--lilac:#C9B8FF;--sky:#8FD3FF;--sky-tint:#2F5560;--on-color:#2F4A3A;--stage:#22382B;--stage-text:#F3F1E4;
  --bw:2.5px;--radius:14px;--sh:none;--sh-lg:none;color-scheme:dark;
  --page-grad:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.07),transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(255,255,255,.05),transparent 50%),#2F4A3A}
html[data-skin="chalk"] :is(.lesson,.profile,.wotd,.tabs,.modal-card,.game,.stop-card,.me-card,.bubble,.st-opt,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.btn:not(.btn-primary)){border-style:dashed}
html[data-skin="chalk"] :is(.sheet-card,.pl-confirm-card,.modal-card){background:#35523F}
html[data-skin="chalk"] :is(h1,h2,h3,.h1,.hand,.kicker,.rot){font-family:"Patrick Hand","Bricolage Grotesque",cursive;font-weight:400;letter-spacing:0}
html[data-skin="chalk"] .btn-primary{background:#F3F1E4;color:#2F4A3A;border-color:#F3F1E4}
html[data-skin="chalk"] .rot{background:transparent;background-color:transparent!important;color:#FFE38A;border-color:#FFE38A;border-radius:50% 40% 55% 45%/50% 60% 40% 50%;box-shadow:none}
html[data-skin="chalk"] .tabbar,html[data-skin="chalk"] .nav{background:#9A6B3F;border-color:#6B4527;box-shadow:inset 0 3px 0 rgba(255,255,255,.2),0 5px 0 #6B4527;color:#FFF1DC}
html[data-skin="chalk"] .tabbar a,html[data-skin="chalk"] .nav a{color:#FFF1DC}
html[data-skin="chalk"] .tabbar a.active{background:#F3F1E4;color:#2F4A3A}
html[data-skin="chalk"] .player{box-shadow:inset 0 0 0 8px #9A6B3F}

/* 7 Washi (Japan): seigaiha waves, indigo and vermilion, double-ruled paper cards, a round stamp button */
html[data-skin="washi"][data-skin]{--paper:#F6F1E7;--paper-2:#ECE4D4;--card:#FFFCF5;--ink:#1F2C55;--ink-soft:#3E4A72;--muted:#7A829E;--shadow:transparent;--dot:transparent;
  --a2:#8FBF9F;--a2-tint:#E3EFE6;--b1:#E9C46A;--b1-tint:#F7EDD2;--b2:#E58E8E;--b2-tint:#F7E1DE;--tomato:#D8432F;--lilac:#A89BCF;--sky:#7FA7D6;--sky-tint:#E2EAF5;--on-color:#fff;--stage:#1F2C55;--stage-text:#F6F1E7;
  --bw:1.5px;--radius:6px;--sh:0 0 0 4px var(--card),0 0 0 5.5px var(--ink);--sh-lg:0 0 0 5px var(--card),0 0 0 6.5px var(--ink);color-scheme:light;
  --page-grad:radial-gradient(circle at 50% 100%,transparent 9px,#D5DFEE 9px 11px,transparent 11px 15px,#D5DFEE 15px 17px,transparent 17px) 0 0/40px 20px,#F6F1E7}
html[data-skin="washi"] :is(h1,h2,h3,.h1,.rot){font-family:"M PLUS Rounded 1c","Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.01em}
html[data-skin="washi"] .kicker{font-family:"M PLUS Rounded 1c","Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:.12em;color:#D8432F;transform:none}
html[data-skin="washi"] .btn-primary{background:#D8432F;color:#fff;border-color:#D8432F;box-shadow:inset 0 0 0 3px #F6F1E7,0 0 0 2px #D8432F}
html[data-skin="washi"] .rot{background:#1F2C55;background-color:#1F2C55!important;color:#F6F1E7;border-color:#1F2C55;box-shadow:0 0 0 4px var(--paper),0 0 0 5.5px #1F2C55;transform:none;border-radius:6px}
html[data-skin="washi"] .tabbar a.active{background:transparent;color:#D8432F;box-shadow:inset 0 -3px 0 #D8432F;border-radius:0}

/* 8 Cosmos (always dark): stars, a ringed planet, cards that glow */
html[data-skin="cosmos"][data-skin]{--paper:#0A0826;--paper-2:#151040;--card:rgba(30,20,80,.72);--ink:#EFEAFF;--ink-soft:#CFC6F5;--muted:#9C92CF;--shadow:transparent;--dot:transparent;
  --a2:#5FF0C8;--a2-tint:#13334A;--b1:#FFE9A8;--b1-tint:#2E2A4A;--b2:#FF5AC8;--b2-tint:#3A1650;--tomato:#FF5AC8;--lilac:#8B6CFF;--sky:#4FD8FF;--sky-tint:#13305A;--on-color:#fff;--stage:#06051A;--stage-text:#EFEAFF;
  --bw:1.5px;--radius:20px;--sh:0 0 18px rgba(130,100,255,.45);--sh-lg:0 0 28px rgba(130,100,255,.55);color-scheme:dark;
  --page-grad:radial-gradient(1.6px 1.6px at 12% 18%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 30% 60%,#fff 98%,transparent),radial-gradient(2px 2px at 72% 12%,#FFE9A8 98%,transparent),radial-gradient(1.4px 1.4px at 86% 70%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 52% 88%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 64% 40%,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 6% 76%,#fff 98%,transparent),radial-gradient(170px 170px at 104% 30%,#7A4DFF,#3B1F8F 60%,transparent 62%),radial-gradient(80% 50% at 0% 100%,rgba(255,80,180,.35),transparent 70%),linear-gradient(180deg,#0A0826,#1A0E45)}
html[data-skin="cosmos"] :is(.nav,.tabbar,.lesson,.profile,.wotd,.tabs,.modal-card,.game,.stop-card,.me-card,.bubble,.sheet-card,.st-opt,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.pl-confirm-card,.try-bar){border-color:rgba(160,140,255,.6);box-shadow:var(--sh)}
html[data-skin="cosmos"] :is(.sheet-card,.pl-confirm-card,.modal-card){background:#1C1452}
html[data-skin="cosmos"] .btn-primary{background:linear-gradient(135deg,#FF5AC8,#8B6CFF);color:#fff;border-color:transparent;box-shadow:0 0 18px rgba(255,90,200,.6)}
html[data-skin="cosmos"] .btn:not(.btn-primary){border-color:#4FD8FF;box-shadow:0 0 12px rgba(79,216,255,.4)}
html[data-skin="cosmos"] .rot{background:linear-gradient(90deg,#FF5AC8,#8B6CFF,#4FD8FF);color:#fff;border-color:transparent;box-shadow:0 0 26px rgba(139,108,255,.8)}
html[data-skin="cosmos"] .tabbar a.active{background:rgba(143,233,255,.18);color:#8FE9FF}

/* 9 Watercolour: paint washes on paper, borderless cards with uneven soft corners, a round friendly font */
html[data-skin="watercolor"][data-skin]{--paper:#FFFCF7;--paper-2:#F6EFE6;--card:rgba(255,255,255,.78);--ink:#3A3550;--ink-soft:#5E5875;--muted:#8D88A3;--shadow:transparent;--dot:transparent;
  --a2:#AAE6AA;--a2-tint:#E8F7E8;--b1:#FFDC82;--b1-tint:#FFF5DA;--b2:#FF9FB4;--b2-tint:#FFE8EE;--tomato:#F0708F;--lilac:#C2B0F2;--sky:#8CC8FF;--sky-tint:#E5F2FF;--on-color:#3A3550;--stage:#3A3550;--stage-text:#FFFCF7;
  --bw:0px;--radius:28px 22px 30px 20px/22px 30px 20px 28px;--sh:0 0 0 2px rgba(120,110,160,.16),0 8px 18px rgba(120,110,160,.12);--sh-lg:var(--sh);color-scheme:light;
  --page-grad:radial-gradient(ellipse 340px 240px at 8% 10%,rgba(255,170,190,.5),transparent 70%),radial-gradient(ellipse 380px 280px at 96% 38%,rgba(140,200,255,.45),transparent 70%),radial-gradient(ellipse 420px 300px at 18% 82%,rgba(170,230,170,.45),transparent 70%),radial-gradient(ellipse 260px 180px at 82% 94%,rgba(255,220,130,.5),transparent 70%),#FFFCF7}
html[data-skin="watercolor"] :is(.nav,.tabbar,.lesson,.profile,.wotd,.tabs,.modal-card,.game,.stop-card,.me-card,.bubble,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.try-bar,.btn){box-shadow:var(--sh)!important}
html[data-skin="watercolor"] :is(h1,h2,h3,.h1,.rot){font-family:"Baloo 2","Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.01em}
html[data-skin="watercolor"] .btn-primary{background:radial-gradient(ellipse at 40% 40%,#FF9FB4,#F0708F);color:#fff;border-radius:24px 18px 26px 16px}
html[data-skin="watercolor"] .rot{background:radial-gradient(ellipse at 40% 50%,rgba(140,200,255,.9),rgba(140,200,255,.45) 75%,transparent 78%);background-color:transparent!important;box-shadow:none;color:#3A3550}
html[data-skin="watercolor"] .tabbar a.active{background:radial-gradient(ellipse,rgba(255,220,130,.85),rgba(255,220,130,.25) 75%);color:#3A3550}

/* garden themes (garden.js): Lily pond (lotus pads and ripples) and Mushroom wood (red caps, leaves, wooden bars) — both light */
html[data-skin="lilypond"][data-skin]{--paper:#E6FAF5;--paper-2:#D3F2EA;--card:#FFFFFF;--ink:#1F4A4A;--ink-soft:#3E6B68;--muted:#6E9690;--shadow:#4FC7B8;--dot:transparent;
  --a2:#8ED67A;--a2-tint:#E3F6DC;--b1:#FFE27A;--b1-tint:#FFF6D1;--b2:#FF9EC4;--b2-tint:#FFE6F0;--tomato:#2FA89A;--lilac:#B9A6F0;--sky:#7FD3E8;--sky-tint:#DDF4F8;--on-color:#1F4A4A;
  --bw:2.5px;--radius:26px;--sh:0 6px 0 rgba(79,199,184,.35);--sh-lg:0 9px 0 rgba(79,199,184,.35);color-scheme:light;
  --page-grad:radial-gradient(circle at 40px 40px,transparent 14px,rgba(79,199,184,.22) 14px 15.5px,transparent 15.5px 22px,rgba(79,199,184,.14) 22px 23.5px,transparent 23.5px) 0 0/190px 170px,radial-gradient(ellipse 15px 12px at 130px 112px,rgba(142,214,122,.55) 96%,transparent) 0 0/190px 170px,radial-gradient(circle 4px at 126px 108px,rgba(255,158,196,.9) 96%,transparent) 0 0/190px 170px,linear-gradient(180deg,#D3F4EE,#E9FBF6 60%,#D6F3EC)}
html[data-skin="lilypond"] :is(h1,h2,h3,.h1,.rot){font-family:"Baloo 2","Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.01em}
html[data-skin="lilypond"] .btn-primary{background:linear-gradient(135deg,#6FDCCB,#2FA89A);color:#fff}
html[data-skin="lilypond"] .rot{background:linear-gradient(135deg,#FFB8D2,#FF8FB8);color:#fff;border-radius:999px;box-shadow:0 6px 0 rgba(255,143,184,.45)}
html[data-skin="lilypond"] .tabbar a.active{background:linear-gradient(135deg,#9BDC8A,#4FC7B8);color:#fff}
html[data-skin="mushwood"][data-skin]{--paper:#F6E7CF;--paper-2:#EEDBBE;--card:#FFF8EC;--ink:#4A2E1E;--ink-soft:#6E4B36;--muted:#9A7A62;--shadow:#8A5A35;--dot:transparent;
  --a2:#7CB45A;--a2-tint:#E6F0D8;--b1:#F2B84B;--b1-tint:#FBEBC8;--b2:#E2453C;--b2-tint:#F8DDD6;--tomato:#E2453C;--lilac:#B79BD9;--sky:#8FBFD9;--sky-tint:#E2EEF3;--on-color:#fff;
  --bw:3px;--radius:18px;--sh:4px 5px 0 #8A5A35;--sh-lg:6px 7px 0 #8A5A35;color-scheme:light;
  --page-grad:radial-gradient(circle at 20px 22px,rgba(226,69,60,.42) 5px,transparent 5.6px) 0 0/150px 140px,radial-gradient(circle at 18px 20px,#FFF4E2 1.2px,transparent 1.8px) 0 0/150px 140px,radial-gradient(ellipse 7px 3.5px at 96px 84px,rgba(124,180,90,.4) 96%,transparent) 0 0/150px 140px,radial-gradient(ellipse 6px 3px at 70px 118px,rgba(242,184,75,.4) 96%,transparent) 0 0/150px 140px,linear-gradient(180deg,#F8EBD6,#F1DDC0)}
html[data-skin="mushwood"] :is(h1,h2,h3,.h1,.rot){font-family:"Baloo 2","Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.01em}
html[data-skin="mushwood"] .rot{background:radial-gradient(circle at 22% 30%,#FFF4E2 3px,transparent 3.6px) 0 0/34px 30px,#E2453C;background-color:#E2453C!important;color:#fff}
html[data-skin="mushwood"] .tabbar,html[data-skin="mushwood"] .nav{background:repeating-linear-gradient(90deg,#B07A4C 0 26px,#A36E42 26px 28px);border-color:#6B4527;color:#FFF1DC}
html[data-skin="mushwood"] .tabbar a,html[data-skin="mushwood"] .nav a{color:#FFF1DC}
html[data-skin="mushwood"] .tabbar a.active{background:#E2453C;color:#fff}
/* shop previews */
.sh-skin.g-notebook{background:linear-gradient(90deg,transparent 14px,#F28B8B 14px 15px,transparent 15px),repeating-linear-gradient(#FFFDF6 0 11px,#BFD7F2 11px 12px)}
.sh-skin.g-glassy{background:radial-gradient(circle at 20% 25%,#FF9AD5 0 18px,transparent 40px),radial-gradient(circle at 80% 70%,#7FD8FF 0 20px,transparent 44px),radial-gradient(circle at 40% 90%,#B69CFF 0 18px,transparent 40px),#F2EEFF}
.sh-skin.g-clay{background:#F4E9DF}.sh-skin.g-clay i{border:0!important;box-shadow:inset -2px -3px 5px rgba(0,0,0,.12),inset 2px 2px 4px rgba(255,255,255,.8),3px 4px 8px rgba(160,120,90,.25)}
.sh-skin.g-memphis{background:radial-gradient(circle at 6px 6px,#1D1A22 1.6px,transparent 2px) 0 0/16px 16px,#FFF4D6}.sh-skin.g-memphis i{border-radius:0!important;box-shadow:3px 3px 0 #1D1A22}
.sh-skin.g-chalk{background:#2F4A3A;box-shadow:inset 0 0 0 5px #9A6B3F}.sh-skin.g-chalk i{border-style:dashed!important;border-color:#F3F1E4!important}
.sh-skin.g-washi{background:radial-gradient(circle at 50% 100%,transparent 5px,#C9D6EA 5px 6px,transparent 6px 8px,#C9D6EA 8px 9px,transparent 9px) 0 0/22px 11px,#F6F1E7}
.sh-skin.g-cosmos{background:radial-gradient(1.4px 1.4px at 20% 20%,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 70% 40%,#fff 98%,transparent),radial-gradient(40px 40px at 100% 20%,#7A4DFF,#3B1F8F 60%,transparent 62%),linear-gradient(180deg,#0A0826,#1A0E45)}.sh-skin.g-cosmos i{box-shadow:0 0 8px rgba(160,140,255,.8)}
.sh-skin.g-watercolor{background:radial-gradient(ellipse 40px 30px at 20% 20%,rgba(255,170,190,.7),transparent 70%),radial-gradient(ellipse 44px 32px at 85% 50%,rgba(140,200,255,.6),transparent 70%),radial-gradient(ellipse 46px 34px at 30% 90%,rgba(170,230,170,.6),transparent 70%),#FFFCF7}.sh-skin.g-watercolor i{border:0!important;border-radius:46% 54% 50% 50%/55% 45% 55% 45%!important}
.sh-skin.g-lilypond{background:radial-gradient(ellipse 14px 12px at 30% 40%,#9BDC8A 96%,transparent),radial-gradient(circle 4px at 27% 36%,#FF9EC4 96%,transparent),radial-gradient(circle at 75% 70%,transparent 8px,rgba(79,199,184,.35) 8px 9px,transparent 9px 13px,rgba(79,199,184,.25) 13px 14px,transparent 14px),linear-gradient(180deg,#D3F4EE,#E9FBF6)}
.sh-skin.g-mushwood{background:radial-gradient(circle at 12px 12px,#E2453C 5px,transparent 5.6px) 0 0/34px 30px,radial-gradient(circle at 10px 10px,#FFF4E2 1.2px,transparent 1.8px) 0 0/34px 30px,linear-gradient(180deg,#F8EBD6,#F1DDC0)}

/* ---------- opening a chest (shop.js showChest): shake → lid up, flash, rays and sparks in the best tier's colour (--tc) → items ---------- */
.chest-stage{position:relative;display:grid;place-items:center;width:min(440px,100%);height:min(460px,78vh);cursor:pointer;-webkit-tap-highlight-color:transparent}
.chest-stage.done{display:none}
.chest-big{position:relative;z-index:2;width:210px;overflow:visible;filter:drop-shadow(0 12px 0 rgba(0,0,0,.28))}
.chest-big .cb-lid{transform-box:fill-box;transform-origin:8% 100%}
.chest-stage.shake .chest-big{animation:csShake 1.15s cubic-bezier(.36,.07,.19,.97) both}
.chest-stage.open .chest-big{animation:csPop .55s var(--spring) both}
.chest-stage.open .chest-big .cb-lid{animation:csLid .55s var(--out) forwards}
.cs-rays{position:absolute;width:560px;height:560px;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--tc) 75%,transparent) 0 9deg,transparent 9deg 22deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);opacity:0;transform:scale(.3);transition:opacity .45s,transform .7s var(--out)}
.chest-stage.open .cs-rays{opacity:1;transform:scale(1);animation:csSpin 9s linear infinite}
.cs-flash{position:absolute;z-index:1;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,var(--tc) 45%,transparent 70%);opacity:0;transform:scale(.2)}
.chest-stage.open .cs-flash{animation:csFlash .8s var(--out) forwards}
.cs-p{position:absolute;z-index:3;width:12px;height:12px;background:var(--tc);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0}
.chest-stage.open .cs-p{animation:csSpark .9s var(--out) var(--d) forwards}
.cs-hint{position:absolute;bottom:4px;z-index:3;margin:0;color:#fff;font-weight:800;opacity:.8;letter-spacing:.02em}
.chest-stage.open .cs-hint{opacity:0;transition:opacity .2s}
.chest-stage.ten .chest-big{width:230px}
.chest-stage.ev-garden .ch-lid{fill:#5DB04C}.chest-stage.ev-garden .ch-box{fill:#3F8F3E}.chest-stage.ev-garden .ch-band{stroke:#FFD86B}.chest-stage.ev-garden .ch-lock{fill:#FF9EC4}
@keyframes csShake{0%{transform:none}12%{transform:translateY(-2px) rotate(-3deg)}24%{transform:rotate(3deg)}36%{transform:translateY(-3px) rotate(-5deg)}48%{transform:rotate(5deg)}60%{transform:translateY(-5px) rotate(-7deg) scale(1.03)}72%{transform:rotate(7deg) scale(1.05)}84%{transform:translateY(-6px) rotate(-8deg) scale(1.07)}100%{transform:scale(1.1)}}
@keyframes csPop{0%{transform:scale(1.1)}40%{transform:scale(.92) translateY(6px)}100%{transform:scale(1)}}
@keyframes csLid{to{transform:translate(-14px,-58px) rotate(-32deg)}}
@keyframes csFlash{0%{opacity:0;transform:scale(.2)}25%{opacity:1}100%{opacity:0;transform:scale(3.2)}}
@keyframes csSpark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-170px) scale(1.2)}}
@keyframes csSpin{to{transform:scale(1) rotate(360deg)}}
.chest-res{animation:csIn .35s var(--out) both}
@keyframes csIn{from{opacity:0;transform:translateY(16px) scale(.97)}}
.chest-res h3 .ic{width:1.1em;height:1.1em;vertical-align:-.2em}
.chest-res .chest-btns .btn .ic{width:1.1em;height:1.1em}
.cs-bal{display:block;margin-top:8px;color:var(--ink-soft);font-weight:700}
@media (prefers-reduced-motion:reduce){ .chest-stage{display:none} .chest-res{animation:none} }
.chest-res .cs-foot{position:sticky;bottom:-18px;margin:0 -18px -18px;padding:12px 18px 14px;background:linear-gradient(transparent,var(--paper) 22%);z-index:2}

/* ---------- style themes, set 2 (2026-10-29): news, softui, y2k, jelly, origami, snowday, treasure, bauhaus (light); library, cyber (dark) ---------- */
:is(html[data-skin="news"],html[data-skin="softui"],html[data-skin="y2k"],html[data-skin="jelly"],html[data-skin="library"],html[data-skin="cyber"],html[data-skin="treasure"],html[data-skin="origami"],html[data-skin="snowday"],html[data-skin="bauhaus"]) body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page-grad)}
:is(html[data-skin="news"],html[data-skin="softui"],html[data-skin="y2k"],html[data-skin="jelly"],html[data-skin="library"],html[data-skin="cyber"],html[data-skin="treasure"],html[data-skin="origami"],html[data-skin="snowday"],html[data-skin="bauhaus"]) :is(.shop,.player){background:var(--page-grad)}

/* Morning paper: newsprint, serif headlines, black rules instead of boxes */
html[data-skin="news"][data-skin]{--paper:#F3EEE3;--paper-2:#E9E2D2;--card:#F8F4EA;--ink:#141414;--ink-soft:#3A3A3A;--muted:#6E6A62;--shadow:transparent;--dot:transparent;
  --a2:#BFD8C2;--a2-tint:#E7EFE4;--b1:#E9DDB8;--b1-tint:#F1EAD6;--b2:#E6C3C0;--b2-tint:#F1E2DE;--tomato:#141414;--lilac:#C9C0DC;--sky:#BFD2E2;--sky-tint:#E4ECF2;--on-color:#141414;--stage:#141414;--stage-text:#F3EEE3;
  --bw:1.5px;--radius:0px;--sh:none;--sh-lg:none;color-scheme:light;--page-grad:#F3EEE3}
html[data-skin="news"] :is(h1,h2,h3,.h1,.rot,.kicker){font-family:"Playfair Display","Bricolage Grotesque",serif;letter-spacing:-.01em}
html[data-skin="news"] :is(.nav,.tabbar,.btn,.shop-tabs button,.nav-coins,.tabbar a,.sh-prev,.tier-tag){border-radius:0!important}
html[data-skin="news"] :is(.lesson,.sh-item,.wotd,.profile){border-width:3px 0 1.5px;border-style:solid}
html[data-skin="news"] .kicker{font-style:italic;transform:none}
html[data-skin="news"] .btn-primary{background:#141414;color:#F3EEE3;font-family:"Playfair Display",serif;font-style:italic}
html[data-skin="news"] .rot{background-color:transparent!important;border:0;border-bottom:5px double #141414;border-radius:0;box-shadow:none;transform:none;font-style:italic}
html[data-skin="news"] .tabbar{border-width:3px 0 0}
html[data-skin="news"] .tabbar a.active{background:transparent;color:#141414;text-decoration:underline;text-underline-offset:4px}

/* Soft UI: grey neumorphism, raised and pressed, one blue accent */
html[data-skin="softui"][data-skin]{--paper:#E4E9F0;--paper-2:#DCE2EA;--card:#E4E9F0;--ink:#3D4657;--ink-soft:#5A6478;--muted:#8A94A8;--shadow:transparent;--dot:transparent;
  --a2:#9ED9C0;--a2-tint:#DDEBE8;--b1:#F2D88A;--b1-tint:#E9E6DC;--b2:#F2A8C0;--b2-tint:#EADDE5;--tomato:#4C7DFF;--lilac:#A8A0F0;--sky:#8EB8FF;--sky-tint:#DCE5F3;--on-color:#fff;--stage:#3D4657;--stage-text:#E4E9F0;
  --bw:0px;--radius:22px;--neu:7px 7px 14px #C2C9D4,-7px -7px 14px #FFFFFF;--neu-in:inset 4px 4px 8px #C2C9D4,inset -4px -4px 8px #FFFFFF;--sh:var(--neu);--sh-lg:var(--neu);color-scheme:light;--page-grad:#E4E9F0}
html[data-skin="softui"] :is(.nav,.tabbar,.lesson,.profile,.wotd,.tabs,.modal-card,.game,.stop-card,.me-card,.bubble,.sheet-card,.st-opt,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.pl-confirm-card,.try-bar,.btn,.shop-tabs button,.nav-coins){box-shadow:var(--neu)!important}
html[data-skin="softui"] :is(.tabbar a.active,.shop-tabs button.on,.sh-prev){box-shadow:var(--neu-in)!important;background:#E4E9F0;color:#4C7DFF}
html[data-skin="softui"] .btn-primary{background:#4C7DFF;color:#fff;box-shadow:6px 6px 12px #B6C0D8,-6px -6px 12px #fff!important}
html[data-skin="softui"] .rot{background-color:#E4E9F0!important;color:#4C7DFF;box-shadow:var(--neu-in);transform:none}

/* Y2K chrome: liquid metal bars and buttons, rainbow shine, a wide round font */
html[data-skin="y2k"][data-skin]{--paper:#EEF2FB;--paper-2:#E2E7F3;--card:#F7F9FD;--ink:#2A2A48;--ink-soft:#4A4A6A;--muted:#7C7E9C;--shadow:rgba(80,90,140,.22);--dot:transparent;
  --a2:#C2FF9A;--a2-tint:#EAF8E0;--b1:#FFE39A;--b1-tint:#FFF4D6;--b2:#FF9AF0;--b2-tint:#FCE6F8;--tomato:#B04BD9;--lilac:#C79BFF;--sky:#9AE8FF;--sky-tint:#E2F6FC;--on-color:#2A2A48;
  --bw:1.5px;--radius:26px;--chrome:linear-gradient(180deg,#FFFFFF,#DDE3EE 48%,#C9D1DF 52%,#F2F5FA);--sh:0 6px 14px rgba(80,90,140,.22);--sh-lg:0 10px 22px rgba(80,90,140,.25);color-scheme:light;
  --page-grad:radial-gradient(circle at 80% 14%,rgba(255,255,255,.95) 0 8px,transparent 9px),radial-gradient(circle at 84% 19%,rgba(255,255,255,.7) 0 4px,transparent 5px),radial-gradient(240px 240px at 8% 70%,rgba(255,180,240,.5),transparent 70%),radial-gradient(300px 300px at 95% 85%,rgba(150,230,255,.5),transparent 70%),linear-gradient(160deg,#E9F3FF,#F6E8FF 50%,#E5FFF8)}
html[data-skin="y2k"] :is(.nav,.tabbar,.btn:not(.btn-primary),.shop-tabs button,.nav-coins,.try-bar){background:var(--chrome);border-color:#9AA6BC!important;box-shadow:inset 0 1px 0 #fff,var(--sh)}
html[data-skin="y2k"] :is(.lesson,.profile,.wotd,.tabs,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.stop-card,.me-card,.game){border-color:#9AA6BC!important}
html[data-skin="y2k"] :is(h1,h2,h3,.h1,.rot){font-family:"Unbounded","Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.03em}
html[data-skin="y2k"] .h1{font-size:clamp(2.4rem,7vw,6rem)}
html[data-skin="y2k"] .btn-primary{background:linear-gradient(90deg,#FF9AF0,#9AE8FF,#C2FF9A);color:#2A2A48;border-color:#fff;box-shadow:0 6px 16px rgba(176,75,217,.35)}
html[data-skin="y2k"] .rot{background:linear-gradient(90deg,#FF9AF0,#9AE8FF,#C2FF9A,#FFE39A,#FF9AF0);background-color:transparent!important;color:#2A2A48;border-color:#fff;border-radius:999px;box-shadow:0 0 18px rgba(255,154,240,.6)}
html[data-skin="y2k"] .tabbar a.active{background:linear-gradient(90deg,#FF9AF0,#9AE8FF);color:#2A2A48}

/* Jelly: see-through candy colours with a glossy band and a squishy wobble of corners */
html[data-skin="jelly"][data-skin]{--paper:#FFF5FB;--paper-2:#FFE6F3;--card:#FFFFFF;--ink:#5A2E55;--ink-soft:#7A4A74;--muted:#A57C9F;--shadow:transparent;--dot:transparent;
  --a2:#A8EC7A;--a2-tint:#EDFBE2;--b1:#FFD45A;--b1-tint:#FFF4D2;--b2:#FF8CC8;--b2-tint:#FFE4F2;--tomato:#8C50F0;--lilac:#BE8CFF;--sky:#78DCFF;--sky-tint:#E2F7FF;--on-color:#fff;
  --bw:0px;--radius:30px 26px 32px 24px/26px 32px 24px 30px;--gel:inset 0 10px 0 rgba(255,255,255,.4),inset 0 -6px 12px rgba(120,20,90,.18),0 10px 20px rgba(255,90,170,.2);--sh:var(--gel);--sh-lg:var(--gel);color-scheme:light;
  --page-grad:radial-gradient(circle at 18% 12%,#FFD6EA 0 60px,transparent 61px),radial-gradient(circle at 90% 30%,#D2F5FF 0 46px,transparent 47px),radial-gradient(circle at 10% 70%,#E7FFD2 0 40px,transparent 41px),radial-gradient(circle at 80% 86%,#FFF0C2 0 52px,transparent 53px),#FFF5FB}
html[data-skin="jelly"] :is(.nav,.tabbar,.lesson,.profile,.wotd,.tabs,.modal-card,.game,.stop-card,.me-card,.bubble,.sheet-card,.st-opt,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.try-bar,.btn,.shop-tabs button,.nav-coins){box-shadow:var(--gel)!important}
html[data-skin="jelly"] .nav{background:linear-gradient(180deg,rgba(255,170,215,.75),rgba(255,120,190,.85));color:#fff}
html[data-skin="jelly"] .tabbar{background:linear-gradient(180deg,rgba(185,245,140,.8),rgba(120,210,80,.9))}
html[data-skin="jelly"] .tabbar a{color:#2E5A12}
html[data-skin="jelly"] .lesson:nth-child(3n+1){background:linear-gradient(180deg,#E8F8FF,#C8EEFF)}html[data-skin="jelly"] .lesson:nth-child(3n+2){background:linear-gradient(180deg,#FFF1F8,#FFD6EC)}html[data-skin="jelly"] .lesson:nth-child(3n){background:linear-gradient(180deg,#FFFBE6,#FFEDB0)}
html[data-skin="jelly"] :is(h1,h2,h3,.h1,.rot){font-family:"Baloo 2","Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.01em}
html[data-skin="jelly"] .btn-primary{background:linear-gradient(180deg,rgba(190,140,255,.85),rgba(140,80,240,.95));color:#fff}
html[data-skin="jelly"] .rot{background:linear-gradient(180deg,rgba(255,220,90,.85),rgba(255,170,20,.95));background-color:transparent!important;color:#fff;box-shadow:inset 0 8px 0 rgba(255,255,255,.4),inset 0 -5px 10px rgba(180,90,0,.35);border-radius:.3em .25em .35em .2em}
html[data-skin="jelly"] .tabbar a.active{background:rgba(255,255,255,.55);color:#2E5A12}

/* Old library (always dark): dark wood, green leather with brass edges, a bookish serif */
html[data-skin="library"][data-skin]{--paper:#3E2616;--paper-2:#4A2E1C;--card:#2E4A36;--ink:#F4E7CC;--ink-soft:#E8D7B4;--muted:#BFAE8C;--shadow:#2A180D;--dot:transparent;
  --a2:#8FCB98;--a2-tint:#244030;--b1:#E9C978;--b1-tint:#4A3A1E;--b2:#D97A86;--b2-tint:#4A2228;--tomato:#E9C978;--lilac:#B9A6E0;--sky:#8FBFD9;--sky-tint:#22384A;--on-color:#2A180D;--stage:#22140B;--stage-text:#F4E7CC;
  --bw:2px;--radius:10px;--sh:0 6px 0 #2A180D;--sh-lg:0 8px 0 #2A180D;color-scheme:dark;
  --page-grad:repeating-linear-gradient(90deg,#4A2C1A 0 34px,#55331F 34px 36px,#4E2F1C 36px 70px),#4A2C1A}
html[data-skin="library"] :is(.nav,.tabbar,.lesson,.profile,.wotd,.tabs,.modal-card,.game,.stop-card,.me-card,.bubble,.sheet-card,.st-opt,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.pl-confirm-card,.try-bar){border-color:#C9A04E!important;box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 4px rgba(201,160,78,.55),var(--sh)}
html[data-skin="library"] :is(h1,h2,h3,.h1,.rot,.kicker){font-family:"Noto Serif Display","Bricolage Grotesque",serif;letter-spacing:-.01em}
html[data-skin="library"] .kicker{font-style:italic;color:#E9C978}
html[data-skin="library"] .btn-primary{background:linear-gradient(180deg,#E9C978,#B88A35);color:#2A180D;border-color:#6B4A1A}
html[data-skin="library"] .btn:not(.btn-primary){border-color:#C9A04E}
html[data-skin="library"] .rot{background-color:#7A1F2B!important;color:#F4E7CC;border-color:#C9A04E;box-shadow:0 6px 0 #2A180D}
html[data-skin="library"] .tabbar a.active{background:#C9A04E;color:#2A180D}

/* Cyberpunk (always dark): black, neon magenta and cyan, cut corners, scanlines, a tech font */
html[data-skin="cyber"][data-skin]{--paper:#07060F;--paper-2:#120A24;--card:#110C22;--ink:#E8F7FF;--ink-soft:#B5CCDA;--muted:#7F93A3;--shadow:transparent;--dot:transparent;
  --a2:#00FFB2;--a2-tint:#0A2A26;--b1:#FFE600;--b1-tint:#2A2600;--b2:#FF2BD6;--b2-tint:#2E0A2A;--tomato:#FF2BD6;--lilac:#9B6BFF;--sky:#00FFF0;--sky-tint:#062A30;--on-color:#07060F;--stage:#030208;--stage-text:#E8F7FF;
  --bw:1.5px;--radius:0px;--cut:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));--sh:0 0 14px rgba(255,43,214,.35);--sh-lg:0 0 22px rgba(255,43,214,.45);color-scheme:dark;
  --page-grad:repeating-linear-gradient(transparent 0 3px,rgba(0,255,240,.04) 3px 4px),linear-gradient(180deg,#07060F,#120A24)}
html[data-skin="cyber"] :is(.lesson,.sh-item,.wotd,.profile,.chest-hero,.ev-banner,.game,.word-card,.fun-card){border-color:#00FFF0!important;clip-path:var(--cut);box-shadow:none}
html[data-skin="cyber"] :is(.nav,.tabbar,.try-bar,.sheet-card,.modal-card,.pl-confirm-card){border-color:#FF2BD6!important;border-radius:0!important}
html[data-skin="cyber"] :is(.btn,.shop-tabs button,.nav-coins,.tabbar a,.sh-prev,.tier-tag){border-radius:0!important}
html[data-skin="cyber"] :is(h1,h2,h3,.h1,.rot,.kicker){font-family:"Chakra Petch","Bricolage Grotesque",sans-serif;letter-spacing:.01em}
html[data-skin="cyber"] .h1{text-transform:uppercase;text-shadow:2px 0 #FF2BD6,-2px 0 #00FFF0}
html[data-skin="cyber"] .kicker{color:#00FFF0;transform:none}
html[data-skin="cyber"] .btn-primary{background:#FF2BD6;color:#07060F;border-color:#FF2BD6;clip-path:polygon(0 0,100% 0,100% 70%,92% 100%,0 100%);box-shadow:none}
html[data-skin="cyber"] .btn:not(.btn-primary){border-color:#00FFF0;color:#00FFF0}
html[data-skin="cyber"] .rot{background-color:#FFE600!important;color:#07060F;border:0;border-radius:0;box-shadow:none;text-shadow:none;clip-path:polygon(0 0,100% 0,100% 70%,94% 100%,0 100%)}
html[data-skin="cyber"] .tabbar a.active{background:transparent;color:#FFE600;box-shadow:inset 0 -3px 0 #FFE600}

/* Treasure map: parchment with burnt edges, dashed routes, a red X, a swashy title */
html[data-skin="treasure"][data-skin]{--paper:#EBD4A4;--paper-2:#E2C58C;--card:#F6E7C4;--ink:#4A2F14;--ink-soft:#6B4A26;--muted:#8F6E46;--shadow:rgba(110,60,20,.3);--dot:transparent;
  --a2:#9DBE7A;--a2-tint:#E4E2BC;--b1:#E8B85A;--b1-tint:#F1DDAE;--b2:#D98A6A;--b2-tint:#EFD2B8;--tomato:#B33A26;--lilac:#B39BC8;--sky:#8FB8C8;--sky-tint:#DDE0CC;--on-color:#F8E8C4;
  --bw:2px;--radius:12px;--sh:0 4px 0 rgba(110,60,20,.3);--sh-lg:0 6px 0 rgba(110,60,20,.3);color-scheme:light;
  --page-grad:radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(120,70,20,.4) 100%),linear-gradient(160deg,#F2DFB4,#E6C98E 60%,#DDBB7C)}
html[data-skin="treasure"] :is(.lesson,.profile,.wotd,.tabs,.sh-item,.chest-hero,.ev-banner,.game,.word-card,.fun-card,.stop-card,.me-card,.btn:not(.btn-primary),.nav,.tabbar){border-style:dashed;border-color:#7A4E22!important}
html[data-skin="treasure"] :is(h1,h2,h3,.h1,.rot,.kicker){font-family:"Lobster","Bricolage Grotesque",cursive;font-weight:400;letter-spacing:0}
html[data-skin="treasure"] .kicker{color:#B33A26}
html[data-skin="treasure"] .btn-primary{background:#B33A26;color:#F8E8C4;border-color:#6E2216;box-shadow:0 4px 0 #6E2216}
html[data-skin="treasure"] .rot{background-color:transparent!important;color:#B33A26;border:0;box-shadow:none;padding-right:.5em}
html[data-skin="treasure"] .rot::after{content:"✕";position:absolute;right:.02em;top:-.12em;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.55em;color:#B33A26}
html[data-skin="treasure"] .tabbar a.active{background:rgba(179,58,38,.14);color:#B33A26}

/* Origami: folded paper facets, cards with a coloured folded corner, no rounding */
html[data-skin="origami"][data-skin]{--paper:#FFF1EA;--paper-2:#FFE3D6;--card:#FFFFFF;--ink:#3B2A40;--ink-soft:#5C4A62;--muted:#8E7C92;--shadow:transparent;--dot:transparent;
  --a2:#7FD3B8;--a2-tint:#E2F5EE;--b1:#FFD27A;--b1-tint:#FFF2D6;--b2:#FF9F7A;--b2-tint:#FFE6DC;--tomato:#FF7A55;--lilac:#8C78F0;--sky:#7FB8F0;--sky-tint:#E2EEFB;--on-color:#fff;
  --bw:0px;--radius:0px;--sh:0 6px 14px rgba(140,90,80,.14);--sh-lg:0 10px 20px rgba(140,90,80,.16);--fold:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);color-scheme:light;
  --page-grad:linear-gradient(135deg,#FFE3D6 25%,transparent 25%) 0 0/60px 60px,linear-gradient(225deg,#FFD0BF 25%,transparent 25%) 0 0/60px 60px,linear-gradient(315deg,#FFE9DF 25%,transparent 25%) 0 0/60px 60px,linear-gradient(45deg,#FFD9CB 25%,#FFF1EA 25%) 0 0/60px 60px}
html[data-skin="origami"] :is(.lesson,.sh-item,.wotd,.profile,.chest-hero,.ev-banner,.game,.word-card,.fun-card){clip-path:var(--fold);background-image:linear-gradient(225deg,var(--lilac) 0 13px,transparent 13px)}
html[data-skin="origami"] .lesson:nth-child(3n+2){background-image:linear-gradient(225deg,#FF9F7A 0 13px,transparent 13px)}html[data-skin="origami"] .lesson:nth-child(3n){background-image:linear-gradient(225deg,#7FD3B8 0 13px,transparent 13px)}
html[data-skin="origami"] :is(.nav,.tabbar,.btn,.shop-tabs button,.nav-coins,.tabbar a,.sh-prev,.tier-tag){border-radius:0!important}
html[data-skin="origami"] :is(h1,h2,h3,.h1,.rot){font-family:"Nunito","Bricolage Grotesque",sans-serif;font-weight:900}
html[data-skin="origami"] .btn-primary{background:linear-gradient(135deg,#FF9F7A 50%,#FF7A55 50%);color:#fff}
html[data-skin="origami"] .rot{background:linear-gradient(135deg,#8C78F0 50%,#7360E0 50%);background-color:transparent!important;color:#fff;border-radius:0;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px))}
html[data-skin="origami"] .tabbar a.active{background:linear-gradient(135deg,#FFE0D3 50%,#FFD0BF 50%);color:#3B2A40}

/* Snow day: icy sky, snowflakes and drifts, a knitted bar, a Christmas-red headline */
html[data-skin="snowday"][data-skin]{--paper:#E3F1FB;--paper-2:#D2E7F6;--card:#FFFFFF;--ink:#20405E;--ink-soft:#3E5E7C;--muted:#7090AC;--shadow:#A7CDEA;--dot:transparent;
  --a2:#8FD9C0;--a2-tint:#E0F5EE;--b1:#FFD86B;--b1-tint:#FFF4D2;--b2:#FF8FA3;--b2-tint:#FFE4EA;--tomato:#E8405A;--lilac:#B3A6F0;--sky:#7FB8E8;--sky-tint:#E0EEF9;--on-color:#fff;
  --bw:2px;--radius:20px;--sh:0 6px 0 #A7CDEA;--sh-lg:0 8px 0 #A7CDEA;color-scheme:light;
  --page-grad:radial-gradient(circle at 12% 14%,#fff 2px,transparent 2.6px) 0 0/220px 200px,radial-gradient(circle at 70% 40%,#fff 3px,transparent 3.6px) 0 0/220px 200px,radial-gradient(circle at 40% 80%,#fff 1.6px,transparent 2.2px) 0 0/220px 200px,radial-gradient(circle at 90% 90%,#fff 2.4px,transparent 3px) 0 0/220px 200px,radial-gradient(ellipse 140% 22% at 50% 104%,#fff 60%,transparent 61%),linear-gradient(180deg,#B9DDF7,#E3F1FB 70%)}
html[data-skin="snowday"] :is(.nav,.lesson,.profile,.wotd,.tabs,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.game){border-color:#fff!important}
html[data-skin="snowday"] :is(h1,h2,h3,.h1,.rot){font-family:"Baloo 2","Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.01em}
html[data-skin="snowday"] .btn-primary{background:#2E6FB0;color:#fff;border-color:#1C4D80;box-shadow:0 5px 0 #1C4D80}
html[data-skin="snowday"] .rot{background-color:#E8405A!important;color:#fff;border-color:#fff;box-shadow:0 6px 0 #A82A3E;overflow:visible}
html[data-skin="snowday"] .rot::before{content:"";position:absolute;left:6px;right:6px;top:-.16em;height:.22em;background:radial-gradient(circle at 50% 60%,#fff 45%,transparent 48%) 0 0/.3em .22em repeat-x;pointer-events:none}
html[data-skin="snowday"] .tabbar{background:linear-gradient(transparent 5px,#E8405A 5px 9px,transparent 9px),repeating-linear-gradient(90deg,#fff 0 6px,#F0F7FD 6px 12px);border-color:#fff}
html[data-skin="snowday"] .tabbar a.active{background:#E8405A;color:#fff}

/* Bauhaus: red, blue, yellow and black geometry; straight frames, no shadows */
html[data-skin="bauhaus"][data-skin]{--paper:#EFE9DC;--paper-2:#E5DDCB;--card:#FAF6EC;--ink:#111111;--ink-soft:#333333;--muted:#6B665C;--shadow:transparent;--dot:transparent;
  --a2:#2D5BD7;--a2-tint:#DCE3F5;--b1:#F2C12E;--b1-tint:#F6E9BE;--b2:#E63B2E;--b2-tint:#F5D9D3;--tomato:#E63B2E;--lilac:#2D5BD7;--sky:#2D5BD7;--sky-tint:#DCE3F5;--on-color:#FAF6EC;
  --bw:2.5px;--radius:0px;--sh:none;--sh-lg:none;color-scheme:light;
  --page-grad:radial-gradient(circle at 100% 0,#E63B2E 0 150px,transparent 151px),radial-gradient(circle at 0 100%,#2D5BD7 0 190px,transparent 191px),radial-gradient(circle at 92% 88%,#F2C12E 0 46px,transparent 47px),#EFE9DC}
html[data-skin="bauhaus"] :is(.nav,.tabbar,.shop-tabs button,.nav-coins,.tabbar a,.sh-prev,.tier-tag){border-radius:0!important}
html[data-skin="bauhaus"] .btn:not(.btn-primary){border-radius:999px}
html[data-skin="bauhaus"] .btn-primary{background:#E63B2E;color:#FAF6EC;border-radius:0}
html[data-skin="bauhaus"] :is(h1,h2,h3,.h1,.rot,.kicker){font-family:"Space Grotesk","Bricolage Grotesque",sans-serif;letter-spacing:-.03em}
html[data-skin="bauhaus"] .kicker{transform:none;text-transform:uppercase;letter-spacing:.14em;font-size:1rem;font-weight:700;color:#111}
html[data-skin="bauhaus"] .rot{background-color:#2D5BD7!important;color:#FAF6EC;border:0;border-radius:0 .6em .6em 0;box-shadow:none;transform:none}
html[data-skin="bauhaus"] .tabbar a.active{background:#111;color:#FAF6EC}
/* shop previews (set 2) */
.sh-skin.g-news{background:repeating-linear-gradient(#F3EEE3 0 10px,#C9C2B2 10px 11px),#F3EEE3}.sh-skin.g-news i{border-radius:0!important}
.sh-skin.g-softui{background:#E4E9F0}.sh-skin.g-softui i{border:0!important;box-shadow:4px 4px 8px #C2C9D4,-4px -4px 8px #fff}
.sh-skin.g-y2k{background:linear-gradient(160deg,#E9F3FF,#F6E8FF 50%,#E5FFF8)}.sh-skin.g-y2k i{border-color:#9AA6BC!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.8)}
.sh-skin.g-jelly{background:#FFF5FB}.sh-skin.g-jelly i{border:0!important;box-shadow:inset 0 6px 0 rgba(255,255,255,.45),inset 0 -4px 8px rgba(120,20,90,.2)}
.sh-skin.g-library{background:repeating-linear-gradient(90deg,#4A2C1A 0 18px,#55331F 18px 19px)}.sh-skin.g-library i{border-color:#C9A04E!important}
.sh-skin.g-cyber{background:repeating-linear-gradient(transparent 0 3px,rgba(0,255,240,.08) 3px 4px),#07060F}.sh-skin.g-cyber i{border-radius:0!important;border-color:#00FFF0!important}
.sh-skin.g-treasure{background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(120,70,20,.45) 100%),#E9CF97}.sh-skin.g-treasure i{border-style:dashed!important;border-color:#7A4E22!important}
.sh-skin.g-origami{background:linear-gradient(135deg,#FFE3D6 25%,transparent 25%) 0 0/24px 24px,linear-gradient(45deg,#FFD9CB 25%,#FFF1EA 25%) 0 0/24px 24px}.sh-skin.g-origami i{border:0!important;border-radius:0!important;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.sh-skin.g-snowday{background:radial-gradient(circle at 20% 30%,#fff 2px,transparent 2.6px),radial-gradient(circle at 70% 20%,#fff 2.4px,transparent 3px),radial-gradient(circle at 50% 70%,#fff 1.8px,transparent 2.4px),linear-gradient(180deg,#B9DDF7,#E3F1FB)}
.sh-skin.g-bauhaus{background:radial-gradient(circle at 100% 0,#E63B2E 0 26px,transparent 27px),radial-gradient(circle at 0 100%,#2D5BD7 0 30px,transparent 31px),#EFE9DC}.sh-skin.g-bauhaus i{border-radius:0!important}
html[data-skin="library"] .rot,html[data-skin="news"] .rot{height:1.2em}html[data-skin="library"] .rot-word,html[data-skin="news"] .rot-word{line-height:1.16}

/* ---------- the Halloween event (halloween.js, 2026-10-29): themes, bars, its shop tab, hero, banner, chest and the bats in the hero ---------- */
.pet4 .mo-ridge{fill:none;stroke:var(--d);stroke-width:3;stroke-linecap:round;opacity:.75}
/* Pumpkin patch (light): warm cream, little pumpkins and leaves, a wooden fence of a bar */
html[data-skin="pumpkinpatch"][data-skin]{--paper:#FFF1DE;--paper-2:#FBE2C2;--card:#FFFAF2;--ink:#4A2612;--ink-soft:#6E3E22;--muted:#9A6E52;--shadow:#C85A12;--dot:transparent;
  --a2:#8DBF5A;--a2-tint:#E8F2D8;--b1:#FFC94D;--b1-tint:#FFF0C9;--b2:#FF8A2A;--b2-tint:#FFE2C8;--tomato:#FF7A1F;--lilac:#A98BD9;--sky:#8FB8D9;--sky-tint:#E2ECF3;--on-color:#fff;
  --bw:2.5px;--radius:20px;--sh:4px 5px 0 #C85A12;--sh-lg:6px 7px 0 #C85A12;color-scheme:light;
  --page-grad:radial-gradient(circle at 22px 24px,rgba(255,138,42,.5) 7px,transparent 7.6px) 0 0/140px 130px,radial-gradient(circle at 16px 24px,rgba(255,138,42,.5) 5px,transparent 5.6px) 0 0/140px 130px,radial-gradient(circle at 28px 24px,rgba(255,138,42,.5) 5px,transparent 5.6px) 0 0/140px 130px,radial-gradient(ellipse 6px 3px at 96px 86px,rgba(107,142,58,.45) 96%,transparent) 0 0/140px 130px,linear-gradient(180deg,#FFE9CC,#FFF4E6 60%,#FBE2C2)}
/* Haunted night (always dark): deep violet sky, a big moon, cobwebs from a corner, glowing eyes in the dark */
html[data-skin="haunted"][data-skin]{--paper:#120A22;--paper-2:#1C1034;--card:#211540;--ink:#F3ECFF;--ink-soft:#CFC2F0;--muted:#9A8CC4;--shadow:#B46BFF;--dot:transparent;
  --a2:#7CF0D0;--a2-tint:#14303A;--b1:#FF8A2A;--b1-tint:#3A2314;--b2:#B46BFF;--b2-tint:#2E1A4A;--tomato:#FF8A2A;--lilac:#B46BFF;--sky:#7CF0D0;--sky-tint:#14303A;--on-color:#120A22;--stage:#0A0614;--stage-text:#F3ECFF;
  --bw:2px;--radius:18px;--sh:0 0 16px rgba(180,107,255,.4);--sh-lg:0 0 24px rgba(180,107,255,.5);color-scheme:dark;
  --page-grad:radial-gradient(circle at 84% 12%,#FFF3C4 0 46px,rgba(255,224,122,.35) 47px 64px,transparent 90px),radial-gradient(circle at 12% 40%,#FFE07A 1.6px,transparent 2.2px),radial-gradient(circle at 15% 40%,#FFE07A 1.6px,transparent 2.2px),radial-gradient(circle at 70% 70%,#7CF0D0 1.6px,transparent 2.2px),radial-gradient(circle at 73% 70%,#7CF0D0 1.6px,transparent 2.2px),repeating-conic-gradient(from 90deg at 0 0,rgba(255,255,255,.08) 0 1deg,transparent 1deg 15deg),radial-gradient(80% 50% at 50% 110%,rgba(255,138,42,.25),transparent 70%),linear-gradient(180deg,#0D0719,#1C1034)}
:is(html[data-skin="pumpkinpatch"],html[data-skin="haunted"]) body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page-grad)}
:is(html[data-skin="pumpkinpatch"],html[data-skin="haunted"]) :is(.shop,.player){background:var(--page-grad)}
:is(html[data-skin="pumpkinpatch"],html[data-skin="haunted"]) :is(h1,h2,h3,.h1,.rot){font-family:"Baloo 2","Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.01em}
html[data-skin="pumpkinpatch"] .btn-primary{background:linear-gradient(135deg,#FFB04D,#FF7A1F);color:#fff}
html[data-skin="pumpkinpatch"] .rot{background-color:#FF8A2A!important;color:#fff;box-shadow:4px 5px 0 #C85A12}
html[data-skin="pumpkinpatch"] .tabbar,html[data-skin="pumpkinpatch"] .nav{background:repeating-linear-gradient(90deg,#B9824E 0 24px,#A8713F 24px 26px);border-color:#6B3F1E;color:#FFF1DC}
html[data-skin="pumpkinpatch"] .tabbar a,html[data-skin="pumpkinpatch"] .nav a{color:#FFF1DC}
html[data-skin="pumpkinpatch"] .tabbar a.active{background:#FF8A2A;color:#fff}
html[data-skin="haunted"] :is(.nav,.tabbar,.lesson,.profile,.wotd,.tabs,.modal-card,.game,.stop-card,.me-card,.bubble,.sheet-card,.st-opt,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.pl-confirm-card,.try-bar){border-color:rgba(180,107,255,.6)!important}
html[data-skin="haunted"] .btn-primary{background:linear-gradient(135deg,#FFB04D,#FF7A1F);color:#120A22;border-color:#FF8A2A;box-shadow:0 0 16px rgba(255,138,42,.55)}
html[data-skin="haunted"] .rot{background-color:#B46BFF!important;color:#120A22;border-color:#E4CCFF;box-shadow:0 0 22px rgba(180,107,255,.7)}
html[data-skin="haunted"] .tabbar a.active{background:#FF8A2A;color:#120A22}
.sh-skin.g-pumpkinpatch{background:radial-gradient(circle at 12px 14px,#FF8A2A 6px,transparent 6.6px) 0 0/34px 32px,linear-gradient(180deg,#FFE9CC,#FFF4E6)}
.sh-skin.g-haunted{background:radial-gradient(circle at 82% 22%,#FFF3C4 0 12px,transparent 13px),radial-gradient(circle at 20% 70%,#FFE07A 1.4px,transparent 2px),radial-gradient(circle at 26% 70%,#FFE07A 1.4px,transparent 2px),linear-gradient(180deg,#0D0719,#2A1650)}
/* bars: Cobweb (threads over a dusky bar) and Candlelight (a warm glow, still) */
html[data-bar="cobweb"] .tabbar,html[data-bar="cobweb"] .nav{background:repeating-conic-gradient(from 0deg at 0 0,rgba(255,255,255,.22) 0 1deg,transparent 1deg 12deg),repeating-conic-gradient(from 270deg at 100% 0,rgba(255,255,255,.22) 0 1deg,transparent 1deg 12deg),linear-gradient(180deg,#3A2950,#241634);border:2px solid #9C92B8;color:#EEE8FF;box-shadow:0 6px 0 #140C1A}
html[data-bar="cobweb"] .tabbar a,html[data-bar="cobweb"] .nav .logo,html[data-bar="cobweb"] .nav-links a{color:#EEE8FF}
html[data-bar="cobweb"] .tabbar a.active{background:#E9E4F5;color:#241634}
html[data-bar="candlelight"] .tabbar,html[data-bar="candlelight"] .nav{background:radial-gradient(120% 140% at 50% 120%,rgba(255,170,60,.55),transparent 60%),linear-gradient(180deg,#2A1A10,#1A0F08);border:2px solid #FFB04D;color:#FFE9C2;box-shadow:0 0 22px rgba(255,160,60,.55),inset 0 0 18px rgba(255,170,60,.25)}
html[data-bar="candlelight"] .tabbar a,html[data-bar="candlelight"] .nav .logo,html[data-bar="candlelight"] .nav-links a{color:#FFE9C2}
html[data-bar="candlelight"] .tabbar a.active{background:radial-gradient(circle at 50% 70%,#FFE07A,#FF9A2A);color:#2A1A10;box-shadow:0 0 16px rgba(255,190,80,.8)}
.sh-bar.bar-cobweb{background:repeating-conic-gradient(from 0deg at 0 0,rgba(255,255,255,.3) 0 1deg,transparent 1deg 12deg),linear-gradient(180deg,#3A2950,#241634);border:2px solid #9C92B8;color:#E9E4F5}
.sh-bar.bar-candlelight{background:radial-gradient(120% 140% at 50% 120%,rgba(255,170,60,.6),transparent 60%),#1A0F08;border:2px solid #FFB04D;box-shadow:0 0 12px rgba(255,160,60,.6);color:#FFB04D}
/* the shop tab, hero, banner and chest of the event */
.shop-tabs button.ev[data-tab="halloween"]{border-color:#C85A12;color:color-mix(in srgb,#B04A0C 55%,var(--ink));background:color-mix(in srgb,#FF8A2A 16%,var(--card))}
.shop-tabs button.ev.on[data-tab="halloween"]{background:linear-gradient(135deg,#FFB04D,#FF7A1F);color:#2A1206}
.ev-hero.ev-halloween,.ev-banner.ev-halloween{color:#F3ECFF;background:radial-gradient(circle at 90% 22%,#FFF3C4 0 20px,rgba(255,224,122,.3) 21px 30px,transparent 44px),repeating-conic-gradient(from 90deg at 0 0,rgba(255,255,255,.12) 0 1deg,transparent 1deg 14deg),radial-gradient(70% 90% at 30% 120%,rgba(255,138,42,.45),transparent 70%),linear-gradient(135deg,#2A1650,#120A22)}
.ev-hero.ev-halloween p,.ev-banner.ev-halloween p,.ev-hero.ev-halloween .sh-need{color:#D9CCF5}
.ev-banner.ev-halloween .ev-x{background:#211540;color:#F3ECFF;border-color:#F3ECFF}
.ev-hero.ev-halloween .btn:not(.btn-primary)[disabled]{background:#2A1C44;color:#CFC2F0;border-color:#9A8CC4}
.ev-halloween .ev-kicker{background:#FF7A1F}
.chest-stage.ev-halloween .ch-lid{fill:#5E3A8C}.chest-stage.ev-halloween .ch-box{fill:#3E2466}.chest-stage.ev-halloween .ch-band{stroke:#FF8A2A}.chest-stage.ev-halloween .ch-lock{fill:#7CF0D0}
/* bats flapping up across the hero, little pumpkins drifting down, eyes glowing in the dark */
.ev-leaves.ev-halloween span.bt{top:auto;bottom:-30px;width:34px;height:16px;border-radius:0;background:color-mix(in srgb,var(--ink) 70%,transparent);opacity:.7;clip-path:polygon(50% 40%,58% 20%,72% 34%,100% 0,92% 60%,74% 56%,62% 100%,50% 70%,38% 100%,26% 56%,8% 60%,0 0,28% 34%,42% 20%);animation:evBat var(--t) linear var(--d) infinite}
.ev-leaves.ev-halloween span.pk{width:15px;height:13px;border-radius:50%;background:radial-gradient(circle at 50% 0,#6B8E3A 2px,transparent 2.6px),#FF8A2A;box-shadow:inset -3px 0 0 #E86F1C,inset 3px 0 0 #E86F1C}
.ev-leaves.ev-halloween b{background:#B46BFF;box-shadow:0 0 10px 4px rgba(180,107,255,.55)}
@keyframes evBat{0%{transform:translate3d(0,0,0) scaleY(1)}10%{transform:translate3d(14px,-10vh,0) scaleY(.4)}20%{transform:translate3d(30px,-20vh,0) scaleY(1)}30%{transform:translate3d(20px,-30vh,0) scaleY(.4)}40%{transform:translate3d(-6px,-40vh,0) scaleY(1)}50%{transform:translate3d(-20px,-50vh,0) scaleY(.4)}60%{transform:translate3d(-8px,-60vh,0) scaleY(1)}70%{transform:translate3d(16px,-70vh,0) scaleY(.4)}80%{transform:translate3d(34px,-80vh,0) scaleY(1)}90%{transform:translate3d(26px,-92vh,0) scaleY(.4)}100%{transform:translate3d(10px,-112vh,0) scaleY(1)}}
.ev-tag.ev-halloween{background:#FF7A1F}

/* ---------- the hero once you have started (home.js heroMe): a greeting, one line about you, the next lesson, today, your stats ---------- */
.hero.me .h1,.hero.me .lede,.hero.me .hero-text>.stats,.hero.me #heroNext{display:none}
.hero.me .kicker{font-size:1.6rem}
.hero-me{display:flex;flex-direction:column;gap:16px;margin:6px 0 22px}
.hm-h1{margin:0;font-size:clamp(2.1rem,5.2vw,4.1rem);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.hm-pill{display:inline-flex;align-items:center;gap:.12em;margin-top:.12em;padding:0 .22em;border:var(--bw) solid var(--ink);border-radius:.16em;background:var(--b1);color:var(--on-color);box-shadow:5px 5px 0 var(--shadow);transform:rotate(-2deg);white-space:nowrap}
.hm-pill .ic{width:.8em;height:.8em}
.hm-next{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;width:100%;max-width:560px;padding:14px 16px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--radius);box-shadow:var(--sh);transition:transform .25s var(--spring)}
.hm-next:hover{transform:translateY(-3px)}.hm-next:active{transform:translateY(1px)}
.hm-emo{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--b1-tint);border:2px solid var(--ink);font-size:30px}
.hm-emo .ic,.hm-emo img{width:34px;height:34px}
.hm-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.hm-info small{font-weight:700;color:var(--ink-soft);font-size:.82rem}
.hm-info b{font-size:1.12rem;line-height:1.2}
.hm-bar{display:block;height:9px;margin-top:4px;border-radius:9px;background:var(--paper-2);border:1.5px solid var(--ink);overflow:hidden}
.hm-bar i{display:block;height:100%;background:var(--pc,var(--a2))}
.hm-go{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--tomato);color:var(--on-color);border:2px solid var(--ink)}
.hm-go .ic{width:22px;height:22px}
.hm-chips{display:flex;flex-wrap:wrap;gap:8px}
.hm-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:2px solid var(--ink);background:var(--card);font-weight:700;font-size:.9rem}
.hm-chip .ic{width:1.1em;height:1.1em}
.hm-chip.due{background:var(--sky-tint)}
.hm-stats{margin-top:6px}
.hm-stats b{display:flex;align-items:center;gap:4px}.hm-stats b .ic{width:.8em;height:.8em}
@media (max-width:680px){ .hm-next{padding:12px} .hm-emo{width:48px;height:48px} .hm-go{width:40px;height:40px} .hero.me .kicker{font-size:1.35rem} }
.hero.me .glyphs{opacity:.4}
@media (max-width:680px){ .hero.me .glyphs{display:none} }
.hero.me.has-card #heroGo{display:none}

/* ---------- account: log in / create account tabs (core.js renderAccount) ---------- */
.acct-modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:12px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2)}
.acct-modes button{font:inherit;font-weight:800;font-size:.9rem;padding:8px 6px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer}
.acct-modes button.on{background:var(--ink);color:var(--paper)}
.acct-board{width:100%;justify-content:center;margin:4px 0 14px}
.acct-board .ic{width:1.2em;height:1.2em}
/* ---------- the leaderboard (core.js openBoard) ---------- */
.board{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb,#0B0A12 60%,transparent);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.board.open{opacity:1;visibility:visible;transition:opacity .25s}
.board-card{display:flex;flex-direction:column;width:min(520px,100%);max-height:min(720px,calc(100svh - 32px));background:var(--paper);border:var(--bw) solid var(--ink);border-radius:26px;box-shadow:var(--sh-lg);overflow:hidden;transform:translateY(16px) scale(.98);transition:transform .35s var(--out)}
.board.open .board-card{transform:none}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 6px 18px}
.board-top h3{margin:0;font-size:1.35rem;display:flex;align-items:center;gap:8px}
.board-top h3 .ic{width:1.3em;height:1.3em}
.board-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:4px 16px 8px;padding:4px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2)}
.board-tabs button{font:inherit;font-weight:800;padding:8px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer}
.board-tabs button.on{background:var(--ink);color:var(--paper)}
.board-body{overflow-y:auto;overscroll-behavior:contain;padding:0 16px 16px}
.board-note{margin:4px 2px 10px;color:var(--ink-soft);font-weight:600;font-size:.88rem;text-align:center}
.board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.br{display:grid;grid-template-columns:34px 52px 1fr auto;gap:10px;align-items:center;padding:8px 12px 8px 8px;border:2px solid var(--ink);border-radius:18px;background:var(--card)}
.br.me{background:var(--b1-tint);box-shadow:4px 4px 0 var(--shadow)}
.br-rank{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-weight:900;color:var(--ink-soft);background:var(--paper-2)}
.br-rank .ic{width:20px;height:20px}
.br.t1 .br-rank{background:#FFD23F;color:#5A3D00}.br.t2 .br-rank{background:#D9DEE8;color:#3E4656}.br.t3 .br-rank{background:#F2B48A;color:#5A2E12}
.br-pet{width:52px;height:52px}.br-pet .mascot{width:100%;height:100%;overflow:visible;filter:none}
.br-pet .mascot,.br-pet .mascot *{animation:none!important}
.br-name{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.br-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-name em{font-style:normal;font-size:.72rem;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--ink);color:var(--paper);vertical-align:2px}
.br-name small{display:flex;align-items:center;gap:3px;color:var(--ink-soft);font-weight:700;font-size:.8rem}
.br-name small .ic{width:1em;height:1em}
.br-xp{text-align:right;line-height:1.1}.br-xp b{display:block;font-size:1.15rem}.br-xp small{color:var(--muted);font-weight:700;font-size:.72rem}
.board-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 8px;text-align:center;font-weight:600;color:var(--ink-soft)}
.board-empty>.ic{width:48px;height:48px}
/* the home page's card: top 3 of the week + you */
.me-board{margin-top:16px;padding:12px;border:2px solid var(--ink);border-radius:18px;background:var(--paper)}
.me-board h4{margin:0 0 8px;display:flex;align-items:center;gap:6px;font-size:1rem}
.me-board h4 .ic{width:1.2em;height:1.2em}
.me-board .board-list{gap:6px}.me-board .br{grid-template-columns:30px 40px 1fr auto;padding:5px 10px 5px 6px}.me-board .br-pet{width:40px;height:40px}.me-board .br-rank{width:28px;height:28px}
.me-board .btn{margin-top:10px;width:100%;justify-content:center}
.hm-chip.rank{background:var(--b1-tint)}

/* ---------- the Christmas event (christmas.js, 2026-10-30): pets, themes, bars, its shop tab, hero, banner, chest and snow in the hero ---------- */
.pet4 .mo-icing{fill:none;stroke:var(--c);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.pet4 .mo-antsh{fill:none;stroke:var(--d);stroke-width:10.5;stroke-linecap:round;stroke-linejoin:round}
.pet4 .mo-antler{fill:none;stroke:var(--c);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.pet4 .mo-redn{fill:#FF3B4E;opacity:.28}
/* Gingerbread house (light): warm biscuit and cream, icing dots, a gingerbread bar with an icing trim, candy-red buttons */
html[data-skin="gingerhouse"][data-skin]{--paper:#FFF3E4;--paper-2:#F8E1C6;--card:#FFFDF8;--ink:#4A2A16;--ink-soft:#6E4326;--muted:#9A7254;--shadow:#B87038;--dot:transparent;
  --a2:#3BB273;--a2-tint:#DDF2E4;--b1:#FFC94D;--b1-tint:#FFF0C9;--b2:#E8343F;--b2-tint:#FCDDE0;--tomato:#E8343F;--lilac:#C98A55;--sky:#8FC3E6;--sky-tint:#E2F0F8;--on-color:#fff;
  --bw:2.5px;--radius:20px;--sh:4px 5px 0 #B87038;--sh-lg:6px 7px 0 #B87038;color-scheme:light;
  --page-grad:radial-gradient(circle at 20px 20px,rgba(255,255,255,.95) 3px,transparent 3.6px) 0 0/90px 80px,radial-gradient(circle at 64px 58px,rgba(255,255,255,.8) 2.2px,transparent 2.8px) 0 0/90px 80px,radial-gradient(circle at 40px 40px,rgba(232,52,63,.35) 3.4px,transparent 4px) 0 0/180px 160px,radial-gradient(circle at 130px 120px,rgba(59,178,115,.35) 3.4px,transparent 4px) 0 0/180px 160px,linear-gradient(180deg,#F6DDBE,#FFF3E4 55%,#F8E1C6)}
/* Silent night (always dark): a deep blue sky, one golden star, small stars, snowy hills at the bottom */
html[data-skin="silentnight"][data-skin]{--paper:#0B1530;--paper-2:#12204A;--card:#14244F;--ink:#F2F6FF;--ink-soft:#C9D6F2;--muted:#8FA3CC;--shadow:#FFD23F;--dot:transparent;
  --a2:#7CF0A0;--a2-tint:#123A33;--b1:#FFD23F;--b1-tint:#3A3214;--b2:#E8343F;--b2-tint:#3A1420;--tomato:#E8343F;--lilac:#B9C8FF;--sky:#8FD0FF;--sky-tint:#16305A;--on-color:#0B1530;--stage:#070E22;--stage-text:#F2F6FF;
  --bw:2px;--radius:18px;--sh:0 0 16px rgba(255,210,63,.3);--sh-lg:0 0 24px rgba(255,210,63,.4);color-scheme:dark;
  --page-grad:radial-gradient(circle at 82% 11%,#FFF6CC 0 7px,rgba(255,210,63,.55) 8px 16px,rgba(255,210,63,.14) 17px 60px,transparent 110px),radial-gradient(circle at 14% 22%,#fff 1.4px,transparent 2px),radial-gradient(circle at 36% 9%,#fff 1.2px,transparent 1.8px),radial-gradient(circle at 58% 30%,#fff 1.6px,transparent 2.2px),radial-gradient(circle at 70% 46%,#fff 1.1px,transparent 1.7px),radial-gradient(circle at 24% 52%,#fff 1.2px,transparent 1.8px),radial-gradient(circle at 92% 38%,#fff 1.3px,transparent 1.9px),radial-gradient(120% 40% at 20% 112%,#DCE8FA 0 58%,transparent 59%),radial-gradient(110% 36% at 85% 116%,#C2D3EE 0 58%,transparent 59%),linear-gradient(180deg,#070E22,#12204A 70%,#1A2C5E)}
:is(html[data-skin="gingerhouse"],html[data-skin="silentnight"]) body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page-grad)}
:is(html[data-skin="gingerhouse"],html[data-skin="silentnight"]) :is(.shop,.player){background:var(--page-grad)}
html[data-skin="gingerhouse"] :is(h1,h2,.h1,.rot){font-family:"Lobster","Bricolage Grotesque",cursive;font-weight:400;letter-spacing:0}
html[data-skin="silentnight"] :is(h1,h2,h3,.h1,.rot){font-family:"Playfair Display","Bricolage Grotesque",serif;font-weight:800;letter-spacing:-.01em}
html[data-skin="gingerhouse"] .btn-primary{background:linear-gradient(135deg,#FF5B66,#D42532);color:#fff}
html[data-skin="gingerhouse"] .rot{background-color:#E8343F!important;color:#fff;box-shadow:4px 5px 0 #A81E2A}
html[data-skin="gingerhouse"] .tabbar,html[data-skin="gingerhouse"] .nav{background:radial-gradient(circle at 9px 100%,#fff 6px,transparent 6.6px) 0 100%/18px 9px repeat-x,#C98A55;border-color:#7A4A26}
html[data-skin="gingerhouse"] .tabbar{color:#FFF6EA}
html[data-skin="gingerhouse"] .tabbar a,html[data-skin="gingerhouse"] .nav .logo,html[data-skin="gingerhouse"] .nav-links a{color:#FFF6EA}
html[data-skin="gingerhouse"] .tabbar a.active{background:#E8343F;color:#fff}
html[data-skin="silentnight"] :is(.nav,.tabbar,.lesson,.profile,.wotd,.tabs,.modal-card,.game,.stop-card,.me-card,.bubble,.sheet-card,.st-opt,.sh-item,.chest-hero,.ev-banner,.word-card,.fun-card,.pl-confirm-card,.try-bar){border-color:rgba(255,210,63,.45)!important}
html[data-skin="silentnight"] .btn-primary{background:linear-gradient(135deg,#FFE27A,#F2B81E);color:#0B1530;border-color:#FFD23F;box-shadow:0 0 16px rgba(255,210,63,.45)}
html[data-skin="silentnight"] .rot{background-color:#E8343F!important;color:#fff;border-color:#FFB3B9;box-shadow:0 0 22px rgba(232,52,63,.55)}
html[data-skin="silentnight"] .tabbar a.active{background:#FFD23F;color:#0B1530}
.sh-skin.g-gingerhouse{background:radial-gradient(circle at 9px 100%,#fff 5px,transparent 5.6px) 0 0/16px 12px repeat-x,radial-gradient(circle at 12px 22px,#E8343F 3px,transparent 3.6px) 0 0/30px 30px,linear-gradient(180deg,#C98A55,#E0B07E)}
.sh-skin.g-silentnight{background:radial-gradient(circle at 80% 24%,#FFF6CC 0 4px,rgba(255,210,63,.5) 5px 10px,transparent 16px),radial-gradient(circle at 24% 30%,#fff 1.2px,transparent 1.8px),radial-gradient(circle at 50% 50%,#fff 1px,transparent 1.6px),radial-gradient(120% 40% at 30% 112%,#DCE8FA 0 58%,transparent 59%),linear-gradient(180deg,#070E22,#1A2C5E)}
/* bars: Candy cane (a striped frame round a cream bar) and Fairy lights (a pine-green bar with a string of coloured bulbs) */
html[data-bar="candystripe"] .tabbar,html[data-bar="candystripe"] .nav{background:linear-gradient(#FFF8F6,#FFF8F6) padding-box,repeating-linear-gradient(45deg,#E8343F 0 9px,#fff 9px 18px) border-box;border:5px solid transparent;box-shadow:0 6px 0 rgba(168,30,42,.35)}
html[data-bar="candystripe"] .tabbar a,html[data-bar="candystripe"] .nav .logo,html[data-bar="candystripe"] .nav-links a{color:#8A1420}
html[data-bar="candystripe"] .tabbar a.active{background:#E8343F;color:#fff}
html[data-bar="fairylights"] .tabbar,html[data-bar="fairylights"] .nav{background:radial-gradient(circle at 10px 5px,#FF5B6E 3.6px,rgba(255,91,110,.35) 5px,transparent 8px) 0 0/64px 14px repeat-x,radial-gradient(circle at 26px 8px,#FFE07A 3.6px,rgba(255,224,122,.35) 5px,transparent 8px) 0 0/64px 14px repeat-x,radial-gradient(circle at 42px 5px,#5FB8FF 3.6px,rgba(95,184,255,.35) 5px,transparent 8px) 0 0/64px 14px repeat-x,radial-gradient(circle at 58px 8px,#7CF0A0 3.6px,rgba(124,240,160,.35) 5px,transparent 8px) 0 0/64px 14px repeat-x,linear-gradient(180deg,#1A5536,#0F3320);border:2px solid #3E8A5C;box-shadow:0 0 18px rgba(255,224,122,.35)}
html[data-bar="fairylights"] .tabbar a,html[data-bar="fairylights"] .nav .logo,html[data-bar="fairylights"] .nav-links a{color:#FFF4D6}
html[data-bar="fairylights"] .tabbar a.active{background:radial-gradient(circle at 50% 70%,#FFF3B0,#FFD23F);color:#0F3320;box-shadow:0 0 14px rgba(255,224,122,.8)}
.sh-bar.bar-candystripe{background:linear-gradient(#FFF8F6,#FFF8F6) padding-box,repeating-linear-gradient(45deg,#E8343F 0 7px,#fff 7px 14px) border-box;border:4px solid transparent;color:#A81E2A}
.sh-bar.bar-fairylights{background:radial-gradient(circle at 8px 5px,#FF5B6E 3px,transparent 4.4px) 0 0/48px 12px repeat-x,radial-gradient(circle at 20px 7px,#FFE07A 3px,transparent 4.4px) 0 0/48px 12px repeat-x,radial-gradient(circle at 32px 5px,#5FB8FF 3px,transparent 4.4px) 0 0/48px 12px repeat-x,radial-gradient(circle at 44px 7px,#7CF0A0 3px,transparent 4.4px) 0 0/48px 12px repeat-x,#0F3320;border:2px solid #3E8A5C;color:#FFE07A}
/* the shop tab, hero, banner and chest of the event (the chest is a present) */
.shop-tabs button.ev[data-tab="christmas"]{border-color:#A81E2A;color:color-mix(in srgb,#A81E2A 60%,var(--ink));background:color-mix(in srgb,#E8343F 13%,var(--card))}
.shop-tabs button.ev.on[data-tab="christmas"]{background:linear-gradient(135deg,#FF5B66,#C4232F);color:#fff}
.ev-hero.ev-christmas,.ev-banner.ev-christmas{color:#FFF6F2;background:radial-gradient(circle at 90% 22%,#FFF3C4 0 6px,rgba(255,210,63,.45) 7px 16px,transparent 32px),radial-gradient(circle at 12px 12px,rgba(255,255,255,.75) 1.8px,transparent 2.4px) 0 0/46px 40px,radial-gradient(circle at 30px 30px,rgba(255,255,255,.5) 1.3px,transparent 1.9px) 0 0/46px 40px,radial-gradient(90% 40% at 30% 118%,rgba(255,255,255,.35) 0 60%,transparent 61%),linear-gradient(135deg,#C4232F,#7A1420)}
.ev-hero.ev-christmas p,.ev-banner.ev-christmas p,.ev-hero.ev-christmas .sh-need{color:#FFDCDC}
.ev-banner.ev-christmas .ev-x{background:#7A1420;color:#fff;border-color:#fff}
.ev-hero.ev-christmas .btn:not(.btn-primary)[disabled]{background:#8A1E2A;color:#FFD6D6;border-color:#FFB3B9}
.ev-christmas .ev-kicker{background:#2FA35A}
.chest-stage.ev-christmas .ch-lid{fill:#E8343F}.chest-stage.ev-christmas .ch-box{fill:#C4232F}.chest-stage.ev-christmas .ch-band{stroke:#FFD23F}.chest-stage.ev-christmas .ch-lock{fill:#2FA35A}
/* snow drifting down across the hero (white flakes with a soft blue edge so they show on light themes too), warm lights in the dark */
.ev-leaves.ev-christmas span{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(140,175,215,.55);opacity:.9}
.ev-leaves.ev-christmas span.s2{width:6px;height:6px}
.ev-leaves.ev-christmas span.s3{width:13px;height:13px;filter:blur(.6px);opacity:.75}
.ev-leaves.ev-christmas b{background:#FFD23F;box-shadow:0 0 10px 4px rgba(255,210,63,.55)}
.ev-tag.ev-christmas{background:#C4232F}

/* ---------- shop and bag: two screens of the shop overlay (shop.js); the account sheet: four shortcuts + a Settings view (core.js) ---------- */
.shop-top h2{display:flex;align-items:center;gap:8px}
.shop-top h2 .ic{width:1.25em;height:1.25em}
.shop-top h2 .n,.shop-tabs .n{display:inline-grid;place-items:center;min-width:1.7em;height:1.5em;padding:0 6px;border-radius:999px;background:var(--b1);color:#1D1A22;font-size:.78rem;font-weight:900;letter-spacing:0}
.shop-tabs .n{background:color-mix(in srgb,var(--ink) 12%,transparent);color:inherit}
.shop-tabs button.on .n{background:color-mix(in srgb,var(--paper) 25%,transparent)}
.acct-quick{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:7px;margin:14px 0 6px}
.aq{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px;border:2px solid var(--ink);border-radius:18px;background:var(--paper);font:inherit;color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--shadow);transition:transform .15s}
.aq:hover{transform:translateY(-2px)}.aq:active{transform:translateY(1px)}
.aq b{font-size:.8rem;font-weight:800;line-height:1.1;text-align:center}
.aq-i{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--b1-tint)}
.aq:nth-child(2) .aq-i{background:var(--b2-tint)}.aq:nth-child(3) .aq-i{background:var(--a2-tint)}.aq:nth-child(4) .aq-i{background:var(--sky-tint)}
.aq-i .ic{width:28px;height:28px}
.aq-i em{position:absolute;top:-6px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--tomato);color:#fff;font-style:normal;font-weight:900;font-size:.72rem;line-height:20px;text-align:center;border:2px solid var(--card)}
.sheet-card:not([data-view="main"]) .sheet-main,.sheet-card:not([data-view="settings"]) .sheet-settings,.sheet-card:not([data-view="mail"]) .sheet-mail{display:none}
.acct-quick:has(> :nth-child(6)){grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}
#navUser{position:relative}
.nu-dot{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:var(--tomato);border:2px solid var(--card);animation:nuDot 1.6s ease-in-out infinite}
@keyframes nuDot{50%{transform:scale(1.25)}}
.avatar{position:relative}
.mail-list{display:flex;flex-direction:column;gap:10px}
.mail{display:flex;flex-direction:column;gap:8px;padding:12px;border:2px solid var(--ink);border-radius:18px;background:var(--paper)}
.mail.new{background:var(--card);box-shadow:3px 3px 0 var(--shadow)}
.mail.done{opacity:.75}
.mail-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mail-top b{display:flex;align-items:center;gap:6px}.mail-top .ic{width:1.2em;height:1.2em}.mail-top small{color:var(--muted);font-weight:700}
.mail-note{margin:0;white-space:pre-wrap;line-height:1.4}
.mail-gifts{display:flex;flex-wrap:wrap;gap:8px}
.mg{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border:2px solid var(--ink);border-radius:999px;background:var(--b1-tint);font-size:.9rem}
.mg .ic{width:1.3em;height:1.3em}.mg-look{display:inline-block;width:34px;height:34px;font-style:normal}.mg-look svg{width:100%;height:100%}
.mail .btn{align-self:flex-start}
.mail-ok{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--ink-soft)}.mail-ok .ic{width:1.1em;height:1.1em}
.set-head{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.set-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:1.25rem}
.set-head h3 .ic{width:1.2em;height:1.2em}
.set-back{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer}
.set-back .ic{width:20px;height:20px}
.acct-settings:not(:empty){margin-top:16px;padding-top:14px;border-top:2px dashed color-mix(in srgb,var(--ink) 25%,transparent)}
.set-h{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.bag-empty{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px;padding:22px 16px;border:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);border-radius:22px;text-align:center;color:var(--ink-soft);font-weight:700}
.bag-empty p{margin:0}
.sh-item.owned{opacity:.92}
.linkish{border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--ink);text-decoration:underline;cursor:pointer}