/**
 * Lantern — single shared card system stylesheet.
 * Source of truth for .exploreCard, rail/opened, badges, media, detail overlay.
 * See docs/LANTERN_SYSTEM_CONTEXT.md §10. No page may define structural card-shell CSS.
 *
 * Production horizontal rails: `.wrap.lanternContent .lanternScroller` (explore, games, missions).
 * Rail spacing + card height/media + horizontal scrollbar thickness: `--lantern-rail-*` in lantern-header.css; fixed rail **width**: `--lantern-rail-card-outer-width` in this file.
 * No row-specific card width, media min-height, or scroller gap/padding on those pages.
 */

/* Prompt #7 — Archivo Narrow for canonical 3-row overlay (weights actually used). */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@600;700&display=swap");

:root{
  /* Contract v2 — fixed 280px 16:9 landscape compact faces */
  --lantern-card-width: 280px;
  --lantern-card-aspect-ratio: 16 / 9;
  --lantern-card-gap: 1rem;
  /* Legacy alias — width only; height derives from aspect ratio */
  --lantern-rail-card-outer-width: var(--lantern-card-width);
  /* Opened post / Contribute preview — inner column (same as legacy Explore detail modal max-width). */
  --lantern-opened-content-max-width: 520px;
  /* Prompt #168 — overlay scrolls; modal card is natural height (supersedes #9/#148/#219 viewport-fit). */
  --lantern-opened-modal-max-width: 560px;
  --lantern-opened-modal-top-gap: 32px;
  --lantern-opened-modal-radius: 18px;
  --lantern-opened-modal-pad-x: 18px;
  /* Contribute Studio desktop canvas — CENTER page-centered at 50vw; side panes edge-anchored. */
  --lantern-studio-center-width: 640px;
  --lantern-studio-center-half: 320px;
  --lantern-studio-col-gap: 20px;
  --lantern-studio-preview-min-scale: 0.58;
  --lantern-studio-grid-card-max: 200px;
  /* Touch/coarse stacked Studio below this width; fine-pointer desktop ignores width for three-pane canvas. */
  --lantern-studio-touch-stack-max: 1199px;
  /* Identity row (Explore rail, feed posts, news, missions, detail overlay): avatar + first name — one contract. */
  --lantern-card-identity-avatar-size: 32px;
  --lantern-card-identity-gap: 12px;
  --lantern-card-identity-name-size: 22px;
  /* Initials / monogram inside the avatar circle — scales if --lantern-card-identity-avatar-size changes */
  --lantern-card-identity-initials-size: calc(var(--lantern-card-identity-avatar-size) * 0.47);
  /* Prompt #217 — shared author-avatar size for top ticker + card LLHC metadata chip */
  --lantern-content-author-avatar-size: 28px;
  /* Prompt #7 — compact LLHC portrait spanning Rows 2+3 (desktop ~32px) */
  --lantern-card-overlay-avatar-size: 32px;
  /* Prompt #7 — one family for all three overlay text rows */
  --lantern-card-overlay-font: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  /* Prompt #7 — title→meta separation (descender clearance; not zero) */
  --lantern-card-overlay-title-meta-gap: 3px;
}

/* ===== CONTRACT V2 — ONE COMPACT PRODUCTION CARD FACE ===== */
.exploreCard.lanternCanonicalCard {
  width: var(--lantern-card-width);
  min-width: var(--lantern-card-width);
  max-width: var(--lantern-card-width);
  aspect-ratio: var(--lantern-card-aspect-ratio);
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  position: relative;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: var(--r, 14px);
  background: #0a0f18;
  flex: 0 0 var(--lantern-card-width);
}
.exploreCard.lanternCanonicalCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.lanternCanonicalCardFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.lanternCanonicalCardImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.lanternCanonicalCardFallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lanternCanonicalCardOverlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* Prompt #7 — keep three-row stack near lower third without clipping title descenders */
  max-height: 40%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.lanternCanonicalCardGradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.55) 26%,
    rgba(0, 0, 0, 0.14) 52%,
    rgba(0, 0, 0, 0) 72%
  );
  pointer-events: none;
}
.lanternCanonicalCardCaption {
  position: relative;
  z-index: 1;
  /* Prompt #7 — nestle + real title→meta gap (descender safety) */
  padding: 0 10px 4px 6px;
  padding-right: 44px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--lantern-card-overlay-title-meta-gap, 3px);
  align-items: stretch;
  font-family: var(--lantern-card-overlay-font);
}
.lanternCanonicalCardTitle {
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: var(--lantern-card-overlay-font);
  font-size: 18px;
  font-weight: 700;
  /* Prompt #7 — line box tall enough for g/y/p/q/j; never share ink with avatar */
  line-height: 1.2;
  max-height: 1.2em;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}
/* Prompt #225/#7 — Rows 2+3: one avatar column spanning both text rows; entirely BELOW Row 1 */
.lanternCanonicalCardMetaGrid {
  display: grid;
  grid-template-columns: var(--lantern-card-overlay-avatar-size, 32px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 6px;
  row-gap: 0;
  align-items: start;
  min-width: 0;
  width: 100%;
  flex: 0 0 auto;
  position: relative;
  z-index: 0;
  overflow: hidden;
  /* Structural floor under headline — meta/avatar cannot paint into Row 1 */
  margin-top: 0;
}
.lanternCanonicalCardMetaGrid--noAvatar {
  grid-template-columns: minmax(0, 1fr);
}
.lanternCanonicalCardMetaGrid > .identity-chip {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: start;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lantern-card-overlay-avatar-size, 32px);
  height: var(--lantern-card-overlay-avatar-size, 32px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28);
}
.lanternCanonicalCardMetaGrid > .identity-chip .exploreCardAvatarImg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.lanternCanonicalCardMetaGrid > .lanternCanonicalCardMetaRow {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-width: 0;
  min-height: 0;
}
.lanternCanonicalCardMetaGrid > .lanternCanonicalCardDescRow {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  min-width: 0;
}
.lanternCanonicalCardMetaGrid--noAvatar > .lanternCanonicalCardMetaRow,
.lanternCanonicalCardMetaGrid--noAvatar > .lanternCanonicalCardDescRow {
  grid-column: 1;
}
.lanternCanonicalCardMeta,
.lanternCanonicalCardMetaRow {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  color: rgba(255,255,255,.92);
  font-family: var(--lantern-card-overlay-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  /* Prompt #5 — never mix overflow-x:hidden + overflow-y:visible (browsers force auto → ▲/▼ scroll buttons) */
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
  min-width: 0;
  width: 100%;
}
.lanternCanonicalCardMeta .identity-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lantern-content-author-avatar-size, 28px);
  height: var(--lantern-content-author-avatar-size, 28px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28);
  align-self: center;
}
.lanternCanonicalCardMeta .exploreCardAvatarImg {
  width: var(--lantern-content-author-avatar-size, 28px);
  height: var(--lantern-content-author-avatar-size, 28px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.lanternCanonicalCardAuthor,
.lanternCanonicalCardDate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  max-width: 52%;
}
.lanternCanonicalCardDesc,
.lanternCanonicalCardDescRow {
  min-width: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--lantern-card-overlay-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  color: rgba(255,255,255,.9);
  opacity: .95;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
}
.lanternCanonicalCardMetaSeparator {
  flex-shrink: 0;
  opacity: .75;
}
/*
 * Prompt #6/#7 — phone viewports keep 3-row MetaGrid; smaller avatar; descender-safe title gap.
 * Desktop geometry tokens stay at :root defaults; only narrow viewports override.
 */
@media (max-width: 480px) {
  :root {
    --lantern-card-overlay-avatar-size: 28px;
    --lantern-card-overlay-title-meta-gap: 3px;
  }
  .lanternCanonicalCardOverlay {
    max-height: 50%;
    overflow: hidden;
  }
  .lanternCanonicalCardCaption {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    gap: var(--lantern-card-overlay-title-meta-gap, 3px);
    padding: 0 10px 4px 6px;
    padding-right: 44px;
    overflow: hidden;
  }
  .lanternCanonicalCardTitle {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--lantern-card-overlay-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    max-height: 1.2em;
    flex: 0 0 auto;
  }
  .lanternCanonicalCardMetaGrid {
    display: grid !important;
    grid-template-columns: var(--lantern-card-overlay-avatar-size, 28px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 0;
    align-items: start;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .lanternCanonicalCardMetaGrid--noAvatar {
    grid-template-columns: minmax(0, 1fr);
  }
  .lanternCanonicalCardMetaGrid > .identity-chip {
    display: inline-flex !important;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: start;
    width: var(--lantern-card-overlay-avatar-size, 28px);
    height: var(--lantern-card-overlay-avatar-size, 28px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    flex: 0 0 auto;
  }
  .lanternCanonicalCardMetaGrid > .identity-chip .exploreCardAvatarImg {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
  }
  .lanternCanonicalCardMetaGrid > .lanternCanonicalCardMetaRow {
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: auto;
    overflow: hidden;
  }
  .lanternCanonicalCardMetaGrid > .lanternCanonicalCardDescRow {
    display: block !important;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lanternCanonicalCardMeta,
  .lanternCanonicalCardMetaRow,
  .lanternCanonicalCardDesc,
  .lanternCanonicalCardDescRow {
    font-family: var(--lantern-card-overlay-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
  }
}
.lanternCanonicalCardBadgeLayer {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 44px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
.lanternCanonicalCardTypeBadge,
.lanternCanonicalCardStateBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 10px;
  background: rgba(0,0,0,.58);
  color: #fff;
  text-shadow: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* Missions library cards (Prompt #80/#121): type/category chips are gone from artwork.
   Progress/state chips (STARTED / COMPLETED / NEEDS CHANGES) stay upper-right only. */
.exploreCard--missionsLibrary .lanternCanonicalCardBadgeLayer {
  right: 8px;
  left: auto;
  justify-content: flex-end;
}
.exploreCard--missionsLibrary .lanternCanonicalCardTypeBadge {
  display: none !important;
}
/* Games library grid only (Prompt #114): artwork unobstructed except one bottom-center cost line
   from .lanternCanonicalCardMeta ("1 Nugget = 1 Play"). Title remains in the DOM for the canonical
   card contract (LanternCanonicalEnforce) but is not painted over the art. Scoped to
   .exploreCard--gamesLibrary — Explore / Missions / Locker / leaderboard carousel unchanged. */
.exploreCard--gamesLibrary .lanternCanonicalCardTitle {
  display: none;
}
.exploreCard--gamesLibrary .lanternCanonicalCardOverlay {
  max-height: 32%;
}
.exploreCard--gamesLibrary .lanternCanonicalCardGradient {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.4) 42%,
    rgba(0, 0, 0, 0) 100%
  );
}
.exploreCard--gamesLibrary .lanternCanonicalCardCaption {
  padding: 0 10px 8px;
  text-align: center;
}
.exploreCard--gamesLibrary .lanternCanonicalCardMeta {
  justify-content: center;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exploreCard--gamesLibrary .lanternCanonicalCardMetaGrid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.exploreCard--gamesLibrary .lanternCanonicalCardMetaGrid > .lanternCanonicalCardMetaRow,
.exploreCard--gamesLibrary .lanternCanonicalCardMetaGrid > .lanternCanonicalCardDescRow {
  grid-column: 1;
}
.exploreCard--gamesLibrary .lanternCanonicalCardMetaGrid > .identity-chip,
.exploreCard--gamesLibrary .lanternCanonicalCardMeta .identity-chip,
.exploreCard--gamesLibrary .lanternCanonicalCardDesc {
  display: none;
}
.exploreCard--gamesLibrary .lanternCanonicalCardAuthor,
.exploreCard--gamesLibrary .lanternCanonicalCardDate {
  max-width: none;
}
.exploreCard--gamesLibrary .lanternCanonicalCardBadgeLayer {
  display: none;
}
/* Prompt #222 — Explore feed cards show ULHC type icon badges; state badges stay hidden. */
.exploreCard.feedExploreCard .lanternCanonicalCardBadgeLayer {
  display: flex !important;
  top: 8px;
  left: 8px;
  right: 44px;
  justify-content: flex-start;
}
.exploreCard.feedExploreCard .lanternCanonicalCardTypeBadge {
  display: inline-flex !important;
}
.exploreCard.feedExploreCard .lanternCanonicalCardStateBadge,
.exploreCard.feedExploreCard .exploreCardTypeBadge {
  display: none !important;
}
.exploreCard.lanternCanonicalCard > .exploreCardReportBtn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 4;
}

/* Prompt #226 — author overflow (⋯) in opened modal header */
.lanternCardDetailHeader {
  position: relative;
}
.lanternCardDetailAuthorActions {
  position: absolute;
  top: 0;
  right: 44px;
  z-index: 5;
  pointer-events: auto;
}
.lanternAuthorOverflow {
  position: relative;
  display: inline-flex;
}
.lanternAuthorOverflowToggle {
  min-width: 36px;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
}
.lanternAuthorOverflowMenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(12, 18, 32, 0.96);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  z-index: 6;
}
.lanternAuthorOverflowItem {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 12px;
  cursor: pointer;
}
.lanternAuthorOverflowItem:hover,
.lanternAuthorOverflowItem:focus {
  background: rgba(255,255,255,.1);
}
@media (max-width: 390px) {
  .lanternCardDetailAuthorActions {
    right: 40px;
  }
  .lanternAuthorOverflowMenu {
    min-width: 180px;
  }
}
.lanternDetailSurface {
  max-width: var(--lantern-opened-content-max-width);
}
.lanternDetailPreview {
  padding: 16px;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: var(--r, 14px);
  background: rgba(15,27,51,.9);
}
.lanternDetailPreviewTitle {
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 10px;
}
.lanternDetailPreviewBody,
.lanternDetailPreviewMeta {
  font-size: 20px;
  color: var(--muted, #b9c6ea);
  line-height: 1.45;
}
.lanternDetailPreviewMedia img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 10px;
  object-fit: cover;
}

/* Card counterfeit (LanternCanonicalEnforce.scanAllExploreCards) — developer-only visual;
   production never applies .lanternCardCounterfeit (see allowVisualCounterfeitMark). */
.exploreCard.lanternCardCounterfeit,
a.exploreCard.lanternCardCounterfeit{
  position: relative;
  outline: 3px solid #e02020 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(224,32,32,.35) inset;
  z-index: 1;
}
.lanternCardCounterfeitBanner{
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 8px 10px;
  box-sizing: border-box;
  background: rgba(160, 0, 0, 0.42);
  border: 3px solid #ff2222;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
  white-space: pre-wrap;
  overflow: hidden;
  text-align: left;
}

/* ===== CANONICAL HORIZONTAL RAIL (explore / games / missions) =====
   One selector + header :root tokens. Scroll-snap: none. Requires lantern-header.css. */
.wrap.lanternContent .lanternScroller{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  overflow-x: auto;
  gap: var(--lantern-rail-gap);
  padding: var(--lantern-rail-pad-y-start) var(--lantern-rail-pad-x) var(--lantern-rail-pad-y-end);
  -webkit-overflow-scrolling: touch;
  margin: 0;
  /* overflow-x:auto forces overflow-y to compute as auto; hover translateY(-2px) on cards then clips the top. Lock track height to one full card + padding so all rails show the same visible rectangle. */
  /* Reserve extra vertical space when horizontal scrollbar is thicker than legacy 8px so card band height is unchanged. */
  min-height: calc(var(--lantern-card-width) / (16 / 9) + var(--lantern-rail-pad-y-start) + var(--lantern-rail-pad-y-end) + max(0px, var(--lantern-rail-scrollbar-size, 24px) - 8px));
  box-sizing: border-box;
  scrollbar-color: rgba(90, 167, 255, 0.4) rgba(0, 0, 0, 0.2);
  scrollbar-width: auto;
}
/* No vertical lift inside horizontal rails — keeps full card in view (same as Missions / Polls). */
.wrap.lanternContent .lanternScroller > .exploreCard:hover,
.wrap.lanternContent .lanternScroller > a.exploreCard:hover,
.wrap.lanternContent .lanternScroller > .exploreCardOuterWrap:hover > a.exploreCard{
  transform: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.wrap.lanternContent .lanternScroller::-webkit-scrollbar{ height: var(--lantern-rail-scrollbar-size, 24px); }
.wrap.lanternContent .lanternScroller::-webkit-scrollbar-track{ background: rgba(0,0,0,.2); border-radius: 4px; }
.wrap.lanternContent .lanternScroller::-webkit-scrollbar-thumb{ background: rgba(90,167,255,.4); border-radius: 4px; }
.wrap.lanternContent .lanternScroller > .emptyState{
  flex: 1 0 100%;
  min-width: 100%;
  box-sizing: border-box;
}
/* Full-width placeholder row when a rail is empty or loading (missions quick rail, etc.) */
.wrap.lanternContent .lanternScroller > .sectionPlaceholder{
  flex: 1 0 100%;
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ===== CARD SHELL ===== */
.exploreCard{
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-radius: var(--r);
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .2s ease;
}
.exploreCard:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }

/* Default width bands for non-rail shells only (opened/embedded). Rail cards use --lantern-rail-card-outer-width; no variant may widen/narrow the rail shell. */
.exploreCard--size-rail:not(.exploreCard--rail),
.exploreCard.medium:not(.exploreCard--rail){ min-width: 260px; max-width: 280px; }
.exploreCard--size-wide:not(.exploreCard--rail),
.exploreCard.hero:not(.exploreCard--rail){ min-width: 300px; max-width: 340px; }
.exploreCard--size-compact:not(.exploreCard--rail),
.exploreCard.compact:not(.exploreCard--rail){ min-width: 220px; max-width: 260px; }
.exploreCard--activatable:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.exploreCard--activatable,
.exploreCard[role="link"],
.exploreCard[role="button"]{ cursor: pointer; }
a.exploreCard{ display: block; text-decoration: none; color: inherit; }
/* gameHighlightCard: semantic label only; width uses .exploreCard--size-rail / .medium from buildLinkCardHtml */
.gameHighlightLabel{ font-size: 18px; color: var(--muted); margin-bottom: 6px; }
.gameHighlightHeadline{ font-weight: 900; font-size: 22px; line-height: 1.3; margin-bottom: 4px; }
.gameHighlightBody{ font-size: 20px; color: var(--muted); }

.exploreCard--rail{ }

/* ===== RAIL CARD — contract v2 fixed width (height from aspect-ratio) ===== */
.exploreCard.exploreCard--rail.railCardShell,
.exploreCardOuterWrap > a.exploreCard.exploreCard--rail,
.exploreCard.lanternCanonicalCard {
  width: var(--lantern-card-width);
  min-width: var(--lantern-card-width);
  max-width: var(--lantern-card-width);
  flex: 0 0 var(--lantern-card-width);
}
.exploreCard.lanternCanonicalCard {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: var(--lantern-card-aspect-ratio);
}

/* ===== VISUAL ===== */
.exploreCardVisual{
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(0,0,0,.25);
  position: relative;
  min-height: 120px;
}
.exploreCardVisual img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lcCardImg{ width: 100%; height: 100%; object-fit: cover; display: block; min-height: 120px; }
/* Icon / emoji rail: same 16:9 frame + filled gradient as photo cards (visual parity across types) */
.exploreCardVisual.exploreCardVisualIconRail{
  aspect-ratio: 16/9;
  min-height: 0;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, rgba(32,46,78,.94) 0%, rgba(12,16,28,.98) 52%, rgba(22,48,72,.9) 100%);
  border: 1px solid rgba(90,167,255,.22);
  box-sizing: border-box;
}
.exploreCardVisual.exploreCardVisualIconRail--pulse{
  background: linear-gradient(150deg, rgba(40,32,58,.94) 0%, rgba(14,12,24,.98) 55%, rgba(32,28,52,.88) 100%);
  border-color: rgba(156,100,255,.22);
}
.exploreCardVisual.exploreCardVisualIconRail .exploreCardVisualEmoji{
  font-size: 52px;
  line-height: 1;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.5));
}
.exploreCardVisual.exploreCardVisualIconRail--pulse .exploreCardVisualEmoji{
  font-size: 46px;
}
.exploreCardVisualEmoji{ font-size: 42px; line-height: 1; }
.exploreCardMuted{ opacity: .45; filter: grayscale(0.85); }

/* ===== TYPE BADGE (corner) ===== */
.exploreCardTypeBadge{
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 17px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-weight: 800;
  z-index: 2;
  max-width: calc(100% - 100px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  line-height: 1.2;
}

/* ===== HEADER / TITLE ROW ===== */
.exploreCardCategoryBadgeWrap{
  margin: 6px 0 0 0;
  width: 100%;
}
.exploreCardCategoryBadge{
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(90,167,255,.4);
  background: rgba(90,167,255,.1);
  color: var(--accent);
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  box-sizing: border-box;
}
.exploreCardHd{ display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
/* Rail preview: consistent step from media → title → identity → meta */
.exploreCardHd--preview{ margin-bottom: 8px; align-items: center; flex-wrap: nowrap; }
.exploreCardHd--preview .exploreTitle{ flex: 1; min-width: 0; }
.exploreTypeIcon{ font-size: 30px; flex-shrink: 0; }
.exploreTitle{ font-weight: 900; font-size: 24px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== IDENTITY / AVATAR ===== */
.exploreCardIdentity{ display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-shrink: 0; padding-left: 2px; }
/* Rail + compact rows: shared tokens (Explore, news, missions, polls, studio preview) */
.exploreCardIdentity--rail{
  margin-bottom: 8px;
  gap: var(--lantern-card-identity-gap);
  align-items: center;
  padding-left: 0;
}
.exploreCardIdentity--rail .identity-chip{
  flex-shrink: 0;
  width: var(--lantern-card-identity-avatar-size);
  height: var(--lantern-card-identity-avatar-size);
  min-width: var(--lantern-card-identity-avatar-size);
  min-height: var(--lantern-card-identity-avatar-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.exploreCardIdentity--rail .exploreCardAvatarImg{
  width: var(--lantern-card-identity-avatar-size);
  height: var(--lantern-card-identity-avatar-size);
  flex-shrink: 0;
}
/* Emoji fallback inside rail identity — match chip size (base .exploreCardAvatar is 36px). */
.exploreCardIdentity--rail .exploreCardAvatar{
  width: var(--lantern-card-identity-avatar-size);
  height: var(--lantern-card-identity-avatar-size);
  min-width: var(--lantern-card-identity-avatar-size);
  min-height: var(--lantern-card-identity-avatar-size);
  font-size: calc(var(--lantern-card-identity-avatar-size) * 0.75);
}
.exploreCardAvatar{ font-size: 28px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.exploreCardAvatarImg{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
.exploreCardAvatar--fallback{ display: none; }
.exploreCardAvatar--fallback.avatar-show{ display: flex; }
.exploreCardAvatarImg--hidden{ display: none; }
.identity-chip[data-identity-size="xs"]{ --lantern-card-identity-avatar-size: 20px; }
.identity-chip[data-identity-size="sm"]{ --lantern-card-identity-avatar-size: 24px; }
.identity-chip[data-identity-size="md"]{ --lantern-card-identity-avatar-size: 32px; }
.identity-chip[data-identity-size="lg"]{ --lantern-card-identity-avatar-size: 40px; }
.identity-chip.frame-gold .exploreCardAvatarImg,
.identity-chip.frame-gold .exploreCardAvatar{ border-radius: 50%; box-shadow: 0 0 0 2px rgba(242,194,48,.5); }
.identity-chip.frame-blue .exploreCardAvatarImg,
.identity-chip.frame-blue .exploreCardAvatar{ border-radius: 50%; box-shadow: 0 0 0 2px rgba(90,167,255,.5); }
.identity-chip.frame-green .exploreCardAvatarImg,
.identity-chip.frame-green .exploreCardAvatar{ border-radius: 50%; box-shadow: 0 0 0 2px rgba(56,208,124,.5); }
.identity-chip.frame-purple .exploreCardAvatarImg,
.identity-chip.frame-purple .exploreCardAvatar{ border-radius: 50%; box-shadow: 0 0 0 2px rgba(156,100,255,.5); }
.identity-chip.frame-silver .exploreCardAvatarImg,
.identity-chip.frame-silver .exploreCardAvatar{ border-radius: 50%; box-shadow: 0 0 0 2px rgba(200,200,220,.6); }

/* ===== TEXT BLOCKS ===== */
.exploreAuthor{ font-weight: 800; color: var(--ink); padding-right: 4px; }
.exploreCaption{ color: var(--muted); font-size: 20px; line-height: 1.35; margin-top: 6px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.exploreMeta{ margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); font-size: 20px; color: var(--muted); }
.exploreCardMetaOneLine{ font-size: 20px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; line-height: 1.3; flex-shrink: 0; }
.exploreCard--rail .exploreCardMetaOneLine{ margin-bottom: 0; line-height: 1.35; }
.exploreCardIdentity--rail .exploreAuthor{
  flex: 1;
  min-width: 0;
  font-size: var(--lantern-card-identity-name-size);
  font-weight: 800;
  line-height: 1.22;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exploreCardFoot{ margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: flex-end; }
.exploreCardFootHint{ font-size: 22px; font-weight: 900; color: var(--accent); }

/* ===== CURATION BADGES (media overlay, top-left; non-structural) ===== */
/* Padding + type scale match .exploreCardTypeBadge (single chip system). */
.lanternBadge{ display: inline-block; padding: 5px 8px; border-radius: 8px; font-size: 17px; font-weight: 800; line-height: 1.2; }
.lanternBadge.pick{ background: rgba(56,208,124,.2); border: 1px solid rgba(56,208,124,.5); color: var(--good); }
.lanternBadge.featured{ background: rgba(156,100,255,.2); border: 1px solid rgba(156,100,255,.5); color: #b794f6; }
.exploreCardVisual .lanternBadge.exploreCardCurationBadge{
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
  z-index: 3;
  max-width: calc(100% - 100px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== AUTHOR BADGE (opened/news) ===== */
.exploreCard .authorBadge{ display: inline-block; padding: 6px 12px; border-radius: 8px; font-weight: 900; font-size: 18px; }
.exploreCard .authorBadge.student{ background: rgba(90,167,255,.2); border: 1px solid rgba(90,167,255,.4); }
.exploreCard .authorBadge.teacher{ background: rgba(56,208,124,.2); border: 1px solid rgba(56,208,124,.4); }
.exploreCard .authorBadge.staff{ background: rgba(156,100,255,.2); border: 1px solid rgba(156,100,255,.4); }
.exploreCard .authorBadge.admin{ background: rgba(242,194,48,.2); border: 1px solid rgba(242,194,48,.4); }

/* ===== MEDIA BLOCK (inside card visual; from LanternMedia) ===== */
.lanternCardNewsMedia{
  margin-bottom: 10px;
  max-height: 160px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.2);
}
.lanternCardNewsMedia img{ width: 100%; height: auto; display: block; max-height: 180px; object-fit: cover; }
.lanternCardNewsMedia video{ width: 100%; max-height: 160px; display: block; border-radius: 12px; border: 1px solid var(--line); background: #1a252f; }
.lanternCardNewsMedia a{ word-break: break-all; font-size: 20px; color: var(--accent); }
.lanternCardNewsMedia--img{ min-height: 100px; }
.lanternCardNewsMedia--video{ min-height: 120px; }
.lanternCardNewsMedia--link{ padding: 10px; }
.lanternCardNewsMedia .lcCardVideo{ max-width: 100%; max-height: 160px; border-radius: 12px; border: 1px solid var(--line); display: block; width: 100%; background: #1a252f; }
.lanternCardNewsMedia .lcCardLink{ word-break: break-all; font-size: 20px; color: var(--accent); }
/* Inside .exploreCardVisual, news/media fills the 16:9 frame (ignore standalone .lanternCardNewsMedia heights) */
.exploreCardVisual .lanternCardNewsMedia{
  position: absolute;
  inset: 0;
  margin: 0;
  max-height: none;
  min-height: 0;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.exploreCardVisual .lanternCardNewsMedia img,
.exploreCardVisual .lanternCardNewsMedia video,
.exploreCardVisual .lanternCardNewsMedia .lcCardVideo{
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
}
.exploreCardVisual > img.lcCardImg{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Link-only explore rail: full frame fill + watermark + bottom URL strip (parity with image weight) */
.exploreCardVisual .lanternCardNewsMedia--link{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}
.exploreCardVisual .lcExploreLinkFill{
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(28,42,72,.98) 0%, rgba(10,14,26,.99) 48%, rgba(18,48,78,.92) 100%);
  border: 1px solid rgba(90,167,255,.32);
  box-sizing: border-box;
  z-index: 0;
}
.exploreCardVisual .lcExploreLinkGlyph{
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  font-size: clamp(44px, 14vw, 68px);
  line-height: 1;
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}
.exploreCardVisual .lanternCardNewsMedia--link .lcCardLink{
  position: relative;
  z-index: 2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  padding: 12px 14px 14px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: rgba(234,240,255,.95);
  text-decoration: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.58) 100%);
  border-top: 1px solid rgba(255,255,255,.07);
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Rail shell width/height: single block above (.exploreCard.exploreCard--rail.railCardShell). No per-variant min/max here. */
.exploreCardOpened .exploreCardOpenedBody{ -webkit-line-clamp: unset; display: block; max-height: none; white-space: pre-wrap; word-break: break-word; margin-top: 10px; }
/* missionSpotlightCard / pollCard: type markers only — rail width + .exploreCardVisual use shared rules above */

/* Game / external link cards: shell matches .exploreCard; report control is a sibling inside .exploreCardOuterWrap */
.exploreCardOuterWrap{ position: relative; display: inline-block; vertical-align: top; max-width: 100%; }
.exploreCardOuterWrap > a.exploreCard{ width: 100%; box-sizing: border-box; }
.exploreCardOuterWrap:has(> a.exploreCard.exploreCard--rail){
  width: var(--lantern-rail-card-outer-width);
  min-width: var(--lantern-rail-card-outer-width);
  max-width: var(--lantern-rail-card-outer-width);
  flex: 0 0 var(--lantern-rail-card-outer-width);
  box-sizing: border-box;
}

/* One shared report affordance on every card (bottom-right) */
.exploreCardReportBtn{
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 30;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.45);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, background .15s ease, opacity .15s ease;
}
.exploreCardOuterWrap > .exploreCardReportBtn{ z-index: 35; }
.exploreCardReportBtn:hover:not(:disabled){ color: rgba(255,255,255,.75); background: rgba(0,0,0,.5); }
.exploreCardReportBtn:disabled,
.exploreCardReportBtn[aria-disabled="true"]{
  opacity: .65;
  cursor: not-allowed;
  background: rgba(0,0,0,.55);
  border: 1px dashed rgba(255,255,255,.22);
  color: rgba(255,255,255,.38);
}
.exploreCardReportBtnIcon{ display: block; line-height: 1; }

/* Report unavailable: flag stays visible; surface reads clearly non-actionable (not primary feedback = click error). */
.exploreCard.exploreCard--reportDisabled,
.exploreCardOuterWrap.exploreCardOuterWrap--reportDisabled .exploreCard{
  opacity: .88;
  filter: saturate(.88);
}
.exploreCard.exploreCard--reportDisabled:hover,
.exploreCardOuterWrap.exploreCardOuterWrap--reportDisabled .exploreCard:hover{
  transform: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

/* ===== SHARED SURFACE (Explore opened post, Contribute preview — same column scroll contract) ===== */
.lanternSurface{
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}
/* Centered column inside full-height scroll surface — matches Explore opened proportions. */
.lanternSurfaceContent{
  width: 100%;
  max-width: var(--lantern-opened-content-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 16px 18px 24px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}
.lanternSurfaceShell{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  background-color: #0a1424;
  background-image:
    radial-gradient(ellipse 130% 85% at 50% -18%, rgba(90, 140, 255, 0.11), transparent 52%),
    linear-gradient(180deg, #101c32 0%, #0a1424 48%, #0c1828 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-overflow-scrolling: touch;
}
.lanternSurfaceShell.show{ display: flex; }

/* Explore opened post — branded dimmed backdrop (card context remains faintly visible; no full-page “zoom”). */
#lanternCardDetailOverlay.lanternSurfaceShell{
  background-color: rgba(5, 10, 20, 0.72);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -18%, rgba(90, 150, 255, 0.14), transparent 55%),
    radial-gradient(ellipse 90% 50% at 50% 110%, rgba(0, 0, 0, 0.28), transparent 60%);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: none;
  align-items: center;
  justify-content: flex-start;
  padding:
    max(var(--lantern-opened-modal-top-gap, 32px), env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(40px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#lanternCardDetailOverlay.lanternSurfaceShell::-webkit-scrollbar{
  display: none;
  width: 0;
  height: 0;
}

/* ===== DETAIL OVERLAY (opened post — natural height; overlay scrolls) ===== */
/* Overlay node uses .lanternCardDetailOverlay.lanternSurfaceShell; inner uses .lanternCardDetailModal.lanternSurface */
.lanternCardDetailModal{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
#lanternCardDetailOverlay .lanternCardDetailModal{
  flex: 0 0 auto;
  width: min(100%, var(--lantern-opened-modal-max-width));
  max-width: min(100%, var(--lantern-opened-modal-max-width));
  max-height: none;
  height: auto;
  min-height: 0;
  border-radius: var(--lantern-opened-modal-radius, 18px);
  border: 1px solid rgba(120, 170, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(22, 36, 62, 0.98) 0%, rgba(11, 22, 40, 0.98) 46%, rgba(8, 16, 30, 0.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 48px rgba(70, 130, 255, 0.1);
  overflow: visible;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.lanternCardDetailModal.lanternSurface{
  background: transparent;
  border: none;
  box-shadow: none;
}
#lanternCardDetailOverlay .lanternCardDetailModal.lanternSurface{
  background:
    linear-gradient(180deg, rgba(22, 36, 62, 0.98) 0%, rgba(11, 22, 40, 0.98) 46%, rgba(8, 16, 30, 0.99) 100%);
  border: 1px solid rgba(120, 170, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 48px rgba(70, 130, 255, 0.1);
  /* Prompt #168 — card is natural height; overlay is the only scroller. */
  overflow: visible;
  height: auto;
  max-height: none;
}
.lanternCardDetailModal.lanternCardDetailModal--embedded.lanternSurface{
  background: transparent;
  border-top: none;
}
.lanternCardDetailModal.lanternCardDetailModal--embedded{
  flex: 1 1 auto;
  min-height: 0;
}
.lanternCardDetailModal--embedded .lanternCardDetailTitle{
  margin-right: 0;
}

/* Poll opened (Explore overlay + Contribute): same shell + .pollModal.lanternSurface as scroll body */
.pollModal.lanternSurface{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.pollModalImageWrap{
  margin-bottom: 14px;
  border-radius: 12px;
  overflow: hidden;
  max-height: 200px;
}
.pollModalImage{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.pollModal .pollModalQuestion{
  font-weight: 900;
  font-size: clamp(22px, 4.2vw, 26px);
  margin: 0 0 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pollChoiceGroup{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pollChoiceBtn{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 16px 28px;
  min-height: 60px;
  margin-bottom: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.pollChoiceText{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pollChoiceMeta{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 8.5rem;
}
.pollChoiceGroup .pollYourChoiceMark{
  visibility: hidden;
  margin-left: 0;
  white-space: nowrap;
}
.pollChoiceGroup .lanternPollRaceLane--yours .pollYourChoiceMark,
.pollChoiceGroup .pollYourChoiceMark.is-on{
  visibility: visible;
}
.pollChoiceGroup .lanternResultRacePct{
  min-width: 4ch;
  text-align: right;
  font-size: 20px;
  font-weight: 900;
}
.pollChoiceBtn:hover{
  background: linear-gradient(180deg, rgba(90,167,255,.24), rgba(90,167,255,.12));
  border-color: rgba(90,167,255,.45);
}
.pollChoiceBtn:focus-visible{
  outline: 3px solid rgba(90,167,255,.85);
  outline-offset: 2px;
}
.pollChoiceBtn.is-selected,
.pollChoiceBtn[aria-checked="true"]{
  background: linear-gradient(180deg, rgba(90,167,255,.34), rgba(90,167,255,.16));
  border-color: rgba(90,167,255,.9);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 6px 18px rgba(40,100,200,.18);
}
.pollChoiceBtn.is-prior-choice,
.lanternPollRaceLane--prior .pollChoiceBtn{
  outline: 3px solid #56d078;
  outline-offset: 2px;
  border-color: rgba(56,208,124,.85);
  background: linear-gradient(180deg, rgba(86,208,120,.22), rgba(86,208,120,.08));
  box-shadow: inset 0 0 0 2px rgba(56,208,124,.28);
}
.lanternRevealResultsWrap{
  margin: 16px 0 0;
  width: 100%;
}
.lanternRevealResultsBtn{
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid rgba(86,208,124,.65);
  background: linear-gradient(180deg, rgba(86,208,124,.22), rgba(86,208,124,.08));
  color: inherit;
  font-family: inherit;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}
.lanternRevealResultsBtn:focus-visible{
  outline: 3px solid rgba(86,208,124,.9);
  outline-offset: 2px;
}
.pollLockInBtn{
  display: none !important;
}
.pollResultsWrap{ margin-top: 16px; }
.pollResultsSummary{
  font-size: 20px;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 800;
}
.pollResultRow{ margin-bottom: 14px; }
.pollResultRow--yours .pollResultLabel{
  color: var(--ink);
}
.pollYourChoiceMark{
  font-style: normal;
  font-weight: 900;
  font-size: 18px;
  margin-left: 6px;
  color: rgba(90,167,255,.95);
}
.pollResultLabel{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 800;
  gap: 10px;
}
.pollBarTrack{
  height: 24px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.pollBarFill{
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(90,167,255,.6), rgba(90,167,255,.35));
  transition: width .25s ease;
}
.lanternRaceToolbar{
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}
.lanternRxRaceLive > .lanternRaceToolbar,
.lanternFinalRxPanel > .lanternRaceToolbar,
.lanternReactionBar > .lanternRaceToolbar,
.lanternCardDetailReactions > .lanternRaceToolbar,
.lanternRaceToolbar--rx,
.lanternRaceToolbar--float,
.lanternRaceToolbar--poll,
.lanternPollRaceHost > .lanternRaceToolbar,
.pollResultsWrap > .lanternRaceToolbar,
.lanternCardDetailTitle > .lanternRaceToolbar,
.lanternCardDetailModal--poll .lanternRaceToolbar{
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  margin: 0;
  width: auto;
  height: auto;
  z-index: 5;
  pointer-events: none;
}
.lanternRaceToolbar--float .lanternRaceSoundBtn,
.lanternRaceToolbar--poll .lanternRaceSoundBtn,
.lanternCardDetailTitle > .lanternRaceToolbar .lanternRaceSoundBtn{
  pointer-events: auto;
  min-width: 44px;
  min-height: 44px;
}
.lanternPollRaceHost,
.pollResultsWrap{
  position: relative;
}
.lanternCardDetailModal--poll .lanternCardDetailTitle{
  position: relative;
  padding-right: 7.5rem;
}
.lanternRaceSoundBtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.28);
  color: var(--ink, #eaf0ff);
  font-size: 18px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.lanternRaceSoundBtn.is-muted{
  opacity: 0.7;
}
.lanternPollRace{
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}
.pollChoiceGroup.lanternPollRace{
  gap: 10px;
}
.lanternPollRaceLane{
  border-radius: 12px;
  padding: 4px 2px;
}
.lanternPollRaceLane.pollChoiceRow{
  position: relative;
  margin: 0;
  padding: 0;
}
.lanternPollRaceLane--yours{
  outline: 2px solid rgba(56,208,124,.55);
  outline-offset: 4px;
}
.lanternPollRaceLane.pollChoiceRow.lanternPollRaceLane--yours{
  outline: none;
  outline-offset: 0;
  box-shadow: 0 0 0 2px rgba(56,208,124,.55);
}
.pollChoiceGroup .lanternPollRaceTrack{
  position: absolute;
  left: 16px;
  right: 16px;
  top: auto;
  bottom: 8px;
  height: 12px;
  margin-top: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.pollChoiceGroup.is-racing .lanternPollRaceTrack,
.lanternPollRaceLane.pollChoiceRow.lanternPollRaceLane--live .lanternPollRaceTrack{
  opacity: 1;
}
.lanternPollRaceLabel{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 800;
}
.lanternPollRaceTrack{
  position: relative;
  height: 40px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, transparent 16px, rgba(232,196,92,.55) 16px, rgba(232,196,92,.55) 24px, transparent 24px),
    rgba(255,255,255,.1);
  overflow: visible;
}
.lanternPollRaceFill{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(90,167,255,.7), rgba(90,167,255,.35));
}
.lanternPollRaceLane--yours .lanternPollRaceFill{
  background: linear-gradient(90deg, rgba(56,208,124,.75), rgba(56,208,124,.35));
}
.lanternMineCart{
  position: absolute;
  top: 50%;
  left: 0;
  width: 36px;
  height: 27px;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.lanternMineCartSvg{
  display: block;
  width: 36px;
  height: 27px;
}
.lanternResultRaceFill.pollBarFill,
.lanternResultRaceFill{
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  transition: none !important;
}
.lanternResultRacePct.is-pending{
  visibility: hidden;
}
.lanternResultRaceRow{
  margin-bottom: 14px;
  border-radius: 10px;
}
.lanternResultRaceRow--yours{
  outline: 2px solid rgba(56,208,124,.55);
  outline-offset: 4px;
  padding: 4px;
}
.visuallyHidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.pollResultRow--yours .pollBarFill{
  background: linear-gradient(90deg, rgba(56,208,124,.7), rgba(56,208,124,.35));
}
.pollVoterNugget{ font-size: 20px; color: var(--warn); margin-top: 10px; }
.pollModal .btn{
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.1);
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.pollModal .btn:hover{ background: rgba(255,255,255,.18); }
/* Surface chrome: close lives in header row — never over .lanternCardDetailVisual (avoids clash with media fullscreen). */
.lanternCardDetailHeader{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 2px 0 12px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#lanternCardDetailOverlay .lanternCardDetailHeader{
  position: relative;
  top: auto;
  z-index: 6;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(18, 30, 52, 0.98) 0%, rgba(12, 22, 40, 0.96) 100%);
  padding: 12px var(--lantern-opened-modal-pad-x, 18px) 12px;
  margin: 0 calc(-1 * var(--lantern-opened-modal-pad-x, 18px));
  width: calc(100% + 2 * var(--lantern-opened-modal-pad-x, 18px));
  border-bottom: 1px solid rgba(120, 170, 255, 0.14);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.lanternCardDetailClose{
  position: static;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0, 0, 0, 0.4);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  font-weight: 800;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, transform .12s;
}
.lanternCardDetailClose:hover{
  background: rgba(90,167,255,.22);
  border-color: rgba(90,167,255,.45);
}
.lanternCardDetailVisual{ border-radius: 14px; overflow: hidden; margin-bottom: 14px; background: rgba(0,0,0,.25); }
/* Prompt #168 — full 16:9 detail media, contain (no cover crop). */
.lanternCardDetailVisualInner .exploreCardVisual{
  margin: 0;
  border-radius: 0;
  aspect-ratio: 16 / 9;
  max-height: none;
  height: auto;
  overflow: hidden;
  background: rgba(0,0,0,.28);
}
.lanternCardDetailVisualInner .exploreCardVisual img,
.lanternCardDetailVisualInner .exploreCardVisual .lcCardImg,
.lanternCardDetailVisualInner > .lcCardImg{
  width: 100%;
  height: 100% !important;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
  min-height: 0;
  background: transparent;
  border-radius: 0;
}

/* Opened-post media (variant=detail in lantern-media.js) — full 16:9 frame, entire image visible. */
.lanternCardDetailVisualInner .lanternDetailMedia--img .newsCardImage{
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
  background: transparent;
  border-radius: 0;
}
.lanternCardDetailVisualInner .lanternDetailMedia--img .newsCardImageWrap,
.lanternDetailMediaImageInner{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: rgba(0,0,0,.28);
}
.lanternDetailMediaVideoInner{
  position: relative;
  display: block;
}
.lanternDetailMediaExpandBtn{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  padding: 0;
}
/* Prompt #219 — image expand lives in the image LRHC (video keeps upper-right). */
.lanternDetailMedia--img .lanternDetailMediaExpandBtn{
  top: auto;
  bottom: 10px;
  right: 10px;
}
.lanternDetailMediaExpandBtn:focus-visible{
  outline: 3px solid rgba(90,167,255,.9);
  outline-offset: 2px;
}
.lanternCardDetailVisualInner .lanternDetailMedia--video .newsCardVideo{
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: block;
  background: #1a252f;
}

/* Fullscreen media layer — second step after opened post (z above .lanternSurfaceShell). */
.lanternMediaFullscreenOverlay{
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0,0,0,.88);
  opacity: 0;
  transition: opacity .2s ease;
}
.lanternMediaFullscreenOverlay--show{
  opacity: 1;
}
.lanternMediaFullscreenClose{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.35);
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
}
.lanternMediaFullscreenInner{
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lanternMediaFullscreenImg{
  max-width: 100%;
  max-height: calc(100dvh - 48px);
  object-fit: contain;
}
.lanternMediaFullscreenVideo{
  max-width: 100%;
  max-height: calc(100dvh - 48px);
}

/* Horizontal rail: media is presentational — whole card opens opened post in one tap. */
.exploreCard--activatable .exploreCardVisual > img.lcCardImg,
.exploreCard--activatable .exploreCardVisual .lanternCardNewsMedia--img img,
.exploreCard--activatable .exploreCardVisual .lanternCardNewsMedia--video video,
.exploreCard--activatable .exploreCardVisual .lanternCardNewsMedia--video .lcCardVideo{
  pointer-events: none;
}
.exploreCard--activatable .exploreCardVisual .lanternCardNewsMedia--link .lcCardLink{
  pointer-events: auto;
}
.lanternCardDetailTitle{ font-size: clamp(26px, 5vw, 32px); font-weight: 1000; margin: 0 0 8px 0; line-height: 1.15; }
.lanternCardDetailIdentityWrap{ margin-bottom: 10px; }
.lanternCardDetailIdentityWrap .lanternCardDetailIdentity.exploreCardIdentity--rail{
  display: flex;
  align-items: center;
  gap: var(--lantern-card-identity-gap);
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
}
.lanternCardDetailMeta{ font-size: 22px; color: var(--muted); margin-bottom: 14px; }
.lanternCardDetailCaption{ font-size: 22px; line-height: 1.4; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.lanternCardDetailBody{ }
/* Admin-only (Explore): gated in JS via window.exploreViewerIsAdmin */
.lanternCardDetailAdminModeration{
  display: none;
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 2px solid rgba(255,77,109,.55);
  background: linear-gradient(180deg, rgba(255,77,109,.16), rgba(0,0,0,.38));
  box-sizing: border-box;
}
.lanternCardDetailAdminModerationHd{
  font-size: 22px;
  font-weight: 950;
  color: #ffb4c4;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.lanternCardDetailAdminModerationMeta{
  font-size: 20px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 14px;
}
.lanternCardDetailAdminModerationWarn{
  font-size: 22px;
  font-weight: 800;
  color: var(--warn);
  margin: 0 0 8px;
}
.lanternCardDetailAdminModerationBtn{
  width: 100%;
  text-align: center;
  padding: 16px 20px;
  font-size: 26px;
  font-weight: 950;
  font-family: inherit;
  border-radius: 14px;
  border: 2px solid rgba(255,77,109,.7);
  background: linear-gradient(180deg, rgba(255,77,109,.5), rgba(160,25,65,.6));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 22px rgba(255,50,100,.4);
}
.lanternCardDetailAdminModerationBtn:hover{ filter: brightness(1.07); }
.lanternCardDetailAdminModerationBtn:disabled{ opacity: 0.55; cursor: not-allowed; }
.lanternCardDetailActions{ margin-top: 16px; }
.lanternCardDetailReactions{ margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.lanternCardDetailRxNewsWrap{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.lanternCardDetailRxNewsWrap .lanternReactionBar{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.lanternCardDetailRxNewsWrap .lanternReactionStatus{
  margin-bottom: 6px;
}
.lanternCardDetailMuted{ font-size: 20px; color: var(--muted); margin: 0; }
.lanternCardDetailPostRx{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lanternCardDetailRxLabel{ font-size: 20px; color: var(--muted); font-weight: 800; margin-right: 4px; }
.lanternCardDetailRxBtn{
  min-width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.08);
  font-size: 26px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lanternCardDetailRxBtn.is-on{ box-shadow: 0 0 0 2px var(--accent); background: rgba(90,167,255,.2); }

/*
 * Explore opened post — vertical rhythm + branded surfaces (#lanternCardDetailOverlay).
 * Embedded Contribute preview (.lanternCardDetailModal--embedded) is unchanged.
 */
#lanternCardDetailOverlay .lanternSurfaceContent{
  padding: 0 var(--lantern-opened-modal-pad-x, 18px) 18px;
  max-width: none;
  width: 100%;
  margin: 0;
  overflow: visible;
  -webkit-overflow-scrolling: auto;
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overscroll-behavior: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.lanternCardDetailOverlay .lanternSurfaceContent{
  padding: 0 var(--lantern-opened-modal-pad-x, 18px) 14px;
}
.lanternCardDetailOverlay .lanternCardDetailHeader{
  padding: 12px var(--lantern-opened-modal-pad-x, 18px) 12px;
}
.lanternCardDetailOverlay .lanternCardDetailClose{
  background: rgba(0, 0, 0, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#lanternCardDetailOverlay .lanternCardDetailStage{
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
#lanternCardDetailOverlay .lanternCardDetailFooter{
  flex-shrink: 0;
  min-width: 0;
  padding-top: 8px;
}
.lanternCardDetailOverlay .lanternCardDetailVisual{
  margin-top: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(120, 170, 255, 0.14);
  background: rgba(0, 0, 0, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  border-radius: 14px;
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lanternCardDetailOverlay .lanternCardDetailVisualInner{
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lanternCardDetailOverlay .lanternCardDetailVisualInner .lanternDetailMedia,
#lanternCardDetailOverlay .lanternCardDetailVisualInner .lanternDetailMediaImageInner,
#lanternCardDetailOverlay .lanternCardDetailVisualInner .lanternDetailMediaVideoInner,
#lanternCardDetailOverlay .lanternCardDetailVisualInner .newsCardImageWrap,
#lanternCardDetailOverlay .lanternCardDetailVisualInner .newsCardVideoWrap,
#lanternCardDetailOverlay .lanternCardDetailVisualInner .exploreCardVisual{
  max-height: none;
  min-height: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
}
#lanternCardDetailOverlay .lanternCardDetailVisualInner img,
#lanternCardDetailOverlay .lanternCardDetailVisualInner video,
#lanternCardDetailOverlay .lanternCardDetailVisualInner .exploreCardVisual img,
#lanternCardDetailOverlay .lanternCardDetailVisualInner .exploreCardVisual .lcCardImg,
#lanternCardDetailOverlay .lanternCardDetailVisualInner > .lcCardImg,
#lanternCardDetailOverlay .lanternCardDetailVisualInner .lanternDetailMedia--img .newsCardImage,
#lanternCardDetailOverlay .lanternCardDetailVisualInner .lanternDetailMedia--video .newsCardVideo{
  width: 100%;
  max-width: 100%;
  height: 100% !important;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.lanternCardDetailOverlay .lanternDetailMediaExpandBtn{
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.lanternCardDetailOverlay .lanternDetailMedia--img .lanternDetailMediaExpandBtn{
  top: auto;
  bottom: 12px;
  right: 12px;
}
.lanternCardDetailOverlay .lanternCardDetailTitle{
  margin: 0 0 8px 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-size: clamp(24px, 4.5vw, 30px);
  flex-shrink: 0;
  overflow: visible;
  min-width: 0;
}
.lanternCardDetailOverlay .lanternCardDetailIdentityWrap{
  margin-bottom: 8px;
  flex-shrink: 0;
  min-width: 0;
}
.lanternCardDetailOverlay .lanternCardDetailMeta{
  margin-bottom: 10px;
  font-size: 18px;
  color: rgba(185, 198, 234, 0.88);
  flex-shrink: 0;
  min-width: 0;
}
#lanternCardDetailOverlay .lanternCardDetailRecognizing{
  flex-shrink: 0;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(120, 170, 255, 0.18);
  background: rgba(90, 167, 255, 0.08);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  min-width: 0;
}
#lanternCardDetailOverlay .lanternCardDetailRecognizing[hidden]{
  display: none !important;
}
.lanternCardDetailOverlay .lanternCardDetailBody{
  margin-top: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.lanternCardDetailOverlay .lanternCardDetailBody:empty{
  display: none;
  padding: 0;
  border: none;
  background: transparent;
}
#lanternCardDetailOverlay .lanternCardDetailBodyRead{
  min-height: 0;
  min-width: 0;
  overflow: visible;
}
.lanternCardDetailOverlay .lanternCardDetailCaption{
  font-size: 20px;
  line-height: 1.45;
  margin: 0;
}
#lanternCardDetailOverlay .lanternCardDetailModal:not(.lanternCardDetailModal--poll):not(.lanternCardDetailModal--no-media) .lanternCardDetailBodyRead{
  max-height: none;
  overflow: visible;
}
#lanternCardDetailOverlay .lanternCardDetailModal--no-media .lanternCardDetailBody{
  flex: 0 0 auto;
}
#lanternCardDetailOverlay .lanternCardDetailModal--no-media .lanternCardDetailBodyRead{
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
}
#lanternCardDetailOverlay .lanternCardDetailModal--no-media .lanternCardDetailVisual{
  display: none;
}
#lanternCardDetailOverlay .lanternCardDetailReadToggle{
  display: none !important;
}
#lanternCardDetailOverlay .lanternCardDetailModal--poll .lanternCardDetailBody{
  flex: 0 0 auto;
  padding: 4px 2px 8px;
  border: none;
  background: transparent;
  overflow: visible;
}
#lanternCardDetailOverlay .lanternCardDetailModal--poll .lanternCardDetailBodyRead{
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
}
.lanternCardDetailOverlay .lanternCardDetailActions{
  margin-top: 0;
  flex-shrink: 0;
}
.lanternCardDetailOverlay .lanternCardDetailReactions{
  margin-top: 10px;
  padding: 12px 14px 4px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-top: none;
  background: rgba(0,0,0,.18);
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: visible;
}
.lanternCardDetailModal--rx-racing,
.lanternCardDetailModal--rx-racing .lanternCardDetailReactions,
.lanternCardDetailModal--rx-racing .lanternCardDetailBody,
.lanternCardDetailModal--rx-racing .lanternCardDetailStage,
.lanternCardDetailOverlay--rx-racing .lanternFinalRxRaceArena,
.lanternCardDetailOverlay--rx-racing .lanternCardDetailReactions{
  overflow: visible;
}
.lanternCardDetailOverlay.lanternCardDetailOverlay--rx-racing{
  overflow-x: hidden;
  overflow-y: auto;
}
.lanternCardDetailOverlay .lanternCardDetailReactions:empty{
  display: none;
}
.lanternCardDetailOverlay .lanternCardDetailRxNewsWrap .lanternReactionStatus{
  font-size: 18px;
  font-weight: 600;
  color: rgba(185, 198, 234, 0.82);
  line-height: 1.45;
  margin-bottom: 8px;
}
.lanternCardDetailOverlay .lanternCardDetailRxNewsWrap .lanternReactionBar{
  gap: 8px;
  padding-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .lanternCardDetailOverlay .lanternCardDetailVisual{
    transition: none;
  }
}

@media (max-width: 420px) {
  :root {
    --lantern-opened-modal-max-width: 100%;
    --lantern-opened-modal-top-gap: 16px;
    --lantern-opened-modal-radius: 14px;
    --lantern-opened-modal-pad-x: 14px;
  }
  #lanternCardDetailOverlay.lanternSurfaceShell {
    padding:
      max(var(--lantern-opened-modal-top-gap, 16px), env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(28px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px));
  }
  #lanternCardDetailOverlay .lanternCardDetailModal {
    border-radius: var(--lantern-opened-modal-radius, 14px);
    width: min(100%, var(--lantern-opened-modal-max-width));
    max-width: min(100%, var(--lantern-opened-modal-max-width));
  }
}
@media (min-width: 1600px) {
  :root {
    --lantern-opened-modal-max-width: 600px;
  }
}

/* ===== STUDIO MOCK SCROLLER (contribute page layout — same compact rail widths as canonical) ===== */
#studioMockScroller .exploreCard--size-compact:not(.exploreCard--rail),
#studioMockScroller .exploreCard.compact:not(.exploreCard--rail){ min-width: 220px; max-width: 260px; }
#studioMockScroller .exploreCard--size-compact.studioScrollerCardActive,
#studioMockScroller .exploreCard.compact.studioScrollerCardActive{ box-shadow: 0 0 0 2px rgba(255,255,255,.22); border-radius: 14px; }

/* ===== OPENED BODY (news/studio full preview) ===== */
.exploreCardOpened.exploreCardOpened--fullWidth{ max-width: 100%; }
.exploreCaption.exploreCaption--category{ font-weight: 800; color: var(--accent); margin-top: 4px; }
.exploreCaption.exploreCaption--muted{ font-size: 20px; color: var(--muted); margin-top: 12px; }
.exploreCaption.exploreCaption--createdBy{ font-size: 20px; color: var(--muted); margin-top: 4px; }
.exploreCard--activityPulse .exploreTitle{ font-size: 22px; }
.exploreCardOpenedBody{ white-space: pre-wrap; word-break: break-word; }
#studioFullPreview .exploreCardOpenedBody{ margin-top: 14px; }

/* ===== REPORT MODAL (single entry; opened from card report controls) ===== */
.lanternReportModalOverlay{
  position: fixed; inset: 0; z-index: 10002;
  background: rgba(0,0,0,.72);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.lanternReportModalOverlay.show{ display: flex; }
.lanternReportModal{
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, #152238, #0f1a2e);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 18px 18px;
  box-shadow: var(--shadow);
}
.lanternReportModal h2{
  margin: 0 0 14px;
  font-size: clamp(24px, 4vw, 28px);
  font-weight: 900;
  color: var(--ink);
}
.lanternReportModalFieldset{ border: none; margin: 0 0 14px; padding: 0; }
.lanternReportModalOption{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 22px; font-weight: 700; color: var(--ink); cursor: pointer; }
.lanternReportModalOption input{ width: 22px; height: 22px; flex-shrink: 0; }
.lanternReportModal textarea{
  width: 100%; min-height: 72px; box-sizing: border-box;
  font-size: 20px; font-family: inherit; font-weight: 600;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.25);
  color: var(--ink);
  margin-bottom: 10px;
  resize: vertical;
}
.lanternReportModalNote{ font-size: 18px; color: var(--muted); margin: 0 0 16px; line-height: 1.4; }
.lanternReportModalVisuallyHidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lanternReportModalActions{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.lanternReportModalActions button{
  font-size: 20px; font-weight: 800; padding: 12px 18px; border-radius: 12px;
  border: 1px solid var(--line); cursor: pointer; font-family: inherit;
}
.lanternReportModalCancel{ background: rgba(255,255,255,.06); color: var(--ink); }
.lanternReportModalSubmit{ background: rgba(90,167,255,.25); color: var(--ink); }
.lanternReportDetailBtn{
  margin-top: 12px;
  font-size: 20px; font-weight: 800;
  background: transparent; border: none;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
}
.lanternReportDetailBtn:hover{ color: var(--accent); }

/* Contribute / verify: poll opened preview uses same 16:9 image frame as Explore */
.pollModal.pollModal--studioPreview .pollModalImageWrap{
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,.25);
  max-height: none;
}
.pollModal.pollModal--studioPreview .pollModalImage{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Contribute Studio — uniform-scale production modal emulator (shared detail renderer) */
#studioOpenedPreviewInner .studioOpenedPreviewScaleHost {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  margin-inline: auto;
}
#studioOpenedPreviewInner .studioOpenedPreviewScaleStage {
  transform-origin: top left;
}
#studioOpenedPreviewInner .lanternCardDetailModal--studioPreview {
  width: var(--lantern-opened-content-max-width, 520px);
  min-width: var(--lantern-opened-content-max-width, 520px);
  max-width: var(--lantern-opened-content-max-width, 520px);
  margin-inline: auto;
  margin-block: 0;
  box-sizing: border-box;
  border: none;
  box-shadow: none;
  background: transparent;
  flex-shrink: 0;
}
#studioOpenedPreviewInner .lanternCardDetailModal--studioPreview .lanternSurfaceContent {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding: 0 8px 16px;
  box-sizing: border-box;
}

/* ===== Games hub (games.html) — actions inside LanternCards rail shell ===== */
.gamesHubRewardRow{ margin-bottom: 6px; }
.gamesHubCardActions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.gamesHubPlayCard .gamesHubCardVisual .exploreCardVisualEmoji{ font-size: 52px; line-height: 1; }
.gamesHubCardActions .gamesHubCta{ width: 100%; justify-content: center; }
.gamesHubCardActions .gamesHubSecondary{
  width: 100%;
  justify-content: center;
  text-decoration: none;
  border: 2px solid rgba(90,167,255,.35);
  background: rgba(255,255,255,.06);
  font-size: 22px;
  font-weight: 900;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}
/* L-Rail-3a: removed dead `.contentScroller` descendants — `games.html` uses `.lanternScroller` only; sizing/featured chrome from `.exploreCard--size-wide` + card rules above. */
/* Card-driven play: whole hub card proxies hidden trigger buttons */
.wrap.lanternContent .gamesPageShell .gamesHubPlayCard[data-games-proxy-play]{
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.wrap.lanternContent .gamesPageShell .gamesHubPlayCard[data-games-proxy-play]:active{
  transform: scale(0.99);
}
.wrap.lanternContent .gamesPageShell .gamesHubPlayCard[data-games-proxy-play]:focus-visible{
  outline: 2px solid var(--accent, #5aa7ff);
  outline-offset: 3px;
}
.gamesLbRow{
  font-size: 20px;
  font-weight: 800;
  color: var(--muted, #b9c6ea);
  margin-bottom: 4px;
  line-height: 1.25;
}
.exploreCard--gamesLbSummary .gamesHubCardActions{
  gap: 4px;
  padding-top: 8px;
}

/* ===== Cosmetic economy — single Lantern shell (store / locker Items / profile buy grid) ===== */
.exploreCardMetaOneLine--dim{
  color: var(--muted, #b9c6ea);
  font-weight: 800;
  font-size: 20px;
}
.exploreCard--cosmeticRail.lanternCanonicalCard,
.exploreCard--cosmeticRail.exploreCard--size-rail{
  flex: 0 0 var(--lantern-card-width);
  align-self: flex-start;
  position: relative;
  box-sizing: border-box;
  text-align: left;
  display: block;
  padding: 0;
  overflow: hidden;
  width: var(--lantern-card-width);
  min-width: var(--lantern-card-width);
  max-width: var(--lantern-card-width);
  aspect-ratio: var(--lantern-card-aspect-ratio);
  height: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1);
  background: linear-gradient(165deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.04) 42%, rgba(7,12,22,.72) 100%);
  transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease;
}
.exploreCard--cosmeticRail.lanternCanonicalCard:hover,
.exploreCard--cosmeticRail.exploreCard--size-rail:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,.48), 0 0 0 1px rgba(90,167,255,.2), inset 0 1px 0 rgba(255,255,255,.12);
}
.exploreCard--cosmeticRail.exploreCard--cosmeticFeatured:hover{
  transform: translateY(-2px);
}
.exploreCard--cosmeticRail.lanternCanonicalCard .lanternCanonicalCardImage{
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}
.exploreCardCosmeticSpotlightBadge{
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .03em;
  background: rgba(90,167,255,.22);
  border: 1px solid rgba(90,167,255,.48);
  color: var(--ink);
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.exploreCard--cosmeticRail .exploreCardVisual--cosmeticRail .exploreCardVisualEmoji{
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.5));
}
.exploreCard--cosmeticRail .exploreCardHd--preview{
  padding: 6px 12px 0;
}
.exploreCard--cosmeticRail .exploreCardHd--preview .exploreTitle{
  font-weight: 1000;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: .02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exploreCard--cosmeticRail .exploreCardMetaOneLine{
  padding: 0 12px;
  font-size: 20px;
  font-weight: 800;
}
.exploreCard--cosmeticRail.exploreCard--size-rail .exploreCardCosmeticPrice{
  margin: 4px 12px 4px;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--warn, #ffcc66);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 0;
  max-height: 2.5rem;
  overflow: hidden;
}
.exploreCardCosmeticNugget{
  flex-shrink: 0;
  object-fit: contain;
}
.exploreCardCosmeticPriceLabel--equipped{ color: #9cf5c9; font-weight: 1000; }
.exploreCardCosmeticPriceLabel--owned{ color: #b8dcff; font-weight: 1000; }
.exploreCardCosmeticPriceLabel--locked{ color: var(--muted); font-weight: 800; font-size: 24px; }
.exploreCardCosmeticPriceLabel--preview{ color: var(--accent); font-weight: 900; }
.exploreCardCosmeticPriceLabel--muted{ color: var(--muted); font-weight: 800; font-size: 22px; }
.exploreCardCosmeticFoot{
  margin-top: 0;
  flex: 0 0 auto;
  max-height: 64px;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
}
.exploreCardCosmeticBtn{
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .04em;
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(56,208,124,.3), rgba(56,208,124,.12));
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s ease, opacity .15s ease, background .15s ease;
}
.exploreCardCosmeticBtn:hover:not(:disabled){ filter: brightness(1.07); }
.exploreCardCosmeticBtn:disabled{
  cursor: not-allowed;
  opacity: .78;
  border-top-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: var(--muted);
}
.exploreCardCosmeticBtn--primary:enabled{
  background: linear-gradient(180deg, rgba(56,208,124,.38), rgba(56,208,124,.16));
}
.exploreCardCosmeticBtn--equipped:disabled{
  background: linear-gradient(180deg, rgba(56,208,124,.2), rgba(56,208,124,.08));
  color: #b8ffe0;
  opacity: .98;
}
.exploreCardCosmeticBtn--owned:disabled{
  background: linear-gradient(180deg, rgba(90,167,255,.18), rgba(90,167,255,.08));
  color: #d4e8ff;
}
.exploreCardCosmeticBtn--locked:disabled{
  background: rgba(255,255,255,.06);
  border-top-style: dashed;
}
.exploreCardCosmeticBtn--preview:disabled{
  background: linear-gradient(180deg, rgba(90,167,255,.14), rgba(90,167,255,.06));
  color: var(--accent);
  opacity: .92;
}
.exploreCardCosmeticBtn--equip{
  min-height: 48px;
  font-size: 22px;
  border-radius: 12px;
  margin: 10px 12px 12px;
  width: calc(100% - 24px);
  border: 1px solid rgba(56,208,124,.5);
}
.exploreCard--cosmeticRarity-common{ border-color: rgba(255,255,255,.2); }
.exploreCard--cosmeticRarity-uncommon{
  border-color: rgba(90,167,255,.48);
  box-shadow: 0 12px 32px rgba(0,0,0,.38), 0 0 28px rgba(90,167,255,.14), inset 0 1px 0 rgba(255,255,255,.09);
}
.exploreCard--cosmeticRarity-rare{
  border-color: rgba(156,100,255,.52);
  background: linear-gradient(165deg, rgba(156,100,255,.16) 0%, rgba(20,12,40,.78) 55%, rgba(7,8,18,.94) 100%);
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 28px rgba(156,100,255,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
.exploreCard--cosmeticRarity-epic{
  border-color: rgba(200,100,255,.58);
  background: linear-gradient(165deg, rgba(200,100,255,.18) 0%, rgba(35,10,55,.8) 50%, rgba(6,4,14,.96) 100%);
}
.exploreCard--cosmeticRarity-legendary{
  border-color: rgba(242,194,48,.58);
  background: linear-gradient(165deg, rgba(242,194,48,.2) 0%, rgba(55,40,10,.82) 48%, rgba(12,8,4,.97) 100%);
}
.exploreCard--cosmeticEquipped{
  box-shadow: 0 12px 32px rgba(0,0,0,.38), 0 0 28px rgba(56,208,124,.22), inset 0 1px 0 rgba(255,255,255,.1);
  border-color: rgba(56,208,124,.42);
}
.exploreCard--cosmeticLocked{ opacity: .93; }
.exploreCard--cosmeticNeed .exploreCardCosmeticPrice{ color: var(--warn); }
.exploreCard--cosmeticFuture .exploreCardVisual--cosmeticRail{ filter: grayscale(0.35); }
.exploreCard--cosmeticPlaceholder{ opacity: .9; cursor: default; }

/* Locker Items tab — canonical cosmetic cards in horizontal rails (same 280×16:9 as Store) */
#lockerPanelItems .lanternScroller > .exploreCard.exploreCard--cosmeticRail.lanternCanonicalCard,
.lockerShell #lockerPanelItems .lanternScroller > .exploreCard.exploreCard--cosmeticRail.lanternCanonicalCard{
  flex: 0 0 var(--lantern-card-width);
  align-self: flex-start;
  width: var(--lantern-card-width);
  min-width: var(--lantern-card-width);
  max-width: var(--lantern-card-width);
  aspect-ratio: var(--lantern-card-aspect-ratio);
  height: auto;
}
#lockerPanelItems .exploreCard--cosmeticRail.lanternCanonicalCard .lanternCanonicalCardTitle,
#lockerPanelItems .exploreCard--cosmeticRail.exploreCard--size-rail .exploreCardHd--preview .exploreTitle{
  font-size: 22px;
}

/* Profile studio buy grid — Lantern cards in CSS grid (same outer rectangle as rail) */
.profileStudioBuyGrid .exploreCard--cosmeticRail.lanternCanonicalCard,
.profileStudioBuyGrid .exploreCard--cosmeticRail.exploreCard--size-rail{
  width: var(--lantern-card-width);
  min-width: var(--lantern-card-width);
  max-width: var(--lantern-card-width);
  aspect-ratio: var(--lantern-card-aspect-ratio);
  text-align: center;
  box-sizing: border-box;
}
.profileStudioBuyGrid .exploreCard--cosmeticRail .exploreCardCosmeticBtn{
  border-radius: 12px;
  min-height: 48px;
  font-size: 22px;
}

/* Store leaderboard chips — same rail rectangle as other shells (width from .exploreCard--rail.railCardShell) */
.exploreCard--leaderboardChip.exploreCard--size-rail:not(.exploreCard--rail){
  flex: 0 0 auto;
  min-width: 140px;
  max-width: 200px;
  cursor: pointer;
  text-align: left;
  padding-bottom: 12px;
}
.exploreCard.exploreCard--rail.railCardShell.exploreCard--leaderboardChip{
  cursor: pointer;
  text-align: left;
  padding-bottom: 12px;
}
.exploreCard--leaderboardChip.exploreCard--size-rail:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.exploreCard--leaderboardChip .exploreCardVisualIconRail .exploreCardVisualEmoji{ font-size: 40px; }

/* Display mode grid tiles */
.exploreCard--displayNewsTile .exploreCaption--displayNews{
  font-size: clamp(16px, 2vmin, 22px);
  line-height: 1.35;
  margin-top: 6px;
}
.stageGrid .exploreCard--size-rail:not(.exploreCard--rail){
  width: 100%;
  min-width: 0;
  max-width: none;
}