/* PROJECT OHANA V36 · CINEMATIC PRESENTATION SYSTEM
   Canonical styles for room reveals, death/boss beats and final victory. */

/* --------------------------------------------------------------------------
   SHARED FILM LANGUAGE
   -------------------------------------------------------------------------- */
#world-cinema,#cinematic-beat,#win-cinema{
  --film-gold:#ffe39a;--film-cyan:#9be8ff;--film-red:#ff6d83;
  font-family:Outfit,system-ui,sans-serif;
}
#world-cinema .wc-vignette,#cinematic-beat .cb-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,transparent 18%,rgba(0,0,0,.18) 48%,rgba(0,0,0,.72) 112%);
}
#world-cinema .wc-bars::before,#world-cinema .wc-bars::after,
#cinematic-beat .cb-bars::before,#cinematic-beat .cb-bars::after{
  content:"";position:absolute;left:0;right:0;height:clamp(34px,7vh,76px);background:#010307;
  transform:scaleY(0);transition:transform .55s cubic-bezier(.16,1,.3,1);
}
#world-cinema .wc-bars::before,#cinematic-beat .cb-bars::before{top:0;transform-origin:top}
#world-cinema .wc-bars::after,#cinematic-beat .cb-bars::after{bottom:0;transform-origin:bottom}
#world-cinema.show .wc-bars::before,#world-cinema.show .wc-bars::after,
#cinematic-beat.show .cb-bars::before,#cinematic-beat.show .cb-bars::after{transform:scaleY(1)}

/* --------------------------------------------------------------------------
   WORLD / LEVEL REVEALS
   -------------------------------------------------------------------------- */
#world-cinema{
  position:fixed!important;inset:0!important;z-index:58!important;display:grid!important;place-items:center!important;
  opacity:0!important;visibility:visible!important;pointer-events:none!important;overflow:hidden!important;
  background:linear-gradient(180deg,rgba(2,5,12,.12),rgba(2,5,12,.44))!important;
  transition:opacity .42s ease!important;
}
#world-cinema.show{opacity:1!important}
#world-cinema .wc-grid{
  position:absolute;inset:0;opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at center,#000,transparent 72%);
}
#world-cinema .wc-copy{
  position:relative;z-index:3;width:min(920px,90vw);padding:34px;text-align:center;
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .42s ease,transform .76s cubic-bezier(.16,1,.3,1);
}
#world-cinema.show .wc-copy{opacity:1;transform:none}
#world-cinema .wc-index{
  margin:0 0 10px;color:rgba(255,255,255,.46);font:800 9px/1 Outfit,sans-serif;letter-spacing:.44em;text-transform:uppercase;
}
#world-cinema .wc-kicker{
  margin:0 0 8px;color:var(--film-gold);font:800 11px/1 Outfit,sans-serif;letter-spacing:.4em;text-transform:uppercase;
}
#world-cinema h2{
  margin:0;color:#fff;font:700 clamp(44px,8vw,102px)/.88 Fredoka,sans-serif;letter-spacing:-.045em;
  text-shadow:0 12px 60px rgba(0,0,0,.62);
}
#world-cinema .wc-line{
  margin:16px 0 0;color:rgba(244,247,252,.78);font:600 clamp(13px,1.7vw,18px)/1.35 Outfit,sans-serif;letter-spacing:.035em;
}
#world-cinema .wc-rule{
  position:absolute;left:50%;bottom:clamp(70px,12vh,132px);width:min(280px,42vw);height:1px;
  transform:translateX(-50%) scaleX(0);transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--film-gold),transparent);transition:transform .9s .12s ease;
}
#world-cinema.show .wc-rule{transform:translateX(-50%) scaleX(1)}
#world-cinema.room-beach{background:radial-gradient(circle at 50% 70%,rgba(49,178,210,.14),rgba(2,5,12,.44))!important}
#world-cinema.room-jungle{background:radial-gradient(circle at 50% 70%,rgba(71,157,92,.16),rgba(2,5,12,.46))!important}
#world-cinema.room-cave{background:radial-gradient(circle at 50% 58%,rgba(76,108,210,.17),rgba(2,5,12,.54))!important}
#world-cinema.room-lab{background:radial-gradient(circle at 50% 52%,rgba(122,87,232,.18),rgba(2,5,12,.55))!important}
#world-cinema.room-space{background:radial-gradient(circle at 50% 48%,rgba(83,91,212,.19),rgba(1,3,10,.62))!important}
#world-cinema.room-reef{background:radial-gradient(circle at 50% 64%,rgba(25,167,188,.18),rgba(1,6,12,.54))!important}
#world-cinema.room-volcano{background:radial-gradient(circle at 50% 70%,rgba(235,84,33,.22),rgba(9,2,4,.6))!important}
#world-cinema.boss{background:radial-gradient(circle at 50% 48%,rgba(170,18,48,.24),rgba(1,2,7,.78))!important}
#world-cinema.boss .wc-kicker,#world-cinema.boss .wc-index{color:#ff8392!important}
#world-cinema.boss h2{color:#fff0df!important;text-shadow:0 0 44px rgba(255,49,83,.34),0 14px 70px #000!important}
#world-cinema.boss .wc-rule{background:linear-gradient(90deg,transparent,#ff5b76,transparent)!important}

/* --------------------------------------------------------------------------
   CINEMATIC DIRECTOR · DEATH + BOSS FALL
   -------------------------------------------------------------------------- */
#cinematic-beat{
  position:fixed;inset:0;z-index:72;display:grid;place-items:center;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .34s ease;background:rgba(2,5,12,.12);
}
#cinematic-beat.show{opacity:1}
#cinematic-beat .cb-grain{
  position:absolute;inset:-20%;opacity:.035;pointer-events:none;
  background-image:repeating-radial-gradient(circle at 0 0,#fff 0 1px,transparent 1px 4px);
  transform:rotate(7deg) scale(1.25);
}
#cinematic-beat .cb-copy{
  position:relative;z-index:3;width:min(900px,88vw);padding:32px;text-align:center;opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .35s ease,transform .66s cubic-bezier(.16,1,.3,1);
}
#cinematic-beat.show .cb-copy{opacity:1;transform:none}
#cinematic-beat .cb-kicker{margin:0 0 8px;font:800 10px/1 Outfit,sans-serif;letter-spacing:.42em;text-transform:uppercase}
#cinematic-beat h2{margin:0;font:700 clamp(38px,7vw,88px)/.9 Fredoka,sans-serif;letter-spacing:-.035em}
#cinematic-beat .cb-line{margin:14px 0 0;font:600 clamp(13px,1.6vw,17px)/1.35 Outfit,sans-serif;letter-spacing:.03em}
#cinematic-beat.death{background:radial-gradient(circle at 50% 48%,rgba(102,21,84,.08),rgba(1,3,9,.48))}
#cinematic-beat.death .cb-kicker{color:#ffadd1}
#cinematic-beat.death h2{color:#fff6fb;text-shadow:0 0 36px rgba(255,102,184,.28),0 12px 60px #000}
#cinematic-beat.death .cb-line{color:rgba(255,224,240,.76)}
#cinematic-beat.boss-fall{background:radial-gradient(circle at 50% 45%,rgba(255,217,113,.14),rgba(1,3,8,.48))}
#cinematic-beat.boss-fall .cb-kicker{color:#ff8d9b}
#cinematic-beat.boss-fall h2{color:#fff5c9;text-shadow:0 0 38px rgba(255,221,120,.3),0 12px 60px #000}
#cinematic-beat.boss-fall .cb-line{color:#ffeaa8}

/* --------------------------------------------------------------------------
   VICTORY / ENDING · FOUR-BEAT EPILOGUE
   -------------------------------------------------------------------------- */
#win-cinema{
  position:fixed!important;inset:0!important;z-index:82!important;
  display:none!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;pointer-events:none!important;background:transparent!important;
}
#win-cinema.show{display:flex!important;pointer-events:auto!important}
#win-cinema .win-wash{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,229,135,.22),transparent 28%),
    radial-gradient(circle at 50% 72%,rgba(106,218,255,.14),transparent 44%),
    linear-gradient(180deg,rgba(1,4,10,.86),rgba(2,7,15,.94));
  /* The nearly opaque finale does not need a full-screen backdrop filter. */
  backdrop-filter:none;
}
#win-cinema .win-wash::before,#win-cinema .win-wash::after{
  content:"";position:absolute;left:0;right:0;height:clamp(42px,8vh,86px);background:#010306;
}
#win-cinema .win-wash::before{top:0}#win-cinema .win-wash::after{bottom:0}
#win-cinema .win-rift{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
#win-cinema .win-rift i{position:absolute;width:min(76vw,900px);height:2px;background:linear-gradient(90deg,transparent,#fff4bf 32%,#ff6880 52%,#fff4bf 70%,transparent);box-shadow:0 0 20px #fff,0 0 84px #ff4266;transform:rotate(var(--r,0deg)) scaleX(0);opacity:0}
#win-cinema .win-rift i:nth-child(1){--r:-18deg}#win-cinema .win-rift i:nth-child(2){--r:7deg}#win-cinema .win-rift i:nth-child(3){--r:31deg}
#win-cinema.ending-phase-1 .win-rift i{animation:v36-rift 1s cubic-bezier(.16,1,.3,1) both}
#win-cinema.ending-phase-1 .win-rift i:nth-child(2){animation-delay:.08s}#win-cinema.ending-phase-1 .win-rift i:nth-child(3){animation-delay:.16s}
#win-cinema .win-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#win-cinema .win-stars i{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#fff1ad;box-shadow:0 0 14px #ffe070;opacity:0}
#win-cinema.ending-phase-2 .win-stars i,#win-cinema.ending-phase-3 .win-stars i,#win-cinema.ending-phase-4 .win-stars i{animation:v36-star 2.6s var(--d) ease-out infinite}
#win-cinema .win-card{
  position:relative;z-index:3;width:min(720px,90vw);max-height:78vh;overflow:auto;margin:0;padding:40px 42px 34px;
  border:1px solid rgba(255,229,137,.28);border-radius:30px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(4,9,18,.76));
  box-shadow:0 34px 110px rgba(0,0,0,.58),0 0 80px rgba(255,225,128,.12),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(18px);opacity:0;transform:translateY(24px) scale(.965);
}
#win-cinema.cinema-running .win-card{visibility:hidden;pointer-events:none;animation:none!important}
#win-cinema.cinema-complete .win-card{visibility:visible;pointer-events:auto;animation:v36-ending-card .9s cubic-bezier(.16,1,.3,1) both}
#win-cinema .win-kicker{margin:0 0 8px;color:#9fe7ff;font:800 10px/1 Outfit,sans-serif;letter-spacing:.34em;text-transform:uppercase}
#win-cinema .win-act{margin:0 0 12px;color:#ff8a98;font:800 10px/1 Outfit,sans-serif;letter-spacing:.34em;text-transform:uppercase}
#win-cinema h2{margin:0;color:#fff9dc;font:700 clamp(40px,6.8vw,72px)/.9 Fredoka,sans-serif;letter-spacing:-.04em;text-shadow:0 0 38px rgba(255,229,135,.28),0 14px 60px #000}
#win-cinema .win-hero{margin:16px 0 0;color:#fff2bd;font:700 17px/1.2 Outfit,sans-serif}
#win-cinema .win-score{margin:7px 0 16px;color:rgba(218,231,245,.66);font:600 12px/1.4 Outfit,sans-serif}
#win-cinema .win-jun{margin:0 0 8px;color:#ffe66a;font:700 clamp(22px,3.4vw,32px)/1 Fredoka,sans-serif}
#win-cinema .win-sub{max-width:560px;margin:0 auto 22px;color:rgba(183,225,246,.78);font:600 13px/1.5 Outfit,sans-serif}
#win-cinema .win-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;opacity:0;transform:translateY(8px)}
#win-cinema.cinema-complete .win-actions{animation:v36-detail .48s .12s ease both}
#win-cinema button{min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.13);border-radius:11px;background:rgba(6,13,25,.66);color:#fff;font:800 10px/1 Outfit,sans-serif;cursor:pointer}
#win-cinema button:first-child{background:linear-gradient(135deg,#ffe49d,#efb33f);border-color:#ffe08a;color:#1b1206}
#win-cinema button:hover,#win-cinema button:focus-visible{transform:translateY(-1px);border-color:rgba(255,255,255,.34);outline:0}
#win-cinema.ending-phase-4 .win-act{color:#ffe79b;letter-spacing:.44em}
#win-cinema.ending-phase-4 h2{animation:v36-title-breathe 3s ease-in-out infinite}

@keyframes v36-rift{0%{transform:rotate(var(--r)) scaleX(0);opacity:0}35%{opacity:1}72%{transform:rotate(var(--r)) scaleX(1);opacity:.9}100%{transform:rotate(var(--r)) scaleX(1.12);opacity:0}}
@keyframes v36-star{0%{transform:translateY(18px) scale(.4);opacity:0}22%{opacity:.9}100%{transform:translateY(-90px) scale(1.25);opacity:0}}
@keyframes v36-ending-card{0%{opacity:0;transform:translateY(24px) scale(.965)}65%{opacity:1;transform:translateY(-2px) scale(1.005)}100%{opacity:1;transform:none}}
@keyframes v36-detail{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes v36-title-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}

@media(max-width:560px){
  #world-cinema .wc-copy,#cinematic-beat .cb-copy{padding:20px}
  #world-cinema h2,#cinematic-beat h2{font-size:clamp(36px,12vw,58px)}
  #win-cinema .win-card{width:calc(100vw - 24px);padding:28px 18px 24px;border-radius:22px}
  #win-cinema .win-actions{display:grid;grid-template-columns:1fr;width:100%}
}
@media(prefers-reduced-motion:reduce){
  #world-cinema,#world-cinema *,#cinematic-beat,#cinematic-beat *,#win-cinema,#win-cinema *{animation:none!important;transition-duration:.01ms!important}
  #world-cinema.show .wc-copy,#cinematic-beat.show .cb-copy,#win-cinema.show .win-card,#win-cinema.show .win-actions{opacity:1!important;transform:none!important}
  #win-cinema .win-stars{display:none!important}
}


/* V44 · TRUE ENDING */
#win-cinema.show{display:flex!important;z-index:118!important;background:#02050c!important}
#win-cinema .win-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
#win-cinema .win-skip{
  position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:6;
  min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  background:rgba(3,8,18,.56);color:#eaf6ff;font:800 9px/1 Outfit,sans-serif;letter-spacing:.14em;cursor:pointer;
}
#win-cinema.cinema-running .win-card{visibility:hidden!important;opacity:0!important;pointer-events:none!important;transform:translateY(24px) scale(.97)!important}
#win-cinema.cinema-complete .win-card{visibility:visible!important;opacity:1!important;pointer-events:auto!important;animation:v36-ending-card .72s cubic-bezier(.16,1,.3,1) both}
#win-cinema.cinema-complete .win-actions{opacity:1!important;transform:none!important}
/* V381 · Controls belong to the living family portrait. */
#win-cinema .win-card{box-sizing:border-box;position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));width:min(900px,94vw);max-height:29vh;margin:auto;padding:10px 18px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;overflow:auto}
#win-cinema.cinema-complete .win-card{animation:v36-detail .5s ease both}
#win-cinema .win-kicker,#win-cinema .win-act,#win-cinema h2,#win-cinema .win-jun,#win-cinema .win-sub{display:none}
#win-cinema .win-hero{font-size:14px;margin:0;color:#fff1ce}
#win-cinema .win-score{margin:5px 0 12px;color:#d3e4ee}
#win-cinema .win-actions{gap:10px}
#win-cinema button{font-size:12px;min-height:44px}
@media(max-width:560px){#win-cinema .win-card{width:96vw;padding:8px 10px;max-height:31vh}#win-cinema .win-actions{display:flex;flex-wrap:wrap}#win-cinema button{padding:0 12px;font-size:11px}}