/* LUNER — the Area-2 rectangle. Shared structural contract, matching
 * games/layout-budget.json exactly (docs/rebuild/03_TEMPLATES.md §5).
 *
 * Extracted verbatim from app/experience.html (not re-typed) so the runtime and
 * the portal's create-preview genuinely share this file, not two look-alike
 * copies — see docs/rebuild/01_PORTAL.md §2: "Do NOT build a second divergent
 * preview renderer... Extract the rectangle into shared code both consume."
 *
 * Same frame size on every layer by design. T.1 (slot-brand) fixed height,
 * T.2/T.3 (slot-title/slot-subtitle) capped, slot-body is the flexible
 * remainder (the "orange zone") and centers short content instead of letting
 * it stack at one edge with a dead gap. slot-action is the CTA row.
 *
 * What's NOT in here, deliberately: page-specific content inside the slots
 * (form fields, social buttons, question cards, results/leaderboard markup)
 * and the CTA button's own look — those vary per layer/consumer and stay
 * local to whatever's rendering them.
 */

/* Fixed vertical rectangle — layout budget (games/layout-budget.json): T.1/T.2/T.3 capped, orange zone flex */
.luner-frame {
  position: relative; z-index: 10;
  width: min(92vw, 420px);
  height: min(80dvh, 660px);
  max-height: min(80dvh, 660px);
  display: grid;
  grid-template-rows: auto auto auto minmax(40px, 1fr) auto;
  overflow: hidden;
  padding: clamp(28px, 4.5vw, 36px) clamp(22px, 4vw, 30px) clamp(24px, 3.5vw, 30px);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 4px 80px var(--shadow-color), 0 2px 0 rgba(255,255,255,0.22) inset;
  text-align: center;
  animation: cardRise 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes cardRise {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.slot-brand { max-height: 72px; overflow: hidden; }
.slot-brand .brand-logo {
  max-width: 120px; max-height: 40px; display: none; margin: 0 auto 6px;
}
.slot-brand .logo-text {
  font-family: var(--font-heading);
  font-size: clamp(20px, 4.2vw, 28px);
  font-weight: 800;
  letter-spacing: clamp(2px, 0.9vw, 4px);
  line-height: 1.12;
  color: var(--ink-primary);
  margin-bottom: 4px;
}
.slot-brand .logo-sub {
  font-size: 8px; font-weight: 600; letter-spacing: 3px;
  color: var(--ink-tertiary); text-transform: uppercase;
  margin-bottom: 12px;
}
.rule {
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  margin: 0 auto 12px;
}
.slot-title {
  font-family: var(--font-heading);
  font-size: clamp(18px, 4vw, 24px);
  font-weight: 700; color: var(--ink-primary);
  line-height: 1.22; margin-bottom: 6px;
  max-height: 56px; overflow: hidden;
}
.slot-subtitle {
  font-size: 13px; color: var(--ink-secondary);
  line-height: 1.45; margin-bottom: 14px;
  max-height: 48px; overflow: hidden;
}
.slot-subtitle:empty { display: none; margin: 0; padding: 0; }

.slot-body {
  position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
/* The frame height is fixed (up to 660px, 80dvh on smaller screens) so it stays identical across
   every layer (docs/rebuild/03_TEMPLATES.md §5) — but with no vertical centering,
   short content (e.g. the 2-field landing form) stacked at one edge of that space,
   leaving a large, uneven dead gap. Centering distributes the slack evenly instead.
   overflow-y:auto is unaffected — long content (leaderboards, long surveys) still
   scrolls normally; this only changes alignment when content is shorter than the
   available space. */
.slot-body > [data-section] { width: 100%; }
.slot-body [data-section] {
  animation: sectionIn 0.18s ease forwards;
}
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.slot-action { margin-top: 6px; }

@media (max-width: 480px) {
  .luner-frame { width: min(94vw, 400px); padding: 26px 22px 24px; }
}
@media (min-width: 768px) {
  .luner-frame { width: min(420px, 36vw); }
}