/* Court Chess (ajedrez/SPEC-AJEDREZ.md §3): the flat board, the Company's tokens, the trays of captured
   pieces, the capture scenes ("the strip"), the banners and Court mode. Linked on /chess/ only, after
   game.css. Sizes follow --s (the square, px) and --m (a token in the trays), set by view.js. */

.sq.chess { --s: 56px; --m: 28px; --light-sq: #d5deea; --dark-sq: #6a82a6; --court: #b3202a; --court-2: #e0a82e; --field: #1f4d31; --field-2: #17161c; }
.sq.chess .sq-cloth::before { display: none; }

/* On a phone the table takes 12 px more of the page gutter, so a square is at least 44 px at 390 px wide. */
@media (max-width: 440px) { .table-mount[data-game="chess"] { margin-inline: -12px; } }
.sq.chess[data-layout="narrow"] .sq-mid { padding: 4px 2px; }

/* ---------------------------------------------------------------- the seat plaques, in the colors of each side (v2 §2)
   data-side is set by view.js on whichever seat plays that side. The Court: crimson and gold. The Field:
   dark green and black with a silver rim (the plaque's edge and the shield's outline). */
.sq.chess .seat[data-side="court"] { background: linear-gradient(180deg, #b3202a, #6f121c); border: 2px solid var(--court-2); color: #fbefc9; }
.sq.chess .seat[data-side="field"] { background: linear-gradient(180deg, #24583a, #17161c); border: 2px solid #c9ccd4; color: #eef0f3; }
.sq.chess .seat[data-side="court"].turn { background: linear-gradient(180deg, #c92a35, #8c1b26); }
.sq.chess .seat[data-side="field"].turn { background: linear-gradient(180deg, #2f6d48, #1d2a22); }
.sq.chess .seat[data-side="court"] .seat-sub { color: #f3c766; }
.sq.chess .seat[data-side="field"] .seat-sub { color: #dfe2e8; }
.sq.chess .seat[data-side="field"] .shield > path:last-child { stroke: #c9ccd4; }
.sq.chess .seat[data-side="court"] .shield > path:last-child { stroke: #3a0d12; }

/* ---------------------------------------------------------------- the board */
.cb-board {
  position: absolute; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: 3px solid #3b2a14; border-radius: 4px; box-shadow: 0 0 0 2px var(--gold), 0 8px 22px rgb(0 0 0 / 45%); box-sizing: content-box;
  translate: -3px -3px;
}
.cb-sq {
  position: relative; display: grid; place-items: center; width: var(--s); height: var(--s); margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--light-sq); cursor: default; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cb-sq.dark { background: var(--dark-sq); }
.cb-sq.mine, .cb-sq.dest, .cb-sq.cap, .cb-sq.sel { cursor: pointer; }
.cb-sq.last::before { content: ""; position: absolute; inset: 0; background: rgb(244 205 78 / 42%); pointer-events: none; }
.cb-sq.sel::before { content: ""; position: absolute; inset: 0; background: rgb(244 205 78 / 62%); box-shadow: inset 0 0 0 3px #f6c94a; pointer-events: none; }
.cb-sq.hint::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px #2f9e57; background: rgb(47 158 87 / 22%); pointer-events: none; }
.cb-sq.check::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgb(255 40 40 / 95%) 0, rgb(220 20 30 / 75%) 50%, rgb(200 20 30 / 35%) 100%); pointer-events: none; }
.cb-sq.check .piece { box-shadow: 0 0 0 3px #ff3030, 0 0 16px 6px rgb(255 40 40 / 85%); }
.cb-sq.dest::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; translate: -50% -50%; border-radius: 50%; background: rgb(24 30 48 / 42%); pointer-events: none; z-index: 2; }
.cb-sq.cap::after { content: ""; position: absolute; inset: 3%; border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--s) * .08) rgb(24 30 48 / 50%); pointer-events: none; z-index: 2; }
.cb-sq:focus-visible { outline: 3px solid #f3c766; outline-offset: -3px; box-shadow: none; z-index: 3; }
.cb-co { position: absolute; z-index: 1; font: 700 max(9px, calc(var(--s) * .19))/1 var(--sans); pointer-events: none; }
.cb-co.rk { left: 3px; top: 2px; }
.cb-co.fl { right: 3px; bottom: 2px; }
.cb-sq.light .cb-co { color: var(--dark-sq); }
.cb-sq.dark .cb-co { color: var(--light-sq); }

/* ---------------------------------------------------------------- a piece: portrait token, house ring, glyph */
.piece {
  position: relative; z-index: 1; display: block; width: 86%; height: 86%; border-radius: 50%; box-sizing: border-box;
  background: #f4ead2; box-shadow: 0 2px 4px rgb(0 0 0 / 45%); pointer-events: none;
}
.piece.side-court { border: max(2px, calc(var(--s) * .055)) solid var(--court-2); outline: 1.5px solid var(--court); outline-offset: -1px; }
.piece.side-field { border: max(2px, calc(var(--s) * .055)) solid var(--field); outline: 1.5px solid #0c0b10; outline-offset: -1px; background: #e7eadf; }
.piece .pf { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.piece .pf img { position: absolute; left: 50%; top: -3%; width: 182%; height: auto; max-width: none; translate: -50% 0; }
.piece .glyph { position: absolute; right: -10%; bottom: -10%; width: 46%; height: 46%; border-radius: 50%; padding: 4%; box-sizing: border-box; box-shadow: 0 1px 2px rgb(0 0 0 / 50%); }
.piece.side-court .glyph { background: #fff6e2; }
.piece.side-field .glyph { background: #24302a; }
.glyph { display: block; overflow: visible; }
.glyph path { stroke-linejoin: round; }
.side-court .glyph path { fill: #fff4dc; stroke: #7a1a27; stroke-width: 1.7; }
.side-field .glyph path { fill: #1b1a20; stroke: #cfdac9; stroke-width: 1.5; }
.side-court .glyph .gd { fill: none; stroke: #7a1a27; }
.side-field .glyph .gd { fill: none; stroke: #cfdac9; }
.piece.classic { background: transparent; border: 0; outline: 0; box-shadow: none; }
.piece.classic .glyph { right: auto; bottom: auto; left: 2%; top: 2%; width: 96%; height: 96%; padding: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 40%)); }
.piece.lifted { opacity: .25; }
.cb-ghost { position: fixed; z-index: 2147482000; translate: -50% -50%; pointer-events: none; transform: scale(1.12); }

/* ---------------------------------------------------------------- the trays of captured pieces and the material */
.cb-tray { position: absolute; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; gap: 4px; }
.cb-tray.them { justify-content: flex-start; }
.cb-tray.me { justify-content: flex-end; flex-wrap: wrap-reverse; }
.cb-tray.row { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; overflow: hidden; gap: 2px; }
.cb-tray .piece.mini { flex: none; width: var(--m); height: var(--m); }
.cb-tray.row .piece.mini + .piece.mini { margin-left: calc(var(--m) * -.3); }
.cb-tray .piece.mini .glyph { width: 52%; height: 52%; }
.cb-tray .piece.mini.standing { height: calc(var(--m) * 1.45); border-radius: 30% 30% 12% 12%; }
.cb-tray .piece.mini.standing .pf { border-radius: inherit; }
.cb-mat { flex: none; align-self: center; padding: 2px 8px; border-radius: 999px; background: rgb(0 0 0 / 32%); color: #fbefc9; font: 700 .95rem/1.2 var(--sans); }

/* ---------------------------------------------------------------- the promotion dialog and Resign */
.cb-promo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cb-promo .sq-btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 56px; }
.cb-promo .glyph { flex: none; width: 40px; height: 40px; }
.cb-resign { min-height: 44px; }

/* ---------------------------------------------------------------- the strip: a layer over the table */
.cb-layer {
  position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2%;
  border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #2b2734, #0d0b12 75%); color: #fbf5e6; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.cb-layer.corner { background: transparent; justify-content: flex-end; align-items: flex-end; padding: 0 2% 12%; box-sizing: border-box; }
.cb-layer.cb-bannerbox { background: rgb(13 11 18 / 22%); }
.cb-panels { position: relative; display: flex; justify-content: center; align-items: center; gap: 2.4%; width: 96%; height: 74%; }
.cb-scene.corner .cb-panels { width: auto; height: 34%; }
.cb-panel {
  position: relative; height: 100%; aspect-ratio: 3 / 4; max-width: 47%; overflow: hidden; border-radius: 10px;
  background: linear-gradient(180deg, #666668 0, #616163 74%, #56627a 75.5%, #4d5b76); box-shadow: 0 10px 30px rgb(0 0 0 / 55%);
}
.cb-panel.side-court { border: 4px solid var(--court-2); }
.cb-panel.side-field { border: 4px solid #2f5d3a; }
.cb-scene.one .cb-panel { max-width: 70%; }
.cb-scene.corner .cb-panel { max-width: none; }
.cb-fig { position: absolute; inset: 0; transform-origin: 50% 92%; }
.cb-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a shrunken or departing figure keeps soft edges over the studio gray */
.cb-panel .cb-media { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cb-panel.mirror .cb-media { transform: scaleX(-1); }
.cb-panel.mirror.turned .cb-media { transform: none; }
.cb-panel.turned:not(.mirror) .cb-media { transform: scaleX(-1); }
.cb-panel.blush .cb-media { filter: sepia(.3) saturate(1.6) hue-rotate(-14deg) brightness(1.04); }
.cb-panels:has(.focus) .cb-panel:not(.focus) { filter: brightness(.4); }
.cb-curtain { position: absolute; inset: 0; z-index: 2; transform: translateY(-101%); background: repeating-linear-gradient(90deg, #7a1a27 0 9%, #5d111c 9% 14%); box-shadow: inset 0 -10px 0 var(--gold); }
.cb-panel.side-field .cb-curtain { background: repeating-linear-gradient(90deg, #2f5d3a 0 9%, #1f3f27 9% 14%); }
.cb-word {
  position: absolute; left: 0; right: 0; top: 36%; z-index: 5; margin: 0; text-align: center; opacity: 0; pointer-events: none;
  font: 900 clamp(2.4rem, 8vw, 5.4rem)/1 var(--serif); letter-spacing: .02em; color: #ffd447; -webkit-text-stroke: 2px #3a1010; paint-order: stroke fill;
  text-shadow: 0 4px 0 #3a1010, 0 8px 24px rgb(0 0 0 / 60%); transform: rotate(-4deg);
}
.cb-word.on { opacity: 1; }
.cb-scene.corner .cb-word { top: auto; bottom: 18%; font-size: clamp(1.6rem, 4vw, 2.6rem); }
.cb-flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
.cb-gag { margin: 0; font: 700 1.05rem/1.2 var(--serif); color: #f3c766; letter-spacing: .03em; }
.cb-skip { margin: 0; font-size: .9rem; color: rgb(251 245 230 / 75%); }
.cb-scene.corner .cb-gag, .cb-scene.corner .cb-skip { display: none; }
.cb-scene.still .cb-word { transform: rotate(-4deg); }
.cb-layer.stack .cb-panels { flex-direction: column; height: 82%; width: 92%; gap: 1.5%; }
.cb-layer.stack .cb-panel { height: 49%; max-width: 92%; }
.cb-layer.stack.one .cb-panels { height: 70%; }
.cb-layer.stack.one .cb-panel { height: 100%; }

/* ---------------------------------------------------------------- banners and the Board */
.cb-banner {
  display: flex; align-items: center; gap: 16px; max-width: 92%; padding: 14px 26px; border-radius: 8px;
  background: linear-gradient(180deg, #fbefc9, #ecd38d); color: #6e1219; border: 2px solid #a8812a; box-shadow: 0 10px 34px rgb(0 0 0 / 55%);
}
.cb-banner p { margin: 0; font: 900 clamp(1.9rem, 6vw, 3.6rem)/1.08 var(--serif); text-align: center; }
.cb-banner.check, .cb-banner.checkmate { color: #8e0f1c; }
.cb-board-kings { display: flex; gap: 6px; flex: none; }
.cb-bk { display: block; height: clamp(64px, 14vh, 140px); width: auto; border-radius: 6px; border: 2px solid #a8812a; }

/* ---------------------------------------------------------------- Court mode: someone wanders onto the table */
.cb-intr { position: absolute; z-index: 5; bottom: 0; height: 30%; pointer-events: none; transform: translateY(105%); }
.cb-intr img { display: block; height: 100%; width: auto; border-radius: 10px 10px 0 0; box-shadow: 0 -4px 16px rgb(0 0 0 / 40%); }
.cb-intr.jester { left: 8%; }
.cb-intr.falconer { left: 2%; }
.cb-intr.shepherd { left: 34%; height: 24%; }
.cb-intr.signaler { right: 3%; }
.cb-intr.musician { right: 1%; height: 26%; }
.cb-intr.stay { transform: none; }
.cb-falcon { position: absolute; z-index: 6; top: 4%; left: 0; width: 16%; height: auto; pointer-events: none; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .cb-intr, .cb-falcon { display: none; } }
@media (forced-colors: active) { .cb-sq.sel::before, .cb-sq.hint::before { outline: 3px solid Highlight; } }

/* ---------------------------------------------------------------- the Table view (v2 §3; table.js)
   The board tilts back 35 degrees about its near edge (--pp, the eye's distance, is set by table.js);
   the flat tokens give way to the standing figures in .cb-figs, placed and ordered by table.js. */
.sq.chess.tview .cb-board { transform-origin: 50% 100%; transform: perspective(var(--pp, 1500px)) rotateX(35deg); transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.sq.chess.tview .cb-sq .piece { display: none; }
.sq.chess.tview .cb-sq.dest::after { width: 36%; height: 36%; }
.cb-figs { position: absolute; z-index: 2; pointer-events: none; animation: cb-rise .45s .25s both; }
@keyframes cb-rise { from { opacity: 0; translate: 0 -10px; } }
.cb-st { position: absolute; display: block; pointer-events: auto; -webkit-user-select: none; user-select: none; }
.cb-st img { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 35%)); pointer-events: none; }
.cb-st.mir img { transform: scaleX(-1); }
.cb-sh { position: absolute; left: calc(var(--ax) - var(--u) * .36); bottom: calc(var(--u) * -.1); width: calc(var(--u) * .72); height: calc(var(--u) * .24); border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 50%), transparent); pointer-events: none; }
.cb-st .glyph { position: absolute; z-index: 1; left: calc(var(--ax) + var(--u) * .12); bottom: calc(var(--u) * -.08); width: calc(var(--u) * .34); height: calc(var(--u) * .34); padding: calc(var(--u) * .03); box-sizing: border-box; border-radius: 50%; box-shadow: 0 1px 2px rgb(0 0 0 / 55%); }
.cb-st.side-court .glyph { background: #fff6e2; border: 1.5px solid var(--court-2); }
.cb-st.side-field .glyph { background: #24302a; border: 1.5px solid #c9ccd4; }
.cb-st.classic .glyph { left: 0; bottom: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 3px 2px rgb(0 0 0 / 45%)); }
.cb-st.mine { cursor: pointer; }
.cb-st.mine:hover img { filter: brightness(1.08) drop-shadow(0 0 3px #fbefc9); }
.cb-st.sel img, .cb-st.sel.classic .glyph { filter: drop-shadow(0 0 3px #f6c94a) drop-shadow(0 0 9px #f6c94a); }
.cb-st.cap img, .cb-st.cap.classic .glyph { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px #ff8a2a); }
.cb-st.cap { cursor: pointer; }
.cb-st.hint img { filter: drop-shadow(0 0 3px #2f9e57) drop-shadow(0 0 9px #2f9e57); }
.cb-st.check img, .cb-st.check.classic .glyph { filter: drop-shadow(0 0 4px #ff3030) drop-shadow(0 0 12px rgb(255 40 40 / 85%)); }
.cb-st.promo img { filter: sepia(.25) drop-shadow(0 0 4px #e0a82e); }
.cb-st.sel { translate: 0 calc(var(--u) * -.08); }
.cb-st.lifted { opacity: .25; }
.cb-mark { position: absolute; z-index: 30; width: calc(var(--u) * .36); height: calc(var(--u) * .26); translate: -50% -50%; border-radius: 50%; background: rgb(24 30 48 / 50%); box-shadow: 0 0 0 2px #fbefc9, 0 0 6px 2px rgb(0 0 0 / 45%); pointer-events: none; }
.cb-mark.hint { background: rgb(47 158 87 / 55%); }
.cb-mark.over { background: rgb(24 30 48 / 12%); box-shadow: 0 0 0 1.5px rgb(251 239 201 / 85%), 0 0 3px 1px rgb(0 0 0 / 30%); }
.cb-mark.over.hint { background: rgb(47 158 87 / 18%); box-shadow: 0 0 0 1.5px #5fd38b, 0 0 3px 1px rgb(0 0 0 / 30%); }
.cb-st.cb-ghost { position: fixed; z-index: 2147482000; pointer-events: none; translate: -50% -80%; transform: none; }
@media (prefers-reduced-motion: reduce) { .sq.chess.tview .cb-board { transition: none; } .cb-figs { animation: none; } }