/* layout.css —— 全屏自适应 / 横竖屏 / 安全区 */

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(#79c7ec 0%, #cdeeff 55%, #e8f7ff 100%);
}

#stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.layer > * { pointer-events: auto; }

/* ---------- 顶部信息条 ---------- */
#topbar {
  inset: 0 0 auto 0;
  height: calc(58px + var(--safe-t));
  padding: calc(8px + var(--safe-t)) calc(14px + var(--safe-r)) 8px calc(14px + var(--safe-l));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.topbar-left > *,
.topbar-right > * { pointer-events: auto; }

/* ---------- 底部操控区 ---------- */
#hud {
  inset: auto 0 0 0;
  height: 178px;
  padding: 0 calc(16px + var(--safe-r)) calc(10px + var(--safe-b)) calc(16px + var(--safe-l));
}

.hud-left,
.hud-right {
  position: absolute;
  bottom: calc(14px + var(--safe-b));
  display: flex;
  gap: 10px;
}

.hud-left { left: calc(16px + var(--safe-l)); }
.hud-right { right: calc(16px + var(--safe-r)); }

.hud-center {
  position: absolute;
  left: 50%;
  bottom: calc(16px + var(--safe-b));
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.gauge-wrap {
  position: absolute;
  right: calc(150px + var(--safe-r));
  top: 6px;
  width: 132px;
  text-align: center;
}

.coach {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  max-width: min(70vw, 460px);
  text-align: center;
}

/* ---------- 全屏界面层 ---------- */
#screens { z-index: 40; }

/* ---------- 横屏提示 ---------- */
.rotate-hint {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(#8fd4f5, #ffe7a8);
  color: var(--navy);
  font-size: 22px;
}

/* 触屏设备竖屏时提示旋转 */
body.touch #rotateHint.show { display: flex !important; }
body:not(.touch) #rotateHint { display: none !important; }

/* ---------- 小屏适配 ---------- */
@media (max-height: 460px) {
  #hud { height: 150px; }
  .gauge-wrap { right: calc(138px + var(--safe-r)); transform: scale(0.86); transform-origin: top right; }
}

@media (max-width: 560px) {
  .gauge-wrap { transform: scale(0.82); transform-origin: top right; }
  .hud-center { gap: 10px; }
}

/* 笔记本电脑等较矮窗口 */
@media (min-width: 900px) and (max-height: 620px) {
  #hud { height: 158px; }
}