:root{--cell-size:50px;--bg-light:#f4f4f4;--bg-dark:#1e1e1e;--text-light:#000;--text-dark:#fff}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1vh 1vw;background:linear-gradient(135deg,var(--bg-light) 0,#e8f4fd 100%);color:var(--text-light);transition:background .3s,color .3s;height:100vh;width:100vw;margin:0;overflow:hidden;box-sizing:border-box}.dark{background:linear-gradient(135deg,var(--bg-dark) 0,#0a0a0a 100%);color:var(--text-dark)}h2{margin:0;font-size:clamp(1.3rem,4vw,2.2rem);font-weight:600;text-align:center;color:#2c5aa0;text-shadow:2px 2px 4px rgba(0,0,0,.1);line-height:1.2}.title-container{align-items:center;gap:15px;margin-bottom:20px}.instructions-icon{background:rgba(44,90,160,.1);color:#2c5aa0;border:1px solid rgba(44,90,160,.3);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;font-weight:700;transition:all .3s ease}.instructions-icon:hover{transform:translateY(-2px);background:rgba(44,90,160,.2);box-shadow:0 4px 12px rgba(44,90,160,.3)}.dark .instructions-icon{background:rgba(100,181,246,.2);color:#64b5f6;border-color:rgba(100,181,246,.4)}.dark .instructions-icon:hover{background:rgba(100,181,246,.3)}.instructions{background:rgba(44,90,160,.1);border-radius:8px;padding:12px 16px;margin:10px 0 20px 0;border:1px solid rgba(44,90,160,.2);max-width:600px;text-align:center}.instructions p{margin:0;font-size:14px;line-height:1.4;color:#2c5aa0}.dark .instructions{background:rgba(100,181,246,.2);border-color:rgba(100,181,246,.3)}.dark .instructions p{color:#64b5f6}.dark h2{color:#64b5f6}#controls{margin-bottom:15px;width:100%;max-width:450px;background:0 0;border-radius:12px;padding:8px 12px;box-shadow:none;backdrop-filter:none;border:none}.dark #controls{background:0 0;border:none}#top-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:30px}#bottom-controls{margin-top:15px;width:100%;max-width:450px;background:0 0;border-radius:12px;padding:8px 12px;box-shadow:none;backdrop-filter:none;border:none;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:30px}.dark #bottom-controls{background:0 0;border:none}#action-controls,#game-info,#grid-controls,#solution-controls{display:flex;align-items:center;gap:8px}#solution-controls{font-size:16px;font-weight:600;padding:8px 12px}.solution-btn{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border:1px solid rgba(102,126,234,.5);color:#fff!important;font-weight:600;min-width:150px;font-size:14px;padding:10px 15px;border-radius:8px;cursor:pointer;transition:all .3s ease}.solution-btn:hover{background:linear-gradient(135deg,#5a6fd8 0,#6a4190 100%);box-shadow:0 4px 12px rgba(102,126,234,.3);transform:translateY(-1px)}.control-select{background:rgba(255,255,255,.9);border:2px solid #ddd;border-radius:8px;padding:8px 12px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;outline:0}.control-select:hover{border-color:#2c5aa0;background:#fff}.dark .control-select{background:rgba(255,255,255,.1);border:2px solid #555;color:#e0e0e0}.dark .control-select:hover{border-color:#64b5f6;background:rgba(255,255,255,.15)}.control-btn{background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border:2px solid #ddd;border-radius:8px;padding:8px 12px;font-size:16px;cursor:pointer;transition:all .3s ease;font-weight:500;color:#333;box-shadow:0 2px 8px rgba(0,0,0,.1)}.control-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15);border-color:#bbb}.control-btn.primary{background:linear-gradient(145deg,#2c5aa0,#1e3d72);color:#fff;border-color:#2c5aa0}.control-btn.primary:hover{background:linear-gradient(145deg,#1e3d72,#163158);border-color:#1e3d72}.dark .control-btn{background:linear-gradient(145deg,#404040,#2a2a2a);border:2px solid #555;color:#e0e0e0}.dark .control-btn:hover{border-color:#777;background:linear-gradient(145deg,#505050,#3a3a3a)}.dark .control-btn.primary{background:linear-gradient(145deg,#64b5f6,#42a5f5);color:#000;border-color:#64b5f6}.dark .control-btn.primary:hover{background:linear-gradient(145deg,#42a5f5,#2196f3);border-color:#42a5f5}#game-container{display:flex;justify-content:center;align-items:center;margin:20px 0}#board{display:grid;gap:2px;border:3px solid #2c5aa0;border-radius:8px;padding:10px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);box-shadow:0 8px 25px rgba(0,0,0,.15);position:relative}.dark #board{border:3px solid #64b5f6;background:rgba(255,255,255,.05)}.chess-label{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#2c5aa0;background:rgba(255,255,255,.8);border-radius:4px}.dark .chess-label{color:#64b5f6;background:rgba(255,255,255,.1)}.chess-label.row-label{width:30px;height:var(--cell-size)}.chess-label.col-label{width:var(--cell-size);height:30px}.chess-label.corner{width:30px;height:30px;background:0 0}.cell{width:var(--cell-size);height:var(--cell-size);border:1px solid #ccc;display:flex;align-items:center;justify-content:center;font-size:32px;cursor:pointer;transition:background-color .3s ease,transform .2s ease;border-radius:4px}.cell:hover{background-color:rgba(44,90,160,.1);transform:scale(1.05)}.white{background-color:#f0d9b5}.black{background-color:#b58863}.dark .white{background-color:#8b7355}.dark .black{background-color:#654321}.cell:hover.white{background-color:rgba(240,217,181,.8)}.cell:hover.black{background-color:rgba(181,136,99,.8)}.dark .cell:hover.white{background-color:rgba(139,115,85,.8)}.dark .cell:hover.black{background-color:rgba(101,67,33,.8)}.valid-position{box-shadow:inset 0 0 0 2px rgba(46,204,113,.6)}.invalid-position{box-shadow:inset 0 0 0 2px rgba(255,71,87,.4);cursor:not-allowed}.valid-position:hover{box-shadow:inset 0 0 0 3px rgba(46,204,113,.8)}.invalid-position:hover{box-shadow:inset 0 0 0 3px rgba(255,71,87,.6)}#gameover{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(255,71,87,.95);border-radius:15px;border:2px solid #ff4757;box-shadow:0 4px 20px rgba(255,71,87,.3);animation:gameOverSlideUp .5s ease-out;z-index:1000;max-width:90%}.gameover-content{padding:20px 30px;text-align:center;color:#fff}.gameover-content h3{margin:0 0 10px 0;font-size:24px;font-weight:700}.gameover-content p{margin:0 0 20px 0;font-size:16px;opacity:.9}.gameover-btn{font-size:16px!important;padding:12px 24px!important;background:linear-gradient(145deg,#fff,#f0f0f0)!important;color:#ff4757!important;border:2px solid #fff!important;font-weight:700!important}.gameover-btn:hover{background:linear-gradient(145deg,#f0f0f0,#e0e0e0)!important;transform:translateY(-2px)!important}@keyframes gameOverSlideUp{from{transform:translateX(-50%) translateY(100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}.dark #gameover{background:rgba(255,71,87,.9)}.dark .gameover-btn{background:linear-gradient(145deg,#404040,#2a2a2a)!important;color:#ff6b6b!important;border:2px solid #404040!important}.dark .gameover-btn:hover{background:linear-gradient(145deg,#505050,#3a3a3a)!important}#gamewin{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(46,204,113,.95);border-radius:15px;border:2px solid #27ae60;box-shadow:0 4px 20px rgba(46,204,113,.3);animation:gameWinSlideUp .5s ease-out;z-index:1000;max-width:90%}.gamewin-content{padding:20px 30px;text-align:center;color:#fff}.gamewin-content h3{margin:0 0 10px 0;font-size:24px;font-weight:700}.gamewin-content p{margin:0 0 20px 0;font-size:16px;opacity:.9}.gamewin-btn{font-size:16px!important;padding:12px 24px!important;background:linear-gradient(145deg,#fff,#f0f0f0)!important;color:#27ae60!important;border:2px solid #fff!important;font-weight:700!important}.gamewin-btn:hover{background:linear-gradient(145deg,#f0f0f0,#e0e0e0)!important;transform:translateY(-2px)!important}@keyframes gameWinSlideUp{from{transform:translateX(-50%) translateY(100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}.dark #gamewin{background:rgba(46,204,113,.9)}.dark .gamewin-btn{background:linear-gradient(145deg,#404040,#2a2a2a)!important;color:#2ecc71!important;border:2px solid #404040!important}.dark .gamewin-btn:hover{background:linear-gradient(145deg,#505050,#3a3a3a)!important}.hidden{display:none}.message{margin-top:20px;font-size:18px;font-weight:700;padding:15px 25px;border-radius:12px;max-width:400px;text-align:center;animation:messageSlideIn .3s ease-out}.message.error{background:rgba(255,71,87,.1);border:2px solid #ff4757;color:#ff4757}.message.success{background:rgba(46,204,113,.1);border:2px solid #27ae60;color:#27ae60}@keyframes messageSlideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.dark .message.error{background:rgba(255,71,87,.2);border:2px solid #ff6b6b;color:#ff6b6b}.dark .message.success{background:rgba(46,204,113,.2);border:2px solid #2ecc71;color:#2ecc71}@media (min-width:1024px){:root{--cell-size:60px}body{padding:2vh 2vw}}@media (max-width:1023px) and (min-width:768px){:root{--cell-size:50px}h2{font-size:clamp(1.6rem,4vw,2rem)}}@media (max-width:767px){:root{--cell-size:clamp(28px, 6vw, 40px)}body{padding:.5vh .5vw;height:100vh;width:100vw;overflow:hidden;justify-content:center;gap:clamp(.5vh,1vh,1.5vh)}h2{font-size:clamp(1.2rem,5vw,1.6rem);margin:0}.title-container{margin-bottom:0}#bottom-controls,#controls{padding:clamp(4px,1vw,8px);max-width:100vw;margin:0}#top-row{gap:clamp(8px,2vw,15px);flex-wrap:wrap;justify-content:center}#bottom-controls{gap:clamp(8px,2vw,15px);flex-wrap:wrap;justify-content:center}.control-btn{padding:clamp(4px,1.5vw,8px) clamp(6px,2vw,12px);font-size:clamp(10px,2.5vw,14px)}#queens-info{font-size:clamp(10px,2.5vw,14px);padding:clamp(4px,1.5vw,8px) clamp(6px,2vw,12px)}#game-container{max-width:98vw;max-height:75vh;overflow:auto}.chess-label{font-size:clamp(8px,2vw,12px)}.chess-label.row-label{width:clamp(20px,4vw,30px);height:var(--cell-size)}.chess-label.col-label{width:var(--cell-size);height:clamp(20px,4vw,30px)}.chess-label.corner{width:clamp(20px,4vw,30px);height:clamp(20px,4vw,30px)}.cell{font-size:clamp(16px,4vw,24px)}#gameover,#gamewin{bottom:2vh;max-width:95vw}.gameover-content,.gamewin-content{padding:clamp(12px,3vw,20px)}.gameover-content h3,.gamewin-content h3{font-size:clamp(14px,4vw,20px)}.gameover-content p,.gamewin-content p{font-size:clamp(11px,3vw,14px)}}@media (max-width:480px){:root{--cell-size:clamp(24px, 5.5vw, 32px)}body{padding:.3vh .3vw;gap:clamp(.3vh,.8vh,1vh)}h2{font-size:clamp(1rem,5.5vw,1.4rem)}#game-container{max-height:78vh}.cell{font-size:clamp(14px,3.5vw,20px)}.chess-label{font-size:clamp(7px,1.8vw,10px)}.chess-label.row-label{width:clamp(18px,3.5vw,25px)}.chess-label.col-label{height:clamp(18px,3.5vw,25px)}.chess-label.corner{width:clamp(18px,3.5vw,25px);height:clamp(18px,3.5vw,25px)}#bottom-controls,#top-row{flex-direction:column;gap:clamp(6px,1.5vw,10px)}.control-btn{padding:clamp(3px,1vw,6px) clamp(5px,1.5vw,10px);font-size:clamp(9px,2.2vw,12px)}#queens-info{font-size:clamp(9px,2.2vw,12px);padding:clamp(3px,1vw,6px) clamp(5px,1.5vw,10px)}}@media (max-width:360px){:root{--cell-size:clamp(20px, 5vw, 28px)}body{padding:.2vh .2vw;gap:clamp(.2vh,.6vh,.8vh)}h2{font-size:clamp(.9rem,6vw,1.2rem)}#game-container{max-height:80vh}.cell{font-size:clamp(12px,3vw,16px)}.chess-label{font-size:clamp(6px,1.6vw,9px)}.chess-label.row-label{width:clamp(16px,3vw,22px)}.chess-label.col-label{height:clamp(16px,3vw,22px)}.chess-label.corner{width:clamp(16px,3vw,22px);height:clamp(16px,3vw,22px)}}@media (max-height:500px) and (orientation:landscape){body{padding:.5vh 1vw;flex-direction:row;justify-content:space-around;align-items:center}.title-container{position:absolute;top:1vh;left:50%;transform:translateX(-50%)}h2{font-size:clamp(.8rem,3vh,1.2rem)}#controls{position:absolute;left:1vw;top:50%;transform:translateY(-50%);flex-direction:column}#game-container{max-height:90vh;max-width:60vw}#bottom-controls{position:absolute;right:1vw;top:50%;transform:translateY(-50%);flex-direction:column}}