/* The scene reaches every edge. Only controls consume the safe-area insets. */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --screen-height: 100vh;
  --visual-height: var(--screen-height);
  --visual-top: 0px;
  --screen-edge: 24px;
  --ui-top: calc(var(--safe-t) + var(--screen-edge));
  --ui-right: calc(var(--safe-r) + var(--screen-edge));
  --ui-bottom: calc(var(--safe-b) + var(--screen-edge));
  --ui-left: calc(var(--safe-l) + var(--screen-edge));
  --sheet-bottom: var(--safe-b);
  --sheet-height: calc(var(--visual-height) - var(--safe-t) - var(--sheet-bottom) - 24px);
}
@supports (height: 100dvh) {
  :root { --screen-height: 100dvh; }
}
html, body { overscroll-behavior: none; background: #9baa7b; }
html { -webkit-text-size-adjust: 100%; }
body { position: fixed; inset: 0; height: var(--screen-height); }
#game, .game-ui, .loading, #awakening, #expansionScene {
  inset: 0 0 auto;
  width: 100%;
  height: var(--screen-height);
}
#game > canvas { width: 100%; height: 100%; }
/* A feathered edge keeps white status icons legible without a solid band. */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: var(--safe-t);
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(#142e2638, #142e2614 60%, transparent);
}
.player-hud { top: var(--ui-top); left: var(--ui-left); }
.resource-cluster { top: var(--ui-top); right: var(--ui-right); }
.location { top: var(--ui-top); }
.demo-badge { top: calc(var(--ui-top) + 96px); left: var(--ui-left); }
#miniMap { left: var(--ui-left); bottom: var(--ui-bottom); }
.action-hud { right: var(--ui-right); bottom: var(--ui-bottom); }
.joystick { left: calc(var(--ui-left) + 22px); bottom: calc(var(--ui-bottom) + 206px); }
.hud-menu > summary { min-width: 44px; min-height: 44px; }
.hud-menu-panel {
  max-width: calc(100vw - var(--ui-left) - var(--ui-right));
  max-height: calc(var(--screen-height) - var(--ui-top) - var(--ui-bottom) - 104px);
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.speech-bubble {
  left: calc(50% + (var(--safe-l) - var(--safe-r)) / 2);
  bottom: var(--ui-bottom);
  max-width: calc(100% - var(--ui-left) - var(--ui-right));
  max-height: calc(var(--screen-height) - var(--ui-top) - var(--ui-bottom));
  touch-action: pan-y;
}
/* Dialogs center in the visible safe rectangle, including above the keyboard. */
dialog:not(.zen-dialog), #shopModal, body.awakening #shopModal {
  position: fixed;
  top: calc(var(--visual-top) + var(--safe-t) + 12px);
  right: var(--ui-right);
  bottom: calc(100% - var(--visual-top) - var(--visual-height) + var(--sheet-bottom) + 12px);
  left: var(--ui-left);
  margin: auto;
  height: fit-content;
  max-width: calc(100% - var(--ui-left) - var(--ui-right));
  max-height: var(--sheet-height);
}
.keyboard-open { --sheet-bottom: 0px; }
dialog input, dialog textarea, dialog select { font-size: 16px; }
dialog input, dialog textarea { scroll-margin-block: 20px; }
.zen-dialog { height: var(--screen-height); }
.zen-heading { top: var(--ui-top); left: var(--ui-left); }
.zen-close, #leaveExpansion, #skipAwakening { top: var(--ui-top); right: var(--ui-right); }
.zen-sit, .expansion-caption { bottom: var(--ui-bottom); }
.zen-sit { max-width: calc(100% - var(--ui-left) - var(--ui-right)); }
.cinema-caption, #awakeningEnd, .awakening-start, .expansion-caption {
  max-width: calc(100% - var(--ui-left) - var(--ui-right));
}

@media (max-width: 760px) {
  :root { --screen-edge: 12px; }
  .player-hud { width: min(174px, calc(100% - var(--ui-left) - var(--ui-right) - 134px)); }
  .location { left: var(--ui-left); top: calc(var(--ui-top) + 88px); }
  .demo-badge { top: calc(var(--ui-top) + 120px); left: auto; right: var(--ui-right); }
  #miniMap { width: clamp(104px, 32vw, 132px); height: clamp(104px, 32vw, 132px); }
  .action-hud { width: calc(100% - var(--ui-left) - var(--ui-right) - clamp(104px, 32vw, 132px) - 12px); }
  .action-hud .dock-buttons .primary { min-height: 44px; }
  .joystick { bottom: calc(var(--ui-bottom) + clamp(104px, 32vw, 132px) + 20px); }
  .hud-menu-panel { max-height: calc(var(--screen-height) - var(--ui-top) - var(--ui-bottom) - 170px); }
  .journal-modal:not(.zen-dialog) {
    top: auto;
    height: min(84dvh, var(--sheet-height));
    padding-bottom: 20px;
    border-radius: 25px;
  }
  .zen-heading { max-width: calc(100% - var(--ui-left) - var(--ui-right) - 56px); }
}

/* Landscape phones need a low, wide layout with space beside the notch. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --screen-edge: 12px; }
  .player-hud { width: 190px; padding: 9px 12px; }
  .player-hud .brand .crest { width: 44px; height: 44px; }
  .location { top: var(--ui-top); }
  #miniMap { width: 100px; height: 100px; }
  .joystick { left: calc(var(--ui-left) + 118px); bottom: calc(var(--ui-bottom) + 12px); width: 76px; height: 76px; }
  .joystick .stick { width: 36px; height: 36px; left: 19px; top: 19px; }
  .action-hud { width: min(320px, 42vw); flex-direction: row; align-items: center; }
  .hud-menu { order: 1; }
  .action-hud .focus-dock.glass { flex-direction: row; padding: 10px; }
  .action-hud .dock-buttons { width: auto; }
  .hud-menu-panel { max-height: calc(var(--screen-height) - var(--ui-top) - var(--ui-bottom) - 82px); }
  .zen-sit { right: var(--ui-right); bottom: var(--ui-bottom); }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  .location { top: calc(var(--ui-top) + 76px); }
}