.header{background:#fff;box-shadow:0 2px 10px #0000001a;top:0;z-index:1000;min-width:100%;border-radius:20px}
.navbar-brand{font-size:1rem;padding:.5rem 0}
.navbar-nav .nav-link{font-weight:500;padding:.5rem 1rem;transition:color .3s ease}
.navbar-nav .nav-link:hover{color:#769656!important}
.navbar-toggler{border:none;padding:.25rem .5rem}
.navbar-toggler:focus{box-shadow:none}
@media (max-width:991px){.navbar-nav .nav-link{padding:.75rem 0;border-bottom:1px solid #f8f9fa}
.navbar-nav .nav-link:last-child{border-bottom:none}
}
body{font-family:'Montserrat',Arial,sans-serif;margin:20px;display:flex;flex-direction:column;line-height:2;letter-spacing:1px;color:#323232!important;align-items:center}
.board-container{display:flex;gap:1.5rem;justify-content:center;margin-bottom:20px}
.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);position:relative;background:#fff;width:100%;max-width:540px;aspect-ratio:1/1}
.square{position:relative;width:100%;height:100%;box-sizing:border-box;transition:background .2s}
.board .black{background-color:#769656}
.board .white{background-color:#eeeed2}
.gradi{font-weight:900}
#bL .square{cursor:pointer}
#bL .square.highlight{background-color:#f90!important}
.ksvg{position:relative;z-index:9;width:60%;height:60%;top:20%;left:20%;pointer-events:none;display:block;transition:opacity .2s}
#bR .black{background-color:#0000003b}
#bR .white{background-color:#f1f1f1}
#bR{position:relative}
#rc{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}
#rC{width:100%;display:flex;justify-content:center;margin-bottom:30px}
#mc{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100000;display:none;background:transparent}
#mV .modal-content{background:linear-gradient(135deg,#ffd700,#ff8c00);border:0;border-radius:20px;padding:20px;box-shadow:0 0 30px #ffd700b3;z-index:10000}
#mV .modal-header{border-bottom:2px solid #ffffff4d}
#mV .modal-title{color:#8b4513;font-weight:900;font-size:2rem;text-shadow:2px 2px 4px #ffffff80}
#mV .modal-body{color:#8b4513;font-weight:600;font-size:1.2rem}
.btn-success{background:linear-gradient(25deg,green,lightgreen);border:none;font-weight:400;padding:10px 25px;color:#fff;border-radius:.5rem;transition:all .3s ease}
.modal{z-index:100001!important}
.modal-backdrop{background-color:#000!important;z-index:1000!important}
.move-number{position:absolute;top:0;left:5px;font-size:12px;font-weight:600!important;color:#212529!important;font-family:monospace;z-index:10}
#bR .black .move-number{color:#fff}
#movesCountText{font-weight:700;color:green}
.first-move{background-color:#7fffd4!important}
.board .square.last-move-cell{background-color:#ee82ee!important}
.color-legend{font-size:.9rem}
.color-box{width:16px;height:16px;border-radius:4px}
.first-move-box{background-color:#7fffd4!important}
.last-move-box{background-color:#ee82ee!important}
.highlight-box{background-color:#f90!important}
.btn-danger{background:linear-gradient(25deg,red,orange);border:none;font-weight:400;padding:10px 25px;color:#fff;border-radius:.5rem;transition:all .3s ease}
.btn-danger:hover,.btn-success:hover{opacity:.8;transform:translateY(-1px)}
.btn-danger:active,.btn-success:active{transform:translateY(0)}
.btn{letter-spacing:1px}
.square .cross{display:none;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:8}
.square .cross::before,.square .cross::after{content:'';position:absolute;top:50%;left:50%;width:50%;height:3px;background:#dc3545;border-radius:2px}
.square .cross::before{transform:translate(-50%,-50%) rotate(45deg)}
.square .cross::after{transform:translate(-50%,-50%) rotate(-45deg)}
.square.show-cross .cross{display:block}
@media (max-width:1023px){.board{max-width:420px}
}
@media (max-width:991px){.board-container{flex-direction:column;gap:20px}
}
@media (max-width:576px){.lead{font-size:.9rem}
.color-legend{font-size:.8rem}
}
@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1200px}
}
#bL .square,#bR .square{position:relative}
#bL #L-a1::before,#bL #L-b1::before,#bL #L-c1::before,#bL #L-d1::before,#bL #L-e1::before,#bL #L-f1::before,#bL #L-g1::before,#bL #L-h1::before,#bR #R-a1::before,#bR #R-b1::before,#bR #R-c1::before,#bR #R-d1::before,#bR #R-e1::before,#bR #R-f1::before,#bR #R-g1::before,#bR #R-h1::before{content:attr(data-letter);position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);color:#323232;font-size:12px;pointer-events:none;z-index:10}
#bL #L-a8::after,#bL #L-a7::after,#bL #L-a6::after,#bL #L-a5::after,#bL #L-a4::after,#bL #L-a3::after,#bL #L-a2::after,#bL #L-a1::after,#bR #R-a8::after,#bR #R-a7::after,#bR #R-a6::after,#bR #R-a5::after,#bR #R-a4::after,#bR #R-a3::after,#bR #R-a2::after,#bR #R-a1::after{content:attr(data-number);position:absolute;left:-12px;top:50%;transform:translateY(-50%);color:#323232;font-size:12px;pointer-events:none;z-index:10}
#bL #L-a1::before,#bR #R-a1::before{content:"a"}
#bL #L-b1::before,#bR #R-b1::before{content:"b"}
#bL #L-c1::before,#bR #R-c1::before{content:"c"}
#bL #L-d1::before,#bR #R-d1::before{content:"d"}
#bL #L-e1::before,#bR #R-e1::before{content:"e"}
#bL #L-f1::before,#bR #R-f1::before{content:"f"}
#bL #L-g1::before,#bR #R-g1::before{content:"g"}
#bL #L-h1::before,#bR #R-h1::before{content:"h"}
#bL #L-a8::after,#bR #R-a8::after{content:"8"}
#bL #L-a7::after,#bR #R-a7::after{content:"7"}
#bL #L-a6::after,#bR #R-a6::after{content:"6"}
#bL #L-a5::after,#bR #R-a5::after{content:"5"}
#bL #L-a4::after,#bR #R-a4::after{content:"4"}
#bL #L-a3::after,#bR #R-a3::after{content:"3"}
#bL #L-a2::after,#bR #R-a2::after{content:"2"}
#bL #L-a1::after,#bR #R-a1::after{content:"1"}
#movesSequence{font-family:monospace;font-size:13px;line-height:1.25;resize:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;box-shadow:none!important;min-height:120px;cursor:default}
@media (max-width:576px){#movesSequence{font-size:11px}
.modal-content{margin:auto;max-width:90%}
}
.copy-icon{position:absolute;top:5px;right:10px;cursor:pointer;transition:all .3s ease;opacity:.5;z-index:10}
.copy-icon-active{opacity:1;color:#0d6efd}
.copy-icon-active:hover{color:#0b5ed7;transform:scale(1.1)}
.copy-icon-disabled{opacity:.3;cursor:not-allowed;color:#6c757d}
.copy-icon-success{color:#198754;opacity:1}
.label-move{position:absolute;font-size:11px;left:25px;top:-10px}
.install-prompt{position:fixed;bottom:-150px;left:50%;transform:translateX(-50%);background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 30px #00000026;z-index:10000;transition:all .4s ease;display:none;max-width:90%;width:auto;text-align:center}
.install-prompt.show{bottom:30px}
.install-prompt-content{display:flex;flex-direction:column}
.install-text{margin-bottom:16px}
.install-buttons{display:flex;gap:0.5rem;justify-content:center}
@media (max-width:768px){.install-prompt{left:50%;transform:translateX(-50%);max-width:90%}
.install-prompt.show{bottom:20px}
}
@media (min-width:1025px){.install-prompt{max-width:420px;padding:24px}
.install-buttons .btn{padding:10px 24px;font-size:.95rem;margin:0 8px}
}
@media all and (display-mode:standalone){.install-prompt{display:none!important}
}
.btn-danger.disabled{background:#fff;color:#323232;box-shadow:0 0 0 1px #444}