/* ==========================================================================
   Merrifruit — website styles
   The app's own day colours, from lib/app/theme/app_colors.dart
   (AppColors.day): the cream page, the white cards, the plum ink, the
   mango Play button with its solid depth edge, and the grape the app uses
   for levels — here the colour of a link.
   No web fonts, no CDN, no trackers: the page is one request plus images.

   Copied from tiltrow/assets/site.css. A project folder on this site is
   self-contained (CLAUDE.md §2) — nothing here is shared with that one,
   and a change there is not a change here. The variable names are the
   template's: --ink is the page, --cream is the text, --gold the accent.
   ========================================================================== */

:root {
  /* Every text colour is measured against the page and against a card;
     the numbers are the contrast ratios. Mango is the app's Play button:
     ink text on it reads 7.7, but mango as text on cream is 1.9, so it is
     a fill and a mark here, never text. */
  --ink:        #fff8ec;   /* the page: AppColors.day.bg */
  --surface:    #ffefd2;   /* AppColors.day.surfaceAlt */
  --card:       #ffffff;   /* AppColors.day.surface */
  --card-hi:    #ffffff;

  --gold:       #6a4fe6;   /* AppColors.day.grape — links: 5.1 on page, 5.4 on card */
  --gold-deep:  #5a3fd6;
  --mango:      #ff9f1c;   /* AppColors.day.primary — fills, never text */
  --mango-hi:   #ffb043;
  --mango-depth:#d9770a;   /* AppColors.day.primaryDepth — the button's edge */
  --cream:      #2b1b3d;   /* AppColors.day.ink — the text colour: 15.0 on page */
  --muted:      #4b3b5c;   /* between ink and inkSoft: 9.6 on page */
  --muted-dim:  #6b5b7b;   /* AppColors.day.inkSoft — 5.8 on page, 6.2 on a card */

  --line:       rgba(43, 27, 61, .16);
  --line-soft:  rgba(43, 27, 61, .07);

  --shadow-md:  0 12px 30px rgba(43, 27, 61, .16);

  --r-sm: 10px;
  --r:    16px;

  --pad: clamp(20px, 5vw, 40px);
  --maxw: 1140px;

  --sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--cream);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--gold); color: #ffffff; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px; top: 16px;
  z-index: 100;
  background: var(--cream);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 700;
}

/* ---------------------------------------------------------------- type --- */

h1, h2, h3 {
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 800;
}

h1 { font-size: clamp(2.3rem, 6.2vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); }
/* No word left alone on a heading's last line. */
h1, h2 { text-wrap: balance; }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }

p { margin: 0 0 1em; }

.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--muted);
  max-width: 60ch;
}

/* A plain line of words over a heading: sentence case, in the quiet ink. */
.eyebrow {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--muted-dim);
  margin-bottom: 10px;
}

.fine { font-size: .86rem; color: var(--muted-dim); }

/* -------------------------------------------------------------- header --- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 68px;
}

.crumb {
  color: var(--muted-dim);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}
.crumb:hover { color: var(--gold); text-decoration: none; }
/* On a phone the way back is the arrow alone, so the header never makes
   the page wider than a 390 px screen. The words stay for a screen
   reader: text at size 0 is still read. */
@media (max-width: 440px) {
  .crumb { padding-right: 10px; font-size: 0; }
  .crumb::before { content: "\2190"; font-size: 1.05rem; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--cream);
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.06rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand img {
  width: 32px; height: 32px;
  border-radius: 9px;
}

.nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: .95rem;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav a:hover { color: var(--cream); border-bottom-color: var(--mango); }

.head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* the language pill: same size as the other, quieter */
.lang {
  font-weight: 600;
  letter-spacing: 0;
}

@media (max-width: 860px) {
  .nav { display: none; }
  .head-actions { margin-left: auto; }
}
@media (max-width: 440px) {
  .site-head .wrap { gap: 10px; }
  /* the wordmark comes off the bar, but stays in the accessibility tree —
     display:none would leave the link with no name at all */
  .brand span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .btn-sm { padding: 9px 13px; }
}

/* The smallest phones: let the bar take a second row before it lets the
   page scroll sideways. */
@media (max-width: 360px) {
  .site-head .wrap {
    height: auto;
    min-height: 68px;
    flex-wrap: wrap;
    row-gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .97rem;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }

/* The app's own Play button: a mango face on a solid mango-depth edge,
   ink text on it. Flat colour, no glow, and it does not lift. */
.btn-primary {
  background: var(--mango);
  color: var(--cream);
  box-shadow: inset 0 -3px 0 var(--mango-depth);
}
.btn-primary:hover { background: var(--mango-hi); }

.btn-ghost {
  background: none;
  color: var(--cream);
  border-color: rgba(43, 27, 61, .34);
}
.btn-ghost:hover { background: rgba(43, 27, 61, .05); border-color: var(--cream); }

.btn-sm { padding: 9px 17px; font-size: .9rem; }

/* ---------------------------------------------------------------- hero --- */

.hero {
  padding: clamp(36px, 6vw, 68px) 0 clamp(32px, 5vw, 56px);
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 { margin-bottom: 18px; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 22px;
}

/* A line of plain words. Pills would read as buttons. */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  font-size: .92rem;
  color: var(--muted);
}
.badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.badges li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mango);
}

/* The app's icon, as the launcher shows it: a rounded square. */
.hero-art { text-align: center; }
.app-icon {
  width: min(100%, 320px);
  margin: 0 auto;
  border-radius: 22.5%;
  box-shadow: var(--shadow-md);
}
.hero-art .fine { margin: 20px auto 0; max-width: 32ch; }

/* A store card in the hero: the real game, framed, tilted a little. */
.hero-shot {
  width: min(100%, 300px);
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  transform: rotate(2deg);
}

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .app-icon { width: min(46vw, 180px); }
  .hero-shot { width: min(62vw, 240px); transform: none; }
}

/* ------------------------------------------------------------ sections --- */

section { padding: clamp(40px, 6vw, 68px) 0; }

.section-head { max-width: 62ch; margin-bottom: clamp(20px, 3vw, 32px); }

.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* A band of the app's warmer cream, to tell one part of the page from
   the next without a box round it. */
.band { background: var(--surface); }

/* ---------------------------------------------------------------- grid --- */

.grid {
  display: grid;
  gap: 22px 28px;
}
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
}

/* A column under a hairline, not a box. Nothing here is a link, so
   nothing should look as if it lifts when the pointer is over it. */
.card {
  border-top: 1px solid var(--line);
  padding: 18px 0 0;
}
.card p { color: var(--muted); margin-bottom: 0; font-size: .96rem; }
.card p + p { margin-top: .7em; }
.card h3 { margin-bottom: 8px; }

/* ------------------------------------------------------------- how-to  --- */

.step .n {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.after-steps { margin: clamp(26px, 4vw, 40px) 0 0; color: var(--muted); max-width: 70ch; }

/* ------------------------------------------------------- a fruit's life --- */
/* Five steps in a row. The bar over each is the colour the game paints
   for it (lib/game/art/fruit_art.dart and the ash dust): the raw rule's
   paler mango, the ripe gold rim, the warning's brown, the rotten spots,
   the grey ash. The words carry the meaning; the bar only echoes it. */

.life {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px 24px;
}
.life li {
  border-top: 4px solid var(--stage, var(--line));
  padding-top: 16px;
}
.life h3 { margin-bottom: 8px; }
.life p { color: var(--muted); font-size: .95rem; margin: 0; }
@media (max-width: 960px) {
  .life { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .life { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- modes table --- */
/* Wide content scrolls inside its own box, never the page. */

.table-wrap {
  overflow-x: auto;
  margin: clamp(30px, 4vw, 44px) 0 0;
}
.modes {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;     /* the three modes get equal columns */
  font-size: .95rem;
}
.modes thead th:first-child { width: 22%; }
.modes caption {
  text-align: left;
  font-weight: 700;
  color: var(--cream);
  padding-bottom: 12px;
}
.modes th,
.modes td {
  text-align: left;
  vertical-align: top;
  padding: 11px 18px 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.modes thead th {
  color: var(--cream);
  font-size: 1.02rem;
  border-bottom: 2px solid var(--cream);
}
.modes tbody th {
  color: var(--cream);
  font-weight: 700;
}

/* On a phone four columns do not fit, and a column scrolled out of sight
   is a mode nobody sees. So each rule becomes a short block of three
   lines, each line named by its mode (data-mode on the cell). The header
   row stays for a screen reader. */
@media (max-width: 640px) {
  .modes { min-width: 0; }
  .modes thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .modes tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .modes th,
  .modes td {
    display: block;
    padding: 1px 0;
    border: 0;
  }
  .modes tbody th { margin-bottom: 3px; }
  .modes td::before {
    content: attr(data-mode) ": ";
    font-weight: 700;
    color: var(--cream);
  }
}

/* ------------------------------------------------------------ features --- */

.feature-group + .feature-group { margin-top: clamp(36px, 5vw, 56px); }
.feature-group > h3 { font-size: 1.3rem; margin-bottom: 4px; }

.feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 34px;
}
.feats li {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: .97rem;
  color: var(--muted);
}
.feats li b { color: var(--cream); font-weight: 700; }
@media (max-width: 700px) { .feats { grid-template-columns: 1fr; } }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- themes --- */
/* One row a theme: what it is on the left, its eleven fruits on the
   right, from the smallest to the biggest, read down each column. The
   box under the fruits is the theme's own sky with a strip of its own
   grass, set on the row as --sky and --ground from the theme's scene in
   assets/themes/ (skyTop and ground). */

.themes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.theme {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px clamp(28px, 5vw, 56px);
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.theme h3 { font-size: 1.4rem; margin-bottom: 6px; }
.theme p { margin: 0 0 10px; font-size: .97rem; color: var(--muted); }
.theme p:last-child { margin-bottom: 0; }
.theme-how b { color: var(--cream); }

.ladder {
  list-style: none;
  margin: 0;
  padding: 18px 22px 22px;
  border-radius: 12px;
  background: var(--sky);
  border-bottom: 12px solid var(--ground);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  gap: 7px 20px;
  counter-reset: tier;
}
.ladder li {
  counter-increment: tier;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .97rem;
  color: var(--cream);
}
/* --muted on either sky: 6.7 or more; the names, in ink, 10.4 or more. */
.ladder li::before {
  content: counter(tier);
  min-width: 1.5em;
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.ladder li:last-child { font-weight: 700; }

@media (max-width: 860px) {
  .theme { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .ladder { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}


/* The little fruit beside each name, from assets/fruits.svg. */
.ladder .fr { width: 21px; height: 21px; flex: 0 0 auto; }

/* One quiet line under the hero buttons: the app is not in the store yet.
   It was a boxed note that said the same thing three times. */
.soon {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 24px 0 8px;
  max-width: 52ch;
  color: var(--muted);
}
.soon::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mango);
  transform: translateY(1px);
}
.soon strong { color: var(--cream); }
.soon p { margin: 0; }

/* --------------------------------------------------------- screenshots --- */
/* Kept for the gallery that is switched off in the page until the store
   screenshots exist. */

#screens { padding-bottom: clamp(40px, 6vw, 70px); }
#screens .section-head { margin-bottom: clamp(20px, 3vw, 30px); }

.shots {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px var(--pad) 26px;
  margin: 0 calc(var(--pad) * -1);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.shots > img {
  flex: 0 0 auto;
  width: min(74vw, 292px);
  height: auto;
  scroll-snap-align: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
}

/* ----------------------------------------------------------------- faq --- */

.faq { max-width: 800px; }
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-weight: 700;
  font-size: 1.02rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--mango-depth);
  border-bottom: 2px solid var(--mango-depth);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p {
  color: var(--muted);
  margin: 0 0 20px;
  max-width: 68ch;
  font-size: .97rem;
}

/* -------------------------------------------------------------- footer --- */

.site-foot {
  border-top: 1px solid var(--line-soft);
  padding: 40px 0 56px;
  color: var(--muted-dim);
  font-size: .9rem;
}
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
}
.site-foot nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.site-foot nav a {
  color: var(--muted);
  padding: 6px 0;          /* a 36 px tall tap target on a phone */
  display: inline-block;
}
.site-foot a { color: var(--muted); }
.site-foot .studio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted-dim);
  text-decoration: none;
}
.site-foot .studio:hover { color: var(--muted); }
.site-foot .studio img { width: 20px; height: 20px; border-radius: 5px; }
.site-foot .fine {
  flex: 1 0 100%;
  margin-top: 8px;
  font-size: .82rem;
  color: var(--muted-dim);
  max-width: 76ch;
}

/* ------------------------------------------------------- legal / prose --- */

.prose {
  max-width: 760px;
  margin: 0 auto;
}
.prose h2 {
  font-size: 1.3rem;
  margin-top: 44px;
  padding-top: 6px;
  scroll-margin-top: 96px;
}
.prose h2:first-of-type { margin-top: 24px; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--cream); font-weight: 700; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: .5em; }

/* The privacy policy's summary table. Wide content must scroll inside its
   own box, never make the page scroll sideways on a phone. */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font-size: .92rem;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 11px 16px 11px 0;
  text-align: left;
  vertical-align: top;
  color: var(--muted);
}
.data-table th {
  color: var(--cream);
  font-weight: 700;
  font-size: .88rem;
  border-bottom-color: var(--line);
}
.data-table td strong { color: var(--cream); }
@media (min-width: 720px) {
  .data-table { display: table; white-space: normal; }
  .data-table td { max-width: 22ch; }
}

.note {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--mango);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 26px 0 8px;
}
.note p:last-child { margin-bottom: 0; }
.note p { color: var(--cream); }

.toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 30px 0;
}
.toc b {
  display: block;
  font-size: .95rem;
  color: var(--cream);
  margin-bottom: 12px;
}
.toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 30px;
  font-size: .93rem;
}
.toc li { margin-bottom: 6px; break-inside: avoid; }
.toc a { color: var(--muted); }
.toc a:hover { color: var(--gold); }
@media (max-width: 560px) { .toc ol { columns: 1; } }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: .87rem;
  color: var(--muted-dim);
  padding-bottom: 8px;
}

/* ==========================================================================
   Bangla
   Bangla is a joined script: letter-spacing pulls the conjuncts apart and
   the headline tracking looks broken. Turn all tracking off, and give the
   text a little more room for the matras above and below the line.
   ========================================================================== */

html[lang="bn"] body { line-height: 1.8; }

html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] .btn,
html[lang="bn"] .brand { letter-spacing: normal; }

html[lang="bn"] h1,
html[lang="bn"] h2 { line-height: 1.35; }

/* The fruit ladder counts in Bangla digits on the Bangla page. */
html[lang="bn"] .ladder li::before { content: counter(tier, bengali); }

/* --------------------------------------------------------- inline links --- */
/* Colour alone is not enough to mark a link inside a paragraph, so the
   ones that sit in running text are underlined. */
.prose p a,
.prose li a,
.faq p a,
.card p a,
.note p a,
.feats li a,
.split p a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.prose p a:hover,
.faq p a:hover { text-decoration-thickness: 2px; }

/* -------------------------------------------------------------- viewer --- */
/* One screen of the strip, large, in a native <dialog>. Its own dark
   ground whatever the page's palette: a lightbox is a cinema, not a page.
   Built by site.js on first use; with no JS there is no viewer and the
   strip is a plain row of pictures. */

.shots img { cursor: zoom-in; }

html:has(.shot-viewer[open]) { overflow: hidden; }

.shot-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0c0c0e;
  color: #ededf0;
}
.shot-viewer::backdrop { background: #0c0c0e; }
.shot-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.sv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sv-count { margin: 0; font-size: .95rem; color: #b6b6c0; }

.shot-viewer button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: none;
  color: #ededf0;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.shot-viewer button:hover { border-color: #b6b6c0; background: rgba(255, 255, 255, .06); }
.sv-arrow { padding: 0 !important; }
.sv-arrow svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sv-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(16px, 4vw, 32px);
  min-height: 0;
}
.sv-stage img {
  margin: auto;
  width: auto;
  height: auto;
  /* Never larger than the file: a stretched screenshot is a blur. */
  max-width: min(100%, 540px);
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
  border-radius: 10px;
  border: 0;
}

.sv-cap {
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) 22px;
  max-width: 64ch;
  min-height: 3.2em;
  text-align: center;
  color: #b6b6c0;
  font-size: .95rem;
  line-height: 1.5;
}

/* On a phone the arrows move under the picture, where a thumb is. */
@media (max-width: 620px) {
  .sv-stage { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sv-stage img { grid-column: 1 / -1; grid-row: 1; max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); }
  .sv-arrow { grid-row: 2; width: 100%; }
}