/* The raster art has a transparent square and a fixed box, so labels never shift on load. */
body .hud img.hud-art74,body #sceneMusic>img.hud-art74{display:inline-block;flex:0 0 28px;width:28px;height:28px;min-height:28px;min-width:28px;max-width:28px;max-height:28px;object-fit:contain;vertical-align:middle;pointer-events:none;opacity:1;margin:0;border:0;background:transparent;box-shadow:none;filter:none}
body .hud #contPill>i.hud74-slot{display:grid;place-items:center;width:28px;height:28px;min-height:28px;flex:0 0 28px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body .hud #acctPill>.ai{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:28px;flex:0 0 28px;line-height:1}
body #parentBtn>img.hud-art74{display:inline-block}
body .hud #mapPill,body .hud #aiShelfButton{align-items:center;gap:5px}
body .hud #starPill>img.hud-art74{width:25px;height:25px;min-height:25px;min-width:25px;max-width:25px;max-height:25px;flex-basis:25px}
body #sceneMusic:has(>img.hud-art74)::after{content:none!important;display:none!important}
@media(max-width:700px){
 body .hud img.hud-art74{width:26px;height:26px;min-height:26px;min-width:26px;max-width:26px;max-height:26px;flex-basis:26px}
 body .hud #contPill>i.hud74-slot,body .hud #acctPill>.ai{width:26px;height:26px;min-height:26px;flex-basis:26px}
}

body .hud #logo>i.hud74-home{display:grid;place-items:center;width:36px;height:36px;border:0;background:transparent;box-shadow:none}
body .hud #logo>i.hud74-home>img.hud-art74{width:40px;height:40px;min-height:40px;min-width:40px;max-width:40px;max-height:40px;flex-basis:40px}
@media(max-width:700px){body .hud #logo>i.hud74-home{width:30px;height:30px}body .hud #logo>i.hud74-home>img.hud-art74{width:30px;height:30px;min-height:30px;min-width:30px;max-width:30px;max-height:30px;flex-basis:30px}}

body .hud #gradePill>.hud74-grade{display:none}
/* Long landscape labels can wrap instead of pushing a control off the edge. */
@media (min-width:701px) and (max-width:1200px){body .hud{flex-wrap:wrap}}
/* Portrait iPads and phones use the same reachable icon controls. Real labels
   stay in the DOM/accessibility names; desktop and tablet landscape keep text. */
@media (max-width:700px), (orientation:portrait) and (max-width:1100px), (max-width:1000px) and (max-height:520px){
 body .hud{
  flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;gap:6px!important;
  padding:calc(env(safe-area-inset-top,0px) + 8px) max(8px,env(safe-area-inset-right,0px)) 10px max(8px,env(safe-area-inset-left,0px))!important;
  min-width:0;max-width:100%;height:auto!important;
 }
 body .hud>button{
  flex:0 0 46px;width:46px;min-width:46px;max-width:46px;height:46px;min-height:46px;
  justify-content:center;gap:0!important;margin:0!important;padding:4px!important;
  font-size:0!important;line-height:1;border-width:3px;box-shadow:0 4px 0 var(--ink);overflow:visible;
 }
 body .hud .pill.cont,body .hud .pill.cont.is-idle{flex:0 0 46px;min-width:46px;max-width:46px}
 body .hud>#sceneMusic{flex-basis:46px}
 body .hud .pill.cont.is-idle{display:none!important}
 body .hud .pill.cont::after,body .hud .logo::after{content:none!important;display:none!important}
 body .hud .logo>span,body .hud .pill span:not(.ai):not(.kav):not(.hud74-grade){display:none!important}
 body .hud #gradePill>.hud74-grade{display:flex!important;align-items:center;justify-content:center;width:30px;height:30px}
 body .hud #gradePill>.hud74-grade>svg{display:block;width:30px;height:30px}
 body .hud #logo>i.hud74-home{display:grid;width:30px;height:30px;min-width:30px;flex:0 0 30px}
 body .hud #logo>i.hud74-home>img.hud-art74{width:30px;height:30px;min-width:30px;min-height:30px;max-width:30px;max-height:30px;flex-basis:30px}
 body .hud #acctPill>.ai,body .hud .kid>.kav{display:inline-flex!important;align-items:center;justify-content:center;font-size:26px;line-height:1}
 body .hud :is(button,a):focus-visible{outline:3px solid #1884ac;outline-offset:2px}
}