/* 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 top left; top right, the address and beneath it the links, two 27 px rows.
   Upright, the bar pass starts the pot under both rows (bar.css); on the side the pot is centred and narrower than the gap. */
@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; }
  .corner { top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); gap: 6px; } .links { gap: 6px; }
  .pill { padding: 4px 11px; font-size: 12px; line-height: 17px; }
  .ca { font-size: 11px; } .ca .note, .buy .long, .how .long, .ca .long { display: none; } .how .short, .ca .short { display: inline; } .how { padding-inline: 10px; }
}
@media (max-width: 360px) { .tag .long { display: none; } }   /* the narrowest phones: "Preview" alone */
/* 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; }
}