/* ===== Liquid glass layer (loaded after style.css) ===== */
:root{--bg:#070a14;--text:#f3f1ea;--muted:#a9b0c4;--line:rgba(255,255,255,.12);--panel:rgba(22,27,44,.62);--panel2:rgba(255,255,255,.07);
  --glass-tint:rgba(18,22,38,.52);--glass-hi:rgba(255,255,255,.16);--glass-edge:rgba(255,255,255,.16);
  --spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 20.4%,1.043 24%,1.035 28.3%,1.007 37.6%,.996 47.4%,1);
  --ease:cubic-bezier(.22,1,.36,1);--r:22px}
@supports not (transition-timing-function:linear(0,1)){:root{--spring:cubic-bezier(.34,1.56,.64,1)}}
html,body{background:var(--bg);font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
/* ambient background */
#bgfx,body.horde #bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(1400px 900px at 50% -20%,#16204a 0%,transparent 60%),linear-gradient(180deg,#0a0e1d,#05070e)}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite alternate}
.b1{width:55vw;height:55vw;left:-12vw;top:-18vw;background:radial-gradient(circle,#3b6bff,transparent 65%)}
.b2{width:45vw;height:45vw;right:-10vw;top:5vh;background:radial-gradient(circle,#b14dff,transparent 65%);animation-duration:32s;animation-delay:-8s}
.b3{width:40vw;height:40vw;left:25vw;bottom:-20vw;background:radial-gradient(circle,#19c7a0,transparent 65%);animation-duration:38s;animation-delay:-14s;opacity:.4}
.b4{width:30vw;height:30vw;right:15vw;bottom:-8vw;background:radial-gradient(circle,#f0b94a,transparent 65%);animation-duration:29s;opacity:.28}
body.horde .b1{background:radial-gradient(circle,#ff4d3a,transparent 65%)}body.horde .b2{background:radial-gradient(circle,#ff9a3c,transparent 65%);opacity:.4}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}100%{transform:translate(-4vw,8vh) scale(.95)}}
.grain{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the glass material */
.glass{background:radial-gradient(140% 70% at 0% 0%,var(--glass-hi),transparent 46%),radial-gradient(90% 60% at 100% 100%,rgba(255,255,255,.06),transparent 55%),linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),var(--glass-tint);
  -webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);
  border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 0 0 .5px rgba(255,255,255,.05),0 18px 50px -12px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.25)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(20,24,40,.94)}}
.card{border-radius:var(--r);padding:1.1rem 1.25rem}
.card.glass{background-color:transparent}
/* header */
.top{position:sticky;top:.6rem;margin:.6rem .8rem 0;border-radius:999px;padding:.45rem .6rem .45rem 1.1rem;border-bottom:0;z-index:30}
.brand{font-weight:600;font-size:1.02rem}.brand b{background:linear-gradient(90deg,#ffe3a1,#f0b94a);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:820px){.brand2{display:none}.tab span{display:none}.pill span:not(.chev):not(#charTxt){display:none}}
.tabs{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:.22rem}
.tab{border-radius:999px;padding:.42rem 1rem;color:var(--muted)}.tab:hover{color:#fff}
.tabInk{border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 16px rgba(0,0,0,.3);transition:left .55s var(--spring),width .55s var(--spring)}
.pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.45rem .95rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:var(--text);cursor:pointer;font-weight:600;transition:transform .4s var(--spring),background .2s,box-shadow .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.pill:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}.pill:active{transform:scale(.95)}
.pill.accent{background:linear-gradient(180deg,#6aa8ff,#3b6bff);border-color:rgba(255,255,255,.35);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 20px rgba(59,107,255,.45)}
body.horde .pill.accent{background:linear-gradient(180deg,#ff8a6a,#e0412d);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 20px rgba(224,65,45,.45)}
body.chat-open #chatBtn{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.chev{font-size:.7rem;opacity:.7}
.iconbtn{border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);width:36px;height:36px;transition:transform .4s var(--spring),background .2s}
.iconbtn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}.iconbtn.sm{width:30px;height:30px;font-size:.85rem}
#charPop{top:calc(100% + .5rem);left:auto;right:4rem;width:300px;border-radius:var(--r);padding:1rem 1.1rem;transform-origin:top right;animation:popspring .5s var(--spring)}
@keyframes popspring{from{opacity:0;transform:scale(.9) translateY(-6px)}}
.field{display:flex;flex-direction:column;gap:.3rem;margin:.7rem 0 0;font-size:.82rem;color:var(--muted)}.field select{width:100%}
.seg{border-radius:999px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);padding:.2rem;gap:.15rem;overflow:visible}
.segbtn{border-radius:999px;background:transparent;padding:.36rem .85rem;color:var(--muted);transition:all .35s var(--spring)}
.segbtn.on{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.1));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 10px rgba(0,0,0,.25)}
#facA.on{background:linear-gradient(180deg,#5c9bff,#2f5fe0)}#facH.on{background:linear-gradient(180deg,#ff7a5c,#c8331f)}
select,input{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);border-radius:12px;color:var(--text);padding:.45rem .65rem}
select option,select optgroup{background:#151a2c;color:var(--text)}
select:focus,input:focus,button:focus-visible{outline:none;border-color:rgba(130,170,255,.8);box-shadow:0 0 0 3px rgba(90,140,255,.3)}
/* buttons */
.btn{border-radius:999px;background:linear-gradient(180deg,#6aa8ff,#3b6bff);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px rgba(59,107,255,.35);transition:transform .45s var(--spring),box-shadow .25s,filter .2s}
body.horde .btn:not(.big):not(.ghost){background:linear-gradient(180deg,#ff8a6a,#e0412d);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px rgba(224,65,45,.35)}
.btn:hover{transform:translateY(-2px) scale(1.01)}.btn:active{transform:scale(.96)}
.btn.ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.15);color:var(--text)}
.btn.big{border-radius:24px;font-size:1.35rem;padding:1.15rem 1.4rem;background:linear-gradient(180deg,#4fe6b0,#14b07a);color:#03140c;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.12),0 12px 34px rgba(30,200,140,.38)}
.btn.big:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 44px rgba(30,200,140,.5)}
.btn.big kbd{background:rgba(0,0,0,.12);border-color:rgba(0,0,0,.15);color:#03140c}
.chip{border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);transition:all .35s var(--spring)}
.chip:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
/* XP */
.xpwrap{margin:.55rem .8rem 0;border-radius:999px;padding:.4rem .9rem .4rem .45rem;border-bottom:0;z-index:25}
.lvbadge{width:46px;height:46px;border:1px solid rgba(255,220,140,.6);background:radial-gradient(circle at 35% 25%,rgba(255,235,180,.5),rgba(120,80,10,.4) 60%,rgba(40,25,5,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 22px rgba(240,185,74,.35);color:#fff3cf}
.xpbar{height:24px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.xpfill{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),linear-gradient(90deg,#7c4dff,#b26bff,#ff8ad8);transition:width 1.1s var(--spring)}
.vs{border-radius:999px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1)}
#xpPop{border-radius:var(--r);top:calc(100% + .5rem);animation:popspring .5s var(--spring)}
/* layout */
#layout{display:grid;grid-template-columns:minmax(0,1fr) 0;gap:0;transition:grid-template-columns .5s var(--ease);padding:0 .8rem;max-width:2000px;margin:0 auto}
body.chat-open #layout{grid-template-columns:minmax(0,1fr) 390px;gap:.9rem}
main{padding:.9rem 0;max-width:none;min-width:0}
.view.on{animation:viewin .6s var(--spring)}@keyframes viewin{from{opacity:0;transform:translateY(14px) scale(.99)}}
#view-guide{grid-template-columns:minmax(0,1fr) 360px;gap:.9rem}
@media(max-width:1250px){body.chat-open #view-guide{grid-template-columns:1fr}}
@media(max-width:1050px){#view-guide{grid-template-columns:1fr}}
.side{gap:.9rem}
.zone{font-size:2.3rem;font-weight:800;letter-spacing:-.01em;background:linear-gradient(180deg,#fff6dc,#f0b94a);-webkit-background-clip:text;background-clip:text}
.step{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
#stepLines{font-size:1.28rem}
.progress{background:rgba(0,0,0,.3);height:7px}
.badge.steps{background:rgba(56,211,159,.14)}.badge.hubs{background:rgba(240,185,74,.12)}
.alt{border-radius:16px;background:rgba(90,140,255,.1);border-color:rgba(130,170,255,.3)}
.controls2{opacity:.85}
.upcoming li{padding:.15rem .3rem;border-radius:8px}.upcoming li:hover{background:rgba(255,255,255,.06)}
.ptabs{display:flex;margin-bottom:.7rem}.ptabs .segbtn{flex:1;padding:.36rem .3rem;font-size:.84rem}
.pane{display:none}.pane.on{display:block;animation:viewin .45s var(--spring)}
.route{max-height:340px}.route li.on{background:linear-gradient(90deg,rgba(90,140,255,.55),transparent)}
.minimap{border-radius:16px;height:220px}
/* map + dungeons */
#view-map{height:calc(100vh - 150px)}
.mapsvg{border-radius:var(--r)}.mapstage{overflow:hidden}
.layer{border-radius:999px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);transition:all .35s var(--spring)}.layer:hover{background:rgba(255,255,255,.12)}
.mapinfo{border-radius:16px;background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.1)}
.maptools .iconbtn{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgba(20,25,40,.55)}
#view-dng{min-height:calc(100vh - 150px)}.dlist ol,.ddetail{max-height:calc(100vh - 175px)}
.dsvg{border-radius:18px;background:radial-gradient(ellipse at center,rgba(40,44,66,.6),rgba(8,10,18,.75));border-color:rgba(255,255,255,.1)}
.boss{border-radius:14px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.dlist li.on{background:linear-gradient(90deg,rgba(90,140,255,.45),transparent)}
/* chat */
.chat{position:sticky;top:8.2rem;margin:.9rem 0;height:calc(100vh - 9.2rem);border-radius:var(--r);display:none;flex-direction:column;overflow:hidden;min-width:0}
body.chat-open .chat{display:flex;animation:chatin .6s var(--spring)}@keyframes chatin{from{opacity:0;transform:translateX(30px) scale(.97)}}
.chath{display:flex;align-items:center;gap:.65rem;padding:.8rem .9rem;border-bottom:1px solid rgba(255,255,255,.08)}.chath>div:nth-child(2){flex:1;min-width:0}
.orb{width:34px;height:34px;border-radius:50%;flex:none;background:radial-gradient(circle at 30% 28%,#fff,#9cc2ff 22%,#6a5cff 55%,#2a1a6a);box-shadow:0 0 18px rgba(120,140,255,.6),inset 0 -3px 8px rgba(0,0,0,.35);animation:orb 4s ease-in-out infinite}
.chat.thinking .orb{animation:orb .7s ease-in-out infinite}@keyframes orb{50%{transform:scale(1.08);filter:hue-rotate(40deg)}}
.chatlog{flex:1;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;gap:.6rem;scroll-behavior:smooth;overscroll-behavior:contain}
.msg{max-width:92%;padding:.62rem .85rem;border-radius:18px;font-size:.93rem;line-height:1.45;animation:msgin .5s var(--spring);word-wrap:break-word}
@keyframes msgin{from{opacity:0;transform:translateY(10px) scale(.96)}}
.msg.me{align-self:flex-end;background:linear-gradient(180deg,#6aa8ff,#3b6bff);color:#fff;border-bottom-right-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px rgba(59,107,255,.3)}
body.horde .msg.me{background:linear-gradient(180deg,#ff8a6a,#e0412d)}
.msg.bot{align-self:flex-start;background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.12);border-bottom-left-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.msg.sys{align-self:center;font-size:.8rem;color:var(--muted);background:none;padding:.2rem}
.msg b{color:#ffe3a1}.msg .q{color:#ffe3a1;font-weight:600}.msg ul{margin:.35rem 0;padding-left:1.1rem}.msg li{margin:.15rem 0}.msg .src{display:block;margin-top:.35rem;font-size:.74rem;color:var(--muted)}
.acts{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.act{border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;font-size:.8rem;font-weight:650;padding:.3rem .7rem;cursor:pointer;transition:transform .35s var(--spring),background .2s}
.act:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}.act:active{transform:scale(.95)}
.typing{display:inline-flex;gap:4px;padding:.2rem 0}.typing i{width:7px;height:7px;border-radius:50%;background:#cfd8ff;animation:bounce 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.chatchips{display:flex;gap:.35rem;overflow-x:auto;padding:.35rem .9rem;scrollbar-width:none}.chatchips::-webkit-scrollbar{display:none}
.chatchips .chip{white-space:nowrap;font-size:.78rem;animation:msgin .45s var(--spring) backwards}
.chatform{display:flex;gap:.4rem;align-items:center;margin:.5rem .7rem .75rem;padding:.3rem .3rem .3rem .9rem;border-radius:999px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14);transition:border-color .2s,box-shadow .2s}
.chatform:focus-within{border-color:rgba(130,170,255,.7);box-shadow:0 0 0 3px rgba(90,140,255,.22)}
#whereIn{flex:1;background:none;border:0;box-shadow:none;padding:.45rem 0;font-size:.95rem;min-width:0}
.send{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:1rem;background:linear-gradient(180deg,#6aa8ff,#3b6bff);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);transition:transform .4s var(--spring)}
body.horde .send{background:linear-gradient(180deg,#ff8a6a,#e0412d)}.send:hover{transform:scale(1.08)}.send:active{transform:scale(.9)}
@media(max-width:1100px){body.chat-open #layout{grid-template-columns:minmax(0,1fr) 0}
  .chat{position:fixed;right:.6rem;left:.6rem;bottom:.6rem;top:auto;height:min(70vh,560px);margin:0;z-index:45}}
/* tooltips */
.tipbox{position:fixed;z-index:90;pointer-events:none;max-width:240px;padding:.35rem .6rem;border-radius:10px;font-size:.78rem;font-weight:600;color:#fff;background:rgba(15,18,30,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;transform:translateY(4px) scale(.97);transition:opacity .15s,transform .3s var(--spring)}
.tipbox.show{opacity:1;transform:none}
/* onboarding */
.onb{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:rgba(3,5,12,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadein .4s}
@keyframes fadein{from{opacity:0}}
.onbcard{width:min(460px,92vw);border-radius:28px;padding:1.8rem 1.8rem 1.2rem;text-align:center;animation:popspring .7s var(--spring)}
.onbstep{display:none}.onbstep.on{display:block;animation:viewin .5s var(--spring)}.onbstep .big{font-size:3rem}.onbstep h2{margin:.4rem 0;font-size:1.4rem}.onbstep p{color:#d7dbea;margin:.3rem 0 1rem}
.onbnav{display:flex;align-items:center;gap:.5rem;justify-content:flex-end}.dots{margin-right:auto;display:flex;gap:6px}.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .4s var(--spring)}.dots i.on{width:22px;border-radius:99px;background:#fff}
/* misc */
.toast{border-radius:999px;border-left:1px solid var(--glass-edge);padding:.6rem 1.1rem}
.game{border-radius:var(--r);border:1px solid var(--glass-edge)}
body.chat-open .game{right:410px}@media(max-width:1100px){body.chat-open .game{right:1rem;bottom:calc(min(70vh,560px) + 1.2rem)}}
kbd{border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.blob{animation:none}}
body.rm *,body.rm *::before,body.rm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
/* ===== brand ===== */
.brand{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.logo{width:34px;height:34px;flex:none;filter:drop-shadow(0 2px 8px rgba(140,120,255,.5))}
.logo .lmoon{transform-origin:24px 24px;animation:moonbob 6s ease-in-out infinite}@keyframes moonbob{50%{transform:rotate(-8deg) translateY(-1px)}}
.word{font-weight:800;letter-spacing:-.01em;font-size:1.08rem;line-height:1}
.word .w1{background:linear-gradient(180deg,#fff,#c9c2ff 60%,#9d8cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.word .w2{font-weight:500;color:#9ff0c8;margin-left:.22rem}
/* ===== arcade ===== */
.game{width:430px;padding:.75rem;transition:width .55s var(--spring)}
.game.wide{width:min(980px,calc(100vw - 2rem))}
body.chat-open .game.wide{right:1rem}
.gameh{flex-wrap:wrap;gap:.5rem}.gtitle{font-size:.95rem}.gtabs{order:3;width:100%;display:flex}.gtabs .segbtn{flex:1;font-size:.78rem;padding:.34rem .3rem;white-space:nowrap}
.game.wide .gtabs{order:0;width:auto;flex:1;max-width:560px}
.gpane{display:none}.gpane.on{display:block;animation:viewin .45s var(--spring)}
.ghelp{margin:.4rem 0 0}
#fishCv{display:block;width:100%;border-radius:14px;cursor:pointer}
#fScore,#mMoves{color:var(--gold2);font-weight:800}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;perspective:800px}
.mcard{position:relative;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;transform-style:preserve-3d;transition:transform .55s var(--spring)}
.mcard.flip{transform:rotateY(180deg)}.mcard.no{animation:shake .4s}@keyframes shake{25%{translate:-4px 0}75%{translate:4px 0}}
.mface{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.mback{background:linear-gradient(160deg,rgba(130,110,255,.55),rgba(40,30,110,.6))}.mfront{transform:rotateY(180deg);background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04))}
.mface svg{width:72%;height:72%}.mcard.ok .mfront{border-color:#4fe6b0;box-shadow:0 0 16px rgba(79,230,176,.45)}
/* ===== auction house ===== */
.up{color:#4fe6b0}.down{color:#ff7a7a}
.ah{position:relative;font-size:.86rem}
.ahtop{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.55rem}
.ahstat{display:flex;flex-direction:column;padding:.35rem .75rem;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);min-width:96px}
.ahstat small{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.ahstat b{font-size:1.02rem;font-variant-numeric:tabular-nums}
.playonly{margin-left:auto;font-size:.66rem;font-weight:800;letter-spacing:.1em;padding:.3rem .6rem;border-radius:999px;color:#ffe3a1;border:1px dashed rgba(255,210,122,.6);background:rgba(255,210,122,.08)}
.ahmain{display:grid;grid-template-columns:250px minmax(0,1fr) 230px;gap:.55rem;height:min(470px,60vh)}
.ahlist,.ahsidebody{overflow:auto}.ahlist{display:flex;flex-direction:column;gap:.25rem}
.ahrow{display:grid;grid-template-columns:22px 1fr 54px 64px;align-items:center;gap:.35rem;padding:.35rem .45rem;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s}
.ahrow:hover{background:rgba(255,255,255,.06)}.ahrow.on{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
.ahrow .nm{display:flex;flex-direction:column;font-weight:650;line-height:1.15}.ahrow small{font-size:.68rem;color:var(--muted);font-weight:500}
.ahrow .pr{text-align:right;font-variant-numeric:tabular-nums;display:flex;flex-direction:column}.ahrow .pr small.up{color:#4fe6b0}.ahrow .pr small.down{color:#ff7a7a}
.ahspark{width:54px;height:20px}
.ahcenter{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.ahchartwrap{flex:1;min-height:0;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);padding:.5rem;display:flex;flex-direction:column}
.ahchead{display:flex;gap:.7rem;align-items:baseline;padding:0 .2rem}.ahchead #ahName{font-weight:800;font-size:1rem}.ahchead #ahPrice{font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums}
#ahChart{flex:1;width:100%;min-height:0;display:block}
.ahtrade{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.ahbox{border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);padding:.5rem .6rem}
.ahbh{font-weight:750;color:var(--gold2);margin-bottom:.3rem}.qty{display:flex;gap:.25rem;margin-bottom:.4rem}.qty .chip{padding:.18rem .55rem;font-size:.74rem}.qty .chip.on{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4)}
.ahbtns{display:flex;gap:.35rem;margin-bottom:.3rem}.ahbtns .btn{flex:1}
.btn.buy,body.horde .btn.buy{background:linear-gradient(180deg,#4fe6b0,#14b07a);color:#03140c;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.btn.sell,body.horde .btn.sell{background:linear-gradient(180deg,#ff8f8f,#d8414a);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.ahside{display:flex;flex-direction:column;gap:.4rem;min-height:0}.ahtabs{display:flex}.ahtabs .segbtn{flex:1;font-size:.74rem;padding:.3rem .2rem}
.news{padding:.4rem .55rem;border-radius:12px;background:rgba(255,255,255,.05);margin-bottom:.3rem;font-size:.78rem;border-left:3px solid rgba(255,255,255,.15);animation:msgin .45s var(--spring)}
.news small{display:block;color:var(--muted);font-size:.66rem}.news.up{border-left-color:#4fe6b0}.news.down{border-left-color:#ff7a7a}.news.me{background:rgba(120,140,255,.1)}
.cbar{height:4px;border-radius:9px;background:rgba(255,255,255,.1);margin-top:.3rem;overflow:hidden}.cbar i{display:block;height:100%;background:linear-gradient(90deg,#6aa8ff,#b26bff)}
.bests{list-style:none;padding:0;margin:0}.bests li{display:grid;grid-template-columns:32px 1fr;padding:.35rem .4rem;border-radius:10px;background:rgba(255,255,255,.04);margin-bottom:.25rem}.bests small{grid-column:2;color:var(--muted);font-size:.68rem}
.ahflash{position:absolute;left:50%;top:3.2rem;transform:translate(-50%,-10px);opacity:0;pointer-events:none;padding:.45rem .9rem;border-radius:999px;font-weight:700;font-size:.82rem;background:rgba(10,14,26,.85);border:1px solid rgba(255,255,255,.2);transition:all .45s var(--spring);z-index:3;white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis}
.ahflash.show{opacity:1;transform:translate(-50%,0)}.ahflash.good{border-color:rgba(79,230,176,.6)}.ahflash.bad{border-color:rgba(255,122,122,.6)}
@media(max-width:900px){.ahmain{grid-template-columns:1fr;height:auto}.ahlist{flex-direction:row;overflow-x:auto}.ahrow{min-width:200px}.ahchartwrap{height:220px}.ahsidebody{max-height:180px}}
@media(max-width:600px){.game,.game.wide{left:.5rem;right:.5rem!important;width:auto;bottom:.5rem}.top{padding-left:.6rem}.settings{gap:.3rem}.xpquick .chip:not(#xpEditBtn){display:none}.vs{display:none}#view-map{grid-template-columns:1fr;height:auto}.mapstage{height:60vh}#view-dng{grid-template-columns:1fr}}
/* view transitions */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(main){animation:vtout .32s cubic-bezier(.4,0,1,1) both}::view-transition-new(main){animation:vtin .5s cubic-bezier(.22,1,.36,1) both}
@keyframes vtout{to{opacity:0;transform:scale(.985) translateY(-6px);filter:blur(6px)}}@keyframes vtin{from{opacity:0;transform:scale(1.015) translateY(8px);filter:blur(6px)}}
main{view-transition-name:main}.tabInk{view-transition-name:tabink}#lvBadge{view-transition-name:lvbadge}
::view-transition-group(tabink){animation-duration:.5s;animation-timing-function:var(--spring)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
#miniMap{view-transition-name:mapmorph}.mapstage{view-transition-name:mapmorph}
.vt .view.on{animation:none}
::view-transition-group(mapmorph){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1);border-radius:var(--r);overflow:hidden}
.foot{margin:1.4rem 0 .4rem;text-align:center;font-size:.72rem;color:rgba(200,205,225,.55)}
.blob{opacity:.68}
.game{max-height:calc(100vh - 1.5rem);overflow:auto}.game.wide .ahmain{height:clamp(300px,calc(100vh - 300px),470px)}
.brand{text-decoration:none;color:inherit}
@media(max-width:700px){
 .top{position:relative;top:0;border-radius:24px;flex-wrap:wrap;gap:.45rem;padding:.5rem .6rem;margin:.5rem .5rem 0}
 .tabs{order:3;width:100%;margin-left:0;justify-content:space-between}.tab{flex:1;text-align:center;padding:.45rem .3rem}
 .settings{margin-left:auto;flex-wrap:nowrap}#charBtn{padding:.4rem .7rem;font-size:.82rem;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .xpwrap{margin:.45rem .5rem 0;border-radius:22px;flex-wrap:wrap;padding:.4rem .5rem}.xpbar{min-width:0}
 #layout{padding:0 .5rem}.zone{font-size:1.8rem}#stepLines{font-size:1.08rem}.btn.big{font-size:1.15rem;padding:1rem}
 .controls2{justify-content:center}#back span{display:none}
 #charPop{right:.5rem;left:.5rem;width:auto}
 .chat{top:auto}
}