/* Mini-game styles: puzzles (loaded after shell.css). */

/* ---------- world puzzles (mushroom trail, shell pairs, crystal resonance) ---------- */
.exploration-body .puzzle-intro { margin: 0; }
.puzzle-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 2px solid #cdbb8a;
  border-radius: 12px;
  background: #fbf5e3;
  min-width: 0;
}
.puzzle-panel[hidden], .puzzle-result[hidden], .puzzle-away[hidden] { display: none; }
.puzzle-guide { display: grid; gap: 8px; min-width: 0; }
.puzzle-guide-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.exploration-body .puzzle-intro[hidden] { display: none; }
.field-notes {
  padding: 10px 14px 12px;
  border: 1px solid #d5c596;
  border-radius: 8px;
  background: repeating-linear-gradient(#fffaf0 0 23px, #efe4c4 23px 24px);
  box-shadow: 0 2px 0 #e0d1a6;
}
.exploration-body .field-notes-title {
  margin: 0;
  font-family: var(--cz-font-display);
  font-size: 15px;
  color: #6b5a3c;
}
.field-notes ol { margin: 4px 0 0; padding-left: 22px; display: grid; gap: 2px; }
.field-notes li { font-size: 14px; line-height: 1.6; color: #5c5240; }
.field-notes li.done { color: #7f8a6c; text-decoration: line-through; text-decoration-color: #a6b48b; }
.field-notes li.current { font-weight: 700; color: #3a4429; }
.field-notes li.current::marker { color: #b07c22; }
.exploration-body .clean-chip {
  justify-self: start;
  margin: 0;
  padding: 2px 10px;
  border: 1px solid #b6c796;
  border-radius: 999px;
  background: #eef3dd;
  color: #4b6638;
  font-size: 12px;
  line-height: 1.6;
}
.exploration-body .pair-count,
.song-meter {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: #4d4a3c;
}
.song-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.song-dots { display: inline-flex; gap: 6px; }
.song-dots i { width: 11px; height: 11px; border: 2px solid #7f8fa8; border-radius: 50%; }
.song-dots i.played { background: #7f8fa8; }
.exploration-body .puzzle-status {
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #efe6c8;
  font-size: 14px;
  line-height: 1.45;
}
.exploration-body .puzzle-status[data-tone="miss"] { background: #f6e2d5; color: #74402d; }
.exploration-body .puzzle-status[data-tone="good"] { background: #e3eed3; color: #3d5a2b; }
.puzzle-away { display: grid; gap: 10px; padding: 12px; border-radius: 8px; background: #f3ead0; }
.puzzle-away p { margin: 0; }
.exploration-puzzle.puzzle-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.exploration-puzzle.puzzle-board-coast:has(> :nth-child(7)),
.exploration-puzzle.puzzle-board-alpine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.exploration-puzzle.puzzle-board[hidden], .puzzle-tools[hidden] { display: none; }
.exploration-puzzle .puzzle-tile {
  position: relative;
  min-height: 92px;
  padding: 8px 4px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s, background 0.15s;
}
.exploration-puzzle .puzzle-tile canvas {
  width: 96px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 48 / 40;
  image-rendering: pixelated;
}
.exploration-puzzle .puzzle-tile:hover:not(:disabled) { transform: translateY(-2px); }
.exploration-puzzle .puzzle-tile:focus-visible { outline: 3px solid #3c5f8a; outline-offset: 2px; }
.exploration-puzzle .puzzle-tile.found { background: #f6e7b0; border-color: #a17a3d; cursor: default; }
.exploration-puzzle .puzzle-tile.found::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 6px;
  font-weight: 700;
  color: #6f5424;
}
.exploration-puzzle .puzzle-tile.nope { animation: puzzle-nope 0.4s ease-out; border-color: #c27a5a; }
@keyframes puzzle-nope {
  20% { translate: -4px 0; }
  40% { translate: 4px 0; }
  60% { translate: -3px 0; }
  80% { translate: 2px 0; }
}
.exploration-puzzle .exploration-coast.open { background: #f4fbf9; border-color: #5f9a93; }
.exploration-puzzle.puzzle-board-alpine {
  padding: 12px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 0%, #46557a, #2b354c 70%);
}
.exploration-puzzle .exploration-alpine { background: #3a4864; border-color: #6d7fa3; box-shadow: 0 3px #222a3b; }
.exploration-puzzle .exploration-alpine canvas { width: 80px; }
.exploration-puzzle .exploration-alpine.lit {
  background: #56688f;
  border-color: #fff1b8;
  filter: brightness(1.45) saturate(1.15);
  box-shadow: 0 0 0 3px #fff3c4, 0 0 24px 6px rgba(255, 238, 170, 0.7);
  transform: translateY(-3px);
}
.exploration-puzzle.listening .exploration-alpine { cursor: default; }
.puzzle-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.puzzle-result {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 2px solid #b6c796;
  border-radius: 12px;
  background: #eef3dd;
}
.exploration-body .puzzle-result h3 { margin: 0; font-size: 20px; }
.puzzle-result p { margin: 0; }
.puzzle-result .button { justify-self: start; }
.puzzle-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.exploration-body .puzzle-footer { margin: 0; font-size: 13px; color: var(--cz-cocoa-soft); }
.exploration-now { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.5; }
/* Reduced motion (system or game setting): steady outlines instead of flashes. */
.exploration-body.calm .puzzle-tile,
.exploration-body.calm .puzzle-tile:hover { transition: none; transform: none; }
.exploration-body.calm .puzzle-tile.nope { animation: none; outline: 3px solid #c27a5a; outline-offset: 2px; }
.exploration-body.calm .exploration-alpine.lit {
  filter: none;
  transform: none;
  box-shadow: none;
  outline: 5px solid #fff1b8;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .exploration-puzzle .puzzle-tile { transition: none; }
  .exploration-puzzle .exploration-alpine.lit { transform: none; outline: 5px solid #fff1b8; outline-offset: 2px; }
}
@media (max-width: 480px) {
  .exploration-puzzle.puzzle-board { gap: 8px; }
  .exploration-puzzle .puzzle-tile { min-height: 80px; }
  .exploration-puzzle.puzzle-board-coast:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (pointer: coarse) {
  .exploration-puzzle .puzzle-tile { min-height: 88px; }
  .puzzle-controls button,
  .puzzle-tools button,
  .puzzle-away button,
  .puzzle-result button,
  #star-reset { min-height: 44px; }
}

/* ---------- constellation observatory ---------- */
#stars-dialog .star-intro { margin: 14px 0 0; font-size: 14px; line-height: 1.55; }
#stars-dialog .star-board {
  height: 280px;
  margin: 14px 0;
  overflow: hidden;
  border: 2px solid #4b5a7c;
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 22%, #d9e2f2 0 1px, transparent 1.5px),
    radial-gradient(circle at 37% 8%, #c9d4ea 0 1px, transparent 1.5px),
    radial-gradient(circle at 61% 31%, #d9e2f2 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 12%, #c9d4ea 0 1px, transparent 1.5px),
    radial-gradient(circle at 92% 52%, #d9e2f2 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 88%, #c9d4ea 0 1px, transparent 1.5px),
    radial-gradient(circle at 57% 91%, #d9e2f2 0 1px, transparent 1.5px),
    radial-gradient(circle at 7% 55%, #c9d4ea 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 35% 25%, #3d5275, #1f2a40 75%);
}
#stars-dialog .star-board::before { content: none; }
#star-board .star-guide {
  fill: none;
  stroke: rgba(236, 224, 178, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
#star-board .star-link {
  stroke: #f4da8c;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
#star-board .star-point {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
}
#star-board .star-point::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fdf4d2;
  box-shadow: 0 0 8px 2px rgba(255, 240, 190, 0.5);
  transition: scale 0.15s;
}
#star-board .star-point:hover::before { scale: 1.3; }
#star-board .star-point.linked::before {
  width: 16px;
  height: 16px;
  background: #ffe08a;
  box-shadow: 0 0 14px 5px rgba(255, 214, 110, 0.7);
}
#star-board .star-point.start::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid rgba(255, 236, 170, 0.8);
  border-radius: 50%;
}
#star-board .star-point.start::before { animation: star-twinkle 1.6s ease-in-out infinite; }
@keyframes star-twinkle {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: 1.7; opacity: 0.65; }
}
#star-board .star-point[aria-disabled="true"] { cursor: default; }
#star-board .star-point:focus-visible { outline: 3px solid #ffffff; outline-offset: 0; }
#star-board.traced .star-guide { opacity: 0; }
#star-board.traced .star-link { stroke: #ffe7a6; }
#star-board.calm .star-point.start::before { animation: none; scale: 1.3; }
#star-board.calm .star-point.start::after { border-width: 3px; }
#star-board .star-name {
  position: absolute;
  left: 14px;
  bottom: 10px;
  margin: 0;
  color: #f4e3a9;
  font-family: var(--cz-font-display);
  font-size: 18px;
}
#star-status { min-height: 40px; font-size: 13px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  #star-board .star-point.start::before { animation: none; scale: 1.3; }
}
@media (pointer: coarse) {
  #star-board .star-point { width: 48px; height: 48px; }
}