/* Styles for the FINAL welcome-popup scene "v3" (mini game board, fast reveal with info), chosen by the user on Oct 22, 2026.
   Base styles describe the FINAL state; animations only run with .play (reduced-motion / failed script = finished art).
   Unit: --u = card width / 100 (set by welcome-popup.js). --cy = vertical centre of the board inside .wp-scene, in units (burst + shockwaves start there). */

.wp-card.wp-v-v3{aspect-ratio:100/176;width:min(92vw,calc(88vh * 100 / 176),440px);width:min(92vw,calc(88dvh * 100 / 176),440px)}
@media (max-height:540px){
  .wp-card.wp-v-v3{aspect-ratio:auto;width:min(92vw,380px)}
  .wp-v-v3 .wp-stage{height:calc(var(--u)*124)}
}
.wp-v-v3 .wp-burst{top:calc(var(--u)*(var(--cy) + 6))}

/* ---- headline (straight, centered): slam-in without rotation ---- */
@keyframes bd-slam{0%{opacity:0;transform:scale(2.4)}60%{opacity:1}100%{transform:scale(1)}}

/* ---- board ---- */
.bd-wrap{position:absolute;left:calc(var(--u)*6);right:calc(var(--u)*6);top:calc(var(--u)*23);height:calc(var(--u)*62.4);display:flex;gap:calc(var(--u)*3);align-items:flex-start;justify-content:center}
.bd-wrap.v2{left:0;right:0;top:calc(var(--u)*19);height:calc(var(--u)*87.4)}
.bd-board{position:relative;flex:0 0 calc(var(--u)*var(--bw));height:calc(var(--u)*var(--bw));border-radius:calc(var(--u)*3);background:rgba(246,239,226,.1);box-shadow:0 0 0 calc(var(--u)*.5) rgba(255,211,107,.6)}
.bd-t{position:absolute;display:flex;align-items:center;justify-content:center;width:calc(var(--u)*var(--tw));height:calc(var(--u)*var(--tw));border-radius:calc(var(--u)*var(--tw)*.16);box-shadow:inset 0 calc(var(--u)*-.8) 0 rgba(0,0,0,.18)}
.bd-r{background:#B8322E}.bd-g{background:#1F6B45}.bd-c{background:#E9DCC4}.bd-s{background:#2F7A4F;color:#fff}
.bd-w{background:#D9A441;box-shadow:inset 0 calc(var(--u)*-.8) 0 rgba(0,0,0,.18),0 0 calc(var(--u)*4) rgba(255,211,107,.9);animation:wp-pulse 1.8s ease-in-out infinite}
.bd-t em{font:700 calc(var(--u)*var(--tw)*.223)/1 Fredoka,sans-serif;font-style:normal}
.bd-t svg{width:60%;height:60%}
.bd-p{position:absolute;width:calc(var(--u)*var(--tw)*.714);z-index:2;filter:drop-shadow(0 calc(var(--u)*.5) 0 rgba(0,0,0,.35))}
.bd-p svg{width:100%;height:auto;display:block}

/* ---- shared gold-number look ---- */
.v3-amt{position:relative;display:block;font:700 calc(var(--u)*var(--asz,17))/1 Fredoka,sans-serif;white-space:nowrap;letter-spacing:.01em;
  background:linear-gradient(180deg,#FFFBD6 6%,#FFE46B 42%,#F5A524 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:calc(var(--u)*.38) #6B3A07;paint-order:stroke fill;
  filter:drop-shadow(0 calc(var(--u)*.9) 0 #6B3A07) drop-shadow(0 0 calc(var(--u)*4) rgba(255,211,107,.85))}
.v3-amt::after{content:attr(data-text);position:absolute;inset:0;color:transparent;-webkit-text-stroke:0;filter:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) 160% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:bd-glint 3.2s ease-in-out 2.6s infinite}
.bd-sp{position:absolute;width:calc(var(--u)*3.6);height:calc(var(--u)*3.6);animation:wp-twinkle 1.8s ease-in-out infinite;filter:drop-shadow(0 0 4px #FFD36B)}
@keyframes bd-glint{0%,55%{background-position:160% 0}100%{background-position:-60% 0}}

/*---- shockwaves (hidden in the final state, they only play) ---- */
.bd-ring{position:absolute;left:50%;top:calc(var(--u)*var(--cy));width:calc(var(--u)*30);height:calc(var(--u)*30);margin:calc(var(--u)*-15) 0 0 calc(var(--u)*-15);border-radius:50%;background:radial-gradient(circle,#fff 0,#FFF2B0 28%,rgba(255,211,107,.55) 52%,transparent 70%);opacity:0;pointer-events:none;z-index:8}
.bd-ring.r2{background:none;border:calc(var(--u)*1.1) solid rgba(255,236,160,.95);box-shadow:0 0 calc(var(--u)*4) rgba(255,211,107,.9),inset 0 0 calc(var(--u)*4) rgba(255,211,107,.6)}
@keyframes bd-ring{0%{opacity:1;transform:scale(.1)}100%{opacity:0;transform:scale(3.4)}}
@keyframes bd-shake{0%,100%{transform:none}15%{transform:translate(calc(var(--u)*-1.1),calc(var(--u)*.6))}30%{transform:translate(calc(var(--u)*1.2),calc(var(--u)*-.7))}45%{transform:translate(calc(var(--u)*-.9),calc(var(--u)*-.5))}60%{transform:translate(calc(var(--u)*.8),calc(var(--u)*.6))}80%{transform:translate(calc(var(--u)*-.4),calc(var(--u)*.2))}}
@keyframes bd-late{from{opacity:0;transform:translateY(calc(var(--u)*1.5))}}

/* ================== reveal layers: blur veil, light rays, halo ================== */
.v2-veil{position:absolute;left:0;right:0;top:calc(var(--u)*-6);bottom:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 58%,rgba(4,12,8,.22),rgba(4,12,8,.62));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.v2-rays{position:absolute;left:50%;top:calc(var(--u)*var(--cy));width:calc(var(--u)*160);height:calc(var(--u)*160);margin:calc(var(--u)*-80) 0 0 calc(var(--u)*-80);border-radius:50%;z-index:6;pointer-events:none;opacity:.8;
  background:repeating-conic-gradient(rgba(255,214,102,.6) 0 5deg,transparent 5deg 15deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 62%);mask-image:radial-gradient(circle,#000 0,transparent 62%)}
.v2-halo{position:absolute;left:50%;top:50%;width:calc(var(--u)*110);height:calc(var(--u)*56);translate:-50% -50%;z-index:-1;background:radial-gradient(ellipse at center,rgba(255,226,130,.75) 0,rgba(255,190,60,.3) 42%,transparent 70%);animation:wp-pulse 2.2s ease-in-out infinite}

@keyframes v2-veil-in{from{opacity:0}}
@keyframes v2-rays-in{from{opacity:0;scale:.2}}
@keyframes v2-spin{to{transform:rotate(360deg)}}
@keyframes v2-halo-in{from{opacity:0;scale:.2}}
@keyframes v2-pill{from{opacity:0;transform:scale(.5)}}
@keyframes bd-wflash{50%{filter:brightness(2.4);box-shadow:inset 0 0 0 calc(var(--u)*.8) #fff,0 0 calc(var(--u)*12) #fff}}

/* ================== FINAL SCENE v3: fast reveal + info ================== */
.wp-v-v3{--cy:62.7;--t0:.78s;--t-title:.1s;--t-cta:.5s}
.wp-v-v3 .wp-burst i{animation-duration:1.1s!important}
.wp-v-v3 .wp-title{transform:none}
.wp-v-v3 .wp-copy{top:calc(var(--u)*3.5);z-index:9}   /* headline stays above the blur veil */
.wp-v-v3 .wp-sub{display:none}
.wp-card.play.wp-v-v3 .wp-title{animation:bd-slam .6s cubic-bezier(.2,1.4,.4,1) var(--t-title) backwards}
.v3-veil{background:radial-gradient(ellipse at 50% 58%,rgba(4,12,8,.5),rgba(4,12,8,.82))}
.v3-panel{position:absolute;left:calc(var(--u)*5);right:calc(var(--u)*5);top:calc(var(--u)*var(--cy));translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);z-index:7;pointer-events:none}
.v3-pill{padding:calc(var(--u)*1.5) calc(var(--u)*4.6) calc(var(--u)*1.5) calc(var(--u)*5.2);border-radius:999px;font:700 calc(var(--u)*4)/1 Fredoka,sans-serif;letter-spacing:.2em;color:#fff;
  background:linear-gradient(180deg,#F25C54,#B8322E 60%,#8E211E);box-shadow:0 calc(var(--u)*.8) 0 #5E1512,0 0 0 calc(var(--u)*.5) #FFD36B,0 0 calc(var(--u)*4) rgba(255,211,107,.6)}
.v3-amt{-webkit-text-stroke:calc(var(--u)*.6) #6B3A07;filter:drop-shadow(0 calc(var(--u)*1.1) 0 #6B3A07) drop-shadow(0 0 calc(var(--u)*3) #fff3b0) drop-shadow(0 0 calc(var(--u)*7) rgba(255,190,60,.95))}
.v3-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u)*2)}
.v3-chips span{padding:calc(var(--u)*1.2) calc(var(--u)*3);border-radius:999px;font:700 calc(var(--u)*3.1)/1 'DM Sans',sans-serif;letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,211,107,.7)}
.v3-top{list-style:none;margin:calc(var(--u)*.6) 0 0;padding:0;width:100%;display:grid;gap:calc(var(--u)*1.2)}
.v3-top li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:calc(var(--u)*2.4);padding:calc(var(--u)*1.3) calc(var(--u)*3);border-radius:calc(var(--u)*2.4);background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,211,107,.3);font:700 calc(var(--u)*3.5)/1.1 'DM Sans',sans-serif;color:#fff}
.v3-top b{font:700 calc(var(--u)*4.4)/1 Fredoka,sans-serif;color:#FFD36B}
.v3-top span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v3-top em{font-style:normal;color:#BFF7B2}
.v3-panel .bd-sp.s1{left:2%;top:-4%}.v3-panel .bd-sp.s2{right:2%;top:6%;width:calc(var(--u)*3.8);height:calc(var(--u)*3.8);animation-delay:.5s}.v3-panel .bd-sp.s3{right:8%;bottom:-3%;width:calc(var(--u)*3);height:calc(var(--u)*3);animation-delay:1s}

.wp-card.play.wp-v-v3 .bd-t{animation:wp-pop .2s cubic-bezier(.2,1.3,.4,1) calc(.03s + var(--i)*.008s) backwards}
.wp-card.play.wp-v-v3 .bd-w{animation:wp-pulse 1.8s ease-in-out infinite,bd-wflash .4s ease-out .7s}
.wp-card.play.wp-v-v3 .wp-scene{animation:bd-shake .35s linear .78s}
.wp-card.play.wp-v-v3 .v2-veil{animation:v2-veil-in .25s ease-out .74s backwards}
.wp-card.play.wp-v-v3 .v2-rays{animation:v2-rays-in .5s ease-out .78s backwards,v2-spin 24s linear .78s infinite}
.wp-card.play.wp-v-v3 .bd-ring{animation:bd-ring .6s ease-out .78s backwards}
.wp-card.play.wp-v-v3 .bd-ring.r2{animation:bd-ring .7s ease-out .88s backwards}
.wp-card.play.wp-v-v3 .v3-amt{animation:v3-pop .7s linear .8s backwards}
.wp-card.play.wp-v-v3 .v3-pill{animation:v2-pill .3s cubic-bezier(.2,1.4,.4,1) .92s backwards}
.wp-card.play.wp-v-v3 .v3-chips{animation:bd-late .3s ease-out 1.08s backwards}
.wp-card.play.wp-v-v3 .v3-top li{animation:bd-late .28s ease-out backwards}
.wp-card.play.wp-v-v3 .v3-top li:nth-child(1){animation-delay:1.14s}.wp-card.play.wp-v-v3 .v3-top li:nth-child(2){animation-delay:1.21s}.wp-card.play.wp-v-v3 .v3-top li:nth-child(3){animation-delay:1.28s}
.wp-card.play.wp-v-v3 .v2-halo{animation:v2-halo-in .5s ease-out .8s backwards,wp-pulse 2.2s ease-in-out 1.4s infinite}
@keyframes v3-pop{
  0%{opacity:0;transform:scale(.1) rotate(-8deg);animation-timing-function:cubic-bezier(.15,1.5,.35,1)}
  45%{opacity:1;transform:scale(1.25) rotate(2deg)}
  72%{transform:scale(.96) rotate(0)}
  100%{transform:scale(1)}}
/* small phones: the frame adds wp-tight when the stage is shorter than 121 units */
.wp-tight.wp-v-v3 .bd-wrap.v2{top:calc(var(--u)*17)}
.wp-tight.wp-v-v3 .wp-title{--tsize:8.8}
.wp-tight.wp-v-v3{--cy:60.7}
.wp-tight.wp-v-v3 .v3-top li:nth-child(3){display:none}