/* ps-play.css — shared layout for the newer game and solver pages (Skyscrapers, Binary).
   Colours come from common.css / theme.css tokens, so Night and Day follow the device. */
*, *::before, *::after { box-sizing: border-box; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pg-wrap { max-width: 1060px; margin: 0 auto; padding: .9rem 1rem 3rem; }
.pg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.2rem; align-items: start; }
.pg-main { min-width: 0; }
@media (max-width: 760px) { .pg-layout { grid-template-columns: minmax(0, 1fr); } }

.intro { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: .8rem 1rem; margin-bottom: .8rem; font-size: 14px; color: var(--ink2); line-height: 1.6; }
.intro a { color: var(--accent); font-weight: 700; }

.ctrl-bar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .5rem .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: .8rem; box-shadow: var(--card-shadow, none); }
.ctrl-timer { font-family: 'DM Mono', monospace; font-size: 15px; font-weight: 600; color: var(--ink); min-width: 52px; letter-spacing: .04em; }
.ctrl-btn { height: 34px; padding: 0 11px; border: 1.5px solid var(--border2); border-radius: 10px; background: var(--panel); color: var(--ink2); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .12s; white-space: nowrap; touch-action: manipulation; }
.ctrl-btn:hover { background: var(--panel2); color: var(--ink); }
.ctrl-btn.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.ctrl-btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.ctrl-btn:disabled { opacity: .4; cursor: not-allowed; }
.ctrl-sep { width: 1px; height: 18px; background: var(--border2); margin: 0 2px; }

.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin-bottom: .75rem; overflow: hidden; box-shadow: var(--card-shadow, none); }
.sh { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); padding: .5rem .8rem; background: var(--panel); border-bottom: 1px solid var(--border); }
.sb { padding: .7rem .8rem; }
.lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); margin: .1rem 0 .35rem; }
.chip-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: .6rem; }
.chip { padding: 5px 10px; border: 1.5px solid var(--border2); border-radius: 999px; background: var(--panel); color: var(--ink2); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .1s; touch-action: manipulation; }
.chip:hover { border-color: var(--accent); }
.chip.on { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.new-btn { width: 100%; height: 42px; background: var(--accent); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; touch-action: manipulation; font-family: 'Fredoka', 'Nunito', sans-serif; box-shadow: 0 8px 22px -10px rgba(124,92,191,.9); }
.new-btn:hover { filter: brightness(1.08); }
.tog { display: flex; align-items: center; gap: .45rem; font-size: 13px; color: var(--ink2); margin-top: .6rem; cursor: pointer; }
.tog input { accent-color: var(--accent); width: 16px; height: 16px; }
.stat-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink3); padding: 3px 0; border-bottom: 1px solid var(--border); }
.stat-row:last-child { border-bottom: none; }
.stat-val { color: var(--ink); font-weight: 700; font-family: 'DM Mono', monospace; font-size: 12.5px; }
.rules .rule { display: flex; gap: .55rem; align-items: flex-start; font-size: 13px; color: var(--ink2); line-height: 1.45; margin-bottom: .55rem; }
.rules .ri { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--accent-light); color: var(--accent); }
.side-link { display: block; margin-top: .3rem; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.side-link:hover { text-decoration: underline; }

.status-box { display: none; padding: .6rem .85rem; border-radius: 12px; font-size: 14px; line-height: 1.5; margin: .8rem 0; border: 1px solid transparent; }
.status-box.show { display: block; }
.status-box.ok { background: var(--green-light); color: var(--green); border-color: var(--green-mid); }
.status-box.info { background: var(--accent-light); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.status-box.warn { background: var(--amber-light); color: var(--amber); border-color: var(--amber-mid); }
.status-box.err { background: var(--red-light); color: var(--red); border-color: var(--red-mid); }

.about { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; margin-top: .9rem; font-size: 14px; color: var(--ink2); line-height: 1.7; }
.about h2 { font-size: 18px; color: var(--ink); margin: 0 0 .4rem; }
.about p { margin: 0 0 .55rem; }

.board-wrap { position: relative; display: flex; justify-content: center; padding: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--card-shadow, none); }
.gen-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink2); font-weight: 700; z-index: 5; }
.keypad { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: .8rem; }
.num-btn { font-family: "DM Mono", monospace; min-width: 48px; height: 48px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--border2); background: var(--surface); color: var(--ink); font-size: 20px; font-weight: 600; cursor: pointer; touch-action: manipulation; box-shadow: var(--card-shadow, none); }
.num-btn:hover { border-color: var(--accent); color: var(--accent); }
.num-btn.erase { color: var(--ink3); }
.num-btn.big { min-width: 64px; }

/* complete overlay */
.cov { position: fixed; inset: 0; background: rgba(10,6,25,.55); display: flex; align-items: center; justify-content: center; z-index: 400; padding: 1rem; }
.cov-card { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 2rem 1.6rem; max-width: 340px; width: 100%; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: pop .25s ease; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cov-emoji { font-size: 52px; margin-bottom: .3rem; }
.cov-title { font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 26px; font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.cov-sub { font-size: 13px; color: var(--ink3); margin-bottom: 1.2rem; }
.cov-btns { display: flex; gap: .5rem; }
.c-btn { flex: 1; height: 44px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--border2); background: var(--panel); color: var(--ink2); }
.c-btn.p { background: var(--accent); border-color: transparent; color: #fff; }

/* ═════ Skyscrapers board ═════ */
.sky-board { --cs: 52px; display: grid; gap: 0; user-select: none; -webkit-user-select: none; }
.sky-board > div { width: var(--cs); height: var(--cs); }
.sky-clue { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sky-clue.none { cursor: default; }
.sky-clue span { display: flex; align-items: center; justify-content: center; width: 72%; height: 72%; border-radius: 50%; font-family: 'DM Mono', monospace; font-weight: 600; font-size: calc(var(--cs) * .36); color: var(--ink); border: 2px solid var(--gold, #c98a1e); background: color-mix(in srgb, var(--gold, #c98a1e) 12%, transparent); transition: all .15s; }
.sky-clue.lit span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.sky-clue.done span { opacity: .35; text-decoration: line-through; }
.sky-clue.ok span { border-color: var(--green); background: var(--green-light); color: var(--green); }
.sky-clue.bad span { border-color: var(--red); background: var(--red-light); color: var(--red); }
.sky-cell { position: relative; display: flex; align-items: center; justify-content: center; background: var(--board-bg, var(--surface)); border-left: 1.5px solid var(--board-line, var(--border2)); border-top: 1.5px solid var(--board-line, var(--border2)); cursor: pointer; font-family: 'DM Mono', monospace; color: var(--ink); touch-action: manipulation; transition: background .1s; }
.sky-cell.e-r { border-right: 1.5px solid var(--board-line, var(--border2)); }
.sky-cell.e-b { border-bottom: 1.5px solid var(--board-line, var(--border2)); }
.sky-cell .v { position: relative; z-index: 1; font-size: calc(var(--cs) * .46); font-weight: 600; }
.sky-cell.given .v { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.sky-cell:not(.given) .v { color: var(--accent); }
.sky-cell.line { background: color-mix(in srgb, var(--accent) 8%, var(--board-bg, var(--surface))); }
.sky-cell.same { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.sky-cell.sel { background: color-mix(in srgb, var(--accent) 20%, var(--board-bg, var(--surface))); box-shadow: inset 0 0 0 3px var(--accent); }
.sky-cell.tower::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(14% + var(--h) * 86%); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 38%, transparent)); border-radius: 3px 3px 0 0; transition: height .25s ease; pointer-events: none; }
.sky-cell.tower .v { color: var(--ink); text-shadow: 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent); }
.sky-cell.err { background: var(--red-light) !important; }
.sky-cell.err .v { color: var(--red) !important; }
.sky-cell.flash { animation: flash .9s ease; }
@keyframes flash { 0%, 100% { box-shadow: inset 0 0 0 3px var(--accent); } 50% { box-shadow: inset 0 0 0 6px var(--gold, #ffd166); } }
.notes { position: absolute; inset: 3px; display: grid; grid-template-columns: repeat(var(--nc), 1fr); font-size: calc(var(--cs) * .19); line-height: 1; color: var(--ink3); font-family: 'DM Mono', monospace; }
.notes span { display: flex; align-items: center; justify-content: center; }
.notes span.x { color: var(--red); text-decoration: line-through; }

/* solver: steps panel */
.steps { position: sticky; top: 64px; }
.steps-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.steps-nav { display: flex; gap: 4px; }
.step-btn { width: 30px; height: 30px; border: 1px solid var(--border2); border-radius: 8px; background: var(--surface); color: var(--ink2); cursor: pointer; font-size: 13px; }
.step-btn:disabled { opacity: .3; cursor: not-allowed; }
.steps-list { max-height: 460px; overflow-y: auto; }
.step-card { padding: .6rem .8rem; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.step-card:hover { background: var(--panel); }
.step-card.active { background: var(--accent-light); box-shadow: inset 3px 0 0 var(--accent); }
.step-num { font-size: 11px; color: var(--ink3); margin-bottom: 2px; display: flex; gap: .4rem; align-items: center; }
.badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: var(--panel2); color: var(--ink2); }
.badge.edge, .badge.single, .badge.hidden, .badge.pair, .badge.gap { background: var(--green-light); color: var(--green); }
.badge.distance, .badge.count { background: var(--amber-light); color: var(--amber); }
.badge.line, .badge.unique { background: var(--blue-light); color: var(--blue); }
.badge.trial { background: var(--purple-light); color: var(--purple); }
.steps-empty { padding: 1.4rem 1rem; text-align: center; color: var(--ink3); font-size: 13px; line-height: 1.6; }
.sky-cell.placed { background: color-mix(in srgb, var(--green) 22%, var(--board-bg, var(--surface))) !important; }
.sky-cell.focus { box-shadow: inset 0 0 0 3px var(--gold, #ffd166); }
.sky-clue.edit span { border-style: dashed; color: var(--ink3); }
.sky-clue.edit.has span { border-style: solid; color: var(--ink); }
.sky-clue.selc span { box-shadow: 0 0 0 3px var(--accent); }

/* ═════ Binary board ═════ */
.bin-board { --cs: 44px; display: grid; gap: 4px; user-select: none; -webkit-user-select: none; padding: 4px; border-radius: 14px; background: var(--panel); }
.bin-cell { width: var(--cs); height: var(--cs); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: 'DM Mono', monospace; font-weight: 600; font-size: calc(var(--cs) * .48); background: var(--board-bg, var(--surface)); border: 1.5px solid var(--border2); color: var(--ink); transition: transform .08s, background .12s; touch-action: manipulation; position: relative; }
.bin-cell:active { transform: scale(.94); }
.bin-cell.v0 { background: var(--bin0, #ffd166); border-color: transparent; color: #3b2a00; }
.bin-cell.v1 { background: var(--bin1, #7c5cbf); border-color: transparent; color: #fff; }
.bin-cell.given::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; right: 5px; top: 5px; background: currentColor; opacity: .55; }
.bin-cell.err { box-shadow: 0 0 0 3px var(--red); }
.bin-cell.focus { box-shadow: 0 0 0 3px var(--accent); }
.bin-cell.placed { box-shadow: 0 0 0 3px var(--green); }
.bin-cell.flash { animation: flash2 .9s ease; }
@keyframes flash2 { 50% { box-shadow: 0 0 0 5px var(--gold, #ffd166); } }
.bin-board.symbols .bin-cell { font-size: calc(var(--cs) * .5); }
.bin-count { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink3); display: flex; align-items: center; justify-content: center; }
.bin-count.full { color: var(--green); font-weight: 700; }
.bin-count.over { color: var(--red); font-weight: 700; }

/* ═════ Print: just the puzzle, in ink ═════ */
@media print {
  header, .site-nav, #nav-placeholder, .ctrl-bar, .keypad, aside, .about, .ps-guide, .ps-foot, .status-box, .intro, .steps, .phase-tabs, .gen-overlay { display: none !important; }
  body, html { background: #fff !important; color: #000 !important; }
  body::before { display: none !important; }
  .pg-wrap { padding: 0; max-width: none; }
  .pg-layout { display: block; }
  .board-wrap { border: none; box-shadow: none; background: #fff; padding: 0; margin-top: 1cm; }
  .print-title { display: block !important; }
  .sky-board { --cs: 1.5cm !important; }
  .sky-cell { background: #fff !important; border-color: #000 !important; box-shadow: none !important; }
  .sky-cell.tower::before { display: none; }
  .sky-cell .v { color: #000 !important; }
  .sky-cell:not(.given) .v, .notes { visibility: hidden; }
  .sky-clue span { border-color: #000 !important; background: #fff !important; color: #000 !important; opacity: 1 !important; text-decoration: none !important; box-shadow: none !important; }
  .bin-board { --cs: 1.2cm !important; background: #fff; gap: 0; }
  .bin-cell { background: #fff !important; border: 1px solid #000 !important; border-radius: 0; color: #000 !important; box-shadow: none !important; }
  .bin-cell:not(.given) { color: transparent !important; }
  .bin-cell.given::after { display: none; }
  .bin-count { display: none; }
}
.print-title { display: none; text-align: center; font: 600 20px 'Fredoka', 'Nunito', sans-serif; color: #000; }
.bin-cell.ln { outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.bin-cell.rule-bad { box-shadow: 0 0 0 3px var(--red); }
.bin-cell.sel { box-shadow: 0 0 0 3px var(--accent); }
.bin-cell .sy { pointer-events: none; }
.daily-btn { width: 100%; height: 40px; margin-top: .5rem; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--gold, #c98a1e) 70%, transparent); background: color-mix(in srgb, var(--gold, #c98a1e) 14%, var(--surface)); color: var(--ink); font-weight: 800; font-size: 13.5px; cursor: pointer; touch-action: manipulation; }
.daily-btn:hover { background: color-mix(in srgb, var(--gold, #c98a1e) 24%, var(--surface)); }
.daily-tag { display: inline-block; margin-left: .4rem; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--gold, #c98a1e) 22%, transparent); color: var(--ink); vertical-align: middle; }
/* games: board, then options, then the how-to — on phones the options come before the how-to */
.pg-layout { grid-template-areas: "main side" "about side"; }
.pg-layout > .pg-main { grid-area: main; }
.pg-layout > aside { grid-area: side; }
.pg-layout > .about { grid-area: about; margin-top: 0; }
@media (max-width: 760px) { .pg-layout { grid-template-areas: "main" "side" "about"; } }

/* ═════ ps-kit: SVG boards and tools for the newer puzzles ═════ */
:root {
  --rg0: #ffd9d9; --rg1: #ffe7c2; --rg2: #fff3b0; --rg3: #d9f5c9; --rg4: #c8f0e6; --rg5: #cfe8ff;
  --rg6: #dcd6ff; --rg7: #f3d4f5; --rg8: #ffd6e8; --rg9: #e5ecc1; --rg10: #d4eef7; --rg11: #ece0d0;
  --pz-ink: var(--ink); --pz-line: color-mix(in srgb, var(--ink) 22%, transparent); --pz-thick: color-mix(in srgb, var(--ink) 85%, transparent);
  --pz-mark: color-mix(in srgb, var(--ink) 45%, transparent); --pz-fill: #2b2347; --pz-lit: #fff1b8; --pz-bulb: #f5b301;
}
@media (prefers-color-scheme: dark) {
  :root {
    --rg0: #6e2a44; --rg1: #73491c; --rg2: #6a6118; --rg3: #2b6338; --rg4: #17615a; --rg5: #22497f;
    --rg6: #42398f; --rg7: #6a3383; --rg8: #7c2d5e; --rg9: #4f6222; --rg10: #1d5f78; --rg11: #5e4a33;
    --pz-line: color-mix(in srgb, var(--ink) 20%, transparent); --pz-thick: color-mix(in srgb, var(--ink) 80%, transparent);
    --pz-fill: #e9e3ff; --pz-lit: #4a3f12; --pz-bulb: #ffd166;
  }
}
.board-wrap.pz { padding: .8rem; min-height: 200px; }
.board-wrap.pz > #board { width: 100%; display: flex; justify-content: center; }
.pz-svg { display: block; touch-action: none; user-select: none; -webkit-user-select: none; overflow: visible; }
.pz-svg text { font-family: 'DM Mono', monospace; font-weight: 600; fill: var(--ink); pointer-events: none; }
.pz-svg .t-ui { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; }
.pz-bg { fill: var(--board-bg, var(--surface)); }
.pz-grid { stroke: var(--pz-line); stroke-width: 1; fill: none; }
.pz-thick { stroke: var(--pz-thick); stroke-width: 3; stroke-linecap: round; fill: none; }
.pz-frame { stroke: var(--pz-thick); stroke-width: 3.5; fill: none; }
.pz-hl { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.pz-focus { fill: none; stroke: var(--gold, #ffd166); stroke-width: 3.5; }
.pz-errfill { fill: color-mix(in srgb, var(--red) 28%, transparent); }
.pz-err { stroke: var(--red) !important; }
.pz-flash { animation: pzflash 1.3s ease; }
@keyframes pzflash { 0%, 100% { opacity: 1; } 30% { opacity: .35; } 60% { opacity: 1; } }
.pz-mark { stroke: var(--pz-mark); stroke-width: 2.2; stroke-linecap: round; }
.pz-dot { fill: var(--pz-mark); }
.pz-ok { fill: var(--green) !important; }
.pz-good { stroke: var(--green) !important; }
#tools { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: .8rem; }
.tool-btn { display: inline-flex; align-items: center; gap: .45rem; height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--border2); background: var(--surface); color: var(--ink2); font-weight: 800; font-size: 13.5px; cursor: pointer; touch-action: manipulation; box-shadow: var(--card-shadow, none); }
.tool-btn .ti { font-size: 18px; line-height: 1; }
.tool-btn kbd { font-family: 'DM Mono', monospace; font-size: 10px; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border2); color: var(--ink3); background: var(--panel); }
.tool-btn.on { border-color: var(--accent); background: var(--accent-light); color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); margin-right: .55rem; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.legend { display: flex; flex-wrap: wrap; gap: .4rem .8rem; justify-content: center; font-size: 12.5px; color: var(--ink3); margin-top: .55rem; }
.legend b { color: var(--ink); }
@media print {
  #tools, .legend { display: none !important; }
  .board-wrap.pz { background: #fff !important; }
  .pz-svg { width: 17cm !important; height: auto !important; max-height: 24cm; }
  .pz-svg .pz-player { display: none; }
  .pz-svg text { fill: #000 !important; }
  .pz-grid { stroke: #888 !important; } .pz-thick, .pz-frame { stroke: #000 !important; }
  .pz-svg .pz-region { fill: #fff !important; }
}

.pz-star { fill: #f7b500; stroke: #9a6400; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
@media (prefers-color-scheme: dark) { .pz-star { fill: #ffd166; stroke: #b07a00; } }
.pz-star.bad { fill: var(--red); stroke: var(--red); }
.swatch { display: inline-block; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.tool-btn.sw { padding: 0 9px; }
@media print { .pz-star { fill: #000 !important; stroke: #000 !important; filter: none; } }
/* rectangles */
.pz-rect { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: color-mix(in srgb, var(--ink) 70%, transparent); stroke-width: 2.2; }
.pz-rect.bad { stroke: var(--red); stroke-width: 3; fill: color-mix(in srgb, var(--red) 18%, transparent) !important; }
.pz-rect.outline { fill: none; stroke: var(--green); stroke-width: 2.5; }
.pz-own { opacity: .75; }
.pz-clue { fill: var(--surface); stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.6; }
.pz-clue.done { fill: var(--green-light); stroke: var(--green); }
.pz-svg text.pz-cluetxt { font-size: 16px; font-weight: 700; }
.pz-svg text.pz-cluetxt.small { font-size: 12px; }
.pz-svg text.pz-dim { font-size: 8.5px; fill: var(--ink3); font-weight: 500; }
.pz-draft { fill: color-mix(in srgb, var(--accent) 20%, transparent); stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 4; }
.pz-draft.ok { fill: color-mix(in srgb, var(--green) 22%, transparent); stroke: var(--green); }
.pz-draft.size { fill: color-mix(in srgb, var(--amber) 18%, transparent); stroke: var(--amber); }
.pz-draft.bad { fill: color-mix(in srgb, var(--red) 14%, transparent); stroke: var(--red); }
.pz-tip { fill: var(--ink); opacity: .92; }
.pz-svg text.pz-tiptxt { fill: var(--page); font-size: 11.5px; }
.pz-svg text.pz-factors { font-size: 11.5px; fill: var(--accent); }
.pz-svg text.pz-candn { font-size: 9px; fill: var(--ink3); }
@media print { .pz-clue { fill: #fff !important; stroke: #000 !important; } }
/* bridges */
.pz-sea { fill: color-mix(in srgb, var(--blue) 7%, var(--board-bg, var(--surface))); }
.pz-bridge { stroke: color-mix(in srgb, var(--ink) 80%, transparent); stroke-width: 3; stroke-linecap: round; }
.pz-bridge.bad { stroke: var(--red); }
.pz-bridge.draft { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 5; opacity: .8; }
.pz-bridge.maybe { stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 2; stroke-dasharray: 3 5; }
.pz-isle { fill: var(--surface); stroke: color-mix(in srgb, var(--ink) 75%, transparent); stroke-width: 2.4; transition: fill .15s; }
.pz-isle.full { fill: var(--green-light); stroke: var(--green); }
.pz-isle.over { fill: var(--red-light); stroke: var(--red); }
.pz-isle.sel { stroke: var(--accent); stroke-width: 3.5; }
.pz-isle.focus { stroke: var(--gold, #ffd166); stroke-width: 4; }
.pz-svg text.pz-isletxt { font-size: 17px; font-weight: 700; }
@media print { .pz-isle { fill: #fff !important; stroke: #000 !important; } .pz-sea { fill: #fff !important; } }
/* nonograms */
.pz-cluepanel { fill: var(--panel); }
.pz-ncell { fill: var(--pz-fill); }
.pz-ncell.bad { fill: var(--red) !important; }
.pz-svg text.pz-ncl { font-size: 12px; font-weight: 600; fill: var(--ink); }
.pz-svg text.pz-ncl.done { fill: var(--ink3); opacity: .45; }
.pz-nchip { stroke: color-mix(in srgb, var(--ink) 25%, transparent); stroke-width: .8; }
.pz-grid.five { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1.4; }
.pz-mark.thin { stroke-width: 1.6; }
.pz-focus.thin { stroke-width: 2.4; }
.pz-hl.strong { fill: color-mix(in srgb, var(--gold, #ffd166) 22%, transparent); }
.credit { font-size: 12px; color: var(--ink3); }
@media print { .pz-cluepanel { fill: #fff !important; } .pz-ncl { fill: #000 !important; opacity: 1 !important; } }
/* tents */
.pz-meadow { fill: color-mix(in srgb, var(--green) 6%, var(--board-bg, var(--surface))); }
.pz-trunk { fill: #8a5a2b; }
.pz-canopy { fill: #2f9e44; stroke: #1f7a33; stroke-width: 1; }
@media (prefers-color-scheme: dark) { .pz-canopy { fill: #3fbf5f; stroke: #2a8f45; } .pz-trunk { fill: #b07a45; } }
.pz-tent { fill: #f08c00; stroke: #b35f00; stroke-width: 1.5; stroke-linejoin: round; }
.pz-tent.bad { fill: var(--red); stroke: var(--red); }
.pz-tentdoor { fill: #5c3200; opacity: .55; }
.pz-grass { fill: color-mix(in srgb, var(--green) 22%, transparent); }
.pz-grass.bad { fill: color-mix(in srgb, var(--red) 30%, transparent); }
.pz-svg text.pz-count { font-size: 15px; font-weight: 700; fill: var(--ink2); }
.pz-svg text.pz-count.ok { fill: var(--green); }
.pz-svg text.pz-count.over { fill: var(--red); }
@media print { .pz-canopy { fill: #000 !important; stroke: #000 !important; } .pz-trunk { fill: #000 !important; } .pz-meadow { fill: #fff !important; } }
/* light up */
.pz-dark { fill: color-mix(in srgb, var(--ink) 5%, var(--board-bg, var(--surface))); }
.pz-litcell { fill: var(--pz-lit); transition: fill .2s; }
.pz-wall { fill: #1f1b2e; }
@media (prefers-color-scheme: dark) { .pz-wall { fill: #3b3360; stroke: #574d86; stroke-width: 1; } }
.pz-wall.ok { fill: #1d5e45; } .pz-wall.over { fill: #8a1c35; }
.pz-svg text.pz-walltxt { fill: #fff; font-size: 17px; font-weight: 700; }
.pz-glow { fill: color-mix(in srgb, var(--pz-bulb) 30%, transparent); }
.pz-bulb { fill: var(--pz-bulb); stroke: #a06a00; stroke-width: 1.2; }
.pz-bulb.bad { fill: var(--red); stroke: var(--red); }
.pz-bulbbase { fill: #8b8b9b; }
.pz-errdot { fill: var(--red) !important; }
@media print { .pz-litcell, .pz-glow { display: none; } .pz-wall { fill: #000 !important; } }
/* kakurasu */
.pz-svg text.pz-weight { font-size: 12px; fill: var(--ink3); font-weight: 600; }
.pz-shade { fill: var(--accent); opacity: .9; }
.pz-shade.bad { fill: var(--red); }
.pz-svg text.pz-shadeval { fill: #fff; font-size: 13px; font-weight: 700; }
.pz-svg text.pz-run { font-size: 9px; fill: var(--ink3); font-weight: 500; }
@media print { .pz-shade { display: none; } }
/* slitherlink */
.pz-gdot { fill: var(--ink); opacity: .75; }
.pz-loop { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.pz-loop.bad { stroke: var(--red); }
.pz-loop.focus { stroke: var(--gold, #ffd166); stroke-width: 6; opacity: .95; }
.pz-inside { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.pz-svg text.pz-slnum { font-size: 21px; font-weight: 700; }
.pz-svg text.pz-slnum.ok { fill: var(--green); }
.pz-svg text.pz-slnum.over { fill: var(--red); }
.pz-svg text.pz-slnum.cur { fill: var(--accent); }
@media print { .pz-inside { display: none; } .pz-loop { stroke: #000; } }
/* galaxies */
.pz-gal { opacity: .78; transition: opacity .2s; }
.pz-gal.done { opacity: 1; }
.pz-star { fill: #fff; stroke: #2b2347; stroke-width: 2.2; }
.pz-star.done { fill: #ffd166; stroke: #8a5a00; }
.pz-star.cur { fill: var(--gold, #ffd166); stroke: var(--accent); stroke-width: 3; }
.pz-brushring { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 4 3; animation: pzspin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pzspin { to { transform: rotate(360deg); } }
@media print { .pz-gal, .pz-brushring { display: none; } .pz-star { fill: #fff; stroke: #000; } }
/* sun & moon */
.pz-tcell { fill: color-mix(in srgb, var(--ink) 5%, var(--surface)); stroke: var(--pz-line); stroke-width: 1; }
.pz-tcell.given { fill: color-mix(in srgb, var(--ink) 11%, var(--surface)); }
.pz-tcell.bad { fill: color-mix(in srgb, var(--red) 24%, var(--surface)); stroke: var(--red); }
.pz-sun { fill: #ffc233; stroke: #e08a00; stroke-width: 1.6; }
.pz-sunray { stroke: #f5a400; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.pz-moon { fill: #6f7cff; stroke: #3f47b8; stroke-width: 1.4; }
.pz-sun.given { fill: #f2a900; } .pz-moon.given { fill: #4b55d6; }
.pz-svg text.pz-tdig { font-size: 22px; font-weight: 700; }
.pz-svg text.pz-tdig.given { fill: var(--accent); }
.pz-from { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 4 3; }
.pz-signbg { fill: var(--surface); stroke: var(--pz-thick); stroke-width: 1.4; }
.pz-signbg.hl { fill: var(--gold, #ffd166); }
.pz-signbg.bad { fill: var(--red); stroke: var(--red); }
.pz-svg text.pz-signtx { font-family: 'Nunito', system-ui, sans-serif; font-size: 14px; font-weight: 900; }
.pz-svg text.pz-run.ok { fill: var(--green); } .pz-svg text.pz-run.over { fill: var(--red); }
@media print { .pz-tcell { fill: #fff !important; } }
.pz-cnt text.pz-run { font-size: 11px; font-weight: 700; }
/* sudoku variants */
.sv-piece { opacity: .55; }
.sv-window { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.sv-diag { stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 2; stroke-dasharray: 5 4; }
.sv-peer { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.sv-same { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.sv-sel { fill: color-mix(in srgb, var(--gold, #ffd166) 45%, transparent); stroke: var(--gold, #ffd166); stroke-width: 2.5; }
.sv-elim { fill: color-mix(in srgb, var(--red) 12%, transparent); }
.sv-even { fill: color-mix(in srgb, var(--ink) 13%, transparent); }
.sv-odd { fill: color-mix(in srgb, var(--ink) 13%, transparent); }
.sv-tline { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.sv-tbulb { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.pz-svg text.sv-dig { font-family: 'Nunito', system-ui, sans-serif; font-size: 25px; font-weight: 800; fill: var(--accent); }
.pz-svg text.sv-dig.given { fill: var(--ink); font-weight: 900; }
.pz-svg text.sv-dig.bad { fill: var(--red); }
.pz-svg text.sv-note { font-family: 'Nunito', system-ui, sans-serif; font-size: 10.5px; font-weight: 700; fill: var(--ink3); }
.sv-dot { stroke: #2b2347; stroke-width: 1.8; }
.sv-dot.w { fill: #fff; } .sv-dot.b { fill: #120f20; stroke: #b9b0e8; }
.sv-dot.bad { stroke: var(--red); stroke-width: 2.6; }
.sv-xvbg { fill: var(--surface); stroke: var(--pz-thick); stroke-width: 1.2; }
.sv-xvbg.bad { stroke: var(--red); stroke-width: 2.4; }
.pz-svg text.sv-xv { font-family: 'Nunito', system-ui, sans-serif; font-size: 13px; font-weight: 900; }
.sv-cap { max-width: 640px; margin: .7rem auto 0; text-align: center; font-size: 14px; color: var(--ink2); line-height: 1.45; }
.sv-pad { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: .7rem auto 0; max-width: 640px; }
.sv-padbtn { min-width: 50px; height: 54px; border-radius: 12px; border: 1.5px solid var(--border2); background: var(--surface); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: manipulation; box-shadow: var(--card-shadow, none); }
.sv-padbtn b { font-family: 'Nunito', system-ui, sans-serif; font-size: 22px; font-weight: 900; line-height: 1; }
.sv-padbtn small { font-size: 10px; color: var(--ink3); font-weight: 700; margin-top: 2px; }
.sv-padbtn.on { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.sv-padbtn.done { opacity: .45; }
.sv-padbtn.erase b { font-size: 18px; }
@media (max-width: 520px) { .sv-padbtn { min-width: 38px; height: 48px; } .sv-padbtn b { font-size: 19px; } }
@media print { .sv-pad, .sv-peer, .sv-same, .sv-sel { display: none; } .sv-dig:not(.given) { display: none; } }
.num-btn.wide { font-family: 'Nunito', system-ui, sans-serif; font-size: 14px; font-weight: 800; padding: 0 14px; }
/* number path */
.np-cell { fill: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.np-cell.on { fill: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.np-pathbg { fill: none; stroke: color-mix(in srgb, var(--accent) 30%, transparent); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.np-path { fill: none; stroke: var(--accent); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.np-path.done { stroke: var(--green); }
.np-head { fill: var(--gold, #ffd166); stroke: var(--accent); stroke-width: 3; animation: pzpulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pzpulse { 50% { transform: scale(1.25); } }
.np-wall { stroke: var(--pz-thick); stroke-width: 6; stroke-linecap: round; }
.np-numbg { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.np-numbg.on { fill: var(--accent); }
.np-numbg.next { stroke: var(--gold, #ffd166); stroke-width: 3.5; }
.np-numbg.bad { fill: var(--red); }
.pz-svg text.np-num { fill: var(--surface); font-family: 'Nunito', system-ui, sans-serif; font-size: 15px; font-weight: 900; }
@media print { .np-path, .np-pathbg, .np-head { display: none; } .np-cell.on { fill: #fff; } }
/* sum circles */
.sc-cell { fill: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
.sc-line { stroke: var(--pz-line); stroke-width: 1.5; }
.pz-svg text.sc-dig { font-size: 32px; }
.sc-circ { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.sc-circ.ok { fill: color-mix(in srgb, var(--green) 25%, var(--surface)); stroke: var(--green); }
.sc-circ.bad { fill: color-mix(in srgb, var(--red) 22%, var(--surface)); stroke: var(--red); }
.sc-circ.hl { stroke: var(--gold, #ffd166); stroke-width: 4.5; }
.pz-svg text.sc-ctx { font-family: 'Nunito', system-ui, sans-serif; font-size: 16px; font-weight: 900; }
.sc-pill { stroke: var(--pz-thick); stroke-width: 1.5; }
.sc-pill.ok { stroke: var(--green); stroke-width: 3; } .sc-pill.bad { stroke: var(--red); stroke-width: 3; } .sc-pill.hl { stroke: var(--gold, #ffd166); stroke-width: 3.5; }
.pz-svg text.sc-ptx { font-family: 'Nunito', system-ui, sans-serif; font-size: 14px; font-weight: 900; fill: #1c1830; }
@media (prefers-color-scheme: dark) { .sc-cell[style] { opacity: .85; } }
/* equation square */
.eq-cell { fill: color-mix(in srgb, var(--ink) 4%, var(--surface)); stroke: var(--pz-thick); stroke-width: 2; }
.eq-cell.given { fill: color-mix(in srgb, var(--ink) 11%, var(--surface)); }
.eq-cell.bad { stroke: var(--red); stroke-width: 3; }
.pz-svg text.eq-dig { font-size: 32px; }
.pz-svg text.eq-op { font-family: 'Nunito', system-ui, sans-serif; font-size: 24px; font-weight: 900; fill: var(--accent); }
.eq-res { fill: var(--accent-light, color-mix(in srgb, var(--accent) 14%, var(--surface))); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.5; }
.eq-res.ok { fill: color-mix(in srgb, var(--green) 22%, var(--surface)); stroke: var(--green); }
.eq-res.bad { fill: color-mix(in srgb, var(--red) 20%, var(--surface)); stroke: var(--red); }
.eq-res.hl { stroke: var(--gold, #ffd166); stroke-width: 3.5; }
.pz-svg text.eq-rtx { font-family: 'Nunito', system-ui, sans-serif; font-size: 22px; font-weight: 900; }
/* number chain */
.ch-box { fill: var(--surface); stroke: var(--pz-thick); stroke-width: 2; }
.ch-box.start { fill: var(--accent); stroke: none; }
.ch-box.sel { stroke: var(--gold, #ffd166); stroke-width: 4; }
.ch-box.ok { fill: color-mix(in srgb, var(--green) 20%, var(--surface)); stroke: var(--green); }
.ch-box.bad { fill: color-mix(in srgb, var(--red) 18%, var(--surface)); stroke: var(--red); }
.ch-box.hidden { stroke-dasharray: 6 5; fill: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.pz-svg text.ch-num { font-family: 'Nunito', system-ui, sans-serif; font-size: 26px; font-weight: 900; }
.pz-svg text.ch-num.start { fill: #fff; }
.ch-arrow { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 3; stroke-linecap: round; marker-end: none; }
.ch-op { fill: var(--gold, #ffd166); stroke: #a06a00; stroke-width: 1.2; }
.ch-op.hl { fill: var(--accent); stroke: var(--accent); }
.pz-svg text.ch-optx { font-family: 'Nunito', system-ui, sans-serif; font-size: 14px; font-weight: 900; fill: #2b1d00; }
.ch-op.hl + text.ch-optx { fill: #fff; }
.pz-svg text.ch-cap { font-family: 'Nunito', system-ui, sans-serif; font-size: 11px; font-weight: 800; fill: var(--ink3); text-transform: uppercase; letter-spacing: .08em; }
@media print { .ch-box.start { fill: #fff; stroke: #000; } .pz-svg text.ch-num.start { fill: #000; } }
/* number blocks */
.nb-cell { fill: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
.nb-cell[style] { opacity: .5; }
.pz-svg text.nb-szt { font-family: 'Nunito', system-ui, sans-serif; font-size: 10px; font-weight: 800; fill: var(--ink3); }
/* letter sums */
.ls-tile { fill: color-mix(in srgb, var(--ink) 5%, var(--surface)); stroke: var(--pz-line); stroke-width: 1.2; }
.ls-tile.hl { fill: color-mix(in srgb, var(--gold, #ffd166) 45%, var(--surface)); stroke: var(--gold, #ffd166); }
.ls-tile.sel { stroke: var(--accent); stroke-width: 2.5; }
.ls-tile.col { fill: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.pz-svg text.ls-letter { font-family: 'Nunito', system-ui, sans-serif; font-size: 20px; font-weight: 900; }
.pz-svg text.ls-digit { font-family: 'Nunito', system-ui, sans-serif; font-size: 12px; font-weight: 900; fill: var(--accent); }
.pz-svg text.ls-op { font-family: 'Nunito', system-ui, sans-serif; font-size: 22px; font-weight: 900; fill: var(--accent); }
.ls-rule { stroke: var(--pz-thick); stroke-width: 2.5; }
.pz-svg text.ls-mark { font-size: 20px; font-weight: 900; } .pz-svg text.ls-mark.ok { fill: var(--green); } .pz-svg text.ls-mark.bad { fill: var(--red); }
.pz-svg text.ls-head { font-family: 'Nunito', system-ui, sans-serif; font-size: 14px; font-weight: 900; fill: var(--accent); }
.pz-svg text.ls-rowh { font-family: 'Nunito', system-ui, sans-serif; font-size: 16px; font-weight: 900; }
.pz-svg text.ls-rowh.sel { fill: var(--accent); }
.ls-cell { fill: color-mix(in srgb, var(--ink) 4%, var(--surface)); stroke: var(--pz-line); stroke-width: 1; }
.ls-cell.alt { fill: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.ls-cell.on { fill: color-mix(in srgb, var(--green) 22%, var(--surface)); }
.ls-yes { fill: none; stroke: var(--green); stroke-width: 3; }
.ls-no { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 2; stroke-linecap: round; }
.pz-svg text.ls-word { font-family: 'Nunito', system-ui, sans-serif; font-size: 15px; font-weight: 900; fill: var(--accent); letter-spacing: .06em; }
/* make the number */
.mt-target { fill: var(--accent); }
.mt-target.won { fill: var(--green); }
.pz-svg text.mt-ttx { font-family: 'Nunito', system-ui, sans-serif; font-size: 40px; font-weight: 900; fill: #fff; }
.pz-svg text.mt-sub { font-family: 'Nunito', system-ui, sans-serif; font-size: 13px; font-weight: 800; fill: var(--ink3); }
.mt-target + text + text.mt-sub { fill: rgba(255,255,255,.85); }
.mt-tile { fill: var(--surface); stroke: var(--pz-thick); stroke-width: 2; filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--ink) 18%, transparent)); }
.mt-tile.made { fill: color-mix(in srgb, var(--accent) 14%, var(--surface)); stroke: var(--accent); }
.mt-tile.pick { fill: var(--gold, #ffd166); stroke: #a06a00; }
.mt-tile.hit { fill: color-mix(in srgb, var(--green) 30%, var(--surface)); stroke: var(--green); }
.mt-tile.hl { stroke: var(--gold, #ffd166); stroke-width: 4; }
.pz-svg text.mt-num { font-family: 'Nunito', system-ui, sans-serif; font-size: 28px; font-weight: 900; }
.pz-svg text.mt-num.small { font-size: 21px; }
.mt-tile.pick + text.mt-num { fill: #2b1d00; }
.pz-svg text.mt-hist { font-family: 'Nunito', system-ui, sans-serif; font-size: 18px; font-weight: 800; }
.pz-svg text.mt-hist.dim { fill: var(--ink3); font-size: 14px; }
.mt-opbtn b { font-size: 26px; }
@media print { .mt-target { fill: #fff; stroke: #000; stroke-width: 2; } .pz-svg text.mt-ttx { fill: #000; } }
/* number regions */
.fr-cell { fill: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
.fr-cell[style] { opacity: .45; }
.fr-cell.full[style] { opacity: .8; }
.fr-cell.over { fill: color-mix(in srgb, var(--red) 25%, var(--surface)) !important; opacity: 1; }
/* ripple rooms */
.rp-wave { fill: none; stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 2; stroke-dasharray: 3 3; }
/* sightlines */
.kd-cell { fill: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
.kd-cell.lit { fill: color-mix(in srgb, var(--gold, #ffd166) 35%, var(--surface)); }
.kd-cell.shade { fill: var(--shade, #2b2347); }
.kd-cell.bad { fill: var(--red); }
.kd-numbg { fill: var(--surface); stroke: var(--pz-thick); stroke-width: 2; }
.kd-numbg.ok { fill: color-mix(in srgb, var(--green) 25%, var(--surface)); stroke: var(--green); }
.kd-numbg.bad { fill: color-mix(in srgb, var(--red) 20%, var(--surface)); stroke: var(--red); }
.pz-svg text.kd-num { font-family: 'Nunito', system-ui, sans-serif; font-size: 18px; font-weight: 900; }
@media print { .kd-cell.shade { fill: #fff; } .kd-cell.lit { fill: #fff; } }
/* fleet finder */
.fl-sea { fill: color-mix(in srgb, #4aa3df 10%, var(--surface)); }
.fl-sea.water { fill: color-mix(in srgb, #4aa3df 24%, var(--surface)); }
.fl-wave { fill: none; stroke: #2e86c1; stroke-width: 2; stroke-linecap: round; opacity: .8; }
.fl-wave.given { stroke-width: 3; opacity: 1; }
.fl-ship { fill: #5b6475; stroke: #2b3240; stroke-width: 1.5; }
.fl-ship.given { fill: #2b3240; }
.fl-ship.bad { fill: var(--red); }
@media (prefers-color-scheme: dark) { .fl-ship { fill: #aab3c5; stroke: #e6ebf5; } .fl-ship.given { fill: #e6ebf5; } }
.pz-svg text.fl-count { font-family: 'Nunito', system-ui, sans-serif; font-size: 18px; font-weight: 900; }
.pz-svg text.fl-count.ok { fill: var(--green); } .pz-svg text.fl-count.full { fill: var(--accent); } .pz-svg text.fl-count.over { fill: var(--red); }
.fl-mini { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.fl-mini.got { fill: var(--green); }
@media print { .fl-sea, .fl-sea.water { fill: #fff; } }
/* mosaic */
.ms-cell { fill: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
.ms-cell.shade { fill: var(--shade, #2b2347); }
.ms-cell.hl { stroke: var(--accent); stroke-width: 2; }
.ms-line5 { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1.6; }
.pz-svg text.ms-num { font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; }
.pz-svg text.ms-num.inv { fill: var(--shade-ink, #fff); }
.pz-svg text.ms-num.done { opacity: .35; }
.pz-svg text.ms-num.bad { fill: var(--red); }
@media print { .ms-cell.shade { fill: #fff; } .pz-svg text.ms-num.inv { fill: #000; } }
/* domino hunt */
.dh-cell { fill: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.dh-tile { fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); stroke: var(--accent); stroke-width: 2.4; }
.dh-tile.dup { fill: color-mix(in srgb, var(--red) 18%, var(--surface)); stroke: var(--red); }
.dh-tile.hl { stroke: var(--gold, #ffd166); stroke-width: 3.5; }
.dh-split { stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 2; }
.pz-svg text.dh-num { font-family: 'Nunito', system-ui, sans-serif; font-size: 22px; font-weight: 900; }
.dh-pip { fill: var(--ink); }
.dh-chip { fill: color-mix(in srgb, var(--ink) 6%, var(--surface)); stroke: var(--pz-line); }
.dh-chip.got { fill: color-mix(in srgb, var(--green) 25%, var(--surface)); stroke: var(--green); }
.dh-chip.dup { fill: color-mix(in srgb, var(--red) 25%, var(--surface)); stroke: var(--red); }
.pz-svg text.dh-ctx { font-family: 'Nunito', system-ui, sans-serif; font-size: 11px; font-weight: 800; }
@media print { .dh-list, .sc-legend { display: none; } }
/* number pyramid */
.py-brick { fill: #fde8c8; stroke: #c98a3a; stroke-width: 2; }
.py-brick.given { fill: #f6c98b; }
.py-brick.sel { stroke: var(--accent); stroke-width: 3.5; }
.py-brick.ok { fill: #cdeccd; stroke: #3d9a50; }
.py-brick.bad { fill: #f6c3c3; stroke: var(--red); }
.py-brick.hl { stroke: var(--gold, #ffd166); stroke-width: 4; }
.py-brick.from { stroke: var(--accent); stroke-dasharray: 5 3; }
@media (prefers-color-scheme: dark) { .py-brick { fill: #5a3d22; stroke: #d39a52; } .py-brick.given { fill: #7a5328; } .py-brick.ok { fill: #24563a; } .py-brick.bad { fill: #6b2335; } }
.pz-svg text.py-num { font-family: 'Nunito', system-ui, sans-serif; font-size: 20px; font-weight: 800; fill: #3b2410; }
.pz-svg text.py-num.given { font-weight: 900; }
.pz-svg text.py-num.small { font-size: 14px; }
@media (prefers-color-scheme: dark) { .pz-svg text.py-num { fill: #fff4e3; } }
/* sudoku variants: lines and outside clues */
.sv-lc { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.sv-lc.renban { stroke: #a855f7; } .sv-lc.whisper { stroke: #22c55e; }
.sv-lc.bad { stroke: var(--red); } .sv-lc.hl { opacity: 1; stroke-width: 11; }
.sv-arrow { fill: none; stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sv-arrow.bad { stroke: var(--red); }
.sv-acirc { fill: var(--surface); stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 2.4; fill-opacity: .4; }
.sv-acirc.bad { stroke: var(--red); }
.pz-svg text.sv-out { font-family: 'Nunito', system-ui, sans-serif; font-size: 16px; font-weight: 900; fill: var(--accent); }
.pz-svg text.sv-out.bad { fill: var(--red); }
.pz-svg text.sv-outarrow { font-size: 11px; fill: var(--ink3); }
/* cross numbers */
.cn-black { fill: var(--shade, #2b2347); }
.cn-cell { fill: var(--surface); }
.cn-cell.act { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.cn-cell.sel { fill: color-mix(in srgb, var(--gold, #ffd166) 45%, var(--surface)); }
.cn-cell.bad { fill: color-mix(in srgb, var(--red) 22%, var(--surface)); }
.cn-cell.hl { fill: color-mix(in srgb, var(--green) 18%, var(--surface)); }
.pz-svg text.cn-n { font-family: 'Nunito', system-ui, sans-serif; font-size: 10px; font-weight: 800; fill: var(--ink3); }
.pz-svg text.cn-dig { font-family: 'Nunito', system-ui, sans-serif; font-size: 26px; font-weight: 800; fill: var(--accent); }
.cn-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 680px; margin: .8rem auto 0; }
@media (max-width: 560px) { .cn-list { grid-template-columns: 1fr; } }
.cn-col h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.cn-clue { display: block; width: 100%; text-align: left; border: 1.5px solid var(--border2); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; font: inherit; font-size: 14px; cursor: pointer; line-height: 1.35; }
.cn-clue b { color: var(--accent); margin-right: 4px; } .cn-clue i { color: var(--ink3); font-style: normal; font-size: 12px; }
.cn-clue.on { border-color: var(--accent); background: var(--accent-light, color-mix(in srgb, var(--accent) 12%, var(--surface))); }
.cn-clue.ok { border-color: var(--green); } .cn-clue.ok::after { content: ' ✓'; color: var(--green); font-weight: 900; }
.cn-clue.bad { border-color: var(--red); }
@media print { .cn-black { fill: #000; } .cn-list { display: grid; } .cn-clue { border: 0; padding: 2px 0; } }

/* ═════ Thermometers ═════ */
.th-glass { fill: color-mix(in srgb, var(--ink) 7%, var(--board-bg, var(--surface))); stroke: color-mix(in srgb, var(--ink) 38%, transparent); stroke-width: 1.6; }
.th-hg { fill: #e5383b; }
.th-hgline { stroke: #e5383b; stroke-width: 11; stroke-linecap: round; }
.th-hg.bad, .th-hgline.bad { fill: #ff9f1c; stroke: #ff9f1c; }
@media (prefers-color-scheme: dark) { .th-hg { fill: #ff5d6c; } .th-hgline { stroke: #ff5d6c; } }
@media print { .th-glass { fill: #fff !important; stroke: #000 !important; } }

/* ═════ Water Tanks ═════ */
.wt-water { fill: #5fa8f5; }
.wt-water.bad { fill: #ff9f1c; }
.wt-wave { fill: none; stroke: #d9ecff; stroke-width: 2; stroke-linecap: round; opacity: .85; }
.wt-wall { stroke-width: 3.4; }
@media (prefers-color-scheme: dark) { .wt-water { fill: #2f7fd6; } .wt-wave { stroke: #9cc9ff; } }
@media print { .wt-water { fill: #bbb !important; } }

/* ═════ Magnets ═════ */
.mg-plate { fill: color-mix(in srgb, var(--ink) 5%, var(--board-bg, var(--surface))); stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 2; }
.mg-plate.neutral { fill: color-mix(in srgb, var(--ink) 14%, var(--board-bg, var(--surface))); }
.mg-plate.bad { stroke: var(--red); stroke-width: 3; }
.mg-end.plus { fill: #ef4444; } .mg-end.minus { fill: #3b6fe0; }
.mg-end.bad { stroke: #ffd166; stroke-width: 3; }
.pz-svg text.mg-sign { fill: #fff; font-size: 24px; font-weight: 800; font-family: 'Nunito', system-ui, sans-serif; }
.mg-x { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 2.4; stroke-linecap: round; }
.pz-svg text.mg-head { font-size: 22px; font-weight: 800; font-family: 'Nunito', system-ui, sans-serif; }
.pz-svg text.mg-head.plus { fill: #ef4444; } .pz-svg text.mg-head.minus { fill: #3b6fe0; }
.mg-free { fill: none; stroke: var(--amber, #c98a1e); stroke-width: 2; stroke-dasharray: 4 3; }
@media print { .mg-end.plus, .mg-end.minus { fill: #555 !important; } .mg-plate { fill: #fff !important; stroke: #000 !important; } }

/* ═════ Edge Letters ═════ */
.pz-svg text.el-let { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-size: 26px; font-weight: 600; fill: var(--accent); }
.pz-svg text.el-let.given { fill: var(--ink); }
.pz-svg text.el-let.bad { fill: var(--red); }
.el-x { stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 2.2; stroke-linecap: round; }
.el-x.bad { stroke: var(--red); }
.pz-svg text.el-note { font-family: 'Nunito', system-ui, sans-serif; font-size: 10.5px; font-weight: 800; fill: var(--ink3); }
.el-cbg { fill: color-mix(in srgb, var(--accent) 14%, var(--board-bg, var(--surface))); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.6; }
.el-cbg.ok { fill: color-mix(in srgb, var(--green) 22%, var(--board-bg, var(--surface))); stroke: var(--green); }
.el-cbg.over { fill: color-mix(in srgb, var(--red) 18%, var(--board-bg, var(--surface))); stroke: var(--red); }
.el-cbg.empty { fill: none; stroke-dasharray: 3 3; }
.pz-svg text.el-clue { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-size: 17px; font-weight: 600; fill: var(--ink); }
@media print { .el-cbg { fill: #fff !important; stroke: #000 !important; } .pz-svg text.el-let:not(.given) { display: none; } }

/* ═════ Four Colours ═════ */
.fc-c.fc-0, .fc-dot.fc-0 { fill: #ef6f6c; } .fc-c.fc-1, .fc-dot.fc-1 { fill: #f7cf4f; } .fc-c.fc-2, .fc-dot.fc-2 { fill: #5cc283; } .fc-c.fc-3, .fc-dot.fc-3 { fill: #5d9ff0; }
.fc-c.bad { stroke: var(--red); stroke-width: 3; }
.fc-grid { stroke: color-mix(in srgb, var(--ink) 14%, transparent); }
.pz-svg text.fc-sym { font-size: 15px; fill: rgba(0,0,0,.38); font-family: system-ui, sans-serif; }
.pz-svg text.fc-sym.given { fill: rgba(0,0,0,.72); font-size: 17px; }
.swatch.fc-sw-0 { background: #ef6f6c; } .swatch.fc-sw-1 { background: #f7cf4f; } .swatch.fc-sw-2 { background: #5cc283; } .swatch.fc-sw-3 { background: #5d9ff0; }
.swatch[class*="fc-sw-"] { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(0,0,0,.55); }
@media (prefers-color-scheme: dark) { .fc-c.fc-0 { fill: #d9534f; } .fc-c.fc-1 { fill: #e0b52e; } .fc-c.fc-2 { fill: #3fa96b; } .fc-c.fc-3 { fill: #3f83d9; } }
.fc-c.mine { fill-opacity: .78; }

/* ═════ Haunted Mirrors ═════ */
.hm-floor { fill: color-mix(in srgb, #3fa96b 7%, var(--board-bg, var(--surface))); }
.hm-mirror { stroke: #4a5a78; stroke-width: 5; stroke-linecap: round; }
.hm-ray { fill: none; stroke: #ffb703; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; opacity: .55; stroke-dasharray: 2 7; }
.pz-svg text.hm-mon { font-size: 25px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.pz-svg text.hm-note { font-size: 10px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.hm-cbg { fill: color-mix(in srgb, #7c5cbf 14%, var(--board-bg, var(--surface))); stroke: color-mix(in srgb, #7c5cbf 55%, transparent); stroke-width: 1.6; cursor: pointer; }
.hm-cbg.on { stroke: #ffb703; stroke-width: 3; }
.hm-cbg.ok { fill: color-mix(in srgb, var(--green) 22%, var(--board-bg, var(--surface))); stroke: var(--green); }
.hm-cbg.over { fill: color-mix(in srgb, var(--red) 18%, var(--board-bg, var(--surface))); stroke: var(--red); }
.hm-cbg.empty { fill: none; stroke-dasharray: 3 3; }
.pz-svg text.hm-clue { font-family: 'Nunito', system-ui, sans-serif; font-size: 16px; font-weight: 800; fill: var(--ink); }
.pz-svg text.hm-tot-i { font-size: 20px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.pz-svg text.hm-tot { font-family: 'Nunito', system-ui, sans-serif; font-size: 16px; font-weight: 800; fill: var(--ink2); }
.pz-svg text.hm-tot.ok { fill: var(--green); } .pz-svg text.hm-tot.over { fill: var(--red); }
@media (prefers-color-scheme: dark) { .hm-mirror { stroke: #b9c7e6; } }
@media print { .hm-cbg { fill: #fff !important; stroke: #000 !important; } .hm-mirror { stroke: #000 !important; } .hm-ray { display: none; } }

/* ═════ Light Switch ═════ */
.ls-board { fill: #ddd8ee; }
.ls-cell { fill: #f6f4fc; stroke: #c4bce0; stroke-width: 1.5; cursor: pointer; transition: fill .15s; }
@media (prefers-color-scheme: dark) { .ls-board { fill: #1c1830; } .ls-cell { fill: #2e2850; stroke: #3f3770; } }
.ls-cell.on { fill: #ffd166; stroke: #ffe39a; filter: drop-shadow(0 0 7px rgba(255, 209, 102, .75)); }
.ls-cell.near { stroke: #b07ef8; stroke-width: 3; }
.ls-glow { fill: #fff6d6; opacity: .75; pointer-events: none; }
.ls-press { fill: #7ee0b5; stroke: #1c1830; stroke-width: 1.5; pointer-events: none; }
@media print { .ls-board { fill: #fff !important; } .ls-cell { fill: #fff !important; stroke: #000 !important; filter: none !important; } .ls-cell.on { fill: #999 !important; } }

/* ═════ Train Tracks ═════ */
.tt-ground { fill: color-mix(in srgb, #8bc34a 7%, var(--board-bg, var(--surface))); }
.tt-given { fill: color-mix(in srgb, var(--ink) 9%, transparent); }
.tt-bed { fill: none; stroke: #8d6e63; stroke-width: 15; stroke-linecap: butt; stroke-dasharray: 3 5; }
.tt-rail { fill: none; stroke: #5b6475; stroke-width: 6; stroke-linecap: round; }
.tt-rail.given { stroke: var(--ink); }
.tt-rail.bad, .tt-bed.bad { stroke: var(--red); }
.tt-rail-bed { stroke: #5b6475; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 4; }
.tt-stub { stroke: #5b6475; stroke-width: 6; stroke-linecap: round; opacity: .8; }
.tt-x { stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 2; stroke-linecap: round; }
.pz-svg text.tt-ab { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; font-size: 18px; fill: var(--accent); }
@media (prefers-color-scheme: dark) { .tt-rail, .tt-stub, .tt-rail-bed { stroke: #c9d2e3; } .tt-bed { stroke: #a1887f; } }
@media print { .tt-ground { fill: #fff !important; } .tt-rail { stroke: #000 !important; } }

/* ═════ Pipe Link ═════ */
.pl-board { fill: color-mix(in srgb, var(--ink) 10%, var(--board-bg, var(--surface))); }
.pl-tile { fill: var(--board-bg, var(--surface)); stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 1; cursor: pointer; }
.pl-tile.locked { fill: color-mix(in srgb, var(--accent) 10%, var(--board-bg, var(--surface))); stroke: color-mix(in srgb, var(--accent) 50%, transparent); }
.pl-tile.near { stroke: var(--accent); stroke-width: 2.5; }
.pl-pipe-o { fill: none; stroke: color-mix(in srgb, var(--ink) 70%, transparent); stroke-width: 13; stroke-linecap: round; }
.pl-pipe { fill: none; stroke: #c3cad6; stroke-width: 8; stroke-linecap: round; }
.pl-pipe.wet { stroke: #3fa7f5; }
.pl-pipe.bad { stroke: var(--red); }
.pl-end { fill: #c3cad6; stroke: color-mix(in srgb, var(--ink) 70%, transparent); stroke-width: 2.5; }
.pl-end.wet { fill: #3fa7f5; }
.pl-src { fill: #ffd166; stroke: #b07a00; stroke-width: 2; }
@media (prefers-color-scheme: dark) { .pl-pipe { stroke: #59627a; } .pl-end { fill: #59627a; } .pl-pipe.wet, .pl-end.wet { stroke: #4fb3ff; } .pl-end.wet { fill: #4fb3ff; } }
@media print { .pl-pipe.wet, .pl-pipe { stroke: #fff !important; } .pl-pipe-o { stroke: #000 !important; } .pl-tile { fill: #fff !important; } }

/* ═════ Straights ═════ */
.st-black { fill: #1f1a33; }
.pz-svg text.st-bclue { fill: #fff; font-family: 'Nunito', system-ui, sans-serif; font-size: 22px; font-weight: 800; }
.pz-svg text.st-dig { font-family: 'Nunito', system-ui, sans-serif; font-size: 24px; font-weight: 800; fill: var(--accent); }
.pz-svg text.st-dig.given { fill: var(--ink); }
.pz-svg text.st-dig.bad { fill: var(--red); }
.pz-svg text.st-note { font-family: 'Nunito', system-ui, sans-serif; font-size: 10px; font-weight: 800; fill: var(--ink3); }
.st-comp { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (prefers-color-scheme: dark) { .st-black { fill: #0c0a16; } }
@media print { .st-black { fill: #000 !important; } .pz-svg text.st-dig:not(.given) { display: none; } }
.ls-press.big { fill: #2fa36f; stroke: #fff; stroke-width: 2.5; }

/* ═════ Shading kit (Domino Shade, Tetro Shade, Room Shade) ═════ */
.sk-on { fill: var(--pz-fill); }
.sk-on.bad { fill: var(--red); }
.dshade-on { fill: #3b3561; }
.ts-L { fill: #ef8354; } .ts-I { fill: #4f9de8; } .ts-T { fill: #9b6fe0; } .ts-S { fill: #3fb27f; }
.pz-svg text.ts-letter { fill: rgba(255,255,255,.85); font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 15px; font-weight: 600; }
.rs-on { fill: #2f2a4a; }
.pz-svg text.rs-num { font-family: 'Nunito', system-ui, sans-serif; font-size: 13px; font-weight: 800; fill: var(--ink2); }
.pz-svg text.rs-num.ok { fill: var(--green); } .pz-svg text.rs-num.over { fill: var(--red); }
@media (prefers-color-scheme: dark) { .dshade-on { fill: #cfc6ff; } .rs-on { fill: #d9d2ff; } }
@media print { .sk-on, .dshade-on, .rs-on { fill: #000 !important; } .ts-L, .ts-I, .ts-T, .ts-S { fill: #555 !important; } }

/* ═════ Arrow Loop ═════ */
.al-clue { fill: color-mix(in srgb, var(--accent) 10%, var(--surface, #fff)); stroke: color-mix(in srgb, var(--accent) 35%, transparent); stroke-width: 1; }
.pz-svg text.al-n { font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 19px; font-weight: 600; fill: var(--ink); }
.pz-svg text.al-n.ok { fill: var(--green); } .pz-svg text.al-n.over { fill: var(--red); }
.pz-svg text.al-arrow { font-family: 'Nunito', system-ui, sans-serif; font-size: 17px; font-weight: 900; fill: var(--accent); }
.al-sh { fill: #2f2a4a; }
.al-sh.bad { fill: var(--red); }
.al-line { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.al-line.bad { stroke: var(--red); }
@media (prefers-color-scheme: dark) { .al-sh { fill: #d9d2ff; } }
@media print { .al-sh { fill: #000 !important; } .al-line { stroke: #000 !important; } .al-clue { fill: #eee !important; } .pz-svg text.al-arrow, .pz-svg text.al-n { fill: #000 !important; } }

/* ═════ Sliding Tiles ═════ */
.tl-tray { fill: color-mix(in srgb, var(--accent) 16%, #2a2440); }
.tl-slot { fill: rgba(0,0,0,.22); }
.tl-tile { fill: #fdfbff; stroke: color-mix(in srgb, var(--accent) 30%, #d9d2ff); stroke-width: 1.5; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.tl-tile.pic { fill: none; stroke: rgba(255,255,255,.55); filter: none; }
.tl-tile.home { stroke: var(--green); stroke-width: 2.5; }
.tl-tile.pic.home { stroke: #7ee2a8; }
.tl-tile.can { stroke: var(--accent); stroke-width: 3; }
.tl-tile.moved { stroke: #f5a524; stroke-width: 3.5; }
.pz-svg text.tl-num { font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 28px; font-weight: 600; fill: #3b2f63; }
.pz-svg text.tl-num.home { fill: #1f8a55; }
.tl-badge { fill: rgba(20,15,40,.72); }
.pz-svg text.tl-bnum { font-family: 'Nunito', system-ui, sans-serif; font-size: 11px; font-weight: 900; fill: #fff; }
.tl-dirbg { fill: #f5a524; }
.pz-svg text.tl-dir { font-family: 'Nunito', system-ui, sans-serif; font-size: 12px; font-weight: 900; fill: #fff; }
#board svg .tl-tile, #board svg .tl-picsvg { cursor: pointer; }
@media print { .tl-tray { fill: #ddd !important; } .tl-tile { fill: #fff !important; stroke: #000 !important; filter: none !important; } .pz-svg text.tl-num { fill: #000 !important; } }