* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: #dfe9ff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- capas fullscreen ---- */
#flash, #fade, #heatTint {
  position: fixed; inset: 0; pointer-events: none;
}
#flash { background: #fff; opacity: 0; }
#fade  { background: #000; opacity: 0; transition: opacity 0.9s ease; }
#fade.on { opacity: 1; }
#heatTint {
  background: radial-gradient(ellipse at 50% 60%, rgba(255,120,30,0.28) 0%, rgba(255,60,10,0.12) 45%, rgba(120,10,0,0) 75%);
  opacity: 0; mix-blend-mode: screen;
}

.hidden { display: none !important; }

/* ---- HUD ---- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hud-panel {
  position: absolute; top: 18px;
  background: rgba(4, 10, 24, 0.55);
  border: 1px solid rgba(120, 170, 255, 0.25);
  border-radius: 10px;
  padding: 12px 18px;
  backdrop-filter: blur(6px);
  min-width: 190px;
}
.hud-left  { left: 18px; }
.hud-right { right: 18px; }
.hud-entry { left: 50%; transform: translateX(-50%); }

.hud-label {
  font-size: 10px; letter-spacing: 2px; color: #7fa4d9;
  margin-top: 8px;
}
.hud-label:first-child { margin-top: 0; }
.hud-value {
  font-size: 24px; font-weight: 700; color: #eaf3ff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(120, 180, 255, 0.6);
}
.hud-value.small { font-size: 16px; }
.hud-value.warn { color: #ffb36b; text-shadow: 0 0 12px rgba(255, 140, 40, 0.7); }

.massbar {
  width: 170px; height: 12px; margin: 6px 0 4px;
  border: 1px solid rgba(140, 190, 255, 0.4);
  border-radius: 6px; overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
}
#massFill {
  height: 100%; width: 33%;
  background: linear-gradient(90deg, #2e7bd8, #6fd0ff, #dff6ff);
  box-shadow: 0 0 10px #6fd0ff;
  transition: width 0.2s ease;
}

/* ---- mensajes centrales ---- */
#message {
  position: fixed; top: 22%; left: 50%; transform: translateX(-50%);
  font-size: clamp(20px, 4vw, 40px);
  font-weight: 800; letter-spacing: 4px; text-align: center;
  color: #fff; text-shadow: 0 0 24px rgba(140, 190, 255, 0.9);
  z-index: 6; pointer-events: none; white-space: nowrap;
}

/* ---- pantallas ---- */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(2, 6, 18, 0.25) 0%, rgba(0, 0, 4, 0.78) 100%);
  padding: 20px;
}

h1 {
  font-size: clamp(42px, 9vw, 96px);
  font-weight: 900; letter-spacing: 10px; line-height: 0.95;
  background: linear-gradient(180deg, #ffffff, #79b8ff 60%, #2b6fd8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(90, 160, 255, 0.55));
}
h1 span { display: block; font-size: 0.55em; letter-spacing: 22px; }

h2 {
  font-size: clamp(28px, 6vw, 54px);
  letter-spacing: 6px; color: #ffd9a8;
  text-shadow: 0 0 30px rgba(255, 150, 50, 0.8);
}

.tagline { font-size: 17px; color: #aecbf5; letter-spacing: 1px; }

.instructions {
  display: flex; flex-direction: column; gap: 9px;
  font-size: 14px; color: #c7d8f5;
  background: rgba(6, 14, 32, 0.6);
  border: 1px solid rgba(120, 170, 255, 0.22);
  border-radius: 12px; padding: 18px 26px;
}
.instructions .ice  { color: #7fdcff; text-shadow: 0 0 8px #7fdcff; }
.instructions .rock { color: #b08a64; }

button {
  font: inherit; font-size: 19px; font-weight: 800; letter-spacing: 3px;
  color: #04101f;
  background: linear-gradient(180deg, #cfe9ff, #58a4ee);
  border: none; border-radius: 10px;
  padding: 15px 44px; cursor: pointer;
  box-shadow: 0 0 26px rgba(100, 170, 255, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
button:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(130, 190, 255, 0.85); }

.hint { font-size: 12px; color: #6f8ab5; }

/* ---- estadísticas finales ---- */
#endStats {
  display: grid; grid-template-columns: auto auto;
  gap: 8px 26px; text-align: left;
  font-size: 15px;
  background: rgba(8, 12, 26, 0.65);
  border: 1px solid rgba(255, 170, 90, 0.3);
  border-radius: 12px; padding: 20px 28px;
  max-width: min(92vw, 520px);
}
#endStats .k { color: #9db4d8; letter-spacing: 1px; font-size: 12px; align-self: center; }
#endStats .v { color: #ffe9cf; font-weight: 700; font-variant-numeric: tabular-nums; }
#endStats .cls {
  grid-column: 1 / -1; margin-top: 8px; text-align: center;
  font-size: 18px; font-weight: 800; letter-spacing: 2px; color: #ff9d5c;
  text-shadow: 0 0 18px rgba(255, 120, 30, 0.8);
}

button:disabled {
  opacity: 0.55; cursor: wait; transform: none !important;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.8; } }

#bootError {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 50; max-width: 92vw;
  background: rgba(80, 10, 10, 0.92);
  border: 1px solid rgba(255, 120, 120, 0.6);
  border-radius: 10px; padding: 12px 18px;
  font-size: 14px; color: #ffd9d9; text-align: center;
}

#soundToggle {
  position: fixed; bottom: 14px; right: 16px; z-index: 20;
  font-size: 20px; cursor: pointer; opacity: 0.75;
}
#soundToggle:hover { opacity: 1; }

@media (max-width: 640px) {
  .hud-panel { padding: 8px 12px; min-width: 130px; }
  .hud-value { font-size: 17px; }
  .hud-value.small { font-size: 13px; }
  .massbar { width: 110px; }
  .hud-entry { top: auto; bottom: 16px; }
}