/* Quoridor: slate board, glowing violet walls */
.q-wrap {
  --q-wall: #a78bfa;
  --q-wall-glow: rgba(167, 139, 250, 0.6);
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.q-chips { display: flex; gap: var(--sp-2); justify-content: center; }
.q-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 4px var(--sp-3); border-radius: var(--r-full);
  background: var(--c-surface); border: 1px solid var(--c-border);
  font-size: var(--fs-sm); color: var(--c-text-muted);
}
.q-chip.active { color: var(--c-text); }
.q-chip.p0.active { border-color: var(--c-p0); box-shadow: 0 0 12px var(--c-p0-glow); }
.q-chip.p1.active { border-color: var(--c-p1); box-shadow: 0 0 12px var(--c-p1-glow); }
.q-chip-dot { width: 10px; height: 10px; border-radius: 50%; }
.q-chip.p0 .q-chip-dot { background: var(--c-p0); }
.q-chip.p1 .q-chip-dot { background: var(--c-p1); box-shadow: inset 0 0 0 3px var(--c-surface); }
.q-you { font-weight: 700; color: var(--c-text); }

.q-board {
  width: min(100%, calc(100dvh - 330px), 430px);
  min-width: 260px;
  padding: 8px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #1a2540, #111b31);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg), var(--shadow-inner);
}
.q-svg { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }

.q-cell rect { fill: #243352; stroke: rgba(255, 255, 255, 0.05); }
.q-cell.goal0 rect { fill: #2a3350; }
.q-cell.goal1 rect { fill: #233a52; }
.q-cell.dest { cursor: pointer; }
.q-cell.dest rect { fill: #2c3f66; }
.q-ring { fill: none; stroke: var(--c-accent); stroke-width: 3; opacity: 0.9; }
.q-cell.last rect { stroke: var(--c-accent); stroke-width: 2; }
.q-cell:focus-visible rect { stroke: var(--c-border-focus); stroke-width: 3; }
.q-cell:focus { outline: none; }

.q-wall { fill: var(--q-wall); filter: drop-shadow(0 0 4px var(--q-wall-glow)); }
.q-wall.new { animation: qWallIn 320ms var(--ease-bounce); transform-box: fill-box; transform-origin: center; }
@keyframes qWallIn { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: scale(1); } }

.q-pawn.p0 circle { fill: var(--c-p0); filter: drop-shadow(0 2px 4px var(--c-p0-glow)); }
.q-pawn.p1 circle { fill: var(--c-p1); filter: drop-shadow(0 2px 4px var(--c-p1-glow)); }
.q-pawn.p1 .q-pawn-ring { fill: none; stroke: #0b2a27; stroke-width: 3; filter: none; }

.q-ix { cursor: pointer; }
.q-ix-hit { fill: transparent; }
.q-ix-dot { fill: rgba(255, 255, 255, 0.35); }
.q-ix:focus { outline: none; }
.q-ix:focus-visible .q-ix-dot { fill: var(--c-border-focus); }
.q-ghost { opacity: 0.85; pointer-events: none; }
.q-ghost.ok { fill: var(--q-wall); }
.q-ghost.bad { fill: var(--c-danger); }

.q-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-full); background: var(--c-surface); border: 1px solid var(--c-border); }
.q-tab {
  min-width: 96px; min-height: 40px; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--c-text-muted); font: inherit; font-weight: 700; cursor: pointer;
}
.q-tab.active { background: var(--c-accent); color: #fff; }
.q-tab:disabled { opacity: 0.45; cursor: default; }

.q-wallbar { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.q-wallbar[hidden] { display: none; }
.q-note { min-height: 1.4em; font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; }
.q-note.bad { color: var(--c-danger); }

@media (prefers-reduced-motion: reduce) { .q-wall.new { animation: none; } }