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

:root {
--scene-duration: 1s;
}

@font-face {
font-family: 'Cinzel';
src: url('/assets/fonts/Cinzel-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Cinzel';
src: url('/assets/fonts/Cinzel-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Brygada 1918';
src: url('/assets/fonts/Brygada1918-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

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

body { background: #2B124C; }


.stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 20px;
  padding-top: max(40px, env(safe-area-inset-top));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  text-align: center;
  overflow: visible;
}

html.standalone .stage {
  min-height: 100vh;
  min-height: 100dvh;
}

.gradient-strip {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 6px;
background-image: url('assets/gradient-strip.png');
background-size: cover;
z-index: 6;
}

.reveal-area {
position: relative;
width: 320px;
height: 460px;
z-index: 1;
cursor: pointer;
}

.wrapper-layer,
.ticket-layer {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}

.frame-img {
width: 100%;
height: 100%;
object-fit: contain;
}

.wrapper-layer.tearing-out {
animation: fadeOutWrapper 0.4s ease forwards;
}

@keyframes fadeOutWrapper {
to { opacity: 0; transform: scale(1.05); }
}

.ticket-layer {
opacity: 0;
pointer-events: none;
flex-direction: column;
gap: 16px;
}
.ticket-layer.visible {
opacity: 1;
pointer-events: auto;
}

.glow-img {
position: absolute;
width: 140%;
top: -20%;
left: -20%;
opacity: 0;
filter: blur(2px);
transition: opacity 1s ease;
z-index: 0;
}
.ticket-layer.visible .glow-img {
opacity: 0.9;
animation: pulseGlow 2.4s ease-in-out infinite;
}

@keyframes pulseGlow {
0%, 100% { opacity: 0.6; transform: scale(1); }
50%      { opacity: 1;   transform: scale(1.05); }
}

.ticket-stack {
position: relative;
width: 220px;
height: 300px;
z-index: 1;
}

.ticket-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transform: scale(0.4) rotate(-8deg);
opacity: 0;
transition: transform 0.8s cubic-bezier(.34,1.56,.64,1), opacity 0.5s ease;
}

.ticket-color { z-index: 0; }

/* The white-fill trick — turns the ticket into a solid white silhouette */
.ticket-mask {
z-index: 1;
filter: brightness(0) invert(1);
transition: transform 0.8s cubic-bezier(.34,1.56,.64,1), opacity 0.8s ease 0.3s;
}

.ticket-layer.visible .ticket-color,
.ticket-layer.visible .ticket-mask {
transform: scale(1) rotate(0deg);
opacity: 1;
}

/* Fading the mask out reveals the true gold/silver colors underneath */
.ticket-layer.revealed .ticket-mask {
opacity: 0;
}

.ticket-caption {
position: absolute;
bottom: -40px;
width: 100%;
color: #f5d98a;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.05em;
opacity: 0;
transition: opacity 0.6s ease;
}
.ticket-layer.revealed .ticket-caption {
opacity: 1;
}

.action-btn {
z-index: 3;
padding: 14px 32px;
font-size: 1rem;
font-weight: 700;
border: none;
background: linear-gradient(135deg, #f7d774, #c9a13b);
color: #2b1608;
cursor: pointer;
letter-spacing: 0.04em;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
transition: transform 0.2s ease, opacity 0.3s ease;
}
.action-btn:hover { transform: translateY(-2px); }
.action-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.action-btn.replay {
background: linear-gradient(135deg, #c8a4e0, #7c4fae);
color: #fff;
}

/* ---- Hint fade states (generic, not scoped to .hint only) ---- */
.hint {
color: #b9a8d6;
font-size: 0.85rem;
z-index: 3;
font-family: Cinzel, serif;
font-weight: 400;
opacity: 1;
transition: opacity 0.4s ease;
}

.hint-text {
font-family: Cinzel, serif;
font-weight: 400;
color: white;
font-size: clamp(1.25rem, 5vw, 2rem);
opacity: 1;
transition: opacity 0.4s ease;
}

.fading {
opacity: 0;
}
.hidden {
display: none;
pointer-events: none;
}

.hint-actions {
margin-top: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
opacity: 0;                     
transition: opacity 0.4s ease;  
}

.headline {
font-family: Cinzel, serif;
font-size: clamp(1.35rem, 5.2vw, 2rem);
font-weight: 700;
line-height: 120%;
text-align: center;
text-wrap: balance;
background: var(--Gold, linear-gradient(94deg, #D9A450 0%, #FCF395 50.01%, #BD7824 100.01%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #D9A450;
opacity: 1;
transition: opacity 0.4s ease;
}

.headline.fading {
opacity: 0;
}

.headline-wrap {
position: relative;
display: grid;
width: min(37.5rem, 100%);
min-height: 7.2rem;          /* keeps desktop layout identical */
opacity: 0;
transition: opacity 0.4s ease;
}

.headline-wrap .headline {
grid-area: 1 / 1;            /* both h1s share one cell → crossfade still works */
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.scene {
position: relative;
width: min(340px, 100%);
aspect-ratio: 340 / 460;
cursor: pointer;
transform: scale(0);
transition: transform var(--scene-duration) cubic-bezier(0.34, 1.56, 0.64, 1);

touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}

.scene img { -webkit-touch-callout: none; }

.stage.stage-loaded .scene {
transform: scale(1);
}

.stage.stage-loaded .headline-wrap,
.stage.stage-loaded .hint-actions {
opacity: 1;
transition-delay: var(--scene-duration);
}

.glow {
position: absolute;
top: 50%;
left: 50%;
width: 210%;
aspect-ratio: 1 / 1;
height: auto;
transform: translate(-50%, -50%) scale(1);
background: url('/assets/glow-gold.png') center / contain no-repeat;
z-index: 0;
pointer-events: none;
opacity: 0.45;                 /* starting state, was missing before */
animation: golden-glow-pulse 2.8s ease-in-out infinite;
will-change: opacity, transform;
}

.glow-mask {
position: absolute;
top: 67%;
left: 50%;
width: 100vw;
height: 10rem;                   /* match the gradient-strip asset's aspect/height */
transform: translateX(-50%);
background: url('/assets/gradient-strip.png') center top / cover no-repeat;
z-index: 6;                      
pointer-events: none;
}

@keyframes golden-glow-pulse {
0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.12); }
}

/* Layer order, back to front:
1. glow
2. confetti canvas
3. chocolate bar (real object)
4. ticket
5. wrapper (front-most, tears away)      */

.confetti-canvas,
#confetti-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 9999;
pointer-events: none;
}

.chocolate-bar {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-start;   /* anchor from the top, not center vertically */
justify-content: center;
pointer-events: none;
  opacity: 0;
}

.chocolate-bar.show {
opacity: 1;
}

.chocolate-bar img {
width: 92%;
height: auto;              /* let height follow the image's own ratio */
object-fit: contain;       /* harmless now, kept as a safe fallback */
object-position: top center;
}


/* ---- Grand prize fade-in ---- */
.grand-prize {
display: none;
opacity: 0;
width: min(40rem, 100%);
background: var(--Golden-Diagnal, linear-gradient(128deg, #BD7824 0%, #FCF395 50%, #BD7824 100%));
color: black;
padding: clamp(1.5rem, 5vw, 3rem);
text-align: center;
font-family: "Brygada 1918";
font-size: 1rem;
font-weight: 400;
line-height: 120%;
}
.grand-prize h2 {
color: #480401;
font-family: Cinzel;
font-size: clamp(2rem, 8vw, 3rem);
font-weight: 400;
line-height: 120%;
margin-bottom: 8px;
}

.grand-prize.visible {
display: block;
animation: fadeInPrize 0.6s ease forwards;
}

@keyframes fadeInPrize {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}

.action-btn.back-btn {
font-family: Cinzel, serif;
font-weight: 400;
padding: 0.75rem 1.5rem;
border: 1px solid white;
background: transparent;
color: white;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.8rem;
cursor: pointer;
}

.ticket-window {
position: absolute;
top: 50%;
left: 50%;
width: 92%;
aspect-ratio: 678 / 888;
transform: translate(-50%, -50%);
overflow: hidden;          /* default/idle state */
z-index: 3;
pointer-events: none;
}

/* Ticket is rising out of the bar: clip only the bottom edge,
  let the top stay fully visible so the ticket can poke above the frame */
.ticket-window.rising {
overflow: visible;
clip-path: inset(-999px 0 0 0); /* top: open, bottom: clipped at box edge */
}

/* Ticket has fully emerged: normal clipping on all sides */
.ticket-window.released {
overflow: visible;
clip-path: none;
}

.ticket-3d {
--eject-scale: 1.4;
position: absolute;
top: 67%;
left: 50%;
width: min(100%, 500px);
aspect-ratio: 8334 / 3705;
height: auto;
margin: 0;
opacity: 1;
transform: translate(-50%, -50%) scale(var(--eject-scale)) rotate(0deg);
transition: opacity 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
            transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.ticket-3d.visible {
opacity: 1;
transform: translate(-50%, -50%) scale(var(--eject-scale)) rotate(0deg);
}

.ticket-3d.rising {
transform: translate(-50%, -200%) scale(var(--eject-scale)) rotate(0deg);
transition: transform 0.45s ease-out;
}

.ticket-3d.popped {
animation: ticketPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
            ticketFloatBig 3.2s ease-in-out 0.45s infinite;
}

.ticket-3d.ejected {
transform: translate(-50%, -143%) scale(var(--eject-scale)) rotate(-8deg);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ticketPop {
from { transform: translate(-50%, -143%) scale(var(--eject-scale)) rotate(-8deg); }
to   { transform: translate(-50%, -143%) scale(calc(var(--eject-scale) * 1.15)) rotate(-8deg); }
}

@keyframes ticketFloatBig {
0%, 100% { transform: translate(-50%, -143%) scale(calc(var(--eject-scale) * 1.15)) rotate(-8deg); }
50%      { transform: translate(-50%, calc(-143% - 14px)) scale(calc(var(--eject-scale) * 1.15)) rotate(-8deg); }
}

.ticket-flip-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.85s ease-in-out;
}
.ticket-flip-inner.flipped {
transform: rotateY(180deg);
}

.ticket-face {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
backface-visibility: hidden;
}
.ticket-front {
filter: brightness(0) invert(1);
transform: rotate(90deg) scale(1.24, 1.45);
}

.ticket-back {
transform: rotateY(180deg);
}

.wrapper-frame {
position: absolute;
left: 0;
bottom: 0;
top: auto;
z-index: 5;
width: 100%;
height: auto;
object-fit: contain;
pointer-events: none;
transition: opacity 0.4s ease 0.5s;
}

/* --- Consolation (silver) prize box — overrides the gold box look --- */
.consolation-prize {
background: #2B124C;
border: 1px solid #ffffff;
border-radius: 0;
color: #fff;
}
.consolation-prize h2 {
color: #D9A450; /* fallback for browsers without background-clip support */
background: var(--Gold, linear-gradient(94deg, #D9A450 0%, #FCF395 50.01%, #BD7824 100.01%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.consolation-prize p {
color: #fff;
}

.btn_consolation {
display: inline-block;
margin-top: 1.5rem;
border: 1px solid #F0C842;
background: linear-gradient(180deg, rgba(240, 200, 66, 0.50) 0%, #F0C842 35%, #FFF 100%);
color: #000;
font-family: "Brygada 1918";
font-size: 1rem;
font-weight: 600;
line-height: 150%;
text-transform: uppercase;
padding: 0.75rem 2rem;
text-decoration: none;
cursor: pointer;
}

@keyframes shake {
0%, 100% { translate: 0 0;      rotate: 0deg;  }
20%      { translate: -2px 1px; rotate: -1deg; }
40%      { translate: 2px -1px; rotate: 1deg;  }
60%      { translate: -2px 1px; rotate: -1deg; }
80%      { translate: 2px -1px; rotate: 1deg;  }
}

.shake-target {
position: absolute;
inset: 0;
}

.shake-target.shake {
animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@media (max-width: 480px) {
.stage { gap: 16px; padding-left: 16px; padding-right: 16px; }
.headline-wrap { min-height: 0; }
.hint-actions { margin-top: 1rem; }
.ticket-3d { --eject-scale: 1.125; } 
.btn_consolation { display: block; width: 100%; }
.grand-prize p { font-size: 0.95rem; }
  .reveal-area { width: 260px; height: 380px; }
.ticket-stack { width: 180px; height: 240px; }
}

.already-played-msg { display: none; }
.already-played-msg.visible { display: block; }