* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #03060f; color: #e7f0ff; font-family: Inter, system-ui, sans-serif; }
canvas { display: block; }

#overlay {
  position: fixed; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(22,34,88,0.18), rgba(0,0,0,0.7));
  text-align: center; gap: 10px; z-index: 10;
}
#overlay h1 { margin: 0; letter-spacing: 0.08em; font-weight: 700; }
#overlay p { margin: 0; color: #b8c9ff; }
#startBtn {
  pointer-events: auto; margin-top: 8px; border: 1px solid #4d6cff; background: #1f2a57; color: white;
  border-radius: 999px; padding: 10px 16px; cursor: pointer;
}

#hint {
  margin-top: 8px; color: #d0d8ff; font-size: 1.2rem; opacity: 0.85;
  animation: pulse 1.6s ease-in-out infinite;
}
.hidden { display: none !important; }

#hud {
  position: fixed; top: 12px; left: 12px; right: 12px; z-index: 11;
  display: flex; justify-content: space-between; gap: 10px;
  background: rgba(5,12,31,0.45); border: 1px solid rgba(130,150,255,0.25);
  border-radius: 10px; padding: 8px 12px; font-size: 12px; backdrop-filter: blur(4px);
}

#mobileControls {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 12;
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end;
  pointer-events: none;
}
.pad {
  height: 130px; border-radius: 16px;
  background: rgba(5,12,31,0.4); border: 1px solid rgba(130,150,255,0.22);
  position: relative; pointer-events: auto; touch-action: none;
}
.pad-label {
  position: absolute; top: 8px; left: 10px; font-size: 11px; color: #d4dcff; letter-spacing: .08em;
}
.stick {
  position: absolute; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(170,190,255,0.4); border: 1px solid rgba(220,230,255,0.5);
  left: calc(50% - 19px); top: calc(50% - 19px);
}
#mobileButtons {
  display: grid; gap: 8px; pointer-events: auto;
}
#mobileButtons button {
  border: 1px solid #4d6cff; background: rgba(31,42,87,0.9); color: white;
  border-radius: 10px; padding: 10px 12px; font-size: 12px;
}

#nextWorldModal {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(1, 6, 15, 0.72); backdrop-filter: blur(4px);
}
.modal-card {
  width: min(92vw, 560px); background: #0f1730; border: 1px solid #2f4187;
  border-radius: 14px; padding: 16px; color: #e9edff;
}
.modal-card input {
  width: 100%; margin-top: 8px; margin-bottom: 10px; border-radius: 8px;
  border: 1px solid #4258ad; background: #0a1230; color: white; padding: 10px;
}
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-actions button {
  border: 1px solid #4d6cff; background: #1f2a57; color: white; border-radius: 8px; padding: 9px 12px;
}
.small-line { color: #b8c9ff; font-size: 12px; }

@media (pointer: fine) {
  #mobileControls { display: none !important; }
}

@keyframes pulse {
  0%,100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.08); opacity: 1; }
}