/* Readable goals over scenery, with compact counters below. */
body.in-level #play-screen .play-hud { top:calc(60px + env(safe-area-inset-top)); left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); width:auto!important; max-width:none!important; transform:none; display:grid; grid-template-columns:1fr 1fr; gap:5px; height:auto; padding:0; overflow:visible; background:none; align-items:start; }
body.in-level #play-screen #hud-objectives { grid-column:1 / 3; grid-row:1; display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; max-width:none; gap:6px; min-width:0; }
body.in-level #play-screen .hud-goal { position:relative; display:flex; align-items:center; gap:7px; flex:1 1 0; min-width:0; max-width:none; min-height:60px; padding:7px 9px 12px; border:2px solid #f2d48d; border-radius:16px; background:linear-gradient(#fffdf6f7,#fff0c8ee); color:#194f5a; box-shadow:inset 0 1px white,0 3px 0 #a98a463d,0 3px 12px #15485325; line-height:1.15; }
body.in-level #play-screen .goal-icon { display:grid; place-items:center; flex:0 0 27px; width:27px; height:27px; background:#f8d88088; border-radius:50%; font-size:20px; }
body.in-level #play-screen .goal-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
body.in-level #play-screen .hud-goal .goal-label { font-size:11px; font-weight:800; display:block; margin:0; line-height:1.1; }
body.in-level #play-screen .goal-count { font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap; }
body.in-level #play-screen .goal-count em { font-size:12px; font-style:normal; color:#648078; }
body.in-level #play-screen .goal-track { position:absolute; bottom:5px; left:8px; right:8px; height:5px; border-radius:8px; overflow:hidden; background:#e5d9b7; box-shadow:inset 0 1px 2px #704d2d25; }
body.in-level #play-screen .goal-track i { display:block; height:100%; background:linear-gradient(90deg,#32a892,#b1de62); border-radius:inherit; transition:width .2s; }
body.in-level #play-screen .hud-goal.done { background:linear-gradient(#f0ffe6,#cdeeaeeF); border-color:#95ca78; }
body.in-level #play-screen .hud-goal.done .goal-icon { background:#64b570; color:white; }
body.in-level #play-screen .hud-shots { grid-row:2; grid-column:1; justify-self:start; }
body.in-level #play-screen .hud-score { grid-row:2; grid-column:2; justify-self:end; }
body.in-level #play-screen .hud-shots,body.in-level #play-screen .hud-score { padding:4px 9px; border-radius:12px; font-size:11px; background:#fff9e7eb; border:1px solid #edcc86; box-shadow:0 2px 4px #16465833; }
body.in-level #play-screen .hud-shots b,body.in-level #play-screen .hud-score b { font-size:16px; }
@media(max-width:380px) { body.in-level #play-screen .hud-goal { gap:4px; padding:6px 6px 12px; } body.in-level #play-screen .goal-icon { width:22px; height:22px; flex-basis:22px; font-size:16px; } body.in-level #play-screen .goal-count { font-size:16px; } body.in-level #play-screen .hud-goal .goal-label { font-size:10px; } }
@media(orientation:landscape) and (min-width:560px) {
 body.in-level #play-screen .play-hud { top:calc(var(--bar-height) + 6px)!important; display:flex; justify-content:flex-end; align-items:flex-start; gap:6px; }
 body.in-level #play-screen #hud-objectives { width:40%; max-width:520px; margin-right:auto; gap:5px; }
 body.in-level #play-screen .hud-goal { min-height:57px; padding:6px 7px 12px; gap:5px; }
 body.in-level #play-screen .goal-icon { width:23px; height:23px; flex-basis:23px; font-size:17px; }
 body.in-level #play-screen .hud-goal .goal-label { font-size:11px; }
 body.in-level #play-screen .goal-count { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) { body.in-level #play-screen .goal-track i { transition:none; } }
.reduce-motion #play-screen .goal-track i { transition:none; }

@media(max-width:600px) and (orientation:portrait) { body.in-level #play-screen .play-hud { top:calc(49px + env(safe-area-inset-top)); } }
@media(max-width:500px) { body.in-level #play-screen #hud-objectives:has(.hud-goal:nth-child(3)) .goal-icon { display:none; } body.in-level #play-screen #hud-objectives:has(.hud-goal:nth-child(3)) .goal-count { font-size:16px; } }