/* Interactive chess playbook for maquette-fgje-oddball-match.html */
.game-shell{background:#faf9f2;border:1px solid #d5d3c8;box-shadow:0 18px 48px #142c1c0e;color:var(--ink);overflow:hidden}.game-toolbar{min-height:68px;padding:13px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #e3e2d9}.game-toolbar-title{display:flex;align-items:center;gap:11px}.live-dot{width:8px;height:8px;border-radius:50%;background:#37a06b;box-shadow:0 0 0 4px #37a06b1a}.game-toolbar-title strong,.notation-heading strong{display:block;font:9px var(--mono);letter-spacing:.12em;color:#284b36}.game-toolbar-title small{display:block;margin-top:4px;font-size:9px;color:#7e887e}.game-actions{display:flex;gap:7px;align-items:center}.game-actions button{border:1px solid #d5d9ce;background:transparent;color:#304b38;padding:9px 11px;font:8px var(--mono);letter-spacing:.03em;cursor:pointer;transition:.2s}.game-actions button:hover{border-color:var(--pitch);background:#e9eddf}.game-actions .action-demo{background:var(--lime);border-color:var(--lime);color:var(--pitch);font-weight:500}.game-actions .action-demo:hover{background:#c6d844}.game-actions button:disabled{opacity:.45;cursor:not-allowed}.game-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);gap:0}.board-panel{padding:21px clamp(12px,3.5vw,36px) 17px;border-right:1px solid #e3e2d9}.player-bar{height:39px;display:flex;align-items:center;gap:9px}.player-token{width:27px;height:27px;display:grid;place-items:center;font:20px Georgia;border-radius:50%}.black-token{background:#183a29;color:#f5f2e7}.white-token{background:#e5dfcf;color:#1b3a2a}.player-info b{font-size:10px;color:#253b2c}.player-info small{display:block;font-size:8px;color:#8a9287;margin-top:2px}.player-turn{width:7px;height:7px;background:#51a267;border-radius:50%;opacity:0;margin-left:auto}.player-turn.active{opacity:1;box-shadow:0 0 0 3px #51a26725}.player-side{font:7px var(--mono);letter-spacing:.1em;color:#8a9287;margin-left:4px}.board-shell{position:relative;padding-left:18px}.rank-coords{position:absolute;left:2px;top:0;bottom:0;display:grid;grid-template-rows:repeat(8,1fr);align-items:center;color:#748170;font:8px var(--mono)}.chessboard{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;aspect-ratio:1;border:5px solid #214530;box-shadow:0 8px 23px #0e241614}.chess-square{border:0;position:relative;display:grid;place-items:center;padding:0;aspect-ratio:1;cursor:pointer;color:#172f23;touch-action:manipulation;font-size:clamp(22px,4.2vw,47px);line-height:1}.chess-square.light{background:#f2efdf}.chess-square.dark{background:#9ab18f}.chess-square:hover{filter:brightness(1.08)}.chess-square.selected{background:#d3e657!important;box-shadow:inset 0 0 0 3px #789632;z-index:1}.chess-square.legal:after{content:'';position:absolute;width:25%;aspect-ratio:1;border-radius:50%;background:#173e2d70}.chess-square.legal.capture:after{width:78%;background:transparent;border:4px solid #173e2d6b}.chess-square.last-move{box-shadow:inset 0 0 0 999px #e9dd7070}.chess-square.in-check{background:#e77262!important}.chess-piece{position:relative;z-index:1;display:block;filter:drop-shadow(0 2px 1px #07140d50);transition:transform .18s cubic-bezier(.2,.8,.2,1)}.chess-square:hover .chess-piece{transform:translateY(-3px)}.chess-piece.white-piece{color:#faf8e9;text-shadow:0 1px 1px #183a29,0 2px 3px #183a2990}.chess-piece.black-piece{color:#163725;text-shadow:0 1px 0 #dfe6cf}.chess-square:focus-visible{outline:3px solid var(--red);outline-offset:-3px;z-index:4}.file-coords{margin-left:18px;display:grid;grid-template-columns:repeat(8,1fr);text-align:center;color:#748170;font:8px var(--mono);padding-top:5px}.game-sidebar{padding:20px 19px;display:flex;flex-direction:column;gap:13px;background:#f5f4ec}.status-card{padding:15px;background:var(--pitch);color:var(--cream);min-height:142px}.status-top{display:flex;justify-content:space-between;align-items:center}.status-icon{font-size:18px;color:var(--lime)}.status-label{font:7px var(--mono);letter-spacing:.13em;color:#bdcbb9}.status-card h3{font:700 23px/.95 var(--display);text-transform:uppercase;color:var(--lime);margin:13px 0 7px}.status-card p{font-size:9px;line-height:1.6;color:#d1dbce;margin:0;max-width:240px}.status-rule{display:flex;justify-content:space-between;border-top:1px solid #f3f0df36;margin-top:12px;padding-top:9px;font:7px var(--mono);letter-spacing:.1em;color:#c7d4c3}.notation-card{border:1px solid #deded3;background:#fffef8;min-height:151px;max-height:202px;display:flex;flex-direction:column}.notation-heading{padding:11px 12px;border-bottom:1px solid #e6e6dc;display:flex;justify-content:space-between;align-items:center}.notation-heading span{font:7px var(--mono);color:#8b9387}.notation-list{list-style:none;margin:0;padding:7px 10px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:2px 8px;font:9px var(--mono)}.notation-list li{padding:5px 4px;border-radius:2px;color:#435444}.notation-list li:nth-child(4n+2),.notation-list li:nth-child(4n+3){background:#f0f2e9}.notation-list .notation-empty{grid-column:1/-1;color:#858d80;font:9px var(--sans);line-height:1.5}.notation-list .move-ply{color:#8a9386;width:22px;display:inline-block}.game-tip{padding:11px 13px;background:#e9eddc;border-left:3px solid var(--lime)}.game-tip span{font:7px var(--mono);letter-spacing:.13em;color:#547044}.game-tip p{font-size:8px;line-height:1.6;color:#61705e;margin:5px 0 0}.game-footer{min-height:34px;border-top:1px solid #e3e2d9;display:flex;justify-content:space-between;align-items:center;padding:7px 17px;font:7px var(--mono);letter-spacing:.08em;color:#7c8779}.game-footer span:first-child{display:flex;align-items:center;gap:7px}.game-footer i{width:6px;height:6px;border-radius:50%;background:#47a36a}.promotion-dialog{position:fixed;inset:0;z-index:100;background:#0e1e15a6;display:grid;place-items:center;padding:20px}.promotion-dialog[hidden]{display:none}.promotion-card{background:var(--cream);padding:22px;box-shadow:0 18px 50px #0004;max-width:330px;width:100%}.promotion-card h3{font:700 25px var(--display);text-transform:uppercase;color:var(--pitch);margin:0 0 7px}.promotion-card p{font-size:11px;color:#667363}.promotion-choices{display:flex;gap:8px}.promotion-choices button{flex:1;border:1px solid #cbd2c2;background:#fffdf5;padding:10px;cursor:pointer;font-size:28px;color:var(--pitch)}.promotion-choices button:hover{background:var(--lime)}
@media(max-width:800px){.game-layout{grid-template-columns:1fr}.board-panel{border-right:0;border-bottom:1px solid #e3e2d9;padding:13px clamp(10px,5vw,30px)}.game-sidebar{display:grid;grid-template-columns:1fr 1fr;padding:13px;gap:9px}.status-card{grid-row:span 2}.game-tip{align-self:stretch}.notation-card{min-height:118px}.chess-square{font-size:clamp(24px,8vw,43px)}.game-footer{flex-wrap:wrap;gap:8px}}
@media(max-width:500px){.game-toolbar{align-items:flex-start;flex-direction:column;padding:13px}.game-actions{width:100%;display:grid;grid-template-columns:auto auto 1fr}.game-actions button{padding:9px 8px;font-size:7px}.game-sidebar{grid-template-columns:1fr}.status-card{grid-row:auto;min-height:unset}.status-card p{max-width:none}.notation-card{max-height:145px}.game-footer{font-size:6px;padding:8px}.chessboard{border-width:4px}.board-shell{padding-left:14px}.file-coords{margin-left:14px}.rank-coords{left:0}.player-side{font-size:6px}}
