/* Classic gameplay only: keep the park, duck and touch targets in view. */
#game #hud .classic-status{grid-template-columns:1.2fr .9fr 1.1fr;width:min(450px,calc(100% - 90px))}
#game #hud .classic-status .banked-panel{display:none}
#game #hud .classic-status strong{font-variant-numeric:tabular-nums}
#game #hud .classic-status>div[data-full=true]{background:#ffdb76;border-radius:10px}
#game #hud .classic-status>div[data-full=true] strong{color:#59380d}
#game #hud #mission-card[data-compact=true]{padding-top:8px;padding-bottom:8px}
#game #hud #mission-card[data-compact=true] #mission-kicker,#game #hud #mission-card[data-compact=true] #mission-copy{display:none}
#game #hud #mission-card[data-compact=true] .classic-track{height:3px;margin-top:5px}
#game #hud #combo-celebration{font-size:15px;line-height:1.35;max-width:100%;overflow-wrap:anywhere;box-shadow:0 3px 10px #26423114}
#game #hud #combo-celebration[data-kind]{font-size:15px;padding:10px 12px}
#game #hud #combo-card{box-shadow:none}
#game #hud #power-perk{max-width:100%;font-size:12px!important}
.classic-camera-option{display:flex;gap:12px;align-items:center;min-height:44px;padding:10px 0;font-size:15px;line-height:1.45}
.classic-camera-option input{width:22px;height:22px;flex:none;accent-color:#25705c}
#results .result-pose-wrap{display:flex;align-items:center;justify-content:center;gap:15px;height:85px;margin:0 auto 5px}
#results .result-pose-wrap .modal-portrait{width:78px;height:78px;margin:0;display:block;transform:rotate(-9deg);filter:drop-shadow(0 4px 0 #254a3920);animation:classic-victory-bow .6s ease-out both}
#results .result-laurel{color:#c48a23;font-size:28px}
#results .result-laurel:last-child{font-size:20px;align-self:flex-start;margin-top:18px}
#results .result-score{margin:8px 0}
#results .results-card h2{margin:5px 0 12px}
#results .result-moment-label{display:block;font:800 11px/1.3 Arial,sans-serif;letter-spacing:.07em;color:var(--ui-muted,#52695c);margin:12px 0 4px}
#results #award-reason{margin:0 0 8px;font-size:15px!important}
#results #best-comparison{font-size:14px;font-weight:700;line-height:1.45;margin:10px 0}
#results #again{min-height:52px;width:100%;margin:5px 0 12px;box-shadow:0 4px 0 #92682940}
#results #result-chaos-stats,#results #result-challenges,#results #record{font-size:12px;line-height:1.5}
#results #result-upgrade{margin-top:8px}
@keyframes classic-victory-bow{from{transform:translateY(8px) rotate(6deg)}60%{transform:translateY(-3px) rotate(-12deg)}to{transform:rotate(-9deg)}}
@media(max-width:700px){
 #game #hud .classic-status{width:auto;grid-template-columns:1.15fr .85fr 1.1fr}
 #game #hud .classic-status>div{padding:0 8px}
 #game #hud #combo-celebration,#game #hud #combo-celebration[data-kind]{font-size:13px;padding:8px 9px}
 #game #hud .classic-missions{width:min(280px,calc(100% - 114px))}
 #game #hud #mission-card[data-compact=true] #mission-title{font-size:13px;line-height:1.25}
 #results .result-pose-wrap{height:64px}#results .result-pose-wrap .modal-portrait{width:62px;height:62px}
 #results .results-card{padding:18px}#results .result-score>strong{font-size:44px}
}
@media(max-height:530px) and (orientation:landscape){
 #game #hud .classic-status{width:min(425px,calc(100% - 84px));grid-template-columns:1.2fr .8fr 1.1fr}
 #game #hud .classic-status .banked-panel{display:none}
 #game #hud .classic-missions{width:min(245px,32vw)}
 #game #hud #combo-celebration,#game #hud #combo-celebration[data-kind]{font-size:12px;padding:7px 8px}
 #results .result-pose-wrap{height:48px}#results .result-pose-wrap .modal-portrait{width:46px;height:46px}
 #results .result-pose-wrap .result-laurel{font-size:18px}#results .results-card h2{font-size:23px}
 #results #again{min-height:46px}
}
@media(prefers-reduced-motion:reduce){
 #results .result-pose-wrap .modal-portrait{animation:none;transform:none}
 #game #hud *,#game #popups *{animation:none!important;transition:none!important}
}

/* Phone-only Classic HUD: leave the desktop layout and simulation untouched.
   Use device-layout rather than viewport width: Android desktop-site mode can
   report a 980px viewport on a phone. One unit follows its physical UI scale. */
body[data-classic-phone=true] #game #hud{
 --cp:var(--classic-phone-unit,1px);
 --hud-gap:calc(8 * var(--cp));
 --hud-top:calc(6 * var(--cp) + var(--safe-top,env(safe-area-inset-top)));
 --hud-left:calc(8 * var(--cp) + var(--safe-left,env(safe-area-inset-left)));
 --hud-right:calc(8 * var(--cp) + var(--safe-right,env(safe-area-inset-right)));
 --hud-bottom:calc(12 * var(--cp) + var(--safe-bottom,env(safe-area-inset-bottom)));
}
body[data-classic-phone=true].playing #game #pause{
 top:calc(6 * var(--classic-phone-unit,1px) + var(--safe-top,env(safe-area-inset-top)));
 right:calc(8 * var(--classic-phone-unit,1px) + var(--safe-right,env(safe-area-inset-right)));
 width:max(44px,calc(44 * var(--classic-phone-unit,1px)));height:max(44px,calc(44 * var(--classic-phone-unit,1px)));min-width:44px;
 padding:calc(11 * var(--classic-phone-unit,1px));border-radius:calc(12 * var(--classic-phone-unit,1px));
}
body[data-classic-phone=true] #game #hud .classic-status{
 right:calc(var(--hud-right) + max(44px,calc(44 * var(--cp))) + calc(6 * var(--cp)));width:auto;
 grid-template-columns:1.2fr .8fr 1.05fr;padding:calc(5 * var(--cp)) 0;border-radius:calc(11 * var(--cp));min-height:calc(42 * var(--cp));
}
body[data-classic-phone=true] #game #hud .classic-status>div{padding:0 calc(8 * var(--cp));gap:calc(2 * var(--cp))}
body[data-classic-phone=true] #game #hud .classic-status .banked-panel{display:none}
body[data-classic-phone=true] #game #hud .stat-label{font-size:max(11px,calc(11 * var(--cp)));line-height:1.1;letter-spacing:.03em}
body[data-classic-phone=true] #game #hud .classic-status strong{font-size:max(16px,calc(17 * var(--cp)));line-height:1.1;letter-spacing:-.3px}
body[data-classic-phone=true] #game #hud .classic-missions{top:calc(var(--hud-top) + max(44px,calc(44 * var(--cp))) + calc(5 * var(--cp)));width:calc(100% - var(--hud-left) - var(--hud-right) - calc(72 * var(--cp)));max-width:none;gap:calc(4 * var(--cp))}
body[data-classic-phone=true] #game #hud #mission-card,
body[data-classic-phone=true] #game #hud #mission-card[data-compact=true],
body[data-classic-phone=true] #game #hud #combo-celebration,
body[data-classic-phone=true] #game #hud #combo-celebration[data-kind]{padding:calc(6 * var(--cp)) calc(8 * var(--cp));font-size:max(11px,calc(11 * var(--cp)));line-height:1.25;border-radius:calc(9 * var(--cp));box-shadow:0 2px 8px #143b3010}
body[data-classic-phone=true] #game #hud #mission-kicker{display:none}
body[data-classic-phone=true] #game #hud #mission-title,
body[data-classic-phone=true] #game #hud #mission-card[data-compact=true] #mission-title{font-size:max(11px,calc(11 * var(--cp)));line-height:1.25}
body[data-classic-phone=true] #game #hud #mission-copy{font-size:max(11px,calc(11 * var(--cp)));line-height:1.3;margin:calc(4 * var(--cp)) 0}
body[data-classic-phone=true] #game #hud #mission-card:not([data-kind=tutorial]) #mission-copy{display:none}
body[data-classic-phone=true] #game #hud #skip-guide{min-width:max(44px,calc(44 * var(--cp)));min-height:max(44px,calc(44 * var(--cp)));margin:calc(-5 * var(--cp)) calc(-7 * var(--cp)) calc(-4 * var(--cp)) calc(4 * var(--cp));font-size:max(11px,calc(11 * var(--cp)))}
body[data-classic-phone=true] #game #hud #combo-card{padding:calc(4 * var(--cp)) calc(8 * var(--cp));border-radius:calc(8 * var(--cp))}
body[data-classic-phone=true] #game #hud #combo{font-size:max(10px,calc(11 * var(--cp)));line-height:1.2;margin:0 0 calc(3 * var(--cp))}
body[data-classic-phone=true] #game #hud .nuisance{position:static;inset:auto;display:flex;align-items:center;gap:calc(6 * var(--cp));width:auto;padding:calc(4 * var(--cp)) calc(8 * var(--cp));border-radius:calc(8 * var(--cp))}
body[data-classic-phone=true] #game #hud #nuisance-label{font-size:max(10px,calc(11 * var(--cp)));line-height:1.2;white-space:nowrap;flex:1}
body[data-classic-phone=true] #game #hud .nuisance-track{width:calc(48 * var(--cp));height:calc(3 * var(--cp));flex:none;margin:0}
body[data-classic-phone=true] #game #hud .classic-navigation{left:auto;right:var(--hud-right);top:calc(var(--hud-top) + max(44px,calc(44 * var(--cp))) + calc(5 * var(--cp)));bottom:auto;gap:calc(4 * var(--cp));align-items:flex-end}
body[data-classic-phone=true] #game #hud .minimap-panel{display:block;width:calc(62 * var(--cp));height:calc(62 * var(--cp));padding:calc(3 * var(--cp));border-radius:calc(10 * var(--cp))}
body[data-classic-phone=true] #game #hud .minimap-panel canvas{width:100%;height:100%;border-radius:calc(7 * var(--cp))}
body[data-classic-phone=true] #game #hud .classic-directions{gap:calc(4 * var(--cp))}
body[data-classic-phone=true] #game #hud .nest-direction{padding:calc(4 * var(--cp));gap:calc(3 * var(--cp));border-radius:calc(8 * var(--cp))}
body[data-classic-phone=true] #game #hud .nest-direction>span{width:calc(19 * var(--cp));height:calc(19 * var(--cp));font-size:calc(18 * var(--cp))}
body[data-classic-phone=true] #game #hud .nest-direction strong{font-size:max(11px,calc(11 * var(--cp)));letter-spacing:0}
body[data-classic-phone=true] #game #hud :is(#nest-distance,#vip-distance){font-size:max(11px,calc(11 * var(--cp)));line-height:1.15;margin:calc(1 * var(--cp)) 0 0}
body[data-classic-phone=true] #game #hud .classic-bottom{grid-template-columns:max(88px,calc(96 * var(--cp))) minmax(0,1fr) max(158px,calc(158 * var(--cp)));gap:calc(7 * var(--cp));align-items:end}
body[data-classic-phone=true] #game #hud .joystick{grid-column:1;grid-row:1/3;align-self:end;width:max(88px,calc(96 * var(--cp)));height:max(88px,calc(96 * var(--cp)));border-width:calc(2 * var(--cp));background:#193f342b;box-shadow:0 0 0 calc(3 * var(--cp)) #193f3412;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body[data-classic-phone=true] #game #hud #stick{width:calc(36 * var(--cp));height:calc(36 * var(--cp));border-width:calc(2 * var(--cp))}
body[data-classic-phone=true] #game #hud .touch-actions{grid-column:3;grid-row:2;gap:calc(8 * var(--cp));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body[data-classic-phone=true] #game #hud .touch-actions button{width:max(48px,calc(52 * var(--cp)));min-width:max(48px,calc(52 * var(--cp)));height:max(48px,calc(52 * var(--cp)));min-height:48px;padding:calc(5 * var(--cp));border-radius:calc(14 * var(--cp));font-size:max(12px,calc(12 * var(--cp)));gap:calc(3 * var(--cp))}
body[data-classic-phone=true] #game #hud #quack-touch{width:max(68px,calc(76 * var(--cp)));min-width:max(68px,calc(76 * var(--cp)));height:max(68px,calc(76 * var(--cp)));min-height:68px;font-size:max(12px,calc(13 * var(--cp)));border-radius:calc(20 * var(--cp));box-shadow:0 calc(3 * var(--cp)) 0 #a18329}
body[data-classic-phone=true] #game #hud #quack-touch :is(.ui-vector,.ui-icon){width:calc(20 * var(--cp));height:calc(20 * var(--cp))}
body[data-classic-phone=true] #game #hud #dash-touch-state{font-size:max(11px,calc(11 * var(--cp)));line-height:1.1}
body[data-classic-phone=true] #game #hud .quack-panel,
body[data-classic-phone=true] #game #hud .quack-panel:has(#chaos-meter:not([hidden])){grid-column:3;grid-row:1;justify-self:stretch;width:auto;padding:calc(6 * var(--cp)) calc(8 * var(--cp));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(8 * var(--cp));row-gap:calc(3 * var(--cp));border-radius:calc(10 * var(--cp));box-shadow:none}
body[data-classic-phone=true] #game #hud #chaos-meter,
body[data-classic-phone=true] #game #hud #chaos-meter:not([hidden]){grid-column:1;grid-row:1/3;margin:0}
body[data-classic-phone=true] #game #hud #chaos-meter:not([hidden]) .chaos-heading,
body[data-classic-phone=true] #game #hud .chaos-heading,
body[data-classic-phone=true] #game #hud .quack-heading,
body[data-classic-phone=true] #game #hud .quack-heading strong,
body[data-classic-phone=true] #game #hud #chaos-meter:not([hidden])~.quack-heading,
body[data-classic-phone=true] #game #hud #chaos-meter:not([hidden])~.quack-heading strong{font-size:max(11px,calc(11 * var(--cp)));line-height:1.2;letter-spacing:0;gap:calc(3 * var(--cp))}
body[data-classic-phone=true] #game #hud .quack-heading{grid-column:2;grid-row:1}
body[data-classic-phone=true] #game #hud .energy-track,
body[data-classic-phone=true] #game #hud #chaos-meter:not([hidden])~.energy-track{grid-column:2;grid-row:2;height:calc(4 * var(--cp));margin:0}
body[data-classic-phone=true] #game #hud .chaos-track{height:calc(4 * var(--cp));margin-top:calc(3 * var(--cp))}
body[data-classic-phone=true] #game #hud .quack-panel:has(#chaos-meter[hidden]) :is(.quack-heading,.energy-track){grid-column:1/-1}
body[data-classic-phone=true] #game #hud .power-strip,
body[data-classic-phone=true] #game #hud #chaos-meter:not([hidden])~.power-strip{grid-column:1/-1;grid-row:3;display:flex;flex-wrap:wrap;gap:calc(3 * var(--cp))}
body[data-classic-phone=true] #game #hud .power-strip:not(:has(>span:not([hidden]))){display:none}
body[data-classic-phone=true] #game #hud .power-strip>span,
body[data-classic-phone=true] #game #hud #chaos-meter:not([hidden])~.power-strip>span{font-size:max(11px,calc(11 * var(--cp)));line-height:1.2;margin:0;padding:calc(2 * var(--cp));white-space:nowrap}
body[data-classic-phone=true] #game #hud #round-event,
body[data-classic-phone=true] #game #hud #chaos-meter:not([hidden])~#round-event{grid-column:1/-1;grid-row:4;font-size:max(11px,calc(11 * var(--cp)));line-height:1.2;margin:0;white-space:normal;overflow-wrap:anywhere}
body[data-classic-phone=true] #game #hud :is(.quack-caption,.play-help){display:none}
body[data-classic-phone=true] #game #hud :is(#sprint-touch,#quack-touch):focus-visible{outline:3px solid #193f34;outline-offset:3px}
/* Landscape is a shallow play field: a short top strip, two thumb corners and
   small meters beside the buttons, rather than a panel across the lower park. */
body[data-classic-phone=true][data-classic-layout=landscape] #game #hud .classic-status{right:auto;width:min(calc(294 * var(--cp)),calc(100% - var(--hud-left) - var(--hud-right) - calc(56 * var(--cp))));min-height:calc(38 * var(--cp));padding:calc(4 * var(--cp)) 0}
body[data-classic-phone=true][data-classic-layout=landscape] #game #hud .classic-missions{top:calc(var(--hud-top) + calc(44 * var(--cp)));width:min(calc(248 * var(--cp)),34%);max-width:none}
body[data-classic-phone=true][data-classic-layout=landscape] #game #hud .classic-navigation{top:calc(var(--hud-top) + max(44px,calc(44 * var(--cp))) + calc(5 * var(--cp)));flex-direction:row;align-items:flex-start}
body[data-classic-phone=true][data-classic-layout=landscape] #game #hud .minimap-panel{display:none}
body[data-classic-phone=true][data-classic-layout=landscape] #game #hud .classic-directions{flex-direction:row}
body[data-classic-phone=true][data-classic-layout=landscape] #game #hud .classic-bottom{grid-template-columns:max(88px,calc(88 * var(--cp))) minmax(0,1fr) max(158px,calc(158 * var(--cp)));gap:calc(6 * var(--cp))}
body[data-classic-phone=true][data-classic-layout=landscape] #game #hud .joystick{width:max(88px,calc(88 * var(--cp)));height:max(88px,calc(88 * var(--cp)));grid-row:1/3}
body[data-classic-phone=true][data-classic-layout=landscape] #game #hud #quack-touch{width:max(64px,calc(68 * var(--cp)));min-width:max(64px,calc(68 * var(--cp)));height:max(64px,calc(68 * var(--cp)));min-height:64px}
body[data-classic-phone=true][data-classic-layout=landscape] #game #hud .quack-panel,
body[data-classic-phone=true][data-classic-layout=landscape] #game #hud .quack-panel:has(#chaos-meter:not([hidden])){grid-column:3;grid-row:1;padding:calc(4 * var(--cp)) calc(7 * var(--cp))}
/* Keep the compact phone placement authoritative when older short-screen
   :has() rules become active during a chase or a full Chaos HUD. */
body[data-classic-phone=true] #game #hud .classic-missions:has(~.classic-bottom #chaos-meter:not([hidden])) .nuisance{position:static;inset:auto;width:auto}
body[data-classic-phone=true] #game #hud #chaos-meter:not([hidden]) .chaos-heading{font-size:max(11px,calc(11 * var(--cp)));line-height:1.2}
body[data-classic-phone=true] #game #hud #chaos-meter:not([hidden]) .chaos-track{height:calc(4 * var(--cp));margin-top:calc(3 * var(--cp))}
/* One optional goal at a time. The whole existing card is the touch target. */
#game #hud #mission-card[data-choose=true]{pointer-events:auto;cursor:pointer;min-height:44px}
#game #hud #mission-card[data-choose=true]:focus-visible{outline:2px solid #277e6a;outline-offset:2px}
#game #hud #mission-card[data-choose=true] .mission-heading{pointer-events:none}
#game #hud #combo-celebration[data-kind=impact]{background:#fff1dc;color:#613814;border:1px solid #cb9561;box-shadow:none}
#game #hud #nest-direction[data-kind=recover]{background:#defff1;color:#174c41;border-color:#69b9a1}
#game #hud #nest-direction[data-kind=recover]>span{background:#a8f1d8;color:#174c41;box-shadow:none}
body[data-classic-phone=true] #game #hud #mission-card[data-choose=true]{min-height:44px;display:flex;flex-direction:column;justify-content:center}
body[data-classic-phone=true] #game #hud #mission-card[data-choose=true] #mission-kicker{display:block;font-size:9px;line-height:1.2;letter-spacing:.025em;margin-bottom:2px}