:root {
    /* ===================================================================== */
    /* TAVOLOZZA COLORI LCARS STANDARD FEDERALE                              */
    /* ===================================================================== */
    --c-bg: #000000;
    --c-purple: #cda4de;
    --c-blue: #9999ff;
    --c-orange: #ff9966;
    --c-light-orange: #ffcc99;
    --c-pink: #d68787;
    --c-text-yellow: #ffcc00;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body {
    background-color: var(--c-bg); 
    color: var(--c-light-orange); 
    font-family: 'Oswald', sans-serif; 
    text-transform: uppercase; 
    overflow-x: hidden; 
}

.home-body { 
    overflow: hidden; 
}

/* ===================================================================== */
/* NASCONDERE IN MODO BLINDATO I CONTENUTI FANTASMA (ANTI-BUG UI)          */
/* ===================================================================== */
.hidden {
    display: none !important;
}

/* ===================================================================== */
/* BANNER DI ERRORE LCARS E WARP                                           */
/* ===================================================================== */
.lcars-error-banner {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    background-color: var(--c-pink); 
    color: #000;
    text-align: center; 
    padding: 15px; 
    font-size: 24px; 
    font-weight: 700; 
    z-index: 9999;
    border-bottom: 5px solid #fff; 
    transition: transform 0.3s ease-in-out;
}

.lcars-warp-banner {
    background-color: var(--c-blue); 
    color: #000;
    text-align: center; 
    padding: 12px; 
    font-size: 22px; 
    font-weight: 700;
    border-radius: 20px; 
    margin-bottom: 15px; 
    border: 3px solid var(--c-light-orange);
    transition: all 0.3s ease;
}

/* ===================================================================== */
/* CLASSI CONDIVISE E COLORI BG/TESTO                                      */
/* ===================================================================== */
.lcars-purple { background-color: var(--c-purple); color: #000; }
.lcars-blue { background-color: var(--c-blue); color: #000; }
.lcars-orange { background-color: var(--c-orange); color: #000; }
.lcars-light-orange { background-color: var(--c-light-orange); color: #000; }
.lcars-pink { background-color: var(--c-pink); color: #000; }

.lcars-text-orange { color: var(--c-orange); }
.lcars-text-yellow { color: var(--c-text-yellow); }
.lcars-text-light { color: #ccc; }
.lcars-text-blue { color: var(--c-blue); }
.lcars-text-pink { color: var(--c-pink); }
.lcars-text-purple { color: var(--c-purple); }

.status-message { 
    margin-top: 25px; 
    font-size: 20px; 
    font-weight: 700; 
    color: var(--c-text-yellow); 
}

/* ===================================================================== */
/* ANIMAZIONI LCARS VITALI                                                 */
/* ===================================================================== */
@keyframes subtle-blink { 
    0%, 100% { opacity: 1; filter: brightness(1); } 
    50% { opacity: 0.7; filter: brightness(0.7); } 
}
@keyframes radar-pulse { 
    0% { transform: scale(1); opacity: 0.8; } 
    100% { transform: scale(3); opacity: 0; } 
}
@keyframes ship-float { 
    0%, 100% { margin-top: 0; } 
    50% { margin-top: -5px; } 
}

.lcars-blink-slow { animation: subtle-blink 3.5s infinite ease-in-out; }
.lcars-blink-fast { animation: subtle-blink 1.5s infinite ease-in-out; }

/* ===================================================================== */
/* INPUT E FORM (Tema Dark Fisso)                                          */
/* ===================================================================== */
input.dark-input, select.dark-input, textarea.dark-input,
input, select, textarea {
    background-color: #0a0a0a !important;
    color: #88ccff !important;
    border: 2px solid var(--c-blue) !important;
    padding: 12px; 
    font-family: 'Oswald', sans-serif; 
    font-size: 16px; 
    border-radius: 15px; 
    outline: none; 
    transition: all 0.3s;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--c-text-yellow) !important;
    background-color: #111111 !important;
}

/* ===================================================================== */
/* LAYOUT SCHERMATA PRINCIPALE DI GIOCO                                    */
/* ===================================================================== */
.lcars-home-wrapper { 
    display: flex; 
    height: 100vh; 
    width: 100vw; 
    padding: 20px; 
    gap: 20px; 
}

.lcars-side-panel { 
    width: 200px; 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0; 
    gap: 10px; 
}

.panel-number { 
    display: block; 
    padding: 10px; 
    font-weight: 700; 
    font-size: 18px; 
}

.left-panel .panel-number { text-align: right; } 
.right-panel .panel-number { text-align: left; }

.lcars-elbow-top-left { height: 100px; border-top-left-radius: 50px; } 
.lcars-elbow-top-right { height: 100px; border-top-right-radius: 50px; }
.lcars-elbow-bottom-left { height: 100px; border-bottom-left-radius: 50px; } 
.lcars-elbow-bottom-right { height: 100px; border-bottom-right-radius: 50px; }

.lcars-vertical-fill { 
    flex-grow: 1; 
    width: 100%; 
}

.nav-buttons-left, .nav-buttons-right { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.lcars-nav-btn { 
    border: none; 
    padding: 15px 10px; 
    font-family: 'Oswald', sans-serif; 
    font-size: 16px; 
    font-weight: 700; 
    cursor: pointer; 
    text-transform: uppercase; 
    transition: filter 0.2s; 
}

.left-panel .lcars-nav-btn { 
    text-align: right; 
    border-top-left-radius: 25px; 
    border-bottom-left-radius: 25px; 
}

.right-panel .lcars-nav-btn { 
    text-align: left; 
    border-top-right-radius: 25px; 
    border-bottom-right-radius: 25px; 
}

.lcars-nav-btn:hover { 
    filter: brightness(1.3); 
}

/* ===================================================================== */
/* PANNELLO CENTRALE E LOCATION VIEWER                                     */
/* ===================================================================== */
.lcars-center-panel { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    min-width: 0; 
    height: 100%; 
}

.location-header { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    flex-shrink: 0;
}

.location-header h1 { 
    color: var(--c-text-yellow); 
    font-size: 35px; 
    margin-bottom: 5px; 
}

.teleport-controls { 
    display: flex; 
    gap: 15px; 
    justify-content: flex-end; 
    width: 100%; 
}

.teleport-btn { 
    margin: 0; 
    padding: 8px 25px; 
    font-size: 18px; 
    animation: subtle-blink 2.5s infinite ease-in-out; 
    border: none; 
    font-family: 'Oswald', sans-serif; 
    font-weight: 700; 
    border-radius: 25px; 
    cursor: pointer; 
    transition: 0.2s;
}

.teleport-btn:hover { 
    background-color: var(--c-text-yellow); 
    color: #000; 
}

.location-viewer { 
    flex-shrink: 0; 
    height: 250px; 
    position: relative; 
    border-radius: 30px; 
    overflow: hidden; 
    border: 4px solid var(--c-orange); 
}

.location-viewer img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    transition: all 0.5s; 
}

.viewer-overlay { 
    position: absolute; 
    bottom: 15px; 
    right: 15px; 
    padding: 5px 15px; 
    border-radius: 15px; 
    font-weight: 700; 
    font-size: 14px; 
    opacity: 0.8; 
    background-color: rgba(0,0,0,0.5); 
}

/* ===================================================================== */
/* BARRE DELLA VITA E RANGO (CHAT E SCHEDA)                              */
/* ===================================================================== */
.chat-hp-container {
    display: inline-block;
    width: 30px;
    height: 8px;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 5px;
    overflow: hidden;
}

.chat-hp-fill {
    display: block;
    height: 100%;
}

.hp-green { background-color: #39ff14; }
.hp-yellow { background-color: #ffcc00; }
.hp-red { background-color: #ff0000; box-shadow: 0 0 5px red; }

.chat-role-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.4));
}

.chat-rank { 
    color: #aaaaaa; 
    font-family: monospace; 
    font-size: 12px; 
    margin-right: 5px; 
}

/* ===================================================================== */
/* NUOVE CLASSI COMBAT SYSTEM E NARRAZIONE MASTER (/DM e /LINK)            */
/* ===================================================================== */
.roll-success {
    color: #39ff14 !important;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.5);
}

.roll-failure {
    color: #ff0000 !important;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Riquadro Narrativo del Dungeon Master */
.chat-dm-box {
    background-color: #1a0a1a;
    border: 2px solid var(--c-purple);
    border-left: 5px solid var(--c-purple);
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
    color: #eeeeee;
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    box-shadow: 0 0 15px rgba(205, 164, 222, 0.2);
    width: 100%;
}

.chat-dm-title {
    color: var(--c-purple);
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Immagine generata dal comando /link in chat */
.chat-image-link {
    max-width: 100%;
    width: 350px;
    max-height: 250px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--c-blue);
    margin-top: 5px;
    display: block;
    box-shadow: 0 0 10px rgba(153, 153, 255, 0.3);
}

/* ===================================================================== */
/* CHAT E SINTASSI INTERFACCIA                                             */
/* ===================================================================== */
.chat-interface { 
    flex-grow: 1; 
    min-height: 0;
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    width: 100%; 
}

.chat-log { 
    flex-grow: 1; 
    background-color: #111; 
    border-radius: 20px; 
    padding: 20px; 
    overflow-y: auto; 
    border: 2px solid var(--c-blue); 
    font-family: 'Titillium Web', sans-serif; 
    font-size: 17px; 
    text-transform: none; 
    line-height: 1.5; 
    color: #fff; 
}

.chat-message { 
    margin-bottom: 10px; 
}

.chat-author { 
    color: var(--c-orange); 
    font-weight: bold; 
    font-family: 'Oswald', sans-serif;
    transition: color 0.2s; 
}

.chat-author:hover { 
    color: var(--c-text-yellow); 
}

.chat-action { 
    color: var(--c-text-yellow); 
    font-style: italic; 
}

.system-message { 
    color: var(--c-text-yellow); 
    font-weight: bold; 
    font-family: 'Oswald', sans-serif; 
    text-transform: uppercase; 
}

.chat-input-area { 
    display: flex; 
    height: 50px; 
    gap: 10px; 
    flex-shrink: 0; 
    width: 100%; 
}

.chat-elbow-left { 
    width: 60px; 
    border-top-left-radius: 25px; 
    border-bottom-left-radius: 25px; 
}

.chat-input-area input { 
    flex-grow: 1; 
    min-width: 0;
    border-radius: 0; 
    border: none; 
    background-color: #222; 
    border-top: 3px solid var(--c-pink); 
    border-bottom: 3px solid var(--c-pink); 
    color: var(--c-light-orange); 
    padding: 12px; 
    font-family: 'Oswald', sans-serif; 
    font-size: 16px; 
    outline: none;
}

.lcars-send-btn { 
    border: none; 
    padding: 0 30px; 
    font-family: 'Oswald', sans-serif; 
    font-size: 18px; 
    font-weight: 700; 
    border-top-right-radius: 25px; 
    border-bottom-right-radius: 25px; 
    cursor: pointer; 
    color: #000;
}

.lcars-send-btn:hover { 
    background-color: var(--c-text-yellow); 
}

.chat-log::-webkit-scrollbar { width: 10px; } 
.chat-log::-webkit-scrollbar-track { background: var(--c-bg); border-radius: 10px; } 
.chat-log::-webkit-scrollbar-thumb { background: var(--c-blue); border-radius: 10px; }

/* ===================================================================== */
/* MODALI E POP-UP                                                         */
/* ===================================================================== */
.lcars-modal { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background-color: rgba(0, 0, 0, 0.85); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 1000; 
}

.lcars-modal-content { 
    background-color: var(--c-bg); 
    border: 4px solid var(--c-blue); 
    border-radius: 40px; 
    width: 90%; 
    max-width: 800px; 
    padding: 30px; 
    box-shadow: 0 0 30px rgba(153, 153, 255, 0.4); 
}

.map-modal-custom, .skills-modal-custom { 
    max-width: 1200px; 
    height: 85vh; 
    display: flex; 
    flex-direction: column; 
}

.lcars-modal-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 3px solid var(--c-pink); 
    padding-bottom: 15px; 
    margin-bottom: 25px; 
    flex-shrink: 0;
}

.lcars-modal-body { 
    flex-grow: 1; 
    overflow-y: auto; 
}

/* ===================================================================== */
/* SCHEDA PERSONAGGIO (LAYOUT SPETTACOLARE DOSSIER FLOTTA)                 */
/* ===================================================================== */
.char-sheet-grid { 
    display: grid; 
    grid-template-columns: 1fr 2fr; 
    gap: 30px; 
    align-items: start; 
}

.char-sheet-image { 
    text-align: center; 
}

.char-sheet-image img { 
    width: 100%; 
    border-radius: 15px; 
    border: 3px solid var(--c-light-orange); 
}

.dossier-box {
    background: #0a0a0a;
    border: 2px solid var(--c-blue);
    border-radius: 15px;
    padding: 20px;
    box-shadow: inset 0 0 15px rgba(153, 153, 255, 0.1);
}

.dossier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--c-purple);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.dossier-rank-role {
    font-size: 24px;
    color: var(--c-text-yellow);
    display: flex;
    align-items: center;
    gap: 15px;
}

.dossier-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(136, 204, 255, 0.6));
}

.char-sheet-details p { 
    font-size: 18px; 
    margin-bottom: 10px; 
    letter-spacing: 1px; 
}

.char-description-box { 
    margin-top: 20px; 
    background-color: #111; 
    padding: 15px; 
    border-radius: 15px; 
    border-left: 5px solid var(--c-orange); 
}

.lcars-btn { 
    background-color: var(--c-orange); 
    color: #000; 
    border: none; 
    padding: 15px; 
    font-family: 'Oswald', sans-serif; 
    font-size: 20px; 
    font-weight: 700; 
    border-radius: 25px; 
    cursor: pointer; 
    text-transform: uppercase; 
    transition: background-color 0.2s; 
    margin-top: 20px; 
}
.lcars-blue-btn { background-color: var(--c-blue); }
.lcars-btn:hover:not(:disabled), .lcars-blue-btn:hover:not(:disabled) { 
    background-color: var(--c-text-yellow); color: #000; 
}

/* ===================================================================== */
/* INVENTARIO E OGGETTI LORE                                               */
/* ===================================================================== */
.inventory-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px; 
    margin-top: 20px; 
}

.inventory-slot { 
    background-color: #111; 
    border: 3px solid var(--c-blue); 
    border-radius: 15px; 
    aspect-ratio: 1 / 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    transition: background-color 0.2s, border-color 0.2s; 
}

.inventory-slot.drag-over { 
    background-color: #2a2a2a; 
    border-color: var(--c-text-yellow); 
    box-shadow: inset 0 0 15px var(--c-text-yellow); 
}

.slot-number { 
    position: absolute; 
    top: 5px; 
    left: 10px; 
    color: #555; 
    font-size: 14px; 
    font-weight: 700; 
}

.inventory-item { 
    width: 90%; 
    height: 90%; 
    background-color: transparent; 
    border-radius: 10px; 
    cursor: grab; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    color: #88ccff; 
    font-weight: 700; 
    font-family: 'Oswald', sans-serif;
    font-size: 16px; 
    padding: 5px; 
    user-select: none; 
    transition: transform 0.1s; 
}

.inventory-item:active { 
    cursor: grabbing; 
    transform: scale(0.95); 
}

.item-name { 
    line-height: 1.2; 
    text-shadow: 0 0 5px rgba(136, 204, 255, 0.4);
}

/* ===================================================================== */
/* MENU CONTESTUALE (TASTO DESTRO - FIXED)                                 */
/* ===================================================================== */
.context-menu {
    position: fixed; 
    border: 2px solid var(--c-blue);
    background: #000;
    border-radius: 10px;
    padding: 5px;
    z-index: 999999;
    box-shadow: 0 0 15px rgba(153, 153, 255, 0.4);
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.context-btn {
    border-radius: 5px;
    text-align: left;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.2s;
    background: transparent;
    border: none;
    padding: 10px;
}

.context-btn:hover { 
    background-color: rgba(136, 204, 255, 0.2) !important;
    transform: scale(1.02);
}

/* NUOVA UI OGGETTI ADMIN */
.admin-item-box {
    background: #1a1a1a;
    border: 2px solid var(--c-pink);
    border-radius: 10px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.admin-item-box:hover { 
    background: #331111; 
    transform: scale(1.05); 
}

.admin-item-box.selected { 
    border-color: var(--c-text-yellow); 
    box-shadow: 0 0 10px var(--c-text-yellow); 
}

/* OVERLAY SCONFITTO NPC */
.sconfitto-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,0,0,0.6); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border-radius: 10px;
}

.sconfitto-text {
    color: white; 
    font-size: 26px; 
    font-weight: bold; 
    text-shadow: 2px 2px 0 #000; 
    transform: rotate(-15deg); 
    border: 4px solid white; 
    padding: 5px 10px;
}

/* ===================================================================== */
/* CARTOGRAFIA STELLARE E PLANETARIA                                       */
/* ===================================================================== */
.astrometrics-container { 
    display: flex; 
    gap: 30px; 
    flex-grow: 1; 
    height: 100%; 
    min-height: 0; 
}

.map-visual-area { 
    flex: 1.5; 
    background-color: #050510; 
    border: 2px solid var(--c-blue); 
    border-radius: 20px; 
    position: relative; 
    overflow: hidden; 
    background-image: radial-gradient(circle, #ffffff11 1px, transparent 1px); 
    background-size: 40px 40px; 
}

.map-crosshair-vertical { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background-color: rgba(153, 153, 255, 0.4); }
.map-crosshair-horizontal { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: rgba(153, 153, 255, 0.4); }

.quadrant-label { position: absolute; font-size: 20px; color: rgba(255, 255, 255, 0.2); font-weight: 700; }
.q-gamma { top: 20px; left: 20px; } 
.q-delta { top: 20px; right: 20px; } 
.q-alpha { bottom: 20px; left: 20px; } 
.q-beta { bottom: 20px; right: 20px; }

.planet-marker { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; z-index: 10; }
.planet-dot { width: 14px; height: 14px; border-radius: 50%; transition: transform 0.2s; position: relative; }
.planet-label { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); white-space: nowrap; font-size: 14px; color: #fff; background-color: rgba(0,0,0,0.8); padding: 4px 8px; border-radius: 5px; border: 1px solid var(--c-blue); opacity: 0; visibility: hidden; transition: opacity 0.2s; pointer-events: none; z-index: 20; }
.planet-marker:hover .planet-label { opacity: 1; visibility: visible; }
.planet-marker:hover .planet-dot { transform: scale(1.5); }
.active-dot::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px solid var(--c-text-yellow); border-radius: 50%; animation: radar-pulse 1.5s infinite; }

.ship-marker { 
    position: absolute; 
    transform: translate(-50%, -50%); 
    cursor: help; 
    z-index: 15; 
    animation: ship-float 2s infinite ease-in-out; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.planet-details-area { flex: 1; background-color: #111; border: 2px solid var(--c-orange); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; }
.planet-placeholder-text { color: var(--c-text-yellow); font-size: 22px; text-align: center; margin-top: 50px; line-height: 1.5; }
.planet-image-placeholder { width: 100%; height: 200px; background-color: #222; border: 3px dashed var(--c-pink); border-radius: 15px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; text-align: center; padding: 20px; overflow:hidden;}
.planet-description-box { margin-top: 20px; background-color: #000; padding: 15px; border-radius: 15px; border-left: 5px solid var(--c-blue); }

/* ===================================================================== */
/* PLANIMETRIA NAVE STELLARE                                               */
/* ===================================================================== */
.ship-schematic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 50px; background-color: #000015; border: 5px solid var(--c-blue); border-radius: 80px 80px 150px 150px; position: relative; width: 80%; }
.ship-room { border: 3px solid #333; background-color: #111; padding: 25px 15px; color: #555; text-align: center; font-weight: 700; font-size: 18px; cursor: pointer; border-radius: 20px; transition: all 0.2s; display: flex; justify-content: center; align-items: center; }
.ship-room:hover:not(.active-room) { border-color: var(--c-orange); color: var(--c-orange); background-color: #222; transform: scale(1.02); }
.ship-room.active-room { border-color: var(--c-text-yellow); color: var(--c-text-yellow); background-color: rgba(255, 204, 0, 0.1); transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 204, 0, 0.3); }

/* ===================================================================== */
/* COMPETENZE E ABILITÀ                                                    */
/* ===================================================================== */
.skills-info-bar { display: flex; justify-content: center; margin-bottom: 20px; flex-shrink: 0; }
.skills-points-display { background-color: #1a1a1a; border: 2px solid var(--c-text-yellow); padding: 10px 30px; border-radius: 25px; color: var(--c-text-yellow); font-size: 22px; font-weight: 700; }
.skills-warning { background-color: #331111; border: 2px solid var(--c-pink); padding: 10px 30px; border-radius: 25px; color: var(--c-pink); font-size: 22px; font-weight: 700; text-align: center; }
.skills-grid { flex-grow: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; overflow-y: auto; padding-right: 15px; align-content: start; }
.skill-item { background-color: #111; padding: 10px 15px; border-radius: 15px; border-left: 5px solid var(--c-blue); display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.skill-name { font-size: 16px; color: var(--c-light-orange); font-weight: 700; }
.skill-controls { display: flex; justify-content: space-between; align-items: center; }
.skill-btn { width: 30px; height: 30px; border-radius: 15px; border: none; font-size: 20px; font-weight: 700; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #000; transition: filter 0.2s; }
.skill-btn:hover { filter: brightness(1.3); }
.skill-value { font-size: 24px; font-weight: 700; color: #fff; width: 40px; text-align: center; }
.skill-bar-bg { width: 100%; height: 4px; background-color: #333; border-radius: 2px; overflow: hidden; margin-top: 5px; }
.skill-bar-fill { height: 100%; transition: width 0.3s, background-color 0.3s; }
.skills-footer { margin-top: 20px; flex-shrink: 0; }

/* ===================================================================== */
/* GESTIONE SCROLLBAR CUSTOM E GENERICHE ADMIN                             */
/* ===================================================================== */
.skills-grid::-webkit-scrollbar, 
.planet-details-area::-webkit-scrollbar, 
.lcars-modal-body::-webkit-scrollbar, 
#planetLocationsList::-webkit-scrollbar, 
.msg-list-area::-webkit-scrollbar, 
.msg-content-area::-webkit-scrollbar, 
.admin-sidebar::-webkit-scrollbar, 
#admin-content-area::-webkit-scrollbar, 
#adminItemsGrid::-webkit-scrollbar { 
    width: 10px; 
}
.skills-grid::-webkit-scrollbar-track, 
.planet-details-area::-webkit-scrollbar-track, 
.lcars-modal-body::-webkit-scrollbar-track, 
#planetLocationsList::-webkit-scrollbar-track, 
.msg-list-area::-webkit-scrollbar-track, 
.msg-content-area::-webkit-scrollbar-track, 
.admin-sidebar::-webkit-scrollbar-track, 
#admin-content-area::-webkit-scrollbar-track, 
#adminItemsGrid::-webkit-scrollbar-track { 
    background: var(--c-bg); 
    border-radius: 10px; 
}
.skills-grid::-webkit-scrollbar-thumb, 
.planet-details-area::-webkit-scrollbar-thumb, 
.lcars-modal-body::-webkit-scrollbar-thumb, 
#planetLocationsList::-webkit-scrollbar-thumb, 
.msg-list-area::-webkit-scrollbar-thumb, 
.msg-content-area::-webkit-scrollbar-thumb, 
.admin-sidebar::-webkit-scrollbar-thumb, 
#admin-content-area::-webkit-scrollbar-thumb, 
#adminItemsGrid::-webkit-scrollbar-thumb { 
    background: var(--c-blue); 
    border-radius: 10px; 
}

/* ===================================================================== */
/* TOOLTIP GLOBALE OLOGRAFICO                                              */
/* ===================================================================== */
#lcarsGlobalTooltip { 
    position: fixed; 
    background-color: var(--c-purple); 
    color: #000; 
    padding: 12px 18px; 
    border-radius: 15px; 
    font-family: 'Oswald', sans-serif; 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase; 
    line-height: 1.4; 
    pointer-events: none; 
    z-index: 999999; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.15s ease-in-out; 
    max-width: 280px; 
    box-shadow: 0 0 20px rgba(205, 164, 222, 0.6); 
    border: 2px solid #000; 
}
#lcarsGlobalTooltip.visible { 
    opacity: 1; 
    visibility: visible; 
}

/* Moduli Generici */
.msg-container { display: flex; gap: 30px; height: calc(100% - 80px); }
.msg-sidebar { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.msg-tabs { display: flex; }
.msg-list-area { flex-grow: 1; background-color: #111; border: 2px solid var(--c-blue); border-radius: 20px; overflow-y: auto; }
.msg-content-area { flex: 2; background-color: #050510; border: 2px solid var(--c-orange); border-radius: 20px; padding: 25px; overflow-y: auto; }
.admin-tab-btn { margin: 0; border-radius: 15px; font-size: 18px; width: 100%; text-align: center; cursor: pointer; }
.admin-tab-content { display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding-right: 15px; }