*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.App{min-height:100vh;width:100%}.chess-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;background:linear-gradient(135deg,#0f0f23 0%,#1a1a2e 50%,#16213e 100%);padding:20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:relative;overflow-x:hidden}.chess-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(120,119,198,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,219,255,.05) 0%,transparent 50%);pointer-events:none}.game-header{text-align:center;margin-bottom:40px;color:#fff;position:relative;z-index:1}.game-header h1{font-size:3.5rem;margin:0;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,#ffffff 0%,#a78bfa 50%,#06b6d4 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.game-status{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:20px}.status-message{font-size:1.2rem;font-weight:600;padding:12px 24px;border-radius:16px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);color:#fff;box-shadow:0 8px 32px #0003,inset 0 1px #ffffff1a;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.status-message.check-white,.status-message.check-black{background:linear-gradient(135deg,#ef4444,#dc2626);border:1px solid rgba(239,68,68,.3);animation:pulse 1.5s infinite;box-shadow:0 8px 32px #ef44444d,inset 0 1px #ffffff1a}.status-message.checkmate-white,.status-message.checkmate-black{background:linear-gradient(135deg,#10b981,#059669);border:1px solid rgba(16,185,129,.3);animation:celebration 2s infinite;box-shadow:0 8px 32px #10b9814d,inset 0 1px #ffffff1a}.status-message.stalemate{background:linear-gradient(135deg,#f59e0b,#d97706);border:1px solid rgba(245,158,11,.3);box-shadow:0 8px 32px #f59e0b4d,inset 0 1px #ffffff1a}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 8px 32px #ef44444d,inset 0 1px #ffffff1a}50%{transform:scale(1.02);box-shadow:0 12px 40px #ef444466,inset 0 1px #fff3}}@keyframes celebration{0%,to{transform:scale(1) rotate(0);filter:hue-rotate(0deg)}25%{transform:scale(1.05) rotate(1deg);filter:hue-rotate(90deg)}75%{transform:scale(1.05) rotate(-1deg);filter:hue-rotate(-90deg)}}.reset-button{padding:12px 28px;font-size:1rem;font-weight:600;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px #8b5cf64d,inset 0 1px #ffffff1a;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:relative;overflow:hidden}.reset-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.reset-button:hover:before{left:100%}.reset-button:hover{transform:translateY(-2px);box-shadow:0 12px 40px #8b5cf666,inset 0 1px #fff3;background:linear-gradient(135deg,#7c3aed,#6d28d9)}.reset-button:active{transform:translateY(0);box-shadow:0 4px 16px #8b5cf64d,inset 0 1px #ffffff1a}.game-board-container{display:flex;align-items:flex-start;gap:40px;background:rgba(255,255,255,.05);padding:40px;border-radius:24px;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 60px #0000004d,inset 0 1px #ffffff1a;position:relative;z-index:1}.chess-board{position:relative;background:linear-gradient(135deg,#2d3748,#1a202c);padding:24px;border-radius:20px;box-shadow:0 20px 60px #0006,inset 0 1px #ffffff1a;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.board-coordinates{position:absolute;left:-30px;top:24px;height:640px;display:flex;flex-direction:column;justify-content:space-around;align-items:center}.rank-label{color:#fffc;font-weight:600;font-size:1.1rem;text-shadow:0 2px 4px rgba(0,0,0,.3);font-family:Inter,sans-serif}.file-labels{display:flex;justify-content:space-around;margin-top:12px;padding:0 12px}.file-label{color:#fffc;font-weight:600;font-size:1.1rem;text-shadow:0 2px 4px rgba(0,0,0,.3);width:80px;text-align:center;font-family:Inter,sans-serif}.board-grid{display:grid;grid-template-columns:repeat(8,80px);grid-template-rows:repeat(8,80px);gap:2px;border:2px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;background:rgba(0,0,0,.2);padding:2px}.square{width:80px;height:80px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px}.square.light{background:linear-gradient(135deg,#f8fafc,#e2e8f0);box-shadow:inset 0 1px 2px #0000001a}.square.dark{background:linear-gradient(135deg,#4a5568,#2d3748);box-shadow:inset 0 1px 2px #0003}.square:hover{transform:scale(1.05);box-shadow:0 8px 25px #00000026,inset 0 1px #ffffff1a}.square.selected{background:linear-gradient(135deg,#3b82f6,#1d4ed8)!important;box-shadow:0 0 0 3px #3b82f680,inset 0 1px #fff3;animation:selectedGlow 2s infinite alternate;transform:scale(1.05)}@keyframes selectedGlow{0%{box-shadow:0 0 0 3px #3b82f680,inset 0 1px #fff3}to{box-shadow:0 0 0 3px #3b82f6cc,0 0 20px #3b82f666,inset 0 1px #ffffff4d}}.square.valid-move{position:relative}.square.valid-move:after{content:"";position:absolute;width:24px;height:24px;background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;animation:validMovePulse 2s infinite;box-shadow:0 0 0 2px #10b9814d,0 4px 12px #10b98166}.square.valid-move:has(.piece):after{width:72px;height:72px;background:linear-gradient(135deg,rgba(239,68,68,.2),rgba(220,38,38,.3));border:2px solid #ef4444;border-radius:12px;box-shadow:0 0 0 2px #ef44444d,0 4px 12px #ef444466}@keyframes validMovePulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}.square.last-move{background:linear-gradient(135deg,#f59e0b,#d97706)!important;animation:lastMoveGlow 3s ease-out;box-shadow:0 0 20px #f59e0b66,inset 0 1px #fff3}@keyframes lastMoveGlow{0%{box-shadow:0 0 30px #f59e0b99,inset 0 1px #ffffff4d}to{box-shadow:0 0 10px #f59e0b33,inset 0 1px #ffffff1a}}.chess-piece-svg{width:70px;height:70px;transition:all .3s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.piece{cursor:grab;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}.piece:hover .chess-piece-svg{transform:scale(1.1);filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}.piece:active{cursor:grabbing}.piece:active .chess-piece-svg{transform:scale(1.05) rotate(2deg);filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}.captured-pieces{min-width:220px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;box-shadow:0 12px 40px #0003,inset 0 1px #ffffff1a}.captured-pieces h3{margin:0 0 20px;color:#ffffffe6;text-align:center;font-size:1.1rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px;font-family:Inter,sans-serif}.captured-pieces .pieces{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:120px;align-content:flex-start}.captured-piece{opacity:.6;transition:all .3s cubic-bezier(.4,0,.2,1);filter:grayscale(.4) brightness(.8);transform:scale(.8)}.captured-piece .chess-piece-svg{width:32px;height:32px}.captured-piece:hover{opacity:1;transform:scale(1);filter:grayscale(0) brightness(1)}@media (max-width: 1024px){.game-board-container{flex-direction:column;align-items:center;gap:24px;padding:24px}.captured-pieces{min-width:unset;width:100%;max-width:600px}.captured-pieces .pieces{flex-direction:row;min-height:80px}}@media (max-width: 768px){.chess-container{padding:12px 8px;min-height:100vh}.game-header{margin-bottom:20px}.game-header h1{font-size:2.5rem}.game-status{flex-direction:column;gap:12px;margin-top:16px}.status-message{font-size:1rem;padding:10px 20px}.reset-button{padding:10px 24px;font-size:.9rem}.game-board-container{padding:20px;gap:20px;width:100%;max-width:100vw;box-sizing:border-box}.board-grid{grid-template-columns:repeat(8,min(10vw,60px));grid-template-rows:repeat(8,min(10vw,60px))}.square{width:min(10vw,60px);height:min(10vw,60px)}.chess-piece-svg{width:min(8vw,50px);height:min(8vw,50px)}.board-coordinates{left:min(-4vw,-24px);top:20px;height:calc(8*min(10vw,60px))}.rank-label{font-size:min(3vw,.9rem)}.file-label{font-size:min(3vw,.9rem);width:min(10vw,60px)}.chess-board,.captured-pieces{padding:16px}.captured-pieces h3{font-size:1rem;margin-bottom:12px}.captured-piece .chess-piece-svg{width:28px;height:28px}}@media (max-width: 480px){.chess-container{padding:8px}.game-header h1{font-size:2rem}.status-message{font-size:.9rem;padding:8px 16px}.game-board-container{padding:16px;gap:16px}.board-grid{grid-template-columns:repeat(8,min(11vw,45px));grid-template-rows:repeat(8,min(11vw,45px))}.square{width:min(11vw,45px);height:min(11vw,45px)}.chess-piece-svg{width:min(9vw,38px);height:min(9vw,38px)}.board-coordinates{left:min(-3.5vw,-20px);height:calc(8*min(11vw,45px))}.rank-label{font-size:min(2.5vw,.8rem)}.file-label{font-size:min(2.5vw,.8rem);width:min(11vw,45px)}.chess-board,.captured-pieces{padding:12px}.captured-pieces h3{font-size:.9rem}.captured-piece .chess-piece-svg{width:24px;height:24px}.square{min-height:44px;min-width:44px}.reset-button{min-height:44px;min-width:120px}}@media (max-width: 360px){.game-header h1{font-size:1.8rem}.board-grid{grid-template-columns:repeat(8,min(12vw,40px));grid-template-rows:repeat(8,min(12vw,40px))}.square{width:min(12vw,40px);height:min(12vw,40px);min-height:40px;min-width:40px}.chess-piece-svg{width:min(10vw,32px);height:min(10vw,32px)}.board-coordinates{left:min(-3vw,-16px);height:calc(8*min(12vw,40px))}.rank-label,.file-label{font-size:min(2vw,.7rem)}.file-label{width:min(12vw,40px)}}@media (prefers-color-scheme: dark){.captured-pieces{background:rgba(30,30,30,.9);color:#fff}.captured-pieces h3{color:#fff;border-bottom-color:#4b5563}.status-message{background:rgba(30,30,30,.9);color:#fff}}.piece{animation:pieceAppear .3s ease-out}@keyframes pieceAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.square{transition:all .2s ease}.square:has(.piece:active){transform:scale(1.05);z-index:10}.chess-container.check{animation:checkFlash .5s ease-in-out 3}@keyframes checkFlash{0%,to{filter:brightness(1)}50%{filter:brightness(1.2) hue-rotate(10deg)}}@media (hover: none) and (pointer: coarse){.square:hover{filter:none;transform:none}.piece:hover{transform:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.captured-piece:hover{opacity:.7;transform:none;filter:grayscale(.3)}.reset-button:hover{transform:none;box-shadow:0 4px 15px #0003;background:linear-gradient(45deg,#667eea,#764ba2)}.square:active{background-color:#3b82f64d!important;transform:scale(.95)}.piece:active{transform:scale(1.1)}.reset-button:active{transform:scale(.95)}}@media (max-width: 768px){.square{touch-action:manipulation}.piece{touch-action:manipulation;pointer-events:auto}.reset-button{touch-action:manipulation}}.chess-container{touch-action:manipulation}@media (max-width: 768px){.square.valid-move:after{width:min(6vw,25px);height:min(6vw,25px)}.square.valid-move:has(.piece):after{width:min(9vw,50px);height:min(9vw,50px)}}@media (max-width: 480px){.square.valid-move:after{width:min(7vw,20px);height:min(7vw,20px)}.square.valid-move:has(.piece):after{width:min(10vw,40px);height:min(10vw,40px)}}@media (max-height: 600px) and (orientation: landscape){.chess-container{padding:5px}.game-header{margin-bottom:10px}.game-header h1{font-size:1.5rem}.game-board-container{flex-direction:row;gap:15px;padding:10px}.captured-pieces{min-width:150px;max-width:200px}.captured-pieces .pieces{flex-direction:column;min-height:auto}}@media (max-width: 320px){.game-header h1{font-size:1.5rem}.status-message{font-size:.8rem;padding:6px 12px}.board-grid{grid-template-columns:repeat(8,min(11.5vw,35px));grid-template-rows:repeat(8,min(11.5vw,35px))}.square{width:min(11.5vw,35px);height:min(11.5vw,35px);min-height:35px;min-width:35px}.chess-piece-svg{width:min(9vw,28px);height:min(9vw,28px)}.board-coordinates{left:min(-2.5vw,-14px);height:calc(8*min(11.5vw,35px))}.rank-label,.file-label{font-size:min(1.8vw,.6rem)}.file-label{width:min(11.5vw,35px)}.captured-piece .chess-piece-svg{width:20px;height:20px}}*{transition:color .2s ease,background-color .2s ease,transform .2s ease}.ai-difficulty-selector{display:flex;align-items:center;gap:12px;color:#fff;font-size:1rem;font-weight:600}.ai-difficulty-selector label{text-shadow:0 2px 4px rgba(0,0,0,.3)}.ai-difficulty-selector select{padding:8px 36px 8px 16px;font-size:1rem;font-weight:600;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.ai-difficulty-selector select:hover{background:rgba(255,255,255,.2);border-color:#ffffff4d}.ai-difficulty-selector select:focus{outline:none;box-shadow:0 0 0 3px #3b82f680}