:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--dark-bg: #0f0c29;--dark-secondary: #1a1635;--dark-tertiary: #252140;--red-piece: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);--red-king: linear-gradient(135deg, #ff8787 0%, #ff6b6b 100%);--black-piece: linear-gradient(135deg, #2d3436 0%, #1e272e 100%);--black-king: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);--light-square: #e8d4b8;--dark-square: #b58863;--highlight: rgba(102, 126, 234, .4);--valid-move: rgba(52, 211, 153, .5);--capture-move: rgba(239, 68, 68, .5);--text-primary: #ffffff;--text-secondary: #a0aec0;--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--dark-bg);background-image:radial-gradient(at 0% 0%,rgba(102,126,234,.2) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(118,75,162,.2) 0px,transparent 50%);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:var(--spacing-md);color:var(--text-primary)}.container{max-width:800px;width:100%}.game-header{text-align:center;margin-bottom:var(--spacing-lg)}.game-title{font-size:3.5rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-xs);letter-spacing:-.02em;animation:fadeInDown .6s ease}.game-subtitle{font-size:1.125rem;color:var(--text-secondary);font-weight:400;animation:fadeInUp .6s ease}.game-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);gap:var(--spacing-sm);animation:fadeIn .8s ease}.info-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:1rem;padding:var(--spacing-sm) var(--spacing-md);flex:1}.turn-indicator{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:600;font-size:1.125rem}.piece-preview{width:32px;height:32px;border-radius:50%;box-shadow:0 4px 12px #0000004d;transition:transform var(--transition-fast)}.piece-preview.red-piece{background:var(--red-piece)}.piece-preview.black-piece{background:var(--black-piece)}.reset-btn{background:var(--secondary-gradient);color:#fff;border:none;border-radius:1rem;padding:var(--spacing-sm) var(--spacing-md);font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);transition:all var(--transition-normal);box-shadow:0 4px 15px #f5576c4d}.reset-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f5576c66}.reset-btn:active{transform:translateY(0)}.board-container{perspective:1000px;animation:fadeIn 1s ease}.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:2px;background:var(--dark-secondary);border-radius:1.5rem;padding:1rem;box-shadow:0 20px 60px #00000080,0 0 0 1px var(--glass-border);aspect-ratio:1;max-width:600px;margin:0 auto}.square{aspect-ratio:1;display:flex;justify-content:center;align-items:center;border-radius:.5rem;transition:all var(--transition-fast);cursor:pointer;position:relative}.square.light{background:var(--light-square)}.square.dark{background:var(--dark-square)}.square:hover:not(.light){transform:scale(.98)}.square.selected{background:var(--highlight)!important;box-shadow:inset 0 0 20px #667eea99;animation:pulse 1.5s infinite}.square.valid-move:after{content:"";position:absolute;width:40%;height:40%;background:var(--valid-move);border-radius:50%;border:3px solid rgba(52,211,153,.8);animation:scaleIn .3s ease}.square.capture-move:after{content:"";position:absolute;width:50%;height:50%;background:var(--capture-move);border-radius:50%;border:3px solid rgba(239,68,68,.9);animation:scaleIn .3s ease,pulse 1.5s infinite}.piece{width:80%;height:80%;border-radius:50%;box-shadow:0 6px 15px #0006,inset 0 2px 4px #ffffff4d;transition:all var(--transition-normal);cursor:grab;position:relative;animation:dropIn .4s cubic-bezier(.34,1.56,.64,1)}.piece:active{cursor:grabbing}.piece.red{background:var(--red-piece)}.piece.black{background:var(--black-piece)}.piece.king{box-shadow:0 8px 20px #00000080,inset 0 2px 4px #fff6,0 0 0 3px #ffd70099}.piece.king:before{content:"👑";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.piece.red.king{background:var(--red-king)}.piece.black.king{background:var(--black-king)}.piece:hover{transform:scale(1.1);box-shadow:0 8px 20px #00000080,inset 0 2px 4px #fff6}.game-status{margin-top:var(--spacing-md);text-align:center;animation:fadeIn 1s ease}.status-text{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:1rem;padding:var(--spacing-sm) var(--spacing-md);font-size:1rem;color:var(--text-secondary);display:inline-block}.score-container{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-md);animation:fadeIn 1.2s ease}.score-card{flex:1;background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:1rem;padding:var(--spacing-md);text-align:center;transition:all var(--transition-normal)}.score-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px #0000004d}.score-label{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.score-value{font-size:2.5rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.winner-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.winner-modal.show{display:flex}.modal-content{background:var(--dark-secondary);border:2px solid var(--glass-border);border-radius:2rem;padding:var(--spacing-xl);text-align:center;max-width:400px;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 25px 50px #00000080}.winner-icon{font-size:5rem;margin-bottom:var(--spacing-md);animation:bounce 1s infinite}.winner-title{font-size:2.5rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-sm)}.winner-message{font-size:1.25rem;color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.play-again-btn{background:var(--secondary-gradient);color:#fff;border:none;border-radius:1rem;padding:var(--spacing-sm) var(--spacing-xl);font-size:1.125rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:0 4px 15px #f5576c4d}.play-again-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f5576c66}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes dropIn{0%{transform:translateY(-50px) scale(0);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (max-width: 768px){.game-title{font-size:2.5rem}.game-info{flex-direction:column}.board{padding:.5rem}.score-container{flex-direction:column}.modal-content{margin:var(--spacing-md);padding:var(--spacing-lg)}}@media (max-width: 480px){.game-title{font-size:2rem}.piece.king:before{font-size:1rem}}