/* Styles shared by framework-based games (loaded only on game pages that use frame.html). */
.panel-wide{max-width:900px}
.panel{background:#fff;border-color:var(--line)}
.panel .bar .name{color:#12308a;font-size:1.5rem}.panel .box{background:#2f7bf5}
.tools{margin-top:-4px}
.sel{border:1.5px solid #bcd3f7;border-radius:10px;padding:8px 10px;font:inherit;background:#fff;min-height:44px}
.msgline{min-height:1.5em;margin:10px 0 0;text-align:center;color:#33405a;font-weight:600}
.stage{display:flex;flex-direction:column;align-items:center;gap:10px;user-select:none;-webkit-user-select:none}
.stage .canvas-wrap{width:100%;border-radius:12px;background:#0f2233}
.stage canvas{touch-action:none}
.jk-board{display:grid;gap:2px;width:100%;max-width:520px}
.jk-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#f1f5fc;border:0;border-radius:6px;font:700 clamp(.9rem,4vw,1.4rem)/1 system-ui,sans-serif;color:#14213d;cursor:pointer;padding:0;position:relative;min-width:0}
.jk-cell:focus-visible{outline:3px solid #2f7bf5;z-index:2}
.jk-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.jk-key{min-width:42px;min-height:44px;border:0;border-radius:10px;background:#e4efff;color:#0e3f91;font:700 1.1rem system-ui,sans-serif;cursor:pointer;flex:1 1 38px;max-width:64px}
.jk-key:active,.jk-key.on{background:#2f7bf5;color:#fff}
.jk-help{font-size:.86rem;color:#56627a;text-align:center;margin:0}
.jk-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 14px;background:#e4efff;color:#0e3f91;font-weight:700}
.jk-input{border:1.5px solid #bcd3f7;border-radius:10px;padding:10px 12px;font:inherit;font-size:1.1rem;min-width:0;width:100%;max-width:340px;text-align:center}
.jk-card{width:clamp(44px,12vw,66px);aspect-ratio:5/7;border-radius:7px;background:#fff;border:1.5px solid #b8c4da;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 1rem/1 system-ui,sans-serif;position:relative;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.jk-card.red{color:#d32f2f}.jk-card.back{background:repeating-linear-gradient(45deg,#2f7bf5 0 6px,#1e63d8 6px 12px);border-color:#12308a}
.jk-card.sel{outline:3px solid #ffb02e;z-index:3}.jk-card.ph{background:rgba(0,0,0,.06);border:1.5px dashed #b8c4da;box-shadow:none}
.jk-card small{font-size:.7rem;position:absolute;top:3px;left:4px}
.jk-table{background:#2e7d4f;border-radius:14px;padding:10px;width:100%}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* nonogram */
.nono{border-collapse:collapse;margin:0 auto;user-select:none;touch-action:none}
.nono td{padding:0}
.nh{font-weight:700;color:#14213d;text-align:center;font-size:.78em;line-height:1.1;padding:2px 3px}
.nhr{text-align:right;white-space:nowrap;padding-right:6px}
.nc{width:clamp(18px,5.4vw,36px);height:clamp(18px,5.4vw,36px);background:#f1f5fc;border:1px solid #c5d3ea;text-align:center;cursor:pointer;color:#8a96ad;font-size:.8em}
.nc.on{background:#14213d}.nc.r5{border-right:2px solid #14213d}.nc.b5{border-bottom:2px solid #14213d}
/* minesweeper */
.mines{max-width:460px}.mc{background:#c7d6ee;font-size:clamp(.7rem,3.2vw,1.1rem);box-shadow:inset 0 0 0 2px #e6eefb;border-radius:3px}
/* sort puzzles */
.tubes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}
.tube{width:clamp(36px,10vw,52px);height:clamp(130px,34vw,180px);border:3px solid #9db4d8;border-top:0;border-radius:0 0 22px 22px;background:#f4f8ff;display:flex;flex-direction:column-reverse;padding:0;cursor:pointer;overflow:hidden}
.tube i{display:block;height:25%;width:100%}.tube.sel{border-color:#ffb02e;transform:translateY(-8px)}
.balls .tube{align-items:center;justify-content:flex-start;padding:4px 0;gap:3px}.balls .tube i{width:80%;height:auto;aspect-ratio:1;border-radius:50%;flex:none}
/* lights out */
.lo{background:#2a3350;border-radius:10px;transition:background .15s}.lo.lit{background:#ffd54a;box-shadow:0 0 12px #ffd54a}.lo.hint{outline:4px solid #2f7bf5}
/* mastermind */
.mm-rows{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center}
.mm-row{display:flex;gap:6px;align-items:center;justify-content:center}.mm-row em{font-style:normal;margin-left:8px;min-width:60px;font-size:.8rem;color:#56627a;text-align:left}
.mm-row .fb b{font-size:.95rem;margin-right:1px}.fb .k{color:#14213d}.fb .w{color:#b8c4da;text-shadow:0 0 0 #fff}
.mm-peg{width:clamp(32px,9vw,42px);height:clamp(32px,9vw,42px);border-radius:50%;border:0;color:#fff;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.mm-peg.blank{background:#e4efff;border:2px dashed #9db4d8}.mm-row.cur{padding:6px;background:#eef4fd;border-radius:12px}
/* hanoi */
.hanoi{display:flex;gap:6px;width:100%;max-width:520px}
.peg{flex:1;height:clamp(170px,46vw,230px);background:#f4f8ff;border:2px solid #c5d3ea;border-radius:12px;position:relative;display:flex;flex-direction:column-reverse;align-items:center;padding:4px 0 6px;cursor:pointer;gap:3px}
.peg .pole{position:absolute;bottom:0;top:12px;width:8px;background:#9db4d8;border-radius:4px}.peg.sel{border-color:#ffb02e}
.disc{display:block;height:clamp(14px,4.2vw,22px);border-radius:8px;position:relative;z-index:1}.disc.lift{box-shadow:0 0 0 3px #ffb02e}

/* kakuro / futoshiki / hitori / kenken */
.kk{max-width:460px}.kw{background:#fff;font-size:clamp(1rem,5vw,1.5rem)}
.kb{background:#2a3350;position:relative;color:#fff;font-size:.62rem;cursor:default;overflow:hidden}
.kb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),#8da0cf,transparent calc(50% + 1px))}
.kb .kd{position:absolute;left:3px;bottom:2px}.kb .ka{position:absolute;right:3px;top:2px}
.fc{font-size:clamp(1.1rem,6vw,1.7rem);border-radius:8px;border:1px solid #c5d3ea}.fc.given{font-weight:800}
.fs{display:flex;align-items:center;justify-content:center;color:#d32f2f;font-weight:800;font-size:1.1rem;aspect-ratio:auto}
.hc{font-size:clamp(1rem,5vw,1.6rem);background:#fff;border:1px solid #c5d3ea}.hc.blk{background:#14213d;color:#14213d}.hc.cir{box-shadow:inset 0 0 0 3px #2fa866;border-radius:50%}
.kc{position:relative;font-size:clamp(1.1rem,6vw,1.7rem)}.kc .kl{position:absolute;top:2px;left:3px;font-size:.55em;color:#56627a;font-weight:700}
.hashi{width:100%;max-width:520px;height:auto;background:#f4f8ff;border-radius:12px;touch-action:manipulation}

/* mahjong */
.mj-wrap{width:100%;overflow-x:auto;padding-bottom:4px}
.mj{position:relative;width:100%;--u:12px}
.mt{position:absolute;padding:0;background:#fffdf3;border:1px solid #b8a97a;border-radius:calc(var(--u)*.35);box-shadow:calc(var(--u)*.3) calc(var(--u)*.4) 0 #7f8f68;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;cursor:pointer;font-weight:800;font-family:system-ui,sans-serif;overflow:hidden}
.mt b{font-size:calc(var(--u)*.95)}.mt i{font-style:normal;font-size:calc(var(--u)*.8)}
.mt.blocked{background:#e5dfc8;filter:saturate(.7)}.mt.sel{outline:3px solid #ffb02e;background:#fff3c4}.mt.hint{animation:blink .4s 3;background:#cfe8ff}
@keyframes blink{50%{background:#ffb02e}}
.mj-tray{display:flex;gap:6px;background:#e4efff;border-radius:12px;padding:8px;justify-content:center}
.mt-s{width:clamp(34px,10vw,48px);height:clamp(42px,12vw,58px);background:#fffdf3;border:1px solid #b8a97a;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1;font-size:1rem}.mt-s.ph0{background:#fff;opacity:.5;border-style:dashed}
.mt-s i{font-style:normal;font-size:.8rem}
.mc2{background:#fffdf3;border:1px solid #b8a97a;border-radius:8px;box-shadow:2px 3px 0 #7f8f68;flex-direction:column;gap:0;font-size:1rem;line-height:1}.mc2 b{font-size:1.1rem}.mc2 i{font-style:normal;font-size:.9rem}
.mc2.sel{outline:3px solid #ffb02e;background:#fff3c4}.mc2.hint{animation:blink .4s 3}
.mjs{display:flex;flex-direction:column;gap:6px;width:100%}.mjs-row{display:flex;gap:4px;justify-content:center;min-height:clamp(42px,12vw,58px)}
.mjs .mt-s{cursor:pointer;padding:0}.mt-s.blocked{background:#e5dfc8;opacity:.8}.mt-s.sel{outline:3px solid #ffb02e}.mt-s.hint{animation:blink .4s 3}
.mt-s b{font-size:1.1rem}

/* solitaire */
.sol{display:grid;width:100%;justify-content:center;row-gap:12px;--cw:60px;touch-action:manipulation}
.sol .pile{position:relative;width:var(--cw);min-height:calc(var(--cw)*1.4);border-radius:6px}
.sol .pile.emptyp{border:1.5px dashed rgba(0,0,0,.22);background:rgba(0,0,0,.03)}
.sol .jk-card{position:absolute;left:0;width:100%;aspect-ratio:5/7;height:auto;cursor:pointer;justify-content:space-between;padding:2px}
.sol .jk-card small{position:static;align-self:flex-start;font-size:calc(var(--cw)*.24);line-height:1;font-weight:800}
.sol .jk-card b{font-size:calc(var(--cw)*.42);line-height:1;margin:auto}
.sol .plabel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8a96ad;font-weight:800;font-size:calc(var(--cw)*.4)}
.sol .pcount{position:absolute;right:3px;bottom:2px;background:rgba(255,255,255,.85);border-radius:8px;padding:0 5px;font-size:.7rem;font-weight:700;z-index:3}
.sol .stock{cursor:pointer}
.table-bg{background:#2e7d4f;border-radius:14px;padding:8px}

/* card games */
.pyr,.tp{position:relative;width:100%;max-width:560px;aspect-ratio:9/7;margin:0 auto;background:#2e7d4f;border-radius:14px}
.tp{aspect-ratio:10/6.6}
.pyr .jk-card,.tp .jk-card{position:absolute;width:11%;cursor:pointer}.tp .jk-card{width:9.4%}
.pyr .jk-card.blocked,.tp .jk-card.blocked,.golf .jk-card.blocked{filter:brightness(.78)}
.pyr-s,.tp-s{position:absolute;left:2%;bottom:3%;width:11%}.pyr-w,.tp-w{position:absolute;left:16%;bottom:3%;width:11%}.tp-s{width:9.4%}.tp-w{width:9.4%;left:14%}
.pyr-s .jk-card,.pyr-w .jk-card,.tp-s .jk-card,.tp-w .jk-card{position:static;width:100%}
.pyr-s .pcount,.tp-s .pcount,.golf .pcount,.acc .pcount{position:absolute;right:2px;bottom:2px;background:#fff;border-radius:8px;padding:0 5px;font-size:.7rem;font-weight:700}
.pyr-s,.tp-s{cursor:pointer}.pyr-s,.pyr-w,.tp-s,.tp-w{position:absolute}
.golf{width:100%;max-width:560px;background:#2e7d4f;border-radius:14px;padding:10px}
.golf-cols{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.golf-col{position:relative;aspect-ratio:5/12}
.golf-col .jk-card{position:absolute;left:0;width:100%}.golf .jk-row{margin-top:10px;align-items:flex-start}.golf .pyr-s,.golf .pyr-w{width:clamp(44px,12vw,66px);position:relative}
.acc{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.acc .jk-card{width:clamp(34px,10.5vw,50px);cursor:pointer;font-size:.8rem}.acc .jk-card small{font-size:.65rem}.acc .jk-card b{font-size:1rem}
.op,.bj,.war,.hl{width:100%;display:flex;flex-direction:column;gap:12px;align-items:center;background:#2e7d4f;border-radius:14px;padding:12px;color:#fff}
.op-p,.bj-h{width:100%;text-align:center}.op-p.turn .op-n{color:#ffd54a}.op-n{font-weight:700;margin-bottom:6px}
.op-h{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.op-h .jk-card{width:clamp(34px,9vw,52px)}.op-h .pick{cursor:pointer;outline:2px dashed #ffd54a}
.war{flex-direction:row;justify-content:space-around}.war-c{text-align:center}.war-vs{font-size:1.6rem;font-weight:800}
.hl{flex-direction:row;justify-content:center}.hl-c .jk-card{width:clamp(70px,22vw,110px)}.hl .jk-card b{font-size:2rem}.hl .jk-card small{font-size:1.1rem}
.cm{aspect-ratio:5/7;border:0;padding:0;background:none;cursor:pointer;position:relative}
.cm .cb,.cm .cf{position:absolute;inset:0;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:3px}
.cm .cb{background:repeating-linear-gradient(45deg,#2f7bf5 0 6px,#1e63d8 6px 12px);border:1.5px solid #12308a}
.cm .cf{background:#fff;border:1.5px solid #b8c4da;visibility:hidden;font-weight:800}.cm .cf.red{color:#d32f2f}.cm .cf small{font-size:.8rem;align-self:flex-start}.cm .cf b{font-size:1.6rem;margin:auto}
.cm.on .cf,.cm.done .cf{visibility:visible}.cm.on .cb,.cm.done .cb{visibility:hidden}.cm.done{opacity:.6}
.jk-card.sel{outline:3px solid #ffb02e}

/* arcade */
.tpad{display:none;gap:10px;justify-content:center;width:100%;touch-action:none}
.tpad-b{flex:1 1 0;max-width:90px;min-height:56px;border:0;border-radius:14px;background:#2f7bf5;color:#fff;font-size:1.5rem;cursor:pointer;touch-action:none;user-select:none}
.tpad-b:active{background:#0f55bd}
@media(pointer:coarse),(max-width:820px){.tpad{display:flex}}
.stage .canvas-wrap{max-width:520px}
.moles{max-width:360px}.hole{aspect-ratio:1;border:0;border-radius:50%;background:#6d4c41;box-shadow:inset 0 -10px 0 #4e342e;position:relative;cursor:pointer;overflow:hidden;padding:0}
.hole::after{content:"";position:absolute;left:18%;right:18%;bottom:-60%;height:70%;background:#a1887f;border-radius:50% 50% 0 0;transition:bottom .08s}
.hole.up::after{bottom:8%}.hole.hit::after{background:#ef5350}
.react{width:100%;max-width:520px;min-height:260px;border:0;border-radius:16px;color:#fff;font:800 1.6rem system-ui,sans-serif;cursor:pointer;padding:16px}
.aim{position:relative;width:100%;max-width:520px;aspect-ratio:4/3;background:#eef4fd;border-radius:14px;touch-action:none;overflow:hidden}
.aim-t{position:absolute;border-radius:50%;border:0;background:radial-gradient(circle,#fff 0 18%,#e53935 19% 45%,#fff 46% 62%,#e53935 63%);cursor:pointer;padding:0}

/* word games */
.kbd{display:flex;flex-direction:column;gap:6px;width:100%;max-width:520px}
.kb-row{display:flex;gap:4px;justify-content:center}
.kk{flex:1 1 0;min-width:0;max-width:44px;min-height:46px;padding:0;font-size:1rem}.kk.wide{max-width:120px;flex:2 1 0}.kk.dg{max-width:56px;font-size:.9rem}
.kk.ok{background:#2fa866;color:#fff}.kk.near{background:#f2b231;color:#fff}.kk.no{background:#9aa5b8;color:#fff}.kk.used{opacity:.35}
.wl{display:flex;gap:6px;justify-content:center}.wl span{width:clamp(38px,11vw,52px);height:clamp(38px,11vw,52px);display:flex;align-items:center;justify-content:center;border:2px solid #c5d3ea;border-radius:8px;font:800 1.5rem system-ui,sans-serif;background:#fff;text-transform:uppercase}
.wl span.ok{background:#2fa866;border-color:#2fa866;color:#fff}.wl span.near{background:#f2b231;border-color:#f2b231;color:#fff}.wl span.no{background:#9aa5b8;border-color:#9aa5b8;color:#fff}.wl span.cur{border-color:#2f7bf5}
.wgrid{display:flex;flex-direction:column;gap:6px}
.hang{width:min(220px,60%);height:auto}.hang *{stroke:#14213d;stroke-width:4;fill:none;stroke-linecap:round}
.word-line{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font:800 1.8rem system-ui,sans-serif}.word-line span{min-width:1.1em;border-bottom:3px solid #14213d;text-align:center;text-transform:uppercase}
.ws{display:grid;gap:1px;width:100%;max-width:480px;touch-action:none}.ws .c{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#f1f5fc;font:700 clamp(.8rem,3.8vw,1.2rem) system-ui,sans-serif;text-transform:uppercase;cursor:pointer;border-radius:4px}
.ws .c.sel{background:#8fbaff}.ws .c.found{background:#b8ecc9}.ws .c.start{background:#ffb02e}
.wlist{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.wlist span{padding:2px 10px;border-radius:999px;background:#e4efff;font-size:.9rem}.wlist span.done{background:#b8ecc9;text-decoration:line-through}
.tiles{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.tile{min-width:44px;height:48px;border:0;border-radius:10px;background:#e4efff;color:#0e3f91;font:800 1.3rem system-ui,sans-serif;text-transform:uppercase;cursor:pointer}.tile.used{opacity:.3}.tile.sel{outline:3px solid #ffb02e}
.slot{min-width:44px;height:48px;border:2px dashed #9db4d8;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font:800 1.3rem system-ui,sans-serif;text-transform:uppercase;background:#fff;cursor:pointer}.slot.fill{border-style:solid;background:#fff3c4}
.xw{display:grid;gap:1px;width:100%;max-width:560px;background:#14213d;padding:1px}.xw .x{aspect-ratio:1;background:#fff;position:relative;border:0;padding:0;font:800 clamp(.8rem,3.5vw,1.2rem) system-ui,sans-serif;text-transform:uppercase;cursor:pointer;color:#1668e3}.xw .x.blk{background:#14213d;cursor:default}
.xw .x.cur{background:#ffe9a8}.xw .x.word{background:#dbe9ff}.xw .x.bad{color:#d32f2f}.xw .x small{position:absolute;left:1px;top:0;font-size:.55rem;color:#14213d;font-weight:700}
.clues{width:100%;max-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:.88rem}.clues h3{font-size:.95rem;margin:0 0 4px}.clues ol{margin:0;padding-left:0;list-style:none}.clues li{padding:2px 4px;border-radius:6px;cursor:pointer}.clues li.on{background:#ffe9a8}.clues li b{margin-right:4px}
@media(max-width:560px){.clues{grid-template-columns:1fr}}
.cat-words{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:520px}.cw{min-height:48px;border:0;border-radius:10px;background:#e4efff;color:#14213d;font:700 .85rem system-ui,sans-serif;padding:4px;cursor:pointer;word-break:break-word}.cw.sel{background:#2f7bf5;color:#fff}.cw.done{background:#b8ecc9}.cw.bad{background:#ffc9c9}
.group{width:100%;max-width:520px;border-radius:10px;padding:8px;text-align:center;font-weight:800;color:#14213d}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:320px}.bgrid .c{aspect-ratio:1;border:0;border-radius:10px;background:#fbe9a6;font:800 1.6rem system-ui,sans-serif;text-transform:uppercase;cursor:pointer}.bgrid .c.sel{background:#2f7bf5;color:#fff}.bgrid .c.used{background:#ffb02e}

/* kids */
.kp{max-width:320px}.kps{background:#f1f5fc;border:2px dashed #9db4d8;border-radius:8px;overflow:hidden;padding:0}.kps.fill{border:2px solid #2fa866}.kps svg,.kpp svg{display:block}
.kp-tray{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.kpp{border:3px solid #c5d3ea;border-radius:8px;padding:0;overflow:hidden;background:#fff;cursor:pointer}.kpp.sel{border-color:#ffb02e}
.par{display:flex;gap:16px;width:100%;max-width:460px;justify-content:center}.par-col{display:flex;flex-direction:column;gap:8px;flex:1}.par-b{min-height:54px;border:0;border-radius:12px;background:#e4efff;font:700 1.1rem system-ui,sans-serif;cursor:pointer}.par-b.emo{font-size:1.9rem}.par-b.sel{background:#2f7bf5;color:#fff}.par-b.done{background:#b8ecc9;opacity:.7}
.blob{width:160px;height:160px;border-radius:50%;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12)}.shape{width:160px;height:160px}.shape svg{width:100%;height:100%}
.bigq{font:800 2rem/1.2 system-ui,sans-serif;text-align:center;color:#14213d}.bigq.emo{font-size:4.5rem}.count{font-size:2rem;text-align:center;line-height:1.5;max-width:380px}
.emo-btn{display:flex;flex-direction:column;gap:2px;font-size:2rem;line-height:1}.emo-btn span{font-size:.85rem}
.nm{background:#e4efff;font-size:clamp(1rem,5vw,1.5rem);border-radius:10px}.nm.done{background:#b8ecc9;opacity:.6}.nm.shake{animation:shake .3s}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.colorsvg{width:100%;max-width:340px;height:auto;background:#f9fcff;border-radius:12px}.swatch{width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #b8c4da;cursor:pointer}.swatch.on{box-shadow:0 0 0 3px #2f7bf5}
.smw{min-height:60px}

/* board games */
.chess{display:grid;grid-template-columns:repeat(8,1fr);width:100%;max-width:480px;border:3px solid #5a4630;border-radius:6px;overflow:hidden}
.sq{aspect-ratio:1;border:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:clamp(1.6rem,8vw,2.8rem);line-height:1;cursor:pointer;position:relative;color:#111}
.sq.lt{background:#f0d9b5}.sq.dk{background:#b58863}.sq.wp{color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,0 0 1px #000}
.sq.sel{background:#f7ec74!important}.sq.last{box-shadow:inset 0 0 0 3px rgba(80,160,255,.55)}.sq.chk{background:#ff8c8c!important}
.sq.tgt::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(40,120,60,.55)}.sq.tgt.cap::after{width:88%;height:88%;background:none;border:4px solid rgba(40,120,60,.6)}
.lgc{font-size:clamp(1.2rem,6vw,2rem);font-weight:800;background:#fff}
.c4{width:100%;max-width:420px}.c4-cols{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.c4-b{border:0;border-radius:8px;background:#e4efff;color:#1668e3;min-height:38px;cursor:pointer;font-size:1rem}
.c4-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:#1668e3;padding:6px;border-radius:12px}.c4-c{aspect-ratio:1;border-radius:50%;background:#e8f1ff}.c4-c.p1{background:#e53935}.c4-c.p2{background:#fdd835}.c4-c.win{box-shadow:0 0 0 4px #fff}
.rv{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:100%;max-width:440px;background:#1b5e20;padding:3px;border-radius:8px}.rv-c{aspect-ratio:1;border:0;background:#2e7d32;position:relative;cursor:pointer;padding:0}
.rv-c.bk::after,.rv-c.wh::after{content:"";position:absolute;inset:10%;border-radius:50%}.rv-c.bk::after{background:#111}.rv-c.wh::after{background:#fff}.rv-c.hint::before{content:"";position:absolute;inset:38%;border-radius:50%;background:rgba(255,255,255,.45)}
.peg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%;max-width:400px}.pg{aspect-ratio:1;border:0;border-radius:50%;background:#d7c3a0;box-shadow:inset 0 3px 5px rgba(0,0,0,.3);cursor:pointer;padding:0}.pg.none{visibility:hidden}
.pg.on{background:radial-gradient(circle at 35% 30%,#ff8a80,#c62828)}.pg.sel{outline:4px solid #ffb02e}.pg.tgt{background:#bfe3a8}
.dm-chain,.dm-hand{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;width:100%;max-width:520px}.dm-chain{min-height:64px;background:#2e7d4f;border-radius:10px;padding:8px}
.dt{display:inline-flex;flex-direction:column;width:28px;height:52px;background:#fff;border:2px solid #14213d;border-radius:5px;justify-content:space-around;align-items:center;font:800 .95rem system-ui,sans-serif;color:#14213d}.dt i{font-style:normal}.dt i:first-child{border-bottom:2px solid #14213d;width:100%;text-align:center}
.dm-chain .dt{flex-direction:row;width:52px;height:28px}.dm-chain .dt i:first-child{border-bottom:0;border-right:2px solid #14213d;height:100%;width:50%;display:flex;align-items:center;justify-content:center}.dm-chain .dt i:last-child{width:50%;text-align:center}
.dtb{border:0;background:none;padding:2px;cursor:pointer;border-radius:8px;opacity:.55}.dtb.ok{opacity:1}.dtb.sel{outline:3px solid #ffb02e}
.dm{display:grid;grid-template-columns:repeat(8,1fr);width:100%;max-width:440px;border:3px solid #5a4630;border-radius:6px;overflow:hidden}.dc{aspect-ratio:1;border:0;padding:0;position:relative;cursor:pointer}.dc.lt{background:#f0d9b5}.dc.dk{background:#8d5b32}.dc.sel{background:#d8c84a!important}.dc.tg::after{content:"";position:absolute;inset:36%;border-radius:50%;background:rgba(47,168,102,.7)}
.pc{position:absolute;inset:11%;border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,.45)}.pc.w{background:radial-gradient(circle at 35% 30%,#fff,#d9d2bd)}.pc.b{background:radial-gradient(circle at 35% 30%,#666,#111)}.pc.k::after{content:"♛";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(.9rem,4vw,1.5rem);color:#e0a400}
.malom{width:100%;max-width:440px;height:auto;background:#e8d5ad;border-radius:12px;touch-action:manipulation}

/* puzzles */
.slt{background:#2f7bf5;color:#fff;border-radius:10px;font-size:clamp(1.1rem,6vw,1.8rem)}.slt.blank{background:#e4efff}.slt.ok{background:#2fa866}
.slide{position:relative;width:100%;max-width:420px;aspect-ratio:1;background:#e8d5ad;border-radius:10px;touch-action:none;background-image:linear-gradient(#d9c196 1px,transparent 1px),linear-gradient(90deg,#d9c196 1px,transparent 1px);background-size:16.666% 16.666%}
.sb{position:absolute;margin:2px;border-radius:8px;cursor:grab;box-shadow:0 2px 3px rgba(0,0,0,.35);touch-action:none}.exit{position:absolute;right:0;top:33.333%;height:16.666%;width:10px;background:#2fa866;border-radius:6px 0 0 6px;font-size:0;pointer-events:none;z-index:2}
.dots{width:100%;max-width:420px;height:auto;background:#fffbe6;border-radius:12px}
.pp{padding:0;border-radius:4px}.pp svg{width:100%;height:100%;display:block}

.mj-tray{gap:4px;padding:6px;width:100%;max-width:520px;box-sizing:border-box}.mj-tray .mt-s{flex:1 1 0;min-width:0;width:auto;max-width:48px}