* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #06070d; overflow: hidden; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; }
canvas { display: block; }

#hud { position: fixed; inset: 0; pointer-events: none; color: #e8ecf5; }
#room-label {
  position: absolute; top: 16px; left: 18px;
  font-size: 0.95rem; font-weight: 600; color: #e8b84b;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
#room-sub { position: absolute; top: 38px; left: 18px; font-size: 0.72rem; color: #aab2c8; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
#storm-counter {
  display: none;
  position: absolute; top: 16px; right: 18px;
  font-size: 0.9rem; font-weight: 700; color: #f25f5c;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
#crosshair {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(232, 184, 75, 0.9);
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
}
#prompt {
  position: absolute; bottom: 88px; left: 50%; transform: translateX(-50%);
  font-size: 0.88rem; color: #ffe89c; text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  background: rgba(8, 9, 16, 0.65); padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(232, 184, 75, 0.5);
  display: none;
}
#lore {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  max-width: 680px; width: 90vw;
  font-size: 0.85rem; line-height: 1.55;
  background: rgba(8, 9, 16, 0.84); padding: 12px 18px; border-radius: 12px;
  border-left: 3px solid #e8b84b;
  opacity: 0; transition: opacity 0.4s;
}
#lore b { color: #e8b84b; } #lore code { color: #9fe8c8; background: #0b0d12; padding: 0 5px; border-radius: 4px; }

#intro {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(6, 7, 13, 0.93);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #d8dce8; text-align: center; gap: 16px; cursor: pointer;
}
#intro h1 { color: #e8b84b; letter-spacing: 0.05em; font-size: 1.7rem; }
#intro .sub { font-style: italic; color: #8b91a5; }
#intro .controls { font-size: 0.85rem; line-height: 2; }
#intro .controls b { color: #0dbd8b; }
#intro .start { margin-top: 10px; color: #e8b84b; border: 1px solid #e8b84b; border-radius: 999px; padding: 10px 28px; }