/* Cinema hero (BACKLOG.md, owner "Make the first screen cinema"). Loaded last so it wins the
   cascade without hunting down every prior override across styles.css/social.css/lobby.css.
   No locked brand token (--bg/--surface/--ink/--dim/--lime/--mint/--violet/--line, see
   BRAND-LOCK.json) is redefined here - only used for glow/shadow, so the approved palette
   holds and infra/brand-guard.mjs has nothing to restore. */

.social-app .app-layout{max-width:480px}
.social-app{background:radial-gradient(ellipse at 50% -10%,#9b7bff22,transparent 55%),radial-gradient(ellipse at 50% 110%,#c9ff3d12,transparent 50%),#05060c}

/* The whole app reads as a phone screen even on a wide monitor - a dark cinematic backdrop
   around a narrow column, never the dashboard stretched edge to edge. */
.social-app .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.social-app .daily-grid{grid-template-columns:repeat(3,1fr)}

/* The third min() term keeps the row right under the hero (Explore all games) clear of the
   fixed bottom nav on a short, non-maximized desktop window (roughly 550-660px tall, common
   with browser chrome) - without it 66dvh sizes the hero tall enough that the very next row
   lands directly behind the nav on first paint, with no scroll needed to see it (BACKLOG.md,
   "the floating nav still covers the link"). 250px = topbar+margin above the hero (~84px) +
   the gap and height of that row (~64px) + the nav's own height and bottom offset (~90px),
   plus a small buffer; taller windows are unaffected since 560px or 66dvh already wins there. */
.cinema-hero{position:relative;display:block;overflow:hidden;border-radius:26px;background:#000;isolation:isolate;cursor:pointer;height:min(66dvh,560px,calc(100dvh - 250px));margin:0 0 14px;box-shadow:0 30px 70px #000a,0 0 0 1px #ffffff12 inset}
.cinema-hero:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.cinema-media{position:absolute;inset:0}
.cinema-video,.cinema-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cinema-poster{z-index:1}
.cinema-video{z-index:2;opacity:0;transition:opacity .2s ease}
.cinema-video.is-playing{opacity:1}
.cinema-video.is-playing~.cinema-poster{opacity:0}
.cinema-scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,#000000b0 0%,#00000010 26%,#00000018 55%,#000000f0 100%)}
.cinema-overlay{position:relative;z-index:4;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 22px;color:#fff}
.cinema-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cinema-live{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.12em;color:#fff;background:#00000055;border:1px solid #ffffff30;border-radius:20px;padding:6px 11px;backdrop-filter:blur(6px)}
.cinema-pool{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;color:#fff;text-decoration:none;background:#00000055;border:1px solid #ffffff30;border-radius:14px;padding:8px 12px;backdrop-filter:blur(6px)}
.cinema-pool strong{font:800 20px ui-monospace,monospace;color:var(--lime);letter-spacing:-.02em;text-shadow:0 0 18px #c9ff3d55}
.cinema-pool span{font-size:9px;color:#dfe4f2;letter-spacing:.03em}
.cinema-pool #cinema-clock{font-variant-numeric:tabular-nums}
.cinema-pool.tight-clock strong,.cinema-pool.tight-clock #cinema-clock{color:#ff9a3c}
.cinema-bottom{display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.cinema-ticker{margin:0;font-size:12px;color:#dfe4f2;min-height:16px}
.cinema-bottom h1{margin:0;font-size:clamp(32px,9vw,46px);line-height:1.02;letter-spacing:-.02em;text-shadow:0 4px 30px #0009}
.cinema-cta{width:100%;display:flex;justify-content:space-between;align-items:center;box-shadow:0 0 0 1px #00000018 inset,0 14px 40px #c9ff3d33;animation:cinema-breathe 3.4s ease-in-out infinite}
.cinema-cta span{font-size:12px;font-weight:600;opacity:.75}
.cinema-hero .hero-foot{margin-top:2px}

@keyframes cinema-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@keyframes cinema-drift{from{transform:scale(1.05) translateY(0)}to{transform:scale(1.12) translateY(-1.5%)}}
.cinema-video{animation:cinema-drift 20s ease-in-out infinite alternate}

@media(prefers-reduced-motion:reduce){
  .cinema-video{display:none;animation:none}
  .cinema-poster{opacity:1!important}
  .cinema-cta{animation:none}
}

/* Real art on every card, not just an inline icon (BACKLOG.md item 4). A captured frame sits
   over the icon; onerror removes it in markup so the icon shows through as the fallback for
   the handful of slugs with no capture yet. */
.social-app .catalog-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.social-app .catalog-face svg{z-index:0}
.social-app .catalog-card:active{transform:scale(.97)}
.social-app .daily-card:active{transform:scale(.97)}

@media(max-width:700px){
  .cinema-hero{height:66dvh;border-radius:0 0 26px 26px;margin:0 -18px 18px;width:calc(100% + 36px)}
  .cinema-overlay{padding:calc(16px + env(safe-area-inset-top)) 18px 22px}
  .cinema-bottom h1{font-size:clamp(30px,10vw,40px)}
}

/* The bottom nav floats over whatever content is beneath it; the hero's own height (above)
   already keeps it clear of the primary button, this just guarantees clearance for every
   other page too (BACKLOG.md item 9, "the floating nav covers it"). */
.social-app{padding-bottom:max(100px,env(safe-area-inset-bottom) + 90px)}

/* Press feedback stays on the existing action, including a tap on its preview. */
.cinema-cta{transition:transform .18s ease}
.cinema-hero:active:not(:has(.cinema-pool:active)) .cinema-cta{animation:none;transform:scale(.97)}
.cinema-pool{min-height:48px;box-sizing:border-box;justify-content:center}
@media(prefers-reduced-motion:reduce){
  .cinema-video,.cinema-cta{transition:none}
  .cinema-hero:active:not(:has(.cinema-pool:active)) .cinema-cta{transform:none}
}