*{margin:0;padding:0;box-sizing:border-box}
body{
  background:#0a0a1a;
  display:flex;justify-content:center;align-items:center;
  min-height:100vh;font-family:'Courier New','Source Code Pro',monospace;
  overflow:hidden;user-select:none;
}
#game-wrapper{position:relative;display:flex;justify-content:center;align-items:center;flex-shrink:0}
#gameCanvas{border:2px solid #3a6b8c;border-radius:4px;box-shadow:0 0 40px rgba(0,100,200,0.3);display:none;cursor:crosshair}
#gameCanvas.active{display:block}
/* HUD - 玩家旗舰信息：正上方居中 */
#hud{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,20,0.5);border:1px solid #3a6b8c;border-radius:4px;
  padding:6px 12px;color:#7ec8e3;font-size:12px;line-height:1.45;
  pointer-events:none;min-width:180px;z-index:5;display:none;
  text-align:center;white-space:nowrap;
}
#hud.active{display:block}
#hud .ship-name{color:#7ec8e3;font-size:14px;font-weight:bold;margin-bottom:1px}
#hud .label{color:#5a9ab5}
#hud .value{color:#c8e8f8}
#hud .warn{color:#ff6b6b}
#hud .fire{color:#ff8c00}
/* 左上角：我方舰名列表 */
/* ★ v0.2.14: pointer-events 改为 auto，使舰长名称的鼠标悬停浮窗能够正常工作 */
#ally-panel{
  position:absolute;top:6px;left:6px;
  pointer-events:auto;z-index:5;display:none;
  font-size:12px;line-height:1.6;text-align:left;
  background:rgba(0,12,30,0.82);
  border:1px solid rgba(90,170,255,0.25);
  border-radius:5px;
  padding:7px 10px 6px;
  min-width:130px;
  box-shadow:0 0 12px rgba(0,120,255,0.08), inset 0 0 8px rgba(0,0,0,0.3);
}
#ally-panel.active{display:block}
#ally-panel .ally-name{font-weight:bold;margin-bottom:2px;font-size:12px;}
#ally-panel .ally-flagship{color:#5af;}
#ally-panel .ally-other{color:#5f5;}
#ally-panel .ally-status{color:#7a9a7a;font-size:11px;}
#ally-panel .ally-sunk{opacity:0.4;text-decoration:line-through;}
#ally-panel .ally-captain{color:#aa8a5a;font-size:10px;margin-top:1px;cursor:default;position:relative;} /* ★ v0.2.11: 舰长名称行 */
#ally-panel .ally-captain:hover{color:#d4a76a;}
/* ★ v0.2.12: 舰长浮窗 */
.captain-tooltip{position:fixed;z-index:9999;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(170,138,90,0.5);border-radius:6px;padding:10px 13px;max-width:280px;pointer-events:none;opacity:0;transition:opacity 0.15s ease;box-shadow:0 4px 20px rgba(0,0,0,0.6),0 0 30px rgba(170,138,90,0.15);font-size:11px;line-height:1.6;color:#ccc;}
.captain-tooltip.visible{opacity:1;}
.captain-tooltip .ct-name{color:#e8c97a;font-size:13px;font-weight:bold;margin-bottom:4px;display:block;}
.captain-tooltip .ct-bio{color:#b0b0b0;font-size:10px;line-height:1.5;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid rgba(170,138,90,0.2);}
.captain-tooltip .ct-skills{color:#7ec8e3;font-size:10px;}
/* ★ 面板内血条样式 */
.panel-hp-bar{display:inline-block;width:60px;height:4px;background:rgba(255,255,255,0.1);border-radius:2px;vertical-align:middle;margin-left:4px;overflow:hidden;}
.panel-hp-fill{display:block;height:100%;border-radius:2px;transition:width 0.15s;}
.panel-hp-fill.high{background:linear-gradient(90deg,#4f8,#3c6);}
.panel-hp-fill.mid{background:linear-gradient(90deg,#ff0,#cc0);}
.panel-hp-fill.low{background:linear-gradient(90deg,#f44,#c22);}
/* 右上角：敌方舰名列表 */
#enemy-panel{
  position:absolute;top:6px;right:6px;
  pointer-events:none;z-index:5;display:none;
  font-size:12px;line-height:1.6;text-align:right;
  background:rgba(30,5,5,0.78);
  border:1px solid rgba(255,80,80,0.25);
  border-radius:5px;
  padding:7px 10px 6px;
  min-width:130px;
  box-shadow:0 0 12px rgba(255,60,60,0.08), inset 0 0 8px rgba(0,0,0,0.3);
}
#enemy-panel.active{display:block}
#enemy-panel .enemy-name{color:#f55;font-weight:bold;margin-bottom:1px;font-size:12px;}
#enemy-panel .enemy-hidden{color:#555;font-size:12px;}
#enemy-panel .enemy-status{color:#8a6a6a;font-size:11px;}
#enemy-panel .enemy-sunk{opacity:0.4;text-decoration:line-through;}
/* ★ v0.2.24: 系统处罚状态 — 粉色显示模拟被系统处罚的用户 */
#enemy-panel .enemy-status.penalized{color:#ff69b4;font-weight:bold;}
#enemy-panel .enemy-sunk.penalized{opacity:0.5;text-decoration:line-through;color:#ff69b4;}
/* ★ 敌舰行 - 可点击选中 */
.enemy-row{pointer-events:auto;cursor:pointer;padding:2px 0;border-radius:3px;transition:background 0.12s;margin-bottom:3px;}
.enemy-row:hover{background:rgba(255,80,80,0.12);}
.enemy-row.selected{background:rgba(255,200,50,0.15);border:1px solid rgba(255,200,50,0.35);border-radius:3px;margin:-1px;padding:2px 1px;}
.enemy-row.sunk-row{pointer-events:none;cursor:default;}
.enemy-row.sunk-row:hover{background:transparent;}
/* ★ 我方舰行（用于血条） */
.ally-row{padding:2px 0;margin-bottom:3px;}
.ally-row.flagship-row{border-left:2px solid rgba(90,170,255,0.3);padding-left:4px;margin-left:-6px;}
/* 旧敌舰标识 - 移除 */
#enemy-badge{display:none !important;}
/* 底部命令面板 - 初始隐藏 */
#cmd-panel{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(0,0,20,0.5);border-top:1px solid #3a6b8c;
  padding:6px 10px;display:none;align-items:center;gap:6px;
  flex-wrap:wrap;z-index:10;
}
#cmd-panel.active{display:flex}
#cmd-panel button{
  background:rgba(20,40,60,0.5);border:1px solid #3a6b8c;border-radius:3px;
  color:#7ec8e3;padding:5px 10px;font-size:11px;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:all 0.15s;
}
#cmd-panel button:hover{background:rgba(30,60,90,0.9);color:#c8e8f8}
#cmd-panel button.active{background:rgba(0,100,180,0.5);border-color:#5af;color:#fff}
#cmd-panel button.danger{color:#f88;border-color:#c44}
#cmd-panel button.danger:hover{background:rgba(80,20,20,0.9)}
#cmd-panel button:disabled{opacity:0.4;cursor:not-allowed;background:rgba(15,20,30,0.5);color:#3a4a5a}
#cmd-panel button:disabled:hover{background:rgba(15,20,30,0.5);color:#3a4a5a}
#cmd-panel .sep{width:1px;height:22px;background:#3a6b8c;margin:0 2px}
#cmd-panel .lbl{color:#5a9ab5;font-size:11px;margin:0 2px}
/* ★ 不可分割的控件组（标签+按钮整体换行） */
#cmd-panel .ctrl-group{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;flex-shrink:0}
/* ★ v0.2.3: 舰队指令按钮选中态 — 蓝色高亮，与交战指令统一 */
#cmd-panel .fleet-active{background:rgba(0,100,180,0.6);border-color:#5af;color:#fff}
/* ★ 竖向车钟样式 - 绝对定位悬浮于左下角，不占文档流，不影响cmd-panel高度 */
#telegraph{
  position:absolute;bottom:42px;left:8px;
  display:none;flex-direction:column;align-items:stretch;gap:1px;
  z-index:11;
  transform:scale(1.5);transform-origin:bottom left;
}
#telegraph.active{display:flex}
#telegraph button{
  text-align:center;padding:3px 8px;font-size:10px;border-radius:2px;
  min-width:44px;
  background:rgba(15,30,45,0.9);border:2px solid transparent;color:#7ec8e3;
  cursor:pointer;font-family:inherit;white-space:nowrap;
  /* ★ v0.2.8: 过渡速度降低50%（0.35s→0.7s），金色边框拨动更平滑缓慢 */
  transition:border-color 0.7s cubic-bezier(0.4, 0.0, 0.2, 1),
              box-shadow 0.7s cubic-bezier(0.4, 0.0, 0.2, 1),
              color 0.4s ease,
              background 0.4s ease;
}
#telegraph button:hover{background:rgba(25,50,75,0.9);color:#c8e8f8;border-color:rgba(42,90,122,0.5)}
/* ★ v0.2.7: 金色边框包裹 + 金色光晕，模拟真实船钟拨动效果 */
#telegraph button.active{
  background:rgba(30,25,10,0.85);
  border-color:#ffd700;
  color:#ffd700;
  box-shadow:0 0 10px rgba(255,215,0,0.5), inset 0 0 6px rgba(255,215,0,0.15);
  text-shadow:0 0 8px rgba(255,215,0,0.4);
}
#telegraph button.danger{color:#f88;border-color:rgba(204,68,68,0.4)}
#telegraph button.danger.active{
  background:rgba(150,30,30,0.5);
  border-color:#f44;
  color:#fff;
  box-shadow:0 0 10px rgba(255,60,60,0.5), inset 0 0 6px rgba(255,60,60,0.15);
}
/* 暂停覆盖层 */
#pause-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.5);display:none;justify-content:center;
  align-items:center;z-index:15;pointer-events:all;
  font-size:32px;color:#fff;letter-spacing:4px;
}
/* 小地图 - 初始隐藏 */
#minimap{
  position:absolute;bottom:120px;right:10px;
  border:1px solid #3a6b8c;border-radius:2px;opacity:1;z-index:5;
  display:none;
}
#minimap.active{display:block}
/* 控制提示 - 右下角小地图下方 */
#controls-tip{
  position:absolute;bottom:38px;right:10px;
  color:#3a6b8c;font-size:10px;text-align:right;line-height:1.5;
  pointer-events:none;z-index:5;display:none;
}
#controls-tip.active{display:block}
#controls-tip .key{color:#ffd700}

/* ★★★ 军舰选择界面 V2 - 全屏覆盖、自适应布局 ★★★ */
#selection-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg, rgba(2,2,20,0.98) 0%, rgba(5,10,30,0.98) 100%);
  z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  overflow-y:auto;overflow-x:hidden;
  padding:20px 10px 30px;
  pointer-events:auto; /* ★ v0.2.22: 确保覆盖层捕获所有点击事件 */
}
#selection-overlay h1{
  color:#ffd700;font-size:clamp(22px,4vw,30px);margin:0 0 2px;
  letter-spacing:3px;text-shadow:0 0 30px rgba(255,215,0,0.5);
  flex-shrink:0;
}
#selection-overlay .subtitle{
  color:#5a9ab5;font-size:clamp(11px,1.8vw,13px);
  margin-bottom:clamp(16px,3vh,28px);letter-spacing:2px;flex-shrink:0;
}
/* ★ 阵营选择按钮 */
#selection-faction{
  display:flex;align-items:center;gap:12px;margin-bottom:clamp(14px,2vh,22px);
  flex-shrink:0;flex-wrap:wrap;justify-content:center;
}
.faction-label{color:#5a9ab5;font-size:14px;font-weight:bold;}
.faction-btn{
  background:rgba(8,12,28,0.9);border:2px solid #2a4a6a;border-radius:8px;
  color:#7ec8e3;font-size:15px;padding:10px 24px;cursor:pointer;
  font-family:inherit;transition:all 0.2s;
}
.faction-btn:hover{border-color:#5af;color:#c8e8f8;box-shadow:0 0 20px rgba(0,120,255,0.2);}
.faction-btn.selected{border-color:#5f5;background:rgba(0,25,8,0.9);color:#5f5;box-shadow:0 0 18px rgba(0,255,80,0.3);}

/* ★ 数量配置 */
#selection-counts{
  display:flex;flex-direction:column;gap:12px;
  margin-bottom:clamp(10px,2vh,18px);flex-shrink:0;
}
.count-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;}
.count-label{font-size:15px;font-weight:bold;}
.ally-label{color:#5f5;}
.enemy-label{color:#f55;}
.count-hint{color:#3a5a7a;font-size:11px;}
.count-control{display:flex;align-items:center;gap:4px;}
.count-btn{
  background:rgba(20,40,60,0.9);border:1px solid #3a6b8c;border-radius:4px;
  color:#7ec8e3;font-size:18px;width:32px;height:32px;cursor:pointer;
  font-family:inherit;display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;
}
.count-btn:hover{background:rgba(30,60,90,0.5);color:#c8e8f8;border-color:#5af;}
.count-btn:disabled{
  opacity:0.25;cursor:not-allowed;color:#3a4a5a;border-color:#2a3a4a;
  background:rgba(10,15,25,0.6);
}
.count-btn:disabled:hover{background:rgba(10,15,25,0.6);color:#3a4a5a;border-color:#2a3a4a;}
.count-value{
  color:#ffd700;font-size:22px;font-weight:bold;min-width:30px;text-align:center;
}
.count-max-hint{color:#f55;font-size:10px;margin-left:2px;display:none;}
.count-max-hint.visible{display:inline;}

/* ★ 预览信息 */
#selection-preview{
  display:flex;flex-direction:column;gap:6px;
  margin-bottom:clamp(10px,2vh,16px);flex-shrink:0;
  background:rgba(0,0,0,0.3);padding:10px 20px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
}
#preview-ally{color:#5f5;font-size:13px;}
#preview-enemy{color:#f55;font-size:13px;}

/* ★ v0.2.58: 舰船详细信息面板 — 我方居左敌方居右，不换行，文本自动折行 */
#ship-detail-panel {
  display:flex; gap:16px;
  margin-bottom:clamp(8px,1.5vh,14px); flex-shrink:0;
  flex-wrap:nowrap; justify-content:center; align-items:flex-start;
  max-width:95vw;
}
#ship-detail-panel #detail-ally,
#ship-detail-panel #detail-enemy {
  flex:0 1 auto; min-width:180px; max-width:46%;
  overflow:hidden;
}
#detail-ally-content,
#detail-enemy-content {
  word-wrap:break-word; overflow-wrap:break-word; white-space:normal;
}
/* ★ v0.2.61: 底部描述文字 — 尽量单行，仅在面板上下排列时允许换行 */
.ship-desc-text {
  color:#999; font-size:10px; line-height:1.5;
  display:inline-block; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ★ v0.2.62: 双列参数布局 — 降低面板高度 */
.ship-params-grid {
  display:flex; gap:10px; font-size:11px; line-height:1.6; color:#ccc;
}
.ship-params-col {
  flex:1; min-width:0;
}
/* 面板改为上下排布时，底部描述允许自动换行 */
@media (max-width:720px) {
  #ship-detail-panel { flex-wrap:wrap; }
  #ship-detail-panel #detail-ally,
  #ship-detail-panel #detail-enemy { max-width:100%; min-width:100%; }
  .ship-desc-text { white-space:normal; overflow:visible; text-overflow:clip; }
}

/* 确认区域 */
#selection-confirm{
  margin-top:clamp(14px,2.5vh,22px);display:flex;flex-direction:column;
  gap:clamp(6px,1vh,10px);align-items:center;flex-shrink:0;
}
#btn-confirm{
  background:rgba(0,100,0,0.85);border:2px solid #5f5;border-radius:8px;
  color:#5f5;font-size:clamp(16px,2.5vw,20px);font-weight:bold;
  padding:clamp(8px,1.5vh,12px) clamp(32px,6vw,56px);
  cursor:pointer;font-family:inherit;letter-spacing:4px;
  transition:all 0.25s;
}
#btn-confirm:hover{background:rgba(0,150,0,0.9);color:#fff;box-shadow:0 0 25px rgba(0,255,0,0.5);transform:scale(1.04);}
#btn-confirm:disabled{opacity:0.25;cursor:not-allowed;background:rgba(20,20,20,0.5);border-color:#444;color:#555;transform:none;}
#btn-confirm:disabled:hover{box-shadow:none;transform:none;}
#selection-info{
  color:#aac;font-size:clamp(10px,1.5vw,13px);text-align:center;line-height:1.5;
  background:rgba(0,0,0,0.3);padding:6px 16px;border-radius:6px;
  border:1px solid rgba(255,255,255,0.06);
  max-width:90vw;
}
#selection-info .ally{color:#5f5;font-weight:bold;}
#selection-info .enemy{color:#f55;font-weight:bold;}
/* 底部提示 */
#selection-hint{
  color:#3a5a7a;font-size:clamp(9px,1.2vw,10px);margin-top:6px;
  letter-spacing:1px;flex-shrink:0;
}

/* 小屏幕适配 */
@media (max-width:620px){
  #selection-overlay{justify-content:flex-start;padding-top:12px;}
}

/* ★★★ v0.2.31: 战后结算面板 — WoWs风格 ★★★ */
#result-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(2,2,18,0.94);
  z-index: 200; display: none; flex-direction: column;
  align-items: center; justify-content: flex-start;
  overflow-y: auto; overflow-x: hidden;
  padding: 20px 16px 30px;
  pointer-events: auto;
}
#result-screen.active { display: flex; }
.result-header {
  text-align: center; margin-bottom: 18px; flex-shrink: 0;
}
.result-title {
  font-size: clamp(24px,4vw,36px); font-weight: bold;
  letter-spacing: 3px; margin-bottom: 4px;
}
.result-subtitle {
  color: #5a9ab5; font-size: 12px; letter-spacing: 1px;
}
.result-tables {
  width: 100%; max-width: 720px;
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 16px; flex-shrink: 0;
}
.result-table-section {
  background: rgba(10,15,30,0.6); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; padding: 10px 14px;
}
.result-table-section h3 {
  font-size: 13px; margin-bottom: 8px; letter-spacing: 1px;
  text-align: left;
}
.result-table-section.ally h3 { color: #5f5; }
.result-table-section.enemy h3 { color: #f55; }
.result-table {
  width: 100%; border-collapse: collapse; font-size: 11px;
  line-height: 1.6; color: #bcc;
}
.result-table thead th {
  color: #5a9ab5; font-size: 10px; font-weight: normal;
  padding: 3px 6px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}
.result-table thead th:first-child { text-align: left; min-width: 100px; }
.result-table tbody td {
  padding: 3px 6px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.result-table tbody td:first-child { text-align: left; font-weight: bold; }
.result-table .sunk-row { opacity: 0.45; text-decoration: line-through; }
.result-table .hit-rate { color: #ffd700; }
.result-table .high-hit { color: #5f5; }
.result-table .low-hit { color: #f88; }
.result-summary {
  width: 100%; max-width: 720px;
  background: rgba(10,15,30,0.6); border: 1px solid rgba(255,215,0,0.15);
  border-radius: 6px; padding: 12px 16px; margin-bottom: 18px;
  flex-shrink: 0; font-size: 12px; line-height: 1.8; color: #bcc;
}
.result-summary h3 {
  color: #ffd700; font-size: 13px; margin-bottom: 6px; letter-spacing: 1px;
}
.result-summary .silver { color: #c0c0c0; }
.result-summary .income { color: #ffd700; }
.result-summary .expense { color: #f88; }
.result-summary .net { color: #5f5; font-weight: bold; }
.result-summary .xp { color: #7ec8e3; }
.result-footer { flex-shrink: 0; }
.result-btn {
  background: rgba(0,100,0,0.85); border: 2px solid #5f5; border-radius: 8px;
  color: #5f5; font-size: 16px; font-weight: bold;
  padding: 10px 48px; cursor: pointer; font-family: inherit;
  letter-spacing: 2px; transition: all 0.25s;
}
.result-btn:hover {
  background: rgba(0,150,0,0.9); color: #fff;
  box-shadow: 0 0 25px rgba(0,255,0,0.5); transform: scale(1.04);
}