:root {
  color-scheme: dark;
  --ink: #0b100f;
  --panel: #111816;
  --panel-2: #18211e;
  --line: rgba(218, 198, 160, .15);
  --muted: #89958e;
  --paper: #eee6d7;
  --gold: #d7a255;
  --gold-bright: #f1c777;
  --green: #588d68;
  --red: #ad4e42;
  --blue: #4979a2;
  --tile: 48px;
  --interface-scale: 1;
  --interface-width: 100vw;
  --interface-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: var(--ink);
  color: var(--paper);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
button, input, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

body {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% -20%, rgba(104, 137, 108, .2), transparent 48%),
    #0a0e0d;
}
body.scaled-interface {
  width: var(--interface-width);
  height: var(--interface-height);
  transform: scale(var(--interface-scale));
  transform-origin: 0 0;
}

@supports (height: 100dvh) {
  html, body:not(.scaled-interface), body:not(.scaled-interface) .game-shell { height: 100dvh; }
}

.game-shell { width: 100%; min-width: 0; height: 100%; display: grid; grid-template-rows: 64px 1fr; }

.topbar {
  z-index: 10;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 18px;
  background: rgba(10, 15, 14, .96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.brand-lockup { min-width: 0; display: flex; align-items: center; gap: 11px; overflow: hidden; }
.mini-sigil {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(230, 180, 100, .65); border-radius: 11px 4px 11px 4px;
  color: var(--gold-bright); font: 700 12px Cinzel, serif; letter-spacing: -1px;
}
.brand-lockup > div:last-child { display: grid; }
.brand-lockup strong { font: 700 13px Cinzel, Georgia, serif; letter-spacing: .08em; }
.brand-lockup span { color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .26em; }
.brand-music-toggle {
  position: relative; width: 38px; height: 32px; padding: 0; flex: 0 0 auto;
  border: 1px solid #35423b; border-radius: 6px; background: rgba(255,255,255,.025); color: #7f8c84; cursor: pointer;
}
.brand-music-toggle:hover { color: var(--paper); border-color: #59665e; background: rgba(255,255,255,.05); }
.brand-music-toggle.active { color: var(--gold-bright); border-color: #6d5838; background: rgba(215, 162, 85, .08); }
.brand-music-toggle .music-note { position: absolute; left: 7px; top: 4px; font-size: 17px; line-height: 21px; }
.brand-music-toggle .music-state-icon {
  position: absolute; right: 4px; bottom: 4px; min-width: 13px; height: 13px; display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%; background: #101713; font-size: 6px; line-height: 1;
}
.brand-music-toggle .music-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.zone-heading { display: grid; text-align: center; }
.zone-heading span { color: #7f8e85; font-size: 8px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.zone-heading strong { margin-top: 2px; font: 600 17px Cinzel, Georgia, serif; }

.top-actions { min-width: 0; justify-self: end; display: flex; align-items: center; gap: 8px; }
.text-button, .icon-button {
  border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.text-button { padding: 8px 10px; color: #aab4ad; font-size: 11px; font-weight: 700; text-decoration: none; }
.text-button:hover, .icon-button:hover { color: var(--paper); background: rgba(255,255,255,.05); border-color: var(--line); }
.icon-button { width: 34px; height: 34px; color: #88938d; font-size: 16px; }
.social-toggle { position: relative; display: none; place-items: center; padding: 7px; }
.social-toggle-label { display: none; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.social-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social-toggle i { position: absolute; top: 4px; right: 3px; width: 7px; height: 7px; display: none; border: 1px solid #101713; border-radius: 50%; background: #e6ae59; box-shadow: 0 0 0 3px rgba(230,174,89,.14); }
.social-toggle.active { color: #efc777; border-color: rgba(215,162,85,.3); background: rgba(215,162,85,.09); }
.social-toggle.attention { color: #efca82; }
.social-toggle.attention i { display: block; animation: nearby-attention 1.2s ease-in-out infinite; }
.social-toggle.chat-unread { animation: chat-unread-attention 1.2s ease-in-out infinite; }
.social-toggle.chat-unread i { background: #d7594f; box-shadow: 0 0 0 3px rgba(215,89,79,.18), 0 0 10px rgba(215,89,79,.5); }
body:not(.mobile-mode) .social-toggle { width: auto; min-width: 66px; display: grid; grid-template-columns: 18px auto; gap: 3px; padding: 7px 9px; }
body:not(.mobile-mode) .social-toggle .social-key-hint { margin-right: 1px; }
body:not(.mobile-mode) .social-toggle .social-toggle-label { display: inline; }
body:not(.mobile-mode) .social-toggle svg { display: none; }
body.mobile-mode .social-toggle .social-key-hint,
body.mobile-mode .social-toggle .social-toggle-label { display: none; }
@keyframes chat-unread-attention {
  50% { color: #ffe2a4; border-color: rgba(230,174,89,.68); background: rgba(185,123,50,.24); box-shadow: 0 0 14px rgba(215,162,85,.22); }
}
.loot-toggle { position: relative; display: inline-flex; align-items: center; gap: 5px; user-select: none; -webkit-user-select: none; }
.loot-toggle.manual { color: #d3b273; }
.loot-toggle.attention { border-color: rgba(224,177,95,.38); background: rgba(154,108,47,.12); color: #f1c878; }
.loot-count { min-width: 16px; height: 16px; display: inline-grid; place-items: center; padding: 0 4px; border: 1px solid #171d19; border-radius: 9px; background: #b47730; color: #fff0cf; font-size: 8px; line-height: 1; box-shadow: 0 0 0 2px rgba(180,119,48,.16); }
.key-hint { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 3px; border: 1px solid #39433e; border-radius: 4px; color: #75827a; font-size: 9px; }
.guide-link { display: inline-flex; align-items: center; }
.guide-mark { margin-right: 5px; color: #9d7a45; font-size: 12px; }

.play-area { width: 100%; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 292px; }
.world-panel { position: relative; min-width: 0; overflow: hidden; background: #26372d; }
#world { width: 100%; height: 100%; display: block; outline: none; cursor: crosshair; }
.world-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 100px rgba(3,8,5,.42); }
.idle-overlay {
  position: absolute; z-index: 34; inset: 0; display: grid; place-content: center; justify-items: center;
  padding: 28px; background: rgba(5,10,8,.72); backdrop-filter: blur(5px); text-align: center;
}
.idle-overlay span { color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.idle-overlay strong { margin-top: 8px; color: var(--paper); font: 600 25px Cinzel, Georgia, serif; }
.idle-overlay p { max-width: 430px; margin: 9px 0 0; color: #a3afa7; font-size: 11px; line-height: 1.6; }

.social-panel {
  z-index: 5; min-height: 0; display: grid; grid-template-rows: 48px 1fr;
  background: rgba(13, 19, 17, .98); border-left: 1px solid var(--line);
}
.social-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 0 12px; border-bottom: 1px solid var(--line); }
.social-tabs button { position: relative; border: 0; background: none; color: #65716a; font-size: 9px; font-weight: 800; letter-spacing: .14em; cursor: pointer; }
.social-tabs button.active { color: var(--gold-bright); }
.social-tabs button.active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--gold); }
.social-tabs span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 2px; border-radius: 9px; background: #26322d; font-size: 8px; }
.social-tabs button.attention { color: #efca82; animation: nearby-attention 1.2s ease-in-out infinite; }
.social-tabs button.attention span { background: #8b6230; color: #fff3d7; box-shadow: 0 0 0 3px rgba(221,174,91,.13); }
.social-close { display: none; }
.social-scrim { display: none; }
@keyframes nearby-attention { 50% { filter: brightness(1.35); text-shadow: 0 0 8px rgba(239,202,130,.75); } }
.social-view { min-height: 0; }
#chat-view { display: grid; grid-template-rows: 1fr auto auto; }
.chat-log { min-height: 0; overflow-y: auto; padding: 15px 15px 8px; scrollbar-width: thin; scrollbar-color: #33423a transparent; }
.chat-line { margin: 0 0 10px; color: #98a39c; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-line b { margin-right: 4px; color: #d2d9d4; font-weight: 700; }
.chat-line.system { color: #c29656; font-style: italic; }
.chat-line.quest { padding: 8px 9px; border: 1px solid rgba(197,163,87,.25); border-left: 3px solid #78ad7e; border-radius: 4px; background: rgba(75,100,65,.13); color: #cbd6cd; font-style: normal; }
.chat-line.quest b { display: block; margin-bottom: 4px; color: #f0cf85; font: 700 10px Cinzel, serif; }
.quest-chat-link { display: block; margin-top: 6px; padding: 3px 6px; border: 1px solid rgba(127,175,132,.48); border-radius: 3px; background: rgba(13,25,17,.65); color: #9bd2a0; font-size: 8px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.quest-chat-link:hover { border-color: var(--gold); color: var(--gold-bright); }
.chat-line.party { padding-left: 6px; border-left: 2px solid #55c98d; background: rgba(50,130,88,.08); }
.chat-line.party, .chat-line.party b { color: #79e0ad; }
.chat-line.whisper { padding-left: 6px; border-left: 2px solid #b879df; background: rgba(122,67,151,.1); }
.chat-line.whisper, .chat-line.whisper b { color: #ddaef5; }
.chat-line.world, .chat-line.world b { color: #82c5ee; }
.chat-line.say, .chat-line.say b { color: #f0d39b; }
.chat-line.combat { color: #bd7b6f; font-size: 10px; }
.chat-line.loot { padding: 7px 8px; border: 1px solid rgba(215,162,85,.2); border-left: 3px solid #d7a255; border-radius: 4px; background: rgba(125,84,31,.12); color: #e5c98f; font-size: 10px; }
.chat-line.loot b { display: block; margin-bottom: 4px; color: #f0d6a0; }
.loot-item-link { display: inline; margin: 0 5px 2px 0; padding: 2px 5px; border: 1px solid rgba(121,151,132,.38); border-radius: 3px; background: rgba(10,17,13,.74); color: #d7ddd8; font-size: 9px; cursor: pointer; }
.loot-item-link:hover { border-color: var(--gold); color: var(--gold-bright); }
.loot-item-link.uncommon { border-color: #4c8a5f; color: #7fd08f; }
.loot-item-link.rare { border-color: #4e7eae; color: #86bced; }
.loot-item-link:disabled { opacity: .76; cursor: default; }
.chat-attachment-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; width: 100%; margin-top: 6px; padding: 7px 8px; border: 1px solid #46554d; border-radius: 4px; background: rgba(10,17,13,.78); color: #bdc7c0; text-align: left; cursor: pointer; }
.chat-attachment-link:hover { border-color: var(--gold); color: var(--gold-bright); }
.chat-attachment-link > span { color: #c79b59; font-size: 7px; font-weight: 900; letter-spacing: .11em; }
.chat-attachment-link > b { min-width: 0; overflow: hidden; margin: 0; color: inherit; font: 600 9px Cinzel, Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-link > small { color: #748078; font-size: 7px; white-space: nowrap; }
.chat-attachment-link.uncommon { border-color: rgba(76,138,95,.7); }
.chat-attachment-link.rare { border-color: rgba(78,126,174,.75); }
.chat-attachment-preview { display: grid; grid-template-columns: minmax(0,1fr) 27px; gap: 5px; margin: 0 10px -5px; padding: 5px; border: 1px solid rgba(194,149,79,.38); border-radius: 5px; background: rgba(69,50,27,.3); }
.chat-attachment-preview > button:first-child { min-width: 0; padding: 4px 6px; border: 0; background: transparent; color: #d0d8d2; text-align: left; cursor: pointer; }
.chat-attachment-preview span, .chat-attachment-preview b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-preview span { color: #b98b4a; font-size: 6px; font-weight: 900; letter-spacing: .13em; }
.chat-attachment-preview b { margin-top: 2px; font: 600 9px Cinzel, Georgia, serif; }
.chat-attachment-preview .chat-attachment-remove { width: 27px; height: 27px; padding: 0; border: 1px solid #4a554f; border-radius: 4px; background: rgba(9,14,12,.7); color: #9aa69f; font-size: 15px; cursor: pointer; }
.chat-form { display: flex; align-items: center; gap: 7px; margin: 10px; padding: 8px 10px; border: 1px solid #2d3833; border-radius: 5px; background: #0b100f; }
.chat-form span { color: var(--gold); }
.chat-form select { width: 58px; flex: 0 0 auto; padding: 3px 2px; border: 1px solid #35443c; border-radius: 3px; outline: 0; background: #17211c; color: #98aca1; font-size: 7px; font-weight: 800; }
.chat-form input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--paper); font-size: 11px; }
.chat-form input::placeholder { color: #536059; }
.chat-form button { width: 24px; height: 24px; flex: 0 0 auto; border: 0; border-radius: 4px; background: #2e3a34; color: var(--gold-bright); font-size: 11px; cursor: pointer; }
.chat-form button:hover { background: #46554d; }

#players-view { padding: 14px; overflow-y: auto; }
.party-card { padding: 13px; border: 1px solid #2b3832; border-radius: 6px; background: #131c18; }
.party-card span, .section-label span { color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.party-card p { margin: 7px 0 0; color: #7e8a83; font-size: 11px; line-height: 1.4; }
#party-leave { margin-top: 10px; min-height: 36px; padding: 7px 10px; border: 1px solid #46544d; border-radius: 4px; background: transparent; color: #c6b68f; font-size: 10px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.loot-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; color: #7e8a83; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.loot-mode-row select { border: 1px solid #35443c; border-radius: 3px; padding: 4px; background: #0d1512; color: #c7d0cb; font-size: 8px; }
.party-invite-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; margin-top: 10px; padding: 8px; border: 1px solid #6e5b3c; border-radius: 5px; background: #1b211b; color: #d4bc88; font-size: 9px; }
.party-invite-actions > div { display: flex; gap: 4px; }
.party-invite-actions button { padding: 6px 9px; border: 1px solid #977345; border-radius: 4px; background: #5c452c; color: #f0dab0; font-size: 8px; font-weight: 800; cursor: pointer; }
.party-invite-actions button.decline { border-color: #46544d; background: transparent; color: #929f97; }
.party-invite-actions .invite-waiting { justify-self: end; color: #8e9b93; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.trade-card.service-card { width: min(720px, calc(100vw - 32px)); }
.service-list { max-height: min(560px, calc(var(--interface-height) - 210px)); overflow: auto; scrollbar-width: thin; scrollbar-color: #4c5d54 transparent; }
.players-list { margin-top: 14px; }
.online-player { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.online-player .player-glyph { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #28362f; color: #d9b26e; font: 700 11px Cinzel, serif; }
.online-player .player-glyph svg, .party-member-frame .party-glyph svg { width: 25px; height: 25px; }
.online-player b { display: block; font-size: 11px; }
.online-player small { color: #69766f; font-size: 9px; }
.online-player button { padding: 4px 6px; border: 1px solid #3b4c43; border-radius: 4px; background: transparent; color: #9aa79f; font-size: 8px; cursor: pointer; }
.online-actions { display: flex; gap: 4px; }
.online-player button.trade-action { border-color: #735e3c; color: #d2b679; }
.prototype-note { margin-top: 18px; color: #59655e; font-size: 9px; line-height: 1.5; }

.target-card { position: absolute; top: 19px; left: 50%; width: 220px; padding: 10px 13px; transform: translateX(-50%); border: 1px solid rgba(229, 195, 137, .28); border-radius: 5px; background: rgba(8,13,11,.88); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.target-card > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.target-card span { color: #9e7960; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.target-card strong { font: 600 12px Cinzel, serif; }
.meter { height: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.45); border-radius: 2px; background: rgba(0,0,0,.58); box-shadow: inset 0 1px 3px rgba(0,0,0,.45); }
.meter i { display: block; width: 100%; height: 100%; transition: width .22s ease; }
.meter.enemy i { background: linear-gradient(90deg, #8d382f, #c65a4c); }

.interaction-prompt { position: absolute; left: 50%; bottom: 132px; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); padding: 8px 12px; border: 1px solid rgba(230,204,158,.24); border-radius: 5px; background: rgba(8,13,11,.82); font-size: 10px; font-weight: 700; }
.interaction-touch-hint { display: none; }
.interaction-touch-hint small { font-size: 6px; font-weight: 900; letter-spacing: .08em; }
.interaction-touch-hint svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
kbd { padding: 3px 6px; border: 1px solid #59665f; border-bottom-width: 2px; border-radius: 4px; color: var(--gold-bright); background: #1c2722; font: 700 10px Inter, sans-serif; }

.zone-toast { position: absolute; top: 20%; left: 50%; display: grid; gap: 5px; text-align: center; transform: translateX(-50%); text-shadow: 0 3px 8px #000; animation: zone-in 2.8s both; }
.zone-toast span { color: var(--gold-bright); font-size: 9px; font-weight: 800; letter-spacing: .28em; }
.zone-toast strong { font: 700 27px Cinzel, serif; letter-spacing: .04em; }
@keyframes zone-in { 0% { opacity: 0; transform: translate(-50%, 8px); } 20%, 72% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

.toast-stack { position: absolute; z-index: 140; bottom: 142px; left: 50%; width: min(340px, calc(100% - 30px)); max-height: min(36vh, 250px); display: grid; gap: 7px; overflow: hidden; transform: translateX(-50%); pointer-events: none; }
.toast { padding: 11px 13px; border: 1px solid rgba(220,178,103,.24); border-left: 3px solid rgba(215,162,85,.86); border-radius: 5px; background: rgba(9,15,12,.72); color: #d0d8d2; font-size: 10px; text-shadow: 0 1px 2px #000; box-shadow: 0 10px 26px rgba(0,0,0,.34); backdrop-filter: blur(3px); animation: toast-in .25s ease; }
.toast.important { border-color: rgba(194,124,225,.55); border-left-color: #c77ee7; background: rgba(31,20,38,.8); }
.toast.quest { border-color: rgba(143,180,118,.52); border-left-color: #86b37a; background: rgba(18,31,21,.86); }
.toast.actionable { pointer-events: auto; }
.toast b { display: block; margin-bottom: 3px; color: var(--paper); font-size: 11px; }
.toast-action { margin-top: 7px; padding: 4px 7px; border: 1px solid rgba(147,190,132,.52); border-radius: 3px; background: rgba(5,11,7,.54); color: #a9d89d; font-size: 8px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.toast-actions { display: flex; gap: 6px; }
.toast-action.secondary { border-color: rgba(139,151,144,.4); color: #9ba7a0; }
.toast-action:hover, .toast-action:focus-visible { border-color: var(--gold-bright); color: var(--gold-bright); outline: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.toast.repeated { animation: toast-repeat .22s ease; }
@keyframes toast-repeat { 50% { border-left-color: var(--gold-bright); filter: brightness(1.24); transform: scale(1.015); } }

.party-hud { position: absolute; z-index: 4; right: 100px; bottom: 121px; display: flex; gap: 6px; }
.party-member-frame { width: 216px; display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px; border: 1px solid rgba(210,186,137,.25); border-radius: 5px; background: rgba(9,14,12,.9); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.party-member-main { min-width: 0; display: contents; border: 0; padding: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.party-member-info { min-width: 0; overflow: hidden; }
.party-member-frame:hover, .party-member-frame.selected { border-color: var(--gold); }
.party-member-frame.low-health { border-color: rgba(207,88,72,.74); box-shadow: 0 0 0 1px rgba(207,88,72,.12), 0 8px 18px rgba(0,0,0,.25); }
.party-member-frame.critical-health { animation: party-health-warning 1.35s ease-in-out infinite; }
.party-member-frame.off-zone { opacity: .58; }
.party-member-frame .party-glyph { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #26372f; color: #e4bb72; font: 700 10px Cinzel, Georgia, serif; }
.party-member-frame b { display: block; overflow: hidden; color: #d8dfda; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.party-member-frame small { color: #69776f; font-size: 7px; }
.party-vitals { display: grid; gap: 3px; margin-top: 4px; }
.party-vital { display: grid; grid-template-columns: 17px minmax(0,1fr) 48px; gap: 4px; align-items: center; }
.party-vital > em { color: #77847c; font-size: 6px; font-style: normal; font-weight: 900; }
.party-vital > span { height: 4px; overflow: hidden; border-radius: 2px; background: #080b0a; }
.party-vital > span i { display: block; height: 100%; }
.party-health i { background: linear-gradient(90deg, #8f3f38, #b45a4f); }
.party-resource i { background: linear-gradient(90deg, #325d7d, var(--party-resource-color, #4c88b3)); }
.party-vital > strong { color: #9aa69f; font-size: 6px; font-weight: 700; text-align: right; white-space: nowrap; }
.party-member-frame.off-zone .party-vitals { display: none; }
@keyframes party-health-warning { 50% { border-color: #e07161; filter: brightness(1.12); } }
.party-last-chat { grid-column: 1 / -1; overflow: hidden; margin: 1px 0 0; padding-top: 5px; border-top: 1px solid rgba(117,216,169,.18); color: #8fdcb5; font-size: 7px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.party-member-actions { display: grid; gap: 3px; }
.party-member-actions button { width: 25px; height: 21px; padding: 0; border: 1px solid #435149; border-radius: 3px; background: #121b17; color: #9eaaa3; font-size: 8px; cursor: pointer; }
.party-member-actions button:hover, .party-member-actions button.active { border-color: #a77e44; color: #edca88; }
.party-member-actions button:disabled { opacity: .35; cursor: default; }

.status-dock {
  position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px; min-height: 94px;
  display: grid; grid-template-columns: 64px minmax(170px, 1fr) auto auto 88px; gap: 10px; align-items: center;
  padding: 12px 14px; border: 1px solid rgba(226, 198, 146, .22); border-radius: 7px;
  background: linear-gradient(90deg, rgba(10,15,13,.96), rgba(18,26,22,.94));
  box-shadow: 0 15px 40px rgba(0,0,0,.4);
}
.status-dock.picker-open { z-index: 8; }
.portrait { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid #8b6b3d; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #4d6656, #1b2922 68%); color: #ecd09a; font: 700 22px Cinzel, serif; box-shadow: 0 0 0 3px #111a16; }
.portrait > span { width: 43px; height: 43px; display: grid; place-items: center; }
.portrait svg { width: 43px; height: 43px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.portrait i { position: absolute; right: -3px; bottom: -2px; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #9a7948; border-radius: 50%; background: #171e1b; color: #f0c775; font: normal 800 9px Inter, sans-serif; }
.identity { min-height: 22px; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.identity strong { font: 600 13px Cinzel, serif; }
.identity span { color: #8b998f; font-size: 9px; text-transform: uppercase; }
.status-effects { min-width: 0; display: flex; gap: 3px; margin-left: auto; }
.status-effect { position: relative; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(104,174,132,.52); border-radius: 5px; background: rgba(31,78,50,.58); color: #aee0bb; font-size: 11px; font-weight: 900; cursor: help; animation: status-pulse 1.3s ease-in-out infinite; }
.status-effect.harmful { border-color: rgba(205,103,91,.65); background: rgba(96,37,34,.65); color: #f2a29a; }
.status-effect time { position: absolute; right: 1px; bottom: -1px; color: #f4ead6; font: 700 6px Inter, sans-serif; text-shadow: 0 1px 2px #000; }
@keyframes status-pulse { 50% { filter: brightness(1.45); box-shadow: 0 0 9px currentColor; } }
.meter-row { display: grid; grid-template-columns: 20px minmax(70px, 1fr) 61px; align-items: center; gap: 5px; margin: 3px 0; }
.meter-row > span { color: #6f7b74; font-size: 7px; font-weight: 800; }
.meter-row > b { color: #859188; text-align: right; font-size: 8px; font-weight: 600; }
.meter.health i { background: linear-gradient(90deg, #814037, #bd5748); }
.meter.resource i { background: linear-gradient(90deg, #325d7d, #4c88b3); }
.meter.xp { height: 4px; }
.meter.xp i { background: linear-gradient(90deg, #9a6c32, #ddb25f); }
.xp-row { margin-top: 5px; }

.ability-wrap { display: grid; gap: 4px; justify-items: center; }
.ability-bar { display: flex; gap: 6px; }
.action-configure { padding: 3px 9px; border: 1px solid #4d574f; border-radius: 4px; background: rgba(11,17,14,.72); color: #8e9a92; font-size: 7px; font-weight: 800; letter-spacing: .11em; cursor: pointer; }
.action-configure:hover, .action-configure[aria-expanded="true"] { border-color: #a07b46; color: var(--gold-bright); }
.ability {
  position: relative; width: 50px; height: 50px; display: grid; place-items: center;
  border: 1px solid #65543c; border-radius: 5px; background: linear-gradient(145deg, #34483d, #18231e); cursor: pointer; overflow: hidden;
}
.ability:hover { border-color: var(--gold-bright); filter: brightness(1.12); }
.ability .glyph { width: 33px; height: 33px; display: grid; place-items: center; color: #e7c17d; }
.ability .glyph svg { width: 30px; height: 30px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0,0,0,.65)); }
.ability.configurable-action { border-color: #79643f; background: linear-gradient(145deg, #35352f, #1b2025); }
.ability.configurable-action.unset { border-style: dashed; opacity: .78; }
.ability kbd { position: absolute; left: 2px; top: 2px; padding: 1px 3px; border: 0; background: rgba(0,0,0,.55); color: #c5b99f; font-size: 7px; }
.ability small { position: absolute; right: 3px; bottom: 2px; color: #c5d7cd; font-size: 7px; }
.ability .cooldown { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4,7,6,.72); color: #fff; font-size: 11px; font-weight: 800; }
.bandolier-wrap { display: grid; align-self: stretch; align-content: center; padding-left: 10px; border-left: 1px solid var(--line); }
.bandolier-wrap > span { margin-bottom: 5px; color: #68756e; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.bandolier { display: flex; gap: 4px; }
.quick-slot { position: relative; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #4a493b; border-radius: 5px; background: linear-gradient(145deg, #292f28, #141a17); cursor: pointer; }
.quick-slot:hover { border-color: var(--gold-bright); filter: brightness(1.12); }
.quick-slot.empty { border-style: dashed; background: rgba(22,28,24,.8); }
.quick-slot.empty .quick-glyph { color: #7c897f; font-size: 18px; }
.quick-slot kbd { position: absolute; left: 2px; top: 2px; padding: 1px 3px; border: 0; background: rgba(0,0,0,.55); font-size: 7px; }
.quick-slot .quick-glyph { width: 25px; height: 25px; display: grid; place-items: center; color: #e3bc75; font: 700 14px Cinzel, Georgia, serif; }
.quick-slot .quick-glyph svg { width: 24px; height: 24px; }
.quick-slot .quick-qty { position: absolute; right: 3px; bottom: 2px; color: #d5ddd7; font-size: 7px; font-weight: 800; }
.currency-stack { display: grid; gap: 5px; border-left: 1px solid var(--line); padding-left: 10px; }
.currency { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; justify-items: end; }
.currency > span { color: #6f7a73; font-size: 7px; font-weight: 800; letter-spacing: .15em; }
.currency strong { display: flex; align-items: center; gap: 4px; }
.currency i { width: 13px; height: 13px; border: 2px solid #f0c569; border-radius: 50%; background: #b57b2d; box-shadow: inset 0 0 0 2px #dca74b; }
.currency b { font-size: 13px; }
.currency.shards i { border-color: #d1a8f2; border-radius: 3px; background: #6d4d89; box-shadow: inset 0 0 0 2px #9f75bd; transform: rotate(45deg); }
.currency.shards b { color: #d7b8ea; }
.action-picker { position: absolute; z-index: 12; right: 236px; bottom: 82px; width: 270px; padding: 12px; border: 1px solid #7a6542; border-radius: 7px; background: rgba(12,18,15,.98); box-shadow: 0 18px 45px rgba(0,0,0,.55); }
.picker-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.picker-header > span { color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.action-picker button.picker-close { width: 25px; height: 25px; display: grid; grid-template-columns: 1fr; place-items: center; margin: 0; padding: 0; border-color: #46534c; background: transparent; color: #9ca8a0; font-size: 16px; line-height: 1; text-align: center; }
.action-picker button.picker-close:hover { border-color: var(--gold); color: var(--gold-bright); }
.action-picker > small { display: block; margin-top: 8px; color: #657169; font-size: 8px; }
.action-picker-list { max-height: min(52vh, 360px); overflow-y: auto; padding-right: 3px; }
.action-picker button { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; margin-top: 7px; padding: 8px; border: 1px solid #34443b; border-radius: 5px; background: #121b17; color: #d7ddd9; text-align: left; cursor: pointer; }
.action-picker button:hover, .action-picker button.active { border-color: #a07b46; }
.action-picker button svg { width: 28px; height: 28px; }
.action-picker button b { display: block; font-size: 9px; }
.action-picker button small { color: #738078; font-size: 7px; }
.action-picker button.picker-back { grid-template-columns: 22px 1fr; border-style: dashed; color: #9ba79f; }
.action-picker button.loadout-option { padding-block: 7px; }
.bandolier-picker { right: 96px; width: 270px; }
.bandolier-picker button.clear-slot { grid-template-columns: 34px 1fr; border-style: dashed; color: #8f9a93; }

.screen-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: auto; background: #0b100e; }
.character-ambient { position: absolute; inset: 0; background: radial-gradient(circle at 21% 45%, rgba(103,139,100,.28), transparent 28%), radial-gradient(circle at 77% 30%, rgba(177,124,65,.18), transparent 28%), linear-gradient(110deg, rgba(255,255,255,.02), transparent 50%); }
.character-panel { position: relative; width: min(920px, calc(100% - 40px)); padding: 42px; border: 1px solid rgba(218,190,140,.19); border-radius: 10px; background: linear-gradient(145deg, rgba(25,35,30,.95), rgba(12,18,15,.96)); box-shadow: 0 35px 90px rgba(0,0,0,.5); }
.character-music-toggle { position: absolute; top: 18px; right: 18px; padding: 7px 10px; border: 1px solid #4b594f; border-radius: 4px; background: rgba(7,12,9,.46); color: #9cab9f; font-size: 8px; font-weight: 800; letter-spacing: .1em; cursor: pointer; }
.character-music-toggle:hover { border-color: var(--gold); color: var(--gold-bright); }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .22em; }
.character-panel h1 { margin: 0; font: 700 clamp(34px, 5vw, 56px)/1 Cinzel, serif; letter-spacing: -.035em; }
.intro-copy { margin: 11px 0 25px; color: #88968d; font-size: 13px; }
.account-banner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid rgba(222,179,105,.24); border-radius: 7px; background: linear-gradient(105deg, rgba(142,94,38,.13), rgba(7,13,10,.42)); }
.account-banner div { min-width: 0; }
.account-banner span, .account-signed-actions span { display: block; color: #b98b4d; font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.account-banner b { display: block; margin: 3px 0; color: #ddd3bd; font: 600 13px Cinzel, serif; }
.account-banner small { display: block; color: #7e8c83; font-size: 9px; line-height: 1.45; }
.account-banner button, .account-tabs button { padding: 8px 11px; border: 1px solid #59645d; border-radius: 4px; background: rgba(4,9,6,.42); color: #c9d0cb; font-size: 8px; font-weight: 900; letter-spacing: .09em; cursor: pointer; }
.account-banner.claimed { border-color: rgba(105,157,120,.34); background: linear-gradient(105deg, rgba(61,111,76,.16), rgba(7,13,10,.42)); }
.account-banner.claimed span { color: #83ad8d; }
.character-form > label { display: block; margin: 0 0 7px; color: #9caa9f; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.character-form > input { width: 280px; padding: 11px 13px; border: 1px solid #3c4a42; border-radius: 5px; outline: none; background: rgba(4,8,6,.45); color: var(--paper); }
.character-form > input:focus { border-color: #a57c42; box-shadow: 0 0 0 3px rgba(189,142,74,.11); }
.class-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.class-options { max-height: min(49vh, 330px); overflow-y: auto; padding: 2px; }
.class-card { position: relative; min-height: 145px; padding: 20px; text-align: left; border: 1px solid #344139; border-radius: 7px; background: rgba(7,12,9,.38); cursor: pointer; transition: .18s ease; }
.class-card:hover { transform: translateY(-2px); border-color: #655b47; }
.class-card.selected { border-color: var(--gold); background: linear-gradient(145deg, rgba(124,93,49,.21), rgba(18,28,23,.78)); box-shadow: inset 0 0 0 1px rgba(231,187,111,.12); }
.class-card .class-glyph { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 12px; border: 1px solid #526259; border-radius: 12px 4px 12px 4px; color: var(--gold-bright); font: 700 16px Cinzel, serif; }
.class-card .class-glyph svg, .roster-card .avatar svg { width: 31px; height: 31px; }
.class-card b { font: 600 16px Cinzel, serif; }
.class-card p { margin: 6px 0 0; color: #7f8d84; font-size: 10px; line-height: 1.5; }
.class-card small { position: absolute; top: 12px; right: 12px; color: #617068; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.primary-button, .secondary-button { border-radius: 5px; font-weight: 800; cursor: pointer; }
.primary-button { min-width: 280px; padding: 12px 16px; display: inline-flex; justify-content: space-between; border: 1px solid #e4b468; background: linear-gradient(#dca455, #b77731); color: #17130d; }
.slot-note { float: right; margin-top: 15px; color: #58655e; font-size: 9px; }

.roster { display: grid; gap: 8px; margin-bottom: 20px; }
.roster:empty { display: none; }
.roster-card { display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: 11px; padding: 10px; border: 1px solid #344139; border-radius: 6px; background: rgba(5,9,7,.35); }
.roster-card .avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: #26352d; color: #e1b86f; font: 700 14px Cinzel, serif; }
.roster-card b { display: block; font: 600 13px Cinzel, serif; }
.roster-card small { color: #758179; font-size: 9px; }
.roster-card button { padding: 7px 10px; border: 1px solid #526159; border-radius: 4px; background: transparent; color: #bfc8c2; font-size: 9px; cursor: pointer; }
.roster-card button:hover { border-color: var(--gold); }
.roster-card .delete-character { border: 0; color: #725f5b; font-size: 14px; }

.drawer-scrim { position: fixed; z-index: 40; inset: 64px 0 0; background: rgba(2,5,4,.45); backdrop-filter: blur(2px); }
.drawer { position: fixed; z-index: 50; top: 64px; right: 0; bottom: 0; width: min(420px, 100%); padding: 22px; overflow-y: auto; border-left: 1px solid rgba(224,195,143,.22); background: #111816; box-shadow: -25px 0 70px rgba(0,0,0,.4); animation: drawer-in .2s ease; }
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } }
.loot-tray {
  position: fixed; z-index: 46; top: 74px; right: 12px; width: min(360px, calc(100% - 24px)); max-height: min(58vh, 500px);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); padding: 14px;
  border: 1px solid rgba(224,195,143,.28); border-radius: 9px;
  background: linear-gradient(145deg, rgba(16,25,21,.76), rgba(8,14,11,.64));
  box-shadow: -12px 16px 45px rgba(0,0,0,.38); backdrop-filter: blur(6px); animation: drawer-in .18s ease;
}
.loot-tray-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.loot-tray-header span { color: var(--gold); font-size: 7px; font-weight: 800; letter-spacing: .18em; }
.loot-tray-header h2 { margin: 3px 0 0; font: 600 18px Cinzel, Georgia, serif; }
.loot-tray-header button { width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid #425047; border-radius: 4px; background: rgba(7,12,9,.4); color: #9ba79f; font-size: 17px; cursor: pointer; }
.loot-tray-toolbar { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: center; margin: 11px 0; padding-bottom: 10px; border-bottom: 1px solid rgba(88,103,94,.52); }
.loot-tray-toolbar button { padding: 7px 9px; border: 1px solid #8b693b; border-radius: 4px; background: rgba(112,80,43,.78); color: #efd29a; font-size: 7px; font-weight: 900; letter-spacing: .07em; cursor: pointer; }
.loot-tray-toolbar small { color: #7f8d85; font-size: 7px; line-height: 1.4; }
.loot-tray-list { min-height: 54px; display: grid; align-content: start; gap: 7px; overflow-y: auto; padding-right: 3px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #59665f transparent; }
.loot-tray-empty { margin: 0; padding: 18px 10px; color: #76837b; text-align: center; font-size: 9px; line-height: 1.5; }
.loot-tray-item { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 8px; padding: 8px; border: 1px solid rgba(71,85,77,.78); border-radius: 6px; background: rgba(5,10,7,.5); }
.loot-tray-item.uncommon { border-color: rgba(65,113,77,.78); }
.loot-tray-item.rare { border-color: rgba(63,103,139,.88); }
.loot-tray-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #45534b; border-radius: 5px; background: rgba(8,14,11,.72); color: #d9b471; }
.loot-tray-item.uncommon .loot-tray-icon { color: #71b67f; }
.loot-tray-item.rare .loot-tray-icon { color: #75aadb; }
.loot-tray-icon svg { width: 31px; height: 31px; }
.loot-tray-copy { min-width: 0; }
.loot-tray-copy b, .loot-tray-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loot-tray-copy b { color: #d8ded9; font: 600 10px Cinzel, Georgia, serif; }
.loot-tray-copy small { margin-top: 3px; color: #7f8c84; font-size: 7px; }
.loot-tray-actions { grid-column: 1 / -1; display: grid; grid-template-columns: .8fr .9fr 1.25fr; gap: 5px; }
.loot-tray-actions button, .loot-pass-select { min-width: 0; height: 30px; padding: 5px 6px; border: 1px solid #56645c; border-radius: 4px; background: rgba(13,21,17,.82); color: #aeb9b2; font-size: 7px; font-weight: 800; cursor: pointer; }
.loot-tray-actions .take { border-color: #8f6c3c; background: rgba(112,80,43,.76); color: #f0d4a0; }
.loot-tray-actions button:hover, .loot-pass-select:hover { border-color: var(--gold-bright); color: #f1d7a7; }
.loot-pass-select:disabled { opacity: .45; cursor: default; }
@media (min-width: 901px) {
  .loot-tray {
    top: 64px; right: 0; bottom: 0; width: 292px; max-height: none; padding: 16px 13px;
    border-width: 0 0 0 1px; border-radius: 0; background: linear-gradient(145deg, rgba(16,25,21,.94), rgba(8,14,11,.9));
    box-shadow: -16px 0 42px rgba(0,0,0,.34);
  }
  .loot-tray-actions { grid-template-columns: .78fr .85fr 1.35fr; }
}
.drawer-header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.drawer-header span { color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.drawer-header h2, .modal-card h2 { margin: 4px 0 0; font: 600 24px Cinzel, serif; }
.drawer-header-actions { display: flex; align-items: center; gap: 6px; }
.drawer-back { padding: 7px 9px; border: 1px solid #3d4a43; border-radius: 4px; background: transparent; color: #8d9a92; font-size: 7px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.drawer-back:hover { color: var(--gold-bright); border-color: #6e5836; }
.pack-wardrobe-button {
  width: 100%; display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 10px;
  margin: 14px 0 0; padding: 10px 12px; border: 1px solid rgba(194,149,79,.28); border-radius: 5px;
  background: linear-gradient(90deg, rgba(139,100,54,.12), rgba(55,73,63,.08)); text-align: left; cursor: pointer;
}
.pack-wardrobe-button:hover { border-color: #8d6d3f; background: linear-gradient(90deg, rgba(139,100,54,.2), rgba(55,73,63,.12)); }
.wardrobe-jump-glyph { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #655337; border-radius: 50%; color: var(--gold-bright); }
.pack-wardrobe-button b { display: block; color: #d8d0c1; font: 600 10px Cinzel, serif; letter-spacing: .07em; }
.pack-wardrobe-button small { display: block; margin-top: 3px; color: #718078; font-size: 7px; }
.pack-wardrobe-button kbd { padding: 3px 5px; border: 1px solid #49564f; border-radius: 3px; color: #849188; font-size: 7px; }
.pack-wardrobe-button i { color: #9e7b48; font-style: normal; }
.drawer-close, .modal-close { width: 31px; height: 31px; border: 1px solid #354139; border-radius: 4px; background: transparent; color: #849188; font-size: 18px; cursor: pointer; }
.paperdoll { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 18px 0; }
.equip-slot { min-height: 76px; display: grid; grid-template-columns: 45px 1fr; grid-template-rows: auto 1fr; gap: 3px 9px; align-items: center; padding: 9px; border: 1px solid #314039; border-radius: 5px; background: rgba(4,8,6,.3); color: #d2ad6a; text-align: left; cursor: pointer; }
.equip-slot:hover { border-color: #896a3e; background: rgba(91,68,37,.15); }
.equip-slot span { grid-column: 2; display: block; color: #68756d; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.equip-slot i { grid-column: 1; grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(159,128,76,.23); border-radius: 5px; background: #0b120e; }
.equip-slot i svg { width: 35px; height: 35px; }
.equip-slot b { grid-column: 2; align-self: start; display: block; margin-top: 2px; color: #cbd3ce; font-size: 9px; line-height: 1.25; }
.equip-slot.empty b { color: #4f5c55; font-weight: 500; }
.equip-slot.empty i { border-style: dashed; color: #3f5148; }
.section-label { display: flex; justify-content: space-between; margin: 19px 0 9px; }
.section-label b { color: #69756e; font-size: 8px; }
.inventory-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.item-slot { aspect-ratio: 1; position: relative; display: grid; place-items: center; border: 1px solid #34423b; border-radius: 5px; background: #0d1411; cursor: pointer; }
.item-slot:hover, .item-slot.selected { border-color: #a77d43; }
.item-slot .item-glyph { width: 38px; height: 38px; display: grid; place-items: center; color: #d7b373; font: 700 16px Cinzel, serif; }
.item-slot .item-glyph svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.58)); }
.item-icon .class-mark { opacity: .68; }
.item-icon.faint { opacity: .46; }
.item-icon.type-tonic { color: #79bd88; }
.item-icon.type-focus { color: #77a9d1; }
.item-icon.type-veil { color: #a69bd3; }
.item-icon.type-food { color: #c79662; }
.item-icon.type-map, .item-icon.type-quest { color: #d3bd7c; }
.item-icon.type-salvage, .item-icon.type-material { color: #9a8b70; }
.item-slot .qty { position: absolute; right: 4px; bottom: 3px; color: #b9c3bc; font-size: 8px; }
.item-slot .item-mark { position: absolute; left: 4px; top: 3px; width: 14px; height: 14px; display: grid; place-items: center; border: 1px solid #665234; border-radius: 50%; background: #17140e; color: #d7ae5e; font-size: 8px; font-weight: 900; }
.item-slot .item-mark.quest { border-color: #65704d; color: #bfc77d; }
.item-slot .item-mark.story { border-color: #594e3d; color: #9f8b69; }
.item-slot.uncommon { box-shadow: inset 0 0 11px rgba(77,151,101,.16); border-color: #3e6f4e; }
.item-slot.rare { box-shadow: inset 0 0 13px rgba(65,117,173,.21); border-color: #426a92; }
.item-slot.recent-loot { animation: recent-loot-pulse 1s ease-in-out infinite; }
@keyframes recent-loot-pulse { 50% { border-color: #f0bf66; box-shadow: inset 0 0 16px rgba(238,183,83,.34), 0 0 12px rgba(238,183,83,.52); filter: brightness(1.2); } }
.item-detail { position: static; min-height: 82px; max-height: min(220px, calc(var(--interface-height) - 180px)); margin: 0 0 10px; padding: 13px; overflow-y: auto; border: 1px solid #3d4a43; border-radius: 5px; background: rgba(12,19,16,.98); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.item-detail-icon { width: 52px; height: 52px; float: left; display: grid; place-items: center; margin: 0 11px 7px 0; border: 1px solid #3c4b43; border-radius: 6px; background: #0b110e; color: #d7b373; }
.item-detail-icon svg { width: 42px; height: 42px; }
.item-detail-icon.uncommon { border-color: #3e6f4e; }
.item-detail-icon.rare { border-color: #426a92; color: #7fb0db; }
.item-detail > p { color: #627068; font-size: 10px; }
.item-detail > p.item-fate-note, .item-detail > p.item-quest-material, .vendor-item p.quest-material-warning {
  clear: both; margin: 9px 0; padding: 8px 9px; border: 1px solid rgba(194,149,79,.48); border-radius: 4px;
  background: rgba(117,79,35,.16); color: #dfc384; font-weight: 700; line-height: 1.45;
}
.item-detail > p.item-quest-note { clear: both; color: #c6b979; font-weight: 700; }
.item-detail > p.item-story-note { clear: both; color: #a99470; font-weight: 700; }
.item-detail > p.item-quest-material, .vendor-item p.quest-material-warning { border-color: rgba(187,113,72,.5); background: rgba(111,54,33,.17); color: #d99b79; }
.item-detail h3 { margin: 0; font: 600 14px Cinzel, serif; }
.item-detail h3.uncommon { color: #71b67f; }
.item-detail h3.rare { color: #6ca4d5; }
.item-detail small { color: #78857d; font-size: 8px; }
.item-detail ul { padding: 0; margin: 9px 0; list-style: none; color: #b7c2ba; font-size: 9px; line-height: 1.6; }
.item-detail button { margin-right: 6px; padding: 6px 9px; border: 1px solid #8a693c; border-radius: 4px; background: #5f492d; font-size: 9px; cursor: pointer; }
.item-detail .discard { border-color: #4c3b38; background: transparent; color: #876b66; }
.bandolier-assign { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
.bandolier-assign > span { margin-right: 3px; color: #68756e; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.bandolier-assign button { min-width: 43px; padding: 5px; border-color: #47554d; background: transparent; color: #8d9b92; font-size: 7px; }
.bandolier-assign button.active { border-color: var(--gold); background: rgba(157,113,54,.26); color: var(--gold-bright); }

.quest-list { display: grid; gap: 11px; margin-top: 17px; }
.quest-card { padding: 15px; border: 1px solid #303e37; border-radius: 6px; background: rgba(5,9,7,.28); }
.quest-card.complete { border-color: #6e7549; box-shadow: inset 3px 0 #b28e4c; }
.quest-card.focused { border-color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(219,178,96,.2), inset 3px 0 #8fb47c; }
.quest-card > span { color: #7b887f; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.quest-card h3 { margin: 5px 0 7px; font: 600 14px Cinzel, serif; }
.quest-card p { color: #849087; font-size: 10px; line-height: 1.5; }
.quest-card.collapsed { padding-block: 11px; background: rgba(7,12,9,.2); box-shadow: inset 3px 0 rgba(178,142,76,.6); }
.quest-card.collapsed h3 { margin-bottom: 5px; }
.quest-collapse-toggle {
  padding: 4px 0; border: 0; background: transparent; color: #a18455; font-size: 7px; font-weight: 800;
  letter-spacing: .1em; cursor: pointer;
}
.quest-collapse-toggle::before { content: "▸"; display: inline-block; margin-right: 5px; transition: transform .15s; }
.quest-collapse-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.quest-collapse-toggle:hover { color: #d1aa69; }
.quest-card-details { margin-top: 8px; }
.objective { display: flex; justify-content: space-between; margin-top: 8px; color: #a9b5ad; font-size: 9px; }
.objective.done { color: #75a984; }
.quest-reward { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: #b98b4a; font-size: 8px; }
.quest-abandon { margin-top: 10px; padding: 7px 9px; border: 1px solid rgba(174,103,90,.42); border-radius: 4px; background: rgba(105,49,42,.16); color: #c68d82; font-size: 8px; letter-spacing: .08em; }
.quest-abandon:hover { border-color: #bd7668; color: #e1aaa0; }
.quest-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.quest-card-actions .quest-abandon { margin-top: 0; }
.quest-chat-share { padding: 7px 9px; border: 1px solid rgba(96,137,112,.62); border-radius: 4px; background: rgba(40,76,55,.18); color: #99c3a5; font-size: 8px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.quest-chat-share:hover { border-color: #82bc92; color: #b8e1c2; }
.empty-state { margin-top: 50px; color: #657169; text-align: center; font-size: 11px; line-height: 1.6; }
.empty-state.compact { margin: 12px 0 4px; }

.quest-route { display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; margin: 11px 0 2px; padding: 9px 10px; border: 1px solid #34423a; border-radius: 5px; background: rgba(11,18,14,.48); }
.quest-route b { color: #be9555; font-size: 7px; letter-spacing: .12em; }
.quest-route span { color: #aab5ae; font-size: 9px; }

.modal-wrap { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 15px; background: rgba(3,7,5,.75); backdrop-filter: blur(4px); }
.modal-card { position: relative; width: min(390px, 100%); max-height: calc(var(--interface-height) - 30px); padding: 28px; overflow-y: auto; border: 1px solid rgba(224,194,140,.23); border-radius: 8px; background: #151e1a; box-shadow: 0 25px 70px rgba(0,0,0,.55); }
.chat-link-modal { z-index: 175; }
.chat-link-card { width: min(470px, 100%); background: radial-gradient(circle at 12% 0, rgba(166,118,52,.12), transparent 44%), #151e1a; }
.chat-link-content { margin-top: 14px; }
.chat-link-item { min-height: 88px; padding: 13px; border: 1px solid #3d4a43; border-radius: 6px; background: rgba(8,14,11,.55); }
.chat-link-item::after { content: ""; display: block; clear: both; }
.chat-link-item h3 { margin: 0; font: 600 15px Cinzel, Georgia, serif; }
.chat-link-item h3.uncommon { color: #71b67f; }
.chat-link-item h3.rare { color: #6ca4d5; }
.chat-link-item small { color: #78857d; font-size: 8px; }
.chat-link-item ul { margin: 9px 0; padding: 0; list-style: none; color: #b7c2ba; font-size: 9px; line-height: 1.6; }
.chat-link-item p, .chat-link-note { margin: 8px 0 0; color: #7f8c84; font-size: 9px; line-height: 1.5; }
.chat-link-quest-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-bottom: 12px; }
.chat-link-quest-meta div { padding: 9px; border: 1px solid #35433b; border-radius: 5px; background: #101713; }
.chat-link-quest-meta b, .chat-link-quest-meta span { display: block; }
.chat-link-quest-meta b { margin-bottom: 4px; color: #bd9353; font-size: 7px; letter-spacing: .11em; }
.chat-link-quest-meta span { color: #b9c3bd; font-size: 9px; }
.chat-link-objectives { display: grid; gap: 6px; }
.chat-link-objective { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 8px 9px; border-left: 2px solid #66776d; background: rgba(8,13,10,.35); color: #aeb9b2; font-size: 9px; }
.chat-link-objective.done { border-left-color: #75a984; color: #8dc59b; }
.quest-offer-modal { z-index: 170; }
.quest-offer-card { width: min(480px, 100%); background: radial-gradient(circle at 12% 0, rgba(166,118,52,.15), transparent 42%), #151e1a; }
.quest-offer-summary { margin: 11px 0 14px; color: #a3afa7; font-size: 11px; line-height: 1.55; }
.quest-offer-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 14px; }
.quest-offer-meta div { padding: 9px; border: 1px solid #35433b; border-radius: 5px; background: #101713; }
.quest-offer-meta b, .quest-offer-meta span { display: block; }
.quest-offer-meta b { margin-bottom: 4px; color: #bd9353; font-size: 7px; letter-spacing: .12em; }
.quest-offer-meta span { color: #b9c3bd; font-size: 9px; line-height: 1.4; }
.quest-offer-alternatives { display: grid; gap: 5px; margin: 0 0 14px; padding: 10px; border: 1px dashed #536157; border-radius: 5px; }
.quest-offer-alternatives::before { content: "OTHER AVAILABLE WORK FROM THIS QUEST GIVER"; color: #78867d; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.quest-offer-alternatives button { padding: 7px 9px; border: 1px solid #46554c; border-radius: 4px; background: #101813; color: #b2beb6; text-align: left; font-size: 8px; cursor: pointer; }
.quest-offer-alternatives button:hover { border-color: #9b7744; color: #e0bf82; }
.quest-offer-objectives { display: grid; gap: 6px; }
.quest-offer-objectives div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 9px; border-left: 2px solid #66776d; background: rgba(8,13,10,.35); color: #aeb9b2; font-size: 9px; }
.quest-offer-objectives b { color: #7f8c84; }
.quest-offer-reward { margin: 14px 0; padding-top: 11px; border-top: 1px solid var(--line); color: #d0a45f; font-size: 8px; line-height: 1.5; }
.quest-offer-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.quest-offer-actions button { padding: 10px 12px; border: 1px solid #8b6a3c; border-radius: 4px; background: #70532f; color: #f0d5a2; font-size: 8px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.quest-offer-actions button:hover { border-color: var(--gold-bright); filter: brightness(1.1); }
.quest-offer-actions .secondary-button { border-color: #4b5a52; background: transparent; color: #9aa69f; }
.account-modal { z-index: 120; }
.account-modal-card { width: min(470px, 100%); background: radial-gradient(circle at 15% 0, rgba(157,112,50,.14), transparent 40%), #151e1a; }
.account-modal-copy { margin: 12px 0 20px; color: #8b9990; font-size: 11px; line-height: 1.55; }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 18px; }
.account-tabs button.active { border-color: #d5a354; color: #f0cf91; background: rgba(142,94,38,.2); }
.account-form { display: grid; gap: 7px; }
.account-form label { margin-top: 5px; color: #9caa9f; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.account-form input { width: 100%; padding: 11px 12px; border: 1px solid #3c4a42; border-radius: 5px; outline: none; background: rgba(4,8,6,.5); color: var(--paper); }
.account-form input:focus { border-color: #a57c42; box-shadow: 0 0 0 3px rgba(189,142,74,.11); }
.account-form .primary-button { width: 100%; margin-top: 9px; }
.account-link-button { justify-self: center; padding: 5px; border: 0; background: transparent; color: #ba945c; font-size: 9px; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.account-link-button:hover { color: #e0bd82; }
.account-form-note { color: #66746c; font-size: 8px; line-height: 1.5; }
.account-feedback { min-height: 16px; margin: 14px 0 0; color: #d8a95f; font-size: 9px; line-height: 1.45; }
.account-feedback.error { color: #dc887b; }
.account-signed-actions { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px; padding: 16px; border: 1px solid #405449; border-radius: 7px; background: rgba(5,11,8,.38); }
.account-signed-actions .account-crest { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #a77c42; border-radius: 50%; color: #e0b66e; font: 700 13px Cinzel, serif; }
.account-signed-actions b { display: block; margin: 4px 0 2px; color: #ddd3bd; font: 600 16px Cinzel, serif; }
.account-signed-actions small { display: block; color: #77867c; font-size: 9px; }
.account-verification-callout { grid-column: 1 / -1; margin-top: 5px; padding: 13px 14px; border: 1px solid rgba(215,166,89,.48); border-radius: 6px; background: linear-gradient(105deg, rgba(151,101,39,.2), rgba(10,17,13,.45)); }
.account-verification-callout span { color: #e1b467; font-size: 8px; }
.account-verification-callout strong { display: block; margin: 5px 0 4px; color: #f0d39b; font: 700 15px Cinzel, serif; }
.account-verification-callout small { color: #a9b1ab; line-height: 1.45; }
.account-verification-callout.verified { border-color: rgba(121,169,135,.48); background: linear-gradient(105deg, rgba(61,111,76,.2), rgba(10,17,13,.45)); }
.account-verification-callout.verified span, .account-verification-callout.verified strong { color: #91c49f; }
.account-signed-actions .secondary-button { grid-column: 1 / -1; margin-top: 5px; }
.account-signed-actions .secondary-button:disabled { cursor: wait; opacity: .56; }
#settings-account-open { margin-bottom: 8px; }
.modal-close { position: absolute; top: 14px; right: 14px; }
.destiny-card { border-color: rgba(212,151,76,.55); background: radial-gradient(circle at 50% 0, rgba(139,75,38,.2), transparent 45%), #171d19; }
.destiny-card h2 { margin: 7px 36px 11px 0; color: #e0b864; font: 600 21px Cinzel, Georgia, serif; }
.destiny-warning { color: #c6aa80; font-size: 10px; line-height: 1.65; }
.destiny-confirm-row { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; margin: 18px 0; padding: 13px; border: 1px solid #61483a; border-radius: 5px; background: rgba(72,34,26,.18); cursor: pointer; }
.destiny-confirm-row input { width: 20px; height: 20px; accent-color: #b47745; cursor: pointer; }
.destiny-confirm-row b { display: block; color: #d8b19a; font-size: 10px; }
.destiny-confirm-row small { display: block; margin-top: 5px; color: #8e7e73; font-size: 8px; line-height: 1.4; }
.destiny-destroy { width: 100%; padding: 10px; border: 1px solid #9a5948; border-radius: 4px; background: #713c32; color: #f0c3b5; font-size: 9px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.destiny-destroy:disabled { opacity: .35; cursor: default; }
.destiny-footnote { margin: 10px 0 0; color: #746b65; text-align: center; font-size: 8px; line-height: 1.45; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; margin: 17px 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.toggle-row b { display: block; font-size: 11px; }
.toggle-row small { display: block; margin-top: 3px; color: #748179; font-size: 9px; }
.toggle-row.danger b { color: #d38c7e; }
.toggle-row input { appearance: none; width: 36px; height: 20px; padding: 2px; border-radius: 10px; background: #334139; cursor: pointer; transition: .15s; }
.toggle-row input::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #839087; transition: .15s; }
.toggle-row input:checked { background: #8f6a38; }
.toggle-row input:checked::after { transform: translateX(16px); background: #f2d49d; }
.select-row select {
  min-width: 142px; padding: 7px 9px; border: 1px solid #45534b; border-radius: 4px;
  outline: 0; background: #101713; color: #cbd3ce; font-size: 10px; cursor: pointer;
}
.select-row select:focus { border-color: #8f6a38; }
.secondary-button { width: 100%; padding: 10px; border: 1px solid #45534b; background: transparent; color: #aab5ae; }
#save-status { margin: 14px 0 0; color: #637068; text-align: center; font-size: 8px; }
.slot-note a { color: #a57c42; text-decoration: none; }
.slot-note a:hover { color: var(--gold-bright); }

.vendor-card { position: relative; width: min(760px, 100%); max-height: calc(var(--interface-height) - 30px); padding: 28px; overflow-y: auto; border: 1px solid rgba(224,194,140,.25); border-radius: 9px; background: linear-gradient(145deg, #18221d, #101713); box-shadow: 0 30px 80px rgba(0,0,0,.58); }
.vendor-card > .modal-close { position: absolute; top: 15px; right: 15px; }
.vendor-header { display: grid; grid-template-columns: 66px 1fr auto; gap: 15px; align-items: center; padding-right: 34px; }
.vendor-header h2 { margin: 3px 0 4px; font: 600 25px Cinzel, Georgia, serif; }
.vendor-header p { margin: 0; color: #7e8c83; font-size: 10px; }
.vendor-portrait { width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid #8f6c3f; border-radius: 50%; background: #26372d; }
.vendor-portrait span { position: relative; width: 22px; height: 29px; border-radius: 9px 9px 5px 5px; background: #a97d4c; }
.vendor-portrait span::before { content: ""; position: absolute; left: 5px; top: -8px; width: 12px; height: 12px; border-radius: 50%; background: #c29b72; }
.vendor-portrait span::after { content: ""; position: absolute; left: -5px; top: 8px; width: 32px; height: 15px; border-bottom: 4px solid #4e392a; border-radius: 50%; }
.vendor-purse { display: grid; justify-items: end; }
.vendor-purse > span { color: #758178; font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.vendor-purse strong { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.vendor-purse i, .vendor-price i { width: 12px; height: 12px; display: inline-block; border: 2px solid #efc368; border-radius: 50%; background: #a86f29; }
.vendor-tabs { display: flex; gap: 5px; margin: 22px 0 12px; border-bottom: 1px solid var(--line); }
.vendor-tabs button { padding: 10px 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #6f7b74; font-size: 8px; font-weight: 800; letter-spacing: .14em; cursor: pointer; }
.vendor-tabs button.active { border-bottom-color: var(--gold); color: var(--gold-bright); }
.vendor-list { max-height: min(510px, calc(var(--interface-height) - 250px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow-y: auto; padding-right: 5px; scrollbar-width: thin; scrollbar-color: #4c5d54 transparent; }
.vendor-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 11px; align-items: center; min-height: 72px; padding: 11px; border: 1px solid #303d36; border-radius: 6px; background: rgba(4,8,6,.28); }
.vendor-item.uncommon { border-color: #3d6047; }
.vendor-item.rare { border-color: #3c5e7c; }
.vendor-item.destiny-bound { border-color: #9b7845; box-shadow: inset 3px 0 rgba(217,177,94,.7); }
.vendor-item.storied-reward { border-color: #675942; }
.vendor-item.quest-material { box-shadow: inset 3px 0 rgba(190,105,72,.58); }
.vendor-item p.storied-reward-warning { color: #ad956e; font-weight: 700; }
.vendor-item-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #46534b; border-radius: 6px; background: #0c120f; color: #dbb46f; font: 700 17px Cinzel, Georgia, serif; }
.vendor-item-icon svg { width: 30px; height: 30px; }
.vendor-item h3 { margin: 0; font: 600 11px Cinzel, Georgia, serif; }
.vendor-item p { margin: 4px 0 0; color: #738078; font-size: 8px; line-height: 1.35; }
.vendor-item p.item-restriction { color: #c88369; font-weight: 700; }
.vendor-item small { color: #809087; font-size: 7px; }
.vendor-item-action { display: grid; justify-items: end; gap: 6px; }
.vendor-price { display: flex; align-items: center; gap: 4px; color: #d9bc80; font-size: 9px; font-weight: 800; }
.vendor-item button { min-width: 62px; padding: 6px 8px; border: 1px solid #81633b; border-radius: 4px; background: #5a452c; color: #ead8b5; font-size: 8px; font-weight: 800; cursor: pointer; }
.vendor-item button:hover:not(:disabled) { border-color: var(--gold-bright); filter: brightness(1.12); }
.vendor-item button:disabled { opacity: .4; cursor: default; }
.vendor-note { margin: 14px 0 0; color: #59665f; text-align: center; font-size: 8px; }
.vendor-empty { grid-column: 1 / -1; padding: 45px 20px; color: #68756e; text-align: center; font-size: 10px; }

.trade-card { position: relative; width: min(570px, 100%); max-height: calc(var(--interface-height) - 30px); padding: 28px; overflow-y: auto; border: 1px solid rgba(224,194,140,.25); border-radius: 9px; background: linear-gradient(145deg, #18221d, #101713); box-shadow: 0 30px 80px rgba(0,0,0,.58); }
.trade-card h2 { margin: 5px 0 3px; font: 600 23px Cinzel, Georgia, serif; }
.trade-subtitle { margin: 0 0 17px; color: #7d8a82; font-size: 10px; }
.trade-list { display: grid; gap: 7px; }
.trade-item { display: grid; grid-template-columns: 42px 1fr auto; gap: 11px; align-items: center; padding: 10px; border: 1px solid #303d36; border-radius: 6px; background: rgba(4,8,6,.3); }
.trade-item .vendor-item-icon { width: 38px; height: 38px; }
.trade-item h3 { margin: 0; font: 600 11px Cinzel, Georgia, serif; }
.trade-item p { margin: 4px 0 0; color: #748178; font-size: 8px; }
.trade-item button, .trade-choice button { padding: 7px 10px; border: 1px solid #81633b; border-radius: 4px; background: #5a452c; color: #ead8b5; font-size: 8px; font-weight: 800; cursor: pointer; }
.trade-item-actions { display: grid; justify-items: stretch; gap: 5px; }
.trade-item.bank-gold-row { grid-template-columns: 38px minmax(150px, 1fr); align-items: start; }
.bank-range-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.bank-range-control { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; align-items: center; padding: 9px; border: 1px solid rgba(135,106,66,.42); border-radius: 5px; background: rgba(15,24,19,.56); }
.bank-range-control > span { grid-column: 1 / -1; color: #9d8770; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.bank-range-control input[type="range"] { width: 100%; min-width: 120px; accent-color: #c89a52; }
.bank-range-control output { min-width: 68px; color: #d8be8b; text-align: right; font-size: 8px; font-weight: 800; }
.bank-range-control button { grid-column: 1 / -1; }
.trade-item-actions .preview-button { border-color: #496157; background: rgba(40,65,54,.42); color: #a8c5b4; }
.trade-item-actions .preview-button:hover { border-color: #78a48e; color: #d6eee1; }
.trade-item.previewing { border-color: #8f7143; box-shadow: inset 3px 0 #d4a65d; }
@media (max-width: 640px) { .bank-range-actions { grid-template-columns: 1fr; } }
.cosmetic-preview {
  display: grid; grid-template-columns: minmax(190px, 220px) 1fr; gap: 16px; align-items: center;
  margin: 14px 0 18px; padding: 12px; border: 1px solid #6a5738; border-radius: 7px;
  background: radial-gradient(circle at 18% 44%, rgba(143,102,53,.2), transparent 42%), rgba(5,10,7,.45);
}
.cosmetic-preview-stage { overflow: hidden; border: 1px solid #394a41; border-radius: 6px; background: linear-gradient(#18251e 0 68%, #2d352d 68%); }
.cosmetic-preview canvas { display: block; width: 100%; height: auto; }
.cosmetic-preview-copy > span { color: #b28d50; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.cosmetic-preview-copy h3 { margin: 5px 0 6px; font: 600 15px Cinzel, Georgia, serif; }
.cosmetic-preview-copy p { margin: 0; color: #8c9991; font-size: 9px; line-height: 1.5; }
.cosmetic-preview-copy small { display: block; margin-top: 8px; color: #6f7c74; font-size: 7px; }
.trade-choice { display: grid; justify-items: center; gap: 15px; padding: 25px; border: 1px solid #34443b; border-radius: 6px; text-align: center; }
.trade-choice .trade-glyph { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid #7d6741; border-radius: 8px; background: #0c120f; color: #e4bd73; font: 700 22px Cinzel, Georgia, serif; }
.trade-choice .trade-glyph svg { width: 40px; height: 40px; }
.trade-choice h3 { margin: 0; font: 600 15px Cinzel, Georgia, serif; }
.trade-choice p { margin: -9px 0 0; color: #7c8981; font-size: 9px; }
.trade-choice-actions { display: flex; gap: 8px; }
.trade-choice button.decline { border-color: #46544d; background: transparent; color: #929f97; }
.trade-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-mode-grid > button { min-height: 145px; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 20px; border: 1px solid #3b4b42; border-radius: 7px; background: rgba(5,10,7,.32); color: #d7ddd9; cursor: pointer; }
.trade-mode-grid > button:hover { border-color: #9b7845; background: rgba(103,76,42,.18); }
.trade-mode-grid b { font: 600 13px Cinzel, Georgia, serif; }
.trade-mode-grid small { color: #718078; text-align: center; font-size: 9px; line-height: 1.45; }
.trade-mode-glyph { color: #e0b765; font: 700 30px Cinzel, Georgia, serif; }
.barter-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.barter-offer { min-height: 155px; padding: 14px; border: 1px solid #34433b; border-radius: 7px; background: rgba(4,8,6,.28); transition: border-color .15s, box-shadow .15s; }
.barter-offer.ready { border-color: #72916d; box-shadow: inset 0 0 0 1px rgba(117,161,112,.18); }
.barter-offer h3 { margin: 0 0 12px; color: #9f8250; font-size: 8px; letter-spacing: .14em; }
.barter-offer select, .barter-offer input { width: 100%; padding: 9px; border: 1px solid #3a4941; border-radius: 4px; outline: 0; background: #0b110e; color: #c8d0cb; font-size: 9px; }
.barter-offer select:disabled, .barter-offer input:disabled { opacity: .62; }
.barter-gold { display: grid; gap: 6px; margin-top: 12px; }
.barter-gold span { color: #717e76; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.barter-item-preview { display: grid; grid-template-columns: 42px 1fr; gap: 9px; align-items: center; min-height: 52px; }
.barter-item-preview > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #4a574f; border-radius: 5px; background: #0b110e; color: #dab26b; font: 700 16px Cinzel, Georgia, serif; }
.barter-item-preview b { display: block; color: #d1d8d3; font-size: 10px; }
.barter-item-preview small { color: #6d7972; font-size: 7px; }
.barter-their-gold { margin: 14px 0 0; padding: 9px; border: 1px solid #403e31; border-radius: 4px; color: #dfbc74; text-align: center; font-size: 10px; font-weight: 800; }
.barter-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 11px; padding: 11px 13px; border: 1px solid #35443c; border-radius: 6px; background: #111915; }
.barter-footer p { margin: 0; color: #77847d; font-size: 9px; }
.barter-ready { flex: 0 0 auto; padding: 8px 12px; border: 1px solid #8b6c3e; border-radius: 4px; background: #644b2e; color: #f0d9ae; font-size: 8px; font-weight: 800; cursor: pointer; }
.barter-ready:disabled { opacity: .4; cursor: default; }

.quantity-modal { z-index: 160; background: rgba(3,7,5,.62); }
.quantity-card h2 { margin: 5px 0 3px; font: 600 23px Cinzel, Georgia, serif; }
.quantity-stepper { display: grid; grid-template-columns: 38px minmax(70px, 1fr) 38px auto; gap: 7px; align-items: stretch; }
.quantity-stepper button, .quantity-confirm { border: 1px solid #81633b; border-radius: 4px; background: #5a452c; color: #ead8b5; font-size: 9px; font-weight: 800; cursor: pointer; }
.quantity-stepper input { min-width: 0; padding: 9px; border: 1px solid #435149; border-radius: 4px; outline: 0; background: #0b110e; color: #e7d9bb; text-align: center; font: 700 13px Inter, sans-serif; }
.quantity-stepper input:focus { border-color: var(--gold); }
.quantity-total { min-height: 34px; margin: 12px 0; color: #9fac9f; font-size: 9px; line-height: 1.45; }
.quantity-confirm { width: 100%; padding: 10px 12px; }
.quantity-stepper button:hover, .quantity-confirm:hover { border-color: var(--gold-bright); filter: brightness(1.12); }
.quantity-stepper button:disabled { opacity: .38; cursor: default; filter: none; }

.wardrobe-note { margin: 16px 0 0; color: #78867e; font-size: 10px; line-height: 1.55; }
.wardrobe-emote-section { margin: 16px 0; padding: 12px; border: 1px solid #435247; border-radius: 6px; background: rgba(11, 19, 14, .65); }
.wardrobe-emote-section summary { color: #d8b775; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.wardrobe-emote-section summary span { float: right; color: #7d9183; font-size: 8px; letter-spacing: .06em; }
.wardrobe-emote-section > p { color: #84958a; font-size: 10px; line-height: 1.5; }
.wardrobe-emote-pack + .wardrobe-emote-pack { margin-top: 12px; }
.wardrobe-emote-pack > p { margin: 0 0 6px; color: #c0c9bf; font-size: 10px; }
.wardrobe-emote-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wardrobe-emote-buttons button { min-height: 38px; padding: 8px 4px; border: 1px solid #715f3e; border-radius: 5px; background: #19251c; color: #dfbd7f; font: 700 10px Inter, sans-serif; cursor: pointer; touch-action: manipulation; }
.wardrobe-emote-buttons button:hover:not(:disabled) { border-color: #dbb772; background: #2a3523; }
.wardrobe-emote-buttons button:disabled { border-color: #3e493f; background: #172019; color: #7a8a7e; cursor: default; }
.mobile-mode .wardrobe-emote-buttons button { min-height: 44px; }
.surname-editor { margin: 14px 0 4px; padding: 13px; border: 1px solid rgba(198,158,90,.34); border-radius: 7px; background: linear-gradient(135deg, rgba(92,66,31,.16), rgba(19,31,25,.48)); }
.surname-editor.locked { border-style: dashed; opacity: .82; }
.surname-editor-heading > span, .surname-form label > span { display: block; color: #bd9557; font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.surname-editor-heading h3 { margin: 4px 0 0; color: #e4ded1; font: 600 14px Cinzel, serif; }
.surname-editor > p { margin: 8px 0 0; color: #87958c; font-size: 9px; line-height: 1.5; }
.surname-form { display: grid; gap: 9px; margin-top: 10px; }
.surname-form label { display: grid; gap: 5px; }
.surname-form input { width: 100%; padding: 10px 11px; border: 1px solid #445149; border-radius: 5px; outline: 0; background: rgba(7,12,10,.82); color: #efe3cd; font-size: 13px; }
.surname-form input:focus { border-color: #b88a49; box-shadow: 0 0 0 2px rgba(184,138,73,.12); }
.surname-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.surname-actions button { min-height: 34px; padding: 7px 11px; border: 1px solid #8a6839; border-radius: 4px; background: #9a6f34; color: #111510; font-size: 8px; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.surname-actions .secondary-button { background: transparent; color: #ae9a78; }
.surname-actions button:disabled { opacity: .42; cursor: default; }
.surname-form small { color: #718078; font-size: 8px; line-height: 1.4; }
.surname-form small.error { color: #d9806f; }
.wardrobe-equipped, .wardrobe-list { display: grid; gap: 8px; }
.wardrobe-equipped { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wardrobe-slot, .cosmetic-card {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center;
  min-height: 62px; padding: 9px; border: 1px solid #314039; border-radius: 5px; background: rgba(4,8,6,.3);
}
.wardrobe-slot.empty { border-style: dashed; opacity: .72; }
.wardrobe-glyph { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(159,128,76,.3); border-radius: 50%; background: #0b120e; color: #e1b86f; font: 700 15px Cinzel, serif; }
.wardrobe-slot span, .cosmetic-card span { display: block; color: #68756d; font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.wardrobe-slot b, .cosmetic-card b { display: block; margin-top: 3px; color: #cbd3ce; font: 600 10px Cinzel, serif; }
.wardrobe-slot button, .cosmetic-card button { padding: 6px 8px; border: 1px solid #6e5836; border-radius: 4px; background: transparent; color: #c9a668; font-size: 7px; font-weight: 800; cursor: pointer; }
.wardrobe-slot button:hover, .cosmetic-card button:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.cosmetic-card { grid-template-columns: 42px 1fr auto; min-height: 72px; }
.cosmetic-card p { margin: 4px 0 0; color: #738078; font-size: 8px; line-height: 1.4; }
.cosmetic-card small { display: block; margin-top: 4px; color: #9b7b4b; font-size: 7px; }
.cosmetic-card.equipped { border-color: #7f693e; box-shadow: inset 3px 0 #c2954f; }
.cosmetic-card button:disabled { opacity: .68; cursor: default; }

body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
body.large-interface .zone-heading { display: none; }
body.large-interface .brand-lockup > div:last-child { display: none; }

.mobile-controls {
  position: absolute; z-index: 7; inset: 0; display: none;
  pointer-events: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; touch-action: none;
}
body.mobile-mode .mobile-controls { display: block; }
body.mobile-mode .game-shell { grid-template-rows: 52px 1fr; }
body.mobile-mode .topbar {
  grid-template-columns: minmax(0, 1fr) auto; padding-right: max(7px, env(safe-area-inset-right)); padding-left: max(7px, env(safe-area-inset-left));
  background: rgba(7, 12, 10, .84); box-shadow: 0 6px 18px rgba(0,0,0,.2); backdrop-filter: blur(9px);
}
body.mobile-mode { touch-action: manipulation; }
body.mobile-mode button, body.mobile-mode a, body.mobile-mode [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body.mobile-mode .zone-heading { display: none; }
body.mobile-mode .brand-lockup { gap: 5px; }
body.mobile-mode .mini-sigil { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px 3px 9px 3px; font-size: 10px; }
body.mobile-mode .brand-music-toggle { width: 30px; height: 28px; }
body.mobile-mode .brand-music-toggle .music-note { left: 5px; top: 2px; font-size: 15px; }
body.mobile-mode .brand-music-toggle .music-state-icon { right: 2px; bottom: 3px; min-width: 11px; height: 11px; font-size: 5px; }
body.mobile-mode .brand-lockup > div:last-child span { display: none; }
body.mobile-mode .brand-lockup strong { font-size: 10px; letter-spacing: .035em; white-space: nowrap; }
body.mobile-mode .top-actions { gap: 1px; }
body.mobile-mode .text-button { padding: 6px; }
body.mobile-mode .icon-button { width: 30px; height: 30px; padding: 5px; }
body.mobile-mode .loot-toggle { min-width: 30px; height: 32px; justify-content: center; }
body.mobile-mode .loot-count { position: absolute; top: -2px; right: -1px; min-width: 14px; height: 14px; padding: 0 3px; font-size: 7px; }
body.mobile-mode .loot-tray {
  top: 60px; right: max(7px, env(safe-area-inset-right)); width: min(310px, calc(100% - 14px)); max-height: min(38vh, 330px);
  padding: 11px; background: linear-gradient(145deg, rgba(16,25,21,.7), rgba(8,14,11,.58)); backdrop-filter: blur(4px);
}
body.mobile-mode.loot-tray-open .game-shell { grid-template-rows: 52px 164px minmax(0, 1fr); }
body.mobile-mode.loot-tray-open .topbar { grid-row: 1; }
body.mobile-mode.loot-tray-open .loot-tray {
  position: relative; z-index: 9; grid-row: 2; top: auto; right: auto; width: 100%; height: 164px; max-height: none;
  padding: 6px 9px; border-width: 0 0 1px; border-radius: 0; box-shadow: 0 8px 22px rgba(0,0,0,.24);
}
body.mobile-mode.loot-tray-open .play-area { grid-row: 3; min-height: 0; }
body.mobile-mode.loot-tray-open .loot-tray-header { align-items: center; }
body.mobile-mode.loot-tray-open .loot-tray-header h2 { display: inline; margin-left: 6px; font-size: 13px; }
body.mobile-mode.loot-tray-open .loot-tray-toolbar { grid-template-columns: auto 1fr; margin: 2px 0 4px; padding-bottom: 4px; }
body.mobile-mode.loot-tray-open .loot-tray-list {
  grid-auto-flow: column; grid-auto-columns: min(282px, calc(100vw - 24px)); grid-template-columns: none;
  overflow-x: auto; overflow-y: hidden; padding: 0 0 3px; scroll-snap-type: x proximity;
}
body.mobile-mode.loot-tray-open .loot-tray-item { height: 80px; scroll-snap-align: start; }
body.mobile-mode .loot-tray-header h2 { font-size: 16px; }
body.mobile-mode .loot-tray-toolbar { margin: 8px 0; padding-bottom: 8px; }
body.mobile-mode .loot-tray-item { padding: 7px; }
body.mobile-mode .loot-tray-actions button { min-height: 34px; }
body.mobile-mode .loot-pass-select { height: 34px; font-size: 16px; }
body.mobile-mode.compact-interface .social-scrim { inset: 52px 0 0; }
body.mobile-mode.compact-interface .social-panel { top: 58px; }
.mobile-controls button {
  position: absolute; z-index: 2; width: 54px; height: 54px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 0;
  border: 1px solid rgba(224,194,140,.42); border-radius: 50%; background: rgba(12,20,16,.88); color: #eed39b;
  box-shadow: 0 7px 18px rgba(0,0,0,.34); pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.mobile-controls button:active, .mobile-controls button.pressed { border-color: #f0c66f; background: rgba(112,77,37,.9); transform: scale(.94); }
.mobile-controls button b, .mobile-controls button span, .mobile-controls button svg { pointer-events: none; user-select: none; -webkit-user-select: none; }
.mobile-controls button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-controls button > span, .mobile-controls button > small { color: #9eaa9f; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.mobile-joystick {
  position: absolute; z-index: 1; left: max(12px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); width: 126px; height: 126px; border: 1px solid rgba(224,194,140,.35);
  border-radius: 50%; background: radial-gradient(circle, rgba(35,49,41,.78) 0 34%, rgba(12,20,16,.7) 35% 67%, rgba(7,12,9,.46) 68%);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.018), 0 9px 24px rgba(0,0,0,.35); pointer-events: auto;
  touch-action: none; -webkit-tap-highlight-color: transparent; overflow: hidden;
}
.mobile-joystick-guide { position: absolute; inset: 20px; border: 1px dashed rgba(224,194,140,.2); border-radius: 50%; }
.mobile-joystick-guide::before, .mobile-joystick-guide::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(224,194,140,.15); transform: translate(-50%, -50%); }
.mobile-joystick-guide::before { width: 62px; height: 1px; }
.mobile-joystick-guide::after { width: 1px; height: 62px; }
.mobile-joystick-thumb {
  --stick-x: 0px; --stick-y: 0px; position: absolute; left: 50%; top: 50%; width: 58px; height: 58px;
  border: 1px solid rgba(240,198,111,.65); border-radius: 50%; background: radial-gradient(circle at 38% 32%, #7a6644, #3c392e 60%, #222923);
  box-shadow: inset 0 2px 7px rgba(255,255,255,.1), 0 7px 14px rgba(0,0,0,.42);
  transform: translate(calc(-50% + var(--stick-x)), calc(-50% + var(--stick-y))); transition: transform 90ms ease, border-color 90ms ease;
}
.mobile-joystick.pressed .mobile-joystick-thumb { border-color: #ffe0a0; transition: none; }
.mobile-utility-actions button b { color: #f2c974; font-size: 18px; }
.mobile-utility-actions #mobile-target { left: max(12px, env(safe-area-inset-left)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 138px); }
.mobile-utility-actions #mobile-interact { left: calc(max(12px, env(safe-area-inset-left)) + 62px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 130px); width: 62px; height: 62px; border-color: rgba(225,173,87,.65); }
.mobile-ability { overflow: hidden; border-color: rgba(215,162,85,.62) !important; background: linear-gradient(145deg, rgba(52,72,61,.94), rgba(18,28,23,.94)) !important; }
.mobile-ability.unset { border-style: dashed !important; opacity: .8; }
.mobile-ability .glyph { width: 34px; height: 34px; display: grid; place-items: center; color: #e7c17d; }
.mobile-ability .glyph svg { width: 31px; height: 31px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0,0,0,.65)); }
.mobile-ability kbd { position: absolute; top: 3px; left: 4px; padding: 1px 3px; border: 0; background: rgba(0,0,0,.56); color: #c5b99f; font-size: 7px; }
.mobile-ability > small { position: absolute; right: 5px; bottom: 3px; color: #c5d7cd; }
.mobile-ability .cooldown { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4,7,6,.74); color: #fff; font-size: 11px; font-weight: 800; }
.mobile-ability-1 { right: calc(max(12px, env(safe-area-inset-right)) + 92px); bottom: max(14px, env(safe-area-inset-bottom)); }
.mobile-ability-2 { right: calc(max(12px, env(safe-area-inset-right)) + 103px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 60px); }
.mobile-ability-3 { right: calc(max(12px, env(safe-area-inset-right)) + 66px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 100px); }
.mobile-ability-4 { right: calc(max(12px, env(safe-area-inset-right)) + 12px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 122px); }
.mobile-controls .mobile-attack { right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 84px; height: 84px; border: 2px solid #d7a255; }
.mobile-attack b { color: #f2c974; font-size: 28px; line-height: 1; }
.mobile-bandolier { position: absolute; z-index: 3; left: calc(max(12px, env(safe-area-inset-left)) + 132px); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column-reverse; gap: 5px; pointer-events: auto; }
.mobile-bandolier .quick-slot { position: relative; width: 44px; height: 44px; }
.mobile-bandolier .quick-slot .quick-glyph { width: 29px; height: 29px; }
.mobile-bandolier .quick-slot .quick-glyph svg { width: 27px; height: 27px; }

.mobile-recent-log { display: none; }
body.mobile-mode .mobile-recent-log {
  position: absolute; z-index: 3; top: 8px; right: max(8px, env(safe-area-inset-right)); width: min(166px, calc(50% - 12px)); height: 58px;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3px; padding: 7px 10px; overflow: hidden;
  border: 1px solid rgba(226,198,146,.22); border-radius: 8px 29px 29px 8px;
  background: linear-gradient(270deg, rgba(10,15,13,.96), rgba(18,26,22,.94)); color: #aeb8b2;
  box-shadow: 0 10px 28px rgba(0,0,0,.35); text-align: left; cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
body.mobile-mode .mobile-recent-log:active { border-color: rgba(241,199,119,.58); background: rgba(33,43,37,.96); }
.mobile-recent-label { color: #c9a668; font-size: 6px; font-weight: 900; line-height: 1; letter-spacing: .18em; }
.mobile-recent-lines { min-width: 0; display: grid; align-content: center; gap: 1px; overflow: hidden; }
.mobile-recent-entry, .mobile-recent-empty { display: block; min-width: 0; overflow: hidden; font-size: 7px; line-height: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-recent-empty { color: #69766f; font-style: italic; }
.mobile-recent-entry.party { color: #79e0ad; }
.mobile-recent-entry.whisper { color: #ddaef5; }
.mobile-recent-entry.world { color: #82c5ee; }
.mobile-recent-entry.say, .mobile-recent-entry.loot, .mobile-recent-entry.quest { color: #edcf94; }

body.mobile-mode .status-dock {
  top: 8px; right: auto; bottom: auto; left: max(8px, env(safe-area-inset-left)); width: min(166px, calc(50% - 12px)); min-height: 58px;
  grid-template-columns: 42px minmax(0,1fr); gap: 7px; padding: 7px; border-radius: 29px 8px 8px 29px;
}
body.mobile-mode .target-card {
  z-index: 4; top: 74px; right: auto; left: 50%; width: min(200px, calc(100% - 36px)); min-width: 0; padding: 7px 9px; transform: translateX(-50%);
}
body.mobile-mode .target-card > div:first-child { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px; margin-bottom: 4px; }
body.mobile-mode .target-card span { overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-mode .target-card strong { min-width: 0; overflow: hidden; font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-mode .portrait { width: 42px; height: 42px; }
body.mobile-mode .portrait > span, body.mobile-mode .portrait svg { width: 32px; height: 32px; }
body.mobile-mode .identity { min-height: 15px; margin-bottom: 2px; gap: 4px; }
body.mobile-mode .identity strong { max-width: 74px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-mode .identity > span { display: none; }
body.mobile-mode .status-effects { gap: 2px; margin-left: 0; }
body.mobile-mode .status-effect { width: 18px; height: 18px; }
body.mobile-mode .meter-row { grid-template-columns: 17px minmax(0,1fr); gap: 3px; margin: 2px 0; }
body.mobile-mode .meter-row > b { display: none; }
body.mobile-mode .meter-row > span { font-size: 6px; }
body.mobile-mode .meter { height: 6px; }
body.mobile-mode .meter.xp { height: 3px; }
body.mobile-mode .xp-row { margin-top: 3px; }
body.mobile-mode .ability-wrap, body.mobile-mode .bandolier-wrap, body.mobile-mode .currency-stack { display: none; }
body.mobile-mode.compact-interface .party-hud { top: 120px; }
body.mobile-mode .toast-stack { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 216px); width: min(238px, calc(100% - 40px)); max-height: min(22vh, 132px); gap: 4px; }
body.mobile-mode .target-card.hidden ~ .party-hud { top: 72px; }
body.mobile-mode .target-card.hidden ~ .toast-stack { top: auto; }
body.mobile-mode .toast { padding: 6px 8px; background: rgba(9,15,12,.54); font-size: 8px; backdrop-filter: blur(2px); animation-name: mobile-toast-in; }
body.mobile-mode .toast.important { background: rgba(31,20,38,.62); }
body.mobile-mode .toast.quest { background: rgba(18,31,21,.64); }
body.mobile-mode .toast b { margin-bottom: 2px; font-size: 9px; }
body.mobile-mode .toast-action { margin-top: 5px; padding: 4px 6px; }
body.mobile-mode .interaction-prompt { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 214px); }
body.mobile-mode .interaction-keyboard-hint { display: none; }
body.mobile-mode .interaction-touch-hint { min-width: 35px; height: 29px; display: grid; grid-template-columns: auto auto; place-items: center; gap: 3px; padding: 3px 5px; border: 1px solid rgba(225,173,87,.55); border-radius: 15px; color: #f2c974; background: rgba(20,29,24,.88); }
body.mobile-mode .action-picker { position: fixed; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; width: auto; max-height: calc(var(--interface-height) - 88px); }
body.mobile-mode .action-picker-list { max-height: calc(var(--interface-height) - 190px); }
@keyframes mobile-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

@media (max-width: 900px) {
  .play-area { grid-template-columns: 1fr; }
  .social-panel { display: none; }
  .status-dock { grid-template-columns: 54px minmax(150px, 1fr) auto auto; }
  .currency-stack { display: none; }
  .ability { width: 44px; height: 44px; }
  .text-button { font-size: 0; }
  .text-button .key-hint { font-size: 9px; }
  .text-button .guide-mark { font-size: 12px; }
}

body.compact-interface .play-area { grid-template-columns: 1fr; }
body.compact-interface:not(.mobile-mode) .loot-tray { width: min(330px, calc(100% - 20px)); right: 10px; }
body.compact-interface .social-toggle { display: grid; }
body.compact-interface .social-scrim {
  position: fixed; z-index: 39; inset: 64px 0 0; display: block; width: 100%; padding: 0;
  border: 0; border-radius: 0; background: rgba(2,5,4,.58); backdrop-filter: blur(2px); cursor: pointer;
}
body.compact-interface .social-panel {
  position: fixed; z-index: 45; top: 72px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom));
  width: min(390px, calc(100% - 16px)); min-height: 0; display: grid; grid-template-rows: 52px minmax(0, 1fr);
  border: 1px solid rgba(224,195,143,.24); border-radius: 8px; box-shadow: -18px 18px 55px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transform: translateX(calc(100% + 12px));
  transition: transform .2s ease, opacity .16s ease;
}
body.compact-interface .social-panel.open { opacity: 1; pointer-events: auto; transform: translateX(0); }
body.compact-interface .social-tabs { grid-template-columns: 1fr 1fr 42px; padding: 0 5px 0 10px; }
body.compact-interface .social-close { display: grid; place-items: center; align-self: center; width: 34px; height: 34px; border: 1px solid #354139; border-radius: 4px; color: #a5b0a9; font-size: 19px; }
body.compact-interface .social-close::after { display: none; }
body.compact-interface #players-view { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
body.compact-interface .chat-form { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
body.compact-interface .drawer { width: 100%; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
body.compact-interface .modal-wrap { align-items: safe center; overflow-y: auto; }
body.compact-interface .modal-card { max-height: calc(var(--interface-height) - 24px); }
body.compact-interface .party-hud {
  top: 8px; right: 8px; bottom: auto; left: 8px; display: flex; gap: 5px; padding-bottom: 3px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x;
}
body.compact-interface .party-hud::-webkit-scrollbar { display: none; }
body.compact-interface .party-member-frame {
  width: 182px; flex: 0 0 182px; grid-template-columns: 25px minmax(0, 1fr) 30px; gap: 5px; padding: 5px;
}
body.compact-interface .party-member-frame .party-glyph { width: 24px; height: 24px; }
body.compact-interface .party-member-frame .party-glyph svg { width: 22px; height: 22px; }
body.compact-interface .party-member-frame b,
body.compact-interface .party-member-frame small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.compact-interface .party-member-frame small { font-size: 6px; }
body.compact-interface .party-vitals { gap: 2px; margin-top: 3px; }
body.compact-interface .party-vital { grid-template-columns: 15px minmax(0,1fr) 25px; gap: 3px; }
body.compact-interface .party-vital > strong { font-size: 6px; }
body.compact-interface .party-member-actions { gap: 4px; }
body.compact-interface .party-member-actions button { width: 30px; height: 25px; }
body.compact-interface .party-last-chat { display: none; }
body.compact-interface .chat-attachment-preview { margin-inline: 8px; }

@media (max-width: 650px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 10px; }
  .top-actions { gap: 4px; }
  .zone-heading { display: none; }
  .brand-lockup strong { font-size: 11px; }
  .status-dock { left: 8px; right: 8px; bottom: 8px; grid-template-columns: 42px 1fr; min-height: 158px; }
  .portrait { width: 42px; height: 42px; }
  .ability-wrap { grid-column: 1 / -1; }
  .ability-bar { justify-content: center; }
  .bandolier-wrap { grid-column: 1 / -1; justify-content: center; border-left: 0; padding-left: 0; }
  .ability { width: 44px; height: 40px; }
  .class-options { grid-template-columns: 1fr; }
  .class-card { min-height: 108px; }
  .character-panel { width: calc(100% - 18px); padding: 25px 18px; }
  .character-panel h1 { font-size: 34px; }
  .character-form > input, .primary-button { width: 100%; min-width: 0; }
  .account-banner { grid-template-columns: 1fr; gap: 10px; }
  .account-banner button { width: 100%; }
  .roster-card { grid-template-columns: 38px 1fr auto; }
  .roster-card .delete-character { grid-column: 3; }
  .slot-note { float: none; }
  .vendor-list { grid-template-columns: 1fr; }
  .vendor-header { grid-template-columns: 54px 1fr; }
  .cosmetic-preview { grid-template-columns: 1fr; }
  .vendor-purse { grid-column: 1 / -1; justify-items: start; }
  .trade-mode-grid, .barter-board { grid-template-columns: 1fr; }
  .wardrobe-equipped { grid-template-columns: 1fr; }
  /* iOS Safari zooms the whole page when focusing controls below 16px. */
  .character-form > input,
  .account-form input,
  .chat-form input,
  .chat-form select,
  .select-row select,
  .barter-offer input,
  .barter-offer select,
  .quantity-stepper input { font-size: 16px; }
  .chat-link-card { padding: 22px 18px; }
  .chat-link-quest-meta { grid-template-columns: 1fr; }
}

@media (max-width: 340px) {
  .mobile-joystick { width: 112px; height: 112px; }
  .mobile-joystick-thumb { width: 48px; height: 48px; }
  .mobile-controls button { width: 50px; height: 50px; }
  .mobile-utility-actions #mobile-target { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 124px); }
  .mobile-utility-actions #mobile-interact { left: calc(max(12px, env(safe-area-inset-left)) + 56px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 116px); width: 56px; height: 56px; }
  .mobile-ability-1 { right: calc(max(12px, env(safe-area-inset-right)) + 84px); }
  .mobile-ability-2 { right: calc(max(12px, env(safe-area-inset-right)) + 89px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 56px); }
  .mobile-ability-3 { right: calc(max(12px, env(safe-area-inset-right)) + 52px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 96px); }
  .mobile-ability-4 { right: max(12px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 118px); }
  .mobile-controls .mobile-attack { width: 78px; height: 78px; }
  .mobile-bandolier { left: calc(max(12px, env(safe-area-inset-left)) + 114px); }
  .mobile-bandolier .quick-slot { width: 42px; height: 42px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.mobile-mode .game-shell { grid-template-rows: 46px 1fr; }
  body.mobile-mode .topbar { background: rgba(7, 12, 10, .74); backdrop-filter: blur(7px); }
  body.mobile-mode.loot-tray-open .game-shell { grid-template-columns: minmax(0, 1fr) min(290px, 40vw); grid-template-rows: 46px minmax(0, 1fr); }
  body.mobile-mode.loot-tray-open .topbar { grid-column: 1 / -1; grid-row: 1; }
  body.mobile-mode.loot-tray-open .play-area { grid-column: 1; grid-row: 2; }
  body.mobile-mode.loot-tray-open .loot-tray {
    grid-column: 2; grid-row: 2; width: auto; height: auto; max-height: none; padding: 9px;
    border-width: 0 0 0 1px; box-shadow: -10px 0 26px rgba(0,0,0,.28);
  }
  body.mobile-mode.loot-tray-open .loot-tray-list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; }
  body.mobile-mode.loot-tray-open .loot-tray-item { height: auto; min-height: 88px; }
  body.mobile-mode .mini-sigil { width: 27px; height: 27px; flex-basis: 27px; }
  body.mobile-mode .brand-music-toggle { width: 28px; height: 27px; }
  body.mobile-mode.compact-interface .social-scrim { inset: 46px 0 0; }
  body.mobile-mode.compact-interface .social-panel { top: 50px; bottom: 4px; }
  body.mobile-mode .status-dock {
    top: 4px; width: 150px; min-height: 48px; grid-template-columns: 36px minmax(0,1fr); gap: 5px; padding: 5px; border-radius: 24px 7px 7px 24px;
  }
  body.mobile-mode .mobile-recent-log { top: 4px; width: 150px; height: 48px; gap: 1px; padding: 5px 8px; border-radius: 7px 24px 24px 7px; }
  body.mobile-mode .portrait { width: 36px; height: 36px; }
  body.mobile-mode .portrait > span, body.mobile-mode .portrait svg { width: 27px; height: 27px; }
  body.mobile-mode .identity { min-height: 12px; margin-bottom: 1px; }
  body.mobile-mode .identity strong { font-size: 8px; }
  body.mobile-mode .meter-row { margin: 1px 0; }
  body.mobile-mode .meter { height: 5px; }
  body.mobile-mode .target-card {
    top: 4px; width: min(170px, calc(100% - 330px)); padding: 5px 7px; border-radius: 6px; background: rgba(8,13,11,.74);
  }
  body.mobile-mode .target-card > div:first-child { margin-bottom: 3px; }
  body.mobile-mode .target-card strong { font-size: 8px; }
  body.mobile-mode.compact-interface .party-hud { top: 56px; }
  body.mobile-mode .toast-stack { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); width: min(320px, calc(100% - 352px)); max-height: 92px; }
  body.mobile-mode .interaction-prompt { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 112px); }
  body.mobile-mode .mobile-joystick { left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); width: 94px; height: 94px; }
  body.mobile-mode .mobile-joystick-guide { inset: 15px; }
  body.mobile-mode .mobile-joystick-guide::before { width: 46px; }
  body.mobile-mode .mobile-joystick-guide::after { height: 46px; }
  body.mobile-mode .mobile-joystick-thumb { width: 44px; height: 44px; }
  body.mobile-mode .mobile-controls button { width: 46px; height: 46px; }
  body.mobile-mode .mobile-controls button svg { width: 19px; height: 19px; }
  body.mobile-mode .mobile-utility-actions #mobile-target { left: calc(max(8px, env(safe-area-inset-left)) + 100px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 48px); }
  body.mobile-mode .mobile-utility-actions #mobile-interact { left: calc(max(8px, env(safe-area-inset-left)) + 104px); bottom: max(8px, env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  body.mobile-mode .mobile-bandolier { left: calc(max(8px, env(safe-area-inset-left)) + 158px); bottom: max(8px, env(safe-area-inset-bottom)); gap: 3px; }
  body.mobile-mode .mobile-bandolier .quick-slot { width: 40px; height: 40px; }
  body.mobile-mode .mobile-ability-1 { right: calc(max(8px, env(safe-area-inset-right)) + 76px); bottom: max(8px, env(safe-area-inset-bottom)); }
  body.mobile-mode .mobile-ability-2 { right: calc(max(8px, env(safe-area-inset-right)) + 84px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 48px); }
  body.mobile-mode .mobile-ability-3 { right: calc(max(8px, env(safe-area-inset-right)) + 52px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 78px); }
  body.mobile-mode .mobile-ability-4 { right: max(8px, env(safe-area-inset-right)); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 92px); }
  body.mobile-mode .mobile-controls .mobile-attack { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: 70px; height: 70px; }
  body.mobile-mode .mobile-attack b { font-size: 23px; }
}

/* Pack and Quest Journal reserve their own shelf instead of covering the active world. */
body.field-drawer-open .game-shell {
  grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 420px);
  grid-template-rows: 64px minmax(0, 1fr);
}
body.field-drawer-open .topbar { grid-column: 1 / -1; grid-row: 1; }
body.field-drawer-open .play-area { grid-column: 1; grid-row: 2; min-width: 0; grid-template-columns: minmax(0, 1fr); }
body.field-drawer-open .social-panel { display: none; }
body.inventory-drawer-open #inventory-toggle,
body.quest-drawer-open #quest-toggle { border-color: rgba(215,162,85,.3); background: rgba(215,162,85,.09); color: #efc777; }
body.field-drawer-open .social-toggle,
body.loot-tray-open .social-toggle { display: grid; }
body.loot-tray-open #loot-toggle { border-color: rgba(215,162,85,.3); background: rgba(215,162,85,.09); color: #efc777; }
body.field-drawer-open .field-drawer {
  top: 64px; right: 0; bottom: 0; width: clamp(340px, 30vw, 420px); padding: 18px;
  border-width: 0 0 0 1px; box-shadow: -14px 0 38px rgba(0,0,0,.34);
}

body.mobile-mode.field-drawer-open .game-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 52px min(38%, 320px) minmax(0, 1fr);
}
body.mobile-mode.field-drawer-open .topbar { grid-column: 1; grid-row: 1; }
body.mobile-mode.field-drawer-open .play-area { grid-column: 1; grid-row: 3; min-height: 0; }
body.mobile-mode.field-drawer-open .field-drawer {
  top: 52px; right: 0; bottom: auto; width: 100%; height: min(38%, 320px); padding: 9px 11px max(9px, env(safe-area-inset-bottom));
  border-width: 0 0 1px; box-shadow: 0 9px 26px rgba(0,0,0,.3); animation-name: field-drawer-down;
}
body.mobile-mode.field-drawer-open .field-drawer .drawer-header { align-items: center; padding-bottom: 7px; }
body.mobile-mode.field-drawer-open .field-drawer .drawer-header h2 { display: inline; margin-left: 5px; font-size: 14px; }
body.mobile-mode.field-drawer-open .field-drawer .paperdoll { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 9px 0; }
body.mobile-mode.field-drawer-open .field-drawer .equip-slot { min-height: 58px; grid-template-columns: 29px minmax(0, 1fr); gap: 2px 5px; padding: 5px; }
body.mobile-mode.field-drawer-open .field-drawer .equip-slot i { width: 27px; height: 27px; }
body.mobile-mode.field-drawer-open .field-drawer .equip-slot i svg { width: 24px; height: 24px; }
body.mobile-mode.field-drawer-open .field-drawer .equip-slot span { font-size: 5px; }
body.mobile-mode.field-drawer-open .field-drawer .equip-slot b { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-mode.field-drawer-open .field-drawer .section-label { margin: 10px 0 6px; }
body.mobile-mode.field-drawer-open .field-drawer .item-detail { max-height: 128px; padding: 9px; }
body.mobile-mode.field-drawer-open .field-drawer .quest-list { margin-top: 9px; }
@keyframes field-drawer-down { from { opacity: 0; transform: translateY(-12px); } }

@media (orientation: landscape) and (max-height: 520px) {
  body.mobile-mode.field-drawer-open .game-shell {
    grid-template-columns: minmax(0, 1fr) min(320px, 42vw);
    grid-template-rows: 46px minmax(0, 1fr);
  }
  body.mobile-mode.field-drawer-open .topbar { grid-column: 1 / -1; grid-row: 1; }
  body.mobile-mode.field-drawer-open .play-area { grid-column: 1; grid-row: 2; }
  body.mobile-mode.field-drawer-open .field-drawer {
    top: 46px; right: 0; bottom: 0; width: min(320px, 42vw); height: auto; padding: 9px max(9px, env(safe-area-inset-right)) 9px 9px;
    border-width: 0 0 0 1px; box-shadow: -10px 0 26px rgba(0,0,0,.3); animation-name: drawer-in;
  }
  body.mobile-mode.field-drawer-open .field-drawer .paperdoll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .surname-form input { font-size: 16px; }
}