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

/* ---------- step header, rule, feedback ---------- */
.trial-play { display: grid; gap: 10px; min-width: 0; }
.trial-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.trial-head:has(.trial-route.is-named) { display: grid; justify-content: stretch; }
#progression-dialog .trial-step { margin: 0; font-size: 17px; line-height: 1.25; }
.trial-step:focus { outline: none; }
.trial-step:focus-visible { outline: 3px solid var(--cz-peach-deep); outline-offset: 3px; border-radius: 4px; }
.trial-route { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.trial-route li { width: 24px; height: 10px; border-radius: 5px; background: #ece4cb; border: 2px solid #c9bb95; }
.trial-route li.is-done { background: var(--cz-moss); border-color: var(--cz-moss-deep); }
.trial-route li.is-current { background: var(--cz-gold); border-color: var(--cz-gold-deep); }
.trial-route.is-named li { width: auto; height: auto; padding: 2px 9px; border-radius: 999px; font-size: 12px; line-height: 1.5; color: var(--cz-cocoa); background: var(--cz-paper); }
.trial-route.is-named li.is-done { background: #e6f0d6; }
.trial-route.is-named li.is-done::before { content: "✓ "; }
.trial-route.is-named li.is-current { background: #fbe7b0; font-weight: 700; }
#progression-dialog .trial-rule { margin: 0; font-size: 14px; line-height: 1.5; }
.trial-rule-rune { width: 36px; height: 30px; margin: -8px 0 -8px; vertical-align: middle; image-rendering: pixelated; }
#progression-dialog .trial-note { margin: 0; min-height: 3.1em; padding: 8px 12px; font-size: 14px; line-height: 1.45; background: #f6f0dc; border: 2px dashed #d8c8a2; border-radius: 10px; }
#progression-dialog .trial-play[data-phase="play"] .trial-note { background: #eef5e3; border: 2px solid #b5cc95; }
.trial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#progression-dialog .trial-actions .button { min-height: 40px; padding: 6px 14px; font-size: 14px; }
#progression-dialog .trial-actions [aria-disabled="true"] { opacity: .5; cursor: default; transform: none; }
#progression-dialog .trial-cancel { margin-left: auto; min-height: 40px; padding: 6px 2px; font-size: 13px; }

/* ---------- shared board and tiles ---------- */
.trial-board { position: relative; display: grid; gap: 10px; min-width: 0; padding: 14px; border: 3px solid var(--cz-cocoa); border-radius: 14px; }
#progression-dialog .trial-tile {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 2px;
  min-width: 0; min-height: 44px; margin: 0; padding: 6px 4px;
  font: 500 12px/1.2 var(--cz-font-body); color: var(--cz-cocoa);
  background: var(--cz-paper); border: 3px solid var(--cz-cocoa); border-radius: 12px; box-shadow: 0 3px 0 var(--cz-cocoa);
  cursor: pointer; transition: transform .15s, box-shadow .15s, background-color .15s, opacity .2s;
}
.trial-tile canvas { display: block; image-rendering: pixelated; }
#progression-dialog .trial-tile[aria-disabled="true"] { cursor: default; }
#progression-dialog .trial-tile.is-lit { background: #fff1b8; box-shadow: 0 0 0 4px var(--cz-gold), 0 3px 0 var(--cz-cocoa); transform: translateY(-3px) scale(1.05); z-index: 1; }
#progression-dialog .trial-tile.is-good { background: #dcedc5; }
#progression-dialog .trial-tile.is-miss { background: #f6d6cd; border-color: #9c4a37; animation: trial-shake .42s ease-in-out; }
#progression-dialog .trial-tile.is-hint { box-shadow: 0 0 0 4px var(--cz-sky), 0 3px 0 var(--cz-cocoa); animation: trial-glow 1.3s ease-in-out infinite; }
.trial-badge {
  position: absolute; top: -11px; right: -9px; z-index: 2; display: grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 6px; border: 2px solid var(--cz-paper); border-radius: 13px;
  font: 700 14px/1 var(--cz-font-body); color: var(--cz-paper); background: var(--cz-cocoa);
}
.trial-badge[hidden] { display: none; }

/* ---------- woodland trail: six finds along a path ---------- */
.trial-board[data-style="trail"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: linear-gradient(128deg, #dfe9c8 0 40%, #d3bf8f 40% 47%, #e2d2a5 47% 53%, #d3bf8f 53% 60%, #dfe9c8 60%);
}
.trial-find { min-height: 92px; }
.trial-find canvas { width: 72px; height: 60px; }
.trial-tile-name { overflow-wrap: anywhere; }
#progression-dialog .trial-find.is-picked { background: #eef5e3; border-color: var(--cz-moss-deep); }

/* ---------- tide shells: four shells, face up then face down ---------- */
.trial-board[data-style="pairs"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: linear-gradient(#a9d3e4 0 22%, #f6e7c4 22%);
  perspective: 700px;
}
#progression-dialog .trial-shell { min-height: 104px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.trial-shell-inner { position: relative; display: block; width: 100%; height: 104px; transform-style: preserve-3d; transition: transform .32s var(--cz-ease); }
.trial-shell.is-up .trial-shell-inner { transform: rotateY(180deg); }
.trial-shell-back, .trial-shell-face {
  position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 3px solid var(--cz-cocoa); border-radius: 14px; box-shadow: 0 3px 0 var(--cz-cocoa);
}
canvas.trial-shell-back { object-fit: contain; background: #fbe9d2; image-rendering: pixelated; }
.trial-shell-face { display: grid; place-items: center; align-content: center; gap: 0; background: var(--cz-paper); transform: rotateY(180deg); }
.trial-shell-face canvas { width: 60px; height: 50px; }
.trial-shell-name { font-size: 12px; font-weight: 600; }
.trial-shell.is-found .trial-shell-face { background: #dcedc5; border-color: var(--cz-moss-deep); }
.trial-shell.is-miss .trial-shell-face { background: #f6d6cd; border-color: #9c4a37; }
#progression-dialog .trial-shell.is-miss { animation: none; background: transparent; }
#progression-dialog .trial-shell.is-lit, #progression-dialog .trial-shell.is-good { background: transparent; box-shadow: none; transform: none; }
#progression-dialog .trial-shell.is-hint { background: transparent; box-shadow: none; }
.trial-shell.is-hint .trial-shell-back { box-shadow: 0 0 0 4px var(--cz-sky), 0 3px 0 var(--cz-cocoa); }

/* ---------- summit ridge: climb one stone per row ---------- */
.trial-board[data-style="ridge"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 5), minmax(42px, auto));
  gap: 7px 12px; padding: 32px 16px 32px;
  background: linear-gradient(#e6eef2, #b8c9d2 55%, #96aab5);
}
.trial-board[data-style="ridge"]::before, .trial-board[data-style="ridge"]::after {
  position: absolute; left: 50%; translate: -50% 0; padding: 0 9px; white-space: nowrap;
  font: 600 12px/1.6 var(--cz-font-display); color: var(--cz-cocoa); background: var(--cz-paper);
  border: 2px solid var(--cz-cocoa); border-radius: 999px;
}
.trial-board[data-style="ridge"]::before { content: "▲ Summit"; top: 6px; }
.trial-board[data-style="ridge"]::after { content: "Ledge · start here"; bottom: 6px; }
#progression-dialog .trial-stone { min-height: 42px; border-color: #4f626b; border-radius: 16px 10px 14px 9px; background: radial-gradient(circle at 28% 32%, #fffdf4 0 14%, transparent 15%), linear-gradient(#f5f2e8, #d9d3c1); box-shadow: 0 3px 0 #4f626b; }
.trial-play[data-phase="play"] .trial-stone:not(.is-next, .is-climbed) { opacity: .55; }
#progression-dialog .trial-stone.is-next { background: var(--cz-paper); border-color: var(--cz-cocoa); }
#progression-dialog .trial-stone.is-climbed { background: #cfe3b5; border-color: var(--cz-moss-deep); opacity: 1; }
#progression-dialog .trial-stone.is-climbed::after { content: ""; width: 12px; height: 8px; border-radius: 6px 6px 3px 3px; background: var(--cz-moss-deep); }
#progression-dialog .trial-stone.is-lit { background: #fff1b8; box-shadow: 0 0 0 4px var(--cz-gold), 0 3px 0 #4f626b; }

/* ---------- star chart: six stars on a night sky ---------- */
.trial-board[data-style="sky"] {
  display: block; height: 264px; padding: 0; overflow: hidden;
  background: radial-gradient(circle at 30% 18%, #36556e, #1d2f42 72%);
}
.trial-board[data-style="sky"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(#fff6d6 1px, transparent 1.6px), radial-gradient(#cfe0ef 1px, transparent 1.6px);
  background-size: 37px 41px, 53px 47px; background-position: 0 0, 19px 23px;
}
.trial-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.trial-lines line { stroke: #f3d88a; stroke-width: 3; stroke-linecap: round; }
.trial-lines line.is-preview { stroke: #fff1b8; stroke-dasharray: 5 6; }
#progression-dialog .trial-star {
  position: absolute; width: 60px; height: 60px; min-height: 0; padding: 0; translate: -50% -50%;
  border-radius: 50%; background: #2b4157; border: 3px solid #9ab2c7; box-shadow: 0 3px 0 #0f1a26;
}
.trial-star canvas { width: 48px; height: 40px; }
#progression-dialog .trial-star.is-lit { background: #fff1b8; border-color: var(--cz-gold); box-shadow: 0 0 20px 6px #f6d77a99; transform: scale(1.14); }
#progression-dialog .trial-star.is-picked { background: #43617d; border-color: var(--cz-gold); }
#progression-dialog .trial-star.is-good { background: #43617d; }
#progression-dialog .trial-star.is-miss { background: #6b3b3b; border-color: #f3a97b; }
#progression-dialog .trial-star.is-hint { box-shadow: 0 0 0 4px var(--cz-sky), 0 3px 0 #0f1a26; }
.trial-star .trial-badge { top: -8px; right: -8px; }

/* ---------- the celebration after the last step ---------- */
.trial-celebration {
  position: relative; overflow: hidden; display: grid; justify-items: center; gap: 6px;
  padding: 22px 18px; text-align: center;
  background: radial-gradient(circle at 50% 0%, #fff3c4, #fdf7e4 62%);
  border: 3px solid var(--cz-cocoa); border-radius: 16px; box-shadow: var(--cz-shadow-sm);
  animation: trial-pop .5s var(--cz-ease);
}
.trial-celebration > canvas { width: 72px; height: 60px; image-rendering: pixelated; }
#progression-dialog .trial-celebration h3 { margin: 0; font-size: 22px; }
.trial-celebration h3:focus { outline: none; }
.trial-celebration h3:focus-visible { outline: 3px solid var(--cz-peach-deep); outline-offset: 3px; }
#progression-dialog .trial-result { margin: 0; font-weight: 600; }
.trial-celebration .progress-reward { margin: 4px 0; }
.trial-celebration .trial-actions { justify-content: center; }
.trial-sparkles { position: absolute; inset: 0; pointer-events: none; }
.trial-sparkles span { position: absolute; bottom: 10px; width: 6px; height: 6px; background: var(--cz-gold); box-shadow: 0 0 0 2px #fff6d6; opacity: 0; animation: trial-spark 1.8s ease-out 3; }
.trial-sparkles span:nth-child(1) { left: 8%; animation-delay: .1s; }
.trial-sparkles span:nth-child(2) { left: 20%; animation-delay: .6s; }
.trial-sparkles span:nth-child(3) { left: 32%; animation-delay: .3s; }
.trial-sparkles span:nth-child(4) { left: 45%; animation-delay: .9s; }
.trial-sparkles span:nth-child(5) { left: 58%; animation-delay: .2s; }
.trial-sparkles span:nth-child(6) { left: 70%; animation-delay: .7s; }
.trial-sparkles span:nth-child(7) { left: 82%; animation-delay: .4s; }
.trial-sparkles span:nth-child(8) { left: 92%; animation-delay: 1s; }

@keyframes trial-shake { 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }
@keyframes trial-glow { 50% { box-shadow: 0 0 0 7px #9fcfe3aa, 0 3px 0 var(--cz-cocoa); } }
@keyframes trial-pop { from { transform: scale(.94); opacity: 0; } }
@keyframes trial-spark { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px); } }

/* ---------- touch, small screens, short screens ---------- */
@media (pointer: coarse) {
  #progression-dialog .trial-actions .button, #progression-dialog .trial-cancel, #progression-dialog .trial-card .button, .trial-celebration .button { min-height: 44px; }
  #progression-dialog .trial-stone { min-height: 48px; }
}
@media (max-width: 480px) {
  .trial-board { gap: 8px; padding: 10px; }
  .trial-find { min-height: 84px; }
  .trial-find canvas { width: 60px; height: 50px; }
  #progression-dialog .trial-shell, .trial-shell-inner { min-height: 92px; height: 92px; }
  .trial-shell-face canvas { width: 48px; height: 40px; }
  .trial-board[data-style="ridge"] { gap: 7px 8px; padding: 32px 10px; }
  .trial-board[data-style="sky"] { height: 250px; }
  #progression-dialog .trial-star { width: 54px; height: 54px; }
  .trial-star canvas { width: 40px; height: 34px; }
}
@media (max-width: 340px) {
  .trial-board[data-style="pairs"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 480px) {
  .trial-find { min-height: 72px; }
  .trial-find canvas { width: 48px; height: 40px; }
  .trial-board[data-style="sky"] { height: 220px; }
}

/* ---------- reduced motion: steady highlights, no flips or flashes ---------- */
.trial-play.is-still *, .trial-celebration.is-still, .trial-celebration.is-still * { animation: none !important; transition: none !important; }
.trial-play.is-still .trial-tile.is-lit { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .trial-play *, .trial-celebration, .trial-celebration * { animation: none !important; transition: none !important; }
  #progression-dialog .trial-tile.is-lit { transform: none; }
}