:root {
  /* Scarforged — Diablo 1 grimdark blood & ash */
  --bg: #060304;
  --panel: rgba(12, 6, 8, 0.94);
  --panel-scar: rgba(10, 4, 6, 0.88);
  --border: #4a2020;
  --border-lit: #6a2828;
  --text: #f0e6dc;
  --muted: #b5a094;
  /* Dense stats / rows — higher contrast than titles */
  --text-label: #d4c4b4;
  --text-value: #fff6ec;
  --accent: #a81818;
  --accent2: #c43a2a;
  --blood: #6b0f12;
  --ash: #2a2220;
  --good: #5a8a4a;
  --bad: #ff4040;
  --gold: #c9a24a;
  /* Body: Lora (readable classical serif). Titles: Cinzel Decorative. Labels: Cinzel. */
  --font: "Lora", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-ui: "Cinzel", "Lora", "Palatino Linotype", Georgia, serif;
  --font-display: "Cinzel Decorative", "Cinzel", "Lora", "Palatino Linotype", serif;
  /* UI chrome — thin iron 9-slice frames + plate buttons (?v= busts cache) */
  --ui-panel: url("/assets/ui/panel-frame.png?v=4");
  --ui-panel-glow: url("/assets/ui/panel-frame-glow.png?v=4");
  --ui-btn: url("/assets/ui/btn-primary.png?v=5");
  --ui-minimap: url("/assets/ui/minimap-frame.png?v=4");
  --ui-orb: url("/assets/ui/orb-frame.png");
  --ui-icon: url("/assets/ui/icon-plate.png");
  /* Padding inside the iron rim so content clears the frame */
  --panel-pad: 1.1rem 1.15rem 1.2rem;
  /*
   * New frame art: mid-side rim ~52px incl. feather on 1024 source.
   * Slice slightly above rim so the feather is inside the border strip.
   * CSS width ≈ on-screen iron thickness; fill uses border-box so the
   * panel interior meets the feathered rim with no hard black join.
   */
  --frame-slice: 64;
  --frame-border: 12px;
  /*
   * Button plates are 9-sliced (border-image + fill) so wide buttons
   * stretch only edges/center — corner studs and bevel stay square.
   * Source is 512×231; slice covers bevel + corner studs (~18% height).
   */
  --btn-slice: 40;
  --btn-border: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  /* Lora reads best with near-normal tracking */
  letter-spacing: 0.01em;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Readable body copy — chat, lore, tooltips, hints */
.chat-line,
.chat-form input,
.hint,
.lore,
.subtitle,
.status-line,
.item-tooltip,
.toast,
.class-lore,
.class-lore-bio,
.class-lore-story,
.class-blurb,
.inv-hint,
.death-sub,
.overlay-sub,
.tt-hint,
label {
  font-family: var(--font);
  letter-spacing: 0.01em;
}

/* Compact UI chrome keeps Cinzel (buttons, short labels, keys) */
button,
.hud-btn,
.auth-tab,
.primary,
.secondary,
.danger,
.orb-val,
.orb-lbl,
.skill-key,
.skill-name,
.class-name,
.class-lore-title,
.brand-title {
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
}

input,
textarea,
select {
  font-family: var(--font);
  letter-spacing: 0.01em;
  font-size: 1rem;
  color: var(--text-value);
}

#canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  /* Compact bloody sword — solid pixels, dual outline for contrast, tip hotspot */
  cursor:
    url('/assets/ui/cursor-sword.png') 2 2,
    url('/assets/ui/cursor-sword-40.png') 2 2,
    url('/assets/ui/cursor-sword-32.png') 1 1,
    crosshair;
}

/* Soft cinematic vignette — blood-edge darkness */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(4, 0, 0, 0.72) 100%),
    linear-gradient(180deg, rgba(20, 2, 4, 0.28) 0%, transparent 16%, transparent 84%, rgba(8, 0, 2, 0.4) 100%);
}

.hidden {
  display: none !important;
}

/* ── Loading screen ── */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(4, 0, 0, 0.55), rgba(8, 2, 2, 0.75)),
    url("/assets/branding/title-bg.jpg?v=hud33") center / cover no-repeat,
    #050202;
  pointer-events: all;
}

.loading-screen.fade-out {
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.loading-panel {
  width: min(420px, 90vw);
  text-align: center;
  padding: 1.75rem 1.5rem;
}

.loading-brand {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #e8c8a8;
  text-shadow:
    0 0 20px rgba(160, 20, 20, 0.55),
    0 2px 0 #2a0808;
  margin-bottom: 0.75rem;
}

.loading-sub {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 1.1rem;
  min-height: 1.35rem;
}

.loading-bar-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3a0808, #a81818, #c43a2a, #6b0f12);
  background-size: 200% 100%;
  animation: load-shimmer 1.4s linear infinite;
  transition: width 0.25s ease;
}

@keyframes load-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.loading-pct {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 1rem;
  font-variant-numeric: tabular-nums;
}

.loading-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font-size: 0.78rem;
  color: var(--muted);
}

.loading-steps li {
  padding: 0.28rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.2rem;
}

.loading-steps li.done {
  color: var(--good);
}

.loading-steps li.active {
  color: var(--accent2);
  background: rgba(77, 208, 255, 0.08);
}

.loading-steps li.err {
  color: var(--bad);
}

.loading-steps li::before {
  content: "○ ";
  opacity: 0.7;
}

.loading-steps li.done::before {
  content: "✓ ";
}

.loading-steps li.active::before {
  content: "◉ ";
}

.loading-steps li.err::before {
  content: "✗ ";
}

.panel-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background:
    radial-gradient(ellipse at center, rgba(40, 8, 8, 0.35), rgba(4, 1, 2, 0.88)),
    #080202;
  pointer-events: auto;
}

/* Login / browser — full grim crypt key art */
.panel-screen-title {
  background:
    linear-gradient(180deg, rgba(6, 0, 0, 0.55) 0%, rgba(4, 0, 0, 0.72) 45%, rgba(8, 2, 2, 0.88) 100%),
    url("/assets/branding/title-bg.jpg?v=hud33") center / cover no-repeat;
}

/* Character select — Hall of the Damned */
.panel-screen-char {
  background:
    linear-gradient(180deg, rgba(6, 0, 0, 0.5) 0%, rgba(4, 0, 0, 0.78) 100%),
    url("/assets/branding/char-bg.jpg?v=hud33") center / cover no-repeat;
}

/* Individual death — above HUD / menu so the choice is always visible */
.death-screen {
  z-index: 58;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(90, 10, 15, 0.55), transparent 55%),
    radial-gradient(ellipse at center, rgba(30, 5, 8, 0.72), rgba(4, 1, 2, 0.92));
  animation: death-fade-in 0.45s ease-out;
}

.death-screen.hidden {
  display: none;
}

@keyframes death-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.death-panel {
  text-align: center;
  border-color: rgba(200, 50, 50, 0.45);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 60, 60, 0.15),
    0 0 48px rgba(140, 20, 20, 0.25);
  background: linear-gradient(165deg, rgba(40, 12, 14, 0.95), rgba(12, 6, 8, 0.96));
}

.death-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 160, 150, 0.65);
  font-weight: 700;
}

.death-panel h2 {
  margin: 0 0 0.65rem;
  font-size: 2.1rem;
  letter-spacing: 0.12em;
  color: #ff6a5a;
  text-shadow: 0 0 24px rgba(255, 40, 40, 0.45);
}

.death-panel .lore {
  margin: 0 0 1.35rem;
  color: rgba(255, 210, 200, 0.78);
  line-height: 1.45;
}

.death-respawn-btn {
  min-width: 12rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.death-res-status {
  margin: -0.5rem 0 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #9effb0;
  text-shadow: 0 0 12px rgba(80, 255, 120, 0.35);
}

.death-res-status.hidden {
  display: none;
}

/* Resurrection channel bar (bottom-center above orbs) */
.cast-bar {
  position: fixed;
  left: 50%;
  bottom: 13.6rem;
  transform: translateX(-50%);
  width: min(280px, 70vw);
  z-index: 40;
  pointer-events: none;
  text-align: center;
}

.cast-bar.hidden {
  display: none !important;
}

.cast-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8c8b0;
  margin-bottom: 0.28rem;
  text-shadow: 0 1px 4px #000;
}

.cast-track {
  height: 10px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(140, 50, 40, 0.5);
  overflow: hidden;
  box-shadow: 0 0 12px rgba(120, 20, 15, 0.3);
}

.cast-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #5a1010, #c43a2a 55%, #e8a080);
  transition: width 0.08s linear;
  box-shadow: 0 0 10px rgba(180, 40, 20, 0.55);
}

/**
 * Scarforged windows — thin iron border-image (no fill region).
 * background-clip:border-box so panel fill meets the feathered rim.
 */
.panel {
  position: relative;
  width: min(420px, 92vw);
  padding: var(--panel-pad);
  color: var(--text);
  border: var(--frame-border) solid transparent;
  border-radius: 0;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: var(--frame-border);
  border-image-repeat: stretch;
  border-image-outset: 0;
  background-color: #120808;
  background-image: linear-gradient(
    165deg,
    rgba(26, 12, 12, 0.98) 0%,
    rgba(12, 5, 6, 0.98) 55%,
    rgba(8, 3, 3, 0.98) 100%
  );
  /* Extend fill under the border so transparent/feathered rim blends into interior */
  background-clip: border-box;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.88);
  outline: none;
}

.panel.panel-scar {
  border-image-source: var(--ui-panel-glow);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(100, 14, 10, 0.2);
}

.panel.panel-wide {
  width: min(560px, 94vw);
  max-height: min(92vh, 900px);
  overflow-y: auto;
}

#title-screen .panel.panel-wide {
  width: min(980px, 96vw);
  max-height: min(92vh, 820px);
}

.title-actions {
  justify-content: flex-start;
}

.title-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr);
  gap: 0.85rem 1rem;
  align-items: stretch;
  min-height: 0;
}

.title-col-create,
.title-col-browser {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.title-col-browser .game-browser-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}

.title-col-browser .game-list {
  flex: 1;
  max-height: min(48vh, 420px);
}

@media (max-width: 780px) {
  #title-screen .panel.panel-wide {
    width: min(96vw, 560px);
  }
  .title-grid {
    grid-template-columns: 1fr;
  }
  .title-col-browser .game-list {
    max-height: min(32vh, 240px);
  }
}

/* Create-hero: wide two-column layout, roomy previews, no panel scroll */
#char-screen:has(.char-create:not(.hidden)) .panel.panel-wide {
  width: min(1100px, 97vw);
  max-height: min(94vh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#char-screen:has(.char-create:not(.hidden)) .panel.panel-wide > h2,
#char-screen:has(.char-create:not(.hidden)) .panel.panel-wide > .hint {
  flex-shrink: 0;
}

/* Thin blood-iron rule under titles (CSS — more reliable than art strip) */
.panel h1,
.panel h2,
.panel .brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  position: relative;
  padding-bottom: 0.7rem;
  margin-bottom: 0.85rem;
}

.panel h1::after,
.panel h2::after,
.panel .brand-title::after {
  content: "";
  display: block;
  height: 2px;
  margin: 0.55rem auto 0;
  max-width: 200px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #4a1814 15%,
    #a03028 50%,
    #4a1814 85%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(160, 30, 20, 0.45);
}

.brand-title {
  font-family: var(--font-display);
  margin: 0 0 0.35rem;
  font-size: clamp(1.85rem, 5vw, 2.45rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-align: center;
  color: #e8d0b8;
  text-shadow:
    0 0 28px rgba(160, 20, 20, 0.55),
    0 2px 0 #1a0404,
    0 0 2px #400808;
}

/* Login WIP / early-access disclaimer */
.auth-wip-notice {
  margin: 0.15rem 0 0.95rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(160, 90, 40, 0.55);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(48, 22, 10, 0.72), rgba(18, 8, 6, 0.88));
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(120, 50, 20, 0.18);
  color: #e8c8a0;
  font-family: var(--font-body, 'Lora', Georgia, serif);
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
  letter-spacing: 0.01em;
}

.auth-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.auth-tab {
  flex: 1;
  /* Simple tab chrome — not the full plate button art */
  background: linear-gradient(180deg, rgba(28, 12, 10, 0.75), rgba(10, 4, 4, 0.9));
  background-image: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.55rem 0.5rem;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

.auth-tab:hover {
  border-color: #7a3028;
  color: #e0d0c4;
  filter: none;
  background: linear-gradient(180deg, rgba(40, 16, 14, 0.8), rgba(14, 5, 5, 0.92));
  background-image: none;
}

.auth-tab.active {
  border-color: #a04030;
  color: #f0e0d0;
  box-shadow: 0 0 12px rgba(140, 20, 20, 0.35), inset 0 0 14px rgba(80, 10, 8, 0.4);
  filter: none;
  background: linear-gradient(180deg, rgba(70, 22, 18, 0.85), rgba(24, 8, 8, 0.95));
  background-image: none;
}

.char-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: min(52vh, 480px);
  overflow-y: auto;
}

.char-list-empty {
  text-align: center;
  margin: 0.5rem 0 1rem;
}

.char-list li.char-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  user-select: none;
}

.char-list li.char-card:hover {
  border-color: rgba(196, 77, 255, 0.45);
  background: rgba(20, 10, 30, 0.55);
}

.char-list li.char-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), inset 0 0 18px rgba(196, 77, 255, 0.12);
  background: rgba(40, 18, 55, 0.55);
}

.char-list .char-face {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  flex-shrink: 0;
  border: 1px solid rgba(220, 180, 120, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.char-list .char-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  flex: 1;
  min-width: 0;
}

.char-list .char-meta strong {
  letter-spacing: 0.04em;
  font-size: 1.05rem;
}

.char-list .char-meta span {
  font-size: 0.78rem;
  color: var(--muted);
}

.char-list .char-del {
  flex-shrink: 0;
  padding: 0.4rem 0.55rem;
  font-size: 0.72rem;
  opacity: 0.85;
}

.char-list .char-del:hover {
  opacity: 1;
}

.char-select-actions {
  margin-bottom: 0.85rem;
}

.play-hero-btn {
  width: 100%;
  padding: 1rem 1.25rem !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.18em;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.play-hero-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.char-create {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.char-create h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  flex-shrink: 0;
}

.char-create-grid {
  display: grid;
  /* Left column wider so 2×2 class previews stay roomy */
  grid-template-columns: minmax(420px, 1.25fr) minmax(300px, 0.95fr);
  gap: 0.85rem 1.25rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.char-create-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  gap: 0.15rem;
}

.char-create-left label {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.char-create-left input#char-name {
  flex-shrink: 0;
  margin-bottom: 0.25rem;
}

.sex-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  flex-shrink: 0;
  margin: 0.15rem 0 0.35rem;
}

.sex-card {
  appearance: none;
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
  color: #d8c4a8;
  background: rgba(8, 4, 4, 0.55);
  border: 1px solid rgba(180, 130, 80, 0.35);
  border-radius: 8px;
  padding: 0.42rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}

.sex-card:hover {
  border-color: rgba(220, 170, 100, 0.55);
  background: rgba(28, 14, 10, 0.7);
}

.sex-card.selected {
  color: #f0e0c4;
  border-color: var(--accent, #c44dff);
  box-shadow: 0 0 0 1px var(--accent, #c44dff), inset 0 0 14px rgba(196, 77, 255, 0.12);
  background: rgba(40, 18, 55, 0.55);
}

.char-create-actions {
  flex-shrink: 0;
  margin-top: 0.45rem;
  margin-bottom: 0;
}

/* Stack on narrow viewports */
@media (max-width: 720px) {
  #char-screen:has(.char-create:not(.hidden)) .panel.panel-wide {
    width: min(96vw, 520px);
    max-height: min(92vh, 900px);
    overflow-y: auto;
  }
  .char-create-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .class-lore {
    max-height: none;
    overflow-y: visible;
  }
  .class-lore-portrait {
    width: min(100%, 14rem);
  }
}

h1 {
  margin: 0 0 0.25rem;
  font-size: 2rem;
  letter-spacing: 0.16em;
  text-align: center;
  color: #e8d0b8;
  text-shadow: 0 0 24px rgba(140, 20, 20, 0.45), 0 2px 0 #1a0404;
}

h2 {
  margin: 0 0 0.75rem;
  text-align: center;
  letter-spacing: 0.1em;
}

.subtitle {
  text-align: center;
  color: var(--muted);
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.lore {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0 0 1.25rem;
}

label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 0.85rem;
  -webkit-appearance: none;
  appearance: none;
}

/* Password fields: match text inputs (browsers often force system chrome) */
input[type="password"] {
  letter-spacing: 0.08em;
}

input[type="password"]::placeholder {
  letter-spacing: normal;
  color: var(--muted);
  opacity: 0.75;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

/* Autofill — keep dark theme */
input[type="text"]:-webkit-autofill,
input[type="password"]:-webkit-autofill,
input[type="email"]:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px rgba(12, 8, 18, 0.95) inset;
  transition: background-color 99999s ease-out;
}

input:focus {
  outline: 1px solid var(--accent);
  border-color: var(--accent);
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: -0.25rem 0 0.95rem;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.auth-remember input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
  -webkit-appearance: auto;
  appearance: auto;
}

.auth-remember span {
  line-height: 1.3;
}

.btn-row {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.section-title {
  margin: 0.85rem 0 0.45rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.game-create-block,
.game-browser-block {
  text-align: left;
  margin-bottom: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.hell-mode-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.55rem 0 0.25rem;
  font-size: 0.9rem;
  color: #f0a070;
  cursor: pointer;
}
.hell-mode-label input {
  width: auto;
  accent-color: #e04030;
}
.hell-mode-label.hidden {
  display: none;
}
.hell-badge {
  color: #ff6040;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.game-row-hell {
  color: #ff6040;
}

.game-browser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.game-browser-head .section-title {
  margin: 0;
}

.small-btn {
  padding: 0.35rem 0.65rem !important;
  font-size: 0.75rem !important;
}

.game-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.game-list-empty {
  margin: 0.5rem 0 0;
}

.game-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.75rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.game-row.full {
  opacity: 0.55;
}

.game-row-main {
  min-width: 0;
}

.game-row-name {
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-row-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.game-row-lock {
  color: #e0b060;
  font-weight: 700;
}

.game-row-status {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8fd4a8;
}

.game-row-status.in-game {
  color: #8ab4ff;
}

.game-row-status.full {
  color: #c87878;
}

.game-row .join-game-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.game-name-display {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0.15rem 0 0.35rem;
}

.modal-overlay {
  z-index: 40;
  background: rgba(0, 0, 0, 0.65);
}

.panel-narrow {
  max-width: 360px;
}

.class-label {
  margin-top: 0.15rem;
}

.class-label .muted {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}

.class-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.class-select.lobby-class {
  margin-top: 0.25rem;
  margin-bottom: 0;
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
  gap: 0.5rem;
}

.char-create .class-card {
  padding: 0.45rem 0.5rem 0.55rem;
  gap: 0.2rem;
  justify-content: flex-start;
  min-height: 0;
}

/* Roomy preview windows — models need height to not look cramped */
.char-create .class-card .class-preview {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-height: 10.5rem;
  height: auto;
  aspect-ratio: 168 / 210;
  object-fit: contain;
}

.char-create .class-card .class-name {
  font-size: 0.88rem;
  margin-top: 0.15rem;
}

.char-create .class-card .class-blurb {
  font-size: 0.72rem;
  max-width: 14rem;
  line-height: 1.3;
}

.char-create .class-card .class-attrs {
  font-size: 0.66rem;
  margin-top: 0.15rem;
}

.class-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  padding: 0.5rem 0.55rem 0.6rem;
  border-radius: 3px;
  border: 1px solid #5a2820;
  /* Plain dark card — never iron-plate button art */
  background-color: rgba(14, 6, 5, 0.94);
  background-image: linear-gradient(165deg, rgba(22, 10, 8, 0.92), rgba(8, 3, 3, 0.96));
  background-size: auto;
  background-repeat: no-repeat;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  overflow: hidden;
  box-shadow: inset 0 0 16px rgba(40, 0, 0, 0.35);
  filter: none;
  text-shadow: none;
}

.class-card .class-preview {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 200 / 250;
  min-height: 12rem;
  border-radius: 3px;
  /* Neutral floor — light pool comes from the 3D disc under the feet */
  background: linear-gradient(180deg, rgba(48, 28, 22, 0.72) 0%, rgba(14, 8, 6, 0.94) 100%);
  pointer-events: none;
  border: 1px solid rgba(110, 55, 40, 0.5);
  object-fit: contain;
}

.class-card:hover {
  border-color: #a04030;
  background-color: rgba(28, 12, 10, 0.96);
  background-image: linear-gradient(165deg, rgba(32, 14, 12, 0.94), rgba(12, 4, 4, 0.97));
  box-shadow: inset 0 0 18px rgba(80, 20, 12, 0.4);
  filter: none;
}

.class-card.selected {
  border-color: #c43a2a;
  box-shadow: 0 0 0 1px #c43a2a, inset 0 0 18px rgba(160, 30, 20, 0.25);
}

/* Per-class lobby card tint */
.class-card[data-class="ranger"].selected {
  border-color: #c4a574;
  box-shadow: 0 0 0 1px #c4a574, inset 0 0 18px rgba(107, 68, 35, 0.25);
}
.class-card[data-class="necromancer"].selected {
  border-color: #c8c8cc;
  box-shadow: 0 0 0 1px #c8c8cc, inset 0 0 18px rgba(20, 20, 24, 0.45);
}
.class-card[data-class="mage"].selected {
  border-color: #5a8cff;
  box-shadow: 0 0 0 1px #5a8cff, inset 0 0 18px rgba(90, 140, 255, 0.18);
}
.class-card[data-class="warrior"].selected {
  border-color: #e07040;
  box-shadow: 0 0 0 1px #e07040, inset 0 0 18px rgba(224, 112, 64, 0.18);
}

.class-card .class-ico {
  font-size: 1.15rem;
  line-height: 1;
}

.class-card .class-name {
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  margin-top: 0.1rem;
}

.class-card .class-blurb {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  max-width: 12rem;
}

.class-card .class-attrs {
  font-size: 0.62rem;
  color: #c9b896;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
  line-height: 1.3;
}

/* Class bio / backstory — right column, larger type */
.class-lore {
  margin: 0;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 4px;
  border: 1px solid rgba(120, 55, 40, 0.55);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(90, 30, 20, 0.28), transparent 55%),
    linear-gradient(165deg, rgba(22, 10, 8, 0.96), rgba(8, 3, 3, 0.98));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.class-lore-portrait {
  flex: 0 0 auto;
  margin: 0 auto 0.75rem;
  width: min(100%, 17.5rem);
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(196, 150, 90, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(40, 16, 10, 0.65),
    0 10px 22px rgba(0, 0, 0, 0.45);
  background: #140808;
}

.class-lore-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}

.class-lore-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}

.class-lore-title {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8d0b8;
  font-weight: 800;
}

.class-lore-epithet {
  font-family: var(--font);
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 400;
  color: #c9a070;
  letter-spacing: 0.02em;
}

.class-lore-bio {
  font-family: var(--font);
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #e8d4b8;
  font-weight: 600;
  flex-shrink: 0;
}

.class-lore-divider {
  height: 1px;
  margin: 0.3rem 0 0.6rem;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, rgba(180, 100, 60, 0.45), transparent);
}

.class-lore-story {
  margin: 0;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: 0.01em;
  color: #c8b8a0;
  white-space: pre-line;
  flex: 1 1 auto;
  min-height: 0;
  /* Story can scroll inside the panel so larger type still fits without page scroll */
  overflow-y: auto;
  padding-right: 0.2rem;
}

.char-stats .attr-row span,
.char-attrs .attr-row span {
  color: var(--text-label);
  font-weight: 600;
}

.char-stats .attr-points,
.char-attrs .attr-points {
  grid-column: 1 / -1;
  border: 1px solid rgba(201, 184, 150, 0.35);
  background: rgba(0, 0, 0, 0.45);
}

.char-stats .attr-points.has-points,
.char-attrs .attr-points.has-points {
  border-color: rgba(255, 200, 80, 0.55);
  background: rgba(80, 55, 10, 0.45);
  box-shadow: 0 0 12px rgba(255, 180, 40, 0.15);
}

.char-stats .attr-points.has-points b,
.char-attrs .attr-points.has-points b {
  color: #ffe08a;
}

.char-stats .attr-hint,
.char-attrs .attr-hint {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: var(--text-label);
  padding: 0.15rem 0.25rem 0.25rem;
  background: transparent;
  opacity: 0.9;
}

.char-stats .attr-val,
.char-attrs .attr-val {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-value);
  font-weight: 700;
}

.char-stats .stats-section-title {
  grid-column: 1 / -1;
  margin-top: 0.55rem;
  padding: 0.4rem 0.2rem 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8dcc8;
  border-top: 1px solid rgba(160, 100, 70, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.char-stats .stats-wide {
  grid-column: 1 / -1;
  padding: 0.35rem 0.35rem 0.4rem;
  color: var(--text-value);
  font-size: 0.92rem;
  line-height: 1.45;
}

.dt-block {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.9rem;
  letter-spacing: 0.015em;
}

.dt-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.28rem 0.4rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
}

.dt-main.dt-physical {
  border-left: 2px solid rgba(200, 190, 170, 0.7);
}

.dt-main.dt-magic {
  border-left: 2px solid rgba(140, 160, 255, 0.75);
  margin-top: 0.15rem;
}

.dt-main .dt-label {
  color: var(--text-label);
  font-weight: 600;
}

.dt-main b {
  color: var(--text-value);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dt-main em {
  font-style: normal;
  color: #e0d0c0;
  margin-left: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.dt-leaves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.45rem;
  padding: 0.05rem 0.3rem 0.15rem 0.55rem;
}

.dt-leaf {
  font-size: 0.85rem;
  color: #e8ddd0;
  font-weight: 600;
}

.dt-leaf em {
  font-style: normal;
  color: #f0e8dc;
  font-weight: 700;
}

.dt-leaf.dt-fire { color: #ff8a65; }
.dt-leaf.dt-cold { color: #81d4fa; }
.dt-leaf.dt-lightning { color: #fff176; }
.dt-leaf.dt-darkness { color: #b39ddb; }
.dt-leaf.dt-holy { color: #ffe082; }
.dt-leaf.dt-blunt { color: #bcaaa4; }
.dt-leaf.dt-pierce { color: #a5d6a7; }
.dt-leaf.dt-slash { color: #ef9a9a; }

.dt-leaf.dt-zero,
.dt-main.dt-zero,
.dt-group.dt-zero {
  opacity: 0.45;
}

.dt-group {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.15rem 0.35rem 0.1rem 0.45rem;
  font-size: 0.88rem;
  color: var(--text-label);
}

.dt-group-label {
  font-weight: 600;
  color: var(--text-label);
}

.dt-group b em {
  font-style: normal;
  color: var(--text-value);
  margin-left: 0.2rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.dt-leaves.dt-indent {
  padding-left: 0.9rem;
}

.dt-none,
.res-empty {
  font-size: 0.7rem;
  color: var(--muted);
  padding: 0.1rem 0.3rem;
}

.res-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.9rem;
  letter-spacing: 0.015em;
}

.res-group-title {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8dcc8;
  font-weight: 700;
}

.res-row {
  display: flex;
  justify-content: space-between;
  padding: 0.22rem 0.4rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-label);
  font-weight: 600;
}

.res-row.res-sub {
  padding-left: 0.85rem;
  color: var(--text-label);
  font-size: 0.88rem;
}

.res-row.res-sub2 {
  padding-left: 1.25rem;
  font-size: 0.85rem;
}

.res-row.res-zero {
  opacity: 0.55;
}

.res-row.res-zero b {
  color: #c8b8a8;
}

.res-row b {
  color: #b8e8b0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.item-tooltip .tt-dmg-types {
  font-size: 0.72rem;
  color: rgba(210, 200, 240, 0.92);
  line-height: 1.35;
  padding: 0.1rem 0.15rem 0.25rem;
}

.char-stats .attr-plus,
.char-attrs .attr-plus {
  pointer-events: auto;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 200, 80, 0.55);
  background: rgba(90, 60, 10, 0.7);
  color: #ffd060;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.char-stats .attr-plus:hover,
.char-attrs .attr-plus:hover {
  background: rgba(140, 95, 15, 0.9);
  border-color: #ffd060;
}

.player-list .class-tag {
  margin-left: 0.35rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

/* Base button reset — NO plate art on any state (class cards, tabs, slots…) */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 2px;
  padding: 0.55rem 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  color: var(--text);
  background-color: transparent;
  background-image: none;
  background-size: auto;
  background-repeat: no-repeat;
  box-shadow: none;
  text-shadow: none;
  filter: none;
  transition: transform 0.08s, filter 0.12s, border-color 0.12s, background-color 0.12s;
}

button:hover,
button:active,
button:focus {
  /* Never inherit plate art — only .primary/.secondary/.danger opt in below */
  background-image: none;
}

button.inv-slot.filled:hover,
button.inv-slot.filled:focus,
button.eq-slot.filled:hover,
button.eq-slot.filled:focus,
button.doll-slot.filled:hover,
button.doll-slot.filled:focus {
  background-image: linear-gradient(165deg, rgba(28, 12, 10, 0.96), rgba(10, 4, 4, 0.98));
  filter: brightness(1.08);
}

button.inv-slot.empty:hover,
button.inv-slot.empty:focus,
button.eq-slot:not(.filled):hover,
button.eq-slot:not(.filled):focus,
button.doll-slot:not(.filled):hover,
button.doll-slot:not(.filled):focus {
  background-image: inherit;
  filter: none;
  transform: none;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/**
 * Iron plate ONLY on real action buttons (primary / secondary / danger).
 * 9-slice via border-image: corners stay square; edges/center stretch on wide buttons.
 *
 * Hover/press keep the SAME plate art (no state-image swap). The old hover PNG had an
 * outer glow halo that 9-sliced badly; CSS lighting handles interaction instead.
 */
button.primary,
button.secondary,
button.danger {
  border: var(--btn-border) solid transparent;
  border-radius: 0;
  padding: 0.55rem 1.15rem;
  min-height: 2.55rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: #f0e4d4;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.45);
  background-color: #14100e;
  background-image: linear-gradient(
    180deg,
    rgba(55, 22, 18, 0.28) 0%,
    rgba(12, 5, 5, 0.4) 100%
  );
  background-size: auto;
  background-repeat: no-repeat;
  background-clip: padding-box;
  border-image-source: var(--ui-btn);
  border-image-slice: var(--btn-slice) fill;
  border-image-width: var(--btn-border);
  border-image-outset: 0;
  border-image-repeat: stretch;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
  filter: none;
  transition:
    filter 0.12s ease,
    box-shadow 0.12s ease,
    color 0.12s ease,
    text-shadow 0.12s ease,
    transform 0.08s ease;
}

button.primary:hover:not(:disabled),
button.secondary:hover:not(:disabled),
button.danger:hover:not(:disabled) {
  /* Keep geometry-identical plate — only light the metal a little */
  border-image-source: var(--ui-btn);
  filter: brightness(1.14);
  color: #fff6ea;
  text-shadow: 0 1px 3px #000, 0 0 10px rgba(180, 60, 30, 0.25);
  background-image: linear-gradient(
    180deg,
    rgba(90, 32, 24, 0.22) 0%,
    rgba(16, 6, 6, 0.32) 100%
  );
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(160, 70, 45, 0.4),
    0 0 14px rgba(120, 30, 18, 0.22);
}

button.primary:active:not(:disabled),
button.secondary:active:not(:disabled),
button.danger:active:not(:disabled) {
  transform: translateY(1px);
  border-image-source: var(--ui-btn);
  filter: brightness(0.88);
  color: #e8dcc8;
  background-image: linear-gradient(
    180deg,
    rgba(20, 8, 8, 0.4) 0%,
    rgba(8, 3, 3, 0.5) 100%
  );
  box-shadow:
    0 1px 5px rgba(0, 0, 0, 0.65),
    inset 0 2px 10px rgba(0, 0, 0, 0.55);
  transition-duration: 0.05s;
}

button.primary {
  flex: 1;
  color: #f4e8d8;
  letter-spacing: 0.1em;
}

button.secondary {
  color: #d0c4b8;
  background-image: linear-gradient(
    180deg,
    rgba(36, 26, 22, 0.35) 0%,
    rgba(10, 7, 7, 0.45) 100%
  );
  filter: saturate(0.5) brightness(0.88);
}

button.secondary:hover:not(:disabled) {
  filter: saturate(0.65) brightness(1.06);
  color: #ece4da;
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(140, 110, 90, 0.35),
    0 0 12px rgba(80, 50, 30, 0.15);
}

button.secondary:active:not(:disabled) {
  filter: saturate(0.5) brightness(0.82);
}

button.danger {
  color: #ffc8c0;
  background-image: linear-gradient(
    180deg,
    rgba(90, 14, 16, 0.32) 0%,
    rgba(24, 4, 6, 0.42) 100%
  );
}

button.danger:hover:not(:disabled) {
  filter: brightness(1.12) saturate(1.08);
  color: #ffe0dc;
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(180, 50, 50, 0.45),
    0 0 14px rgba(140, 20, 20, 0.28);
}

/*
 * Character class cards — plain selectable tiles, never plate-button chrome.
 * Higher specificity + !important so no hover plate can leak in.
 */
button.class-card,
button.class-card:hover,
button.class-card:active,
button.class-card:focus,
button.class-card:disabled,
button.class-card.selected,
button.sex-card,
button.sex-card:hover,
button.sex-card:active,
button.sex-card:focus,
button.sex-card:disabled,
button.sex-card.selected {
  border-image: none !important;
  border-image-source: none !important;
  background-image: linear-gradient(
    165deg,
    rgba(22, 10, 8, 0.92),
    rgba(8, 3, 3, 0.96)
  ) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

button.sex-card {
  min-height: 0 !important;
  padding: 0.42rem 0.5rem !important;
  border-radius: 8px !important;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}

button.sex-card.selected {
  background-image: linear-gradient(
    165deg,
    rgba(48, 20, 62, 0.88),
    rgba(16, 6, 22, 0.94)
  ) !important;
  border-color: var(--accent, #c44dff) !important;
}

button.class-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  padding: 0.5rem 0.55rem 0.6rem;
  border: 1px solid #5a2820;
  border-radius: 3px;
  border-image: none;
  background-color: rgba(14, 6, 5, 0.94);
  color: var(--text);
  box-shadow: inset 0 0 16px rgba(40, 0, 0, 0.35);
  min-height: 0;
}

button.class-card:hover {
  border-color: #a04030;
  background-color: rgba(28, 12, 10, 0.96);
  background-image: linear-gradient(
    165deg,
    rgba(32, 14, 12, 0.94),
    rgba(12, 4, 4, 0.96)
  ) !important;
  box-shadow: inset 0 0 18px rgba(80, 20, 12, 0.4);
}

button.class-card.selected {
  border-color: #c43a2a;
  box-shadow: 0 0 0 1px #c43a2a, inset 0 0 18px rgba(160, 30, 20, 0.25);
}

.status-line {
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 1.25rem;
  margin-bottom: 0.75rem;
}

.status-line.ok {
  color: var(--good);
}

.status-line.err {
  color: var(--bad);
}

.hint {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
  margin: 0.5rem 0 0;
}

.hint.muted {
  opacity: 0.7;
  margin-top: 1rem;
}

.hint a {
  color: var(--accent2);
}

.code-label {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0;
}

.room-code {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: var(--gold);
  margin: 0.25rem 0 0.5rem;
  font-variant-numeric: tabular-nums;
}

.player-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.player-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 0.35rem;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* HUD
 * --hud-s must stay a unitless number. Firefox drops `100vw / 1680px`
 * (typed arithmetic), which invalidates every calc() and lets 1024px
 * orb / icon art paint at native size. JS sets the live scale. */
#hud {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Top-right cluster */
/* Top-center target frame (hover enemy / ally / NPC) */
.target-frame {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  pointer-events: none;
  min-width: 220px;
  max-width: min(360px, 46vw);
}
.target-frame.hidden {
  display: none;
}
.target-frame-inner {
  padding: 0.45rem 0.75rem 0.55rem;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(12, 10, 18, 0.88), rgba(8, 6, 12, 0.78));
  border: 1px solid rgba(180, 150, 90, 0.35);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.target-frame[data-kind='enemy'] .target-frame-inner {
  border-color: rgba(200, 70, 60, 0.45);
}
.target-frame[data-kind='ally'] .target-frame-inner {
  border-color: rgba(80, 160, 220, 0.45);
}
.target-frame[data-kind='npc'] .target-frame-inner {
  border-color: rgba(160, 180, 120, 0.4);
}
.target-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.28rem;
}
.target-name {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #f0e6d0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.target-type {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(200, 190, 170, 0.75);
  white-space: nowrap;
}
.target-hp-wrap {
  position: relative;
  height: 14px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 0.28rem;
}
.target-hp-wrap.hidden {
  display: none;
}
.target-hp-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(180deg, #6ecf5a, #2d8a38);
  transition: width 0.12s ease-out;
}
.target-hp-fill.mid {
  background: linear-gradient(180deg, #d4b24a, #a07020);
}
.target-hp-fill.low {
  background: linear-gradient(180deg, #e06050, #8a2020);
}
.target-hp-text {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 14px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
.target-resists {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem;
  margin-bottom: 0.15rem;
}
.target-resist {
  font-size: 0.62rem;
  padding: 0.05rem 0.28rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(210, 205, 195, 0.9);
}
.target-resist.pos {
  color: #8fd49a;
}
.target-resist.neg {
  color: #e09070;
}
.target-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  min-height: 0;
}
.target-status {
  font-size: 0.78rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8));
}
.target-status.buff {
  /* green-ish tint via nothing; emoji carries meaning */
}
.target-status.debuff {
  opacity: 0.95;
}

.hud-top-right {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  pointer-events: none;
  z-index: 7;
  overflow: visible;
}

.hud-top-right-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.4rem;
  pointer-events: none;
}

.hud-top-right-row > * {
  pointer-events: auto;
}

.hud-report-btn {
  flex-shrink: 0;
  margin-top: 0.12rem;
}

/* Bottom-right window menu — Char · Inv · Skills · Quests · Options */
.hud-menu {
  position: absolute;
  right: 0.7rem;
  bottom: 0.75rem;
  z-index: 8;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(640px, 72vw);
  align-items: center;
  gap: 0.4rem;
  pointer-events: auto;
  padding: 0.45rem 0.55rem;
  border-radius: 0;
  border: 10px solid transparent;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: 10px;
  border-image-repeat: stretch;
  background: linear-gradient(180deg, rgba(16, 6, 6, 0.94), rgba(6, 2, 2, 0.97));
  background-clip: border-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75);
}

.hud-icon-btn {
  position: relative;
  width: calc(60px * var(--hud-s, 1));
  height: calc(60px * var(--hud-s, 1));
  max-width: 70px;
  max-height: 70px;
  padding: 0;
  border: 1px solid #6a3028;
  border-radius: 2px;
  background-color: #120606;
  background-image:
    radial-gradient(ellipse at 40% 30%, rgba(90, 30, 20, 0.4), rgba(8, 2, 2, 0.75)),
    var(--ui-icon);
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s, filter 0.15s;
}

/* Imagine HUD icons (bottom-right menu) */
.hud-icon-btn .hud-icon-emoji {
  display: none;
}

.hud-icon-btn img {
  display: block;
  width: calc(44px * var(--hud-s, 1));
  height: calc(44px * var(--hud-s, 1));
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.hud-icon-btn kbd {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 0.55rem;
  line-height: 1;
  padding: 0.1rem 0.22rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.78);
  color: rgba(240, 220, 200, 0.9);
  border: 1px solid rgba(140, 60, 40, 0.45);
  pointer-events: none;
}

.hud-icon-btn:hover {
  border-color: #a04030;
  box-shadow: 0 0 14px rgba(160, 30, 20, 0.4);
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.hud-icon-btn.active {
  border-color: #c9a24a;
  box-shadow:
    0 0 14px rgba(180, 40, 20, 0.4),
    inset 0 0 12px rgba(200, 80, 40, 0.15);
}

.hud-icon-btn:active {
  transform: translateY(1px);
}

.world-progress {
  display: none !important;
}
.world-progress .wp-chip {
  width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(180, 170, 160, 0.55);
  background: rgba(20, 16, 14, 0.75);
  border: 1px solid rgba(100, 90, 80, 0.45);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.world-progress .wp-chip.on {
  color: #1a1208;
  background: linear-gradient(160deg, #e8c070, #c89040);
  border-color: rgba(255, 210, 120, 0.75);
  box-shadow: 0 0 10px rgba(230, 170, 60, 0.45);
}
.world-progress .wp-chip.here {
  color: #0a1820;
  background: linear-gradient(160deg, #80d0ff, #4090c8);
  border-color: rgba(140, 210, 255, 0.85);
  box-shadow: 0 0 12px rgba(80, 180, 255, 0.55);
}
.world-progress .wp-chip.hell {
  outline: 1px solid rgba(255, 80, 50, 0.7);
}

.minimap-wrap {
  position: relative;
  width: calc(236px * var(--hud-s, 1));
  height: calc(236px * var(--hud-s, 1));
  max-width: 280px;
  max-height: 280px;
  box-sizing: border-box;
  padding: 11px;
  background: #080303;
  border: 11px solid transparent;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: 11px;
  border-image-repeat: stretch;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  pointer-events: auto;
}

#minimap {
  position: relative;
  display: block;
  inset: auto;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background: rgba(6, 2, 2, 0.96);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.minimap-wrap::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(196, 160, 86, 0.28);
  pointer-events: none;
  z-index: 3;
}

.minimap-wrap::before {
  display: none;
}

.minimap-label {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 11px;
  z-index: 2;
  padding: 0.22rem 0.3rem;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--bronze-hi, #e8d090);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), transparent);
  pointer-events: none;
  text-transform: uppercase;
  border-radius: 0;
}

/* Bottom-center orbs + skill bar (+ nested stamina/XP) — no outer tray */
.hud-orbs {
  position: absolute;
  left: 50%;
  bottom: 0.4rem;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.55rem;
  z-index: 6;
  pointer-events: none;
  padding: 0 0.4rem;
  background: none;
  border: none;
  box-shadow: none;
  max-width: min(1280px, calc(100vw - 28rem));
}

/* Skill bar + status + stamina + XP — centered column between HP and resource orbs */
.skill-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.32rem;
  margin: 0 0.35rem 0.2rem;
  pointer-events: none;
  min-width: 0;
  flex-shrink: 0;
}

/* Active statuses (buffs / debuffs) above skill bar */
.status-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.28rem;
  min-height: 0;
  max-width: 360px;
  pointer-events: auto;
}

.status-bar:empty {
  display: none;
}

.status-icon {
  position: relative;
  width: calc(34px * var(--hud-s, 1));
  height: calc(34px * var(--hud-s, 1));
  border-radius: 8px;
  border: 1px solid rgba(180, 160, 255, 0.4);
  background: radial-gradient(circle at 35% 30%, rgba(50, 40, 80, 0.95), rgba(12, 8, 20, 0.96));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: default;
  flex-shrink: 0;
}

.status-icon.buff {
  border-color: rgba(100, 220, 140, 0.65);
  box-shadow: 0 0 8px rgba(60, 180, 100, 0.25);
}

.status-icon.debuff {
  border-color: rgba(255, 90, 90, 0.7);
  box-shadow: 0 0 8px rgba(200, 40, 40, 0.3);
}

.status-icon.cooldown {
  border-color: rgba(140, 160, 200, 0.55);
  opacity: 0.85;
}

.status-icon.cast {
  border-color: rgba(255, 210, 100, 0.75);
  box-shadow: 0 0 10px rgba(255, 180, 60, 0.3);
}

.status-icon .st-face {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.status-icon .st-ico {
  font-size: 1.05rem;
  line-height: 1;
  pointer-events: none;
}

.status-icon .st-ico-img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  pointer-events: none;
}

.status-icon .st-timer {
  position: absolute;
  right: 1px;
  bottom: 0;
  z-index: 2;
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.05rem 0.15rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(240, 235, 255, 0.95);
  pointer-events: none;
}

/* Circular remaining-time ring */
.status-icon .st-ring {
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from -90deg,
    rgba(255, 255, 255, 0.35) calc(var(--st-pct, 0) * 1%),
    transparent 0
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}

.status-icon.buff .st-ring {
  background: conic-gradient(
    from -90deg,
    rgba(100, 230, 140, 0.75) calc(var(--st-pct, 0) * 1%),
    transparent 0
  );
}

.status-icon.debuff .st-ring {
  background: conic-gradient(
    from -90deg,
    rgba(255, 90, 90, 0.8) calc(var(--st-pct, 0) * 1%),
    transparent 0
  );
}

.status-icon.cast .st-ring {
  background: conic-gradient(
    from -90deg,
    rgba(255, 210, 100, 0.85) calc(var(--st-pct, 0) * 1%),
    transparent 0
  );
}

/* 6-slot skill bar between HP and resource orbs — chrome lives in hud-chrome.css */
.skill-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  margin-bottom: 0;
  pointer-events: auto;
}

.skill-slot {
  position: relative;
  width: calc(66px * var(--hud-s, 1));
  height: calc(66px * var(--hud-s, 1));
  max-width: 76px;
  max-height: 76px;
  border-radius: 2px;
  border: 1px solid #4a241c;
  background-color: #100606;
  background-image: radial-gradient(
    circle at 35% 30%,
    rgba(80, 28, 18, 0.55),
    rgba(10, 3, 3, 0.95)
  );
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  padding: 0;
  overflow: hidden;
  color: #eee;
  flex-shrink: 0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}

.skill-slot.empty {
  opacity: 0.45;
}

.skill-slot.locked {
  opacity: 0.35;
  filter: grayscale(0.8);
}

.skill-slot.skill-slot-locked {
  cursor: not-allowed;
  border-color: rgba(255, 200, 100, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 190, 80, 0.12);
}

.skill-slot.skill-slot-custom {
  cursor: grab;
}

.skill-slot.skill-slot-custom:active {
  cursor: grabbing;
}

.skill-slot.drag-over {
  border-color: rgba(120, 220, 160, 0.9) !important;
  box-shadow: 0 0 14px rgba(80, 200, 120, 0.4);
  outline: 1px solid rgba(120, 220, 160, 0.5);
}

.skill-slot.dragging {
  opacity: 0.4;
}

.skill-slot.on-cd {
  border-color: rgba(255, 180, 80, 0.45);
}

.skill-slot.wrong-weapon,
.skill-slot.need-reincarnate {
  filter: grayscale(0.55) saturate(0.6);
  border-color: rgba(220, 90, 70, 0.65);
}

.skill-slot.weak-weapon {
  filter: grayscale(0.28) saturate(0.75);
  opacity: 0.82;
  border-color: rgba(160, 150, 110, 0.55);
}

.skill-slot.wrong-weapon::after,
.skill-slot.need-reincarnate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(40, 8, 8, 0.28);
  pointer-events: none;
}

.skill-node.skill-node-draggable {
  cursor: grab;
}

.skill-node.skill-node-draggable:active {
  cursor: grabbing;
}

.skill-node.dragging {
  opacity: 0.55;
  outline: 1px dashed rgba(180, 140, 255, 0.6);
}

.skill-slot .skill-ico {
  font-size: calc(1.45rem * var(--hud-s, 1));
  line-height: 1;
  filter: drop-shadow(0 1px 2px #000);
  pointer-events: none;
}

.skill-slot .skill-ico-img {
  width: calc(56px * var(--hud-s, 1));
  height: calc(56px * var(--hud-s, 1));
  object-fit: contain;
  border-radius: 4px;
  pointer-events: none;
  image-rendering: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.skill-slot .skill-key {
  position: absolute;
  left: 3px;
  top: 2px;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.18rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(230, 220, 255, 0.9);
  font-family: inherit;
}

.skill-slot .skill-cd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  transition: height 0.08s linear;
}

.skill-slot .skill-name {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 0.48rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Skill tree panel — pass clicks through dimmed area so HUD skill bar stays droppable */
.skill-panel {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 0, 0, 0.78);
  pointer-events: none;
}

.skill-panel.hidden {
  display: none !important;
}

.skill-panel-inner {
  pointer-events: auto;
  width: min(1200px, 96vw);
  height: min(880px, 92vh);
  max-height: min(880px, 92vh);
  min-height: min(880px, 92vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  padding: var(--panel-pad);
  border: var(--frame-border) solid transparent;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: var(--frame-border);
  border-image-repeat: stretch;
  border-radius: 0;
  background-color: #120808;
  background-image: linear-gradient(165deg, rgba(16, 6, 6, 0.97), rgba(6, 2, 2, 0.98));
  background-clip: border-box;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.85);
  outline: none;
}

/* Assignment strip inside skill panel */
.skill-bar-edit {
  margin: 0 0 0.55rem;
  padding: 0.45rem 0.65rem 0.55rem;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid rgba(90, 45, 35, 0.55);
  background: rgba(0, 0, 0, 0.4);
}

.skill-bar-edit-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-label);
  margin-bottom: 0.5rem;
}

.skill-bar-edit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.skill-bar-edit-slot {
  position: relative;
  width: 88px;
  min-height: 96px;
  border-radius: 4px;
  border: 1px solid #6a3028;
  background: linear-gradient(165deg, rgba(28, 12, 10, 0.95), rgba(10, 4, 4, 0.98));
  color: #eee;
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  padding: 0.4rem 0.25rem 0.35rem;
}

.skill-bar-edit-slot.locked {
  cursor: not-allowed;
  opacity: 0.85;
  border-style: solid;
  border-color: rgba(200, 150, 60, 0.55);
}

.skill-bar-edit-slot.empty {
  opacity: 0.55;
}

.skill-bar-edit-slot.drag-over {
  border-color: rgba(120, 220, 160, 0.85);
  box-shadow: 0 0 12px rgba(80, 200, 120, 0.35);
  background: rgba(30, 50, 40, 0.95);
}

.skill-bar-edit-slot.dragging {
  opacity: 0.45;
}

.skill-bar-edit-slot .seb-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.skill-bar-edit-slot .seb-ico-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 4px;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.skill-bar-edit-slot .seb-ico .skill-ico {
  font-size: 1.6rem;
}

.skill-bar-edit-slot .seb-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-value);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.skill-bar-edit-slot .seb-key {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #e8c86a;
  opacity: 0.9;
}

.skill-panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}

.skill-panel-header h2 {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  color: var(--text-value);
  min-width: 6rem;
}

.skill-points-lbl {
  font-weight: 800;
  color: #e8c86a;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.skill-panel-hint {
  margin: 0 0 0.85rem;
  color: var(--text-label);
  font-size: 0.88rem;
  line-height: 1.4;
}

.skill-tree {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.55rem 0.7rem 0.5rem;
  background-size: cover;
  background-position: center;
  background-color: rgba(8, 3, 3, 0.28);
  background-blend-mode: multiply;
}

/* Class skill tabs — same iron plate as Close */
.skill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(90, 45, 35, 0.5);
}

button.secondary.skill-tab {
  flex: 1 1 auto;
  min-width: 5.2rem;
  min-height: 2rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}

button.secondary.skill-tab.active {
  filter: saturate(0.85) brightness(1.16);
  color: #fff6ea;
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(196, 160, 86, 0.45),
    0 0 12px rgba(160, 70, 30, 0.22);
}

.skill-tab-desc {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  color: var(--text-label);
  line-height: 1.4;
}

.skill-tier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.55rem 0.65rem;
}

.skill-tier-lbl {
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-label);
  font-weight: 700;
}

.skill-node .node-tags {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #8a9aaa;
  margin-top: 0.15rem;
  line-height: 1.25;
  opacity: 0.9;
}

.skill-node.basic-attack {
  border-color: rgba(180, 140, 60, 0.55);
}

.skill-tabs .skill-tab {
  min-width: 4.5rem;
}

@media (max-width: 900px) {
  .skill-node {
    flex-basis: 280px;
    width: 280px;
    max-width: 280px;
  }
}

/* Skill-rune sockets on skill nodes */
.skill-rune-slots {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
  align-items: center;
}
.skill-rune-slots.hint {
  font-size: 0.72rem;
  opacity: 0.45;
  letter-spacing: 0.15em;
}
.skill-rune-slot {
  width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(120, 90, 60, 0.55);
  border-radius: 3px;
  font-size: 0.85rem;
  background: rgba(10, 6, 4, 0.7);
  color: #8a7a60;
  cursor: default;
  user-select: none;
}
.skill-rune-slot.empty {
  color: #5a5040;
  border-style: dashed;
}
.skill-rune-slot.filled {
  color: var(--rune-col, #e0c060);
  border-color: var(--rune-col, #c4a040);
  box-shadow: 0 0 6px color-mix(in srgb, var(--rune-col, #c4a040) 40%, transparent);
  cursor: pointer;
}
.skill-rune-slot.locked {
  opacity: 0.4;
  font-size: 0.7rem;
}
.skill-node.rune-drop-target {
  outline: 1px solid rgba(200, 160, 60, 0.7);
  outline-offset: 2px;
}
.inv-slot.skill-rune-item .skill-rune-ico {
  font-size: 1.25rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px currentColor);
}
.inv-slot.skill-rune-item.dragging {
  opacity: 0.55;
}
.inv-slot.item-rune-item .rune-tag,
.inv-slot .sock-tag {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
  line-height: 1;
  margin-top: 1px;
}
.inv-slot.socket-drop-target {
  outline: 1px solid rgba(200, 160, 60, 0.75);
  outline-offset: 1px;
}
.eq-slot.eq-drop-ok,
.doll-slot.eq-drop-ok {
  outline: 2px solid #e0c060;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(224, 192, 96, 0.45);
}
.tt-sockets {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0 0.35rem;
  flex-wrap: wrap;
}
.tt-sock-lbl {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-right: 0.15rem;
}
.tt-sock {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(140, 110, 70, 0.55);
  border-radius: 2px;
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.35);
}
.tt-sock.empty {
  opacity: 0.55;
  border-style: dashed;
}
.tt-runeword {
  font-size: 0.82rem;
  color: #e0c060;
  margin: 0.15rem 0 0.35rem;
  line-height: 1.3;
}
.tt-unique-verb {
  font-size: 0.86rem;
  color: #e0c060;
  margin: 0.1rem 0 0.3rem;
  line-height: 1.35;
  font-style: italic;
}

.skill-node {
  box-sizing: border-box;
  flex: 0 0 340px;
  width: 340px;
  max-width: 340px;
  height: 102px;
  min-height: 102px;
  max-height: 102px;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: 3px;
  border: 1px solid rgba(138, 98, 48, 0.45);
  background: linear-gradient(165deg, rgba(22, 10, 8, 0.9), rgba(8, 3, 3, 0.92));
  color: var(--text-value);
  cursor: pointer;
  display: flex;
  gap: 0.65rem;
  align-items: center;
  border-image: none !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(196, 160, 86, 0.08);
  filter: none;
}

.skill-node:hover:not(:disabled) {
  border-color: #a04030;
  background: linear-gradient(165deg, rgba(48, 18, 14, 0.97), rgba(16, 6, 6, 0.99));
  filter: brightness(1.06);
}

.skill-node.unlocked {
  border-color: rgba(120, 200, 130, 0.55);
}

.skill-node.locked {
  opacity: 0.62;
}

.skill-node.can-unlock {
  border-color: rgba(220, 190, 90, 0.75);
  box-shadow: 0 0 12px rgba(200, 160, 40, 0.2);
  opacity: 1;
}

.skill-node.passive {
  border-style: dashed;
}

.skill-node.passive.unlocked {
  border-color: rgba(140, 180, 255, 0.55);
  background: linear-gradient(165deg, rgba(18, 22, 36, 0.96), rgba(8, 10, 18, 0.98));
}

.skill-node.weapon-fixed {
  border-style: solid;
  border-color: rgba(200, 150, 60, 0.55);
  background: linear-gradient(165deg, rgba(36, 26, 14, 0.96), rgba(14, 10, 6, 0.98));
  cursor: default;
}

.skill-node.weapon-fixed .node-cost {
  color: #e8c86a;
}

.skill-node:disabled {
  cursor: default;
}

.skill-node .node-ico {
  font-size: 1.45rem;
  line-height: 1;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(90, 45, 35, 0.45);
  overflow: hidden;
}

.skill-node .node-ico-img,
.skill-node .node-ico img {
  width: 48px;
  height: 48px;
  border-radius: 3px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.skill-node .node-ico-fallback {
  font-size: 1.75rem;
  line-height: 1;
}

.skill-node .node-meta {
  flex: 1;
  min-width: 0;
}

.skill-node .node-name {
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 0.12rem;
  color: var(--text-value);
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.skill-node .node-rank {
  font-weight: 700;
  font-size: 0.82rem;
  color: #e8c86a;
  margin-left: 0.25rem;
}

.skill-node .node-desc {
  font-size: 0.76rem;
  color: var(--text-label);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skill-node .node-tags,
.skill-node .skill-rune-slots.hint {
  display: none;
}

.skill-node .node-cost {
  margin-top: 0.12rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #e0c090;
  letter-spacing: 0.02em;
}

.skill-node.can-unlock .node-cost {
  color: #f0d060;
}

.orb {
  position: relative;
  width: calc(148px * var(--hud-s, 1));
  height: calc(148px * var(--hud-s, 1));
  max-width: 172px;
  max-height: 172px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
  background: transparent;
  flex-shrink: 0;
}
.orb-hp {
  margin-right: calc(1.85rem * var(--hud-s, 1));
}
.orb-res {
  margin-left: calc(1.85rem * var(--hud-s, 1));
}

/*
 * Soft opaque fill only under the iron ring (not an extra framed “window”).
 * Covers PNG transparency between spikes without a visible plate border.
 */
.orb::after {
  content: "";
  position: absolute;
  inset: calc(-6px * var(--hud-s, 1));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #100606 0%, #080303 78%, #050202 100%);
  box-shadow: none;
  border: none;
  z-index: 0;
  pointer-events: none;
}

/* Spiked iron ring — sits on the solid disc */
.orb::before {
  content: "";
  position: absolute;
  inset: calc(-14px * var(--hud-s, 1));
  background: var(--ui-orb) center / contain no-repeat;
  pointer-events: none;
  z-index: 3;
  background-color: transparent;
}

/*
 * Liquid globe: circular glass, fill rises/falls as --fill (0–1).
 * Iron frame sits on top; liquid is clipped to the circle.
 */
.orb-glass {
  position: absolute;
  inset: calc(16px * var(--hud-s, 1));
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  /* Fully opaque empty vessel */
  background:
    radial-gradient(circle at 32% 28%, rgba(70, 32, 28, 0.65) 0%, transparent 42%),
    radial-gradient(circle at 50% 70%, #120606 0%, #050202 100%);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.9),
    inset 0 -8px 18px rgba(0, 0, 0, 0.55);
}

.orb-liquid {
  --fill: 1;
  --liq: #c42828;
  --liq-hi: #ff6a5a;
  position: absolute;
  left: -18%;
  width: 136%;
  /* Height = fill level; sits on the bottom of the glass */
  bottom: 0;
  height: calc(var(--fill) * 100%);
  min-height: 0;
  max-height: 100%;
  transition: height 0.18s ease-out, opacity 0.12s ease-out;
  background: linear-gradient(
    180deg,
    var(--liq-hi) 0%,
    var(--liq) 42%,
    color-mix(in srgb, var(--liq) 32%, #000) 100%
  );
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.35),
    0 0 16px color-mix(in srgb, var(--liq) 45%, transparent);
  will-change: height;
}

.orb-liquid.empty {
  opacity: 0;
  pointer-events: none;
}

.orb-liquid-hp {
  --liq: #c42828;
  --liq-hi: #ff6a5a;
}

.orb-liquid-res {
  --liq: #4a8cff;
  --liq-hi: #a0d0ff;
}

/* Animated meniscus / surface waves */
.orb-wave {
  position: absolute;
  left: -10%;
  top: -10px;
  width: 120%;
  height: 18px;
  border-radius: 45% 48% 40% 42%;
  background: color-mix(in srgb, var(--liq-hi) 75%, #fff 25%);
  opacity: 0.72;
  animation: orb-wave-drift 2.8s ease-in-out infinite;
  pointer-events: none;
}

.orb-wave-b {
  top: -6px;
  height: 14px;
  opacity: 0.4;
  background: color-mix(in srgb, var(--liq) 60%, #000 40%);
  animation-duration: 3.6s;
  animation-direction: reverse;
}

@keyframes orb-wave-drift {
  0%,
  100% {
    transform: translateX(-6%) scaleY(1);
  }
  50% {
    transform: translateX(6%) scaleY(1.15);
  }
}

/* Specular glass highlight */
.orb-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 55% 35% at 32% 22%, rgba(255, 255, 255, 0.28), transparent 58%),
    radial-gradient(ellipse 40% 30% at 70% 78%, rgba(255, 255, 255, 0.06), transparent 60%);
  box-shadow: none;
}

.orb-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.6);
  z-index: 4;
}

.orb-val {
  font-size: calc(1.2rem * var(--hud-s, 1));
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.02em;
}

.orb-lbl {
  margin-top: 0.18rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

/* Low fill: dim glow; critical HP pulse */
.orb.orb-hp.low .orb-liquid {
  animation: orb-crit-pulse 0.9s ease-in-out infinite;
}

@keyframes orb-crit-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.25);
  }
}

/* Nested under .skill-cluster so dash pips sit dead-center with the skill bar */
.stamina-pips {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.28rem;
  z-index: 7;
  pointer-events: none;
  padding: 0 0 0.12rem;
  margin: 0 auto 0.12rem;
  background: none;
  border: none;
  box-shadow: none;
  width: 100%;
}

.stam-pip {
  width: calc(26px * var(--hud-s, 1));
  height: calc(26px * var(--hud-s, 1));
  border-radius: 2px;
  transform: none;
  border: none;
  background: url("/assets/hud/stam-pip-off.jpg") center / contain no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: filter 0.12s, opacity 0.12s;
  opacity: 0.72;
  filter: saturate(0.7) brightness(0.85);
}

.stam-pip.filled {
  opacity: 1;
  background-image: url("/assets/hud/stam-pip-on.jpg");
  filter: saturate(1) brightness(1.05);
  box-shadow: 0 0 10px rgba(196, 160, 86, 0.35);
}

.stam-pip.empty {
  opacity: 0.55;
  background-image: url("/assets/hud/stam-pip-off.jpg");
  filter: saturate(0.45) brightness(0.7);
}

/* Dedicated potion slot (Q) — left of the health globe in .hud-orbs */
.potion-hud-slot {
  position: relative;
  left: auto;
  bottom: auto;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: calc(1.25rem * var(--hud-s, 1));
  margin-right: 0.55rem;
  width: calc(50px * var(--hud-s, 1));
  height: calc(50px * var(--hud-s, 1));
  border-radius: 10px;
  border: 1px solid rgba(230, 100, 100, 0.45);
  background: linear-gradient(160deg, rgba(40, 12, 14, 0.92), rgba(12, 8, 12, 0.9));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(180, 40, 40, 0.12);
  z-index: 8;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.potion-hud-slot.empty {
  opacity: 0.55;
  border-color: rgba(120, 100, 100, 0.35);
}

.potion-hud-slot.cd {
  border-color: rgba(160, 140, 80, 0.55);
}

.potion-hud-slot.hot {
  border-color: rgba(120, 255, 140, 0.55);
  box-shadow: 0 0 14px rgba(80, 220, 100, 0.35), inset 0 0 12px rgba(60, 180, 80, 0.15);
}

.potion-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.potion-ico .item-ico-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  pointer-events: none;
}

.potion-count {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  min-width: 0.9rem;
  text-align: right;
}

.potion-key {
  position: absolute;
  left: 4px;
  top: 3px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.22rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 230, 230, 0.9);
}

.potion-cd-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  transition: height 0.08s linear;
}

.potion-hot-bar {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4cff7a, #a8ffb8);
  box-shadow: 0 0 6px rgba(80, 255, 120, 0.6);
  transform-origin: left center;
  transform: scaleX(1);
}

.potion-hot-bar.hidden {
  display: none;
}

.char-potion-slot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(230, 100, 100, 0.4);
  background: rgba(30, 10, 12, 0.65);
  min-height: 2.6rem;
}

.char-potion-slot.empty {
  opacity: 0.65;
  border-color: rgba(100, 90, 90, 0.35);
}

.char-potion-slot .ico {
  font-size: 1.35rem;
}

.char-potion-slot .nm {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
}

.char-potion-slot .cnt {
  font-weight: 800;
  color: #ffb0b0;
  font-size: 0.95rem;
}

.inv-slot-key {
  font-size: 0.75em;
  font-weight: 600;
  color: rgba(255, 180, 180, 0.75);
  letter-spacing: 0.04em;
}

/* Nested under .skill-cluster — bar + label stacked and centered */
.hud-xp-strip {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  pointer-events: none;
  z-index: 6;
  padding: 0;
  margin: 0.55rem auto 0;
  background: none;
  border: none;
  box-shadow: none;
}

.hud-xp-strip .xp-bar {
  width: 100%;
  flex: none;
  height: 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(120, 90, 40, 0.45);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.hud-xp-strip #xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8a6a18, #e8c040);
  transition: width 0.15s;
}

.hud-xp-strip #xp-text {
  font-size: 0.62rem;
  color: rgba(230, 210, 150, 0.85);
  font-weight: 600;
  white-space: nowrap;
  min-width: 0;
  text-align: center;
  letter-spacing: 0.04em;
}

.auth-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
  gap: 1.35rem;
  width: min(1240px, 94vw);
  height: min(90vh, 940px);
  max-height: min(90vh, 940px);
  align-items: stretch;
}

.auth-shell > .panel {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: hidden;
}

.changelog-panel {
  position: static;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.changelog-heading {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8d0b8;
  text-align: left;
}

.changelog-heading::after {
  margin-left: 0;
}

.changelog-kicker {
  margin: -0.25rem 0 0.85rem;
  font-size: 0.95rem;
  font-style: italic;
  color: #c9a070;
}

.changelog-list {
  margin: 0;
  padding: 0 0.7rem 0.2rem 0;
  list-style: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-size: 0.98rem;
  color: #c8b8a0;
  scrollbar-width: thin;
  scrollbar-color: #8a6230 #140808;
}

.changelog-list::-webkit-scrollbar {
  width: 8px;
}

.changelog-list::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(10, 4, 4, 0.95), rgba(6, 2, 2, 0.98));
  border-radius: 0;
  border-left: 1px solid rgba(90, 48, 28, 0.45);
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.55);
}

.changelog-list::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, #c4a056 0%, #8a5a28 42%, #5a3418 100%);
  border: 1px solid #3a2010;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(232, 208, 144, 0.35);
}

.changelog-list::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, #d8b868 0%, #a46a30 42%, #6a3c1c 100%);
}

.changelog-list::-webkit-scrollbar-corner {
  background: transparent;
}

.changelog-list > li {
  margin-bottom: 1.05rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(140, 80, 50, 0.22);
}

.changelog-list > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.changelog-list time {
  display: block;
  color: #d4af37;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.changelog-list b {
  display: block;
  margin-top: 0.18rem;
  color: #f0e4d4;
  font-size: 1.08rem;
  letter-spacing: 0.03em;
}

.changelog-list ul {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.5;
}

.auth-panel {
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-moved-notice {
  margin: 0.35rem 0 0;
  padding: 0.95rem 1rem 1.05rem;
  border: 1px solid rgba(160, 90, 40, 0.55);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(48, 22, 10, 0.72), rgba(18, 8, 6, 0.88));
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(120, 50, 20, 0.18);
  color: #e8c8a0;
  font-family: var(--font);
  font-size: 1.02rem;
  line-height: 1.55;
  text-align: left;
  letter-spacing: 0.01em;
}

.auth-moved-notice p {
  margin: 0;
}

.auth-moved-kicker {
  margin: 0 0 0.55rem !important;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8d0b8;
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(640px, 94vw);
    height: min(94vh, 980px);
    overflow: hidden;
  }
  .auth-panel {
    height: auto;
    max-height: none;
    justify-content: flex-start;
  }
  .changelog-panel {
    min-height: 0;
  }
}

.party-portraits {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  pointer-events: auto;
}
.party-port {
  position: relative;
  width: calc(76px * var(--hud-s, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: context-menu;
  background: none;
  border: none;
  box-shadow: none;
}
.party-port.self .pp-face {
  border-color: var(--bronze-hi);
  box-shadow: 0 0 10px rgba(232, 208, 144, 0.28);
}
.party-port .pp-face {
  position: relative;
  width: calc(64px * var(--hud-s, 1));
  height: calc(64px * var(--hud-s, 1));
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #6a4a28;
  background: radial-gradient(circle at 40% 30%, #2a1810, #080303 78%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(232, 208, 144, 0.12);
}
.party-port .pp-face::after {
  display: none;
}
.party-port .pp-face-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
.party-port .pp-name {
  margin-top: 0.18rem;
  max-width: calc(76px * var(--hud-s, 1));
  font-size: calc(0.62rem * var(--hud-s, 1));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f0e0c0;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.party-port .pp-hp,
.party-port .pp-res {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: calc(64px * var(--hud-s, 1));
  height: 4px;
  margin-top: 0.14rem;
  background: #1a0808;
  border-radius: 2px;
  overflow: hidden;
}
.party-port .pp-res { margin-top: 0.1rem; }
.party-port .pp-hp > i,
.party-port .pp-res > i {
  display: block;
  height: 100%;
  background: #3dcc55;
}
.party-port .pp-res > i { background: #4a8cff; }
.party-port .pp-lv {
  position: absolute;
  left: auto;
  right: 2px;
  top: 50px;
  bottom: auto;
  width: 18px;
  text-align: center;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #f0dca0;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 8px;
}
.party-port.dead { filter: grayscale(0.85); opacity: 0.7; }

.hud-icon-btn { position: relative; }
.hud-alert-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d42a2a;
  box-shadow: 0 0 8px rgba(220, 40, 40, 0.9);
  z-index: 2;
}
.hud-icon-btn.has-alert .hud-alert-dot { display: block; }
.hud-alert-dot.hidden { display: none !important; }

/* ── Party chat (bottom-left) ── */
.chat-panel {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  top: auto;
  right: auto;
  width: min(calc(400px * var(--hud-s, 1)), 42vw);
  min-width: 220px;
  max-width: min(640px, 56vw);
  height: calc(210px * var(--hud-s, 1));
  min-height: 140px;
  max-height: min(520px, 55vh);
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  z-index: 6;
}

.chat-panel.focused {
  pointer-events: auto;
}

.chat-panel:hover {
  pointer-events: auto;
}

.chat-tabs {
  display: flex;
  gap: 0.2rem;
  pointer-events: auto;
}
.chat-tab {
  flex: 1;
  min-height: 1.45rem;
  padding: 0.12rem 0.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220, 200, 160, 0.7);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(138, 98, 48, 0.35);
}
.chat-tab.active {
  color: #fff6ea;
  border-color: var(--bronze);
  background: rgba(60, 32, 14, 0.65);
}
.chat-tab.unread:not(.active) {
  color: #e8d4a0;
  border-color: rgba(196, 160, 86, 0.55);
  box-shadow: inset 0 -2px 0 rgba(232, 208, 144, 0.55);
}
.chat-tab.unread:not(.active)::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 0.28rem;
  vertical-align: middle;
  border-radius: 50%;
  background: rgba(232, 208, 144, 0.8);
  box-shadow: 0 0 6px rgba(232, 208, 144, 0.45);
}
.chat-resize {
  position: absolute;
  right: 0;
  top: 0;
  width: 18px;
  height: 18px;
  cursor: nesw-resize;
  pointer-events: auto;
  z-index: 2;
  background: linear-gradient(135deg, transparent 46%, rgba(196, 160, 86, 0.7) 46%);
}
.chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
  pointer-events: auto;
  opacity: 0.72;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.chat-panel:hover .chat-log,
.chat-panel.focused .chat-log {
  opacity: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.48));
}

.chat-line {
  font-size: 0.94rem;
  line-height: 1.38;
  color: #f5f2ec;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  word-break: break-word;
  animation: chat-in 0.2s ease-out;
}

.chat-line.chan-game { color: #f5f2ec; }
.chat-line.chan-whisper { color: #c084fc; }
.chat-line.chan-guild { color: #5dce6a; }
.chat-line.chan-global { color: #ffb6c8; }
.chat-line.system,
.chat-line.npc { color: #ff9a3c; font-style: italic; }

.chat-line .chat-name {
  font-weight: 700;
  margin-right: 0.35rem;
  color: inherit;
  cursor: context-menu;
}
.chat-line .chat-hero {
  font-weight: 700;
  color: inherit;
}
.chat-line .chat-acc {
  font-weight: 600;
  opacity: 0.58;
  filter: brightness(0.82);
}

.chat-item-link {
  display: inline;
  margin: 0 0.15rem;
  padding: 0 0.2rem;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #c8c8c8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.chat-item-link:hover {
  filter: brightness(1.15);
}
.chat-item-link.r-basic,
.chat-item-link.r-common {
  color: #d8d8d8;
}
.chat-item-link.r-magic,
.chat-item-link.r-uncommon {
  color: #6ea8ff;
}
.chat-item-link.r-rare {
  color: #ffd24a;
}
.chat-item-link.r-unique,
.chat-item-link.r-legendary {
  color: #d14a0f;
}
.chat-item-link.r-set {
  color: #5dce6a;
}
.chat-item-link.r-epic {
  color: #c47cff;
}

.chat-line.system,
.chat-line.npc {
  color: #ff9a3c;
  font-style: italic;
  opacity: 0.95;
}

.chat-line.fade {
  opacity: 0.55;
}

@keyframes chat-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.chat-form {
  display: flex;
  pointer-events: auto;
  opacity: 0.55;
  transition: opacity 0.15s;
}

.chat-panel.focused .chat-form,
.chat-form:focus-within {
  opacity: 1;
}

.chat-form input {
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.7rem;
  font-size: 0.94rem;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(160, 120, 220, 0.35);
  border-radius: 6px;
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
}

.chat-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(196, 77, 255, 0.35);
}

.player-ctx-menu {
  position: fixed;
  z-index: 80;
  min-width: 168px;
  padding: 0.22rem 0;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(22, 10, 8, 0.96), rgba(8, 3, 3, 0.97));
  border: 1px solid rgba(196, 160, 86, 0.45);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.65);
}
.player-ctx-menu[hidden],
.player-ctx-menu.hidden {
  display: none !important;
}
.player-ctx-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.38rem 0.75rem;
  border: none;
  background: transparent;
  color: #efe4c8;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.player-ctx-menu button:hover {
  background: rgba(196, 160, 86, 0.16);
  color: #fff6ea;
}

.inspect-card {
  position: fixed;
  z-index: 78;
  min-width: 220px;
  max-width: 280px;
  padding: 0.7rem 0.8rem 0.75rem;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(22, 10, 8, 0.96), rgba(8, 3, 3, 0.97));
  border: 1px solid rgba(196, 160, 86, 0.45);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.65);
  color: #efe4c8;
}
.inspect-card[hidden],
.inspect-card.hidden {
  display: none !important;
}
.inspect-card .ins-acc {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff6ea;
}
.inspect-card .ins-meta {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: rgba(232, 208, 144, 0.85);
}
.inspect-card .ins-close {
  margin-top: 0.55rem;
}

/* Replaced by top-left party portraits */
.party-bars {
  display: none !important;
}

/* Town portal button — right of resource globe (matches framed HUD icon set) */
.hud-portal-btn {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-end;
  width: calc(50px * var(--hud-s, 1));
  height: calc(50px * var(--hud-s, 1));
  margin-bottom: calc(1.25rem * var(--hud-s, 1));
  margin-left: 0.55rem;
  padding: 0;
  border-radius: 2px;
  border: 1px solid #6a3028;
  background-color: #120606;
  background-image: radial-gradient(ellipse at 40% 30%, rgba(40, 50, 90, 0.35), rgba(8, 2, 2, 0.75));
  color: #a8d0ff;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s, filter 0.15s;
}
.hud-portal-btn:hover {
  border-color: #4a80c0;
  box-shadow: 0 0 14px rgba(60, 120, 220, 0.45);
  transform: translateY(-1px);
  filter: brightness(1.12);
}
.hud-portal-btn:active {
  transform: translateY(1px);
}
.hud-portal-btn .portal-ico {
  display: block;
  width: calc(44px * var(--hud-s, 1));
  height: calc(44px * var(--hud-s, 1));
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}
.hud-portal-btn .portal-key {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 0.55rem;
  line-height: 1;
  padding: 0.1rem 0.22rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.78);
  color: rgba(200, 220, 255, 0.95);
  border: 1px solid rgba(80, 120, 200, 0.45);
  pointer-events: none;
}

.party-row {
  display: grid;
  grid-template-columns: 10px 1fr 80px;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
}

.party-row.dead {
  opacity: 0.4;
}

.party-row .pname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-hp {
  height: 6px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  overflow: hidden;
}

.mini-hp > div {
  height: 100%;
  background: var(--good);
}

#toast {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(20, 12, 30, 0.9);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  font-weight: 600;
  font-size: 0.95rem;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Loot pickup feed — stacks so rapid pickups stay readable */
#loot-feed {
  position: fixed;
  right: 1.1rem;
  bottom: 11.8rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.4rem;
  z-index: 90;
  pointer-events: none;
  max-width: min(320px, 42vw);
}

.loot-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  background: rgba(14, 10, 22, 0.92);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent2);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.loot-note.show {
  opacity: 1;
  transform: translateX(0);
}

.loot-note.hide {
  opacity: 0;
  transform: translateX(20px);
}

.loot-note .loot-icon {
  font-size: 1.25rem;
  line-height: 1;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.loot-note .loot-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.loot-note .loot-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loot-note .loot-sub {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Rarities: basic white · magic blue · rare yellow · unique orange · set green */
.loot-note.r-basic,
.loot-note.r-common { border-left-color: #c0c4c8; }
.loot-note.r-magic,
.loot-note.r-uncommon { border-left-color: #42a5f5; }
.loot-note.r-rare { border-left-color: #ffd54f; }
.loot-note.r-unique,
.loot-note.r-epic,
.loot-note.r-legendary { border-left-color: #d14a0f; }
.loot-note.r-set { border-left-color: #4caf50; }
.loot-note.r-gold { border-left-color: var(--gold); }
.loot-note.r-gold .loot-title { color: var(--gold); }
.loot-note.r-magic .loot-sub,
.loot-note.r-uncommon .loot-sub { color: #64b5f6; }
.loot-note.r-rare .loot-sub { color: #ffe082; }
.loot-note.r-unique .loot-sub,
.loot-note.r-epic .loot-sub,
.loot-note.r-legendary .loot-sub { color: #e06020; }
.loot-note.r-set .loot-sub { color: #81c784; }

.hud-btn {
  pointer-events: auto;
  margin-left: auto;
  background: rgba(60, 40, 90, 0.85);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.hud-btn:hover {
  filter: brightness(1.15);
}

.bars {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 340px;
}

.xp-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.xp-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #334466;
  border-radius: 4px;
  overflow: hidden;
}

#xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3a6ad4, #7ec8ff);
  transition: width 0.15s;
}

#xp-text {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 5.5rem;
}

.hint-bar {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 40, 40, 0.88);
  border: 1px solid #3ecf8e;
  color: #b8ffe0;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  max-width: 90vw;
  text-align: center;
}

.hint-bar.show {
  opacity: 1;
}

/* Character / inventory panel (solo: full-screen dim + centered card) */
.char-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
  touch-action: manipulation;
  box-sizing: border-box;
}

/*
 * Dual mode (body.char-inv-dual): char docks LEFT, inv docks RIGHT.
 * Use #id rules so .char-panel / .sheet-inner / .inv-inner width fights never win.
 */
body.char-inv-dual #char-panel:not(.hidden),
body.char-inv-dual #inv-panel:not(.hidden) {
  display: flex !important;
  align-items: stretch;
  justify-content: center;
  z-index: 16;
  box-sizing: border-box;
  pointer-events: auto;
  /* kill solo full-bleed inset */
  top: 0 !important;
  bottom: 0 !important;
  width: 50vw !important;
  max-width: 50vw !important;
  min-width: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

body.char-inv-dual #char-panel:not(.hidden) {
  left: 0 !important;
  right: auto !important;
  padding: 0.65rem 0.4rem 0.65rem 0.75rem;
  background: transparent;
}

body.char-inv-dual #inv-panel:not(.hidden) {
  left: auto !important;
  right: 0 !important;
  padding: 0.65rem 0.75rem 0.65rem 0.4rem;
  background: transparent;
}

body.char-inv-dual #char-panel .char-inner,
body.char-inv-dual #char-panel .sheet-inner,
body.char-inv-dual #inv-panel .char-inner,
body.char-inv-dual #inv-panel .inv-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: calc(100vh - 1.3rem) !important;
  height: auto;
  margin: auto 0;
  overflow: auto;
  box-sizing: border-box;
}

/* Dual: denser char sheet */
body.char-inv-dual #char-panel .sheet-body {
  grid-template-columns: minmax(140px, 170px) 1fr;
  gap: 0.65rem;
}
body.char-inv-dual #char-panel .sheet-preview {
  min-height: 180px;
  height: 200px;
}
body.char-inv-dual #char-panel .char-stats {
  max-height: min(58vh, 420px);
  font-size: 0.88rem;
}

/* Dual: inv doll + bag stack if narrow */
body.char-inv-dual #inv-panel .char-body {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
body.char-inv-dual #inv-panel .eq-doll {
  max-width: 320px;
  margin: 0 auto;
  grid-template-rows: 72px minmax(160px, 200px) 72px 72px;
}
body.char-inv-dual #inv-panel .eq-doll .doll-slot,
body.char-inv-dual #inv-panel .eq-doll .char-potion-slot.area-potion {
  width: 68px;
  height: 68px;
  min-width: 68px;
  max-width: 68px;
  min-height: 68px;
  max-height: 68px;
}
body.char-inv-dual #inv-panel .inv-grid {
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  max-width: 360px;
  margin: 0 auto;
  justify-content: center;
}

body.char-inv-dual::before {
  display: none;
}

@media (max-width: 820px) {
  body.char-inv-dual #char-panel:not(.hidden),
  body.char-inv-dual #inv-panel:not(.hidden) {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 50vh !important;
    max-height: 50vh !important;
    left: 0 !important;
    right: 0 !important;
  }
  body.char-inv-dual #char-panel:not(.hidden) {
    top: 0 !important;
    bottom: auto !important;
    padding: 0.35rem;
  }
  body.char-inv-dual #inv-panel:not(.hidden) {
    top: auto !important;
    bottom: 0 !important;
    padding: 0.35rem;
  }
  body.char-inv-dual #char-panel .char-inner,
  body.char-inv-dual #char-panel .sheet-inner,
  body.char-inv-dual #inv-panel .char-inner,
  body.char-inv-dual #inv-panel .inv-inner {
    max-height: calc(50vh - 0.7rem) !important;
  }
}

.char-inner {
  width: min(780px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border: var(--frame-border) solid transparent;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: var(--frame-border);
  border-image-repeat: stretch;
  border-radius: 0;
  background-color: #120808;
  background-image: linear-gradient(165deg, rgba(14, 6, 6, 0.97), rgba(6, 2, 2, 0.98));
  background-clip: border-box;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.85);
  outline: none;
  padding: var(--panel-pad);
}

.char-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.char-header h2 {
  margin: 0;
  letter-spacing: 0.08em;
}

.char-body {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1.25rem;
}

/* Inventory: give equipment doll more room than the bag column */
.inv-panel .char-body {
  grid-template-columns: 1.25fr 1fr;
  gap: 1.4rem;
}

@media (max-width: 700px) {
  .char-body {
    grid-template-columns: 1fr;
  }
  .inv-panel .char-body {
    grid-template-columns: 1fr;
  }
}

.char-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding-right: 0.2rem;
  letter-spacing: 0.015em;
}

/* Direct stat rows only — nested dmg/resist blocks keep their own layout */
.char-stats > div.stat-row,
.char-stats > div.attr-row,
.char-stats .dt-leaf[data-stat-tip],
.char-stats .dt-main[data-stat-tip],
.char-stats .dt-group[data-stat-tip],
.char-stats .res-row[data-stat-tip] {
  cursor: help;
}

.char-stats .dt-leaf[data-stat-tip]:hover,
.char-stats .dt-main[data-stat-tip]:hover,
.char-stats .dt-group[data-stat-tip]:hover {
  filter: brightness(1.12);
}

.item-tooltip.stat-tooltip .tt-desc {
  white-space: normal;
  line-height: 1.45;
  color: #d8c8b0;
  font-size: 0.88rem;
}

.char-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(90, 50, 40, 0.35);
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.35;
}

.char-stats > div.stats-section-title,
.char-stats > div.stats-wide,
.char-stats > div.attr-hint,
.char-stats > div.attr-points,
.char-stats > div.stats-hint {
  /* keep wide / section styles from earlier rules */
}

.char-stats > div.stats-wide {
  display: block;
  padding: 0.5rem 0.55rem;
  background: rgba(0, 0, 0, 0.35);
}

.char-stats > div.stats-hint {
  border-bottom: none;
  border-color: transparent;
  background: transparent;
  padding-top: 0.1rem;
  margin-top: -0.2rem;
  font-size: 0.82rem;
}

.char-stats > div.stats-hint b.muted {
  font-weight: 600;
  color: var(--text-label);
  opacity: 0.85;
}

/* Labels (Level, XP, HP…) */
.char-stats > span,
.char-stats > div > span {
  color: var(--text-label);
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Values (numbers) — high contrast */
.char-stats > div > b,
.char-stats b {
  color: var(--text-value);
  font-weight: 700;
  font-size: 1rem;
  text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.char-left h3,
.char-right h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--text-label);
  font-weight: 700;
}

/* Paper-doll: CSS grid — slots never overlap
 *  Amulet   Head    Potion
 *  Weapon  Preview  Off-hand
 *  Gloves   Chest   Boots
 *  Ring1    Legs    Ring2
 */
.eq-doll {
  display: grid;
  grid-template-columns: 80px minmax(140px, 1fr) 80px;
  grid-template-rows: 80px minmax(160px, 1fr) 80px 80px;
  grid-template-areas:
    "amulet  helm    potion"
    "weapon  preview offhand"
    "gloves  armor   boots"
    "ring    legs    ring2";
  gap: 0.45rem 0.5rem;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 0.5rem;
  padding: 0.65rem;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(70, 28, 22, 0.35), transparent 65%),
    linear-gradient(180deg, rgba(18, 8, 8, 0.92), rgba(6, 2, 2, 0.96));
  border: 1px solid rgba(90, 45, 35, 0.55);
  border-radius: 4px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-items: center;
}

/* Larger equipment doll inside inventory window */
.inv-panel .eq-doll {
  max-width: 460px;
  grid-template-columns: 88px minmax(180px, 1fr) 88px;
  grid-template-rows: 88px minmax(240px, 1.25fr) 88px 88px;
  gap: 0.5rem 0.55rem;
  padding: 0.75rem;
}

.eq-preview-wrap {
  grid-area: preview;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(60, 24, 18, 0.4), transparent 70%),
    rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(70, 35, 28, 0.45);
  pointer-events: none;
  overflow: hidden;
}

.eq-preview {
  width: 160px;
  height: 240px;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

.eq-preview-inv {
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-width: 200px;
  max-height: 280px;
}

/* Gear slots — icon only; name/stats via tooltip hover */
.eq-slot,
.inv-slot {
  position: relative;
  pointer-events: auto;
  text-align: center;
  border: 1px solid #5a5858; /* empty = grey */
  background: linear-gradient(165deg, rgba(22, 10, 8, 0.96), rgba(8, 3, 3, 0.98));
  color: var(--text-value);
  border-radius: 3px;
  padding: 0.25rem;
  cursor: pointer;
  font-family: inherit;
  min-height: 0;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fixed slot size — equipping items must never grow the cell */
.eq-doll .doll-slot {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  min-width: 72px;
  max-width: 72px;
  min-height: 72px;
  max-height: 72px;
  padding: 0.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  justify-self: center;
  align-self: center;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(20, 8, 8, 0.96), rgba(8, 3, 3, 0.98));
  border: 1px solid #5a5858; /* empty = grey */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 0 10px rgba(0, 0, 0, 0.4);
  text-align: center;
  border-radius: 3px;
  inset: unset;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
}

/* Slot type label only when empty; hide name text under items */
.eq-doll .doll-slot .eq-label {
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-label);
  line-height: 1.1;
  font-weight: 700;
  opacity: 0.75;
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  pointer-events: none;
}

.eq-doll .doll-slot.filled .eq-label {
  display: none;
}

.eq-doll .doll-slot .ico {
  font-size: 1.2rem;
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  overflow: hidden;
}

.eq-doll .doll-slot .nm {
  display: none !important;
}

.eq-doll .doll-slot .empty {
  font-size: 1rem;
  color: var(--text-label);
  opacity: 0.4;
  font-weight: 700;
}

/* Grid areas — around the character (no fixed accent borders; empty = grey, filled = rarity) */
.area-amulet { grid-area: amulet; }
.area-helm { grid-area: helm; }
.area-potion { grid-area: potion; }
.area-weapon { grid-area: weapon; }
.area-preview { grid-area: preview; }
.area-offhand { grid-area: offhand; }
.area-gloves { grid-area: gloves; }
.area-armor { grid-area: armor; }
.area-legs { grid-area: legs; }
.area-boots { grid-area: boots; }
.area-ring { grid-area: ring; }
.area-ring2 { grid-area: ring2; }

/* Potion sits in the doll grid (top-right) — same fixed size as gear slots */
.eq-doll .char-potion-slot.area-potion {
  margin: 0;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  min-width: 72px;
  max-width: 72px;
  min-height: 72px;
  max-height: 72px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  gap: 0;
  padding: 0.15rem;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid #5a5858;
  background: linear-gradient(165deg, rgba(28, 10, 10, 0.96), rgba(10, 3, 3, 0.98));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 0 10px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.eq-doll .char-potion-slot .eq-label {
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-label);
  font-weight: 700;
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  opacity: 0.75;
}
.eq-doll .char-potion-slot.filled .eq-label {
  display: none;
}
.eq-doll .char-potion-slot .ico {
  font-size: 1.2rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  overflow: hidden;
}
.eq-doll .char-potion-slot .nm {
  display: none !important;
}
.eq-doll .char-potion-slot .cnt {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffc0b0;
  text-shadow: 0 1px 2px #000;
  line-height: 1;
}

.eq-slot .eq-label,
.inv-hint {
  font-size: 0.65rem;
  color: var(--text-label);
  display: block;
  font-weight: 600;
}

.eq-slot.filled .eq-label {
  display: none;
}

.eq-slot .empty {
  color: var(--text-label);
  font-size: 1rem;
  opacity: 0.4;
  font-weight: 700;
}

/* Filled slots: default grey border; rarity classes override color */
.eq-slot.filled,
.inv-slot.filled,
.eq-doll .doll-slot.filled,
.eq-doll .char-potion-slot.filled {
  border-style: solid;
  border-width: 1px;
  border-color: #6a6868;
  background: linear-gradient(165deg, rgba(28, 12, 10, 0.98), rgba(10, 4, 4, 0.99));
}

.eq-slot .ico,
.inv-slot .ico {
  font-size: 1.1rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.eq-doll .doll-slot .ico {
  margin-right: 0;
}

/* Never show name under bag/equip icons — hover tooltip only */
.eq-slot .nm,
.inv-slot .nm {
  display: none !important;
}

/* Item PNG icons — fill the slot; no CSS frame */
.item-ico-img,
.eq-slot .item-ico-img,
.inv-slot .item-ico-img,
.loot-icon .item-ico-img,
.tt-name .item-ico-img {
  width: 96%;
  height: 96%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  image-rendering: auto;
  vertical-align: middle;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85));
  pointer-events: none;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Equip doll icons stay inside the fixed slot box */
.eq-doll .doll-slot .item-ico-img,
.eq-doll .char-potion-slot .item-ico-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Bag slots: same fixed size as equipment doll slots (80×80 in inv panel) */
.inv-slot {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  min-width: 80px;
  max-width: 80px;
  min-height: 80px;
  max-height: 80px;
  aspect-ratio: 1;
  padding: 0.15rem;
  flex-shrink: 0;
}

.inv-slot .ico {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.inv-slot .item-ico-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
}

.shop-row .item-ico-img,
.trade-item .item-ico-img {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain !important;
  flex-shrink: 0;
}

.tt-name .item-ico-img {
  width: 32px;
  height: 32px;
  margin-right: 0.4rem;
}

.loot-icon .item-ico-img,
.loot-icon-img {
  width: 40px;
  height: 40px;
}

.item-ico-fallback,
.ico.empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  text-align: center;
  opacity: 0.4;
  color: var(--text-label);
  font-size: 1.1rem;
  font-weight: 700;
}

/* Empty equipment slots use grey borders (#5a5858 on .eq-slot / .doll-slot).
   Filled slots get rarity border via .filled.r-* rules below. */

.char-inner {
  width: min(900px, 96vw);
}

.sheet-inner {
  width: min(640px, 96vw);
}

.sheet-body {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 1rem;
  align-items: start;
}

.sheet-preview-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.sheet-preview {
  min-height: 280px;
  height: 300px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #5a2820;
  box-shadow: inset 0 0 20px rgba(40, 0, 0, 0.4);
  overflow: hidden;
  flex-shrink: 0;
}

.sheet-preview .eq-preview {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.char-class-line {
  margin-top: 0.15rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-value);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Attributes stack under character preview (left column) */
.char-attrs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.char-attrs .attr-row,
.char-attrs .attr-points {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(90, 50, 40, 0.35);
  border-radius: 4px;
  font-size: 0.9rem;
}

.char-attrs .attr-hint {
  font-size: 0.75rem;
  color: var(--muted, #9a8a78);
  text-align: center;
  padding: 0 0.2rem 0.15rem;
}

.char-attrs .attr-val {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.char-attrs .attr-row[data-stat-tip],
.char-attrs .attr-points[data-stat-tip] {
  cursor: help;
}

.inv-inner {
  width: min(980px, 96vw);
}

.inv-doll-center {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 240px;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  padding: 0.15rem 0;
}

.inv-panel .eq-doll .doll-slot,
.inv-panel .eq-doll .char-potion-slot.area-potion {
  width: 80px;
  height: 80px;
  min-width: 80px;
  max-width: 80px;
  min-height: 80px;
  max-height: 80px;
}

.inv-panel .eq-doll {
  grid-template-rows: 88px minmax(240px, 1.25fr) 88px 88px;
}

.quest-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 2, 10, 0.62);
  pointer-events: auto;
}

.quest-panel.hidden {
  display: none;
}

.quest-inner {
  width: min(480px, 94vw);
  padding: 1.1rem 1.25rem 1.25rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(22, 14, 36, 0.96), rgba(10, 6, 18, 0.98));
  border: 1px solid rgba(160, 130, 220, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.quest-inner-wide {
  width: min(720px, 96vw);
  max-height: min(82vh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.quest-tabs {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}

.quest-tab {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(196, 160, 86, 0.28);
  background: rgba(8, 4, 4, 0.45);
  color: rgba(220, 200, 170, 0.8);
  font: inherit;
  cursor: pointer;
}

.quest-tab.on {
  border-color: rgba(196, 160, 86, 0.7);
  color: #f0e0c0;
  background: rgba(40, 22, 12, 0.7);
}

.quest-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(62vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
}

.quest-current {
  padding: 0.75rem 0.85rem 0.9rem;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(196, 160, 86, 0.35);
  background: rgba(18, 8, 6, 0.55);
}

.quest-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196, 160, 86, 0.85);
  margin-bottom: 0.25rem;
}

.quest-current h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: #f3e6c8;
}

.quest-obj {
  margin: 0 0 0.45rem;
  color: #e8d0a0;
}

.quest-hint,
.quest-journal {
  margin: 0.35rem 0 0;
  color: rgba(210, 195, 175, 0.88);
  line-height: 1.45;
  white-space: pre-wrap;
}

.quest-hint {
  color: rgba(180, 160, 130, 0.85);
  font-size: 0.92rem;
}

.quest-act {
  margin: 0.55rem 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(196, 160, 86, 0.7);
}

.quest-step {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.28rem 0.1rem;
  color: rgba(200, 188, 170, 0.78);
  font-size: 0.92rem;
}

.quest-step.done {
  color: rgba(140, 160, 130, 0.75);
  text-decoration: line-through;
  text-decoration-color: rgba(140, 160, 130, 0.35);
}

.quest-step.current {
  color: #f0e0c0;
}

.quest-log-item {
  padding: 0.65rem 0.15rem 0.75rem;
  border-bottom: 1px solid rgba(138, 98, 48, 0.22);
}

.quest-log-item h4 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  color: #e8d4a8;
}

.quest-tracker {
  margin-top: 0.45rem;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.55rem 0.5rem;
  border: 1px solid rgba(196, 160, 86, 0.32);
  background: rgba(8, 3, 3, 0.72);
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.quest-tracker.hidden {
  display: none;
}

.quest-tracker:hover {
  border-color: rgba(196, 160, 86, 0.7);
}

.qt-kicker {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196, 160, 86, 0.8);
}

.qt-title {
  font-size: 0.88rem;
  color: #f0e0c0;
  margin: 0.1rem 0;
}

.qt-obj {
  font-size: 0.78rem;
  color: rgba(210, 190, 160, 0.88);
  line-height: 1.3;
}

.qt-prog {
  margin-top: 0.22rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #e8c86a;
}

.qt-floor {
  margin-top: 0.16rem;
  font-size: 0.72rem;
  color: rgba(220, 170, 140, 0.92);
}

.qt-prog.hidden,
.qt-floor.hidden {
  display: none;
}

.quest-prog {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #e8c86a;
}

.quest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.quest-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.quest-empty {
  text-align: center;
  padding: 1.25rem 0.5rem 0.5rem;
  color: rgba(220, 210, 240, 0.88);
}

.quest-empty-ico {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(160, 130, 220, 0.35);
  margin-bottom: 0.75rem;
}

.quest-empty .muted {
  color: rgba(160, 150, 180, 0.75);
  font-size: 0.85rem;
}

.char-left {
  min-width: 0;
}

@media (max-width: 700px) {
  .sheet-body {
    grid-template-columns: 1fr;
  }
  .hud-menu {
    bottom: 7.5rem;
    right: 0.4rem;
    left: auto;
    max-width: none;
    gap: 0.22rem;
    padding: 0.28rem 0.32rem;
  }
  .hud-icon-btn {
    width: 46px;
    height: 46px;
  }
  .hud-icon-btn img {
    width: 34px;
    height: 34px;
  }
  .hud-icon-btn .hud-icon-emoji {
    font-size: 1.15rem;
  }
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  gap: 0.45rem;
  justify-content: start;
  align-content: start;
}

.inv-slot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.inv-slot:disabled {
  opacity: 0.4;
  cursor: default;
}

.inv-slot.empty {
  opacity: 1;
  cursor: default;
  background-image: none !important;
  background-color: #080404;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(38, 26, 20, 0.7);
}

.inv-slot .inv-slot-empty {
  display: block;
  width: 68%;
  height: 68%;
  border: 1px dashed rgba(90, 70, 50, 0.22);
  background: rgba(0, 0, 0, 0.22);
  border-radius: 2px;
  pointer-events: none;
}

/* Rarity = border color only (same 1px weight, no extra inset rings) */
.r-common { border-color: #6a6868 !important; }
.r-basic { border-color: #6a6868 !important; }
.r-uncommon,
.r-magic { border-color: #3d8fd4 !important; }
.r-rare { border-color: #c9a24a !important; }
.r-epic,
.r-unique,
.r-legendary { border-color: #d14a0f !important; }
.r-set { border-color: #4a9a52 !important; }

.inv-hint {
  margin: 0.5rem 0 0;
}

/* Waypoint travel panel + Helion world map */
.waypoint-panel .shop-inner {
  max-width: min(560px, 96vw);
}
.world-map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.45rem;
  border-radius: 12px;
  border: 1px solid rgba(120, 160, 255, 0.28);
  background-color: rgba(8, 10, 18, 0.92);
  background-image:
    linear-gradient(180deg, rgba(8, 10, 18, 0.55), rgba(8, 10, 18, 0.82)),
    url('/assets/world/helion-map.jpg');
  background-size: cover;
  background-position: center;
}
.world-map-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.25rem 0.4rem;
  border-radius: 10px;
  border: 1px solid rgba(100, 120, 160, 0.35);
  background: rgba(20, 28, 48, 0.65);
  color: #c8d4f0;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s;
  min-height: 4.5rem;
}
.world-map-node:hover:not(:disabled) {
  border-color: rgba(160, 200, 255, 0.7);
  box-shadow: 0 0 12px rgba(80, 140, 255, 0.2);
  transform: translateY(-1px);
}
.world-map-node:disabled,
.world-map-node.locked {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.45);
}
.world-map-node.here {
  border-color: rgba(255, 210, 100, 0.75);
  box-shadow: inset 0 0 14px rgba(255, 200, 80, 0.12);
}
.world-map-node.unlocked:not(.here) {
  border-color: rgba(100, 200, 140, 0.45);
}
.world-map-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #6a80a8;
  box-shadow: 0 0 8px rgba(100, 140, 200, 0.4);
}
.world-map-node.unlocked .world-map-dot {
  background: #5ecf8a;
  box-shadow: 0 0 10px rgba(80, 220, 140, 0.55);
}
.world-map-node.here .world-map-dot {
  background: #ffd060;
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.7);
}
.world-map-node.locked .world-map-dot {
  background: #5a4850;
}
.world-map-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.15;
}
.world-map-band {
  font-size: 0.62rem;
  color: rgba(170, 190, 230, 0.7);
}
.wp-continent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.55rem 0 0.3rem;
  padding: 0.2rem 0.15rem;
  border-bottom: 1px solid rgba(100, 130, 180, 0.25);
  color: #a8c0e8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wp-continent-head .wp-band {
  font-weight: 500;
  font-size: 0.65rem;
  color: rgba(160, 180, 220, 0.65);
  text-transform: none;
  letter-spacing: 0;
}
.wp-continent-head.locked {
  opacity: 0.5;
  color: rgba(180, 150, 150, 0.85);
}
.waypoint-panel .waypoint-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: min(42vh, 360px);
  overflow-y: auto;
  padding: 0.15rem 0.1rem 0.35rem;
}
.waypoint-dest.wp-hub {
  border-color: rgba(140, 200, 160, 0.4);
  background: linear-gradient(180deg, rgba(28, 48, 40, 0.75), rgba(12, 20, 18, 0.9));
}
.waypoint-dest.wp-floor {
  border-color: rgba(120, 160, 255, 0.3);
}

.waypoint-dest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(120, 160, 255, 0.35);
  background: linear-gradient(180deg, rgba(30, 40, 70, 0.75), rgba(12, 16, 32, 0.9));
  color: #e8eeff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s;
}

.waypoint-dest:hover:not(:disabled) {
  border-color: rgba(160, 200, 255, 0.75);
  box-shadow: 0 0 14px rgba(80, 140, 255, 0.25);
  transform: translateY(-1px);
}

.waypoint-dest:disabled,
.waypoint-dest.locked {
  opacity: 0.48;
  cursor: not-allowed;
  border-color: rgba(100, 100, 120, 0.35);
}

.waypoint-dest.here {
  border-color: rgba(255, 210, 100, 0.65);
  box-shadow: inset 0 0 12px rgba(255, 200, 80, 0.12);
}

.waypoint-dest .wp-name {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.waypoint-dest .wp-meta {
  font-size: 0.72rem;
  color: rgba(180, 200, 255, 0.75);
}

.waypoint-dest .wp-status {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fd4ff;
}

.waypoint-dest.locked .wp-status {
  color: rgba(200, 160, 160, 0.85);
}

.waypoint-dest.here .wp-status {
  color: #ffd060;
}

/* Town stash (shares shop-panel layout) */
.stash-panel .stash-sub {
  margin: 0 0 0.65rem;
  color: rgba(220, 200, 150, 0.85);
}
.stash-count {
  font-weight: 600;
  font-size: 0.78rem;
  color: rgba(200, 180, 255, 0.75);
  margin-left: 0.35rem;
}
.stash-grid .shop-row .buy-lbl {
  color: #d4c080;
}
.stash-grid .shop-row.deposit-row .buy-lbl {
  color: #8ec8ff;
}
.stash-grid .shop-row.withdraw-row .buy-lbl {
  color: #a8e08a;
}

/* Crypt merchant shop */
.shop-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 2, 10, 0.55);
  pointer-events: auto;
}

.shop-panel .shop-inner,
.shop-panel .shop-row,
.shop-panel button {
  pointer-events: auto;
  cursor: pointer;
}

.shop-panel.hidden {
  display: none;
}

.shop-inner {
  width: min(1080px, 97vw);
  max-height: min(86vh, 820px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.15rem 1.2rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.shop-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.shop-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 720px) {
  .shop-columns {
    grid-template-columns: 1fr;
  }
}

.shop-col-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent2);
}

.shop-row.sell-row .buy-lbl {
  color: var(--gold);
}

.shop-row.sell-row:hover:not(:disabled) {
  border-color: var(--gold);
}

.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.shop-header h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.shop-gold {
  margin: 0.25rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.shop-gold strong {
  color: var(--gold);
  font-size: 1.05rem;
}

.shop-hint {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.shop-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  max-height: min(56vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.shop-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) max-content;
  gap: 0.7rem;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  text-align: left;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  min-width: 0;
  overflow: visible;
}

.shop-row:hover:not(:disabled) {
  filter: brightness(1.12);
  border-color: var(--accent2);
}

.shop-row:disabled {
  opacity: 0.4;
  cursor: default;
}

.shop-row .shop-ico,
.shop-row .ico {
  width: 68px;
  height: 68px;
  min-width: 68px;
  max-width: 68px;
  min-height: 68px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  font-size: 1.25rem;
  text-align: center;
  border: 1px solid rgba(196, 160, 86, 0.28);
  background: rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
  padding: 6px;
}

.shop-row .shop-ico .item-ico-img,
.shop-row .shop-ico img,
.shop-row .item-ico-img,
.trade-item .item-ico-img {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain !important;
  flex-shrink: 0;
  display: block;
}

.shop-row .shop-meta,
.shop-row .meta {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  overflow: hidden;
}

.shop-row .nm {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.1rem;
  flex-shrink: 0;
  min-width: 4.6rem;
  padding: 0.15rem 0.35rem 0.2rem;
  border: 1px solid rgba(196, 160, 86, 0.28);
  background: rgba(12, 6, 4, 0.55);
}

.shop-row .sub {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-row .price {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.shop-row .buy-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent2);
}

/* Player trade */
.trade-panel {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 2, 12, 0.65);
  pointer-events: auto;
}
.trade-panel.hidden {
  display: none;
}
.trade-inner {
  width: min(720px, 94vw);
  max-height: min(88vh, 720px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.15rem 1.2rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.trade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.trade-header h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}
.trade-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .trade-columns {
    grid-template-columns: 1fr;
  }
}
.trade-col-title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.trade-gold-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
}
.trade-gold-row input[type="number"] {
  width: 5.5rem;
  margin: 0;
  padding: 0.35rem 0.45rem;
}
.trade-slots,
.trade-bag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2.5rem;
  margin-bottom: 0.55rem;
  padding: 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.28);
}
.trade-bag {
  max-height: 160px;
  overflow-y: auto;
}
.trade-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size: 0.72rem;
  cursor: pointer;
}
.trade-item.bag.offered {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.trade-item .ico {
  font-size: 0.95rem;
}
.trade-item .nm {
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trade-empty {
  font-size: 0.78rem;
  padding: 0.25rem;
}
.trade-lock-btn {
  width: 100%;
  margin-top: 0.35rem;
}
.trade-lock-btn.locked {
  background: rgba(60, 140, 80, 0.85);
}
.trade-status {
  font-size: 0.78rem;
  margin: 0.35rem 0 0;
}
.trade-status.ready {
  color: var(--good, #5dce7a);
}
.trade-invite {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  background: rgba(20, 12, 30, 0.95);
  border: 1px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.trade-invite.hidden {
  display: none;
}
.trade-invite button {
  padding: 0.4rem 0.65rem;
  font-size: 0.75rem;
}

/* Options / in-game menu (sim is not paused) */
.options-panel {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 0, 0, 0.72);
  pointer-events: auto;
}

.options-panel.hidden {
  display: none;
}

.options-inner {
  width: min(560px, 92vw);
  height: min(640px, 86vh);
  min-height: min(640px, 86vh);
  max-height: min(640px, 86vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: var(--frame-border) solid transparent;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: var(--frame-border);
  border-image-repeat: stretch;
  border-radius: 0;
  background-color: #120808;
  background-image: linear-gradient(165deg, rgba(14, 6, 6, 0.97), rgba(6, 2, 2, 0.98));
  background-clip: border-box;
  padding: var(--panel-pad);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.85);
  outline: none;
}

.options-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.options-header h2 {
  margin: 0;
  text-align: left;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
}

.options-section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(90, 70, 120, 0.35);
}

.options-section:last-of-type {
  border-bottom: none;
}

.options-section h3 {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent2);
}

.opt-row {
  display: grid;
  grid-template-columns: 1fr minmax(100px, 1.2fr) 3rem;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.45rem;
  font-size: 0.88rem;
  color: var(--text);
}

.opt-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.opt-row select {
  width: 100%;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font: inherit;
}

.opt-val {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.opt-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--text);
}

.opt-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

.controls-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
}

.controls-list kbd {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 0.72rem;
  font-family: inherit;
  margin: 0 0.1rem;
}

.options-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.options-actions .hidden {
  display: none !important;
}

.menu-view.hidden {
  display: none !important;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.menu-nav-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

#menu-root .options-controls {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Tester debug overlay — Shift+Alt+/ (testers / admins only) */
.debug-overlay {
  position: fixed;
  left: 0.55rem;
  top: 0.55rem;
  z-index: 80;
  width: min(360px, 46vw);
  max-height: min(78vh, 720px);
  overflow: auto;
  padding: 0.55rem 0.65rem 0.7rem;
  border-radius: 0;
  border: 1px solid rgba(196, 160, 86, 0.38);
  background:
    linear-gradient(165deg, rgba(18, 10, 8, 0.94), rgba(8, 3, 3, 0.96));
  color: #e8d8c0;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.35;
  pointer-events: auto;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(196, 160, 86, 0.08);
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 160, 86, 0.4) rgba(0, 0, 0, 0.3);
}

.debug-overlay.hidden {
  display: none;
}

.debug-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}

.debug-title {
  font-family: var(--font-ui, Cinzel, serif);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #e8d090;
  font-size: 0.78rem;
}

.debug-role {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1208;
  background: linear-gradient(180deg, #e8d090, #c4a056);
  padding: 0.08rem 0.35rem;
  font-weight: 800;
}

.debug-hotkey {
  margin-left: auto;
  font-size: 0.55rem;
  color: rgba(232, 208, 144, 0.7);
  border: 1px solid rgba(196, 160, 86, 0.3);
  padding: 0.08rem 0.28rem;
}

.debug-body {
  margin: 0 0 0.45rem;
  padding: 0.35rem 0.4rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: #c8b8a0;
  font: inherit;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(196, 160, 86, 0.15);
  max-height: 7.6rem;
  overflow: auto;
}

.debug-grid {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dbg-sec h3 {
  margin: 0 0 0.28rem;
  font-family: var(--font-ui, Cinzel, serif);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c4a056;
}

.dbg-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.22rem;
}

.dbg-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: #e8d8c0;
  font-weight: 600;
  margin: 0 0.55rem 0.28rem 0;
}

.dbg-check input {
  accent-color: #c4a056;
}

.debug-overlay input[type="number"] {
  width: 3.4rem;
  padding: 0.18rem 0.28rem;
  border-radius: 0;
  border: 1px solid rgba(196, 160, 86, 0.35);
  background: rgba(0, 0, 0, 0.5);
  color: #e8d090;
  font: inherit;
}

.debug-overlay button {
  padding: 0.22rem 0.42rem;
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  border-radius: 0;
  border: 1px solid rgba(196, 160, 86, 0.4);
  background: rgba(40, 22, 14, 0.9);
  color: #f0e4d4;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}

.debug-overlay button:hover {
  border-color: #c4a056;
  filter: brightness(1.12);
}

/* Item hover tooltip — above shop (50), options (55), char panel, HUD */
.item-tooltip {
  position: fixed;
  z-index: 70;
  min-width: 180px;
  max-width: 260px;
  padding: 0.7rem 0.8rem;
  border-radius: 0;
  border: var(--frame-border) solid transparent;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: var(--frame-border);
  border-image-repeat: stretch;
  background-color: #120808;
  background-image: linear-gradient(165deg, rgba(14, 6, 6, 0.97), rgba(6, 2, 2, 0.98));
  background-clip: border-box;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.8);
  outline: none;
  pointer-events: none;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text);
}

/* Second tooltip: currently equipped item (to the right of bag hover) */
.item-tooltip.item-tooltip-compare {
  border-color: rgba(255, 200, 100, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 180, 60, 0.12);
}

.item-tooltip .tt-compare-badge {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1208;
  background: linear-gradient(180deg, #ffd060, #e0a030);
}

.item-tooltip .tt-compare-deltas {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 200, 100, 0.2);
}

.item-tooltip .tt-compare-stats {
  font-size: 0.72rem;
  color: rgba(200, 195, 220, 0.85);
}

.item-tooltip .tt-compare-stats.muted {
  color: var(--muted);
  font-style: italic;
}

.item-tooltip .tt-delta b {
  font-variant-numeric: tabular-nums;
}

.item-tooltip .tt-delta.better b {
  color: #6ee7a0;
}

.item-tooltip .tt-delta.worse b {
  color: #ff7a7a;
}

.item-tooltip .tt-delta.same b {
  color: rgba(190, 185, 210, 0.85);
}

.item-tooltip .tt-name {
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.item-tooltip .tt-meta {
  color: var(--text-label);
  font-size: 0.82rem;
  margin-bottom: 0.45rem;
  text-transform: capitalize;
}

/* Random rolled affixes — separated from base weapon/armor lines */
.item-tooltip .tt-suffix-block {
  margin-top: 0.4rem;
  margin-bottom: 0.15rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  border-top: 1px solid rgba(140, 120, 100, 0.35);
  border-bottom: 1px solid rgba(140, 120, 100, 0.35);
}

.item-tooltip .tt-suffix-title {
  margin-bottom: 0.15rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(180, 160, 120, 0.85);
  font-weight: 700;
}

.item-tooltip .tt-suffix-block .tt-row b {
  color: #c8b8a0;
}

.item-tooltip .tt-meta-block {
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(90, 80, 100, 0.28);
}

/* Suffixes already have a bottom line — don't double-up before meta */
.item-tooltip .tt-suffix-block + .tt-meta-block {
  margin-top: 0.2rem;
  padding-top: 0.15rem;
  border-top: none;
}

.item-tooltip .tt-meta-block .tt-row {
  font-size: 0.82rem;
  padding: 0.1rem 0;
}

.item-tooltip .tt-meta-block .tt-row b {
  font-weight: 600;
  color: rgba(190, 185, 200, 0.9);
}

.item-tooltip .tt-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.18rem 0;
  font-size: 0.9rem;
}

.item-tooltip .tt-row span {
  color: var(--text-label);
  font-weight: 600;
}

.item-tooltip .tt-row b {
  font-weight: 700;
  color: var(--text-value);
}

.item-tooltip .tt-set-title {
  margin: 0.4rem 0 0.15rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #66bb6a;
}

.item-tooltip .tt-row.tt-set span,
.item-tooltip .tt-row.tt-set b {
  color: #7a7a7a;
}

.item-tooltip .tt-row.tt-set.active span,
.item-tooltip .tt-row.tt-set.active b {
  color: #f4f4f4;
}

.item-tooltip .tt-trade-note {
  font-size: 0.72rem;
  margin: 0.25rem 0 0.35rem;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  background: rgba(100, 140, 200, 0.12);
  color: #9ec0ff;
  border: 1px solid rgba(120, 160, 220, 0.25);
}
.item-tooltip .tt-trade-note.tt-trade-bound {
  background: rgba(160, 100, 60, 0.15);
  color: #e0a878;
  border-color: rgba(180, 120, 70, 0.3);
}

.item-tooltip .tt-req-title {
  margin-top: 0.35rem;
  margin-bottom: 0.1rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Requirements — compact type; white if met, red if not */
.item-tooltip .tt-row.tt-req {
  font-size: 0.68rem;
  padding: 0.06rem 0;
  line-height: 1.25;
  gap: 0.45rem;
}

.item-tooltip .tt-req span {
  font-size: 0.64rem;
  font-weight: 500;
  color: rgba(180, 170, 160, 0.85);
}

.item-tooltip .tt-req b {
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.item-tooltip .tt-req.met span {
  color: rgba(200, 195, 185, 0.9);
}

.item-tooltip .tt-req.met b {
  color: #f2efe8;
}

.item-tooltip .tt-req.unmet span {
  color: rgba(200, 120, 120, 0.9);
}

.item-tooltip .tt-req.unmet b {
  color: #ff4a4a;
}

.item-tooltip .tt-req .tt-req-have {
  font-size: 0.6rem;
  font-weight: 600;
  opacity: 0.9;
  margin-left: 0.15rem;
}

.inv-slot.req-blocked {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.inv-slot.req-blocked::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 80, 80, 0.35);
  pointer-events: none;
}

.item-tooltip .tt-desc {
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(220, 210, 240, 0.88);
  margin: 0.35rem 0 0.55rem;
  max-width: 240px;
}

.item-tooltip.skill-tooltip {
  border-color: rgba(140, 120, 220, 0.55);
  min-width: 180px;
  max-width: 280px;
}

.item-tooltip.skill-tooltip .tt-name {
  color: #c8b8ff;
}

.item-tooltip.skill-tooltip.skill-locked .tt-name {
  color: #9a90a8;
}

.item-tooltip .tt-hint {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  color: var(--muted);
}

.item-tooltip .tt-range {
  font-weight: 500;
  font-size: 0.85em;
  color: rgba(180, 175, 200, 0.75);
  margin-left: 0.15rem;
}

.item-tooltip.r-basic .tt-name,
.item-tooltip.r-common .tt-name { color: #e0e0e4; }
.item-tooltip.r-magic .tt-name,
.item-tooltip.r-uncommon .tt-name { color: #64b5f6; }
.item-tooltip.r-rare .tt-name { color: #ffd54f; }
.item-tooltip.r-unique .tt-name,
.item-tooltip.r-epic .tt-name,
.item-tooltip.r-legendary .tt-name { color: #d14a0f; }
.item-tooltip.r-set .tt-name { color: #66bb6a; }

/* Inventory / equip slot rarity border (matches item rarity color; wins over slot accents) */
.inv-slot.filled.r-basic,
.eq-slot.filled.r-basic,
.eq-slot.doll-slot.filled.r-basic,
.eq-doll .doll-slot.filled.r-basic,
.eq-doll .doll-slot.area-weapon.filled.r-basic,
.eq-doll .doll-slot.area-offhand.filled.r-basic,
.inv-slot.filled.r-common,
.eq-slot.filled.r-common,
.eq-slot.doll-slot.filled.r-common,
.eq-doll .doll-slot.filled.r-common,
.eq-doll .doll-slot.area-weapon.filled.r-common,
.eq-doll .doll-slot.area-offhand.filled.r-common {
  border-color: #8a8888 !important;
  box-shadow: 0 0 0 1px rgba(138, 136, 136, 0.25), inset 0 0 10px rgba(0, 0, 0, 0.4);
}
.inv-slot.filled.r-magic,
.eq-slot.filled.r-magic,
.eq-slot.doll-slot.filled.r-magic,
.eq-doll .doll-slot.filled.r-magic,
.eq-doll .doll-slot.area-weapon.filled.r-magic,
.eq-doll .doll-slot.area-offhand.filled.r-magic,
.inv-slot.filled.r-uncommon,
.eq-slot.filled.r-uncommon,
.eq-slot.doll-slot.filled.r-uncommon,
.eq-doll .doll-slot.filled.r-uncommon,
.eq-doll .doll-slot.area-weapon.filled.r-uncommon,
.eq-doll .doll-slot.area-offhand.filled.r-uncommon {
  border-color: #42a5f5 !important;
  box-shadow: 0 0 8px rgba(66, 165, 245, 0.35), inset 0 0 10px rgba(0, 0, 0, 0.4);
}
.inv-slot.filled.r-rare,
.eq-slot.filled.r-rare,
.eq-slot.doll-slot.filled.r-rare,
.eq-doll .doll-slot.filled.r-rare,
.eq-doll .doll-slot.area-weapon.filled.r-rare,
.eq-doll .doll-slot.area-offhand.filled.r-rare {
  border-color: #ffd54f !important;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.35), inset 0 0 10px rgba(0, 0, 0, 0.4);
}
.inv-slot.filled.r-unique,
.eq-slot.filled.r-unique,
.eq-slot.doll-slot.filled.r-unique,
.eq-doll .doll-slot.filled.r-unique,
.eq-doll .doll-slot.area-weapon.filled.r-unique,
.eq-doll .doll-slot.area-offhand.filled.r-unique,
.inv-slot.filled.r-epic,
.eq-slot.filled.r-epic,
.eq-slot.doll-slot.filled.r-epic,
.eq-doll .doll-slot.filled.r-epic,
.eq-doll .doll-slot.area-weapon.filled.r-epic,
.eq-doll .doll-slot.area-offhand.filled.r-epic,
.inv-slot.filled.r-legendary,
.eq-slot.filled.r-legendary,
.eq-slot.doll-slot.filled.r-legendary,
.eq-doll .doll-slot.filled.r-legendary,
.eq-doll .doll-slot.area-weapon.filled.r-legendary,
.eq-doll .doll-slot.area-offhand.filled.r-legendary {
  border-color: #d14a0f !important;
  box-shadow: 0 0 8px rgba(209, 74, 15, 0.45), inset 0 0 10px rgba(0, 0, 0, 0.4);
}
.inv-slot.filled.r-set,
.eq-slot.filled.r-set,
.eq-slot.doll-slot.filled.r-set,
.eq-doll .doll-slot.filled.r-set,
.eq-doll .doll-slot.area-weapon.filled.r-set,
.eq-doll .doll-slot.area-offhand.filled.r-set {
  border-color: #66bb6a !important;
  box-shadow: 0 0 8px rgba(102, 187, 106, 0.35), inset 0 0 10px rgba(0, 0, 0, 0.4);
}


/* �� Achievements panel �� */
.achievements-panel {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
}
.achievements-panel:not(.hidden) {
  pointer-events: auto;
}
.achievements-panel.hidden {
  display: none;
}
.achievements-inner {
  width: min(720px, 92vw);
  max-height: min(78vh, 640px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--panel-pad);
  border: var(--frame-border) solid transparent;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: var(--frame-border);
  background: linear-gradient(180deg, rgba(14, 6, 8, 0.96), rgba(6, 2, 4, 0.98));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75);
}
.achievements-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.achievements-header h2 {
  margin: 0;
  font-family: var(--font-display);
  flex: 1;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
}
.achievements-count {
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 700;
}
.achievements-hint {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
}
.achievements-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0.85rem;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.achievements-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.achievements-col h3 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.achievements-list,
.titles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(52vh, 440px);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.ach-row,
.title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.35);
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
  cursor: default;
}
.title-row {
  cursor: pointer;
}
.title-row:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.title-row.active {
  border-color: rgba(201, 162, 74, 0.55);
  box-shadow: inset 0 0 12px rgba(201, 162, 74, 0.12);
}
.ach-row.locked {
  opacity: 0.5;
  filter: grayscale(0.4);
}
.ach-row .ach-ico {
  font-size: 1.2rem;
  line-height: 1;
  width: 1.5rem;
  text-align: center;
}
.ach-row .ach-body,
.title-row .title-body {
  flex: 1;
  min-width: 0;
}
.ach-row .ach-name,
.title-row .title-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-value);
}
.ach-row .ach-desc,
.title-row .title-desc {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.1rem;
}
.achievements-clear-title {
  margin-top: 0.5rem;
  align-self: flex-start;
}
@media (max-width: 640px) {
  .achievements-cols {
    grid-template-columns: 1fr;
  }
}

/* Specialty shop dialogue + gamble rows */
.shop-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}
.shop-subtitle {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.shop-dialogue {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.4;
  color: #d8c8b0;
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid rgba(180, 100, 60, 0.55);
  border-radius: 0 4px 4px 0;
}
.shop-dialogue.hidden {
  display: none;
}
.shop-row.shop-gamble {
  border-color: rgba(180, 160, 80, 0.45);
  background: linear-gradient(90deg, rgba(60, 50, 20, 0.35), rgba(0, 0, 0, 0.35));
}
.shop-row.shop-gamble .buy-lbl {
  color: #e8c86a;
  font-weight: 700;
}
.shop-row.shop-gamble .nm {
  color: #f0e0a8;
}

/* Admin account management */
.admin-panel {
  color-scheme: dark;
  position: fixed;
  inset: 0;
  z-index: 58;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 0, 0, 0.76);
  pointer-events: auto;
}
.admin-panel.hidden {
  display: none;
}
.admin-inner {
  width: min(860px, 94vw);
  max-height: min(88vh, 760px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: var(--frame-border) solid transparent;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: var(--frame-border);
  background-color: #120808;
  background-image: linear-gradient(165deg, rgba(14, 6, 6, 0.97), rgba(6, 2, 2, 0.98));
  padding: var(--panel-pad);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.85);
}
.admin-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}
.admin-header-text {
  flex: 1;
  min-width: 0;
}
.admin-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
}
.admin-sub {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
}
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
}
.admin-toolbar input {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.admin-detail select,
.admin-detail input {
  margin-bottom: 0.45rem;
}
.admin-detail select,
#admin-role {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 2rem 0.5rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background-color: #1a0c0c;
  background-image: linear-gradient(45deg, transparent 50%, #e8d8c0 50%),
    linear-gradient(135deg, #e8d8c0 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 3px), calc(100% - 9px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: #fff6ec;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
  cursor: pointer;
}
.admin-detail select:focus,
#admin-role:focus {
  outline: 1px solid var(--accent);
  border-color: var(--accent);
}
.admin-detail select option,
#admin-role option {
  background-color: #1a1010;
  color: #fff6ec;
}
.admin-count {
  font-size: 0.78rem;
  color: var(--gold);
  white-space: nowrap;
}
.admin-notice {
  margin: 0 0 0.45rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
  background: rgba(80, 20, 20, 0.45);
  border-left: 3px solid var(--accent2);
}
.admin-notice.ok {
  background: rgba(24, 48, 24, 0.45);
  border-left-color: var(--good);
}
.admin-cols {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.15fr);
  gap: 0.75rem;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.admin-list-col,
.admin-detail-col {
  min-height: 0;
  overflow: auto;
}
.admin-account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.admin-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  text-align: left;
  padding: 0.42rem 0.5rem;
  border: 1px solid rgba(90, 40, 40, 0.45);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.admin-row:hover {
  border-color: var(--border-lit);
  background: rgba(40, 12, 12, 0.55);
}
.admin-row.selected {
  border-color: var(--gold);
  background: rgba(60, 28, 12, 0.55);
}
.admin-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.admin-row-name {
  font-weight: 700;
  letter-spacing: 0.03em;
}
.admin-row-sub {
  font-size: 0.72rem;
  color: var(--muted);
}
.admin-role-chip {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.35rem;
  border: 1px solid rgba(160, 120, 60, 0.45);
  color: var(--gold);
  flex-shrink: 0;
}
.admin-role-chip.admin {
  color: #f0c060;
  border-color: rgba(220, 160, 50, 0.7);
}
.admin-role-chip.tester {
  color: #8ec8ff;
  border-color: rgba(90, 150, 220, 0.55);
}
.admin-role-chip.player {
  color: var(--muted);
  border-color: rgba(120, 100, 90, 0.4);
}
.admin-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #4a3838;
  flex-shrink: 0;
}
.admin-dot.on {
  background: #5aaf4a;
  box-shadow: 0 0 6px rgba(90, 175, 74, 0.7);
}
.admin-detail-empty {
  padding: 1.2rem 0.4rem;
}
.admin-detail h3 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
}
.admin-meta {
  margin: 0 0 0.7rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.7rem;
}
.admin-meta div {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.admin-meta dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.admin-meta dd {
  margin: 0;
  color: var(--text-value);
}
.admin-heroes h4 {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-hero-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 0.82rem;
}
.admin-hero-list li {
  padding: 0.18rem 0;
  border-bottom: 1px solid rgba(80, 50, 50, 0.35);
}
.admin-role-row select {
  flex: 1;
  min-width: 0;
  width: auto;
}
.admin-danger {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(140, 40, 40, 0.45);
}
.admin-danger .danger {
  margin-top: 0.15rem;
}
@media (max-width: 700px) {
  .admin-cols {
    grid-template-columns: 1fr;
  }
  .admin-list-col {
    max-height: 28vh;
  }
}

.weapon-sets {
  margin: 0.35rem 0 0.55rem;
  padding: 0.5rem 0.55rem 0.55rem;
  border: 1px solid rgba(90, 45, 35, 0.5);
  background: rgba(8, 3, 3, 0.55);
}
.weapon-set-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.weapon-set-head span:first-child {
  flex: 1;
}
.weapon-set-badge {
  font-size: 0.68rem;
  color: var(--text-value);
  letter-spacing: 0.06em;
}
.weapon-set-slots {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.35rem;
}
.weapon-set-slots .eq-slot {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
}
.skill-set-badge {
  display: none !important;
}

#menu-settings:not(.hidden),
#menu-root:not(.hidden) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.options-inner:has(#menu-root:not(.hidden)) {
  width: min(400px, 92vw);
  height: auto;
  min-height: 0;
  max-height: min(80vh, 480px);
}

.options-layout {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 0.85rem;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.options-nav {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding-right: 0.55rem;
  border-right: 1px solid rgba(138, 98, 48, 0.32);
}

.options-nav-btn {
  width: 100%;
  text-align: left;
  padding: 0.42rem 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(8, 3, 3, 0.45);
  border: 1px solid rgba(90, 60, 36, 0.45);
}

.options-nav-btn.active {
  color: #fff6ea;
  border-color: var(--bronze);
  background: rgba(60, 32, 14, 0.55);
}

.options-pane {
  min-width: 0;
  overflow: auto;
  padding-right: 0.15rem;
  flex: 1 1 auto;
}

#menu-root .options-controls {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.options-rebind-hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
}

.bind-list {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.bind-group-lbl {
  margin: 0.55rem 0 0.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
}

.bind-row {
  display: grid;
  grid-template-columns: 1fr 7.4rem;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text);
}

.bind-row button {
  min-height: 1.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.bind-row.capturing button {
  border-color: var(--bronze-hi);
  color: #fff6ea;
  box-shadow: 0 0 10px rgba(196, 160, 86, 0.35);
}

.skill-slot-mouse {
  box-shadow:
    0 0 0 1px rgba(232, 208, 144, 0.38),
    inset 0 0 10px rgba(120, 72, 18, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.55);
}

.skill-slot-lmb {
  margin-left: 0.42rem;
}

.skill-slot-mouse .skill-key {
  background: rgba(72, 36, 8, 0.82);
  border-color: rgba(232, 208, 144, 0.55);
  color: #f0dca0;
  letter-spacing: 0.04em;
}

.skill-bar-edit-slot.mouse-slot {
  border-color: rgba(232, 208, 144, 0.5);
  box-shadow: inset 0 0 10px rgba(120, 72, 18, 0.16);
}

.social-panel {
  position: absolute;
  inset: 0;
  z-index: 41;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
}

.social-panel:not(.hidden) {
  pointer-events: auto;
}

.social-panel.hidden {
  display: none;
}

.report-panel .social-inner {
  overflow: auto;
}

.report-panel .social-header {
  position: relative;
}

.report-panel .social-header .tab-dot {
  position: static;
  flex: 0 0 auto;
  margin-right: 0.15rem;
}

.social-inner {
  width: min(860px, 94vw);
  max-height: min(82vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--panel-pad);
  border: var(--frame-border) solid transparent;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: var(--frame-border);
  background: linear-gradient(180deg, rgba(14, 6, 8, 0.96), rgba(6, 2, 4, 0.98));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75);
}

.social-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.social-header h2 {
  margin: 0;
  font-family: var(--font-display);
  flex: 1;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
}

.social-tabs {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.social-tab {
  position: relative;
}

.social-tab.active {
  filter: saturate(0.85) brightness(1.16);
  color: #fff6ea;
}

.tab-dot {
  position: absolute;
  top: 0.18rem;
  right: 0.18rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #c62828;
  box-shadow: 0 0 6px rgba(198, 40, 40, 0.85);
}

.tab-dot.hidden { display: none !important; }

.social-lede { margin: 0 0 0.2rem; font-size: 0.82rem; }

.mail-staff.social-add-row {
  flex-wrap: wrap;
}

.mail-split {
  display: grid;
  grid-template-columns: minmax(180px, 0.95fr) minmax(220px, 1.15fr);
  gap: 0.55rem;
  min-height: 0;
  flex: 1;
}

.mail-detail {
  border: 1px solid rgba(138, 98, 48, 0.28);
  background: rgba(8, 3, 3, 0.45);
  padding: 0.55rem 0.65rem;
  overflow: auto;
  min-height: 10rem;
}

.mail-detail h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1rem;
}

.mail-body {
  white-space: pre-wrap;
  margin: 0.4rem 0;
  color: var(--text);
}

.mail-attach {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0;
}

.mail-chip {
  border: 1px solid rgba(138, 98, 48, 0.4);
  padding: 0.12rem 0.4rem;
  font-size: 0.75rem;
}

.ticket-form textarea,
#mail-send-body {
  width: 100%;
  min-height: 3.2rem;
  resize: vertical;
  border: 1px solid rgba(138, 98, 48, 0.4);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font: inherit;
  padding: 0.35rem 0.5rem;
}

.ticket-form select {
  min-width: 6.5rem;
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  border: 1px solid rgba(138, 98, 48, 0.4);
  font: inherit;
}

.ticket-queue-wrap h3,
#ticket-mine-label {
  margin: 0.45rem 0 0.2rem;
  font-size: 0.95rem;
  font-family: var(--font-display);
}

.mono { font-family: ui-monospace, Consolas, monospace; }

.social-row.selected {
  border-color: rgba(232, 208, 144, 0.55);
}

.social-view {
  min-height: 0;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.social-view.hidden {
  display: none !important;
}

.social-add-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.social-add-row input {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(138, 98, 48, 0.4);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font: inherit;
}

#guild-create-tag {
  flex: 0 0 4.4rem;
  text-transform: uppercase;
  text-align: center;
}

.social-list,
.social-requests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.social-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: center;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(138, 98, 48, 0.28);
  background: rgba(8, 3, 3, 0.5);
}

.social-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.social-name {
  font-weight: 700;
  color: var(--text-value);
}

.social-meta {
  font-size: 0.72rem;
  color: var(--muted);
}

.social-row.online .social-name::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #7dbe62;
  box-shadow: 0 0 6px rgba(120, 190, 90, 0.7);
}

.social-row-actions {
  display: flex;
  gap: 0.28rem;
}

.social-row-actions button {
  min-height: 1.7rem;
  font-size: 0.68rem;
}

.guild-banner {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.guild-banner h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
}

.guild-tag {
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.1em;
}

.guild-motd {
  margin: 0;
  font-size: 0.85rem;
}

.guild-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.chat-line.whisper .chat-name {
  color: #c9a0e8;
}

.summon-portraits {
  position: absolute;
  top: 0.7rem;
  left: calc(0.7rem + 84px * var(--hud-s, 1));
  z-index: 8;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.3rem;
  pointer-events: none;
  max-width: 220px;
}
.summon-port {
  width: calc(48px * var(--hud-s, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.summon-port .sp-face {
  width: calc(40px * var(--hud-s, 1));
  height: calc(40px * var(--hud-s, 1));
  border-radius: 50%;
  border: 2px solid #4a3060;
  background: radial-gradient(circle at 40% 30%, #2a1830, #080308 78%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
}
.summon-port .sp-count {
  font-size: 0.68rem;
  font-weight: 800;
  color: #e8d090;
  text-shadow: 0 1px 3px #000;
}

.dialogue-panel {
  position: fixed;
  left: 50%;
  bottom: 16.5rem;
  transform: translateX(-50%);
  z-index: 70;
  width: min(560px, 88vw);
  pointer-events: auto;
}
.dialogue-panel.hidden {
  display: none;
}
.dialogue-inner {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, rgba(18, 8, 8, 0.96), rgba(8, 3, 3, 0.98));
  border: 8px solid transparent;
  border-image-source: var(--ui-panel);
  border-image-slice: var(--frame-slice);
  border-image-width: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}
.dialogue-portrait {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  border-radius: 6px;
  border: 1px solid #6a4a28;
  background: radial-gradient(circle at 40% 30%, #3a2418, #100808 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Cinzel, serif;
  font-size: 2rem;
  color: #e8d090;
  overflow: hidden;
}
.dialogue-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dialogue-copy {
  flex: 1;
  min-width: 0;
}
.dialogue-name {
  font-family: Cinzel, serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #e8d090;
}
.dialogue-title {
  font-size: 0.75rem;
  color: #b09070;
  margin-bottom: 0.35rem;
}
.dialogue-line {
  margin: 0 0 0.6rem;
  color: #e4d4b4;
  line-height: 1.4;
}
.quest-bang {
  pointer-events: none;
}

.guild-own-panel .guild-panel-body {
  padding: 0.4rem 0.2rem 0.8rem;
}
.guild-lvl-row {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.guild-passives {
  margin: 0.4rem 0 0.8rem;
  padding: 0;
  list-style: none;
}
.guild-passives li {
  font-size: 0.85rem;
  color: #d4c4a4;
  margin: 0.2rem 0;
}