/* Physical game materials, scoped to Dama. Rules and hit targets remain in app.js. */
.dama-page {
  --table-frame:#533a29;
  --table-edge:#2b1b13;
  --table-letter:#e3ceb0;
  --square-pale:#e1dcc9;
  --square-deep:#4e6c5c;
  --square-texture:linear-gradient(110deg,#ffffff0a,#00000006),url('/table-grain.svg'); /* taste-skill-ignore: physical wood and disc lighting requested by the user, not UI decoration. */
}
.dama-page[data-theme="wood"] {
  --table-frame:#71472c;
  --table-edge:#362016;
  --table-letter:#f0d5a8;
  --square-pale:#e2c69b;
  --square-deep:#825737;
  --square-texture:linear-gradient(105deg,#ffffff12,#0000000e),url('/table-grain.svg'); /* taste-skill-ignore: physical wood and disc lighting requested by the user, not UI decoration. */
}
.dama-page[data-theme="night"] {
  --table-frame:#303e49;
  --table-edge:#101923;
  --table-letter:#d4dde0;
  --square-pale:#c5ced0;
  --square-deep:#405662;
  --square-texture:linear-gradient(125deg,#ffffff0a,#00000009); /* taste-skill-ignore: physical wood and disc lighting requested by the user, not UI decoration. */
}
.dama-page .board-frame {
  --rim:clamp(19px,2.3vw,25px);
  order:2;
  position:relative;
  width:min(100%,620px);
  margin:0 auto 8px;
  padding:var(--rim);
  border:2px solid #bda08060;
  border-radius:13px;
  background-image:linear-gradient(130deg,#ffffff1a,transparent 30%,#00000021),url('/table-grain.svg'); /* taste-skill-ignore: physical wood and disc lighting requested by the user, not UI decoration. */
  background-color:var(--table-frame);
  background-size:auto,310px 240px;
  box-shadow:inset 0 1px 2px #fff5,inset 0 -2px 3px #0007,0 4px 0 var(--table-edge),0 7px 0 #130f0ce0,0 20px 28px #0007;
  isolation:isolate;
}
.dama-page .board-frame::after {
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid #e7cca538;
  border-radius:6px;
  pointer-events:none;
}
.dama-page .board-frame .board {
  position:relative;
  width:100%;
  margin:0;
  border:1px solid #140e0cd9;
  border-radius:2px;
  box-shadow:0 0 0 1px #dfc69b60,inset 0 0 8px #0005;
  overflow:hidden;
}
.dama-page .board .square.light {
  background-color:var(--square-pale);
  background-image:var(--square-texture);
}
.dama-page .board .square.dark:nth-child(n) {
  background-color:var(--square-deep);
  background-image:var(--square-texture);
}
.dama-page .board .square {
  background-size:100% 100%,170px 130px;
  background-position:0 0,0 0;
  box-shadow:inset 0 0 0 .5px #1d23151c;
  -webkit-tap-highlight-color:transparent;
}
.dama-page .board .square:nth-child(3n){background-position:0 0,24px 13px}
.dama-page .board .square:nth-child(5n){background-position:0 0,63px 37px}
.dama-page .board .square.selected {
  background-color:var(--square-deep)!important;
  background-image:var(--square-texture)!important;
  outline:3px solid #f5ce77;
  outline-offset:-3px;
}
.dama-page .board .square.last {box-shadow:inset 0 0 0 2px #edc77b99}
.dama-page .board .square:focus-visible {outline:3px solid #fff2b8;outline-offset:-4px;z-index:4}
.dama-page .board .square.option::after {
  width:23%;height:23%;border:2px solid #ffe1a0;background:#1c302b87;
  box-shadow:0 1px 3px #0005;pointer-events:none;
}
.dama-page .board .square .piece {
  --disc-highlight:#fff9e6;
  --disc-face:#d6cbb0;
  --disc-low:#b4a27e;
  --disc-side:#978465;
  --disc-edge:#6e5b42;
  --disc-rim:#ede2c6;
  --disc-groove:#68533345;
  --disc-glint:#ffffffa6;
  --disc-surface:radial-gradient(ellipse at 34% 24%,var(--disc-highlight),transparent 60%),radial-gradient(circle,var(--disc-face) 0 51%,var(--disc-low) 53% 55%,var(--disc-rim) 57% 60%,var(--disc-face) 62% 70%,var(--disc-low) 74%); /* taste-skill-ignore: physical wood and disc lighting requested by the user, not UI decoration. */
  width:76%;height:76%;border:1px solid var(--disc-rim);
  background:var(--disc-surface);
  box-shadow:0 2px 0 var(--disc-side),0 4px 0 var(--disc-edge),0 5px 2px #0008,0 8px 8px #0005,inset 0 1px 2px var(--disc-glint),inset 0 -2px 3px #0003;
  pointer-events:none;
  animation:none;
}
.dama-page .board .piece.b {
  --disc-highlight:#64706e;
  --disc-face:#303936;
  --disc-low:#1a2220;
  --disc-side:#161d1c;
  --disc-edge:#090f0e;
  --disc-rim:#69716a;
  --disc-groove:#070d0a90;
  --disc-glint:#e6f1df45;
}
.dama-page[data-theme="wood"] .board .piece.b {
  --disc-highlight:#775448;--disc-face:#452e25;--disc-low:#2c1d17;--disc-rim:#926e52;
  --disc-side:#2a1912;--disc-edge:#1c100b;
}
.dama-page[data-theme="night"] .board .piece.w {
  --disc-highlight:#ffffff;--disc-face:#d8dfe0;--disc-low:#aab7bc;--disc-rim:#f5f8f7;
  --disc-side:#8c9da5;--disc-edge:#586b75;
}
.dama-page[data-theme="night"] .board .piece.b {
  --disc-highlight:#63727e;--disc-face:#2b3842;--disc-low:#1a242c;--disc-rim:#71808a;
  --disc-side:#1a232a;--disc-edge:#0c141b;
}
.dama-page .board .piece::after {
  content:"";inset:21%;border:1px solid var(--disc-groove);z-index:3;
  box-shadow:0 1px 0 var(--disc-glint),inset 0 1px 2px #0002;
  pointer-events:none;
}
/* A king is two actual discs, not a chess queen glyph. */
.dama-page .board .piece.king::before {
  content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--disc-rim);
  background:var(--disc-surface);transform:translateY(-13%);z-index:2;
  box-shadow:0 2px 0 var(--disc-side),0 4px 0 var(--disc-edge),0 5px 2px #0007,inset 0 1px 2px var(--disc-glint),inset 0 -2px 3px #0003;
  pointer-events:none;
}
.dama-page .board .piece.king::after{transform:translateY(-23%)}
.dama-page .board .piece.taken{opacity:.35;filter:grayscale(.65)}
.dama-page .board .square.sopro-target::before{inset:3px;border:3px dashed #ffe0a0;z-index:5}
.dama-page .board .square.sopro-target .piece{outline:2px solid #f7d28a;outline-offset:2px}
.board-coordinates {
  position:absolute;display:flex;justify-content:space-around;align-items:center;
  color:var(--table-letter);font:600 11px 'DM Sans',Arial,sans-serif;
  pointer-events:none;user-select:none;
}
.board-coordinates.files{left:var(--rim);right:var(--rim);height:var(--rim)}
.board-coordinates.files.top{top:0}.board-coordinates.files.bottom{bottom:0}
.board-coordinates.ranks{top:var(--rim);bottom:var(--rim);width:var(--rim);flex-direction:column}
.board-coordinates.ranks.left{left:0}.board-coordinates.ranks.right{right:0}
body[data-player="b"] .board-coordinates.files{flex-direction:row-reverse}
body[data-player="b"] .board-coordinates.ranks{flex-direction:column-reverse}
.dama-page .player-bar{width:min(100%,620px);padding:10px 12px;min-width:0}
.dama-page .player-bar>div:nth-child(2){min-width:0}
.dama-page .player-bar strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dama-page .player-bar small{font-size:11px;letter-spacing:.06em}
.dama-page .piece-count{flex-shrink:0;font-variant-numeric:tabular-nums}
.dama-page .board-hint{font-size:13px;line-height:1.5}
.dama-page .board-material-note{order:5;margin:6px 0 0;text-align:center;color:#b9cbd2;font-size:12px;line-height:1.5}
.dama-page .board-turn{order:2;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;width:min(100%,620px);margin:0 auto 12px;padding:12px 14px;border:1px solid #ffffff30;border-radius:12px;background:#192b35;color:#d8e4e8}
.dama-page .board-turn strong{font-size:17px;line-height:1.3}
.dama-page #boardTurnColor{margin-left:auto;font-size:12px;color:inherit}
.dama-page .board-turn-dot{width:9px;height:9px;flex:none;border-radius:50%;background:currentColor}
.dama-page .board-turn[data-turn="mine"]{background:#163d31;border-color:#78c6a2;color:#c2ffdd}
.dama-page .board-turn[data-turn="opponent"]{background:#382f22;border-color:#9d8355;color:#ffe2a9}
@media(max-width:440px){.dama-page #boardTurnColor{width:100%;margin-left:19px}.dama-page .board-turn{padding:10px 12px}}
.dama-page .score-player.is-turn .turn-tag{color:#bbffdb}
.dama-page .score-stats strong,.dama-page .series-board strong{font-variant-numeric:tabular-nums}
@media(max-width:440px){
  .dama-page .board-frame{--rim:18px;border-radius:10px}
  .dama-page .board .square .piece{width:75%;height:75%;box-shadow:0 1px 0 var(--disc-side),0 3px 0 var(--disc-edge),0 4px 5px #0007,inset 0 1px 2px var(--disc-glint),inset 0 -1px 2px #0003}
  .dama-page .board .piece.king::before{box-shadow:0 1px 0 var(--disc-side),0 2px 0 var(--disc-edge),0 3px 2px #0007,inset 0 1px 2px var(--disc-glint)}
  .dama-page .player-bar{padding:8px;gap:9px}
}
@media(prefers-reduced-motion:reduce){.dama-page .board .piece,.dama-page .board .square::after{animation:none;transition:none}}