.stage {
  display: flex; flex-direction: column; gap: 8.8px; align-items: stretch;
  min-width: 0; min-height: 0; height: 100%;
  justify-content: center; overflow: hidden;
  container-type: size;
}
.player-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 13.2px;
  flex: none;
  padding: 7.7px 14.3px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(var(--seal-bg-2-rgb), .92), rgba(var(--seal-bg-deep-rgb), .6));
}
.player-strip.turn {
  border-color: rgba(var(--accent-rgb), .42);
  background: linear-gradient(90deg, rgba(var(--accent-dark-rgb), .26), rgba(var(--seal-bg-deep-rgb), .6));
}
.pl-id { display: flex; align-items: center; gap: 12.1px; min-width: 0; overflow: hidden; }
.pl-id > div { min-width: 0; overflow: hidden; }
.pl-mark {
  font-family: var(--han); font-size: 16.5px; font-weight: 700; color: var(--bone);
  width: 27.5px; height: 27.5px; display: grid; place-items: center;
  border: 1px solid var(--line); flex: none;
}
.player-strip.turn .pl-mark { color: #fff; border-color: var(--vermilion); background: rgba(var(--accent-rgb), .3); }
.pl-name {
  font-family: var(--display); font-size: 14.3px; color: var(--bone); letter-spacing: 1.65px;
  display: block; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-rating { font-size: 11px; color: var(--ash); font-style: normal; letter-spacing: 1.1px; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.clock {
  font-family: var(--mono); font-size: 20.9px; font-weight: 500; letter-spacing: 2.2px;
  color: var(--bone-dim); padding: 3.3px 12.1px; border: 1px solid var(--line);
  background: rgba(var(--seal-bg-0-rgb), .55); min-width: 105.6px; text-align: center;
}
.clock.active { color: var(--bone); border-color: rgba(var(--seal-warn-rgb), .45); background: rgba(var(--seal-trim-rgb), .09); }
.clock.low { color: var(--seal-bad); border-color: var(--line-hot); background: rgba(var(--accent-dark-rgb), .28); animation: breathe 1.1s infinite; }
.board-row {
  position: relative;
  --tray: clamp(22px, min(5.4vh, 7.8vw), 39px);
  --tray: clamp(22px, min(5.4cqh, 7.8cqw), 39px);
  --glyph: calc(var(--tray) * .8);
  --traygap: 8.8px;
  --gut: 26px;
  display: flex; justify-content: center; align-items: center;
  padding: 0 calc(var(--tray) + var(--traygap) + var(--gut));
  min-width: 0;
}
.taken {
  position: absolute; top: 0; bottom: var(--gut); width: var(--tray);
  pointer-events: none;
}
.taken:has(.took:nth-child(9)) { --glyph: calc(var(--tray) * .64); }
.taken:has(.took:nth-child(13)) { --glyph: calc(var(--tray) * .52); }
.took-list {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 2.2px; padding: 4.4px 1.1px; overflow: hidden;
}
.took-list:not(:empty) {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--seal-bg-2-rgb), .55), rgba(var(--seal-bg-deep-rgb), .3));
  box-shadow: inset 0 0 0 1px rgba(var(--seal-bg-0-rgb), .5);
}
.taken-left:has(.took-edge) .took-list { padding-bottom: 26.4px; }
.taken-right:has(.took-edge) .took-list { padding-top: 26.4px; }
.taken.gone { display: none; }
.taken-left { right: 100%; margin-right: var(--traygap); }
.taken-right { left: calc(100% + var(--gut)); margin-left: var(--traygap); }
.took {
  font-family: 'Weipawn Chess', var(--mono);
  font-size: var(--glyph); line-height: .84;
  flex: none;
}
.took.w { color: var(--piece-light); text-shadow: 0 0 2px rgba(var(--piece-shadow-rgb), .9), 1px 1px 0 rgba(var(--piece-shadow-rgb), .55); }
.took.b {
  color: var(--piece-dark);
  text-shadow: 0 0 1px rgba(var(--seal-fg-rgb), 1), 0 0 2px rgba(var(--seal-fg-rgb), .85),
    0 0 6px rgba(var(--seal-fg-rgb), .4), 1px 1px 0 rgba(0, 0, 0, .45);
}
.took-edge {
  font-family: var(--mono); font-weight: 700; letter-spacing: .55px;
  font-size: clamp(10px, 1.8vh, 15px);
  font-size: clamp(10px, 1.8cqh, 15px);
  color: var(--talisman); text-align: center;
  position: absolute; left: 50%; transform: translateX(-50%);
  min-width: 100%; width: max-content; padding: 2.2px 4.4px;
  border: 1px solid rgba(var(--seal-trim-rgb), .5);
  background: rgba(var(--seal-bg-0-rgb), .85);
  text-shadow: 0 0 6px rgba(var(--seal-warn-rgb), .55);
}
.taken-left .took-edge { bottom: 0; }
.taken-right .took-edge { top: 0; }
.board-frame {
  position: relative;
  --ring: 11px;
  width: min(100%, calc(100dvh - 371.8px));
  width: min(100%, calc(100cqh - 246.4px));
  aspect-ratio: 1 / 1;
  margin: 28.6px auto;
  flex: none;
  padding: var(--ring) var(--ring) calc(var(--ring) + var(--gut)) calc(var(--ring) + var(--gut));
}
.board-frame .cb::before {
  content: ''; position: absolute; inset: calc(var(--ring) * -1);
  border: 1px solid rgba(var(--seal-trim-rgb), .34);
  background: linear-gradient(180deg, rgba(30, 26, 22, .9), rgba(14, 12, 10, .9));
  box-shadow: inset 0 0 0 3px var(--ink-1), inset 0 0 0 4px rgba(var(--seal-trim-rgb), .14), 0 26px 70px rgba(0, 0, 0, .75);
}
.board-frame .corner {
  position: absolute; width: 16.5px; height: 16.5px; border: 1px solid var(--vermilion); opacity: .85;
}
.corner.tl { top: -1.1px; left: calc(var(--gut) - 1.1px); border-right: 0; border-bottom: 0; }
.corner.tr { top: -1.1px; right: -1.1px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: calc(var(--gut) - 1.1px); left: calc(var(--gut) - 1.1px); border-right: 0; border-top: 0; }
.corner.br { bottom: calc(var(--gut) - 1.1px); right: -1.1px; border-left: 0; border-top: 0; }
.bagua {
  position: absolute; border-radius: 50%;
  inset: -19.8px -19.8px calc(var(--gut) - 19.8px) calc(var(--gut) - 19.8px);
  background: repeating-conic-gradient(from 0deg,
      rgba(var(--seal-trim-rgb), .5) 0deg 1.4deg, transparent 1.4deg 40deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 9px), #000 50%, transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 9px), #000 50%, transparent 50%);
  animation: spin 140s linear infinite;
  pointer-events: none;
}
.bagua::after {
  content: ''; position: absolute; inset: 9.9px; border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .16);
}
.cb { position: relative; width: 100%; height: 100%; --sq: 1px; user-select: none; touch-action: none; }
.cb-squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.sq { position: relative; }
.sq.light { background: var(--sq-light); }
.sq.dark { background: var(--sq-dark); }
.sq.light::after, .sq.dark::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .07;
  mix-blend-mode: multiply;
}
.cb-marks, .cb-pieces, .cb-coords, .cb-promo { position: absolute; inset: 0; pointer-events: none; }
.mark { position: absolute; width: 12.5%; height: 12.5%; }
.mark.last { background: rgba(var(--accent-rgb), .26); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
.mark.sel { background: rgba(var(--seal-warn-rgb), .3); box-shadow: inset 0 0 0 1px var(--talisman); }
.mark.target::after {
  content: ''; position: absolute; inset: 37%; border-radius: 50%;
  background: rgba(var(--accent-rgb), .75);
  box-shadow: 0 0 0 1px rgba(20, 16, 12, .3);
}
.mark.capture { box-shadow: inset 0 0 0 3px rgba(var(--accent-rgb), .6); }
.mark.check {
  background: radial-gradient(circle, rgba(var(--accent-rgb), .75), transparent 68%);
  animation: breathe 1.2s infinite;
}
.piece {
  position: absolute; width: 12.5%; height: 12.5%;
  display: grid; place-items: center;
  font-family: 'Weipawn Chess', var(--mono);
  font-size: calc(var(--sq) * .84);
  line-height: 1;
  transition: transform .17s cubic-bezier(.2, .9, .25, 1);
  will-change: transform;
  pointer-events: none;
}
.cb-pieces .piece.w {
  color: var(--piece-light);
  text-shadow: 0 0 2px rgba(var(--piece-shadow-rgb), .9), 1px 1px 0 rgba(var(--piece-shadow-rgb), .55), 0 0 16px rgba(var(--piece-light-rgb), .3);
}
.cb-pieces .piece.b {
  color: var(--piece-dark);
  text-shadow: 0 0 1px rgba(var(--seal-fg-rgb), .85), 0 0 2px rgba(var(--seal-fg-rgb), .55),
    0 0 5px rgba(var(--seal-fg-rgb), .28), 1px 1px 0 rgba(0, 0, 0, .45),
    0 0 12px rgba(var(--accent-rgb), .26);
}
.piece.dragging { transition: none; z-index: 20; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .8)); }
.coord {
  position: absolute; letter-spacing: .08em; color: rgba(var(--seal-warn-rgb), .72);
  font-size: clamp(11px, calc(var(--sq) * .22), 19px);
  line-height: 1;
  text-shadow: 0 1px 2px rgba(10, 8, 6, .8);
}
.coord.file { top: 100%; margin-top: calc(var(--ring) + var(--gut) * .2); transform: translateX(-50%); }
.coord.rank { right: 100%; margin-right: calc(var(--ring) + var(--gut) * .24); transform: translateY(-50%); }
:root[data-coords="off"] .cb-coords { display: none; }
:root[data-coords="off"] .board-row { --gut: 0px; }
.cb-promo { display: none; background: rgba(8, 7, 6, .86); pointer-events: auto; z-index: 30; }
.cb-promo.open { display: block; }
.promo-panel { position: absolute; top: 0; width: 12.5%; display: flex; flex-direction: column; }
.promo-panel.down { top: auto; bottom: 0; flex-direction: column-reverse; }
.promo-choice {
  height: var(--sq); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-1)); cursor: pointer;
  font-family: 'Weipawn Chess', var(--mono);
  font-size: calc(var(--sq) * .7); line-height: 1; padding: 0;
}
.promo-choice.w { color: var(--piece-light); text-shadow: 0 0 3px rgba(var(--piece-shadow-rgb), .9); }
.promo-choice.b { color: var(--piece-dark-soft); text-shadow: 0 0 1px rgba(var(--seal-fg-rgb), .6); }
.promo-choice:hover { background: var(--crimson); border-color: var(--vermilion); }
.board-veil {
  position: absolute; inset: 0 0 var(--gut) var(--gut); display: none; place-items: center;
  background: rgba(8, 7, 6, .9); backdrop-filter: blur(3px); z-index: 40;
}
.board-veil.open { display: grid; animation: fade .35s; }
.veil-choice { display: none; gap: 8.8px; justify-content: center; margin-top: 13.2px; }
.veil-choice.open { display: flex; flex-wrap: wrap; }
.veil-card.choosing #btnVeilClose { display: none; }
.veil-choice em {
  font-family: var(--mono); font-style: normal; font-size: 10px;
  letter-spacing: 0; opacity: .85; margin-left: 4.4px;
}
@keyframes fade { from { opacity: 0; } }
.veil-card {
  text-align: center; padding: 26.4px 35.2px; max-width: 92%;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(30, 26, 22, .96), rgba(14, 12, 10, .96));
  box-shadow: inset 0 0 0 3px var(--ink-1), inset 0 0 0 4px rgba(var(--seal-trim-rgb), .12);
  position: relative;
}
.veil-cn {
  font-family: var(--han); font-size: 57.2px; font-weight: 700; color: var(--mark-light);
  line-height: 1.1; width: 92.4px; height: 92.4px; margin: 0 auto 13.2px;
  display: grid; place-items: center;
  background: var(--vermilion);
  box-shadow: inset 0 0 0 2px rgba(var(--mark-light-rgb), .55), 0 0 34px rgba(var(--accent-rgb), .45);
  transform: rotate(-3deg);
  border-radius: 3.3px;
}
.veil-text { font-family: var(--display); font-size: 18.7px; letter-spacing: 4.4px; color: var(--bone); font-weight: 700; }
.veil-sub { font-size: 12.1px; color: var(--ash); letter-spacing: 1.65px; margin: 8.8px 0 19.8px; }
.controls { display: flex; gap: 8.8px; flex: none; }
.panel-b .miniboard {
  width: max(143px, min(100%, calc(100dvh - var(--minivh, 616px))));
  height: auto; aspect-ratio: 1/1; flex: none; margin: 0 auto;
  border: 1px solid var(--line); box-shadow: inset 0 0 0 2px var(--ink-1);
}
@media (max-height: 800px) {
  .clock { font-size: 18.7px; padding: 2.2px 9.9px; min-width: 92.4px; }
  .board-row { --tray: clamp(20px, min(5cqh, 7.8cqw), 31px); --gut: 21px; }
  .board-frame { margin: 19.8px auto; width: min(100%, calc(100dvh - 308px)); width: min(100%, calc(100cqh - 206.8px)); }
  .player-strip { padding: 5.5px 12.1px; }
  .pl-mark { width: 25.3px; height: 25.3px; font-size: 14.3px; }
}
@media (max-height: 660px) {
  .board-row { --tray: clamp(18px, min(4.6cqh, 7.8cqw), 25px); --gut: 18px; }
  .board-frame { margin: 13.2px auto; width: min(100%, calc(100dvh - 294.8px)); width: min(100%, calc(100cqh - 193.6px)); }
  .bagua { inset: -13.2px; }
}
@media (max-width: 900px) {
  .stage { gap: 6px; }
  .board-row { --tray: clamp(18px, min(5cqh, 6cqw), 27px); --traygap: 5px; --gut: 27px; }
  .board-frame { margin: 8px auto; width: min(100%, calc(100dvh - 300px)); width: min(100%, calc(100cqh - 190px)); }
  .player-strip { padding: 8px 12px; }
  .clock { font-size: 20px; min-width: 86px; }
  .controls { gap: 6px; }
  .controls .btn { padding: 13px 4px; letter-spacing: 1px; }
  .bagua { display: none; }
  .panel-b .miniboard { width: 100%; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .stage { gap: 4px; }
  .board-row { --tray: clamp(15px, min(4cqh, 5cqw), 21px); --traygap: 4px; --gut: 16px; }
  .board-frame { margin: 3px auto; width: min(100%, calc(100cqh - 114px)); }
  .player-strip { padding: 3px 10px; }
  .pl-mark { width: 21px; height: 21px; font-size: 12px; }
  .pl-name { font-size: 11px; }
  .pl-rating { font-size: 8px; }
  .clock { font-size: 15px; min-width: 66px; padding: 1px 8px; }
  .controls .btn { padding: 7px 4px; }
}
.cb-shapes {
  position: absolute; inset: 0; pointer-events: none; z-index: 12;
  overflow: visible;
}
.cb-shape { fill: none; opacity: .82; }
.cb-shape.stem { stroke-width: .15; stroke-linecap: round; }
.cb-shape.ring { stroke-width: .09; }
.cb-shape.barb { stroke: none; stroke-width: 0; }
.cb-shape.ghost { opacity: .5; }
.cb-shape.red { stroke: rgb(var(--accent-rgb)); }
.cb-shape.red.barb { fill: rgb(var(--accent-rgb)); }
.cb-shape.jade { stroke: var(--jade-lit); }
.cb-shape.jade.barb { fill: var(--jade-lit); }
.cb-shape.gold { stroke: var(--talisman); }
.cb-shape.gold.barb { fill: var(--talisman); }
.cb-shape.bone { stroke: var(--bone); }
.cb-shape.bone.barb { fill: var(--bone); }
.mark.pre {
  background: rgba(var(--accent-alt-rgb), .34);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-alt-rgb), .75);
}