: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;width:85%;height:85%;display:flex;align-items:center;justify-content:center}.piece svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.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;width:clamp(3rem,10vmin,6rem);height:clamp(3rem,10vmin,6rem);opacity:.85;transform:translate(-50%,-50%)}.drag-ghost svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.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;align-items:center;min-width:0;flex:1}.captured-svg{display:inline-block;width:1.1rem;height:1.1rem}.captured-svg svg{width:100%;height:100%}.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{width:60px;height:60px;padding:8px;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;display:flex;align-items:center;justify-content:center}.promotion-piece svg{width:100%;height:100%}.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}.swap-btn{background:transparent;border:2px solid #666;color:#aaa;padding:10px 24px;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;margin-bottom:20px;transition:background .15s,border-color .15s,color .15s}.swap-btn:active{background:#ffffff1a;border-color:#aaa;color:#fff}.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)}}.penalty-toast{position:fixed;left:50%;transform:translate(-50%) scale(.8);background:#c80000eb;color:#fff;padding:10px 22px;border-radius:10px;font-size:clamp(.85rem,3vw,1.1rem);font-weight:900;letter-spacing:1px;text-transform:uppercase;z-index:85;pointer-events:none;opacity:0;transition:none;text-align:center;max-width:90vw;border:2px solid rgba(255,80,80,.6);text-shadow:0 2px 6px rgba(0,0,0,.5)}.penalty-toast.penalty-top{top:8px}.penalty-toast.penalty-bottom{bottom:8px}.penalty-toast.show{animation:penaltyFlash 2.2s ease forwards}@keyframes penaltyFlash{0%{opacity:0;transform:translate(-50%) scale(.5)}8%{opacity:1;transform:translate(-50%) scale(1.15)}16%{transform:translate(-50%) scale(1)}25%{background:#ff0000f2}35%{background:#b40000eb}45%{background:#ff0000f2}70%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(.9)}}.castigo-toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.5);background:linear-gradient(135deg,#1a0000,#4a0000,#1a0000);color:#f22;padding:20px 40px;border-radius:14px;font-size:clamp(2rem,8vw,3.5rem);font-weight:900;letter-spacing:6px;text-transform:uppercase;z-index:90;pointer-events:none;opacity:0;transition:none;text-align:center;max-width:95vw;border:3px solid #ff0000;text-shadow:0 0 20px #ff0000,0 0 40px #ff0000,0 0 80px #aa0000;box-shadow:0 0 30px #f006,inset 0 0 30px #ff00001a}.castigo-toast.show{animation:castigoSlam 2.5s ease forwards}@keyframes castigoSlam{0%{opacity:0;transform:translate(-50%,-50%) scale(3) rotate(-5deg)}10%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}15%{transform:translate(-50%,-50%) scale(1.1) rotate(1deg)}20%{transform:translate(-50%,-50%) scale(1) rotate(0)}30%{text-shadow:0 0 30px #ff0000,0 0 60px #ff0000,0 0 100px #ff0000}40%{text-shadow:0 0 10px #ff0000,0 0 20px #ff0000}50%{text-shadow:0 0 40px #ff0000,0 0 80px #ff0000,0 0 120px #ff0000}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8) rotate(3deg)}}@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)}}