:root {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --primary-color: #3b82f6;
    --secondary-color: #64748b;
    --accent-p1: #ef4444;
    /* Redish for P1 */
    --accent-p2: #22d3ee;
    /* Cyanish for P2 */
    --board-bg: #1e293b;
    --cell-bg: #334155;
    --cell-hover: #475569;
    --wall-color: #cbd5e1;
    --wall-ghost: rgba(203, 213, 225, 0.4);

    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);

    --cell-size: 50px;
    --gap-size: 10px;
}

body {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

header {
    margin-bottom: 20px;
    text-align: center;
}

h1 {
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0;
    font-size: 2.5rem;
    background: linear-gradient(to right, var(--accent-p1), var(--accent-p2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.game-status {
    margin-top: 5px;
    color: var(--secondary-color);
    font-size: 0.9rem;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Align top for panels */
    gap: 40px;
    flex: 1;
    width: 100%;
}

/* Player Panels */
.player-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    width: 200px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    opacity: 0.6;
}

.player-panel.active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
    /* Slightly larger when active */
}

.p1-panel.active {
    border-top: 4px solid var(--accent-p1);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.p2-panel.active {
    border-top: 4px solid var(--accent-p2);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
}

.player-info h2 {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
}

.p1-panel h2 {
    color: var(--accent-p1);
}

.p2-panel h2 {
    color: var(--accent-p2);
}

.score-box {
    text-align: center;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.score-box .value {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.stat-item .value {
    font-weight: 600;
}

/* Game Board */
.board-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-board {
    display: grid;
    /* 
       We use an interleaved grid: Cell, Gap, Cell, Gap... 
       For 7 cells, we have 7 columns of cells and 6 columns of gaps.
       Total columns = 7 + 6 = 13. Same for rows.
       Cell columns are 1fr (or fixed size). Gaps are fixed size.
    */
    grid-template-columns: repeat(6, var(--cell-size) var(--gap-size)) var(--cell-size);
    grid-template-rows: repeat(6, var(--cell-size) var(--gap-size)) var(--cell-size);
    background: var(--board-bg);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Prevent selection */
    user-select: none;
}

/* Grid Items */
.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    background-color: var(--cell-bg);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cell:hover {
    background-color: var(--cell-hover);
}

.cell.valid-move {
    background-color: rgba(74, 222, 128, 0.3);
    /* Greenish hint */
    box-shadow: inset 0 0 0 2px rgba(74, 222, 128, 0.5);
}

.cell.selected {
    box-shadow: inset 0 0 0 2px #fff;
}

/* Walls spots */
.v-wall-slot {
    /* Vertical slot between columns */
    /* width is gap-size, height is cell-size */
    width: var(--gap-size);
    height: var(--cell-size);
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 2px;
}

.h-wall-slot {
    /* Horizontal slot between rows */
    /* Height is gap-size, width is cell-size */
    height: var(--gap-size);
    width: var(--cell-size);
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 2px;
}

.wall-slot:hover {
    background-color: var(--wall-ghost);
}

.wall-slot.filled {
    background-color: var(--wall-color);
    box-shadow: 0 0 5px var(--wall-color);
    cursor: default;
}

/* Corner/Intersection slots - mostly for spacing, but maybe nice to detect 'crossing' if logic allows, 
   but rules usually just say "walls between tiles". Visual continuity looks better if the intersection gets filled?
   Actually, standard Wall Go / Quoridor usually doesn't fill the intersection fully if walls don't cross,
   but visually a continuous line looks better. 
   We will treat walls as strict segments for now. 
*/
.intersection {
    width: var(--gap-size);
    height: var(--gap-size);
}

/* Tokens */
.token {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.token.p1 {
    background: var(--accent-p1);
    box-shadow: 0 0 10px var(--accent-p1);
}

.token.p2 {
    background: var(--accent-p2);
    box-shadow: 0 0 10px var(--accent-p2);
}

.token.newly-placed {
    animation: popIn 0.3s forwards;
}

@keyframes popIn {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* Turn Indicator */
.turn-indicator {
    margin-top: 20px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

/* Notification Area */
.notification-area {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.notification-area.show {
    opacity: 1;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.3s;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal {
    background: var(--board-bg);
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid var(--glass-border);
    max-width: 400px;
    width: 90%;
}

.primary-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 20px;
}

.primary-btn:hover {
    background: #2563eb;
}

/* Responsive adjustments */
@media (max-width: 800px) {
    main {
        flex-direction: column;
        gap: 20px;
    }

    .player-panel {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    .score-box {
        margin: 0;
        padding: 5px 10px;
    }

    .score-box .value {
        font-size: 1.5rem;
    }

    :root {
        --cell-size: 35px;
        --gap-size: 6px;
    }
}