/* Puzzle games: tower of hanoi and nonograms. */
.th-frame{position:relative;border-radius:22px;overflow:hidden;background:#1b1446;box-shadow:0 0 0 2px color-mix(in srgb,var(--tc,#f97316) 60%,transparent),0 30px 70px -40px var(--tc,#f97316)}
.th-canvas{display:block;width:100%;touch-action:manipulation;cursor:pointer;outline:none}
.th-bar{display:flex;gap:8px;flex-wrap:wrap}

/* nonogram */
.nn-frame{display:grid;place-items:center;padding:clamp(10px,2vw,18px);border-radius:22px;background:radial-gradient(120% 100% at 50% 0%,#232c6b,#0b1030 75%);overflow:auto;box-shadow:0 0 0 2px color-mix(in srgb,var(--tc,#22c55e) 55%,transparent),0 30px 60px -36px var(--tc,#22c55e);transition:background .8s}
.nn-board{--cs:28px;--w:5;--rw:60px;--ch:60px;display:grid;grid-template-columns:var(--rw) repeat(var(--w),var(--cs));grid-template-rows:var(--ch);grid-auto-rows:var(--cs);touch-action:none;user-select:none;-webkit-user-select:none}
.nn-cc{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:1px;padding-bottom:5px;font:800 calc(var(--cs) * .42) var(--sans);color:#dfe6ff;line-height:1.12;border-radius:6px 6px 0 0;transition:opacity .3s,background .3s}
.nn-cc:nth-child(even){background:rgba(255,255,255,.04)}
.nn-rc{display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--cs) * .24);padding-right:7px;font:800 calc(var(--cs) * .42) var(--sans);color:#dfe6ff;border-radius:6px 0 0 6px;transition:opacity .3s,background .3s}
.nn-rc:nth-of-type(odd){background:rgba(255,255,255,.03)}
.nn-cc.done,.nn-rc.done{opacity:.32}
.nn-cc.hint,.nn-rc.hint{background:rgba(255,212,59,.3)!important;opacity:1}
.nn-cell{position:relative;border:1px solid rgba(160,180,255,.2);background:#151d52;cursor:pointer;perspective:500px}
.nn-cell.bx{border-right:2px solid rgba(160,180,255,.55)}.nn-cell.by{border-bottom:2px solid rgba(160,180,255,.55)}
.nn-cell:hover{background:#1f2a6e}
.nn-face,.nn-back{position:absolute;inset:1px;border-radius:3px;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .55s cubic-bezier(.3,.7,.3,1.3),opacity .4s}
.nn-cell.on .nn-face{background:linear-gradient(160deg,#a5b4ff,#5c6cff);box-shadow:inset 0 -3px 0 rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.45)}
.nn-cell.x .nn-face::before,.nn-cell.x .nn-face::after{content:"";position:absolute;left:22%;right:22%;top:calc(50% - 1px);height:2px;border-radius:2px;background:#7b86c2;transform:rotate(45deg)}
.nn-cell.x .nn-face::after{transform:rotate(-45deg)}
.nn-back{background:var(--pc);transform:rotateY(180deg);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.35)}
.nn-cell.bad .nn-face{background:#ff6b6b!important;animation:shake .4s}
.nn-cell.hint{outline:3px solid #ffd43b;outline-offset:-1px;z-index:1}
.nn-board.revealed .nn-cell{border-color:transparent;background:transparent;cursor:default}
.nn-board.revealed .nn-cell.on .nn-face{transform:rotateY(180deg);transition-delay:var(--d)}
.nn-board.revealed .nn-cell.on .nn-back{transform:rotateY(0deg);transition-delay:var(--d)}
.nn-board.revealed .nn-cell:not(.on) .nn-face{opacity:0}
.nn-board.revealed .nn-cc,.nn-board.revealed .nn-rc{opacity:.15}
@media(prefers-reduced-motion:reduce){.nn-face,.nn-back{transition:none}}

/* Logic games: Monty Hall Lab, Lights Out, Water Jugs, Balance Scales, Knights and Knaves */
.mh-play,.lo-play,.wj-play,.bs-play,.kk-play{display:grid;gap:14px;max-width:700px;margin-inline:auto;width:100%;justify-items:center;text-align:center}
.mh-play[hidden],.lo-play[hidden],.wj-play[hidden],.bs-play[hidden],.kk-play[hidden]{display:none}
.lo-row,.wj-row,.kk-row,.mh-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lo-msg,.wj-msg,.bs-msg,.kk-msg,.lo-info,.mh-say{margin:0;min-height:1.5em;font-weight:700;color:var(--ink-2);max-width:56ch}
.lo-msg.good,.wj-msg.good,.bs-msg.good,.kk-msg.good{color:#17753A}.lo-msg.bad,.wj-msg.bad,.bs-msg.bad,.kk-msg.bad{color:#B3261E}
/* monty hall */
.mh-doors{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mh-door{position:relative;width:92px;height:128px;display:grid;place-items:center;align-content:center;gap:2px;border-radius:14px 14px 6px 6px;background:linear-gradient(#b7792b,#8a5a1c);border:3px solid #5c3b10;color:#fff;font-size:34px;cursor:pointer;transition:transform .2s}
.mh-door:hover:not(:disabled){transform:translateY(-3px)}.mh-door small{font:800 13px var(--sans)}.mh-door:disabled{cursor:default}
.mh-door.open{background:#f6efe2;border-color:#c9b99a;color:var(--ink)}.mh-door.prize{background:#fff5c2;border-color:#e5a12c}
.mh-door.chosen{outline:4px solid var(--c);outline-offset:3px}
.mh-doors.many .mh-door{width:46px;height:60px;font-size:20px;gap:0}.mh-doors.many .mh-door small{font-size:10px}
.mh-score{margin:0;font-size:14px;color:var(--ink-2)}.mh-simrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.mh-sim{width:100%;display:grid;gap:8px;text-align:left}.mh-sim h4{margin:0;font:600 17px var(--sans)}
.mh-bar{display:grid;grid-template-columns:96px 1fr 64px;gap:10px;align-items:center}.mh-bar small{grid-column:2/-1;color:var(--ink-2)}
.mh-track{position:relative;height:20px;border-radius:99px;background:var(--c-soft)}.mh-track i{display:block;height:100%;border-radius:99px;background:var(--c)}.mh-track b{position:absolute;top:-3px;width:3px;height:26px;background:var(--ink);border-radius:2px}
/* lights out */
.lo-board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;width:min(100%,360px);padding:12px;background:#1b1446;border-radius:18px;box-shadow:0 20px 40px -24px #1b1446}
.lo-cell{aspect-ratio:1;border:0;border-radius:12px;background:#2c2570;cursor:pointer;transition:background .2s,box-shadow .2s}
.lo-cell.on{background:radial-gradient(circle,#fff8c4,#ffd43b 60%,#f59f00);box-shadow:0 0 18px #ffd43b}.lo-cell.hint{outline:4px solid #7be0a1;outline-offset:2px}.lo-cell:disabled{cursor:default}
/* water jugs */
.wj-goal{margin:0;font:500 clamp(18px,3.6vw,24px)/1.4 var(--serif)}.wj-goal small{color:var(--ink-2);font:600 14px var(--sans)}
.wj-jugs{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;align-items:flex-end}.wj-jug{display:grid;gap:6px;justify-items:center}.wj-jug p{margin:0;font:700 13px var(--sans)}
.wj-glass{position:relative;width:78px;display:flex;align-items:flex-end;border:4px solid #7aa7d9;border-top-width:2px;border-radius:6px 6px 18px 18px;background:rgba(255,255,255,.75);overflow:hidden}
.wj-glass i{display:block;width:100%;background:linear-gradient(#5bb6ff,#2e86de);transition:height .45s}
.wj-glass b{position:absolute;inset:0;display:grid;place-items:center;font:800 24px var(--sans);color:#0c3d6e;text-shadow:0 0 6px #fff}
.wj-jug.hit .wj-glass{border-color:#17753A;box-shadow:0 0 0 4px rgba(23,117,58,.25)}
.wj-btns,.wj-pours{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center}.wj-pours small{font:700 12px var(--sans);color:var(--ink-2)}
/* balance scales */
.bs-scales{display:grid;gap:10px;width:100%}.bs-scale{display:flex;align-items:center;gap:10px;justify-content:center}
.bs-pan{min-width:110px;min-height:54px;padding:8px 14px;border-radius:14px;background:#fff;border:2px solid var(--line-2);font-size:26px;line-height:1.3;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center}
.bs-pan.unk{background:var(--c-soft);border-style:dashed;font:700 22px var(--sans)}.bs-eq{font-size:26px}
.bs-ask{display:grid;gap:8px;justify-items:center;padding:12px;border-radius:16px;background:var(--c-soft);width:100%}.bs-ask p{margin:0;font-weight:700}
.bs-opts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bs-opt{min-width:66px;padding:12px 18px;border-radius:14px;border:2px solid var(--line-2);background:#fff;font:800 22px var(--sans);cursor:pointer;color:var(--ink)}
.bs-opt:hover:not(:disabled){border-color:var(--c);background:var(--c-soft)}.bs-opt.ok{background:#dff3e6;border-color:#17753A}.bs-opt.no{background:#fdeceb;border-color:#B3261E}
/* knights and knaves */
.kk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;width:100%}
.kk-card{display:grid;gap:6px;justify-items:center;padding:14px;border-radius:18px;border:2px solid var(--line-2);background:#fff}.kk-card.kt{border-color:#17753A}.kk-card.kv{border-color:#B3261E}
.kk-face{font-size:44px;line-height:1}.kk-say{margin:0;font:italic 500 18px/1.35 var(--serif);min-height:3.4em}.kk-pick{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.kk-opt{padding:8px 12px;border-radius:99px;border:2px solid var(--line-2);background:#fff;font:700 13px var(--sans);cursor:pointer;color:var(--ink)}.kk-opt.on{background:var(--c);border-color:var(--c);color:#fff}.kk-opt:disabled{cursor:default}
.kk-why{width:100%;text-align:left;font-size:14px;line-height:1.5}.kk-why h4{margin:6px 0;font:700 14px var(--sans)}.kk-why ul{margin:0;padding-left:18px;display:grid;gap:4px}.kk-why li.ok{color:#0e5a2a}
@media(max-width:520px){.mh-door{width:78px;height:112px}.bs-pan{min-width:90px;font-size:22px}.mh-bar{grid-template-columns:76px 1fr 56px}}

/* Sliding Puzzle and Mine Logic */
.sp-goal,.sp-note,.ml-note{margin:0;font:600 clamp(16px,2.2vw,19px)/1.4 var(--cm-ui,inherit);color:var(--cm-ink,#1b1340);min-height:1.4em}
.sp-grid{--n:3;position:relative;width:min(100%,460px);aspect-ratio:1;border:4px solid var(--cm-ink,#1b1340);border-radius:22px;background:var(--cm-ink,#1b1340);box-shadow:var(--cm-shadow,6px 6px 0 #1b1340);outline-offset:6px;touch-action:manipulation}
.sp-tile{--x:0;--y:0;--h:200;position:absolute;left:calc(var(--x) * 100% / var(--n));top:calc(var(--y) * 100% / var(--n));width:calc(100% / var(--n) - 6px);height:calc(100% / var(--n) - 6px);margin:3px;border:3px solid var(--cm-ink,#1b1340);border-radius:14px;background:hsl(var(--h) 85% 62%);color:#fff;font:400 clamp(24px,8vw,50px)/1 var(--cm-display,inherit);letter-spacing:.03em;-webkit-text-stroke:1.5px var(--cm-ink,#1b1340);paint-order:stroke fill;text-shadow:2px 2px 0 var(--cm-ink,#1b1340);cursor:pointer;transition:left .22s var(--cm-pop,ease),top .22s var(--cm-pop,ease),filter .15s,box-shadow .15s}
.sp-tile.near{box-shadow:0 0 0 3px var(--cm-yellow,#ffd23f)}.sp-tile.home{filter:saturate(.55) brightness(1.08)}.sp-tile.home::after{content:"✓";position:absolute;right:6px;top:2px;font:700 14px system-ui;color:#fff;-webkit-text-stroke:0;text-shadow:1px 1px 0 var(--cm-ink,#1b1340)}
.sp-tile.nudge{animation:cm-miss .35s}
.ml-grid{--w:8;display:grid;grid-template-columns:repeat(var(--w),1fr);gap:3px;width:min(100%,540px);padding:8px;border:4px solid var(--cm-ink,#1b1340);border-radius:20px;background:var(--cm-ink,#1b1340);box-shadow:var(--cm-shadow-sm,4px 4px 0 #1b1340);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ml-cell{aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:6px;background:#bcd7ff;color:var(--cm-ink,#1b1340);font:400 clamp(16px,4.4vw,28px)/1 var(--cm-display,inherit);letter-spacing:.02em;cursor:pointer;transition:background .12s,transform .12s var(--cm-pop,ease)}
.ml-cell:hover:not(.open){background:#d7e7ff;transform:scale(1.06)}.ml-cell.open{background:#fff;cursor:default;animation:ml-open .25s ease-out}.ml-cell.open[class*=" n"]{cursor:pointer}
.ml-cell.n1{color:#1d5fd8}.ml-cell.n2{color:#1c8a3d}.ml-cell.n3{color:#d6291f}.ml-cell.n4{color:#5b2bb0}.ml-cell.n5{color:#a8501a}.ml-cell.n6{color:#0e8a8a}.ml-cell.n7{color:#222}.ml-cell.n8{color:#777}
.ml-cell.flag{background:#ffe9a8}.ml-cell.mine{background:#ffd0d0}.ml-cell.hit{background:#ff5d5d}.ml-cell.wrongflag{background:#ffe0e5}
.ml-tray{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.ml-tray .btn.on{background:var(--cm-yellow,#ffd23f)}
@keyframes ml-open{from{transform:scale(.6);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.sp-tile{transition:none}.ml-cell.open{animation:none}}
.play-page .sp-play,.play-page .ml-play{display:grid;gap:16px;max-width:680px;margin-inline:auto;width:100%;justify-items:center;text-align:center}
.play-page .sp-play[hidden],.play-page .ml-play[hidden]{display:none}