/* =====================================================
   IL GIUOCO DELLA TRADIZIONE — FOGLIO DI STILE UNICO
   =====================================================
   Questo file è la fonte canonica di tutti gli stili del
   progetto. L'ordine è fondamentale:

   LAYER 1 (BASE)     - regole di base del gioco
   LAYER 2 (OVERRIDE) - miglioramenti UI che estendono il base
   LAYER 3 (MOBILE)   - regole responsive per schermi piccoli

   Quando il LAYER 2 ridefinisce una regola del LAYER 1, vince
   il LAYER 2 grazie all'ordine nella cascata CSS.
   ===================================================== */

        :root {
            --bg-deep: #0d0d1a;
            --bg-panel: rgba(18, 18, 36, 0.85);
            --bg-glass: rgba(30, 30, 60, 0.72);
            --border-subtle: rgba(120, 120, 180, 0.35);
            --gold: #ffd700;
            --gold-dim: #c9a227;
            --accent: #f39c12;
            --accent-hot: #e74c3c;
            --accent-cool: #3498db;
            --accent-ok: #2ecc71;
            --text-muted: #95a5a6;
            --glow-gold: 0 0 24px rgba(255, 215, 0, 0.25);
            --glow-accent: 0 0 20px rgba(243, 156, 18, 0.35);
            --radius-lg: 16px;
            --radius-md: 10px;
            --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.45);
            --transition-fast: 0.15s ease;
            --transition-med: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }

        body {
            font-family: 'VT323', monospace;
            background-color: var(--bg-deep);
            background-image:
                radial-gradient(ellipse 80% 50% at 50% -10%, rgba(118, 7, 192, 0.35) 0%, transparent 55%),
                radial-gradient(ellipse 60% 40% at 100% 100%, rgba(231, 76, 60, 0.12) 0%, transparent 50%),
                radial-gradient(#3a0d5c 1px, transparent 1px),
                radial-gradient(#3a0d5c 1px, var(--bg-deep) 1px);
            background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
            background-position: 0 0, 0 0, 0 0, 16px 16px;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.03) 0%, transparent 40%),
                        radial-gradient(circle at 80% 70%, rgba(52, 152, 219, 0.04) 0%, transparent 35%);
            pointer-events: none;
            z-index: 0;
            animation: ambientShift 12s ease-in-out infinite alternate;
        }

        @keyframes ambientShift {
            from { opacity: 0.6; transform: scale(1); }
            to { opacity: 1; transform: scale(1.02); }
        }

        #app { position: relative; z-index: 1; }

        .font-pixel { font-family: 'Press Start 2P', cursive; }

        /* Screen transitions */
        @keyframes screenEnter {
            from { opacity: 0; transform: translateY(18px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .screen-animate-in { animation: screenEnter 0.45s var(--transition-med) forwards; }

        @keyframes menuStagger {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .menu-stagger > * { animation: menuStagger 0.5s ease backwards; }
        .menu-stagger > *:nth-child(1) { animation-delay: 0.05s; }
        .menu-stagger > *:nth-child(2) { animation-delay: 0.12s; }
        .menu-stagger > *:nth-child(3) { animation-delay: 0.19s; }
        .menu-stagger > *:nth-child(4) { animation-delay: 0.26s; }
        .menu-stagger > *:nth-child(5) { animation-delay: 0.33s; }

        /* Shared page panels */
        .page-shell {
            width: 100%;
            max-width: 52rem;
            margin: 0 auto;
            padding: 1rem;
        }
        .page-panel {
            background: var(--bg-glass);
            backdrop-filter: blur(12px);
            border: 2px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-panel);
            padding: 1.5rem;
        }
        .page-header {
            text-align: center;
            margin-bottom: 1.25rem;
        }
        .page-header h1 {
            font-size: clamp(1.25rem, 4vw, 2rem);
            margin-bottom: 0.35rem;
        }
        .page-subtitle { color: var(--text-muted); font-size: 1.15rem; }

        /* Preloader */
        #preloader {
            position: fixed; inset: 0;
            background: linear-gradient(160deg, #0d0d1a 0%, #1a1a2e 45%, #16213e 100%);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            z-index: 99999;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }
        #preloader.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
        .preloader-logo {
            font-family: 'Press Start 2P', cursive;
            font-size: clamp(1rem, 4vw, 1.75rem);
            color: var(--gold);
            text-shadow: 3px 3px 0 #000, 0 0 30px rgba(255, 215, 0, 0.3);
            margin-bottom: 2rem;
            padding: 0 1.25rem;
            text-align: center;
            line-height: 1.6;
            animation: preloaderPulse 2s ease-in-out infinite;
        }
        @keyframes preloaderPulse {
            0%, 100% { text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 215, 0, 0.2); }
            50% { text-shadow: 3px 3px 0 #000, 0 0 40px rgba(255, 215, 0, 0.5); }
        }
        .preloader-bar-track {
            width: min(280px, 80vw);
            height: 8px;
            background: rgba(0,0,0,0.5);
            border: 2px solid var(--border-subtle);
            border-radius: 99px;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        .preloader-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--accent), var(--gold));
            border-radius: 99px;
            transition: width 0.2s ease;
            box-shadow: 0 0 12px rgba(243, 156, 18, 0.6);
        }
        #preloader-text {
            font-size: 1.25rem;
            color: var(--gold);
            min-height: 1.5rem;
        }
        .preloader-tagline { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.5rem; }
        /* COMPACT CARD DESIGN */
        .card {
            width: 110px;
            height: 150px;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 
            border: 2px solid #f0e68c;
            background: linear-gradient(145deg, #2c2c54, #1a1a2e);
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
            position: relative; 
            user-select: none;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.7);
        }
        
        /* Codice Colore Fazioni */
        .faction-Politica { border-color: #3498db; }
        .faction-Spettacolo { border-color: #e91e63; }
        .faction-Cultura { border-color: #2ecc71; }
        .faction-Imprenditoria { border-color: #f1c40f; }
        .faction-Cronaca { border-color: #e74c3c; }

        /* Card Header con Costo */
        .card-header {
            background: rgba(0,0,0,0.6);
            padding: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 24px;
        }
        
        .card-cost {
            background: #f39c12;
            color: #000;
            font-weight: bold;
            font-size: 0.9rem;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        
        .card-name {
            font-size: 0.65rem;
            font-weight: bold;
            color: #ffd700;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            max-width: 70px;
        }
        
        /* Card Image/Icon Area */
        .card-image {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            background: radial-gradient(circle, rgba(255,255,255,0.1), transparent);
        }
        .card-image img {
            display: block;
            margin: 0 auto;
            object-fit: contain;
            object-position: center center;
        }
        
        /* Card Stats Footer */
        .card-stats {
            background: rgba(0,0,0,0.7);
            padding: 4px;
            display: flex;
            justify-content: space-around;
            height: 28px;
            border-top: 1px solid rgba(255,215,0,0.3);
        }
        
        .card-stat {
            display: flex;
            align-items: center;
            gap: 2px;
            font-size: 0.85rem;
            font-weight: bold;
        }
        
        .card-stat-atk { color: #e74c3c; }
        .card-stat-def { color: #3498db; }
        
        .card-stat-icon {
            font-size: 0.7rem;
        }

        /* Card States */
        .card.can-attack { 
            border-color: #1dd1a1; 
            box-shadow: 0 0 12px #1dd1a1; 
            animation: pulse-green 1.5s infinite;
        }
        
        @keyframes pulse-green {
            0%, 100% { box-shadow: 0 0 12px #1dd1a1; }
            50% { box-shadow: 0 0 20px #1dd1a1; }
        }
        
        .card.is-attacking { 
            border-color: #ff6b6b; 
            transform: scale(1.1) translateY(-5px); 
            box-shadow: 0 0 20px #ff6b6b;
        }
        
        .card.has-attacked { 
            border-color: #7f8c8d; 
            opacity: 0.6; 
        }
        
        .card-in-hand.selected {
            transform: translateY(-15px) scale(1.05);
            border-color: #8e44ad;
            box-shadow: 0 0 20px #8e44ad;
            z-index: 10;
        }
        
        .card-on-field.targetable { 
            border-color: #e74c3c; 
            box-shadow: 0 0 15px #e74c3c; 
            cursor: crosshair; 
        }
        
        .card-on-field.equip-target { 
            border-color: #9b59b6; 
            box-shadow: 0 0 15px #9b59b6; 
        }
        
        .card-on-field.debuff-target { 
            border-color: #e67e22; 
            box-shadow: 0 0 15px #e67e22; 
        }
        
        .btn-retro {
            background: linear-gradient(180deg, #f5b041 0%, var(--accent) 100%);
            color: #1a1a2e;
            border: 2px solid #e67e22;
            box-shadow: 0 4px 0 #d35400, inset 0 1px 0 rgba(255,255,255,0.25);
            transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
            padding: 10px 20px;
            font-size: 1.2rem;
            text-transform: uppercase;
            border-radius: 8px;
            cursor: pointer;
        }
        .btn-retro:hover:not(:disabled) { filter: brightness(1.08); }
        .btn-retro:disabled { background: #95a5a6; border-color: #7f8c8d; box-shadow: 0 4px 0 #6c7a7b; cursor: not-allowed; filter: none; }
        .btn-retro:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 #d35400; }

        /* Menu iniziale */
        .menu-hero { margin-bottom: 1.5rem; }
        .menu-hero h1 {
            background: linear-gradient(180deg, #fff8dc 0%, var(--gold) 50%, var(--gold-dim) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.8));
        }
        .menu-tagline { color: var(--text-muted); font-size: 1.15rem; margin-top: 0.5rem; font-style: italic; }
        .menu-panel {
            width: 100%; max-width: 440px;
            background: var(--bg-glass);
            backdrop-filter: blur(14px);
            border: 2px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 1.35rem 1.5rem 1.5rem;
            box-shadow: var(--shadow-panel), var(--glow-gold);
            text-align: left;
        }
        .menu-section-label {
            font-family: 'Press Start 2P', cursive;
            font-size: 0.5rem;
            color: #f39c12;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 1.25rem 0 0.6rem;
            text-align: left;
            width: 100%;
            display: block;
        }
        .menu-section-label:first-of-type { margin-top: 0; }
        .btn-retro-primary {
            width: 100%;
            font-size: 1rem;
            padding: 14px 20px;
            background-color: #e74c3c;
            color: #fff;
            border-color: #c0392b;
            box-shadow: 0 4px 0 #a93226;
        }
        .btn-retro-primary:active:not(:disabled) { box-shadow: 0 0 0 #a93226; }
        .menu-mode-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
        }
        .menu-mode-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;
            padding: 0.75rem 0.5rem;
            background: rgba(44, 44, 84, 0.65);
            border: 2px solid var(--border-subtle);
            border-radius: var(--radius-md);
            color: var(--gold);
            cursor: pointer;
            transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
            font-family: 'VT323', monospace;
            font-size: 1.1rem;
        }
        .menu-mode-card:hover {
            border-color: var(--accent);
            background: rgba(243, 156, 18, 0.18);
            box-shadow: var(--glow-accent);
            transform: translateY(-2px);
        }
        .menu-mode-card:active { transform: scale(0.97) translateY(0); }
        .menu-mode-icon { font-size: 1.6rem; line-height: 1; }
        .menu-mode-card-wide { grid-column: 1 / -1; flex-direction: row; gap: 0.5rem; padding: 0.6rem; }
        .menu-row { display: flex; gap: 0.5rem; }
        .btn-retro-compact {
            flex: 1;
            font-size: 0.8rem;
            padding: 10px 8px;
            text-transform: none;
        }
        .menu-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.15rem;
            margin-top: 1.25rem;
        }
        .menu-footer-btn {
            background: none;
            border: none;
            color: #95a5a6;
            cursor: pointer;
            padding: 6px 10px;
            font-family: 'VT323', monospace;
            font-size: 1.15rem;
            transition: color 0.15s;
        }
        .menu-footer-btn:hover { color: #ffd700; }
        .menu-footer-sep { color: #4a4a7c; user-select: none; }
        .menu-context {
            margin-top: 0.75rem;
            font-size: 1rem;
            color: #95a5a6;
            text-align: center;
        }
        .menu-context strong { color: #ffd700; }

        /* Deck editor */
        .deck-editor-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        .deck-editor-toolbar input,
        .deck-editor-toolbar select {
            background: #1a1a2e;
            color: #ffd700;
            border: 1px solid #4a4a7c;
            border-radius: 6px;
            padding: 6px 10px;
            font-family: 'VT323', monospace;
            font-size: 1rem;
        }
        .deck-filter-btn {
            background: rgba(44, 44, 84, 0.8);
            border: 2px solid #4a4a7c;
            color: #ffd700;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-family: 'VT323', monospace;
            font-size: 1rem;
        }
        .deck-filter-btn.active { border-color: #f39c12; background: rgba(243, 156, 18, 0.2); }
        .deck-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 0.5rem;
        }
        .deck-card-tile-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
        }
        .deck-card-tile {
            width: 90px;
            height: 120px;
            font-size: 0.55rem;
        }
        .deck-card-tile .card-name { max-width: 52px; font-size: 0.5rem; }
        .deck-card-tile .card-image { font-size: 1.8rem; }
        .deck-card-tile .card-image img { width: 2rem !important; height: 2rem !important; }
        .deck-card-tile .card-stats { height: 22px; }
        .deck-card-tile .card-stat { font-size: 0.65rem; }
        .deck-tile-actions {
            display: flex;
            gap: 0.25rem;
            align-items: center;
        }
        .deck-tile-btn {
            width: 28px;
            height: 28px;
            border: 2px solid #f39c12;
            background: #2c2c54;
            color: #ffd700;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.1rem;
            line-height: 1;
        }
        .deck-tile-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .deck-tile-count { font-size: 0.9rem; color: #f39c12; min-width: 1.2rem; text-align: center; }
        #deck-count.valid { color: #2ecc71; }
        #deck-count.warn { color: #f39c12; }
        #deck-count.invalid { color: #e74c3c; }

        /* Stats & achievements */
        .stats-section { margin-bottom: 1.25rem; }
        .stats-section h3 {
            font-family: 'Press Start 2P', cursive;
            font-size: 0.65rem;
            color: #f39c12;
            margin-bottom: 0.5rem;
        }
        .achievement-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 0.5rem;
        }
        .achievement-item {
            background: rgba(0,0,0,0.35);
            border: 2px solid var(--border-subtle);
            border-radius: var(--radius-md);
            padding: 0.65rem;
            text-align: center;
            font-size: 0.85rem;
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        }
        .achievement-item.unlocked {
            border-color: var(--accent);
            box-shadow: inset 0 0 20px rgba(243,156,18,0.08);
        }
        .achievement-item.unlocked:hover { transform: scale(1.03); }
        .achievement-item.locked { opacity: 0.5; filter: grayscale(0.6); }
        .achievement-icon { font-size: 1.5rem; }
        .achievement-name { font-weight: bold; margin: 0.25rem 0; }
        .enemy-list { list-style: none; padding: 0; }
        .enemy-list li { padding: 0.25rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }

        /* Campaign levels */
        .campaign-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 0.75rem;
            max-width: 48rem;
        }
        .campaign-level-card {
            background: var(--bg-glass);
            backdrop-filter: blur(8px);
            border: 2px solid var(--border-subtle);
            border-radius: var(--radius-md);
            padding: 1rem;
            text-align: left;
            cursor: pointer;
            transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
        }
        .campaign-level-card:hover:not(:disabled) {
            border-color: var(--accent);
            transform: translateY(-3px);
            box-shadow: var(--glow-accent);
        }
        .campaign-level-card:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
        .campaign-level-card.completed { border-color: var(--accent-ok); }
        .campaign-badge {
            display: inline-block;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 4px;
            margin-top: 0.5rem;
        }
        .campaign-badge.open { background: #f39c12; color: #1a1a2e; }
        .campaign-badge.done { background: #2ecc71; color: #1a1a2e; }
        .campaign-badge.locked { background: #4a4a7c; color: #95a5a6; }

        /* Draft picks */
        .draft-pick-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }
        .draft-pick-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }
        .draft-pick-wrap:hover .card { border-color: #f39c12; }
        
        .battle-log {
            background: rgba(0,0,0,0.75);
            border: 2px solid rgba(243, 156, 18, 0.4);
            border-radius: var(--radius-md);
            max-height: 120px;
            overflow-y: auto;
            padding: 10px 12px;
            font-size: 1rem;
            text-align: left;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) var(--bg-deep);
            font-family: 'VT323', monospace;
            line-height: 1.45;
        }
        .battle-log .log-entry-new { animation: logSlideIn 0.35s ease; }
        @keyframes logSlideIn {
            from { opacity: 0; transform: translateX(-8px); color: var(--accent); }
            to { opacity: 1; transform: translateX(0); color: inherit; }
        }
        .text-shadow-gold { text-shadow: 2px 2px 4px var(--accent), 0 0 20px rgba(243,156,18,0.3); }

        /* Game arena layout */
        .game-arena {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            width: 100%;
            flex-grow: 1;
            padding: 0.25rem 0;
        }
        .hud-panel {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 0.85rem;
            background: var(--bg-glass);
            backdrop-filter: blur(8px);
            border: 2px solid var(--border-subtle);
            border-radius: var(--radius-md);
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        }
        .hud-panel.enemy-hud { border-color: rgba(231, 76, 60, 0.35); }
        .hud-panel.player-hud { border-color: rgba(52, 152, 219, 0.35); }
        .hud-avatar {
            flex-shrink: 0;
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: 'Press Start 2P', cursive;
            font-size: 0.55rem;
            border: 3px solid;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        .hud-avatar.enemy { background: linear-gradient(145deg, #5c1a1a, #2d0f0f); border-color: #c0392b; }
        .hud-avatar.player { background: linear-gradient(145deg, #1a3a5c, #0f1f2d); border-color: #2980b9; }
        .hud-avatar.targetable { border-color: var(--accent-hot) !important; box-shadow: 0 0 20px rgba(231,76,60,0.6); animation: targetPulse 1.2s ease infinite; }
        @keyframes targetPulse {
            0%, 100% { box-shadow: 0 0 12px rgba(231,76,60,0.5); }
            50% { box-shadow: 0 0 24px rgba(231,76,60,0.8); }
        }
        .hud-stats { flex: 1; min-width: 0; text-align: left; }
        .hud-name { font-weight: bold; font-size: 1.1rem; color: var(--gold); margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hud-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.95rem; color: var(--text-muted); }
        .hud-meta strong { color: var(--gold); }
        .hud-bar-group { margin-top: 0.35rem; }
        .hud-bar-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 2px; }
        .hud-bar-label span:last-child { color: var(--gold); font-weight: bold; }
        .hud-bar-track {
            height: 10px;
            background: rgba(0,0,0,0.5);
            border-radius: 99px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .hud-hp-fill {
            height: 100%;
            border-radius: 99px;
            transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .hud-hp-fill.enemy { background: linear-gradient(90deg, #c0392b, #e74c3c); box-shadow: 0 0 8px rgba(231,76,60,0.5); }
        .hud-hp-fill.player { background: linear-gradient(90deg, #2471a3, #3498db); box-shadow: 0 0 8px rgba(52,152,219,0.5); }
        .hud-hp-fill.low { animation: hpLowPulse 1s ease infinite; }
        @keyframes hpLowPulse {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.3); }
        }
        .hud-cred-fill {
            height: 100%;
            border-radius: 99px;
            background: linear-gradient(90deg, var(--gold-dim), var(--gold));
            transition: width 0.4s ease;
            box-shadow: 0 0 6px rgba(255,215,0,0.4);
        }
        .field-zone {
            background: rgba(0,0,0,0.25);
            border: 2px solid var(--border-subtle);
            border-radius: var(--radius-md);
            padding: 0.5rem;
        }
        .field-zone.enemy-zone { background: linear-gradient(180deg, rgba(192,57,43,0.08) 0%, rgba(0,0,0,0.2) 100%); }
        .field-zone.player-zone { background: linear-gradient(0deg, rgba(41,128,185,0.08) 0%, rgba(0,0,0,0.2) 100%); }
        .field-slot {
            border: 2px dashed rgba(120, 120, 180, 0.4);
            min-height: 170px;
            border-radius: var(--radius-md);
            transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            background: rgba(0,0,0,0.15);
        }
        .field-slot.droppable {
            background-color: rgba(52, 152, 219, 0.18);
            border-color: var(--accent-cool);
            border-style: solid;
            box-shadow: inset 0 0 20px rgba(52,152,219,0.2);
            cursor: pointer;
            animation: slotPulse 1.5s ease infinite;
        }
        @keyframes slotPulse {
            0%, 100% { box-shadow: inset 0 0 12px rgba(52,152,219,0.15); }
            50% { box-shadow: inset 0 0 24px rgba(52,152,219,0.35); }
        }
        .battle-console {
            display: flex;
            gap: 0.75rem;
            align-items: stretch;
            padding: 0.25rem 0;
        }
        .battle-console .battle-log { flex: 1; min-width: 0; }
        .battle-actions {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            flex-shrink: 0;
        }
        .turn-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.4rem 1rem;
            background: rgba(0,0,0,0.5);
            border: 2px solid var(--border-subtle);
            border-radius: 99px;
            font-size: 1.1rem;
            color: var(--gold);
            transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
        }
        .turn-badge.active-turn {
            border-color: var(--accent);
            box-shadow: var(--glow-accent);
            animation: turnGlow 2s ease infinite;
        }
        .turn-badge.enemy-turn { border-color: rgba(231,76,60,0.5); color: #ffaaaa; }
        @keyframes turnGlow {
            0%, 100% { box-shadow: 0 0 12px rgba(243,156,18,0.3); }
            50% { box-shadow: 0 0 24px rgba(243,156,18,0.55); }
        }
        .hand-zone {
            margin-top: auto;
            padding: 0.5rem 0 0.25rem;
            background: linear-gradient(0deg, rgba(13,13,26,0.95) 0%, transparent 100%);
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
        }
        .hand-zone-label {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 0.25rem;
            letter-spacing: 1px;
        }
        .hud-bars-inline {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }
        .battle-mid {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.35rem;
        }

        /* Desktop: arena centrata, usa lo spazio disponibile */
        @media (min-width: 769px) {
            body.game-active {
                overflow: hidden;
                height: 100vh;
                height: 100dvh;
                padding: 0.35rem 0.5rem;
            }
            body.game-active #app {
                height: 100%;
                min-height: 0;
                max-height: 100%;
            }
            #game-screen {
                height: 100%;
                min-height: 0;
                overflow: hidden;
                justify-content: center;
                align-items: center;
                position: relative;
            }
            .game-arena {
                width: 100%;
                max-width: 1100px;
                height: min(100%, calc(100dvh - 0.75rem));
                min-height: 0;
                flex: 1 1 auto;
                gap: 0.35rem;
                display: grid;
                grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
                grid-template-areas:
                    "enemy-hud"
                    "enemy-field"
                    "battle-mid"
                    "player-field"
                    "hand-zone";
                margin: auto 0;
            }
            .enemy-field-wrap,
            .player-field-wrap {
                min-height: 0;
                display: flex;
                flex-direction: column;
            }
            .enemy-field-wrap #ai-field,
            .player-field-wrap #player-field {
                flex: 1;
                min-height: 0;
                align-content: center;
            }
            .enemy-hud-wrap { grid-area: enemy-hud; }
            .enemy-field-wrap { grid-area: enemy-field; }
            .battle-mid { grid-area: battle-mid; }
            .player-field-wrap { grid-area: player-field; }
            .hand-zone {
                grid-area: hand-zone;
                min-height: 0;
                margin-top: 0;
                display: flex;
                flex-direction: column;
                padding: 0.15rem 0 0;
                flex-shrink: 0;
            }
            .hud-panel {
                padding: 0.3rem 0.55rem;
                gap: 0.5rem;
            }
            .hud-panel.compact-hud .hud-avatar { width: 40px; height: 40px; }
            .hud-panel.compact-hud .hud-name {
                font-size: 0.95rem;
                margin-bottom: 0;
                display: inline;
            }
            .hud-panel.compact-hud .hud-head {
                display: flex;
                align-items: baseline;
                flex-wrap: wrap;
                gap: 0.35rem 0.75rem;
                margin-bottom: 0.2rem;
            }
            .hud-panel.compact-hud .hud-meta {
                font-size: 0.85rem;
                gap: 0.5rem;
            }
            .hud-bars-inline {
                flex-direction: row;
                gap: 0.75rem;
            }
            .hud-bars-inline .hud-bar-group {
                flex: 1;
                margin-top: 0;
                min-width: 0;
            }
            .hud-bar-track { height: 7px; }
            .hud-bar-label { font-size: 0.75rem; margin-bottom: 1px; }
            .field-zone { padding: 0.4rem; flex: 1; min-height: 0; }
            .field-slot {
                min-height: 0;
                height: 100%;
                min-height: 148px;
                max-height: 172px;
            }
            .field-slot .card-on-field {
                width: 106px;
                height: 146px;
                transform-origin: center center;
            }
            .field-slot .card-on-field .card-name { font-size: 0.6rem; max-width: 64px; }
            .field-slot .card-on-field .card-image { font-size: 2.4rem; }
            .field-slot .card-on-field .card-image img { width: 2.75rem !important; height: 2.75rem !important; }
            .field-slot .card-on-field .card-stats { height: 26px; }
            .field-slot .card-on-field .card-stat { font-size: 0.78rem; }
            .battle-mid {
                flex-direction: row;
                align-items: stretch;
                gap: 0.5rem;
            }
            .battle-mid .turn-badge {
                flex-shrink: 0;
                align-self: center;
                font-size: 0.9rem;
                padding: 0.3rem 0.65rem;
                white-space: nowrap;
            }
            .battle-console {
                flex: 1;
                min-width: 0;
                padding: 0;
            }
            .battle-log {
                max-height: 72px;
                font-size: 0.95rem;
                padding: 6px 10px;
                line-height: 1.4;
            }
            .battle-actions {
                flex-direction: row;
                align-items: center;
            }
            .battle-actions .btn-retro {
                font-size: 0.75rem;
                padding: 6px 10px;
                white-space: nowrap;
            }
            #end-turn-btn { min-height: auto; }
            .hand-zone-label { display: none; }
            .hand-zone .hud-panel.player-hud { margin-bottom: 0.25rem !important; }
            #player-hand {
                height: auto;
                min-height: 0;
                flex: 0 0 auto;
                max-height: 168px;
                align-items: flex-end;
            }
            #player-hand .card-in-hand {
                width: 106px;
                height: 146px;
            }
            #player-hand .card-in-hand .card-image { font-size: 2.4rem; }
        }

        @media (min-width: 769px) and (max-height: 820px) {
            .field-slot { min-height: 128px; max-height: 148px; }
            .field-slot .card-on-field { width: 96px; height: 132px; }
            #player-hand { max-height: 140px; }
            #player-hand .card-in-hand { width: 96px; height: 132px; }
            .battle-log { max-height: 56px; }
        }
        @keyframes cardDealIn {
            from { opacity: 0; transform: translateY(30px) scale(0.85) rotate(-3deg); }
            to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
        }
        .card-deal-in { animation: cardDealIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
        .card-deal-in:nth-child(1) { animation-delay: 0.02s; }
        .card-deal-in:nth-child(2) { animation-delay: 0.06s; }
        .card-deal-in:nth-child(3) { animation-delay: 0.10s; }
        .card-deal-in:nth-child(4) { animation-delay: 0.14s; }
        .card-deal-in:nth-child(5) { animation-delay: 0.18s; }
        .card-deal-in:nth-child(6) { animation-delay: 0.22s; }
        .card-deal-in:nth-child(7) { animation-delay: 0.26s; }
        .card-deal-in:nth-child(n+8) { animation-delay: 0.30s; }

        /* End screen */
        .end-screen-panel {
            text-align: center;
            padding: 2rem;
            max-width: 32rem;
            background: var(--bg-glass);
            backdrop-filter: blur(14px);
            border-radius: var(--radius-lg);
            border: 2px solid var(--border-subtle);
            box-shadow: var(--shadow-panel);
            animation: screenEnter 0.6s ease;
        }
        .end-screen-panel.victory { border-color: rgba(46, 204, 113, 0.5); box-shadow: var(--shadow-panel), 0 0 40px rgba(46,204,113,0.2); }
        .end-screen-panel.defeat { border-color: rgba(231, 76, 60, 0.5); box-shadow: var(--shadow-panel), 0 0 40px rgba(231,76,60,0.2); }
        @keyframes victoryShine {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.15); }
        }
        .end-screen-panel.victory #end-title { animation: victoryShine 2s ease infinite; color: #2ecc71; }

        /* Modal enter */
        @keyframes modalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes modalContentIn {
            from { opacity: 0; transform: scale(0.92) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .modal:not(.hidden) { animation: modalBackdropIn 0.25s ease; }
        .modal:not(.hidden) > .modal-content,
        .modal:not(.hidden) > .intro-content,
        .modal:not(.hidden) > .tutorial-content,
        #intro-modal:not(.hidden) .intro-content,
        #options-modal:not(.hidden) > div {
            animation: modalContentIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* --- Animazioni combattimento --- */
        .card-on-field, .hud-avatar { position: relative; }

        @keyframes combatLunge {
            0% { transform: translate(0, 0) scale(1) rotate(0deg); filter: brightness(1); }
            20% { transform: translate(calc(var(--lunge-x) * 0.12), calc(var(--lunge-y) * 0.12)) scale(1.06) rotate(-2deg); filter: brightness(1.15); }
            42% { transform: translate(var(--lunge-x), var(--lunge-y)) scale(1.14) rotate(2deg); filter: brightness(1.35); box-shadow: 0 0 28px rgba(255, 80, 60, 0.55); }
            68% { transform: translate(calc(var(--lunge-x) * 0.35), calc(var(--lunge-y) * 0.35)) scale(1.04); filter: brightness(1.1); }
            100% { transform: translate(0, 0) scale(1) rotate(0deg); filter: brightness(1); box-shadow: none; }
        }
        .combat-lunge { animation: combatLunge 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important; z-index: 20 !important; }

        @keyframes combatHit {
            0% { transform: translate(0, 0) scale(1); filter: brightness(1); }
            12% { transform: translate(calc(var(--hit-x) * -0.35), calc(var(--hit-y) * -0.35)) scale(0.92); filter: brightness(2.2) saturate(1.6); }
            35% { transform: translate(calc(var(--hit-x) * -0.12), calc(var(--hit-y) * -0.12)) scale(0.97); filter: brightness(1.4); }
            100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
        }
        .combat-hit { animation: combatHit 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important; }

        @keyframes combatWindup {
            0% { transform: scale(1); box-shadow: none; }
            50% { transform: scale(1.08); box-shadow: 0 0 18px rgba(243, 156, 18, 0.45); }
            100% { transform: scale(1.04); }
        }
        .combat-windup { animation: combatWindup 0.18s ease-out !important; }

        @keyframes damageFloat {
            0% { opacity: 0; transform: translate(-50%, 12px) scale(0.4); }
            18% { opacity: 1; transform: translate(-50%, -4px) scale(1.2); }
            35% { transform: translate(-50%, -12px) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -58px) scale(0.85); }
        }
        .damage-popup {
            position: absolute;
            top: 42%;
            left: 50%;
            font-family: 'Press Start 2P', cursive;
            font-size: 1.1rem;
            font-weight: bold;
            color: #ff6b6b;
            text-shadow: 2px 2px 0 #000, 0 0 12px rgba(231, 76, 60, 0.8);
            animation: damageFloat 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            pointer-events: none;
            z-index: 120;
            white-space: nowrap;
        }
        .damage-popup.crit {
            color: #ff2222;
            font-size: 1.35rem;
            text-shadow: 2px 2px 0 #000, 0 0 18px #ff0000, 0 0 32px rgba(255,0,0,0.6);
            animation-duration: 1.15s;
        }
        .damage-popup.counter {
            color: #74b9ff;
            font-size: 0.95rem;
            top: 58%;
            text-shadow: 2px 2px 0 #000, 0 0 10px rgba(52, 152, 219, 0.7);
            animation-delay: 0.12s;
        }

        @keyframes combatDefeat {
            0% { transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
            30% { transform: scale(1.12) rotate(-4deg); opacity: 0.85; filter: blur(0) brightness(1.6); }
            100% { transform: scale(0) rotate(12deg); opacity: 0; filter: blur(6px); }
        }
        .poof { animation: combatDefeat 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }

        @keyframes combatImpactRing {
            0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; border-width: 4px; }
            100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; border-width: 1px; }
        }
        .combat-impact-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255, 120, 80, 0.9);
            border-radius: 50%;
            pointer-events: none;
            z-index: 110;
            animation: combatImpactRing 0.45s ease-out forwards;
        }
        .combat-impact-ring.crit { border-color: rgba(255, 40, 40, 0.95); width: 56px; height: 56px; }

        .combat-particle {
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 115;
            left: 50%;
            top: 50%;
            margin: -3px 0 0 -3px;
            animation: particleBurst 0.5s ease-out forwards;
        }
        @keyframes particleBurst {
            0% { transform: translate(0, 0) scale(1); opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
        }

        @keyframes combatFlash {
            0% { opacity: 0; }
            25% { opacity: 0.45; }
            100% { opacity: 0; }
        }
        #game-screen.combat-flash::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle, rgba(255, 80, 60, 0.35) 0%, transparent 70%);
            pointer-events: none;
            z-index: 40;
            animation: combatFlash 0.4s ease-out;
        }
        #game-screen.combat-flash-crit::after {
            background: radial-gradient(circle, rgba(255, 30, 30, 0.5) 0%, rgba(255, 200, 0, 0.15) 40%, transparent 75%);
            animation-duration: 0.55s;
        }

        @keyframes arenaShake {
            0%, 100% { transform: translate(0, 0); }
            15% { transform: translate(-6px, 3px); }
            30% { transform: translate(5px, -4px); }
            45% { transform: translate(-4px, -2px); }
            60% { transform: translate(4px, 3px); }
            75% { transform: translate(-2px, 1px); }
        }
        #game-screen.screen-shake { animation: arenaShake 0.45s ease-in-out; }
        #game-screen.screen-shake-heavy { animation: arenaShake 0.65s ease-in-out; animation-timing-function: cubic-bezier(0.36, 0, 0.2, 1); }

        @keyframes buff-effect { 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); } 100% { box-shadow: 0 0 25px 10px rgba(255, 215, 0, 0); } }
        .buff-effect { animation: buff-effect 0.8s ease-out !important; }

        @keyframes explosion {
            0% { transform: scale(1); opacity: 1; filter: brightness(1); }
            30% { transform: scale(1.2); opacity: 1; filter: brightness(1.8); }
            100% { transform: scale(1); opacity: 1; filter: brightness(1); }
        }
        .explosion { animation: explosion 0.5s ease-out !important; }
		
		/* ANIMAZIONI AGGIUNTIVE*/
		/*Lampeggio veloce tipo flash */
		@keyframes flash-effect { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
		.flash-effect {	animation: flash-effect 0.4s ease-in-out 3; /* 3 lampeggi */ }

		/* Bagliore pulsante blu */
		@keyframes blue-glow { 	0% { box-shadow: 0 0 0 0 rgba(0, 180, 255, 0.7); } 100% { box-shadow: 0 0 20px 10px rgba(0, 180, 255, 0); }	}
		.blue-glow {	animation: blue-glow 0.8s ease-out;	}

		/* Scintille dorate */
		@keyframes sparkle {	0% { filter: brightness(1); }	50% { filter: brightness(2) saturate(1.5); }	100% { filter: brightness(1); }		}
		.sparkle {		animation: sparkle 0.3s ease-in-out 5;	}

		/* Impulso rosso da colpo critico */
		@keyframes critical-hit {	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.8); }	50% { transform: scale(1.2); box-shadow: 0 0 25px 15px rgba(255, 0, 0, 0); } 100% { transform: scale(1); }	}
		.critical-hit {	animation: critical-hit 0.5s ease-out; }

		/* Ondata verde di cura */
		@keyframes heal-wave {	0% { box-shadow: 0 0 0 0 rgba(0, 255, 100, 0.8); }	100% { box-shadow: 0 0 30px 20px rgba(0, 255, 100, 0); }	}
		.heal-wave {	animation: heal-wave 1s ease-out;	}

		/* Vibrazione rapida */
		@keyframes rapid-shake {	0%, 100% { transform: translateX(0); }	20%, 60% { transform: translateX(-3px); }	40%, 80% { transform: translateX(3px); }	}
		.rapid-shake {	animation: rapid-shake 0.3s ease-in-out;}

/* Effetto scintille dorate in stile soldi */
		@keyframes money-rain {
			0% { background-position: 0 0; opacity: 1; }
			100% { background-position: 0 200%; opacity: 0; }
		}

		.money-effect {
			position: relative;
			overflow: hidden;
		}

		.money-effect::after {
			content: "";
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background-image: url('https://i.ibb.co/zJ3z1s1/money.png');
			background-repeat: repeat;
			background-size: 30px;
			animation: money-rain 1s linear forwards;
			pointer-events: none;
		}



        .player-avatar { transition: all 0.3s ease; cursor: crosshair; }
        .player-avatar.targetable, .hud-avatar.targetable {
            border-color: var(--accent-hot) !important;
            box-shadow: 0 0 20px rgba(231, 76, 60, 0.6);
        }

        .modal { 
            background-color: rgba(26, 26, 46, 0.95);
        }
        
        .modal.hidden {
            display: none !important;
        }
        
        #deck-editor-modal .modal-content { display: flex; flex-direction: column; height: 100%; }
        #deck-editor-modal .modal-body { flex-grow: 1; overflow-y: auto; }
        .deck-list { max-height: calc(100vh - 300px); overflow-y: auto; }
        @media (max-width: 768px) { .deck-list { max-height: 35vh; } }

	/* Intro Modal Styles */
	#intro-modal {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background-color: rgba(0, 0, 0, 0.95) !important;
		z-index: 9999 !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	
	#intro-modal.hidden {
		display: none !important;
	}
		
		.intro-content {
			background: linear-gradient(145deg, #2c2c54, #1a1a2e);
			border: 4px solid #f39c12;
			border-radius: 15px;
			padding: 30px;
			max-width: 700px;
			box-shadow: 0 0 40px rgba(243, 156, 18, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.5);
		}
		
		.portrait-container {
			width: 150px;
			height: 150px;
			margin: 0 auto 20px;
			border: 3px solid #f39c12;
			border-radius: 10px;
			background: linear-gradient(145deg, #1a1a2e, #0a0a1e);
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
		}
		
		.portrait-text {
			font-family: 'Press Start 2P', cursive;
			font-size: 3rem;
			color: #e74c3c;
			text-shadow: 3px 3px 6px #000;
		}
		
		.threat-text {
			min-height: 120px;
			font-size: 1.3rem;
			line-height: 1.6;
			color: #ffd700;
			text-align: center;
			margin-bottom: 25px;
			font-family: 'VT323', monospace;
		}
		
		.typewriter-text {
			display: inline-block;
		}
		
		.intro-button {
			background-color: #e74c3c;
			color: white;
			border: 3px solid #c0392b;
			box-shadow: 0 4px 0 #a93226;
			padding: 15px 30px;
			font-size: 1.3rem;
			font-family: 'Press Start 2P', cursive;
			text-transform: uppercase;
			cursor: pointer;
			transition: all 0.1s ease-in-out;
		}
		
		.intro-button:active {
			transform: translateY(4px);
			box-shadow: 0 0 0 #a93226;
		}
		
		.intro-button:hover {
			background-color: #f85545;
		}
		
		/* Tutorial Slideshow Styles */
		#tutorial-modal {
			align-items: center;
			justify-content: center;
		}
		
		#tutorial-modal:not(.hidden) {
			display: flex;
		}
		
		#tutorial-modal.hidden {
			display: none !important;
		}
		
		#tutorial-modal .tutorial-content {
			text-align: left;
		}

		.tutorial-content {
			background: linear-gradient(145deg, #2c2c54, #1a1a2e);
			border: 4px solid #f39c12;
			border-radius: 15px;
			padding: 30px 20px;
			max-width: 800px;
			width: 90%;
			max-height: 90vh;
			overflow-y: auto;
			box-shadow: 0 0 40px rgba(243, 156, 18, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.5);
			position: relative;
		}
		
		@media (max-width: 768px) {
			.tutorial-content {
				padding: 20px 15px;
				width: 95%;
			}
			
			.tutorial-btn {
				font-size: 0.7rem;
				padding: 8px 12px;
			}
			
			.tutorial-progress {
				font-size: 0.7rem;
			}
			
			.tutorial-slide h2 {
				font-size: 1.2rem;
			}
			
			.tutorial-slide p, .tutorial-slide ul {
				font-size: 1rem;
			}
		}
		
		.tutorial-slide {
			display: none;
			min-height: 300px;
		}
		
		.tutorial-slide.active {
			display: block;
			animation: slideIn 0.3s ease-in-out;
		}
		
		@keyframes slideIn {
			from { opacity: 0; transform: translateX(20px); }
			to { opacity: 1; transform: translateX(0); }
		}
		
		.tutorial-slide h2 {
			font-family: 'Press Start 2P', cursive;
			font-size: 1.5rem;
			color: #f39c12;
			text-shadow: 2px 2px 4px #000;
			margin-bottom: 20px;
			text-align: center;
		}
		
		.tutorial-slide p, .tutorial-slide ul {
			font-size: 1.2rem;
			line-height: 1.8;
			color: #ffd700;
			margin-bottom: 15px;
		}
		
		.tutorial-slide ul {
			list-style: none;
			padding-left: 0;
		}
		
		.tutorial-slide li {
			margin-bottom: 10px;
			padding-left: 25px;
			position: relative;
		}
		
		.tutorial-slide li:before {
			content: "▶";
			position: absolute;
			left: 0;
			color: #f39c12;
		}
		
		.tutorial-navigation {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30px;
			flex-wrap: wrap;
			gap: 10px;
		}
		
		.tutorial-btn {
			background-color: #f39c12;
			color: #2c3e50;
			border: 2px solid #e67e22;
			box-shadow: 0 4px 0 #d35400;
			padding: 10px 20px;
			font-size: 0.9rem;
			font-family: 'Press Start 2P', cursive;
			cursor: pointer;
			transition: all 0.1s ease-in-out;
			white-space: nowrap;
		}
		
		.tutorial-btn:hover {
			background-color: #f5a623;
		}
		
		.tutorial-btn:active {
			transform: translateY(4px);
			box-shadow: 0 0 0 #d35400;
		}
		
		.tutorial-btn:disabled {
			background-color: #95a5a6;
			border-color: #7f8c8d;
			box-shadow: 0 4px 0 #6c7a7b;
			cursor: not-allowed;
		}
		
		.tutorial-progress {
			text-align: center;
			color: #f39c12;
			font-family: 'Press Start 2P', cursive;
			font-size: 0.9rem;
		}
		
		.tutorial-dots {
			display: flex;
			justify-content: center;
			gap: 10px;
			margin-top: 10px;
		}
		
		.tutorial-dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: #4a4a7c;
			border: 2px solid #f39c12;
			transition: all 0.3s ease;
			cursor: pointer;
			padding: 0;
		}
		
		.tutorial-dot.active {
			background-color: #f39c12;
			box-shadow: 0 0 10px #f39c12;
		}
		
		/* Options Modal */
		#options-modal {
			position: fixed !important;
			top: 0 !important;
			left: 0 !important;
			right: 0 !important;
			bottom: 0 !important;
			width: 100vw !important;
			height: 100vh !important;
			background-color: rgba(0, 0, 0, 0.95) !important;
			z-index: 9999 !important;
			display: flex !important;
			align-items: center;
			justify-content: center;
		}
		
		#options-modal.hidden {
			display: none !important;
		}
		
		/* Card Explosion Animation */
		@keyframes cardExplode {
			0% { transform: scale(1) rotate(0deg); opacity: 1; }
			50% { transform: scale(1.3) rotate(15deg); opacity: 0.7; }
			100% { transform: scale(0) rotate(45deg); opacity: 0; }
		}
		
		.card-explode {
			animation: cardExplode 0.6s ease-out forwards;
		}
		
		/* Gold Particles */
		@keyframes goldParticle {
			0% { transform: translateY(0) scale(1); opacity: 1; }
			100% { transform: translateY(-100px) scale(0); opacity: 0; }
		}
		
		.gold-particle {
			position: absolute;
			width: 10px;
			height: 10px;
			background: radial-gradient(circle, #ffd700, #ffed4e);
			border-radius: 50%;
			pointer-events: none;
			z-index: 1000;
			animation: goldParticle 1s ease-out forwards;
		}
		
		/* Enemy Portrait Styles */
		.enemy-portrait-emoji {
			font-size: 4rem;
			line-height: 1;
		}
		
		/* Card art (inspector + zoom) */
		.card-art-box {
			display: flex;
			align-items: center;
			justify-content: center;
			background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 65%);
			border-radius: 12px;
			overflow: hidden;
			text-align: center;
			line-height: 1;
		}
		.card-art-img {
			display: block;
			margin: 0 auto;
			object-fit: contain;
			object-position: center center;
		}
		.card-art-img--sm { width: 5rem; height: 5rem; }
		.card-art-img--md { width: 7.5rem; height: 7.5rem; max-width: 100%; max-height: 100%; }
		.card-art-img--lg { width: 11rem; height: 11rem; max-width: 100%; max-height: 100%; }

		/* Inspector laterale (desktop) - gestito da css/ui.css */
		#card-inspector.visible {
			opacity: 1;
			transform: translateX(0);
			pointer-events: auto;
		}
		.inspector-panel {
			height: 100%;
			display: flex;
			flex-direction: column;
			background: var(--bg-glass);
			backdrop-filter: blur(14px);
			border: 2px solid rgba(243, 156, 18, 0.55);
			border-radius: var(--radius-lg);
			box-shadow: var(--shadow-panel), var(--glow-accent);
			color: #ffd700;
			overflow: hidden;
		}
		.inspector-header {
			padding: 0.85rem 1rem 0.65rem;
			border-bottom: 2px solid rgba(243, 156, 18, 0.35);
			flex-shrink: 0;
		}
		.inspector-title {
			font-family: 'Press Start 2P', cursive;
			font-size: 0.72rem;
			line-height: 1.45;
			color: var(--gold);
			margin-bottom: 0.35rem;
		}
		.inspector-type {
			font-size: 0.9rem;
			color: var(--text-muted);
		}
		.inspector-body {
			flex: 1;
			overflow-y: auto;
			padding: 0.85rem 1rem 1rem;
			scrollbar-width: thin;
			scrollbar-color: var(--accent) var(--bg-deep);
		}
		.inspector-hero {
			display: flex;
			gap: 0.85rem;
			align-items: center;
			margin-bottom: 0.85rem;
		}
		.inspector-art.card-art-box {
			width: 108px;
			height: 108px;
			flex-shrink: 0;
			border: 2px solid var(--border-subtle);
		}
		.inspector-art.card-art-box:not(:has(img)) {
			font-size: 3.5rem;
		}
		.inspector-stats-grid {
			flex: 1;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 0.35rem;
		}
		.inspector-stat {
			background: rgba(0,0,0,0.35);
			border-radius: 8px;
			padding: 0.45rem 0.35rem;
			text-align: center;
		}
		.inspector-stat-label {
			font-size: 0.7rem;
			color: var(--text-muted);
			margin-bottom: 0.15rem;
		}
		.inspector-stat-value {
			font-size: 1.15rem;
			font-weight: bold;
		}
		.inspector-section {
			margin-top: 0.65rem;
		}
		.inspector-section-title {
			font-family: 'Press Start 2P', cursive;
			font-size: 0.5rem;
			color: var(--accent);
			margin-bottom: 0.4rem;
			text-transform: uppercase;
		}
		.inspector-quote {
			font-style: italic;
			color: var(--text-muted);
			font-size: 0.95rem;
			line-height: 1.45;
			margin-bottom: 0.5rem;
		}
		.detail-ability {
			background: rgba(243, 156, 18, 0.15);
			padding: 0.5rem 0.6rem;
			margin: 0.35rem 0;
			border-radius: 6px;
			border-left: 3px solid var(--accent);
			font-size: 0.88rem;
			line-height: 1.4;
		}
		.inspector-hint {
			margin-top: 0.75rem;
			font-size: 0.8rem;
			color: var(--text-muted);
			text-align: center;
		}
		@media (max-width: 768px) {
			#card-inspector { display: none !important; }
		}
		
		/* Long Press Visual Feedback */
		.card.long-pressing {
			transform: scale(1.05);
			box-shadow: 0 0 20px rgba(243, 156, 18, 0.8);
			transition: all 0.2s ease;
		}

		/* Bottone "i" per ispezione su mobile (solo touch) */
		.card-inspect-btn {
			display: none;
			position: absolute;
			top: 2px;
			right: 2px;
			width: 22px;
			height: 22px;
			border-radius: 50%;
			background: rgba(243, 156, 18, 0.95);
			color: #1a1a2e;
			border: 1.5px solid #fff8e0;
			font-size: 0.75rem;
			font-weight: 900;
			font-family: 'Press Start 2P', cursive;
			cursor: pointer;
			z-index: 50;
			padding: 0;
			line-height: 1;
			box-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 8px rgba(243,156,18,0.6);
			-webkit-tap-highlight-color: transparent;
			animation: inspectBtnIn 0.3s ease-out;
		}
		@keyframes inspectBtnIn {
			from { transform: scale(0); opacity: 0; }
			to   { transform: scale(1); opacity: 1; }
		}
		.card-inspect-btn:active {
			transform: scale(0.88);
			background: #ffd700;
		}
		@media (hover: none) and (pointer: coarse) {
			.card-inspect-btn { display: flex; align-items: center; justify-content: center; }
		}
		
		/* Barra di progresso long press */
		.long-press-progress {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 6px;
			background: linear-gradient(90deg, #f39c12, #ffd700, #fff8e0);
			width: 0%;
			transition: width 0.35s linear;
			pointer-events: none;
			z-index: 101;
			box-shadow: 0 0 14px rgba(243, 156, 18, 0.95), 0 0 6px rgba(255, 215, 0, 0.8);
			border-radius: 0 0 8px 8px;
		}

		.long-press-progress.active {
			width: 100%;
		}

		@keyframes longPressRipple {
			0% { transform: scale(1); opacity: 0.5; }
			100% { transform: scale(1.5); opacity: 0; }
		}

		.long-press-indicator {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 60px;
			height: 60px;
			border: 3px solid #f39c12;
			border-radius: 50%;
			pointer-events: none;
			animation: longPressRipple 0.5s ease-out;
			z-index: 100;
		}
		
		/* Hint per tap rapido */
		.tap-hint {
			position: absolute;
			top: -40px;
			left: 50%;
			transform: translateX(-50%);
			background: rgba(243, 156, 18, 0.95);
			color: #000;
			padding: 8px 12px;
			border-radius: 8px;
			font-size: 0.75rem;
			font-weight: bold;
			white-space: nowrap;
			pointer-events: none;
			z-index: 1000;
			animation: hintFade 2s ease-out forwards;
		}
		@keyframes hintFade {
			0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
			10% { opacity: 1; transform: translateX(-50%) translateY(0); }
			90% { opacity: 1; transform: translateX(-50%) translateY(0); }
			100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
		}

		/* Hint mobile: "Tieni premuto per dettagli" */
		.hand-hint {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 0.5rem;
			padding: 0.4rem 0.6rem;
			margin-bottom: 0.35rem;
			background: linear-gradient(135deg, rgba(243,156,18,0.18) 0%, rgba(255,215,0,0.08) 100%);
			border: 1.5px solid rgba(243,156,18,0.5);
			border-radius: 8px;
			font-size: 0.78rem;
			color: #ffd700;
			box-shadow: 0 0 12px rgba(243,156,18,0.15);
			animation: handHintIn 0.4s ease-out;
		}
		.hand-hint[hidden] { display: none !important; }
		.hand-hint button {
			background: rgba(0,0,0,0.35);
			color: #ffd700;
			border: 1px solid rgba(255,215,0,0.4);
			border-radius: 6px;
			width: 22px;
			height: 22px;
			font-size: 0.95rem;
			line-height: 1;
			padding: 0;
			cursor: pointer;
			flex-shrink: 0;
		}
		.hand-hint button:hover { background: rgba(255,215,0,0.25); }
		@keyframes handHintIn {
			from { opacity: 0; transform: translateY(-6px); }
			to   { opacity: 1; transform: translateY(0); }
		}
		@media (min-width: 769px) {
			.hand-hint { display: none !important; }
		}
		
		/* Card Zoom Modal (Sistema Vecchio - Mantenuto per mobile) */
		#card-zoom-modal {
			position: fixed !important;
			top: 0 !important;
			left: 0 !important;
			right: 0 !important;
			bottom: 0 !important;
			width: 100vw !important;
			height: 100vh !important;
			background-color: rgba(0, 0, 0, 0.92) !important;
			z-index: 10000 !important;
			display: flex !important;
			align-items: center;
			justify-content: center;
			backdrop-filter: blur(5px);
		}
		
		#card-zoom-modal.hidden {
			display: none !important;
		}
		
		
		.card-zoom-content {
			background: linear-gradient(145deg, #2c2c54, #1a1a2e);
			border: 4px solid #f39c12;
			border-radius: 20px;
			padding: 30px;
			max-width: 500px;
			width: 90%;
			max-height: 90vh;
			overflow-y: auto;
			box-shadow: 0 0 50px rgba(243, 156, 18, 0.8);
			position: relative;
		}
		
		.card-zoom-close {
			position: absolute;
			top: 10px;
			right: 10px;
			background: #e74c3c;
			color: white;
			border: none;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			cursor: pointer;
			font-size: 1.5rem;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.2s;
		}
		
		.card-zoom-close:hover {
			background: #c0392b;
			transform: rotate(90deg);
		}
		
		.card-zoom-header {
			text-align: center;
			margin-bottom: 20px;
			border-bottom: 2px solid #f39c12;
			padding-bottom: 15px;
		}
		
		.card-zoom-title {
			font-size: 1.8rem;
			color: #ffd700;
			margin-bottom: 10px;
			font-family: 'Press Start 2P', cursive;
		}
		
		.card-zoom-type {
			font-size: 1rem;
			color: #95a5a6;
		}
		
		.card-zoom-icon {
			font-size: 5rem;
			margin: 16px auto;
			text-align: center;
			min-height: 180px;
		}
		.card-zoom-icon.card-art-box {
			width: min(220px, 80%);
			margin-left: auto;
			margin-right: auto;
			border: 2px solid var(--border-subtle);
		}
		.card-zoom-icon:not(:has(img)) {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.card-zoom-stats {
			display: flex;
			justify-content: space-around;
			margin: 20px 0;
			padding: 15px;
			background: rgba(0,0,0,0.4);
			border-radius: 10px;
		}
		
		.card-zoom-stat-item {
			text-align: center;
		}
		
		.card-zoom-stat-label {
			font-size: 0.8rem;
			color: #95a5a6;
			margin-bottom: 5px;
		}
		
		.card-zoom-stat-value {
			font-size: 1.8rem;
			font-weight: bold;
		}
		
		.card-zoom-description {
			background: rgba(0,0,0,0.3);
			padding: 15px;
			border-radius: 10px;
			margin-top: 20px;
			line-height: 1.6;
			font-size: 0.95rem;
		}
		
		.card-zoom-abilities {
			margin-top: 15px;
		}
		
		.card-zoom-ability,
		#zoom-card-ability .detail-ability {
			background: rgba(243, 156, 18, 0.2);
			padding: 10px;
			margin: 8px 0;
			border-left: 3px solid #f39c12;
			border-radius: 5px;
		}

		/* Mobile: arena in viewport senza scroll pagina */
		@media (max-width: 768px) {
			body.game-active {
				overflow: hidden;
				height: 100dvh;
				padding: 0.2rem;
			}
			body.game-active #app {
				height: 100%;
				min-height: 0;
			}
			#game-screen {
				height: 100%;
				min-height: 0;
				overflow: hidden;
			}
			.game-arena {
				height: 100%;
				min-height: 0;
				gap: 0.2rem;
				display: grid;
				grid-template-rows: auto minmax(0, 0.9fr) auto minmax(0, 0.9fr) auto;
				overflow: hidden;
			}
			.enemy-field-wrap,
			.player-field-wrap {
				min-height: 0;
				overflow: hidden;
			}
			.field-zone { padding: 0.25rem; min-height: 0; }
			.hud-bars-inline { flex-direction: row; gap: 0.5rem; }
			.hud-bars-inline .hud-bar-group { flex: 1; margin-top: 0; }
			.hand-zone-label { display: none; }
			.hand-zone .hud-panel.player-hud { margin-bottom: 0.15rem !important; padding: 0.35rem 0.5rem; }
			.hud-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
			.hud-head .hud-name { margin-bottom: 0; font-size: 0.9rem; }
			.hud-head .hud-meta { font-size: 0.8rem; }
		}

		/* Mobile Improvements */
		@media (max-width: 768px) {
			.menu-panel { padding: 1rem; }
			.menu-hero h1 { font-size: 1.25rem; line-height: 1.5; }
			.menu-mode-card { font-size: 1rem; padding: 0.6rem 0.4rem; }
			.menu-mode-icon { font-size: 1.4rem; }
			.card { width: 92px; height: 128px; }
			.card-name { font-size: 0.55rem; max-width: 54px; }
			.card-image { font-size: 2.2rem; }
			.card-stat { font-size: 0.7rem; }
			.btn-retro { min-height: 48px; font-size: 0.95rem; padding: 8px 14px; }
			.tutorial-btn { min-height: 48px; padding: 12px 20px; }
			.card-zoom-content { padding: 20px; }
			.card-zoom-title { font-size: 1.3rem; }
			.card-zoom-icon { font-size: 4rem; }
			.hud-panel { padding: 0.5rem; gap: 0.5rem; }
			.hud-avatar { width: 44px; height: 44px; font-size: 0.45rem; }
			.hud-name { font-size: 0.95rem; }
			.hud-meta { font-size: 0.85rem; gap: 0.25rem 0.75rem; }
			.hud-bar-track { height: 8px; }
			.field-slot { min-height: 0; height: 100%; max-height: 128px; }
			.enemy-field-wrap #ai-field,
			.player-field-wrap #player-field { grid-template-columns: repeat(2, 1fr); }
			.battle-console { flex-direction: column; }
			.battle-actions { flex-direction: row; }
			.battle-actions .btn-retro { flex: 1; }
			#player-hand {
				height: 138px !important;
				min-height: 138px !important;
				max-height: 138px !important;
				flex-shrink: 0;
				overflow-x: auto !important;
				overflow-y: hidden !important;
				-webkit-overflow-scrolling: touch;
				scroll-snap-type: x mandatory;
				scroll-padding: 0 12px;
				padding: 4px 12px 6px 12px;
				gap: 8px !important;
				justify-content: flex-start !important;
				scrollbar-width: thin;
				width: 100% !important;
				max-width: 100% !important;
				box-sizing: border-box !important;
				touch-action: pan-x pan-y;
			}
			#player-hand::before,
			#player-hand::after {
				content: '';
				flex: 0 0 4px;
			}
			#player-hand .card-in-hand {
				margin-left: 0 !important;
				margin-right: 0 !important;
				flex: 0 0 auto;
				scroll-snap-align: center;
			}
			.battle-log { max-height: 72px; font-size: 0.82rem; padding: 6px 8px; }
			#end-turn-btn { min-height: 48px; }
			.turn-badge { font-size: 0.95rem; padding: 0.3rem 0.75rem; }
			.hand-zone { padding-bottom: env(safe-area-inset-bottom, 0.25rem); }
			.page-panel { padding: 1rem; }
			.campaign-grid { grid-template-columns: 1fr; }
		}
		.achievement-toast {
			position: fixed;
			bottom: max(20px, env(safe-area-inset-bottom));
			right: max(16px, env(safe-area-inset-right));
			background: linear-gradient(135deg, var(--accent), var(--gold));
			color: #1a1a2e;
			padding: 14px 22px;
			border-radius: var(--radius-md);
			font-weight: bold;
			font-size: 1.1rem;
			z-index: 99999;
			box-shadow: var(--shadow-panel), var(--glow-accent);
			animation: toastSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
		}
		@keyframes toastSlideIn {
			from { transform: translateX(120%) scale(0.9); opacity: 0; }
			to { transform: translateX(0) scale(1); opacity: 1; }
		}
		#turn-indicator { font-size: 1.2rem; color: #ffd700; margin: 4px 0; }
		#player2-hand { min-height: 80px; }

/* =====================================================
   FINE LAYER 1 (BASE)
   ===================================================== */

/* =====================================================
   LAYER 2: OVERRIDES E MIGLIORAMENTI UI
   Regole aggiuntive e override che estendono il layer base.
   Essendo DOPO il layer base nella cascata, vincono su
   regole equivalenti del layer base.
   ===================================================== */
/* =====================================================
   IL GIUOCO DELLA TRADIZIONE — UI Enhancement Layer
   Miglioramenti estetici ed ergonomici (PC + Mobile)
   ===================================================== */

/* ── Variabili aggiuntive ── */
:root {
  --card-radius: 10px;
  --faction-Politica:      #4a9ede;
  --faction-Spettacolo:    #e91e8c;
  --faction-Cultura:       #27c97a;
  --faction-Imprenditoria: #f1c40f;
  --faction-Cronaca:       #e74c3c;
  --faction-Sport:         #ff7043;
  --faction-Moda:          #ab47bc;
  --faction-Cucina:        #8bc34a;
  --faction-Cinema:        #00bcd4;
}

/* ── CARD — design migliorato ── */
.card {
  width: 112px;
  height: 154px;
  border-radius: var(--card-radius);
  border: 2px solid rgba(240, 230, 140, 0.55);
  background: linear-gradient(160deg, #2a2a50 0%, #161630 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
}

/* Riflesso interno in cima */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 22px rgba(0,0,0,0.7);
}

/* Colori fazione — bordo + tint sfondo */
.faction-Politica      { border-color: var(--faction-Politica);      background: linear-gradient(160deg, #1c2f45 0%, #121828 100%); }
.faction-Spettacolo    { border-color: var(--faction-Spettacolo);    background: linear-gradient(160deg, #3a1a30 0%, #200f1e 100%); }
.faction-Cultura       { border-color: var(--faction-Cultura);       background: linear-gradient(160deg, #142a1e 0%, #0d1a12 100%); }
.faction-Imprenditoria { border-color: var(--faction-Imprenditoria); background: linear-gradient(160deg, #2e2a10 0%, #1c1a0a 100%); }
.faction-Cronaca       { border-color: var(--faction-Cronaca);       background: linear-gradient(160deg, #2e1010 0%, #1c0a0a 100%); }
.faction-Sport         { border-color: var(--faction-Sport);         background: linear-gradient(160deg, #2e1a0a 0%, #1c1208 100%); }
.faction-Moda          { border-color: var(--faction-Moda);          background: linear-gradient(160deg, #25112e 0%, #180b1e 100%); }
.faction-Cucina        { border-color: var(--faction-Cucina);        background: linear-gradient(160deg, #182010 0%, #101508 100%); }
.faction-Cinema        { border-color: var(--faction-Cinema);        background: linear-gradient(160deg, #0d2030 0%, #081420 100%); }

/* ── Card Header ── */
.card-header {
  background: rgba(0,0,0,0.55);
  padding: 4px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 26px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.card-cost {
  background: radial-gradient(circle at 40% 35%, #ffe066, #f39c12 60%, #c87000 100%);
  color: #1a0a00;
  font-weight: 900;
  font-size: 0.95rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
  flex-shrink: 0;
  font-family: 'Press Start 2P', cursive;
  line-height: 1;
}

.card-name {
  font-size: 0.68rem;
  font-weight: bold;
  color: #fff8e0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 72px;
  font-family: 'VT323', monospace;
  letter-spacing: 0.3px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  line-height: 1;
}

/* ── Card Image Area ── */
.card-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.card-image img {
  display: block;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
}

/* ── Card Stats Footer ── */
.card-stats {
  background: rgba(0,0,0,0.65);
  border-top: 1px solid rgba(255,215,0,0.2);
  padding: 3px 6px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 30px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.card-stat {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.9rem;
  font-weight: bold;
  font-family: 'VT323', monospace;
}

.card-stat-atk { color: #ff7676; }
.card-stat-def { color: #76c0ff; }

/* ── Card States ── */
.card.can-attack {
  border-color: #1dd1a1 !important;
  box-shadow: 0 0 14px rgba(29,209,161,0.55), 0 3px 10px rgba(0,0,0,0.5) !important;
  animation: pulse-green 1.6s ease-in-out infinite;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 10px rgba(29,209,161,0.4), 0 3px 8px rgba(0,0,0,0.5); }
  50%       { box-shadow: 0 0 20px rgba(29,209,161,0.75), 0 5px 14px rgba(0,0,0,0.5); }
}

.card.is-attacking {
  border-color: #ff6b6b !important;
  transform: scale(1.08) translateY(-6px) !important;
  box-shadow: 0 0 22px rgba(255,80,80,0.7) !important;
  z-index: 10;
}

.card.has-attacked {
  border-color: rgba(100,100,130,0.45) !important;
  opacity: 0.55;
  filter: saturate(0.4);
}

.card-in-hand.selected {
  transform: translateY(-16px) scale(1.06) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 22px rgba(168,85,247,0.7), 0 6px 18px rgba(0,0,0,0.6) !important;
  z-index: 10;
}

.card-on-field.targetable {
  border-color: #e74c3c !important;
  box-shadow: 0 0 16px rgba(231,76,60,0.7) !important;
  cursor: crosshair;
  animation: pulse-red 1.2s ease-in-out infinite;
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 10px rgba(231,76,60,0.5); }
  50%       { box-shadow: 0 0 22px rgba(231,76,60,0.85); }
}

.card-on-field.equip-target {
  border-color: #9b59b6 !important;
  box-shadow: 0 0 14px rgba(155,89,182,0.65) !important;
}

.card-on-field.debuff-target {
  border-color: #e67e22 !important;
  box-shadow: 0 0 14px rgba(230,126,34,0.65) !important;
}

/* Long press indicator — usa l'implementazione inline esistente */
.long-press-progress {
  height: 4px;
  background: linear-gradient(90deg, #f39c12, #ffd700) !important;
  box-shadow: 0 0 8px rgba(243,156,18,0.7) !important;
  border-radius: 0 0 var(--card-radius) var(--card-radius) !important;
}

/* ── HUD Panels ── */
.hud-panel {
  background: rgba(14,14,28,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(100,100,160,0.4);
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

.hud-panel.enemy-hud {
  border-color: rgba(192,57,43,0.5);
  background: rgba(20,8,8,0.88);
}

.hud-panel.player-hud {
  border-color: rgba(41,128,185,0.5);
  background: rgba(8,14,24,0.88);
}

.hud-avatar {
  border-radius: 10px;
}

.hud-avatar.enemy {
  background: linear-gradient(145deg, #4a1010, #200808);
  border-color: #c0392b;
  box-shadow: 0 0 10px rgba(192,57,43,0.3) inset;
}

.hud-avatar.player {
  background: linear-gradient(145deg, #0f2840, #060e18);
  border-color: #1a6fa0;
  box-shadow: 0 0 10px rgba(26,111,160,0.3) inset;
}

.hud-name {
  color: #ffe9a0;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}

/* HP bar ─ più alta e visibile */
.hud-bar-track {
  height: 10px;
  border-radius: 99px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.hud-hp-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.55s cubic-bezier(0.22,1,0.36,1);
}

.hud-hp-fill.enemy {
  background: linear-gradient(90deg, #8b1a1a 0%, #e74c3c 60%, #ff6b6b 100%);
  box-shadow: 0 0 10px rgba(231,76,60,0.6);
}

.hud-hp-fill.player {
  background: linear-gradient(90deg, #0d4a7a 0%, #2980b9 60%, #5dade2 100%);
  box-shadow: 0 0 10px rgba(52,152,219,0.6);
}

.hud-hp-fill.low {
  animation: hpLowPulse 0.9s ease-in-out infinite;
}

/* Credibilità bar ─ dorata */
.hud-cred-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #8a6a00 0%, #c9a227 50%, #ffd700 100%);
  box-shadow: 0 0 8px rgba(255,215,0,0.5);
  transition: width 0.35s ease;
}

/* ── Campo di gioco ── */
.field-zone {
  border-radius: 12px;
  border-width: 1px;
}

.field-zone.enemy-zone {
  background: linear-gradient(180deg, rgba(140,20,20,0.12) 0%, rgba(0,0,0,0.25) 100%);
  border-color: rgba(192,57,43,0.25);
}

.field-zone.player-zone {
  background: linear-gradient(0deg, rgba(20,60,100,0.12) 0%, rgba(0,0,0,0.25) 100%);
  border-color: rgba(41,128,185,0.25);
}

.field-slot {
  border: 2px dashed rgba(90,90,140,0.35);
  border-radius: 10px;
  background: rgba(0,0,0,0.12);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Slot droppable ─ indica chiaramente dove posare */
.field-slot.droppable {
  background: rgba(41,128,185,0.14) !important;
  border-color: #3498db !important;
  border-style: solid !important;
  box-shadow: inset 0 0 18px rgba(52,152,219,0.18), 0 0 10px rgba(52,152,219,0.15) !important;
  cursor: pointer;
  animation: slotDrop 1.4s ease-in-out infinite;
}

@keyframes slotDrop {
  0%, 100% { box-shadow: inset 0 0 12px rgba(52,152,219,0.15); }
  50%       { box-shadow: inset 0 0 22px rgba(52,152,219,0.35), 0 0 12px rgba(52,152,219,0.2); }
}

/* ── Battle Console (centro) ── */
.battle-log {
  background: rgba(6,6,14,0.82);
  border: 1px solid rgba(200,150,30,0.35);
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: rgba(243,156,18,0.5) transparent;
}

/* Turn badge */
.turn-badge {
  background: rgba(8,8,18,0.75);
  border: 1.5px solid rgba(100,100,160,0.5);
  border-radius: 99px;
  font-size: 1rem;
  padding: 0.35rem 0.9rem;
  letter-spacing: 0.3px;
}

.turn-badge.active-turn {
  border-color: #f39c12;
  box-shadow: 0 0 12px rgba(243,156,18,0.4), 0 0 30px rgba(243,156,18,0.15);
  color: #ffe080;
}

.turn-badge.enemy-turn {
  border-color: rgba(200,60,50,0.6);
  color: #ffbaba;
}

/* Bottone Fine Turno */
.btn-retro {
  font-family: 'VT323', monospace;
  border-radius: 8px;
  border: 2px solid;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.1s ease, box-shadow 0.1s ease;
  letter-spacing: 0.5px;
}

.btn-retro:not(:disabled):hover {
  filter: brightness(1.1);
}

.btn-retro:not(:disabled):active {
  transform: translateY(3px) !important;
  box-shadow: none !important;
}

#end-turn-btn {
  background: linear-gradient(180deg, #2ecc71 0%, #1a9e52 100%);
  border-color: #14753c;
  color: #fff;
  box-shadow: 0 4px 0 #0d5228;
  font-size: 1.1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#end-turn-btn:disabled {
  background: linear-gradient(180deg, #4a5a4f 0%, #2a3530 100%);
  border-color: #2a3530;
  color: rgba(255,255,255,0.4);
  box-shadow: 0 4px 0 #1a2520;
  cursor: not-allowed;
}

#concede-btn {
  background: rgba(100,20,20,0.6);
  border-color: rgba(180,40,40,0.5);
  color: rgba(255,160,160,0.8);
  box-shadow: 0 2px 0 rgba(80,10,10,0.5);
  font-size: 0.9rem;
}

#concede-btn:hover {
  background: rgba(160,30,30,0.7);
  color: #ffaaaa;
}

/* ── HAND ZONE: tutte le regole per la mano del giocatore ── */

/* Contenitore mano */
.player-hand-scroll,
#player-hand {
  padding: 0 8px 6px 8px;
  justify-content: center;
  align-items: flex-end;
  position: relative;
}

/* Carta nella mano */
#player-hand .card-in-hand {
  width: 96px;
  height: 132px;
  margin: 0 2px !important;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

/* Hover: sale e ingrandisce */
#player-hand .card-in-hand:hover:not(.selected) {
  transform: translateY(-10px) scale(1.04) !important;
}

/* Selected: sale di più */
#player-hand .card-in-hand.selected {
  transform: translateY(-14px) scale(1.06) !important;
}

/* =====================================================
   DESKTOP (≥769px)
   ===================================================== */
@media (min-width: 769px) {
  #player-hand .card-in-hand {
    width: 108px;
    height: 148px;
    margin: 0 4px !important;
  }
  
  #player-hand .card-image {
    font-size: 2.5rem;
  }

  #player-hand .card-in-hand:hover:not(.selected) {
    transform: translateY(-12px) scale(1.06) !important;
  }
  
  #player-hand .card-in-hand.selected {
    transform: translateY(-18px) scale(1.1) !important;
  }
}

/* =====================================================
   DESKTOP COMPATTO (altezza ≤820px)
   ===================================================== */
@media (min-width: 769px) and (max-height: 820px) {
  #player-hand .card-in-hand {
    width: 92px;
    height: 126px;
  }
}

/* =====================================================
   MOBILE (≤768px)
   ===================================================== */
@media (max-width: 768px) {
  /* Mano scrollabile orizzontalmente su mobile.
     VINCE su qualsiasi utility Tailwind (justify-center, h-48, space-x-[-30px])
     grazie a !important e selettore con classe dedicata. */
  .player-hand-scroll,
  #player-hand {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding: 6px 12px 8px 12px !important;
    gap: 6px !important;
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(243,156,18,0.5) transparent;
    touch-action: pan-x pan-y;
  }
  .player-hand-scroll .card-in-hand,
  #player-hand .card-in-hand {
    flex: 0 0 auto !important;
    scroll-snap-align: center;
    margin: 0 !important;
  }
  /* Spazio prima/dopo le carte per scroll fluido */
  #player-hand::before,
  #player-hand::after {
    content: '';
    flex: 0 0 6px;
  }
  /* Scrollbar sottile ma visibile */
  #player-hand::-webkit-scrollbar { height: 4px; }
  #player-hand::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 99px; }
  #player-hand::-webkit-scrollbar-thumb { background: rgba(243,156,18,0.5); border-radius: 99px; }
  /* Hint visivo: freccia che indica scroll se la mano è piena */
  .hand-scroll-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(243,156,18,0.85);
    color: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(243,156,18,0.6);
    animation: handScrollPulse 1.6s ease-in-out infinite;
  }
  .hand-scroll-hint.left { left: 4px; }
  .hand-scroll-hint.right { right: 4px; }
  @keyframes handScrollPulse {
    0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.85; }
    50%      { transform: translateY(-50%) scale(1.15); opacity: 1; }
  }

  #player-hand .card-in-hand {
    width: 80px;
    height: 112px;
    margin: 0 !important;
  }
  
  #player-hand .card-in-hand .card-image {
    font-size: 1.8rem;
  }
  
  #player-hand .card-stats {
    height: 22px;
  }
  
  #player-hand .card-stat {
    font-size: 0.65rem;
  }
  
  #player-hand .card-cost {
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
  }
  
  #player-hand .card-name {
    font-size: 0.48rem;
    max-width: 42px;
  }
  
  /* --- FIELD - 4 cards in a SINGLE row on mobile --- */
  /* Override Tailwind grid classes */
  #ai-field,
  #player-field {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    grid-template-columns: none !important;
    grid: none !important;
  }
  
  .field-slot {
    min-width: 68px !important;
    max-width: 72px !important;
    height: 95px !important;
    min-height: 0 !important;
  }
  
  .field-slot .card-on-field {
    width: 68px !important;
    height: 90px !important;
  }
  
  .field-slot .card-on-field .card-image {
    font-size: 1.4rem !important;
  }
  
  .field-slot .card-on-field .card-image img {
    width: 1.6rem !important;
    height: 1.6rem !important;
  }
  
  .field-slot .card-on-field .card-name {
    font-size: 0.42rem !important;
    max-width: 36px !important;
  }
  
  .field-slot .card-on-field .card-stats {
    height: 18px !important;
    padding: 2px !important;
  }
  
  .field-slot .card-on-field .card-stat {
    font-size: 0.55rem !important;
  }
  
  .field-slot .card-on-field .card-cost {
    width: 14px !important;
    height: 14px !important;
    font-size: 0.5rem !important;
  }
  
  /* --- FIELD ZONES mobile --- */
  .field-zone {
    padding: 4px !important;
    min-height: 100px;
  }
  
  /* --- HUD compact mobile --- */
  .hud-panel {
    padding: 6px 8px !important;
    gap: 8px !important;
  }
  
  .hud-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px;
  }
  
  .hud-avatar .text-lg {
    font-size: 0.9rem !important;
  }
  
  .hud-avatar .text-2xl {
    font-size: 1.2rem !important;
  }
  
  .hud-name {
    font-size: 0.85rem !important;
  }
  
  .hud-meta {
    font-size: 0.7rem !important;
    gap: 4px 8px !important;
  }
  
  .hud-bar-track {
    height: 6px !important;
  }
  
  .hud-bar-label {
    font-size: 0.65rem !important;
  }
  
  /* --- BATTLE MID mobile --- */
  .battle-mid {
    padding: 4px 0;
  }
  
  .turn-badge {
    font-size: 0.8rem !important;
    padding: 4px 10px !important;
  }
  
  .battle-console {
    flex-direction: row !important;
    align-items: stretch;
    gap: 6px !important;
  }
  
  .battle-log {
    font-size: 0.75rem !important;
    padding: 4px 6px !important;
    max-height: 50px !important;
    flex: 1;
    min-width: 0;
  }
  
  .battle-actions {
    flex-direction: column;
    gap: 4px !important;
    flex-shrink: 0;
  }
  
  #end-turn-btn {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }
  
  #concede-btn {
    min-height: 32px !important;
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
  }
}

/* =====================================================
   MENU PRINCIPALE
   ===================================================== */
.menu-panel {
  background: rgba(12,12,28,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(100,100,160,0.4);
  box-shadow: 0 16px 50px rgba(0,0,0,0.55), 0 0 40px rgba(255,215,0,0.04);
}

.btn-retro-primary {
  background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%) !important;
  color: #fff !important;
  border-color: #922b21 !important;
  box-shadow: 0 4px 0 #6e1f18, inset 0 1px 0 rgba(255,255,255,0.15) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  font-size: 1.05rem !important;
}

.menu-mode-card {
  background: rgba(22,22,44,0.7);
  border: 1.5px solid rgba(100,100,160,0.4);
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.menu-mode-card:hover {
  border-color: #f39c12;
  background: rgba(40,28,10,0.8);
  box-shadow: 0 0 16px rgba(243,156,18,0.2);
  transform: translateY(-2px);
}

/* ── End screen ── */
.end-screen-panel {
  background: rgba(10,10,20,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Card inspector (desktop sidebar) ── */
#card-inspector {
  background: rgba(8,8,20,0.96);
  border-left: 1px solid rgba(100,100,160,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Card zoom modal (mobile) ── */
.card-zoom-content {
  background: linear-gradient(160deg, #18183a 0%, #0d0d20 100%);
  border: 1.5px solid rgba(100,100,160,0.5);
  border-radius: 16px;
}

/* ── Draft pick ── */
.draft-pick-wrap:hover .card {
  border-color: var(--gold) !important;
  box-shadow: 0 0 18px rgba(255,215,0,0.35) !important;
  transform: translateY(-6px) scale(1.04);
}

/* ── Achievement toast ── */
.achievement-toast {
  background: linear-gradient(135deg, #f39c12 0%, #ffd700 100%);
  color: #0d0d1a;
  box-shadow: 0 4px 20px rgba(243,156,18,0.45);
  border-radius: 10px;
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
}

/* ── MOBILE specifico - RIMOSSO: regole già definite in @media (max-width: 768px) sopra ── */

/* ── DESKTOP ottimizzazioni card in campo ── */
@media (min-width: 769px) {
  .field-slot .card-on-field {
    width: 108px;
    height: 148px;
  }

  .field-slot .card-on-field .card-name {
    font-size: 0.62rem;
    max-width: 66px;
  }

  .field-slot .card-on-field .card-image {
    font-size: 2.5rem;
  }

  .field-slot .card-on-field .card-image img {
    width: 2.8rem !important;
    height: 2.8rem !important;
  }

  .field-slot .card-on-field .card-stat {
    font-size: 0.82rem;
  }

  #player-hand .card-in-hand {
    width: 108px;
    height: 148px;
  }

  #player-hand .card-in-hand .card-image {
    font-size: 2.5rem;
  }

  /* Hover card in mano — sale di più */
  #player-hand .card-in-hand:hover:not(.selected) {
    transform: translateY(-8px) scale(1.04) !important;
  }
}

/* ── DESKTOP basso (compresso verticalmente) ── */
@media (min-width: 769px) and (max-height: 820px) {
  .field-slot .card-on-field {
    width: 96px;
    height: 132px;
  }

  #player-hand .card-in-hand {
    width: 96px;
    height: 132px;
  }

  .card-cost { width: 19px; height: 19px; font-size: 0.75rem; }
  .card-name { font-size: 0.58rem; }
  .card-stat { font-size: 0.72rem; }
}

/* ── Indicatore "droppable" con icona ── */
.field-slot.droppable::after {
  content: '+';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  color: rgba(52,152,219,0.5);
  pointer-events: none;
  font-family: 'Press Start 2P', cursive;
  animation: slotIconPulse 1.4s ease-in-out infinite;
}

@keyframes slotIconPulse {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.9); }
  50%       { opacity: 0.7;  transform: translate(-50%, -50%) scale(1.1); }
}

/* ── Scrollbar globale più sottile ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,150,30,0.4) rgba(0,0,0,0.2);
}

*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 99px; }
*::-webkit-scrollbar-thumb { background: rgba(200,150,30,0.4); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,215,0,0.6); }

/* ── Focus visibile per accessibilità ── */
:focus-visible {
  outline: 2px solid rgba(255,215,0,0.7);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Deck tile nel editor ── */
.deck-card-tile {
  width: 90px;
  height: 122px;
  border-radius: 8px;
}

.deck-card-tile .card-name {
  font-size: 0.52rem;
  max-width: 54px;
}

.deck-tile-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 1.2rem;
  transition: background 0.12s ease;
}

.deck-tile-btn:not(:disabled):hover {
  background: rgba(243,156,18,0.25);
}

/* ── Campaign cards ── */
.campaign-level-card {
  border-radius: 12px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.campaign-level-card:hover:not(:disabled) {
  box-shadow: 0 0 18px rgba(243,156,18,0.2);
}

/* ── Preloader text glow ridotto ── */
.preloader-logo {
  line-height: 1.5;
}

/* ── Card Zoom Modal (mobile) ── */
#card-zoom-modal {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.card-zoom-content {
  background: linear-gradient(155deg, #1a1a3a 0%, #0d0d22 100%) !important;
  border: 1.5px solid rgba(120,120,200,0.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important;
  max-width: min(420px, 92vw) !important;
  width: 100% !important;
  padding: 20px !important;
}

.card-zoom-title {
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
}

.card-zoom-icon {
  min-height: 140px !important;
}

/* ── Inspector panel migliorato ── */
.inspector-panel {
  background: rgba(8,8,22,0.96) !important;
  border: 1.5px solid rgba(180,120,30,0.55) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(243,156,18,0.08) !important;
}

/* ── Inspector: overlay fisso, NON sposta il contenuto ── */
/* Quando l'inspector è visibile, il gioco resta fermo - no reflow */
body.game-active.inspector-open .game-arena {
  max-width: 1100px !important;
  width: 100% !important;
}

#card-inspector {
  /* Override per evitare che l'apertura causi reflow */
  width: 320px !important;
  max-width: 28vw !important;
}

@media (max-width: 1200px) {
  #card-inspector {
    width: 280px !important;
  }
}

.inspector-header {
  border-bottom: 1px solid rgba(200,140,30,0.3) !important;
  background: linear-gradient(90deg, rgba(243,156,18,0.06) 0%, transparent 100%);
}

.inspector-stat {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07);
}

.detail-ability {
  background: rgba(243,156,18,0.1) !important;
  border-left: 3px solid #f39c12 !important;
  border-radius: 6px !important;
  font-size: 0.9rem !important;
}

/* ── Mano desktop: scroll orizzontale se le carte sono troppe ── */
@media (min-width: 769px) {
  #player-hand {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-end !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    padding: 0 12px 4px 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(243,156,18,0.5) transparent;
  }
  #player-hand .card-in-hand {
    margin: 0 !important;
    flex: 0 0 auto;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  }
  #player-hand:hover .card-in-hand:hover {
    transform: translateY(-12px) scale(1.08);
    z-index: 20;
  }
  #player-hand::-webkit-scrollbar { height: 4px; }
  #player-hand::-webkit-scrollbar-track { background: transparent; }
  #player-hand::-webkit-scrollbar-thumb { background: rgba(243,156,18,0.5); border-radius: 99px; }
}

/* ── Griglia campo: centrata verticalmente ── */
#ai-field, #player-field {
  width: 100%;
}

/* ── Fazione chip sul menu modalità ── */
.menu-mode-card .menu-mode-icon {
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.3));
}

/* ── Options modal ── */
#options-modal > div,
.modal-content {
  background: rgba(8,8,20,0.97) !important;
  border: 1.5px solid rgba(100,100,160,0.4) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.7) !important;
}

/* ── Pass modal e altri modali di gioco ── */
#pass-modal .bg-gray-900,
#mulligan-modal .bg-gray-900,
#discard-modal .bg-gray-900,
#paparazzata-modal .bg-gray-900,
#debenedetti-modal .bg-gray-900 {
  background: rgba(8,8,24,0.97) !important;
  border: 1.5px solid rgba(100,100,180,0.4) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.7) !important;
}

/* ── Valore attuale HP/Crediti nei label ── */
#player-hp, #ai-hp,
#player-cred, #ai-cred {
  color: #ffe080;
  font-weight: bold;
}

/* ── Render img nelle card in campo ── */
.card-on-field .card-image img,
.card-in-hand .card-image img {
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* ── Bordo fazione + glow quando carta può attaccare ── */
.card.can-attack.faction-Politica      { box-shadow: 0 0 14px rgba(74,158,222,0.6), 0 0 6px rgba(29,209,161,0.5) !important; }
.card.can-attack.faction-Spettacolo    { box-shadow: 0 0 14px rgba(233,30,140,0.5), 0 0 6px rgba(29,209,161,0.5) !important; }
.card.can-attack.faction-Sport         { box-shadow: 0 0 14px rgba(255,112,67,0.5), 0 0 6px rgba(29,209,161,0.5) !important; }
.card.can-attack.faction-Cultura       { box-shadow: 0 0 14px rgba(39,201,122,0.5), 0 0 6px rgba(29,209,161,0.5) !important; }
.card.can-attack.faction-Imprenditoria { box-shadow: 0 0 14px rgba(241,196,15,0.5), 0 0 6px rgba(29,209,161,0.5) !important; }
.card.can-attack.faction-Moda          { box-shadow: 0 0 14px rgba(171,71,188,0.5), 0 0 6px rgba(29,209,161,0.5) !important; }
.card.can-attack.faction-Cucina        { box-shadow: 0 0 14px rgba(139,195,74,0.5), 0 0 6px rgba(29,209,161,0.5) !important; }
.card.can-attack.faction-Cinema        { box-shadow: 0 0 14px rgba(0,188,212,0.5), 0 0 6px rgba(29,209,161,0.5) !important; }
.card.can-attack.faction-Cronaca       { box-shadow: 0 0 14px rgba(231,76,60,0.5), 0 0 6px rgba(29,209,161,0.5) !important; }
/* =====================================================
   MIGLIORAMENTI AGGIUNTIVI - Fase 2
   ===================================================== */

/* ─────────────────────────────────────────────────────
   INSPECTOR SIDEBAR - Overlay fisso, MAI causa reflow
   ───────────────────────────────────────────────────── */
#card-inspector {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 320px !important;
  max-width: 85vw !important;
  z-index: 10001 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateX(100%) !important;
  transition: transform 0.25s ease-out, opacity 0.2s ease !important;
}

#card-inspector.visible {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#card-inspector .inspector-panel {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
}

/* Quando inspector aperto, il gioco resta identico - overlay puro.
   NIENTE reflow: la larghezza dell'arena resta invariata, l'inspector
   è un overlay fisso che copre solo la zona destra del viewport. */
body.inspector-open .game-arena,
body.game-active.inspector-open .game-arena {
  max-width: 1100px !important;
  width: 100% !important;
  transform: none !important;
  margin: auto 0 !important;
  flex-grow: 1 !important;
}

/* ─────────────────────────────────────────────────────
   GAME ARENA - Layout stabile
   ───────────────────────────────────────────────────── */
.game-arena {
  transition: none !important;
}

.battle-mid {
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────
   CAMPO DI GIOCO - Slot migliorati
   ───────────────────────────────────────────────────── */
.field-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.field-slot:empty::before {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  border: 1px dashed rgba(100,100,150,0.2);
  border-radius: 6px;
}

/* Slot attivo per drop - indicatore visivo */
.field-slot.droppable {
  background: rgba(52,152,219,0.12) !important;
  border-color: #3498db !important;
  border-style: solid !important;
}

/* ─────────────────────────────────────────────────────
   BATTLE LOG - Più leggibile
   ───────────────────────────────────────────────────── */
.battle-log {
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  line-height: 1.4;
}

.battle-log .log-entry-new {
  color: #ffe080 !important;
  font-weight: bold;
}

/* ─────────────────────────────────────────────────────
   TURN INDICATOR - Più visibile
   ───────────────────────────────────────────────────── */
.turn-badge {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  padding: 6px 14px;
  white-space: nowrap;
  user-select: none;
}

.turn-badge.active-turn {
  background: linear-gradient(135deg, rgba(243,156,18,0.2) 0%, rgba(255,215,0,0.1) 100%);
}

.turn-badge.enemy-turn {
  background: linear-gradient(135deg, rgba(200,60,50,0.2) 0%, rgba(231,76,60,0.1) 100%);
}

/* ─────────────────────────────────────────────────────
   AVATAR - Click target chiaro
   ───────────────────────────────────────────────────── */
.hud-avatar {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hud-avatar:hover {
  transform: scale(1.05);
}

.hud-avatar.targetable {
  cursor: crosshair;
  animation: targetPulse 1s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────
   BATTLE ACTIONS - Bottoni migliorati
   ───────────────────────────────────────────────────── */
.battle-actions {
  gap: 6px;
}

#end-turn-btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 1rem;
}

#concede-btn {
  font-size: 0.85rem;
  padding: 8px 12px;
  min-height: 36px;
}

/* ─────────────────────────────────────────────────────
   MODALI - Più moderni
   ───────────────────────────────────────────────────── */
.modal-content,
.intro-content,
.tutorial-content,
#pass-modal > div,
#mulligan-modal > div,
#discard-modal > div,
#paparazzata-modal > div,
#debenedetti-modal > div,
#options-modal > div {
  background: linear-gradient(160deg, #12122a 0%, #0a0a18 100%) !important;
  border: 1px solid rgba(100,100,160,0.35) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
}

/* Close button styles */
.modal-content .absolute button,
.intro-content .absolute button {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffd700;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.modal-content .absolute button:hover,
.intro-content .absolute button:hover {
  background: rgba(255,215,0,0.2);
}

/* ─────────────────────────────────────────────────────
   DECK EDITOR - Migliorato
   ───────────────────────────────────────────────────── */
.deck-card-grid {
  gap: 8px;
}

.deck-card-tile-wrap {
  gap: 4px;
}

.deck-tile-btn {
  width: 32px;
  height: 32px;
}

/* ─────────────────────────────────────────────────────
   CAMPAIGN - Card migliorate
   ───────────────────────────────────────────────────── */
.campaign-level-card {
  background: linear-gradient(145deg, rgba(30,30,60,0.8) 0%, rgba(18,18,36,0.9) 100%) !important;
  padding: 16px;
}

.campaign-level-card .font-bold {
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: #ffd700;
}

/* ─────────────────────────────────────────────────────
   STATS SCREEN
   ───────────────────────────────────────────────────── */
.stats-section {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

.stats-section h3 {
  font-size: 0.8rem !important;
  margin-bottom: 8px !important;
}

/* ─────────────────────────────────────────────────────
   DRAFT PICK - Animazione migliorata
   ───────────────────────────────────────────────────── */
.draft-pick-grid {
  gap: 16px;
}

.draft-pick-wrap {
  transition: transform 0.2s ease;
}

.draft-pick-wrap:hover {
  transform: translateY(-8px);
}

/* ─────────────────────────────────────────────────────
   TUTORIAL - Navigation
   ───────────────────────────────────────────────────── */
.tutorial-slide {
  font-size: 1.05rem;
  line-height: 1.6;
}

.tutorial-btn {
  min-height: 48px;
  font-size: 1rem;
}

/* ─────────────────────────────────────────────────────
   FOCUS STATES - Accessibilità
   ───────────────────────────────────────────────────── */
.btn-retro:focus-visible,
.menu-mode-card:focus-visible,
.campaign-level-card:focus-visible,
.deck-tile-btn:focus-visible {
  outline: 2px solid rgba(255,215,0,0.8);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────
   SCROLLBAR - Più eleganti
   ───────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(243,156,18,0.5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,215,0,0.7);
}

/* ─────────────────────────────────────────────────────
   PREFERS REDUCED MOTION
   ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card.can-attack,
  .card-on-field.targetable,
  .field-slot.droppable,
  .turn-badge.active-turn,
  .hud-avatar.targetable,
  #card-inspector,
  .long-press-progress {
    animation: none !important;
    transition: none !important;
  }
}
/* =====================================================
   MIGLIORAMENTI ULTRA - Fase 3
   ===================================================== */

/* ─────────────────────────────────────────────────────
   CAMPO DI GIOCO - Layout ottimizzato per visibilità
   ───────────────────────────────────────────────────── */
.field-zone {
  padding: 8px 6px !important;
}

#ai-field,
#player-field {
  gap: 6px !important;
  padding: 4px;
}

/* Slot più spaziosi */
.field-slot {
  border-radius: 10px !important;
  min-height: 130px !important;
}

/* ─────────────────────────────────────────────────────
   CARD IN CAMPO - Dimensioni controllate per CONTESTO
   ───────────────────────────────────────────────────── */
/* Su mobile: carte piccole dentro slot piccoli */
@media (max-width: 768px) {
  .card-on-field {
    width: 68px !important;
    height: 90px !important;
  }
  .card-on-field .card-name {
    font-size: 0.42rem !important;
    max-width: 36px !important;
  }
  .card-on-field .card-image { font-size: 1.4rem !important; }
  .card-on-field .card-image img { width: 1.6rem !important; height: 1.6rem !important; }
  .card-on-field .card-stats { height: 18px !important; padding: 2px !important; }
  .card-on-field .card-stat { font-size: 0.55rem !important; }
  .card-on-field .card-cost { width: 14px !important; height: 14px !important; font-size: 0.55rem !important; }
}
/* Su desktop: carte proporzionate allo slot da 130px */
@media (min-width: 769px) {
  .card-on-field {
    width: 108px !important;
    height: 126px !important;
  }
  .card-on-field .card-name {
    font-size: 0.6rem !important;
    max-width: 64px !important;
  }
  .card-on-field .card-image { font-size: 2.4rem !important; }
  .card-on-field .card-image img { width: 2.8rem !important; height: 2.8rem !important; }
  .card-on-field .card-stats { height: 24px !important; }
  .card-on-field .card-stat { font-size: 0.75rem !important; }
  .card-on-field .card-cost { width: 18px !important; height: 18px !important; font-size: 0.7rem !important; }
}

/* ─────────────────────────────────────────────────────
   MANO - Ottimizzata
   ───────────────────────────────────────────────────── */
.hand-zone {
  padding-top: 8px !important;
  flex-shrink: 0;
}

#player-hand {
  min-height: 130px;
}

/* ─────────────────────────────────────────────────────
   HUD - Informazioni chiare
   ───────────────────────────────────────────────────── */
.hud-stats {
  gap: 8px;
}

.hud-head {
  margin-bottom: 4px;
}

.hud-name {
  font-size: 1rem !important;
}

.hud-meta {
  font-size: 0.85rem !important;
  gap: 8px 16px !important;
}

.hud-bar-track {
  height: 8px !important;
  border-radius: 99px;
}

.hud-bar-label {
  font-size: 0.75rem !important;
}

.hud-bar-label span:first-child {
  opacity: 0.8;
}

/* Credibilità visuale a gemme */
#player-cred,
#ai-cred {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ─────────────────────────────────────────────────────
   BATTLE LOG - Più leggibile
   ───────────────────────────────────────────────────── */
.battle-log {
  padding: 8px 10px !important;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
  min-height: 60px;
}

.battle-log .log-entry-new {
  font-size: 0.95rem !important;
}

/* ─────────────────────────────────────────────────────
   TURN INDICATOR - Chiaro e visibile
   ───────────────────────────────────────────────────── */
.turn-badge {
  font-size: 0.95rem !important;
  padding: 5px 12px !important;
  border-width: 1.5px !important;
}

/* ─────────────────────────────────────────────────────
   AZIONI DI BATTAGLIA - Spaziatura
   ───────────────────────────────────────────────────── */
.battle-actions {
  padding: 4px;
}

.battle-actions .btn-retro {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.9rem;
}

#concede-btn {
  padding: 6px 10px;
  font-size: 0.8rem;
}

/* ─────────────────────────────────────────────────────
   AVATAR - Centro informazioni
   ───────────────────────────────────────────────────── */
.hud-avatar {
  width: 48px !important;
  height: 48px !important;
  font-size: 0.5rem !important;
}

.hud-avatar.player {
  background: linear-gradient(145deg, #0d2840 0%, #061420 100%) !important;
}

.hud-avatar.enemy {
  background: linear-gradient(145deg, #4a1010 0%, #200808 100%) !important;
}

.hud-avatar .text-lg {
  font-size: 1.1rem !important;
}

.hud-avatar .text-2xl {
  font-size: 1.5rem !important;
}

/* ─────────────────────────────────────────────────────
   INSPECTOR - Contenuto migliorato
   ───────────────────────────────────────────────────── */
.inspector-panel {
  padding: 0 !important;
}

.inspector-header {
  padding: 12px 16px !important;
  background: linear-gradient(90deg, rgba(243,156,18,0.1) 0%, transparent 100%);
}

.inspector-title {
  font-size: 0.7rem !important;
  line-height: 1.4 !important;
}

.inspector-body {
  padding: 12px 16px !important;
}

.inspector-hero {
  gap: 12px !important;
}

.inspector-art.card-art-box {
  width: 90px !important;
  height: 90px !important;
  border-radius: 8px !important;
}

.inspector-stats-grid {
  gap: 8px !important;
}

.inspector-stat {
  padding: 8px 6px !important;
}

.inspector-stat-value {
  font-size: 1.1rem !important;
}

.inspector-section {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(100,100,160,0.2);
}

.detail-ability {
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  padding: 8px 10px !important;
  margin: 6px 0 !important;
}

/* ─────────────────────────────────────────────────────
   CARD ZOOM MODAL - Migliorato
   ───────────────────────────────────────────────────── */
.card-zoom-content {
  padding: 20px !important;
  max-width: 380px !important;
}

.card-zoom-title {
  font-size: 1.4rem !important;
  margin-bottom: 8px !important;
}

.card-zoom-type {
  font-size: 0.95rem !important;
  margin-bottom: 12px !important;
}

.card-zoom-icon {
  min-height: 120px !important;
  margin: 12px auto !important;
}

.card-zoom-stats {
  padding: 12px !important;
  margin: 16px 0 !important;
  border-radius: 10px !important;
}

.card-zoom-stat-label {
  font-size: 0.75rem !important;
}

.card-zoom-stat-value {
  font-size: 1.5rem !important;
}

.card-zoom-description {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  padding: 12px !important;
}

/* ─────────────────────────────────────────────────────
   PRELOADER - Più curato
   ───────────────────────────────────────────────────── */
.preloader-logo {
  font-size: 1.2rem !important;
  line-height: 1.6 !important;
  padding: 0 1rem !important;
}

.preloader-bar-track {
  width: 240px !important;
  height: 10px !important;
}

#preloader-text {
  font-size: 1.1rem !important;
}

.preloader-tagline {
  font-size: 0.9rem !important;
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────────
   MENU - Più moderno
   ───────────────────────────────────────────────────── */
.menu-hero {
  margin-bottom: 1rem !important;
}

.menu-hero h1 {
  font-size: 1.1rem !important;
}

.menu-tagline {
  font-size: 1rem !important;
}

.menu-panel {
  padding: 1rem 1.25rem !important;
  border-radius: 14px !important;
}

.menu-section-label {
  font-size: 0.55rem !important;
  margin: 1rem 0 0.5rem !important;
}

.btn-retro-primary {
  font-size: 0.9rem !important;
  padding: 12px 16px !important;
}

.menu-mode-grid {
  gap: 6px !important;
}

.menu-mode-card {
  padding: 10px 8px !important;
  font-size: 0.95rem !important;
}

.menu-mode-icon {
  font-size: 1.4rem !important;
}

.menu-row {
  gap: 6px !important;
}

.btn-retro-compact {
  font-size: 0.75rem !important;
  padding: 10px 8px !important;
}

.menu-footer {
  margin-top: 1rem !important;
}

.menu-footer-btn {
  font-size: 1rem !important;
  padding: 6px 10px !important;
}

.menu-context {
  font-size: 0.9rem !important;
  margin-top: 0.5rem !important;
}

/* ─────────────────────────────────────────────────────
   SCREEN TRANSITIONS - Più fluide
   ───────────────────────────────────────────────────── */
.screen-animate-in {
  animation: screenEnter 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* ─────────────────────────────────────────────────────
   FINE DEL TURNO - Feedback chiaro
   ───────────────────────────────────────────────────── */
#end-turn-btn:not(:disabled) {
  animation: endTurnPulse 2s ease-in-out infinite;
}

@keyframes endTurnPulse {
  0%, 100% { box-shadow: 0 4px 0 #0d5228; }
  50% { box-shadow: 0 4px 0 #0d5228, 0 0 12px rgba(46,204,113,0.4); }
}

/* Quando è il turno del giocatore, il bottone è più visibile */
.turn-badge.active-turn + .battle-console #end-turn-btn {
  animation: endTurnPulse 2s ease-in-out infinite;
}

/* =====================================================================
   FIX MOBILE DEFINITIVO — sostituisce/vince su tutte le regole mobile
   precedenti (che erano frammentate e in conflitto tra loro).
   Questo blocco è l'ultimo nel file quindi ha la precedenza in caso
   di pari specificità; usa !important dove serve per vincere sulle
   vecchie regole sparse nello <style> inline di index.html.
   ===================================================================== */
@media (max-width: 768px) {

  /* --- Layout generale schermata di gioco: usa tutta l'altezza reale
     del viewport (dvh gestisce la barra indirizzi mobile) senza scroll
     della pagina, cosicché mano/campo/HUD siano sempre visibili. --- */
  body.game-active {
    overflow: hidden !important;
    height: 100dvh !important;
    padding: 0.15rem !important;
  }
  body.game-active #app {
    height: 100% !important;
    min-height: 0 !important;
  }
  #game-screen:not(.hidden) {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
  }
  #game-screen.hidden {
    display: none !important;
  }
  .game-arena {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    overflow: hidden !important;
  }

  /* --- HUD: compatto ma leggibile, non deve mangiare spazio verticale --- */
  .enemy-hud-wrap,
  .hand-zone .hud-panel.player-hud {
    flex-shrink: 0 !important;
  }
  .hud-panel {
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  .hud-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.42rem !important;
  }
  .hud-name { font-size: 0.8rem !important; }
  .hud-meta { font-size: 0.68rem !important; gap: 3px 6px !important; }
  .hud-bar-track { height: 6px !important; }
  .hud-bar-label { font-size: 0.62rem !important; }
  .hand-zone-label { display: none !important; }

  /* --- Campo di battaglia: riga singola di 4 carte, sempre visibile
     senza tagliare né sovrapporsi. Le zone si dividono lo spazio
     rimanente in modo flessibile ma con un minimo garantito. --- */
  .field-zone {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #ai-field,
  #player-field {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3vw !important;
    width: 100% !important;
    grid-template-columns: none !important;
  }
  .field-slot {
    flex: 0 1 auto !important;
    width: 20vw !important;
    max-width: 78px !important;
    min-width: 56px !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .field-slot .card-on-field,
  .card-on-field {
    width: 100% !important;
    height: 100% !important;
  }
  .field-slot .card-on-field .card-image,
  .card-on-field .card-image {
    font-size: 1.5rem !important;
  }
  .field-slot .card-on-field .card-image img,
  .card-on-field .card-image img {
    width: 1.7rem !important;
    height: 1.7rem !important;
  }
  .field-slot .card-on-field .card-name,
  .card-on-field .card-name {
    font-size: 0.42rem !important;
    max-width: 90% !important;
  }
  .field-slot .card-on-field .card-stats,
  .card-on-field .card-stats {
    height: 16px !important;
    padding: 2px !important;
  }
  .field-slot .card-on-field .card-stat,
  .card-on-field .card-stat {
    font-size: 0.55rem !important;
  }
  .field-slot .card-on-field .card-cost,
  .card-on-field .card-cost {
    width: 14px !important;
    height: 14px !important;
    font-size: 0.5rem !important;
  }

  /* --- Console centrale: turno + log + bottoni, compatta --- */
  .battle-mid { flex-shrink: 0 !important; gap: 0.2rem !important; padding: 2px 0 !important; }
  .turn-badge { font-size: 0.8rem !important; padding: 3px 10px !important; }
  .battle-console { flex-direction: row !important; gap: 6px !important; align-items: stretch !important; }
  .battle-log { max-height: 44px !important; font-size: 0.72rem !important; padding: 4px 6px !important; }
  .battle-actions { flex-direction: column !important; gap: 4px !important; flex-shrink: 0 !important; }
  #end-turn-btn { min-height: 40px !important; font-size: 0.8rem !important; padding: 6px 10px !important; }
  #concede-btn { min-height: 30px !important; font-size: 0.65rem !important; padding: 4px 8px !important; }

  /* --- Mano del giocatore: dimensione fissa, scroll orizzontale unico
     sistema di riferimento (nessun'altra regola mobile deve più
     toccare width/height di #player-hand .card-in-hand). --- */
  .hand-zone {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    padding: 2px 0 !important;
    padding-bottom: max(2px, env(safe-area-inset-bottom)) !important;
  }
  .hand-zone .hud-panel.player-hud {
    margin-bottom: 2px !important;
    padding: 4px 8px !important;
  }
  #player-hand {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding: 4px 8px 6px !important;
    gap: 8px !important;
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    touch-action: pan-x !important;
  }
  #player-hand::before,
  #player-hand::after {
    content: '' !important;
    flex: 0 0 4px !important;
  }
  #player-hand .card-in-hand {
    flex: 0 0 auto !important;
    width: 84px !important;
    height: 116px !important;
    margin: 0 !important;
    scroll-snap-align: center !important;
  }
  #player-hand .card-in-hand .card-image { font-size: 1.9rem !important; }
  #player-hand .card-in-hand .card-image img { width: 2.1rem !important; height: 2.1rem !important; }
  #player-hand .card-in-hand .card-stats { height: 22px !important; }
  #player-hand .card-in-hand .card-stat { font-size: 0.65rem !important; }
  #player-hand .card-in-hand .card-cost { width: 18px !important; height: 18px !important; font-size: 0.65rem !important; }
  #player-hand .card-in-hand .card-name { font-size: 0.48rem !important; max-width: 62px !important; }

  /* Tap feedback chiaro invece dell'hover (che su touch resta "appiccicato") */
  #player-hand .card-in-hand:active:not(.selected) {
    transform: translateY(-8px) scale(1.05) !important;
  }
  #player-hand .card-in-hand.selected {
    transform: translateY(-14px) scale(1.08) !important;
    z-index: 20 !important;
  }

  /* --- Mano avversario in pass-and-play, se visibile --- */
  #player2-hand {
    max-height: 90px !important;
    overflow-y: auto !important;
  }

  /* --- Target di tocco minimi ovunque nell'interfaccia di gioco --- */
  .btn-retro,
  .tutorial-btn {
    min-height: 44px !important;
  }
}

/* Schermi molto bassi (es. telefoni in landscape, o iPhone SE) */
@media (max-width: 768px) and (max-height: 640px) {
  .field-slot { max-width: 64px !important; min-width: 48px !important; }
  #player-hand { height: 100px !important; min-height: 100px !important; max-height: 100px !important; }
  #player-hand .card-in-hand { width: 70px !important; height: 96px !important; }
  #player-hand .card-in-hand .card-image { font-size: 1.5rem !important; }
  .battle-log { max-height: 34px !important; }
}