.checkers-view {
  --checker-ivory: #fff0cc;
  --checker-mint: #b8dec7;
  width: min(100%, 650px);
  margin: 0 auto;
  user-select: none;
}

.checkers-frame {
  position: relative;
  padding: 27px 24px 29px 30px;
  border: 1px solid #dac6a44a;
  border-radius: 15px;
  background:
    repeating-linear-gradient(2deg, transparent 0 9px, #ffffff05 10px, transparent 11px 18px),
    linear-gradient(135deg, #846246, #654e3c 36%, #806044 70%, #503d30);
  box-shadow: inset 0 2px 0 #ebd3a738, inset 0 -3px 0 #2c2118aa, 0 18px 48px #080e1266, 0 2px 4px #0005;
}

.checkers-frame::before {
  content: '';
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid #e7c78b30;
  border-radius: 9px;
}

.checkers-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(8, minmax(0, 1fr));
  aspect-ratio: 1;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid #392f26;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #ead29b48, inset 0 0 24px #15191244;
  background: #45574d;
}

.checkers-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); min-height: 0; }

.checker-square {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline-offset: -4px;
  font: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.checker-square.is-light {
  background: repeating-linear-gradient(85deg, #ffffff04 0 3px, transparent 4px 11px), linear-gradient(145deg, #e5d9bb, #d7c6a6);
}

.checker-square.is-dark {
  background: repeating-linear-gradient(85deg, #ffffff03 0 2px, transparent 3px 12px), linear-gradient(145deg, #526a58, #3d5147);
}

.checker-square::before {
  content: '';
  position: absolute;
  inset: 0;
  transition: background-color 150ms ease, box-shadow 150ms ease;
  pointer-events: none;
}

.checker-square.is-last-move::before { background: #dec58228; }
.checker-square.is-selected::before { background: #c2e5b739; box-shadow: inset 0 0 0 3px #d7efab; }
.checker-square.is-forced::before { box-shadow: inset 0 0 0 3px #f4d494; }
.checker-square.is-available,
.checker-square.is-destination { cursor: pointer; }
.checker-square.is-available:hover::before { background: #effcbb20; }
.checker-square.is-available:hover .checker-piece { transform: translateY(-3px); }

.checker-square.is-destination::after {
  content: '';
  position: absolute;
  width: 27%;
  aspect-ratio: 1;
  border: 2px solid #e1f1c49e;
  border-radius: 50%;
  background: #d0eabd80;
  box-shadow: 0 0 20px #d0eabd2b;
  pointer-events: none;
}

.checker-square.is-capture-destination::after {
  width: 37%;
  border: 2px solid #ffdf9e;
  background: #f4d49430;
  box-shadow: inset 0 0 0 4px #f4d49414, 0 0 14px #f4d49425;
}

.checker-square.is-destination:hover::before { background: #b9dd9730; }
.checker-square:focus-visible { z-index: 2; outline: 3px solid #fff1bd; box-shadow: inset 0 0 0 5px #21352e; }

.checker-piece {
  position: relative;
  display: grid;
  place-items: center;
  width: 76%;
  height: 76%;
  padding: 9%;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  transform: translateY(-1px);
  transition: transform 150ms ease, filter 150ms ease;
}

.checker-piece.is-ivory {
  color: #ac8958;
  background: linear-gradient(150deg, #fff8e3 2%, #f1dfbb 48%, #c8aa74 100%);
  border: 1px solid #f7e9c9;
  box-shadow: inset 0 2px 2px #fffbed, inset 0 -2px 1px #c5a56a, 0 4px 0 #aa8958, 0 5px 0 #745a37, 0 7px 8px #12201770;
}

.checker-piece.is-jade {
  color: #d0ecd1;
  background: linear-gradient(145deg, #669b80 1%, #3b7058 52%, #264e3e 100%);
  border: 1px solid #98c5a6;
  box-shadow: inset 0 2px 2px #b8dabb60, inset 0 -2px 1px #143c2d, 0 4px 0 #214f3b, 0 5px 0 #15382a, 0 7px 8px #0b201a80;
}

.checker-piece-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  opacity: .85;
  box-shadow: inset 0 0 0 2px #ffffff12, 0 0 0 2px #ffffff0b;
}

.checker-piece-face::before {
  content: '';
  position: absolute;
  inset: 13%;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .3;
}

.checker-piece-emblem {
  width: 27%;
  height: 27%;
  border: 1px solid currentColor;
  border-radius: 3px;
  transform: rotate(45deg);
  background: #ffffff10;
  box-shadow: 2px 2px 0 #00000008;
}

.checker-piece.is-king .checker-piece-face::before { opacity: .14; }
.checker-piece-face svg { z-index: 1; width: 63%; height: 63%; fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.checker-piece.is-king { filter: drop-shadow(0 0 5px #ffe4ad1c); }
.checker-square.is-selected .checker-piece { transform: translateY(-4px); }

.checkers-ranks,
.checkers-files {
  position: absolute;
  display: grid;
  color: #f5e5bdba;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-shadow: 0 1px 1px #211811;
  pointer-events: none;
}

.checkers-ranks { top: 29px; bottom: 31px; left: 6px; width: 22px; grid-template-rows: repeat(8, 1fr); }
.checkers-files { left: 32px; right: 26px; bottom: 5px; height: 23px; grid-template-columns: repeat(8, 1fr); }
.checkers-ranks span,
.checkers-files span { display: grid; place-items: center; }
.checkers-notice { margin: 16px 8px 0; min-height: 1.5em; color: #c4c8bc; font-size: 13px; line-height: 1.5; text-align: center; }
.checkers-notice.is-capture { color: #efd3a0; }
.is-your-turn .checkers-notice { color: #cce5bf; }
.is-your-turn .checkers-notice.is-capture { color: #efd3a0; }

@media (max-width: 520px) {
  .checkers-frame { padding: 19px 14px 22px 21px; border-radius: 10px; }
  .checkers-frame::before { inset: 5px; border-radius: 6px; }
  .checkers-ranks { top: 21px; bottom: 24px; left: 2px; width: 18px; font-size: 9px; }
  .checkers-files { left: 23px; right: 16px; bottom: 2px; height: 19px; font-size: 9px; }
  .checker-piece { width: 78%; height: 78%; }
  .checker-square.is-selected::before { box-shadow: inset 0 0 0 2px #d7efab; }
  .checker-square.is-forced::before { box-shadow: inset 0 0 0 2px #f4d494; }
  .checkers-notice { font-size: 12px; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .checker-square::before, .checker-piece { transition: none; }
}
.checkers-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;color:#bdcbb1}.checkers-toolbar>strong{font:8px var(--mono,Consolas,monospace);letter-spacing:.6px;font-weight:500}.checkers-zoom{min-height:44px;padding:8px 12px;border:1px solid #7d966b;border-radius:4px;background:#2c4b39;color:#cdddb7;font-size:11px}.checkers-zoom:hover{background:#41634a}.checkers-material{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.checkers-material-player{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;background:#c1d0a00a;border:1px solid #c8d7aa26;border-radius:4px;color:#b7cbaa;font-size:10px;line-height:1.5}.checkers-material-player>strong{font:500 16px Georgia,serif;color:#e9d8ad}.checkers-material-1>strong{color:#add8b7}.checkers-material-player>span{font:8px var(--mono,Consolas,monospace);color:#a5b799}.checker-square.is-capture-victim .checker-piece:after{content:'';position:absolute;inset:-7%;border:2px dashed #f0bf82;border-radius:50%;box-shadow:0 0 0 3px #f3be5b10}.checkers-legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;color:#aabca0;font-size:9px;margin:11px 0 14px}.checkers-legend>span{display:flex;align-items:center;gap:5px}.checkers-legend>span:before{content:'';width:8px;height:8px;border-radius:50%;border:1px solid #ccdfaa;background:#bbd79955}.checkers-legend>.checkers-key-capture:before{border-color:#e7c182;background:#e7c18222}.checkers-legend>.checkers-key-king:before{border-radius:1px;transform:rotate(45deg);border-color:#e7d6a9;background:#e7d6a955}.checkers-history{border-top:1px solid #bed2a22b;border-bottom:1px solid #bed2a22b;padding:0 11px;background:#23453320;color:#c2d3b4;border-radius:3px}.checkers-history>summary{cursor:pointer;min-height:44px;padding:13px 0;font-size:11px}.checkers-history-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;padding:0;margin:0 0 10px}.checkers-history-list>li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid #b8c7a31a;font:9px var(--mono,Consolas,monospace);color:#9db38e}.checkers-history-list>li>strong{font-weight:400;color:#d9dab3}.checkers-recap{font-size:10px;line-height:1.7;color:#a7bb98;margin:9px 0 15px}.checkers-view.is-enlarged .checkers-frame{overflow-x:auto;overscroll-behavior-x:contain}.checkers-view.is-enlarged .checkers-grid{min-width:440px}.checkers-view.is-enlarged .checkers-files,.checkers-view.is-enlarged .checkers-ranks{display:none}
@media(max-width:520px){.checkers-material{gap:7px;margin-bottom:10px}.checkers-material-player{align-items:flex-start;flex-direction:column;gap:4px;padding:9px}.checkers-material-player>strong{font-size:15px}.checkers-material-player>span{font-size:7px}.checkers-toolbar>strong{font-size:7px}.checkers-zoom{font-size:10px;padding:7px 10px}.checkers-legend{gap:10px;font-size:8px}.checkers-history-list{grid-template-columns:1fr}.checkers-history-list>li{font-size:9px}}
/* The room now uses a paper surface; keep the table annotations legible on it. */
.checkers-toolbar{color:#69805b}.checkers-material-player{background:#f7f6e9;border-color:#d2d8bf;color:#6e885a}.checkers-material-player>strong{color:#9f814d}.checkers-material-1>strong{color:#54795e}.checkers-material-player>span{color:#7b8e68}.checkers-notice{color:#7d8e72}.is-your-turn .checkers-notice{color:#4f7448}.checkers-notice.is-capture,.is-your-turn .checkers-notice.is-capture{color:#a37d45}.checkers-legend{color:#7c906a}.checkers-legend>span:before{border-color:#839d69;background:#aeca8150}.checkers-legend>.checkers-key-capture:before{border-color:#b89153;background:#d8b36c30}.checkers-legend>.checkers-key-king:before{border-color:#a58b50;background:#d4b76c50}.checkers-history{background:#f3f3e6;border-color:#d1d9be;color:#687f54}.checkers-history-list>li{border-top-color:#dae0cb;color:#81936d}.checkers-history-list>li>strong{color:#9d814a}.checkers-recap{color:#81926e}
.board-mode .game-viewport{max-height:none}

/* Walnut rails, inlaid maple squares, and stamped playing pieces. */
.checkers-frame{background-image:url('/art/checkers-grain.svg'),linear-gradient(115deg,#a2774f,#705039 45%,#9c704a 74%,#553d2a);background-size:320px 160px,auto;border-color:#60402b;border-radius:13px;box-shadow:inset 0 2px 1px #f4cf9b99,inset 0 -5px 0 #3c2b20,0 12px 25px #3a331c25,0 3px 0 #392f22}
.checkers-frame::before{border-color:#d4a97088;box-shadow:inset 0 0 0 2px #573d2933}
.checkers-grid{border:2px solid #352f24;box-shadow:0 0 0 2px #d4b174,0 0 0 4px #513d2b,0 5px 8px #30251966}
.checker-square.is-light{background-image:url('/art/checkers-grain.svg'),linear-gradient(145deg,#f4e4c2,#d5bd91);background-size:220px 110px,auto;box-shadow:inset 0 0 0 1px #cfb99066}
.checker-square.is-dark{background-image:url('/art/checkers-grain.svg'),linear-gradient(145deg,#487363,#254d40);background-size:220px 110px,auto;box-shadow:inset 0 0 0 1px #25433366}
.checker-piece{width:77%;height:77%;padding:9%;background-origin:border-box}
.checker-piece.is-ivory{background:radial-gradient(ellipse at 35% 20%,#fffdf0 0,#f4e2b9 50%,#d6b577 89%);border-color:#fff3d8;box-shadow:inset 0 2px 1px #fff, inset 0 -3px 2px #b9945366,0 3px 0 #ceb07d,0 5px 0 #a07c46,0 6px 0 #71552f,0 9px 8px #15261c70;color:#a47d40}
.checker-piece.is-jade{background:radial-gradient(ellipse at 33% 15%,#88b993,#3f785e 58%,#23503e);border-color:#a4ceb0;box-shadow:inset 0 2px 1px #c4e4bd77,inset 0 -3px 2px #163b2d,0 3px 0 #37634c,0 5px 0 #204532,0 6px 0 #122e24,0 9px 8px #13271a80;color:#c1d9a7}
.checker-piece-face{opacity:1;border-width:1.5px;box-shadow:inset 0 1px 2px #1d2d191c,0 1px 0 #fff3}
.checker-piece-face::before{inset:8%;opacity:.28;border-style:dashed}
.checker-piece-emblem{display:grid;place-items:center;width:88%;height:88%;border:0;border-radius:0;transform:none;background:none;box-shadow:none}
.checker-piece-face .checker-seal{width:100%;height:100%;stroke-width:1.1}
.checker-crown-jewel{fill:#fcf2d2;stroke:none}
.is-jade .checker-crown-jewel{fill:#234d3b}
.checker-piece.is-king{padding:8%;box-shadow:inset 0 2px 2px #fff5,0 3px 0 #ad8d55,0 5px 0 #6c562e,0 8px 0 #a58954,0 10px 0 #63512e,0 13px 10px #1e311977}
.checker-piece.is-jade.is-king{box-shadow:inset 0 2px 2px #fff3,0 3px 0 #43694b,0 5px 0 #193e2d,0 8px 0 #3d6648,0 10px 0 #173b2c,0 13px 10px #13271a88}
.checker-square.is-selected::before{background:#d7f2b225;box-shadow:inset 0 0 0 3px #f1dda0}
.checker-square.is-destination::after{width:30%;background:#eaf3ba;border:2px solid #fcffe3;box-shadow:0 2px 0 #274b34,0 0 0 5px #d8f1b729}
.checker-square.is-capture-destination::after{width:39%;background:#f5c57088;border:3px solid #ffe4a1;box-shadow:0 0 0 5px #ffe29a22,inset 0 0 0 3px #634c2733}
.checkers-material-player{background:linear-gradient(140deg,#fffdf3,#ebe7d4);border-color:#d6ceb4;box-shadow:inset 0 1px 0 #fff,0 2px 0 #c8c6ab33;border-radius:7px}
.checkers-material-player>strong::before{content:'';display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:1px;background:#e5c891;border:1px solid #bfa26a;box-shadow:0 2px 0 #a1814e}
.checkers-material-1>strong::before{background:#4c805f;border-color:#7cab81;box-shadow:0 2px 0 #28513c}
@media(max-width:520px){.checker-piece.is-king{box-shadow:inset 0 1px 1px #fff5,0 2px 0 #b69a65,0 4px 0 #826839,0 6px 0 #ad945e,0 8px 0 #68512c,0 10px 5px #13271a66}.checker-piece.is-jade.is-king{box-shadow:inset 0 1px 1px #fff3,0 2px 0 #456e51,0 4px 0 #214632,0 6px 0 #406348,0 8px 0 #1b3e2c,0 10px 5px #13271a66}.checkers-material-player>strong::before{width:9px;height:9px;margin-right:5px}.checker-square.is-selected::before{box-shadow:inset 0 0 0 2px #f1dda0}}