html, body { margin:0; padding:0; height:100%; background:#0f1116; color:#e6eaf2; }
#app { position:fixed; inset:0; }

#hud{
  position:fixed; top:10px; left:10px; z-index:10;
  padding:6px 10px; border-radius:8px;
  background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.12);
  /* doubled from 13px → 26px (~20pt) */
  font:26px/1.4 "Chakra Petch", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#status{ opacity:0.9; }

/* Local font (Assets/Fonts/ChakraPetch-Regular.ttf) */
@font-face{
  font-family:"Chakra Petch";
  src:url("../Assets/Fonts/ChakraPetch-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
}