/* The LOOT picker (DoubloonWeb.LootSheet + the /shows fund sheet,
   ShowsWall.fund_sheet): the one way to buy LOOT, on every page. Moved out
   of shows_j.css so any page can load it: the J palette and type are set on
   .sjf itself, so the sheet looks the same over /shows, the site pages,
   /profile and /x. */

.sjf{
  --j-bg: #07070f;
  --j-bg-rgb: 7, 7, 15;
  --j-surface: #0f0f1e;
  --j-surface-2: #17172c;
  --j-line: rgba(242, 237, 228, 0.13);
  --j-line-2: rgba(242, 237, 228, 0.26);
  --j-text: #f2ede4;
  --j-text-rgb: 242, 237, 228;
  --j-gold: #f5c518;
  --j-gold-bright: #f8d44f;
  --j-on-gold: #1a1300;
  --j-green: #21e458;
  --j-green-rgb: 33, 228, 88;
  --j-red: #ff5a4f;
  --j-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --j-font: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--j-text);
  font-family: var(--j-font);
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.sjf :where(*, *::before, *::after){ box-sizing: border-box; }
.sjf :where(h1, h2, p, ul){ margin: 0; padding: 0; }
.sjf :where(button, input){ font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.sjf :where(button){ background: none; border: 0; padding: 0; cursor: pointer; }
.sjf :where(a){ color: inherit; text-decoration: none; }
.sjf :where(img){ display: block; max-width: none; }
.sjf :where(svg){ display: block; flex: none; }
.sjf[x-cloak], .sjf [x-cloak]{ display: none !important; }
.sjf :focus-visible{ outline: 3px solid var(--j-text); outline-offset: 3px; }

/* ── The fund sheet (ShowsWall.fund_sheet) ──────────────────────────────
   Produce this opens it, in the Now playing look: the sheet takes the
   show's colour from a blurred copy of its art; the art sits as a card,
   the LOOT going in rides on glass across its foot with the place it
   earns; /x's bar under it previews the fill. One scrubber below: over
   the balance when spending, snapping from pack to pack when buying (the
   end of its gold run turns green for the pack's bonus). Phones: full
   screen. 768+: a centred card. */
html.sjf-lock{ overflow: hidden; }
/* iOS 26 Safari: its toolbar floats over the page, fixed boxes end above
   it, and it fills the strip under itself with the colour of the topmost
   fixed box at the screen's foot, unless that box is near see-through. The
   film grain over every page (app.css body::after: fixed, full screen, 3%)
   is that box, so the page showed under the sheet. While a sheet is open
   the grain steps aside and the sheet's own colour runs under the toolbar
   (the sheet itself still ends above it, so its foot stays clear). */
html.sjf-lock body::after{ display: none; }

.sjf{ --j-gold-rgb: 245, 197, 24; font-weight: 400; }
.sjf .sjf-scrim{ position: fixed; inset: 0; z-index: 9998; background: rgba(3, 3, 8, 0.74); animation: sjf-fade 0.24s ease-out; }
.sjf .sjf-defs{ position: absolute; }
/* --kb: on a phone, while a field in the sheet has the keyboard up, what
   the keyboard covers of the sheet, as room at its foot (shows_j.js
   keyboardRoom), so the field can scroll clear of it */
.sjf .sjf-panel{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  max-height: calc(100svh - 16px); overflow-y: auto; overscroll-behavior: contain;
  padding: 52px 24px calc(10px + env(safe-area-inset-bottom) + var(--kb, 0px));
  border-radius: 24px 24px 0 0; background: #0b0b16;
  box-shadow: 0 -1px 0 rgba(var(--j-text-rgb), 0.14), 0 -30px 80px rgba(0, 0, 0, 0.6);
  animation: sjf-up 0.36s var(--j-ease);
}
@keyframes sjf-fade { from { opacity: 0; } }
@keyframes sjf-up { from { transform: translateY(40px); opacity: 0; } }
/* the panel (a click on its background) and, on a phone, a paid step's added
   box take focus rather than a field (tabindex -1, so no keyboard): no ring
   round the whole sheet or the box */
.sjf .sjf-panel:focus, .sjf .sjf-added:focus{ outline: none; }
.sjf .sjf-panel > :not(.sjf-ambient){ position: relative; z-index: 1; }
.sjf .sjf-ambient{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sjf .sjf-ambient::before{ content: ''; position: absolute; inset: -80px; background: var(--art, none) center / cover no-repeat; filter: blur(70px) saturate(1.5) brightness(0.72); }
.sjf .sjf-ambient::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--j-bg-rgb), 0.05), rgba(var(--j-bg-rgb), 0.45) 55%, rgba(var(--j-bg-rgb), 0.72)); }
.sjf .sjf-grab{ position: absolute !important; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 999px; background: rgba(var(--j-text-rgb), 0.3); }
.sjf .sjf-close{
  position: absolute !important; top: 8px; right: 8px; z-index: 3 !important;
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(var(--j-bg-rgb), 0.42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.sjf .sjf-close svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* the head: Produce <show>, and "?" for what LOOT is */
.sjf .sjf-panel{ padding-top: 16px; }
.sjf .sjf-panel .sjf-close{ top: 16px; right: 16px; }
.sjf .sjf-head{ display: flex; align-items: center; gap: 4px; min-height: 36px; margin-bottom: 14px; padding-right: 40px; }
.sjf .sjf-h{ min-width: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sjf .sjf-help{ flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; }
.sjf .sjf-help > span{ display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(var(--j-text-rgb), 0.6); font-size: 14px; font-weight: 600; line-height: 1; }
.sjf .sjf-help[aria-expanded='true'] > span{ background: var(--j-text); color: var(--j-surface); }
/* new here: a solid gold ?, two rings rippling out from it until it's tapped */
.sjf .sjf-help.is-new{ position: relative; }
.sjf .sjf-help.is-new > span{ position: relative; z-index: 1; width: 28px; height: 28px; background: var(--j-gold); color: var(--j-on-gold); box-shadow: 0 2px 10px rgba(var(--j-gold-rgb), 0.55); font-size: 17px; font-weight: 800; }
.sjf .sjf-help.is-new::before,
.sjf .sjf-help.is-new::after{ content: ''; position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; box-sizing: border-box; border: 3px solid var(--j-gold); border-radius: 50%; animation: sjf-help-ripple 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; pointer-events: none; }
.sjf .sjf-help.is-new::after{ animation-delay: 0.8s; }
@keyframes sjf-help-ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sjf .sjf-help.is-new::before,
  .sjf .sjf-help.is-new::after{ display: none; }
}
/* the "?" tour: a dim layer with a spotlight hole, one line per step */
.sjf .sjf-tour{ position: absolute !important; inset: 0; z-index: 10 !important; }
.sjf .sjf-tour-hole{ position: absolute; box-shadow: 0 0 0 9999px rgba(3, 3, 8, 0.72), inset 0 0 0 1.5px rgba(var(--j-gold-rgb), 0.85), 0 0 24px rgba(var(--j-gold-rgb), 0.35); transition: top 0.3s var(--j-ease), left 0.3s var(--j-ease), width 0.3s var(--j-ease), height 0.3s var(--j-ease); pointer-events: none; }
.sjf .sjf-tour-card{
  position: absolute; left: 16px; right: 16px; padding: 14px 14px 12px 16px; border-radius: 16px;
  background: rgba(15, 15, 30, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 0.5px rgba(var(--j-text-rgb), 0.25), 0 16px 40px rgba(0, 0, 0, 0.55);
  transition: top 0.3s var(--j-ease);
}
.sjf .sjf-tour-text{ display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.35; }
.sjf .sjf-tour-mark{ flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--j-gold-rgb), 0.16); }
.sjf .sjf-tour-mark .sjf-mark{ width: 12px; height: 15px; }
.sjf .sjf-tour-row{ display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sjf .sjf-tour-dots{ display: flex; gap: 5px; margin-right: auto; }
.sjf .sjf-tour-dots i{ width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--j-text-rgb), 0.3); transition: background 0.2s, width 0.2s; }
.sjf .sjf-tour-dots i.is-on{ width: 16px; border-radius: 3px; background: var(--j-gold); }
.sjf .sjf-tour-skip{ min-height: 36px; padding: 0 8px; font-size: 15px; color: rgba(var(--j-text-rgb), 0.75); }
.sjf .sjf-tour-next{ min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--j-gold); color: var(--j-on-gold); font-size: 15px; font-weight: 600; }


/* the art, and what's going in */
.sjf .sjf-cover{ aspect-ratio: 16 / 9; border-radius: 16px; background: var(--j-surface-2); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.85), 0 0 0 0.5px rgba(var(--j-text-rgb), 0.2); }
.sjf .sjf-cover img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.sjf .sjf-glass{
  position: absolute; left: 50%; bottom: 0; z-index: 2; transform: translate(-50%, 50%);
  --gap: 8px; display: inline-flex; align-items: center; gap: var(--gap); width: max-content; height: 40px; padding: 0 14px; border-radius: 999px;
  background: rgba(var(--j-bg-rgb), 0.48);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 0.5px rgba(var(--j-text-rgb), 0.28), 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--j-gold); white-space: nowrap;
}
.sjf .sjf-glass .sjf-mark{ width: 11px; height: 14px; fill: var(--j-gold); }
.sjf .sjf-glass b{ font-size: 21px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sjf .sjf-check{ width: 18px; height: 18px; fill: none; stroke: var(--j-green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sjf .sjf-badge{ display: inline-flex; align-items: center; gap: 3px; height: 28px; margin-right: -8px; padding: 0 9px 0 8px; border-radius: 999px; background: rgba(var(--j-green-rgb), 0.16); color: var(--j-green); font-size: 14px; font-weight: 600; }
/* buying: the pack's bonus, part of the total (not on top of it), as a
   second compartment of the capsule, with "Includes Bonus" in a pill on the
   capsule's top edge, over the bonus. It folds in and out with the pack: the
   grid's one column eases 0fr <-> 1fr, so the capsule resizes with it, and
   its margin cancels the gap folded; the pill fades and settles with it.
   The pill and the number share one cell, so the compartment is as wide as
   the wider of them: the pill stays centred over the bonus, inside the
   capsule's end. Only the sides clip while it folds (the pill rides above). */
.sjf .sjf-inc{ --div: 12px; display: inline-grid; grid-template-columns: 0fr; align-self: stretch; margin-left: calc(-1 * var(--gap)); opacity: 0; transition: grid-template-columns 0.34s cubic-bezier(0.3, 0.7, 0.2, 1), margin 0.34s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.22s ease; }
.sjf .sjf-inc.is-on{ grid-template-columns: 1fr; margin-left: 4px; opacity: 1; }
.sjf .sjf-inc-clip{ min-width: 0; overflow-x: clip; }
.sjf .sjf-inc-body{ position: relative; display: grid; place-items: center; width: max-content; height: 100%; padding-left: var(--div); }
.sjf .sjf-inc-body > *{ grid-area: 1 / 1; }
.sjf .sjf-inc-body::before{ content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 22px; transform: translateY(-50%); background: rgba(var(--j-text-rgb), 0.22); }
.sjf .sjf-inc-num{ display: inline-flex; align-items: center; gap: 4px; color: var(--j-green); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1); }
.sjf .sjf-inc-num.is-pop{ transform: scale(1.1); }
.sjf .sjf-inc-unit{ margin-left: 1px; font-size: 0.62em; font-weight: 700; letter-spacing: 0.02em; }
.sjf .sjf-glass .sjf-inc .sjf-mark, .sjf .sjf-cover.is-bare .sjf-glass .sjf-inc .sjf-mark{ width: 10px; height: 13px; fill: currentColor; }
.sjf .sjf-inc-pill{ align-self: start; z-index: 1; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: #0f2818; box-shadow: inset 0 0 0 0.5px rgba(var(--j-green-rgb), 0.5), 0 4px 14px rgba(0, 0, 0, 0.35); color: var(--j-green); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; transform: translateY(-50%); transition: transform 0.34s cubic-bezier(0.3, 0.7, 0.2, 1); }
.sjf .sjf-inc:not(.is-on) .sjf-inc-pill{ transform: translateY(-25%) scale(0.9); }
.sjf .sjf-glass{ transition: transform 0.34s cubic-bezier(0.3, 0.7, 0.2, 1); }
.sjf .sjf-cup{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sjf .sjf-mark{ width: 12px; height: 15px; fill: var(--j-gold); }
/* /x's bar, a touch thicker */
.sjf .sjf-fund{ height: 8px; margin-top: 38px; border-radius: 4px; background: rgba(var(--j-text-rgb), 0.12); overflow: hidden; }
.sjf .sjf-fund i, .sjf .sjf-fund u{ position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; }
.sjf .sjf-fund i{ width: var(--p); background: linear-gradient(90deg, #14a83e, var(--j-green)); box-shadow: 0 0 12px rgba(var(--j-green-rgb), 0.55); }
.sjf .sjf-fund u{ width: var(--q); background: repeating-linear-gradient(-55deg, rgba(94, 239, 134, 0.85) 0 5px, rgba(94, 239, 134, 0.38) 5px 10px); transition: width 0.15s linear; }
/* tipping: full, in the yellow of the show page's tip bar */
.sjf .sjf-fund.is-tip i{ background: linear-gradient(90deg, #c9a447, var(--j-gold)); box-shadow: 0 0 12px rgba(var(--j-gold-rgb), 0.45); }

/* the scrubber: thickens under the thumb */
.sjf .sjf-slider{ position: relative; height: 44px; margin-top: 18px; }
.sjf .sjf-track{ position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 5px; background: rgba(var(--j-text-rgb), 0.16); overflow: hidden; transition: height 0.15s var(--j-ease), margin 0.15s var(--j-ease); }
.sjf .sjf-track-fill{ position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.5), var(--j-gold)); }
/* buying: the end of the gold run is the pack's bonus, in green */
.sjf .sjf-slider.is-packs .sjf-track-fill{ background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.5), var(--j-gold) calc((1 - var(--g)) * 100%), var(--j-green) calc((1 - var(--g)) * 100%)); transition: width 0.18s var(--j-ease); }
.sjf .sjf-stop{ position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(var(--j-text-rgb), 0.45); pointer-events: none; }
.sjf .sjf-thumb{ position: absolute; top: 50%; left: var(--v); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--j-text); box-shadow: 0 0 0 6px rgba(var(--j-gold-rgb), 0.14), 0 4px 14px rgba(0, 0, 0, 0.5); pointer-events: none; transition: width 0.15s var(--j-ease), height 0.15s var(--j-ease), margin 0.15s var(--j-ease), box-shadow 0.15s var(--j-ease); }
.sjf .sjf-slider.is-packs .sjf-thumb{ transition: left 0.18s var(--j-ease), width 0.15s var(--j-ease), height 0.15s var(--j-ease), margin 0.15s var(--j-ease); }
.sjf .sjf-slider:has(.sjf-range:active) .sjf-track{ height: 10px; margin-top: -5px; }
.sjf .sjf-slider:has(.sjf-range:active) .sjf-thumb{ width: 30px; height: 30px; margin: -15px 0 0 -15px; box-shadow: 0 0 0 10px rgba(var(--j-gold-rgb), 0.16), 0 4px 14px rgba(0, 0, 0, 0.5); }
/* the nudge to slide, until the slider is touched */
.sjf .sjf-chev{ position: absolute; left: var(--v); top: 50%; display: none; gap: 3px; margin: -6px 0 0 24px; pointer-events: none; }
.sjf .sjf-chev i{ width: 7px; height: 7px; border-top: 2px solid var(--j-gold); border-right: 2px solid var(--j-gold); transform: rotate(45deg); opacity: 0.2; animation: sjf-chev 1.4s ease-in-out infinite; }
.sjf .sjf-chev i:nth-child(2){ animation-delay: 0.15s; }
.sjf .sjf-chev i:nth-child(3){ animation-delay: 0.3s; }
.sjf .sjf-slider.is-hint .sjf-chev{ display: flex; }
.sjf .sjf-slider.is-hint .sjf-thumb{ animation: sjf-nudge 2.4s var(--j-ease) 0.6s infinite; }
@keyframes sjf-chev { 0%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
@keyframes sjf-nudge {
  0%, 60%, 100% { transform: translateX(0); box-shadow: 0 0 0 6px rgba(var(--j-gold-rgb), 0.14), 0 4px 14px rgba(0, 0, 0, 0.5); }
  20% { transform: translateX(14px); box-shadow: 0 0 0 12px rgba(var(--j-gold-rgb), 0.22), 0 4px 14px rgba(0, 0, 0, 0.5); }
  35% { transform: translateX(0); }
}
.sjf .sjf-tick{ position: absolute; left: var(--t); top: -2px; transform: translateX(-50%); color: var(--j-green); pointer-events: none; }
.sjf .sjf-tick .sjf-cup{ width: 14px; height: 14px; }
.sjf .sjf-range{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* held while a payment goes through (ShowsWall.fund_sheet) */
.sjf .sjf-range:disabled{ cursor: default; }
.sjf .sjf-slider:has(.sjf-range:focus-visible) .sjf-thumb{ outline: 3px solid var(--j-text); outline-offset: 3px; }

/* buying: the pack picked, over the packs' scrubber (ShowsWall.fund_sheet
   .sjf-pick, Marcus's B · Centered): its LOOT in gold, a hairline, its
   price in white, the same size and weight. A pack with a bonus wears
   its bonus percent ("20% Bonus") at its LOOT's shoulder, out of the row's
   width, so the biggest pack and price still fit a phone. */
.sjf .sjf-pick{ display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sjf .sjf-pick-loot{ position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--j-gold); }
.sjf .sjf-pick-loot b{ font-weight: inherit; }
.sjf .sjf-pick .sjf-mark{ width: 20px; height: 25px; }
.sjf .sjf-pick-price{ display: inline-flex; align-items: center; gap: 16px; color: var(--j-text); }
.sjf .sjf-pick-price::before{ content: ''; width: 1px; height: 28px; background: rgba(var(--j-text-rgb), 0.24); }
.sjf .sjf-pick .sjf-inc-pill{ position: absolute; right: 0; bottom: 100%; height: 20px; padding: 0 9px; font-size: 12px; transform: translate(40%, 20%); }
.sjf .sjf-pick + .sjf-slider{ margin-top: 6px; }

/* over the Produce slider, when the LOOT in reach can't take a seat: how
   much more it takes, and Get LOOT (ShowsWall need_note) */
.sjf .sjf-need{ display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 8px 8px 8px 16px; border-radius: 16px; background: rgba(var(--j-gold-rgb), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.55); }
.sjf .sjf-need-t{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sjf .sjf-need-t b{ display: block; overflow: hidden; color: var(--j-gold); font-size: 16px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.sjf .sjf-need-t b .sjf-mark{ display: inline-block; width: 10px; height: 13px; margin-right: 5px; vertical-align: -1px; }
.sjf .sjf-need-t small{ overflow: hidden; color: rgba(var(--j-text-rgb), 0.75); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.sjf .sjf-need-get{ flex: none; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--j-gold); color: var(--j-on-gold); font-size: 14px; font-weight: 700; box-shadow: 0 6px 18px -8px rgba(var(--j-gold-rgb), 0.9); }
.sjf .sjf-need-get:hover{ background: var(--j-gold-bright); }
.sjf .sjf-need + .sjf-slider{ margin-top: 6px; }
.sjf .sjf-name{ display: block; width: 100%; height: 48px; margin-top: 10px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(var(--j-bg-rgb), 0.4); box-shadow: inset 0 0 0 0.5px rgba(var(--j-text-rgb), 0.3); color: var(--j-text); font: inherit; font-size: 16px; }
.sjf .sjf-name::placeholder{ color: rgba(var(--j-text-rgb), 0.6); }
.sjf .sjf-name:focus{ outline: none; box-shadow: inset 0 0 0 1.5px var(--j-gold); }
.sjf .sjf-err{ margin-top: 10px; color: var(--j-red); font-size: 15px; text-align: center; }
.sjf .sjf-form{ margin: 0; }
.sjf .sjf-cta{
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 14px;
  border-radius: 999px; background: var(--j-gold); color: var(--j-on-gold); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 30px -14px rgba(var(--j-gold-rgb), 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.sjf .sjf-cta{ color: var(--j-on-gold); }
.sjf .sjf-cta:hover{ background: var(--j-gold-bright); }
.sjf .sjf-cta:disabled{ opacity: 0.5; cursor: default; }

/* Apple Pay or Google Pay in Continue's place (ShowsWall.fund_sheet,
   shows_j.js mountWallet). No space at all until the browser has a button
   to show (Stripe's frame still lays out at full width, so it can draw
   one), then the button, white on the dark sheet, fading in the first
   time it shows only.
   Continue and the account fields step aside; the form's error line
   stays. While a button may still come (is-wait), or while a fresh one
   loads, its empty place holds Continue's. Changing pack, the button looks
   as it is; a payment going through dims it. */
.sjf .sjf-wallet{ height: 0; overflow: hidden; visibility: hidden; transition: opacity 0.2s ease; }
.sjf .sjf-wallet.is-on, .sjf .sjf-wallet.is-wait{ height: auto; margin-top: 14px; overflow: visible; visibility: visible; }
.sjf .sjf-wallet.is-on.is-new{ animation: sjf-fade 0.24s ease-out; }
.sjf .sjf-wallet.is-on #sjf-wallet, .sjf .sjf-wallet.is-wait #sjf-wallet{ min-height: 50px; }
.sjf .sjf-wallet.is-on #sjf-wallet:empty, .sjf .sjf-wallet.is-wait #sjf-wallet{ border-radius: 999px; background: rgba(var(--j-text-rgb), 0.08); }
.sjf .sjf-wallet.is-paying{ opacity: 0.55; pointer-events: none; }
/* its session moving to another pack (shows_j.js followPack): the slot
   takes no taps, so Apple's sheet never opens at the old price, and looks
   exactly as it is (no dim, no transition) */
.sjf .sjf-wallet.is-moving #sjf-wallet, .sjf .sjf-wallet.is-moving #sjf-wallet *{ pointer-events: none !important; }
/* A wallet button drawn while the sheet is shut (shows_j.js walletLayout):
   Stripe draws only into a place that's laid out (a frame first drawn
   inside display: none stays 0 px tall), so the shut sheet lays out,
   unseen and out of reach, until it's drawn; then it shuts again, the
   button keeping its size for when the packs show. */
.sjf.is-warm, .sjf.is-warm .sjf-buy{ display: block !important; }
.sjf.is-warm, .sjf.is-warm *{ visibility: hidden !important; pointer-events: none !important; }
.sjf .sjf-buy.is-wallet .sjf-form .sjf-cta, .sjf .sjf-buy.is-wallet .sjf-account{ display: none; }
/* buying with no account: the Terms and Privacy line under the button
   (D11), small and quiet */
.sjf .sjf-legal{ margin-top: 10px; color: rgba(var(--j-text-rgb), 0.6); font-size: 12px; line-height: 1.45; text-align: center; text-wrap: balance; }
.sjf .sjf-legal a{ text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(var(--j-text-rgb), 0.35); }
.sjf .sjf-legal a:hover{ color: var(--j-text); }

/* The code step (ShowsWall.fund_sheet .sjf-code): a wallet email that has an
   account. The LOOT added over where the code went, in the more-LOOT note's
   gold box with a green check; then the code in the Join pop-up's six boxes
   (.ljs-code), Continue, Resend code, and quietly, not your email. The
   log-in step (.sjf-login) is the same box over Log in. */
.sjf .sjf-added{ display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 16px 10px 12px; border-radius: 16px; background: rgba(var(--j-gold-rgb), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.55); }
.sjf .sjf-added .sjf-check{ width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--j-green); stroke: var(--j-bg); stroke-width: 3.2; }
.sjf .sjf-added-t{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sjf .sjf-added-t b{ color: var(--j-gold); font-size: 16px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.sjf .sjf-added-to{ color: rgba(var(--j-text-rgb), 0.75); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.sjf .sjf-added-to span{ color: var(--j-text); font-weight: 600; transition: color 0.3s ease; }
.sjf .sjf-added-to.is-resent span{ color: var(--j-gold); }
.sjf .sjf-code .sjf-more:disabled{ opacity: 0.5; cursor: default; }
.sjf .sjf-code-not{ color: rgba(var(--j-text-rgb), 0.55); font-size: 13px; text-align: center; }
/* Welcome back (ShowsWall.fund_sheet .sjf-known): signed out on a browser
   LOOR knows, in the paying part's place under the packs (on a computer,
   the paying column, below). The same box, the account's initial in a gold
   circle where the check would be, Welcome back over the masked address;
   then gold Log in and, quietly, Not you?. Its code step shows the same
   box, with no "already has a LOOR account". */
.sjf .sjf-known-i{ flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--j-gold); color: var(--j-on-gold); font-size: 16px; font-weight: 700; line-height: 1; }
.sjf .sjf-added-to i{ font-style: normal; }
.sjf .sjf-known .sjf-foot{ margin-top: 4px; }
.sjf .sjf-known .sjf-more:disabled{ opacity: 0.5; cursor: default; }

/* the foot: the balance counting down (+ opens into Get More LOOT at
   zero), or Stripe and a way back to spending */
.sjf .sjf-foot{ display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; margin-top: 6px; }
.sjf .sjf-foot-bal, .sjf .sjf-trust{ display: inline-flex; align-items: center; gap: 5px; color: rgba(var(--j-text-rgb), 0.75); font-size: 15px; font-variant-numeric: tabular-nums; }
.sjf .sjf-foot-bal .sjf-mark{ width: 10px; height: 13px; }
.sjf .sjf-trust svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sjf .sjf-plus{
  display: inline-flex; align-items: center; height: 28px; max-width: 28px; padding: 0; border-radius: 999px; overflow: hidden;
  color: var(--j-gold); box-shadow: inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.55);
  transition: max-width 0.35s var(--j-ease), background 0.2s ease, color 0.2s ease;
}
.sjf .sjf-plus-i{ flex: none; width: 28px; text-align: center; font-size: 16px; line-height: 1; }
.sjf .sjf-plus-t{ padding-right: 12px; font-size: 14px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; }
.sjf .sjf-plus.is-out{ max-width: 200px; background: var(--j-gold); color: var(--j-on-gold); box-shadow: 0 6px 18px -8px rgba(var(--j-gold-rgb), 0.8); }
.sjf .sjf-plus.is-out .sjf-plus-i{ width: 24px; padding-left: 4px; }
.sjf .sjf-plus.is-out .sjf-plus-t{ opacity: 1; }
.sjf .sjf-more{ color: var(--j-gold); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--j-gold-rgb), 0.45); }

/* buying signed out: back to the packs, and the account fields */
.sjf .sjf-back{ flex: none; width: 36px; height: 36px; margin-left: -8px; display: grid; place-items: center; border-radius: 50%; }
.sjf .sjf-back svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sjf .sjf-account{ margin-top: 12px; }
.sjf .sjf-account .sjf-name{ margin-top: 8px; }
/* Join Now's first and last name, side by side (DoubloonWeb.JoinSheet) */
.sjf .sjf-names{ display: flex; gap: 8px; }
.sjf .sjf-names .sjf-name{ flex: 1; min-width: 0; }

/* back from a purchase: the LOOT bought glows on the glass and the foot
   spins until it lands; the slider and button rest meanwhile. Then the
   balance counts up with what landed beside it. */
.sjf .sjf-glass.is-landing b{ animation: sjf-glow 1.6s ease-in-out infinite; }
@keyframes sjf-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.sjf .sjf-spend .is-landing{ opacity: 0.45; pointer-events: none; transition: opacity 0.3s ease; }
.sjf .sjf-spin{ width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(var(--j-gold-rgb), 0.25); border-top-color: var(--j-gold); animation: sjf-turn 0.8s linear infinite; }
@keyframes sjf-turn { to { transform: rotate(360deg); } }
.sjf .sjf-landed{ display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(var(--j-green-rgb), 0.16); color: var(--j-green); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; animation: sjf-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes sjf-pop { from { transform: scale(0.6); opacity: 0; } }
.sjf .sjf-note{ margin-top: 2px; color: rgba(var(--j-text-rgb), 0.75); font-size: 14px; text-align: center; }
/* back from a purchase, once it's in: under the bar, over the slider */
.sjf .sjf-spend .sjf-paid{ margin-top: 14px; color: var(--j-text); }
@media (prefers-reduced-motion: reduce) {
  .sjf .sjf-glass.is-landing b, .sjf .sjf-spin, .sjf .sjf-landed{ animation: none; }
  .sjf .sjf-glass, .sjf .sjf-inc, .sjf .sjf-inc-num, .sjf .sjf-inc-pill{ transition: none; }
}

/* No show behind it (DoubloonWeb.LootSheet: the header's +, /profile, /x):
   a gold glow in the card's place, the LOOT on glass at its centre. */
.sjf .sjf-cover.is-bare{
  aspect-ratio: 16 / 7;
  background:
    radial-gradient(120% 95% at 50% 100%, rgba(var(--j-gold-rgb), 0.34), rgba(var(--j-gold-rgb), 0.07) 55%, transparent 78%),
    var(--j-surface-2);
}
.sjf .sjf-cover.is-bare .sjf-glass{ bottom: 50%; height: 56px; padding: 0 20px; }
.sjf .sjf-cover.is-bare .sjf-glass b{ font-size: 28px; }
.sjf .sjf-cover.is-bare .sjf-glass .sjf-mark{ width: 14px; height: 18px; }
.sjf .sjf-cover.is-bare .sjf-inc{ --div: 16px; }
.sjf .sjf-cover.is-bare .sjf-inc.is-on{ margin-left: 8px; }
.sjf .sjf-cover.is-bare .sjf-inc-body::before{ height: 30px; }
.sjf .sjf-cover.is-bare .sjf-inc-num{ font-size: 23px; }
.sjf .sjf-cover.is-bare .sjf-inc-pill{ height: 20px; padding: 0 9px; font-size: 11px; }
.sjf .sjf-cover.is-bare .sjf-glass .sjf-inc .sjf-mark{ width: 12px; height: 15px; }
/* the pill and the capsule centred in the card together */
.sjf .sjf-cover.is-bare .sjf-glass:has(.sjf-inc.is-on){ transform: translate(-50%, calc(50% + 5px)); }
.lsf .sjf-cover.is-bare + .sjf-buy{ margin-top: 6px; }
/* Back from the weekly LOOT email (ShowsWall.weekly_loot): the bare card,
   one line, by when, one button. */
.wls .sjf-panel:focus{ outline: none; }
.wls .wls-line{ margin-top: 22px; color: var(--j-text); font-size: 17px; line-height: 1.4; text-align: center; }
.wls .wls-line + .sjf-note{ margin-top: 4px; }
/* It's up as the page loads, so iOS 26 Safari tints the strip under its
   toolbar with it once the film grain (app.css body::after) steps aside:
   on phones it stays a pop-up over /shows rather than going full screen
   like the sheets opened by a tap. */
html.wls-open body::after{ display: none; }
@media (max-width: 767px) {
  .sjf.wls .sjf-panel{
    top: auto; max-height: calc(100svh - 16px); display: block; padding-top: 52px; border-radius: 24px 24px 0 0;
    box-shadow: 0 -1px 0 rgba(var(--j-text-rgb), 0.14), 0 -30px 80px rgba(0, 0, 0, 0.6);
  }
  .sjf.wls .sjf-grab{ display: block; }
  /* While the cookie notice's corner chip is up (cookie-consent.css, cookieconsent's
     show--consent), the pop-up's button keeps clear of it. */
  html.show--consent.wls-open .sjf.wls .sjf-panel{ padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  html.sjf-lock.wls-open::after{ display: none; }
  html.sjf-lock.wls-open .sj-root{ z-index: 20; isolation: isolate; }
}
/* phones: the biggest pack and its bonus fit the bare card with room */
@media (max-width: 420px){
  .sjf .sjf-cover.is-bare .sjf-glass{ --gap: 7px; height: 52px; padding: 0 16px; }
  .sjf .sjf-cover.is-bare .sjf-glass b{ font-size: 24px; }
  .sjf .sjf-cover.is-bare .sjf-glass .sjf-mark{ width: 12px; height: 16px; }
  .sjf .sjf-cover.is-bare .sjf-inc{ --div: 13px; }
  .sjf .sjf-cover.is-bare .sjf-inc.is-on{ margin-left: 6px; }
  .sjf .sjf-cover.is-bare .sjf-inc-body::before{ height: 26px; }
  .sjf .sjf-cover.is-bare .sjf-inc-num{ font-size: 20px; }
  .sjf .sjf-cover.is-bare .sjf-glass .sjf-inc .sjf-mark{ width: 11px; height: 14px; }
}
@media (max-width: 380px){
  .sjf .sjf-cover.is-bare .sjf-glass{ padding: 0 14px; }
  .sjf .sjf-cover.is-bare .sjf-glass b{ font-size: 22px; }
  .sjf .sjf-cover.is-bare .sjf-inc-num{ font-size: 19px; }
}
.lsf .sjf-note{ display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 6px; }

/* done, share first: the place earned as a title, the gold Copy link to
   share, the ask under it, and Done quietly */
.sjf .sjf-won{ display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 14px; text-align: center; }
.sjf .sjf-won-k{ color: var(--j-green); font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.sjf .sjf-won-t{ font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; }
.sjf .sjf-won-t b{ color: var(--j-gold); font-weight: 800; }
.sjf .sjf-won-t b:empty{ display: none; }
.sjf .sjf-share-btn{ gap: 8px; }
.sjf .sjf-share-btn svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sjf .sjf-share-t{ margin-top: 8px; color: rgba(var(--j-text-rgb), 0.75); font-size: 14px; text-align: center; text-wrap: balance; }
.sjf .sjf-quiet{ display: block; min-height: 40px; margin: 2px auto 0; padding: 0 18px; color: rgba(var(--j-text-rgb), 0.8); font-size: 16px; font-weight: 500; }
.sjf .sjf-quiet:hover{ color: var(--j-text); }

/* ── The credits crawl (ShowsWall .sjf-crawl, shows_j.js drawCrawl) ──
   The show's whole credits as film end credits, centred: each seat's title
   over its holder, then Special Thanks. The viewer's name is gold; each
   name glides from line to line, and the list scrolls to keep the viewer
   just above the middle, fading out at its top and foot. */
.sjf .sjf-crawl{ position: relative; overflow: hidden; margin-top: 14px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 84%, transparent); }
.sjf .sjf-crawl-track{ position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; padding: 16px 0 24px; text-align: center; transition: transform 0.6s var(--j-ease); }
.sjf .sjf-cr-slot{ display: flex; flex-direction: column; align-items: center; width: 100%; }
.sjf .sjf-cr-seat{ gap: 1px; padding: 5px 0; }
.sjf .sjf-cr-t{ font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; line-height: 1.3; text-transform: uppercase; color: var(--j-gold); }
.sjf .sjf-cr-who{ display: block; max-width: 100%; height: 25px; }
.sjf .sjf-cr-seat .sjf-cr-who{ height: 28px; }
.sjf .sjf-cr-p{ position: relative; display: inline-block; max-width: 100%; transition: transform 0.6s var(--j-ease); }
.sjf .sjf-cr-p.is-you{ z-index: 2; }
.sjf .sjf-cr-pi{ display: block; }
.sjf .sjf-cr-nm{ display: inline-block; max-width: 100%; overflow: hidden; color: rgba(var(--j-text-rgb), 0.8); font-size: 16px; font-weight: 500; line-height: 25px; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.sjf .sjf-cr-seat .sjf-cr-nm{ color: var(--j-text); font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 28px; }
.sjf .sjf-cr-p.is-you .sjf-cr-nm{ color: var(--j-gold); font-weight: 700; }
.sjf .sjf-cr-seat .sjf-cr-p.is-you .sjf-cr-nm{ font-weight: 800; }
.sjf .sjf-cr-open{ color: rgba(var(--j-text-rgb), 0.55); font-size: 16px; font-style: italic; line-height: 28px; }
.sjf .sjf-cr-h{ margin-top: 10px; padding: 12px 20px 4px; border-top: 1px solid var(--j-line); color: rgba(var(--j-text-rgb), 0.55); font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.sjf .sjf-cr-more{ padding: 2px 0; color: rgba(var(--j-text-rgb), 0.5); font-size: 13px; font-variant-numeric: tabular-nums; }
/* up a place: the name pops, the one it passed dips, the seat's title glows */
.sjf .sjf-cr-p.is-pop .sjf-cr-pi{ animation: sjf-cr-pop 0.55s cubic-bezier(0.3, 1.3, 0.5, 1); }
.sjf .sjf-cr-p.is-bump .sjf-cr-pi{ animation: sjf-cr-bump 0.6s ease-out; }
.sjf .sjf-cr-slot.is-take .sjf-cr-t{ animation: sjf-cr-take 0.9s ease-out; }
@keyframes sjf-cr-pop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes sjf-cr-bump { 0% { opacity: 0.3; } 100% { opacity: 1; } }
@keyframes sjf-cr-take { 0% { color: var(--j-gold-bright); text-shadow: 0 0 0 rgba(var(--j-gold-rgb), 0); } 25% { text-shadow: 0 0 16px rgba(var(--j-gold-rgb), 0.95); } 100% { text-shadow: 0 0 0 rgba(var(--j-gold-rgb), 0); } }
@media (prefers-reduced-motion: reduce) {
  .sjf .sjf-crawl-track, .sjf .sjf-cr-p{ transition: none; }
  .sjf .sjf-cr-p.is-pop .sjf-cr-pi, .sjf .sjf-cr-p.is-bump .sjf-cr-pi, .sjf .sjf-cr-slot.is-take .sjf-cr-t{ animation: none; }
}
/* the crawl names the place, so the glass doesn't */
.sjf.has-crawl .sjf-badge{ display: none; }

/* Phones: every sheet full screen (the fund sheet, the LOOT picker, Join).
   iOS 26 Safari paints the page itself in the strip under its floating
   toolbar, past where any fixed layer reaches, and only tints it to match
   a sheet that was up when the page loaded or scrolled: opened by a tap,
   the page shows through it. So while a sheet is open a solid layer in the
   sheet's colour covers the whole page, in the page itself (not fixed), and
   the sheets sit on it. Stripe's own pop-ups go over it all. */
@media (max-width: 767px) {
  .sjf .sjf-panel{
    top: 0; max-height: none; display: flex; flex-direction: column;
    padding-top: calc(16px + env(safe-area-inset-top)); border-radius: 0; box-shadow: none;
  }
  /* Join's glass edge (below) would frame the screen; its glass fades into
     the cover at the foot like the rest */
  .sjf.ljs .sjf-panel{
    box-shadow: none;
    background: linear-gradient(180deg, rgba(64, 62, 102, 0.62), rgba(32, 31, 56, 0.74) calc(100% - 140px), #0b0b16 calc(100% - 24px));
  }
  .sjf .sjf-grab{ display: none; }
  /* the show's colour fades out into the cover at the foot, so no seam
     where the sheet meets it under the toolbar */
  .sjf .sjf-ambient::after{
    background: linear-gradient(180deg, rgba(var(--j-bg-rgb), 0.05), rgba(var(--j-bg-rgb), 0.45) 55%, rgba(var(--j-bg-rgb), 0.72) calc(100% - 140px), #0b0b16 calc(100% - 24px));
  }
  html.sjf-lock{ position: relative; }
  html.sjf-lock::after{
    content: ''; position: absolute; inset: 0; z-index: 9997; background: #0b0b16; pointer-events: none;
    animation: sjf-fade 0.24s ease-out;
  }
}

/* 768+: a centred card */
@media (min-width: 768px) {
  .sjf .sjf-panel{
    left: 50%; right: auto; top: 50%; bottom: auto; width: 420px;
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 18px 24px calc(16px + var(--kb, 0px));
    transform: translate(-50%, -50%); border-radius: 24px;
    box-shadow: inset 0 0 0 0.5px rgba(var(--j-text-rgb), 0.2), 0 40px 120px rgba(0, 0, 0, 0.7);
    animation-name: sjf-in;
  }
  @keyframes sjf-in { from { transform: translate(-50%, calc(-50% + 16px)); opacity: 0; } }
  .sjf .sjf-grab{ display: none; }
}

/* Producing a show with credits (the crawl): phones and small tablets get
   the sheet full screen, the crawl taking the room between the art and the
   slider (the sheet scrolls if it can't fit); 900+ gets a wide pop-up over
   the page, the art and controls left, the crawl in its own column right. */
@media (max-width: 899px) {
  .sjf.has-crawl .sjf-panel{
    top: 0; left: 0; right: 0; bottom: 0; width: auto; max-height: none; transform: none;
    display: flex; flex-direction: column; padding-top: calc(16px + env(safe-area-inset-top)); border-radius: 0;
    animation-name: sjf-up;
  }
  .sjf.has-crawl .sjf-grab{ display: none; }
  .sjf.has-crawl .sjf-crawl{ flex: 1 1 auto; min-height: 180px; }
}
@media (min-width: 900px) {
  .sjf.has-crawl .sjf-panel{
    display: grid; width: 880px; padding: 20px 28px 16px; column-gap: 32px;
    grid-template-columns: 440px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    grid-template-areas: "head head" "cover crawl" "fund crawl" "spend crawl" "buy crawl";
  }
  .sjf.has-crawl .sjf-head{ grid-area: head; }
  .sjf.has-crawl .sjf-cover{ grid-area: cover; }
  .sjf.has-crawl .sjf-fund{ grid-area: fund; }
  .sjf.has-crawl .sjf-spend{ grid-area: spend; }
  .sjf.has-crawl .sjf-buy{ grid-area: buy; }
  /* in the packs' place, which they replace */
  .sjf.has-crawl .sjf-code, .sjf.has-crawl .sjf-login{ grid-area: buy; }
  .sjf.has-crawl .sjf-crawl{
    grid-area: crawl; min-height: 440px; margin: 0; border-radius: 18px;
    background: rgba(var(--j-text-rgb), 0.03); box-shadow: inset 0 0 0 1px var(--j-line);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  }
  .sjf.has-crawl .sjf-crawl-track{ padding: 14px 0 16px; }
  .sjf.has-crawl .sjf-cr-seat{ padding: 3px 0; }
  .sjf.has-crawl .sjf-cr-h{ margin-top: 8px; padding-top: 10px; }
  .sjf.has-crawl .sjf-cr-who{ height: 23px; }
  .sjf.has-crawl .sjf-cr-nm{ line-height: 23px; }
  .sjf.has-crawl .sjf-cr-seat .sjf-cr-who{ height: 28px; }
  .sjf.has-crawl .sjf-cr-seat .sjf-cr-nm{ line-height: 28px; }
}

/* Buying on a computer: one screen (ShowsWall.fund_sheet .sjf-pay,
   shows_j.js onePay; Marcus's B · one screen, 2026-11-03). The art, the
   fill, the pack picked and its scrubber, then the credits in a short box,
   on the left; paying on the right: Pay and its price, who's paying, the
   wallet buttons stacked, "or pay by card", the card form (the name for
   the credits, our Email when signed out, then Stripe's own fields), Pay,
   and the foot. Without a crawl (a tip, a show not crowdfunded on LOOR)
   the left is just the art and the packs. Phones see only its card form
   (below), with no name. */
.sjf .sjf-pay-h, .sjf .sjf-pay-who, .sjf .sjf-pay-hint, .sjf .sjf-or, .sjf .sjf-card{ display: none; }
/* A phone's card form (shows_j.js phoneCard; Marcus, 2026-11-04): the
   computer's, in the wallet button's place under the packs, at the phone
   sheet's width: who's paying when signed in, our Email when signed out,
   Stripe's fields (their room, quietly, until its frame is drawn), Pay, the
   Terms line, then the foot. Continue and its account fields step aside. */
.sjf .sjf-buy.is-card .sjf-form{ display: none; }
.sjf .sjf-buy.is-card .sjf-pay-who{ display: block; margin-top: 14px; overflow: hidden; color: rgba(var(--j-text-rgb), 0.65); font-size: 13.5px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sjf .sjf-buy.is-card .sjf-card{ display: block; margin-top: 14px; }
.sjf .sjf-buy.is-card .sjf-card .sjf-name{ margin: 0 0 12px; }
.sjf .sjf-buy.is-card #sjf-card:empty{ min-height: 250px; border-radius: 14px; background: rgba(var(--j-text-rgb), 0.04); }
.sjf .sjf-buy.is-card .sjf-card .sjf-cta{ margin-top: 16px; }
/* Card picked, the form takes the focus (no keyboard): no ring round it */
.sjf .sjf-card:focus{ outline: none; }
@media (min-width: 900px) {
  /* 960 wide, or the window less 16 a side (a window 900 to 990 wide):
     the art's column gives first, then paying's */
  .sjf.is-pay .sjf-panel{
    display: grid; width: 960px; width: min(960px, calc(100vw - 32px)); padding: 20px 28px 16px; column-gap: 32px;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr);
    grid-template-areas: "head head" "cover pay" "fund pay" "need pay" "pick pay" "packs pay" "crawl pay";
  }
  .sjf.is-pay .sjf-head{ grid-area: head; }
  .sjf.is-pay .sjf-cover{ grid-area: cover; }
  .sjf.is-pay .sjf-fund{ grid-area: fund; }
  /* the packs' own parts go to the left, paying to the right; over the
     sheet's colour like every other part */
  .sjf.is-pay .sjf-buy{ display: contents; }
  .sjf.is-warm.is-pay .sjf-buy{ display: contents !important; }
  .sjf.is-pay .sjf-buy > *{ position: relative; z-index: 1; }
  .sjf.is-pay .sjf-need{ grid-area: need; }
  .sjf.is-pay .sjf-pick{ grid-area: pick; }
  .sjf.is-pay .sjf-slider.is-packs{ grid-area: packs; }
  .sjf.is-pay .sjf-crawl{ grid-area: crawl; min-height: 0; height: 205px; margin: 10px 0 0; }
  .sjf.is-pay .sjf-pay{ grid-area: pay; align-self: start; }
  /* Welcome back stands in the paying column, from its top */
  .sjf.is-pay .sjf-known{ grid-area: pay; align-self: start; }
  .sjf.is-pay .sjf-known .sjf-added{ margin-top: 0; }
  .sjf.is-pay .sjf-form, .sjf.is-pay .sjf-wallet .sjf-legal{ display: none; }

  .sjf.is-pay .sjf-pay-h{ display: block; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
  .sjf.is-pay .sjf-pay-who{ display: block; margin-top: 4px; overflow: hidden; color: rgba(var(--j-text-rgb), 0.65); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
  .sjf.is-pay .sjf-wallet.is-on, .sjf.is-pay .sjf-wallet.is-wait{ margin-top: 12px; }
  /* room for two buttons while they may still come, so nothing jumps */
  .sjf.is-pay .sjf-wallet.is-on #sjf-wallet:empty, .sjf.is-pay .sjf-wallet.is-wait #sjf-wallet{ position: relative; min-height: 110px; border-radius: 0; background: none; }
  .sjf.is-pay .sjf-wallet.is-on #sjf-wallet:empty::before, .sjf.is-pay .sjf-wallet.is-wait #sjf-wallet::before,
  .sjf.is-pay .sjf-wallet.is-on #sjf-wallet:empty::after, .sjf.is-pay .sjf-wallet.is-wait #sjf-wallet::after{
    content: ''; position: absolute; left: 0; right: 0; z-index: -1; height: 50px; border-radius: 999px; background: rgba(var(--j-text-rgb), 0.08);
  }
  .sjf.is-pay .sjf-wallet.is-on #sjf-wallet:empty::before, .sjf.is-pay .sjf-wallet.is-wait #sjf-wallet::before{ top: 0; }
  .sjf.is-pay .sjf-wallet.is-on #sjf-wallet:empty::after, .sjf.is-pay .sjf-wallet.is-wait #sjf-wallet::after{ top: 60px; }
  .sjf.is-pay .sjf-pay-hint{ display: block; margin-top: 8px; color: rgba(var(--j-text-rgb), 0.6); font-size: 12.5px; text-align: center; }
  .sjf.is-pay .sjf-or{ display: flex; align-items: center; gap: 12px; margin-top: 12px; color: rgba(var(--j-text-rgb), 0.6); font-size: 14px; }
  .sjf.is-pay .sjf-or::before, .sjf.is-pay .sjf-or::after{ content: ''; flex: 1; height: 1px; background: rgba(var(--j-text-rgb), 0.16); }
  .sjf.is-pay .sjf-card{ display: block; margin-top: 12px; }
  .sjf.is-pay .sjf-card .sjf-name{ margin: 0 0 12px; }
  /* Stripe's fields, until its frame is drawn: their room, quietly */
  .sjf.is-pay #sjf-card:empty{ min-height: 300px; border-radius: 14px; background: rgba(var(--j-text-rgb), 0.04); }
  .sjf.is-pay .sjf-card .sjf-cta{ margin-top: 16px; }
  .sjf.is-pay .sjf-pay .sjf-foot{ margin-top: 8px; }
}
/* A window not tall enough for all of it (a laptop's 768 or 800, less
   the browser's bars): the paying column scrolls on its own, as tall as
   the sheet can be (the window less 48, less the sheet's padding and
   head: 134), so the art, the packs and the credits always show (Marcus's
   rule). The art gives up some height first (248 at most, 150 at least),
   then the credits take what's left of the window (205 at most, 96 at
   least; the fill, the pack and the slider over them: 300 with the rest).
   Shorter still than 520, the whole sheet scrolls, as before. */
@media (min-width: 900px) and (min-height: 520px) and (max-height: 900px) {
  .sjf.is-pay .sjf-cover{
    aspect-ratio: auto;
    height: clamp(150px, calc(100vh - 440px), 248px); height: clamp(150px, calc(100dvh - 440px), 248px);
  }
  .sjf.is-pay .sjf-crawl{
    height: clamp(96px, calc(100vh - 300px - clamp(150px, calc(100vh - 440px), 248px)), 205px);
    height: clamp(96px, calc(100dvh - 300px - clamp(150px, calc(100dvh - 440px), 248px)), 205px);
  }
  .sjf.is-pay .sjf-pay{
    max-height: calc(100vh - 134px); max-height: calc(100dvh - 134px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(var(--j-text-rgb), 0.25) transparent;
  }
}

/* Join Now (DoubloonWeb.JoinSheet): the same sheet as frosted glass,
   lighter than the page under it so it stands out over the dark, with the
   LOOT picker's gold card and LOOR.tv on its glass. */
.ljs .sjf-scrim{ background: rgba(3, 3, 8, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ljs .sjf-panel{
  background: linear-gradient(180deg, rgba(64, 62, 102, 0.62), rgba(32, 31, 56, 0.74));
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(var(--j-text-rgb), 0.22), 0 -30px 80px rgba(0, 0, 0, 0.6);
}
.ljs .sjf-name{ background: rgba(var(--j-bg-rgb), 0.32); box-shadow: inset 0 0 0 0.5px rgba(var(--j-text-rgb), 0.36); }
.ljs .sjf-cover.is-bare{ margin-bottom: 4px; }
.ljs .sjf-glass{ gap: 2px; }
.ljs .ljs-logo{
  display: block; height: 24px; aspect-ratio: 195.49 / 67.49; background: var(--j-text);
  -webkit-mask: url(/images/logos/logotype-6268b15d58f01d2500d874eabb00adbf.svg?vsn=d) center / contain no-repeat;
  mask: url(/images/logos/logotype-6268b15d58f01d2500d874eabb00adbf.svg?vsn=d) center / contain no-repeat;
}
.ljs .ljs-logo.is-tv{
  aspect-ratio: 119.69 / 67.49; background: var(--j-gold);
  -webkit-mask-image: url(/images/logos/logotype-tv-b92b7b264547d89378d57ebb6abb0aa9.svg?vsn=d);
  mask-image: url(/images/logos/logotype-tv-b92b7b264547d89378d57ebb6abb0aa9.svg?vsn=d);
}
@media (min-width: 768px) {
  .ljs .sjf-panel{
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(var(--j-text-rgb), 0.24), 0 0 90px rgba(var(--j-gold-rgb), 0.14), 0 40px 120px rgba(0, 0, 0, 0.7);
  }
}
/* A sheet's Log in opens Join over it (the fund sheet, the LOOT picker). */
.ljs .sjf-scrim{ z-index: 10000; }
.ljs .sjf-panel{ z-index: 10001; }
.ljs .sjf-more:disabled{ opacity: 0.5; cursor: default; }
/* Use your password, under the step that asks for just the address: there,
   not the way on. */
.ljs .sjf-more.is-quiet{ color: rgba(var(--j-text-rgb), 0.72); text-decoration-color: rgba(var(--j-text-rgb), 0.32); }

/* Log in without the password (JoinController.send_code/2): "or", then
   Email me a code outlined in gold, under the password's Log in. */
.ljs .ljs-or{ display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; color: rgba(var(--j-text-rgb), 0.55); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ljs .ljs-or::before, .ljs .ljs-or::after{ content: ''; flex: 1; height: 1px; background: rgba(var(--j-text-rgb), 0.18); }
.ljs .ljs-mail{
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px;
  border-radius: 999px; background: rgba(var(--j-gold-rgb), 0.08); color: var(--j-gold); font-size: 17px; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--j-gold), 0 0 26px -6px rgba(var(--j-gold-rgb), 0.5);
}
.ljs .ljs-mail:hover{ background: rgba(var(--j-gold-rgb), 0.16); }
.ljs .ljs-mail:disabled{ opacity: 0.5; cursor: default; }
.ljs .ljs-mail svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The code step: where the code went, then the code in six boxes. The boxes
   only draw the one field laid over them, whose own text is hidden: a tap,
   the keyboard, a paste or the phone's code suggestion all go to it. The
   fund sheet's code step (.sjf-code, below) draws its code the same way. */
.sjf .ljs-to{ margin-top: 14px; color: rgba(var(--j-text-rgb), 0.75); font-size: 15px; text-align: center; overflow-wrap: anywhere; }
.sjf .ljs-to b{ color: var(--j-text); font-weight: 600; transition: color 0.3s ease; }
.sjf .ljs-to.is-resent b{ color: var(--j-gold); }
.sjf .ljs-code{ position: relative; display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.sjf .ljs-box{
  flex: 0 1 44px; height: 56px; display: grid; place-items: center; border-radius: 12px;
  background: rgba(var(--j-bg-rgb), 0.42); box-shadow: inset 0 0 0 1px rgba(var(--j-text-rgb), 0.16);
  font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* three and three, as the email writes it */
.sjf .ljs-box:nth-of-type(4){ margin-left: 11px; }
.sjf .ljs-box.is-at{ box-shadow: inset 0 0 0 2px var(--j-gold); }
.sjf .ljs-code-in{
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px;
}
.sjf .ljs-code-in:focus, .sjf .ljs-code-in:focus-visible{ outline: none; }
.sjf .ljs-code-in::selection{ background: transparent; }
.sjf .ljs-code-in:-webkit-autofill{ -webkit-text-fill-color: transparent; transition: background-color 600000s 0s; }

/* The welcome after a code log-in (LayoutView.welcome_toast/1): a pill in
   the header band, just left of the header's LOOT (welcomeToast,
   join_sheet.js), centred on the header's row. Over every sheet, so it
   still shows when the log-in comes back to an open one. */
.ljs-toast{
  position: fixed; top: 12px; right: 16px; z-index: 10002;
  display: flex; align-items: center; gap: 10px; height: 40px; max-width: calc(100vw - 32px); padding: 0 18px 0 8px;
  border-radius: 999px; background: rgba(15, 15, 30, 0.94); color: #f2ede4;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45);
  font: 700 16px/1 'Inter', system-ui, -apple-system, sans-serif; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer;
  animation: ljs-toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ljs-toast-ok{ flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #21e458; }
.ljs-toast-ok svg{ display: block; width: 15px; height: 15px; fill: none; stroke: #07070f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ljs-toast-t{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@keyframes ljs-toast-in { from { opacity: 0; transform: translateY(-6px); } }
/* "Account made" over the fund sheet (shows_j.js accountMade): two lines,
   across the top of a phone, top right on a wider screen. */
.ljs-toast.is-made{ left: 16px; height: auto; padding: 12px 18px 12px 12px; border-radius: 18px; white-space: normal; line-height: 1.3; }
.ljs-toast.is-made .ljs-toast-t{ overflow: visible; overflow-wrap: anywhere; }
.ljs-toast.is-made .ljs-toast-t b{ display: block; }
.ljs-toast-sub{ display: block; margin-top: 3px; font-size: 13px; font-weight: 400; opacity: 0.75; }
@media (min-width: 768px) { .ljs-toast.is-made{ left: auto; max-width: 420px; } }
@media (min-width: 768px) { .ljs-toast{ top: 14px; } }
@media (prefers-reduced-motion: reduce) { .ljs-toast{ animation: none; } }