/* Match — Premium Cute Pastel UI */
:root{
  --mint:#bff3df; --blue:#cfe8ff; --lav:#e3d7ff; --peach:#ffdcc7; --pink:#ffd1e3; --cream:#fff8ec; --gold:#ffcf5a;
  --ink:#4b3a78; --ink2:#7a6aa6; --white:#fff; --ok:#3fbf8a; --bad:#ff6b8b;
  --cell:44px; --radius:16px;
  /* design tokens — spacing / radius / shadow / type (Visual Upgrade Spec §9) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:24px;
  --sh-s:0 2px 5px rgba(90,60,160,.12); --sh-m:0 4px 12px rgba(90,60,160,.13); --sh-l:0 10px 28px rgba(60,40,140,.2);
  --shadow:var(--sh-m);
  --font:'Baloo 2','Nunito',Arial,sans-serif;
  --f-head:var(--font); --f-body:var(--font);
  --fs-title:clamp(24px,6.4vw,30px); --fs-section:clamp(18px,4.8vw,22px); --fs-cta:clamp(16px,4.3vw,19px); --fs-score:clamp(16px,4.4vw,20px); --fs-body:clamp(13px,3.6vw,15px); --fs-cap:clamp(11px,3vw,12.5px);
  --btn-h:50px; --btn-h-sm:40px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#cbd9ff;color:var(--ink);font-family:var(--font);font-weight:500;overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{min-width:0}
img{object-fit:contain}
img{-webkit-user-drag:none;user-select:none}
button{font-family:var(--f-head);cursor:pointer;border:0;background:none;color:inherit;padding:0}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:url(../img/bg_wide.webp) center/cover no-repeat}
#stage::before{content:"";position:absolute;inset:0;backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px);background:rgba(220,230,255,.35)}
#app{position:relative;width:100%;max-width:430px;height:100%;max-height:932px;overflow:hidden;background:#dff1ff;box-shadow:var(--sh-l);user-select:none;-webkit-user-select:none;touch-action:manipulation}
@media (min-width:500px){#app{border-radius:28px;height:calc(100% - 24px)}}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.show{display:flex}
.h{font-family:var(--f-head);font-weight:700}
.muted{color:var(--ink2)}
.row{display:flex;align-items:center;gap:8px}
.grow{flex:1}

/* ---------- boot ---------- */
#boot{align-items:center;justify-content:center;background:url(../img/bg_main.webp) center/cover;gap:14px}
.boot-buddy{width:150px;animation:bob 1.6s ease-in-out infinite}
.boot-title{font-family:var(--f-head);font-size:40px;font-weight:700;color:#fff;text-shadow:0 3px 0 #a58be0,0 6px 16px rgba(90,60,160,.35)}
.boot-title b{color:#ffe07a}
.boot-bar{width:220px;height:14px;border-radius:9px;background:rgba(255,255,255,.7);overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9be7c4,#a3cbff,#d6b4ff);transition:width .2s}
.boot-tip{font-size:14px;color:#fff;text-shadow:0 1px 3px rgba(70,40,140,.5)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-block;vertical-align:middle;height:var(--btn-h);line-height:calc(var(--btn-h) - 4px);min-width:140px;max-width:100%;padding:0 calc(var(--btn-h) * .45) 4px;font-size:var(--fs-cta);font-weight:700;color:#fff;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:0 solid transparent;border-image:url(../img/ui_primary.webp) 0 68 fill / 0 calc(var(--btn-h) / 2) stretch;padding-left:calc(var(--btn-h) * .42);padding-right:calc(var(--btn-h) * .42);
  text-shadow:0 1px 0 rgba(0,0,0,.16);transition:transform .1s, filter .15s}
.btn img{width:22px;height:22px;vertical-align:-5px;margin-right:4px;object-fit:contain}
.btn.purple{border-image-source:url(../img/ui_purple.webp)}
.btn.secondary{border-image-source:url(../img/ui_secondary.webp);color:#2f4f80;text-shadow:none}
.btn.buy{border-image-source:url(../img/ui_purchase.webp);color:#7a4a00;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.btn.sm{--btn-h:var(--btn-h-sm);min-width:96px;font-size:15px}
.btn:active{transform:scale(.95) translateY(2px)}
.btn[disabled],.btn.disabled{border-image-source:url(../img/ui_disabled.webp);color:#9a8fa8;text-shadow:none;pointer-events:none}
.btn.loading{pointer-events:none;filter:saturate(.6)}
.btn.loading::after{display:inline-block;vertical-align:middle;margin-left:6px;content:"";width:16px;height:16px;border:3px solid rgba(255,255,255,.6);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@media (hover:hover){.btn:hover{filter:brightness(1.06)}.ib:hover{filter:brightness(1.08)}}
.ib{width:46px;height:46px;flex:none;transition:transform .1s}
.ib img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(80,50,150,.25))}
.ib:active{transform:scale(.9)}

/* ---------- intro ---------- */
#intro{background:url(../img/bg_main.webp) center/cover;align-items:center;overflow-y:auto;padding:max(28px,env(safe-area-inset-top)) 20px 24px}
.intro-logo{margin-top:10px;text-align:center}
.intro-logo .t1{font-family:var(--f-head);font-weight:700;font-size:44px;line-height:1;color:#fff;text-shadow:0 3px 0 #9d7fe0,0 6px 14px rgba(90,60,160,.24)}
.intro-logo .t1 b{color:#ffe07a}
.intro-logo .t2{font-size:15px;color:#fff;margin-top:6px;text-shadow:0 1px 3px rgba(60,40,130,.6)}
.intro-hero{position:relative;width:250px;height:200px;margin:4px auto}
.intro-hero .bd{position:absolute;left:50%;top:6px;width:170px;transform:translateX(-50%);animation:bob 1.8s ease-in-out infinite}
.intro-hero .pc{position:absolute;width:52px;animation:bob 2.2s ease-in-out infinite}
.card{background:rgba(255,253,248,.93);border-radius:24px;box-shadow:var(--shadow);border:3px solid #fff}
.intro-card{width:100%;max-width:360px;padding:18px 18px 16px;animation:pop .4s ease-out}
.intro-card h2{margin:0 0 4px;font-family:var(--f-head);font-size:22px;text-align:center}
.intro-card p{margin:0 0 12px;font-size:14px;text-align:center;color:var(--ink2)}
.field{display:block;margin-bottom:10px;font-size:13px;color:var(--ink2)}
.input{display:block;width:100%;margin-top:4px;height:46px;border-radius:14px;border:2px solid #e6dcff;background:#fff;padding:0 14px;font:600 16px var(--f-body);color:var(--ink);outline:none}
.input:focus{border-color:#b49cff;box-shadow:0 0 0 3px rgba(180,156,255,.25)}
.intro-card .btn{width:100%}
.intro-links{display:flex;justify-content:space-between;margin-top:12px;font-size:13px}
.intro-links a{color:#7d5ce0;text-decoration:none;font-weight:700}
.intro-feats{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.intro-feats span{background:rgba(255,255,255,.85);border-radius:12px;padding:6px 10px;font-size:12px;display:flex;align-items:center;gap:4px}
.intro-feats img{width:22px}
.err{color:var(--bad);font-size:13px;min-height:18px;text-align:center;margin:4px 0}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:5;display:flex;align-items:center;gap:6px;padding:max(10px,env(safe-area-inset-top)) 10px 8px}
.avatar{position:relative;width:48px;height:48px;flex:none}
.avatar img.a{position:absolute;inset:7px;width:34px;height:34px;border-radius:50%;object-fit:cover;background:#fff}
.avatar img.f{position:absolute;inset:0;width:48px;height:48px}
.pill{flex:none;max-width:46%;overflow:hidden;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:4px;height:34px;padding:0 10px 0 4px;border-radius:18px;background:rgba(255,255,255,.88);box-shadow:0 3px 8px rgba(90,60,160,.15);font-family:var(--f-head);font-weight:700;font-size:16px;white-space:nowrap}
.pill img{width:30px;height:30px;object-fit:contain}
.pill small{font-family:var(--f-body);font-size:11px;color:var(--ink2);font-weight:700}
.pill .plus{width:20px;height:20px;border-radius:50%;background:#7ed9a8;color:#fff;font-size:15px;line-height:20px;text-align:center;margin-left:2px}
.uname{min-width:0;flex:0 1 auto;font-family:var(--f-head);font-weight:700;font-size:15px;color:#fff;text-shadow:0 1px 3px rgba(60,40,130,.6);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- map ---------- */
#map{background:#bfe3c8}
.map-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.map-scroll::-webkit-scrollbar{display:none}
.map-world{position:relative;width:100%;overflow:hidden;background:#cfe9d4}
.map-bg{position:absolute;left:0;right:0;inset-inline:0;pointer-events:none}
.map-bg img{display:block;width:100%;height:auto;aspect-ratio:640/1384;object-fit:cover}
.map-bg.flip img{transform:scaleX(-1)}
.map-bg+.map-bg{-webkit-mask-image:linear-gradient(to top,transparent,#000 90px);mask-image:linear-gradient(to top,transparent,#000 90px)}
.map-layer{position:absolute;inset:0;z-index:1}
.map-world .wname{position:absolute;left:50%;transform:translateX(-50%);top:14px;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;padding:4px 18px;border-radius:16px;background:rgba(255,255,255,.88);font-family:var(--f-head);font-weight:700;font-size:18px;white-space:nowrap;box-shadow:var(--shadow);z-index:2}
.map-path{position:absolute;inset:0;pointer-events:none}
.node{position:absolute;width:72px;height:72px;margin:-36px 0 0 -36px;display:flex;align-items:center;justify-content:center;z-index:1}
.node img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(60,40,120,.3))}
.node .n{position:relative;font-family:var(--f-head);font-weight:700;font-size:22px;color:#fff;text-shadow:0 2px 0 rgba(80,40,140,.55),0 0 6px rgba(80,40,140,.4);margin-top:-6px}
.node.lock .n{display:none}
.node .stars{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);display:flex}
.node .stars img{width:20px;height:20px;margin:0 -2px}
.node .stars img:nth-child(2){margin-top:-5px}
.node.cur{animation:pulse 1.4s ease-in-out infinite;z-index:2}
.node.cur .me{position:absolute;top:-46px;left:50%;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;border:3px solid #fff;object-fit:cover;box-shadow:var(--shadow);background:#fff}
.node.boss img.bg{filter:drop-shadow(0 0 8px #ffd34d) drop-shadow(0 4px 5px rgba(60,40,120,.3))}
.map-soon{position:relative;padding:30px 20px 140px;text-align:center;font-family:var(--f-head);font-size:18px;color:#fff;text-shadow:0 1px 3px rgba(40,20,90,.6)}
.map-overlay{position:absolute;left:0;right:0;top:0;z-index:5;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0))}
.bottomnav{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-around;padding:8px 6px max(10px,env(safe-area-inset-bottom));background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.75) 40%)}
.nav-b{display:flex;flex-direction:column;align-items:center;gap:0;min-width:64px;font-size:12px;font-family:var(--f-body);font-weight:800;color:var(--ink);position:relative}
.nav-b img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(80,50,150,.25));transition:transform .1s}
.nav-b:active img{transform:scale(.9)}
.badge{position:absolute;top:0;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff5d86;color:#fff;font:800 11px/18px var(--f-body);text-align:center;box-shadow:0 0 0 2px #fff}
.fab-play{position:absolute;right:14px;bottom:96px;z-index:6}

/* ---------- game ---------- */
#game{background:url(../img/bg_play.webp) center/cover}
.g-top{position:relative;z-index:6;padding:max(8px,env(safe-area-inset-top)) 8px 0;display:flex;align-items:flex-start;gap:6px}
.g-moves{position:relative;width:76px;height:76px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center}
.g-moves img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.g-moves b{position:relative;font-family:var(--f-head);font-size:28px;line-height:1;color:var(--ink);margin-top:4px}
.g-moves small{position:relative;font-size:10px;color:var(--ink2);font-weight:800}
.g-moves.low b{color:#ff4f7b;animation:pulse .8s infinite}
.g-obj{flex:1;position:relative;height:76px;border:0 solid transparent;border-image:url(../img/ui_objective.webp) 60 72 fill / 22px 26px stretch;background:none;margin:0;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:8px 18px 10px}
.obj{position:relative;display:flex;flex-direction:column;align-items:center;min-width:44px}
.obj img{width:36px;height:36px;object-fit:contain}
.obj span{font-family:var(--f-head);font-weight:700;font-size:15px;line-height:1;color:var(--ink)}
.obj.done span{color:var(--ok)}
.obj.done::after{content:"✓";position:absolute;top:-4px;right:0;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#fff;font:800 12px/18px var(--f-body);text-align:center}
.obj .ic-txt{width:36px;height:36px;border-radius:50%;background:linear-gradient(#fff3c2,#ffd36b);display:flex;align-items:center;justify-content:center;font-size:12px;font-family:var(--f-head);color:#9a6300}
.g-side{display:flex;flex-direction:column;gap:6px}
.g-score{position:relative;z-index:6;margin:6px 12px 0;height:40px;display:flex;align-items:center;gap:8px}
.g-score .sc{min-width:96px;max-width:44%;height:40px;padding:0 18px 2px;border:0 solid transparent;border-image:url(../img/ui_score.webp) 60 64 fill / 14px 15px stretch;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:700;font-size:19px;padding-bottom:2px}
.sbar{position:relative;flex:1;height:18px;border-radius:10px;background:rgba(255,255,255,.75);box-shadow:inset 0 2px 4px rgba(60,40,120,.18);overflow:visible}
.sbar i{position:absolute;left:0;top:0;bottom:0;border-radius:10px;background:linear-gradient(90deg,#a6f0cf,#9ccfff,#d9b3ff);transition:width .4s}
.sbar img{position:absolute;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;transition:transform .3s}
.sbar img.got{transform:scale(1.15)}
.g-lv{font-family:var(--f-head);font-weight:700;font-size:13px;color:#fff;text-shadow:0 1px 3px rgba(60,40,130,.6);text-align:center;margin-top:2px}
.g-mid{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.board-wrap{position:relative;padding:12px}
.board-frame{position:absolute;inset:-8px;border:0 solid transparent;border-image:url(../img/ui_board.webp) 96 fill / 24px stretch;pointer-events:none;z-index:0;filter:drop-shadow(0 6px 10px rgba(60,40,140,.17))}
.board{position:relative;z-index:1;touch-action:none}
.board .lyr{position:absolute;inset:0}
.board .lyr.ui{pointer-events:none}
.cellbg{position:absolute;width:var(--cell);height:var(--cell);background:url(../img/ui_cell.webp) center/contain no-repeat;opacity:.9}
.cellbg.alt{filter:brightness(1.05) saturate(.9)}
.cellbg.hole{background:none}
.spr{position:absolute;left:0;top:0;width:var(--cell);height:var(--cell);will-change:transform;pointer-events:none}
.spr img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.tile img{filter:drop-shadow(0 2px 2px rgba(60,40,120,.22))}
.tile.sel img{transform:scale(1.12);transition:transform .15s}
.tile.sp-rh img,.tile.sp-rv img,.tile.sp-bomb img,.tile.sp-square img{inset:4%;width:92%;height:92%}
.tile .tint{position:absolute;inset:auto 2% 2% auto;width:36%;height:36%}
.tile.sp-rainbow img{animation:spin 6s linear infinite;inset:3%;width:94%;height:94%}
.tile.hint{animation:pulse .7s ease-in-out 3}
.ob{position:absolute;width:var(--cell);height:var(--cell);pointer-events:none}
.ob img{width:100%;height:100%;object-fit:contain}
.ob.under img{opacity:1;transform:scale(1.04)}
.ob.over img{transform:scale(1.06)}
.ob.block img{transform:scale(1.02);filter:drop-shadow(0 2px 3px rgba(60,40,120,.3))}
.ob.hit{animation:shake .25s}
.fx{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity}
.fx img{width:100%;height:100%;object-fit:contain}
.pop{position:absolute;pointer-events:none;font-family:var(--f-head);font-weight:700;font-size:22px;color:#fff;-webkit-text-stroke:1px #a066e0;text-shadow:0 3px 0 #8a5ad6,0 4px 10px rgba(90,40,170,.4);white-space:nowrap;z-index:30}
.combo-badge{position:absolute;left:50%;top:40%;width:min(260px,80%);aspect-ratio:560/192;height:auto;transform-origin:center;translate:-50% 0;margin-left:0;font-size:clamp(18px,5.6vw,26px)!important;white-space:nowrap;padding-inline:14%;overflow:hidden;text-overflow:ellipsis;background:url(../img/ui_combo.webp) center/contain no-repeat;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:700;font-size:28px;color:#fff;text-shadow:0 2px 0 #b06ad8,0 0 10px rgba(255,255,255,.6);pointer-events:none;z-index:40;padding-bottom:6px}
.g-bot{position:relative;z-index:6;padding:4px 10px max(10px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:4px}
.buddy{position:relative;width:clamp(80px,22vw,96px);aspect-ratio:1;height:auto;flex:none;margin-bottom:2px}
.buddy img{width:100%;height:100%;object-fit:contain;transition:transform .2s}
.buddy .say{position:absolute;bottom:calc(100% - 6px);left:6px;min-width:120px;max-width:200px;padding:8px 10px;border-radius:14px;background:#fff;font-size:12.5px;line-height:1.3;box-shadow:var(--shadow);opacity:0;transform:translateY(6px);transition:.25s;pointer-events:none;z-index:9}
.buddy .say.show{opacity:1;transform:none}
.buddy .say::after{content:"";position:absolute;left:24px;bottom:-7px;border:7px solid transparent;border-top-color:#fff;border-bottom:0}
.tray{flex:1;min-width:0;display:flex;gap:3px;justify-content:space-between;overflow-x:auto;scrollbar-width:none;padding:10px 6px 0 0}
.tray::-webkit-scrollbar{display:none}
.bst{position:relative;width:clamp(40px,11.4vw,50px);aspect-ratio:1;height:auto;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fffdf6,#efe4ff 70%);box-shadow:inset 0 -3px 0 rgba(150,120,220,.35),var(--sh-s);border:2px solid #fff;transition:transform .1s}
.bst img{position:absolute;left:12%;top:10%;width:76%;height:76%;object-fit:contain}
.bst b{position:absolute;right:-4px;top:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#7a5cff;color:#fff;font:700 12px/20px var(--f-head);text-align:center;box-shadow:0 0 0 2px #fff}
.bst b.zero{background:#5ec58f}
.bst.on{transform:translateY(-6px) scale(1.06);box-shadow:0 0 0 3px #ffd75a,0 6px 14px rgba(255,190,40,.5)}
.bst.off{filter:grayscale(.8);opacity:.5;pointer-events:none}
.bst:active{transform:scale(.92)}
.aim-hint{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:20;background:rgba(80,50,160,.85);color:#fff;font-size:13px;padding:6px 12px;border-radius:12px;white-space:nowrap;pointer-events:none}

/* ---------- modals ---------- */
.modal{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(60,40,120,.38);animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}}
.mbox{position:relative;width:100%;max-width:370px;max-height:calc(100% - 20px);overflow-y:auto;padding:22px 18px 18px;animation:pop .3s ease-out;scrollbar-width:thin}
.mbox h2{margin:0 0 6px;text-align:center;font-family:var(--f-head);font-size:26px;font-weight:700}
.mbox .sub{text-align:center;color:var(--ink2);font-size:14px;margin-bottom:12px}
.mclose{position:absolute;right:6px;top:6px;width:42px;height:42px;z-index:2}
.mclose img{width:100%;height:100%}
.mbtns{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.objlist{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.objcard{display:flex;flex-direction:column;align-items:center;min-width:76px;padding:8px;border-radius:16px;background:#f5efff;font-size:12.5px;text-align:center}
.objcard img{width:44px;height:44px;object-fit:contain}
.objcard b{font-family:var(--f-head);font-size:18px}
.starrow{display:flex;justify-content:center;gap:2px;margin:6px 0}
.starrow img{width:62px;height:62px}
.starrow img:nth-child(2){margin-top:-14px;width:72px;height:72px}
.starrow img.anim{animation:pop .4s ease-out both}
.res-full{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:20px 16px max(24px,env(safe-area-inset-bottom));background-size:cover;background-position:center;animation:fadeIn .3s}
.res-full .card{position:relative;z-index:3;width:100%;max-width:360px;padding:18px;text-align:center;animation:pop .4s ease-out}
.res-full .ttl{font-family:var(--f-head);font-weight:700;font-size:34px;color:#fff;text-shadow:0 3px 0 #a07ae0,0 6px 18px rgba(80,40,160,.4);margin-bottom:auto;margin-top:max(30px,env(safe-area-inset-top))}
.res-full .bd{width:150px;margin-bottom:-14px;position:relative;z-index:2;animation:bob 1.6s ease-in-out infinite}
.rewards{display:flex;gap:10px;justify-content:center;margin:8px 0}
.rw{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:14px;background:#fff6dc;font-family:var(--f-head);font-weight:700;font-size:18px}
.rw img{width:28px;height:28px}
.list{display:flex;flex-direction:column;gap:10px}
.mcard{position:relative;display:flex;align-items:center;gap:var(--sp-3);padding:14px 22px;min-height:76px;border:0 solid transparent;border-image:url(../img/ui_mission.webp) 48 56 fill / 16px 19px stretch}
.mcard .info{flex:1;min-width:0}
.mcard .nm{font-weight:700;font-size:15px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mcard .btn{flex:none}
.mcard .rwd{font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.mcard .rwd img{width:16px;height:16px}
.pbar{height:10px;border-radius:6px;background:#eee6ff;overflow:hidden;margin:4px 0}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,#9be7c4,#9cc9ff)}
.mcard.done{filter:saturate(.6)}
.shop{position:absolute;inset:0;z-index:45;display:flex;flex-direction:column;background:url(../img/bg_shop.webp) center/cover;animation:fadeIn .2s}
.shop-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:8px 14px 24px}
.sitem{position:relative;aspect-ratio:320/440;background:url(../img/ui_card.webp?v=320x440) center/contain no-repeat;text-align:center}
.sitem img.ic{position:absolute;left:30%;top:5%;width:40%;aspect-ratio:1;object-fit:contain}
.sitem .nm{position:absolute;left:10%;right:10%;top:44%;height:1.3em;font-weight:700;font-size:clamp(14px,4vw,17px);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitem .ds{position:absolute;left:11%;right:11%;top:55%;font-size:var(--fs-cap);color:var(--ink2);line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sitem .own{position:absolute;top:24%;right:7%;font-size:11px;background:#efe7ff;border-radius:var(--r-1);padding:0 6px;white-space:nowrap}
.sitem .pr{position:absolute;left:11%;right:11%;bottom:5.5%;height:12%;display:flex;align-items:center;justify-content:center;gap:4px;font-weight:800;font-size:clamp(14px,4vw,17px);color:#fff;text-shadow:0 1px 2px rgba(70,40,150,.55);border-radius:999px;white-space:nowrap;overflow:hidden}
.sitem .pr img{width:20px;height:20px;flex:none}
.sitem .pr:active{transform:scale(.95)}
.sitem .pr.disabled{opacity:.55}
.sitem .x3{position:absolute;left:8%;right:8%;bottom:19%;font-size:11px;color:#7d5ce0;text-decoration:underline;cursor:pointer;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-head{display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) 12px 8px}
.shop-head h2{flex:1;margin:0;text-align:center;font-family:var(--f-head);font-size:26px;color:#fff;text-shadow:0 2px 0 #9d7fe0,0 4px 12px rgba(80,40,160,.4)}
.daily-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dday{position:relative;border-radius:14px;background:#f3eeff;padding:6px 4px;text-align:center;font-size:11px;border:2px solid transparent}
.dday img{width:40px;height:40px;object-fit:contain}
.dday b{display:block;font-family:var(--f-head);font-size:14px}
.dday.today{border-color:#ffc94d;background:#fff6d9;animation:pulse 1.4s infinite}
.dday.got{opacity:.55}
.dday.got::after{content:"✓";position:absolute;top:2px;right:6px;color:var(--ok);font-weight:900}
.dday.big{grid-column:span 2}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:10px 4px;border-bottom:1px dashed #e6dcff;font-size:15px}
.tog{width:54px;height:30px;border-radius:16px;background:#ddd3f3;position:relative;transition:.2s}
.tog::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.2s}
.tog.on{background:#7ed9a8}
.tog.on::after{left:27px}
.ach{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.achi{text-align:center;font-size:11.5px}
.achi .b{position:relative;width:80px;height:80px;margin:0 auto}
.achi .b img{width:100%;height:100%}
.achi .b span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px}
.achi.lock{filter:grayscale(1);opacity:.55}
.lb-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#f7f2ff;font-size:14px}
.lb-row .rk{width:24px;text-align:center;font-family:var(--f-head);font-weight:700}
.lb-row img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#fff}
.lb-row.me{background:#fff3cf}
.tabs{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
.tab{padding:6px 14px;border-radius:12px;background:#efe8ff;font-size:14px}
.tab.on{background:#7a5cff;color:#fff}
#toasts{position:absolute;left:0;right:0;top:max(70px,env(safe-area-inset-top));z-index:90;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{padding:10px 16px;border-radius:14px;background:rgba(75,58,120,.94);color:#fff;font-size:14px;max-width:90%;text-align:center;animation:pop .25s;box-shadow:var(--shadow)}
.toast.ok{background:rgba(46,160,110,.95)}
.toast.bad{background:rgba(230,80,120,.95)}
.celebrate{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.conf{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px}
.tut{position:absolute;inset:0;z-index:35;pointer-events:none}
.tut .hand{position:absolute;width:40px;height:40px;font-size:34px;animation:tutmove 1.4s ease-in-out infinite}
@keyframes tutmove{0%,20%{transform:translate(0,0)}60%,100%{transform:translate(var(--dx),var(--dy))}}
.reduced *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

/* ---------- Visual Upgrade: text safety & layout rules ---------- */
.mbox{max-height:min(88%,760px);overflow-y:auto;overscroll-behavior:contain}
.mbox h2{font-size:var(--fs-title);line-height:1.15;overflow-wrap:anywhere;padding:0 40px}
.mbox .sub{font-size:var(--fs-body);line-height:1.45;overflow-wrap:anywhere}
.objcard{width:96px;min-width:0}
.objcard span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;font-size:var(--fs-cap);overflow-wrap:anywhere}
.objcard b{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.obj{min-width:40px;flex:0 1 52px}
.obj span{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:14px}
.obj img{width:34px;height:34px}
.mcard .info{flex:1;min-width:0}
.mcard .rwd{line-height:1.35}
.toast{overflow-wrap:anywhere;line-height:1.35}
.nav-b span{max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row .grow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row b{flex:none;font-variant-numeric:tabular-nums}
.rw{white-space:nowrap}
.rewards{flex-wrap:wrap}
.dday span{display:block;white-space:nowrap;font-size:11px}
.achi b{display:block;line-height:1.2;overflow-wrap:anywhere}
.achi .muted{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.set-row span{flex:1;min-width:0;padding-right:var(--sp-2)}
.set-row b{max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-full .ttl{font-size:clamp(26px,8vw,34px);text-align:center;overflow-wrap:anywhere;max-width:100%}
.buddy .say{overflow-wrap:anywhere}
.intro-card h2,.intro-card p{overflow-wrap:anywhere}
.g-lv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 var(--sp-4)}
.mbtns{flex-wrap:wrap}
.mbtns .btn{flex:0 1 auto}
.shop-head h2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-title)}
.shop-grid{gap:var(--sp-3)}
@media (max-width:340px){.shop-grid{gap:var(--sp-2);padding-inline:var(--sp-2)}.btn{min-width:110px}.g-moves{width:66px;height:66px}.g-obj{height:66px}}
@media (min-width:768px){#app{max-height:932px}}


/* =================== v1.2 Upgrade Spec =================== */
/* --- map: mỗi thế giới một bản đồ riêng (2 tile asset), node theo tọa độ chuẩn hóa --- */
.map-world{background:linear-gradient(#e9f0ff,#dbe8ff 120px,#cfe9d4)}
.map-world .map-bg{position:absolute;left:0;right:0;bottom:auto;-webkit-mask-image:none;mask-image:none}
.map-world .map-bg img{width:100%;height:100%;aspect-ratio:auto;object-fit:fill}
.map-cap{position:absolute;left:0;right:0;z-index:2;display:flex;justify-content:center;pointer-events:none}
.map-cap.top{top:0;align-items:flex-end;background:linear-gradient(#fff 0,rgba(255,255,255,.92) 45%,rgba(255,255,255,0));padding-bottom:22px}
.map-cap.bot{bottom:0;align-items:flex-start;padding-top:6px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.85) 60%)}
.map-cap .btn,.map-cap .cap-lock{pointer-events:auto}
.cap-in{display:flex;justify-content:center;padding:0 16px;margin-top:64px}
.cap-lock{display:inline-block;max-width:100%;padding:6px 14px;border-radius:14px;background:rgba(75,58,120,.82);color:#fff;font-size:13px;line-height:1.35;text-align:center}
.map-world .node{width:var(--ns);height:var(--ns);margin:calc(var(--ns) / -2) 0 0 calc(var(--ns) / -2)}
.map-world .node .n{font-size:calc(var(--ns) * .34);margin-top:calc(var(--ns) * -.06)}
.map-world .node .stars{bottom:calc(var(--ns) * -.2)}
.map-world .node .stars img{width:calc(var(--ns) * .3);height:calc(var(--ns) * .3)}
.map-world .node .lk{position:relative;font-size:calc(var(--ns) * .3);filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.map-world .node.lock{filter:saturate(.55) brightness(.95);cursor:not-allowed}
.map-world .node.cur .me{width:36px;height:36px;top:-40px}
.world-btn{position:absolute;left:50%;top:calc(max(10px,env(safe-area-inset-top)) + 54px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:calc(100% - 32px);padding:4px 14px 4px 12px;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);white-space:nowrap;z-index:6}
.world-btn small{font-size:11px;color:var(--ink2);font-weight:800}
.world-btn b{font-size:16px;overflow:hidden;text-overflow:ellipsis}
.world-btn i{font-style:normal;color:#7a5cff}
.worlds{display:flex;flex-direction:column;gap:10px}
.wcard{display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;background:#f5efff;text-align:left;border:2px solid transparent}
.wcard.on{border-color:#b49cff;background:#fff}
.wcard img{width:64px;height:64px;flex:none;border-radius:12px;object-fit:cover;object-position:center 70%}
.wcard .wi{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.wcard .wi small{font-size:11px;color:var(--ink2);font-weight:800}
.wcard .wi b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcard .wi span{font-size:12.5px;color:var(--ink2);overflow-wrap:anywhere}
.wcard i{flex:none;font-style:normal;font-weight:800;font-size:13px;padding:6px 12px;border-radius:12px;background:#7ed9a8;color:#fff}
.wcard i.lk{background:#ddd3f3}
.wcard.lock{opacity:.7}.wcard.lock img{filter:grayscale(.8)}
.wtrans{position:absolute;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center 70%;animation:fadeIn .35s}
.wtrans::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.2),rgba(60,40,120,.55))}
.wtrans.out{transition:opacity .45s;opacity:0}
.wt-in{position:relative;text-align:center;color:#fff;animation:pop .6s ease-out;text-shadow:0 3px 0 #9d7fe0,0 6px 18px rgba(60,30,140,.5);padding:0 16px}
.wt-in small{display:block;font-size:16px;font-weight:700}
.wt-in b{display:block;font-family:var(--f-head);font-size:clamp(34px,10vw,46px);line-height:1.1}
.wt-in span{display:block;font-family:var(--f-head);font-size:clamp(20px,6vw,26px);overflow-wrap:anywhere}

/* --- HUD: nút thông tin mục tiêu + popup --- */
.info-b{width:40px;height:40px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff,#e8ddff);border:3px solid #fff;box-shadow:0 3px 6px rgba(80,50,150,.3);font:800 22px/34px Georgia,serif;font-style:italic;color:#7a5cff;text-align:center}
.info-b:active{transform:scale(.9)}
.ih{margin:14px 0 6px;font-family:var(--f-head);font-size:16px;text-align:center}
.ilist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ilist li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#f7f2ff;font-size:13px;line-height:1.35}
.ilist img{width:34px;height:34px;flex:none;object-fit:contain}
.ilist .ilead{width:34px;flex:none;text-align:center;font-size:22px}
.objcard.ok{background:#e4f8ee}
.star-rule{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:4px 0}
.star-rule .sr{display:flex;flex-direction:column;align-items:center;padding:6px 8px;border-radius:12px;background:#fff7dc;min-width:84px}
.star-rule .sr.got{background:#e4f8ee}
.star-rule .sr span{display:flex}.star-rule .sr img{width:20px;height:20px}
.star-rule .sr b{font-size:13px;font-variant-numeric:tabular-nums}
.sr-note{font-size:12px;text-align:center;line-height:1.35;margin-bottom:4px}

/* --- vật phẩm đặc biệt: quầng màu thay cho icon viên gốc chồng lên --- */
.tile .tint{display:none!important}
.tile.sp-rh img,.tile.sp-rv img,.tile.sp-bomb img,.tile.sp-square img{filter:drop-shadow(0 0 3px var(--sc,#fff)) drop-shadow(0 2px 2px rgba(60,40,120,.25))}
.tile.press img{transform:scale(.86);transition:transform .08s}

/* --- cửa hàng: nền tối + blur, thẻ theo vùng an toàn của ui_card (320×440) --- */
.shop::before{content:"";position:absolute;inset:0;background:rgba(28,16,64,.58);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:0}
.shop>*{position:relative;z-index:1}
.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
.sitem{container-type:inline-size;aspect-ratio:320/440;background:url(../img/ui_card.webp?v=320x440) center/100% 100% no-repeat;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.sitem img.ic{left:50%;top:21.5%;width:30%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:contain}
.sitem .own{top:3%;right:4%;left:auto;font-size:max(10px,6cqw);font-weight:800;background:#7a5cff;color:#fff;border-radius:10px;padding:1px 7px}
.sitem .sbody{position:absolute;left:13%;right:13%;top:43%;bottom:19%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2%;overflow:hidden}
.sitem .nm,.sitem .ds{position:static;left:auto;right:auto;top:auto;height:auto}
.sitem .nm{font-weight:800;font-size:clamp(12px,8.4cqw,17px);line-height:1.15;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;max-width:100%}
.sitem .ds{font-size:clamp(9.5px,5.7cqw,12px);line-height:1.25;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.sitem .pr0{margin-top:auto;display:flex;align-items:center;gap:3px;font-size:clamp(10px,6cqw,13px);color:var(--ink2);white-space:nowrap}
.sitem .pr0 img{width:1.3em;height:1.3em}.sitem .pr0 b{color:var(--ink);font-size:1.15em}
.sitem .sbtns{position:absolute;left:10.5%;right:10.5%;top:82.2%;height:13.2%;display:flex;gap:4%}
.sitem .sb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;border-radius:999px;font-weight:800;font-size:clamp(10px,6cqw,13px);color:#fff;background:linear-gradient(#9b7bff,#7a5cff);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(60,30,140,.5);overflow:hidden;white-space:nowrap}
.sitem .sb.b3{background:linear-gradient(#ffd56a,#f5a524);color:#6b3d00;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.sitem .sb i{font-style:normal;font-size:.85em;color:#d4145a;text-shadow:none}
.sitem .sb em{font-style:normal;display:flex;align-items:center;gap:2px}
.sitem .sb em img{width:1.1em;height:1.1em}
.sitem .sb:active{transform:scale(.95)}
.sitem .sb.dis{filter:grayscale(.7);opacity:.6}
.sitem .x3,.sitem .pr{display:none}

/* =================== v1.3 =================== */
/* chỗ nối 2 tile nền: blur + sương mờ hòa vào nhau */
.map-seam{position:absolute;left:0;right:0;z-index:0;pointer-events:none;-webkit-backdrop-filter:blur(9px) saturate(1.05);backdrop-filter:blur(9px) saturate(1.05);-webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);background:radial-gradient(120% 60% at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,.25) 55%,rgba(255,255,255,0) 80%)}
.map-seam::before,.map-seam::after{content:"";position:absolute;width:70%;height:60%;top:20%;border-radius:50%;background:radial-gradient(rgba(255,255,255,.75),rgba(255,255,255,0) 70%)}
.map-seam::before{left:-15%}.map-seam::after{right:-15%}
.map-world .map-layer{z-index:1}
/* frame vật phẩm giữ đúng tỷ lệ 320×440, không kéo giãn */
.shop-grid{align-items:start}
.sitem{align-self:start;width:100%;height:auto;aspect-ratio:320/440;background-size:contain!important;background-position:center top!important}
.sitem{min-height:0;overflow:hidden}
.sitem{background-image:url(../img/ui_card.webp?v=320x440)!important;background-position:center!important}

/* ===== v1.3 ===== */
/* cửa hàng: mỗi hàng cao đúng bằng thẻ → không đè lên nhau, bấm Mua được */
.shop-grid{grid-auto-rows:max-content;flex:1 1 0;min-height:0}
.shop-grid>.sitem{overflow:visible;min-height:auto;height:auto}
/* xu VuiSpace */
.pill.wpill{padding:0 8px 0 4px;gap:3px;font-size:15px}
.wico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#7C5CFF,#FF6FB5);font-style:normal;font-size:15px;line-height:1;flex:none}
.wico.big{width:54px;height:54px;font-size:30px}
.pill.wpill .plus{background:#9b7bff;font-size:12px}
.shop-head .wpill{font-size:13px;flex:none}
@media (max-width:380px){.topbar{gap:4px;padding-left:6px;padding-right:6px}.topbar .avatar{width:40px;height:40px}.topbar .avatar img.f{width:40px;height:40px}.topbar .avatar img.a{inset:6px;width:28px;height:28px}.topbar .pill{font-size:14px;height:30px;padding-right:7px}.topbar .pill img{width:24px;height:24px}.topbar .pill .plus{width:16px;height:16px;line-height:16px;font-size:11px}.topbar .wico{width:22px;height:22px;font-size:13px}.shop-head .wpill span:last-child{display:none}}
@media (max-width:330px){.topbar #lifeT{display:none}}
.cv-rate{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 10px}
.cv-side{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;flex:1;text-align:center}
.cv-side img{width:54px;height:54px;object-fit:contain}
.cv-side b{font-size:12.5px}
.cv-side span{font-family:var(--f-head);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.cv-arrow{font-size:22px;color:#7a5cff;flex:none}
.cv-in input{width:100%;box-sizing:border-box;height:46px;border-radius:14px;border:2px solid #d9ccff;padding:0 14px;font-size:20px;font-weight:800;text-align:center;font-family:var(--f-head);background:#fff;color:var(--ink)}
.cv-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.cv-chips .chip{padding:5px 11px;border-radius:12px;background:#efe8ff;font-weight:800;font-size:13px;color:#5a3fd6}
.cv-warn{font-size:12px;line-height:1.4;background:#fff4e0;color:#8a4b00;border-radius:12px;padding:8px 10px;margin:8px 0}
#cvGo.off{opacity:.5;pointer-events:none}
/* Thế Giới Tuần */
.wk-btn{position:absolute;left:10px;top:calc(max(10px,env(safe-area-inset-top)) + 104px);z-index:6;display:flex;flex-direction:column;align-items:center;width:66px;padding:6px 2px 5px;border-radius:18px;background:linear-gradient(160deg,#ffd56a,#ff7ab6 55%,#7a5cff);color:#fff;box-shadow:0 6px 16px rgba(122,92,255,.45);animation:wkBlink 1.2s ease-in-out infinite}
.wk-btn .wk-ic{font-size:26px;line-height:1.1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.wk-btn b{font-family:var(--f-head);font-size:12.5px;line-height:1.1;text-shadow:0 1px 2px rgba(80,30,120,.6);white-space:nowrap}
.wk-btn small{font-size:10px;font-weight:800;background:rgba(40,10,80,.35);border-radius:8px;padding:0 5px;margin-top:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
@keyframes wkBlink{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.18) drop-shadow(0 0 10px rgba(255,213,106,.95))}}
@media (prefers-reduced-motion:reduce){.wk-btn,.wk-n.cur{animation:none}}
.shop.wk .wk-info{padding:0 12px}
.wk-card{background:rgba(255,255,255,.96);border-radius:18px;padding:10px 12px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.wk-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;font-size:13px}
.wk-row b{font-variant-numeric:tabular-nums}
.wk-note{font-size:11.5px;line-height:1.4;color:var(--ink2);margin:6px 0}
.wk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:center}
.wk-stats>div{background:#f4eeff;border-radius:12px;padding:5px 2px;min-width:0}
.wk-stats b{display:block;font-family:var(--f-head);font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-stats small{font-size:10.5px;color:var(--ink2)}
.wk-tabs{margin:10px 0 6px}
.wk-tabs .tab{background:rgba(255,255,255,.88);font-weight:800}
.wk-tabs .tab.on{background:#7a5cff;color:#fff}
.wk-body{flex:1 1 0;min-height:0;overflow-y:auto;padding:4px 12px 24px;position:relative}
.wk-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding-top:6px}
.wk-n{position:relative;aspect-ratio:1;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 3px 8px rgba(0,0,0,.2);min-width:0;padding:0}
.wk-n b{font-family:var(--f-head);font-size:clamp(15px,5vw,20px);line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.35);margin-bottom:6px}
.wk-n.t0,.wk-legend .t0{background:linear-gradient(#7fe0a6,#3fbf7a)}
.wk-n.t1,.wk-legend .t1{background:linear-gradient(#7cc8ff,#3d8ef0)}
.wk-n.t2,.wk-legend .t2{background:linear-gradient(#ffcf6a,#f59e24)}
.wk-n.t3,.wk-legend .t3{background:linear-gradient(#ff8a8a,#e8475f)}
.wk-n.t4,.wk-legend .t4{background:linear-gradient(#c49bff,#7a3fe0)}
.wk-n.lock{filter:grayscale(.7) brightness(.8)}
.wk-n i{font-style:normal;font-size:11px;position:absolute;bottom:4px}
.wk-n .st{font-size:10px;letter-spacing:-1px;color:#ffe58a;position:absolute;bottom:4px;text-shadow:0 1px 1px rgba(0,0,0,.45);white-space:nowrap}
.wk-n .go{font-size:9px;font-weight:900;position:absolute;bottom:4px;background:#fff;color:#7a5cff;border-radius:6px;padding:0 4px}
.wk-n.cur{outline:3px solid #fff;animation:wkBlink 1.2s ease-in-out infinite;z-index:1}
.wk-n.boss::after{content:"👑";position:absolute;top:-8px;right:-4px;font-size:14px}
.wk-legend{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:12px}
.wk-legend span{font-size:11px;font-weight:800;color:#fff;border-radius:8px;padding:1px 8px}
.wk-body .list{display:flex;flex-direction:column;gap:6px}
.wk-body .lb-row{background:rgba(255,255,255,.95)}
.wk-body .lb-row.me{background:#fff3cf}
.wk-body .lb-row small{font-size:11px}
.wk-body>.sub{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);text-align:center;margin-top:10px}