:root{
  --pink:#ff74d6;--vio:#a66bff;--blue:#5c78ff;--ink:#24093f;--g1:#ffe066;--g2:#ffb21e;--g3:#c96a0c;
  --sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);
  --b:max(44px,3.3rem);      
  --ab:max(52px,4.2rem);     
  --hp:max(60px,4.8rem);     
  --tb:max(52px,4.2rem);     
  --nd:max(48px,3.8rem);     
  --out:0 .09rem 0 var(--ink),.07rem 0 0 var(--ink),-.07rem 0 0 var(--ink),0 -.07rem 0 var(--ink);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:clamp(13px,0.55vw + 1.9vh,22px)}
html,body{margin:0;height:100%;overflow:hidden;background:#1d2b1a}
body{font-family:"Leelawadee UI","Noto Sans Thai",Tahoma,system-ui,sans-serif;color:var(--ink);line-height:1.3;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
[hidden]{display:none!important}
button,select,a{font-family:inherit}
button{appearance:none;-webkit-appearance:none;margin:0;color:inherit}
#unity-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
#saProbe{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;
  padding:var(--sat) var(--sar) var(--sab) var(--sal)}


.scr{position:fixed;inset:0;display:none}
.scr.on{display:flex}
.bg{background:
  radial-gradient(60% 46% at 12% 112%,#8ee4a1 0 60%,rgba(142,228,161,0) 61%),
  radial-gradient(70% 50% at 88% 118%,#74d893 0 60%,rgba(116,216,147,0) 61%),
  radial-gradient(11rem 3.2rem at 78% 17%,rgba(255,255,255,.8) 0 60%,rgba(255,255,255,0) 62%),
  radial-gradient(8rem 2.4rem at 24% 30%,rgba(255,255,255,.6) 0 60%,rgba(255,255,255,0) 62%),
  radial-gradient(6rem 1.8rem at 52% 9%,rgba(255,255,255,.55) 0 60%,rgba(255,255,255,0) 62%),
  linear-gradient(#77c4ff 0%,#b3a4ff 52%,#ffb5e8 100%)}


.pic{display:inline-flex;align-items:center;justify-content:center;background:center/contain no-repeat;line-height:1;flex:0 0 auto}
.pic i{font-style:normal}
.pic.has i{visibility:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.5rem 1.1rem;border:.19rem solid var(--ink);border-radius:1.15rem;
  font-weight:900;font-size:1.1rem;line-height:1.15;color:#fff;text-shadow:var(--out);text-decoration:none;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,var(--pink) 0%,var(--vio) 55%,var(--blue) 100%);box-shadow:0 .28rem 0 var(--ink)}
.btn:active{transform:translateY(.18rem);box-shadow:0 .1rem 0 var(--ink)}
.btn.gold{color:var(--ink);text-shadow:none;background:linear-gradient(180deg,var(--g1),var(--g2))}
.btn.alt{color:var(--ink);text-shadow:none;background:#fff}
.btn small{font-size:.8em;font-weight:900;background:var(--ink);color:var(--g1);border-radius:999px;padding:.05rem .5rem;text-shadow:none}
.btn[disabled]{opacity:.5;cursor:default}
.rb{width:var(--b);height:var(--b);flex:0 0 auto;padding:0;border:.17rem solid var(--ink);border-radius:50%;background:#fff;cursor:pointer;
  font-weight:900;font-size:1.25rem;line-height:1;box-shadow:0 .22rem 0 rgba(36,9,63,.6)}
.rb:active{transform:translateY(.14rem);box-shadow:0 .08rem 0 rgba(36,9,63,.6)}
.rb.on{background:linear-gradient(180deg,var(--g1),var(--g2))}
.pill{min-height:44px;padding:.3rem .95rem;border:.17rem solid var(--ink);border-radius:999px;cursor:pointer;font-weight:900;font-size:1.15rem;white-space:nowrap;
  background:linear-gradient(180deg,var(--g1),var(--g2));box-shadow:0 .22rem 0 rgba(36,9,63,.6)}
.pill:active{transform:translateY(.14rem);box-shadow:0 .08rem 0 rgba(36,9,63,.6)}
.logo{display:block;height:auto;max-width:100%;pointer-events:none}
.logoTx{font-weight:900;letter-spacing:.2em;color:#fff;text-shadow:var(--out)}


#sLoad{z-index:12;align-items:center;justify-content:center;padding:1rem}
.loadBox{display:flex;flex-direction:column;align-items:center;width:min(30rem,92%)}
.loadBox .logo{width:min(26rem,80%,88vh)}
.gname{margin:-.4rem 0 .9rem;font-size:1.9rem;font-weight:900;text-align:center;color:#fff;text-shadow:var(--out),0 .3rem .5rem rgba(36,9,63,.35)}
.bar{width:100%;height:1.25rem;border:.19rem solid var(--ink);border-radius:999px;background:#fff;overflow:hidden;box-shadow:0 .22rem 0 rgba(36,9,63,.5)}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--vio),var(--blue));transition:width .25s}
.loadTx{margin:.55rem 0 0;font-weight:800;font-size:1.05rem;text-align:center}
.loadTx.err{background:#fff;border:.15rem solid var(--ink);border-radius:.9rem;padding:.4rem .8rem}



#sHome{z-index:10;gap:.9rem;align-items:center;
  padding:calc(.55rem + var(--sat)) calc(.7rem + var(--sar)) calc(.6rem + var(--sab)) calc(.7rem + var(--sal))}
.heroBox{flex:0 0 13.5rem;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;padding:.55rem .6rem .7rem;cursor:pointer;text-align:center;
  border:.19rem solid var(--ink);border-radius:1.5rem;background:linear-gradient(180deg,#fff 0%,#fff 55%,#f1e8ff 100%);box-shadow:0 .3rem 0 rgba(36,9,63,.6)}
.heroBox:active{transform:translateY(.16rem);box-shadow:0 .1rem 0 rgba(36,9,63,.6)}
.heroBox .cap{font-size:.85rem;font-weight:800;opacity:.65}
.heroBox .pic{width:min(8.6rem,36vh);height:min(8.6rem,36vh);font-size:min(5.2rem,22vh);border-radius:50%;border:.17rem solid var(--ink);
  background-color:#e9dcff;background-image:radial-gradient(circle at 50% 35%,#fff 0%,#e9dcff 70%)}
.heroBox b{font-size:1.2rem;line-height:1.2;margin-top:.15rem}
.heroBox .sk{font-size:.9rem;font-weight:700;line-height:1.25;opacity:.85}
.heroBox .chg{margin-top:.3rem;font-size:.92rem;font-weight:900;color:#fff;text-shadow:var(--out);border:.15rem solid var(--ink);border-radius:999px;padding:.14rem .85rem;
  background:linear-gradient(180deg,var(--pink),var(--vio) 55%,var(--blue));box-shadow:0 .16rem 0 var(--ink)}
.playBox{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem}
.playBox .logo{height:min(7rem,19vh);width:auto;margin:-.5rem 0 -.75rem}
.row3{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.ab.sup{background:linear-gradient(180deg,#e8f6ff,#9fd8ff)}
.slist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:.6rem 0}
.scell{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border:.17rem solid var(--ink);border-radius:1rem;background:#fff;cursor:pointer;text-align:left;font:inherit}
.scell.on{background:linear-gradient(180deg,#fff8d8,#ffe08a)}
.scell.lk{filter:grayscale(1);opacity:.6}
.scell .se{font-size:2rem;line-height:1}
.scell b{display:block;font-size:1.05rem}
.scell small{display:block;font-size:.82rem;font-weight:700;opacity:.75;line-height:1.25}
.shop .sec{margin:.5rem 0 .2rem;font-weight:900}
.shop .note{font-size:.85rem;font-weight:700;opacity:.75}
.shop .soon{display:inline-block;margin-left:.4rem;padding:.05rem .5rem;border-radius:999px;background:#ffd84a;border:.12rem solid var(--ink);font-size:.75rem;font-weight:900}
.shop .items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.shop .item{padding:.45rem;border:.17rem solid var(--ink);border-radius:1rem;background:#fff;text-align:center;font-weight:800;opacity:.85}
.shop .item .ie{font-size:1.8rem}
.shop .item small{display:block;font-size:.78rem;opacity:.75}
.playBox h1{margin:0;font-size:1.45rem;font-weight:900;line-height:1.15;text-align:center;color:#fff;text-shadow:var(--out),0 .25rem .4rem rgba(36,9,63,.3)}
.side{flex:0 0 auto;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:.5rem}
.side .tr{display:flex;align-items:center;gap:.45rem}
.online{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;min-height:44px;max-width:14rem;padding:.4rem .8rem;text-align:center;text-decoration:none;color:var(--ink);
  border:.19rem solid var(--ink);border-radius:1.15rem;background:#fff;box-shadow:0 .28rem 0 var(--ink)}
.online:active{transform:translateY(.18rem);box-shadow:0 .1rem 0 var(--ink)}
.online b{font-size:1.02rem;font-weight:900;white-space:nowrap}
.online span{font-size:.8rem;font-weight:800;line-height:1.2;color:#7a3fe0}
.stageRow{display:flex;align-items:flex-start;gap:.15rem;max-width:100%;overflow-x:auto;padding:.5rem .5rem .1rem;scrollbar-width:none}
.stageRow::-webkit-scrollbar{display:none}
.node{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:0;border:0;background:none;cursor:pointer}
.node .dot{width:var(--nd);height:var(--nd);display:flex;align-items:center;justify-content:center;border:.19rem solid var(--ink);border-radius:50%;
  font-weight:900;font-size:1.5rem;background:linear-gradient(180deg,#fff,#e6dcff);box-shadow:0 .25rem 0 var(--ink)}
.node.next .dot{background:linear-gradient(180deg,var(--g1),var(--g2))}
.node.sel .dot{box-shadow:0 .25rem 0 var(--ink),0 0 0 .2rem #fff,0 0 0 .38rem var(--pink)}
.node:nth-child(4n+1){margin-top:.5rem}
.node:nth-child(4n+3){margin-top:0}
.node .ns{font-size:.95rem;letter-spacing:.04em;line-height:1;color:rgba(36,9,63,.28);font-weight:900}
.node .ns b{color:#ffb21e;text-shadow:var(--out)}
.path{flex:0 0 1.5rem;height:.36rem;margin-top:calc(var(--nd)/2 + .15rem);border-radius:.2rem;opacity:.6;
  background:repeating-linear-gradient(90deg,var(--ink) 0 .36rem,rgba(36,9,63,0) .36rem .72rem)}
.soon{flex:0 0 auto;align-self:center;max-width:15rem;padding:.45rem .8rem;border:.15rem dashed var(--ink);border-radius:1rem;background:rgba(255,255,255,.8);font-weight:800;font-size:.95rem;text-align:center;line-height:1.3}
.play{min-width:15rem;font-size:1.8rem;padding:.55rem 2rem;border-radius:1.5rem;box-shadow:0 .4rem 0 var(--ink)}
.play:active{transform:translateY(.28rem);box-shadow:0 .12rem 0 var(--ink)}


#sBattle{z-index:5;pointer-events:none}
#sBattle button{pointer-events:auto}

#lens{position:absolute;inset:0;pointer-events:none}
#lens::before{content:"";position:absolute;left:0;right:0;top:0;height:26%;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(#000 15%,transparent);mask-image:linear-gradient(#000 15%,transparent)}
#lens::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 78% 74% at 50% 55%,rgba(0,0,0,0) 62%,rgba(30,14,56,.2) 100%)}
#topbar{position:absolute;left:calc(.5rem + var(--sal));right:calc(.5rem + var(--sar));top:calc(.45rem + var(--sat));display:flex;align-items:flex-start;gap:.5rem}
.stats{display:flex;align-items:center;gap:.8rem;min-height:var(--b);padding:.15rem .9rem;border:.17rem solid var(--ink);border-radius:999px;
  background:rgba(255,255,255,.95);box-shadow:0 .22rem 0 rgba(36,9,63,.6);font-weight:900;font-size:1.2rem;white-space:nowrap}
.stats span{display:inline-flex;align-items:center;gap:.28rem}
.stats i{font-style:normal}
.stats .hit{animation:hit .5s}
.stats.night{background:linear-gradient(#2c2f6e,#1b1d4a);color:#eef1ff;transition:background .8s}
.tb.town .price{background:#7a4e1e}
.mid{flex:1 1 0;min-width:0;display:flex;justify-content:center}
.nextBtn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--b);max-width:100%;padding:.15rem 1rem;cursor:pointer;
  border:.17rem solid var(--ink);border-radius:1.1rem;background:linear-gradient(180deg,var(--g1),var(--g2));box-shadow:0 .22rem 0 rgba(36,9,63,.6);font-weight:900;line-height:1.15}
.nextBtn:active{transform:translateY(.14rem);box-shadow:0 .08rem 0 rgba(36,9,63,.6)}
.nextBtn .nl{font-size:.92rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextBtn .ni{display:flex;gap:.8rem;font-size:1.05rem;white-space:nowrap}
.nextBtn.first{animation:bob 1s ease-in-out infinite}
#bQuest{position:relative}#bQuest .qdot{position:absolute;right:-.1rem;top:-.1rem;width:.7rem;height:.7rem;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 .14rem #fff}#bQuest .qdot[hidden]{display:none}
.nextBtn .nxPv{display:flex;flex-wrap:wrap;justify-content:center;margin-top:.1rem;max-width:22rem}
.nextBtn .nxPv[hidden]{display:none}
.nextBtn.first .nl{font-size:1.15rem}
.nextBtn.busy{opacity:.55}
.tools{display:flex;gap:.45rem;flex:0 0 auto}
.bl,.br{position:absolute;bottom:calc(.55rem + var(--sab));display:flex;align-items:flex-end;gap:.5rem}
.bl{left:calc(.55rem + var(--sal))}
.br{right:calc(.55rem + var(--sar))}
.hpb{position:relative;width:var(--hp);height:var(--hp);padding:.3rem;border:.17rem solid var(--ink);border-radius:50%;cursor:pointer;
  background:conic-gradient(var(--hc,#33d16a) calc(var(--v,1)*1turn),#4a2740 0);box-shadow:0 .22rem 0 rgba(36,9,63,.6)}
.hpb .pic{width:100%;height:100%;border-radius:50%;background-color:#efe6ff;border:.12rem solid var(--ink);font-size:calc(var(--hp)*.42)}
.hpb.low{--hc:#ff5a5a}
.hpb.mid2{--hc:#ffc12e}
.hpb.dead .pic{filter:grayscale(1) brightness(.55)}
.hpb.act{box-shadow:0 .22rem 0 rgba(36,9,63,.6),0 0 0 .22rem var(--g1)}
.hpb b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--hp)*.4);font-weight:900;color:#fff;text-shadow:var(--out)}
.ab{position:relative;width:var(--ab);height:var(--ab);padding:0;overflow:hidden;border:.17rem solid var(--ink);border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,var(--pink),var(--vio) 55%,var(--blue));box-shadow:0 .22rem 0 rgba(36,9,63,.6)}
.ab:active,.hpb:active{transform:translateY(.14rem)}
.ab .pic{position:absolute;inset:9%;font-size:calc(var(--ab)*.46)}
.ab .cd{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(rgba(24,8,44,.8) calc(var(--p,0)*1turn),rgba(24,8,44,0) 0)}
.ab.rdy{animation:glow 1.2s ease-in-out 2}
.ab.act{box-shadow:0 .22rem 0 rgba(36,9,63,.6),0 0 0 .22rem var(--g1)}
.ab.off{filter:grayscale(.9) brightness(.8)}
.hint,.tip{position:absolute;left:50%;bottom:calc(.6rem + var(--sab));transform:translateX(-50%);display:flex;align-items:center;gap:.6rem;
  max-width:min(60vw,32rem);border:.14rem solid #fff;border-radius:1.4rem;background:rgba(36,9,63,.9);color:#fff;font-weight:800;font-size:1rem;line-height:1.3}
.hint{padding:.3rem .35rem .3rem 1rem;pointer-events:auto}   
.hint button{flex:0 0 auto;min-height:44px;padding:.2rem .9rem;border:.14rem solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-weight:900;font-size:1rem;cursor:pointer;white-space:nowrap}
.tip{display:block;padding:.45rem 1rem;text-align:left;pointer-events:none}
.tip b{color:var(--g1);white-space:nowrap}
.tip small{font-size:.9em;font-weight:700;opacity:.9}
#stageLoad{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;pointer-events:auto;font-weight:900;font-size:1.3rem;color:#fff;text-shadow:var(--out)}
#stageLoad p{margin:0}
.spin{width:3.4rem;height:3.4rem;border:.5rem solid rgba(255,255,255,.5);border-top-color:var(--pink);border-radius:50%;animation:spin .9s linear infinite}


#ring{position:fixed;inset:0;z-index:6;pointer-events:none}
.rw{position:absolute;width:0;height:0}
.tb{position:absolute;width:var(--tb);height:var(--tb);margin:calc(var(--tb)/-2) 0 0 calc(var(--tb)/-2);padding:0;border:.17rem solid var(--ink);border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#fff,#eadfff);box-shadow:0 .22rem 0 rgba(36,9,63,.65);animation:popIn .18s cubic-bezier(.3,1.6,.5,1) both}
.tb:active{filter:brightness(.92)}
.tb .pic{position:absolute;inset:2%;font-size:calc(var(--tb)*.5)}
.tb .price{position:absolute;left:50%;bottom:-.62rem;transform:translateX(-50%);padding:.04rem .5rem;border:.1rem solid #fff;border-radius:999px;background:var(--ink);color:var(--g1);font-size:.88rem;font-weight:900;line-height:1.25;white-space:nowrap}
.tb.no{background:#c9c4d6}
.tb.no .pic{filter:grayscale(1);opacity:.6}
.tb.no .price{color:#ff9d9d}
.tb.shake{animation:shake .28s}
.tb.up{background:linear-gradient(180deg,var(--g1),var(--g2))}
.tb.br{background:linear-gradient(180deg,#fff8d8,var(--g1))}
.tb .bn{position:absolute;left:50%;bottom:calc(100% + .22rem);transform:translateX(-50%);width:max-content;max-width:7.6rem;padding:.06rem .45rem;border:.12rem solid var(--ink);border-radius:.6rem;
  background:#fff;color:var(--ink);font-size:.76rem;font-weight:900;line-height:1.15;text-align:center;white-space:normal}
.tb.sell.sure{background:linear-gradient(180deg,#8ff0a9,#35c96a)}
.tb.max{background:#ddd8ea}
.spotMark{position:absolute;width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem;border:.22rem dashed #fff;border-radius:50%;box-shadow:0 0 0 .12rem var(--ink);animation:spin 6s linear infinite}


#veil{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(28,10,52,.62);
  padding:max(.6rem,var(--sat)) max(.8rem,var(--sar)) max(.6rem,var(--sab)) max(.8rem,var(--sal))}
#veil.on{display:flex}
.card{width:min(30rem,100%);max-height:100%;overflow:auto;padding:1rem 1.2rem 1.1rem;text-align:center;background:#fff;border:.19rem solid var(--ink);border-radius:1.5rem;
  box-shadow:0 .45rem 0 rgba(36,9,63,.6),0 1.2rem 3rem rgba(0,0,0,.35);animation:pop .28s cubic-bezier(.3,1.5,.5,1)}
.card{position:relative}
.card.wide{width:min(49rem,100%)}
.card .x{position:absolute;top:.5rem;right:.5rem;width:44px;height:44px;font-size:1.1rem;box-shadow:0 .16rem 0 rgba(36,9,63,.6)}
.card.hasx>h2{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 3rem;margin-top:-.2rem}
.card h2{margin:0 0 .25rem;font-size:1.6rem;line-height:1.2}
.card p{margin:.35rem 0;font-size:1.05rem;line-height:1.45}
.card .sm{font-size:.92rem;opacity:.75}
.btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.btns>*{flex:1 1 9rem}
.stars3{display:flex;justify-content:center;gap:.5rem;margin:.15rem 0 .25rem;font-size:3.1rem;line-height:1.1}
.stars3 i{font-style:normal;filter:grayscale(1);opacity:.25}
.stars3 i.on{filter:none;opacity:1;animation:starPop .5s cubic-bezier(.3,1.7,.5,1) both}
.stars3 i.on:nth-child(2){animation-delay:.3s}
.stars3 i.on:nth-child(3){animation-delay:.6s}
.stars3.still i.on{animation:none}
.note{padding:.5rem .8rem;border-radius:1rem;background:#f3ecff;font-weight:800}
.rowopt{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.3rem .1rem;border-top:.1rem solid #eee7fb;font-weight:800;font-size:1.05rem;text-align:left}
.rowopt:first-of-type{border-top:0}
.btns+.rowopt{margin-top:.6rem;border-top:.1rem solid #eee7fb}
.sw{min-width:5.6rem;min-height:44px;padding:.3rem 1rem;border:.15rem solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font-weight:900;font-size:1rem;cursor:pointer;white-space:nowrap}
.sw.on{background:#2fc46b}
select.sw{appearance:auto;-webkit-appearance:menulist;max-width:13rem;background:#fff;color:var(--ink)}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.7rem}
.links a,.links button{padding:.4rem .9rem;min-height:44px;display:inline-flex;align-items:center;border:.14rem solid #d7cdef;border-radius:999px;color:var(--ink);font-weight:800;font-size:.95rem;text-decoration:none;background:#faf7ff;cursor:pointer}

.hsel{display:flex;gap:.9rem;align-items:stretch;margin-top:.35rem}
.hgrid{flex:1 1 56%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;align-content:center}
.hcell{display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:0;padding:.35rem .2rem .3rem;border:.15rem solid #d7cdef;border-radius:1rem;background:#faf7ff;cursor:pointer}
.hcell .pic{width:min(4.4rem,19vh);height:min(4.4rem,19vh);font-size:min(2.7rem,12vh);border-radius:50%;background-color:#efe6ff;border:.14rem solid var(--ink)}
.hcell>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;font-weight:800;line-height:1.2}
.hcell.on{border-color:#2fc46b;background:#e3f9ea}
.hcell.foc{border-color:var(--ink);background:#fff4c9;box-shadow:0 .2rem 0 var(--ink)}
.hcell.lk .pic{filter:grayscale(1) brightness(.8);opacity:.65}
.hcell.lk>span:last-child{opacity:.6}
.hdet{flex:1 1 44%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;padding:.55rem .7rem;text-align:center;
  border:.17rem solid var(--ink);border-radius:1.2rem;background:linear-gradient(180deg,#fff,#f1e8ff)}
.hdet .pic{width:min(6.2rem,26vh);height:min(6.2rem,26vh);font-size:min(3.9rem,16vh);border-radius:50%;background-color:#e9dcff;border:.15rem solid var(--ink)}
.hdet.lk .pic{filter:grayscale(1) brightness(.85)}
.hdet b{font-size:1.15rem;line-height:1.2}
.hdet .role{padding:.04rem .65rem;border-radius:999px;background:var(--vio);color:#fff;font-size:.8rem;font-weight:900}
.hdet .sn{font-weight:900;color:#7a3fe0;font-size:1rem}
.hdet .sd{font-size:.88rem;font-weight:700;line-height:1.3;opacity:.85}
.hdet .tag{margin-top:.3rem;padding:.22rem .9rem;border:.14rem solid var(--ink);border-radius:999px;background:#fff;font-weight:900;font-size:.9rem}
.hdet .tag.on{background:#2fc46b;color:#fff}

.newh{display:flex;align-items:center;gap:.7rem;width:100%;min-height:44px;margin:.35rem 0 .1rem;padding:.3rem .8rem;border:.15rem solid var(--ink);border-radius:1rem;background:#fff6d6;cursor:pointer;text-align:left;font-size:1rem;font-weight:800}
.newh .pic{width:3.2rem;height:3.2rem;font-size:2rem;border-radius:50%;background-color:#efe6ff;border:.12rem solid var(--ink)}
.newh b{display:block;color:#c96a0c}

.ugTop{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:44px;margin:-.3rem 3.2rem .15rem 0}
.ugFoot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.45rem;text-align:left}
.ugFoot p{margin:0}
.ugFoot .btn{flex:0 0 auto;font-size:.95rem;padding:.3rem .9rem}
.ugTop h2{margin:0}
.ugTop .have{padding:.15rem .8rem;border:.15rem solid var(--ink);border-radius:999px;background:linear-gradient(180deg,var(--g1),var(--g2));font-weight:900;font-size:1.05rem;white-space:nowrap}
.card.ug{width:min(58rem,100%)}
.ugRow{display:grid;grid-template-columns:minmax(0,.85fr) repeat(3,minmax(0,1fr));gap:.4rem;align-items:center;padding:.14rem 0;border-top:.1rem solid #eee7fb}
.ugRow .nm{display:flex;align-items:center;gap:.45rem;min-width:0;font-weight:900;font-size:1rem;text-align:left;line-height:1.2}
.ugRow .nm .pic{width:2.5rem;height:2.5rem;font-size:1.7rem}
.chip{display:flex;align-items:center;justify-content:space-between;gap:.3rem;min-height:44px;width:100%;padding:.2rem .5rem;border:.15rem solid #d7cdef;border-radius:.95rem;background:#f4f1fa;
  font-weight:800;font-size:.92rem;line-height:1.2;text-align:left;cursor:pointer}
.chip span:last-child{flex:0 0 auto;font-weight:900;white-space:nowrap}
.chip.own{border-color:#2fc46b;background:#e3f9ea;cursor:default}
.chip.buy{border-color:var(--ink);background:linear-gradient(180deg,var(--g1),var(--g2));box-shadow:0 .18rem 0 var(--ink)}
.chip.poor{border-color:#b9a9dc;background:#fff}
.chip.lock{opacity:.55;cursor:default}

.howGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .9rem;margin-top:.5rem;text-align:left}
.howGrid div{display:flex;align-items:center;gap:.5rem;font-size:.92rem;line-height:1.25}
.howGrid .pic{width:2.5rem;height:2.5rem;font-size:1.7rem}
.howGrid b{display:block;font-size:1rem}

.ad{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:.9rem;text-align:left;align-items:center}
.adArt{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;min-height:7rem;overflow:hidden;border:.17rem solid var(--ink);border-radius:1.1rem;font-size:4rem;text-decoration:none;
  background:linear-gradient(160deg,var(--pink),var(--vio) 55%,var(--blue))}
.adArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ad h2{font-size:1.35rem}
.ad .tag{margin:0 0 .2rem;font-size:.8rem;font-weight:800;opacity:.6}
.ad .links{justify-content:flex-start;margin-top:.5rem}
.ad .btn{width:100%;margin-top:.7rem}


#toast{position:fixed;left:50%;top:calc(var(--b) + 1.3rem + var(--sat));transform:translateX(-50%);z-index:25;max-width:90vw;padding:.4rem 1.1rem;border:.14rem solid #fff;border-radius:999px;
  background:rgba(36,9,63,.92);color:#fff;font-weight:900;font-size:1.05rem;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
#toast.on{opacity:1}
#rot{position:fixed;inset:0;z-index:40;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;padding:2rem;text-align:center;color:#fff;
  background:linear-gradient(160deg,var(--pink),var(--vio) 55%,var(--blue))}
#rot p{margin:0;font-size:1.4rem;font-weight:900;text-shadow:var(--out)}
.phone{width:4.4rem;height:7.4rem;border:.4rem solid #fff;border-radius:1rem;box-shadow:0 0 0 .19rem var(--ink);animation:turn 2.4s ease-in-out infinite}
@media (orientation:portrait) and (max-width:900px){
  #rot{display:flex}
}

@media (max-height:400px){
  .heroBox .cap{display:none}
  .playBox{gap:.4rem}
  .card{padding:.7rem 1rem .8rem}
  .card h2{font-size:1.45rem}
  .btns{margin-top:.6rem}
  .ugTop{margin-top:-.45rem}
  .ugRow{padding:.06rem 0}
  .ugFoot{margin-top:.25rem}
  .chip{font-size:.84rem;line-height:1.12}
  .ugRow .nm{font-size:.92rem}
  .ugFoot .btn{min-height:40px}
}

@keyframes pop{from{transform:scale(.8);opacity:0}}
@keyframes popIn{from{transform:scale(.3);opacity:0}}
@keyframes starPop{from{transform:scale(0) rotate(-50deg);opacity:0}}
@keyframes bob{50%{transform:translateY(-.22rem)}}
@keyframes glow{50%{box-shadow:0 .22rem 0 rgba(36,9,63,.6),0 0 0 .3rem rgba(255,224,102,.75)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes turn{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@keyframes hit{30%{transform:scale(1.35);color:#e02424}}
@keyframes shake{25%{transform:translateX(-.3rem)}75%{transform:translateX(.3rem)}}