/* ═══════════════════════════════════════════════════════════════════════
   dashboard.css — L'Ultima Eclissi — Dashboard Interface
   ISOLAMENTO TOTALE: ogni regola vive dentro #dashboard-container
   oppure porta il prefisso .db- per evitare collisioni con gli stili
   dell'interfaccia classica/diablo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Contenitori radice ─────────────────────────────────────────────── */
#diablo-container {
    display: none;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#dashboard-container {
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #080c10;
    font-family: 'Courier New', Courier, monospace;
    color: #c8b88a;
    box-sizing: border-box;
    cursor: url('/cursors/cursore.png') 1 0, pointer;
}
#dashboard-container *:not(input[type="text"]):not(input[type="password"]):not(input[type="number"]):not(input[type="search"]):not(textarea):not([contenteditable="true"]) {
    cursor: url('/cursors/cursore.png') 1 0, pointer !important;
}
/* Drag cursor: :not(.__x) porta specificita a (0,3,1) e batte inv-modal (0,2,2) */
body.is-dragging #dashboard-container,
body.is-dragging #dashboard-container *:not(input[type="text"]):not(input[type="password"]):not(input[type="number"]):not(input[type="search"]):not(textarea):not([contenteditable="true"]),
body.is-dragging .inv-modal,
body.is-dragging .inv-modal *:not(.__x):not(.__y),
body.is-dragging #container-modal,
body.is-dragging #container-modal *:not(.__x):not(.__y),
body.is-dragging .cs-overlay,
body.is-dragging .cs-overlay *:not(.__x):not(.__y) {
    cursor: url('/cursors/cursore_closed.png') 18 19, grabbing !important;
}

/* ── Pulsante cambio interfaccia (presente in entrambi i container) ─── */
.db-switch-ui-btn {
    background: #111622;
    border: 1px solid #3a4a5a;
    border-radius: 3px;
    color: #6a8aaa;
    font-size: 9px;
    padding: 3px 8px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.db-switch-ui-btn:hover {
    color: #c8b88a;
    border-color: #c8a84b;
    background: #1a1e2a;
}

/* ══════════════════════════════════════════════════════════════════════
   CSS GRID principale
   Colonne: [mappa 300px] [centro 1fr] [destra 300px]
   Righe:   [top 1fr] [bot 220px] [barra 50px]
   ══════════════════════════════════════════════════════════════════════ */
#dashboard-container .db-grid {
    display: grid;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    padding: 3px;
    gap: 3px;
    background: #060a0e;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 1fr 1fr 50px;
    grid-template-areas:
        "db-map      db-center  db-rtop"
        "db-lbot     db-center  db-rbot"
        "db-bottom   db-bottom  db-bottom";
}

/* ── Assegnazione aree ──────────────────────────────────────────────── */
#dashboard-container .db-area-map    { grid-area: db-map;    }
#dashboard-container .db-area-center { grid-area: db-center; }
#dashboard-container .db-area-rtop  { grid-area: db-rtop;   }
#dashboard-container .db-area-lbot  { grid-area: db-lbot;   }
#dashboard-container .db-area-rbot  { grid-area: db-rbot;   }
#dashboard-container .db-area-bottom { grid-area: db-bottom; }

/* ── Pannello base ───────────────────────────────────────────────────── */
#dashboard-container .db-panel {
    background: #0d1117;
    border: 1px solid #1e2836;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#dashboard-container .db-panel-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 9px;
    background: #0a1018;
    border-bottom: 1px solid #1e2836;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #4a6070;
    flex-shrink: 0;
}

#dashboard-container .db-panel-hdr-title { color: #7a9ab0; }

#dashboard-container .db-panel-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   TAB SYSTEM generico — usato da tutti i pannelli con schede
   ══════════════════════════════════════════════════════════════════════ */
#dashboard-container .db-tabs {
    display: flex;
    gap: 1px;
    padding: 3px 3px 0;
    background: #060a0e;
    flex-shrink: 0;
    border-bottom: 1px solid #1e2836;
}

#dashboard-container .db-tab-btn {
    background: #0a1018;
    border: 1px solid #1e2836;
    border-bottom: none;
    color: #4a6070;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 9px;
    cursor: pointer;
    border-radius: 3px 3px 0 0;
    transition: color 0.12s, background 0.12s;
    white-space: nowrap;
}
#dashboard-container .db-tab-btn:hover { color: #9abacc; background: #111d28; }
#dashboard-container .db-tab-btn.db-tab-active {
    background: #0d1117;
    color: #c8b88a;
    border-color: #2e4050;
    border-bottom: 1px solid #0d1117;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}
#dashboard-container .db-tab-btn.tab-ghost   { opacity: 0.4; }
#dashboard-container .db-tab-btn.tab-chosen  { opacity: 0.8; cursor: grabbing; }
#dashboard-container .db-tab-btn.tab-dragging { opacity: 0.9; }

/* ── Tab sidebar inventario (db-panel-lbot) — stile LUE ─────────────── */
#db-panel-lbot .db-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    background: #12101e;
    border-bottom: 1px solid #c09820;
}
#db-panel-lbot .db-tab-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    letter-spacing: 0.05em;
    line-height: 1.8;
    -webkit-font-smoothing: none;
    font-smooth: never;
    text-rendering: optimizeSpeed;
    color: #504858;
    text-transform: uppercase;
    padding: 6px 8px;
    flex: 1;
    text-align: center;
    cursor: pointer;
    background: #12101e;
    border: none;
    border-right: 1px solid #2a2440;
    border-radius: 0;
    border-bottom: none;
    margin-bottom: 0;
    transition: color 0.12s, background 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#db-panel-lbot .db-tab-btn:last-child { border-right: none; }
#db-panel-lbot .db-tab-btn:hover { color: #c8b0d8; background: #1a1828; }
#db-panel-lbot .db-tab-btn.db-tab-active {
    color: #e8c838;
    background: #1a1828;
    border-bottom: 2px solid #e8c838;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

#dashboard-container .db-tab-pane {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 8px 9px;
    min-height: 0;
}
#dashboard-container .db-tab-pane.db-pane-active { display: block; }

#dashboard-container .db-tab-pane::-webkit-scrollbar { width: 4px; }
#dashboard-container .db-tab-pane::-webkit-scrollbar-track { background: #080c10; }
#dashboard-container .db-tab-pane::-webkit-scrollbar-thumb { background: #1e2836; border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   AREA MAPPA (top-left)
   ══════════════════════════════════════════════════════════════════════ */
#dashboard-container .db-room-name {
    text-align: center;
    font-size: 11px;
    color: #e8c97a;
    padding: 3px 8px;
    min-height: 20px;
    flex-shrink: 0;
    border-bottom: 1px solid #1e2836;
    word-break: break-word;
    line-height: 1.4;
    background: #0a1018;
}

#dashboard-container .db-map-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: #0a0a0a;
}

/* map-container transplantato: forza dimensioni corrette */
#dashboard-container #map-container {
    position: relative;
    flex-shrink: 0;
}

#dashboard-container #mud-map {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Widget Giorno/Notte */
/* badge ora nel tab Terreno — posizionato in fondo al pane */
#db-terrain-pane {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#db-terrain-pane .db-terrain-img {
    /* Immagini quadrate: scala per entrare interamente, centrata, senza taglio */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
#db-daytime-badge {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(6, 10, 14, 0.90);
    border: 1px solid #2e4050;
    border-radius: 12px;
    padding: 3px 11px;
    font-size: 10px;
    color: #c8b88a;
    cursor: pointer;
    white-space: nowrap;
    z-index: 20;
    pointer-events: all;
    transition: background 0.2s, border-color 0.2s;
    user-select: none;
}
#db-daytime-badge:hover {
    background: rgba(18, 28, 40, 0.96);
    border-color: #c09820;
}

/* ── Pannello impostazioni layout ────────────────────────────────── */
#db-settings-panel {
    position: absolute;
    bottom: 56px;
    right: 8px;
    z-index: 200;
    background: #12101e;
    border: 1px solid #c09820;
    min-width: 280px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
#db-audio-panel {
    position: absolute;
    bottom: 56px;
    right: 8px;
    z-index: 200;
    background: #12101e;
    border: 1px solid #c09820;
    min-width: 280px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
#dashboard-container .db-settings-btn-row {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
}
#dashboard-container .db-settings-btn-row .db-settings-btn {
    width: auto;
    flex: 1;
    text-align: center;
    font-size: 19px;
}
#dashboard-container .db-settings-btn.db-active {
    background: #1a1400;
    color: #e8c838;
    border-color: #c09820;
}
#dashboard-container .db-settings-title {
    font-family: 'VT323', monospace;
    font-size: 20px;
    letter-spacing: 0.05em;
    color: #c09820;
    text-transform: uppercase;
    padding: 8px 10px 6px;
    border-bottom: 1px solid #2a2440;
}
#dashboard-container .db-settings-row {
    padding: 6px 8px;
}
#dashboard-container .db-settings-sep {
    height: 1px;
    background: #2a2440;
    margin: 2px 0;
}
#dashboard-container .db-settings-btn {
    width: 100%;
    background: #0e0b1a;
    border: 1px solid #2a2440;
    color: #908880;
    font-family: 'VT323', monospace;
    font-size: 19px;
    letter-spacing: 0.03em;
    line-height: 1.5;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#dashboard-container .db-settings-btn:hover {
    background: #1a1828;
    color: #d8d0c0;
    border-color: #504858;
}
#dashboard-container .db-settings-btn.db-settings-save {
    color: #e8c838;
    border-color: #504020;
}
#dashboard-container .db-settings-btn.db-settings-save:hover {
    background: #1a1400;
    border-color: #c09820;
}

/* ══════════════════════════════════════════════════════════════════════
   AREA CENTRO
   ══════════════════════════════════════════════════════════════════════ */

/* — Stats header — */
#dashboard-container .db-stats-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #0a1018;
    border-bottom: 1px solid #1e2836;
    flex-shrink: 0;
}

#dashboard-container .db-portrait {
    width: 50px;
    height: 50px;
    background: #111d28;
    border: 1px solid #2e4050;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    overflow: hidden;
    cursor: default;
}
#dashboard-container .db-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

#dashboard-container .db-stat-bars {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3px 14px;
    min-width: 0;
}

#dashboard-container .db-sbar { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#dashboard-container .db-sbar-label {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #4a6070;
    white-space: nowrap;
}
#dashboard-container .db-sbar-label .db-sval { color: #a0b0be; }
#dashboard-container .db-sbar-bg {
    height: 5px;
    background: #111d28;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #1e2836;
}
#dashboard-container .db-sbar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    width: 0%;
}
#dashboard-container .db-bar-hp     { background: linear-gradient(90deg, #6b0000, #c0392b); }
#dashboard-container .db-bar-mv     { background: linear-gradient(90deg, #1e4a00, #27ae60); }
#dashboard-container .db-bar-conc   { background: linear-gradient(90deg, #00006b, #2980b9); }
#dashboard-container .db-bar-hunger { background: linear-gradient(90deg, #5e3200, #c0761a); }
#dashboard-container .db-bar-thirst { background: linear-gradient(90deg, #005850, #16a085); }
#dashboard-container .db-bar-weight { background: linear-gradient(90deg, #3a0a5a, #8e44ad); }

/* — Arsenale — */
#dashboard-container .db-arsenal {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: #0a1018;
    border-top: 1px solid #1e2836;
    flex-shrink: 0;
}
#dashboard-container .db-arsenal-lbl {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #3a5060;
    margin-right: 4px;
    flex-shrink: 0;
}
#dashboard-container .db-hb-slot {
    width: 44px;
    height: 44px;
    background: #0d1117;
    border: 1px solid #1e2836;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    overflow: hidden;
    flex-shrink: 0;
}
#dashboard-container .db-hb-slot:hover { border-color: #4a6070; background: #111d28; }
#dashboard-container .db-hb-slot.db-hb-dragover { border-color: #c8a84b; background: #1a1500; box-shadow: 0 0 8px rgba(200,168,75,0.35); }
#dashboard-container .db-hb-key {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 8px;
    color: #2a3a46;
    pointer-events: none;
}
#dashboard-container .db-hb-slot img,
#dashboard-container .db-hb-img {
    width: 32px; height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}
#dashboard-container .db-hb-icon {
    font-size: 22px;
    line-height: 1;
    user-select: none;
}
#dashboard-container .db-hb-qty {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 8px;
    color: #c8b88a;
    background: rgba(0,0,0,0.65);
    border-radius: 2px;
    padding: 0 2px;
    pointer-events: none;
}
/* Divisorio verticale arsenale */
#dashboard-container .db-hb-divider {
    width: 1px;
    height: 32px;
    background: #c09820;
    align-self: center;
    margin: 0 5px;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(192,152,32,.4);
}

/* Pulsanti macro F-key */
#dashboard-container .db-fkey-btn {
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    letter-spacing: 0.05em;
    line-height: 1.8;
    word-spacing: 0.1em;
    -webkit-font-smoothing: none;
    font-smooth: never;
    text-rendering: optimizeSpeed;
    border: 1px solid #2a2010;
    background: #0a0804;
    color: #504030;
    padding: 4px 5px;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
    user-select: none;
    min-width: 30px;
    text-align: center;
    border-radius: 0;
    flex-shrink: 0;
}
#dashboard-container .db-fkey-btn:hover { background: #181208; color: #c8a050; border-color: #604820; }
#dashboard-container .db-fkey-btn.fkey-assigned { color: #c8a050; border-color: #503818; background: #0f0c04; }
#dashboard-container .db-fkey-btn.fkey-active { background: #2a1e08; color: #e8c050; border-color: #c09820; box-shadow: 0 0 6px rgba(192,152,32,.5); }
#dashboard-container .db-scheda-btn { color: #c8a050; border-color: #503818; background: #0f0c04; min-width: 44px; }
#dashboard-container .db-scheda-btn:hover { background: #1e1408; color: #e8c050; border-color: #c09820; box-shadow: 0 0 6px rgba(192,152,32,.4); }

/* Pulsanti admin nella dashboard */
#dashboard-container .db-admin-btn {
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    letter-spacing: 0.05em;
    line-height: 1.8;
    word-spacing: 0.1em;
    -webkit-font-smoothing: none;
    font-smooth: never;
    text-rendering: optimizeSpeed;
    text-transform: uppercase;
    border: 1px solid #444;
    background: #111;
    color: #888;
    padding: 3px 4px;
    transition: background .12s, color .12s, border-color .12s;
    user-select: none;
    white-space: nowrap;
    border-radius: 0;
    flex-shrink: 0;
}
#dashboard-container .db-admin-btn:hover { background: #1a1a1a; color: #ccc; border-color: #777; }
#dashboard-container .db-admin-btn.active { border-color: #6aff6a; color: #6aff6a; background: #0a1a0a; }
#dashboard-container #db-abtn-godmode.active { border-color: #ffcc44; color: #ffcc44; background: #1a1200; }
#dashboard-container #db-abtn-stealth.active { border-color: #44aaff; color: #44aaff; background: #001018; }
#dashboard-container #db-abtn-cura { border-color: #aa44ff; color: #aa44ff; }
#dashboard-container #db-abtn-resmap { border-color: #ff6644; color: #ff6644; }

/* Slot assegnato ma non equipaggiato — nessun bordo speciale */
#dashboard-container .db-hb-slot:not(.db-hb-inhand):not(.db-hb-infodero) {
    border-color: #1e2836 !important;
    box-shadow: none !important;
}

/* In-hand highlight (verde = impugnato in mano / indossato) */
#dashboard-container .db-hb-inhand {
    border-color: #3a8c4a !important;
    background: #0d1a10 !important;
    box-shadow: 0 0 6px rgba(58,140,74,0.5);
}
/* In-fodero highlight (arancione = riposto nel fodero) */
#dashboard-container .db-hb-infodero {
    border-color: #c87a1a !important;
    background: #1a1108 !important;
    box-shadow: 0 0 6px rgba(200,122,26,0.5);
}
/* Click cooldown pulse */
#dashboard-container .db-hb-cooldown {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* — Output — */
#dashboard-container .db-output {
    flex: 1;
    overflow-y: auto;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
    background: #0a0e14;
    min-height: 0;
}
#dashboard-container .db-output::-webkit-scrollbar { width: 5px; }
#dashboard-container .db-output::-webkit-scrollbar-track { background: #080c10; }
#dashboard-container .db-output::-webkit-scrollbar-thumb { background: #1e2836; border-radius: 2px; }
#dashboard-container .db-output .row { margin: 0; padding: 1px 0; }

/* — Login prompt (appare sopra la barra input) — */
#db-login-prompt {
    padding: 6px 12px;
    font-size: 13px;
    color: #a0c4e8;
    background: #0a1018;
    border-top: 1px solid #1e3050;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* — Input — */
#dashboard-container .db-input-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #0a1018;
    border-top: 1px solid #1e2836;
    flex-shrink: 0;
}
#dashboard-container .db-cmd-in {
    flex: 1;
    background: #0d1117;
    border: 1px solid #1e2836;
    border-radius: 3px;
    color: #c8b88a;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 6px 10px;
    outline: none;
    transition: border-color 0.12s;
}
#dashboard-container .db-cmd-in:focus { border-color: #4a6070; }
#dashboard-container .db-cmd-in::placeholder { color: #2a3a46; }

/* ══════════════════════════════════════════════════════════════════════
   BOTTOM BAR
   ══════════════════════════════════════════════════════════════════════ */
#dashboard-container .db-area-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: #080c10;
    border: 1px solid #1e2836;
    border-radius: 4px;
    overflow: hidden;
}

#dashboard-container .db-bottom-logo {
    font-size: 10px;
    color: #3a5060;
    text-transform: uppercase;
    letter-spacing: 3px;
    white-space: nowrap;
}
#dashboard-container .db-bottom-logo strong { color: #c8a84b; }

/* Wallet display */
#dashboard-container .db-gold {
    font-size: 10px;
    white-space: nowrap;
    font-family: monospace;
    letter-spacing: 0.5px;
}
#dashboard-container .db-mo {
    color: #c8a84b;
}
#dashboard-container .db-mf {
    color: #8a9ba8;
}

#dashboard-container .db-bottom-spacer { flex: 1; }

/* Target bar — nascosta, appare solo in combattimento */
#dashboard-container .db-target-bar {
    display: none;
    align-items: center;
    gap: 6px;
    background: #1a0808;
    border: 1px solid #4a2020;
    border-radius: 3px;
    padding: 3px 9px;
    font-size: 11px;
    white-space: nowrap;
}
#dashboard-container .db-target-bar.db-in-combat { display: flex; }
#dashboard-container .db-target-name { color: #e74c3c; font-weight: bold; }
#dashboard-container .db-target-hp-bg {
    width: 80px; height: 5px;
    background: #2a1010;
    border-radius: 3px;
    overflow: hidden;
}
#dashboard-container .db-target-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #6b0000, #e74c3c);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 100%;
}

/* Ping */
#dashboard-container .db-ping {
    font-size: 10px;
    color: #3a5060;
    font-family: monospace;
    white-space: nowrap;
    min-width: 56px;
    text-align: right;
}
#dashboard-container .db-ping.db-ok   { color: #27ae60; }
#dashboard-container .db-ping.db-warn { color: #f39c12; }
#dashboard-container .db-ping.db-bad  { color: #e74c3c; }

/* Bottom buttons */
#dashboard-container .db-bot-btn,
#dashboard-container .db-fkey-btn {
    cursor: url('/cursors/cursore.png') 1 0, pointer !important;
}
#dashboard-container .db-bot-btn {
    background: #0d1117;
    border: 1px solid #1e2836;
    border-radius: 3px;
    color: #4a6070;
    font-size: 10px;
    padding: 4px 8px;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
#dashboard-container .db-bot-btn:hover { color: #9abacc; border-color: #4a6070; }

/* ══════════════════════════════════════════════════════════════════════
   STATUS PANEL — buff/debuff attivi
   ══════════════════════════════════════════════════════════════════════ */
#db-status-pane {
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#dashboard-container .sp-empty {
    color: #3a3858;
    font-size: 11px;
    text-align: center;
    padding: 14px 8px;
    font-style: italic;
}

#dashboard-container .sp-category-header {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 4px 4px 2px;
    margin-top: 4px;
}
#dashboard-container .sp-cat-buff   { color: #55cc55; border-bottom: 1px solid #2a4a2a; }
#dashboard-container .sp-cat-debuff { color: #cc5555; border-bottom: 1px solid #4a2a2a; }

#dashboard-container .sp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 3px;
}
#dashboard-container .sp-row:hover { background: #12101e; }
#dashboard-container .sp-row-buff   { border-left: 2px solid #2a5a2a; }
#dashboard-container .sp-row-debuff { border-left: 2px solid #5a2a2a; }
#dashboard-container .sp-row-buff   .sp-name { color: #55cc55; }
#dashboard-container .sp-row-debuff .sp-name { color: #cc5555; }

#dashboard-container canvas.sp-tile-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    image-rendering: pixelated;
    border-radius: 2px;
    background: #0a0814;
}

#dashboard-container .sp-name {
    flex: 1;
    font-size: 11px;
    color: #c8c0b0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#dashboard-container .sp-duration {
    font-size: 10px;
    color: #5a5070;
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
}
#dashboard-container .sp-row-buff   .sp-duration { color: #3a7a3a; }
#dashboard-container .sp-row-debuff .sp-duration { color: #7a3a3a; }

/* ── Tooltip modifier su hover ──────────────────────────────────── */
#dashboard-container .sp-row[data-sp-tooltip] { position: relative; }
#dashboard-container .sp-row[data-sp-tooltip]::after {
    content: attr(data-sp-tooltip);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0;
    background: #0d0b18;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    white-space: pre;
    padding: 4px 7px;
    border: 1px solid #2a2640;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
#dashboard-container .sp-row-buff[data-sp-tooltip]::after   { color: #55cc55; border-color: #2a5a2a; }
#dashboard-container .sp-row-debuff[data-sp-tooltip]::after { color: #cc5555; border-color: #5a2a2a; }
#dashboard-container .sp-row[data-sp-tooltip]:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   PLACEHOLDER generico per aree in costruzione
   ══════════════════════════════════════════════════════════════════════ */
#dashboard-container .db-placeholder {
    color: #1e2836;
    font-size: 11px;
    text-align: center;
    padding: 18px 8px;
    font-style: italic;
    user-select: none;
}

/* ── Audio controls nel pannello impostazioni ─────────────────────────── */
#dashboard-container .db-audio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    color: #a09888;
    width: 100%;
}
#dashboard-container .db-audio-row span {
    min-width: 82px;
    font-size: 19px;
    color: #c09820;
}
#dashboard-container .db-audio-row input[type="range"] {
    accent-color: #c09820;
    height: 4px;
    cursor: pointer;
}
#dashboard-container .db-audio-row input[type="checkbox"] {
    accent-color: #c09820;
    cursor: pointer;
    width: 13px;
    height: 13px;
}
#db-audio-panel {
    position: absolute;
    bottom: 56px;
    right: 8px;
    z-index: 200;
    background: #12101e;
    border: 1px solid #c09820;
    min-width: 220px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
#dashboard-container .db-settings-btn-row {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
}
#dashboard-container .db-settings-btn-row .db-settings-btn {
    width: auto;
    flex: 1;
    text-align: center;
    font-size: 8px;
}
#dashboard-container .db-settings-btn.db-active {
    background: #1a1400;
    color: #e8c838;
    border-color: #c09820;
}

/* ══════════════════════════════════════════════════════════════════════
   MODAL AIUTO — Manuale del Giocatore
   ══════════════════════════════════════════════════════════════════════ */
.db-help-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-help-modal {
    background: #0d0a18;
    border: 1px solid #c09820;
    box-shadow: 0 0 40px rgba(0,0,0,0.9), 0 0 0 1px #2a2030;
    width: min(820px, 92vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    font-family: 'VT323', monospace;
    color: #c8c0b0;
    overflow: hidden;
}

.db-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #12101e;
    border-bottom: 1px solid #c09820;
    flex-shrink: 0;
    font-size: 22px;
    letter-spacing: 0.06em;
    color: #e8c838;
    text-transform: uppercase;
}

.db-help-close {
    background: none;
    border: 1px solid #3a3050;
    color: #907878;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 8px;
    font-family: monospace;
    transition: color 0.12s, border-color 0.12s;
}
.db-help-close:hover { color: #e87070; border-color: #e87070; }

.db-help-body {
    overflow-y: auto;
    padding: 6px 0;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #3a3050 #0d0a18;
}

.db-help-section { border-bottom: 1px solid #1a1828; }

.db-help-toggle {
    padding: 10px 14px;
    font-size: 20px;
    letter-spacing: 0.05em;
    color: #d0c090;
    cursor: pointer;
    text-transform: uppercase;
    user-select: none;
    transition: background 0.1s, color 0.1s;
}
.db-help-toggle:hover { background: #1a1828; color: #e8c838; }

.db-help-content {
    display: none;
    padding: 4px 18px 12px 28px;
    border-top: 1px solid #1a1828;
    background: #0a0816;
}

.db-help-sub { margin: 4px 0; }

.db-help-subtoggle {
    padding: 6px 10px;
    font-size: 17px;
    color: #9090c0;
    cursor: pointer;
    user-select: none;
    transition: color 0.1s;
}
.db-help-subtoggle:hover { color: #c0c0f0; }

.db-help-subcontent { display: none; padding: 4px 0 4px 14px; }

.db-help-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0;
    font-size: 16px;
}
.db-help-table tr { border-bottom: 1px solid #1a1828; }
.db-help-table tr:last-child { border-bottom: none; }
.db-help-table td { padding: 4px 6px; vertical-align: top; line-height: 1.4; }

.db-help-cmd {
    color: #70c090;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    white-space: nowrap;
    min-width: 220px;
    width: 38%;
}

.db-help-note {
    font-size: 15px;
    color: #908880;
    margin: 4px 0 6px;
    line-height: 1.5;
}
.db-help-note strong { color: #c0a870; }

.db-help-img-placeholder {
    border: 1px dashed #3a3050;
    color: #605870;
    font-size: 15px;
    padding: 20px;
    text-align: center;
    margin: 8px 0 12px;
    background: #08060f;
}

.db-help-coming-soon {
    text-align: center;
    font-size: 18px;
    padding: 18px 0;
}

/* Etichetta rossa per feature in cantiere ma non ancora disponibili */
.db-soon {
    color: #e0503a;
    font-weight: bold;
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.db-help-table tr.db-soon-row td { opacity: 0.7; }