/* ---------------------------------------------------------------------------
   replays-moments: the Moments shelf (stage `moments`), its menu row, the
   lobby's poster tile, and the clip page's sharer line. front-moments.js.

   The October 5 packet's language: ink-dark sharp panels with brass
   hairlines, the active card in warm ivory, pictures first. One gold on the
   stage and it is the way back, named for where it goes (BACK TO MENU,
   BACK TO LOBBY, or BACK TO BATTLE after a match); the menu row is never gold.
   --------------------------------------------------------------------------- */

/* ---- the menu row: the newest still in an ink frame (the packet's 07) ------------------ */
#hold .hold-moments-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
#hold .hold-moments-row[hidden] { display: none; }
#hold .hold-moments-frame {
  position: relative;
  grid-column: 3;
  grid-row: 1 / 3;
  display: block;
  width: 96px;
  padding: 3px;
  background: var(--ui-stone-0);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .6);
}
#hold .hold-moments-frame[hidden] { display: none; }
#hold .hold-moments-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
#hold .hold-moments-frame small {
  position: absolute;
  top: 5px; left: 5px;
  padding: 1px 3px;
  font: 400 11px/1 var(--hold-body);
  letter-spacing: .14em;
  color: var(--ui-ink);
  background: rgba(4, 6, 11, .72);
}

/* ---- the lobby tile: the poster, a play glyph, the count --------------------------------- */
/* glow-share-incentive: the tile is a frame (the strip, then the share bar);
   the poster row is its own button. */
#hold .hold-moments-tile {
  position: relative;
  display: grid;
  width: min(320px, 100%);
  padding: 0;
  border: 0;
  background: var(--ui-stone-1);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .45);
  color: var(--ui-ink);
  overflow: hidden;
}
#hold .hold-moments-tile[hidden] { display: none; }
#hold .hold-moments-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
#hold .hold-moments-open img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
#hold .hold-moments-tile-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 10px 8px;
  background: linear-gradient(180deg, rgba(4, 6, 11, 0), rgba(4, 6, 11, .88) 55%);
}
#hold .hold-moments-tile-cap svg { width: 14px; height: 14px; color: var(--ui-lamp-core); }
#hold .hold-moments-tile-cap b { font: 400 12px/1 var(--hold-caps); letter-spacing: .2em; }
#hold .hold-moments-tile-cap i { margin-left: auto; font: 700 14px/1 var(--hold-serif); font-style: normal; color: var(--ui-gold-a); }
#hold .hold-moments-open:hover, #hold .hold-moments-open:focus-visible { box-shadow: inset 0 0 0 2px var(--lobby-ivory, #efe6cf); }

/* ---- the stage ---------------------------------------------------------------------------- */
#hold .hold-momentsp { width: min(1320px, 100%); gap: 14px; }
/* The title left, the one gold pinned right: the shelf never strands anybody. */
#hold .mo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
#hold .mo-head-words { display: grid; gap: 4px; min-width: 0; }
#hold .hold-momentsp .hold-title {
  margin: 0;
  padding: 0;
  font: 700 clamp(28px, 3.4vw, 48px)/1 var(--hold-serif);
  letter-spacing: .16em;
  text-shadow: 0 2px 0 rgba(4, 6, 11, .8);
  background: none;
}
#hold .mo-sub { margin: 0; font: 400 clamp(13px, 1.1vw, 16px)/1.3 var(--hold-serif); letter-spacing: .06em; color: var(--ui-ink); opacity: .86; }
#hold .mo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  gap: 18px;
  align-items: start;
}

/* the theatre */
#hold .mo-theatre { display: grid; gap: 10px; min-width: 0; }
#hold .mo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ui-stone-0);
  box-shadow: 0 0 0 1px rgba(169, 120, 66, .55), 0 18px 40px rgba(0, 0, 0, .45);
  overflow: hidden;
}
#hold .mo-canvas, #hold .mo-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hold .mo-still { object-fit: cover; }
#hold .mo-still[hidden] { display: none; }
#hold .mo-tag {
  position: absolute;
  top: 14px; right: 16px;
  font: 400 11px/1 var(--hold-caps);
  letter-spacing: .24em;
  color: var(--ui-gold-a);
  text-shadow: 0 1px 2px #000;
}
#hold .mo-tag:empty { display: none; }
#hold .mo-card-note {
  position: absolute;
  left: 50%; top: 50%; translate: -50% -50%;
  margin: 0;
  padding: 14px 20px;
  background: rgba(15, 24, 19, .9);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842);
  font: 400 14px/1.4 var(--hold-caps);
  letter-spacing: .06em;
}
#hold .mo-card-note[hidden] { display: none; }

/* the share row: COPY LINK is ivory, the rest ghosts */
#hold .mo-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
#hold .mo-copy {
  flex: 1 1 200px;
  min-height: 50px;
  padding: 0 18px;
  background: var(--lobby-ivory, #efe6cf);
  color: var(--lobby-ivory-ink, #17130c);
}
#hold .mo-copy svg { width: 18px; height: 18px; }
#hold .mo-copy b { font: 700 15px/1 var(--hold-serif); letter-spacing: .18em; }
#hold .mo-copy:disabled { opacity: .4; cursor: default; }
#hold .mo-btn {
  flex: 0 1 auto;
  min-height: 50px;
  padding: 0 16px;
  gap: 9px;
  background: rgba(15, 24, 19, .82);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .45);
  color: var(--ui-ink);
}
#hold .mo-btn svg { width: 15px; height: 15px; flex: none; color: var(--ui-brass); }
#hold .mo-btn i { font: 400 12px/1 var(--hold-caps); font-style: normal; letter-spacing: .2em; }
#hold .mo-btn:hover:not(:disabled) { background: rgba(28, 41, 33, .95); }
#hold .mo-btn:disabled { opacity: .4; cursor: default; }
#hold .mo-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ui-ink); }
#hold #mo-star.is-on svg { color: var(--ui-gold-a); }
#hold #mo-star.is-on i { color: var(--ui-gold-a); }
#hold .mo-menu { display: flex; gap: 8px; }
#hold .mo-menu[hidden] { display: none; }
#hold .mo-menu .mo-btn { flex: 1 1 0; justify-content: center; }
#hold .mo-note { margin: 0; min-height: 1.3em; font: 400 13px/1.3 var(--hold-body); letter-spacing: .04em; color: var(--ui-muted); }
#hold .mo-link {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: var(--ui-stone-1);
  box-shadow: inset 0 0 0 1px var(--ui-brass);
  color: var(--ui-ink);
  font: 400 13px/1 var(--hold-body);
}
#hold .mo-link[hidden] { display: none; }

/* the shelf: two views (front-moments.js setView). MATCHES is every match as
   a row with its best still; CLIPS is one match's moments stacked vertically
   beside the theatre, its row on top as the way back out. */
#hold .mo-shelf {
  display: grid;
  background: rgba(9, 14, 12, .78);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .3);
  padding: 10px;
  gap: 8px;
  align-content: start;
  /* As tall as the theatre beside it and never taller: it does not size the
     row (height 0), it fills it (min-height 100%) and scrolls inside. */
  align-self: stretch;
  height: 0;
  min-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(169, 120, 66, .5) transparent;
}
#hold .mo-match { display: grid; gap: 8px; }
#hold .mo-shelf[data-view="clips"] .mo-match:not(.is-open) { display: none; }
#hold .mo-shelf[data-view="matches"] .mo-cards { display: none; }
#hold .mo-match-head {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px 8px 6px 6px;
  border: 0;
  background: var(--ui-stone-1);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .35);
  color: var(--ui-ink);
  text-align: left;
  cursor: pointer;
}
#hold .mo-match-head:hover, #hold .mo-match-head:focus-visible { box-shadow: inset 0 0 0 1px var(--ui-brass); }
#hold .mo-back-chev { display: none; width: 16px; height: 16px; color: var(--ui-gold-a); }
#hold .mo-match-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ui-stone-0); }
#hold .mo-match-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
#hold .mo-match-thumb .mo-badge { position: absolute; left: 4px; top: 4px; filter: drop-shadow(0 1px 1px #000); }
#hold .mo-match-words { display: grid; gap: 6px; min-width: 0; }
#hold .mo-match-words b { font: 700 15px/1 var(--hold-serif); letter-spacing: .14em; }
#hold .mo-match-words i { font: 400 11px/1.2 var(--hold-caps); font-style: normal; letter-spacing: .16em; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hold .mo-match-n { display: inline-flex; align-items: center; gap: 5px; font: 700 14px/1 var(--hold-serif); color: var(--ui-gold-a); }
#hold .mo-match-n svg { width: 15px; height: 15px; color: var(--ui-brass); }
#hold .mo-badge { width: 18px; height: 18px; color: #326cb4; }
#hold .mo-match[data-tone="lost"] .mo-badge { color: #c94338; }
#hold .mo-match[data-tone="even"] .mo-badge { color: var(--ui-brass); }
#hold .mo-chev { width: 14px; height: 14px; color: var(--ui-muted); }
/* Inside a match: its row is a slim header with the way back. */
#hold .mo-shelf[data-view="clips"] .mo-match-head {
  grid-template-columns: 16px 64px minmax(0, 1fr) auto;
  padding: 4px 8px 6px 2px;
  background: linear-gradient(90deg, var(--ui-brass), rgba(198, 168, 91, 0)) bottom left / 100% 1px no-repeat;
  box-shadow: none;
}
#hold .mo-shelf[data-view="clips"] .mo-back-chev { display: block; }
#hold .mo-shelf[data-view="clips"] .mo-chev { display: none; }
#hold .mo-shelf[data-view="clips"] .mo-match-words b { font-size: 13px; }
/* One match's moments, stacked: the still left, the reason right. */
#hold .mo-cards { display: grid; grid-auto-flow: row; gap: 8px; }
#hold .mo-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  align-items: center;
  padding: 0;
  border: 0;
  background: var(--ui-stone-1);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .35);
  color: var(--ui-ink);
  text-align: left;
  cursor: pointer;
}
#hold .mo-poster { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ui-stone-0); }
#hold .mo-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The packet's corner brackets on every still. */
#hold .mo-poster::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  --c: rgba(242, 230, 189, .8);
  background:
    linear-gradient(var(--c), var(--c)) top left / 10px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 10px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 10px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 10px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px 10px no-repeat;
}
#hold .mo-replay, #hold .mo-dur {
  position: absolute;
  font: 400 11px/1 var(--hold-body);
  letter-spacing: .16em;
  color: var(--ui-ink);
  text-shadow: 0 1px 2px #000;
}
#hold .mo-replay { top: 9px; left: 10px; }
#hold .mo-dur { right: 10px; bottom: 9px; letter-spacing: .06em; }
#hold .mo-card.is-art .mo-poster img { opacity: .55; filter: saturate(.7); }
#hold .mo-card-meta {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  padding: 8px 12px 8px 12px;
}
#hold .mo-face { grid-row: 1 / 3; width: 34px; height: 34px; object-fit: cover; border-radius: 50%; background: var(--ui-stone-2); box-shadow: 0 0 0 2px var(--ui-hairline, #a97842); position: relative; }
/* menus-ux-30: the STORY card has no face, so its words take the whole row
   rather than the face's 34 px column ("M…"). */
#hold .mo-story .mo-card-meta { grid-template-columns: minmax(0, 1fr); }
#hold .mo-card-meta b { font: 700 13px/1.15 var(--hold-serif); letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hold .mo-card-meta i { font: 400 11px/1.2 var(--hold-body); font-style: normal; letter-spacing: .12em; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hold .mo-best {
  position: absolute;
  bottom: 6px; left: 6px;
  padding: 3px 6px;
  font: 600 11px/1 var(--hold-body);
  font-style: normal;
  letter-spacing: .18em;
  color: var(--ui-gold-ink);
  background: var(--ui-gold-a);
}
#hold .mo-starmark { position: absolute; top: 7px; right: 8px; width: 15px; height: 15px; color: var(--ui-gold-a); text-decoration: none; filter: drop-shadow(0 1px 1px #000); }
#hold .mo-starmark svg { width: 100%; height: 100%; display: block; }
#hold .mo-card:hover { box-shadow: inset 0 0 0 1px var(--ui-brass); }
/* The card on screen: warm ivory, as the active row is everywhere. */
#hold .mo-card.is-on { background: var(--ui-ivory-sel, #e6d8b8); color: var(--ui-ivory-ink, #17120b); box-shadow: 0 0 0 2px var(--ui-ivory-sel, #e6d8b8); }
#hold .mo-card.is-on .mo-card-meta i { color: rgba(23, 18, 11, .7); }
#hold .mo-empty { margin: 0; padding: 24px 0; font: 400 14px/1.4 var(--hold-caps); letter-spacing: .08em; color: var(--ui-muted); text-align: center; }

/* the foot: Back, and the one gold */
#hold .mo-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 12px;
  background: linear-gradient(90deg, rgba(169, 120, 66, 0), var(--ui-brass) 20%, var(--ui-brass) 80%, rgba(169, 120, 66, 0)) top center / 100% 1px no-repeat;
}
#hold .mo-foot .hold-solo { flex: 0 0 auto; min-width: 140px; }
#hold .mo-battle { flex: none; gap: 14px; min-width: min(300px, 100%); min-height: 60px; }
#hold .mo-battle b { font: 700 clamp(18px, 1.7vw, 24px)/1.1 var(--hold-serif); letter-spacing: .18em; }
#hold .mo-battle svg { width: 11px; height: 15px; }
/* menus-ux-35: when the gold goes where Esc goes, it is the one Back and wears the key. */
#hold .mo-battle .mo-esc { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid rgba(34, 23, 14, .55); border-radius: 2px; font: 400 11px/1 var(--hold-body); letter-spacing: .04em; color: var(--ui-gold-ink); }
#hold .mo-battle .mo-esc[hidden], #hold .mo-foot[hidden] { display: none; }
#hold[data-phone] .mo-battle .mo-esc { display: none; }

/* ---- phones: everything stacks; the cards scroll sideways ------------------------------------ */
@media (max-width: 760px) {
  #hold .hold-moments-thumb { width: 72px; }
  #hold .mo-grid { grid-template-columns: minmax(0, 1fr); }
  #hold .mo-shelf { height: auto; min-height: 0; max-height: none; overflow: visible; padding: 10px; }
  #hold .mo-match-head { grid-template-columns: 96px minmax(0, 1fr) auto 14px; gap: 10px; }
  #hold .mo-card { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  #hold .mo-btn { flex: 1 1 calc(33% - 8px); justify-content: center; padding: 0 10px; }
  #hold .mo-copy { flex: 1 1 100%; }
  #hold .mo-head { flex-direction: column; align-items: stretch; }
  #hold .mo-head-words { justify-items: center; text-align: center; }
  /* On a phone the gold rides at the bottom of the thumb's reach, always. */
  #hold .mo-battle { position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6; min-width: 0; box-shadow: 0 10px 24px rgba(0, 0, 0, .7); }
  #hold .hold-momentsp { padding-bottom: 84px; }
  #hold .mo-foot .hold-solo { min-width: 0; }
  #hold .mo-battle b { font-size: 17px; letter-spacing: .12em; white-space: nowrap; }
  /* The stage's own title names it; the compact lockup would sit on it. */
  #hold[data-stage="moments"] .hold-lockup { display: none; }
}

/* ---- the clip page (the packet's 06 / 06b) ----------------------------------------------
   A bar along the foot: the actor's reason card and who shared it on the
   left, PLAY GLOW gold and the outlined actions on the right; the address in
   the top-right corner. */
#clip-chrome .clip-row {
  left: 0; right: 0; bottom: 0;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 26px 18px;
  background: linear-gradient(180deg, rgba(5, 7, 10, .2), rgba(5, 7, 10, .88) 65%);
  box-shadow: inset 0 1px 0 rgba(169, 120, 66, .7);
}
#clip-chrome .clip-caption { display: flex; align-items: center; gap: 16px; min-width: 0; }
#clip-chrome .clip-caption > span { display: grid; gap: 6px; min-width: 0; }
#clip-chrome .clip-caption b { font: 700 clamp(20px, 2vw, 30px)/1 var(--hold-serif, serif); letter-spacing: .14em; text-transform: uppercase; padding-bottom: 6px; background: linear-gradient(90deg, var(--ui-brass, #c6a85b), rgba(198, 168, 91, 0)) bottom left / 100% 1px no-repeat; }
#clip-chrome .clip-caption small { font: 400 15px/1.2 var(--hold-serif, serif); letter-spacing: .06em; color: var(--ui-ink, #f2e6bd); }
#clip-chrome .clip-face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #0b111a; box-shadow: 0 0 0 2px var(--ui-hairline, #a97842); flex: none; }
#clip-chrome .clip-actions .hold-ghost { min-height: 52px; padding: 8px 18px; background: rgba(5, 7, 10, .6); box-shadow: inset 0 0 0 1px var(--ui-ink, #f2e6bd); white-space: nowrap; justify-content: center; }
#clip-chrome .clip-actions .hold-ghost i { font-style: normal; }
#clip-chrome .clip-actions .clip-x { min-width: 52px; }
/* While it plays, the renderer draws the reason card into the clip itself
   (killcam-fx.js, the same card the video carries), so the bar says only who
   shared it; the expired and older-build cards keep the words. */
@media (min-width: 761px) {
  #clip-chrome[data-status="playing"] .clip-caption b { display: none; }
}
#clip-chrome .clip-play { min-height: 52px; padding: 10px 34px; }
#clip-chrome .clip-addr { position: absolute; top: 24px; right: 26px; font: 400 14px/1 var(--hold-serif, serif); letter-spacing: .04em; color: var(--ui-ink, #f2e6bd); text-shadow: 0 1px 2px #000; }
#clip-chrome .clip-note { bottom: 108px; }
@media (max-width: 760px) {
  /* Solid on a phone: the bar covers the clip's own card and carries the words. */
  #clip-chrome .clip-row { flex-direction: column; align-items: stretch; padding: 14px 16px 22px; background: #05070a; }
  #clip-chrome .clip-caption { justify-content: center; }
  #clip-chrome .clip-face { width: 52px; height: 52px; }
  #clip-chrome .clip-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #clip-chrome .clip-actions .clip-play { grid-column: 1 / -1; order: -1; justify-content: center; }
  #clip-chrome .clip-actions .hold-ghost { justify-content: center; }
  #clip-chrome .clip-actions .clip-export { grid-column: 1 / -1; }
  #clip-chrome .clip-addr { z-index: 2; top: auto; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 11px; opacity: .8; }
  #clip-chrome .clip-note { bottom: 250px; }
}

/* The compact lockup sits top-left of the door; the shelf's title starts under
   it wherever the panel reaches that corner (the packet's 04 stacks them). */
@media (min-width: 761px) and (max-width: 1640px) {
  #hold .hold-momentsp { padding-top: 64px; }
}
@media (max-width: 760px) {
  #hold .mo-card:has(.mo-best) .mo-replay { display: none; }
}

/* ---- glow-share-incentive (2026-10-06): SHARE one tap from the lobby --------------------------
   The share bar names the player's best moment nobody has a link to yet:
   the reason word, a line (the one-time nudge, or today's count),
   SHARE with a gold edge (START/READY keep the fill) and its +N chip, a small X.
   It sits under the BEST MOMENTS rail, or inside the YOUR MOMENTS strip when
   the rail is down (share-incentive.js moves it). One row, never taller. */
#hold .hold-sharebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "words words" "go x";
  align-items: center;
  row-gap: 6px;
  column-gap: 8px;
  padding: 7px 8px 8px;
  background: rgba(5, 8, 14, .82);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .4);
  color: var(--ui-ink);
}
#hold .hold-sharebar[hidden] { display: none; }
/* The words read in full in a 280 px column: the reason word, then the line
   (the nudge wraps to a second line rather than losing its number). */
#hold .hold-sharebar-words { grid-area: words; display: grid; gap: 3px; min-width: 0; padding: 0 2px; }
#hold .hold-sharebar-words b { font: 700 12px/1.1 var(--hold-serif); letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hold .hold-sharebar-words i { font: 400 11px/1.25 var(--hold-body); font-style: normal; letter-spacing: .12em; color: var(--ui-muted); }
#hold .hold-sharebar-words i[hidden] { display: none; }
#hold .hold-sharebar-words i.is-nudge { color: var(--ui-gold-a); text-transform: none; letter-spacing: .04em; font: 400 12px/1.25 var(--hold-body); }
/* Gold-edged, not gold-filled: the one filled gold on this stage is READY. */
#hold .hold-sharebar-go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px 0 9px;
  border: 0;
  background: rgba(241, 210, 125, .08);
  box-shadow: inset 0 0 0 1px var(--ui-gold-a);
  color: var(--ui-gold-a);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
#hold .hold-sharebar-go:hover, #hold .hold-sharebar-go:focus-visible { background: rgba(241, 210, 125, .18); }
#hold .hold-sharebar-go svg { width: 14px; height: 14px; flex: none; }
#hold .hold-sharebar-go b { font: 400 12px/1 var(--hold-caps); letter-spacing: .18em; }
#hold .hold-sharebar .gr-tag { padding: 2px 5px; font: 700 11px/1 var(--hold-body); font-style: normal; letter-spacing: .06em; color: var(--ui-gold-ink); background: var(--ui-gold-a); font-variant-numeric: tabular-nums; }
#hold .hold-sharebar .gr-tag[hidden] { display: none; }
#hold .hold-sharebar-x {
  grid-area: x;
  display: grid;
  place-items: center;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .45);
  color: var(--ui-ink);
  cursor: pointer;
}
#hold .hold-sharebar-x:hover, #hold .hold-sharebar-x:focus-visible { background: rgba(255, 255, 255, .09); }
#hold .hold-sharebar-x svg { width: 13px; height: 13px; }
/* Inside the strip the poster row already shows a still; the bar keeps its words. */
/* In the strip the bar is one row (the strip's poster row above it is the
   picture): the line here is always short, a kept moment is never credited,
   so the nudge is the plain one. The strip stays under 100 px tall and the
   map row never pushes the roster. */
#hold .hold-moments-tile .hold-sharebar { background: transparent; box-shadow: none; padding: 5px 8px 7px; border-top: 1px solid rgba(169, 120, 66, .3);
  grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "words go x"; }
#hold .hold-moments-tile .hold-sharebar-words i { font-size: 11px; letter-spacing: .08em; }
#hold .hold-moments-tile .hold-sharebar-go { padding: 0 9px; }
#hold .hold-sharebar .gr-tag, #hold .mo-copy .gr-tag, #hold .rd-share .gr-tag { display: inline-block; }

/* The chip's count-up: gold, a small pop, back to rest. */
#hold .gr-tag.is-won { animation: hold-share-won .55s ease-out; }
@keyframes hold-share-won {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); background: var(--ui-lamp-core, #fff3de); }
  100% { transform: scale(1); }
}

/* The sparks: art/share-sparks.png (scripts/gen-glow-share-sparks.mjs), eight
   24 px frames drawn at 2x, stepped, over the button that was pressed. */
.hold-share-burst {
  position: fixed;
  z-index: 60;
  width: 48px;
  height: 48px;
  pointer-events: none;
  background: url("./art/share-sparks.png") 0 0 / 384px 48px no-repeat;
  image-rendering: pixelated;
  animation: hold-share-burst .9s steps(8, jump-none) forwards;
}
@keyframes hold-share-burst {
  from { background-position: 0 0; }
  to { background-position: -336px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hold-share-burst { display: none; }
  #hold .gr-tag.is-won { animation: none; }
}

/* The Moments shelf: the chip on a card whose link would be credited, and on COPY LINK. */
#hold .mo-pts { position: absolute; top: 8px; right: 8px; padding: 2px 5px; font: 700 11px/1 var(--hold-body); font-style: normal; letter-spacing: .06em; color: var(--ui-gold-ink); background: var(--ui-gold-a); }
#hold .mo-copy .gr-tag { margin-left: 10px; padding: 2px 6px; font: 700 12px/1 var(--hold-body); font-style: normal; letter-spacing: .06em; color: var(--ui-gold-ink); background: var(--ui-gold-a); box-shadow: 0 0 0 1px var(--ui-gold-edge); }

/* fb-glow-front held the stages to the window; the shelf's theatre follows: on
   a short desktop window the frame gives up width so the Esc BACK row under it
   stays inside the viewport (1600x800 sat a few px below the fold). */
@media (min-width: 761px) {
  #hold .mo-frame { width: min(100%, calc((100vh - 390px) * 16 / 9)); max-width: 100%; margin: 0 auto; }
  #hold .mo-row, #hold .mo-menu, #hold .mo-note, #hold .mo-link { width: min(100%, calc((100vh - 390px) * 16 / 9)); margin-left: auto; margin-right: auto; }
}