:root {
  color-scheme: dark;
  --ink: #ece2c5;
  --muted: #a99b7c;
  --line: rgba(201, 169, 98, 0.32);
  --panel: rgba(16, 13, 9, 0.78);
  --panel-deep: rgba(8, 7, 6, 0.86);
  --gold: #d9a932;
  --gold-pale: #f3d887;
  --red: #9f2e20;
  --blue: #225699;
  --green: #668f3a;
  font-family: Georgia, "Noto Serif SC", "Songti SC", serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #080706;
  color: var(--ink);
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-pale);
  outline-offset: 2px;
}

.is-hidden {
  display: none !important;
}

.game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  background: #354b55;
}

#worldCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.game-shell.is-locked #worldCanvas {
  filter: blur(5px) saturate(0.65);
  transform: scale(1.01);
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 4, 3, 0.22), transparent 22%, transparent 76%, rgba(5, 4, 3, 0.46)),
    radial-gradient(circle, transparent 64%, rgba(3, 3, 2, 0.42));
  z-index: 1;
}

.panel {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 36%),
    var(--panel);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.58),
    0 5px 18px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(3px);
}

.game-ui {
  position: absolute;
  z-index: 4;
}

.game-shell.is-locked .game-ui,
.game-shell.is-locked .world-labels {
  opacity: 0;
  pointer-events: none;
}

.auth-panel {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: min(430px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 28px;
  overflow: auto;
  transform: translate(-50%, -50%);
}

.auth-panel.is-character-select {
  width: min(620px, calc(100% - 32px));
}

.auth-panel.is-character-select > .crest,
.auth-panel.is-character-select > .auth-lede,
.auth-panel.is-character-select > .auth-tabs,
.auth-panel.is-character-select > #authForm {
  display: none;
}

.character-select-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.character-select-heading h2,
.character-create-form h3 {
  margin: 2px 0 0;
  color: var(--gold-pale);
}

.character-select-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.character-slot-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.character-slot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 102px;
  border: 1px solid #554832;
  border-radius: 2px;
  padding: 12px;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(46, 35, 22, 0.92), rgba(12, 10, 8, 0.96));
  text-align: left;
  cursor: pointer;
}

.character-slot::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, transparent 48%, rgba(12, 10, 8, 0.76) 100%);
  content: "";
  pointer-events: none;
}

.character-slot:hover,
.character-slot:focus-visible {
  border-color: var(--gold);
  outline: 2px solid rgba(217, 169, 50, 0.24);
  outline-offset: 2px;
}

.character-slot[aria-pressed="true"] {
  border-color: #f1ce72;
  box-shadow: inset 0 0 0 1px rgba(241, 206, 114, 0.45);
  background: linear-gradient(145deg, rgba(91, 58, 20, 0.94), rgba(21, 15, 9, 0.98));
}

.character-slot small,
.character-slot span,
.character-slot strong {
  position: relative;
  z-index: 2;
  display: block;
}

.character-slot .character-slot-portrait {
  position: absolute;
  z-index: 0;
  top: -5px;
  right: 3px;
  width: 62px;
  height: 124px;
  background-image: url("./assets/classes-atlas.png?v=1");
  background-repeat: no-repeat;
  background-size: 400% 100%;
  opacity: 0.76;
  filter: drop-shadow(-5px 3px 5px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.character-slot .character-slot-portrait[data-profession="warrior"] { background-position: 0% 50%; }
.character-slot .character-slot-portrait[data-profession="rogue"] { background-position: 33.333% 50%; }
.character-slot .character-slot-portrait[data-profession="mage"] { background-position: 66.667% 50%; }
.character-slot .character-slot-portrait[data-profession="priest"] { background-position: 100% 50%; }

.character-slot[aria-pressed="true"] .character-slot-portrait {
  opacity: 0.96;
  filter: drop-shadow(-5px 3px 7px rgba(0, 0, 0, 0.82));
}

.character-slot small {
  max-width: calc(100% - 44px);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .12em;
}

.character-slot strong {
  max-width: calc(100% - 44px);
  margin: 7px 0 5px;
  color: var(--gold-pale);
  font-size: 18px;
}

.character-slot span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.character-slot .character-slot-progress {
  margin-top: 8px;
  border-top: 1px solid rgba(210, 176, 96, 0.2);
  padding-top: 7px;
  background: linear-gradient(90deg, rgba(16, 12, 8, 0.8), rgba(16, 12, 8, 0.26) 82%, transparent);
  color: var(--gold-pale);
}

.character-slot.is-empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  color: var(--muted);
  text-align: center;
}

.character-slot.is-empty::after { content: none; }

.character-slot.is-empty strong {
  margin: 0;
  font-size: 15px;
}

.character-create-form {
  margin-top: 12px;
  border: 1px solid var(--line);
  padding: 14px;
  background: rgba(13, 11, 9, 0.72);
}

.character-create-actions,
.character-select-actions {
  display: flex;
  gap: 8px;
}

.character-create-actions button,
.character-select-actions button {
  min-height: 40px;
  flex: 1;
}

.character-select-actions {
  margin-top: 12px;
}

.auth-panel::before,
.side-panel::before,
.map-panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(210, 176, 96, 0.14);
}

.crest {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-pale);
  background: #3b1b13;
  font-weight: 800;
  letter-spacing: -0.08em;
  box-shadow: 0 0 0 5px rgba(217, 169, 50, 0.08);
}

.eyebrow {
  margin: 0;
  color: var(--gold);
  font: 700 10px/1.4 Arial, sans-serif;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.auth-panel h1 {
  margin: 4px 0 8px;
  text-align: center;
  font-size: 34px;
  color: var(--gold-pale);
  text-shadow: 0 2px 0 #000;
}

.auth-panel > .eyebrow,
.auth-lede {
  text-align: center;
}

.auth-lede,
.panel-copy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.recruitment-hint {
  margin: 0 0 12px;
  padding: 9px 11px;
  border-left: 2px solid var(--gold);
  background: rgba(217, 169, 50, 0.08);
  color: var(--gold-pale);
  font-size: 12px;
  line-height: 1.55;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px 0;
  border-bottom: 1px solid var(--line);
}

.auth-tab {
  padding: 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.auth-tab.is-active {
  border-color: var(--gold);
  color: var(--gold-pale);
}

form label,
.side-panel label {
  display: grid;
  gap: 6px;
  margin: 11px 0;
  color: var(--muted);
  font-size: 12px;
}

input,
select,
textarea {
  min-height: 38px;
  border: 1px solid #554832;
  border-radius: 2px;
  padding: 0 10px;
  color: var(--ink);
  background: #0d0b09;
}

textarea {
  padding: 8px 10px;
  resize: vertical;
}

fieldset {
  margin: 16px 0;
  padding: 12px;
  border: 1px solid var(--line);
}

legend {
  padding: 0 8px;
  color: var(--gold-pale);
}

.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.choice-card {
  position: relative;
  min-height: 64px;
  padding: 10px 10px 10px 34px;
  border: 1px solid #4b3d29;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.choice-card input {
  position: absolute;
  top: 11px;
  left: 10px;
  min-height: auto;
}

.choice-card b,
.choice-card small {
  display: block;
}

.choice-card small {
  margin-top: 4px;
  color: var(--muted);
}

.karus-choice:has(input:checked) { border-color: #c35c40; background: rgba(159, 46, 32, 0.17); }
.elmorad-choice:has(input:checked) { border-color: #5682c2; background: rgba(34, 86, 153, 0.17); }

.enter-button,
.action-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid #e1bd63;
  border-radius: 2px;
  background: linear-gradient(#9f7621, #60400e);
  color: #fff3c8;
  font-weight: 800;
  text-shadow: 0 1px #000;
  cursor: pointer;
}

.form-message {
  min-height: 20px;
  margin: 10px 0 0;
  color: #e0b36f;
  font-size: 12px;
  line-height: 1.5;
}

.player-hud {
  top: 12px;
  left: 12px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  width: 282px;
  min-height: 68px;
  padding: 8px;
  gap: 9px;
}

.portrait {
  display: grid;
  width: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid var(--gold);
  background: #281a0e;
  color: var(--gold-pale);
  font-size: 23px;
}

.hud-copy { flex: 1; min-width: 0; }
.hud-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  gap: 6px;
}
.hud-name-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-name-row span { color: var(--gold); font-size: 12px; }
.hud-ranks {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}
#playerNationPoints {
  color: #f2bd63;
  font-weight: 800;
}

.meter {
  position: relative;
  height: 14px;
  margin: 4px 0;
  overflow: hidden;
  border: 1px solid #030303;
  background: #191714;
  box-shadow: inset 0 1px 3px #000;
}

.meter i {
  display: block;
  width: 0;
  height: 100%;
  transition: width 140ms linear;
}

.meter span {
  position: absolute;
  inset: 0;
  text-align: center;
  font: 700 10px/12px Arial, sans-serif;
  text-shadow: 0 1px #000;
}

.hp-meter i,
.target-meter i { background: linear-gradient(90deg, #762018, #c8442d); }
.mp-meter i { background: linear-gradient(90deg, #173c72, #2f70bd); }

.target-hud {
  top: 18px;
  left: 50%;
  width: 260px;
  padding: 8px 11px;
  transform: translateX(-50%);
}

.status-tray {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  min-height: 36px;
  margin: 0;
  padding: 0;
  gap: 4px;
  list-style: none;
}

.target-hud .status-tray {
  margin-top: 5px;
}

.status-tray.is-empty {
  display: none;
}

.status-chip {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid #9a7a35;
  background:
    linear-gradient(135deg, rgba(231, 186, 66, 0.18), transparent 55%),
    #17130d;
  color: #f6dfa1;
  box-shadow: inset 0 0 0 1px #050403, 0 1px 3px rgba(0, 0, 0, 0.7);
}

.status-chip.is-debuff {
  border-color: #9b4539;
  background:
    linear-gradient(135deg, rgba(180, 43, 31, 0.24), transparent 55%),
    #1b100d;
  color: #ffc1a8;
}

.status-chip b {
  font: 800 16px/1 Georgia, "SimSun", serif;
  text-shadow: 0 1px 2px #000;
}

.status-chip small {
  position: absolute;
  right: 2px;
  bottom: 1px;
  color: #fff5cf;
  font: 700 8px/1 Arial, sans-serif;
  text-shadow: 0 1px 2px #000;
}

.zone-status {
  top: 112px;
  left: 50%;
  display: grid;
  min-width: 188px;
  padding: 4px 14px 5px;
  transform: translateX(-50%);
  border-top: 1px solid rgba(228, 202, 137, 0.38);
  border-bottom: 1px solid rgba(228, 202, 137, 0.38);
  background: linear-gradient(90deg, transparent, rgba(9, 8, 6, 0.82) 18%, rgba(9, 8, 6, 0.82) 82%, transparent);
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

.zone-status strong {
  color: var(--gold-pale);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.zone-status span {
  margin-top: 2px;
  color: #b8cf93;
  font: 9px/1.2 Arial, "Microsoft YaHei", sans-serif;
}

.zone-status.is-war span { color: #f0a08d; }
.zone-status.is-war.is-locked span { color: #d9b86b; }
.zone-status.is-pve span { color: #c9b886; }

.local-minimap {
  top: 12px;
  right: 12px;
  width: 168px;
  height: 168px;
  padding: 5px;
  overflow: hidden;
  border-color: rgba(213, 178, 89, 0.64);
  border-radius: 50%;
  background: rgba(9, 9, 7, 0.9);
  color: var(--gold-pale);
  cursor: pointer;
  box-shadow: 0 2px 13px rgba(0, 0, 0, 0.5);
}

.local-minimap:hover,
.local-minimap:focus-visible {
  border-color: #edca71;
  outline: 2px solid rgba(237, 202, 113, 0.32);
  outline-offset: 2px;
}

.local-minimap canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.minimap-north,
.minimap-map-name,
.minimap-coordinates,
.local-minimap > kbd {
  position: absolute;
  z-index: 1;
  color: #f8e5a7;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  pointer-events: none;
}

.minimap-north {
  top: 7px;
  left: 50%;
  font-size: 9px;
  transform: translateX(-50%);
}

.minimap-map-name {
  top: 16px;
  left: 50%;
  max-width: 92px;
  overflow: hidden;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
}

.minimap-coordinates {
  bottom: 12px;
  left: 50%;
  font-size: 8px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.local-minimap > kbd {
  right: 16px;
  bottom: 19px;
  padding: 2px 3px;
  border: 1px solid rgba(234, 199, 107, 0.5);
  background: rgba(14, 11, 7, 0.75);
  font-size: 8px;
}

.tutorial-coach {
  bottom: 148px;
  left: 50%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  width: min(430px, calc(100% - 32px));
  min-height: 58px;
  padding: 8px 10px;
  gap: 9px;
  transform: translateX(-50%);
  border-color: rgba(217, 169, 50, 0.52);
  background:
    linear-gradient(90deg, rgba(121, 74, 16, 0.2), transparent 42%),
    rgba(13, 11, 8, 0.92);
}

.coach-sigil {
  display: grid;
  width: 30px;
  height: 36px;
  place-items: center;
  border: 1px solid #99712c;
  color: var(--gold-pale);
  background: #3b220d;
  font: 800 18px/1 Georgia, serif;
  clip-path: polygon(50% 0, 100% 20%, 90% 78%, 50% 100%, 10% 78%, 0 20%);
}

.coach-copy {
  min-width: 0;
}

.coach-copy > span {
  display: block;
  color: var(--gold);
  font: 700 9px/1.2 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: 0.08em;
}

.coach-copy strong {
  display: block;
  margin-top: 2px;
  color: var(--gold-pale);
  font-size: 13px;
}

.coach-copy p {
  margin: 2px 0 0;
  overflow: hidden;
  color: #c7b995;
  font: 10px/1.3 Arial, "Microsoft YaHei", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-controls {
  display: grid;
  min-width: 72px;
  gap: 4px;
}

.tutorial-coach kbd {
  min-width: 52px;
  padding: 7px 8px;
  border: 1px solid #9b793a;
  background: #21170d;
  color: #fff0bc;
  text-align: center;
  font: 800 12px/1 Arial, sans-serif;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.45);
}

#coachAction {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #bd9139;
  color: #fff0bc;
  background: linear-gradient(#684719, #34210c);
  font: 800 10px/1 Arial, "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

#coachAction:hover,
#coachAction:focus-visible {
  border-color: #f0c45e;
  outline: 2px solid rgba(240, 196, 94, 0.35);
  outline-offset: 1px;
}

.quest-compass {
  --quest-turn: 0deg;
  bottom: 145px;
  left: 50%;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 24px auto;
  align-items: center;
  width: min(330px, calc(100% - 32px));
  min-height: 50px;
  padding: 7px 10px;
  gap: 8px;
  transform: translateX(-50%);
  border-color: rgba(217, 169, 50, 0.58);
  background:
    linear-gradient(90deg, rgba(121, 74, 16, 0.22), transparent 46%),
    rgba(13, 11, 8, 0.93);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.quest-compass:hover {
  border-color: rgba(243, 216, 135, 0.82);
  background:
    linear-gradient(90deg, rgba(146, 91, 20, 0.28), transparent 50%),
    rgba(18, 14, 9, 0.96);
}

.quest-compass.is-ready {
  border-color: rgba(241, 191, 70, 0.92);
  background:
    linear-gradient(90deg, rgba(145, 92, 20, 0.4), transparent 56%),
    rgba(20, 15, 8, 0.97);
  box-shadow: 0 0 16px rgba(225, 161, 43, 0.26);
}

.quest-compass.is-ready em {
  color: #fff0af;
}

.quest-compass-sigil {
  display: grid;
  width: 26px;
  height: 32px;
  place-items: center;
  color: var(--gold-pale);
  font-size: 15px;
  text-shadow: 0 0 8px rgba(225, 170, 54, 0.72);
}

.quest-compass-copy {
  min-width: 0;
}

.quest-compass-copy small,
.quest-compass-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-compass-copy small {
  color: var(--gold);
  font: 700 8px/1.2 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: .06em;
}

.quest-compass-copy strong {
  margin-top: 3px;
  color: var(--gold-pale);
  font-size: 12px;
}

.quest-compass i {
  display: block;
  color: #fff1b5;
  font: 800 20px/1 Arial, sans-serif;
  transform: rotate(var(--quest-turn));
  transition: transform 140ms ease-out;
  transform-origin: 50% 52%;
}

.quest-compass em {
  min-width: 76px;
  color: #c9bb95;
  font: normal 700 10px/1.2 Arial, "Microsoft YaHei", sans-serif;
  text-align: right;
}

.quest-compass[data-stage="boss"] {
  border-color: rgba(208, 80, 53, 0.72);
  background:
    linear-gradient(90deg, rgba(131, 40, 25, 0.32), transparent 50%),
    rgba(17, 10, 8, 0.95);
}

body[data-onboarding-step="attack"] .skill-bar,
body[data-onboarding-step="pickup"] .skill-bar,
body[data-onboarding-step="equip"] #inventoryButton,
body[data-onboarding-step="forge"] #forgeButton {
  border-color: rgba(231, 181, 68, 0.82);
  box-shadow: 0 0 14px rgba(213, 153, 42, 0.22);
}

.target-hud > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
}

#targetKind { color: var(--muted); font-size: 10px; }
.target-identity {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  gap: 6px;
}
#targetName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#targetNationPoints {
  flex: 0 0 auto;
  color: #f2bd63;
  font: 800 9px/1 Arial, "Microsoft YaHei", sans-serif;
}

.party-panel {
  top: 130px;
  left: 12px;
  width: 238px;
  max-height: calc(100vh - 300px);
  padding: 8px;
  overflow: hidden;
}

.party-panel.is-solo {
  border-color: rgba(183, 142, 55, 0.78);
}

.party-panel.is-solo .party-summary {
  margin: 6px -2px 4px;
  padding: 4px 6px;
  border-left: 2px solid #d9a932;
  background: rgba(93, 62, 18, 0.28);
}

.party-panel.is-solo #partyMembers li {
  color: #e8d49c;
}

.party-panel header,
.side-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
}

.party-panel h2 {
  margin: 8px 0 2px;
  color: var(--gold-pale);
  font-size: 14px;
}

.party-header-actions,
.party-summary,
.same-map-roster-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.party-header-actions button {
  min-height: 24px;
  padding: 3px 6px;
  font-size: 9px;
}

.party-panel #inviteButton:disabled {
  cursor: default;
  opacity: 0.58;
}

.party-mobile-close {
  display: none;
}

.party-summary > span {
  max-width: 138px;
  color: #c9b886;
  font: 9px/1.3 Arial, "Microsoft YaHei", sans-serif;
  text-align: right;
}

.party-share-rule {
  margin: 0 0 5px;
  color: #c9b886;
  font: 9px/1.35 Arial, "Microsoft YaHei", sans-serif;
}

.party-panel ol,
.chat-panel ol,
.item-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.party-panel li {
  padding: 4px 0;
  color: var(--muted);
  font-size: 11px;
}

.party-panel li.is-share-eligible {
  color: #cbe09d;
}

.party-panel li.is-share-ineligible {
  color: #a89b83;
}

.same-map-roster-heading {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(102, 86, 56, 0.72);
}

.same-map-roster-heading b {
  color: var(--gold-pale);
  font-size: 11px;
}

.same-map-roster-heading span {
  color: var(--muted);
  font-size: 8px;
}

.same-map-roster {
  max-height: 170px;
  margin-top: 4px !important;
  overflow: auto;
  scrollbar-color: #6d5529 #17130d;
  scrollbar-width: thin;
}

.party-panel .same-map-roster-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: stretch;
  gap: 4px;
  padding: 2px 0;
}

.same-map-roster-select,
.same-map-roster-invite {
  min-width: 0;
  min-height: 34px;
  padding: 3px 5px;
  text-align: left;
}

.same-map-roster-select b,
.same-map-roster-select span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.same-map-roster-select b {
  color: #efe0b5;
  font-size: 10px;
}

.same-map-roster-select span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.same-map-roster-select[aria-pressed="true"] {
  border-color: #d9a932;
  background: rgba(112, 72, 18, 0.74);
}

.same-map-roster-row.is-self .same-map-roster-select b,
.same-map-roster-row.is-party .same-map-roster-select b {
  color: #cbe09d;
}

.same-map-roster-row.is-enemy .same-map-roster-select b {
  color: #e3a08f;
}

.same-map-roster-invite {
  text-align: center;
  font-size: 9px;
}

.same-map-roster-invite:disabled,
.same-map-roster-select:disabled {
  cursor: default;
  opacity: 0.52;
}

.party-panel .same-map-roster-empty {
  padding: 8px 2px;
  color: #c9b886;
  line-height: 1.45;
}

.party-panel button,
.side-panel header button,
.shop-row button,
.item-list button {
  border: 1px solid #665638;
  background: #201a12;
  color: var(--gold-pale);
  cursor: pointer;
}

.mission-panel {
  top: 12px;
  right: 192px;
  width: 228px;
  padding: 10px;
}

.mission-panel b,
.mission-panel span {
  display: block;
}

.mission-panel b { margin: 5px 0; }
.mission-panel span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.mission-panel ol {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.quest-step,
.hunt-step,
.highland-step,
.homeland-step,
.mentor-step,
.boss-step,
.boss-reward {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 6px;
  opacity: 0.68;
}

.mentor-step {
  grid-template-columns: 38px 1fr;
}

.mission-panel .mentor-step i {
  width: 36px;
}

.quest-step i,
.hunt-step i,
.highland-step i,
.homeland-step i,
.mentor-step i,
.boss-step i,
.boss-reward i {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid #665638;
  color: var(--gold-pale);
  font: 700 9px Arial, sans-serif;
}

.quest-step.is-complete,
.hunt-step.is-complete,
.highland-step.is-complete,
.homeland-step.is-complete,
.mentor-step.is-complete { opacity: 1; }
.quest-step.is-complete i,
.hunt-step.is-complete i,
.highland-step.is-complete i,
.homeland-step.is-complete i,
.mentor-step.is-complete i {
  border-color: #6f9448;
  color: #d4eda5;
  background: rgba(53, 92, 35, 0.48);
}

.quest-step.is-complete span,
.hunt-step.is-complete span,
.highland-step.is-complete span,
.homeland-step.is-complete span,
.mentor-step.is-complete span {
  color: #b7c69b;
  text-decoration: line-through;
}

.hunt-step.is-current,
.highland-step.is-current,
.homeland-step.is-current,
.mentor-step.is-current {
  opacity: 1;
}

.hunt-step.is-current i,
.highland-step.is-current i,
.homeland-step.is-current i,
.mentor-step.is-current i {
  border-color: #c18c35;
  background: rgba(126, 74, 20, 0.45);
  box-shadow: 0 0 8px rgba(225, 158, 61, 0.2);
}

.homeland-step.is-ready i {
  color: #fff0a1;
  border-color: #e4b64d;
  background: rgba(133, 87, 17, 0.72);
  box-shadow: 0 0 10px rgba(236, 183, 56, 0.42);
}

.boss-step {
  opacity: 1;
}

.boss-step i {
  border-color: #ba553e;
  color: #ffd0b0;
  background: rgba(107, 28, 21, 0.6);
  box-shadow: 0 0 8px rgba(211, 64, 42, 0.28);
}

.boss-reward {
  opacity: 0.78;
}

.boss-reward i {
  border-color: #927231;
  color: #ffe08c;
  background: rgba(99, 70, 18, 0.42);
}

.boss-step.is-complete,
.boss-reward.is-complete {
  opacity: 1;
}

.boss-step.is-complete i,
.boss-reward.is-complete i {
  border-color: #6f9448;
  color: #d4eda5;
  background: rgba(53, 92, 35, 0.48);
}

.top-actions {
  top: 188px;
  right: 12px;
  display: flex;
  gap: 5px;
}

.top-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 11px;
  cursor: pointer;
}

.top-actions #partyMobileButton {
  display: none;
}

.top-actions #playtestButton.is-attention {
  display: block;
  border-color: #e4b64d;
  color: #fff0a1;
  background: linear-gradient(180deg, rgba(113, 70, 15, 0.96), rgba(42, 24, 7, 0.96));
  box-shadow: 0 0 0 1px rgba(255, 225, 134, 0.16), 0 0 14px rgba(236, 183, 56, 0.48);
  animation: playtest-attention 1.8s ease-in-out infinite;
}

.touch-controls {
  display: none;
}

@keyframes playtest-attention {
  0%, 100% { filter: brightness(0.94); }
  50% { filter: brightness(1.18); }
}

kbd {
  color: var(--gold-pale);
  font: 700 10px Arial, sans-serif;
}

.side-panel {
  top: 210px;
  right: 12px;
  width: 296px;
  max-height: calc(100% - 278px);
  padding: 12px;
  overflow: auto;
}

.side-panel h2 {
  margin: 0;
  color: var(--gold-pale);
  font-size: 17px;
}

.side-panel header button {
  width: 28px;
  height: 28px;
  font-size: 20px;
}

#characterPanel > header,
#inventoryPanel > header,
#warehousePanel > header {
  position: sticky;
  z-index: 2;
  top: 0;
  background: rgba(13, 11, 8, 0.98);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.34);
}

.map-panel {
  z-index: 18;
  top: 50%;
  left: 50%;
  width: min(660px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 14px;
  overflow: auto;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(135deg, rgba(255, 246, 203, 0.035), transparent 34%),
    rgba(12, 10, 7, 0.94);
}

.map-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.map-panel h2 {
  margin: 1px 0 0;
  color: var(--gold-pale);
  font-size: 19px;
}

.map-panel header button {
  width: 30px;
  height: 30px;
  border: 1px solid #665638;
  background: #201a12;
  color: var(--gold-pale);
  font-size: 21px;
  cursor: pointer;
}

.map-panel .panel-copy {
  margin: 8px 0;
  font-size: 11px;
}

.world-map {
  position: relative;
  aspect-ratio: 25 / 18;
  overflow: hidden;
  border: 2px solid #7e6737;
  outline: 1px solid rgba(13, 9, 4, 0.86);
  outline-offset: -5px;
  background-color: #776843;
  background-image:
    linear-gradient(90deg, transparent 49.5%, rgba(72, 54, 31, 0.5) 50%, transparent 50.5%),
    linear-gradient(transparent 49.5%, rgba(72, 54, 31, 0.5) 50%, transparent 50.5%),
    repeating-linear-gradient(22deg, rgba(255, 247, 204, 0.035) 0 2px, transparent 2px 8px);
  box-shadow:
    inset 0 0 38px rgba(33, 20, 7, 0.58),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.world-map::before,
.world-map::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: rgba(92, 73, 44, 0.36);
}

.world-map::before {
  top: 0;
  bottom: 0;
  left: 47%;
  width: 6%;
  border-right: 1px solid rgba(43, 31, 17, 0.28);
  border-left: 1px solid rgba(43, 31, 17, 0.28);
}

.world-map::after {
  top: 46%;
  right: 0;
  left: 0;
  height: 8%;
  border-top: 1px solid rgba(43, 31, 17, 0.28);
  border-bottom: 1px solid rgba(43, 31, 17, 0.28);
}

.world-map[data-map-id="frontier-highlands"] {
  background-color: #666543;
  background-image:
    radial-gradient(ellipse at 20% 34%, rgba(49, 67, 47, 0.58), transparent 28%),
    radial-gradient(ellipse at 78% 63%, rgba(84, 73, 43, 0.62), transparent 31%),
    repeating-linear-gradient(155deg, rgba(222, 215, 166, 0.035) 0 2px, transparent 2px 9px);
}

.map-zone {
  position: absolute;
  z-index: 0;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(24, 20, 13, 0.52);
  color: rgba(255, 246, 202, 0.74);
  font: 700 9px/1.2 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px #1a1208;
}

.map-zone.is-safe {
  border-color: rgba(109, 142, 70, 0.74);
  background: rgba(58, 91, 45, 0.34);
}

.map-zone.is-war {
  border-color: rgba(157, 57, 42, 0.8);
  background: rgba(111, 33, 25, 0.34);
}

.map-compass {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 12px;
  display: grid;
  place-items: center;
  color: #3e2b16;
  font: 800 10px/1 Arial, "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px rgba(255, 236, 173, 0.35);
}

.map-compass i {
  margin-top: 3px;
  color: #7d311f;
  font-size: 18px;
  font-style: normal;
}

.map-landmark {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  transform: translate(-50%, -50%);
  color: #25190c;
  white-space: nowrap;
  font: 700 9px/1 Arial, "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px rgba(255, 239, 184, 0.56);
}

.map-landmark i {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  place-items: center;
  border: 1px solid #4c361d;
  background: #d4b967;
  font-style: normal;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(27, 16, 6, 0.55);
}

.map-landmark span {
  max-width: 110px;
  margin-left: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-landmark.is-portal i { background: #b5a160; }
.map-landmark.is-monster i { background: #b98755; }
.map-landmark.is-boss i { background: #963b2a; color: #ffe3a8; }
.map-landmark.is-gate i { background: #9a8760; }
.map-landmark.is-dormant { opacity: 0.62; }

.map-player-marker {
  --map-facing: 0rad;
  position: absolute;
  z-index: 6;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #fff3b1;
  filter: drop-shadow(0 1px 2px #160d05);
}

.map-player-marker i {
  display: block;
  color: #f4d446;
  font-size: 24px;
  font-style: normal;
  line-height: 1;
  rotate: var(--map-facing);
}

.map-player-marker span {
  position: absolute;
  top: 29px;
  padding: 1px 3px;
  background: rgba(32, 22, 10, 0.78);
  font: 800 8px/1 Arial, "Microsoft YaHei", sans-serif;
}

.map-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  color: var(--muted);
  font: 10px/1.4 Arial, "Microsoft YaHei", sans-serif;
}

.map-readout strong { color: var(--gold-pale); }

.map-details {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.25fr);
  gap: 10px;
  margin-top: 9px;
}

.map-details > div {
  min-width: 0;
  border-top: 1px solid rgba(201, 169, 98, 0.18);
  padding-top: 7px;
}

.map-details h3 {
  margin: 0 0 6px;
  color: var(--gold-pale);
  font-size: 11px;
}

.map-legend,
.map-landmark-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 5px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font: 9px/1.35 Arial, "Microsoft YaHei", sans-serif;
}

.map-legend li,
.map-landmark-list li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.map-legend i,
.map-landmark-list i {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border: 1px solid #665638;
  color: var(--gold-pale);
  background: #221a0f;
  font-style: normal;
}

.map-landmark-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-shortcut {
  margin: 9px 0 0;
  color: var(--muted);
  text-align: center;
  font: 9px/1.35 Arial, "Microsoft YaHei", sans-serif;
}

.gold-line {
  color: var(--gold);
  font-weight: 700;
}

.character-summary,
.character-combat-panel {
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid rgba(207, 164, 70, 0.32);
  background: linear-gradient(145deg, rgba(56, 42, 22, 0.42), rgba(8, 8, 7, 0.82));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.42);
}

.character-summary-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.character-summary-crest {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid #a98237;
  color: #f3d686;
  background: radial-gradient(circle, #5c411b, #1d160d 68%);
  font: 700 20px Georgia, serif;
}

.character-summary-heading div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.character-summary-heading strong {
  overflow: hidden;
  color: var(--paper);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-summary-heading div span {
  color: var(--gold);
  font: 700 11px Georgia, serif;
}

.character-resource-grid,
.character-combat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 10px 0 0;
}

.character-resource-grid div,
.character-combat-grid div {
  min-width: 0;
  padding: 7px 8px;
  border-left: 2px solid rgba(180, 143, 62, 0.45);
  background: rgba(255, 255, 255, 0.025);
}

.character-resource-grid dt,
.character-combat-grid dt {
  color: var(--muted);
  font-size: 9px;
}

.character-resource-grid dd,
.character-combat-grid dd {
  margin: 2px 0 0;
  overflow: hidden;
  color: #eee2c5;
  font: 700 12px Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-section-heading span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.character-section-heading h3 {
  margin: 1px 0 0;
  color: var(--paper);
  font-size: 14px;
}

.character-combat-panel > p {
  margin: 8px 0 0;
  color: #817968;
  font-size: 8px;
  line-height: 1.45;
}

.ability-point-panel {
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid rgba(207, 164, 70, 0.36);
  background:
    linear-gradient(145deg, rgba(74, 49, 19, 0.32), rgba(8, 8, 7, 0.78)),
    rgba(10, 9, 7, 0.86);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.48);
}

.ability-point-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ability-point-heading span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.ability-point-heading h3 {
  margin: 1px 0 0;
  color: var(--paper);
  font-size: 14px;
}

.ability-point-heading > strong {
  color: var(--gold);
  font-size: 11px;
  font-weight: 500;
}

.ability-point-heading > strong b {
  margin-right: 3px;
  font-size: 18px;
}

.ability-recommendation {
  margin: 7px 0;
  color: #e6c779;
  font-size: 10px;
}

.ability-point-list {
  display: grid;
  gap: 3px;
}

.ability-point-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px 25px;
  align-items: center;
  gap: 6px;
  min-height: 35px;
  padding: 4px 5px 4px 8px;
  border-left: 2px solid rgba(143, 120, 70, 0.28);
  background: rgba(255, 255, 255, 0.025);
}

.ability-point-row.is-recommended {
  border-left-color: var(--gold);
  background: rgba(194, 145, 45, 0.08);
}

.ability-point-row div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ability-point-row b {
  color: #eee2c5;
  font-size: 12px;
}

.ability-point-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ability-point-row output {
  color: var(--gold);
  font: 700 13px Georgia, serif;
  text-align: center;
}

.ability-point-row button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #a98237;
  background: linear-gradient(#5e421a, #251b0d);
  color: #ffe8a5;
  font-size: 17px;
  line-height: 1;
}

.ability-point-row button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.8);
  opacity: 0.38;
}

.ability-adaptation {
  margin: 8px 0 0;
  color: #817968;
  font-size: 8px;
  line-height: 1.45;
}

.equipment-slots {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  font-size: 11px;
}

.paper-doll {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  min-height: 220px;
  padding: 10px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 30% 35%, rgba(209, 166, 67, 0.1), transparent 42%),
    rgba(0, 0, 0, 0.25);
}

.paper-doll-silhouette {
  position: relative;
  min-height: 198px;
  border-right: 1px solid rgba(201, 169, 98, 0.15);
}

.paper-doll-silhouette i,
.paper-doll-silhouette b,
.paper-doll-silhouette span {
  position: absolute;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  border: 1px solid rgba(217, 169, 50, 0.28);
  background: #211b13;
}

.paper-doll-silhouette i {
  top: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.paper-doll-silhouette b {
  top: 37px;
  width: 50px;
  height: 48px;
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}

.paper-doll-silhouette span {
  top: 84px;
  width: 42px;
  height: 24px;
  clip-path: polygon(0 0, 46% 0, 46% 100%, 54% 100%, 54% 0, 100% 0, 84% 100%, 16% 100%);
}

.paper-doll .equipment-slots {
  align-content: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.paper-doll .equipment-slots div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 29px;
  padding: 7px 8px;
  border: 1px solid rgba(201, 169, 98, 0.18);
  background: rgba(8, 7, 5, 0.6);
}

.paper-doll .equipment-slots div > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unequip-button {
  flex: 0 0 auto;
  padding: 3px 6px;
  color: #d8c7a3;
  font-size: 9px;
}

.panel-section-title {
  margin: 13px 0 4px;
  color: var(--gold-pale);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.skill-list {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.specialization-panel {
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid rgba(210, 160, 62, 0.38);
  background:
    linear-gradient(135deg, rgba(112, 52, 17, 0.23), rgba(14, 17, 24, 0.76)),
    rgba(8, 8, 7, 0.72);
}

.specialization-panel > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--gold-pale);
  font: 11px/1.3 Arial, "Microsoft YaHei", sans-serif;
}

.specialization-panel > div:first-child span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.specialization-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 8px;
}

.specialization-panel[data-profession="rogue"] .specialization-options,
.specialization-panel[data-profession="warrior"] .specialization-options {
  grid-template-columns: repeat(2, 1fr);
}

.specialization-options button {
  min-width: 0;
  padding: 7px 4px;
  border: 1px solid #604c28;
  color: #e9d59b;
  background: rgba(20, 17, 12, 0.9);
  cursor: pointer;
}

.specialization-options button[data-specialization="fire"] { border-bottom-color: #c95226; }
.specialization-options button[data-specialization="ice"] { border-bottom-color: #5ba9d2; }
.specialization-options button[data-specialization="lightning"] { border-bottom-color: #b18bd8; }
.specialization-options button[data-specialization="archer"] { border-bottom-color: #6ba66c; }
.specialization-options button[data-specialization="assassin"] { border-bottom-color: #9a5577; }
.specialization-options button[data-specialization="healing"] { border-bottom-color: #62b970; }
.specialization-options button[data-specialization="blessing"] { border-bottom-color: #d4b14a; }
.specialization-options button[data-specialization="curse"] { border-bottom-color: #9b62b9; }
.specialization-options button[data-specialization="sword"] { border-bottom-color: #d06b37; }
.specialization-options button[data-specialization="defense"] { border-bottom-color: #c8ad66; }
.specialization-options button:disabled { cursor: default; opacity: 0.42; }
.specialization-options button.is-selected {
  color: #fff2b7;
  border-color: #d4a33d;
  box-shadow: inset 0 0 12px rgba(225, 166, 56, 0.2);
  opacity: 1;
}
.specialization-options b,
.specialization-options small { display: block; }
.specialization-options b { font-size: 11px; }
.specialization-options small { margin-top: 3px; font-size: 8px; color: #9d927b; }

.skill-point-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 8px;
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(210, 160, 62, 0.24);
  background: rgba(8, 8, 7, 0.52);
}

.skill-point-summary span {
  color: var(--gold-pale);
  font: 700 10px/1.2 Arial, "Microsoft YaHei", sans-serif;
}

.skill-point-summary strong {
  color: #f3c957;
  font: 800 18px/1 Georgia, serif;
}

.skill-point-summary small {
  grid-column: 1 / -1;
  color: var(--muted);
  font: 8px/1.3 Arial, "Microsoft YaHei", sans-serif;
}

.skill-point-node {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 8px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid rgba(201, 169, 98, 0.3);
  background: rgba(38, 27, 13, 0.66);
}

.skill-point-node > div {
  align-self: center;
}

.skill-point-node > div span,
.skill-point-node > div b {
  display: block;
}

.skill-point-node > div span {
  color: #d7cdb6;
  font: 9px/1.2 Arial, "Microsoft YaHei", sans-serif;
}

.skill-point-node > div b {
  margin-top: 3px;
  color: var(--gold-pale);
  font: 700 12px/1.2 Georgia, "Microsoft YaHei", serif;
}

.skill-point-node button {
  min-width: 66px;
  padding: 6px 8px;
  border: 1px solid #8e6d2f;
  color: #fff0b4;
  background: #2c1f0d;
  cursor: pointer;
  font: 700 9px/1.2 Arial, "Microsoft YaHei", sans-serif;
}

.skill-point-node button:disabled {
  cursor: default;
  opacity: 0.48;
}

.skill-point-node p {
  grid-column: 1 / -1;
  margin: 0;
}

.skill-point-node.is-learned {
  border-color: rgba(116, 165, 88, 0.62);
  background: rgba(39, 69, 32, 0.32);
}

.skill-point-node.is-secondary {
  position: relative;
  margin-left: 14px;
}

.skill-point-node.is-secondary::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 18px;
  width: 1px;
  height: 7px;
  background: rgba(201, 169, 98, 0.55);
}

.skill-point-node.is-secondary > strong {
  align-self: center;
  color: #aa9d82;
  font: 700 9px/1.25 Arial, "Microsoft YaHei", sans-serif;
}

.skill-point-node.is-secondary.is-learned > strong {
  color: #d9edbd;
}

.skill-point-node.is-utility {
  border-color: rgba(113, 157, 189, 0.38);
  background: rgba(22, 43, 54, 0.52);
}

.skill-point-node.is-utility.is-learned {
  border-color: rgba(139, 205, 224, 0.72);
  background: rgba(24, 62, 69, 0.48);
}

.skill-list li.is-skill-locked {
  border-style: dashed;
  opacity: 0.7;
}

.skill-list li.is-skill-locked .skill-gem {
  filter: grayscale(0.8);
}

.skill-list li.is-skill-locked .hotbar-source-button {
  cursor: not-allowed;
}

.specialization-panel p {
  margin: 8px 0 0;
  color: #b7aa8b;
  font: 9px/1.4 Arial, "Microsoft YaHei", sans-serif;
}

.cast-bar {
  position: fixed;
  z-index: 13;
  top: 92px;
  left: 50%;
  width: min(300px, calc(100vw - 32px));
  padding: 7px 9px 8px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.cast-bar strong {
  display: block;
  margin-bottom: 5px;
  color: #f7df83;
  font: 700 11px/1.2 Arial, "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px 2px #000;
}

.cast-meter {
  height: 7px;
  overflow: hidden;
  border: 1px solid #5b4724;
  background: #090806;
}

.cast-meter i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #6b3da9, #ecbf47);
  box-shadow: 0 0 8px rgba(225, 181, 67, 0.8);
  transition: width 80ms linear;
}

.skill-list li {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  min-height: 68px;
  padding: 8px;
  border: 1px solid rgba(201, 169, 98, 0.2);
  background: rgba(5, 5, 4, 0.36);
}

.hotbar-source-button {
  align-self: center;
  padding: 6px 7px;
  border: 1px solid #665638;
  background: #201a12;
  color: var(--gold-pale);
  cursor: pointer;
  font: 9px/1.2 Arial, "Microsoft YaHei", sans-serif;
}

.skill-list li[draggable="true"],
.item-list li.is-hotbar-source {
  cursor: grab;
}

.skill-list li.is-hotbar-selected,
.item-list li.is-hotbar-selected {
  border-color: #d6a83f;
  background: rgba(115, 78, 18, 0.32);
}

.hotbar-copy {
  margin: 3px 0 7px;
  font-size: 9px;
}

.skill-list b,
.skill-list p,
.skill-list small {
  display: block;
}

.skill-list b { color: var(--gold-pale); font-size: 13px; }
.skill-list p { margin: 4px 0; color: #d7cdb6; font: 11px/1.35 Arial, "Microsoft YaHei", sans-serif; }
.skill-list small { color: var(--muted); font: 9px/1.3 Arial, sans-serif; }

.skill-gem {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid #76613d;
  color: #fff1c1;
  background:
    radial-gradient(circle at 38% 32%, #f7b357 0 8%, #a83a18 24%, #321208 64%),
    #1a100a;
  box-shadow: inset 0 0 0 3px #17120c;
  font: 800 11px Arial, sans-serif;
}

.skill-gem.has-skill-icon {
  background-color: #0b0907;
  background-image: url("./assets/skill-icons-v1.png");
  background-position: var(--skill-icon-x) var(--skill-icon-y);
  background-size: 400% 400%;
}

.playtest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0;
}

.playtest-grid div {
  padding: 8px;
  border: 1px solid rgba(201, 169, 98, 0.18);
  background: rgba(5, 5, 4, 0.38);
}

.playtest-grid dt {
  color: var(--muted);
  font-size: 9px;
}

.playtest-grid dd {
  margin: 4px 0 0;
  color: var(--gold-pale);
  font: 700 15px/1 Arial, sans-serif;
}

.playtest-summary-label {
  color: var(--muted);
  font-size: 10px;
}

.playtest-feedback-callout {
  margin: 8px 0 5px;
  padding: 7px 8px;
  border-left: 2px solid var(--gold);
  color: var(--gold-pale);
  background: rgba(109, 76, 22, 0.24);
  font: 700 10px/1.4 Arial, "Microsoft YaHei", sans-serif;
}

.playtest-feedback {
  display: grid;
  gap: 2px;
  margin: 5px 0 8px;
  padding: 7px 9px;
  border-color: rgba(201, 169, 98, 0.24);
  background: rgba(5, 5, 4, 0.3);
}

.playtest-feedback legend {
  color: var(--gold);
  font: 700 9px/1.3 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: 0.04em;
}

.playtest-feedback label {
  margin: 4px 0;
}

.playtest-feedback input,
.playtest-feedback select,
.playtest-feedback textarea {
  min-height: 34px;
  font: 11px/1.35 Arial, "Microsoft YaHei", sans-serif;
}

#playtestSummary {
  min-height: 122px;
  resize: vertical;
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.playtest-privacy {
  margin: 8px 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.playtest-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 7px;
}

.playtest-actions .action-button {
  min-height: 38px;
  font-size: 11px;
}

.playtest-actions .action-button:disabled {
  cursor: wait;
  filter: grayscale(0.7);
  opacity: 0.65;
}

.playtest-metrics-details {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(201, 169, 98, 0.2);
}

.playtest-metrics-details summary {
  cursor: pointer;
  color: var(--gold-pale);
  font: 700 10px/1.4 Arial, "Microsoft YaHei", sans-serif;
}

.playtest-metrics-details[open] summary {
  margin-bottom: 8px;
}

#copyPlaytestButton {
  border-color: #8c7447;
  background: linear-gradient(#594725, #2b2112);
}

.item-list li,
.shop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border-bottom: 1px solid rgba(201, 169, 98, 0.15);
  font-size: 12px;
}

.item-list li span,
.shop-row div { flex: 1; }
.item-list b { color: var(--gold); }
.item-list button,
.shop-row button { padding: 5px 8px; }
.shop-row small { display: block; color: var(--muted); margin-top: 3px; }

.warehouse-panel {
  top: 146px;
  width: min(620px, calc(100% - 24px));
  max-height: calc(100% - 214px);
}

.warehouse-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid rgba(201, 169, 98, 0.24);
  background: rgba(62, 47, 22, 0.28);
  color: var(--muted);
  font-size: 11px;
}

.warehouse-summary b { color: var(--gold-pale); }

.warehouse-gold-controls {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.warehouse-gold-controls label {
  display: block;
  margin: 0;
}

.warehouse-gold-controls input {
  min-width: 0;
  min-height: 32px;
}

.warehouse-gold-controls button,
.warehouse-row-actions button {
  min-height: 32px;
  border: 1px solid #665638;
  background: #201a12;
  color: var(--gold-pale);
  cursor: pointer;
}

.warehouse-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.warehouse-columns > section {
  min-width: 0;
  border: 1px solid rgba(102, 86, 56, 0.64);
  background: rgba(11, 9, 7, 0.48);
}

.warehouse-columns h3 {
  position: sticky;
  z-index: 1;
  top: 46px;
  margin: 0;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(102, 86, 56, 0.64);
  background: #17120c;
  color: var(--gold-pale);
  font-size: 11px;
}

.warehouse-item-list {
  min-height: 86px;
  max-height: 250px;
  margin: 0;
  padding: 0 8px;
  overflow: auto;
  list-style: none;
  scrollbar-color: #6d5529 #17130d;
  scrollbar-width: thin;
}

.warehouse-item-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  border-bottom: 1px solid rgba(201, 169, 98, 0.13);
}

.warehouse-item-list li > span:first-child,
.warehouse-item-list strong,
.warehouse-item-list small {
  display: block;
  min-width: 0;
}

.warehouse-item-list strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-item-list small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.warehouse-row-actions {
  display: flex;
  gap: 3px;
}

.warehouse-row-actions button {
  min-width: 42px;
  padding: 3px 5px;
  font-size: 9px;
}

.warehouse-row-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.warehouse-item-list .warehouse-empty {
  display: block;
  padding: 18px 4px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.trade-panel {
  position: absolute;
  z-index: 22;
  top: 50%;
  left: 50%;
  width: min(820px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 14px;
  overflow: auto;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(135deg, rgba(223, 186, 91, 0.06), transparent 38%),
    rgba(12, 10, 7, 0.97);
  box-shadow: 0 14px 46px rgba(0, 0, 0, 0.72);
}

.trade-panel > header,
.trade-actions,
.trade-gold-control,
.trade-request-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trade-panel > header {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.trade-panel h2,
.trade-panel h3 { margin: 0; color: var(--gold-pale); }
.trade-panel h2 { font-size: 19px; }
.trade-panel h3 { font-size: 11px; }
.trade-panel > header > span { color: var(--muted); font-size: 10px; }

.trade-status {
  min-height: 18px;
  margin: 9px 0;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.5;
}

.trade-request-actions {
  justify-content: center;
  min-height: 94px;
}

.trade-request-actions button,
.trade-actions button,
.trade-gold-control button,
.trade-inventory-list button,
.trade-offer-list button {
  min-height: 34px;
  border: 1px solid #665638;
  background: #201a12;
  color: var(--gold-pale);
  cursor: pointer;
}

.trade-request-actions button { min-width: 118px; }
.trade-request-actions #tradeAccept,
.trade-actions #tradeConfirm:not(:disabled) {
  border-color: #a98a45;
  background: #3b2b13;
}

.trade-offer-area {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr);
  gap: 10px;
}

.trade-own-controls,
.trade-offer-columns > section {
  min-width: 0;
  border: 1px solid rgba(102, 86, 56, 0.64);
  background: rgba(11, 9, 7, 0.48);
}

.trade-own-controls > h3,
.trade-offer-columns h3 {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(102, 86, 56, 0.64);
  background: #17120c;
}

.trade-gold-control {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 8px;
}

.trade-gold-control label { grid-column: 1 / -1; font-size: 10px; }
.trade-gold-control input { min-width: 0; min-height: 34px; }
.trade-gold-control button { padding: 4px 8px; }

.trade-inventory-list,
.trade-offer-list {
  min-height: 72px;
  max-height: 210px;
  margin: 0;
  padding: 0 8px;
  overflow: auto;
  list-style: none;
  scrollbar-color: #6d5529 #17130d;
  scrollbar-width: thin;
}

.trade-inventory-list li,
.trade-offer-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 43px;
  border-bottom: 1px solid rgba(201, 169, 98, 0.13);
}

.trade-inventory-list strong,
.trade-inventory-list small,
.trade-offer-list strong,
.trade-offer-list small { display: block; min-width: 0; }
.trade-inventory-list strong,
.trade-offer-list strong { color: var(--ink); font-size: 10px; }
.trade-inventory-list small,
.trade-offer-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.trade-inventory-list button,
.trade-offer-list button { min-width: 54px; padding: 3px 5px; font-size: 9px; }

.trade-offer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.trade-offer-columns h3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.trade-offer-columns h3 span { color: var(--muted); font-size: 9px; }
.trade-offer-columns h3 span.is-locked { color: #7fd48c; }
.trade-offer-columns section > p { margin: 7px 8px; color: var(--gold); font-size: 10px; }

.trade-warning {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.trade-actions {
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.trade-actions button { min-width: 96px; padding: 5px 9px; }
.trade-actions button:disabled,
.trade-inventory-list button:disabled,
.trade-offer-list button:disabled { cursor: not-allowed; opacity: 0.42; }
.trade-empty { display: block !important; padding: 16px 4px; color: var(--muted); text-align: center; }

.item-copy strong,
.item-copy small {
  display: block;
}

.item-copy small {
  margin-top: 3px;
  color: #a99d84;
  font-size: 9px;
  line-height: 1.35;
}

.item-list li.is-equipment-locked {
  opacity: 0.72;
}

.item-list li.is-starter-equipment {
  margin: 5px 0;
  padding: 7px 6px;
  border: 1px solid rgba(222, 177, 72, 0.72);
  background: rgba(93, 59, 14, 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(255, 229, 155, 0.09),
    0 0 12px rgba(207, 151, 37, 0.18);
  cursor: pointer;
}

.item-list li.is-starter-equipment .starter-item-cue {
  color: #f1d482;
  font-weight: 700;
}

.item-list li.is-starter-equipment [data-equip-item] {
  min-width: 68px;
  min-height: 42px;
  border-color: #d9a932;
  background: #5b3a11;
  color: #fff1b5;
  font-weight: 700;
}

.item-list .accessory-inventory-row {
  flex-wrap: wrap;
  padding: 6px 0;
}

.item-list .accessory-thumb {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #78572f;
  border-radius: 4px;
  background-color: #090e12;
  background-image: url("./assets/accessory-sprite.png");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  box-shadow: inset 0 0 0 1px rgba(255, 230, 176, 0.15);
}

.accessory-0 { background-position: 0% 0%; }
.accessory-1 { background-position: 33.333% 0%; }
.accessory-2 { background-position: 66.666% 0%; }
.accessory-3 { background-position: 100% 0%; }
.accessory-4 { background-position: 0% 100%; }
.accessory-5 { background-position: 33.333% 100%; }
.accessory-6 { background-position: 66.666% 100%; }
.accessory-7 { background-position: 100% 100%; }

.item-list .accessory-equip-actions {
  display: flex;
  flex: 1 0 100%;
  gap: 5px;
  padding-left: 46px;
}

.accessory-equip-actions button {
  flex: 1;
  min-width: 0;
}

#forgePanel select:disabled,
#forgePanel input:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.item-list button:disabled {
  min-width: 66px;
  cursor: not-allowed;
  color: #857c6b;
  border-color: #3d372d;
  background: #15130f;
}

.check-row {
  display: flex !important;
  align-items: center;
}

.check-row input { min-height: auto; }

.chat-panel {
  bottom: 78px;
  left: 12px;
  width: min(390px, calc(100% - 24px));
  padding: 6px;
}

.chat-panel ol {
  height: 84px;
  overflow: auto;
  font: 12px/1.45 Arial, "Microsoft YaHei", sans-serif;
}

.chat-panel li {
  display: flex;
  gap: 7px;
  padding: 2px 0;
}

.chat-panel li b { color: var(--gold-pale); white-space: nowrap; }
.chat-panel li span { color: #ddd4c1; overflow-wrap: anywhere; }

.chat-panel form {
  display: grid;
  grid-template-columns: 72px 1fr 52px;
  gap: 5px;
  margin-top: 6px;
}

.chat-panel input,
.chat-panel select,
.chat-panel button {
  min-height: 30px;
  height: 30px;
  padding: 0 7px;
  font: 11px Arial, sans-serif;
}

.chat-panel button {
  border: 1px solid #665638;
  background: #2a2115;
  cursor: pointer;
}

.skill-bar {
  bottom: 12px;
  left: 50%;
  display: grid;
  gap: 4px;
  padding: 6px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  background: var(--panel-deep);
}

.hotbar-page-tabs,
.hotbar-slots {
  display: grid;
  grid-template-columns: repeat(8, 54px);
  gap: 3px;
}

.hotbar-page-tabs button {
  min-width: 0;
  height: 17px;
  padding: 0;
  border: 1px solid #393226;
  background: #0d0b08;
  color: #766b56;
  font: 700 9px/1 Arial, sans-serif;
  cursor: pointer;
}

.hotbar-page-tabs button:hover,
.hotbar-page-tabs button:focus-visible {
  border-color: #8f7646;
  color: #f0dda8;
}

.hotbar-page-tabs button.is-active {
  border-color: #c5a14f;
  background: #3b2d16;
  color: #ffe69a;
  box-shadow: inset 0 0 7px rgba(227, 181, 71, 0.22);
}

.hotbar-discard {
  position: fixed;
  z-index: 14;
  bottom: 101px;
  left: 50%;
  width: 330px;
  padding: 6px 9px;
  transform: translateX(-50%) translateY(8px);
  border: 1px solid rgba(146, 67, 45, 0.75);
  background: rgba(35, 13, 9, 0.94);
  color: #e7b1a0;
  text-align: center;
  font: 10px/1.2 Arial, "Microsoft YaHei", sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms linear, transform 100ms linear;
}

.is-hotbar-configuring .hotbar-discard,
.is-hotbar-dragging .hotbar-discard {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.hotbar-discard.is-drag-over {
  border-color: #f1c454;
  color: #fff0ae;
  background: rgba(87, 35, 13, 0.96);
}

.skill-slot {
  --cooldown: 0%;
  position: relative;
  overflow: hidden;
  height: 52px;
  border: 1px solid #5c4d32;
  background:
    radial-gradient(circle at 50% 35%, rgba(184, 76, 30, 0.58), transparent 48%),
    #19140e;
  cursor: pointer;
}

.skill-slot::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 2px;
  background-color: #0b0907;
  background-position: var(--skill-icon-x) var(--skill-icon-y);
  background-size: 400% 400%;
  opacity: 0;
}

.skill-slot.has-skill-icon::before {
  background-image: url("./assets/skill-icons-v1.png");
  opacity: 1;
}

.skill-slot.is-level-locked::before {
  filter: grayscale(0.85) brightness(0.52);
}

.skill-slot.is-empty {
  background: #0f0d09;
  border-color: #393226;
  color: #726957;
}

.skill-slot.is-drop-target {
  border-color: #edc45d;
  box-shadow: inset 0 0 12px rgba(225, 177, 57, 0.28);
}

.skill-slot.is-selected-target {
  border-color: #edc45d;
  box-shadow: 0 0 10px rgba(225, 177, 57, 0.35);
}

.skill-slot:disabled { opacity: 0.4; cursor: default; }
.skill-slot i {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--cooldown);
  background: rgba(3, 4, 5, 0.76);
  transition: height 80ms linear;
}
.skill-slot::after {
  content: attr(data-cooldown);
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  color: #fff3d2;
  font: 700 13px/1 Arial, sans-serif;
  text-shadow: 0 1px 3px #000;
}
.skill-slot.is-cooling { border-color: #3d372d; }
.is-auto-attacking .skill-bar {
  border-color: rgba(214, 99, 48, 0.72);
  box-shadow: 0 0 16px rgba(184, 50, 24, 0.2);
}
.skill-slot kbd { position: absolute; z-index: 2; top: 3px; left: 5px; }
.skill-slot b { position: absolute; z-index: 2; right: 2px; bottom: 2px; left: 2px; overflow: hidden; padding: 8px 1px 1px; color: #fff3d2; background: linear-gradient(transparent, rgba(0, 0, 0, 0.82)); font: 9px/1.2 Arial, sans-serif; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; white-space: nowrap; }

.connection-status {
  bottom: 12px;
  right: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(190, 76, 55, 0.5);
  background: rgba(40, 10, 8, 0.84);
  color: #e59b87;
  font: 10px Arial, sans-serif;
}

.connection-status.is-online {
  border-color: rgba(109, 151, 69, 0.55);
  background: rgba(17, 39, 12, 0.84);
  color: #b9d891;
}

#soundButton[aria-pressed="true"] {
  border-color: #8aa54e;
  color: #d9efad;
  box-shadow: inset 0 0 10px rgba(117, 151, 62, 0.18);
}

.controls-hint {
  bottom: 104px;
  left: 50%;
  display: grid;
  gap: 3px;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  text-align: center;
  color: rgba(238, 226, 197, 0.78);
  font: 10px Arial, sans-serif;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

#controlStatus {
  color: var(--gold-pale);
  font: 700 11px Georgia, "Microsoft YaHei", serif;
  letter-spacing: 0.04em;
}

#controlModeButton[aria-pressed="true"] {
  border-color: #9f7732;
  color: var(--gold-pale);
  box-shadow: inset 0 0 10px rgba(176, 126, 45, 0.18);
}

#stanceButton[aria-pressed="true"] {
  border-color: rgba(116, 165, 88, 0.82);
  color: #d4eda5;
  box-shadow: inset 0 0 10px rgba(72, 118, 57, 0.24);
}

#stanceButton:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

body.is-sitting .player-hud {
  border-color: rgba(116, 165, 88, 0.72);
  box-shadow: inset 0 0 18px rgba(72, 118, 57, 0.16);
}

.toast {
  top: 104px;
  left: 50%;
  max-width: 420px;
  padding: 10px 18px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  background: rgba(16, 13, 9, 0.94);
  color: var(--gold-pale);
}

.toast[data-kind="error"] { border-color: #9e4937; color: #f0b19e; }
.toast[data-kind="success"] { border-color: #7a9c4e; color: #d5edaa; }
.toast[data-kind="combat"] {
  border-color: #d07534;
  background: rgba(42, 17, 8, 0.94);
  color: #ffd182;
}
.toast[data-kind="critical"] {
  border-color: #b75cff;
  background: rgba(35, 10, 48, 0.95);
  color: #f2c2ff;
}

.respawn-button {
  top: 55%;
  left: 50%;
  padding: 13px 28px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--gold);
  background: #4a210f;
  color: var(--gold-pale);
  cursor: pointer;
}

body.is-dead .respawn-button {
  z-index: 30;
  min-width: 154px;
  min-height: 50px;
  box-shadow: 0 0 0 2px rgba(10, 8, 5, 0.82), 0 0 24px rgba(214, 138, 54, 0.42);
}

.world-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.world-label {
  position: absolute;
  display: grid;
  justify-items: center;
  min-width: 92px;
  gap: 2px;
  text-align: center;
  font: 700 10px Arial, "Microsoft YaHei", sans-serif;
  color: #f0e5ce;
  text-shadow: 0 1px 2px #000;
}

.world-label[hidden] {
  display: none;
}

.world-labels.are-names-hidden .world-name,
.world-labels.are-names-hidden .npc-label {
  visibility: hidden;
}

.world-label i {
  position: relative;
  display: block;
  width: 72px;
  height: 4px;
  border: 1px solid #080808;
  background: #21100d;
}

.world-label i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--health);
  background: #b8422f;
}

.world-label.is-selected .world-name { color: #ffd978; }
.world-label.is-hidden-status {
  opacity: .62;
}
.world-label.is-hidden-status .world-name {
  color: #b8d9e8;
  text-shadow: 0 1px 2px #000, 0 0 9px rgba(104, 190, 222, .85);
}
.world-label.is-detected {
  opacity: .9;
}
.world-label.is-detected .world-name {
  color: #72efff;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(44, 221, 240, .95);
}
.world-label.is-slowed .world-name {
  color: #8edcff;
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(54, 164, 235, 0.8);
}
.world-label.is-regenerating .world-name {
  color: #9ff39f;
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(72, 205, 93, 0.82);
}
.world-label.is-armored .world-name {
  color: #ffe28a;
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(229, 177, 48, 0.85);
}
.world-label.is-armor-broken .world-name {
  color: #e4a9ff;
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(163, 66, 217, 0.88);
}
.world-label.is-boss .world-name {
  color: #ffb45f;
  font-weight: 700;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(220, 68, 32, 0.75);
}
.world-label.is-casting .world-name {
  display: inline-block;
  color: #fff08a;
  text-shadow: 0 1px 2px #000, 0 0 9px rgba(255, 74, 20, 0.95);
  animation: boss-cast-warning 0.36s steps(2, end) infinite;
}
.world-equipment {
  display: flex;
  align-items: center;
  max-width: 150px;
  gap: 3px;
  padding: 1px 4px 1px 2px;
  border: 1px solid rgba(159, 121, 54, .55);
  background: rgba(9, 8, 7, .82);
  color: #cbbd9e;
  font: 700 8px/1 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
}
.world-equipment[hidden] {
  display: none;
}
.world-equipment em {
  overflow: hidden;
  max-width: 124px;
  text-overflow: ellipsis;
  font-style: normal;
}
.equipment-badge {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(222, 179, 85, .72);
  background-image: url("/knight/assets/item-sprite.png");
  background-repeat: no-repeat;
  background-size: 400% 200%;
}
.equipment-badge[hidden] {
  display: none;
}
.equipment-band-tempered {
  color: #f0a55b;
  border-color: rgba(220, 116, 44, .72);
}
.equipment-band-azure {
  color: #8bd5ff;
  border-color: rgba(53, 164, 232, .76);
  box-shadow: 0 0 5px rgba(49, 156, 232, .38);
}
.equipment-band-violet {
  color: #d7a0ff;
  border-color: rgba(165, 78, 228, .82);
  box-shadow: 0 0 6px rgba(142, 54, 221, .5);
}
.equipment-band-gold {
  color: #ffe184;
  border-color: rgba(244, 191, 59, .9);
  box-shadow: 0 0 7px rgba(241, 177, 39, .58);
}
.equipment-band-crimson {
  color: #ff9b82;
  border-color: rgba(244, 74, 47, .92);
  box-shadow: 0 0 8px rgba(237, 54, 38, .68);
}
@keyframes boss-cast-warning {
  50% { transform: scale(1.06); }
}
.world-label.npc-label {
  min-width: 110px;
  color: #f2d77e;
  letter-spacing: 0.02em;
}

.npc-quest-marker {
  display: block;
  margin-bottom: 2px;
  color: #f5e07e;
  font: 900 24px/1 Georgia, serif;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(232, 190, 72, 0.72);
}

.npc-quest-marker.is-active {
  color: #9de06c;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(89, 186, 67, 0.8);
}

.npc-quest-marker.is-ready {
  color: #ffd65b;
  animation: quest-marker-pulse 0.8s ease-in-out infinite alternate;
}

.npc-quest-marker.is-complete {
  color: #b5c0a0;
  font-size: 18px;
}

@keyframes quest-marker-pulse {
  to { transform: translateY(-3px) scale(1.08); }
}

.quest-dialog {
  z-index: 7;
  bottom: 86px;
  left: 50%;
  width: min(520px, calc(100% - 32px));
  padding: 14px;
  transform: translateX(-50%);
  border-color: rgba(198, 153, 57, 0.72);
  background:
    linear-gradient(90deg, rgba(95, 55, 17, 0.3), transparent 45%),
    rgba(14, 12, 9, 0.96);
}

.quest-dialog header,
.quest-dialog-actions,
.quest-dialog-body {
  display: flex;
  align-items: center;
}

.quest-dialog header {
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(147, 112, 50, 0.46);
}

.quest-dialog h2 {
  margin: 2px 0 0;
  color: var(--gold-pale);
  font-size: 17px;
}

.quest-dialog header button {
  width: 30px;
  height: 30px;
  border: 1px solid #665638;
  background: #201a12;
  color: var(--gold-pale);
  cursor: pointer;
}

.quest-dialog-body {
  gap: 12px;
  padding: 12px 2px 9px;
}

.quest-dialog-marker {
  display: grid;
  width: 38px;
  height: 44px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid #9c742d;
  color: #ffe189;
  background: #3b220d;
  font: 900 24px/1 Georgia, serif;
  clip-path: polygon(50% 0, 100% 18%, 91% 78%, 50% 100%, 9% 78%, 0 18%);
}

.quest-dialog-body strong {
  color: #f4dfaa;
  font-size: 14px;
}

.quest-dialog-body p {
  margin: 4px 0 0;
  color: #c7b995;
  font-size: 11px;
  line-height: 1.55;
}

.quest-dialog dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.quest-dialog dl div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.025);
}

.quest-dialog dt {
  color: var(--gold);
  font: 700 10px/1.5 Arial, sans-serif;
}

.quest-dialog dd {
  margin: 0;
  color: #d9cfb5;
  font-size: 11px;
  line-height: 1.5;
}

.quest-dialog-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 11px;
}

.quest-dialog-actions button {
  min-width: 96px;
  min-height: 32px;
  border: 1px solid #75613c;
  background: #241b10;
  color: #d9cfb5;
  cursor: pointer;
}

.quest-dialog-actions #homelandQuestAction {
  border-color: #af8131;
  color: #fff0bd;
  background: #4a2b0e;
}

.quest-dialog-actions button:disabled {
  opacity: 0.46;
  cursor: default;
}

.world-label.portal-label {
  min-width: 150px;
  color: #d9b8ff;
  font-size: 11px;
  text-shadow: 0 1px 2px #000, 0 0 9px rgba(139, 72, 237, 0.9);
}

.world-label.loot-label {
  min-width: 132px;
  padding: 3px 7px;
  border: 1px solid rgba(222, 171, 54, 0.72);
  background: rgba(18, 12, 5, 0.82);
  color: #ffe08a;
  font-size: 11px;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(234, 164, 30, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 158, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .world-label.loot-label {
    transition: none;
  }
}

.combat-float {
  position: absolute;
  z-index: 3;
  min-width: 52px;
  text-align: center;
  font: 900 21px/1 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: -1px;
  text-shadow:
    -1px -1px 0 #1b0803,
    1px -1px 0 #1b0803,
    -1px 1px 0 #1b0803,
    1px 1px 0 #1b0803,
    0 3px 6px rgba(0, 0, 0, 0.8);
  will-change: transform, opacity;
}

.combat-float.is-damage { color: #ffb34d; }
.combat-float.is-healing { color: #8ff28b; }
.combat-float.is-status {
  min-width: 96px;
  color: #d9f7c6;
  font-size: 17px;
  letter-spacing: 0;
}
.combat-float.is-armored { color: #ffe082; }
.combat-float.is-armor-broken { color: #e6a9ff; }
.combat-float.is-backstab {
  min-width: 90px;
  color: #efadff;
  font-size: 24px;
  letter-spacing: 0;
  text-shadow:
    -1px -1px 0 #26052f,
    1px -1px 0 #26052f,
    -1px 1px 0 #26052f,
    1px 1px 0 #26052f,
    0 0 9px rgba(194, 72, 255, 0.9);
}
.combat-float.is-piercing {
  min-width: 90px;
  color: #fff0a4;
  font-size: 24px;
  letter-spacing: 0;
  text-shadow:
    -1px -1px 0 #301303,
    1px -1px 0 #301303,
    -1px 1px 0 #301303,
    1px 1px 0 #301303,
    0 0 9px rgba(255, 139, 35, 0.9);
}
.combat-float.is-lethal {
  min-width: 112px;
  color: #fff3c4;
  font-size: 26px;
  letter-spacing: .02em;
  text-shadow:
    -1px -1px 0 #3a0702,
    1px -1px 0 #3a0702,
    -1px 1px 0 #3a0702,
    1px 1px 0 #3a0702,
    0 0 5px #ff521f,
    0 0 14px rgba(255, 106, 28, 0.95);
}

@media (max-width: 900px) {
  .mission-panel,
  .controls-hint { display: none; }
  .local-minimap {
    top: 8px;
    right: 8px;
    width: 116px;
    height: 116px;
  }
  .minimap-map-name { top: 13px; max-width: 66px; font-size: 8px; }
  .minimap-coordinates { bottom: 8px; }
  .local-minimap > kbd { right: 11px; bottom: 13px; }
  .tutorial-coach {
    top: 116px;
    bottom: auto;
    width: min(390px, calc(100% - 16px));
  }
  .player-hud { width: 270px; }
  .party-panel { top: 138px; width: 220px; }
  .top-actions { top: auto; right: 8px; bottom: 82px; }
  .top-actions button { font-size: 0; width: 36px; }
  .top-actions kbd { font-size: 11px; }
  .side-panel { top: 90px; right: 8px; bottom: 150px; max-height: none; }
  .map-panel { width: min(640px, calc(100% - 16px)); }
  .hotbar-page-tabs,
  .hotbar-slots { grid-template-columns: repeat(8, 46px); }
  .skill-bar { bottom: 12px; }
  .skill-slot { height: 48px; }
  .chat-panel { bottom: 68px; width: min(360px, calc(100% - 16px)); left: 8px; }
  .chat-panel ol { height: 74px; }
  .connection-status { display: none; }
}

@media (max-width: 620px) {
  .auth-panel,
  .auth-panel.is-character-select {
    top: 8px;
    width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    padding: 18px;
    transform: translateX(-50%);
  }
  .character-select-heading {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }
  .character-select-heading > p { text-align: left; }
  .auth-panel.is-character-select > .eyebrow { display: none; }
  .auth-panel.is-character-select > h1 {
    margin-top: 0;
    font-size: 26px;
  }
  .character-slot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-slot { min-height: 108px; padding: 10px; }
  .character-slot .character-slot-portrait { top: 1px; right: 1px; width: 51px; height: 102px; }
  .character-slot strong { font-size: 15px; }
  .character-slot .character-slot-progress { margin-top: 5px; padding-top: 5px; line-height: 1.35; }
  .character-slot.is-empty strong { font-size: 13px; }
  .side-panel { z-index: 7; }
  .warehouse-panel { width: auto; }
  .warehouse-gold-controls {
    grid-template-columns: 1fr 1fr;
  }
  .warehouse-gold-controls label,
  .warehouse-gold-controls input {
    grid-column: 1 / -1;
  }
  .warehouse-columns {
    grid-template-columns: 1fr;
  }
  .warehouse-item-list {
    min-height: 54px;
    max-height: 150px;
  }
  .warehouse-gold-controls button,
  .warehouse-row-actions button {
    min-width: 48px;
    min-height: 42px;
  }
  .trade-panel {
    top: 8px;
    right: 8px;
    bottom: auto;
    left: 8px;
    width: auto;
    max-height: calc(100% - 80px);
    padding: 10px;
    transform: none;
  }
  .trade-offer-area { grid-template-columns: 1fr; }
  .trade-offer-columns { grid-template-columns: 1fr 1fr; }
  .trade-warning { grid-column: 1; }
  .trade-inventory-list { max-height: 110px; }
  .trade-offer-list { max-height: 120px; }
  .trade-request-actions button,
  .trade-actions button,
  .trade-gold-control button,
  .trade-inventory-list button,
  .trade-offer-list button { min-height: 42px; }
  .trade-actions {
    position: sticky;
    bottom: -10px;
    padding: 8px 0 2px;
    background: rgba(12, 10, 7, 0.98);
  }
  .trade-actions button { min-width: 0; flex: 1; }
  .map-panel { z-index: 9; }
  .player-hud { top: 8px; left: 8px; width: 216px; min-height: 62px; }
  .local-minimap {
    width: 80px;
    height: 80px;
    padding: 3px;
  }
  .minimap-north { top: 3px; font-size: 7px; }
  .minimap-map-name { top: 9px; max-width: 42px; font-size: 7px; }
  .minimap-coordinates { bottom: 5px; font-size: 6px; }
  .local-minimap > kbd { right: 6px; bottom: 9px; padding: 1px 2px; font-size: 6px; }
  .portrait { width: 42px; flex-basis: 42px; }
  .target-hud { top: 76px; width: 220px; }
  .status-chip {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .status-chip b { font-size: 14px; }
  .status-chip small { font-size: 7px; }
  .zone-status { top: 166px; }
  .tutorial-coach {
    top: 210px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 52px;
    padding: 6px 8px;
  }
  .quest-compass {
    top: 210px;
    bottom: auto;
    width: calc(100% - 16px);
    min-height: 48px;
    padding: 6px 8px;
  }
  .quest-compass em { min-width: 68px; font-size: 9px; }
  .coach-sigil { width: 26px; height: 32px; }
  .coach-copy p { white-space: normal; }
  .party-panel { display: none; }
  .party-panel.is-mobile-open {
    display: block;
    z-index: 9;
    top: 82px;
    right: 8px;
    bottom: 112px;
    left: 8px;
    width: auto;
    max-height: none;
    overflow: auto;
  }
  .party-panel.is-mobile-open .party-mobile-close { display: block; }
  .party-panel.is-mobile-open .same-map-roster { max-height: none; }
  .party-panel.is-mobile-open .party-mobile-close {
    min-width: 42px;
    min-height: 42px;
    font-size: 18px;
  }
  .party-panel.is-mobile-open .same-map-roster-select,
  .party-panel.is-mobile-open .same-map-roster-invite {
    min-height: 42px;
  }
  .skill-bar {
    width: calc(100% - 8px);
    gap: 2px;
    bottom: 4px;
    padding: 3px;
  }
  .hotbar-page-tabs,
  .hotbar-slots {
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
  }
  .hotbar-page-tabs button { height: 14px; font-size: 8px; }
  .skill-slot { min-width: 0; height: 43px; padding: 0; }
  .skill-slot b { font-size: 0; }
  .skill-slot b::first-letter { font-size: 9px; }
  .chat-panel { bottom: 172px; }
  .chat-panel ol { height: 58px; }
  .top-actions {
    display: flex;
    z-index: 8;
    top: 8px;
    right: 8px;
    bottom: auto;
    flex-direction: column;
  }
  .top-actions button { display: none; }
  .top-actions #mapButton,
  .top-actions #playtestButton {
    display: block;
    width: 38px;
    font-size: 0;
  }
  .top-actions.is-mobile-open {
    top: 76px;
    width: 208px;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid var(--line);
    background: rgba(13, 11, 8, 0.97);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.52);
  }
  .top-actions.is-mobile-open button,
  .top-actions.is-mobile-open #mapButton,
  .top-actions.is-mobile-open #playtestButton,
  .top-actions.is-mobile-open #partyMobileButton {
    display: block;
    width: auto;
    min-height: 42px;
    font-size: 11px;
  }
  .touch-controls {
    right: 0;
    bottom: 76px;
    left: 0;
    z-index: 6;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
  }
  .touch-dpad,
  .touch-action-pad {
    display: grid;
    gap: 3px;
    pointer-events: auto;
  }
  .touch-dpad {
    grid-template-columns: repeat(3, 42px);
    grid-template-rows: repeat(2, 42px);
  }
  .touch-action-pad {
    grid-template-columns: repeat(2, 48px);
    grid-template-rows: repeat(2, 42px);
  }
  .touch-controls button {
    min-width: 42px;
    min-height: 42px;
    padding: 2px;
    border: 1px solid rgba(217, 174, 75, 0.74);
    border-radius: 3px;
    color: var(--gold-pale);
    background: rgba(19, 15, 10, 0.86);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.62);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .touch-controls button b,
  .touch-controls button span {
    display: block;
    pointer-events: none;
  }
  .touch-controls button b { font: 700 15px Arial, sans-serif; }
  .touch-controls button span { margin-top: 1px; font-size: 8px; }
  .touch-controls button.is-held,
  .touch-controls button:active,
  .touch-controls button[aria-pressed="true"],
  #mobileMenuButton[aria-expanded="true"] {
    border-color: #f6d77d;
    color: #fff3ba;
    background: rgba(105, 65, 16, 0.94);
    transform: translateY(1px);
  }
  .touch-dpad [data-touch-move="KeyW"] { grid-column: 2; grid-row: 1; }
  .touch-dpad [data-touch-move="KeyA"] { grid-column: 1; grid-row: 2; }
  .touch-dpad [data-touch-move="KeyS"] { grid-column: 2; grid-row: 2; }
  .touch-dpad [data-touch-move="KeyD"] { grid-column: 3; grid-row: 2; }
  .side-panel { top: 82px; right: 8px; left: 8px; width: auto; bottom: 112px; }
  #playtestPanel { bottom: 96px; }
  .map-panel {
    top: 8px;
    right: 8px;
    bottom: 56px;
    left: 8px;
    width: auto;
    max-height: none;
    padding: 10px;
    transform: none;
  }
  .map-panel .panel-copy { margin: 6px 0; line-height: 1.4; }
  .world-map { aspect-ratio: 4 / 3; }
  .map-landmark span { max-width: 74px; font-size: 8px; }
  .map-details { grid-template-columns: 1fr; gap: 6px; }
  .map-readout { align-items: flex-start; flex-direction: column; gap: 2px; }
  .quest-dialog {
    bottom: 56px;
    width: calc(100% - 16px);
    padding: 10px;
  }
  .quest-dialog dl div { grid-template-columns: 36px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}