/* Final responsive layer: loaded after the visual treatments above. */
:root { --edge: max(14px, env(safe-area-inset-left)); }

.order-chai { position: absolute; z-index: 15; left: 50%; bottom: 116px; transform: translateX(-50%); border: 1px solid rgba(255,235,192,.45); border-radius: 999px; padding: 11px 16px; background: linear-gradient(135deg, #bd6134, #78351f); color: #fff3d4; box-shadow: 0 8px 22px #0008, inset 0 1px rgba(255,255,255,.22); font: 11px "DM Mono"; letter-spacing: .05em; cursor: pointer; }
.order-chai:hover, .order-chai:focus-visible { background: linear-gradient(135deg, #dc7744, #913d23); outline: 2px solid #ffd183; outline-offset: 3px; }

@media (min-width: 701px) and (max-width: 1024px) {
  .scene { min-height: 100dvh; }
  .photo-backdrop { background-position: center center; }
  .signboard { left: 50%; top: 34px; transform: translateX(-50%) scale(.9); }
  .location-chip { left: 22px; top: 20px; }
  .chat-toggle { right: 22px; top: 20px; }
  .radio { left: 24px; bottom: 112px; transform: scale(.9) rotate(-1deg); transform-origin: bottom left; }
  .newspaper { right: 24px; bottom: 106px; transform: scale(.87) rotate(2deg); transform-origin: bottom right; }
  .news-panel { right: 24px; bottom: 92px; max-height: calc(100dvh - 160px); overflow-y: auto; }
  .bottom-info { bottom: 22px; max-width: calc(100vw - 44px); white-space: nowrap; }
  .news-basket { bottom: 62px; max-width: calc(100vw - 44px); }
}

@media (max-width: 700px) {
  body { min-width: 0; overflow-x: hidden; }
  .scene { min-height: 100dvh; height: 100dvh; }
  .photo-backdrop { background-position: 60% center; transform: scale(1.01); }
  .scene:after { background: linear-gradient(180deg, #06101945, transparent 42%, #040608a8 100%); }

  .location-chip {
    left: var(--edge); top: max(14px, env(safe-area-inset-top)); max-width: calc(100vw - 150px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 9px 11px; font-size: 10px;
  }
  .chat-toggle { right: var(--edge); top: max(14px, env(safe-area-inset-top)); padding: 9px 10px; font-size: 9px; }
  .signboard { top: 72px; left: 50%; transform: translateX(-50%) scale(.74); transform-origin: top center; white-space: nowrap; }
  .signboard span { font-size: 11px; }
  .signboard strong { font-size: 36px; }

  .radio {
    left: var(--edge); bottom: 102px; width: min(286px, calc(100vw - 28px)); height: 156px;
    padding: 6px; transform: none; border-radius: 13px;
  }
  .order-chai { bottom: 278px; padding: 10px 14px; font-size: 10px; }
  .dial { height: 74px; }
  .radio-bottom { height: 39px; gap: 3px; }
  .radio-bottom #stationButton, .radio-bottom #muteButton { padding: 0 5px; }
  .station-menu { width: 100%; bottom: 164px; max-height: min(42dvh, 280px); }

  .newspaper {
    right: -74px; bottom: 100px; width: 245px; height: 146px;
    transform: scale(.61) rotate(3deg); transform-origin: bottom right;
  }
  .newspaper:hover { transform: scale(.61) rotate(3deg); }
  .news-panel {
    right: 14px; left: 14px; bottom: 78px; width: auto; max-height: calc(100dvh - 155px);
    overflow-y: auto; padding: 20px; transform: translateY(calc(100% + 90px));
  }
  .news-panel.open { transform: translateY(0); }
  .news-panel h2 { font-size: 24px; }

  .bottom-info {
    left: var(--edge); right: var(--edge); bottom: max(16px, env(safe-area-inset-bottom)); width: auto;
    transform: none; justify-content: center; padding: 8px 11px; font-size: 9px;
  }
  .bottom-info #moodLabel { display: none; }
  .news-basket {
    left: 50%; bottom: 55px; width: max-content; max-width: calc(100vw - 28px); padding: 8px 10px;
    gap: 7px; transform: translateX(-50%); font-size: 8px; white-space: nowrap; overflow: hidden;
  }
  .news-basket span { display: none; }
  .news-basket a { overflow: hidden; text-overflow: ellipsis; }
  .chat-panel {
    left: 14px; right: 14px; top: 62px; width: auto; height: min(530px, calc(100dvh - 82px));
    padding: 16px; border-radius: 16px;
  }
  .chat-panel h2 { font-size: 24px; }
  .feeling-prompts { flex-wrap: wrap; }
  .city-modal { padding: 14px; }
  .city-modal > div { width: 100%; max-height: calc(100dvh - 28px); overflow-y: auto; padding: 28px 20px 20px; }
  .city-modal h2 { font-size: 23px; }
}

@media (max-width: 380px) {
  .location-chip .divider, .location-chip #weatherText { display: none; }
  .chat-toggle { font-size: 0; min-width: 38px; min-height: 36px; }
  .chat-toggle::after { content: "chat"; font-size: 9px; }
  .radio { bottom: 94px; transform: scale(.9); transform-origin: bottom left; width: calc((100vw - 28px) / .9); }
  .order-chai { bottom: 246px; }
  .newspaper { display: none; }
  .news-basket { bottom: 52px; }
}

@media (max-height: 600px) and (max-width: 700px) and (orientation: landscape) {
  .signboard { top: 54px; transform: translateX(-50%) scale(.58); }
  .radio { bottom: 50px; transform: scale(.72); transform-origin: bottom left; width: calc((100vw - 28px) / .72); }
  .order-chai { bottom: 54px; left: 58%; }
  .newspaper { bottom: 48px; }
  .news-basket, .bottom-info { display: none; }
  .chat-panel { top: 54px; height: calc(100dvh - 66px); }
}