/* ====== 遥控消防车 · 全局样式 ====== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; }
body {
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:#14161c; color:#eee;
  user-select:none; -webkit-user-select:none;
}
.hidden { display:none !important; }
kbd {
  background:#2b2f3a; border:1px solid #444; border-bottom-width:2px;
  border-radius:4px; padding:1px 6px; font-size:12px; margin:0 2px;
}

#app { display:flex; flex-direction:column; height:100%; }

/* ============ 舞台 ============ */
#stage { position:relative; flex:1; min-height:0; background:#000; }
#cv { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; }

/* ---- HUD ---- */
#hud {
  position:absolute; top:0; left:0; right:0; padding:10px 14px;
  display:flex; justify-content:space-between; align-items:flex-start;
  pointer-events:none; z-index:5;
}
.hud-left,.hud-center,.hud-right { display:flex; gap:8px; align-items:center; }
.hud-center { flex-direction:column; }
.hud-card {
  background:rgba(10,14,24,.72); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:6px 12px; font-size:14px;
  backdrop-filter:blur(4px); box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.hud-card.objective { max-width:340px; font-size:13px; color:#ffd97a; }
.hud-card.score b { color:#7dffb0; font-size:17px; }
.hud-card.civs { color:#ffb3b3; }
.wind-arrow { display:inline-block; color:#8fd3ff; transition:transform .5s; margin-right:4px; }
.hud-btn {
  pointer-events:auto; background:rgba(10,14,24,.72); color:#eee;
  border:1px solid rgba(255,255,255,.15); border-radius:10px;
  width:36px; height:34px; font-size:15px; cursor:pointer;
}
.hud-btn:hover { background:rgba(50,60,90,.8); }

/* ---- 车辆切换条 ---- */
#vehBar { display:flex; gap:6px; pointer-events:auto; }
.veh-chip {
  display:flex; align-items:baseline; gap:3px; cursor:pointer;
  background:rgba(10,14,24,.72); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:4px 9px; font-size:19px;
  transition:transform .12s, border-color .12s;
}
.veh-chip em { font-style:normal; font-size:10px; color:#8fa3c0; }
.veh-chip:hover { transform:translateY(-2px); }
.veh-chip.active {
  border-color:#ffd97a; background:rgba(70,55,15,.8);
  box-shadow:0 0 12px rgba(255,190,60,.35);
}
.hud-card.mats { color:#ffd9a0; }

/* ---- 车道纵深指示器 ---- */
.hud-card.lane { padding:6px 10px; }
.lane-dots { display:flex; flex-direction:column; gap:3px; }
.lane-dots i {
  display:block; width:22px; height:4px; border-radius:2px;
  background:#3a4256; transition:background .15s, width .15s;
}
.lane-dots i.on { background:#8fd3ff; box-shadow:0 0 8px rgba(90,180,255,.8); }
.lane-dots i:nth-child(2) { width:26px; }
.lane-dots i:nth-child(3) { width:30px; }

/* ---- 提示 / 连击 ---- */
#toast {
  position:absolute; left:50%; top:16%; transform:translateX(-50%);
  background:rgba(15,20,35,.88); border:1px solid #ffd97a55;
  color:#ffe9b0; padding:10px 22px; border-radius:12px; font-size:16px;
  z-index:6; pointer-events:none; text-align:center;
  animation:toastIn .3s ease; box-shadow:0 4px 20px rgba(0,0,0,.5);
}
@keyframes toastIn { from { opacity:0; transform:translate(-50%,-10px);} to { opacity:1; transform:translate(-50%,0);} }
#combo {
  position:absolute; right:8%; top:26%; z-index:6; pointer-events:none;
  font-size:26px; font-weight:800; color:#ffcf4d;
  text-shadow:0 0 12px #ff8a00,0 2px 2px #000;
  animation:comboPop .25s ease;
}
@keyframes comboPop { from { transform:scale(1.6); opacity:.4;} to { transform:scale(1); opacity:1;} }

/* ---- 弹层通用 ---- */
.overlay {
  position:absolute; inset:0; z-index:10;
  background:rgba(8,10,18,.78); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  overflow:auto; padding:20px;
}
.dialog-box {
  background:linear-gradient(160deg,#232a3a,#171c29);
  border:1px solid rgba(255,255,255,.14); border-radius:18px;
  padding:28px 34px; text-align:center; max-width:640px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.dialog-box h2 { margin-bottom:12px; font-size:24px; }
.big-btn {
  display:block; width:100%; margin:14px 0 8px; padding:12px;
  font-size:17px; font-weight:700; color:#1b1b1b; cursor:pointer;
  background:linear-gradient(180deg,#ffd23e,#ff9d00);
  border:none; border-radius:12px; box-shadow:0 4px 0 #b96f00,0 6px 14px rgba(0,0,0,.4);
  transition:transform .08s;
}
.big-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #b96f00; }
.ghost-btn {
  display:inline-block; margin:6px 4px; padding:9px 18px; font-size:14px;
  background:transparent; color:#bcd; border:1px solid #567; border-radius:10px; cursor:pointer;
}
.ghost-btn:hover { background:rgba(120,150,200,.12); color:#fff; }
.pause-note { color:#9ab; font-size:13px; margin-bottom:6px; }

/* ---- 主菜单 ---- */
.menu-box { max-width:1100px; width:100%; text-align:center; }
.game-title h1 {
  font-size:52px; letter-spacing:6px;
  background:linear-gradient(180deg,#fff,#ffb84d 60%,#ff5722);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 24px rgba(255,110,20,.35);
}
.title-badge { font-size:56px; display:block; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-8px);} }
.subtitle { color:#8fa3c0; letter-spacing:8px; font-size:13px; margin:6px 0 26px; }
.mode-cards { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.mode-card {
  flex:1 1 260px; max-width:300px; min-height:230px; cursor:pointer;
  background:linear-gradient(170deg,#242c3e,#181e2b);
  border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:20px 18px;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.mode-card:hover {
  transform:translateY(-5px); border-color:#ffb84d;
  box-shadow:0 12px 30px rgba(255,140,30,.18);
}
.mode-icon { font-size:38px; margin-bottom:8px; }
.mode-card h3 { font-size:19px; margin-bottom:8px; color:#ffd97a; }
.mode-card p { font-size:13px; color:#a7b4c8; line-height:1.6; }
.mode-tag {
  display:inline-block; margin-top:12px; font-size:12px; color:#7dffb0;
  border:1px solid #2f6a4a; border-radius:20px; padding:3px 12px;
}
.level-grid { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px; }
.level-cell {
  width:64px; padding:5px 0 3px; border-radius:9px; cursor:pointer; font-size:13px;
  background:#2c3550; border:1px solid #46557e; color:#dce6ff;
}
.level-cell:hover { background:#3b4a75; }
.level-cell.locked { opacity:.35; cursor:not-allowed; }
.level-cell .lv-stars { display:block; font-size:9px; color:#ffcf4d; letter-spacing:1px; }
.menu-footer { margin-top:26px; display:flex; align-items:center; justify-content:center; gap:18px; }

/* ---- 车辆小游戏乐园 ---- */
.mini-lobby { margin-top:26px; }
.lobby-title {
  font-size:20px; color:#ffd97a; letter-spacing:2px; margin-bottom:14px;
}
.lobby-title small { display:block; font-size:12px; color:#7f8fa5; letter-spacing:1px; margin-top:4px; font-weight:400; }
.mini-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
}
.mini-card {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:linear-gradient(170deg,#232c3f,#161c29);
  border:1px solid rgba(255,255,255,.1); border-radius:14px;
  padding:14px 10px 12px; cursor:pointer; text-align:center;
  transition:transform .13s, border-color .13s, box-shadow .13s;
}
.mini-card:hover {
  transform:translateY(-4px); border-color:#7dd8ff;
  box-shadow:0 10px 26px rgba(80,180,255,.16);
}
.mini-card .mg-icon { font-size:34px; line-height:1.1; }
.mini-card .mg-name { font-size:15px; font-weight:700; color:#e8f0fa; }
.mini-card .mg-desc { font-size:11px; color:#8fa0b8; line-height:1.55; min-height:34px; }
.mini-card .mg-best {
  font-size:11px; color:#ffcf4d; border:1px solid #6a5620;
  border-radius:12px; padding:2px 10px; background:rgba(90,70,15,.25);
}
@media (max-width:900px) {
  .mini-grid { grid-template-columns:repeat(2, 1fr); }
}
.save-note { font-size:12px; color:#6f7f95; }

/* ---- 结算 ---- */
.stars { font-size:40px; letter-spacing:8px; margin:8px 0; min-height:48px; }
.stars .on { color:#ffcf4d; text-shadow:0 0 16px #ff9d00; animation:starPop .4s backwards; }
.stars .off { color:#3a4256; }
.stars .on:nth-child(2){ animation-delay:.2s; } .stars .on:nth-child(3){ animation-delay:.4s; }
@keyframes starPop { from { transform:scale(2.2); opacity:0;} to { transform:scale(1); opacity:1;} }
.stats {
  display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; text-align:left;
  font-size:14px; color:#b8c4d8; margin:12px auto; max-width:400px;
}
.stats b { color:#fff; float:right; }
.debrief-msg { color:#8fd3a8; font-size:14px; margin:8px 0; }
.debrief-btns { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; }
.debrief-btns .big-btn { width:auto; padding:12px 30px; display:inline-block; }

/* ---- 帮助 ---- */
.dialog-box.help { max-width:760px; text-align:left; max-height:92%; overflow:auto; }
.dialog-box.help h2 { text-align:center; }
.help-cols { display:flex; gap:30px; flex-wrap:wrap; }
.help-cols > div { flex:1 1 300px; }
.help-cols h4 { color:#ffd97a; margin:14px 0 6px; }
.help-cols ul { list-style:none; font-size:13px; color:#b8c4d8; line-height:2; }
.phil-title { color:#7dffb0; margin:18px 0 8px; }
.phil-list { list-style:none; font-size:13px; color:#a7b4c8; line-height:1.9; }
.phil-list b { color:#cfe6d8; }

/* ---- 快捷键一览 ---- */
.dialog-box.keys { max-width:880px; text-align:left; max-height:92%; overflow:auto; }
.dialog-box.keys h2 { text-align:center; }
.keys-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:4px 26px; }
.keys-group h4 { color:#ffd97a; margin:12px 0 4px; font-size:15px; }
.krow {
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:#b8c4d8; padding:4px 0;
  border-bottom:1px dashed rgba(255,255,255,.07);
}
.krow span { white-space:nowrap; }
.krow em { font-style:normal; color:#8fa3c0; margin-left:14px; text-align:right; }
.combo-flow {
  margin:14px 0 4px; font-size:13px; color:#7dffb0; text-align:center;
  background:rgba(40,90,60,.18); border:1px solid #2f6a4a44;
  border-radius:10px; padding:8px 12px; line-height:1.7;
}

/* ============ 遥控面板 ============ */
#panel {
  position:relative; flex:0 0 208px; z-index:20;
  background:
    radial-gradient(1200px 80px at 50% -30px, rgba(255,255,255,.10), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px),
    linear-gradient(180deg,#3a4150,#262b36 30%,#1d212b);
  border-top:2px solid #4d5568;
  box-shadow:0 -8px 30px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.08);
  padding:8px 20px 10px;
}
.antenna {
  position:absolute; left:34px; top:-64px; width:5px; height:66px;
  background:linear-gradient(180deg,#9aa4b5,#565e6e); border-radius:3px;
}
.antenna-tip {
  position:absolute; top:-9px; left:-3px; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8a8a,#c81e1e);
  box-shadow:0 0 10px rgba(255,60,60,.7); animation:blinkTip 1.6s infinite;
}
@keyframes blinkTip { 0%,100% { opacity:1;} 50% { opacity:.35;} }
#panelLcd {
  margin:0 auto 8px; width:min(560px,90%); height:26px; line-height:24px;
  background:linear-gradient(180deg,#0c1a10,#123619);
  border:1px solid #0a2410; border-radius:6px; text-align:center;
  color:#59ff87; font-family:"Courier New",monospace; font-size:13px; letter-spacing:2px;
  text-shadow:0 0 8px #2aff6a; box-shadow:inset 0 2px 8px rgba(0,0,0,.8);
  overflow:hidden; white-space:nowrap;
}
.panel-body {
  display:flex; gap:14px; justify-content:center; align-items:stretch;
  height:calc(100% - 36px);
}
.cluster {
  flex:1 1 0; max-width:250px; position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.09); border-radius:14px;
  padding:20px 10px 8px; display:flex; flex-direction:column; align-items:center; gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.cluster-label {
  position:absolute; top:2px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:4px; color:#8b96ab;
}
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.row.center { justify-content:center; }

/* 按钮 */
.p-btn {
  background:linear-gradient(180deg,#59637a,#39404f);
  border:1px solid #202531; border-radius:10px; color:#e8edf5;
  font-size:14px; padding:9px 12px; cursor:pointer; font-weight:600;
  box-shadow:0 3px 0 #1a1e28, inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .05s, box-shadow .05s; touch-action:none;
}
.p-btn:active,.p-btn.pressed {
  transform:translateY(2px); box-shadow:0 1px 0 #1a1e28;
  background:linear-gradient(180deg,#485270,#2e3547);
}
.p-btn.big { font-size:22px; padding:14px 20px; }
.p-btn.round { border-radius:50%; width:44px; height:44px; padding:0; font-size:17px; }
.p-btn.wide { width:90%; }
.p-btn.tall { padding:11px 12px; }
.p-btn.on {
  background:linear-gradient(180deg,#3e7c52,#2a5a3a); border-color:#1c3d27;
  color:#c9ffdc; box-shadow:0 1px 0 #14281a, 0 0 14px rgba(70,255,140,.25);
}

/* 喷水大按钮 */
.spray-btn {
  width:76px; height:76px; border-radius:50%; cursor:pointer; touch-action:none;
  background:radial-gradient(circle at 32% 26%,#ff8a7a,#d9261c 60%,#8f120c);
  border:3px solid #6e0d08; color:#fff; font-weight:800; font-size:13px; line-height:1.3;
  box-shadow:0 5px 0 #5c0a06, 0 8px 18px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.35);
  transition:transform .06s, box-shadow .06s;
}
.spray-btn:active,.spray-btn.pressed {
  transform:translateY(4px); box-shadow:0 1px 0 #5c0a06;
  background:radial-gradient(circle at 32% 26%,#ff6a58,#b81d14 60%,#7a0f0a);
}

/* 拨杆开关 */
.switch-wrap { display:flex; align-items:center; gap:6px; font-size:12px; color:#aeb8ca; }
.switch-wrap em { font-style:normal; color:#68758c; font-size:10px; margin-left:2px; }
.toggle {
  width:40px; height:20px; border-radius:12px; cursor:pointer; position:relative;
  background:linear-gradient(180deg,#181c25,#252b38);
  border:1px solid #10141c; box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
  transition:background .15s;
}
.toggle .knob {
  position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(180deg,#cfd6e2,#8b96ab);
  box-shadow:0 2px 4px rgba(0,0,0,.5); transition:left .15s;
}
.toggle.on { background:linear-gradient(180deg,#0f3a20,#1c6a38); }
.toggle.on .knob { left:21px; background:linear-gradient(180deg,#eafff1,#9fe8bb); }
.toggle.amber.on { background:linear-gradient(180deg,#4a3208,#8a6212); }

/* LED */
.led,.mini-led {
  width:11px; height:11px; border-radius:50%;
  background:#3a1518; border:1px solid #000; box-shadow:inset 0 1px 2px rgba(0,0,0,.8);
  transition:all .12s;
}
.mini-led { width:8px; height:8px; }
.led.lit,.mini-led.lit { background:radial-gradient(circle at 35% 30%,#ff9a9a,#e01f1f); box-shadow:0 0 9px rgba(255,50,50,.9); }
.led.amber.lit,.mini-led.amber.lit { background:radial-gradient(circle at 35% 30%,#ffe19a,#e0961f); box-shadow:0 0 9px rgba(255,180,50,.9); }
.led.blue.lit,.mini-led.blue.lit { background:radial-gradient(circle at 35% 30%,#9ad2ff,#1f7ce0); box-shadow:0 0 9px rgba(60,160,255,.9); }
.lamp-row { display:flex; align-items:center; gap:5px; font-size:10px; color:#7c8699; }
.lamp-row span { margin-right:8px; }

/* 喇叭网 */
.speaker {
  width:64px; height:22px; border-radius:6px; margin-top:2px;
  background:repeating-radial-gradient(circle at 8px 8px, #10141c 0 1.5px, #2a3040 1.5px 5px);
  border:1px solid #10141c; opacity:.8;
}

/* 驾驶区 */
.drive-pad { display:flex; align-items:center; gap:10px; }
.speedo {
  width:74px; height:52px; border-radius:8px; text-align:center;
  background:linear-gradient(180deg,#05070c,#0d1220);
  border:1px solid #0a0e18; box-shadow:inset 0 2px 8px rgba(0,0,0,.9);
  display:flex; flex-direction:column; justify-content:center;
}
.speedo span { font-family:"Courier New",monospace; font-size:22px; color:#ffb534; text-shadow:0 0 8px #ff8a00; font-weight:700; }
.speedo em { font-style:normal; font-size:9px; color:#6b7688; letter-spacing:1px; }

/* 云梯十字键 */
.ladder-pad {
  display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%;
  max-width:170px;
}
.ladder-pad .p-btn { font-size:13px; padding:9px 4px; }

/* 水炮区 */
.water-cluster { max-width:290px; }
.water-pad { display:flex; align-items:center; gap:10px; }
.aim-col { display:flex; flex-direction:column; gap:6px; }
.aim-col .p-btn { padding:7px 13px; }
.pressure-col,.tank-col {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10px; color:#8b96ab;
}
#prSlider {
  writing-mode:vertical-lr; direction:rtl;
  -webkit-appearance:slider-vertical; appearance:slider-vertical;
  width:14px; height:72px; accent-color:#3da5ff; cursor:pointer;
}
.tank-gauge {
  width:18px; height:74px; border-radius:5px; overflow:hidden; position:relative;
  background:linear-gradient(180deg,#05070c,#0d1220); border:1px solid #0a0e18;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9);
}
#tankFill {
  position:absolute; bottom:0; left:0; right:0; height:100%;
  background:linear-gradient(180deg,#7fd0ff,#1b78d8);
  box-shadow:0 0 8px rgba(80,170,255,.6); transition:height .2s;
}
#tankFill.low { background:linear-gradient(180deg,#ff9a7a,#d8451b); animation:lowBlink .6s infinite; }
@keyframes lowBlink { 50% { opacity:.45; } }

/* 螺丝装饰 */
.screw {
  position:absolute; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#aab4c6,#525a6b 70%,#2a2f3b);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.6);
}
.screw::after {
  content:""; position:absolute; left:2px; right:2px; top:5px; height:2px;
  background:#20242e; border-radius:2px; transform:rotate(38deg);
}
.screw.tl { top:8px; left:10px; } .screw.tr { top:8px; right:10px; }
.screw.bl { bottom:8px; left:10px; } .screw.br { bottom:8px; right:10px; }

/* 小屏适配 */
@media (max-width:900px) {
  #panel { flex-basis:236px; padding:6px 6px 8px; }
  .panel-body { gap:6px; }
  .cluster { padding:18px 4px 6px; }
  .p-btn.big { font-size:18px; padding:12px 14px; }
  .game-title h1 { font-size:36px; }
}