/* Mobile composition is independent of the wider screen layout. */
@media(max-width:900px) {
  .gate-title { font-size: clamp(36px,10.4vw,85px); }
  .gate-center { top: 30%; }
  .gate-header { top: max(30px,env(safe-area-inset-top)); }
  .edition { max-width: 108px; text-align: right; font-size: 9px; line-height: 1.7; }
  .gate-bottom { bottom: max(26px,calc(env(safe-area-inset-bottom) + 12px)); }
  .entry-button { height: 66px; padding: 0 15px; font-size: 11px; }
  .gate-description { font-size: 13px; }
  .gate-title { margin-top: 22px; margin-bottom: 27px; }
  .gate-center .eyebrow { font-size: 8px; }
  .gate-footer { font-size: 8px; }
  .surface-title { top: 61%; font-size: clamp(35px,10.1vw,79px); }
  .surface-wordmark { top: max(30px,env(safe-area-inset-top)); }
  .surface-cue { bottom: max(37px,calc(env(safe-area-inset-bottom) + 17px)); }
  .portrait-aside { display: none; }
  .portrait-actions { width: 90%; margin-left: -45%; gap: 10px; bottom: max(78px,calc(env(safe-area-inset-bottom) + 60px)); }
  .connection-action { height: 68px; padding: 0 13px; gap: 10px; }
  [data-action-label] { font-size: 15px; }
  [data-action-status] { font-size: 8px; }
  .action-copy { gap: 5px; }
  .action-arrow { font-size: 20px; }
  .chat-symbol { width: 27px; height: 27px; }
  .voice-orb { width: 33px; height: 33px; }
  .portrait-heading { top: max(38px,env(safe-area-inset-top)); }
  .portrait-heading h2 { font-size: clamp(66px,17vw,105px); }
}
@media(max-width:699px) and (orientation:portrait) {
  #portrait-fallback { height: calc(98% * var(--portrait-scale)); max-width: none; }
}
@media(max-width:370px) {
  .wordmark { font-size: 30px; }
  .entry-button { padding: 0 12px; font-size: 10px; gap: 6px; }
  .connection-action { padding: 0 10px; gap: 8px; }
  .action-arrow { display: none; }
  .gate-footer { font-size: 7px; }
}
@media(max-height:650px) and (max-width:900px) {
  .gate-center { top: 27%; }
  .gate-title { font-size: clamp(34px,10vw,62px); margin: 13px 0 17px; }
  .gate-description { font-size: 11px; }
  .sound-prompt { margin-bottom: 12px; font-size: 10px; }
  .entry-button { height: 55px; }
  .portrait-heading { top: 17px; }
  .portrait-heading h2 { font-size: 58px; }
  .portrait-heading .eyebrow { display: none; }
  .portrait-actions { bottom: 57px; }
  .connection-action { height: 58px; }
  .portrait-cue { bottom: 8px; }
}