:root{
  --night:#04142a; --gold:#f5c451; --gold2:#ffe9a8; --red:#8e1424; --ice:#a8dcff; --snow:#f4f8ff; --ink:#10233a;
  --display:"Cinzel Decorative","Cinzel",Georgia,serif; --serif:"Cinzel",Georgia,serif; --body:"Mulish",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:radial-gradient(120% 80% at 50% 30%,#0b3a63,#04142a 70%);color:var(--snow);font-family:var(--body);overflow:hidden}
#viewport{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0;user-select:none;-webkit-user-select:none;touch-action:manipulation;cursor:pointer;overflow:hidden;border-radius:18px;box-shadow:0 0 80px rgba(0,0,0,.6)}
#world{position:absolute;inset:0}
canvas.layer{position:absolute;left:0;top:0;width:1080px;height:1920px;pointer-events:none}
#bg{z-index:0}
#fx{z-index:4}
.boardFrame{position:absolute;left:44px;top:520px;width:992px;height:1026px;border-radius:30px;border:3px solid rgba(255,214,130,.85);box-shadow:0 0 26px rgba(255,196,90,.75),inset 0 0 30px rgba(255,196,90,.35);z-index:1;background:rgba(4,20,42,.25)}
#doors{position:absolute;inset:0;z-index:2}
.ghost{position:absolute;left:0;top:0;width:200px;height:290px;transform-origin:100px 145px;pointer-events:none;opacity:0;filter:blur(9px)}
.ghost::before{content:"";position:absolute;left:10px;top:10px;width:180px;height:262px;border-radius:90px 90px 8px 8px;background:linear-gradient(90deg,#5a2e15,#a0602f 50%,#5a2e15);box-shadow:0 0 0 10px rgba(46,122,70,.7),0 0 30px 12px rgba(255,214,130,.55)}
.door{position:absolute;left:0;top:0;width:200px;height:290px;transform-origin:100px 145px;will-change:transform;transition:opacity .4s}
.door.gone{opacity:0;pointer-events:none}
.door svg{position:absolute;display:block;overflow:visible}
.door .back{left:0;top:0;width:200px;height:290px}
.door .opening{position:absolute;left:22px;top:22px;width:156px;height:242px;border-radius:78px 78px 0 0;overflow:hidden}
.door .inner{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,#163a5c,#050c16 80%);transition:background .3s}
.door .rays{position:absolute;left:50%;top:55%;width:420px;height:420px;margin:-210px 0 0 -210px;background:repeating-conic-gradient(from 0deg,rgba(255,244,200,.55) 0 7deg,transparent 7deg 18deg);border-radius:50%;opacity:0;transition:opacity .4s;animation:spin 7s linear infinite}
.door.lit .inner{background:radial-gradient(circle at 50% 58%,#fffbe6 0%,#ffe08a 22%,#f2a93a 50%,#7a3a0c 100%)}
.door.lit .rays{opacity:1}
.door.icelit .inner{background:radial-gradient(circle at 50% 58%,#ffffff 0%,#c9ecff 24%,#5fb4ef 52%,#0d3a66 100%)}
.door.icelit .rays{opacity:1;background:repeating-conic-gradient(from 0deg,rgba(210,240,255,.55) 0 7deg,transparent 7deg 18deg)}
.door.soft .inner{background:radial-gradient(circle at 50% 55%,#fff6dc 0%,#f6d38a 45%,#9a5a1c 100%)}
.door .content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:60px 10px 20px;box-sizing:border-box;opacity:0;transition:opacity .3s}
.door .content.on{opacity:1}
.door .content b{font-family:var(--serif);font-weight:900;font-size:19px;line-height:1.1;color:#3a1d06}
.door .content span{font:800 16px/1.2 var(--body);color:#4a2a0a}
.door .content.none b{color:#dcecf8}
.door .content.none span{color:#a8c4dc}
.door .content.icon{padding:40px 6px 10px}
.door .content svg{position:static;flex:none}
.door .content.icon svg{width:120px;height:120px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.door .leaves{position:absolute;left:22px;top:22px;width:156px;height:242px;perspective:700px}
.door .leaf{position:absolute;top:0;width:78px;height:242px;transition:transform .55s cubic-bezier(.2,.85,.25,1.05)}
.door .leaf svg{width:78px;height:242px}
.door .leaf.l{left:0;transform-origin:0 50%}
.door .leaf.r{left:78px;transform-origin:100% 50%}
.door .leaf.r svg{transform:scaleX(-1)}
.door.open .leaf.l{transform:rotateY(-112deg)}
.door.open .leaf.r{transform:rotateY(112deg)}
.door .front{left:0;top:0;width:200px;height:290px;pointer-events:none}
.door .wreath{position:absolute;left:58px;top:78px;width:84px;height:100px;transition:opacity .3s,transform .3s,filter .6s;pointer-events:none}
.door.open .wreath{opacity:0;transform:scale(.7) translateY(-20px)}
.door .dstar{position:absolute;left:35px;top:85px;width:130px;height:130px;opacity:0;pointer-events:none;filter:drop-shadow(0 0 14px #ffd36b) drop-shadow(0 0 34px rgba(255,190,70,.9));transition:opacity .2s}
.door .dstar.on{opacity:1}
.door .dclock{position:absolute;left:40px;top:90px;width:120px;height:120px;opacity:0;pointer-events:none;filter:drop-shadow(0 0 14px #8fd3ff) drop-shadow(0 0 34px rgba(110,190,255,.9));transition:opacity .2s}
.door .dclock.on{opacity:1}
.door .la{animation:twinkle 1.3s ease-in-out infinite alternate}
.door .lb{animation:twinkle 1.3s ease-in-out .65s infinite alternate}
.door.flying .la,.door.flying .lb{animation-duration:.25s}
.goldmode .door .la,.goldmode .door .lb{animation-duration:.18s}
.goldmode .door .front circle{fill:#ffd24a}
.door.pickable{cursor:pointer}
.door.pickable .back{animation:pickglow 1s ease-in-out infinite}
.door.float .back{filter:drop-shadow(0 0 18px rgba(255,214,120,1)) drop-shadow(0 0 40px rgba(255,190,70,.8))}
.door.matched .back{filter:drop-shadow(0 0 14px rgba(255,214,120,.9))}
.door.matched{cursor:default}
.door .plate{position:absolute;left:-4px;top:262px;width:208px;height:28px;display:flex;align-items:center;justify-content:center;font:900 15px/1 var(--serif);color:var(--gold2);letter-spacing:.02em;opacity:0;transition:opacity .4s;white-space:nowrap;overflow:hidden;text-shadow:0 1px 0 #000}
.plates .door .plate{opacity:1}
.flytoken{position:absolute;left:0;top:0;z-index:3;pointer-events:none}
#fly{width:150px;height:150px;opacity:0;filter:drop-shadow(0 0 16px #ffd36b) drop-shadow(0 0 40px rgba(255,190,70,.9))}

.ui{position:absolute;z-index:5}
.title{left:30px;top:52px;width:700px;text-align:center;pointer-events:none}
.title .t{font-family:var(--display);font-weight:900;line-height:1;background:linear-gradient(180deg,#fffbe6 0%,#f9dc85 38%,#d9952a 62%,#fff0b0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #6b3d0a) drop-shadow(0 0 20px rgba(255,200,90,.55))}
.title .t1{font-size:78px}
.title .t2{font-size:66px;margin-top:10px}
.title .holly{position:absolute;width:150px;height:110px}
.title .swirl{display:block;margin:14px auto 0;width:520px;height:40px}
.lb{left:742px;top:34px;width:308px;height:398px;border-radius:22px;background:linear-gradient(180deg,#a51a2c,#5a0812);border:4px solid var(--gold);box-shadow:0 0 22px rgba(255,190,80,.55),inset 0 0 22px rgba(0,0,0,.45);padding:48px 16px 14px;box-sizing:border-box;pointer-events:none}
.lb .garland{position:absolute;left:-14px;right:-14px;top:-26px;height:60px}
.lb h3{margin:0 0 10px;font-family:var(--serif);font-weight:900;font-size:27px;line-height:1.05;text-align:center;color:var(--gold2);text-shadow:0 0 10px rgba(255,200,90,.6)}
.lb ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lb li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;height:41px;padding:0 10px 0 4px;border-radius:10px;background:rgba(40,4,10,.55);font-family:var(--serif);font-weight:700;font-size:21px;color:#fff4dc;font-variant-numeric:tabular-nums}
.lb li .rk{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:900;color:#3a2206;background:linear-gradient(#ffe9a8,#d9952a)}
.lb li:nth-child(2) .rk{background:linear-gradient(#ffffff,#9aa6b8)}
.lb li:nth-child(3) .rk{background:linear-gradient(#ffd2a8,#b0652a)}
.lb li .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb li.me{background:linear-gradient(90deg,rgba(255,214,120,.55),rgba(120,20,30,.6));box-shadow:0 0 0 2px var(--gold2),0 0 16px rgba(255,214,120,.7)}
.lb li.empty{grid-template-columns:1fr;text-align:center;font-size:19px;color:#ffd9de}
.hud{left:40px;top:452px;width:1000px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.pill{font-family:var(--serif);font-weight:900;color:var(--gold2);background:linear-gradient(180deg,rgba(10,40,72,.92),rgba(4,18,36,.92));border:3px solid var(--gold);border-radius:999px;box-shadow:0 0 18px rgba(255,196,90,.55),inset 0 0 12px rgba(255,196,90,.25);padding:10px 24px;font-size:28px;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(255,200,90,.5)}
.pill.timer{font-size:36px;padding:12px 30px}
.pill.timer.low{animation:lowtime .5s ease-in-out infinite alternate;border-color:#ff7a7a}
.pill small{font-size:.62em;color:#d8e8f5;letter-spacing:.06em;margin-right:8px}
.banner{left:40px;top:1572px;width:1000px;text-align:center;font-family:var(--serif);font-weight:900;font-size:54px;line-height:1.1;color:var(--gold2);text-shadow:0 0 18px rgba(255,200,90,.7),0 3px 0 #6b3d0a;pointer-events:none;min-height:80px}
.cta{left:240px;top:1676px;width:600px;height:110px;border-radius:999px;border:4px solid var(--gold2);background:linear-gradient(180deg,#ffe08a,#e39b1f);color:#3a2206;font-family:var(--serif);font-weight:900;font-size:44px;letter-spacing:.04em;box-shadow:0 0 30px rgba(255,200,90,.8),0 8px 0 #7a4a0a;cursor:pointer;animation:breathe 1.6s ease-in-out infinite}
.cta:focus-visible{outline:5px solid #fff;outline-offset:6px}
.info{left:40px;top:1806px;width:1000px;text-align:center;font-size:25px;color:#cfe2f2;pointer-events:none}
.info b{color:var(--gold2)}
.corner{top:1856px;font:800 21px var(--body);color:#dfeefa;background:rgba(4,18,36,.8);border:2px solid rgba(255,214,130,.6);border-radius:999px;padding:10px 18px;cursor:pointer;text-decoration:none}
.corner:focus-visible{outline:4px solid #fff;outline-offset:3px}
.corner.on{background:var(--gold);color:#3a2206}
#auto{left:24px}
#panelBtn{left:50%;transform:translateX(-50%)}
#mute{right:24px}
#frost{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .25s;background-size:100% 100%}
#frost.on{opacity:1}
#goldfx{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(60% 45% at 50% 50%,rgba(255,220,120,.5),rgba(255,180,60,.18) 55%,rgba(255,160,40,0) 75%),repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,236,170,.22) 0 6deg,transparent 6deg 16deg);mix-blend-mode:screen}
#goldfx.on{opacity:1;animation:goldpulse .8s ease-in-out infinite alternate}
.overlay{position:absolute;z-index:7;pointer-events:none}
#count{left:0;top:760px;width:1080px;text-align:center;font-family:var(--display);font-weight:900;font-size:300px;line-height:1;background:linear-gradient(180deg,#fffbe6,#f9dc85 40%,#d9952a 70%,#fff0b0);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 #6b3d0a) drop-shadow(0 0 40px rgba(255,200,90,.8));opacity:0}
#count.small{font-size:120px;top:820px;line-height:1.1}
.card{box-sizing:border-box;border-radius:36px;background:linear-gradient(180deg,rgba(10,44,78,.97),rgba(4,18,36,.98));border:4px solid var(--gold);box-shadow:0 0 60px rgba(255,196,90,.6);text-align:center;pointer-events:auto;cursor:default}
#end{left:130px;top:600px;width:820px;padding:40px 40px 46px}
#end h2,#win h2{margin:0;font-family:var(--display);font-weight:900;font-size:96px;line-height:1;color:var(--gold2);text-shadow:0 0 24px rgba(255,200,90,.7),0 4px 0 #6b3d0a}
.lbl{margin-top:22px;font:800 28px var(--body);color:#cfe2f2;letter-spacing:.08em;text-transform:uppercase}
#end .score{font-family:var(--display);font-weight:900;font-size:140px;line-height:1.05;color:#fff;text-shadow:0 0 30px rgba(255,214,120,.8);font-variant-numeric:tabular-nums}
#end .rank{font-family:var(--serif);font-weight:900;font-size:38px;color:var(--gold2)}
.prizeBox{margin:18px auto 0;max-width:660px;font:700 27px/1.4 var(--body);color:#e6f1fa;padding:16px 20px;border-radius:18px;background:rgba(255,214,120,.12);border:2px dashed rgba(255,214,120,.6)}
.btn{margin-top:26px;font-family:var(--serif);font-weight:900;font-size:36px;color:#3a2206;background:linear-gradient(180deg,#ffe08a,#e39b1f);border:4px solid var(--gold2);border-radius:999px;padding:16px 46px;cursor:pointer;box-shadow:0 0 26px rgba(255,200,90,.7),0 6px 0 #7a4a0a}
.btn.ghostbtn{background:transparent;color:var(--gold2);box-shadow:none;border-width:3px;font-size:28px;padding:12px 34px;margin-left:14px}
.btn:focus-visible{outline:5px solid #fff;outline-offset:5px}
#win{left:110px;top:560px;width:860px;padding:44px 40px 48px;border-width:6px;box-shadow:0 0 80px rgba(255,214,120,.95),0 0 160px rgba(255,190,70,.6)}
#win .gift{width:150px;height:150px;margin:16px auto 0;display:block}
#win .pz{font-family:var(--display);font-weight:900;font-size:60px;line-height:1.1;color:#fff;text-shadow:0 0 24px rgba(255,214,120,.9);margin-top:10px}
#win .sp{font:800 32px var(--body);color:var(--gold2);margin-top:8px}
#win .note{font:700 25px/1.4 var(--body);color:#cfe2f2;margin-top:18px}
#reg{left:80px;top:540px;width:920px;padding:40px 46px 44px;text-align:left}
#reg h2{margin:0 0 6px;font-family:var(--serif);font-weight:900;font-size:50px;color:var(--gold2);text-align:center}
#reg p.sub{margin:0 0 22px;font:700 25px/1.4 var(--body);color:#cfe2f2;text-align:center}
#reg label{display:block;font:800 22px var(--body);color:#cfe2f2;letter-spacing:.05em;text-transform:uppercase;margin:16px 0 8px}
#reg input[type=text],#reg input[type=email],#reg input[type=tel]{width:100%;box-sizing:border-box;height:82px;border-radius:18px;border:3px solid rgba(255,214,130,.7);background:#f7fbff;color:var(--ink);font:700 34px var(--body);padding:0 24px;outline:none}
#reg input:focus{border-color:#fff;box-shadow:0 0 0 5px rgba(255,214,120,.6)}
#reg .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#reg .consent{display:flex;gap:16px;align-items:center;margin-top:20px;font:700 23px/1.35 var(--body);color:#dfeefa;text-transform:none;letter-spacing:0}
#reg .consent input{width:38px;height:38px;flex:none;accent-color:#f5c451}
#reg .err{min-height:34px;margin-top:14px;font:800 24px var(--body);color:#ff9a9a;text-align:center}
#reg .known{display:none;margin-top:18px;padding:16px 20px;border-radius:18px;background:rgba(168,220,255,.12);border:2px solid rgba(168,220,255,.55);font:700 24px/1.4 var(--body);color:#e6f4ff}
#reg .known.on{display:block}
#reg .known b{color:#fff}
#reg .actions{text-align:center}
#welcome{left:110px;top:780px;width:860px;padding:36px 40px}
#welcome h2{margin:0;font-family:var(--serif);font-weight:900;font-size:56px;color:var(--gold2)}
#welcome p{margin:14px 0 0;font:700 28px/1.45 var(--body);color:#e6f1fa}
.offline{position:absolute;z-index:8;left:50%;top:1752px;white-space:nowrap;transform:translateX(-50%);font:800 20px var(--body);color:#3a2206;background:#ffd37a;border-radius:999px;padding:8px 18px;pointer-events:none}
.pop{position:absolute;z-index:6;font-family:var(--display);font-weight:900;font-size:78px;color:#fff3c4;text-shadow:0 0 18px #ffb84a,0 0 40px rgba(255,170,60,.9),0 4px 0 #7a4a0a;pointer-events:none;white-space:nowrap;transform:translate(-50%,-50%)}
.pop.ice{color:#eaf8ff;text-shadow:0 0 18px #6cc4ff,0 0 40px rgba(110,190,255,.9),0 4px 0 #0c3a66}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.05);box-shadow:0 0 50px rgba(255,214,120,1),0 8px 0 #7a4a0a}}
@keyframes lowtime{to{box-shadow:0 0 30px rgba(255,90,90,.9)}}
@keyframes pickglow{50%{filter:drop-shadow(0 0 14px rgba(168,220,255,.95))}}
@keyframes goldpulse{from{filter:brightness(1)}to{filter:brightness(1.5)}}
@media(prefers-reduced-motion:reduce){.door .la,.door .lb,.door .rays,.cta,.door.pickable .back,#goldfx.on{animation:none}}
[hidden]{display:none!important}

.door img.back,.door img.garland{position:absolute;left:0;top:0;width:200px;height:290px;pointer-events:none;display:block}
.door img.wreath{display:block}
.goldmode .door .front ellipse,.goldmode .door .front circle{fill:#ffd24a}
#end .total{margin-top:8px;font:700 26px var(--body);color:#cfe2f2}
#end .total b{color:#fff}
.lb h3{letter-spacing:.04em}
#end .rank .semi{display:inline-block;vertical-align:middle;margin-left:10px;font:900 20px var(--body);letter-spacing:.04em;color:#173404;background:#a6e3a1;border-radius:999px;padding:6px 14px}