@font-face{font-family:Norms;src:url('assets/TTNorms-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Norms;src:url('assets/TTNorms-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0205;color:#fff;font-family:Norms,Arial,sans-serif}
button{font:inherit;cursor:pointer}
button:disabled{cursor:default}
button:focus-visible{outline:3px solid #f7dbe6;outline-offset:7px}
.stage{position:absolute;width:2688px;height:768px;left:50%;top:50%;overflow:hidden;transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center;background:#160209;isolation:isolate}
.background,.shade{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.background{object-fit:cover}
.shade{z-index:-2;background:radial-gradient(ellipse at 50% 48%,rgba(12,1,5,.3),rgba(10,0,4,.12) 45%,rgba(5,0,2,.32) 100%),linear-gradient(0deg,rgba(6,0,3,.4),transparent 30%,rgba(5,0,2,.2))}
.brand{position:absolute;top:385px;transform:translate(-50%,-50%);object-fit:contain;display:block;filter:drop-shadow(0 10px 22px #0006)}
.brand-hello{left:520px;width:500px;height:auto}
.brand-intercharm{left:2168px;width:860px;height:auto}
/* Keep the whole 2688×768 composition fixed; only preview scaling is responsive. */
h1{position:absolute;top:52px;margin:0;left:0;width:100%;text-align:center;font-size:44px;font-weight:500;line-height:60px;letter-spacing:8px;text-indent:8px;color:#f6e8ee;text-shadow:0 3px 22px #0005}
.draw{position:absolute;left:50%;top:195px;transform:translateX(-50%);width:860px;height:385px}
.number-viewport{height:100%;width:100%;display:flex;align-items:center;justify-content:center;perspective:1000px}
.number{font-family:Norms,Arial,sans-serif;font-size:350px;line-height:1;font-weight:700;letter-spacing:-11px;text-indent:-11px;font-variant-numeric:tabular-nums;background:linear-gradient(173deg,#fff 10%,#f8f0f3 42%,#d6c7ce 67%,#fff 90%);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 8px 22px #17000b80);will-change:transform,filter}
.number.waiting{font-size:140px;letter-spacing:8px;opacity:.75;transform:translateY(-12px);font-weight:500}
.actions{position:absolute;left:50%;top:650px;transform:translateX(-50%);opacity:1;visibility:visible;transition:opacity .3s}
[data-state=rolling] .actions,[data-state=celebrating] .actions{opacity:0;visibility:hidden;pointer-events:none}
.start{position:relative;display:flex;align-items:center;justify-content:center;width:280px;height:74px;border:1px solid currentColor;border-radius:12px;overflow:hidden;background:transparent;color:#f9eaf1;font-size:28px;font-weight:500;letter-spacing:1.5px;transition:transform .2s,opacity .3s}
.start:hover:not(:disabled){transform:translateY(-2px)}
.start:active:not(:disabled){transform:translateY(0)}
.start:disabled{opacity:.55}
.light-wave{position:absolute;left:50%;top:385px;width:200px;height:160px;border:1px solid #ffeaf2;border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:-1;box-shadow:0 0 80px 25px #ffcedd32,inset 0 0 60px #ffd1e41f}
.glints{position:absolute;inset:0;pointer-events:none}
.glint{position:absolute;left:50%;top:385px;width:3px;height:9px;border-radius:50%;background:#fff5fb;box-shadow:0 0 12px 3px #f9cfdf72;opacity:0}
:is([data-state=celebrating],[data-state=winner]) .number{animation:reveal 850ms cubic-bezier(.2,.75,.2,1) both}
:is([data-state=celebrating],[data-state=winner]) .light-wave{animation:wave 2.2s cubic-bezier(.2,.6,.3,1) both}
:is([data-state=celebrating],[data-state=winner]) .glint{animation:glint 2s var(--delay) cubic-bezier(.1,.5,.2,1) both}
@keyframes reveal{0%{transform:scale(.74) translateY(16px);filter:blur(8px) drop-shadow(0 0 26px #fff8);opacity:.1}35%{transform:scale(1.12);filter:blur(0px) drop-shadow(0 0 28px #fff5);opacity:1}100%{transform:scale(1);filter:blur(0px) drop-shadow(0 8px 22px #17000b80)}}
@keyframes wave{0%{opacity:0;transform:translate(-50%,-50%) scale(.6,.5)}15%{opacity:.4}100%{opacity:0;transform:translate(-50%,-50%) scale(7,3)}}
@keyframes glint{0%{opacity:0;transform:translate(var(--from-x),var(--from-y)) rotate(var(--angle)) scale(.5)}15%{opacity:.7}100%{opacity:0;transform:translate(var(--to-x),var(--to-y)) rotate(var(--angle)) scale(.2)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.glint,.light-wave{display:none}:is([data-state=celebrating],[data-state=winner]) .number{animation:none}.start,.actions{transition:none}.number{will-change:auto}}