:root{ --board-light:#eeeed2; --board-dark:#769656; --square-size:min(12.5vw, 72px); --border:#222; --text:#eaeaea; --bg:#0f1115; --accent:#4a90e2; --last-move:rgba(255,215,0,.45); --legal:rgba(66,133,244,.25); --check:rgba(231,76,60,.6); } /* Board theme presets (apply on ) */ .theme-green{ --board-light:#eeeed2; --board-dark:#769656 } .theme-blue{ --board-light:#dee7ff; --board-dark:#4a78bf } .theme-brown{ --board-light:#f0d9b5; --board-dark:#b58863 } .theme-gray{ --board-light:#e8e8e8; --board-dark:#7d7d7d } .theme-purple{ --board-light:#efe5ff; --board-dark:#7d5ea6 } .theme-orange{ --board-light:#fff1db; --board-dark:#d19a66 } .theme-wood{ --board-light:#f5e6c8; --board-dark:#a0784a } .theme-kids{ --board-light:#f6faff; --board-dark:#b9d8ff } .theme-pastel{ --board-light:#fef6ff; --board-dark:#cbb7f0 } .theme-contrast{ --board-light:#ffffff; --board-dark:#333333 } .theme-chessgyan{ --board-light:#E6F0FF; --board-dark:#5AA5FF } /* Soft "forest" theme: gentle green for long kid sessions */ .theme-forest{ --board-light:#F5FBF5; --board-dark:#6E9D6E } /* Slate theme: modern blue-gray, no green/brown */ .theme-slate{ --board-light:#F7F9FC; --board-dark:#4C5D73 } /* Sunrise theme: warm, kid-friendly yellow board */ .theme-sunrise{ --board-light:#FFF7DF; --board-dark:#D9A63A } *{box-sizing:border-box} html,body{height:100%; overflow:hidden} body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; overflow:hidden} .app{display:grid;grid-template-columns:280px 1fr 280px;gap:16px;height:100vh;padding:16px;overflow:hidden} .panel{background:#161a22;border:1px solid #1f2530;border-radius:8px;padding:12px} .panel{max-height:calc(100vh - 64px); overflow:auto} .section{margin-bottom:12px} .row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0} button{background:#252b38;color:#eaeef2;border:1px solid #2f3747;border-radius:6px;padding:8px 10px;cursor:pointer} button:hover{background:#2b3241} .label{opacity:.8;margin-bottom:6px} .theme-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%} .theme-btn{display:flex;align-items:center;gap:8px;border:1px solid #2f3747;background:#1a1f2a;color:#eaeef2;border-radius:8px;padding:6px 8px;cursor:pointer} .theme-btn:hover{background:#222838} .theme-btn.active{outline:2px solid #4a90e2; outline-offset:2px} .swatch{display:inline-grid;grid-auto-flow:column;gap:2px;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.1)} .swatch span{display:block;width:18px;height:18px} .moves{min-height:120px;max-height:40vh;overflow:auto;border:1px solid #232a36;border-radius:6px;padding:8px} .moves .ply{display:inline-block;margin:0 6px} .center{display:flex;align-items:center;justify-content:center} .board-wrap{position:relative;margin:0 auto;width:min(100%,min(90vmin,720px));aspect-ratio:1/1;border-radius:1px;overflow:hidden} .board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));border:none;border-radius:1px;overflow:hidden;background:transparent;contain:layout paint;touch-action:none;will-change:transform;backface-visibility:hidden;transform:translateZ(0)} .square{position:relative;display:flex;align-items:center;justify-content:center;font-size:calc(0.7 * var(--square-size));line-height:1;user-select:none} .square.light{background:var(--board-light)} .square.dark{background:var(--board-dark)} .piece{pointer-events:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateZ(0); width:100%; height:100%; z-index:1; backface-visibility:hidden; will-change:transform; display:flex; align-items:center; justify-content:center} .piece-img{display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain} .piece-glyph{display:block; font-size:calc(0.82 * var(--square-size)); line-height:1; text-shadow: 0 1px 0 rgba(0,0,0,.25)} .square{justify-content:center;align-items:center} /* Drag visuals */ .drag-ghost{position:fixed;pointer-events:none;z-index:9999;width:60px;height:60px;will-change:transform} .dragging-piece{position:fixed !important; pointer-events:none !important; z-index:10000 !important; transform:translate(-50%,-50%) !important} /* Origin square during drag */ .square.drag-origin::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background: rgba(66,133,244,0.20)} .square.dark.drag-origin::before{background: rgba(66,133,244,0.24)} /* Hovered target square during drag */ .square.drag-over::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background: rgba(66,133,244,0.18)} .square.dark.drag-over::before{background: rgba(66,133,244,0.22)} /* Cursor parity */ .square[data-has-piece="1"], .square[data-has-piece="1"] * { cursor: grab; } body.dragging-cursor, body.dragging-cursor * { cursor: grabbing !important; } .coordinate{ position:absolute; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,sans-serif; font-weight:600; letter-spacing:0.05em; text-transform:lowercase; line-height:1; font-size:clamp(9px, calc(var(--square-size) * 0.24), 15px); text-shadow:0 1px 2px rgba(0,0,0,0.35); opacity:0.92; } .coordinate.rank{left:4px;top:4px} .coordinate.file{right:4px;bottom:4px} .square.light .coordinate{color:#1c2833;text-shadow:0 1px 0 rgba(255,255,255,0.5);} .square.dark .coordinate{color:rgba(255,255,255,0.92);text-shadow:0 1px 2px rgba(0,0,0,0.45);} @media (max-width:768px){ .coordinate{ font-size:clamp(8px, calc(var(--square-size) * 0.2), 12px); letter-spacing:0.04em; } .coordinate.rank{left:3px;top:3px} .coordinate.file{right:3px;bottom:3px} } @media (max-width:480px){ .coordinate{ font-size:clamp(7px, calc(var(--square-size) * 0.18), 10px); letter-spacing:0.03em; } .coordinate.rank{left:2px;top:2px} .coordinate.file{right:2px;bottom:2px} } /* Allow embedding/viewer to hide coordinates like original */ body.viewer.coords-hidden .coordinate { display: none !important; } /* Move highlighting (chess.com-like) */ /* Last move as translucent overlay (preserves board colors) */ .square.last::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: rgba(255, 215, 0, 0.22); } .square.dark.last::before{ background: rgba(255, 215, 0, 0.28); } /* Selected from-square overlay (subtle blue) */ .square.selected::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: rgba(66,133,244,0.22); } .square.dark.selected::before{ background: rgba(66,133,244,0.26); } /* Small centered dot on empty legal target */ .square.legal::after{ content:''; position:absolute; inset:0; margin:auto; width:24%; height:24%; border-radius:50%; background: rgba(0,0,0,0.28); z-index:2; pointer-events:none; } /* On dark squares use a lighter dot for contrast */ .square.dark.legal::after{ background: rgba(255,255,255,0.28); } /* Capture ring on occupied target */ .square.capture::after{ content:''; position:absolute; inset:0; margin:auto; width:84%; height:84%; border-radius:50%; border:4px solid rgba(0,0,0,0.28); background: transparent; z-index:2; pointer-events:none; } .square.dark.capture::after{ border-color: rgba(255,255,255,0.28); } /* Check indicator on king */ .square.check{ box-shadow: inset 0 0 0 4px var(--check) } .square.last{ position:relative } .square.last::before{ content:''; position:absolute; inset:0; background: rgba(246, 246, 105, 0.32); mix-blend-mode: normal } .square.selected{ position:relative } .square.selected::before{ content:''; position:absolute; inset:0; background: rgba(66, 133, 244, 0.22); mix-blend-mode: normal } html.theme-chessgyan .square.last::before{ background: rgba(90, 165, 255, 0.24); mix-blend-mode: normal } html.theme-chessgyan .square.dark.last::before{ background: rgba(72, 139, 230, 0.26); mix-blend-mode: normal } html.theme-chessgyan .square.selected::before{ background: rgba(45, 140, 255, 0.22); mix-blend-mode: normal } html.theme-chessgyan .square.dark.selected::before{ background: rgba(45, 140, 255, 0.26); mix-blend-mode: normal } html.theme-forest .square.last::before{ background: rgba(110, 157, 110, 0.22); mix-blend-mode: normal } html.theme-forest .square.dark.last::before{ background: rgba(88, 130, 88, 0.24); mix-blend-mode: normal } html.theme-forest .square.selected::before{ background: rgba(76, 120, 76, 0.20); mix-blend-mode: normal } html.theme-forest .square.dark.selected::before{ background: rgba(76, 120, 76, 0.24); mix-blend-mode: normal } html.theme-slate .square.last::before{ background: rgba(132, 158, 204, 0.22); mix-blend-mode: normal } html.theme-slate .square.dark.last::before{ background: rgba(112, 138, 188, 0.24); mix-blend-mode: normal } html.theme-slate .square.selected::before{ background: rgba(104, 136, 200, 0.20); mix-blend-mode: normal } html.theme-slate .square.dark.selected::before{ background: rgba(104, 136, 200, 0.24); mix-blend-mode: normal } html.theme-sunrise .square.last::before{ background: rgba(245, 189, 72, 0.24); mix-blend-mode: normal } html.theme-sunrise .square.dark.last::before{ background: rgba(225, 172, 60, 0.26); mix-blend-mode: normal } html.theme-sunrise .square.selected::before{ background: rgba(235, 180, 68, 0.20); mix-blend-mode: normal } html.theme-sunrise .square.dark.selected::before{ background: rgba(235, 180, 68, 0.24); mix-blend-mode: normal } /* Right-click square marking (persistent user mark) */ .square.rmark{ box-shadow: inset 0 0 0 6px rgba(243, 156, 18, 0.65) } .square.dark.rmark{ box-shadow: inset 0 0 0 6px rgba(243, 156, 18, 0.78) } .overlay{position:absolute;inset:0;pointer-events:none;border-radius:1px;overflow:hidden} .promotion-menu{position:fixed;z-index:2000;display:flex;align-items:stretch;justify-content:center;pointer-events:auto} .promotion-items{display:flex;flex-direction:column;gap:0;border:1px solid #c9d1db;border-radius:8px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.25);background:#ffffff} .promotion-item{padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;background:#ffffff;border:0} .promotion-item:hover{background:#f2f5f9} .promotion-item img{max-width:80%;max-height:80%;image-rendering:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))} .promotion-glyph{display:block; font-size:calc(0.72 * var(--square-size)); line-height:1} .captures{display:grid;gap:4px} .modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000} .modal-content{background:#161a22;border:1px solid #2a3240;border-radius:8px;padding:16px;width:min(520px,92vw)} .modal-content h3{margin:0 0 10px 0} .modal-content .row label{min-width:64px;opacity:.85} .modal-content .row select{flex:1;min-width:160px;background:#0f131a;color:#e6ebf0;border:1px solid #263045;border-radius:6px;padding:8px} .modal-content .row button{padding:8px 12px} textarea,input{width:100%;background:#0f131a;color:#e6ebf0;border:1px solid #263045;border-radius:6px;padding:10px} /* Viewer layout */ html.viewer-root .panel{display:none} html.viewer-root .app{grid-template-columns:1fr;padding:0} html.viewer-root .board-wrap{max-width:700px} /* Mobile UI */ .mobile-bar{display:none} .mobile-bar .title{display:none} .mobile-bar button{display:none} /* Floating hamburger (hidden on desktop) */ .hamburger{position:fixed;top:12px;left:12px;z-index:1600;background:#252b38;color:#eaeef2;border:1px solid #2f3747;border-radius:8px;padding:10px 12px;display:none} .hamburger:active{transform:scale(0.98)} /* Drawer occupies full height (no header) */ .mobile-drawer{position:fixed;top:0;left:0;height:100vh;width:86vw;max-width:360px;transform:translateX(-100%);transition:transform .2s ease;z-index:1500;background:#0f1115;border-right:1px solid #1f2530;overflow:auto;padding:10px} body.mobile-open .mobile-drawer{transform:none} .drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1400;display:none} body.mobile-open .drawer-backdrop{display:block} @media (max-width: 992px) { .hamburger{display:block} .app{grid-template-columns:1fr} .panel{margin:10px} } @media (max-width: 768px) { .app{ padding:0; gap:0; } .center{ width:100%; margin:0; padding:0; justify-content:center; } .board-wrap{ width:100vw; max-width:100vw; border-radius:1px; } }