:root{--sq-light: #F0D9B5;--sq-dark: #B58863;--sq-selected: #829769;--sq-valid-move: rgba(0, 0, 0, .25);--sq-valid-capture: rgba(0, 0, 0, .25);--sq-last-move-light: #CDD16A;--sq-last-move-dark: #AAA23A;--sq-check: rgba(255, 0, 0, .6);--panel-bg: #302E2B;--panel-text: #FFFFFF;--board-size: min(100vw, 70vh)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#1a1a1a}body{font-family:system-ui,-apple-system,sans-serif;color:#fff;-webkit-text-size-adjust:100%}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;height:100dvh;gap:0;overflow:hidden}.hidden{display:none!important}#board-container{width:var(--board-size);height:var(--board-size);position:relative;flex-shrink:0}#board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;height:100%;border:3px solid #000;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.square{display:flex;align-items:center;justify-content:center;font-size:clamp(2rem,8vmin,4.5rem);cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;line-height:1}.square.light{background:var(--sq-light)}.square.dark{background:var(--sq-dark)}.square.selected{background:var(--sq-selected)!important}.square.last-move.light{background:var(--sq-last-move-light)!important}.square.last-move.dark{background:var(--sq-last-move-dark)!important}.square.in-check{background:radial-gradient(ellipse at center,var(--sq-check) 0%,var(--sq-check) 25%,transparent 90%)!important}.square.valid-move:after{content:"";position:absolute;width:28%;height:28%;border-radius:50%;background:var(--sq-valid-move);pointer-events:none}.square.valid-move.has-piece:after{width:88%;height:88%;background:transparent;border:5px solid var(--sq-valid-capture);border-radius:50%}.piece{pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.3)}.piece.white-piece{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 1px 3px rgba(0,0,0,.4)}.piece.black-piece{color:#000;text-shadow:0 1px 2px rgba(0,0,0,.2)}.square .label{position:absolute;font-size:.55rem;font-weight:700;font-family:system-ui,sans-serif;opacity:.7;pointer-events:none;line-height:1}.square .label-file{bottom:2px;right:3px}.square .label-rank{top:2px;left:3px}.square.light .label{color:var(--sq-dark)}.square.dark .label{color:var(--sq-light)}.drag-ghost{position:fixed;pointer-events:none;z-index:1000;font-size:clamp(3rem,10vmin,6rem);opacity:.85;transform:translate(-50%,-50%);text-shadow:-1px -1px 0 rgba(0,0,0,.3),1px 1px 0 rgba(0,0,0,.3)}.info-panel{width:var(--board-size);padding:6px 12px;background:var(--panel-bg);display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;flex-shrink:0}.info-panel.rotated{transform:rotate(180deg)}.player-section{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.turn-indicator{width:10px;height:10px;border-radius:50%;background:#555;flex-shrink:0;transition:background .3s,box-shadow .3s}.turn-indicator.active{background:#4caf50;box-shadow:0 0 8px #4caf50}.player-name{font-weight:700;font-size:.9rem;white-space:nowrap}.captured-pieces{display:flex;flex-wrap:wrap;gap:1px;font-size:.9rem;min-width:0;flex:1}.material-advantage{font-size:.75rem;color:#aaa;font-weight:600;margin-left:4px}.panel-buttons{display:flex;gap:4px;flex-shrink:0}.panel-btn{background:#555;border:none;color:#fff;padding:6px 8px;border-radius:4px;font-size:.7rem;touch-action:manipulation;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}.panel-btn:active{background:#777}.panel-btn:disabled{opacity:.4;cursor:default}#move-history-drawer{position:fixed;top:0;right:0;width:260px;max-width:80vw;height:100vh;height:100dvh;background:#252422;z-index:50;overflow-y:auto;padding:16px;box-shadow:-4px 0 16px #00000080;transition:transform .3s ease}#move-history-drawer.hidden{display:block!important;transform:translate(100%)}#move-history-drawer:not(.hidden){transform:translate(0)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.history-header h3{font-size:1rem;font-weight:700}.history-close{background:none;border:none;color:#aaa;font-size:1.5rem;cursor:pointer;padding:4px;line-height:1}.history-list{display:flex;flex-direction:column;gap:2px}.history-row{display:flex;gap:8px;font-size:.85rem;padding:3px 6px;border-radius:3px}.history-row:nth-child(2n){background:#ffffff08}.move-number{color:#777;min-width:28px;text-align:right}.move-white,.move-black{min-width:55px;cursor:default}.history-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:49}#modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#2a2a2a;border-radius:12px;padding:24px;text-align:center;max-width:340px;width:90%}.modal-title{font-size:1.3rem;font-weight:700;margin-bottom:8px}.modal-subtitle{font-size:.9rem;color:#aaa;margin-bottom:20px}.promotion-options{display:flex;gap:12px;justify-content:center}.promotion-piece{font-size:2.8rem;padding:10px 14px;border-radius:8px;background:#444;cursor:pointer;touch-action:manipulation;border:2px solid transparent;transition:background .15s,border-color .15s;-webkit-tap-highlight-color:transparent;line-height:1}.promotion-piece:active{background:#666;border-color:#4caf50}.game-over-result{font-size:1.6rem;font-weight:700;margin-bottom:6px}.game-over-detail{font-size:.95rem;color:#ccc;margin-bottom:20px}.game-over-stats{font-size:.8rem;color:#888;margin-bottom:20px}.modal-btn{background:#4caf50;border:none;color:#fff;padding:12px 28px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.modal-btn:active{background:#45a049}#start-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);display:flex;align-items:center;justify-content:center;z-index:200;transition:opacity .5s,visibility .5s}#start-screen.fade-out{opacity:0;visibility:hidden}.start-content{text-align:center;padding:32px}.start-title{font-size:clamp(2rem,8vw,3.5rem);font-weight:900;margin-bottom:40px;letter-spacing:4px;background:linear-gradient(to right,#e2d1c3,#fff,#e2d1c3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.start-players{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:40px}.start-player{font-size:clamp(1rem,4vw,1.4rem);font-weight:700;padding:12px 24px;border-radius:8px;min-width:220px}.start-player.white-player{background:#f0d9b526;border:2px solid #F0D9B5;color:#f0d9b5}.start-player.black-player{background:#b5886326;border:2px solid #B58863;color:#b58863}.start-vs{font-size:1rem;color:#666;font-weight:600;letter-spacing:3px}.start-btn{background:linear-gradient(135deg,#4caf50,#45a049);border:none;color:#fff;padding:16px 48px;border-radius:12px;font-size:clamp(1.2rem,4vw,1.6rem);font-weight:800;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;letter-spacing:2px;box-shadow:0 4px 20px #4caf5066;transition:transform .15s,box-shadow .15s}.start-btn:active{transform:scale(.96);box-shadow:0 2px 10px #4caf504d}.start-hint{margin-top:20px;font-size:.85rem;color:#888}.capture-toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);background:#000000e0;color:#fff;padding:14px 28px;border-radius:12px;font-size:clamp(1rem,3.5vw,1.3rem);font-weight:700;z-index:80;pointer-events:none;opacity:0;transition:none;text-align:center;max-width:90vw;border:2px solid rgba(255,255,255,.15)}.capture-toast.show{animation:toastPop 2s ease forwards}@keyframes toastPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}20%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-60%) scale(.95)}}@media(orientation:portrait){:root{--board-size: min(100vw, 65vh)}}@media(orientation:landscape){:root{--board-size: min(55vw, 88vh)}}@media(max-width:480px){:root{--board-size: 100vw}.panel-btn{padding:4px 6px;font-size:.6rem}.player-name{font-size:.8rem}}@media(min-width:1024px){:root{--board-size: min(70vw, 82vh)}.square{font-size:clamp(3rem,8vmin,5.5rem)}}@media(min-width:1400px){:root{--board-size: min(55vw, 85vh)}}