/* --- VARIABILI GLOBALI (LORE: DARK FANTASY / ECLISSI) --- */
:root {
    --bg-dark: #030305;
    --p-color: #7c3aed;
    --e-color: #7f1d1d;
    --gold: #c6a45c;
    --glass: rgba(10, 10, 12, 0.92);
    --card-bg: linear-gradient(145deg, #13131a, #09090b);
    --border-dark: #27272a;
}

/* --- BASE E SFONDO --- */
body {
    font-family: 'Nunito', sans-serif;
    background: url('assets/sfondo.webp') no-repeat center center fixed;
    background-size: cover;
    background-color: var(--bg-dark);
    color: #e2e8f0;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
}

/* --- Menu & Overlay --- */
.fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.98) 100%); backdrop-filter: blur(8px); z-index: 2000; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; overflow-y: auto; }
.fullscreen-overlay.show { opacity: 1; pointer-events: auto; }
.menu-box {
    background: linear-gradient(145deg, rgba(24, 24, 27, 0.85), rgba(9, 9, 11, 0.95));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Effetto Vetro */
    border: 1px solid var(--gold); border-radius: 8px; padding: 45px;
    text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,1), inset 0 0 30px rgba(0,0,0,0.8);
    max-width: 800px; margin: auto; position: relative;
}
.menu-box::before { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border: 1px solid rgba(198, 164, 92, 0.1); pointer-events: none; }
.menu-box h1 { font-family: 'Cinzel'; color: var(--gold); font-size: 48px; margin-top: 0; margin-bottom: 5px; text-shadow: 0 4px 20px rgba(198, 164, 92, 0.3); letter-spacing: 4px; text-transform: uppercase;}
.menu-subtitle { font-family: 'Cinzel'; color: #94a3b8; font-size: 16px; margin-bottom: 35px; letter-spacing: 4px; text-transform: uppercase;}
.menu-btn { display: inline-block; margin: 10px; padding: 14px 28px; font-size: 15px; letter-spacing: 2px;}

.deck-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-height: 55vh; overflow-y: auto; padding: 20px; background: rgba(0,0,0,0.7); border: 1px solid var(--border-dark); border-radius: 4px; margin-bottom: 25px; box-shadow: inset 0 0 20px rgba(0,0,0,0.9);}

/* --- Pulsanti Azione --- */
button.action-btn {
    background: linear-gradient(135deg, #27272a, #09090b);
    border: 1px solid var(--gold); color: var(--gold);
    font-family: 'Cinzel'; font-weight: 800; cursor: pointer; border-radius: 4px;
    transition: all 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    text-transform: uppercase; text-shadow: 1px 1px 2px #000; width: 100%;
    padding: 16px 24px; font-size: 15px;
    position: relative; overflow: hidden; /* Necessario per il riflesso */
}

/* Effetto riflesso metallico */
button.action-btn::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(198,164,92,0.15) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(45deg) translateY(-100%); transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

button.action-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #3f3f46, #18181b); transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(198, 164, 92, 0.4); border-color: #fde047;
}

button.action-btn:hover:not(:disabled):after {
    transform: rotate(45deg) translateY(100%);
}

button:disabled {
    background: #18181b; border-color: #3f3f46; cursor: not-allowed;
    color: #52525b; box-shadow: inset 0 0 10px #000; text-shadow: none;
}

/* --- UI FLUTTUANTE (HUD) --- */
.floating-ui { position: absolute; z-index: 100; display: flex; flex-direction: column; gap: 8px; padding: 20px;}
.floating-ui.top { top: 0; }
.floating-ui.bottom { bottom: 0; }
.floating-ui.left { left: 0; align-items: flex-start; }
.floating-ui.right { right: 0; align-items: flex-end; }
.floating-ui.right .mana-slots, .floating-ui.right .action-btn { width: 170px; box-sizing: border-box; }

.bar-wrapper { width: 130px; height: 18px; background: #000; border: 1px solid #3f3f46; border-radius: 2px; position: relative; overflow: hidden; box-shadow: inset 0 0 10px rgba(0,0,0,0.9); pointer-events: none;}
.bar-fill {
    height: 100%; position: absolute; top: 0; left: 0;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hp-fill {
    width: 100%;
    background: linear-gradient(90deg, #450a0a, #dc2626, #7f1d1d);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    border-right: 2px solid #fca5a5;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}
.armor-fill {
    width: 0%;
    background: linear-gradient(90deg, #27272a, #52525b, #3f3f46);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    border-right: 2px solid #e4e4e7;
}

/* Nuova animazione per il flusso di energia */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.bar-text { display: none; }
.stat-val-out {
    font-family: 'Cinzel'; font-size: 16px; font-weight: 800; color: #f8fafc;
    text-shadow: 1px 1px 2px #000, 0 0 5px #000; width: 25px; text-align: left;
}
.armor-container { display: block; margin-left: 0; }

.deck-display { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 5px; }
.deck-display img { width: 36px; height: 50px; object-fit: cover; border-radius: 2px; border: 1px solid #3f3f46; box-shadow: 0 2px 5px rgba(0,0,0,0.8); pointer-events: none; }
.deck-count { font-family: 'Cinzel'; font-size: 14px; font-weight: bold; color: #a1a1aa; text-shadow: 0 2px 4px #000; }
.deck-display.interactive { cursor: pointer; transition: 0.2s; }
.deck-display.interactive:hover { transform: translateY(-2px); filter: brightness(1.2); }

.mana-slots { display: flex; gap: 6px; width: 170px; height: 18px; padding-left: 5px; }
.mana-slot {
    flex: 1; border: 1px solid #3f3f46; border-radius: 3px;
    background: rgba(0,0,0,0.8); box-shadow: inset 0 0 5px #000;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: skewX(-15deg); /* Effetto cristallo inclinato */
}
.mana-slot.filled {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6, #60a5fa);
    border-color: #93c5fd;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.8), inset 0 0 8px rgba(255,255,255,0.4);
}
.mana-slot.locked { visibility: hidden; opacity: 0; transform: skewX(-15deg) translateY(10px); }

/* --- Aree di Gioco Responsive --- */
.game-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: transparent;
    overflow: hidden; /* Impedisce scroll indesiderati */
}
.hand {
    flex: 0 0 22vh; /* Fissa l'altezza della mano in modo assoluto */
    display: flex; justify-content: center; align-items: center; padding: 0 40px; z-index: 5; perspective: 1000px; transition: background 0.3s, box-shadow 0.3s; border-radius: 8px;
}
.hand .card { margin-left: -35px; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.hand .card:first-child { margin-left: 0; }
/* Empty space around cards must not intercept clicks on the floating HUD. */
.hand { pointer-events: none; }
.hand .card { pointer-events: auto; }
.hand.active-hand .card:hover { transform: translateY(-40px) scale(1.15) rotate(0deg) !important; z-index: 50; box-shadow: 0 15px 30px rgba(0,0,0,0.9); }
.hand.active-hand .card:active { cursor: grabbing; }

.hidden-hand .card { background: url('assets/cards/back.webp') center/cover no-repeat, linear-gradient(135deg, #18181b, #09090b); border-color: #27272a; color: transparent; pointer-events: none; transform: scale(0.75) translateY(0px) !important; margin-left: -50px; box-shadow: inset 0 0 30px rgba(0,0,0,0.9), 0 5px 15px rgba(0,0,0,0.8);}
.hidden-hand .card .card-cost, .hidden-hand .card .card-stats, .hidden-hand .card .card-desc-container { display: none; }

.board {
    flex: 1 1 50%; /* Occupa sempre e rigorosamente il 50% dello spazio tra le mani */
    width: 100%;
    display: flex; justify-content: center; align-items: center; gap: 15px; transition: background 0.4s; position: relative;
}
.player-board { border-top: 1px solid rgba(198, 164, 92, 0.1); background: linear-gradient(to bottom, rgba(124, 58, 237, 0.02) 0%, transparent 100%);}
.board.drag-over { background: rgba(124, 58, 237, 0.05); box-shadow: inset 0 0 80px rgba(124, 58, 237, 0.1); border-color: var(--p-color);}

/* --- DECK BUILDER --- */
.builder-card-wrapper {
    position: relative; cursor: pointer; transition: transform 0.2s;
}
.builder-card-wrapper:hover { transform: scale(1.05); z-index: 10;}
.builder-card-wrapper.maxed {
    filter: grayscale(0.6) brightness(0.7);
}
.card-qty-badge {
    position: absolute; top: -12px; right: -12px;
    background: linear-gradient(135deg, var(--p-color), #4c1d95);
    border: 2px solid var(--gold); color: #fff;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-weight: 900; z-index: 20; font-family: 'Cinzel';
    box-shadow: 0 4px 10px rgba(0,0,0,0.9); font-size: 14px;
}

/* --- Carte - Restyling --- */
.card {
    height: clamp(130px, 24vh, 200px); width: clamp(87px, 16.2vh, 135px);
    background: var(--card-bg); border-radius: 6px; border: 1px solid #52525b;
    position: relative; display: flex; flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.9); flex-shrink: 0;
}
.card > * { pointer-events: none; }

.card.spell { background: linear-gradient(145deg, #2e1065, #0f0a1c); border-color: #4c1d95; }
.card::before { content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; border: 1px solid rgba(255,255,255,0.03); border-radius: 2px; pointer-events: none;}

.card-img { height: 45%; background: #000; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--gold); margin: 3px; border-radius: 2px 2px 0 0; padding: 0;}
.card-img img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1) saturate(0.9); pointer-events: auto; user-select: none; -webkit-user-drag: none; }
.card-name { text-align: center; font-size: 10px; padding: 5px 3px; font-weight: 800; background: #000; font-family: 'Cinzel'; color: var(--gold); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #18181b;}

.card-desc-container {
    position: relative; flex-grow: 1; display: flex; justify-content: center; align-items: center;
    width: 100%; pointer-events: none; background: radial-gradient(circle, rgba(0,0,0,0.6) 0%, transparent 80%);
}
.card-desc-text, .card-lore-text {
    position: absolute; width: 100%; text-align: center; padding: 4px 6px; box-sizing: border-box; line-height: 1.3;
    top: 30%; transform: translateY(-50%);
}
.card-desc-text {
    font-size: 10px; color: #e2e8f0; text-shadow: 0 1px 3px #000; /* Più grande e leggibile */
    opacity: 1; transition: opacity 0.2s 0s; font-weight: bold;
}
.card-lore-text {
    font-size: 9px; color: #a1a1aa; font-style: italic; text-shadow: 0 1px 2px #000;
    opacity: 0; transition: opacity 0.2s 0s;
}
.card-img:hover ~ .card-desc-container .card-desc-text { opacity: 0; transition: opacity 0.2s 1.5s; }
.card-img:hover ~ .card-desc-container .card-lore-text { opacity: 1; transition: opacity 0.2s 1.5s; }

.card-stats { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 6px; z-index: 6; box-sizing: border-box;}
.card-cost { width: 26px; height: 26px; background: linear-gradient(135deg, #1e1b4b, #000); border-radius: 2px; display: flex; justify-content: center; align-items: center; font-family: 'Cinzel'; font-weight: 800; border: 1px solid #6366f1; font-size: 13px; box-shadow: 0 4px 10px rgba(0,0,0,0.9); text-shadow: 0 2px 4px #000; color: #e0e7ff;}
.stats-right { display: flex; gap: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.9); border-radius: 2px; }
.stat { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 13px; text-shadow: 0 2px 4px #000; font-family: 'Cinzel';}
.atk { background: linear-gradient(135deg, #451a03, #000); color: #fef3c7; border: 1px solid #b45309; border-right: none; border-radius: 2px 0 0 2px;}
.hp { background: linear-gradient(135deg, #450a0a, #000); color: #fee2e2; border: 1px solid #b91c1c; border-radius: 0 2px 2px 0;}

/* --- SLOT ARENA --- */
.arena-slot {
    width: 65px; height: 90px; border: 2px dashed #52525b; border-radius: 4px;
    display: flex; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.6); margin-top: 0; box-shadow: inset 0 0 10px #000;
    position: relative; overflow: visible;
}
.arena-slot-text { color: #52525b; font-size: 10px; font-family: 'Cinzel'; text-align: center; font-weight: bold; }
.arena-slot .card { transform: scale(0.65); transform-origin: center; margin: 0; box-shadow: 0 0 15px var(--p-color); pointer-events: auto;}
.arena-slot .card:hover { transform: scale(1.1); z-index: 50; position: absolute;}

/* --- STATI E DRAG --- */
.playable { border-color: var(--p-color) !important; animation: voidPulse 4s infinite;}
@keyframes voidPulse { 0% { box-shadow: 0 0 5px rgba(124, 58, 237, 0.3); } 50% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.7); } 100% { box-shadow: 0 0 5px rgba(124, 58, 237, 0.3); } }
.board .card { cursor: grab; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); margin: 0 !important;}
.board .card:active { cursor: grabbing; }
.board .card.active-card:hover { transform: translateY(-6px); z-index: 10;}
.board .card.ready { border-color: #065f46; box-shadow: 0 0 15px rgba(6, 95, 70, 0.7);}
.board .card.exhausted { opacity: 0.85; filter: grayscale(0.3) brightness(0.7); border-color: #27272a; cursor: not-allowed;}
.board .card.exhausted:hover { transform: none; }

.effect-taunt { border-color: #52525b !important; box-shadow: 0 0 0 2px #27272a, 0 8px 20px rgba(0,0,0,0.8);}
.effect-divine-shield { box-shadow: 0 0 15px 2px rgba(198, 164, 92, 0.3), inset 0 0 15px rgba(198, 164, 92, 0.2) !important; border-color: var(--gold) !important; }
.effect-windfury { background: linear-gradient(145deg, #1e293b, #172554) !important; border-color: #3b82f6 !important;}

/* --- OTTIMIZZAZIONI DRAG & DROP --- */
.hand.active-hand .card {
    cursor: grab;
    will-change: transform; /* Rende l'animazione iper-fluida e impedisce la perdita della presa al click */
}

.dragging {
    opacity: 0.1 !important; /* Lascia che sia il browser a mostrare solo il "fantasma" della carta */
    transform: none !important;
    transition: none !important;
    pointer-events: none !important; /* FONDAMENTALE: impedisce alla carta trascinata di bloccare i bersagli sotto di essa! */
}

.target-drag-over {
    /* Rimosso il 'transform: scale' che causava il glitch dello sfarfallio! Usiamo filtri visivi sicuri */
    box-shadow: 0 0 35px var(--e-color), inset 0 0 15px rgba(239, 68, 68, 0.4) !important;
    border-color: var(--e-color) !important;
    z-index: 20;
    filter: brightness(1.25) contrast(1.1); /* Evidenzia il bersaglio senza modificarne le dimensioni geometriche */
}

.hand.target-drag-over {
    box-shadow: inset 0 0 50px rgba(239, 68, 68, 0.3) !important;
    background: rgba(239, 68, 68, 0.05);
    border: 2px dashed var(--e-color);
}

.effect-assassin { border-color: #047857 !important; }
.effect-poisonous { border-color: #16a34a !important; }

.poison-badge { position: absolute; top: -8px; right: -8px; background: #16a34a; border: 2px solid #000; color: #fff; border-radius: 50%; width: 24px; height: 24px; font-size: 11px; font-weight: bold; display: flex; justify-content: center; align-items: center; z-index: 20; box-shadow: 0 0 10px #16a34a; }
.hero-poison-badge { display: inline-block; background: #16a34a; padding: 2px 6px; border-radius: 10px; font-size: 11px; margin-left: 5px; box-shadow: 0 0 5px #16a34a;}

/* --- UI MODALI ED EFFETTI --- */
.attack-preview { position: fixed; top: 15%; left: 50%; transform: translate(-50%, 0); background: rgba(0,0,0,0.95); border: 1px solid var(--gold); border-radius: 4px; padding: 15px 30px; font-family: 'Cinzel'; z-index: 99999; pointer-events: none; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,1); display: none; }
.attack-preview-row { font-size: 15px; margin: 8px 0; font-weight: bold; letter-spacing: 1px; }

.action-log-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #18181b, #000); border: 1px solid var(--gold); padding: 25px 60px; border-radius: 4px; z-index: 100; text-align: center; font-family: 'Cinzel'; pointer-events: none; opacity: 0; transition: all 0.4s ease; box-shadow: 0 30px 60px rgba(0,0,0,0.9), inset 0 0 20px rgba(198, 164, 92, 0.1);}
.action-log-container.visible { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
.action-log-title { color: var(--gold); font-size: 14px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 4px; border-bottom: 1px solid rgba(198, 164, 92, 0.3); padding-bottom: 4px;}
.action-log-text { font-size: 32px; font-weight: 800; color: #fff; text-shadow: 0 5px 15px #000, 0 0 10px rgba(198, 164, 92, 0.5);}

.wiki-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.95) 100%); backdrop-filter: blur(5px); z-index: 3000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease;}
.wiki-modal-overlay.show { opacity: 1; pointer-events: auto; }
.wiki-modal {
    background: linear-gradient(145deg, rgba(24, 24, 27, 0.9), rgba(9, 9, 11, 0.98));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Effetto Vetro */
    border: 1px solid var(--gold); border-radius: 8px; padding: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,1), inset 0 0 20px rgba(198,164,92,0.05);
    transform: translateY(30px); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; max-width: 650px; max-height: 80vh; overflow-y: auto; text-align: left;
    scrollbar-width: thin; scrollbar-color: var(--gold) #09090b;
}
.wiki-modal::before { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border: 1px solid rgba(198, 164, 92, 0.1); pointer-events: none; }
.wiki-modal-overlay.show .wiki-modal { transform: translateY(0); }
.wiki-modal h2 { font-family: 'Cinzel'; color: var(--gold); margin-top: 0; font-size: 26px; border-bottom: 1px solid rgba(198, 164, 92, 0.3); padding-bottom: 15px; margin-bottom: 20px; letter-spacing: 2px;}
.wiki-modal h3 { color: #818cf8; font-family: 'Cinzel'; margin-top: 25px; margin-bottom: 10px; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 5px;}
.wiki-modal p, .wiki-modal ul { color: #cbd5e1; font-size: 15px; line-height: 1.6; margin-top: 0;}
.wiki-modal li { margin-bottom: 8px; }
.rarity-box { display: inline-block; padding: 2px 8px; border-radius: 2px; font-weight: bold; font-size: 11px; color: #000; box-shadow: 0 2px 4px rgba(0,0,0,0.5);}

/* --- ANIMAZIONI DANNO, CURA e TESTO FLUTTUANTE --- */
.being-attacked { animation: damageShake 0.5s cubic-bezier(.36,.07,.19,.97) both; filter: brightness(1.2) sepia(1) hue-rotate(-50deg) saturate(5) contrast(1.5);}
@keyframes damageShake { 10%, 90% { transform: translate3d(-3px, 0, 0); } 20%, 80% { transform: translate3d(5px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-7px, 0, 0); } 40%, 60% { transform: translate3d(7px, 0, 0); } }

.healing { animation: darkHealAnim 1.9s ease-out; }
@keyframes darkHealAnim { 0% { filter: drop-shadow(0 0 0 rgba(16, 185, 129, 1)); } 50% { filter: drop-shadow(0 0 25px rgba(16, 185, 129, 0.8)); transform: scale(1.05);} 100% { filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0)); } }

.bar-wrapper.hero-damage { animation: heroFlash 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
@keyframes heroFlash { 0% { filter: drop-shadow(0 0 50px var(--e-color)) brightness(2.5) sepia(1) hue-rotate(-50deg) saturate(5); transform: scale(1.05); } 100% { filter: drop-shadow(0 0 0px var(--e-color)) brightness(1) sepia(0) hue-rotate(0deg) saturate(1); transform: scale(1); } }

.floating-damage {
    position: fixed; transform: translate(-50%, -50%); font-family: 'Cinzel', serif; font-size: 40px; font-weight: 900; text-shadow: 0 0 5px #000, 0 0 10px #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; pointer-events: none; z-index: 99999; animation: floatUpFade 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
@keyframes floatUpFade { 0% { opacity: 1; margin-top: 0; transform: translate(-50%, -50%) scale(0.5); } 20% { margin-top: -20px; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; margin-top: -80px; transform: translate(-50%, -50%) scale(1); } }

/* --- FILTRI DECK BUILDER --- */
.filter-select {
    padding: 8px 12px;
    background: rgba(24, 24, 27, 0.9);
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 4px;
    font-family: 'Cinzel';
    font-weight: bold;
    outline: none;
    cursor: pointer;
    font-size: 14px;
}
.filter-select:hover {
    background: rgba(39, 39, 42, 0.9);
}
.filter-select option {
    background: #18181b;
    color: #fff;
    font-family: 'Nunito', sans-serif;
}

/* GLOW TURNO ATTIVO E MOBILE TOUCH */
.board.is-my-turn { box-shadow: inset 0 0 40px rgba(198, 164, 92, 0.1); border-top: 1px solid rgba(198, 164, 92, 0.4); }
.card.selected-for-play { transform: translateY(-30px) scale(1.1) !important; box-shadow: 0 0 30px var(--p-color) !important; z-index: 60; border-color: var(--p-color); }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.mulligan-card { cursor: pointer; transition: 0.2s; }
.mulligan-card.rejected { filter: grayscale(1) brightness(0.4); transform: translateY(20px); }
.mulligan-card.rejected::after { content: '❌'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; text-shadow: 0 0 10px #000; }

/* --- MENU LATERALE --- */
.side-menu-buttons {
    position: fixed; top: 50%; left: 15px; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 15px; z-index: 100;
}
.side-btn-float {
    width: 40px; height: 40px; background: linear-gradient(135deg, #18181b, #09090b);
    border: 1px solid var(--gold); color: var(--gold);
    font-family: 'Cinzel'; border-radius: 4px; cursor: pointer;
    font-size: 20px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.9);
    transition: all 0.3s ease; display: flex; justify-content: center; align-items: center;
}
.side-btn-float:hover { background: var(--gold); color: #000; transform: scale(1.1); box-shadow: 0 0 20px rgba(198, 164, 92, 0.4);}

/* --- PANNELLO CRONOLOGIA --- */
.history-panel {
    position: fixed; top: 50%; left: 70px; transform: translateY(-50%);
    width: 220px; max-height: 60vh; background: rgba(9, 9, 11, 0.95);
    border: 1px solid var(--border-dark); border-radius: 4px; padding: 10px;
    overflow-y: auto; z-index: 99; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease, border-color 0.3s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9);
}
.history-panel.open { opacity: 1; pointer-events: auto; border-color: var(--gold); }

#history-content {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.history-item {
    font-size: 10px;
    color: #cbd5e1;
    background: rgba(255,255,255,0.03);
    padding: 6px;
    border-radius: 3px;
    border-left: 2px solid var(--gold);
}

/* --- REFACTORED INLINE STYLES --- */
.btn-online { border-color: #38bdf8 !important; color: #38bdf8 !important; }
.deck-builder-menu-box { max-width: 95vw; width: 1000px; padding: 25px; max-height: 90vh; display: flex; flex-direction: column; }
.deck-builder-title { color: var(--gold); font-family: 'Cinzel'; margin-top: 0; margin-bottom: 5px; font-size: 32px; }
.deck-builder-info { color: #cbd5e1; margin-bottom: 15px; font-weight: bold; font-size: 18px; letter-spacing: 1px; }
.deck-builder-filters { display: flex; gap: 15px; margin-bottom: 15px; justify-content: center; z-index: 20; }
.deck-builder-instructions { color: #94a3b8; font-size: 14px; margin-top: -5px; margin-bottom: 15px; }
.deck-builder-grid { flex-grow: 1; overflow-y: auto; align-content: flex-start; padding: 15px; background: rgba(0,0,0,0.5); }
.deck-builder-actions { display: flex; gap: 15px; margin-top: 20px; }
.btn-random-deck { border-color: #38bdf8 !important; color: #38bdf8 !important; }

.endgame-menu-box { border-color: transparent !important; }
.endgame-title { font-size: 60px; margin-bottom: 10px; }
.endgame-subtitle { font-size: 20px; color: #cbd5e1; }
.endgame-btn { margin-top: 20px; }

.online-menu-title { color: var(--gold); font-family: 'Cinzel'; }
.join-section { display: none; margin-top: 20px; }
.room-code-input { padding: 10px; font-size: 16px; background: #09090b; color: #fff; border: 1px solid var(--gold); border-radius: 4px; text-transform: uppercase; width: 120px; text-align: center; }
.online-status { color: #cbd5e1; margin-top: 25px; font-weight: bold; letter-spacing: 1px; }

.discard-menu-box { background: rgba(15, 23, 42, 0.95) !important; max-width: 900px; border-color: #ef4444 !important; }
.discard-title { color: #ef4444; font-family: 'Cinzel'; }
.discard-instructions { color: #cbd5e1; margin-bottom: 20px; }
.discard-grid { overflow: visible; }

.pass-device-title { color: #fff; font-size: 32px; }
.pass-device-instructions { color: #cbd5e1; margin-bottom: 30px; }

.modal-close-btn { margin-top: 20px; width: 100%; }

.settings-modal { text-align: center; max-width: 400px; padding: 30px; }
.settings-title { border-bottom: none !important; margin-bottom: 5px !important; }
.settings-group { margin: 25px 0; text-align: left; }
.settings-label { color: var(--gold); font-family: 'Cinzel'; font-size: 18px; }
.settings-range { width: 100%; margin-top: 15px; }

.player-stats-header { display: flex; gap: 15px; align-items: flex-end; margin-bottom: 10px; }
.gy-img { filter: grayscale(1) brightness(0.6); }

.hero-name { font-family: 'Cinzel'; font-size: 13px; font-weight: bold; margin-bottom: 4px; letter-spacing: 1px; text-shadow: 1px 1px 3px #000; }
.enemy-name { color: #f8fafc; }
.player-name { color: var(--gold); }

.stat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.stat-icon { font-size: 16px; filter: drop-shadow(0 2px 2px #000); }

.floating-ui-aligned { align-items: center; }
.mana-slots-container { margin-bottom: 8px; }

#end-turn-btn-top { display: none; }
#surrender-btn { display: none; background: linear-gradient(135deg, #7f1d1d, #450a0a); border-color: #ef4444; color: #fca5a5; margin-top: 8px; font-size: 12px; padding: 10px 16px; }

.mulligan-menu-box { max-width: 800px; }
.mulligan-title { color: var(--gold); font-family: 'Cinzel'; }
.mulligan-instructions { color: #cbd5e1; }
.mulligan-grid-custom { justify-content: center; margin: 20px 0; overflow: visible; }

.dialog-modal { text-align: center; max-width: 400px; padding: 30px; z-index: 10000; }
.dialog-title { margin-top: 0 !important; border: none !important; }
.dialog-text { margin-bottom: 25px; }
.dialog-actions { display: flex; gap: 10px; }
#dialog-btn-cancel { display: none; background: #3f3f46; border-color: #52525b; color: #a1a1aa; }

.history-title { color: var(--gold); font-family: 'Cinzel'; font-size: 12px; border-bottom: 1px solid var(--border-dark); padding-bottom: 5px; margin-bottom: 8px; text-align: center; }

.trait-icons-container {
    position: absolute;
    left: -6px; /* Sporge leggermente a sinistra */
    top: -8px;  /* Sporge leggermente in alto */
    transform: none; /* Rimuove il vecchio allineamento centrale */
    display: flex;
    flex-direction: row; /* Allinea le icone in orizzontale */
    gap: 4px;
    z-index: 20; /* Le mantiene sopra i bordi della carta */
    font-size: 16px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,1));
    pointer-events: none;
}

/* --- MOTORE FISICO INTERACT.JS --- */
.dragging-modern {
    opacity: 0.95 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.9)) !important;
    z-index: 9999 !important;
    transition: none !important; /* Spegne i conflitti con il CSS */
    will-change: transform !important; /* Obbliga il browser a usare la Scheda Video */
    touch-action: none !important; /* Impedisce al browser di cercare di scorrere la pagina */
}

/* --- QOL: FRECCIA DI PUNTAMENTO (TARGETING ARROW) --- */
#arrow-svg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9998; display: none;
}
#arrow-path {
    fill: none; stroke: var(--e-color); stroke-width: 10;
    stroke-dasharray: 15; animation: dash 0.8s linear infinite;
    filter: drop-shadow(0 0 12px var(--e-color));
}
@keyframes dash { to { stroke-dashoffset: -30; } }

/* --- QOL: ZOOM CARTE (ISPEZIONE) --- */
#zoom-modal-overlay {
    z-index: 99999; cursor: zoom-out;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
}
#zoom-card-container {
    transform: scale(2); pointer-events: none;
    filter: drop-shadow(0 0 30px rgba(0,0,0,1));
}

/* --- QOL: DECK MANAGER BAR --- */
.deck-manager-bar {
    display: flex; gap: 10px; justify-content: center;
    margin-bottom: 15px; align-items: center;
}
.deck-manager-btn {
    font-size: 11px !important; padding: 10px 15px !important;
    width: auto !important; margin: 0 !important;
}
.deck-select { flex-grow: 1; max-width: 300px; }/* Keep inactive overlays and offscreen collection cards out of paint work. */
.fullscreen-overlay:not(.show), .wiki-modal-overlay:not(.show) { visibility: hidden; }
.fullscreen-overlay.show, .wiki-modal-overlay.show { visibility: visible; }
.builder-card-wrapper { content-visibility: auto; contain-intrinsic-size: 130px 190px; }
.hidden-hand .card { background-image: url('assets/cards/thumbs/back.webp'), linear-gradient(135deg, #18181b, #09090b); }
.card, .board .card { transition-property: transform, opacity, border-color; }
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
    .playable, .hp-fill, .armor-fill { animation: none; }
    .fullscreen-overlay, .menu-box { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Additional controls share the existing dark fantasy palette. */
.mana-curve { display: flex; gap: 12px; justify-content: center; align-items: flex-end; min-height: 80px; }
.mana-curve > div { display: flex; flex-direction: column; align-items: center; font-size: 12px; }
.mana-curve i { display: block; width: 20px; background: var(--p-color); border-radius: 3px 3px 0 0; }
#deck-analysis { text-align: left; font-size: 13px; max-width: 680px; margin: 12px auto; }
.challenge-option { border: 1px solid var(--border-dark); padding: 10px; margin: 8px 0; text-align: left; }
#challenge-list { max-height: 60vh; overflow-y: auto; }
#interaction-status, #challenge-objective { text-align: center; font-size: 13px; padding: 4px; color: var(--gold); }
.bar-wrapper.dropzone-target, #player-hero { pointer-events: auto; cursor: pointer; }
#discard-grid button.card { font-family: inherit; color: inherit; padding: 0; cursor: pointer; }
@media (max-width: 700px) {
  .deck-manager-bar, .deck-builder-actions { flex-wrap: wrap; }
  .floating-ui { padding: 8px; }
  .floating-ui.right .action-btn, .floating-ui.right .mana-slots { width: 120px; font-size: 11px; }
  .menu-box { max-width: calc(100vw - 28px); box-sizing: border-box; }
  .menu-box h1 { font-size: 30px; }
  .mana-curve { gap: 8px; }
  #interaction-status, #challenge-objective { max-width: 60vw; margin: 0 auto; font-size: 11px; }
}

/* Polish the existing gold, violet and charcoal palette without moving the HUD. */
body { height: 100dvh; position: relative; }
button, input, select { font: inherit; }
button, select, input[type="checkbox"] { touch-action: manipulation; }
button.action-btn { transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
button.action-btn::after { pointer-events: none; }
button:focus-visible, input:focus-visible, select:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 2px solid #e4c985; outline-offset: 4px; }
[hidden] { display: none !important; }
#main-menu .menu-box { width: min(520px, calc(100vw - 32px)); box-sizing: border-box; padding: 32px 38px; }
#main-menu .menu-btn { width: 100%; margin: 7px 0; letter-spacing: 1px; }
#main-menu label { display: block; color: #bbc1ce; font-size: 13px; margin-bottom: 8px; }
#ai-difficulty { width: 100%; box-sizing: border-box; margin-bottom: 12px; }
.menu-box { border-color: #a28b56; box-shadow: 0 24px 64px #000b, inset 0 1px #e7cc8420; }
.tutorial-menu-btn { border-color: #696477 !important; color: #c5bdde !important; }
.hero-stats-container { padding: 8px 10px; background: linear-gradient(135deg, #13121ccf, #08080dda); border: 1px solid #b49b542c; border-radius: 8px; }
.hero-target-row { min-height: 30px; cursor: pointer; border-radius: 4px; }
.hero-target-row:hover { background: #c6a45c0d; }
.deck-display.interactive { min-width: 44px; min-height: 44px; }
.board.is-my-turn { box-shadow: inset 0 0 36px #7c3aed09; }
.board .card.ready { border-color: #4c9f80; box-shadow: 0 0 0 1px #4c9f8040, 0 6px 18px #0009; }
.board .card.exhausted { opacity: .9; filter: saturate(.65) brightness(.85); }
.selected-for-play { outline: 3px solid #e4c985; outline-offset: 3px; }
#end-turn-btn-bottom:not(:disabled) { background: linear-gradient(135deg, #493955, #231b31); border-color: #c6a45c; }
#surrender-btn { color: #a9999c; border-color: #5a4148; padding: 10px 16px; font-size: 12px; }
.deck-builder-filters { flex-wrap: wrap; gap: 10px; }
#filter-search { flex: 1; min-width: 160px; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #b6bdca; font-size: 12px; margin-bottom: 10px; }
.catalog-toolbar label { display: flex; gap: 8px; align-items: center; min-height: 36px; }
#deck-analysis { width: 100%; box-sizing: border-box; margin: 8px auto 12px; padding: 10px 14px; background: #08080da6; border: 1px solid #c6a45c25; border-radius: 6px; }
#deck-analysis p { margin: 0 0 6px; color: #c9c2b1; }
#deck-analysis summary { cursor: pointer; padding: 4px 0; color: var(--gold); }
.deck-suggestions { display: flex; gap: 8px; flex-wrap: wrap; }
.deck-suggestions button { flex: 1; min-width: 140px; padding: 8px; text-align: left; background: #181321; color: #d6c499; border: 1px solid #594c68; border-radius: 5px; cursor: pointer; }
.deck-suggestions span { display: block; color: #aaa4b8; font-size: 11px; margin-top: 4px; }
.builder-card-controls { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 6px; }
.builder-card-controls button { min-width: 32px; height: 36px; padding: 0; border: 1px solid #6e5b3c; border-radius: 5px; background: #16131b; color: #dfc58b; cursor: pointer; font-size: 20px; }
.builder-card-controls span { font-size: 12px; color: #c9c2b1; min-width: 22px; }
.builder-card-wrapper.maxed { filter: none; }
.builder-card-wrapper.maxed > .card { filter: saturate(.65); }
.builder-card-wrapper { padding: 4px; border-radius: 6px; }
.deck-builder-grid { min-height: 100px; }
.deck-builder-menu-box { padding: 22px; gap: 0; }
.deck-builder-instructions { font-size: 12px; margin: 6px 0; }
.challenge-option { padding: 14px; border-radius: 6px; background: #111017; border-color: #7e6d443e; }
.challenge-option h3 { color: #d8bf87; margin: 0 0 6px; font-family: Cinzel, serif; font-size: 16px; }
.challenge-option p { color: #b0adbd; font-size: 13px; line-height: 1.5; }
#connection-status { align-self: center; border: 1px solid #5f977550; border-radius: 20px; color: #a1cbb2; background: #101b17; padding: 4px 12px; font-size: 11px; margin: 6px 0 2px; }
#connection-status[data-status="paused"] { background: #241c12; color: #dfc58b; border-color: #947a4850; }
#interaction-status { color: #b8b0c8; line-height: 1.4; padding: 5px 8px; }
.action-log-container { padding: 14px 20px; max-width: 380px; box-sizing: border-box; }
.action-log-title { font-size: 11px; margin-bottom: 5px; padding-bottom: 5px; }
.action-log-text { font-size: 24px; }
#challenge-objective:empty { display: none; }
#tutorial-panel { width: min(560px, 70vw); align-self: center; box-sizing: border-box; padding: 10px 14px; margin: 8px 0 0; background: #17131ff2; border: 1px solid #c6a45c80; border-radius: 8px; z-index: 20; }
#tutorial-copy strong { color: #dfc58b; font-size: 14px; }
#tutorial-copy p { font-size: 12px; line-height: 1.5; margin: 6px 0; color: #c7c3d0; }
#tutorial-panel button { border: 0; padding: 4px 0; color: #9790a7; cursor: pointer; background: transparent; font-size: 11px; }
.tutorial-target { outline: 2px solid #c6a45c99; outline-offset: -2px; }
@media (min-width: 701px) {
  #player-hand { padding-bottom: 32px; box-sizing: border-box; }
  .hand .card { height: clamp(130px, 20vh, 180px); width: clamp(87px, 13.5vh, 121px); }
}
@media (max-width: 700px) {
  body { min-height: 840px; overflow-y: auto; background-attachment: scroll; }
  body:has(#tutorial-panel:not([hidden])) { min-height: 950px; }
  .game-area { padding: 174px 0 174px; box-sizing: border-box; min-height: 840px; }
  .floating-ui { padding: 8px; gap: 6px; }
  .floating-ui.right .action-btn, .floating-ui.right .mana-slots { width: 108px; }
  .floating-ui.right .action-btn { min-height: 44px; padding: 10px 8px; font-size: 11px; }
  .hero-stats-container { padding: 5px 7px; }
  .player-stats-header { gap: 8px; margin-bottom: 4px; }
  .arena-slot { width: 36px; height: 48px; }
  .arena-slot-text { font-size: 8px; }
  .arena-slot .card { transform: scale(.4); }
  .deck-display img { width: 26px; height: 36px; }
  .deck-count, .hero-name { font-size: 11px; }
  .bar-wrapper { width: 82px; height: 14px; }
  .stat-val-out { width: 22px; font-size: 14px; }
  .stat-row { gap: 5px; margin-bottom: 3px; }
  .hero-target-row { min-height: 44px; }
  .hand { flex-basis: 16dvh; padding: 0 12px; min-height: 112px; }
  #enemy-hand { flex-basis: 7dvh; min-height: 48px; }
  #enemy-hand .card { width: 40px; height: 60px; margin-left: -16px; }
  .card { height: clamp(116px, 17dvh, 148px); width: clamp(77px, 11.3dvh, 99px); }
  .hand .card { margin-left: -24px; }
  .hand.active-hand .card:hover { transform: translateY(-16px) scale(1.04) rotate(0deg) !important; }
  .board { gap: 6px; padding: 0 8px; box-sizing: border-box; min-height: 112px; }
  .board .card { width: clamp(54px, calc((100vw - 48px) / 5), 88px); height: clamp(102px, 15dvh, 140px); }
  .card-name { font-size: 9px; padding: 4px 2px; }
  .card-desc-text { font-size: 9px; }
  .card-cost, .stat { width: 21px; height: 22px; font-size: 11px; }
  .trait-icons-container { font-size: 12px; gap: 2px; }
  .side-menu-buttons { top: 58px; right: 8px; left: auto; transform: none; gap: 5px; flex-direction: row; }
  .side-btn-float { width: 44px; height: 44px; }
  #main-menu .menu-box { padding: 24px; }
  .menu-subtitle { margin-bottom: 20px; font-size: 13px; }
  .menu-box { padding: 18px; }
  .deck-builder-menu-box { width: calc(100vw - 16px); max-width: none; max-height: 96dvh; padding: 12px; }
  .deck-builder-title { font-size: 22px; }
  .deck-builder-info { font-size: 14px; margin-bottom: 4px; }
  .deck-manager-bar { gap: 5px; margin-bottom: 8px; }
  .deck-manager-btn { padding: 8px !important; }
  .deck-select { min-width: 100%; max-width: none; }
  .deck-builder-filters { margin-bottom: 4px; }
  .filter-select { padding: 9px; font-size: 12px; }
  #filter-search { min-width: 100%; }
  .catalog-toolbar { margin-bottom: 4px; font-size: 11px; }
  .deck-grid { padding: 12px 4px; gap: 8px; }
  .builder-card-controls button { width: 32px; height: 40px; }
  .builder-card-controls { gap: 3px; }
  .builder-card-wrapper > .card { width: 100px; height: 145px; }
  .deck-builder-actions { margin-top: 10px; gap: 8px; }
  .deck-builder-actions button { font-size: 11px; min-height: 44px; padding: 10px; }
  #interaction-status, #challenge-objective { max-width: 100%; box-sizing: border-box; }
  #tutorial-panel { width: calc(100% - 20px); margin-top: 2px; padding: 8px 10px; }
  #tutorial-copy p { font-size: 11px; line-height: 1.4; }
  .action-log-container { max-width: 75vw; }
  .action-log-text { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Optional lighter rendering keeps the existing colors and card artwork. */
.settings-toggle { display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer; color:var(--gold); text-align:left; }
.settings-toggle input { width:20px; height:20px; accent-color:var(--p-color); flex-shrink:0; }
.settings-toggle small { display:block; color:#b8b4bd; font-size:12px; margin-top:4px; }
body.lightweight .fullscreen-overlay, body.lightweight .wiki-modal-overlay, body.lightweight .menu-box, body.lightweight .history-panel { backdrop-filter:none; -webkit-backdrop-filter:none; }
body.lightweight .card, body.lightweight .card-img img, body.lightweight .dragging-modern, body.lightweight #arrow-path { filter:none !important; }
body.lightweight .card { box-shadow:0 2px 5px #0008 !important; }
body.lightweight .card.ready { outline:1px solid #4c9f80; }
body.lightweight .card.selected-for-play { outline:2px solid var(--gold); }
body.lightweight .playable, body.lightweight .hp-fill, body.lightweight .armor-fill, body.lightweight #arrow-path { animation:none !important; }
body.lightweight .card.exhausted { opacity:.72; }
body.fast-animations .floating-damage { animation-duration:.55s; }
body.fast-animations .being-attacked, body.fast-animations .healing, body.fast-animations .buffing, body.fast-animations .hero-damage { animation-duration:.16s; }