:root {
  --poe-black: #030303;
  --poe-panel: #090806;
  --poe-slate: #110e0b;
  --poe-iron: #1f1912;
  --poe-brass-dark: #382b1c;
  --poe-brass-mid: #5e4930;
  --poe-brass-bright: #967a50;
  --poe-gold: #dfcf99;
  --poe-gold-bright: #f5e2a8;
  --poe-gold-muted: #a38d6d;
  --poe-mod-blue: #8888ff;
  --poe-prop-grey: #7f7f7f;
  --rarity-normal: #c8c8c8;
  --rarity-magic: #8888ff;
  --rarity-rare: #ffff77;
  --rarity-unique: #af6025;
  --rarity-gem: #1ba29b;
  --rarity-currency: #aa9e82;
  --sock-r: #b81d1d;
  --sock-g: #1f8a36;
  --sock-b: #1e5cb8;
  --sock-w: #e6e2d8;
  --font-serif: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body: 'Crimson Pro', Georgia, serif;
}

* {
  box-sizing: border-box;
  user-select: none;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--poe-black);
  color: var(--poe-gold);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

#gameCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  z-index: 1;
}

#hudOverlayCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 5;
}

.hidden {
  display: none !important;
}

/* ========================================================================= */
/* CHISELED IRON & ANTIQUE BRASS FRAMES (GATEWAY & MODALS)                   */
/* ========================================================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(16, 12, 9, 0.85) 0%, rgba(2, 2, 2, 0.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.poe-frame {
  position: relative;
  background-color: #080705;
  background-image:
    linear-gradient(180deg, rgba(18, 14, 10, 0.94) 0%, rgba(7, 6, 4, 0.98) 100%),
    url('/assets/textures/brick_roughness.jpg');
  background-size: cover, 256px 256px;
  background-blend-mode: normal, overlay;
  border: 2px solid var(--poe-brass-mid);
  outline: 2px solid #040302;
  box-shadow:
    0 28px 80px #000,
    inset 0 0 0 1px #241c13,
    inset 0 0 45px rgba(0, 0, 0, 0.9);
  padding: 20px 26px 24px;
  max-width: 1120px;
  width: 95%;
}

.char-create-box {
  max-width: 1120px;
  width: 96vw;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  padding: 12px 20px 14px;
}

.lobby-modal-box {
  max-width: 680px;
  width: 92vw;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 0;
}

.lobby-modal-header {
  padding: 10px 16px;
}

.lobby-modal-body {
  padding: 12px 18px 16px;
}

.lobby-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.lobby-modal-actions .large-btn {
  flex: 1;
}

.class-switch-window {
  width: min(1040px, 95vw) !important;
  max-width: 95vw !important;
}

.frame-rivet {
  position: absolute;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #c8b38a 0%, #4d3b24 70%, #17110a 100%);
  border: 1px solid #050403;
  transform: rotate(45deg);
  z-index: 5;
}
.frame-rivet.tl { top: -5px; left: -5px; }
.frame-rivet.tr { top: -5px; right: -5px; }
.frame-rivet.bl { bottom: -5px; left: -5px; }
.frame-rivet.br { bottom: -5px; right: -5px; }

.poe-login-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 2px;
}

.crest-line {
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--poe-brass-mid), transparent);
}

.poe-header-ornament {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 2.5px;
  color: var(--poe-gold-muted);
  text-shadow: 1px 1px 0 #000;
}

.poe-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--poe-gold);
  text-shadow: 0 2px 4px #000, 0 0 18px rgba(163, 141, 109, 0.35);
}

.poe-subtitle {
  margin: 1px 0 6px;
  text-align: center;
  font-family: var(--font-serif);
  color: #a89984;
  font-size: 0.82rem;
  letter-spacing: 0.8px;
}

.asset-loading-wrap {
  margin: 0 auto 6px;
  max-width: 520px;
  text-align: center;
}

.asset-loading-bar {
  width: 100%;
  height: 5px;
  background: #040302;
  border: 1px solid var(--poe-brass-dark);
  overflow: hidden;
  margin-bottom: 3px;
}

.asset-loading-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #5c4322, #c8a862);
  transition: width 0.15s ease;
}

.asset-loading-text {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  color: var(--poe-gold-muted);
  letter-spacing: 0.6px;
}

.char-create-top-bar {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 8px;
}

.char-name-group {
  background: rgba(12, 9, 6, 0.85);
  border: 1px solid var(--poe-brass-dark);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.selected-class-summary {
  background: linear-gradient(90deg, rgba(36, 26, 15, 0.92) 0%, rgba(12, 9, 6, 0.95) 100%);
  border: 1px solid var(--poe-brass-mid);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.char-create-hint {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: #b5a388;
}

.poe-section-title {
  font-family: var(--font-serif);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--poe-gold);
  border-bottom: 1px solid var(--poe-brass-dark);
  padding-bottom: 3px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-shadow: 1px 1px 0 #000;
}

.login-row {
  display: flex;
  gap: 10px;
}

.input-group {
  flex: 1;
  min-width: 0;
}

.input-group label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: #b5a388;
  margin-bottom: 3px;
}

.input-group input {
  width: 100%;
  padding: 7px 10px;
  background: #050403;
  border: 1px solid var(--poe-brass-dark);
  box-shadow: inset 0 2px 5px #000;
  color: var(--poe-gold);
  font-family: var(--font-serif);
  font-size: 0.96rem;
}

.input-group input:focus {
  outline: none;
  border-color: var(--poe-brass-bright);
}

.poe-char-select-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poe-char-select-columns {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12px;
  min-height: 255px;
  max-height: 315px;
}

.poe-char-spotlight {
  background: radial-gradient(ellipse at top, #1d150b 0%, #090705 100%);
  border: 1px solid var(--poe-brass-mid);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.85);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.poe-char-roster-panel {
  background: rgba(8, 6, 4, 0.94);
  border: 1px solid var(--poe-brass-dark);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.poe-roster-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}

.poe-roster-row {
  background: linear-gradient(90deg, #16110a 0%, #0a0805 100%);
  border: 1px solid #3c2f1f;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.poe-roster-row:hover {
  border-color: var(--poe-brass-bright);
  background: linear-gradient(90deg, #241b10 0%, #110d08 100%);
}

.poe-roster-row.selected {
  border: 1px solid var(--poe-gold-bright);
  background: linear-gradient(90deg, #302313 0%, #140f09 100%);
  box-shadow: inset 0 0 12px rgba(214, 178, 112, 0.25);
}

.poe-select-left-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.poe-roster-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--poe-brass-dark);
}

.poe-roster-btn-row {
  display: flex;
  gap: 8px;
}

.danger-chisel-btn {
  border-color: #6e241f !important;
  color: #ffa8a8 !important;
}

.danger-chisel-btn:hover {
  border-color: #ff6b6b !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #3b110e 0%, #1c0705 100%) !important;
}

.poe-delete-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.poe-delete-modal-box {
  width: min(470px, 92vw);
  background: #0c0906;
  border: 2px solid #8a2be2;
  border-color: #9e3028;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.95);
}

.poe-delete-modal-body {
  padding: 14px 18px 16px;
}

.delete-warning-text {
  margin: 0 0 10px;
  color: #e8dcc8;
  font-size: 0.94rem;
  line-height: 1.4;
}

.delete-confirm-error {
  color: #ff6b6b;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.poe-delete-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.danger-confirm-btn {
  background: linear-gradient(180deg, #5c1612 0%, #2b0907 100%) !important;
  border-color: #e03131 !important;
  color: #ffe3e3 !important;
}

.danger-confirm-btn:hover {
  background: linear-gradient(180deg, #7d1d18 0%, #3d0c09 100%) !important;
  color: #ffffff !important;
}

.class-grid-creation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  max-height: none;
}

.class-grid-creation .class-card:nth-child(7) {
  grid-column: span 2;
}

.class-switch-grid {
  padding: 8px 14px 12px;
  max-height: none;
}

.char-create-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--poe-brass-dark);
}

.lobby-gateway-btn {
  padding: 9px 14px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.enter-main-btn {
  flex: 1;
  font-size: 0.96rem;
  padding: 9px 20px;
}

.class-card {
  background: linear-gradient(90deg, #120f0b 0%, #090705 100%);
  border: 1px solid #382c1e;
  box-shadow: inset 0 0 0 1px #060504;
  padding: 7px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}

.class-card:hover {
  border-color: var(--poe-brass-bright);
}

.class-card.selected {
  border: 1px solid var(--poe-gold);
  background: linear-gradient(90deg, #291f12 0%, #0f0b08 100%);
  box-shadow: inset 0 0 12px rgba(150, 122, 80, 0.28);
}

.class-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.class-head-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.class-emblem {
  width: 24px;
  height: 24px;
  background: #070504;
  border: 1px solid var(--poe-brass-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.class-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--poe-gold-bright);
  text-shadow: 0 2px 4px #000;
  line-height: 1.1;
}

.class-title {
  font-family: var(--font-serif);
  font-size: 0.74rem;
  color: #c7b089;
}

.class-attr-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

.attr-pill {
  font-family: var(--font-serif);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 5px;
  background: #070504;
  border: 1px solid #2b2217;
}
.attr-pill.str-pill { color: #ff8b82; border-color: #6e241f; }
.attr-pill.dex-pill { color: #7ee88f; border-color: #1f5c2d; }
.attr-pill.int-pill { color: #85caff; border-color: #1e4978; }

.class-desc {
  font-size: 0.8rem;
  color: #bfb29e;
  line-height: 1.22;
}

.class-starter-pill {
  font-family: var(--font-serif);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 5px;
  background: #070604;
  border: 1px solid var(--poe-brass-mid);
  color: #36d6cd;
  white-space: nowrap;
}

.class-vaal-pill {
  font-family: var(--font-serif);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 5px;
  background: #1c0606;
  border: 1px solid #962424;
  color: #ff9999;
  white-space: nowrap;
}

.hideout-class-bar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 0 14px 10px;
}

.hideout-class-chip {
  background: linear-gradient(180deg, #16110b 0%, #080604 100%);
  border: 1px solid #453623;
  padding: 5px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--poe-gold);
}

.hideout-class-chip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hideout-class-chip:hover {
  border-color: var(--poe-gold);
}

.hideout-class-chip.selected {
  border-color: var(--poe-gold-bright);
  background: linear-gradient(180deg, #2b2012 0%, #120c07 100%);
  box-shadow: 0 0 8px rgba(223, 207, 153, 0.35);
}

/* Instance Browser Table */
.room-browser-table-wrap {
  height: 186px;
  overflow-y: auto;
  background: #050403;
  border: 1px solid var(--poe-brass-dark);
  box-shadow: inset 0 2px 8px #000;
}

.room-browser-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.room-browser-table th {
  position: sticky;
  top: 0;
  background: #120e0a;
  color: var(--poe-gold);
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.8px;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--poe-brass-dark);
}

.room-browser-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #14100b;
  color: #dfd3be;
  font-family: var(--font-serif);
  font-size: 0.86rem;
}

.room-browser-table tr:hover td {
  background: #1a140d;
}

.poe-chisel-btn {
  background: linear-gradient(180deg, #261e14 0%, #120d08 100%);
  border: 1px solid var(--poe-brass-mid);
  box-shadow: inset 0 1px 0 rgba(223, 207, 153, 0.15), 0 1px 3px #000;
  color: var(--poe-gold);
  font-family: var(--font-serif);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 6px 12px;
  cursor: pointer;
  text-shadow: 0 2px 4px #000;
}

.poe-chisel-btn:hover {
  border-color: var(--poe-gold);
  background: linear-gradient(180deg, #362a1b 0%, #1a130b 100%);
}

.poe-gold-btn {
  background: linear-gradient(180deg, #42311b 0%, #1f160b 55%, #120c06 100%);
  border: 1px solid var(--poe-brass-bright);
  outline: 1px solid #050403;
  color: var(--poe-gold-bright);
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 2px;
  padding: 10px 18px;
  cursor: pointer;
  text-shadow: 0 2px 4px #000;
  box-shadow: 0 3px 10px #000, inset 0 1px 0 rgba(245, 226, 168, 0.22);
}

.poe-gold-btn:hover {
  border-color: var(--poe-gold-bright);
  color: #fff;
  background: linear-gradient(180deg, #543e22 0%, #2b1e0f 55%, #171008 100%);
}

.large-btn {
  width: 100%;
  font-size: 1.0rem;
}

.danger-btn {
  background: linear-gradient(180deg, #471612 0%, #210907 100%);
  border-color: #8a352d;
}

/* ========================================================================= */
/* TOP HUD: POE 1 PARTY PORTRAITS (LEFT), GEM ALTAR (CENTER), ZONE MAP (R)   */
/* ========================================================================= */
.top-hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 20;
  pointer-events: none;
}

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

/* Top-Left Party Portraits */
.hud-left-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poe-party-header-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.poe-gold-chest-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.poe-gold-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(180deg, #1f1709 0%, #0d0904 100%);
  border: 1px solid #8a6c32;
  padding: 5px 10px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffe07d;
  text-shadow: 0 2px 4px #000;
  box-shadow: 0 3px 10px #000;
}

.gold-coin-icon {
  font-size: 0.95rem;
}

.gold-val-num {
  color: #fff2b8;
  font-size: 0.96rem;
}

.gold-lbl {
  color: #d6b05c;
  font-size: 0.78rem;
  letter-spacing: 0.8px;
}

.buy-chest-btn {
  border-color: #8a6c32;
  color: #f5d37a;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 5px 11px;
  background: linear-gradient(180deg, #241a0b 0%, #100b05 100%);
}

.buy-chest-btn.can-afford {
  border-color: #ffe07d;
  color: #fff6cf;
  background: linear-gradient(180deg, #4a3412 0%, #1f1507 100%);
  box-shadow: 0 0 12px rgba(255, 224, 125, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ready-chisel {
  border-color: #6b5535;
  color: var(--poe-gold);
  font-weight: 700;
  font-size: 0.84rem;
  padding: 5px 12px;
}

.ready-chisel.is-ready {
  background: linear-gradient(180deg, #3b2d16 0%, #1c1409 100%);
  border-color: var(--poe-gold);
  color: var(--poe-gold-bright);
  box-shadow: 0 0 8px rgba(223, 207, 153, 0.25);
}

.switch-class-btn {
  border-color: var(--poe-brass-mid);
  color: #e6c88a;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 5px 11px;
}

.party-portraits-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poe-party-portrait {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(10, 8, 6, 0.94) 0%, rgba(10, 8, 6, 0.55) 100%);
  border: 1px solid #382c1e;
  padding: 4px 10px 4px 5px;
  min-width: 210px;
}

.portrait-medallion {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle, #1f1811 0%, #070504 100%);
  border: 2px solid var(--poe-brass-mid);
  box-shadow: 0 0 6px #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.portrait-lvl-pip {
  position: absolute;
  bottom: -3px;
  right: -3px;
  background: #090705;
  border: 1px solid var(--poe-brass-mid);
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--poe-gold);
  padding: 0 4px;
  line-height: 14px;
}

.portrait-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.portrait-name-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-serif);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--poe-gold);
  text-shadow: 1px 1px 0 #000;
}

.portrait-status {
  color: var(--poe-gold-muted);
  font-size: 0.76rem;
}

.portrait-bars {
  width: 100%;
  height: 7px;
  background: #040302;
  border: 1px solid #2e2318;
  position: relative;
  overflow: hidden;
}

.portrait-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #6e0d09, #b31912);
}

.portrait-es-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: #6bc2ff;
}

/* Top-Center Divine Gem Draft Altar */
.hud-center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 46px; /* Leaves room at top-center for PoE Monster Health Plaque! */
}

.gem-draft-banner {
  background-color: rgba(9, 7, 5, 0.88);
  background-image:
    linear-gradient(180deg, rgba(22, 16, 10, 0.92) 0%, rgba(7, 6, 4, 0.94) 100%),
    url('/assets/textures/brick_roughness.jpg');
  background-size: cover, 200px 200px;
  background-blend-mode: normal, overlay;
  border: 2px solid var(--poe-brass-bright);
  outline: 1px solid #000;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.85), inset 0 0 0 1px #291f14;
  padding: 8px 12px 10px;
  width: 690px;
  max-width: 90vw;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  margin-top: 6px;
}

.draft-banner-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--poe-gold);
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--poe-brass-dark);
  padding-bottom: 6px;
  text-shadow: 1px 1px 0 #000;
}

.draft-queue-pill {
  background: #1c150c;
  border: 1px solid var(--poe-brass-mid);
  padding: 1px 7px;
  font-size: 0.78rem;
  color: var(--poe-gold);
}

.gem-draft-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.draft-card {
  background: linear-gradient(180deg, #13100c 0%, #080605 100%);
  border: 1px solid var(--poe-brass-dark);
  box-shadow: inset 0 0 0 1px #040302;
  padding: 9px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.draft-card:hover {
  border-color: var(--poe-gold);
  background: linear-gradient(180deg, #1f1911 0%, #0d0a07 100%);
}

.draft-card.draft-boon {
  border-color: #9e7832;
  background: linear-gradient(180deg, #21180b 0%, #0a0704 100%);
  box-shadow: inset 0 0 12px rgba(214, 176, 92, 0.18);
}

.draft-card.draft-boon:hover {
  border-color: #ffe07d;
}

.draft-card.draft-boon .draft-card-title {
  color: #f5d37a;
}

.draft-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.draft-gem-svg-wrap {
  width: 28px;
  height: 28px;
  background: #050403;
  border: 1px solid var(--poe-brass-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.draft-card-title {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--rarity-gem);
  text-shadow: 1px 1px 0 #000;
}

.draft-card-sub {
  font-family: var(--font-serif);
  font-size: 0.74rem;
  color: var(--poe-gold-muted);
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.draft-card-desc {
  font-size: 0.88rem;
  color: var(--poe-mod-blue);
  line-height: 1.24;
}

.draft-hotkey {
  margin-top: 6px;
  text-align: right;
  font-family: var(--font-serif);
  font-size: 0.74rem;
  font-weight: 700;
  color: #9e8d73;
}

/* Top-Right PoE 1 Zone Info & Corner Map Overlay */
.hud-right-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.poe-zone-info {
  text-align: right;
  font-family: var(--font-serif);
  text-shadow: 1px 1px 0 #000, 0 0 5px #000;
  line-height: 1.3;
}

.zone-title-line {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--poe-gold);
  letter-spacing: 0.8px;
}

.zone-sub-line {
  font-size: 0.84rem;
  color: var(--poe-gold-muted);
}

.zone-meta-line {
  font-size: 0.8rem;
  color: #a3937c;
}

.zone-meta-line strong {
  color: var(--poe-gold);
}

.zone-sep {
  margin: 0 4px;
}

.wave-progress-wrap {
  margin-top: 5px;
  width: 192px;
  margin-left: auto;
  background: rgba(6, 5, 4, 0.94);
  border: 1px solid var(--poe-brass-mid);
  padding: 4px 7px 5px;
  box-shadow: 0 3px 10px #000;
}

.wave-progress-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-serif);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--poe-gold);
  letter-spacing: 0.6px;
  margin-bottom: 3px;
}

.wave-progress-track {
  width: 100%;
  height: 7px;
  background: #040302;
  border: 1px solid #2b2217;
  overflow: hidden;
}

.wave-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #731812 0%, #c95b1e 55%, #f5d37a 100%);
  box-shadow: 0 0 6px rgba(245, 211, 122, 0.5);
  transition: width 0.15s ease-out;
}

.minimap-frame {
  position: relative;
  background: rgba(4, 3, 2, 0.92);
  border: 2px solid var(--poe-brass-mid);
  outline: 1px solid #000;
  box-shadow: 0 6px 22px #000, inset 0 0 12px #000;
  padding: 2px;
}

.minimap-frame.expanded #minimapCanvas {
  width: 330px;
  height: 330px;
}

#minimapCanvas {
  display: block;
  width: 168px;
  height: 168px;
  background: #050403;
}

/* PoE 1 Chat Box */
.poe-chat-widget {
  position: fixed;
  left: 8px;
  bottom: 205px;
  width: 340px;
  background: rgba(5, 4, 3, 0.85);
  border: 1px solid #2b2217;
  z-index: 18;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  height: 98px;
  overflow-y: auto;
  padding: 6px 8px;
  font-size: 0.88rem;
  line-height: 1.3;
}

.chat-line {
  margin-bottom: 3px;
  text-shadow: 1px 1px 0 #000;
}

.chat-input-row {
  border-top: 1px solid #2b2217;
}

.chat-input-row input {
  width: 100%;
  background: rgba(3, 2, 2, 0.92);
  border: none;
  color: var(--poe-gold);
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.chat-input-row input:focus {
  outline: none;
  background: #0f0c09;
}

/* ========================================================================= */
/* AUTHENTIC PATH OF EXILE 1 BOTTOM HUD (CORNER GLOBES, FLASKS, SKILL GRID)  */
/* ========================================================================= */
.bottom-hud {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 196px;
  z-index: 22;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.bottom-hud > * {
  pointer-events: auto;
}

/* Corner Globe Docks (Flush Bottom-Left & Bottom-Right like PoE 1) */
.poe-corner-globe {
  position: relative;
  width: 198px;
  height: 196px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 60%, rgba(18, 14, 10, 0.95) 0%, transparent 74%);
}

.globe-num-plate {
  background: linear-gradient(90deg, transparent 0%, #0d0a07 15%, #0d0a07 85%, transparent 100%);
  border-top: 1px solid var(--poe-brass-dark);
  border-bottom: 1px solid var(--poe-brass-dark);
  padding: 2px 12px;
  margin-bottom: -4px;
  z-index: 6;
  font-family: var(--font-serif);
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 5px;
  text-shadow: 0 2px 4px #000, 1px 1px 0 #000;
}

.plate-lbl {
  color: var(--poe-gold-muted);
  letter-spacing: 0.8px;
  font-size: 0.78rem;
}

.plate-val {
  color: #f5efe4;
  font-weight: 700;
  font-size: 0.9rem;
}

.plate-es-val {
  color: #7cc4ff;
  font-weight: 700;
  font-size: 0.82rem;
}

.globe-orb-wrapper {
  position: relative;
  width: 174px;
  height: 174px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.globe-sphere {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #120808 0%, #030202 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 28px #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.globe-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  transition: height 0.12s ease-out;
}

.life-fill {
  background:
    radial-gradient(circle at 38% 35%, #b81611 0%, #730906 62%, #330201 100%);
}

.mana-fill {
  height: 100%;
  background:
    radial-gradient(circle at 60% 35%, #16498c 0%, #0b264d 62%, #040d1c 100%);
}

.liquid-meniscus {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 160, 140, 0.2), rgba(255, 195, 180, 0.85), rgba(255, 160, 140, 0.2));
  box-shadow: 0 0 8px #ff5242;
}

.mana-meniscus {
  background: linear-gradient(90deg, rgba(120, 190, 255, 0.2), rgba(160, 220, 255, 0.7), rgba(120, 190, 255, 0.2));
  box-shadow: 0 0 8px #4da6ff;
}

/* PoE 1 Curved Right-Side Energy Shield Crescent Overlay on Left Globe */
.es-crescent-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
  /* Mask to right crescent arc of the globe */
  clip-path: polygon(56% 0%, 100% 0%, 100% 100%, 56% 100%, 70% 50%);
}

.es-crescent-fill {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 0%;
  background:
    radial-gradient(circle at 30% 50%, transparent 48%, rgba(110, 195, 255, 0.82) 60%, rgba(190, 235, 255, 0.95) 100%);
  box-shadow: inset -6px 0 14px rgba(110, 200, 255, 0.9);
  transition: height 0.12s ease-out;
}

.globe-specular {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 26%, transparent 52%),
    radial-gradient(circle at 50% 50%, transparent 64%, rgba(0, 0, 0, 0.88) 100%);
  pointer-events: none;
  z-index: 4;
}

.globe-metal-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 4px 10px #000);
}

.stats-mini-list {
  position: relative;
  z-index: 3;
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-shadow: 0 2px 4px #000, 1px 1px 0 #000;
}

.stats-mini-list div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(163, 141, 109, 0.18);
  padding: 1px 2px;
}

.stats-mini-list span {
  font-family: var(--font-serif);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--poe-gold-muted);
}

.stats-mini-list strong {
  font-family: var(--font-serif);
  font-size: 0.74rem;
  color: var(--poe-gold);
}

/* Center Deck Between Corner Globes */
.poe-center-deck {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.deck-upper-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 4px;
  pointer-events: none;
}

.deck-upper-row > * {
  pointer-events: auto;
}

.deck-center-gap {
  flex: 1;
  pointer-events: none;
}

/* PoE 1 5-Slot Ornate Flask Rack */
.poe-flask-rack {
  background: linear-gradient(180deg, #14100b 0%, #080604 100%);
  border-top: 2px solid var(--poe-brass-mid);
  border-left: 1px solid var(--poe-brass-dark);
  border-right: 2px solid var(--poe-brass-mid);
  box-shadow: 0 -4px 18px #000, inset 0 0 0 1px #040302;
  padding: 4px 6px 3px;
}

.flask-slots-row {
  display: flex;
  gap: 4px;
}

.flask-slot {
  width: 42px;
  height: 64px;
  background: linear-gradient(180deg, #0b0907 0%, #040302 100%);
  border: 1px solid #382c1d;
  box-shadow: inset 0 0 8px #000;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}

.flask-slot:hover {
  border-color: var(--poe-gold);
}

.flask-slot.buff-active {
  border-color: var(--poe-gold-bright);
}

.flask-slot.flask-locked {
  opacity: 0.48;
  border-style: dashed;
  border-color: #2c2216;
  cursor: default;
}

.flask-locked-wrap {
  border: 1px dashed #2e2418;
  background: rgba(5, 4, 3, 0.6);
}

.flask-lock-glyph {
  font-family: var(--font-serif);
  font-size: 0.52rem;
  font-weight: 700;
  color: #7d6e57;
  letter-spacing: 0.4px;
}

.flask-key-num {
  font-family: var(--font-serif);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--poe-gold);
  text-shadow: 1px 1px 0 #000;
  line-height: 1;
  z-index: 3;
}

.flask-svg-wrap {
  width: 34px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.flask-charges-num {
  font-family: var(--font-serif);
  font-size: 0.7rem;
  font-weight: 700;
  color: #dfd3bd;
  text-shadow: 1px 1px 0 #000;
  line-height: 1;
  z-index: 3;
}

.flask-buff-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #a87e2b, #ffe07d);
  box-shadow: 0 0 6px #ffd86b;
}

/* PoE 1 Skill Icon Tray & Micro-Menu */
.poe-skill-tray {
  background: linear-gradient(180deg, #14100b 0%, #080604 100%);
  border-top: 2px solid var(--poe-brass-mid);
  border-left: 2px solid var(--poe-brass-mid);
  border-right: 1px solid var(--poe-brass-dark);
  box-shadow: 0 -4px 18px #000, inset 0 0 0 1px #040302;
  padding: 4px 6px 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.skill-links-row {
  display: flex;
  gap: 5px;
}

.poe-skill-socket {
  width: 54px;
  height: 54px;
  background: #060504;
  border: 1px solid var(--poe-brass-mid);
  box-shadow: inset 0 0 10px #000;
  position: relative;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}

.poe-skill-socket:hover {
  border-color: var(--poe-gold);
}

.poe-skill-socket.empty-skill-socket {
  border-color: #261e14;
  opacity: 0.65;
}

.skill-art-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.socket-key-tag {
  position: absolute;
  top: 1px;
  left: 3px;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--poe-gold);
  text-shadow: 1px 1px 0 #000, 0 0 3px #000;
  z-index: 3;
}

.socket-lvl-tag {
  position: absolute;
  top: 1px;
  right: 3px;
  font-family: var(--font-serif);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--rarity-gem);
  text-shadow: 1px 1px 0 #000;
  z-index: 3;
}

.socket-cd-tag {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-family: var(--font-serif);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--poe-gold);
  text-shadow: 1px 1px 0 #000;
  z-index: 3;
}

/* PoE 1 Corner Support Gem Diamond Pips on Skill Icons */
.socket-support-pips {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 3;
}

.sup-pip {
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1px solid #d6c39c;
  box-shadow: 0 0 3px #000;
}
.sup-pip.pip-R { background: var(--sock-r); }
.sup-pip.pip-G { background: var(--sock-g); }
.sup-pip.pip-B { background: var(--sock-b); }

/* Vaal Ultimate Socket */
.vaal-socket {
  border: 1px solid #962121;
  background: #120404;
  box-shadow: inset 0 0 12px #000;
}

.vaal-socket:hover {
  border-color: #ff6b6b;
}

.vaal-socket.vaal-ready {
  border-color: #ff4d4d;
  box-shadow: 0 0 12px rgba(224, 49, 49, 0.75), inset 0 0 10px rgba(224, 49, 49, 0.45);
}

.vaal-soul-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(224, 49, 49, 0.45) 0%, rgba(120, 12, 12, 0.65) 100%);
  pointer-events: none;
  z-index: 1;
  transition: height 0.15s ease-out;
}

.vaal-socket .skill-art-wrap {
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}

.vaal-key-tag {
  color: #ff8787;
  font-weight: 700;
}

.vaal-soul-tag {
  color: #ffd1d1;
  font-size: 0.68rem;
  font-weight: 700;
}

.run-boons-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 120px;
  overflow-y: auto;
}

.run-boon-pill {
  background: linear-gradient(90deg, #1a1308 0%, #090704 100%);
  border: 1px solid #594421;
  padding: 5px 8px;
  font-size: 0.84rem;
  color: #f5d37a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tray-divider {
  width: 1px;
  height: 44px;
  background: var(--poe-brass-dark);
  margin: 0 3px;
}

.poe-micro-menu {
  display: flex;
  gap: 4px;
}

.poe-menu-btn {
  width: 44px;
  height: 54px;
  background: linear-gradient(180deg, #1b150e 0%, #0b0906 100%);
  border: 1px solid var(--poe-brass-dark);
  box-shadow: inset 0 1px 0 rgba(223, 207, 153, 0.12);
  color: var(--poe-gold-muted);
  font-family: var(--font-serif);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
}

.poe-menu-btn:hover {
  border-color: var(--poe-gold);
  color: var(--poe-gold);
}

.map-menu-btn {
  background: linear-gradient(180deg, #2b2011 0%, #120d06 100%);
  border-color: var(--poe-brass-mid);
  color: var(--poe-gold);
}

.menu-key {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--poe-gold);
  text-shadow: 1px 1px 0 #000;
}

.menu-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.notify-pip {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #8f1d14;
  border: 1px solid var(--poe-gold);
  color: var(--poe-gold-bright);
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 5px;
  line-height: 15px;
}

/* Full-Width Bottom-Edge Segmented Experience Bar */
.poe-xp-bar-container {
  pointer-events: auto;
  width: 100%;
  height: 15px;
  background: #040302;
  border-top: 1px solid var(--poe-brass-mid);
  border-bottom: 1px solid #1f1810;
  position: relative;
  overflow: hidden;
}

.poe-xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #523b18 0%, #9e7832 65%, #d6b05c 100%);
  box-shadow: 0 0 6px rgba(214, 176, 92, 0.5);
  transition: width 0.2s ease;
}

.poe-xp-bar-ticks {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(10% - 2px),
    #1c150d calc(10% - 2px),
    #000000 10%
  );
  pointer-events: none;
}

.poe-xp-bar-text {
  position: absolute;
  inset: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 13px;
  color: var(--poe-gold);
  letter-spacing: 1.2px;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}

/* ========================================================================= */
/* POE 1 DOCKED PANELS: RIGHT INVENTORY & PAPER-DOLL (I), LEFT GEMS (G)      */
/* ========================================================================= */
.poe-dock-panel {
  position: fixed;
  top: 40px;
  bottom: 84px;
  width: min(426px, 47vw);
  background-color: #080705;
  background-image:
    linear-gradient(180deg, rgba(16, 13, 9, 0.96) 0%, rgba(6, 5, 4, 0.98) 100%),
    url('/assets/textures/brick_roughness.jpg');
  background-size: cover, 256px 256px;
  background-blend-mode: normal, overlay;
  border: 2px solid var(--poe-brass-mid);
  outline: 2px solid #030202;
  box-shadow: 0 18px 60px #000, inset 0 0 0 1px #241b12;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-dock-panel {
  right: 8px;
}

.left-dock-panel {
  left: 8px;
}

.poe-window {
  position: fixed;
  top: 42px;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, 95vw);
  background-color: #080705;
  background-image:
    linear-gradient(180deg, rgba(16, 13, 9, 0.96) 0%, rgba(6, 5, 4, 0.98) 100%),
    url('/assets/textures/brick_roughness.jpg');
  background-size: cover, 256px 256px;
  background-blend-mode: normal, overlay;
  border: 2px solid var(--poe-brass-mid);
  outline: 2px solid #030202;
  box-shadow: 0 24px 80px #000, inset 0 0 0 1px #241b12;
  z-index: 75;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fullscreen-window {
  top: 18px;
  bottom: 18px;
  width: 96vw;
}

.map-window {
  top: 50%;
  bottom: auto;
  height: auto;
  max-height: calc(100vh - 24px);
  transform: translate(-50%, -50%);
  max-width: 860px;
  width: min(860px, 95vw);
  padding-bottom: 12px;
  overflow-y: auto;
  z-index: 80;
}

.poe-window-header {
  background: linear-gradient(90deg, #120e09 0%, #261d12 50%, #120e09 100%);
  border-bottom: 2px solid var(--poe-brass-mid);
  box-shadow: 0 2px 8px #000;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-ornament {
  color: var(--poe-brass-bright);
  font-size: 0.7rem;
}

.poe-window-header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--poe-gold);
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #000;
}

.header-sub {
  font-size: 0.86rem;
  color: var(--poe-gold-muted);
}

.window-close {
  background: #120d08;
  border: 1px solid var(--poe-brass-mid);
  color: var(--poe-gold);
  width: 26px;
  height: 26px;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.window-close:hover {
  border-color: var(--poe-gold-bright);
  background: #291e12;
}

.poe-inventory-body, .poe-gems-body {
  padding: 6px 9px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.poe-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-serif);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--poe-gold-muted);
  letter-spacing: 0.8px;
  border-bottom: 1px solid #292016;
  padding-bottom: 2px;
}

.craft-hint-inline {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #a3937c;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ========================================================================= */
/* AUTHENTIC POE 1 SPATIAL PAPER-DOLL LAYOUT (ULTRA-COMPACT 156PX STAGE)     */
/* ========================================================================= */
.poe-paperdoll-stage {
  background:
    radial-gradient(circle at 50% 50%, rgba(36, 27, 17, 0.38) 0%, rgba(5, 4, 3, 0.95) 85%);
  border: 1px solid #2e2418;
  box-shadow: inset 0 0 24px #000;
  padding: 3px;
  flex-shrink: 0;
}

.poe-paperdoll-canvas {
  position: relative;
  width: 100%;
  height: 156px;
}

.pd-slot {
  position: absolute;
  background: #050403;
  border: 1px solid #382c1e;
  box-shadow: inset 0 0 12px #000;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pd-slot:hover {
  border-color: var(--poe-gold);
}

/* Exact PoE 1 Spatial Coordinates for the 8 Equipment Slots (156px Stage) */
.pd-slot-weapon { left: 10px;  top: 6px;   width: 82px; height: 98px; }
.pd-slot-helm   { left: 146px; top: 2px;   width: 78px; height: 46px; }
.pd-slot-amulet { left: 236px; top: 8px;   width: 58px; height: 40px; }
.pd-slot-body   { left: 144px; top: 51px;  width: 82px; height: 68px; }
.pd-slot-gloves { left: 50px;  top: 108px; width: 74px; height: 45px; }
.pd-slot-belt   { left: 144px; top: 122px; width: 82px; height: 31px; }
.pd-slot-ring   { left: 236px; top: 76px;  width: 58px; height: 40px; }
.pd-slot-boots  { left: 302px; top: 106px; width: 74px; height: 47px; }

/* PoE Rarity Slot Backdrop Tints */
.pd-slot.rarity-normal {
  background: radial-gradient(circle, rgba(90, 90, 95, 0.16) 0%, #050403 90%);
  border-color: #6b6b6b;
}
.pd-slot.rarity-magic {
  background: radial-gradient(circle, rgba(50, 65, 165, 0.26) 0%, #05050a 90%);
  border-color: #4c59b8;
}
.pd-slot.rarity-rare {
  background: radial-gradient(circle, rgba(165, 140, 35, 0.26) 0%, #080703 90%);
  border-color: #9e8b34;
}
.pd-slot.rarity-unique {
  background: radial-gradient(circle, rgba(165, 75, 25, 0.3) 0%, #0a0503 90%);
  border-color: #9e5220;
}

.pd-slot-watermark {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: var(--font-serif);
  font-size: 0.62rem;
  font-weight: 700;
  color: #70604c;
  letter-spacing: 0.6px;
  pointer-events: none;
}

.pd-item-art {
  width: 78%;
  height: 74%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-item-caption {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 0 #000, 0 0 3px #000;
}

.text-normal { color: var(--rarity-normal); }
.text-magic { color: var(--rarity-magic); }
.text-rare { color: var(--rarity-rare); }
.text-unique { color: var(--rarity-unique); }
.text-gem { color: var(--rarity-gem); }

/* Compact Character Attribute & Stat Sheet (in Left Character Sheet Drawer) */
.poe-stats-strip {
  background: #050403;
  border: 1px solid #292016;
  padding: 5px 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px 10px;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.stat-pair {
  display: flex;
  justify-content: space-between;
}
.stat-pair span { color: #a3937c; font-family: var(--font-serif); font-size: 0.7rem; font-weight: 600; }
.stat-pair strong { color: var(--poe-gold); font-family: var(--font-serif); font-size: 0.78rem; }

/* PoE 1 Currency Stash Socket Row */
.poe-currency-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  flex-shrink: 0;
}

.currency-btn {
  height: 38px;
  background: #050403;
  border: 1px solid #382c1d;
  box-shadow: inset 0 0 8px #000;
  position: relative;
  cursor: pointer;
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.currency-btn:hover {
  border-color: var(--poe-gold);
}

.currency-btn.active-currency {
  border: 1px solid var(--poe-gold-bright);
  background: radial-gradient(circle, rgba(163, 130, 60, 0.35) 0%, #080604 100%);
  box-shadow: 0 0 10px rgba(223, 207, 153, 0.4);
}

.orb-stack-num {
  position: absolute;
  top: 1px;
  left: 3px;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--poe-gold);
  text-shadow: 1px 1px 0 #000;
  z-index: 2;
}

.orb-svg-wrap {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orb-short-lbl {
  font-family: var(--font-serif);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--rarity-currency);
  letter-spacing: 0.3px;
}

/* Authentic PoE 1 8x4 Dark-Iron Grid Inventory Bag */
.poe-bag-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 36px);
  background: #040302;
  border: 1px solid var(--poe-brass-dark);
  box-shadow: inset 0 0 14px #000;
  flex-shrink: 0;
}

.bag-cell {
  border: 1px solid #1c160f;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bag-cell.occupied {
  cursor: pointer;
}

.bag-cell.occupied:hover {
  border-color: var(--poe-gold);
}

.bag-cell.rarity-normal { background: radial-gradient(circle, rgba(100, 100, 105, 0.16) 0%, #050403 95%); }
.bag-cell.rarity-magic  { background: radial-gradient(circle, rgba(50, 65, 165, 0.25) 0%, #05050a 95%); border-color: #364085; }
.bag-cell.rarity-rare   { background: radial-gradient(circle, rgba(165, 140, 35, 0.25) 0%, #080703 95%); border-color: #6e6023; }
.bag-cell.rarity-unique { background: radial-gradient(circle, rgba(165, 75, 25, 0.3) 0%, #0a0503 95%); border-color: #733b16; }

.bag-cell-art {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bag-cell-slot-tag {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-family: var(--font-serif);
  font-size: 0.64rem;
  font-weight: 700;
  color: #a3937c;
}

/* ========================================================================= */
/* SKILL GEM LINKS & SUPPORT BOARD (LEFT DOCK PANEL — KEY: G)                */
/* ========================================================================= */
.gem-links-board {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gem-slot-row {
  background: #060504;
  border: 1px solid #382c1d;
  box-shadow: inset 0 0 10px #000;
  padding: 4px 8px;
  cursor: pointer;
}

.gem-slot-row:hover {
  border-color: var(--poe-gold);
}

.gem-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.gem-active-title {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--rarity-gem);
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 1px 1px 0 #000;
}

.gem-links-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* PoE 1 Metallic Socket Rings & Golden Link Bridges */
.gem-socket-orb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--poe-brass-mid);
  background: #040302;
  box-shadow: inset 0 0 6px #000, 0 1px 3px #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--poe-gold);
  cursor: pointer;
  position: relative;
}

.gem-socket-orb.active-orb {
  width: 34px;
  height: 34px;
  border-width: 2px;
}

.orb-R { border-color: #c9342c; background: radial-gradient(circle, #6e110d 0%, #170302 100%); }
.orb-G { border-color: #2ca849; background: radial-gradient(circle, #0f521f 0%, #031407 100%); }
.orb-B { border-color: #327ad9; background: radial-gradient(circle, #10386e 0%, #030c1a 100%); }
.orb-empty { border-color: #3d3122; color: #544736; }

.gem-link-bridge {
  width: 14px;
  height: 4px;
  background: linear-gradient(180deg, #d9bc75 0%, #6e5226 100%);
  border-top: 1px solid #24190a;
  border-bottom: 1px solid #24190a;
}

.support-reserve-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.reserve-gem-card {
  background: #060504;
  border: 1px solid #33281b;
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
}

.reserve-gem-card.selected {
  border-color: var(--rarity-gem);
  background: #0a1716;
}

.gem-lore-note {
  margin-top: auto;
  background: #050403;
  border: 1px solid #241c13;
  padding: 8px 10px;
  font-size: 0.86rem;
  color: #a3937c;
  line-height: 1.32;
}

/* ========================================================================= */
/* PASSIVE TREE & MAP DEVICE                                                 */
/* ========================================================================= */
.tree-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.passive-points-pill {
  background: #080604;
  border: 1px solid var(--poe-brass-mid);
  padding: 4px 10px;
  font-family: var(--font-serif);
  font-size: 0.84rem;
  color: var(--poe-gold-muted);
}

.passive-points-pill strong {
  color: var(--poe-gold);
}

.tree-canvas-container {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #0f0c08 0%, #030202 100%);
  overflow: hidden;
}

#passiveTreeCanvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

.map-device-intro {
  margin: 6px 0;
  padding: 0 14px;
  font-size: 0.86rem;
  line-height: 1.25;
  color: #b5a690;
}

.atlas-map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 14px 10px;
}

.map-card {
  background: #060504;
  border: 1px solid #33281a;
  padding: 8px 10px;
  cursor: pointer;
}

.map-card.selected {
  border: 1px solid var(--poe-gold);
  background: linear-gradient(180deg, #1f170d 0%, #090705 100%);
}

.map-tier-badge {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--poe-gold-muted);
}

.map-card h3 {
  margin: 2px 0 4px;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--poe-gold);
  line-height: 1.15;
}

.map-stat-line {
  font-size: 0.8rem;
  color: var(--poe-mod-blue);
  margin-bottom: 3px;
  line-height: 1.2;
}

.map-desc {
  font-size: 0.78rem;
  color: #a3937c;
  line-height: 1.22;
}

.map-device-actions {
  padding: 0 14px;
  display: flex;
  gap: 10px;
}

/* ========================================================================= */
/* AUTHENTIC PATH OF EXILE 1 ITEM & GEM TOOLTIP                              */
/* ========================================================================= */
.poe-tooltip {
  position: fixed;
  z-index: 120;
  background: rgba(0, 0, 0, 0.97);
  border: 1px solid #6e583b;
  min-width: 310px;
  max-width: 390px;
  box-shadow: 0 14px 42px #000;
  pointer-events: none;
  font-size: 0.94rem;
  text-align: center;
}

.poe-tooltip.tt-border-normal { border-color: #787878; }
.poe-tooltip.tt-border-magic  { border-color: #5252b8; }
.poe-tooltip.tt-border-rare   { border-color: #9e9132; }
.poe-tooltip.tt-border-unique { border-color: #964c1b; }
.poe-tooltip.tt-border-gem    { border-color: #1ba29b; }

.tt-header {
  padding: 7px 14px;
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1.24;
  position: relative;
  border-bottom: 1px solid #3d3122;
}

.tt-header-normal {
  background: linear-gradient(90deg, #141414 0%, #2b2b2b 50%, #141414 100%);
  border-bottom-color: #6b6b6b;
  color: var(--rarity-normal);
}

.tt-header-magic {
  background: linear-gradient(90deg, #0b0d24 0%, #1c2252 50%, #0b0d24 100%);
  border-bottom-color: #4f59b8;
  color: var(--rarity-magic);
}

.tt-header-rare {
  background: linear-gradient(90deg, #171406 0%, #3b320d 50%, #171406 100%);
  border-bottom-color: #9e8f2e;
  color: var(--rarity-rare);
}

.tt-header-unique {
  background: linear-gradient(90deg, #1a0b04 0%, #3d1b08 50%, #1a0b04 100%);
  border-bottom-color: #964c1b;
  color: var(--rarity-unique);
}

.tt-header-gem {
  background: linear-gradient(90deg, #061716 0%, #103835 50%, #061716 100%);
  border-bottom-color: #1ba29b;
  color: var(--rarity-gem);
}

.tt-title-main {
  font-size: 1.06rem;
}

.tt-title-base {
  font-size: 0.88rem;
  opacity: 0.94;
}

.tt-body {
  padding: 8px 14px 10px;
}

.tt-prop-line {
  color: var(--poe-prop-grey);
  font-size: 0.9rem;
}

.tt-prop-line strong {
  color: #ffffff;
  font-weight: 700;
}

.tt-separator {
  height: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}

.tt-separator::before {
  content: '';
  width: 85%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #59472e 50%, transparent 100%);
}

.tt-implicit {
  color: var(--poe-mod-blue);
  font-size: 0.94rem;
}

.tt-affix {
  color: var(--poe-mod-blue);
  font-size: 0.94rem;
  margin: 2px 0;
}

.tt-deltas-box {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #2e2418;
}

.tt-delta-title {
  font-family: var(--font-serif);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--poe-gold-muted);
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}

.delta-pos {
  color: #47d147;
  font-size: 0.9rem;
  font-weight: 600;
}

.delta-neg {
  color: #e04343;
  font-size: 0.9rem;
  font-weight: 600;
}

.tt-flavor {
  margin-top: 6px;
  font-style: italic;
  color: var(--rarity-unique);
  font-size: 0.88rem;
}

.tt-hint {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 0.76rem;
  color: #9e8d73;
}

/* Center Area Banner Announcement */
.banner-announcement {
  position: fixed;
  top: 112px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(5, 4, 3, 0.95) 18%, rgba(5, 4, 3, 0.95) 82%, transparent 100%);
  padding: 8px 52px;
  text-align: center;
  z-index: 30;
  pointer-events: none;
}

.banner-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--poe-brass-bright) 50%, transparent 100%);
  margin: 4px 0;
}

.banner-title {
  font-family: var(--font-serif);
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--poe-gold);
  text-shadow: 0 2px 6px #000;
}

.banner-sub {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--poe-gold-muted);
}

/* ========================================================================= */
/* RESPONSIVE VIEWPORT SCALING FOR LAPTOP & COMPACT WINDOWS                  */
/* ========================================================================= */
@media (max-width: 1180px), (max-height: 780px) {
  .bottom-hud {
    height: 152px;
  }
  .poe-corner-globe {
    width: 150px;
    height: 150px;
  }
  .globe-orb-wrapper {
    width: 132px;
    height: 132px;
  }
  .globe-sphere {
    width: 112px;
    height: 112px;
  }
  .globe-num-plate {
    font-size: 0.74rem;
    padding: 1px 8px;
  }
  .plate-lbl { font-size: 0.68rem; }
  .plate-val { font-size: 0.78rem; }
  .plate-es-val { font-size: 0.72rem; }
  .stats-mini-list { width: 72%; gap: 1px; }
  .stats-mini-list span { font-size: 0.56rem; }
  .stats-mini-list strong { font-size: 0.64rem; }

  .flask-slot {
    width: 35px;
    height: 54px;
  }
  .flask-svg-wrap {
    width: 28px;
    height: 30px;
  }
  .poe-skill-socket {
    width: 46px;
    height: 46px;
  }
  .poe-menu-btn {
    width: 38px;
    height: 46px;
  }
  .poe-chat-widget {
    bottom: 158px;
    width: 270px;
  }
  .chat-messages {
    height: 62px;
    font-size: 0.8rem;
  }
  #minimapCanvas {
    width: 138px;
    height: 138px;
  }
  .poe-dock-panel {
    top: 36px;
    bottom: 72px;
    width: min(410px, 48vw);
  }
}

@media (max-width: 960px) {
  .poe-corner-globe {
    width: 124px;
    height: 128px;
  }
  .globe-orb-wrapper {
    width: 112px;
    height: 112px;
  }
  .globe-sphere {
    width: 96px;
    height: 96px;
  }
  .stats-mini-list span { font-size: 0.5rem; }
  .stats-mini-list strong { font-size: 0.58rem; }
  .flask-slot {
    width: 31px;
    height: 48px;
  }
  .poe-skill-socket {
    width: 41px;
    height: 41px;
  }
  .poe-menu-btn {
    width: 34px;
    height: 41px;
  }
  .menu-lbl {
    font-size: 0.58rem;
  }
  .char-create-top-bar {
    grid-template-columns: 210px minmax(0, 1fr);
  }
}