/* Retained panel palette from the original game's ui/panel.ts. */
:root {
  color-scheme: dark;
  --ui-scale: 1;
  --scaled-ui-width: calc(100vw - 28px);
  --panel-ink: #eadfc6;
  --panel-gold: #f4dc9a;
  --panel-border: #6e5128;
  --panel-fill: linear-gradient(180deg, #1b140ff5, #0f0c0af5);
  --panel-muted: #bdaf95;
  --panel-surface: #17120e;
}
#hud { scale: var(--ui-scale); transform-origin: top left; }
#target-frame { scale: var(--ui-scale); transform-origin: top center; }
#quest-tracker { scale: var(--ui-scale); transform-origin: top right; }
#action-bar, #nearby-actions, #ability-notice, #hud-rejection {
  scale: var(--ui-scale); transform-origin: bottom center;
}
#chat-overlay { scale: var(--ui-scale); transform-origin: bottom right; }
#action-bar, #nearby-actions { max-width: var(--scaled-ui-width); }
body.high-contrast-text {
  --panel-ink: #fff;
  --panel-gold: #ffdf7f;
  --panel-muted: #eee1c5;
  --panel-border: #d5ae5a;
}
body.high-contrast-text :is(.panel, .native-entry, #hud, #action-bar,
  #game-panels .panel-body, #chat-overlay, #nearby-actions) {
  text-shadow: 0 1px 2px #000, 0 0 1px #000;
}
body.high-contrast-text :is(button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #ffe08b;
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.screen-reader-copy { position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
button, input, select, textarea { font: inherit; }
button, summary { touch-action: manipulation; }
:where(button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--panel-gold);
  outline-offset: 3px;
}
:where(input, select, textarea) {
  box-sizing: border-box;
  color: var(--panel-ink);
  background: #120e0b;
  border: 1px solid #6e5128;
  border-radius: 4px;
  padding: 8px;
  min-width: 0;
}
:where(button) {
  color: #f0dfba;
  background: #2a1d13;
  border: 1px solid #7a6237;
  border-radius: 5px;
  padding: 7px 10px;
  min-height: 34px;
  cursor: pointer;
}
button:hover:not(:disabled) { background-color: #3a2717; border-color: #d7b56d; }
button:disabled { cursor: default; opacity: .55; }
.panel, .native-entry, #status, #hud, #action-bar {
  color: var(--panel-ink);
  background: var(--panel-fill);
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  box-shadow: 0 8px 24px #0008, inset 0 1px 0 #f4dc9a18;
}
.native-entry, #hud, #status { box-sizing: border-box; }
.native-entry :is(input, select, button) {
  color: var(--panel-ink);
  background: #2a1d13;
  border-color: var(--panel-border);
}
.native-entry strong { color: var(--panel-gold); font: bold 22px Georgia, serif; }
#action-bar { box-sizing: border-box; width: max-content; z-index: 4; scrollbar-width: thin; scrollbar-color: #8a6732 #120e0b; }
#action-bar button { flex: 0 0 auto; border-radius: 5px; font: 12px/1.3 system-ui, sans-serif; }
#action-bar button img { border: 1px solid #a17c3e; box-shadow: 0 2px 5px #0008; }
#ability-scroll-hint {
  position: fixed;
  right: 14px;
  z-index: 5;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #a17c3e;
  border-radius: 4px;
  color: #fff1c5;
  background: rgb(11 17 23 / 92%);
  font: 12px/1.3 system-ui, sans-serif;
  pointer-events: none;
}
@media (max-width: 500px) {
  #ability-scroll-hint { padding: 2px 5px; }
}
#game-panels {
  position: fixed; left: 14px; right: 60px; bottom: 112px;
  z-index: 5; display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: 4px; pointer-events: auto;
  scrollbar-width: thin; scrollbar-color: #8a6732 transparent;
  color: var(--panel-ink); font: 14px/1.5 system-ui, sans-serif;
}
#game-panels > details { flex: 0 0 auto; pointer-events: auto; }
#game-panel-overflow { position: fixed; right: 8px; z-index: 6;
  display: block; pointer-events: auto; }
#game-panel-overflow button { width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--panel-border); border-radius: 5px;
  background: var(--panel-fill); color: var(--panel-gold);
  font: bold 23px/1 system-ui, sans-serif; }
#party-invitation { position: fixed; z-index: 1100; top: 18px; left: 50%;
  width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 16px;
  translate: -50% 0; text-align: center; color: var(--panel-ink);
  background: linear-gradient(180deg, #21180ff5, #0c0907f5); border: 1px solid #d7b56dbb;
  border-radius: 7px; box-shadow: 0 14px 42px #000c, inset 0 1px #ffffff18;
  pointer-events: auto; }
#party-invitation[hidden] { display: none; }
#party-invitation > span { display: block; color: #bba56b; font: 700 10px/1.2 system-ui, sans-serif;
  letter-spacing: .17em; text-transform: uppercase; }
#party-invitation > strong { display: block; margin-top: 5px; color: #ffe1a0;
  font: 700 17px/1.25 Georgia, "Times New Roman", serif; }
#party-invitation > small { display: block; margin-top: 4px; color: #bcae95; }
#party-invitation > div { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
#party-invitation button[value="accept"] { border-color: #9dbd75; color: #ecffd8; background: #26351d; }
#party-invitation button[value="decline"] { border-color: #9d6258; color: #ffd8d1; background: #351c18; }
#resident-dialogue { position: fixed; z-index: 12; left: 50%; bottom: 146px;
  translate: -50% 0; display: flex; align-items: flex-start; gap: 10px;
  width: min(760px, calc(100vw - 28px)); box-sizing: border-box;
  color: var(--panel-ink); background: transparent;
  pointer-events: auto; }
#resident-dialogue[hidden] { display: none; }
#waystone-choice { position: fixed; z-index: 12; left: 50%; bottom: 146px;
  translate: -50% 0; width: min(420px, calc(100vw - 28px)); box-sizing: border-box;
  padding: 12px; color: var(--panel-ink); border: 1px solid #b8893acc;
  border-radius: 8px; background: linear-gradient(180deg, #18120df2, #090705f2);
  box-shadow: 0 16px 48px #000d, inset 0 1px #ffffff12; pointer-events: auto; }
#waystone-choice[hidden] { display: none; }
#waystone-choice header, #waystone-choice nav { display: flex; align-items: center; gap: 8px; }
#waystone-choice header > strong { flex: 1; color: #f4dc9a; font: 800 18px/1.2 Georgia, serif; }
#waystone-choice header > button { padding: 2px 8px; font-size: 19px; }
#waystone-choice p { margin: 10px 0; color: #efe7d2; }
#waystone-choice nav { flex-wrap: wrap; }
#waystone-choice .waystone-services { margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #b8893a55; }
#waystone-choice nav button:disabled { opacity: .5; }
.resident-portrait { position: relative; overflow: hidden; flex: 0 0 128px; height: 128px;
  display: grid; place-content: center;
  text-align: center; border: 2px solid #b8893a; border-radius: 8px;
  background: radial-gradient(circle at 50% 25%, #4a3c32, #171018 72%);
  box-shadow: inset 0 0 22px #000b; }
.resident-portrait > strong { color: #f4dc9a; font: 800 46px/1 Georgia, serif; text-shadow: 0 2px 9px #000; }
.resident-portrait > small { margin-top: 8px; color: #c1ae82; text-transform: capitalize; }
#resident-dialogue.resident-portrait-rendered .resident-portrait {
  background: radial-gradient(circle at 50% 25%, #4a3c321f, #17101852 78%); }
#resident-dialogue.resident-portrait-rendered .resident-portrait > strong { visibility: hidden; }
#resident-dialogue.resident-portrait-rendered .resident-portrait > small {
  position: absolute; inset: auto 5px 5px; margin: 0; padding: 3px 5px;
  border-radius: 3px; color: #e3d0a2; background: #090705c9; text-shadow: 0 1px 4px #000; }
.resident-dialogue-main { flex: 1; min-width: 0; padding: 12px;
  border: 1px solid #b8893acc; border-radius: 8px;
  background: linear-gradient(180deg, #18120df2, #090705f2);
  box-shadow: 0 16px 48px #000d, inset 0 1px #ffffff12; }
.resident-dialogue-main > header { display: flex; align-items: start; gap: 8px;
  padding-bottom: 7px; border-bottom: 1px solid #7c5c2c77; }
.resident-dialogue-main > header > div { flex: 1; min-width: 0; }
.resident-dialogue-main .resident-name { display: block; color: #f4dc9a;
  font: 800 18px/1.2 Georgia, "Times New Roman", serif; }
.resident-meta { display: block; margin-top: 2px; color: #b7a77f; font-size: 12px; }
.resident-dialogue-main > header > button { padding: 2px 8px; font-size: 19px; }
.resident-line { margin: 9px 0; color: #efe7d2; font: 14px/1.45 Georgia, serif; }
.resident-quest { margin: 8px 0; padding: 8px 10px; border-left: 2px solid #d6b46e;
  background: #2c2319bb; }
.resident-quest > strong, .resident-quest > small { display: block; }
.resident-quest > strong { color: #f0d890; }
.resident-quest > small { margin-top: 2px; color: #baa87d; text-transform: capitalize; }
.resident-quest > p { margin: 6px 0 0; max-height: 92px; overflow: auto; white-space: pre-line; color: #d2c7b2; }
.resident-choices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.resident-choices button { text-align: left; }
@media (max-width: 680px) {
  #resident-dialogue { bottom: 142px; gap: 7px; }
  .resident-portrait { flex-basis: 82px; height: 88px; }
  .resident-portrait > strong { font-size: 34px; }
  .resident-dialogue-main { padding: 9px; }
  .resident-quest > p { max-height: 58px; }
}
#discovery-card { position: fixed; z-index: 6; top: 20%; left: 50%;
  width: min(560px, calc(100vw - 32px)); box-sizing: border-box; padding: 17px 22px;
  translate: -50% -10px; opacity: 0; pointer-events: none; text-align: center;
  color: #eadfc6; background: linear-gradient(180deg, #100b07e8, #070504e8);
  border-block: 1px solid #d7b56d99; box-shadow: 0 18px 60px #000d, inset 0 1px #ffffff18;
  transition: opacity .7s ease, translate .7s ease; }
#discovery-card[hidden] { display: none; }
#discovery-card.discovery-visible { opacity: 1; translate: -50% 0; }
#discovery-card > span { display: block; color: #bba56b; font: 700 11px/1.2 system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; }
#discovery-card > strong { display: block; margin-top: 5px; color: #ffe1a0;
  font: 800 24px/1.12 Georgia, "Times New Roman", serif; text-shadow: 0 2px 12px #000; }
#discovery-card > p { margin: 8px 0 0; color: #d8cdb6; font: 13px/1.45 Georgia, serif; }
body.reduce-motion #discovery-card { transition: none; }
@media (max-width: 680px) {
  #discovery-card { top: 16%; width: calc(100vw - 20px); padding: 14px 15px; }
  #discovery-card > strong { font-size: 20px; }
  #discovery-card > p { font-size: 12px; }
}
#game-panels > details > summary {
  padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: 5px;
  background: var(--panel-fill); color: var(--panel-gold); cursor: pointer; white-space: nowrap;
}
#game-panels > details[open] > summary { border-color: #d7b56d; background: #3a2717; }
#game-panels > .window-secondary > summary { display: none; }
#game-panels .panel-body {
  box-sizing: border-box; position: fixed;
  width: min(450px, calc(100vw - 16px)); min-width: min(280px, calc(100vw - 16px));
  max-width: calc(100vw - 16px); max-height: calc(100dvh - 130px);
  padding: 0 18px 18px; overflow: auto; resize: both; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #8a6732 #120e0b;
  border: 1px solid #8a6732; border-radius: 7px; background: var(--panel-fill);
  background-color: #0f0c0a;
  box-shadow: 0 12px 28px #000b, inset 0 1px 0 #f4dc9a18;
}
#companion-controls .panel-body { width: min(320px, calc(100vw - 16px)); }
#companion-help { margin: 14px 0 10px; color: var(--panel-muted); }
.companion-order-title { margin: 14px 0 6px; color: var(--panel-gold); font: 600 13px/1.3 system-ui, sans-serif; }
.companion-orders { display: flex; gap: 7px; }
.companion-orders button { font-size: 13px; }
.companion-orders button[aria-disabled="true"] { opacity: .55; cursor: help; }
.companion-orders button:focus-visible { outline: 2px solid #f2d17f; outline-offset: 2px; }
#companion-order-status { margin: 10px 0 0; color: var(--panel-muted); font-size: 12px; }
#companion-order-status:empty { display: none; }
.window-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 9px 0; background: #21170f;
  border-bottom: 1px solid #6e5128; cursor: grab; touch-action: none; margin-bottom: 12px; }
.window-head .dommy-contents { display: flex; align-items: center;
  justify-content: space-between; gap: 10px; width: 100%; }
#game-panels > .window-active .panel-body { border-color: #d7b56d; }
#game-panels > .window-active .window-head { background: #352514; }
.window-head strong { font: bold 18px Georgia, serif; color: var(--panel-gold); }
.window-close { min-height: 28px; padding: 0 8px; font-size: 22px; }
.keybinding-row { display: grid; grid-template-columns: minmax(125px, 1fr) 1.4fr;
  align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #80633b44; }
.keybinding-row > span:first-child { color: #d8c49b; }
.keybinding-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.keybinding-chip { display: inline-flex; align-items: stretch; border: 1px solid #80633b;
  border-radius: 5px; overflow: hidden; background: var(--panel-surface); }
.keybinding-chip > button { border: 0; border-radius: 0; background: transparent; }
.keybinding-key { min-height: 36px; padding: 4px 9px; background: var(--panel-surface); }
.keybinding-key.listening { color: #17110d; background: var(--panel-gold); }
.keybinding-remove { min-height: 36px; padding: 4px 9px; color: #ebae9d;
  border-left: 1px solid #80633b !important; }
#keybinding-reset { margin-top: 12px; }
.window-links { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
#game-panels [data-journal] { white-space: pre-wrap; }
#game-panels [data-journal="quests"] { white-space: normal; }
.profession-reference { padding: 10px; border: 1px solid #80633b55; border-radius: 4px; background: #33241644; }
.profession-reference > summary { font-weight: 600; }
.profession-reference [data-journal] { margin-top: 12px; line-height: 1.65; }
#social .panel-body { width: min(760px, calc(100vw - 16px)); }
.social-browser-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.social-browser-head strong, .social-browser-head small { display: block; }
.social-browser-head strong { color: var(--panel-gold); font: bold 21px Georgia, serif; }
.social-browser-head small { margin-top: 3px; color: #9f9074; }
.social-browser-head button { min-height: 29px; padding: 4px 8px; }
.social-presence { display: flex; align-items: center; gap: 5px; margin: 10px 0; padding: 7px;
  border: 1px solid #58452c; border-radius: 5px; background: #15110d; }
.social-presence > span { margin-right: 3px; color: #9f9074; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; }
.social-presence button { min-height: 28px; padding: 3px 7px; font-size: 10px; }
.social-presence button[data-selected="true"] { opacity: 1; color: #17210f;
  border-color: #9cbd77; background: #a7c987; }
.social-presence[data-presence="busy"] button[data-selected="true"] { color: #fbe8e4;
  border-color: #a65e55; background: #73362f; }
.social-presence[data-presence="away"] button[data-selected="true"] { color: #271b0c;
  border-color: #d0a44f; background: #d5ad60; }
.social-presence input { flex: 1; min-width: 120px; padding: 5px 7px; }
.social-layout { display: grid; grid-template-columns: minmax(190px, .72fr) minmax(280px, 1.4fr);
  gap: 12px; }
.social-contacts { display: grid; align-content: start; gap: 7px; }
.social-contact-section { border: 1px solid #57442d; border-radius: 5px; background: #15110d; }
.social-contact-section h3, .social-section-head { margin: 0; padding: 7px 8px;
  border-bottom: 1px solid #4b3925; color: #d6b46e; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; }
.social-contact-section h3 span { float: right; color: #85765f; }
.social-contact { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 8px; border-bottom: 1px solid #403121; }
.social-contact:last-child { border-bottom: 0; }
.social-contact strong, .social-contact small { display: block; }
.social-contact strong { color: #d9caaa; }
.social-contact small { color: #81745e; font-size: 9px; }
.social-contact[data-online="true"] small { color: #8fc379; }
.social-contact > div:last-child { display: flex; gap: 3px; }
.social-contact button { min-height: 25px; padding: 2px 5px; font-size: 9px; }
.social-empty { margin: 0; padding: 8px; color: #81745e; font-size: 10px; font-style: italic; }
.social-relation-form { display: flex; gap: 4px; }
.social-relation-form input { flex: 1; min-width: 0; padding: 5px; }
.social-relation-form button { min-height: 29px; padding: 4px 6px; font-size: 10px; }
.social-activity { display: flex; min-width: 0; flex-direction: column; border: 1px solid #57442d;
  border-radius: 5px; background: #15110d; }
.social-section-head { display: flex; justify-content: space-between; }
.social-section-head h3 { margin: 0; font-size: inherit; }
.social-section-head span { color: #85765f; }
.social-feed { min-height: 190px; max-height: 310px; margin: 0; padding: 4px 8px;
  overflow-y: auto; list-style: none; }
#social .social-feed li { padding: 5px 3px; color: #a99a7c; border-bottom: 1px solid #403121;
  overflow-wrap: anywhere; }
#social .social-feed li[data-channel="group"] { color: #8fc3e8; }
#social .social-feed li[data-channel="guild"] { color: #8ee6b4; }
#social .social-feed li[data-channel="whisper"] { color: #dc9ce8; }
#social .social-feed li[data-channel="rejected"] { color: #e28c7a; }
.social-composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px;
  margin-top: auto; padding: 8px; border-top: 1px solid #57442d; }
.social-composer [data-social-compose-target] { grid-column: 1 / -1; }
.social-composer input { min-width: 0; }
.social-compose-status { grid-column: 1 / -1; margin: 0; color: #ff9c86; }
.social-compose-status:empty { display: none; }
.social-compact-controls { margin-top: 12px; padding: 9px; border: 1px solid #59452c;
  border-radius: 4px; background: #17110d; }
@media (max-width: 620px) {
  .social-presence { flex-wrap: wrap; }
  .social-presence input { flex-basis: 100%; }
  .social-layout { grid-template-columns: 1fr; }
  .social-feed { min-height: 140px; }
}
#guild-panel .panel-body { width: min(760px, calc(100vw - 16px)); }
.guild-browser-head { display: flex; justify-content: space-between; gap: 14px; align-items: end;
  padding-bottom: 11px; border-bottom: 1px solid #6e512880; }
.guild-browser-head small, .guild-browser-head strong { display: block; }
.guild-browser-head small { color: #8f8067; font-size: 10px; letter-spacing: .07em;
  text-transform: capitalize; }
.guild-browser-head strong { margin-top: 2px; color: var(--panel-gold); font: bold 21px Georgia, serif; }
.guild-browser-id { color: #8ee6b4; font-size: 11px; }
.guild-browser-summary { margin: 8px 0; color: #a99b80; font-size: 11px; }
.guild-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 9px 0; }
.guild-tab { min-height: 34px; padding: 4px 6px; background: #17110d; }
.guild-tab[data-selected="true"] { border-color: #d7b56d; color: #f1d391;
  background: linear-gradient(#49321a, #291a0d); }
.guild-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.guild-member-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 8px;
  align-items: center; padding: 8px; border: 1px solid #57442d; border-radius: 5px;
  background: linear-gradient(135deg, #251b12, #120e0a); }
.guild-member-seal { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center;
  border: 1px solid #8d7142; border-radius: 50%; color: #f1d391; background: #3c2917;
  font: bold 17px Georgia, serif; }
.guild-member-card strong { color: #ead9b6; }
.guild-member-card small { overflow: hidden; color: #8f8067; font-size: 9px;
  text-overflow: ellipsis; white-space: nowrap; }
.guild-records { display: grid; gap: 6px; max-height: min(46vh, 410px); overflow-y: auto; }
.guild-record { padding: 8px 10px; border: 1px solid #57442d; border-radius: 5px;
  background: #17110d; }
.guild-record strong, .guild-record span { display: block; }
.guild-record strong { color: #d9caaa; }
.guild-record span { margin-top: 3px; color: #8f8067; font-size: 10px; }
.guild-empty { margin: 0; padding: 18px; border: 1px dashed #57442d; border-radius: 5px;
  color: #8f8067; text-align: center; }
.guild-action-browser { display: grid; gap: 9px; padding: 10px; border: 1px solid #6e5128;
  border-radius: 5px; background: linear-gradient(135deg, #251b12, #120e0a); }
.guild-action-browser label { color: #d4b56f; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; }
.guild-action-browser input, .guild-action-browser select { display: block; width: 100%;
  box-sizing: border-box; margin-top: 3px; }
.guild-action-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.guild-action-hint { margin: 0; color: #8f8067; font-size: 10px; }
.guild-action-browser > button { justify-self: end; min-width: 160px; }
.guild-browser-error { margin: 8px 0 0; color: #e28c7a; }
.guild-compact-controls { margin-top: 12px; padding-top: 8px; border-top: 1px solid #5f482c66; }
.guild-compact-controls > summary { cursor: pointer; color: #8f8067; font-size: 10px; }
@media (max-width: 620px) {
  .guild-browser-head { display: grid; }
  .guild-tabs, .guild-member-grid, .guild-action-fields { grid-template-columns: 1fr; }
}
#commerce .panel-body { width: min(790px, calc(100vw - 16px)); }
.exchange-browser-head { display: flex; justify-content: space-between; align-items: end;
  gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #6e512880; }
.exchange-browser-head small, .exchange-browser-head strong { display: block; }
.exchange-browser-head small { color: #8f8067; font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; }
.exchange-browser-head strong { margin-top: 2px; color: var(--panel-gold);
  font: bold 21px Georgia, serif; }
.exchange-purse { color: #e7cb8a; font-weight: bold; white-space: nowrap; }
.exchange-browser-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px;
  gap: 9px; margin-top: 10px; }
.exchange-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px; max-height: min(45vh, 400px); overflow-y: auto; }
.exchange-card { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center; gap: 7px; min-width: 0; min-height: 52px; padding: 7px;
  text-align: left;
  background: linear-gradient(135deg, #281d12, #15100c); }
.exchange-card[data-selected="true"] { border-color: #d7b56d; background: #3b2918; }
.exchange-card img { width: 34px; height: 34px; object-fit: contain; }
.exchange-card-copy { min-width: 0; }
.exchange-card-copy strong, .exchange-card-copy small { display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.exchange-card-copy strong { color: #e8d8b6; }
.exchange-card-copy small { margin-top: 2px; color: #9f8c69; font-size: 10px;
  line-height: 1.2; text-transform: capitalize; }
.exchange-card b { color: #d5b46e; font-size: 11px; }
.exchange-detail { padding: 10px; border: 1px solid #70522e; border-radius: 5px;
  background: linear-gradient(135deg, #302114, #15100c); }
.exchange-detail > img { display: block; width: 58px; height: 58px; margin: 0 auto;
  object-fit: contain; }
.exchange-detail h3 { margin: 5px 0 1px; color: #ead8b1; text-align: center;
  font: bold 18px Georgia, serif; }
.exchange-detail p { margin: 5px 0; color: #a89878; }
.exchange-scarcity { text-align: center; text-transform: capitalize; }
.exchange-detail label { display: block; margin-top: 10px; color: #d4b56f; }
.exchange-detail input { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; }
.exchange-detail input[aria-invalid="true"] { border-color: #e6b38b; }
.exchange-detail .exchange-feedback { color: #e6b38b; }
.exchange-feedback:empty { display: none; }
.exchange-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.exchange-actions button { min-width: 0; padding: 5px 3px; font-size: 10px; }
.exchange-empty { padding: 15px; color: #9f8c69; text-align: center; }
.exchange-compact-controls { margin-top: 12px; padding-top: 8px; border-top: 1px solid #5f482c66; }
.exchange-compact-controls > summary { cursor: pointer; color: #8f8067; font-size: 10px; }
@media (max-width: 620px) {
  .exchange-browser-layout { grid-template-columns: 1fr; }
  .exchange-shelf { max-height: min(30vh, 210px); }
  .exchange-detail { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 3px 10px; }
  .exchange-detail > img { grid-row: 1 / 4; }
  .exchange-detail h3, .exchange-scarcity { text-align: left; }
  .exchange-detail label, .exchange-total, .exchange-feedback, .exchange-actions { grid-column: 1 / -1; }
}
#party .panel-body { width: min(720px, calc(100vw - 16px)); }
.party-browser-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.party-browser-head strong, .party-browser-head small { display: block; }
.party-browser-head strong { color: var(--panel-gold); font: bold 21px Georgia, serif; }
.party-browser-head small { margin-top: 3px; color: #aa9a7b; }
.party-room-code { padding: 5px 8px; color: #181108; background: #d7b56d; border-radius: 4px;
  font-weight: 900; letter-spacing: .12em; }
.party-adventure-types { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
#party .party-adventure-types button { min-height: 31px; padding: 5px 11px;
  border-color: #59442b; background: #17110d; color: #bbab8b; font-size: 12px; }
#party .party-adventure-types button[aria-pressed="true"] { border-color: #d7b56d;
  background: #49341d; color: #fff0c6; }
.party-adventure-rail { display: flex; gap: 5px; margin: 7px 0 11px; padding-bottom: 5px;
  overflow-x: auto; scrollbar-width: thin; }
#party .party-adventure-choice { flex: 0 0 150px; min-height: 54px; padding: 6px 8px; text-align: left;
  background: #17110d; }
.party-adventure-choice strong, .party-adventure-choice small { display: block; }
.party-adventure-choice strong { overflow: hidden; color: #d9c9a6; text-overflow: ellipsis; white-space: nowrap; }
.party-adventure-choice small { margin-top: 3px; color: #83745c; font-size: 9px; text-transform: capitalize; }
.party-adventure-choice[data-difficulty="heroic"] { border-color: #70528e; }
.party-adventure-choice[data-difficulty="pvp"] { border-color: #4b8390; }
.party-adventure-choice[data-selected="true"] { opacity: 1; border-color: #d7b56d;
  background: linear-gradient(135deg, #4b341b, #21150c); }
.party-adventure-detail { padding: 11px; border: 1px solid #75582f; border-radius: 6px;
  background: radial-gradient(circle at 90% 0, #6a47252e, transparent 48%), #17110d; }
.party-adventure-detail > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.party-adventure-detail > div:first-child strong { color: #ead8ad; font: bold 17px Georgia, serif; }
.party-adventure-detail > div:first-child small { color: #b79a62; text-transform: capitalize; }
.party-adventure-detail p { margin: 6px 0 0; color: #b7a77f; }
@media (max-width: 700px) {
  .party-adventure-types::after { content: "Swipe choices →"; flex-basis: 100%;
    margin-top: 2px; color: var(--panel-muted); font-size: 11px; text-align: right; }
  .party-adventure-detail > div:first-child { display: block; }
  .party-adventure-detail > div:first-child small { display: block; margin-top: 4px; }
}
.party-browser-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.party-browser-actions .party-primary { border-color: #c4a057; color: #fff0c6;
  background: linear-gradient(#5a3f21, #352312); }
.party-room, .party-open { margin-top: 13px; padding-top: 10px; border-top: 1px solid #6e512880; }
.party-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.party-section-head h3 { margin: 0; color: #d6b46e; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; }
.party-section-head span { color: #8e8067; font-size: 10px; }
.party-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.party-member-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 8px;
  min-height: 42px; padding: 7px; border: 1px solid #5f4b31; border-radius: 5px; background: #15110d; }
.party-member-card > img { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 4px;
  border: 1px solid #79623d; }
.party-member-card strong, .party-member-card small { display: block; text-transform: capitalize; }
.party-member-card strong { color: #e5d6b5; }
.party-member-card small { color: #8d7f67; font-size: 10px; }
.party-member-badges { grid-column: 2; display: flex; flex-wrap: wrap; gap: 3px; }
.party-member-badges span { padding: 1px 4px; color: #b9a77f; background: #2b2116;
  border-radius: 3px; font-size: 9px; text-transform: capitalize; }
.party-member-card[data-ready="true"] { border-color: #76915b; }
.party-member-card[data-ready="true"] .party-member-badges span:last-of-type { color: #cbe8b6; background: #26361e; }
.party-member-badges .party-kick { margin-left: auto; padding: 1px 5px; font-size: 10px; }
.party-browser-invite, .party-manual-join { display: flex; gap: 6px; margin-top: 8px; }
.party-browser-invite input, .party-manual-join input { flex: 1; }
.party-open-grid { display: grid; gap: 5px; margin-top: 7px; }
.party-open-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px;
  align-items: center; padding: 7px 8px; border: 1px solid #56432b; border-radius: 4px; background: #15110d; }
.party-open-card strong, .party-open-card small { display: block; }
.party-open-card strong { color: #d9c9a6; }
.party-open-card small { color: #8d8068; font-size: 10px; text-transform: capitalize; }
.party-open-code { color: #d7b56d; font-weight: 800; letter-spacing: .08em; }
.party-empty { margin: 7px 0; font-style: italic; }
.party-compact-controls { margin-top: 13px; padding: 9px; border: 1px solid #59452c;
  border-radius: 4px; background: #17110d; }
.party-compact-roster { display: grid; gap: 4px; margin: 8px 0; }
.party-compact-member { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.party-compact-member span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .party-roster { grid-template-columns: 1fr; }
  .party-open-card { grid-template-columns: minmax(0, 1fr) auto; }
  .party-open-card > button { grid-column: 1 / -1; }
}
#professions .panel-body { width: min(760px, calc(100vw - 16px)); }
.profession-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.profession-head > div:first-child strong, .profession-head > div:first-child small,
.profession-rank strong, .profession-rank small { display: block; }
.profession-head > div:first-child strong { color: var(--panel-gold); font: bold 21px Georgia, serif; }
.profession-head > div:first-child small { margin-top: 3px; color: #b7a77f; }
.profession-rank { flex: none; text-align: right; color: #d7b56d; }
.profession-rank strong { font-size: 15px; }
.profession-rank small { color: #8f8067; font-size: 10px; text-transform: uppercase; }
.profession-stations { margin: 9px 0; padding: 6px 8px; color: #bba97f; background: #17110d;
  border: 1px solid #59452c; border-radius: 4px; font-size: 11px; }
.profession-tab-hint { display: none; }
.profession-layout { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 12px; }
.profession-tabs { display: grid; align-content: start; gap: 4px; }
.profession-tab { min-height: 46px; padding: 6px 8px; text-align: left; background: #17110d; }
.profession-tab strong, .profession-tab small { display: block; }
.profession-tab strong { color: #d8c9a8; }
.profession-tab small { margin-top: 2px; color: #82745d; font-size: 9px; }
.profession-tab[data-selected="true"] { opacity: 1; border-color: #d7b56d;
  background: linear-gradient(90deg, #4b341b, #23170d); }
.profession-content { min-width: 0; }
.profession-content h3 { margin: 0 0 7px; color: #d6b46e; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; }
.profession-specializations { margin-bottom: 12px; }
.profession-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.profession-spec { padding: 8px; border: 1px solid #604b30; border-radius: 5px; background: #17110d; }
.profession-spec > strong, .profession-spec > small, .profession-spec > span { display: block; }
.profession-spec > strong { color: #e1d0aa; }
.profession-spec > small { min-height: 30px; margin-top: 3px; color: #9c8e72; font-size: 10px; }
.profession-spec > span { margin-top: 5px; color: #c9a960; font-size: 10px; }
.profession-spec > button { width: 100%; margin-top: 6px; min-height: 29px; padding: 4px; font-size: 10px; }
.profession-spec[data-selected="true"] { border-color: #d7b56d; background: #302113; }
.profession-recipe { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 3px 9px;
  min-height: 64px; padding: 8px 0; border-bottom: 1px solid #4b382366; }
.profession-recipe > img { grid-row: 1 / span 4; width: 44px; height: 44px; border-radius: 5px;
  background: #120e0b; box-shadow: inset 0 0 0 1px #745a36; }
.profession-recipe-title strong, .profession-recipe-title small { display: block; }
.profession-recipe-title strong { color: #e5d6b5; }
.profession-recipe-title small { color: #8e8067; font-size: 10px; }
.profession-output { color: #b8aa8c; font-size: 10px; }
.profession-reagents { display: flex; flex-wrap: wrap; gap: 4px; }
.profession-reagents span { padding: 1px 4px; border-radius: 3px; color: #c8987c;
  background: #3b2018; font-size: 9px; }
.profession-reagents span[data-enough="true"] { color: #9bc18a; background: #1c3220; }
.profession-recipe-status { color: #c89f59; font-size: 10px; }
.profession-recipe-actions { grid-column: 3; grid-row: 1 / span 4; display: flex; align-items: center; gap: 4px; }
.profession-recipe-actions input { width: 48px; padding: 5px; }
.profession-recipe-actions input[aria-invalid="true"] { border-color: #e6b38b; }
.profession-recipe-actions button { min-height: 29px; padding: 4px 7px; }
.profession-recipe[data-known="false"] img { filter: grayscale(1); opacity: .6; }
.profession-reference { margin-top: 12px; }
@media (max-width: 620px) {
  .profession-layout { grid-template-columns: 1fr; }
  .profession-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profession-spec-grid { grid-template-columns: 1fr; }
}
#merchant .panel-body { width: min(720px, calc(100vw - 16px)); }
.merchant-head { display: flex; justify-content: space-between; gap: 14px; align-items: start;
  padding-bottom: 11px; border-bottom: 1px solid #6e512880; }
.merchant-head small, .merchant-head strong { display: block; }
.merchant-head small { color: #8f8067; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.merchant-head strong { margin-top: 2px; color: var(--panel-gold); font: bold 21px Georgia, serif; }
.merchant-purse { flex: none; text-align: right; }
.merchant-purse strong { color: #8bd3e5; font: 800 13px/1.4 system-ui; }
.merchant-debt { margin: 8px 0 0; padding: 6px 8px; border: 1px solid #8b503d;
  border-radius: 4px; color: #e4a58f; background: #321c16; font-size: 11px; }
.merchant-notice { margin: 8px 0 0; padding: 6px 8px; border: 1px solid #655536;
  border-radius: 4px; color: #b8aa8b; background: #211a11; font-size: 11px; }
.merchant-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 11px 0 8px; }
.merchant-tab { min-height: 34px; background: #17110d; }
.merchant-tab[data-selected="true"] { border-color: #d7b56d; color: #f1d391;
  background: linear-gradient(#49321a, #291a0d); }
.merchant-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.merchant-item-card { display: grid; grid-template-columns: 48px minmax(0, 1fr);
  gap: 7px 9px; min-height: 92px; padding: 8px; border: 1px solid #5f482c;
  border-radius: 5px; background: linear-gradient(135deg, #251b12, #120e0a); }
.merchant-item-card[data-rarity="uncommon"] { border-color: #4f7950; }
.merchant-item-card[data-rarity="rare"] { border-color: #4e6f94; }
.merchant-item-card[data-rarity="epic"] { border-color: #72508d; }
.merchant-item-card > img { width: 46px; height: 46px; border-radius: 5px;
  background: #0f0c09; box-shadow: inset 0 0 0 1px #84683e, 0 2px 6px #0009; }
.merchant-item-copy { min-width: 0; }
.merchant-item-copy strong, .merchant-item-copy small { display: block; }
.merchant-item-copy strong { color: #ead9b6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merchant-item-copy small { display: -webkit-box; margin-top: 3px; overflow: hidden;
  color: #92846c; font-size: 10px; line-height: 1.3; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; }
.merchant-item-controls { grid-column: 1 / -1; display: flex; justify-content: flex-end;
  align-items: center; flex-wrap: wrap; gap: 6px; }
.merchant-item-controls input { width: 64px; min-height: 29px; padding: 4px; }
.merchant-item-controls input[aria-invalid="true"] { border-color: #e6b38b; }
.merchant-item-controls button { min-width: 92px; min-height: 29px; padding: 4px 7px; }
.merchant-price { margin-right: auto; color: #d4b56f; font-size: 11px; }
.merchant-count-hint { flex-basis: 100%; color: #e6b38b; text-align: right; }
.merchant-count-hint:empty { display: none; }
.merchant-empty, .merchant-unavailable { grid-column: 1 / -1; margin: 0; padding: 18px;
  border: 1px dashed #5f482c; border-radius: 5px; color: #8f8067; text-align: center; }
.merchant-unavailable strong, .merchant-unavailable span { display: block; }
.merchant-unavailable strong { color: #d1bd95; }
.merchant-unavailable span { margin-top: 4px; }
.merchant-compact-controls { margin-top: 12px; padding-top: 8px; border-top: 1px solid #5f482c66; }
.merchant-compact-controls > summary { cursor: pointer; color: #8f8067; font-size: 10px; }
@media (max-width: 620px) {
  .merchant-head { display: grid; }
  .merchant-purse { text-align: left; }
  .merchant-shelf { grid-template-columns: 1fr; }
}
#bank .panel-body { width: min(760px, calc(100vw - 16px)); }
.bank-browser-head { display: flex; justify-content: space-between; gap: 14px; align-items: start;
  padding-bottom: 11px; border-bottom: 1px solid #6e512880; }
.bank-browser-head small, .bank-browser-head strong { display: block; }
.bank-browser-head small { color: #8f8067; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.bank-browser-head strong { margin-top: 2px; color: var(--panel-gold); font: bold 21px Georgia, serif; }
.bank-balance { flex: none; text-align: right; }
.bank-balance strong { color: #8bd3e5; font: 800 13px/1.4 system-ui; }
.bank-capacity { margin: 9px 0 12px; }
.bank-capacity-copy { display: flex; justify-content: space-between; gap: 10px;
  margin-bottom: 4px; color: #a99a7e; font-size: 11px; }
.bank-capacity-track { height: 5px; overflow: hidden; border: 1px solid #4c3a25;
  border-radius: 99px; background: #100c09; }
.bank-capacity-track > span { display: block; width: var(--bank-fill); height: 100%;
  background: linear-gradient(90deg, #7b5729, #d0a757); }
.bank-expand { margin-top: 7px; min-height: 29px; }
.bank-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bank-section { min-width: 0; }
.bank-section > h3 { margin: 0 0 6px; color: #d4b56f; font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; }
.bank-item-list { display: grid; gap: 6px; align-content: start; }
.bank-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px;
  padding: 7px; border: 1px solid #5f482c; border-radius: 5px;
  background: linear-gradient(135deg, #251b12, #120e0a); }
.bank-item[data-rarity="uncommon"] { border-color: #4f7950; }
.bank-item[data-rarity="rare"] { border-color: #4e6f94; }
.bank-item[data-rarity="epic"] { border-color: #72508d; }
.bank-item > img { width: 40px; height: 40px; border-radius: 4px; background: #0f0c09;
  box-shadow: inset 0 0 0 1px #84683e; }
.bank-item-copy { min-width: 0; }
.bank-item-copy strong, .bank-item-copy small { display: block; }
.bank-item-copy strong { color: #ead9b6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-item-copy small { margin-top: 2px; color: #92846c; font-size: 10px; }
.bank-item-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap;
  justify-content: flex-end; gap: 6px; }
.bank-item-controls input { width: min(80px, 28vw); min-height: 28px; padding: 3px;
  font-variant-numeric: tabular-nums; }
.bank-item-controls input[aria-invalid="true"] { border-color: #c77b5b; }
.bank-item-controls button { min-width: 82px; min-height: 28px; padding: 3px 7px; }
.bank-count-hint { flex-basis: 100%; color: #e6b38b; text-align: right; }
.bank-count-hint:empty { display: none; }
.bank-empty, .bank-unavailable { margin: 0; padding: 18px; border: 1px dashed #5f482c;
  border-radius: 5px; color: #8f8067; text-align: center; }
.bank-unavailable strong, .bank-unavailable span { display: block; }
.bank-unavailable strong { color: #d1bd95; }
.bank-unavailable span { margin-top: 4px; }
.bank-compact-controls { margin-top: 12px; padding-top: 8px; border-top: 1px solid #5f482c66; }
.bank-compact-controls > summary { cursor: pointer; color: #8f8067; font-size: 10px; }
@media (max-width: 620px) {
  .bank-browser-head { display: grid; }
  .bank-balance { text-align: left; }
  .bank-columns { grid-template-columns: 1fr; }
}
#auction .panel-body { width: min(760px, calc(100vw - 16px)); }
.auction-head { display: flex; justify-content: space-between; gap: 14px; align-items: start;
  padding-bottom: 11px; border-bottom: 1px solid #6e512880; }
.auction-head small, .auction-head strong { display: block; }
.auction-head small { color: #8f8067; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.auction-head strong { margin-top: 2px; color: var(--panel-gold); font: bold 21px Georgia, serif; }
.auction-balance { flex: none; text-align: right; }
.auction-balance strong { color: #8bd3e5; font: 800 13px/1.4 system-ui; }
.auction-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 11px 0 8px; }
.auction-tab { min-height: 34px; background: #17110d; }
.auction-tab[data-selected="true"] { border-color: #d7b56d; color: #f1d391;
  background: linear-gradient(#49321a, #291a0d); }
.auction-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.auction-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 7px 9px;
  padding: 8px; border: 1px solid #5f482c; border-radius: 5px;
  background: linear-gradient(135deg, #251b12, #120e0a); }
.auction-item[data-rarity="uncommon"] { border-color: #4f7950; }
.auction-item[data-rarity="rare"] { border-color: #4e6f94; }
.auction-item[data-rarity="epic"] { border-color: #72508d; }
.auction-item > img { width: 42px; height: 42px; border-radius: 4px; background: #0f0c09;
  box-shadow: inset 0 0 0 1px #84683e; }
.auction-item-copy { min-width: 0; }
.auction-item-copy strong, .auction-item-copy small { display: block; }
.auction-item-copy strong { color: #ead9b6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auction-item-copy small { margin-top: 2px; color: #92846c; font-size: 10px; line-height: 1.35; }
.auction-item-controls { grid-column: 1 / -1; display: flex; align-items: center;
  justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.auction-item-controls input { width: 70px; min-height: 29px; padding: 4px; }
.auction-item-controls input[aria-invalid="true"] { border-color: #e6b38b; }
.auction-item-controls button { min-width: 90px; min-height: 29px; padding: 4px 7px; }
.auction-price { margin-right: auto; color: #d4b56f; font-size: 11px; }
.auction-price-hint { flex-basis: 100%; color: #e6b38b; text-align: right; }
.auction-price-hint:empty { display: none; }
.auction-empty, .auction-unavailable { grid-column: 1 / -1; margin: 0; padding: 18px;
  border: 1px dashed #5f482c; border-radius: 5px; color: #8f8067; text-align: center; }
.auction-unavailable strong, .auction-unavailable span { display: block; }
.auction-unavailable strong { color: #d1bd95; }
.auction-unavailable span { margin-top: 4px; }
.auction-compact-controls { margin-top: 12px; padding-top: 8px; border-top: 1px solid #5f482c66; }
.auction-compact-controls > summary { cursor: pointer; color: #8f8067; font-size: 10px; }
@media (max-width: 620px) {
  .auction-head { display: grid; }
  .auction-balance { text-align: left; }
  .auction-shelf { grid-template-columns: 1fr; }
}
#mail .panel-body { width: min(760px, calc(100vw - 16px)); }
.mail-head { display: flex; justify-content: space-between; gap: 14px; align-items: start;
  padding-bottom: 11px; border-bottom: 1px solid #6e512880; }
.mail-head small, .mail-head strong { display: block; }
.mail-head small { color: #8f8067; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.mail-head strong { margin-top: 2px; color: var(--panel-gold); font: bold 21px Georgia, serif; }
.mail-balance { flex: none; text-align: right; }
.mail-balance strong { color: #8bd3e5; font: 800 13px/1.4 system-ui; }
.mail-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin: 11px 0 8px; }
.mail-tab { min-height: 34px; background: #17110d; }
.mail-tab[data-selected="true"] { border-color: #d7b56d; color: #f1d391;
  background: linear-gradient(#49321a, #291a0d); }
.mail-inbox { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 1.55fr); gap: 9px; }
.mail-message-list { border: 1px solid #5f482c; border-radius: 5px; overflow: hidden; background: #120d09; }
.mail-message-row { display: block; width: 100%; min-height: 58px; padding: 7px;
  border: 0; border-bottom: 1px solid #5f482c; border-radius: 0; background: transparent;
  color: #ead9b6; text-align: left; }
.mail-message-row:last-child { border-bottom: 0; }
.mail-message-row[data-selected="true"] { background: #6e512840; }
.mail-message-row strong, .mail-message-row small { display: block; }
.mail-message-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-message-row small { margin-top: 3px; color: #92846c; font-size: 10px; }
.mail-unread-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px;
  border-radius: 50%; background: #7de0ff; box-shadow: 0 0 5px #7de0ffaa; }
.mail-letter { min-height: 230px; padding: 10px; border: 1px solid #5f482c;
  border-radius: 5px; background: linear-gradient(135deg, #251b12, #120e0a); }
.mail-letter > header { padding-bottom: 8px; border-bottom: 1px solid #5f482c; }
.mail-letter > header strong, .mail-letter > header small { display: block; }
.mail-letter > header strong { color: #ead9b6; font: bold 17px Georgia, serif; }
.mail-letter > header small { margin-top: 3px; color: #92846c; }
.mail-letter-body { min-height: 72px; margin: 10px 0; color: #d8c9ad; white-space: pre-wrap; }
.mail-attachments { display: grid; gap: 5px; }
.mail-attachment { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 7px;
  align-items: center; padding: 5px; border: 1px solid #5f482c; border-radius: 4px; }
.mail-attachment img { width: 32px; height: 32px; border-radius: 3px; background: #0f0c09; }
.mail-attachment strong, .mail-attachment small { display: block; }
.mail-attachment small { color: #92846c; }
.mail-gems { padding: 5px 7px; border: 1px solid #4d7d8a80; border-radius: 999px;
  color: #8bd3e5; font-size: 11px; }
.mail-letter-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.mail-compose { display: grid; gap: 8px; }
.mail-compose label { color: #d4b56f; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.mail-compose input, .mail-compose textarea { display: block; width: 100%; box-sizing: border-box;
  margin-top: 3px; }
.mail-compose textarea { min-height: 96px; resize: vertical; }
.mail-compose-line { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.mail-compose-items { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-compose-item { display: grid; grid-template-columns: 30px auto; gap: 6px; align-items: center;
  max-width: 190px; padding: 5px; text-align: left; background: #17110d; }
.mail-compose-item[data-selected="true"] { border-color: #d7b56d; background: #49321a; }
.mail-compose-item img { width: 28px; height: 28px; }
.mail-compose-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.mail-compose-status { margin: 0; color: #e6b38b; }
.mail-compose-status:empty { display: none; }
.mail-empty, .mail-unavailable { margin: 0; padding: 18px; border: 1px dashed #5f482c;
  border-radius: 5px; color: #8f8067; text-align: center; }
.mail-unavailable strong, .mail-unavailable span { display: block; }
.mail-unavailable strong { color: #d1bd95; }
.mail-unavailable span { margin-top: 4px; }
.mail-compact-controls { margin-top: 12px; padding-top: 8px; border-top: 1px solid #5f482c66; }
.mail-compact-controls > summary { cursor: pointer; color: #8f8067; font-size: 10px; }
@media (max-width: 620px) {
  .mail-head { display: grid; }
  .mail-balance { text-align: left; }
  .mail-inbox, .mail-compose-line { grid-template-columns: 1fr; }
}
#chronicle .panel-body { width: min(660px, calc(100vw - 16px)); }
.chronicle-head { display: flex; justify-content: space-between; gap: 14px; align-items: end;
  padding-bottom: 11px; border-bottom: 1px solid #6e512880; }
.chronicle-head small, .chronicle-head strong { display: block; }
.chronicle-head small { color: #8f8067; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.chronicle-head strong { margin-top: 2px; color: var(--panel-gold); font: bold 21px Georgia, serif; }
.chronicle-count { color: #b7a77f; font-size: 11px; white-space: nowrap; }
.chronicle-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 11px 0 8px; }
.chronicle-filter { min-height: 28px; padding: 3px 9px; background: #17110d; color: #cdbf9f; }
.chronicle-filter[data-selected="true"] { border-color: #d7b56d; color: #fff0bd;
  background: linear-gradient(#49321a, #291a0d); }
.chronicle-rows { max-height: min(54vh, 520px); overflow-y: auto; border: 1px solid #5f482c;
  border-radius: 5px; background: linear-gradient(180deg, #24190fe8, #120d09e8); }
.chronicle-day { position: sticky; top: 0; z-index: 1; margin: 0; padding: 7px 10px;
  border-bottom: 1px solid #8a6732; color: #e8d7ad; background: #302216;
  font: 700 12px/1.35 system-ui, sans-serif; }
.chronicle-entry { display: block; width: 100%; padding: 8px 10px;
  border: 0; border-bottom: 1px solid #4a351c66;
  border-radius: 0; background: transparent; color: #eadfc6; text-align: left; }
.chronicle-entry:last-child { border-bottom: 0; }
button.chronicle-entry:hover, button.chronicle-entry:focus-visible { background: #6e51283d; }
.chronicle-copy { min-width: 0; }
.chronicle-copy strong, .chronicle-copy small { display: block; }
.chronicle-copy strong { font-weight: 600; overflow-wrap: anywhere; }
.chronicle-copy small { margin-top: 3px; color: #7f9eab; font-size: 10px; }
.chronicle-entry[data-priority="high"] .chronicle-copy strong {
  color: #f7d67c; font-variant: small-caps; font-weight: 800;
}
.chronicle-entry[data-category="realm"] .chronicle-copy strong { color: #e8d7ad; }
.chronicle-entry[data-category="trade"] .chronicle-copy strong { color: #d7c38f; }
.chronicle-entry[data-category="war"] .chronicle-copy strong { color: #e9a078; }
.chronicle-entry[data-category="fate"] .chronicle-copy strong { color: #ccb7e8; }
.chronicle-entry[data-category="town"] .chronicle-copy strong { color: #c9d79a; }
.chronicle-entry[data-category="myth"] { background: linear-gradient(90deg, #4c351632, transparent 82%); }
.chronicle-entry[data-category="myth"] .chronicle-copy strong {
  color: #ffe1a0; font-family: Georgia, "Times New Roman", serif;
}
.chronicle-empty { margin: 0; padding: 18px; color: #8f8067; text-align: center; }
.chronicle-reference { margin-top: 10px; padding-top: 7px; border-top: 1px solid #5f482c66; }
.chronicle-reference > summary { cursor: pointer; color: #8f8067; font-size: 10px; }
@media (max-width: 620px) { .chronicle-head { display: grid; } }
#journal .panel-body { width: min(690px, calc(100vw - 16px)); }
#quest-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
#quest-filters button { min-height: 29px; padding: 4px 9px; color: #bca986; background: #17110d; }
#quest-filters button[data-selected="true"] { border-color: #d7b56d; color: #f1d391;
  background: linear-gradient(#49321a, #291a0d); }
.quest-card { margin: 7px 0; padding: 11px; border: 1px solid #70522e;
  border-radius: 5px; background: linear-gradient(135deg, #2b2014, #18120d); }
.quest-card[hidden] { display: none; }
.quest-card > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px; cursor: pointer; color: #e8cd94; }
.quest-card > summary strong { min-width: 0; font: bold 17px Georgia, serif; }
.quest-card > summary span { align-self: center; padding: 3px 7px; border: 1px solid #82633d;
  border-radius: 99px; color: #e3c78f; background: #3b2918; font-size: 10px;
  letter-spacing: .05em; text-transform: uppercase; }
.quest-card > summary small { grid-column: 1 / -1; color: #c4ad88; font-size: 11px; }
.quest-card > .quest-summary { margin: 11px 0 8px; color: #d4c4a5; line-height: 1.45; }
.quest-objectives { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.quest-objectives li { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto;
  gap: 8px; align-items: start; padding: 7px; border: 1px solid #59432a;
  border-radius: 4px; background: #15100d; }
.quest-objectives li[data-complete="true"] { border-color: #3e6847; background: #112017; }
.quest-objective-marker { display: grid; place-items: center; width: 21px; height: 21px;
  border-radius: 50%; color: #171008; background: #bd9453; font-weight: bold; }
.quest-objectives li[data-complete="true"] .quest-objective-marker { background: #8ec891; }
.quest-objectives li strong, .quest-objectives li small { display: block; }
.quest-objectives li strong { color: #e7d8b6; }
.quest-objectives li small { margin-top: 3px; color: #9e8f72; line-height: 1.35; }
.quest-objective-progress { color: #d6b46e; font: bold 11px ui-monospace, monospace; }
.quest-full-entry { margin-top: 9px; border-top: 1px solid #5f482c66; }
.quest-full-entry > summary { padding-top: 8px; cursor: pointer; color: #a9946e; font-size: 10px; }
.quest-full-entry p { white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; }
.quest-card[data-phase="ready"] { border-color: #d7b56d; }
.quest-card[data-phase="complete"] > summary { color: #b5b79d; }
.quest-turn-in { margin-top: 10px; }
.quest-turn-in:disabled { opacity: .55; }

#combat-log-list { max-height: min(48vh, 360px); margin: 0; padding: 0;
  overflow-y: auto; list-style: none; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
#combat-log-list li { padding: 4px 7px; overflow-wrap: anywhere; border-bottom: 1px solid #6e512840; }
#combat-log-list li[data-healing="true"] { color: #84d184; }
#combat-log-list li[data-healing="false"] { color: #e38b73; }
#combat-log-list li[data-kind="interrupt"], #combat-log-list li[data-kind="taunt"] { color: #d8b13e; }
#combat-log-list li[data-kind="death"] { color: #ff7373; }
#combat-log-unread:not([hidden]) { display: inline-block; min-width: 1.4em; margin-left: 3px;
  padding: 1px 4px; border-radius: 8px; background: #b05032; color: #fff4e9;
  font: bold 10px/1.2 system-ui, sans-serif; text-align: center; }
#combat-log-list .combat-empty, #damage-meter-rows .combat-empty { color: #766a52; font-style: italic; }
#damage-meter-rows { display: grid; gap: 4px; }
#damage-meter .panel-body { width: min(300px, calc(100vw - 16px)); }
#combat-log-panel .panel-body { width: min(390px, calc(100vw - 16px)); }
.damage-meter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 9px;
  padding: 7px 9px; text-align: left; background:
    linear-gradient(90deg, #8a673255 var(--meter-fill), #17110de8 var(--meter-fill)); }
.damage-meter-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.damage-meter-value { color: #f4dc9a; font-variant-numeric: tabular-nums; }
.damage-meter-detail { grid-column: 1 / -1; display: grid; gap: 2px; color: #b7a77f; font-size: 11px; }
.damage-meter-detail > span { display: flex; justify-content: space-between; gap: 10px; }

#game-panels label { display: block; margin: 10px 0; }
#game-panels input[type=range] { display: block; width: 100%; margin: 8px 0; padding: 0; accent-color: #d7b56d; }
#game-panels input[type=checkbox] { width: auto; accent-color: #d7b56d; }
#settings .setting-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
#settings .setting-slider input { grid-column: 1 / -1; grid-row: 2; }
#settings .setting-slider output { grid-column: 2; grid-row: 1; color: var(--panel-gold);
  font-variant-numeric: tabular-nums; }
#settings .settings-save-note { color: var(--panel-muted); font-size: 12px; }
#settings .settings-session { margin-top: 18px; padding-top: 10px; border-top: 1px solid #6e512866; }
#settings .settings-session-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#settings .settings-session-actions button { flex: 1 1 160px; }
#settings #settings-status { color: var(--panel-gold); font-size: 12px; }
#settings #settings-status:empty { display: none; }
#world-map .panel-body { width: min(760px, calc(100vw - 16px)); }
#world-map-canvas { width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
#guide .panel-body { width: min(710px, calc(100vw - 16px)); }
.class-guide-head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 3px 0 13px; border-bottom: 1px solid #72552e88; }
.class-guide-head > img { width: 70px; height: 70px; border: 1px solid #a17c3e;
  border-radius: 9px; box-shadow: 0 4px 13px #000a; }
.class-guide-head small, .class-guide-head strong, .class-guide-head div > span { display: block; }
.class-guide-head small { color: #907c5c; font-size: 9px; font-weight: 800;
  letter-spacing: .14em; }
.class-guide-head strong { margin: 2px 0 4px; color: var(--panel-gold);
  font: bold 23px/1.1 Georgia, serif; }
.class-guide-head div > span { max-width: 470px; color: #c8b997; line-height: 1.35; }
.class-guide-role { align-self: start; padding: 5px 8px; border: 1px solid #8b6838;
  border-radius: 999px; color: #e6cc91; background: #312113; font-size: 10px;
  font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.class-guide-role[data-role="tank"] { border-color: #6584a5; color: #a9d0ef; background: #172536; }
.class-guide-role[data-role="healer"] { border-color: #57864e; color: #add49b; background: #172718; }
.class-guide-section > h2, .class-guide-tips > h2 { margin: 13px 0 7px; color: #d6b46e;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.class-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.class-guide-step { display: grid; grid-template-columns: 20px 44px minmax(0, 1fr);
  gap: 8px; min-height: 88px; padding: 8px; text-align: left;
  background: linear-gradient(135deg, #2b2116, #130f0b); }
.class-guide-step:hover { background: linear-gradient(135deg, #3b2b19, #1a120c); }
.class-guide-step[data-learned="false"] { opacity: .72; }
.class-guide-step > img { width: 42px; height: 42px; border-radius: 5px;
  box-shadow: inset 0 0 0 1px #886a3e, 0 2px 5px #0009; }
.class-guide-order { display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; color: #171008; background: #cba65e; font-size: 10px; font-weight: 900; }
.class-guide-step-copy, .class-guide-step-title, .class-guide-step-copy > small,
.class-guide-mechanics { display: block; min-width: 0; }
.class-guide-step-title { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.class-guide-step-title strong { color: #eadbb9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-guide-step-title kbd { flex: none; padding: 1px 4px; border: 1px solid #725a36;
  border-radius: 3px; color: #d7b56d; background: #100c09; font: 800 9px/1.3 system-ui; }
.class-guide-step-copy > small { margin-top: 3px; color: #c3b08a; line-height: 1.3; }
.class-guide-mechanics { margin-top: 4px; color: var(--panel-muted); font-size: 11px;
  line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.class-guide-tips ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 18px; margin: 0; padding: 0; list-style: none; }
.class-guide-tips li { position: relative; padding-left: 14px; color: #b9aa8b; line-height: 1.35; }
.class-guide-tips li::before { content: "◆"; position: absolute; left: 0; top: 1px;
  color: #b98c48; font-size: 8px; }
.compendium { margin-bottom: 18px; }
#class-guide { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #8a673277; }
.compendium-heading { display: flex; justify-content: space-between; align-items: end;
  gap: 12px; margin-bottom: 12px; }
.compendium-heading span { color: #a88c58; font-size: 10px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; }
.compendium-heading h2 { margin: 2px 0 0; color: var(--panel-gold);
  font: bold 21px/1.1 Georgia, serif; }
.compendium-heading p { max-width: 300px; margin: 0; color: var(--panel-muted);
  font-size: 12px; line-height: 1.4; }
#game-panels .compendium-search-label { margin: 0 0 5px; color: #e0c58d;
  font-size: 12px; font-weight: 700; }
#compendium-search { display: block; width: 100%; margin-bottom: 10px;
  border-color: #8a6732; background: #110e0b; }
#compendium-search::placeholder { color: #8e8069; }
#compendium-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px; padding-bottom: 7px; border-bottom: 1px solid #72552e88; }
#compendium-tabs button { min-width: 0; padding: 7px 5px; border-color: #5d492c;
  border-radius: 4px 4px 0 0; color: #bfb093; background: #1a140e;
  font-size: 12px; font-weight: 700; }
#compendium-tabs button[aria-selected="true"] { border-color: #c59b55;
  color: #fff1c5; background: #3c2a17; box-shadow: inset 0 -2px #d7b56d; }
#compendium-status { margin: 9px 0; color: #bdad8b; font-size: 12px; }
#compendium-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; min-height: 45px; }
.compendium-card { min-width: 0; padding: 10px; border: 1px solid #735632;
  border-radius: 6px; background: linear-gradient(145deg, #261d13, #14100c); }
.compendium-card-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.compendium-card-head img { flex: none; width: 42px; height: 42px; object-fit: cover;
  border: 1px solid #8a6b3c; border-radius: 5px; background: #120e0b; }
.compendium-card-head > div { min-width: 0; }
.compendium-card-head h3 { margin: 0; color: #f2dfb6;
  font: bold 15px/1.2 Georgia, serif; overflow-wrap: anywhere; }
.compendium-card-meta { display: block; margin-top: 3px; color: #d0a966;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.compendium-card-detail { margin: 8px 0 0; color: #c7b99d;
  font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.compendium-card ul { margin: 8px 0 0; padding-left: 17px; color: #c7b99d;
  font-size: 11px; line-height: 1.45; }
.compendium-card-disclosure { margin-top: 9px; border-top: 1px solid #72552e88; }
.compendium-card-disclosure > summary { padding-top: 7px; color: #e2c486;
  cursor: pointer; font-size: 11px; font-weight: 700; }
.compendium-card-disclosure > summary:hover,
.compendium-card-disclosure > summary:focus-visible { color: #fff1c5; }
.compendium-atlas-link { margin-top: 9px; padding: 5px 8px; border: 1px solid #927044;
  border-radius: 4px; color: #f0d89f; background: #302316; font-size: 11px; cursor: pointer; }
.compendium-atlas-link:hover, .compendium-atlas-link:focus-visible {
  border-color: #efcb82; outline: 2px solid #efcb82; outline-offset: 1px; }
#compendium-empty { margin: 10px 0 0; padding: 14px; border: 1px dashed #72552e;
  border-radius: 5px; color: var(--panel-muted); text-align: center; font-size: 12px; }
.guide-controls { margin-top: 14px; padding-top: 10px; border-top: 1px solid #6e512866; }
.guide-controls > summary { cursor: pointer; color: #d7b56d; font-weight: 800; }
.guide-controls h2 { margin-bottom: 4px; color: #d6b46e; font-size: 13px; }
.guide-controls > p:first-of-type { color: var(--panel-muted); }
.guide-controls ul { display: grid; gap: 7px; margin: 6px 0 14px; padding-left: 20px; }
.guide-controls li { line-height: 1.5; }
.guide-controls li strong { color: var(--panel-gold); }
.guide-spell-focus { outline: 2px solid #f2d17f; outline-offset: 2px;
  box-shadow: 0 0 18px #e2aa4588; }
@media (max-width: 620px) {
  .class-guide-head { grid-template-columns: 58px minmax(0, 1fr); }
  .class-guide-head > img { width: 56px; height: 56px; }
  .class-guide-role { grid-column: 1 / -1; justify-self: start; }
  .class-guide-grid, .class-guide-tips ul { grid-template-columns: 1fr; }
  .compendium-heading { display: block; }
  .compendium-heading p { margin-top: 5px; }
  #compendium-tabs { display: flex; overflow-x: auto; scrollbar-width: thin; }
  #compendium-tabs button { flex: 0 0 auto; min-width: 86px; }
  #compendium-results { grid-template-columns: 1fr; }
}
.spellbook-grid { display: grid; gap: 8px; }
#spellbook .panel-body { width: min(600px, calc(100vw - 16px)); }
#game-panels #action-binding-form { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto;
  align-items: end; gap: 8px; }
#game-panels #action-binding-form label { display: grid; gap: 5px; margin: 0; }
#game-panels #action-binding-form select { width: 100%; }
#game-panels #action-binding-reset { grid-column: 1 / -1; justify-self: start; }
.spellbook-grid button { display: flex; align-items: center; gap: 10px; text-align: left; white-space: pre-line; }
.spellbook-grid button[aria-disabled="true"] { opacity: 1; color: #c5b69a; background: #1a1510; border-color: #5c4b32; cursor: help; }
.spellbook-grid button[aria-disabled="true"] img { opacity: .55; }
#spellbook-upcoming button { color: #96896f; background: #14110e; border-color: #463b2c; }
#spellbook-upcoming button img { filter: grayscale(1); opacity: .42; }
#spellbook-upcoming button::after { content: attr(data-state); flex: none; align-self: start;
  margin-left: auto; color: var(--panel-gold); font-size: 12px; white-space: nowrap; }
@media (max-width: 600px) {
  #game-panels #action-binding-form { grid-template-columns: minmax(0, 1fr) auto; }
  #game-panels #action-binding-form label:first-child { grid-column: 1 / -1; }
}
.cosmetic-section { margin-top: 14px; }
.collection-group + .collection-group { margin-top: 20px; padding-top: 16px;
  border-top: 1px solid #80633b66; }
.collection-group > .panel-section { margin-top: 0; }
.collection-note { margin: 10px 0 0; color: #b7a77f; line-height: 1.45; }
.cosmetic-preview { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 14px; margin: 14px 0 12px; padding: 10px; border: 1px solid #80633b;
  border-radius: 7px; background: #17121a; }
#cosmetic-preview-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1;
  border: 1px solid #715b43; border-radius: 6px; background: radial-gradient(circle, #30273c, #15101b 72%); }
.cosmetic-preview-detail { display: flex; flex-direction: column; align-items: start; gap: 7px; min-width: 0; }
.cosmetic-preview-detail strong { color: #f4dc9a; font: bold 18px Georgia, serif; }
.cosmetic-preview-detail #cosmetic-preview-rarity { color: #b7a77f; font-size: 12px; text-transform: capitalize; }
.cosmetic-preview-detail p { margin: 0; line-height: 1.4; }
.cosmetic-preview-detail small { color: #9d8b6d; }
.cosmetic-preview-detail button { margin-top: auto; order: 1; }
.cosmetic-preview-detail button:disabled { opacity: .6; }
.cosmetic-section-header { display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 7px; color: var(--panel-gold); font: bold 17px/1.2 Georgia, serif; }
.cosmetic-section-header small { color: #9d8b6d; font: 11px/1.2 system-ui, sans-serif; }
.cosmetic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cosmetic-card { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr);
  gap: 2px 9px; min-height: 76px; padding: 8px; text-align: left; overflow: hidden;
  background: linear-gradient(135deg, #2b2116, #130f0b); border: 1px solid #6f5938; }
.cosmetic-card img { grid-row: 1 / span 3; width: 52px; height: 52px; border-radius: 7px;
  background: #17120d; box-shadow: inset 0 0 0 1px #8d714655; }
.cosmetic-card strong { padding-right: 44px; color: #ead8ad; }
.cosmetic-card small { color: #b7a77f; line-height: 1.25; }
.cosmetic-card .cosmetic-rarity { font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; }
.cosmetic-card[data-rarity="uncommon"] .cosmetic-rarity { color: #75c879; }
.cosmetic-card[data-rarity="rare"] .cosmetic-rarity { color: #75a9e8; }
.cosmetic-card[data-rarity="epic"] .cosmetic-rarity { color: #b98bea; }
.cosmetic-card::after { position: absolute; top: 10px; left: 12px; padding: 2px 5px;
  border-radius: 4px; background: #090704cc; color: #c9b483; font: 800 9px/1.3 system-ui; }
.cosmetic-card[data-active="true"] { border-color: #d7b56d; box-shadow: inset 0 0 0 1px #d7b56d55; }
.cosmetic-card[data-active="true"]::after { content: "SELECTED"; background: #d7b56d; color: #181108; }
.cosmetic-card[data-focused="true"] { border-color: #efd18c; box-shadow: inset 0 0 0 1px #efd18c88; }
.cosmetic-card[data-owned="false"] { opacity: .72; }
.cosmetic-card[data-owned="false"] img { filter: grayscale(1) brightness(.65); }
.cosmetic-card[data-owned="false"]::after { content: "LOCKED"; }
@media (max-width: 620px) { .cosmetic-preview { grid-template-columns: 1fr; }
  #cosmetic-preview-canvas { max-width: 240px; margin-inline: auto; } }
@media (max-width: 620px) { .cosmetic-grid { grid-template-columns: 1fr; } }
.character-overview-head { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid #6e512880; }
.character-overview-head img { width: 56px; height: 56px; border-radius: 8px;
  border: 1px solid #a17c3e; box-shadow: 0 3px 9px #0009; }
.character-overview-head strong { display: block; color: var(--panel-gold);
  font: bold 20px/1.2 Georgia, serif; }
.character-overview-head small { display: block; margin-top: 3px; color: #b7a77f; }
.character-level-badge { align-self: start; min-width: 44px; padding: 5px 7px;
  text-align: center; color: #181108; background: #d7b56d; border-radius: 5px;
  font-size: 11px; font-weight: 900; text-transform: uppercase; }
.character-progress { margin: 12px 0; }
.character-progress-label { display: flex; justify-content: space-between; gap: 8px;
  margin-bottom: 4px; color: #cbb98f; font-size: 11px; }
.character-xp { height: 8px; overflow: hidden; background: #0d0a08;
  border: 1px solid #604a2d; border-radius: 5px; }
.character-xp > span { display: block; width: var(--xp-fill, 0%); height: 100%;
  background: linear-gradient(90deg, #8b5a28, #f0d277); }
.character-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.character-fact { padding: 7px 8px; background: #16100bd0; border: 1px solid #5d482c; border-radius: 4px; }
.character-fact small, .character-fact strong { display: block; }
.character-fact small { color: #8f8067; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.character-fact strong { margin-top: 2px; color: #e2d3b3; overflow-wrap: anywhere; }
.character-standing { margin-top: 12px; padding-top: 9px; border-top: 1px solid #6e512880; }
.character-standing > h3 { margin: 0 0 5px; color: var(--panel-gold); font: bold 15px Georgia, serif; }
.character-standing-row { display: flex; justify-content: space-between; gap: 12px;
  padding: 3px 0; color: #b7a77f; }
.character-standing-row strong { color: #e2d3b3; white-space: nowrap; }
.character-standing-empty { color: #8f8067; font-style: italic; }
.talent-tree-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 8px; }
.talent-tree-head strong { color: var(--panel-gold); font: bold 17px Georgia, serif; }
.talent-tree-head span { color: #d7b56d; font-weight: 800; }
.talent-note { margin: 7px 0; color: #9f9074; font-size: 11px; }
.talent-section { margin-top: 12px; padding-top: 9px; border-top: 1px solid #6e512880; }
.talent-section > h3 { margin: 0 0 7px; color: #d6b46e; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; }
.talent-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.talent-spec-card { min-height: 74px; text-align: left; background: linear-gradient(135deg, #2b2116, #130f0b); }
.talent-spec-card strong, .talent-spec-card small { display: block; }
.talent-spec-card strong { color: #ead8ad; text-transform: capitalize; }
.talent-spec-card small { margin-top: 4px; color: #a99a7c; line-height: 1.3; }
.talent-spec-card[data-selected="true"] { border-color: #d7b56d;
  opacity: 1; background: linear-gradient(135deg, #523a1c, #24180d);
  box-shadow: inset 0 0 0 1px #d7b56d55; }
.talent-node { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px;
  padding: 8px 0; border-bottom: 1px solid #4b38235c; }
.talent-node[data-locked="true"] .talent-node-title { color: #c7b99b; }
.talent-node-title { color: #e4d6b8; font-weight: 700; text-transform: capitalize; }
.talent-node-rank { color: var(--panel-gold); }
.talent-node-detail { color: #a99a7c; font-size: 11px; line-height: 1.35; }
.talent-node > .talent-node-detail { grid-column: 1; }
.talent-node-gate { color: #c59c57; }
.talent-node-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 4px; }
.talent-node-actions button { min-width: 30px; min-height: 30px; padding: 3px 7px; font-weight: 900; }
.talent-options { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.talent-options button { min-height: 28px; padding: 4px 7px; text-transform: capitalize; }
.talent-options button strong, .talent-options button small { display: block; }
.talent-options button small { margin-top: 3px; color: #a99a7c; font-size: 10px;
  font-weight: 400; text-transform: none; }
.talent-options button[data-selected="true"] { opacity: 1; color: #181108;
  background: #d7b56d; border-color: #f1d68e; }
.talent-reset { width: 100%; margin-top: 12px; }
.talent-share #talent-build { display: block; box-sizing: border-box; width: 100%;
  margin-top: 5px; font: 11px/1.4 monospace; }
.talent-build-actions { display: flex; gap: 6px; margin-top: 6px; }
.talent-build-actions button { flex: 1; }
#talent-build-status { min-height: 1.3em; margin: 6px 0 0; color: #b7a77f; font-size: 11px; }
.bag-slot img { display: block; width: 40px; height: 40px; margin: auto; }
#game-panels .panel-section {
  margin: 16px 0 8px;
  padding-top: 10px;
  border-top: 1px solid #6e512880;
  color: var(--panel-gold);
  font: bold 17px/1.2 Georgia, serif;
}
#game-panels form { padding-bottom: 6px; }
#game-panels summary { cursor: pointer; color: var(--panel-gold); }
#game-panels p { color: #b7a77f; }
#game-panels :is(input, select, textarea, button) { max-width: 100%; }
#game-panels #party form { flex-wrap: wrap; }
#party-invite p { flex-basis: 100%; margin: 0; }
.overworld-page #wayfinder { border-color: #d6b46e; background: #2b1f14cc; }
@media (max-width: 600px) {
  #game-panels { bottom: 104px; gap: 4px; }
  #game-panels > details > summary { padding: 8px; font-size: 12px; }
  #action-bar { gap: 4px; padding: 5px; }
  #action-bar button { min-width: 76px; }
}
@media (max-width: 700px) {
  #game-panels { bottom: 128px; }
  #nearby-actions { bottom: 196px; }
}
@media (max-height: 480px) and (min-width: 701px) {
  #game-panels { left: auto; max-width: 240px; }
}

#game-panels > details { position: relative; }
#game-panels form { display: flex; flex-wrap: wrap; gap: 6px; }
#game-panels form input, #game-panels form select { min-width: 0; max-width: 100%; flex: 1 1 140px; }
#game-panels form button { max-width: 100%; }
#game-panels form > .form-field { display: flex; flex: 1 1 140px; flex-direction: column;
  gap: 5px; margin: 0; min-width: 0; color: #cbb58c; font-size: 12px; }
#game-panels .form-field > :is(input, select, textarea) { flex: none; width: 100%; font-size: 13px; }
#game-panels #economy-trade .actions { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#game-panels #economy-trade :is(input, select, button) { min-height: 44px; }
#mail-send .form-field:has(textarea) { flex-basis: 100%; }
#mail-body { min-height: 110px; resize: vertical; line-height: 1.5; }

#game-panels > .window-secondary { position: fixed; left: 0; bottom: 0; }

#game-panels .window-head button { width: auto; flex: 0 0 auto; }
#game-panels .window-links button { width: auto; flex: 1 1 auto; }

#world-map-stage { position: relative; width: min(100%, 50dvh, 600px); margin-inline: auto;
  overflow: hidden; background: #101b20; border-radius: 5px; }
#world-map-canvas { display: block; width: 100%; height: auto; cursor: crosshair;
  background: #101b20; outline: 1px solid #8a6732; box-shadow: 0 3px 12px #0008;
  transform-origin: 0 0; touch-action: none; user-select: none; }
#world-map-stage:has(#world-map-canvas:focus-visible) { outline: 3px solid #f2d17f; }
#world-map-stage:has(#world-map-canvas:focus-visible)::after { content: "+";
  position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%);
  color: #fff2c8; font: bold 23px/1 system-ui; text-shadow: 0 1px 5px #000;
  pointer-events: none; }
#world-map-canvas[data-zoomed="true"] { cursor: grab; }
#world-map-canvas[data-panning="true"] { cursor: grabbing; }
#world-map-controls { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
#world-map-controls button { min-width: 30px; min-height: 30px; padding: 4px 8px;
  color: #f4dc9a; background: #120c08e8; border: 1px solid #7c5c2c; border-radius: 5px;
  box-shadow: 0 2px 8px #0009; font-weight: 700; }
#world-map-controls button:hover:not(:disabled), #world-map-controls button:focus-visible {
  border-color: #d7b56d; color: #fff2c8; }
#world-map-controls button:disabled { opacity: .38; }
#world-map-tooltip {
  position: absolute; z-index: 2; min-width: 130px; max-width: min(240px, calc(100% - 16px));
  padding: 8px 10px; pointer-events: none; color: var(--panel-ink);
  background: #120e0bf2; border: 1px solid #d7b56d; border-radius: 5px;
  box-shadow: 0 5px 16px #000b; font: 12px/1.35 system-ui, sans-serif;
}
#world-map-tooltip strong, #world-map-tooltip span { display: block; }
#world-map-tooltip strong { color: var(--panel-gold); font: bold 15px/1.25 Georgia, serif; }
#world-map-tooltip span { margin-top: 3px; color: #c9b998; font-variant-numeric: tabular-nums; }
.world-map-hint { margin-bottom: 0; text-align: center; font-size: 12px; }
@media (min-width: 701px) {
  #world-map .panel-body { display: flex; flex-wrap: wrap; column-gap: 16px; align-content: start; }
  #world-map .window-head, #world-map-location { flex: 0 0 100%; }
  #world-map-stage { flex: 0 1 min(50dvh, 450px); min-width: min(100%, 300px); margin: 0; }
  #world-map .atlas-sidebar { flex: 1 1 200px; min-width: min(100%, 200px);
    max-height: min(50dvh, 450px); overflow-y: auto; overscroll-behavior: contain; }
  #world-map .world-map-hint { text-align: left; }
}
.atlas-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; font-size: 12px; color: #d5c5a5; }
.atlas-key :is(button, span) { display: inline-flex; align-items: center; gap: 8px; }
.atlas-key :is(button, span)::before { content: ""; width: 8px; height: 8px; flex: none; border: 1px solid #241b13; }
.atlas-key button { padding: 5px 8px; color: #ead9b4; background: #241b13; border: 1px solid #8a6732; border-radius: 5px; cursor: pointer; font: inherit; }
.atlas-key button[aria-pressed="false"] { opacity: .5; }
.atlas-key button:hover, .atlas-key button:focus-visible { color: #fff2c8; border-color: #f2d17f; }
.atlas-key button:focus-visible { outline: 2px solid #f2d17f; outline-offset: 2px; }
.atlas-key .atlas-road::before { background: #efc986; height: 3px; border: none; }
.atlas-town::before { background: #e8c477; border-radius: 50%; }
.atlas-entrance::before { background: #d7c4ef; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.atlas-quest::before { background: #d6efa6; transform: rotate(45deg); }
.atlas-blight::before { background: #de6865; border-radius: 50%; }
.atlas-shortage::before { background: #f4b856; border-radius: 50%; }
.atlas-party::before { background: #75daf2; transform: rotate(45deg); }
.atlas-player::before { background: #fff; border-radius: 50%; }
#world-map:has(canvas[data-surface="false"]) .atlas-player { display: none; }
#world-map:has(canvas[data-surface="false"]) :is(.atlas-blight, .atlas-shortage, .atlas-party) { display: none; }
#world-map-regions { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 11px; }
#world-map-regions button { padding: 5px 8px; border: 1px solid #715630; border-radius: 4px;
  color: #dacaa8; background: #1a1510; font: 11px/1.2 system-ui, sans-serif; cursor: pointer; }
#world-map-regions button:hover, #world-map-regions button:focus-visible,
#world-map-regions button[aria-current="true"] { border-color: #efcb82; color: #fff1c5;
  outline: 2px solid #efcb82; outline-offset: 1px; }
#bag-inspection { display: grid; gap: 10px; margin-top: 12px; }
#bag-comparison { white-space: pre-line; border-left: 2px solid #8a6732; padding: 8px 12px; background: #21170f; }
#bag-tooltip { position: fixed; z-index: 1000; pointer-events: none;
  max-width: min(300px, calc(100vw - 32px)); padding: 10px 12px;
  border: 1px solid #ba975a; border-radius: 6px; background: #151019f5;
  box-shadow: 0 6px 22px #0009; color: #f0e7d5; font: 13px/1.45 system-ui; }
#bag-tooltip strong, #bag-tooltip span { display: block; }
#bag-tooltip strong { color: #ffe3a0; font-size: 15px; }
#bag-tooltip span { margin-top: 5px; white-space: pre-line; }
.bag-slot[aria-pressed="true"] { outline: 2px solid var(--panel-gold); outline-offset: -2px; }
.bag-slot[draggable="true"] { cursor: grab; }
#bag-item-action { margin-top: 10px; }
.bag-section-title { margin: 12px 0 4px; color: var(--panel-gold); font: 600 13px/1.3 system-ui, sans-serif; }
.bag-help { margin-top: 14px; padding-top: 8px; border-top: 1px solid #5f482c66; }
#game-panels .bag-help > summary { font-size: 12px; color: var(--panel-muted); }
.bag-help > p { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--panel-muted); }

.combat-page #action-bar button {
  position: relative;
  flex: 0 0 80px;
  min-width: 80px;
  min-height: 86px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 5px;
  gap: 3px;
  text-align: center;
}
.combat-page #action-bar button::before {
  content: attr(data-shortcut) / "";
  position: absolute;
  top: 3px;
  left: 4px;
  color: #fff1c5;
  font-weight: bold;
  text-shadow: 0 1px 3px #000, 0 0 3px #000;
  z-index: 1;
}
.combat-page #action-bar .ability-name {
  margin-top: auto;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.combat-page #action-bar button[aria-disabled="true"] img { opacity: .45; }
.combat-page #action-bar button[aria-disabled="true"] { cursor: help; }
.combat-page #action-bar button[data-state="Queued"] {
  border-color: #f1c66b;
  box-shadow: 0 0 0 2px #f1c66b77, 0 0 12px #f1c66b66;
}
.combat-page #action-bar button[data-state="Queued"] .ability-name { color: #ffe09c; }
.combat-page #action-bar button[data-held="true"],
#spellbook-list button[data-held="true"] {
  outline: 2px solid #ffe4a6;
  outline-offset: 2px;
  box-shadow: 0 0 12px #e9ad4b99;
}
.ability-cooldown { position: absolute; top: 6px; left: calc(50% - 22px);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: conic-gradient(from 0turn, #08080ae8 calc(var(--cooldown-fill, 1) * 1turn), #08080a38 0);
  border-radius: 3px; color: white; font-weight: bold;
  text-shadow: 0 1px 2px black; }
.ability-cooldown[hidden] { display: none; }
.ability-cooldown::before { content: ""; position: absolute; inset: 4px;
  border: 2px solid #e8ce8c40; border-top-color: #ffe4a6; border-radius: 50%;
  animation: ability-spin 1s linear infinite; }
@keyframes ability-spin { to { transform: rotate(360deg); } }
.reduce-motion .ability-cooldown::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .ability-cooldown::before { animation: none; } }
#spellbook-list button { position: relative; }
#spellbook-list .ability-cooldown { display: none; }
#ability-tooltip { position: fixed; z-index: 1000; pointer-events: none;
  max-width: min(330px, calc(100vw - 32px)); padding: 12px 14px;
  border: 1px solid #ba975a; border-radius: 6px; background: #151019f5;
  box-shadow: 0 6px 22px #0009; color: #f0e7d5; font: 13px/1.5 system-ui; }
body:has(#game-panels > details[open]:not([hidden])) #ability-tooltip { display: none; }
.construction-help { margin: 10px 0 16px; padding: 9px 11px;
  border: 1px solid var(--panel-border); border-radius: 4px;
  background: var(--panel-surface); }
.construction-help > summary { cursor: pointer; color: var(--panel-gold); }
.construction-help p { margin: 9px 0 0; color: var(--panel-muted); }
.construction-placement-note { margin: 2px 0 12px; }
.construction-action-detail { margin: 6px 0 0; color: var(--panel-muted);
  font-size: 12px; overflow-wrap: anywhere; }
.construction-action-detail:empty { display: none; }
.construction-feedback { margin: 7px 0 12px; color: #e6b38b; font-size: 12px; }
.construction-feedback:empty { display: none; }
.construction-public-works > summary small { display: block; margin: 3px 0 0 18px;
  color: var(--panel-muted); }
.construction-public-works form > h3 { flex-basis: 100%; margin: 0;
  color: var(--panel-gold); font-size: 13px; }
.construction-public-works form > .form-field { flex-basis: 100%; margin: 0; }
#ability-tooltip strong { color: #ffe3a0; font-size: 15px; }
#ability-tooltip p { margin: 7px 0 0; white-space: pre-line; }
#ability-tooltip .ability-readiness { color: #c6baa5; }
#ability-notice { position: fixed; z-index: 5; left: 50%; bottom: 126px;
  translate: -50% 0; max-width: min(420px, calc(100vw - 28px));
  padding: 7px 11px; border: 1px solid #bd8459; border-radius: 5px;
  background: #17100ef0; box-shadow: 0 5px 16px #000a;
  color: #ffd9a8; font: 13px/1.3 system-ui, sans-serif;
  text-align: center; pointer-events: none; }
#ability-notice[hidden] { display: none; }
#target-frame { position: fixed; z-index: 3; top: 18px; left: 50%;
  transform: translateX(-50%); width: 260px; max-width: 40vw;
  padding: 10px 12px; border: 1px solid #b99756; border-radius: 6px;
  background: #17100ef2; box-shadow: 0 3px 12px #0008; pointer-events: none;
  color: #ffe5ae; font: 14px/1.4 system-ui; }
#target-frame[data-social="true"] { pointer-events: auto; cursor: context-menu; }
.target-heading { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 6px; }
#target-frame strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-kind { flex: none; color: #baa988; font-size: 10px; text-transform: capitalize; }
.target-health { position: relative; overflow: hidden; height: 24px;
  border: 1px solid #8a493a; border-radius: 3px; background: #220b0b; }
.target-health .health-fill { position: absolute; inset: 0 auto 0 0;
  width: var(--health-fill, 0%); background: linear-gradient(#bf5245, #74201f); }
#target-frame[data-friendly="true"] .health-fill { background: linear-gradient(#62a868, #286035); }
.target-health .health-label { position: relative; display: block; text-align: center;
  line-height: 24px; color: #fff5e5; font-size: 12px; text-shadow: 0 1px 2px #000; }
.target-status { display: flex; justify-content: space-between; gap: 8px; min-height: 14px;
  margin-top: 5px; color: #c6b99f; font-size: 10px; }
.target-threat { color: #ff9c86; font-weight: bold; }
.target-of-target { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: auto; }
.target-of-target[hidden] { display: none; }
.target-of-target-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-of-target-health { flex: none; width: 70px; height: 8px; overflow: hidden;
  border: 1px solid #755052; border-radius: 2px; background: #341718; }
.target-of-target-health[hidden] { display: none; }
.target-of-target-health > span { display: block; width: var(--health-fill, 0%); height: 100%; background: #ad4b45; }
.target-of-target[data-friendly="true"] .target-of-target-health > span { background: #4b9b45; }
.target-cast { position: relative; overflow: hidden; height: 17px; margin-top: 5px;
  border: 1px solid #987b43; border-radius: 3px; background: #111017; }
.target-cast .cast-fill { position: absolute; inset: 0 auto 0 0;
  width: var(--cast-fill, 0%); background: linear-gradient(#d9b75f, #8d6729); }
.target-cast[data-interruptible="false"] .cast-fill { background: linear-gradient(#948a78, #5c5549); }
.target-cast[data-empower="true"] .cast-fill { background: linear-gradient(#c48af0, #7449b2); }
.target-cast[data-empower="true"]::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent calc(100% - 1px), #251831 calc(100% - 1px))
    left top / var(--cast-stage-size) 100% repeat-x; pointer-events: none; }
#target-frame[data-friendly="false"] .target-cast[data-interruptible="true"] {
  animation: target-cast-kick-cue .65s ease-in-out infinite alternate; }
@keyframes target-cast-kick-cue {
  from { box-shadow: 0 0 0 1px #ffe27a66; }
  to { box-shadow: 0 0 0 2px #ffe27acc, 0 0 8px #ffe27a88; }
}
body.reduce-motion #target-frame .target-cast { animation: none; }
@media (prefers-reduced-motion: reduce) { #target-frame .target-cast { animation: none; } }
.target-cast .cast-label { position: relative; display: block; overflow: hidden;
  padding: 0 4px; color: #fff5dc; font: 10px/17px system-ui, sans-serif;
  text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; white-space: nowrap; }
#player-cast-host { margin-bottom: 4px; }
#player-menu { position: fixed; z-index: 1001; min-width: 180px; padding: 7px;
  border: 1px solid #ba975a; border-radius: 6px; background: #17100ef7;
  box-shadow: 0 8px 24px #000b; color: #ffe3a0; font: 13px/1.4 system-ui; }
#player-menu strong { display: block; overflow: hidden; padding: 3px 7px 7px;
  max-width: 230px; text-overflow: ellipsis; white-space: nowrap; }
#player-menu button { display: block; width: 100%; margin: 2px 0; padding: 6px 9px;
  text-align: left; }
#player-menu[hidden] { display: none; }
@media (max-width: 960px) {
  #target-frame { top: auto; bottom: 126px; max-width: calc(100vw - 52px); }
}
@media (max-width: 500px) and (min-height: 800px) {
  #target-frame { bottom: 264px; }
}
@media (max-width: 500px) and (min-height: 520px) and (max-height: 799px) {
  #hud { width: min(252px, calc(100vw - 90px)); max-height: calc(100vh - 446px);
    overflow-y: auto; pointer-events: auto;
    scrollbar-width: thin; }
  #target-frame { box-sizing: border-box; bottom: 264px; max-height: 166px;
    overflow-y: auto; pointer-events: auto; scrollbar-width: thin; }
}
#party-jump { display: none; }
@media (max-width: 500px) and (min-height: 400px) and (max-height: 519px) {
  #hud { width: min(252px, calc(100vw - 90px)); max-height: clamp(44px, calc(100vh - 390px), 98px);
    overflow-y: auto; pointer-events: auto; scrollbar-width: thin; }
  #target-frame { box-sizing: border-box; bottom: 264px;
    max-height: clamp(70px, calc(100vh - 410px), 110px);
    overflow-y: auto; pointer-events: auto; scrollbar-width: thin; }
}
@media (max-width: 500px) and (min-height: 460px) and (max-height: 519px) {
  #party-jump { position: fixed; z-index: 5; top: 62px; right: 14px;
    display: block; width: 55px; pointer-events: auto; }
  #party-jump button { width: 100%; min-height: 44px; padding: 4px;
    font: 700 11px/1.2 system-ui, sans-serif; }
}
@media (max-height: 480px) and (min-width: 560px) {
  #target-frame { inset: 14px 14px auto auto; transform: none; width: 220px;
    max-width: calc(100vw - 28px); }
}
#player-health {
  position: relative; overflow: hidden; height: 21px; margin-bottom: 4px;
  border: 1px solid #a17c3e; border-radius: 4px; background: #190c0d;
  box-shadow: inset 0 1px 4px #0009;
}
#player-health .health-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--health-fill, 0%);
  background: linear-gradient(#b44440, #702220); border-right: 1px solid #e5816b;
}
#player-health .health-label {
  position: relative; display: block; text-align: center; line-height: 21px;
  color: #fff4de; font-weight: 600; text-shadow: 0 1px 2px #000;
}
#player-identity { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 7px; margin: 0 1px 5px; }
#player-identity > div { min-width: 0; }
#player-name { display: block; overflow: hidden; color: var(--panel-gold);
  font: bold 14px/1.2 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
#player-title { display: none; }
#player-level-class { flex: none; color: #d8c49b; font-size: 10px; white-space: nowrap; }
#player-identity[data-class="warrior"] #player-name { color: #c79c6e; }
#player-identity[data-class="paladin"] #player-name { color: #f58cba; }
#player-identity[data-class="rogue"] #player-name { color: #fff468; }
#player-identity[data-class="priest"] #player-name { color: #f1f1f1; }
#player-identity[data-class="shaman"] #player-name { color: #55a0ef; }
#player-identity[data-class="druid"] #player-name { color: #ff9c43; }
#player-identity[data-class="mage"] #player-name { color: #69ccf0; }
#player-identity[data-class="hunter"] #player-name { color: #abd473; }
#player-identity[data-class="warlock"] #player-name { color: #b2a1e5; }
#player-identity[data-class="squirrelmancer"] #player-name { color: #d39b60; }
#player-resource { position: relative; overflow: hidden; height: 14px; margin-bottom: 4px;
  border: 1px solid #465e78; border-radius: 3px; background: #0b121b;
  box-shadow: inset 0 1px 3px #000a; }
#player-resource .resource-fill { position: absolute; inset: 0 auto 0 0;
  width: var(--resource-fill, 0%); border-right: 1px solid #aadaff;
  background: linear-gradient(#418cca, #245284); }
#player-resource[data-resource="rage"] .resource-fill {
  border-right-color: #ff9c86; background: linear-gradient(#c84b3f, #77251f); }
#player-resource[data-resource="energy"] .resource-fill {
  border-right-color: #fff39b; background: linear-gradient(#d8bd32, #827019); }
#player-resource[data-resource="focus"] .resource-fill {
  border-right-color: #ffc28c; background: linear-gradient(#cf773c, #7a411e); }
#player-resource .resource-label { position: relative; display: block; color: #f4f6f8;
  font: 10px/14px system-ui, sans-serif; text-align: center; text-shadow: 0 1px 2px #000; }
#player-xp { position: relative; overflow: hidden; height: 11px; margin-bottom: 4px;
  border: 1px solid #80652e; border-radius: 3px; background: #161109;
  box-shadow: inset 0 1px 3px #000a; }
#player-xp .xp-fill { position: absolute; inset: 0 auto 0 0; width: var(--xp-fill, 0%);
  background: linear-gradient(#dfb84d, #8a6724); border-right: 1px solid #f3d87a; }
#player-xp .xp-label { position: relative; display: block; color: #fff4d6;
  font: 9px/11px system-ui, sans-serif; text-align: center; text-shadow: 0 1px 2px #000; }
#player-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 9px; margin-top: 6px; }
.player-need { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 3px 4px; color: #d9cfbd; font: 10px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums; }
.need-name { text-align: left; }
.need-track { position: relative; grid-column: 1 / -1; grid-row: 2; overflow: hidden; height: 5px;
  border: 1px solid #765f3b; border-radius: 2px; background: #100d0a;
  box-shadow: inset 0 1px 2px #000b; }
.need-fill { position: absolute; inset: 0 auto 0 0; width: var(--need-fill, 0%);
  background: linear-gradient(#d4a74c, #88631e); }
.player-need[data-need="thirst"] .need-fill { background: linear-gradient(#55b6d8, #256c94); }
.player-need[data-need="sleep"] .need-fill { background: linear-gradient(#b394d8, #644b8c); }
.player-need[data-need="warmth"] .need-fill { background: linear-gradient(#e09555, #914b29); }
.need-value { text-align: right; color: #bfb29b; }

/* Keep neighboring transactions legible as separate entries in the journal. */
#game-panels :is(#professions, #construction, #collections, #merchant,
    #private-shops, #auction, #mail, #bank, #guild-panel) form {
  margin: 12px 0;
  padding: 12px;
  gap: 8px;
  border: 1px solid #80633b55;
  border-left: 2px solid #aa834c99;
  border-radius: 4px;
  background: linear-gradient(120deg, #33241666, #100d0a66);
  box-shadow: inset 0 1px #e9d3a30a;
}
#game-panels #enterprise-actions { margin: 0; padding: 0; border: 0;
  background: none; box-shadow: none; }
.enterprise-empty { margin: 10px 0; padding: 14px; border: 1px dashed #80633b;
  border-radius: 5px; background: #22180f; }
.enterprise-empty h3 { margin: 0 0 6px; color: var(--panel-gold);
  font: bold 17px Georgia, serif; }
.enterprise-empty p { margin: 0; color: #c4b598; line-height: 1.5; }
#game-panels :is(#social, #guild-panel) li {
  padding: 8px 0;
  border-bottom: 1px solid #80633b44;
  line-height: 1.5;
}

/* Dense transaction views share a readable type and control floor. */
#game-panels small { font-size: 12px; line-height: 1.4; }
#game-panels :is(.social-contact small, .social-empty, .social-presence > span,
    .guild-member-card small, .guild-record span, .guild-action-hint,
    .exchange-card-copy small, .exchange-detail p, .party-adventure-choice small,
    .party-member-card small, .party-open-card small, .profession-tab small,
    .profession-spec > small, .profession-output, .profession-recipe-title small,
    .profession-recipe-status, .merchant-head small, .talent-node-detail,
    .talent-options button small, .merchant-price,
    .bank-item-copy small, .auction-item-copy small, .auction-price,
    .mail-message-row small, .chronicle-copy small, .chronicle-count,
    .quest-full-entry > summary, .damage-meter-detail, .class-guide-mechanics,
    .character-fact small, .talent-note) {
  font-size: 12px;
  line-height: 1.4;
}
#game-panels :is(.social-empty, .guild-action-hint, .class-guide-mechanics,
    .talent-note, .character-fact small) { color: var(--panel-muted); }
#game-panels :is(.social-contact button, .social-relation-form button,
    .social-presence button, .guild-tab, .exchange-actions button,
    .merchant-tab, .profession-spec > button, .profession-recipe-actions button,
    .party-browser-actions button, .party-open-card button) {
  min-height: 36px;
  font-size: 12px;
}
#game-panels :is(.guild-compact-controls, .exchange-compact-controls,
    .party-compact-controls, .social-compact-controls, .merchant-compact-controls,
    .bank-compact-controls, .auction-compact-controls, .mail-compact-controls,
    .chronicle-reference) > summary {
  color: var(--panel-muted);
  font-size: 12px;
}
.bag-equipment-cell { font-size: 11px; line-height: 1.25; }
.bag-equipment-cell > .bag-slot { min-height: 72px; }
.bag-slot { line-height: 1.25; }
.profession-reagents span { padding: 2px 5px; font-size: 11px; line-height: 1.3; }
#game-panels :is(.social-contact-section, .social-activity, .exchange-detail,
    .guild-member-card, .guild-record, .party-member-card, .party-open-card,
    .profession-spec, .profession-recipe) {
  background-color: var(--panel-surface);
}
@media (max-width: 700px) {
  #game-panels { left: 8px; gap: 5px; }
  #game-panels .panel-body { width: calc(100vw - 16px); min-width: 0;
    max-width: calc(100vw - 16px); padding: 0 14px 16px; resize: none; }
  #game-panels > details > summary { min-height: 36px; }
  #game-panels :is(.social-layout, .exchange-browser-layout, .profession-layout) {
    grid-template-columns: minmax(0, 1fr);
  }
  #game-panels :is(.guild-tabs, .merchant-tabs, .profession-tabs) {
    overflow-x: auto;
  }
  #game-panels .profession-tabs { display: flex; }
  #game-panels .profession-tab { flex: 0 0 136px; }
  #game-panels .profession-tab-hint { display: block; margin: 0 0 6px;
    color: var(--panel-muted); font-size: 12px; }
}
@media (max-width: 480px) {
  #game-panels .exchange-shelf { grid-template-columns: minmax(0, 1fr);
    max-height: min(30vh, 240px); }
  #game-panels #economy-trade > .form-field { flex-basis: 100%; }
  #game-panels #construction-place > .form-field { flex-basis: 100%; }
  #game-panels :is(#craft-recipe, #craft-selected, #profession-training) > .form-field {
    flex-basis: 100%;
  }
  #game-panels :is(#craft-recipe, #craft-selected, #profession-training)
      :is(input, select, button) { min-height: 44px; }
  #game-panels :is(#craft-recipe, #craft-selected, #profession-training) > button {
    width: 100%;
  }
}

/* Short laptop viewports keep the world visible while naming dock controls. */
@media (min-width: 701px) and (min-height: 481px) and (max-height: 800px) {
  #action-bar { bottom: 12px; gap: 5px; padding: 5px; }
  .combat-page #action-bar button {
    flex-basis: 78px;
    min-width: 78px;
    min-height: 0;
    height: 84px;
    padding: 3px;
    gap: 1px;
    overflow: hidden;
  }
  .combat-page #action-bar button img { width: 40px; height: 40px; }
  .combat-page #action-bar .ability-cooldown {
    top: 3px;
    left: calc(50% - 21px);
    width: 42px;
    height: 42px;
  }
  .combat-page #action-bar .ability-name {
    display: -webkit-box;
    width: 100%;
    max-height: 27px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
  }
  #game-panels { inset: auto 60px 112px 14px; gap: 4px; }
  #game-panels > details > summary[data-dock-label] {
    box-sizing: border-box;
    display: grid;
    width: 64px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    place-items: center;
    overflow: hidden;
    font-size: 0;
  }
  #game-panels > details > summary[data-dock-label]::after {
    content: attr(data-dock-label);
    font: 700 11px/1 system-ui, sans-serif;
    letter-spacing: 0;
  }
  #nearby-actions { bottom: 160px; }
  #chat-overlay { bottom: 134px; }
}
@media (min-width: 701px) and (max-width: 760px) and (min-height: 481px) and (max-height: 800px) {
  #game-panels > details > summary[data-dock-label] { width: 58px; }
  #game-panels > details > summary[data-dock-label]::after { font-size: 10.5px; }
}

/* Keyed Dommy trees retain the surrounding panel and grid layout. */
.dommy-contents { display: contents; }

/* Shared party and aura controls on persistent and adventure pages. */
    #player-auras, #target-auras { display: flex; flex-wrap: wrap; gap: 5px;
      margin-top: 7px; pointer-events: auto; }
    #player-auras[hidden], #target-auras[hidden] { display: none; }
    #target-auras { flex-direction: column; }
    .target-aura-group { display: flex; flex-wrap: wrap; gap: 5px; }
    .target-aura-group::before { content: "Buffs"; flex-basis: 100%; color: #c4d9bf;
      font: 9px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
    .target-aura-group[data-harmful="true"]::before { content: "Debuffs"; color: #e5aaa0; }
    .player-aura { position: relative; display: block; width: 34px; height: 34px; padding: 0; overflow: hidden; border: 2px solid #6c9fca; border-radius: 5px; background: #111821; }
    .player-aura[data-harmful="true"] { border-color: #a14438; }
    .player-aura img { width: 100%; height: 100%; object-fit: cover; }
    .player-aura .aura-stack, .player-aura .aura-time { position: absolute; color: white; font: bold 10px/1 system-ui, sans-serif; text-shadow: 0 1px 2px black, 0 0 3px black; }
    .player-aura .aura-stack { right: 2px; bottom: 2px; }
    .player-aura .aura-time { left: 2px; bottom: 2px; }
    .player-aura:focus-visible { outline: 2px solid #f4dc9a; outline-offset: 2px; }
    #target-auras .player-aura { width: 30px; height: 30px; }
    #aura-tooltip { position: fixed; z-index: 10; max-width: 260px; padding: 8px 10px; color: #eef7e8; background: rgb(11 17 23 / 96%); border: 1px solid #789270; border-radius: 5px; pointer-events: none; font: 12px/1.4 system-ui, sans-serif; }
    #aura-tooltip[hidden] { display: none; }
    #aura-tooltip p { margin: 3px 0 0; color: #baccc7; }
    #party-frames { display: grid; gap: 5px; margin-top: 8px; pointer-events: auto; }
    #party-frames[hidden] { display: none; }
    .party-frame { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 3px 7px; width: 100%; padding: 5px 7px; color: #eef7e8; text-align: left; background: #111821e8; border: 1px solid #667768; border-radius: 5px; cursor: pointer; font: 11px/1.2 system-ui, sans-serif; }
    .party-frame[data-selected="true"] { border-color: #f4dc9a; box-shadow: 0 0 0 1px #f4dc9a; }
    .party-frame[data-in-range="false"] { opacity: .48; }
    .party-frame[data-alive="false"] { opacity: .58; filter: grayscale(.65); }
    .party-frame:hover, .party-frame:focus-visible { outline: 2px solid #e6cc78; outline-offset: 1px; }
    .party-frame > img { grid-row: 1 / 3; width: 28px; height: 28px; border: 1px solid #8a7951; border-radius: 4px; }
    .party-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
    .party-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .party-heading .target-marker-badge { flex: none; font-size: 15px; line-height: 12px; }
    .party-role { color: #cbbf9f; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
    .party-health { position: relative; grid-column: 2; height: 10px; overflow: hidden; background: #341718; border: 1px solid #755052; border-radius: 2px; }
    .party-health .health-fill { display: block; width: var(--health-fill); height: 100%; background: #4b9b45; }
    .party-health .health-label { position: absolute; inset: 0; text-align: center; color: white; font: bold 8px/10px system-ui, sans-serif; text-shadow: 0 1px 2px black; }
    .party-flags { grid-column: 2; color: #a9c8e3; font-size: 9px; }
    .party-auras { grid-column: 2; display: flex; gap: 3px; min-height: 18px; }
    .party-aura { width: 18px; height: 18px; border-width: 1px; border-radius: 3px; }
    .party-aura[data-timed="true"]::after { content: ""; position: absolute; inset: 0 0 auto;
      height: var(--aura-sweep); background: #000a; pointer-events: none; }
    .party-aura .aura-stack { right: 1px; bottom: 1px; z-index: 1; font-size: 8px; }
    @media (max-width: 500px) {
      #party-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
      .party-frame { grid-template-columns: 20px minmax(0, 1fr); gap: 2px 4px;
        min-height: 48px; padding: 4px; font-size: 10px; }
      .party-frame > img { width: 20px; height: 20px; }
      .party-heading { gap: 2px; }
      .party-heading strong { white-space: normal; text-wrap: balance; word-break: break-all;
        line-height: 1.1; max-height: 2.2em; }
      .party-role { display: none; }
      .party-auras { min-height: 0; overflow-x: auto; scrollbar-width: none; }
      .party-aura { flex: none; width: 16px; height: 16px; }
      .party-frame[data-self="true"] :is(.party-flags, .party-auras) { display: none; }
    }
    @media (max-height: 480px) and (min-width: 560px) {
      #party-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .party-frame { grid-template-columns: 24px minmax(0, 1fr); gap: 2px 5px; padding: 3px 5px; }
      .party-frame > img { width: 22px; height: 22px; }
      .party-role { font-size: 8px; }
      .party-flags { display: none; }
      .party-aura { width: 16px; height: 16px; }
    }