html, body { height: 100%; overflow: hidden; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#hud {
  position: fixed; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,26,60,0.75), rgba(20,26,60,0));
}
.hud-title { font-weight: 800; letter-spacing: 0.22em; color: var(--amber); margin-right: auto; }
.hud-row { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.hud-chip {
  background: var(--card); border: 1px solid rgba(159,232,216,0.25); border-radius: 999px;
  padding: 0.3rem 0.8rem; font-size: 0.95rem; color: var(--ink);
}
.hud-chip.sparks { color: var(--rose); letter-spacing: 0.2em; }
#menu-link { pointer-events: auto; font-size: 0.85rem; text-decoration: none; opacity: 0.85; }
#msg {
  position: fixed; top: 16%; left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid rgba(255,196,107,0.4); color: var(--amber);
  padding: 0.5rem 1.2rem; border-radius: 999px; opacity: 0; transition: opacity 0.3s;
  pointer-events: none; font-weight: 700;
}
#msg.show { opacity: 1; }
#overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(10,14,36,0.66); }
.ov-card {
  max-width: 30rem; margin: 1rem; padding: 2rem; text-align: center;
  background: var(--card); border: 1px solid rgba(159,232,216,0.3); border-radius: 1.2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ov-card h2 { margin: 0 0 0.8rem; letter-spacing: 0.25em; color: var(--amber); }
.ov-card p { color: var(--ink-dim); line-height: 1.7; margin: 0 0 1.4rem; }
.ov-card b { color: var(--mint); }
#touch-ui { position: fixed; inset: auto 0 0 0; pointer-events: none; }
#pad {
  position: absolute; left: 4%; bottom: 3rem; width: 8rem; height: 8rem; border-radius: 50%;
  background: rgba(20,26,60,0.45); border: 2px solid rgba(159,232,216,0.35); pointer-events: auto;
  display: grid; place-items: center; touch-action: none;
}
#pad-stick {
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: rgba(159,232,216,0.55); border: 2px solid rgba(255,255,255,0.5);
}
#look-pad {
  position: absolute; right: 2%; top: -60vh; width: 30vw; height: 45vh; pointer-events: auto;
  touch-action: none; opacity: 0.15;
}
#look-pad::after { content: "⟳"; position: absolute; right: 1rem; top: 1rem; font-size: 1.6rem; color: var(--ink); }
#btn-jump {
  position: absolute; right: 5%; bottom: 3rem; width: 6.5rem; height: 6.5rem; border-radius: 50%;
  border: 2px solid rgba(255,196,107,0.6); background: rgba(255,196,107,0.25); color: var(--amber);
  font-weight: 800; font-size: 0.9rem; letter-spacing: 0.1em; pointer-events: auto; touch-action: none;
}
@media (hover: hover) and (pointer: fine) { #touch-ui { opacity: 0.25; } }
@media (hover: none) { #touch-ui { display: block; } }