/* TicTacArena — main theme (spec: primary #1a1a2e, accent #e94560, surface #16213e, text #eaeaea) */
:root {
    --tictac-primary: #1a1a2e;
    --tictac-accent: #e94560;
    --tictac-surface: #16213e;
    --tictac-text: #eaeaea;
    --tictac-font: 'Inter', system-ui, sans-serif;
    --tictac-board-font: 'Courier New', monospace;
}

* { box-sizing: border-box; }
body.tictac-page {
    margin: 0;
    font-family: var(--tictac-font);
    background: var(--tictac-primary);
    color: var(--tictac-text);
    min-height: 100vh;
}
.tictac-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--tictac-surface);
    border-bottom: 1px solid rgba(233,69,96,0.3);
}
.tictac-header a { color: var(--tictac-accent); text-decoration: none; }
.tictac-header a:hover { text-decoration: underline; }
.tictac-main {
    max-width: 480px;
    margin: 2rem auto;
    padding: 0 1rem;
}
.tictac-main h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.tictac-form label { display: block; margin-top: 0.75rem; }
.tictac-form input[type="text"],
.tictac-form input[type="password"],
.tictac-form input[type="email"],
.tictac-form input[type="number"] {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.25rem;
    background: var(--tictac-surface);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--tictac-text);
    font-size: 1rem;
}
.tictac-form button {
    margin-top: 1rem;
    padding: 0.5rem 1.25rem;
    background: var(--tictac-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}
.tictac-form button:hover { opacity: 0.9; }
.tictac-error { color: #f66; margin: 0.5rem 0; }
.tictac-msg { color: #9f9; margin: 0.5rem 0; }
.tictac-form p { margin-top: 1rem; }
.tictac-form a { color: var(--tictac-accent); }

/* Grid homepage */
.tictac-index .tictac-main { max-width: 900px; }
.tictac-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0.5rem;
    min-height: 360px;
    margin: 1rem 0;
}
.tictac-grid-panel {
    background: var(--tictac-surface);
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 6px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tictac-grid-center { border-color: var(--tictac-accent); }
.tictac-join-btn {
    padding: 0.5rem 1rem;
    background: var(--tictac-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
.tictac-panel-title, .tictac-panel-turn, .tictac-panel-result { font-size: 0.85rem; margin: 0.25rem 0; }
.tictac-panel-board-wrap { margin: 0.25rem 0; }

/* Board */
.tictac-board {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 2px;
    width: 120px;
    height: 120px;
    font-family: var(--tictac-board-font);
    font-size: 1.5rem;
}
.tictac-cell {
    background: var(--tictac-primary);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--tictac-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 38px;
}
.tictac-board-readonly .tictac-cell { cursor: default; }
.tictac-cell-x { color: var(--tictac-accent); }
.tictac-cell-o { color: #6cf; }
.tictac-news-list { margin-top: 2rem; }
.tictac-news-list h2 { font-size: 1.1rem; }
.tictac-news-list ul { list-style: none; padding: 0; }
.tictac-news-list li { margin: 0.5rem 0; padding: 0.5rem; background: var(--tictac-surface); border-radius: 4px; }
.tictac-news-list a { color: var(--tictac-accent); }
.tictac-timer-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--tictac-surface);
    background: conic-gradient(var(--tictac-accent) 0% var(--tictac-timer-pct, transparent var(--tictac-timer-pct) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}