.play-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.play-head h1 { margin: 0 0 6px; }
.meta { display: flex; gap: 10px; align-items: center; }
.timer { display: inline-flex; align-items: center; gap: 7px; font: 700 1.15rem var(--font-round); font-variant-numeric: tabular-nums; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
.timer svg { width: 18px; height: 18px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.tools, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tool-ico { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.tool-ico.fill { background: currentColor; }
.tool-ico.cross { font-weight: 800; font-size: 17px; line-height: 13px; text-align: center; }
.palette { display: flex; gap: 6px; }
.palette button {
  width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--line); cursor: pointer; padding: 0;
  font: 700 .78rem var(--font); position: relative;
}
.palette button { box-shadow: inset 0 0 0 1px rgba(127,127,127,.35); }
.palette button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }

.board-wrap { overflow: auto; padding: 4px 4px 16px; display: flex; }
.board {
  --cell: 26px; --clue-font: 14px;
  display: grid; margin: 0 auto; user-select: none; -webkit-user-select: none; touch-action: none;
  outline: none; font-variant-numeric: tabular-nums;
}
.board .corner { display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 8px 8px 0; }
.board .corner canvas { image-rendering: pixelated; border-radius: 4px; border: 1px solid var(--line); max-width: 100%; max-height: 100%; }

.clue { display: flex; color: var(--ink); font: 700 var(--clue-font)/1 var(--font-round); transition: color .15s; }
.clue.col { flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 6px; gap: 3px; }
.clue.row { justify-content: flex-end; align-items: center; padding-right: 8px; gap: calc(var(--cell) * .3); }
.clue span { min-width: calc(var(--cell) * .7); text-align: center; }
.clue span.chip { border-radius: 5px; padding: 2px 0; min-width: calc(var(--cell) * .82); }
.clue span.chip { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
:root[data-theme="dark"] .clue span.chip { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clue span.chip { box-shadow: 0 0 0 1px rgba(255,255,255,.22); } }
.board.colour { --cell-bg: #f6efe2; --cell-hover: #ebe1cf; --cell-hl: #e9dfcc; --line: #d6cab5; --line-strong: #8c8172; --ink-faint: #8f8475; }
.clue.done { color: var(--clue-done); }
.clue.done span.chip { opacity: .35; }
.clue.hl { background: var(--cell-hl); border-radius: 6px; }
.clue.row.hl { border-radius: 6px 0 0 6px; }
.clue.col.hl { border-radius: 6px 6px 0 0; }
.clue.empty-line span { color: var(--ink-faint); }

.cell {
  width: var(--cell); height: var(--cell); background: var(--cell-bg);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: relative; cursor: pointer;
}
.cell.top { border-top: 2px solid var(--line-strong); }
.cell.left { border-left: 2px solid var(--line-strong); }
.cell.right { border-right: 2px solid var(--line-strong); }
.cell.bottom { border-bottom: 2px solid var(--line-strong); }
.guides .cell.g5r { border-right: 2px solid var(--line-strong); }
.guides .cell.g5b { border-bottom: 2px solid var(--line-strong); }
.cell.hl { background: var(--cell-hl); }
.cell:hover { background: var(--cell-hover); }
.cell.f { background: var(--fill, var(--cell-fill)); }
.cell.f::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.cell.x::before {
  content: ""; position: absolute; inset: 28%;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--ink-faint) calc(50% - 1px), var(--ink-faint) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--ink-faint) calc(50% - 1px), var(--ink-faint) calc(50% + 1px), transparent calc(50% + 1px));
}
.cell.cursor { box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }
.cell.err { box-shadow: inset 0 0 0 2px var(--accent); }
.cell.err.x::before { background:
    linear-gradient(45deg, transparent calc(50% - 1.5px), var(--accent) calc(50% - 1.5px), var(--accent) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(-45deg, transparent calc(50% - 1.5px), var(--accent) calc(50% - 1.5px), var(--accent) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.cell.flash { animation: flash .9s ease-in-out 2; }
@keyframes flash { 50% { box-shadow: inset 0 0 0 3px var(--accent); } }
.cell.hinted::after { content: ""; position: absolute; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }

.board.solved .cell { cursor: default; border-color: transparent !important; transition: border-color .6s, background .6s; }
.board.solved .cell.x::before { opacity: 0; }
.board.solved .cell:not(.f) { background: var(--cell-bg); }
.board.solved .clue { color: var(--clue-done); }

.help { max-width: 640px; margin: 8px auto 0; text-align: center; }
.touch-only { display: none; }
@media (hover: none) { .touch-only { display: inline; } .desktop-only { display: none; } }
.next-row { text-align: center; margin-top: 14px; }

.win-seal img { width: 54px; height: 54px; margin-top: -4px; animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stamp { from { transform: scale(1.8) rotate(-12deg); opacity: 0; } }
.reveal { display: flex; gap: 12px; justify-content: center; align-items: center; margin: 6px 0 20px; flex-wrap: wrap; }
.reveal canvas, .reveal img { max-width: 180px; max-height: 180px; border-radius: 8px; border: 1px solid var(--line); image-rendering: pixelated; }
.reveal img { image-rendering: auto; object-fit: cover; }
.win-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.empty-state { text-align: center; padding: 60px 20px; }

@media (max-width: 640px) {
  .play-head h1 { font-size: 1.35rem; }
  .actions .lbl { display: none; }
  .actions .btn { padding: 8px 10px; }
}