/* WoW Pop! v2.0.0 — layout 400x640 logical; 1 logical px = var(--u) */
:root{
  --ink:#4a2a86;          /* main dark purple text */
  --ink2:#6b4bb8;
  --yel1:#ffe25a;--yel2:#ffb21e;--yel3:#e0820a;   /* candy yellow (matches Play button) */
  --pink1:#ff9ccd;--pink2:#ff5fa8;
  --glass:rgba(255,255,255,.78);
}
html,body{margin:0;height:100%;background:#2a2147;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  font-family:"Noto Sans Thai",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{display:flex;align-items:center;justify-content:center}
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{fill:currentColor}

#w{position:relative;width:min(100vw,calc(100dvh*.625));aspect-ratio:400/640;container-type:size;
  background:#b8a8f8 url(../assets/img/bg_game.jpg) center/cover no-repeat;overflow:hidden}
#w>*{--u:.25cqw}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- glossy icon button ---------- */
.ib{width:calc(38*var(--u));height:calc(38*var(--u));border:0;border-radius:50%;padding:0;display:grid;place-items:center;color:var(--ink);
  background:radial-gradient(circle at 35% 28%,#fff 0 22%,#f1eaff 45%,#cdbcff 100%);
  box-shadow:inset 0 calc(-3*var(--u)) 0 rgba(120,90,200,.35),0 calc(3*var(--u)) calc(6*var(--u)) rgba(60,30,120,.35),0 0 0 calc(2*var(--u)) rgba(255,255,255,.8)}
.ib svg{width:52%;height:52%}
.ib:active{transform:scale(.92)}

/* ---------- HUD ---------- */
#hud{position:absolute;left:calc(10*var(--u));right:calc(10*var(--u));top:calc(10*var(--u));display:flex;align-items:center;gap:calc(8*var(--u));z-index:5;pointer-events:none}
#hud>*{pointer-events:auto}
/* avatar menu button (top-left) */
#btnProf{position:relative;width:calc(42*var(--u));height:calc(42*var(--u));border:0;padding:0;border-radius:50%;background:#fff;
  box-shadow:0 0 0 calc(2.5*var(--u)) #fff,0 calc(3*var(--u)) calc(8*var(--u)) rgba(60,30,120,.4)}
#btnProf .av{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
#btnProf .badge{position:absolute;right:calc(-4*var(--u));bottom:calc(-3*var(--u));width:calc(18*var(--u));height:calc(18*var(--u));border-radius:50%;display:grid;place-items:center;
  color:#fff;background:linear-gradient(var(--yel1),var(--yel2));box-shadow:0 0 0 calc(2*var(--u)) #fff,0 1px 3px rgba(0,0,0,.25)}
#btnProf .badge svg{width:62%;height:62%}
#btnProf:active{transform:scale(.93)}

/* score: top center, single value */
#scorePill{position:absolute;left:50%;top:calc(10*var(--u));transform:translateX(-50%);z-index:5;height:calc(40*var(--u));min-width:calc(112*var(--u));border:0;
  display:flex;align-items:center;justify-content:center;padding:0 calc(18*var(--u)) 0 calc(40*var(--u));box-sizing:border-box;border-radius:calc(20*var(--u));
  background:linear-gradient(#fff,#efe7ff);box-shadow:inset 0 calc(-3*var(--u)) 0 rgba(140,110,220,.3),0 calc(3*var(--u)) calc(8*var(--u)) rgba(60,30,120,.3),0 0 0 calc(2*var(--u)) rgba(255,255,255,.9)}
#scorePill:active{transform:translateX(-50%) scale(.96)}
#scorePill .star{position:absolute;left:calc(-6*var(--u));top:50%;width:calc(44*var(--u));height:calc(44*var(--u));transform:translateY(-50%) rotate(-10deg);
  color:var(--yel1);filter:drop-shadow(0 calc(2*var(--u)) 0 var(--yel3)) drop-shadow(0 calc(2*var(--u)) calc(3*var(--u)) rgba(80,40,140,.35));stroke:#fff;stroke-width:1.6px;paint-order:stroke}
#score{font-size:calc(23*var(--u));font-weight:900;color:var(--ink);display:inline-block;line-height:1}
#score.bump{animation:bump .28s ease-out}
#bestTip{position:absolute;left:50%;top:calc(56*var(--u));transform:translateX(-50%);z-index:6;display:none;align-items:center;gap:calc(5*var(--u));white-space:nowrap;
  padding:calc(5*var(--u)) calc(12*var(--u));border-radius:999px;font-size:calc(13*var(--u));font-weight:700;color:#fff;background:rgba(60,30,120,.82);box-shadow:0 calc(3*var(--u)) calc(8*var(--u)) rgba(40,20,90,.35)}
#bestTip::before{content:"";position:absolute;left:50%;top:calc(-5*var(--u));transform:translateX(-50%);border:calc(5*var(--u)) solid transparent;border-top:0;border-bottom-color:rgba(60,30,120,.82)}
#bestTip svg{width:calc(15*var(--u));height:calc(15*var(--u));color:#ffd23c}
#bestTip b{font-weight:900;color:#ffe25a}
#bestTip.on{display:flex;animation:pop .25s cubic-bezier(.3,1.6,.5,1)}

/* game menu dropdown */
#gmenuM{position:absolute;inset:0;z-index:7;display:none;background:rgba(40,20,80,.35)}
#gmenuM.on{display:block;animation:fade .2s}
.gmenu{position:absolute;left:calc(10*var(--u));top:calc(60*var(--u));width:calc(214*var(--u));padding:calc(8*var(--u));box-sizing:border-box;border-radius:calc(22*var(--u));
  background:linear-gradient(#fff,#f3edff);box-shadow:0 0 0 calc(3*var(--u)) #c7b4ff,0 calc(12*var(--u)) calc(26*var(--u)) rgba(40,20,90,.45);transform-origin:12% 0;animation:pop .28s cubic-bezier(.3,1.5,.5,1)}
.gmenu::before{content:"";position:absolute;left:calc(14*var(--u));top:calc(-9*var(--u));border:calc(8*var(--u)) solid transparent;border-top:0;border-bottom-color:#c7b4ff}
.gi{width:100%;height:calc(46*var(--u));border:0;background:none;border-radius:calc(14*var(--u));display:flex;align-items:center;gap:calc(12*var(--u));padding:0 calc(12*var(--u));
  font-size:calc(16*var(--u));font-weight:800;color:var(--ink);text-align:left}
.gi svg{width:calc(22*var(--u));height:calc(22*var(--u));color:var(--ink2);flex:none}
.gi:active{background:#ebe2ff}
.gi .tg{margin-left:auto;font-size:calc(12*var(--u));font-weight:800;padding:calc(2*var(--u)) calc(10*var(--u));border-radius:999px;color:#fff;background:#4cc38a}
.gi .tg.off{background:#b9b0cf}
.gi.exit,.gi.exit svg{color:#e0457b}
.gmenu .hr{display:block;height:calc(1.5*var(--u));margin:calc(4*var(--u)) calc(8*var(--u));background:rgba(107,75,184,.18)}
.pav{width:calc(96*var(--u));height:calc(96*var(--u));border-radius:50%;align-self:center;object-fit:cover;box-shadow:0 0 0 calc(4*var(--u)) #fff,0 0 0 calc(7*var(--u)) #c7b4ff;margin:calc(4*var(--u)) 0 calc(6*var(--u))}
#nextBox{margin-left:auto;display:flex;align-items:center;gap:calc(6*var(--u));height:calc(38*var(--u));padding:0 calc(4*var(--u)) 0 calc(12*var(--u));border-radius:calc(22*var(--u));
  background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#nextBox span{font-size:calc(12*var(--u));font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(60,30,120,.6);letter-spacing:.06em}
#nextBox .nb{width:calc(32*var(--u));height:calc(32*var(--u));border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,.4))}
#nextImg{width:88%;height:88%;object-fit:contain}
#nextImg.pop{animation:pop .3s cubic-bezier(.3,1.6,.5,1)}

/* combo badge (right, below NEXT; clear of shooter arc) */
#combo{position:absolute;right:calc(10*var(--u));top:calc(58*var(--u));z-index:5;display:none;flex-direction:column;align-items:flex-end;gap:calc(3*var(--u));pointer-events:none}
#combo.on{display:flex;animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
#combo b{font-size:calc(17*var(--u));font-weight:900;color:#fff;padding:calc(1*var(--u)) calc(10*var(--u));border-radius:calc(12*var(--u));
  background:linear-gradient(var(--c1,#ffd23c),var(--c2,#ff9a1e));box-shadow:0 calc(2*var(--u)) 0 var(--c3,#c86a00),0 0 0 calc(2*var(--u)) #fff;text-shadow:0 1px 0 rgba(0,0,0,.25);font-style:italic}
#combo b.hit{animation:bump .25s ease-out}
#combo i{display:block;width:calc(78*var(--u));height:calc(6*var(--u));border-radius:9px;background:rgba(255,255,255,.45);overflow:hidden;box-shadow:0 0 0 calc(1.5*var(--u)) #fff}
#combo em{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--c1,#ffd23c),var(--c2,#ff9a1e));border-radius:9px}
#combo.t2{--c1:#ffb45a;--c2:#ff6a2a;--c3:#b83d00}
#combo.t3{--c1:#ff8fd0;--c2:#ff3d8f;--c3:#a8165a}

/* ---------- bottom candy buttons ---------- */
#bar{position:absolute;left:0;right:0;bottom:calc(18*var(--u));display:flex;justify-content:center;align-items:center;gap:calc(14*var(--u));z-index:5}
.cb{border:0;padding:0;touch-action:none;position:relative;display:grid;place-items:center}
.cb::after{content:"";position:absolute;left:12%;right:12%;top:8%;height:34%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}
.cb:active,.cb.down{transform:translateY(calc(4*var(--u)))}
.cb.side{width:calc(84*var(--u));height:calc(64*var(--u));border-radius:calc(24*var(--u));color:var(--ink);
  background:linear-gradient(#ffffff,#e6dcff);box-shadow:inset 0 0 0 calc(2.5*var(--u)) #fff,0 calc(6*var(--u)) 0 #9b86e0,0 calc(9*var(--u)) calc(10*var(--u)) rgba(60,30,120,.35)}
.cb.side:active,.cb.side.down{box-shadow:inset 0 0 0 calc(2.5*var(--u)) #fff,0 calc(2*var(--u)) 0 #9b86e0,0 calc(4*var(--u)) calc(6*var(--u)) rgba(60,30,120,.35)}
.cb.side svg{width:calc(32*var(--u));height:calc(32*var(--u))}
.cb.main{width:calc(130*var(--u));height:calc(72*var(--u));border-radius:calc(28*var(--u));font-size:calc(28*var(--u));font-weight:900;color:#fff;letter-spacing:.02em;
  background:linear-gradient(var(--yel1),var(--yel2));text-shadow:0 calc(2*var(--u)) 0 var(--yel3),0 0 calc(2*var(--u)) rgba(150,70,0,.5);
  box-shadow:inset 0 0 0 calc(3*var(--u)) #fff6c4,0 calc(7*var(--u)) 0 var(--yel3),0 calc(10*var(--u)) calc(12*var(--u)) rgba(120,50,0,.35)}
.cb.main:active,.cb.main.down{box-shadow:inset 0 0 0 calc(3*var(--u)) #fff6c4,0 calc(3*var(--u)) 0 var(--yel3),0 calc(5*var(--u)) calc(6*var(--u)) rgba(120,50,0,.35)}
.cb.main.dim{filter:saturate(.5) brightness(.95)}

/* ---------- modals ---------- */
.modal{position:absolute;inset:0;z-index:7;display:none;align-items:center;justify-content:center;background:rgba(40,20,80,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal.on{display:flex;animation:fade .25s}
.card{width:calc(280*var(--u));box-sizing:border-box;padding:calc(22*var(--u)) calc(22*var(--u)) calc(20*var(--u));border-radius:calc(30*var(--u));text-align:center;
  background:linear-gradient(#fff,#f1eaff);box-shadow:inset 0 0 0 calc(4*var(--u)) #fff,0 0 0 calc(4*var(--u)) #c7b4ff,0 calc(14*var(--u)) calc(30*var(--u)) rgba(40,20,90,.45);
  display:flex;flex-direction:column;gap:calc(10*var(--u));animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.ttl{font-size:calc(26*var(--u));font-weight:900;color:var(--ink);margin-bottom:calc(4*var(--u))}
.ttl.big{font-size:calc(34*var(--u));background:linear-gradient(#ff7ab8,#8a5cff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 calc(2*var(--u)) 0 #fff)}
.lbl{font-size:calc(13*var(--u));font-weight:700;color:var(--ink2);margin-top:calc(2*var(--u))}
#finalScore{font-size:calc(46*var(--u));font-weight:900;line-height:1;color:var(--ink)}
.bestRow{display:flex;align-items:center;justify-content:center;gap:calc(5*var(--u));font-size:calc(14*var(--u));font-weight:700;color:var(--ink2);margin-bottom:calc(6*var(--u))}
.bestRow svg{width:calc(16*var(--u));height:calc(16*var(--u));color:#ffb21e}
#newRec{display:none;align-self:center;font-size:calc(15*var(--u));font-weight:900;color:#fff;padding:calc(3*var(--u)) calc(14*var(--u));border-radius:999px;
  background:linear-gradient(var(--pink1),var(--pink2));box-shadow:0 calc(3*var(--u)) 0 #c0306f;animation:beat 1s ease-in-out infinite}
#newRec.on{display:block}
.mb{height:calc(52*var(--u));border:0;border-radius:calc(20*var(--u));display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));font-size:calc(19*var(--u));font-weight:800;position:relative}
.mb svg{width:calc(22*var(--u));height:calc(22*var(--u))}
.mb:active{transform:translateY(calc(3*var(--u)))}
.mb.yel{color:#fff;background:linear-gradient(var(--yel1),var(--yel2));text-shadow:0 calc(2*var(--u)) 0 var(--yel3);box-shadow:inset 0 0 0 calc(3*var(--u)) #fff6c4,0 calc(5*var(--u)) 0 var(--yel3)}
.mb.wht{color:var(--ink);background:linear-gradient(#fff,#e9e0ff);box-shadow:inset 0 0 0 calc(2.5*var(--u)) #fff,0 calc(5*var(--u)) 0 #a996e6}

/* ---------- menu ---------- */
#menu{position:absolute;inset:0;z-index:8;background:#b8a8f8 url(../assets/img/bg_menu.jpg) center/cover no-repeat;transition:opacity .45s;overflow:hidden}
#menu.off{opacity:0;pointer-events:none}
#menu #mu{position:absolute;left:calc(12*var(--u));top:calc(46*var(--u));z-index:2}
#rays{position:absolute;left:-25%;top:-5%;width:150%;aspect-ratio:1;background:repeating-conic-gradient(rgba(255,255,255,.4) 0 5deg,transparent 5deg 20deg);
  -webkit-mask-image:radial-gradient(circle,#000 5%,transparent 62%);mask-image:radial-gradient(circle,#000 5%,transparent 62%);animation:spin 40s linear infinite}
#glow{position:absolute;left:-5%;top:-8%;width:110%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 60%);animation:glw 4s ease-in-out infinite}
#logo{position:absolute;left:9%;top:11%;width:82%;display:block;animation:pop .8s cubic-bezier(.3,1.6,.5,1) both,bob 3.4s ease-in-out .8s infinite}
#play{position:absolute;left:23%;bottom:2%;width:54%;border:0;background:none;padding:0;animation:beat 1.6s ease-in-out infinite}
#play img{width:100%;display:block;filter:drop-shadow(0 6px 8px rgba(80,40,140,.4));transition:transform .1s}
#play:active img{transform:scale(.93)}
.sp{position:absolute;color:#fff;text-shadow:0 0 8px #fff;font-size:calc(20*var(--u));animation:tw 2.2s ease-in-out infinite}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glw{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes tw{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}