:root {
  --game-design-width: 1180px;
  --game-design-height: 820px;
  --game-scale: 1;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: block;
  background:
    radial-gradient(circle at 8% 16%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 82% 22%, #82eaff 0 2px, transparent 3px),
    radial-gradient(circle at 66% 76%, #ffe572 0 2px, transparent 3px),
    radial-gradient(circle at 30% 82%, #fff 0 1px, transparent 2px),
    linear-gradient(135deg, #06162f, #102958 58%, #20164f);
  background-size: 180px 180px, 240px 240px, 210px 210px, 130px 130px, auto;
}

.game-viewport {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
}

.game-frame {
  position: relative;
  flex: none;
  overflow: visible;
}

.game-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--game-design-width);
  height: var(--game-design-height);
  overflow: hidden;
  transform: scale(var(--game-scale));
  transform-origin: left top;
  contain: layout paint style;
}

.game-stage > .app,
.game-stage > #app,
.app.travel-ui,
.app.lesson-mode {
  position: absolute;
  inset: 0;
  width: var(--game-design-width);
  height: var(--game-design-height);
  min-height: 0;
  margin: 0;
  padding: 0;
}

.travel-ui .child-view,
.lesson-mode .child-view {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.parent-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 20px;
}

.parent-shell {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.dialog {
  position: absolute;
  z-index: 1100;
  inset: 0;
  display: grid;
  width: auto;
  place-items: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: rgba(3, 12, 30, .72);
  backdrop-filter: blur(5px);
}

.dialog[hidden] { display: none; }
.dialog-card { width: 440px; border: 2px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.35); }

.toast,
.update-banner {
  position: absolute;
  max-width: 520px;
}

.update-banner { width: 620px; }

.guide-shell {
  width: 1140px;
  height: 780px;
  min-height: 0;
  margin: 20px;
  grid-template-rows: 78px 148px 1fr 104px;
  border-radius: 38px;
}

.guide-header,
.guide-footer { flex-direction: row; align-items: center; gap: 0; padding: 0 36px; }
.guide-hero { grid-template-columns: 130px 1fr 310px; padding: 14px 42px; }
.guide-mascot { width: 104px; height: 104px; }
.guide-mascot span { font-size: 57px; }
.speech-status { grid-column: auto; }
.guide-steps { grid-template-columns: repeat(3, 1fr); padding: 16px 30px; }
.guide-step { min-height: 130px; padding: 15px 18px; }
.guide-footer { align-items: center; flex-direction: row; }

/* 游戏内容只使用 1180×820 逻辑布局；设备宽度不得触发页面重排。 */
.travel-stage-steps .step-name { display: inline; }
.travel-stage-steps { gap: 8px; }
.travel-word-progress { min-width: 150px; }
.travel-session-actions { gap: 10px; }
.travel-session-actions > button { padding: 0 13px; }
.travel-mission { margin: 8px 24px; }
.map-mission-card { left: 24px; top: 20px; width: min(275px, 34%); padding: 12px 16px; }
.travel-stamp { width: 18%; min-height: 78px; padding: 6px 9px; }
.travel-question { padding: 38px; }
.travel-answers { padding: 38px 52px; }
.album-stamp-grid { grid-template-columns: repeat(6, minmax(105px, 1fr)); }

.solar-map { inset: 78px 14px 70px; }
.solar-mission { width: 250px; padding: 14px 16px; }
.solar-mission h2 { font-size: 28px; }
.solar-planet-node { width: 104px; }
.solar-planet-node strong { font-size: 12px; }
.solar-planet-node.mercury { left: 17%; }
.solar-planet-node.venus { left: 26%; }
.solar-planet-node.earth { left: 35%; }
.solar-planet-node.mars { left: 43%; }
.solar-planet-node.jupiter { left: 55%; }
.solar-planet-node.saturn { left: 68%; }
.solar-planet-node.uranus { left: 79%; }
.solar-planet-node.neptune { left: 90%; }

.galaxy-layout { grid-template-columns: 235px minmax(0,1fr); }
.galaxy-sidebar { padding: 27px 22px 20px; }
.galaxy-wallet span { padding: 0 14px; font-size: inherit; }
.galaxy-fleet-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.galaxy-project-card { padding: 18px; }
.galaxy-project-card img { height: 250px; }
.galaxy-starwish-card { grid-template-columns: 210px minmax(0,1fr) 180px; }

.orientation-lock { display: none; }

.release-checking .game-stage { pointer-events: none; }
.force-upgrade-open .game-stage > :not(.force-upgrade-overlay) { pointer-events: none; }
.force-upgrade-overlay {
  position: absolute;
  z-index: 30000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px;
  color: #eefaff;
  background:
    radial-gradient(circle at 18% 22%, #67e5ff55, transparent 28%),
    radial-gradient(circle at 82% 72%, #725dff55, transparent 30%),
    rgba(2, 9, 27, .96);
}
.force-upgrade-card {
  display: grid;
  width: 610px;
  justify-items: center;
  gap: 12px;
  border: 3px solid #6ce6ff;
  border-radius: 34px;
  padding: 30px 42px 34px;
  background: linear-gradient(155deg, #123663, #081b3d);
  box-shadow: 0 0 55px #60dfff55, 0 28px 90px #000b;
  text-align: center;
}
.force-upgrade-ship { font-size: 76px; filter: drop-shadow(0 10px 10px #0008); }
.force-upgrade-card small { color: #70e6ff; font-size: 16px; font-weight: 900; letter-spacing: .12em; }
.force-upgrade-card h1 { margin: 0; color: #fff29a; font-size: 42px; }
.force-upgrade-card p { margin: 0; max-width: 470px; color: #d7e9f5; font-size: 21px; line-height: 1.55; }
.force-upgrade-card > div:not(.force-upgrade-ship) { display: flex; align-items: center; gap: 14px; color: #a7c6da; font-weight: 800; }
.force-upgrade-card > div span { border: 1px solid #3f789c; border-radius: 99px; padding: 7px 13px; background: #0b274d; }
.force-upgrade-card > div b { color: #ffdc63; font-size: 22px; }
.force-upgrade-card button { min-width: 280px; min-height: 58px; border: 2px solid #dffaff; border-radius: 16px; color: #08223a; background: linear-gradient(90deg, #67e5ff, #ffdc63); box-shadow: 0 7px 0 #174a69; font-size: 21px; font-weight: 900; }
.force-upgrade-card button:disabled { cursor: wait; opacity: .75; }
.force-upgrade-card em { min-height: 24px; color: #9fc1d5; font-style: normal; }

@media (orientation: portrait) {
  .game-viewport { visibility: hidden; pointer-events: none; }
  .orientation-lock {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #eefaff;
    background:
      radial-gradient(circle at 20% 18%, #ffe572 0 3px, transparent 4px),
      radial-gradient(circle at 82% 28%, #82eaff 0 3px, transparent 4px),
      linear-gradient(145deg,#06162f,#172e62 62%,#24164d);
    text-align: center;
  }
  .orientation-lock > div { display: grid; gap: 12px; max-width: 420px; }
  .orientation-lock strong { font-size: 34px; }
  .orientation-lock span { color: #b9d7e8; font-size: 18px; line-height: 1.5; }
}