/* Legacy — a phone turned sideways. The tall phone layout (header on top, tabs at the bottom) leaves almost no room in
   a short, wide screen, so the game becomes two glass panels floating over the theme's background, like on a computer:
   you on the left (portrait, money, stats), your life on the right with the tabs under it. Everything is a bit smaller. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #app { max-width: none; width: min(820px, calc(100vw - 48px)); height: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(230px, 34%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 12px; padding: 10px 0 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); background: transparent !important; box-shadow: none; }

  /* left: you */
  #top { grid-column: 1; grid-row: 1 / 3; align-self: stretch; align-content: start; margin: 0 0 10px; padding: 10px 12px 12px; gap: 9px; border-radius: 22px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  #top::-webkit-scrollbar { display: none; }
  #top .who { gap: 10px; }
  #top .avatar { width: 48px; height: 48px; font-size: 26px; }
  #top .avatar .av { width: 44px; height: 44px; }
  #top .who-txt h1 { font-size: 1.05rem; line-height: 1.15; }
  #top .who-txt p { font-size: .72rem; }
  #top .icon-btn { width: 34px; height: 34px; }
  #top .money-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  #top .money-row > :nth-child(n+3) { grid-column: 1 / -1; }
  #top .pill-money { padding: 5px 9px 4px; border-radius: 12px; }
  #top .pill-money span { font-size: 9px; }
  #top .pill-money b { font-size: 1rem; }
  #top .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  #top .stats > * { padding: 4px 6px; }

  /* right: your life, in glass so the world shows through */
  #view { grid-column: 2; grid-row: 1; padding: 8px 8px 16px; gap: 9px; border-radius: 22px 22px 0 0;
    background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent); }
  #view { font-size: 93%; }
  #view .card { padding: 10px 12px; }

  /* the tabs, under your life, slimmer */
  #tabs { grid-column: 2; grid-row: 2; grid-template-columns: repeat(3, 1fr) 60px repeat(3, 1fr); padding: 2px 4px calc(3px + env(safe-area-inset-bottom, 0px)); border-radius: 0 0 0 0; }
  #tabs > button:not(.age-btn) { padding: 6px 0 2px; font-size: 9px; }
  #tabs > button:not(.age-btn) svg { width: 18px; height: 18px; }
  #tabs .age-btn, #ageBtn { width: 56px; height: 56px; margin-top: -22px; border-width: 3px; }
  #tabs .age-btn b { font-size: 24px; }
  #tabs .age-btn span { font-size: 8px; }
  html:root[data-ab] #ageBtn::before { inset: -7px; }

  /* windows: not taller than the screen, and centered */
  .modal-wrap { align-items: center; }
  .modal { max-height: calc(100vh - 16px); max-width: min(620px, calc(100vw - 32px)); }
  /* the home scene is wide anyway: no bleed into the panel edges */
  .hs-card { margin-inline: 0; }
}