.ttt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
}

.ttt__status {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    min-height: 1.4em;
}

.ttt__board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.ttt__cell {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: background var(--transition-fast), transform var(--transition-fast);
    min-height: var(--touch-target);
}

.ttt__cell:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--accent);
}

.ttt__cell[data-mark="O"] { color: var(--accent-2); }

.ttt__cell.is-win {
    background: var(--accent-soft);
    border-color: var(--accent);
    animation: ttt-pop 260ms ease;
}

@keyframes ttt-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.ttt__scoreboard {
    display: flex;
    gap: 24px;
}

.ttt__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ttt__score span:last-child {
    font-size: 1.4rem;
    color: var(--text);
    font-weight: 700;
    text-transform: none;
}

.ttt__actions { margin-top: 4px; }