/* Phone-first constraints. Keep scrolling and pinch zoom available. */
:root { --safe-left:env(safe-area-inset-left,0px); --safe-right:env(safe-area-inset-right,0px); }
.app { padding-left:max(16px,var(--safe-left));padding-right:max(16px,var(--safe-right)); }
.back-btn { left:max(12px,var(--safe-left)); }
.mute-btn { right:max(12px,var(--safe-right)); }
.help-btn { right:calc(max(12px,var(--safe-right)) + 56px); }
button { touch-action:manipulation; }
input,select,textarea { font-size:max(16px,1em); }
.choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choices:has(.choice-btn:nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.choice-btn { min-width:0; }
.choice-btn.choice-compare { font-size:clamp(.95rem,3.5vw,1.15rem);padding:10px 3px;overflow-wrap:normal;white-space:normal; }
.coach-overlay,.help-overlay { padding:calc(16px + var(--safe-top)) max(16px,var(--safe-right)) calc(16px + var(--safe-bottom)) max(16px,var(--safe-left)); }
.coach-card,.help-card { max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); }
@media(max-width:599px) {
 .game-screen,.problem-stage { min-width:0;max-width:100%; }
 .pattern-row { flex-wrap:wrap; }
 .choices:has(.choice-compare) { gap:8px; }
 .learn-tools > div { gap:8px; }
 .learn-tools button { min-height:48px; }
 #home-game-grid { width:100%; }
}
@media(pointer:coarse) { .arcade-navigation button { min-width:48px;min-height:48px; } }
/* The header already shows progress; free this space for answers on short phones. */
@media(max-height:600px) { .game-screen > .journey { display:none!important; } }

#selected-game-btn { width:100%;min-height:52px;margin-top:14px;padding:12px 16px;font-size:1rem;white-space:normal; }
.track-btn[aria-pressed="true"] { border-color:#267044;background:#d9efdc;box-shadow:0 0 0 2px #267044; }

/* Keep continuous scenery motion out of the game render loop on phones. */
@media (max-width:799px), (pointer:coarse) {
 body:has(#game-screen:not(.hidden)) .cloud, body:has(#game-screen:not(.hidden)) .bird { animation-play-state:paused; }
 .game-screen,.problem-stage { animation-duration:.16s; }
}