/* Board cells fit their matrix. All external input controls have >=44px targets. */
.game { --game-color: var(--indigo); --game-soft: var(--indigo-soft); }
.game[data-game="crossword"] { --game-color: var(--madder); --game-soft: var(--madder-soft); }
.game[data-game="nonogram"] { --game-color: var(--leaf); --game-soft: var(--leaf-soft); }
.game__head { margin-bottom: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.game .level-tab[aria-current="page"] { color: var(--game-color); }
.game__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.game__stage, .game__side { min-width: 0; }
.game__stage { width: 100%; max-width: var(--ng-max); margin-inline: auto; }
.game__side { display: grid; gap: var(--space-5); }
.game__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.status-item { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.status-item__label { color: var(--muted); font-size: var(--text-xs); }
.status-item__value { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.timer { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.daily-flag { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: var(--text-sm); color: var(--game-color); font-weight: 700; }
.board-wrap { position: relative; width: 100%; max-width: var(--board-max); margin-inline: auto; }
.board-wrap.is-paused > :is(.sudoku, .xw, .ng) { visibility: hidden; }
.board-wrap.is-paused { background: var(--surface-sunken); border-radius: var(--radius-sm); }
.pause-veil { display: none; position: absolute; inset: 0; padding: 1rem; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-sm); text-align: center; }
.board-wrap.is-paused > .pause-veil { display: flex; }
.sudoku { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr)); aspect-ratio: 1; width: 100%; border: 2px solid var(--ink); background: var(--surface); }
.cell, .xw-cell, .ng-cell { position: relative; min-width: 0; min-height: 0; margin: 0; padding: 0; display: grid; place-items: center; background: var(--surface); color: var(--indigo); border: 0; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); border-radius: 0; line-height: 1; user-select: none; -webkit-user-select: none; }
.cell:nth-child(9n) { border-right: 0; } .cell:nth-last-child(-n+9) { border-bottom: 0; }
.cell.edge-r, .ng-cell.edge-r { border-right: 3px solid var(--ink); }
.cell.edge-b, .ng-cell.edge-b { border-bottom: 3px solid var(--ink); }
.cell__value { font-size: var(--board-number); font-weight: 500; font-variant-numeric: tabular-nums; }
.cell.is-given { color: var(--ink); } .cell.is-given .cell__value { font-weight: 700; }
.cell.is-related { background: var(--related); }
.cell.is-same { background: var(--same); }
.cell.is-selected { background: var(--selected); box-shadow: inset 0 0 0 3px var(--indigo); z-index: 1; }
.cell.is-conflict, .cell.is-error { color: var(--error); background: var(--error-soft); }
.cell.is-conflict .cell__value { text-decoration: underline wavy; text-underline-offset: .15em; }
.cell.is-error::after, .xw-cell.is-error::after { content: "!"; position: absolute; right: 2px; bottom: 1px; font-size: .625rem; font-weight: 700; line-height: 1; color: var(--error); }
.cell.is-hint { color: var(--leaf); background: var(--leaf-soft); }
.cell.is-hint .cell__value { text-decoration: underline dotted; text-underline-offset: .15em; }
.cell:focus-visible, .xw-cell:focus-visible, .ng-cell:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 2; }
.cell__notes { position: absolute; inset: 1px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.cell__notes i { display: grid; place-items: center; font-style: normal; font-size: var(--board-note); font-weight: 500; color: var(--muted); line-height: 1; }
.cell__notes .is-mark { font-weight: 700; color: var(--indigo); background: var(--selected); border-radius: 2px; }
.cell.is-pop .cell__value { animation: cell-pop 180ms var(--ease); }
.cell.is-flash { animation: cell-flash 450ms var(--ease); }
.numpad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.numpad__key { position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 4rem; border: 1px solid var(--line-strong); border-bottom-width: 3px; border-radius: var(--radius); background: var(--surface); color: var(--indigo); }
.numpad__key:hover { background: var(--indigo-soft); }
.numpad__num { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.numpad__count { color: var(--muted); font-size: var(--text-xs); }
.numpad__key.is-complete { color: var(--muted); background: var(--surface-sunken); border-style: dashed; }
.numpad__key.is-complete .numpad__num { text-decoration: line-through; }
.xw { display: grid; grid-template-columns: repeat(var(--cols, 9), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 9), minmax(0, 1fr)); aspect-ratio: var(--cols, 9) / var(--rows, 9); width: 100%; border: 2px solid var(--ink); background: var(--ink); }
.xw-cell { color: var(--madder); }
.xw-cell.is-block { background: var(--block); border-color: var(--block); cursor: default; }
.xw-cell__num, .xw-cell__key { position: absolute; font-size: clamp(.5rem, 1.7vw, .75rem); font-weight: 700; line-height: 1; z-index: 1; }
.xw-cell__num { top: 3px; left: 3px; color: var(--ink); }
.xw-cell__key { bottom: 3px; right: 3px; color: var(--madder); }
.xw-cell__char { font-size: var(--board-kana); line-height: 1; font-weight: 700; padding-top: .25rem; }
.xw-cell.is-word { background: var(--madder-soft); }
.xw-cell.is-selected { background: var(--madder-soft); box-shadow: inset 0 0 0 3px var(--madder); z-index: 1; }
.xw-cell.is-key::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--madder); pointer-events: none; }
.xw-cell.is-error { color: var(--error); background: var(--error-soft); }
.xw-cell.is-revealed .xw-cell__char { color: var(--leaf); text-decoration: underline dotted; text-underline-offset: .15em; }
.clue-bar { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; padding: .85rem 1rem; margin-bottom: 1rem; border-left: 3px solid var(--madder); background: var(--madder-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.clue-bar__dir { color: var(--madder); font-size: var(--text-sm); font-weight: 700; }
.clue-bar__num { font-weight: 700; } .clue-bar__text { flex: 1 1 10rem; }
.xw-clues { display: grid; gap: 1.5rem; }
.xw-clues__group h3 { font-size: var(--text-base); padding-bottom: .5rem; border-bottom: 2px solid var(--line); }
.xw-clues__group ol { list-style: none; padding: 0; margin-top: .5rem; }
.clue { display: flex; align-items: baseline; gap: .65rem; min-height: var(--tap); padding: .65rem .7rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.clue__num { color: var(--madder); font-weight: 700; min-width: 1.3em; }
.clue.is-active { border-color: var(--madder); background: var(--madder-soft); }
.clue.is-done .clue__text { text-decoration: line-through; color: var(--muted); }
.clue button { background: transparent; border: 0; text-align: left; color: inherit; display: flex; gap: .65rem; width: 100%; min-height: 44px; padding: 0; }
.kana-pad { padding: .75rem; border: 1px solid var(--line); background: var(--surface-sunken); border-radius: var(--radius); }
.kana-pad__rows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.kana-key { min-width: 44px; min-height: var(--tap); padding: .4rem .1rem; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: var(--text-lg); font-weight: 700; }
.kana-key:hover { background: var(--madder-soft); }
.kana-key--wide { grid-column: span 2; }
.kana-key--func { background: var(--madder-soft); color: var(--madder); font-size: var(--text-sm); }
.ng { display: grid; grid-template-columns: minmax(3.8rem, .24fr) minmax(0, 1fr); grid-template-rows: auto 1fr; width: 100%; color: var(--ink); background: var(--surface); }
.ng__corner { grid-column: 1; grid-row: 1; background: var(--surface-sunken); display: grid; align-items: end; justify-items: center; padding: .5rem; color: var(--muted); font-size: .6875rem; }
.ng__colclues { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); padding-inline: 2px; background: var(--surface-sunken); min-height: 4.5rem; }
.ng__rowclues { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(var(--rows, 10), minmax(0, 1fr)); padding-block: 2px; background: var(--surface-sunken); }
.ng-clue { font-variant-numeric: tabular-nums; font-size: clamp(.625rem, 2vw, .9375rem); font-weight: 700; line-height: 1.2; }
.ng-clue--col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .25rem; padding-block: .5rem; border-right: 1px solid var(--line); }
.ng-clue--row { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; padding-inline: .4rem; border-bottom: 1px solid var(--line); }
.ng-clue.is-done { color: var(--muted); text-decoration: line-through; }
.ng-clue.is-active { background: var(--leaf-soft); color: var(--leaf); box-shadow: inset 0 0 0 1px var(--leaf); }
.ng__grid { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 10), minmax(0, 1fr)); aspect-ratio: var(--cols, 10) / var(--rows, 10); border: 2px solid var(--ink); }
.ng-cell { color: var(--ink); }
.ng-cell.is-filled { background: var(--ng-fill); color: var(--on-ng-fill); }
.ng-cell.is-crossed::after { content: "×"; font: 400 clamp(.85rem, 3vw, 1.5rem)/1 var(--font-ui); color: currentColor; }
.ng-cell.is-error { background: var(--error-soft); color: var(--error); box-shadow: inset 0 0 0 2px var(--error); }
.ng-cell.is-error::after { content: "!"; font-weight: 700; font-size: .875rem; }
.ng-cell.is-hint { box-shadow: inset 0 0 0 3px var(--leaf); }
.ng-cell.is-hint::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: var(--leaf); position: absolute; }
.ng-cell.is-hint.is-filled::before { background: var(--on-ng-fill); }
.ng-cell.is-cursor { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 1; }
.game[data-game="nonogram"] .board-wrap { max-width: var(--ng-max); }
.mode-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .3rem; gap: .3rem; background: var(--surface-sunken); }
.mode-toggle__btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); border: 2px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; font-weight: 700; }
.mode-toggle__btn[aria-pressed="true"] { color: var(--leaf); background: var(--surface); border-color: var(--leaf); }
.pixel-art { image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; height: auto; }
@keyframes cell-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cell-flash { 0%, 100% { box-shadow: inset 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 0 3px var(--gold); } }
@media (min-width: 56rem) { .kana-pad.is-collapsed { display: none; } }
@media (max-width: 55.999rem) {
  .game__body { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .game__side { width: 100%; max-width: var(--ng-max); margin-inline: auto; }
  .game__stage { max-width: var(--ng-max); }
  .numpad { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
  .numpad__key { min-height: 3.25rem; gap: .25rem; }
  .numpad__num { font-size: 1.5rem; }
}
@media (max-width: 36rem) {
  .page--game { padding-top: 1rem; }
  .game__head { gap: .5rem; margin-bottom: .75rem; }
  .game__head .level-tabs { gap: 0; }
  .game[data-game="nanpure"] .level-tabs { width: 100%; flex-wrap: nowrap; }
  .game .level-tab { padding-inline: .375rem; font-size: var(--text-xs); }
  .game[data-game="nanpure"] .level-tab { flex: 1 1 auto; white-space: nowrap; }
  .game__status { gap: .25rem .5rem; margin-bottom: .625rem; }
  .game__status .status-item { display: grid; gap: .125rem; line-height: 1.3; }
  .game__status .status-item__label { font-size: .6875rem; }
  .game__status .status-item__value { font-size: 1rem; white-space: nowrap; }
  .game__status .timer { grid-template-columns: auto auto; column-gap: .4rem; }
  .timer__pause { grid-column: 2; grid-row: 1 / 3; padding: .5rem; }
  .daily-flag { margin-bottom: .5rem; }
  .game__side { gap: .75rem; }
  .game .tool { min-height: 3.75rem; padding-block: .4rem; }
  .game .tool__label { font-size: .6875rem; }
  .numpad__key { min-height: 3rem; }
  .clue-bar { gap: .25rem .5rem; padding: .5rem .625rem; margin-bottom: .625rem; font-size: var(--text-sm); line-height: 1.6; }
  .clue-bar__text { flex-basis: 8rem; }
}
@media (max-width: 25rem) {
  .game__status { gap: .5rem; } .status-item { gap: .3rem; } .status-item__value { font-size: 1rem; }
  .cell__notes { inset: 0; } .ng-clue--row { gap: .2rem; padding-inline: .25rem; }
}
@media (forced-colors: active) {
  .cell.is-selected, .xw-cell.is-selected, .ng-cell.is-cursor { outline: 3px solid Highlight; outline-offset: -3px; }
  .ng-cell.is-filled, .xw-cell.is-block { background: CanvasText; forced-color-adjust: none; }
}