@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap";:root{--neon-pink: #ff0080;--neon-cyan: #00ffff;--neon-purple: #8000ff;--neon-green: #00ff41;--neon-orange: #ff4000;--neon-yellow: #ffff00;--dark-bg: #0a0a0a;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #707070;--font-primary: "Orbitron", "Courier New", monospace;--font-secondary: "Rajdhani", "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--surface-glass: rgba(0, 255, 255, .05);--surface-glass-hover: rgba(0, 255, 255, .08);--dark-glass: rgba(10, 15, 25, .85);--dark-glass-light: rgba(10, 15, 25, .6);--square-light: #f0d9b5;--square-dark: #b58863;--square-light-hover: #f5e6d3;--square-dark-hover: #c4956e;--square-selected: rgba(255, 0, 128, .7);--square-possible: rgba(0, 255, 255, .4);--square-check: rgba(255, 64, 0, .8);--square-last-move: rgba(255, 255, 0, .3);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--border-radius-sm: 6px;--border-radius: 12px;--border-radius-lg: 16px;--square-size: clamp(45px, 8vw, 65px);--board-size: calc(8 * var(--square-size));--coordinate-size: 30px;--neon-shadow-cyan: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);--neon-shadow-purple: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);--neon-shadow-pink: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);--z-background: -1;--z-base: 0;--z-board-overlay: 10;--z-ui-overlay: 50;--z-modal: 1000;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .6s ease}.premove-svg{position:absolute;inset:0;pointer-events:none;z-index:60}.premove-line{stroke:var(--neon-cyan, #00f5ff);stroke-width:3px;stroke-dasharray:8 6;stroke-linecap:round;fill:none;opacity:.95;animation:premoveDash 1s linear infinite}@keyframes premoveDash{0%{stroke-dashoffset:0}to{stroke-dashoffset:-28}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){:root{--square-light: #ffffff;--square-dark: #000000;--text-primary: #ffffff;--dark-bg: #000000}}@keyframes neonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}@keyframes checkPulse{0%,to{box-shadow:inset 0 0 20px var(--square-check)}50%{box-shadow:inset 0 0 40px var(--square-check),0 0 20px var(--neon-orange)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes clockPulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes clockUrgent{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes selectedPulse{0%,to{box-shadow:inset 0 0 25px var(--neon-pink),0 0 20px #ff008099}50%{box-shadow:inset 0 0 35px var(--neon-pink),0 0 30px #ff0080cc}}@keyframes fadeInOut{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.1)}}@keyframes lastMoveGlow{0%{box-shadow:inset 0 0 0 var(--neon-yellow)}20%{box-shadow:inset 0 0 15px var(--neon-yellow)}80%{box-shadow:inset 0 0 15px var(--neon-yellow)}to{box-shadow:inset 0 0 0 var(--neon-yellow)}}@keyframes possibleMoveFadeIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes possibleMovePulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}@keyframes captureMovePulse{0%,to{border-color:var(--neon-orange);box-shadow:inset 0 0 15px #ff40004d,0 0 15px var(--neon-orange)}50%{border-color:var(--neon-pink);box-shadow:inset 0 0 25px #ff008066,0 0 25px var(--neon-pink)}}@keyframes premoveArrow{0%,to{stroke-dashoffset:0;opacity:.8}50%{stroke-dashoffset:-20;opacity:1}}@keyframes colorToggle{0%{transform:scale(1);box-shadow:0 0 #0ff0}50%{transform:scale(1.05);box-shadow:0 0 30px #0ff9}to{transform:scale(1.02);box-shadow:0 0 25px #0ff6,inset 0 0 20px #fff3}}@keyframes checkmarkPop{0%{transform:scale(0) rotate(-45deg);opacity:0}50%{transform:scale(1.2) rotate(-10deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes thinkingPulse{0%,to{box-shadow:0 0 20px #00ffff4d}50%{box-shadow:0 0 30px #00ffff80}}.status-text.thinking{position:relative;animation:thinkingPulse 1.4s ease-in-out infinite;color:var(--neon-cyan)}.status-text.thinking:after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);animation:thinkingSweep 1.2s linear infinite}@keyframes thinkingSweep{0%{left:-100%}to{left:100%}}@keyframes thinkingDots{0%,25%{content:"."}50%{content:".."}75%{content:"..."}to{content:"...."}}@keyframes dragPulse{0%,to{box-shadow:0 0 25px #00ff4199,inset 0 0 20px #00ff4133}50%{box-shadow:0 0 35px #00ff41cc,inset 0 0 30px #00ff414d}}@keyframes dropTargetPulse{0%,to{transform:scale(1);box-shadow:inset 0 0 15px #00ffff4d}50%{transform:scale(1.02);box-shadow:inset 0 0 25px #00ffff80}}@keyframes invalidDrop{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-secondary);font-size:var(--font-size-base);line-height:1.5;background-color:var(--dark-bg);background-image:linear-gradient(rgba(0,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,.05) 1px,transparent 1px);background-size:40px 40px;background-attachment:fixed;color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:var(--space-lg);overflow-x:hidden}.chess-board.inactive{opacity:.55;pointer-events:none;position:relative}.chess-board.inactive .piece{filter:none!important;opacity:.9}.chess-board.inactive:after{content:"Select options and click Start Game";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-primary);font-size:.9rem;color:var(--text-secondary);background:#0a0f1999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);text-align:center;padding:.75rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:2px}::selection{background:var(--neon-cyan);color:var(--dark-bg)}.game-container{display:flex;gap:var(--space-xl);width:100%;max-width:1400px;flex-wrap:wrap;justify-content:center;align-items:flex-start;animation:fadeIn .8s var(--transition-normal)}.board-area{flex:2 1 600px;display:flex;justify-content:center;min-width:0}.info-area{flex:1 1 350px;display:flex;flex-direction:column;gap:var(--space-lg);max-width:400px;min-width:300px}.board-wrapper{display:flex;align-items:stretch;justify-content:center;padding:var(--space-lg);background:var(--surface-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--border-radius);border:2px solid var(--neon-cyan);box-shadow:var(--neon-shadow-cyan),inset 0 0 20px #00ffff1a;gap:var(--space-sm);transition:all var(--transition-normal)}.board-wrapper:hover{background:var(--surface-glass-hover);box-shadow:var(--neon-shadow-cyan),inset 0 0 30px #00ffff26}.rank-labels,.file-labels{display:flex;align-items:center;justify-content:space-around}.rank-labels{flex-direction:column;width:var(--coordinate-size);height:var(--board-size)}.file-labels{width:var(--board-size);height:var(--coordinate-size)}.board-column{display:flex;flex-direction:column}.coordinates{font-family:var(--font-primary);font-size:var(--font-size-sm);font-weight:700;color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan);transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--border-radius-sm)}.chess-board{display:grid;grid-template-columns:repeat(8,var(--square-size, 60px));grid-template-rows:repeat(8,var(--square-size, 60px));border:3px solid var(--neon-purple);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--neon-shadow-purple),inset 0 0 30px #8000ff1a;background:linear-gradient(135deg,#000,#0a0a0a);position:relative;transition:all var(--transition-normal)}.chess-board:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,var(--neon-purple),var(--neon-cyan),var(--neon-pink),var(--neon-purple));background-size:400% 400%;border-radius:var(--border-radius);z-index:-1;opacity:.3;animation:borderFlow 8s ease-in-out infinite}.square{display:flex;align-items:center;justify-content:center;font-size:clamp(28px,6vw,48px);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);border:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.square.light{background:linear-gradient(135deg,var(--square-light),rgba(240,217,181,.9))}.square.dark{background:linear-gradient(135deg,var(--square-dark),rgba(181,136,99,.9))}.square:hover:not(.selected){transform:scale(1.02);filter:brightness(1.1);z-index:5}.square.light:hover:not(.selected){background:linear-gradient(135deg,var(--square-light-hover),rgba(245,230,211,.95))}.square.dark:hover:not(.selected){background:linear-gradient(135deg,var(--square-dark-hover),rgba(196,149,110,.95))}.square.selected{background:linear-gradient(135deg,var(--square-selected),rgba(255,0,128,.8))!important;box-shadow:inset 0 0 25px var(--neon-pink),0 0 20px #ff008099;z-index:10;transform:scale(1.03);border:2px solid var(--neon-pink);animation:selectedPulse 2s ease-in-out infinite}.square.in-check{background:linear-gradient(135deg,var(--square-check),rgba(255,64,0,.9))!important;animation:checkPulse 1s infinite;z-index:10;border:2px solid var(--neon-orange)}.square.last-move-from,.square.last-move-to{position:relative;animation:lastMoveGlow 3s ease-in-out}.square.last-move-from:after,.square.last-move-to:after{content:"";position:absolute;inset:2px;border:2px solid var(--neon-yellow);border-radius:4px;animation:fadeInOut 3s ease-in-out;pointer-events:none}.square.possible-move{position:relative;animation:possibleMoveFadeIn .3s ease-out}.square.possible-move:after{content:"";position:absolute;width:40%;height:40%;background:radial-gradient(circle,var(--neon-cyan),rgba(0,255,255,.6));border-radius:50%;border:2px solid var(--neon-cyan);z-index:5;animation:possibleMovePulse 2s ease-in-out infinite;box-shadow:0 0 10px var(--neon-cyan)}.square.possible-move.capture:after{width:85%;height:85%;background:transparent;border:3px solid var(--neon-orange);border-radius:var(--border-radius-sm);animation:captureMovePulse 1.5s ease-in-out infinite;box-shadow:inset 0 0 15px #ff40004d,0 0 15px var(--neon-orange)}.square.premove-from,.square.premove-to{position:relative;z-index:8}.square.premove-from:before{content:"";position:absolute;inset:0;border:3px dashed var(--neon-orange);border-radius:6px;animation:premoveDash 2s linear infinite;opacity:.9}.square.premove-to:before{content:"";position:absolute;inset:0;border:3px dashed var(--neon-yellow);border-radius:6px;animation:premoveDash 2s linear infinite reverse;opacity:.9}.coordinates.highlight{background:radial-gradient(circle at center,#ffff00d9,#ffa500a6 60%,#ff8c0040);color:#000;font-weight:900;box-shadow:0 0 6px #ff0c,0 0 14px #ff8c00b3;text-shadow:none;transform:scale(1.15);animation:coordFlash 1.4s ease-out}@keyframes coordFlash{0%{transform:scale(.6);filter:brightness(2)}40%{transform:scale(1.2);filter:brightness(1)}70%{transform:scale(1.15)}to{transform:scale(1)}}.premove-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9;overflow:visible}.premove-svg line{stroke:var(--neon-orange);stroke-width:4;stroke-dasharray:12,8;stroke-linecap:round;opacity:.8;animation:premoveArrow 1.5s ease-in-out infinite;filter:drop-shadow(0 0 6px var(--neon-orange))}.arrow-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.arrow-line{stroke-width:8;opacity:.7}.square-highlight{stroke-width:5;opacity:.6}.arrow-knight-path{stroke-width:6;fill:none;opacity:.7}.premove-arrow{position:absolute;inset:0;pointer-events:none;z-index:9}.premove-arrow svg{width:100%;height:100%}.premove-arrow line{stroke:var(--neon-orange);stroke-width:4;stroke-dasharray:12,8;stroke-linecap:round;opacity:.8;animation:premoveArrow 1.5s ease-in-out infinite;filter:drop-shadow(0 0 6px var(--neon-orange))}.square.drag-source{opacity:.8;transform:scale(1.08);z-index:15;border:3px solid var(--neon-green);box-shadow:0 0 25px #00ff4199,inset 0 0 20px #00ff4133;animation:dragPulse 1s ease-in-out infinite}.square.drag-source .piece{transform:scale(1.15) rotate(5deg);filter:brightness(1.3)}.square.drop-target{background:linear-gradient(45deg,#00ffff40,#00ffff26)!important;border:3px dashed var(--neon-cyan);animation:dropTargetPulse 1s ease-in-out infinite;z-index:12}.square.drop-target.capture{background:linear-gradient(45deg,#ff400040,#ff400026)!important;border-color:var(--neon-orange)}.drag-preview{position:absolute;pointer-events:none;z-index:9999;font-size:clamp(32px,7vw,52px);transform:translate(-50%,-50%) scale(1.1);filter:drop-shadow(0 4px 12px rgba(0,0,0,.7));opacity:.9}.square.invalid-drop{animation:invalidDrop .3s ease-out}.piece{-webkit-user-select:none;user-select:none;pointer-events:auto;transition:transform var(--transition-fast);z-index:1;position:relative;cursor:grab;display:flex;align-items:center;justify-content:center;font-family:"Chess Merida","Chess Leipzig","FreeSerif","DejaVu Sans","Arial Unicode MS",var(--font-secondary),sans-serif;line-height:1;font-size:calc(var(--square-size) * .82);width:100%;height:100%}.piece:empty:before{content:attr(data-symbol);display:block}.piece:active{cursor:grabbing}.piece[draggable=true]{cursor:grab}.piece[draggable=false]{cursor:default}.piece.white{color:#fff;text-shadow:0 0 2px #000,0 0 6px #000,0 0 10px var(--neon-cyan);filter:drop-shadow(1px 1px 2px rgba(0,0,0,.7))}.piece.black{color:#121212;text-shadow:0 0 2px #fff,0 0 6px #fff,0 0 10px var(--neon-purple);filter:drop-shadow(1px 1px 2px rgba(255,255,255,.5))}.square:hover .piece{transform:scale(1.05)}.game-header{text-align:center;padding-bottom:var(--space-lg);border-bottom:2px solid rgba(0,255,255,.3);margin-bottom:var(--space-xl);position:relative}.game-header:after{content:"";position:absolute;bottom:-2px;left:50%;transform:translate(-50%);width:100px;height:2px;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);animation:headerGlow 2s ease-in-out infinite alternate}.game-header h1{font-family:var(--font-primary);font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 var(--space-sm) 0;color:var(--neon-cyan);text-transform:uppercase;animation:neonPulse 3s ease-in-out infinite;font-weight:900;letter-spacing:.1em;position:relative}.game-header h1:before{content:"▲";position:absolute;left:-40px;top:50%;transform:translateY(-50%) rotate(-90deg);font-size:.6em;color:var(--neon-purple);animation:neonPulse 3s ease-in-out infinite reverse}.game-header h1:after{content:"▲";position:absolute;right:-40px;top:50%;transform:translateY(-50%) rotate(90deg);font-size:.6em;color:var(--neon-purple);animation:neonPulse 3s ease-in-out infinite reverse}.status-text{font-family:var(--font-primary);font-size:var(--font-size-lg);font-weight:700;color:var(--neon-yellow);text-shadow:0 0 10px var(--neon-yellow);padding:var(--space-lg);background:linear-gradient(135deg,var(--dark-glass),rgba(10,15,25,.9));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--neon-purple);border-radius:var(--border-radius);text-align:center;transition:all var(--transition-normal);min-height:70px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.05em}.status-text:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:2px;background:linear-gradient(90deg,transparent,currentColor,transparent);transition:left .8s ease-in-out}.status-text:hover:before{left:100%}.status-text.win{color:var(--neon-green);border-color:var(--neon-green);text-shadow:0 0 15px var(--neon-green);background:linear-gradient(135deg,var(--dark-glass),rgba(0,255,65,.1))}.status-text.draw{color:var(--neon-yellow);border-color:var(--neon-yellow);text-shadow:0 0 15px var(--neon-yellow);background:linear-gradient(135deg,var(--dark-glass),rgba(255,255,0,.1))}.status-text.thinking{animation:clockPulse 1.5s ease-in-out infinite;border-color:var(--neon-cyan);color:var(--neon-cyan);text-shadow:0 0 15px var(--neon-cyan)}.game-setup-card,.move-history-card{background:linear-gradient(135deg,var(--dark-glass),rgba(10,15,25,.8));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--neon-purple);border-radius:var(--border-radius);padding:var(--space-xl);transition:all var(--transition-normal);position:relative;overflow:hidden}.game-setup-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);transition:left .8s ease-in-out}.move-history-card:before{content:"";position:absolute;top:0;right:0;width:3px;height:100%;background:linear-gradient(180deg,transparent,var(--neon-cyan),var(--neon-purple),transparent);opacity:.6;animation:historyFlow 4s ease-in-out infinite}.game-setup-card:hover:before{left:100%}.game-setup-card:hover,.move-history-card:hover{border-color:var(--neon-cyan);box-shadow:0 0 30px #0ff3;transform:translateY(-2px)}.game-setup-card h3,.move-history-card h3{font-family:var(--font-primary);color:var(--neon-cyan);text-transform:uppercase;margin-bottom:var(--space-lg);text-shadow:0 0 10px var(--neon-cyan);text-align:center;font-size:var(--font-size-xl);font-weight:900;letter-spacing:.1em;position:relative}.game-setup-card h3:after,.move-history-card h3:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:100px;height:2px;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent)}.move-list{flex:1;overflow-y:auto;padding:var(--space-md);background:#0000004d;border-radius:var(--border-radius-sm);border:1px solid rgba(128,0,255,.3);max-height:240px;scrollbar-width:thin;scrollbar-color:var(--neon-purple) transparent}.move-list::-webkit-scrollbar{width:6px}.move-list::-webkit-scrollbar-track{background:transparent}.move-list::-webkit-scrollbar-thumb{background:var(--neon-purple);border-radius:3px}.move-entry{display:flex;align-items:center;padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-xs);border-radius:var(--border-radius-sm);font-family:var(--font-secondary);font-size:var(--font-size-sm);color:var(--text-secondary);transition:all var(--transition-fast);cursor:pointer}.move-entry:hover{background:#00ffff1a;color:var(--neon-cyan)}.move-number{font-weight:700;color:var(--neon-purple);margin-right:var(--space-sm);min-width:30px}.move-notation{font-family:var(--font-primary);font-weight:600;letter-spacing:.02em}.move-entry.current{background:linear-gradient(135deg,var(--neon-cyan),rgba(0,255,255,.2));color:var(--dark-bg);font-weight:700}.move-entry.current .move-notation{text-shadow:none}.history-controls{display:flex;gap:var(--space-sm);margin-top:var(--space-md);justify-content:center}.history-btn{background:transparent;border:1px solid var(--neon-purple);color:var(--neon-purple);padding:var(--space-xs) var(--space-sm);border-radius:var(--border-radius-sm);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-primary);font-size:var(--font-size-xs)}.history-btn:hover{background:var(--neon-purple);color:var(--dark-bg)}.config-section{margin-bottom:var(--space-2xl);position:relative}.config-section:last-of-type{margin-bottom:var(--space-xl)}.config-section fieldset{border:1px solid rgba(128,0,255,.4);border-radius:var(--border-radius-sm);padding:var(--space-lg);background:#0000004d;position:relative;transition:all var(--transition-normal)}.config-section fieldset:hover{border-color:#8000ffb3;background:#0006;box-shadow:inset 0 0 20px #8000ff1a}.config-section legend{font-family:var(--font-primary);font-size:var(--font-size-sm);font-weight:700;color:var(--neon-purple);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-xs) var(--space-md);background:linear-gradient(135deg,var(--dark-bg),rgba(128,0,255,.1));border:1px solid var(--neon-purple);border-radius:var(--border-radius-sm);text-shadow:0 0 8px var(--neon-purple);position:relative;margin:0 auto var(--space-md) auto;width:fit-content}.config-section legend:before{content:"◆";position:absolute;left:-12px;top:50%;transform:translateY(-50%);color:var(--neon-purple);font-size:.8em;text-shadow:0 0 8px var(--neon-purple)}.color-selection{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-top:var(--space-lg)}.color-btn{font-family:var(--font-primary);font-weight:600;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.03em;padding:var(--space-md);border:2px solid rgba(0,255,255,.5);border-radius:var(--border-radius-sm);background:#0000004d;color:var(--text-secondary);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center;position:relative;overflow:hidden;min-height:56px;display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.color-btn:hover:not(.selected):not([aria-checked=true]){border-color:var(--neon-cyan);color:var(--neon-cyan);background:#00ffff0d;transform:translateY(-1px);box-shadow:0 4px 15px #0ff3}.color-btn.selected,.color-btn[aria-checked=true]{background:linear-gradient(135deg,var(--neon-cyan),rgba(0,255,255,.9));color:var(--dark-bg);border-color:var(--neon-cyan);box-shadow:0 0 25px #0ff6,inset 0 0 20px #fff3;text-shadow:none;font-weight:900;transform:scale(1.02);animation:colorToggle .4s ease-out}.color-btn.selected:after,.color-btn[aria-checked=true]:after{content:"✓";position:absolute;top:6px;right:8px;font-size:16px;font-weight:900;color:var(--dark-bg);text-shadow:0 0 4px rgba(0,0,0,.5);animation:checkmarkPop .3s ease-out .1s both}.color-indicator{display:inline-block;width:20px;height:20px;border-radius:4px;border:2px solid currentColor;position:relative;transition:all var(--transition-normal)}.color-indicator.white{background:linear-gradient(135deg,#fff,#f8f8f8);box-shadow:inset 0 0 8px #00000026,0 2px 4px #0003}.color-indicator.black{background:linear-gradient(135deg,#1a1a1a,#000);box-shadow:inset 0 0 8px #ffffff26,0 2px 4px #0000004d}.game-select{width:100%;padding:var(--space-md) var(--space-lg);background:linear-gradient(135deg,var(--dark-bg),rgba(10,10,10,.9));border:2px solid var(--neon-purple);border-radius:var(--border-radius-sm);color:var(--text-primary);font-family:var(--font-secondary);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-normal);margin-top:var(--space-md);min-height:52px;position:relative;appearance:none;text-align:center;text-align-last:center;background-image:linear-gradient(45deg,transparent 50%,var(--neon-purple) 50%),linear-gradient(135deg,var(--neon-purple) 50%,transparent 50%);background-position:calc(100% - 20px) center,calc(100% - 15px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.game-select:focus{border-color:var(--neon-cyan);box-shadow:0 0 15px #00ffff4d;outline:none}.game-select:hover{border-color:var(--neon-cyan);background:linear-gradient(135deg,#0a0a0af2,#00ffff0d)}.game-select option{background:var(--dark-bg);color:var(--text-primary);padding:var(--space-sm);font-weight:500;text-align:center}.game-select option:checked{background:var(--neon-purple);color:var(--dark-bg);font-weight:700}#start-game{width:100%;font-family:var(--font-primary);font-weight:900;font-size:var(--font-size-lg);text-transform:uppercase;letter-spacing:.1em;padding:var(--space-lg) var(--space-xl);border:3px solid var(--neon-pink);border-radius:var(--border-radius);background:linear-gradient(135deg,transparent,rgba(255,0,128,.1));color:var(--neon-pink);cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden;min-height:64px;margin-top:var(--space-xl);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}#start-game:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,0,128,.2),rgba(255,0,128,.4),rgba(255,0,128,.2),transparent);transition:left .6s ease-in-out}#start-game:hover:before{left:100%}#start-game:hover:not(:disabled){background:linear-gradient(135deg,var(--neon-pink),rgba(255,0,128,.8));color:var(--dark-bg);box-shadow:0 0 30px #ff008080,0 6px 20px #0000004d;transform:translateY(-3px);text-shadow:none}#start-game:active:not(:disabled){transform:translateY(-1px);box-shadow:0 0 20px #ff008066,0 3px 10px #0000004d}#start-game:disabled{opacity:.4;cursor:not-allowed;transform:none;background:#ff00801a;color:#ff008080;border-color:#ff008080}#start-game .loading-spinner{display:none;width:22px;height:22px;border:3px solid transparent;border-top:3px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}#start-game.loading .loading-spinner{display:inline-block}#start-game.loading{pointer-events:none;color:var(--neon-cyan);border-color:var(--neon-cyan)}.player-cards{display:flex;flex-direction:column;gap:var(--space-md)}.player-card{padding:var(--space-lg);background:linear-gradient(135deg,var(--dark-glass),rgba(10,15,25,.8));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--border-radius);border:2px solid var(--neon-purple);transition:all var(--transition-normal);position:relative;overflow:hidden}.player-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--neon-green),transparent);transition:left .6s ease-in-out}.player-card.active{border-color:var(--neon-green);box-shadow:0 0 25px #00ff414d;background:linear-gradient(135deg,var(--dark-glass-light),rgba(0,255,65,.05))}.player-card.active:before{left:100%}.player-info-section{display:flex;justify-content:space-between;align-items:flex-start;flex-direction:column;gap:var(--space-sm)}.player-name{font-family:var(--font-primary);font-weight:700;font-size:var(--font-size-base);color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em}.player-card.active .player-name{color:var(--neon-green);text-shadow:0 0 10px var(--neon-green)}.player-timer{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:var(--space-sm)}.player-clock{font-family:Courier New,monospace;font-size:var(--font-size-2xl);font-weight:900;background:linear-gradient(135deg,#000c,#0009);padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius-sm);border:2px solid rgba(255,255,255,.1);transition:all var(--transition-normal);min-width:100px;text-align:center;color:var(--text-secondary);box-shadow:inset 0 0 10px #00000080}.player-card.active .player-clock{color:var(--neon-green);border-color:var(--neon-green);text-shadow:0 0 15px var(--neon-green);background:linear-gradient(135deg,#00ff411a,#000c)}.player-clock.warning{color:var(--neon-orange)!important;border-color:var(--neon-orange)!important;animation:clockPulse 1s ease-in-out infinite;background:linear-gradient(135deg,#ff40001a,#000c)}.player-clock.danger{color:var(--neon-pink)!important;border-color:var(--neon-pink)!important;animation:clockUrgent .5s ease-in-out infinite;background:linear-gradient(135deg,#ff008026,#000c)}.player-status{font-family:var(--font-secondary);font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.player-card.active .player-status{color:var(--neon-green)}.ai-thinking{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg);background:linear-gradient(135deg,var(--dark-glass),rgba(0,255,255,.05));border:2px solid var(--neon-cyan);border-radius:var(--border-radius);font-family:var(--font-primary);font-size:var(--font-size-sm);font-weight:700;color:var(--neon-cyan);text-transform:uppercase;letter-spacing:.05em;text-shadow:0 0 10px var(--neon-cyan);position:relative;overflow:hidden;animation:thinkingPulse 2s ease-in-out infinite}.ai-thinking:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,255,.1),rgba(0,255,255,.2),rgba(0,255,255,.1),transparent);animation:thinkingSweep 3s ease-in-out infinite}.thinking-spinner{width:24px;height:24px;border:3px solid transparent;border-top:3px solid var(--neon-cyan);border-right:3px solid var(--neon-purple);border-radius:50%;animation:spin 1s linear infinite;filter:drop-shadow(0 0 8px var(--neon-cyan))}.thinking-text{position:relative}.thinking-text:after{content:"";animation:thinkingDots 2s steps(4,end) infinite}.move-history-card{height:320px;display:flex;flex-direction:column}.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.btn{font-family:var(--font-primary);font-weight:700;font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;border-radius:25px;background:transparent;color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal);border:2px solid;padding:var(--space-sm) var(--space-md);position:relative;overflow:hidden;min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s}.btn:hover:before{left:100%}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{grid-column:1 / -1;border-color:var(--neon-pink);color:var(--neon-pink)}.btn-primary:hover:not(:disabled){background:var(--neon-pink);color:var(--dark-bg);box-shadow:var(--neon-shadow-pink);text-shadow:none}.btn-secondary{border-color:var(--neon-cyan);color:var(--neon-cyan)}.btn-secondary:hover:not(:disabled){background:var(--neon-cyan);color:var(--dark-bg);box-shadow:var(--neon-shadow-cyan);text-shadow:none}.btn-danger{border-color:var(--neon-orange);color:var(--neon-orange)}.btn-danger:hover:not(:disabled){background:var(--neon-orange);color:var(--dark-bg);text-shadow:none}.modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:var(--z-modal);animation:fadeIn .3s var(--transition-normal)}.modal-content{background:var(--dark-bg);border:3px solid var(--neon-purple);border-radius:var(--border-radius);padding:var(--space-xl);text-align:center;animation:slideUp .3s var(--transition-normal);max-width:90vw}.modal-content h3{font-family:var(--font-primary);color:var(--neon-purple);margin-bottom:var(--space-lg);font-size:var(--font-size-xl);text-transform:uppercase}.promotion-options{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap}.promotion-piece{font-size:3rem;padding:var(--space-md);cursor:pointer;border-radius:var(--border-radius);border:2px solid var(--neon-purple);background:var(--dark-glass);transition:all var(--transition-fast);min-width:80px;min-height:80px;display:flex;align-items:center;justify-content:center}.promotion-piece:hover{background:var(--neon-purple);color:var(--dark-bg);transform:scale(1.1);box-shadow:0 0 20px var(--neon-purple)}.promotion-piece:focus{outline:2px solid var(--neon-cyan);outline-offset:2px}@media (max-width: 1024px){.game-container{flex-direction:column;align-items:center;gap:var(--space-lg)}.info-area{width:100%;max-width:600px}.board-wrapper{padding:var(--space-md)}}@media (max-width: 768px){body{padding:var(--space-md)}:root{--square-size: clamp(38px, 12vw, 54px);--space-lg: 1rem;--space-xl: 1.5rem}.piece{font-size:calc(var(--square-size) * .85)}.piece.white,.piece.black{text-shadow:0 0 4px rgba(0,0,0,.6);filter:none}.chess-board.inactive .piece{opacity:.75}.game-container{gap:var(--space-md)}.board-wrapper{padding:var(--space-sm);gap:var(--space-xs);-webkit-backdrop-filter:none;backdrop-filter:none;background:#00ffff14}.chess-board:before{display:none}.square.selected{animation:none}.controls-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.btn-primary{grid-column:auto}.coordinates{font-size:10px;width:20px;height:20px}.info-area{min-width:unset}.player-cards{gap:var(--space-sm)}.player-card{padding:var(--space-md)}.player-clock{font-size:var(--font-size-xl);min-width:80px}.color-selection{grid-template-columns:1fr;gap:var(--space-sm)}.color-btn{min-height:52px;font-size:var(--font-size-xs)}.color-indicator{width:18px;height:18px}.config-section legend{font-size:var(--font-size-xs);padding:var(--space-xs) var(--space-sm)}.config-section fieldset{padding:var(--space-md)}#start-game{min-height:60px;font-size:var(--font-size-base);padding:var(--space-md) var(--space-lg)}.game-setup-card,.move-history-card{padding:var(--space-lg);-webkit-backdrop-filter:none;backdrop-filter:none;background:#0a0f19e6}.move-history-card{height:280px}.square.possible-move:after{width:35%;height:35%}.square.possible-move.capture:after{width:80%;height:80%}.square.drag-source{transform:scale(1.1);border-width:3px}.square.drop-target{border-width:3px}.drag-preview{font-size:clamp(40px,12vw,60px)}.promotion-options{gap:var(--space-sm)}.promotion-piece{min-width:60px;min-height:60px;font-size:2rem;padding:var(--space-sm)}.game-header h1:before,.game-header h1:after{display:none}.ai-thinking:before{display:none}}@media (max-width: 480px){:root{--square-size: clamp(34px, 13vw, 48px);--coordinate-size: 20px;--font-size-3xl: 1.5rem}.piece{font-size:calc(var(--square-size) * .87)}.piece.white,.piece.black{text-shadow:0 0 3px rgba(0,0,0,.7)}.game-header h1{font-size:var(--font-size-3xl)}.modal-content{padding:var(--space-md);margin:var(--space-md)}.game-setup-card,.move-history-card{padding:var(--space-md)}.config-section{margin-bottom:var(--space-lg)}.color-indicator{width:16px;height:16px}.color-btn.selected:after,.color-btn[aria-checked=true]:after{font-size:14px;top:4px;right:6px}.status-text{min-height:60px;font-size:var(--font-size-base);padding:var(--space-md)}.move-history-card{height:240px}.player-clock{font-size:var(--font-size-lg);min-width:70px;padding:var(--space-xs) var(--space-sm)}}.game-container{contain:layout}.chess-board{contain:layout style paint}.square{contain:layout style}.move-list{contain:size layout style}.player-cards{contain:layout style}@media print{*{animation:none!important;transition:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important}body{background:#fff!important;color:#000!important}.game-container{flex-direction:column;gap:1rem}.board-wrapper{border:2px solid black;background:#fff!important;padding:1rem}.square.light{background:#f5f5f5!important;border:1px solid #ddd}.square.dark{background:#e0e0e0!important;border:1px solid #ccc}.piece{color:#000!important;filter:none!important}.piece.white{font-weight:700}.coordinates{color:#000!important}.info-area>*:not(.move-history-card){display:none!important}.move-history-card{background:#fff!important;border:1px solid black;page-break-inside:avoid}}.board-resize-handle{position:absolute;right:6px;bottom:6px;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,#00ffff1a,#00ffff59);border:1px solid var(--neon-cyan);border-radius:4px;box-shadow:0 0 6px #00ffff80,inset 0 0 8px #00ffff4d;z-index:80}.board-resize-handle:after{content:"";position:absolute;inset:3px;background:repeating-linear-gradient(135deg,rgba(0,255,255,.9) 0 2px,transparent 2px 4px);opacity:.6;border-radius:2px}.board-resize-handle:hover{opacity:1;filter:brightness(1.2)}.board-wrapper{position:relative}.chess-board{transition:width .15s ease,height .15s ease}@media (max-width: 900px){.board-resize-handle{display:none!important}.board-wrapper{padding:var(--space-md)}}
