/* Reference A: appearance only. Dimensions and layout remain in viewport.css. */
html:has(#title-screen[hidden]) {
  --aqua:#91c7c9;
  --ink:#173b3e;
}

:is(#stage-screen, #game-screen) { color:#173b3e; }
:is(#stage-screen, #game-screen) .icon {
  background:#f5f3eb;
  border-color:#173b3e;
  border-radius:10px;
  box-shadow:0 3px 0 #173b3e;
  color:#173b3e;
}





#stage-screen .stage-header h1 {
  font-size:24px;
  transform:translateY(-4px);
}
/* Move the count visually without moving the gallery grid or header buttons. */
#stage-screen #collection-count { transform:translateY(-12px); }
#stage-screen .stage-tile {
  --tile-frame:#f5f3eb;
  --tile-shadow:#173b3e;
  border-radius:10px;
}
#stage-screen .stage-tile::after {
  /* Match the backing to the frame so rounded artwork exposes no square patch. */
  background:var(--tile-frame);
  outline:2px solid #173b3e;
  outline-offset:-2px;
}
#stage-screen .stage-tile.current {
  --tile-frame:#ffe65a;
  box-shadow:none;
}
#stage-screen .stage-tile.current::after {
  animation:current-stage-frame 1s ease-in-out infinite;
}
#stage-screen .stage-art {
  display:block;
  width:100%;
  height:100%;
  border-radius:6px;
  overflow:hidden;
}
/* Keep the translucent grayscale artwork on a fixed, rounded backing. */
#stage-screen .stage-tile.current .stage-art { background:#c8dada; }
@keyframes current-stage-frame {
  0%, 40%, 100% { border-color:#ffe65a; background-color:#ffe65a; }
  50%, 90% { border-color:#c8dada; background-color:#c8dada; }
}
@media (prefers-reduced-motion:reduce) {
  #stage-screen .stage-tile.current::after { animation:none; }
}
#stage-screen .stage-tile.locked { --tile-frame:#c8dada; --tile-shadow:#6c9193; }


#stage-screen .tile-number {
  background:#173b3e;
  color:#fff;
  border-color:#173b3e;
  border-radius:4px;
}
/* Clip after grayscale/opacity compositing so pixelated canvases keep smooth corners. */
#stage-screen .stage-tile canvas { clip-path:inset(0 round 6px); }
dialog[data-kind="failed"] #modal-content > p,
dialog[data-kind="clear"] .picture-name { white-space:pre-line; }
#stage-screen .page-nav, #stage-screen .page-nav button { color:#173b3e; }
.stage-instruction, #collection-count, #game-screen .eyebrow, #game-screen .play-hint { color:#48696c; }

#game-screen .reference-frame {
  background:#23494d;
  border-color:#122a2c;
  border-radius:8px;
  box-shadow:0 4px 0 rgb(18 42 44 / 25%);
}
#target-board { border-color:#122a2c; }
#move-label, #puzzle-info {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:2px solid transparent;
  border-color:transparent;
  border-radius:999px;
  background:rgb(23 59 62 / 14%);
  color:#122f32;
}
#move-label.urgent { background:#ffe066; color:#673e25; }
#move-label img { display:block; flex:none; }


#game-screen .board-wrap {
  border-radius:6px;
  outline-color:#173b3e;
  box-shadow:0 0 0 1px #173b3e, 0 8px 0 rgb(23 59 62 / 22%);
}

dialog {
  background:#fcfbf7;
  border-color:#173b3e;
  border-radius:18px;
  color:#173b3e;
  box-shadow:0 10px 0 #173b3e, 0 20px 40px rgb(0 0 0 / 40%);
}
dialog::backdrop { background:rgb(15 38 41 / 72%); }
dialog p { color:#48696c; }
dialog .picture-name { color:#173b3e; }
dialog[data-kind="clear"] h2 {
  background:#ffe066;
  border-radius:999px;
  box-shadow:inset 0 0 0 2px #173b3e;
}
dialog .collection-picture {
  background:#fff;
  border-color:#173b3e;
  border-radius:10px;
  box-shadow:0 4px 0 #d5dede;
}
dialog .action {
  background:#f5f3eb;
  border-color:#173b3e;
  border-radius:11px;
  color:#173b3e;
  box-shadow:0 4px 0 #173b3e;
}
dialog .action.primary { background:#7ab8d6; color:#fff; }
dialog .action.reward { background:#ffe066; color:#173b3e; }
dialog .action.quiet { background:transparent; color:#48696c; box-shadow:none; }
dialog .sound-options button {
  background:#f5f3eb;
  border-color:#173b3e;
  border-radius:10px;
  color:#173b3e;
  box-shadow:0 3px 0 #173b3e;
}
dialog .sound-options button[aria-pressed="false"] { background:#c8dada; color:#48696c; box-shadow:0 1px 0 #6c9193; }
dialog .reset-progress-button {
  display:block; width:100%; margin:18px 0 0; padding:10px 8px;
  min-height:44px; border:1px solid #6c9193; border-radius:10px;
  background:transparent; color:#48696c; font:inherit; font-size:13px;
  box-shadow:none; overflow-wrap:anywhere;
}
dialog[data-kind="reset-progress"] .modal-actions { flex-wrap:wrap; }
dialog[data-kind="reset-progress"] h2 { overflow-wrap:anywhere; }



:is(#stage-screen, #game-screen, dialog) button:focus-visible {
  outline:3px solid #2864bd;
  outline-offset:3px;
}