/* A short, earned reveal. The unrevealed material never hints at the result. */
dialog.rank-reveal{position:fixed;inset:0;margin:0;padding:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;background:#100d19;color:#fff6ec;overflow:auto;overscroll-behavior:contain;isolation:isolate;font-family:var(--sans,sans-serif);box-sizing:border-box}
dialog.rank-reveal[open]{display:grid;grid-template-rows:auto minmax(220px,1fr) auto}
.rank-reveal::backdrop{background:#100d19}
.rank-reveal-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,#534256 0,transparent 65%),#100d19;transition:background .4s}
.rank-reveal-header{text-align:center;padding:calc(16px + env(safe-area-inset-top)) 20px 6px;z-index:1}
.rank-reveal-header>span{font-size:12px;letter-spacing:.3em;color:#c2abc5}
.rank-reveal-header h1{font:500 21px/1.5 var(--serif,serif);letter-spacing:.13em;margin:3px 0;color:#fff3db;text-shadow:0 2px 8px #000}
.rank-reveal-stage{display:grid;place-items:center;min-height:0;padding:14px 20px;perspective:1000px;container-type:size}
.rank-reveal-card{position:relative;width:min(76vw,calc(100cqh * 5 / 7),350px);aspect-ratio:5/7;transform:rotate(-3deg);filter:drop-shadow(0 24px 35px #0009);animation:rank-card-arrive .65s cubic-bezier(.16,.8,.25,1) both}
.rank-reveal-card>.customer-card-art{box-sizing:border-box;width:100%;height:100%;border-radius:14px;border-width:4px}
.rank-reveal-card .customer-card-character{inset:8% 0 0}.rank-reveal-card .customer-card-character img{width:104%}
.rank-reveal-card .customer-card-city{top:19px;left:17px;font-size:12px}
.rank-reveal-card .customer-card-caption{padding:35px 10px 15px;bottom:10px;left:10px;right:10px}
.rank-reveal-card .customer-card-caption>strong{font-size:clamp(21px,6vw,29px)}
.rank-reveal-card .customer-card-caption>span{font-size:13px}
.rank-reveal-card .customer-card-seal{top:14px;right:14px;width:59px;min-height:71px}
.rank-reveal-card .customer-card-seal>strong{font-size:46px}
.rank-reveal-card .customer-card-foil{opacity:0}
.rank-peel{position:absolute;right:18px;top:18px;z-index:8;width:59px;height:76px;display:grid;place-items:center;perspective:500px;transform-origin:100% 0;transform:rotate(0);background:linear-gradient(140deg,#5d536c,#272335 65%);border:1px solid #c2b4d2;color:#fff4e0;border-radius:2px 2px 8px 2px;box-shadow:-4px 5px 8px #0008}
.rank-peel strong{font:700 46px/1 Georgia,serif}.rank-peel i{position:absolute;left:0;bottom:0;width:14px;height:14px;background:linear-gradient(45deg,#d8cadc 50%,transparent 51%);filter:drop-shadow(2px -2px 2px #0007);transform-origin:0 100%;animation:rank-corner-lift .7s .35s ease-in-out both}
.rank-reveal:not(.is-revealed) .customer-card-seal{visibility:hidden}
.rank-reveal-footer{position:relative;z-index:2;text-align:center;padding:8px 24px calc(18px + env(safe-area-inset-bottom));max-width:450px;width:100%;box-sizing:border-box;margin:auto;background:linear-gradient(transparent,#100d19d9 35%)}
.rank-reveal-result{min-height:44px;margin:0 0 8px;display:flex;align-items:center;justify-content:center;gap:16px;color:#e4d5e7;font-size:16px;text-shadow:0 2px 5px #000}
.rank-reveal-change{font:26px/1 Georgia,serif;color:var(--card-ink)}.rank-reveal-change>span{font:18px/1 sans-serif;color:#b6aabd;margin:0 6px}.rank-reveal-change>strong{font-size:38px}
.rank-reveal-footer button{width:100%;min-height:49px;border:1px solid #f7deab8f;border-radius:14px;background:linear-gradient(120deg,#453448,#2b2538);color:#fff2d6;font-family:inherit;font-size:16px;font-weight:600;line-height:1.4;cursor:pointer;box-shadow:inset 0 1px #ffffff18}
.rank-reveal-footer button:focus-visible{outline:3px solid #fff2c6;outline-offset:3px}.rank-reveal-footer button:active{transform:scale(.98)}
.rank-reveal-reason{font-size:14px;color:#d0c0d3;margin:0 0 8px}.rank-reveal-reason[hidden]{display:none}.rank-reveal-reason summary{min-height:30px;cursor:pointer;list-style:none}.rank-reveal-reason summary:after{content:' ＋'}.rank-reveal-reason[open] summary:after{content:' −'}.rank-reveal-reason p{margin:0 auto 10px;max-width:340px;line-height:1.7}
.rank-reveal.is-revealed .rank-reveal-card{animation:rank-card-lock .65s cubic-bezier(.15,.7,.2,1) both}
.rank-reveal.is-revealed .rank-peel{animation:rank-peel-away .65s cubic-bezier(.35,.02,.43,1) both}
.rank-reveal.is-revealed .customer-card-seal{animation:rank-seal-pop .7s .18s both}
.rank-reveal.is-revealed .customer-card-foil{opacity:.65;animation:rank-foil-sweep 1.8s .2s ease-out both}
.rank-reveal.is-revealed .rank-reveal-result{animation:rank-result-in .5s .3s both}
.rank-reveal-rainbow,.rank-reveal-rays,.rank-reveal-ring,.rank-reveal-shards,.rank-spark{position:absolute;opacity:0}
.rank-reveal-rays{width:180vmax;height:180vmax;left:50%;top:43%;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 10deg,#ecd8ff48 0deg 1deg,transparent 1deg 8deg,#ffe8b74a 8deg 10deg,transparent 10deg 18deg);mask-image:radial-gradient(circle,transparent 3%,#000 25%,transparent 62%)}
.rank-reveal-ring{left:50%;top:43%;width:74vw;max-width:490px;aspect-ratio:1;border:2px solid var(--card-edge);border-radius:50%;box-shadow:0 0 45px var(--card-glow),inset 0 0 35px var(--card-glow);transform:translate(-50%,-50%)}
.rank-reveal.is-revealed .rank-reveal-ring{animation:rank-ring-expand 1.25s ease-out both}
.rank-reveal.is-revealed .rank-reveal-backdrop{background:radial-gradient(ellipse at 50% 42%,var(--card-light),var(--card-deep) 45%,#100d19 78%)}
.rank-reveal.is-revealed[data-rank="S"] .rank-reveal-rainbow{inset:-40%;background:conic-gradient(from 25deg,#ff7285,#ffc466,#fff4a4,#57e6b1,#66b7fa,#ac85ee,#fd8cce,#ff7285);mask-image:radial-gradient(ellipse at center,transparent 9%,#000 42%,transparent 70%);animation:rank-rainbow-bloom 2.8s ease-out both}
.rank-reveal.is-revealed[data-rank="S"] .rank-reveal-rays{animation:rank-rays-burst 2.7s ease-out both}
.rank-reveal.is-revealed[data-rank="A"] .rank-reveal-rays{background:repeating-conic-gradient(var(--card-glow) 0deg 2deg,transparent 2deg 24deg);animation:rank-rays-burst 1.8s ease-out both}
.rank-reveal.is-revealed[data-rank="S"] .customer-card-art{box-shadow:0 0 0 2px #fff4cf,0 0 30px #ffd58aaa,0 0 70px #eeabff8a}
.rank-reveal.is-revealed[data-rank="A"] .customer-card-art{box-shadow:0 0 24px var(--card-edge)}
.rank-spark{left:var(--spark-x);top:var(--spark-y);font-size:var(--spark-size);color:#fff5b4;text-shadow:0 0 12px #fff}
.rank-reveal.is-revealed[data-rank="S"] .rank-spark{animation:rank-spark-scatter 2.2s calc(var(--i) * .035s) ease-out both}
.rank-reveal.is-revealed[data-rank="D"] .rank-reveal-shards,.rank-reveal.is-revealed[data-rank="E"] .rank-reveal-shards{inset:0;background:linear-gradient(124deg,transparent 42%,var(--card-edge) 42.2%,transparent 42.6%),linear-gradient(53deg,transparent 57%,var(--card-edge) 57.2%,transparent 57.5%),linear-gradient(156deg,transparent 68%,var(--card-edge) 68.1%,transparent 68.5%);animation:rank-crack .8s ease-out both}
.rank-reveal.is-revealed[data-rank="E"] .rank-reveal-card{animation:rank-card-lock .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes rank-card-arrive{from{opacity:0;transform:translateY(30px) rotateY(-18deg) rotate(-6deg) scale(.93)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes rank-corner-lift{from{transform:scale(0)}to{transform:scale(1.4)}}
@keyframes rank-peel-away{0%{transform:rotate(0) scale(1);opacity:1}45%{transform:translate(9px,-5px) rotateY(90deg) rotate(12deg);opacity:1}100%{transform:translate(65px,-80px) rotateY(165deg) rotate(35deg) scale(.6);opacity:0}}
@keyframes rank-card-lock{from{transform:rotate(-3deg) scale(.97)}60%{transform:rotate(1deg) scale(1.025)}to{transform:rotate(0) scale(1)}}
@keyframes rank-seal-pop{from{transform:scale(.6);opacity:.2}60%{transform:scale(1.18);opacity:1}to{transform:scale(1);opacity:1}}
@keyframes rank-result-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rank-foil-sweep{from{transform:translateX(-90%);opacity:0}30%{opacity:.8}to{transform:translateX(110%);opacity:0}}
@keyframes rank-ring-expand{from{opacity:.9;transform:translate(-50%,-50%) scale(.25)}to{opacity:0;transform:translate(-50%,-50%) scale(2.3)}}
@keyframes rank-rays-burst{from{opacity:0;transform:translate(-50%,-50%) rotate(-20deg) scale(.6)}15%{opacity:.9}to{opacity:.25;transform:translate(-50%,-50%) rotate(15deg) scale(1.1)}}
@keyframes rank-rainbow-bloom{from{opacity:0;transform:rotate(-20deg) scale(.5)}20%{opacity:.65}to{opacity:.5;transform:rotate(25deg) scale(1)}}
@keyframes rank-spark-scatter{from{opacity:0;transform:scale(0) translateY(30px)}30%{opacity:1;transform:scale(1.3)}to{opacity:.4;transform:scale(.8) translateY(-25px)}}
@keyframes rank-crack{from{opacity:0;transform:scale(.97)}35%{opacity:.7}to{opacity:.25;transform:scale(1)}}
.rank-reveal.is-instant *,.rank-reveal.motion-paused *{animation:none!important;transition:none!important}
.rank-reveal.is-instant .rank-peel,.rank-reveal.motion-paused .rank-peel{display:none}
.rank-reveal.is-instant .rank-reveal-card,.rank-reveal.motion-paused .rank-reveal-card{transform:none}
.rank-reveal.is-instant[data-rank="S"] .rank-reveal-rainbow,.rank-reveal.motion-paused[data-rank="S"] .rank-reveal-rainbow{opacity:.3}
.rank-reveal.is-hidden *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.rank-reveal *{animation:none!important;transition:none!important}.rank-reveal.is-revealed .rank-peel{display:none}.rank-reveal-card{transform:none}}
@media(max-height:560px){.rank-reveal-header{padding-top:8px}.rank-reveal-stage{padding:8px}.rank-reveal-card{width:min(64vw,calc(100cqh * 5 / 7))}.rank-reveal-footer{padding-bottom:8px}.rank-reveal-card .customer-card-caption>strong{font-size:20px}.rank-reveal-card .customer-card-seal,.rank-peel{width:45px;min-height:55px;height:55px}.rank-reveal-card .customer-card-seal>strong,.rank-peel strong{font-size:34px}}
@media(forced-colors:active){.rank-reveal-backdrop{display:none}.rank-reveal,.rank-peel{background:Canvas;color:CanvasText}.rank-reveal-footer button{border:2px solid ButtonText}}

dialog.rank-reveal.motion-paused,dialog.rank-reveal.is-instant{animation:none!important;transition:none!important}
.rank-reveal-error{color:#ffd3d8;font-size:14px;line-height:1.5}
/* Isolate this footer from the application's general footer ordering. */
.rank-reveal-footer{display:block;border:0;gap:0}
.rank-reveal-footer>*{order:0}
.rank-reveal-footer button{margin:0}
.rank-reveal-reason[hidden]{display:block;visibility:hidden;height:30px}
/* The same seal is the touch target. Manual mode never uncovers a grade on time. */
.rank-reveal button.rank-peel{padding:0;margin:0;min-width:44px;min-height:55px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;line-height:1;color:#fff4e0;outline-offset:5px}
.rank-reveal button.rank-peel:focus-visible{outline:3px solid #fff0b6}
.rank-reveal.is-awaiting .rank-peel{box-shadow:-4px 5px 8px #0008,0 0 20px #e1cefd55;border-color:#e6d9f5;animation:rank-seal-invite 1s .6s ease-in-out 2}
.rank-reveal.is-acquisition .rank-reveal-card{animation:rank-card-acquired .65s cubic-bezier(.16,.8,.25,1) both}
.rank-reveal.is-acquisition .rank-peel{animation:rank-sealed-hint .7s .7s ease-in-out both}
.rank-reveal.is-acquisition .rank-peel i{animation:rank-sealed-corner .8s .65s ease-in-out both}
.rank-reveal.is-acquisition .customer-card-caption>span{visibility:hidden}
.rank-reveal.is-still-sealed .rank-peel{animation:rank-sealed-hint .5s ease-in-out both}
@keyframes rank-sealed-hint{0%,100%{transform:none}35%{transform:rotate(-5deg) translateY(-2px)}65%{transform:rotate(2deg)}}
@keyframes rank-sealed-corner{0%,100%{transform:scale(1)}45%{transform:scale(1.8)}}
@keyframes rank-seal-invite{0%,100%{transform:none}50%{transform:rotate(-4deg) translateY(-2px)}}
@keyframes rank-card-acquired{from{opacity:0;transform:translateY(25px) rotate(-7deg) scale(.91)}to{opacity:1;transform:rotate(-3deg)}}
/* Reduced motion still waits for the user's tap; it only suppresses movement. */
.rank-reveal.motion-paused:not(.is-revealed) .rank-peel{display:grid}

/* A stopped/reduced animation must never leave the foil covering half a face. */
.rank-reveal.is-instant .customer-card-foil,.rank-reveal.motion-paused .customer-card-foil{opacity:0!important}
@media(prefers-reduced-motion:reduce){.rank-reveal .customer-card-foil{opacity:0!important}}