/* The games' shared rules (from digitizer.fun's games/lib/games.css, Nov 2026; the parts the
 * chess pages use): the option bar, the writing surface (overlay canvas + bubble), the boxes,
 * the readout. Loaded AFTER lib/theme.css (the games' tokens on rnbqkbnr's palette). */
.bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px }
.bar select, .bar input[type=text] { font: inherit; font-size: .9rem; padding: 6px 10px; border: 1px solid var(--edge); border-radius: var(--radius-sm); background: var(--panel); color: var(--fg); max-width: 100% }
.bar .opt { color: var(--dim); font-size: .86rem; display: inline-flex; align-items: center; gap: 5px; cursor: pointer }
.btn.sm { padding: 5px 12px; font-size: .84rem }
.tally { color: var(--dim); font-size: .86rem; margin-left: auto; font-variant-numeric: tabular-nums }
.modes { display: inline-flex; border: 1px solid var(--edge); border-radius: 999px; overflow: hidden }
.modes button { font: inherit; font-size: .84rem; font-weight: 600; padding: 4px 11px; border: 0; background: var(--panel); color: var(--dim); cursor: pointer }
.modes button + button { border-left: 1px solid var(--edge) }
.modes button.on { background: var(--fg); color: var(--bg) }

/* The writing surface: the overlay canvas takes the ink, the boxes beneath it
 * show what is set. `.done` (solved, or nothing to write) makes it inert. */
.surface { position: relative; user-select: none; -webkit-user-select: none }
.surface > canvas.over { position: absolute; inset: 0; z-index: 2; touch-action: none; cursor: crosshair }
.surface.done > canvas.over { cursor: default; pointer-events: none }
/* The reading above the ink is a button: tap it to confirm the letter. */
.bubble { position: absolute; z-index: 3; cursor: pointer; transform: translate(-50%, -100%); white-space: nowrap; user-select: none;
          background: var(--fg); color: var(--bg); font-weight: 700; font-size: 1.05rem; line-height: 1; padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow-lift) }
.bubble:hover { background: var(--accent); color: var(--accent-ink) }
.bubble .ok { font-weight: 400; font-size: .85rem; margin-left: 6px; opacity: .8 }
.bubble[hidden] { display: none }

/* A box: where one letter is written. Pages set --boxw/--boxh. */
.box { width: var(--boxw); height: var(--boxh); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
       border: 1.5px solid var(--edge); background: var(--panel); transition: background .15s, border-color .15s }
.box > * { flex: none }   /* the box is the box: its contents never size it */
.box svg.ink { width: calc(var(--boxw) * .74); height: calc(var(--boxw) * .74); color: var(--blue) }
.box .p { font-size: calc(var(--boxw) * .54); font-weight: 700; line-height: 1; color: var(--blue) }
.box .p.given { color: var(--fg) }                 /* printed by the puzzle, not the player */
.box .p.dim { color: var(--dim); opacity: .55 }     /* a placeholder: what is there until you write over it */
.box .p.hint { font-style: italic }                 /* revealed, not written */
.box.sel { background: var(--accent-soft); border-color: var(--accent); z-index: 1 }
.box.hl { background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel)) }
.box.bad { border-color: var(--red) }
.box.bad svg.ink, .box.bad .p { color: var(--red) }
.box.black { background: var(--fg); border-color: var(--fg) }
.box .num { position: absolute; top: 1px; left: 3px; font-size: max(9px, calc(var(--boxw) * .24)); line-height: 1; color: var(--dim); font-weight: 600 }
.surface.solved .box { border-color: transparent }
.surface.solved .box svg.ink, .surface.solved .box .p { color: var(--ok) }

.readout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 34px; margin-top: 10px }
.readout .hint { color: var(--dim); font-size: .9rem }
.readout .status { font-size: .92rem; font-weight: 600 }
.readout .status.ok { color: var(--ok) }
.readout .status.bad { color: var(--red) }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.chips .lbl { color: var(--dim); font-size: .82rem }
.chips button { font: inherit; font-size: .88rem; font-weight: 600; padding: 3px 11px; border: 1px solid var(--edge); border-radius: 999px;
                background: var(--panel); color: var(--fg); cursor: pointer }
.chips button:hover { border-color: var(--accent); color: var(--accent) }
.chips button b { font-weight: 400; color: var(--dim); font-size: .8rem; margin-left: 4px }
.hidden { display: none !important }