/* Narrow and touch screens (owned by the mobile pass). Loaded after the page's own styles. The header (pot and round bar) is
   styled by bar.css, not here. mobile.js frames the machine around these lists, so it follows their sizes. */

/* tall screens, and wide ones up to 650 px tall (mobile.js sets these; unset, nothing moves or shows): the canvas slides by
   --shift so the machine centres in the room under the header. The camera stands far enough back to see past the bottom of
   the backdrop, so the screen fades to the room's black from the plinth down, and a slide down bares the top edge, so that is
   shaded too. */
@media (aspect-ratio < 5/4), (max-height: 650px) and (min-aspect-ratio: 5/4) {
  #stage canvas { transform: translateY(var(--shift, 0px)); }
  #stage::after { content: ''; position: fixed; inset: 0; pointer-events: none;
    background: linear-gradient(#070405 var(--sky, 0px), transparent calc(var(--sky, 0px) * 3)),
      linear-gradient(transparent var(--floor-from, 100vh), #070405 var(--floor-to, 100vh)); }
}

/* tall screens: the lists sit above the iteration pill */
@media (aspect-ratio < 5/4) {
  .feed, .winners { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* phones upright: the winners stacked over the feed, full width, four trades */
@media (max-width: 700px) and (aspect-ratio < 5/4) {
  .feed, .winners { left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); }
  .feed { font-size: 12px; line-height: 17px; }
  .feed li:nth-child(n+5) { display: none; }
  .winners { bottom: calc(84px + 4 * 17px + 10px + env(safe-area-inset-bottom)); }
  .winners li { font-size: 13px; line-height: 19px; margin-top: 2px; }
  .winners b { margin-right: 8px; }
  .winners em { font-size: 13px; margin-left: 10px; }
}
/* phones, upright or on their side: the tag and the links (address, buy, docs) share one row in the top corners, tag left, link
   right, 27 px tall. Upright, the bar pass starts the pot at 62 px under the same query; on the side the pot is centred
   and narrower than the gap between them. */
@media (max-width: 660px) and (min-height: 501px), (max-height: 500px) and (min-aspect-ratio: 5/4) {
  .tag { top: calc(max(10px, env(safe-area-inset-top)) + 5px); right: auto; left: max(16px, env(safe-area-inset-left)); line-height: 17px; }
  .links { top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); gap: 6px; }
  .pill { padding: 4px 11px; font-size: 12px; line-height: 17px; }
  .ca { font-size: 11px; } .ca .note, .buy .long, .docs-link .long, .ca .long { display: none; } .docs-link .short, .ca .short { display: inline; }
}
@media (max-width: 400px) { .tag:has(~ .links #ca:not([hidden]):not(.pending)) { display: none; } }   /* too narrow for the tag next to the address row */
@media (max-width: 660px) { .ca.pending { display: none; } }   /* phones before launch: the preview label stays, the placeholder address goes */
/* short phones upright (under 700 px tall): three trades, so the machine keeps some size */
@media (max-width: 700px) and (aspect-ratio < 5/4) and (max-height: 699px) {
  .feed li:nth-child(n+4) { display: none; }
  .winners { bottom: calc(84px + 3 * 17px + 10px + env(safe-area-inset-bottom)); }
}

/* phones on their side: the lists in the bottom corners beside the pill, smaller, four trades. The feed stays within
   50% - 200 px (the pill is about 340 wide), and the machine keeps clear of that. */
@media (max-height: 500px) and (min-aspect-ratio: 5/4) {
  .feed, .winners { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .feed { left: max(16px, env(safe-area-inset-left)); max-width: calc(50% - 200px); font-size: 11px; line-height: 15px; }
  .feed li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feed li:nth-child(n+5) { display: none; }
  .winners { right: max(16px, env(safe-area-inset-right)); }
  .winners li { font-size: 12px; line-height: 17px; margin-top: 2px; white-space: nowrap; }
  .winners b { margin-right: 6px; }
  .winners em { font-size: 12px; margin-left: 8px; }
}
/* smaller phones on their side: too narrow beside the pill, so the lists sit just above it, three trades, and the machine
   narrows to leave them 50% - 150 px */
@media (max-height: 500px) and (min-aspect-ratio: 5/4) and (max-width: 767px) {
  .feed, .winners { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .feed { max-width: calc(50% - 150px); }
  .feed li:nth-child(n+4) { display: none; }
  .winners li { font-size: 11px; line-height: 15px; }
  .winners em { font-size: 11px; }
}