/*
  lue-integration.css
  Stili LUE per la dashboard esistente.
  Design tokens: niente border-radius, hard shadows (no blur),
  bordi pannelli 2px solid gold, VT323 18-20px, Press Start 2P per UI.
*/

/* ── Google Fonts — DEVE stare prima di tutto ── */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   CSS DESIGN TOKENS
══════════════════════════════════════════════════════════════════════ */
:root {
  /* Font */
  --lue-font-ui:       'Press Start 2P', monospace;
  --lue-font-text:     'VT323', monospace;

  /* Backgrounds */
  --lue-bg-deep:       #080612;
  --lue-bg:            #0e0b1a;
  --lue-panel:         #12101e;
  --lue-panel-raised:  #1a1828;
  --lue-panel-inset:   #0a0916;

  /* Bordi */
  --lue-border:        #2a2440;
  --lue-border-gold:   #c09820;
  --lue-border-bright: #e8c838;

  /* Testo */
  --lue-fg:            #d8d0c0;
  --lue-fg-dim:        #908880;
  --lue-fg-muted:      #504858;
  --lue-fg-gold:       #e8c838;

  /* Colori stato */
  --lue-hp:            #48b840;
  --lue-danger:        #f04828;
  --lue-magic:         #a080c8;

  /* Log message colors */
  --log-narrate:       #c8c0b0;
  --log-system:        #d05028;
  --log-location:      #50a8d8;
  --log-item:          #e8c838;
  --log-npc:           #48c890;
  --log-player:        #c090b0;
  --log-combat:        #f07050;
  --log-damage:        #f04828;
  --log-hit:           #d4af37;
  --log-dodge:         #4abcd8;
  --log-parry:         #6699cc;
  --log-miss:          #5aaabb;
  --log-stun:          #e89030;
  --log-stunned:       #d84848;
  --log-predeath:      #9b59b6;
  --log-heal:          #48b840;
  --log-magic:         #a080c8;
  --log-social:        #48c890;
  --log-whisper:       #8890b8;
  --log-emote:         #c0b060;
  --log-divider:       #504858;

  /* Ombre hard (nessun blur) */
  --lue-shadow-hard:   3px 3px 0 #000;
  --lue-shadow-panel:  inset 2px 2px 0 rgba(255,255,255,.05), inset -2px -2px 0 rgba(0,0,0,.7);
  --lue-shadow-inset:  inset 2px 2px 0 rgba(0,0,0,.8), inset -1px -1px 0 rgba(255,255,255,.04);
}

/* ══════════════════════════════════════════════════════════════════════
   LOG CONTAINERS (#log-social, #log-combat)
══════════════════════════════════════════════════════════════════════ */
#log-social,
#log-combat {
  height: 100%;
  overflow-y: auto;
  padding: 6px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--lue-border-gold) var(--lue-panel-inset);
}
#log-social::-webkit-scrollbar,
#log-combat::-webkit-scrollbar  { width: 4px; }
#log-social::-webkit-scrollbar-track,
#log-combat::-webkit-scrollbar-track { background: var(--lue-panel-inset); }
#log-social::-webkit-scrollbar-thumb,
#log-combat::-webkit-scrollbar-thumb { background: var(--lue-border-gold); }

/* ══════════════════════════════════════════════════════════════════════
   LOG ROWS (MessageDispatcher)
══════════════════════════════════════════════════════════════════════ */
.log-row {
  font-family: var(--lue-font-text);
  font-size: 19px;
  line-height: 1.45;
  margin-bottom: 2px;
  animation: lue-row-in 120ms steps(3) both;
}
@keyframes lue-row-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
.log-ts {
  font-size: 13px;
  color: var(--lue-fg-muted);
  margin-right: 4px;
  opacity: .6;
}

/* Tipi messaggio */
.log-narrate  { color: var(--log-narrate); }
.log-system   { color: var(--log-system); }
.log-location {
  color: var(--log-location);
  font-family: var(--lue-font-ui);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 0 3px 7px;
  border-left: 2px solid var(--log-location);
  margin-top: 6px;
}
.log-item    { color: var(--log-item); }
.log-npc     { color: var(--log-npc); }
.log-player  { color: var(--log-player); }
.log-combat  { color: var(--log-combat); }
.log-damage  { color: var(--log-damage); }
.log-heal    { color: var(--log-heal); }
.log-magic   { color: var(--log-magic); }
.log-social  { color: var(--log-social); }
.log-whisper { color: var(--log-whisper); }
.log-emote   { color: var(--log-emote); }
.log-divider { color: var(--log-divider); font-size: 14px; margin: 4px 0; }
.log-cmd     { color: #c49858; font-family: var(--lue-font-text); }

/* ══════════════════════════════════════════════════════════════════════
   HOTBAR SLOTS (Hotbar.js)
══════════════════════════════════════════════════════════════════════ */
#lue-hotbar-slots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lue-slot {
  width: 38px;
  height: 38px;
  background: var(--lue-panel-inset);
  border: 2px solid var(--lue-border);
  box-shadow: var(--lue-shadow-inset), var(--lue-shadow-hard);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  font-size: 18px;
  flex-shrink: 0;
  user-select: none;
}
.lue-slot:hover {
  border-color: var(--lue-border-gold);
  box-shadow: var(--lue-shadow-inset), 3px 3px 0 #000;
}
.lue-slot.filled {
  background: #141224;
  border-color: var(--lue-border);
  box-shadow: var(--lue-shadow-inset), var(--lue-shadow-hard);
}
.lue-slot.slot-active {
  border: 2px solid #3a8c4a;
  background: #0d1a10;
  box-shadow: var(--lue-shadow-inset), 0 0 6px rgba(58,140,74,0.5);
}
.lue-slot.slot-in-fodero {
  border: 2px solid #c87a1a;
  background: #1a1108;
  box-shadow: var(--lue-shadow-inset), 0 0 6px rgba(200,122,26,0.5);
}
.lue-slot.drag-over {
  border: 2px solid var(--lue-magic);
  box-shadow: var(--lue-shadow-inset), 3px 3px 0 #000;
}

.slot-icon { font-size: 18px; line-height: 1; pointer-events: none; }
.slot-icon.placeholder { color: var(--lue-border); font-size: 14px; }

.slot-key {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 5px;
  color: var(--lue-fg-muted);
  font-family: var(--lue-font-ui);
  letter-spacing: 0;
  pointer-events: none;
}
.slot-qty {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 5px;
  color: var(--lue-fg-gold);
  font-family: var(--lue-font-ui);
  display: none;
  pointer-events: none;
}
.slot-qty.visible { display: block; }

.slot-kind-strip {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
}
.kind-weapon     { background: var(--lue-border-gold); }
.kind-consumable { background: var(--lue-hp); }
.kind-magic      { background: var(--lue-magic); }
.kind-misc       { background: var(--lue-fg-muted); }

.slot-cooldown {
  position: absolute;
  inset: 0;
  background: rgba(8,6,18,.75);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3px;
  pointer-events: none;
}
.slot-cooldown.active { display: flex; }
.slot-cooldown-text {
  font-size: 7px;
  color: var(--lue-fg-gold);
  font-family: var(--lue-font-ui);
}

.hotbar-sep {
  width: 2px;
  height: 30px;
  background: var(--lue-border-gold);
  flex-shrink: 0;
  box-shadow: 1px 0 0 #000;
}

/* ══════════════════════════════════════════════════════════════════════
   LUE THEME OVERRIDE — reskin .db-* con design tokens LUE
   Regole: niente border-radius, hard shadows, bordi 2px gold,
   VT323 18-20px, Press Start 2P per label UI uppercase.
══════════════════════════════════════════════════════════════════════ */

/* ── Contenitore radice ─────────────────────────────────────────────── */
#dashboard-container {
  background: var(--lue-bg-deep) !important;
  font-family: var(--lue-font-text) !important;
  color: var(--lue-fg) !important;
}

/* ── Grid background ────────────────────────────────────────────────── */
#dashboard-container .db-grid {
  background: var(--lue-bg-deep) !important;
  gap: 4px !important;
  padding: 4px !important;
}

/* ── Pannello base — bordo 2px gold, hard shadow ────────────────────── */
#dashboard-container .db-panel {
  background: var(--lue-panel) !important;
  border: 2px solid var(--lue-border-gold) !important;
  border-radius: 0 !important;
  box-shadow: var(--lue-shadow-panel), var(--lue-shadow-hard) !important;
}

#dashboard-container .db-panel-hdr {
  background: var(--lue-bg) !important;
  border-bottom: 2px solid var(--lue-border-gold) !important;
  color: var(--lue-fg-muted) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}
#dashboard-container .db-panel-hdr-title {
  color: var(--lue-fg-dim) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}

/* ── Tab system ─────────────────────────────────────────────────────── */
#dashboard-container .db-tabs {
  background: var(--lue-bg-deep) !important;
  border-bottom: 2px solid var(--lue-border-gold) !important;
}

#dashboard-container .db-tab-btn {
  background: var(--lue-bg) !important;
  border: 2px solid var(--lue-border) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  color: var(--lue-fg-muted) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 7px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 5px 8px !important;
  box-shadow: var(--lue-shadow-hard) !important;
}
#dashboard-container .db-tab-btn:hover {
  color: var(--lue-fg) !important;
  background: var(--lue-panel-raised) !important;
  border-color: var(--lue-border-gold) !important;
}
#dashboard-container .db-tab-btn.db-tab-active {
  background: var(--lue-panel) !important;
  color: var(--lue-fg-gold) !important;
  border-color: var(--lue-border-gold) !important;
  border-bottom: 2px solid var(--lue-panel) !important;
  box-shadow: none !important;
}

/* scrollbar tab pane */
#dashboard-container .db-tab-pane::-webkit-scrollbar        { width: 4px; }
#dashboard-container .db-tab-pane::-webkit-scrollbar-track  { background: var(--lue-bg-deep) !important; }
#dashboard-container .db-tab-pane::-webkit-scrollbar-thumb  { background: var(--lue-border-gold) !important; border-radius: 0 !important; }

/* ── Stats header ───────────────────────────────────────────────────── */
#dashboard-container .db-stats-hdr {
  background: var(--lue-bg) !important;
  border-bottom: 2px solid var(--lue-border-gold) !important;
}
#dashboard-container .db-portrait {
  background: var(--lue-panel-raised) !important;
  border: 2px solid var(--lue-border-gold) !important;
  border-radius: 0 !important;
  box-shadow: var(--lue-shadow-hard) !important;
}
#dashboard-container .db-sbar-label {
  color: var(--lue-fg-dim) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 7px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
#dashboard-container .db-sbar-label .db-sval {
  color: var(--lue-fg) !important;
  font-family: var(--lue-font-text) !important;
  font-size: 14px !important;
}
#dashboard-container .db-sbar-bg {
  background: var(--lue-panel-inset) !important;
  border: 1px solid var(--lue-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--lue-shadow-inset) !important;
}
#dashboard-container .db-output * {
  font-size: var(--db-fs, 19px) !important;
}

/* ── Room name ──────────────────────────────────────────────────────── */
#dashboard-container .db-room-name {
  background: var(--lue-bg) !important;
  border-bottom: 2px solid var(--lue-border-gold) !important;
  color: var(--lue-fg-gold) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ── Map wrap ───────────────────────────────────────────────────────── */
#dashboard-container .db-map-wrap { background: var(--lue-bg-deep) !important; }

/* Giorno/notte badge */
#db-daytime-badge {
  background: var(--lue-panel) !important;
  border: 2px solid var(--lue-border-gold) !important;
  border-radius: 0 !important;
  color: var(--lue-fg) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 7px !important;
  letter-spacing: 0.05em !important;
  box-shadow: var(--lue-shadow-hard) !important;
}
#db-daytime-badge:hover {
  background: var(--lue-panel-raised) !important;
  border-color: var(--lue-border-bright) !important;
}

/* ── Output principale ──────────────────────────────────────────────── */
#dashboard-container .db-output {
  background: var(--lue-panel-inset) !important;
  font-family: var(--lue-font-text) !important;
  font-size: var(--db-fs, 19px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  color: var(--lue-fg) !important;
  box-shadow: var(--lue-shadow-inset) !important;
}
/* VT323 non supporta il grassetto sintetizzato — si distorce.
   I nomi dei personaggi (in <strong>) restano stessa spaziatura,
   stesso font, leggermente più chiari per distinguersi. */
#dashboard-container .db-output strong {
  font-family: var(--lue-font-text) !important;
  font-size: inherit !important;
  font-weight: normal !important;
  letter-spacing: 0.02em !important;
  /* il colore è lasciato all'inline style del server */
}
#dashboard-container .db-output::-webkit-scrollbar        { width: 4px; }
#dashboard-container .db-output::-webkit-scrollbar-track  { background: var(--lue-bg-deep) !important; }
#dashboard-container .db-output::-webkit-scrollbar-thumb  { background: var(--lue-border-gold) !important; border-radius: 0 !important; }

/* ── MOTD / titolo gioco ────────────────────────────────────────────── */
.motd {
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
}

/* ── Login prompt ───────────────────────────────────────────────────── */
#db-login-prompt {
  background: var(--lue-bg) !important;
  border-top: 2px solid var(--lue-border-gold) !important;
  color: var(--lue-fg-dim) !important;
  font-family: var(--lue-font-text) !important;
  font-size: 18px !important;
}

/* ── Arsenale ───────────────────────────────────────────────────────── */
#dashboard-container .db-arsenal {
  background: var(--lue-bg) !important;
  border-top: 2px solid var(--lue-border-gold) !important;
}

/* ── Input bar ──────────────────────────────────────────────────────── */
#dashboard-container .db-input-bar {
  background: var(--lue-bg) !important;
  border-top: 2px solid var(--lue-border-gold) !important;
}
#dashboard-container .db-cmd-in {
  background: var(--lue-panel-inset) !important;
  border: 2px solid var(--lue-border) !important;
  border-radius: 0 !important;
  color: var(--lue-fg) !important;
  font-family: var(--lue-font-text) !important;
  font-size: 20px !important;
  box-shadow: var(--lue-shadow-inset) !important;
}
#dashboard-container .db-cmd-in:focus {
  border-color: var(--lue-border-gold) !important;
}
#dashboard-container .db-cmd-in::placeholder {
  color: var(--lue-fg-muted) !important;
}

/* ── Bottom bar ─────────────────────────────────────────────────────── */
#dashboard-container .db-area-bottom {
  background: var(--lue-bg) !important;
  border: 2px solid var(--lue-border-gold) !important;
  border-radius: 0 !important;
  box-shadow: var(--lue-shadow-hard) !important;
}
#dashboard-container .db-bottom-logo {
  color: var(--lue-fg-muted) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 7px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}
#dashboard-container .db-bottom-logo strong { color: var(--lue-fg-gold) !important; }
#dashboard-container .db-gold {
  color: var(--lue-fg-gold) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 8px !important;
  letter-spacing: 0.05em !important;
}
#dashboard-container .db-gold::before { content: '✦ ' !important; }
#dashboard-container .db-ping {
  color: var(--lue-fg-muted) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 7px !important;
  letter-spacing: 0.05em !important;
}
#dashboard-container .db-ping.db-ok   { color: var(--lue-hp) !important; }
#dashboard-container .db-ping.db-warn { color: var(--lue-border-gold) !important; }
#dashboard-container .db-ping.db-bad  { color: var(--lue-danger) !important; }

#dashboard-container .db-bot-btn {
  background: var(--lue-panel-inset) !important;
  border: 2px solid var(--lue-border) !important;
  border-radius: 0 !important;
  color: var(--lue-fg-muted) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 7px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  box-shadow: var(--lue-shadow-inset), var(--lue-shadow-hard) !important;
}
#dashboard-container .db-bot-btn:hover {
  color: var(--lue-fg) !important;
  border-color: var(--lue-border-gold) !important;
  background: var(--lue-panel-raised) !important;
}

/* Switch UI button */
.db-switch-ui-btn {
  background: var(--lue-panel-inset) !important;
  border: 2px solid var(--lue-border) !important;
  border-radius: 0 !important;
  color: var(--lue-fg-muted) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 7px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  box-shadow: var(--lue-shadow-inset), var(--lue-shadow-hard) !important;
}
.db-switch-ui-btn:hover {
  color: var(--lue-fg) !important;
  border-color: var(--lue-border-gold) !important;
  background: var(--lue-panel-raised) !important;
}

/* ── Target bar ─────────────────────────────────────────────────────── */
#dashboard-container .db-target-bar {
  background: var(--lue-panel-inset) !important;
  border: 2px solid var(--lue-danger) !important;
  border-radius: 0 !important;
  box-shadow: var(--lue-shadow-hard) !important;
}
#dashboard-container .db-target-name { color: var(--lue-danger) !important; }
#dashboard-container .db-target-hp-bg {
  background: var(--lue-bg-deep) !important;
  border-radius: 0 !important;
}

/* ── Stat bar fills ─────────────────────────────────────────────────── */
#dashboard-container .db-bar-hp     { background: linear-gradient(90deg, #300a0a, var(--lue-danger)) !important; }
#dashboard-container .db-bar-mv     { background: linear-gradient(90deg, #083010, var(--lue-hp)) !important; }
#dashboard-container .db-bar-conc   { background: linear-gradient(90deg, #100828, var(--lue-magic)) !important; }
#dashboard-container .db-bar-hunger { background: linear-gradient(90deg, #302008, var(--lue-border-gold)) !important; }
#dashboard-container .db-bar-thirst { background: linear-gradient(90deg, #083028, #48c8b0) !important; }
#dashboard-container .db-bar-weight { background: linear-gradient(90deg, #200838, #8060c0) !important; }
#dashboard-container .db-sbar-fill  { border-radius: 0 !important; }

/* ── Entità nella stanza (room-item, room-monster, room-player) ─────── */
/* Item a terra — oro */
#db-output .room-item,
#db-output .room-item * {
  color: #e8c838 !important;
  font-family: 'VT323', monospace !important;
  font-size: var(--db-fs, 18px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  list-style: none !important;
}
/* Mob / NPC — verde-acqua */
#db-output .room-monster,
#db-output .room-monster * {
  color: #48c890 !important;
  font-family: 'VT323', monospace !important;
  font-size: var(--db-fs, 18px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  list-style: none !important;
}
/* Giocatori nella stanza — verde brillante */
#db-output .room-player,
#db-output .room-player * {
  color: #38F527 !important;
  font-family: 'VT323', monospace !important;
  font-size: var(--db-fs, 18px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  list-style: none !important;
}
/* Mob / NPC storditi (predeath) — viola */
#db-output .room-predeath,
#db-output .room-predeath * {
  color: #9b59b6 !important;
  font-family: 'VT323', monospace !important;
  font-size: var(--db-fs, 18px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  list-style: none !important;
}
/* Badge stato HP/fiato — colore dinamico via --badge-c (più specifico di * ) */
#db-output .room-monster .entity-badge,
#db-output .room-player .entity-badge {
  color: var(--badge-c, currentColor) !important;
}
/* Descrizione stanza */
#db-output .room-content {
  color: #c8c0b0 !important;
  font-family: 'VT323', monospace !important;
  font-size: var(--db-fs, 18px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
}
/* Nodo terreno (raccolta risorse) */
#db-output .terrain-node {
  color: #908880 !important;
  font-style: italic !important;
}

/* ── Descrizione oggetto/item (tag [item]/[oggetto] da messaggi standalone) ── */
#dashboard-container .db-output .db-item-desc,
#dashboard-container .db-output .db-item-desc * {
  color: #e8c838 !important;
  font-family: var(--lue-font-text) !important;
  font-size: var(--db-fs, 18px) !important;
}

/* ── Nome stanza nel master log ─────────────────────────────────────── */
#dashboard-container .db-output .room-title {
  font-family: var(--lue-font-ui) !important;
  font-size: calc(var(--db-fs, 19px) * 0.55) !important;
  color: #50a8d8 !important;
  text-transform: uppercase !important;
  border-left: 2px solid #50a8d8 !important;
  padding-left: 8px !important;
  margin: 10px 0 6px !important;
  line-height: 1.6 !important;
  font-weight: normal !important;
}

/* ── Immagine terreno ───────────────────────────────────────────────── */
.db-terrain-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.db-terrain-missing {
  font-style: normal !important;
  color: var(--lue-fg-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ── Placeholder ────────────────────────────────────────────────────── */
#dashboard-container .db-placeholder {
  color: var(--lue-border) !important;
  font-family: var(--lue-font-ui) !important;
  font-size: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ── Room Panel (tab Stanza) ─────────────────────────────────────────────── */
/* Room Panel (tab Stanza) - adattato allo stile inventario */
#db-tab-pane-stanza {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
#db-tab-pane-stanza .rp-scroll {
  flex: 1;
  overflow-y: auto;
  height: 100%;
}
#db-tab-pane-stanza .inv-sl-section.rp-summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
#db-tab-pane-stanza .inv-sl-section.rp-summary::-webkit-details-marker { display: none; }
#db-tab-pane-stanza details[open] > .inv-sl-section.rp-summary { color: #5a8090; }
#db-tab-pane-stanza .rp-count { margin-left: auto; }
#db-tab-pane-stanza .rp-mob { color: #cc9966; }
#db-tab-pane-stanza .rp-fighting { color: #ff7070; }
#db-tab-pane-stanza .rp-downed  { color: #9b59b6; }
.rp-tag-fight {
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  color: #ff8888;
  background: #4a1010;
  border-radius: 2px;
  padding: 1px 3px;
  flex-shrink: 0;
  align-self: center;
}

/* -- Combat Log (tab Combatt.) -------------------------------------------- */
#db-tab-pane-combat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
#db-tab-pane-combat .cl-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #c09820 #0a0916;
}
#db-tab-pane-combat .cl-scroll::-webkit-scrollbar { width: 4px; }
#db-tab-pane-combat .cl-scroll::-webkit-scrollbar-track { background: #0a0916; }
#db-tab-pane-combat .cl-scroll::-webkit-scrollbar-thumb { background: #c09820; border-radius: 2px; }
#db-tab-pane-combat .cl-round-hdr {
  margin-top: 4px;
}
.cl-entry {
  padding: 2px 6px;
  font-family: "VT323", monospace;
  font-size: 16px;
  line-height: 1.3;
  color: #908880;
  border-bottom: 1px solid #1a1830;
}

.cl-entry .red            { color: #e04040; }
.cl-entry .green          { color: #50c050; }
.cl-entry .yellow         { color: #d4af37; }
.cl-entry .blue           { color: #6090d0; }
.cl-entry .grey           { color: #606060; }
.cl-entry .combat-hit,     .row .combat-hit     { color: var(--log-hit); }
.cl-entry .combat-dodge,   .row .combat-dodge   { color: var(--log-dodge); }
.cl-entry .combat-parry,   .row .combat-parry   { color: var(--log-parry); }
.cl-entry .combat-miss,    .row .combat-miss    { color: var(--log-miss); }
.cl-entry .combat-stun,    .row .combat-stun    { color: var(--log-stun); }
.cl-entry .combat-stunned, .row .combat-stunned { color: var(--log-stunned); }
.cl-entry .combat-predeath,.row .combat-predeath{ color: var(--log-predeath); }
.cl-entry .combat-sep,
.row .combat-sep {
  display: block;
  position: relative;
  border-top: 1px solid #2a1a3a;
  margin: 10px 0 8px;
}
.cl-entry .combat-sep::before,
.row .combat-sep::before {
  content: '\00B7\00B7\00B7';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  color: #3a2a5a;
  background: #0d0a14;
  padding: 0 6px;
  font-size: 13px;
  letter-spacing: 3px;
}

/* -- Skills Panel (tab Skill) --------------------------------------------- */
#db-tab-pane-skills {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
#db-tab-pane-skills .inv-simple-list {
  flex: 1;
  overflow-y: auto;
  height: 100%;
}
.sk-row {
  gap: 8px;
  cursor: default;
}
.sk-name {
  min-width: 90px;
  flex-shrink: 0;
  flex: none !important;
}
.sk-bar-wrap {
  position: relative;
  flex: 1;
  height: 8px;
  background: #1a1a2a;
  border-radius: 2px;
  overflow: visible;
  align-self: center;
}
.sk-fill {
  height: 100%;
  background: #c09820;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.sk-fill-cap {
  background: #508050;
}
.sk-cap-mark {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 12px;
  background: #444;
  border-radius: 1px;
  transform: translateX(-50%);
}
.sk-val {
  min-width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* ── CombatBars ─────────────────────────────────────────────── */
#lue-combat-bars {
    flex: 1 1 0;
    min-width: 90px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    margin-left: 6px;
    justify-content: center;
}
.cb-entry {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.cb-name {
    font-size: 9px;
    color: #c8a84b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cb-bar-row {
    display: flex;
    align-items: center;
    gap: 3px;
}
.cb-lbl {
    font-size: 8px;
    color: #556;
    flex-shrink: 0;
    line-height: 1;
}
.cb-bar-wrap {
    flex: 1;
    height: 6px;
    background: #111a22;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #1e2836;
}
.cb-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.cb-hp { background: linear-gradient(90deg, #6b0000, #c0392b); }
.cb-mv { background: linear-gradient(90deg, #1e4a00, #27ae60); }
.cb-val {
    font-size: 8px;
    color: #7090a0;
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Combat Enemy Panel — cassettino sotto stats ── */
#combat-enemy-panel {
    /* Assoluto: non sposta db-output e non causa layout shift */
    position: absolute;
    top: 64px;
    left: 8px;
    z-index: 10;
    width: 44%;
    max-height: 160px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease-out;
    padding: 6px 10px 8px;
    background: #0d0a14;
    border: 1px solid transparent;
    border-radius: 2px;
    box-sizing: border-box;
}
#combat-enemy-panel.open {
    opacity: 1;
    pointer-events: auto;
    border: 1px solid #4a1a1a;
    box-shadow: inset 0 0 0 1px #2a0a0a, 0 0 6px rgba(180,40,40,0.15);
}
#combat-enemy-panel .cep-title {
    font-size: 9px;
    color: #7a3a3a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
#combat-enemy-panel .cb-name {
    font-size: 11px;
    color: #d4804a;
    font-weight: bold;
    margin-bottom: 3px;
}
#combat-enemy-panel .cb-bar-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}
#combat-enemy-panel .cb-lbl {
    font-size: 10px;
    color: #664444;
    width: 14px;
    flex-shrink: 0;
}
#combat-enemy-panel .cb-bar-wrap {
    flex: 1;
    height: 7px;
    background: #1a1020;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #2e1a2e;
}
#combat-enemy-panel .cb-val {
    font-size: 9px;
    color: #7090a0;
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#combat-enemy-panel .cep-more {
    text-align: right;
    font-size: 10px;
    font-weight: bold;
    color: #7090a0;
    padding: 2px 6px 0;
}

/* ── Feed combat direzionale ─────────────────────────────────────────────────
   celeste = azioni tue (colpi, tuoi miss, parate loro sui tuoi colpi)
   giallo scuro = azioni subite (colpi loro, tue schivate/parate, loro miss)
   I verbi di danno dentro la riga portano il colore della gravità (inline,
   9 fasce in src/combat.js). Righe speciali (stun, critico) tengono i loro. */
.cl-entry .cbt-out, .row .cbt-out { color: #7fd4ff; }
.cl-entry .cbt-in,  .row .cbt-in  { color: #967b1e; }