/* Main Game Area */
.game-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pitch-container {
    position: relative;
    width: 800px;
    height: 571px; /* ratio 7:5 */
    background: repeating-linear-gradient(
        to right,
        var(--pitch-grass-1),
        var(--pitch-grass-1) 14.28%,
        var(--pitch-grass-2) 14.28%,
        var(--pitch-grass-2) 28.56%
    );
    border: 8px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
    overflow: visible;
}

/* Vignette Effect */
.pitch-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.5) 120%);
    mix-blend-mode: multiply;
    pointer-events: none;
    border-radius: 4px;
    z-index: 3;
}

/* Soccer Markings */
.pitch-markings {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

.center-line {
    position: absolute;
    top: 0; left: 50%;
    width: 3px; height: 100%;
    background: var(--pitch-line);
    transform: translateX(-50%);
}

.center-circle {
    position: absolute;
    top: 50%; left: 50%;
    width: 140px; height: 140px;
    border: 3px solid var(--pitch-line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.center-circle::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    background: var(--pitch-line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.penalty-area {
    position: absolute;
    top: 15%; height: 70%; width: 28.56%;
    border: 3px solid var(--pitch-line);
}
.penalty-area.left { left: 0; border-left: none; }
.penalty-area.right { right: 0; border-right: none; }

.goal-area {
    position: absolute;
    top: 30%; height: 40%; width: 14.28%;
    border: 3px solid var(--pitch-line);
}
.goal-area.left { left: 0; border-left: none; }
.goal-area.right { right: 0; border-right: none; }

/* External Goals */
.external-goal {
    position: absolute;
    top: 20%; height: 60%; width: 20px;
    border: 3px solid #ffffff;
    background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.4) 4px, rgba(255,255,255,0.4) 8px);
    z-index: 0;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
.external-goal.p2-goal { left: -28px; border-right: none; border-radius: 8px 0 0 8px; }
.external-goal.p1-goal { right: -28px; border-left: none; border-radius: 0 8px 8px 0; }

.external-goal.finish-available {
    background: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.8), inset 0 0 20px rgba(245, 158, 11, 0.5);
    border-color: #f59e0b;
    cursor: pointer;
    animation: pulse-finish 1s infinite alternate;
    z-index: 4;
}
.external-goal.finish-available::after {
    content: 'TAP TO FINISH';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
}

/* Grid Cells overlay */
.pitch {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    z-index: 2;
}

.cell {
    border: none;
    transition: background 0.15s;
    cursor: pointer;
    position: relative;
}

/* Dot marks at intersections instead of full borders */
.cell::after {
    content: '';
    position: absolute;
    bottom: -2px; right: -2px;
    width: 4px; height: 4px;
    background: var(--grid-line);
    border-radius: 50%;
    pointer-events: none;
}
.cell:nth-child(7n)::after { display: none; }
.cell:nth-last-child(-n+7)::after { display: none; }

.cell:hover {
    background: rgba(255, 255, 255, 0.15);
}

.cell.highlight-move { background: var(--highlight-move); }
.cell.highlight-pass { background: var(--highlight-pass); }
.cell.highlight-through { background: var(--highlight-through); }
.cell.highlight-tackle { background: var(--highlight-tackle); }
.cell.highlight-tackle-invalid { background: rgba(0, 0, 0, 0.5); cursor: not-allowed; }
.cell.highlight-danger-1 { background: rgba(245, 124, 0, 0.4); }
.cell.highlight-danger-2 { background: rgba(211, 47, 47, 0.4); }
.cell.goal-zone { background: rgba(255, 255, 255, 0.15); border: 1px dashed rgba(255,255,255,0.4); }
.cell.finish-zone {
    background: rgba(255, 255, 255, 0.08);
}

/* Ghost piece on hover */
.cell.highlight-move:hover::before, .cell.highlight-danger-1:hover::before, .cell.highlight-danger-2:hover::before {
    content: var(--piece-num);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--active-color);
    border: 2px dashed #ffffff;
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 15;
}

/* Offside warning */
.cell.offside-warning::after {
    content: "OFFSIDE";
    position: absolute;
    top: 6px; right: 6px;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.65rem;
    background: #b3261e;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    width: auto; height: auto;
}

/* Labels */
.pitch-labels {
    position: absolute;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #ffffff;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 4;
}
.pitch-labels.left {
    top: 0; left: 8px;
    width: 20px; height: 100%;
    flex-direction: column;
}
.pitch-labels.top {
    top: 8px; left: 0;
    width: 100%; height: 20px;
}

/* Mobile Pitch Style Overrides */
@media (max-width: 950px) {
    .game-area {
        flex: 1;
        min-height: 0;
        width: 100% !important;
        padding: 24px 0 60px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible;
    }

    .pitch-container {
        width: 100% !important;
        max-width: min(calc(100vw - 16px), calc((100dvh - 340px) * 5 / 7)) !important;
        height: auto !important;
        aspect-ratio: 5 / 7 !important;
        margin: auto;
        background: repeating-linear-gradient(
            to bottom,
            var(--pitch-grass-1),
            var(--pitch-grass-1) 14.28%,
            var(--pitch-grass-2) 14.28%,
            var(--pitch-grass-2) 28.56%
        );
        border: 6px solid #ffffff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    .pitch {
        grid-template-columns: repeat(5, 1fr) !important;
        grid-template-rows: repeat(7, 1fr) !important;
    }
    
    .pitch-labels.mobile-only {
        position: absolute;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #ffffff;
        font-family: 'Chakra Petch', sans-serif;
        font-weight: 800;
        font-size: 0.9rem;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.9);
        pointer-events: none;
        z-index: 4;
    }
    
    .pitch-labels.left.mobile-only {
        top: 0;
        left: -22px;
        width: 16px;
        height: 100%;
        flex-direction: column;
    }
    
    .pitch-labels.top.mobile-only {
        top: -22px;
        left: 0;
        width: 100%;
        height: 16px;
    }

    /* Vertical Soccer Markings */
    .center-line {
        top: 50% !important;
        left: 0 !important;
        width: 100% !important;
        height: 3px !important;
        transform: translateY(-50%) !important;
    }

    .center-circle {
        width: 100px !important;
        height: 100px !important;
    }

    .penalty-area {
        left: 15% !important;
        width: 70% !important;
        height: 28.56% !important;
        right: auto !important;
        top: auto !important;
    }
    .penalty-area.left {
        top: 0 !important;
        border-top: none !important;
        border-left: 3px solid var(--pitch-line) !important;
        border-right: 3px solid var(--pitch-line) !important;
        border-bottom: 3px solid var(--pitch-line) !important;
    }
    .penalty-area.right {
        bottom: 0 !important;
        border-bottom: none !important;
        border-left: 3px solid var(--pitch-line) !important;
        border-right: 3px solid var(--pitch-line) !important;
        border-top: 3px solid var(--pitch-line) !important;
    }

    .goal-area {
        left: 30% !important;
        width: 40% !important;
        height: 14.28% !important;
        right: auto !important;
        top: auto !important;
    }
    .goal-area.left {
        top: 0 !important;
        border-top: none !important;
        border-left: 3px solid var(--pitch-line) !important;
        border-right: 3px solid var(--pitch-line) !important;
        border-bottom: 3px solid var(--pitch-line) !important;
    }
    .goal-area.right {
        bottom: 0 !important;
        border-bottom: none !important;
        border-left: 3px solid var(--pitch-line) !important;
        border-right: 3px solid var(--pitch-line) !important;
        border-top: 3px solid var(--pitch-line) !important;
    }

    /* External Goals (top & bottom) */
    .external-goal {
        left: 20% !important;
        width: 60% !important;
        height: 18px !important;
        right: auto !important;
        top: auto !important;
    }
    .external-goal.p2-goal {
        bottom: -24px !important;
        border-bottom: 3px solid #ffffff !important;
        border-top: none !important;
        border-left: 3px solid #ffffff !important;
        border-right: 3px solid #ffffff !important;
        border-radius: 0 0 8px 8px !important;
    }
    .external-goal.p1-goal {
        top: -24px !important;
        border-top: 3px solid #ffffff !important;
        border-bottom: none !important;
        border-left: 3px solid #ffffff !important;
        border-right: 3px solid #ffffff !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    .external-goal.finish-available {
        animation: pulse-finish-vertical 1s infinite alternate;
    }
    
    .external-goal.finish-available::after {
        writing-mode: horizontal-tb !important;
        font-size: 0.65rem !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}