:root {
  --green: #0e5a2b;
  --green-hi: #2fbf5a;
  --green-dark: #03200d;
  --orange: #ff7a00;
  --orange-hi: #ffb347;
  --gold-hi: #fff7b8;
  --gold: #ffd23a;
  --gold-mid: #ffa800;
  --gold-lo: #8a4a00;
  --brown: #3b1300;
  --cream: #fff4dc;
  --magenta: #ff2bd6;
  --cyan: #2be8ff;
  /* Chunky casino lettering. Bundled/installed fonts are used first (see README), then system fallbacks. */
  --casino: "Luckiest Guy", "Lilita One", "Arial Black", "Arial Rounded MT Bold", "Noto Sans", sans-serif;
  --serif: "Cinzel", "Trajan Pro", "Optima", "Georgia", "Noto Serif", serif;
}

@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; cursor: none; user-select: none; }
body { display: grid; place-items: center; font-family: var(--casino); color: var(--cream); }

/* ===== Casino lettering: 3D extruded outline + glossy gold fill + light sweep =====
   Text lives in data-text; ::before draws the dark outline/extrusion, ::after the fill. */
.casino { position: relative; display: block; color: transparent; font-family: var(--casino); font-weight: 900; line-height: 1; white-space: nowrap; }
.casino::before, .casino::after { content: attr(data-text); position: absolute; inset: 0; }
.casino::before {
  color: var(--brown);
  -webkit-text-stroke: .16em var(--brown);
  text-shadow: 0 .05em 0 var(--brown), 0 .1em 0 #250a00, 0 .14em .08em rgba(0,0,0,.7), 0 0 .5em rgba(255, 168, 0, .55);
}
.casino::after {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 48%, transparent 58%) no-repeat,
    linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 42%, var(--gold-mid) 52%, var(--orange) 78%, var(--gold) 100%);
  background-size: 300% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .02em rgba(255, 247, 184, .8);
  animation: sweep 3.2s ease-in-out infinite;
}
@keyframes sweep { 0%, 55% { background-position: 150% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
.casino.green::after { background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.9) 48%, transparent 58%) no-repeat, linear-gradient(180deg, #eaffb0 0%, #7dff6a 40%, #1fcf4a 60%, #0a7a2a 100%); background-size: 300% 100%, 100% 100%; -webkit-background-clip: text; background-clip: text; }
.casino.green::before { color: var(--green-dark); -webkit-text-stroke-color: var(--green-dark); text-shadow: 0 .05em 0 var(--green-dark), 0 .1em 0 #011207, 0 .14em .08em rgba(0,0,0,.7), 0 0 .5em rgba(60, 255, 110, .5); }

.ribbon {
  display: inline-block; font: 900 calc(var(--u) * 1.7) var(--casino); letter-spacing: .14em; color: var(--cream);
  padding: .35em 1.4em; border-radius: .3em;
  background: linear-gradient(180deg, #ff9a2a, var(--orange) 50%, #c44a00);
  border: calc(var(--u) * .25) solid var(--gold);
  box-shadow: 0 calc(var(--u) * .4) 0 #6b2300, 0 0 calc(var(--u) * 1.5) rgba(255, 122, 0, .7);
  text-shadow: 0 .1em 0 #6b2300;
}

/* ===== Stage ===== */
#machine {
  --u: min(1vh, 1.777vw); /* 1u = 1% of stage height */
  position: relative; overflow: hidden; isolation: isolate;
  width: calc(var(--u) * 56.25); height: calc(var(--u) * 100);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4) calc(var(--u) * 1.4);
  background:
    radial-gradient(ellipse 80% 35% at 50% 22%, rgba(255, 190, 80, .75), rgba(255, 122, 0, .25) 45%, transparent 75%),
    radial-gradient(ellipse 90% 50% at 50% 75%, rgba(47, 191, 90, .35), transparent 70%),
    linear-gradient(180deg, #0b3a1c 0%, var(--green) 40%, #062b13 75%, var(--green-dark) 100%);
}
#machine::after { /* vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.6) 100%);
}
#bg-rays {
  position: absolute; left: 50%; top: 24%; z-index: -1;
  width: calc(var(--u) * 150); height: calc(var(--u) * 150); translate: -50% -50%;
  background: repeating-conic-gradient(rgba(255, 220, 120, .16) 0 7deg, transparent 7deg 20deg);
  mask-image: radial-gradient(circle, #000 10%, transparent 60%);
  animation: spin 30s linear infinite;
}
body.spinning #bg-rays, body.result #bg-rays { animation-duration: 4s; }
@keyframes spin { to { rotate: 360deg; } }

/* floating sparkles (spawned by JS) */
#sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.sparkle {
  position: absolute; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2);
  background: radial-gradient(circle, #fff 0 8%, transparent 9%),
              conic-gradient(from 45deg, transparent 0 20%, #fff8 22%, transparent 24% 45%, #fff8 47%, transparent 49% 70%, #fff8 72%, transparent 74% 95%, #fff8 97%, transparent 99%);
  border-radius: 50%; opacity: 0;
  animation: twinkle var(--d, 2.5s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }

/* ===== Progressive jackpot bar ===== */
#jackpots { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.9fr 1fr; gap: calc(var(--u) * .8); width: 100%; flex: none; align-items: center; }
.jp {
  text-align: center; border-radius: calc(var(--u) * 1);
  padding: calc(var(--u) * .4) calc(var(--u) * .5) calc(var(--u) * .5);
  background: linear-gradient(180deg, #145f2f, #052a12);
  border: calc(var(--u) * .25) solid var(--gold);
  box-shadow: 0 0 calc(var(--u) * 1.2) rgba(255, 210, 58, .6), inset 0 0 calc(var(--u) * 1) rgba(0,0,0,.7);
}
.jp-label { display: block; font: 900 calc(var(--u) * 1.1) var(--casino); letter-spacing: .12em; color: var(--orange-hi); }
.jp-value { display: block; font: 900 calc(var(--u) * 1.6) var(--casino); color: var(--gold-hi); text-shadow: 0 0 .4em var(--gold-mid); font-variant-numeric: tabular-nums; }
.jp.grand { border-width: calc(var(--u) * .35); animation: jp-glow 1.2s ease-in-out infinite; }
.jp.grand .jp-label { font-size: calc(var(--u) * 1.4); color: var(--gold); }
.jp.grand .jp-value { font-size: calc(var(--u) * 2.9); }
@keyframes jp-glow { 50% { box-shadow: 0 0 calc(var(--u) * 2.5) var(--gold), inset 0 0 calc(var(--u) * 1) rgba(0,0,0,.7); border-color: var(--gold-hi); } }

/* ===== Hero ===== */
#hero { position: relative; flex: none; width: 100%; height: calc(var(--u) * 15); margin-bottom: calc(var(--u) * -5); }
#rays {
  position: absolute; left: 50%; top: 30%; width: calc(var(--u) * 60); height: calc(var(--u) * 60); translate: -50% -50%;
  background: repeating-conic-gradient(rgba(255, 240, 180, .45) 0 5deg, transparent 5deg 15deg);
  mask-image: radial-gradient(circle, #000 0%, transparent 50%);
  animation: spin 18s linear infinite reverse;
}
#hero-img {
  position: absolute; left: 50%; bottom: 0; height: 100%; translate: -50% 0;
  filter: drop-shadow(0 0 calc(var(--u) * 2) rgba(255, 220, 150, .8));
  animation: float 3s ease-in-out infinite;
}
@keyframes float { 50% { translate: -50% calc(var(--u) * -.7); } }

/* ===== Title ===== */
#marquee { position: relative; z-index: 2; text-align: center; width: 100%; flex: none; display: flex; flex-direction: column; align-items: center; }
#hero[hidden] + #marquee { margin-top: calc(var(--u) * 2); }
#title { font-size: calc(var(--u) * 6.8); letter-spacing: .01em; animation: throb 2.4s ease-in-out infinite; }
#name { font-size: calc(var(--u) * 7.8); margin-top: calc(var(--u) * -.3); animation: throb 2.4s ease-in-out .3s infinite; }
@keyframes throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#subtitle { margin-top: calc(var(--u) * .7); font-size: calc(var(--u) * 1.5); }
.bottle {
  position: absolute; z-index: -1; top: calc(var(--u) * -1); height: calc(var(--u) * 15);
  filter: drop-shadow(0 0 calc(var(--u) * 1.5) rgba(120, 255, 140, .55)) drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1) rgba(0,0,0,.7));
}
.bottle.left { left: calc(var(--u) * -3.5); rotate: -14deg; animation: bob 2.6s ease-in-out infinite; }
.bottle.right { right: calc(var(--u) * -3.5); rotate: 14deg; animation: bob 2.6s ease-in-out 1.3s infinite; }
@keyframes bob { 50% { translate: 0 calc(var(--u) * -1); } }

/* ===== Camera: neon frame with rotating colour ===== */
#screen-frame {
  position: relative; z-index: 2; width: 100%; flex: 1 1 auto; min-height: calc(var(--u) * 16);
  padding: calc(var(--u) * .55);
  border-radius: calc(var(--u) * 2);
  background: conic-gradient(from var(--spin), var(--gold), var(--orange), var(--magenta), var(--cyan), var(--green-hi), var(--gold));
  box-shadow: 0 0 calc(var(--u) * 2.5) rgba(255, 168, 0, .6);
  animation: neon 3s linear infinite;
}
body.spinning #screen-frame, body.result #screen-frame { animation-duration: .8s; }
@keyframes neon { to { --spin: 360deg; } }
#screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--u) * 1.5); overflow: hidden; background: #000; }
#cam, #replay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#cam { filter: saturate(1.2) contrast(1.05); }
#cam.mirror { transform: scaleX(-1); }
#replay { object-fit: contain; background: #000; opacity: 0; transition: opacity .5s; }
#screen.show-replay #replay { opacity: 1; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: flash .5s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
#cam-badge {
  position: absolute; top: calc(var(--u) * 1); left: calc(var(--u) * 1.2);
  font: 700 calc(var(--u) * 1.4) system-ui, sans-serif; color: #ff4d4d; background: rgba(0,0,0,.55);
  padding: .2em .6em; border-radius: 1em; opacity: 0;
}
body.spinning #cam-badge { opacity: 1; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ===== Cabinet with chasing bulbs ===== */
#cabinet {
  --bulb: calc(var(--u) * 1.5);
  position: relative; z-index: 2; width: 100%; flex: none;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 1.5) calc(var(--u) * 4.2);
  border-radius: calc(var(--u) * 2.2);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-mid) 40%, var(--gold-lo));
  box-shadow: 0 calc(var(--u) * .7) 0 #5a2c00, 0 0 calc(var(--u) * 3) rgba(255, 168, 0, .55);
}
#cabinet::before, #cabinet::after { /* two bulb rings, alternating = chase */
  content: ""; position: absolute; inset: calc(var(--u) * .25); border-radius: inherit; pointer-events: none;
  padding: calc(var(--u) * 1); /* ring thickness */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background: radial-gradient(circle, #fff 0 18%, #fff3a0 28%, rgba(255, 200, 0, .9) 38%, transparent 52%) 0 0 / var(--bulb) var(--bulb);
  animation: bulbs .5s steps(1) infinite;
}
#cabinet::after { background-position: calc(var(--bulb) / 2) calc(var(--bulb) / 2); animation-delay: .25s; }
body.spinning #cabinet::before, body.spinning #cabinet::after { animation-duration: .14s; }
body.spinning #cabinet::after { animation-delay: .07s; }
@keyframes bulbs { 0% { opacity: 1; } 50% { opacity: .15; } }

#reels {
  --sym: calc(var(--u) * 7.2);
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .9);
  padding: calc(var(--u) * .9); border-radius: calc(var(--u) * 1.2);
  background: linear-gradient(180deg, var(--green), var(--green-dark));
  box-shadow: inset 0 0 calc(var(--u) * 1.5) #000;
}
.reel {
  height: calc(var(--sym) * 3); overflow: hidden; border-radius: calc(var(--u) * .9); position: relative;
  background: linear-gradient(180deg, #9fb5a0 0%, #f7fff4 22%, #fff 50%, #f7fff4 78%, #9fb5a0 100%);
}
.reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 26%, transparent 74%, rgba(0,0,0,.55) 100%);
}
.strip { will-change: transform; }
.cell { height: var(--sym); display: grid; place-items: center; font-size: calc(var(--sym) * .66); line-height: 1; position: relative; }
.cell img { height: calc(var(--sym) * .88); width: 100%; object-fit: contain; }
.strip.blur .cell { filter: blur(calc(var(--u) * .3)); }
#payline {
  position: absolute; left: calc(var(--u) * -.4); right: calc(var(--u) * -.4); top: 50%; height: calc(var(--u) * .5);
  transform: translateY(-50%); background: var(--orange); border-radius: 1em;
  box-shadow: 0 0 calc(var(--u) * 1.5) var(--orange), 0 0 calc(var(--u) * .5) #fff inset; pointer-events: none;
}
body.result #payline { animation: blink .25s steps(2) infinite; }
.reel.win .cell:nth-child(2)::before {
  content: ""; position: absolute; inset: calc(var(--u) * .3); border-radius: calc(var(--u) * .8);
  border: calc(var(--u) * .45) solid var(--gold); box-shadow: 0 0 calc(var(--u) * 1.5) var(--gold), inset 0 0 calc(var(--u) * 1.5) var(--gold);
  animation: blink .3s steps(2) infinite;
}
.reel.win .cell:nth-child(2) img, .reel.win .cell:nth-child(2) { animation: pop .45s ease-in-out 4; }
@keyframes pop { 50% { transform: scale(1.15); } }

/* ===== SPIN button + prompt ===== */
#cta { position: relative; z-index: 3; flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); margin-top: calc(var(--u) * -4.6); }
#spin-btn {
  position: relative; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #ffe2a8 0%, var(--orange-hi) 18%, var(--orange) 45%, #b33f00 85%);
  border: calc(var(--u) * .6) solid var(--gold);
  box-shadow: 0 calc(var(--u) * .6) 0 #6b2300, 0 0 calc(var(--u) * 3) rgba(255, 122, 0, .9), inset 0 calc(var(--u) * -1) calc(var(--u) * 1.5) rgba(0,0,0,.35);
  animation: press 1.1s ease-in-out infinite;
}
#spin-btn::before, #spin-btn::after { /* expanding pulse rings */
  content: ""; position: absolute; inset: calc(var(--u) * -.6); border-radius: 50%;
  border: calc(var(--u) * .4) solid var(--gold-hi); animation: ring 1.6s ease-out infinite;
}
#spin-btn::after { animation-delay: .8s; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@keyframes press { 50% { transform: scale(1.07); } }
#spin-btn .casino { font-size: calc(var(--u) * 3); }
body.spinning #spin-btn { animation: none; filter: grayscale(.6) brightness(.7); }
body.spinning #spin-btn::before, body.spinning #spin-btn::after { display: none; }

.pill {
  display: flex; align-items: center; gap: .7em; font: 900 calc(var(--u) * 2.1) var(--casino); letter-spacing: .08em;
  color: var(--gold-hi); padding: .35em 1.2em; border-radius: 2em;
  background: linear-gradient(180deg, #7a2bd6, #3a0a7a);
  border: calc(var(--u) * .3) solid var(--gold);
  box-shadow: 0 0 calc(var(--u) * 1.5) rgba(200, 80, 255, .8), inset 0 0 calc(var(--u) * .8) rgba(0,0,0,.5);
  text-shadow: 0 .08em 0 #2a0050, 0 0 .4em var(--gold);
}
.chev { color: var(--orange-hi); animation: blink .6s steps(2) infinite; }
.chev:last-child { animation-delay: .3s; }
body.spinning #prompt, body.result #prompt { visibility: hidden; }

/* ===== Result: BIG WIN ===== */
#result {
  --u: min(1vh, 1.777vw);
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255, 190, 60, .55), rgba(3, 32, 13, .94) 62%);
  animation: fadein .25s ease-out;
}
#result[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }
#burst {
  position: absolute; left: 50%; top: 42%; width: 170vh; height: 170vh; translate: -50% -50%;
  background: repeating-conic-gradient(rgba(255, 230, 120, .35) 0 6deg, transparent 6deg 16deg);
  mask-image: radial-gradient(circle, #000 5%, transparent 55%);
  animation: spin 7s linear infinite;
}
#result-card { position: relative; z-index: 1; width: calc(var(--u) * 52); display: flex; flex-direction: column; align-items: center; text-align: center; }
#result-kicker { font-size: calc(var(--u) * 7.8); animation: slam .6s cubic-bezier(.2, 1.8, .4, 1) both, throb 1s ease-in-out .6s infinite; }
@keyframes slam { from { transform: scale(4) rotate(-8deg); opacity: 0; } }
#result-sub { margin-top: calc(var(--u) * 1.2); animation: slam .5s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
#result-meter {
  display: flex; align-items: baseline; gap: .5em; margin-top: calc(var(--u) * 1.4);
  padding: .2em 1em; border-radius: .4em;
  background: linear-gradient(180deg, #145f2f, #052a12); border: calc(var(--u) * .3) solid var(--gold);
  box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 210, 58, .7);
  font: 900 calc(var(--u) * 3.6) var(--casino); color: var(--gold-hi); text-shadow: 0 0 .4em var(--gold-mid);
  font-variant-numeric: tabular-nums;
}
#result-meter span { font-size: .5em; color: var(--orange-hi); letter-spacing: .1em; }
#result-poster {
  width: calc(var(--u) * 30); aspect-ratio: 4 / 5; object-fit: cover; margin-top: calc(var(--u) * 1.6);
  border: calc(var(--u) * .5) solid var(--gold); border-radius: calc(var(--u) * .8);
  box-shadow: 0 0 0 calc(var(--u) * .3) var(--orange), 0 0 calc(var(--u) * 5) rgba(255, 210, 58, .8), 0 calc(var(--u)) calc(var(--u) * 3) #000;
  animation: deal .7s cubic-bezier(.2, 1.4, .4, 1) .3s both;
  rotate: -3deg;
}
@keyframes deal { from { transform: translateY(60vh) rotate(25deg); } }
#result-title { font-size: calc(var(--u) * 4.2); margin-top: calc(var(--u) * 2); animation: slam .5s cubic-bezier(.2, 1.6, .4, 1) .6s both; }
#result-text { font: 900 calc(var(--u) * 2.2) / 1.3 var(--casino); letter-spacing: .03em; color: var(--cream); margin-top: calc(var(--u) * 1); text-shadow: 0 .1em 0 #000, 0 0 .5em #000; max-width: 95%; }

/* print-on-demand prompt: mirrors the physical print button */
#print-panel {
  --btn: var(--print-color, #2fbf5a);
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--u) * 1.4);
  width: 100%; margin-top: calc(var(--u) * 1.8); padding: calc(var(--u) * 1) calc(var(--u) * 1.6) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.6); text-align: left;
  background: linear-gradient(180deg, #7a2bd6, #3a0a7a);
  border: calc(var(--u) * .35) solid var(--gold);
  box-shadow: 0 0 calc(var(--u) * 2.5) rgba(200, 80, 255, .8), inset 0 0 calc(var(--u) * 1) rgba(0,0,0,.5);
  animation: slam .5s cubic-bezier(.2, 1.6, .4, 1) .9s both;
}
#print-panel[hidden] { display: none; }
#print-btn {
  position: relative; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #eaffd8 0%, color-mix(in srgb, var(--btn), #fff 35%) 20%, var(--btn) 50%, color-mix(in srgb, var(--btn), #000 45%) 90%);
  border: calc(var(--u) * .45) solid var(--gold);
  box-shadow: 0 calc(var(--u) * .45) 0 #1b2a10, 0 0 calc(var(--u) * 2) var(--btn);
  animation: press 0.9s ease-in-out infinite;
}
#print-btn::before, #print-btn::after {
  content: ""; position: absolute; inset: calc(var(--u) * -.5); border-radius: 50%;
  border: calc(var(--u) * .35) solid var(--btn); animation: ring 1.4s ease-out infinite;
}
#print-btn::after { animation-delay: .7s; }
#print-icon { font-size: calc(var(--u) * 3.4); line-height: 1; filter: drop-shadow(0 .1em .1em rgba(0,0,0,.5)); }
#print-hint { font: 900 calc(var(--u) * 2.3) / 1.1 var(--casino); color: var(--gold-hi); letter-spacing: .03em; text-shadow: 0 .08em 0 #2a0050, 0 0 .4em var(--gold); }
#print-action { font: 900 calc(var(--u) * 1.75) / 1.2 var(--casino); color: var(--cream); letter-spacing: .04em; margin-top: calc(var(--u) * .3); }
#print-timer-track {
  position: absolute; left: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); bottom: calc(var(--u) * .6);
  height: calc(var(--u) * .5); border-radius: 1em; background: rgba(0,0,0,.45); overflow: hidden;
}
#print-timer { height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold-hi)); transform-origin: left; }
#print-panel.printing #print-btn, #print-panel.done #print-btn { animation: none; }
#print-panel.printing #print-btn::before, #print-panel.printing #print-btn::after,
#print-panel.done #print-btn::before, #print-panel.done #print-btn::after { display: none; }
#print-panel.printing #print-icon { animation: blink .4s steps(2) infinite; }
#print-panel.done #print-hint { color: #9dff8a; }
#result.jackpot { background: radial-gradient(circle at 50% 40%, rgba(255, 240, 160, .8), rgba(60, 0, 80, .94) 65%); }
#result.jackpot #result-kicker { animation: slam .6s cubic-bezier(.2, 1.8, .4, 1) both, shake .12s linear .6s 20; }
@keyframes shake { 25% { translate: -.6vh .3vh; } 75% { translate: .6vh -.3vh; } }

/* coin shower */
#coins { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.coin {
  position: absolute; top: -12vh; width: var(--s, 5vh); height: var(--s, 5vh); border-radius: 50%;
  animation: drop var(--t, 2.5s) cubic-bezier(.4, 0, .9, .6) var(--delay, 0s) forwards;
}
.coin.gold {
  background: radial-gradient(circle at 35% 30%, #fffbe0 0 10%, var(--gold) 30%, var(--gold-mid) 60%, #a05a00 100%);
  border: .4vh solid #c47a00; box-shadow: inset 0 0 0 .5vh rgba(255, 247, 184, .6);
}
.coin.gold::after { content: "✝"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 calc(var(--s, 5vh) * .55) Georgia, serif; color: #a05a00; }
.coin.stag { background: center / cover url("/img/jager-stag.png"); border: .4vh solid var(--gold); }
.coin.bottle { border-radius: 0; background: center / contain no-repeat url("/img/jager-bottle.png"); width: calc(var(--s, 5vh) * .7); height: calc(var(--s, 5vh) * 1.6); }
@keyframes drop {
  0% { transform: translate(0, 0) rotateY(0) rotate(0); }
  100% { transform: translate(var(--dx, 0), 125vh) rotateY(1080deg) rotate(var(--rot, 180deg)); }
}

#error {
  position: fixed; left: 2vh; right: 2vh; bottom: 2vh; z-index: 20; padding: 1.5vh 2vh;
  background: #b00020; color: #fff; font: 700 1.8vh system-ui, sans-serif; border-radius: 1vh;
}