* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #0b0e14;
}

#game { display: block; position: fixed; inset: 0; touch-action: none; }

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---- top bar ---- */

#hud-top {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

#scorebox {
  background: rgba(15, 18, 28, 0.78);
  color: #fff;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

#scorebox #rate {
  font-size: 13px;
  font-weight: 600;
  color: #7fe89a;
  margin-left: 8px;
}

#level {
  background: rgba(15, 18, 28, 0.78);
  color: #ffd24a;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
}

#reset {
  margin-left: auto;
  pointer-events: auto;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: rgba(15, 18, 28, 0.78);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
#reset:hover { background: rgba(40, 46, 64, 0.9); }

/* ---- progress to next level ---- */

#progress {
  position: fixed;
  top: 64px;
  left: 12px;
  width: 300px;
  pointer-events: none;
}

#bar {
  height: 10px;
  border-radius: 6px;
  background: rgba(15, 18, 28, 0.6);
  overflow: hidden;
}

#bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, #4a9eff, #7fe89a);
  transition: width 0.3s ease;
}

#bar-label {
  margin-top: 4px;
  font-size: 12px;
  color: #e8ecf4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ---- inventory ---- */

#items {
  position: fixed;
  top: 64px;
  right: 12px;
  width: 200px;
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.item {
  background: rgba(15, 18, 28, 0.72);
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 9px;
  border-left: 3px solid #7fe89a;
}

/* ---- interaction prompt ---- */

#prompt {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 18, 28, 0.85);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 12px;
  border: 2px solid #4a9eff;
  pointer-events: none;
}
#prompt.cooling { border-color: #555c6e; color: #9aa2b4; }

/* ---- toasts ---- */

#toasts {
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 5;
}

.toast {
  background: rgba(15, 18, 28, 0.9);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  animation: toast-in 0.25s ease-out, toast-out 0.4s ease-in 3s forwards;
}
.toast.item { background: #1d6e3a; font-weight: 600; }
.toast.unlock { background: #9a6d00; font-weight: 700; font-size: 16px; }

@keyframes toast-in { from { transform: translateY(14px); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(14px); opacity: 0; } }

/* ---- help ---- */

#help {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: #cfd6e4;
  font-size: 13px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* ---- touch controls ---- */

#touch { position: fixed; inset: 0; pointer-events: none; z-index: 4; }

#joystick {
  position: absolute;
  left: calc(18px + env(safe-area-inset-left));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: rgba(15, 18, 28, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.25);
  pointer-events: auto;
  touch-action: none;
}

#stick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
}

#use {
  position: absolute;
  right: calc(22px + env(safe-area-inset-right));
  bottom: calc(34px + env(safe-area-inset-bottom));
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid #555c6e;
  background: rgba(15, 18, 28, 0.7);
  color: #fff;
  font-size: 34px;
  pointer-events: auto;
  touch-action: none;
}
#use.ready { border-color: #4a9eff; background: rgba(35, 64, 110, 0.85); }
#use:active { background: #2a4a7f; }

body.touch #help { bottom: 4px; font-size: 11px; transition: opacity 1s; }
body.touch #prompt { bottom: 150px; font-size: 14px; max-width: 86vw; text-align: center; }
body.touch #toasts { bottom: 200px; }

@media (max-width: 640px) {
  #scorebox { font-size: 17px; padding: 6px 12px; }
  #scorebox #rate { font-size: 11px; margin-left: 5px; }
  #level { font-size: 11px; padding: 8px 10px; }
  #progress { width: 180px; top: 58px; }
  #bar-label { font-size: 10px; }
  #items { width: 140px; top: 58px; max-height: 38vh; }
  .item { font-size: 10px; padding: 4px 8px; }
}