*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;touch-action:manipulation}
/* Hopeinen tausta: kerrostetut staattiset liukuvärit, ei animoida itse taustaa */
body{color:#1f3550;background:
 radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),
 radial-gradient(90% 60% at 100% 100%,rgba(150,170,195,.55),rgba(150,170,195,0) 70%),
 linear-gradient(160deg,#f4f7fb 0%,#dfe6ee 35%,#c4cfdc 65%,#a9b6c6 100%)}
/* Hohtoviiru: vain transform-animaatio omalla kerroksella */
.shimmer{position:fixed;top:-20%;bottom:-20%;left:0;width:60vw;pointer-events:none;z-index:1;
 background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
 transform:translate3d(-80vw,0,0) skewX(-15deg);will-change:transform;animation:shine 9s ease-in-out infinite}
@keyframes shine{0%{transform:translate3d(-80vw,0,0) skewX(-15deg)}60%,100%{transform:translate3d(140vw,0,0) skewX(-15deg)}}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.wrap{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vh;padding:24px;text-align:center}
h1{margin:0;font-size:clamp(34px,10vw,60px);font-weight:900;letter-spacing:.01em;color:#1f3550}
h1 span{color:#00a3a3}
.sub{margin-top:8px;font-size:clamp(16px,4.4vw,22px);color:#3e5470;font-weight:600}
#go{position:relative;display:flex;align-items:center;justify-content:center;width:min(68vw,300px);aspect-ratio:1;border-radius:50%;border:5px solid #fff;font-family:inherit;font-weight:900;font-size:clamp(26px,8vw,38px);line-height:1.15;color:#fff;cursor:pointer;touch-action:manipulation;
 background:radial-gradient(circle at 35% 28%,#5fd9e0 0%,#17374F 70%);box-shadow:0 10px 30px rgba(23,55,79,.35);animation:pulse 2.4s ease-in-out infinite}
#go:active{transform:scale(.96)}
#go:disabled{animation:none;opacity:.6}
@keyframes pulse{50%{transform:scale(1.05)}}
.brand{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:13px;font-weight:800;letter-spacing:.25em;color:#17374F;opacity:.7;z-index:3}
.brand b{color:#00a3a3}
#msg{max-width:90vw;font-size:20px;font-weight:700;min-height:1.2em}
/* Palkintonäyttö: ei backdrop-filteriä */
#stage{position:fixed;inset:0;z-index:5;display:none;align-items:center;justify-content:center;background:rgba(220,229,239,.92);touch-action:manipulation}
#prize{position:absolute;left:50%;top:50%;width:min(76vw,560px);transform:translate(-50%,-50%) scale(.9);text-align:center;opacity:0;
 background:#fff;border-radius:22px;padding:22px 18px;border:3px solid #00C6C6;box-shadow:0 12px 40px rgba(23,55,79,.3);transition:opacity .45s,transform .45s;z-index:6}
#prize.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#prize .won{font-size:clamp(16px,4.4vw,24px);color:#00808a;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
#prize .name{font-size:clamp(32px,10vw,60px);font-weight:900;color:#0B2938;line-height:1.05;margin:10px 0 4px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
#prize .hint{margin-top:12px;font-size:clamp(13px,3.6vw,17px);color:#4a5b73;font-weight:600}
.actbox{background:#fff;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px;width:min(86vw,360px);box-shadow:0 8px 30px rgba(23,55,79,.25);user-select:auto}
.acth{font-weight:800;color:#17374F}.actbox input{font-size:18px;padding:12px;border:2px solid #c4cfdc;border-radius:10px;user-select:auto;-webkit-user-select:auto}
.actbox button{font-size:18px;font-weight:800;padding:12px;border:0;border-radius:10px;background:#17374F;color:#fff}
[hidden]{display:none!important}
#prize .num{font-size:clamp(15px,4.2vw,20px);font-weight:800;color:#17374F;margin-top:6px;letter-spacing:.04em}
#testbar{position:fixed;top:0;left:0;right:0;z-index:9;background:#e08a00;color:#fff;font-weight:900;text-align:center;padding:8px;font-size:18px}
#prize .name.long{font-size:clamp(24px,7.4vw,46px)}

/* ---- Iso kidehiutale ---- */
#flake{position:absolute;width:min(98vw,98vh);aspect-ratio:1;will-change:transform;transform:translate3d(0,-120vh,0) scale(.18)}
#sway{position:absolute;inset:0;will-change:transform}
#crystal{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 18px rgba(40,70,110,.35))}
.a-main{stroke:url(#silver);stroke-width:9}
.a-side{stroke:url(#ice);stroke-width:6}
.a-fine{stroke:#e9f3fb;stroke-width:3.2}
.a-hi{stroke:#fff;stroke-width:2;opacity:.85}
.c-plate{fill:url(#core);stroke:#fff;stroke-width:2.5}.c-inner{fill:none;stroke:#9fd8e0;stroke-width:1.6;opacity:.8}.c-dot{fill:#fff}
.c-ray{stroke:#c4e4ee;stroke-width:1.4;fill:none}
.glint{opacity:.55;transform-origin:center;mix-blend-mode:screen}
#burst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}
#prize{z-index:8}
/* putoaminen: kevyt huojunta ja keinunta (#sway), sitten kasvu ruudun kokoiseksi (#flake) */
.fall{animation:fall 3.4s cubic-bezier(.33,.1,.3,1) forwards}
.fall #sway{animation:sway 3.4s ease-in-out forwards}
@keyframes fall{0%{transform:translate3d(0,-115vh,0) scale(.16)}
 68%{transform:translate3d(0,0,0) scale(.22)}
 100%{transform:translate3d(0,0,0) scale(1.35)}}
@keyframes sway{0%{transform:translateX(-14vw) rotate(-22deg)}
 14%{transform:translateX(12vw) rotate(16deg)}
 29%{transform:translateX(-10vw) rotate(-12deg)}
 44%{transform:translateX(7vw) rotate(9deg)}
 58%{transform:translateX(-3vw) rotate(-4deg)}
 68%{transform:translateX(0) rotate(0)}
 100%{transform:translateX(0) rotate(60deg)}}
#stage.revealed .glint{animation:glint 2.8s ease-in-out infinite}
@keyframes glint{0%,100%{opacity:.35;transform:rotate(0) scale(1)}50%{opacity:.8;transform:rotate(25deg) scale(1.05)}}
#stage.revealed #prize{animation:prizeglow 2.4s ease-in-out infinite}
@keyframes prizeglow{0%,100%{box-shadow:0 12px 40px rgba(23,55,79,.3),0 0 0 rgba(0,198,198,0)}50%{box-shadow:0 12px 40px rgba(23,55,79,.3),0 0 34px rgba(0,198,198,.55)}}
@media (prefers-reduced-motion:reduce){
 .shimmer,#go{animation:none}
 .fall,.fall #sway{animation:none}
 .fall{transform:scale(1.35)}
 #stage.revealed .glint,#stage.revealed #prize{animation:none}
}
/* ---- Läppäri / leveä näyttö ---- */
@media (min-width:700px) and (min-aspect-ratio:1/1){
 .wrap{gap:4vh}
 h1{font-size:clamp(48px,8vh,88px)}
 .sub{font-size:clamp(18px,2.8vh,28px)}
 #go{width:min(44vh,360px);font-size:clamp(30px,5.4vh,46px)}
 #prize{width:min(64vmin,620px);padding:3vmin 3vmin}
 #prize .won{font-size:clamp(16px,2.8vmin,26px)}
 #prize .name{font-size:clamp(34px,7vmin,68px)}
 #prize .name.long{font-size:clamp(28px,5.4vmin,54px)}
 #prize .num{font-size:clamp(16px,2.8vmin,24px)}
 #prize .hint{font-size:clamp(14px,2.2vmin,19px)}
 .brand{font-size:15px}
}

/* ---- Päivän jäljellä-laskuri ---- */
#left{font-size:13px;font-weight:700;color:#17374F;opacity:.45;letter-spacing:.03em}
#left.warn{opacity:1;font-size:clamp(17px,2.6vh,22px);color:#fff;background:#c2410c;padding:.45em 1em;border-radius:999px;box-shadow:0 4px 14px rgba(194,65,12,.35)}
#left.out{opacity:1;font-size:15px;color:#fff;background:#17374F;padding:.4em 1em;border-radius:999px}
#go.soldout{background:#cfd8e1;color:#17374F;box-shadow:none;animation:none;cursor:default}
#go.soldout #gotext{font-size:.5em;line-height:1.25;padding:0 1.2em;text-shadow:none}
#prize .lastnote{margin-top:.8em;padding:.5em .8em;border-radius:12px;background:#fff3e8;color:#9a3412;font-weight:800;font-size:clamp(14px,2.2vmin,18px)}