.mode-card.recommended { background: #edf1e2; border-color: #b7c6a5; }
.mode-card.recommended .mode-bottom { color: #355b3d; }
.mode-card.complete .mode-icon { background: #dde8cb; border-radius: 50%; padding: 4px; margin: -4px; }
.game-progress { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 10px; color: var(--muted); }
.game-progress .trail-score { margin-left: auto; color: #71845d; }
.compass-arrow.selected { animation: compass-click .24s ease-out; }
.candidate-point.selected { animation: pin-drop .28s ease-out; }
.map-marker { animation: pin-drop .28s ease-out; }
.match-option.selected { animation: map-pick .24s ease-out; }
.game-view img { animation: scene-appear .45s ease-out; }
.mode-bottom .arrow { transition: transform .18s ease; }
.mode-card:hover .mode-bottom .arrow { transform: translate(2px, -2px); }
.result-card { position: relative; overflow: hidden; }
.result-card.just-revealed { animation: result-arrive .4s ease-out; }
.score-number { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }
.score-value { white-space: nowrap; }
.celebration { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.celebration i { position: absolute; width: 5px; height: 9px; top: -10px; left: var(--x); border-radius: 1px; background: var(--color); opacity: 0; animation: confetti-fall 1.35s ease-out var(--delay) both; }
.daily-return { font-size: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 19px; color: var(--muted); }
.daily-return svg { width: 13px; height: 13px; }
.daily-countdown { font-variant-numeric: tabular-nums; color: #4c674e; }
.completion-banner { margin-top: 17px; border-top: 1px solid #ccd8bb; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 11px; }
.completion-banner strong { display: block; color: #3c5e37; font-weight: 600; }
.completion-banner span { font-size: 10px; color: var(--muted); }
.completion-badge { font-size: 24px; color: #76904d; }
.streak-callout { display: inline-flex; align-items: center; gap: 5px; color: #6d8155; padding: 3px 9px; border-radius: 20px; background: #e9eedb; font-size: 9px; margin-left: 9px; }
.sound-off { color: #9a9f92; }
.candidate-point.actual-point { background: #bb6f43; border-color: #bb6f43; color: white; }
.candidate-point.actual-point::before { content: 'ACTUAL'; position: absolute; top: -21px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 500; background: #f7f6edee; color: #9b5f38; padding: 1px 4px; border-radius: 2px; }
.angle-button { transition: background .15s; }
.share-button { transition: transform .15s, background .15s; }
.share-button:active { transform: scale(.97); }
@keyframes compass-click { 0% { transform: translate(-50%,-50%) scale(.8); } 65% { transform: translate(-50%,-50%) scale(1.13); } 100% { transform: translate(-50%,-50%) scale(1); } }
@keyframes pin-drop { 0% { transform: translate(-50%,-75%) scale(.72); opacity: .5; } 70% { transform: translate(-50%,-50%) scale(1.12); } 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
@keyframes map-pick { 0% { transform: scale(.975); } 100% { transform: scale(1); } }
@keyframes scene-appear { from { opacity: .4; } to { opacity: 1; } }
@keyframes result-arrive { from { opacity: .4; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .9; } 80% { opacity: .65; } 100% { transform: translateY(280px) rotate(240deg); opacity: 0; } }
@media (max-width: 600px) { .game-progress { font-size: 9px; gap: 7px; margin-top: 14px; } .trail-score { font-size: 9px; } .daily-return { font-size: 9px; } .completion-banner { font-size: 10px; } .header nav { gap: 9px; } .header .icon-button { width: 26px; } .header .icon-button svg { width: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 600px) { .intro > div:first-child { min-width: 0; } .intro .edition { flex-shrink: 0; width: 80px; white-space: nowrap; } }

/* Every deliberate action gets a small, local response. */
button:not(:disabled):active, a:active { filter: brightness(.94); }
.action-ring { position: fixed; z-index: 100; width: 28px; height: 28px; border: 2px solid #79954d; border-radius: 50%; pointer-events: none; animation: action-ripple .42s ease-out both; }
.feedback-pop { animation: feedback-pop .3s ease-out; }
.answer-ready { animation: ready-lift .4s ease-out; }
.submit-row.ready #selection-hint { color: #28523f; font-weight: 600; }
.submit-row.ready .button-primary { box-shadow: 0 3px 0 #183a2a, 0 0 0 3px #a9bf792b; }
.result-card[data-reward="perfect"] { background: linear-gradient(120deg, #edf3df, #f5efcf); border-color: #b5bf77; }
.result-card[data-reward="perfect"] .eyebrow { color: #806520; font-weight: 700; }
.result-card[data-reward="correct"] { border-color: #8dac78; }
.result-card[data-reward="miss"] { background: #f1eee5; border-color: #d7ceb9; }
.result-card.just-revealed { animation: result-arrive .5s cubic-bezier(.2,.8,.2,1) .08s both; }
.result-card.just-revealed .score-value { animation: score-bloom .7s ease-out .15s both; }
.result-card.just-revealed .round-medal { animation: medal-pop .65s cubic-bezier(.2,.8,.3,1.3) .12s both; }
.result-card.just-revealed[data-reward="perfect"] .round-medal { box-shadow: 0 3px 0 #d3b769, 0 0 0 6px #ead27b3b; }
.badge-unlocked { animation: badge-unlock .6s ease-out; }
.badge-earned { display: inline-block; padding: 5px 9px; border: 1px solid #d7c789; background: #f5eac4; border-radius: 20px; }
.points-collected { animation: feedback-pop .4s ease-out; color: #4b7739; }
.round-completed { animation: checkpoint-stamp .5s ease-out; }
.retry-point { animation: retry-point .4s ease-out; }
.retry-nudge { animation: retry-nudge .35s ease-out; }
.points-flight { position: fixed; z-index: 90; border-radius: 16px; background: #315a3f; color: #fff5d5; padding: 5px 10px; font-size: 14px; font-weight: 750; pointer-events: none; box-shadow: 0 3px 9px #183a2a22; }
.reward-burst { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.reward-burst i { position: absolute; top: 25%; left: 50%; width: 5px; height: 9px; border-radius: 1px; background: var(--color); animation: reward-spark 1.25s cubic-bezier(.15,.7,.25,1) var(--delay) both; }
.reward-burst i:nth-child(3n) { width: 5px; height: 5px; border-radius: 50%; }

/* The daily payoff is a compact, collectible trail card. */
#info-dialog.daily-reward-dialog { width: min(420px, calc(100vw - 28px)); max-width: 420px; max-height: calc(100dvh - 28px); padding: 28px; border: 1px solid #c7cfae; border-radius: 22px; background: #f8f7ef; box-shadow: 0 22px 80px #102d2440; overflow-y: auto; }
.daily-reward-dialog::backdrop { background: #16382bcc; backdrop-filter: blur(5px); }
.daily-reward-dialog .dialog-close { top: 8px; right: 8px; width: 36px; height: 36px; z-index: 2; }
.daily-reward { position: relative; text-align: center; }
.daily-reward > .eyebrow { font-size: 8px; color: #587047; letter-spacing: 1.25px; padding-right: 8px; }
.daily-seal { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; width: 102px; height: 102px; margin: 20px auto 14px; border: 4px solid #d4b653; outline: 1px solid #b99d45; outline-offset: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff8d8, #e8cf82); box-shadow: 0 5px 0 #b49642, 0 12px 22px #bfa54b26; color: #7b6425; }
.daily-seal svg { width: 51px; height: 51px; stroke-width: 1.8; }
.daily-seal > span { font-size: 13px; }
.seal-unlocked { animation: seal-arrive .65s cubic-bezier(.2,.8,.3,1.25) both; }
.daily-reward h2 { font: 650 34px/1.1 var(--serif); letter-spacing: -.8px; margin: 12px 0 7px; color: #274d39; }
.daily-reward .reward-subtitle { margin: 0; font-size: 11px; color: #768164; }
.reward-total { margin: 16px 0 8px; }
.reward-total output { display: block; font: 750 54px/1 var(--sans); font-variant-numeric: tabular-nums; color: #315c40; letter-spacing: -2px; }
.reward-total > span { font-size: 10px; color: #778268; }
.reward-rank { display: inline-block; border-radius: 20px; border: 1px solid #d8c58b; padding: 5px 12px; background: #f2e8c3; color: #7c6425; font-size: 11px; font-weight: 650; }
.reward-rounds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 18px 0 12px; }
.reward-rounds > div { display: flex; align-items: center; flex-direction: column; gap: 5px; padding: 10px 3px; border: 1px solid #d5dec6; border-radius: 10px; background: #eef2e3; }
.reward-rounds svg { width: 19px; height: 19px; color: #426749; }
.reward-rounds strong { font-size: 10px; font-weight: 650; }
.reward-rounds strong span { color: #588145; font-size: 9px; }
.reward-rounds div > span { color: #77836b; font-size: 9px; }
.reward-highlights { display: flex; justify-content: space-between; gap: 10px; margin: 12px 1px 16px; font-size: 10px; color: #587047; }
.daily-reward > button { display: flex; justify-content: center; width: 100%; min-height: 44px; margin-top: 9px; }
.daily-reward .daily-return { margin: 15px 0 0; font-size: 9px; }

@keyframes action-ripple { from { transform: translate(-50%, -50%) scale(.5); opacity: .75; } to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
@keyframes feedback-pop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes ready-lift { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
@keyframes score-bloom { from { transform: scale(.7); opacity: .3; } 65% { transform: scale(1.08); opacity: 1; } to { transform: scale(1); } }
@keyframes badge-unlock { from { opacity: .3; transform: scale(.85); } 60% { transform: scale(1.05); } to { transform: scale(1); opacity: 1; } }
@keyframes checkpoint-stamp { from { transform: scale(.8); } 60% { transform: scale(1.15); } to { transform: scale(1); } }
@keyframes retry-point { 0%,100% { transform: translate(-50%,-50%); } 30% { transform: translate(calc(-50% - 4px),-50%); } 70% { transform: translate(calc(-50% + 4px),-50%); } }
@keyframes retry-nudge { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
@keyframes reward-spark { 0% { transform: translate(0,0) rotate(0) scale(.5); opacity: 0; } 15% { opacity: 1; } 75% { opacity: .85; } 100% { transform: translate(var(--dx),calc(var(--dy) + 70px)) rotate(var(--turn)) scale(.7); opacity: 0; } }
@keyframes seal-arrive { from { transform: scale(.5) rotate(-18deg); opacity: .2; } 70% { transform: scale(1.08) rotate(3deg); opacity: 1; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 600px) {
  .badge-earned { padding: 3px 7px; font-size: 9px; }
  .points-flight { font-size: 12px; padding: 4px 8px; }
  #info-dialog.daily-reward-dialog { padding: 22px 18px 18px; border-radius: 18px; }
  .daily-seal { width: 76px; height: 76px; margin: 17px auto 12px; border-width: 3px; outline-offset: 3px; }
  .daily-seal svg { width: 39px; height: 39px; }
  .daily-seal > span { font-size: 10px; }
  .daily-reward h2 { font-size: 30px; margin: 9px 0 5px; }
  .daily-reward .reward-subtitle { font-size: 10px; }
  .reward-total { margin: 12px 0 7px; }
  .reward-total output { font-size: 44px; }
  .reward-rank { padding: 4px 10px; font-size: 10px; }
  .reward-rounds { margin: 13px 0 10px; gap: 6px; }
  .reward-rounds > div { padding: 8px 2px; gap: 4px; }
  .reward-rounds svg { width: 16px; height: 16px; }
  .reward-highlights { margin: 10px 0 12px; font-size: 9px; }
  .daily-reward > button { margin-top: 8px; font-size: 12px; }
  .daily-reward .daily-return { margin-top: 12px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .action-ring, .reward-burst, .points-flight { display: none; } }