:root {
  --app-height: 100dvh;
  --app-width: 100vw;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
  max-width: 100%;
}

#gameCanvas,
.control-button,
.utility-controls button,
.nav-arrow,
.postcard button,
.scene-card {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

@media (pointer: coarse), (max-width: 780px) {
  body {
    min-height: var(--app-height);
  }

  .app-shell {
    min-height: var(--app-height);
    padding-left: max(7px, var(--safe-left));
    padding-right: max(7px, var(--safe-right));
    padding-bottom: max(7px, var(--safe-bottom));
  }

  .touch-controls {
    justify-content: space-between;
    gap: clamp(18px, 8vw, 58px);
    padding: 4px max(4px, var(--safe-right)) 2px max(4px, var(--safe-left));
  }

  .dpad {
    grid-template: repeat(3, 56px) / repeat(3, 60px);
    gap: 5px;
  }

  .control-button {
    min-width: 60px;
    min-height: 54px;
    border-radius: 10px;
    font-size: 1.08rem;
  }

  .fire-button {
    width: clamp(104px, 28vw, 132px);
    min-width: 104px;
    min-height: 82px;
    border-radius: 18px;
    font-size: .78rem;
    line-height: 1.15;
  }

  .utility-controls {
    gap: 7px;
  }

  .utility-controls button {
    min-height: 46px;
    border-radius: 8px;
  }

  .mobile-back-button {
    border-color: #b88a2a !important;
    color: #ffe49a !important;
  }

  .archive-header a,
  .archive-header button,
  .scene-actions a,
  .scene-actions button,
  .postcard button {
    min-height: 48px;
  }

  .nav-arrow {
    min-width: 48px;
    min-height: 64px;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  html,
  body {
    width: 100%;
    height: var(--app-height);
    min-height: 0;
    overflow: hidden;
  }

  .app-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-height);
    min-height: 0;
    padding:
      max(4px, var(--safe-top))
      max(4px, var(--safe-right))
      max(4px, var(--safe-bottom))
      max(4px, var(--safe-left));
  }

  .brand-bar,
  .desktop-help,
  .prototype-note {
    display: none !important;
  }

  .game-frame {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(202px, 32vw, 312px);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 5px 7px;
    padding: 4px;
    border-width: 2px;
    outline: 0;
    overflow: hidden;
  }

  .crt-shell {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
    width: auto;
    height: min(100%, calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 12px));
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
  }

  .touch-controls {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .dpad {
    grid-template: repeat(3, clamp(42px, 11.5vh, 52px)) / repeat(3, clamp(44px, 12vh, 56px));
    gap: 3px;
  }

  .control-button {
    min-width: clamp(44px, 12vh, 56px);
    min-height: clamp(42px, 11.5vh, 52px);
    padding: 3px;
    border-radius: 9px;
    font-size: clamp(.78rem, 3.5vh, 1rem);
  }

  .fire-button {
    width: clamp(78px, 20vh, 96px);
    min-width: clamp(78px, 20vh, 96px);
    height: clamp(78px, 20vh, 96px);
    min-height: clamp(78px, 20vh, 96px);
    border-radius: 50%;
    padding: 8px;
    font-size: clamp(.58rem, 2.5vh, .72rem);
  }

  .utility-controls {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    margin: 0;
  }

  .utility-controls button {
    min-width: 0;
    min-height: 36px;
    padding: 4px 3px;
    font-size: clamp(.52rem, 2.35vh, .65rem);
    letter-spacing: 0;
    box-shadow: none;
  }

  .loading-panel {
    font-size: clamp(.62rem, 2.5vh, .82rem);
  }
}

.game-frame:fullscreen,
.game-frame:-webkit-full-screen {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(202px, 30vw, 320px);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  padding: max(5px, var(--safe-top)) max(5px, var(--safe-right)) max(5px, var(--safe-bottom)) max(5px, var(--safe-left));
  overflow: hidden;
}

.game-frame:fullscreen .crt-shell,
.game-frame:-webkit-full-screen .crt-shell {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.game-frame:fullscreen .touch-controls,
.game-frame:-webkit-full-screen .touch-controls {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  margin: 0;
}

.game-frame:fullscreen .utility-controls,
.game-frame:-webkit-full-screen .utility-controls {
  grid-column: 2;
  grid-row: 2;
}

/* Historical postcard tour on phones */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .archive-app {
    width: 100%;
    height: var(--app-height);
    padding:
      max(4px, var(--safe-top))
      max(7px, var(--safe-right))
      max(4px, var(--safe-bottom))
      max(7px, var(--safe-left));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .archive-header {
    min-height: 44px;
    align-items: center;
    margin: 0;
    padding: 0 0 4px;
    border-bottom: 0;
  }

  .archive-header .eyebrow,
  .archive-header .subtitle {
    display: none;
  }

  .archive-header h1 {
    font-size: clamp(22px, 6vh, 30px);
    line-height: 1;
    letter-spacing: -.02em;
  }

  .header-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .header-actions a,
  .header-actions button {
    min-height: 38px;
    padding: 6px 10px;
    font-size: clamp(.68rem, 2.8vh, .8rem);
  }

  .viewer {
    height: 100%;
    min-height: 0;
  }

  .postcard-stage {
    width: min(calc(100% - 102px), calc((var(--app-height) - 54px) * 1.55));
    height: min(calc(var(--app-height) - 54px), calc((100vw - 116px) / 1.55));
  }

  .postcard {
    width: 100%;
    height: 100%;
    aspect-ratio: 1.55 / 1;
  }

  .postcard-face {
    border-width: 6px;
  }

  .postcard-caption {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 5px 7px;
  }

  .postcard-caption strong {
    order: initial;
    font-size: clamp(.78rem, 3.4vh, 1rem);
  }

  .postcard-caption span {
    font-size: clamp(.52rem, 2.2vh, .66rem);
  }

  .postcard-caption button,
  .postcard-back button {
    min-height: 34px;
    padding: 4px 7px;
    font-size: clamp(.58rem, 2.35vh, .72rem);
  }

  .postcard-back {
    grid-template-columns: 1.55fr 1fr;
    overflow: auto;
  }

  .postcard-message,
  .address-side {
    padding: 10px 12px;
  }

  .postcard-message h2 {
    margin: 3px 0 5px;
    font-size: clamp(18px, 5vh, 26px);
  }

  .postcard-message > p:not(.handwritten),
  .address-side > p,
  .postcard-back dd {
    font-size: clamp(.62rem, 2.35vh, .76rem);
    line-height: 1.3;
  }

  .handwritten,
  .postmark,
  .postcard-back dl {
    display: none;
  }

  .stamp {
    width: 58px;
    padding: 6px 4px;
    font-size: .62rem;
  }

  .nav-arrow {
    position: fixed;
    top: 52%;
    z-index: 10;
    width: 46px;
    height: 72px;
    min-height: 72px;
  }

  .nav-previous { left: max(5px, var(--safe-left)); }
  .nav-next { right: max(5px, var(--safe-right)); }

  .scene-copy,
  .scene-rail,
  .archive-app footer {
    display: none;
  }

  .source-dialog {
    max-height: calc(var(--app-height) - 16px);
    overflow: auto;
    padding: 18px;
  }
}

body.image-focus .viewer {
  min-height: var(--app-height);
}

body.image-focus .postcard {
  height: var(--app-height);
}