/* One bounded presentation surface, no hit-driven DOM or background timers. */
.rem-reveal {
  --reveal:#8fdfed; --reveal-rgb:143,223,237;
  width:min(100vw,520px); max-width:100vw; height:100%; height:100dvh; max-height:100dvh;
  box-sizing:border-box; margin:auto; padding:0; border:0; color:#f0f6fc;
  background:radial-gradient(ellipse at 50% 35%,rgba(var(--reveal-rgb),.14),transparent 60%),#050c17;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; font-family:"Yu Gothic UI","Meiryo",sans-serif;
}
.rem-reveal::backdrop { background:rgba(0,4,12,.91); }
.rem-reveal [hidden] { display:none !important; }
.rem-reveal[data-rarity="rare"] { --reveal:#c6b8ff; --reveal-rgb:198,184,255; }
.rem-reveal[data-rarity="legendary"],.rem-reveal[data-kind="limit"] { --reveal:#f5d69b; --reveal-rgb:245,214,155; }
.rem-reveal[data-kind="level"],.rem-reveal[data-kind="ascend"] { --reveal:#9aeacb; --reveal-rgb:154,234,203; }
.rem-reveal-stage { min-height:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; padding:calc(34px + env(safe-area-inset-top)) 26px calc(22px + env(safe-area-inset-bottom)); text-align:center; }
.rem-reveal-eyebrow { margin:0; font:600 11px/1.6 monospace; letter-spacing:.15em; color:var(--reveal); }
.rem-reveal-visual { position:relative; flex:0 0 auto; width:100%; height:clamp(210px,36dvh,330px); margin:auto 0 8px; display:grid; place-items:center; isolation:isolate; }
.rem-reveal-orbit { position:absolute; width:68%; aspect-ratio:1; border:1px solid rgba(var(--reveal-rgb),.35); transform:rotate(45deg); z-index:-1; }
.rem-reveal-orbit::after { content:""; position:absolute; inset:10px; border:1px solid rgba(var(--reveal-rgb),.13); }
.rem-reveal-orbit--b { width:80%; border-radius:50%; border-style:dashed; opacity:.45; }
.rem-reveal-chest { display:block; width:min(82%,290px); height:90%; object-fit:contain; image-rendering:auto; position:relative; z-index:2; }
.rem-reveal-emblem { position:relative; display:grid; place-items:center; width:150px; height:150px; transform:rotate(45deg); border:3px solid var(--reveal); background:linear-gradient(135deg,#193e40,#061923); box-shadow:0 0 0 9px #050c17,0 0 0 10px rgba(var(--reveal-rgb),.32); }
.rem-reveal-emblem span { position:absolute; inset:14px; border:1px solid rgba(var(--reveal-rgb),.55); }
.rem-reveal-emblem b { transform:rotate(-45deg); font:800 40px/1 "Bahnschrift","Meiryo",sans-serif; color:var(--reveal); }
.rem-reveal-emblem i { position:absolute; inset:-20px; border:1px solid rgba(var(--reveal-rgb),.2); }
.rem-reveal-crest { display:none; position:absolute; width:112px; height:68px; top:0; color:var(--reveal); }
.rem-reveal[data-kind="limit"][data-level="4"] .rem-reveal-crest { display:block; }
.rem-reveal-rays { position:absolute; inset:-6%; z-index:-1; border-radius:50%; background:repeating-conic-gradient(from 0deg,transparent 0 22deg,rgba(var(--reveal-rgb),.18) 22deg 25deg,transparent 25deg 45deg); opacity:0; transform:scale(.2); }
.rem-reveal-ripple { position:absolute; width:45%; aspect-ratio:1; border:3px solid var(--reveal); border-radius:50%; opacity:0; }
.rem-reveal-motes { position:absolute; inset:0; pointer-events:none; }
.rem-reveal-motes i { position:absolute; top:50%; left:50%; width:5px; height:8px; background:var(--reveal); opacity:0; transform:rotate(calc(var(--i)*22.5deg)) translateY(-32px); }
.rem-reveal-progress { display:flex; gap:10px; margin:4px 0 16px; }
.rem-reveal-progress i { width:8px; height:8px; transform:rotate(45deg); background:#233543; border:1px solid #49616b; }
.rem-reveal-progress .is-lit { border-color:var(--reveal); background:var(--reveal); }
.rem-reveal h2 { margin:0 0 14px; color:#f4f8ff; font-size:clamp(23px,6.5vw,30px); line-height:1.45; letter-spacing:.03em; }
.rem-reveal-result { width:100%; margin:0 0 24px; padding:16px 0; border-block:1px solid rgba(var(--reveal-rgb),.32); }
.rem-reveal .rem-reveal-result[hidden] { display:block !important; visibility:hidden; }
.rem-reveal-subtitle { color:#edf5fa; font-size:17px; font-weight:700; margin:0 0 9px; line-height:1.6; overflow-wrap:anywhere; }
.rem-reveal-result strong { display:block; color:var(--reveal); font-size:clamp(24px,7vw,36px); line-height:1.45; overflow-wrap:anywhere; }
.rem-reveal-result #rem-reveal-detail { font-size:13px; line-height:1.85; color:#d0dee9; margin:12px 0 0; white-space:pre-line; overflow-wrap:anywhere; }
.rem-reveal-action { margin-top:auto; width:100%; min-height:52px; flex:0 0 auto; padding:13px; background:#112230; color:#dbe8ed; border:1px solid #517080; border-radius:4px; font:700 14px/1.5 "Meiryo",sans-serif; cursor:pointer; }
.rem-reveal-action:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.rem-reveal-action:active { transform:scale(.98); }
.rem-reveal-foot { font-size:11px; line-height:1.6; color:#93aaba; margin:14px 0 0; }
.rem-reveal.is-charging .rem-reveal-chest { animation:rem-reveal-lift 1.4s ease-in-out both; }
.rem-reveal.is-charging .rem-reveal-emblem { animation:rem-reveal-forge 1.4s ease-in-out both; }
.rem-reveal.is-charging .rem-reveal-orbit--a { animation:rem-reveal-seal 1.5s ease-out both; }
.rem-reveal.is-revealed .rem-reveal-chest { animation:rem-reveal-unseal .7s cubic-bezier(.16,1,.3,1) both; }
.rem-reveal.is-revealed .rem-reveal-emblem { animation:rem-reveal-crown .7s cubic-bezier(.16,1,.3,1) both; }
.rem-reveal.is-revealed .rem-reveal-rays { animation:rem-reveal-rays 1s ease-out both; }
.rem-reveal.is-revealed .rem-reveal-ripple { animation:rem-reveal-wave .75s ease-out both; }
.rem-reveal.is-revealed .rem-reveal-motes i { animation:rem-reveal-mote .95s ease-out both; }
.rem-reveal.is-revealed .rem-reveal-result { animation:rem-reveal-copy .4s .1s ease-out both; }
.rem-reveal.is-revealed .rem-reveal-action { background:linear-gradient(100deg,var(--reveal),#ebf3e9); color:#0a2029; border-color:var(--reveal); }
.rem-reveal[data-rarity="legendary"].is-revealed .rem-reveal-orbit--b { border-style:solid; border-width:3px; opacity:.7; }
@keyframes rem-reveal-lift { from{transform:translateY(25px) scale(.9)} to{transform:translateY(-12px) scale(1.05)} }
@keyframes rem-reveal-forge { from{transform:rotate(10deg) scale(.65)} to{transform:rotate(45deg) scale(1)} }
@keyframes rem-reveal-seal { from{transform:rotate(-45deg) scale(.65);opacity:.1} to{transform:rotate(45deg) scale(1);opacity:1} }
@keyframes rem-reveal-unseal { from{transform:scale(.83) translateY(-16px)} to{transform:scale(1.08) translateY(-8px)} }
@keyframes rem-reveal-crown { from{transform:rotate(45deg) scale(.8)} to{transform:rotate(45deg) scale(1.12)} }
@keyframes rem-reveal-rays { 0%{transform:rotate(-16deg) scale(.2);opacity:0} 30%{opacity:.9} 100%{transform:rotate(12deg) scale(1);opacity:.3} }
@keyframes rem-reveal-wave { from{transform:scale(.5);opacity:.9} to{transform:scale(2.4);opacity:0} }
@keyframes rem-reveal-mote { 0%{opacity:0} 12%{opacity:1} 100%{opacity:0;transform:rotate(calc(var(--i)*22.5deg)) translateY(-165px) scale(.2)} }
@keyframes rem-reveal-copy { from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} }
@media(max-height:640px) { .rem-reveal-stage{padding-top:18px} .rem-reveal-visual{height:180px;margin-top:12px} .rem-reveal-emblem{width:110px;height:110px} }
@media(prefers-reduced-motion:reduce) { .rem-reveal *, .rem-reveal *::before, .rem-reveal *::after{animation:none!important;transition:none!important} .rem-reveal-motes,.rem-reveal-rays,.rem-reveal-ripple{display:none} }