/* Table finish v4: generated illustrated corners and proportion-preserving rails.
   Unity/mobile supply the visual references; the web uses its own slim artwork. */
.piece-filters { position: absolute; pointer-events: none; }
/* Read-only light draughts squares are part of the board, not faded controls. */
.board.squares .square:disabled { opacity: 1; cursor: default; }
.native-art.illustrated-frame .board-frame {
  --frame-size: clamp(12px,1.6vw,20px);
  padding: var(--frame-size);
  border: 0; border-image: none; border-radius: 0;
  background: none;
  box-shadow: 0 8px 22px #0004;
}
.native-art.illustrated-frame .board-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: var(--frame-tl),var(--frame-tr),var(--frame-bl),var(--frame-br),var(--frame-top),var(--frame-bottom),var(--frame-left),var(--frame-right);
  background-position: left top,right top,left bottom,right bottom,center top,center bottom,left center,right center;
  background-size: var(--frame-size) var(--frame-size),var(--frame-size) var(--frame-size),var(--frame-size) var(--frame-size),var(--frame-size) var(--frame-size),auto var(--frame-size),auto var(--frame-size),var(--frame-size) auto,var(--frame-size) auto;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y;
}
.native-art.illustrated-frame .board-frame::after { display: none; }
.native-art.illustrated-frame .board { border-radius: 0; }
/* A very shallow track must not inherit the weight of a square table. */
.native-art.illustrated-frame .board-frame:has(.board.track) { --frame-size: clamp(10px,1.1vw,14px); }
.native-art .board-frame {
  position: relative;
  isolation: isolate;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.native-art .board-frame > .board { z-index: 2; }

/* Generated tactile materials, tinted by the existing universe palette.
   The build bounds the texture strength using exported-pixel contrast extrema. */
.native-art .board,
.native-art.board-wash .board {
  background: var(--table-surface);
  border: 0;
  box-shadow: none;
}
.native-art .board::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--arena-material) center/var(--arena-material-scale) var(--arena-material-scale) repeat;
  opacity: var(--material-strength); filter: grayscale(1);
  mix-blend-mode: soft-light; pointer-events: none;
}
.native-art .board.squares .square.light,
.native-art.has-square-art .board.squares .square.light { background: var(--table-light); }
.native-art .board.squares .square.dark,
.native-art.has-square-art .board.squares .square.dark { background: var(--table-dark); }
.native-art .board.squares .square::before,
.native-art.has-square-art .board.squares .square::before,
.native-art .board.track .square::before,
.native-art .board.cross_track .square::before,
.native-art .board.mancala .square::before {
  content: ''; display: block; position: absolute; inset: 0;
  background: var(--arena-material) center/var(--cell-material-scale) var(--cell-material-scale) repeat;
  border-radius: inherit;
  opacity: var(--material-strength); filter: grayscale(1);
  mix-blend-mode: soft-light; pointer-events: none;
}
.native-art .board .square:nth-child(3n)::before { background-position: 41px 67px; }
.native-art .board .square:nth-child(5n)::before { background-position: 97px 23px; }
.native-art .board .square.selected::before { opacity: .12; }
/* Actual native artwork, in colour: petals, circuits, ice, cultural motifs.
   Dedicated decorative layers leave ::after on cells for legal-move markers. */
.cell-theme-art { display: none; }
.native-art .board::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--theme-motif) center/480px auto repeat;
  opacity: 1; filter: var(--arena-texture-filter); pointer-events: none;
}
.native-art .board .square { z-index: 2; isolation: isolate; }
.native-art .board-lines { z-index: 1; }
.native-art .board.squares .cell-theme-art,
.native-art .board.track .cell-theme-art,
.native-art .board.cross_track .cell-theme-art,
.native-art .board.mancala .cell-theme-art {
  display: block; position: absolute; inset: 0; z-index: 0;
  background: var(--theme-motif) center/clamp(72px,20cqw,160px) clamp(72px,20cqw,160px) repeat;
  border-radius: inherit; opacity: 1; filter: var(--light-texture-filter); pointer-events: none;
}
.native-art .board.squares .dark .cell-theme-art,
.native-art .board.track .square:nth-child(2n) .cell-theme-art,
.native-art .board.mancala .cell-theme-art { filter: var(--dark-texture-filter); }
.native-art.has-square-art .board.squares .light .cell-theme-art { background-image: var(--square-light); }
.native-art.has-square-art .board.squares .dark .cell-theme-art { background-image: var(--square-dark); }
.native-art.has-square-art .board.squares .cell-theme-art { background-size: 100% auto; background-repeat: no-repeat; }
.native-art:not(.has-square-art) .square:nth-child(3n) .cell-theme-art { background-position: 17% 31%; }
.native-art:not(.has-square-art) .square:nth-child(5n) .cell-theme-art { background-position: 74% 86%; }
.native-art .board .square.selected .cell-theme-art { opacity: 0; }
.native-art .board .coord { z-index: 3; }
.native-art .board.shogi .square { background: transparent; border-color: var(--table-line); }
.native-art .board-lines line { stroke: var(--table-line); stroke-width: 1.6; }
.native-art .board .native-piece { width: 92%; height: 92%; filter: none; }
.native-art .board.shogi .native-piece { width: 88%; height: 94%; }
.native-art .board .native-piece .piece-image {
  --piece-rim: var(--table-ink);
  filter: url(#piece-alpha-clean) drop-shadow(.65px 0 0 var(--piece-rim)) drop-shadow(-.65px 0 0 var(--piece-rim)) drop-shadow(0 .65px 0 var(--piece-rim)) drop-shadow(0 -.65px 0 var(--piece-rim)) drop-shadow(0 2px 1px #0005);
}
.native-art .board .native-piece .piece-image[data-tone="dark"] {
  --piece-rim: var(--table-paper);
  filter: url(#piece-alpha-clean) brightness(1.25) drop-shadow(.65px 0 0 var(--piece-rim)) drop-shadow(-.65px 0 0 var(--piece-rim)) drop-shadow(0 .65px 0 var(--piece-rim)) drop-shadow(0 -.65px 0 var(--piece-rim)) drop-shadow(0 2px 1px #0005);
}
/* Round draughts counters already have a finished rim in the source artwork. */
body[data-skin="draughts-christmas"] .board[data-game="draughts"] .native-piece .piece-image,
body[data-skin="draughts-christmas"] .board[data-game="draughts"] .native-piece .piece-image[data-tone="dark"] {
  filter: url(#piece-alpha-clean) drop-shadow(0 2px 2px #0007);
}
.native-art .board .piece-glyph { background: var(--table-paper); color: var(--table-ink); }
.native-art .board .side-2 .piece-glyph { background: var(--table-ink); color: var(--table-paper); }
.native-art .board .piece-badge { background: var(--table-ink); color: var(--table-paper); border-color: var(--table-paper); }
.native-art .board .coord { background: var(--table-ink); color: var(--table-paper); }
.native-art .board.track .square,
.native-art .board.cross_track .square { background: var(--table-light); border: 1px solid var(--table-line); }
.native-art .board.track .square:nth-child(2n) { background: var(--table-dark); }
.native-art .board.mancala .square { background: var(--table-dark); box-shadow: inset 0 3px 8px #0007; }
.native-art .board.mancala .piece-badge { font-size: .42em; min-width: 36%; right: 2%; }
.native-art .board[data-game="tafl"] .square.special,
.native-art .board.cross_track .square.special { box-shadow: inset 0 0 0 3px var(--table-metal),inset 0 0 0 5px var(--table-ink); }
.native-art .board .square.selected { background: var(--table-highlight) !important; box-shadow: inset 0 0 0 3px var(--table-highlight),inset 0 0 0 5px var(--table-ink) !important; }
.native-art .board .square.destination::after { background: var(--table-highlight); box-shadow: 0 0 0 2px var(--table-ink),0 0 0 4px var(--table-paper); }
.native-art .board .square.destination.side-1::after,
.native-art .board .square.destination.side-2::after { background: transparent; border-color: var(--table-highlight); }
.native-art .board .square.last-move { box-shadow: inset 0 0 0 3px var(--table-highlight),inset 0 0 0 4px var(--table-ink); }

/* Keep the surrounding interface in the current universe, without purple seams. */
.native-art .header,
.native-art .table-universe,
.native-art .board-controls,
.native-art .turn-status { background: var(--table-panel); color: var(--table-paper); }
.native-art .panel,
.native-art .special-actions:not(:empty),
.native-art .hand:not(:empty) { background: var(--table-paper); color: var(--table-ink); }
.native-art .mode-button { background: transparent; color: var(--table-ink); border-color: color-mix(in srgb,var(--table-ink) 20%,transparent); }
.native-art .mode-button:hover { background: color-mix(in srgb,var(--table-light) 35%,var(--table-paper)); }
.native-art .play-heading .eyebrow, .native-art .universe-spark { color: var(--table-highlight); }
.native-art .table-universe .universe-button { background: var(--table-paper); color: var(--table-ink); }
.native-art .icon-button, .native-art .side-tag { background: var(--table-panel); color: var(--table-paper); }
.native-art .player-avatar { background: var(--table-paper); color: var(--table-ink); box-shadow: none; }
.native-art .player-avatar.opponent { background: var(--table-panel); color: var(--table-paper); box-shadow: none; }
@media (min-width:1051px) { .native-art:not(.zen) .board-area { max-width: 650px; } }
@media (max-width:780px) { .native-art.illustrated-frame .board-frame { --frame-size: 12px; } }
@media (max-width:480px) { .native-art:not(.zen) .board-area { width: calc(100% + 16px); margin-inline: -8px; } }

/* New classics keep their actual geometry, with the same Unity material beneath. */
.board[data-game="reversi"] .square { background:var(--table-light,#d6bd84) !important; border:1px solid var(--table-line,#4a4231); }
.native-art .board[data-game="reversi"] .square .cell-theme-art { filter:var(--light-texture-filter); }
.board.hex { display:block; position:relative; overflow:visible; }
.board.hex .square { position:absolute; min-height:0; padding:0; border:0; border-radius:0; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:var(--table-line,#57472d); }
.board.hex .square .cell-theme-art { display:block; position:absolute; inset:1.3px; clip-path:inherit; background:var(--table-light,#d7bf8c); }
.native-art .board.hex .square .cell-theme-art { background-image:var(--theme-motif); background-size:200px; filter:var(--light-texture-filter); }
.board.hex .square.edge-first { background:#1d2421; }
.board.hex .square.edge-second { background:#fffcf0; }
.board.hex .square.edge-first.edge-second { background:linear-gradient(120deg,#1d2421 50%,#fffcf0 50%); }
.board.hex .square.edge-first .cell-theme-art,.board.hex .square.edge-second .cell-theme-art { inset:3px; }
.board.hex .square.selected .cell-theme-art,.board.hex .square.last-move .cell-theme-art { background:var(--table-highlight,#dc9b36); }
.board.hex .square .piece { position:relative; z-index:2; font-size:clamp(12px,3vw,32px); width:85%; height:76%; }
.board.hex .square .coord { left:25%; font-size:clamp(6px,.65vw,9px); bottom:5%; }
.board.hex .square.destination::after { width:20%; height:20%; }
.board.hex .square:focus-visible { outline:none; background:var(--table-highlight,#dc9b36); }
.board.hex .square:focus-visible .cell-theme-art { inset:4px; }
.board[data-game="morris"] .piece { width:76%; height:76%; }