* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #120a24;
  font-family: ui-monospace, "Segoe UI", system-ui, sans-serif; color: #eae6ff; }
#game-canvas { position: fixed; inset: 0; display: block; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(85% 85% at 50% 50%, transparent 40%, rgba(255,62,165,.65)); }
#hud { position: fixed; top: 12px; left: 12px; right: 12px; pointer-events: none;
  display: flex; flex-direction: column; gap: 6px; max-width: 340px; }
.hud-row { display: flex; gap: 10px; }
.hud-box { background: rgba(27,16,56,.72); border: 1px solid #3d2a6e; border-radius: 8px;
  padding: 6px 12px; display: flex; flex-direction: column; min-width: 84px; }
.label { font-size: 10px; letter-spacing: 2px; color: #2ee6d6; }
.hud-box span:last-child { font-size: 20px; font-weight: 700; }
.bar-wrap { display: flex; align-items: center; gap: 8px; }
.bar { flex: 1; height: 10px; background: rgba(27,16,56,.72); border: 1px solid #3d2a6e;
  border-radius: 5px; overflow: hidden; }
.bar div { height: 100%; width: 100%; transition: width .15s; }
#shield-bar { background: linear-gradient(90deg, #ff3ea5, #2ee6d6); }
#boost-bar { background: #ffb347; }
#progress-bar { background: #9b5cff; }
#hud-shield { font-size: 12px; width: 30px; text-align: right; }
#hint { align-self: center; margin-top: 8px; font-size: 16px; letter-spacing: 2px;
  color: #ffd166; opacity: 0; transition: opacity .3s; text-shadow: 0 0 12px #ffb347; }
#hint.show { opacity: 1; }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(18,10,36,.78); backdrop-filter: blur(4px); z-index: 10; }
.overlay.hidden { display: none; }
.panel { max-width: 520px; margin: 16px; padding: 28px 32px; text-align: center;
  background: rgba(27,16,56,.85); border: 1px solid #9b5cff; border-radius: 16px;
  box-shadow: 0 0 40px rgba(155,92,255,.35); }
.panel h1 { font-size: 34px; letter-spacing: 4px; color: #2ee6d6;
  text-shadow: 0 0 18px #2ee6d6; margin-bottom: 10px; }
.panel h1 span { color: #ff3ea5; text-shadow: 0 0 18px #ff3ea5; margin-left: 10px; }
.panel h2 { font-size: 28px; letter-spacing: 3px; color: #2ee6d6; margin-bottom: 10px; }
.panel p { font-size: 14px; line-height: 1.6; color: #cfc6f2; margin-bottom: 14px; }
.keys { list-style: none; font-size: 13px; color: #cfc6f2; margin-bottom: 18px; }
.keys li { margin: 4px 0; }
.keys b { color: #ffb347; }
.btn { pointer-events: auto; cursor: pointer; font: inherit; font-size: 16px; letter-spacing: 2px;
  color: #120a24; background: linear-gradient(90deg, #2ee6d6, #ff3ea5);
  border: none; border-radius: 10px; padding: 12px 28px; font-weight: 700;
  box-shadow: 0 0 24px rgba(46,230,214,.5); }
.btn:hover { filter: brightness(1.15); }
#touch-controls { position: fixed; inset: auto 0 0 0; display: flex;
  justify-content: space-between; padding: 14px; z-index: 5;
  touch-action: none; user-select: none; }
.tc-left, .tc-right { display: flex; gap: 10px; align-items: flex-end; }
.tc { width: 62px; height: 62px; border-radius: 14px; font-size: 20px;
  background: rgba(27,16,56,.6); border: 1px solid #3d2a6e; color: #2ee6d6;
  touch-action: none; pointer-events: auto; }
.tc.pressed { background: rgba(46,230,214,.35); }
.tc-boost { width: 84px; font-size: 13px; letter-spacing: 1px; color: #ffb347; }
@media (pointer: fine) { .tc { opacity: .35; } #touch-controls { justify-content: flex-end; } }