:root{
  --bg0:#060711; --bg1:#10152d; --panel:rgba(15,18,38,.90);
  --text:#fff; --muted:#9aa6c8;
}
*{box-sizing:border-box}
html{background:var(--bg0)}
body{
  margin:0; min-height:100vh; color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 50% -10%,rgba(90,112,255,.25),transparent 35%),
    linear-gradient(180deg,#10152b,#070812 72%);
}
button,input{font:inherit}
.app{width:min(1060px,94vw);margin:auto;padding:24px 0 60px}
.hero{text-align:center;margin:8px 0 24px}
.hero h1{
  margin:0;font-size:clamp(38px,8vw,74px);font-weight:1000;letter-spacing:.055em;
  background:linear-gradient(90deg,#fff,#abc0ff,#ffe57f,#fff);
  -webkit-background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(117,140,255,.18));
}
.hero p{color:#acb7d7;margin:.4rem 0 0}
.panel{
  background:var(--panel);border:1px solid rgba(255,255,255,.09);
  border-radius:24px;padding:20px;margin-bottom:18px;
  box-shadow:0 22px 70px rgba(0,0,0,.33);backdrop-filter:blur(12px);
}
h2{margin:0 0 14px}
.grid{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
input{
  background:#080b18;color:#fff;border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:13px 14px;outline:none;
}
input:focus{border-color:#849aff;box-shadow:0 0 0 3px rgba(132,154,255,.14)}
.btn{
  border:0;border-radius:14px;padding:12px 18px;font-weight:900;cursor:pointer;
  transition:transform .15s ease,filter .15s ease,opacity .15s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn:active{transform:none}
.btn:disabled{opacity:.48;cursor:default;transform:none}
.primary{background:linear-gradient(135deg,#667aff,#a25bff);color:#fff}
.gold{background:linear-gradient(135deg,#fff2a7,#ffb31f);color:#302100;box-shadow:0 0 30px rgba(255,190,40,.14)}
.ghost{background:rgba(255,255,255,.07);color:#dce3ff;border:1px solid rgba(255,255,255,.08)}
.rainbow-btn{
  color:#fff;background:linear-gradient(110deg,#ff4b8b,#8c5cff,#20d8ff,#f8cc48,#ff4b8b);
  background-size:240% 100%;animation:rainbowMove 3s linear infinite;
}
@keyframes rainbowMove{to{background-position:240% 0}}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.note{font-size:13px;color:#929dbc;line-height:1.65}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;min-height:30px}
.chip{
  display:flex;gap:7px;align-items:center;padding:7px 10px;border-radius:999px;
  background:rgba(255,208,80,.1);border:1px solid rgba(255,208,80,.25);
  color:#ffeaa2;font-size:13px;
}
.chip button{border:0;background:none;color:#fff;cursor:pointer}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.stat{padding:7px 10px;border-radius:10px;background:#090c18;color:#b8c2e0;font-size:12px}
.hidden{display:none!important}

/* ===== GACHA STAGE ===== */
.stage{
  display:none;min-height:560px;align-items:center;justify-content:center;flex-direction:column;
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(6,8,18,.96),rgba(12,16,35,.96));
}
.stage.active{display:flex}
.stage::before{
  content:"";position:absolute;inset:-25%;z-index:-6;opacity:0;
  background:radial-gradient(circle,rgba(80,101,255,.2),transparent 48%);
  transition:opacity .3s;
}
.stage.active::before{opacity:1}

.fx-layer,.beam-layer,.ring-layer,.flash,.vignette{position:absolute;inset:0;pointer-events:none}
.fx-layer{overflow:hidden;z-index:-1}
.beam-layer{z-index:-5;opacity:0}
.ring-layer{z-index:-4;display:grid;place-items:center;opacity:0}
.vignette{z-index:8;box-shadow:inset 0 0 120px 20px rgba(0,0,0,.65);opacity:.35}
.flash{z-index:50;background:white;opacity:0}

.stage.flash-now .flash{animation:bigFlash .62s ease-out}
@keyframes bigFlash{
  0%{opacity:0} 14%{opacity:1} 35%{opacity:.92} 100%{opacity:0}
}

.stage.shake{animation:screenShake .42s linear}
@keyframes screenShake{
  0%,100%{transform:translate(0)}
  12%{transform:translate(-7px,4px)}
  25%{transform:translate(8px,-5px)}
  38%{transform:translate(-6px,-3px)}
  52%{transform:translate(6px,5px)}
  68%{transform:translate(-4px,2px)}
  82%{transform:translate(3px,-2px)}
}

/* SSR gold beams */
.stage.fx-ssr .beam-layer{
  opacity:.88;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255,213,93,0) 0deg 9deg,
      rgba(255,213,93,.42) 10deg 13deg,
      rgba(255,213,93,0) 14deg 27deg);
  animation:beamSpin 5s linear infinite;
}
.stage.fx-ssr::before{
  opacity:1;background:
    radial-gradient(circle at center,rgba(255,205,72,.36),rgba(255,137,0,.08) 30%,transparent 62%);
  animation:ssrPulse 1s ease-in-out infinite alternate;
}
@keyframes beamSpin{to{transform:rotate(360deg) scale(1.1)}}
@keyframes ssrPulse{to{filter:brightness(1.5);transform:scale(1.08)}}

/* UR rainbow vortex */
.stage.fx-ur .beam-layer{
  opacity:1;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255,75,135,.34) 28deg,
      transparent 58deg,
      rgba(104,91,255,.42) 90deg,
      transparent 122deg,
      rgba(22,214,255,.38) 158deg,
      transparent 197deg,
      rgba(255,219,86,.38) 235deg,
      transparent 275deg,
      rgba(255,78,153,.32) 320deg,
      transparent 360deg);
  filter:blur(3px);
  animation:urVortex 2.4s linear infinite;
}
.stage.fx-ur::before{
  opacity:1;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.36) 0 6%,rgba(98,104,255,.35) 14%,rgba(255,71,145,.18) 28%,transparent 60%);
  animation:urCore .75s ease-in-out infinite alternate;
}
@keyframes urVortex{to{transform:rotate(360deg) scale(1.15)}}
@keyframes urCore{to{transform:scale(1.14);filter:brightness(1.45)}}
/* LR cosmic burst */
.stage.fx-lr .beam-layer{
  opacity:1;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,.0) 0deg,
      rgba(255,255,255,.55) 16deg,
      rgba(255,226,92,.44) 34deg,
      transparent 60deg,
      rgba(255,79,166,.45) 92deg,
      transparent 120deg,
      rgba(82,236,255,.5) 156deg,
      transparent 196deg,
      rgba(161,104,255,.48) 232deg,
      transparent 275deg,
      rgba(255,255,255,.45) 318deg,
      transparent 360deg);
  filter:blur(2px) brightness(1.25);
  animation:lrVortex 1.25s linear infinite;
}
.stage.fx-lr::before{
  opacity:1;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,.6) 0 5%,
      rgba(255,233,112,.45) 10%,
      rgba(255,86,170,.28) 22%,
      rgba(88,226,255,.22) 34%,
      transparent 62%);
  animation:lrCore .48s ease-in-out infinite alternate;
}
.stage.fx-lr .energy-ring{
  color:#fff3a0;
  border-color:#fff;
  box-shadow:
    0 0 18px #fff,
    0 0 55px #ffe069,
    0 0 95px #ff5fa9,
    inset 0 0 45px #5fe8ff;
}
@keyframes lrVortex{to{transform:rotate(360deg) scale(1.22)}}
@keyframes lrCore{to{transform:scale(1.2);filter:brightness(1.7)}}


.energy-ring{
  width:min(380px,82vw);aspect-ratio:1;border-radius:50%;
  border:3px solid rgba(255,255,255,.7);
  box-shadow:0 0 16px #fff,0 0 55px currentColor,inset 0 0 35px currentColor;
  transform:scale(.1);opacity:0;
}
.stage.ring-burst .ring-layer{opacity:1}
.stage.ring-burst .energy-ring{animation:ringBurst .85s cubic-bezier(.1,.75,.25,1)}
.stage.fx-ssr .energy-ring{color:#ffc940}
.stage.fx-ur .energy-ring{color:#91eaff}
@keyframes ringBurst{
  0%{transform:scale(.08);opacity:0}
  20%{opacity:1}
  100%{transform:scale(1.8);opacity:0}
}

/* Particles */
.particle{
  position:absolute;border-radius:50%;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);opacity:0;
  background:var(--c);box-shadow:0 0 10px var(--c),0 0 22px var(--c);
  animation:particleFly var(--d) ease-out var(--delay) forwards;
}
.particle.star{
  border-radius:2px;transform:rotate(45deg);
}
@keyframes particleFly{
  0%{opacity:0;transform:translate(0,30px) scale(.2)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.25) rotate(220deg)}
}

/* Announcement */
.announce{
  position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%) scale(.72);
  width:min(900px,92%);text-align:center;opacity:0;pointer-events:none;
  font-weight:1000;text-transform:uppercase;letter-spacing:.08em;
}
.announce.show{animation:announceIn .75s cubic-bezier(.15,.75,.2,1.15) forwards}
.announce.out{animation:announceOut .35s ease forwards}
.announce .small{font-size:clamp(12px,2.4vw,18px);letter-spacing:.35em;margin-bottom:8px}
.announce .big{font-size:clamp(48px,13vw,112px);line-height:.9}
.announce.gold .big{
  color:#fff1aa;text-shadow:0 0 7px #fff,0 0 22px #ffc62f,0 0 62px #ff8a00;
}
.announce.rainbow .big{
  color:transparent;
  background:linear-gradient(90deg,#ff699d,#ffe97b,#6af6ff,#aa7cff,#ff699d);
  background-size:220% 100%;-webkit-background-clip:text;
  filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 28px rgba(123,103,255,.9));
  animation:rainbowMove 1.2s linear infinite;
}
@keyframes announceIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.09)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes announceOut{to{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}

/* Upgrade text */
.upgrade{
  position:absolute;z-index:35;top:16%;left:50%;transform:translateX(-50%) scale(.4);
  opacity:0;font-weight:1000;font-size:clamp(20px,5vw,42px);letter-spacing:.08em;
  color:#fff;text-shadow:0 0 10px #fff,0 0 28px #7beeff;
}
.upgrade.show{animation:upgradePop .82s cubic-bezier(.15,.8,.2,1.2) forwards}
@keyframes upgradePop{
  0%{opacity:0;transform:translateX(-50%) scale(.35) rotate(-8deg)}
  45%{opacity:1;transform:translateX(-50%) scale(1.18) rotate(2deg)}
  100%{opacity:0;transform:translateX(-50%) scale(1.4)}
}

/* Card */
.card-wrap{perspective:1300px;position:relative;z-index:12}
.card-wrap.waiting{opacity:0;transform:scale(.45)}
.card-wrap.reveal{animation:wrapReveal .7s cubic-bezier(.12,.8,.22,1.2) both}
@keyframes wrapReveal{
  0%{opacity:0;transform:scale(.35) rotateY(75deg)}
  60%{opacity:1;transform:scale(1.11) rotateY(-8deg)}
  100%{opacity:1;transform:scale(1) rotateY(0)}
}
.card{
  width:min(335px,78vw);aspect-ratio:.72;border-radius:26px;padding:18px;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;
  box-shadow:0 30px 85px rgba(0,0,0,.52);transform-style:preserve-3d;
}
.card::before{
  content:"";position:absolute;inset:-55%;z-index:0;
  background:conic-gradient(transparent,rgba(255,255,255,.28),transparent 18%,transparent 53%,rgba(255,255,255,.15),transparent 70%);
  animation:cardSpin 5s linear infinite;
}
@keyframes cardSpin{to{transform:rotate(360deg)}}
.card>*{position:relative;z-index:2}
.rarity{font-size:35px;font-weight:1000;text-shadow:0 3px 15px rgba(0,0,0,.45)}
.word{text-align:center;font-weight:1000;font-size:clamp(26px,7vw,45px);overflow-wrap:anywhere;text-shadow:0 3px 18px rgba(0,0,0,.34)}
.meaning{text-align:center;font-size:18px;font-weight:800;line-height:1.45;max-height:115px;overflow:auto}
.tag{align-self:center;font-size:10px;font-weight:1000;letter-spacing:.14em;padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.25)}

.N{background:linear-gradient(155deg,#606978,#252a36);border:2px solid #a5adbb}
.R{background:linear-gradient(155deg,#2d7cd5,#15345c);border:2px solid #7cc1ff}
.SR{background:linear-gradient(155deg,#984de1,#371460);border:2px solid #dc9cff}
.SSR{
  background:
    radial-gradient(circle at 50% 26%,rgba(255,247,188,.38),transparent 26%),
    linear-gradient(155deg,#f2a232,#7a3600);
  border:3px solid #ffe580;
  box-shadow:0 0 22px rgba(255,231,137,.8),0 0 70px rgba(255,161,30,.5),0 35px 90px rgba(0,0,0,.55);
}
.SSR::after{
  content:"";position:absolute;inset:-25%;z-index:1;
  background:linear-gradient(115deg,transparent 33%,rgba(255,255,255,.75) 47%,transparent 58%);
  transform:translateX(-90%);animation:ssrShine 2.2s ease-in-out infinite;
}
@keyframes ssrShine{55%,100%{transform:translateX(90%)}}

.UR{
  border:3px solid transparent;
  background:
    linear-gradient(150deg,rgba(22,13,61,.9),rgba(56,23,91,.9)) padding-box,
    conic-gradient(from var(--ang,0deg),#ff55a1,#ffd85f,#51f2ff,#8e65ff,#ff55a1) border-box;
  box-shadow:
    0 0 10px #fff,0 0 28px rgba(76,224,255,.85),
    0 0 70px rgba(163,82,255,.7),0 38px 100px rgba(0,0,0,.6);
  animation:urFloat 1.8s ease-in-out infinite alternate;
}
.UR::before{
  inset:-65%;
  background:
    conic-gradient(from 0deg,
      transparent 0 8%,rgba(255,81,157,.45) 12%,transparent 18%,
      transparent 26%,rgba(255,229,97,.45) 31%,transparent 37%,
      transparent 46%,rgba(67,234,255,.5) 52%,transparent 58%,
      transparent 67%,rgba(159,102,255,.5) 74%,transparent 82%);
  animation:cardSpin 2.7s linear infinite;
}
.UR::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle at 20% 17%,rgba(255,255,255,.7),transparent 4%),
    radial-gradient(circle at 75% 28%,rgba(255,255,255,.5),transparent 3%),
    radial-gradient(circle at 34% 70%,rgba(255,255,255,.45),transparent 3%),
    linear-gradient(120deg,transparent 28%,rgba(255,255,255,.38) 47%,transparent 60%);
  background-size:auto,auto,auto,220% 100%;
  animation:urSurface 1.8s ease-in-out infinite;
}
@keyframes urFloat{to{transform:translateY(-6px) rotateZ(.4deg)}}
@keyframes urSurface{to{background-position:0 0,0 0,0 0,-180% 0}}
.LR{
  border:3px solid transparent;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.38),transparent 18%),
    linear-gradient(155deg,rgba(12,10,28,.96),rgba(45,18,63,.96)) padding-box,
    conic-gradient(from var(--lrang,0deg),
      #ffffff,#ffe66d,#ff5ca8,#8f72ff,#54ecff,#ffffff) border-box;
  box-shadow:
    0 0 12px #fff,
    0 0 34px rgba(255,236,128,.95),
    0 0 74px rgba(255,76,165,.75),
    0 0 118px rgba(73,221,255,.62),
    0 42px 110px rgba(0,0,0,.65);
  animation:lrFloat 1.35s ease-in-out infinite alternate;
}
.LR::before{
  inset:-70%;
  background:
    conic-gradient(from 0deg,
      transparent 0 6%,rgba(255,255,255,.5) 9%,transparent 14%,
      transparent 20%,rgba(255,227,89,.52) 24%,transparent 30%,
      transparent 38%,rgba(255,87,172,.52) 43%,transparent 49%,
      transparent 57%,rgba(92,236,255,.54) 62%,transparent 69%,
      transparent 77%,rgba(157,105,255,.54) 82%,transparent 89%);
  animation:cardSpin 1.7s linear infinite;
}
.LR::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.95),transparent 3%),
    radial-gradient(circle at 76% 23%,rgba(255,255,255,.78),transparent 2.5%),
    radial-gradient(circle at 30% 72%,rgba(255,255,255,.68),transparent 2.5%),
    radial-gradient(circle at 82% 72%,rgba(255,255,255,.6),transparent 2%),
    linear-gradient(120deg,transparent 20%,rgba(255,255,255,.65) 46%,transparent 66%);
  background-size:auto,auto,auto,auto,230% 100%;
  animation:lrSurface 1.15s ease-in-out infinite;
}
@keyframes lrFloat{
  to{transform:translateY(-8px) scale(1.015) rotateZ(.55deg)}
}
@keyframes lrSurface{
  to{background-position:0 0,0 0,0 0,0 0,-190% 0}
}


.progress{margin-top:16px;color:#b5bedb;font-weight:800;position:relative;z-index:15}
.reveal-buttons{display:flex;gap:8px;margin-top:15px;position:relative;z-index:15}

/* Results */
.results{display:none}.results.active{display:block}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px}
.mini{
  min-height:190px;border-radius:18px;padding:14px;display:flex;flex-direction:column;
  justify-content:space-between;overflow:hidden;position:relative;
}
.mini.SSR{box-shadow:0 0 20px rgba(255,194,54,.28)}
.mini.UR{animation:none;box-shadow:0 0 24px rgba(103,214,255,.3),0 0 44px rgba(150,82,255,.2)}
.mini.LR{animation:none;box-shadow:0 0 26px rgba(255,235,112,.48),0 0 52px rgba(255,89,170,.28),0 0 78px rgba(78,225,255,.20)}
.mini-r{font-size:18px;font-weight:1000}
.mini-word{font-size:21px;font-weight:1000;overflow-wrap:anywhere}
.mini-ja{font-size:13px;line-height:1.45;color:#f0f2ff}
.mini-tag{font-size:9px;font-weight:1000;letter-spacing:.12em;margin-top:8px;padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.25);width:max-content}

@media(max-width:680px){
  .grid{grid-template-columns:1fr}.grid .btn{width:100%}
  .panel{padding:16px;border-radius:18px}.actions .btn{flex:1 1 140px}
  .stage{min-height:560px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}