/* ===== GAME-SPECIFIC STYLES ===== */

/* ---- Connect Four ---- */
.c4-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: var(--sp-3);
  background: var(--c-board-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--shadow-inner);
  border: 1px solid var(--c-border);
  width: min(calc(100vw - 16px), 420px);
}

.c4-col-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast);
}
.c4-col-btn:active { background: rgba(255,255,255,0.06); }

.c4-cell {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-empty);
  border: 1px solid var(--c-board-line);
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.c4-piece {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  transform-origin: center;
}
.c4-piece.p0 {
  background: radial-gradient(circle at 35% 35%, #ffd166, var(--c-p0));
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.25);
}
.c4-piece.p0::after {
  content: "";
  position: absolute;
  top: 25%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 12%;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.c4-piece.p1 {
  background: radial-gradient(circle at 35% 35%, #7eeee0, var(--c-p1));
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.25);
}
/* Second non-colour cue: p1 has inner ring */
.c4-piece.p1::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
}
.c4-piece.p1::after {
  content: "";
  position: absolute;
  top: 25%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 12%;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.c4-piece.win {
  animation: winPulse 800ms ease-in-out infinite;
}
.c4-piece.dropping {
  animation: pieceDrop var(--dur-drop) var(--ease-out) forwards;
}

/* ---- Gomoku ---- */
.gomoku-wrap {
  overflow: auto;
  max-width: 100%;
  max-height: calc(100dvh - 200px);
}
.gomoku-board {
  display: block;
  touch-action: manipulation;
}
.gomoku-board .intersection {
  cursor: pointer;
  transition: opacity var(--dur-fast);
}
.gomoku-board .intersection:focus { outline: none; }
.gomoku-board .intersection:focus-visible rect { stroke: var(--c-border-focus); stroke-width: 2; }
.gomoku-stone-p0 {
  fill: url(#grad-p0);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.gomoku-stone-p1 {
  fill: url(#grad-p1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.gomoku-stone-new {
  animation: scaleIn var(--dur-mid) var(--ease-bounce);
  transform-origin: center;
}
.gomoku-win-line { stroke-width: 4; stroke-linecap: round; opacity: 0.85; }
.gomoku-last-dot { animation: lastMovePulse 1s ease-in-out infinite; }

/* ---- Reversi ---- */
.reversi-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: var(--sp-2);
  background: var(--c-board-bg);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg), var(--shadow-inner);
  border: 1px solid var(--c-border);
  width: min(calc(100vw - 16px), 400px);
}

.reversi-cell {
  aspect-ratio: 1;
  border-radius: var(--r-xs);
  background: var(--c-board-alt);
  border: 1px solid var(--c-board-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  transition: background var(--dur-fast);
  min-width: 0;
}
.reversi-cell:active { background: rgba(255,255,255,0.1); }
.reversi-cell.hint { background: rgba(91,141,238,0.15); cursor: pointer; }
.reversi-cell.hint::after {
  content: "";
  position: absolute;
  width: 35%; height: 35%;
  border-radius: 50%;
  background: rgba(91,141,238,0.45);
}

/* Flip animation uses perspective */
.reversi-disc-wrap {
  width: 82%;
  height: 82%;
  perspective: 200px;
  position: relative;
}
.reversi-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.reversi-disc.p0 {
  background: radial-gradient(circle at 35% 35%, #ffd166, var(--c-p0));
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}
.reversi-disc.p0::after {
  content: "";
  position: absolute;
  top: 22%; left: 50%; transform: translateX(-50%);
  width: 28%; height: 10%;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.reversi-disc.p1 {
  background: radial-gradient(circle at 35% 35%, #7eeee0, var(--c-p1));
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}
.reversi-disc.p1::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
}
.reversi-disc.flipping {
  animation: flip3d var(--dur-flip) var(--ease-flip) forwards;
}
@keyframes flip3d {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(90deg); background: rgba(255,255,255,0.3); }
  100% { transform: rotateY(0deg); }
}
.reversi-disc.placing {
  animation: scaleIn var(--dur-mid) var(--ease-bounce);
}

/* ---- Seega ---- */
.seega-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: var(--sp-3);
  background: var(--c-board-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--shadow-inner);
  border: 1px solid var(--c-border);
  width: min(calc(100vw - 16px), 350px);
}

.seega-cell {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--c-board-alt);
  border: 1px solid var(--c-board-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  transition: background var(--dur-fast);
  min-width: 0;
}
.seega-cell:active { background: rgba(255,255,255,0.1); }
.seega-cell.center { background: rgba(0,0,0,0.3); cursor: default; }
.seega-cell.selected { border-color: var(--c-accent); background: rgba(91,141,238,0.15); }
.seega-cell.legal { border-color: rgba(91,141,238,0.5); background: rgba(91,141,238,0.08); }
.seega-cell.legal::after {
  content: "";
  position: absolute;
  width: 30%; height: 30%;
  border-radius: 50%;
  background: rgba(91,141,238,0.4);
}

.seega-piece {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  flex-shrink: 0;
}
.seega-piece.p0 {
  background: radial-gradient(circle at 35% 35%, #ffd166, var(--c-p0));
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.seega-piece.p0.placed { animation: scaleIn var(--dur-mid) var(--ease-bounce); }
.seega-piece.p1 {
  background: radial-gradient(circle at 35% 35%, #7eeee0, var(--c-p1));
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  position: relative;
}
.seega-piece.p1::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
}
.seega-piece.p1.placed { animation: scaleIn var(--dur-mid) var(--ease-bounce); }

.seega-phase-info {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  padding: var(--sp-2) var(--sp-4);
}

/* ---- Misc ---- */
.info-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* Tablet / Desktop enhancements */
@media (min-width: 600px) {
  .lobby { max-width: 560px; }
  .game-grid { grid-template-columns: repeat(4, 1fr); }
  .c4-board { width: min(calc(100vw - 64px), 480px); }
  .reversi-board { width: min(calc(100vw - 64px), 480px); }
  .seega-board { width: min(calc(100vw - 64px), 420px); }
}

@media (min-width: 900px) {
  .lobby, .game-screen { max-width: 700px; margin-left: auto; margin-right: auto; }
  #app { align-items: center; }
  .game-screen { width: 100%; }
}

.game-card__badge { margin-top: 6px; padding: 2px 10px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-accent); border: 1px solid var(--c-accent); }