/* Scoped, GPU-friendly effects. No flashing screen, video, canvas or remote assets. */
.gacha-reveal { --drop:#8fd3ff; --glow:#397ac9; position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); box-sizing:border-box; border:0; color:#f5f8ff; background:radial-gradient(ellipse at 50% 30%,#142c46 0%,#070c19 54%,#02050b 100%); font-family:var(--font-body, sans-serif); overflow-y:auto; overscroll-behavior:contain; isolation:isolate; }
.gacha-reveal[open] { display:flex; flex-direction:column; }
.gacha-reveal::backdrop { background:#02050b; }
html:has(.gacha-reveal[open]) { overflow:hidden; }
.gacha-reveal[data-tier="SR"], .reveal-card[data-tier="SR"] { --drop:#cf9bff; --glow:#9044ce; }
.gacha-reveal[data-tier="SSR"], .reveal-card[data-tier="SSR"] { --drop:#ffdf82; --glow:#bd771c; }
.gacha-reveal[data-tier="UR"], .reveal-card[data-tier="UR"] { --drop:#b7fff0; --glow:#8664dc; }
.reveal-card[data-tier="N"] { --drop:#b8d4e9; --glow:#3c637e; }
.reveal-card[data-tier="R"] { --drop:#6bbcff; --glow:#246abe; }
.reveal-atmosphere { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.reveal-rays { position:absolute; width:140vmax; height:140vmax; left:calc(50% - 70vmax); top:calc(35% - 70vmax); background:repeating-conic-gradient(from 0deg,transparent 0deg 13deg,var(--glow) 14deg 15deg,transparent 16deg 30deg); opacity:.14; mask-image:radial-gradient(circle,#000 0%,transparent 65%); animation:reveal-rays 8s ease-out both; }
.reveal-ring { position:absolute; left:50%; top:35%; width:min(65vw,430px); aspect-ratio:1; border:1px solid var(--drop); border-radius:50%; box-shadow:0 0 45px var(--glow),inset 0 0 35px var(--glow); transform:translate(-50%,-50%); opacity:.5; animation:reveal-ring 1s ease-out both; }
.reveal-ring--outer { width:min(85vw,580px); border-style:dashed; opacity:.24; animation-duration:1.4s; }
.reveal-top { display:flex; justify-content:space-between; align-items:center; gap:12px; position:relative; z-index:2; }
.reveal-top>span { font-size:.62rem; letter-spacing:.16em; color:#c3ccdf; }
.gacha-reveal button { min-height:48px; flex-shrink:0; padding:10px 18px; border:1px solid #60718e; border-radius:999px; background:#0b1425; color:#f5f8ff; font:700 .85rem var(--font-body,sans-serif); cursor:pointer; }
.gacha-reveal button:focus-visible { outline:3px solid var(--drop); outline-offset:4px; }
.reveal-charge { position:absolute; top:35%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }
.reveal-crystal { width:140px; height:140px; margin:40px; display:grid; place-items:center; transform:rotate(45deg); border:2px solid var(--drop); background:linear-gradient(135deg,#ffffff38,var(--glow),#070c19); box-shadow:0 0 35px var(--glow),0 0 100px var(--glow),inset 0 0 45px #ffffff38; animation:reveal-charge .95s cubic-bezier(.2,.7,.2,1) both; }
.reveal-crystal span { display:block; transform:rotate(-45deg); color:var(--drop); font-size:5rem; text-shadow:0 0 24px #fff9; }
.reveal-charge p { font-size:.65rem; letter-spacing:.35em; color:var(--drop); }
.gacha-reveal[data-phase="revealing"] .reveal-charge,.gacha-reveal[data-phase="complete"] .reveal-charge { display:none; }
.reveal-charge { width:min(100%,440px); }
.reveal-crystal { margin:40px auto; transition:box-shadow .8s,background .8s,border-color .8s; }
.reveal-charge p { min-height:3em; padding:0 16px; font-size:.9rem; letter-spacing:.12em; line-height:1.8; }
.reveal-seals { display:flex; justify-content:center; gap:14px; }
.reveal-seals i { width:32px; height:3px; background:#455269; transition:background .8s,box-shadow .8s; }
[data-phase="omen"] .reveal-seals i:first-child,[data-phase="suspense"] .reveal-seals i,[data-phase="guarantee"] .reveal-seals i { background:var(--drop); box-shadow:0 0 18px var(--drop); }
[data-phase="omen"] .reveal-crystal { animation:reveal-anticipate 1.6s ease-in-out both; }
[data-phase="suspense"] .reveal-crystal { animation:reveal-hold .8s ease-out both; }
[data-phase="suspense"] .reveal-atmosphere { opacity:.12; transition:opacity .7s; }
[data-phase="guarantee"] .reveal-crystal { animation:reveal-awaken 1.7s cubic-bezier(.16,1,.3,1) both; }
[data-phase="guarantee"] .reveal-ring { animation:reveal-ring 1.6s ease-out both; }
[data-pattern="gold-break"][data-phase="guarantee"] .reveal-crystal { border-style:dashed; animation:reveal-break 1.7s ease-out both; }
[data-pattern="blueprint"][data-phase="guarantee"] .reveal-crystal { border-radius:8px; outline:2px solid var(--drop); outline-offset:12px; }
[data-pattern="double-star"][data-phase="guarantee"] .reveal-crystal span { font-size:3rem; white-space:nowrap; }
[data-pattern="rainbow"][data-phase="guarantee"] .reveal-crystal { background:conic-gradient(#8fffe1,#9c8dff,#ff9ad5,#fff0a5,#8fffe1); box-shadow:0 0 100px #aa8bff; }
@keyframes reveal-anticipate { from { transform:rotate(45deg) scale(1.05); } to { transform:rotate(135deg) scale(1.2); } }
@keyframes reveal-hold { from { transform:rotate(135deg) scale(1.2); } to { transform:rotate(135deg) scale(.85); filter:brightness(.45); } }
@keyframes reveal-awaken { from { transform:rotate(135deg) scale(.85); filter:brightness(.45); } 45% { transform:rotate(225deg) scale(1.25); } to { transform:rotate(225deg) scale(1.1); } }
@keyframes reveal-break { from { transform:rotate(135deg) scale(.85); } 45% { transform:rotate(225deg) scale(1.35); } to { transform:rotate(225deg) scale(1.05); } }
.reveal-payload { width:min(1100px,100%); margin:auto; padding:28px 0 20px; text-align:center; }
.reveal-kicker { color:var(--drop); font-size:.72rem; letter-spacing:.28em; font-weight:800; }
.reveal-payload h2 { margin:8px 0; font-family:var(--font-display,sans-serif); font-size:clamp(2rem,7vw,5.7rem); line-height:1; letter-spacing:-.035em; color:var(--drop); text-shadow:0 0 30px var(--glow); overflow-wrap:anywhere; }
.gacha-reveal[data-tier="UR"] .reveal-payload h2 { background:linear-gradient(100deg,#a3fff1,#f4b6ff,#fff3a5,#a3fff1); background-clip:text; color:transparent; }
.reveal-subtitle { color:#c3ccdf; font-size:.83rem; margin:16px 0 24px; }
.reveal-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; list-style:none; margin:0; padding:0; perspective:1200px; }
.reveal-cards[data-count="1"] { grid-template-columns:minmax(0,300px); justify-content:center; }
.reveal-card { position:relative; min-width:0; padding:20px 12px 16px; overflow:hidden; border:1px solid var(--drop); border-radius:14px; background:linear-gradient(155deg,#ffffff0c,transparent 45%),linear-gradient(25deg,#0a1023 60%,var(--glow)); box-shadow:0 8px 25px #0008,0 0 18px color-mix(in srgb,var(--glow),transparent 65%); animation:reveal-card .7s cubic-bezier(.16,1,.3,1) var(--delay) both; }
.reveal-card::after { content:""; position:absolute; inset:-100%; pointer-events:none; background:linear-gradient(110deg,transparent 40%,#fff4 49%,transparent 56%); transform:translateX(-70%); animation:reveal-shine .9s ease-out calc(var(--delay) + .35s) both; }
.reveal-card__index { position:absolute; top:10px; left:12px; color:#b1bdd4; font-size:.6rem; letter-spacing:.08em; }
.reveal-card__symbol { display:block; font-size:3rem; line-height:1.1; margin:12px 0; color:var(--drop); text-shadow:0 0 20px var(--glow); }
.reveal-card__tier { display:inline-block; color:var(--drop); font-weight:900; letter-spacing:.16em; font-size:1rem; }
.reveal-card h3 { margin:10px 0; font-size:.94rem; overflow-wrap:anywhere; }
.reveal-card p { font-size:.56rem; letter-spacing:.1em; color:#c3ccdf; }
.reveal-card strong,.reveal-card small { display:block; font-size:.76rem; line-height:1.6; overflow-wrap:anywhere; }
.reveal-card small { color:#c3ccdf; font-size:.62rem; margin-top:8px; }
.reveal-card[data-tier="SSR"],.reveal-card[data-tier="UR"] { border-width:2px; box-shadow:0 0 25px color-mix(in srgb,var(--glow),transparent 20%),inset 0 0 25px #ffffff0c; }
.reveal-sparks { position:absolute; left:50%; top:35%; }
.reveal-sparks i { position:absolute; width:5px; height:15px; background:var(--drop); border-radius:1px; opacity:0; }
.gacha-reveal[data-phase="revealing"] .reveal-sparks i { animation:reveal-spark 1.5s ease-out var(--delay) both; }
.reveal-footer { position:sticky; bottom:0; z-index:3; text-align:center; margin-top:auto; padding:12px 0; border-radius:16px; background:#070c19ed; box-shadow:0 -12px 24px #070c19; }
.reveal-footer p { font-size:.85rem; color:var(--drop); }
.reveal-footer small { display:block; color:#aab8cf; font-size:.66rem; margin:12px 0 0; }
.reveal-footer button { width:min(320px,100%); border-color:var(--drop); color:#0b1020; background:var(--drop); box-shadow:0 0 28px var(--glow); }
.gacha-reveal[data-phase="complete"] .reveal-card { animation:none; }
.gacha-reveal[data-phase="complete"] .reveal-atmosphere * { animation:none; }
.gacha-reveal[data-phase="complete"] .reveal-card::after { display:none; }
@keyframes reveal-rays { from { transform:rotate(-30deg); } to { transform:rotate(30deg); } }
@keyframes reveal-ring { from { transform:translate(-50%,-50%) scale(.4); opacity:0; } }
@keyframes reveal-charge { from { transform:rotate(-45deg) scale(.5); opacity:0; } to { transform:rotate(45deg) scale(1.05); opacity:1; } }
@keyframes reveal-card { from { transform:translateY(45px) rotateY(85deg) scale(.7); opacity:0; } to { transform:none; opacity:1; } }
@keyframes reveal-shine { to { transform:translateX(70%); } }
@keyframes reveal-spark { 0% { opacity:0; transform:rotate(var(--angle)) translateY(10px) scale(.2); } 15% { opacity:1; } 100% { opacity:0; transform:rotate(var(--angle)) translateY(var(--distance)) scale(.3); } }
@media(max-width:700px) { .reveal-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .reveal-card { padding:16px 8px 12px; } .reveal-card__symbol { font-size:2.2rem; } .reveal-payload { padding-top:24px; } .reveal-top>span { max-width:130px; line-height:1.7; } }
@media(prefers-reduced-motion:reduce) { .gacha-reveal *,.gacha-reveal *::after { animation:none !important; } .reveal-charge,.reveal-sparks { display:none; } }
html[data-motion="reduced"] .gacha-reveal *,html[data-motion="reduced"] .gacha-reveal *::after { animation:none !important; }