:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html, body { overscroll-behavior: none; }
#game { height: 100%; height: 100dvh; }
#mountain { touch-action: none; }
button { touch-action: manipulation; }
.touch-controls, .touch-tricks { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch-controls button, .touch-tricks button { -webkit-appearance: none; appearance: none; border-radius: 0; }
.touch-controls .pressed { background: #476c4a; border-color: var(--lime); color: white; box-shadow: inset 0 2px 8px #0004; }
.touch-tricks small { display: none; }
.touch-controls button:disabled { opacity: .7; cursor: default; }
.touch-controls .landing-action { background: #d2f775; border-color: #f0ffd0; color: #172b21; }
.yeti-warning b { font-weight: normal; }
.yeti-warning.avalanche-alert { border-color: #dcefff; color: #edf7ff; background: #21394eea; }
.yeti-warning.avalanche-alert > span { background: #dcefff; }
body.airborne .yeti-warning.avalanche-alert { display: block; }
.tilt-setup { margin: 10px 0; }
.tilt-setup p, .dialog .dialog-tilt-status { font-size: 11px; line-height: 1.45; color: #c6d9e7; margin: 0 0 7px; }
.steering-mode { background: transparent; color: #d8efaa; font: inherit; font-size: 10px; border: 1px solid #748b9d; min-height: 44px; padding: 6px 12px; }
.primary-button:disabled { opacity: .65; cursor: wait; }
.track-legend { display: flex; gap: 9px; margin-top: 9px; font-size: 8px; letter-spacing: .3px; }
.track-legend span { display: inline-flex; align-items: center; gap: 4px; }
.track-legend span::before { content: ''; width: 12px; height: 3px; background: currentColor; box-shadow: 0 0 5px currentColor; }
.track-legend span:nth-child(1) { color: #ff6655; }
.track-legend span:nth-child(2) { color: #ffd34e; }
.track-legend span:nth-child(3) { color: #71ef58; }
.timing-panel:not([data-mode="carve"]) .track-legend { display: none; }
.touch-ui .brand-panel { left: calc(var(--safe-left) + 13px); top: calc(var(--safe-top) + 13px); }
.touch-ui .score-panel { right: calc(var(--safe-right) + 13px); top: calc(var(--safe-top) + 13px); }
.touch-ui .start-panel { left: calc(var(--safe-left) + 13px); bottom: calc(var(--safe-bottom) + 80px); top: auto; max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - 250px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.touch-ui .start-hint, .touch-ui .controls, .touch-ui .mountain-note { display: none; }
.touch-ui .new-moves { font-size: 11px; }
.touch-ui .bottom-ui { left: calc(var(--safe-left) + 13px); right: calc(var(--safe-right) + 13px); bottom: calc(var(--safe-bottom) + 13px); }
.touch-ui .audio-panel { min-height: 44px; }
.touch-ui .weather { top: calc(var(--safe-top) + 145px); }
.touch-ui .minimap { right: calc(var(--safe-right) + 13px); bottom: calc(var(--safe-bottom) + 84px); }
.touch-ui.playing .minimap { display: none; }
.touch-ui .trail-badge { left: calc(var(--safe-left) + 13px); top: calc(var(--safe-top) + 145px); min-height: 52px; padding: 5px 7px 5px 12px; }
.touch-ui .trail-badge button { min-width: 44px; min-height: 44px; font-size: 19px; margin-left: 3px; }
.touch-ui.playing .touch-controls {
  position: absolute; display: grid; grid-template-columns: 1.35fr 1fr 1.55fr; gap: 8px;
  left: calc(var(--safe-left) + 12px); right: calc(var(--safe-right) + 12px); bottom: calc(var(--safe-bottom) + 12px);
  z-index: 5; transform: none;
}
.touch-ui .touch-controls button { width: 100%; height: 64px; min-width: 44px; min-height: 44px; margin: 0; font-size: 26px; border: 2px solid #a4b8c6; background-color: #152533f0; box-shadow: 2px 3px 0 #29445744; }
.touch-ui .touch-controls button.pressed { background-color: #476c4a; border-color: var(--lime); }
.touch-ui .touch-controls #touch-brake, .touch-ui .touch-controls #touch-jump { font-size: 13px; font-weight: bold; }
.touch-ui .touch-controls #touch-center { font-size: 11px; display: flex; flex-direction: column; justify-content: center; gap: 7px; align-items: center; }
.touch-ui #touch-center small { font-size: 8px; color: #adc6d7; }
.touch-ui .touch-controls #touch-jump { color: var(--lime); }
.touch-ui .touch-controls #touch-jump.landing-action { background-color: #d2f775; color: #172b21; border-color: #f0ffd0; }
.touch-ui .air-guide {
  left: calc(var(--safe-left) + 12px); right: calc(var(--safe-right) + 12px); bottom: calc(var(--safe-bottom) + 88px); top: auto;
  width: auto; padding: 10px; transform: none;
}
.touch-ui .air-heading { margin-bottom: 8px; font-size: 10px; }
.touch-ui .air-heading b { font-size: 10px; }
.touch-ui .combo-guide, .touch-ui .combo-input { display: none; }
.touch-ui .touch-tricks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.touch-ui .touch-tricks button { width: 100%; min-width: 44px; height: 54px; min-height: 44px; margin: 0; padding: 4px 2px; background: #243747; color: #dff79a; border: 1px solid #879da9; box-shadow: 0 2px 0 #050d14; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.touch-ui .touch-tricks b { font-size: 20px; line-height: 1; }
.touch-ui .touch-tricks small { display: block; font-size: 9px; line-height: 1.2; color: #bdcfdc; }
.touch-ui .touch-tricks button:active { background: #476c4a; }
.touch-ui .timing-panel {
  left: calc(var(--safe-left) + 12px); right: auto; bottom: calc(var(--safe-bottom) + 92px); top: auto; transform: none;
  width: calc(100% - var(--safe-left) - var(--safe-right) - 116px); max-width: 292px;
  padding: 11px 12px; grid-template-columns: 1fr 38px; gap: 9px;
}
.touch-ui.airborne .timing-panel { bottom: calc(var(--safe-bottom) + 198px); }
.touch-ui .meter-title { font-size: 10px; letter-spacing: .5px; margin-bottom: 6px; }
.touch-ui .timing-copy > strong { font-size: 13px; line-height: 1.3; }
.touch-ui .timing-copy > p { display: none; }
.touch-ui .meter-feedback { font-size: 10px; min-height: 16px; margin-top: 8px; }
.touch-ui .boost-line { font-size: 9px; padding-top: 7px; margin-top: 7px; }
.touch-ui .boost-line > span:first-child { font-size: 11px; }
.touch-ui .meter-column { font-size: 7px; gap: 6px; }
.touch-ui .timing-track { width: 22px; height: 72px; }
.touch-ui .meter-green-label { font-size: 7px; }
.touch-ui.playing .bottom-ui { left: auto; right: calc(var(--safe-right) + 12px); bottom: calc(var(--safe-bottom) + 92px); }
.touch-ui.airborne .bottom-ui { bottom: calc(var(--safe-bottom) + 198px); }
.touch-ui.playing .audio-panel { width: 80px; height: 44px; min-height: 44px; justify-content: center; padding: 6px; text-align: center; }
.touch-ui.playing .audio-panel .equalizer, .touch-ui.playing .audio-icon, .touch-ui.playing .audio-panel small { display: none; }
.touch-ui.playing .audio-panel b { font-size: 8px; line-height: 1.4; }
.touch-ui .dialog-wrap { padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 16px); }
.touch-ui .dialog { max-height: 100%; overflow-y: auto; touch-action: pan-y; width: 100%; max-width: 370px; }
.touch-ui .secondary-button { min-height: 44px; padding: 10px; }
.touch-ui .loading { bottom: calc(var(--safe-bottom) + 68px); }
@media (max-width: 600px) {
  .touch-ui .brand-panel { width: min(211px, calc(100% - var(--safe-left) - var(--safe-right) - 152px)); }
  .touch-ui .brand-panel h1 { font-size: clamp(23px, 7.7vw, 32px); gap: 5px; }
  .touch-ui .brand-panel h1 b { font-size: clamp(22px, 7.2vw, 29px); }
  .touch-ui .score-panel { width: 120px; }
  .touch-ui .brand-top { letter-spacing: 0; }
  .touch-ui .brand-bottom { font-size: 6px; }
  .touch-ui .weather { left: calc(var(--safe-left) + 116px); top: calc(var(--safe-top) + 134px); }
  .touch-ui.playing .brand-panel { width: min(190px, calc(100% - 153px)); padding: 10px; }
  .touch-ui.playing .brand-top, .touch-ui.playing .brand-bottom { display: none; }
  .touch-ui.playing .brand-panel h1 { margin: 5px 0; }
  .touch-ui.playing .weather { display: none; }
  .touch-ui.playing .trail-badge { top: calc(var(--safe-top) + 82px); font-size: 9px; gap: 7px; }
  .touch-ui .start-panel { width: min(270px, calc(100% - var(--safe-left) - var(--safe-right) - 26px)); max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - 244px); }
  .touch-ui .trail { min-height: 54px; }
  .touch-ui .trail-copy b { font-size: 14px; }
  .touch-ui .trail-copy small { font-size: 11px; }
  .touch-ui.playing .trick { top: calc(43% + 10px); left: 50%; width: 82%; font-size: 13px; }
}
@media (min-width: 601px) {
  .touch-ui.playing .touch-controls { grid-template-columns: 110px 84px 1fr; }
  .touch-ui .touch-controls #touch-jump { width: 120px; justify-self: end; }
  .touch-ui .air-guide { left: 50%; right: auto; width: 330px; transform: translateX(-50%); }
  .touch-ui .timing-panel, .touch-ui.airborne .timing-panel { bottom: calc(var(--safe-bottom) + 92px); }
  .touch-ui.airborne .bottom-ui { bottom: calc(var(--safe-bottom) + 204px); }
  .touch-ui .start-panel { max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - 290px); }
}
/* A short iPhone in landscape keeps thumbs below the slope and the meter beside it. */
@media (orientation: landscape) and (max-height: 600px) {
  .touch-ui .brand-panel { width: 185px; padding: 9px 11px; }
  .touch-ui .brand-top, .touch-ui .brand-bottom, .touch-ui .weather { display: none; }
  .touch-ui .brand-panel h1 { font-size: 29px; margin: 5px 0; gap: 6px; }
  .touch-ui .brand-panel h1 b { font-size: 27px; }
  .touch-ui .score-panel { width: 151px; padding: 10px 12px; }
  .touch-ui .score-title, .touch-ui .score-main > span, .touch-ui .style-row, .touch-ui .best-row { display: none; }
  .touch-ui .score-main { display: block; margin-bottom: 8px; }
  .touch-ui .score-main strong { font-size: 23px; }
  .touch-ui .stat-row { display: inline-flex; width: 100%; margin-top: 3px; font-size: 9px; }
  .touch-ui .stat-row b { font-size: 11px; }
  .touch-ui .stat-row:nth-of-type(3) { display: none; }
  .touch-ui .trail-badge, .touch-ui.playing .trail-badge { top: calc(var(--safe-top) + 79px); font-size: 9px; }
  .touch-ui .start-panel { top: calc(var(--safe-top) + 90px); bottom: auto; width: 285px; max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - 106px); padding: 12px; }
  .touch-ui .start-panel .section-heading { display: none; }
  .touch-ui .trail-list { gap: 2px; }
  .touch-ui .trail { min-height: 44px; padding: 7px; }
  .touch-ui .trail-copy { gap: 2px; }
  .touch-ui .trail-copy b { font-size: 12px; }
  .touch-ui .trail-copy small { font-size: 10px; }
  .touch-ui .new-moves { font-size: 10px; }
  .touch-ui.playing .touch-controls { grid-template-columns: 82px 48px 1fr; gap: 6px; }
  .touch-ui .touch-controls button { height: 52px; }
  .touch-ui .touch-controls #touch-brake { font-size: 10px; }
  .touch-ui .touch-controls #touch-jump { width: 80px; justify-self: end; font-size: 12px; }
  .touch-ui .air-guide { left: calc(var(--safe-left) + 156px); right: calc(var(--safe-right) + 104px); top: auto; bottom: calc(var(--safe-bottom) + 12px); transform: none; width: auto; max-width: 290px; margin: 0 auto; padding: 8px; }
  .touch-ui .air-heading { font-size: 8px; margin-bottom: 6px; }
  .touch-ui .air-heading b { font-size: 8px; }
  .touch-ui .touch-tricks { gap: 6px; }
  .touch-ui .touch-tricks button { height: 48px; min-width: 44px; }
  .touch-ui .touch-tricks small { font-size: 7px; }
  .touch-ui .timing-panel, .touch-ui.airborne .timing-panel { left: auto; right: calc(var(--safe-right) + 12px); bottom: calc(var(--safe-bottom) + 79px); width: 202px; padding: 9px; gap: 7px; }
  .touch-ui .timing-copy > strong { font-size: 11px; }
  .touch-ui .meter-title { font-size: 9px; }
  .touch-ui .meter-feedback { font-size: 9px; min-height: 13px; margin-top: 5px; }
  .touch-ui .track-legend { font-size: 7px; gap: 6px; }
  .touch-ui .track-legend span::before { width: 8px; }
  .touch-ui .boost-line { padding-top: 5px; margin-top: 5px; font-size: 8px; }
  .touch-ui .timing-track { height: 62px; }
  .touch-ui .bottom-ui, .touch-ui.playing .bottom-ui, .touch-ui.airborne .bottom-ui { bottom: calc(var(--safe-bottom) + 79px); left: calc(var(--safe-left) + 12px); right: auto; }
  .touch-ui .audio-panel { width: 80px; height: 44px; padding: 6px; }
  .touch-ui .audio-panel .equalizer, .touch-ui .audio-panel small, .touch-ui .audio-icon { display: none; }
  .touch-ui .audio-panel b { font-size: 8px; }
  .touch-ui:not(.playing) .bottom-ui { left: auto; right: calc(var(--safe-right) + 12px); bottom: calc(var(--safe-bottom) + 12px); }
  .touch-ui .minimap { display: none; }
  .touch-ui.playing .trick { top: 49%; left: 48%; width: 33%; font-size: 11px; }
  .touch-ui .dialog { padding: 20px; }
  .touch-ui .dialog h2 { font-size: 35px; margin: 8px 0; }
  .touch-ui .dialog p { margin-bottom: 12px; }
  .touch-ui .secondary-button { margin-top: 10px; }
}

/* Keep the start action visible on short screens; only the trail choices scroll. */
.touch-ui .start-panel { display: flex; flex-direction: column; overflow: hidden; }
.touch-ui .start-panel .trail-list { min-height: 0; overflow-y: auto; flex: 1 1 auto; touch-action: pan-y; overscroll-behavior: contain; }
.touch-ui .start-panel .section-heading, .touch-ui .start-panel .primary-button, .touch-ui .start-panel .new-moves, .touch-ui .tilt-setup { flex-shrink: 0; }
/* Extra setup instructions must remain reachable on compact landscape screens. */
@media (max-height: 500px) {
  .touch-ui .start-panel { display: block; overflow-y: auto; }
  .touch-ui .start-panel .trail-list { overflow: visible; }
}