/* THE DARKROOM // THE DAILY PICTURE (static/js/games/darkroom.js). THE GRID's stage round a darkroom's safelight:
   clues in amber, filled squares as exposed silver, crosses faint; a solved picture develops (its own colours, then the
   STRAYS sprite fading up over the grid). One transition on develop, no loops. */
.dk-root { --ac: var(--holo, #4fe3ff); --aa: var(--amber, #ffb020); --safe: #ff5a3a; }
.dk-wrap { position: relative; max-width: 100%; overflow: auto; }
.dk-grid { --cell: min(calc((100vw - 120px - var(--n) * 1px) / (var(--n) + 3)), calc(520px / var(--n)), 30px);
  display: grid; grid-template-columns: auto repeat(var(--n), var(--cell)); grid-auto-rows: auto; gap: 1px; padding: 8px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 90, 58, .12), transparent 60%), #060305; border: 2px solid rgba(255, 90, 58, .55);
  box-shadow: 0 0 26px rgba(255, 90, 58, .12); user-select: none; touch-action: none; }
.dk-corner { display: block; }
.dk-cc, .dk-rc { display: flex; font: 700 calc(var(--cell) * .42) var(--mono); color: var(--aa); }
.dk-cc { flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 3px; min-height: calc(var(--cell) * 1.2); }
.dk-rc { justify-content: flex-end; align-items: center; gap: calc(var(--cell) * .28); padding-right: 6px; height: var(--cell); }
.dk-cc i, .dk-rc i { font-style: normal; line-height: 1.15; }
.dk-cc.ok, .dk-rc.ok { color: rgba(160, 210, 235, .35); }
.dk-cc.on, .dk-rc.on { color: #fff; text-shadow: 0 0 6px var(--aa); }
.dk-c { width: var(--cell); height: var(--cell); margin: 0; padding: 0; border: 1px solid rgba(255, 120, 90, .18); background: #120a0c; cursor: pointer; position: relative; }
.dk-c.br { border-right: 2px solid rgba(255, 120, 90, .55); }
.dk-c.bb { border-bottom: 2px solid rgba(255, 120, 90, .55); }
.dk-c.on { background: linear-gradient(145deg, #f4ecdf, #c8bca8); border-color: rgba(0, 0, 0, .4); }
.dk-c.x::after { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 calc(var(--cell) * .5) var(--mono); color: rgba(255, 120, 90, .45); }
.dk-c.hint { box-shadow: inset 0 0 0 2px #7dffb0; }
.dk-c.bad { background: rgba(255, 90, 74, .55); }
.dk-c.sel { outline: 2px solid var(--ac); outline-offset: -2px; z-index: 1; }
.dk-play.done .dk-c { cursor: default; transition: background .9s ease; }
.dk-play.done .dk-c.on { background: var(--dev, #ffd23a); border-color: transparent; }
.dk-photo { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%) scale(.92); image-rendering: pixelated; opacity: 0; pointer-events: none;
  transition: opacity 1.6s ease 1s, transform 1.6s ease 1s; filter: drop-shadow(0 0 18px rgba(255, 210, 160, .45)); }
.dk-wrap.dev .dk-photo { opacity: .95; transform: translate(-50%, -50%) scale(1); }
.dk-stage .gd-tools button.on { color: #03060d; background: var(--safe); border-color: var(--safe); }