:root {
  color-scheme: dark;
  --text: #f7fbff;
  --muted: rgba(247, 251, 255, 0.72);
  --panel: rgba(9, 13, 21, 0.76);
  --panel-strong: rgba(9, 13, 21, 0.9);
  --line: rgba(255, 255, 255, 0.16);
  --blue: #43b7ff;
  --red: #ff5a66;
  --gold: #ffd46a;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #080d15;
  color: var(--text);
  font-family:
    "Microsoft YaHei",
    "PingFang SC",
    "Noto Sans CJK SC",
    system-ui,
    sans-serif;
  overscroll-behavior: none;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* 手机竖屏时用 CSS 强制横屏布局（系统 orientation.lock 不可用时的兜底） */
@media (orientation: portrait) and (max-width: 920px) {
  html.force-landscape body {
    width: 100vw;
    height: 100vh;
  }

  html.force-landscape #app {
    position: fixed;
    width: 100vh;
    height: 100vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }

  html.force-landscape .orientation-notice {
    display: none !important;
  }
}

.hud {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  z-index: 4;
  pointer-events: none;
}

.hud-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hud-row span,
.hud-hint,
.controls button,
.debug-panel,
.panel {
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}

.hud-row span {
  min-width: 76px;
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--muted);
  font-size: clamp(12px, 2.2vh, 15px);
  line-height: 1;
  text-align: center;
}

.hud-hint {
  width: fit-content;
  max-width: min(720px, calc(100vw - 24px));
  margin-top: 8px;
  border-radius: 8px;
  padding: 9px 12px;
  color: #fff;
  font-size: clamp(14px, 2.7vh, 20px);
  font-weight: 700;
  line-height: 1.25;
}

.controls {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  gap: 8px;
}

button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  color: #08101a;
  background: linear-gradient(180deg, #fbfbff, #c8d9f0);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

button:active {
  transform: translateY(1px);
}

.controls button {
  color: var(--text);
  background: var(--panel);
}

.controls button[disabled] {
  opacity: 0.38;
  cursor: default;
}

.debug-panel {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 4;
  width: min(420px, calc(100vw - 24px));
  max-height: 36vh;
  overflow: auto;
  margin: 0;
  border-radius: 8px;
  padding: 10px 12px;
  color: rgba(232, 242, 255, 0.82);
  font: 12px/1.45 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  pointer-events: none;
}

.debug-panel.hidden {
  display: none;
}

.screen {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 220, 110, 0.12), transparent 30%),
    rgba(4, 7, 12, 0.44);
}

.screen.hidden {
  display: none;
}

.panel {
  width: min(420px, calc(100vw - 36px));
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.kicker {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(44px, 12vh, 86px);
}

h2 {
  font-size: clamp(30px, 7vh, 56px);
}

.panel p:not(.kicker) {
  margin: 12px 0 20px;
  color: var(--muted);
  line-height: 1.55;
}

.orientation-notice {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: none;
  place-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--text);
  background: rgba(5, 8, 13, 0.92);
  text-align: center;
}

.orientation-notice strong,
.orientation-notice span {
  display: block;
}

.orientation-notice strong {
  font-size: 28px;
}

.orientation-notice span {
  margin-top: 8px;
  color: var(--muted);
}

/* 未启用强制横屏时，竖屏提示旋转；启用后由 force-landscape 隐藏 */
@media (orientation: portrait) and (max-width: 820px) {
  html:not(.force-landscape) .orientation-notice {
    display: grid;
  }
}

@media (max-width: 680px) {
  .debug-panel {
    width: min(420px, calc(100% - 24px));
    max-height: 30%;
    font-size: 11px;
  }

  .hud-row span {
    min-width: auto;
    padding-inline: 8px;
  }

  .controls {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
  }

  .hud-hint {
    max-width: min(720px, calc(100% - 24px));
  }

  .panel {
    width: min(420px, calc(100% - 36px));
  }
}