/* A short daily adventure, with a play area that follows the phone viewport. */
.trail-hud { padding: 12px 16px; margin: 20px 0; border: 1px solid #d5dec6; border-radius: 12px; background: #edf1e4; }
.trail-heading, .trail-goal { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trail-heading strong { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; }
.trail-heading svg { width: 16px; height: 16px; }
.trail-total { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trail-total small { font-size: 10px; font-weight: 400; color: #718065; }
.trail-meter { position: relative; height: 6px; margin: 8px 0; border-radius: 6px; background: #dbe2cd; }
.trail-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #537747, #99aa45); transition: width .5s ease; }
.trail-meter > span { position: absolute; top: -2px; width: 3px; height: 10px; border: 1px solid #edf1e4; border-radius: 2px; background: #b5bd96; }
.trail-goal { color: #6f7e62; font-size: 10px; }
.trail-goal > span:first-child { display: flex; align-items: center; gap: 4px; }
.trail-goal svg { width: 12px; height: 12px; }
.game-heading .trail-hud { margin-bottom: 0; padding: 10px 14px; }
.mode-card { border-radius: 12px; box-shadow: 0 3px 0 #e2e5d8; }
.mode-card.recommended { border-color: #95ac75; background: #eaf0dc; }
.mode-card.complete { box-shadow: 0 3px 0 #d2ddc0; }
.mode-card .mode-bottom { border-color: #d5ddc7; }
.button-primary { border-radius: 10px; box-shadow: 0 3px 0 #183a2a; font-weight: 650; transition: transform .15s, box-shadow .15s, background .15s; }
.button-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #183a2a; }
.button-primary:disabled { box-shadow: 0 3px 0 #c8d0bc; }
.button-secondary { border-radius: 9px; }
.home-launch { display: flex; justify-content: space-between; max-width: 420px; margin: 26px auto 0; text-align: left; font-size: 14px; }
.home-launch small { display: block; color: #dce5cd; font-size: 10px; font-weight: 400; margin-top: 3px; }
.home-launch > span:last-child { font-size: 24px; }
.game-view { border-radius: 12px; }
.view-chip { position: absolute; top: 10px; left: 10px; padding: 4px 7px; border-radius: 5px; background: #173a2a78; color: #fff; font-size: 8px; letter-spacing: 1px; pointer-events: none; }
.zoom-view-button { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 9px; border: 1px solid #ffffff80; background: #f7f6eff0; font-size: 23px; }
.zoom-view-button:hover { background: white; }
.zoom-landscape { display: block; width: 100%; max-height: calc(100dvh - 190px); object-fit: contain; border-radius: 8px; background: #dbe3d1; }
.round-medal { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #e4c777; outline: 1px solid #c8a64f; background: #f5e9b8; color: #846722; box-shadow: 0 3px 0 #d3b769; }
.round-medal svg { width: 27px; height: 27px; }
.round-medal[data-tier="Ridge"] { border-color: #c8d5c4; outline-color: #9bae99; background: #e4ecdf; color: #536f4b; box-shadow: 0 3px 0 #b2c1a7; }
.round-medal[data-tier="Foothill"], .round-medal[data-tier="Miss"] { border-color: #d9c9b6; outline-color: #b5a68e; background: #f0e7d7; color: #8b7258; box-shadow: 0 3px 0 #c5b69d; }
.result-top { gap: 16px; }
.result-copy { flex: 1; min-width: 0; }
.score-prefix { display: inline !important; font: inherit !important; color: inherit !important; }
.rank-reward { margin: 11px 0 0; font-size: 10px; color: #66774e; }
.rank-reward.badge-earned { font-weight: 700; color: #7e6323; }
.result-card.just-revealed .round-medal { animation: medal-pop .55s cubic-bezier(.2,.8,.3,1.3); }
.submit-row.ready .button-primary { background: #356444; border-color: #356444; }
@keyframes medal-pop { from { transform: scale(.4) rotate(-25deg); opacity: .2; } to { transform: scale(1) rotate(0); opacity: 1; } }

@media (max-width: 600px) {
  body { --phone-header: calc(50px + env(safe-area-inset-top)); }
  .header { height: var(--phone-header); margin: 0 14px; padding-top: env(safe-area-inset-top); }
  .brand { font-size: 23px; letter-spacing: -1.3px; gap: 6px; }
  .brand-mark { width: 27px; height: 27px; }
  .header nav { gap: 8px; }
  .header .icon-button { width: 36px; height: 40px; }
  .header .nav-button { min-height: 40px; font-size: 10px; }
  .header .nav-button span { display: none; }
  body[data-screen] .footer { display: none; }
  main { min-height: 0; padding: 10px 14px; }
  .button-primary { min-height: 44px; }
  .trail-hud { padding: 7px 10px; margin: 0; border-radius: 10px; }
  .trail-heading strong { font-size: 10px; gap: 5px; }
  .trail-heading svg { width: 13px; height: 13px; }
  .trail-total { font-size: 14px; line-height: 1; }
  .trail-total small { font-size: 9px; }
  .trail-meter { height: 5px; margin: 5px 0; }
  .trail-meter > span { height: 9px; }
  .trail-goal { font-size: 8px; gap: 4px; }
  .trail-goal svg { width: 10px; height: 10px; }
  .trail-goal > span:last-child { white-space: nowrap; }
  .next-badge { color: #778565; }
  .home-screen { height: calc(100dvh - var(--phone-header)); min-height: 570px; display: flex; flex-direction: column; gap: 9px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .home-screen .intro { display: block; position: relative; margin: 0; flex: 0 0 auto; }
  .intro h1 { font-size: 30px; letter-spacing: -1px; margin: 3px 0 0; line-height: 1.15; }
  .intro p { display: none; }
  .intro .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .intro .edition { position: absolute; top: -3px; right: 0; width: auto; padding: 0; }
  .edition strong { font-size: 8px; }
  .edition span { display: none; }
  .landscape-card { flex: 1 1 auto; min-height: 90px; max-height: none; border-radius: 12px; }
  .landscape-photo { height: 100%; }
  .landscape-photo > img { height: 100%; min-height: 0; }
  .landscape-caption { left: 13px; bottom: 10px; }
  .landscape-caption .eyebrow, .landscape-caption p { display: none; }
  .landscape-caption h2 { font-size: 23px; margin: 0; }
  .scene-stamp { top: 9px; left: 12px; font-size: 7px; padding: 3px 7px; }
  .terrain-meta { flex: 0 0 auto; margin: 0; font-size: 8px; }
  .terrain-meta svg { width: 11px; height: 11px; }
  .home-screen > .trail-hud { flex: 0 0 auto; }
  .challenge-picker { flex: 0 0 auto; }
  .section-heading { margin-bottom: 7px; }
  .section-heading h2 { font-size: 11px; }
  .section-heading .progress-count { display: none; }
  .mode-grid { gap: 8px; }
  .mode-card { min-height: 0; padding: 9px 11px 7px; }
  .mode-top { margin: 0 0 4px; }
  .mode-icon svg { width: 19px; height: 19px; }
  .mode-card.complete .mode-icon { padding: 2px; margin: -2px; }
  .pill { padding: 1px 7px; font-size: 8px; }
  .mode-card h3 { font-size: 12px; margin-bottom: 2px; }
  .mode-card p { font-size: 9px; line-height: 1.3; margin: 0 0 5px; }
  .mode-bottom { padding-top: 5px; font-size: 8px; }
  .mode-bottom .arrow { font-size: 14px; line-height: 1; }
  .home-launch { flex: 0 0 auto; width: 100%; max-width: none; margin: 1px 0 3px; padding: 8px 16px; font-size: 13px; }
  .home-launch small { font-size: 9px; margin-top: 1px; }
  .home-launch > span:last-child { font-size: 22px; }
  .home-note { display: none; }
  .home-screen .summary { margin: 0; padding: 9px 12px; flex: 0 0 auto; gap: 8px; border-radius: 10px; }
  .summary h3 { font-size: 17px; margin-bottom: 1px; }
  .summary p { font-size: 9px; }
  .summary .button-primary { padding: 8px 10px; font-size: 10px; white-space: nowrap; }
  .home-screen .daily-return { flex: 0 0 auto; margin: 0; font-size: 9px; }

  .play-screen { height: calc(100dvh - var(--phone-header)); min-height: 520px; display: flex; flex-direction: column; gap: 7px; padding: 6px 14px max(10px, env(safe-area-inset-bottom)); }
  .game-topline { flex: 0 0 auto; margin: 0; height: 34px; gap: 6px; }
  .back-link { font-size: 0; width: 32px; height: 32px; justify-content: center; background: #e9eedf; border: 1px solid #d1d9c5; border-radius: 9px; }
  .back-link span { font-size: 17px; }
  .mode-tabs { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .mode-tab { height: 32px; padding: 8px 4px; text-align: center; font-size: 10px; font-weight: 600; border: 1px solid #d6ddcb; background: #eeeee5; border-radius: 9px; }
  .mode-tab.active { border-color: var(--green); box-shadow: 0 2px 0 #183a2a; }
  .mode-tab.completed:not(.active) { background: #e1ead4; color: #4d6b42; }
  .game-heading { flex: 0 0 auto; margin: 0; }
  .game-heading > .eyebrow, .game-heading > p { display: none; }
  .game-heading h1 { font: 600 20px/1.2 var(--sans); letter-spacing: -.5px; margin: 0 0 7px; }
  .game-heading .trail-hud { padding: 6px 10px; margin: 0; }
  .game-heading .trail-goal > span:last-child { display: none; }
  .game-layout, .match-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(88px, .32fr) minmax(0, .68fr); align-items: stretch; gap: 7px; }
  .game-layout .view-panel, .match-layout .view-panel { order: -1; width: 100%; min-height: 0; padding: 0; position: relative; }
  .view-panel > .panel-label, .view-caption, .observation-note, .attempt-feedback { display: none; }
  .game-view { height: 100%; border-radius: 10px; }
  .game-view img { height: 100%; width: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 52%; }
  .view-chip { top: 8px; left: 8px; font-size: 7px; padding: 3px 6px; }
  .zoom-view-button { top: 5px; right: 5px; height: 34px; width: 34px; font-size: 21px; }
  .game-layout .map-panel, .match-layout .map-panel { min-height: 0; width: 100%; container-type: size; display: flex; flex-direction: column; align-items: center; }
  .map-panel > .panel-label { flex: 0 0 auto; width: 100%; height: 30px; min-height: 30px; margin: 0 0 5px; font-size: 10px; }
  .map-panel .zoom-map-button { min-height: 30px; padding: 4px 9px; font-size: 9px; }
  .map-panel > .grid-frame { width: min(100cqw, calc(100cqh - 54px)); margin: 0 auto; flex: 0 0 auto; }
  .map-panel > .grid-frame.with-grid { width: min(calc(100cqw - 24px), calc(100cqh - 72px)); margin: 0 auto 18px; }
  .map-panel .map-board { width: 100%; max-width: none; max-height: none; aspect-ratio: 1; }
  .grid-rows { font-size: 8px; left: -16px; width: 12px; }
  .grid-columns { bottom: -17px; font-size: 8px; }
  .position-coordinates { flex: 0 0 auto; width: 100%; margin: 4px 0 0; font-size: 8px; gap: 6px; }
  .position-coordinates span:last-child { text-align: right; }
  .map-legend { display: none; }
  .compass-arrow { width: 32px; height: 32px; font-size: 9px; }
  .candidate-point { width: 34px; height: 34px; font-size: 11px; }
  .marker-label { font-size: 7px; }
  .submit-row, .match-layout + .submit-row { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; padding: 5px 0 0; max-width: none; border-top: 1px solid #dbe0d0; }
  .submit-row p, .match-layout + .submit-row p { order: 0; font-size: 10px; line-height: 1.2; margin: 0; text-align: center; min-height: 12px; color: #657451; }
  .submit-row .button-primary, .match-layout + .submit-row .button-primary { width: 100%; padding: 10px 14px; min-height: 44px; font-size: 13px; margin-bottom: 3px; }
  .match-layout { grid-template-rows: minmax(105px, .34fr) minmax(0, .66fr); }
  .match-layout .view-panel .game-view { height: calc(100% - 36px); }
  .angle-controls { margin: 4px 0 0; gap: 8px; }
  .angle-button { min-height: 30px; min-width: 54px; padding: 4px 13px; border-radius: 8px; }
  .match-layout .map-panel > .panel-label { height: 24px; min-height: 24px; margin-bottom: 5px; }
  .match-layout .panel-label > span { display: none; }
  .match-options { flex: 0 0 auto; width: min(100cqw, calc(100cqh - 31px)); aspect-ratio: 1; gap: 6px; }
  .match-option-frame { min-height: 0; }
  .match-option-frame .match-option { height: 100%; border-radius: 9px; }
  .match-option img { height: 100%; width: 100%; aspect-ratio: auto; }
  .option-letter { bottom: 5px; left: 5px; width: 22px; height: 22px; }
  .option-zoom { width: 30px; height: 30px; bottom: 3px; right: 3px; }
  .selection-status { display: none; }

  .has-result .game-heading h1 { display: none; }
  .has-result .game-layout { grid-template-rows: minmax(75px, .32fr) minmax(0, .68fr); }
  .has-result .match-layout { grid-template-rows: minmax(95px, .34fr) minmax(0, .66fr); }
  .result-card { flex: 0 0 auto; border-radius: 12px; padding: 10px 12px; margin: 0; }
  .result-top { gap: 9px; }
  .round-medal { width: 37px; height: 37px; border-width: 2px; }
  .round-medal svg { width: 21px; height: 21px; }
  .result-card .eyebrow { font-size: 7px; letter-spacing: .7px; }
  .result-card h2 { font: 650 15px/1.2 var(--sans); letter-spacing: -.3px; margin: 3px 0; }
  .result-card p { font-size: 9px; margin: 2px 0 0; }
  .play-screen[data-mode="easy"] .result-copy p, .play-screen[data-mode="hard"] .result-copy p { display: none; }
  .score-value { font: 650 25px/1 var(--sans); }
  .score-value span { font-size: 8px; }
  .result-details { gap: 16px; margin: 6px 0; padding: 5px 0; }
  .result-details strong { font-size: 11px; }
  .result-details span { font-size: 8px; }
  .rank-reward { margin: 5px 0 0; }
  .result-actions { margin-top: 7px; gap: 8px; }
  .result-actions .button-primary { flex: 1; font-size: 11px; gap: 10px; padding: 8px 10px; }
  .result-actions .button-secondary { min-height: 44px; font-size: 10px; padding: 8px 12px; }
  .result-card .completion-banner { display: none; }
  .completion-banner span { font-size: 8px; }
  .completion-banner .completion-badge { font-size: 20px; }
  .result-card .daily-return { display: none; }
  #toast { bottom: max(82px, calc(env(safe-area-inset-bottom) + 82px)); width: max-content; max-width: calc(100vw - 32px); font-size: 11px; padding: 9px 13px; text-align: center; }
  #zoom-dialog { padding: 16px 21px; border-radius: 14px; }
  #zoom-content .map-board { max-width: min(100%, calc(100dvh - 210px)); margin: auto; }
  #zoom-content .grid-frame { max-width: min(100%, calc(100dvh - 210px)); margin-left: auto; margin-right: auto; }
  #zoom-content .with-grid { width: calc(100% - 18px); }
  .zoom-heading { margin-bottom: 12px; }
  .zoom-heading h2 { font-size: 19px; }
  .zoom-instruction { margin: 20px 0 12px; font-size: 10px; }
}

@media (max-width: 600px) and (max-height: 700px) {
  .home-screen { gap: 6px; min-height: 0; padding-top: 7px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .intro h1 { font-size: 27px; }
  .landscape-card { min-height: 75px; }
  .mode-card { padding: 7px 10px 6px; }
  .mode-top { margin-bottom: 2px; }
  .mode-icon svg { width: 16px; height: 16px; }
  .mode-card p { font-size: 9px; margin-bottom: 3px; }
  .mode-card h3 { font-size: 12px; }
  .mode-bottom { padding-top: 3px; }
  .home-screen .trail-hud { padding: 6px 9px; }
  .home-screen .trail-goal > span:last-child { display: none; }
  .home-launch { min-height: 46px; padding: 6px 13px; }
  .play-screen { min-height: 0; gap: 5px; padding-top: 4px; }
  .game-heading h1 { font-size: 18px; margin-bottom: 5px; }
  .game-heading .trail-hud { padding: 5px 9px; }
  .game-layout { grid-template-rows: minmax(75px, .29fr) minmax(0, .71fr); gap: 5px; }
  .has-result .game-layout { grid-template-rows: minmax(65px, .29fr) minmax(0, .71fr); }
  .has-result .completion-banner span:not(.completion-badge) { display: none; }
}
@media (max-width: 600px) and (orientation: landscape) {
  .play-screen { height: auto; min-height: 570px; }
  .game-layout, .match-layout { flex-basis: 360px; }
  .home-screen { height: auto; min-height: 640px; }
}
@media (prefers-reduced-motion: reduce) { .trail-meter i, .button-primary { transition: none; } .round-medal { animation: none !important; } }

.brand-wordmark { display: block; width: 248px; height: auto; filter: drop-shadow(0 0 0 #28523f) drop-shadow(0 0 0 #28523f); }
@media (max-width: 600px) { .brand-wordmark { width: 150px; height: 36px; object-fit: contain; filter: none; } }
@media (max-width: 350px) { .brand-wordmark { width: 135px; } }

/* Make the whole terrain photo the existing zoom button on touch screens. */
.home-view-zoom { display: none; }
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
  .zoom-view-button { display: block; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; font-size: 0; z-index: 2; cursor: zoom-in; touch-action: manipulation; }
  .zoom-view-button:hover { background: transparent; }
  .zoom-view-button::after { content: '⤢'; position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffffff80; border-radius: 9px; background: #f7f6eff0; font-size: 21px; }
}