/* The poster sheet.
 *
 * Its own file rather than a block at the bottom of profile.css, because it is
 * the one overlay in this game that belongs to BOTH screens: it opens off the
 * route card on the menu and off the SENT banner on the wall, and it has to
 * look the same from either. hud.css owns the variables; everything here reads
 * them.
 *
 * The one thing that is not styling: the `<img>` is the save path on iOS. A
 * long-press on it offers "Add to Photos" and a long-press on anything else
 * does not, so nothing may sit over it — no caption strip, no gradient, no
 * transparent close button spanning the panel. Keep it clear. */

.share {
  position: fixed; inset: 0; z-index: 60;
  /* ...and a height, on top of `inset: 0`, because those are not the same box
     on a phone. A fixed overlay is laid out against the LARGE viewport in
     Chrome on Android — the one with the URL bar counted as absent — so its
     bottom edge, and the row of buttons on it, sit behind the browser chrome
     that is actually on screen. `dvh` is the height there is right now. */
  height: 100dvh;
  /* Flex and not grid, and that is load-bearing: a percentage height on a GRID
     item resolves against its grid area, an auto row is sized to its content,
     and content taller than the screen therefore makes `height: 100%` on the
     panel BIGGER than the screen. A flex item's percentage resolves against the
     flex container's content box, which is the one number that is actually the
     size of the phone. */
  display: none; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(20, 14, 24, .72);
  backdrop-filter: blur(3px);
  animation: shareIn .18s ease both;
}
.share.on { display: flex; }

.share-panel {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: min(94vw, 420px);
  /* The poster is 9:16 and is the whole content, so the panel is sized off the
     HEIGHT it has been given and never off the width — a 9:16 image in a box
     sized by width is an image taller than the phone it is being previewed on,
     which is the one shape a preview may not be.
     `height` and not `max-height`, and that is the whole fix rather than a
     tidy-up: a percentage cap on a child resolves against a DEFINITE parent
     height and is dropped against an auto one, so with `max-height` here the
     poster's own `max-height: 100%` below meant nothing, it was sized off 94vw,
     and on a 360x640 phone the buttons were 60 px below the bottom of the
     screen with the hint cut through the middle of its second line. */
  height: 100%;
}

.share-shot {
  position: relative;
  display: grid; place-items: center;
  flex: 0 1 auto; min-height: 0;
  aspect-ratio: 9 / 16;
  width: auto; max-width: 100%; max-height: 100%;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #dfe6ec;
  box-shadow: 6px 6px 0 rgba(20, 14, 24, .45);
  overflow: hidden;
}
.share-shot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  /* iOS will not offer "Add to Photos" on an image it thinks is decorative
     furniture, and a long-press that instead selects the panel around it is the
     failure. `touch-callout` is the property that asks for the menu; the game's
     own body turns it off, so this turns it back on for the one element that
     needs it. */
  -webkit-touch-callout: default;
  user-select: auto; -webkit-user-select: auto;
}
.share.working .share-shot img { visibility: hidden; }

.share-spin {
  position: absolute;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pencil);
}
.share:not(.working) .share-spin { display: none; }

/* Neither of these gives up a pixel when the panel is short. Flex items shrink
   by default, so on a small phone the row above used to take its space out of
   all three — which on a line of text is a box shorter than the words in it and
   on a row of buttons is a button you cannot see the bottom of. The poster is
   the one thing here that can be smaller and still be itself. */
.share-hint {
  margin: 0; text-align: center;
  flex: none;
  color: var(--paper); opacity: .8;
  font-size: 12px; line-height: 1.4;
  max-width: 32ch;
}
.share-hint:empty { display: none; }

.share-acts {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  flex: none;
}
.share-acts > * {
  appearance: none; cursor: pointer; text-decoration: none;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 6px;
  font: inherit; font-weight: 800; font-size: 14px;
  letter-spacing: .04em;
  padding: 11px 22px;
  box-shadow: var(--lift) var(--lift) 0 var(--cast);
  transition: translate .1s ease, box-shadow .1s ease;
}
.share-acts > *[hidden] { display: none; }
.share-acts > *:hover { translate: -1px -1px; box-shadow: 4px 4px 0 var(--cast); }
.share-acts > *:active { translate: var(--lift) var(--lift); box-shadow: 0 0 0 var(--cast); }
/* Leaving is a real answer and gets a real target — see `.banner-acts .quiet`,
   which this is deliberately the same shape as. */
.share-acts .quiet {
  background: transparent; color: var(--paper);
  border-color: rgba(244, 241, 234, .45);
  box-shadow: none; font-weight: 700;
}
.share-acts .quiet:hover { translate: none; box-shadow: none; border-color: var(--paper); }

@keyframes shareIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .share { animation: none; } }

/* The control that opens it, on the route card. Quiet on purpose: it sits
   beside a record the player is reading, and it is an offer rather than the
   next thing to do.

   Quiet is the OPACITY and the missing shadow, though, and not the size — which
   is the distinction this shipped at 10px and 6px of padding without making: a
   28 px-tall control is under any thumb target anybody recommends, and it was
   the only pressable thing on this card a player had to aim at. So it is bigger
   here and still an offer, because `.route-climb` beside it keeps its slab, its
   shadow and its 15px sans while this stays a flat mono legend at .62. */
.route-share {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--ink);
  border: 2px solid currentColor; border-radius: 6px;
  font: inherit; font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 16px;
  opacity: .62;
  transition: opacity .12s ease, translate .1s ease;
}
.route-share:hover { opacity: 1; translate: -1px -1px; }
.route-share[hidden] { display: none; }

/* The one pane whose budget is HEIGHT rather than width — a phone held the
   wrong way round. `.route-climb` is cut here for the same reason and by about
   the same fraction (see profile.css); this still lands taller than the 28 px
   it used to be everywhere. */
@media (max-height: 520px) and (orientation: landscape) {
  .route-share { font-size: 11px; padding: 7px 13px; }
}