:root { --size: 100px; --gap: 10px; --bg:#0f172a; --fg:#e2e8f0; --accent:#22d3ee; --win:#10b981; --lose:#ef4444; }
* { box-sizing: border-box; }
body { 
    margin: 0; 
    font-family: "Alexandria", sans-serif;
    background: var(--bg); 
    color: var(--fg); 
    display: grid; 
    place-items: center; 
    min-height: 100vh; 
}
.app { 
    width: min(95vw, 420px); 
}
    
h1 { 
    font-size: 1.3rem; 
    margin: 0 0 0.75rem; 
    text-align: center; 
}
.status { 
    text-align: center; 
    margin-bottom: .75rem; 
    min-height: 1.5em; 
}

.board {
    display: grid;
    grid-template-columns: repeat(3, var(--size));
    grid-auto-rows: var(--size);
    gap: var(--gap);
    justify-content: center;
    touch-action: manipulation;
}
    button.cell {
      border: 2px solid #334155;
      background: #111827;
      color: var(--fg);
      font-size: 2.2rem;
      font-weight: 700;
      border-radius: 10px;
      cursor: pointer;
      transition: transform .06s;
    }
    button.cell:active { transform: scale(.98); }
    button.cell[disabled] { cursor: default; opacity: .85; }
    .cell.win { background: #052e26; border-color: var(--win); color: var(--win); box-shadow: 0 0 0 2px var(--win) inset; }
    .controls { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; }
    .btn { padding: .6rem .9rem; border: 1px solid #334155; background:#0b1220; color: var(--fg); border-radius: 10px; cursor: pointer; font-weight: 600; }
    .btn:hover { background:#0f1526; }
    .scores { margin-top: .5rem; text-align: center; font-size:.95rem; opacity:.9; }
    @media (max-width: 360px) {
      :root { --size: 86px; --gap: 8px; }
    }