/* The «square grid» games (EP-055.T-07…T-10): «Кладка», «Чертёж», «Развеивание», «Руническая печать» – the screens of
   scenes/games/<game>/<game>.js over scenes/games/grid/frame.js. Proposal for the owner's choice: not shipped.
   The panel, the head, the foot and the night sky (stage.js mountSky) are those of styles/games.css; this sheet is
   what the grid screens add, under .game-grid, and resets the rules of games.css that fit the pile of tiles
   (.game-mid, .game-board).
   Sizes: the board's art is a square (a 6 × 7 board for dispel) as large as its column allows – container units of
   .game-body; the side (the hand of pieces, the runes) under it on a phone and, for the hand, beside it on a wide
   screen. Durations and curves are MOTION vars only; base.css stops them under reduced motion. */

.game-grid .game-count { display: flex; flex-wrap: wrap; gap: 2px 14px; }
/* the lines keep their contrast where the island's cloud band rises behind them (phones) */
.game-grid:not(.game-dispel) .game-foot { background: linear-gradient(rgba(15, 22, 51, 0), rgba(15, 22, 51, .88) 45%); }
.game-grid .grid-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the end of the game: a plaque over the lower edge of the board */
.game-grid .grid-result { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; z-index: 3; margin: 0; padding: 6px 16px; border-radius: 999px;
  max-width: 92%; text-align: center; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--brass-ink);
  background: var(--brass-hi); box-shadow: 0 0 0 2px var(--brass-lo), 0 6px 18px rgba(4, 4, 14, .55); pointer-events: none; }
.game-grid .grid-result[hidden] { display: none; }

/* the body: the board's column and the side; its size is the container the board is fitted to */
.game-grid .game-body { --gap: 10px; --side-h: 0px; flex: 1 1 auto; min-height: 0; container-type: size; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: var(--gap); padding: 0 8px; }
.game-grid .game-mid { display: block; flex: none; position: relative; min-height: 0; margin: 0; padding: 0; overflow: visible;
  width: min(100cqw, 100cqh - var(--side-h) - var(--gap)); aspect-ratio: 1; }
.game-grid .grid-art { position: relative; width: 100%; height: 100%; container-type: inline-size; }
.game-grid .grid-paper { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.game-grid .game-board { position: absolute; flex: none; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n, 8), minmax(0, 1fr)); touch-action: none; }
.game-grid .grid-fx { position: absolute; pointer-events: none; }
.game-grid .grid-fx .fx { position: absolute; transition: opacity var(--t-fade) var(--ease-fade); }
.game-grid .grid-fx .fx img { display: block; width: 100%; height: 100%; }
.game-grid .grid-fx .fx.gone { opacity: 0; }

.game-grid .cell { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; }
.game-grid .cell img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.game-grid .cell img[hidden] { display: none; }
.game-grid .cell:disabled { cursor: default; }
.game-grid:not(.game-seal) .cell:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: -3px; z-index: 2; box-shadow: 0 0 0 2px var(--brass-ink); }
.game-grid .grid-side[hidden] { display: none; }

/* ---------- «Кладка»: the wall bed and the hand ---------- */
.game-masonry .game-body { --side-h: 22cqh; --hc: min(22cqh / 5, (100cqw - 40px) / 15); }
.game-masonry .cell { box-shadow: inset 0 0 0 .5px rgba(110, 80, 40, .22); }
.game-masonry .cell.ghost-ok img { opacity: .45; }
.game-masonry .cell.ghost-ok { background: rgba(247, 180, 79, .18); }
.game-masonry .cell.ghost-ok::after, .game-masonry .cell.ghost-bad::after { content: ""; position: absolute; inset: 2px; border: 2px dashed var(--glow); pointer-events: none; }
.game-masonry .cell.ghost-bad { background: rgba(179, 38, 30, .28); }
.game-masonry .cell.ghost-bad::after { border-color: rgba(179, 38, 30, .95); background: rgba(179, 38, 30, .3); }
.game-masonry .cell.will-clear img { filter: brightness(1.18) saturate(1.1); }
.game-masonry .cell.will-clear { box-shadow: inset 0 0 0 2px var(--glow), 0 0 10px rgba(247, 180, 79, .55); z-index: 1; }
.game-masonry .grid-side { display: flex; flex: none; align-items: center; justify-content: center; gap: 12px; height: var(--side-h); }
.game-masonry .piece { display: grid; place-items: center; width: calc(var(--hc) * 4.8); height: calc(var(--hc) * 4.8); padding: 0;
  border: 0; border-radius: 12px; background: rgba(15, 22, 51, .5); box-shadow: inset 0 0 0 1px var(--glass-line); touch-action: none;
  transition: box-shadow var(--t-hover) var(--ease-hover), opacity var(--t-hover) var(--ease-hover); }
.game-masonry .piece[hidden] { display: none; }
.game-masonry .piece:disabled { cursor: default; }
.game-masonry .piece.picked { box-shadow: inset 0 0 0 3px var(--glow), 0 0 16px rgba(247, 180, 79, .45); background: rgba(15, 22, 51, .7); }
.game-masonry .piece.stuck { opacity: .45; }
.game-masonry .piece:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.game-masonry .piece-shape { display: grid; grid-template-columns: repeat(var(--pw), var(--hc)); grid-template-rows: repeat(var(--ph), var(--hc)); pointer-events: none; }
.game-masonry .piece-shape img { width: 100%; height: 100%; display: block; }
.game-masonry .grid-fx .fx.into-wall img { filter: brightness(1.25); }
@media (min-aspect-ratio: 5/4) {
  .game-masonry .game-body { --side-w: min(260px, 26cqw); --hc: min(var(--side-w) / 5, 100cqh / 15.5); flex-direction: row; }
  .game-masonry .game-mid { width: min(100cqh, 100cqw - var(--side-w) - var(--gap)); }
  .game-masonry .grid-side { flex-direction: column; width: var(--side-w); height: auto; }
}

/* ---------- «Чертёж»: the paper, the clues, the marks, the drawing ---------- */
/* never a cell under 24 px (10 cells on 80% of the field, 654.55 / 720 of the paper): the paper's outer edge is
   cropped by the column on a 320-px screen instead */
.game-blueprint .game-mid { width: max(min(100cqw, 100cqh), 330px); }
.game-blueprint .game-body { overflow: hidden; padding: 0; }
.game-blueprint .bp-hint { margin: 0 14px 2px; font-size: 13px; color: var(--field); opacity: .85; text-shadow: 0 1px 3px rgba(8, 10, 24, .9); }
.game-blueprint .bp-hint[hidden] { display: none; }
.game-blueprint .game-board { box-shadow: 0 0 0 1.5px rgba(70, 48, 28, .75); transition: opacity var(--t-restore) var(--ease-restore); }
.game-blueprint .cell { box-shadow: inset 0 0 0 .5px rgba(70, 48, 28, .4); }
.game-blueprint .cell.c5 { box-shadow: inset 1.5px 0 0 rgba(70, 48, 28, .75), inset 0 0 0 .5px rgba(70, 48, 28, .4); }
.game-blueprint .cell.r5 { box-shadow: inset 0 1.5px 0 rgba(70, 48, 28, .75), inset 0 0 0 .5px rgba(70, 48, 28, .4); }
.game-blueprint .cell.c5.r5 { box-shadow: inset 1.5px 1.5px 0 rgba(70, 48, 28, .75), inset 0 0 0 .5px rgba(70, 48, 28, .4); }
.game-blueprint .cell .ink { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }
.game-blueprint .cell:not([data-m="1"]) .ink, .game-blueprint .cell:not([data-m="2"]) .bp-x { display: none; }
.game-blueprint .cell .bp-x { position: absolute; inset: 22%; width: 56%; height: 56%; color: var(--ink-2); pointer-events: none; }
.game-blueprint .bp-clues { position: absolute; display: flex; color: var(--ink); font-family: var(--font-ui); font-weight: 800;
  font-size: clamp(10px, 3.1cqw, 22px); line-height: 1.05; font-variant-numeric: tabular-nums; transition: opacity var(--t-restore) var(--ease-restore); }
.game-blueprint .bp-cols { flex-direction: row; }
.game-blueprint .bp-cols span { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: .35em; }
.game-blueprint .bp-rows { flex-direction: column; }
.game-blueprint .bp-rows span { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: .28em; padding-right: .4em; }
.game-blueprint .bp-clues span.done { color: var(--ink-2); opacity: .4; }
.game-blueprint .bp-clues b { font-weight: inherit; }
.game-blueprint .bp-picture { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none;
  transition: opacity var(--t-restore) var(--ease-restore); }
.game-blueprint .bp-picture:not([src]) { display: none; }
.game-blueprint.solved .bp-picture { opacity: 1; }
.game-blueprint.solved .game-board, .game-blueprint.solved .bp-clues { opacity: 0; }

/* ---------- «Развеивание»: the night backdrop, the stones, the fog ---------- */
.game-grid { background: var(--sky-top) center bottom / cover no-repeat;
  background-image: image-set(url('../assets/games/dispel/backdrop-768.webp') 1x, url('../assets/games/dispel/backdrop.webp') 2x); }
.game-dispel .game-mid { width: min(100cqw, 100cqh * var(--cols, 6) / var(--rows, 7), var(--cols, 6) * 84px); aspect-ratio: var(--cols, 6) / var(--rows, 7); }
.game-dispel .grid-art { border-radius: 16px; background: rgba(15, 22, 51, .55); box-shadow: 0 0 0 1px var(--glass-line), 0 10px 30px rgba(4, 4, 14, .55); }
.game-dispel .game-board, .game-dispel .grid-fx { inset: 2%; }
.game-dispel .game-board { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 7), minmax(0, 1fr)); }
.game-dispel .cell { border-radius: 12px; }
.game-dispel .cell .stone { inset: 7%; width: 86%; height: 86%; }
.game-dispel .cell .veil { opacity: .85; }
.game-dispel .cell.fogged { cursor: default; }
.game-dispel .cell .left { position: absolute; right: 4%; bottom: 4%; min-width: 1.5em; padding: 0 .3em; border-radius: 1em;
  font-size: clamp(11px, 2.6cqw, 15px); font-weight: 800; line-height: 1.5em; color: var(--brass-ink); background: var(--brass-hi); box-shadow: 0 1px 3px rgba(4, 4, 14, .6); }
.game-dispel .cell .left[hidden] { display: none; }
.game-dispel .cell.selected { background: rgba(247, 180, 79, .22); box-shadow: inset 0 0 0 3px var(--glow), 0 0 14px rgba(247, 180, 79, .5); z-index: 1; }
.game-dispel .cell.deny { box-shadow: inset 0 0 0 3px rgba(224, 97, 74, .95); background: rgba(179, 38, 30, .22); }
.game-dispel .cell.fresh .stone { animation: grid-in var(--t-fade) var(--ease-fade) both; }
.game-dispel .grid-fx .fx.fog-gone, .game-dispel .grid-fx .fx.veil-gone { transition: opacity var(--t-light) var(--ease-light); }
@keyframes grid-in { from { opacity: 0; } }

/* ---------- «Руническая печать»: the tablet, the runes, the bar ---------- */
.game-seal .game-body { --side-h: min(56px, (100cqw - 36px) / 7 + 8px); }
.game-seal .grid-paper { mix-blend-mode: lighten; }   /* the dark corners of SL01 take the sky behind them */
.game-grid .game-stage > .game-body { z-index: auto; }   /* no own stacking context: the blend above reaches the sky */
/* where the cloud band rises behind the tablet (a big screen) it blends with a soft night pad, not the bright clouds */
.game-seal .game-mid::before { content: ""; position: absolute; inset: 6%; border-radius: 10%; background: var(--sky-top); filter: blur(14px); }
.game-seal .cell { box-shadow: inset 0 0 0 .5px rgba(80, 58, 36, .35); --ek-icon-accent: currentColor; }
.game-seal .cell.bl { box-shadow: inset 2.5px 0 0 rgba(70, 48, 28, .8), inset 0 0 0 .5px rgba(80, 58, 36, .35); }
.game-seal .cell.bt { box-shadow: inset 0 2.5px 0 rgba(70, 48, 28, .8), inset 0 0 0 .5px rgba(80, 58, 36, .35); }
.game-seal .cell.bl.bt { box-shadow: inset 2.5px 2.5px 0 rgba(70, 48, 28, .8), inset 0 0 0 .5px rgba(80, 58, 36, .35); }
.game-seal .cell .veil { inset: 6%; width: 88%; height: 88%; opacity: .55; }
.game-seal .cell .glyph { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.game-seal .cell .glyph .ico { width: 64%; height: 64%; }
.game-seal .cell.given { cursor: default; color: #4a3424; }
.game-seal .cell.given .glyph .ico { filter: drop-shadow(0 1px 0 rgba(255, 250, 235, .7)); }
.game-seal .cell.written { color: #8a4f0c; }
.game-seal .cell.written .glyph .ico { filter: drop-shadow(0 0 4px rgba(247, 180, 79, .9)); }
.game-seal .cell.picked { background: rgba(247, 180, 79, .3); z-index: 1; }
.game-seal .cell:is(.picked,:focus-visible)::before {content:"";position:absolute;inset:4px;border:2px solid var(--glow);pointer-events:none;z-index:2;}
.game-seal .cell:focus-visible {outline:none;}
.game-seal .cell.repeat { color: #b3261e; }
.game-seal .cell.repeat::after { content: ""; position: absolute; inset: 9%; border: 2px dashed #b3261e; border-radius: 50%; pointer-events: none; }
.game-seal .grid-side { display: flex; flex: none; align-items: center; justify-content: center; gap: 6px; height: var(--side-h); }
.game-seal .rune { display: grid; place-items: center; width: calc(var(--side-h) - 8px); height: calc(var(--side-h) - 8px); padding: 0; border: 0;
  border-radius: 10px; color: var(--brass-hi); background: rgba(15, 22, 51, .6); box-shadow: inset 0 0 0 1px var(--glass-line);
  --ek-icon-accent: var(--ek-icon-accent-night); transition: opacity var(--t-hover) var(--ease-hover); }
.game-seal .rune .ico { width: 60%; height: 60%; }
.game-seal .rune.on { box-shadow: inset 0 0 0 3px var(--glow); }
.game-seal .rune:disabled { opacity: .4; cursor: default; }
.game-seal .rune:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.game-seal .rune.wipe { margin-left: 6px; color: var(--field); }

/* EP-058: one confirmed timeline; duration and motion amounts are live MOTION leaves. */
.dispel-combo {position:relative;text-align:center;color:var(--brass);font-family:Philosopher,serif;min-height:1.4em;margin:0;}
.game-dispel .wave-light {box-shadow:0 0 18px #f5e0a6;background:#fff7b82a;}
.game-dispel .wave-swap .stone {animation:dispel-swap var(--t-dispel-swap) var(--ease-game-out) both;}
.game-dispel .wave-clear .stone,.game-dispel .wave-clear .folk {animation:dispel-clear var(--t-dispel-clear) var(--ease-game-out) both;}
.game-dispel .wave-fall .stone {animation:dispel-fall var(--drop-ms,var(--t-dispel-fall)) var(--ease-dispel-fall) both;}
.game-dispel .wave-add .stone {animation:dispel-add var(--t-dispel-add) var(--ease-game-out) both;}
.dispel-particle {position:absolute;inset:35%;border-radius:50%;background:#fff7b8;box-shadow:0 0 10px #f9da70;transform:rotate(var(--particle-angle)) translateY(calc(-1 * var(--kf-game-particle-travel-px)));}
@keyframes dispel-swap {from {transform:translate(var(--swap-x),var(--swap-y));} to {transform:translate(0,0);} }
@keyframes dispel-clear {from {opacity:1;transform:scale(1);} to {opacity:0;transform:scale(0);} }
@keyframes dispel-fall {from {transform:translateY(var(--drop-y));} 88% {transform:translateY(var(--kf-game-bounce-px));} to {transform:translateY(0);} }
@keyframes dispel-add {from {opacity:0;transform:translateY(var(--drop-y));} to {opacity:1;transform:translateY(0);} }
@media(prefers-reduced-motion:reduce) { .game-dispel .cell .stone,.game-dispel .cell .folk {animation:none;} }
/* At 200%/short windows the nonogram keeps readable cells and scrolls inside its body instead of cropping clues. */
.game-blueprint .game-body {overflow-x:hidden;overflow-y:auto;justify-content:safe center;}