:root{--sq: max(60px, min(104px, calc(min(88vmin, 832px)/8) ));--gap: 14px;--board-pad: 6px;--rail-w-base: 420px;--rail-w: calc(var(--rail-w-base) * .67);--rail-right: clamp(24px, 4vw, 64px);--banner-h: 28px;--banner-offset: 0px;--flip-h: 40px;--panel-opacity: .8;--board-brightness: 1;--piece-brightness: 1;--rail-mobile-w: clamp(160px, 36vw, 220px)}body.has-dev-banner{--banner-offset: var(--banner-h)}.board-wrap{position:relative;z-index:2}*{box-sizing:border-box}html,body{height:100%}body{margin:0;color:#e9edf3;font:500 16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:radial-gradient(ellipse at center,#0006,#000000d9),url(/uploads/chess-background-tactics-2.png) center/cover no-repeat fixed;padding-top:calc(var(--banner-offset) + var(--flip-h) + 14px);overflow-x:hidden}@media (min-width: 1000px){body{overflow-y:hidden}}body:not(.game-running) #btn-resign{display:none!important}body:not(.game-running) #btn-offer-draw{display:none!important}.board-wrap{filter:brightness(var(--board-brightness))}.board .sq img{filter:brightness(var(--piece-brightness));transition:filter .15s ease}#cap-opp,#cap-you{min-height:28px;border-radius:10px;padding:6px;display:flex;gap:6px;align-items:center}#cap-opp{background:#ffffff2e}#cap-you{background:#00000038}.hidden{display:none!important}.muted{opacity:.7;font-size:12px}.spacer{flex:1 1 auto}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;padding:8px 12px;border-radius:10px;background:#ffffff1a;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.btn:hover{background:#ffffff29}.btn.ghost{background:transparent}.btn.pill{border-radius:999px;padding:9px 14px;width:120px;text-align:left}.btn.block{width:100%;text-align:left}.btn.xs{padding:4px 8px;border-radius:8px;font-size:12px}.btn.primary{background:#2a84ff}.btn.primary:hover{background:#2f93ff}.btn.chip{border-radius:999px;padding:6px 10px}.btn.danger{background:#b53a3a}.btn.danger:hover{background:#c34646}.btn.active,.tc-cats .btn.active,.tc-grid .btn.active{outline:2px solid #2a84ff;outline-offset:2px;background:transparent}.chip{display:inline-flex;align-items:center;gap:6px;background:#ffffff14;border-radius:999px;padding:6px 10px}.chip input{accent-color:#2a84ff}.chip:has(input:checked){outline:2px solid #2a84ff;outline-offset:2px;background:transparent}.dev-banner{position:fixed;top:0;left:0;right:0;height:var(--banner-h);display:flex;align-items:center;justify-content:center;background:#bb1e2b;color:#fff;z-index:1000;font-weight:700;letter-spacing:.2px}.flipbar{position:fixed;top:var(--banner-offset);left:0;right:0;height:var(--flip-h);display:flex;align-items:center;justify-content:center;z-index:900}.flipbar .resign{position:absolute;right:var(--rail-right)}.left-rail{position:fixed;top:calc(var(--banner-offset) + var(--flip-h) + 24px);left:18px;display:grid;gap:10px;z-index:10}.stage{position:relative;max-width:1600px;margin:0 auto;min-height:calc(100vh - var(--banner-offset) - var(--flip-h) - 14px)}.board-wrap{width:calc(8 * var(--sq));margin:0 auto;padding:var(--board-pad);border-radius:14px;filter:brightness(var(--board-brightness))}.board{border-radius:10px;overflow:hidden;box-shadow:0 10px 40px #00000059}.sq{position:relative}.sq.light{background:#e7cf9a}.sq.dark{background:#8b6436}.sq img{width:100%;height:100%;object-fit:contain;filter:brightness(var(--piece-brightness))}.coord{position:absolute;color:#0009;font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,.4)}.coord.rank{top:4px;left:4px}.coord.file{right:4px;bottom:4px}.sidepanel{position:absolute;right:var(--rail-right);top:calc(4 * var(--sq) + var(--board-pad));transform:translateY(-50%);width:var(--rail-w);padding:14px 16px;border-radius:14px;background:rgba(13,18,25,var(--panel-opacity));box-shadow:0 10px 40px #0006;z-index:5}.card{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.clock-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;font-weight:700}.clock-row .label{opacity:.95}.clock-row .value{font-weight:800;line-height:1;font-size:clamp(28px,3.6vw,48px)}.clock-row .value.flash{animation:clockFlash 1s steps(2,start) infinite}@keyframes clockFlash{0%{color:#fff;transform:scale(1);text-shadow:none}50%{color:#ff6a6a;transform:scale(1.06);text-shadow:0 0 12px rgba(255,0,0,.45)}to{color:#fff;transform:scale(1);text-shadow:none}}.captures{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0 10px;min-height:28px}.captures img{width:36px;height:36px;object-fit:contain;opacity:.95}.moves{display:flex;flex-direction:column;gap:8px}.moves-head{display:flex;align-items:center;gap:8px}.moves-pre{flex:1 1 auto;max-height:clamp(140px,38vh,360px);overflow:auto;padding:10px;border-radius:8px;background:#ffffff0f;color:#e9edf3}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:950;background:#0006}.overlay-card{width:min(620px,96vw);padding:16px;border-radius:12px;background:#0d1219eb;box-shadow:0 12px 42px #00000073;display:grid;gap:12px;text-align:center}.overlay-title{font-size:clamp(22px,2.4vw,28px);font-weight:800}.overlay-actions{display:flex;gap:8px;justify-content:center}.previewbar{position:fixed;left:0;right:0;top:calc(var(--banner-offset) + var(--flip-h));display:flex;align-items:center;gap:8px;justify-content:center;padding:8px;z-index:800}.sheet{position:fixed;top:calc(var(--banner-offset) + var(--flip-h) + 16px);left:16px;width:min(420px,92vw);max-height:min(80vh,700px);background:#0d1219eb;color:#e9edf3;border-radius:14px;padding:12px;z-index:20;box-shadow:0 10px 40px #0006;display:grid;gap:12px}.sheet-head{display:flex;align-items:center;gap:8px}.sheet-head h3{margin:0;font-size:16px}.sheet-foot{display:flex;justify-content:flex-end}.section{display:grid;gap:8px}.label{font-weight:700;opacity:.95}.row{display:flex;gap:8px;align-items:center}.row.wrap{flex-wrap:wrap}.tc-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.tc-corr{display:flex;align-items:center;gap:8px}.stack{display:grid;gap:10px}.panel{display:grid;gap:8px}.slider-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}@media (max-width: 1100px){.sidepanel{position:static;right:auto;transform:none;margin:12px auto 0;width:min(92vw,480px)}body{overflow-y:auto}}.review-controls{display:flex;gap:8px;justify-content:center;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);margin-top:10px}.board{width:calc(8 * var(--sq))!important;height:calc(8 * var(--sq))!important;display:grid!important;grid-template-columns:repeat(8,var(--sq))!important;grid-template-rows:repeat(8,var(--sq))!important;border-radius:10px;overflow:hidden;box-shadow:0 10px 40px #00000059;filter:brightness(var(--board-brightness))}.sq{aspect-ratio:1/1}.moves-list{display:grid;grid-template-columns:1fr;row-gap:6px;column-gap:12px;max-height:clamp(180px,40vh,420px);overflow-y:auto;padding:8px;border-radius:8px;background:#ffffff0f}@media (min-width:1200px){.moves-list{grid-template-columns:1fr 1fr}}.move-row{display:grid;grid-template-columns:32px 1fr 1fr;gap:8px;padding:2px 0}.move-no{opacity:.8;text-align:right;font-weight:600}.move-white,.move-black{text-align:left}#btn-resign{display:none!important}body.game-running #btn-resign{display:inline-flex!important}.flipbar #flip-board{border-radius:999px;padding:9px 14px;width:auto;text-align:left}.flipbar .btn,.left-rail .btn{font-size:18px}.captures .cap{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;line-height:36px;font-size:24px}#btn-offer-draw{margin-left:3px}#btn-offer-draw:disabled{opacity:.45;cursor:not-allowed}#mobile-underboard{display:none}@media (max-width: 768px){body.mobile-locked{padding-top:calc(var(--banner-offset) + 14px)}.flipbar.is-mobile{position:static;height:auto;padding:0;justify-content:flex-start;gap:8px;margin:10px 0 0 16px}body.mobile-locked .flipbar.is-mobile{display:none!important}#mobile-underboard{display:flex;gap:12px;align-items:flex-start;padding:8px 16px 0}.left-rail.is-mobile{position:static;margin:0;display:grid;grid-auto-flow:row;gap:8px;width:var(--rail-mobile-w)}.left-rail.is-mobile .btn,.left-rail.is-mobile #flip-board{width:100%}.left-rail.is-mobile #btn-offer-draw{order:1}.left-rail.is-mobile #flip-board{order:2}.left-rail.is-mobile #btn-play-again{order:3}.left-rail.is-mobile #btn-new-game{order:4}.left-rail.is-mobile #btn-prefs{order:5}body.mobile-locked .sidepanel{position:static;transform:none;margin:0 0 0 auto;width:min(70vw,400px);flex:1 1 auto}@media (max-width: 420px){#mobile-underboard{flex-direction:column}.left-rail.is-mobile{width:100%}body.mobile-locked .sidepanel{width:100%;margin:12px 0 0}}}