/* Tic-Tac-Toe — game-specific styles (rides on playful.css) */

.turn-banner {
  text-align:center; font-size:18px; font-weight:700;
  margin-bottom:16px; min-height:24px; letter-spacing:0.3px;
  transition:color 0.25s;
}

.board-wrapper { flex:1; display:flex; align-items:center; justify-content:center; width:100%; }

.board {
  position:relative;
  width:min(100%, 56vh);
  aspect-ratio:1/1;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:12px; padding:14px;
  background:rgba(255,255,255,0.35);
  border:5px solid var(--stroke); border-radius:24px;
  box-shadow:0 8px 0 rgba(28,24,20,0.12);
}

.cell {
  position:relative;
  background:var(--card); border:4px solid var(--stroke); border-radius:16px;
  box-shadow:var(--sh); cursor:pointer; font:inherit;
  display:grid; place-items:center;
  transition:transform 0.12s var(--bounce), box-shadow 0.12s, background 0.2s;
}
.cell:not(.filled):hover { transform:translateY(-2px); box-shadow:0 6px 0 var(--stroke); background:#fff; }
.cell.filled { cursor:default; }

.cell svg { width:58%; height:58%; animation:markPop 0.28s var(--bounce); transform-origin:center; }
.mark-x { stroke:var(--pink); stroke-width:9; stroke-linecap:round; fill:none; }
.mark-o { stroke:var(--blue); stroke-width:9; fill:none; }

@keyframes markPop { 0%{transform:scale(0) rotate(-25deg);} 70%{transform:scale(1.18) rotate(5deg);} 100%{transform:scale(1) rotate(0);} }

.mark-x line { stroke-dasharray:80; stroke-dashoffset:80; animation:draw 0.22s ease forwards; }
.mark-x line:nth-child(2){ animation-delay:0.14s; }
.mark-o circle { stroke-dasharray:176; stroke-dashoffset:176; animation:draw 0.36s ease forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }

.cell.win {
  background:var(--yellow); border-color:var(--stroke);
  animation:winPulse 0.7s ease infinite alternate;
}
@keyframes winPulse { from{transform:scale(1);} to{transform:scale(1.06);} }

/* coming-soon toast (Multiplayer) */
.cs-toast {
  position:fixed; left:50%; top:96px; transform:translateX(-50%) translateY(-16px);
  background:var(--yellow); color:var(--stroke); font-weight:700; font-size:14px;
  padding:11px 20px; border:3px solid var(--stroke); border-radius:14px;
  box-shadow:0 4px 0 var(--stroke); z-index:300; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 0.25s, transform 0.25s var(--bounce);
}
.cs-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.win-line { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; overflow:visible; }
.win-line line {
  stroke:var(--stroke); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:150; stroke-dashoffset:150;
  opacity:0; /* hidden until a real win to avoid a round-cap dot at 0,0 */
}
.win-line.show line { opacity:1; animation:draw 0.45s ease forwards; }

/* (multiplayer modal styles live in ../../assets/js/mp-ui.js) */

@media (prefers-reduced-motion: reduce) {
  .cell svg, .mark-x line, .mark-o circle, .win-line.show line { animation:none; stroke-dashoffset:0; }
  .cell.win { animation:none; }
}