/* ===== Puzzle batch (gp) — shared bits ===== */
.gp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.gp-row .g-seg { margin-bottom: 10px; }
.g-seg .g-btn small { font-weight: 500; opacity: .75; }
.gp-tool { font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .92rem; cursor: pointer; }
.gp-tool:hover { border-color: var(--c); color: var(--c); }
.gp-tool.on { background: var(--c); border-color: var(--c); color: #fff; }
.gp-tool:disabled { opacity: .45; cursor: default; }
.gp-tool:focus-visible, .gp-su-c:focus-visible, .gp-su-k:focus-visible, .gp-sl-t:focus-visible, .gp-ms-c:focus-visible, .gp-bf-slot:focus-visible, .gp-ng:focus-visible, .gp-bf-board:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.gp-hint { margin: 10px auto 0; font-size: .82rem; color: var(--muted); text-align: center; max-width: 470px; line-height: 1.45; }
.gp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Sudoku ===== */
.gp-su-grid { display: grid; grid-template-columns: repeat(9, 1fr); width: min(100%, 470px); margin: 0 auto; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; container-type: inline-size; background: var(--surface); transition: opacity .2s; }
.gp-su-grid.busy { opacity: .35; }
.gp-su-c { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); color: var(--c); font: inherit; font-size: 6.2cqw; font-weight: 600; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.gp-su-c:nth-child(9n) { border-right: 0; }
.gp-su-c:nth-child(n+73) { border-bottom: 0; }
.gp-su-c.bR { border-right: 2px solid var(--ink); }
.gp-su-c.bB { border-bottom: 2px solid var(--ink); }
.gp-su-c.given { color: var(--ink); font-weight: 800; }
.gp-su-c.peer { background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.gp-su-c.same { background: color-mix(in srgb, var(--c) 24%, var(--surface)); }
.gp-su-c.sel { background: color-mix(in srgb, var(--c) 38%, var(--surface)); }
.gp-su-c.bad { color: #dc2626; text-decoration: underline wavy #dc2626 1.5px; text-underline-offset: 3px; }
html.dark .gp-su-c.bad { color: #f87171; text-decoration-color: #f87171; }
.gp-su-n { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); font-size: 2.5cqw; color: var(--muted); font-weight: 600; }
.gp-su-n i { font-style: normal; display: grid; place-items: center; }
.gp-su-grid.won .gp-su-c { animation: gp-pulse .6s ease; }
.gp-su-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(100%, 470px); margin: 12px auto 8px; }
.gp-su-tools .gp-tool { padding: 6px 4px; font-size: .85rem; gap: 5px; }
.gp-su-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; width: min(100%, 470px); margin: 0 auto; }
.gp-su-k { font: inherit; position: relative; height: 54px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font-size: 1.45rem; font-weight: 700; cursor: pointer; padding: 0 0 8px; }
.gp-su-k small { position: absolute; bottom: 3px; left: 0; right: 0; font-size: .62rem; font-weight: 600; color: var(--muted); }
.gp-su-k:hover, .gp-su-k.same { border-color: var(--c); color: var(--c); }
.gp-su-k.done { opacity: .4; }
@keyframes gp-pulse { 50% { background: color-mix(in srgb, var(--c) 30%, var(--surface)); } }
@media (max-width: 400px) { .gp-su-tools .gp-tool { flex-direction: column; gap: 2px; font-size: .75rem; min-height: 50px; } }

/* ===== Merge 2048 ===== */
.gp-mg-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: min(100%, 440px); margin: 0 auto 12px; }
.gp-mg-top .gp-hint { margin: 0; text-align: left; }
.gp-mg-top .gp-tool { flex: none; }
.gp-mg-board { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; border-radius: 16px; background: color-mix(in srgb, var(--c) 22%, var(--surface-2)); container-type: inline-size; touch-action: none; }
.gp-mg-cell, .gp-mg-t { position: absolute; left: 3%; top: 3%; width: 21.25%; height: 21.25%; border-radius: 10px; transform: translate(calc(var(--c) * 114.1176%), calc(var(--r) * 114.1176%)); }
.gp-mg-cell { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.gp-mg-layer { position: absolute; inset: 0; }
.gp-mg-t { display: grid; place-items: center; font-weight: 800; font-size: 9.5cqw; line-height: 1; transition: transform .11s ease-in-out; background: #fef3c7; color: #78350f; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); font-variant-numeric: tabular-nums; }
.gp-mg-t.d4 { font-size: 6.6cqw; }
.gp-mg-t.d5 { font-size: 5.2cqw; }
.gp-mg-t[data-v="4"] { background: #fde68a; color: #78350f; }
.gp-mg-t[data-v="8"] { background: #fdba74; color: #7c2d12; }
.gp-mg-t[data-v="16"] { background: #fb923c; color: #fff; }
.gp-mg-t[data-v="32"] { background: #f97316; color: #fff; }
.gp-mg-t[data-v="64"] { background: #ea580c; color: #fff; }
.gp-mg-t[data-v="128"] { background: #f472b6; color: #fff; }
.gp-mg-t[data-v="256"] { background: #db2777; color: #fff; }
.gp-mg-t[data-v="512"] { background: #a855f7; color: #fff; }
.gp-mg-t[data-v="1024"] { background: #7c3aed; color: #fff; }
.gp-mg-t[data-v="2048"] { background: #059669; color: #fff; box-shadow: 0 0 22px rgba(5, 150, 105, .55); }
.gp-mg-t[data-v="big"] { background: #0f172a; color: #fde047; }
html.dark .gp-mg-t[data-v="big"] { background: #f8fafc; color: #7c3aed; }
.gp-mg-t.new { animation: gp-appear .16s ease .08s backwards; }
.gp-mg-t.pop { animation: gp-pop .18s ease; z-index: 2; }
@keyframes gp-appear { from { opacity: 0; scale: .3; } }
@keyframes gp-pop { 50% { scale: 1.14; } }

/* ===== Sliding puzzle ===== */
.gp-sl-board { --g: 1.6%; --t: calc((100% - (var(--n) + 1) * var(--g)) / var(--n)); position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; border-radius: 16px; background: color-mix(in srgb, var(--c) 16%, var(--surface-2)); container-type: inline-size; touch-action: none; overflow: hidden; }
.gp-sl-board.pic { --g: .6%; }
.gp-sl-t { position: absolute; width: var(--t); height: var(--t); left: calc(var(--g) + var(--x) * (var(--t) + var(--g))); top: calc(var(--g) + var(--y) * (var(--t) + var(--g))); transition: left .12s ease, top .12s ease, border-radius .3s; border: 0; padding: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); color: #fff; font: inherit; font-weight: 800; font-size: calc(34cqw / var(--n)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); display: grid; place-items: center; }
.gp-sl-board:not(.pic) .gp-sl-t.ok { background: linear-gradient(145deg, #34d399, #059669); }
.gp-sl-board.pic .gp-sl-t { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.gp-sl-t small { position: absolute; left: 4px; top: 4px; min-width: 1.6em; padding: 1px 4px; border-radius: 6px; background: rgba(15, 23, 42, .62); color: #fff; font-size: clamp(.62rem, calc(12cqw / var(--n)), .85rem); line-height: 1.4; }
.gp-sl-board.instant .gp-sl-t { transition: none; }
.gp-sl-board.won { --g: 0%; }
.gp-sl-board.won.pic .gp-sl-t { border-radius: 0; box-shadow: none; }
.gp-sl-board.won.pic .gp-sl-t small { opacity: 0; }
.gp-sl-peek { position: absolute; inset: 0; z-index: 5; background-size: cover; opacity: 0; pointer-events: none; transition: opacity .2s; }
.gp-sl-board.peeking .gp-sl-peek { opacity: 1; }
.gp-sl-bar { display: flex; justify-content: center; align-items: center; gap: 8px 12px; flex-wrap: wrap; width: min(100%, 470px); margin: 12px auto 0; }
.gp-sl-bar .gp-hint { margin: 0; }
.gp-sl-bar .gp-tool[hidden] { display: none; }

/* ===== Nonogram ===== */
.gp-ng-wrap { max-width: 100%; overflow: auto; display: flex; padding: 2px; }
.gp-ng { margin: 0 auto; display: grid; grid-template-columns: var(--cw) repeat(var(--n), var(--cs)); grid-template-rows: var(--ch) repeat(var(--n), var(--cs)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; touch-action: none; font-size: var(--fs); width: max-content; }
.gp-ng-corner { background: var(--surface); }
.gp-ng-cc, .gp-ng-rc { background: var(--surface-2); color: var(--ink); font-weight: 700; display: flex; font-variant-numeric: tabular-nums; transition: opacity .2s; }
.gp-ng-cc { flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 4px; line-height: 1.22; }
.gp-ng-rc { justify-content: flex-end; align-items: center; gap: .45em; padding-right: 6px; }
.gp-ng-cc:nth-child(odd), .gp-ng-rc.alt { background: color-mix(in srgb, var(--c) 7%, var(--surface-2)); }
.gp-ng-cc.ok, .gp-ng-rc.ok { color: #15803d; opacity: .6; text-decoration: line-through; }
html.dark .gp-ng-cc.ok, html.dark .gp-ng-rc.ok { color: #4ade80; }
.gp-ng-c { position: relative; background: var(--surface); cursor: pointer; }
.gp-ng-c.bR { box-shadow: inset -2px 0 0 var(--muted); }
.gp-ng-c.bB { box-shadow: inset 0 -2px 0 var(--muted); }
.gp-ng-c.bR.bB { box-shadow: inset -2px 0 0 var(--muted), inset 0 -2px 0 var(--muted); }
.gp-ng-c.f { background: var(--ink); }
.gp-ng-c.x::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: calc(var(--cs) * .55); line-height: 1; }
.gp-ng-c.cur { outline: 3px solid var(--c); outline-offset: -3px; z-index: 1; }
.gp-ng-c.wrong { background: #fca5a5; }
.gp-ng-c.wrong::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #7f1d1d; font-weight: 800; }
.gp-ng.won { gap: 0; }
.gp-ng.won .gp-ng-c { box-shadow: none; transition: background .4s; }
.gp-ng.won .gp-ng-c.f { background: var(--pc); }
.gp-ng.won .gp-ng-c.x::after { content: none; }

/* ===== Mine Sweep ===== */
.gp-ms-bar { display: flex; align-items: center; justify-content: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gp-ms-bar .gp-hint { margin: 0; max-width: 300px; text-align: left; }
.gp-ms-mode { min-width: 130px; }
.gp-ms-wrap { max-width: 100%; overflow: auto; display: flex; padding: 2px; }
.gp-ms-wrap.scroll { max-height: 72vh; border: 1px solid var(--border); border-radius: 12px; padding: 6px; background: var(--surface-2); }
.gp-ms { margin: 0 auto; display: grid; grid-template-columns: repeat(var(--w), var(--cs)); grid-auto-rows: var(--cs); gap: 2px; width: max-content; }
.gp-ms-c { padding: 0; border: 0; border-radius: 6px; font: inherit; font-weight: 800; font-size: calc(var(--cs) * .5); line-height: 1; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, var(--surface)), color-mix(in srgb, var(--c) 45%, var(--surface-2))); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); color: var(--ink); }
.gp-ms-c:hover:not(.o) { filter: brightness(1.06); }
.gp-ms-c.o { background: var(--surface-2); box-shadow: none; cursor: default; }
.gp-ms-c.fl { font-size: calc(var(--cs) * .48); }
.gp-ms-c.n1 { color: #2563eb; } .gp-ms-c.n2 { color: #15803d; } .gp-ms-c.n3 { color: #dc2626; } .gp-ms-c.n4 { color: #6d28d9; }
.gp-ms-c.n5 { color: #b45309; } .gp-ms-c.n6 { color: #0e7490; } .gp-ms-c.n7 { color: var(--ink); } .gp-ms-c.n8 { color: var(--muted); }
html.dark .gp-ms-c.n1 { color: #60a5fa; } html.dark .gp-ms-c.n2 { color: #4ade80; } html.dark .gp-ms-c.n3 { color: #f87171; } html.dark .gp-ms-c.n4 { color: #c4b5fd; } html.dark .gp-ms-c.n5 { color: #fbbf24; } html.dark .gp-ms-c.n6 { color: #22d3ee; }
.gp-ms-c.hit { background: #ef4444; }
.gp-ms-c.wrongf { background: #fde68a; text-decoration: line-through; }
.gp-ms-c.mine { font-size: calc(var(--cs) * .5); }

/* ===== Block Fit ===== */
.gp-bf-board { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; padding: 6px; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; border-radius: 14px; background: color-mix(in srgb, var(--c) 14%, var(--surface-2)); touch-action: none; }
.gp-bf-c { border-radius: 4px; background: var(--surface); transition: background .12s; }
.gp-bf-c.on { background: var(--pc); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .3); }
.gp-bf-c.pv { background: color-mix(in srgb, var(--pv) 55%, var(--surface)); }
.gp-bf-c.pvx { background: rgba(220, 38, 38, .28); }
.gp-bf-c.pvl { box-shadow: inset 0 0 0 3px #fbbf24; }
.gp-bf-c.clr { animation: gp-clear .26s ease forwards; }
@keyframes gp-clear { to { scale: .2; opacity: 0; } }
.gp-bf-fx { position: absolute; inset: 6px; pointer-events: none; z-index: 3; }
.gp-bf-float { position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: 1.15rem; color: #fff; background: var(--c); padding: 3px 10px; border-radius: 999px; white-space: nowrap; animation: gp-rise 1s ease forwards; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
@keyframes gp-rise { to { transform: translate(-50%, -160%); opacity: 0; } }
.gp-bf-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, 420px); margin: 14px auto 0; }
.gp-bf-slot { height: 116px; padding: 4px; border-radius: 12px; border: 1px dashed var(--border); background: var(--surface); display: grid; place-items: center; touch-action: none; cursor: grab; }
.gp-bf-slot:disabled { cursor: default; background: var(--surface-2); }
.gp-bf-slot.sel { border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.gp-bf-slot.nofit .gp-bf-p { opacity: .35; filter: grayscale(.8); }
.gp-bf-p { --ms: 17px; --mg: 2px; display: grid; grid-template-columns: repeat(var(--pw), var(--ms)); grid-template-rows: repeat(var(--ph), var(--ms)); gap: var(--mg); pointer-events: none; }
.gp-bf-p i { background: var(--pc); border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.gp-bf-ghost { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; opacity: 0; }
.gp-bf-ghost.show { opacity: .92; }
.gp-bf-ghost .gp-bf-p i { border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .25), inset 0 -3px 0 rgba(0, 0, 0, .2); }

/* ===== Maze Runner ===== */
.gp-mz-box { width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; touch-action: none; overflow: hidden; }
.gp-mz { display: block; width: 100%; height: 100%; }
.gp-mz-ctl { display: flex; justify-content: center; align-items: center; gap: 14px 22px; flex-wrap: wrap; margin-top: 12px; }
.gp-mz-pad { display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 54px); gap: 6px; touch-action: none; }
.gp-mz-pad .gp-tool { padding: 0; font-size: 1.2rem; }
.gp-mz-up { grid-column: 2; grid-row: 1; } .gp-mz-left { grid-column: 1; grid-row: 2; } .gp-mz-down { grid-column: 2; grid-row: 2; } .gp-mz-right { grid-column: 3; grid-row: 2; }
.gp-mz-side { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 260px; }
.gp-mz-side .gp-hint { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .gp-mg-t, .gp-sl-t, .gp-bf-c { transition: none; }
  .gp-mg-t.new, .gp-mg-t.pop, .gp-bf-c.clr, .gp-su-grid.won .gp-su-c { animation-duration: .01s; }
}