.chess-area{min-height:480px;--light:#f0d9b5;--dark:#b58863;--accent:#fc0;--white-piece:#fff;--white-stroke:#222;--black-piece:#1a1a1a;--black-stroke:#ccc;--contrast:1;--piece-scale:.82;--piece-lift:-0.8em;--board-size:480px;--sq:60px;display:flex;flex-direction:column;border:1px solid #ccd5de;border-radius:.3rem;background:#fff;overflow:hidden}.chess-toolbar{display:flex;flex-wrap:nowrap;overflow:visible;position:relative;z-index:30;gap:.35rem;padding:.4rem .6rem;align-items:center;justify-content:center;min-height:2.2rem;z-index:10;background:#f3f6f9;border-bottom:1px solid #d4dde6}.chess-toolbar button,.chess-toolbar select{font:inherit;font-size:.78rem;padding:.22rem .55rem;border-radius:4px;border:1px solid #bcc8d4;background:#fff;color:#24313f;cursor:pointer;white-space:nowrap;transition:background .12s}.chess-toolbar button:hover,.chess-toolbar select:hover{background:#edf2f7}.chess-toolbar button:active{background:#dfe8f1}.chess-toolbar .spacer{flex:1;min-width:.5rem}.chess-toolbar label{font-size:.72rem;color:#5b6773;display:flex;align-items:center;gap:.3rem}.chess-toolbar input[type="range"]{width:4.2rem;accent-color:var(--accent)}.chess-toolbar .chess-timer-controls .timer-label{font-weight:600}.chess-toolbar .chess-looks{position:relative;z-index:40}.chess-toolbar .chess-looks .chess-looks-panel{display:none;position:absolute;right:0;top:calc(100% + 0.3rem);min-width:11.5rem;padding:.45rem;border-radius:.35rem;border:1px solid #d0d9e2;background:#fff;box-shadow:0 8px 20px rgba(20,30,40,0.16);z-index:20}.chess-toolbar .chess-looks .chess-looks-panel .looks-theme,.chess-toolbar .chess-looks .chess-looks-panel .looks-contrast{display:flex;align-items:center;justify-content:space-between;gap:.45rem;width:100%}.chess-toolbar .chess-looks .chess-looks-panel .looks-contrast{margin-top:.35rem}.chess-toolbar .chess-looks.open .chess-looks-panel{display:block}.chess-timer-bar{display:flex;justify-content:space-between;align-items:center;font-variant-numeric:tabular-nums;font-size:.85rem;padding:0 .6rem;height:1.85rem;background:#f8fafc;border-bottom:1px solid #e0e7ef}.chess-timer-bar .timer{padding:.15rem .5rem;border-radius:3px;font-weight:600;min-width:4.8rem;text-align:center}.chess-timer-bar .timer.active{background:var(--accent);color:#000}.chess-timer-bar .timer.white-timer{order:0}.chess-timer-bar .timer.black-timer{order:2}.chess-timer-bar .turn-indicator{order:1;font-size:.75rem;color:#5f6d7a;font-weight:600}.chess-board-wrap{display:grid;place-items:center;overflow:hidden;position:relative;z-index:1;min-height:0;padding:.3rem}.chess-board{display:grid;grid-template-columns:repeat(8, var(--sq));grid-template-rows:repeat(8, var(--sq));width:var(--board-size);height:var(--board-size);border:2px solid #4d5964;border-radius:2px;filter:contrast(var(--contrast));user-select:none;-webkit-user-select:none;position:relative;touch-action:none}.chess-sq{position:relative;display:grid;place-items:center;cursor:default;transition:outline .08s}.chess-sq.light{background:var(--light)}.chess-sq.dark{background:var(--dark)}.chess-sq::before,.chess-sq::after{position:absolute;font-size:calc(var(--sq) * 0.17);font-weight:600;opacity:.45;pointer-events:none;line-height:1}.chess-sq.rank-label::before{content:attr(data-rank);top:2px;left:3px}.chess-sq.file-label::after{content:attr(data-file);bottom:2px;right:3px}.chess-sq.light.rank-label::before,.chess-sq.light.file-label::after{color:var(--dark)}.chess-sq.dark.rank-label::before,.chess-sq.dark.file-label::after{color:var(--light)}.chess-sq.selectable{cursor:pointer}.chess-sq.selectable .chess-piece{filter:drop-shadow(0 0 calc(var(--sq) * 0.08) var(--accent));transition:filter .12s}.chess-sq.selectable:hover .chess-piece{filter:drop-shadow(0 0 calc(var(--sq) * 0.16) var(--accent))}.chess-sq.selected{outline:3px solid var(--accent);outline-offset:-3px;z-index:2}.chess-sq.legal-target::after{content:"" !important;position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(0,0,0,0.25);pointer-events:none;inset:0;margin:auto;z-index:1}.chess-sq.legal-capture::after{content:"" !important;position:absolute;inset:6%;border-radius:50%;border:calc(var(--sq) * 0.07) solid rgba(0,0,0,0.25);background:transparent;pointer-events:none;z-index:1}.chess-sq.last-from,.chess-sq.last-to{box-shadow:inset 0 0 0 999px rgba(255,204,0,0.28)}.chess-sq.dark.last-from,.chess-sq.dark.last-to{box-shadow:inset 0 0 0 999px rgba(255,204,0,0.2)}.chess-sq.in-check{background:radial-gradient(circle, #ff4444 0%, #cc0000 60%, transparent 100%)}.chess-sq.dragging .chess-piece{opacity:.25}.chess-piece{font-size:calc(var(--sq) * var(--piece-scale));line-height:1;text-align:center;display:inline-block;transform:translateY(var(--piece-lift));pointer-events:none;z-index:3;transition:font-size .15s}.chess-piece.white-piece{color:var(--white-piece);text-shadow:-1px -1px 0 var(--white-stroke),1px -1px 0 var(--white-stroke),-1px 1px 0 var(--white-stroke),1px 1px 0 var(--white-stroke),0 0 3px rgba(0,0,0,0.3)}.chess-piece.black-piece{color:var(--black-piece);text-shadow:-1px -1px 0 var(--black-stroke),1px -1px 0 var(--black-stroke),-1px 1px 0 var(--black-stroke),1px 1px 0 var(--black-stroke),0 0 3px rgba(255,255,255,0.15)}.chess-drag-ghost{position:fixed;pointer-events:none;z-index:1000;font-size:calc(var(--sq) * var(--piece-scale) * 1.15);line-height:1;opacity:.92;transition:none;will-change:transform;transform:translateY(var(--piece-lift))}.chess-drag-ghost.white-piece{color:var(--white-piece);text-shadow:-1px -1px 0 var(--white-stroke),1px -1px 0 var(--white-stroke),-1px 1px 0 var(--white-stroke),1px 1px 0 var(--white-stroke),0 4px 12px rgba(0,0,0,0.45)}.chess-drag-ghost.black-piece{color:var(--black-piece);text-shadow:-1px -1px 0 var(--black-stroke),1px -1px 0 var(--black-stroke),-1px 1px 0 var(--black-stroke),1px 1px 0 var(--black-stroke),0 4px 12px rgba(0,0,0,0.45)}.chess-bottom{display:flex;flex-direction:column;background:#f3f6f9;border-top:1px solid #d4dde6;max-height:8rem;overflow:hidden}.chess-bottom .chess-status{text-align:center;font-size:.8rem;padding:.2rem .5rem;color:#33414f;min-height:1.4rem}.chess-bottom .chess-notation{overflow-y:auto;padding:.2rem .5rem .3rem;font-size:.72rem;line-height:1.55;color:#41505f;font-variant-numeric:tabular-nums;scrollbar-width:thin;scrollbar-color:#90a1b2 transparent}.chess-bottom .chess-notation span{display:inline-block;margin-right:.3rem}.chess-bottom .chess-notation .move-num{color:#607182;min-width:1.8em}.chess-bottom .chess-notation .move{cursor:pointer;padding:.05rem .2rem;border-radius:2px}.chess-bottom .chess-notation .move:hover{background:#e3eaf1}.chess-bottom .chess-notation .move.current{background:#ccd8e6;color:#1f2a35}.chess-promo-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);display:grid;place-items:center;z-index:50}.chess-promo-overlay .chess-promo-choices{display:flex;gap:.3rem;background:#fff;padding:.5rem;border-radius:6px;border:2px solid var(--accent)}.chess-promo-overlay .chess-promo-choices button{font-size:calc(var(--sq) * 0.75);background:transparent;border:2px solid transparent;border-radius:4px;cursor:pointer;padding:.2rem .35rem;line-height:1;transition:border-color .1s,background .1s}.chess-promo-overlay .chess-promo-choices button:hover{border-color:var(--accent);background:#f1f5fa}@media screen and (max-width: 540px), screen and (max-height: 560px){.chess-bottom{max-height:4.2rem}.chess-toolbar{padding:.25rem .4rem;gap:.25rem}.chess-toolbar button,.chess-toolbar select{font-size:.68rem;padding:.15rem .35rem}}@media screen and (max-width: 420px){.chess-toolbar .chess-timer-controls span,.chess-toolbar .looks-theme span,.chess-toolbar .looks-contrast span{display:none}}