/* Ludo Game Styles */

.main-area {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.board-container {
    background: var(--card-background);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main Ludo Board - 15x15 grid */
.ludo-board {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
    gap: 1px;
    background: #333;
    padding: 2px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    max-width: 600px;
    width: 100%;
    aspect-ratio: 1;
}

/* Base cell styling */
.ludo-cell {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
}

/* Empty/invisible cells (corners outside play area) */
.ludo-cell.empty {
    background: transparent;
}

/* Home base styling - colored backgrounds */
.ludo-cell.home-red {
    background: #ef5350;
}

.ludo-cell.home-blue {
    background: #42a5f5;
}

.ludo-cell.home-green {
    background: #66bb6a;
}

.ludo-cell.home-yellow {
    background: #ffca28;
}

/* Home base inner area (where tokens start) */
.ludo-cell.home-inner {
    background: white;
    border-radius: 50%;
    margin: 2px;
}

.ludo-cell.home-inner.red { border: 3px solid #c62828; }
.ludo-cell.home-inner.blue { border: 3px solid #1565c0; }
.ludo-cell.home-inner.green { border: 3px solid #2e7d32; }
.ludo-cell.home-inner.yellow { border: 3px solid #f9a825; }

/* Track cells (the path around the board) */
.ludo-cell.track {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}

/* Colored start cells */
.ludo-cell.start-red {
    background: #ef5350;
}

.ludo-cell.start-blue {
    background: #42a5f5;
}

.ludo-cell.start-green {
    background: #66bb6a;
}

.ludo-cell.start-yellow {
    background: #ffca28;
}

/* Safe squares (stars) */
.ludo-cell.safe {
    background: #fff9c4;
}

.ludo-cell.safe::after {
    content: '\2605';
    position: absolute;
    font-size: 0.8em;
    color: #ffc107;
    opacity: 0.7;
}

/* Home column cells (colored paths to center) */
.ludo-cell.home-column-red {
    background: #ffcdd2;
}

.ludo-cell.home-column-blue {
    background: #bbdefb;
}

.ludo-cell.home-column-green {
    background: #c8e6c9;
}

.ludo-cell.home-column-yellow {
    background: #fff9c4;
}

/* Center finish area */
.ludo-cell.center {
    background: #f5f5f5;
}

.ludo-cell.center-red {
    background: linear-gradient(135deg, #ef5350 0%, #c62828 100%);
}

.ludo-cell.center-blue {
    background: linear-gradient(135deg, #42a5f5 0%, #1565c0 100%);
}

.ludo-cell.center-green {
    background: linear-gradient(135deg, #66bb6a 0%, #2e7d32 100%);
}

.ludo-cell.center-yellow {
    background: linear-gradient(135deg, #ffca28 0%, #f9a825 100%);
}

.ludo-cell.center-finish {
    background: linear-gradient(45deg,
        #ef5350 0%, #ef5350 25%,
        #66bb6a 25%, #66bb6a 50%,
        #42a5f5 50%, #42a5f5 75%,
        #ffca28 75%, #ffca28 100%);
}

/* Arrow indicators for entry points */
.ludo-cell.entry-arrow::before {
    content: '\25B6';
    font-size: 0.6em;
    color: rgba(0,0,0,0.3);
}

.ludo-cell.entry-arrow.up::before { content: '\25B2'; }
.ludo-cell.entry-arrow.down::before { content: '\25BC'; }
.ludo-cell.entry-arrow.left::before { content: '\25C0'; }
.ludo-cell.entry-arrow.right::before { content: '\25B6'; }

/* Token styling */
.token {
    width: 70%;
    height: 70%;
    border-radius: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6em;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 10;
}

.token:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.token.red { background: linear-gradient(135deg, #f44336 0%, #c62828 100%); }
.token.blue { background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%); }
.token.green { background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%); }
.token.yellow { background: linear-gradient(135deg, #ffc107 0%, #f9a825 100%); color: #333; text-shadow: none; }

.token.selectable {
    animation: pulse 1s ease-in-out infinite;
    cursor: pointer;
}

.token.selectable::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: pulse-ring 1s ease-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* Multiple tokens on same cell */
.tokens-container {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.tokens-container .token {
    width: 40%;
    height: 40%;
    position: relative;
}

/* Token in home base */
.home-token-slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-token-slot .token {
    width: 80%;
    height: 80%;
}

/* Highlighted cell for valid moves */
.ludo-cell.highlight {
    background-color: rgba(76, 175, 80, 0.3) !important;
    animation: highlight-pulse 0.8s ease-in-out infinite;
}

@keyframes highlight-pulse {
    0%, 100% { box-shadow: inset 0 0 10px rgba(76, 175, 80, 0.5); }
    50% { box-shadow: inset 0 0 20px rgba(76, 175, 80, 0.8); }
}

/* Controls */
.controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard {
    background: var(--card-background);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.action-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.current-player-display {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.current-player-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
}

.current-player-indicator.red { background: #f44336; }
.current-player-indicator.blue { background: #2196f3; }
.current-player-indicator.green { background: #4caf50; }
.current-player-indicator.yellow { background: #ffc107; }

.dice-display {
    font-size: 4rem;
    animation: none;
    min-width: 80px;
    text-align: center;
}

.dice-display.rolling {
    animation: dice-roll 0.5s ease-in-out;
}

@keyframes dice-roll {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(90deg) scale(1.2); }
    50% { transform: rotate(180deg) scale(0.8); }
    75% { transform: rotate(270deg) scale(1.2); }
}

.action-btn {
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Extra turn indicator */
.extra-turn-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    animation: badge-bounce 0.5s ease;
}

@keyframes badge-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Players Grid */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.player-card {
    background: var(--card-background);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--border-color);
    transition: var(--transition);
}

.player-card.active {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.player-card.active.red { border-left-color: #f44336; background: linear-gradient(135deg, #ffebee 0%, #ffffff 100%); }
.player-card.active.blue { border-left-color: #2196f3; background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%); }
.player-card.active.green { border-left-color: #4caf50; background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%); }
.player-card.active.yellow { border-left-color: #ffc107; background: linear-gradient(135deg, #fffde7 0%, #ffffff 100%); }

.player-card.winner {
    border-left-color: var(--success-color);
    background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
}

.player-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-color-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.player-color-marker.red { background: #f44336; }
.player-color-marker.blue { background: #2196f3; }
.player-color-marker.green { background: #4caf50; }
.player-color-marker.yellow { background: #ffc107; }

.player-tokens-status {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.token-status {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: white;
    font-weight: bold;
}

.token-status.home { opacity: 0.4; }
.token-status.playing { opacity: 0.8; }
.token-status.finished {
    opacity: 1;
    box-shadow: 0 0 8px gold;
}

.token-status.finished::after {
    content: '\2713';
}

.token-status.red { background: #f44336; }
.token-status.blue { background: #2196f3; }
.token-status.green { background: #4caf50; }
.token-status.yellow { background: #ffc107; }

.finished-count {
    font-size: 1rem;
    color: var(--success-color);
    font-weight: 700;
    margin-top: 8px;
}

.winner-badge {
    display: inline-block;
    background: var(--success-color);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 8px;
}

/* Online Info */
.online-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    padding: 10px;
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.opponent-name {
    font-weight: 600;
    color: var(--text-muted);
}

/* My card highlight for online */
.player-card.my-card {
    border: 2px solid var(--success-color);
}

/* Token selection message */
.token-select-message {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 2px solid #ff9800;
    border-radius: var(--border-radius);
    padding: 15px 25px;
    text-align: center;
    font-weight: 600;
    color: #e65100;
    animation: message-pulse 1s ease-in-out infinite;
}

@keyframes message-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Game Buttons */
.game-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 15px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ludo-board {
        max-width: 100%;
    }

    .token {
        font-size: 0.4em;
    }

    .ludo-cell.safe::after {
        font-size: 0.5em;
    }

    .action-panel {
        flex-direction: column;
        gap: 15px;
    }

    .dice-display {
        font-size: 3rem;
    }

    .current-player-display {
        font-size: 1.1rem;
    }

    .board-container {
        padding: 10px;
    }

    .players-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .players-grid {
        grid-template-columns: 1fr;
    }

    .player-card {
        padding: 15px;
    }

    .dice-display {
        font-size: 2.5rem;
    }
}