/* Halloween Sudoku only (Sudoku's own ../sudoku/sudoku.css and ../shared/game.css load first). */
:root{--luna:#ffe9a0}
/* Luna says the hints on the board, so the top-bar copy is kept for screen readers only. */
.hud .tip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spotlight .title{font-size:38px}
.progress-fill{background:linear-gradient(90deg,#ff9a2a,#ff6fb5,#9a6bff)}
/* Picture keys on the 4×4 and 6×6 grids: the picture, with its key number small in the corner. */
.key{border-color:#3a2c58;background:#1a1328}
.key.pic{position:relative;display:grid;place-items:center;padding:7px 0}
.key.pic canvas{width:34px;height:34px;pointer-events:none}
.key.pic small{position:absolute;top:3px;right:6px;font:700 10px "Plus Jakarta Sans",system-ui,sans-serif;color:var(--muted)}
.key:focus-visible{outline-color:var(--luna)}
canvas#world:focus-visible{outline-color:var(--luna)}
/* The Halloween place names are longer: a smaller progress label on phones keeps it on one line. */
@media (max-width:420px){.progress-label{font-size:9px;letter-spacing:.04em}}