/* Forest UI: shared brass, slate and moss surfaces. Layout belongs to the existing UI. */
:root{--forest-panel:#202925;--forest-inset:#141c1b;--forest-edge:#72654b;--forest-brass:#c6a467;--forest-text:#e3e1ce;--forest-muted:#a6b0a1;--forest-active:#344d50}
.item-skill-preview{display:inline-flex;align-items:center;gap:7px;margin:6px 0 2px;color:#ebce91}
.item-skill-preview img{width:32px;height:32px;image-rendering:pixelated;border:1px solid #8e7950}
.win .win-title{background-image:var(--skin-title,none)}
.win .rpg-btn{background-image:var(--skin-btn,none)}
.win .inv-tab{background-image:var(--skin-tabs,none)}
.win .inv-slot,.win .eq-slot{background-image:var(--skin-slot,none)}
.win .inv-search-row input.inv-search{background-color:#141c1b}
.win .inv-filter-btn{flex-direction:column;text-transform:none;letter-spacing:0}
.win .inv-filter-btn span{white-space:nowrap;font-size:11px;line-height:14px;flex-shrink:0}
.win .sk-banner,.win .skill-card{background:#172321;border-color:#65715b;border-radius:2px}
.win .sk-filter,.win .sk-util-btn{background:#26372e;border:1px solid #65715b;border-radius:2px;color:#dbe0cc}
.win .sk-filter.on{background:#344d50;color:#ffe2a3;border-color:#c6a467;box-shadow:inset 0 -2px #c6a467}
.win .skill-card.cls-gardian .skill-card-name{color:#e4c78e}
.win,.win.inv-win{background:var(--forest-panel);border-color:var(--forest-edge);border-radius:2px;box-shadow:0 0 0 1px #151c1a,3px 3px 0 #111816,0 12px 28px #0008}
.win .win-title,.inv-win .win-title{background-color:#172321;color:#e4c78e;border-bottom:2px solid var(--forest-edge);box-shadow:inset 0 1px #b79b5a55;min-height:38px;letter-spacing:1px}
.win .win-title .x{display:grid;place-items:center;min-width:26px;min-height:26px;color:#babca9;border:1px solid #65705b;border-radius:1px;font:16px system-ui}
.win .win-title .x:hover{background:#613f36;color:#ffe0c2;border-color:#b77a5f}
.win .win-body{background-color:var(--forest-panel);color:var(--forest-text);font-family:'Outfit',system-ui,sans-serif;font-size:13px;line-height:1.4}
.win .muted{color:var(--forest-muted)}
.win .rpg-btn,.win .inv-tab,.win .bank-tab{border-radius:2px;background-color:#2e3b33;border-color:#697356;color:#dedfc9;box-shadow:inset 0 1px #a4b08a22,0 2px #111815;font-family:inherit}
.win .rpg-btn:hover,.win .inv-tab:hover,.win .bank-tab:hover{background-color:#3a4b3e;border-color:var(--forest-brass);color:#fff0ca}
.win .inv-tab.active,.win .bank-tab.on{background:var(--forest-active);color:#ffe2a3;border-color:var(--forest-brass);box-shadow:inset 0 -3px var(--forest-brass)}
.win .inv-tabs{gap:5px}
.win .win-rail{background:#172321;border-color:#526151}
.win .win-rail .inv-tab{border-radius:2px;min-height:34px}
.win :is(button,[tabindex],input,select):focus-visible{outline:2px solid #e9c17b;outline-offset:2px}
.win .inv-filter-btn{box-sizing:border-box;height:44px;min-height:44px;gap:1px;align-items:center;justify-content:center;border-radius:2px;background:#172321;border-color:#526151;color:#b7c3b4;font:11px/14px 'Outfit',system-ui,sans-serif;min-width:0;padding:4px 2px}
.win .inv-filter-btn img,.win .inv-filter-btn [aria-hidden="true"]{display:block;width:18px;height:18px;flex:0 0 18px;line-height:18px;image-rendering:pixelated}

/* Mobile inventory filters: keep all four categories inside the panel. */
body.mobile .win .inv-filters{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:3px;
  width:100%;
  min-width:0;
}
body.mobile .win .inv-filter-btn{
  width:100%;
  min-width:0;
  min-height:44px;
  height:44px;
  padding:4px 2px;
  gap:1px;
  flex:0 0 auto;
  flex-direction:column;
  font-size:10px;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
}
body.mobile .win .inv-filter-btn img{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
body.mobile .win .inv-filter-btn span{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  font-size:11px;
  line-height:14px;
  letter-spacing:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.win .inv-filter-btn.active{background:#344d50;border-color:#c6a467;color:#ffe5ae;box-shadow:inset 0 -2px #c6a467}
.win .inv-search{background:#141c1b;border:1px solid #63705b;border-radius:2px;font-size:12px;padding:8px 10px;color:#e3e1ce;box-shadow:inset 0 2px #0d1312}
.win .inv-search::placeholder{color:#a6b0a1}
.win .inv-search-row{margin:0}
.win .eq-doll{background-color:#151e1c;border-color:#67715a;border-radius:2px;box-shadow:inset 0 0 0 3px #111a17;background-image:linear-gradient(0deg,#25383055,transparent)}
.win .eq-slot,.win .inv-slot{background-color:#131c1a;border-radius:2px;box-shadow:inset 1px 1px #ffffff08,inset -1px -1px #0006}
.win .eq-slot.eq-empty{border-color:#56624f;background-color:#19221d}
.win .eq-slot.eq-active{border-color:#d5b36d;box-shadow:inset 0 0 0 1px #d5b36d55}
.win .inv-slot:hover,.win .eq-slot:hover{background-color:#2b3b32;outline:1px solid #d5b36d;outline-offset:-2px}
.win .inv-slot .ct{font:600 11px 'Outfit',system-ui,sans-serif;color:#e4ead6;background:#101915dd;padding:0 2px;border-radius:1px}
.win .inv-slot .pl{font:700 10px 'Outfit',system-ui,sans-serif;color:#f4d994;background:#101915dd;padding:0 2px}
.win .inv-space{color:#b4bda8;padding-left:0;font-size:12px;margin-right:auto}
.win .inv-space b{color:#e4c78e}
.win .inv-space.full b{color:#f39376}
.win .inv-currency{border-top-color:#667052;padding-top:10px;gap:6px}
.win .cur-chip{background:#17211e;border-color:#54614d;box-shadow:none;border-radius:2px;padding:5px 7px}
.win .cur-chip small{color:#a6b0a1}
.win :is(.win-body,.inv-grid){scrollbar-color:#788466 #141c1b;scrollbar-width:thin}
.win :is(.win-body,.inv-grid)::-webkit-scrollbar-thumb{background:#788466;border-radius:1px}
body:not(.mobile) .win.inv-win{width:520px;max-width:min(520px,96vw)}
body:not(.mobile) .inv-body{grid-template-columns:200px minmax(0,1fr);grid-template-areas:'doll tabs' 'doll filt' 'doll search' 'doll grid' 'cur cur';grid-template-rows:auto auto auto minmax(0,1fr) auto;height:min(540px,76vh);gap:9px 14px;padding:12px}
body:not(.mobile) .inv-body .inv-search-row{grid-area:search;min-width:0}
body:not(.mobile) .inv-body .inv-tabs{justify-content:flex-start}
body:not(.mobile) .inv-body .inv-grid{grid-template-columns:repeat(5,48px);gap:4px}
body:not(.mobile) .inv-body .inv-slot{width:48px;height:48px}
body:not(.mobile) .inv-body .inv-slot .icimg{width:40px;height:40px}
@media(max-width:560px){
 body:not(.mobile) .win.inv-win{width:min(330px,96vw)}
 body:not(.mobile) .inv-body{display:flex;height:auto;max-height:78vh;overflow:auto}
 body:not(.mobile) .inv-body .eq-doll-wrap{width:200px;align-self:center;flex-shrink:0}
 body:not(.mobile) .inv-body :is(.inv-filters,.inv-tabs,.inv-search-row){align-self:stretch}
 body:not(.mobile) .inv-body .inv-grid{min-height:160px;max-height:280px;flex-shrink:0;justify-content:center}
 .win .inv-filter-btn{min-height:40px}
}
.mobile .win .inv-filter-btn{min-height:42px}
.inv-station-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.inv-station-btn{flex:1 1 90px;min-height:40px;background:#304535!important;border-color:#a99056!important;color:#f2dfb3!important;font:700 12px 'Outfit',sans-serif!important}
.mobile .inv-station-buttons{margin:0 0 4px}
.mobile .inv-station-btn{min-height:46px;font-size:14px!important}
.win .inv-empty-result{grid-column:1/-1;color:var(--forest-muted);text-align:center;padding:24px 8px}
@media(prefers-reduced-motion:reduce){.win,.win .inv-slot{animation:none!important;transition:none!important}}

/* Forest Chronicle: generated art stays outside the interactive content layer. */
.win.inv-win{background:#111e19;border-color:#8d7950}
.win.inv-win::before,.win.inv-win::after{display:none}
.inv-win .win-body{background:linear-gradient(110deg,#172820,#101b18)}
.inv-win .win-title{background-image:linear-gradient(90deg,#13221c,#23352a,#13221c);min-height:44px;padding-left:48px;padding-right:48px;border-bottom:1px solid #89754e}
.inv-win .win-title .x{right:20px;z-index:4;background:#13211b}
.inv-ornaments{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;border-radius:inherit}
.inv-ornament{position:absolute;width:62px;height:62px;background:url('/assets/ui/forest-chronicle/corner-v1.png') center/contain no-repeat;pointer-events:none}
.inv-ornament-tl{top:-5px;left:-5px}
.inv-ornament-tr{top:-5px;right:-5px;transform:scaleX(-1)}
.inv-ornament-bl{bottom:-5px;left:-5px;transform:scaleY(-1)}
.inv-ornament-br{bottom:-5px;right:-5px;transform:scale(-1)}
.inv-win .eq-doll,.win.eqdoll-win .eq-doll{background:#101d18 url('/assets/ui/forest-chronicle/portrait-forest-v1.png') center/cover no-repeat;border-color:#6d7050;box-shadow:inset 0 0 18px #07100a66}
.inv-win .eq-doll-wrap::after{content:"";display:block;flex:0 0 24px;height:24px;margin:8px 4px 0;background:url('/assets/ui/forest-chronicle/divider-v1.png') center/100% auto no-repeat;pointer-events:none}
.inv-win :is(.inv-slot,.eq-slot){background-image:linear-gradient(145deg,#203229,#101b16)}
.inv-win :is(.rpg-btn,.inv-tab){background-image:linear-gradient(#2a3d2e,#18281f)}
.inv-win .inv-currency{position:relative;padding:17px 7px 2px;border-top:0}
.inv-win .inv-currency::before{content:"";position:absolute;top:-18px;left:10%;width:80%;height:44px;background:url('/assets/ui/forest-chronicle/divider-v1.png') center/100% auto no-repeat;pointer-events:none}
.inv-win .cur-chip{background:transparent;border-color:transparent;box-shadow:none}
@media(max-width:560px){
  .inv-ornament{width:44px;height:44px}
  .inv-win .win-title{padding-left:36px;padding-right:44px}
  .inv-win .inv-currency{gap:3px;padding-left:0;padding-right:0}
}

/* Equipment surrounds the portrait; tools have their own bottom row. */
.inv-win .eq-doll,.win.eqdoll-win .eq-doll{height:320px;flex-shrink:0;background-position:center bottom}
.inv-win .eq-doll-model,.win.eqdoll-win .eq-doll-model{left:48px;right:48px;top:26px;bottom:70px;width:calc(100% - 96px);height:calc(100% - 96px)}
:is(.inv-win,.eqdoll-win) .eq-doll .eq-slot{box-sizing:border-box;width:40px;height:40px;left:8px!important;top:var(--eq-row,14px)!important}
:is(.inv-win,.eqdoll-win) .eq-doll .eq-slot .icimg{width:32px;height:32px}
:is(.inv-win,.eqdoll-win) .eq-doll [data-eqslot="armor"]{--eq-row:72px}
:is(.inv-win,.eqdoll-win) .eq-doll [data-eqslot="weapon"]{--eq-row:130px}
:is(.inv-win,.eqdoll-win) .eq-doll [data-eqslot="boots"]{--eq-row:188px}
:is(.inv-win,.eqdoll-win) .eq-doll :is([data-eqslot="necklace"],[data-eqslot="shield"],[data-eqslot="ring"]){left:auto!important;right:8px}
:is(.inv-win,.eqdoll-win) .eq-doll [data-eqslot="shield"]{--eq-row:92px}
:is(.inv-win,.eqdoll-win) .eq-doll [data-eqslot="ring"]{--eq-row:170px}
:is(.inv-win,.eqdoll-win) .eq-doll .eq-tool{--eq-row:266px;left:calc(50% - 20px)!important}
:is(.inv-win,.eqdoll-win) .eq-doll [data-eqslot="fishingRod"]{left:calc(50% - 70px)!important}
:is(.inv-win,.eqdoll-win) .eq-doll [data-eqslot="dice"]{left:calc(50% + 30px)!important}
:is(.inv-win,.eqdoll-win) .eq-doll::before{content:"";position:absolute;left:12%;right:12%;top:242px;height:18px;background:url('/assets/ui/forest-chronicle/divider-v1.png') center/100% auto no-repeat;pointer-events:none}
.inv-win .inv-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-width:0}
.inv-win .inv-filter-btn{height:48px;min-height:48px}
.inv-win .inv-filter-btn span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.inv-win .eq-doll-wrap{min-height:0;overflow-y:auto;scrollbar-width:thin}
.inv-win .eq-doll-wrap>.rpg-btn,.inv-win .eq-pet-row{flex-shrink:0}
@media(min-width:720px){
  body:not(.mobile) .win.inv-win{width:680px;max-width:96vw}
  body:not(.mobile) .inv-body{grid-template-columns:280px minmax(0,1fr);gap:10px 18px;height:min(558px,76vh);padding:14px}
  body:not(.mobile) .inv-body .eq-doll-wrap{width:280px}
  body:not(.mobile) .inv-body .inv-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  body:not(.mobile) .inv-body .inv-slot{width:100%;height:auto;aspect-ratio:1;min-width:0}
  body:not(.mobile) .inv-body .inv-slot .icimg{width:38px;height:38px;max-width:90%;max-height:90%}
  body:not(.mobile) .inv-win .eq-doll{height:350px}
  body:not(.mobile) .inv-win .eq-doll-model{left:50px;right:50px;top:12px;bottom:84px;width:calc(100% - 100px);height:calc(100% - 96px)}
  body:not(.mobile) .inv-win .eq-doll .eq-slot{width:44px;height:44px}
  body:not(.mobile) .inv-win .eq-doll .eq-tool{--eq-row:292px;left:calc(50% - 22px)!important}
  body:not(.mobile) .inv-win .eq-doll [data-eqslot="fishingRod"]{left:calc(50% - 76px)!important}
  body:not(.mobile) .inv-win .eq-doll [data-eqslot="dice"]{left:calc(50% + 32px)!important}
  body:not(.mobile) .inv-win .eq-doll::before{top:265px}
  body:not(.mobile) .inv-win .inv-currency{justify-content:space-around}
}
@media(max-width:560px){
  body:not(.mobile) .inv-body .eq-doll-wrap{width:100%;overflow:visible}
}

/* Portal destination card: shares the real portal art and retains live entry data. */
#portal-info{--portal-accent:#ae91de;box-sizing:border-box;width:340px;min-width:0;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;padding:0;transform:none;pointer-events:auto;background:#13201c;border:1px solid #7a7258;border-radius:8px;color:#e4e6da;box-shadow:0 10px 32px #0009;font:12px/1.45 'Outfit',system-ui,sans-serif;scrollbar-width:thin}
#portal-info[data-theme="desert"]{--portal-accent:#e7bd70}
#portal-info[data-theme="temple"]{--portal-accent:#65cec0}
#portal-info:is([data-theme="ember"],[data-theme="caldera"]){--portal-accent:#ef9967}
#portal-info[data-theme="angel"]{--portal-accent:#eee0a4}
#portal-info[data-theme="crypt"]{--portal-accent:#99b6df}
#portal-info[data-theme="abyss"]{--portal-accent:#e38eaa}
#portal-info[data-theme="exit"]{--portal-accent:#9acf8c}
#portal-info::after{display:none}
#portal-info .pi-hero{position:relative;display:flex;align-items:center;gap:14px;padding:16px 38px 14px 16px;min-height:102px;border-bottom:1px solid #657053;background:radial-gradient(ellipse at 12% 80%,#65705355,transparent 65%),linear-gradient(120deg,#26382f,#14201d)}
#portal-info .pi-art{width:72px;height:84px;object-fit:contain;image-rendering:pixelated;flex:0 0 72px;filter:drop-shadow(0 4px 5px #0008)}
#portal-info .pi-heading{min-width:0}
#portal-info .pi-title{display:block;margin:6px 0 0;font:600 17px/1.2 'Outfit',system-ui,sans-serif;color:#f0ebd8;overflow-wrap:anywhere}
#portal-info .pi-tag{display:inline-block;padding:2px 6px;background:#9fc39018;border:1px solid #6f8a61;border-radius:3px;color:#c1dcae;font:600 9px/1.3 'Outfit',sans-serif;letter-spacing:1px}
#portal-info .pi-access{display:inline-block;margin-top:7px;color:var(--portal-accent);font-weight:600;font-size:11px}
#portal-info .pi-close{position:absolute;top:9px;right:9px;width:26px;height:26px;display:grid;place-items:center;padding:0;border:1px solid #68745c;border-radius:4px;background:#101c17;color:#dfdfd0;font:21px/1 system-ui;letter-spacing:0;cursor:pointer}
#portal-info .pi-close:active{transform:none;border-width:1px}
#portal-info .pi-content{padding:12px 16px}
#portal-info .pi-row{gap:7px;margin:0 0 9px;flex-wrap:wrap}
#portal-info .pi-row .lbl{color:#a3b2a5;white-space:normal}
#portal-info .pi-population{padding-bottom:9px;border-bottom:1px solid #354738}
#portal-info .pi-population b{margin-left:auto;color:#e8e9d4}
#portal-info .pi-live{width:5px;height:5px;border-radius:50%;background:#90cba0}
#portal-info .pi-enemy-txt{line-height:1.5;color:#e0e5d8}
#portal-info .pi-rewards{align-items:flex-start;flex-direction:column;margin-top:12px}
#portal-info .pi-drops{display:flex;flex-wrap:wrap;gap:6px;width:100%}
#portal-info .pi-loot{display:flex;align-items:center;gap:6px;padding:5px 7px;background:#0e1915;border:1px solid #47553e;border-radius:4px;min-width:0;max-width:100%;font-size:11px;color:#d9d9c5}
#portal-info .pi-drops img{width:28px;height:28px;margin:0;image-rendering:pixelated;flex-shrink:0}
#portal-info .pi-loot span{overflow-wrap:anywhere}
#portal-info .pi-actions{padding:0 16px 14px}
#portal-info .pi-enter{display:flex;justify-content:center;align-items:center;gap:12px;min-height:40px;padding:8px 12px;margin:0;background:linear-gradient(#3e543b,#293c2c);border:1px solid #9b9263;border-radius:4px;color:#f4ead1;font:600 13px/1.3 'Outfit',system-ui,sans-serif;letter-spacing:.2px;text-transform:none}
#portal-info .pi-enter:hover{background:#445c40;border-color:#d5bd7b}
#portal-info .pi-party{margin-top:7px;background:#253e49;border-color:#668da2}
#portal-info .pi-mod,#portal-info .pi-feat{padding:6px 8px;font-size:11px}
#portal-info .pi-rep{font-size:11px;margin-top:10px}
#portal-info :is(button):focus-visible{outline:2px solid var(--portal-accent);outline-offset:2px}

/* Combat HUD: keep layout, key bindings and radial cooldown state intact. */
#hotbar .hotbar-key-edit{padding:3px 8px;align-self:center;height:32px;margin-left:8px;font:700 10px system-ui,sans-serif;cursor:pointer;background:#26382f;border:2px solid #697354;border-radius:2px;color:#e3e1ce;box-shadow:inset 0 1px #c6d5a422,0 2px #101815}
#hotbar .hotbar-key-edit:hover,#hotbar .hotbar-key-edit.active{background:#355354;border-color:#c6a467;color:#ffe2aa}
#target-clear{padding:0;background:#26382f;border-color:#8e805d;border-radius:2px;color:#e3e1ce;font-family:system-ui,sans-serif}
#target-clear:focus-visible,#menu-bar button:focus-visible{outline:2px solid #aedbd0;outline-offset:2px}
#target-name{padding-right:8px;overflow-wrap:anywhere}
#hud-name .char-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#hud-dmod,#xp-boost-badge,#food-badge,#temper-badge,#torch-badge{background:#26382f;border-color:#857450;border-radius:2px;color:#e6cb91}
#hud-help{color:#a6b0a1;text-shadow:1px 1px #101714}
#chat-filters .chat-filter{background:#17231feb;border-radius:2px}
#hotbar .hb-mode{background:#26382f;border-color:#697354;border-radius:2px;color:#cbd3ba;box-shadow:inset 0 1px #c6d5a422}
#hotbar .hb-mode:hover,#hotbar .hb-mode.active{background:#355354;border-color:#c6a467;color:#ffe2aa;box-shadow:inset 0 -2px #c6a467}
#hotbar .hb-mode.hb-torch.active{background:#4c4028;border-color:#d9b56f;color:#ffe2aa}
#hud-zone{background:#17231feb;border-color:#657254;border-radius:2px;color:#e3e1ce}
#hud-buffs .buff-icon{background:#17231f;border-color:#7d8c64;border-radius:2px}
#hud-buffs .buff-icon.bad{border-color:#c66f60;background:#38251f}
#hotbar{background-color:#202925;background-image:var(--skin-hotbar,none);border-color:#88734e;border-radius:3px;box-shadow:inset 0 1px #dac18b44,0 3px 0 #101815,0 8px 20px #0007}
#hotbar .hot-slot{background-color:#121d1b;background-image:var(--skin-slot,none);border-color:#65715b;border-radius:2px;box-shadow:inset 1px 1px #a3b6a022,inset -1px -1px #0009}
#hotbar .hot-slot:hover{border-color:#d9b56f;outline:1px solid #d9b56f55}
#hotbar .hot-slot .key{background:#27382f;border-color:#8e805d;border-radius:2px;color:#f4e3b9;font-family:system-ui,sans-serif}
#hotbar .hot-slot .cd{border-radius:1px;background:conic-gradient(#091413dc var(--p,0%),transparent 0)}
#hotbar .hot-slot .cdn{font:700 16px system-ui,sans-serif;color:#fff0cc;text-shadow:1px 1px #07100f,-1px -1px #07100f}
#hotbar .hot-slot .slvl{color:#e5c781}
#hotbar .hot-ic{image-rendering:pixelated}
#char-hud,#hud-target{background-color:#17231feb;border-color:#857450;border-radius:3px;box-shadow:inset 0 1px #c6a46733,0 3px 0 #0d1713}
#char-hud{background-image:none;outline:1px solid #65705255;outline-offset:-4px}
#char-hud .bar,#hud-target .bar{background:#101916;border-color:#5d6953;border-radius:2px;box-shadow:inset 0 1px 2px #0009}
#char-hud .bar.hp .fill,#hud-target .bar.hp .fill{background:#a84f44;box-shadow:inset 0 2px #df99704d}
#char-hud .bar.mp .fill{background:#477b98;box-shadow:inset 0 2px #a5d6dd55}
#char-hud .bar.xp .fill{background:#b49a52;box-shadow:inset 0 1px #f2d58b77}
#char-hud .bar span{font-family:system-ui,sans-serif;text-shadow:1px 1px #101714}
#menu-bar .menu-btn{background:#26382f;border-color:#697354;border-radius:2px;color:#dfe3cd;box-shadow:inset 0 1px #c6d5a422,0 2px #101815}
#menu-bar .menu-btn:hover,#menu-bar .menu-btn.active{background:#355354;border-color:#c6a467;color:#ffe2aa}
#menu-bar .menu-btn .mk{color:#ddc48c}
#chat-lines div{background:#101c18d9;border-color:#485b4355;border-radius:2px;font-family:'Outfit',system-ui,sans-serif}
#chat-input{background:#17231fed;border-color:#6c7959;border-radius:2px;color:#e3e1ce}
#tooltip,#tooltip-compare{background-color:#15201ef5;border-color:#8e805d;border-radius:2px;color:#e3e1ce;box-shadow:2px 2px #0a1311,0 8px 20px #0006;font-family:'Outfit',system-ui,sans-serif}
#tooltip .muted,#tooltip-compare .muted{color:#b3bda7}
#tooltip b,#tooltip-compare b{color:#e6cb91}

/* Trading, banks and shops share the same slot and selected-state language. */
.win :is(.trade-col,.shop-msglog,.shop-earn,.bank-silver-panel,.bsp-cols,.sv-body,.sv-detail,.sv-grid,.npc-speech,.npc-portrait){background-color:#17231f;background-image:none;border-color:#57664e;border-radius:2px;color:#dfe3cd}
.win :is(.shop-slot,.bank-slot,.trade-grid-slot,.sv-slot,.inspect-slot,.cb-cell,.wb-cell){background-color:#111c19;background-image:var(--skin-slot,none);border-radius:2px;box-shadow:inset 1px 1px #d7e2c211,inset -1px -1px #0008}
.win :is(.shop-slot.filled,.bank-slot.occupied,.trade-grid-slot.occupied,.sv-slot):hover{outline:1px solid #dab879;outline-offset:-2px;transform:none;background-color:#293c30}
.win :is(.sv-tab,.bank-tab,.shop-tabs .inv-tab){background-color:#27392f;background-image:var(--skin-tabs,none);border-color:#657254;border-radius:2px;color:#bec8b3}
.win :is(.sv-tab.on,.bank-tab.on,.shop-tabs .inv-tab.active){background-color:#355354;background-image:var(--skin-tabs,none);color:#ffe2aa;border-color:#c6a467;box-shadow:inset 0 -2px #c6a467}
.win :is(.sv-slot.sel,.shop-slot.ss-picked){outline:2px solid #d9b56f;outline-offset:-2px}
.win .trade-h{background:#26392f;border-color:#56684e;color:#e1d6b2}
.win .trade-h.good{background:#294735;color:#b7e2a7;border-color:#80a06b}
.win :is(.trade-yang,.shop-slot-price,.shop-earn b,.sv-price){color:#edcc86;font-variant-numeric:tabular-nums}
.win .trade-yangrow input.qty{background:#111c19!important;border-color:#647356!important;border-radius:2px!important;color:#eee9d2!important}
.win .npc-head-role{color:#acb89f}
.win :is(.shop-row,.shop-setup-row,.shop-msg,.fr-row,.mail-row,.lb-row,.quest-row,.daily-row,.title-row){background-color:#19271f;border-color:#4f6149;border-radius:2px}
.win .shop-msg.out{background:#2a4135}
.win .fn-banner{background:#23372c;border-color:#718161;border-radius:2px;box-shadow:inset 0 1px #b7c98f22}
.win .fn-medallion{background:#172920;border-color:#9c9b70;box-shadow:none}
.win :is(.sv-plate,.shop-slot-price){background:#28352a;border-top-color:#697451;color:#edcc86}
.win :is(.fn-hero,.npc-fn-head,.wb-panel,.cb-preview,.cb-detail,.bsp-cols,.bank-silver-panel,.mail-compose,.quest-card,.sk-banner){background-color:#1a2c24;border-color:#68775a;border-radius:2px}
.win :is(.shop-msg-input,.shop-name-input,.shop-to){background:#121e19;border-color:#667456;border-radius:2px;color:#e3e1ce}

/* Game-currency dice table: retain distinct waiting/win/loss/refund states. */
.win.barbut-win .bb-arena{background:#16352a;border:2px solid #6d805b;border-radius:3px;box-shadow:inset 0 0 0 3px #10291f,inset 0 4px 14px #0005;padding:16px 10px}
.win.barbut-win .bb-die{background:#e3dabb;border:1px solid #a69a79;border-radius:3px;box-shadow:inset -2px -3px #b0a382,2px 3px #0a1e17}
.win.barbut-win .bb-pip{border-radius:1px}
.win.barbut-win .bb-pip.on{background:#29362d;box-shadow:none}
.win.barbut-win :is(.bb-pot,.bb-vs,.bb-status,.bb-wins){color:#e6c887}
.win.barbut-win .bb-mod{background:#253a2d;border-color:#6f8057;border-radius:2px;color:#dbe5c4}
.win.barbut-win .bb-mod.opp{color:#f1c194;border-color:#a27b55}
.win.barbut-win .bb-result{border-radius:2px}
.win.barbut-win .bb-result.bb-win{background:#183f2ef5;color:#c8f3b4;border-color:#89ba75}
.win.barbut-win .bb-result.bb-lose{background:#422823f5;color:#ffba9e;border-color:#b87965}
.win.barbut-win .bb-result.cancel{background:#27332af5;color:#ddd4b6;border-color:#a29470}
.win button:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.45);transform:none;box-shadow:none}
.win .btn-accept:not(:disabled){background-color:#35543c;background-image:var(--skin-btnPrimary,none);border-color:#8aa169;color:#e9f2ce}
.win .btn-cancel:not(:disabled){background-color:#58382e;background-image:none;border-color:#aa7862;color:#ffe0c5}
@media(max-width:560px){.trade-window-win .trade-cols{gap:6px}.trade-window-win .trade-col{min-width:0;padding:6px}.win .trade-actions{flex-wrap:wrap}.win .shop-grid{max-width:100%}}
@media(prefers-reduced-motion:reduce){#hotbar .hot-slot,.win .bb-dice{animation:none!important;transition:none!important;}}
.mobile .act-btn{background:#1c3028;border-color:#83906a;border-radius:6px;box-shadow:inset 0 1px #cad9aa33,0 3px #0c1912}
.mobile .act-btn .cd{border-radius:5px;background:#081711cf;color:#ffe4b0;font-family:system-ui,sans-serif}
.mobile .act-btn.aiming{border-color:#a9d7cc;box-shadow:0 0 0 2px #517d7655}
.mob-sheet-panel{background:#202925;border-color:#829069;border-radius:3px;box-shadow:0 -3px 0 #101a14,0 -10px 28px #0007;color:#e3e1ce}
.mob-sheet-head,.mob-sheet-acts{background:#18281f;border-color:#637452}
.mob-sheet-head .nm{color:#e4c78e}
.mob-sheet-panel button{background-color:#304b37;border-color:#7f9563;border-radius:2px;color:#e6edcd}
.mob-sheet-panel button:disabled{opacity:.45;cursor:not-allowed}
.win.rpg-modal-win{background-color:var(--forest-panel)!important;border-color:var(--forest-edge)!important;border-radius:2px!important}

/* Premium storefront: category rail, product gallery and persistent detail pane. */
.win.premium-shop-win{width:min(850px,92vw);max-width:92vw}
.win.premium-shop-win .win-body{width:100%;min-width:0;max-width:none;max-height:min(680px,82vh);padding:10px;overflow:auto}
.premium-shop-win .premium-balance{position:sticky;top:-10px;z-index:4;justify-content:flex-end;gap:12px;margin:-10px -10px 10px!important;padding:9px 14px!important;background:#17231ff2!important;border:0!important;border-bottom:1px solid #637452!important;border-radius:0!important;font-family:'Outfit',system-ui,sans-serif!important;box-shadow:0 5px 12px #08100d99!important}
.premium-shop-win .premium-balance span{display:flex;align-items:center;gap:5px;padding:4px 9px;background:#101c18;border:1px solid #4f6149;border-radius:2px;color:#b8c5b2!important}
.premium-shop-win .premium-balance b{color:#e6cb91!important;font:800 14px system-ui,sans-serif!important}
.premium-layout{display:grid;grid-template-columns:142px minmax(360px,1fr) 218px;gap:10px;align-items:start;min-height:470px}
.premium-nav{position:sticky;top:45px;display:flex;flex-direction:column;gap:5px;padding:7px;background:#17231f;border:1px solid #526149;border-radius:2px}
.premium-nav-btn{display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:center;width:100%;min-height:42px;padding:7px 8px;text-align:left;font:700 11px 'Outfit',system-ui,sans-serif;letter-spacing:.25px;color:#bfc9b6;background:#1d2d25;border:1px solid transparent;border-radius:2px;cursor:pointer}
.premium-nav-btn .pn-ic{display:grid;place-items:center;width:23px;height:23px;color:#d9bd82;background:#111d19;border:1px solid #506048;border-radius:2px;font-size:14px}
.premium-nav-btn:hover{background:#293e32;border-color:#6e7d5c;color:#f0ead2}
.premium-nav-btn.active{background:#355354;border-color:#c6a467;color:#ffe2aa;box-shadow:inset 3px 0 #d8b970}
.premium-nav-btn.active .pn-ic{border-color:#c6a467;color:#ffe2aa}
.premium-catalog{min-width:0}
.premium-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:92px;padding:14px 18px;margin-bottom:10px;background:linear-gradient(120deg,#263f33,#1c3029 58%,#253c43);border:1px solid #738260;border-radius:2px;box-shadow:inset 0 1px #d4c28b22}
.premium-hero div{display:flex;flex-direction:column;gap:3px;max-width:78%}
.premium-hero div>span,.premium-section-head .psh-kicker,.pd-kicker{color:#b6d5c5;font:800 9px system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase}
.premium-hero b,.premium-section-head>b{color:#f1ddb0;font:800 16px 'Outfit',system-ui,sans-serif}
.premium-hero small,.premium-section-head small{color:#adb8a7;font:11px/1.4 system-ui,sans-serif}
.premium-hero .ph-gem{display:grid;place-items:center;width:62px;height:62px;color:#8fe0ef;font-size:36px;text-shadow:0 0 18px #52badc88;transform:rotate(8deg)}
.premium-section-head{display:flex;flex-direction:column;gap:3px;padding:5px 3px 10px;border-bottom:1px solid #4f6149;margin-bottom:9px}
.premium-layout .pshop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0;align-items:start}
.premium-layout.featured-view .pshop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.premium-layout .pshop-card{appearance:none;width:100%;min-width:0;min-height:135px;padding:10px 8px 8px;background:#17231f;border:1px solid #506048;border-radius:2px;color:#e3e1ce;font-family:inherit;cursor:pointer;box-shadow:inset 0 1px #d7e2c211;transition:none;}
.premium-layout .pshop-card:hover{background:#21342a;border-color:#a18f64;}
.premium-layout .pshop-card.selected{background:#294238;border-color:#d2b371;outline:1px solid #d2b37155;box-shadow:inset 0 -2px #d2b371}
.premium-layout .pshop-card.owned{filter:saturate(.55);opacity:.72}
.premium-layout .pshop-card .pc-tag{top:5px;right:5px;color:#132019;background:#d9bd82;border-radius:1px;font-size:8px}
.premium-layout .pshop-card .pc-ic{height:48px;font-size:31px}
.premium-layout .pshop-card img.pc-ic{width:48px;height:48px}
.premium-layout .pshop-card .pc-nm{min-height:31px;color:#e7e2cf;font-size:11.5px}
.premium-layout .pshop-card .pc-foot{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;padding-top:6px;border-top:1px solid #405044}
.premium-layout .pshop-card .pc-more{display:grid;place-items:center;width:19px;height:19px;color:#dec78d;background:#22352b;border:1px solid #5f6e54;border-radius:1px;font-size:17px;line-height:1}
.premium-layout .cos-sect{grid-column:1/-1;margin-bottom:4px}
.premium-layout .cos-sect-head{background:#1d3027;border-color:#53634d;border-radius:2px;color:#d9cba7}
.premium-layout .pshop-grid.cos-sub{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:7px}
.premium-detail{position:sticky;top:45px;min-height:370px;padding:13px;background:#17231f;border:1px solid #637452;border-radius:2px;box-shadow:inset 0 1px #d7e2c211;display:flex;flex-direction:column;align-items:center;text-align:center;color:#dfe3cd}
.premium-detail .pd-icon{display:grid;place-items:center;width:82px;height:82px;margin:12px auto 8px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 5px 5px #0008)}
.premium-detail .pd-em{font-size:49px}
.premium-detail .pd-name{color:#f0ddb3;font:800 15px/1.25 'Outfit',system-ui,sans-serif;margin-bottom:9px}
.premium-detail .pd-desc{width:100%;max-height:180px;overflow:auto;padding:9px;text-align:left;background:#101c18;border:1px solid #465743;border-radius:2px;color:#c6d0bd;font:11px/1.45 system-ui,sans-serif;box-sizing:border-box}
.premium-detail .pd-desc .cos-tip{text-align:center;margin-bottom:7px}
.premium-detail .pd-desc .cos-fig{margin-inline:auto;width:160px;max-width:100%}
.premium-detail .pd-desc:has(canvas[data-cosmetic-type]){max-height:300px}
.premium-detail .pd-price{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;padding:10px 2px 8px;border-top:1px solid #4d5e49;color:#aab5a5;font:11px system-ui,sans-serif}
.premium-detail .pd-price b{font-size:15px;color:#e8cc8b}
.premium-detail .pd-price.dc b{color:#8ee4ef}.premium-detail .pd-price.dg b{color:#efc078}
.premium-detail .pd-zoom{width:100%;min-height:34px;margin-top:9px;color:#efd69b;border-color:#78663f;background:#24362b;font:800 10px 'Outfit',system-ui,sans-serif;letter-spacing:.4px}
.premium-detail .pd-zoom:hover{background:#30493a;border-color:#c2a363;color:#fff0c6}
.premium-detail .pd-zoom span{font-size:17px;vertical-align:-1px;margin-right:3px}
.premium-detail .pd-buy{width:100%;min-height:37px}
.premium-detail .pd-empty,.premium-detail .pd-market{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;color:#9eaa9b}
.premium-detail .pd-empty>span,.premium-detail .pd-market-ic{font-size:42px;color:#819c8b}
.premium-detail .pd-empty b,.premium-detail .pd-market b{color:#e1cfaa;font-size:14px}
.premium-detail .pd-empty small,.premium-detail .pd-market small{font:11px/1.4 system-ui,sans-serif}
.premium-detail .pd-market p{font:11px/1.45 system-ui,sans-serif;color:#c2ccb9}
.premium-layout.market-view .market-panel{margin:0;background:#17231f;border-color:#637452;border-radius:2px;box-shadow:none}
.premium-layout.market-view{min-height:390px}
.premium-layout.market-view .mk-dir,.premium-layout.market-view :is(.mk-step,.mk-quick){background:#22352b;border-color:#5d6c53;color:#dfe3cd;border-radius:2px}
.premium-layout.market-view .mk-dir.active{background:#355354;border-color:#c6a467;color:#ffe2aa}
.premium-layout.market-view .mk-input{background:#101c18;border-color:#637452;border-radius:2px;color:#f0ddb3}
.premium-shop-win .premium-note{margin:9px 0 0;color:#879485}
.premium-zoom-overlay{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 43%,#183126aa,#050907ed);backdrop-filter:blur(5px)}
.premium-zoom-card{position:relative;width:min(560px,92vw);padding:24px 28px 20px;text-align:center;background:linear-gradient(180deg,#172b23,#0e1915);border:1px solid #b59658;box-shadow:0 24px 80px #000d,inset 0 0 0 3px #0c1712,inset 0 0 0 4px #695a3c;color:#dfe4d1}
.premium-zoom-card::before,.premium-zoom-card::after{content:"◆  ·  ◆";display:block;color:#c4a362;font-size:11px;letter-spacing:8px}
.premium-zoom-card::before{margin-bottom:11px}.premium-zoom-card::after{margin-top:14px}
.premium-zoom-close{position:absolute;right:11px;top:10px;display:grid;place-items:center;width:34px;height:34px;padding:0;background:#19261f;border:1px solid #776540;color:#e8d9b7;font:24px/1 serif;cursor:pointer}
.premium-zoom-close:hover{background:#493027;border-color:#d39b6d;color:#fff}
.premium-zoom-kicker{display:block;color:#9fb9a9;font:800 9px system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase}
.premium-zoom-name{margin:6px 40px 10px;color:#f3d888;font:700 22px 'MedievalSharp','Cinzel',serif;text-shadow:0 2px 8px #000}
.premium-zoom-stage{display:grid;place-items:center;min-height:360px;padding:12px;background:radial-gradient(circle,#294539 0,#14261f 45%,#0a1210 78%);border:1px solid #596b50;box-shadow:inset 0 0 45px #0009}
.premium-zoom-stage .cos-plate{min-height:44px;margin-bottom:8px;max-width:100%;overflow-wrap:anywhere}
.premium-zoom-stage .cos-nm{font-size:clamp(26px,4vw,34px);line-height:1.25;text-shadow:0 2px 2px #000}
.premium-zoom-stage .cos-fig{width:330px;max-width:min(70vw,330px);height:330px;max-height:52vh;margin:0 auto}
.premium-zoom-stage .cos-body{width:100%;height:100%}
.premium-zoom-stage{overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.premium-zoom-stage.is-dragging{cursor:grabbing}
.premium-zoom-content{display:grid;place-items:center;transform-origin:center;will-change:transform}
.premium-zoom-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;color:#a9b6a8;font:11px/1.4 Outfit,sans-serif}
.premium-zoom-tools output{color:#e5ce94;font-variant-numeric:tabular-nums}
.premium-zoom-reset{padding:5px 9px;min-height:26px;border:1px solid #8e794d;border-radius:3px;background:#1b2d23;color:#e5d4aa;font:600 11px Outfit,sans-serif;cursor:pointer;text-transform:none;letter-spacing:normal}
.premium-zoom-card>small{display:block;margin-top:10px;color:#8f9d91;font:11px system-ui,sans-serif}
@media(max-width:900px){
 .win.premium-shop-win{width:min(700px,94vw)}
 .premium-layout{grid-template-columns:125px minmax(300px,1fr)}
 .premium-detail{position:relative;top:auto;grid-column:2;min-height:0}
 .premium-layout .pshop-grid,.premium-layout .pshop-grid.cos-sub{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
 .win.premium-shop-win{left:2vw!important;right:auto!important;width:96vw;max-width:96vw;min-width:0!important;transform:none!important}
 .win.premium-shop-win .win-body{max-height:82vh;padding:8px}
 .premium-shop-win .premium-balance{position:static;flex-wrap:wrap;justify-content:center;margin:-8px -8px 8px!important}
 .premium-layout{display:flex;flex-direction:column;min-height:0}
 .premium-nav{position:static;order:1;width:100%;display:grid;grid-template-columns:repeat(5,minmax(64px,1fr));overflow-x:auto;padding:5px;box-sizing:border-box}
 .premium-nav-btn{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:5px 3px;text-align:center;font-size:9px}
 .premium-nav-btn .pn-ic{width:21px;height:21px}
 .premium-detail{order:3;width:100%;min-height:0;box-sizing:border-box}
 .premium-detail .pd-icon{width:62px;height:62px;margin:7px auto 4px}
 .premium-detail .pd-desc{max-height:110px}
 .premium-catalog{order:2;width:100%}
 .premium-hero{min-height:74px;padding:10px 12px}.premium-hero .ph-gem{width:42px;height:42px;font-size:27px}
 .premium-layout .pshop-grid,.premium-layout .pshop-grid.cos-sub{grid-template-columns:repeat(2,minmax(0,1fr))}
 .premium-layout .pshop-card{min-height:128px}
 .premium-layout.market-view .premium-detail{order:3}.premium-layout.market-view .premium-catalog{order:2}
 .premium-zoom-card{padding:18px 14px 14px}.premium-zoom-stage{min-height:280px}.premium-zoom-stage .cos-fig{width:270px;height:270px}
}
/* Secondary windows use the same readable surfaces, including their selected states. */
.win :is(.bank-head,.bank-lock,.mail-list,.mail-read,.mail-attach,.fr-head,.quest-card){background:#17231f;border-color:#637452;border-radius:2px;color:var(--forest-text);box-shadow:none}
.win .mail-read::before,.win .mail-read::after{display:none}
.win .mail-read :is(.mr-text,.mr-meta-b){color:var(--forest-text)}
.win .mail-read :is(.muted,.mr-meta,.mail-empty){color:var(--forest-muted)}
.win .mail-read .mr-head b{color:#e6cb91}
.win :is(.social-tab,.mail-tab){background:#27392f;background-image:var(--skin-tabs,none);border-color:#657254;border-radius:2px;color:#bec8b3}
.win :is(.social-tab.on,.mail-tab.active,.mail-row.sel){background:#355354;border-color:#c6a467;color:#ffe2aa;box-shadow:inset 0 -2px #c6a467}
.win :is(.mail-row,.fr-row):hover{background:#293c30;border-color:#a79a71}
.win .mail-row.sel:hover{background:#355354;border-color:#c6a467}
.win :is(.bank-pass,.bsp-field){background:#111c19;border-color:#647356;border-radius:2px;color:#eee9d2}
.win :is(.bsp-v,.bh-total,.bh-t1,.bl-t1){color:#e6cb91}
.win :is(button,input,select,textarea,[tabindex]):focus-visible,#hotbar button:focus-visible{outline:2px solid #aedbd0;outline-offset:2px}
@media(max-width:560px){
 .win.bank-win,.win.social-win{min-width:0!important;width:94vw;max-width:94vw}
 .win.bank-win .win-body,.win.social-win .win-body{min-width:0;max-width:100%}
 .bank-win .bsp-amt{flex-wrap:wrap}
 .bank-win .bsp-field{flex:1 1 100%;min-width:0;max-width:100%}
 .bank-win .bank-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-width:100%}
 .bank-win .bank-slot{width:auto;aspect-ratio:1}
 .social-win .mail-panes{display:flex;flex-direction:column}
 .social-win .mail-list{width:100%;max-height:150px;flex:none}
 .social-win .mail-read{min-width:0;width:100%}
}
@media(max-width:560px){
 .win.trade-window-win{min-width:0!important;width:94vw;max-width:94vw}
 .trade-window-win .trade-slots-grid{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(4,38px)}
 .trade-window-win .trade-h{font-size:10px;letter-spacing:0;overflow-wrap:anywhere}
 .trade-window-win .win-title{padding-right:34px;font-size:12px}
 .trade-window-win .win-title .x{position:absolute;right:5px}
}

/* Fine stone/cloth grain for window surfaces. The uneven tile sizes keep it
   organic while the low alpha preserves text and item contrast. */
.win,.win.inv-win,.win.rpg-modal-win{
 background-color:var(--forest-panel)!important;
 background-image:
  radial-gradient(circle at 1px 1px,#ffffff0b 0 0.55px,transparent 0.8px),
  radial-gradient(circle at 4px 3px,#00000016 0 0.65px,transparent 0.9px),
  linear-gradient(115deg,#26302b,#1b2521)!important;
 background-size:6px 7px,9px 8px,100% 100%!important;
 background-position:0 0,2px 1px,0 0!important;
}
.win .win-body,.win.inv-win .win-body{
 background-color:#202925d9;
 background-image:
  radial-gradient(circle at 1px 1px,#ffffff09 0 0.5px,transparent 0.8px),
  radial-gradient(circle at 5px 4px,#00000012 0 0.6px,transparent 0.9px),
  linear-gradient(110deg,#22302a99,#18231f99);
 background-size:7px 6px,11px 9px,100% 100%;
 background-position:0 0,3px 2px,0 0;
}
.win .win-title,.inv-win .win-title{
 background-image:
  radial-gradient(circle at 1px 1px,#ffffff0a 0 0.5px,transparent 0.8px),
  linear-gradient(180deg,#1b2924,#14211d)!important;
 background-size:7px 6px,100% 100%!important;
}

/* Vector icons replace platform-dependent emoji in inventory controls. */
.ui-line-icon{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.win .inv-filter-btn .ui-line-icon{flex:0 0 18px;color:#d9c28c}
.win .inv-search-row{position:relative;align-items:center}
.win .inv-search-icon{position:absolute;left:10px;z-index:2;color:#9fc9c2;pointer-events:none}
.win .inv-search-row input.inv-search{padding-left:12px!important;text-indent:25px!important}
.win .inv-space{display:flex;align-items:center;gap:4px}
.win .inv-space .inv-space-icon{width:17px;height:17px;flex:0 0 17px;color:#d8bd7d}

/* Unified granular combat HUD. */
#char-hud,#hud-target,#hotbar{
 background-image:
  radial-gradient(circle at 1px 1px,#ffffff0b 0 .55px,transparent .85px),
  radial-gradient(circle at 5px 4px,#00000020 0 .65px,transparent .95px),
  linear-gradient(145deg,#24332d,#15231e 65%,#101b18)!important;
 background-size:6px 7px,10px 9px,100% 100%!important;
 border:2px solid #83734f!important;
 box-shadow:inset 0 0 0 1px #111b17,inset 0 1px #d8c18a33,0 4px 0 #09130f,0 12px 26px #0008!important;
}
#char-hud{padding:10px 12px 11px;border-radius:4px!important;outline:none}
#hud-name{padding-bottom:4px;border-bottom:1px solid #8b795044}
#hud-name .char-nm{color:#f0d69b;font:700 14px 'Outfit',system-ui,sans-serif;text-shadow:1px 2px #09110e}
#hud-name .char-lvl{background:#16231f;border:1px solid #9a8357;border-radius:2px;color:#efdaad;font:700 9px 'Outfit',system-ui,sans-serif;box-shadow:inset 0 1px #ffffff12}
#char-hud .bar,#hud-target .bar{
 height:17px;background:#08120f!important;border:1px solid #62705b!important;border-radius:2px!important;
 box-shadow:inset 0 2px 4px #000c,0 1px #ffffff0c!important;
}
#char-hud .bar.xp{height:10px}
#char-hud .bar .fill,#hud-target .bar .fill{border-radius:1px!important;position:relative}
#char-hud .bar.hp .fill,#hud-target .bar.hp .fill{background:repeating-linear-gradient(90deg,#bc594e 0 17px,#ad4e45 17px 18px)!important}
#char-hud .bar.mp .fill{background:repeating-linear-gradient(90deg,#4d89a6 0 17px,#407993 17px 18px)!important}
#char-hud .bar.xp .fill{background:repeating-linear-gradient(90deg,#c4a656 0 13px,#ad9147 13px 14px)!important}
#char-hud .bar::before,#hud-target .bar::before{height:45%;background:linear-gradient(#ffffff25,transparent);border-radius:1px}
#char-hud .bar span{font:700 9px 'Outfit',system-ui,sans-serif;letter-spacing:.25px}
#hud-target{padding:8px 10px;border-radius:4px!important}
#target-name{color:#eadab6;font:700 12px 'Outfit',system-ui,sans-serif;letter-spacing:.2px}
#target-clear{top:5px;right:5px;background:#1b2b25!important;border:1px solid #786e50!important}

#hotbar{padding:9px 11px 10px;border-radius:5px!important;gap:6px}
#hotbar .hb-modes{margin:-2px 0 3px;padding-bottom:6px;border-bottom:1px solid #907b5044}
#hotbar .hb-mode{background-image:linear-gradient(180deg,#2e4137,#203128)!important;border:1px solid #69775c!important;border-radius:3px!important;font-family:'Outfit',system-ui,sans-serif}
#hotbar .hb-mode.active{background-image:linear-gradient(180deg,#45615c,#2c4542)!important;border-color:#d1b674!important;box-shadow:inset 0 -2px #d1b674,0 0 8px #7eb3aa33!important}
#hotbar .hot-slot{
 width:50px;height:50px;border:2px solid #526555!important;border-radius:3px!important;
 background-image:
  radial-gradient(circle at 50% 35%,#293b34,#0e1916 72%),
  linear-gradient(135deg,#ffffff08,transparent)!important;
 box-shadow:inset 0 0 0 1px #09120f,inset 0 1px #cbd8bd22,0 2px 0 #09120f!important;
}
#hotbar .hot-slot:hover{border-color:#d6b970!important;outline:none;box-shadow:inset 0 0 0 1px #5f5337,0 0 10px #d6b9703d,0 3px 0 #09120f!important}
#hotbar .hot-slot .key{right:1px;bottom:1px;min-width:14px;height:14px;background:#1d3028;border:1px solid #a38c5d;color:#f0ddb1;box-shadow:1px 1px #07100d;font:800 9px 'Outfit',system-ui,sans-serif}
#hotbar .hot-slot .slvl{top:2px;right:3px;color:#f0ce82;font:800 9px 'Outfit',system-ui,sans-serif}
#hotbar .hot-slot .cnt{font-family:'Outfit',system-ui,sans-serif}
#hotbar .hotbar-key-edit{border-radius:3px;height:31px}

#menu-bar{gap:5px}
#menu-bar .menu-btn{
 width:60px;height:45px;background-image:
  radial-gradient(circle at 1px 1px,#ffffff0a 0 .5px,transparent .8px),
  linear-gradient(145deg,#2d4036,#1b2d25)!important;
 background-size:7px 7px,100% 100%!important;border:1px solid #69775b!important;border-bottom:3px solid #0e1915!important;border-radius:3px!important;
 box-shadow:inset 0 1px #c6d5a425,0 3px 8px #0006!important;font-family:'Outfit',system-ui,sans-serif;
}
#menu-bar .menu-btn:hover,#menu-bar .menu-btn.active{background-image:linear-gradient(145deg,#3d5850,#263f38)!important;border-color:#d0b574!important;color:#ffebb9}
#hud-zone,#hud-dmod,#hud-buffs .buff-icon{background-image:radial-gradient(circle at 1px 1px,#ffffff0a 0 .5px,transparent .8px),linear-gradient(145deg,#24362e,#17261f)!important;background-size:7px 7px,100% 100%!important;box-shadow:inset 0 1px #ffffff12,0 2px 6px #0006}

/* ESC menu: primary action, compact navigation grid, separated session controls. */
.win.menu-win{width:min(520px,94vw);max-width:min(520px,94vw)}
.menu-win .win-body{max-height:min(78vh,680px);padding:14px!important}
.menu-body{gap:10px}
.menu-hero{display:flex;align-items:center;gap:11px;padding:10px 12px;background:#14231eaa;border:1px solid #56664f;box-shadow:inset 0 1px #ffffff0c}
.menu-hero>span{display:grid;place-items:center;width:43px;height:43px;background:#20362c;border:1px solid #947e53;box-shadow:inset 0 0 0 2px #111e19}
.menu-hero img{image-rendering:pixelated}
.menu-hero div{display:flex;flex-direction:column;gap:2px}.menu-hero b{color:#edd397;font:800 16px 'Outfit',system-ui,sans-serif}.menu-hero small{color:#aeb9a9;font:11px 'Outfit',system-ui,sans-serif}
.menu-section-label{margin-top:1px;color:#aeb9a9;font:800 9px 'Outfit',system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase}
.menu-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.menu-account-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:7px}
.menu-body .menu-action{display:flex;align-items:center;justify-content:flex-start;gap:9px;min-width:0;min-height:48px;padding:8px 10px;background-image:radial-gradient(circle at 1px 1px,#ffffff08 0 .5px,transparent .8px),linear-gradient(145deg,#263a31,#192a23);background-size:7px 7px,100% 100%;border:1px solid #5e6d55;border-left:2px solid #8d7950;border-radius:2px;color:#dfe3d3;font:700 12px 'Outfit',system-ui,sans-serif;box-shadow:inset 0 1px #ffffff0d,0 2px #0c1713}
.menu-body .menu-action img{width:21px;height:21px;flex:0 0 21px;image-rendering:pixelated}.menu-body .menu-action span{overflow:hidden;text-overflow:ellipsis}
.menu-body .menu-action:hover{background-image:linear-gradient(145deg,#385148,#263e35);border-color:#c5aa6b;color:#fff0c9}
.menu-body .menu-action.menu-continue{justify-content:center;min-height:46px;background-image:linear-gradient(145deg,#48654b,#2d4938);border:1px solid #b79b62;border-bottom:3px solid #16281d;color:#fff0bd;font-size:14px}
.menu-body .menu-action.danger{border-left-color:#aa6253;color:#eeb9a9;background-image:linear-gradient(145deg,#3a2925,#291c19)}
.menu-settings-row{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#13211db3;border:1px solid #4c5d4a;color:#aeb9a9;font:11px 'Outfit',system-ui,sans-serif;flex-wrap:wrap}
.menu-settings-row button.small{background:#263a31;border:1px solid #667456;border-radius:2px;color:#dfe3d3}.menu-volume-row{justify-content:space-between}.menu-sound-icon{display:inline-grid;place-items:center;width:16px;height:16px;color:#e4c67f}
@media(max-width:560px){.menu-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-account-grid{grid-template-columns:1fr}.win.menu-win{width:94vw}.menu-win .win-body{max-height:80vh}}

/* Mobile entry screens: natural-size controls and one scroll surface, including keyboard use. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 600px) {
  #screen-auth,#screen-chars,.mobile #screen-auth,.mobile #screen-chars {
    display:flex;align-items:flex-start;justify-content:center;overflow:auto;
    padding: max(20px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
    background-image:linear-gradient(180deg,#0c171944,#0b1717dd),url('/assets/login_bg.jpg');
    background-position:center;background-size:cover;overscroll-behavior:contain;scroll-padding-block:24px;
  }
  #screen-auth .auth-panel,#screen-chars .chars-panel {
    position:relative;flex:0 0 auto;width:100%;max-width:460px;min-width:0;
    transform:none;max-height:none;overflow:visible;margin:auto 0;padding:24px 20px;gap:12px;
    background:linear-gradient(155deg,#263a32f5,#111f1cf5)!important;
    border:1px solid #b59a63!important;border-radius:16px!important;
    box-shadow:inset 0 0 0 4px #16251d,0 16px 45px #0008!important;
    font-family:'Outfit',system-ui,sans-serif;
  }
  #screen-auth .game-title {font-size:28px!important;line-height:1.15;letter-spacing:1px;margin:4px 0!important}
  #screen-auth .game-title span {display:block;font:600 10px/1.8 'Outfit',sans-serif;letter-spacing:3px}
  #screen-auth .subtitle {color:#acb9a8!important;font:400 13px/1.4 'Outfit',sans-serif;margin:0 0 6px!important}
  #screen-chars .chars-panel h2 {font-size:24px;line-height:1.25;letter-spacing:1px;padding:4px 0 16px;border-bottom:1px solid #b59a634d}
  #screen-auth #channel-row {display:flex;flex-wrap:wrap;margin:0 0 4px!important;padding:10px;background:#0c1b18;border:1px solid #637353;border-radius:8px}
  #screen-auth #channel-select {min-width:0;min-height:44px;font:500 16px 'Outfit',sans-serif!important;background:#15251f!important;border:1px solid #637353!important;border-radius:6px!important}
  #screen-auth #auth-user,#screen-auth #auth-pass,#screen-chars #char-name {
    min-height:50px;font:400 16px 'Outfit',sans-serif!important;padding:12px 14px!important;
    background:#0c1b18!important;border:1px solid #637353!important;border-radius:8px!important;
    user-select:text;-webkit-user-select:text;
  }
  #screen-auth #auth-remember {width:20px!important;height:20px;padding:0!important;flex:0 0 20px;accent-color:#d6b66d}
  #screen-auth label[for="auth-remember"] {display:flex;align-items:center;min-height:40px;color:#c1caba!important}
  #screen-auth button,#screen-chars button {min-height:48px;padding:10px 12px!important;border-radius:8px!important;font:700 13px/1.3 'Outfit',sans-serif!important;letter-spacing:.3px!important}
  #screen-auth #btn-login,#screen-chars #btn-create {background:linear-gradient(#d9bf7b,#ae8946)!important;color:#19241b!important;border:1px solid #edcf8a!important;text-shadow:none!important}
  #screen-auth button.secondary,#screen-chars button.secondary {background:#23372e!important;border:1px solid #647356!important}
  #screen-auth #btn-discord,#screen-auth #btn-google {min-height:48px;border-radius:8px!important;font:600 14px 'Outfit',sans-serif!important}
  #screen-auth #saved-accounts-section,#screen-auth #login-volume-ctrl {margin-top:4px!important;border-top:1px solid #b59a634d!important}
  #screen-auth #saved-accounts-list {max-height:none!important;overflow:visible!important}
  #screen-auth #login-volume-range {min-width:100px;height:28px!important;accent-color:#d6b66d}
  #screen-auth #dev-editor-links {display:none!important}
  #screen-auth .err:empty,#screen-chars .err:empty {display:none}
  #screen-chars #char-list,#screen-chars #class-list {max-height:none;overflow:visible}
  #screen-chars .char-row {min-height:86px;gap:12px;padding:16px;text-align:left;background:linear-gradient(120deg,#2f4536,#14261f)!important;border:1px solid #768363!important;border-radius:10px!important}
  #screen-chars .char-row>span:first-child {min-width:0;overflow-wrap:anywhere;font:400 13px/1.7 'Outfit',sans-serif;color:#b0bdab}
  #screen-chars .char-row b {font-size:18px}
  #screen-chars .char-row>span:last-child {flex-shrink:0;padding:6px 8px;border:1px solid #a38b53;border-radius:6px;color:#e8ca81;font:700 12px 'Outfit',sans-serif;background:#12201a}
  #screen-chars #btn-new-char {margin:4px 0;background:#2d4435!important;border:1px dashed #b59a63!important}
  #screen-chars #char-create {border-color:#b59a634d;padding-top:16px}
  #screen-chars #class-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #screen-chars .class-card {min-width:0;padding:14px 10px;line-height:1.5;background:#12251e!important;border:1px solid #596f53!important;border-radius:10px!important;overflow-wrap:anywhere}
  #screen-chars .class-card.selected {background:#344932!important;border:2px solid #e4c278!important;padding:13px 9px;box-shadow:inset 0 0 18px #e4c27816}
  #screen-chars .class-card b {font-size:15px}
  #screen-chars .class-card span {color:#c2cbb9}
  #screen-chars .wiz-nav {display:flex;gap:10px;margin-top:14px}
  #screen-chars .wiz-nav button {flex:1;min-width:0}
  #screen-chars .wiz-step>#char-name {margin-bottom:12px}
  #screen-chars .wiz-step>.wiz-next {width:100%}
  #screen-chars .wiz-sum {padding:16px;background:#11221b;border:1px solid #6b7956;border-radius:10px;line-height:1.6;overflow-wrap:anywhere}
  #screen-auth :focus-visible,#screen-chars :focus-visible {outline:2px solid #f0d18b;outline-offset:3px}
  #reg-modal {align-items:flex-start;overflow:auto;padding:max(16px,env(safe-area-inset-top)) 14px}
  #reg-modal .reg-box {margin:auto;width:min(100%,420px);flex-shrink:0;background:#192b23;border-color:#b59a63}
  #reg-modal input {font-size:16px;min-height:48px}
  #reg-modal button {min-height:48px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  #screen-auth .auth-panel,#screen-chars .chars-panel {max-width:620px;margin:0;padding:18px 24px}
  #screen-chars #char-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #screen-chars #class-list {grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 5 filtre in inventar (Tot / Echipament / Iteme / Materiale / Echipabile) pe un singur rand */
.inv-win .inv-filters,body.mobile .win .inv-filters{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.inv-win .inv-filter-btn span{font-size:11px}