:root {
    --bg: #0f0f12;
    --card: #15161a;
    --muted: #8a8f98;
    --text: #e7e9ee;
    --accent: #4f8cff;
    --x: #ff6b6b;
    --o: #3ad29f;
    --won: #20222a;
    --grid-gap: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background: radial-gradient(1200px 800px at 20% -20%, #1b1d24 0%, var(--bg) 60%);
}

.app-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px clamp(16px, 4vw, 28px);
    background: linear-gradient(180deg, rgba(15,15,18,0.9), rgba(15,15,18,0.6) 60%, rgba(15,15,18,0));
    backdrop-filter: blur(6px);
}

.back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: #191b21;
    color: var(--text);
    text-decoration: none;
    border: 1px solid #24262e;
    box-shadow: 0 1px 0 #2a2d35 inset, 0 1px 10px rgba(0,0,0,0.2);
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.back-button:hover { background: #1b1e25; border-color: #2c2f39; }
.back-button:active { transform: translateY(1px); }

.app-title { margin: 0; font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; letter-spacing: 0.2px; color: var(--text); }

.app-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(16px, 4vw, 28px);
    display: grid;
    gap: 18px;
}

.hud { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.status {
    color: var(--text);
    font-size: clamp(16px, 2.2vw, 20px);
    font-weight: 700;
    letter-spacing: 0.2px;
}

.reset {
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    background: #191b21;
    color: var(--text);
    border: 1px solid #24262e;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.reset:hover { background: #1b1e25; border-color: #2c2f39; }
.reset:active { transform: translateY(1px); }

.board {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    width: min(92vw, 720px);
}

.mini-board {
    aspect-ratio: 1 / 1;
    background: var(--card);
    border-radius: 14px;
    border: 1px solid #24262e;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25), 0 1px 0 #2a2d35 inset;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    position: relative;
}

.mini-board.active { outline: 2px solid var(--accent); outline-offset: 0; }
.mini-board.won { background: var(--won); }
.mini-board.won-x { outline: 2px solid rgba(255,107,107,0.5); box-shadow: 0 0 0 4px rgba(255,107,107,0.08) inset; }
.mini-board.won-o { outline: 2px solid rgba(58,210,159,0.5); box-shadow: 0 0 0 4px rgba(58,210,159,0.08) inset; }

.cell {
    aspect-ratio: 1 / 1;
    background: #0f1014;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: clamp(18px, 5.6vw, 32px);
    color: var(--text);
    border: 1px solid #1c1f26;
    cursor: pointer;
    transition: transform 100ms ease, background 160ms ease, border-color 160ms ease;
}
.cell:hover { background: #12141a; border-color: #212430; }
.cell:active { transform: scale(0.98); }
.cell.disabled { cursor: default; opacity: 0.35; }
.cell.x { color: var(--x); text-shadow: 0 0 10px rgba(255,107,107,0.25); }
.cell.o { color: var(--o); text-shadow: 0 0 10px rgba(58,210,159,0.25); }

.mini-winner {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    font-size: clamp(28px, 8vw, 44px);
    font-weight: 800;
    color: #ffffff12;
}
.mini-winner.x { color: rgba(255,107,107,0.18); text-shadow: 0 0 24px rgba(255,107,107,0.25); }
.mini-winner.o { color: rgba(58,210,159,0.18); text-shadow: 0 0 24px rgba(58,210,159,0.25); }

@media (max-width: 520px) {
    :root { --grid-gap: 8px; }
    .mini-board { padding: 8px; gap: 6px; border-radius: 12px; }
    .cell { border-radius: 8px; }
}