/* AMG brand (amg.id): navy #25247a + white, Bebas Neue headings, Montserrat text. Fonts are OFL, vendored. */
@font-face { font-family: Bebas; src: url(assets/bebasneue-bold.woff2) format("woff2"); }
@font-face { font-family: Montserrat; src: url(assets/montserrat-regular.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: Montserrat; src: url(assets/montserrat-bold.woff2) format("woff2"); font-weight: 700; }
:root {
  --navy: #25247a;
  --blue: #2552aa;
  --accent: #b9b8ff;
  --lean: 0deg;
  --s: 1;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: radial-gradient(circle at 50% 30%, #3b3aa8 0, var(--navy) 50%, #12113f 100%);
  color: #fff;
  font: 700 3vmin/1.25 Montserrat, system-ui, sans-serif;
  cursor: none;
}
h1, .big, .label b, .voucher b { font-family: Bebas, Montserrat, sans-serif; font-weight: 400; letter-spacing: 0.02em; }

#stage {
  height: 100%;
  display: grid;
  gap: 2vmin;
  padding: 5vmin;
  grid-template: "brand brand" auto "cake panel" 1fr / 1fr 1fr;
  align-items: center;
}
@media (orientation: portrait) {
  #stage { grid-template: "brand" auto "cake" 1fr "panel" auto / 1fr; text-align: center; }
}

.brand { grid-area: brand; text-align: center; display: grid; justify-items: center; gap: 1.2vmin; }
.chip { display: inline-block; background: #fff; border-radius: 1.6vmin; padding: 1.4vmin 2.4vmin; line-height: 0; }
.chip img { height: 6vmin; }
h1 { font-size: 11vmin; line-height: 1; }
.box { background: #fff; color: var(--navy); padding: 0 0.25em; }
.date { font-size: 3vmin; color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; }

.cake { grid-area: cake; width: 100%; height: 100%; min-height: 0; max-height: 62vh; overflow: visible; }
.flame {
  transform: translate(var(--x), var(--y)) skewX(var(--lean)) scale(var(--s));
  transition: transform 120ms linear;
}
.flame .outer { fill: #ff8a00; animation: flicker 0.18s infinite alternate; transform-origin: 0 0; }
.flame .inner { fill: #fff3a0; }
@keyframes flicker { to { transform: scale(0.94, 1.06); } }

.smoke circle { fill: #dfe7f2; opacity: 0; }
.out .flame { visibility: hidden; }
.out .smoke circle { animation: smoke 2.4s ease-out forwards; }
.out .smoke circle:nth-child(2) { animation-delay: 0.15s; }
.out .smoke circle:nth-child(3) { animation-delay: 0.3s; }
@keyframes smoke {
  0% { opacity: 0.8; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-90px) scale(3); }
}
.smoke circle { transform-box: fill-box; transform-origin: center; }

.panel { grid-area: panel; }
.label { display: flex; justify-content: space-between; align-items: baseline; font-size: 3.6vmin; text-transform: uppercase; letter-spacing: 0.08em; }
.label b { font-size: 12vmin; color: #fff; font-variant-numeric: tabular-nums; }
.bar { height: 6vmin; border-radius: 3vmin; background: #ffffff2e; padding: 0.8vmin; margin: 1vmin 0 3vmin; }
#fill { height: 100%; width: 0; border-radius: 3vmin; background: linear-gradient(90deg, #8f8de0, #fff); }
#hint { font-size: 5vmin; min-height: 2.6em; }
.idle #hint { animation: pulse 1.6s ease-in-out infinite; }
#hint b { color: var(--accent); }
@keyframes pulse { 50% { transform: scale(1.05); } }

/* reward overlays everything once the candles are out */
.reward {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2vmin;
  background: radial-gradient(circle, #3b3aa8f2, #12113ff2); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 600ms 1.4s;
}
.party .reward { opacity: 1; }
.reward .big { font-size: 13vmin; line-height: 1; }
.reward .chip img { height: 12vmin; }
.reward .chip { padding: 2.4vmin 4vmin; border-radius: 2.4vmin; }
.voucher { display: flex; align-items: center; gap: 4vmin; background: #fff; color: var(--navy); border-radius: 3vmin; padding: 3vmin 4vmin; margin-top: 3vmin; text-align: left; }
.voucher small { display: block; font-size: 3vmin; color: #5b5a96; }
.voucher b { display: block; font-size: 11vmin; line-height: 1.05; letter-spacing: 0.06em; }
#qr svg { width: 26vmin; height: 26vmin; display: block; }

#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#debug { position: fixed; left: 1vmin; bottom: 1vmin; font: 2vmin/1.3 ui-monospace, monospace; background: #000a; padding: 1vmin; border-radius: 1vmin; }
#start { position: fixed; inset: 3vmin 0 auto; margin: auto; width: max-content; font: inherit; font-size: 4vmin; padding: 2vmin 4vmin; border: 0; border-radius: 4vmin; background: var(--accent); color: var(--navy); cursor: pointer; }