:root {
  --beer: #f6b40e;
  --beer-dark: #e09a00;
  --foam: #fff7e0;
  --glass-w: 220px;
  --glass-h: 360px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 50% 30%, #3a2a12 0%, #1a1207 70%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ---------- La pinte ---------- */
.pint {
  width: var(--glass-w);
  height: var(--glass-h);
  position: relative;
}

.glass {
  position: absolute;
  inset: 0;
  border: 4px solid rgba(255, 255, 255, 0.55);
  border-top: none;
  border-radius: 16px 16px 28px 28px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
  overflow: hidden;
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(1px);
}

/* La masse de bière : beaucoup plus large/haute que le verre pour couvrir
   à n'importe quelle inclinaison (jusqu'à ~35°) sans laisser voir ses bords.
   On la fait pivoter autour du centre de la SURFACE => le niveau reste
   horizontal et le corps remplit toujours tout le bas du verre. */
.beer {
  position: absolute;
  left: 50%;
  top: 25%; /* niveau de la surface : ~75% de remplissage */
  width: 320%;
  height: 320%;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 0%; /* pivot au centre de la surface (haut de l'élément) */
  will-change: transform;
  transition: transform 0.08s linear;
}

.beer-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  bottom: 0;
  background: linear-gradient(180deg, var(--beer) 0%, var(--beer-dark) 100%);
}

.beer-surface {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28px;
  background: linear-gradient(180deg, var(--beer) 0%, var(--beer-dark) 100%);
}

.foam {
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 26px;
  background:
    radial-gradient(circle at 10% 60%, var(--foam) 6px, transparent 7px),
    radial-gradient(circle at 25% 40%, var(--foam) 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, var(--foam) 7px, transparent 8px),
    radial-gradient(circle at 55% 45%, var(--foam) 9px, transparent 10px),
    radial-gradient(circle at 70% 60%, var(--foam) 7px, transparent 8px),
    radial-gradient(circle at 85% 45%, var(--foam) 8px, transparent 9px),
    linear-gradient(180deg, var(--foam) 40%, rgba(255, 247, 224, 0.85) 100%);
  border-radius: 50% 50% 0 0 / 18px 18px 0 0;
  filter: drop-shadow(0 -2px 2px rgba(255, 255, 255, 0.3));
}

/* Bulles qui remontent : placées DANS le repère de la bière, sur toute la
   largeur du rectangle de bière. Ainsi, quand le verre penche, on voit des
   bulles apparaître aussi sur les côtés. Elles montent vers la mousse. */
.bubbles {
  position: absolute;
  left: 0; /* toute la largeur du rectangle de bière */
  right: 0;
  top: 0; /* le haut = la surface / la mousse */
  height: 360px; /* zone des bulles depuis la surface vers le bas */
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.bubble {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: rise linear infinite;
}

@keyframes rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-290px) scale(1); opacity: 0; }
}

.glass-shine {
  position: absolute;
  top: 0;
  left: 14%;
  width: 18%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 16px;
  pointer-events: none;
}

/* ---------- Textes & bouton ---------- */
.hint {
  font-size: 0.95rem;
  opacity: 0.8;
  text-align: center;
  max-width: 280px;
}

.enable-btn {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1207;
  background: var(--beer);
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  box-shadow: 0 8px 20px rgba(246, 180, 14, 0.4);
  cursor: pointer;
}

.enable-btn:active {
  transform: scale(0.96);
}

.nav-btn {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1207;
  background: var(--beer);
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  box-shadow: 0 8px 20px rgba(246, 180, 14, 0.4);
  cursor: pointer;
  text-decoration: none;
  margin-top: 20px;
  display: inline-block;
}

.nav-btn:active {
  transform: scale(0.96);
}

.debug {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  opacity: 0.6;
  text-align: center;
}