/* Joy pass: clearer play states and room for small celebrations (see joy.js). */

/* The square you are typing in stands out on the dark board and on solved words. */
.cross-cell.selected,.cross-cell.solved.selected { background:#f2b93b; box-shadow:inset 0 0 0 2px #6b4708,0 0 0 2px #fff2c2; z-index:1; }
.cross-cell.selected input,.cross-cell.selected small,.cross-cell.solved.selected input { color:#1e1606; }
.cross-cell.selected.wrong input { color:#8b1414; }
/* Only the rows and columns a crossword uses are drawn. */
.cross-grid[style*="--cross-cols"] { grid-template-columns:repeat(var(--cross-cols),minmax(0,1fr)); aspect-ratio:var(--cross-cols)/var(--cross-rows); }
/* With the puzzle keyboard, the board fits the space above it when it can,
   and squares never get smaller than the earlier full-width board's. */
body[data-view=cross].cross-touch-keyboard .cross-board-viewport { container-type:size; }
body[data-view=cross].cross-touch-keyboard .cross-board-viewport .cross-grid[style*="--cross-cols"] { width:max(min(calc(var(--cross-cols)*24px),100cqw),min(100cqw,calc(100cqh*var(--cross-cols)/var(--cross-rows)))); min-width:min(318px,calc(var(--cross-cols)*24px)); max-width:none!important; margin:0 auto; }

/* Found words keep a soft color each, with dark letters that stay easy to read. */
.search-cell.found:not(.selecting)[data-tone] { color:#1d3524; }
.search-cell.found:not(.selecting)[data-tone="0"] { background:#cfe4bd; }
.search-cell.found:not(.selecting)[data-tone="1"] { background:#c8dced; }
.search-cell.found:not(.selecting)[data-tone="2"] { background:#f4d9b5; }
.search-cell.found:not(.selecting)[data-tone="3"] { background:#e0d1ef; }
.search-cell.found:not(.selecting)[data-tone="4"] { background:#f1e39d; }
/* Words still to find lead the list; found ones step back, lightly crossed out. */
body[data-view=search] .word-list li.found { order:1; background:#e6eedb; color:#557050; border-color:#c3d3b3; }

/* A right scramble answer rests in green before the next word arrives. */
.scramble-wrap.joy-landed #answer { background:#dcefd0; border-color:#4f8a5b; color:#1d4a2a; }
.scramble-wrap.joy-landed .scramble-letters button { opacity:.55; }

/* Common ground: found groups fill the top rows of a board that keeps its size. */
.group-field { display:grid; gap:8px; align-content:start; margin:12px 0 20px; min-height:304px; }
.group-field>#solved-groups { display:grid; gap:inherit; }
.group-field>#solved-groups:empty { display:none; }
body .group-field>.group-tiles { margin:0; min-height:0; }
.group-field .solved-group { margin:0; min-height:70px; padding:8px 10px; display:grid; align-content:center; gap:3px; border-color:#00000014; }
.group-field .solved-group strong { font-size:16px; }
.solved-group.group-0 { background:#efe0a0; }
.solved-group.group-1 { background:#cfe3bd; }
.solved-group.group-2 { background:#c9dcec; }
.solved-group.group-3 { background:#e0d1ec; }
/* Wider screens keep room for the message line too (phones already do), so the
   tiles never jump under a finger after a guess. */
@media (min-width:760px) {
 body[data-view=groups].in-puzzle-journey:not(.puzzle-finished) .status { display:block; min-height:50px; }
 body[data-view=groups].in-puzzle-journey:not(.puzzle-finished) .status:empty { visibility:hidden; }
}
@media (max-width:759px) {
 body[data-view=groups] .group-field { gap:5px; margin:7px 0 10px; min-height:243px; }
 body[data-view=groups] .group-field>.group-tiles { margin:0; min-height:0; }
 body[data-view=groups] .group-field .solved-group { min-height:57px; padding:5px 8px; gap:1px; }
 body[data-view=groups] .group-field .solved-group span { font-size:13px; }
}

/* A fresh finish holds the solved board for a moment before the results. */
body.joy-finishing .game-play>.journey-complete { display:none; }
body.joy-finishing .game-play { pointer-events:none; }

/* Easy and Medium Sudoku: a number that shows twice in a row, column or box
   sits on a soft rose square until one of them changes (app.js sudokuRepeats). */
.sudoku-cell.repeat:not(.selected) { background:#f5ddd6; }
.sudoku-cell.repeat { box-shadow:inset 0 0 0 2px #c98a7e; }
.sudoku-cell.repeat.selected { box-shadow:inset 0 0 0 3px #57400f,inset 0 0 0 5px #c98a7e; }

/* The maze exit is the green square the instructions mention. */
.maze-cell.exit:before { background:#bfe0b0; border-color:#2c6a3c; }