.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;position:relative;overflow:hidden}.auth-container:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1px);background-size:40px 40px;animation:authBackgroundMove 15s linear infinite;pointer-events:none}@keyframes authBackgroundMove{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-box{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;padding:40px;width:100%;max-width:450px;position:relative;z-index:1;animation:floatIn .8s ease-out}@keyframes floatIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.auth-title{text-align:center;color:#667eea;font-size:32px;margin-bottom:30px;font-weight:700}.auth-tabs{display:flex;gap:10px;margin-bottom:30px;background:#f5f5f5;border-radius:10px;padding:5px}.auth-tab{flex:1;padding:12px 20px;border:none;background:transparent;color:#666;font-size:16px;font-weight:600;cursor:pointer;border-radius:8px;transition:all .3s}.auth-tab.active{background:#fff;color:#667eea;box-shadow:0 2px 8px #0000001a}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{color:#333;font-weight:600;font-size:14px}.form-group input{padding:14px 16px;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;transition:all .3s}.form-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.message{padding:12px 16px;border-radius:8px;font-size:14px;font-weight:500}.message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.auth-button{padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s;margin-top:10px}.auth-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.auth-button:disabled{opacity:.6;cursor:not-allowed}.button-loading{display:flex;align-items:center;gap:10px;justify-content:center}.spinner{width:16px;height:16px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.auth-hint{text-align:center;margin-top:15px}.auth-hint small{color:#666;font-size:13px;background:#f8f9fa;padding:8px 16px;border-radius:20px;display:inline-block}.room-list-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);position:relative;overflow:hidden}.room-list-container:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1px);background-size:50px 50px;animation:backgroundMove 20s linear infinite;pointer-events:none}@keyframes backgroundMove{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.room-header{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.2);padding:20px 40px;position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.header-title{color:#fff;font-size:32px;font-weight:700;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.user-info{display:flex;align-items:center;gap:20px}.username{color:#fff;font-size:16px;font-weight:600;background:#fff3;padding:10px 20px;border-radius:25px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.logout-btn{background:#ffffffe6;color:#764ba2;border:none;padding:10px 24px;border-radius:25px;font-weight:600;cursor:pointer;transition:all .3s;font-size:14px}.logout-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.room-content{max-width:1200px;margin:0 auto;padding:60px 40px}.welcome-section{text-align:center;margin-bottom:50px}.welcome-title{color:#fff;font-size:42px;font-weight:700;margin-bottom:15px;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.welcome-subtitle{color:#ffffffe6;font-size:18px;font-weight:400}.action-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:50px}.action-card{background:#fff;border-radius:20px;padding:40px 30px;text-align:center;cursor:pointer;transition:all .3s;box-shadow:0 10px 30px #0003}.action-card:hover{transform:translateY(-10px);box-shadow:0 20px 50px #0000004d}.create-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.join-card{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.card-icon{font-size:64px;margin-bottom:20px}.action-card h3{font-size:28px;font-weight:700;margin-bottom:12px}.action-card p{font-size:16px;margin-bottom:25px;opacity:.9}.card-button{background:#fff;color:#764ba2;border:none;padding:14px 40px;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s}.create-card .card-button{color:#667eea}.join-card .card-button{color:#f5576c}.card-button:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.room-message{padding:16px 24px;border-radius:12px;font-size:16px;font-weight:600;margin-bottom:30px;text-align:center;animation:slideIn .3s ease-out}.room-message.success{background:#fffffff2;color:#22c55e}.room-message.error{background:#fffffff2;color:#ef4444}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.my-rooms-section{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:30px;border:1px solid rgba(255,255,255,.2)}.section-title{color:#fff;font-size:24px;font-weight:700;margin-bottom:20px;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.room-item{background:#fff;border-radius:15px;padding:20px;transition:all .3s}.room-item:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0003}.room-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:15px;border-bottom:2px solid #f0f0f0}.room-code{font-size:18px;font-weight:700;color:#667eea}.room-status{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700}.status-waiting{background:#fef3c7;color:#f59e0b}.status-playing{background:#dcfce7;color:#22c55e}.status-finished{background:#f3f4f6;color:#6b7280}.room-item-info{display:flex;flex-direction:column;gap:8px;margin-bottom:15px;font-size:14px;color:#666}.enter-room-btn{width:100%;padding:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s}.enter-room-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #667eea66}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:25px;padding:40px;max-width:500px;width:90%;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.modal-title{font-size:28px;font-weight:700;color:#667eea;margin-bottom:15px;text-align:center}.modal-description{color:#666;font-size:16px;text-align:center;margin-bottom:30px;line-height:1.6}.room-code-input{width:100%;padding:16px 20px;border:2px solid #e0e0e0;border-radius:12px;font-size:18px;font-weight:600;text-align:center;letter-spacing:4px;margin-bottom:30px;transition:all .3s;text-transform:uppercase}.room-code-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.modal-actions{display:flex;gap:15px}.modal-btn{flex:1;padding:16px;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s}.cancel-btn{background:#f3f4f6;color:#6b7280}.cancel-btn:hover:not(:disabled){background:#e5e7eb}.confirm-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.modal-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.room-header{padding:15px 20px}.header-content{flex-direction:column;gap:15px;text-align:center}.header-title{font-size:24px}.room-content{padding:40px 20px}.welcome-title{font-size:32px}.action-cards{grid-template-columns:1fr}.modal-content{padding:30px 20px}}.chess-board-container{display:flex;justify-content:center;align-items:center;padding:20px}.board-border{background:linear-gradient(135deg,#5d4037,#8b4513);padding:40px;border-radius:18px;box-shadow:0 25px 70px #00000080,0 0 0 8px #3e2723,0 0 0 14px #8b451380;position:relative;animation:boardGlow 3s ease-in-out infinite;border:4px solid #2c1810}@keyframes boardGlow{0%,to{box-shadow:0 25px 70px #00000080,0 0 0 8px #3e2723,0 0 0 14px #8b451380}50%{box-shadow:0 25px 70px #0009,0 0 0 8px #3e2723,0 0 0 14px #8b4513b3,0 0 50px #ffd70066}}.board-border:before{content:"";position:absolute;top:20px;right:20px;bottom:20px;left:20px;border:3px solid #8B4513;border-radius:10px;pointer-events:none;box-shadow:0 0 10px #8b45134d,inset 0 0 10px #8b45131a}.chess-board{background:linear-gradient(135deg,#faf6ed,#f0e8d8);width:630px;height:700px;position:relative;border-radius:8px;box-shadow:inset 0 4px 8px #0000001a}.line.horizontal{position:absolute;left:35px;right:35px;height:3px;background:#d32f2f;box-shadow:0 1px 2px #d32f2f4d}.line.horizontal.h-0{top:35px}.line.horizontal.h-1{top:105px}.line.horizontal.h-2{top:175px}.line.horizontal.h-3{top:245px}.line.horizontal.h-4{top:315px}.line.horizontal.h-5{top:385px}.line.horizontal.h-6{top:455px}.line.horizontal.h-7{top:525px}.line.horizontal.h-8{top:595px}.line.horizontal.h-9{top:665px}.line.vertical{position:absolute;width:3px;background:#d32f2f;box-shadow:0 1px 2px #d32f2f4d}.line.vertical.full{top:35px;height:630px}.line.vertical.top{top:35px;height:280px}.line.vertical.bottom{top:385px;height:280px}.line.vertical.v-0{left:35px}.line.vertical.v-1{left:105px}.line.vertical.v-2{left:175px}.line.vertical.v-3{left:245px}.line.vertical.v-4{left:315px}.line.vertical.v-5{left:385px}.line.vertical.v-6{left:455px}.line.vertical.v-7{left:525px}.line.vertical.v-8{left:595px}.diagonal{position:absolute;width:3px;height:140px;background:repeating-linear-gradient(to bottom,#d32f2f 0px,#d32f2f 8px,transparent 8px,transparent 16px);transform-origin:center;box-shadow:0 1px 2px #d32f2f33}.diagonal.palace-top-left{left:245px;top:35px;transform:rotate(45deg);transform-origin:0 0}.diagonal.palace-top-right{left:385px;top:35px;transform:rotate(-45deg);transform-origin:0 0}.diagonal.palace-bottom-left{left:245px;top:525px;transform:rotate(-45deg);transform-origin:0 0}.diagonal.palace-bottom-right{left:385px;top:525px;transform:rotate(45deg);transform-origin:0 0}.river{position:absolute;left:35px;right:35px;top:315px;height:70px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:1}.river-text{font-size:42px;font-weight:900;color:#d32f2f;text-shadow:2px 2px 4px rgba(255,255,255,.8),-1px -1px 2px rgba(211,47,47,.4),0 0 15px rgba(211,47,47,.2);font-family:STKaiti,KaiTi,楷体,serif;opacity:.85}.river-text.left{margin-left:80px}.river-text.right{margin-right:80px}.intersection{position:absolute;width:70px;height:70px;margin-left:-35px;margin-top:-35px;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10}.intersection.selected{background:radial-gradient(circle,rgba(255,215,0,.5) 0%,transparent 40%);animation:selectPulse 1s infinite}@keyframes selectPulse{0%,to{background:radial-gradient(circle,rgba(255,215,0,.5) 0%,transparent 40%)}50%{background:radial-gradient(circle,rgba(255,215,0,.7) 0%,transparent 40%)}}.intersection:hover{background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 40%)}.intersection.valid-move{cursor:pointer}.move-indicator{position:absolute;z-index:50;pointer-events:none}.move-indicator.empty{width:16px;height:16px;background:#22c55e99;border:2px solid rgba(34,197,94,.9);border-radius:50%;box-shadow:0 0 8px #22c55e80;animation:moveHint 1.5s ease-in-out infinite}.move-indicator.capture{width:56px;height:56px;border:4px solid rgba(239,68,68,.8);border-radius:50%;box-shadow:0 0 10px #ef444499,inset 0 0 10px #ef44444d;animation:captureHint 1.5s ease-in-out infinite}@keyframes moveHint{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.2);opacity:1}}@keyframes captureHint{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.1);opacity:1}}.corner-markers{position:absolute;width:20px;height:20px;pointer-events:none;z-index:5}.corner{position:absolute;pointer-events:none}.corner:before,.corner:after{content:"";position:absolute;background:#d32f2f}.corner.top-left{left:-12px;top:-12px}.corner.top-left:before{left:0;top:3px;width:6px;height:2px}.corner.top-left:after{left:3px;top:0;width:2px;height:6px}.corner.top-right{right:-12px;top:-12px}.corner.top-right:before{right:0;top:3px;width:6px;height:2px}.corner.top-right:after{right:3px;top:0;width:2px;height:6px}.corner.bottom-left{left:-12px;bottom:-12px}.corner.bottom-left:before{left:0;bottom:3px;width:6px;height:2px}.corner.bottom-left:after{left:3px;bottom:0;width:2px;height:6px}.corner.bottom-right{right:-12px;bottom:-12px}.corner.bottom-right:before{right:0;bottom:3px;width:6px;height:2px}.corner.bottom-right:after{right:3px;bottom:0;width:2px;height:6px}.chess-piece{width:60px;height:60px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:32px;font-weight:900;cursor:pointer;transition:all .3s;position:relative;z-index:100;box-shadow:0 6px 16px #00000080;border:4px solid;font-family:STKaiti,KaiTi,楷体,serif}.chess-piece.red{background:radial-gradient(circle at 30% 30%,#f44,#c00);color:#fffacd;border-color:#600;text-shadow:2px 2px 4px rgba(0,0,0,.8),-1px -1px 2px rgba(0,0,0,.5),0 0 10px rgba(255,215,0,.3)}.chess-piece.black{background:radial-gradient(circle at 30% 30%,#1a1a1a,#000);color:gold;border-color:gold;text-shadow:2px 2px 4px rgba(0,0,0,1),-1px -1px 2px rgba(255,215,0,.5),0 0 10px rgba(255,215,0,.5)}.chess-piece:hover:not(.disabled){transform:scale(1.15) translateY(-5px);box-shadow:0 10px 25px #0009}.chess-piece.selected{transform:scale(1.2);box-shadow:0 0 30px #ffd700cc;animation:pieceBounce .5s ease}@keyframes pieceBounce{0%,to{transform:scale(1.2)}50%{transform:scale(1.25)}}.chess-piece.disabled{cursor:not-allowed;opacity:.8}.game-controls{position:relative}.control-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:12px 24px;border-radius:25px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:8px}.control-btn:hover{background:#fff3;transform:translateY(-2px)}.control-menu{position:absolute;top:60px;right:0;background:#fff;border-radius:15px;box-shadow:0 10px 30px #0000004d;overflow:hidden;min-width:200px;z-index:1000;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.menu-item{width:100%;padding:16px 20px;background:#fff;border:none;border-bottom:1px solid #f0f0f0;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;text-align:left;color:#333;display:flex;align-items:center;gap:10px}.menu-item:last-child{border-bottom:none}.menu-item:hover{background:#f8f9fa}.menu-item.danger{color:#ef4444}.menu-item.danger:hover{background:#fee2e2}.chat-panel{position:fixed;bottom:20px;right:20px;z-index:999}.chat-toggle{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 24px;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px #667eea66;transition:all .3s}.chat-toggle:hover{transform:translateY(-2px);box-shadow:0 12px 28px #667eea80}.chat-container{position:absolute;bottom:70px;right:0;width:350px;height:500px;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.chat-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 20px;font-weight:700}.chat-header h3{margin:0;font-size:18px}.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:#f8f9fa}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:#f1f1f1}.chat-messages::-webkit-scrollbar-thumb{background:#667eea;border-radius:3px}.chat-message{max-width:80%;animation:messageIn .3s ease-out}@keyframes messageIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chat-message.own{align-self:flex-end}.chat-message.other{align-self:flex-start}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:10px}.message-username{font-size:12px;font-weight:600;color:#667eea}.message-time{font-size:11px;color:#999}.message-content{background:#fff;padding:10px 14px;border-radius:12px;font-size:14px;color:#333;box-shadow:0 2px 8px #0000001a;word-wrap:break-word}.chat-message.own .message-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.chat-input-container{display:flex;gap:10px;padding:16px;border-top:1px solid #e0e0e0;background:#fff}.chat-input{flex:1;padding:10px 14px;border:2px solid #e0e0e0;border-radius:20px;font-size:14px;transition:all .3s}.chat-input:focus{outline:none;border-color:#667eea}.chat-send-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s}.chat-send-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #667eea66}@media (max-width: 768px){.chat-container{width:calc(100vw - 40px);height:400px}}.timer{display:flex;align-items:center;gap:10px;background:#ffffff1a;padding:12px 20px;border-radius:25px;border:2px solid rgba(255,255,255,.2);transition:all .3s}.timer.active{background:#22c55e33;border-color:#22c55e;animation:timerPulse 2s infinite}@keyframes timerPulse{0%,to{box-shadow:0 0 10px #22c55e4d}50%{box-shadow:0 0 20px #22c55e99}}.timer.warning{background:#fbbf2433;border-color:#fbbf24}.timer.warning.active{animation:timerWarning 1s infinite}@keyframes timerWarning{0%,to{box-shadow:0 0 10px #fbbf2480}50%{box-shadow:0 0 20px #fbbf24cc}}.timer.critical{background:#ef444433;border-color:#ef4444}.timer.critical.active{animation:timerCritical .5s infinite}@keyframes timerCritical{0%,to{box-shadow:0 0 15px #ef4444b3;transform:scale(1)}50%{box-shadow:0 0 25px #ef4444;transform:scale(1.05)}}.timer-icon{font-size:20px}.timer-value{font-size:18px;font-weight:700;color:#fff;font-family:Courier New,monospace;min-width:60px;text-align:center}.game-container{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);position:relative}.game-loading,.game-waiting{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;color:#fff}.waiting-card{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:50px;text-align:center;border:1px solid rgba(255,255,255,.2);box-shadow:0 20px 60px #0000004d}.waiting-card h2{font-size:32px;margin-bottom:30px;color:#fff}.room-code-display{background:#fff3;border-radius:15px;padding:30px;margin:30px 0;display:flex;flex-direction:column;gap:15px}.code-label{font-size:16px;color:#fffc;font-weight:600}.code-value{font-size:48px;font-weight:900;color:gold;letter-spacing:8px;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.waiting-text{color:#ffffffe6;font-size:18px;margin-bottom:30px}.back-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:16px 40px;border-radius:30px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s}.back-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.game-header{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);padding:20px 40px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;gap:20px}.back-button{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:12px 24px;border-radius:25px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.back-button:hover{background:#fff3;transform:translate(-3px)}.game-info{display:flex;gap:20px;align-items:center;flex:1}.game-header-controls{display:flex;gap:10px;align-items:center}.icon-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 16px;border-radius:20px;font-size:20px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}.icon-btn:hover{background:#fff3;transform:translateY(-2px)}.icon-btn:active{transform:scale(.95)}.room-code-badge{background:#ffffff1a;color:gold;padding:10px 20px;border-radius:20px;font-weight:700;font-size:16px;border:1px solid rgba(255,215,0,.3)}.turn-indicator{background:#ffffff1a;color:#fff;padding:10px 20px;border-radius:20px;font-weight:700;font-size:16px;transition:all .3s}.turn-indicator.my-turn{background:linear-gradient(135deg,#22c55e,#16a34a);animation:glow 2s infinite}@keyframes glow{0%,to{box-shadow:0 0 10px #22c55e80}50%{box-shadow:0 0 20px #22c55ecc}}.game-main{display:grid;grid-template-columns:300px 1fr 300px;gap:30px;padding:40px;max-width:1600px;margin:0 auto}.player-panel{display:flex;flex-direction:column;gap:20px}.player-card{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:25px;display:flex;align-items:center;gap:20px;border:2px solid rgba(255,255,255,.1);transition:all .3s}.player-card.active{border-color:#22c55e;box-shadow:0 0 20px #22c55e4d;background:#22c55e1a}.player-avatar{width:70px;height:70px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:32px;font-weight:900;color:#fff;box-shadow:0 4px 12px #0000004d;border:3px solid}.player-avatar.red{background:radial-gradient(circle at 30% 30%,#ff6b6b,#c92a2a);border-color:#8b0000}.player-avatar.black{background:radial-gradient(circle at 30% 30%,#2c3e50,#000);border-color:gold;color:gold}.player-info h3{color:#fff;font-size:20px;margin-bottom:5px;font-weight:700}.player-info p{color:#ffffffb3;font-size:14px}.board-section{display:flex;flex-direction:column;align-items:center;gap:20px}.game-message{padding:16px 32px;border-radius:30px;font-size:18px;font-weight:700;color:#fff;text-align:center;animation:slideDown .3s ease-out;box-shadow:0 4px 12px #0003}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.game-message.info{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.game-message.warning{background:linear-gradient(135deg,#f59e0b,#d97706)}.game-message.error{background:linear-gradient(135deg,#ef4444,#dc2626)}.move-history{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:25px;border:1px solid rgba(255,255,255,.1);flex:1;display:flex;flex-direction:column}.move-history h4{color:#fff;font-size:18px;margin-bottom:15px;font-weight:700}.history-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:400px}.history-list::-webkit-scrollbar{width:6px}.history-list::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.history-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.history-item{display:flex;align-items:center;gap:10px;padding:10px;background:#ffffff0d;border-radius:10px;font-size:14px;color:#fff}.move-number{color:#ffffff80;font-weight:700;min-width:30px}.move-player{padding:4px 10px;border-radius:10px;font-weight:700;font-size:12px}.move-player.red{background:#ff6b6b4d;color:#ff6b6b}.move-player.black{background:#ffd7004d;color:gold}.move-detail{color:#ffffffe6}.game-over-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-out}.game-over-content{background:#fff;border-radius:30px;padding:50px;text-align:center;max-width:500px;box-shadow:0 20px 60px #00000080;animation:scaleIn .4s ease-out}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.game-over-title{font-size:36px;font-weight:900;color:#667eea;margin-bottom:30px}.winner-badge{font-size:48px;margin:30px 0;padding:30px;border-radius:20px;font-weight:900}.winner-badge.red{background:linear-gradient(135deg,#ff6b6b,#c92a2a);color:#fff}.winner-badge.black{background:linear-gradient(135deg,#2c3e50,#000);color:gold}.winner-text{font-size:24px;color:#666;margin-bottom:40px;font-weight:600}.game-over-actions{display:flex;gap:15px;justify-content:center}.rematch-btn,.lobby-btn{padding:16px 32px;border:none;border-radius:30px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s}.rematch-btn{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.rematch-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #22c55e66}.lobby-btn{background:#667eea1a;color:#667eea;border:2px solid #667eea}.lobby-btn:hover{background:#667eea33;transform:translateY(-2px)}.undo-modal{animation:bounceIn .5s ease-out}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1)}}@media (max-width: 1200px){.game-main{grid-template-columns:1fr;grid-template-rows:auto auto auto}.opponent-panel{order:1}.board-section{order:2}.my-panel{order:3}.player-panel{flex-direction:row;justify-content:space-between}.move-history{max-width:400px}}@media (max-width: 768px){.game-header{padding:15px 20px;flex-direction:column;gap:15px}.game-main{padding:20px;gap:20px}.player-card{padding:15px}.player-avatar{width:50px;height:50px;font-size:24px}.game-over-content{padding:30px 20px;margin:20px}.winner-badge{font-size:36px;padding:20px}}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;color:#fff}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}*{margin:0;padding:0;box-sizing:border-box}body{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;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}