/* Li9 shared styles.
   Layout: arcade shell — sticky marquee header, content column up to 1180px, a deep footer with a marigold zigzag edge. */
:root{
  --bg:#14112b; --bg2:#0e0c20; --panel:#1e1a3d; --panel2:#272150; --line:#3a3372;
  --fg:#f5efe2; --muted:#aaa3cc; --accent:#ffb627; --accent-ink:#2a1c00; --rose:#ff5d73; --mint:#46d9a8; --sky:#6ec3ff;
  --display:'Bungee',Impact,'Arial Black',sans-serif;
  --body:'Baloo 2','Nirmala UI','Segoe UI',system-ui,sans-serif;
  --r:14px;
  --accent-text:#ffb627;
  color-scheme:dark;
}
/* light theme: warm paper, deep ink, darker marigold for readable text */
:root[data-theme="light"]{
  --bg:#f7f2e8; --bg2:#efe7d6; --panel:#ffffff; --panel2:#f2ece0; --line:#e0d6c2;
  --fg:#1d1838; --muted:#5b5674; --accent:#ffb627; --accent-ink:#2a1c00; --accent-text:#a85a00;
  --rose:#d93a52; --mint:#14916a; --sky:#1f6fb8;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--fg);margin:0}
body{font-family:var(--body);font-size:16px;line-height:1.55;min-height:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
img{max-width:100%}
a{color:var(--accent-text)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance}

/* ---------- announce + header ---------- */
.announce{background:var(--accent);color:var(--accent-ink);font-weight:700;text-align:center;padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:14px;padding-block:10px;flex-wrap:wrap}
.logo{font-family:var(--display);font-size:1.75rem;color:var(--accent-text);text-decoration:none;letter-spacing:.02em;line-height:1}
.logo span{color:var(--rose)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a.link{color:var(--muted);text-decoration:none;font-weight:600;padding:6px 10px;border-radius:8px}
.nav a.link:hover,.nav a.link[aria-current="page"]{color:var(--fg);background:var(--panel)}
.btn{border:2px solid var(--line);background:var(--panel);color:var(--fg);padding:6px 14px;border-radius:999px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--accent)}
.btn.gold{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:800}
.badge{display:none;font-family:var(--display);font-size:.72rem;background:var(--accent);color:var(--accent-ink);padding:4px 10px;border-radius:999px}
body.nopremium:not(.premium) .gold-cta,body.nopremium .premium-link{display:none!important}
body.premium .gold-cta{background:linear-gradient(135deg,#ffd76a,#ffb627);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
@media (max-width:640px){.nav a.link{display:none}}

/* ---------- ads ---------- */
.ad-slot{border:1px dashed var(--line);border-radius:10px;min-height:90px;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--panel) 50%,transparent)}
.ad-slot .ph{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ad-slot ins{width:100%}
.ad-slot.loaded .ph{display:none}
.ad-slot.tall{min-height:250px}
body.premium .ad-slot,body.noads .ad-slot{display:none!important}

/* ---------- breadcrumbs + page head ---------- */
.crumbs{display:flex;gap:6px;flex-wrap:wrap;font-size:.88rem;color:var(--muted);padding-block:14px 0;margin:0;list-style:none;padding-left:0}
.crumbs li+li::before{content:"›";margin-right:6px;opacity:.6}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-text)}
.pagehead{display:flex;align-items:flex-end;gap:12px 18px;flex-wrap:wrap;padding-block:6px 14px}
.pagehead h1{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.05;margin:0}
.pagehead .tag{color:var(--muted);font-size:.95rem}
.pagehead .tools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.fsbtn{font-family:var(--display);font-size:.95rem;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:9px 16px;box-shadow:0 4px 0 #b45309;display:inline-flex;gap:8px;align-items:center}
.fsbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #b45309}
.fsbtn svg{width:18px;height:18px}

/* ---------- 3D game frame ---------- */
.gamebox{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 150px);min-height:300px;background:#0b0d16;border-radius:var(--r);overflow:hidden;border:2px solid var(--line);user-select:none;-webkit-user-select:none;touch-action:none}
.gamebox:fullscreen{max-height:none;border-radius:0;border:0;width:100vw;height:100vh;aspect-ratio:auto}
.gamebox:-webkit-full-screen{max-height:none;width:100vw;height:100vh}
.gamebox.fs-fallback{position:fixed;inset:0;z-index:100;max-height:none;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border-radius:0;border:0}
body.fs-lock{overflow:hidden}
.gamebox canvas.stage3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.gamebox .fs-exit{position:absolute;z-index:40;top:calc(10px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));display:none;background:rgba(10,12,20,.55);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:4px 10px;font-weight:700}
.gamebox.fs-fallback .fs-exit,.gamebox:fullscreen .fs-exit{display:block}
@media (max-aspect-ratio:1/1){.gamebox{aspect-ratio:4/5;max-height:calc(100vh - 120px)}}

/* overlays shared by the 3D games */
.g-ov{position:absolute;inset:0;display:grid;place-items:center;padding:16px;z-index:30;text-align:center;background:rgba(8,8,20,.62);color:#fff}
.g-card{display:grid;gap:12px;justify-items:center;max-width:460px}
.g-title{font-family:var(--display);font-size:clamp(2rem,6vw,3.6rem);line-height:.92;text-shadow:0 4px 0 rgba(0,0,0,.35)}
.g-title em{font-style:normal;color:var(--accent)}
.g-sub{margin:0;color:rgba(255,255,255,.8);font-weight:600}
.g-play{font-family:var(--display);font-size:1.4rem;padding:10px 28px;border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);box-shadow:0 5px 0 #b45309}
.g-play:active{transform:translateY(3px);box-shadow:0 2px 0 #b45309}
.g-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.g-ghost{border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;border-radius:10px;padding:8px 18px;font-weight:700}
.g-stats{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;color:rgba(255,255,255,.75)}
.g-stats b{display:block;color:#fff;font-size:1.6rem;font-variant-numeric:tabular-nums;line-height:1}
.g-keys{font-size:.9rem;color:rgba(255,255,255,.72);max-width:44ch}
.g-hud{position:absolute;inset:0;pointer-events:none;z-index:10;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);font-weight:700}
.g-hud .tl{position:absolute;top:10px;left:12px;display:grid;gap:2px}
.g-hud .tr{position:absolute;top:10px;right:12px;display:grid;gap:2px;justify-items:end}
.g-hud .big{font-family:var(--display);font-size:clamp(1.3rem,3.2vw,2rem);font-variant-numeric:tabular-nums;line-height:1}
.g-hud .small{font-size:.85rem;opacity:.85;letter-spacing:.06em;text-transform:uppercase}
.g-hud .center{position:absolute;left:50%;top:32%;transform:translateX(-50%);font-family:var(--display);font-size:clamp(1.4rem,5vw,3rem);white-space:nowrap}
.g-touch{position:absolute;inset:0;z-index:12;display:none}
body.touch .g-touch{display:block}
.g-tb{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:76px;height:76px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(0,0,0,.28);color:#fff;font-weight:800;font-size:1.4rem;touch-action:none}
.g-tb.on{background:rgba(255,182,39,.75);color:#111}

/* ---------- small game stage ---------- */
.stage{background:var(--panel);border:2px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:14px;justify-items:center}
.hud{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;width:100%}
.hud span{background:var(--panel2);border-radius:10px;padding:4px 12px;color:var(--muted);font-size:.9rem}
.hud b{color:var(--fg);font-variant-numeric:tabular-nums;font-size:1.05rem}
.msg{min-height:1.5em;font-weight:800;color:var(--accent-text);text-align:center}
.pad{display:grid;grid-template-columns:repeat(3,56px);gap:6px}
.pad button{height:52px;border-radius:12px;border:2px solid var(--line);background:var(--panel2);color:var(--fg);font-size:1.2rem}
.pad button:active{background:var(--accent);color:var(--accent-ink)}
.pad .e{visibility:hidden}
canvas.qcanvas{width:min(100%,420px);aspect-ratio:1;border-radius:10px;touch-action:none;display:block}
canvas.qcanvas.tallc{aspect-ratio:3/4;width:min(100%,380px)}
.g2048{width:min(100%,400px);aspect-ratio:1;background:var(--panel2);border-radius:12px;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;touch-action:none}
.g2048 div{border-radius:8px;display:grid;place-items:center;font-family:var(--display);font-size:clamp(1rem,5vw,1.7rem);background:var(--line);color:var(--fg)}
.ttt{width:min(100%,330px);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ttt button{border:0;border-radius:12px;background:var(--panel2);font-family:var(--display);font-size:2.6rem;color:var(--fg)}
.ttt button.x{color:var(--accent-text)} .ttt button.o{color:var(--rose)}
.ttt button.win{background:var(--mint);color:var(--bg)}
.mem{width:min(100%,420px);display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mem button{aspect-ratio:1;border:0;border-radius:12px;background:var(--panel2);font-size:2rem;color:transparent;transition:background .2s}
.mem button.open,.mem button.done{background:var(--fg);color:#000}
.mem button.done{background:var(--mint)}
.seg{display:inline-flex;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--muted);padding:4px 12px;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.playgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
body.premium .playgrid,body.noads .playgrid{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){.playgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- article (SEO content under games) ---------- */
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding-block:26px 10px}
body.premium .article,body.noads .article{grid-template-columns:minmax(0,1fr)}
.article h2{font-family:var(--display);font-size:1.15rem;letter-spacing:.02em;margin:26px 0 8px;color:var(--accent-text)}
.article h2:first-child{margin-top:0}
.article p,.article li{color:var(--muted);max-width:68ch}
.article strong{color:var(--fg)}
.ctable{width:100%;max-width:680px;border-collapse:collapse;font-size:.95rem}
.ctable td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.ctable td:first-child{color:var(--fg);font-weight:600;white-space:nowrap}
.faq details{border-bottom:1px solid var(--line);padding-block:10px;max-width:68ch}
.faq summary{cursor:pointer;font-weight:700;color:var(--fg)}
.faq details p{margin:8px 0 0}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:6px}
.related a{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:10px 12px;text-decoration:none;color:var(--fg);font-weight:700;display:grid;gap:2px}
.related a small{color:var(--muted);font-weight:500}
.related a:hover{border-color:var(--accent)}
@media (max-width:860px){.article{grid-template-columns:minmax(0,1fr)}}

/* ---------- cards (home) ---------- */
.shelf-head{display:flex;align-items:baseline;gap:12px;margin:34px 0 12px;flex-wrap:wrap}
.shelf-head h2{font-family:var(--display);font-size:1.3rem;margin:0}
.shelf-head p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{background:var(--panel);border:2px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card .art{aspect-ratio:16/10;max-width:100%;display:grid;place-items:center;font-family:var(--display);font-size:2.4rem;color:#fff;position:relative;overflow:hidden}
.card .art .chip{position:absolute;top:10px;left:10px;font-family:var(--body);font-size:.72rem;font-weight:800;letter-spacing:.1em;background:rgba(0,0,0,.45);padding:1px 8px;border-radius:6px}
.card .info{padding:12px 14px 14px;display:grid;gap:2px}
.card h3{margin:0;font-size:1.15rem;font-weight:800}
.card p{margin:0;color:var(--muted);font-size:.92rem}
.card .play{margin-top:8px;font-weight:800;color:var(--accent-text);font-size:.9rem}
.grid .ad-slot{min-height:220px}

/* ---------- premium plans + checkout ---------- */
.pp-hero{text-align:center;padding:34px 0 10px;display:grid;gap:8px;justify-items:center}
.pp-hero h1{font-family:var(--display);font-size:clamp(1.8rem,5vw,3rem);margin:0;line-height:1.05}
.pp-hero h1 em{font-style:normal;color:var(--accent-text)}
.pp-hero p{margin:0;color:var(--muted);max-width:56ch}
.pp-note{background:color-mix(in srgb,var(--mint) 16%,var(--panel));border:2px solid var(--mint);border-radius:14px;padding:12px 16px;text-align:center;font-weight:700;margin:12px auto 0;max-width:640px}
.pp-note.warn{background:color-mix(in srgb,var(--accent) 14%,var(--panel));border-color:var(--accent)}
.plans3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 10px}
.tier{background:var(--panel);border:2px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px;position:relative}
.tier.best{border-color:var(--accent);box-shadow:0 10px 40px -18px var(--accent)}
.tier .flag{position:absolute;top:-12px;left:22px;background:var(--mint);color:#0e0c20;font-weight:800;font-size:.75rem;letter-spacing:.08em;border-radius:999px;padding:2px 10px}
.tier h2{margin:0;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tier .price{font-family:var(--display);font-size:2.4rem;line-height:1}
.tier .price small{font-family:var(--body);font-size:.95rem;color:var(--muted);font-weight:600}
.tier .sub{color:var(--muted);margin:0;font-size:.92rem;min-height:1.4em}
.tier ul{list-style:none;margin:4px 0 8px;padding:0;display:grid;gap:7px}
.tier li{display:flex;gap:8px}.tier li::before{content:"✓";color:var(--mint);font-weight:800}
.tier li.no{color:var(--muted)}.tier li.no::before{content:"–";color:var(--muted)}
.tier .btn{justify-content:center;margin-top:auto;padding:11px 16px;font-size:1rem}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.pp-faq{max-width:760px;margin:30px auto 0}
.pp-faq h2{font-family:var(--display);font-size:1.4rem}
.pp-pay-logos{text-align:center;color:var(--muted);font-size:.9rem;margin:6px 0 0}
.co{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;padding-block:26px;align-items:start}
.co-card{background:var(--panel);border:2px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:14px}
.co-card h1,.co-card h2{margin:0}.co-card h1{font-family:var(--display);font-size:1.6rem}
.co-card label{display:grid;gap:5px;font-weight:700}
.co-card input{width:100%;padding:11px 13px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--fg);font:inherit}
.co-card input:focus{border-color:var(--accent);outline:none}
.co-card input[readonly]{opacity:.75}
.co-card .hint{font-weight:400;color:var(--muted);font-size:.82rem}
.co-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.co-seg button,.gw{border:2px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--panel2);color:var(--fg);text-align:left;display:grid;gap:2px;font:inherit;cursor:pointer}
.co-seg button[aria-pressed="true"],.gw[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel2))}
.co-seg b{font-size:1.05rem}.co-seg small,.gw small{color:var(--muted)}
.gw-list{display:grid;gap:8px}.gw{grid-template-columns:1fr auto;align-items:center}.gw small{grid-column:1}.gw-price{grid-row:1/3;grid-column:2;font-weight:800}
.co-sum dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 12px}.co-sum dt{color:var(--muted)}.co-sum dd{margin:0;font-weight:700;text-align:right}
.co-sum .total{border-top:2px dashed var(--line);padding-top:10px;font-size:1.2rem}
.co-pay{width:100%;justify-content:center;padding:13px 18px;font-size:1.1rem}
.msg{margin:0;min-height:1.3em;font-weight:700;color:var(--rose)}.msg.ok{color:var(--mint)}
.note{font-size:.84rem;color:var(--muted);margin:0}
.secure{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.85rem}
@media (max-width:860px){.plans3{grid-template-columns:1fr}.co{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-foot{margin-top:56px;background:var(--bg2);position:relative;border-top:0}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;
  background:linear-gradient(135deg,transparent 50%,var(--bg2) 50%) 0 0/28px 14px,linear-gradient(225deg,transparent 50%,var(--bg2) 50%) 0 0/28px 14px}
.foot-cta{background:linear-gradient(100deg,#2b1d5c 0%,#3b1f4f 55%,#5a2a2a 100%);border-bottom:2px solid var(--line)}
.foot-cta .wrap{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;padding-block:26px}
.foot-cta h2{font-family:var(--display);font-size:clamp(1.3rem,3.4vw,2rem);margin:0;line-height:1.05}
.foot-cta h2 em{font-style:normal;color:var(--accent)}
.foot-cta p{margin:4px 0 0;color:var(--muted)}
.foot-cta .ctas{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:24px;padding-block:34px 26px}
.foot-brand .logo{font-size:1.8rem}
.foot-brand p{color:var(--muted);margin:10px 0 14px;max-width:34ch}
.perk-chips{display:flex;gap:6px;flex-wrap:wrap}
.perk-chips span{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.8rem;color:var(--fg);background:var(--panel)}
.foot-col h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin:4px 0 10px;font-weight:800}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-col a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.foot-col a:hover{color:var(--fg)}
.foot-col a i{width:8px;height:8px;border-radius:2px;flex:none}
.foot-base{border-top:1px solid var(--line)}
.foot-base .wrap{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;padding-block:16px;color:var(--muted);font-size:.88rem}
.foot-base .wrap a{color:var(--muted)}
.foot-base .totop{margin-left:auto;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.foot-base .totop:hover{color:var(--fg);border-color:var(--accent)}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:460px){.foot-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.g-card .ad-slot{margin-top:26px}

/* ---------- minesweeper + sudoku ---------- */
.ms-grid{display:grid;gap:3px;width:min(100%,460px);touch-action:manipulation;-webkit-user-select:none;user-select:none}
.ms-grid button{aspect-ratio:1;border:0;border-radius:5px;background:var(--panel2);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);color:var(--fg);font-weight:800;font-size:clamp(.7rem,2.6vw,1.05rem);padding:0;min-width:0}
.ms-grid button:hover{background:var(--line)}
.ms-grid button.open{background:#120f28;box-shadow:none;cursor:default}
.ms-grid button.flag{color:var(--rose)}
.ms-grid button.boom{background:var(--rose);color:#fff}
.sd-grid{display:grid;grid-template-columns:repeat(9,1fr);width:min(100%,450px);border:3px solid var(--accent);border-radius:8px;overflow:hidden;background:var(--line);gap:1px}
.sd-grid button{aspect-ratio:1;border:0;background:var(--panel);color:var(--fg);font-family:var(--display);font-size:clamp(.9rem,4.2vw,1.5rem);padding:0;min-width:0}
.sd-grid button.given{color:var(--fg)}
.sd-grid button.user{color:var(--sky)}
.sd-grid button.hl{background:var(--panel2)}
.sd-grid button.same{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}
.sd-grid button.sel{background:var(--accent);color:var(--accent-ink)}
.sd-grid button.bad{color:var(--rose)}
.sd-grid button.br{box-shadow:2px 0 0 var(--accent)}
.sd-grid button.bb{box-shadow:0 2px 0 var(--accent)}
.sd-grid button.br.bb{box-shadow:2px 0 0 var(--accent),0 2px 0 var(--accent),2px 2px 0 var(--accent)}
.sd-pad{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;width:min(100%,450px)}
.sd-pad button{border:2px solid var(--line);background:var(--panel2);color:var(--fg);border-radius:10px;font-family:var(--display);font-size:1.15rem;padding:8px 0;min-width:0}
.sd-pad button:active{background:var(--accent);color:var(--accent-ink)}
@media (max-width:420px){.sd-pad{grid-template-columns:repeat(5,1fr)}}

/* ---------- learning games ---------- */
.stage.edu{justify-items:stretch;padding:clamp(14px,3vw,24px)}
.e-setup,.e-end{display:grid;gap:14px;justify-items:center;text-align:center;padding-block:10px}
.e-lead{margin:0;color:var(--muted);max-width:52ch}
.e-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.e-row>span{color:var(--muted);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.e-row.center{justify-content:center}
.e-setup .seg{flex-wrap:wrap;border-radius:14px;justify-content:center}
.e-go{font-family:var(--display);font-size:1.25rem;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);padding:10px 30px;box-shadow:0 4px 0 #b45309}
.e-go:active{transform:translateY(2px);box-shadow:0 2px 0 #b45309}
.e-best{margin:0;color:var(--muted)}
.e-best b{color:var(--fg)}
.e-top{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.e-top span{background:var(--panel2);border-radius:10px;padding:3px 12px;color:var(--muted);font-size:.9rem}
.e-top b{color:var(--fg);font-variant-numeric:tabular-nums}
.e-bar{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden;margin-block:10px 4px}
.e-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--sky));transition:width .3s}
.e-card{display:grid;gap:16px;justify-items:center;padding-top:8px}
.e-visual{display:grid;place-items:center}
.e-clock{width:min(240px,62vw);height:auto;aspect-ratio:1}
.e-prompt{font-size:clamp(1.15rem,3vw,1.5rem);font-weight:700;text-align:center;max-width:36ch;text-wrap:balance}
.e-sum{font-family:var(--display);font-size:clamp(2.1rem,8vw,3.4rem);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.e-sym{font-family:var(--display);font-size:2.6rem;color:var(--accent-text);display:block;margin-top:6px}
.e-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,560px)}
.e-opts.long{grid-template-columns:minmax(0,1fr)}
.e-opts button{position:relative;border:2px solid var(--line);background:var(--panel2);color:var(--fg);border-radius:14px;padding:14px 14px 14px 40px;font-weight:700;font-size:1.08rem;text-align:left;min-height:56px;transition:transform .08s,border-color .15s}
.e-opts button:hover{border-color:var(--accent)}
.e-opts button:active{transform:scale(.98)}
.e-opts button small{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:6px;background:var(--line);color:var(--muted);font-size:.72rem;display:grid;place-items:center}
.e-opts button.right{border-color:var(--mint);background:color-mix(in srgb,var(--mint) 22%,var(--panel2))}
.e-opts button.wrong{border-color:var(--rose);background:color-mix(in srgb,var(--rose) 22%,var(--panel2))}
.e-fb{min-height:1.6em;text-align:center;color:var(--muted);max-width:56ch}
.ok{color:var(--mint)} .no{color:var(--rose)}
.e-next{margin-left:8px;border:0;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-weight:800;padding:4px 12px}
.e-stars{display:flex;gap:6px;font-size:2.4rem;line-height:1}
.e-stars span{color:var(--line)} .e-stars span.on{color:var(--accent-text)}
.e-big{font-family:var(--display);font-size:clamp(2.2rem,8vw,3.4rem);font-variant-numeric:tabular-nums}
.e-big small{font-size:.45em;color:var(--muted)}
.e-review{max-width:560px;width:100%;text-align:left;background:var(--panel2);border-radius:12px;padding:10px 14px}
.e-review summary{cursor:pointer;font-weight:700}
.e-review li{color:var(--muted);margin-block:4px}
.e-table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px;font-variant-numeric:tabular-nums;color:var(--muted)}
.e-table b{color:var(--fg)}
.t-text{font-size:clamp(1.05rem,2.6vw,1.35rem);line-height:1.7;background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:14px 16px;margin-block:12px;color:var(--muted);min-height:6.2em;overflow-wrap:anywhere}
.t-text .ok{color:var(--fg)} .t-text .bad{color:#fff;background:var(--rose);border-radius:3px}
.t-text .cur{border-bottom:3px solid var(--accent);color:var(--fg)}
.t-in{width:100%;font:inherit;font-size:1.1rem;padding:12px 14px;border-radius:12px;border:2px solid var(--accent);background:var(--bg);color:var(--fg);resize:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.w-slots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.w-slots span{width:clamp(30px,8vw,44px);height:clamp(38px,10vw,52px);border-bottom:4px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-size:clamp(1.1rem,4vw,1.6rem)}
.w-slots span.fill{border-color:var(--accent)}
.w-tiles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.w-tiles button{width:clamp(38px,10vw,52px);height:clamp(38px,10vw,52px);border:0;border-radius:10px;background:var(--fg);color:var(--bg);font-family:var(--display);font-size:clamp(1.1rem,4vw,1.5rem);box-shadow:0 4px 0 #b9ae9a}
.w-tiles button:disabled{opacity:.2;box-shadow:none}

/* ---------- connect four, whack-a-mole, color memory ---------- */
.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:min(100%,460px);background:#2a6fdb;padding:10px;border-radius:16px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.25)}
.c4 button{aspect-ratio:1;border:0;padding:0;background:transparent;display:grid;place-items:center;min-width:0}
.c4 button i{width:86%;height:86%;border-radius:50%;background:#0d0b22;box-shadow:inset 0 4px 6px rgba(0,0,0,.5);transition:background .15s}
.c4 button.p1 i{background:#ffd23f}
.c4 button.p2 i{background:#ff5d73}
.c4 button.win i{outline:4px solid #fff;outline-offset:-4px}
.wm{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(100%,420px);-webkit-user-select:none;user-select:none;touch-action:manipulation}
.wm button{aspect-ratio:1;border:0;border-radius:50%;background:radial-gradient(ellipse at 50% 72%,#3b2416 0 46%,#6b4423 47% 60%,#8a5a2e 61%);position:relative;overflow:hidden;padding:0;min-width:0}
.wm .mole{position:absolute;left:22%;right:22%;bottom:-70%;height:70%;border-radius:45% 45% 20% 20%;background:#a07040;transition:bottom .12s}
.wm .mole i{position:absolute;left:28%;top:24%;width:12%;height:12%;border-radius:50%;background:#14112b;box-shadow:calc(var(--x,1) * 26px) 0 0 #14112b}
.wm button.up .mole{bottom:18%}
.wm button.up.bomb .mole{background:#2b2b33;border-radius:50%}
.wm button.up.bomb .mole i{background:#ff5d73;box-shadow:none;left:44%;top:-6%}
.wm button.hit{background:radial-gradient(ellipse at 50% 72%,#ffb627 0 46%,#6b4423 47% 60%,#8a5a2e 61%)}
.wm button.boom{background:radial-gradient(circle,#ff5d73 0 50%,#6b4423 51%)}
.sm{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,360px);aspect-ratio:1;touch-action:manipulation}
.sm button{border:0;border-radius:24px;background:var(--c);opacity:.38;transition:opacity .08s,transform .08s;min-width:0}
.sm button:nth-child(1){border-top-left-radius:50%}.sm button:nth-child(2){border-top-right-radius:50%}.sm button:nth-child(3){border-bottom-left-radius:50%}.sm button:nth-child(4){border-bottom-right-radius:50%}
.sm button.lit{opacity:1;transform:scale(1.03);box-shadow:0 0 30px var(--c)}

/* ---------- word search, hangman, shapes, fractions ---------- */
.ws-wrap{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:16px;align-items:start;margin-top:12px}
.ws{display:grid;gap:3px;width:min(100%,520px);justify-self:center;touch-action:manipulation}
.ws button{aspect-ratio:1;border:0;border-radius:6px;background:var(--panel2);color:var(--fg);font-weight:800;font-size:clamp(.75rem,2.8vw,1.1rem);padding:0;min-width:0}
.ws button.sel{background:var(--accent);color:var(--accent-ink)}
.ws button.done{background:color-mix(in srgb,var(--mint) 45%,var(--panel2))}
.ws-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-content:start}
.ws-list li{background:var(--panel2);border-radius:8px;padding:2px 10px;font-weight:700;letter-spacing:.06em;font-size:.9rem}
.ws-list li.done{text-decoration:line-through;color:var(--mint)}
@media (max-width:620px){.ws-wrap{grid-template-columns:minmax(0,1fr)}}
.hm-c{width:min(200px,50vw);height:auto}
.hm-keys{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;width:min(100%,460px)}
.hm-keys button{border:0;border-radius:8px;background:var(--panel2);color:var(--fg);font-weight:800;padding:8px 0;min-width:0}
.hm-keys button.ok{background:color-mix(in srgb,var(--mint) 45%,var(--panel2))}
.hm-keys button.no{background:color-mix(in srgb,var(--rose) 40%,var(--panel2));opacity:.6}
.e-shape{width:min(200px,52vw);height:auto;background:#d9d4e8;border-radius:16px}
.e-frac{width:min(240px,60vw);height:auto;margin:4px}
.e-visual{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}

/* ---------- theme toggle + see all ---------- */
.theme-btn{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:var(--panel);color:var(--fg);display:grid;place-items:center;padding:0}
.theme-btn:hover{border-color:var(--accent)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .i-moon{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-moon{display:block}
.grid .card.more{display:none}
.grid.open .card.more{display:flex}
.see-all{display:flex;justify-content:center;margin-top:14px}
.foot-cta{color:#fff}
.foot-cta p{color:rgba(255,255,255,.78)}
.foot-cta .btn:not(.gold){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
:root[data-theme="light"] .card{box-shadow:0 2px 0 var(--line)}
:root[data-theme="light"] .stage{background:#fff}
:root[data-theme="light"] .w-tiles button{box-shadow:0 4px 0 #8a83a8}

/* ---------- payment methods + notices ---------- */
.gw-list{display:grid;gap:8px}
.gw{display:grid;grid-template-columns:1fr auto;gap:0 10px;text-align:left;border:2px solid var(--line);background:var(--panel2);color:var(--fg);border-radius:12px;padding:10px 12px}
.gw small{grid-column:1;color:var(--muted);font-size:.8rem}
.gw .gw-price{grid-row:1/3;grid-column:2;align-self:center;font-weight:800}
.gw[aria-pressed="true"]{border-color:var(--accent)}
.kg-note{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:300;background:var(--panel);color:var(--fg);border:2px solid var(--accent);border-radius:12px;padding:10px 16px;font-weight:700;max-width:min(520px,92vw);box-shadow:0 8px 30px rgba(0,0,0,.35)}

/* ---------- search ---------- */
.search{position:relative;flex:1 1 260px;max-width:420px;display:flex;align-items:center;background:var(--panel);border:2px solid var(--line);border-radius:999px;padding-inline:12px 8px;margin-left:8px}
.search:focus-within{border-color:var(--accent)}
.search>svg{width:18px;height:18px;color:var(--muted);flex:none}
.search input{flex:1;min-width:0;background:transparent;border:0;color:var(--fg);font:inherit;padding:7px 8px;outline:none}
.search input::-webkit-search-cancel-button{filter:invert(.5)}
.search kbd{font-family:inherit;font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:0 6px}
.search:focus-within kbd{display:none}
.search-list{position:absolute;left:0;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px;background:var(--panel);border:2px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.35);z-index:50;max-height:min(70vh,460px);overflow:auto}
.search-list a{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:center;padding:8px 10px;border-radius:10px;color:var(--fg);text-decoration:none}
.search-list a small{grid-column:2;color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-list .tag{grid-row:1/3;font-size:.68rem;font-weight:800;letter-spacing:.06em;border-radius:6px;padding:2px 7px;color:#14112b}
.search-list .t-3d{background:var(--accent)} .search-list .t-quick{background:var(--mint)} .search-list .t-edu{background:#b28dff}
.search-list [aria-selected="true"] a,.search-list a:hover{background:var(--panel2)}
.search-list .none{padding:10px;color:var(--muted)}
@media (max-width:820px){
  header.top .wrap{flex-wrap:nowrap;gap:8px}
  .search{order:0;flex:1 1 0;min-width:0;max-width:none;margin-left:2px;padding-inline:10px 6px}
  .search kbd{display:none}
  .search input{padding:7px 4px;text-overflow:ellipsis}
  .nav{flex:none;flex-wrap:nowrap;gap:6px;margin-left:0}
  .search-list{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 62px)}
}
@media (max-width:520px){
  header.top .logo{font-size:1.45rem}
  .theme-btn,.user-btn{width:36px;height:36px}
  .nav .gold-cta{padding:6px 10px;font-size:.82rem;white-space:nowrap}
  .search>svg{width:16px;height:16px}
}
@media (max-width:370px){.nav .gold-cta{padding:6px 8px;font-size:.76rem}.search{padding-inline:8px 4px}}

/* ---------- account ---------- */
.user-btn{gap:8px;padding:4px 12px 4px 4px}
.user-btn .avatar{width:28px;height:28px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-size:.85rem;font-weight:800}
.user-btn.in .avatar{background:var(--accent);color:var(--accent-ink)}
@media (max-width:520px){.user-btn .user-label{display:none}.user-btn{padding:4px}}
.acct{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;padding-block:34px 10px;align-items:start}
.acct-card{background:var(--panel);border:2px solid var(--line);border-radius:18px;padding:clamp(18px,4vw,30px);display:grid;gap:14px}
.acct-card h1{font-family:var(--display);font-size:clamp(1.5rem,4vw,2rem);margin:0}
.acct-card .lead{margin:0;color:var(--muted)}
.acct-card form{display:grid;gap:12px}
.acct-card .f{display:grid;gap:4px;font-weight:600}
.acct-card input{width:100%;padding:11px 13px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--fg);font:inherit}
.acct-card input:focus{border-color:var(--accent);outline:none}
.btn.big{justify-content:center;padding:11px 18px;font-size:1.05rem;border-radius:12px}
.acct-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;color:var(--muted)}
.acct-links a{color:var(--accent-text);font-weight:700}
.ok-msg{color:var(--mint)!important}
.acct-head{display:flex;gap:14px;align-items:center}
.avatar.big{width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--display);font-size:1.6rem;flex:none}
.acct-plan{display:grid;gap:4px;justify-items:start;border:2px dashed var(--line);border-radius:14px;padding:14px 16px}
.acct-plan.on{border:2px solid var(--mint);background:color-mix(in srgb,var(--mint) 12%,transparent)}
.acct-plan span,.acct-plan small{color:var(--muted)}
.acct-more{border-top:1px solid var(--line);padding-top:10px}
.acct-more summary{cursor:pointer;font-weight:700}
.acct-more form{margin-top:10px}
.acct-side h2{font-family:var(--display);font-size:1.15rem;color:var(--accent-text);margin:6px 0 10px}
.acct-side ul{margin:0;padding-left:18px;display:grid;gap:10px;color:var(--muted)}
.acct-side b{color:var(--fg)}
@media (max-width:820px){.acct{grid-template-columns:minmax(0,1fr)}}
.logo-img{display:block;height:34px;width:auto;max-width:180px;object-fit:contain}
.foot-brand .logo-img{height:44px}
.user-btn .avatar .u-ico{width:18px;height:18px;color:var(--muted)}
.user-btn:hover .avatar .u-ico{color:var(--fg)}
.otp-in{font-family:var(--display);font-size:1.8rem!important;letter-spacing:.5em;text-align:center}
.linkbtn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:700;cursor:pointer}
.linkbtn:disabled{color:var(--muted);cursor:default}

/* ---------- category pages, 404, footer social ---------- */
.cat-hero{display:grid;gap:10px;padding:18px 0 22px}
.cat-hero h1{font-family:var(--display);font-size:clamp(1.8rem,4.6vw,2.8rem);line-height:1.05;margin:0}
.cat-hero h1 em{font-style:normal;color:var(--accent-text)}
.cat-hero p{margin:0;color:var(--muted);max-width:70ch}
.cat-hero .ctas{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pill-count{font-weight:800;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:6px 14px}
.cat-more{margin:12px 0 0;text-align:right;font-weight:800}
.shelf-head h2 a{color:inherit;text-decoration:none}.shelf-head h2 a:hover{color:var(--accent-text)}
.foot-col h3 a{color:inherit;text-decoration:none}
.big404{font-family:var(--display);font-size:clamp(5rem,20vw,10rem);line-height:.9;color:var(--accent-text);text-shadow:0 8px 0 color-mix(in srgb,var(--accent) 30%,transparent)}
.foot-social{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.foot-social a{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--panel);border:2px solid var(--line);color:var(--fg)}
.foot-social a:hover{border-color:var(--accent);color:var(--accent-text)}
.foot-social svg{width:18px;height:18px}