/* mini-pages.css — Project Roblox Phase-5 mini-site
   Inherits palette + type from styles.css (must be loaded BEFORE this file).
   Adds: finalist deep-dive page, tier-2 mini-page, Idea Vault grid + modal. */

/* ── shared deep-dive page chrome ───────────────────────── */

.deep-page { max-width: 960px; margin: 0 auto; padding: 32px 28px 64px; }

.crumb {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  align-items: center;
  font-size: 13px;
  color: #B6C5DE;
  margin-bottom: 22px;
}
.crumb a { color: var(--rb-yellow); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb .sep { color: #7F90AB; }

.dp-hero {
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  margin-bottom: 28px;
}
.dp-hero .art {
  display: block; width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-bottom: 4px solid var(--ink);
}
.dp-hero .meta { padding: 22px 28px 24px; }
.dp-hero .rank-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.dp-hero .rank-row .rank {
  font-family: var(--font-display);
  background: var(--ink); color: var(--rb-yellow);
  padding: 4px 12px; border-radius: 8px; font-size: 16px;
}
.dp-hero .rank-row .score {
  background: var(--rb-yellow); color: var(--ink);
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 14px;
  border: 2px solid var(--ink);
}
.dp-hero .rank-row .tier-pill {
  background: var(--paper-soft); color: var(--ink);
  border: 2px solid var(--ink);
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.dp-hero .rank-row .tier-pill.finalist { background: var(--rb-green); }
.dp-hero .rank-row .tier-pill.tier-2 { background: var(--rb-blue); color: var(--paper); }
.dp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05; margin: 0 0 6px;
  color: var(--ink);
}
.dp-hero .genre {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--rb-blue-d);
}

/* ── twin chat layer (the kid-readable hero card) ──────── */

.twin-layer {
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-block);
  padding: 22px 26px 24px;
  margin-bottom: 28px;
}
.twin-layer .layer-label {
  font-family: var(--font-display);
  font-size: 13px;
  background: var(--rb-yellow); color: var(--ink);
  display: inline-block;
  padding: 4px 12px; border-radius: var(--radius-pill);
  border: 2px solid var(--ink);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 14px;
}

.bubble-row {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 12px 0;
  flex-direction: row-reverse; /* family on RIGHT per BRAND-CANON */
}
.bubble-row .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ink);
  flex: 0 0 44px;
}
.bubble-row .stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.bubble-row .who {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rb-blue-d);
  align-self: flex-end;
}
.bubble {
  background: var(--rb-blue);
  color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  padding: 12px 16px;
  font-size: 17px;
  line-height: 1.5;
  box-shadow: 3px 3px 0 var(--ink);
}
.bubble.is-pitch { font-family: var(--font-display); font-size: 22px; line-height: 1.2; background: var(--rb-yellow); color: var(--ink); }
.bubble.is-mechanic { background: var(--paper-soft); color: var(--ink); }

@media (max-width: 480px) {
  .bubble-row .avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .bubble { font-size: 15px; padding: 10px 13px; }
  .bubble.is-pitch { font-size: 18px; }
}

/* ── signature visual quote block ──────────────────────── */

.sig-visual {
  background: var(--bg-soft);
  color: var(--paper);
  border: 4px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-block);
  padding: 22px 26px 24px;
  margin-bottom: 28px;
}
.sig-visual .layer-label {
  font-family: var(--font-display);
  font-size: 13px;
  background: var(--rb-yellow); color: var(--ink);
  display: inline-block;
  padding: 4px 12px; border-radius: var(--radius-pill);
  border: 2px solid var(--ink);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 14px;
}
.sig-visual blockquote {
  margin: 0; padding: 14px 18px;
  background: var(--ink); color: var(--rb-yellow);
  border-left: 4px solid var(--rb-yellow);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; line-height: 1.6;
  border-radius: 6px;
}

.sig-visual .asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.sig-visual .asset-card {
  display: grid;
  gap: 8px;
  color: var(--paper);
  text-decoration: none;
  min-width: 0;
}
.sig-visual .asset-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
}
.sig-visual .asset-card strong {
  color: var(--rb-yellow);
  overflow-wrap: anywhere;
}

/* ── operator drill-down (collapsible) ─────────────────── */

.operator-drill {
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-block);
  margin-bottom: 28px;
  overflow: hidden;
}
.operator-drill summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 18px 24px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  background: var(--rb-yellow);
  border-bottom: 4px solid var(--ink);
}
.operator-drill summary::-webkit-details-marker { display: none; }
.operator-drill summary::after {
  content: "▾"; margin-left: auto; transition: transform .15s;
}
.operator-drill[open] summary::after { transform: rotate(180deg); }
.operator-drill[open] summary { border-bottom: 4px solid var(--ink); }
.operator-drill .panel {
  padding: 20px 26px 24px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.operator-drill .panel p { margin: 0 0 12px; }
.operator-drill .panel p:last-child { margin-bottom: 0; }
.operator-drill .panel strong { color: var(--ink); }

/* ── brief link card ───────────────────────────────────── */

.brief-link {
  display: flex; align-items: center; gap: 16px;
  background: var(--ink); color: var(--paper);
  border: 4px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-block);
  padding: 18px 24px;
  text-decoration: none;
  margin-bottom: 28px;
  transition: transform .15s, box-shadow .15s;
}
.brief-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.brief-link .ico {
  font-family: var(--font-display);
  background: var(--rb-yellow); color: var(--ink);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 3px solid var(--paper);
  font-size: 20px;
  flex: 0 0 44px;
}
.brief-link .label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brief-link .label .k {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--rb-yellow);
  letter-spacing: 1px; text-transform: uppercase;
}
.brief-link .label .v {
  font-size: 15px;
  color: var(--paper);
  word-break: break-all;
}

/* ── lineup nav strip (jump between finalists) ─────────── */

.lineup-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.lineup-strip a {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none;
  background: var(--bg-soft);
  color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-block);
  padding: 12px 14px;
  transition: transform .15s;
}
.lineup-strip a:hover { transform: translateY(-3px); }
.lineup-strip a.is-current { background: var(--rb-yellow); color: var(--ink); }
.lineup-strip a .k {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--rb-yellow);
  letter-spacing: 1px; text-transform: uppercase;
}
.lineup-strip a.is-current .k { color: var(--ink); }
.lineup-strip a .v { font-weight: 700; font-size: 14px; line-height: 1.2; }

/* ── Idea Vault grid ────────────────────────────────────── */

.vault-controls {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 24px;
}
.vault-controls button {
  font-family: var(--font-body); font-weight: 700;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: var(--shadow-block);
  transition: transform .12s, background .12s;
}
.vault-controls button:hover { transform: translateY(-2px); }
.vault-controls button.is-active { background: var(--rb-yellow); }

.vault-controls input[type="search"] {
  flex: 1 1 200px; min-width: 0;
  font-family: var(--font-body); font-size: 14px;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  box-shadow: var(--shadow-block);
}

.vault-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.vault-card {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow-block);
  padding: 14px 16px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
  font-family: var(--font-body);
  transition: transform .12s, box-shadow .12s;
}
.vault-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.vault-card .top {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 12px;
}
.vault-card .idn {
  font-family: var(--font-display);
  background: var(--ink); color: var(--rb-yellow);
  padding: 2px 8px; border-radius: 6px;
  font-size: 12px;
}
.vault-card .composite { font-weight: 700; font-size: 14px; color: var(--rb-blue-d); }
.vault-card .composite.none { color: #888; font-weight: 500; font-style: italic; }
.vault-card h3 {
  font-family: var(--font-display);
  font-size: 17px; line-height: 1.15;
  margin: 0;
}
.vault-card .premise {
  font-size: 13px; color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vault-card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.vault-card .tag {
  background: var(--paper-soft); color: var(--ink-soft);
  border: 2px solid var(--ink);
  padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: lowercase;
}
.vault-card .tier-pill {
  font-family: var(--font-display);
  font-size: 11px;
  background: var(--paper-soft); color: var(--ink);
  border: 2px solid var(--ink);
  padding: 1px 8px; border-radius: 999px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.vault-card .tier-pill.finalist { background: var(--rb-green); }
.vault-card .tier-pill.tier-2 { background: var(--rb-blue); color: var(--paper); }
.vault-card .tier-pill.tier-3 { background: var(--rb-orange); }
.vault-card .tier-pill.vault { background: var(--paper); }

/* ── Vault modal ────────────────────────────────────────── */

.vault-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.vault-modal.is-open { display: flex; }
.vault-modal .panel {
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  position: relative;
}
.vault-modal .head {
  background: var(--rb-yellow);
  padding: 18px 22px;
  border-bottom: 4px solid var(--ink);
  display: flex; flex-direction: column; gap: 4px;
}
.vault-modal .head h3 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}
.vault-modal .head .sub { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.vault-modal .body { padding: 20px 24px 24px; font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.vault-modal .body h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--rb-blue-d);
  margin: 14px 0 6px;
}
.vault-modal .body h4:first-child { margin-top: 0; }
.vault-modal .matrix {
  display: grid; gap: 6px 14px;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  font-size: 14px;
}
.vault-modal .matrix .ax-name { font-weight: 700; color: var(--ink); }
.vault-modal .matrix .ax-bar {
  background: var(--paper-soft);
  height: 10px; border-radius: 999px;
  border: 2px solid var(--ink);
  overflow: hidden;
}
.vault-modal .matrix .ax-bar > i {
  display: block; height: 100%;
  background: var(--rb-blue);
}
.vault-modal .matrix .ax-score { font-weight: 700; color: var(--rb-blue-d); }
.vault-modal .close {
  position: absolute; top: 12px; right: 14px;
  background: var(--ink); color: var(--rb-yellow);
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  font-family: var(--font-display);
  display: grid; place-items: center;
}

.empty-state {
  background: var(--paper-soft);
  color: var(--ink-soft);
  border: 3px dashed #6F7A99;
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  font-size: 14px;
}

/* per-finalist hero tint inheritance (mirrors finalist.fN on home page) */
.dp-hero.dp-1 .art { background: linear-gradient(135deg, #FF9DD6 0%, #FFA53D 100%); }
.dp-hero.dp-2 .art { background: linear-gradient(135deg, #FFD56B 0%, #FF6F61 100%); }
.dp-hero.dp-3 .art { background: linear-gradient(135deg, #6F3DFF 0%, #3A2E55 100%); }
.dp-hero.dp-4 .art { background: linear-gradient(135deg, #FF3D7F 0%, #6F3DFF 100%); }
.dp-hero.dp-5 .art { background: linear-gradient(135deg, #2A1A3F 0%, #0F0820 100%); }

/* ═══════════════════════════════════════════════════════════
   FINALISTS HUB — /finalists/ index
   Replaces the in-page lineup-strip pattern by giving the lineup
   its own front door, so individual mini-pages can focus on their
   game instead of carrying the whole shelf.
   ═══════════════════════════════════════════════════════════ */
.finalists-hub {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 8px 0 36px;
}
.hub-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-block);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* Featured card (BUILD 1) — full-bleed art on top, copy below */
.hub-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
}
.hub-card--featured .hub-card__art {
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--rb-yellow) 0%, var(--rb-orange) 100%);
  overflow: hidden;
  border-right: 4px solid var(--ink);
}
.hub-card--featured .hub-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hub-card--featured .hub-card__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
}
.hub-card--featured .hub-card__title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.5px;
}
.hub-card--featured .hub-card__pitch {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 4px 0 10px;
}
.hub-card--featured .hub-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--rb-yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* Grid of the remaining 4 finalists */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.hub-grid .hub-card {
  display: flex;
  flex-direction: column;
}
.hub-grid .hub-card__art {
  display: block;
  aspect-ratio: 16 / 10;
  border-bottom: 4px solid var(--ink);
  background: linear-gradient(135deg, var(--rb-blue) 0%, var(--rb-purple) 100%);
  overflow: hidden;
}
.hub-grid .hub-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hub-grid .hub-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
}
.hub-grid .hub-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  margin-top: 4px;
}

/* Row chips shared between featured + grid */
.hub-card__row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.hub-card__rank {
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--rb-yellow);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 1px;
}
.hub-card__pill {
  font-family: var(--font-body);
  font-weight: 700;
  background: var(--paper-soft);
  color: var(--ink-soft);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--ink);
  font-size: 12px;
}
.hub-card__pill--current {
  background: var(--rb-green);
  color: var(--ink);
}
.hub-card__genre {
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.85;
}
.hub-card__cta {
  font-family: var(--font-display);
  color: var(--rb-blue-d);
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-top: 6px;
}

.hub-related {
  display: grid;
  gap: 12px;
  margin: 28px 0 12px;
}
.hub-related .brief-link { margin: 0; }

@media (max-width: 720px) {
  .hub-card--featured { grid-template-columns: 1fr; }
  .hub-card--featured .hub-card__art {
    border-right: 0;
    border-bottom: 4px solid var(--ink);
    aspect-ratio: 16 / 9;
  }
  .hub-card--featured .hub-card__title { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════
   COMMERCIAL STILLS GRID — surfaces the 10 LST ad stills as a
   contact-sheet preview on the LST finalist page.
   ═══════════════════════════════════════════════════════════ */
.stills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 14px 0 8px;
}
.stills-grid a {
  display: block;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.08);
  position: relative;
  text-decoration: none;
}
.stills-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stills-grid a::after {
  content: attr(data-frame);
  position: absolute;
  left: 6px; bottom: 6px;
  background: var(--ink);
  color: var(--rb-yellow);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.stills-grid a:hover { transform: translateY(-2px); box-shadow: var(--shadow-block); }
.stills-caption {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin: 6px 0 0;
}

/* On the LST page, replace the heavyweight lineup-strip with a
   single slim "back to hub" link. */
.lineup-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.lineup-back:hover { background: var(--rb-yellow); transform: translateY(-1px); }