/* The per-prompt result fits one screen (Caleb: "show the top ten here within 100vh ... the
   button is always present on mobile"). While the reveal screen is up, the app becomes a
   100dvh column: header and dial shrink, the card takes the space that's left, and only the
   answer list scrolls inside its own box if it must. The Next button sits under the card,
   above the safe area, and is never pushed off-screen. html[data-screen] is set by show(). */

html[data-screen="reveal"] body { min-height: 0; }
html[data-screen="reveal"] .app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100svh; height: 100dvh;
  padding-bottom: 0;
}
html[data-screen="reveal"] .bar { padding: 2px 0 6px; flex: none; }
html[data-screen="reveal"] .dial-wrap { margin: 0 0 8px; gap: 2px; flex: none; }
html[data-screen="reveal"] .flap { width: 44px; height: 62px; border-radius: 8px; }
html[data-screen="reveal"] .strip span { height: 62px; font-size: 52px; }
html[data-screen="reveal"] .dial-caption { font-size: 0.85rem; }
html[data-screen="reveal"] main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

#screen-reveal:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#screen-reveal .reveal-card {
  flex: 1 1 auto; min-height: 0; /* fills down to the button */
  display: flex; flex-direction: column;
  padding: 14px 16px; overflow: hidden;
}
#screen-reveal .reveal-card > * { flex: none; }
#screen-reveal .stamp { font-size: 1.45rem; }
#screen-reveal .stamp .emoji { font-size: 1.35rem; }
#screen-reveal .your { margin: 6px 0 0; line-height: 1.35; }
#screen-reveal .your .pic { width: 44px; height: 44px; }
#screen-reveal .your-fact { margin: 4px 0 2px; padding: 3px 0 3px 9px; font-size: 0.85rem; line-height: 1.35; }
#screen-reveal .points { margin: 2px 0 8px; }
#screen-reveal .top-title { margin: 0 0 4px; font-size: 0.85rem; }

/* the compact top 10: one line per answer (rank, picture, name + small stat, faded mark) */
/* rows grow to use spare height (up to a comfortable 44px) and shrink to one tight line when
   space is short; past that, only this list scrolls */
#screen-reveal .toplist {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 1px; margin: 0 -6px; padding: 0 6px;
  scrollbar-width: thin;
}
#screen-reveal .toplist li {
  flex: 1 0 auto; max-height: 44px;
  grid-template-columns: 1.9rem 1fr auto; gap: 6px; align-items: center;
  padding: 3px 6px; font-size: 0.95rem; line-height: 1.25;
}
#screen-reveal .toplist.has-pics li { grid-template-columns: 1.9rem 26px 1fr auto; }
#screen-reveal .toplist .pic { width: 26px; height: 26px; border-radius: 6px; }
#screen-reveal .toplist .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-reveal .toplist .sub { display: inline; margin-left: 6px; font-size: 0.78rem; }
#screen-reveal .toplist li.mine { box-shadow: inset 3px 0 0 var(--accent); }
#screen-reveal .featured-fact { margin: 8px 0 0; padding: 5px 8px; font-size: 0.82rem; line-height: 1.35; }
#screen-reveal .source { margin: 6px 0 0; font-size: 0.75rem; }
#screen-reveal .toplist + .featured-fact, #screen-reveal .toplist + .featured-fact[hidden] + .source { margin-top: auto; padding-top: 6px; }

#screen-reveal .btn.big {
  position: static; flex: none;
  margin: auto 0 0; /* pinned to the bottom of the screen */
  margin-bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateY(0);
}
#screen-reveal .reveal-card + .btn.big { margin-top: 10px; }

/* very short phones (375x667 and below): tighter still */
@media (max-height: 700px) {
  html[data-screen="reveal"] .bar { padding: 0 0 4px; }
  html[data-screen="reveal"] .flap { width: 38px; height: 52px; }
  html[data-screen="reveal"] .strip span { height: 52px; font-size: 44px; }
  html[data-screen="reveal"] .dial-wrap { margin-bottom: 6px; }
  #screen-reveal .reveal-card { padding: 10px 14px; }
  #screen-reveal .stamp { font-size: 1.3rem; }
  #screen-reveal .btn.big { min-height: 52px; }
  html[data-screen="reveal"] .dial-caption { display: none; }
  #screen-reveal .your .pic { width: 38px; height: 38px; }
  #screen-reveal .your-fact { font-size: 0.8rem; line-height: 1.3; }
  #screen-reveal .points { margin-bottom: 4px; }
  #screen-reveal .toplist li { padding: 2px 6px; font-size: 0.92rem; }
  #screen-reveal .toplist.has-pics li { grid-template-columns: 1.9rem 22px 1fr auto; }
  #screen-reveal .toplist .pic { width: 22px; height: 22px; border-radius: 5px; }
}

/* tall screens (desktop, big phones): roomier */
@media (min-height: 1000px) {
  html[data-screen="reveal"] .flap { width: 56px; height: 80px; }
  html[data-screen="reveal"] .strip span { height: 80px; font-size: 66px; }
  html[data-screen="reveal"] .dial-wrap { margin-bottom: 12px; }
  #screen-reveal .reveal-card { padding: 18px 20px; }
}
@media (min-height: 860px) and (min-width: 700px) {
  #screen-reveal .toplist li { font-size: 1rem; }
  #screen-reveal .toplist.has-pics li { grid-template-columns: 2rem 28px 1fr auto; }
  #screen-reveal .toplist .pic { width: 28px; height: 28px; }
}

/* during the climb nothing about the result may show (the list above is display:flex, so
   restate the suspense hiding at this specificity) */
#screen-reveal .reveal-card.suspense :is(.stamp, .your, .your-fact, .top-title, .toplist, .featured-fact, .source, .points .bonus) { display: none; }