* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #10142b;
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif; color: #e8eaf6; }
#stage, #stage canvas { position: fixed; inset: 0; display: block; }
#hud { position: fixed; top: 8px; left: 8px; right: 8px; display: flex; gap: 8px;
  align-items: center; z-index: 4; pointer-events: none; flex-wrap: wrap; }
.hudbox { background: rgba(16, 20, 43, 0.75); border: 1px solid #35e0c855;
  border-radius: 8px; padding: 6px 12px; font-size: 14px; letter-spacing: 0.5px; }
#alertmeter { margin-left: auto; position: relative; width: 150px; height: 22px;
  background: rgba(16,20,43,0.75); border: 1px solid #35e0c855; border-radius: 11px; overflow: hidden; }
#alertfill { height: 100%; width: 0%; background: #35e0c8; transition: width 0.15s; }
#alertlabel { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 11px; letter-spacing: 2px; color: #e8eaf6; }
#goalbar { position: fixed; top: 46px; left: 8px; z-index: 4; pointer-events: none; }
#goalbar span { background: rgba(16,20,43,0.6); border-left: 3px solid #ffb347;
  padding: 4px 10px; font-size: 13px; border-radius: 0 8px 8px 0; }
#msg { position: fixed; top: 20%; left: 50%; transform: translateX(-50%);
  background: rgba(16, 20, 43, 0.85); border: 1px solid #ffb34766; color: #ffd9a8;
  padding: 10px 22px; border-radius: 10px; font-size: 16px; z-index: 6;
  opacity: 0; display: none; transition: opacity 0.6s; pointer-events: none; }
.overlay { position: fixed; inset: 0; display: none; align-items: center;
  justify-content: center; background: rgba(5, 7, 18, 0.72); z-index: 10; }
.panel { max-width: 480px; width: calc(100% - 32px); text-align: center;
  background: linear-gradient(160deg, #171d3b, #10142b);
  border: 1px solid #35e0c844; border-radius: 16px; padding: 28px 24px;
  box-shadow: 0 20px 60px #000a; }
.panel h1 { font-size: 30px; letter-spacing: 6px; color: #35e0c8; margin-bottom: 12px; }
.panel p { font-size: 14px; line-height: 1.55; color: #b7bfdc; margin-bottom: 14px; }
.keys { list-style: none; font-size: 13px; color: #8fe8ff; margin-bottom: 18px; }
.keys li { margin: 4px 0; }
.keys b { color: #ffb347; }
.bigbtn { display: inline-block; border: none; cursor: pointer; font-size: 17px;
  letter-spacing: 2px; font-weight: 700; color: #10142b;
  background: linear-gradient(120deg, #35e0c8, #8fe8ff); padding: 14px 34px;
  border-radius: 10px; box-shadow: 0 0 24px #35e0c866; }
.bigbtn:hover { transform: translateY(-2px); }
.fine { font-size: 11px !important; color: #66719c !important; margin: 10px 0 0 !important; }
.linkhome { display: inline-block; margin-top: 12px; color: #66719c; font-size: 12px; }
#touch { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: none; }
@media (hover: none), (pointer: coarse), (max-width: 700px) { #touch { display: block; } }
#joy { position: absolute; left: 18px; bottom: 22px; width: 118px; height: 118px;
  border-radius: 50%; background: rgba(53, 224, 200, 0.10);
  border: 2px solid rgba(53, 224, 200, 0.35); pointer-events: auto; touch-action: none; }
#joyknob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(53, 224, 200, 0.45);
  border: 2px solid #35e0c8aa; }
#lookpad { position: absolute; right: 0; top: 0; width: 55%; height: 100%;
  pointer-events: auto; touch-action: none; }
#btn-sprint { position: absolute; right: 20px; bottom: 26px; width: 84px; height: 84px;
  border-radius: 50%; border: 2px solid #ffb34799; background: rgba(255, 179, 71, 0.15);
  color: #ffd9a8; font-size: 14px; letter-spacing: 1px; pointer-events: auto;
  touch-action: none; font-family: inherit; }