:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{box-sizing:border-box;justify-content:center;align-items:center;min-width:320px;min-height:100vh;margin:0;padding:16px;display:flex}.game-layout{flex-direction:row;align-items:flex-start;gap:24px;width:100%;max-width:900px;display:flex}.game-main{flex-direction:column;flex:1;align-items:center;gap:12px;display:flex}h1{color:#f39c12;letter-spacing:4px;text-shadow:1px 2px 4px #00000080;margin:0;font-size:2.2rem}.status-panel{align-items:center;gap:12px;display:flex}.turn-badge{border-radius:20px;padding:6px 16px;font-size:1.1rem;font-weight:700;box-shadow:0 2px 6px #0000004d}.red-turn{color:#fff;background-color:#c0392b}.black-turn{color:#fff;background-color:#2c3e50}.game-over{color:#111;background-color:#f39c12}.check-alert{color:#fff;background-color:#e74c3c;border-radius:20px;padding:6px 14px;font-weight:700;animation:1s infinite alternate pulse}.hidden{display:none!important}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.08)}}.captured-bar{box-sizing:border-box;background-color:#1e1e1e;border-radius:6px;align-items:center;gap:8px;width:100%;max-width:540px;min-height:38px;padding:6px 12px;display:flex}.captured-label{color:#888;white-space:nowrap;font-size:.85rem}.captured-pieces-list{flex-wrap:wrap;gap:6px;display:flex}.captured-chip{border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;font-weight:700;display:inline-flex;box-shadow:0 1px 3px #0006}.red-chip{color:#c0392b;background-color:#fffbf2;border:1px solid #c0392b}.black-chip{color:#2c3e50;background-color:#fffbf2;border:1px solid #2c3e50}#board-container{border-radius:12px;width:100%;max-width:540px;overflow:hidden;box-shadow:0 10px 25px #00000080}.xiangqi-board-svg{width:100%;height:auto;display:block}.piece{-webkit-user-select:none;user-select:none;transition:transform .15s}.piece:hover{filter:brightness(1.1)}.controls{gap:16px;margin-top:4px;display:flex}.btn{color:#fff;cursor:pointer;background-color:#34495e;border:none;border-radius:6px;padding:8px 24px;font-size:1rem;font-weight:700;transition:background-color .2s,opacity .2s}.btn:hover:not(:disabled){background-color:#2c3e50}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-small{padding:4px 12px;font-size:.85rem}.move-history-panel{box-sizing:border-box;background-color:#1e1e1e;border-radius:10px;flex-direction:column;width:220px;height:580px;padding:16px;display:flex;box-shadow:0 6px 16px #0006}.move-history-panel h2{color:#f39c12;text-align:center;border-bottom:1px solid #333;margin:0 0 12px;padding-bottom:8px;font-size:1.2rem}.history-list{flex-direction:column;flex:1;gap:6px;padding-right:4px;display:flex;overflow-y:auto}.history-row{background-color:#2a2a2a;border-radius:4px;padding:4px 6px;font-size:.9rem;display:flex}.history-num{color:#777;width:32px}.history-move{flex:1;font-weight:500}.red-move{color:#e74c3c}.black-move{color:#3498db}@media (width<=768px){.game-layout{flex-direction:column;align-items:center}.move-history-panel{width:100%;max-width:540px;height:180px}.timer-panel{flex-direction:column;gap:8px}.lobby-panel{max-width:100%}}.lobby-panel{flex-direction:column;gap:16px;width:100%;max-width:540px;display:flex}.lobby-panel h1{text-align:center}.room-list-section{background-color:#1e1e1e;border-radius:10px;padding:16px;box-shadow:0 6px 16px #0006}.lobby-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;display:flex}.lobby-header h2{color:#f39c12;margin:0;font-size:1.2rem}.status-badge{color:#ccc;background-color:#34495e;border-radius:6px;padding:4px 10px;font-size:.8rem;font-weight:700}.status-badge.status-connected{color:#fff;background-color:#27ae60}.status-badge.status-disconnected{color:#fff;background-color:#e74c3c}.room-list{flex-direction:column;gap:8px;max-height:300px;display:flex;overflow-y:auto}.room-list-empty{text-align:center;color:#666;padding:24px;font-size:.95rem}.room-card{cursor:pointer;background-color:#2a2a2a;border:1px solid #0000;border-radius:8px;padding:10px 14px;transition:background-color .2s,transform .1s}.room-card:hover{background-color:#333;border-color:#f39c12;transform:translate(2px)}.room-card.room-full{opacity:.7}.room-card-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.room-card-name{color:#fff;font-size:1rem;font-weight:700}.room-card-status{border-radius:4px;padding:2px 8px;font-size:.8rem;font-weight:700}.room-card-status.room-waiting{color:#fff;background-color:#27ae60}.room-card-status.room-playing{color:#fff;background-color:#e67e22}.room-card-info{color:#aaa;gap:16px;font-size:.85rem;display:flex}.lobby-actions{gap:10px;display:flex}.lobby-actions input{color:#fff;background-color:#2a2a2a;border:1px solid #444;border-radius:6px;flex:1;padding:8px 12px;font-size:1rem}.btn-primary{background-color:#27ae60}.btn-primary:hover:not(:disabled){background-color:#219a52}.advanced-settings-toggle{cursor:pointer;color:#f39c12;-webkit-user-select:none;user-select:none;background-color:#1e1e1e;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 16px;font-weight:700;transition:background-color .2s;display:flex}.advanced-settings-toggle:hover{background-color:#2a2a2a}.advanced-settings{background-color:#1e1e1e;border-radius:8px;flex-direction:column;gap:12px;padding:16px;display:flex}.setting-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.setting-row label{color:#ccc;white-space:nowrap;font-size:.95rem}.setting-row select,.setting-row input{color:#fff;background-color:#2a2a2a;border:1px solid #444;border-radius:6px;min-width:120px;padding:6px 12px;font-size:.95rem}.setting-row input::placeholder{color:#666}.setting-actions{justify-content:center;gap:12px;margin-top:8px;display:flex}.online-panel{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:100%;max-width:540px;display:flex}.online-panel input{color:#fff;background-color:#2a2a2a;border:1px solid #444;border-radius:6px;width:120px;padding:6px 10px;font-size:.95rem}.online-panel select{color:#fff;background-color:#2a2a2a;border:1px solid #444;border-radius:6px;padding:6px 10px;font-size:.95rem}.online-panel input:disabled,.online-panel select:disabled{opacity:.5;cursor:not-allowed}.role-badge{color:#f39c12;background-color:#2a2a2a;border-radius:6px;padding:4px 10px;font-size:.85rem;font-weight:700}.room-status-panel{box-sizing:border-box;background-color:#1e1e1e;border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;width:100%;max-width:540px;padding:8px 16px;display:flex}.room-status-label{color:#f39c12;font-weight:700}.player-status{color:#888;background-color:#2a2a2a;border-radius:6px;padding:4px 10px;font-size:.95rem}.player-status.connected{color:#2ecc71}.red-status.connected{color:#e74c3c}.black-status.connected{color:#3498db}.spectator-status{color:#f39c12;background-color:#2a2a2a;border-radius:6px;padding:4px 10px;font-size:.95rem}.spectator-list-panel{z-index:100;background-color:#1e1e1e;border-radius:12px;min-width:280px;padding:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 30px #0009}.spectator-list-panel h3{color:#f39c12;text-align:center;margin:0 0 12px}.spectator-list-panel .btn{margin:12px auto 0;display:block}.modal-overlay{z-index:200;background-color:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background-color:#1e1e1e;border-radius:12px;flex-direction:column;gap:12px;min-width:280px;padding:24px;display:flex;box-shadow:0 10px 30px #0009}.modal-content h3{color:#f39c12;text-align:center;margin:0}.modal-content p{color:#ccc;text-align:center;margin:0}.modal-content input{color:#fff;text-align:center;background-color:#2a2a2a;border:1px solid #444;border-radius:6px;padding:8px 12px;font-size:1rem}.modal-content input::placeholder{color:#666}.modal-actions{justify-content:center;gap:12px;margin-top:4px;display:flex}.timer-panel{box-sizing:border-box;background-color:#1e1e1e;border-radius:10px;justify-content:space-between;gap:16px;width:100%;max-width:540px;padding:8px 16px;display:flex}.player-timer{background-color:#2a2a2a;border-radius:8px;align-items:center;gap:12px;padding:8px 16px;display:flex}.red-timer{border-left:4px solid #c0392b}.black-timer{border-left:4px solid #2c3e50}.player-label{color:#ccc;min-width:40px;font-weight:700}.points-display{color:#f39c12;letter-spacing:2px;font-size:1.1rem}.time-display{color:#fff;text-align:center;background-color:#34495e;border-radius:4px;min-width:40px;padding:2px 8px;font-size:1.3rem;font-weight:700}.time-warning{background-color:#e74c3c;animation:.5s infinite alternate pulse}.create-room-panel{background-color:#1e1e1e;border-radius:10px;flex-direction:column;gap:12px;width:100%;max-width:400px;padding:16px;display:flex;box-shadow:0 6px 16px #0006}.create-room-panel h3{color:#f39c12;text-align:center;border-bottom:1px solid #333;margin:0;padding-bottom:8px}