/* MOEx games: shared styles. Calm, predictable, big touch targets. */
.game.article{gap:22px}
.game button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.stage{position:relative}
.gctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gbtn{font:inherit;font-family:var(--display);font-weight:600;font-size:.98rem;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:9px 16px;cursor:pointer;min-height:46px}
.gbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.gbtn.quiet{border-style:dashed;font-weight:600;font-size:.9rem}
.gbtn:disabled{opacity:.45;cursor:default}
.gmsg{font-family:var(--display);font-weight:600;font-size:1.15rem;min-height:1.6em}
.how{background:var(--paper);border:var(--line);border-radius:16px;padding:12px 18px}
.how summary{font-family:var(--display);font-weight:600;cursor:pointer;padding:4px 0}
.how p{margin-top:8px}
.promise{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.promise li{font-size:.9rem;font-weight:700;border:1.5px solid var(--ink);border-radius:999px;padding:3px 12px;background:var(--paper)}
.ggroup h2{margin-bottom:6px}
.ggroup>p{color:var(--ink-soft);margin-bottom:14px}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gcard{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;text-decoration:none;background:var(--paper);border:var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--lift);transition:transform .12s}
.gcard:hover{transform:translate(-1px,-1px)}
.gcard svg{width:56px;height:56px}
.gcard strong{font-family:var(--display);font-weight:600;font-size:1.12rem;display:block}
.gcard span{font-size:.93rem;color:var(--ink-soft);display:block;line-height:1.4}
.more .gcards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
html.low .gcard{box-shadow:none;transform:none}
html.low .gcards{grid-template-columns:1fr}

/* bubble wrap */
.bw{display:grid;gap:8px;padding:14px;background:#E3EEF0;border:var(--line);border-radius:18px;user-select:none}
.bub{aspect-ratio:1;border-radius:50%;border:2px solid rgba(42,35,64,.28);background:radial-gradient(circle at 34% 30%,#fff 0 16%,rgba(255,255,255,.6) 30%,rgba(175,212,218,.75) 72%);box-shadow:inset -3px -4px 6px rgba(42,35,64,.10),1px 2px 0 rgba(42,35,64,.12);cursor:pointer;padding:0;transition:transform .08s}
.bub:active{transform:scale(.92)}
.bub.p{background:rgba(170,195,200,.32);border-style:dashed;box-shadow:none;transform:scale(.84);cursor:default}

/* fidget board */
.fb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fw{background:var(--paper);border:var(--line);border-radius:18px;padding:14px 16px;display:grid;gap:12px;align-content:start}
.fw h3{font-size:1rem}
.fw.wide{grid-column:1/-1}
.sws{display:flex;gap:14px;flex-wrap:wrap}
.tg{width:68px;height:38px;border-radius:999px;border:2.5px solid var(--ink);background:#E8E3D8;position:relative;cursor:pointer;padding:0}
.tg i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);transition:left .15s}
.tg[aria-pressed="true"]{background:var(--teal)}
.tg[aria-pressed="true"] i{left:33px}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.key{aspect-ratio:1;border-radius:14px;border:2.5px solid var(--ink);background:var(--sun);box-shadow:0 5px 0 var(--ink);cursor:pointer;padding:0;transition:transform .05s,box-shadow .05s}
.key:nth-child(2){background:var(--dusk)} .key:nth-child(3){background:var(--teal)} .key:nth-child(4){background:var(--coral)}
.key.dn{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.sl{width:100%;accent-color:var(--dusk);height:36px}
.spinw{display:grid;place-items:center}
.spin{width:150px;height:150px;border:0;background:none;cursor:pointer;padding:0;border-radius:50%}
.spin svg{width:100%;height:100%}
.abacus{display:grid;gap:12px}
.arow{position:relative;height:40px;border-radius:999px}
.arow::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:var(--ink);border-radius:2px}
.bead{position:absolute;top:2px;width:36px;height:36px;border-radius:50%;border:2.5px solid var(--ink);cursor:pointer;padding:0;transition:left .22s ease}
html.low .bead,html.low .tg i{transition:none}

/* sort */
.pile{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;min-height:60px;padding:12px;background:var(--paper);border:var(--line);border-radius:18px}
.item{aspect-ratio:1;border:2px solid transparent;border-radius:12px;background:none;cursor:pointer;padding:4px}
.item svg{width:100%;height:100%}
.item[aria-pressed="true"]{border-color:var(--ink);background:var(--sun-tint);box-shadow:2px 2px 0 var(--ink)}
.jars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.jar{border:2.5px solid var(--ink);border-top-width:6px;border-radius:10px 10px 22px 22px;background:rgba(255,255,255,.55);min-height:150px;cursor:pointer;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:6px}
.jar .lab{width:38px;height:38px}
.jar .in{display:flex;flex-wrap:wrap-reverse;justify-content:center;gap:2px;margin-top:auto}
.jar .in svg{width:22px;height:22px}
.jar.ok{background:var(--teal-tint)}
@media (max-width:520px){.pile{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* mosaic */
.mosaic{display:grid;gap:2px;background:color-mix(in srgb,var(--ink) 22%,transparent);border:var(--line);border-radius:12px;padding:2px;touch-action:none;user-select:none;max-width:560px;margin:0 auto;width:100%}
.mosaic div{aspect-ratio:1;background:#fff;border-radius:2px}
.pal{display:flex;flex-wrap:wrap;gap:8px}
.pal button{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--ink);cursor:pointer;padding:0}
.pal button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink)}
.pal .er{background:repeating-linear-gradient(45deg,#fff 0 5px,#e9e4da 5px 10px)}

/* light drawing + lava */
.cv{display:block;width:100%;height:min(62vh,560px);min-height:320px;border:var(--line);border-radius:18px;background:#141729;touch-action:none;cursor:crosshair}
.cv.lava{cursor:pointer}

/* pairs */
.pairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:520px;margin:0 auto;width:100%}
.card2{aspect-ratio:3/4;border:2.5px solid var(--ink);border-radius:14px;cursor:pointer;padding:8px;background:repeating-linear-gradient(135deg,var(--dusk-tint) 0 8px,var(--paper) 8px 16px);display:grid;place-items:center}
.card2 svg{width:80%;height:80%;visibility:hidden}
.card2.up{background:var(--paper)}
.card2.up svg{visibility:visible}
.card2.done{background:var(--teal-tint);border-style:dashed;cursor:default}

/* sliding puzzle */
.slide{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1;background:color-mix(in srgb,var(--ink) 12%,var(--ground));border:var(--line);border-radius:16px}
.tile{position:absolute;border:2.5px solid var(--ink);border-radius:12px;font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,6vw,2rem);color:var(--ink);cursor:pointer;padding:0;transition:left .14s ease,top .14s ease;display:grid;place-items:center}
html.low .tile{transition:none}

/* sudoku */
.sud{display:grid;max-width:480px;margin:0 auto;width:100%;border:3px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--ink);gap:3px}
.sbox{display:grid;gap:1px;background:color-mix(in srgb,var(--ink) 35%,transparent)}
.sud button{aspect-ratio:1;border:0;background:var(--paper);font-family:var(--display);font-weight:600;font-size:clamp(1rem,5vw,1.6rem);color:var(--teal);cursor:pointer;padding:0;border-radius:0}
.sud button.g{color:var(--ink);font-weight:700}
.sud button.hl{background:#F6F1E6}
.sud button.same{background:var(--sun-tint)}
.sud button.sel{background:var(--dusk-tint);box-shadow:inset 0 0 0 3px var(--dusk)}
.sud button.bad{color:var(--coral)}
.pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:480px;margin:0 auto;width:100%}
.pad.four{grid-template-columns:repeat(5,minmax(0,1fr))}
.pad button{min-height:52px;font-family:var(--display);font-weight:700;font-size:1.3rem;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);cursor:pointer}
.pad button.er{font-size:.95rem}

/* steady sounds */
.noise{display:grid;gap:14px}
.ntypes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ntypes button{border:2.5px solid var(--ink);border-radius:16px;background:var(--paper);padding:14px 10px;cursor:pointer;font:inherit;text-align:left;display:grid;gap:4px;align-content:start}
.ntypes button strong{font-family:var(--display);font-weight:600;font-size:1.05rem}
.ntypes button span{font-size:.88rem;color:var(--ink-soft);line-height:1.35}
.ntypes button[aria-pressed="true"]{background:var(--teal-tint);box-shadow:3px 3px 0 var(--ink)}
.bigplay{font:inherit;font-family:var(--display);font-weight:700;font-size:1.3rem;border:2.5px solid var(--ink);border-radius:999px;padding:16px 30px;background:var(--teal);color:#fff;cursor:pointer;justify-self:start;min-width:180px}
.bigplay[aria-pressed="true"]{background:var(--ink)}
.nrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nrow label{font-weight:800}
.nrow input[type=range]{flex:1;min-width:160px;accent-color:var(--teal);height:36px}
@media (max-width:520px){.fb{grid-template-columns:1fr}.ntypes{grid-template-columns:1fr}}