body { background-color: #09030f; background-image: radial-gradient(circle at 10% 20%, rgba(138,43,226,0.15), transparent 40%), radial-gradient(circle at 90% 80%, rgba(255,0,127,0.1), transparent 40%); background-attachment: fixed; min-height: 100vh; color: #e2d5f8; }

        /* Match nav */
        .matches-nav { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
        @media(max-width:768px){.matches-nav{grid-template-columns:repeat(3,1fr);}}
        @media(max-width:480px){.matches-nav{grid-template-columns:repeat(2,1fr);}}

        .match-card-top {
            background: rgba(255,255,255,0.04);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            border-radius: 12px;
            padding: 10px 8px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            cursor: pointer;
            transition: all 0.25s ease;
            border: 1px solid rgba(255,255,255,0.07);
            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
        }
        .match-card-top:hover { border-color: rgba(138,43,226,0.35); box-shadow: 0 6px 20px rgba(138,43,226,0.1); transform: translateY(-2px); }
        .match-card-top.active {
            background: linear-gradient(135deg, rgba(109,40,217,0.75), rgba(138,43,226,0.55));
            border-color: rgba(138,43,226,0.65);
            box-shadow: 0 4px 20px rgba(138,43,226,0.3);
        }
        .match-card-date { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.45); margin-bottom: 4px; letter-spacing: 0.5px; text-transform: uppercase; }
        .match-card-top.active .match-card-date { color: rgba(255,255,255,0.85); }
        .match-card-teams { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #e2d5f8; }
        .match-card-top.active .match-card-teams { color: #fff; }
        .match-card-vs { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.35); }
        .match-card-top.active .match-card-vs { color: rgba(255,255,255,0.7); }

        /* Team toggle */
        .team-selector {
            display: flex;
            background: rgba(255,255,255,0.04);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            border-radius: 50px;
            padding: 6px;
            margin: 0 auto 28px;
            max-width: 600px;
            border: 1px solid rgba(255,255,255,0.09);
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
            position: relative;
            z-index: 30;
        }
        .team-toggle-btn {
            flex: 1; padding: 10px 16px; border-radius: 40px;
            font-size: 15px; font-weight: 700; text-align: center; cursor: pointer;
            color: rgba(255,255,255,0.5); transition: all 0.3s;
            display: flex; align-items: center; justify-content: center; gap: 12px;
            position: relative;
            z-index: 31;
        }
        .team-toggle-btn.active { background: linear-gradient(90deg,#6d28d9,#8a2be2); color: #fff; box-shadow: 0 4px 12px rgba(138,43,226,0.3); }

        /* Pitch */
        .pitch-wrapper {
            position: relative; width: 100%; max-width: 840px;
            margin: -164px auto 0; height: 660px;
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        .pitch-3d {
            position: absolute; top:0; left:10%; right:10%; bottom:0;
            background: linear-gradient(180deg, #27272a 0%, #3f3f46 50%, #27272a 100%);
            border: 3px solid rgba(255,255,255,0.25);
            border-radius: 20px;
            transform: rotateX(45deg);
            transform-origin: bottom center;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.3);
            transform-style: preserve-3d;
        }
        html.dark .pitch-3d { background: linear-gradient(180deg, #18181b 0%, #27272a 50%, #18181b 100%); }

        /* Stripes on pitch */
        .pitch-3d::before {
            content:''; position:absolute; inset:0;
            background: repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 60px, transparent 60px, transparent 120px);
        }

        .pitch-line { position: absolute; background: rgba(255,255,255,0.25); }
        .pitch-center-line { width:100%; height:2px; top:50%; left:0; transform:translateY(-50%); }
        .pitch-center-circle { width:140px; height:140px; border:2px solid rgba(255,255,255,0.25); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); position:absolute; background:transparent; }
        .pitch-penalty-area-bottom { width:40%; height:12%; border:2px solid rgba(255,255,255,0.25); border-bottom:none; bottom:0; left:50%; transform:translateX(-50%); position:absolute; }
        .pitch-penalty-arc-bottom { width:80px; height:40px; border:2px solid rgba(255,255,255,0.25); border-bottom:none; border-radius:80px 80px 0 0; bottom:12%; left:50%; transform:translateX(-50%); position:absolute; }
        .pitch-penalty-area-top { width:40%; height:12%; border:2px solid rgba(255,255,255,0.25); border-top:none; top:0; left:50%; transform:translateX(-50%); position:absolute; }
        .pitch-penalty-arc-top { width:80px; height:40px; border:2px solid rgba(255,255,255,0.25); border-top:none; border-radius:0 0 80px 80px; top:12%; left:50%; transform:translateX(-50%); position:absolute; }

        /* Logo inciso sull'erba — nessuna counter-rotation: giace sul piano del prato */
        .pitch-grass-logo {
            position: absolute;
            bottom: 3%;
            left: 6%;
            width: 120px;
            opacity: 0.18;
            pointer-events: none;
            z-index: 5;
            filter: brightness(0) invert(1) sepia(1) saturate(0.4) hue-rotate(90deg);
        }

        /* Formation badge */
        .formation-badge {
            position: absolute; bottom: 12px; right: 12px; z-index: 15;
            transform: rotateX(-45deg); transform-origin: bottom right;
            background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
            color: #fff; font-family: 'Chakra Petch',sans-serif;
            font-size: 1rem; font-weight: 800; letter-spacing: 0.08em;
            padding: 5px 12px; border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.2); pointer-events: none;
        }

        /* Players */
        .players-container { position:absolute; top:0; left:0; right:0; bottom:0; z-index:10; pointer-events:none; transform-style:preserve-3d; }
        .player-node {
            position:absolute;
            transform:translate(-50%,-50%) rotateX(-45deg);
            transform-origin:bottom center;
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            cursor:pointer; transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
            width:104px; pointer-events:auto; transform-style:preserve-3d;
        }
        .player-node:hover { transform:translate(-50%,-60%) rotateX(-45deg) scale(1.15); z-index:20; }

        .player-avatar-wrapper { 
            filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(138,43,226,0.3)); 
            transition: all 0.3s ease;
        }
        .player-node:hover .player-avatar-wrapper {
            filter: drop-shadow(0 10px 16px rgba(0,0,0,0.7)) drop-shadow(0 0 16px rgba(138,43,226,0.8));
        }

        .player-avatar {
            width: 65px; height: 65px;
            position: relative;
            display: flex; align-items: flex-end; justify-content: center;
            flex-shrink: 0;
            z-index: 1;
            /* Rimosso clip-path qui per far uscire l'immagine 3D */
        }

        /* Bordo bianco del pentagono */
        .player-avatar::before {
            content: ''; position: absolute; inset: 0;
            clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
            background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 100%);
            z-index: -2;
        }

        /* Sfondo scuro del pentagono con effetto shine integrato */
        .player-avatar::after {
            content: ''; position: absolute; inset: 2px;
            clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
            background-image: 
                linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.6)),
                linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.3) 50%, transparent 80%);
            background-size: 100% 100%, 200% 100%;
            background-position: 0 0, -200% 0;
            background-repeat: no-repeat;
            transition: background-position 0.6s ease;
            z-index: -1;
        }

        .player-node:hover .player-avatar::after {
            background-position: 0 0, 200% 0;
        }

        .player-avatar-inner {
            width: calc(100% - 4px); height: calc(115% - 4px);
            position: absolute; bottom: 2px; left: 2px;
            display: flex; align-items: flex-end; justify-content: center;
            font-weight: 800; font-size: 14px; font-family: 'Chakra Petch',sans-serif;
            z-index: 1;
        }

        /* L'immagine del giocatore: più alta del contenitore, con clip-path tagliato solo in basso */
        .player-avatar-inner img, .player-avatar-inner svg {
            width: 100%; height: 135%;
            position: absolute; bottom: 0; left: 0;
            object-fit: cover;
            object-position: bottom center;
            transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
            /* Taglia in basso per seguire il pentagono. In alto resta aperto (pop-out 3D).
               Y=38% (bordo container) diventa Y=54% (per immagine height 135%) */
            clip-path: polygon(-50% -50%, 150% -50%, 100% 54%, 81% 100%, 19% 100%, 0% 54%);
            z-index: 2;
            filter: drop-shadow(0 -3px 5px rgba(0,0,0,0.5));
        }

        .player-node:hover .player-avatar-inner img, 
        .player-node:hover .player-avatar-inner svg {
            transform: scale(1.15) translateY(-8%);
        }

        .player-info {
            color: #fff; font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap;
            margin-top: 6px; max-width: 100px; overflow: hidden; text-overflow: ellipsis;
            background: rgba(20, 20, 30, 0.6);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 8px; padding: 2px 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
            text-transform: uppercase; letter-spacing: 0.05em;
            transition: all 0.3s ease;
        }
        .player-node:hover .player-info {
            background: rgba(138,43,226,0.6);
            border-color: rgba(255,255,255,0.4);
            box-shadow: 0 4px 15px rgba(138,43,226,0.5);
        }


        /* Bench */
        .bench-container {
            background: var(--theme-surface-1);
            border-radius: 16px; padding: 18px;
            border: 1px solid var(--theme-border);
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        .bench-sep { height:1px; background:var(--theme-border); flex:1; }
        .bench-title { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--theme-muted); display:flex; align-items:center; gap:0.5rem; }
        .bench-player-row {
            display:flex; align-items:center; gap:0.75rem; padding:0.4rem 0.5rem;
            border-radius:10px; cursor:pointer; transition:background 0.15s;
        }
        .bench-player-row:hover { background:var(--theme-surface-2); }
        .bench-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; font-family:'Chakra Petch',sans-serif; flex-shrink:0; background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.4)); overflow: hidden; }
        .bench-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .bench-name { font-weight:600; font-size:0.8rem; color:var(--theme-text); }
        .bench-reason { font-size:0.7rem; color:var(--theme-danger); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }

        /* Match datetime badge */
        .match-datetime-badge {
            display:inline-flex; align-items:center; gap:0.5rem;
            font-size:0.8rem; font-weight:700; color:var(--theme-text-soft);
            background:var(--theme-surface-2); padding:0.4rem 1rem; border-radius:9999px;
            border:1px solid var(--theme-border);
        }

        /* Modal */
        #player-modal-content {
            background: var(--theme-surface-1);
            border: 1px solid var(--theme-border);
            color: var(--theme-text);
        }
        .modal-stat-label { font-size:0.72rem; color:var(--theme-muted); }
        .modal-divider { border-color:var(--theme-border); }
        .league-badge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.25rem 0.75rem; border-radius:9999px; font-size:0.7rem; font-weight:700; letter-spacing:0.08em; background:var(--theme-surface-2); color:var(--theme-muted); border:1px solid var(--theme-border); }