/* 飞行模拟器页面 —— 全屏画布 + 毛玻璃悬浮控制层 */
html, body { height: 100%; overflow: hidden; background: #05070c; }

#app { position: fixed; inset: 0; background: #05070c; }

#screen, #screen3d {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  cursor: crosshair;
  touch-action: none;
}
/* 两块画布叠在同一位置：3D 在下（z=0），字符层在上（z=1）。
   真 3D 视图时字符画布只画 HUD 且背景透明，就能像一层平的抬头显示器盖在 3D 画面上。 */
#screen3d { position: absolute; inset: 0; z-index: 0; }
#screen { position: absolute; inset: 0; z-index: 1; }

/* 顶部控制条（毛玻璃，蓝白） */
.hudbar {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .7);
  transition: opacity .3s;
}
.hudbar .sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .24); }
#link, #mouse {
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: .1em;
  color: #bfe3ff;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(10, 40, 70, .45);
}
.qbtn, .ibtn {
  font-family: var(--mono, monospace);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: #dceeff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 7px 11px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .16s, color .16s, transform .16s, border-color .16s;
  white-space: nowrap;
}
.qbtn:hover, .ibtn:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.qbtn.on {
  color: #04223c;
  background: linear-gradient(135deg, #8fd0ff, #4aa3ff);
  border-color: rgba(255, 255, 255, .5);
  font-weight: 700;
}
.ibtn { padding: 7px 10px; }

/* 开屏加载 */
#boot {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: radial-gradient(900px 600px at 50% 30%, #0c2340 0%, #05070c 70%);
  transition: opacity .55s ease, visibility .55s;
}
#boot.gone { opacity: 0; visibility: hidden; }
#boot .inner { text-align: center; }
#boot .ttl {
  font-family: var(--mono, monospace);
  font-size: clamp(22px, 4vw, 40px);
  letter-spacing: .34em;
  color: #cfeaff;
  margin-bottom: 16px;
  text-shadow: 0 0 26px rgba(90, 190, 255, .5);
}
#boot .sub { font-family: var(--mono, monospace); font-size: 12px; color: #6ea6cf; letter-spacing: .18em; }
#boot .bar { width: 210px; height: 3px; margin: 20px auto 0; background: rgba(120, 190, 255, .18); border-radius: 3px; overflow: hidden; }
#boot .bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, #5cc0ff, transparent); animation: sweep 1.15s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }

/* 通用遮罩层 */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 12, 22, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.overlay.show { opacity: 1; visibility: visible; }

.panel {
  width: min(860px, 100%);
  max-height: 88vh;
  overflow: auto;
  border-radius: 22px;
  padding: 26px 28px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
  color: #e8f4ff;
  transform: translateY(14px) scale(.985);
  transition: transform .34s cubic-bezier(.16, .84, .28, 1);
}
.overlay.show .panel { transform: none; }

.panel h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.2px; color: #fff; }
.panel h3 {
  margin: 22px 0 8px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7fb6dd;
  font-weight: 700;
}
.panel p, .panel li { font-size: 14px; line-height: 1.8; color: #c3ddf2; }
.panel ul { padding-left: 20px; margin: 6px 0; }
.panel code, .panel kbd {
  font-family: var(--mono, monospace);
  font-size: 12.4px;
  background: rgba(120, 190, 255, .16);
  border: 1px solid rgba(120, 190, 255, .26);
  color: #b7e0ff;
  padding: 2px 7px;
  border-radius: 7px;
}
.panel .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
@media (max-width: 700px) { .panel .grid2 { grid-template-columns: 1fr; } }
.panel .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pb {
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .1);
  color: #e8f4ff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .16s, background .18s;
}
.pb:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.pb.primary {
  background: linear-gradient(135deg, #4aa3ff, #1a5fb8);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(40, 130, 230, .9);
}
table.kt { width: 100%; border-collapse: collapse; margin: 6px 0; }
table.kt td { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 13.6px; color: #c3ddf2; }
table.kt td:first-child { width: 180px; color: #9fd2f5; }
table.kt tr:last-child td { border-bottom: 0; }

/* 阵亡页 */
#death .panel {
  width: min(560px, 100%);
  text-align: center;
  background: linear-gradient(180deg, rgba(120, 22, 30, .5), rgba(12, 20, 34, .72));
  border-color: rgba(255, 120, 120, .3);
}
#death .big {
  font-size: clamp(46px, 11vw, 86px);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.1;
  margin: 6px 0 4px;
  background: linear-gradient(150deg, #ffd7d7, #ff5f5f 55%, #b8232a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
#death .why { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .22em; color: #ff9b9b; margin-bottom: 4px; }
#death .stat { display: flex; justify-content: center; gap: 26px; margin: 22px 0 6px; }
#death .stat div { text-align: center; }
#death .stat b { display: block; font-size: 24px; font-family: var(--mono, monospace); color: #fff; }
#death .stat span { font-size: 11px; letter-spacing: .14em; color: #93b6d4; text-transform: uppercase; }

/* 触摸控制 */
#touch { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
#touch.hidden { display: none; }
#stick {
  position: absolute;
  left: 22px; bottom: 26px;
  width: 132px; height: 132px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  touch-action: none;
}
#stick.act { background: rgba(120, 190, 255, .16); }
#knob {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bfe3ff, #3f8bd8);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .7);
  transition: transform .08s linear;
}
.tbtn {
  position: absolute;
  pointer-events: auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px);
  color: #e6f4ff;
  font-family: var(--mono, monospace);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.tbtn.act { background: rgba(120, 190, 255, .34); transform: scale(.94); }
#btn-fire {
  right: 26px; bottom: 34px; width: 104px; height: 104px;
  font-size: 15px;
  background: radial-gradient(circle at 36% 30%, rgba(255, 150, 150, .55), rgba(190, 40, 50, .55));
  border-color: rgba(255, 150, 150, .5);
}
#btn-aim { right: 142px; bottom: 44px; width: 78px; height: 78px; }
#btn-thr-up { right: 34px; bottom: 152px; width: 62px; height: 62px; }
#btn-thr-dn { right: 108px; bottom: 152px; width: 62px; height: 62px; }
#btn-yaw-l { left: 168px; bottom: 44px; width: 62px; height: 62px; }
#btn-yaw-r { left: 168px; bottom: 118px; width: 62px; height: 62px; }

body.touch #screen { cursor: default; }

/* 提示条 */
#toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 12px);
  z-index: 25;
  padding: 9px 16px;
  border-radius: 12px;
  font-family: var(--mono, monospace);
  font-size: 12px;
  letter-spacing: .06em;
  color: #d8ecff;
  background: rgba(10, 30, 50, .6);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .hudbar { top: 6px; right: 6px; padding: 6px; gap: 6px; max-width: calc(100vw - 12px); overflow-x: auto; }
  .qbtn, .ibtn { padding: 6px 9px; font-size: 11px; }
}