/* One coordinate system for art, controls and the existing game iframe. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.viewport-safe-area {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
html.viewport-fitted { width: 100%; height: 100%; overflow: hidden; background: #050c1c; }
.viewport-fitted body[data-fit-viewport] {
  position: fixed;
  left: var(--fit-left);
  top: var(--fit-top);
  width: var(--fit-width);
  height: var(--fit-height);
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  transform: scale(var(--fit-scale));
  transform-origin: 0 0;
}
.viewport-fitted .world-page #worldMap {
  width: 100%; height: 100%; min-height: 0; margin: 0;
}
.viewport-fitted .world-page .world-scene {
  width: 100%; height: 100%; --world-stage-width: 100%; --world-stage-height: 100%;
}
.viewport-fitted .world-page .world-map-art img { object-fit: fill; }
.viewport-fitted .world-page .world-brand { display: none; }
.viewport-fitted .world-page .world-hud { left: auto; right: 1%; top: 4.8%; width: 26.95%; height: 84px; }
.viewport-fitted .world-page .world-hud button { font-size: 15px; }
.viewport-fitted .world-page .island-entry { min-height: 0; transform: none; }
.viewport-fitted .world-page .island-cluster-exploration > .island-layer { display: block; }
.viewport-fitted .world-page .island-layer-personality,
.viewport-fitted .world-page .island-personality { left: 5%; top: 19%; width: 21%; height: 27%; }
.viewport-fitted .world-page .island-layer-hall,
.viewport-fitted .world-page .island-hall { left: 71%; top: 22%; width: 28%; height: 34%; }
.viewport-fitted .world-page .island-layer-workbench,
.viewport-fitted .world-page .island-workbench { left: 73%; top: 59%; width: 24%; height: 29%; }
.viewport-fitted .world-page .island-layer-game,
.viewport-fitted .world-page .island-game { left: 29%; top: 20%; width: 42%; height: 60%; }
.viewport-fitted .world-page .island-layer-guangming,
.viewport-fitted .world-page .island-guangming { left: 31%; top: 56%; width: 21%; height: 28%; }
.viewport-fitted .world-page .island-entry .island-module-copy strong { font-size: 28px; }
.viewport-fitted .world-page .island-entry .island-module-copy small { font-size: 17px; }
.viewport-fitted .world-page .island-game .island-module-copy strong { font-size: 29px; }
.viewport-fitted .world-page .island-game .island-module-copy { top: 58%; width: 33%; }
.viewport-fitted .world-page .island-guangming .island-module-copy { top: 78%; width: 58%; }
.viewport-fitted .world-page .island-personality .island-module-copy { top: 62%; width: 52%; }
.viewport-fitted .world-page .island-hall .island-module-copy { top: -4%; width: 44%; }
.viewport-fitted .world-page .island-workbench .island-module-copy { top: 67%; width: 52%; }

.viewport-fitted .game-page .city-map-shell,
.viewport-fitted .game-page .city-route-board,
.viewport-fitted .game-page.game-frame-open .game-frame {
  width: 100%; height: 100%; min-height: 0;
}
.viewport-fitted .game-page:not(.game-frame-open):not(.route-board-open) { padding-top: 80px; }
.viewport-fitted .game-page .city-map-shell { height: 100%; grid-template-columns: minmax(0, 62fr) minmax(380px, 38fr); }
.viewport-fitted .game-page .city-map-surface { height: auto; min-height: 0; border-right: 3px solid var(--ink); }
.viewport-fitted .game-page .city-map-inspector { grid-template-rows: 216px auto minmax(0, 1fr) auto auto; padding: 28px 16px 14px; gap: 20px; }
.viewport-fitted .game-page .city-map-heading { top: 112px; left: 28px; right: auto; bottom: auto; }
.viewport-fitted .game-page .city-map-heading h1 { font-size: 43.52px; }
.viewport-fitted .game-page .city-preview-title h1 { font-size: 61.44px; }
.viewport-fitted .game-page .city-preview-editorial p { font-size: 13.44px; }
.viewport-fitted .game-page .city-map-primary { font-size: 22.4px; }
.viewport-fitted .game-page .city-route-board { padding: 12px 16px 16px; }
.viewport-fitted .game-page .city-route-board-header { grid-template-columns: 178px minmax(0, 1fr) auto; gap: 12px; }
.viewport-fitted .game-page .city-route-board-title { flex-wrap: nowrap; gap: 16px; }
.viewport-fitted .game-page .city-route-board-header h1 { font-size: 32px; }
.viewport-fitted .game-page #routeBoardStageName { font-size: 23.04px; }
.viewport-fitted .game-page .city-route-board-actions { grid-column: auto; flex-wrap: nowrap; }
.viewport-fitted .game-page .city-route-board-layout { grid-template-columns: minmax(0, 2.45fr) minmax(370px, 1fr); }
.viewport-fitted .game-page .city-route-stage-map { min-height: 0; overflow: hidden; }
.viewport-fitted .game-page .city-route-stages { min-width: 0; padding-top: 72px; }
.viewport-fitted .game-page .city-route-dossier { padding: 14px; }
.viewport-fitted .game-page .city-route-stage-hero { height: 172px; }
.viewport-fitted .game-page .postcard-collection { width: 100%; height: 100%; }
.viewport-fitted body[data-fit-viewport="battle"] #app { min-width: 0; width: 100%; height: 100%; }
.viewport-fitted body[data-fit-viewport="battle"] #game-shell { width: 100%; height: 100%; border: 0; box-shadow: none; }
.viewport-fitted body:is([data-fit-viewport="play"], [data-fit-viewport="explore"]) .global-navigation {
  padding-left: max(3.2%, var(--fit-safe-left, 0px));
  padding-right: max(3.2%, var(--fit-safe-right, 0px));
}
.viewport-fitted .game-page .city-route-board {
  padding-left: max(16px, var(--fit-safe-left, 0px));
  padding-right: max(16px, var(--fit-safe-right, 0px));
  padding-bottom: max(16px, var(--fit-safe-bottom, 0px));
}
.viewport-fitted .game-page .city-map-inspector { padding-bottom: max(14px, var(--fit-safe-bottom, 0px)); }
.viewport-fitted body[data-fit-viewport="battle"] #game-shell .hud {
  top: max(7px, var(--fit-safe-top, 0px));
  left: max(7px, var(--fit-safe-left, 0px));
  right: max(7px, var(--fit-safe-right, 0px));
}
.viewport-fitted body[data-fit-viewport="battle"] #game-shell .party { right: max(14px, var(--fit-safe-right, 0px)); bottom: max(10px, var(--fit-safe-bottom, 0px)); }
.viewport-fitted body[data-fit-viewport="battle"] #game-shell .skill-rack { left: max(15px, var(--fit-safe-left, 0px)); bottom: max(12px, var(--fit-safe-bottom, 0px)); }

/* Mobile pages have one landscape experience; portrait only asks to rotate. */
.landscape-required { display: none; }
@media (orientation: portrait) and (max-width: 900px), (orientation: portrait) and (pointer: coarse) {
  html, body[data-fit-viewport] {
    width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important;
    margin: 0 !important; overflow: hidden !important; background: #050c1c;
  }
  body[data-fit-viewport] { position: fixed; inset: 0; transform: none !important; }
  body[data-fit-viewport] > :not(.landscape-required),
  body[data-fit-viewport] > :not(.landscape-required) * { visibility: hidden !important; }
  .landscape-required {
    display: grid; place-items: center; position: fixed; inset: 0;
    box-sizing: border-box; width: 100%; height: 100%;
    max-width: none; max-height: none; margin: 0; border: 0;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background: #050c1c; color: #fff8df; text-align: center;
    font-family: system-ui, sans-serif;
  }
  .landscape-required::backdrop { background: #050c1c; }
  .landscape-required-card { max-width: 340px; }
  .landscape-required-phone {
    display: grid; place-items: center; width: 96px; height: 54px;
    border: 4px solid #ffe08a; box-shadow: 6px 6px 0 #153149;
    margin: 0 auto 36px; font-size: 36px; line-height: 1;
  }
  .landscape-required h1 { margin: 0 0 16px; font-size: 26px; }
  .landscape-required p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; }
  .landscape-required small { color: #9cb7c9; font-size: 13px; }
}