/* ═══════════════════════════════════════════════
   DREADMARK ONLINE — HUD LAYOUT
═══════════════════════════════════════════════ */

#screen-game {
  flex-direction: column;
  background: var(--bg-darkest);
  overflow: hidden;
}

/* ── MAIN LAYOUT ── */
#game-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 300px 1fr 280px;
  grid-template-areas:
    "topbar   topbar    topbar"
    "sidebar  main      rightsidebar"
    "sidebar  actionbar rightsidebar";
  width: 100%; height: 100%;
  gap: 0;
  overflow: hidden;
}

/* ── TOP BAR ── */
#topbar {
  grid-area: topbar;
  background: linear-gradient(180deg, #120c10 0%, #0d080c 100%);
  border-bottom: 2px solid var(--border-gold);
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 40px;
  gap: 16px;
  position: relative;
  z-index: 10;
}

#topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

#topbar-mini-logo {
  height: 30px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(200,140,30,0.45));
}

#topbar-logo-text {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-gold);
  text-shadow: 0 0 8px rgba(200,140,30,0.5);
  white-space: nowrap;
}

#topbar-divider {
  height: 20px;
  width: 1px;
  background: var(--border-dark);
}

#player-info-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

#player-name-bar {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-gold);
  letter-spacing: 1px;
  white-space: nowrap;
}

#player-level-bar {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
}

.topbar-xp-wrap {
  flex: 1;
  max-width: 200px;
}

.topbar-xp-label {
  font-size: 9px;
  color: var(--text-dim);
  font-family: var(--font-ui);
  letter-spacing: 1px;
  margin-bottom: 2px;
}

#topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.gold-display {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--gold-coin);
}

.gold-display .gold-icon { font-size: 13px; }

/* ── LEFT SIDEBAR ── */
#sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-right: 1px solid var(--border-gold);
}

/* Icon Nav */
#side-nav {
  width: 64px;
  flex-shrink: 0;
  background: #06040a;
  border-right: 1px solid rgba(107,74,26,0.3);
  display: flex;
  scrollbar-width: none; /* Firefox */
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
  overflow-y: auto;
}
#side-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */

.snb {
  width: 58px;
  height: 64px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s;
  padding: 0;
}
.snb:hover { background: rgba(100,70,20,0.2); color: var(--text-light); border-color: rgba(107,74,26,0.3); }
.snb.active { background: rgba(100,70,20,0.35); color: var(--text-gold); border-color: var(--border-gold); }
.snb-icon { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.snb-label { font-size: 8px; font-family: var(--font-ui); letter-spacing: 1px; text-transform: uppercase; }

/* Panel Area */
#side-panels {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.side-panel {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}
.side-panel.active { display: flex; }

.side-panel-header {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-gold);
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-gold);
  letter-spacing: 2px;
  background: rgba(107,74,26,0.1);
  flex-shrink: 0;
  text-transform: uppercase;
  text-align: center;
}

.side-section-label {
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 10px 3px;
  border-top: 1px solid rgba(107,74,26,0.2);
  flex-shrink: 0;
}

/* Character Portrait */
#char-panel {
  background: linear-gradient(180deg, #1a1018 0%, #100c12 100%);
  border-bottom: 1px solid var(--border-gold);
  padding: 10px;
}

#char-portrait-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

#char-portrait {
  width: 48px; height: 48px;
  border: 2px solid var(--border-gold);
  border-radius: 3px;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

#char-portrait::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.08) 0%, transparent 60%);
}

#char-stats-mini {
  flex: 1;
  min-width: 0;
}

#char-name {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-gold);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#char-class-level {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Mini Bars */
.mini-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.mini-bar-label {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  width: 16px;
  letter-spacing: 0;
  text-align: right;
  flex-shrink: 0;
}

.mini-bar-wrap {
  flex: 1;
  height: 10px;
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--border-dark);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

.mini-bar-value {
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  width: 50px;
  text-align: right;
  flex-shrink: 0;
}

/* Stat Points */
#stat-points-panel {
  display: none;
  background: rgba(200,150,42,0.08);
  border: 1px solid var(--border-gold);
  border-radius: 2px;
  padding: 8px;
  margin-top: 6px;
}

#stat-points-panel.visible { display: block; }

.stat-points-title {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-gold);
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(107,74,26,0.2);
}

.stat-row:last-child { border-bottom: none; }

.stat-name {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  width: 28px;
}

.stat-val {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-gold);
  flex: 1;
}

.stat-plus-btn {
  background: rgba(100,70,20,0.4);
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  width: 18px; height: 18px;
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1px;
  transition: all 0.1s;
  line-height: 1;
}

.stat-plus-btn:hover {
  background: rgba(150,100,30,0.6);
  box-shadow: 0 0 6px rgba(200,150,42,0.3);
}

/* Area Navigation */
#area-panel {
  border-bottom: 1px solid var(--border-gold);
}

.area-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(107,74,26,0.2);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 11px;
  padding: 6px 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.area-btn-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.area-btn:hover { background: rgba(100,70,20,0.2); color: var(--text-light); }
.area-btn.active { background: rgba(100,70,20,0.3); color: var(--text-gold); border-left: 2px solid var(--border-gold-bright); }
.area-btn .area-level { font-size: 9px; color: var(--text-dim); margin-left: auto; }

/* Encounter composition row */
.area-encounter {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 2px;
}
.enc-token {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-family: var(--font-ui);
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 2px;
  line-height: 1.4;
}
.enc-normal { background: rgba(80,80,80,0.35);   color: #bbb;    border: 1px solid rgba(120,120,120,0.3); }
.enc-elite  { background: rgba(100,20,180,0.30); color: #c088ff; border: 1px solid rgba(140,40,220,0.45); }
.enc-boss   { background: rgba(180,80,10,0.30);  color: #ffaa55; border: 1px solid rgba(220,110,20,0.45); }
.enc-sep    { color: var(--text-dim); font-size: 8px; }

/* ── SAFE ZONE REST HOUSE PANEL ── */
#safe-zone-panel {
  margin: 16px 12px;
  border: 1px solid rgba(107,74,26,0.4);
  border-radius: 4px;
  background: rgba(8,5,10,0.7);
  overflow: hidden;
}

.sz-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  background: rgba(107,74,26,0.12);
  border-bottom: 1px solid rgba(107,74,26,0.25);
}
.sz-house-icon { font-size: 22px; line-height: 1; }
.sz-title {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--text-gold);
  letter-spacing: 1px;
}
.sz-subtitle {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-top: 1px;
}

/* Pulsing green dot = resting */
.sz-pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #44cc66;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(68,204,102,0.7);
  animation: szPulse 1.8s ease-in-out infinite;
}
@keyframes szPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    box-shadow: 0 0 6px rgba(68,204,102,0.7); }
  50%       { opacity: 0.5; transform: scale(0.75); box-shadow: 0 0 2px rgba(68,204,102,0.3); }
}

/* HP / MP bars */
.sz-bars {
  padding: 12px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sz-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sz-bar-label { font-size: 12px; flex-shrink: 0; width: 18px; }
.sz-bar-track {
  flex: 1;
  height: 8px;
  background: #0e0608;
  border: 1px solid rgba(80,20,20,0.5);
  border-radius: 2px;
  overflow: hidden;
}
.sz-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.sz-hp { background: linear-gradient(90deg, #8b0000, #cc2020); }
.sz-mp { background: linear-gradient(90deg, #00008b, #2020cc); }
.sz-bar-val {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  width: 72px;
  text-align: right;
  flex-shrink: 0;
}

/* Regen info block */
.sz-regen-block {
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(107,74,26,0.2);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sz-regen-header {
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.sz-regen-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sz-regen-badge {
  font-family: var(--font-ui);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sz-regen-badge.natural { background: rgba(20,80,20,0.4); color: #88cc88; border: 1px solid rgba(40,120,40,0.35); }
.sz-regen-badge.house   { background: rgba(100,70,10,0.4); color: #ddaa55; border: 1px solid rgba(140,100,20,0.35); }
.sz-regen-val {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-light);
}
.sz-per5s { color: var(--text-dim); font-size: 8px; }

/* ── SAFE ZONE VENDOR ── */
.sz-vendor {
  border-top: 1px solid rgba(107,74,26,0.35);
  margin-top: 4px;
}
.sz-vendor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 12px 3px;
  font-family: var(--font-title);
  font-size: 10px;
  color: var(--text-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  background: rgba(107,74,26,0.1);
}
.sz-vendor-gold {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-gold);
  letter-spacing: 0;
  text-transform: none;
}
.sz-vendor-cat {
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 12px 3px;
  border-bottom: 1px solid rgba(107,74,26,0.2);
}
.sz-vendor-cat-note {
  font-size: 8px;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Vendor item cards (like smelt-qcard) ── */
.vendor-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px;
}
.vendor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(107,74,26,0.35);
  border-radius: 6px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  cursor: default;
}
.vendor-card:hover {
  background: rgba(107,74,26,0.1);
  border-color: rgba(180,130,50,0.55);
}
.vendor-card-img {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vendor-card-img img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}
.vendor-card-img-fb { font-size: 28px; line-height: 1; }
.vendor-card-name {
  font-family: var(--font-title);
  font-size: 9px;
  color: var(--text-gold);
  line-height: 1.2;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vendor-card-desc {
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  line-height: 1.3;
  flex: 1;
}
.vendor-card-price {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #e8c86a;
  font-weight: bold;
  line-height: 1;
}
.vendor-card-btns {
  display: flex;
  gap: 3px;
  width: 100%;
  justify-content: center;
}
.vendor-card-btn {
  background: rgba(180,80,20,0.2);
  border: 1px solid rgba(220,100,30,0.45);
  color: rgba(255,180,80,0.9);
  font-family: var(--font-title);
  font-size: 9px;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 4px;
  flex: 1;
  transition: background 0.15s;
}
.vendor-card-btn:hover { background: rgba(220,110,30,0.35); }
.vendor-card-btn:active { background: rgba(220,110,30,0.55); }

/* ── Vendor Buy/Sell Tabs ── */
.vendor-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 2px solid rgba(100,160,30,0.3);
  background: rgba(0,0,0,0.18);
}
.vendor-tab {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(100,160,30,0.2);
  border-bottom: none;
  color: var(--text-dim);
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 32px 11px;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  position: relative;
  bottom: -2px;
}
.vendor-tab:hover { color: var(--text-gold); background: rgba(100,160,30,0.1); border-color: rgba(100,160,30,0.35); }
.vendor-tab.active {
  color: #c8ee55;
  background: rgba(55,90,15,0.45);
  border-color: rgba(130,200,40,0.5);
  border-bottom-color: transparent;
}
#city-main[data-npc="vendor"] .vendor-tab.active { color: #c8ee55; }
.vendor-tab-gold {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 11px;
  color: #a8cc55;
  padding-bottom: 10px;
}

/* ── Vendor Sell Tab ── */
.vendor-sell-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.vsl-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(100,160,30,0.15);
}
.vsl-add-all {
  background: rgba(55,90,15,0.45);
  border: 1px solid rgba(100,160,30,0.55);
  color: #a8cc55;
  font-family: var(--font-title);
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 5px 14px;
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.vsl-add-all:hover { background: rgba(75,125,20,0.6); border-color: rgba(140,210,40,0.7); }
.vsl-add-all:active { background: rgba(100,160,25,0.7); }
.vsl-clear-btn {
  background: rgba(80,20,20,0.35);
  border: 1px solid rgba(180,50,50,0.4);
  color: rgba(255,120,120,0.7);
  font-family: var(--font-ui);
  font-size: 9px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background 0.15s;
}
.vsl-clear-btn:hover { background: rgba(140,30,30,0.5); color: #ff9999; }
.vsl-count-badge {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  opacity: 0.75;
}
.vsl-grid {
  display: grid;
  grid-template-columns: repeat(6, 75px);
  gap: 4px;
  padding: 8px 10px;
  justify-content: center;
}
.vsl-slot {
  width: 75px;
  height: 75px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.12s, background 0.12s;
}
.vsl-slot.empty {
  cursor: default;
  opacity: 0.3;
}
.vsl-slot[data-filled]:hover {
  background: rgba(90,15,15,0.45);
}
.vsl-slot.vsl-drag-over {
  border-color: #a8cc55 !important;
  background: rgba(55,90,15,0.35) !important;
  box-shadow: inset 0 0 8px rgba(100,160,30,0.3);
}
.vsl-slot img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.vsl-slot-price {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-family: var(--font-ui);
  font-size: 8px;
  color: #e8c86a;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}
.vsl-slot-count {
  position: absolute;
  top: 2px;
  left: 3px;
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-light);
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}
.vsl-slot-remove-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(80,10,10,0.82);
  color: rgba(255,90,90,0.95);
  font-size: 18px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
  z-index: 2;
}
.vsl-slot[data-filled]:hover .vsl-slot-remove-overlay { opacity: 1; }
.vsl-empty {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  padding: 10px 14px 14px;
  line-height: 1.7;
}
.vsl-empty b { color: #a8cc55; }
.vsl-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(100,160,30,0.2);
  background: rgba(0,0,0,0.12);
}
.vsl-total {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
  min-height: 14px;
}
.vsl-total b { color: #e8c86a; font-size: 13px; }
.vsl-sell-all {
  width: 100%;
  background: linear-gradient(180deg, rgba(80,130,20,0.75) 0%, rgba(45,80,10,0.85) 100%);
  border: 1px solid rgba(140,210,40,0.7);
  border-bottom-color: rgba(80,130,15,0.8);
  color: #d8f060;
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 11px 0;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(80,160,20,0.2), inset 0 1px 0 rgba(200,255,80,0.1);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.vsl-sell-all:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(110,180,25,0.85) 0%, rgba(65,110,15,0.9) 100%);
  border-color: rgba(180,255,50,0.85);
  box-shadow: 0 3px 16px rgba(100,200,20,0.35), inset 0 1px 0 rgba(220,255,100,0.15);
  color: #eeff80;
}
.vsl-sell-all:active:not(:disabled) {
  background: linear-gradient(180deg, rgba(55,100,15,0.9) 0%, rgba(80,140,20,0.85) 100%);
  box-shadow: 0 1px 4px rgba(60,120,10,0.3);
}
.vsl-sell-all:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: rgba(100,120,60,0.3);
  color: #8a9a50;
  box-shadow: none;
}

/* ── Quest Sidebar Panel ── */
#quest-panel {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qp-empty {
  text-align: center;
  padding: 20px 10px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
}
.qp-entry {
  padding: 8px 10px;
  border: 1px solid rgba(107,74,26,0.22);
  border-radius: 6px;
  background: rgba(0,0,0,0.25);
}
.qp-entry.qp-completed {
  border-color: rgba(80,200,100,0.35);
  background: rgba(20,60,20,0.25);
}
.qp-entry-head {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-light);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qp-done-tag {
  font-size: 9px;
  color: #66ee88;
  margin-left: auto;
}
.qp-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.qp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c8a96e, #e8d090);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.qp-prog-text {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 3px;
  text-align: right;
}

/* ══════════════════════════════════════
   QUEST BOARD NPC PANEL
══════════════════════════════════════ */
.qb-subtitle {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  padding: 6px 0 10px;
  text-align: center;
}
.qb-slots-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ── Individual slot card ── */
.qb-slot {
  border-radius: 8px;
  border: 1px solid rgba(107,74,26,0.25);
  background: rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.qb-slot-available  { border-color: rgba(200,169,110,0.30); }
.qb-slot-active     { border-color: rgba(100,180,255,0.30); background: rgba(10,20,50,0.30); }
.qb-slot-completed  { border-color: rgba(80,200,100,0.40);  background: rgba(10,50,20,0.30); }
.qb-slot-cooldown   {
  border-color: rgba(80,80,80,0.25);
  opacity: 0.72;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
}
.qb-slot-empty      {
  border-color: rgba(60,60,60,0.20);
  opacity: 0.50;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
}

/* Cooldown / empty inner wrap */
.qb-slot-cd-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ── Image block (top of card) ── */
.qb-slot-img-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 12px 8px 8px;
  gap: 5px;
  position: relative;
}
.qb-target-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}
.qb-img-fallback {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
}
.qb-slot-type-tag {
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Body block (bottom of card) ── */
.qb-slot-body {
  flex: 1;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qb-quest-name {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-light);
  line-height: 1.3;
  text-align: center;
}
.qb-quest-name strong { color: var(--text-gold); font-size: 11px; }

/* Progress bar */
.qb-progress-track {
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.qb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a9eff, #a0c8ff);
  border-radius: 3px;
  transition: width 0.35s ease;
}
.qb-slot-completed .qb-progress-fill { background: linear-gradient(90deg, #22dd66, #88ffaa); }
.qb-progress-text {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  text-align: center;
}

/* Reward row */
.qb-reward-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 9px;
  margin-top: 1px;
}
.qb-reward-xp   { color: #a8d4ff; }
.qb-reward-gold { color: #e8c870; }

/* Buttons */
.qb-btn {
  margin-top: 4px;
  padding: 6px 0;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}
.qb-btn-accept {
  background: rgba(200,169,110,0.12);
  border-color: rgba(200,169,110,0.35);
  color: var(--text-gold);
}
.qb-btn-accept:hover {
  background: rgba(200,169,110,0.22);
  border-color: rgba(200,169,110,0.65);
}
.qb-btn-claim {
  background: rgba(34,180,80,0.20);
  border-color: rgba(34,200,90,0.55);
  color: #88ffaa;
  font-weight: bold;
  animation: qbClaimPulse 1.4s ease-in-out infinite;
}
.qb-btn-claim:hover {
  background: rgba(34,200,80,0.35);
}
@keyframes qbClaimPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(34,200,80,0.35); }
  50%       { box-shadow: 0 0 14px rgba(34,200,80,0.70); }
}
.qb-btn-active {
  margin-top: 4px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #6ab0ff;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Cooldown + empty states (centered in card) */

/* Cooldown + empty states */
.qb-slot-cd-icon, .qb-slot-empty-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 4px;
}
.qb-slot-cd-label, .qb-slot-empty-label {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.qb-slot-cd-timer {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-gold);
  margin-top: 2px;
}

/* ── SKILL TREE PANEL ── */
#st-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 5px;
  border-bottom: 1px solid rgba(107,74,26,0.3);
  flex-shrink: 0;
}
#st-class-name {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-gold);
  letter-spacing: 1px;
  text-transform: uppercase;
}
#st-class-lv {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
}
#st-points-row {
  padding: 4px 12px;
  font-family: var(--font-ui);
  font-size: 9px;
  color: #44cc66;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(107,74,26,0.2);
  flex-shrink: 0;
}
#st-nodes-list {
  flex: 1;
  overflow-y: auto;
}
.st-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 10px;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(107,74,26,0.1);
}
.st-node-lv {
  font-family: var(--font-ui);
  font-size: 9px;
  width: 18px;
  flex-shrink: 0;
  text-align: center;
}
.st-node-desc {
  font-family: var(--font-ui);
  font-size: 9px;
  flex: 1;
  line-height: 1.4;
}
.st-node-icon {
  font-family: var(--font-ui);
  font-size: 9px;
  flex-shrink: 0;
  width: 12px;
  text-align: center;
}

/* Unlocked — green */
.st-node.st-unlocked { border-left-color: rgba(50,180,80,0.5); }
.st-node.st-unlocked .st-node-lv   { color: #44cc66; }
.st-node.st-unlocked .st-node-desc { color: #88ddaa; }
.st-node.st-unlocked .st-node-icon { color: #44cc66; }

/* Next to unlock — gold highlight */
.st-node.st-next {
  border-left-color: var(--border-gold-bright);
  background: rgba(107,74,26,0.14);
}
.st-node.st-next .st-node-lv   { color: var(--text-gold); }
.st-node.st-next .st-node-desc { color: var(--text-gold); }
.st-node.st-next .st-node-icon { color: var(--text-gold); }

/* Locked — dimmed */
.st-node.st-locked .st-node-lv   { color: rgba(255,255,255,0.18); }
.st-node.st-locked .st-node-desc { color: rgba(255,255,255,0.18); }
.st-node.st-locked .st-node-icon { color: rgba(255,255,255,0.12); }

/* ── MAIN AREA ── */
#main-area {
  grid-area: main;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Arena / World View */
#arena {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid var(--border-dark);
  min-height: 0;
}

#arena-bg {
  position: absolute; inset: 0;
  background-image: none; /* definido dinamicamente por updateAreaDisplay() */
  background-size: cover;
  background-position: center;
  /* Escurece a imagem para não competir com os sprites */
  filter: brightness(0.65);
  /* Máscara radial: visível no centro (ao redor dos monstros), fade até preto nas bordas.
     ~75-80% da área vai a transparente → mostra o fundo preto do #arena */
  -webkit-mask-image: radial-gradient(
    ellipse 58% 68% at 50% 54%,
    black        0%,
    black        12%,
    rgba(0,0,0,0.6) 42%,
    rgba(0,0,0,0.15) 65%,
    transparent  80%
  );
  mask-image: radial-gradient(
    ellipse 58% 68% at 50% 54%,
    black        0%,
    black        12%,
    rgba(0,0,0,0.6) 42%,
    rgba(0,0,0,0.15) 65%,
    transparent  80%
  );
}

/* ── Map View (inline in arena) ─────────────────── */
#map-view {
  position: absolute;
  inset: 0;
  z-index: 4;               /* above city-view */
  display: none;            /* toggled via JS */
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: #06080f;
  overflow: hidden;
}
#map-view.visible {
  display: flex;
  opacity: 1;
}
#map-view #map-overlay-header {
  padding: 6px 12px;
  flex-shrink: 0;
  background: rgba(4, 6, 18, 0.65);
  border-bottom: 1px solid rgba(200,169,110,0.12);
}
#map-view #map-img-container {
  flex: 1;
  min-height: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
#map-view #map-overlay-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: none;
}

/* ── City View ──────────────────────────────────── */
#city-view {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;           /* toggled via JS */
  opacity: 0;
  transition: opacity 0.35s ease;
  overflow: hidden;
  background: #0a0608;
}
#city-view.visible {
  display: block;
  opacity: 1;
}
#city-view-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* slight darkening so text/glows pop */
  filter: brightness(0.82) saturate(1.1);
}

/* ── Hotspot glow overlays ── */
.cv-spot {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 50%;
}
.cv-spot.active { opacity: 1; }

/* Label centered on the glow */
.cv-spot::after {
  content: attr(data-label);
  position: absolute;
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f0d080;
  text-shadow:
    0 0 8px rgba(0,0,0,1),
    0 0 16px rgba(0,0,0,0.9),
    0 1px 3px rgba(0,0,0,1);
  white-space: nowrap;
  pointer-events: none;
}

/* House — left building */
.cv-spot[data-npc="house"] {
  left:  6%;  top: 6%;
  width: 34%; height: 59%;
  background: radial-gradient(ellipse at 50% 60%,
    rgba(255, 185, 70, 0.55) 0%,
    rgba(255, 150, 40, 0.30) 35%,
    transparent 70%
  );
  filter: blur(6px);
}

/* Vendor — shop with awning, right of center */
.cv-spot[data-npc="vendor"] {
  left:  47%; top:  15%;
  width: 41%; height: 44%;
  background: radial-gradient(ellipse at 50% 55%,
    rgba(80, 220, 200, 0.45) 0%,
    rgba(60, 180, 160, 0.25) 38%,
    transparent 70%
  );
  filter: blur(6px);
}

/* Storage — right building with chest */
.cv-spot[data-npc="storage"] {
  left:  73%; top: 44%;
  width: 28%; height: 34%;
  background: radial-gradient(ellipse at 50% 55%,
    rgba(200, 160, 50, 0.50) 0%,
    rgba(180, 120, 30, 0.28) 38%,
    transparent 70%
  );
  filter: blur(6px);
}

/* Quest Board — center notice board */
.cv-spot[data-npc="questboard"] {
  left:  37%; top: 37%;
  width: 24%; height: 28%;
  background: radial-gradient(ellipse at 50% 55%,
    rgba(220, 80,  40, 0.50) 0%,
    rgba(180, 55,  25, 0.28) 38%,
    transparent 70%
  );
  filter: blur(5px);
}

/* Exploration — gate / exit (top-center) */
.cv-spot[data-npc="exploration"] {
  left:  42%; top:  7%;
  width: 26%; height: 40%;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(48, 140, 255, 0.45) 0%,
    rgba( 41, 135, 236, 0.25) 50%,
    transparent 70%
  );
  filter: blur(6px);
}

/* ── Invisible click areas on city image ── */
.cv-click {
  position: absolute;
  cursor: pointer;
  z-index: 4;
}
.cv-click[data-npc="house"]       { left: 3%;  top: 18%; width: 28%; height: 62%; }
.cv-click[data-npc="vendor"]      { left: 49%; top:  8%; width: 28%; height: 56%; }
.cv-click[data-npc="storage"]     { left: 70%; top: 22%; width: 28%; height: 55%; }
.cv-click[data-npc="questboard"]  { left: 32%; top: 28%; width: 24%; height: 44%; }
.cv-click[data-npc="exploration"] { left: 36%; top:  0%; width: 26%; height: 40%; }

/* Tooltip label that appears on city-image hover */
.cv-click:hover::after {
  content: attr(data-label);
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 6, 3, 0.88);
  border: 1px solid rgba(180, 130, 50, 0.5);
  color: var(--text-gold);
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

/* Monster List / Combat */
#monster-list-panel, #combat-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 6px;
  overflow-y: auto;
}

#combat-panel { display: none; }
#combat-panel.active { display: flex; }
#monster-list-panel.hidden { display: none; }

.monster-card {
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border-dark);
  border-radius: 3px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.monster-card:hover {
  border-color: var(--border-gold);
  background: rgba(100,20,20,0.3);
}

.monster-card.dead {
  opacity: 0.35;
  cursor: not-allowed;
}

.monster-card.boss { border-color: rgba(200,100,0,0.5); }
.monster-card.elite { border-color: rgba(180,80,200,0.5); }

.monster-icon {
  font-size: 28px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

/* Monster image in card */
.monster-icon-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: auto;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.8));
}
.monster-card.boss   .monster-icon-img { filter: drop-shadow(0 0 6px rgba(255,120,0,0.6)); }
.monster-card.elite  .monster-icon-img { filter: drop-shadow(0 0 6px rgba(200,80,255,0.6)); }

/* Group badge */
.monster-group-badge {
  display: inline-block;
  font-size: 9px;
  background: rgba(200,169,110,0.20);
  border: 1px solid rgba(200,169,110,0.35);
  color: var(--text-gold);
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 4px;
  vertical-align: middle;
}

.monster-attack-hint {
  font-size: 14px;
  opacity: 0.5;
  flex-shrink: 0;
}

.monster-info { flex: 1; min-width: 0; }

.monster-name {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-light);
  letter-spacing: 0.5px;
}

.monster-name.boss-name  { color: #ff8040; }
.monster-name.elite-name { color: #b050ff; }

.monster-level {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

.monster-hp-bar {
  height: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 4px;
}

.monster-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #6b0000, #dd1111);
  transition: width 0.3s;
}

.monster-dead-label {
  font-size: 9px;
  color: #333;
  margin-top: 3px;
}

/* ════════════════════════════════════════
   NEW MONSTER GRID LAYOUT
════════════════════════════════════════ */

.monster-list-header {
  padding: 12px 8px 8px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.3);
  margin-bottom: 8px;
}

.header-titles {
  text-align: center;
}

.map-name {
  font-family: var(--font-title);
  font-size: 16px;
  color: var(--text-gold);
  letter-spacing: 2px;
  font-weight: bold;
  margin-bottom: 4px;
}

.zone-desc {
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(150, 150, 150, 0.9);
  letter-spacing: 0.5px;
}

.monster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px;
}

.monster-card-new {
  position: relative;
  background: rgba(10, 8, 18, 0.9);
  border: 2px solid rgba(100, 100, 100, 0.5);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  padding: 10px;
  min-height: 180px;
}

/* Glow overlay INSIDE the box, behind content */
.monster-card-new::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  z-index: 0;
  pointer-events: none;
}

.monster-card-new.glow-white::after {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
}

.monster-card-new.glow-duo::after {
  background: radial-gradient(ellipse at center, rgba(76,175,80,0.38) 0%, rgba(76,175,80,0.12) 50%, transparent 100%);
}

.monster-card-new.glow-trio::after {
  background: radial-gradient(ellipse at center, rgba(33,150,243,0.38) 0%, rgba(33,150,243,0.12) 50%, transparent 100%);
}

.monster-card-new.glow-elite::after {
  background: radial-gradient(ellipse at center, rgba(160,50,255,0.55) 0%, rgba(120,20,220,0.18) 55%, transparent 100%);
}

.monster-card-new.glow-boss::after {
  background: radial-gradient(ellipse at center, rgba(255,130,0,0.58) 0%, rgba(220,90,0,0.20) 55%, transparent 100%);
}

.monster-card-new.glow-superior::after {
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.45) 0%, rgba(255,185,0,0.15) 55%, transparent 100%);
}

.monster-card-new:hover {
  transform: translateY(-2px);
}

/* Content wrapper - image left (centered), text right (centered) */
.monster-card-content {
  display: flex;
  gap: 12px;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.monster-card-image-wrap {
  position: relative;
  flex: 1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.monster-card-image {
  max-width: 130px;
  max-height: 130px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8));
}

.monster-card-placeholder {
  font-size: 40px;
  opacity: 0.5;
}

.monster-card-info {
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: flex-start;
}

.monster-card-count {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgba(200,200,200,0.9);
}
.monster-card-count.count-common   { color: rgba(200,200,200,0.9); }
.monster-card-count.count-uncommon { color: rgba(80,200,100,0.9); }
.monster-card-count.count-rare     { color: rgba(80,140,255,0.95); }
.monster-card-count.count-special  { color: rgba(220,150,255,0.95); text-shadow: 0 0 6px rgba(200,100,255,0.4); }
.monster-card-count.count-elite    { color: rgba(180,80,255,1.0);   text-shadow: 0 0 8px rgba(160,50,255,0.70); font-weight: 700; letter-spacing: 1px; }
.monster-card-count.count-boss     { color: rgba(255,145,30,1.0);   text-shadow: 0 0 8px rgba(255,110,0,0.65);  font-weight: 700; letter-spacing: 1px; }
.monster-card-count.count-superior { color: rgba(255,215,60,1.0);   text-shadow: 0 0 8px rgba(255,200,0,0.65);  font-weight: 700; letter-spacing: 1px; }

/* Resource node rarity labels */
.resource-count-superior   { color: rgba(255,215,0,0.95);   text-shadow: 0 0 8px rgba(255,200,0,0.55);   font-weight: 700; }
.resource-count-epic      { color: rgba(180,80,255,0.95);  text-shadow: 0 0 8px rgba(163,53,238,0.60);  font-weight: 700; }
.resource-count-legendary { color: rgba(255,140,0,1.0);    text-shadow: 0 0 10px rgba(255,110,0,0.70);  font-weight: 700; letter-spacing: 0.5px; }

/* ─── Célula vazia (sem conteúdo) ──────────────────── */
.monster-card-respawn {
  background: rgba(6, 4, 16, 0.55);
  border: 1px solid rgba(60, 80, 140, 0.15);
  border-radius: 8px;
  min-height: 180px;
}

/* ================================================
   PROFESSIONS --- SIDEBAR CARDS
================================================ */

#prof-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
}

.prof-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(100,70,20,0.35);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  user-select: none;
}
.prof-card:hover {
  background: rgba(255,200,80,0.06);
  border-color: rgba(200,150,40,0.5);
  transform: translateX(2px);
}
.prof-card.active {
  border-color: rgba(200,150,40,0.8);
  background: rgba(255,200,80,0.1);
}
.prof-card-icon { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; }
.prof-card-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prof-card-top  { display: flex; align-items: center; gap: 6px; }
.prof-card-name { font-family: var(--font-title); font-size: 12px; color: var(--text-light); letter-spacing: 1px; flex: 1; }
.prof-card-level{ font-family: var(--font-ui); font-size: 10px; color: var(--text-gold); flex-shrink: 0; }
.prof-card-pts  {
  font-family: var(--font-title); font-size: 9px; color: #ffe76a;
  background: rgba(255,200,60,0.15); border: 1px solid rgba(255,200,60,0.4);
  border-radius: 10px; padding: 1px 6px; flex-shrink: 0;
  animation: profPtsPulse 2s ease-in-out infinite;
}
@keyframes profPtsPulse {
  0%, 100% { box-shadow: 0 0 3px rgba(255,200,60,0.3); }
  50%       { box-shadow: 0 0 8px rgba(255,200,60,0.7); }
}
.prof-card-xp-track { height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.prof-card-xp-fill  { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.prof-card-xp-pct   { font-family: var(--font-ui); font-size: 9px; color: var(--text-dim); }
.prof-card-arrow    { font-size: 18px; color: var(--text-dim); flex-shrink: 0; transition: color 0.15s; }
.prof-card:hover .prof-card-arrow { color: var(--text-gold); }

/* ================================================
   FORGE MAIN PANEL
================================================ */

#forge-main {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: radial-gradient(ellipse at top left,#1a1218 0%,#0d080c 100%); /* overridden dynamically per profession */
}

.forge-header {
  flex-shrink: 0;
  padding: 12px 16px 10px;
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(100,70,20,0.4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forge-back-btn {
  align-self: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 3px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.forge-back-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-light); }

.forge-title-group { display: flex; align-items: center; gap: 10px; }
.forge-title-icon  { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; }
.forge-title-icon-fb { font-size: 28px; flex-shrink: 0; line-height: 1; }
.forge-title-text  { flex: 1; min-width: 0; }
.forge-name {
  font-family: var(--font-title); font-size: 16px;
  color: var(--text-gold); letter-spacing: 2px;
}
.forge-sub {
  font-family: var(--font-body); font-size: 10px; color: var(--text-dim);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forge-level-badge {
  font-family: var(--font-title); font-size: 12px;
  padding: 3px 12px; border: 1px solid; border-radius: 20px; letter-spacing: 1px; flex-shrink: 0;
}
.forge-xp-row { display: flex; align-items: center; gap: 8px; }
.forge-xp-track { flex: 1; height: 6px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.forge-xp-fill  { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.forge-xp-text  { font-family: var(--font-ui); font-size: 10px; color: var(--text-dim); white-space: nowrap; }

.forge-talent-pts-badge {
  font-family: var(--font-title); font-size: 10px; color: #ffe76a;
  background: rgba(255,200,60,0.15); border: 1px solid rgba(255,200,60,0.5);
  border-radius: 12px; padding: 2px 10px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s; animation: forgePtsPulse 2s ease-in-out infinite;
}
.forge-talent-pts-badge:hover { background: rgba(255,200,60,0.25); }
@keyframes forgePtsPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255,200,60,0.3); }
  50%       { box-shadow: 0 0 12px rgba(255,200,60,0.7); }
}

.forge-inner-tabs {
  flex-shrink: 0; display: flex;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(100,70,20,0.4);
}
.forge-inner-tab {
  flex: 1; padding: 9px 4px; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--text-dim);
  font-family: var(--font-title); font-size: 11px; letter-spacing: 1px;
  cursor: pointer; transition: all 0.15s;
}
.forge-inner-tab:hover  { color: var(--text-light); background: rgba(255,255,255,0.04); }
.forge-inner-tab.active {
  color: var(--forge-accent, var(--text-gold));
  border-bottom-color: var(--forge-accent, var(--text-gold));
  background: rgba(255,255,255,0.05);
}
.forge-tab-dot {
  display: inline-block; width: 5px; height: 5px;
  background: var(--forge-accent, #ffe76a);
  border-radius: 50%; margin-left: 4px; vertical-align: middle;
  box-shadow: 0 0 5px var(--forge-accent, rgba(255,200,60,0.8));
}

#forge-tab-forge {
  flex: 1; overflow: hidden; display: flex; flex-direction: column; position: relative;
}
#forge-tab-smelt,
#forge-tab-refine,
#forge-tab-plank,
#forge-tab-enhance,
#forge-tab-weave,
#forge-tab-tan {
  flex: 1; overflow-y: auto; display: none;
}
#forge-tab-smelt::-webkit-scrollbar,
#forge-tab-refine::-webkit-scrollbar,
#forge-tab-plank::-webkit-scrollbar,
#forge-tab-enhance::-webkit-scrollbar,
#forge-tab-weave::-webkit-scrollbar,
#forge-tab-tan::-webkit-scrollbar { width: 4px; }
#forge-tab-smelt::-webkit-scrollbar-thumb,
#forge-tab-refine::-webkit-scrollbar-thumb,
#forge-tab-plank::-webkit-scrollbar-thumb,
#forge-tab-enhance::-webkit-scrollbar-thumb,
#forge-tab-weave::-webkit-scrollbar-thumb,
#forge-tab-tan::-webkit-scrollbar-thumb { background: rgba(139,101,53,0.5); border-radius: 2px; }
#forge-tab-talents {
  flex: 1; overflow-y: auto; display: none;
}
#forge-tab-talents::-webkit-scrollbar { width: 4px; }
#forge-tab-talents::-webkit-scrollbar-thumb { background: rgba(100,70,20,0.4); border-radius: 2px; }

.forge-mat-bar {
  flex-shrink: 0; display: flex; align-items: center; gap: 7px;
  padding: 7px 16px; background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(100,70,20,0.25);
  font-family: var(--font-ui); font-size: 11px;
}
.forge-mat-icon { font-size: 15px; }
.forge-mat-name { flex: 1; color: var(--text-dim); }
.forge-mat-qty  { color: var(--text-gold); font-weight: bold; }
.forge-mat-qty.zero { color: rgba(220,80,60,0.9); }

.forge-no-recipes {
  padding: 24px 16px; text-align: center;
  font-family: var(--font-body); font-size: 12px; color: var(--text-dim);
  font-style: italic;
}

.forge-all-recipes-scroll {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
}
.forge-all-recipes-scroll::-webkit-scrollbar { width: 4px; }
.forge-all-recipes-scroll::-webkit-scrollbar-thumb { background: rgba(100,70,20,0.4); border-radius: 2px; }

.forge-recipe-grid {
  flex: 1; overflow-y: auto; padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px; align-content: start;
}
.forge-recipe-grid::-webkit-scrollbar { width: 4px; }
.forge-recipe-grid::-webkit-scrollbar-thumb { background: rgba(100,70,20,0.4); border-radius: 2px; }
/* Non-scrolling variant used when multiple grids share a scroll container */
.forge-recipe-grid-inline {
  flex: none; overflow: visible; padding: 8px 12px 12px;
}

.forge-recipe-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(100,70,20,0.3);
  border-radius: 8px; padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color 0.15s, background 0.15s;
}
.forge-recipe-card:not(.locked):not(.no-mats):hover {
  border-color: rgba(200,150,40,0.5);
  background: rgba(255,255,255,0.04);
}
.forge-recipe-card.no-mats { opacity: 0.65; }
.forge-recipe-card.locked {
  opacity: 0.4; flex-direction: row; align-items: center;
  gap: 8px; padding: 10px 12px; pointer-events: none;
}

.frc-header           { display: flex; align-items: flex-start; gap: 9px; }
.frc-result-icon-wrap { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.frc-result-icon      { font-size: 30px; flex-shrink: 0; line-height: 1; }
.frc-result-img       { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; image-rendering: pixelated; border-radius: 6px; }
.frc-info        { flex: 1; min-width: 0; }
.frc-name {
  font-family: var(--font-title); font-size: 12px;
  color: var(--text-gold); letter-spacing: 0.5px;
}
.frc-yield  { font-family: var(--font-ui); font-size: 10px; color: rgba(220,180,60,0.7); margin-left: 4px; }
.frc-desc   { font-family: var(--font-body); font-size: 10px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }
.frc-level-badge {
  font-family: var(--font-ui); font-size: 9px; color: rgba(150,120,60,0.6);
  flex-shrink: 0; background: rgba(100,70,20,0.25); border-radius: 4px; padding: 1px 5px;
}

.frc-ingredients { display: flex; flex-direction: column; gap: 4px; }
.frc-ing-row     { display: flex; align-items: center; gap: 5px; }
.frc-ing-icon    { font-size: 13px; }
.frc-ing-img     { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; image-rendering: pixelated; }
.frc-ing-name    { font-family: var(--font-ui); font-size: 10px; color: var(--text-dim); flex: 1; }
.frc-ing-qty     { font-family: var(--font-ui); font-size: 10px; font-weight: bold; }
.frc-ing-qty.ok  { color: rgba(80,200,80,0.9); }
.frc-ing-qty.low { color: rgba(220,80,60,0.9); }

.frc-footer  { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
.frc-rewards { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.frc-xp-prof { font-family: var(--font-ui); font-size: 9px; color: rgba(160,120,60,0.8); }
.frc-xp-char { font-family: var(--font-ui); font-size: 9px; color: rgba(100,180,100,0.85); }
.frc-time    { font-family: var(--font-ui); font-size: 9px; color: var(--text-dim); }

.frc-lock-icon   { font-size: 18px; }
.frc-lock-text   { font-family: var(--font-ui); font-size: 9px; color: rgba(160,110,50,0.5); }
.frc-name-locked { font-family: var(--font-title); font-size: 11px; color: rgba(140,110,70,0.45); flex: 1; }

.forge-craft-btn {
  position: relative; padding: 8px 14px;
  background: var(--forge-accent-bg, rgba(180,120,30,0.15));
  border: 1px solid var(--forge-accent-border, rgba(200,150,40,0.4));
  border-radius: 5px; color: var(--forge-accent, var(--text-gold));
  font-family: var(--font-title); font-size: 11px; letter-spacing: 1px;
  cursor: pointer; overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0; min-width: 80px; text-align: center;
}
.forge-craft-btn:hover:not(:disabled) {
  background: var(--forge-accent-bg-hover, rgba(200,150,40,0.25));
  border-color: var(--forge-accent-border, rgba(220,170,60,0.7));
}
.forge-craft-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.forge-craft-progress {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--forge-accent-bg, rgba(200,140,30,0.35)), var(--forge-accent-bg-hover, rgba(230,180,50,0.55)));
  border-radius: 4px; pointer-events: none;
}
.forge-craft-label { position: relative; z-index: 1; }

/* ================================================
   SMELT UI (Blacksmith — Fundição tab)
================================================ */

.smelt-grid {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 16px; overflow-y: auto; flex: 1;
}

.smelt-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(200,120,30,0.3);
  border-radius: 6px; overflow: hidden;
}
.smelt-card.locked {
  opacity: 0.5;
}

.smelt-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(200,100,20,0.08);
  border-bottom: 1px solid rgba(200,120,30,0.2);
}
.smelt-hdr-imgs {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.smelt-hdr-img {
  width: 32px; height: 32px; object-fit: contain;
  image-rendering: pixelated;
}
.smelt-hdr-arrow {
  font-family: var(--font-ui); font-size: 12px; color: var(--text-dim);
}
.smelt-card-title { flex: 1; min-width: 0; }
.smelt-name {
  font-family: var(--font-title); font-size: 12px;
  color: var(--text-gold); display: block;
}
.smelt-sub {
  font-family: var(--font-ui); font-size: 9px; color: var(--text-dim);
}

.smelt-quality-rows { padding: 6px 0; }

.smelt-quality-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  transition: background 0.1s;
}
.smelt-quality-row:hover:not(.smelt-no-mats) { background: rgba(255,255,255,0.03); }
.smelt-no-mats { opacity: 0.45; }

.smelt-q-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.smelt-q-img {
  width: 22px; height: 22px; object-fit: contain;
  image-rendering: pixelated; flex-shrink: 0;
}
.smelt-q-name {
  font-family: var(--font-title); font-size: 10px;
  width: 65px; flex-shrink: 0;
}
.smelt-q-count {
  font-family: var(--font-ui); font-size: 10px; width: 38px; flex-shrink: 0;
}
.smelt-q-count.ok  { color: rgba(100,220,100,0.9); }
.smelt-q-count.low { color: rgba(200,70,50,0.9); }

.smelt-q-rewards {
  flex: 1; font-family: var(--font-ui); font-size: 9px;
  color: rgba(160,120,60,0.7); white-space: nowrap;
}

.smelt-btn {
  position: relative; overflow: hidden;
  padding: 5px 12px; font-family: var(--font-title); font-size: 10px;
  background: var(--forge-accent-bg, rgba(180,80,20,0.2));
  border: 1px solid var(--forge-accent-border, rgba(220,100,30,0.45));
  color: var(--forge-accent, rgba(255,180,80,0.9));
  border-radius: 4px; cursor: pointer;
  flex-shrink: 0; transition: background 0.15s;
}
.smelt-btn:hover:not(:disabled) { background: var(--forge-accent-bg-hover, rgba(220,110,30,0.3)); }
.smelt-btn-disabled, .smelt-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.smelt-btn-progress {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--forge-accent-bg, rgba(220,90,20,0.35)), var(--forge-accent-bg-hover, rgba(255,140,40,0.55)));
  border-radius: 4px; pointer-events: none;
  transition: width 0.08s linear;
}
.smelt-btn-label { position: relative; z-index: 1; }

/* ── Quality Card Layout (per-quality square cards) ────────────────────────── */
.smelt-tier-group {
  margin-bottom: 10px;
}
.smelt-qcard-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
}
.smelt-qcard {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(200,120,30,0.3);
  border-radius: 6px;
  text-align: center;
}
.smelt-qcard.smelt-no-mats { opacity: 0.45; }
.smelt-qcard-label {
  font-family: var(--font-title); font-size: 12px; font-weight: bold;
  white-space: nowrap; line-height: 1;
}
.smelt-qcard-imgs {
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.smelt-qcard-imgs img {
  width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated;
}
.smelt-qcard-imgs .smelt-qcard-qty {
  font-family: var(--font-ui); font-size: 11px; color: var(--text-dim);
}
.smelt-qcard-imgs .smelt-hdr-arrow { font-size: 13px; color: var(--text-dim); }
.smelt-qcard-stock {
  font-family: var(--font-ui); font-size: 13px; font-weight: bold; line-height: 1;
}
.smelt-qcard-stock.ok  { color: rgba(100,220,100,0.95); }
.smelt-qcard-stock.low { color: rgba(200,70,50,0.95); }
.smelt-qcard-xp {
  font-family: var(--font-ui); font-size: 10px;
  color: rgba(160,120,60,0.75); line-height: 1.4; white-space: nowrap;
}
.smelt-qcard .smelt-btn {
  width: 100%; padding: 5px 4px; font-size: 11px; margin-top: 2px;
}
/* 4-column variant (Enhancing) */
.smelt-qcard-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Multi-row image layout (Enhancing: essence + plank → core) */
.smelt-qcard-imgs.smelt-qcard-imgs-col {
  flex-direction: column; gap: 4px;
}
.smelt-qcard-imgs.smelt-qcard-imgs-col > div {
  display: flex; align-items: center; justify-content: center; gap: 5px;
}

/* ================================================
   TALENT TREE
================================================ */

.talent-pts-row {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(100,70,20,0.3);
  flex-shrink: 0;
}
.talent-pts-label  { font-family: var(--font-ui); font-size: 10px; color: var(--text-dim); letter-spacing: 1px; flex: 1; }
.talent-pts-val    { font-family: var(--font-title); font-size: 20px; color: var(--text-dim); line-height: 1; }
.talent-pts-val.has-pts { color: #ffe76a; text-shadow: 0 0 10px rgba(255,200,60,0.7); }
.talent-pts-spent  { font-family: var(--font-ui); font-size: 10px; color: var(--text-dim); }

.talent-tier { padding: 16px 12px 12px; border-bottom: 1px solid rgba(100,70,20,0.2); }
.talent-tier:last-child { border-bottom: none; }
.talent-tier-label {
  font-family: var(--font-title); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(200,150,60,0.55);
  text-align: center; margin-bottom: 12px; position: relative;
}
.talent-tier-label::before, .talent-tier-label::after {
  content: ''; position: absolute; top: 50%; width: 20%; height: 1px;
  background: rgba(200,150,60,0.2);
}
.talent-tier-label::before { left: 0; }
.talent-tier-label::after  { right: 0; }
.talent-tier.tier-locked .talent-tier-label { color: rgba(120,100,60,0.35); }
.talent-tier.tier-locked .talent-tier-label::before,
.talent-tier.tier-locked .talent-tier-label::after { background: rgba(100,80,40,0.15); }

.talent-tier-nodes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.talent-node {
  flex: 0 0 calc(50% - 4px); max-width: 180px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(100,70,20,0.22);
  border-radius: 8px; padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; transition: all 0.15s;
}
.talent-node.talent-available {
  border-color: rgba(200,150,40,0.55); background: rgba(200,150,40,0.06); cursor: pointer;
}
.talent-node.talent-available:hover {
  border-color: rgba(220,180,60,0.85); background: rgba(200,150,40,0.13);
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(200,150,40,0.15);
}
.talent-node.talent-unlocked {
  border-color: rgba(80,200,100,0.5); background: rgba(80,200,100,0.07);
}
.talent-node.talent-locked  { opacity: 0.3; }
.talent-node.talent-no-pts  { opacity: 0.5; }

.talent-icon { font-size: 24px; line-height: 1; }
.talent-name {
  font-family: var(--font-title); font-size: 10px; color: var(--text-light); letter-spacing: 0.5px;
}
.talent-node.talent-unlocked .talent-name { color: rgba(120,220,130,0.95); }
.talent-desc {
  font-family: var(--font-ui); font-size: 9px; color: var(--text-dim); line-height: 1.4;
}
.talent-status {
  font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.8px;
  margin-top: 3px; padding: 2px 8px; border-radius: 10px;
}
.talent-node.talent-unlocked .talent-status {
  color: rgba(80,200,100,0.95); background: rgba(80,200,100,0.12); border: 1px solid rgba(80,200,100,0.3);
}
.unlock-btn { color: var(--text-gold); background: rgba(200,150,30,0.18); border: 1px solid rgba(200,150,40,0.45); cursor: pointer; }
.no-pts-txt { color: rgba(140,120,80,0.5); }

/* ================================================
   FORGE EQUIPMENT RECIPE CARD (button + badge)
================================================ */
.forge-eq-card   { border-left: 2px solid rgba(150,100,220,0.45); }
.forge-eq-card:not(.no-mats):hover { border-color: rgba(180,130,255,0.7); }
.frc-eq-badge    { font-family: var(--font-ui); font-size: 9px; font-weight: bold; letter-spacing: 0.5px; margin-left: 4px; }
.forge-section-label {
  font-family: var(--font-ui); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(180,150,70,0.55); padding: 6px 12px 2px; flex-shrink: 0;
}

/* ── Forge Tier Tabs ─────────────────────────────────────── */
.forge-tier-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 10px 0; flex-shrink: 0;
}
.forge-tier-tab {
  padding: 4px 13px;
  font-family: var(--font-title); font-size: 11px; letter-spacing: 0.5px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(150,130,80,0.25);
  color: var(--text-dim);
  cursor: pointer; border-radius: 3px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.forge-tier-tab:hover {
  background: rgba(150,130,80,0.12);
  color: var(--text-light);
  border-color: rgba(150,130,80,0.45);
}
.forge-tier-tab.active {
  background: var(--forge-accent-bg, rgba(100,80,20,0.35));
  border-color: var(--forge-accent-border, rgba(150,130,80,0.6));
  color: var(--forge-accent, var(--text-gold));
}
.forge-tier-panels { flex: 1; overflow: hidden; }
.forge-tier-panel  { display: none; height: 100%; overflow-y: auto; }
.forge-tier-panel.active { display: block; }

.forge-eq-btn {
  background: var(--forge-accent-bg, rgba(130,80,200,0.2));
  border: 1px solid var(--forge-accent-border, rgba(150,100,220,0.5));
  color: var(--forge-accent, #c8a8ff);
  font-family: var(--font-ui); font-size: 10px; font-weight: bold;
  padding: 7px 14px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.forge-eq-btn:hover:not(:disabled) {
  background: var(--forge-accent-bg-hover, rgba(150,100,240,0.3));
  border-color: var(--forge-accent-border, rgba(180,130,255,0.8));
}
.forge-eq-btn-disabled, .forge-eq-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.forge-eq-locked {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.4);
}
.frc-lock-row {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: rgba(180,130,60,0.6);
  width: 100%;
  text-align: center;
  padding: 4px 0;
}

/* ================================================
   FORGE MATERIAL SELECTION (fms-)
================================================ */
.fms-overlay {
  display: flex; flex-direction: column; height: 100%;
  background: transparent; /* inherits profession BG from #forge-main */
}
.fms-header {
  padding: 12px 16px 10px; border-bottom: 1px solid rgba(100,70,20,0.35);
  background: rgba(0,0,0,0.4); flex-shrink: 0;
}
.fms-title { font-family: var(--font-title); font-size: 13px; color: var(--text-gold); margin: 6px 0 2px; }
.fms-recipe-name { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); }
.fms-body {
  flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px;
}
.fms-body::-webkit-scrollbar { width: 4px; }
.fms-body::-webkit-scrollbar-thumb { background: rgba(100,70,20,0.4); border-radius: 2px; }
.fms-ingredients { display: flex; flex-direction: column; gap: 14px; }
.fms-ing-group { display: flex; flex-direction: column; gap: 6px; }
.fms-ing-title { font-family: var(--font-ui); font-size: 11px; color: var(--text-light); font-weight: bold; }
.fms-ing-qty-req { color: var(--text-gold); }
.fms-ing-status { font-family: var(--font-ui); font-size: 10px; }
.fms-ing-status.ok  { color: rgba(80,200,80,0.9); }
.fms-ing-status.low { color: rgba(220,80,60,0.9); }
.fms-quality-opts { display: flex; flex-direction: column; gap: 4px; }
.fms-quality-opt {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-ui); font-size: 10px; transition: background 0.12s;
}
.fms-quality-opt:hover:not(.fms-not-enough) { background: rgba(255,255,255,0.06); }
.fms-quality-opt input[type="radio"] { accent-color: var(--text-gold); margin: 0; flex-shrink: 0; }
.fms-quality-opt.fms-not-enough { opacity: 0.4; cursor: not-allowed; }
.fms-qual-dot  { font-size: 10px; }
.fms-qual-name { flex: 1; font-weight: bold; }
.fms-qual-have { color: var(--text-dim); font-size: 9px; }
.fms-qual-bonus      { color: rgba(100,220,100,0.85); font-size: 9px; font-weight: bold; margin-left: auto; }
.fms-qual-bonus-zero { color: rgba(150,150,150,0.4); }
.fms-no-stock { font-family: var(--font-ui); font-size: 10px; color: rgba(220,80,60,0.7); }
.fms-quality-preview {
  background: rgba(0,0,0,0.35); border: 1px solid rgba(100,70,20,0.35);
  border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.fms-preview-label { font-family: var(--font-ui); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.fms-preview-bar-wrap { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.fms-preview-bar { height: 100%; width: 0%; border-radius: 4px; transition: width 0.3s, background 0.3s; }
.fms-preview-text { font-family: var(--font-ui); font-size: 11px; }
.fms-qual-val { color: var(--text-dim); font-size: 10px; }
.fms-footer {
  padding: 12px 16px; border-top: 1px solid rgba(100,70,20,0.35);
  background: rgba(0,0,0,0.3); flex-shrink: 0; display: flex; justify-content: center;
}
.fms-start-btn {
  background: var(--forge-accent-bg, rgba(160,100,30,0.35));
  border: 1px solid var(--forge-accent-border, rgba(200,160,60,0.6));
  color: var(--forge-accent, var(--text-gold));
  font-family: var(--font-title); font-size: 12px; letter-spacing: 1px;
  padding: 10px 28px; border-radius: 5px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.fms-start-btn:hover:not(:disabled) {
  background: var(--forge-accent-bg-hover, rgba(200,130,40,0.5));
  border-color: var(--forge-accent-border, rgba(220,180,80,0.9));
}
.fms-start-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.fms-fail-btn { background: rgba(180,40,40,0.3); border-color: rgba(220,80,60,0.6); color: #ff8888; }
.fms-fail-btn:hover:not(:disabled) { background: rgba(220,60,60,0.4); }

/* Item preview section (inside fms-overlay, above the body) */
.fms-item-preview-section {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; flex-shrink: 0;
  border-bottom: 1px solid rgba(100,70,20,0.3);
  background: rgba(0,0,0,0.25);
}
.fms-item-frame-sm {
  width: 80px; height: 80px; flex-shrink: 0;
  border: 2px solid rgba(157,157,157,0.6); border-radius: 10px;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fms-item-preview-img {
  width: 68px; height: 68px; object-fit: contain;
  image-rendering: pixelated;
}
.fms-item-preview-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fms-item-preview-name {
  font-family: var(--font-title); font-size: 15px;
  color: var(--text-gold); font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fms-item-preview-meta {
  font-family: var(--font-ui); font-size: 10px; color: var(--text-dim);
}
.fms-section-label {
  font-family: var(--font-ui); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 2px;
}

/* Ingredient row with image */
.fms-ing-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.fms-ing-img {
  width: 36px; height: 36px; object-fit: contain; flex-shrink: 0;
  image-rendering: pixelated; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.35);
}
.fms-ing-icon {
  font-size: 26px; flex-shrink: 0; line-height: 1;
  width: 36px; text-align: center;
}
.fms-ing-header-text { display: flex; flex-direction: column; gap: 2px; }

/* Quality-aware ingredient: group header (name + X/Y count) */
.fms-ing-group-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.fms-ing-need-name {
  font-family: var(--font-title); font-size: 12px; color: var(--text-gold);
}
.fms-ing-need-count {
  font-family: var(--font-ui); font-size: 11px; font-weight: bold;
}

/* 2-column split when there are ≥2 quality-aware ingredients */
.fms-ingredients-split {
  display: flex; flex-direction: row; gap: 14px; align-items: flex-start;
}
.fms-ingredients-split .fms-ing-group {
  flex: 1; min-width: 0;
}

/* Horizontal row of material quality cards */
.fms-mat-cards-row {
  display: flex; flex-direction: row; gap: 5px;
  overflow-x: auto; padding-bottom: 4px;
}
.fms-mat-cards-row::-webkit-scrollbar { height: 3px; }
.fms-mat-cards-row::-webkit-scrollbar-thumb { background: rgba(100,70,20,0.4); border-radius: 2px; }

/* Individual material quality card */
.fms-mat-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0; width: 96px; padding: 8px 4px 6px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; background: rgba(0,0,0,0.28);
  transition: background 0.15s;
}
.fms-mat-card:not(.fms-mat-empty):hover { background: rgba(255,255,255,0.07); }
.fms-mat-empty { opacity: 0.4; }

.fms-mat-img-wrap {
  width: 52px; height: 52px; border-radius: 8px;
  border: 2px solid #9d9d9d; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.fms-mat-img  { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.fms-mat-icon { font-size: 28px; line-height: 1; }

.fms-mat-qname { font-family: var(--font-ui); font-size: 10px; font-weight: bold; text-align: center; }
.fms-mat-have  { font-family: var(--font-ui); font-size: 9px; text-align: center; }
.fms-mat-bonus { font-family: var(--font-ui); font-size: 11px; font-weight: bold; text-align: center; letter-spacing: 0.3px; }

/* Counter (− N +) below each card */
.fms-mat-counter {
  display: flex; align-items: center; gap: 3px; margin-top: 2px;
}
.fms-cnt-btn {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 4px; border: 1px solid rgba(200,160,60,0.5);
  background: rgba(160,100,30,0.3); color: var(--text-gold);
  font-size: 16px; line-height: 1; font-family: monospace;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; transition: background 0.12s;
}
.fms-cnt-btn:hover:not(:disabled) { background: rgba(200,130,40,0.5); }
.fms-cnt-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.fms-cnt-val {
  font-family: var(--font-ui); font-size: 13px; font-weight: bold;
  color: var(--text-gold); min-width: 14px; text-align: center;
}

/* ================================================
   FORGE MINI-GAME (fmg-)
================================================ */
/* Container & layout */
.fmg-container {
  display: flex; flex-direction: column; height: 100%;
  background: transparent; /* inherits from #forge-main per-profession gradient */
}
.fmg-header {
  padding: 10px 14px 8px; border-bottom: 1px solid rgba(100,70,20,0.35);
  background: rgba(0,0,0,0.4); flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
}
.fmg-title { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); flex: 1; }
.fmg-title b { color: var(--text-gold); }
.fmg-cancel-btn { flex-shrink: 0; }

/* Main content — vertical single column */
.fmg-content {
  flex: 1; display: flex; flex-direction: column;
  align-items: stretch; padding: 14px 16px 12px; overflow-y: auto;
}
.fmg-content::-webkit-scrollbar { width: 3px; }
.fmg-content::-webkit-scrollbar-thumb { background: rgba(100,70,20,0.3); border-radius: 2px; }

/* ① Item preview section */
.fmg-preview-section {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding-bottom: 14px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(100,70,20,0.2);
}
.fmg-item-frame-large {
  width: 140px; height: 140px; border: 3px solid #9d9d9d; border-radius: 12px;
  position: relative; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.fmg-item-glow-large {
  position: absolute; inset: 0; pointer-events: none;
  transition: background 0.4s ease;
}
.fmg-slot-icon-large { font-size: 52px; position: relative; z-index: 1; line-height: 1; }
.fmg-item-img {
  width: 110px; height: 110px; object-fit: contain; position: relative; z-index: 1;
  image-rendering: pixelated; border-radius: 6px; pointer-events: none;
}
.fmg-rarity-steps { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.fmg-rarity-step { font-size: 12px; transition: color 0.3s, font-size 0.2s; cursor: default; }
.fmg-rarity-step.current { font-size: 16px; }
.fmg-item-rarity-badge {
  font-family: var(--font-title); font-size: 12px; font-weight: bold;
  padding: 3px 14px; border-radius: 20px; border: 1px solid;
  text-align: center; transition: color 0.4s, border-color 0.4s, background 0.4s;
  letter-spacing: 0.5px;
}

/* ② ③ ④ Bar sections */
.fmg-bar-section {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px;
}
.fmg-bar-label-row {
  display: flex; justify-content: space-between; align-items: center;
}
.fmg-bar-label-txt {
  font-family: var(--font-ui); font-size: 10px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim);
}
.fmg-bar-label-val {
  font-family: var(--font-ui); font-size: 10px; color: var(--text-light);
  position: relative;
}
/* Bar + OK button side by side */
.fmg-bar-with-ok { display: flex; align-items: center; gap: 8px; }
.fmg-bar-track {
  flex: 1; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(100,80,40,0.3);
}
.fmg-prog-track { height: 22px; }
.fmg-progress-fill {
  height: 100%; border-radius: 4px; width: 0%;
  background: linear-gradient(90deg,rgba(80,160,80,0.7),rgba(120,220,100,0.9));
  transition: width 0.25s ease; box-shadow: 0 0 8px rgba(100,200,100,0.5);
}
/* Quality segmented bar */
.fmg-quality-seg-bar {
  flex: 1; height: 22px; display: flex; border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(100,80,40,0.3); gap: 1px; background: rgba(0,0,0,0.3);
}
.fmg-seg { position: relative; height: 100%; flex-shrink: 0; }
.fmg-seg-fill { height: 100%; transition: width 0.3s ease; }
.fmg-seg-border { position: absolute; inset: 0; border-right: 1px solid rgba(255,255,255,0.12); }
/* Energy bar — full width, no button */
.fmg-energy-bar-track {
  width: 100%; height: 16px; background: rgba(255,255,255,0.06); border-radius: 5px;
  overflow: hidden; border: 1px solid rgba(100,80,40,0.3);
}
.fmg-energy-fill {
  height: 100%; border-radius: 4px; width: 100%;
  background: linear-gradient(90deg,rgba(180,130,20,0.7),rgba(255,210,60,0.9));
  transition: width 0.25s ease; box-shadow: 0 0 6px rgba(255,200,60,0.4);
}
/* OK action buttons (48×56 — icon + gain hint) */
.fmg-ok-btn {
  width: 52px; height: 56px; flex-shrink: 0; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; border: 1.5px solid;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.fmg-ok-btn svg { display: block; flex-shrink: 0; }
.fmg-ok-hint {
  font-family: var(--font-ui); font-size: 8px; letter-spacing: 0.3px;
  color: rgba(255,255,255,0.5); white-space: nowrap; line-height: 1;
  pointer-events: none;
}
.fmg-ok-btn:active:not(:disabled) { transform: scale(0.90); }
.fmg-ok-btn:disabled { opacity: 0.22; cursor: not-allowed; }
.fmg-ok-btn:disabled .fmg-ok-hint { opacity: 0.5; }
.fmg-ok-progress {
  background: rgba(180,100,20,0.15);
  border-color: rgba(200,130,40,0.45);
  color: rgba(255,255,255,0.85);
}
.fmg-ok-progress:hover:not(:disabled) {
  background: rgba(200,120,30,0.32);
  border-color: rgba(230,160,60,0.8);
  color: #fff;
  box-shadow: 0 0 16px rgba(200,130,40,0.35);
}
.fmg-ok-quality {
  background: rgba(80,60,160,0.15);
  border-color: rgba(120,90,220,0.45);
  color: rgba(255,255,255,0.85);
}
.fmg-ok-quality:hover:not(:disabled) {
  background: rgba(100,80,200,0.32);
  border-color: rgba(160,120,255,0.8);
  color: #fff;
  box-shadow: 0 0 16px rgba(120,90,220,0.35);
}
/* ⑤ Craft label */
.fmg-craft-label {
  margin-top: auto; text-align: center; padding: 8px 0 4px;
  font-family: var(--font-title); font-size: 18px; font-weight: bold;
  letter-spacing: 4px; color: rgba(150,120,70,0.5);
  text-transform: uppercase; transition: color 0.4s;
}
/* Floating delta feedback */
.fmg-delta-pop {
  position: absolute; right: -28px; top: -4px;
  font-family: var(--font-ui); font-size: 11px; font-weight: bold;
  pointer-events: none; white-space: nowrap;
  animation: fmgDeltaFloat 0.9s ease-out forwards;
}
@keyframes fmgDeltaFloat {
  0%   { opacity:1; transform: translateY(0); }
  100% { opacity:0; transform: translateY(-22px); }
}
/* Result overlay */
.fmg-result-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: rgba(0,0,0,0.88); z-index: 20; animation: fmgResultFade 0.35s ease;
}
@keyframes fmgResultFade { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.fmg-result-icon { font-size: 48px; line-height: 1; }
.fmg-result-title { font-family: var(--font-title); font-size: 20px; font-weight: bold; letter-spacing: 1px; }
.fmg-result-item {
  border: 2px solid; border-radius: 10px; padding: 10px 20px; text-align: center;
  background: rgba(0,0,0,0.4); display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fmg-result-item-img {
  width: 80px; height: 80px; object-fit: contain;
  image-rendering: pixelated; border-radius: 8px; pointer-events: none;
}
.fmg-result-fail-img { opacity: 0.35; filter: grayscale(0.8); }
.fmg-result-item-name { font-family: var(--font-title); font-size: 13px; color: var(--text-light); display: block; }
.fmg-result-item-rarity { font-family: var(--font-ui); font-size: 11px; font-weight: bold; }
.fmg-result-msg { font-family: var(--font-ui); font-size: 10px; color: rgba(180,220,150,0.85); }

/* ================================================
   CRAFT TOAST
================================================ */

.prof-toast {
  position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%);
  background: rgba(20,15,10,0.95); border: 1px solid rgba(200,150,40,0.5);
  border-radius: 8px; padding: 10px 18px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 12px; color: var(--text-light);
  z-index: 9999; box-shadow: 0 4px 20px rgba(0,0,0,0.7); white-space: nowrap;
  animation: profToastIn 0.25s ease-out, profToastOut 0.3s ease-in 2.5s forwards;
}
.prof-toast-icon { font-size: 20px; flex-shrink: 0; }
.prof-toast-img  {
  width: 40px; height: 40px; object-fit: contain;
  image-rendering: pixelated; flex-shrink: 0;
}
@keyframes profToastIn {
  from { opacity:0; transform: translateX(-50%) translateY(12px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}
@keyframes profToastOut {
  from { opacity:1; }
  to   { opacity:0; transform: translateX(-50%) translateY(8px); }
}

/* ─── Timer único abaixo do grid ───────────────────── */
.spawn-next-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 4px;
}

.spawn-next-label {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(140, 160, 220, 0.55);
}

.spawn-next-time {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #ffe76a;
  animation: respawnTimerPulse 2s ease-in-out infinite;
}

@keyframes respawnTimerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

.monster-card-name {
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--text-gold);
  letter-spacing: 1px;
  font-weight: bold;
  line-height: 1.2;
}

.monster-card-level {
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(150,150,150,0.95);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.monster-card-hp {
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(100,180,100,0.95);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.monster-card-fight {
  width: 100%;
  padding: 6px 0;
  margin-top: auto;
  background: linear-gradient(180deg, rgba(200,40,40,0.8) 0%, rgba(120,15,15,0.9) 100%);
  border: 1px solid rgba(220,60,60,0.7);
  border-radius: 3px;
  color: rgba(255,220,220,1);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  z-index: 1;
}

.monster-card-fight:hover {
  background: linear-gradient(180deg, rgba(240,60,60,0.9) 0%, rgba(160,20,20,1) 100%);
  box-shadow: 0 4px 12px rgba(200,40,40,0.5);
}

.monster-card-fight:active {
  transform: scale(0.98);
}

/* Respawn panel */
.respawn-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.respawn-content {
  background: rgba(10, 8, 18, 0.8);
  border: 2px solid rgba(100, 100, 200, 0.4);
  border-radius: 8px;
  padding: 30px;
  min-width: 200px;
}

.respawn-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: pulse 1.5s ease-in-out infinite;
}

.respawn-title {
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--text-gold);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.respawn-timer {
  font-family: var(--font-ui);
  font-size: 28px;
  color: rgba(100, 200, 255, 0.9);
  font-weight: bold;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* Combat Panel */
#combat-scene {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.combatant-display {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.combatant-display.player-side {
  border-right: 1px solid var(--border-dark);
}

.combatant-name {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-gold);
  letter-spacing: 1px;
}

.combatant-hp-bar {
  margin-top: 4px;
}

.combat-status-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ── COMBAT LOG ── */
#combat-log-wrap {
  height: 160px;
  border-top: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(0,0,0,0.5);
}

#combat-log {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.log-entry {
  font-size: 11px;
  padding: 1px 0;
  line-height: 1.5;
  border-bottom: 1px solid rgba(107,74,26,0.08);
}

.log-system    { color: var(--text-dim); font-style: italic; }
.log-action    { color: var(--text-light); }
.log-damage    { color: #ff6644; }
.log-crit      { color: #ffcc00; font-weight: bold; }
.log-heal      { color: #44ff88; }
.log-status    { color: #ffaa44; }
.log-buff      { color: #88aaff; }
.log-dodge     { color: #aaaaff; font-style: italic; }
.log-block     { color: #aa88ff; }
.log-victory   { color: #ffdd00; font-family: var(--font-ui); letter-spacing: 1px; }
.log-defeat    { color: #ff2222; font-family: var(--font-ui); }
.log-loot      { color: var(--text-gold); }
.log-levelup   { color: #ffff44; font-family: var(--font-ui); font-size: 12px; }
.log-skill     { color: #88ccff; }
.log-special   { color: #ffaa00; font-style: italic; }
.log-info      { color: #777; font-style: italic; }

/* ── ACTION BAR ── */
#actionbar {
  grid-area: actionbar;
  background: linear-gradient(180deg, #0f0b0e 0%, #0a0708 100%);
  border-top: 2px solid var(--border-gold);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}

/* XP bars row — side by side, each 50%, thicker */
#ab-xp-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 2px;
  flex-shrink: 0;
  width: 100%;
  align-self: center;
}

.xp-lv-badge {
  font-family: var(--font-ui);
  font-size: 9px;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(120,90,30,0.5);
  border-radius: 2px;
  padding: 1px 4px;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.4;
}
#ab-xp-wrap .xp-lv-badge     { border-color: rgba(200,160,30,0.45); color: #ccaa22; }
#ab-class-xp-wrap .xp-lv-badge { border-color: rgba(50,200,80,0.45);  color: #44cc66; }
#ab-xp-wrap,
#ab-class-xp-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.xp-label {
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  width: 28px;
  text-align: right;
}
#ab-xp-wrap .xp-label   { color: #ccaa22; }
#ab-class-xp-wrap .xp-label { color: #44cc66; }

/* Char XP track — yellow */
#ab-xp-track {
  flex: 1;
  height: 14px;
  background: #0d0610;
  border: 1px solid rgba(200,160,30,0.4);
  border-radius: 3px;
  overflow: hidden;
}
#ab-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #806010, #ccaa22, #e8c040);
  box-shadow: inset 0 1px 0 rgba(255,230,90,0.4), 0 0 6px rgba(200,160,30,0.3);
  transition: width 0.5s ease;
}
#ab-xp-text {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #ccaa22;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* Class XP track — green */
#ab-class-xp-track {
  flex: 1;
  height: 14px;
  background: #0d0610;
  border: 1px solid rgba(50,200,80,0.4);
  border-radius: 3px;
  overflow: hidden;
}
#ab-class-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #1a8030, #44cc66, #55ee77);
  box-shadow: inset 0 1px 0 rgba(100,255,140,0.4), 0 0 6px rgba(50,200,80,0.3);
  transition: width 0.5s ease;
}
#ab-class-xp-text {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #44cc66;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* ── Portrait wrap — needed for heal float layer ── */
#ab-portrait-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Layer that receives the green +N heal floats */
#ab-heal-float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

/* Floating heal number that rises above the portrait */
.ab-heal-float {
  position: absolute;
  left: 50%;
  bottom: 105%;
  transform: translateX(-50%);
  color: #44ff88;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,220,80,0.95), 0 0 6px rgba(0,255,100,0.6);
  pointer-events: none;
  white-space: nowrap;
  animation: abHealFloat 1.45s ease-out forwards;
}

@keyframes abHealFloat {
  0%   { opacity: 0;   transform: translateX(-50%) translateY(0)    scale(1.35); }
  12%  { opacity: 1;   transform: translateX(-50%) translateY(-8px)  scale(1.05); }
  65%  { opacity: 1;   transform: translateX(-50%) translateY(-26px) scale(1.0); }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-46px) scale(0.88); }
}

/* Green glow pulse applied to the avatar img when healed */
@keyframes abPortraitHealGlow {
  0%   { filter: drop-shadow(0 0 0px rgba(68,255,136,0)); }
  25%  { filter: drop-shadow(0 0 10px rgba(68,255,136,1)) drop-shadow(0 0 20px rgba(68,255,136,0.5)); }
  65%  { filter: drop-shadow(0 0 7px rgba(68,255,136,0.65)) drop-shadow(0 0 14px rgba(68,255,136,0.25)); }
  100% { filter: drop-shadow(0 0 0px rgba(68,255,136,0)); }
}
.ab-portrait-heal-glow {
  animation: abPortraitHealGlow 1.4s ease-in-out forwards;
}

/* ── Active Buff Bar ── */
#ab-buff-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}

.ab-buff-icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: default;
  box-shadow: 0 0 10px rgba(140,220,60,0.28);
}
.ab-buff-icon.ab-buff-food {
  box-shadow: 0 0 10px rgba(240,150,40,0.28);
}

/* Circular countdown ring (conic-gradient set inline via JS) */
.ab-buff-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: background 0.4s linear;
  animation: buffRingPulse 2.4s ease-in-out infinite;
}

@keyframes buffRingPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.72; }
}

/* Item image centered inside ring */
.ab-buff-img {
  position: absolute;
  width: 33px;
  height: 33px;
  object-fit: contain;
  top: 50%; left: 50%;
  transform: translate(-50%, -58%);
  z-index: 1;
  border-radius: 4px;
  pointer-events: none;
}
.ab-buff-emoji {
  position: absolute;
  font-size: 22px;
  top: 50%; left: 50%;
  transform: translate(-50%, -62%);
  z-index: 1;
  pointer-events: none;
}

/* Timer text at the bottom of the circle */
.ab-buff-timer {
  position: absolute;
  bottom: 2px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: bold;
  color: #d8f060;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  z-index: 2;
  pointer-events: none;
  letter-spacing: 0.3px;
}

/* Custom tooltip */
.ab-buff-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,8,4,0.97);
  border: 1px solid rgba(180,140,40,0.5);
  border-radius: 6px;
  padding: 7px 10px;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-light);
  z-index: 900;
  pointer-events: none;
  text-align: center;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.7);
}
.ab-buff-icon:hover .ab-buff-tooltip { display: block; }
.ab-buff-tt-time { color: rgba(200,160,80,0.8); font-size: 10px; }

/* Food buff — laranja ao invés de verde */
.ab-buff-food .ab-buff-timer { color: #f0c870; }
.ab-buff-food .ab-buff-tooltip { border-color: rgba(220,140,40,0.55); }

/* Main controls row — avatar + char info + orbs + skills all in one */
#actionbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 16px;
  min-height: 94px;
  flex-shrink: 0;
}

/* Character section inside main row */
#ab-char-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-right: 14px;
  border-right: 1px solid rgba(107,74,26,0.35);
  margin-right: 2px;
}

#ab-avatar {
  width: 54px;
  height: 72px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--border-gold);
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0,0,0,0.7), inset 0 0 4px rgba(0,0,0,0.4);
}
#ab-char-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  min-width: 100px;
}
#ab-char-name {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--text-gold);
  letter-spacing: 0.5px;
}
#ab-char-class-lv {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-dim);
}

.ab-sep {
  width: 1px;
  height: 52px;
  background: rgba(107,74,26,0.3);
  flex-shrink: 0;
  display: none; /* handled by ab-char-section border */
}

#player-status-badges {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  flex-shrink: 0;
  max-width: 100px;
}

/* Orbs */
#orb-hp, #orb-mp {
  flex-shrink: 0;
}

/* Skill Slots */
#skill-slots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.skill-slot {
  width: 62px; height: 62px;
  background: linear-gradient(180deg, #1a1218 0%, #0d080c 100%);
  border: 2px solid var(--border-dark);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  overflow: hidden;
}

.skill-slot::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%);
}

.skill-slot:hover {
  border-color: var(--border-gold);
  background: linear-gradient(180deg, #2a1a24 0%, #150d18 100%);
  box-shadow: 0 0 10px rgba(200,150,42,0.2);
}

.skill-slot.active-combat { border-color: var(--border-gold-bright); animation: glowPulse 1.5s infinite; }

.skill-slot.on-cooldown {
  opacity: 0.5;
  cursor: not-allowed;
}

.skill-slot.no-mp {
  border-color: rgba(220, 50, 50, 0.85);
  box-shadow: 0 0 8px rgba(220, 50, 50, 0.3), inset 0 0 6px rgba(200, 0, 0, 0.12);
  opacity: 0.6;
  cursor: not-allowed;
}
.skill-slot.no-mp:hover {
  border-color: rgba(240, 70, 70, 0.95);
  box-shadow: 0 0 12px rgba(220, 50, 50, 0.45), inset 0 0 6px rgba(200, 0, 0, 0.15);
  background: linear-gradient(180deg, #1a1218 0%, #0d080c 100%);
}

@keyframes skillNoMpShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-5px); }
  45%  { transform: translateX(5px); }
  70%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.skill-slot.no-mp-shake {
  animation: skillNoMpShake 0.32s ease-out forwards;
}

.skill-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.skill-icon { font-size: 24px; }
.skill-key {
  position: absolute;
  bottom: 2px; right: 3px;
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  line-height: 1;
}

.skill-cd-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(220,80,60,0.9), 0 1px 4px rgba(0,0,0,1);
  letter-spacing: 0;
  display: none;
}

.skill-slot.on-cooldown .skill-cd-overlay { display: flex; }

/* Combat Action Buttons */
#combat-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

#combat-actions.hidden { display: none; }

/* Potion Quick-Use */
#potion-slots {
  display: flex;
  gap: 5px;
}

.potion-slot {
  width: 50px; height: 62px;
  background: linear-gradient(180deg, #120d18 0%, #080510 100%);
  border: 1px solid rgba(80,60,100,0.6);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  overflow: hidden;
}

.potion-slot:hover {
  border-color: var(--border-gold);
  box-shadow: 0 0 8px rgba(200,150,42,0.25);
}

.potion-slot-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 42px;
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.potion-slot-img img {
  width: 36px; height: 36px;
  object-fit: contain;
}

.potion-count {
  position: absolute;
  bottom: 2px; right: 4px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 3px rgba(0,0,0,1);
  line-height: 1;
}

.potion-empty-icon {
  font-size: 18px;
  color: rgba(100,80,120,0.5);
  font-family: var(--font-ui);
  line-height: 1;
  pointer-events: none;
}

/* Combat action buttons — ligeiramente maiores */
#combat-actions .btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* Area Name — fixed to the right of the action bar */
#area-name-display {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: right;
  pointer-events: none;
}

#area-name-display .area-big {
  font-size: 12px;
  color: var(--text-light);
  display: block;
}

/* ── RIGHT PANEL: INVENTORY ── */
#inv-panel {
  grid-area: inv;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-gold);
  overflow: hidden;
}

/* Tabs */
.inv-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-gold);
  background: var(--bg-darkest);
}

.inv-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-dark);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.inv-tab:last-child { border-right: none; }
.inv-tab:hover { color: var(--text-light); background: rgba(100,70,20,0.15); }
.inv-tab.active { color: var(--text-gold); background: rgba(100,70,20,0.25); border-bottom: 2px solid var(--border-gold-bright); }

/* Equipment Tab */
#tab-equip {
  padding: 8px;
  display: none;
}
#tab-equip.active { display: block; }

/* ── EQUIPMENT PAPERDOLL ── */
.equip-paperdoll {
  position: relative;
  width: 100%;
  height: 382px;
  background-color: #090705;
}

.equip-paperdoll::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/inventory/base.png') center 17px / 260px  365px no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.equip-slot {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0,0,0,0.68);
  border: 1px solid rgba(107,74,26,0.45);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: visible;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.equip-slot:hover {
  border-color: var(--border-gold);
  box-shadow: 0 0 10px rgba(200,140,30,0.35);
}

.equip-slot.has-item { border-color: rgba(107,74,26,0.7); }

.equip-slot-img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0.28;
  border-radius: 2px;
  pointer-events: none;
  display: block;
}

.equip-slot.has-item .equip-slot-img { opacity: 1; }

.equip-slot-label {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  color: var(--text-dim);
  font-family: var(--font-ui);
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
}

/* ── Slot Positions ── */
/* Row 1 — Helm */
.equip-slot[data-slot="head"]    { top: 20px;  left: 50%; transform: translateX(-50%); }

/* Row 2 — Gloves | Pendant | Cape */
.equip-slot[data-slot="hands"]   { top: 79px; left: 15px; }
.equip-slot[data-slot="pendant"] { top: 94px; left: 50%; transform: translateX(-50%); }
.equip-slot[data-slot="cape"]    { top: 80px; right: 15px; }

/* Row 3 — Weapon | Armor | Off Weapon */
.equip-slot[data-slot="weapon"]  { top: 180px; left: 15px; }
.equip-slot[data-slot="chest"]   { top: 166px; left: 50%; transform: translateX(-50%); }
.equip-slot[data-slot="offhand"] { top: 179px; right: 15px; }

/* Row 4 — Ring | Pants | Ring */
.equip-slot[data-slot="ring1"]   { top: 270px; left: 15px; }
.equip-slot[data-slot="legs"]    { top: 240px; left: 50%; transform: translateX(-50%); }
.equip-slot[data-slot="ring2"]   { top: 270px; right: 15px; }

/* Row 5 — Boots */
.equip-slot[data-slot="feet"]    { top: 313px; left: 50%; transform: translateX(-50%); }

/* Stat Summary */
#stat-summary {
  padding: 6px 8px;
  border-top: 1px solid var(--border-dark);
  background: rgba(0,0,0,0.3);
  font-size: 10px;
}

.stat-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
  border-bottom: 1px solid rgba(107,74,26,0.1);
}

.stat-summary-name { color: var(--text-dim); }
.stat-summary-val { color: var(--text-light); font-family: var(--font-ui); }

/* Inventory Tab */
#tab-bag {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: none;
}
#tab-bag.active { display: block; }

/* ── Bag Filter Tabs ── */
.bag-filter-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-dark);
  background: rgba(0,0,0,0.35);
}

.bag-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(107,74,26,0.2);
  padding: 5px 2px;
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.15s, background 0.15s;
}

.bag-tab:last-child { border-right: none; }
.bag-tab:hover { color: var(--text-light); background: rgba(100,70,20,0.15); }
.bag-tab.active {
  color: var(--text-gold);
  background: rgba(100,70,20,0.25);
  border-bottom: 2px solid var(--border-gold-bright);
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

/* ── Drag & Drop ── */
.inv-cell.dragging   { opacity: 0.3; }
.inv-cell.drag-over  {
  border-color: var(--border-gold-bright);
  background: rgba(100,70,20,0.35);
  box-shadow: inset 0 0 5px rgba(200,140,30,0.25);
}

.inv-cell {
  aspect-ratio: 1;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border-dark);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  font-size: 13px;
  min-height: 0;
}

.inv-cell:hover { border-color: var(--border-gold); background: rgba(100,70,20,0.2); }
.inv-cell.empty { cursor: default; }

/* ── Slot de compra ── */
.inv-cell-buy {
  flex-direction: column;
  gap: 1px;
  border-style: dashed;
  border-color: var(--border-gold);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
}
.inv-cell-buy:hover {
  opacity: 1;
  background: rgba(100,70,20,0.25);
}
.inv-cell-buy--broke {
  border-color: var(--border-dark);
  cursor: default;
  opacity: 0.35;
}
.inv-buy-plus {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-gold);
  line-height: 1;
}
.inv-buy-cost {
  font-family: var(--font-ui);
  font-size: 7px;
  color: var(--text-dim);
  line-height: 1;
}

.inv-cell-count {
  position: absolute;
  bottom: 1px; right: 2px;
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-light);
}

.inv-cell-rarity {
  position: absolute;
  top: 1px; left: 1px;
  width: 4px; height: 4px;
  border-radius: 50%;
}

.inv-cell-img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

.inv-cell-tier {
  position: absolute;
  top: 1px;
  left: 2px;
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 700;
  color: rgba(255, 215, 100, 0.90);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0,0,0,0.7);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════
   FLOATING COMBAT DISPLAY — Arena
══════════════════════════════════════════════ */
#combat-float {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  z-index: 10;
}
#combat-float.active { display: flex; }

/* ── Combat Row: Player + Monster ── */
#cf-combat-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 36px;
  margin-bottom: 28px; /* space for player name label */
}

/* ── Player Sprite Arena ── */
#cf-player-arena {
  position: relative;
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#cf-player-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(26px);
  opacity: 0.45;
  transform-origin: bottom center;
  background: radial-gradient(ellipse at center, var(--cf-player-glow, rgba(200,55,35,0.6)) 0%, transparent 70%);
  animation: monsterGlowPulse 2.4s ease-in-out infinite;
}

/* Player glow by class */
#combat-float.pglow-swordsman #cf-player-glow { --cf-player-glow: rgba(200,55,35,0.65);  }
#combat-float.pglow-mage      #cf-player-glow { --cf-player-glow: rgba(130,55,210,0.65); }
#combat-float.pglow-archer    #cf-player-glow { --cf-player-glow: rgba(40,170,70,0.65);  }
#combat-float.pglow-cleric    #cf-player-glow { --cf-player-glow: rgba(210,175,45,0.65); }

#cf-player-sprite-wrap {
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
  transform-origin: bottom center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  image-rendering: auto;
}

#cf-player-sprite {
  width: auto;
  height: auto;
  max-height: 80vh;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.8));
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
  transform: scaleX(-1) translateZ(0);
  user-select: none;
  -webkit-user-drag: none;
}

/* Player hit flash — red tint */
@keyframes playerHitFlash {
  0%   { filter: drop-shadow(0 6px 14px rgba(0,0,0,0.8)) brightness(1) saturate(1); }
  15%  { filter: drop-shadow(0 6px 14px rgba(255,60,60,0.9)) brightness(3.5) saturate(0.5) sepia(1) hue-rotate(-20deg); }
  100% { filter: drop-shadow(0 6px 14px rgba(0,0,0,0.8)) brightness(1) saturate(1); }
}
#cf-player-sprite.player-hit-flash {
  animation: playerHitFlash 0.30s ease-out forwards;
}

@keyframes playerHealGlow {
  0%   { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.85)); }
  25%  { filter: drop-shadow(0 0 24px rgba(68,255,136,1)) drop-shadow(0 0 48px rgba(68,255,136,0.45)); }
  65%  { filter: drop-shadow(0 0 16px rgba(68,255,136,0.7)) drop-shadow(0 0 32px rgba(68,255,136,0.25)); }
  100% { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.85)); }
}
#cf-player-sprite.player-heal-flash {
  animation: playerHealGlow 1.5s ease-in-out forwards;
}

#cf-player-info {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* ── Player Combat Bars (HP + MP) ── */
#cf-player-bars {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 4px;
  box-sizing: border-box;
}
.cf-pb-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.cf-pb-orn {
  font-size: 10px;
  flex-shrink: 0;
  line-height: 1;
}
.cf-pb-orn-hp { color: #8b3a3a; text-shadow: 0 0 6px rgba(180,40,40,0.6); }
.cf-pb-orn-mp { color: #2a4a8b; text-shadow: 0 0 6px rgba(40,80,180,0.6); }
.cf-pb-track {
  flex: 1;
  position: relative;
  height: 14px;
  background: #0e0608;
  border: 1px solid #3a1a1a;
  border-top-color: #6a2020;
  border-bottom-color: #180606;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.4);
  overflow: hidden;
}
.cf-pb-track::before,
.cf-pb-track::after {
  content: '';
  position: absolute;
  top: 2px; bottom: 2px;
  width: 2px;
  z-index: 3;
}
.cf-pb-track::before { left: 2px; }
.cf-pb-track::after  { right: 2px; }
.cf-pb-hp-track::before,
.cf-pb-hp-track::after { background: #5a2020; }
.cf-pb-mp-track::before,
.cf-pb-mp-track::after { background: #202060; }
.cf-pb-mp-track {
  border-color: #1a1a4a;
  border-top-color: #2a2a6a;
  border-bottom-color: #080818;
}
#cf-player-hp-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(180deg, #cc2020 0%, #8b0000 45%, #660000 55%, #8b1010 100%);
  box-shadow: inset 0 1px 0 rgba(255,80,80,0.35);
  transition: width 0.3s ease;
}
#cf-player-hp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0px, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
}
#cf-player-mp-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(180deg, #2060cc 0%, #00308b 45%, #002066 55%, #10308b 100%);
  box-shadow: inset 0 1px 0 rgba(80,120,255,0.35);
  transition: width 0.3s ease;
}
#cf-player-mp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0px, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
}
#cf-player-hp-txt,
#cf-player-mp-txt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 8px;
  color: rgba(255,210,210,0.8);
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  z-index: 4;
  pointer-events: none;
}
#cf-player-mp-txt { color: rgba(180,210,255,0.8); }

/* ── Attack Speed Bars ─────────────────────────────────── */
/* Player speed row */
.cf-spd-row { margin-top: 3px; }
.cf-pb-orn-spd {
  color: rgba(160,160,160,0.45);
  font-size: 8px;
}
.cf-spd-track {
  flex: 1;
  position: relative;
  height: 7px;
  background: rgba(20,20,20,0.85);
  border: 1px solid rgba(80,80,80,0.25);
  border-top-color: rgba(100,100,100,0.2);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
#cf-player-spd-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #2a2a2a 0%, #6e6e6e 55%, #a0a0a0 100%);
  box-shadow: 0 0 5px rgba(160,160,160,0.25);
  border-radius: 3px;
  /* transition handled in JS */
}

/* Monster speed row */
.cf-ms-spd-row {
  margin-top: 4px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cf-ms-spd-label {
  font-family: var(--font-ui);
  font-size: 7px;
  color: rgba(150,150,150,0.45);
  letter-spacing: 1px;
  flex-shrink: 0;
  line-height: 1;
}
.cf-ms-spd-track {
  flex: 1;
  position: relative;
  height: 6px;
  background: rgba(20,20,20,0.85);
  border: 1px solid rgba(70,70,70,0.2);
  border-top-color: rgba(90,90,90,0.18);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
.cf-ms-spd-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #2a2a2a 0%, #6e6e6e 55%, #a0a0a0 100%);
  box-shadow: 0 0 4px rgba(150,150,150,0.2);
  border-radius: 3px;
  /* transition handled in JS */
}

#cf-player-floating-dmg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

/* ── Lunge Animations ── */
@keyframes lungeToRight {
  0%   { transform: translateX(0);    }
  30%  { transform: translateX(22px); }
  65%  { transform: translateX(8px);  }
  100% { transform: translateX(0);    }
}
@keyframes lungeToLeft {
  0%   { transform: translateX(0);     }
  30%  { transform: translateX(-22px); }
  65%  { transform: translateX(-8px);  }
  100% { transform: translateX(0);     }
}
#cf-player-sprite-wrap.lunge-attack  { animation: lungeToRight 0.34s ease-out; }
#cf-monster-sprite-wrap.lunge-attack { animation: lungeToLeft  0.34s ease-out; }

/* ── VS Text ── */
#cf-vs-text {
  font-family: var(--font-title);
  font-size: 26px;
  color: #c8a96e;
  text-shadow: 0 0 18px rgba(200,169,110,0.55), 0 2px 6px rgba(0,0,0,0.9);
  letter-spacing: 3px;
  align-self: center;
  margin-bottom: 24px;
  padding: 0 6px;
  pointer-events: none;
  flex-shrink: 0;
  user-select: none;
}

/* ── Monsters Group ── */
#cf-monsters-group {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  pointer-events: auto;
}

/* 2 monsters: depth perspective */
#cf-monsters-group[data-count="2"] .cf-monster-slot:nth-child(1) { z-index: 2; }
#cf-monsters-group[data-count="2"] .cf-monster-slot:nth-child(2) {
  z-index: 1;
  margin-bottom: 90px;
}

/* 3 monsters: triangular formation */
#cf-monsters-group[data-count="3"] {
  width: 620px;
  height: 480px;
  gap: 0;
}
#cf-monsters-group[data-count="3"] .cf-monster-slot {
  position: absolute;
}
#cf-monsters-group[data-count="3"] .cf-monster-slot:nth-child(1) {
  bottom: 0;
  left: 15px;
  z-index: 30;
}
#cf-monsters-group[data-count="3"] .cf-monster-slot:nth-child(2) {
  bottom: 130px;
  right: 15px;
  z-index: 20;
}
#cf-monsters-group[data-count="3"] .cf-monster-slot:nth-child(3) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* Individual monster slot */
.cf-monster-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: 4px;
  padding: 4px;
  transition: opacity 0.3s;
  pointer-events: auto;
}

/* Selection: glow on sprite shape, not rectangular border */
.cf-monster-slot::before {
  content: none;
}
.cf-monster-slot.selected .cf-ms-sprite {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8))
          drop-shadow(0 0 8px rgba(220,30,30,1))
          drop-shadow(0 0 18px rgba(220,30,30,0.65));
}
.cf-monster-slot:hover:not(.dead):not(.selected) .cf-ms-sprite {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8))
          drop-shadow(0 0 6px rgba(180,20,20,0.5));
}

/* Dead slot */
.cf-monster-slot.dead {
  opacity: 0.2;
  filter: saturate(0);
  pointer-events: none;
  cursor: default;
}

/* Slot death animation */
.cf-monster-slot.dying {
  animation: slotDeath 0.6s ease forwards;
}
@keyframes slotDeath {
  0%   { filter: brightness(1) saturate(1); opacity: 1; }
  20%  { filter: brightness(3.5) saturate(0.2) sepia(1) hue-rotate(-20deg); opacity: 1; }
  100% { filter: brightness(0.3) saturate(0); opacity: 0.2; }
}

/* Glow behind each monster slot */
.cf-ms-glow {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.5;
  pointer-events: none;
  animation: monsterGlowPulse 2.4s ease-in-out infinite;
}
.cf-monster-slot.glow-normal .cf-ms-glow { background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, transparent 70%); }
.cf-monster-slot.glow-elite  .cf-ms-glow { background: radial-gradient(ellipse at center, rgba(160,50,255,0.65) 0%, transparent 70%); }
.cf-monster-slot.glow-boss   .cf-ms-glow { background: radial-gradient(ellipse at center, rgba(255,130,0,0.65) 0%, transparent 70%); }
.cf-monster-slot.glow-world  .cf-ms-glow { background: radial-gradient(ellipse at center, rgba(255,195,0,0.7) 0%, transparent 70%); }

/* Sprite wrapper inside slot */
.cf-ms-sprite-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  image-rendering: auto;
}

.cf-ms-sprite {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8));
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
  transform: translateZ(0); /* força GPU — melhora interpolação */
  user-select: none;
  -webkit-user-drag: none;
}

/* Hit flash on slot sprite */
.cf-ms-sprite.hit-flash {
  animation: monsterHitFlash 0.28s ease-out;
}

/* Lunge on monster slot sprite wrap */
.cf-ms-sprite-wrap.lunge-attack { animation: lungeToLeft 0.34s ease-out; }

/* ── Mini Gothic Info Block (above sprite) ── */
.cf-ms-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cf-ms-name-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  width: 100%;
  text-align: center;
}
.cf-ms-name {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-gold);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.cf-ms-lv {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cf-ms-gothic-hp {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.cf-ms-hp-orn {
  font-size: 10px;
  color: #8b3a3a;
  text-shadow: 0 0 5px rgba(180,40,40,0.6);
  flex-shrink: 0;
  line-height: 1;
}
.cf-ms-gothic-track {
  flex: 1;
  position: relative;
  height: 13px;
  background: #0e0608;
  border: 1px solid #4a1a1a;
  border-top-color: #7a2222;
  border-bottom-color: #200808;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.9), inset 0 -1px 2px rgba(180,40,40,0.1), 0 0 6px rgba(180,20,20,0.15);
  overflow: hidden;
}
.cf-ms-gothic-track::before,
.cf-ms-gothic-track::after {
  content: '';
  position: absolute;
  top: 2px; bottom: 2px;
  width: 2px;
  background: #5a2020;
  z-index: 3;
}
.cf-ms-gothic-track::before { left: 2px; }
.cf-ms-gothic-track::after  { right: 2px; }
.cf-ms-hp-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(180deg, #cc2020 0%, #8b0000 45%, #660000 55%, #8b1010 100%);
  box-shadow: inset 0 1px 0 rgba(255,80,80,0.35);
  transition: width 0.3s ease;
}
.cf-ms-hp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0px, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
}
.cf-ms-hp-txt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 7px;
  color: rgba(255,200,200,0.75);
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  z-index: 4;
  pointer-events: none;
}

/* Floating dmg layer per slot */
.cf-ms-dmg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}

/* ── Monster Sprite Arena (kept for legacy safety) ── */
#cf-monster-arena {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Glow behind sprite */
#cf-monster-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.55;
  background: radial-gradient(ellipse at center, var(--cf-glow, rgba(255,255,255,0.6)) 0%, transparent 70%);
  animation: monsterGlowPulse 2.4s ease-in-out infinite;
}
@keyframes monsterGlowPulse {
  0%, 100% { opacity: 0.45; transform: scale(1);    }
  50%       { opacity: 0.70; transform: scale(1.08); }
}

/* Glow variants */
#combat-float.glow-normal #cf-monster-glow { --cf-glow: rgba(255,255,255,0.55); }
#combat-float.glow-elite  #cf-monster-glow { --cf-glow: rgba(160,50,255,0.68);  }
#combat-float.glow-boss   #cf-monster-glow { --cf-glow: rgba(255,130,0,0.68);   }
#combat-float.glow-world  #cf-monster-glow { --cf-glow: rgba(255,195,0,0.70);   }

/* Monster image */
#cf-monster-sprite-wrap {
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  image-rendering: auto;
}
#cf-monster-sprite {
  width: auto;
  height: auto;
  max-height: 80vh;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.8));
  transition: filter 0.05s;
  user-select: none;
  -webkit-user-drag: none;
}

/* Hit flash — white overlay via filter */
@keyframes monsterHitFlash {
  0%   { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.8)) brightness(1) saturate(1); }
  15%  { filter: drop-shadow(0 6px 18px rgba(255,255,255,0.9)) brightness(4) saturate(0); }
  100% { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.8)) brightness(1) saturate(1); }
}
#cf-monster-sprite.hit-flash {
  animation: monsterHitFlash 0.28s ease-out forwards;
}

/* Floating damage layer */
#cf-floating-dmg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.float-dmg {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.6);
  white-space: nowrap;
  pointer-events: none;
  animation: floatDmgRise 1.65s ease-out forwards;
  letter-spacing: 1px;
}
.float-dmg.crit {
  font-size: 38px;
  color: #ffdd33;
  text-shadow: 0 2px 10px rgba(255,180,0,0.8), 0 0 6px rgba(255,120,0,0.5);
}
.crit-spark {
  font-style: normal;
  font-size: 0.75em;
  margin-left: 2px;
  color: inherit;
  vertical-align: middle;
  line-height: 1;
}
.float-dmg.miss  { font-size: 20px; color: #aaaaaa; }
.float-dmg.heal  { color: #44ff88; font-size: 28px; }
.float-dmg.dot   { font-size: 24px; color: #ff8844; }

/* Damage type colors */
.float-dmg.physical       { color: #FFD700; text-shadow: 0 2px 10px rgba(255,215,0,0.8); }
.float-dmg.physical.crit  { color: #FFFF00; font-size: 38px; text-shadow: 0 2px 12px rgba(255,255,0,0.9), 0 0 8px rgba(255,200,0,0.6); }
.float-dmg.magical        { color: #BB86FC; text-shadow: 0 2px 10px rgba(187,134,252,0.8); }
.float-dmg.magical.crit   { color: #E0B0FF; font-size: 38px; text-shadow: 0 2px 12px rgba(224,176,255,0.9), 0 0 8px rgba(187,134,252,0.6); }
.float-dmg.poison         { color: #4CAF50; text-shadow: 0 2px 10px rgba(76,175,80,0.8); }
.float-dmg.poison.crit    { color: #76FF03; font-size: 38px; text-shadow: 0 2px 12px rgba(118,255,3,0.9), 0 0 8px rgba(76,175,80,0.6); }
.float-dmg.bleed          { color: #FF4444; text-shadow: 0 2px 10px rgba(255,68,68,0.8); }
.float-dmg.bleed.crit     { color: #FF0000; font-size: 38px; text-shadow: 0 2px 12px rgba(255,0,0,0.9), 0 0 8px rgba(255,68,68,0.6); }
.float-dmg.burn           { color: #FF9800; text-shadow: 0 2px 10px rgba(255,152,0,0.8); }
.float-dmg.burn.crit      { color: #FFAB00; font-size: 38px; text-shadow: 0 2px 12px rgba(255,171,0,0.9), 0 0 8px rgba(255,152,0,0.6); }
.float-dmg.freeze         { color: #2196F3; text-shadow: 0 2px 10px rgba(33,150,243,0.8); }
.float-dmg.freeze.crit    { color: #64B5F6; font-size: 38px; text-shadow: 0 2px 12px rgba(100,181,246,0.9), 0 0 8px rgba(33,150,243,0.6); }

@keyframes floatDmgRise {
  0%   { opacity: 0;   transform: translateX(-50%) translateY(0)     scale(1.25); }
  10%  { opacity: 1;   transform: translateX(-50%) translateY(-16px)  scale(1.05); }
  40%  { opacity: 1;   transform: translateX(-50%) translateY(-32px)  scale(1.0);  }
  65%  { opacity: 1;   transform: translateX(-50%) translateY(-42px)  scale(0.97); }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-62px)  scale(0.90); }
}

/* ── Monster Info Bar ── */
#cf-monster-info {
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
#cf-monster-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
#cf-monster-name {
  font-family: var(--font-title);
  font-size: 15px;
  color: var(--text-gold);
  letter-spacing: 1px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
#cf-monster-level {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

/* ── Gothic HP Bar ── */
#cf-hp-gothic {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.cf-hp-ornament {
  font-size: 11px;
  color: #8b3a3a;
  text-shadow: 0 0 6px rgba(180,40,40,0.6);
  flex-shrink: 0;
  line-height: 1;
}
#cf-hp-gothic-track {
  flex: 1;
  position: relative;
  height: 14px;
  background: #0e0608;
  border: 1px solid #4a1a1a;
  border-top-color: #7a2222;
  border-bottom-color: #200808;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.9),
    inset 0 -1px 2px rgba(180,40,40,0.15),
    0 0 8px rgba(180,20,20,0.2);
  overflow: hidden;
}
/* Riveted corners */
#cf-hp-gothic-track::before,
#cf-hp-gothic-track::after {
  content: '';
  position: absolute;
  top: 2px; bottom: 2px;
  width: 2px;
  background: #5a2020;
  z-index: 3;
}
#cf-hp-gothic-track::before { left: 2px; }
#cf-hp-gothic-track::after  { right: 2px; }

#cf-hp-gothic-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(180deg,
    #cc2020 0%,
    #8b0000 45%,
    #660000 55%,
    #8b1010 100%
  );
  box-shadow: inset 0 1px 0 rgba(255,80,80,0.35);
  transition: width 0.3s ease;
}
/* Subtle horizontal scan lines on the fill */
#cf-hp-gothic-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px
  );
}
#cf-monster-hp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 8px;
  color: rgba(255,200,200,0.75);
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  z-index: 4;
  pointer-events: none;
}

/* Status badges below bar */
#monster-status-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ══════════════════════════════════════════════
   MONSTER DEATH ANIMATION
══════════════════════════════════════════════ */

/* Slash line that sweeps across — razor thin, no glow */
#cf-slash-line {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 1px;
  margin-top: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 5%,
    rgba(255,255,255,0.85) 30%,
    #ffffff 50%,
    rgba(255,255,255,0.85) 70%,
    rgba(255,255,255,0.15) 95%,
    transparent 100%
  );
  box-shadow: none;
  transform: scaleX(0) rotate(-6deg);
  transform-origin: left center;
  z-index: 10;
  pointer-events: none;
  animation: slashSweep 0.18s cubic-bezier(0.1,0,0.2,1) forwards;
}
@keyframes slashSweep {
  0%   { transform: scaleX(0)    rotate(-6deg); opacity: 1; }
  70%  { transform: scaleX(1)    rotate(-6deg); opacity: 1; }
  100% { transform: scaleX(1.05) rotate(-6deg); opacity: 0; }
}

/* Spark burst at slash impact */
.cf-slash-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px 4px rgba(255,200,100,0.9);
  pointer-events: none;
  animation: sparkBurst 0.35s ease-out forwards;
}
@keyframes sparkBurst {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}

/* Two split halves — NO ::after overlay, filter handles the red tint
   so PNG transparency is respected */
.monster-death-half {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.monster-death-half img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* Diagonal clip matching the slash angle */
.monster-half-top    { clip-path: polygon(0 0, 100% 0, 100% 48%, 0 53%); }
.monster-half-bottom { clip-path: polygon(0 53%, 100% 48%, 100% 100%, 0 100%); }

/* Top half: quick flash → red via filter → separate → 3s fade out */
@keyframes deathHalfTop {
  0%   { transform: translate(0,0)        rotate(0deg);  opacity: 1;
         filter: brightness(1) saturate(1); }
  5%   { filter: brightness(4) saturate(0.1); }                       /* white flash */
  18%  { filter: brightness(1.8) saturate(2) sepia(1) hue-rotate(-20deg); /* red — only on pixels */
         transform: translate(-4px,-4px) rotate(-1deg); opacity: 1; }
  35%  { filter: brightness(1.2) saturate(3) sepia(1) hue-rotate(-25deg);
         transform: translate(-20px,-26px) rotate(-8deg); opacity: 0.9; }
  100% { filter: brightness(0.4) saturate(4) sepia(1) hue-rotate(-30deg);
         transform: translate(-36px,-50px) rotate(-14deg); opacity: 0; }
}

/* Bottom half: same but mirrored direction */
@keyframes deathHalfBottom {
  0%   { transform: translate(0,0)       rotate(0deg);  opacity: 1;
         filter: brightness(1) saturate(1); }
  5%   { filter: brightness(4) saturate(0.1); }
  18%  { filter: brightness(1.8) saturate(2) sepia(1) hue-rotate(-20deg);
         transform: translate(4px,4px) rotate(1deg); opacity: 1; }
  35%  { filter: brightness(1.2) saturate(3) sepia(1) hue-rotate(-25deg);
         transform: translate(16px,22px) rotate(6deg); opacity: 0.9; }
  100% { filter: brightness(0.4) saturate(4) sepia(1) hue-rotate(-30deg);
         transform: translate(28px,46px) rotate(11deg); opacity: 0; }
}

/* Total: 3s — separation happens in the first ~35%, then slow fade the rest */
.monster-half-top.dying    { animation: deathHalfTop    2s 0.05s ease-in forwards; }
.monster-half-bottom.dying { animation: deathHalfBottom 2s 0.05s ease-in forwards; }

/* Blood drip particles that fall from the slash line */
.cf-blood-drip {
  position: absolute;
  top: 50%;
  width: 3px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #cc0000, #660000);
  pointer-events: none;
  animation: bloodFall var(--dur, 0.6s) var(--delay, 0s) ease-in forwards;
}
@keyframes bloodFall {
  0%   { height: 0;    opacity: 0.9; transform: translateY(0); }
  30%  { height: 8px;  opacity: 0.9; }
  100% { height: 16px; opacity: 0;   transform: translateY(40px); }
}

/* Incoming damage float (player takes damage) */
/* Incoming damage keeps its damage type colors */
.float-dmg.incoming      { font-size: 28px; text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 6px rgba(200,0,0,0.5); }
.float-dmg.incoming.crit { font-size: 38px; text-shadow: 0 2px 10px rgba(200,0,0,0.9); }

/* Incoming + damage type combinations */
.float-dmg.incoming.physical       { text-shadow: 0 2px 10px rgba(255,215,0,0.8); }
.float-dmg.incoming.physical.crit  { text-shadow: 0 2px 12px rgba(255,255,0,0.9); }
.float-dmg.incoming.magical        { text-shadow: 0 2px 10px rgba(187,134,252,0.8); }
.float-dmg.incoming.magical.crit   { text-shadow: 0 2px 12px rgba(224,176,255,0.9); }
.float-dmg.incoming.poison         { text-shadow: 0 2px 10px rgba(76,175,80,0.8); }
.float-dmg.incoming.poison.crit    { text-shadow: 0 2px 12px rgba(118,255,3,0.9); }
.float-dmg.incoming.bleed          { text-shadow: 0 2px 10px rgba(255,68,68,0.8); }
.float-dmg.incoming.bleed.crit     { text-shadow: 0 2px 12px rgba(255,0,0,0.9); }
.float-dmg.incoming.burn           { text-shadow: 0 2px 10px rgba(255,152,0,0.8); }
.float-dmg.incoming.burn.crit      { text-shadow: 0 2px 12px rgba(255,171,0,0.9); }
.float-dmg.incoming.freeze         { text-shadow: 0 2px 10px rgba(33,150,243,0.8); }
.float-dmg.incoming.freeze.crit    { text-shadow: 0 2px 12px rgba(100,181,246,0.9); }

/* ══════════════════════════════════════════════
   VICTORY OVERLAY
══════════════════════════════════════════════ */
#victory-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
#victory-overlay.active {
  display: flex;
  animation: victoryFadeIn 0.35s ease;
}
@keyframes victoryFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.victory-panel {
  background: linear-gradient(180deg, #1e1018 0%, #0d0810 100%);
  border: 2px solid var(--border-gold);
  box-shadow:
    0 0 50px rgba(200,150,42,0.35),
    inset 0 0 30px rgba(0,0,0,0.6);
  padding: 28px 40px 32px;
  min-width: 300px;
  max-width: 400px;
  text-align: center;
}

.victory-title {
  font-family: var(--font-title);
  font-size: 26px;
  color: var(--text-gold);
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(200,150,42,0.7), 0 2px 8px rgba(0,0,0,0.9);
  margin-bottom: 6px;
}

.victory-subtitle {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  min-height: 16px;
}

.victory-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
  margin: 14px 0;
}

.victory-rewards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.vr-reward-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 20px;
  color: var(--text-gold);
  letter-spacing: 1px;
}

.vr-icon { font-size: 22px; line-height: 1; }

.victory-drops {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 0;
}

.vr-drop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  /* background & borderColor set inline per rarity */
  border: 1px solid transparent;
  padding: 8px 12px;
  border-radius: 3px;
  min-width: 64px;
}

.vr-drop-icon { font-size: 22px; line-height: 1; }
.vr-drop-img  { width: 48px; height: 48px; object-fit: contain; display: block; }
.vr-drop-name {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ── MINIMAP ── */
#minimap {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 120px;
  height: 100px;
  background: rgba(10,8,12,0.85);
  border: 1px solid var(--border-gold);
  border-radius: 2px;
  padding: 4px;
  font-size: 9px;
  font-family: var(--font-ui);
  color: var(--text-dim);
  letter-spacing: 1px;
  overflow: hidden;
}

#minimap-title {
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 3px;
}

.minimap-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin: 1px;
}

/* ── TOOLTIP ── */
#tooltip {
  position: fixed;
  z-index: 9999;
  display: none;
  background: rgba(8,5,10,0.97);
  border: 1px solid var(--border-gold);
  padding: 10px 14px;
  min-width: 160px;
  max-width: 240px;
  pointer-events: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.95);
}

#tooltip.visible { display: block; }

/* Skill-mode overrides: rich layout, zero padding (sections handle their own) */
#tooltip.skill-mode {
  padding: 0;
  max-width: 262px;
  min-width: 220px;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(160deg, #1c1108 0%, #0d0806 100%);
  border-color: rgba(180,130,40,0.55);
  box-shadow: 0 10px 36px rgba(0,0,0,0.88), 0 0 0 1px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,220,100,0.06);
}

/* Header */
.tt-sk-header {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px 9px;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(180,130,40,0.18);
}
.tt-sk-img {
  width: 54px; height: 54px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(180,130,40,0.35);
  flex-shrink: 0;
}
.tt-sk-icon-fb {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  border: 1px solid rgba(180,130,40,0.3);
  border-radius: 3px;
  background: rgba(0,0,0,0.45);
  flex-shrink: 0;
}
.tt-sk-title { flex: 1; min-width: 0; }
.tt-sk-name {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--text-gold);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-sk-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tt-sk-type {
  font-size: 8px;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid;
  font-family: var(--font-ui);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.tt-sk-elem { font-size: 9px; color: rgba(200,200,200,0.55); font-family: var(--font-ui); }

/* Costs row */
.tt-sk-costs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(0,0,0,0.2);
}
.tt-sk-mp  { font-size: 10px; color: #5c9adf; font-family: var(--font-ui); }
.tt-sk-cd  { font-size: 10px; color: #999;    font-family: var(--font-ui); }
.tt-sk-dot { color: rgba(180,130,40,0.3); font-size: 12px; }

/* Damage block */
.tt-sk-dmg-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px 5px;
  gap: 8px;
}
.tt-sk-dmg-col { display: flex; flex-direction: column; gap: 1px; }
.tt-sk-dmg-col.right { align-items: flex-end; }
.tt-sk-dmg-label {
  font-size: 8px;
  color: rgba(200,200,200,0.45);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tt-sk-dmg-value {
  font-size: 16px;
  font-family: var(--font-ui);
  font-weight: bold;
  letter-spacing: 0.5px;
  line-height: 1;
}
.tt-sk-dmg-formula {
  font-size: 9px;
  color: rgba(200,200,200,0.38);
  font-family: var(--font-ui);
  align-self: center;
  flex: 1;
  text-align: center;
}

/* Separator */
.tt-sk-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,130,40,0.22), transparent);
  margin: 2px 10px;
}

/* Description */
.tt-sk-desc {
  padding: 7px 12px 5px;
  font-size: 11px;
  color: rgba(225,205,165,0.88);
  font-family: var(--font-body);
  line-height: 1.55;
}

/* Tags */
.tt-sk-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 12px 10px; }
.tt-sk-tag {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--font-ui);
  letter-spacing: 0.2px;
  line-height: 1.5;
}
.tt-sk-tag.tag-aoe     { background:rgba(200,70,30,0.2);  color:#e08060; border:1px solid rgba(200,70,30,0.4); }
.tt-sk-tag.tag-multi   { background:rgba(110,70,190,0.2); color:#b090ee; border:1px solid rgba(110,70,190,0.4); }
.tt-sk-tag.tag-hits    { background:rgba(180,140,30,0.2); color:#e0b050; border:1px solid rgba(180,140,30,0.4); }
.tt-sk-tag.tag-status  { background:rgba(60,160,70,0.15); color:#70cc80; border:1px solid rgba(60,160,70,0.3); }
.tt-sk-tag.tag-consume { background:rgba(190,50,50,0.18); color:#e07070; border:1px solid rgba(190,50,50,0.35); }
.tt-sk-tag.tag-buff    { background:rgba(180,155,30,0.18);color:#ddbb45; border:1px solid rgba(180,155,30,0.35); }
.tt-sk-tag.tag-heal    { background:rgba(30,160,80,0.18); color:#55d090; border:1px solid rgba(30,160,80,0.35); }
.tt-sk-tag.tag-cost    { background:rgba(190,50,50,0.18); color:#e07070; border:1px solid rgba(190,50,50,0.35); }
.tt-sk-tag.tag-cond    { background:rgba(180,90,30,0.18); color:#e09060; border:1px solid rgba(180,90,30,0.35); }

/* ── Bloco de implicits em destaque ──────────────────────────────────────── */
.tt-impl-block {
  padding: 3px 0;
  margin: 3px 0;
}
.tt-implicit {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #d4a843;
  padding: 2px 0;
  letter-spacing: 0.2px;
}
.tt-implicit b, .tt-prop b { font-weight: 700; }

/* ── Stats por categoria ─────────────────────────────────────────────────── */
.tt-prop {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #a8d4a8;   /* verde — base / prefix */
  padding: 2px 0;
}
.tt-prop-main    { color: #e5c84a; }  /* amarelo  — Main Stat       */
.tt-prop-primevo { color: #e05820; }  /* laranja  — Primevo         */
.tt-prop-prefix  { color: #a8d4a8; }  /* verde    — Prefix          */
.tt-prop-suffix  { color: #6aade0; }  /* azul     — Suffix          */
.tt-prop-src {
  color: rgba(180,180,180,0.50);
  font-size: 9px;
}

/* Cannot Equip */
.tt-cannot-equip {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #ff4444;
  letter-spacing: 0.5px;
  padding: 4px 0 2px;
  text-transform: uppercase;
}

/* Comparação inline */
.tt-delta     { font-family: var(--font-ui); font-size: 9px; font-weight: 700; }
.tt-delta-pos { color: #55dd88; }
.tt-delta-neg { color: #ff5555; }

/* Slot offhand bloqueado por arma 2 mãos */
.slot-2h-locked {
  pointer-events: none;
  cursor: default;
}
.slot-2h-locked::after {
  content: '2H';
  position: absolute;
  bottom: 3px; right: 3px;
  font-size: 8px;
  font-family: var(--font-ui);
  color: rgba(210,160,50,0.9);
  background: rgba(0,0,0,0.55);
  padding: 1px 3px;
  border-radius: 2px;
  pointer-events: none;
}

.tt-item-img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
  image-rendering: pixelated;
  margin: 0 auto 10px;
}

.tt-item-icon {
  font-size: 36px;
  line-height: 1;
  text-align: center;
  margin-bottom: 8px;
}

.tt-name    { font-family: var(--font-ui); font-size: 13px; margin-bottom: 3px; }
.tt-quality { font-family: var(--font-ui); font-size: 11px; letter-spacing: 1px; margin-bottom: 1px; }
.tt-grade   { font-family: var(--font-ui); font-size: 11px; letter-spacing: 3px; margin-bottom: 6px; }
.tt-type    { font-family: var(--font-ui); font-size: 9px; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.tt-desc    { font-family: var(--font-ui); font-size: 10px; color: var(--text-dim); margin: 6px 0; font-style: italic; }
.tt-tier    { font-family: var(--font-ui); font-size: 9px; color: #ffffff; letter-spacing: 1px; margin-top: 4px; text-transform: uppercase; }
.tt-stat    { font-family: var(--font-ui); font-size: 10px; color: #aaffaa; padding: 1px 0; }
.tt-stat.neg { color: #ffaaaa; }
.tt-affix        { font-family: var(--font-ui); font-size: 10px; color: #88aaff; padding: 1px 0; }
.tt-affix-name   { font-family: var(--font-ui); color: rgba(180,180,180,0.6); font-size: 9px; }
.tt-divider      { height: 1px; background: var(--border-dark); margin: 5px 0; }
.tt-sell         { font-family: var(--font-ui); font-size: 10px; color: #e5c46b; padding: 1px 0; }
.tt-sell b       { color: #ffd97a; }

/* ── CONTEXT MENU ── */
#context-menu {
  position: fixed;
  z-index: 9998;
  background: var(--bg-panel);
  border: 1px solid var(--border-gold);
  min-width: 120px;
  display: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.9);
}

#context-menu.visible { display: block; }

.ctx-item {
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 1px solid rgba(107,74,26,0.2);
  transition: background 0.1s;
}

.ctx-item:last-child { border-bottom: none; }
.ctx-item:hover { background: rgba(100,70,20,0.3); color: var(--text-gold); }
.ctx-item.danger { color: #ff6666; }
.ctx-item.danger:hover { background: rgba(100,20,20,0.4); }

/* ══════════════════════════════════════════════
   RIGHT SIDEBAR
══════════════════════════════════════════════ */
#right-sidebar {
  grid-area: rightsidebar;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-gold);
  overflow: hidden;
  background: #06040a;
  min-height: 0;
}

/* Shared section container */
.rsb-section {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-gold);
  flex-shrink: 0;
}

.rsb-section-header {
  font-family: var(--font-title);
  font-size: 10px;
  color: var(--text-gold);
  padding: 5px 10px;
  border-bottom: 1px solid rgba(107,74,26,0.3);
  background: rgba(107,74,26,0.08);
  letter-spacing: 2px;
  text-transform: uppercase;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.rsb-collapse-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
  letter-spacing: 0;
  text-transform: none;
  position: absolute;
  right: 6px;
}
.rsb-collapse-btn:hover { color: var(--text-gold); }

/* Collapsed state */
.rsb-section.collapsed .rsb-section-body,
.rsb-section.collapsed .rsb-chat-tabs,
.rsb-section.collapsed .rsb-chat-panes,
.rsb-section.collapsed .rsb-chat-input-row { display: none; }
.rsb-section.collapsed.rsb-chat-section { flex: 0; }

.rsb-section-body {
  overflow-y: auto;
}

/* ── Bag section: capped height so chat is never pushed off screen ── */
#rsb-bag-section {
  flex-shrink: 1;          /* allowed to shrink when space is tight */
  max-height: 42vh;        /* hard cap — remaining space goes to chat */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#rsb-bag-section .rsb-section-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Filter tabs stay pinned at the top of the scrollable body */
.bag-filter-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #06040a;     /* matches sidebar bg, covers scrolled content */
}

/* Chat section fills all remaining space, guaranteed minimum */
.rsb-chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 110px;       /* always visible, even with a full bag */
  border-bottom: none;
}

/* Chat tabs bar */
.rsb-chat-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-gold);
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}

.rsb-ctab {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(107,74,26,0.2);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 7px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.rsb-ctab:last-child { border-right: none; }
.rsb-ctab:hover { color: var(--text-light); background: rgba(100,70,20,0.15); }
.rsb-ctab.active {
  color: var(--text-gold);
  background: rgba(100,70,20,0.25);
  border-bottom: 2px solid var(--border-gold-bright);
}

/* Panes container */
.rsb-chat-panes {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

.rsb-chat-pane {
  display: none;
  height: 100%;
  flex-direction: column;
}
.rsb-chat-pane.active { display: flex; }

/* Message area (shared between panes and combat-log) */
.rsb-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-family: var(--font-body);
}

.chat-empty-hint {
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  padding: 12px;
  font-style: italic;
}

.rsb-chat-entry { padding: 1px 0; border-bottom: 1px solid rgba(107,74,26,0.08); line-height: 1.4; }
.chat-author { color: var(--text-gold); font-family: var(--font-ui); font-size: 11px; }
.chat-text   { color: var(--text-light); }

/* Chat input row */
.rsb-chat-input-row {
  display: flex;
  gap: 4px;
  padding: 5px 6px;
  border-top: 1px solid rgba(107,74,26,0.3);
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}

.rsb-chat-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(107,74,26,0.4);
  color: var(--text-light);
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 2px;
  outline: none;
}
.rsb-chat-input:focus { border-color: var(--border-gold); }

.rsb-chat-send-btn {
  background: rgba(100,70,20,0.4);
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}
.rsb-chat-send-btn:hover { background: rgba(150,100,30,0.6); }

/* ── SNB NOTIFY GLOW ── */
.snb-notify {
  animation: snbNotify 1.6s ease-in-out infinite;
}
@keyframes snbNotify {
  0%, 100% { box-shadow: none; border-color: transparent; }
  50%       { box-shadow: 0 0 12px 3px rgba(200,150,42,0.55); border-color: rgba(200,150,42,0.8); }
}

/* ── COMBAT LOCK TOAST ── */
#combat-lock-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: rgba(100,15,15,0.95);
  border: 1px solid rgba(200,50,50,0.55);
  color: #ffaaaa;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 18px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  white-space: nowrap;
}
#combat-lock-toast.show {
  animation: toastFade 2.4s ease forwards;
}
@keyframes toastFade {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ── SKILL TREE PANEL REDESIGN ── */
#st-stats-block {
  padding: 6px 12px 6px;
  border-bottom: 1px solid rgba(107,74,26,0.2);
  flex-shrink: 0;
}
.st-stat-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-family: var(--font-ui);
  font-size: 9px;
  border-bottom: 1px solid rgba(107,74,26,0.08);
}
.st-stat-line:last-child { border-bottom: none; }
.st-stat-lbl  { color: var(--text-dim); }
#st-class-lv-val { color: var(--text-gold); }
#st-xp-next   { color: #44cc66; }
.st-pts-green { color: #44cc66; font-weight: bold; }

#st-bonuses-list {
  padding: 4px 10px 6px;
  max-height: 78px;
  overflow-y: auto;
  flex-shrink: 0;
}
.st-bonus-entry {
  font-family: var(--font-ui);
  font-size: 8px;
  color: #88ddaa;
  padding: 2px 0;
  border-bottom: 1px solid rgba(50,180,80,0.08);
  line-height: 1.4;
}
.st-bonus-empty {
  color: var(--text-dim);
  font-style: italic;
  font-size: 8px;
  font-family: var(--font-ui);
}
#st-upgrade-wrap {
  padding: 8px 12px 4px;
  flex-shrink: 0;
}
.st-upgrade-btn {
  width: 100%;
  background: rgba(80,50,15,0.35);
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 7px 0;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  border-radius: 2px;
}
.st-upgrade-btn:hover {
  background: rgba(130,90,25,0.5);
  box-shadow: 0 0 10px rgba(200,150,42,0.3);
}

/* ── SKILL TREE FULL OVERLAY ── */
#st-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(90,20,150,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 85%, rgba(20,50,160,0.10) 0%, transparent 50%),
    rgba(4, 2, 10, 0.97);
  overflow: hidden;
}
#st-overlay.active { display: flex; }

#st-overlay-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
  position: relative;
}

/* Header */
#st-ov-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border-gold);
  flex-shrink: 0;
  gap: 12px;
}
#st-ov-title-block { display: flex; flex-direction: column; gap: 2px; }
#st-ov-class-name {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--text-gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(200,150,42,0.4);
}
#st-ov-class-lv {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 2px;
}
#st-ov-meta { display: flex; align-items: center; gap: 12px; }
#st-ov-xp-info {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #44cc66;
  letter-spacing: 1px;
}
.st-ov-pts-badge {
  font-family: var(--font-ui);
  font-size: 9px;
  padding: 3px 10px;
  background: rgba(200,150,42,0.12);
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  border-radius: 2px;
  letter-spacing: 1px;
}
#st-ov-close {
  background: transparent;
  border: 1px solid rgba(200,150,42,0.3);
  color: var(--text-dim);
  font-size: 15px;
  width: 30px; height: 30px;
  cursor: pointer;
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
#st-ov-close:hover { color: var(--text-gold); border-color: var(--border-gold); }

/* Tree container */
#st-ov-tree-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0 12px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#st-ov-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Tier label */
.st-ov-tier-label {
  font-family: var(--font-ui);
  font-size: 8px;
  color: rgba(200,150,42,0.38);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 6px;
  margin-top: 6px;
}

/* Node row */
.st-ov-tier-row {
  display: flex;
  align-items: center;
}

/* Nodes */
.st-ov-node {
  width: 78px; height: 78px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 2px solid rgba(80,60,40,0.3);
  background: radial-gradient(ellipse at 40% 35%, rgba(30,15,45,0.95) 0%, rgba(8,4,15,0.98) 100%);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative;
  text-align: center;
  padding: 5px 4px;
  flex-shrink: 0;
}
.st-ov-node:hover { transform: scale(1.1); }

.st-ov-n-lv {
  font-family: var(--font-ui);
  font-size: 8px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 1px;
}
.st-ov-n-icon { font-size: 22px; line-height: 1.1; }
.st-ov-n-desc {
  font-family: var(--font-ui);
  font-size: 6.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.2;
  width: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

/* Unlocked */
.st-ov-unlocked {
  border-color: rgba(55,200,90,0.75);
  box-shadow: 0 0 18px rgba(50,180,80,0.32), inset 0 0 22px rgba(50,180,80,0.07);
}
.st-ov-unlocked .st-ov-n-lv  { color: #44cc66; }
.st-ov-unlocked .st-ov-n-desc { color: #88ddaa; }
.st-ov-unlocked .st-ov-n-icon { filter: drop-shadow(0 0 5px rgba(50,200,80,0.55)); }

/* Next to unlock */
.st-ov-next {
  border-color: rgba(210,165,42,0.9);
  box-shadow: 0 0 24px rgba(200,150,42,0.42), inset 0 0 22px rgba(200,150,42,0.09);
  animation: stNextPulse 2s ease-in-out infinite;
}
.st-ov-next .st-ov-n-lv  { color: var(--text-gold); }
.st-ov-next .st-ov-n-desc { color: var(--text-gold); }
.st-ov-next .st-ov-n-icon { filter: drop-shadow(0 0 5px rgba(200,150,42,0.65)); }
@keyframes stNextPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(200,150,42,0.42), inset 0 0 22px rgba(200,150,42,0.09); }
  50%       { box-shadow: 0 0 38px rgba(200,150,42,0.70), inset 0 0 35px rgba(200,150,42,0.16); }
}

/* Locked */
.st-ov-locked { border-color: rgba(80,60,40,0.25); opacity: 0.4; }

/* Horizontal connectors */
.st-ov-h-conn {
  width: 22px; height: 2px;
  background: rgba(80,60,40,0.3);
  flex-shrink: 0;
}
.st-ov-h-conn.st-ov-conn-active {
  background: linear-gradient(90deg, rgba(50,180,80,0.55), rgba(50,180,80,0.55));
  box-shadow: 0 0 5px rgba(50,180,80,0.25);
}

/* Vertical connector row */
.st-ov-v-row {
  display: flex;
  align-items: flex-start;
}
.st-ov-v-slot {
  width: 78px;
  height: 22px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.st-ov-v-conn-inner {
  width: 2px; height: 100%;
  background: rgba(80,60,40,0.28);
}
.st-ov-v-conn-inner.st-ov-conn-active {
  background: linear-gradient(180deg, rgba(50,180,80,0.55), rgba(50,180,80,0.35));
  box-shadow: 0 0 4px rgba(50,180,80,0.2);
}
.st-ov-v-gap { width: 22px; flex-shrink: 0; }

/* Skills bar at bottom */
#st-ov-skills-bar {
  border-top: 1px solid rgba(107,74,26,0.5);
  padding: 10px 0 14px;
  flex-shrink: 0;
}
#st-ov-skills-title {
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 8px;
}
#st-ov-skills-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.st-ov-skill { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.st-ov-skill-icon {
  width: 56px; height: 56px;
  background: rgba(15,8,25,0.85);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 0 8px rgba(200,150,42,0.15);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.st-ov-skill-icon:hover {
  border-color: var(--border-gold-bright);
  box-shadow: 0 0 14px rgba(200,150,42,0.4);
  transform: translateY(-2px);
}
.st-ov-skill-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.st-ov-skill-name {
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-align: center;
}
.st-ov-skill:hover .st-ov-skill-name { color: var(--text-light); }

/* Node detail panel (right side of overlay) */
#st-ov-detail {
  position: absolute;
  top: 72px;
  right: 0;
  width: 220px;
  background: rgba(6, 3, 14, 0.97);
  border: 1px solid var(--border-gold);
  border-right: none;
  padding: 14px 16px;
  display: none;
  z-index: 5;
  border-radius: 3px 0 0 3px;
}
#st-ov-detail.visible { display: block; }
#st-ov-detail-lv {
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
#st-ov-detail-desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 10px;
}
#st-ov-detail-status { font-family: var(--font-ui); font-size: 9px; letter-spacing: 1px; }
.st-detail-unlocked { color: #44cc66; }
.st-detail-next     { color: var(--text-gold); }
.st-detail-locked   { color: var(--text-dim); }

/* ── STAT TOOLTIP POPUP ── */
#stat-tip-popup {
  display: none;
  position: fixed;
  z-index: 400;
  background: rgba(5, 2, 12, 0.98);
  border: 1px solid var(--border-gold);
  padding: 10px 14px;
  border-radius: 3px;
  min-width: 210px;
  max-width: 270px;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
#stat-tip-popup.visible { display: block; }
#stat-tip-title {
  font-family: var(--font-title);
  font-size: 10px;
  color: var(--text-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(107,74,26,0.4);
}
#stat-tip-body {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-light);
  line-height: 1.8;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  #game-layout {
    grid-template-columns: 280px 1fr 260px;
  }
}

@media (max-width: 900px) {
  #game-layout {
    grid-template-columns: 280px 1fr;
    grid-template-areas:
      "topbar   topbar"
      "sidebar  main"
      "sidebar  actionbar";
  }
  #right-sidebar { display: none; }
}

@media (max-width: 700px) {
  #game-layout {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "topbar  topbar"
      "sidebar main"
      "sidebar actionbar";
  }
  #side-panels { display: none; }
  #right-sidebar { display: none; }
}

/* ═══════════════════════════════════════════════════
   RESOURCE CARDS
   ═══════════════════════════════════════════════════ */

.resource-card .monster-card-image-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.resource-card-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  image-rendering: auto;
}

.resource-type-label {
  font-size: 9px;
  font-family: var(--font-ui);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}
/* Per-type colors for resource-type-label */
.resource-type-mineral { color: rgba(180,180,180,0.85); }
.resource-type-plant   { color: rgba(80,200,100,0.90);  }
.resource-type-wood    { color: rgba(200,140,60,0.90);  }
.resource-type-hunt    { color: rgba(220,170,80,0.95); text-shadow: 0 0 5px rgba(200,140,40,0.3); }

/* Resource rarity count colors */
.resource-count-exotic {
  color: rgba(255,140,0,0.95);
  text-shadow: 0 0 8px rgba(255,120,0,0.5);
  font-weight: bold;
}
.resource-count-superior {
  color: rgba(255,215,60,0.95);
  text-shadow: 0 0 8px rgba(255,200,0,0.5);
  font-weight: bold;
}

/* ── Collect buttons: per-resource-type color ── */

/* Mining — Azul escuro, texto branco */
.collect-mineral {
  background: linear-gradient(135deg, rgba(10,30,80,0.95), rgba(18,60,140,0.9)) !important;
  border-color: rgba(80,130,220,0.55) !important;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
.collect-mineral:hover {
  background: linear-gradient(135deg, rgba(18,50,120,0.98), rgba(28,80,180,0.95)) !important;
  border-color: rgba(120,170,255,0.8) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(60,120,255,0.35) !important;
}

/* Woodcutting — Laranja escuro, texto branco */
.collect-wood {
  background: linear-gradient(135deg, rgba(80,30,5,0.95), rgba(140,60,10,0.9)) !important;
  border-color: rgba(200,110,40,0.55) !important;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
.collect-wood:hover {
  background: linear-gradient(135deg, rgba(110,42,8,0.98), rgba(170,80,15,0.95)) !important;
  border-color: rgba(240,150,70,0.8) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(200,100,30,0.35) !important;
}

/* Harvesting — Verde escuro, texto branco */
.collect-plant {
  background: linear-gradient(135deg, rgba(5,45,14,0.95), rgba(12,85,28,0.9)) !important;
  border-color: rgba(50,160,80,0.55) !important;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
.collect-plant:hover {
  background: linear-gradient(135deg, rgba(8,62,20,0.98), rgba(16,110,38,0.95)) !important;
  border-color: rgba(80,200,110,0.8) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(40,170,70,0.35) !important;
}

/* Hunting — Amarelo escuro, texto branco */
.collect-hunt {
  background: linear-gradient(135deg, rgba(70,52,4,0.95), rgba(120,92,8,0.9)) !important;
  border-color: rgba(190,155,30,0.55) !important;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
.collect-hunt:hover {
  background: linear-gradient(135deg, rgba(95,72,6,0.98), rgba(150,118,12,0.95)) !important;
  border-color: rgba(230,195,50,0.8) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(180,150,20,0.35) !important;
}

/* Emoji branco nos botões de coleta */
.collect-btn .btn-emoji,
#col-action-btn .btn-emoji {
  display: inline-block;
  filter: brightness(0) invert(1);
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════
   CARD DISMISS BUTTON (X)
   ═══════════════════════════════════════════════════ */

.card-dismiss-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(180, 100, 100, 0.5);
  background: rgba(40, 10, 10, 0.7);
  color: #c47070;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
  opacity: 0;
}

.monster-card-new:hover .card-dismiss-btn {
  opacity: 1;
}

.card-dismiss-btn:hover {
  background: rgba(180, 40, 40, 0.85);
  border-color: rgba(255, 100, 100, 0.8);
  color: #ff9090;
}

/* ═══════════════════════════════════════════════════
   COLLECTION OVERLAY (#collect-float) — redesigned
   ═══════════════════════════════════════════════════ */

#collect-float {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(6, 4, 14, 0.94);
  border: 1px solid rgba(80, 140, 255, 0.3);
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px;
  box-shadow: inset 0 0 80px rgba(20, 60, 180, 0.07);
  overflow: hidden;
}

#collect-float.active {
  display: flex;
}

/* Header */
#cf-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}

#cf-col-resource-name {
  color: #90caff;
  font-size: 14px;
}

#cf-col-rarity-badge {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Big resource image */
#cf-col-resource-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

#cf-col-resource-img {
  width: min(280px, 40vw);
  height: min(280px, 40vw);
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 20px rgba(80, 160, 255, 0.25));
}

@keyframes huntHitFlash {
  0%   { filter: drop-shadow(0 0 20px rgba(80,160,255,0.25)) brightness(1)   saturate(1); }
  12%  { filter: drop-shadow(0 0 28px rgba(255,40,0,1.0))    brightness(3.5) saturate(0.4) sepia(0.8) hue-rotate(-15deg); }
  100% { filter: drop-shadow(0 0 20px rgba(80,160,255,0.25)) brightness(1)   saturate(1); }
}

#cf-col-resource-img.hunt-hit-flash {
  animation: huntHitFlash 0.35s ease-out forwards;
}

/* ═══════════════════════════════════════════════
   EQUIPMENT ITEM SYSTEM
═══════════════════════════════════════════════ */

/* ── Set bonus display ───────────────────────── */
#equip-set-bonus {
  padding: 4px 8px 6px;
  min-height: 0;
}

.equip-set-header {
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 3px;
  border-top: 1px solid rgba(200,160,40,0.20);
  padding-top: 4px;
}

.equip-set-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 9px;
  padding: 1px 0;
  gap: 6px;
}

.equip-set-label {
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.equip-set-val {
  color: rgba(220,220,220,0.70);
  font-size: 8px;
  text-align: right;
  flex-shrink: 1;
}

/* ── Equip slots — borda baseada em ESTRELAS (raridade de drop) ─ */
/* 0★ = sem borda especial  1★=bronze  2★=silver  3★=gold  4★=platinum  5★=diamond */
.equip-slot[data-stars="1"] { border-color: #cd7f32 !important; box-shadow: 0 0 8px rgba(205,127,50,0.55) !important; }
.equip-slot[data-stars="2"] { border-color: #c0c0c0 !important; box-shadow: 0 0 8px rgba(192,192,192,0.55) !important; }
.equip-slot[data-stars="3"] { border-color: #ffd700 !important; box-shadow: 0 0 10px rgba(255,215,0,0.60) !important; }
.equip-slot[data-stars="4"] { border-color: #e5e4e2 !important; box-shadow: 0 0 10px rgba(229,228,226,0.60) !important; }
.equip-slot[data-stars="5"] { border-color: #b9f2ff !important; box-shadow: 0 0 12px rgba(185,242,255,0.70) !important; }

/* ── Inventory cells — borda baseada em ESTRELAS ─ */
.inv-cell[data-stars="1"] { border-color: #cd7f32 !important; }
.inv-cell[data-stars="2"] { border-color: #c0c0c0 !important; }
.inv-cell[data-stars="3"] { border-color: #ffd700 !important; }
.inv-cell[data-stars="4"] { border-color: #e5e4e2 !important; }
.inv-cell[data-stars="5"] { border-color: #b9f2ff !important; }

/* ── Inventory cell — image glow baseado em QUALIDADE (data-rarity) ───── */
.inv-cell[data-rarity="uncommon"]     .inv-cell-img { filter: drop-shadow(0 0 3px #3bff45); }
.inv-cell[data-rarity="rare"]         .inv-cell-img { filter: drop-shadow(0 0 3px #2a90f7); }
.inv-cell[data-rarity="superior"]     .inv-cell-img { filter: drop-shadow(0 0 3px #fae315); }
.inv-cell[data-rarity="epic"]         .inv-cell-img { filter: drop-shadow(0 0 4px #a304d3); }
.inv-cell[data-rarity="legendary"]    .inv-cell-img { filter: drop-shadow(0 0 5px #fd7f09); }
.inv-cell[data-rarity="mythic"]       .inv-cell-img { filter: drop-shadow(0 0 5px #b4f500); }
.inv-cell[data-rarity="ancient"]      .inv-cell-img { filter: drop-shadow(0 0 5px #00ffaa); }
.inv-cell[data-rarity="divine"]       .inv-cell-img { filter: drop-shadow(0 0 6px #f70eb1); }
.inv-cell[data-rarity="transcendent"] .inv-cell-img { filter: drop-shadow(0 0 6px #ff0015); }

/* ── Inventory cell — equipment rarity name color ─ */
.inv-cell[data-equip="1"] .inv-cell-count {
  color: rgba(255, 215, 100, 0.90);
}

/* Qty preview */
#cf-col-qty-preview {
  font-family: var(--font-ui);
  font-size: 13px;
  color: #90caff;
  letter-spacing: 1px;
}

/* Mini-game container */
#cf-col-minigame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(420px, 90%);
  position: relative;
  overflow: visible;
}

/* Main progress bar */
#cf-col-progress-wrap {
  position: relative;
  width: 100%;
  height: 24px;
  background: rgba(10, 15, 40, 0.8);
  border: 1px solid rgba(80, 140, 255, 0.35);
  border-radius: 4px;
  overflow: hidden;
}

#cf-col-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1a4ab0, #2979e0, #5ba8ff);
  border-radius: 3px;
}

#cf-col-progress-fill.collect-complete-flash {
  background: linear-gradient(90deg, #4caf50, #81c784);
  animation: colFlash 0.4s ease;
}

@keyframes colFlash {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(2.5); }
  100% { filter: brightness(1); }
}

#cf-col-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

/* Marker bar */
#cf-col-marker-wrap {
  position: relative;
  width: 100%;
  height: 28px;
  background: rgba(4, 6, 20, 0.92);
  border: 1px solid rgba(180, 140, 60, 0.45);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 0 12px rgba(180, 120, 20, 0.18),
    inset 0 1px 0 rgba(255, 200, 80, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Dark texture overlay on the white zones */
#cf-col-marker-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
}

/* Colored zone segments (built dynamically by JS) */
.zone-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

/* White zone gets a subtle dark fill */
.zone-segment.zone-white {
  background: rgba(20, 18, 35, 0.6);
}

/* Colored zones: flash-in when block jumps to new position */
.zone-segment.zone-colored {
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.3);
  animation: zonePop 0.22s ease;
}

@keyframes zonePop {
  0%   { filter: brightness(3); opacity: 0.3; }
  60%  { filter: brightness(1.4); }
  100% { filter: brightness(1);  opacity: 1; }
}

/* Divider lines between zones */
.zone-segment::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}

/* Oscillating marker (on top of zones) */
#cf-col-marker, .col-marker {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 8px;
  background: linear-gradient(180deg, #fff 0%, #d4c89a 100%);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow:
    0 0 10px rgba(255,255,255,0.95),
    0 0 20px rgba(255,220,100,0.5),
    0 0 2px #000;
  pointer-events: none;
  z-index: 10;
}

/* Hit feedback classes */
#cf-col-marker.col-hit-red {
  background: #f44336;
  box-shadow: 0 0 14px rgba(244,67,54,1), 0 0 3px #000;
  animation: markerPop 0.3s ease;
}
#cf-col-marker.col-hit-yellow {
  background: #ffeb3b;
  box-shadow: 0 0 14px rgba(255,235,59,1), 0 0 3px #000;
  animation: markerPop 0.3s ease;
}
#cf-col-marker.col-hit-green {
  background: #4caf50;
  box-shadow: 0 0 12px rgba(76,175,80,0.95), 0 0 3px #000;
  animation: markerPop 0.25s ease;
}
#cf-col-marker.col-hit-white {
  background: #888;
  animation: markerPop 0.2s ease;
}

@keyframes markerPop {
  0%   { transform: translateX(-50%) scaleY(1); }
  40%  { transform: translateX(-50%) scaleY(2); }
  100% { transform: translateX(-50%) scaleY(1); }
}

/* Floating +pts label — floats over the resource image */
.collect-hit-label {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(0,0,0,0.95), 0 1px 4px rgba(0,0,0,0.8);
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: hitLabelFloat 1.5s ease forwards;
}

@keyframes hitLabelFloat {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  15%  { transform: translateX(-50%) translateY(-4px) scale(1.2); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.05); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.9); }
}

/* Hunt mode damage number — floats above monster image */
.collect-hit-label-hunt {
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 0 16px rgba(0,0,0,0.7);
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: huntDmgFloat 1.2s ease-out forwards;
}

@keyframes huntDmgFloat {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);   }
  12%  { opacity: 1; transform: translateX(-50%) translateY(-8px)  scale(1.35); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-70px) scale(0.8); }
}

#cf-col-hint {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-align: center;
}

/* Action buttons */
#cf-col-actions {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}

#col-action-btn {
  padding: 10px 32px;
  background: linear-gradient(135deg, rgba(21, 60, 120, 0.9), rgba(30, 90, 180, 0.85));
  border: 1px solid rgba(100, 160, 255, 0.6);
  border-radius: 4px;
  color: #90caff;
  font-family: var(--font-title);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

#col-action-btn:hover {
  background: linear-gradient(135deg, rgba(30, 80, 160, 0.95), rgba(40, 110, 220, 0.9));
  border-color: rgba(140, 190, 255, 0.9);
  color: #c0e0ff;
  box-shadow: 0 0 14px rgba(80, 150, 255, 0.45);
}

#col-action-btn:active { transform: scale(0.95); }

/* ── Per-resource-type themes for #collect-float ── */

/* WOOD — Marrom/Laranja */
#collect-float.collect-theme-wood {
  background: rgba(28, 12, 3, 0.96);
  border-color: rgba(220,140,60,0.4);
  box-shadow: inset 0 0 80px rgba(160,80,20,0.12);
}
#collect-float.collect-theme-wood #cf-col-resource-name,
#collect-float.collect-theme-wood #cf-col-qty-preview { color: #d4915a; }
#collect-float.collect-theme-wood #cf-col-resource-img {
  filter: drop-shadow(0 0 20px rgba(200,120,40,0.3));
}
#collect-float.collect-theme-wood #cf-col-progress-wrap {
  border-color: rgba(220,140,60,0.45);
  background: rgba(40,18,4,0.85);
}
#collect-float.collect-theme-wood #cf-col-progress-fill {
  background: linear-gradient(90deg, #5c2a06, #a05010, #d07030);
}
#collect-float.collect-theme-wood #col-action-btn {
  background: linear-gradient(135deg, rgba(120,55,10,0.9), rgba(190,90,20,0.85));
  border-color: rgba(255,150,60,0.6);
  color: #ffbb70;
  text-shadow: 0 0 6px rgba(255,130,40,0.5);
}
#collect-float.collect-theme-wood #col-action-btn:hover {
  background: linear-gradient(135deg, rgba(160,70,15,0.95), rgba(220,110,30,0.9));
  border-color: rgba(255,180,90,0.9);
  color: #ffd4a0;
  box-shadow: 0 0 14px rgba(255,130,40,0.45);
}

/* PLANT — Verde */
#collect-float.collect-theme-plant {
  background: rgba(4, 18, 7, 0.96);
  border-color: rgba(80,200,100,0.35);
  box-shadow: inset 0 0 80px rgba(20,80,30,0.12);
}
#collect-float.collect-theme-plant #cf-col-resource-name,
#collect-float.collect-theme-plant #cf-col-qty-preview { color: #7ce89a; }
#collect-float.collect-theme-plant #cf-col-resource-img {
  filter: drop-shadow(0 0 20px rgba(60,180,80,0.3));
}
#collect-float.collect-theme-plant #cf-col-progress-wrap {
  border-color: rgba(80,200,100,0.4);
  background: rgba(4,18,8,0.85);
}
#collect-float.collect-theme-plant #cf-col-progress-fill {
  background: linear-gradient(90deg, #0d4a1e, #1a8035, #4caf50);
}
#collect-float.collect-theme-plant #col-action-btn {
  background: linear-gradient(135deg, rgba(15,80,30,0.9), rgba(25,130,50,0.85));
  border-color: rgba(80,200,100,0.6);
  color: #7ce89a;
  text-shadow: 0 0 6px rgba(60,180,80,0.5);
}
#collect-float.collect-theme-plant #col-action-btn:hover {
  background: linear-gradient(135deg, rgba(20,100,40,0.95), rgba(35,160,65,0.9));
  border-color: rgba(110,220,130,0.9);
  color: #a8f0bc;
  box-shadow: 0 0 14px rgba(60,200,90,0.45);
}

/* HUNT — Amarelo escuro */
#collect-float.collect-theme-hunt {
  background: rgba(22, 17, 3, 0.96);
  border-color: rgba(200,50,50,0.4);
  box-shadow: inset 0 0 80px rgba(120,20,20,0.12);
}
#collect-float.collect-theme-hunt #cf-col-resource-name,
#collect-float.collect-theme-hunt #cf-col-qty-preview { color: #ff7070; }
#collect-float.collect-theme-hunt #cf-col-resource-img {
  filter: drop-shadow(0 0 20px rgba(220,60,60,0.35));
}
#collect-float.collect-theme-hunt #cf-col-progress-wrap {
  border-color: rgba(200,50,50,0.45);
  background: rgba(25,4,4,0.88);
}
#collect-float.collect-theme-hunt #cf-col-progress-fill {
  background: linear-gradient(90deg, #7a0a0a, #c02020, #e84040);
  width: 100%; /* starts full — drained by JS */
}
#collect-float.collect-theme-hunt #col-action-btn {
  background: linear-gradient(135deg, rgba(120,10,10,0.9), rgba(180,30,30,0.85));
  border-color: rgba(255,80,80,0.6);
  color: #ff9090;
  text-shadow: 0 0 6px rgba(255,60,60,0.5);
}
#collect-float.collect-theme-hunt #col-action-btn:hover {
  background: linear-gradient(135deg, rgba(160,20,20,0.95), rgba(220,50,50,0.9));
  border-color: rgba(255,120,120,0.9);
  color: #ffc0c0;
  box-shadow: 0 0 14px rgba(255,60,60,0.45);
}

#col-cancel-btn {
  padding: 10px 20px;
  background: rgba(30, 15, 15, 0.8);
  border: 1px solid rgba(150, 80, 80, 0.4);
  border-radius: 4px;
  color: #c47070;
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
}

#col-cancel-btn:hover {
  border-color: rgba(200, 100, 100, 0.7);
  color: #e08080;
  background: rgba(50, 20, 20, 0.85);
}

/* ═══════════════════════════════════════════════════
   COLLECTION REWARD OVERLAY
   ═══════════════════════════════════════════════════ */

.col-reward-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(4, 2, 12, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rewardFadeIn 0.3s ease;
}

@keyframes rewardFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.col-reward-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: rgba(10, 8, 22, 0.95);
  border: 1px solid rgba(80, 140, 255, 0.4);
  border-radius: 10px;
  padding: 30px 40px;
  box-shadow: 0 0 40px rgba(40, 100, 255, 0.15);
  text-align: center;
}

.col-reward-title {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--text-gold);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.col-reward-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 16px rgba(80, 160, 255, 0.4));
}

.col-reward-qty {
  font-family: var(--font-title);
  font-size: 22px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.col-reward-item-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* ── Detailed drop list (mining quality + gems) ── */
.col-reward-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-height: 130px;
  overflow-y: auto;
  padding: 2px 0;
}

.col-reward-item-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 3px;
  /* background & border set inline per quality */
}

.col-reward-item-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.col-reward-item-name {
  flex: 1;
  text-align: left;
}

.col-reward-item-count {
  font-weight: bold;
  font-size: 13px;
  flex-shrink: 0;
}

/* Emoji fallback when resource has no image file */
.col-reward-img-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  background: none !important;
  border: none !important;
}

.col-reward-xp {
  font-family: var(--font-ui);
  font-size: 16px;
  color: #a0e060;
  letter-spacing: 2px;
}

.col-reward-btn {
  margin-top: 6px;
  padding: 8px 28px;
  background: linear-gradient(135deg, rgba(30, 60, 140, 0.85), rgba(40, 100, 200, 0.8));
  border: 1px solid rgba(100, 160, 255, 0.5);
  border-radius: 4px;
  color: #90caff;
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.col-reward-btn:hover {
  background: linear-gradient(135deg, rgba(40, 80, 180, 0.95), rgba(50, 120, 230, 0.9));
  color: #c0e0ff;
  box-shadow: 0 0 10px rgba(80, 140, 255, 0.35);
}

/* ══════════════════════════════════════════════
   DROP CONFIRM OVERLAY
══════════════════════════════════════════════ */
#drop-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  animation: dropConfirmFadeIn 0.18s ease;
}
@keyframes dropConfirmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.drop-confirm-box {
  background: linear-gradient(180deg, #1c0f0f 0%, #0d0808 100%);
  border: 2px solid var(--border-gold);
  box-shadow:
    0 0 50px rgba(180, 40, 40, 0.22),
    0 0 20px rgba(200, 150, 42, 0.18),
    inset 0 0 30px rgba(0, 0, 0, 0.6);
  padding: 28px 36px 30px;
  min-width: 270px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  animation: dropConfirmSlideIn 0.18s ease;
}
@keyframes dropConfirmSlideIn {
  from { transform: translateY(-12px) scale(0.96); }
  to   { transform: translateY(0)     scale(1);    }
}

.drop-confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 2px;
}

.drop-confirm-name {
  font-family: var(--font-title);
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 600;
  line-height: 1.2;
}

.drop-confirm-grade {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: -4px;
}

.drop-confirm-msg {
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.6;
  margin: 4px 0 6px;
}

.drop-confirm-btns {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.drop-confirm-discard {
  background: rgba(160, 30, 30, 0.28);
  border: 1px solid rgba(180, 50, 50, 0.65);
  color: #ff7070;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 22px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.drop-confirm-discard:hover {
  background: rgba(180, 40, 40, 0.55);
  border-color: #ff6b6b;
  color: #ffaaaa;
}

.drop-confirm-keep {
  background: rgba(70, 70, 70, 0.18);
  border: 1px solid rgba(120, 120, 120, 0.38);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 22px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.drop-confirm-keep:hover {
  background: rgba(90, 90, 90, 0.38);
  color: var(--text-light);
}

/* ═══════════════════════════════════════════════════════════
   DUNGEON VIEW
═══════════════════════════════════════════════════════════ */

#dungeon-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(8, 4, 13, 0.97);
  z-index: 5;
  padding: 10px;
  gap: 6px;
  overflow-y: auto;
}
#dungeon-view.hidden { display: none; }

/* Header — mirrors .monster-list-header */
#dv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 10px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.3);
  flex-shrink: 0;
}
#dv-dungeon-icon {
  font-size: 20px;
  line-height: 1;
}
#dv-dungeon-name {
  font-family: var(--font-title);
  font-size: 15px;
  color: var(--text-gold);
  flex: 1;
  letter-spacing: 1px;
}
#dv-progress {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

/* Grid: 3 columns — 7th card placed at col 3 via inline style */
#dungeon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px;
  align-content: start;
}

/* ── Dungeon card states (applied on top of .monster-card-new) ── */

/* Pending — mystery/hidden state */
.monster-card-new.drc-pending {
  opacity: 0.55;
  cursor: default;
}
.monster-card-new.drc-pending:hover { transform: none; }

/* Active — clickable */
.monster-card-new.drc-active { cursor: pointer; }

/* Completed — greyscale, dimmed */
.monster-card-new.drc-completed {
  filter: grayscale(100%);
  opacity: 0.38;
  cursor: default;
}
.monster-card-new.drc-completed:hover { transform: none; }

/* Boss pending — subtle gold border hint */
.monster-card-new.drc-boss.drc-pending {
  border-color: rgba(200, 150, 42, 0.42) !important;
  opacity: 0.72;
  box-shadow: 0 0 10px rgba(200, 150, 42, 0.08);
}

/* Boss active — full gold treatment */
.monster-card-new.drc-boss.drc-active {
  border-color: #d4af37 !important;
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.65), inset 0 0 15px rgba(212, 175, 55, 0.08) !important;
  animation: dg-boss-pulse 1.8s ease-in-out infinite;
}
@keyframes dg-boss-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(212, 175, 55, 0.55); }
  50%       { box-shadow: 0 0 28px rgba(212, 175, 55, 0.95); }
}

/* Pending card: centered column content */
.drc-pending-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 6px;
  position: relative;
  z-index: 1;
}

/* Room label (small tag above name) */
.drc-room-num {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* Mystery "?" symbol */
.drc-question {
  font-size: 38px;
  color: rgba(122, 106, 88, 0.45);
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* "???" label below question mark */
.drc-pending-label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(100, 90, 70, 0.55);
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}

/* Cleared footer bar */
.drc-done-mark {
  width: 100%;
  padding: 5px 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(90, 90, 90, 0.8);
  background: rgba(10, 10, 10, 0.55);
  border-top: 1px solid rgba(60, 60, 60, 0.4);
  position: relative;
  z-index: 1;
}

/* Boss ENGAGE button — gold gradient override */
.monster-card-fight.drc-boss-engage {
  background: linear-gradient(180deg, rgba(200,150,42,0.88) 0%, rgba(120,78,8,0.97) 100%) !important;
  border-color: rgba(220,175,65,0.80) !important;
  color: #f5dc6a !important;
  font-size: 11px !important;
  letter-spacing: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.monster-card-fight.drc-boss-engage:hover {
  background: linear-gradient(180deg, rgba(230,178,58,0.97) 0%, rgba(155,98,12,1) 100%) !important;
  box-shadow: 0 4px 18px rgba(200,150,42,0.65) !important;
}

/* ═══════════════════════════════════════════════════════════
   DUNGEON REWARD OVERLAY
═══════════════════════════════════════════════════════════ */

#dungeon-reward-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.88);
  align-items: center;
  justify-content: center;
}
#dungeon-reward-overlay.active { display: flex; }

.dro-panel {
  background: var(--bg-dark);
  border: 1px solid rgba(200, 150, 42, 0.50);
  border-radius: 8px;
  padding: 28px 32px;
  max-width: 400px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 40px rgba(200, 150, 42, 0.28);
}
.dro-title {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--text-gold);
  text-align: center;
  letter-spacing: 2px;
}
.dro-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
}
.dro-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,150,42,0.4), transparent);
}
.dro-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  align-items: center;
}
.dro-stat-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text-light);
}
.dro-stat-icon { font-size: 17px; }
.dro-drops-section {
  width: 100%;
  max-height: 180px;
  overflow-y: auto;
}
.dro-drops-label {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 7px;
}
#dro-drops {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.dro-drop-item {
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   DUNGEON KEY MODAL
═══════════════════════════════════════════════════════════ */

#dungeon-key-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.78);
  align-items: center;
  justify-content: center;
}
#dungeon-key-modal.active { display: flex; }

.dkm-box {
  background: var(--bg-dark);
  border: 1px solid rgba(200, 150, 42, 0.38);
  border-radius: 8px;
  padding: 26px 30px;
  max-width: 340px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  box-shadow: 0 0 24px rgba(0,0,0,0.5);
}
.dkm-icon {
  font-size: 34px;
  line-height: 1;
}
.dkm-title {
  font-family: var(--font-title);
  font-size: 17px;
  color: var(--text-gold);
}
.dkm-message {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.55;
}

/* ================================================
   CITY — SIDEBAR CARDS
================================================ */

#city-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
}

.city-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(60,100,160,0.3);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  user-select: none;
}
.city-card:hover {
  background: rgba(60,120,220,0.07);
  border-color: rgba(80,140,240,0.45);
  transform: translateX(2px);
}
.city-card.active {
  border-color: rgba(80,150,255,0.75);
  background: rgba(60,120,220,0.12);
}
/* "City" home card — slight top border separator */
.city-card.city-card-home {
  border-bottom: 1px solid rgba(80,130,220,0.2);
  margin-bottom: 2px;
}

/* Highlighted via building-hover on the city image */
.city-card.cv-hover {
  background: rgba(200,150,40,0.12);
  border-color: rgba(200,160,50,0.55);
  transform: translateX(2px);
}
.city-card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
}
.city-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.city-card-name {
  font-family: var(--font-title);
  font-size: 12px;
  color: var(--text-light);
  letter-spacing: 1px;
}
.city-card-arrow {
  font-size: 18px;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: color 0.15s;
}
.city-card:hover .city-card-arrow { color: #7ab0ff; }
.city-card.active .city-card-arrow { color: #99c4ff; }

/* ================================================
   CITY MAIN PANEL
================================================ */

#city-main {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at top left, #0c1220 0%, #060810 100%);
}

.city-panel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(60,100,180,0.3);
  flex-shrink: 0;
}

.city-panel-back {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.city-panel-back:hover { background: rgba(255,255,255,0.1); color: var(--text-light); }

.city-panel-npc-icon {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
}

.city-panel-title-wrap { flex: 1; min-width: 0; }
.city-panel-title {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--text-gold);
  letter-spacing: 2px;
}
.city-panel-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 4px;
}

.city-panel-body {
  flex: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Section label (reusable inside city panels) ── */
.city-section-label {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

/* ================================================
   CITY — HOUSE PANEL
================================================ */

.house-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.house-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.house-bar-label { font-size: 14px; width: 22px; text-align: center; flex-shrink: 0; }
.house-bar-track {
  flex: 1;
  height: 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
}
.house-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}
.house-bar-fill.hp { background: linear-gradient(90deg, #8b0000, #cc2020); }
.house-bar-fill.mp { background: linear-gradient(90deg, #00008b, #2020cc); }
.house-bar-val {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-light);
  min-width: 82px;
  text-align: right;
  flex-shrink: 0;
}

.house-rest-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.house-rest-desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
}
.btn-rest {
  padding: 11px 28px;
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, rgba(20,50,80,0.8), rgba(10,30,55,0.9));
  border: 1px solid rgba(70,130,200,0.45);
  color: #90c0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.btn-rest:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(30,70,110,0.9), rgba(20,50,80,0.9));
  border-color: rgba(90,160,240,0.7);
  color: #c0deff;
}
.btn-rest:disabled { opacity: 0.4; cursor: not-allowed; }

/* ================================================
   CITY — STORAGE PANEL
================================================ */

.storage-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.storage-count {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
}
.storage-grid {
  display: grid;
  grid-template-columns: repeat(10, 75px);
  gap: 4px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  width: fit-content;
  align-self: center;
}
/* Storage cells reuse .inv-cell — force 75×75 */
.storage-grid .inv-cell {
  width: 75px;
  height: 75px;
  aspect-ratio: unset;
  border-radius: 4px;
  background: rgba(0,0,0,0.5);
}
/* Bigger qty badge inside storage */
.storage-grid .inv-cell-count {
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 3px #000;
}
.storage-hint {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.4;
}

/* ================================================
   CITY — QUEST BOARD PANEL
================================================ */

.qb-afk-area-select {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-light);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
}
.qb-afk-area-select option { background: #12151c; }

.qb-duration-row {
  display: flex;
  gap: 6px;
}
.qb-duration-btn {
  flex: 1;
  padding: 8px 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.qb-duration-btn:hover,
.qb-duration-btn.active {
  background: rgba(200,160,40,0.12);
  border-color: rgba(200,160,40,0.5);
  color: var(--text-gold);
}

.qb-rewards-preview {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  gap: 24px;
  justify-content: center;
}
.qb-reward-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.qb-reward-icon { font-size: 18px; }
.qb-reward-val {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--text-gold);
}
.qb-reward-lbl {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-dim);
}

.btn-afk-start {
  width: 100%;
  padding: 12px;
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, rgba(100,60,10,0.6), rgba(140,80,10,0.7));
  border: 1px solid rgba(200,140,30,0.45);
  color: var(--text-gold);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-afk-start:hover {
  background: linear-gradient(135deg, rgba(140,80,10,0.7), rgba(180,100,10,0.8));
  border-color: rgba(220,160,40,0.7);
}

.qb-active-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(100,200,80,0.2);
  border-radius: 10px;
}
.qb-active-area-name {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--text-gold);
  letter-spacing: 1px;
}
.qb-timer-track {
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 5px;
  overflow: hidden;
}
.qb-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #2a6040, #4aaa70);
  border-radius: 5px;
  transition: width 1s linear;
}
.qb-timer-text {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
}
.btn-afk-collect {
  width: 100%;
  padding: 12px;
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, rgba(30,90,40,0.7), rgba(20,70,30,0.8));
  border: 1px solid rgba(60,180,80,0.45);
  color: #88ee88;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-afk-collect:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(40,120,50,0.8), rgba(30,100,40,0.9));
  border-color: rgba(80,220,100,0.7);
}
.btn-afk-collect:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-afk-cancel {
  width: 100%;
  padding: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-afk-cancel:hover { background: rgba(200,50,50,0.1); border-color: rgba(200,80,80,0.3); color: #ff9090; }

/* ================================================
   CITY PANELS — Per-NPC button colour overrides
================================================ */

/* ── House (dark blue) ── */
#city-main[data-npc="house"] .btn-rest {
  background: linear-gradient(135deg, rgba(20,55,100,0.85), rgba(10,35,75,0.9));
  border-color: rgba(80,145,230,0.55);
  color: #aacfff;
}
#city-main[data-npc="house"] .btn-rest:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(30,75,130,0.9), rgba(20,55,100,0.95));
  border-color: rgba(100,170,255,0.75);
  color: #cce3ff;
}

/* ── Vendor (olive green) ── */
#city-main[data-npc="vendor"] .vendor-card-btn {
  background: rgba(55,90,15,0.35);
  border: 1px solid rgba(105,160,35,0.5);
  color: #b0dd66;
}
#city-main[data-npc="vendor"] .vendor-card-btn:hover {
  background: rgba(75,125,20,0.5);
  border-color: rgba(130,195,45,0.7);
  color: #ccee88;
}
#city-main[data-npc="vendor"] .sz-vendor-gold { color: #a8cc55; }
#city-main[data-npc="vendor"] .sz-vendor-cat  { color: #7aaa3a; border-bottom-color: rgba(100,160,30,0.25); }

/* ── Storage (burnt orange) ── */
#city-main[data-npc="storage"] .storage-hint { color: #a06030; }
#city-main[data-npc="storage"] .storage-grid {
  border-color: rgba(140,70,15,0.3);
  background: rgba(80,30,5,0.15);
}
#city-main[data-npc="storage"] .storage-count { color: #c07040; }

/* ── Quest Board (deep red) ── */
#city-main[data-npc="questboard"] .btn-afk-start {
  background: linear-gradient(135deg, rgba(130,20,12,0.65), rgba(170,30,18,0.75));
  border-color: rgba(210,65,45,0.5);
  color: #ffaa99;
}
#city-main[data-npc="questboard"] .btn-afk-start:hover {
  background: linear-gradient(135deg, rgba(170,28,16,0.75), rgba(210,40,24,0.85));
  border-color: rgba(240,80,55,0.7);
  color: #ffccbb;
}
#city-main[data-npc="questboard"] .qb-duration-btn.active,
#city-main[data-npc="questboard"] .qb-duration-btn:hover {
  background: rgba(180,40,20,0.18);
  border-color: rgba(210,70,45,0.55);
  color: #ffaa88;
}
#city-main[data-npc="questboard"] .qb-active-block {
  border-color: rgba(200,60,40,0.3);
}
#city-main[data-npc="questboard"] .qb-timer-fill {
  background: linear-gradient(90deg, #6a1a10, #cc3322);
}
#city-main[data-npc="questboard"] .qb-afk-area-select {
  border-color: rgba(180,50,30,0.35);
}

/* ════════════════════════════════════════
   CHARACTER SELECT PANEL
════════════════════════════════════════ */

/* SNB button accent for chars */
.snb-chars-btn { border-top: 1px solid rgba(107,74,26,0.3); margin-top: 4px; }

/* Panel list container */
#char-select-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 8px 16px;
  overflow-y: auto;
}

/* ── Card base ── */
.cs-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(10,7,4,0.6);
  border: 1px solid rgba(107,74,26,0.3);
  border-radius: 6px;
  padding: 10px 10px 8px 8px;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
/* ── Top row (avatar + main info + delete btn) ── */
.cs-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ── Main info block (name + class) ── */
.cs-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  min-width: 0;
}
/* ── Bottom action row: Active + Delete ── */
.cs-actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.cs-card:hover {
  background: rgba(20,12,5,0.8);
  border-color: rgba(180,130,50,0.45);
}

/* ── Active character card ── */
.cs-card.cs-active {
  background: linear-gradient(135deg, rgba(35,22,6,0.9) 0%, rgba(15,10,3,0.95) 100%);
  border-color: var(--border-gold);
  box-shadow: 0 0 14px rgba(200,160,40,0.18), inset 0 1px 0 rgba(200,160,40,0.12);
}
.cs-card.cs-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(200,160,40,0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Avatar ── */
.cs-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.cs-avatar {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  border: 2px solid rgba(107,74,26,0.5);
  object-fit: cover;
  display: block;
  image-rendering: auto;
}
.cs-card.cs-active .cs-avatar {
  border-color: var(--border-gold-bright);
  box-shadow: 0 0 8px rgba(200,160,40,0.4);
}
.cs-active-crown {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  font-size: 9px;
  color: var(--text-gold);
  line-height: 1;
  text-shadow: 0 0 4px rgba(200,160,40,0.8);
}

/* ── Info block (legacy alias kept) ── */
.cs-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
/* cs-levels is now a standalone row at the bottom of the card */
.cs-char-name {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}
.cs-card.cs-active .cs-char-name { color: var(--text-gold); }
.cs-class-row {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.5px;
}
.cs-class-name { color: rgba(180,150,90,0.85); }
.cs-levels {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cs-lv-badge {
  font-family: var(--font-ui);
  font-size: 9px;
  background: rgba(200,160,40,0.12);
  border: 1px solid rgba(200,160,40,0.25);
  color: var(--text-gold);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.cs-sep { color: var(--text-dim); font-size: 9px; }
.cs-clv-badge {
  font-family: var(--font-ui);
  font-size: 9px;
  background: rgba(60,180,80,0.1);
  border: 1px solid rgba(60,180,80,0.2);
  color: #66cc77;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

/* ── Active tag (green, current char) ── */
.cs-active-tag {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #44cc66;
  background: rgba(40,120,60,0.22);
  border: 1px solid rgba(60,180,80,0.45);
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 0 0 6px rgba(60,200,80,0.5);
  pointer-events: none;
}
/* ── Switch button (B&W, inactive chars) ── */
.cs-btn-switch {
  font-family: var(--font-ui);
  font-size: 9px;
  color: rgba(160,150,130,0.65);
  background: rgba(25,20,15,0.45);
  border: 1px solid rgba(100,90,70,0.3);
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cs-btn-switch:hover {
  background: rgba(120,80,15,0.55);
  border-color: var(--border-gold);
  color: var(--text-gold);
  box-shadow: 0 0 6px rgba(200,160,40,0.2);
}
/* ── Delete button ── */
.cs-btn-delete {
  font-family: var(--font-ui);
  font-size: 9px;
  color: rgba(180,70,70,0.55);
  background: transparent;
  border: 1px solid rgba(180,70,70,0.18);
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1;
}
.cs-btn-delete:hover {
  background: rgba(180,40,40,0.2);
  border-color: rgba(200,60,60,0.5);
  color: rgba(230,100,100,0.9);
}
/* ── Legacy action column (kept for safety) ── */
.cs-action-col { display:none; }
.cs-playing-tag, .cs-btn-play, .cs-slot-num { display:none; }

/* ── Empty slot card ── */
.cs-card.cs-empty {
  opacity: 0.6;
  border-style: dashed;
  border-color: rgba(107,74,26,0.25);
  padding: 10px 10px 10px 8px;
}
.cs-card.cs-empty:hover {
  opacity: 0.85;
  border-color: rgba(107,74,26,0.5);
}
.cs-empty-icon {
  font-size: 22px;
  color: rgba(150,120,60,0.35);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(107,74,26,0.3);
  border-radius: 6px;
  flex-shrink: 0;
}
.cs-empty-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cs-empty-title {
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(150,130,80,0.5);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cs-btn-create {
  font-family: var(--font-ui);
  font-size: 9px;
  color: rgba(150,200,120,0.8);
  background: rgba(40,70,20,0.3);
  border: 1px solid rgba(80,140,40,0.3);
  padding: 5px 9px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-btn-create:hover {
  background: rgba(60,100,30,0.45);
  border-color: rgba(100,180,60,0.5);
  color: #aae070;
}