/* Play pages (tools/play.js + play/<name>.js). The board is paper: fixed black on white in both themes. */
.pl { --pl-ink: #111; --pl-paper: #fff; --pl-line: #9a9a9a; --pl-thin: #d4d4d4; --pl-sel: #6d4aff; --pl-selbg: #e9e3ff;
  --pl-bad: #c4271b; --pl-badbg: #fbd5d1; --pl-hint: #fff0b3; --pl-given: #111; --pl-user: #2d4fd6; --pl-mark: #777;
  max-width: 640px; margin: 0 auto; }
.pl-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.pl-clock { display: flex; align-items: baseline; gap: 8px; }
.pl-clock b { font-size: 22px; font-weight: 600; min-width: 4.5ch; text-align: right; }
.pl-src { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pl-info { font-size: 14px; color: var(--muted); margin: 12px 0 10px; min-height: 1.4em; }
.pl-stage { position: relative; }
.pl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px; margin: 0 -4px; }
.pl-board { position: relative; margin: 0 auto; color: var(--pl-ink); user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; touch-action: none; min-height: 200px; }
.pl-board:focus { outline: none; }
.pl-board:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pl-board.pl-dim { opacity: .35; }
.pl-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; color: var(--ink); }
.pl-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.pl-tools .pl-ic { width: 44px; padding: 0; justify-content: center; }
.pl-tools .pl-ic svg { width: 20px; height: 20px; }
.pl-tools #plPencil[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
.pl-mis { margin-left: auto; font-size: 14px; }
.pl-more { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 10px; }
.pl-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.pl-links a { color: var(--ink); }
.pl-keys { font-size: 13px; }
.pl-done { background: var(--mint); color: #0b3d1a; border-radius: var(--r-md); padding: 14px 16px; margin-top: 12px; }
.pl-done p { margin: 0 0 6px; }
.pl-done .pl-done-t { font-size: 20px; font-weight: 600; }
.pl-done .btn-secondary { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #000; }
.pl-done .btn-primary { background: #000; color: #fff; }
.pl-stats { margin-top: 20px; }
.pl-tw { overflow-x: auto; }
.pl-st th, .pl-st td { padding: 8px 10px; white-space: nowrap; }
.pl-st small { color: var(--muted); }
/* number pad */
.pl-pad { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 6px; margin: 14px auto 0; max-width: 460px; }
.pl-pad button { font: inherit; font-size: 20px; font-weight: 500; min-height: 46px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--canvas); color: var(--ink); cursor: pointer; }
.pl-pad button:hover { border-color: var(--ink); }
.pl-pad button.wide { grid-column: span 2; font-size: 15px; }
@media (max-width: 480px) { .pl-mis { margin-left: 0; } .pl-pad button { min-height: 48px; } }

/* generic square cell grid: adapters set --w and --h on .pl-g */
.pl-g { display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); width: 100%; max-width: calc(var(--w) * var(--cmax, 56px));
  margin: 0 auto; border: 2px solid var(--pl-ink); background: var(--pl-paper); container-type: inline-size; }
.pl-c { aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--pl-thin);
  border-bottom: 1px solid var(--pl-thin); cursor: pointer; font-size: calc(100cqw / var(--w) * .55); line-height: 1; color: var(--pl-ink); }
.pl-c.sel { box-shadow: inset 0 0 0 3px var(--pl-sel); z-index: 1; }
.pl-c.same { background-color: var(--pl-selbg); }
.pl-c.hint { background-color: var(--pl-hint) !important; }
.pl-c.bad { background-color: var(--pl-badbg) !important; }
.pl-c.bad .pl-v { color: var(--pl-bad); }
.pl-c.given { font-weight: 700; color: var(--pl-given); }
.pl-v { pointer-events: none; }
.pl-c.user .pl-v { color: var(--pl-user); font-weight: 500; }
.pl-marks { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); font-size: calc(100cqw / var(--w) * .2); color: var(--pl-mark); pointer-events: none; line-height: 1; }
.pl-marks span { display: flex; align-items: center; justify-content: center; }
.pl-solved .pl-g { border-color: #17803a; }
@media print {
  .pl { max-width: none; }
  .pl-board { min-height: 0; }
  .pl-c.sel, .pl-c.hint, .pl-c.bad { box-shadow: none !important; background-color: transparent !important; }
  .pl-info { color: #000; }
}

/* star battle */
.sbp .pl-c { border-right-color: rgba(0,0,0,.14); border-bottom-color: rgba(0,0,0,.14); background: var(--c, #fff); }
.sbp .pl-c.bt { border-top: 3px solid var(--pl-ink); }
.sbp .pl-c.bl { border-left: 3px solid var(--pl-ink); }
.sbp .pl-c.bb { border-bottom: 3px solid var(--pl-ink); }
.sbp .pl-c.br { border-right: 3px solid var(--pl-ink); }
.sbp .pl-star { font-size: calc(100cqw / var(--w) * .62); line-height: 1; color: #111; pointer-events: none; }
.sbp .pl-c.bad .pl-star { color: var(--pl-bad); }
.sbp .pl-dot { width: 18%; height: 18%; border-radius: 50%; background: rgba(0,0,0,.45); pointer-events: none; }
.sbp .pl-c.clash { background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(196,39,27,.25) 4px, rgba(196,39,27,.25) 8px); }

/* nonogram */
.ngp { display: grid; grid-template-columns: minmax(calc(var(--rc) * .62em + 8px), auto) repeat(var(--w), minmax(0, 1fr)); width: 100%;
  max-width: calc(var(--w) * 40px + var(--rc) * .62em + 12px); margin: 0 auto; font-size: clamp(10px, calc(150vw / (var(--w) * 10 + var(--rc) * 5)), 15px);
  background: var(--pl-paper); color: var(--pl-ink); padding: 4px; border-radius: 4px; }
.ngp-corner { background: var(--pl-paper); }
.ngp-cc { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 1px; padding: 2px 0 4px; font-family: var(--mono); line-height: 1.05; min-height: calc(var(--cr) * 1.1em + 6px); }
.ngp-rc { display: flex; justify-content: flex-end; align-items: center; gap: .32em; padding: 0 5px 0 2px; font-family: var(--mono); white-space: nowrap; }
.ngp-cc.cur, .ngp-rc.cur { background: #ece7ff; }
.ngp-cc.ok, .ngp-rc.ok { color: #a3a3a3; }
.ngp-c { border-right: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8; background: #fff; }
.ngp-c.r5 { border-right: 2px solid #555; }
.ngp-c.d5 { border-bottom: 2px solid #555; }
.ngp-c.l0 { border-left: 2px solid #555; }
.ngp-c.t0 { border-top: 2px solid #555; }
.ngp-c.on { background: #1d1d1d; }
.ngp-c.x::before, .ngp-c.x::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: #8a8a8a; transform: rotate(45deg); }
.ngp-c.x::after { transform: rotate(-45deg); }
.ngp-c.on.bad { background: var(--pl-bad) !important; }
.ngp-c.on.hint { background: #b38a00 !important; }

/* sudoku family */
.sdp { grid-template-columns: repeat(var(--w), minmax(0, 1fr)); border: 0; background: transparent; }
.sdp-big { min-width: calc(var(--w) * 23px); }
.sdp .sdp-c { background: #fff; border: 0; box-shadow: inset -1px -1px 0 #cfcfcf; }
.sdp .sdp-c.bt { border-top: 2px solid #111; } .sdp .sdp-c.bl { border-left: 2px solid #111; }
.sdp .sdp-c.bb { border-bottom: 2px solid #111; } .sdp .sdp-c.br { border-right: 2px solid #111; }
.sdp .sdp-c.dg { background: #f1ecff; }
.sdp .sdp-c.peer { background: #eef1f6; }
.sdp .sdp-c.same { background: #dfe7ff; }
.sdp .sdp-c.sel { background: #d9d0ff; box-shadow: inset 0 0 0 2px var(--pl-sel); }
.sdp .sdp-c.clash .pl-v { color: var(--pl-bad); }
.sdp .pl-marks { grid-template-columns: repeat(var(--mk), 1fr); font-size: calc(100cqw / var(--w) * .22); inset: 1px; }
.sdp-16 .pl-c { font-size: calc(100cqw / var(--w) * .5); }
.sdp .cg { position: absolute; inset: 3px; pointer-events: none; border: 0 dashed #555; }
.sdp .cg.ct { border-top-width: 1px; top: 3px; } .sdp .cg.cb { border-bottom-width: 1px; } .sdp .cg.cl { border-left-width: 1px; } .sdp .cg.cr { border-right-width: 1px; }
.sdp .cg:not(.ct) { top: -1px; } .sdp .cg:not(.cb) { bottom: -1px; } .sdp .cg:not(.cl) { left: -1px; } .sdp .cg:not(.cr) { right: -1px; }
.sdp .cs { position: absolute; top: 1px; left: 2px; font: 600 calc(100cqw / var(--w) * .2) var(--mono); background: #fff; padding: 0 1px; line-height: 1; z-index: 1; pointer-events: none; color: #111; }
.sdp-killer .pl-marks { top: 30%; }
.pl-pen .sdp-c.sel { box-shadow: inset 0 0 0 3px #c79100; }

/* futoshiki: cells on odd grid lines, signs between them */
.fsp { display: grid; grid-template-columns: repeat(calc(var(--n) - 1), minmax(0, 1fr) minmax(0, .42fr)) minmax(0, 1fr); width: 100%;
  max-width: calc(var(--n) * 76px); margin: 0 auto; background: #fff; padding: 6px; border-radius: 6px; container-type: inline-size; }
.fsp .fsp-c { border: 2px solid #111; border-radius: 4px; background: #fff; font-size: calc(100cqw / (var(--n) * 1.42) * .55); }
.fsp .fsp-c.peer { background: #eef1f6; } .fsp .fsp-c.same { background: #dfe7ff; } .fsp .fsp-c.sel { background: #d9d0ff; }
.fsp .fsp-c.clash .pl-v { color: var(--pl-bad); }
.fsp .pl-marks { font-size: calc(100cqw / (var(--n) * 1.42) * .22); }
.fsp-s { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #111; font-size: calc(100cqw / (var(--n) * 1.42) * .42); line-height: 1; }
/* calcudoku */
.cdp .cdp-c { background: #fff; border: 0; box-shadow: inset -1px -1px 0 #d4d4d4; }
.cdp .cdp-c.bt { border-top: 2px solid #111; } .cdp .cdp-c.bl { border-left: 2px solid #111; } .cdp .cdp-c.bb { border-bottom: 2px solid #111; } .cdp .cdp-c.br { border-right: 2px solid #111; }
.cdp .cdp-c.peer { background: #eef1f6; } .cdp .cdp-c.same { background: #dfe7ff; } .cdp .cdp-c.sel { background: #d9d0ff; }
.cdp .cdp-c.clash .pl-v { color: var(--pl-bad); }
.cdp .cdp-l { position: absolute; top: 2px; left: 3px; font: 600 calc(100cqw / var(--w) * .2) var(--mono); line-height: 1; color: #111; pointer-events: none; }
.cdp .pl-marks { top: 26%; }
.pl-g.cdp { border: 0; }
/* kakuro */
.kkp { gap: 1px; background: #777; border-color: #333; }
.kkp-b { aspect-ratio: 1; background: #3a3a3a; position: relative; }
.kkp-b.clue { background: linear-gradient(to top right, #3a3a3a calc(50% - 1px), #aaa calc(50% - 1px), #aaa calc(50% + 0px), #3a3a3a calc(50% + 1px)); }
.kkp-b span { position: absolute; color: #fff; font: 600 calc(100cqw / var(--w) * .26) var(--mono); line-height: 1; }
.kkp-b .kd { left: 10%; bottom: 8%; }
.kkp-b .ka { right: 8%; top: 10%; }
.kkp .kkp-c { background: #fff; border: 0; }
.kkp .kkp-c.peer { background: #eef1f6; } .kkp .kkp-c.same { background: #dfe7ff; } .kkp .kkp-c.sel { background: #d9d0ff; }
.kkp .kkp-c.clash .pl-v { color: var(--pl-bad); }
/* skyscrapers */
.pl-g.skp { border: 0; background: #fff; gap: 0; }
.skp .skp-c { background: #fff; border: 1px solid #999; margin: -0.5px; }
.skp .skp-c.peer { background: #eef1f6; } .skp .skp-c.same { background: #dfe7ff; } .skp .skp-c.sel { background: #d9d0ff; }
.skp .skp-c.clash .pl-v { color: var(--pl-bad); }
.skp-k { display: flex; align-items: center; justify-content: center; font: 600 calc(100cqw / var(--w) * .42) var(--mono); color: #111; aspect-ratio: 1; }
.skp-k.ok { color: #9a9a9a; } .skp-k.no { color: var(--pl-bad); }
/* binairo */
.bnp .bnp-c { background: #fff; font-weight: 600; }
.bnp .bnp-c.z { background: #e8eefc; } .bnp .bnp-c.o { background: #fdeccf; }
.bnp .bnp-c.given .pl-v { color: #111; font-weight: 800; }
.bnp .bnp-c:not(.given) .pl-v { color: var(--pl-user); }
.bnp .bnp-c.clash .pl-v { color: var(--pl-bad); }
/* slitherlink (SVG) */
.slp { display: block; width: 100%; margin: 0 auto; background: #fff; border-radius: 6px; }
.slp .slp-d { fill: #111; pointer-events: none; }
.slp .slp-n { font: 600 22px var(--font); fill: #111; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.slp .slp-n.ok { fill: #9a9a9a; } .slp .slp-n.no { fill: var(--pl-bad); }
.slp .slp-e { cursor: pointer; }
.slp .slp-e .hit { stroke: transparent; stroke-width: 16; stroke-linecap: round; }
.slp .slp-e .ln { stroke: #e3e3e3; stroke-width: 1.5; pointer-events: none; }
.slp .slp-e .x { stroke: none; fill: none; pointer-events: none; }
.slp .slp-e.on .ln { stroke: #111; stroke-width: 5; stroke-linecap: round; }
.slp .slp-e.off .x { stroke: #8a8a8a; stroke-width: 1.6; }
.slp .slp-e.off .ln { stroke: transparent; }
.slp .slp-e.hint .ln { stroke: #c79100; stroke-width: 5; }
.slp .slp-e.hint.off .x { stroke: #c79100; }
.slp .slp-e.bad .ln { stroke: var(--pl-bad); } .slp .slp-e.bad .x { stroke: var(--pl-bad); }
.slp .slp-cur { fill: rgba(109, 74, 255, .12); stroke: var(--pl-sel); stroke-width: 1.5; pointer-events: none; }
/* bridges (SVG) */
.hsp { display: block; width: 100%; margin: 0 auto; background: #fff; border-radius: 6px; }
.hsp-e { cursor: pointer; }
.hsp-e .hit { stroke: transparent; stroke-width: 18; }
.hsp-e line:not(.hit) { stroke: transparent; stroke-width: 2.5; pointer-events: none; }
.hsp-e.n0 .b1 { stroke: #ececec; stroke-width: 1.5; stroke-dasharray: 2 4; }
.hsp-e.n1 .b1 { stroke: #111; }
.hsp-e.n2 .b2a, .hsp-e.n2 .b2b { stroke: #111; }
.hsp-e.sel.n0 .b1 { stroke: var(--pl-sel); stroke-dasharray: none; }
.hsp-e.sel .b1, .hsp-e.sel .b2a, .hsp-e.sel .b2b { filter: drop-shadow(0 0 2px var(--pl-sel)); }
.hsp-e.hint .b1, .hsp-e.hint .b2a, .hsp-e.hint .b2b { stroke: #c79100 !important; }
.hsp-e.bad .b1, .hsp-e.bad .b2a, .hsp-e.bad .b2b { stroke: var(--pl-bad) !important; }
.hsp-i { pointer-events: none; }
.hsp-i circle { fill: #fff; stroke: #111; stroke-width: 2; }
.hsp-i text { font: 600 15px var(--font); fill: #111; text-anchor: middle; dominant-baseline: central; }
.hsp-i.ok circle { fill: #e6f4e8; stroke: #17803a; } .hsp-i.no circle { fill: #fbd5d1; stroke: var(--pl-bad); }
/* hidato */
.hdp .hdp-c { background: #fff; font-size: calc(100cqw / var(--w) * .42); }
.hdp .hdp-c.sel { background: #d9d0ff; } .hdp .hdp-c.peer { background: #fff; }
.hdp .hdp-c.end { background: #f4ecd6; }
.hdp .hdp-c.clash .pl-v { color: var(--pl-bad); }
.hdp-x { background: #3a3a3a; aspect-ratio: 1; }
/* nurikabe */
.nkp .nkp-c { background: #fff; font-weight: 700; }
.nkp .nkp-c.sea { background: #2b2b2b; }
.nkp .nkp-c.dot::after { content: ""; width: 16%; height: 16%; border-radius: 50%; background: #777; }
.nkp .nkp-c.sel { box-shadow: inset 0 0 0 3px var(--pl-sel); }
.nkp .nkp-c.sea.clash { background: #7a1d16; } .nkp .nkp-c.clash:not(.sea) { background: #fbd5d1; }
.nkp .nkp-c.sea.hint { background: #6b5200 !important; }
.nkp .nkp-c.sea.bad { background: var(--pl-bad) !important; }
/* numberlink (SVG) */
.nlp { display: block; width: 100%; margin: 0 auto; background: #fff; border-radius: 6px; touch-action: none; }
.nlp-c { stroke: #d0d0d0; stroke-width: 1; cursor: pointer; }
.nlp-l { stroke-width: 12; stroke-linecap: round; pointer-events: none; }
.nlp-l.hint { stroke-dasharray: 4 3; } .nlp-l.bad { stroke: var(--pl-bad) !important; stroke-dasharray: 3 3; }
.nlp-dot { pointer-events: none; stroke: #111; stroke-width: 1.5; }
.nlp-n { font: 700 15px var(--font); fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.nlp-cur { fill: none; stroke: var(--pl-sel); stroke-width: 2.5; pointer-events: none; }
/* light up */
.lup .lup-c { background: #fff; }
.lup .lup-c.lit { background: #fff3b0; }
.lup .lup-c.light::after { content: ""; width: 56%; height: 56%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0 18%, #f5b800 20% 100%); box-shadow: 0 0 0 2px #8a6a00; }
.lup .lup-c.dot::after { content: ""; width: 16%; height: 16%; border-radius: 50%; background: #777; }
.lup .lup-c.clash { background: #fbd5d1; }
.lup .lup-c.clash.light::after { box-shadow: 0 0 0 2px var(--pl-bad); }
.lup .lup-b { background: #222; color: #fff; cursor: default; font-weight: 700; }
.lup .lup-b .pl-v { color: #fff; }
.lup .lup-b.ok .pl-v { color: #8a8a8a; } .lup .lup-b.no .pl-v { color: #ff7a6e; }
.lup .pl-c.sel { box-shadow: inset 0 0 0 3px var(--pl-sel); }
/* heyawake */
.hyp .hyp-c { background: #fff; border-right-color: #d8d8d8; border-bottom-color: #d8d8d8; }
.hyp .hyp-c.bt { border-top: 2px solid #111; } .hyp .hyp-c.bl { border-left: 2px solid #111; } .hyp .hyp-c.bb { border-bottom: 2px solid #111; } .hyp .hyp-c.br { border-right: 2px solid #111; }
.hyp-n { position: absolute; top: 2px; left: 4px; font: 600 calc(100cqw / var(--w) * .3) var(--mono); color: #111; pointer-events: none; z-index: 1; }
.hyp .hyp-c.sea { background: #2b2b2b; } .hyp .hyp-c.sea .hyp-n { color: #fff; }
.hyp .hyp-c.dot::after { content: ""; width: 16%; height: 16%; border-radius: 50%; background: #777; }
.hyp .hyp-c.sel { box-shadow: inset 0 0 0 3px var(--pl-sel); }
.hyp .hyp-c.clash { background: #fbd5d1; } .hyp .hyp-c.sea.clash { background: #7a1d16; }
.hyp .hyp-c.sea.hint { background: #6b5200 !important; } .hyp .hyp-c.sea.bad { background: var(--pl-bad) !important; }
.pl-g.hyp { border: 0; }