/* =========================================================================
   Pixel map di ledwall — solo quello che e' suo.

   ⚠ Barra, ispettore, pulsanti, elenco e foglio di stampa stanno in
   strumento.css, che questo foglio dà per caricato prima.
   ====================================================================== */

#disegno { display: block; touch-action: none; }

/* Il cursore dice cosa succede se si clicca, prima di cliccare. */
.foglio[data-modo=sposta] #disegno { cursor: grab; }
.foglio[data-modo=sposta] #disegno:active { cursor: grabbing; }
.foglio[data-modo=spegni] .cella,
.foglio[data-modo=porte]  .cella { cursor: crosshair; }

/* ------------------------------------------------------------- la tela */

.tela {
    fill: #05070C;
    stroke: rgba(255,255,255,.22);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.mezzo { stroke: rgba(47,224,198,.30); }
.terzo { stroke: rgba(255,255,255,.07); }

/* -------------------------------------------------------------- i muri */

.muro__bordo { fill: none; }

.muro--scelto .muro__bordo { filter: drop-shadow(0 0 6px currentColor); }
.muro--scelto .cella { fill-opacity: .3; }

.cella { cursor: default; }

/* Il buco voluto: si vede che c'e' e si puo' rimettere. */
.cella--spenta {
    fill: rgba(255,255,255,.02);
    stroke: rgba(255,255,255,.10);
    stroke-dasharray: 5 5;
}

.cella__numero {
    fill: rgba(255,255,255,.78);
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-weight: 600;
    pointer-events: none;
}

.cella__porta {
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-weight: 700;
    opacity: .9;
    pointer-events: none;
}

/*
 * ⚠ NIENTE font-size QUI DENTRO.
 *
 * La misura di queste scritte la mette il JavaScript sull'attributo, divisa
 * per lo zoom, cosi' restano leggibili uguali a ogni ingrandimento. Una
 * regola CSS con la misura scavalca l'attributo - il CSS vince sempre sugli
 * attributi di presentazione - e le targhe diventavano quattro pixel.
 */
.muro__targa {
    font-family: system-ui, sans-serif;
    font-weight: 600;
    pointer-events: none;
}

.muro__fuori {
    fill: #FFB05A;
    font-family: system-ui, sans-serif;
    font-weight: 600;
    pointer-events: none;
}

/* Il righello povero: le coordinate sotto il puntatore. */
.coordinate {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 5px 10px;
    border: 1px solid var(--riga);
    border-radius: 7px;
    background: rgba(8,11,17,.8);
    color: var(--tenue);
    font: 600 12px ui-monospace, monospace;
    pointer-events: none;
}

.barra__conti--male { color: #FFB05A; }

/* -------------------------------------------------------- l'ispettore */

/* I numeri grossi: sono il motivo per cui si apre questo strumento. */
.numeroni {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 12px 0;
    border: 1px solid var(--riga);
    border-radius: 10px;
    overflow: hidden;
    background: var(--riga);
}

.numeroni div { background: var(--scheda); padding: 9px 10px; }
.numeroni b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.numeroni span { display: block; font-size: 11px; color: var(--fioco); text-transform: uppercase; letter-spacing: .08em; }

.veloci { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.elenco-muri { display: flex; flex-direction: column; gap: 6px; }

.riga-muro {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--riga);
    border-left: 3px solid var(--fioco);
    border-radius: 8px;
    background: var(--scheda);
    color: var(--testo);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.riga-muro:hover { border-color: var(--fioco); }
.riga-muro strong { display: block; font-size: 14px; }
.riga-muro small { color: var(--fioco); font-size: 12px; }

.tinte { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.tinta {
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}

.tinta--scelta { border-color: var(--testo); }

.tabellina { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 10px; }
.tabellina th {
    text-align: left;
    padding: 4px 6px;
    border-bottom: 1px solid var(--riga);
    color: var(--fioco);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.tabellina td { padding: 4px 6px; border-bottom: 1px solid var(--riga); font-variant-numeric: tabular-nums; }
.tabellina tr.oltre td { color: #FFB3AC; background: rgba(255,90,78,.08); }
.tabellina i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }

/* =========================================================================
   LA STAMPA
   ====================================================================== */

.stampa .muro-foglio { break-inside: avoid; page-break-inside: avoid; margin-bottom: 8mm; }

.stampa .schedina {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8mm;
    margin: 0 0 3mm;
    padding: 2mm 0;
    border-top: .5pt solid #bbb;
    border-bottom: .5pt solid #bbb;
    font-size: 10pt;
}

.stampa .schedina b { font-family: ui-monospace, monospace; }
.stampa .schedina span { color: #555; }

.stampa tr.oltre td { background: #ffecec; }

.stampa .avverte-stampa {
    margin: 3mm 0;
    padding: 2mm 3mm;
    border-left: 1mm solid #d33;
    background: #fff3f3;
    font-size: 10.5pt;
}

.stampa .porta-pallino { display: inline-block; width: 3mm; height: 3mm; border-radius: 1mm; margin-right: 1.5mm; vertical-align: -.3mm; }