/* 字体样式表已移到 index.html 的 <link>，避免 @import 串行阻塞首屏 */

:root{
  --cream:#fff6dd;
  --gold-1:#fff0b8;
  --gold-2:#f6c651;
  --gold-3:#d99a24;
  --gold-4:#a06a12;
  --red-1:#f0563c;
  --red-2:#d8351f;
  --red-3:#a71f10;
  --red-4:#6d1206;
  --orange:#f08a1e;
  --green-1:#46c25f;
  --green-2:#1a8b39;
  --green-3:#0b5a22;
  --ink:#2a1405;
  --font:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{font-size:16px}
body{
  font-family:var(--font);
  background:#083d16;
  color:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
[hidden]{display:none!important}

/* ---------- outlined cartoon text ---------- */
.outlined{
  -webkit-text-stroke:.09em var(--red-4);
  paint-order:stroke fill;
  text-shadow:0 .06em 0 rgba(70,10,0,.55),0 .12em .18em rgba(0,0,0,.35);
}

/* ---------- stage ---------- */
.stage{
  position:relative;
  width:100%;
  max-width:520px;
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  overflow:hidden;
  background:#0d5a24;
  padding-bottom:2rem;
}
.bg{
  position:absolute;
  inset:-2% 0 auto 0;
  width:100%;
  aspect-ratio:820/1025;
  background:url("assets/bg.jpg") top center/cover no-repeat;
}
.bg-veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(6,52,20,.55) 0%,rgba(6,52,20,0) 16%,rgba(6,52,20,0) 40%,rgba(10,45,16,.45) 68%,rgba(12,38,12,.85) 100%);
  pointer-events:none;
}
.floor-glow{
  position:absolute;
  left:50%;
  bottom:2%;
  width:150%;
  height:30%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(255,186,66,.6) 0%,rgba(233,140,30,.28) 45%,rgba(233,140,30,0) 72%);
  pointer-events:none;
  animation:breathe 3.2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:6;padding:.7rem .8rem 0}
.xbtn{
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:rgba(28,16,4,.5);
  border:.14rem solid rgba(246,198,81,.85);
  box-shadow:inset 0 0 .5rem rgba(0,0,0,.4),0 .15rem .3rem rgba(0,0,0,.35);
  display:grid;place-items:center;
}
.xbtn svg{width:1.35rem;height:1.35rem;stroke:var(--cream);stroke-width:2.6;stroke-linecap:round;fill:none}
.xbtn:active{transform:scale(.92)}
.toplinks{position:absolute;top:.7rem;right:.8rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.pill{
  padding:.34rem .95rem .4rem;
  border-radius:999px;
  background:rgba(28,16,4,.42);
  color:var(--cream);
  font-size:.95rem;font-weight:700;letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  backdrop-filter:blur(2px);
}
.pill:active{background:rgba(28,16,4,.65)}

/* ---------- logo ---------- */
.logo{
  position:relative;z-index:5;
  margin:1.1rem auto 0;
  width:66%;
  filter:drop-shadow(0 .3rem .5rem rgba(0,0,0,.45));
  animation:logoPop .7s cubic-bezier(.2,1.5,.4,1) both;
}
.logo img{width:100%}
@keyframes logoPop{from{transform:scale(.7) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- marquee ---------- */
.marquee{
  position:relative;z-index:5;
  display:flex;align-items:center;
  width:92%;margin:1rem auto 0;
  height:2.55rem;
  padding:0 1rem 0 2.6rem;
  border-radius:999px;
  background:rgba(18,10,2,.55);
  border:.1rem solid rgba(246,198,81,.55);
  box-shadow:inset 0 0 .8rem rgba(0,0,0,.45);
}
.horn{
  position:absolute;z-index:2;left:-.15rem;top:50%;
  width:3.1rem;transform:translateY(-58%);
  filter:drop-shadow(0 .12rem .18rem rgba(0,0,0,.5));
  animation:hornShake 2.4s ease-in-out infinite;
}
@keyframes hornShake{0%,72%,100%{transform:translateY(-58%) rotate(0)}78%{transform:translateY(-58%) rotate(-9deg)}84%{transform:translateY(-58%) rotate(7deg)}90%{transform:translateY(-58%) rotate(-4deg)}}
.mq-view{height:100%;overflow:hidden;flex:1}
.mq-list{list-style:none;margin:0;padding:0;transition:transform .5s cubic-bezier(.3,.9,.3,1)}
.mq-list li{
  height:2.55rem;display:flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:700;color:var(--cream);
  text-shadow:0 1px 2px rgba(0,0,0,.7);white-space:nowrap;
}
.mq-list li b{color:#8ef07a;font-weight:800;margin-left:.3rem}

/* ---------- wheel ---------- */
.wheel{
  position:relative;z-index:4;
  width:114%;
  margin:.4rem auto 0;
  left:50%;
  transform:translateX(-50%);
  aspect-ratio:720/680;
}
.wheel-rim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 .5rem 1rem rgba(0,0,0,.45))}
.wheel-face{
  position:absolute;left:50.3%;top:61%;
  width:58.5%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--spin,270deg));
  border-radius:50%;
  background:url("assets/wheel-face.png") center/100% 100% no-repeat;
  box-shadow:0 0 1.6rem rgba(0,0,0,.35) inset;
}
.hub{
  position:absolute;left:50.3%;top:61%;
  width:23.4%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:3;
}
.hub:active .hub-plate{filter:brightness(1.12)}
.hub-medal{
  position:absolute;left:50%;top:50%;width:110%;max-width:none;
  transform:translate(-50.2%,-59%);
  pointer-events:none;
  filter:drop-shadow(0 .14rem .24rem rgba(0,0,0,.5));
}
.hub-plate{
  position:absolute;left:50%;top:50%;width:88%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:
    radial-gradient(circle at 32% 22%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 32%),
    radial-gradient(circle at 46% 34%,#7ce08a 0%,var(--green-1) 28%,var(--green-2) 64%,var(--green-3) 100%);
  box-shadow:
    0 .22rem .45rem rgba(0,0,0,.55),
    inset 0 .1rem .24rem rgba(255,255,255,.4),
    inset 0 -.3rem .5rem rgba(0,20,4,.5);
  display:grid;place-items:center;
}
.hub-text{
  font-size:3.9rem;font-weight:800;line-height:1;white-space:nowrap;
  color:#fdf3ae;
  -webkit-text-stroke:.045em var(--red-4);
  paint-order:stroke fill;
  text-shadow:0 .03em 0 rgba(255,255,255,.35),0 .05em 0 rgba(60,8,0,.6);
}
.hub-hand{
  position:absolute;left:63.3%;top:23%;
  width:76%;
  filter:drop-shadow(0 .18rem .28rem rgba(0,0,0,.45));
  animation:tap 1.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes tap{0%,100%{transform:translate(0,0)}45%{transform:translate(-16%,-18%)}}

/* ---------- start button ---------- */
.startbar{
  position:relative;z-index:6;
  width:70%;margin:.35rem auto 0;
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
}
.startbtn{
  position:relative;display:block;width:100%;
  padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.start-frame{display:block;width:100%;filter:drop-shadow(0 .3rem .5rem rgba(0,0,0,.5))}
.start-text{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  font-size:2.5rem;font-weight:800;letter-spacing:.04em;white-space:nowrap;
  color:#fdf6ae;
  -webkit-text-stroke:.04em rgba(6,58,20,.9);
  paint-order:stroke fill;
  text-shadow:0 .04em 0 rgba(8,60,22,.9),0 .08em .14rem rgba(0,0,0,.45);
}
.startbtn:active{filter:brightness(1.12)}
.startbtn.off{filter:saturate(.45) brightness(.78);cursor:default}
.chances{
  margin:0;padding:.28rem 1.1rem;border-radius:999px;
  background:rgba(12,8,2,.6);border:.1rem solid rgba(246,198,81,.4);
  font-size:1rem;font-weight:700;color:var(--cream);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.chances b{color:#8ef07a;font-weight:800;margin:0 .18rem}

.floor-deco{
  position:absolute;z-index:3;
  left:50%;bottom:-2%;
  width:150%;
  transform:translateX(-50%);
  pointer-events:none;
  filter:drop-shadow(0 -.25rem .7rem rgba(0,0,0,.4));
}
.floor-deco img{width:100%}

/* ---------- popup ---------- */
.popup{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
}
.scrim{position:absolute;inset:0;background:rgba(12,5,0,.74)}
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.spark{position:absolute;width:.4rem;height:.4rem;border-radius:50%;opacity:0;
  animation:sparkFly 1.5s ease-out forwards}
@keyframes sparkFly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  70%{opacity:.9}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}
}
.pop-inner{
  position:relative;
  width:100%;max-width:420px;
  padding-top:2.7rem;
  display:flex;flex-direction:column;align-items:center;
  transform:scale(var(--pop-scale,1));
  transform-origin:center center;
  animation:popIn .45s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes popIn{from{transform:scale(calc(var(--pop-scale,1)*.72));opacity:0}to{transform:scale(var(--pop-scale,1));opacity:1}}
.pop-x{position:absolute;top:0;right:0;z-index:9;width:2.3rem;height:2.3rem}

/* ticket card */
.ticket{
  position:relative;
  width:80%;
  padding:2.1rem 1rem 1.4rem;
  border-radius:2.4rem 2.4rem 1.1rem 1.1rem;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,var(--red-1) 0%,var(--red-2) 58%,var(--red-3) 100%);
  border:.16rem solid rgba(255,224,150,.7);
  box-shadow:0 .6rem 1.4rem rgba(0,0,0,.55),inset 0 0 1.6rem rgba(255,180,120,.25);
  text-align:center;
}
.ticket::before{
  content:"";position:absolute;left:0;right:0;top:-.05rem;height:.9rem;
  background:radial-gradient(circle at 50% 100%,rgba(255,224,150,.55) 0 .28rem,rgba(255,224,150,0) .32rem) repeat-x;
  background-size:1.1rem 1.1rem;
  opacity:.5;
}
.ticket::after{
  content:"";position:absolute;inset:.3rem;border-radius:2.1rem;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 120%,rgba(255,255,255,.055) 0 .38rem,rgba(255,255,255,0) .38rem .86rem);
  opacity:.7;
}
.film{
  position:absolute;left:50%;top:-3.1rem;width:42%;transform:translateX(-50%);
  filter:drop-shadow(0 .25rem .4rem rgba(0,0,0,.45));
  z-index:2;
}
.tk-title{
  position:relative;z-index:3;
  margin:0;
  font-size:1.55rem;line-height:1.12;font-weight:800;font-style:italic;
  color:var(--cream);
  -webkit-text-stroke:.055em var(--red-4);
  paint-order:stroke fill;
  text-shadow:0 .06em 0 rgba(80,12,0,.6),0 .14em .2rem rgba(0,0,0,.4);
}
.tk-badge{
  position:relative;z-index:3;
  display:inline-block;margin-top:.3rem;
  padding:.1rem .5rem .14rem;
  font-size:.62rem;font-weight:800;font-style:italic;
  color:#ffe9a8;background:rgba(109,18,6,.55);
  border-radius:999px;border:.08rem solid rgba(255,224,150,.5);
}

/* bulb board */
.board{
  position:relative;z-index:3;
  margin:1.15rem auto 0;
  width:94%;
  padding:.62rem;
  border-radius:1rem;
  background:linear-gradient(180deg,#f7b64a,#e08a24);
  box-shadow:0 .25rem .6rem rgba(0,0,0,.4);
}
.board::before{
  content:"";position:absolute;inset:0;border-radius:1rem;
  background:radial-gradient(circle at center,#ffe9a8 0 .19rem,rgba(0,0,0,0) .24rem) repeat;
  background-size:.62rem .62rem;
}
.board-face{
  position:relative;
  border-radius:.55rem;
  padding:1.05rem .7rem .8rem;
  background:
    radial-gradient(circle at 50% 40%,#fffaf0 0%,#ffeecb 70%,#f6d9a4 100%);
  box-shadow:inset 0 0 .5rem rgba(180,110,30,.35);
}
.board-face::after{
  content:"";position:absolute;inset:.34rem;pointer-events:none;
  background:
    linear-gradient(var(--gold-4),var(--gold-4)) left top/.85rem .12rem no-repeat,
    linear-gradient(var(--gold-4),var(--gold-4)) left top/.12rem .85rem no-repeat,
    linear-gradient(var(--gold-4),var(--gold-4)) right top/.85rem .12rem no-repeat,
    linear-gradient(var(--gold-4),var(--gold-4)) right top/.12rem .85rem no-repeat,
    linear-gradient(var(--gold-4),var(--gold-4)) left bottom/.85rem .12rem no-repeat,
    linear-gradient(var(--gold-4),var(--gold-4)) left bottom/.12rem .85rem no-repeat,
    linear-gradient(var(--gold-4),var(--gold-4)) right bottom/.85rem .12rem no-repeat,
    linear-gradient(var(--gold-4),var(--gold-4)) right bottom/.12rem .85rem no-repeat;
}
.board-tag{
  position:absolute;left:.55rem;top:-.72rem;z-index:4;
  padding:.16rem .7rem .2rem;
  border-radius:999px;
  font-size:.78rem;font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--red-1),var(--red-3));
  border:.09rem solid rgba(255,224,150,.75);
  box-shadow:0 .12rem .25rem rgba(0,0,0,.35);
}
.amount{display:flex;align-items:flex-start;justify-content:center;gap:.35rem;line-height:.9}
.amount em{
  font-style:italic;font-weight:800;font-size:1.5rem;margin-top:.35rem;
  background:linear-gradient(180deg,#f6a02a,#d9541a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.amount b{
  font-style:italic;font-weight:800;font-size:3.5rem;letter-spacing:-.02em;
  background:linear-gradient(180deg,#f9b53c 8%,#ef6a1e 62%,#c93b12 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .05em 0 rgba(255,255,255,.5)) drop-shadow(0 .09em 0 rgba(150,55,10,.4));
}
.amount-sub{
  font-style:italic;font-weight:800;font-size:1.3rem;margin-top:.1rem;
  background:linear-gradient(180deg,#f6a02a,#d9541a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.corn{position:absolute;bottom:1.5rem;width:19%;filter:drop-shadow(0 .2rem .3rem rgba(0,0,0,.4))}
.corn-l{left:-8%;transform:rotate(-9deg)}
.corn-r{right:-8%;transform:rotate(9deg) scaleX(-1)}
.orn{position:absolute;bottom:.45rem;width:1.9rem;height:1.05rem;
  background:linear-gradient(180deg,#fff0b8,#f0be55 45%,#a06a12);
  border-radius:1rem 1rem .25rem .25rem;
  box-shadow:0 .1rem .22rem rgba(0,0,0,.4)}
.orn-l{left:.55rem;transform:rotate(-10deg)}
.orn-r{right:.55rem;transform:rotate(10deg)}

/* pedestal */
.pedestal{
  position:relative;width:58%;height:2.5rem;margin-top:-.15rem;
  filter:drop-shadow(0 .3rem .5rem rgba(0,0,0,.45));
}
.pedestal::before{
  content:"";position:absolute;left:50%;bottom:-.25rem;width:150%;height:1.7rem;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,214,110,.6) 0 35%,rgba(255,190,60,0) 72%);
}
.pedestal i{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(180deg,#fff0b8 0%,#f6c651 34%,#c8891a 70%,#8a5a10 100%);
  box-shadow:0 .1rem .2rem rgba(0,0,0,.3)}
.pedestal i:nth-child(1){bottom:1.3rem;width:38%;height:.95rem}
.pedestal i:nth-child(2){bottom:.58rem;width:62%;height:1.05rem}
.pedestal i:nth-child(3){bottom:0;width:88%;height:1.1rem}

.cta-line{
  margin:.85rem 0 .55rem;
  font-size:1.4rem;font-weight:800;font-style:italic;
  color:var(--cream);
  -webkit-text-stroke:.05em var(--orange);
  paint-order:stroke fill;
  text-shadow:0 .05em 0 rgba(120,50,0,.55),0 .1em .2rem rgba(0,0,0,.45);
  animation:ctaBlink 1.4s ease-in-out infinite;
}
@keyframes ctaBlink{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* envelopes */
.envs{display:flex;justify-content:center;gap:.7rem;width:100%;margin-top:5rem}
.env{position:relative;width:28%;max-width:7.2rem;aspect-ratio:220/300;transition:transform .3s cubic-bezier(.2,1.3,.4,1)}
.env-body{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 .25rem .45rem rgba(0,0,0,.5));
  transition:transform .35s ease}
.env:not(.open):hover .env-body,.env:not(.open):active .env-body{transform:translateY(-6%)}
.env-card{
  position:absolute;left:0;right:0;bottom:86%;
  padding:.4rem .2rem .45rem;
  border-radius:.6rem .6rem .25rem .25rem;
  background:linear-gradient(180deg,#fffdf6,#ffe9c9);
  border:.12rem solid #f0c477;
  box-shadow:0 .2rem .5rem rgba(0,0,0,.45);
  text-align:center;color:var(--red-3);line-height:1.1;
  opacity:0;transform:translateY(120%);
  transition:transform .45s cubic-bezier(.2,1.2,.35,1),opacity .3s ease;
  pointer-events:none;
}
.env.open .env-card{opacity:1;transform:translateY(0)}
.env.open .env-body{transform:translateY(8%)}
.env-card .s1{display:block;font-size:.78rem;font-weight:800;color:#c2622a}
.env-card .rule{display:block;width:42%;height:.1rem;background:#e2b06a;margin:.22rem auto}
.env-card .s2{display:block;font-size:.92rem;font-weight:800;color:var(--red-2)}
.env-card .win-h{display:block;font-size:.88rem;font-weight:800;color:var(--red-2);margin-bottom:.22rem}
.env-card .ticket-mini{display:block;border-radius:.4rem;padding:.22rem .1rem;
  background:linear-gradient(180deg,#fff3d2,#f7dda6);
  border:.1rem dashed #e0a94f}
.env-card .m1{display:block;font-size:.95rem;font-weight:800;font-style:italic;color:#e0641c;line-height:1.05;white-space:nowrap}
.env-card .m2{display:block;font-size:.66rem;font-weight:800;font-style:italic;color:#c2622a}
.env.win{transform:scale(1.08);z-index:5}
.env.win .env-card{box-shadow:0 0 1.4rem rgba(255,206,100,.9),0 .25rem .6rem rgba(0,0,0,.5);
  border-color:#ffd77e}
.env.dim{opacity:.55;filter:saturate(.7)}

/* ---------- bottom sheet ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.sheet-mask{position:absolute;inset:0;background:rgba(8,4,0,.66)}
.sheet-card{
  position:relative;width:100%;max-width:520px;margin:0 auto;
  max-height:72vh;overflow:auto;
  padding:1.4rem 1.1rem 1.8rem;
  border-radius:1.4rem 1.4rem 0 0;
  background:linear-gradient(180deg,#14632c,#0a3d18);
  border-top:.16rem solid rgba(246,198,81,.8);
  box-shadow:0 -.4rem 1.6rem rgba(0,0,0,.55);
  animation:sheetUp .32s cubic-bezier(.2,1,.3,1) both;
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-x{position:absolute;top:.8rem;right:.8rem;width:2rem;height:2rem;border:.1rem solid rgba(246,198,81,.6);border-radius:50%;display:grid;place-items:center}
.sheet-x svg{width:1.1rem;height:1.1rem;stroke:var(--cream);stroke-width:2.6;fill:none;stroke-linecap:round}
.sheet-title{margin:0 0 .6rem;font-size:1.25rem;font-weight:800;color:#ffe6a8;
  text-shadow:0 .06em 0 rgba(0,0,0,.45)}
.sheet-body{font-size:.95rem;line-height:1.65;color:#eaf6e2}
.sheet-body ol,.sheet-body ul{margin:0;padding-left:1.2rem}
.sheet-body li{margin-bottom:.4rem}
.prize-row{display:flex;align-items:center;gap:.7rem;padding:.45rem 0;border-bottom:1px dashed rgba(255,230,170,.22)}
.prize-row .dot{width:1.5rem;height:1.5rem;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#fff0b8,#f0a72e 60%,#a05a10);
  box-shadow:0 .1rem .25rem rgba(0,0,0,.4)}
.prize-row .nm{font-weight:700}

@media (min-width:520px){
  .stage{box-shadow:0 0 3rem rgba(0,0,0,.6)}
}