/* ── Reset & Base ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:       #0f1117;
  --surface:  #1a1d27;
  --border:   #2a2d3a;
  --text:     #e4e4e7;
  --text-dim: #71717a;
  --accent:   #f97316;
  --accent-glow: rgba(249,115,22,.35);
  --x-color:  #f97316;
  --o-color:  #38bdf8;
  --green:    #22c55e;
  --red:      #ef4444;
  --yellow:   #eab308;
  --radius:   12px;
  --transition: .2s ease;
  --cell-size: clamp(80px, 25vw, 110px);
}

html{font-size:16px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ── Container ───────────────────────────────────────── */
.container{
  width:100%;
  max-width:420px;
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  position:relative;
}

/* ── Header ──────────────────────────────────────────── */
header{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
}
h1{
  font-size:1.75rem;
  font-weight:700;
  background:linear-gradient(135deg,var(--accent),#fb923c);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Mode Toggle ─────────────────────────────────────── */
.mode-toggle{
  display:flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
}
.mode-btn{
  padding:.45rem 1rem;
  font-size:.8rem;
  font-weight:600;
  border:none;
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  transition:background var(--transition),color var(--transition);
}
.mode-btn.active{
  background:var(--accent);
  color:#fff;
}
.mode-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ── Online Panel ────────────────────────────────────── */
.online-panel{
  width:100%;
  max-width:340px;
}
.online-panel[hidden]{display:none}

.online-lobby{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  align-items:center;
}
.online-lobby[hidden]{display:none}

.join-form{
  display:flex;
  gap:.5rem;
  width:100%;
}
.input-code{
  flex:1;
  padding:.6rem .75rem;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  outline:none;
  transition:border-color var(--transition);
}
.input-code::placeholder{
  text-transform:none;
  letter-spacing:normal;
  color:var(--text-dim);
}
.input-code:focus{
  border-color:var(--accent);
}

.online-info{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  align-items:center;
}
.online-info[hidden]{display:none}

.room-code-display{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.5rem 1rem;
}
.room-code-display .label{
  font-size:.75rem;
  font-weight:600;
  color:var(--text-dim);
  text-transform:uppercase;
}
.room-code-display .code{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--accent);
}
.btn-copy{
  padding:.25rem .6rem;
  font-size:.7rem;
  font-weight:600;
  border:1px solid var(--border);
  border-radius:6px;
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  transition:background var(--transition),color var(--transition);
}
.btn-copy:hover{
  background:var(--surface);
  color:var(--text);
}

.invite-actions{
  display:flex;
  gap:.5rem;
  width:100%;
  justify-content:center;
}
.btn-invite{
  flex:none;
  padding:.45rem .9rem;
  font-size:.78rem;
  font-weight:600;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text-dim);
  cursor:pointer;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.btn-invite:hover{
  background:#22253a;
  color:var(--text);
  border-color:var(--accent);
}
.btn-invite[hidden]{display:none}

.connection-status{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.8rem;
  color:var(--text-dim);
}
.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--text-dim);
}
.status-dot.connected{background:var(--green)}
.status-dot.waiting{background:var(--yellow);animation:pulse 1.5s ease infinite}
.status-dot.disconnected{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.player-role{
  font-size:.85rem;
  font-weight:600;
  color:var(--text-dim);
}
.player-role.role-x{color:var(--x-color)}
.player-role.role-o{color:var(--o-color)}

/* ── Scoreboard ──────────────────────────────────────── */
.scoreboard{
  display:flex;
  gap:2.5rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.75rem 1.5rem;
  justify-content:center;
}
.score-item{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.score-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}
.score-item:first-child .score-label{color:var(--x-color)}
.score-item:last-child  .score-label{color:var(--o-color)}
.score-value{font-size:1.5rem;font-weight:700}

/* ── Turn Indicator ──────────────────────────────────── */
.turn-indicator{
  font-size:.95rem;
  font-weight:600;
  padding:.35rem .75rem;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  transition:color var(--transition),border-color var(--transition);
}
.turn-indicator.turn-x{color:var(--x-color);border-color:var(--x-color)}
.turn-indicator.turn-o{color:var(--o-color);border-color:var(--o-color)}

/* ── Helper Text ─────────────────────────────────────── */
.helper-text{
  font-size:.78rem;
  color:var(--text-dim);
  text-align:center;
  margin:-.25rem 0;
}

/* ── Board ───────────────────────────────────────────── */
.board{
  display:grid;
  grid-template-columns:repeat(3, var(--cell-size));
  grid-template-rows:repeat(3, var(--cell-size));
  gap:8px;
  justify-content:center;
}

.cell{
  width:var(--cell-size);
  height:var(--cell-size);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:2.5rem;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--transition),border-color var(--transition),transform .15s ease,box-shadow var(--transition),opacity .3s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.cell:hover:not([disabled]){
  background:#22253a;
  border-color:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);
}
.cell:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.cell[disabled]{cursor:default}
.cell.x{color:var(--x-color)}
.cell.o{color:var(--o-color)}

/* pop-in animation */
.cell.placed{animation:pop .25s ease}
@keyframes pop{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}

/* Predictive fade for next removal */
.cell.fading{
  opacity:.4;
  border-style:dashed;
}

/* win highlight */
.cell.win{
  border-color:var(--accent);
  box-shadow:0 0 18px var(--accent-glow);
  animation:glow 1s ease infinite alternate;
  opacity:1;
}
@keyframes glow{
  to{box-shadow:0 0 26px var(--accent-glow)}
}

/* ── Buttons ─────────────────────────────────────────── */
.actions{display:flex;gap:.75rem;width:100%;max-width:340px}
.btn{
  flex:1;
  padding:.7rem 1rem;
  font-size:.9rem;
  font-weight:600;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--transition),transform .1s ease;
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#ea580c}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:#22253a}

/* ── Result Overlay ──────────────────────────────────── */
.result-overlay{
  position:fixed;inset:0;
  background:rgba(15,17,23,.85);
  display:flex;align-items:center;justify-content:center;
  z-index:10;
  animation:fadeIn .25s ease;
}
.result-overlay[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.result-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem 2.5rem;
  text-align:center;
  display:flex;flex-direction:column;gap:1.25rem;
  animation:slideUp .3s ease;
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

.result-text{font-size:1.35rem;font-weight:700}
.result-text.x-wins{color:var(--x-color)}
.result-text.o-wins{color:var(--o-color)}

/* ── Desktop polish ──────────────────────────────────── */
@media(min-width:500px){
  .container{padding:2rem}
  h1{font-size:2.25rem}
  .cell{font-size:3rem;border-radius:16px}
}