:root{
    --bg-1: #0f1724;
    --bg-2: #0b1220;
    --accent: #22c1c3;
    --muted: #94a3b8;
    --card: #0f1724;
    --cell-border: rgba(255,255,255,0.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body {
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%);
    color: #e6eef6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:32px;
}

#topbar{
    width:100%;
    max-width:920px;
    background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.03);
    padding:16px 20px;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(2,6,23,0.6);
    display:flex;
    align-items:center;
    gap:12px;
}

#topbar h1{
    font-size:18px;
    letter-spacing:1px;
    color:var(--accent);
}

.online-count{font-size:13px;color:var(--muted);margin-right:8px}

/* App container (add this to your HTML as a wrapper for the board and controls) */
.container{
    width:100%;
    max-width:920px;
    margin-top:18px;
    display:grid;
    grid-template-columns: 1fr 280px;
    gap:18px;
}

/* Card */
.card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.03);
    padding:18px;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(2,6,23,0.6);
}

/* Board styles */
.board{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
    aspect-ratio:1/1;
    width:100%;
    max-width:640px;
}

/* Dim board when not player's turn */
.board.dimmed{filter:brightness(0.78) saturate(0.8);}

.cell{
    background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
    border:1px solid var(--cell-border);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    font-weight:700;
    color:#e6eef6;
    cursor:pointer;
    user-select:none;
    width:100%;
    height:100%;
    position:relative;
    transition:box-shadow .12s ease, background .12s ease, filter .08s ease;
}

/* Use box-shadow/filter for hover/active to avoid layout/transform jumps across browsers */
.cell:hover{box-shadow:0 12px 28px rgba(2,6,23,0.5); filter:brightness(1.02)}
.cell.disabled{opacity:0.6;cursor:default;box-shadow:none;filter:none}

/* Reserve element keeps size stable; .mark is the visible character */
.cell .reserve{visibility:hidden;display:inline-block;}
.cell .mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cell .mark.x{color:#ff7ab6}
.cell .mark.o{color:#7be7ff}

.cell.x{color:#ff7ab6}
.cell.o{color:#7be7ff}

/* Sidebar / controls */
.sidebar{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.score{
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:14px;
    color:var(--muted);
}

.message{
    font-size:16px;
    color:#dbeafe;
    padding:8px 10px;
    border-radius:8px;
    background:rgba(255,255,255,0.02);
}

.message.win{
    background:linear-gradient(90deg,#16a34a,#34d399);
    color:#021320;
    font-weight:700;
    box-shadow:0 6px 18px rgba(16,185,129,0.12);
}
.message.lose{
    background:linear-gradient(90deg,#ef4444,#fb7185);
    color:#021320;
    font-weight:700;
    box-shadow:0 6px 18px rgba(239,68,68,0.12);
}

.btn{
    display:inline-block;
    padding:10px 14px;
    background:linear-gradient(90deg,var(--accent), #66f3f1);
    color:#021320;
    font-weight:600;
    border-radius:8px;
    border:none;
    cursor:pointer;
    text-align:center;
    transition:transform .08s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px)}

/* Prevent buttons from changing size when clicked (remove inner focus padding and default appearance) */
.cell, .btn{
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.cell:focus, .btn:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(34,193,195,0.08);
}

.cell:active{ /* keep pressed visual without layout jump */
    transform: translateY(-2px);
}

.cell::-moz-focus-inner, .btn::-moz-focus-inner{ /* Firefox removes inner padding/border */
    border: 0;
    padding: 0;
}

/* Disable tap highlight on mobile */
.cell, .btn{ -webkit-tap-highlight-color: transparent; }

/* small screens */
@media (max-width:860px){
    .container{grid-template-columns:1fr;}
    .board{max-width:720px}
}

@media (max-width:420px){
    .cell{font-size:34px}
    #topbar h1{font-size:16px}
}

/* Utility */
.muted{color:var(--muted)}