/* 冰封王座 — frosted-glass HUD over a full-bleed canvas arena. One snowy look, light only. */
:root{
  --ice:#e6f0fa;
  --ink:#1c3a63;
  --ink-soft:#56769c;
  --frost:#2f7fd6;
  --frost-deep:#1d5aa6;
  --glass:rgba(255,255,255,.82);
  --glass-line:rgba(255,255,255,.95);
  --hp:#38b95a;
  --gold:#f0b429;
  --danger:#e0484a;
  --f-display:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --f-num:"Baloo 2",ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color-scheme:light;
  /* safe-area padding for the stage's own edges; swapped when the stage is rotated */
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
/* stage turned 90° clockwise: its left edge is the screen's top, its top edge the screen's right */
html.rotated{
  --safe-l:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{position:fixed;inset:0;background:var(--ice);color:var(--ink);font-family:var(--f-num);font-size:14px;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
#stage{position:fixed;left:0;top:0;width:100vw;height:100vh;transform-origin:0 0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* No text selection or long-press callout anywhere but text fields: WeChat on
   iOS does not always inherit these from #stage, and a long press while
   playing would select text and pop up its 翻译 / 搜一搜 menu. */
*:not(input):not(textarea):not([contenteditable]){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,canvas{-webkit-user-drag:none}
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}

#hud{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;
  padding-left:max(16px,var(--safe-l));padding-right:max(16px,var(--safe-r));
  padding-top:max(12px,var(--safe-t));padding-bottom:max(12px,var(--safe-b))}
#hud button,#joy,#avatar{pointer-events:auto}

.glass{background:var(--glass);border:2px solid var(--glass-line);box-shadow:0 6px 18px rgba(40,80,140,.18),inset 0 -3px 0 rgba(150,185,225,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px}
.left{display:flex;flex-direction:column;gap:8px;justify-self:start;min-width:0}
.me{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:18px}
#avatar{width:52px;height:52px;border-radius:14px;background:linear-gradient(#bcd8f4,#e9f3fd)}
.me-name{display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:20px;line-height:1.1;letter-spacing:.04em;max-width:180px;white-space:nowrap;overflow:hidden}
.me-name span{overflow:hidden;text-overflow:ellipsis}
.lvl{flex:none;display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 5px;border-radius:7px;background:var(--frost);color:#fff;font-family:var(--f-num);font-size:13px;font-weight:800;letter-spacing:0}
.hpbar{position:relative;width:160px;height:20px;margin-top:5px;border-radius:10px;background:#c9d6e4;overflow:hidden;box-shadow:inset 0 2px 3px rgba(30,60,100,.25)}
#hpFill{position:absolute;inset:0;width:100%;border-radius:10px;background:linear-gradient(#6ee08a,var(--hp));transition:width .12s}
#hpNum{position:absolute;right:10px;top:-1px;font-size:16px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,60,20,.5);font-variant-numeric:tabular-nums}
.hpbar.hurt #hpFill{background:linear-gradient(#ff9a8a,var(--danger))}
.stats,.roomchip{display:flex;align-items:center;gap:12px;padding:4px 12px;border-radius:12px;font-weight:700;font-size:14px;color:var(--ink-soft);align-self:start}
.stats b,.roomchip b{color:var(--ink);font-variant-numeric:tabular-nums}
.ping{font-size:12px;font-variant-numeric:tabular-nums}
.ping.bad{color:var(--danger)}
.roomchip b{letter-spacing:.12em}
.roomchip .iconbtn{display:grid;place-items:center;width:28px;height:24px;padding:0;background:rgba(47,127,214,.14);color:var(--frost-deep)}
.roomchip .iconbtn svg{width:16px;height:16px}
.roomchip .iconbtn.on{background:var(--frost);color:#fff}
#soundBtn .mute{display:none}
#soundBtn.muted .mute{display:inline}
#soundBtn.muted .waves{display:none}
.roomchip button{font:inherit;font-size:13px;font-weight:700;border:0;border-radius:999px;padding:3px 12px;background:var(--frost);color:#fff;cursor:pointer}
#feed{display:flex;flex-direction:column;gap:4px;max-width:300px}
#feed div{font-family:var(--f-display);font-size:14px;background:rgba(255,255,255,.75);padding:2px 10px;border-radius:10px;align-self:start;animation:feedIn .25s ease-out}
#feed div.mine{background:rgba(255,236,170,.92)}
#feed div.bad{background:rgba(255,214,210,.92)}
@keyframes feedIn{from{transform:translateX(-12px);opacity:0}}

.center{display:flex;flex-direction:column;align-items:center;gap:8px}
.timer{display:flex;align-items:center;gap:10px;padding:2px 18px;border-radius:999px;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.timer em{font-style:normal;font-family:var(--f-display);font-size:15px;color:#fff;background:var(--danger);padding:0 10px;border-radius:999px;animation:pulseText 1s infinite}
@keyframes pulseText{50%{opacity:.6}}
.banner{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 22px 10px;border-radius:22px;
  background:linear-gradient(#5fa8f0,var(--frost));border:2px solid #cfe6ff;box-shadow:0 6px 18px rgba(30,90,170,.35);animation:bannerIn .5s cubic-bezier(.2,1.6,.4,1)}
.banner-title{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:26px;color:#fff;letter-spacing:.08em;text-shadow:0 2px 0 var(--frost-deep)}
.crown{width:30px;height:22px;background:var(--gold);clip-path:polygon(0 100%,0 25%,25% 60%,50% 0,75% 60%,100% 25%,100% 100%)}
.gbar{width:220px;height:9px;border-radius:5px;background:rgba(10,40,90,.35);overflow:hidden}
#gFill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffd75e,#ff8a3c);transition:width .15s}
@keyframes bannerIn{from{transform:translateY(-30px) scale(.8);opacity:0}}

.right{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.mapwrap{padding:6px;border-radius:20px}
#mini{display:block;width:180px;height:120px;border-radius:14px}
.board{list-style:none;margin:0;padding:6px 10px;border-radius:14px;width:196px;display:flex;flex-direction:column;gap:1px;font-weight:700;font-size:13px}
.board li{display:grid;grid-template-columns:18px 1fr auto;gap:6px;align-items:center;padding:1px 2px;border-radius:6px;color:var(--ink-soft)}
.board li em{font-style:normal;color:var(--ink-soft)}
.board li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.board li b{font-variant-numeric:tabular-nums;color:var(--ink)}
.board li.me{background:rgba(255,236,170,.8)}
.board li.gap{border-top:1px dashed rgba(86,118,156,.4);margin-top:2px;padding-top:3px}
.board li .c{display:inline-block;width:12px;height:9px;margin-right:4px;background:var(--gold);clip-path:polygon(0 100%,0 25%,25% 60%,50% 0,75% 60%,100% 25%,100% 100%)}

.death{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--f-display);font-size:26px;color:#fff;
  background:rgba(28,58,99,.72);padding:12px 26px;border-radius:20px;text-align:center;line-height:1.4}
.death small{display:block;font-size:16px;opacity:.85}

.bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px}
#joy{justify-self:start;position:relative;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.25),rgba(200,220,240,.45));border:3px solid rgba(255,255,255,.75);box-shadow:inset 0 4px 14px rgba(40,80,140,.2);touch-action:none}
.arrow{position:absolute;width:0;height:0;border:8px solid transparent;opacity:.55}
.arrow.u{top:10px;left:50%;margin-left:-8px;border-bottom-color:#fff}
.arrow.d{bottom:10px;left:50%;margin-left:-8px;border-top-color:#fff}
.arrow.l{left:10px;top:50%;margin-top:-8px;border-right-color:#fff}
.arrow.r{right:10px;top:50%;margin-top:-8px;border-left-color:#fff}
#knob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#dfe9f4);box-shadow:0 4px 10px rgba(40,80,140,.3)}

@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.actions{justify-self:end;display:flex;align-items:flex-end;gap:16px}
button{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:3px solid var(--frost);outline-offset:3px}
.shieldbtn{position:relative;width:70px;height:70px;border-radius:50%;margin-bottom:6px;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 30%,#bfe2ff,#4b9be6);border:3px solid #e3f2ff;box-shadow:0 5px 14px rgba(30,90,170,.35)}
.shieldbtn svg{width:34px;height:34px}
.shieldbtn.off{filter:grayscale(.85);opacity:.75}
.shieldbtn.active{animation:pulse 1s infinite}
.shieldbtn .ring{position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(rgba(47,127,214,.85) var(--p,0%),transparent 0);-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);mask:radial-gradient(circle,transparent 60%,#000 61%)}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(120,190,255,.35),0 5px 14px rgba(30,90,170,.35)}}
.badge{position:absolute;right:-4px;bottom:-4px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--ink);color:#fff;font-weight:800;font-size:14px;line-height:24px;text-align:center;border:2px solid #fff}
.throwbtn{position:relative;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 30%,#8cc6ff,var(--frost) 60%,var(--frost-deep));border:4px solid #d9ecff;box-shadow:0 8px 20px rgba(30,90,170,.4)}
.throwbtn.down{transform:scale(.94)}
.throwbtn .ball{position:relative;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 40%,#d3e1f0)}
.throwbtn .ball::before{content:"";position:absolute;right:58px;top:14px;width:30px;height:4px;border-radius:2px;background:rgba(255,255,255,.75);box-shadow:-6px 10px 0 rgba(255,255,255,.55),4px 20px 0 rgba(255,255,255,.35)}
.throwbtn.gold{background:radial-gradient(circle at 40% 30%,#ffe9a0,var(--gold) 60%,#c8860c);border-color:#fff3c8}
.throwbtn.gold .ball{background:radial-gradient(circle at 35% 30%,#fffbe8 35%,#ffd75e)}
.throwbtn.ice{background:radial-gradient(circle at 40% 30%,#d6f3ff,#3fb6ea 60%,#1e7fb0);border-color:#e3f7ff}
.throwbtn.ice .ball{background:radial-gradient(circle at 35% 30%,#fff 35%,#8fdcfa)}
.throwbtn.triple{background:radial-gradient(circle at 40% 30%,#e6dcff,#9a5ad8 60%,#6b38a8);border-color:#efe6ff}
.throwbtn.mega{background:radial-gradient(circle at 40% 30%,#b9d6ff,#1d5aa6 60%,#123d75);border-color:#d6e7ff}
.throwbtn.mega .ball{transform:scale(1.25)}
#ammoBadge{background:var(--ink)}
.throwbtn .charge{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(var(--chargeCol,#fff) var(--c,0%),transparent 0);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);pointer-events:none}
.throwbtn.full .charge{--chargeCol:#ffc93c;filter:drop-shadow(0 0 6px #ffc93c)}
.throwbtn .splabel{position:absolute;left:-6px;top:-6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:16px;color:#fff;background:var(--ink);border:2px solid #fff}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(214,232,250,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  padding-left:max(16px,var(--safe-l));padding-right:max(16px,var(--safe-r));padding-top:max(12px,var(--safe-t));padding-bottom:max(12px,var(--safe-b));overflow-y:auto;touch-action:none}
.panel{width:100%;max-width:470px;border-radius:28px;padding:26px 26px 22px;text-align:center;margin:auto}
.panel h1{font-family:var(--f-display);font-weight:400;font-size:52px;line-height:1;margin:0;color:var(--frost-deep);letter-spacing:.06em;text-shadow:0 3px 0 #fff,0 5px 0 rgba(30,90,170,.18)}
.sub{margin:8px 0 18px;color:var(--ink-soft);font-weight:600;font-size:15px}
.field{display:flex;flex-direction:column;gap:6px;text-align:left;font-family:var(--f-display);font-size:16px;margin:0 auto 14px;max-width:320px}
.field input{font:inherit;font-family:var(--f-num);font-size:18px;font-weight:700;color:var(--ink);padding:10px 14px;border-radius:14px;border:2px solid #cfe0f2;background:#fff}
.btns{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:16px}
.cta{font-family:var(--f-display);font-size:24px;letter-spacing:.1em;color:#fff;padding:12px 44px;border-radius:999px;
  background:linear-gradient(#5fb0ff,var(--frost));border:3px solid #d9ecff;box-shadow:0 6px 0 var(--frost-deep),0 10px 20px rgba(30,90,170,.3)}
.cta:active{transform:translateY(3px);box-shadow:0 3px 0 var(--frost-deep)}
.cta:disabled{opacity:.6}
.ghost{font-family:var(--f-display);font-size:17px;color:var(--frost-deep);background:rgba(230,240,252,.95);padding:8px 22px;border-radius:999px;border:2px solid #cfe0f2}
.err{color:var(--danger);font-weight:700;margin:0 0 12px}
.a2hs{display:flex;align-items:center;gap:10px;margin:0 auto 14px;max-width:400px;padding:10px 12px;border-radius:14px;background:rgba(255,236,170,.9);text-align:left;font-size:13px;font-weight:600;line-height:1.5}
.a2hs p{margin:0}
.a2hs button{flex:none;font-family:var(--f-display);font-size:14px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--frost-deep)}
.rows{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;text-align:left;font-size:14px;margin:0 auto 12px;max-width:380px}
.rows dt{font-family:var(--f-display);font-size:16px}
.rows dd{margin:0;color:var(--ink-soft);font-weight:600}
.tip{font-size:13px;color:var(--ink-soft);margin:0;font-weight:600;line-height:1.5}
.ranking{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;text-align:left}
.ranking li{display:grid;grid-template-columns:34px 1fr 64px 64px;align-items:center;padding:6px 12px;border-radius:12px;background:rgba(230,240,252,.9);font-weight:700}
.ranking li.head{background:none;font-size:12px;color:var(--ink-soft);padding-block:0}
.ranking li.me{background:rgba(255,236,170,.95)}
.ranking li .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking li .v{text-align:right;font-variant-numeric:tabular-nums}
.ranking li .r{font-size:18px;font-weight:800;color:var(--frost-deep)}
.toast{position:absolute;left:50%;bottom:30%;transform:translateX(-50%);background:var(--ink);color:#fff;font-weight:700;padding:8px 18px;border-radius:999px;pointer-events:none}

/* landscape phones: short screens. The stage is landscape on every phone. */
/* html.short is set from the game area size (see js/screen.js), so it also works when the game is rotated */
html.short .top{gap:8px}
html.short .me{padding:5px 12px 5px 5px;gap:8px;border-radius:14px}
html.short #avatar{width:38px;height:38px;border-radius:10px}
html.short .me-name{font-size:15px;max-width:130px}
html.short .hpbar{width:120px;height:16px;margin-top:3px}
html.short #hpNum{font-size:13px;top:-2px}
html.short .left{gap:5px}
html.short .stats,html.short .roomchip{font-size:12px;gap:8px;padding:2px 10px;border-radius:10px}
html.short .roomchip button{font-size:12px;padding:2px 10px}
html.short #feed div{font-size:12px;padding:1px 8px}
html.short #feed div:nth-child(n+3){display:none}
html.short .timer{font-size:18px;padding:0 14px}
html.short .timer em{font-size:12px}
html.short .banner{padding:4px 14px 6px;border-radius:16px}
html.short .banner-title{font-size:18px}
html.short .crown{width:22px;height:16px}
html.short .gbar{width:150px;height:7px}
html.short .mapwrap{padding:4px;border-radius:14px}
html.short #mini{width:132px;height:88px;border-radius:10px}
html.short .board{width:150px;font-size:11px;padding:4px 8px}
html.short .board li:nth-child(n+4):not(.me){display:none}
html.short #joy{width:124px;height:124px}
html.short #knob{width:52px;height:52px;margin:-26px 0 0 -26px}
html.short .throwbtn{width:96px;height:96px}
html.short .throwbtn .ball{width:42px;height:42px}
html.short .shieldbtn{width:60px;height:60px}
html.short .shieldbtn svg{width:28px;height:28px}
html.short .actions{gap:12px}
html.short .death{font-size:20px;padding:8px 20px}
html.short .death small{font-size:14px}
html.short .panel{padding:16px 20px 14px;max-width:560px}
html.short .panel h1{font-size:38px}
html.short .sub{margin:4px 0 10px;font-size:13px}
html.short .field{margin-bottom:10px;font-size:14px}
html.short .field input{padding:7px 12px;font-size:16px}
html.short .btns{flex-direction:row;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
html.short .cta{font-size:20px;padding:8px 30px}
html.short .ghost{font-size:15px;padding:7px 18px}
html.short .rows{gap:4px 12px;font-size:12px;margin-bottom:8px}
html.short .rows dt{font-size:14px}
html.short .tip{font-size:12px}
html.short .ranking li{padding:4px 10px;font-size:13px}

/* html.tiny is set from the game area size (see js/screen.js), so it also works when the game is rotated */
html.tiny .board{display:none}
html.tiny .rows,html.tiny .tip{display:none}

/* html.narrow is set from the game area size (see js/screen.js), so it also works when the game is rotated */
html.narrow .top{grid-template-columns:1fr auto}
html.narrow .center{grid-row:2;grid-column:1/-1}
html.narrow .board{display:none}
html.narrow .banner{padding:6px 16px 8px}
html.narrow .banner-title{font-size:20px}
html.narrow .gbar{width:170px}
html.narrow #mini{width:120px;height:80px}
html.narrow .hpbar{width:110px}
html.narrow .me-name{font-size:17px;max-width:120px}
html.narrow #avatar{width:42px;height:42px}
html.narrow .stats,html.narrow .roomchip{font-size:12px;gap:8px;padding:3px 10px}
html.narrow #feed{max-width:220px}
html.narrow #feed div{font-size:12px}
html.narrow .timer{font-size:18px;padding:0 14px}
html.narrow .bottom{grid-template-columns:1fr 1fr;row-gap:10px}
html.narrow #joy{width:120px;height:120px}
html.narrow #knob{width:50px;height:50px;margin:-25px 0 0 -25px}
html.narrow .throwbtn{width:92px;height:92px}
html.narrow .throwbtn .ball{width:40px;height:40px}
html.narrow .shieldbtn{width:58px;height:58px}
html.narrow .panel h1{font-size:42px}
html.narrow .ranking li{grid-template-columns:28px 1fr 48px 48px;padding:5px 8px}

/* ---------- buffs, item card, callouts, hurt flash ---------- */
.buffs{display:flex;gap:4px;margin-top:4px;min-height:0}
.buffs:empty{display:none}
.buff{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;padding:0 7px;border-radius:999px;color:#fff;font-variant-numeric:tabular-nums}
.buff.slow{background:#2bb3e0}.buff.cocoa{background:#b0652f}.buff.streak{background:#e0484a}
.itemcard{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:18px;pointer-events:none;animation:cardIn .35s cubic-bezier(.2,1.6,.4,1)}
.itemcard.out{animation:cardOut .3s ease-in forwards}
.itemcard canvas{width:48px;height:48px;border-radius:12px;background:rgba(230,240,252,.9)}
.itemcard b{display:block;font-family:var(--f-display);font-weight:400;font-size:19px;color:var(--c,var(--ink))}
.itemcard span{display:block;font-size:13px;font-weight:700;color:var(--ink-soft)}
@keyframes cardIn{from{transform:translate(-50%,20px) scale(.8);opacity:0}}
@keyframes cardOut{to{transform:translate(-50%,10px) scale(.9);opacity:0}}
.callout{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);font-family:var(--f-display);font-size:44px;letter-spacing:.06em;color:#fff;
  text-shadow:0 3px 0 var(--c,#e0484a),0 6px 14px rgba(30,60,100,.35);white-space:nowrap;pointer-events:none;animation:callIn .9s cubic-bezier(.2,1.5,.4,1) both}
@keyframes callIn{0%{transform:translate(-50%,-50%) scale(2.2);opacity:0}25%{transform:translate(-50%,-50%) scale(1);opacity:1}80%{opacity:1}100%{transform:translate(-50%,-70%) scale(1);opacity:0}}
.hurtfx{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(224,40,50,.55) 100%);transition:opacity .35s}
.hurtfx.on{opacity:1;transition:none}
.hurtfx.low{opacity:.6;animation:lowhp 1s infinite}
@keyframes lowhp{50%{opacity:.25}}
.banner.storm{background:linear-gradient(#8aa3bf,#5d7896);border-color:#e1ebf6}
.banner.drop{background:linear-gradient(#ff8a7a,#e0484a);border-color:#ffe0dc}
.banner.rain{background:linear-gradient(#ffd56b,#e3a313);border-color:#fff1c4}
.banner.rain .banner-title,.banner.drop .banner-title,.banner.storm .banner-title{text-shadow:0 2px 0 rgba(0,0,0,.18)}
.banner .crown.ev{background:#fff;clip-path:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:24px;text-align:center;color:var(--ink)}

/* ---------- knockout rewards ---------- */
.gem{display:inline-block;width:13px;height:15px;background:linear-gradient(135deg,#e6fbff 10%,#7fd6ff 45%,#3b8fe0 90%);clip-path:polygon(50% 0,100% 35%,78% 100%,22% 100%,0 35%);vertical-align:-2px}
.gems{display:inline-flex;align-items:center;gap:4px}
.gems b{color:#1d6fb8!important;font-variant-numeric:tabular-nums}
.gems.bump{animation:gemBump .25s ease-out}
@keyframes gemBump{40%{transform:scale(1.45)}}
.kostamp{position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;
  animation:koIn .5s cubic-bezier(.17,1.8,.4,1) both}
.kostamp.out{animation:koOut .35s ease-in forwards}
@keyframes koIn{0%{transform:translate(-50%,-50%) scale(2.6) rotate(-6deg);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(-3deg)}}
@keyframes koOut{to{transform:translate(-50%,-80%) scale(.9) rotate(-3deg);opacity:0}}
.ko-main{font-family:var(--f-display);font-size:72px;line-height:1;letter-spacing:.06em;color:#fff;
  text-shadow:0 4px 0 var(--koc,#e0484a),0 8px 0 rgba(0,0,0,.12),0 0 24px rgba(255,200,80,.6);-webkit-text-stroke:2px var(--koc,#e0484a)}
.ko-sub{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:22px;color:var(--ink);background:rgba(255,255,255,.92);padding:3px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(30,60,100,.2)}
.ko-gems{display:inline-flex;align-items:center;gap:4px;color:#1d6fb8;font-family:var(--f-num);font-weight:800}
.ko-badges{display:flex;gap:6px}
.ko-badges span{font-family:var(--f-display);font-size:15px;color:#fff;padding:2px 10px;border-radius:999px;background:var(--bc,#e0484a);box-shadow:0 3px 0 rgba(0,0,0,.15);animation:badgeIn .4s cubic-bezier(.2,1.8,.4,1) both}
@keyframes badgeIn{from{transform:scale(0)}}
.ko-combo{width:180px;height:6px;border-radius:3px;background:rgba(28,58,99,.25);overflow:hidden;margin-top:4px}
.ko-combo i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffd75e,#ff7a3c);transform-origin:left}
.hurtfx.gold{opacity:1;background:radial-gradient(ellipse at center,transparent 50%,rgba(255,200,60,.55) 100%);transition:none}
#feed div.kill{background:linear-gradient(90deg,#ffe9a8,#fff3cf);color:#7a4b00;font-weight:700}
#feed div.assist{background:rgba(214,240,255,.95)}
html.short .ko-main{font-size:40px}
html.short .ko-sub{font-size:15px;padding:2px 10px}
html.short .kostamp{top:30%}
html.short .ko-badges span{font-size:12px;padding:1px 8px}

/* ---------- emotes ---------- */
.emotewrap{position:relative;margin-bottom:12px}
.emotebtn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#fff,#d9e8f7);border:3px solid #fff;box-shadow:0 4px 10px rgba(30,90,170,.25)}
.emotebtn svg{width:26px;height:26px}
.emotes{position:absolute;right:0;bottom:58px;display:grid;grid-template-columns:repeat(4,auto);gap:6px;padding:8px;border-radius:16px;pointer-events:auto}
.emotes button{font-family:var(--f-display);font-size:15px;padding:6px 10px;border-radius:12px;background:#fff;color:var(--ink);white-space:nowrap}
.emotes button:active{background:#e3efff}

/* ---------- menu: two columns, profile card, settings ---------- */
.menupanel{max-width:820px;display:grid;grid-template-columns:1fr;gap:18px}
html.wide .menupanel{grid-template-columns:1.05fr 1fr;text-align:left}
html.wide .menupanel .mcol:first-child{text-align:center}
.mcol{display:flex;flex-direction:column;gap:12px;min-width:0}
.profile{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:rgba(230,240,252,.85);text-align:left}
.profile canvas{width:64px;height:64px;border-radius:16px;background:linear-gradient(#bcd8f4,#e9f3fd)}
.pname{display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:18px;white-space:nowrap;overflow:hidden}
.pname span{overflow:hidden;text-overflow:ellipsis}
.xpbar{height:8px;border-radius:4px;background:#c9d6e4;overflow:hidden;margin:5px 0}
#xpFill{display:block;height:100%;width:0;background:linear-gradient(90deg,#8fd0ff,var(--frost));border-radius:4px;transition:width .4s}
.coins{display:flex;align-items:center;gap:5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.coin{display:inline-block;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#f0b429 55%,#c8860c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.pbtns{display:flex;flex-direction:column;gap:6px}
.ghost.sm{font-size:14px;padding:5px 14px;position:relative}
.dot{position:absolute;right:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--danger);border:2px solid #fff}
.daily{font-family:var(--f-display);font-size:16px;color:#7a4b00;padding:9px 14px;border-radius:14px;background:linear-gradient(#fff3c4,#ffd96b);border:2px solid #fff;box-shadow:0 4px 0 #e3a313;animation:dailyPulse 1.6s infinite}
.daily:active{transform:translateY(2px);box-shadow:0 2px 0 #e3a313}
@keyframes dailyPulse{50%{filter:brightness(1.07)}}
.menupanel .rows{margin:0;max-width:none}
.settings{display:flex;gap:8px;justify-content:center}
html.wide .settings{justify-content:flex-start}
.toggle{font-family:var(--f-display);font-size:14px;padding:5px 14px;border-radius:999px;background:rgba(230,240,252,.95);color:var(--ink-soft);border:2px solid #cfe0f2}
.toggle.on{background:var(--frost);color:#fff;border-color:var(--frost)}
.toggle::before{content:"✕ ";font-family:var(--f-num)}
.toggle.on::before{content:"✓ "}

/* ---------- sheets: shop and missions ---------- */
.sheet{max-width:640px;text-align:left;display:flex;flex-direction:column;gap:12px;max-height:100%;overflow:hidden;margin-block:auto}
.sbody{display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-height:0;padding:2px}
.sheet header{display:flex;align-items:center;gap:12px}
.sheet h2{font-family:var(--f-display);font-weight:400;font-size:28px;margin:0;color:var(--frost-deep);flex:1}
.sheet h3{font-family:var(--f-display);font-weight:400;font-size:18px;margin:4px 0 0}
.x{width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1;background:rgba(230,240,252,.95);color:var(--ink)}
.tabs{display:flex;gap:6px}
.tabs button{font-family:var(--f-display);font-size:16px;padding:6px 16px;border-radius:999px;background:rgba(230,240,252,.95);color:var(--ink-soft)}
.tabs button.on{background:var(--frost);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;overflow-y:auto;min-height:0;padding:2px}
.item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 10px;border-radius:16px;background:rgba(230,240,252,.9);border:2px solid transparent;font-weight:700;color:var(--ink);text-align:center}
.item canvas{width:72px;height:72px}
.item .iname{font-family:var(--f-display);font-weight:400;font-size:15px}
.item .iprice{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--ink-soft)}
.item.equipped{border-color:var(--frost);background:#fff}
.item.equipped .iprice{color:var(--frost-deep)}
.item.cant .iprice{color:var(--danger)}
.mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mlist li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;padding:10px 12px;border-radius:14px;background:rgba(230,240,252,.9)}
.mlist .mt{font-family:var(--f-display);font-size:16px}
.mlist .mbar{grid-column:1;height:8px;border-radius:4px;background:#c9d6e4;overflow:hidden}
.mlist .mbar i{display:block;height:100%;background:linear-gradient(90deg,#8ee2a6,var(--hp))}
.mlist .mp{font-size:12px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.mlist button{grid-row:1/span 3;grid-column:2;font-family:var(--f-display);font-size:15px;padding:8px 14px;border-radius:999px;background:var(--gold);color:#5a3a00;display:flex;align-items:center;gap:5px}
.mlist button:disabled{background:#d4dde8;color:var(--ink-soft)}
.mlist li.done button:disabled{background:#cdeed6;color:#2a7a45}
.login{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.login li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;background:rgba(230,240,252,.9);font-size:12px;font-weight:800;color:var(--ink-soft)}
.login li b{font-size:14px;color:var(--ink)}
.login li.got{background:#cdeed6;color:#2a7a45}
.login li.today{outline:2px solid var(--gold);background:#fff6d6}

/* ---------- results rewards ---------- */
.rewards{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 14px}
.rewards .rw{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff6d6;font-weight:800;color:#7a4b00;animation:cardIn .4s both}
.rewards .rw.xp{background:#e3f0ff;color:var(--frost-deep)}
.rewards .rw.up{background:var(--frost);color:#fff}
.rewards .rw.ms{background:#cdeed6;color:#2a7a45}
.rewards .rw.gm{background:#dff4ff;color:#1d6fb8}
#resHome,#lostHome{margin-top:12px}

/* short screens (landscape phones) */
html.short .callout{font-size:32px}
html.short .itemcard{bottom:92px;padding:4px 12px 4px 4px}
html.short .itemcard canvas{width:38px;height:38px}
html.short .itemcard b{font-size:16px}
html.short .itemcard span{font-size:11px}
html.short .emotebtn{width:40px;height:40px}
html.short .emotebtn svg{width:22px;height:22px}
html.short .emotewrap{margin-bottom:8px}
html.short .emotes{bottom:48px}
html.short .emotes button{font-size:13px;padding:5px 8px}
html.short .menupanel{gap:10px}
html.short .mcol{gap:8px}
html.short .profile{grid-template-columns:52px 1fr auto;padding:6px 10px}
html.short .profile canvas{width:52px;height:52px}
html.short .daily{font-size:14px;padding:6px 10px}
html.short .sheet{padding:14px 16px}
html.short .sheet h2{font-size:22px}
html.short .grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
html.short .item canvas{width:56px;height:56px}
html.short .mlist li{padding:5px 10px;gap:3px 10px}
html.short .mlist .mt{font-size:14px}
html.short .mlist button{font-size:13px;padding:6px 10px}
html.short .sheet{gap:8px}
html.short .sheet h3{font-size:15px;margin:0}
html.short .login li{padding:3px 2px;font-size:11px}
html.short .login li b{font-size:12px}
html.short .sbody{gap:6px}
html.short .sbody .tip{font-size:11px}
html.short .tabs button{font-size:14px;padding:4px 12px}
html.short .x{width:30px;height:30px;font-size:18px}
html.short .rewards{margin-bottom:8px}
html.tiny .settings{display:none}
html.short #results .panel{padding:12px 18px}
html.short #results h1{font-size:30px}
html.short #results .sub{margin:2px 0 8px}
html.short .ranking{gap:3px}
html.short .ranking li{padding:3px 10px}
html.short .ranking li:nth-child(n+7):not(.me){display:none}
html.short #resHome{margin-top:8px;font-size:14px;padding:5px 16px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===================== growth system ===================== */
:root{--r0:#b8c2cf;--r1:#5cc96b;--r2:#3b8fe0;--r3:#9a5ad8;--r4:#f0a020}
.rar0{--rc:var(--r0)}.rar1{--rc:var(--r1)}.rar2{--rc:var(--r2)}.rar3{--rc:var(--r3)}.rar4{--rc:var(--r4)}
.stone{display:inline-block;width:14px;height:14px;background:linear-gradient(135deg,#f3e9ff,#9a5ad8 60%,#5b2d91);clip-path:polygon(50% 0,100% 30%,85% 100%,15% 100%,0 30%);vertical-align:-2px}

/* menu */
.menupanel{max-width:900px}
html.wide .menupanel{grid-template-columns:.95fr 1.1fr}
.menupanel h1{font-size:44px}
.clsTag{flex:none;font-family:var(--f-display);font-size:13px;color:#fff;background:#7a5536;padding:0 8px;border-radius:999px;line-height:20px}
.clsTag.c1{background:#2bb3e0}.clsTag.c2{background:#2fae78}
.pstats{display:flex;align-items:center;gap:12px;font-weight:800;font-variant-numeric:tabular-nums}
.pstats .power{color:#b8640a}
.pstats .power b{font-size:16px}
.pstats .coins,.pstats .stones{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
.profile{grid-template-columns:64px 1fr}
.mbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mbtns .ghost.sm{padding:6px 4px;font-size:14px}
.modes{gap:10px}
.mode{border-radius:18px;padding:10px 12px;background:rgba(230,240,252,.85);text-align:left}
.mode header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.mode h2{font-family:var(--f-display);font-weight:400;font-size:24px;margin:0;color:var(--frost-deep)}
.mode header span{font-size:12px;font-weight:700;color:var(--ink-soft)}
.mode .btns{flex-direction:row;justify-content:flex-start;margin:0;flex-wrap:wrap}
.mode.arena{background:linear-gradient(135deg,rgba(255,243,210,.95),rgba(255,226,170,.9))}
.mode.arena h2{color:#b8640a}
.maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.mapbtn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 10px;border-radius:14px;background:#fff;color:var(--ink);text-align:left;border:2px solid transparent;overflow:hidden}
.mapbtn b{font-family:var(--f-display);font-weight:400;font-size:17px}
.mapbtn span{font-size:12px;font-weight:700;color:var(--ink-soft)}
.mapbtn.rec{border-color:var(--frost)}
.mapbtn.rec::after{content:"推荐";position:absolute;right:6px;top:6px;font-family:var(--f-display);font-size:11px;color:#fff;background:var(--frost);padding:0 6px;border-radius:999px}
.mapbtn.locked{opacity:.5}
.mapbtn.locked span::before{content:"🔒 "}
.mapbtn.t1{background:linear-gradient(135deg,#fff,#e6f0fa)}
.mapbtn.t2{background:linear-gradient(135deg,#f3fff6,#d8efe0)}
.mapbtn.t3{background:linear-gradient(135deg,#f0fbff,#cfe8f7)}
.mapbtn.t4{background:linear-gradient(135deg,#fff4ee,#f7d9cc)}
.mapbtn.t5{background:linear-gradient(135deg,#f8f2ff,#e2d4f5)}
.toggle.help::before{content:"? "}
.field.inline{flex-direction:row;align-items:center;gap:10px;max-width:none;margin:0}
.field.inline input{flex:1;max-width:260px}

/* class pick */
.sheet.wide{max-width:900px}
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow-y:auto;min-height:0}
.classcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:18px;background:rgba(230,240,252,.92);border:3px solid transparent;color:var(--ink);text-align:center}
.classcard.on{border-color:var(--frost);background:#fff}
.classcard canvas{width:84px;height:84px}
.classcard b{font-family:var(--f-display);font-weight:400;font-size:22px}
.classcard .role{font-size:12px;font-weight:700;color:var(--ink-soft)}
.cbars{width:100%;display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:800;color:var(--ink-soft)}
.cbars div{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:6px}
.cbars i{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,#8fd0ff,var(--frost))}
.classcard .cpass{font-size:12px;font-weight:700;color:#7a4b00;background:#fff3cf;border-radius:10px;padding:3px 8px;line-height:1.35}
.classcard .csk{font-size:12px;font-weight:700;color:var(--ink-soft);line-height:1.5}
.classcard .cta{font-size:17px;padding:6px 22px;margin-top:2px}

/* bag */
.bagsheet{height:100%;max-height:640px}
.bagsheet header .coins{display:flex;align-items:center;gap:5px;font-weight:800}
.bagsheet header .coins .stone{margin-left:8px}
.bagbody{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:12px;min-height:0;flex:1}
.doll{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;background:rgba(230,240,252,.85);border-radius:18px;padding:8px}
.slots{display:flex;flex-direction:column;gap:8px}
.dollmid{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
#dollAvatar{width:110px;height:110px}
.dpower{font-weight:800;color:#b8640a;font-variant-numeric:tabular-nums}
.dpower b{font-size:20px}
.dsets{display:flex;flex-direction:column;gap:3px;width:100%}
.dsets span{font-size:11px;font-weight:800;color:#2a7a45;background:#d9f2e0;border-radius:8px;padding:1px 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gslot,.gtile{position:relative;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;padding:0;
  background:radial-gradient(circle at 50% 35%,#fff,color-mix(in srgb,var(--rc,#cfd8e3) 30%,#eef3f9));border:3px solid var(--rc,#cfd8e3);color:var(--rc,#9fb0c6)}
.gslot.empty{border-style:dashed;background:rgba(255,255,255,.6);color:#b3c2d3}
.gslot svg,.gtile svg{width:32px;height:32px}
.gslot .enh,.gtile .enh{position:absolute;right:2px;top:1px;font-size:11px;font-weight:800;color:#b8640a;text-shadow:0 0 3px #fff}
.gtile .up{position:absolute;left:2px;bottom:1px;width:0;height:0;border:6px solid transparent;border-bottom:9px solid #2fae78;border-top:0}
.gtile .setmark,.gslot .setmark{position:absolute;left:3px;top:3px;width:8px;height:8px;background:#2fae78;transform:rotate(45deg);border:1px solid #fff}
.gtile .newdot{position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:50%;background:var(--danger);border:2px solid #fff}
.gtile .lockic{position:absolute;right:3px;bottom:2px;font-size:10px}
.gtile.worn::after{content:"穿戴中";position:absolute;bottom:-1px;left:0;right:0;font-size:10px;font-weight:800;color:#fff;background:var(--frost);border-radius:0 0 10px 10px;line-height:14px}
.gtile.cantwear{filter:grayscale(.6);opacity:.75}
.bagright{display:flex;flex-direction:column;gap:8px;min-height:0}
.bagbar{display:flex;align-items:center;gap:8px}
.bagbar select{font:inherit;font-weight:700;color:var(--ink);padding:4px 8px;border-radius:10px;border:2px solid #cfe0f2;background:#fff}
.bagcount{font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-right:auto}
.ghost.xs{font-size:14px;padding:4px 12px}
.baggrid{display:grid;grid-template-columns:repeat(auto-fill,56px);gap:8px;overflow-y:auto;min-height:0;padding:4px 2px;align-content:start}
.statlist{overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.statlist .st{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:12px;background:rgba(230,240,252,.9);font-weight:700;color:var(--ink-soft)}
.statlist .st b{color:var(--ink);font-variant-numeric:tabular-nums}
.statlist h3{grid-column:1/-1;margin:6px 0 0;font-family:var(--f-display);font-weight:400;font-size:17px}
.statlist .setrow{grid-column:1/-1;padding:6px 10px;border-radius:12px;background:#eef8f1;font-size:13px;font-weight:700;color:var(--ink-soft);line-height:1.5}
.statlist .setrow b{color:#2a7a45}
.setrow .on{color:#2a7a45}
.setrow .off{color:#9fb0c6}

/* item details */
.overlay.pop{z-index:5;background:rgba(28,58,99,.35)}
.itemcardbig{max-width:380px;text-align:left;padding:16px 18px;border-top:6px solid var(--rc)}
.ititle{display:flex;align-items:center;gap:10px}
.ititle .gtile{flex:none}
.ititle h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:21px;color:var(--rc);text-shadow:0 1px 0 #fff;line-height:1.15}
.ititle h3 small{display:block;font-family:var(--f-num);font-size:12px;font-weight:700;color:var(--ink-soft)}
.imain{margin:10px 0 6px;font-size:20px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.imain .delta{font-size:14px;margin-left:8px}
.delta.pos{color:#2a9a50}.delta.neg{color:var(--danger)}
.iaff{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:2px;font-weight:700;color:#2f6fc0;font-size:14px}
.iset{border-radius:12px;background:#eef8f1;padding:6px 10px;font-size:13px;font-weight:700;color:var(--ink-soft);line-height:1.55;margin-bottom:8px}
.iset b{color:#2a7a45;font-family:var(--f-display);font-weight:400;font-size:15px}
.iset .on{color:#2a7a45}
.ireq{font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:10px}
.ireq.bad{color:var(--danger)}
.ibtns{display:flex;flex-wrap:wrap;gap:6px}
.ibtns button{flex:1;min-width:70px;font-family:var(--f-display);font-size:16px;padding:7px 10px;border-radius:999px;background:rgba(230,240,252,.95);color:var(--frost-deep);border:2px solid #cfe0f2}
.ibtns button.main{background:linear-gradient(#5fb0ff,var(--frost));color:#fff;border-color:#d9ecff}
.ibtns button.warn{color:#b8640a}
.ibtns button:disabled{opacity:.45}

/* salvage + enhance */
.salvbox,.enhbox{max-width:380px}
.salvbox h3,.enhbox h3{margin:4px 0 6px;font-family:var(--f-display);font-weight:400;font-size:20px;color:var(--frost-deep)}
.salvopts{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.salvopts button{font-family:var(--f-display);font-size:15px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink);border:2px solid var(--rc,#cfe0f2)}
.salvopts button.on{background:var(--frost);color:#fff;border-color:var(--frost)}
.enhrow{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0}
.enhrow .gtile{width:72px;height:72px}
.enhlv{font-family:var(--f-num);font-size:30px;font-weight:800;color:#b8640a}
.enhlv i{font-style:normal;color:var(--ink-soft);font-size:22px;margin:0 6px}
.enhinfo{display:grid;grid-template-columns:auto auto;gap:4px 14px;justify-content:center;font-weight:700;color:var(--ink-soft);margin-bottom:10px;text-align:left}
.enhinfo b{color:var(--ink);font-variant-numeric:tabular-nums}
.enhinfo b.lack{color:var(--danger)}
.enhwarn{font-size:13px;font-weight:700;color:var(--danger);margin:0 0 8px}
.enhres{height:34px;font-family:var(--f-display);font-size:26px;margin-bottom:4px}
.enhres.up{color:#e3a313;animation:callIn .8s both}
.enhres.fail{color:var(--ink-soft);animation:nudge .3s}
.enhres.down{color:var(--danger);animation:nudge .3s}
.enhbox .btns{flex-direction:row;justify-content:center;margin:0}
.enhbox .cta{font-size:20px;padding:8px 30px}

/* skills */
.passive{margin:0;padding:8px 12px;border-radius:14px;background:#fff3cf;color:#7a4b00;font-weight:700;font-size:14px}
.sklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sklist li{display:grid;grid-template-columns:52px 1fr;gap:4px 12px;align-items:center;padding:8px 10px;border-radius:14px;background:rgba(230,240,252,.9)}
.sklist li.locked{opacity:.55}
.sklist .skico{grid-row:1/span 2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#bfe2ff,#4b9be6);border:3px solid #e3f2ff;color:#fff}
.sklist .skico svg{width:28px;height:28px}
.sklist li.ult .skico{background:radial-gradient(circle at 40% 30%,#ffe9a0,var(--gold) 60%,#c8860c)}
.sklist .skname{font-family:var(--f-display);font-size:18px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sklist .skname small{font-family:var(--f-num);font-size:12px;font-weight:700;color:var(--ink-soft)}
.sklist .skdesc{font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1.45}

/* HUD: skills */
.actions{position:relative}
.aimcancel{position:absolute;right:6px;bottom:236px;padding:10px 22px;white-space:nowrap;border-radius:999px;background:rgba(20,30,50,.6);color:#fff;font-weight:800;font-size:16px;letter-spacing:2px;border:2px solid rgba(255,255,255,.65);pointer-events:none;transition:transform .1s}
.aimcancel.hot{background:#e0484a;border-color:#fff;transform:scale(1.12)}
html.short .aimcancel{bottom:196px;padding:8px 18px;font-size:14px}
.skillbtn{position:absolute;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;padding:0;
  background:radial-gradient(circle at 40% 30%,#bfe2ff,#4b9be6);border:3px solid #e3f2ff;box-shadow:0 4px 12px rgba(30,90,170,.35);color:#fff;overflow:hidden}
.skillbtn .ico{display:grid;place-items:center;width:30px;height:30px}
.skillbtn .ico svg{width:30px;height:30px}
.skillbtn .cdv{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(20,40,70,.62) var(--cd,0%),transparent 0);pointer-events:none}
.skillbtn .cdt{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
.skillbtn.locked{filter:grayscale(1);opacity:.55}
.skillbtn.locked .cdt{font-size:12px}
.skillbtn.down{transform:scale(.92)}
.skillbtn.ready{animation:skReady .4s ease-out}
@keyframes skReady{40%{transform:scale(1.15);box-shadow:0 0 0 6px rgba(255,255,255,.6)}}
.skillbtn.ult{width:66px;height:66px;background:radial-gradient(circle at 40% 30%,#ffe9a0,var(--gold) 60%,#c8860c);border-color:#fff3c8;overflow:visible}
.skillbtn.ult .rage{position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(#ff7a3c var(--rg,0%),rgba(255,255,255,.35) 0);-webkit-mask:radial-gradient(circle,transparent 61%,#000 62%);mask:radial-gradient(circle,transparent 61%,#000 62%);pointer-events:none}
.skillbtn.ult.full{animation:pulseUlt 1s infinite}
.skillbtn.ult.empty{filter:saturate(.35) brightness(.95)}
@keyframes pulseUlt{50%{box-shadow:0 0 0 8px rgba(255,170,60,.45),0 4px 12px rgba(160,90,10,.4)}}
.skillbtn.s0{right:132px;bottom:0}
.skillbtn.s1{right:116px;bottom:76px}
.skillbtn.s2{right:44px;bottom:126px}
.skillbtn.ult{right:194px;bottom:58px}
.actions .shieldbtn{position:absolute;right:200px;bottom:-6px;margin:0}
.actions .emotewrap{position:absolute;right:120px;bottom:150px;margin:0}
.actions{width:118px;height:118px}
html.short .skillbtn{width:48px;height:48px}
html.short .skillbtn .ico,html.short .skillbtn .ico svg{width:24px;height:24px}
html.short .skillbtn .cdt{font-size:15px}
html.short .skillbtn.ult{width:54px;height:54px}
html.short .skillbtn.s0{right:104px;bottom:0}
html.short .skillbtn.s1{right:92px;bottom:62px}
html.short .skillbtn.s2{right:34px;bottom:102px}
html.short .skillbtn.ult{right:156px;bottom:52px}
html.short .actions .shieldbtn{right:160px;bottom:-4px;width:50px;height:50px}
html.short .actions .shieldbtn svg{width:24px;height:24px}
html.short .actions .emotewrap{right:98px;bottom:122px}
html.short .actions{width:96px;height:96px}
html.narrow .skillbtn.s0{right:98px}
html.narrow .skillbtn.ult{right:150px}
html.narrow .actions .shieldbtn{right:152px}
html.narrow .actions{width:92px;height:92px}

/* HUD: field */
.fieldchip{display:flex;align-items:baseline;gap:10px;padding:3px 16px;border-radius:999px}
.fieldchip b{font-family:var(--f-display);font-weight:400;font-size:20px;color:var(--frost-deep)}
.fieldchip span{font-weight:800;font-size:13px;color:var(--ink-soft)}
.bosscard{display:flex;flex-direction:column;gap:1px;padding:5px 12px;border-radius:14px;min-width:150px;text-align:left}
.bosscard b{font-family:var(--f-display);font-weight:400;font-size:15px;color:#b8640a}
.bosscard span{font-size:12px;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.bosscard.alive b{color:var(--danger)}
.xpline{position:absolute;left:50%;transform:translateX(-50%);bottom:max(4px,var(--safe-b));display:flex;align-items:center;gap:8px;width:min(46%,420px);pointer-events:none}
.xpline b{font-size:12px;font-weight:800;color:var(--frost-deep);text-shadow:0 0 3px #fff}
.xptrack{flex:1;height:7px;border-radius:4px;background:rgba(28,58,99,.25);overflow:hidden}
#xpLineFill{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd75e,#f0a020);transition:width .3s}
.xpline span{font-size:11px;font-weight:800;color:var(--ink-soft);text-shadow:0 0 3px #fff;font-variant-numeric:tabular-nums}
.lootcards{position:absolute;left:50%;top:22%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.lootcard{display:flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:14px;background:rgba(255,255,255,.92);border:2px solid var(--rc);box-shadow:0 4px 14px rgba(30,60,100,.25);animation:cardIn2 .35s cubic-bezier(.2,1.6,.4,1)}
.lootcard .gtile{width:36px;height:36px;border-width:2px;border-radius:10px}
.lootcard .gtile svg{width:22px;height:22px}
.lootcard b{font-family:var(--f-display);font-weight:400;font-size:16px;color:var(--rc)}
.lootcard span{font-size:12px;font-weight:700;color:var(--ink-soft)}
.lootcard.out{animation:cardOut2 .3s ease-in forwards}
.lootcard.rar4{box-shadow:0 0 18px rgba(240,160,32,.8)}
@keyframes cardIn2{from{transform:translateY(16px) scale(.8);opacity:0}}
@keyframes cardOut2{to{transform:translateY(-10px) scale(.9);opacity:0}}
.rewards .rw.item{background:#fff;border:2px solid var(--rc);color:var(--rc)}
html.short .xpline{bottom:max(2px,var(--safe-b))}
html.short .bosscard{min-width:120px;padding:3px 10px}
html.short .fieldchip b{font-size:16px}
html.short .lootcard b{font-size:14px}

/* short screens: menu and sheets */
html.short .menupanel h1{font-size:30px}
html.short .mode{padding:6px 10px}
html.short .mode h2{font-size:19px}
html.short .mode header{margin-bottom:4px}
html.short .mapbtn{padding:4px 8px}
html.short .mapbtn b{font-size:15px}
html.short .mbtns .ghost.sm{font-size:13px;padding:4px 2px}
html.short .classes{gap:6px}
html.short .classcard{padding:6px;gap:3px}
html.short .classcard canvas{width:56px;height:56px}
html.short .classcard b{font-size:17px}
html.short .classcard .csk{display:none}
html.short .classcard .cpass{font-size:11px}
html.short .bagbody{gap:8px}
html.short .gslot,html.short .gtile{width:46px;height:46px;border-radius:12px}
html.short .gslot svg,html.short .gtile svg{width:26px;height:26px}
html.short .baggrid{grid-template-columns:repeat(auto-fill,46px);gap:6px}
html.short #dollAvatar{width:78px;height:78px}
html.short .slots{gap:5px}
html.short .doll{padding:6px;gap:6px}
html.short .itemcardbig{padding:10px 14px}
html.short .imain{margin:6px 0 4px;font-size:17px}
html.short .ititle h3{font-size:18px}
html.short .sklist li{padding:5px 8px}
html.short .sklist .skico{width:42px;height:42px}
html.short .sklist .skdesc{font-size:12px}
html.narrow .bagbody{grid-template-columns:1fr}
html.narrow .doll{display:none}
html.narrow .classes{grid-template-columns:1fr}

/* fixes after the first phone screenshots */
.toggle,.mbtns .ghost.sm{white-space:nowrap}
.baggrid>.tip{grid-column:1/-1}
.ititle h3{color:color-mix(in srgb,var(--rc) 80%,#1c3a63)}
.itemcardbig.rar0 .ititle h3,.lootcard.rar0 b{color:#6b7a8f}
.mapbtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html.short .menupanel h1{font-size:26px}
html.short .profile{padding:5px 8px;gap:8px}
html.short .profile canvas{width:46px;height:46px}
html.short .pstats{gap:8px;font-size:13px}
html.short .daily{font-size:13px;padding:5px 8px;animation:none}
html.short .maps{grid-template-columns:repeat(3,1fr);gap:5px}
html.short .mapbtn{padding:3px 8px;border-radius:11px}
html.short .mapbtn .boss{display:none}
html.short .mapbtn.rec::after{top:3px;right:4px;font-size:10px}
html.short .mode .cta{font-size:19px;padding:6px 26px}
html.short .mode .ghost{font-size:14px;padding:5px 14px}
html.short .mode header span{font-size:11px}
html.short .settings .toggle{font-size:12px;padding:3px 10px}
html.short .classcard .cbars,html.short .classcard .role{display:none}
html.short .classcard .cta{font-size:15px;padding:4px 18px}
html.short .field.inline{font-size:14px}
html.short .field.inline input{padding:4px 10px;font-size:15px}
html.short #classPick .sheet{gap:6px}
html.short #cpTip{font-size:11px}
.mapbtn .boss{font-style:normal}

.xpline{position:static;transform:none;width:300px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.7)}
html.short .xpline{width:230px;padding:1px 8px}
.mapbtn.rec::after{content:"";right:8px;top:8px;width:9px;height:9px;padding:0;border-radius:50%;background:var(--frost);box-shadow:0 0 0 3px rgba(47,127,214,.25)}
.pstats span,.pstats b{white-space:nowrap}

/* ---------- the connected world ---------- */
.mode.world{background:linear-gradient(135deg,rgba(225,240,255,.97),rgba(200,225,250,.92))}
.mode.world .cta{font-size:26px;padding:10px 46px}
.where{margin:0 0 8px;font-weight:800;color:var(--ink)}
.route{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px;font-weight:800;color:var(--ink-soft)}
.route li{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.85)}
.route li.here{background:var(--frost);color:#fff}
.route li.locked{opacity:.5}
.route li+li::before{content:"→ ";color:var(--ink-soft)}
.mode.arena .btns .ghost{font-size:15px;padding:6px 16px}
.talkbtn{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);pointer-events:auto;font-family:var(--f-display);font-size:20px;color:#7a4b00;padding:8px 22px;border-radius:999px;
  background:linear-gradient(#fff3c4,#ffd96b);border:3px solid #fff;box-shadow:0 5px 0 #e3a313,0 8px 18px rgba(120,80,0,.25);animation:dailyPulse 1.2s infinite}
.talkbtn:active{transform:translate(-50%,3px);box-shadow:0 2px 0 #e3a313}
html.short .talkbtn{bottom:96px;font-size:17px;padding:6px 18px}
.npcbox{position:relative;max-width:420px;text-align:left}
.npcx{position:absolute;top:12px;right:12px}
.npcbox h3{padding-right:40px}
.npcbox h3{margin:0 0 4px;font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--frost-deep)}
.npcbox .say{margin:0 0 10px;font-weight:700;color:var(--ink-soft);line-height:1.5}
.npcbox .tplist{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto}
.acctbox{width:min(420px,92vw);max-height:92vh;overflow-y:auto}
.acctbox h4{margin:12px 0 6px;font-family:var(--f-display);font-weight:400;font-size:18px;color:var(--frost-deep)}
.acctbox .acctrow{display:flex;align-items:center;gap:8px;margin:6px 0}
.acctbox .acctrow .field{flex:1}
.acctbox .acctrow .field input{min-width:0;width:100%}
.acctbox .cta.small{padding:8px 14px;font-size:15px;white-space:nowrap}
.acctbox .say.warn{color:#b8640a}
.linkbtn{display:block;margin:8px auto 0;padding:6px 10px;border:0;background:none;font:inherit;font-weight:800;color:var(--frost-deep);text-decoration:underline;cursor:pointer}
.acctbox .hint{margin:2px 0 0;font-size:12px;font-weight:700;color:var(--ink-soft)}
.tpbtn{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:8px 12px;border-radius:14px;background:#fff;border:2px solid #cfe0f2;color:var(--ink);text-align:left}
.tpbtn b{font-family:var(--f-display);font-weight:400;font-size:18px}
.tpbtn span{font-size:12px;font-weight:700;color:var(--ink-soft)}
.tpbtn em{grid-row:1/span 2;grid-column:2;font-style:normal;font-weight:800;color:#b8640a;display:flex;align-items:center;gap:4px}
.tpbtn:disabled{opacity:.5}
.npcbox .btns{flex-direction:row;justify-content:center;margin:10px 0 0;flex-wrap:wrap}
.warpfade{position:absolute;inset:0;z-index:9;display:grid;place-items:center;background:radial-gradient(circle,rgba(230,242,255,.92),rgba(150,190,235,.97));animation:fadeIn .25s both}
.warpfade b{font-family:var(--f-display);font-weight:400;font-size:34px;color:var(--frost-deep);letter-spacing:.08em}
@keyframes fadeIn{from{opacity:0}}
html.short .mode.world .cta{font-size:21px;padding:7px 32px}
html.short .route{margin-top:6px}

/* start screen: profile and one way in */
.startpanel{max-width:440px;display:flex;flex-direction:column;gap:12px}
.startpanel .where{margin:0;text-align:center}
.startpanel .btns{margin:0}
.startpanel .err{margin:0}
.startpanel .a2hs{margin:0 auto}
html.short .startpanel{gap:8px;max-width:440px}

/* in-game menu (☰) */
#gmBtn{position:relative}
#gmBtn .dot{right:-3px;top:-3px;width:9px;height:9px}
.gmenu{max-width:360px;display:flex;flex-direction:column;gap:12px;padding:18px}
.gmgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gmi:not(.toggle):not(.ghost){position:relative;font-family:var(--f-display);font-size:20px;color:var(--frost-deep);background:#fff;padding:12px 8px;border-radius:16px;border:2px solid #cfe0f2}
.gmi:not(.toggle):not(.ghost):active{transform:translateY(2px)}
.gmenu .settings,html.wide .gmenu .settings{justify-content:center}

/* phones in landscape: the teleporter's five maps in two columns so they all fit */
html.short .npcbox{max-width:560px}
html.short .npcbox .tplist{display:grid;grid-template-columns:1fr 1fr;max-height:calc(100vh - 150px)}

/* server-wide announcement (orange drops) */
.annbar{position:absolute;left:50%;top:calc(var(--safe-t) + 54px);transform:translateX(-50%);z-index:6;max-width:80%;padding:6px 18px;border-radius:999px;
  background:linear-gradient(90deg,rgba(120,70,0,.85),rgba(200,130,10,.92),rgba(120,70,0,.85));color:#fff6d8;font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 0 18px rgba(240,160,32,.7);pointer-events:none}
.annbar.go{animation:annIn .4s both}
@keyframes annIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
#feed div.gold{color:#b8640a;font-weight:800}

/* quick equip */
#bagHudBtn{position:relative}
#bagHudBtn .dot{right:-3px;top:-3px;width:9px;height:9px}
.lootcards{pointer-events:none}
.lootcard .lcwear{pointer-events:auto;margin-left:6px;font-family:var(--f-display);font-size:15px;color:#fff;background:linear-gradient(#5cd07a,#2fae58);border:0;border-radius:999px;padding:5px 12px;box-shadow:0 3px 0 #1e7a3c}
.lootcard .lcwear:disabled{opacity:.8}
.lootcard.worn .lcwear{background:#9aa8b8;box-shadow:none}
.ghost.xs.main{background:var(--frost);color:#fff;border-color:var(--frost)}

/* consumables: three quick slots at the bottom centre */
.quickbar{justify-self:center;display:flex;gap:10px;margin-bottom:4px}
.quickbar[hidden]{display:none}
.qslot{position:relative;width:54px;height:54px;padding:0;border-radius:14px;background:rgba(255,255,255,.88);border:2px solid #cfe0f2;box-shadow:0 3px 8px rgba(40,80,140,.25);overflow:hidden}
.qslot:active{transform:translateY(2px)}
.qslot .qi{position:absolute;inset:5px;display:grid;place-items:center}
.qslot .qi svg{width:100%;height:100%}
.qslot .qi .plus{font-size:26px;font-weight:800;color:#9ab3cf}
.qslot .qn{position:absolute;right:3px;bottom:1px;font-family:var(--f-num);font-size:14px;color:#1c3a63;text-shadow:0 0 3px #fff,0 0 3px #fff}
.qslot .qk{position:absolute;left:4px;top:1px;font-style:normal;font-size:10px;font-weight:800;color:#8aa2bd}
.qslot .qcd{position:absolute;inset:0;background:conic-gradient(rgba(28,58,99,.62) var(--p,0%),transparent 0);pointer-events:none}
.qslot.empty .qi{opacity:.35;filter:grayscale(1)}
html.short .qslot{width:46px;height:46px;border-radius:12px}
html.short .quickbar{gap:8px}
html.narrow .quickbar{grid-row:1;grid-column:1/-1}
@media (pointer:coarse){.qslot .qk{display:none}}

/* consumables in the shop and the bag */
.conslist{display:flex;flex-direction:column;gap:8px;overflow-y:auto;text-align:left}
.consrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:#fff;border:2px solid #e2ecf7}
.consico{position:relative;flex:none;width:44px;height:44px}
.consico svg{width:100%;height:100%}
.consico .n{position:absolute;right:-4px;bottom:-4px;min-width:20px;padding:0 4px;border-radius:999px;background:var(--frost);color:#fff;font-size:12px;text-align:center}
.constxt{flex:1;min-width:0;display:flex;flex-direction:column}
.constxt b{font-family:var(--f-display);font-weight:400;font-size:17px;color:var(--ink)}
.constxt small{font-size:12px;font-weight:700;color:var(--ink-soft)}
.constxt em{font-style:normal;font-size:12px;font-weight:700;color:var(--frost-deep)}
.consbtns{flex:none;display:flex;gap:6px;align-items:center}
.consbtns button{font-family:var(--f-display);font-size:14px;border-radius:999px;padding:6px 12px;border:2px solid #cfe0f2;background:rgba(230,240,252,.95);color:var(--frost-deep)}
.consbtns .buy{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(#fff3c4,#ffd96b);border-color:#f0c040;color:#7a4b00}
.consbtns .buy small{font-size:11px;opacity:.75}
.consbtns .buy:disabled{opacity:.45}
.consbtns .use{background:var(--frost);color:#fff;border-color:var(--frost)}
.consbtns .qset{width:30px;padding:6px 0}
.consbtns .qset.on{background:#2fae78;color:#fff;border-color:#2fae78}
/* keep the bottom row's columns fixed even when the quick slots are hidden (arena) */
.bottom #joy{grid-column:1}
.bottom .quickbar{grid-column:2}
.bottom .actions{grid-column:3}
html.narrow .bottom .actions{grid-column:2}
html.narrow .bottom .quickbar{grid-column:1/-1}

/* HUD v2: class and power on the card, signal bars, the quest tracker */
.me-name .clsTag{font-size:11px;line-height:17px;padding:0 6px}
.mepow{font-size:12px;font-weight:800;color:#b8640a;line-height:1.2}
.mepow b{font-size:14px;font-variant-numeric:tabular-nums}
.iconbtn.net{display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:4px 6px}
.iconbtn.net i{display:block;width:4px;border-radius:1px;background:#c3cfdd}
.iconbtn.net i:nth-child(1){height:5px}.iconbtn.net i:nth-child(2){height:9px}.iconbtn.net i:nth-child(3){height:13px}
.iconbtn.net.q3 i{background:#2fae78}
.iconbtn.net.q2 i:nth-child(-n+2){background:#e0a020}
.iconbtn.net.q1 i:nth-child(1){background:#e0484a}
.quest{display:flex;flex-direction:column;align-items:flex-start;gap:1px;max-width:200px;padding:6px 10px;border-radius:12px;text-align:left;pointer-events:auto;cursor:pointer}
.quest b{font-family:var(--f-display);font-weight:400;font-size:14px;color:#b8640a}
.quest span{font-size:12px;font-weight:700;color:var(--ink);line-height:1.35}
.quest em{font-style:normal;font-size:12px;font-weight:800;color:var(--frost-deep)}
.quest.done{box-shadow:0 0 0 2px #f0b429,0 0 14px rgba(240,180,41,.6)}
html.short .quest{max-width:170px;padding:4px 8px}
html.short .quest span{font-size:11px}
html.short .mepow{font-size:11px}

/* Actionable onboarding, shared by mouse and touch. */
.quest{width:230px;max-width:230px;cursor:default;padding:10px 12px}
.questhead{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%}
.questhead b{font-size:15px}
.questhead button{font-size:11px;padding:4px 7px;border-radius:7px;background:#e0edf9;color:#24568b;flex:none}
#questBody{width:100%;display:flex;flex-direction:column;gap:5px;margin-top:5px}
#questHint{font-size:11px;line-height:1.45;color:var(--ink-soft);margin:0}
.questdirection{display:flex;gap:7px;align-items:center;color:#9a5900}
#questArrow{display:inline-block;font-size:20px;font-style:normal;line-height:1}
#questDirection{font-size:11px;color:#9a5900}
#questAction{border-radius:8px;padding:7px 10px;background:#2568a5;color:white;font-weight:800;font-size:12px;min-height:32px}
html.short .quest{width:190px;max-width:190px;padding:5px 8px}
html.short #questHint{display:none}
html.short #questBody{gap:3px}

/* Adventure HUD: character growth first, arena counters only in arena mode. */
.mepow{display:flex;align-items:baseline;gap:6px;pointer-events:auto;background:transparent;padding:2px 0;text-align:left;color:#94520a;font-size:12px}
.mepow b{font-size:22px;line-height:1.1;color:#8c4904}
.mepow small{font-size:10px;color:#56769c;font-weight:600}
.me-name{display:grid;grid-template-columns:auto 1fr;gap:3px 6px;max-width:180px}
#meCls{justify-self:start}
#meName{grid-column:1/-1;font-size:13px;line-height:1.2;letter-spacing:0}
#hpNum{font-size:12px;top:1px;right:8px}
.roomchip{gap:7px}
.roomchip .navbtn{width:auto;min-width:44px;height:28px;display:flex;gap:3px;padding:0 5px}
.roomchip .navbtn svg{width:17px;height:17px}
.navlabel{font-size:11px;font-weight:800}
.fieldchip{flex-wrap:wrap;justify-content:center;gap:3px 8px;max-width:260px;border-radius:13px;padding:5px 12px}
.fieldchip small{font-size:11px;color:#8c4904;background:#fff0ce;border-radius:5px;padding:1px 5px}
.fieldchip small.safe{color:#247650;background:#d9f3e5}
#hud .xpline{position:absolute;left:50%;bottom:max(8px,var(--safe-b));transform:translateX(-50%);width:min(42%,420px);padding:3px 10px;background:rgba(255,255,255,.9)}
#hud .xpline b,#hud .xpline span{white-space:nowrap;font-size:11px}
#hud .xptrack{min-width:30px;flex:1}
#hud .talkbtn{bottom:200px;z-index:8;max-width:230px}
html.short #hud .talkbtn{bottom:105px}
html.short .me{padding:5px 9px 5px 5px;gap:6px}
html.short .mepow b{font-size:18px}
html.short #meName{font-size:11px}
html.short .roomchip{gap:5px}
html.short .roomchip .navbtn{min-width:40px;height:24px}
html.short #hud .xpline{bottom:3px}
html.short .fieldchip{max-width:190px}
html.short .questhead b{font-size:13px}
html.tiny .quest{width:175px;max-width:175px}
html.tiny .questdirection{display:none}
html.narrow .me-name{max-width:135px}
html.narrow .mepow b{font-size:20px}
html.narrow .fieldchip{max-width:185px;justify-content:flex-start}
html.narrow .fieldchip b{font-size:16px}
html.narrow .fieldchip span{font-size:11px}
html.narrow #hud .xpline{width:70%;bottom:5px}
html.narrow .quickbar{position:absolute;left:50%;bottom:175px;transform:translateX(-50%);gap:6px}
html.narrow #hud .talkbtn{bottom:245px}
html.narrow .doll{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:12px;padding:8px}
html.narrow #dollAvatar{width:60px;height:60px}
html.narrow .gslot{width:40px;height:40px}
html.narrow .gslot svg{width:24px;height:24px}
html.narrow .slots{gap:4px}

.roomchip .navbtn{flex-shrink:0;min-width:49px;white-space:nowrap}
.navlabel{white-space:nowrap;flex-shrink:0}
.roomchip .navbtn svg{flex-shrink:0}
html.narrow .roomchip{gap:5px;padding:3px 7px}
/* Leave a dedicated strip for XP below the consumable shortcuts. */
.quickbar{margin-bottom:28px}
html.narrow .quickbar{margin-bottom:0}
html.narrow .bagbody{grid-template-rows:auto minmax(0,1fr)}
html.narrow .doll{min-height:145px}
html.narrow .bagsheet header{gap:8px;flex-wrap:wrap}
html.narrow .bagsheet h2{font-size:20px;white-space:nowrap;flex:none}
html.narrow .bagsheet .tabs{gap:4px}
html.narrow .bagsheet .tabs button{padding:5px 9px;font-size:14px}
html.narrow .bagsheet header .coins{font-size:12px;margin-left:auto;gap:3px}
html.narrow .bagsheet header .x{flex-shrink:0}
html.narrow .roomchip{display:grid;grid-template-columns:repeat(4,28px);gap:5px;width:max-content}
html.narrow .roomchip .navbtn{grid-column:span 2;justify-content:center;width:61px}
html.narrow .bottom{margin-bottom:26px}
html.narrow .quickbar{left:34%;bottom:185px}

.perf{align-self:start;padding:4px 9px;border-radius:8px;color:#246349;font:700 11px var(--f-num);font-variant-numeric:tabular-nums;pointer-events:auto}
.perf.poor{color:#ae4d19;background:#fff1da}
#perfDetails{white-space:pre-wrap;font:14px/1.8 var(--f-num);margin:0}
html.short .perf{font-size:10px;padding:2px 7px}
.partyPanel{position:absolute;z-index:45;left:50%;top:50%;transform:translate(-50%,-50%);width:min(580px,90%);max-height:82%;overflow:auto;padding:18px;border-radius:18px;pointer-events:auto;touch-action:pan-y}
.partyPanel header{display:flex;justify-content:space-between;align-items:center;gap:12px}.partyPanel p{font-size:12px;line-height:1.6}.partyPanel button{border:1px solid #a9c9df;border-radius:8px;background:#f6fbff;color:#1c3a63;padding:7px 10px;margin:4px;cursor:pointer}.partyPanel small{display:block;margin:6px;line-height:1.5}.partyPanel #partyContent>div{padding:8px 0;border-bottom:1px solid #d3e2ed;font-size:13px}#partyBtn{pointer-events:auto;padding:6px 12px;border-radius:10px;color:var(--ink);font:inherit;cursor:pointer}
/* NPC prompts belong to the world, beneath every open game panel. */
#stage:has(.overlay:not([hidden]),.partyPanel:not([hidden])) #talkBtn{visibility:hidden}
.voiceRelay{display:block;font-size:12px;margin:8px 4px}.voiceRelay input{vertical-align:middle}#voicePeers>div{font-size:12px;margin:4px 0}.partyPanel audio{max-width:100%}

/* Keep combat controls anchored when an expanded quest grows. */
#hud .bottom{position:absolute;left:max(16px,var(--safe-l));right:max(16px,var(--safe-r));bottom:max(22px,var(--safe-b));margin-bottom:0}
#hud .right{max-height:calc(var(--stage-height,100dvh) - 230px);min-height:0}
#hud .quest{min-height:0;flex-shrink:1;overflow:hidden}
#questBody{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;pointer-events:auto}
#partyBtn{align-self:flex-start;width:auto;min-height:32px;padding:4px 12px;font-size:12px;font-weight:700}
html.short #hud .right{max-height:calc(var(--stage-height,100dvh) - 140px)}
html.short #hud .bottom{bottom:max(18px,var(--safe-b))}

/* Quest card collapsed: goal and progress only. */
#questBox.compact #questHint,#questBox.compact .questdirection,#questBox.compact #questAction{display:none}
#questBox.compact #questBody{gap:2px}
#questBox.compact #questText{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#questBody > *{flex-shrink:0}
#questBox.compact #questText{line-height:1.45}
#questBox.compact{padding:4px 8px}
#questBox.compact .questhead button{padding:2px 6px;font-size:10px}
#questBox.compact #questBody{margin-top:2px}
#questBox.compact #questProg{line-height:1.3}

/* Enhance panel: stacked on tall screens, side by side on phones in landscape. */
.enhbody{display:flex;flex-direction:column;align-items:center}
.enhright{display:flex;flex-direction:column;align-items:center}
.enhbox .btns{flex-direction:row;justify-content:center;gap:10px;margin:4px 0 0}
.enhres:empty{height:0;margin:0}
html.short .enhbox{max-width:600px;padding:12px 18px}
html.short .enhbox h3{margin:0 0 2px;font-size:18px}
html.short .enhbox > .tip{font-size:11px;margin:0 0 6px}
html.short .enhbody{flex-direction:row;align-items:center;justify-content:center;gap:22px}
html.short .enhrow{margin:0}
html.short .enhres{height:auto;font-size:20px}
html.short .enhinfo{margin-bottom:6px}
html.short .enhbox .cta{font-size:20px;padding:8px 30px}
.enhres.up{animation:enhUp .5s both}
@keyframes enhUp{0%{transform:scale(1.8);opacity:0}60%{transform:scale(.95);opacity:1}100%{transform:scale(1);opacity:1}}

/* Party panel v2: cards instead of lines of text. */
.partyPanel{width:min(560px,92%);padding:14px 16px}
.partyPanel header{justify-content:flex-start}
.partyPanel header b{font-family:var(--f-display);font-weight:400;font-size:20px;color:var(--frost-deep)}
.partyPanel .pcount{font-style:normal;font-weight:800;font-size:12px;color:#fff;background:var(--frost);border-radius:999px;padding:1px 8px}
.partyPanel header .x{margin:0 0 0 auto;padding:0;border:0}
.prules{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.prules span{font-size:11px;font-weight:800;color:#24568b;background:#e6f1fb;border-radius:999px;padding:3px 9px}
.pinvite{display:flex;align-items:center;gap:6px;padding:8px 10px;margin-bottom:8px;border-radius:12px;background:linear-gradient(90deg,#fff3c4,#ffe7a0);animation:dailyPulse 1.6s infinite}
.pinvtext{flex:1;font-weight:800;color:#7a4b00;font-size:13px}
.partyPanel .pok{background:#2fae78;color:#fff;border-color:#2fae78;font-weight:800}
.partyPanel .pno{background:#fff;color:#a33;border-color:#f1c4c4}
.pmembers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.pmember{display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;background:#fff;border:2px solid #e2ecf7}
.pmember.me{border-color:#9fcdf7}
.pmember.off{opacity:.5}
.pbadge{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;font-family:var(--f-display);font-size:17px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.pcrown{position:absolute;top:-10px;right:-6px;font-size:14px;font-style:normal}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pname{display:flex;align-items:center;gap:5px;font-weight:800;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden}
.pname span{overflow:hidden;text-overflow:ellipsis}
.plv{flex:none;font-size:10px;color:#fff;background:#5a7aa0;border-radius:6px;padding:0 5px;line-height:16px}
.pmic{font-style:normal;font-size:12px}
.php{height:6px;border-radius:3px;background:#e3ebf3;overflow:hidden}
.php i{display:block;height:100%;border-radius:3px}
.pmap{font-size:11px;color:var(--ink-soft);margin:0!important}
.pacts{display:flex;flex-direction:column;gap:2px}
.partyPanel .picon{margin:0;padding:2px 6px;font-size:12px;line-height:1.2}
.partyPanel .pleave{margin:8px 0 0;color:#a33;border-color:#f1c4c4;background:#fff;font-size:12px}
.phead{margin:12px 0 6px;font-size:13px;color:var(--ink-soft)}
.pnear{display:flex;flex-wrap:wrap;gap:6px}
.pchip{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 4px;border-radius:999px;background:#fff;border:2px solid #e2ecf7;font-size:12px;font-weight:800}
.pchip .pbadge{width:24px;height:24px;font-size:12px}
.partyPanel .padd{margin:0;width:26px;height:26px;padding:0;border-radius:50%;background:var(--frost);color:#fff;border:0;font-size:17px;font-weight:800;line-height:1}
.pempty{color:var(--ink-soft)}
.pvoice{display:flex;align-items:center;gap:6px;margin-top:12px}
.partyPanel .micbtn{display:flex;align-items:center;gap:6px;margin:0;padding:9px 16px;border-radius:999px;background:linear-gradient(#5cc4ff,#2f8fe0);color:#fff;border:0;font-weight:800;font-size:14px}
.partyPanel .micbtn::before{content:"🎙"}
.pdiag{font-size:11px;color:var(--ink-soft);margin-top:4px}
.pdiag summary{cursor:pointer}
html.short .partyPanel{padding:10px 12px;max-height:92%}
html.short .pmembers{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* Side card: 任务 / 队伍 / 首领 tabs share one card, so none squeezes the others
   out of the right column on a short screen. */
.sidetabs{display:flex;gap:3px;min-width:0}
.sidetabs button{position:relative;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800;color:#56769c;background:transparent;white-space:nowrap;pointer-events:auto;cursor:pointer}
.sidetabs button[aria-selected="true"]{color:#fff;background:#2568a5}
.sidetabs button.alive:not([aria-selected="true"]){color:var(--danger)}
.sidetabs .dot{right:-2px;top:-3px;width:9px;height:9px}
#questTitle{font-size:14px}
#hud .quest #teamBody{width:100%;display:flex;flex-direction:column;gap:4px;margin-top:5px;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;pointer-events:auto}
#hud[data-mode="pve"] #partyBtn{display:none}
.smember{display:flex;align-items:center;gap:5px;width:100%;padding:1px 2px;border-radius:8px;background:transparent;text-align:left;font-size:12px;font-weight:800;color:var(--ink);pointer-events:auto;cursor:pointer}
.smember .pbadge{width:20px;height:20px;font-size:11px}
.smember .pcrown{top:-7px;right:-5px;font-size:10px}
.sinfo{flex:1;min-width:0;display:flex;align-items:center;gap:5px}
.stop{flex:1;min-width:0;display:flex;align-items:center;gap:4px}
.smember .sname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.smember .php{width:44px;flex:none}
.smember .plv{color:#fff;font-family:inherit;font-weight:800;font-size:10px}
.smember.off{opacity:.5}
.smember.self .sname{color:#2568a5}
.snear{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--ink-soft)}
.snear .pbadge{width:20px;height:20px;font-size:11px}
.snear .sname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snear .sadd{flex:none;border-radius:999px;padding:2px 9px;background:var(--frost);color:#fff;font-size:11px;font-weight:800;pointer-events:auto;cursor:pointer}
html.short .snear .pbadge{width:18px;height:18px;font-size:10px}
html.short .snear .sadd{padding:1px 7px}
html.short #teamBody .snear{grid-column:1/-1}
html.short #teamBody .snear ~ .sopen{display:none}
.soff{font-size:11px;color:var(--ink-soft)}
.sempty{margin:0;font-size:11px;line-height:1.45;color:var(--ink-soft)}
.sinvite{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:9px;background:linear-gradient(90deg,#fff3c4,#ffe7a0);font-size:12px;font-weight:800;color:#7a4b00}
.sinvite span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sinvite button{border-radius:7px;padding:3px 7px;font-size:11px;font-weight:800}
.sinvite .sok{background:#2fae78;color:#fff}
.sinvite .sno{background:#fff;color:#a33}
.sopen{align-self:stretch;border-radius:8px;padding:5px 10px;background:#e0edf9;color:#24568b;font-weight:800;font-size:12px;min-height:28px}
#questBox.compact .smember ~ .sopen,html.short #questBox.compact #questTitle{display:none}
html.short .sidetabs button{padding:1px 7px;font-size:11px;line-height:1.4}
html.short #questTitle{font-size:12px;line-height:1.3}
/* Short screens: members two to a row, health bar under the name; tap one for the full panel. */
html.short #hud .quest #teamBody{display:grid;grid-template-columns:1fr 1fr;gap:3px 6px;margin-top:3px}
html.short #teamBody .sinvite,html.short #teamBody .sempty,html.short #teamBody .sopen{grid-column:1/-1}
html.short #teamBody .smember ~ .sopen{display:none}
html.short .smember{gap:4px;padding:0}
html.short .smember .pbadge{width:18px;height:18px;font-size:10px}
html.short .sinfo{flex-direction:column;align-items:stretch;gap:2px}
html.short .smember .plv{display:none}
html.short .smember .sname{font-size:11px;line-height:1.25}
html.short .smember .php{width:auto;height:4px}

/* HUD layout: the minimap stays at the top right; the map's name, safety and
   boss sit in one panel at the top centre; the 任务 / 队伍 card under your
   status on the left; notices at the bottom centre. */
#hud .fieldchip{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:300px;padding:4px 14px;border-radius:14px}
.fieldname{display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap}
.fieldname b{font-family:var(--f-display);font-weight:400;font-size:18px;color:var(--frost-deep)}
.fieldname span{font-weight:800;font-size:12px;color:var(--ink-soft)}
#hud .fieldchip .bosscard{display:flex;flex-direction:row;align-items:baseline;gap:6px;padding:0;min-width:0;border-top:1px dashed rgba(86,118,156,.3);padding-top:2px}
#hud .fieldchip .bosscard b{font-size:13px}
#hud .fieldchip .bosscard span{font-size:11px}
html.short #hud .fieldchip{padding:2px 10px;border-radius:11px;max-width:240px}
html.short .fieldname b{font-size:14px}
html.short .fieldname span{font-size:10px}
html.short #hud .fieldchip small{font-size:10px;padding:0 4px}
html.short #hud .fieldchip .bosscard b{font-size:11px}
html.short #hud .fieldchip .bosscard span{font-size:10px}
html.tiny .fieldname span{display:none}
html.narrow .top{grid-template-columns:1fr auto}
html.narrow .right{grid-row:1;grid-column:2}
html.narrow .center{grid-row:1;grid-column:2;align-items:flex-end;margin-top:102px} /* the cell under the minimap */

#hud .right .mapwrap{flex-shrink:0}
#hud .left{min-height:0}
#hud .left > *{flex-shrink:0}
#hud .left > .quest{flex-shrink:1;min-height:0}

.notices{position:absolute;left:50%;bottom:max(120px,calc(var(--safe-b) + 110px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;max-width:min(460px,60%);pointer-events:none;z-index:6}
#feed.notices div{align-self:center;text-align:center;font-size:14px;padding:3px 14px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(30,70,120,.15);animation:noticeIn .25s ease-out,noticeOut .6s ease-in 3.4s forwards}
@keyframes noticeIn{from{transform:translateY(8px);opacity:0}}
@keyframes noticeOut{to{opacity:0;transform:translateY(-6px)}}
html.short .notices{bottom:max(96px,calc(var(--safe-b) + 88px))}
html.short #feed.notices div{font-size:12px;padding:2px 10px}
html.short #feed.notices div:nth-child(n+3){display:block}

/* 设置: functions, sound and screen, account, network; scrolls on short screens. */
.gmenu{max-width:400px;width:min(400px,92%);max-height:88%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;gap:8px}
.gmhead{display:flex;align-items:center;justify-content:space-between}
.gmhead h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:22px;color:var(--frost-deep)}
.gmhead .x{position:static}
.gmenu h4{margin:6px 0 0;font-size:12px;color:var(--ink-soft);letter-spacing:.1em}
.gmenu .gmgrid{grid-template-columns:repeat(4,1fr);gap:6px}
.gmenu .gmi:not(.toggle):not(.ghost):not(.x){font-size:15px;padding:9px 4px;border-radius:12px}
.gmenu .settings{justify-content:flex-start;flex-wrap:wrap}
.acctsection .acctrow{display:flex;align-items:center;gap:8px;margin:4px 0}
.acctsection .acctrow .field{flex:1;margin:0}
.acctsection .acctrow .field input{min-width:0;width:100%}
.acctsection p{margin:4px 0;font-size:12px;line-height:1.5}
.acctsection h4{margin:8px 0 2px}
.gmdiag{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.gmdiag .iconbtn.net{width:28px;height:22px;border-radius:7px;background:rgba(47,127,214,.12)}
.gmdiag .ghost.sm{margin-left:auto}
html.short .gmenu{padding:10px 14px;gap:5px;max-height:94%}
html.short .gmenu .gmi:not(.toggle):not(.ghost):not(.x){font-size:13px;padding:6px 4px}
html.short .gmhead h2{font-size:18px}
html.tiny .gmenu .settings{display:flex}

/* FPS and latency: quiet text in the bottom-left corner, orange only when poor. */
.perftext{position:absolute;left:max(10px,var(--safe-l));bottom:max(3px,var(--safe-b));font:600 10px var(--f-num);font-variant-numeric:tabular-nums;color:rgba(40,70,110,.45);pointer-events:none;z-index:4}
.perftext.poor{color:rgba(200,100,20,.85)}
.acctsection .cta.small{font-size:14px;padding:5px 16px;min-width:0}
html.short .acctsection .field input{padding:5px 10px;font-size:14px}
.gmenu .gmhead .x.gmi{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:50%;font:400 22px/1 var(--f-num);color:var(--ink);background:rgba(230,240,252,.95)}
.gmhead h2{line-height:32px}
.sbonus{margin:0;font-size:11px;line-height:1.4;color:#247650}
#questBox.compact .sbonus,html.short #teamBody .sbonus{grid-column:1/-1}
#questBox.compact .sbonus{display:none}

/* Status card: avatar, name / power / a slim HP bar, and 背包 / 设置 stacked
   on its right edge, so the left column keeps its height for the quest card. */
.me .mebtns,html.narrow .me .mebtns{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;align-self:stretch;margin-left:2px;padding:0 0 0 9px;border-left:1px solid rgba(86,118,156,.22);border-radius:0;background:none;box-shadow:none;width:auto}
.me .mebtns .navbtn,html.narrow .me .mebtns .navbtn{width:auto;min-width:54px;height:24px;justify-content:center;grid-column:auto}
.hpbar{height:13px;margin-top:4px;border-radius:7px}
#hpFill{border-radius:7px}
#hpNum{font-size:10px;line-height:13px;top:0;right:7px}
html.short .hpbar{height:11px;margin-top:2px;border-radius:6px}
html.short #hpNum{font-size:9px;line-height:11px;top:0}
html.short .me .mebtns{gap:3px;padding-left:7px}
html.short .me .mebtns .navbtn{min-width:48px;height:21px}
#avatar{cursor:pointer}
html.narrow .me .mebtns .navlabel{display:none}
html.narrow .me .mebtns .navbtn{min-width:30px;padding:0 6px}

/* Trade (trade.js): a request strip, or the two offers side by side. */
.tradePop{position:absolute;z-index:46;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,94%);max-height:90%;overflow:auto;padding:14px 16px;border-radius:18px;pointer-events:auto;touch-action:pan-y;display:flex;flex-direction:column;gap:8px}
.tradePop.small{top:auto;bottom:max(120px,calc(var(--safe-b) + 110px));transform:translateX(-50%);width:auto;max-width:94%;padding:8px 12px}
.tradePop header{display:flex;align-items:center;justify-content:space-between}
.tradePop header b{font-family:var(--f-display);font-weight:400;font-size:20px;color:var(--frost-deep)}
.tradePop .task{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);font-size:14px}
.tcols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tcol{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;background:#fff;border:2px solid #e2ecf7}
.tcol.mine{border-color:#9fcdf7}
.thead{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink)}
.thead em{font-style:normal;font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px}
.thead .tlock{background:#fff1da;color:#ae4d19}
.thead .tok{background:#d9f3e5;color:#247650}
.tgold{display:flex;align-items:center;gap:6px;font-weight:800;color:#8c4904}
.tgold input{width:110px;padding:4px 8px;border-radius:8px;border:1px solid #cfe0f2;font:inherit}
.tfee{font-size:11px;color:var(--ink-soft)}
.titems,.tbag{display:flex;flex-wrap:wrap;gap:6px}
.titem{display:flex;flex-direction:column;align-items:center;gap:2px;width:60px}
.titem small{font-size:9px;line-height:1.2;color:var(--ink-soft);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.titem .gtile{width:46px;height:46px;border-radius:11px}
.titem .gtile svg{width:26px;height:26px}
.titem .gtile.picked{box-shadow:0 0 0 3px #2f7fd6}
.tbag{max-height:150px;overflow-y:auto;padding:6px;border-radius:12px;background:rgba(230,240,252,.7)}
.tempty{font-size:12px;color:var(--ink-soft)}
.ttip{font-size:12px;color:var(--ink-soft)}
.tbtns{display:flex;gap:8px;justify-content:center}
.snear .strade{background:#f0a020}
.partyPanel .ptrade{margin:0;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#f0a020;color:#fff;border:0}
html.short .tradePop{padding:8px 10px;gap:5px}
html.short .titem{width:50px}
html.short .titem .gtile{width:40px;height:40px}
html.short .tbag{max-height:96px}

/* A party invitation pops up above the quick items (party.js renderInvite). */
.invitePop{position:absolute;z-index:46;left:50%;bottom:max(170px,calc(var(--safe-b) + 160px));transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:16px;font-weight:800;font-size:14px;color:var(--ink);pointer-events:auto;white-space:nowrap;animation:noticeIn .25s ease-out}
html.short .invitePop{bottom:max(132px,calc(var(--safe-b) + 124px));font-size:13px;padding:6px 10px}
html.narrow .invitePop,html.narrow .tradePop.small{bottom:265px}