: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}@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}.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}}.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}.setting-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.setting-row label{color:#ccc;font-size:.95rem}.setting-row select{color:#fff;background-color:#2a2a2a;border:1px solid #444;border-radius:6px;padding:6px 12px;font-size:.95rem}.setting-actions{justify-content:center;gap:12px;margin-top:8px;display:flex}.btn-primary{background-color:#27ae60}.btn-primary:hover:not(:disabled){background-color:#219a52}.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}.room-status-panel{box-sizing:border-box;background-color:#1e1e1e;border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;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}.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}