.ring-scene{position:fixed;inset:0;z-index:9000;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ring-scene .rs-back{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(ellipse at 50% 48%,#2c1806 0%,#120903 40%,#050302 72%,#000 100%)}
.ring-scene.on .rs-back{opacity:1}
.ring-scene.rs-out .rs-back{opacity:0;transition:opacity .5s ease}
.ring-scene canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ring-scene .rs-stage{position:absolute;inset:0;pointer-events:none}
.ring-scene .rs-rays{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,200,110,.15) 0deg,rgba(255,200,110,.06) 3.5deg,rgba(255,200,110,0) 7deg,rgba(255,200,110,0) 15deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.55) 18%,transparent 46%);
  mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.55) 18%,transparent 46%);
  transition:opacity 1.6s ease;animation:rs-turn 60s linear infinite}
.ring-scene.ring-up .rs-rays{opacity:1}
.ring-scene.hot .rs-rays{opacity:1;animation-duration:8s}
.ring-scene .rs-ring{position:absolute;left:50%;top:50%;width:min(56vmin,360px);height:min(56vmin,360px);
  margin:calc(min(56vmin,360px) / -2) 0 0 calc(min(56vmin,360px) / -2);opacity:0;perspective:900px;
  transform:scale(.12);filter:blur(8px);
  transition:opacity 1s ease,transform 1.35s cubic-bezier(.16,.84,.3,1),filter 1.3s ease}
.ring-scene.ring-up .rs-ring{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 18px rgba(255,186,72,.55))}
.ring-scene.hot .rs-ring{filter:blur(0) drop-shadow(0 0 36px rgba(255,214,130,.95)) brightness(1.18)}
.ring-scene .rs-ring svg{display:block;width:100%;height:100%;animation:rs-spin 14s linear infinite}
@keyframes rs-spin{from{transform:rotateX(32deg) rotateY(-8deg) rotateZ(0)}50%{transform:rotateX(24deg) rotateY(8deg) rotateZ(180deg)}to{transform:rotateX(32deg) rotateY(-8deg) rotateZ(360deg)}}
@keyframes rs-turn{to{transform:rotate(360deg)}}
.ring-scene .rs-burn{transition:stroke-dashoffset 1.7s cubic-bezier(.45,0,.3,1)}
.ring-scene.lit .rs-burn{stroke-dashoffset:0}
.ring-scene .rs-runes{fill:#ffb25a;transition:fill .9s ease}
.ring-scene.hot .rs-runes{fill:#fff2c6}
.ring-scene .rs-who{position:absolute;top:50%;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:#f8e7c2;font-weight:800;font-size:15px;letter-spacing:.04em;text-shadow:0 0 10px rgba(255,186,90,.7);
  opacity:0;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.ring-scene .rs-who .la{filter:drop-shadow(0 0 14px rgba(255,206,130,.8))}
.ring-scene .rs-who .army-rank-badge{display:none}
.ring-scene .rs-left{left:8%;transform:translate(-40px,-50%)}
.ring-scene .rs-right{right:8%;transform:translate(40px,-50%)}
.ring-scene.meet .rs-who{opacity:1}
.ring-scene.meet .rs-left,.ring-scene.meet .rs-right{transform:translate(0,-50%)}
.ring-scene.pull .rs-who{opacity:0;filter:blur(7px) brightness(1.8);
  transition:opacity 1.15s ease-in,transform 1.25s cubic-bezier(.6,0,.9,.35),filter 1.1s ease}
.ring-scene .rs-flash{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#fffdf2 0%,rgba(255,240,205,.97) 30%,rgba(255,228,178,.9) 100%)}
.ring-scene.flash .rs-flash{animation:rs-flash .8s ease-out}
@keyframes rs-flash{0%{opacity:0}15%{opacity:1}24%{opacity:1}100%{opacity:0}}
.ring-scene .rs-skip{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));padding:8px 15px;
  border:1px solid rgba(255,220,160,.45);border-radius:999px;background:rgba(24,14,4,.55);color:#f3dfb6;
  font:inherit;font-size:13px;cursor:pointer;opacity:.85;transition:opacity .3s ease}
.ring-scene .rs-skip:hover{opacity:1}
.ring-scene .rs-skip:focus-visible{outline:2px solid #ffd27a;outline-offset:2px}
.ring-scene.clear .rs-skip,.ring-scene.rs-out .rs-skip{opacity:0}
.ring-scene.clear .rs-back,.ring-scene.clear .rs-rays{opacity:0;transition:none}
.ring-landed{animation:rs-land 1.5s ease-out 1}
@keyframes rs-land{0%{filter:none}18%{filter:drop-shadow(0 0 9px rgba(255,204,96,1)) brightness(1.7)}100%{filter:none}}
@media (max-aspect-ratio:1/1){
  .ring-scene .rs-who{left:50%;right:auto;top:auto;font-size:13px}
  .ring-scene .rs-left{top:12%;transform:translate(-50%,-30px)}
  .ring-scene .rs-right{bottom:10%;transform:translate(-50%,30px)}
  .ring-scene.meet .rs-left,.ring-scene.meet .rs-right{transform:translate(-50%,0)}
}