@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&display=swap');

:root {
    --bg-dark: #0a0b10;
    --bg-light: #181926;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    
    --human-grad: linear-gradient(135deg, #f43f5e, #fbbf24);
    --human-glow: rgba(244, 63, 94, 0.5);
    
    --ai-grad: linear-gradient(135deg, #0ea5e9, #10b981);
    --ai-glow: rgba(14, 165, 233, 0.5);
    
    --board-bg: rgba(20, 22, 35, 0.6);
    --slot-bg: rgba(5, 5, 8, 0.8);
    
    --text-main: #f8fafc;
    --text-muted: #64748b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background: radial-gradient(circle at top right, #1f1b2e 0%, #0a0b10 100%);
    background-attachment: fixed;
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.game-wrapper {
    width: 100%;
    max-width: 650px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Glass Panels */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    box-shadow: var(--glass-shadow);
}

/* Header Sections */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.logo {
    font-size: 2.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.logo span {
    background: var(--ai-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.score-board {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 30px;
    position: relative;
    overflow: hidden;
}

/* Animate background glow in scoreboard based on active player */
.score-board::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.02) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.player {
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.player.active {
    opacity: 1;
    transform: scale(1.08);
}

.player.active .avatar {
    box-shadow: 0 0 25px var(--active-glow, transparent);
}

.player-human { --active-glow: var(--human-glow); }
.player-ai { --active-glow: var(--ai-glow); }

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: all 0.3s;
}

.magenta-glow { background: var(--human-grad); }
.cyan-glow { background: var(--ai-grad); }

.info {
    display: flex;
    flex-direction: column;
}

.text-right { text-align: right; }

.name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.status {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.vs-text {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--glass-border);
    z-index: 1;
}

/* Board Styling */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.board-container {
    width: 100%;
    padding: 16px;
    background: var(--board-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 32px;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 2px 20px rgba(255,255,255,0.02);
}

.drop-zone {
    position: absolute;
    top: 16px; left: 16px; right: 16px; bottom: 16px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    z-index: 10;
}

.indicator {
    height: 100%;
    width: 100%;
    cursor: pointer;
    border-radius: 16px;
    transition: background 0.2s;
}

@media (hover: hover) {
    .indicator:hover {
        background: rgba(255, 255, 255, 0.04);
    }
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 12px;
}

.cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--slot-bg);
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0 6px 15px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.03);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Hide overflow initially so pieces drop "into" the board from top edge */
    /* wait, if overflow is hidden, pieces can't be seen above the board while dropping.
       Actually, pieces drop visually from above the slot but INSIDE the transparent board-grid or inside the cell itself. 
       Let's allow them to drop from ABOVE the entire board by NOT hiding overflow on cell, 
       but we want them to appear behind the glass. So we must put pieces inside .cell but z-index -1? */
}

.piece {
    width: 86%;
    height: 86%;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    transform: translateY(-800%);
    box-shadow: inset -4px -4px 10px rgba(0,0,0,0.3), inset 4px 4px 10px rgba(255,255,255,0.2);
}

.piece.human { background: var(--human-grad); box-shadow: 0 5px 15px var(--human-glow), inset -4px -4px 10px rgba(0,0,0,0.3), inset 4px 4px 10px rgba(255,255,255,0.2); }
.piece.ai { background: var(--ai-grad); box-shadow: 0 5px 15px var(--ai-glow), inset -4px -4px 10px rgba(0,0,0,0.3), inset 4px 4px 10px rgba(255,255,255,0.2); }

.piece.dropped {
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Win pulse animation */
@keyframes winPulse {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.1); filter: brightness(1.5); box-shadow: 0 0 30px #fff; }
    100% { transform: scale(1); filter: brightness(1); }
}

.win-pulse {
    animation: winPulse 1s infinite;
    z-index: 5;
}

/* Buttons */
.controls { width: 100%; display: flex; justify-content: center; }

.btn {
    padding: 14px 36px;
    border: none;
    border-radius: 50px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.glass-btn {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.glass-btn:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal {
    padding: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transform: translateY(40px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 90%;
    width: 400px;
    background: var(--bg-dark); /* fallback */
    background: linear-gradient(145deg, rgba(30,32,45,0.95), rgba(15,16,25,0.95));
}

.modal-overlay.show .modal {
    transform: translateY(0) scale(1);
}

.gradient-text {
    font-size: 3rem;
    font-weight: 900;
    background: var(--human-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px var(--human-glow);
}

.gradient-text.ai-win {
    background: var(--ai-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px var(--ai-glow);
}

#modalMessage {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.5;
}

.cta-btn {
    background: #fff;
    color: #000;
    margin-top: 10px;
}

.cta-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 30px rgba(255,255,255,0.3);
}

@media (max-width: 500px) {
    .board-grid { gap: 8px; }
    .score-board { padding: 16px; flex-direction: column; gap: 16px; border-radius: 20px;}
    .player-ai { flex-direction: row-reverse; }
    .vs-text { display: none; }
    .logo { font-size: 2.2rem; }
    .game-wrapper { padding: 12px; gap: 20px; }
    .board-container { border-radius: 16px; padding: 12px; }
}