:root {
  color-scheme: dark;
  background: #1a100c;
  color: #fff2d6;
  font-family: "MrTomato Pixel", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html,
body,
button,
input,
select,
textarea,
.game-shell,
.game-shell *,
.game-shell *::before,
.game-shell *::after {
  font-family: "MrTomato Pixel", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

html { touch-action: manipulation; }

body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  background: #1a100c;
  -webkit-touch-callout: none;
}

html,
body,
.game-shell,
.game-shell * {
  -webkit-user-select: none;
  user-select: none;
}

.game-stage,
.game-stage canvas,
.formal-ui {
  touch-action: none;
  -webkit-touch-callout: none;
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.game-shell {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100dvh;
  grid-template-rows: 0 minmax(0,1fr);
  place-items: center;
}
.game-shell[data-preview-rail="visible"] { grid-template-rows: 56px minmax(0,1fr); }

.preview-device {
  position: relative;
  display: grid;
  grid-row: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: center;
}

.preview-toolbar {
  position: relative;
  grid-row: 1;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 2px solid #2b1b14;
  background: rgb(22 13 9 / 92%);
  box-shadow: 3px 3px 0 #120a07;
  color: #f0c27a;
  font: 12px/1 "MrTomato Pixel", "PingFang SC", sans-serif;
}

.preview-toolbar > span { padding: 0 5px; white-space: nowrap; }
.preview-mode-button {
  min-width: 64px;
  min-height: 44px;
  padding: 4px 8px;
  border: 2px solid #2b1b14;
  background: #67301b;
  box-shadow: inset 0 -2px 0 #160d09;
  color: #fff2d6;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.preview-mode-button.is-active { border-color: #f4a33a; background: #1f4e4b; color: #fff2d6; }
.preview-mode-button:focus-visible { outline: 3px solid #f4a33a; outline-offset: 3px; }
.preview-mode-button:active { translate: 1px 1px; box-shadow: inset 0 -1px 0 #160d09; }

.preview-speaker, .preview-safe-area { display: none; }
.game-shell[data-preview-mode="iphone"] .preview-device {
  width: min(calc(100vw - 28px), calc((100dvh - 16px) * 932 / 430));
  height: auto;
  aspect-ratio: 932 / 430;
  padding: 14px 24px;
  overflow: hidden;
  border: 5px solid #11100f;
  border-radius: 34px;
  background: #060606;
  box-shadow: 0 0 0 2px #5a5550, 0 15px 34px rgb(0 0 0 / 55%);
}
.game-shell[data-preview-mode="iphone"] .game-stage {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
}
.game-shell[data-preview-mode="iphone"] .preview-speaker {
  position: absolute;
  top: 50%;
  left: 6px;
  display: block;
  width: 5px;
  height: 40px;
  border-radius: 4px;
  background: #2f2d2a;
  transform: translateY(-50%);
}
.game-shell[data-preview-mode="iphone"] .preview-safe-area {
  position: absolute;
  top: 14px;
  bottom: 14px;
  display: block;
  width: 18px;
  border: 1px dashed rgb(240 194 122 / 45%);
  pointer-events: none;
}
.game-shell[data-preview-mode="iphone"] .preview-safe-area-left { left: 24px; border-right: 0; }
.game-shell[data-preview-mode="iphone"] .preview-safe-area-right { right: 24px; border-left: 0; }

.game-stage {
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  container-name: game-stage;
  container-type: size;
  overflow: hidden;
  border: 4px solid #2b1b14;
  background: #ae5b33;
  box-shadow: 0 16px 0 #120a07, 0 22px 44px rgb(0 0 0 / 42%);
  isolation: isolate;
}
.game-shell[data-preview-rail="visible"] .game-stage { width: min(100vw, calc((100dvh - 56px) * 16 / 9)); }
.game-shell[data-preview-mode="iphone"][data-preview-rail="visible"] .preview-device {
  width: min(calc(100vw - 28px), calc((100dvh - 72px) * 932 / 430));
}
.game-shell[data-preview-mode="iphone"] .game-stage {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

.orientation-note { display: none; }

@media (orientation: portrait) {
  .game-stage { width: 100vw; height: 100%; border: 0; box-shadow: none; }
  canvas, .formal-ui { visibility: hidden; }
  .orientation-note {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    padding: 28px;
    background: #2b1b14;
    color: #f0c27a;
    text-align: center;
  }
  .orientation-note b { font-size: 24px; }
  .orientation-note small { color: #fff2d6; font-size: 14px; }
  .rotate-device {
    width: 42px;
    height: 66px;
    border: 4px solid #f0c27a;
    box-shadow: 6px 6px 0 #120a07;
    transform: rotate(90deg);
  }
  .game-shell[data-preview-mode="iphone"] .game-stage { width: 100%; height: 100%; }
}

@media (max-width: 600px) and (orientation: landscape) {
  .game-shell[data-preview-rail="visible"] { grid-template-rows: 44px minmax(0,1fr); }
  .preview-toolbar {
    width: 100%;
    height: 44px;
    padding: 0;
    justify-content: center;
    border: 0;
    box-shadow: none;
  }
  .game-shell[data-preview-rail="visible"] .game-stage { width: min(100vw, calc((100dvh - 44px) * 16 / 9)); }
  .game-shell[data-preview-mode="iphone"][data-preview-rail="visible"] .preview-device {
    width: min(calc(100vw - 12px), calc((100dvh - 48px) * 932 / 430));
  }
}

@media (max-width: 620px) {
  .preview-toolbar > span { display: none; }
  .preview-mode-button { min-width: 56px; padding-inline: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-mode-button { transition: none; }
}

/* The upload builder adds data-runtime-target="xhs" only inside the packaged index. */
.game-shell[data-runtime-target="xhs"],
.game-shell[data-runtime-target="xhs"][data-preview-rail="visible"] {
  grid-template-rows: 0 minmax(0,1fr);
}
.game-shell[data-runtime-target="xhs"] .preview-toolbar,
.game-shell[data-runtime-target="xhs"] .preview-speaker,
.game-shell[data-runtime-target="xhs"] .preview-safe-area {
  display: none !important;
}
.game-shell[data-runtime-target="xhs"][data-preview-rail="visible"] .game-stage {
  width: 960px;
}

/*
 * The upload runtime keeps one canonical 960×540 layout viewport and scales
 * the complete stage as a single bitmap-like surface. This prevents a portrait
 * host viewport from reflowing the already-approved landscape UI.
 */
.game-shell[data-runtime-target="xhs"] .game-stage,
.game-shell[data-runtime-target="xhs"][data-preview-rail="visible"] .game-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 960px;
  height: 540px;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  box-shadow: none;
  transform: translate(-50%, -50%) scale(var(--xhs-stage-scale, 1));
  transform-origin: center;
}

/*
 * XHS runtime visibility and orientation are controlled by the geometry state
 * written by xhs-landscape.js. Do not gate these rules only on the CSS
 * orientation media feature: some OEM WebViews briefly disagree with their
 * own inner/visual viewport after rotation or returning from the background.
 */
.game-shell[data-runtime-target="xhs"] .preview-device {
  width: 100vw;
  height: 100dvh;
}
.game-shell[data-runtime-target="xhs"] canvas,
.game-shell[data-runtime-target="xhs"] .formal-ui {
  visibility: visible;
}
.game-shell[data-runtime-target="xhs"] .orientation-note {
  display: none;
}
.game-shell[data-runtime-target="xhs"][data-xhs-orientation-mode="css-rotated"] .game-stage,
.game-shell[data-runtime-target="xhs"][data-xhs-orientation-mode="css-rotated"][data-preview-rail="visible"] .game-stage {
  transform: translate(-50%, -50%) rotate(90deg) scale(var(--xhs-stage-scale, 1));
}
.game-shell[data-runtime-target="xhs"][data-xhs-orientation-mode="native-landscape"] .game-stage,
.game-shell[data-runtime-target="xhs"][data-xhs-orientation-mode="native-landscape"][data-preview-rail="visible"] .game-stage {
  transform: translate(-50%, -50%) scale(var(--xhs-stage-scale, 1));
}

/* Local phone frame shares the upload's logical viewport, in either language.
   The geometry controller measures the frame content box for this one scale. */
.game-shell:not([data-runtime-target="xhs"])[data-preview-mode="iphone"][data-canonical-preview="true"] .game-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 960px;
  height: 540px;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  box-shadow: none;
  transform: translate(-50%, -50%) scale(var(--xhs-stage-scale, 1));
  transform-origin: center;
}