.quoridor {
  --quoridor-blue: #60a5fa;
  --quoridor-red: #dc2626;
  --quoridor-yellow: #facc15;
  --quoridor-green: #4ade80;
  --quoridor-blue-goal-color: #25334f;
  --quoridor-red-goal-color: #48252b;
  --quoridor-yellow-goal-color: #45402a;
  --quoridor-green-goal-color: #254031;
  max-width: 760px;
  margin: 0 auto;
}
[data-playground-quoridor] {
  max-width: 1200px;
}
[data-playground-quoridor].quoridor .quoridor-game-layout {
  grid-template-columns: minmax(0, 580px) minmax(360px, 1fr);
}
.quoridor-coordinate-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.quoridor-coordinate {
  position: absolute;
  color: #cbd5e1;
  font-size: clamp(6px, 0.7vw, 9px);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}
.quoridor-coordinate.is-junction {
  color: #94a3b8;
  font-size: clamp(5px, 0.55vw, 7px);
  transform: translate(-50%, -50%);
}
[data-quoridor-geometry='triangular'] .quoridor-coordinate:not(.is-junction) {
  transform: translate(-50%, -50%);
}
.quoridor-move-history {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #64748b;
  border-radius: 8px;
}
.quoridor-move-history h4,
.quoridor-move-history p {
  margin: 0 0 10px;
}
.quoridor-move-history [data-quoridor-coordinate-preview] {
  height: 3rem;
  margin: 10px 0 0;
  overflow: auto;
}
.quoridor-move-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.quoridor-move-history-heading h4 {
  margin: 0;
}
.quoridor-coordinate-key {
  color: #cbd5e1;
  font-size: 0.8rem;
}
.quoridor-history-scroll {
  max-height: 320px;
  overflow: auto;
}
.quoridor-history-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  white-space: nowrap;
}
.quoridor-history-scroll th,
.quoridor-history-scroll td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.quoridor-history-scroll [data-player-color='red'] td:nth-child(2) {
  color: #fca5a5;
}
.quoridor-history-scroll [data-player-color='blue'] td:nth-child(2) {
  color: #93c5fd;
}
.quoridor-history-scroll [data-player-color='yellow'] td:nth-child(2) {
  color: var(--quoridor-yellow);
}
.quoridor-history-scroll [data-player-color='green'] td:nth-child(2) {
  color: var(--quoridor-green);
}
@media (max-width: 900px) {
  [data-playground-quoridor].quoridor .quoridor-game-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.quoridor-help {
  margin: 14px 0;
}
.quoridor-help > summary {
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}
.quoridor-help > p {
  margin: 12px 0;
}
.quoridor[data-quoridor-turn='red'] {
  --quoridor-wall-source-color: var(--quoridor-red);
}
.quoridor[data-quoridor-turn='blue'] {
  --quoridor-wall-source-color: var(--quoridor-blue);
}
.quoridor[data-quoridor-turn='yellow'] {
  --quoridor-wall-source-color: var(--quoridor-yellow);
}
.quoridor[data-quoridor-turn='green'] {
  --quoridor-wall-source-color: var(--quoridor-green);
}
.quoridor-bots label[hidden],
.quoridor-player[hidden] {
  display: none;
}
.quoridor-toolbar,
.quoridor-players {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
}
.quoridor-toolbar [aria-pressed='true'] {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}
.quoridor-bots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
  margin: 0;
  min-width: 0;
}
.quoridor-bots label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.quoridor-player {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 2px solid transparent;
  border-radius: 8px;
}
.quoridor-player.is-blue {
  color: #93c5fd;
}
.quoridor-player.is-red {
  color: #fca5a5;
}
.quoridor-player.is-yellow {
  color: var(--quoridor-yellow);
}
.quoridor-player.is-green {
  color: var(--quoridor-green);
}
.quoridor-player[aria-current='true'] {
  border-color: currentColor;
}
.quoridor-game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 25%, 160px);
  align-items: start;
  gap: 16px;
  margin: 18px 0;
}
.quoridor-board-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 580px);
  min-width: 0;
  margin: 0 auto;
}
.quoridor-players {
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
}
.quoridor-walls-count {
  align-self: center;
  flex-shrink: 0;
}
.quoridor-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.quoridor-sidebar .quoridor-wall-palette,
.quoridor-sidebar [data-quoridor-status] {
  margin: 0;
}
.quoridor-board {
  position: relative;
  width: min(100%, 580px);
  aspect-ratio: 1;
  margin: 0 auto;
  background: #0f172a;
  border: 2px solid #64748b;
  border-radius: 8px;
}
.quoridor-board button {
  position: absolute;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 4px;
  transform: none;
  transition: none;
  box-shadow: none;
  opacity: 1;
  touch-action: manipulation;
}
.quoridor-board button:hover,
.quoridor-board button:active,
.quoridor-board button:focus {
  transform: none;
  box-shadow: none;
}
.quoridor-board button:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 1px;
}
.quoridor-board .quoridor-cell {
  width: calc(var(--quoridor-cell-size) - 1.8%);
  height: calc(var(--quoridor-cell-size) - 1.8%);
  background: var(--quoridor-goal-color, #2c2c30);
}
.quoridor-cell.is-red-goal {
  --quoridor-goal-color: var(--quoridor-red-goal-color);
}
.quoridor-cell.is-blue-goal {
  --quoridor-goal-color: var(--quoridor-blue-goal-color);
}
.quoridor-cell.is-yellow-goal {
  --quoridor-goal-color: var(--quoridor-yellow-goal-color);
}
.quoridor-cell.is-green-goal {
  --quoridor-goal-color: var(--quoridor-green-goal-color);
}
.quoridor-cell.is-red-goal.is-green-goal {
  --quoridor-goal-color: linear-gradient(
    45deg,
    var(--quoridor-green-goal-color) 50%,
    var(--quoridor-red-goal-color) 50%
  );
}
.quoridor-cell.is-red-goal.is-yellow-goal {
  --quoridor-goal-color: linear-gradient(
    135deg,
    var(--quoridor-red-goal-color) 50%,
    var(--quoridor-yellow-goal-color) 50%
  );
}
.quoridor-cell.is-blue-goal.is-green-goal {
  --quoridor-goal-color: linear-gradient(
    135deg,
    var(--quoridor-green-goal-color) 50%,
    var(--quoridor-blue-goal-color) 50%
  );
}
.quoridor-cell.is-blue-goal.is-yellow-goal {
  --quoridor-goal-color: linear-gradient(
    45deg,
    var(--quoridor-blue-goal-color) 50%,
    var(--quoridor-yellow-goal-color) 50%
  );
}
.quoridor-board .quoridor-cell.is-legal {
  outline: 2px solid #94a3b8;
  outline-offset: -2px;
  cursor: pointer;
}
.quoridor-board .quoridor-cell.is-latest {
  box-shadow:
    inset 0 0 0 2px rgba(251, 191, 36, 0.4),
    inset 0 0 14px rgba(251, 191, 36, 0.15);
}
.quoridor-cell.is-blue::after,
.quoridor-cell.is-red::after,
.quoridor-cell.is-yellow::after,
.quoridor-cell.is-green::after,
.quoridor-pawn::after {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
}
.quoridor-pawn.is-blue::after,
.quoridor-cell.is-blue::after {
  background: var(--quoridor-blue);
}
.quoridor-pawn.is-red::after,
.quoridor-cell.is-red::after {
  background: var(--quoridor-red);
}
.quoridor-pawn.is-yellow::after,
.quoridor-cell.is-yellow::after {
  background: var(--quoridor-yellow);
}
.quoridor-pawn.is-green::after,
.quoridor-cell.is-green::after {
  background: var(--quoridor-green);
}
.quoridor-cell.is-center-goal::before,
.quoridor-cell.is-winner::before,
.quoridor-pawn.is-winner::before {
  content: '';
  position: absolute;
  top: 8%;
  right: 8%;
  width: 34%;
  height: 34%;
  transform: scale(1.2) rotate(35deg);
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6l5 4 4-7 4 7 5-4-2 12H5z' fill='%23fbbf24' stroke='%230f172a' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
}
.quoridor-pawn {
  position: absolute;
  width: calc(var(--quoridor-cell-size) - 1.8%);
  height: calc(var(--quoridor-cell-size) - 1.8%);
  z-index: 3;
  pointer-events: none;
}
.quoridor-pawn-arrow {
  position: absolute;
  left: 32%;
  top: 32%;
  width: 36%;
  height: 36%;
  z-index: 1;
  color: #0f172a;
  pointer-events: none;
}
.quoridor-pawn-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  pointer-events: none;
}
.quoridor-pawn[hidden],
.quoridor-pawn-arrow[hidden],
.quoridor-cell::after,
.quoridor-cell.is-winner::before {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .quoridor-pawn,
  .quoridor-wall {
    animation: none;
  }
}
.quoridor-cell.is-center-goal:not(.is-winner)::before {
  inset: 20%;
  width: auto;
  height: auto;
  transform: none;
}
.quoridor-board .quoridor-wall {
  z-index: 2;
  width: 8%;
  height: 8%;
  background: transparent;
}
.quoridor-wall-effects {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.quoridor-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  color: #f8fafc;
}
.quoridor-marks circle,
.quoridor-marks path {
  stroke: currentColor;
  stroke-width: 0.12;
  pointer-events: none;
}
.quoridor-marks circle {
  fill: currentColor;
  fill-opacity: 0.3;
}
.quoridor-marks path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.18 0.08;
}
.quoridor-wall-drawing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.quoridor-wall-drawing path {
  fill: none;
  stroke: transparent;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.quoridor-wall.is-placed > .quoridor-wall-drawing path {
  stroke: var(--quoridor-wall-color);
}
.quoridor-wall.is-placed.is-red {
  --quoridor-wall-color: var(--quoridor-red);
}
.quoridor-wall.is-placed.is-blue {
  --quoridor-wall-color: var(--quoridor-blue);
}
.quoridor-wall.is-placed.is-yellow {
  --quoridor-wall-color: var(--quoridor-yellow);
}
.quoridor-wall.is-placed.is-green {
  --quoridor-wall-color: var(--quoridor-green);
}
.quoridor-wall.is-preview > .quoridor-wall-drawing path,
.quoridor-wall.is-legal:focus-visible > .quoridor-wall-drawing path {
  stroke: #f8fafc;
}
.quoridor-wall.is-placed {
  pointer-events: none;
}
.quoridor-wall-source {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 0;
  touch-action: none;
  cursor: grab;
  transform: none;
  box-shadow: none;
}
.quoridor-wall-source:hover,
.quoridor-wall-source:active,
.quoridor-wall-source:focus {
  background: transparent;
  transform: none;
  box-shadow: none;
}
.quoridor-wall-source:active {
  cursor: grabbing;
}
.quoridor-wall-source:focus-visible {
  outline: 2px solid #fbbf24;
}
.quoridor-wall-source span {
  position: absolute;
  background: var(--quoridor-wall-source-color, var(--quoridor-red));
  border-radius: 4px;
  pointer-events: none;
}
.quoridor-wall-source.is-horizontal span {
  width: 64px;
  height: 6px;
  left: 8px;
  top: 13px;
}
.quoridor-wall-source.is-vertical span {
  height: 64px;
  width: 6px;
  top: 8px;
  left: 13px;
}
.quoridor-board .quoridor-cell,
.quoridor-board .quoridor-wall {
  pointer-events: none;
}
.quoridor-board .quoridor-pointer-surface {
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 4;
}
.quoridor-board .quoridor-pointer-surface:hover,
.quoridor-board .quoridor-pointer-surface:active,
.quoridor-board .quoridor-pointer-surface:focus {
  background: transparent;
  outline: none;
}
.quoridor-preview {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  width: 8%;
  height: 8%;
}
.quoridor-preview.is-move {
  width: calc(var(--quoridor-cell-size) - 1.8%);
  height: calc(var(--quoridor-cell-size) - 1.8%);
  border-radius: 4px;
  outline: 2px solid #f8fafc;
  outline-offset: -2px;
}
.quoridor-wall-palette {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 120px;
  gap: 8px;
}
.quoridor-wall-source.is-horizontal {
  height: 32px;
}
.quoridor-wall-source.is-vertical {
  width: 32px;
}

.quoridor-wall-palette:has(.quoridor-wall-source.is-corner:not([hidden])) {
  flex-wrap: wrap;
}
.quoridor-wall-source.is-corner {
  width: 52px;
  height: 52px;
}
.quoridor-wall-source.is-corner span {
  width: 35px;
  height: 35px;
  left: 8px;
  top: 8px;
  background: transparent;
  border: 6px solid var(--quoridor-wall-source-color);
  border-radius: 3px;
}
.quoridor-wall-source.is-corner-ne span {
  border-top: 0;
  border-right: 0;
}
.quoridor-wall-source.is-corner-se span {
  border-bottom: 0;
  border-right: 0;
}
.quoridor-wall-source.is-corner-sw span {
  border-bottom: 0;
  border-left: 0;
}
.quoridor-wall-source.is-corner-nw span {
  border-top: 0;
  border-left: 0;
}

[data-quoridor-geometry='triangular'] .quoridor-board {
  aspect-ratio: 2 / 1.7320508076;
  border: 0;
  border-radius: 0;
  background: transparent;
}
[data-quoridor-geometry='triangular'] .quoridor-game-layout {
  grid-template-columns: minmax(0, 1fr) 202px;
}
[data-quoridor-geometry='triangular'] .quoridor-pointer-surface {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
/* SVG descendants can override inherited visibility, so hide inactive roots from layout. */
[data-quoridor-geometry='square'] .quoridor-triangles,
[data-quoridor-geometry='torus'] .quoridor-triangles,
[data-quoridor-geometry='square'] .quoridor-torus-view,
[data-quoridor-geometry='triangular'] .quoridor-torus-view {
  display: none;
}
.quoridor-triangles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.quoridor-triangles polygon {
  fill: #2c2c30;
  stroke: transparent;
  stroke-width: 0.035;
  stroke-linejoin: round;
  pointer-events: none;
}
.quoridor-triangles .is-red-goal {
  fill: #48252b;
}
.quoridor-triangles .is-yellow-goal {
  fill: #45402a;
}
.quoridor-triangles .is-blue-goal {
  fill: #25334f;
}
.quoridor-triangles .is-legal {
  stroke: #94a3b8;
}
.quoridor-triangles .is-latest {
  stroke: #fbbf24;
}
.quoridor-triangles .quoridor-triangle-preview {
  fill: none;
  stroke: #f8fafc;
}
[data-quoridor-geometry='triangular'] .quoridor-board .quoridor-cell,
[data-quoridor-geometry='triangular'] .quoridor-preview.is-move {
  width: var(--quoridor-cell-size);
  height: var(--quoridor-cell-size);
  border-radius: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
}
[data-quoridor-geometry='triangular'] .quoridor-board .quoridor-cell:focus-visible {
  outline: none;
}
[data-quoridor-geometry='triangular'] .quoridor-cell.is-center-goal::before {
  inset: auto;
  left: 35%;
  top: var(--quoridor-triangle-center-y);
  width: 30%;
  height: 35%;
  transform: translateY(-50%);
}
[data-quoridor-geometry='triangular'] .quoridor-pawn {
  width: var(--quoridor-pawn-size);
  height: var(--quoridor-pawn-height);
}
[data-quoridor-geometry='triangular'] .quoridor-pawn::after {
  inset: 0;
}
[data-quoridor-geometry='triangular'] .quoridor-pawn-arrow {
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}
[data-quoridor-geometry='triangular'] .quoridor-wall,
[data-quoridor-geometry='triangular'] .quoridor-preview:not(.is-move) {
  height: calc(8% / 0.8660254038);
}
[data-quoridor-geometry='triangular'] .quoridor-wall-drawing path {
  stroke-width: var(--quoridor-triangle-wall-width);
}
[data-quoridor-geometry='triangular'] .quoridor-wall-source.is-triangular {
  width: 52px;
  height: 52px;
}
[data-quoridor-geometry='triangular'] .quoridor-wall-source path {
  stroke: var(--quoridor-wall-source-color);
}
[data-quoridor-geometry='triangular'] .quoridor-wall-palette {
  width: min(100%, 202px);
  flex-wrap: wrap;
  justify-content: flex-start;
}
/* Stagger the second 60° row by half a column to outline two triangles. */
[data-quoridor-geometry='triangular']
  .quoridor-wall-source:is(
    [data-quoridor-wall-source='angle60-4'],
    [data-quoridor-wall-source='angle60-5'],
    [data-quoridor-wall-source='angle60-3']
  ) {
  left: 30px;
}
/* Six 120° bends outline a hexagon in three rows of two native buttons. */
[data-quoridor-geometry='triangular']
  .quoridor-wall-source:is(
    [data-quoridor-wall-source='angle120-0'],
    [data-quoridor-wall-source='angle120-4']
  ) {
  margin-left: 30px;
}
[data-quoridor-geometry='triangular']
  .quoridor-wall-source:is(
    [data-quoridor-wall-source='angle120-1'],
    [data-quoridor-wall-source='angle120-3']
  ) {
  margin-right: 30px;
}
[data-quoridor-geometry='triangular']
  .quoridor-wall-source[data-quoridor-wall-source='angle120-5'] {
  margin-right: 60px;
}
@media (max-width: 520px) {
  [data-quoridor-geometry='triangular'] .quoridor-game-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.quoridor-wall-examples-dialog {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: var(--spacing-lg);
  overflow-y: auto;
  border: 1px solid var(--text-secondary);
  border-radius: var(--border-radius-lg);
  color: var(--text);
  background: #101b31;
}
.quoridor-wall-examples-dialog::backdrop {
  background: rgba(2, 6, 23, 0.78);
}
.quoridor-wall-examples-heading,
.quoridor-wall-examples-legend,
.quoridor-wall-examples-legend > span {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.quoridor-wall-examples-heading,
.quoridor-wall-examples-legend {
  flex-wrap: wrap;
}
.quoridor-wall-examples-heading {
  justify-content: space-between;
}
.quoridor-wall-examples-heading h3 {
  margin: 0;
}
.quoridor-wall-examples-legend {
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-sm) var(--spacing-lg);
}
.quoridor-wall-examples-legend > span[hidden] {
  display: none;
}
.quoridor-wall-examples-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
}
.quoridor-wall-examples-panel[hidden] {
  display: none;
}
.quoridor-wall-example {
  min-width: 0;
  margin: 0;
}
.quoridor-wall-example h4,
.quoridor-wall-example p {
  margin: var(--spacing-xs) 0;
}
.quoridor-wall-example h4 {
  font-size: 1rem;
}
.quoridor-wall-example .is-allowed {
  color: var(--quoridor-green);
}
.quoridor-wall-example .is-disallowed {
  color: #fca5a5;
}
.quoridor-wall-example-drawing {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 7;
  overflow: hidden;
  pointer-events: none;
}
.quoridor-wall-example-cells polygon {
  fill: #2c2c30;
}
.quoridor-wall-example-wall {
  fill: none;
  stroke: var(--quoridor-example-wall-color);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quoridor-wall-example-wall.is-overlap {
  stroke-dasharray: 6 6;
  stroke-linecap: butt;
}
.quoridor-wall-example-wall.is-wall-a,
.quoridor-wall-example-swatch.is-wall-a {
  --quoridor-example-wall-color: var(--quoridor-red);
}
.quoridor-wall-example-wall.is-wall-b,
.quoridor-wall-example-swatch.is-wall-b {
  --quoridor-example-wall-color: var(--quoridor-blue);
}
.quoridor-wall-example-wall.is-wall-c,
.quoridor-wall-example-swatch.is-wall-c {
  --quoridor-example-wall-color: var(--quoridor-yellow);
}
.quoridor-wall-example-swatch {
  width: 24px;
  height: 6px;
  border-radius: 3px;
  background: var(--quoridor-example-wall-color);
}
.quoridor-wall-example-swatch.is-overlap {
  background: repeating-linear-gradient(
    90deg,
    var(--quoridor-red) 0 6px,
    var(--quoridor-blue) 6px 12px
  );
}
.quoridor-wall-example-joint {
  fill: #f8fafc;
  stroke: #0f172a;
  stroke-width: 1;
}
.quoridor-wall-example-joint-swatch {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f8fafc;
}
@media (max-width: 520px) {
  .quoridor-wall-examples-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-quoridor-geometry='torus'] .quoridor-board {
  overflow: hidden;
}
[data-quoridor-geometry='torus'] .quoridor-wall {
  overflow: visible;
}
[data-quoridor-geometry='torus'] .quoridor-board > .quoridor-cell,
[data-quoridor-geometry='torus'] .quoridor-board > .quoridor-wall,
[data-quoridor-geometry='torus'] .quoridor-board > .quoridor-pawn,
[data-quoridor-geometry='torus'] .quoridor-board > .quoridor-preview,
[data-quoridor-geometry='torus'] .quoridor-board > .quoridor-coordinate-layer {
  opacity: 0;
}
.quoridor-torus-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.quoridor-torus-tile-border {
  fill: none;
  stroke: #64748b;
  stroke-width: 1;
  stroke-opacity: 0.5;
  vector-effect: non-scaling-stroke;
}
.quoridor-torus-cell {
  fill: #2c2c30;
}
.quoridor-torus-cell.is-legal {
  stroke: #94a3b8;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.quoridor-torus-cell.is-latest {
  stroke: rgba(251, 191, 36, 0.4);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.quoridor-torus-move-preview {
  fill: none;
  stroke: #f8fafc;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.quoridor-torus-coordinates {
  fill: #cbd5e1;
  font-size: 0.12px;
  pointer-events: none;
}
[data-quoridor-geometry='torus'] .quoridor-pointer-surface {
  cursor: grab;
  touch-action: none;
}
[data-quoridor-geometry='torus'] [data-quoridor-panning='true'] .quoridor-pointer-surface {
  cursor: grabbing;
}
[data-quoridor-geometry='torus'] .quoridor-board > .quoridor-cell:focus-visible {
  opacity: 1;
  background: transparent;
  z-index: 5;
}
[data-quoridor-geometry='torus'] .quoridor-board > .quoridor-cell::before {
  display: none;
}