/* Compact phone UI; the game remains playable in both orientations. */
html,body{height:100%;height:100dvh}
#overlay{padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));place-items:center}
.panel{margin:auto;max-height:calc(100dvh - 24px);overscroll-behavior:contain}
#orientationHint{display:none}
@media(max-width:900px),(pointer:coarse){
 #hud{padding:10px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));gap:8px;background:none}
 .brand{font-size:15px;letter-spacing:0;max-width:42%}
 #petLabel,#modeLabel,#stageLabel{display:none}
 .right{gap:8px}.distance{font-size:21px;line-height:1.1}.distance small{font-size:12px}
 .distance .sub{font-size:11px;line-height:1.2;margin-top:4px;letter-spacing:0}
 #pause{width:42px;min-height:42px;height:42px;flex-shrink:0}
 .panel{padding:16px;border-radius:20px;max-width:560px}
 h1{font-size:27px;margin:0 0 10px;letter-spacing:-.5px}
 #description{font-size:14px;line-height:1.35;margin-bottom:12px}
 .language-control{font-size:12px;margin-bottom:8px}.language-control select{padding:5px}
 .settings{margin:0 0 12px;gap:6px}.settings button{min-height:36px;font-size:12px;padding:6px 10px}
 .modes{margin:12px 0;gap:8px}.mode{padding:10px 8px;font-size:14px}.mode small{font-size:11px;line-height:1.25;margin-top:4px}
 #chickenPreview{width:100px;height:62px}.help{font-size:11px;line-height:1.3;margin-top:10px}
 .primary{font-size:16px;padding:10px 18px;min-height:44px;min-width:160px}
 .secondary{font-size:12px;padding:8px 10px;min-height:40px}.actions{gap:8px;margin-top:10px}
 #overlay[data-screen=over] .language-control,#overlay[data-screen=over] .settings,#overlay[data-screen=paused] .language-control{display:none}
 .stats{gap:6px 12px;margin:12px 0}.stat{padding:8px 4px}.stat strong{font-size:23px}.stat span{font-size:11px}
 #overlay[data-screen=over] .actions{display:grid;grid-template-columns:1fr 1fr}
 #overlay[data-screen=over] #copy{grid-column:1/-1}
 #overlay[data-screen=over] #description{font-size:13px}
}
@media(pointer:coarse) and (orientation:portrait){#overlay[data-screen=ready] #orientationHint{display:block;font-size:12px;line-height:1.3;color:#465052;margin:10px 0 0}}
@media(orientation:landscape) and (max-height:500px){
 #hud{padding-top:6px}.brand{font-size:14px}.distance{font-size:19px}.distance .sub{display:inline-block;margin-left:8px;font-size:11px}
 #overlay{padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
 .panel{width:min(760px,100%);max-width:760px;max-height:calc(100dvh - 16px);padding:12px 18px}
 #overlay[data-screen=ready] .panel,#overlay[data-screen=over] .panel{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;align-items:center}
 #overlay[data-screen=ready] .language-control{grid-column:1;grid-row:1;margin:0;justify-content:flex-start}
 #overlay[data-screen=ready] .settings{grid-column:2;grid-row:1;margin:0}
 #overlay[data-screen=ready] h1{grid-column:1;grid-row:2;margin:0;font-size:25px}
 #overlay[data-screen=ready] #description{grid-column:1;grid-row:3;margin:0;font-size:12px}
 #overlay[data-screen=ready] #chickenPreview{grid-column:1;grid-row:4;width:90px;height:56px}
 #overlay[data-screen=ready] .modes{grid-column:2;grid-row:2/4;margin:0}
 #overlay[data-screen=ready] #start{grid-column:2;grid-row:4}
 #overlay[data-screen=ready] #help{grid-column:1/-1;margin:0}
 #overlay[data-screen=ready] .actions{display:none}
 #overlay[data-screen=over] h1{grid-column:1;grid-row:1;margin:0;font-size:25px}
 #overlay[data-screen=over] #description{grid-column:1;grid-row:2;margin:0}
 #overlay[data-screen=over] .stats{grid-column:2;grid-row:1/4;margin:0}
 #overlay[data-screen=over] #start{grid-column:1;grid-row:3}
 #overlay[data-screen=over] .actions{grid-column:1/-1;grid-row:4;display:flex;margin:0}
 #overlay[data-screen=paused] .panel{max-width:480px}
 #overlay[data-screen=paused] .settings{margin-bottom:8px}
 #overlay[data-screen=paused] h1{font-size:25px;margin-bottom:6px}
 #overlay[data-screen=paused] #description{margin-bottom:10px}
}