/* 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 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;
  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; width: 100%; text-align: center; }
.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;
  text-align: center;
  overflow-wrap: anywhere;
}
.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;
  text-align: center;
  text-wrap: balance;
  width: 100%;
}
.slot-subtitle {
  font-size: 13px; color: var(--ink-secondary);
  line-height: 1.45; margin-bottom: 0;
  max-height: 48px; overflow: hidden;
  text-align: center;
  text-wrap: balance;
  width: 100%;
}
.slot-subtitle:empty { display: none; margin: 0; padding: 0; }

/* T.2/T.3 live in the flexible “yellow zone” above layer content — centered in that band */
.slot-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 72px;
  padding: 6px 0 12px;
}

.slot-body {
  position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.slot-content {
  flex-shrink: 0;
  width: 100%;
}
.slot-body .answer-btn {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
/* 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],
.slot-body > .slot-content {
  flex-shrink: 0;
  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); }
}

/* Interaction hosts: one page scroll surface — card grows with content (games keep fixed frame). */
body:not([data-presentation-structure="game"]) .luner-frame {
  height: auto;
  max-height: none;
  overflow: visible;
}
body:not([data-presentation-structure="game"]) .slot-body {
  overflow: visible;
  min-height: 0;
}
body:not([data-presentation-structure="game"]) .slot-brand:not(:has(.brand-logo[src]:not([style*="display: none"]))) {
  max-height: none;
}
body:not([data-presentation-structure="game"]) .slot-brand.logo-absent,
body:not([data-presentation-structure="game"]) .slot-brand:not(:has(img.brand-logo[src])) {
  max-height: none;
}
body:not([data-presentation-structure="game"]) .slot-action {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}