/* refresh/arenas.css — each wardrobe dresses the game screen: arena backdrop,
   board rim and overlays, clocks, turn indicator (wardrobe design bible). */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Void Arena */
[data-theme="void"] {
  --lm-fill: #2A8FD040;
  --lm-stroke: #2A8FD0;
  --lm-edge: #2A8FD0aa;
  --chk-stroke: #7B3FE4;
  --chk-fill: #7B3FE460;
}

[data-theme="void"] .cm-chessboard .markers .marker-frame-primary,
[data-theme="void"] .cm-chessboard .markers .marker-frame {
  stroke: #00F0FF !important;
  stroke-width: 2.5px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 4px #00F0FF) !important;
}

[data-theme="void"] .cm-chessboard .markers .marker-dot {
  fill: #00F0FF !important;
  opacity: 0.6 !important;
  stroke: none !important;
  filter: drop-shadow(0 0 2px #00F0FF) !important;
}

[data-theme="void"] .cm-chessboard .markers .marker-circle-danger {
  filter: drop-shadow(0 0 4px #7B3FE4) !important;
}

[data-theme="void"] .board-wrap::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 160%; height: 160%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, transparent 40%, #00F0FF 42%, #2A8FD0 45%, #05070F 60%);
  border-radius: 50%;
  opacity: 0.8;
  z-index: -1;
  pointer-events: none;
}


/* Set boards: each paid set's board is a surface from its character's world.
   The squares are SVG patterns laid by boards.js (bd-<theme>-l / -d); the rim
   is an overlay on the board, set with --rim-in (inside shadow) and
   --rim-w / --rim-img (a striped or textured frame). Outside edge: --board-glow. */
[data-theme="canvas"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-canvas-l); }
[data-theme="canvas"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-canvas-d); }
[data-theme="dojo"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-dojo-l); }
[data-theme="dojo"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-dojo-d); }
[data-theme="noir"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-noir-l); }
[data-theme="noir"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-noir-d); }
[data-theme="toon"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-toon-l); }
[data-theme="toon"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-toon-d); }
[data-theme="carnival"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-carnival-l); }
[data-theme="carnival"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-carnival-d); }
[data-theme="void"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-void-l); }
[data-theme="void"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-void-d); }
[data-theme="throne"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-throne-l); }
[data-theme="throne"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-throne-d); }
[data-theme="lab"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-lab-l); }
[data-theme="lab"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-lab-d); }
[data-theme="ember"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-ember-l); }
[data-theme="ember"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-ember-d); }
[data-theme="mirror"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-mirror-l); }
[data-theme="mirror"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-mirror-d); }
[data-theme="parlor"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-parlor-l); }
[data-theme="parlor"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-parlor-d); }
[data-theme="longnight"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-longnight-l); }
[data-theme="longnight"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-longnight-d); }
[data-theme="meadow"] .cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: url(#bd-meadow-l); }
[data-theme="meadow"] .cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: url(#bd-meadow-d); }

html[data-theme="canvas"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="dojo"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="noir"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="toon"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="carnival"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="void"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="throne"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="lab"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="ember"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="mirror"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="parlor"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="longnight"] :is(#board, #pz-board, #rv-board)::after,
html[data-theme="meadow"] :is(#board, #pz-board, #rv-board)::after,
#closet-board[data-theme="canvas"]::after,
#closet-board[data-theme="dojo"]::after,
#closet-board[data-theme="noir"]::after,
#closet-board[data-theme="toon"]::after,
#closet-board[data-theme="carnival"]::after,
#closet-board[data-theme="void"]::after,
#closet-board[data-theme="throne"]::after,
#closet-board[data-theme="lab"]::after,
#closet-board[data-theme="ember"]::after,
#closet-board[data-theme="mirror"]::after,
#closet-board[data-theme="parlor"]::after,
#closet-board[data-theme="longnight"]::after,
#closet-board[data-theme="meadow"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--rim-in, none);
  border: var(--rim-w, 0) solid transparent;
  border-image: var(--rim-img, none) 1;
}
#closet-board:is([data-theme="canvas"], [data-theme="dojo"], [data-theme="noir"], [data-theme="toon"], [data-theme="carnival"], [data-theme="void"], [data-theme="throne"], [data-theme="lab"], [data-theme="ember"], [data-theme="mirror"], [data-theme="parlor"], [data-theme="longnight"], [data-theme="meadow"]) { position: relative; }
:is(#screen-wardrobe, #screen-wardrobe-detail) .closet-thumb > svg { display: block; width: 100%; height: 100%; }

/* Seams between squares: ink (toon), grout (lab), glow lines (void), gold hairlines (throne). */
[data-theme="toon"] .cm-chessboard.themed .board .square { stroke: #14090a; stroke-width: 1.4; }
[data-theme="lab"] .cm-chessboard.themed .board .square { stroke: #0c2523; stroke-opacity: .5; stroke-width: 1.2; }
[data-theme="void"] .cm-chessboard.themed .board .square { stroke: #7fe4ff; stroke-opacity: .5; stroke-width: 1; }
[data-theme="throne"] .cm-chessboard.themed .board .square { stroke: #e5c25a; stroke-opacity: .4; stroke-width: .9; }
[data-theme="noir"] .cm-chessboard.themed .board .square { stroke: #0b0b0d; stroke-opacity: .35; stroke-width: .8; }

/* Markers on the textured boards: a king in check wears a white ring on red
   (it reads on light, dark and in greyscale); the void's pale squares take the
   usual yellow last-move tint and a white selection frame. */
[data-theme="canvas"],
[data-theme="dojo"],
[data-theme="noir"],
[data-theme="toon"],
[data-theme="carnival"],
[data-theme="void"],
[data-theme="throne"],
[data-theme="lab"],
[data-theme="ember"],
[data-theme="mirror"],
[data-theme="parlor"],
[data-theme="longnight"],
[data-theme="meadow"] {
  --chk-stroke: #ffffff;
  --chk-fill: rgba(222, 22, 32, .62);
}
[data-theme="void"] {
  --lm-fill: rgba(255, 238, 130, .42);
  --lm-stroke: rgba(8, 12, 40, .85);
  --lm-edge: rgba(255, 255, 255, .6);
}
[data-theme="void"] .cm-chessboard .markers .marker-frame-primary,
[data-theme="void"] .cm-chessboard .markers .marker-frame {
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 3px #04123a) !important;
}
[data-theme="void"] .cm-chessboard .markers .marker-dot {
  fill: #08102c !important;
  opacity: .55 !important;
  stroke: #bfe9ff !important;
  stroke-width: 1.2px !important;
  filter: none !important;
}