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

:root {
  --gold: #ffcf3f;
  --text: #ffe7d2;
  --white: #fff6ec;
  --panel: rgba(26, 5, 46, 0.92);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0; left: 0;
  background: linear-gradient(180deg, #241058 0%, #71178f 40%, #c81653 72%, #ff4d1c 100%);
  font-family: 'Nunito', sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#game { width: 100%; height: 100%; }
#game canvas { display: block; }

/* ── кнопка звука ── */
#mute {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 50;
  width: 44px; height: 44px;
  font-size: 22px;
  line-height: 1;
  background: rgba(26, 5, 46, 0.6);
  border: 1px solid rgba(255, 207, 63, 0.45);
  border-radius: 10px;
  cursor: pointer;
}

/* ── загрузочный экран ── */
#loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: linear-gradient(180deg, #241058 0%, #71178f 45%, #c81653 80%, #ff4d1c 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
  transition: opacity 0.5s ease;
}
#loading.hidden { opacity: 0; pointer-events: none; }

.load-title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 7vmin, 44px);
  color: var(--white);
  text-shadow: 0 0 24px rgba(255, 150, 40, 0.5);
}
.load-title .g { color: var(--gold); }

.load-glasses {
  font-size: clamp(36px, 10vmin, 64px);
  animation: load-hop 0.7s cubic-bezier(.36, 0, .64, 1) infinite alternate;
  filter: drop-shadow(0 6px 10px rgba(90, 0, 40, 0.45));
}
@keyframes load-hop {
  from { transform: translateY(0) rotate(-4deg); }
  to   { transform: translateY(-18px) rotate(4deg); }
}

.load-dots { font-size: 2.4vmin; color: var(--gold); letter-spacing: 0.4em; }
.load-dots span { animation: load-dot 1.2s ease-in-out infinite; }
.load-dots span:nth-child(2) { animation-delay: 0.4s; }
.load-dots span:nth-child(3) { animation-delay: 0.8s; }
@keyframes load-dot { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

/* ── экран падения ── */
#death {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(12, 2, 26, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: opacity 0.35s ease;
}
#death.hidden { opacity: 0; pointer-events: none; }

.death-box {
  background: var(--panel);
  border: 1px solid rgba(255, 207, 63, 0.5);
  border-radius: 18px;
  padding: clamp(26px, 6vmin, 44px) clamp(22px, 6vmin, 44px);
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 60px rgba(255, 120, 30, 0.25);
}

.death-quote {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 4.6vmin, 22px);
  line-height: 1.5;
  color: var(--white);
  margin-bottom: 22px;
}

.death-stats { margin-bottom: 26px; }

.death-height {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 11vmin, 56px);
  color: var(--gold);
  line-height: 1.1;
  text-shadow: 0 0 22px rgba(255, 180, 40, 0.45);
}

.death-best {
  font-size: 15px;
  color: var(--text);
  opacity: 0.75;
  margin-top: 6px;
}

.death-new {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  margin-top: 10px;
  animation: new-rec 1s ease-in-out infinite alternate;
}
.death-new.hidden { display: none; }
@keyframes new-rec {
  from { text-shadow: 0 0 6px rgba(255, 207, 63, 0.2); }
  to   { text-shadow: 0 0 18px rgba(255, 207, 63, 0.8); }
}

.death-btn {
  display: block;
  width: 100%;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 4vmin, 17px);
  color: #5a1400;
  background: linear-gradient(135deg, #ffce3a, #ff8a1e);
  border: none;
  border-radius: 40px;
  padding: 15px 20px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 180, 50, 0.45), 0 4px 0 rgba(120, 30, 0, 0.35);
  transition: transform 0.15s;
}
.death-btn:hover { transform: translateY(-2px) scale(1.02); }
.death-btn:active { transform: translateY(1px) scale(0.98); }

.death-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text);
  opacity: 0.7;
  text-decoration: none;
}
.death-link:hover { opacity: 1; color: var(--gold); }