/* Tema fantasy globale. Mantiene separati layout e logica dell'app. */
:root {
    --fantasy-ink: #211b17;
    --fantasy-ink-soft: #4e4337;
    --fantasy-oxblood: #501416;
    --fantasy-oxblood-light: #762124;
    --fantasy-forest: #20382f;
    --fantasy-forest-light: #315345;
    --fantasy-bronze: #9b6d2c;
    --fantasy-gold: #d0a94f;
    --fantasy-gold-light: #ead089;
    --fantasy-parchment: #eadcbb;
    --fantasy-parchment-light: #fbf4df;
    --fantasy-parchment-deep: #d8c39b;
    --fantasy-shadow: rgba(14, 12, 10, 0.42);
    --fantasy-line: rgba(85, 55, 27, 0.42);
    --fantasy-danger: #8b2023;
}

html {
    background: #151a18;
}

body {
    color: var(--fantasy-ink);
    background-color: #19201d;
    background-image:
        linear-gradient(90deg, rgba(208, 169, 79, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(208, 169, 79, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, #111714 0%, #253128 48%, #161c19 100%);
    background-size: 28px 28px, 28px 28px, 100% 100%;
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    border: 10px solid rgba(6, 9, 8, 0.32);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.58);
}

::selection {
    color: var(--fantasy-parchment-light);
    background: var(--fantasy-oxblood-light);
}

* {
    scrollbar-color: var(--fantasy-bronze) rgba(54, 43, 31, 0.14);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: rgba(54, 43, 31, 0.12);
}

*::-webkit-scrollbar-thumb {
    border: 2px solid rgba(251, 244, 223, 0.74);
    border-radius: 6px;
    background: var(--fantasy-bronze);
}

.header-title {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--fantasy-gold);
    border-radius: 5px 5px 2px 2px;
    color: #fff4d4;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 46%),
        linear-gradient(135deg, #351011 0%, var(--fantasy-oxblood) 48%, #2b1714 100%);
    box-shadow:
        0 5px 14px var(--fantasy-shadow),
        inset 0 0 0 2px #2c0b0d,
        inset 0 0 0 4px rgba(208, 169, 79, 0.42),
        inset 0 -8px 18px rgba(0, 0, 0, 0.24);
    text-shadow: 0 2px 2px #120506, 0 0 12px rgba(234, 208, 137, 0.24);
}

.header-title::before,
.header-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 13%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--fantasy-gold), transparent);
}

.header-title::before {
    left: 3%;
}

.header-title::after {
    right: 3%;
}

.tab-container {
    gap: 5px;
    padding: 5px;
    border: 1px solid rgba(208, 169, 79, 0.56);
    border-radius: 5px;
    background: rgba(10, 16, 13, 0.72);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(208, 169, 79, 0.08);
}

.tab-button {
    position: relative;
    overflow: hidden;
    border: 1px solid #81602e;
    border-radius: 4px;
    color: #f2e4c0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 45%),
        linear-gradient(145deg, var(--fantasy-forest-light), var(--fantasy-forest));
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.08),
        inset 0 -3px 7px rgba(0, 0, 0, 0.25),
        0 2px 3px rgba(0, 0, 0, 0.24);
    text-shadow: 0 1px 1px #0c120f;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}

.tab-button:hover {
    border-color: var(--fantasy-gold);
    color: #fff6da;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 50%),
        linear-gradient(145deg, #416654, #263f35);
}

.tab-button.active {
    border: 1px solid var(--fantasy-gold);
    border-top: 3px solid var(--fantasy-gold-light);
    color: var(--fantasy-oxblood);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.66), transparent 42%),
        linear-gradient(145deg, #fff7e2, var(--fantasy-parchment));
    box-shadow:
        inset 0 0 0 1px rgba(110, 72, 31, 0.28),
        0 3px 8px rgba(0, 0, 0, 0.32);
    text-shadow: 0 1px rgba(255, 255, 255, 0.74);
}

.tab-button:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--fantasy-gold);
    outline-offset: 2px;
}

.tab-content {
    border: 1px solid var(--fantasy-gold);
    border-radius: 5px;
    background-color: var(--fantasy-parchment-light);
    background-image:
        repeating-linear-gradient(0deg, rgba(91, 64, 34, 0.025) 0, rgba(91, 64, 34, 0.025) 1px, transparent 1px, transparent 5px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), transparent 38%, rgba(137, 101, 54, 0.08));
    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.42),
        inset 0 0 0 3px rgba(80, 20, 22, 0.72),
        inset 0 0 0 5px rgba(208, 169, 79, 0.38),
        inset 0 0 34px rgba(86, 60, 31, 0.14);
}

.tab-content.active {
    animation: fantasy-panel-enter 0.18s ease-out;
}

.box-sezione,
.home-dice-section {
    border: 1px solid var(--fantasy-bronze);
    border-radius: 5px;
    background-color: rgba(251, 244, 223, 0.88);
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.58), transparent 40%),
        repeating-linear-gradient(0deg, transparent 0, transparent 5px, rgba(104, 72, 35, 0.025) 5px, rgba(104, 72, 35, 0.025) 6px);
    box-shadow:
        0 3px 8px rgba(50, 35, 20, 0.19),
        inset 0 0 0 1px rgba(80, 20, 22, 0.22),
        inset 0 0 18px rgba(119, 82, 39, 0.08);
}

.box-sezione h4,
.home-dice-section h4 {
    position: relative;
    border-bottom: 1px solid var(--fantasy-gold);
    color: #fff2cf;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 48%),
        linear-gradient(100deg, #321012, var(--fantasy-oxblood) 55%, #2c1714);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.08),
        inset 0 -3px 7px rgba(0, 0, 0, 0.18),
        0 2px 4px rgba(43, 29, 12, 0.18);
    text-shadow: 0 1px 1px #160708;
}

.box-sezione h4::after,
.home-dice-section h4::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: -1px;
    left: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--fantasy-gold-light), transparent);
}

.tabella-fantasy {
    border: 1px solid rgba(116, 78, 35, 0.34);
    background: rgba(255, 250, 236, 0.48);
}

.tabella-fantasy th {
    border-bottom: 1px solid var(--fantasy-bronze);
    color: var(--fantasy-forest);
    background: rgba(32, 56, 47, 0.11);
    text-shadow: 0 1px rgba(255, 255, 255, 0.72);
}

.tabella-fantasy td {
    border-bottom-color: rgba(126, 91, 49, 0.32);
}

.tabella-fantasy tbody tr:nth-child(even) td {
    background-color: rgba(203, 180, 133, 0.08);
}

.tabella-fantasy tbody tr:hover td {
    background-color: rgba(208, 169, 79, 0.12);
}

.campo-anagrafica {
    border-bottom-color: var(--fantasy-bronze);
}

.campo-anagrafica label,
.classe-riga-label,
.strumenti-riga label,
.caratt-label,
.mono-piccolo {
    color: var(--fantasy-oxblood);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea,
.select-fantasy,
.input-full,
.input-fantasy {
    border: 1px solid rgba(118, 78, 34, 0.48);
    border-radius: 3px;
    color: var(--fantasy-ink);
    background-color: rgba(255, 250, 236, 0.84);
    box-shadow: inset 0 1px 3px rgba(70, 48, 24, 0.12);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
select:focus,
textarea:focus,
.input-fantasy:focus {
    border-color: var(--fantasy-bronze);
    color: #1d1713;
    background-color: #fff9e9;
    box-shadow: 0 0 0 2px rgba(208, 169, 79, 0.22), inset 0 1px 3px rgba(70, 48, 24, 0.1);
}

input[readonly],
input:disabled,
select:disabled,
textarea:disabled {
    color: #51473c;
    background-color: rgba(215, 201, 170, 0.5);
}

.home-button,
.button-fantasy,
.btn-fantasy,
.dice-button,
.caster-button,
.depositi-v2-button,
.depositi-v2-close,
.depositi-v2-luogo-button {
    border: 1px solid var(--fantasy-gold) !important;
    border-radius: 4px;
    color: #fff3d0 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 48%),
        linear-gradient(145deg, var(--fantasy-oxblood-light), var(--fantasy-oxblood)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(51, 9, 11, 0.75),
        inset 0 -4px 8px rgba(0, 0, 0, 0.22),
        0 2px 5px rgba(31, 18, 13, 0.3);
    text-shadow: 0 1px 1px #210607;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}

.home-button:hover,
.button-fantasy:hover,
.btn-fantasy:hover,
.dice-button:hover,
.caster-button:hover,
.depositi-v2-button:hover,
.depositi-v2-close:hover,
.depositi-v2-luogo-button:hover {
    border-color: var(--fantasy-gold-light) !important;
    color: #fff9e9 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 52%),
        linear-gradient(145deg, #8c292c, #5e171a) !important;
}

.home-button.secondary,
.button-fantasy.secondary,
.caster-button:not(.active) {
    border-color: #9f8145 !important;
    color: #f0e3bf !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 50%),
        linear-gradient(145deg, var(--fantasy-forest-light), var(--fantasy-forest)) !important;
}

.caster-button:disabled,
button:disabled {
    filter: saturate(0.45);
    opacity: 0.55;
}

.home-button:active,
.button-fantasy:active,
.btn-fantasy:active,
.dice-button:active,
.caster-button:active,
.tab-button:active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3);
}

.home-main-panel,
.home-dice-section {
    box-shadow:
        0 5px 12px rgba(31, 20, 12, 0.24),
        inset 0 0 0 1px rgba(80, 20, 22, 0.22);
}

.portrait-preview {
    border: 1px solid var(--fantasy-gold);
    border-radius: 4px;
    background: #211915;
    box-shadow:
        0 4px 9px rgba(0, 0, 0, 0.3),
        inset 0 0 0 3px var(--fantasy-oxblood),
        inset 0 0 0 5px rgba(208, 169, 79, 0.55);
}

.portrait-preview img {
    filter: saturate(0.94) contrast(1.04);
}

.home-die-card,
.riga-caratteristica,
.ca-card-integrata,
.pf-card-integrata,
.peso-card,
#incantesimi .inc-livello-riepilogo > span,
#incantesimi .inc-slot-item,
#armi-armature .registro-arma-scheda,
#armi-armature .registro-protezione-scheda,
#equipaggiamento .equip-slot-card {
    border: 1px solid rgba(139, 97, 42, 0.48);
    border-radius: 4px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.58), transparent 44%),
        linear-gradient(145deg, rgba(247, 237, 211, 0.96), rgba(222, 202, 161, 0.72));
    box-shadow:
        0 2px 5px rgba(52, 37, 21, 0.16),
        inset 0 1px rgba(255, 255, 255, 0.58),
        inset 0 -3px 7px rgba(94, 65, 31, 0.08);
}

.home-die-card:hover,
#incantesimi .inc-slot-item:hover,
#armi-armature .registro-arma-scheda:hover,
#armi-armature .registro-protezione-scheda:hover,
#equipaggiamento .equip-slot-card:hover {
    border-color: var(--fantasy-bronze);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.68), transparent 44%),
        linear-gradient(145deg, #fbf1d9, #dec89e);
}

.home-die-label,
.home-die-qty,
.ca-card-integrata,
.pf-card-integrata,
.peso-card,
.ca-card-integrata b,
.pf-card-integrata b,
.peso-card b {
    color: var(--fantasy-oxblood);
}

.home-die-shape::before {
    background: linear-gradient(145deg, #792126, #3d0d10);
    filter: drop-shadow(0 2px 1px rgba(29, 13, 8, 0.34));
}

.home-die-shape::after {
    background: linear-gradient(145deg, #fff9e8, #e7d5ad);
}

.home-die-card.is-rolling-3d {
    border-color: var(--fantasy-gold);
    box-shadow: 0 0 0 2px rgba(208, 169, 79, 0.18), inset 0 0 16px rgba(208, 169, 79, 0.2);
}

.riepilogo-contatore,
.nota-dati,
.risultato-filtro,
#cataloghi .cataloghi-aiuto,
#armi-armature .armi-armature-aiuto {
    border-color: rgba(105, 77, 39, 0.42);
    border-radius: 4px;
    color: var(--fantasy-ink-soft);
    background: rgba(234, 220, 187, 0.54);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.54);
}

.riepilogo-contatore {
    color: var(--fantasy-oxblood);
}

.riepilogo-contatore.bottom {
    border-left: 3px solid var(--fantasy-forest-light);
    text-align: left;
}

#cataloghi .catalogo-dettaglio-riga td {
    color: var(--fantasy-ink-soft);
    background: rgba(221, 204, 169, 0.35);
}

#cataloghi .catalogo-arma-note-label,
#cataloghi .catalogo-armatura-dettaglio-label,
#cataloghi .catalogo-incantesimo-effetto-label,
#cataloghi .catalogo-talento-effetto-label,
#cataloghi .catalogo-oggetto-descrizione-label {
    color: var(--fantasy-oxblood);
}

#incantesimi .inc-classe-intestazione {
    border: 1px solid rgba(155, 109, 44, 0.48);
    border-bottom: 2px solid var(--fantasy-bronze);
    border-radius: 4px;
    color: #eadfbe;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 50%),
        linear-gradient(110deg, var(--fantasy-forest), #172a24);
    box-shadow: 0 2px 5px rgba(31, 20, 12, 0.22);
}

#incantesimi .inc-classe-intestazione strong {
    color: #fff0c8;
}

#incantesimi .inc-livello-intestazione {
    border-bottom-color: var(--fantasy-bronze);
    color: var(--fantasy-oxblood);
}

#incantesimi .inc-slot-item h6,
#armi-armature .registro-arma-scheda h5,
#armi-armature .registro-protezione-scheda h5 {
    border-bottom-color: rgba(155, 109, 44, 0.42);
    color: var(--fantasy-oxblood);
    background: rgba(126, 92, 47, 0.08);
}

#incantesimi .inc-slot-trigger,
#armi-armature .registro-slot-trigger,
#equipaggiamento .equip-slot-trigger {
    color: var(--fantasy-ink);
}

#incantesimi .inc-slot-trigger:hover,
#armi-armature .registro-slot-trigger:hover,
#equipaggiamento .equip-slot-trigger:hover {
    color: var(--fantasy-oxblood-light);
}

#armi-armature .registro-ca-badge {
    border-color: rgba(155, 109, 44, 0.48);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.34);
}

#armi-armature .registro-ca-badge.applicata {
    border-color: var(--fantasy-bronze);
    background: linear-gradient(145deg, var(--fantasy-oxblood), #3a0b0d);
}

#armi-armature .registro-ca-badge.non-applicata {
    background: rgba(226, 211, 180, 0.78);
}

#incantesimi .inc-slot-vuoto,
#armi-armature .registro-slot-vuoto,
#equipaggiamento .equip-slot-vuoto {
    border-color: rgba(91, 70, 43, 0.5);
    background: rgba(226, 211, 180, 0.3);
}

#armi-armature .registro-slot-switch {
    border-color: #7c694a;
    background: #b9ad92;
    box-shadow: inset 0 1px 3px rgba(27, 20, 13, 0.24);
}

#armi-armature .registro-slot-stato input:checked + .registro-slot-switch {
    border-color: var(--fantasy-gold);
    background: var(--fantasy-oxblood);
}

#equipaggiamento .equip-slot-trigger,
#equipaggiamento .equip-slot-intestazione-fissa {
    border-bottom-color: rgba(155, 109, 44, 0.35);
    color: var(--fantasy-forest);
    background: rgba(32, 56, 47, 0.08);
}

#equipaggiamento .equip-slot-dettagli {
    background: rgba(123, 87, 40, 0.28);
}

#equipaggiamento .equip-slot-dettaglio {
    background: rgba(251, 244, 223, 0.92);
}

#equipaggiamento .equip-slot-etichetta {
    color: var(--fantasy-oxblood);
}

#equipaggiamento .equip-peso-riepilogo,
#equipaggiamento .fondi-peso-riepilogo {
    color: var(--fantasy-gold-light);
}

.fondi-card,
.depositi-v2-riga,
.depositi-v2-vuoto,
.depositi-v2-mini {
    border-color: var(--theme-card-border, rgba(155, 109, 44, 0.52));
    color: var(--fantasy-ink);
    background: var(--theme-card-bg, linear-gradient(145deg, rgba(255, 255, 255, 0.52), transparent 44%), linear-gradient(145deg, #f4e7c8, #d9c399));
    box-shadow: var(--theme-card-shadow, 0 2px 5px rgba(52, 37, 21, 0.16), inset 0 1px rgba(255, 255, 255, 0.58));
}

#equipaggiamento .fondi-card-title,
.depositi-v2-luogo,
.depositi-v2-label,
.depositi-v2-max {
    color: var(--fantasy-oxblood);
}

.wizard-overlay,
.equip-manuale-finestra,
.depositi-v2-overlay {
    background: rgba(9, 14, 12, 0.76) !important;
    backdrop-filter: blur(2px);
}

.wizard-panel,
.equip-manuale-pannello,
.depositi-v2-dialog,
.dialogo-app-pannello {
    border: 1px solid var(--fantasy-gold) !important;
    border-radius: 5px;
    background-color: var(--fantasy-parchment-light) !important;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 5px, rgba(104, 72, 35, 0.025) 5px, rgba(104, 72, 35, 0.025) 6px),
        linear-gradient(145deg, rgba(255, 255, 255, 0.6), transparent 40%, rgba(137, 101, 54, 0.08)) !important;
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.52),
        inset 0 0 0 3px var(--fantasy-oxblood),
        inset 0 0 0 5px rgba(208, 169, 79, 0.44) !important;
}

.equip-manuale-pannello h3,
.depositi-v2-header h3,
.dialogo-app-pannello h3 {
    color: var(--fantasy-oxblood) !important;
}

.registro-equip-action-menu {
    border-color: var(--fantasy-gold);
    background: var(--fantasy-parchment-light);
    box-shadow: 0 7px 20px rgba(10, 9, 7, 0.4), inset 0 0 0 2px rgba(80, 20, 22, 0.2);
}

.registro-equip-action-menu button {
    color: var(--fantasy-ink);
}

.registro-equip-action-menu button:hover,
.registro-equip-action-menu button:focus-visible {
    color: var(--fantasy-oxblood);
    background: rgba(155, 109, 44, 0.14);
}

.database-status,
.home-status:not(:empty),
.equip-manuale-errore,
.depositi-v2-errore {
    border: 1px solid var(--fantasy-bronze);
    border-left: 4px solid var(--fantasy-oxblood);
    border-radius: 4px;
    color: var(--fantasy-ink-soft);
    background: #f1e3c3;
    box-shadow: 0 2px 5px rgba(31, 20, 12, 0.18);
}

.database-status.errore,
.dialogo-app-finestra[data-tipo="errore"] .dialogo-app-messaggio,
.equip-manuale-errore,
.depositi-v2-errore {
    color: var(--fantasy-danger);
}

.autosave-status:not(:empty) {
    border-left-color: var(--fantasy-forest);
    background: rgba(241, 227, 195, 0.72);
    box-shadow: 0 1px 3px rgba(31, 20, 12, 0.12);
}

#abilita .abilita-check-readonly {
    border-color: var(--fantasy-forest);
    background: #f9efd8;
    box-shadow: inset 0 1px 2px rgba(50, 35, 20, 0.18);
}

#abilita .abilita-check-readonly.selezionata::after {
    border-color: var(--fantasy-oxblood-light);
}

.wizard-stat-control .input-corto,
.cerchio-modificatore {
    border-color: var(--fantasy-bronze);
    color: var(--fantasy-oxblood);
    background: linear-gradient(145deg, #fff8e5, #e5d1a7);
    box-shadow: 0 2px 4px rgba(49, 32, 18, 0.2), inset 0 1px rgba(255, 255, 255, 0.72);
}

.wizard-race-modifier {
    border-color: var(--fantasy-forest-light);
    color: var(--fantasy-forest);
    background: rgba(229, 220, 192, 0.9);
}

.wizard-race-modifier.bonus {
    color: #24523d;
}

.wizard-race-modifier.malus {
    color: var(--fantasy-danger);
}

@keyframes fantasy-panel-enter {
    from {
        opacity: 0.72;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tab-content.active {
        animation: none;
    }

    .tab-button,
    .home-button,
    .button-fantasy,
    .btn-fantasy,
    .dice-button,
    .caster-button {
        transition: none;
    }
}

@media (max-width: 390px) {
    body::before {
        border-width: 5px;
    }

    .header-title::before,
    .header-title::after {
        display: none;
    }

    .tab-container {
        padding: 4px;
        gap: 4px;
    }

    .tab-content {
        box-shadow:
            0 7px 18px rgba(0, 0, 0, 0.38),
            inset 0 0 0 2px rgba(80, 20, 22, 0.72),
            inset 0 0 0 4px rgba(208, 169, 79, 0.34),
            inset 0 0 24px rgba(86, 60, 31, 0.12);
    }
}