:root {
    --bg: #0f1724; 
    --card:#0b1220; 
    --accent:#06b6d4; 
    --muted:#94a3b8; 
    --win:#10b981;
    --purple: #7c3aed;
    --purpleX: #dd98ff;
    --blueO: #7dd3fc;
    --size: min(72vmin,420px);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
}

body {
    margin: 0; 
    display: grid; 
    place-items: center; 
    gap: 16px; 
    padding: 24px;
    background: linear-gradient(180deg,#071025 0%, #071428 100%); 
    color: #e6eef6;
}

.card {
    width: var(--size); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: 14px;
    padding: 18px; 
    box-shadow: 0 8px 30px rgba(2,6,23,0.7); 
    border: 1px solid rgba(255,255,255,0.04);
}

header {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 12px;
}

h1 {
    font-size: 2rem; 
    margin: 0; 
    letter-spacing: 0.2px;
    text-shadow: 0 0 0.15em hsla(199, 95%, 74%, 1), 0 0 0.45em var(--purpleX);
}

p.lead {
    margin: 0; 
    color: var(--muted); 
    font-size: 1rem;
}

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

#score {
    color: var(--muted);
    font-size: 1rem;
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.board {
    display: grid; 
    grid-template-columns: repeat(3,1fr); 
    gap: 10px; 
    margin-top: 14px;
}

.cell {
    background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(120, 115, 115, 0.01));
    border-radius: 8px; 
    aspect-ratio: 1/1; 
    display: grid; 
    place-items: center; 
    font-size: clamp(28px, 6vmin, 62px);
    cursor: pointer; 
    user-select: none; 
    transition: transform .12s ease, box-shadow .12s ease;
    border: 1px solid rgba(255,255,255,0.03);
}

.cell:active {
    transform: scale(.98);
}

.cell.disabled {
    cursor: default; 
    opacity: .9;
}

.x {
    color: var(--purpleX); 
    font-weight: 700;
}

.o {
    color: var(--blueO); 
    font-weight: 700;
}

.controls {
    display: flex; 
    gap: 8px; 
    align-items: center; 
    margin-top: 12px;
}

button.btn {
    background: transparent; 
    border: 1px solid rgba(255,255,255,0.06); 
    padding: 8px 12px; 
    border-radius: 8px; 
    color: inherit; 
    cursor: pointer;
    font-size: 1rem;
}

button.primary {
    background: linear-gradient(90deg, var(--accent), var(--purple)); 
    border: none;
}

#status {
    color: var(--muted); 
    font-size: 1rem;
    text-align: center; 
    border-radius: 8px; 
    padding: 5px 7px;
    min-width: 100px;
    min-height: 50px;
}        

#stat-p {
    margin: 0;
    padding: 0;
}

.draw-style {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.line {
    position: absolute; 
    pointer-events: none;
}

.win {
    background: linear-gradient(90deg, rgba(16,185,129,0.12), rgba(16,185,129,0.06)); 
    border-radius: 10px;
}

@media (max-width:420px) {
    .card {
        padding: 12px;
    }

    #status {
        min-width: 70px;
    }
}

.win-flash { 
    animation: winFlash 1.25s ease-in-out infinite;
}

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