/* Display fonts, self-hosted and trimmed to the game's own text by fonts.mjs (Jua · Mochiy Pop One · Fredoka, OFL). */
@font-face{font-family:'Candy EN';src:url(./font-en.woff2) format('woff2');font-weight:500 700;font-display:block}
@font-face{font-family:'Candy KO';src:url(./font-ko.woff2) format('woff2');font-display:block}
@font-face{font-family:'Candy JA';src:url(./font-ja.woff2) format('woff2');font-display:block}
/* Casual candy-shop look: bright Halloween twilight, chunky rounded type, thick plum outlines, bouncy buttons. */
:root{--plum:#3b1450;--cream:#fff8ee;--pink:#ff6fb5;--orange:#ff9420;--yellow:#ffe14d;--lime:#7ee84a;--violet:#8b5cf6;--ink:#fff;--coin:#ffd34d;
 --font:'Candy EN','Candy KO','Candy JA','Hiragino Maru Gothic ProN',system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{overscroll-behavior:none}
:lang(ko) body{word-break:keep-all;font-family:'Candy KO','Candy EN',system-ui,sans-serif}
:lang(ja) body{font-family:'Candy EN','Candy JA','Hiragino Maru Gothic ProN',system-ui,sans-serif}
body{margin:0;min-height:100vh;background:linear-gradient(#5b34e0 0,#9b4dff 26%,#e45cd0 52%,#ff8a7a 74%,#ffb35c 100%) fixed;color:var(--ink);font-family:var(--font);font-weight:600;font-synthesis:none;-webkit-tap-highlight-color:transparent;position:relative;overflow-x:hidden}
/* scenery: big friendly moon, sparkly stars, soft clouds, bunting, purple hills with pumpkins */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;background:
 radial-gradient(circle at 86% 11%,#fffbe0 0 30px,#ffec9e 31px 36px,transparent 37px),
 radial-gradient(circle at 86% 11%,#fff4b080 0,transparent 110px),
 radial-gradient(ellipse 70px 22px at 14% 30%,#ffffff55 98%,transparent),radial-gradient(ellipse 50px 16px at 24% 27%,#ffffff55 98%,transparent),
 radial-gradient(ellipse 80px 22px at 78% 44%,#ffffff40 98%,transparent),radial-gradient(ellipse 46px 15px at 90% 41%,#ffffff40 98%,transparent),
 radial-gradient(2.5px 2.5px at 12% 12%,#fff 98%,transparent),radial-gradient(2px 2px at 34% 6%,#fff 98%,transparent),radial-gradient(3px 3px at 58% 16%,#fff 98%,transparent),radial-gradient(2px 2px at 70% 24%,#fffc 98%,transparent),radial-gradient(2px 2px at 44% 30%,#fffb 98%,transparent),radial-gradient(2.5px 2.5px at 6% 44%,#fffb 98%,transparent)}
.bunting{position:absolute;left:0;right:0;top:40px;width:100%;height:30px;pointer-events:none;z-index:0}
.hills{position:fixed;left:0;right:0;bottom:0;width:100%;height:150px;pointer-events:none;z-index:0}
body.fever{background:linear-gradient(#ff4fa3 0,#ff7a3d 45%,#ffc23d 100%) fixed}
.top,main,footer{position:relative;z-index:1}
.top{display:flex;gap:10px;align-items:center;padding:8px 16px;max-width:480px;margin:auto}
.top .back,.langs a{color:#fff;text-decoration:none;-webkit-text-stroke:3px var(--plum);paint-order:stroke fill}
.top .back{margin-right:auto;font-size:17px}.langs a{margin-left:8px;opacity:.7}.langs a[aria-current]{opacity:1;color:var(--yellow)}
main{max-width:480px;margin:auto;padding:0 12px 12px}
.screen{text-align:center}
.round{width:40px;height:40px;border-radius:50%;background:#fff;font-size:18px;border:3px solid var(--plum);box-shadow:0 3px 0 var(--plum);color:inherit}.round.small{width:38px;height:38px;font-size:16px}
/* type: chunky outlined candy letters */
.logo,.result-score,.panel b,.banner,.float{font-weight:700;paint-order:stroke fill;-webkit-text-stroke:9px var(--plum);color:var(--yellow);text-shadow:0 6px 0 var(--plum)}
.logo{font-size:50px;line-height:1.02;margin:10px 0 10px;white-space:pre-line;transform:rotate(-3deg);animation:wobble 3s ease-in-out infinite;letter-spacing:.01em}
:lang(ko) .logo,:lang(ko) .result-score{font-weight:400}
:lang(ja) .badge{font-size:13px;padding:4px 12px}
:lang(ja) .logo{font-size:min(38px,8.8vw);font-weight:400}
@keyframes wobble{50%{transform:rotate(-1deg) scale(1.03)}}
.badge{display:inline-block;background:#fff;color:var(--plum);border:3px solid var(--plum);border-radius:99px;padding:4px 16px;margin:30px 0 0;font-size:15px;box-shadow:0 4px 0 var(--plum);transform:rotate(-1.5deg)}
.tagline{margin:0 auto 4px;font-size:18px;max-width:340px;-webkit-text-stroke:4px var(--plum);paint-order:stroke fill;line-height:1.35}
/* home */
.hero{position:relative;height:178px;margin:4px 0}
.hero-avatar{position:absolute;left:50%;top:16px;transform:translateX(-50%);animation:hop 1.2s ease-in-out infinite}
.hero-avatar svg{width:112px;height:112px;border-radius:30px;border:4px solid var(--plum);box-shadow:0 0 0 6px #fff,0 0 0 10px var(--plum),0 12px 0 2px #3b145055}
.hero .p{position:absolute;width:62px;height:62px;animation:float 2.4s ease-in-out infinite;filter:drop-shadow(0 6px 4px #3b145070)}
.hero .p svg{width:100%;height:100%}
.hero .p0{left:3%;top:70px}.hero .p1{left:14%;top:0;animation-delay:-.5s;width:54px;height:54px}.hero .p2{right:2%;top:88px;animation-delay:-1s;width:70px}.hero .p3{left:24%;bottom:-6px;width:50px;height:50px;animation-delay:-1.4s}.hero .p4{right:14%;top:4px;animation-delay:-.8s;width:68px}.hero .p5{right:27%;bottom:-8px;width:50px;height:50px;animation-delay:-.2s}
@keyframes float{50%{transform:translateY(-10px) rotate(-8deg)}}
@keyframes hop{50%{transform:translateX(-50%) translateY(-8px)}}
.dress{display:inline-block;color:#fff;font-size:16px;margin:6px 0 8px;-webkit-text-stroke:3px var(--plum);paint-order:stroke fill}
.card,.event,.guide,.coin-box{background:var(--cream);color:var(--plum);border:4px solid var(--plum);border-radius:22px;box-shadow:0 5px 0 var(--plum)}
.event{padding:10px 14px;font-size:16px;margin:8px 0;line-height:1.4}
.event b{color:#ff6a00}
.streak{min-height:1.2em;margin:8px 0;color:var(--yellow);-webkit-text-stroke:3px var(--plum);paint-order:stroke fill;font-size:17px}
/* jelly buttons */
button,.soft{font:inherit;cursor:pointer;color:inherit}
.big,.soft{position:relative;display:block;width:100%;border:4px solid var(--plum);border-radius:26px;margin:12px 0;text-decoration:none;paint-order:stroke fill;overflow:hidden;color:#fff;transition:transform .08s}
.big{background:linear-gradient(#ffd75e,#ffa21f 55%,#ff7a0a);font-size:26px;padding:14px;box-shadow:0 7px 0 var(--plum),0 12px 18px #3b145055;-webkit-text-stroke:6px var(--plum)}
.soft{background:linear-gradient(#c9a2ff,#9b5cff 55%,#7c3aed);font-size:20px;padding:11px;box-shadow:0 6px 0 var(--plum);-webkit-text-stroke:5px var(--plum)}
#share{background:linear-gradient(#ffb0d8,#ff6fb5 55%,#f0438f)}
a.soft{background:linear-gradient(#a8f5e0,#2fd3b4 55%,#14a88c)}
.big::after,.soft::after{content:'';position:absolute;left:6%;right:6%;top:4px;height:36%;border-radius:20px;background:linear-gradient(#ffffffa0,#fff0);pointer-events:none}

.big:active,.soft:active{transform:translateY(5px) scale(.98);box-shadow:0 2px 0 var(--plum)}
.text{background:none;border:0;font-size:17px;margin-top:4px;color:#fff;-webkit-text-stroke:3px var(--plum);paint-order:stroke fill;text-decoration:underline}
.guide{text-align:left;padding:10px 16px;margin-top:14px;font-size:15px;font-weight:500;line-height:1.45}
.guide summary{cursor:pointer;font-weight:600;font-size:17px}
.guide li{margin:4px 0}
/* play: HUD */
.play{user-select:none;-webkit-user-select:none}
.panel{position:relative;display:flex;align-items:center;gap:12px;background:var(--cream);border:4px solid var(--plum);border-radius:26px;padding:6px 14px 6px 8px;margin:6px 0 10px;box-shadow:0 6px 0 var(--plum)}
.me{position:relative}
.me-face svg{display:block;width:58px;height:58px;border-radius:18px;border:3px solid var(--plum);background:#fff}
.me.hop .me-face{animation:jump .35s}
@keyframes jump{40%{transform:translateY(-12px) rotate(-6deg)}}
.say{position:absolute;left:30px;bottom:calc(100% + 8px);background:#fff;color:var(--plum);border:3px solid var(--plum);border-radius:14px;padding:3px 10px;font-size:15px;white-space:nowrap;z-index:5;box-shadow:0 3px 0 var(--plum);animation:sayIn .2s cubic-bezier(.3,1.6,.5,1)}
.say::before{content:'';position:absolute;left:14px;top:100%;border:8px solid transparent;border-top-color:var(--plum);border-bottom:0}
@keyframes sayIn{from{transform:scale(.4) translateY(10px)}}
.nums{flex:1;text-align:left;line-height:1}
.nums small{display:block;font-size:14px;color:#a34fd8;margin:0 0 0 3px}
.panel b{font-size:38px;-webkit-text-stroke:7px var(--plum);text-shadow:0 4px 0 var(--plum)}
.coin-pill{background:linear-gradient(#fff2a8,#ffcf2e);color:var(--plum);border:3px solid var(--plum);border-radius:99px;padding:3px 12px;font-size:20px;box-shadow:0 4px 0 var(--plum);transition:transform .15s}
.coin-pill.pop{transform:scale(1.3) rotate(-6deg)}
/* bars: candy-cane gauges */
.timer,.fever-bar{position:relative;border-radius:99px;background:#fff;border:4px solid var(--plum);overflow:hidden;margin:7px 0;box-shadow:0 4px 0 var(--plum)}
.timer{height:32px}.fever-bar{height:24px}
.timer i,.fever-bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;transition:width .2s linear}
.timer i{width:100%;background:repeating-linear-gradient(-45deg,#ffffff70 0 9px,transparent 9px 18px),linear-gradient(#c6ff8a,#5fd42b);box-shadow:inset 0 4px 0 #ffffffa0,inset 0 -3px 0 #2a8a0e40;animation:stripes 1s linear infinite}
.timer.low i{background:repeating-linear-gradient(-45deg,#ffffff70 0 9px,transparent 9px 18px),linear-gradient(#ffb1a0,#ff3b5c);animation-duration:.4s}
@keyframes stripes{to{background-position:25px 0,0 0}}
.timer .clock{position:absolute;left:6px;top:0;font-size:17px;line-height:24px}
.timer #time-left{position:absolute;right:10px;top:0;font-size:20px;font-weight:700;line-height:24px;color:#fff;-webkit-text-stroke:5px var(--plum);paint-order:stroke fill}
.fever-bar i{width:0;background:repeating-linear-gradient(-45deg,#ffffff60 0 7px,transparent 7px 14px),linear-gradient(90deg,#ffb11f,#ff4f9a);box-shadow:inset 0 3px 0 #ffffff90}
.fever-bar span{position:absolute;left:10px;top:0;font-size:14px;line-height:16px;color:#fff;-webkit-text-stroke:4px var(--plum);paint-order:stroke fill}
body.fever .fever-bar i{width:100%!important;animation:flicker .25s infinite alternate}
@keyframes flicker{to{filter:brightness(1.3) saturate(1.3)}}
/* board: candy tray with carnival bulbs around a soft pastel grid */
.board-wrap{position:relative;margin-top:12px}
.frame{position:relative;padding:13px;border-radius:32px;border:4px solid var(--plum);
 background:radial-gradient(circle,#fffbd0 0 3.4px,#ffe46a 3.6px 4.6px,transparent 5px) -5px -5px/26px 26px,linear-gradient(#ffc04d,#ff8a1f 60%,#f06a0a);
 box-shadow:0 8px 0 var(--plum),0 16px 24px #3b145060,inset 0 3px 0 #ffffff90}
body.fever .frame{background:radial-gradient(circle,#fff 0 3.4px,#ffe46a 3.6px 4.6px,transparent 5px) -5px -5px/26px 26px,linear-gradient(#ff8ad0,#ff3f8f 60%,#d81b60);box-shadow:0 8px 0 var(--plum),0 0 34px #ffe14d,inset 0 3px 0 #ffffff90;animation:bulbs .3s steps(2) infinite}
@keyframes bulbs{to{filter:brightness(1.12)}}
.board{position:relative;width:100%;aspect-ratio:1;border-radius:20px;touch-action:none;overflow:hidden;border:3px solid var(--plum);
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='4' y='4' width='92' height='92' rx='22' fill='%23ffe3f2'/%3E%3Crect x='104' y='4' width='92' height='92' rx='22' fill='%23efe4ff'/%3E%3Crect x='4' y='104' width='92' height='92' rx='22' fill='%23efe4ff'/%3E%3Crect x='104' y='104' width='92' height='92' rx='22' fill='%23ffe3f2'/%3E%3C/svg%3E") 0 0/calc(200%/7) calc(200%/7),#fff8fc;box-shadow:inset 0 5px 0 #3b145022}
.tile{position:absolute;left:0;top:0;width:calc(100%/7);height:calc(100%/7);padding:2.5px;transition:transform .17s ease-in;will-change:transform}
.tile .face{position:relative;width:100%;height:100%;transition:transform .15s,opacity .15s;filter:drop-shadow(0 3px 1px #3b145066)}
.tile .face svg{width:100%;height:100%;display:block}
.tile.sel::before{content:'';position:absolute;inset:1px;border-radius:16px;background:#fff59a;box-shadow:0 0 0 3px var(--plum);animation:selPulse .5s ease-in-out infinite alternate}
@keyframes selPulse{to{background:#ffd34d}}
.tile.sel .face{transform:scale(1.14)}
.tile.hint .face{animation:nudge .6s ease-in-out infinite}
@keyframes nudge{50%{transform:scale(1.14) rotate(10deg)}}
.tile.pop .face{transform:scale(1.5);opacity:0;transition:transform .18s ease-out,opacity .18s}
.tile.made .face{animation:made .35s}
@keyframes made{0%{transform:scale(.2)}70%{transform:scale(1.3)}}
/* specials */
.tile.broomH .face,.tile.broomV .face{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 3px 1px #3b145066)}
.tile.lantern .face{animation:glow .8s ease-in-out infinite alternate}
.tile.ball .face{animation:spin 3s linear infinite;filter:drop-shadow(0 0 6px #b98bff)}
@keyframes glow{to{transform:scale(1.07)}}
@keyframes spin{50%{transform:scale(1.06) rotate(6deg)}}
/* effects */
.flash{position:absolute;background:radial-gradient(#fff,#fff8);opacity:.9;pointer-events:none;border-radius:14px;animation:fade .32s forwards;z-index:3}
@keyframes fade{to{opacity:0}}
.float{position:absolute;pointer-events:none;color:#fff;font-size:24px;-webkit-text-stroke:6px var(--plum);text-shadow:0 3px 0 var(--plum);animation:rise .8s forwards;transform:translate(-50%,-50%);z-index:4}
@keyframes rise{to{transform:translate(-50%,-170%);opacity:0}}
.spark{position:absolute;width:9px;height:9px;border-radius:50%;pointer-events:none;animation:spark .45s forwards;z-index:3;box-shadow:0 0 0 2px #fff}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.banner{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) rotate(-4deg);font-size:40px;-webkit-text-stroke:10px var(--plum);text-shadow:0 6px 0 var(--plum);pointer-events:none;white-space:nowrap;z-index:6;animation:bannerIn .35s cubic-bezier(.3,1.7,.5,1)}
@keyframes bannerIn{from{transform:translate(-50%,-50%) rotate(-4deg) scale(.2)}}
.hint{font-size:14px;margin:12px 0 0;-webkit-text-stroke:3px var(--plum);paint-order:stroke fill}
/* result */
.result-top{position:relative}
.result-top .p{position:absolute;width:56px;height:56px;animation:float 2.4s ease-in-out infinite;filter:drop-shadow(0 6px 4px #3b145070)}.result-top .p svg{width:100%;height:100%}
.result-top .p0{left:6%;top:6px}.result-top .p1{right:6%;top:2px;animation-delay:-.7s}.result-top .p2{left:16%;top:76px;width:48px;height:48px;animation-delay:-1.3s}.result-top .p3{right:16%;top:80px;width:48px;height:48px;animation-delay:-.4s}
.result-avatar svg{width:100px;height:100px;border-radius:28px;border:4px solid var(--plum);box-shadow:0 0 0 5px #fff,0 0 0 9px var(--plum);margin:14px 0 8px}
.result-score{font-size:70px;line-height:1.05;margin:6px 0;-webkit-text-stroke:11px var(--plum);text-shadow:0 7px 0 var(--plum);animation:wobble 2s ease-in-out infinite}
#result-detail{font-size:17px;letter-spacing:.02em;-webkit-text-stroke:3.5px var(--plum);paint-order:stroke fill}
.coin-box{padding:10px 12px;margin:12px 0;font-size:24px;color:#ff8a00;-webkit-text-stroke:0}
.coin-box small{display:block;color:var(--plum);font-size:14px;font-weight:500;margin-top:2px}
#result-best{font-size:18px;color:var(--yellow);-webkit-text-stroke:4px var(--plum);paint-order:stroke fill}
#share-msg{min-height:1.2em;font-size:14px;margin:0;-webkit-text-stroke:3px var(--plum);paint-order:stroke fill}
footer{text-align:center;font-size:13px;padding:12px 12px 150px;-webkit-text-stroke:3px var(--plum);paint-order:stroke fill}
@media (prefers-reduced-motion:reduce){.hero *,.tile *,.logo,.result-score{animation:none!important}.tile{transition-duration:.01s}}