/* =========================================================
   CrioReload — foglio di stile unificato
   Palette: verde #33cc33 / blu-acciaio #6b9aac / sfondo scuro
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --verde:          #33cc33;
    --verde-scuro:    #1f7a1f;
    --verde-hover:    #44ff44;
    --blu:            #6b9aac;
    --blu-scuro:      #3e5f6e;
    --blu-hover:      #8ab8cc;
    --sfondo:         #0a0a0a;
    --sfondo-panel:   #141414;
    --sfondo-card:    #1c1c1c;
    --sfondo-input:   #111111;
    --bordo:          #2a2a2a;
    --bordo-accent:   #33cc3344;
    --testo:          #cccccc;
    --testo-muted:    #666666;
    --testo-bianco:   #eeeeee;
    --rosso:          #cc3333;
    --giallo:         #ccaa22;
    --raggio:         4px;
    --font-mono:      'JetBrains Mono', 'Courier New', monospace;
    --font-sans:      'Segoe UI', Arial, sans-serif;
    --transizione:    0.18s ease;
}

/* ── Reset e base ──────────────────────────────────────── */

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

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--sfondo);
    background-image: url('../img/net.gif');
    background-repeat: repeat;
    color: var(--testo);
    font-family: var(--font-sans);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--verde);
    text-decoration: none;
    transition: color var(--transizione);
}

a:hover {
    color: var(--verde-hover);
}

img {
    max-width: 100%;
    height: auto;
}

/* ── Scrollbar globale ─────────────────────────────────── */

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

*::-webkit-scrollbar        { width: 5px; height: 5px; }
*::-webkit-scrollbar-track  { background-color: var(--sfondo); background-image: url('../img/net.gif'); background-repeat: repeat; }
*::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.2); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

/* ── Tipografia ────────────────────────────────────────── */

h1, h2, h3, h4 {
    color: var(--testo-bianco);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    line-height: 1.3;
}

h1 { font-size: 1.8rem; margin-bottom: 1rem; }
h2 { font-size: 1.4rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
h4 { font-size: 1rem; margin-bottom: 0.4rem; }

p { margin-bottom: 0.75rem; }

code, pre {
    font-family: var(--font-mono);
    background: var(--sfondo-panel);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

code { padding: 0.1em 0.35em; font-size: 0.9em; }

pre {
    padding: 1rem;
    overflow-x: auto;
}

/* ── Layout principale ─────────────────────────────────── */

.contenitore {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.principale {
    flex: 1;
    padding: 2rem 0;
}

/* ── Layout a pieno schermo per le pagine di gioco ───── */

/* Il contenitore perde max-width e padding quando ospita il layout-gioco */
.principale:has(.layout-gioco) {
    padding: 0;
}

.contenitore:has(.layout-gioco) {
    max-width: 100%;
    padding: 0;
}

/* Elementi prima del layout-gioco (h1, flash) recuperano padding */
.contenitore:has(.layout-gioco) > :not(.layout-gioco):not(.dash-header) {
    padding: 0.75rem 1.5rem;
}

/* Griglia principale: sidebar fissa + area contenuto */
.layout-gioco {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    align-items: start;
    min-height: calc(100vh - 56px);
}

/* Sidebar elemento indipendente, staccato dai bordi */
.layout-gioco > aside {
    background: var(--sfondo-panel);
    border: 1px solid var(--bordo-accent);
    border-radius: 8px;
    padding: 1.25rem 1rem;
    position: sticky;
    top: 10px;
    height: calc(100vh - 20px);
    overflow-y: auto;
    margin: 10px 0 10px 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* I .panel dentro la sidebar si fondono col pannello */
.layout-gioco > aside > .panel {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
}

.layout-gioco > aside > .panel + .panel {
    border-top: 1px solid var(--bordo);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

/* Area contenuto con padding interno */
.layout-gioco > div {
    padding: 1.5rem 2rem;
    min-width: 0;
}

@media (max-width: 768px) {
    .layout-gioco {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .layout-gioco > aside {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--bordo-accent);
    }
}

/* ── Responsive mobile — chat e pannelli ──────────────── */
@media (max-width: 600px) {

    /* Chat: nascondi sidebar sinistra presenti/info, usa tutto lo spazio */
    .cm-left-col  { display: none !important; }
    .cm-destina   { display: none !important; }

    /* Chat: input area occupa tutta la larghezza */
    .cm-scrivi    { width: 100%; }
    .cm-bottom    { flex-direction: column; }

    /* Aumenta touch targets per i pulsanti della chatbar */
    .cm-editor-sidebar .btn,
    .cm-editor-sidebar button {
        min-height: 44px;
        font-size: .9rem;
    }
    .cm-sel, .cm-tag, .cm-chars { height: 36px; font-size: .9rem; }
    .cm-controls-row { flex-wrap: wrap; gap: 6px; }
    .cm-input { font-size: .85rem; }

    /* Overlay pannello personalizza appartamento */
    #ap-sezione { width: 100vw !important; }

    /* Funzioni e pannelli scheda-card */
    .fn-wrapper { padding: .5rem; }
    .fn-sezione { margin-bottom: .75rem; }

    /* Tabelle — scroll orizzontale su mobile */
    .tabella-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tabella { min-width: 480px; }

    /* Griglia scheda personaggio */
    .sc-top { flex-direction: column; }
    .sc-right { max-width: 100%; min-width: 0; width: 100%; }
    .sc-left  { max-width: 100%; width: 100%; }

    /* Griglia staff appartamenti */
    .ap-edit-grid { grid-template-columns: 1fr !important; }

    /* Pannelli form — singola colonna */
    .form-gruppo + .form-gruppo { margin-top: .5rem; }
}

/* Touch target minimo globale per tutti i button/link interattivi */
@media (hover: none) and (pointer: coarse) {
    .btn, button, a.btn,
    .fn-voce, .bm-btn {
        min-height: 44px;
    }
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="datetime-local"],
    select, textarea {
        font-size: 16px; /* evita auto-zoom iOS */
        min-height: 40px;
    }
}

/* ── Navigazione ───────────────────────────────────────── */

.navbar {
    background: #0e0e0e;
    border-bottom: 1px solid #1e2a30;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.navbar .contenitore {
    display: flex;
    align-items: center;
    height: 56px;
    gap: 1.5rem;
}

.navbar-logo {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    color: #c8f1ff;
    font-weight: bold;
    letter-spacing: 0.08em;
    flex-shrink: 0;
    text-shadow: 0 0 18px rgba(107, 154, 172, 0.5);
}

.navbar-logo:hover { color: #ffffff; }

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    list-style: none;
}

.navbar-nav a {
    color: #5a7a8a;
    padding: 0.35rem 0.75rem;
    border-radius: var(--raggio);
    font-size: 0.9rem;
    transition: color var(--transizione), background var(--transizione);
}

.navbar-nav a:hover,
.navbar-nav a.attivo {
    color: #c8f1ff;
    background: rgba(107, 154, 172, 0.12);
}

.navbar-destra {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
}

.navbar-personaggio {
    font-size: 0.85rem;
    color: #6b9aac;
    font-family: var(--font-mono);
}

/* ── Pannelli e card ───────────────────────────────────── */
/*
   Gerarchia sfondo:
   Livello 0 — body: var(--sfondo) + net.gif
   Livello 1 — macrocontenitore: .panel  rgba(20,20,20,0.55)
   Livello 2 — microcontenitore: .card   rgba(0,0,0,0.25)
*/

.panel {
    background: rgba(20,20,20,0.55);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.25rem;
}

.panel-titolo {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--verde);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bordo);
}

.card {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--raggio);
    padding: 1rem;
    transition: border-color var(--transizione);
}

.card:hover { border-color: var(--verde-scuro); }

.card-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* Testo libero dentro un panel o card */
.testo-sezione {
    font-size: 0.88rem;
    color: var(--testo);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.7;
}

/* ── Form ──────────────────────────────────────────────── */

.form-gruppo {
    margin-bottom: 1rem;
}

.form-gruppo label {
    display: block;
    font-size: 0.85rem;
    color: var(--testo-muted);
    margin-bottom: 0.3rem;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}

.form-gruppo input,
.form-gruppo select,
.form-gruppo textarea {
    width: 100%;
    background: var(--sfondo-input);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    color: var(--testo-bianco);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    padding: 0.55rem 0.75rem;
    transition: border-color var(--transizione), box-shadow var(--transizione);
    outline: none;
}

.form-gruppo input:focus,
.form-gruppo select:focus,
.form-gruppo textarea:focus {
    border-color: var(--verde-scuro);
    box-shadow: 0 0 0 2px var(--bordo-accent);
}

.form-gruppo textarea {
    resize: vertical;
    min-height: 100px;
}

/* ── Pulsanti ──────────────────────────────────────────── */

/* ── Pulsanti — Pill Tech ──────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.1rem;
    border: 1px solid rgba(51,204,51,0.5);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background: #111a12;
    color: #33cc33;
    box-shadow: 0 0 10px rgba(51,204,51,0.12);
    transition: background var(--transizione), border-color var(--transizione),
                box-shadow var(--transizione), color var(--transizione);
}

.btn:hover:not(:disabled) {
    background: #162018;
    border-color: #55ee55;
    color: #77ff88;
    box-shadow: 0 0 18px rgba(51,204,51,0.35);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-primario {
    border-color: var(--verde);
    box-shadow: 0 0 14px rgba(51,204,51,0.22);
}
.btn-primario:hover:not(:disabled) {
    box-shadow: 0 0 24px rgba(51,204,51,0.5);
}

.btn-secondario {
    border-color: rgba(51,204,51,0.25);
    color: var(--testo-muted);
    box-shadow: none;
}
.btn-secondario:hover:not(:disabled) {
    border-color: rgba(51,204,51,0.55);
    color: var(--verde);
    box-shadow: 0 0 10px rgba(51,204,51,0.15);
}

.btn-pericolo {
    border-color: rgba(204,51,51,0.5);
    color: var(--rosso);
    box-shadow: 0 0 10px rgba(204,51,51,0.12);
}
.btn-pericolo:hover:not(:disabled) {
    background: #1a0c0c;
    border-color: #ff5555;
    color: #ff7777;
    box-shadow: 0 0 18px rgba(204,51,51,0.35);
}

.btn-piccolo {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
}

.btn-grande {
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
}

.btn-blocco {
    width: 100%;
    justify-content: center;
}

/* Pulsanti OAuth con colori dei provider */
.btn-oauth {
    background: var(--sfondo-card);
    border-color: var(--bordo);
    color: var(--testo);
    justify-content: center;
    padding: 0.65rem 1rem;
}

.btn-oauth:hover:not(:disabled) {
    border-color: var(--blu);
    color: var(--testo-bianco);
}

.btn-oauth-google:hover:not(:disabled)  { border-color: #dd4b39; color: #dd4b39; }
.btn-oauth-discord:hover:not(:disabled) { border-color: #5865f2; color: #5865f2; }
.btn-oauth-steam:hover:not(:disabled)   { border-color: #c6d4df; color: #c6d4df; }

/* ── Flash messages ────────────────────────────────────── */

.flash-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.flash {
    padding: 0.65rem 1rem;
    border-radius: var(--raggio);
    border-left: 3px solid;
    font-size: 0.9rem;
}

.flash-successo {
    background: rgba(51, 204, 51, 0.08);
    border-color: var(--verde);
    color: var(--verde);
}

.flash-errore {
    background: rgba(204, 51, 51, 0.1);
    border-color: var(--rosso);
    color: #ff6666;
}

.flash-avviso {
    background: rgba(204, 170, 34, 0.1);
    border-color: var(--giallo);
    color: #ddbb44;
}

.flash-info {
    background: rgba(107, 154, 172, 0.1);
    border-color: var(--blu);
    color: var(--blu-hover);
}

/* ── Tabelle ───────────────────────────────────────────── */

.tabella-wrapper {
    overflow-x: auto;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

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

thead th {
    background: var(--sfondo-panel);
    color: var(--testo-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.65rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--bordo);
}

tbody td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--bordo);
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover { background: rgba(51, 204, 51, 0.03); }

/* ── Barra statistiche personaggio ────────────────────── */

.stat-barra {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.stat-etichetta {
    width: 120px;
    font-size: 0.8rem;
    color: var(--testo-muted);
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.stat-pista {
    flex: 1;
    background: var(--bordo);
    border-radius: 2px;
    height: 6px;
    overflow: hidden;
}

.stat-riempimento {
    height: 100%;
    background: linear-gradient(90deg, var(--verde-scuro), var(--verde));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.stat-valore {
    width: 36px;
    text-align: right;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    color: var(--testo-bianco);
    flex-shrink: 0;
}

/* ── Indicatori ferite ─────────────────────────────────── */

.ferite-illeso   { color: var(--verde); }
.ferite-lieve    { color: #88cc44; }
.ferite-media    { color: var(--giallo); }
.ferite-grave    { color: #cc7722; }
.ferite-critica  { color: var(--rosso); }
.ferite-morto    { color: var(--testo-muted); text-decoration: line-through; }

/* ── Badge ─────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 0.15em 0.55em;
    border-radius: 2px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    border: 1px solid;
}

.badge-verde   { color: var(--verde);   border-color: var(--verde-scuro);  background: rgba(51,204,51,0.08); }
.badge-blu     { color: var(--blu);     border-color: var(--blu-scuro);    background: rgba(107,154,172,0.08); }
.badge-rosso   { color: var(--rosso);   border-color: #881111;             background: rgba(204,51,51,0.08); }
.badge-muted   { color: var(--testo-muted); border-color: var(--bordo);    background: transparent; }

/* ── Etichetta sezione (pill) ───────────────────────────── */

.sc-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(107,154,172,0.55); border-radius: 999px;
    font-family: var(--font-mono); font-size: 9px; font-weight: bold;
    letter-spacing: 0.12em; text-transform: uppercase;
    background: rgba(0,0,0,0.35); color: orange; align-self: flex-start;
    margin: 0 0 6px 0;
}
.sc-pill::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #33cc33; box-shadow: 0 0 6px #33cc33; flex-shrink: 0;
}

/* ── Box madre scheda (livello macro) ──────────────────── */

/* Azzera il padding dei wrapper quando la pagina usa scheda-card (pagine iframe) */
.principale:has(.scheda-card),
.contenitore:has(.scheda-card) {
    padding: 0;
    max-width: 100%;
}

.scheda-card {
    background: rgba(20,20,20,0.55);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 14px;
    margin: 10px;
    min-height: calc(100vh - 20px);
    box-sizing: border-box;
}

/* ── Footer ────────────────────────────────────────────── */

.footer {
    background: var(--sfondo-panel);
    border-top: 1px solid var(--bordo);
    padding: 1rem 0;
    margin-top: auto;
    font-size: 0.8rem;
    color: var(--testo-muted);
    text-align: center;
    font-family: var(--font-mono);
}

/* ── Pagina login ──────────────────────────────────────── */

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

.login-box {
    width: 100%;
    max-width: 400px;
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo h1 {
    font-size: 2.2rem;
    color: var(--verde);
    text-shadow: 0 0 20px rgba(51, 204, 51, 0.5);
    letter-spacing: 0.15em;
}

.login-logo p {
    color: var(--testo-muted);
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.login-separatore {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--testo-muted);
    font-size: 0.8rem;
}

.login-separatore::before,
.login-separatore::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bordo);
}

.oauth-griglia {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Scelta personaggio ────────────────────────────────── */

.personaggio-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.personaggio-slot {
    background: var(--sfondo-card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.25rem;
    text-align: center;
    transition: border-color var(--transizione), box-shadow var(--transizione);
    cursor: pointer;
}

.personaggio-slot:hover {
    border-color: var(--verde-scuro);
    box-shadow: 0 0 16px rgba(51, 204, 51, 0.12);
}

.personaggio-slot.slot-vuoto {
    border-style: dashed;
    color: var(--testo-muted);
}

.personaggio-nome {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    color: var(--testo-bianco);
    margin-bottom: 0.35rem;
}

.personaggio-stato {
    font-size: 0.8rem;
    color: var(--testo-muted);
}

/* ── Sidebar di gioco ──────────────────────────────────── */

.sidebar-nav {
    list-style: none;
}

.sidebar-nav li + li {
    margin-top: 0.2rem;
}

.sidebar-nav a {
    display: block;
    padding: 0.45rem 0.75rem;
    border-radius: var(--raggio);
    color: var(--testo-muted);
    font-size: 0.9rem;
    transition: color var(--transizione), background var(--transizione);
}

.sidebar-nav a:hover,
.sidebar-nav a.attivo {
    color: var(--verde);
    background: rgba(51, 204, 51, 0.06);
}

.sidebar-sezione {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--testo-muted);
    padding: 0.75rem 0.75rem 0.3rem;
}

/* ── Utility ───────────────────────────────────────────── */

.testo-verde  { color: var(--verde); }
.testo-blu    { color: var(--blu); }
.testo-rosso  { color: var(--rosso); }
.testo-muted  { color: var(--testo-muted); }
.testo-mono   { font-family: var(--font-mono); }
.testo-centro { text-align: center; }
.testo-destra { text-align: right; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.flex         { display: flex; }
.flex-centro  { display: flex; align-items: center; }
.gap-1        { gap: 0.5rem; }
.gap-2        { gap: 1rem; }
.spazio       { flex: 1; }

.separatore {
    border: none;
    border-top: 1px solid var(--bordo);
    margin: 1.25rem 0;
}

/* Linea verde decorativa stile cyberpunk */
.linea-accento {
    height: 1px;
    background: linear-gradient(90deg, var(--verde), transparent);
    margin: 1.25rem 0;
}

/* ── Layout di gioco con sidebar persistente ────────────── */

.game-wrap {
    display: grid;
    grid-template-columns: 210px 1fr;
    flex: 1;
    align-items: start;
    min-height: 100vh;
}

.menu-sx {
    background: var(--sfondo-panel);
    border-right: 1px solid var(--bordo-accent);
    border: 1px solid var(--bordo-accent);
    border-radius: 8px;
    margin: 10px 0 10px 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    position: sticky;
    top: 10px;
    height: calc(100vh - 20px);
}

.menu-sx-inner {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(51, 204, 51, 0.15) transparent;
}

.gioco-corpo {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── App shell ─────────────────────────────────────────── */

/* La shell è fixed: copre tutto il viewport, bypassa la catena body→main→contenitore */
body:has(.shell) {
    overflow: hidden;
}

.shell {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    grid-template-rows: 56px 1fr 30px;
    transition: grid-template-rows 0.25s ease;
    overflow: hidden;
    background-color: var(--sfondo);
    background-image: url('../img/net.gif');
    background-repeat: repeat;
    /* Safe area PWA: sposta il contenuto sotto status bar e sopra home indicator */
    padding-top:    env(safe-area-inset-top,    0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left:   env(safe-area-inset-left,   0px);
    padding-right:  env(safe-area-inset-right,  0px);
}

/* Header superiore — riga unica */
.shell-header {
    display: flex;
    align-items: center;
    background: var(--sfondo-panel);
    border-bottom: 1px solid var(--bordo-accent);
    padding: 0 0.8rem;
    height: 56px;
    gap: 0.8rem;
    overflow: hidden;
    flex-shrink: 0;
}

/* Footer inferiore — ticker news */
.shell-footer {
    display: flex;
    align-items: center;
    background: var(--sfondo-panel);
    border-top: 1px solid var(--bordo-accent);
    padding: 0;
    height: 30px;
    overflow: hidden;
    flex-shrink: 0;
}
.shell-ticker {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.shell-ticker-label {
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #3399cc;
    background: rgba(51,153,204,.1);
    border-right: 1px solid rgba(51,153,204,.25);
    white-space: nowrap;
}
.shell-ticker-track {
    overflow: hidden;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
}
.shell-ticker-inner {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: ticker-scroll linear infinite;
    will-change: transform;
}
.shell-ticker-inner:hover { animation-play-state: paused; }
.shell-ticker-voce {
    padding: 0 0.9rem;
    font-size: 0.71rem;
    color: #c9d1d9;
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}
.shell-ticker-voce:hover { color: #3399cc; }
.shell-ticker-sep {
    color: #30363d;
    font-size: 0.7rem;
    flex-shrink: 0;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.shell-ticker-toggle {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 301;
    width: 32px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d1117;
    border: none;
    border-left: 1px solid rgba(51,153,204,.3);
    border-top: 1px solid rgba(51,153,204,.3);
    color: #3399cc;
    cursor: pointer;
    font-size: 0.6rem;
    transition: background 0.15s, height 0.25s, border-radius 0.25s;
    line-height: 1;
}
.shell-ticker-toggle:hover { background: rgba(51,153,204,.12); }
.shell-ticker-toggle--chiuso {
    height: 18px;
    border-radius: 5px 0 0 0;
}

.shell-header-brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--verde);
    text-transform: uppercase;
    white-space: nowrap;
    padding-right: 0.8rem;
    border-right: 1px solid var(--bordo);
}

.shell-brand-ico {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Identità PG */
.shell-header-pg {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.pg-simbolo {
    max-height: 28px;
    max-width: 28px;
    width: auto;
    height: auto;
    flex-shrink: 0;
    opacity: .9;
}

.pg-info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.shell-header-pg .pg-nome {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--verde);
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.pg-lv {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: rgba(51,204,51,.55);
    font-weight: normal;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.pg-datetime {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    white-space: nowrap;
}

.shell-header-pg .pg-data,
.shell-header-pg .pg-ora {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: rgba(51, 204, 51, 0.55);
    letter-spacing: 0.03em;
    text-align: left;
    margin: 0;
    white-space: nowrap;
}

/* Navigazione — occupa lo spazio centrale */
.shell-header-nav {
    display: flex;
    align-items: stretch;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    height: 100%;
    border-left: 1px solid var(--bordo);
}

.shell-header-nav a {
    font-family: var(--font-mono);
    font-size: 0.67rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(51, 204, 51, 0.55);
    text-decoration: none;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--bordo);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.shell-header-nav a:hover {
    color: #0a0a0a;
    background: rgba(51, 204, 51, 0.82);
}

.shell-header-nav a.disabilitato {
    opacity: 0.22;
    pointer-events: none;
    cursor: default;
}

/* Sistema */
.shell-header-sistema {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-left: 0.8rem;
    border-left: 1px solid var(--bordo);
    white-space: nowrap;
}

.shell-header-sistema .shell-sistema-riga {
    display: inline;
    width: auto;
    margin: 0;
    white-space: nowrap;
}

/* Corpo: solo iframe, niente sidebar */
.shell-body {
    overflow: hidden;
    min-height: 0;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
}

/* Sidebar sinistra */
.shell-aside {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.4rem 0.35rem;
}

/* Box nella sidebar — macrobox con sfondo dedicato */
.shell-box {
    padding: 0.75rem 0.8rem;
    background: rgba(20, 20, 20, 0.62);
    border: 1px solid rgba(51, 204, 51, 0.15);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Area menu occupa lo spazio disponibile */
.shell-box-menu {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}

.shell-box-titolo {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(51, 204, 51, 0.28);
    margin-bottom: 0.5rem;
    align-self: flex-start;
}

/* Pulsanti di navigazione CP */
.shell-btn {
    display: block;
    width: 100%;
    padding: 0.3rem 0.4rem;
    margin-bottom: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.67rem;
    color: rgba(51, 204, 51, 0.6);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(51, 204, 51, 0.03);
    border: 1px solid rgba(51, 204, 51, 0.18);
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.shell-btn:hover {
    color: #0a0a0a;
    background: rgba(51, 204, 51, 0.85);
    border-color: var(--verde);
    box-shadow: 0 0 8px rgba(51, 204, 51, 0.3);
}

.shell-btn.disabilitato {
    opacity: 0.2;
    pointer-events: none;
    cursor: default;
}

/* Box sistema (in fondo) */
.shell-box-sistema { margin-top: 0; }

.shell-sistema-riga {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: rgba(51, 204, 51, 0.45);
    width: 100%;
    margin-bottom: 0.15rem;
}

.shell-sistema-riga span { color: var(--verde); }

/* Wrapper area centrale (iframe + overlay scheda) */
.shell-centro {
    position: relative;
    overflow: hidden;
    min-width: 0;
    flex: 1;
    min-height: 0;
}

/* iframe centrale */
#frame-centrale {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: var(--sfondo);
}

/* ── Overlay scheda ────────────────────────────────────── */

.scheda-overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.scheda-overlay--visibile {
    opacity: 1;
    pointer-events: all;
}

.scheda-panel-outer {
    --cut: 22px;
    width: min(860px, 92vw);
    height: min(680px, 88vh);
    padding: 1px;
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
    background: rgba(51,204,51,0.45);
    box-shadow: 0 0 22px rgba(51,204,51,0.22), 0 0 70px rgba(51,204,51,0.08);
    transform: translateY(12px);
    transition: transform 0.25s ease;
}

.scheda-overlay--visibile .scheda-panel-outer {
    transform: translateY(0);
}

.scheda-panel {
    width: 100%;
    height: 100%;
    background: var(--sfondo-panel);
    border: none;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


.scheda-iframe {
    width: 100%;
    flex: 1;
    border: none;
    display: block;
}

/* ── Header pagine di gioco ────────────────────────────── */
.dash-header {
    width: 100%;
    height: 34px;
    background: #111416;
    border-bottom: 1px solid rgba(51, 204, 51, 0.3);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.dash-header-ticker {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.dash-header-ticker span {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--verde);
    animation: ticker-scorrimento 20s linear infinite;
}

@keyframes ticker-scorrimento {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}


.pg-btn-esci {
    display: inline-block;
    padding: 0.25rem 1.4rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    color: rgba(204, 51, 51, 0.65);
    background: transparent;
    border: 1px solid rgba(204, 51, 51, 0.25);
    border-radius: 3px;
    text-decoration: none;
    transition: color var(--transizione), border-color var(--transizione);
}

.pg-btn-esci:hover {
    color: #ff4444;
    border-color: rgba(204, 51, 51, 0.65);
}

.pg-btn-cambia {
    display: inline-block;
    padding: 0.25rem 1.1rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    color: rgba(153, 153, 153, 0.75);
    border: 1px solid rgba(100, 100, 100, 0.25);
    border-radius: 3px;
    text-decoration: none;
    transition: color var(--transizione), border-color var(--transizione);
}

.pg-btn-cambia:hover {
    color: #cccccc;
    border-color: rgba(150, 150, 150, 0.65);
}

/* ── Sezioni interne al menu laterale ──────────────────── */
.msec-box {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid rgba(51, 204, 51, 0.1);
}

.msec-box:last-child {
    border-bottom: none;
}

.msec-pg-nome {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: bold;
    color: var(--verde);
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msec-pg-data {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(51, 204, 51, 0.55);
    letter-spacing: 0.03em;
    margin-bottom: 0.65rem;
    white-space: nowrap;
}

.msec-btn-esci {
    display: block;
    width: 100%;
    padding: 0.28rem 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: rgba(204, 51, 51, 0.65);
    background: transparent;
    border: 1px solid rgba(204, 51, 51, 0.25);
    border-radius: 3px;
    text-decoration: none;
    transition: color var(--transizione), border-color var(--transizione);
}

.msec-btn-esci:hover {
    color: #ff4444;
    border-color: rgba(204, 51, 51, 0.65);
}

/* Sezione identità */
.msec-identita {
    padding: 0.85rem 0.9rem 0.75rem;
    border-bottom: 1px solid rgba(51, 204, 51, 0.09);
}

.msec-nome {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--verde);
    text-shadow: 0 0 10px rgba(51, 204, 51, 0.4);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msec-orologio {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: rgba(51, 204, 51, 0.45);
    letter-spacing: 0.04em;
    margin-bottom: 0.55rem;
}

.msec-btn-riga {
    display: flex;
    gap: 0.35rem;
}

.msec-btn {
    flex: 1;
    padding: 0.22rem 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-align: center;
    border: 1px solid rgba(51, 204, 51, 0.22);
    border-radius: 2px;
    color: rgba(51, 204, 51, 0.6);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: all var(--transizione);
    display: inline-block;
}

.msec-btn:hover {
    border-color: var(--verde);
    color: var(--verde);
    background: rgba(51, 204, 51, 0.07);
}

.msec-btn.occupato {
    border-color: rgba(204, 170, 34, 0.4);
    color: rgba(204, 170, 34, 0.7);
}

/* Sezioni menu */
.msec {
    border-bottom: 1px solid rgba(51, 204, 51, 0.07);
    padding: 0.45rem 0;
}

.msec-titolo {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(51, 204, 51, 0.28);
    padding: 0.35rem 0.9rem 0.15rem;
}

.ml {
    display: block;
    padding: 0.28rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: #4a7a58;
    transition: color var(--transizione), background var(--transizione);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ml:hover, .ml.attivo {
    color: var(--verde);
    background: rgba(51, 204, 51, 0.055);
}

.ml-dim {
    color: #2e4a38;
    font-size: 0.73rem;
}

.ml-dim:hover { color: #4a7a58; background: none; }

/* Sezione sistema */
.msec-sistema {
    margin-top: auto;
    padding: 0.65rem 0.9rem;
    border-top: 1px solid rgba(51, 204, 51, 0.08);
    font-family: var(--font-mono);
}

.msec-sistema-label {
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(51, 204, 51, 0.28);
    margin-bottom: 0.3rem;
}

.msec-sistema-riga {
    font-size: 0.7rem;
    color: rgba(51, 204, 51, 0.55);
    margin-bottom: 0.15rem;
}

.msec-sistema-riga span { color: var(--verde); }

/* ── Portone cyberpunk ─────────────────────────────────── */
.cg-curtain {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    overflow: hidden;
}
.cg-anta {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    background: #050808;
    overflow: hidden;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.cg-anta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -55deg,
        transparent 0,
        transparent 14px,
        rgba(51, 204, 51, 0.05) 14px,
        rgba(51, 204, 51, 0.05) 16px
    );
}
.cg-anta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.22) 0px,
        rgba(0, 0, 0, 0.22) 1px,
        transparent 1px,
        transparent 3px
    );
}
.cg-anta-top {
    top: 0;
}
.cg-anta-bot {
    bottom: 0;
}

/* Stato iniziale: portone chiuso (copre tutto) */
.cg-curtain .cg-anta-top { transform: translateY(0); }
.cg-curtain .cg-anta-bot { transform: translateY(0); }

/* Portone aperto: ante fuori schermo */
.cg-curtain.cg-aperto .cg-anta-top { transform: translateY(-100%); }
.cg-curtain.cg-aperto .cg-anta-bot { transform: translateY(100%); }

/* Sbattuta veloce in chiusura */
.cg-curtain.cg-sbatti .cg-anta {
    transition: transform 0.22s cubic-bezier(0.55, 0, 1, 0.45);
}
.cg-curtain.cg-sbatti .cg-anta-top { transform: translateY(0); }

/* ── Pagina Online ──────────────────────────────────────── */
.ol-intestazione {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ol-sort {
    display: flex;
    gap: 0.35rem;
}

.ol-sort-link {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(51, 204, 51, 0.4);
    text-decoration: none;
    padding: 0.18rem 0.5rem;
    border: 1px solid rgba(51, 204, 51, 0.14);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.ol-sort-link:hover,
.ol-sort-link--attivo {
    color: var(--verde);
    background: rgba(51, 204, 51, 0.07);
    border-color: rgba(51, 204, 51, 0.35);
}

.ol-btn-chiudi {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: rgba(204, 68, 51, 0.6);
    text-decoration: none;
    padding: 0.15rem 0.45rem;
    border: 1px solid rgba(204, 68, 51, 0.25);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.ol-btn-chiudi:hover {
    color: #ff4444;
    border-color: rgba(204, 68, 51, 0.6);
    background: rgba(204, 68, 51, 0.08);
}

.ol-vuoto {
    color: #444;
    font-style: italic;
    font-size: 0.88rem;
    padding: 1rem 0;
}

.ol-tabella {
    width: 100%;
    border-collapse: collapse;
}

.ol-tabella th {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(51, 204, 51, 0.3);
    border-bottom: 1px solid rgba(51, 204, 51, 0.12);
    padding: 0.3rem 0.5rem;
    text-align: left;
    font-weight: normal;
}

.ol-tabella tbody tr {
    border-bottom: 1px solid rgba(51, 204, 51, 0.05);
    transition: background 0.1s;
}

.ol-tabella tbody tr:hover {
    background: rgba(51, 204, 51, 0.04);
}

.ol-simb {
    display: inline-block;
    vertical-align: middle;
    max-height: 20px;
    max-width: 20px;
    width: auto;
    height: auto;
    margin-right: 5px;
    opacity: 0.9;
    flex-shrink: 0;
}

.ol-simb-link,
.cm-simb-link {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.ol-simb-link:hover,
.cm-simb-link:hover {
    opacity: 1;
}
.ol-simb-link .ol-simb,
.cm-simb-link .cm-simb {
    margin-right: 0;
}

.ol-nome {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: rgba(51, 204, 51, 0.8);
    padding: 0.38rem 0.5rem;
}

.ol-luogo {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(51, 204, 51, 0.45);
    padding: 0.38rem 0.5rem;
}

.ol-luogo-link {
    color: rgba(51, 204, 51, 0.65);
    text-decoration: none;
}
.ol-luogo-link:hover {
    color: #33cc33;
    text-decoration: underline;
}

.ol-status-cell {
    text-align: center;
    padding: 0.38rem 0.5rem;
}

.ol-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ol-dot--libero {
    background: #33cc33;
    box-shadow: 0 0 6px rgba(51, 204, 51, 0.7);
}

.ol-dot--impegnato {
    background: #cc4433;
    box-shadow: 0 0 6px rgba(204, 68, 51, 0.7);
}

.ol-nome-mail {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(51, 204, 51, 0.3);
    transition: color 0.15s, border-color 0.15s;
}

.ol-nome-mail:hover {
    color: var(--verde);
    border-color: var(--verde);
}

.ol-mail-ico {
    font-size: 0.72em;
    opacity: 0.45;
    margin-right: 0.25em;
    transition: opacity 0.15s;
}

.ol-nome-mail:hover .ol-mail-ico {
    opacity: 1;
}

.ol-corp {
    padding: 0.38rem 0.3rem;
    text-align: center;
}

.ol-corp-simb {
    font-size: 0.75rem;
    color: rgba(51, 204, 51, 0.3);
}

.ol-ip {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: rgba(51, 204, 51, 0.3);
    padding: 0.38rem 0.5rem;
    white-space: nowrap;
}

.ol-livello {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(51, 204, 51, 0.55);
    text-align: center;
    padding: 0.38rem 0.5rem;
}

/* ── Badge notifica nav ─────────────────────────────────── */
.nav-badge {
    display: none;
    background: #cc3322;
    color: #fff;
    font-size: 0.55rem;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 0 4px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.5;
}

/* ── CrioMail ───────────────────────────────────────────── */
.cm-intestazione {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cm-badge {
    display: inline-block;
    background: #cc3322;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.6;
}

.cm-tabs {
    display: flex;
    gap: 0.3rem;
}

.cm-tab {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(51, 204, 51, 0.45);
    text-decoration: none;
    padding: 0.18rem 0.55rem;
    border: 1px solid rgba(51, 204, 51, 0.14);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.cm-tab:hover,
.cm-tab--attiva {
    color: var(--verde);
    background: rgba(51, 204, 51, 0.07);
    border-color: rgba(51, 204, 51, 0.35);
}

.cm-btn-scrivi {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(51, 204, 51, 0.7);
    text-decoration: none;
    padding: 0.18rem 0.6rem;
    border: 1px solid rgba(51, 204, 51, 0.3);
    transition: color 0.15s, background 0.15s;
}

.cm-btn-scrivi:hover {
    color: #0a0a0a;
    background: rgba(51, 204, 51, 0.82);
    border-color: var(--verde);
}

.cm-btn-scrivi--rosso {
    color: rgba(204, 68, 51, 0.7);
    border-color: rgba(204, 68, 51, 0.3);
}

.cm-btn-scrivi--rosso:hover {
    color: #fff;
    background: rgba(204, 68, 51, 0.7);
    border-color: #cc4433;
}

.cm-btn-back {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: rgba(51, 204, 51, 0.5);
    text-decoration: none;
    transition: color 0.15s;
}

.cm-btn-back:hover { color: var(--verde); }

.cm-tabella .cm-nonletto td { color: var(--verde); font-weight: 700; }

.cm-titolo { font-family: var(--font-mono); font-size: 0.78rem; padding: 0.38rem 0.5rem; }

.cm-link-leggi {
    color: inherit;
    text-decoration: none;
}
.cm-link-leggi:hover { color: var(--verde); text-decoration: underline; }

/* ── Funzioni ──────────────────────────────────────────────────────────────── */

.fn-wrapper {
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fn-sezione {
    background: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(51, 204, 51, 0.12);
    border-radius: 4px;
    overflow: hidden;
}

.fn-sezione-testa {
    background: rgba(51, 204, 51, 0.05);
    border-bottom: 1px solid rgba(51, 204, 51, 0.1);
    padding: 0.28rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    color: rgba(51, 204, 51, 0.45);
    text-transform: uppercase;
}

.fn-lista {
    padding: 0.2rem 0;
}

.fn-voce {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: rgba(51, 204, 51, 0.7);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
    border-bottom: 1px solid rgba(51, 204, 51, 0.04);
}

.fn-voce:last-child { border-bottom: none; }

a.fn-voce:hover {
    background: rgba(51, 204, 51, 0.06);
    color: var(--verde);
}

.fn-voce--disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.fn-voce--status {
    cursor: default;
}

.fn-ico {
    width: 1.1em;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.8em;
}

.fn-wip {
    margin-left: auto;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: rgba(51, 204, 51, 0.3);
    border: 1px solid rgba(51, 204, 51, 0.18);
    border-radius: 2px;
    padding: 0.05em 0.35em;
}

.fn-disp-toggle {
    padding: 0.15rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    border-radius: 2px;
    cursor: pointer;
    background: transparent;
    transition: background 0.15s, color 0.15s;
}

.fn-disp-toggle--libero {
    color: rgba(51, 204, 51, 0.8);
    border: 1px solid rgba(51, 204, 51, 0.35);
}

.fn-disp-toggle--libero:hover {
    background: rgba(51, 204, 51, 0.1);
    color: var(--verde);
}

.fn-disp-toggle--impegnato {
    color: rgba(204, 68, 51, 0.8);
    border: 1px solid rgba(204, 68, 51, 0.35);
}

.fn-disp-toggle--impegnato:hover {
    background: rgba(204, 68, 51, 0.1);
    color: #cc4433;
}

/* ── Admin — modifica abilità ──────────────────────────────────────────────── */

.adm-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.4rem 0.6rem;
}

.adm-griglia--abi {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.adm-campo {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.adm-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: rgba(51, 204, 51, 0.45);
    text-transform: uppercase;
}

.adm-input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(51, 204, 51, 0.2);
    border-radius: 3px;
    color: var(--verde);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 0.22rem 0.4rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.adm-input:focus {
    outline: none;
    border-color: rgba(51, 204, 51, 0.6);
}

.adm-input--abi {
    width: 3.5rem;
    text-align: center;
}

.adm-stat-gruppo {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    color: rgba(51, 204, 51, 0.35);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(51, 204, 51, 0.08);
}

/* ══ CORPORAZIONI ═══════════════════════════════════════════════════════════ */

.corp-msg {
    padding: 0.35rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    border-left: 2px solid;
}
.corp-msg--ok  { color: #33cc33; border-color: #33cc33; background: rgba(51,204,51,0.05); }
.corp-msg--err { color: #cc4433; border-color: #cc4433; background: rgba(204,68,51,0.05); }

/* Form */
.corp-form {
    padding: 0.8rem;
    border-bottom: 1px solid rgba(51,204,51,0.1);
}

.corp-form-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.corp-form-label-sec {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: rgba(51,204,51,0.35);
    text-transform: uppercase;
}

.corp-codice-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: #33cc33;
    background: rgba(51,204,51,0.1);
    border: 1px solid rgba(51,204,51,0.3);
    padding: 0.1rem 0.45rem;
    border-radius: 2px;
}
.corp-codice-badge--auto {
    color: rgba(51,204,51,0.4);
    border-color: rgba(51,204,51,0.12);
    background: transparent;
}

.corp-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.55rem 0.7rem;
    margin-bottom: 0.7rem;
}

.corp-field { display: flex; flex-direction: column; gap: 0.2rem; }
.corp-field--full { grid-column: 1 / -1; }

.corp-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: rgba(51,204,51,0.4);
    text-transform: uppercase;
}

.corp-input {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(51,204,51,0.2);
    border-radius: 2px;
    color: rgba(51,204,51,0.9);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.3rem 0.5rem;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.corp-input:focus {
    border-color: rgba(51,204,51,0.6);
    box-shadow: 0 0 0 2px rgba(51,204,51,0.08);
}
.corp-input--num { max-width: 8rem; }
.corp-select     { cursor: pointer; }
.corp-textarea   { resize: vertical; line-height: 1.5; }

/* Toggle switch */
.corp-toggle-wrap { padding-top: 0.25rem; }
.corp-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }

.corp-toggle-track {
    position: relative;
    width: 2.2rem;
    height: 1.1rem;
    background: rgba(51,204,51,0.1);
    border: 1px solid rgba(51,204,51,0.25);
    border-radius: 1rem;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
.corp-toggle input:checked ~ .corp-toggle-track {
    background: rgba(51,204,51,0.25);
    border-color: rgba(51,204,51,0.6);
}
.corp-toggle-thumb {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.7rem;
    height: 0.7rem;
    background: rgba(51,204,51,0.5);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.corp-toggle input { display: none; }
.corp-toggle input:checked ~ .corp-toggle-track .corp-toggle-thumb {
    transform: translateX(1.05rem);
    background: #33cc33;
}
.corp-toggle-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: rgba(51,204,51,0.7);
    letter-spacing: 0.05em;
}

/* Bottoni */
.corp-btn {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    border-radius: 2px;
    border: 1px solid;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}
.corp-btn--primary {
    background: rgba(51,204,51,0.12);
    border-color: rgba(51,204,51,0.45);
    color: #33cc33;
}
.corp-btn--primary:hover { background: rgba(51,204,51,0.22); border-color: #33cc33; }

.corp-btn--ghost {
    background: transparent;
    border-color: rgba(51,204,51,0.2);
    color: rgba(51,204,51,0.6);
}
.corp-btn--ghost:hover { background: rgba(51,204,51,0.08); color: #33cc33; }

.corp-btn--danger {
    background: transparent;
    border-color: rgba(204,68,51,0.3);
    color: rgba(204,68,51,0.7);
}
.corp-btn--danger:hover { background: rgba(204,68,51,0.1); border-color: #cc4433; color: #cc4433; }

.corp-btn--xs { padding: 0.15rem 0.45rem; font-size: 0.72rem; }

.corp-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Sezioni */
.corp-sezione {
    border-top: 1px solid rgba(51,204,51,0.08);
    padding: 0.6rem 0;
}
.corp-sezione-header {
    display: flex;
    align-items: center;
    padding: 0 0.8rem 0.5rem;
}

/* Cariche */
.corp-cariche-lista { margin-bottom: 0.4rem; }

.corp-carica-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.8rem;
    border-bottom: 1px solid rgba(51,204,51,0.05);
}
.corp-carica-row:hover { background: rgba(51,204,51,0.03); }

.corp-simbolo-preview {
    height: 22px;
    width: auto;
    flex-shrink: 0;
    opacity: 0.85;
    vertical-align: middle;
}
.corp-simbolo-vuoto {
    display: inline-block;
    width: 22px;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(51,204,51,0.2);
    flex-shrink: 0;
}

.corp-carica-grado {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(51,204,51,0.35);
    min-width: 1.2rem;
    text-align: center;
}
.corp-carica-nome {
    flex: 1;
    max-width: unset;
}

.corp-nuova-carica {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem 0.2rem;
}
.corp-nuova-carica .corp-carica-nome { flex: 1; }

/* Elenco corporazioni */
.corp-tipo-blocco { margin-bottom: 0.2rem; }

.corp-tipo-header {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tipo-color, #33cc33);
    opacity: 0.55;
    padding: 0.3rem 0.8rem 0.2rem;
    border-bottom: 1px solid rgba(51,204,51,0.06);
}

.corp-riga {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    border-left: 2px solid transparent;
    transition: border-color 0.12s, background 0.12s;
    border-bottom: 1px solid rgba(51,204,51,0.04);
}
.corp-riga:hover {
    border-left-color: var(--tipo-color, #33cc33);
    background: rgba(51,204,51,0.03);
}

.corp-riga-codice {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--tipo-color, #33cc33);
    opacity: 0.6;
    min-width: 1.8rem;
    text-align: center;
    background: rgba(51,204,51,0.06);
    border-radius: 2px;
    padding: 0.05rem 0.25rem;
}

.corp-riga-nome {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: rgba(51,204,51,0.9);
    flex: 1;
}
.corp-riga-nome--inattiva { opacity: 0.35; text-decoration: line-through; }

.corp-riga-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(51,204,51,0.35);
    white-space: nowrap;
}

.corp-stato-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.corp-stato-dot--on  { background: #33cc33; box-shadow: 0 0 4px rgba(51,204,51,0.7); }
.corp-stato-dot--off { background: rgba(51,204,51,0.15); }

.corp-riga-azioni { display: flex; gap: 0.25rem; }

.bb-toolbar {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.3rem;
}

.bb-btn {
    background: rgba(51, 204, 51, 0.08);
    border: 1px solid rgba(51, 204, 51, 0.25);
    color: rgba(51, 204, 51, 0.9);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.4;
}

.bb-btn:hover {
    background: rgba(51, 204, 51, 0.18);
    border-color: rgba(51, 204, 51, 0.5);
}

.adm-tabella {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

.adm-tabella th {
    text-align: left;
    color: rgba(51, 204, 51, 0.4);
    font-weight: normal;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.8rem;
    border-bottom: 1px solid rgba(51, 204, 51, 0.1);
}

.adm-tabella td {
    padding: 0.25rem 0.8rem;
    border-bottom: 1px solid rgba(51, 204, 51, 0.05);
    color: rgba(51, 204, 51, 0.85);
    vertical-align: middle;
}

.adm-tabella tr:hover td {
    background: rgba(51, 204, 51, 0.04);
}

.adm-gruppi-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    margin-bottom: 0.4rem;
}

.adm-gruppo-voce {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: rgba(51, 204, 51, 0.8);
    cursor: pointer;
}

.adm-gruppo-voce input[type="checkbox"] {
    accent-color: var(--verde);
    width: 0.9rem;
    height: 0.9rem;
    cursor: pointer;
}

.cm-azioni {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    white-space: nowrap;
}

.cm-btn-mini {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    color: rgba(51, 204, 51, 0.5);
    text-decoration: none;
    padding: 0.1rem 0.35rem;
    border: 1px solid rgba(51, 204, 51, 0.18);
    transition: color 0.15s, background 0.15s;
}

.cm-btn-mini:hover {
    color: #0a0a0a;
    background: rgba(51, 204, 51, 0.75);
}

.cm-btn-mini--rosso { color: rgba(204, 68, 51, 0.5); border-color: rgba(204, 68, 51, 0.2); }
.cm-btn-mini--rosso:hover { color: #fff; background: rgba(204, 68, 51, 0.65); }

/* Intestazione messaggio */
.cm-msg-header {
    background: rgba(51, 204, 51, 0.04);
    border: 1px solid rgba(51, 204, 51, 0.1);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cm-msg-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(51, 204, 51, 0.5);
}

.cm-meta-label { color: rgba(51, 204, 51, 0.3); margin-right: 0.4rem; }
.cm-meta-val   { color: rgba(51, 204, 51, 0.75); }

.cm-msg-oggetto {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--verde);
    font-weight: 700;
    margin-top: 0.3rem;
}

.cm-msg-corpo {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: rgba(51, 204, 51, 0.8);
    line-height: 1.65;
    padding: 0.5rem 0.2rem;
}

/* BBcode output */
.bb-quote {
    border-left: 2px solid rgba(51, 204, 51, 0.3);
    margin: 0.5rem 0;
    padding: 0.4rem 0.8rem;
    background: rgba(51, 204, 51, 0.04);
    color: rgba(51, 204, 51, 0.55);
    font-style: italic;
}

.bb-quote cite {
    display: block;
    font-size: 0.65rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(51, 204, 51, 0.35);
    margin-bottom: 0.25rem;
}

/* Form composizione */
.cm-form { display: flex; flex-direction: column; gap: 0.55rem; }

.cm-campo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cm-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(51, 204, 51, 0.35);
    white-space: nowrap;
    width: 60px;
    flex-shrink: 0;
}

.cm-input {
    flex: 1;
    background: rgba(51, 204, 51, 0.04);
    border: 1px solid rgba(51, 204, 51, 0.2);
    color: rgba(51, 204, 51, 0.85);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    outline: none;
    transition: border-color 0.15s;
}

.cm-input:focus { border-color: rgba(51, 204, 51, 0.5); }

.cm-bbtoolbar {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem 0;
}

.cm-bb {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(51, 204, 51, 0.6);
    background: rgba(51, 204, 51, 0.05);
    border: 1px solid rgba(51, 204, 51, 0.2);
    padding: 0.18rem 0.55rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.cm-bb:hover { color: #0a0a0a; background: rgba(51, 204, 51, 0.75); }
.cm-bb--u { text-decoration: underline; }

.cm-textarea {
    width: 100%;
    min-height: 180px;
    background: rgba(51, 204, 51, 0.03);
    border: 1px solid rgba(51, 204, 51, 0.18);
    color: rgba(51, 204, 51, 0.85);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.5rem;
    resize: vertical;
    outline: none;
    line-height: 1.55;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.cm-textarea:focus { border-color: rgba(51, 204, 51, 0.45); }
.cg-curtain.cg-sbatti .cg-anta-bot { transform: translateY(0); }