/* Chess (Σκάκι): the page's own look (loaded only on its page, after app.css and t21.css, whose panels and messages it
   shares). Real materials: the squares of wood with its grain, marble with its veins, vinyl, glass (textures drawn as
   SVG, each square its own part of them); a frame with a bevel and a light falling from the top left; turned Staunton
   pieces shaded like solid objects, in wood, marble, polished metal, crystal or lacquer, with their shadows on the
   board. Five boards (.chb-*) and five sets (.chs-*): the admin's, or each player's own choice. */

/* ---------- the boards: the textures (written by the art script), the letters' colours, the last move's light ---------- */
/* <art> (written by the art script: the boards' textures) */
.chb-walnut { --sqL: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.006 0.16%22 numOctaves=%223%22 seed=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.659  0 0 0 0 0.471  0 0 0 0 0.243  1.1 0 0 0 -0.462%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%23ecd3a3%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --sqD: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.006 0.14%22 numOctaves=%223%22 seed=%227%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.180  0 0 0 0 0.086  0 0 0 0 0.031  1.3 0 0 0 -0.546%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%237a4a28%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --frame: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.004 0.09%22 numOctaves=%223%22 seed=%2211%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.078  0 0 0 0 0.024  0 0 0 0 0.000  1.4 0 0 0 -0.588%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%234a2812%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --tl: rgba(60,34,12,.8); --td: rgba(250,230,195,.85); --lm: rgba(255,214,90,.45); }
.chb-marble { --sqL: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22%3E%3Cfilter id=%22c%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.012%22 numOctaves=%223%22 seed=%227%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.604  0 0 0 0 0.584  0 0 0 0 0.549  .55 0 0 0 -.2%22/%3E%3C/filter%3E%3Cfilter id=%22v%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22turbulence%22 baseFrequency=%22.008 .011%22 numOctaves=%225%22 seed=%224%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.604  0 0 0 0 0.584  0 0 0 0 0.549  -16 0 0 0 1.05%22/%3E%3CfeGaussianBlur stdDeviation=%220.8%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%23eeece7%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23c)%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23v)%22/%3E%3C/svg%3E"); --sqD: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22%3E%3Cfilter id=%22c%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.012%22 numOctaves=%223%22 seed=%2211%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.788  0 0 0 0 0.788  0 0 0 0 0.812  .55 0 0 0 -.2%22/%3E%3C/filter%3E%3Cfilter id=%22v%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22turbulence%22 baseFrequency=%22.008 .011%22 numOctaves=%225%22 seed=%228%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.788  0 0 0 0 0.788  0 0 0 0 0.812  -17 0 0 0 1.05%22/%3E%3CfeGaussianBlur stdDeviation=%220.8%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%2334373b%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23c)%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23v)%22/%3E%3C/svg%3E"); --frame: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22320%22%3E%3Cfilter id=%22c%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.012%22 numOctaves=%223%22 seed=%2215%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.431  0 0 0 0 0.416  0 0 0 0 0.388  .55 0 0 0 -.2%22/%3E%3C/filter%3E%3Cfilter id=%22v%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22turbulence%22 baseFrequency=%22.008 .011%22 numOctaves=%225%22 seed=%2212%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.431  0 0 0 0 0.416  0 0 0 0 0.388  -14 0 0 0 1.05%22/%3E%3CfeGaussianBlur stdDeviation=%220.8%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%23bdb9b1%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23c)%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23v)%22/%3E%3C/svg%3E"); --tl: rgba(70,72,76,.85); --td: rgba(235,235,238,.85); --lm: rgba(255,205,110,.5); }
.chb-tournament { --sqL: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.357  0 0 0 0 0.357  0 0 0 0 0.227  0.07 0 0 0 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%23eeeed2%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --sqD: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%225%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.114  0 0 0 0 0.165  0 0 0 0 0.063  0.1 0 0 0 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%23769656%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --frame: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%229%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.000  0 0 0 0 0.000  0 0 0 0 0.000  0.2 0 0 0 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%232b3326%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --tl: rgba(80,110,55,.9); --td: rgba(240,240,215,.9); --lm: rgba(246,234,90,.55); }
.chb-ebony { --sqL: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.007 0.2%22 numOctaves=%223%22 seed=%2221%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.722  0 0 0 0 0.604  0 0 0 0 0.400  0.9 0 0 0 -0.378%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%23eadbbb%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --sqD: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.008 0.22%22 numOctaves=%223%22 seed=%2223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.039  0 0 0 0 0.020  0 0 0 0 0.012  1.2 0 0 0 -0.504%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%232e1f18%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --frame: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.005 0.1%22 numOctaves=%223%22 seed=%2225%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.000  0 0 0 0 0.000  0 0 0 0 0.000  1.2 0 0 0 -0.504%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%231a120d%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --tl: rgba(60,44,26,.85); --td: rgba(230,200,140,.85); --lm: rgba(230,197,107,.5); }
.chb-glass { --sqL: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%2231%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1.000  0 0 0 0 1.000  0 0 0 0 1.000  0.12 0 0 0 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%23c9d6e6%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --sqD: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%2233%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.490  0 0 0 0 0.588  0 0 0 0 0.847  0.14 0 0 0 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%231e2a46%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --frame: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%2235%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.227  0 0 0 0 0.290  0 0 0 0 0.478  0.2 0 0 0 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%230b0f1c%22/%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E"); --tl: rgba(40,56,92,.85); --td: rgba(200,220,250,.85); --lm: rgba(120,210,255,.45); }
/* </art> */

/* ---------- the sets of pieces: the colour across each turned part, the outline, the texture ---------- */
.chs-wood .chp.w { --pf: url(#chM-wood-w); --ps: #5e3d18; } .chs-wood .chp.b { --pf: url(#chM-wood-b); --ps: #160601; }
.chs-marble .chp.w { --pf: url(#chM-marble-w); --ps: #857f73; } .chs-marble .chp.b { --pf: url(#chM-marble-b); --ps: #000; }
.chs-metal .chp.w { --pf: url(#chM-metal-w); --ps: #3d434a; } .chs-metal .chp.b { --pf: url(#chM-metal-b); --ps: #3d2803; }
.chs-crystal .chp.w { --pf: url(#chM-crystal-w); --ps: rgba(255,255,255,.9); } .chs-crystal .chp.b { --pf: url(#chM-crystal-b); --ps: rgba(150,165,220,.75); }
.chs-lacquer .chp.w { --pf: url(#chM-lacquer-w); --ps: #6f6758; } .chs-lacquer .chp.b { --pf: url(#chM-lacquer-b); --ps: #000; }
/* wood's grain, marble's veins: a picture laid over the piece (the second <use>, .tx: only its body, in the texture) */
.chp > svg > .tx { display: none; --ps: transparent; --pl: none; }
.chs-wood .chp > svg > .tx { display: inline; --pf: url(#chTxP-wood); }
.chs-marble .chp.w > svg > .tx { display: inline; --pf: url(#chTxP-veinD); } .chs-marble .chp.b > svg > .tx { display: inline; --pf: url(#chTxP-veinL); }
.chp svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* (the shapes live once in #chDefs and are drawn by <use>: these rules match them there, and the colours come down
   from each piece through the variables) */
.cp-b { fill: var(--pf, #fff); stroke: var(--ps, #111); stroke-width: .9; stroke-linejoin: round; }
.cp-l { fill: var(--pl, url(#chHl)); }
.cp-d { fill: none; stroke: var(--ps, #111); stroke-width: 1.3; stroke-linecap: round; opacity: .75; }
.cp-e { fill: var(--ps, #111); }

/* ---------- the table: the board on the left (the most room), one column on the right, nothing scrolls ---------- */
html:has(body.game-chess[data-page="table"]) { overflow: hidden; }
body.game-chess[data-page="table"] .site-foot { display: none; }
body.game-chess[data-page="table"] #table.page { max-width: none; height: calc(100dvh - var(--top)); box-sizing: border-box; overflow: hidden; padding: 10px 14px; }
body.game-chess[data-page="table"] .chat-fab { display: none !important; }
.ch-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "board tools" "board side"; gap: 10px 18px; height: 100%; }
.ch-tools { grid-area: tools; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ch-boardbox { grid-area: board; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.ch-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow: hidden; }

/* the frame: the board's own material with a bevel (light on its top and left edges, shade on the others); a fine
   inlaid line round the squares; one light over everything, from the top left */
.ch-board { --bw: 560px; position: relative; flex: none; width: var(--bw); aspect-ratio: 1; border-radius: calc(var(--bw) * .02); user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
  background: linear-gradient(150deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.35) 100%), var(--frame) 0 0 / calc(var(--bw) * .55);
  box-shadow: inset calc(var(--bw) * .004) calc(var(--bw) * .004) 0 rgba(255,255,255,.22), inset calc(var(--bw) * -.004) calc(var(--bw) * -.005) 0 rgba(0,0,0,.45),
              inset 0 0 0 1px rgba(0,0,0,.5), 0 calc(var(--bw) * .05) calc(var(--bw) * .09) calc(var(--bw) * -.03) rgba(0,0,0,.95), 0 calc(var(--bw) * .015) calc(var(--bw) * .03) rgba(0,0,0,.55); }
.ch-grid { position: absolute; inset: 3.6%; display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); overflow: hidden;
  box-shadow: 0 0 0 calc(var(--bw) * .0025) var(--inlay, rgba(255,236,200,.55)), 0 0 0 calc(var(--bw) * .007) rgba(0,0,0,.55), inset 0 0 calc(var(--bw) * .04) rgba(0,0,0,.3); }
.chb-ebony, .chb-glass { --inlay: rgba(230,197,107,.9); }
.ch-sq { position: relative; display: block; font-style: normal; }
.ch-sq.l { background: var(--sqL) var(--bx, 0) var(--by, 0) / calc(var(--bw) * .42); }
.ch-sq.d { background: var(--sqD) var(--bx, 0) var(--by, 0) / calc(var(--bw) * .42); }
/* (a light varnish on the squares; the glass a sheen of reflection) */
.ch-grid::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,.2), rgba(255,255,255,0) 55%), radial-gradient(140% 120% at 90% 100%, rgba(0,0,0,.22), rgba(0,0,0,0) 60%); }
.chb-glass .ch-grid::after { background: linear-gradient(125deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.16) 38%, rgba(255,255,255,0) 46%),
  radial-gradient(120% 90% at 18% 8%, rgba(160,200,255,.18), rgba(255,255,255,0) 55%), radial-gradient(140% 120% at 90% 100%, rgba(0,0,0,.3), rgba(0,0,0,0) 60%); }
.chb-tournament .ch-grid::after { background: radial-gradient(140% 120% at 90% 100%, rgba(0,0,0,.14), rgba(0,0,0,0) 60%); }
/* the letters and numbers, small, in the colour of the other square */
.ch-sq em { position: absolute; font-style: normal; font: 800 clamp(8px, calc(var(--bw) * .02), 12px)/1 'Inter', system-ui, sans-serif; pointer-events: none; }
.ch-sq em.rk { left: 5%; top: 5%; } .ch-sq em.fl { right: 6%; bottom: 4%; }
.ch-sq.l em { color: var(--tl); } .ch-sq.d em { color: var(--td); }
/* the last move, the chosen piece's square, where it can go (a dot) or take (a ring), a king in check (red) */
.ch-sq.lm::before, .ch-sq.from::before { content: ''; position: absolute; inset: 0; background: var(--lm); }
.ch-sq.from::before { background: color-mix(in srgb, var(--lm) 100%, rgba(255,255,255,.2)); box-shadow: inset 0 0 0 calc(var(--bw) * .004) rgba(255,255,255,.55); }
.ch-sq.dest::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; margin: -15% 0 0 -15%; border-radius: 50%;
  background: rgba(20,20,30,.28); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.ch-sq.cap::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--bw) * .008) rgba(20,20,30,.32); }
.ch-sq.chk::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,40,40,.95) 0%, rgba(230,20,20,.6) 35%, rgba(200,0,0,0) 75%);
  animation: chChk 1.4s ease-in-out infinite; }
@keyframes chChk { 50% { opacity: .65; } }
.ch-layer { position: absolute; inset: 3.6%; z-index: 2; cursor: pointer; touch-action: none; }

/* ---------- a piece: the shape, a soft shadow on the board; it glides from square to square ---------- */
.chp { --u: calc(var(--bw, 560px) * .928 / 8); position: absolute; display: block; left: var(--x, 50%); top: var(--y, 50%); width: calc(var(--u) * .94); aspect-ratio: 1;
  margin: 0; transform: translate(-50%, -52%); font-style: normal; pointer-events: none; z-index: 1;
  filter: drop-shadow(calc(var(--u) * .035) calc(var(--u) * .05) calc(var(--u) * .035) rgba(0,0,0,.5));
  transition: left calc(.36s * var(--spd, 1)) cubic-bezier(.35,.1,.25,1), top calc(.36s * var(--spd, 1)) cubic-bezier(.35,.1,.25,1), opacity .4s, transform .2s, filter .25s; }
.ch-layer .chp.can { cursor: grab; }
.ch-layer .chp.sel { z-index: 4; transform: translate(-50%, -60%) scale(1.07); filter: drop-shadow(calc(var(--u) * .08) calc(var(--u) * .14) calc(var(--u) * .08) rgba(0,0,0,.42)); }
.ch-layer .chp.drag { z-index: 9; transition: none; transform: translate(-50%, -64%) scale(1.15); filter: drop-shadow(calc(var(--u) * .12) calc(var(--u) * .22) calc(var(--u) * .12) rgba(0,0,0,.4)); cursor: grabbing; }
/* (a piece on its way: lifted off the board in an arc, its shadow left below, set down) */
.ch-layer .chp.moving { z-index: 6; animation: chLift calc(.38s * var(--spd, 1)) ease-in-out; }
@keyframes chLift { 50% { transform: translate(-50%, -64%) scale(1.1); filter: drop-shadow(calc(var(--u) * .12) calc(var(--u) * .24) calc(var(--u) * .12) rgba(0,0,0,.35)); } }
.ch-layer .chp.taken { opacity: 0; transform: translate(-50%, -52%) scale(.55); transition: transform .45s ease-in, opacity .45s; }
.ch-layer .chp.promo { animation: chPromo .6s cubic-bezier(.3,1.5,.5,1); }
@keyframes chPromo { 40% { transform: translate(-50%, -66%) scale(1.25); filter: brightness(1.35) drop-shadow(0 0 calc(var(--u) * .3) rgba(255,214,102,1)); } }
.ch-layer .chp.arrive { animation: chArrive .55s cubic-bezier(.3,1.3,.5,1) backwards; animation-delay: var(--d, 0ms); }
@keyframes chArrive { from { transform: translate(-50%, -140%) scale(.6); opacity: 0; } }
.ch-layer .chp.nope { animation: chNope .35s; }
@keyframes chNope { 25% { transform: translate(-58%, -52%); } 75% { transform: translate(-42%, -52%); } }
@media (prefers-reduced-motion: reduce) { .chp, .ch-layer .chp.promo, .ch-layer .chp.arrive, .ch-sq.chk::before { animation: none !important; transition: none; } }

/* ---------- on the board: a quiet message on the top edge, the promotion, the end ---------- */
.ch-board .ch-banner { top: calc(var(--bw) * .016); left: 50%; transform: translateX(-50%); z-index: 50; width: max-content; max-width: 86%; box-sizing: border-box;
  padding: clamp(3px, calc(var(--bw) * .007), 6px) clamp(10px, calc(var(--bw) * .026), 16px); border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(10px, calc(var(--bw) * .024), 14px); font-weight: 800; line-height: 1.25; color: #f8ecd2; text-shadow: 0 1px 2px rgba(0,0,0,.7);
  background: rgba(12,10,8,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,236,190,.3);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.8); animation: chBanIn .35s ease-out; pointer-events: none; }
.ch-board .ch-banner.blank { animation: none; }
@keyframes chBanIn { from { opacity: 0; transform: translate(-50%, -8px); } }
.ch-board .paused21 { border-radius: inherit; z-index: 60; }
.ch-promo { position: absolute; inset: 3.6%; z-index: 65; background: rgba(6,6,16,.35); }
.ch-promo.hidden { display: none; }
.ch-promo-in { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 16px;
  background: linear-gradient(170deg, rgba(34,30,84,.98), rgba(13,12,38,.98)); border: 1px solid rgba(255,216,102,.5); box-shadow: 0 20px 40px -12px rgba(0,0,0,.9);
  animation: chBanIn .25s ease-out; }
.ch-pr { position: relative; width: calc(var(--bw) * .1); height: calc(var(--bw) * .1); min-width: 42px; min-height: 42px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .15s, transform .15s; }
.ch-pr:hover { background: rgba(255,216,102,.25); transform: scale(1.05); }
.ch-pr .chp { position: relative; left: auto; top: auto; width: 86%; transform: none; --u: 50px; transition: none; }
.ch-pr.x { height: 30px; min-height: 30px; color: #fff; } .ch-pr.x svg.i { width: 16px; height: 16px; }
.ch-end { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; border-radius: inherit; padding: 6%; background: rgba(6,6,20,.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ch-end.hidden { display: none; }
.ch-end-in { width: min(380px, 100%); max-height: 100%; overflow: hidden auto; box-sizing: border-box; padding: clamp(20px, calc(var(--bw) * .05), 30px) 18px 18px; border-radius: 24px;
  text-align: center; position: relative; background: radial-gradient(120% 90% at 50% 0%, rgba(255,207,77,.2), transparent 70%), linear-gradient(170deg, rgba(34,30,84,.97), rgba(13,12,38,.97));
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 80px -24px rgba(0,0,0,.95), 0 0 90px -20px rgba(255,207,77,.35); animation: chEndIn .55s cubic-bezier(.3,1.4,.5,1); }
.ch-end-in.won { background: radial-gradient(130% 110% at 50% 0%, rgba(255,207,77,.42), transparent 72%), linear-gradient(170deg, rgba(34,30,84,.97), rgba(13,12,38,.97)); }
@keyframes chEndIn { from { transform: scale(.86) translateY(14px); opacity: 0; } }
.ch-end-in h3 { margin: 12px 0 4px; font-size: clamp(16px, calc(var(--bw) * .038), 22px); font-weight: 900; background: linear-gradient(180deg, #fff, #ffe9a6); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.ch-end-draw { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; font-size: 30px; font-weight: 900; color: #ffe9a6;
  background: rgba(255,255,255,.08); box-shadow: 0 0 0 2px rgba(255,216,102,.45); }
.ch-why { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #ffd866; }
.ch-end-n { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(223,228,255,.6); font-weight: 800; }
.ch-end .he-hero { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; padding: 4px;
  background: conic-gradient(#ffcf4d, #fff3c4, #c98f1d, #ffcf4d); box-shadow: 0 0 32px rgba(255,207,77,.55); }
.ch-end .he-hav { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 22px; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), transparent 42%), var(--bg); }
.ch-end .he-hav svg.i { width: 26px; height: 26px; } .ch-end .he-hav .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-end .he-crown { position: absolute; left: 50%; top: -24px; width: 36px; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.ch-end .he-crown svg { display: block; width: 100%; }

/* ---------- around the board: the players (what they took), your move, the moves written down ---------- */
.ch-pl { position: relative; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 9px 36px 9px 10px; border-radius: 18px; min-width: 0; flex: none;
  background: linear-gradient(160deg, rgba(30,25,72,.85), rgba(18,15,46,.82)); border: 1px solid var(--stroke); transition: border-color .3s, box-shadow .3s; }
.ch-pl.turn { border-color: rgba(255,216,102,.55); box-shadow: 0 0 0 3px rgba(255,216,102,.1), 0 16px 30px -18px rgba(255,216,102,.5); }
.ch-av { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; padding: 3px; box-sizing: border-box; }
.ch-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.14); }
.ch-pl.turn .ch-ring { background: conic-gradient(#ffd866, #fff3c4, #ffd866); animation: chRing 2.4s linear infinite; }
@keyframes chRing { to { transform: rotate(360deg); } }
.ch-avi { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 900; font-size: 17px;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.5), transparent 42%), var(--bg); box-shadow: 0 0 0 2px #17153a; }
.ch-avi svg.i { width: 22px; height: 22px; } .ch-avi .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-pn { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
.ch-pn b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-pn small { font-size: 11.5px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-cap { display: flex; align-items: center; flex-wrap: wrap; min-height: 16px; margin-top: 1px; }
.ch-cap .chp { position: relative; left: auto; top: auto; width: 16px; margin-right: -5px; transform: none; --u: 18px; transition: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.ch-cap em { margin-left: 9px; font-style: normal; font-size: 11.5px; font-weight: 900; color: #b9f59a; }
.ch-colour { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.ch-colour.w { background: linear-gradient(160deg, #fff, #d9d9d2); } .ch-colour.b { background: linear-gradient(160deg, #45454d, #121215); }
.ch-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 40px; height: 40px; padding: 0; flex: none;
  border-radius: 13px; cursor: pointer; color: #f1ecff; font: 800 13px 'Inter', system-ui, sans-serif;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)), linear-gradient(160deg, rgba(36,30,84,.95), rgba(18,15,46,.95));
  border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px -10px rgba(0,0,0,.9);
  transition: border-color .2s, background .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.ch-tool:hover { border-color: rgba(255,216,102,.55); }
.ch-tool:active { transform: translateY(1px) scale(.97); }
.ch-tool svg.i { width: 18px; height: 18px; flex: none; }
.ch-tool.wide { width: auto; padding: 0 15px; }
.ch-tool.hidden { display: none; }
.ch-tool > b { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #fff; background: #ff4d6d; box-shadow: 0 0 0 2px #15123a; }
.ch-tool > b.hidden { display: none; }
.ch-mute .tv-snd-off { display: none; }
body.tv-muted .ch-mute .tv-snd-off { display: inline; } body.tv-muted .ch-mute .tv-snd-on { display: none; }
.ch-dock { display: block; margin: 0; padding: 14px 14px 12px; min-width: 0; overflow: hidden; flex: none; }
.ch-dock .turnlbl { flex-direction: column; gap: 3px; margin-bottom: 0; }
.ch-dock .turnlbl b { white-space: normal; line-height: 1.3; overflow-wrap: anywhere; }
.ch-dock .turnlbl span { text-align: left; color: #ffd38a; }
.ch-dock .turnlbl span:empty { display: none; }
.ch-dock.my-turn { border-color: rgba(255,216,102,.5); }
.ch-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ch-acts:not(:has(.ch-btn:not(.hidden))) { display: none; }
.ch-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: 800 12.5px 'Inter', system-ui, sans-serif;
  color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); transition: background .15s, border-color .15s; }
.ch-btn:hover { background: rgba(255,255,255,.16); }
.ch-btn svg.i { width: 15px; height: 15px; }
.ch-btn.hidden { display: none; }
.ch-btn.bad { color: #ffc2c8; border-color: rgba(255,107,120,.45); } .ch-btn.bad:hover { background: rgba(255,90,100,.16); }
.ch-btn.good { color: #2a1800; border: 0; background: linear-gradient(180deg, #fff1b8, #ffd866 45%, #e5a92e); box-shadow: 0 2px 0 #7a4c10; }
.ch-offer { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,216,102,.1); border: 1px solid rgba(255,216,102,.45); animation: chBanIn .3s ease-out; }
.ch-offer.hidden { display: none; }
.ch-offer > span { display: block; font-size: 13px; font-weight: 800; color: #ffe9a6; margin-bottom: 8px; }
.ch-offer > div { display: flex; gap: 8px; }
.ch-panel.ch-movesp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ch-moves { flex: 1; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; font: 700 13px/1.5 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ch-mv { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 4px; padding: 1px 6px; border-radius: 6px; }
.ch-mv:nth-child(odd) { background: rgba(255,255,255,.035); }
.ch-mv em { font-style: normal; color: var(--muted); }
.ch-mv.last span:last-child:not(:empty), .ch-mv.last span:nth-child(2):last-of-type { color: #ffd866; }
.ch-none { margin: 0; font-size: 12.5px; color: var(--muted); }
.ch-foot { display: flex; flex: none; }
.ch-foot .ch-leave { flex: 1; min-width: 0; height: auto; min-height: 42px; padding: 8px 12px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: normal; text-align: center; line-height: 1.2; font-size: 12.5px; }
.ch-foot .ch-leave svg.i { flex: none; width: 16px; height: 16px; }

/* ---------- home: a corner of the board, the look ---------- */
.logo-ch { position: relative; width: 36px; height: 36px; flex: none; }
.logo-ch img { width: 36px; height: 36px; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.hero-ch .ch-art { position: relative; height: 150px; display: flex; justify-content: center; align-items: flex-start; }
.ch-mini { --bw: 200px; position: relative; margin-top: 4px; width: 150px; aspect-ratio: 1; padding: 8px; box-sizing: border-box; border-radius: 10px;
  background: var(--frame) 0 0 / 120px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 14px 26px -10px rgba(0,0,0,.8);
  transform: perspective(600px) rotateX(18deg) rotateZ(-6deg); animation: chMiniIn .7s cubic-bezier(.2,.9,.3,1) backwards; }
@keyframes chMiniIn { from { transform: perspective(600px) rotateX(40deg) rotateZ(-20deg) translateY(-20px); opacity: 0; } }
.ch-mini-sq { position: relative; display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); width: 100%; height: 100%; border-radius: 3px; overflow: hidden; }
.ch-mini-sq i.l { background: var(--sqL) 0 0 / 90px; } .ch-mini-sq i.d { background: var(--sqD) 0 0 / 90px; }
.ch-mini .chp { --u: 34px; left: calc(8px + var(--x) * .8934); top: calc(8px + var(--y) * .8934); width: 34px; animation: chArrive .6s cubic-bezier(.3,1.4,.5,1) backwards; animation-delay: calc(var(--d) + .3s); }
/* your look: a small sample of the board and the pieces you see, and what they are called */
.ch-mylook { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 16px; cursor: pointer; text-align: left; color: var(--text);
  background: rgba(255,255,255,.04); border: 1px solid var(--stroke); transition: background .2s, border-color .2s; font: inherit; }
.ch-mylook:hover { background: rgba(255,255,255,.07); border-color: rgba(255,216,102,.4); }
.ch-mylook > svg.i { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ch-ml-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-ml-t b { font-size: 14px; } .ch-ml-t small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-ml-prev, .ch-lk-prev { position: relative; flex: none; display: grid; grid-template: 1fr 1fr / 1fr 1fr; width: 52px; height: 52px; padding: 4px; box-sizing: border-box; border-radius: 8px;
  background: var(--frame) 0 0 / 60px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 6px 12px -6px rgba(0,0,0,.8); }
.ch-ml-prev .sq.l, .ch-lk-prev .sq.l { background: var(--sqL) 0 0 / 60px; } .ch-ml-prev .sq.d, .ch-lk-prev .sq.d { background: var(--sqD) 0 0 / 60px; }
.ch-ml-prev .chp, .ch-lk-prev .chp { --u: 24px; width: 22px; transition: none; }
.ch-ml-prev .chp.w, .ch-lk-prev .chp.w { left: 30%; top: 72%; } .ch-ml-prev .chp.b, .ch-lk-prev .chp.b { left: 70%; top: 30%; }
.ch-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(4,3,14,.6); animation: fade .2s; }
.ch-modal.hidden { display: none; }
.ch-lk-box { width: min(520px, 100%); max-height: 90dvh; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding: 20px; border-radius: 24px;
  background: linear-gradient(165deg, rgba(42,31,100,.98), rgba(17,13,44,.98)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.ch-lk-box h3 { margin: 0 0 4px; font-size: 19px; font-weight: 900; }
.ch-lk-note { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.ch-lk-h { margin: 12px 0 8px; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.ch-lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; min-width: 0; }
.ch-lk { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; cursor: pointer; color: var(--text); text-align: left; font: 700 12.5px 'Inter', system-ui, sans-serif;
  background: rgba(255,255,255,.04); border: 1px solid var(--stroke); min-width: 0; overflow: hidden; }
.ch-lk > span:last-child { flex: 1; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.ch-lk.on { border-color: #ffd866; background: rgba(255,216,102,.1); box-shadow: 0 0 0 1px #ffd866 inset; }
.ch-lk-acts { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) { .ch-wrap { grid-template-columns: minmax(0, 1fr) 260px; gap: 10px 14px; } }
/* upright screens and small windows: the buttons on top, the other player, the board as wide as the screen, you, the rest */
@media (orientation: portrait), (max-width: 820px) and (min-height: 521px) {
  body.game-chess[data-page="table"] #table.page { height: auto; overflow: visible; padding: 8px 10px 14px; }
  html:has(body.game-chess[data-page="table"]) { overflow: auto; }
  /* (as at a real board: the other player above it, you below it, then your move and the moves written down) */
  .ch-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "tools" "opp" "board" "me" "dock" "moves" "foot"; gap: 8px; height: auto; }
  .ch-boardbox { aspect-ratio: 1; }
  .ch-side { display: contents; }
  #chOpp { grid-area: opp; } #chMe { grid-area: me; } .ch-dock { grid-area: dock; } .ch-movesp { grid-area: moves; max-height: 200px; } .ch-foot { grid-area: foot; }
}
@media (max-width: 520px) {
  .ch-pl { padding: 6px 30px 6px 7px; gap: 7px; } .ch-av { width: 36px; height: 36px; padding: 2px; }
  .ch-pn b { font-size: 12.5px; } .ch-pn small { font-size: 10.5px; }
  .ch-tool { width: 38px; height: 38px; }
}
/* a phone sideways: the whole height for the board on the left, the rest in one column on the right */
@media (orientation: landscape) and (max-height: 520px) {
  body.game-chess[data-page="table"] .top, body.game-chess[data-page="table"] .site-foot { display: none; }
  body.game-chess[data-page="table"] #table.page { height: 100dvh; margin: 0; padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); }
  .ch-wrap { grid-template-columns: minmax(0, 1fr) 210px; gap: 6px 8px; }
  .ch-tools { gap: 5px; }
  .ch-tool { width: 32px; height: 32px; border-radius: 10px; } .ch-tool.wide { padding: 0 10px; font-size: 11.5px; } .ch-tool svg.i { width: 15px; height: 15px; }
  .ch-side { gap: 6px; }
  .ch-pl { padding: 5px 26px 5px 7px; gap: 6px; border-radius: 13px; } .ch-av { width: 28px; height: 28px; padding: 2px; }
  .ch-pn b { font-size: 11.5px; } .ch-pn small { font-size: 9.5px; }
  .ch-dock { padding: 7px 9px; border-radius: 13px; } .ch-dock .turnlbl { font-size: 11px; }
  .ch-btn { height: 28px; padding: 0 10px; font-size: 11px; }
  .ch-movesp { display: none; }
  .ch-foot .ch-leave { min-height: 32px; padding: 5px 8px; font-size: 10.5px; border-radius: 11px; }
}
/* full screen: the table on one screen (the page's bar and footer go; the board grows to the height) */
body.game-fs .ch-wrap { height: 100%; }
@media (orientation: portrait), (max-width: 820px) and (min-height: 521px) {
  body.game-fs[data-page="table"]:has(.ch-wrap) { height: auto; min-height: 100dvh; overflow: visible; }
  body.game-fs[data-page="table"] .page#table:has(.ch-wrap) { height: auto; overflow: visible; }
}
/* (the black pieces someone took, small on the dark panel: a fine light edge so they read) */
.ch-cap.b .chp { filter: drop-shadow(0 0 .6px rgba(255,255,255,.85)) drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* ---------- (2026-10-10, b) the board tilted like a real one, the left column, the trays, the clocks, the ghost ---------- */
.ch-wrap { grid-template-columns: 250px minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "left tools tools" "left board side"; }
.ch-left { grid-area: left; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow: auto; }
@media (max-width: 1250px) { .ch-wrap { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "board tools" "board left" "board side"; } }
.ch-board { --tilt: 18deg; background: none; box-shadow: none; perspective: calc(var(--bw) * 2.6); perspective-origin: 50% 20%; }
.ch-tilt { position: absolute; inset: 0; border-radius: calc(var(--bw) * .02); transform: rotateX(var(--tilt)); transform-origin: 50% 70%; transform-style: preserve-3d;
  background: linear-gradient(150deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.35) 100%), var(--frame) 0 0 / calc(var(--bw) * .55);
  box-shadow: inset calc(var(--bw) * .004) calc(var(--bw) * .004) 0 rgba(255,255,255,.22), inset calc(var(--bw) * -.004) calc(var(--bw) * -.005) 0 rgba(0,0,0,.45),
              0 calc(var(--bw) * .06) calc(var(--bw) * .08) calc(var(--bw) * -.02) rgba(0,0,0,.9); }
.ch-layer { pointer-events: none; transform-style: preserve-3d; }
.ch-layer .chp { transform: translate(-50%, -82%) rotateX(calc(-1 * var(--tilt))); transform-origin: 50% 100%; }
.ch-layer .chp.sel { transform: translate(-50%, -92%) rotateX(calc(-1 * var(--tilt))) scale(1.07); }
.ch-layer .chp.lifted { opacity: .25; }
.ch-layer .chp.moving { animation: chHop calc(.52s * var(--spd, 1)) cubic-bezier(.3,.1,.3,1); }
@keyframes chHop { 0% { transform: translate(-50%, -82%) rotateX(calc(-1 * var(--tilt))); } 22%, 72% { transform: translate(-50%, -108%) rotateX(calc(-1 * var(--tilt))) scale(1.08); }
  88% { transform: translate(-50%, -80%) rotateX(calc(-1 * var(--tilt))) scale(1.04, .95); } 100% { transform: translate(-50%, -82%) rotateX(calc(-1 * var(--tilt))); } }
.ch-layer .chp.land { animation: chLand .3s cubic-bezier(.3,1.6,.5,1); }
@keyframes chLand { 0% { transform: translate(-50%, -96%) rotateX(calc(-1 * var(--tilt))); } 70% { transform: translate(-50%, -80%) rotateX(calc(-1 * var(--tilt))) scale(1.04, .95); } }
.ch-layer .chp.taken { opacity: 0; }
.chp.ch-ghost { position: fixed; z-index: 120; pointer-events: none; transform: translate(-50%, -80%) scale(1.18); transition: none;
  filter: drop-shadow(12px 26px 14px rgba(0,0,0,.45)); }
.chp.ch-fly { position: fixed; z-index: 120; pointer-events: none; transition: none; margin: 0; transform: none; }
/* where the chosen piece can go: a soft light that breathes; what it can take: a glowing ring; the square under a dragged piece */
.ch-sq.dest::after { width: 44%; height: 44%; margin: -22% 0 0 -22%; background: radial-gradient(circle, rgba(255,240,190,.95) 0 18%, rgba(255,214,102,.45) 30%, rgba(255,214,102,0) 70%);
  box-shadow: none; animation: chDest 1.6s ease-in-out infinite; }
@keyframes chDest { 50% { transform: scale(1.18); opacity: .75; } }
.ch-sq.cap::after { inset: 6%; box-shadow: inset 0 0 0 calc(var(--bw) * .006) rgba(255,150,90,.85), inset 0 0 calc(var(--bw) * .03) rgba(255,120,60,.6); animation: chDest 1.6s ease-in-out infinite; }
.ch-sq.from::before { background: radial-gradient(circle, rgba(255,226,140,.55), rgba(255,200,80,.25) 70%); box-shadow: inset 0 0 0 calc(var(--bw) * .005) rgba(255,226,140,.9); }
.ch-sq.hov::before { content: ''; position: absolute; inset: 0; background: rgba(255,236,170,.35); box-shadow: inset 0 0 0 calc(var(--bw) * .006) rgba(255,236,170,.95); }
/* the clocks */
.ch-clockp { display: grid; gap: 10px; }
.ch-clock, .ch-glass { display: flex; align-items: center; gap: 12px; }
.ch-clock small, .ch-glass small { display: block; font-size: 11px; font-weight: 800; color: var(--muted); }
.ch-clock b, .ch-glass b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ch-sw svg, .ch-hg svg { width: 34px; height: 40px; fill: none; stroke: #ffd866; stroke-width: 1.6; stroke-linecap: round; }
.ch-hg .hg-sand { fill: #f3c26a; stroke: none; } .ch-hg .hg-drip { stroke: #f3c26a; stroke-width: 1; stroke-dasharray: 1.5 2; opacity: 0; }
.ch-glass.run .hg-drip { opacity: 1; animation: chDrip .6s linear infinite; } @keyframes chDrip { to { stroke-dashoffset: -3.5; } }
.ch-glass.none b { color: var(--muted); }
.ch-glass.warn b { color: #ff8a93; animation: chWarnP 1s ease-in-out infinite; } @keyframes chWarnP { 50% { opacity: .45; } }
/* the trays: what each one took, by kind, with its number */
.ch-trays { display: grid; gap: 12px; }
.ch-tray-h { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.ch-tray-h b { color: #b9f59a; }
.ch-tray-in { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ch-tk { position: relative; display: grid; place-items: center; height: 44px; border-radius: 10px; background: rgba(255,255,255,.05); }
.ch-tk.none { opacity: .22; }
.ch-tk .chp { position: relative; left: auto; top: auto; width: 34px; transform: none; --u: 36px; transition: none; }
.ch-tk em { position: absolute; right: 3px; bottom: 1px; font-style: normal; font-size: 11px; font-weight: 900; color: #ffd866; }
.ch-tk.bump { animation: chBumpT .5s cubic-bezier(.3,1.6,.5,1); } @keyframes chBumpT { 40% { transform: scale(1.25); background: rgba(255,216,102,.25); } }
.ch-leavecost { font-size: 12.5px; font-weight: 800; color: var(--muted); text-align: center; } .ch-leavecost.cost { color: #ffb3ba; }
.ch-adv { font-style: normal; color: #b9f59a; } .ch-think { color: #ffd38a !important; }
/* (the line "your turn / thinking…" is always there, empty for the one who waits: on a phone, where the players are
   above and below the board, its coming and going moved the board and everything under it at every move; on a big
   screen it is not there at all, as before) */
.ch-think.ch-idle { display: none; }
@media (orientation: portrait), (max-width: 820px) and (min-height: 521px), (orientation: landscape) and (max-height: 520px) {
  .ch-think.ch-idle { display: block; visibility: hidden; }
  /* (the box of your move, the same height all game long: two lines for what to do, the small line kept, and the
     buttons keep their place while hidden; so the moves and the button under it stay still) */
  .ch-dock .turnlbl b { min-height: 2.6em; }
  .ch-dock .turnlbl span:empty { display: block; visibility: hidden; }
  .ch-dock .turnlbl span:empty::before { content: '\00a0'; }
  .ch-acts .ch-btn.hidden { display: inline-flex !important; visibility: hidden; }
}
.ch-art img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.5)); }
@media (orientation: portrait), (max-width: 820px) and (min-height: 521px) {
  .ch-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tools" "opp" "board" "me" "dock" "left" "moves" "foot"; }
  .ch-left { overflow: visible; }
}
/* ---------- (2026-10-10, c) where the chosen piece can go: a big soft jewel of light; what it can take: a glowing frame;
   the last move: a light that fades away ---------- */
.ch-sq.dest::after { width: 58%; height: 58%; margin: -29% 0 0 -29%; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(255,255,255,.95) 0 9%, rgba(255,236,170,.75) 22%, rgba(255,200,90,.42) 48%, rgba(255,190,70,.12) 66%, rgba(255,190,70,0) 72%);
  box-shadow: 0 0 calc(var(--bw) * .02) rgba(255,214,102,.55), inset 0 0 0 calc(var(--bw) * .0025) rgba(255,240,200,.6);
  animation: chJewel 1.8s ease-in-out infinite; }
@keyframes chJewel { 50% { transform: scale(.86); opacity: .82; box-shadow: 0 0 calc(var(--bw) * .035) rgba(255,214,102,.75), inset 0 0 0 calc(var(--bw) * .0025) rgba(255,240,200,.8); } }
.ch-sq.cap::after { inset: 3%; border-radius: 12%; animation: chJewel 1.8s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255,120,80,0) 52%, rgba(255,120,80,.28) 70%, rgba(255,90,60,.5) 100%);
  box-shadow: inset 0 0 0 calc(var(--bw) * .006) rgba(255,170,110,.95), 0 0 calc(var(--bw) * .025) rgba(255,110,70,.6); }
.ch-sq.from::before { background: radial-gradient(circle, rgba(255,236,170,.6), rgba(255,200,80,.28) 75%); box-shadow: inset 0 0 0 calc(var(--bw) * .006) rgba(255,236,170,.95), inset 0 0 calc(var(--bw) * .03) rgba(255,214,102,.8); }
.ch-sq.lm::before { transition: opacity 1s ease; }
.ch-sq.lm.fade::before { opacity: 0; }
/* ---------- (2026-10-10, d) the chosen piece's ways: a light ring, not a solid ball; the last move fades sooner ---------- */
.ch-sq.dest::after { width: 46%; height: 46%; margin: -23% 0 0 -23%;
  background: radial-gradient(circle, rgba(255,240,200,.35) 0 10%, rgba(255,226,150,0) 12% 52%, rgba(255,226,150,.75) 60%, rgba(255,200,90,.3) 70%, rgba(255,200,90,0) 76%);
  box-shadow: 0 0 calc(var(--bw) * .018) rgba(255,214,102,.35); }
.ch-sq.lm::before { transition: opacity .45s ease; }
.ch-tilt { transform-origin: 50% 50%; }/* (the board the whole height: the buttons sit above the right column only) */
@media (min-width: 1251px) { .ch-wrap { grid-template-areas: "left board tools" "left board side"; } }
/* (leaving: a small icon among the tools, red on hover) */
.ch-tool.ch-leave:hover { border-color: rgba(255,107,120,.7); color: #ffc2c8; }

/* ---------- (2026-10-10, e) where the chosen piece can go: a small glowing gold orb with a shadow under it, that pops in
   and sends out a soft ripple of light (a fine dark rim keeps it seen on light squares); what it can take: a ring ---------- */
.ch-sq.dest::after { width: 42%; height: 42%; margin: -21% 0 0 -21%; border-radius: 50%; opacity: 1;
  background: radial-gradient(circle, rgba(255,246,214,.95) 0 9%, rgba(255,214,110,.5) 12%, rgba(255,210,110,.14) 18% 70%, rgba(255,210,110,0) 72%);
  box-shadow: inset 0 0 0 calc(var(--bw) * .004) rgba(255,214,110,.98), inset 0 0 0 calc(var(--bw) * .006) rgba(60,35,5,.55), inset 0 0 calc(var(--bw) * .014) rgba(255,200,80,.6), 0 0 0 calc(var(--bw) * .0018) rgba(60,35,5,.6), 0 calc(var(--bw) * .004) calc(var(--bw) * .008) rgba(0,0,0,.35), 0 0 calc(var(--bw) * .018) rgba(255,190,60,.7), 0 0 0 0 rgba(255,196,70,0);
  animation: chOrbIn .3s cubic-bezier(.3,1.6,.5,1) both, chOrb 1.6s ease-out .3s infinite; }
@keyframes chOrbIn { from { transform: scale(0); opacity: 0; } }
@keyframes chOrb {
  0% { transform: scale(.94); box-shadow: inset 0 0 0 calc(var(--bw) * .004) rgba(255,214,110,.98), inset 0 0 0 calc(var(--bw) * .006) rgba(60,35,5,.55), inset 0 0 calc(var(--bw) * .014) rgba(255,200,80,.6), 0 0 0 calc(var(--bw) * .0018) rgba(60,35,5,.6), 0 calc(var(--bw) * .004) calc(var(--bw) * .008) rgba(0,0,0,.35), 0 0 calc(var(--bw) * .018) rgba(255,190,60,.7), 0 0 0 0 rgba(255,196,70,.7); }
  50% { transform: scale(1.04); }
  100% { transform: scale(.94); box-shadow: inset 0 0 0 calc(var(--bw) * .004) rgba(255,214,110,.98), inset 0 0 0 calc(var(--bw) * .006) rgba(60,35,5,.55), inset 0 0 calc(var(--bw) * .014) rgba(255,200,80,.6), 0 0 0 calc(var(--bw) * .0018) rgba(60,35,5,.6), 0 calc(var(--bw) * .004) calc(var(--bw) * .008) rgba(0,0,0,.35), 0 0 calc(var(--bw) * .018) rgba(255,190,60,.7), 0 0 0 calc(var(--bw) * .026) rgba(255,196,70,0); } }
@keyframes chBreathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.82); opacity: .7; } }
.ch-sq.cap::after { box-shadow: inset 0 0 0 calc(var(--bw) * .004) rgba(40,10,0,.55), inset 0 0 0 calc(var(--bw) * .009) rgba(255,160,100,.95),
  0 0 calc(var(--bw) * .025) rgba(255,110,70,.6); animation: chBreathe 1.7s ease-in-out infinite; }

/* the look window (2026-10-18): larger, the boards and pieces drawn larger */
.ch-lk-box { width: min(760px, 100%); padding: 22px; }
.ch-lk-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.ch-lk { flex-direction: column; justify-content: center; gap: 8px; padding: 10px 8px; text-align: center; font-size: 12.5px; }
.ch-lk .ch-lk-prev { zoom: 1.75; }
@media (max-width: 600px) { .ch-lk-box { padding: 16px 12px; } .ch-lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ch-lk .ch-lk-prev { zoom: 1.5; } }

/* the looks window always under the site's bar (it was centred: a tall one went under the bar); where the bar is hidden, the whole height */
.ch-modal { padding-top: calc(var(--top) + 12px); }
.ch-lk-box { max-height: calc(100dvh - var(--top) - 28px); }
body.game-fs .ch-modal { padding-top: 16px; } body.game-fs .ch-lk-box { max-height: calc(100dvh - 32px); }
@media (orientation: landscape) and (max-height: 520px) { body[data-page="table"] .ch-modal { padding-top: 16px; } body[data-page="table"] .ch-lk-box { max-height: calc(100dvh - 32px); } }