/* HUD kit (overhaul v69, track hud-onboarding): layout zones, haptic press feedback, Sunny the sun helper.
   Loaded after drive.css / experience.css, so equal-specificity rules here win. Colours are DESIGN.md tokens only. */
:root{--sun-gold:#ffc85d;--quick-gold:#ffe18a;--focus-gold:#e7ac3c;--forest-ink:#284d42;--panel-ink:#345642;--cream-raised:#fffdf0;--sun-blush:#f2a07b;--sun-mouth:#b8573f;--hud-tap:48px;--hud-gap:8px}

/* ---- Control zones (documented in DESIGN.md "HUD-Zonen"). Portrait first; values are px from the game box. ----
   top-left    : vehicle pill, score pill, reward sticker
   top row     : view tools (sound, camera, pause) right; camera chip appears under them for two seconds
   switch row  : [help button #coach-replay (the guide track turns it into the 💡 "Zeig mir!" button and places it itself)] [🕹️/✨ switch]
   right rail  : quest board (#quest-board, track quests) below the switch
   overlay     : Sunny (mascot): portrait = left of the quest rail, bubble to her right; landscape = right side, bubble to her left
   bottom      : joystick left, map button centre, action button right (unchanged)
   Every interactive control is >= 48px.                                                                         */
.hud .round-button{width:var(--hud-tap);height:var(--hud-tap);border-radius:17px}
.hud .view-tools{gap:7px}
.edge-help{right:137px;top:95px;width:var(--hud-tap);height:var(--hud-tap)}
.edge-help>span{font-size:28px}
.edge-help i{left:-30px;top:10px;font-size:26px}
.quick-mode{right:15px;top:88px;gap:4px;padding:4px}
.quick-mode button{position:relative;width:var(--hud-tap);height:var(--hud-tap);border-radius:13px;font-size:24px}
.score-pill{top:86px;left:16px}
.reward-peek{top:150px;left:17px}
.camera-chip{position:absolute;z-index:8;right:14px;top:62px;height:22px;padding:0 10px 0 7px;display:flex;align-items:center;gap:5px;border-radius:12px;background:#355c55e0;color:var(--cream-raised);font-size:12px;font-weight:900;border:2px solid #fff9dc;pointer-events:none;white-space:nowrap}
.camera-chip b{font-size:13px;line-height:1}
.at-home .camera-chip,.at-home .sunny:not(.is-start){display:none!important}

@media(min-width:601px) and (max-height:520px){
  .hud{inset:10px 17px auto}
  .camera-chip{right:190px;top:22px}
  .edge-help{right:140px;top:79px}
  .edge-help i{left:-30px;top:10px}
  .quick-mode{right:17px;top:72px}
  .score-pill{top:78px;left:20px}
  .reward-peek{top:132px;left:21px}
}

/* ---- Haptic press feedback for every button: squash on press, springy release. `scale` is independent of
   `transform`, so centred controls (map button) and the old :active rule never fight. ---- */
button{transition:scale .24s cubic-bezier(.34,1.8,.5,1),filter .18s}
body button:active{transform:none}
button:not(:disabled):active,button.is-pressed:not(:disabled){scale:.92 .86;filter:brightness(1.06)}
.quick-mode button.is-pressed,.quick-mode button:active{scale:.9 .84}
@media(prefers-reduced-motion:reduce){button:not(:disabled):active,button.is-pressed:not(:disabled){scale:.95}}
.quiet-motion button:not(:disabled):active,.quiet-motion button.is-pressed:not(:disabled){scale:.95}

/* ---- Wiggling a control Sunny points at (the motion itself is done in JS; this is the glow that stays) ---- */
.sunny-nudge{position:relative;z-index:9;box-shadow:0 0 0 4px #fff9dc,0 0 0 8px var(--focus-gold),0 6px 18px #213f3240!important;animation:sunny-glow 1.1s ease-in-out 2}
@keyframes sunny-glow{50%{box-shadow:0 0 0 6px #fff9dc,0 0 0 12px #e7ac3c99,0 6px 18px #213f3240}}

/* ---- Sunny ---- */
.sunny{position:absolute;z-index:9;left:12px;top:222px;width:96px;height:96px;pointer-events:none;--sunny-size:96px}
.sunny-art{position:absolute;inset:0;pointer-events:auto;touch-action:manipulation;cursor:pointer;will-change:transform}
.sunny-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 3px #315b3833)}
.sunny-ray{fill:var(--sun-gold);stroke:var(--focus-gold);stroke-width:2.2;stroke-linejoin:round}
.sunny-rays{transform-box:fill-box;transform-origin:center;animation:sunny-spin 22s linear infinite}
.sunny-body{transform-box:fill-box;transform-origin:50% 85%;animation:sunny-breathe 2.8s ease-in-out infinite}
.sunny-face{fill:var(--quick-gold);stroke:var(--focus-gold);stroke-width:2.6}
.sunny-shine{fill:#fffdf0;opacity:.55}
.sunny-cheek{fill:var(--sun-blush);opacity:.5}
.sunny-eye{transform-box:fill-box;transform-origin:center;animation:sunny-blink 4.6s infinite}
.eye-r{animation-delay:.04s}
.sunny-eye-white{fill:var(--cream-raised)}
.sunny-pupil{fill:var(--forest-ink)}
.sunny-glint{fill:var(--cream-raised)}
.sunny-brow{fill:none;stroke:var(--forest-ink);stroke-width:2.8;stroke-linecap:round;opacity:0;transition:opacity .2s,translate .25s cubic-bezier(.34,1.6,.5,1)}
.sunny-mouth{opacity:0;fill:none;stroke:var(--forest-ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;transition:opacity .12s}
.m-open{fill:var(--sun-mouth)}.m-o{fill:var(--sun-mouth);transform-box:fill-box;transform-origin:center}
.sunny[data-emotion=happy] .m-smile,.sunny[data-emotion=wave] .m-smile,.sunny[data-emotion=point] .m-smile{opacity:1}
.sunny[data-emotion=wow] .m-o{opacity:1}
.sunny[data-emotion=cheer] .m-open{opacity:1}
.sunny[data-emotion=think] .m-flat{opacity:1}
.sunny[data-emotion=wow] .sunny-brow,.sunny[data-emotion=cheer] .sunny-brow{opacity:1;translate:0 -3px}
.sunny[data-emotion=think] .brow-r{opacity:1;translate:0 -4px}
.sunny.is-talking .m-smile{animation:sunny-talk-a .34s steps(1) infinite}
.sunny.is-talking .m-open{animation:sunny-talk-b .34s steps(1) infinite}
.sunny.is-talking .m-o{animation:sunny-talk-o .3s ease-in-out infinite alternate}
.sunny-glove{fill:var(--cream-raised);stroke:var(--focus-gold);stroke-width:2.4}
.sunny-thumb{stroke-width:2}
.sunny-arm-edge{fill:none;stroke:var(--focus-gold);stroke-width:10;stroke-linecap:round}
.sunny-arm-fill{fill:none;stroke:var(--quick-gold);stroke-width:5.600;stroke-linecap:round}
.sunny-arm{transition:rotate .38s cubic-bezier(.34,1.6,.5,1)}
.arm-r{transform-origin:88px 74px}.arm-l{transform-origin:32px 74px}
.sunny[data-emotion=happy] .arm-r,.sunny[data-emotion=think] .arm-r{animation:arm-idle-r 3.1s ease-in-out infinite}
.sunny[data-emotion=happy] .arm-l,.sunny[data-emotion=think] .arm-l{animation:arm-idle-l 3.1s ease-in-out infinite}
.sunny[data-emotion=wave] .arm-r{rotate:-108deg;animation:arm-wave .46s ease-in-out infinite alternate}
.sunny[data-emotion=cheer] .arm-r{rotate:-130deg;animation:arm-cheer-r .38s ease-in-out infinite alternate}
.sunny[data-emotion=cheer] .arm-l{rotate:130deg;animation:arm-cheer-l .38s ease-in-out infinite alternate}
.sunny[data-emotion=wow] .arm-r{rotate:-52deg}.sunny[data-emotion=wow] .arm-l{rotate:52deg}
.sunny[data-emotion=point] .arm-r{rotate:-35deg}
.sunny.is-calm .sunny-arm{animation:none!important}
@keyframes arm-idle-r{50%{rotate:7deg}}
@keyframes arm-idle-l{50%{rotate:-7deg}}
@keyframes arm-wave{from{rotate:-94deg}to{rotate:-124deg}}
@keyframes arm-cheer-r{from{rotate:-118deg}to{rotate:-142deg}}
@keyframes arm-cheer-l{from{rotate:118deg}to{rotate:142deg}}
.sunny-pointer{opacity:0;transition:opacity .2s}
.sunny.is-pointing .sunny-pointer{opacity:1}
.sunny-arrow{fill:var(--sun-gold);stroke:var(--forest-ink);stroke-width:3.4;stroke-linejoin:round;paint-order:stroke;animation:sunny-point-bob .6s ease-in-out infinite alternate}
.sunny-sparks{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none}
.sunny-spark{position:absolute;left:-10px;top:-10px;font-size:22px;font-style:normal;opacity:0;translate:0 0}
.sunny.is-cheering .sunny-spark{opacity:1;translate:0 -52px}
.sunny-bubble{position:absolute;left:calc(100% - 4px);top:4px;min-width:150px;max-width:min(230px,calc(100vw - 205px));padding:8px 14px 7px;text-align:center;background:var(--cream-raised);border:3px solid #fff;border-radius:24px;box-shadow:var(--shadow);opacity:0;transform-origin:0 35%;pointer-events:none}
.sunny-bubble.is-open{opacity:1}
.sunny-bubble::after{content:'';position:absolute;left:-8px;top:24px;width:15px;height:15px;background:var(--cream-raised);border-left:3px solid #fff;border-bottom:3px solid #fff;border-radius:0 0 0 5px;transform:rotate(45deg)}
.sunny-icons{display:flex;justify-content:center;gap:6px;font-size:36px;line-height:1.1}
.sunny-icon{display:inline-block;animation:sunny-icon-bob 1.1s ease-in-out infinite alternate}
.sunny-big-arrow{width:44px;height:44px;display:block;overflow:visible;filter:drop-shadow(0 2px 0 #ab82385c)}.sunny-big-arrow-shape{fill:var(--sun-gold);stroke:var(--forest-ink);stroke-width:3;stroke-linejoin:round;animation:sunny-arrow-nudge .6s ease-in-out infinite alternate}.is-arrow{transition:rotate .35s cubic-bezier(.34,1.5,.5,1);animation:none!important}
.sunny-icon:nth-child(2){animation-delay:.18s}.sunny-icon:nth-child(3){animation-delay:.36s}
.sunny-text{margin-top:2px;font-size:13px;font-weight:900;line-height:1.15;color:var(--panel-ink)}
.sunny.is-leaving .sunny-bubble{opacity:0;transition:opacity .15s}
.sunny.is-calm .sunny-rays,.sunny.is-calm .sunny-body,.sunny.is-calm .sunny-eye,.sunny.is-calm .sunny-arrow{animation:none}
.sunny.is-calm.is-cheering .sunny-spark{translate:0 -52px;opacity:1}
@media(max-height:520px) and (min-width:601px){.sunny{left:auto;right:14px;top:146px;width:72px;height:72px}.sunny-bubble{left:auto;right:calc(100% - 4px);max-width:250px;transform-origin:100% 35%}.sunny-bubble::after{left:auto;right:-8px;border-left:0;border-bottom:0;border-right:3px solid #fff;border-top:3px solid #fff;border-radius:0 5px 0 0}}
@keyframes sunny-spin{to{rotate:360deg}}
@keyframes sunny-breathe{50%{scale:.975 1.035}}
@keyframes sunny-blink{0%,93%,100%{scale:1 1}96%{scale:1 .1}}
@keyframes sunny-talk-a{50%{opacity:0}}
@keyframes sunny-talk-b{0%{opacity:0}50%{opacity:1}}
@keyframes sunny-talk-o{from{scale:1 .65}to{scale:1 1}}
@keyframes sunny-wave{from{rotate:-16deg}to{rotate:16deg}}
@keyframes sunny-cheer{from{rotate:-10deg}to{rotate:10deg}}
@keyframes sunny-point-bob{from{translate:0 0}to{translate:7px 0}}
@keyframes sunny-arrow-nudge{from{translate:-3px 0}to{translate:4px 0}}
@keyframes sunny-icon-bob{from{translate:0 2px}to{translate:0 -4px}}

/* ---- Start screen: Sunny replaces the emoji sun in the logo and reacts to taps ---- */
.game-logo>span.has-sunny{display:block;width:112px;height:112px;margin:0 auto -4px;animation:none;font-size:0;position:relative}
.sunny.is-start{position:relative;left:auto;right:auto;top:auto;width:112px;height:112px}
.sunny.is-start .sunny-bubble{display:none}
.sunny.is-start .sunny-art{outline-offset:2px}
@media(max-height:520px) and (min-width:601px){.game-logo>span.has-sunny{width:70px;height:70px;margin:0 0 -6px}.sunny.is-start{width:70px;height:70px}}

/* ---- Action button: picture + state ring + badge (text label stays small for grown-ups) ---- */
.action-button::before{content:'';position:absolute;inset:-9px;border-radius:50%;pointer-events:none;opacity:0;border:5px solid transparent}
.action-button[data-state=ready]::before{border-color:#ffc85dcc;animation:action-pulse 1.7s ease-out infinite}
.action-button[data-state=drive]::before{border:5px dashed #6e9a52;opacity:.95;animation:action-orbit 7s linear infinite}
.action-button[data-state=wait]::before{border:5px dotted #345642;opacity:.55;animation:action-orbit 12s linear infinite}
.action-button[data-state=done]::before{border-color:#6e9a52;animation:action-burst .8s ease-out both}
.action-button[data-state=wait]{filter:saturate(.7)}
.action-badge{position:absolute;right:-8px;top:-4px;z-index:2;min-width:38px;height:38px;padding:0 4px;border-radius:50%;display:grid;place-items:center;font-size:20px;line-height:1;font-weight:1000;color:var(--forest-ink);background:var(--cream-raised);border:3px solid var(--sun-gold);box-shadow:0 3px 0 #ab82385c;pointer-events:none}
.action-badge:empty{display:none}
.action-badge[data-state=drive]{background:#6e9a52;border-color:#fff9d7;color:var(--cream-raised);animation:badge-nudge .9s ease-in-out infinite alternate}
.action-badge[data-state=ready]{animation:badge-tap 1.1s ease-in-out infinite}
.action-badge[data-state=work]{animation:badge-spin 2.4s linear infinite}
.action-badge[data-state=done]{background:#6e9a52;border-color:#fff9d7;color:var(--cream-raised);font-size:24px}
.action-button.building::after{inset:-12px;mask:radial-gradient(transparent calc(50% - 8px),#000 calc(50% - 7px));background:conic-gradient(#6e9a52 var(--work),#fffbea99 var(--work));transition:background .3s}
/* Right-anchored at every width: a long German label must never run off the screen edge (found by hud-layout.test.js in 844x390). */
#action-label{left:auto!important;right:0;transform:none!important;max-width:min(210px,calc(100vw - 205px))!important;transition:opacity .4s,font-size .3s,padding .3s,scale .35s cubic-bezier(.34,1.6,.5,1);transform-origin:50% 100%}
#action-label:not(.is-fresh){font-size:11px!important;padding:4px 8px!important;opacity:.82;scale:.96;font-weight:850}
#action-label.is-fresh{opacity:1;scale:1.04}
@keyframes action-pulse{0%{opacity:.9;scale:.96}80%,100%{opacity:0;scale:1.22}}
@keyframes action-orbit{to{rotate:360deg}}
@keyframes action-burst{0%{opacity:1;scale:.9}100%{opacity:0;scale:1.5}}
@keyframes badge-nudge{to{translate:4px 0}}
@keyframes badge-tap{50%{translate:0 -3px;scale:1.1}}
@keyframes badge-spin{to{rotate:360deg}}

/* ---- Score pill: glow instead of motion under reduced motion; stars landing are handled in JS ---- */
.score-pill{transform-origin:25% 50%;transition:box-shadow .3s}
.score-pill.is-glow{box-shadow:0 0 0 4px #ffe18acc,0 4px 0 #3556381a}
#score-pop{font-size:24px;color:#fff9dc;-webkit-text-stroke:1px #6e5321;paint-order:stroke fill}
@keyframes star-home{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-40deg)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(0)}42%{opacity:1;transform:translate(calc(-50% + var(--bend)),calc(-50% - 84px)) scale(1.1) rotate(160deg)}88%{opacity:1;transform:translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) scale(.7) rotate(330deg)}100%{opacity:0;transform:translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) scale(.35) rotate(360deg)}}
.flying-star{animation-timing-function:cubic-bezier(.45,.05,.4,1);filter:drop-shadow(0 0 5px #ffe18acc) drop-shadow(0 3px 2px #8b642e36)}

/* ---- Celebration sticker pop (replaces the screen-reader-only toast) ---- */
.sticker-pop{position:absolute;z-index:10;left:50%;top:38%;width:168px;margin-left:-84px;display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none}
.sticker-icon{position:relative;z-index:1;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-size:58px;line-height:1;background:radial-gradient(circle at 35% 30%,#fffdf0,#ffe9a8);border:5px solid #fff;box-shadow:0 8px 0 #ab82385c,0 14px 26px #314e3233}
.sticker-title{position:relative;z-index:1;max-width:230px;padding:5px 12px;border:3px solid #fff;border-radius:16px;background:#fffdf0f2;box-shadow:var(--shadow);font-size:13px;font-weight:900;line-height:1.15;color:var(--panel-ink);text-align:center}
.sticker-burst{position:absolute;left:50%;top:52px;width:176px;height:176px;margin:-88px 0 0 -88px;border-radius:50%;opacity:0;background:repeating-conic-gradient(#ffe18a 0 9deg,transparent 9deg 22deg);-webkit-mask:radial-gradient(circle,transparent 36%,#000 38%,#000 66%,transparent 70%);mask:radial-gradient(circle,transparent 36%,#000 38%,#000 66%,transparent 70%)}
.sticker-pop.is-bursting .sticker-burst{animation:sticker-burst 1.3s ease-out both}
@keyframes sticker-burst{0%{opacity:0;scale:.3;rotate:0deg}18%{opacity:1}100%{opacity:0;scale:1.25;rotate:50deg}}
.quiet-motion .sticker-burst{display:none}

/* ---- Dialogs and the pause menu: soft entrance instead of a hard pop ---- */
dialog[open]{animation:dialog-in .34s cubic-bezier(.2,.9,.3,1.15)}
dialog[open]::backdrop{animation:backdrop-in .3s ease-out}
.child-menu-action{transition:scale .24s cubic-bezier(.34,1.8,.5,1),filter .18s}
dialog[open] .child-menu-action{animation:menu-tile-in .42s cubic-bezier(.2,.9,.3,1.25) both}
dialog[open] .child-menu-action:nth-child(2){animation-delay:.05s}
dialog[open] .child-menu-action:nth-child(3){animation-delay:.1s}
dialog[open] .child-menu-action:nth-child(4){animation-delay:.15s}
.child-menu-action.primary{box-shadow:0 5px 0 #3d7a3e66,0 0 0 0 #8bc56900}
@keyframes dialog-in{from{opacity:0;scale:.9;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes menu-tile-in{from{opacity:0;scale:.82;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}

/* ---- Start screen life: letters drop in and sway, the play card breathes, the form slides up ---- */
.logo-letter{display:inline-block;animation:letter-in .62s cubic-bezier(.3,1.5,.5,1) both,letter-sway 5.6s ease-in-out infinite;animation-delay:calc(var(--i)*70ms + 250ms),calc(var(--i)*140ms + 2400ms)}
.mode-card{animation:play-bob 2.8s ease-in-out infinite;transition:scale .24s cubic-bezier(.34,1.8,.5,1),filter .18s}
.mode-card::before{content:'';position:absolute;inset:-7px;border-radius:38px;border:4px solid #fff6c9;opacity:0;pointer-events:none;animation:play-ring 2.8s ease-out infinite}
.mode-card>img{animation:tractor-rock 3.4s ease-in-out infinite;transform-origin:50% 90%}
.mode-card .mode-go{animation:go-nudge 1.1s ease-in-out infinite alternate}
.name-onboarding{animation:form-in .6s cubic-bezier(.2,.9,.3,1.2) .5s both}
.start-bottom{animation:form-in .6s cubic-bezier(.2,.9,.3,1.2) .5s both}
.game-logo::before,.game-logo::after{content:'✨';position:absolute;font-size:22px;opacity:0;animation:twinkle 3.2s ease-in-out infinite;pointer-events:none}
.game-logo{position:relative}
.game-logo::before{left:calc(50% - 92px);top:12px}
.game-logo::after{left:calc(50% + 66px);top:40px;animation-delay:1.4s}
@keyframes letter-in{from{opacity:0;translate:0 -34px;scale:.6 1.5;rotate:-8deg}to{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes letter-sway{0%,70%,100%{translate:0 0}80%{translate:0 -7px}90%{translate:0 1px}}
@keyframes play-bob{50%{translate:0 -5px}}
@keyframes play-ring{0%{opacity:.85;scale:.96}70%,100%{opacity:0;scale:1.14}}
@keyframes tractor-rock{50%{rotate:-2.5deg;translate:3px 0}}
@keyframes go-nudge{to{translate:4px 0}}
@keyframes form-in{from{opacity:0;translate:0 38px}to{opacity:1;translate:0 0}}
@keyframes twinkle{0%,100%{opacity:0;scale:.4;rotate:0deg}40%{opacity:1;scale:1.1;rotate:20deg}70%{opacity:.8;scale:.9}}

/* First lessons: the quest rail waits until Sunny has finished (one thing at a time for a 4-year-old), then pops in once. Opacity/scale only: landscape centres the rail with transform. */
body.intro-lessons #quest-board{opacity:0;pointer-events:none}
#quest-board.qb-reveal{animation:qb-reveal .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes qb-reveal{0%{opacity:0;scale:.78}60%{opacity:1;scale:1.06}100%{opacity:1;scale:1}}
body.quiet-motion #quest-board.qb-reveal{animation:none}
@media(prefers-reduced-motion:reduce){#quest-board.qb-reveal{animation:none}}