@font-face{font-family:"Fredoka";src:url(../fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0b3d2a;color:#fff;font-family:"Fredoka","Baloo 2",system-ui,-apple-system,"SF Pro Rounded",Segoe UI,Roboto,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
body{background:#0b3d2a;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font:inherit;color:inherit;border:0;cursor:pointer}
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 8px)}
.screen.on{display:flex}
.icon{background:#ffffff1f;border-radius:12px;width:44px;height:44px;font-size:20px}
.icon:disabled{opacity:.3}
.big{background:linear-gradient(#ffd54a,#f0a500);color:#3a2300;font-weight:900;font-size:20px;padding:14px 34px;border-radius:999px;box-shadow:0 5px 0 #a86a00,0 8px 18px #0006}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #a86a00}
.top,.hud{width:100%;max-width:560px;display:flex;align-items:center;gap:8px}
.brand{flex:1;font-weight:900;font-size:26px;letter-spacing:.5px}.brand b{color:#ffd54a}
.pill{background:#0006;padding:8px 12px;border-radius:999px;font-weight:700}
.wbar{display:flex;align-items:center;gap:10px;margin:10px 0;font-weight:700}
#levels{flex:1;overflow-y:auto;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0 20px;touch-action:pan-y}
.lv{position:relative;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5fe39a,#138a4c);box-shadow:0 5px 0 #0a5a30,0 8px 14px #0005;transform:translateX(calc(var(--off) * 3 - 84px));display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.lv .n{font-weight:900;font-size:22px}.lv .st{font-size:12px;color:#ffd54a;letter-spacing:1px}
.lv.lock{background:#4a5a52;box-shadow:0 5px 0 #2a352f}.lv.cur{outline:4px solid #ffd54a;animation:pulse 1.2s infinite}
.lv.boss{background:radial-gradient(circle at 35% 30%,#ffb36b,#c0392b);box-shadow:0 5px 0 #7a1f14}
.lv .new{position:absolute;left:84px;white-space:nowrap;background:#ffd54a;color:#3a2300;font-weight:800;font-size:12px;padding:3px 8px;border-radius:8px}
@keyframes pulse{50%{transform:translateX(calc(var(--off) * 3 - 84px)) scale(1.08)}}
#playBtn{margin-top:6px}
.hc{flex:1;text-align:center}#lvT{font-weight:900;font-size:20px}.sc{font-size:14px;opacity:.9}
.mv{background:#0007;border-radius:14px;padding:4px 12px;text-align:center;line-height:1}.mv b{font-size:26px;display:block}.mv small{font-size:11px;opacity:.8}
#goals{display:flex;gap:10px;margin:8px 0;flex-wrap:wrap;justify-content:center}
.goal{display:flex;align-items:center;gap:6px;background:#0006;padding:6px 10px;border-radius:12px;font-size:18px}.goal.done{background:#1f8a5acc}
.gi{width:34px;height:34px;font-size:24px;display:inline-flex;align-items:center;justify-content:center}
#boardWrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%}
#board{position:relative;touch-action:none}
#board .bg{position:absolute;left:0;top:0;width:var(--sz);height:var(--sz);background:#00000040}#board .bg.alt{background:#00000025}
#board .t{position:absolute;left:0;top:0;width:var(--sz);height:var(--sz);background-size:100% 100%;transition:transform .22s cubic-bezier(.3,1.3,.5,1),opacity .25s;will-change:transform;z-index:2}
#board .t.sel{filter:brightness(1.3) drop-shadow(0 0 6px #ffd54a);z-index:3}
#board .t.pop{opacity:0;scale:1.4;transition:opacity .24s,scale .24s}
#board .t.born{animation:born .35s}
@keyframes born{0%{scale:.3}70%{scale:1.25}100%{scale:1}}
#board .t[data-s="c"]{animation:spin 3s linear infinite}@keyframes spin{50%{filter:brightness(1.35)}}
#board .crate{position:absolute;left:0;top:0;width:var(--sz);height:var(--sz);z-index:1;border-radius:6px;background:repeating-linear-gradient(45deg,#b07a3a 0 6px,#9a6428 6px 12px);box-shadow:inset 0 0 0 3px #6a4012;transition:opacity .3s,scale .3s}
#board .crate[data-hp="2"]{background:repeating-linear-gradient(45deg,#7a8a96 0 6px,#5a6a76 6px 12px);box-shadow:inset 0 0 0 3px #3a4650}
#board .crate.gone{opacity:0;scale:.4}
.fs{position:absolute;left:0;top:0;z-index:5;font-weight:900;font-size:20px;color:#ffd54a;text-shadow:0 2px 0 #000;pointer-events:none;animation:fs .8s forwards}
@keyframes fs{to{translate:0 -40px;opacity:0}}
.modal{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:50}.modal.on{display:flex}
.card{background:linear-gradient(#1f8a5a,#0e5a39);border:3px solid #ffd54a;border-radius:24px;padding:22px;width:min(88vw,360px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.card h2{margin:0}.row{display:flex;gap:10px}.row button{background:#ffffff26;padding:10px 20px;border-radius:999px;font-weight:700}
.stars{font-size:48px;letter-spacing:6px}.stars span{color:#ffffff40;display:inline-block}.stars span.on{color:#ffd54a;animation:star .5s backwards}
@keyframes star{0%{scale:0}70%{scale:1.4}}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);translate:-50% 40px;background:#000c;padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;transition:.3s;z-index:60;max-width:90vw;text-align:center;pointer-events:none}#toast.on{opacity:1;translate:-50% 0}

#scene{position:fixed;inset:0;background:#0b3d2a center/cover no-repeat;transition:background-image .6s}
#scene::after{content:"";position:absolute;inset:0;background:linear-gradient(#0006,#0000 25%,#0000 70%,#0007)}
.brand,#lvT,.wbar,.sc{text-shadow:0 2px 4px #000a}
.wbar{background:#0008;padding:6px 10px;border-radius:16px;backdrop-filter:blur(4px)}#worldT{text-align:center}#worldT small{display:block;font-size:12px;opacity:.85;font-weight:600}
.panel{background:rgba(8,22,30,.62);border:2px solid #ffffff30;border-radius:18px;padding:8px;box-shadow:0 10px 30px #0008;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#board .bg{background:#ffffff14}#board .bg.alt{background:#ffffff08}
#board .bank{position:absolute;left:0;top:0;width:calc(var(--sz) * 2);height:calc(var(--sz) * 2);background-size:100% 100%;z-index:0;opacity:.95;transition:transform .5s,opacity .8s}
#board .bank.found{animation:bankf 1.2s forwards;z-index:4}
@keyframes bankf{0%{scale:1}40%{scale:1.35;filter:brightness(1.4) drop-shadow(0 0 12px #ffd54a)}100%{scale:.2;opacity:0;translate:0 -80px}}
#board .cover{position:absolute;left:0;top:0;width:var(--sz);height:var(--sz);z-index:1;background:linear-gradient(135deg,#8a5a2c,#5e3a18);box-shadow:inset 0 0 0 2px #3a2208;border-radius:4px;transition:opacity .4s}
#board .ice{position:absolute;left:0;top:0;width:var(--sz);height:var(--sz);z-index:3;pointer-events:none;border-radius:6px;background:linear-gradient(135deg,#e8fbff80,#8fd8ff30 50%,#ffffff60);box-shadow:inset 0 0 0 2px #ffffffc0;transition:opacity .4s}
#board .ice[data-l="1"]{opacity:.55}#board .ice[data-l="2"]{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px #bfeaff}#board .ice[data-l="3"]{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px #7fd0ff,inset 0 0 0 9px #fff;background:linear-gradient(135deg,#e8fbffd0,#8fd8ff90 50%,#ffffffc0)}
#board .ice.gone,#board .cover.gone{opacity:0}
#pbar{display:flex;gap:6px;align-items:center;background:#000a;padding:6px 8px;border-radius:18px;margin-top:6px;border:1px solid #ffffff30}
.pw{position:relative;width:54px;height:54px;border-radius:14px;background:linear-gradient(#3fbf7f,#16774a);box-shadow:0 3px 0 #0a4a2c;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pw.on{outline:3px solid #ffd54a;filter:brightness(1.25)}.pi{font-size:22px;font-weight:900}.pc{font-size:11px;font-weight:800;background:#000a;border-radius:8px;padding:0 5px;position:absolute;bottom:-4px;right:-4px}
.coins{font-weight:800;padding:0 6px;color:#ffd54a}
.lv{border:3px solid transparent}.lv.t0{background:radial-gradient(circle at 35% 30%,#7ff0b0,#139a54)}.lv.t1{background:radial-gradient(circle at 35% 30%,#ffe27a,#d99a00);box-shadow:0 5px 0 #8a6000}.lv.t2{background:radial-gradient(circle at 35% 30%,#ffa56b,#d9480f);box-shadow:0 5px 0 #8a2a00}.lv.t3{background:radial-gradient(circle at 35% 30%,#d58bff,#7b1fa2);box-shadow:0 5px 0 #4a0a6a}
.lv.lock{filter:grayscale(.75) brightness(.75)}
.lv .ch{position:absolute;top:-8px;right:-8px;background:#fff;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0006}.lv .ch .gi{width:24px!important;height:24px!important}
.lv .tl{position:absolute;bottom:-9px;background:#000c;font-size:10px;font-weight:800;padding:1px 6px;border-radius:6px;white-space:nowrap}
.tier{font-weight:900;padding:3px 12px;border-radius:999px}.tier.t0{background:#139a54}.tier.t1{background:#d99a00}.tier.t2{background:#d9480f}.tier.t3{background:#7b1fa2}
.obj{font-size:13px;letter-spacing:2px;text-transform:uppercase;opacity:.8}
#stGoals{display:flex;flex-direction:column;gap:8px;width:100%}.og{display:flex;align-items:center;gap:12px;background:#0004;border-radius:12px;padding:6px 10px;font-weight:700;text-align:left}
.newn img{width:40px;vertical-align:middle}.newn{font-weight:800;color:#ffd54a}
.card{position:relative}.x{position:absolute;right:10px;top:8px;background:#0004;border-radius:50%;width:32px;height:32px}
.big:disabled{filter:grayscale(1);opacity:.6}

/* ---- Candy-Crush-Friends style skin ---- */
.hud.ccf{display:flex;align-items:flex-start;gap:6px;padding:6px 8px 0;position:relative;z-index:2}
.hbar{flex:1;display:flex;align-items:stretch;justify-content:space-between;background:linear-gradient(#a45be6,#6a1fb4 60%,#4d0f8e);border:3px solid #f6d9ff;border-radius:0 0 22px 22px;box-shadow:0 6px 0 #3a0a6c,0 10px 20px #0007,inset 0 2px 0 #ffffff70;padding:6px 10px 10px;min-height:70px}
.hbar small{display:block;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:.9}
.hgoal{flex:1;text-align:left}.hgoal #goals{display:flex;gap:6px;margin:2px 0 0;justify-content:flex-start;flex-wrap:wrap}
.hgoal .goal{background:#ffffff26;border-radius:12px;padding:2px 6px;display:flex;align-items:center;gap:4px}.hgoal .goal b{font-size:16px}
.hmv{width:72px;height:72px;margin:-4px 6px -22px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#e9d3ff 45%,#b07ae8);border:4px solid #fff;box-shadow:0 4px 0 #4d0f8e,0 6px 14px #0007;color:#4d0f8e;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:none}
.hmv b{font-size:28px;line-height:1;font-weight:900}.hmv small{font-size:10px}
.hsc{flex:1;text-align:right}.hsc b{font-size:18px;font-weight:900}
.smeter{position:relative;height:10px;margin:8px 4px 0 auto;width:90%;border-radius:6px;background:#2a0750;box-shadow:inset 0 2px 3px #0008}
.smeter i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(#ffe86b,#ffb300);transition:width .3s}
.smeter .st{position:absolute;top:-9px;font-size:18px;color:#5c3a85;transform:translateX(-50%);text-shadow:0 1px 0 #0008}.smeter .st.lit{color:#ffd84a;text-shadow:0 0 6px #ffb300}
#game #goals{margin:0}
#boardWrap .panel{background:linear-gradient(rgba(60,20,110,.55),rgba(25,8,60,.65));border:4px solid #fff;border-radius:22px;padding:7px;box-shadow:0 0 0 3px #b07ae8,0 12px 30px #000a,inset 0 0 18px #ffffff30;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
#board .bg{background:rgba(255,255,255,.16);border-radius:6px}#board .bg.alt{background:rgba(255,255,255,.08)}
#pbar{background:none;border:0;gap:10px;justify-content:center;flex-wrap:nowrap;margin-top:10px;padding:4px}
.pw{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0,#d6b3ff 25%,#8b3fd9 70%,#5a1aa0);border:3px solid #fff;box-shadow:0 4px 0 #3a0a6c,0 6px 12px #0008}
.pw .pi{font-size:24px;filter:drop-shadow(0 2px 1px #0006)}.pw .pn{display:none}
.pw .pc{bottom:-6px;right:-8px;background:linear-gradient(#5ee06b,#1f9a2c);border:2px solid #fff;border-radius:12px;font-size:12px;padding:0 6px;min-width:22px;text-align:center}
.pw.on{outline:none;box-shadow:0 0 0 4px #ffd84a,0 0 18px #ffd84a;transform:scale(1.08)}
#pbar .coins{background:linear-gradient(#ffe27a,#d99a00);color:#4a2a00;border:2px solid #fff;border-radius:14px;padding:4px 8px;box-shadow:0 3px 0 #8a6000}
.card{background:linear-gradient(#a45be6,#5a1aa0);border:4px solid #f6d9ff;box-shadow:0 8px 0 #3a0a6c,0 14px 30px #000a}
.og{background:#ffffff22}

/* ---- v4 glossy jewel skin ---- */
#board .t{transition:transform .26s cubic-bezier(.34,1.56,.64,1),opacity .25s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
#board .t.pop{opacity:0;scale:1.45;filter:brightness(2) drop-shadow(0 0 10px #fff);transition:opacity .28s,scale .28s,filter .1s}
#board .t.land{animation:land .42s ease-out .12s}
@keyframes land{0%{scale:1 1}35%{scale:1.12 .84;translate:0 6%}65%{scale:.95 1.06;translate:0 -3%}100%{scale:1 1;translate:0 0}}
#board .t.sel{filter:brightness(1.2) drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px #ffd84a);animation:selp .7s ease-in-out infinite}
@keyframes selp{50%{scale:1.1}}
#board .t[data-s="h"],#board .t[data-s="v"],#board .t[data-s="b"]{animation:glow 1.2s ease-in-out infinite}
@keyframes glow{50%{filter:brightness(1.3) drop-shadow(0 0 8px #fff6a0) drop-shadow(0 0 14px #ffb300)}}
#board .t[data-s="c"]{animation:kglow 1.6s ease-in-out infinite}@keyframes kglow{50%{filter:brightness(1.25) drop-shadow(0 0 12px #ffcf6a);scale:1.06}}
#board .spk{position:absolute;border-radius:50%;z-index:6;pointer-events:none;box-shadow:0 0 6px #fff;translate:-50% -50%;animation:spk .6s ease-out forwards}
@keyframes spk{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
#boardWrap .panel{background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(120,70,200,.30) 40%,rgba(40,10,90,.45));border:3px solid rgba(255,255,255,.85);border-radius:24px;padding:8px;box-shadow:0 0 0 4px rgba(176,122,232,.8),0 14px 34px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.7),inset 0 -6px 18px rgba(40,0,80,.35);-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3)}
#board .bg{background:linear-gradient(rgba(255,255,255,.30),rgba(255,255,255,.16));border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.12);scale:.94}
#board .bg.alt{background:linear-gradient(rgba(220,200,255,.26),rgba(200,180,255,.12))}
#board .ice{border-radius:16px;background:linear-gradient(140deg,rgba(255,255,255,.75),rgba(170,230,255,.35) 45%,rgba(255,255,255,.15) 60%,rgba(200,240,255,.55));box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 -4px 8px rgba(80,170,230,.45),0 0 6px rgba(160,230,255,.6);scale:.96}
#board .ice[data-l="1"]{opacity:.6}
#board .ice[data-l="2"]{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px rgba(140,210,255,.9),inset 0 -4px 8px rgba(80,170,230,.5)}
#board .ice[data-l="3"]{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #7fd0ff,inset 0 0 0 10px #fff,0 0 10px #bfeaff;background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(150,220,255,.6) 50%,rgba(255,255,255,.75))}
#board .crate{border-radius:12px!important;background:linear-gradient(#c98a4a,#8a5424)!important;box-shadow:inset 0 3px 0 rgba(255,230,180,.6),inset 0 -4px 0 rgba(60,30,8,.5),0 3px 5px rgba(0,0,0,.4)!important;scale:.94}
#board .cover{border-radius:12px;background:linear-gradient(#b27a3e,#6e4218);box-shadow:inset 0 3px 0 rgba(255,220,160,.5),inset 0 -3px 0 rgba(0,0,0,.35);scale:.94}
.hbar{background:linear-gradient(#c27cf5,#8a34d6 45%,#5a16a6);border:3px solid #fff;box-shadow:0 0 0 3px #7a2cc4,0 8px 0 #3a0a6c,0 12px 24px rgba(0,0,0,.5),inset 0 3px 0 rgba(255,255,255,.6)}
.hbar::before{content:"";position:absolute;left:12%;right:12%;top:3px;height:14px;border-radius:12px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.hbar{position:relative}
.hmv{background:radial-gradient(circle at 38% 28%,#fff 0,#f6eaff 30%,#c79af2 75%,#9a5ad8);box-shadow:0 0 0 3px #7a2cc4,0 5px 0 #3a0a6c,0 8px 16px rgba(0,0,0,.5)}
.pw{width:58px;height:58px;background:radial-gradient(circle at 36% 26%,#fff 0,#f3e4ff 12%,#b77cf0 45%,#7a2cc4 80%,#56139a);box-shadow:0 0 0 3px #7a2cc4,0 5px 0 #3a0a6c,0 8px 14px rgba(0,0,0,.5),inset 0 -5px 8px rgba(40,0,80,.4);transition:transform .15s}
.pw:active{transform:scale(.92)}
.pw::after{content:"";position:absolute;left:18%;top:8%;width:45%;height:28%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}

/* ---- v5: notes are the tiles (cell = note aspect, edge to edge) ---- */
#board .t,#board .bg,#board .crate,#board .cover,#board .ice{height:var(--sh)!important;scale:1!important;border-radius:8px!important}
#board .t{filter:none}
#board .t[data-s="c"],#board .t[data-s="drop"]{background-size:contain;background-position:center;background-repeat:no-repeat;background-color:rgba(0,0,0,.15)}
#board .bank{height:calc(var(--sh) * 2)!important}
#board .bg{box-shadow:none;background:rgba(255,255,255,.12)}
#board .ice{border-radius:3px!important}
#boardWrap .panel{padding:5px;border-radius:14px}
.lv .ch .gi{height:auto!important}
#board .t[data-s="c"]{z-index:4}
/* ---- v6 board fill + Nigerian power-ups ---- */
.hud.ccf{padding:2px 4px 0}.hbar{min-height:54px;padding:4px 8px 8px;border-radius:0 0 18px 18px;box-shadow:0 0 0 2px #7a2cc4,0 5px 0 #3a0a6c,0 8px 16px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.55)}
.hmv{width:58px;height:58px;margin:-2px 4px -16px}.hmv b{font-size:22px}.hsc b{font-size:15px}.smeter{margin-top:4px}
#pbar{margin-top:4px;padding:2px;gap:6px}
.pw{width:52px;height:52px;overflow:visible}.pw .pi{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 2px #0006)}.pw .pc{bottom:-4px;right:-6px}
#boardWrap{margin:2px auto}.panel{padding:4px!important;border-radius:14px!important}
#board .t{border-radius:6px!important}
.fx{position:absolute;z-index:20;pointer-events:none;will-change:transform,opacity}
.fx img{height:100%;width:auto;display:block;filter:drop-shadow(0 4px 8px #000a)}
.fx-danfo{left:0;display:flex;align-items:center}.fx-danfo img{height:100%}
.fx-drum{top:0;display:flex;justify-content:center}.fx-drum img{width:90%;height:auto}
.fx-gen{width:var(--sz);height:var(--sh);display:flex;align-items:center;justify-content:center}.fx-gen img{width:100%;height:auto}
.fx-flash{position:absolute;width:20px;height:20px;border-radius:50%;background:radial-gradient(#fff,#ffd84a 40%,transparent 70%);transform:translate(-50%,-50%);pointer-events:none;z-index:21}
.fx-jollof,.fx-suya{left:50%;top:40%;transform:translate(-50%,-50%);width:120px;height:120px;display:flex;align-items:center;justify-content:center}.fx-jollof img,.fx-suya img{width:100%;height:auto}
.icon.music{font-size:18px}

#livesM{background:linear-gradient(#ff6b8a,#c2185b);border:2px solid #fff;color:#fff;font-weight:800;box-shadow:0 3px 0 #8a0a3a}
.top .pill{font-size:13px;padding:4px 8px}

/* ---- v7: phone frame fit (~390×844) ---- */
.screen{max-width:420px;left:0;right:0;width:100%;margin-left:auto;margin-right:auto;padding:calc(env(safe-area-inset-top) + 4px) 6px calc(env(safe-area-inset-bottom) + 4px);box-sizing:border-box}
.top,.hud{max-width:100%;gap:4px}
.top .brand{font-size:18px}
.top .pill{font-size:11px;padding:3px 6px}
.top .icon,.hud .icon{width:36px;height:36px;font-size:16px;border-radius:10px;flex:none}
.hud.ccf{width:100%;max-width:100%;padding:2px 2px 0;gap:4px;align-items:flex-start}
.hbar{min-height:48px;padding:3px 6px 6px;border-radius:0 0 14px 14px;border-width:2px;box-shadow:0 0 0 2px #7a2cc4,0 4px 0 #3a0a6c,0 6px 12px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.55);flex:1;min-width:0}
.hmv{width:48px;height:48px;margin:-2px 2px -12px;border-width:3px}.hmv b{font-size:18px}.hmv small{font-size:8px}
.hsc b{font-size:13px}.hgoal .goal{padding:1px 4px}.hgoal .goal b{font-size:13px}.hgoal .gi{width:22px;height:22px;font-size:16px}
.smeter{height:8px;margin-top:3px}.smeter .st{font-size:14px;top:-7px}
#pbar{width:100%;max-width:100%;margin-top:4px;padding:2px 0;gap:4px;justify-content:space-evenly;box-sizing:border-box;overflow:visible}
.pw{width:44px;height:44px;flex:none;border-width:2px;box-shadow:0 0 0 2px #7a2cc4,0 3px 0 #3a0a6c,0 5px 10px rgba(0,0,0,.45),inset 0 -4px 6px rgba(40,0,80,.35)}
.pw .pi{width:30px;height:30px}.pw .pc{font-size:10px;padding:0 4px;min-width:16px;bottom:-3px;right:-4px;border-width:1px}
#pbar .coins{display:none!important} /* coins only on map */
#boardWrap{width:100%;max-width:100%;min-height:0;flex:1 1 auto}
#boardWrap .panel{padding:3px!important;border-radius:12px!important;border-width:2px;box-shadow:0 0 0 2px rgba(176,122,232,.8),0 8px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)}
#game.screen{overflow:hidden}
#map .top{max-width:100%}
#levels{max-width:100%}
@media (max-width:420px){
  .pw{width:40px;height:40px}.pw .pi{width:26px;height:26px}
  .hmv{width:44px;height:44px}.hmv b{font-size:16px}
  .top .brand{font-size:16px}
}

/* ---- GTL-style ☰ menu ---- */
.menub{width:40px;height:40px;min-height:40px;padding:0;font-size:20px;line-height:1;border-radius:12px;flex:none}
.menu{position:fixed;z-index:200;min-width:220px;max-width:min(280px,92vw);background:#1a0a3a;border:1px solid #c27cf5;border-radius:14px;padding:6px;box-shadow:0 12px 30px #000c;display:flex;flex-direction:column}
.menu .mi{display:flex;align-items:center;gap:10px;background:transparent;color:#fff;text-align:left;padding:10px 12px;border-radius:10px;font-weight:600;font-size:15px;min-height:44px;width:100%;font-family:inherit}
.menu .mi span{width:22px;text-align:center;flex:none}.menu .mi:hover:not(:disabled),.menu .mi:focus-visible{background:#c27cf533;outline:none}
.menu .mi:disabled{opacity:.4}.menu .mi b{font-weight:800;color:#ffd54a}
.menu .mi[data-danger]{color:#ff7a7a;border-top:1px solid #ffffff1f;border-radius:0 0 10px 10px;margin-top:4px}
.help{font-size:14px;line-height:1.45;opacity:.95;margin:0;font-weight:600;text-align:left;width:100%}
.help-list{text-align:left;margin:0;padding:0 0 0 18px;font-size:13px;line-height:1.45;font-weight:600;width:100%}
.help-list li{margin:6px 0}.card a.tg,.card a.em{color:#ffd54a;font-weight:800}
.top{gap:4px;flex-wrap:nowrap}.top .brand{font-size:17px;min-width:0}
.menu a.mi{text-decoration:none;font-family:inherit;line-height:1.2;-webkit-tap-highlight-color:transparent;color:#fff;box-sizing:border-box}
.menu a.mi:hover{background:#c27cf533}