/* Neon glass style */
.ttt-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; }
.ttt-back { color: var(--muted); text-decoration:none; }
.ttt-back:hover { color: var(--text); }
.ttt-title { margin:0; font-size:1.25rem; }
.ttt-scores { display:flex; gap:12px; color: var(--muted); }

.ttt-main { display:grid; place-items:center; gap:16px; padding: 10px 16px 24px; }
.ttt-toolbar { display:flex; gap:10px; align-items:center; }
.ttt-mode select { padding:8px 10px; border-radius:10px; background:#0f1320; color:var(--text); border:1px solid rgba(255,255,255,0.15); }

.board {
  display:grid;
  grid-template-columns: repeat(3, minmax(100px, 160px));
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
@media (min-width: 520px) {
  .board { grid-template-columns: repeat(3, 180px); }
}

.cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(120% 120% at 10% 10%, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.cell:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.25); }
.cell:disabled { cursor: default; opacity: 1; }

/* Marks */
.mark { position:absolute; inset: 12% 12%; }
.svg { width:100%; height:100%; }
.stroke { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:16; stroke:#fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); stroke-dasharray: 360; stroke-dashoffset: 360; animation: draw 420ms ease forwards; }
.stroke--x { stroke: #84a9ff; }
.stroke--o { stroke: #ff86d1; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Win */
.cell.win { box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 26px rgba(255,255,255,0.45); }

/* Buttons */
.ttt-btn { padding:10px 14px; border-radius:10px; background:#3a7bff; color:#fff; border:none; cursor:pointer; }
.ttt-btn--ghost { background:transparent; border:1px solid rgba(255,255,255,0.25); color: var(--text); }

/* Overlay */
.ttt-overlay { position: fixed; inset: 0; display:grid; place-items:center; backdrop-filter: blur(6px); background: rgba(0,0,0,0.35); }
/* Ensure hidden attribute actually hides the overlay, overriding display from the class */
.ttt-overlay[hidden] { display: none !important; }
.ttt-panel { width:min(92vw, 420px); padding:18px; border-radius:14px; background: rgba(20,24,36,0.9); border: 1px solid rgba(255,255,255,0.12); text-align:center; }
.ttt-actions { margin-top: 12px; display:flex; justify-content:center; gap:10px; }