*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --sidebar-width:240px;
  --content-padding:1.5rem;
  /* --bg1 sits between --bg and --bg2. It was referenced in ~8 places (mail
     rows, Black Market orders, guild cards, the silver/gems hover popup) but
     never defined, so every one of those panels rendered with NO background
     at all and let the page show through. */
  --bg:#0e0f14;--bg1:#111319;--bg2:#13151c;--bg3:#1a1d28;--bg4:#20243a;
  --border:#2a2e42;--border2:#353a55;--hover-border:rgba(255,255,255,0.22);
  --text:#d4d8f0;--text2:#8890b0;--text3:#555e80;
  /* Description/hint prose. Matches the Premium Shop item-name colour
     (.pstore-name, e.g. the avatar-border names) so descriptions read at the
     same weight as those labels. Retune here, not per rule. */
  --desc:var(--text);
  --gold:#f0c040;--gold2:#c89a20;
  --blue:#4a8fff;--blue2:#2a5fcc;
  --green:#3ecf8e;--green2:#1a7a52;--green3:#0a2218;
  --red:#f55a5a;--red2:#7a1010;
  --orange:#f0a040;
}
/* Form controls do NOT inherit font-family by default, so every button, input
   and select that never named one was rendering in the browser default (Arial)
   next to Inter body text. Inherit instead, so a control picks up whatever it
   sits inside and no future one can leak the system font. */
button,input,select,textarea{font-family:inherit;}
html{height:100%;overflow-y:hidden;overflow-x:auto;}
body{height:100%;overflow:hidden;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;align-items:stretch;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

button{transition:transform 0.12s ease,filter 0.12s ease,box-shadow 0.15s ease,opacity 0.15s ease,background 0.15s,border-color 0.15s;}
button{border:1px solid #fff !important;}
button:hover:not(:disabled){transform:scale(1.05);filter:brightness(1.15);}
button:active:not(:disabled){transform:scale(0.95);filter:brightness(0.9);transition-duration:0.06s;}
button:disabled{opacity:0.42;cursor:not-allowed;}

/* ══ AUTH ══ */
#auth-layer{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:flex-start;justify-content:flex-start;padding:calc(2rem + 50px) 1rem 2rem;overflow-y:auto;overflow-x:auto;opacity:0;transition:opacity 0.3s;}
#auth-layer.visible{opacity:1;}
#auth-layer.hidden{display:none;}
.auth-wrap{width:100%;max-width:420px;margin:auto;}
.auth-wrap:has(#screen-landing.visible){max-width:1100px;min-width:1100px;margin:0 auto;}
#screen-login,#screen-signup,#screen-confirm,#screen-forgot,#screen-reset-password{display:none;}
#screen-login.visible,#screen-signup.visible,#screen-confirm.visible,#screen-forgot.visible,#screen-reset-password.visible{display:block;}
.auth-logo{text-align:center;margin-bottom:2rem;}
.auth-logo-icon{font-size:40px;display:block;margin-bottom:0.5rem;}
.auth-logo-title{font-family:'Cinzel',serif;font-size:22px;color:#fff;letter-spacing:0.08em;}
.auth-logo-sub{font-size:12px;color:var(--text3);letter-spacing:0.15em;text-transform:uppercase;margin-top:4px;}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:2rem;}
.auth-title{font-size:18px;font-weight:600;color:#fff;margin-bottom:1.5rem;}
.terms-card-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:1.5rem;}
.terms-card-header .auth-title{margin-bottom:0;}
.terms-back-btn{flex-shrink:0;background:transparent;border:1px solid var(--border);border-radius:6px;padding:5px 9px;color:var(--text2);cursor:pointer;}
.terms-logo-back{display:block;margin:0 auto;padding:0;border:0;background:transparent;cursor:pointer;}
.terms-back-btn:hover{color:var(--text);border-color:var(--text2);}
.auth-field{margin-bottom:1rem;}
.auth-field label{display:block;font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;}
.auth-field input{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.15s,box-shadow 0.15s;}
.auth-field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,143,255,0.15);}
.auth-submit{width:100%;padding:12px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;margin-top:0.5rem;transition:opacity 0.15s,transform 0.1s;}
.auth-submit:hover{opacity:0.9;}
.auth-submit:active{transform:scale(0.98);}
.auth-submit:disabled{opacity:0.35;cursor:not-allowed;transform:none;}
.auth-switch{text-align:center;margin-top:1.25rem;font-size:13px;color:var(--text2);}
.auth-switch a{color:var(--blue);cursor:pointer;text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}
.auth-msg{font-size:13px;text-align:center;margin-top:1rem;min-height:20px;}
.auth-msg.error{color:var(--red);}
.auth-msg.success{color:var(--green);}
.auth-forgot-link{text-align:right;margin-top:-0.5rem;margin-bottom:0.75rem;font-size:12px;}
.auth-forgot-link a{color:var(--text3);cursor:pointer;text-decoration:none;}
.auth-forgot-link a:hover{color:var(--blue);text-decoration:underline;}
.auth-divider{display:flex;align-items:center;gap:10px;margin:1rem 0;color:var(--text3);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}

.auth-confirm-card{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:3rem 2rem;text-align:center;}
.confirm-back{position:absolute;top:1rem;left:1rem;background:none;border:0;color:var(--text3);cursor:pointer;font-family:inherit;font-size:13px;padding:0;}
.confirm-back:hover{color:var(--text);}
.guest-banner{display:none;background:rgba(240,192,64,0.12);border:1px solid rgba(240,192,64,0.35);border-radius:8px;padding:4px 12px;font-size:12px;color:#f0c040;align-items:center;white-space:nowrap;flex-shrink:0;}
.guest-banner a{color:#f0c040;font-weight:600;cursor:pointer;text-decoration:underline;}
.guest-banner.visible{display:flex;}
.guest-saved-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem;}
.guest-clear-link{font-size:12px;color:var(--text3);cursor:pointer;margin:0.75rem auto 0;display:block;text-align:center;text-decoration:underline;background:none;border:none;font-family:'Inter',sans-serif;}
.guest-clear-link:hover{color:#e55;}
#link-account-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.7);align-items:center;justify-content:center;}
#link-account-modal.open{display:flex;}
.link-modal-card{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:2rem;width:100%;max-width:400px;margin:1rem;}
.link-modal-title{font-size:18px;font-weight:600;color:#fff;margin-bottom:0.5rem;}
.link-modal-sub{font-size:13px;color:var(--text2);margin-bottom:1.5rem;line-height:1.6;}
.confirm-icon{font-size:48px;margin-bottom:1rem;display:block;}
.confirm-title{font-size:20px;font-weight:600;color:#fff;margin-bottom:0.75rem;}
.confirm-sub{font-size:14px;color:var(--text2);line-height:1.7;}

/* ══ LOADING ══ */
#screen-loading{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;opacity:0;transition:opacity 0.3s;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem;}
#screen-loading.visible{opacity:1;display:flex;}
.loading-icon-big{font-size:52px;animation:pulseLoad 1.5s ease-in-out infinite;}
@keyframes pulseLoad{0%,100%{transform:scale(1);}50%{transform:scale(1.12);opacity:0.8;}}
.loading-title{font-family:'Cinzel',serif;font-size:20px;color:#fff;}
.loading-sub{font-size:13px;color:var(--text2);}
.loading-bar-wrap{background:var(--bg3);border-radius:999px;height:5px;width:240px;overflow:hidden;}
.loading-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue2),var(--blue));animation:loadFill 2s ease-in-out forwards;}
@keyframes loadFill{0%{width:0%}60%{width:72%}85%{width:90%}100%{width:100%}}

/* ══ GAME SHELL ══ */
#game{display:none;opacity:0;transition:opacity 0.4s;width:100%;height:100vh;flex-direction:column;}
#game.visible{opacity:1;display:flex;}

.top-bar{height:102px;min-height:102px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0;}
.top-logo{font-family:'Cinzel',serif;font-size:18px;color:#fff;white-space:nowrap;letter-spacing:0.06em;flex-shrink:0;}
.top-logo span{color:var(--gold);}

.player-level{flex-shrink:0;display:flex;align-items:center;gap:9px;background:var(--bg4);border:1px solid var(--border2);border-radius:12px;padding:7px 14px;user-select:none;position:relative;transition:border-color 0.3s;}
.player-level.has-points{border-color:var(--gold);animation:levelGlow 1.8s ease-in-out infinite;}
@keyframes levelGlow{0%,100%{box-shadow:0 0 6px rgba(212,175,55,0.35);}50%{box-shadow:0 0 18px rgba(212,175,55,0.8),0 0 30px rgba(212,175,55,0.3);}}
.pl-pts-badge{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#1a1a1a;font-size:12px;font-weight:700;border-radius:999px;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px;display:none;pointer-events:none;}
.player-level.has-points .pl-pts-badge{display:block;}
.pl-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;}
.pl-num{font-size:20px;font-weight:700;color:var(--gold);}
.pl-xp-wrap{width:80px;background:var(--bg3);border-radius:999px;height:6px;overflow:hidden;}
.pl-xp-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width 0.4s;}

.top-user{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.username-tag{font-size:14px;color:var(--text2);white-space:nowrap;}
/* Clicking your name in the top bar opens your profile card */
.username-tag.clickable{border:1px solid rgba(220,226,240,0.45);border-radius:8px;
  padding:4px 12px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.username-tag.clickable:hover{border-color:rgba(235,240,250,0.85);color:var(--text);background:var(--bg3);}
.logout-btn{padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;}
.logout-btn:hover{border-color:var(--border2);color:var(--text);}
/* â•â• LANGUAGE PICKER (LanguagePicker.jsx) â•â•
   Custom control, not a native <select> — the OS dropdown list can't be themed.
   Trigger matches .mkt-filter / .fight-tier-select; menu matches .chat-settings. */
.lang-pick{position:relative;flex-shrink:0;}
.lang-pick-btn{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;
  background:var(--bg3);border:1px solid var(--border2);color:var(--text);
  font-family:'Inter',sans-serif;font-size:13px;line-height:1.2;cursor:pointer;white-space:nowrap;}
.lang-pick-btn:hover:not(:disabled){transform:none;filter:none;border-color:var(--gold);color:#fff;}
.lang-pick-btn:active:not(:disabled){transform:none;}
.lang-pick-btn.open{border-color:var(--gold);color:#fff;}
/* Globe mark, drawn in CSS so it inherits colour instead of an OS emoji */
.lang-pick-globe{position:relative;width:13px;height:13px;flex-shrink:0;opacity:.8;
  border:1.5px solid currentColor;border-radius:50%;}
.lang-pick-globe::before{content:'';position:absolute;inset:-1.5px 3px;
  border:1.5px solid currentColor;border-radius:50%;}
.lang-pick-globe::after{content:'';position:absolute;left:-1.5px;right:-1.5px;
  top:calc(50% - .75px);height:1.5px;background:currentColor;}
.lang-pick-caret{width:0;height:0;flex-shrink:0;margin-left:2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.7;transition:transform .15s;}
.lang-pick-btn.open .lang-pick-caret{transform:rotate(180deg);}

/* Portalled to <body>, so it needs to clear the modal overlay (z-index 600).
   Width comes from an inline min-width matched to the trigger button. */
.lang-pick-menu{position:fixed;z-index:900;padding:6px;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(20,20,30,0.97);border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.6);}
.lang-pick-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:7px 10px;border-radius:6px;border:1px solid transparent;
  background:transparent;color:var(--text);font-family:'Inter',sans-serif;font-size:13px;
  cursor:pointer;text-align:left;}
.lang-pick-opt:hover:not(:disabled){transform:none;filter:none;background:var(--bg4);}
.lang-pick-opt:active:not(:disabled){transform:none;}
.lang-pick-opt.active{color:var(--gold);border-color:var(--gold2);background:rgba(240,192,64,0.08);}
.lang-pick-opt-code{font-size:12px;color:var(--text3);font-weight:700;letter-spacing:.06em;}
.lang-pick-opt.active .lang-pick-opt-code{color:var(--gold2);}

/* Landing/auth screens: parked at the top-right so players can pick a language
   before they sign in. Resolves against #auth-layer (position:fixed;inset:0),
   so it sits in the same spot on every auth screen regardless of card width. */
.auth-lang{position:absolute;top:16px;right:20px;z-index:5;}
.auth-lang .lang-pick-btn{background:var(--bg2);}

.game-body{flex:1;display:flex;overflow:hidden;min-height:0;min-width:0;}
/* scrollbar-gutter keeps the width constant whether or not the scrollbar
   shows — without it, changing a panel's height (splitting/grouping stacks)
   re-flowed the auto-fill grids and the bag picker aligned to them jumped. */
.main-content{flex:1;min-width:0;overflow:auto;padding:var(--content-padding);scrollbar-gutter:stable;container-type:inline-size;container-name:game-content;}

/* Sidebar groups select their own scene. The 20% navy wash leaves each supplied
   image at 80% opacity while keeping foreground text and game art readable. */
.main-content{
  background-color:#06111a;
  background-image:linear-gradient(rgba(3,12,19,.2),rgba(3,12,19,.2)),var(--panel-scene,none);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
}
#game:has(#marketplace-btn.selected,#blackmarket-btn.selected,#inventory-btn.selected,#mail-btn.selected,#guild-btn.selected) .main-content{--panel-scene:url('/assets/ui/panel-bg-social.png');}
#game:has(#prof-list .prof-item.selected) .main-content{--panel-scene:url('/assets/ui/panel-bg-professions.png');}
#game:has(#armory-btn.selected,#troops-btn.selected,#combat-btn.selected,#gear-btn.selected,#trial-btn.selected,#worldboss-btn.selected,#pvp-btn.selected) .main-content{--panel-scene:url('/assets/ui/panel-bg-combat.png');}
#game:has(#premium-btn.selected,#quests-btn.selected) .main-content{--panel-scene:url('/assets/ui/panel-bg-shop.png');}

/* Trial of Prestige uses its combat scene across the entire game shell, not
   merely behind the content column. The existing 20% navy wash retains the
   requested 80% image visibility. */
#game:has(#trial-btn.selected){
  background:linear-gradient(rgba(3,12,19,.7),rgba(3,12,19,.7)),url('/assets/ui/panel-bg-combat.png') center / cover fixed;
}
#game:has(#trial-btn.selected) :is(.top-bar,.sidebar){background:rgba(3,12,19,.2);}
#game:has(#trial-btn.selected) .main-content{background:transparent;}

/* Every themed sidebar group uses its scene across the full shell. The .7
   wash makes the supplied artwork 30% visible behind top bar, sidebar, and
   content alike. */
#game:has(#marketplace-btn.selected,#blackmarket-btn.selected,#inventory-btn.selected,#mail-btn.selected,#guild-btn.selected){background:linear-gradient(rgba(3,12,19,.7),rgba(3,12,19,.7)),url('/assets/ui/panel-bg-social.png') center / cover fixed;}
#game:has(#prof-list .prof-item.selected){background:linear-gradient(rgba(3,12,19,.7),rgba(3,12,19,.7)),url('/assets/ui/panel-bg-professions.png') center / cover fixed;}
#game:has(#armory-btn.selected,#troops-btn.selected,#combat-btn.selected,#gear-btn.selected,#worldboss-btn.selected,#pvp-btn.selected){background:linear-gradient(rgba(3,12,19,.7),rgba(3,12,19,.7)),url('/assets/ui/panel-bg-combat.png') center / cover fixed;}
#game:has(#premium-btn.selected,#quests-btn.selected){background:linear-gradient(rgba(3,12,19,.7),rgba(3,12,19,.7)),url('/assets/ui/panel-bg-shop.png') center / cover fixed;}
#game:has(#marketplace-btn.selected,#blackmarket-btn.selected,#inventory-btn.selected,#mail-btn.selected,#guild-btn.selected,#prof-list .prof-item.selected,#armory-btn.selected,#troops-btn.selected,#combat-btn.selected,#gear-btn.selected,#trial-btn.selected,#worldboss-btn.selected,#pvp-btn.selected,#premium-btn.selected,#quests-btn.selected) :is(.top-bar,.sidebar,.main-content){background:transparent;}

/* ══ PROFESSIONS SIDEBAR ══ */
.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;padding:1rem 0.75rem;display:flex;flex-direction:column;gap:4px;}
/* Section label over the profession list. Was --text3 (#555e80), which sits
   at 2.86:1 on the --bg2 sidebar — under the 4.5:1 WCAG AA floor, and it
   read as disabled rather than as a heading. --text takes it to 12.92:1.
   Size and letter-spacing still keep it subordinate to the profession names
   below, so the hierarchy comes from scale rather than from dimming it. */
.sidebar-title{font-family:'Cinzel',serif;font-size:12px;color:var(--text);text-transform:uppercase;letter-spacing:0.1em;padding:0 8px;margin-bottom:6px;}
.sidebar-divider{height:1px;background:var(--border);margin:8px 4px;}

.prof-item{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background 0.12s,border-color 0.12s;border:1px solid transparent;user-select:none;}
/* Treasure chest waiting on this profession's gathering map (chests.js):
   a red ! floated slightly above the tab's top-right corner */
.prof-chest-badge{position:absolute;top:-7px;right:2px;color:var(--red);font-size:15px;font-weight:900;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none;}
/* Conquest "!" sits 4px past the last letter of the label, raised to the
   top-right corner. It FLOWS after the label rather than sitting at a fixed
   left offset, because the label is translated (EN "Guild" / ES "Hermandad")
   and a hardcoded x would land mid-word in another language. The label box
   shrinks to its text so the badge lands right after it; -6px cancels most of
   the row's 10px flex gap, leaving 4px. */
#guild-btn .prof-item-body{flex:0 0 auto;}
#guild-conquest-badge{position:static;align-self:flex-start;margin:-2px 0 0 -6px;}
.prof-item:hover{background:var(--bg3);}
.prof-item.selected{background:var(--bg3);border-color:var(--border2);}
/* Sidebar icons, 20% up from 20px/26px. font-size is the knob rather than a
   width on the img: .sys-ico is sized in em, so the PNG art and the plain-emoji
   fallback (professions with no art yet) grow together instead of drifting
   apart. The box grows by the same 20% so the labels stay evenly spaced. */
.prof-item-icon{font-size:24px;flex-shrink:0;width:31px;text-align:center;}
/* Compensate for the compact silhouettes of the replacement profession art. */
#prof-item-woodcutting .sys-ico{--sys-ico-size:1.21em;}
#prof-item-mining .sys-ico,#prof-item-crafting .sys-ico{--sys-ico-size:1.1em;}
#prof-item-smelting .item-ico{width:1.265em;height:1.265em;}
#prof-item-herbalism .sys-ico,#prof-item-fishing .sys-ico,#prof-item-farming .sys-ico,#prof-item-cooking .sys-ico{--sys-ico-size:1.2em;}
#prof-item-skinning .sys-ico{--sys-ico-size:1.33em;}
/* Per-tab sizing keeps the replacement navigation drawings balanced without
   transforming them outside their layout boxes. */
#troops-btn .sys-ico{--sys-ico-size:1.056em;}
#gear-btn .sys-ico{--sys-ico-size:1.2em;}
.prof-item-body{flex:1;min-width:0;}
.prof-item-name{font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;display:flex;justify-content:space-between;align-items:baseline;gap:6px;}
.prof-item-lvl{font-size:12px;color:var(--gold);font-weight:600;}
.prof-xp-wrap{background:var(--bg4);border-radius:999px;height:5px;overflow:hidden;margin-top:5px;}
.prof-xp-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green2),var(--green));width:0%;transition:width 0.3s;}

/* ══ XP TOOLTIP ══ */
/* Hover tooltips are the TOPMOST layer. A tooltip explains whatever is under
   the cursor, so anything hoverable — including inside a modal — has to be
   able to describe itself above that modal. Several modals are inline
   zIndex:9999 (PvP opponent loadout, Black Market), so 700 left the tooltip
   buried underneath them; 10000 clears every panel in the app.
   Shares the layer with .chat-ctx-menu (also 10000). That menu is clickable
   and the tooltip is pointer-events:none, so the tooltip can never swallow a
   click on it. Keep this the highest z-index in the file. */
#prof-tooltip{position:fixed;z-index:10000;background:var(--bg4);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:12px;min-width:150px;pointer-events:none;opacity:0;transition:opacity 0.12s;box-shadow:0 6px 20px rgba(0,0,0,0.4);}
#prof-tooltip.show{opacity:1;}
/* Monster hover tooltip only. Enemy names and drop lists vary enough that the
   shrink-to-fit panel jumped width from card to card; this floors it at the
   Wyvern's hover panel. 172 is the CONTENT width — #prof-tooltip is
   border-box with 14px side padding and a 1px border, so the panel itself
   lands at Wyvern's natural 202px. Scoped to a wrapper rather than raising
   #prof-tooltip's own min-width, which the profession, marketplace and gear
   tooltips all share. */
.tip-monster{min-width:172px;}
/* Gear-comparison panel — same shell as #prof-tooltip, sits beside it. */
#prof-tooltip-compare{position:fixed;z-index:10000;background:var(--bg4);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:12px;min-width:150px;pointer-events:none;opacity:0;transition:opacity 0.12s;box-shadow:0 6px 20px rgba(0,0,0,0.4);}
#prof-tooltip-compare.show{opacity:1;}
.mount-token-icon > .item-ico{transform:translateY(.08em);}
.inv-slot:has(.mount-token-icon),.mkt-cell:has(.mount-token-icon){position:relative;}
.inv-slot:has(.mount-token-icon) .mount-token-icon,.mkt-cell:has(.mount-token-icon) .mount-token-icon{position:static !important;}
.mount-token-coin{position:absolute;top:4px;left:4px;width:15px;height:15px;object-fit:contain;z-index:1;pointer-events:none;}
.tip-compare-head{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:5px;}
.tip-row{display:flex;justify-content:space-between;gap:14px;padding:2px 0;color:var(--text2);}
.tip-row b{color:var(--text);font-weight:600;}
/* Equipment rows share ONE grid instead of the flex .tip-row above: fixed
   value and delta tracks keep every number in a single column down the
   panel, where space-between let them drift with the digit count. The rows are
   display:contents so their cells are the grid's own items — the tracks have
   to be shared across rows to line up, which a per-row grid cannot do.
   These MUST stay below .tip-row: the rows carry both classes, so equal
   specificity makes source order the tie-breaker and display:flex would win. */
.tip-equip-grid{display:grid;grid-template-columns:auto minmax(74px,auto) minmax(58px,auto);column-gap:8px;align-items:center;}
/* Nothing to compare against (the equipped panel, your own doll, a PvP
   opponent) — drop the delta track rather than leave it as dead space. */
.tip-equip-grid.no-delta{grid-template-columns:auto minmax(74px,auto);}
.tip-equip-row{display:contents;}
.tip-equip-row>*{padding:2px 0;}
/* Values START at the same x so every leading + lines up down the panel, and a
   trailing % or a long value (200/200 (100%)) grows to the RIGHT instead of
   shoving the sign leftward. Centring looked tidy on equal-width numbers but
   staggered "+3" against "+3%", and any wide row widened the track and pulled
   every short value away from its neighbours. */
.tip-equip-row>b{text-align:left;}
/* Stat swing against the equipped piece: gain green, loss red. */
.tip-delta{font-weight:600;text-align:center;}
.tip-delta.up{color:var(--green);}
.tip-delta.down{color:var(--red);}
/* Equip tooltip's "Requires Unlock" row while that forge tier is still locked */
.tip-equip-row.tip-locked>*{color:var(--red);}
/* Recruit button's hover tip while the troop's forge tier is still locked */
.tip-locked-msg{color:var(--red);font-weight:600;}
.tip-title{font-size:13px;font-weight:700;margin-bottom:4px;}
/* Stat descriptions in the armory. #prof-tooltip is shrink-to-fit with no
   max-width, so a long paragraph with no break opportunities stretched the
   panel across the whole viewport and kept it two lines tall. Capping the
   prose block (rather than the tooltip) lets it wrap and grow downwards
   without touching the label/value tooltips, whose rows are already narrow.
   Same 200px measure as .tip-desc below, but keeps this text upright — that
   class is italic/secondary for marketplace item blurbs. */
.tip-stat-desc{max-width:200px;font-size:calc(.85em + 2px);margin-top:4px;line-height:1.45;}
/* The conversion rates are the point of the panel, so they read at full
   strength; the caveat note underneath recedes. */
.tip-stat-effect{color:var(--text);padding:2px 0 5px;}
.tip-stat-effect b{color:var(--gold);}
.tip-stat-rule{color:var(--text3);font-size:12px;padding:1px 0;}
.tip-stat-note{color:var(--text3);font-size:12px;margin-top:5px;}
.tip-divider{border-top:1px solid var(--border2);margin:5px 0;}
.tip-desc{font-style:italic;color:var(--text2);margin-top:5px;max-width:200px;line-height:1.4;}

/* ══ CRAFTING TABS (Materials / Weapons / Gear) ══ */

/* ══ RESOURCE PANEL ══ */
.panel-header{display:flex;align-items:center;gap:14px;margin-bottom:1.25rem;}
.panel-icon{font-size:32px;}
/* Two header styles exist: .panel-header puts the icon in its own .panel-icon
   box (32px), while the title-bar panels (Guild, Marketplace, Mailbox, PvP,
   Premium Shop, Trial, World Boss) sit it inline inside .panel-title, where it
   inherited this 20px and came out SMALLER than the 24px sidebar icon. Scale
   the icon alone — raising font-size would enlarge the title text with it.
   20px x 1.4 = 28px: a step up from the sidebar, a step below .panel-icon.
   vertical-align keeps the taller image centred on the Cinzel cap-height
   instead of riding the -0.15em baseline nudge .sys-ico uses in body text. */
.panel-title{font-family:'Cinzel',serif;font-size:20px;color:#fff;--sys-ico-size:1.4em;}
.panel-title .sys-ico{vertical-align:-0.28em;}
/* Troops page header only: the knight is a full figure rather than a single
   object, so it needs more room than the 1.4em every other panel title uses.
   Scoped to its own class so no other header moves. */
.troopu-panel-title .sys-ico{--sys-ico-size:1.96em;}
/* One Combat Power treatment, shared by the Armory header and the PvP defense
   tab: the uppercase label reads like .armory-subtitle, the figure is gold and
   carries the crossed-swords icon the guild list uses. */
/* Cinzel explicitly, not `inherit`: the Armory label sits inside .panel-title
   (Cinzel) but the PvP one sits in a plain body div (Inter), so `inherit`
   silently rendered the two in different typefaces. */
/* Label lifted off the dimmest ink (--text3) onto --text2, and the figure onto
   a brighter gold than --gold with a soft glow, so Power Level reads clearly
   against the dark header instead of receding into it. Both surfaces share
   this rule, so the Armory and the PvP defense tab stay identical. */
.armory-cp,.pvp-def-cp{font-family:'Cinzel',serif;font-size:12px;color:var(--text2);
  text-transform:uppercase;letter-spacing:0.1em;white-space:nowrap;}
.armory-cp{margin-left:14px;}
.pvp-def-cp{margin-bottom:8px;}
.armory-cp b,.pvp-def-cp b{color:#ffd964;font-weight:700;font-size:16px;
  text-shadow:0 0 10px rgba(255,217,100,0.35);
  letter-spacing:normal;margin-left:6px;}
.talent-intro-pointer{position:absolute;top:calc(100% + 7px);left:4px;z-index:8999;
  display:flex;align-items:center;gap:5px;white-space:nowrap;pointer-events:none;
  color:#fff;background:linear-gradient(180deg,#8a262c,#481118);border:1px solid #b4474f;
  border-radius:4px;padding:4px 8px;font-size:12px;font-weight:800;
  box-shadow:0 3px 12px rgba(0,0,0,.55);}
.talent-intro-arrow{position:absolute;left:72%;bottom:calc(100% + 4px);color:#8a262c;
  font-size:26px;font-weight:900;line-height:.75;-webkit-text-stroke:1px #b4474f;
  transform:translateX(-50%) scaleY(.88);transform-origin:bottom center;text-shadow:0 2px 3px rgba(0,0,0,.75);}
.talent-intro-explanation{flex-shrink:0;margin-bottom:8px;padding:10px 12px;
  color:var(--text);font-size:13px;line-height:1.5;background:rgba(35,68,86,.72);
  border:1px solid #8b96a5;border-radius:4px;}
.talent-intro-title{color:#fff;font-family:'Cinzel',serif;font-size:15px;font-weight:800;margin-bottom:4px;}
.talent-intro-explanation .modal-btn{margin-top:10px;}
.panel-sub{font-size:12px;color:var(--text2);margin-top:2px;}
/* Profession header level/XP line — bolder and gold, matching the level accents
   used elsewhere (.prof-item-lvl, .pl-num). */
.prof-level-sub{color:var(--gold);font-weight:700;}
.gear-average-panel{
  display:inline-block;
  margin-top:8px;
  padding:2px 8px;
  font-size:15px;
  line-height:1.4;
  border:14px solid transparent;
  border-image:url('/assets/ui/trial-prestige-frame.png') 92 / 14px stretch;
  background:linear-gradient(180deg,#0c3146,#03111d);
}
/* The live weapon+gear score inside the forge hint — gold like every other
   level figure (.prof-item-lvl, .prof-level-sub, .pl-num). */
.forge-score{color:var(--gold);font-weight:700;}
.node-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.node-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1rem 0.8rem;text-align:center;cursor:pointer;transition:border-color 0.15s,transform 0.12s,box-shadow 0.15s;user-select:none;display:flex;flex-direction:column;gap:0;}
.node-card:hover:not(.locked){border-color:var(--hover-border);transform:translateY(-2px);}
.node-card.active{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 18px rgba(62,207,142,0.15);}
.node-card.locked{opacity:0.45;cursor:not-allowed;filter:grayscale(0.6);}
.node-icon{font-size:34px;margin-bottom:7px;}
.node-name{font-size:14px;font-weight:700;color:var(--text);}
.node-recipe{font-size:12px;color:var(--text2);margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px;min-height:16px;}
.node-recipe-ing{color:var(--text);background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:1px 6px;}
/* Recipe ingredients in the craft modal hover to reveal where to get them */
.nm-ing-src{cursor:help;}
.nm-ing-src:hover{border-color:var(--hover-border);}
.node-recipe-sep{color:var(--text3);font-size:12px;}
.node-recipe-ing.missing{color:var(--red);border-color:var(--red2);background:rgba(245,90,90,0.08);}
.node-locked-msg{color:var(--text3);font-size:12px;margin-top:6px;}
.node-progress{background:var(--bg4);border-radius:999px;height:6px;overflow:hidden;margin-top:10px;}
.node-progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green2),var(--green));width:0%;}
.node-status{font-size:12px;color:var(--text3);margin-top:5px;text-transform:uppercase;letter-spacing:0.06em;min-height:12px;}
.node-card.active .node-status{color:var(--green);}
/* Pinned to the bottom of the card so the timer/XP line sits at the same
   height on every node — recipes wrap to different numbers of lines, which
   otherwise floats it. padding-top keeps the minimum gap that margin-top:auto
   would collapse on the tallest card in a row. */
.node-footer{font-size:12px;color:var(--text3);margin-top:auto;padding-top:5px;}
/* Smelting / cooking only (#node-panel-body wraps just that grid). Recipes run
   1-4 ingredients, so the chip block wraps to a different number of lines per
   card and used to push each progress bar to its own height. Letting it absorb
   the row's slack -- grow only, never shrink -- pins the bar, status and footer
   to the bottom of every card, so the bars line up across the grid. */
#node-panel-body .node-recipe{flex:1 0 auto;align-content:center;}

/* ══ BATTLE TROOPS — allied units beside the player ══ */
.btl-allies{display:flex;gap:10px;align-items:center;justify-content:flex-start;}
.btl-troop-stack{display:flex;flex-direction:column;gap:6px;}
.btl-troop-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:6px 10px;min-width:132px;}
.btl-troop-card.dead{opacity:.5;}
.btl-troop-name{font-size:12px;font-weight:700;margin-bottom:2px;white-space:nowrap;}
.btl-troop-dead{font-size:12px;color:var(--text3);padding:4px 0;}
.btl-bar.mini{height:9px;}
.btl-bar.mini span{font-size:12px;}
.btl-charge.mini{height:4px;margin-top:2px;}
.btl-troop-count{font-size:12px;color:#f1f5f9;margin-top:1px;}
/* Troop active-skill badge — inside a reserved column clear of the gold frame, lit
   when ready and dimmed with a countdown while charging. The card already
   sets position:relative and overflow:visible. It takes pointer events (it
   used to have none) so hovering it opens the skill tooltip. */
.btl-troop-card:has(> .btl-troop-skill){padding-right:48px;}
.btl-troop-skill{position:absolute;top:50%;right:8px;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:30px;height:30px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);
  line-height:1;cursor:help;}
.btl-troop-skill .btl-troop-skill-icon{font-size:14px;}
.btl-troop-skill.charging{opacity:.55;}
.btl-troop-skill.charging .btl-troop-skill-icon{font-size:10px;}
.btl-troop-skill-cd{font-size:9px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text2);}
/* Pre-combat troop picker layer (overlays the fight modal, keeps its inputs) */
/* The picker used to be an inset:0 overlay, so it took the HEIGHT OF THE
   FIGHT-SETUP MODAL behind it -- a modal made tall by its food/skill/troop slot
   rows and Start button. A two-item list therefore rendered as a long panel
   with a big dead area under the buttons, where the Armory / Trial picker is
   its own modal and simply shrinks to its content.
   Now it is an in-flow block that sizes to its content, and the host modal
   hides its other children while it is open, so the modal shrinks with it.
   Still position:relative -- .node-modal-close anchors to it. Dropping
   overflow-y is fine: .food-pick-list caps itself at 320px and scrolls, which
   is the same thing that bounds the Armory picker. */
.troop-picker-layer{position:relative;background:var(--bg1,#141722);border-radius:inherit;padding:1.25rem;display:flex;flex-direction:column;gap:.7rem;z-index:5;}
.game-modal:has(> .troop-picker-layer){padding:0;}
.game-modal:has(> .troop-picker-layer) > *:not(.troop-picker-layer){display:none;}
/* Make this layer's buttons measure like the Armory / Trial picker's, which is
   the same markup in a .game-modal that is NOT a flex container. There a
   .modal-btn is just an inline-block: natural height, shrink-to-fit width,
   left-aligned, and its flex:1 is inert. Here the column flex turned that
   flex:1 into "grow to fill the leftover height" and the default stretch
   alignment into full width, so Clear Slot / Cancel came out 69.9x298 against
   the Armory's 35x83. Direct children only -- the buttons inside
   .troop-pick-footer are in a ROW and still want flex:1 to split the width. */
.troop-picker-layer > .modal-btn{flex:0 0 auto;align-self:flex-start;}

/* ══ FORGE TIER BAR ══ */
.forge-tier-bar{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px;}
.forge-tier-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;border-left:3px solid var(--tier-color,var(--border));transition:background .15s,color .15s;}
.forge-tier-btn:hover{background:var(--bg3);color:var(--text);}
.forge-tier-btn.active{background:var(--tier-color,var(--accent,#7c6af7));color:#fff;border-color:transparent;}
.forge-tier-btn.locked{opacity:.6;}

/* ══ INVENTORY TABS ══ */
.inv-tab-bar{display:flex;gap:6px;margin-bottom:1rem;}
.inv-tab-btn{padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s,color .15s;}
.inv-tab-btn:hover{background:var(--bg3);color:var(--text);}
.inv-tab-btn.active{background:var(--bg3);color:var(--gold);border-color:var(--gold);}
.inv-empty-msg{text-align:center;color:var(--text3);padding:2rem 1rem;font-size:13px;line-height:1.6;}
.inv-troop-list{display:flex;flex-direction:column;gap:10px;padding:4px 0;}

/* ══ INVENTORY SORT BAR ══ */
.inv-sort-bar{display:flex;gap:6px;align-items:center;margin-bottom:1rem;}
.inv-sort-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;}
.inv-sort-btn{padding:5px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.inv-sort-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--border2);}
.inv-sort-btn.active{border-color:#4a9eff;color:#4a9eff;}
.inv-group-btn{padding:7px 16px;font-size:13px;border-color:#4a9eff;}

/* ══ INVENTORY GRID ══ */
.inv-slot-grid{display:grid;grid-template-columns:repeat(auto-fill,72px);gap:8px;}
.inv-slot{position:relative;width:72px;height:78px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;user-select:none;}
.inv-slot.empty{opacity:0.45;}
.inv-slot.filled{cursor:pointer;transition:border-color 0.12s,transform 0.1s,opacity 0.12s;}
.inv-slot.filled:hover{transform:translateY(-2px);}
/* The 2px lift pulls the tile's bottom edge out from under a cursor resting on
   it, which fires mouseleave → tile drops back → mouseenter, and the tile
   flickers (and its tooltip with it) for as long as you hold still. This
   pseudo-element hangs below the lifted tile so the hit area still covers
   where the tile was, keeping the hover state stable. It overhangs by 4px, not
   the 2px of the lift: the containing block is the padding box, which the 1px
   border already insets, so 2px lands a pixel short of the old bottom edge.
   Hit-testing a pseudo-element targets its originating element, so clicks,
   drags and the title attribute all still behave as if the tile were hit. */
.inv-slot.filled:hover::after{content:'';position:absolute;left:0;right:0;top:0;bottom:-4px;}
.inv-slot.selected{box-shadow:0 0 0 2px var(--blue);}
.inv-slot.dragging{opacity:0.25;pointer-events:none;}
.inv-slot.drag-over{border-color:var(--blue) !important;box-shadow:0 0 0 2px rgba(74,143,255,0.3);background:var(--bg3);}
.inv-drag-ghost{position:fixed;z-index:1000;pointer-events:none;opacity:0.9;box-shadow:0 8px 24px rgba(0,0,0,0.5);}
.inv-slot-icon{font-size:39px;line-height:1;flex:1;display:flex;align-items:center;justify-content:center;}
/* Item art (public/assets/items/*.png) drawn where an emoji used to sit. Sized
   in em so it inherits whatever font-size each icon container already tuned for
   its emoji — one rule covers inventory slots, the item modal, marketplace
   cells, profession nodes, food pickers and inline tooltip text alike. */
.item-ico{width:1.15em;height:1.15em;object-fit:contain;display:inline-block;vertical-align:-0.18em;}
/* Mounts render 20% larger than other item art. Sized rather than
   transform:scale(), so the icon still occupies the box it draws in and
   cannot overlap a neighbouring tile.

   Done here rather than by re-cutting the PNGs: those are already trimmed
   tight to the artwork, so shrinking their canvas — the usual way to make a
   contain-fitted icon draw bigger — only bought 3-5% before hitting the ink.

   Matched on the filename so it follows the art wherever it is drawn, and so
   a new mount inherits it. War Bear, Armored Horse, Wyvern and Ancient
   Dragon opt out — they already read large enough. */
.item-ico[src*="/mount_"]{width:1.38em;height:1.38em;}
.item-ico[src*="/mount_war_bear"],
.item-ico[src*="/mount_armored_horse"],
.item-ico[src*="/mount_wyvern"],
.item-ico[src*="/mount_ancient_dragon"]{width:1.15em;height:1.15em;}

/* ══ SYSTEM / UI ICON ART ══
   UI emoji replaced by public/assets/system/*.png so the interface renders the
   same on Windows, macOS and Android instead of picking up each OS's emoji
   font. Sized in em, so an icon tracks the font-size of whatever label it sits
   in and every existing layout keeps working. See scripts/gen_system_art.js.

   Sized 1em, NOT 1.15em like .item-ico: these PNGs are cropped tight to the
   artwork, while an emoji glyph carries padding inside its em box. Rasterising
   ⚔️ 🪙 📜 puts their visible ink at 0.99em, so 1em is what the old glyphs
   actually measured. Tune --sys-ico-size to nudge every icon at once. */
:root{--sys-ico-size:1em;}
.sys-ico{width:var(--sys-ico-size);height:var(--sys-ico-size);object-fit:contain;display:inline-block;vertical-align:-0.15em;}
.loading-icon-big img{width:52px;height:52px;object-fit:contain;display:block;}
.inv-slot-qty{width:100%;text-align:center;font-size:13px;font-weight:700;color:var(--text1);padding:3px 0;background:rgba(255,255,255,0.08);border-top:1px solid var(--border);}
.inv-silver-line b{color:var(--gold);}
/* ── Hover panels that reveal a full, unabbreviated number ──────────────────
   Every one of these shares a single solid look; the Armory troop count is the
   reference. Colours are literals on purpose — these panels twice rendered
   see-through because they referenced --bg1 / --text1, neither of which was
   ever defined, and an undefined var() with no fallback resolves to nothing. */
.inv-currency-tip,.troop-count-tip{position:relative;cursor:default;}
.inv-currency-popup,.troop-count-popup{
  display:none;position:absolute;left:50%;transform:translateX(-50%);
  background:#1a1a2e;border:1px solid #333;border-radius:8px;padding:5px 10px;
  font-size:13px;font-weight:600;color:#fff;white-space:nowrap;z-index:999;
  box-shadow:0 4px 12px rgba(0,0,0,.6);}
/* Currency lives in a top bar so its panel drops below; troop counts sit low
   inside a card, so theirs rises above. */
.inv-currency-popup{top:calc(100% + 6px);}
.troop-count-popup{bottom:calc(100% + 6px);}
.inv-currency-tip:hover .inv-currency-popup,
.troop-count-tip:hover .troop-count-popup{display:block;}
/* `.mkt-coin span` styles the small "Silver" label, and the popup is also a
   span inside that pill — it out-specifies the rule above, so win it back. */
.mkt-coin .inv-currency-popup{color:#fff;font-weight:600;font-size:13px;}
/* Floating "+2.3K 🪙" on a silver gain. Centred under the currency readout so
   it lines up with it, and the whole travel stays BELOW the host's bottom edge
   (starts 18px under, fades out 2px under) — so it never rises far enough to
   sit on top of the silver count itself. */
.silver-delta-float{position:absolute;left:50%;top:calc(100% + 6px);
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;font-weight:700;color:var(--green);pointer-events:none;
  animation:silverFloat 2s ease-out forwards;white-space:nowrap;z-index:10;}
@keyframes silverFloat{
  0%{opacity:1;transform:translate(-50%,12px);}
  100%{opacity:0;transform:translate(-50%,-4px);}
}
.inv-empty{grid-column:1/-1;text-align:center;color:var(--text3);font-size:13px;padding:3rem 1rem;}

/* Rarity borders are generated from RARITY_META at runtime — see
   injectRarityStyles() in settings.js. Adding a rarity there styles it here. */

/* ══ GAME MODALS (item info / sell / split) ══ */
.game-modal-overlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,0.65);display:flex;align-items:center;justify-content:center;padding:1rem;}
/* position:relative anchors .node-modal-close inside the box — without it the
   absolutely-positioned ✕ escapes to the fixed overlay and lands in the
   screen's top-right corner instead of the modal's. */
.game-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:1.5rem;width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,0.5);position:relative;}
.item-modal-header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:1rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;}
.item-modal-name{font-size:17px;font-weight:700;}
.item-modal-price{font-size:13px;color:var(--gold);white-space:nowrap;}
.item-modal-body{display:flex;gap:14px;margin-bottom:1rem;}
.item-modal-icon{font-size:40px;width:76px;height:76px;flex-shrink:0;background:var(--bg3);border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;}
.item-modal-info{flex:1;min-width:0;}
.item-modal-desc{font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:0.6rem;}
.item-modal-actions{display:flex;gap:8px;margin-top:0.75rem;}
.item-modal-actions.future{opacity:0.5;}
.modal-btn{flex:1;padding:9px 10px;border-radius:9px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.modal-btn.primary{background:linear-gradient(135deg,var(--blue2),var(--blue));border:none;color:#fff;}
.modal-btn:disabled{cursor:not-allowed;}

/* Shared picker and modal frame — every selection dialog uses the same square
   navy-and-gold treatment as the updated Trial panels. */
.game-modal{
  border:18px solid transparent;
  border-image:url('/assets/ui/trial-prestige-frame.png') 92 / 18px stretch;
  border-radius:0;
  background:linear-gradient(180deg,#0c3146,#03111d);
  box-shadow:inset 0 1px rgba(115,213,255,.16),inset 0 -1px rgba(0,0,0,.8),0 20px 60px rgba(0,0,0,.64);
}
.game-modal .troop-picker-layer{background:transparent;border-radius:0;}
.game-modal :is(.modal-btn,.qty-btn){
  border:1px solid rgba(184,139,52,.7);
  border-radius:0;
  background:linear-gradient(180deg,rgba(22,72,94,.95),rgba(4,23,37,.98));
  color:#e6ece7;
  box-shadow:inset 0 1px rgba(107,209,246,.17),inset 0 -1px rgba(0,0,0,.8);
}
.game-modal .modal-btn.primary{border-color:#e8c86f;background:linear-gradient(180deg,#e8c96e,#8b5b1d);color:#120d05;}
.game-modal :is(.modal-btn,.qty-btn):hover:not(:disabled){border-color:#efd27e;filter:brightness(1.12);}

/* ══ SHARED PRESTIGE VISUAL SYSTEM ════════════════════════════════════════
   The Trial introduced the game's final visual language.  These selectors
   deliberately restyle shared components rather than changing individual
   screens, so legacy panels keep their existing markup and behavior. */
:root{
  --prestige-ink:#06111a;
  --prestige-panel:#071b2a;
  --prestige-panel-hi:#0a3045;
  --prestige-gold:#d8b15b;
  --prestige-gold-bright:#f0d783;
  --prestige-frame:url('/assets/ui/trial-prestige-frame.png');
}

/* All functional panels use the same square, nine-slice frame. */
:is(.node-card,.btl-troop-card,.guild-invite-card,.guild-create-box,
    .guild-search-box,.guild-ann-card,.shop-card,.shop-hist-row,
    .tab-card,.item-modal-icon,.inv-slot,.equip-slot,.btl-food-slot,
    .mkt-cell,.market-card,.pvp-card,.wb-card,.quest-card,.mail-card,
    .daily-quest-card,.profile-card,.settings-card,.trial-sub-panel){
  border:14px solid transparent !important;
  border-image:var(--prestige-frame) 92 / 14px stretch !important;
  border-radius:0 !important;
  background-color:var(--prestige-panel) !important;
  background-image:linear-gradient(180deg,rgba(11,51,72,.94),rgba(3,15,26,.98)) !important;
  box-shadow:inset 0 0 20px rgba(25,142,193,.10),0 8px 24px rgba(0,0,0,.35);
}

/* Dense data rows and small information surfaces retain a slim gold edge. */
:is(.guild-member-header,.guild-member-row,.guild-search-row,.guild-app-row,
    .node-recipe-ing,.shop-gems-pill,.forge-tier-btn,.inv-slot-qty,
    .stats-list,.paper-doll,.armory-skill-row,.combat-hint,.trial-fight-tabnote){
  border-radius:0 !important;
  border-color:rgba(194,150,61,.58) !important;
  background-color:rgba(4,20,33,.88) !important;
}

/* Buttons are square, layered metal controls across every legacy screen. */
:is(button,.modal-btn,.guild-btn,.shop-buy-btn,.armory-ob-btn,.trial-prestige-btn,
    .trial-fight-main-btn,.trial-skip5-btn,.shop-page-btn,.forge-tier-btn,
    .inv-tab-btn,.inv-sort-btn,.combat-tab,.qty-btn){
  border-radius:0 !important;
  border:1px solid rgba(207,166,73,.72) !important;
  background:linear-gradient(180deg,rgba(21,75,99,.98),rgba(4,24,39,.98)) !important;
  color:#eef3ed !important;
  box-shadow:inset 0 1px rgba(255,239,177,.16),0 1px 8px rgba(0,0,0,.36);
}
:is(button,.modal-btn,.guild-btn,.shop-buy-btn,.armory-ob-btn,.trial-prestige-btn,
    .trial-fight-main-btn,.trial-skip5-btn,.shop-page-btn,.forge-tier-btn,
    .inv-tab-btn,.inv-sort-btn,.combat-tab,.qty-btn):hover:not(:disabled){
  border-color:var(--prestige-gold-bright) !important;
  background:linear-gradient(180deg,rgba(34,102,130,.98),rgba(6,38,58,.98)) !important;
  color:#fff8dd !important;
}
:is(.modal-btn.primary,.shop-buy-btn,.trial-prestige-btn,.trial-fight-main-btn,
    .guild-btn.promote,.forge-tier-btn.active,.shop-page-btn.active){
  background:linear-gradient(180deg,#efd176,#8b5c20) !important;
  border-color:#f4dc91 !important;
  color:#171006 !important;
  text-shadow:none !important;
}

/* Navigation is copy-first; the active state is the signature centred line. */
:is(.inv-tab-bar,.combat-tabbar,.forge-tier-bar,.pstore-tabs,.trial-tabs){
  gap:14px;
  border-bottom:1px solid rgba(96,137,153,.24);
}
:is(.inv-tab-btn,.combat-tab,.forge-tier-btn,.pstore-tab,.trial-tab){
  position:relative;
  padding:8px 3px !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  color:#b7b8a4 !important;
}
:is(.inv-tab-btn.active,.combat-tab.active,.forge-tier-btn.active,.pstore-tab.active,.trial-tab.active){
  color:#fff3c6 !important;
  background:transparent !important;
}
:is(.inv-tab-btn.active,.combat-tab.active,.forge-tier-btn.active,.pstore-tab.active,.trial-tab.active)::after{
  content:'';
  position:absolute;
  height:2px;
  bottom:-1px;
  left:-12px;
  right:-12px;
  background:linear-gradient(90deg,transparent,#7a581d 18%,#f0cf72 50%,#7a581d 82%,transparent);
  box-shadow:0 0 8px rgba(237,195,84,.45);
}

/* Legacy side navigation follows the same text-led selection treatment. */
.sidebar{background:rgba(3,12,19,.64);border-color:rgba(193,150,61,.42);}
.prof-item{border-radius:0;border:0;background:transparent;}
.prof-item:hover{background:rgba(10,48,69,.48);}
.prof-item.selected{border-color:transparent;background:linear-gradient(90deg,rgba(25,92,119,.44),transparent);}
.prof-item.selected::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:2px;background:linear-gradient(transparent,#f1cf70,transparent);box-shadow:0 0 7px rgba(240,207,112,.6);}

/* Inputs, selectors, tooltips, and popups lose the legacy rounded treatment. */
:is(input,select,textarea,#prof-tooltip,#prof-tooltip-compare,.inv-currency-popup,
    .troop-count-popup,.guild-textarea,.btl-troop-skill){
  border-radius:0 !important;
  border-color:rgba(194,150,61,.62) !important;
  background-color:#071925 !important;
  color:#eef3ed !important;
}

/* Existing section labels stay visible over the darker scene treatments. */
:is(.panel-title,.panel-sub,.armory-subtitle,.sidebar-title,.shop-hist-title,
    .guild-set-label,.guild-create-title,.trial-sub-title){
  color:#f4f5ed !important;
  text-shadow:0 1px 4px #000;
}

/* Sell / split quantity picker */
.sell-qty-row{display:flex;gap:8px;align-items:center;margin:0.9rem 0;}
.qty-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:17px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;flex-shrink:0;}
.qty-btn.max{width:auto;padding:0 14px;font-size:12px;}
/* Modal quantity fields reuse the marketplace number input (.mkt-num-input) so
   they carry its dark fill, blue focus ring and hidden spinners; only the row
   fit is overridden — stretch to fill and match the 38px .qty-btn height. */
.sell-qty-row .mkt-num-input{flex:1;min-width:0;height:38px;font-size:15px;font-family:'Inter',sans-serif;}
.sell-total{text-align:center;font-size:14px;color:var(--text2);margin:0.5rem 0;}
.sell-total b{color:var(--gold);font-size:16px;}

/* ══ COMBAT ══ */
.combat-tabbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.25rem;}
.combat-tab{padding:7px 13px;border-radius:9px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.combat-elite-lock-tip{display:inline-flex;}
/* Selected tab = gold border + gold text, matching .trial-tab.active (the
   Prestige tabs) so every top tab bar reads the same when selected. */
.combat-tab.active{background:var(--bg3);border-color:var(--gold);color:var(--gold);}
/* The live-battle tab: slightly bigger, red highlight border. After .active so
   the red border wins the tie while the active gold text/bg still applies. */
.combat-tab.battle{padding:9px 16px;font-size:13px;border-color:var(--red);}
.combat-hint{font-size:12px;color:var(--text3);margin-top:1rem;text-align:center;}
.xp-boost-row{display:flex;align-items:center;gap:12px;padding:8px 12px;margin-bottom:8px;background:var(--bg2);border-radius:8px;border:1px solid var(--border);}
.xp-boost-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;}
.xp-boost-toggle input{width:16px;height:16px;accent-color:#f0b232;cursor:pointer;}
.xp-boost-label{font-weight:600;color:var(--text1);font-size:13px;}
.xp-boost-desc{font-size:12px;color:var(--text3);}
.mastery-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1rem;text-align:center;user-select:none;}
.gear-section{margin-bottom:1.5rem;}
.gear-section-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:0.75rem;}

/* Armory */
.armory-layout{display:flex;gap:1.5rem;flex-wrap:wrap;}
.armory-left{flex:1;min-width:300px;}
.armory-right{width:auto;flex-shrink:0;}
.armory-stats-doll-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:.25rem;}
.armory-stats-col{flex:1;min-width:0;}
.armory-doll-col{flex-shrink:0;}
.armory-subtitle{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.6rem;}
/* ── Game-flavor description text ── shared Alegreya family (loaded in
   index.html); sizes stay on each rule. .game-desc hooks the inline-styled
   description divs in JSX (GuildPanel building/research blurbs). */
.game-desc,.wb-timer,.wb-fight-note,.wb-tier-note,.wb-fight-dmg-note,
.trial-prestige-sub,.trial-prestige-desc,.trial-info-note,.pstore-desc,
.guild-info-desc,.guild-set-hint,
.trial-info-lead,.trial-info-list li,.trial-stat-label{font-family:'Alegreya',serif;}
.paper-doll{position:relative;padding:12px;border-radius:14px;background:var(--bg);border:1px solid var(--border);overflow:hidden;}
.doll-silhouette{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:96%;z-index:0;pointer-events:none;opacity:0.45;}
.doll-silhouette svg{height:100%;width:auto;display:block;}
.doll-silhouette svg .cbf{fill:var(--text2);}
.doll-silhouette svg .cbs{stroke:var(--text2);fill:none;}
.doll-silhouette.full{opacity:1;}
.doll-grid.hidden-slots{visibility:hidden;}
.doll-hide-corner{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:12px;color:var(--text2);cursor:pointer;user-select:none;margin-top:6px;}
.doll-hide-corner.ghost{visibility:hidden;pointer-events:none;}
.doll-tabbar{display:flex;gap:6px;margin:2px 0 8px;}
.doll-tab{flex:1;padding:5px 0;font-size:12px;font-weight:600;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-family:'Inter',sans-serif;}
.doll-tab.active{border-color:var(--blue);color:var(--text);background:var(--bg3);}
.doll-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,77px);grid-template-rows:repeat(3,87px);gap:8px;}
.doll-slot{background:rgba(19,21,28,0.5);border:1px dashed var(--border2);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;user-select:none;transition:border-color 0.12s;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.doll-slot.filled{border-style:solid;background:rgba(26,29,40,0.5);}
.doll-slot.future{cursor:default;}
.doll-slot.empty{background:transparent;border-color:transparent;cursor:default;pointer-events:none;}
.doll-slot-icon{font-size:26px;display:block;height:30px;line-height:30px;}
/* Equipped item/cosmetic ART at 2x (52px) while the SLOT stays 77x87 and the
   label keeps its exact old spot: the icon span keeps its old 30px flow box
   and the doubled img paints as an absolutely-positioned overlay. It centres
   on the SLOT, not on that 30px span — the span sits high because the label
   takes the room below it, so centring there left every icon ~10px above the
   slot's middle with a dead gap underneath. Worst on the offhand: a shield is
   the only portrait art that fills the full 52px, so its top edge came within
   7px of the border while ~28px sat empty below. The art now overlaps the top
   of the label, which is intended — the label reads through as a caption
   behind the art. Emoji fallbacks stay 26px in normal flow. */
.doll-slot-icon .item-ico,.doll-slot-icon .sys-ico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;}
/* Empty-slot outline keeps the SAME 30px flow box as .doll-slot-icon and
   paints its 38px art as a centered overlay. Without this the empty slot was
   38px tall and the filled one 30px, so every slot label jumped 4px the moment
   you equipped something. Both states must measure identically -- that is about
   the 30px FLOW box, which both still have, so the label never moves.
   The 46% here is deliberate and does NOT track the equipped art's 50%: the
   outline is the placeholder for an EMPTY slot and stays where it has always
   sat, while only the equipped art centres on the slot. */
.doll-slot-outline{display:block;line-height:0;position:relative;height:30px;}
.doll-slot-outline svg{width:38px;height:38px;stroke:var(--text2);display:block;
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);}
/* Nudged down 3px by margin-top +3 / margin-bottom -3, which cancels out: the
   slot is a centred flex column, so growing the label's box would have pushed
   the icon flow box UP by half the growth and taken the empty-slot outline with
   it. Net content height is unchanged, so only the label moves. Done with
   margins rather than position/transform because either of those makes the
   label paint over the equipped art instead of under it. */
.doll-slot-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;display:block;margin-top:7px;margin-bottom:-3px;}
/* z-index keeps the tier above the 52px equipped-art overlay, which sits
   later in the DOM and would otherwise paint over the badge */
.slot-tier-badge{position:absolute;top:4px;right:4px;font-size:12px;font-weight:700;color:var(--text2);line-height:1;z-index:1;}
/* Masterpiece marker (talent: Master of Craft). Top-LEFT so it never collides
   with the tier badge on the right. */
.slot-mp-badge{position:absolute;top:4px;left:4px;font-size:12px;font-weight:900;color:var(--gold);line-height:1;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,0.75);}
/* "Can't equip" marker on gear whose forge tier is still locked. Bottom-RIGHT,
   sitting just above the count row (.inv-slot-qty ≈ 22px tall). */
.slot-noequip-badge{position:absolute;right:3px;bottom:24px;width:18px;height:18px;z-index:2;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));}
/* Red fleur-de-lis Prestige icon (PrestigeIcon.jsx). currentColor drives the
   fill, so the colour is set here in one place — change it to recolour. */
.prestige-ico{width:1.1em;height:1.1em;vertical-align:-0.16em;color:#e8331c;display:inline-block;}
.stats-list{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:12px;}
/* Armory → Other Bonuses opener, sits directly under the Profession Speed
   list. Carries the same blue gradient as .shop-buy-btn (the premium shop's
   Buy button) so it reads as the primary action in the stats column; sizing
   stays smaller to suit the narrower column. */
.armory-ob-btn{width:100%;margin-top:0.5rem;padding:7px 0;font-size:12px;font-weight:700;border-radius:8px;border:none;background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;cursor:pointer;font-family:'Inter',sans-serif;}
.armory-ob-btn:hover{opacity:0.9;}
/* The bonus list grows as the player unlocks more, so the panel is capped to
   the viewport (the overlay adds 1rem either side) and only the LIST scrolls —
   the title and ✕ stay pinned, which they did not when the whole panel was the
   scroll container. min-height:0 lets the flex child actually shrink. */
.other-bonuses{max-height:calc(100vh - 2rem);display:flex;flex-direction:column;}
.ob-scroll{overflow-y:auto;min-height:0;}

/* PvE cards (dungeons / raids / farming / world boss) */

/* ══ GATHER FLOAT ANIMATION ══ */
#float-layer{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden;}
.gather-float{position:absolute;bottom:70px;font-size:16px;font-weight:700;color:var(--green);text-shadow:0 2px 8px rgba(0,0,0,0.6);animation:gatherFloat 1.4s ease-out forwards;white-space:nowrap;}
@keyframes gatherFloat{
  0%{transform:translateY(0);opacity:0;}
  12%{opacity:1;}
  100%{transform:translateY(-120px);opacity:0;}
}

/* ══ OFFLINE REWARDS MODAL ══ */
#offline-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.75);align-items:center;justify-content:center;}
#offline-modal.open{display:flex;}
.offline-card{background:var(--bg2);border:3px solid transparent;border-image:linear-gradient(135deg,#e2fbff 0%,#77dcff 24%,#3aaee8 48%,#b9f1ff 72%,#5bc9f4 100%) 1;border-radius:0;padding:2rem;width:100%;max-width:720px;margin:1rem;display:flex;flex-direction:column;gap:1rem;box-shadow:0 0 0 1px rgba(208,247,255,.7),0 0 22px rgba(74,190,235,.42),inset 0 0 18px rgba(91,205,244,.1);}
/* Gained on the left, used-up on the right. Below 680px the two ledgers stack
   rather than squeezing the rows. */
.offline-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.offline-col{display:flex;flex-direction:column;gap:0.6rem;min-width:0;}
/* Fills its column so the "nothing here" side matches the height of the side
   that has rows — otherwise a short empty box sits next to a tall list. */
.offline-col-empty{font-size:12px;color:var(--text3);font-style:italic;background:var(--bg3);border:1px dashed var(--border);border-radius:10px;padding:0.9rem;text-align:center;flex:1;display:flex;align-items:center;justify-content:center;}
@media (max-width:680px){.offline-cols{grid-template-columns:1fr;}}
.offline-header{text-align:center;}
.offline-title{font-size:22px;font-weight:700;color:#fff;margin-bottom:0.3rem;}
.offline-sub{font-size:13px;color:var(--text2);}
.offline-section-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);}
.offline-section-label.spent{color:var(--red);}
.offline-rows{display:flex;flex-direction:column;gap:0.6rem;flex:1;}
.offline-row{display:flex;align-items:center;gap:0.75rem;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:0.65rem 0.9rem;}
.offline-col:first-child :is(.offline-row,.offline-col-empty){border-color:var(--green);}
.offline-col:nth-child(2) :is(.offline-row,.offline-col-empty){border-color:var(--red);}
.offline-row-icon{font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 46px;min-height:46px;}
.offline-monster-img{display:block;width:46px;height:46px;object-fit:contain;}
.offline-row-body{flex:1;}
.offline-row-name{font-size:14px;font-weight:600;color:var(--text);}
.offline-row-detail{font-size:12px;color:var(--text2);margin-top:2px;}
.offline-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.offline-row-qty{font-size:18px;font-weight:700;color:var(--green);}
.offline-row-qty.spent{color:var(--red);}
.offline-row-xp{font-size:12px;font-weight:600;color:var(--blue);}
/* Bags-full notice under the offline ledgers — deliberately loud, since the
   player's gathering has stopped and nothing else on this card says so. */
.offline-bagsfull{display:flex;align-items:center;justify-content:center;gap:8px;padding:0.7rem 1rem;background:rgba(220,80,60,0.12);border:1px solid var(--red);border-radius:12px;color:var(--red);font-weight:700;font-size:14px;text-align:center;}
.offline-claim-btn{width:100%;padding:0.85rem;background:var(--blue);border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-top:0.25rem;}
.offline-claim-btn:hover:not(:disabled){background:var(--blue2);}

/* ══ COMBAT ZONES & BATTLE ══ */
.zone-layout{display:flex;gap:14px;align-items:flex-start;}
.zone-list{display:flex;flex-direction:column;gap:4px;width:160px;flex-shrink:0;max-height:420px;overflow-y:auto;}
.zone-item{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;transition:border-color 0.15s,color 0.15s;}
.zone-item:hover{border-color:var(--border2);}
.zone-item.active{background:var(--blue2);border-color:var(--blue);color:#fff;}
.monster-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;}
.monster-card{background:var(--bg2);border:2px solid #fff;border-radius:4px;padding:0.9rem;text-align:center;cursor:pointer;transition:border-color 0.15s,transform 0.12s;user-select:none;overflow:hidden;}
.monster-card:hover{border-color:#fff;transform:translateY(-2px);}
.monster-card-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:0.6rem;}
.monster-card-icon{font-size:44px;line-height:1.2;padding:0.1rem 0 0.15rem;overflow:hidden;}
.monster-modal-icon{font-size:34px;}
.fight-tier-select{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:5px 10px;font-size:13px;cursor:pointer;}
.node-modal-start.fight-start{background:var(--orange);color:#1a1205;}
/* Battle Stats Bar — toggle button + expandable panel */
.bst-wrap{position:relative;display:flex;justify-content:flex-end;margin-bottom:6px;font-size:12px;}
.bst-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;width:160px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:6px 8px;cursor:pointer;color:var(--text);font-size:12px;font-weight:600;transition:background .15s;gap:3px;}
.bst-toggle:hover{background:var(--bg3);}
.bst-toggle-top{display:flex;align-items:center;gap:4px;font-size:12px;}
.bst-toggle-bot{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);}
.bst-toggle-dur{font-variant-numeric:tabular-nums;}
.bst-toggle-dmg{color:var(--orange);font-weight:700;}
.bst-toggle-arrow{font-size:12px;color:var(--text3);transition:transform .2s;margin-left:2px;}
.bst-toggle-arrow.open{transform:rotate(180deg);}
.bst-kills-pill{font-size:12px;font-weight:600;color:var(--text2);}
/* twice the old width (420 -> 840). The stats column keeps its 180px — every
   extra pixel goes to loot/consumed on the right; the panel just grows taller
   as stat rows are added. max-width keeps it on-screen on narrow viewports. */
/* twice the old width (420 -> 840) and twice the old height (242 -> 484). The
   stats column keeps its 180px — every extra pixel of width goes to
   loot/consumed on the right, and the extra height goes to them too. */
/* z-index 20 clears the combat VFX that overlap it: damage floats sit at 10,
   .btl-vfx/.vfx-el at 5 — and at 5 the panel lost the tie anyway, because
   .bst-wrap renders before .battle-top so the battle cards painted last.
   Stays far below .game-modal-overlay (600) and #prof-tooltip (10000). */
.bst-panel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;width:840px;max-width:calc(100vw - 32px);min-height:484px;max-height:calc(100vh - 96px);position:absolute;top:100%;right:0;margin-top:4px;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.45);overflow-y:auto;}
.bst-cols{display:flex;gap:14px;align-items:stretch;min-height:458px;}
.bst-left{flex:0 0 180px;min-width:0;}
.bst-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
/* loot and consumed split the panel's extra height between them */
.bst-loot,.bst-consumed{flex:1;display:flex;flex-direction:column;}
/* room to actually show a run's drops instead of one cramped line */
.bst-loot-grid,.bst-consumed-grid{min-height:52px;align-content:flex-start;overflow-y:auto;}
.bst-loot-grid{flex:1;}
.bst-consumed-grid{flex:1;}
/* drop tiles: icon on top, item name under it, count last — so a run's drops
   are identifiable at a glance instead of being a row of bare icons. The
   rarity-* border colour comes from injectRarityStyles. */
.bst-loot-item.bst-loot-stack{flex-direction:column;gap:1px;padding:5px 8px;justify-content:center;min-width:74px;max-width:104px;}
.bst-loot-stack .bst-loot-name{font-size:12px;line-height:1.15;text-align:center;max-width:92px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.bst-loot-stack .bst-loot-qty{font-size:12px;font-weight:700;color:var(--text);}
.bst-section-title{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;}
.bst-row{display:flex;justify-content:space-between;padding:2px 0;}
.bst-label{color:var(--text3);font-size:12px;}
.bst-val{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.bst-highlight{color:var(--orange);font-size:13px;}
.bst-loot{background:rgba(46,204,113,0.08);border:1px solid rgba(46,204,113,0.18);border-radius:8px;padding:8px 10px;}
.bst-loot-grid{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;}
/* border-color lives here at (0,1,0) so the injected .rarity-* rules (same
   specificity, appended later) win and tint each drop by its rarity */
.bst-loot-item{display:flex;align-items:center;gap:3px;background:rgba(46,204,113,0.1);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:12px;}
.bst-loot-icon{font-size:16px;}
.bst-loot-qty{font-weight:600;color:var(--text2);font-size:12px;}
/* margin-top:auto pins the XP/silver totals to the bottom of the loot box.
   .bst-loot-grid carries flex:1 and did that job while drops existed, but the
   "No drops yet" placeholder that replaces it does not grow, which left the
   totals stranded mid-box on an empty run. */
.bst-xp-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-top:auto;padding-top:4px;}
.bst-empty{font-size:12px;color:var(--text3);font-style:italic;margin-bottom:4px;}
.bst-consumed{background:rgba(231,76,60,0.08);border:1px solid rgba(231,76,60,0.18);border-radius:8px;padding:8px 10px;}
.bst-consumed-grid{display:flex;flex-wrap:wrap;gap:5px;}
.bst-con-item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(231,76,60,0.1);border-radius:6px;}
.bst-con-icon{font-size:20px;}
.bst-con-qty{position:absolute;bottom:1px;right:3px;font-size:12px;font-weight:700;color:var(--text);background:rgba(0,0,0,0.6);border-radius:3px;padding:0 3px;line-height:1.3;}
.bst-con-tier{position:absolute;top:1px;right:2px;font-size:12px;font-weight:700;color:var(--gold);background:rgba(0,0,0,0.6);border-radius:3px;padding:0 3px;line-height:1.3;}
/* ── Defeat modal ── */
.defeat-modal{max-width:520px!important;text-align:center;}
.defeat-header{margin-bottom:0.5rem;}
.defeat-skull{font-size:40px;margin-bottom:0.25rem;}
.defeat-enemy{font-size:13px;color:var(--text2);margin-top:0.15rem;display:flex;align-items:center;justify-content:center;gap:6px;}
.defeat-enemy-img{display:block;width:32px;height:32px;object-fit:contain;}
.enemy-inline-art{display:inline-block;width:20px;height:20px;object-fit:contain;vertical-align:middle;}
.defeat-modal .bst-cols{text-align:left;}
.defeat-modal .bst-val,.defeat-modal .bst-label{font-size:12px;}
.defeat-modal .bst-highlight{font-size:12px;}
.defeat-close-btn{margin-top:0.5rem;width:100%;}
.battle-top{display:flex;align-items:center;gap:12px;margin-bottom:1.2rem;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:9px 14px;}
.battle-top-name{font-size:13px;font-weight:700;white-space:nowrap;}
/* ── Active buff/debuff badges, in a strip directly above the HP bar ──
   The strip keeps its height even while empty. Collapsing it (the old
   :empty{display:none}) meant the anchor grew the instant an effect landed
   and, since .btl-unit-head centres its children, the HP/MP bars visibly
   jumped down and back on every buff. Badges fill left→right, so extra
   effects line up beside the first one. */
.btl-status-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;
  gap:4px;min-height:18px;margin-bottom:3px;}
.btl-status-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:999px;background:var(--bg4);border:1px solid var(--green);line-height:1;animation:statusPop .18s ease-out;}
.btl-status-badge[onmouseenter]{cursor:help;}
.btl-status-badge.bad{border-color:var(--red);}
.btl-status-icon{display:inline-flex;align-items:center;justify-content:center;font-size:12px;width:14px;height:14px;}
.btl-status-icon .sys-ico{width:14px;height:14px;object-fit:contain;}
.btl-status-time{font-size:12px;font-weight:700;color:var(--text2);font-variant-numeric:tabular-nums;}
/* The same strip on a troop card, which is a third the width of a unit head.
   Three team wards is the most that can ever run at once (one active per
   fielded slot, three slots), so the badges shrink just enough to keep all
   three on one line and the card's height fixed. .sys-ico is sized in em, so
   the icon art follows the font size down with the label. */
.btl-troop-card .btl-status-row{gap:3px;min-height:12px;margin-bottom:1px;}
.btl-troop-card .btl-status-badge{padding:1px 4px;gap:2px;}
.btl-troop-card .btl-status-icon,
.btl-troop-card .btl-status-time{font-size:10px;}
@keyframes statusPop{0%{opacity:0;transform:scale(.6);}100%{opacity:1;transform:scale(1);}}
.btl-top-bars{display:flex;flex-direction:column;gap:4px;flex:1;max-width:420px;}
.btl-bar{position:relative;background:var(--bg4);border-radius:6px;height:13px;overflow:hidden;}
.btl-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.6);}
.btl-bar-fill{height:100%;width:100%;transition:width 0.15s ease-out;}
.btl-bar.hp .btl-bar-fill{background:var(--green);}
.btl-bar.mp .btl-bar-fill{background:var(--blue);}
.btl-flee{background:var(--red);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:700;padding:7px 18px;cursor:pointer;margin-left:auto;}
/* "End After" sits to the LEFT of Flee. It takes over the margin-left:auto that
   pushes the pair right, so when it is present Flee just needs a plain gap —
   Flee keeps its own auto margin for the trial/world-boss views, where this
   button is not rendered at all. */
/* Fixed width: the armed label ("⏹️ Ending After ✕") is wider than the idle
   one, and .battle-top is a flex row — letting the button resize on click stole
   25px from the enemy's HP bar, shifting and shrinking it mid-fight. Reserve
   the wider state up front so toggling never reflows the row. */
.btl-end-after{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:12px;font-weight:700;padding:7px 14px;cursor:pointer;margin-left:auto;white-space:nowrap;width:136px;flex:0 0 136px;text-align:center;}
.btl-end-after:hover{border-color:var(--hover-border);}
.btl-end-after.armed{background:var(--orange);border-color:transparent;color:#1a1205;}
.btl-end-after + .btl-flee{margin-left:8px;}
/* 2x speed toggle (trial + world boss). Same trick as .btl-end-after: it takes
   over the auto margin, and its width is fixed so switching between "⚡ 2×" and
   "⚡ 2× ON" can't reflow the enemy HP bar next to it. */
.btl-speed2x{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:12px;font-weight:700;padding:7px 14px;cursor:pointer;margin-left:auto;white-space:nowrap;width:92px;flex:0 0 92px;text-align:center;}
.btl-speed2x:hover{border-color:var(--hover-border);}
.btl-speed2x.active{background:var(--gold);border-color:transparent;color:#1a1205;}
.btl-speed2x + .btl-flee{margin-left:8px;}
.battle-arena{display:flex;align-items:flex-start;justify-content:space-around;gap:12px;min-height:280px;padding-top:1.5rem;}
.btl-side{flex:1;display:flex;justify-content:center;}
.btl-divider{width:1px;align-self:stretch;background:var(--border);}
/* ── PvP arena ──
   Both sides get the ally layout (gap + vertical centering), so the enemy's
   troops sit the same distance from their character as yours do — by default
   only .btl-allies carried those, leaving the enemy stack flush and stretched.
   Troop cards take a fixed width so the two stacks can never size differently
   (168px fits the longest name, "Adamantite Berserker", without clipping), and
   the taller column gap leaves room for a status/debuff bar above each card.
   Scoped to .pvp-arena: the zone battle and guild war share these classes, and
   guild war reuses .btl-troop-stack as a wrapped enemy grid. */
.pvp-arena .btl-side{gap:10px;align-items:center;}
.pvp-arena .btl-troop-stack{gap:28px;}
.pvp-arena .btl-troop-card{width:168px;}
#game:has(#pvp-btn.selected) .main-content :is(
  .pvp-panel,.stats-list,.paper-doll,.btl-slot-group,.btl-card,
  .btl-troop-card,.food-pick-row,.battle-top
){border-radius:0!important;}
.pvp-opponent-attack-hitbox{position:relative;width:42px;height:42px;flex:0 0 42px;}
.pvp-opponent-attack{position:absolute;inset:0;width:42px;height:42px;padding:0;font-size:1.1rem;transform-origin:50% 50%;}
.pvp-opponent-attack:hover:not(:disabled){transform:none;}
.pvp-opponent-attack-hitbox:hover .pvp-opponent-attack:not(:disabled){transform:scale(1.08);}
.pvp-defender-avatar{transform:scaleX(-1);}
.btl-card{position:relative;width:270px;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:0.8rem;display:flex;flex-direction:column;gap:6px;overflow:visible;}
.btl-player-card{z-index:6;}
#pve-tab-content .btl-player-card,.trial-font-preview .btl-player-card{border-radius:0;}
.btl-enemy-card{border:1px solid var(--border2);border-radius:4px;}
.btl-card-name{text-align:center;font-size:13px;font-weight:700;background:var(--bg3);border-radius:6px;padding:4px;}
.btl-avatar{position:relative;text-align:center;font-size:84px;height:112px;display:flex;align-items:center;justify-content:center;}
.btl-player-card .btl-avatar{z-index:7;}
.btl-avatar.char svg{height:100%;width:auto;display:block;overflow:visible;}
.btl-avatar.char svg .cbf{fill:var(--text2);}
.btl-avatar.char svg .cbs{stroke:var(--text2);fill:none;}
.btl-attack-label{text-align:center;font-size:12px;font-weight:600;color:var(--text2);background:var(--bg3);border-radius:5px;padding:3px;}
.btl-charge{background:var(--bg4);border-radius:999px;height:7px;overflow:hidden;}
.btl-charge-fill{height:100%;width:0%;background:linear-gradient(90deg,#7a4dff,#a55aff);border-radius:999px;}
.btl-dmg-float{position:absolute;top:-20px;font-size:16px;font-weight:800;color:var(--red);pointer-events:none;animation:dmgfloat 1.8s ease-out forwards;z-index:10;white-space:nowrap;display:flex;align-items:center;gap:2px;}
.btl-dmg-float.crit{color:var(--orange);font-size:20px;}
.btl-dmg-float.skill{font-size:30px;}
/* The defense regen tick passes a 🛡️ icon, which otherwise picks up the 30px
   skill size — keep it at the base size of damage and food-heal numbers. */
.btl-dmg-float.skill.heal{font-size:16px;}
.btl-dmg-skill-icon{font-size:1em;line-height:1;}
.btl-dmg-float.heal{color:var(--green);}@keyframes dmgfloat{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-50px);}}
.pvp-heal-particle{position:absolute;bottom:10%;font-size:18px;font-weight:900;color:var(--green);pointer-events:none;z-index:11;text-shadow:0 0 6px rgba(46,204,113,0.6);animation:pvpHealUp 1s ease-out forwards;}
@keyframes pvpHealUp{0%{opacity:1;transform:translateY(0) scale(0.7);}40%{opacity:1;transform:translateY(-20px) scale(1);}100%{opacity:0;transform:translateY(-50px) scale(0.5);}}
.btl-vfx{position:absolute;pointer-events:none;z-index:5;}
.btl-vfx-slash{width:40px;height:64px;filter:drop-shadow(0 0 3px rgba(165,215,255,.5));animation:vfx-slash 0.5s ease-out forwards;}
.btl-vfx-slash svg{width:100%;height:100%;display:block;}
.btl-vfx-arrow{width:40px;height:12px;filter:drop-shadow(0 0 2px rgba(210,230,255,.35));animation:vfx-arrow 1s ease-out forwards;}
.btl-vfx-arrow svg{width:100%;height:100%;display:block;}
.btl-vfx-magic{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#eee0ff 10%,rgba(165,110,255,.9) 24%,rgba(120,80,255,.35) 48%,transparent 70%);box-shadow:0 0 14px 3px rgba(120,80,255,.35);animation:vfx-magic 0.5s ease-out forwards;}
.btl-vfx-magic::before{content:"";position:absolute;inset:2px;border:1.5px solid rgba(215,185,255,.8);border-radius:50%;}
.btl-vfx-magic::after{content:"";position:absolute;left:17px;top:17px;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 -20px 2px #e4ceff,18px -8px 2px #e4ceff,14px 16px 2px #e4ceff,-15px 14px 2px #e4ceff,-19px -8px 2px #e4ceff;}
.btl-vfx-enemy-hit{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(255,60,60,0.8) 0%,rgba(255,120,60,0.4) 50%,transparent 70%);box-shadow:0 0 10px 3px rgba(255,60,60,0.3);animation:vfx-enemy-hit 0.4s ease-out forwards;}
@keyframes vfx-slash{0%{opacity:1;transform:translateX(-64px) scale(0.85);}55%{opacity:0.8;transform:translateX(-16px) scale(1);}100%{opacity:0;transform:translateX(10px) scale(1.05);}}
@keyframes vfx-arrow{0%{opacity:1;transform:translateX(-110px);}40%{opacity:1;transform:translateX(0);}55%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(0);}}
@keyframes vfx-magic{0%{opacity:0;transform:scale(0.3);}30%{opacity:1;transform:scale(1.1);}60%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.6);}}
@keyframes vfx-enemy-hit{0%{opacity:0;transform:scale(0.3);}20%{opacity:1;transform:scale(1.1);}50%{opacity:0.8;transform:scale(1);}100%{opacity:0;transform:scale(0.5);}}
.btl-vfx-flame{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,rgba(255,160,20,0.95) 0%,rgba(255,80,0,0.6) 50%,transparent 70%);box-shadow:0 0 14px 5px rgba(255,100,0,0.5);animation:vfx-magic 0.5s ease-out forwards;}
.btl-vfx-ghost{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,rgba(180,140,255,0.8) 0%,rgba(120,80,200,0.4) 50%,transparent 70%);box-shadow:0 0 16px 6px rgba(160,120,255,0.35);animation:vfx-ghost 0.6s ease-out forwards;}
.btl-vfx-lightning{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,rgba(200,220,255,0.95) 0%,rgba(100,160,255,0.6) 50%,transparent 70%);box-shadow:0 0 14px 5px rgba(140,180,255,0.5);animation:vfx-lightning 0.4s ease-out forwards;}
.btl-vfx-shadow{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,rgba(60,0,80,0.9) 0%,rgba(100,20,140,0.5) 50%,transparent 70%);box-shadow:0 0 14px 5px rgba(80,0,120,0.45);animation:vfx-magic 0.5s ease-out forwards;}
@keyframes vfx-ghost{0%{opacity:0;transform:scale(0.3);}20%{opacity:0.9;transform:scale(1.1);}50%{opacity:0.7;transform:scale(1.2);}100%{opacity:0;transform:scale(1.8);}}
@keyframes vfx-lightning{0%{opacity:0;transform:scale(0.2);}15%{opacity:1;transform:scale(1.3);}30%{opacity:0.5;transform:scale(0.9);}45%{opacity:1;transform:scale(1.1);}100%{opacity:0;transform:scale(1.5);}}

/* ═══ Skill VFX system ═══ */
:root{
  --vfx-sword:#d8d8e8;--vfx-axe:#ff8800;--vfx-hammer:#ffcc00;
  --vfx-bow:#a8d8a0;--vfx-crossbow:#a0a8b4;--vfx-staff:#7f51ff;--vfx-wand:#b060ff;
  --vfx-bleed:#cc2222;--vfx-holy:#ffd760;--vfx-lightning:#60b0ff;
  --vfx-cosmic:#8090ff;--vfx-shadow:#8040c0;
}
.vfx-el{position:absolute;pointer-events:none;z-index:5;will-change:transform,opacity;}
.vfx-el svg{display:block;width:100%;height:100%;overflow:visible;}
.vfx-dot{border-radius:50%;}
.vfx-square{border-radius:1px;}
.vfx-spark{width:2px;border-radius:1px;}
.vfx-star{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.vfx-feather{border-radius:50% 50% 50% 0;transform-origin:center;}
@keyframes vfx-pop{0%{opacity:0;transform:scale(0.2);}25%{opacity:1;transform:scale(1.15);}100%{opacity:0;transform:scale(0.9);}}
@keyframes vfx-burst{0%{opacity:1;transform:scale(0.3);}40%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.8);}}
@keyframes vfx-ring{0%{opacity:0.9;transform:scale(0.2);}50%{opacity:0.6;transform:scale(0.8);}100%{opacity:0;transform:scale(1.4);}}
@keyframes vfx-fly{0%{opacity:1;transform:translate(0,0) scale(1);}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0.3);}}
@keyframes vfx-debris{0%{opacity:1;transform:translate(0,0) rotate(0deg);}50%{opacity:1;transform:translate(calc(var(--dx) * 0.6),var(--dy)) rotate(var(--rot));}100%{opacity:0;transform:translate(var(--dx),var(--land)) rotate(calc(var(--rot) * 2));}}
@keyframes vfx-rune{0%{opacity:0;transform:scale(0.3) rotate(0deg);}20%{opacity:0.8;transform:scale(1.1) rotate(72deg);}80%{opacity:0.7;transform:scale(1) rotate(288deg);}100%{opacity:0;transform:scale(0.8) rotate(360deg);}}
@keyframes vfx-aura{0%{opacity:0;transform:scale(0.6);}15%{opacity:0.6;}85%{opacity:0.5;}100%{opacity:0;transform:scale(1.15);}}
@keyframes vfx-soul{0%{opacity:0;transform:translate(0,0);}20%{opacity:1;transform:translate(var(--dx),var(--dy));}100%{opacity:0;transform:translate(-120px,var(--dy)) scale(0.4);}}
@keyframes vfx-sigil{0%{opacity:0;transform:scale(0.5) translateY(8px);}20%{opacity:0.95;transform:scale(1.05) translateY(0);}65%{opacity:0.8;}100%{opacity:0;transform:scale(1.15) translateY(-8px);}}
@keyframes vfx-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes vfx-glow{0%,100%{opacity:0.4;transform:scale(1);}50%{opacity:0.8;transform:scale(1.15);}}
@keyframes vfx-flash{0%{opacity:0.7;}100%{opacity:0;}}
@keyframes vfx-descend{0%{opacity:0;transform:translateY(-60px) scale(0.6);}30%{opacity:1;}90%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(5px) scale(1.05);}}
@keyframes vfx-travel{0%{opacity:1;transform:translateX(-120px);}70%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(0);}}
@keyframes vfx-linger{0%{opacity:0.8;}100%{opacity:0;}}
@keyframes vfx-crack{0%{opacity:0;stroke-dashoffset:40;}30%{opacity:1;}100%{opacity:0;stroke-dashoffset:0;}}
@keyframes vfx-arc{0%{opacity:1;stroke-dashoffset:80;}40%{opacity:1;stroke-dashoffset:0;}100%{opacity:0;stroke-dashoffset:0;}}

.btl-unit-head{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.btl-unit-head-enemy .battle-top-name{margin-left:50px;}
.btl-charge-txt{text-align:center;font-size:12px;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums;}
.battle-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:1.5rem;}
.btl-slot-group{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;}
.btl-slot-title{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:7px;}
.btl-slot-row{display:flex;gap:8px;}
.btl-food-slot{position:relative;width:46px;height:58px;background:var(--bg3);border:1px dashed var(--border2);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;font-size:22px;color:var(--text2);cursor:pointer;user-select:none;overflow:hidden;}
/* Loadout slot past the purchased allowance (Black Market Shop unlock) */
.btl-food-slot.locked{opacity:.5;justify-content:center;font-size:17px;background:var(--bg2);}
.btl-food-slot .btl-food-icon{flex:1;display:flex;align-items:center;justify-content:center;font-size:28px;}
/* Troop drawings share the loadout slot with food and skills, but their art is
   taller. Keep them centered and 20% smaller than the generic item-art size so
   the drawing stays inside the slot instead of reaching past its top edge. */
.btl-food-slot .btl-food-icon .item-ico[src*="/troop_"]{width:.92em;height:.92em;}
.btl-food-slot.filled{border-style:solid;}
/* Only the empty (＋) slots repaint their border on hover. A filled slot's
   border IS its rarity indicator — see the ITEM HOVER HALO block, which gives
   it the white outline instead. */
.btl-food-slot:not(.filled):hover{border-color:var(--hover-border);}
.btl-food-slot.locked{cursor:not-allowed;opacity:0.5;font-size:16px;}
.btl-food-qty{position:relative;bottom:auto;right:auto;width:100%;text-align:center;font-size:12px;font-weight:700;color:var(--text1);padding:2px 0;background:rgba(255,255,255,0.08);border-top:1px solid var(--border);z-index:2;}
.btl-cd-overlay{position:absolute;inset:0;border-radius:7px;background:rgba(0,0,0,0.55);display:none;align-items:center;justify-content:center;z-index:1;}
.btl-cd-overlay.active{display:flex;}
.btl-cd-text{font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.9);}
.food-picker{position:relative;width:100%;max-width:340px;padding:1.5rem;}
.food-pick-list{display:flex;flex-direction:column;gap:6px;margin:0.8rem 0;max-height:320px;overflow-y:auto;}
.food-pick-row{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer;}
.food-pick-row:hover{border-color:var(--blue);}
/* Owned but not runnable in this context (eg. a stun on a PvP defense slot) */
.food-pick-row.unavailable{opacity:.45;cursor:default;}
/* Troop repair: injured types are benched until healed */
.food-pick-row{position:relative;}
.troop-injured-badge{position:absolute;top:6px;right:8px;background:var(--red);color:#fff;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:999px;padding:2px 8px;}
/* Clear Slot on the left, Repair All on the right, one row */
.troop-pick-footer{display:flex;align-items:center;gap:8px;}
.troop-pick-footer .modal-btn{margin-top:0;}
.troop-pick-footer .troop-repair-all{margin-left:auto;flex:0 0 auto;white-space:nowrap;}
/* Armory troop card: heal button sits to the right of the health bar */
.troop-hp-row{display:flex;align-items:center;gap:8px;}
/* The Heal button only renders on an injured troop. The bar used to flex, so
   its length changed the moment Heal appeared and differed card to card.
   Reserving Heal's slot on EVERY card keeps one bar length everywhere and
   stops it jumping when the button shows up. */
.troop-hp-row .troop-hp-wrap{flex:0 0 calc(100% - 84px);min-width:0;}
/* Sits in the reserved gap, pinned right, so a longer label can never push
   the bar. The button measures 66px in English; 84px leaves slack for ES. */
.troop-hp-row .troop-heal-btn{margin-left:auto;}
.troop-heal-btn{flex:0 0 auto;background:var(--bg4);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:3px 9px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;}
.troop-heal-btn:hover{border-color:var(--green);color:var(--green);}
.food-pick-row.unavailable:hover{border-color:var(--border);}
.food-pick-icon{font-size:22px;}
.gacha-skill-row{align-items:flex-start;padding:5px 11px;}
.gacha-skill-row .food-pick-info{display:flex;flex-direction:column;gap:1px;}
.gacha-skill-lvl{font-weight:600;font-size:13px;color:#fff;}
.skill-aoe-badge{display:inline-block;margin-left:6px;padding:1px 4px;border:1px solid #ff5a5a;border-radius:3px;color:#ff5a5a;background:rgba(110,10,10,.28);font-size:9px;font-weight:800;line-height:1.25;letter-spacing:.04em;vertical-align:1px;}
.gacha-skill-row .food-pick-name,.gacha-skill-row .food-pick-meta{font-size:13px;}
.food-pick-list:has(.gacha-skill-row){gap:4px;max-height:none;}
.food-pick-name{font-size:12px;font-weight:700;}
.food-pick-meta{font-size:12px;color:var(--text2);}
/* .has-stats rows (skills, food) put their key numbers on a footer line pinned
   to the bottom of a fixed-height info block, so they land in the same spot on
   every row instead of trailing a description whose length varies. The last
   chip in the footer can carry .food-pick-aside to sit flush right. */
.food-pick-row.has-stats .food-pick-info{display:flex;flex-direction:column;min-height:56px;}
.food-pick-row.has-stats .food-pick-meta{flex:1;}
.food-pick-stats{display:flex;align-items:center;gap:12px;margin-top:4px;font-size:12px;font-weight:700;color:var(--text2);}
.food-pick-aside{margin-left:auto;font-weight:600;color:var(--text3);}
/* ×N stock counts, 2px larger than whatever line they sit on (10px picker
   footers → 12px, 12px combat hints → 14px). Must go on a child element, never
   on the element that sets the line's own font-size — em on font-size resolves
   against the PARENT, so self-applying it would measure from the wrong base. */
.pick-count{font-size:calc(1em + 2px);}

/* ══ ARMORY TROOPS ══ */
.troop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:1rem;}
.troop-card{position:relative;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;}
.troop-owned{position:absolute;top:8px;right:10px;font-size:12px;font-weight:700;color:var(--text2);background:var(--bg3);border-radius:6px;padding:2px 7px;}
/* Info button — mirrors .troop-owned on the opposite corner so the card top
   stays balanced. Hover/tap opens showTroopStatTooltip. */
.troop-info-btn{position:absolute;top:8px;left:10px;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;cursor:help;background:var(--blue2);border:1px solid var(--blue);
  border-radius:50%;color:#fff;font-size:14px;font-weight:800;font-family:'Inter',sans-serif;line-height:1;
  transition:background .12s,transform .12s;}
.troop-info-btn:hover{background:var(--blue);transform:scale(1.1);}
.troop-icon{font-size:40px;line-height:1.2;}
.troop-name{font-size:14px;font-weight:700;}
.troop-desc{font-size:12px;color:var(--text2);min-height:28px;}
.troop-reqs{width:100%;display:flex;flex-direction:column;gap:4px;margin-top:2px;}
/* Fixed row height so a long material name ("Copper Plate Chestguard") can't
   make its row taller than the others. The name never wraps; it ellipsises if
   the card is too narrow, and the qty column never shrinks. */
.troop-req{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12px;background:var(--bg3);border-radius:6px;padding:4px 8px;height:26px;}
.troop-req > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.troop-req > b{flex-shrink:0;}
/* Recruit + Equip sit side by side under the recipe */
/* Recruit and Equip share size and color (both .modal-btn.primary at flex:1);
   Equip flips to a grayed "Equipped" while the troop holds a battle slot. */
.troop-card-actions{display:flex;gap:6px;width:100%;margin-top:2px;}
.troop-card-actions .modal-btn{flex:1;}
.troop-card-actions .modal-btn.primary:disabled{background:var(--bg4);color:var(--text3);}
/* Reads as disabled but still receives the click, so it can explain that the
   troop has to be healed first. Matches the :disabled rule above exactly. */
.troop-card-actions .modal-btn.primary.is-disabled{background:var(--bg4);color:var(--text3);opacity:0.42;cursor:not-allowed;}
.troop-card-actions .modal-btn.primary.is-disabled:hover{transform:none;filter:none;}
.troop-equip-slot:disabled{opacity:.45;cursor:default;}
.troop-equip-slots{display:flex;gap:6px;width:100%;margin:8px 0;}
.troop-equip-slot{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;
  border-radius:9px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);
  cursor:pointer;font-family:'Inter',sans-serif;font-size:12px;transition:border-color .12s,color .12s;}
.troop-equip-slot.active{border-color:var(--blue);color:var(--text);background:var(--bg4);}
.tes-label{font-weight:700;}
.tes-cur{font-size:12px;color:var(--text3);}
.troop-req.ok b{color:var(--green);}
.troop-req.missing b{color:var(--red);}
.troop-recruit{width:100%;margin-top:4px;}
.troop-recruit:disabled{opacity:0.45;cursor:not-allowed;}
.troop-card{border-top:3px solid var(--rar,var(--border2));}
.troop-tier-badge{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.troop-stats{font-size:12px;color:var(--text2);}

/* ── Troops tab: archetype nav + tier area ── */
.troop-layout{display:flex;gap:14px;margin-top:1rem;align-items:flex-start;}
.troop-arch-nav{display:flex;flex-direction:column;gap:6px;width:180px;flex:0 0 180px;}
.troop-arch-btn{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;text-align:left;transition:background .15s,color .15s;}
.troop-arch-btn:hover{background:var(--bg3);color:var(--text);}
.troop-arch-btn.active{background:var(--accent,#7c6af7);color:#fff;border-color:transparent;}
.troop-arch-icon{font-size:18px;}
.troop-arch-name{flex:1;}
.troop-arch-count{font-size:12px;font-weight:800;background:rgba(0,0,0,.25);border-radius:6px;padding:1px 6px;}
.troop-tier-area{flex:1;min-width:0;}
/* Row, not column: the icon and the title are one line. It used to stack, which
   was only ever right for the Troops tab, where the description below is a
   separate line — that one still gets its own line from .troop-arch-desc's
   full-width basis rather than from stacking everything. */
.troop-arch-header{font-size:15px;font-weight:800;color:var(--text);display:flex;align-items:center;flex-wrap:wrap;column-gap:8px;row-gap:2px;}
.troop-arch-desc{font-size:12px;font-weight:400;color:var(--text3);flex-basis:100%;}
.troop-tier-area .troop-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:.6rem;}

/* ── Inventory troops: grouped roster ── */
.inv-troop-group{margin-bottom:14px;}
.inv-troop-group-head{display:flex;justify-content:flex-start;gap:6px;align-items:center;font-size:13px;font-weight:800;color:var(--text);padding:4px 2px;border-bottom:1px solid var(--border);margin-bottom:6px;}

/* ══ NODE DETAIL MODAL ══ */
.node-modal{position:relative;width:100%;max-width:340px;padding:1.5rem;display:flex;flex-direction:column;gap:0.85rem;}
.node-modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--text3);font-size:16px;cursor:pointer;line-height:1;}
.node-modal-title{text-align:center;font-size:18px;font-weight:700;color:#fff;margin-bottom:0.25rem;}
.nm-row{display:flex;gap:0.75rem;align-items:flex-start;}
.nm-label{color:var(--blue);font-size:13px;font-weight:600;width:72px;flex-shrink:0;padding-top:2px;}
/* Long-label variant: 'Recommended Power Level' overflows the shared 72px
   column and crowds its value, so this row gets a wider one. */
.nm-label.nm-label-wide{width:176px;}
.nm-values{display:flex;flex-direction:column;gap:5px;flex:1;}
.nm-value{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);flex-wrap:wrap;}
.nm-count{font-weight:700;}
.nm-count.ok{color:var(--green);}
.nm-count.short{color:var(--red);}
.nm-ok{color:var(--text);}
.nm-short{color:var(--red);font-weight:700;}
.nm-xp-badge{background:var(--blue);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:1px 7px;}
.nm-produce input{width:90px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:5px 8px;font-size:13px;text-align:center;}
.node-modal-start{width:100%;padding:0.7rem;margin-top:0.35rem;background:var(--blue);border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;}
.node-modal-start:disabled{background:var(--bg4);color:var(--text3);cursor:not-allowed;}

/* ── Feedback ───────────────────────────────────────────────────────────── */
.feedback-modal{max-width:520px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
.feedback-modal .node-modal-title{text-align:left;margin:0 28px 4px 0;}
.feedback-modal .guild-textarea{box-sizing:border-box;resize:none;}
.feedback-modal .node-modal-actions{display:flex;justify-content:space-between;gap:10px;}
.feedback-modal .node-modal-actions .node-modal-start{margin-top:0;flex:1;}
.node-modal-start.stop{background:var(--red2);color:#fff;}

/* ══ MARKETPLACE ══ */
.mkt-topbar{display:flex;align-items:center;gap:1rem;margin-bottom:0.9rem;}
.mkt-coin{background:var(--bg3);border:1px solid var(--gold2);border-radius:999px;padding:5px 14px;font-size:13px;font-weight:700;color:var(--gold);white-space:nowrap;}
.mkt-coin span{color:var(--text2);font-weight:500;font-size:12px;}
.mkt-title{flex:1;text-align:center;}
.mkt-tabs{display:flex;gap:4px;margin-bottom:0.8rem;}
.mkt-tab{background:var(--bg3);border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;color:var(--text2);font-size:12px;font-weight:600;padding:7px 14px;cursor:pointer;}
.mkt-tab.active{background:var(--bg3);border-color:var(--gold);color:var(--gold);}
.mkt-filter-bar{display:flex;gap:6px;margin-bottom:0.8rem;}
.mkt-filter{background:var(--bg3);border:1px solid var(--border2);border-radius:999px;color:var(--text);padding:7px 12px;font-size:12px;min-width:0;}
.mkt-filter-search{flex:1.4;}
select.mkt-filter{flex:1;cursor:pointer;}
.mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px;}
.mkt-cell{aspect-ratio:1;background:var(--bg3);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.1s,border-color 0.15s;}
.mkt-cell:hover{transform:scale(1.08);}
/* 24px × 1.4 — Market Listings cells carry no count strip, so the icon takes
   the room back. Only this grid uses the class now; My Items renders inventory
   tiles, whose icon is sized by .inv-slot-icon. Both the emoji and the PNG art
   scale from here: .item-ico and .sys-ico are sized in em. */
.mkt-cell-icon{font-size:33.6px;}
.mkt-empty,.mkt-loading,.mkt-none{grid-column:1/-1;text-align:center;color:var(--text3);font-size:13px;padding:1.5rem 0;}
.mkt-nav-btn{background:var(--blue2);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;padding:7px 14px;cursor:pointer;}
.mkt-item-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background:var(--bg3);border:1px solid var(--border2);border-radius:12px;font-size:30px;flex-shrink:0;}
.mkt-item-owned{position:absolute;bottom:2px;right:5px;font-size:12px;font-weight:700;color:var(--text2);}
/* ── Trade panel: left transaction config + right depth/history ── */
.mkt-trade-wrap{display:flex;gap:14px;align-items:flex-start;}
.mkt-trade-left{position:relative;width:330px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;}

.mkt-back-btn{position:relative;top:-3px;padding:5.4px 12.6px;background:#4a1519;border:1px solid #8f3036;border-radius:8px 8px 0 0;color:#fff;font-size:10.8px;font-weight:600;cursor:pointer;}
.mkt-back-btn:hover{filter:brightness(1.15);}
.mkt-trade-head{display:flex;gap:10px;align-items:flex-start;}
.mkt-trade-headtxt{min-width:0;}
.mkt-trade-title{font-size:14px;font-weight:700;}
.mkt-trade-desc{font-size:12px;color:var(--text3);margin-top:3px;}
.mkt-variant-row{display:flex;gap:6px;}
.mkt-variant-row .mkt-filter{flex:1;}
.mkt-reset-btn{width:30px;background:var(--bg3);border:1px solid var(--border2);border-radius:999px;color:var(--text2);font-size:14px;cursor:pointer;flex-shrink:0;}
.mkt-reset-btn:hover{color:#fff;border-color:var(--gold);}
.mkt-action-label{font-size:12px;color:var(--text2);font-weight:600;}
.mkt-action-rows{display:flex;flex-direction:column;gap:3px;}
.mkt-action-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;}
.mkt-action-row:hover{background:var(--bg3);}
.mkt-action-row.active{background:var(--green2);color:#fff;}
.mkt-radio{width:14px;height:14px;border-radius:50%;border:2px solid var(--border2);background:var(--bg3);flex-shrink:0;}
.mkt-radio.on{border-color:#fff;background:var(--gold);}
.mkt-field-row{display:flex;align-items:center;gap:8px;}
.mkt-field-label{width:60px;font-size:12px;color:var(--text2);font-weight:600;flex-shrink:0;}
.mkt-slider-wrap{position:relative;flex:1;padding-top:15px;min-width:0;}
.mkt-slider-wrap input[type=range]{width:100%;margin:0;}
.mkt-num-input{width:62px;text-align:center;font-size:13px;font-weight:700;color:var(--text);background:var(--bg3);border:1px solid var(--border2);border-radius:7px;padding:4px 6px;-moz-appearance:textfield;appearance:textfield;}
.mkt-num-input::-webkit-outer-spin-button,.mkt-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.mkt-num-input:focus{outline:1px solid var(--blue);border-color:var(--blue);}
.mkt-unit-price{font-size:13px;font-weight:700;}
.mkt-avg-badge{font-size:12px;font-weight:700;border-radius:5px;padding:2px 7px;}
.mkt-avg-badge.below{background:var(--green2);color:#fff;}
.mkt-avg-badge.above{background:var(--red2);color:#fff;}
.mkt-trade-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;padding-top:10px;border-top:1px solid var(--border);}
.mkt-total{font-size:13px;color:var(--text);}
.mkt-total b{color:var(--gold);}
.mkt-do-btn{border:none;border-radius:10px;color:#fff;font-size:13px;font-weight:800;padding:9px 26px;cursor:pointer;}
.mkt-do-btn.buy{background:var(--red2);}
.mkt-do-btn.sell{background:var(--green2);}
.mkt-do-btn:disabled{background:var(--bg4);color:var(--text3);cursor:not-allowed;}
#game:has(#marketplace-btn.selected) #panel-root-react :is(button,.mkt-action-row){border-radius:4px!important;}
#game:has(#marketplace-btn.selected) #panel-root-react .mkt-back-btn{
  background:linear-gradient(180deg,rgba(138,38,44,.98),rgba(72,17,24,.98))!important;
  border-color:#8f3036!important;
  color:#fff!important;
  box-shadow:inset 0 1px rgba(255,210,198,.16),0 1px 8px rgba(0,0,0,.36)!important;
}
#game:has(#marketplace-btn.selected) #panel-root-react .mkt-back-btn:hover:not(:disabled){
  background:linear-gradient(180deg,rgba(173,51,59,.98),rgba(95,22,31,.98))!important;
  border-color:#b4474f!important;
}
#game:has(#marketplace-btn.selected) #panel-root-react :is(
  .mkt-trade-left,.mkt-book-scroll,.mkt-hist,.mkt-mine-row,.mkt-item-icon,.mkt-cell
){border-radius:4px!important;}
#game:has(#marketplace-btn.selected) #panel-root-react .mkt-field-row .qty-btn{
  width:27px;height:27px;font-size:12px;
}
.mkt-trade-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;}
.mkt-books{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex-shrink:0;}
.mkt-book-title{font-size:13px;font-weight:700;margin-bottom:6px;}
.mkt-book-scroll{height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;}
.mkt-book-scroll::-webkit-scrollbar{width:9px;}
.mkt-book-scroll::-webkit-scrollbar-track{background:var(--bg3);border-radius:8px;}
.mkt-book-scroll::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:8px;border:1px solid var(--border2);}
.mkt-depth tr.best td{background:var(--green2);color:#fff;font-weight:700;}
/* ── Market history chart ── */
.mkt-hist{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:12px;}
.mkt-chart{width:100%;height:auto;display:block;cursor:crosshair;}
.mkt-ch-tip{position:absolute;pointer-events:none;z-index:20;background:var(--bg4);border:1px solid var(--border2);border-radius:8px;padding:7px 11px;font-size:12px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.55);}
.mkt-ch-tip-row{color:var(--text);line-height:1.5;}
.mkt-ch-tip-row b{color:var(--gold);}
.mkt-ch-tip-sub{color:var(--text2);}
.mkt-ch-axis{stroke:var(--border2);stroke-width:1;}
.mkt-ch-line{fill:none;stroke:var(--red);stroke-width:1.6;}
.mkt-ch-dot{fill:#fff;stroke:var(--red);stroke-width:1;}
.mkt-ch-bar{fill:var(--bg4);}
.mkt-ch-lbl{fill:var(--text3);font-size:12px;}
.mkt-ch-lbl.end{text-anchor:end;}
.mkt-hist-controls{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap;}
.mkt-range-btn{background:var(--bg3);border:1px solid var(--border);border-radius:999px;color:var(--text2);font-size:12px;font-weight:600;padding:4px 10px;cursor:pointer;}
.mkt-range-btn.active{background:var(--gold2);border-color:var(--gold);color:#fff;}
.mkt-hist-avg{margin-left:auto;font-size:12px;color:var(--text2);}
.mkt-hist-avg b{color:var(--gold);}
.mkt-hist-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.mkt-tag{font-size:12px;font-weight:700;border-radius:5px;padding:2px 8px;color:#fff;}
.mkt-tag.t-pink{background:#e91e8c;}
.mkt-tag.t-slate{background:#4a5a7a;}
.mkt-tag.t-cyan{background:#12a5b8;}
.mkt-tag.t-gold{background:#b8930f;}
.mkt-tag.t-purple{background:#8a4ad0;}
.mkt-hist-empty{text-align:center;color:var(--text3);font-size:12px;padding:1.4rem 0;}
@media (max-width:900px){.mkt-trade-wrap{flex-direction:column;}.mkt-trade-left{width:100%;}}
.mkt-table{width:100%;border-collapse:collapse;font-size:12px;}
.mkt-table th{background:var(--bg3);color:var(--text2);font-weight:600;text-align:left;padding:8px 10px;}
.mkt-table td{padding:7px 10px;border-bottom:1px solid var(--border);color:var(--text);}
.mkt-act{border:none;border-radius:6px;color:#fff;font-size:12px;font-weight:700;padding:4px 12px;cursor:pointer;}
.mkt-act.cancel{background:var(--red2);}
.mkt-own-tag{color:var(--gold);font-size:12px;font-weight:600;}
.mkt-mine{display:flex;flex-direction:column;gap:8px;}
.mkt-mine-row{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;}
.mkt-mine-icon{font-size:22px;}
.mkt-mine-body{flex:1;}
.mkt-mine-name{font-size:13px;font-weight:600;}
.mkt-mine-sub{font-size:12px;color:var(--text2);margin-top:2px;}
.mkt-side-tag{font-size:12px;font-weight:800;border-radius:4px;padding:1px 5px;margin-right:4px;}
.mkt-side-tag.sell{background:var(--red2);color:#fff;}
.mkt-side-tag.buy{background:var(--green2);color:#fff;}

/* ══ TOAST ══ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg4);border:1px solid var(--border2);border-radius:4px;padding:10px 20px;font-size:13px;color:var(--text);opacity:0;transition:opacity 0.2s,transform 0.2s;pointer-events:none;z-index:9999;white-space:nowrap;max-width:90vw;display:flex;align-items:center;gap:10px;}
.toast-monster-img{display:block;width:30px;height:30px;object-fit:contain;flex:0 0 30px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ═══════════════════════════════════════════════════════════════════════════
   GUILD
   ══════════════════════════════════════════════════════════════════════════ */
.guild-loading{text-align:center;color:var(--text3);padding:3rem;font-size:14px;}
.guild-header-name{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;flex:1;}
.guild-tag{font-size:12px;font-weight:700;color:var(--gold);background:var(--bg4);border-radius:5px;padding:2px 7px;border:1px solid var(--gold2);}
/* Sits at the right end of .guild-sort-row, above the player list. Same pill as
   .trial-tokens (the prestige-token readout) so the count reads as a figure
   rather than the 11px caption it used to be next to the guild name.
   margin-left:auto pushes it past the sort buttons to the far right.
   Text sits a step under .trial-tokens (12px/18px vs 13px/20px) while the icon
   goes the other way: 1.625em of the 12px text = 19.5px, +50% on the 13px it
   used to render at. It has to be set here rather than left at the :root 1em,
   because .sys-ico is sized in em and would otherwise SHRINK with the text. */
.guild-member-count{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  font-size:12px;font-weight:600;color:#bfe3d2;background:transparent;
  border:2px solid var(--green);border-radius:8px;padding:8px 16px;white-space:nowrap;
  --sys-ico-size:1.625em;}
.guild-member-count b{font-size:18px;font-weight:800;color:var(--gold);}

/* No-guild screen */
.guild-noguild{display:flex;flex-direction:column;align-items:center;gap:18px;padding:3rem 1rem;}
.guild-noguild-icon{font-size:48px;}
.guild-noguild-title{font-size:18px;font-weight:700;color:var(--text);}
.guild-invite-card{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:18px 24px;text-align:center;min-width:260px;}
.guild-invite-label{font-size:12px;color:var(--text3);margin-bottom:4px;}
.guild-invite-gname{font-size:18px;font-weight:700;color:var(--gold);margin-bottom:4px;}
.guild-invite-from{font-size:12px;color:var(--text2);margin-bottom:12px;}
.guild-invite-btns{display:flex;gap:8px;justify-content:center;}
.guild-create-box{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 24px;text-align:center;}
.guild-create-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px;}
.guild-create-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;}

/* Members toolbar */
.guild-members-toolbar{display:flex;flex-direction:column;gap:8px;padding:12px 0 10px;}
.guild-invite-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.guild-sort-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

/* Member list */
.guild-member-list{display:flex;flex-direction:column;margin-bottom:12px;}
.guild-member-header,
.guild-member-row{display:grid;grid-template-columns:160px 1fr 70px 130px 110px 120px;align-items:center;padding:8px 10px;}
.guild-member-list.can-manage .guild-member-header,
.guild-member-list.can-manage .guild-member-row{grid-template-columns:160px 1fr 70px 130px 110px 120px 170px;}
.guild-member-header{background:var(--bg3);border-radius:8px 8px 0 0;border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;}
.guild-member-row{border:1px solid var(--border);border-top:none;font-size:13px;transition:background .12s;min-height:42px;}
.guild-member-row:hover{background:var(--bg3);}
.guild-member-row.is-me{background:rgba(62,207,142,.06);}
.guild-member-row:last-child{border-radius:0 0 8px 8px;}
.gm-col-role{display:flex;align-items:center;}
.gm-col-name{font-weight:600;color:var(--text);}
.gm-col-level{color:var(--text2);font-size:12px;}
.gm-col-cp{color:var(--text);font-size:12px;}
.gm-col-contrib{color:var(--text2);font-size:12px;}
.gm-col-online{font-size:12px;}
.gm-col-actions{display:flex;justify-content:flex-end;}
.gm-online-on{color:var(--green);}
.gm-online-off{color:var(--text3);}
.gm-you-tag{font-size:12px;color:var(--text3);font-weight:400;margin-left:4px;}

/* Role badge */
.guild-role-badge{font-size:12px;font-weight:700;border-radius:6px;padding:3px 7px;white-space:nowrap;}

/* Action buttons */
.gm-action-group{display:flex;gap:5px;}
/* guild-btn, not gm-btn: the Gather Map panel owns the gm-* namespace and its
   .gm-btn was overriding these (full width + 9px top margin on member rows).
   background/color are declared here because unmodified buttons (Info, Edit)
   used to pick them up from that collision. */
.guild-btn{font-size:12px;font-weight:700;border:none;border-radius:6px;padding:3px 8px;cursor:pointer;transition:background .12s,opacity .12s;
  background:var(--bg3);color:var(--text);line-height:1;}
.guild-btn.promote{background:#1d6cbf;color:#fff;}
.guild-btn.promote:hover:not(:disabled){background:#2a7fd4;}
.guild-btn.kick{background:#8b2020;color:#fff;}
.guild-btn.kick:hover:not(:disabled){background:#a52828;}
.guild-btn.kick.counting{background:var(--bg4);color:var(--text2);cursor:not-allowed;}
.guild-btn.kick.confirm{background:#c0392b;color:#fff;animation:pulse-red .5s ease-in-out infinite alternate;}
.guild-btn:disabled{opacity:.5;cursor:not-allowed;}
.guild-building-action{border-radius:4px!important;}
@keyframes pulse-red{from{background:#c0392b;}to{background:#e74c3c;}}

/* Placeholders */

/* Guild search (no-guild view) */
.guild-search-box{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 24px;text-align:center;width:100%;max-width:560px;}
.guild-search-empty{font-size:12px;color:var(--text3);padding:14px 0 4px;}
.guild-search-row{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-top:8px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;text-align:left;}
.gsr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.gsr-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gsr-meta{font-size:12px;color:var(--text2);}
.guild-type-list{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:3px;}
.guild-type-badge{display:inline-flex;align-items:center;padding:2px 7px;border:1px solid #5f94c777;border-radius:6px;background:#315b7a33;color:#b9dcff;font-size:11px;font-weight:700;line-height:1.25;}
.gsr-full{font-size:12px;font-weight:700;color:var(--text3);padding:0 8px;}
.gsr-applied{font-size:12px;color:var(--green);white-space:nowrap;}
.guild-policy-badge{font-size:12px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;}
.guild-policy-badge.open{background:#3ecf8e22;color:#3ecf8e;border:1px solid #3ecf8e55;}
.guild-policy-badge.apply{background:#f0a04022;color:#f0a040;border:1px solid #f0a04055;}
.guild-info-rows{margin:10px 0;}
.guild-info-desc{font-size:16px;color:var(--desc);white-space:pre-wrap;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-top:8px;text-align:left;}

/* Guild announcement (front page) */
.guild-ann-card{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:14px 18px;margin-top:12px;}
.guild-ann-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--gold);margin-bottom:6px;}
.guild-ann-head .guild-btn{font-size:12px;padding:2px 8px;}
.guild-ann-text{font-size:12px;color:var(--text);white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.guild-ann-meta{font-size:12px;color:var(--text3);margin-top:6px;text-align:right;}
.guild-apps-badge{display:inline-block;min-width:16px;padding:1px 5px;border-radius:10px;background:var(--red);color:#fff;font-size:12px;font-weight:700;text-align:center;}

/* Guild settings tab */
.guild-settings{display:flex;flex-direction:column;gap:16px;padding:14px 0;max-width:640px;}
.guild-set-section{display:flex;flex-direction:column;gap:8px;}
.guild-set-label{font-size:13px;font-weight:700;color:var(--text);}
.guild-set-hint{font-size:15px;font-weight:400;color:var(--desc);}
.guild-set-policy{display:flex;gap:8px;flex-wrap:wrap;}
.guild-type-picker{display:flex;gap:8px;flex-wrap:wrap;}
.guild-type-choice{padding:7px 12px;border:1px solid var(--border2);border-radius:7px;background:var(--bg3);color:var(--text2);font:600 12px inherit;cursor:pointer;}
.guild-type-choice:hover:not(:disabled){border-color:#75b9e8;color:var(--text);}
.guild-type-choice.selected{border-color:#75b9e8;background:#2f6d943d;color:#d7efff;box-shadow:inset 0 0 0 1px #75b9e833;}
.guild-type-choice:disabled{opacity:.4;cursor:not-allowed;}
.guild-set-actions{display:flex;align-items:center;gap:10px;}
.guild-textarea{width:100%;min-height:90px;max-height:180px;resize:vertical;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-family:inherit;padding:10px 12px;}
.guild-textarea:focus{outline:none;border-color:var(--gold);}
.guild-app-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;margin-bottom:6px;}
.guild-app-row .gsr-name{flex:0 0 auto;}
.guild-app-row .gsr-meta{flex:1;}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT BOX
   ══════════════════════════════════════════════════════════════════════════ */
.chat-box{
  display:none;
  position:fixed;
  z-index:800;
  width:340px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  overflow:hidden;
  user-select:none;
  background:rgba(14,14,22,0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
body.game-ready .chat-box{display:block;}
.chat-header{
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  background:rgba(255,255,255,0.06);
  cursor:move;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.chat-header.has-unread .chat-header-title::after{
  content:'●';
  color:#e74c3c;
  font-size:12px;
  margin-left:6px;
  vertical-align:middle;
}
.chat-header-icon{font-size:15px;}
.chat-header-title{flex:1;font-size:13px;font-weight:700;color:var(--text);}
.chat-min-btn{
  background:none;border:none;cursor:pointer;
  color:var(--text3);font-size:12px;padding:2px 6px;border-radius:4px;
  transition:background .12s,color .12s;
}
.chat-min-btn:hover{background:rgba(255,255,255,0.1);color:var(--text);}

/* Body */
.chat-box.minimized .chat-body{display:none;}
.chat-body{display:flex;flex-direction:column;}

/* Channel tabs */
.chat-tabs{display:flex;gap:6px;margin:6px 7px -1px;padding:0;border:0;border-bottom:1px solid rgba(255,255,255,.38);background:transparent;}
.chat-tab{
  flex:1;padding:7px 3px;border:1px solid var(--border);border-radius:9px;background:var(--bg2);white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;font-family:'Inter',sans-serif;
  transition:background .12s,color .12s,border-color .12s;
}
.chat-tab:hover{background:var(--bg3);color:var(--text);}
.chat-tab.active{background:var(--bg3);border-color:var(--gold);color:var(--gold);}

/* Whisper row */

/* Messages area */
.chat-messages{
  height:220px;overflow-y:auto;padding:8px 10px;
  display:flex;flex-direction:column;gap:4px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent;
}
.chat-messages::-webkit-scrollbar{width:4px;}
.chat-messages::-webkit-scrollbar-track{background:transparent;}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px;}
.chat-empty{font-size:12px;color:var(--text3);text-align:center;margin:auto;padding:1rem 0;}
.chat-msg{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.4;}
.chat-msg-meta{display:flex;align-items:baseline;gap:5px;}
.chat-msg-name{font-weight:700;color:var(--text2);}
.chat-msg-name.me{color:var(--gold);}
.chat-msg-name[data-cname]{cursor:context-menu;}
.chat-msg-name[data-cname]:hover{text-decoration:underline;}

/* Font size setting: +2px on message text */
.chat-box.chat-font-big .chat-msg{font-size:18px;}
.chat-box.chat-font-big .chat-msg-time{font-size:14px;}
.chat-box.chat-font-big .chat-empty{font-size:18px;}

/* Right-click menu on a username */
.chat-ctx-menu{
  position:fixed;z-index:10000;min-width:150px;
  background:rgba(20,20,30,0.97);border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.6);
  padding:4px;display:flex;flex-direction:column;
}
.chat-ctx-name{
  font-size:12px;font-weight:700;color:var(--gold);
  padding:5px 9px 4px;border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-ctx-item{
  background:none;border:none;border-radius:6px;cursor:pointer;
  color:var(--text);font-size:12px;text-align:left;padding:6px 9px;
  transition:background .12s;white-space:nowrap;
}
.chat-ctx-item:hover{background:rgba(255,255,255,0.1);}
.chat-ctx-item.danger{color:#e74c3c;}
.chat-ctx-item.danger:hover{background:rgba(231,76,60,0.15);}

/* Settings dropdown (âš™ in the chat header) */
.chat-settings{
  position:absolute;top:34px;right:6px;z-index:20;min-width:170px;
  background:rgba(20,20,30,0.97);border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.6);
  padding:6px;display:flex;flex-direction:column;gap:4px;
}
.chat-set-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;color:var(--text);padding:2px 3px;
}
.chat-set-font{display:flex;gap:4px;}
.chat-set-font-btn{
  background:var(--bg4);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-size:12px;font-weight:700;padding:3px 8px;cursor:pointer;
  transition:background .12s;
}
.chat-set-font-btn:hover:not(:disabled){background:var(--border2);}
.chat-set-font-btn:disabled{opacity:.35;cursor:not-allowed;}
.chat-set-head{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:var(--text);
  padding:2px 3px 5px;border-bottom:1px solid rgba(255,255,255,0.08);
}
.chat-set-back{
  background:none;border:none;cursor:pointer;color:var(--text3);
  font-size:15px;line-height:1;padding:0 4px;border-radius:4px;
}
.chat-set-back:hover{color:var(--text);background:rgba(255,255,255,0.1);}
.chat-set-mute-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;color:var(--text);padding:3px 3px;
}
.chat-set-mute-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-set-unmute-btn{
  background:var(--bg4);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-size:12px;padding:2px 8px;cursor:pointer;
  transition:background .12s;flex-shrink:0;
}
.chat-set-unmute-btn:hover{background:var(--border2);}
.chat-set-empty{font-size:12px;color:var(--text3);padding:4px 3px;}
.chat-whisper-tag-to{color:#ff69b4;font-weight:700;}
.chat-whisper-tag-from{color:#ffb0d0;font-weight:700;}
.chat-input-whisper-wrap{
  flex:1;display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,180,210,0.3);
  border-radius:8px;padding:0 6px 0 10px;
}
.chat-input-whisper-wrap:focus-within{border-color:rgba(255,105,180,0.6);}
.chat-whisper-prefix{
  color:#ff69b4;font-size:12px;font-weight:700;
  white-space:nowrap;user-select:none;flex-shrink:0;
}
.chat-input-field.whisper-msg{
  background:transparent;border:none;border-radius:0;
  padding:6px 0;flex:1;min-width:0;
}
.chat-input-field.whisper-msg:focus{border-color:transparent;}
.chat-whisper-clear-btn{
  background:none;border:none;color:rgba(255,105,180,0.5);
  font-size:12px;cursor:pointer;padding:2px 4px;line-height:1;flex-shrink:0;
}
.chat-whisper-clear-btn:hover{color:#ff69b4;}
.chat-msg-time{font-size:12px;color:var(--text3);}
.chat-msg-text{
  background:rgba(255,255,255,0.07);border-radius:8px;
  padding:4px 9px;color:var(--text);max-width:90%;word-break:break-word;
  border:1px solid rgba(255,255,255,0.06);
}
.chat-msg.is-me .chat-msg-text{
  background:rgba(62,207,142,0.15);border-color:rgba(62,207,142,0.25);
}

/* Input row */
.chat-input-row{
  position:relative;
  display:flex;gap:6px;padding:8px 10px;
  border-top:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.03);
}
.chat-input-field{
  flex:1;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;color:var(--text);font-size:12px;padding:6px 10px;outline:none;
}
.chat-input-field:focus{border-color:var(--gold2);}
.chat-input-field:disabled{opacity:.4;cursor:not-allowed;}
/* Shown in place of the input while public chat is level-locked. Wraps rather
   than truncating — the box narrows to ~240px and the sentence has to survive
   that, and translations run longer than the English. */
.chat-input-locked{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;line-height:1.35;text-align:center;
  color:var(--text3);padding:6px 4px;
}
/* ═══════════════════════════════════════════════════════════════════════════
   TRIAL OF PRESTIGE
   ══════════════════════════════════════════════════════════════════════════ */
.trial-tokens{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#bfe3d2;
  background:transparent;border:2px solid var(--green);border-radius:8px;padding:8px 16px;}
.trial-tokens b{font-size:20px;font-weight:800;color:var(--gold);}
.trial-prestige-count{font-size:15px;color:#fff;font-weight:700;flex:1;}

/* Prestige bar */
.trial-prestige-bar{display:flex;align-items:center;gap:16px;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:14px 18px;margin-bottom:16px;}
.trial-prestige-info{flex:1;}
.trial-prestige-title{font-size:19px;font-weight:700;color:var(--gold);margin-bottom:3px;}
.trial-prestige-sub{font-size:16px;color:var(--desc);margin-bottom:5px;}
.trial-prestige-sub b{color:var(--gold);font-size:16.5px;font-weight:700;}
.trial-prestige-desc{font-size:16px;color:var(--desc);line-height:1.5;}
.trial-prestige-locked{display:block;color:var(--red);margin-top:2px;}
.trial-prestige-btn{background:var(--gold);border:none;border-radius:10px;color:#1a1408;font-size:13px;font-weight:800;padding:12px 22px;cursor:pointer;white-space:nowrap;transition:background .15s;}
.trial-prestige-btn:hover:not(:disabled){filter:brightness(1.1);}
.trial-prestige-btn:disabled{opacity:.35;cursor:not-allowed;}
/* Cooldown countdown lives on the button; keep it readable while disabled */
.trial-prestige-btn:disabled.cooling{opacity:.6;}
.trial-prestige-btn-cd{display:block;font-size:12px;font-weight:700;margin-top:3px;}

/* Stats tab */
.trial-stats-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start;}
.trial-stats-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
.trial-stats-head{font-size:17px;font-weight:700;color:var(--gold);margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--border);}
.trial-stat-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0;}
.trial-stat-label{font-size:16px;color:var(--desc);}
.trial-stat-value{font-size:17.5px;font-weight:700;color:var(--desc);white-space:nowrap;}

/* Info tab */
.trial-info-panel{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;}
.trial-info-title{font-size:19px;font-weight:700;color:var(--gold);margin-bottom:6px;}
.trial-info-lead{font-size:17px;color:var(--desc);margin-bottom:10px;}
.trial-info-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;}
.trial-info-list li{font-size:16.5px;color:var(--desc);line-height:1.5;}
.trial-info-note{font-size:16px;color:var(--desc);margin-top:12px;padding-top:10px;border-top:1px solid var(--border);}
.trial-info-note b{color:var(--text2);}

/* Final legacy pass: this sits after screen-specific rules so every existing
   card/panel shell resolves to the Prestige frame instead of a rounded border. */
.main-content :is(.node-card,.btl-troop-card,.guild-invite-card,.guild-create-box,
  .guild-search-box,.guild-ann-card,.shop-card,.shop-hist-row,.tab-card,
  .item-modal-icon,.inv-slot,.equip-slot,.btl-food-slot,.mkt-cell,.market-card,
  .pvp-card,.wb-card,.quest-card,.mail-card,.daily-quest-card,.profile-card,
  .settings-card,.trial-sub-panel,.trial-stats-card,.trial-info-panel,
  .trial-prestige-bar,.trial-boss-col,.pstore-card){
  border:18px solid transparent !important;
  border-image:var(--prestige-frame) 92 / 18px stretch !important;
  border-radius:0 !important;
  background-color:var(--prestige-panel) !important;
  background-image:linear-gradient(180deg,rgba(11,51,72,.94),rgba(3,15,26,.98)) !important;
}

/* Keep the rank filter in the same text-led navigation family as the Armory
   tab row, after legacy rank-button rules so they cannot restore button chrome. */
.troop-rank-bar{
  gap:14px;
  border-bottom:1px solid rgba(96,137,153,.24);
}
.troop-rank-btn{
  position:relative;
  padding:8px 3px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#b7b8a4 !important;
  box-shadow:none !important;
}
.troop-rank-btn:hover{color:#fff3c6 !important;}
.troop-rank-btn.active{
  background:transparent !important;
  color:#fff3c6 !important;
}
.troop-rank-btn.active::after{
  content:'';
  position:absolute;
  height:2px;
  bottom:-1px;
  left:-9px;
  right:-9px;
  background:linear-gradient(90deg,transparent,#7a581d 18%,#f0cf72 50%,#7a581d 82%,transparent);
  box-shadow:0 0 8px rgba(237,195,84,.45);
}

/* Make Trial of Prestige's typography the shared game type system. */
#game, #game *{font-family:'Trial UI',serif !important;}
#game :is(h1,h2,h3,h4,h5,h6,.auth-logo-title,.loading-title,.top-logo,
  .sidebar-title,.prof-item-name,.panel-title,.armory-cp,.pvp-def-cp,
  .wb-bsp-name,.wb-name,.landing-kicker,.landing-title,.landing-wb-title,
  .landing-faq-title,.troopu-banner-name,.trial-stage-label,.trial-prestige-title,
  .trial-boss-preview-name,.trial-info-title,.trial-stats-head,.pstore-name,
  .tbs-name,.trial-tab,.pstore-tab){font-family:'Trial Fantasy',serif !important;}

/* Vertical sub-navigation mirrors the left game rail: one quiet guide line,
   with the selected row marked at its left edge instead of boxed in gold. */
:is(.troop-arch-nav,.zone-list){
  gap:2px;
  box-sizing:border-box;
  padding-left:12px;
  border-left:1px solid rgba(111,145,158,.34);
}
:is(.troop-arch-btn,.zone-item){
  position:relative;
  min-height:42px;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#b7b8a4 !important;
  box-shadow:none !important;
}
:is(.troop-arch-btn,.zone-item):hover{
  background:linear-gradient(90deg,rgba(24,70,89,.38),rgba(24,70,89,.08)) !important;
  color:#fff3c6 !important;
}
:is(.troop-arch-btn,.zone-item).active{
  background:linear-gradient(90deg,rgba(24,70,89,.56),rgba(24,70,89,.12)) !important;
  color:#fff3c6 !important;
}
:is(.troop-arch-btn,.zone-item).active::after{
  content:'';
  position:absolute;
  top:6px;
  left:-13px;
  bottom:6px;
  width:2px;
  background:linear-gradient(180deg,transparent,#f0cf72 28%,#f0cf72 72%,transparent);
  box-shadow:0 0 8px rgba(237,195,84,.58);
}

/* Armory troop ranks are a horizontal filter tab row, not individual buttons. */
.troop-rank-bar{
  gap:14px;
  border-bottom:1px solid rgba(96,137,153,.24);
}
.troop-rank-btn{
  position:relative;
  padding:8px 3px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#b7b8a4 !important;
  box-shadow:none !important;
}
.troop-rank-btn:hover{color:#fff3c6 !important;}
.troop-rank-btn.active{
  background:transparent !important;
  color:#fff3c6 !important;
}
.troop-rank-btn.active::after{
  content:'';
  position:absolute;
  height:2px;
  bottom:-1px;
  left:-9px;
  right:-9px;
  background:linear-gradient(90deg,transparent,#7a581d 18%,#f0cf72 50%,#7a581d 82%,transparent);
  box-shadow:0 0 8px rgba(237,195,84,.45);
}

/* System chrome intentionally stays lightweight.  It is separate from the
   game-content panel system, so top-bar controls and chat do not use the
   ornate Prestige frame or metallic button treatment. */
.top-bar :is(button,.username-tag.clickable,.player-level,.guest-banner,.lang-pick-btn){
  border-image:none !important;
  border-radius:8px !important;
  border:1px solid var(--border) !important;
  background:var(--bg3) !important;
  color:var(--text2) !important;
  box-shadow:none !important;
}
.top-bar :is(button,.username-tag.clickable,.lang-pick-btn):hover:not(:disabled){
  border-color:var(--border2) !important;
  background:var(--bg4) !important;
  color:var(--text) !important;
}
.top-bar .player-level{background:var(--bg4) !important;border-color:var(--border2) !important;}
.top-bar .guest-banner{background:rgba(240,192,64,.12) !important;border-color:rgba(240,192,64,.35) !important;color:#f0c040 !important;}
.top-bar .logout-btn{background:transparent !important;}

/* Runic HUD controls — the account level and utility actions deliberately use
   a charcoal frame instead of the game's gold-trimmed content-panel chrome. */
.top-bar .player-level{border:1px solid #8d7537!important;border-image:none!important;border-radius:3px!important;background:linear-gradient(180deg,#111d2a,#0b1722)!important;box-shadow:inset 0 0 0 1px rgba(236,205,116,.08),0 4px 12px rgba(0,0,0,.24)!important;transition:border-color .3s,transform .15s ease,filter .15s ease;}
.top-bar .player-level:hover{transform:translateY(-2px);filter:brightness(1.08);}
.top-bar .player-level.guest-account,
.top-bar:has(.guest-banner.visible) .player-level{border-color:#c4cbd2!important;}
.top-bar .player-level.has-points{border-color:#8b96a5!important;animation:levelGlowRunic 1.8s ease-in-out infinite;}
@keyframes levelGlowRunic{0%,100%{box-shadow:inset 0 0 0 2px rgba(4,10,18,.55),0 0 6px rgba(150,166,184,.28);}50%{box-shadow:inset 0 0 0 2px rgba(4,10,18,.55),0 0 14px rgba(150,166,184,.5);}}
.top-bar .pl-label{color:#a4adba!important;}
.top-bar .pl-num{color:#e4e8ed!important;}
.top-bar .pl-xp-wrap{background:rgba(0,0,0,.34)!important;}
.top-bar .pl-xp-bar{background:linear-gradient(90deg,#8893a2,#c4cbd2)!important;}
.top-bar .pl-pts-badge{background:#aeb8c3!important;color:#15202b!important;}
.top-user{gap:7px;padding:3px;border:0;border-radius:0;background:transparent;box-shadow:none;}
.top-bar .top-user :is(button.top-action-btn,.username-tag.clickable.top-action-btn){width:auto;min-height:38px;height:38px;display:flex!important;align-items:center;justify-content:center;gap:6px;padding:0 10px!important;border:1px solid #8d7537!important;border-radius:3px!important;background:linear-gradient(180deg,#132231,#0b1824)!important;color:#e8e0c7!important;box-shadow:inset 0 0 0 1px rgba(236,205,116,.06)!important;font-size:12px!important;font-weight:600!important;}
.top-bar .top-user .tut-replay-btn{border-radius:4px!important;}
.top-bar .top-action-btn .sys-ico{width:15px;height:15px;}
.top-bar .top-action-btn.feedback-action{color:#e5dfc8!important;}
.top-bar .top-action-btn.settings-action{color:#e5dfc8!important;}
.top-bar .top-action-btn.user-action{color:#e5dfc8!important;}
.top-bar .top-action-btn.signout-action{color:#e5dfc8!important;}
.top-bar .top-action-btn:hover:not(:disabled){border-color:#d1ad4f!important;background:linear-gradient(180deg,#1a2c3e,#102131)!important;color:#fff4c9!important;filter:none!important;box-shadow:inset 0 0 0 1px rgba(255,220,125,.12),0 0 8px rgba(196,151,45,.12)!important;}
.top-bar .top-action-btn:active:not(:disabled){background:#0b1621!important;border-color:#e0bd61!important;}

/* Settings sections use the same square silver frame as the account-level widget. */
.settings-section{border:1px solid #4d535e!important;border-radius:0!important;background:linear-gradient(135deg,#172130,#102f3d)!important;box-shadow:inset 0 0 0 1px rgba(202,211,220,.1),0 5px 14px rgba(0,0,0,.2)!important;}
.settings-section .set-account-box{border:1px solid #4d535e!important;border-radius:0!important;background:linear-gradient(135deg,#14202e,#0d2533)!important;box-shadow:inset 0 0 0 1px rgba(202,211,220,.08)!important;}
.settings-section .linked-row{border-bottom-color:rgba(77,83,94,.8)!important;}
.settings-section .set-cred-value{border-color:#4d535e!important;border-radius:0!important;background:#0d1b28!important;}

/* Settings controls keep the silver system frame; colour remains in fills/text only. */
.settings-modal :is(.set-theme,.set-theme.active,.set-cred-btn,.set-account-btn,.set-pw-input,.linked-act-btn,.lang-pick-btn,.set-cred-value,.set-theme-swatch){border-color:#4d535e!important;border-radius:0!important;}
.settings-modal :is(.set-theme:hover,.set-theme.active,.set-cred-btn:hover,.linked-act-btn:hover,.lang-pick-btn:hover,.lang-pick-btn.open,.set-pw-input:focus){border-color:#8b96a5!important;}
.settings-modal :is(.linked-chip.on,.linked-chip.off,.set-toggle,.set-toggle.on){border-color:#4d535e!important;}

/* Mailbox rows and detail panes match the Settings panel family. */
.mail-col-right,.mail-row,.mail-reward-chip{border:1px solid #4d535e!important;border-radius:0!important;background:linear-gradient(135deg,#172130,#102f3d)!important;box-shadow:inset 0 0 0 1px rgba(202,211,220,.08)!important;}
.mail-row.active{border-color:#8b96a5!important;background:linear-gradient(135deg,#1b2a39,#123747)!important;}
.mail-search{border-color:#4d535e!important;border-radius:0!important;background:#0d1b28!important;}

/* Player-profile inner surfaces use the same square silver panel treatment. */
.profile-modal .profile-medals,.profile-modal .profile-medal,.profile-modal .profile-skill-cell{border:1px solid #4d535e!important;border-radius:0!important;background:linear-gradient(135deg,#172130,#102f3d)!important;box-shadow:inset 0 0 0 1px rgba(202,211,220,.08)!important;}
.profile-modal .profile-skill-name,.profile-modal .profile-skill-lvl{color:#f7f8fb!important;}
.profile-modal .tip-divider{border-top-color:#4d535e!important;}

.chat-box{
  border-image:none !important;
  border-radius:0 !important;
  border:1px solid #fff !important;
  background:linear-gradient(135deg,rgba(21,29,37,.97),rgba(7,15,22,.98)) !important;
  box-shadow:inset 0 0 0 1px rgba(202,211,220,.14),0 10px 28px rgba(0,0,0,.58) !important;
}
.chat-box .chat-header{background:rgba(16,25,34,.94) !important;border-bottom-color:rgba(77,83,94,.75) !important;}
.chat-box .chat-header-title{color:#dce4e9 !important;}
.chat-box :is(button,.chat-input-field,.chat-input-whisper-wrap){
  border-image:none !important;
  box-shadow:none !important;
}
.chat-box :is(.chat-min-btn,.chat-tab,.chat-ctx-item,.chat-set-back,.chat-whisper-clear-btn){
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--text3) !important;
}
.chat-box .chat-tab{
  border:1px solid var(--border) !important;
  border-radius:9px !important;
  background:var(--bg2) !important;
  color:var(--text2) !important;
}
.chat-box .chat-tab:hover{background:var(--bg3) !important;color:var(--text) !important;}
.chat-box .chat-tab.active{background:var(--bg3) !important;border-color:var(--gold) !important;color:var(--gold) !important;}
.chat-box :is(.chat-set-font-btn,.chat-set-unmute-btn){
  border:1px solid var(--border) !important;
  border-radius:6px !important;
  background:var(--bg4) !important;
  color:var(--text) !important;
}
.chat-box .chat-input-field{
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.08) !important;
  color:var(--text) !important;
}

@property --chat-gold-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes chat-gold-border-rotate {
  to { --chat-gold-border-angle: 360deg; }
}
.chat-box .chat-input-row :is(.chat-input-field,.chat-input-whisper-wrap){
  border:1px solid transparent !important;
  border-radius:0 !important;
  background:
    linear-gradient(#0a1720,#0a1720) padding-box,
    conic-gradient(from var(--chat-gold-border-angle),#4a2f0d,#f5d66f,#8f5c1b,#261704,#c58a28,#f5d66f,#4a2f0d) border-box !important;
  animation:chat-gold-border-rotate 5s linear infinite;
}

/* Shared game-content tabs: labels hold a stable visual weight even when the
   translated name is short. Rows wrap rather than compressing or overflowing. */
:is(.pstore-tabs,.trial-tabs,.combat-tabbar,.inv-tab-bar,.mkt-tabs,
    .profile-tabbar,.doll-tabbar){
  gap:10px !important;
  flex-wrap:wrap;
}
:is(.pstore-tab,.trial-tab,.combat-tab,.inv-tab-btn,.mkt-tab,.profile-tab,.doll-tab,.forge-tier-btn){
  min-width:104px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Stage grid */

/* Sub-stage row */
.trial-sub-panel{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px;}
.trial-sub-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;}
.trial-sub-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}

.trial-sub-icon{font-size:20px;}
.trial-sub-name{font-size:12px;font-weight:700;color:var(--text);}
.trial-sub-hp{font-size:12px;color:var(--text3);}
.trial-sub-timer{font-size:12px;color:var(--red);font-weight:600;}

/* Fight view */

/* Time-left bar — centered below the enemy bars, sits over the arena divider */
.trial-timer-bar-wrap{display:flex;align-items:center;gap:10px;justify-content:center;max-width:440px;margin:10px auto;}
.trial-timer-label{font-size:12px;font-weight:700;color:var(--text2);white-space:nowrap;}
.trial-timer-bar{position:relative;flex:1;height:20px;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;overflow:hidden;}
.trial-timer-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#f0c040,#e06b3a);transition:width .1s linear;}
.trial-timer-fill.urgent{background:linear-gradient(90deg,#e0503a,#b0281a);animation:trial-timer-pulse .5s ease-in-out infinite alternate;}
.trial-timer-ticks{position:absolute;inset:0;pointer-events:none;}
.trial-timer-tick{position:absolute;top:-2px;bottom:-2px;width:2px;background:rgba(0,0,0,0.4);transform:skewX(-22deg);}
.trial-timer-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);font-variant-numeric:tabular-nums;}
@keyframes trial-timer-pulse{from{opacity:1;}to{opacity:.5;}}

.trial-fight-tabnote{font-size:12px;color:var(--text3);padding:6px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;}

/* Trial fight modal — wider 2-column layout */

/* Trial tabs */
.trial-tabs{display:flex;gap:6px;margin-bottom:12px;}
.trial-tab{background:var(--bg2);border:1px solid var(--border);border-radius:10px;color:var(--text2);font-size:13px;font-weight:600;padding:8px 18px;cursor:pointer;transition:all .15s;}
.trial-tab:hover{border-color:var(--border2);color:var(--text);}
.trial-tab.active{background:var(--bg3);border-color:var(--gold);color:var(--gold);}

/* Stage label */
.trial-stage-label{font-size:28px;font-weight:800;color:var(--text);text-align:center;margin-bottom:14px;}

/* Three-column boss layout: stats | doll | boss */
.trial-boss-layout{display:grid;grid-template-columns:180px 1fr 1fr;gap:16px;align-items:start;}
.trial-stats-col{display:flex;flex-direction:column;}
.trial-player-col{display:flex;flex-direction:column;}
/* The 3x3 doll grid is a fixed ~260px pinned left while this panel stretches,
   so centring the silhouette on the whole panel drops it on top of the slots.
   Centre it in the space REMAINING to the right of the grid instead:
   260 + (100% - 260)/2  ==  50% + 130px. */
.trial-player-col .doll-silhouette{left:calc(50% + 130px);}
.trial-slots-row{display:flex;gap:16px;flex-wrap:wrap;}
.trial-slots-group{flex:1;min-width:120px;}
.trial-boss-col{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px;}
.trial-boss-preview-icon{font-size:64px;line-height:1;text-align:center;margin-bottom:4px;}
.trial-boss-preview-name{font-size:16px;font-weight:700;color:var(--text);text-align:center;margin-bottom:6px;}
/* Boss skill (stage 2-1+) — preview column in the boss panel and the in-fight
   badge beside the enemy card. The countdown span is engine-owned (see
   updateTrialBars), everything else is static React. */
.trial-boss-info-cols{display:flex;gap:12px;align-items:stretch;}
.trial-boss-statrows{flex:1;min-width:0;}
.trial-boss-skillcol{flex:0 0 46%;min-width:0;border-left:1px solid var(--border2);padding-left:12px;display:flex;flex-direction:column;gap:6px;}
.tbs-head{display:flex;align-items:center;gap:8px;}
.tbs-icon{font-size:26px;line-height:1;}
.tbs-name{font-size:13px;font-weight:800;color:var(--text);}
.tbs-type{font-size:10.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;}
.tbs-type.active{color:var(--gold);}
.tbs-desc{font-size:12.5px;color:var(--desc);font-family:'Alegreya',serif;line-height:1.35;}
/* The badge flows IN the row beside the enemy card (no absolute offset —
   that hung it off the right edge of the panel). The pair centers as a
   group, so the card nudges slightly left to make room. */
.btl-enemy-side{align-items:center;gap:10px;}
.btl-bskill{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg2);border:1px solid var(--border2);border-radius:0;padding:8px 10px;cursor:help;flex:0 0 auto;}
.btl-bskill-icon{font-size:22px;line-height:1;}
.btl-bskill-cd{font-size:11px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;}
.btl-bskill-tag{font-size:9.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;}
.trial-fight-main-btn{background:var(--red2);border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:800;padding:14px;cursor:pointer;width:100%;margin-top:12px;transition:filter .15s;}
/* The global `button:hover` scale(1.05) has nowhere to go on a width:100%
   button — it grows 5% past the panel's padding on both sides. Brightness
   alone is the hover here. */
/* A width:100% button can't grow sideways without leaving the panel, so the
   hover reads as a LIFT: the label visibly rises 3px while the scale stays
   small enough to keep the edges inside the border. */
.trial-fight-main-btn:hover:not(:disabled){transform:translateY(-3px) scale(1.012);filter:brightness(1.15);}

.trial-skip-row{display:flex;justify-content:flex-end;gap:8px;padding:0 .75rem .25rem;}
.trial-skip5-btn{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:12px;font-weight:700;padding:4px 10px;cursor:pointer;transition:all .15s;}
.trial-skip5-btn:disabled{opacity:.35;cursor:not-allowed;}
.trial-skip5-btn:hover{border-color:var(--accent);color:var(--accent);}
.trial-skip5-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}

/* Store placeholder */
.trial-store-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;color:var(--text3);}
.trial-store-icon{font-size:48px;}
.trial-store-msg{font-size:18px;font-weight:700;color:var(--text2);}
.trial-store-sub{font-size:13px;}

/* Prestige Store */
.pstore-tabs{display:flex;gap:6px;margin-bottom:12px;}
.pstore-tab{background:var(--bg2);border:1px solid var(--border);border-radius:9px;color:var(--text2);font-size:12.5px;font-weight:600;padding:7px 15px;cursor:pointer;transition:all .15s;}
.pstore-tab:hover{border-color:var(--border2);color:var(--text);}
.pstore-tab.active{background:var(--bg3);border-color:var(--gold);color:var(--gold);}
/* grid-auto-rows:1fr — every card in the grid gets the tallest card's height,
   so a 2-line description doesn't make its panel taller than its neighbours.
   Paired with margin-top:auto on .pstore-passive-note{font-size:11px;color:var(--text3);font-style:italic;margin-top:auto;padding-top:8px;}
.pstore-buy-btn, which pins the buy button
   (and the bonus line right above it) to the same height in every card. */
.pstore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(231px,1fr));gap:12px;grid-auto-rows:1fr;}
.pstore-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;transition:border-color .15s;}
.pstore-card:hover{border-color:var(--hover-border);}
.pstore-head{display:flex;align-items:center;gap:8px;}
.pstore-icon{font-size:22px;}
.pstore-name{flex:1;font-size:13.5px;font-weight:700;color:var(--text);}
.pstore-lvl{font-size:11px;font-weight:700;color:var(--gold);background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:2px 8px;align-self:flex-start;margin-left:auto;}
.trial-font-preview .trial-premium-frame .pstore-lvl.upgrade-level,
#shop-tab-content .pstore-lvl.upgrade-level{color:var(--gold);background:#142936;border-color:#8ea7b5;border-radius:3px;padding:3px 7px;line-height:1.1;}
/* flex:1 — the description absorbs the card's spare height, so a 1-line and a
   2-line description still leave the bonus line at the same y in every card. */
.pstore-desc{font-size:15.5px;color:var(--desc);flex:1 1 auto;}
.pstore-bonus{font-size:12px;color:var(--text2);}
.pstore-bonus b{color:var(--green);}
.pstore-buy-btn{margin-top:auto;padding:8px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;}
.pstore-buy-btn:hover:not(:disabled){opacity:0.9;}
.pstore-buy-btn:disabled{opacity:0.45;cursor:not-allowed;}

/* Resize handles */
.chat-rh{position:absolute;z-index:10;}
.chat-rh.nw{top:0;left:0;width:20px;height:20px;cursor:nw-resize;}
.chat-rh.ne{top:0;right:0;width:20px;height:20px;cursor:ne-resize;}
.chat-rh.w {top:20px;left:0;width:10px;height:calc(100% - 40px);cursor:ew-resize;}
.chat-rh.e {top:20px;right:0;width:10px;height:calc(100% - 40px);cursor:ew-resize;}
.chat-rh.s {bottom:0;left:20px;width:calc(100% - 40px);height:10px;cursor:s-resize;}
.chat-rh.sw{bottom:0;left:0;width:20px;height:20px;cursor:sw-resize;}
.chat-rh.se{bottom:0;right:0;width:20px;height:20px;cursor:se-resize;}

/* ══ SETTINGS ══ */
.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-btn:hover{border-color:var(--border2);color:var(--text);}
.settings-modal{max-width:520px;max-height:86vh;display:flex;flex-direction:column;position:relative;}
.settings-title{font-size:19px;font-weight:700;color:#fff;margin-bottom:1rem;}
.settings-body{overflow-y:auto;display:flex;flex-direction:column;gap:1.1rem;padding-right:4px;}
.settings-section{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
.settings-section-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px;letter-spacing:0.02em;}
.settings-placeholder{font-size:12px;color:var(--text3);font-style:italic;padding:6px 0 2px;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;}
.set-row-label{font-size:13px;color:var(--text2);}
.set-slider-wrap{display:flex;align-items:center;gap:10px;flex:1;max-width:220px;}
.set-slider-wrap input[type=range]{flex:1;accent-color:var(--gold);cursor:pointer;}
.set-slider-val{font-size:12px;color:var(--text3);width:38px;text-align:right;font-variant-numeric:tabular-nums;}
/* Toggle switch */
.set-toggle{width:42px;height:24px;border-radius:999px;border:1px solid var(--border2);background:var(--bg4);position:relative;cursor:pointer;padding:0;flex-shrink:0;transition:background 0.15s,border-color 0.15s;}
.set-toggle-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text3);transition:left 0.15s,background 0.15s;}
.set-toggle.on{background:var(--green3);border-color:var(--green2);}
.set-toggle.on .set-toggle-knob{left:20px;background:var(--green);}
.set-toggle:disabled{opacity:0.4;cursor:not-allowed;}
/* Theme picker */
.set-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}
.set-theme{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:8px 10px;cursor:pointer;font-size:12px;color:var(--text2);transition:border-color 0.12s;}
.set-theme:hover{border-color:var(--border2);}
.set-theme.active{border-color:var(--gold);color:var(--text);}
.set-theme-swatch{width:18px;height:18px;border-radius:5px;border:1px solid var(--border2);flex-shrink:0;}

/* ══ PRESTIGE CONFIRM DIALOG ══ */
.prestige-confirm-modal{max-width:420px;text-align:center;}
.pc-icon{font-size:38px;margin-bottom:6px;}
.pc-title{font-size:20px;font-weight:800;color:var(--gold);margin-bottom:10px;}
.pc-warn{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:16px;}
.pc-warn-zero{color:var(--red);}
.pc-checkbox{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--text3);cursor:pointer;margin-bottom:18px;}
.pc-checkbox input{width:15px;height:15px;accent-color:var(--gold);cursor:pointer;}
.pc-actions{display:flex;gap:10px;}
.pc-btn{flex:1;padding:11px;border-radius:10px;border:none;font-size:14px;font-weight:700;cursor:pointer;}
.pc-btn.cancel{background:var(--bg4);color:var(--text2);}
.pc-btn.cancel:hover{color:var(--text);}
.pc-btn.confirm{background:var(--red2);color:#fff;}
.pc-btn.confirm:hover{filter:brightness(1.15);}

/* ═══════════════ WORLD BOSS ═══════════════ */
.wb-layout{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;margin-bottom:0;}
.wb-boss-row{display:flex;gap:1rem;align-items:flex-start;width:100%;}
.wb-boss-row .wb-hero{flex:1;min-width:0;max-width:none;}
.wb-boss-stats-panel{width:260px;flex-shrink:0;text-align:left;}
.wb-bsp-icon{font-size:110px;line-height:1;text-align:center;margin-bottom:4px;}
/* Box the boss art renders into on the right-hand stats card. Wider than tall
   so landscape boss art is not the one letterboxed — MonsterAvatar2D/3D fill
   100% of this and contain themselves inside it, so this is the only number
   that decides how big the art comes out. Was 80x80, hardcoded inline in the
   JSX twice (2D and 3D); it lives here now so both move together. */
.wb-bsp-figure{width:150px;height:110px;margin:0 auto;}
.wb-bsp-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--gold);text-align:center;}
.wb-bsp-level{font-size:12px;color:var(--text2);text-align:center;margin-bottom:4px;}
.wb-rewards-card{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.wb-rewards-open-btn{background:var(--blue2);color:#fff;border:none;border-radius:10px;padding:10px 22px;font-size:15px;font-weight:600;cursor:pointer;width:100%;}
.wb-rewards-open-btn:hover{background:var(--blue);}
.wb-rewards-modal-body{display:flex;flex-direction:column;gap:2px;margin-top:0.5rem;}
.wb-tier-row-modal{padding:8px 0;}
@media(max-width:900px){.wb-boss-row{flex-direction:column;}.wb-boss-stats-panel{width:100%;}}
.wb-top-actions{margin-left:auto;display:flex;gap:8px;}
.wb-top-btn{padding:8px 16px;border-radius:9px;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:color .15s,border-color .15s;}
.wb-top-btn:hover{color:var(--text);border-color:var(--text3);}
.wb-top-btn.active{color:var(--gold);border-color:var(--gold2);}
.wb-hero{
  background:
    radial-gradient(ellipse at 50% 115%,rgba(211,52,20,.42) 0,rgba(117,18,18,.22) 34%,transparent 66%),
    radial-gradient(circle at 16% 22%,rgba(169,32,20,.16) 0,transparent 28%),
    linear-gradient(145deg,#260b0d 0%,#12090c 48%,#2b0c0e 100%);
  border:4px solid transparent;
  border-image:linear-gradient(135deg,#3c090c 0%,#a63b3e 18%,#4f0d11 42%,#c4534d 55%,#4a0b0f 78%,#8f292d 100%) 1;
  border-radius:2px;
  box-shadow:
    inset 0 0 0 1px rgba(255,116,100,.48),
    inset 0 0 0 5px rgba(45,5,8,.82),
    inset 0 0 42px rgba(148,18,12,.24),
    0 6px 18px rgba(0,0,0,.48);
  padding:1rem 1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:720px;
}
.wb-hero-head{display:flex;justify-content:space-between;width:100%;align-items:center;}
.wb-badge{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.5px;}
.wb-badge.active{background:var(--green3);color:var(--green);border:1px solid var(--green2);}
.wb-badge.defeated{background:#2a1212;color:var(--red);border:1px solid var(--red2);}
.wb-badge.ended{background:var(--bg4);color:var(--text2);border:1px solid var(--border2);}
.wb-level{font-size:16px;font-weight:700;color:var(--gold);}
.wb-art{font-size:190px;line-height:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));margin:2px 0 0;}
/* Main stage for the boss art. Same deal as .wb-bsp-figure: was 120x120 inline
   in the JSX, now one place, wider than tall so landscape art fills it. */
.wb-art-figure{width:300px;height:210px;margin:0 auto;}
.wb-name{font-family:'Cinzel',serif;font-size:24px;font-weight:700;color:var(--gold);}
.wb-hpbar-wrap{width:100%;max-width:560px;margin-top:2px;}
.wb-hpbar{height:22px;background:var(--bg4);border:1px solid var(--border2);border-radius:11px;overflow:hidden;}
.wb-hpbar-fill{height:100%;background:linear-gradient(90deg,#a01818,var(--red));border-radius:11px;transition:width .8s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(245,90,90,.35);}
.wb-hp-line{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-top:5px;font-weight:600;}
.wb-timers{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center;margin-top:0;}
.wb-timer{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--desc);}
.wb-timer b{font-size:18px;color:var(--desc);}
.wb-attack-btn{margin-top:4px;padding:10px 40px;border:none;border-radius:12px;background:linear-gradient(180deg,var(--red),#b02020);color:#fff;font-size:16px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;letter-spacing:.5px;box-shadow:0 4px 16px rgba(245,90,90,.3);transition:transform .12s,filter .15s;}
.wb-attack-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1);}
.wb-attack-btn:disabled{background:var(--bg4);color:var(--text3);cursor:default;box-shadow:none;}
.wb-attack-btn.cooldown{background:var(--bg4);color:var(--text2);}
.wb-fight-note{font-size:15px;color:var(--desc);}
.wb-side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;width:100%;align-items:start;}
@media(max-width:900px){.wb-side{grid-template-columns:1fr;}}
.wb-rewards-header{cursor:pointer;user-select:none;display:flex;justify-content:space-between;align-items:center;}
.wb-rewards-toggle{font-size:12px;color:var(--text3);}
.wb-hist-lb-btn{background:var(--bg4);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:3px 8px;font-size:12px;cursor:pointer;}
.wb-hist-lb-btn:hover{border-color:var(--blue);color:var(--blue);}
.wb-hist-lb-cell{padding:0.5rem 1rem 1rem;background:var(--bg3);}

.wb-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:.75rem 1rem;}
.wb-tier-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border);}
.wb-tier-row:last-of-type{border-bottom:none;}
.wb-tier-label{color:var(--gold);font-weight:700;white-space:nowrap;}
.wb-tier-rewards{color:var(--text2);text-align:right;}
/* Weekly Rewards modal rows: tier | silver | gems | item as grid columns so
   the numbers line up down the list. Declared after .wb-tier-row so the grid
   display wins over its flex. */
.wb-tier-row.wb-tier-row-modal{display:grid;grid-template-columns:1fr 96px 84px 78px;align-items:center;column-gap:10px;}
.wb-tier-cell{display:flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap;color:var(--text2);cursor:default;}
.wb-tier-cell .item-ico{width:1.35em;height:1.35em;}
.wb-tier-cell-empty{color:var(--text3);}
.wb-tier-note{font-size:15px;color:var(--desc);margin-top:8px;line-height:1.5;}
.wb-lb-card{margin-bottom:1rem;}
.wb-lb-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.wb-lb-table th{text-align:left;color:var(--text3);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--border2);}
.wb-lb-table td{padding:7px 8px;border-bottom:1px solid var(--border);color:var(--text);}
.wb-lb-table tr:last-child td{border-bottom:none;}
.wb-lb-table .num{text-align:right;}
.wb-lb-table tr.me td{background:var(--green3);}
.wb-you{color:var(--green);font-size:12px;}
.wb-lb-empty{color:var(--text3);font-size:13px;padding:1rem 0;text-align:center;}
.wb-lb-more{text-align:right;font-size:12px;margin-top:8px;}
.wb-lb-more a{color:var(--gold);cursor:pointer;}
.wb-hist-lv{color:var(--text3);font-size:12px;}
/* Uniform history rows: a fixed height plus no wrapping, so a long boss name
   can't push one row taller. The last row keeps a transparent bottom border
   so dropping the visible one doesn't shave a pixel off its height. */
.wb-hist-table tbody tr{height:38px;}
.wb-hist-table tbody td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;}
/* The Top Players button column sizes to its content — the shared max-width:0
   ellipsis trick above was clipping the button mid-label. */
.wb-hist-table tbody td.wb-hist-btn-td{max-width:none;width:1%;overflow:visible;}
.wb-hist-table tbody tr:last-child td{border-bottom:1px solid transparent;}
.wb-fight-dmg{margin-top:1rem;text-align:center;font-size:14px;color:var(--text2);}
.wb-fight-dmg b{color:var(--gold);font-size:17px;}
.wb-fight-dmg-note{display:block;font-size:15px;color:var(--desc);margin-top:3px;}

/* ═══════════════ MAILBOX ═══════════════ */
.mail-badge{margin-left:auto;background:var(--red);color:#fff;font-size:12px;font-weight:800;border-radius:10px;padding:2px 7px;min-width:18px;text-align:center;}
.mail-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;}

/* Two-column MMO mailbox: left list, right detail */
.mail-layout{display:flex;gap:16px;align-items:flex-start;max-width:900px;}
.mail-col-left{flex:0 0 320px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.mail-col-right{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--border);border-radius:12px;min-height:340px;}

.mail-claimall-btn{padding:12px;border:none;border-radius:10px;background:var(--green2);color:#fff;font-size:14px;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;transition:filter .15s;}
.mail-claimall-btn:hover:not(:disabled){filter:brightness(1.15);}
.mail-claimall-btn:disabled{opacity:.45;cursor:default;}

.mail-search{padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg1);color:var(--text);font-size:13px;font-family:'Inter',sans-serif;outline:none;}
.mail-search:focus{border-color:#4a9eff;}

.mail-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto;}
.mail-row{display:flex;align-items:center;gap:8px;padding:10px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .12s,background .12s;}
.mail-row:hover{border-color:var(--hover-border);}
.mail-row.active{border-color:#4a9eff;background:var(--bg1);}
.mail-row.unread .mail-row-subject{color:var(--text);font-weight:700;}
.mail-row-dot{width:8px;flex:0 0 8px;display:flex;justify-content:center;}
.mail-row-reward{width:16px;flex:0 0 16px;text-align:center;font-size:13px;}
.mail-reward-done{color:var(--green);font-weight:700;}
.mail-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.mail-row-subject{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mail-row-sender{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mail-row-date{font-size:12px;color:var(--text3);white-space:nowrap;flex-shrink:0;}

.mail-empty,.mail-detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 16px;text-align:center;}
.mail-empty-icon{font-size:34px;opacity:.7;}
.mail-empty-msg{font-size:13px;color:var(--text3);}

.mail-detail{padding:18px 20px;display:flex;flex-direction:column;gap:10px;}
.mail-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.mail-detail-subject{font-size:17px;font-weight:800;color:var(--text);line-height:1.3;}
.mail-detail-del{flex-shrink:0;border:1px solid var(--border);background:transparent;color:var(--text3);border-radius:7px;padding:5px 9px;cursor:pointer;font-size:13px;transition:color .12s,border-color .12s;}
.mail-detail-del:hover:not(:disabled){color:var(--red);border-color:var(--red);}
.mail-detail-del:disabled{opacity:.35;cursor:default;}
.mail-detail-meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--text3);border-bottom:1px solid var(--border);padding-bottom:10px;}
.mail-detail-meta b{color:var(--text2);}
.mail-detail-expiry{font-size:12px;color:var(--gold);}
.mail-detail-body{font-size:13.5px;color:var(--text2);line-height:1.7;}

.mail-detail-rewards{margin-top:6px;padding-top:12px;border-top:1px solid var(--border);}
.mail-rewards-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
.mail-rewards-icons{display:flex;flex-wrap:wrap;gap:10px;}
.mail-reward-chip{position:relative;display:inline-flex;align-items:flex-end;justify-content:center;width:52px;height:52px;background:var(--bg1);border:1px solid var(--border);border-radius:10px;cursor:default;}
.mail-reward-icon{position:absolute;top:6px;left:0;right:0;text-align:center;font-size:22px;line-height:1;}
.mail-reward-qty{position:relative;font-size:12px;font-weight:800;color:var(--text);background:rgba(0,0,0,.45);border-radius:6px;padding:0 4px;margin-bottom:3px;}
.mail-rewards-none{font-size:12px;color:var(--text3);}
.mail-detail-claimrow{display:flex;justify-content:center;margin-top:14px;}
.mail-claim-btn-lg{padding:11px 40px;border:none;border-radius:10px;background:var(--green2);color:#fff;font-size:14px;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;transition:filter .15s;}
.mail-claim-btn-lg:hover:not(:disabled){filter:brightness(1.15);}
.mail-claim-btn-lg:disabled{opacity:.45;cursor:default;background:var(--bg3,#333);}

@media (max-width:640px){
  .mail-layout{flex-direction:column;}
  .mail-col-left{flex:1 1 auto;width:100%;}
  .mail-col-right{width:100%;}
}
.wb-buff-banner{margin:10px 0 6px;padding:10px 14px;border-radius:10px;background:linear-gradient(135deg,rgba(255,200,50,.18),rgba(255,160,0,.10));border:1px solid rgba(255,200,50,.4);color:var(--gold);font-size:13px;font-weight:600;text-align:center;}
.wb-attack-btn-post{background:linear-gradient(180deg,#6a4c93,#4a2c73)!important;box-shadow:0 4px 16px rgba(106,76,147,.3)!important;}
.wb-prep-lock-warning{margin-top:0.75rem;padding:0.5rem 0.75rem;background:rgba(230,160,0,0.12);border:1px solid rgba(230,160,0,0.35);border-radius:8px;color:var(--text2);font-size:12px;text-align:center;}

/* ═══ AUTH REDESIGN — agreements, OAuth, guest page ═══ */
.agree-block{margin:0.75rem 0 0.5rem;display:flex;flex-direction:column;gap:8px;}
.agree-row{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--text2);line-height:1.5;cursor:pointer;user-select:none;}
.agree-row input[type=checkbox]{width:15px;height:15px;flex-shrink:0;margin-top:1px;accent-color:var(--blue);cursor:pointer;}
.agree-row a{color:var(--blue);cursor:pointer;text-decoration:underline;}
.agree-row a:hover{color:#7ab0ff;}
.terms-card{
  border:1px solid rgba(213,168,68,.72)!important;
  border-radius:0!important;
  background:linear-gradient(145deg,rgba(9,38,57,.96),rgba(4,15,25,.98));
  box-shadow:inset 0 0 0 1px rgba(94,204,244,.14),0 12px 30px rgba(0,0,0,.48);
}
.terms-logo-back{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.terms-logo-back:hover:not(:disabled){transform:none;filter:none;background:transparent!important;}
.terms-card .terms-back-btn{
  border:1px solid rgba(213,168,68,.68)!important;
  border-radius:0!important;
  background:rgba(7,29,44,.72)!important;
  color:#d8e3e8!important;
  box-shadow:inset 0 1px 0 rgba(150,213,235,.1)!important;
}
.terms-card .terms-back-btn:hover:not(:disabled){background:rgba(13,52,72,.9)!important;color:#fff!important;}
.terms-card .auth-submit{
  border:1px solid #f0d47f!important;
  border-radius:0!important;
  background:linear-gradient(180deg,#e2c263,#9a6a22)!important;
  color:#171005!important;
  box-shadow:inset 0 1px 0 rgba(255,248,201,.42),0 3px 9px rgba(0,0,0,.32)!important;
}
.terms-card .auth-submit:hover:not(:disabled){background:linear-gradient(180deg,#efd477,#b47b29)!important;color:#120c04!important;}
.oauth-row{display:flex;gap:8px;flex-wrap:wrap;}
.oauth-btn{flex:1;min-width:100px;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:10px;border:1px solid var(--border);font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:filter 0.15s,transform 0.1s,opacity 0.15s;}
.oauth-btn:hover:not(:disabled){filter:brightness(1.08);}
.oauth-btn:active:not(:disabled){transform:scale(0.98);}
.oauth-btn:disabled{opacity:0.35;cursor:not-allowed;}
.oauth-btn.google{background:#fff;color:#3c4043;border-color:#dadce0;}
.oauth-btn.discord{background:#5865F2;color:#fff;border-color:#5865F2;}
.guest-hero{text-align:center;margin-bottom:1.25rem;}
.guest-hero-icon{font-size:38px;display:block;margin-bottom:0.5rem;}
.guest-hero-sub{font-size:12px;color:var(--text3);}
.guest-info-list{display:flex;flex-direction:column;gap:10px;margin-bottom:1rem;}
.guest-info-row{display:flex;gap:11px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.guest-info-row .gi-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
.guest-info-row b{display:block;font-size:12.5px;color:var(--text);margin-bottom:2px;}
.guest-info-row span{font-size:12px;color:var(--text2);line-height:1.45;}
.legal-modal{max-width:460px;padding:1.5rem;}
.legal-body{font-size:13px;color:var(--text2);line-height:1.7;padding:0.5rem 0 0.25rem;white-space:pre-line;max-height:60vh;overflow-y:auto;}

/* ═══ SETTINGS — account / guest info / linked accounts ═══ */
.set-account-box{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px;}
.set-cred-row{display:flex;align-items:center;gap:8px;margin:7px 0;}
.set-cred-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;width:110px;flex-shrink:0;}
.set-cred-value{flex:1;font-size:13px;color:var(--text);font-family:monospace;background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.set-cred-btn{padding:6px 11px;border-radius:7px;border:1px solid var(--border2);background:var(--bg4);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;flex-shrink:0;transition:all 0.15s;}
.set-cred-btn:hover{color:var(--text);border-color:var(--text3);}
.set-cred-note{font-size:12px;color:var(--text3);line-height:1.55;margin-top:9px;}
.set-account-btn{width:100%;padding:10px;border-radius:9px;border:none;background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;margin-top:6px;}
.set-account-btn:hover{opacity:0.9;}
.set-pw-input{width:100%;padding:8px 10px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-size:13px;font-family:'Inter',sans-serif;box-sizing:border-box;outline:none;}
.set-pw-input:focus{border-color:var(--blue,#4a7eff);}
.linked-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.linked-row:last-child{border-bottom:none;}
.linked-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.linked-ic.google{background:#fff;}
.linked-ic.discord{background:#5865F2;color:#fff;}
.linked-ic.email{background:var(--bg4);color:var(--text2);font-size:14px;}
.linked-name{flex:1;min-width:0;}
.linked-name b{display:block;font-size:13px;color:var(--text);}
.linked-name span{display:block;font-size:12px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.linked-chip{font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;flex-shrink:0;}
.linked-chip.on{background:rgba(80,200,120,0.15);color:var(--green);border:1px solid rgba(80,200,120,0.4);}
.linked-chip.off{background:var(--bg4);color:var(--text3);border:1px solid var(--border2);}
.linked-act-btn{padding:5px 12px;border-radius:7px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;flex-shrink:0;}
.linked-act-btn:hover:not(:disabled){color:var(--text);border-color:var(--text3);}
.linked-act-btn:disabled{opacity:0.4;cursor:not-allowed;}

/* ═══ PREMIUM SHOP ═══ */
.shop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:1rem;}
.shop-gems-pill{display:flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--border2);border-radius:24px;padding:7px 16px;font-size:14px;font-weight:700;color:var(--text);}
#panel-root-react .shop-gems-pill{border-radius:4px !important;}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.shop-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1.25rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color 0.15s,transform 0.12s;}
.shop-card:hover{border-color:var(--hover-border);transform:translateY(-2px);}
.shop-card-icon{font-size:34px;}
.shop-card-amount{font-size:17px;font-weight:700;color:var(--text);}
.shop-card-name{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;}
.shop-card-price{font-size:14px;color:var(--gold);font-weight:600;margin-top:2px;}
.shop-buy-btn{width:100%;margin-top:8px;padding:9px;border-radius:9px;border:none;background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;}
.food-pick-row .shop-buy-btn{width:auto;margin-top:0;margin-left:auto;padding:7px 16px;flex-shrink:0;white-space:nowrap;}
.shop-buy-btn:hover:not(:disabled){opacity:0.9;}
.shop-buy-btn:disabled{opacity:0.45;cursor:not-allowed;}
.shop-gem-buy-btn:disabled{background:#4d535e!important;border-color:#76828a!important;color:#c4cbd0!important;opacity:1;text-shadow:none!important;}

/* Premium Shop rows and troop-recruit panels used the legacy neutral card
   shell. Keep their content and rarity accents, but give them the sharper
   steel frame used by the rest of the shop. */
#shop-tab-content :is(.food-pick-row,.combat-hint,.troopu-rate-tier,.troopu-banner,.troopu-pity-box,.troopu-prob-mats){
  background:linear-gradient(145deg,#132a38,#07131e);
  border:2px solid #dcecf4;
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(7,19,30,.8),inset 0 1px 0 rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.3);
}
#shop-tab-content .food-pick-row:hover{border-color:#fff;}
#shop-tab-content .food-pick-row.unavailable:hover{border-color:#dcecf4;}
#shop-tab-content .troopu-rate-tier{border:1px solid var(--tier-color,#dcecf4);box-shadow:inset 0 0 0 1px rgba(7,19,30,.8),inset 0 1px 0 rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.3);}
#shop-tab-content .troopu-banner{border-color:var(--tier-color,#dcecf4);box-shadow:inset 0 0 0 1px rgba(7,19,30,.8),inset 0 1px 0 rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.3);}
#shop-tab-content .gacha-skill-row .food-pick-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--skill-rarity-color,#a7c4d1);
  border-radius:0;
  background:linear-gradient(145deg,#193342,#091722);
  box-shadow:inset 0 0 0 3px rgba(4,13,21,.9),inset 0 0 0 4px color-mix(in srgb,var(--skill-rarity-color,#a7c4d1) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.3),0 1px 4px rgba(0,0,0,.35);
}
#shop-tab-content .gacha-skill-row .food-pick-icon :is(.item-ico,.sys-ico){width:30px;height:30px;font-size:30px;display:block;object-position:center;margin:auto;vertical-align:0;}
#shop-tab-content .troopu-recruit-btn{
  background:linear-gradient(135deg,#239de4 0%,#0e5d9c 48%,#072f5d 100%) !important;
  border:1px solid #87ddff !important;
  border-radius:3px !important;
  color:#eefaff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(2,21,49,.7),0 0 8px rgba(47,167,237,.24);
}
#shop-tab-content .troopu-recruit-btn:hover:not(:disabled){filter:brightness(1.14);}

/* Armory troop Recruit and Equip use the Premium Shop recruit-control finish. */
#panel-root-react .troop-card-actions .troop-recruit{
  background:linear-gradient(135deg,#239de4 0%,#0e5d9c 48%,#072f5d 100%) !important;
  border:1px solid #87ddff !important;
  border-radius:3px !important;
  color:#eefaff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(2,21,49,.7),0 0 8px rgba(47,167,237,.24) !important;
}
#panel-root-react .troop-card-actions .troop-recruit:hover:not(:disabled){filter:brightness(1.14);}
#panel-root-react .troop-card-actions .troop-recruit.is-disabled{background:#4d5961!important;border-color:#76828a!important;color:#c4cbd0!important;box-shadow:none!important;}

/* Skill, food, and troop pickers are selection dialogs, not shop cards.
   Match their entry panels to the Settings navy-and-silver treatment. */
#modal-root .game-modal .food-pick-row,
#modal-root .game-modal .combat-hint{
  background:#132a38 !important;
  border:1px solid #8b96a5 !important;
  border-radius:0 !important;
  box-shadow:inset 0 0 0 1px rgba(3,14,23,.72),inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#modal-root .game-modal .food-pick-row:hover{border-color:#dcecf4 !important;}
#modal-root .game-modal .food-pick-row.unavailable:hover{border-color:#8b96a5 !important;}
#modal-root .game-modal.activity-preview-warning .combat-hint{
  border:0 !important;
  box-shadow:none !important;
  color:#fff !important;
  font-size:14px;
}
/* Empty picker messages need breathing room both inside their own outline and
   between that outline and the surrounding selection dialog. */
#modal-root .game-modal .food-pick-list > .combat-hint{
  margin:.4rem .75rem;
  padding:8px 12px;
}
.shop-hist{margin-top:1.5rem;}
.shop-hist-title{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;}
.shop-hist-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:9px;margin-bottom:6px;font-size:12px;color:var(--text2);}
.shop-hist-row .sh-item{flex:1;color:var(--text);font-weight:600;}
.shop-hist-status{font-size:12px;font-weight:700;padding:2px 8px;border-radius:12px;}
.shop-hist-status.completed{background:rgba(80,200,120,0.15);color:var(--green);}
.shop-hist-status.failed,.shop-hist-status.cancelled{background:rgba(230,80,80,0.12);color:var(--red);}
.shop-hist-status.pending,.shop-hist-status.processing{background:rgba(240,192,64,0.12);color:var(--gold);}
/* Refunded is money returned, not money lost — amber, distinct from the red
   failure states. It is the only non-'completed' status the history can show. */
.shop-hist-status.refunded{background:rgba(240,192,64,0.12);color:var(--gold);}
.shop-hist-pager{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:10px;flex-wrap:wrap;}
.shop-page-btn{min-width:26px;height:26px;padding:0 6px;font-size:12px;font-weight:600;background:var(--bg2);border:1px solid var(--border);border-radius:7px;color:var(--text2);cursor:pointer;}
.shop-page-btn:hover:not(:disabled){border-color:var(--hover-border);color:var(--text);}
.shop-page-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.shop-page-btn:disabled{opacity:.35;cursor:default;}
.pay-modal{max-width:400px;padding:1.75rem;}
.pay-item-box{display:flex;align-items:center;gap:13px;background:var(--bg3);border:1px solid var(--border);border-radius:11px;padding:13px 15px;margin:1rem 0;}
.pay-item-icon{font-size:28px;}
.pay-item-name{font-size:14.5px;font-weight:700;color:var(--text);}
.pay-item-price{font-size:13px;color:var(--gold);font-weight:600;}
.pay-status{text-align:center;padding:1.1rem 0 0.4rem;min-height:76px;}
.pay-spinner{width:30px;height:30px;border:3px solid var(--border2);border-top-color:var(--blue);border-radius:50%;margin:0 auto 10px;animation:payspin 0.8s linear infinite;}
@keyframes payspin{to{transform:rotate(360deg);}}
.pay-status-text{font-size:13px;color:var(--text2);}
.pay-result-icon{font-size:34px;display:block;margin-bottom:8px;}
.pay-result-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;}
.pay-result-sub{font-size:12px;color:var(--text2);}
.pay-actions{display:flex;gap:9px;margin-top:1.1rem;}
.pay-btn{flex:1;padding:10px;border-radius:9px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.pay-btn:hover:not(:disabled){color:var(--text);border-color:var(--text3);}
.pay-btn:disabled{opacity:0.4;cursor:not-allowed;}
.pay-btn.primary{background:linear-gradient(135deg,var(--blue2),var(--blue));border:none;color:#fff;font-weight:700;}
.pay-modal{position:relative;}
.node-modal-close,.pay-modal-x,.link-modal-close,.panel-close-btn{width:30px;height:30px;display:inline-grid;place-items:center;padding:0!important;border:1px solid #f07272!important;border-radius:7px!important;background:linear-gradient(180deg,#b83b45,#7d1e2a)!important;color:#fff!important;font-family:'Inter',sans-serif;font-size:19px!important;font-weight:700;line-height:1;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 7px rgba(72,8,17,.42)!important;}
.node-modal-close,.pay-modal-x,.link-modal-close{position:absolute;top:10px;right:10px;}
.node-modal-close:hover:not(:disabled),.pay-modal-x:hover:not(:disabled),.link-modal-close:hover:not(:disabled),.panel-close-btn:hover:not(:disabled){background:linear-gradient(180deg,#d9535c,#952734)!important;border-color:#ffb0b0!important;color:#fff!important;}
.pay-confirm-text{font-size:13.5px;color:var(--text);text-align:center;margin-top:1rem;}

/* ── Landing page ────────────────────────────────────────────────────────── */
.auth-wrap:has(#screen-landing.visible) .auth-logo{display:none;}
#auth-layer:has(#screen-landing.visible){
  background-image:linear-gradient(90deg,rgba(3,12,19,.82),rgba(4,13,22,.63) 52%,rgba(3,10,17,.78)),linear-gradient(rgba(1,8,15,.22),rgba(1,8,15,.22)),url('/assets/ui/landing-kingdom.png');
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
}
.auth-wrap:has(#screen-landing.visible){padding:1.25rem 1.5rem;}
#screen-landing{display:none;}
#screen-landing.visible{display:flex;gap:2.5rem;align-items:flex-start;}
.landing-left{flex:1;min-width:0;padding:1.5rem 1.75rem;background:linear-gradient(120deg,rgba(4,18,30,.84),rgba(4,18,30,.5));border-left:1px solid rgba(69,185,226,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.25);}
.landing-right{flex:0 0 340px;align-self:flex-start;margin-top:0;}
#auth-layer:has(#screen-landing.visible) .auth-lang{position:fixed;}
.landing-kicker{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:700;color:#83d9f5;letter-spacing:0.1em;margin-bottom:0.45rem;text-shadow:0 1px 3px #000;}
.landing-title{font-family:'Cinzel',serif;font-size:3rem;font-weight:700;color:#f4f5e7;line-height:1.1;margin:0 0 1rem;text-shadow:0 3px 8px rgba(0,0,0,.72);}
.landing-title span{color:var(--gold);}
.landing-desc{font-size:0.92rem;color:#d2e1e9;line-height:1.75;margin:0 0 1.5rem;max-width:560px;text-shadow:0 1px 2px rgba(0,0,0,.75);}
.landing-card,.tab-card{padding:1.75rem 1.75rem 1.5rem;background:linear-gradient(145deg,rgba(9,38,57,.94),rgba(4,15,25,.96));border:1px solid rgba(213,168,68,.78);border-radius:0;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);box-shadow:inset 0 0 0 1px rgba(94,204,244,.18),0 12px 30px rgba(0,0,0,.52);}
/* Tabbed auth card (Guest / Register / Login) */
.tab-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding:0;overflow:hidden;}
.auth-tabs{display:flex;gap:0.35rem;grid-column:1;grid-row:1;margin:0.75rem 0.75rem 0;border:1px solid rgba(159,128,237,.3);border-radius:11px;background:rgba(10,13,27,.76);padding:0.3rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.landing-right .auth-submit{border:1px solid #d8af52;border-radius:0;background:linear-gradient(180deg,#155574,#092c42);box-shadow:inset 0 1px 0 rgba(181,231,248,.3),0 2px 8px rgba(0,0,0,.35);font-family:'Cinzel',serif;font-weight:700;letter-spacing:.03em;}
.landing-right .auth-submit:hover:not(:disabled){background:linear-gradient(180deg,#1b6a8e,#0d3d58);border-color:#f1cf7a;}
.landing-right .auth-tab{flex:1;min-width:0;min-height:40px;padding:.35rem .25rem;background:transparent!important;border:1px solid transparent!important;border-radius:8px!important;color:#aeb4cb!important;font-size:.64rem;font-weight:700;letter-spacing:0.04em;line-height:1.1;text-transform:uppercase;white-space:normal;cursor:pointer;font-family:'Inter',sans-serif;box-shadow:none!important;transition:background .18s,color .18s,box-shadow .18s;}
.landing-right .auth-tab:hover{background:rgba(137,105,221,.16)!important;border-color:rgba(159,128,237,.28)!important;color:#eeeaff!important;}
.landing-right .auth-tab.active{background:linear-gradient(135deg,#7661c9,#a05dbc)!important;border-color:rgba(224,210,255,.42)!important;box-shadow:0 3px 10px rgba(34,20,71,.45),inset 0 1px 0 rgba(255,255,255,.2)!important;color:#fff!important;}
.landing-right .oauth-btn.google{background:#fff!important;border-color:#dadce0!important;border-radius:10px!important;box-shadow:none!important;color:#3c4043!important;}
.landing-right .oauth-btn.discord{background:#5865F2!important;border-color:#5865F2!important;border-radius:10px!important;box-shadow:none!important;color:#fff!important;}
.landing-right .oauth-btn.google:hover:not(:disabled){background:#fff!important;border-color:#dadce0!important;color:#3c4043!important;}
.landing-right .oauth-btn.discord:hover:not(:disabled){background:#5865F2!important;border-color:#5865F2!important;color:#fff!important;}
.tab-panel{grid-column:1;grid-row:2;padding:1.4rem 1.4rem 1.3rem;visibility:hidden;pointer-events:none;opacity:0;transition:opacity .15s ease;}
.tab-panel.active{visibility:visible;pointer-events:auto;opacity:1;}
@media (min-width:901px){
  #screen-landing.visible::after{content:'';flex:0 0 340px;}
  .landing-right{
    position:fixed;
    top:calc(3.25rem + 50px);
    right:max(1.5rem,calc(50% - 526px));
    width:340px;
    max-height:calc(100vh - 3.25rem - 70px);
    overflow-y:auto;
    z-index:2;
  }
  .landing-right .tab-panel{padding:1.05rem 1.25rem 1rem;}
  .landing-right .auth-title{margin-bottom:1rem;}
  .landing-right .auth-field{margin-bottom:.7rem;}
  .landing-right .auth-field input{padding:9px 12px;}
  .landing-right .auth-divider{margin:.7rem 0;}
  .landing-right .auth-switch{margin-top:.8rem;}
  .landing-right .oauth-btn{padding:8px;}
  .landing-right .guest-hero{margin-bottom:.85rem;}
  .landing-right .guest-info-list{gap:7px;margin-bottom:.8rem;}
  .landing-right .guest-info-row{padding:8px 10px;}
}
.rgc-sub{font-size:0.8rem;color:var(--text2);line-height:1.55;margin-bottom:0.9rem;}
.rgc-sub b{color:var(--gold);}
#register-guest-choice .welcome-btn{margin-bottom:0.6rem;}
.rgc-note{font-size:.75rem;color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:0.55rem 0.7rem;margin-bottom:1rem;line-height:1.5;}
.rgc-note a{color:var(--gold);cursor:pointer;text-decoration:underline;}
.landing-wb{text-align:center;margin-bottom:1.1rem;}
.landing-wb-title{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:700;color:var(--gold);margin-bottom:0.6rem;}
.landing-wb-icon{font-size:2.1rem;line-height:1;}
.landing-wb-name{font-size:1rem;font-weight:600;color:var(--text1);margin-top:0.35rem;}
.landing-wb-level{font-size:0.78rem;color:var(--text2);margin-top:2px;}
.landing-enter-btn{font-size:1rem;padding:14px;}
.landing-switch{text-align:center;margin-top:0.6rem;font-size:0.78rem;}
.landing-switch a{color:var(--text2);cursor:pointer;text-decoration:underline;}
.landing-switch a:hover{color:var(--text1);}
.landing-info{display:flex;flex-direction:column;gap:0.6rem;margin-top:1.4rem;}
.landing-feature{display:flex;gap:0.75rem;align-items:flex-start;background:linear-gradient(90deg,rgba(7,35,52,.82),rgba(8,20,31,.72));border:1px solid rgba(104,177,207,.46);border-radius:0;padding:0.7rem 0.85rem;box-shadow:inset 2px 0 0 rgba(225,178,72,.75);}
.landing-feature .lf-icon{font-size:1.25rem;line-height:1.2;flex-shrink:0;}
.landing-feature b{display:block;font-size:0.8rem;color:var(--text1);}
.landing-feature span:not(.lf-icon){font-size:.75rem;color:var(--text2);line-height:1.5;}
.landing-faq{margin-top:1.4rem;}
.landing-faq-title{font-family:'Cinzel',serif;font-size:0.85rem;font-weight:700;color:var(--text1);margin-bottom:0.5rem;}
.landing-faq-item{border:1px solid rgba(104,177,207,.4);border-radius:0;margin-bottom:0.45rem;background:rgba(4,20,32,.78);}
.landing-faq-item summary{padding:0.6rem 0.8rem;font-size:0.78rem;font-weight:600;color:var(--text1);cursor:pointer;list-style:none;position:relative;}
.landing-faq-item summary::after{content:'+';position:absolute;right:0.8rem;color:var(--text2);}
.landing-faq-item[open] summary::after{content:'−';}
.landing-faq-item p{padding:0 0.8rem 0.7rem;font-size:.75rem;color:var(--text2);line-height:1.55;margin:0;}
@media (max-width:900px){.auth-wrap:has(#screen-landing.visible){min-width:0;padding:1rem;}.landing-left{padding:1.2rem;}.landing-right{position:static;order:-1;margin-top:0;}.auth-wrap:has(#screen-landing.visible) #screen-landing.visible{flex-direction:column;}.landing-right{width:100%;flex-basis:auto;}}

/* ── Welcome screen ──────────────────────────────────────────────────────── */
.welcome-btn{display:flex;align-items:center;gap:1rem;width:100%;padding:1rem 1.1rem;background:var(--bg2);border:1px solid var(--border);border-radius:10px;cursor:pointer;text-align:left;transition:background 0.15s,border-color 0.15s;color:var(--text1);font-family:'Inter',sans-serif;}
.welcome-btn:hover{background:var(--bg3);border-color:var(--gold);}
.welcome-btn-icon{font-size:1.6rem;line-height:1;flex-shrink:0;}
.welcome-btn-title{font-size:0.95rem;font-weight:600;color:var(--text1);}
.welcome-btn-sub{font-size:.75rem;color:var(--text2);margin-top:2px;}
@media (max-width:600px){.oauth-row{flex-direction:column;}.shop-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}}

/* ── Skills gacha roll animation ─────────────────────────────────────────── */
.gacha-roll-btns{display:flex;gap:0.5rem;margin-top:0.75rem;justify-content:flex-start;}
.gacha-roll-btns .modal-btn{flex:0 0 auto;padding:5px 12px;font-size:12px;}
.gacha-spin-box{display:flex;align-items:center;justify-content:center;height:110px;margin:1rem auto;width:110px;
  background:var(--bg2);border:2px solid var(--border);border-radius:14px;font-size:3.2rem;
  animation:gachaShake 0.35s ease-in-out infinite;}
@keyframes gachaShake{0%,100%{transform:rotate(-2deg) scale(1);}50%{transform:rotate(2deg) scale(1.06);}}
.gacha-reveal{text-align:center;padding:1rem 0;animation:gachaPop 0.45s cubic-bezier(0.2,1.6,0.4,1);}
.gacha-reveal-icon{font-size:3rem;line-height:1.2;
  filter:drop-shadow(0 0 14px var(--rar-color));animation:gachaGlow 1.4s ease-in-out infinite;}
@keyframes gachaPop{0%{transform:scale(0.3);opacity:0;}100%{transform:scale(1);opacity:1;}}
@keyframes gachaGlow{0%,100%{filter:drop-shadow(0 0 6px var(--rar-color));}50%{filter:drop-shadow(0 0 18px var(--rar-color));}}
.gacha-card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0.8rem 0;}
.gacha-card{background:var(--bg2);border:1px solid var(--rar-color);border-radius:10px;padding:0.5rem 0.25rem;
  text-align:center;opacity:0;animation:gachaCardIn 0.4s cubic-bezier(0.2,1.4,0.4,1) forwards;}
.gacha-card.legendary{box-shadow:0 0 12px var(--rar-color);}
.gacha-card-icon{font-size:1.6rem;line-height:1.3;}
.gacha-card-name{font-size:.75rem;font-weight:600;line-height:1.2;}
.gacha-card-rar{font-size:.75rem;}
@keyframes gachaCardIn{0%{transform:rotateY(90deg) scale(0.6);opacity:0;}100%{transform:rotateY(0) scale(1);opacity:1;}}
@media (max-width:600px){.gacha-card-grid{grid-template-columns:repeat(3,1fr);}}

/* ── Armory Skills / Consumables list ── */
.armory-skill-list{display:flex;flex-direction:column;gap:6px;margin-top:0.75rem;max-height:calc(100vh - 220px);overflow-y:auto;}
.armory-skill-row{cursor:pointer;transition:background .12s;}
.armory-skill-row:hover{background:var(--bg3);}
.armory-skill-row.unowned{opacity:0.45;cursor:default;}
.armory-skill-row{position:relative;}
.skill-info-btn{
  position:absolute;top:6px;right:6px;
  background:var(--bg3);border:1px solid var(--border2);border-radius:6px;
  color:var(--text2);font-size:13px;font-weight:600;padding:4px 12px;
  cursor:pointer;transition:background .12s,color .12s;z-index:1;
}
.skill-info-btn:hover{background:#4f8cff;color:#fff;}
.skill-info-modal{max-width:420px;}
.skill-info-progress-wrap{
  position:relative;height:20px;border-radius:6px;background:var(--bg3);
  overflow:hidden;margin-bottom:8px;
}
.skill-info-progress-bar{
  height:100%;background:#4f8cff;border-radius:6px;transition:width .3s;
}
.skill-info-progress-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.skill-info-levels{display:flex;flex-direction:column;gap:4px;}
.skill-info-lv-row{
  display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;
  background:var(--bg1);border:1px solid transparent;opacity:0.45;
}
.skill-info-lv-row.unlocked{opacity:1;background:var(--bg3);border-color:var(--border2);}
.skill-info-lv-badge{
  flex-shrink:0;font-size:12px;font-weight:700;color:#4f8cff;
  background:rgba(79,140,255,0.12);padding:2px 8px;border-radius:5px;
  white-space:nowrap;
}
.skill-info-lv-desc{font-size:12px;color:var(--text1);line-height:1.4;}

/* ── Mounts ─────────────────────────────────────────────────────────────── */

.mount-doll-slot-dur{
  position:absolute;bottom:4px;left:4px;right:4px;height:4px;border-radius:2px;
  background:rgba(255,255,255,0.08);overflow:hidden;
}
.mount-doll-slot-dur-fill{height:100%;background:var(--green2);transition:width .2s;}
.mount-doll-slot-dur-fill.low{background:#e74c3c;}
.equipment-doll-dur{position:absolute;bottom:3px;left:4px;right:4px;font-size:10px;line-height:1;color:var(--text2);text-align:center;}
.equipment-doll-count{display:none;position:absolute;top:4px;left:4px;font-size:12px;font-weight:700;line-height:1;color:var(--text2);}
.doll-slot:hover .equipment-doll-count{display:block;}
.mount-repair-row{
  width:100%;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);
}
.mount-repair-slider{flex:1;accent-color:var(--accent);cursor:pointer;}

.mount-dur-bar{
  width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,0.08);overflow:hidden;
}
.mount-dur-fill{height:100%;border-radius:3px;background:var(--green2);transition:width .2s;}
.mount-dur-fill.low{background:#e74c3c;}
.mount-dur-txt{font-size:12px;color:var(--text3);}
.mount-btn{width:100%;padding:6px;font-size:12px;}
.mount-upgrade{width:100%;display:flex;flex-direction:column;gap:4px;margin-top:2px;}
.mount-upgrade-title{font-size:12px;font-weight:700;color:var(--text2);}
.mount-equipped-badge{
  position:absolute;top:3px;left:4px;font-size:12px;font-weight:700;
  color:#fff;background:var(--gold2);border-radius:3px;
  width:14px;height:14px;display:flex;align-items:center;justify-content:center;
  z-index:2;pointer-events:none;
}

/* ── Debug bar ── */
#debug-bar{position:fixed;top:0;left:0;right:0;z-index:9999;background:#1a1a2e;border-bottom:2px solid #f59e0b;padding:6px 10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
#debug-bar button{padding:4px 10px;border-radius:6px;border:1px solid #f59e0b;background:#2d2d44;color:#f59e0b;font-size:12px;font-weight:600;cursor:pointer;}
#debug-bar button:hover{background:#f59e0b;color:#1a1a2e;}

/* ── Daily Quests panel ── */
.quest-reset-line{font-size:12px;color:var(--text2);margin:0.75rem 0 0.25rem;}
.quest-reset-line b{color:var(--gold);}
.quest-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1rem;}
@media (max-width:900px){.quest-grid{grid-template-columns:1fr;}}
.quest-card{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:0.9rem 1rem;}
.quest-card.daily-quest-card{border-color:#8b96a5;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(202,211,220,.08);}
.quest-card.daily-quest-card .quest-icon{border-color:#8b96a5;border-radius:4px;}
.quest-daily-explainer{margin:10px 0;padding:10px 12px;color:#fff;font-size:13px;line-height:1.45;
  background:rgba(19,42,56,.72);border:1px solid #8b96a5;border-radius:4px;
  box-shadow:inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(8px);}
.quest-card.done{border-color:var(--green2);}
.quest-card.claimed{opacity:0.55;}
.quest-icon{font-size:1.9rem;flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--border2);border-radius:12px;}
/* Kill quests show the same monster PNG the combat zone cards use. Those
   renders are full-body art, not a glyph, so they fill the tile rather than
   sitting at 1em like .sys-ico. */
.quest-monster-img{width:100%;height:100%;object-fit:contain;padding:2px;}
.quest-body{flex:1;min-width:0;}
.quest-title{font-size:13px;font-weight:600;}
.quest-sub{font-size:12px;color:var(--text2);margin-top:2px;}
.quest-progress{margin-top:8px;}
.quest-count{font-size:12px;color:var(--text3);margin-top:3px;}
.quest-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.quest-loot-col{display:flex;flex-direction:column;gap:4px;align-items:flex-end;}
.quest-loot{display:flex;align-items:center;gap:4px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:2px 7px;}
.quest-loot-icon{font-size:13px;}
.quest-loot-qty{font-size:12px;font-weight:600;color:var(--gold);}
.quest-btn{padding:8px 14px;border-radius:9px;border:none;background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;min-width:90px;text-align:center;}
.quest-btn:hover{opacity:0.9;}
.quest-btn.claim{background:linear-gradient(135deg,var(--green2),var(--green));animation:questClaimPulse 1.2s ease-in-out infinite;}
.quest-btn.claimed{background:var(--bg3);color:var(--text3);cursor:default;animation:none;}
@keyframes questClaimPulse{0%,100%{box-shadow:0 0 0 rgba(62,207,142,0);}50%{box-shadow:0 0 10px rgba(62,207,142,0.55);}}
.quest-highlight{border-color:#3ecf8e !important;box-shadow:0 0 0 2px rgba(62,207,142,0.35),0 0 14px rgba(62,207,142,0.25) !important;}

/* ── Troop saved-health bars (pickers + armory troop cards) ── */
.troop-hp-wrap{margin-top:5px;}
.troop-hp-bar{background:var(--bg4);border-radius:999px;height:6px;overflow:hidden;}
.troop-hp-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green2),var(--green));}
.troop-hp-txt{font-size:12px;color:var(--text3);margin-top:2px;text-align:right;}
.troop-card .troop-hp-wrap{width:100%;}
.food-pick-info .troop-hp-wrap{margin-top:4px;}
.food-pick-info{flex:1;min-width:0;}
.troop-pick-stats{display:flex;justify-content:space-between;gap:8px;}

/* ═══════════════════════════════════════════════════════════════
   GATHERING MAP (GatherMapPanel.jsx / WorkerStatusWidget.jsx)
   ═══════════════════════════════════════════════════════════════ */
.gm-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.95fr);
  grid-template-areas:"map node" "legend activity";gap:12px;align-items:stretch;}
@media (max-width:900px){
  .gm-layout{grid-template-columns:1fr;grid-template-areas:"map" "node" "activity" "legend";}
}
.gm-map-wrap{grid-area:map;border:1px solid #8d7537;border-radius:3px;overflow:hidden;
  height:clamp(360px,calc(100dvh - 450px),460px);box-shadow:inset 0 0 0 1px rgba(236,205,116,.06);}

.gm-header-xp{max-width:340px;margin-top:5px;}

.gm-side{display:contents;}
.gm-card{background:linear-gradient(180deg,#111d2a,#0a151f);border:1px solid #8d7537;border-radius:3px;padding:12px 14px;
  box-shadow:inset 0 0 0 1px rgba(236,205,116,.05);}
.gm-card-node{grid-area:node;align-self:stretch;}
.gm-card-current{grid-area:activity;align-self:stretch;}
.gm-card-idle{min-height:92px;}
.gm-legend{grid-area:legend;display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));column-gap:14px;row-gap:6px;align-content:start;}
.gm-legend .gm-card-title{grid-column:1/-1;}
.gm-card-active{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 18px rgba(62,207,142,0.12);}
.gm-card-title{font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:7px;}
.gm-card-text{font-size:.76rem;color:var(--text2);line-height:1.5;}
.gm-node-overview{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(190px,1.2fr);gap:12px;align-items:stretch;margin-top:8px;}
.gm-node-art-wrap{display:flex;align-items:center;justify-content:center;min-height:190px;border:1px solid #354553;border-radius:3px;
  background:radial-gradient(circle at 50% 42%,rgba(69,112,126,.2),transparent 68%),#0a151f;overflow:hidden;}
.gm-node-hero-art{display:flex;align-items:center;justify-content:center;width:min(78%,210px)!important;height:min(78%,210px)!important;object-fit:contain;}
.gm-node-hero-art>.item-ico{display:block;width:96%;height:96%;object-fit:contain;image-rendering:auto;
  filter:drop-shadow(0 0 1px #050b10) drop-shadow(0 0 2px #050b10) drop-shadow(0 8px 12px rgba(0,0,0,.48));}
.gm-node-stats{display:flex;flex-direction:column;justify-content:center;border:1px solid #354553;border-radius:3px;background:#0b1722;padding:6px 10px;}
.gm-node-stats .gm-stat-row{min-height:36px;border-bottom:1px solid rgba(76,92,105,.55);}
.gm-node-stats .gm-stat-row:last-child{border-bottom:0;}
.gm-node-stats .gm-stat-row>span{display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.04em;}
.gm-node-stats .gm-stat-row .sys-ico{width:23px;height:23px;flex:0 0 23px;}
.gm-card-active .gm-card-text{display:flex;align-items:center;}
.gm-activity-art{display:inline-flex;align-items:center;justify-content:center;width:32px!important;height:32px!important;flex:0 0 32px;
  object-fit:contain;vertical-align:middle;margin-right:8px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.34));}
.gm-activity-art>.item-ico{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto;
  filter:drop-shadow(0 0 1px #050b10) drop-shadow(0 0 1px #050b10);}
.gm-next{margin-top:6px;color:var(--gold);}
.gm-depleted{margin-top:8px;color:var(--red);}
.gm-stat-row{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;
  color:var(--text2);padding:3px 0;}
.gm-stat-row b{color:var(--text);}
.gm-cart-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;
  color:var(--text2);margin:8px 0 4px;}
.gm-cart-row b{color:var(--gold);}
.gm-progress{height:7px;background:var(--bg3);border-radius:999px;overflow:hidden;margin:2px 0 0;}
.gm-progress-bar{height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--green2),var(--green));}
.gm-btn{width:100%;margin-top:9px;padding:8px 10px;border-radius:9px;border:1px solid var(--border2);
  background:var(--bg3);color:var(--text);font-size:.8rem;font-weight:600;cursor:pointer;}
.gm-btn:hover{border-color:var(--hover-border);}
.gm-btn:disabled{opacity:.5;cursor:not-allowed;}
.gm-btn-go{padding:10px 12px;background:var(--green3);border-color:var(--green2);color:var(--green);font-size:.85rem;border-radius:4px;}
.gm-btn-warn{background:#2a1f14;border-color:#7a5a20;color:var(--orange);}
.gm-legend-row{display:flex;align-items:center;gap:7px;width:100%;min-width:0;font-size:.75rem;color:var(--text2);
  padding:7px 8px;border:1px solid #3b4652;border-radius:3px;background:#0b1722;text-align:left;cursor:pointer;}
.gm-legend-row:hover:not(:disabled){border-color:#b79848;background:#111f2d;color:var(--text);}
.gm-legend-row.selected{border-color:#d1ad4f;background:linear-gradient(180deg,#1a2937,#10202d);box-shadow:inset 0 0 0 1px rgba(255,220,125,.1);}
.gm-legend-row:disabled{cursor:not-allowed;}
.gm-legend-row b{margin-left:auto;color:var(--text3);font-weight:600;}
.gm-legend-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.gm-material-copy{display:flex;align-items:center;gap:8px;min-width:0;}
.gm-material-copy>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gm-material-art{width:48px!important;height:48px!important;flex:0 0 48px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.4));}
.gm-material-art>.item-ico{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto;
  filter:drop-shadow(0 0 1px #050b10) drop-shadow(0 0 1px #050b10);}

@media (max-width:1200px){
  .gm-legend{grid-template-columns:repeat(2,minmax(120px,1fr));}
}
@media (max-width:900px){
  .gm-map-wrap{height:360px;}
  .gm-legend{grid-template-columns:repeat(2,minmax(120px,1fr));}
  .gm-node-overview{grid-template-columns:minmax(100px,.7fr) minmax(180px,1.3fr);}
}
@media (max-width:560px){
  .gm-node-overview{grid-template-columns:1fr;}
  .gm-node-art-wrap{min-height:150px;}
}

/* Top-bar worker chip */
.gm-topbar-chip{display:flex;align-items:center;gap:7px;background:var(--bg4);
  border:1px solid var(--border2);border-radius:9px;padding:5px 11px;font-size:.78rem;
  color:var(--text2);cursor:pointer;flex-shrink:0;}
.gm-topbar-chip:hover{border-color:var(--hover-border);}
.gm-topbar-label{font-weight:600;color:var(--text);}
.gm-topbar-detail{color:var(--gold);font-weight:600;}

/* 3D gathering world additions */
.gm-map-wrap{position:relative;}
.gm-map-wrap canvas{display:block;border-radius:1px;}
.gm-map-hint{font-size:.75rem;color:var(--text3);white-space:nowrap;align-self:flex-start;margin-top:6px;}
/* Top-right header stack: daily-reset countdown over the pan/zoom hint */
.gm-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:0;}
.gm-header-right .gm-map-hint{align-self:flex-end;}
.gm-reset-timer{font-size:.78rem;color:var(--text2);white-space:nowrap;}
.gm-reset-timer b{color:var(--gold);font-variant-numeric:tabular-nums;margin-left:2px;}

/* Wide top-bar worker panel with inline action progress */
.gm-topbar-wide{padding:7px 14px;min-width:250px;align-items:center;}
.gm-topbar-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.gm-topbar-row{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.gm-topbar-cart{margin-left:auto;color:var(--text2);font-weight:600;}
.gm-topbar-timer{color:var(--text2);font-weight:600;font-variant-numeric:tabular-nums;}
.gm-timer{font-variant-numeric:tabular-nums;}
.gm-topbar-progress{height:5px;background:var(--bg2);border-radius:999px;overflow:hidden;}
.gm-topbar-progress-bar{height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--green2),var(--green));}
.gm-topbar-idle{cursor:default;opacity:.6;}
.gm-topbar-idle:hover{border-color:var(--border2);}
.top-bar{padding-top:6px;padding-bottom:6px;}

/* ── 3D player avatar (PlayerAvatar3D) ─────────────────────────────── */
.btl-avatar.char canvas{width:100%;height:100%;display:block;}
.doll-silhouette{aspect-ratio:200/244;}
.doll-silhouette canvas{width:100%;height:100%;display:block;}

/* ── Black Market (BlackmarketPanel) ───────────────────────────────── */
.bm-coin{margin-left:auto;}
.bm-crystal-bar{display:flex;align-items:center;gap:12px;margin:0.75rem 0 0.25rem;
  background:var(--bg1);border:1px solid var(--border);border-radius:8px;padding:8px 12px;}
.bm-crystal-count{font-size:.85rem;color:var(--text2);}
.bm-crystal-count b{color:var(--green);}
.bm-needs{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px;}
.bm-need{font-size:.75rem;color:var(--text3);background:var(--bg2);border:1px solid var(--border);
  border-radius:5px;padding:2px 6px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.bm-need.ok{color:var(--green);border-color:var(--green);}
.bm-order-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:0.75rem;}
.bm-order{border:18px solid transparent;
  border-image:var(--prestige-frame) 92 / 18px stretch;
  border-radius:0;padding:12px;background-color:var(--prestige-panel);
  background-image:linear-gradient(180deg,rgba(11,51,72,.94),rgba(3,15,26,.98));
  box-shadow:inset 0 0 20px rgba(25,142,193,.10),0 8px 24px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:8px;}
.bm-order.filled{opacity:.6;}
.bm-order-head{display:flex;align-items:center;gap:10px;}
.bm-order-icon{font-size:1.6rem;}
.bm-order-name{font-size:.9rem;font-weight:600;color:var(--text1);}
.bm-order-price{font-size:.8rem;color:var(--gold);font-weight:600;}
.bm-order-price span{color:var(--text3);font-weight:400;}
.bm-order-rows{display:flex;flex-direction:column;gap:2px;}
.bm-order-row{display:flex;justify-content:space-between;font-size:.78rem;color:#fff;}
.bm-order-row b{color:var(--text1);font-variant-numeric:tabular-nums;}
.bm-order-filled{font-size:.82rem;color:var(--green);font-weight:600;text-align:center;padding:6px 0;}
.bm-order-sellrow{display:flex;gap:6px;align-items:center;}
.bm-order-sellrow .mkt-num-input{width:70px;}
.bm-sell-btn{flex:1;white-space:nowrap;padding:7px 10px;font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.bm-max-btn{padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);
  color:var(--text2);cursor:pointer;font-size:.78rem;}
.bm-max-btn:disabled{opacity:.4;cursor:default;}

/* ══ ITEM HOVER HALO ══
   ITEMS ONLY — every element type that carries a rarity-* class. Their
   border IS the rarity indicator, and repainting it on hover destroyed that
   information: .inv-slot.filled:hover (0,3,0) beat .rarity-legendary (0,1,0),
   so every legendary went grey under the cursor. These get a whitish hue
   around the border instead, leaving the rarity colour readable.
   Buttons, tabs, cards and rows have no rarity to preserve, so they keep
   their original border-colour hover.
   outline, not box-shadow, so the blue .selected ring, the green .active /
   .gm-card-active rings and .quest-highlight all keep their own shadow. */
.inv-slot.filled:hover,
.doll-slot:hover:not(.future):not(.empty),
.btl-food-slot.filled:hover,
.mkt-cell:hover{
  outline:3px solid rgba(255,255,255,0.13);
  outline-offset:0;
}

/* ── Account-level panel locks ─────────────────────────────────────────── */
.prof-item.panel-locked{opacity:.45;}
.prof-item.panel-locked:hover{opacity:.6;}
.panel-lock{margin-left:auto;font-size:13px;flex:none;}

/* ── Tutorial overlay ──────────────────────────────────────────────────────
   Layout: a "Tutorial" dialog floats over the dimmed game (centered, or
   docked next to the target on action steps) and the element to click gets
   a strong orange glow — everything else is masked and unclickable. */
.tut-mask{position:fixed;background:rgba(4,6,14,0.55);z-index:8990;pointer-events:auto;}
.tut-mask-full{inset:0;}
/* Transparent click-blocker over a highlighted-but-not-clickable panel —
   the area stays bright (no shade) while staying non-interactive. */
.tut-mask-clear{background:transparent;}
.tut-glow{position:fixed;z-index:8991;pointer-events:none;border:3px solid #ffb84d;border-radius:12px;
  box-shadow:0 0 0 3px rgba(255,167,38,0.35),0 0 26px 6px rgba(255,167,38,0.55),inset 0 0 18px rgba(255,167,38,0.25);
  animation:tutGlow 1.4s ease-in-out infinite;}
@keyframes tutGlow{
  0%,100%{box-shadow:0 0 0 3px rgba(255,167,38,0.35),0 0 26px 6px rgba(255,167,38,0.55),inset 0 0 18px rgba(255,167,38,0.25);}
  50%{box-shadow:0 0 0 6px rgba(255,167,38,0.2),0 0 38px 10px rgba(255,167,38,0.7),inset 0 0 24px rgba(255,167,38,0.35);}}
.tut-dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8995;width:360px;max-width:calc(100vw - 24px);
  background:var(--bg2);border:1px solid var(--border2);border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,184,77,0.25),0 12px 48px rgba(0,0,0,0.65);}
.tut-dialog-head{display:flex;align-items:center;justify-content:center;
  padding:12px 18px 10px;border-bottom:1px solid var(--border);}
.tut-dialog-title{font-size:15px;font-weight:800;color:var(--text);}
/* Centered via auto margins, NOT transform — the global button:hover
   scale(1.05) would replace a transform and shove the button sideways. */
/* Sits on top of the dark tutorial mask, so it needs a border and a label
   that read at a glance: red border at rest (not only on hover) and full-
   strength text rather than the dimmer --text2. */
.tut-end-bottom{position:fixed;left:0;right:0;bottom:16px;margin-inline:auto;width:fit-content;z-index:8996;
  background:linear-gradient(180deg,#8a262c,#481118)!important;border:1px solid #8f3036!important;
  border-radius:4px;color:#fff;font-size:12.5px;font-weight:700;padding:8px 20px;cursor:pointer;
  box-shadow:inset 0 1px rgba(255,210,198,.16),0 4px 20px rgba(0,0,0,0.5);}
.tut-end-bottom:hover{color:#fff;border-color:#b4474f!important;
  background:linear-gradient(180deg,#ad333b,#5f161f)!important;}
body:has(.tut-end-bottom) .toast{bottom:68px;}
/* Wait steps park the dialog bottom-left so the action (worker walking,
   bars smelting) stays visible mid-screen. */
.tut-dialog-side{left:16px;right:auto;top:auto;bottom:16px;transform:none;}
.tut-dialog-body{padding:14px 18px;font-size:13.5px;color:var(--text);line-height:1.6;}
.tut-dialog-body b{color:#ffb84d;}
.tut-dialog-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 18px 14px;}
.tut-btn-primary{background:#f59e0b;border:1px solid #f59e0b;border-radius:8px;color:#1a1204;font-size:13px;
  font-weight:800;padding:8px 22px;cursor:pointer;transition:filter .15s;}
.tut-btn-primary:hover{filter:brightness(1.12);}
.tut-btn-ghost{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text2);
  font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;}
.tut-btn-ghost:hover{border-color:var(--border2);color:var(--text);}

/* ── Flair: chat icons, name colours, avatar borders ───────────────────────── */
.flair-preview{display:flex;align-items:center;justify-content:center;height:52px;}
/* Borders are the one flair you judge by its shape, so their row is taller */
.flair-preview.border{height:94px;}
.pstore-card.flair-on{border-color:var(--gold);}
.chat-icon{font-size:1.15em;vertical-align:-1px;}

/* ':' autocomplete popup above the chat input */
.chat-icon-pick{position:absolute;left:8px;right:8px;bottom:100%;margin:0 0 4px;z-index:5;
  background:var(--bg3);border:1px solid var(--border2);border-radius:9px;
  box-shadow:0 -6px 18px rgba(0,0,0,0.45);
  overflow:hidden;max-height:196px;overflow-y:auto;}
.chat-icon-pick-row{display:flex;align-items:center;gap:8px;padding:5px 9px;cursor:pointer;font-size:12px;}
.chat-icon-pick-row:hover,.chat-icon-pick-row.sel{background:var(--bg2);}
.chat-icon-pick-icon{font-size:16px;}
.chat-icon-pick-token{color:var(--gold);font-weight:700;}
.chat-icon-pick-name{color:var(--text3);margin-left:auto;}

/* Player profile card */
.profile-modal{width:min(540px,calc(100vw - 2rem));max-width:none;height:min(650px,calc(100vh - 2rem));
  box-sizing:border-box;text-align:center;padding:22px 24px;display:flex;flex-direction:column;}
.profile-loading{padding:30px 10px;color:var(--text3);}
.profile-avatar-wrap{width:120px;height:120px;margin:0 auto 12px;border-radius:50%;
  border:3px solid var(--border2);background:var(--bg3);display:flex;align-items:center;
  justify-content:center;overflow:hidden;}
.profile-avatar-wrap > *{width:100%;height:100%;}
/* Ornamented frame: the SVG paints its own ring, so the wrap drops its border
   and lets the horns/spikes overhang. The avatar is clipped to the clear disc
   inside the ring (radius 41 of the 120 viewBox ≈ 68%). */
.profile-avatar-wrap.art{border:0;background:none;overflow:visible;position:relative;}
/* Three layers, back to front: the dark disc, the frame (so ornaments that
   cross the middle — a sword, a crown's base — read against that disc), then
   the character on top of everything. */
.profile-avatar-wrap.art > .profile-avatar-backdrop{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:68%;height:68%;border-radius:50%;
  background:var(--bg3);z-index:0;}
.profile-avatar-wrap.art > .profile-avatar-frame{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:100%;height:100%;pointer-events:none;z-index:1;}
.profile-avatar-wrap.art > .profile-avatar-disc{width:68%;height:68%;border-radius:50%;
  overflow:hidden;background:none;flex:none;position:relative;z-index:2;}
.profile-name{font-size:19px;font-weight:800;color:var(--text);}
.profile-sub{font-size:12.5px;color:var(--text3);margin-top:2px;}
.profile-medals-title{font-size:12px;font-weight:700;color:var(--gold);text-align:left;margin-bottom:8px;}
/* Own panel: medals accumulate season after season, so the list scrolls
   inside a fixed box instead of stretching the card. */
.profile-medals{display:flex;gap:10px;flex-wrap:wrap;align-content:flex-start;
  max-height:172px;overflow-y:auto;background:var(--bg2);border:1px solid var(--border);
  border-radius:10px;padding:9px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent;}
.profile-medals::-webkit-scrollbar{width:4px;}
.profile-medals::-webkit-scrollbar-track{background:transparent;}
.profile-medals::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px;}
.profile-medal{display:flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--border);
  border-radius:9px;padding:7px 11px;}
.profile-medal-count{font-size:13px;font-weight:800;color:var(--gold);}
.profile-medal-icon{font-size:22px;}
.profile-medal-text{font-size:12px;font-weight:600;color:var(--text);text-align:left;white-space:nowrap;}
.profile-no-medals{font-size:12px;color:var(--text3);text-align:left;line-height:1.5;}
/* Overview / Skills tabs, top-left of the card */
.profile-tabbar{display:flex;gap:6px;margin:0 0 14px;border-bottom:1px solid var(--border);}
.profile-tab-content{flex:1;min-height:0;overflow-y:auto;margin-right:-14px;padding-right:14px;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.15) transparent;}
.profile-tab-content::-webkit-scrollbar{width:4px;}
.profile-tab-content::-webkit-scrollbar-track{background:transparent;}
.profile-tab-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px;}
.profile-tab{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  color:var(--text3);font-size:12.5px;font-weight:700;padding:6px 10px;cursor:pointer;
  transition:color .12s,border-color .12s;}
.profile-tab:hover{color:var(--text2);}
.profile-tab.active{color:var(--gold);border-bottom-color:var(--gold);}
/* Skills tab — professions, weapon mastery and gear mastery levels */
.profile-skills{text-align:left;}
.profile-skill-group + .profile-skill-group{margin-top:16px;}
.profile-skill-title{font-size:12px;font-weight:700;color:var(--gold);margin-bottom:8px;}
.profile-skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.profile-skill-cell{display:flex;align-items:center;gap:7px;background:var(--bg3);
  border:1px solid var(--border);border-radius:8px;padding:6px 9px;font-size:12px;}
.profile-skill-icon{font-size:14px;}
.profile-skill-name{color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-skill-lvl{margin-left:auto;font-weight:800;color:var(--text);}
.profile-gear-type + .profile-gear-type{margin-top:10px;}
.profile-gear-type-name{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:6px;}

/* First-session-only Replay Tutorial button in the top bar */
.tut-replay-btn{background:var(--bg3);border:1px solid var(--gold);border-radius:8px;color:var(--gold);
  font-size:12px;font-weight:700;padding:5px 12px;cursor:pointer;white-space:nowrap;transition:filter .15s;}
.tut-replay-btn:hover{filter:brightness(1.15);}

/* Gathering-map loading veil — shown while the 3D world streams its models */
.gm-map-loading{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(rgba(3,12,19,.64),rgba(3,12,19,.78)),url('/assets/ui/panel-bg-professions.png') center / cover;
  border-radius:inherit;}
.gm-map-loading-icon{font-size:40px;opacity:.85;}
.gm-map-loading-text{font-size:14px;color:var(--text3);}
.gm-map-loading-bar{width:190px;height:5px;background:var(--bg3);border-radius:999px;overflow:hidden;}
.gm-map-loading-fill{height:100%;background:linear-gradient(90deg,var(--green2),var(--green));
  border-radius:999px;transition:width .2s;}

/* ── Active buff chips in the top bar (BuffBarWidget.jsx) ──────────────────
   Sits to the right of the activity chip; #mount-worker-status is
   display:contents so both are children of the same top-bar flex row.
   Hovering opens the full list with each buff counting down. */
.buffbar{position:relative;display:flex;align-items:center;gap:6px;}
.buffbar-chip{display:flex;align-items:center;gap:5px;background:var(--bg4);
  border:1px solid var(--border);border-radius:8px;padding:4px 8px;
  font-size:.78rem;font-weight:700;color:var(--gold);white-space:nowrap;}
.buffbar-time{color:var(--text2);font-variant-numeric:tabular-nums;}
.buffbar-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;
  min-width:230px;background:var(--bg2);border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.55);}
.buffbar-pop-title{font-size:.7rem;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--text3);margin-bottom:6px;}
.buffbar-pop-row{display:flex;align-items:center;gap:8px;padding:3px 0;
  font-size:.8rem;color:var(--text);}
.buffbar-pop-name{flex:1;white-space:nowrap;}
.buffbar-pop-pct{font-weight:800;color:var(--green);}
.buffbar-pop-time{font-variant-numeric:tabular-nums;color:var(--text2);
  min-width:52px;text-align:right;}

/* ── Inventory search (InventoryPanel.jsx) ─────────────────────────────────
   Shares the sort row: `margin-left:auto` pushes it off the sort buttons so it
   sits centred in the row's free space. Controls reuse the Marketplace pill
   styling (.mkt-filter / .mkt-filter-search) so both panels look alike.
   Filtering is live as you type: only matching items are drawn, so the grid
   collapses to the hits. Clear restores the whole bag. */
.inv-search-bar{display:flex;align-items:center;gap:6px;
  margin-left:auto;margin-right:auto;}
.inv-search-bar .mkt-filter-search{flex:0 0 auto;min-width:min(240px,42vw);}
.inv-search-btn{cursor:pointer;font-weight:600;white-space:nowrap;}
.inv-search-btn:hover{border-color:var(--hover-border);}

/* ── Inventory bag picker (top right of the panel header) ──────────────────
   Bags are sticky containers (each stack carries a server-side bag index);
   the dropdown only shows once a second bag exists. The move strip sits in
   the same right-aligned column, directly under the selector. */
.inv-bag-col{margin-left:auto;position:relative;display:flex;flex-direction:column;align-items:flex-end;}
.inv-bag-picker{margin-left:auto;display:flex;align-items:center;gap:7px;}
.inv-bag-count{font-size:.78rem;font-weight:700;color:var(--gold);
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.inv-bag-label{font-size:.75rem;color:var(--text3);font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;}
.inv-bag-picker .mkt-filter{flex:0 0 auto;}
/* ── Multi-move (transfer) mode ──
   The strip under the bag selector is absolutely positioned so toggling it
   (and the settings popover) never pushes the tab bar or the grid down. */
.inv-move-float{position:absolute;top:calc(100% + 6px);right:0;z-index:40;
  display:flex;justify-content:flex-end;}
.inv-move-controls{display:flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--bg3);border:1px solid var(--border2);border-radius:8px;
  padding:6px 8px;box-shadow:0 8px 24px rgba(0,0,0,0.45);}
.inv-move-count{font-size:.78rem;font-weight:700;color:var(--gold);
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.inv-move-go:not(:disabled){border-color:var(--blue);color:var(--blue);}
.inv-slot.move-selected{border-color:var(--gold) !important;
  box-shadow:0 0 0 2px rgba(247,201,72,0.45), inset 0 0 8px rgba(247,201,72,0.15);}
.inv-move-hint{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9999;
  background:rgba(240,192,64,0.14);border:1px solid var(--gold);color:var(--gold);
  border-radius:10px;padding:9px 18px;font-size:13px;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);white-space:nowrap;max-width:90vw;
  display:flex;align-items:center;gap:7px;backdrop-filter:blur(4px);}
/* Bag settings popover (gear next to the bag selector): rename bags */
.inv-bag-gear{padding:4px 8px;}
.inv-bag-settings{position:absolute;top:calc(100% + 6px);right:0;z-index:41;
  display:flex;flex-direction:column;gap:7px;background:var(--bg3);
  border:1px solid var(--border2);border-radius:8px;padding:10px;min-width:210px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);}
.inv-bag-settings-title{font-size:.75rem;color:var(--text3);font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;}
.inv-bag-settings-row{display:flex;gap:7px;justify-content:flex-end;}

/* ═══ ⚔ Troops — collectible hero troop collection (TroopsPanel.jsx) ═══ */
.troopu-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.troopu-card{display:flex;align-items:center;gap:12px;background:var(--bg3);border:1px solid #fff;border-radius:4px;padding:10px 12px;}
/* Unowned: readable and clickable, but desaturated so it never reads as owned.
   Full opacity returns on hover/focus so the card you are about to open is
   legible. */
.troopu-card.locked{opacity:.55;filter:grayscale(.85);}
.troopu-card.locked.troopu-card-click:hover,
.troopu-card.locked.troopu-card-click:focus-visible{opacity:1;filter:grayscale(.4);}
.troopu-card-icon{font-size:30px;width:40px;text-align:center;flex-shrink:0;}
.troopu-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.troopu-card-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.troopu-card-name{font-weight:700;font-size:14px;color:var(--tier-color,#fff);}
.troopu-card-lv{font-weight:600;font-size:12px;color:#fff;}
.troopu-card-owned{font-size:12px;color:var(--text2);margin-left:auto;}
.troopu-card-desc{font-size:12px;color:var(--text2);}
.troopu-card-skill{font-size:12px;color:var(--text2);}
.troopu-stars{color:#f0c040;font-size:12px;letter-spacing:2px;}
.troopu-stars .off{color:var(--text3);}
.troopu-stars.big{font-size:18px;}
.troopu-btn{background:var(--bg4);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;flex-shrink:0;}
.troopu-btn:hover:not(:disabled){border-color:var(--blue);}
.troopu-btn.primary{border-color:var(--blue);color:var(--blue);}
.troopu-btn:disabled{opacity:.45;cursor:default;}
/* Top-anchored instead of centred: walking the star stepper unlocks ability
   rows, and a centred panel grows in BOTH directions, so the header slides up
   under the cursor. 7vh is exactly where centring already puts the panel at
   its tallest ((100vh - 86vh) / 2), so the top edge is now fixed for every
   state and the panel only ever extends downwards — which also starts it
   slightly higher than centre when collapsed. */
.troopu-detail{max-width:480px;max-height:86vh;overflow-y:auto;
  align-self:flex-start;margin-top:7vh;}
.troopu-detail-head{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;}
.troopu-detail-icon{font-size:44px;}
.troopu-detail-tier{font-size:13px;font-weight:700;letter-spacing:1px;}
.troopu-detail-lv{font-size:13px;color:var(--text2);}
.troopu-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin:12px 0 2px;}
.troopu-stat-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text2);}
.troopu-stat-row b{color:#fff;font-weight:600;}
.troopu-sect{border-top:1px solid var(--border);margin-top:12px;padding-top:10px;}
.troopu-sect-title{font-size:.75rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;}
.troopu-skill-name{font-weight:700;font-size:14px;margin-bottom:2px;}
.troopu-skill-lv{font-weight:400;font-size:12px;color:var(--text2);margin-left:8px;}
/* Essence Shop tab — the rungs render as .node-card grid items, reusing the
   smelting/cooking card styles. These cards carry no progress bar or status
   line, so the chip would otherwise sit tight against the bottom edge; the
   extra padding gives it the same breathing room a craft node has. */
.troopu-ess-shop{margin-top:10px;}
.troopu-ess-shop .node-card{padding-bottom:1.4rem;}
.troopu-ess-icon{height:70px;display:flex;align-items:center;justify-content:center;}
.troopu-ess-shard{position:relative;display:inline-block;width:58px;height:58px;flex:0 0 auto;
  background:var(--tier-color,#9da5b8);
  -webkit-mask:url('/assets/system/essence_crystal_shard.png') center/contain no-repeat;
  mask:url('/assets/system/essence_crystal_shard.png') center/contain no-repeat;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tier-color,#9da5b8) 60%,transparent));}
.troopu-ess-shard::after{content:'';position:absolute;inset:0;
  background:url('/assets/system/essence_crystal_shard.png') center/contain no-repeat;
  mix-blend-mode:screen;opacity:.42;}
.troopu-ess-shard-small{width:19px;height:19px;vertical-align:-5px;margin-right:2px;filter:none;}

/* Upgrade (duplicate) on the left, Use Essence on the right. Both stretch so
   the pair reads as one control; :disabled already greys them out. */
.troopu-upgrade-row{display:flex;gap:8px;align-items:stretch;}
.troopu-upgrade-row .troopu-btn{flex:1 1 0;}
.troopu-ess-line{font-size:14px;color:var(--text2);margin-bottom:8px;}
.troopu-ess-line b{color:#fff;}
/* Silver amounts read gold here like everywhere else in the UI. Applies to
   every troop, present and future — the upgrade block is one component. */
.troopu-ess-line b.silver{color:var(--gold);}
/* Ability rows — one per slot, dimmed until the previewed level unlocks it */
.troopu-ability{padding:6px 0;}
.troopu-ability+.troopu-ability{border-top:1px solid var(--border);}
.troopu-ability.locked{opacity:.45;}
.troopu-ability-head{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.troopu-ability-icon{font-size:15px;line-height:1;}
.troopu-ability-slot{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);border:1px solid var(--border);border-radius:4px;padding:1px 5px;}
.troopu-ability-name{font-weight:700;font-size:14px;}
.troopu-ability-lock{font-size:12px;color:var(--text3);}
.troopu-ability-meta{margin-top:3px;font-size:11px;font-weight:600;color:var(--text3);}
.troopu-copies{font-size:13px;color:var(--text2);}
.troopu-copies + .modal-btn{margin-top:8px;}
.troopu-pity{font-size:12px;color:var(--text2);margin-top:8px;}
.troopu-hist{margin-top:16px;}
.troopu-hist-row{display:flex;gap:10px;align-items:center;font-size:13px;padding:5px 0;border-bottom:1px solid var(--border);}
.troopu-tier-chip{display:inline-block;width:24px;text-align:center;font-weight:800;border-radius:4px;background:var(--bg4);color:var(--tier-color,#fff);border:1px solid var(--tier-color,var(--border));font-size:12px;flex-shrink:0;}
.troopu-hist-name{color:var(--text);}
.troopu-hist-gain{margin-left:auto;color:var(--text2);}
.troopu-star-ready{margin-top:6px;font-weight:700;color:#f0c040;}
/* Per-tier Essence pool, pinned to the right of the tier tab row */
.troopu-ess-pill{margin-left:auto;align-self:center;font-size:12px;font-weight:700;
  color:var(--tier-color,#fff);background:var(--bg3);border:1px solid var(--tier-color,var(--border));
  border-radius:999px;padding:5px 12px;white-space:nowrap;}
/* "2 duplicates ready" hint on a collection card */
.troopu-dup-chip{margin-left:10px;font-size:11px;font-weight:700;color:#f0c040;}
.troopu-blocked{margin-top:6px;font-size:12px;color:var(--text3);}
/* Published recruit loot table (Premium Shop → Troops) */
.troopu-rates{margin-top:18px;}
.troopu-rate-tier{background:var(--bg3);border:1px solid var(--tier-color,var(--border));
  border-radius:8px;
  padding:8px 12px;margin-top:8px;}
.troopu-rate-head{display:flex;align-items:center;gap:10px;padding-bottom:6px;
  border-bottom:1px solid var(--border);margin-bottom:6px;}
.troopu-rate-pct{font-size:15px;font-weight:800;color:var(--tier-color,#fff);}
.troopu-rate-dup{margin-left:auto;font-size:11px;color:var(--text3);white-space:nowrap;}
.troopu-rate-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:2px 0;}
.troopu-rate-icon{width:20px;text-align:center;}
.troopu-rate-name{color:var(--text);}
.troopu-rate-each{margin-left:auto;font-weight:600;color:var(--text2);}
.troopu-rate-total{margin-top:8px;font-size:11px;color:var(--text3);text-align:right;}
/* Featured recruit banner (Premium Shop → Troops) */
.troopu-banner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--tier-color,var(--border2));
  border-radius:12px;padding:20px 16px 16px;margin-bottom:14px;
  box-shadow:0 0 24px -8px var(--tier-color,transparent) inset,0 0 18px -10px var(--tier-color,transparent);}
.troopu-banner-kicker{font-size:.75rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:1.2px;}
.troopu-banner-art{font-size:64px;line-height:1.1;filter:drop-shadow(0 0 14px var(--tier-color,transparent));}
.troopu-banner-name{font-family:'Cinzel',serif;font-size:26px;font-weight:700;}
.troopu-banner-tier{font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;}
.troopu-banner-desc{font-size:13px;color:var(--text2);}
.troopu-banner-skill{font-size:12px;color:var(--text3);max-width:520px;}
.troopu-banner-meta{display:flex;gap:18px;margin-top:8px;font-size:12px;font-weight:600;color:var(--text2);flex-wrap:wrap;justify-content:center;}
.troopu-banner-ends{color:#f0c040;}
/* Dual pity progress */
.troopu-pity-row{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.troopu-pity-box{flex:1;min-width:220px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;}
.troopu-pity-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.troopu-pity-label{font-size:12px;font-weight:700;}
.troopu-pity-count{font-size:12px;font-weight:600;color:var(--text2);}
.troopu-pity-bar{height:8px;background:var(--bg4);border-radius:4px;overflow:hidden;}
.troopu-pity-fill{height:100%;background:linear-gradient(90deg,#4a8fff,#f0a040);border-radius:4px;transition:width .3s;}
.troopu-pity-note{margin-top:6px;font-size:11px;color:var(--text3);}
.troopu-pity-chip{display:inline-block;margin-left:8px;font-size:10px;font-weight:800;color:#f0c040;
  border:1px solid #f0c040;border-radius:4px;padding:0 5px;text-transform:uppercase;letter-spacing:.5px;vertical-align:middle;}
/* View Probabilities */
.troopu-prob-btn-row{margin:10px 0 4px;}
.troopu-prob{max-width:520px;max-height:86vh;overflow-y:auto;}
.troopu-prob .combat-hint{color:#eefaff;padding:10px 12px;}
.troopu-prob-featured{margin:8px 0;font-size:13px;font-weight:600;color:var(--tier-color,#fff);}
.troopu-prob-mats{background:linear-gradient(135deg,#172130,#102f3d);border:1px solid #4d535e;border-radius:0;padding:8px 12px;margin-top:8px;box-shadow:inset 0 0 0 1px rgba(202,211,220,.08);}
.troopu-prob-mats summary{display:flex;justify-content:space-between;cursor:pointer;font-size:13px;font-weight:600;list-style:none;}
.troopu-prob-mats summary::-webkit-details-marker{display:none;}
.troopu-prob-mats summary::after{content:'▸';color:var(--text3);margin-left:8px;}
.troopu-prob-mats[open] summary::after{content:'▾';}
.troopu-prob-mat-tier{border-top:1px solid var(--border);margin-top:8px;padding-top:6px;}
.troopu-prob-mat-head{font-size:12px;font-weight:700;color:var(--text2);display:flex;justify-content:space-between;}
.troopu-prob-qty{font-weight:400;color:var(--text3);}
.troopu-prob-mat-list{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;}
.troopu-prob-mat-item{font-size:12px;color:var(--text2);white-space:nowrap;}
.troopu-prob-mat-ico{width:16px;height:16px;vertical-align:-3px;}
.troopu-mat-chip{color:var(--text2);border-color:var(--border);}
.troopu-mat-qty{font-size:1.1rem;font-weight:800;color:#3ecf8e;}
.troopu-reveal-item-ico{width:56px;height:56px;}
/* Stronger presentation for S/A results */
.gacha-reveal.troopu-strong .gacha-reveal-icon,.gacha-card.troopu-strong .gacha-card-icon{filter:drop-shadow(0 0 12px var(--rar-color));}
.gacha-card.troopu-strong{box-shadow:0 0 14px -4px var(--rar-color);}
/* Banner-hosted actions: probabilities pinned top-right, stats under the meta */
.troopu-banner{position:relative;}
.troopu-banner-prob{position:absolute;top:10px;right:10px;background:var(--bg4);
  border:1px solid var(--gold);color:#fff;border-radius:6px;padding:5px 11px;
  font-size:11px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;}
.troopu-banner-prob:hover{border-color:var(--tier-color,var(--blue));color:#fff;}
/* Compound selector so this outranks the shared .troopu-btn base above and
   leaves the ⚔ Troops page's own .troopu-btn instances untouched. */
.troopu-btn.troopu-banner-stats{margin-top:10px;border-color:var(--gold);color:#fff;}
.troopu-btn.troopu-banner-stats:hover{border-color:var(--tier-color,var(--blue));color:#fff;}
/* Armory → Troops rank filter (S/A/B/C), tinted with the collectible tiers */
.troop-rank-bar{display:flex;align-items:center;gap:6px;margin:0 0 12px;}
.troop-rank-label{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-right:2px;}
.troop-rank-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);
  border-radius:6px;padding:5px 15px;font-size:13px;font-weight:800;cursor:pointer;
  font-family:'Inter',sans-serif;letter-spacing:.5px;}
.troop-rank-btn:hover{color:var(--text);}
.troop-rank-btn.active{background:var(--bg4);color:var(--rank-color,#fff);border-color:var(--rank-color,var(--blue));}
.troop-rank-btn[data-rank="S"]{--rank-color:#f0a040;}
.troop-rank-btn[data-rank="A"]{--rank-color:#a55aff;}
.troop-rank-btn[data-rank="B"]{--rank-color:#4a8fff;}
.troop-rank-btn[data-rank="C"]{--rank-color:#9da5b8;}
/* Star stepper: ◀ ★★★☆☆☆ ▶ preview control */
.troopu-star-step{display:flex;align-items:center;justify-content:center;gap:12px;}
.troopu-star-arrow{background:var(--bg4);border:1px solid var(--border);color:var(--text2);
  border-radius:6px;width:26px;height:26px;font-size:11px;line-height:1;cursor:pointer;
  display:grid;place-items:center;font-family:'Inter',sans-serif;}
.troopu-star-arrow:hover:not(:disabled){border-color:var(--blue);color:var(--text);}
.troopu-star-arrow:disabled{opacity:.3;cursor:default;}
.troopu-preview-tag{margin-left:8px;font-size:11px;color:#f0c040;}
.troopu-skill-power{margin-top:4px;font-size:12px;font-weight:600;color:var(--text2);}
/* Whole collection card is clickable */
.troopu-card-click{cursor:pointer;}
.troopu-card-click:hover{border-color:#fff;}
.troopu-card-click:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
/* Combined reward bands in the probabilities modal (rank + its materials) */
.troopu-prob-group{border:1px solid #4d535e;border-radius:0;padding:10px 12px;margin-top:10px;background:linear-gradient(135deg,#172130,#102f3d);box-shadow:inset 0 0 0 1px rgba(202,211,220,.08);}
.troopu-prob-group-head{display:flex;justify-content:space-between;align-items:center;
  font-size:14px;font-weight:800;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--border);}
.troopu-prob-group-head b{font-size:16px;}
.troopu-prob-group .troopu-rate-tier{margin-top:6px;}
.troopu-prob-group .troopu-prob-mats{margin-top:8px;}

/* ── Elite combat zones — reddish, intimidating ─────────────────────────────
   Elite recolors, never reflows: the zones page keeps the exact geometry of
   the normal tab (outline + background take no layout space) and wears a red
   highlight that creeps up from the bottom edge instead of a flat border.
   The 3-enemy battle packs its trio into the same footprint as the single
   normal enemy card — one mini card centered on top, two side by side below —
   and the CURRENT TARGET wears a brighter ring than its two packmates. */
/* Elite explainer. Rides the tab row (same height as a .combat-tab) so the
   zone list below never shifts between Normal and Elite. Single line by
   design — wrapping here would grow the row and defeat that. */
.elite-banner{align-self:center;margin-left:auto;margin-right:auto;padding:6px 11px;border:1px solid rgba(220,60,50,.6);
  border-radius:9px;font-size:12px;line-height:1.2;color:var(--text2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0;
  background:linear-gradient(to top, rgba(220,60,50,.20), rgba(220,60,50,.06) 60%, transparent);}
/* Too narrow to ride the tab row: let it take its own line and wrap fully
   rather than ellipsis away to an unreadable stub. */
@media (max-width:680px){.elite-banner{white-space:normal;overflow:visible;
  text-overflow:clip;flex:1 0 100%;align-self:stretch;}}
.zone-elite{border-radius:12px;
  background:linear-gradient(to top, rgba(220,60,50,.17), rgba(220,60,50,.05) 45%, transparent 75%);}
.monster-card.elite{border-color:#fff;
  background:linear-gradient(to top, rgba(220,60,50,.22), rgba(220,60,50,.06) 50%, transparent 80%), var(--bg2);
  box-shadow:0 0 10px rgba(220,60,50,.25);}
.monster-card.elite:hover{border-color:#fff;box-shadow:0 0 14px rgba(230,80,60,.45);}
.btl-elite-side{align-items:flex-start;}
/* One normal card's footprint (270px wide), split 1-over-2: the first mini
   card spans the row centered, the other two share the second row. */
.btl-enemy-stack{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:270px;}
.btl-enemy-stack .btl-card{width:auto;padding:0.45rem;gap:4px;border-radius:4px;}
.btl-enemy-stack .btl-card:first-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 3px);}
.btl-enemy-stack .btl-card-name{font-size:11px;padding:2px;}
.btl-enemy-stack .btl-avatar{height:49px;font-size:36px;}
.btl-enemy-stack .btl-attack-label{display:none;}
.btl-enemy-stack .btl-charge{height:5px;}
.btl-enemy-stack .btl-charge-txt{font-size:10px;}
.btl-card.elite-enemy{border-color:rgba(220,60,50,.6);
  background:linear-gradient(to top, rgba(220,60,50,.22), rgba(220,60,50,.06) 50%, transparent 80%), var(--bg2);
  box-shadow:0 0 12px rgba(220,60,50,.28);}
.btl-card.elite-target{border-color:#ff6a55;box-shadow:0 0 18px rgba(255,90,70,.55);}
/* Three compact head rows fit roughly where the normal single row sits */
.btl-elite-heads{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;--elite-bar-h:9px;}
/* Name and HP bar sit on ONE line. The bars column is taller than the bar
   itself (the status strip reserves 18px above it), so the row default of
   align-items:center lined the NAME up with the middle of that whole column
   and left it floating ~10px above the bar. Aligning both to the bottom and
   giving the name a box the height of the bar puts the two centres on the
   same line, and keeps them there if the strip ever changes height. */
.btl-elite-heads .btl-unit-head{flex:initial;align-items:flex-end;}
.btl-elite-heads .battle-top-name{font-size:12px;display:flex;align-items:center;
  height:var(--elite-bar-h);white-space:nowrap;}
.btl-elite-heads .btl-bar{height:var(--elite-bar-h);}
.btl-elite-heads .btl-bar span{font-size:10px;}
/* Monsters never spend mana — drop the decorative MP bars so three enemy
   head rows stay close to the single normal row's height */
.btl-elite-heads .btl-bar.mp{display:none;}
.btl-elite-tag{margin-left:6px;padding:1px 6px;border:1px solid rgba(220,60,50,.65);border-radius:6px;color:#ff7b66;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;vertical-align:middle;}
.tip-elite-tag{margin-left:6px;padding:0 5px;border:1px solid rgba(220,60,50,.65);border-radius:5px;color:#ff7b66;font-size:10px;font-weight:700;text-transform:uppercase;}

/* ═══ GUILD CONQUEST (territory map) ═══
   Map on the left, zone detail on the right — same split the research tab
   used, so the guild panel's width and rhythm are unchanged. */
.terr-wrap{padding:12px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(300px,380px);align-items:start;}
.terr-main{min-width:0;}
.terr-topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:8px;}
.terr-world-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);}
.terr-world-name{font-size:1.05rem;font-weight:700;color:var(--text);}
.terr-tokens{text-align:right;border:1px solid #a55aff;border-radius:0;padding:5px 10px;}
.terr-tokens-label{font-size:.72rem;color:var(--text3);}
.terr-tokens-val{font-size:1.25rem;font-weight:700;color:var(--gold);}
.terr-map{width:100%;max-height:520px;display:block;background:var(--bg1);border:1px solid var(--border);border-radius:0;}
.terr-hex{cursor:pointer;outline:none;}
.terr-hex polygon{transition:filter .12s,stroke-width .12s;}
/* mapBounds() centres the viewBox on the widest row, so the middle row sits at
   exactly y=0 — the vertical centre. Scaled to fit, that line lands on a half
   device pixel whenever the rendered height is odd, and the browser is then
   free to round those glyphs either way on any repaint (hover included), so
   only that row appears to twitch. geometricPrecision stops glyph positions
   being snapped to the pixel grid, so every row draws at its true position and
   every tile behaves identically. */
.terr-map text{text-rendering:geometricPrecision;}
.terr-req-exp{font-family:'Inter',sans-serif;font-size:10px;font-weight:900;letter-spacing:-.4px;fill:#ffcf45;stroke:#e77820;stroke-width:.7px;paint-order:stroke;}
.terr-hex:hover polygon,.terr-hex:focus polygon{filter:brightness(1.35);}
.terr-hex-locked{cursor:pointer;}
.terr-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--text2);}
.terr-legend-item{display:inline-flex;align-items:center;gap:6px;}
.terr-legend-swatch{width:14px;height:14px;border:2px solid;border-radius:3px;display:inline-block;}
.terr-side{display:grid;gap:10px;align-content:start;}
.terr-box{background:var(--bg1);border:1px solid var(--border);border-radius:0;padding:12px 14px;}
.terr-box-unlock{border-color:var(--red);}
.terr-box-unlock.is-unlocked{border-color:var(--green);}
.terr-empty{color:var(--text3);font-size:.85rem;text-align:center;padding:28px 14px;}
.terr-detail{display:grid;gap:10px;}
.terr-detail-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;}
.terr-detail-name{font-size:1.1rem;font-weight:700;color:var(--text);flex:1 1 auto;}
.terr-detail-type{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);}
.terr-detail-desc{font-size:.95rem;color:var(--desc);}
.terr-state-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;border:1px solid var(--border2);color:var(--text2);}
.terr-state-badge.st-available{border-color:var(--gold);color:var(--gold);}
.terr-state-badge.st-unlocked,.terr-state-badge.st-in_progress{border-color:var(--blue);color:var(--blue);}
.terr-state-badge.st-captured{border-color:var(--green);color:var(--green);}
.terr-sec-title{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:6px;}
.terr-kv{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;color:var(--text);}
.terr-kv b{color:var(--text);}
.terr-kv-sub{font-size:.8rem;color:var(--text2);margin-top:4px;}
/* .pl-xp-wrap is a fixed 80px (it was written for the level widget), so every
   bar in here drew as a short stub instead of spanning the panel. */
.terr-bar{margin-top:6px;width:100%;}
.terr-bar.red .pl-xp-bar{background:linear-gradient(90deg,#f55a5a,#c03030);}
.terr-bar.green .pl-xp-bar{background:linear-gradient(90deg,#3ecf8e,#1a7a52);}
.terr-reward{font-size:.95rem;font-weight:600;color:var(--gold);}
.terr-hint{font-size:.78rem;color:var(--text3);line-height:1.45;}
.terr-reason{font-size:.8rem;color:var(--red);text-align:center;margin-top:6px;}
.terr-actions{display:grid;gap:4px;}
.terr-action{width:100%;}
.terr-captured{text-align:center;padding:10px;border:1px solid var(--green2);border-radius:0;background:var(--green3);}
.terr-captured-title{font-size:1rem;font-weight:700;color:var(--green);}
.terr-captured-sub{font-size:.78rem;color:var(--text2);margin-top:2px;}
.terr-enemies{display:grid;gap:12px;margin-bottom:14px;}
/* Three-enemy zones (ring 2 and out) already ran the action button past the
   bottom of the map, so they keep the tight spacing — the extra breathing
   room is only affordable on the one- and two-enemy encounters. */
.terr-enemies-many{gap:6px;margin-bottom:8px;}
.terr-enemy.dead{opacity:.45;}
.terr-fight-row{display:flex;justify-content:space-between;gap:8px;font-size:.85rem;}
.terr-fight-name{font-weight:600;color:var(--text);}
.terr-fight-hp{color:var(--text2);white-space:nowrap;}
.terr-fight-meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text2);margin-top:8px;}
.terr-donate{display:grid;gap:6px;}
.terr-donate-row{display:flex;gap:6px;align-items:center;}
.terr-donate-row .mkt-num-input{flex:1;min-width:0;height:36px;}
.terr-bonuses .terr-kv-sub{color:var(--text);}
.terr-topbar-right{display:flex;align-items:flex-end;gap:14px;}
.terr-contrib-btn{height:32px;}
/* Dev-only reset chip, shown beside Contribution while the debug bar is up */
.terr-debug-btn{height:32px;border-color:var(--red);color:var(--red);}
.terr-fight-wrap{padding:0 12px 12px;}
/* Contribution modal: one row per member, most contribution first */
.terr-contrib{display:grid;gap:2px;margin-top:8px;max-height:60vh;overflow-y:auto;}
.terr-contrib-zone{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:8px;}
.terr-contrib-unit{font-weight:400;color:var(--text3);font-size:.82rem;}
.terr-contrib-head,.terr-contrib-row{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border-radius:6px;font-size:.88rem;}
.terr-contrib-head{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);background:var(--bg3);}
.terr-contrib-row{border:1px solid var(--border);color:var(--text);}
.terr-contrib-row b{color:var(--gold);}
/* Your own row: green border, stronger tint and a left accent bar, so it is
   findable at a glance in a long roster rather than a faint wash. */
.terr-contrib-row.is-me{background:rgba(62,207,142,.16);border-color:var(--green);
  box-shadow:inset 3px 0 0 var(--green);font-weight:600;}
/* World header: "World N" with the Previous / Next World buttons beside it */
.terr-world{display:flex;align-items:center;gap:10px;border:1px solid var(--blue);border-radius:0;padding:5px 10px;}
.terr-world-btn{height:28px;font-size:.78rem;white-space:nowrap;}
/* Capture requirement header: title left, Info button in the top-right corner */
.terr-sec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.terr-info-btn{height:24px;font-size:.72rem;padding:0 10px;margin-top:-2px;}
/* Capture requirement carries the most rows of any box — deadline, an enemy
   with a bar each, the progress bar, two sub-rows — so it gets its own
   breathing room rather than the shared .terr-box padding. */
.terr-box-capture{padding:12px 14px 14px;}
.terr-box-capture.is-tight{padding:12px 14px;}
.is-tight .terr-bar{margin-top:4px;}
/* The 2-day capture deadline and the between-attacks cooldown */
.terr-deadline{margin-bottom:6px;}
.is-tight .terr-deadline{margin-bottom:2px;}
.terr-deadline b{color:var(--gold);font-variant-numeric:tabular-nums;}
.terr-cooldown{color:var(--gold);}
/* Enemy stats modal: one column per enemy, WB stat-card rows. Wider than a
   standard modal so every stat row keeps its label and value on ONE line. */
.terr-einfo-modal{max-width:660px;}
.terr-einfo-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.terr-einfo-card{flex:1 1 260px;max-width:300px;background:var(--bg1);border:1px solid var(--border);border-radius:0;padding:12px 14px;}
.terr-einfo-card .tip-row{padding:3px 0;}
.terr-einfo-card .tip-row > span{white-space:nowrap;}
.terr-einfo-icon{font-size:34px;text-align:center;line-height:1.2;}
.terr-einfo-name{font-weight:700;text-align:center;font-size:.9rem;margin-bottom:4px;color:var(--gold);}
.terr-einfo-dur{margin-top:10px;justify-content:flex-start;gap:6px;}
/* Conquest bonus grid (Guild Buildings tab): Combat / Professions / Others */
/* Column count is set inline from however many columns actually have rows. */
.terr-bonus-grid{display:grid;gap:14px;margin-top:6px;}
.terr-bonus-grid .terr-kv-sub b{color:var(--text3);}
.terr-bonus-grid .terr-kv-sub b.terr-bonus-on{color:var(--green);}
@media (max-width:720px){.terr-bonus-grid{grid-template-columns:1fr;}}
/* A defeated Guild Conquest enemy keeps a dimmed card in the fight scene */
.btl-card.terr-foe-dead{opacity:.45;filter:grayscale(.6);}
.btl-unit-head.terr-foe-dead{opacity:.45;}
@media (max-width:980px){.terr-wrap{grid-template-columns:1fr;}}
/* Guild Conquest running: a red ! in the tab's top-right corner, matching the
   .prof-chest-badge the Guild nav button and the gathering maps already use. */
.guild-tab-badged{position:relative;overflow:visible;}
.guild-tab-badge{position:absolute;top:-6px;right:6px;color:var(--red);font-size:15px;
  font-weight:900;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none;}
/* Share of the guild's total contribution, beside the raw number */
.terr-contrib-pct{color:var(--text3);font-weight:400;font-size:.82em;}
/* Debug boost chip reads as armed while the multiplier is on */
.terr-debug-btn.on{border-color:var(--gold);color:var(--gold);}
/* Native modal keeps the beta acknowledgement ahead of auth and tutorial UI. */
.beta-notice { max-width: 460px; width: calc(100% - 40px); max-height: calc(100% - 40px); overflow: auto; margin: auto; box-sizing: border-box; padding: 28px; border: 1px solid var(--gold); border-radius: 14px; background: var(--bg2, #171b24); color: var(--text, #eee); }
.beta-notice::backdrop { background: rgba(0, 0, 0, .8); }
.beta-notice h2 { color: var(--gold); margin-top: 0; }
.beta-notice p { line-height: 1.6; margin: 14px 0; }

/* Trial-only 9-slice frame. The SVG crops the supplied PNG's outer margins;
   36px corner slices preserve its angled steel corners. */
.trial-font-preview .fantasy-button{
  border:6px solid transparent;
  border-image:url('/assets/ui/trial-button-steel.svg') 36 fill / 10px stretch;
  background:#202329;
  color:#fff;
  text-shadow:0 1px 1px #000;
  transition:filter .15s,transform .1s;
}
.trial-font-preview .fantasy-button:hover:not(:disabled){filter:brightness(1.12);}
.trial-font-preview .fantasy-button:active:not(:disabled){transform:translateY(1px);filter:brightness(.92);}
.trial-font-preview .fantasy-button:disabled{filter:grayscale(.8) brightness(.62);color:#89909a;}
.trial-font-preview .trial-tab.active,
.trial-font-preview .pstore-tab.active{color:#fff;border-image: url('/assets/ui/trial-button-steel.svg') 36 fill / 10px stretch;}

/* Trial of Prestige uses the supplied wood, iron, and parchment UI artwork.
   Buttons take its corner/edge treatment as a 9-slice, while the panels use
   its blank parchment field so their dynamic content stays readable. */
.trial-font-preview .fantasy-button{
  border:10px solid transparent;
  border-image:url('/assets/ui/trial-button-wood.png') 12 / 10px stretch;
  background:#2a1a11;
  color:#f4e5c5;
  text-shadow:0 2px 1px #110a05;
}
.trial-font-preview .trial-tab.active,
.trial-font-preview .pstore-tab.active{
  border-image:url('/assets/ui/trial-button-gold.png') 12 / 10px stretch;
  background:#5e421f;
  color:#fff4d5;
}
.trial-font-preview :is(.trial-fight-main-btn,.trial-prestige-btn){
  border-image:url('/assets/ui/trial-button-red.png') 12 / 10px stretch;
  background:#6b281c;
  color:#fff1dc;
}
.trial-font-preview :is(.trial-prestige-bar,.trial-boss-col,.pstore-card,.trial-stats-card,.trial-info-panel){
  border:18px solid transparent;
  border-image:url('/assets/ui/trial-button-wood.png') 12 / 18px stretch;
  border-radius:0;
  background:#b48959 url('/assets/ui/trial-parchment.png') center / cover;
  outline:2px solid #100b07;
  box-shadow:0 0 0 3px #5a3c25,0 6px 14px rgba(0,0,0,.45);
}
.trial-font-preview :is(.trial-prestige-title,.trial-info-title,.trial-stats-head,.pstore-name,.trial-boss-preview-name,.trial-stage-label){color:#3a2414;text-shadow:0 1px rgba(255,235,190,.45);}
.trial-font-preview :is(.trial-prestige-sub,.trial-prestige-desc,.trial-info-lead,.trial-info-list li,.trial-info-note,.trial-stat-label,.trial-stat-value,.pstore-desc,.pstore-bonus,.pstore-lvl,.trial-boss-col .tip-row,.trial-boss-col .tip-row b,.tbs-desc){color:#382515;}
.trial-font-preview .trial-prestige-sub b,.trial-font-preview .pstore-bonus b{color:#6a311c;}

/* Shared game typography prefers bundled WOFF2 files so it renders identically everywhere. */
@font-face{font-family:'Trial Fantasy';src:url('/assets/fonts/trial/Metamorphous-Regular.woff2') format('woff2'),url('/assets/fonts/trial/Metamorphous-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:block;}
@font-face{font-family:'Trial UI';src:url('/assets/fonts/trial/Caudex-Regular.woff2') format('woff2'),url('/assets/fonts/trial/Caudex-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:block;}
@font-face{font-family:'Trial UI';src:url('/assets/fonts/trial/Caudex-Bold.woff2') format('woff2'),url('/assets/fonts/trial/Caudex-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:block;}
.trial-font-preview{display:contents;font-family:'Trial UI',serif;}
.trial-font-preview :is(button,input,select,textarea,.game-desc,.trial-prestige-sub,.trial-prestige-desc,.trial-info-note,.pstore-desc,.trial-info-lead,.trial-info-list li,.trial-stat-label,.tbs-desc){font-family:'Trial UI',serif;}
.trial-font-preview :is(.panel-title,.armory-subtitle,.trial-stage-label,.trial-prestige-title,.trial-boss-preview-name,.trial-info-title,.trial-stats-head,.pstore-name,.tbs-name,.trial-tab,.pstore-tab){font-family:'Trial Fantasy',serif;font-weight:400;}

/* Trial of Prestige's supplied frame is a genuine nine-slice: its ornate
   corners retain their proportions while the central game surface can grow
   with the desktop panel. It deliberately applies only inside this screen. */
.trial-font-preview .trial-premium-frame{
  min-height:0;
  box-sizing:border-box;
  padding:12px 0 24px;
  border:0;
  border-image:none;
  background:none;
  color:#d6d8d7;
  box-shadow:none;
}
.trial-font-preview .trial-premium-frame .mkt-topbar{
  padding-bottom:14px;
  border-bottom:1px solid rgba(177,133,48,.48);
  box-shadow:0 1px rgba(92,198,235,.11);
}
.trial-font-preview .trial-premium-frame .panel-title,
.trial-font-preview .trial-premium-frame .mkt-title,
.trial-font-preview .trial-premium-frame .trial-stage-label{
  color:#f1d68a;
  text-shadow:0 1px 0 #1e1203,0 0 12px rgba(222,173,60,.18);
}
.trial-font-preview .trial-premium-frame .panel-sub,
.trial-font-preview .trial-premium-frame .trial-prestige-count{color:#aebfc5;}
.trial-font-preview .trial-premium-frame .trial-tokens{
  border:1px solid rgba(190,144,54,.7);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(19,65,85,.75),rgba(4,18,29,.82));
  color:#b9c9ca;
  box-shadow:inset 0 1px rgba(111,214,248,.14);
}
.trial-font-preview .trial-premium-frame .trial-tokens b{color:#f1d68a;}
.trial-font-preview .trial-premium-frame .trial-tabs,
.trial-font-preview .trial-premium-frame .pstore-tabs{
  gap:0;
  margin:0 0 18px;
  padding:0 8px 2px;
  border-bottom:1px solid rgba(81,134,151,.35);
}
.trial-font-preview .trial-premium-frame :is(.trial-tab,.pstore-tab){
  position:relative;
  border:0 !important;
  border-radius:0;
  border-image:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#a7afb0;
  padding:10px 18px 12px;
}
.trial-font-preview .trial-premium-frame :is(.trial-tab,.pstore-tab):hover{color:#f0d894;background:transparent !important;}
.trial-font-preview .trial-premium-frame :is(.trial-tab,.pstore-tab).active{
  border-image:none;
  background:transparent !important;
  color:#ffe6a2;
}
.trial-font-preview .trial-premium-frame :is(.trial-tab,.pstore-tab).active::after{
  content:"";
  position:absolute;
  right:4px;bottom:-3px;left:4px;height:3px;
  background:linear-gradient(90deg,transparent,rgba(205,151,40,.45) 20%,#fff0b2 50%,rgba(205,151,40,.45) 80%,transparent);
  box-shadow:0 2px 8px rgba(248,196,70,.55);
}
.trial-font-preview .trial-premium-frame .fantasy-button:not(.trial-tab):not(.pstore-tab){
  border:1px solid rgba(184,139,52,.65);
  border-image:none;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(22,72,94,.95),rgba(4,23,37,.98));
  color:#d9e1de;
  text-shadow:0 1px #000;
  box-shadow:inset 0 1px rgba(107,209,246,.17),inset 0 -1px rgba(0,0,0,.8);
}
.trial-font-preview .trial-premium-frame .fantasy-button:hover:not(:disabled){border-color:#efd27e;color:#fff0b8;filter:brightness(1.14);}
.trial-font-preview .trial-premium-frame :is(.trial-prestige-bar,.trial-boss-col,.pstore-card,.trial-stats-card,.trial-info-panel,.stats-list,.paper-doll){
  border:18px solid transparent;
  border-image:url('/assets/ui/trial-prestige-frame.png') 92 / 18px stretch;
  border-radius:0;
  outline:0;
  background:linear-gradient(180deg,rgba(12,49,70,.94),rgba(3,17,29,.96));
  box-shadow:inset 0 1px rgba(115,213,255,.16),inset 0 -1px rgba(0,0,0,.75),0 7px 16px rgba(0,0,0,.25);
}
.trial-font-preview .trial-premium-frame .armory-subtitle{
  color:#f5f7f5;
  text-shadow:0 1px 2px #000;
}
.trial-font-preview .trial-premium-frame :is(.trial-prestige-title,.trial-info-title,.trial-stats-head,.pstore-name,.trial-boss-preview-name){color:#efd589;text-shadow:0 1px #100d05;}
.trial-font-preview .trial-premium-frame :is(.trial-prestige-sub,.trial-prestige-desc,.trial-info-lead,.trial-info-list li,.trial-info-note,.trial-stat-label,.trial-stat-value,.pstore-desc,.pstore-bonus,.pstore-lvl,.trial-boss-col .tip-row,.trial-boss-col .tip-row b,.tbs-desc){color:#c2d0d3;}
.trial-font-preview .trial-premium-frame .trial-prestige-sub b,.trial-font-preview .trial-premium-frame .pstore-bonus b{color:#f0d384;}
.trial-font-preview .trial-premium-frame .trial-prestige-btn{
  border-image:none;
  border:1px solid #e8c86f;
  border-radius:2px;
  background:linear-gradient(180deg,#e8c96e,#8b5b1d);
  color:#120d05;
  box-shadow:inset 0 1px rgba(255,255,224,.7),0 0 12px rgba(230,185,76,.22);
}
/* Trial loadout slots are picker buttons. Keep their square, metallic treatment
   consistent with the rest of the new Trial UI, including empty + slots. */
.trial-font-preview .trial-premium-frame .btl-food-slot{
  border:1px solid rgba(184,139,52,.65);
  border-radius:0;
  background:linear-gradient(180deg,rgba(22,72,94,.95),rgba(4,23,37,.98));
  color:#dce8e6;
  box-shadow:inset 0 1px rgba(107,209,246,.17),inset 0 -1px rgba(0,0,0,.8);
}
.trial-font-preview .trial-premium-frame .btl-food-slot.empty{color:#f0d384;}
.trial-font-preview .trial-premium-frame .btl-food-slot.locked{border-color:rgba(112,123,128,.5);border-radius:0;}
.trial-font-preview .trial-premium-frame .btl-food-slot:hover{border-color:#efd27e;filter:brightness(1.12);}
@container game-content (max-width:760px){
  .trial-font-preview .trial-premium-frame{padding:12px 0 20px;}
}

/* Browser resizing: preserve the wide layout, reclaim navigation space first. */
#game{height:100dvh;min-width:0;}
.sidebar > *{flex-shrink:0;}
.prof-rail-progress,.prof-rail-icon{display:none;}
@media (min-width:1100px) and (max-width:1399px){
  :root{--sidebar-width:180px;--content-padding:16px;}
  .sidebar{padding:12px 6px;}
  .sidebar .prof-item{gap:6px;padding:8px 5px;}
  .sidebar .prof-item-name{white-space:normal;flex-wrap:wrap;gap:2px 6px;}
  .sidebar .prof-item-lvl{white-space:nowrap;}
}
@media (max-width:1099px){
  :root{--sidebar-width:60px;--content-padding:12px;}
  .sidebar{padding:12px 5px;overflow-x:hidden;}
  .sidebar .prof-item{justify-content:center;gap:0;padding:8px 0;min-height:44px;margin-bottom:4px;}
  .sidebar .prof-item-body,.sidebar-title{display:none;}
  .sidebar .prof-full-icon{display:none;}
  .sidebar .prof-rail-icon{display:block;}
  .sidebar .prof-item-icon{width:31px;}
  .sidebar-divider{margin:6px 3px;}
  .sidebar .mail-badge{position:absolute;top:0;right:0;padding:1px 4px;font-size:10px;}
  .sidebar .panel-lock{position:absolute;bottom:2px;right:0;font-size:11px;}
  .sidebar #guild-conquest-badge{position:absolute;top:-3px;right:1px;margin:0;}
  .sidebar .prof-chest-badge{top:-3px;right:1px;}
  .prof-rail-progress{display:block;position:absolute;bottom:2px;left:8px;right:8px;height:3px;background:var(--bg4);border-radius:2px;overflow:hidden;}
  .prof-rail-progress > span{display:block;height:100%;background:var(--gold);}
  .top-bar{height:auto;min-height:72px;gap:6px;padding:6px 8px;flex-wrap:wrap;}
  .top-user{gap:5px;}
  .top-user .username-tag{max-width:130px;overflow:hidden;text-overflow:ellipsis;}
  .top-user .logout-btn{padding:7px 8px;}
  .player-level{padding:6px 9px;}
  .gm-topbar-wide{min-width:160px;padding:6px 8px;}
  .gm-topbar-row{flex-wrap:wrap;white-space:normal;}
}
@media (max-width:850px){
  .top-bar .gm-topbar-chip{order:3;flex:1 1 100%;max-width:none;}
}
@container game-content (max-width:1100px){
  .panel-header{flex-wrap:wrap;gap:12px;}
  .trial-tabs,.pstore-tabs{flex-wrap:wrap;}
  .trial-boss-layout{grid-template-columns:minmax(380px,1.25fr) minmax(280px,1fr);}
  .trial-stats-col{grid-column:1 / -1;}
  .trial-stats-col .stats-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;}
  .trial-player-col,.trial-boss-col{min-width:0;}
  .trial-boss-info-cols{flex-direction:column;}
  .trial-boss-skillcol{border-left:0;border-top:1px solid var(--border2);padding:10px 0 0;}
  .armory-layout{gap:16px;}
  .gm-layout{grid-template-columns:minmax(0,1fr);}
  .gm-side{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
  .gm-header-right{align-items:flex-start;}
  .gm-header-right .gm-map-hint{align-self:flex-start;}
  .battle-top{flex-wrap:wrap;}
  .battle-arena{flex-wrap:wrap;}
  .btl-side{min-width:0;flex-wrap:wrap;gap:12px;}
  .btl-troop-stack{flex-wrap:wrap;}
  .guild-member-list{overflow-x:auto;}
  .guild-member-row{min-width:720px;}
  .guild-member-list.can-manage .guild-member-row{min-width:890px;}
  .inv-sort-bar{flex-wrap:wrap;}
  .inv-search-bar{flex-wrap:wrap;max-width:100%;}
  .inv-search-bar .mkt-filter-search{min-width:120px;flex:1 1 180px;}
}
@container game-content (max-width:760px){
  .trial-boss-layout{grid-template-columns:minmax(0,1fr);}
  .trial-prestige-bar{flex-wrap:wrap;}
  .armory-right{width:100%;}
  .armory-stats-doll-row{flex-wrap:wrap;}
  .armory-stats-col{flex:1 1 250px;}
  .armory-doll-col{max-width:100%;}
  .mail-layout,.mkt-trade-wrap{flex-direction:column;}
  .mail-col-left{flex:1 1 auto;width:100%;}
  .mail-col-right,.mkt-trade-left{width:100%;}
  .mkt-trade-right{width:100%;}
  .wb-boss-row{flex-direction:column;}
  .wb-boss-stats-panel{width:100%;}
  .wb-side{grid-template-columns:1fr;}
  .terr-wrap{grid-template-columns:1fr;}
  .btl-divider{display:none;}
  .battle-arena > .btl-side{flex:1 1 100%;}
}
@media (max-height:700px){
  .gm-map-wrap{height:max(280px,calc(100dvh - 230px));}
}
@media (max-width:749px){
  .main-content{--content-padding:8px;}
  .trial-stats-col .stats-list,.mkt-books{grid-template-columns:1fr;}
  .top-user{flex-wrap:wrap;}
}

/* Keep the Prestige panel system last: responsive and legacy page rules above — final inventory-slot override anchor
   must not reintroduce rounded, single-line cards. */
.main-content :is(.node-card,.btl-troop-card,.guild-invite-card,.guild-create-box,
  .guild-search-box,.guild-ann-card,.shop-card,.shop-hist-row,.tab-card,
  .item-modal-icon,.inv-slot,.equip-slot,.btl-food-slot,.mkt-cell,.market-card,
  .pvp-card,.wb-card,.quest-card,.mail-card,.daily-quest-card,.profile-card,
  .settings-card,.trial-sub-panel,.trial-stats-card,.trial-info-panel,
  .trial-prestige-bar,.trial-boss-col,.pstore-card){
  border:18px solid transparent !important;
  border-image:var(--prestige-frame) 92 / 18px stretch !important;
  border-radius:0 !important;
  background-color:var(--prestige-panel) !important;
  background-image:linear-gradient(180deg,rgba(11,51,72,.94),rgba(3,15,26,.98)) !important;
}

/* Inventory cells use a light portrait-frame treatment. Runtime rarity classes
   still provide the outer border colour; silver stays as the inner bevel. */
#inv-tab-content .inv-slot{
  border-width:1px !important;
  border-style:solid !important;
  border-image:none !important;
  border-radius:1px !important;
  background-color:#07131e !important;
  background-image:linear-gradient(145deg,rgba(28,54,70,.92),rgba(5,13,22,.98)) !important;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.86),inset 0 0 0 4px rgba(203,222,235,.48),inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px rgba(0,0,0,.42) !important;
  overflow:hidden;
}
#inv-tab-content .inv-slot.empty{border-color:rgba(191,210,222,.45);}
#inv-tab-content .inv-slot.filled:hover{
  transform:translateY(-1px);
  outline:1px solid rgba(231,245,255,.68);
  outline-offset:2px;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.78),inset 0 0 0 4px rgba(235,247,255,.75),inset 0 1px 0 rgba(255,255,255,.55),0 0 14px rgba(175,222,255,.32) !important;
}
#inv-tab-content .inv-slot.move-selected,
#inv-tab-content .inv-slot.selected{
  outline:2px solid #d9f2ff;
  outline-offset:2px;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.72),inset 0 0 0 4px rgba(239,250,255,.88),0 0 18px rgba(125,204,255,.52) !important;
}

/* Armory troop ranks are a text-led horizontal filter tab row — marketplace slot override anchor. */
.troop-rank-bar{gap:14px;border-bottom:1px solid rgba(96,137,153,.24);}
.troop-rank-btn{position:relative;min-width:42px;display:inline-flex;align-items:center;justify-content:center;padding:8px 3px !important;border:0 !important;
  border-radius:0 !important;background:transparent !important;color:#b7b8a4 !important;box-shadow:none !important;}
.troop-rank-btn:hover{color:#fff3c6 !important;}
.troop-rank-btn.active{background:transparent !important;color:#fff3c6 !important;}
.troop-rank-btn.active::after{content:'';position:absolute;height:2px;bottom:-1px;left:-9px;right:-9px;
  background:linear-gradient(90deg,transparent,#7a581d 18%,#f0cf72 50%,#7a581d 82%,transparent);box-shadow:0 0 8px rgba(237,195,84,.45);}

/* Marketplace item cells reuse Inventory's light rarity portrait frame. */
#panel-root-react :is(.mkt-cell,.mkt-item-icon,.mkt-mine-icon){
  border-width:1px !important;
  border-style:solid !important;
  border-image:none !important;
  border-radius:1px !important;
  background-color:#07131e !important;
  background-image:linear-gradient(145deg,rgba(28,54,70,.92),rgba(5,13,22,.98)) !important;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.86),inset 0 0 0 4px rgba(203,222,235,.48),inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px rgba(0,0,0,.42) !important;
  overflow:hidden;
}
#panel-root-react .mkt-cell:hover{
  transform:scale(1.04);
  outline:1px solid rgba(231,245,255,.68);
  outline-offset:2px;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.78),inset 0 0 0 4px rgba(235,247,255,.75),inset 0 1px 0 rgba(255,255,255,.55),0 0 14px rgba(175,222,255,.32) !important;
}
#panel-root-react .mkt-mine-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;}

/* Final frame precedence: Armory gear, Marketplace My Items, equipped items,
   and every consumable/skill/troop loadout slot show their real rarity border
   instead of the shared gold nine-slice panel frame. */
#armory-grid .inv-slot,
#mkt-body .inv-slot,
#game .doll-slot.filled,
#game .btl-food-slot{
  border-width:1px !important;
  border-style:solid !important;
  border-image:none !important;
  border-radius:1px !important;
  background-color:#07131e !important;
  background-image:linear-gradient(145deg,rgba(28,54,70,.92),rgba(5,13,22,.98)) !important;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.86),inset 0 0 0 4px rgba(203,222,235,.48),inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px rgba(0,0,0,.42) !important;
}
#armory-grid .inv-slot.empty,
#mkt-body .inv-slot.empty,
#game .btl-food-slot:not(.filled){border-color:rgba(191,210,222,.45) !important;}
#armory-grid .inv-slot.filled:hover,
#mkt-body .inv-slot.filled:hover,
#game .doll-slot.filled:hover,
#game .btl-food-slot.filled:hover{
  outline:1px solid rgba(231,245,255,.68);
  outline-offset:2px;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.78),inset 0 0 0 4px rgba(235,247,255,.75),inset 0 1px 0 rgba(255,255,255,.55),0 0 14px rgba(175,222,255,.32) !important;
}

/* Guild navigation and member sorting use the text-led Armory tab treatment. */
.guild-tabbar{gap:18px !important;border-bottom:1px solid rgba(96,137,153,.24);}
.guild-sort-row{gap:14px;border-bottom:1px solid rgba(96,137,153,.24);}
.guild-tabbar .guild-tab,
.guild-sort-tab{
  position:relative;
  min-width:104px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 6px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#b7b8a4 !important;
  box-shadow:none !important;
}
.guild-sort-tab{min-width:76px;}
.guild-sort-arrow{display:block !important;flex:0 0 10px;width:10px;min-width:0;margin-left:4px;overflow:hidden;text-align:center;}
.guild-sort-tab:not(.active) .guild-sort-arrow{visibility:hidden;}
.guild-tabbar .guild-tab:hover,
.guild-sort-tab:hover{color:#fff3c6 !important;}
.guild-tabbar .guild-tab.active,
.guild-sort-tab.active{color:#fff3c6 !important;}
.guild-tabbar .guild-tab.active::after,
.guild-sort-tab.active::after{
  content:'';
  position:absolute;
  height:2px;
  bottom:-1px;
  left:-8px;
  right:-8px;
  background:linear-gradient(90deg,transparent,#7a581d 18%,#f0cf72 50%,#7a581d 82%,transparent);
  box-shadow:0 0 8px rgba(237,195,84,.45);
}

/* Combat zone labels sit in the visual center of their vertical tab rows. */
.zone-item{display:flex;align-items:center;font-size:14.4px !important;}
.combat-mode-tabbar .combat-tab{font-size:14.4px !important;}

/* Marketplace tabs follow the Premium Shop's label-led navigation treatment. */
.marketplace-tabbar{gap:14px !important;border-bottom:1px solid rgba(96,137,153,.24);}
.marketplace-tabbar .marketplace-tab{
  position:relative;
  min-width:104px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 3px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#b7b8a4 !important;
  box-shadow:none !important;
}
.marketplace-tabbar .marketplace-tab:hover,
.marketplace-tabbar .marketplace-tab.active{color:#fff3c6 !important;}
.marketplace-tabbar .marketplace-tab.active::after{
  content:'';
  position:absolute;
  height:2px;
  bottom:-1px;
  left:-12px;
  right:-12px;
  background:linear-gradient(90deg,transparent,#7a581d 18%,#f0cf72 50%,#7a581d 82%,transparent);
  box-shadow:0 0 8px rgba(237,195,84,.45);
}

/* Tier markers belong to equipment only; rarity colors the marker edge while
   solid white text stays readable on every item frame. */
#game .slot-tier-badge{
  top:-1px;
  right:-1px;
  color:#fff !important;
  background:rgba(3,12,20,.9);
  border:1px solid rgba(203,222,235,.72);
  border-radius:1px;
  padding:1.6px 2.4px;
  font-size:9.6px;
  line-height:1;
  font-weight:800;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}

/* Combat preparation is portaled outside #game, so its loadout slots need the
   same final light-frame override explicitly. */
#modal-root .btl-food-slot{
  border-width:1px !important;
  border-style:solid !important;
  border-image:none !important;
  border-radius:1px !important;
  background-color:#07131e !important;
  background-image:linear-gradient(145deg,rgba(28,54,70,.92),rgba(5,13,22,.98)) !important;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.86),inset 0 0 0 4px rgba(203,222,235,.48),inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px rgba(0,0,0,.42) !important;
}
#modal-root .btl-food-slot:not(.filled){border-color:rgba(191,210,222,.45) !important;}
#modal-root .btl-food-slot.filled:hover{
  outline:1px solid rgba(231,245,255,.68);
  outline-offset:2px;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.78),inset 0 0 0 4px rgba(235,247,255,.75),inset 0 1px 0 rgba(255,255,255,.55),0 0 14px rgba(175,222,255,.32) !important;
}

/* Inventory sorting controls share one footprint; grouping is the contrasting action. */
#game .inv-sort-bar > .inv-sort-btn{
  width:104px;
  min-width:104px;
  padding-left:6px;
  padding-right:6px;
}
#game .inv-sort-bar > .inv-group-btn{
  border-color:rgba(221,91,91,.9) !important;
  background:linear-gradient(180deg,rgba(138,38,44,.98),rgba(72,17,24,.98)) !important;
  color:#fff1eb !important;
}
#game .inv-sort-bar > .inv-group-btn:hover:not(:disabled){
  border-color:#ffb1a4 !important;
  background:linear-gradient(180deg,rgba(173,51,59,.98),rgba(95,22,31,.98)) !important;
}

/* Page-level horizontal navigation gets a two-pixel label lift without changing tab geometry. */
#game :is(.inv-tab-btn,.combat-tab,.forge-tier-btn,.mkt-tab,.marketplace-tab,.guild-tab){font-size:14px !important;}
#game :is(.trial-tab){font-size:15px !important;}
#game :is(.pstore-tab,.profile-tab,.wb-top-btn){font-size:14.5px !important;}

/* Player-profile navigation uses the same button treatment as the Armory. */
#game .profile-tabbar{
  gap:6px !important;
  margin:0 0 14px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
#game .profile-tab{
  min-width:104px !important;
  padding:7px 13px !important;
  border:1px solid var(--border) !important;
  border-radius:9px !important;
  background:var(--bg2) !important;
  box-shadow:none !important;
  color:var(--text2) !important;
}
#game .profile-tab:hover{background:var(--bg3) !important;color:var(--text) !important;}
#game .profile-tab.active{background:var(--bg3) !important;border-color:var(--gold) !important;color:var(--gold) !important;}

/* Shared by the Armory's primary navigation, Chat, and the player profile. */
:is(#game,.chat-box,.profile-modal) .armory-top-tab{
  position:relative;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#a9a895 !important;
}
:is(#game,.chat-box,.profile-modal) .armory-top-tab:hover{background:linear-gradient(180deg,transparent,rgba(175,132,38,.1)) !important;color:#e4d6a5 !important;}
:is(#game,.chat-box,.profile-modal) .armory-top-tab.active{background:radial-gradient(ellipse 90% 70% at 50% 100%,rgba(210,161,53,.22),transparent 70%) !important;color:#f0deb0 !important;}
.chat-box .armory-top-tab.active{background:linear-gradient(180deg,#3b2d15,#6b4e1d) !important;box-shadow:inset 0 -7px 12px rgba(255,215,119,.22),0 5px 14px -8px rgba(236,190,72,.65) !important;color:#f7f8fb !important;text-shadow:none;}

/* Armory Mounts uses the Marketplace item-frame system, including on the
   durability tokens displayed below the mount collection. */
#game .armory-mount-slot-grid .inv-slot{
  border-width:1px !important;
  border-style:solid !important;
  border-image:none !important;
  border-radius:1px !important;
  background-color:#07131e !important;
  background-image:linear-gradient(145deg,rgba(28,54,70,.92),rgba(5,13,22,.98)) !important;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.86),inset 0 0 0 4px rgba(203,222,235,.48),inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px rgba(0,0,0,.42) !important;
}
#game .armory-mount-slot-grid .inv-slot.filled:hover{
  outline:1px solid rgba(231,245,255,.68);
  outline-offset:2px;
  box-shadow:inset 0 0 0 3px rgba(3,10,17,.78),inset 0 0 0 4px rgba(235,247,255,.75),inset 0 1px 0 rgba(255,255,255,.55),0 0 14px rgba(175,222,255,.32) !important;
}

/* Untamed-mount guidance is intentionally prominent inside its conversion modal. */
.untamed-mount-hint{color:#fff !important;}

/* The Armory equipment rail matches the Cosmetics rail's label scale while
   keeping its representative gear artwork prominent. */
#game :is(.armory-equip-nav .troop-arch-btn,.armory-cosmetic-nav .zone-item){font-size:16.4px !important;}
#game .armory-equip-nav .troop-arch-icon,
#game .armory-cosmetic-tab-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:27px;
  flex:0 0 27px;
}
#game .armory-equip-nav .troop-arch-icon{font-size:27px;}
#game .armory-cosmetic-nav .zone-item{gap:8px;}

/* Talent Tree XP details use the game's compact panel treatment instead of a
   native browser tooltip. */
#talent-panel .talent-xp-target{position:relative;display:flex;align-items:center;gap:10px;flex:1;min-width:145px;cursor:default;}
#talent-panel .talent-xp-level{font-size:.78rem;color:var(--text3);white-space:nowrap;}
#talent-panel .talent-xp-bar{flex:1;min-width:80px;background:var(--bg3);border:1px solid rgba(116,147,168,.35);border-radius:999px;height:6px;overflow:hidden;}
#talent-panel .talent-xp-tooltip{position:absolute;top:calc(100% + 7px);right:0;z-index:2;padding:7px 10px;border:1px solid rgba(151,190,211,.7);border-radius:1px;background:linear-gradient(145deg,rgba(18,43,59,.98),rgba(5,16,27,.99));box-shadow:inset 0 0 0 1px rgba(214,237,250,.14),0 5px 14px rgba(0,0,0,.5);color:#fff;font-size:.75rem;font-weight:700;white-space:nowrap;pointer-events:none;}

/* Each Talent Tree branch keeps its own visual identity. */
#talent-panel .talent-tab{border-width:1px !important;border-style:solid !important;border-radius:1px !important;box-shadow:none !important;}
#talent-panel .talent-tab--warfare{border-color:#f0654a !important;color:#ffb6aa !important;background:rgba(240,101,74,.14) !important;}
#talent-panel .talent-tab--profession{border-color:#3ecf8e !important;color:#b5f5d2 !important;background:rgba(62,207,142,.14) !important;}
#talent-panel .talent-tab--ascension{border-color:#a55aff !important;color:#ddbfff !important;background:rgba(165,90,255,.14) !important;}
#talent-panel .talent-tab--warfare.active{border-color:#f0654a !important;color:#fff5f2 !important;background:linear-gradient(180deg,rgba(240,101,74,.68),rgba(103,35,32,.94)) !important;}
#talent-panel .talent-tab--profession.active{border-color:#3ecf8e !important;color:#effff8 !important;background:linear-gradient(180deg,rgba(62,207,142,.62),rgba(22,83,56,.94)) !important;}
#talent-panel .talent-tab--ascension.active{border-color:#a55aff !important;color:#fbf4ff !important;background:linear-gradient(180deg,rgba(165,90,255,.65),rgba(72,36,119,.94)) !important;}
#talent-panel .talent-tree-surface--warfare{border-color:rgba(240,101,74,.45) !important;background:radial-gradient(ellipse at 50% 0%,rgba(240,101,74,.2),var(--bg1) 70%) !important;}
#talent-panel .talent-tree-surface--profession{border-color:rgba(62,207,142,.45) !important;background:radial-gradient(ellipse at 50% 0%,rgba(62,207,142,.2),var(--bg1) 70%) !important;}
#talent-panel .talent-tree-surface--ascension{border-color:rgba(165,90,255,.5) !important;background:radial-gradient(ellipse at 50% 0%,rgba(165,90,255,.2),var(--bg1) 70%) !important;}

/* Available talent nodes inherit the active tree's accent rather than the
   shared blue button surface. Locked nodes retain their muted treatment. */
#talent-panel .talent-node--unlocked{
  border-color:var(--talent-node-accent) !important;
  background:var(--talent-node-fill) !important;
}
#talent-panel .talent-row-unlock-glow{position:absolute;left:0;right:0;pointer-events:none;}

/* Talent Tree uses a single square navy-and-metal frame with a muted stat-glyph
   texture; the glyphs are decorative and sit behind the interactive controls. */
#talent-panel{isolation:isolate;background:linear-gradient(145deg,#173547,#071722)!important;border:2px solid #6e7d87!important;border-radius:0!important;box-shadow:inset 0 0 0 1px rgba(211,223,230,.18),inset 0 0 28px rgba(104,144,166,.12),0 10px 32px rgba(0,0,0,.62)!important;}
#talent-panel::before{content:'✦  ◈  ✚  ◉  ⬟  ⚔  ✦  ◈  ✚  ◉';position:absolute;inset:80px 18px 18px;color:#b4c1c9;font-size:3.5rem;letter-spacing:1.1rem;line-height:2.4;opacity:.055;overflow:hidden;pointer-events:none;z-index:0;}
#talent-panel > *{position:relative;z-index:1;}
#talent-panel :is(.talent-summary-strip,.talent-detail-surface){background:linear-gradient(145deg,#132d3e,#081923)!important;border-color:#52626d!important;box-shadow:inset 0 0 0 1px rgba(192,207,216,.08)!important;}
#talent-panel .talent-tree-surface{background:linear-gradient(180deg,rgba(35,72,91,.42),rgba(7,23,34,.96))!important;border-color:#52626d!important;}
#talent-panel,#talent-panel *{border-radius:0!important;}
#talent-panel button{border-radius:4px!important;}
#talent-panel .talent-tab{border-radius:4px!important;}
#talent-panel [data-reset]{background:#4d5961!important;border-color:#87949c!important;color:#f0f4f5!important;}
#talent-panel :is(.talent-xp-level,.talent-row-req,.talent-row-threshold){color:#e7f0f4!important;}
#talent-panel .talent-tree-surface--warfare{background:linear-gradient(180deg,rgba(161,54,65,.56),rgba(38,10,16,.96))!important;}
#talent-panel .talent-tree-surface--profession{background:linear-gradient(180deg,rgba(46,132,93,.52),rgba(7,28,20,.96))!important;}
#talent-panel .talent-tree-surface--ascension{background:linear-gradient(180deg,rgba(109,63,163,.52),rgba(22,10,40,.96))!important;}

/* Gear Progression weapon cards use compact, themed RPG frames without
   changing the shared Gear Mastery card system. */
#gear-tab-content :is(.weapon-progression-card,.gear-progression-card){
  --weapon-accent:#31c8ff;
  position:relative;
  min-height:142px;
  padding:13px 12px 11px;
  overflow:hidden;
  clip-path:none;
  border:0 !important;
  border-radius:0 !important;
  background-image:var(--weapon-card-bg) !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  box-shadow:0 3px 10px rgba(0,0,0,.34) !important;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
#gear-tab-content :is(.weapon-progression-card,.gear-progression-card) > *{position:relative;z-index:1;}
#gear-tab-content :is(.weapon-progression-card,.gear-progression-card) .node-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 4px;font-size:48px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.58));}
#gear-tab-content :is(.weapon-progression-card,.gear-progression-card) .node-icon .item-ico{width:52px;height:52px;vertical-align:0;}
#gear-tab-content :is(.weapon-progression-card,.gear-progression-card) .node-name{color:#f5f5eb;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.8);}
#gear-tab-content :is(.weapon-progression-card,.gear-progression-card) .node-meta{color:#d6e0e5;font-size:12px;}
#gear-tab-content :is(.weapon-progression-card,.gear-progression-card) .node-progress{width:82%;align-self:center;height:7px;margin:8px auto 0;border:1px solid rgba(181,209,223,.28);background:rgba(3,11,19,.72);box-shadow:inset 0 1px 3px rgba(0,0,0,.75);}
#gear-tab-content :is(.weapon-progression-card,.gear-progression-card) .node-progress-bar{background:linear-gradient(90deg,var(--weapon-accent),color-mix(in srgb,var(--weapon-accent) 58%,#fff));box-shadow:0 0 7px color-mix(in srgb,var(--weapon-accent) 70%,transparent);}
#gear-tab-content :is(.weapon-progression-card,.gear-progression-card):hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.07);box-shadow:inset 0 0 20px rgba(0,0,0,.5),0 5px 15px rgba(0,0,0,.38),0 0 13px color-mix(in srgb,var(--weapon-accent) 28%,transparent) !important;}

/* XP Boost retains its exact behavior in a compact, accessible RPG control. */
#gear-tab-content .xp-boost-row{
  justify-content:space-between;
  min-height:44px;
  margin-bottom:10px;
  padding:7px 12px;
  border:1px solid rgba(103,185,222,.76) !important;
  border-radius:0 !important;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  background:linear-gradient(110deg,rgba(11,53,76,.92),rgba(5,17,29,.97)) !important;
  box-shadow:inset 0 0 0 1px rgba(179,226,249,.18),inset 0 0 18px rgba(21,137,196,.12),0 3px 9px rgba(0,0,0,.32) !important;
}
#gear-tab-content .xp-boost-row{position:relative;justify-content:center;min-height:48px;}
#gear-tab-content .xp-boost-toggle{position:absolute;left:12px;gap:7px;}
#gear-tab-content .xp-boost-copy{display:flex;align-items:center;gap:10px;min-width:0;}
#gear-tab-content .xp-boost-icon{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;color:#63d8ff;font-size:19px;filter:drop-shadow(0 0 5px rgba(69,201,255,.58));}
#gear-tab-content .xp-boost-label{font-size:14px;white-space:nowrap;color:#f3f8fb;}
#gear-tab-content .xp-boost-desc{font-size:12px;white-space:nowrap;color:#c4d4e0;}
#gear-tab-content .xp-boost-switch{
  position:relative;width:58px;height:28px;padding:0;
  border:1px solid rgba(142,170,191,.65) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#2a3541,#101923) !important;
  color:#aebbc5 !important;
  font-size:12px;font-weight:800;letter-spacing:.05em;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.35) !important;
}
#gear-tab-content .xp-boost-switch-knob{position:absolute;top:3px;left:4px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#93a3ae,#3f4d58 68%);border:1px solid #9aa8b2;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);transition:left .22s cubic-bezier(.3,.8,.35,1),background .16s ease,border-color .16s ease,box-shadow .16s ease;}
#gear-tab-content .xp-boost-switch.on{border-color:#51ddff !important;background:linear-gradient(180deg,#087da8,#07354d) !important;color:#e9fbff !important;box-shadow:inset 0 1px 4px rgba(0,0,0,.6),0 0 11px rgba(49,203,255,.48) !important;}
#gear-tab-content .xp-boost-switch.on .xp-boost-switch-knob{left:31px;background:radial-gradient(circle at 35% 30%,#e4fbff,#29c9ff 43%,#12659a 72%);border-color:#c4f7ff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.36),0 0 8px rgba(69,213,255,.95);}
#gear-tab-content .xp-boost-switch-state{min-width:24px;font-size:12px;font-weight:800;letter-spacing:.05em;color:#aebbc5;}
#gear-tab-content .xp-boost-switch.on + .xp-boost-switch-state{color:#e9fbff;}
#gear-tab-content .xp-boost-switch:focus-visible{outline:2px solid #d5f7ff;outline-offset:3px;}
#gear-tab-content .xp-boost-switch:disabled{opacity:.45;cursor:not-allowed;}
@media (max-width:640px){#gear-tab-content .xp-boost-row{align-items:flex-start;justify-content:flex-start;gap:8px;padding-left:12px;}#gear-tab-content .xp-boost-toggle{position:static;}#gear-tab-content .xp-boost-copy{flex-wrap:wrap;row-gap:2px;}#gear-tab-content .xp-boost-desc{white-space:normal;flex-basis:calc(100% - 34px);}}

/* Saved health above the existing activity panel, using the combat HP bar. */
.top-vitals-activity{display:flex;flex-direction:column;gap:6px;min-width:250px;flex:1;max-width:560px;border:1px solid #66572f;border-radius:3px;background:linear-gradient(180deg,#101b28,#0a151f);padding:6px;box-shadow:inset 0 0 0 1px rgba(235,203,111,.05);}
.top-health-row{display:flex;align-items:center;gap:8px;padding:4px 7px;border:1px solid #8d7537;border-radius:3px;background:linear-gradient(180deg,#152332,#0d1925);box-shadow:inset 0 0 0 1px rgba(236,205,116,.06);}
.top-health-label{display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;}
.top-health-bar{flex:1;min-width:45px;height:13px;border:1px solid #5f6c79!important;border-radius:3px!important;background:#070d13!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.75)!important;overflow:hidden;}
.top-health-bar .btl-bar-fill{border-radius:2px!important;box-shadow:inset 0 1px rgba(255,255,255,.22),0 0 5px rgba(52,211,153,.18);}
.top-health-number{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.top-heal-btn{display:flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:5px 12px;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;}
.top-heal-cross{position:relative;width:14px;height:14px;flex:0 0 14px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));}
.top-heal-cross::before,.top-heal-cross::after{content:'';position:absolute;left:50%;top:50%;border-radius:1px;background:#f04c55;transform:translate(-50%,-50%);}
.top-heal-cross::before{width:14px;height:5px;}
.top-heal-cross::after{width:5px;height:14px;}
.top-bar .top-health-row .top-heal-btn,.player-heal-modal .player-heal-choice{border:1px solid #4f9c78 !important;border-radius:3px!important;background:linear-gradient(180deg,#235d49,#102f27) !important;color:#e4ffed !important;box-shadow:inset 0 0 0 1px rgba(179,255,205,.07),0 2px 8px rgba(0,0,0,.3);}
.top-bar .top-health-row .top-heal-btn:hover:not(:disabled),.player-heal-modal .player-heal-choice:hover:not(:disabled){border-color:#94edb5 !important;background:linear-gradient(180deg,#368964,#194c39) !important;color:#fff !important;}
.top-heal-btn:focus-visible,.player-heal-choice:focus-visible{outline:2px solid #94edb5;outline-offset:3px;}
.top-bar .top-health-row .top-heal-btn:disabled,.player-heal-modal .player-heal-choice:disabled{background:linear-gradient(180deg,#343b43,#242a31) !important;border-color:#59616b !important;color:#949da8 !important;box-shadow:none;opacity:1;}
.player-heal-modal{width:430px;max-width:95vw;background:radial-gradient(circle at 50% 18%,rgba(48,176,120,.09),transparent 46%),var(--bg2);}
.player-heal-bar{margin:22px 0;padding:9px 10px;border-color:rgba(87,203,145,.35);background:rgba(8,30,31,.7);box-shadow:inset 0 0 14px rgba(33,179,111,.07);}
.player-heal-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.player-heal-option{--heal-accent:#57d997;--heal-dark:#153f31;display:flex;flex-direction:column;gap:8px;min-width:0;color:#9eb9ad;font-size:12px;text-align:center;}
.player-heal-option:nth-child(2){--heal-accent:#43e0a9;--heal-dark:#10503d;}
.player-heal-option:nth-child(3){--heal-accent:#79f2b0;--heal-dark:#0b6243;}
.player-heal-choice{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:104px;padding:13px 6px 11px;overflow:hidden;border-color:var(--heal-accent) !important;background:linear-gradient(160deg,color-mix(in srgb,var(--heal-accent) 42%,#17332a),var(--heal-dark) 72%) !important;color:#edfff5 !important;box-shadow:inset 0 1px rgba(222,255,237,.3),inset 0 -12px 24px rgba(0,0,0,.14),0 3px 10px rgba(0,0,0,.35) !important;cursor:pointer;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;}
.player-heal-choice::before{content:'+';display:grid;place-items:center;width:28px;height:28px;border:1px solid color-mix(in srgb,var(--heal-accent) 72%,white);border-radius:50%;background:rgba(4,31,23,.42);color:#eafff3;font-size:22px;font-weight:800;line-height:1;box-shadow:inset 0 0 9px color-mix(in srgb,var(--heal-accent) 32%,transparent),0 0 10px color-mix(in srgb,var(--heal-accent) 20%,transparent);}
.player-heal-choice::after{content:'';position:absolute;z-index:-1;inset:auto -22px -42px;height:76px;border-radius:50%;background:color-mix(in srgb,var(--heal-accent) 20%,transparent);filter:blur(10px);}
.player-heal-modal .player-heal-choice:hover:not(:disabled){border-color:#dcffeb !important;background:linear-gradient(160deg,color-mix(in srgb,var(--heal-accent) 57%,#17332a),var(--heal-dark) 70%) !important;box-shadow:inset 0 1px rgba(236,255,245,.38),0 0 15px color-mix(in srgb,var(--heal-accent) 32%,transparent),0 5px 12px rgba(0,0,0,.4) !important;filter:brightness(1.08);transform:translateY(-2px);}
.player-heal-modal .player-heal-choice:disabled{border-color:#59616b !important;background:linear-gradient(160deg,#343b43,#242a31) !important;color:#8e979f !important;box-shadow:inset 0 1px rgba(255,255,255,.05),inset 0 -12px 20px rgba(0,0,0,.12) !important;filter:saturate(0);opacity:1;cursor:not-allowed;}
.player-heal-modal .player-heal-choice:disabled::before{border-color:#626b73;background:#2b3238;color:#8e979f;box-shadow:none;}
.player-heal-option:has(.player-heal-choice:disabled){color:#778089;}
.player-heal-target{font-size:15px;font-weight:800;line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.55);}
.player-heal-price{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}
.cosmetics-disabled{opacity:.5;cursor:not-allowed !important;filter:saturate(.25);}
.top-activity-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.top-activity-row .gm-topbar-wide{flex:1;min-width:0;padding:5px 7px;border:1px solid #3aaee8;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(185,241,255,.07),0 0 9px rgba(58,174,232,.14);}
@media(max-width:900px){.top-vitals-activity{order:3;flex:1 1 100%;max-width:none;min-width:0;}}

/* Real transparent blur for Profession screens only. */
#panel-root-react .gm-card,
#panel-root-react .gm-node-art-wrap,
#panel-root-react .gm-node-stats,
#panel-root-react .gm-legend-row{
  background-color:rgba(12,14,18,.14);
  background-image:none;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

/* Production-profession cards use the same glass while a profession is the
   selected left-navigation activity. Other major tabs are not included. */
#game:has(#prof-list .prof-item.selected) #panel-root-react :is(
  [class$="-card"],[class*="-card "],
  [class$="-panel"],[class*="-panel "],
  .stats-list
){
  background-color:rgba(12,14,18,.14) !important;
  background-image:none !important;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.top-activity-row .gm-topbar-wide{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 18px rgba(58,174,232,.08),0 0 9px rgba(58,174,232,.14);}
#panel-root-react .gm-card-active{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px var(--green),0 0 18px rgba(62,207,142,.12);}

/* Guild Buildings and Guild Conquest use the same real transparent blur as
   the profession panels. Important backgrounds override the legacy inline
   building-card fill without changing any status-colored borders. */
#panel-root-react :is(
  .guild-building-card,
  .terr-box,.terr-map,.terr-world,.terr-tokens,.terr-einfo-card,.terr-captured
){
  background-color:rgba(12,14,18,.14) !important;
  background-image:none !important;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}