.gem-stage{display:none;--film-opacity:1;--bloom:0}
.cinematic-stage[data-renderer="gem-v22"]{overflow:hidden;background:#241b2e}
.cinematic-stage[data-renderer="gem-v22"]>:not(.gem-stage){display:none!important}
.cinematic-stage[data-renderer="gem-v22"] .gem-stage{display:block;position:absolute;inset:0;margin:auto;width:min(100%,405px);height:auto;max-height:100%;aspect-ratio:9/16;background:#241b2e url('/experience-v2-2/media/heart-bg.jpg') center/cover;overflow:hidden;isolation:isolate}
.gem-stage #fallback-image,.gem-stage #cinema,.gem-stage #bloom,.gem-stage #reveal{position:absolute;inset:0;width:100%;height:100%}
.gem-stage #fallback-image{z-index:0;object-fit:cover;opacity:var(--film-opacity);transition:opacity .6s ease-out}
.gem-stage #cinema{z-index:1;opacity:var(--film-opacity);transition:opacity .6s ease-out}
.gem-stage #bloom{z-index:3;pointer-events:none;background:radial-gradient(ellipse at 50% 47%,#fff 0%,#fff8ee 28%,#e8d4fa80 60%,#f9eefb00 85%);opacity:var(--bloom);transition:opacity .35s ease-out}
.gem-stage #reveal{z-index:4;display:flex;align-items:center;justify-content:center;padding:26px}
.gem-stage #reveal .gem-result-item{width:100%;min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px;border-radius:16px;border:1px solid #fff9e1b0;background:linear-gradient(145deg,#fff8f4f2,#e4d7f0e8 60%,#f6e5e9f2);box-shadow:0 0 45px #fff5d978,0 18px 45px #2c1b4d80;color:#49314e;text-align:center}
.gem-stage #reveal b{font:100px Georgia,serif;text-shadow:0 0 25px #fff}
.gem-stage #reveal h2{font-size:18px;line-height:1.7;font-weight:500}
.gem-stage #reveal .gem-result-item[data-rank=C] b{color:#3977bb}
.gem-stage #reveal .gem-result-item[data-rank=B] b{color:#188553}
.gem-stage #reveal .gem-result-item[data-rank=A] b{color:#b52c58}
.gem-stage #reveal .gem-result-item[data-rank=S] b{color:#af8640}
.gem-stage #reveal.gem-ten-results{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);gap:7px;padding:26px 18px}
.gem-stage #reveal.gem-ten-results .gem-result-item{min-height:0;height:100%;padding:5px}
.gem-stage #reveal.gem-ten-results b{font-size:34px}
.gem-stage #reveal.gem-ten-results h2{font-size:10px;margin:3px}
.gem-stage .gem-decoder{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.gem-stage #single-still,.gem-stage #ten-gems{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.gem-stage #single-still{object-fit:cover}
.gem-stage #film{width:100%;height:100%;z-index:2;object-fit:cover;opacity:var(--film-opacity);transition:opacity .23s ease-out}
.gem-stage #ten-gems{z-index:2;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);gap:7px;padding:26px 18px}
.gem-stage .ten-gem{display:grid;place-items:center;overflow:hidden;position:relative;border:1px solid #e6d0fa55;border-radius:13px;background:radial-gradient(circle,#f1d6ff1a,#ffffff00 65%)}
.gem-stage .ten-gem img{display:block;max-width:88%;max-height:82%;object-fit:contain;filter:drop-shadow(0 0 12px #ffe6ff86);transition:filter .24s ease,transform .24s ease,opacity .18s ease}
.gem-stage .ten-gem[data-rank=C] img{filter:drop-shadow(0 0 12px #6caaffb0)}
.gem-stage .ten-gem[data-rank=B] img{filter:drop-shadow(0 0 14px #67eab5b0)}
.gem-stage .ten-gem[data-rank=A] img{filter:drop-shadow(0 0 15px #ff7189b0)}
.gem-stage .ten-gem[data-rank=S] img{filter:drop-shadow(0 0 18px #fff1b8d9)}
.gem-stage .ten-gem.pulse img{animation:gem-heart-pulse .42s ease-out}
.gem-stage .ten-gem.breaking img{animation:gem-heart-break .35s ease-in forwards}
.gem-stage .ten-gem.opened img{opacity:0}
.gem-stage #reveal:not(.gem-ten-results) .gem-result-item{animation:gem-heart-card .25s ease-out}
@keyframes gem-heart-pulse{0%{transform:scale(.9);filter:brightness(1.7)}100%{transform:scale(1)}}
@keyframes gem-heart-break{0%{transform:scale(1)}50%{transform:scale(1.12);filter:brightness(2.5)}100%{transform:scale(.68);opacity:0}}
@keyframes gem-heart-card{from{opacity:0;transform:scale(.96);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.gem-stage[data-state=HISTORY] #fallback-image{opacity:0}
.gem-stage[data-ten=true] #fallback-image{display:none}
.gem-stage [hidden]{display:none!important}
.cinematic-stage[data-renderer="gem-v22"] + .draw-phase{visibility:hidden;height:0;margin:0;overflow:hidden}
.admin-demo-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:16px 0}
.admin-demo-controls label{display:grid;gap:6px}
.admin-demo-controls select{min-height:40px}
.admin-demo-player.cinematic-stage{position:relative;width:min(100%,390px);height:690px;margin:16px auto;border-radius:20px}
@keyframes gem-arrival{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.gem-stage *{animation:none!important;transition:none!important}}