* { margin:0; padding:0; box-sizing:border-box; }
body {
   background:#111; overflow-y:auto; overflow-x:hidden; font-family:'Segoe UI',sans-serif;
   user-select:none; -webkit-user-select:none;
}

/* ===== 角色选择 ===== */
#char-select-overlay {
   position:fixed; inset:0; z-index:100;
   background:linear-gradient(135deg,#0a0a2e 0%,#1a0a2e 50%,#0a1a2e 100%);
   display:flex; align-items:center; justify-content:center;
}
#char-select-panel {
   background:rgba(255,255,255,0.08); backdrop-filter:blur(20px);
   border:1px solid rgba(255,255,255,0.15); border-radius:20px;
   padding:40px 50px; max-width:520px; width:90%;
   text-align:center;
}
#char-select-panel h1 { font-size:32px; color:#fff; margin-bottom:4px; }
.subtitle { color:rgba(255,255,255,0.5); font-size:14px; margin-bottom:24px; }

#preview-container {
   width:200px; height:200px; margin:0 auto 20px;
   background:rgba(0,0,0,0.3); border-radius:16px; border:2px solid rgba(255,255,255,0.1);
}
#preview-canvas { width:200px; height:200px; }

.customize-row { margin-bottom:16px; text-align:left; }
.customize-row label {
   display:block; color:rgba(255,255,255,0.6); font-size:12px;
   letter-spacing:1px; margin-bottom:8px;
}

#name-input {
   width:100%; padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.2);
   background:rgba(0,0,0,0.3); color:#fff; font-size:15px; outline:none;
   transition:border-color 0.2s;
}
#name-input:focus { border-color:#E84444; }

.color-options { display:flex; gap:8px; flex-wrap:wrap; }
.color-btn {
   width:36px; height:36px; border-radius:50%; border:3px solid transparent;
   cursor:pointer; transition:all 0.2s;
}
.color-btn:hover { transform:scale(1.15); }
.color-btn.selected { border-color:#fff; box-shadow:0 0 12px rgba(255,255,255,0.3); }

.hat-options, .acc-options { display:flex; gap:8px; flex-wrap:wrap; }
.hat-btn, .acc-btn {
   padding:6px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.15);
   background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.7); font-size:13px;
   cursor:pointer; transition:all 0.2s;
}
.hat-btn:hover, .acc-btn:hover { background:rgba(255,255,255,0.12); }
.hat-btn.selected, .acc-btn.selected {
   background:rgba(232,68,68,0.3); border-color:#E84444; color:#fff;
}

#join-btn {
   margin-top:20px; padding:12px 40px; border:none; border-radius:12px;
   background:linear-gradient(135deg,#E84444,#FF6B35); color:#fff;
   font-size:18px; font-weight:700; cursor:pointer;
   transition:all 0.2s; box-shadow:0 4px 20px rgba(232,68,68,0.3);
}
#join-btn:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(232,68,68,0.5); }

/* ===== 游戏界面 ===== */
#game-container { position:fixed; inset:0; }
#game-canvas { display:block; width:100%; height:100%; background:#1a1a2e; }

/* ===== 广播 ===== */
#broadcast-container {
   position:fixed; top:12px; left:50%; transform:translateX(-50%);
   z-index:50; display:flex; flex-direction:column; gap:4px; align-items:center;
   pointer-events:none;
}
.broadcast-msg {
   padding:6px 18px; border-radius:10px;
   background:rgba(0,0,0,0.7); backdrop-filter:blur(8px);
   border:1px solid rgba(255,255,255,0.1);
   color:#fff; font-size:13px; white-space:nowrap;
   animation: slideDown 0.3s ease;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

/* ===== 玩家列表 ===== */
#player-list-toggle {
   position:fixed; top:12px; right:12px; z-index:40;
   background:rgba(0,0,0,0.6); backdrop-filter:blur(8px);
   border:1px solid rgba(255,255,255,0.1); border-radius:10px;
   padding:6px 12px; color:#fff; font-size:13px; cursor:pointer;
}
#player-list-panel {
   position:fixed; top:48px; right:12px; z-index:40;
   background:rgba(0,0,0,0.85); backdrop-filter:blur(12px);
   border:1px solid rgba(255,255,255,0.1); border-radius:12px;
   padding:10px; min-width:170px; max-height:280px; overflow-y:auto;
   display:none;
}
#player-list-panel.show { display:block; }
#player-list-header { color:rgba(255,255,255,0.5); font-size:11px; margin-bottom:6px; }
.player-list-item { padding:5px 8px; color:#fff; font-size:12px; border-radius:6px; display:flex; align-items:center; gap:6px; }
.player-list-item:hover { background:rgba(255,255,255,0.08); }
.player-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ===== 靠近提示 ===== */
#proximity-hint {
   position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
   z-index:40; color:rgba(255,255,255,0.7); font-size:13px;
   pointer-events:none; animation: pulse 1.5s ease infinite;
   background:rgba(0,0,0,0.5); padding:6px 16px; border-radius:8px;
}
@keyframes reqPopIn {
   0%   { opacity:0; transform:translateX(-50%) translateY(30px) scale(0.85); }
   60%  { transform:translateX(-50%) translateY(-5px) scale(1.04); }
   100% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}
@keyframes popIn {
   0%   { opacity:0; transform:translateX(-50%) translateY(20px) scale(0.9); }
   70%  { transform:translateX(-50%) translateY(-3px) scale(1.02); }
   100% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}
@keyframes pulse { 0%,100%{opacity:0.6} 50%{opacity:1} }

#controls-hint {
   position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
   color:rgba(255,255,255,0.2); font-size:11px; z-index:10;
   pointer-events:none;
}
#controls-hint kbd {
   display:inline-block; padding:1px 5px; border-radius:3px;
   background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.4);
   font-family:inherit; font-size:10px;
}

/* ===== 沉浸式聊天 ===== */
#immersive-chat {
   position:fixed; inset:0; z-index:200;
   display:flex; flex-direction:column;
   background: linear-gradient(135deg, #0f0c29 0%, #1a1040 30%, #241b4e 60%, #1a1040 100%);
   animation: chatFadeIn 0.4s ease;
}
#immersive-chat.hidden { display:none; }

#chat-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.chat-bg-circle {
   position:absolute; border-radius:50%; opacity:0.08; animation: floatBg 8s ease-in-out infinite;
}
.chat-bg-circle.c1 { width:400px;height:400px;top:-100px;right:-80px;background:radial-gradient(circle,#E84444,transparent); }
.chat-bg-circle.c2 { width:300px;height:300px;bottom:-60px;left:-60px;background:radial-gradient(circle,#9B59B6,transparent);animation-delay:-3s; }
.chat-bg-circle.c3 { width:250px;height:250px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#3498DB,transparent);animation-delay:-6s;opacity:0.05; }
@keyframes floatBg { 0%,100%{transform:translate(0,0)scale(1)} 50%{transform:translate(10px,-15px)scale(1.05)} }
@keyframes chatFadeIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }

#chat-topbar {
   position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
   padding:16px 24px;background:rgba(0,0,0,0.3);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.06);
}
#chat-partner-card { display:flex;align-items:center;gap:12px; }
#chat-partner-avatar { width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);background:rgba(0,0,0,0.3); }
#chat-partner-name { color:#fff;font-size:16px;font-weight:600; }
#chat-participant-names { color:rgba(255,255,255,0.5);font-size:12px;margin-top:2px; }
#chat-status { color:#2ECC71;font-size:11px; }
#chat-exit-btn {
   display:flex;align-items:center;gap:6px;padding:8px 18px;border-radius:10px;
   border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.7);font-size:13px;cursor:pointer;transition:all 0.2s;
}
#chat-exit-btn:hover { background:rgba(231,76,60,0.2);border-color:#E74C3C;color:#fff; }

#chat-messages-area {
   flex:1;position:relative;z-index:2;overflow-y:auto;padding:20px 24px 10px;display:flex;flex-direction:column;
}
#chat-messages-area::-webkit-scrollbar { width:4px; }
#chat-messages-area::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15);border-radius:2px; }

#chat-welcome { text-align:center;margin-bottom:16px; }
.welcome-bubble { display:inline-block;background:rgba(255,255,255,0.06);border-radius:16px;padding:8px 20px;margin-bottom:6px;color:rgba(255,255,255,0.6);font-size:13px;border:1px solid rgba(255,255,255,0.06); }
.welcome-bubble.sub { font-size:12px;color:rgba(255,255,255,0.35); }

#chat-msgs-container { display:flex;flex-direction:column;gap:10px;padding-bottom:10px; }
.chat-bubble-wrapper { display:flex;align-items:flex-end;gap:10px;animation:msgSlideIn 0.25s ease; }
.chat-bubble-wrapper.self { flex-direction:row-reverse; }
@keyframes msgSlideIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.chat-bubble-avatar { width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,0.1);flex-shrink:0; }
.chat-bubble { max-width:55%;padding:10px 16px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;position:relative; }
.chat-bubble-wrapper.self .chat-bubble { background:linear-gradient(135deg,#E84444,#FF6B35);color:#fff;border-bottom-right-radius:4px; }
.chat-bubble-wrapper:not(.self) .chat-bubble { background:rgba(255,255,255,0.08);color:#fff;border-bottom-left-radius:4px; }
.chat-bubble-time { font-size:10px;color:rgba(255,255,255,0.3);margin-top:4px;text-align:right; }

#chat-bottom-bar {
   position:relative;z-index:2;
   background:rgba(0,0,0,0.3);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,0.06);
}
#chat-input-area { display:flex;gap:10px;padding:10px 20px 6px; }
#chat-input-area.hidden { display:none; }
#chat-msg-input {
   flex:1;padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,0.12);
   background:rgba(0,0,0,0.3);color:#fff;font-size:14px;outline:none;transition:border-color 0.2s;
}
#chat-msg-input:focus { border-color:#E84444; }
#chat-msg-send {
   padding:12px 28px;border:none;border-radius:14px;background:linear-gradient(135deg,#E84444,#FF6B35);
   color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;
}
#chat-msg-send:hover { transform:scale(1.04);box-shadow:0 4px 16px rgba(232,68,68,0.3); }

/* ===== 聊天文件区 ===== */
#chat-files-area {
   display:flex;flex-wrap:wrap;gap:6px;padding:6px 20px 2px;
}
.file-entry {
   display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
   background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
   color:#fff;font-size:12px;cursor:pointer;transition:all 0.2s;animation:msgSlideIn 0.3s ease;
}
.file-entry:hover { background:rgba(255,255,255,0.12);border-color:#3498DB; }
.file-icon { font-size:14px; }
.file-name { max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.file-size { color:rgba(255,255,255,0.4);font-size:10px; }
.file-countdown { color:#F1C40F;font-size:10px;min-width:32px;text-align:right; }
#chat-file-btn {
   padding:8px 12px;border:none;border-radius:10px;background:rgba(255,255,255,0.08);
   color:rgba(255,255,255,0.6);font-size:16px;cursor:pointer;transition:all 0.2s;
}
#chat-file-btn:hover { background:rgba(255,255,255,0.15);color:#fff; }

/* ===== 历史面板 ===== */
#history-toggle {
   position:fixed; top:12px; right:90px; z-index:40;
   background:rgba(0,0,0,0.6); backdrop-filter:blur(8px);
   border:1px solid rgba(255,255,255,0.1); border-radius:10px;
   padding:6px 12px; color:#fff; font-size:13px; cursor:pointer;
}
#history-toggle:hover { background:rgba(255,255,255,0.12); }
#history-panel {
   position:fixed; inset:0; z-index:300;
   background:rgba(10,10,30,0.95); backdrop-filter:blur(20px);
   display:flex; flex-direction:column;
   animation:chatFadeIn 0.3s ease;
}
#history-panel.hidden { display:none; }
#history-topbar {
   display:flex;justify-content:space-between;align-items:center;
   padding:16px 24px;border-bottom:1px solid rgba(255,255,255,0.06);
   color:#fff;font-size:16px;font-weight:600;
}
#history-close {
   padding:6px 14px;border:none;border-radius:8px;
   background:rgba(255,255,255,0.08);color:#fff;font-size:14px;cursor:pointer;
}
#history-close:hover { background:rgba(231,76,60,0.3); }
#history-list {
   flex:1;overflow-y:auto;padding:16px 24px;
}
.history-card {
   padding:14px 18px;border-radius:12px;
   background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);
   margin-bottom:10px;cursor:pointer;transition:all 0.2s;
}
.history-card:hover { background:rgba(255,255,255,0.08); }
.history-card-header { color:#fff;font-size:14px;font-weight:600;margin-bottom:4px; }
.history-card-time { color:rgba(255,255,255,0.3);font-size:11px;margin-bottom:8px; }
.history-card-msgs { display:flex;flex-direction:column;gap:3px; }
.history-msg { color:rgba(255,255,255,0.7);font-size:12px;line-height:1.5; }
.history-msg-author { color:#3498DB;font-weight:600; }
.history-msg-time { color:rgba(255,255,255,0.3);font-size:10px;margin-right:6px;display:inline-block;min-width:40px; }
.history-card-toggle {
   color:#FFD700;font-size:11px;margin-top:8px;text-align:center;
   padding:6px;border-radius:8px;background:rgba(255,215,0,0.08);
   border:1px solid rgba(255,215,0,0.15);cursor:pointer;transition:all 0.2s;
}
.history-card-toggle:hover { background:rgba(255,215,0,0.15); }

/* ===== 聊天界面HUD ===== */
#chat-hud { display:flex;gap:16px;padding:4px 20px;align-items:center; }
#chat-hud-health, #chat-hud-energy { display:flex;align-items:center;gap:4px;font-size:11px;color:rgba(255,255,255,0.6); }
.hud-bar { width:60px;height:6px;background:rgba(0,0,0,0.4);border-radius:3px;overflow:hidden; }
.hud-fill-health { height:100%;background:linear-gradient(90deg,#C0392B,#E74C3C);border-radius:3px;transition:width 0.3s; }
.hud-fill-energy { height:100%;background:linear-gradient(90deg,#F39C12,#F1C40F);border-radius:3px;transition:width 0.3s; }
#chat-health-text, #chat-energy-text { font-size:10px;color:rgba(255,255,255,0.5);min-width:20px; }

/* ===== 螃蟹登场黑闪 ===== */
#crab-flash {
   position:fixed;inset:0;z-index:999;pointer-events:none;
   background:rgba(0,0,0,0);transition:background 0s;
}
#crab-flash.active {
   background:rgba(0,0,0,0.6);animation:crabFlash 1.2s ease-out forwards;
}
@keyframes crabFlash {
   0%   { background:rgba(0,0,0,0.8); }
   30%  { background:rgba(0,0,0,0.5); }
   60%  { background:rgba(0,0,0,0.2); }
   100% { background:rgba(0,0,0,0); }
}

/* ===== 通知 ===== */
.notification {
   position:fixed;top:50px;right:14px;z-index:45;padding:8px 16px;border-radius:10px;
   background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);
   color:#fff;font-size:12px;animation:slideIn 0.3s ease;
}
@keyframes slideIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }


/* ===== 响应式：小屏幕滚动支持 ===== */
@media (max-width: 768px) {
   #char-select-panel {
      padding:24px 20px; max-height:95vh; overflow-y:auto;
   }
   #char-select-panel h1 { font-size:24px; }
   #preview-container { width:140px; height:140px; }
   #preview-canvas { width:140px; height:140px; }
   .color-btn { width:28px; height:28px; }
   #join-btn { padding:10px 30px; font-size:16px; }
}

@media (max-width: 480px) {
   #char-select-panel {
      padding:16px 12px; max-height:98vh; overflow-y:auto;
      border-radius:12px;
   }
   #char-select-panel h1 { font-size:20px; }
   .customize-row { margin-bottom:10px; }
   #name-input { padding:8px 10px; font-size:13px; }
   .color-btn { width:24px; height:24px; }
   .hat-btn, .acc-btn { padding:4px 10px; font-size:11px; }
}

/* 游戏内UI响应式 */
@media (max-width: 600px) {
   #chat-container { width:100vw; height:100vh; border-radius:0; }
   #chat-hud { padding:2px 10px; gap:8px; flex-wrap:wrap; }
   #chat-messages-area { padding:8px 12px; }
   .msg-bubble { max-width:85%; font-size:12px; padding:6px 10px; }
   #chat-input-area { padding:6px 8px; }
   #chat-input { font-size:13px; padding:6px 10px; }
   #history-panel { width:100vw; height:100vh; border-radius:0; }
}

/* 通知响应式 */
@media (max-width: 480px) {
   .notification { right:6px; top:40px; font-size:11px; padding:6px 12px; max-width:90vw; }
}

/* ===== 冲刺动效 ===== */
@keyframes sprintFlash {
   0% { opacity:0; }
   20% { opacity:1; }
   100% { opacity:0; transform:translateX(30px); }
}
/* ===== 螃蟹警告 ===== */
@keyframes fadeWarn {
   0% { opacity:0; transform:translate(-50%,-50%) scale(0.5); }
   15% { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
   25% { opacity:1; transform:translate(-50%,-50%) scale(1); }
   80% { opacity:0.9; }
   100% { opacity:0; transform:translate(-50%,-60%) scale(0.8); }
}
/* ===== sprint CD 显示 ===== */
#sprint-cd {
   position:fixed;bottom:80px;left:20px;z-index:40;
   color:rgba(255,255,255,0.5);font-size:11px;
   background:rgba(0,0,0,0.5);padding:4px 8px;border-radius:6px;
}