#eg-surface.chess-surface{touch-action:auto;container-type:inline-size}
.eg-game:has(#eg-surface.chess-surface){max-width:860px}
.cs-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* The board stays square and leaves room for the player bars and buttons on short screens. */
.cs-wrap{position:relative;width:100%;max-width:min(560px,62vh);min-width:0;margin:6px auto 0}
/* Fullscreen scales the arena only when everything fits, so the board leaves room for the rest of the game. */
html.gibo-fullscreen .cs-wrap{max-width:min(560px,calc(100vh - 330px))}
.cs-panel{min-width:0}
.cs-board{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px #4b5563,0 6px 18px rgb(16 24 40/.18);touch-action:none;user-select:none;-webkit-user-select:none}
.cs-sq{position:relative;display:block;min-width:0;aspect-ratio:1;padding:0;margin:0;border:0;border-radius:0;font:inherit;cursor:pointer;touch-action:none}
.cs-sq.light{background:#e9edf2;color:#71819a}
.cs-sq.dark{background:#8193ab;color:#eef1f5}
.cs-sq.last{background-image:linear-gradient(#f4c74a70,#f4c74a70)}
.cs-sq.selected{background-image:linear-gradient(#e8590c5c,#e8590c5c)}
.cs-sq.check{background-image:radial-gradient(circle,#e5383bf2 0,#e5383b99 35%,#e5383b00 72%)}
.cs-sq.target::after{content:'';position:absolute;inset:37%;border-radius:50%;background:#15171c40;pointer-events:none}
.cs-sq.target.capture::after{inset:3%;background:none;border:5px solid #15171c40}
.cs-sq:focus-visible{outline:3px solid var(--accent-strong);outline-offset:-3px;z-index:2}
.cs-sq.cs-lift{z-index:3}
.cs-rank,.cs-file{position:absolute;font-size:clamp(8px,1.7vw,11px);font-weight:700;line-height:1;pointer-events:none}
.cs-rank{top:4%;left:5%}
.cs-file{right:5%;bottom:4%}
.cs-piece{position:relative;display:block;width:100%;height:100%;pointer-events:none;stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.cs-piece.w,.cs-mini.w{fill:#fdfdfd;stroke:#1f2329;color:#1f2329}
.cs-piece.b,.cs-mini.b{fill:#2b3038;stroke:#0d0f13;color:#dfe3e8}
.cs-piece .cs-line,.cs-mini .cs-line{fill:none;stroke:currentColor}
.cs-piece .cs-dot,.cs-mini .cs-dot{fill:currentColor;stroke:none}
.cs-piece.cs-dragging{z-index:4;filter:drop-shadow(0 6px 6px rgb(0 0 0/.3));cursor:grabbing}
/* Player bars above and below the board: name, captured pieces and the material lead. */
.cs-player{display:flex;align-items:center;gap:8px;min-height:34px;padding:4px 2px;font-size:13px;color:var(--ink-2);text-align:left}
.cs-player .cs-name{flex:none;font-weight:700;color:var(--ink)}
.cs-player.cs-turn .cs-name::before{content:'';display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--accent);vertical-align:middle}
.cs-taken{display:flex;flex-wrap:wrap;align-items:center;min-width:0}
.cs-mini{width:19px;height:19px;margin-right:-6px;stroke-width:4;stroke-linejoin:round}
.cs-lead{margin-left:8px;font-weight:700;color:var(--muted)}
/* Promotion choice over the board. */
.cs-promotion{position:absolute;top:50%;left:50%;z-index:5;transform:translate(-50%,-50%);padding:14px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-lg);text-align:center}
.cs-promotion p{margin:0 0 8px;font-size:13px;font-weight:700}
.cs-promotion div{display:flex;gap:6px}
.cs-promotion div button{width:clamp(48px,11vw,64px);height:clamp(48px,11vw,64px);padding:4px;border:1px solid var(--line-strong);border-radius:10px;background:#e9edf2;cursor:pointer}
.cs-promotion div button:hover{background:#dbe1e8}
.cs-promotion .cs-cancel{margin-top:10px;padding:6px 10px;border:0;background:none;color:var(--accent-strong);font-weight:600;cursor:pointer}
.chess-surface .eg-toolbar{margin-top:14px}
.chess-surface .eg-toolbar button{min-height:44px}
/* Move list. */
.cs-record{max-width:560px;margin:8px auto 0;text-align:left}
.cs-record h3{margin:0 0 6px;font-size:13px;color:var(--ink-2)}
.cs-record p{margin:0;font-size:13px;color:var(--muted)}
.cs-moves{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 10px;max-height:116px;margin:0;padding:8px 10px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);list-style:none;font-size:14px;font-variant-numeric:tabular-nums}
.cs-moves li{display:grid;grid-template-columns:30px 1fr 1fr;gap:4px;white-space:nowrap}
.cs-moves .cs-n{color:var(--muted)}
.cs-moves .cs-current{font-weight:700;color:var(--accent-strong)}
/* With room to spare, the buttons and the move list sit beside the board. */
@container (min-width:760px){
 .cs-layout{display:grid;grid-template-columns:minmax(0,560px) 220px;gap:24px;justify-content:center;align-items:center}
 .cs-layout .cs-wrap{margin:0}
 .cs-panel .eg-toolbar{flex-direction:column;align-items:stretch;margin:0}
 .cs-panel .cs-record{margin-top:16px}
 .cs-panel .cs-moves{grid-template-columns:1fr;max-height:min(300px,36vh)}
}
@media(max-width:600px){.cs-sq.target.capture::after{border-width:3px}.cs-player{font-size:12px;min-height:30px}.cs-mini{width:16px;height:16px}}