@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100vh;overflow:hidden;background:#000}.about-button{position:fixed;top:24px;right:24px;z-index:200;width:40px;height:40px;border-radius:50%;background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#ffffffb3;font-size:20px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;transition:all .3s ease-out}.about-button:hover{background:#fff3;color:#fff;transform:scale(1.05)}.about-button:active{transform:scale(.95)}.about-button.hidden{opacity:0;transform:translateY(-10px);pointer-events:none}.about-modal{position:fixed;top:24px;right:24px;width:380px;max-height:calc(100vh - 48px);overflow-y:auto;z-index:300;background:#0f0f14eb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;box-shadow:0 4px 24px #0006,0 0 0 1px #ffffff0d inset;animation:slideInAbout .3s ease-out;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}@keyframes slideInAbout{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.about-modal .close-button{position:absolute;top:16px;right:16px;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:8px;color:#fff9;font-size:24px;line-height:1;cursor:pointer;transition:all .2s ease}.about-modal .close-button:hover{background:#fff3;color:#fff}.about-title{font-size:22px;font-weight:700;margin:0 0 16px;background:linear-gradient(135deg,#fff,#a0a0a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.about-description{color:#ffffffb3;font-size:14px;line-height:1.6;margin-bottom:24px}.tech-section{margin-bottom:24px}.tech-section h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#ffffff80;margin:0 0 12px}.tech-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.tech-list li{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#ffffff0d;border-radius:8px;border:1px solid rgba(255,255,255,.08)}.tech-name{font-weight:600;font-size:13px;color:#fff}.tech-desc{font-size:11px;color:#fff6}.credits-section{padding-top:16px;border-top:1px solid rgba(255,255,255,.1);text-align:center}.github-link{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#ffffff1a;border-radius:8px;color:#fff;text-decoration:none;font-size:13px;font-weight:500;transition:all .2s ease}.github-link:hover{background:#fff3}.github-icon{width:18px;height:18px}.about-modal::-webkit-scrollbar{width:6px}.about-modal::-webkit-scrollbar-track{background:transparent}.about-modal::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.about-modal::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.side-selection-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:1}.side-selection-modal{position:relative;width:90%;max-width:600px;padding:48px 32px;background:#0f0f14f2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:24px;box-shadow:0 8px 32px #0009,0 0 0 1px #ffffff0d inset;opacity:1;transform:none;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.side-selection-modal .close-button{position:absolute;top:16px;right:16px;width:36px;height:36px;background:#ffffff1a;border:none;border-radius:8px;color:#fff9;font-size:28px;line-height:1;cursor:pointer;transition:all .2s ease}.side-selection-modal .close-button:hover{background:#fff3;color:#fff}.modal-title{margin:0 0 8px;font-size:32px;font-weight:700;text-align:center;letter-spacing:-.5px;background:linear-gradient(135deg,#fff,#a0a0a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-subtitle{margin:0 0 40px;font-size:14px;text-align:center;color:#ffffff80;letter-spacing:.5px}.side-options{display:flex;gap:24px;justify-content:center}.side-option{flex:1;max-width:220px;padding:32px 24px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:16px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:12px}.side-option:hover{background:#ffffff1a;border-color:#ffffff4d;transform:translateY(-4px);box-shadow:0 8px 24px #0006}.side-option:active{transform:translateY(-2px)}.side-icon{font-size:72px;line-height:1;margin-bottom:8px}.white-option .side-icon{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5)}.black-option .side-icon{color:#404040;text-shadow:0 0 20px rgba(255,255,255,.2)}.side-label{font-size:18px;font-weight:600;color:#fff;letter-spacing:.5px}.side-description{font-size:13px;color:#ffffff80;letter-spacing:.3px}@media(max-width:768px){.side-selection-modal{padding:40px 24px}.modal-title{font-size:24px}.modal-subtitle{font-size:12px;margin-bottom:32px}.side-options{flex-direction:column;gap:16px}.side-option{max-width:100%;padding:24px 20px}.side-icon{font-size:56px}.side-label{font-size:16px}.side-description{font-size:12px}}.game-controls{position:fixed;top:24px;right:80px;z-index:200;display:flex;flex-direction:column;gap:8px;transition:all .3s ease-out}.game-controls.hidden{opacity:0;transform:translateY(-10px);pointer-events:none}.game-control-button{padding:8px 16px;border-radius:20px;background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#ffffffb3;font-size:13px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.5px;cursor:pointer;transition:all .3s ease-out;display:flex;align-items:center;justify-content:center;gap:4px}.game-control-button:hover{background:#fff3;color:#fff;transform:scale(1.05)}.game-control-button:active{transform:scale(.95)}.game-control-button.reset-button{background:#ffb46426;border-color:#ffb4644d;color:#ffc896cc}.game-control-button.reset-button:hover{background:#ffb46440;color:#fc9}@media(max-width:768px){.game-controls{top:16px;right:68px}.game-control-button{padding:6px 12px;font-size:12px}}.turn-indicator-container{position:fixed;top:40px;left:50%;transform:translate(-50%);z-index:150}.turn-indicator{padding:10px 24px;border-radius:24px;background:#0009;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;gap:2px;animation:fadeIn .3s ease-out}.turn-indicator .turn-text{color:#ffffffe6;font-size:14px;font-weight:500;font-family:Orbitron,sans-serif;letter-spacing:1px;text-transform:uppercase}.turn-indicator.thinking{background:#6496ff33;border-color:#6496ff66}.turn-indicator.thinking .turn-text{color:#96c8fff2}.thinking-dots{display:inline-flex;margin-left:2px}.thinking-dots .dot{color:#96c8fff2;font-size:14px;font-weight:500;font-family:Orbitron,sans-serif;animation:dotPulse 1.4s ease-in-out infinite}.thinking-dots .dot:nth-child(1){animation-delay:0s}.thinking-dots .dot:nth-child(2){animation-delay:.2s}.thinking-dots .dot:nth-child(3){animation-delay:.4s}@keyframes dotPulse{0%,60%,to{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}.turn-indicator.game-over{background:#ffc86433;border-color:#ffc86466;padding:12px 28px}.turn-indicator.game-over .turn-text{color:#ffdc96f2;font-size:16px}.turn-indicator.game-over-loss{background:#ff505033;border-color:#ff505066;padding:12px 28px}.turn-indicator.game-over-loss .turn-text{color:#ff7878f2;font-size:16px}.game-record{position:fixed;top:20px;left:20px;z-index:150;padding:12px 16px;border-radius:12px;background:#0009;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);font-family:Orbitron,sans-serif;animation:fadeIn .3s ease-out}.game-record .record-row{display:flex;justify-content:space-between;gap:16px;margin-bottom:4px}.game-record .record-row:last-child{margin-bottom:0}.game-record .record-label{color:#fff9;font-size:12px;font-weight:500;letter-spacing:.5px}.game-record .record-value{color:#ffffffe6;font-size:12px;font-weight:600;text-align:right;min-width:20px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.turn-indicator-container{top:30px}.turn-indicator{padding:8px 18px}.turn-indicator .turn-text,.thinking-dots .dot{font-size:12px}.game-record{top:15px;left:15px;padding:10px 14px}.game-record .record-label,.game-record .record-value{font-size:11px}}.info-panel{position:fixed;top:24px;width:500px;max-height:calc(100vh - 48px);overflow-y:auto;background:#0f0f14d9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;box-shadow:0 4px 24px #0006,0 0 0 1px #ffffff0d inset;transition:opacity .25s ease-out,transform .25s ease-out;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.info-panel.right{right:24px;animation:slideInRight .3s ease-out}.info-panel.left{left:24px;animation:slideInLeft .3s ease-out}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.info-panel.right.closing{opacity:0;transform:translate(20px);pointer-events:none}.info-panel.left.closing{opacity:0;transform:translate(-20px);pointer-events:none}.close-button{position:absolute;top:16px;right:16px;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:8px;color:#fff9;font-size:24px;line-height:1;cursor:pointer;transition:all .2s ease}.close-button:hover{background:#fff3;color:#fff}.piece-header{margin-bottom:16px}.piece-color{display:inline-block;padding:4px 10px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.piece-color.white{background:linear-gradient(135deg,#f5f5f5,#e0e0e0);color:#333}.piece-color.black{background:linear-gradient(135deg,#333,#1a1a1a);color:#fff;border:1px solid rgba(255,255,255,.2)}.piece-title{font-size:28px;font-weight:700;margin:0;background:linear-gradient(135deg,#fff,#a0a0a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.piece-preview{width:100%;height:160px;margin-bottom:16px;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at center,#282832cc,#0f0f14e6);border:1px solid rgba(255,255,255,.08)}.piece-preview canvas{cursor:grab}.piece-preview canvas:active{cursor:grabbing}.piece-description{color:#ffffffb3;font-size:14px;line-height:1.6;margin-bottom:20px}.section{margin-bottom:20px}.section h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#ffffff80;margin:0 0 10px}.movement-list,.special-rules-list{list-style:none;padding:0;margin:0}.movement-list li,.special-rules-list li{position:relative;padding-left:16px;margin-bottom:8px;font-size:13px;line-height:1.5;color:#ffffffd9}.movement-list li:before{content:"→";position:absolute;left:0;color:#4ade80}.special-rules-list li:before{content:"★";position:absolute;left:0;color:#fbbf24}.pattern-section{display:flex;flex-direction:column;align-items:center}.pattern-section h3{align-self:flex-start}.pattern-grid{display:flex;flex-direction:column;gap:2px;padding:12px;background:#0000004d;border-radius:8px}.pattern-row{display:flex;gap:2px}.pattern-cell{width:28px;height:28px;border-radius:4px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.pattern-cell.can-move{background:#4ade804d;border-color:#4ade8080;box-shadow:0 0 8px #4ade8033}.pattern-cell.piece-position{background:linear-gradient(135deg,#fff,#ccc);border-color:#fff;box-shadow:0 0 12px #fff6}.piece-value{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#ffffff0d;border-radius:8px;margin-bottom:16px}.value-label{font-size:12px;color:#ffffff80;text-transform:uppercase;letter-spacing:.5px}.value-amount{font-size:16px;font-weight:700;color:#fff}.hint{font-size:11px;color:#ffffff4d;text-align:center;margin:0}.info-panel::-webkit-scrollbar{width:6px}.info-panel::-webkit-scrollbar-track{background:transparent}.info-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.info-panel::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.loader-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;z-index:1000}.loader-spinner{width:60px;height:60px;margin-bottom:24px;border:3px solid rgba(255,255,255,.1);border-top-color:#4ade80;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loader-progress{font-family:SF Mono,Monaco,Consolas,monospace;font-size:32px;font-weight:700;color:#fff;margin-bottom:8px}.loader-text{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:#ffffff80;letter-spacing:.5px}.title-overlay{position:fixed;top:24px;left:24px;z-index:100;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:1;transform:translateY(0);transition:opacity .3s ease-out,transform .3s ease-out}.title-overlay.hidden{opacity:0;transform:translateY(-10px);pointer-events:none}.title{font-family:Orbitron,sans-serif;font-size:28px;font-weight:700;letter-spacing:4px;text-transform:uppercase;margin:0 0 6px;background:linear-gradient(90deg,#fff,#a0a0a0,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 8px rgba(255,255,255,.15))}.subtitle{font-family:Orbitron,sans-serif;font-size:10px;font-weight:400;letter-spacing:3px;margin:0;color:#fff6;text-transform:uppercase}.play-section{margin-top:16px;pointer-events:auto}.play-button-inline{padding:10px 20px;border-radius:24px;background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fffc;cursor:pointer;transition:all .3s ease-out;display:flex;align-items:center;gap:8px;justify-content:center}.play-button-inline:hover{background:#fff3;color:#fff;transform:scale(1.05);box-shadow:0 0 20px #ffffff4d}.play-button-inline:active{transform:scale(.98)}.play-icon{font-size:20px;line-height:1;display:flex;align-items:center;position:relative;top:-3px}.play-text{font-family:Orbitron,sans-serif;font-size:11px;font-weight:400;letter-spacing:2px;color:#fffc;text-transform:uppercase;white-space:nowrap}@media(max-width:768px){.title-overlay{top:16px;left:16px}.title{font-size:20px;letter-spacing:2px}.subtitle{font-size:8px;letter-spacing:2px}.play-section{margin-top:12px}.play-button-inline{padding:8px 16px;gap:6px}.play-icon{font-size:18px}.play-text{font-size:9px;letter-spacing:1px}}.app-container{width:100%;height:100vh;background:radial-gradient(ellipse at center,#1a1510,#0d0a08,#000)}canvas{display:block}