:root{--bg:#FFF6E3;--bg2:#FFE9BF;--surface:#FFFFFF;--surface2:#FFF0D2;--ink:#2B1D16;--muted:#6B5446;--line:#2B1D16;--shadow:#2B1D16;--dark:#2B1D16;
--purple:#0B7F77;--yellow:#FFC933;--orange:#FF8A3D;--pink:#FF6B8B;--teal:#27C2B3;--green:#6CCB5F;--blue:#4FA8F0;--red:#E8505B;
--good:#0E7A3D;--good-bg:#DDF4D6;--bad:#B3261E;--bad-bg:#FFE0DA;--focus:#0B7F77;--glow:transparent;
--display:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;--body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:light}
:root[data-theme="dark"]{--bg:#2A1D17;--bg2:#35251D;--surface:#3E2C22;--surface2:#4A362A;--ink:#FFF3E0;--muted:#E2C9AE;--line:#FFD9A0;--shadow:#120A06;--good:#8BE59A;--good-bg:#1D4A2A;--bad:#FFA9A0;--bad-bg:#5A241F;--focus:#FFC933;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);background-image:repeating-linear-gradient(45deg,var(--bg2) 0 2px,transparent 2px 22px);background-attachment:fixed;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;font-weight:600}
.wrap{max-width:1040px;margin:0 auto;padding:16px 16px 40px}
a{color:var(--ink)}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0 0 10px}
h1{font-size:clamp(1.9rem,5vw,2.8rem);letter-spacing:.01em}h2{font-size:1.5rem}h3{font-size:1.15rem}
p{margin:0 0 12px}
.muted{color:var(--muted);font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:8px 14px;z-index:99}.skip:focus{left:8px}
/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:8px 0 14px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.45rem;color:var(--ink);text-decoration:none;margin-right:auto}
.brand svg{flex:none}
.nav{display:flex;flex-wrap:wrap;gap:6px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:10px;padding:10px 18px;min-height:46px;font:inherit;font-weight:800;cursor:pointer;text-decoration:none;box-shadow:3px 3px 0 var(--shadow);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow)}
.btn.primary{background:var(--yellow);color:#2B1D16;border-color:var(--line)}
.btn.small{padding:6px 14px;min-height:38px;font-size:.95rem;border-radius:9px;box-shadow:0 3px 0 var(--shadow)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--surface)}
.btn.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.card{background:var(--surface);border:2px solid var(--line);border-radius:10px;box-shadow:5px 5px 0 var(--shadow);padding:20px}
.seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.seg .btn{box-shadow:0 3px 0 var(--shadow)}
.ctrls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:14px}
.ctrls>label{display:flex;align-items:center;gap:8px;font-weight:800}
select,input[type=text]{font:inherit;font-weight:700;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:6px 12px;min-height:44px}
/* hero + game grid */
.hero{display:grid;gap:8px;padding:18px 4px 8px;max-width:720px}
.hero p{font-size:1.15rem;color:var(--muted);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin:18px 0 26px}
.tile{display:grid;gap:6px;justify-items:center;text-align:center;padding:20px 14px 22px;background:var(--c,#fff);color:var(--dark);border:2px solid var(--line);border-radius:12px;box-shadow:6px 6px 0 var(--shadow);text-decoration:none;transition:transform .1s}
.tile:hover{transform:translate(-2px,-2px) rotate(-.6deg)}
.tile:active{transform:translate(3px,3px)}
.tile .ico{display:grid;place-items:center;width:78px;height:78px;border-radius:14px;transform:rotate(-4deg);background:#fff;border:3px solid var(--dark);margin-bottom:4px}
.tile .nm{font-family:var(--display);font-weight:800;font-size:1.35rem}
.tile .meta{font-weight:700;font-size:.95rem}
.tile .ages{font-size:.8rem;font-weight:800;background:rgba(255,255,255,.7);border-radius:999px;padding:1px 10px}
.sec-h{margin:26px 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:3px 12px;font-weight:800;font-size:.9rem}
/* game page */
.gamehead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:4px 0 6px}
.crumbs{font-weight:800;font-size:.95rem;margin-bottom:6px}
.panel{padding:18px 16px 20px;max-width:620px;margin:0 auto 18px;display:grid;gap:12px}
.panel.wide{max-width:760px}
.stats{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;font-weight:800}
.stats b{font-family:var(--display);font-size:1.2rem}
.msg{font-weight:800;text-align:center;min-height:1.5em}
.end{display:grid;gap:10px;justify-items:center;text-align:center;font-weight:700}
.howto{max-width:760px;margin:18px auto 0}
.howto h2{font-size:1.25rem}
.howto li{margin-bottom:4px}
.more{margin-top:30px}
.adslot{margin:26px auto 0;text-align:center;min-height:0}
.adslot:empty{display:none}
.adslot:not(:empty)::before{content:'Advertisement';display:block;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.doc{max-width:760px;padding:26px 28px;margin:0 auto}
.doc h2{margin-top:24px}
.doc li{margin-bottom:6px}
.sitefoot{margin-top:44px;padding-top:18px;border-top:3px dashed var(--line);display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-weight:700;color:var(--muted);font-size:.95rem}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.sitefoot a{color:var(--ink);font-weight:800}
.sitefoot .grow{margin-right:auto}
/* confetti */
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
#confetti i{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;animation:fall 1.8s ease-in forwards}
@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9}}
/* ---- word games (Peek-a-Word, Letter Trails, Word Scramble) ---- */
.wg-clue{font-weight:800;color:var(--muted);text-align:center;min-height:1.4em}
.wg-legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:0;margin:0;font-weight:700;font-size:.9rem;color:var(--muted)}
.wg-legend li{display:flex;align-items:center;gap:6px}.wg-legend .pk-cell{width:26px;height:26px;font-size:.85rem;border-width:2px;border-radius:8px}
.pk-board{display:grid;gap:7px;justify-content:center}
.pk-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,56px));gap:7px}
.pk-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:2px solid var(--line);border-radius:16px;background:var(--surface2);font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--ink)}
.pk-cell.typed{background:var(--surface)}
.pk-cell.hit{background:var(--purple);color:#fff;border-color:var(--dark)}
.pk-cell.near{background:#FF9433;color:var(--dark);border-color:var(--dark)}
.pk-cell.miss{background:var(--muted);color:var(--surface);border-color:var(--muted);opacity:.75}
.pk-keyboard{display:grid;gap:6px}
.pk-keys{display:flex;justify-content:center;gap:4px}
.pk-key{flex:1 1 0;min-width:0;max-width:46px;height:50px;padding:0;border:2px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-weight:800;font-size:1rem;cursor:pointer}
.pk-key.wide{flex:1.6 1 0;max-width:68px;font-size:.78rem}
.pk-key.hit{background:var(--purple);color:#fff}.pk-key.near{background:#FF9433;color:var(--dark)}.pk-key.miss{background:var(--muted);color:var(--surface);opacity:.6}
.tr-theme{text-align:center;font-family:var(--display);font-weight:700;font-size:1.5rem}
.tr-theme span{display:block;font-family:var(--body);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.tr-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:0;margin:0}
.tr-chip{padding:4px 10px;border:2px solid var(--line);border-radius:999px;font-weight:800;font-size:.85rem;background:var(--surface2)}
.tr-now{text-align:center;font-family:var(--display);font-weight:700;font-size:1.25rem;min-height:1.5em;letter-spacing:.06em}
.tr-grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:340px;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none}
.tr-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.tr-lines polyline{fill:none;stroke-width:.2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.tr-lines polyline.cur{stroke:var(--purple)}
.tr-cell{position:relative;z-index:2;justify-self:center;width:78%;aspect-ratio:1;margin:11%;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.45rem;cursor:pointer;touch-action:none}
.tr-cell.on{background:var(--purple);color:#fff}
.tr-cell.found{background:var(--w);color:var(--dark);cursor:default}
.tr-cell.hint{box-shadow:0 0 0 3px var(--yellow);animation:wgpulse 1.2s ease-in-out infinite}
@keyframes wgpulse{50%{box-shadow:0 0 0 7px var(--yellow)}}
.sc-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sc-tile{width:52px;height:56px;font-family:var(--display);font-weight:800;font-size:1.6rem;border:2px solid var(--line);border-radius:14px;background:var(--yellow);color:var(--dark);cursor:pointer;box-shadow:3px 3px 0 var(--shadow)}
.sc-tile[disabled]{opacity:.35;transform:none}
.sc-answer{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:60px}
.sc-slot{width:52px;height:56px;border:3px dashed var(--line);border-radius:14px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.6rem;background:var(--surface2)}
.sc-slot.f{border-style:solid;background:var(--surface)}
/* ---- memory match ---- */
.mm-grid{display:grid;gap:10px;justify-content:center;grid-template-columns:repeat(var(--c),minmax(0,92px))}
.mm-card{aspect-ratio:1;border:2px solid var(--line);border-radius:18px;background:var(--purple);color:#fff;font-size:2.2rem;cursor:pointer;display:grid;place-items:center;box-shadow:3px 3px 0 var(--shadow);padding:0;font-family:inherit}
.mm-card .f{display:none}
.mm-card.up{background:var(--surface);cursor:default}.mm-card.up .f{display:block}.mm-card.up .b{display:none}
.mm-card.done{background:var(--good-bg);opacity:.9}
.mm-card .b{font-family:var(--display);font-weight:800;font-size:1.6rem}
/* ---- math sprint ---- */
.ms-q{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,9vw,3.4rem);text-align:center;margin:6px 0}
.ms-in{font:inherit;font-family:var(--display);font-weight:800;font-size:2rem;text-align:center;width:min(220px,100%);margin:0 auto;display:block;border:2px solid var(--line);border-radius:16px;padding:8px;background:var(--surface);color:var(--ink)}
.ms-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:280px;margin:0 auto;width:100%}
.ms-pad .btn{font-size:1.3rem;padding:8px}
.ms-bar{height:16px;border:2px solid var(--line);border-radius:999px;background:var(--surface2);overflow:hidden}
.ms-bar i{display:block;height:100%;background:var(--green);transition:width .25s linear}
/* ---- slide puzzle ---- */
.sp-grid{display:grid;gap:8px;margin:0 auto;width:min(360px,100%);aspect-ratio:1}
.sp-t{border:2px solid var(--line);border-radius:16px;background:var(--c,var(--yellow));color:var(--dark);font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,6vw,2.2rem);cursor:pointer;box-shadow:3px 3px 0 var(--shadow);padding:0}
.sp-t.e{visibility:hidden}
/* ---- pattern echo ---- */
.pe-pads{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(340px,100%);margin:0 auto}
.pe-pad{aspect-ratio:1;border:4px solid var(--line);border-radius:28px;cursor:pointer;opacity:.55;box-shadow:0 5px 0 var(--shadow);padding:0;transition:opacity .08s,transform .08s}
.pe-pad.lit{opacity:1;transform:scale(1.04);filter:brightness(1.2)}
.pe-pad[disabled]{cursor:default}
/* ---- sudoku ---- */
.su-grid{display:grid;margin:0 auto;border:4px solid var(--line);border-radius:12px;overflow:hidden;width:min(360px,100%);aspect-ratio:1;background:var(--line);gap:0}
.su-c{background:var(--surface);border:0;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,6vw,2rem);color:var(--ink);padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px var(--muted)}
.su-c.given{background:var(--surface2);cursor:default}
.su-c.sel{background:var(--yellow);color:var(--dark)}
.su-c.bad{color:var(--bad)}
.su-c.br{border-right:2px solid var(--line)}.su-c.bb{border-bottom:2px solid var(--line)}
.su-pad{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.su-pad .btn{min-width:48px;padding:8px 10px}
/* ---- minesweeper ---- */
.mn-grid{display:grid;gap:3px;margin:0 auto;width:min(420px,100%)}
.mn-c{aspect-ratio:1;border:2px solid var(--line);border-radius:8px;background:var(--purple);color:#fff;font-weight:800;font-size:clamp(.8rem,3.4vw,1.2rem);cursor:pointer;padding:0;font-family:var(--display)}
.mn-c.open{background:var(--surface2);color:var(--ink);cursor:default}
.mn-c.mine{background:var(--bad-bg);color:var(--bad)}
.mn-c.n1{color:#2563EB}.mn-c.n2{color:#0E8A45}.mn-c.n3{color:#C0301F}.mn-c.n4{color:#6D28D9}.mn-c.n5,.mn-c.n6,.mn-c.n7,.mn-c.n8{color:#B45309}
/* ---- connect four ---- */
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:min(420px,100%);margin:0 auto;padding:10px;background:#2D5BFF;border:4px solid var(--line);border-radius:22px}
.c4-col{display:grid;gap:6px;background:transparent;border:0;padding:0;cursor:pointer}
.c4-col[disabled]{cursor:default}
.c4-d{aspect-ratio:1;border-radius:50%;background:var(--bg);border:3px solid #16308F}
.c4-d.r{background:#FF5C5C}.c4-d.y{background:#FFD23F}.c4-d.w{box-shadow:0 0 0 4px #fff;animation:wgpulse 1s ease-in-out infinite}
/* ---- snake ---- */
.sn-canvas{display:block;margin:0 auto;border:4px solid var(--line);border-radius:14px;background:var(--surface2);width:min(380px,100%);height:auto;touch-action:none}
.sn-pad{display:grid;grid-template-columns:repeat(3,64px);gap:6px;justify-content:center}
.sn-pad .btn{padding:6px;font-size:1.3rem}
@media (max-width:520px){.doc{padding:20px 18px}.nav .btn{padding:6px 10px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#2A1D17;--bg2:#35251D;--surface:#3E2C22;--surface2:#4A362A;--ink:#FFF3E0;--muted:#E2C9AE;--line:#FFD9A0;--shadow:#120A06;--good:#8BE59A;--good-bg:#1D4A2A;--bad:#FFA9A0;--bad-bg:#5A241F;--focus:#FFC933;color-scheme:dark}}
@media (max-width:420px){.mn-grid{gap:2px}}