:root {
  --bg: #04030a;
  --panel: #070610;
  --violet: #a76cff;
  --violet-2: #6d35b8;
  --violet-soft: rgba(167, 108, 255, .34);
  --line: rgba(170, 110, 255, .45);
  --text: #f0e8ff;
  --muted: #958aa8;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; }
body {
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 24%, rgba(112, 44, 185, .16), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(75, 28, 127, .11), transparent 35%),
    #03020a;
  font-family: Georgia, "Times New Roman", serif;
}

.panel {
  position: relative;
  width: min(100vw, 319px);
  min-height: 492px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(165, 104, 255, .48);
  background:
    radial-gradient(circle at 50% 22%, rgba(116, 53, 183, .12), transparent 23%),
    linear-gradient(180deg, #0a0711 0%, #05040b 48%, #030309 100%);
  box-shadow: inset 0 0 42px rgba(109, 53, 184, .08), 0 0 30px rgba(94, 38, 151, .12);
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 20;
}
.panel::before { border: 1px solid rgba(175, 118, 255, .08); }
.panel::after {
  border-left: 1px solid rgba(175, 118, 255, .05);
  border-right: 1px solid rgba(175, 118, 255, .05);
}

.ambient { position: absolute; border-radius: 50%; filter: blur(18px); pointer-events: none; z-index: -2; }
.ambient-a { width: 150px; height: 150px; left: 84px; top: 92px; background: rgba(113, 49, 181, .13); animation: ambient 7s ease-in-out infinite; }
.ambient-b { width: 180px; height: 180px; left: 35px; bottom: -35px; background: rgba(70, 25, 125, .09); animation: ambient 9s ease-in-out -2s infinite reverse; }

.scanlines {
  position: absolute; inset: 0; z-index: 19; pointer-events: none; opacity: .08;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.14) 4px);
  mix-blend-mode: screen;
}

.stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #d9baff; box-shadow: 0 0 7px #9d62f7; animation: drift var(--duration) ease-in-out var(--delay) infinite; opacity: 0; }

.brand { position: relative; text-align: center; padding-top: 17px; z-index: 3; text-shadow: 0 0 16px rgba(177, 113, 255, .42); }
.brand-main { font-size: 26px; line-height: .92; letter-spacing: 3px; font-weight: 700; }
.brand-sub { margin-top: 5px; font-size: 7px; letter-spacing: 4px; color: #a98dc7; }
.brand-spark { position: absolute; color: #c28cff; animation: twinkle 2.8s ease-in-out infinite; }
.spark-1 { top: 8px; left: 48%; font-size: 10px; }
.spark-2 { top: 28px; left: 18%; font-size: 7px; animation-delay: -1.2s; }

.aura-card {
  position: relative;
  width: 228px;
  height: 153px;
  margin: 13px auto 7px;
  border: 1px solid rgba(174, 112, 255, .48);
  background: radial-gradient(circle, rgba(91, 37, 145, .12), rgba(0,0,0,.03) 65%);
  box-shadow: inset 0 0 25px rgba(122, 54, 186, .08), 0 0 16px rgba(105, 45, 164, .08);
}
.aura-card::before { content:""; position:absolute; inset:8px; border:1px solid rgba(175, 118, 255, .05); }
.aura-core { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; transform: translate(-50%, -50%); border-radius: 50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background: radial-gradient(circle, rgba(145, 71, 235, .18), rgba(10,7,16,.35) 58%, transparent 70%); box-shadow: 0 0 30px rgba(128, 66, 214, .18); animation: breathe 3.8s ease-in-out infinite; }
.aura-orbit { position:absolute; left:50%; top:50%; border:1px solid rgba(179, 118, 255, .4); border-radius:50%; transform:translate(-50%,-50%); }
.orbit-one { width: 92px; height: 92px; animation: spin 8s linear infinite; border-left-color: transparent; border-bottom-color: rgba(190,130,255,.65); }
.orbit-two { width: 111px; height: 111px; animation: spinReverse 13s linear infinite; border-right-color: transparent; opacity:.65; }
.orbit-three { width: 126px; height: 126px; animation: spin 18s linear infinite; border-top-color: transparent; opacity:.28; }
.aura-diamond { width: 15px; height: 15px; transform: rotate(45deg); background: #b777ff; box-shadow: 0 0 13px #a45cff, 0 0 28px rgba(163, 85, 255, .7); animation: diamond 2.4s ease-in-out infinite; }
.aura-line { width: 31px; height: 2px; margin-top: 18px; background:#eee4ff; box-shadow:0 0 7px rgba(239,226,255,.7); }
.aura-label { margin-top: 8px; font-size: 8px; letter-spacing: 4px; color: #cdb8e8; }
.aura-status { margin-top: 4px; font-family: Arial, sans-serif; font-size: 6px; color:#81778e; letter-spacing:.3px; }
.status-dot { display:inline-block; width:4px; height:4px; margin-right:4px; border-radius:50%; background:#8d53db; box-shadow:0 0 6px #9f5dff; animation: dot 1.7s ease-in-out infinite; }

.ranking { position: relative; width: 280px; height: 205px; margin: 0 auto; border: 1px solid rgba(169, 105, 249, .55); background: linear-gradient(180deg, rgba(8,6,14,.84), rgba(3,3,8,.72)); box-shadow: inset 0 0 22px rgba(113, 50, 174, .08); }
.section-title { height: 34px; display:flex; align-items:center; gap:7px; padding: 0 10px; color:#d8c6eb; font-size: 9px; letter-spacing: 2px; font-weight:700; }
.crown { color:#b17bdf; font-size:12px; filter:drop-shadow(0 0 4px rgba(177,123,223,.5)); }
.title-line { height:1px; flex:1; background:linear-gradient(90deg, rgba(173,108,250,.48), transparent); }
.leaderboard { padding: 0 10px 10px; height: 160px; overflow:hidden; }
.row { position:relative; height: 25px; display:grid; grid-template-columns: 25px 1fr auto; align-items:center; gap:4px; padding:0 7px; margin-bottom:4px; border:1px solid rgba(155,91,231,.11); background:rgba(131,72,185,.035); opacity:0; transform:translateY(7px); animation: rowIn .55s cubic-bezier(.2,.75,.25,1) forwards; }
.row::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 20%, rgba(191,136,255,.13) 50%, transparent 80%); transform:translateX(-120%); animation: shimmer 4.5s ease-in-out infinite; }
.rank { font-family:Arial,sans-serif; font-size:7px; color:#7f748d; }
.rank.top { color:#c18aff; text-shadow:0 0 7px rgba(181,114,255,.55); }
.name { font-family:Arial,sans-serif; font-size:8px; color:#c7bed2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aura-value { font-family:Arial,sans-serif; font-size:7px; color:#ae82dc; letter-spacing:.3px; }
.loading { height:100%; display:flex; align-items:center; justify-content:center; gap:5px; }
.loading span { width:4px; height:4px; border-radius:50%; background:#9e61e8; animation: loading 1.2s ease-in-out infinite; }
.loading span:nth-child(2){animation-delay:.15s}.loading span:nth-child(3){animation-delay:.3s}

.footer {
  position: relative;
  width: 280px;
  min-height: 58px;
  margin: 9px auto 0;
  padding: 7px 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-top: 1px solid rgba(169, 105, 249, .20);
  background: linear-gradient(180deg, rgba(104, 49, 154, .055), rgba(0,0,0,0));
  animation: footerFloat 3.2s ease-in-out infinite;
}
.footer-icon {
  width: 38px;
  height: 18px;
  margin-bottom: 4px;
  border: 1px solid rgba(178,111,255,.55);
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 10px rgba(137,69,211,.16);
  animation: footerPulse 2.4s ease-in-out infinite;
}
.footer-icon span { font: 9px Arial,sans-serif; letter-spacing:3px; color:#c18aff; margin-left:3px; }
.footer-copy { margin: 0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.footer-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  line-height: 1.1;
  font-style: italic;
  letter-spacing: .7px;
  color:#eee2ff;
  text-shadow:0 0 9px rgba(179,112,249,.42);
}
.footer-copy small {
  margin-top: 3px;
  font: 8px/1.15 Arial,sans-serif;
  letter-spacing: .35px;
  color:#b7a8c7;
  white-space: nowrap;
}
.footer-status {
  margin: 4px 0 0;
  font: 6px Arial,sans-serif;
  color:#8e829a;
  letter-spacing: .6px;
  text-transform: uppercase;
}

@keyframes breathe { 0%,100% { transform:translate(-50%,-50%) scale(.97); filter:brightness(.9); } 50% { transform:translate(-50%,-50%) scale(1.04); filter:brightness(1.18); } }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes spinReverse { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes diamond { 0%,100%{transform:rotate(45deg) scale(.9);opacity:.8} 50%{transform:rotate(45deg) scale(1.12);opacity:1} }
@keyframes dot { 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1.25)} }
@keyframes twinkle { 0%,100%{opacity:.25;transform:scale(.7)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes ambient { 0%,100%{transform:scale(.9);opacity:.5} 50%{transform:scale(1.12);opacity:1} }
@keyframes drift { 0%{opacity:0;transform:translate3d(0,8px,0) scale(.7)} 20%{opacity:.65} 80%{opacity:.35} 100%{opacity:0;transform:translate3d(var(--dx),-25px,0) scale(1.15)} }
@keyframes rowIn { to { opacity:1; transform:translateY(0); } }
@keyframes shimmer { 0%,55%{transform:translateX(-120%)} 75%,100%{transform:translateX(120%)} }
@keyframes loading { 0%,100%{transform:translateY(0);opacity:.35} 50%{transform:translateY(-4px);opacity:1} }
@keyframes footerPulse { 0%,100%{box-shadow:0 0 6px rgba(137,69,211,.08); transform:scale(.98)} 50%{box-shadow:0 0 16px rgba(137,69,211,.38); transform:scale(1.04)} }
@keyframes footerFloat { 0%,100%{transform:translateY(0);opacity:.88} 50%{transform:translateY(-2px);opacity:1} }

.panel.heartbeat { animation: panelHeartbeat .8s ease-out; }
@keyframes panelHeartbeat { 0% { box-shadow: inset 0 0 42px rgba(109, 53, 184, .08), 0 0 30px rgba(94, 38, 151, .12); } 45% { box-shadow: inset 0 0 55px rgba(137, 68, 216, .15), 0 0 42px rgba(122, 54, 190, .25); } 100% { box-shadow: inset 0 0 42px rgba(109, 53, 184, .08), 0 0 30px rgba(94, 38, 151, .12); } }

@media (max-width: 330px) {
  .panel { width:100vw; min-height:100vh; }
}



/* ===== V3 LIVE AURA LAYER ===== */
.aura-card {
  overflow: hidden;
  isolation: isolate;
}
#auraCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: .9;
}
.aura-card > .aura-orbit,
.aura-card > .aura-core,
.aura-card > .pulse-ring,
.aura-card > .energy {
  z-index: 2;
}
.aura-core { z-index: 4; }
.aura-halo {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182,111,255,.24), rgba(132,55,213,.12) 38%, transparent 72%);
  filter: blur(5px);
  animation: haloBreath 2.6s ease-in-out infinite;
  z-index: -1;
}
.energy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 105px;
  height: 2px;
  transform-origin: 0 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(197,139,255,.85), transparent);
  box-shadow: 0 0 9px rgba(163,87,255,.7);
  opacity: .35;
  z-index: 3;
  pointer-events: none;
}
.energy-a { animation: energyOrbit 4.5s linear infinite; }
.energy-b { animation: energyOrbit 7s linear -2s infinite reverse; width: 80px; opacity: .22; }
.energy-c { animation: energyOrbit 10s linear -5s infinite; width: 125px; opacity: .18; }

.pulse-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(188,126,255,.45);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(.35);
  opacity: 0;
  pointer-events: none;
}
.pulse-one { animation: pulseWave 3.4s ease-out infinite; }
.pulse-two { animation: pulseWave 3.4s ease-out 1.7s infinite; }

.aura-card.aura-burst .aura-core {
  animation: burstCore .9s cubic-bezier(.15,.75,.2,1);
}
.aura-card.aura-burst .aura-diamond {
  animation: burstDiamond .9s cubic-bezier(.15,.75,.2,1);
}
.aura-card.aura-burst .pulse-one,
.aura-card.aura-burst .pulse-two {
  animation-duration: .9s;
}
.aura-card.aura-burst::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45px;
  height: 45px;
  border: 2px solid rgba(207,161,255,.7);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: burstWave .9s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}

.footer {
  min-height: 55px;
  margin-top: 9px;
  padding: 5px 8px 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.footer-copy {
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.footer-copy strong {
  font-size: 12px;
  line-height: 1.05;
}
.footer-copy small {
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.1;
}
.footer-status {
  margin-top: 4px;
}

.empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 7px Arial, sans-serif;
  color: #766b80;
  letter-spacing: .5px;
}

@keyframes haloBreath {
  0%,100% { transform: scale(.72); opacity: .55; }
  50% { transform: scale(1.22); opacity: 1; }
}
@keyframes energyOrbit {
  from { transform: rotate(0deg) translateX(42px); }
  to { transform: rotate(360deg) translateX(42px); }
}
@keyframes pulseWave {
  0% { transform: translate(-50%,-50%) scale(.45); opacity: 0; }
  12% { opacity: .55; }
  100% { transform: translate(-50%,-50%) scale(1.65); opacity: 0; }
}
@keyframes burstCore {
  0% { transform: translate(-50%,-50%) scale(.98); filter: brightness(1); }
  35% { transform: translate(-50%,-50%) scale(1.18); filter: brightness(1.7); }
  100% { transform: translate(-50%,-50%) scale(1); filter: brightness(1); }
}
@keyframes burstDiamond {
  0% { transform: rotate(45deg) scale(.9); filter: brightness(1); }
  30% { transform: rotate(45deg) scale(1.55); filter: brightness(2); }
  100% { transform: rotate(45deg) scale(1); filter: brightness(1); }
}
@keyframes burstWave {
  0% { width: 35px; height: 35px; opacity: .8; }
  100% { width: 190px; height: 190px; opacity: 0; }
}

/* ===== AURA GAIN / LOSS FEEDBACK ===== */
.aura-card.aura-gain .aura-halo { animation: gainHalo .9s ease-out !important; }
.aura-card.aura-gain .aura-diamond { animation: gainDiamond .9s cubic-bezier(.12,.8,.18,1) !important; }
.aura-card.aura-loss .aura-halo { animation: lossHalo .9s ease-out !important; }
.aura-card.aura-loss .aura-diamond { animation: lossDiamond .9s cubic-bezier(.12,.8,.18,1) !important; }
.aura-card.aura-gain::after, .aura-card.aura-loss::after {
  content:""; position:absolute; left:50%; top:50%; width:42px; height:42px;
  border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:8;
}
.aura-card.aura-gain::after { border:2px solid rgba(205,154,255,.85); animation: gainWave .9s ease-out forwards; box-shadow:0 0 18px rgba(166,91,255,.65); }
.aura-card.aura-loss::after { border:2px solid rgba(104,61,150,.9); animation: lossWave .9s ease-out forwards; box-shadow:0 0 14px rgba(80,37,122,.55); }
.aura-change {
  position:absolute; left:50%; top:28%; z-index:12; pointer-events:none;
  transform:translate(-50%,0); font:700 13px Arial,sans-serif; letter-spacing:1px;
  text-shadow:0 0 8px currentColor, 0 0 18px currentColor; white-space:nowrap;
  animation:auraChangeFloat 1.05s cubic-bezier(.15,.75,.2,1) forwards;
}
.aura-change.gain { color:#d8b7ff; }
.aura-change.loss { color:#8d69ad; }
.aura-change::after { content:attr(data-user); display:block; margin-top:3px; font-size:6px; letter-spacing:1.4px; color:rgba(225,211,240,.72); text-align:center; text-shadow:none; }
@keyframes gainHalo { 0%{transform:scale(.72);opacity:.55} 35%{transform:scale(1.7);opacity:1;filter:blur(3px) brightness(1.6)} 100%{transform:scale(.9);opacity:.65} }
@keyframes lossHalo { 0%{transform:scale(1);opacity:1} 35%{transform:scale(.48);opacity:.25;filter:blur(7px) brightness(.55)} 100%{transform:scale(.85);opacity:.65} }
@keyframes gainDiamond { 0%{transform:rotate(45deg) scale(.9)} 28%{transform:rotate(45deg) scale(1.7);filter:brightness(2.4)} 100%{transform:rotate(45deg) scale(1)} }
@keyframes lossDiamond { 0%{transform:rotate(45deg) scale(1)} 35%{transform:rotate(45deg) scale(.55);filter:brightness(.45)} 70%{transform:rotate(45deg) scale(1.18);filter:brightness(1.25)} 100%{transform:rotate(45deg) scale(1)} }
@keyframes gainWave { from{width:38px;height:38px;opacity:.9} to{width:205px;height:205px;opacity:0} }
@keyframes lossWave { from{width:55px;height:55px;opacity:.75} to{width:145px;height:145px;opacity:0} }
@keyframes auraChangeFloat { 0%{opacity:0;transform:translate(-50%,8px) scale(.75)} 18%{opacity:1;transform:translate(-50%,0) scale(1.05)} 72%{opacity:1;transform:translate(-50%,-20px) scale(1)} 100%{opacity:0;transform:translate(-50%,-42px) scale(.92)} }

/* ===== DUEL / GAMBLE / NEW #1 EVENTS ===== */
.aura-card.aura-duel .aura-halo {
  animation: duelHalo 1.35s ease-in-out !important;
}

.aura-card.aura-duel .aura-diamond {
  animation: duelCore 1.35s cubic-bezier(.1,.8,.15,1) !important;
}

.duel-beam {
  position:absolute;
  top:50%;
  width:48%;
  height:2px;
  z-index:9;
  pointer-events:none;
  transform-origin:center;
  opacity:0;
  filter:blur(.2px) drop-shadow(0 0 8px rgba(190,130,255,.9));
  background:linear-gradient(90deg, transparent, rgba(215,180,255,.95), transparent);
}

.duel-beam.left {
  left:0;
  animation: duelBeamLeft 1.2s cubic-bezier(.18,.78,.2,1) forwards;
}

.duel-beam.right {
  right:0;
  animation: duelBeamRight 1.2s cubic-bezier(.18,.78,.2,1) forwards;
}

.event-burst {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:14;
  pointer-events:none;
  font:700 10px Arial,sans-serif;
  letter-spacing:1.5px;
  white-space:nowrap;
  text-shadow:0 0 8px currentColor,0 0 18px currentColor;
  animation:eventBurstText 1.25s ease-out forwards;
}

.duel-burst { color:#e2c8ff; }

.aura-card.aura-gamble-win .aura-halo {
  animation: gambleWinHalo 1.3s ease-out !important;
}

.aura-card.aura-gamble-win .aura-diamond {
  animation: gambleWinCore 1.3s cubic-bezier(.1,.8,.15,1) !important;
}

.aura-card.aura-gamble-loss .aura-halo {
  animation: gambleLossHalo 1.3s ease-out !important;
}

.aura-card.aura-gamble-loss .aura-diamond {
  animation: gambleLossCore 1.3s cubic-bezier(.1,.8,.15,1) !important;
}

.gamble-ring {
  position:absolute;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:10;
  pointer-events:none;
  border:1px solid rgba(215,180,255,.9);
  animation: gambleSpin 1.15s cubic-bezier(.1,.75,.2,1) forwards;
}

.gamble-ring.win {
  box-shadow:0 0 10px rgba(180,120,255,.8), inset 0 0 12px rgba(180,120,255,.35);
}

.gamble-ring.loss {
  border-color:rgba(94,64,120,.9);
  box-shadow:0 0 10px rgba(75,45,100,.65), inset 0 0 12px rgba(75,45,100,.25);
}

.gamble-burst.win { color:#e1c7ff; }
.gamble-burst.loss { color:#82679c; }

.aura-card.aura-overdrive .aura-halo {
  animation: rankHalo 1.35s ease-out !important;
}

.aura-card.aura-overdrive .aura-diamond {
  animation: rankDiamond 1.35s cubic-bezier(.1,.8,.15,1) !important;
}

.aura-card.aura-overdrive::after {
  content:""; position:absolute; left:50%; top:50%; width:48px; height:48px;
  border:1px solid rgba(220,180,255,.9); border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:9;
  animation:rankWave 1.35s ease-out forwards;
}

.rank-flash {
  position:absolute;
  left:50%;
  top:19%;
  transform:translateX(-50%);
  z-index:15;
  pointer-events:none;
  font:700 9px Arial,sans-serif;
  letter-spacing:1.6px;
  white-space:nowrap;
  color:#ecdfff;
  text-shadow:0 0 9px rgba(200,150,255,.95),0 0 20px rgba(150,80,255,.8);
  animation:rankFlash 1.45s ease-out forwards;
}

@keyframes duelHalo {
  0% { transform:scale(1); opacity:.72; }
  35% { transform:scale(1.28); opacity:1; }
  55% { transform:scale(.86); opacity:.82; }
  100% { transform:scale(1); opacity:.72; }
}

@keyframes duelCore {
  0% { transform:rotate(45deg) scale(1); }
  42% { transform:rotate(45deg) scale(1.28); filter:brightness(1.9); }
  58% { transform:rotate(45deg) scale(.82); }
  100% { transform:rotate(45deg) scale(1); }
}

@keyframes duelBeamLeft {
  0% { left:-46%; opacity:0; transform:scaleX(.15); }
  18% { opacity:1; }
  65% { left:26%; transform:scaleX(1); opacity:1; }
  100% { left:48%; transform:scaleX(.45); opacity:0; }
}

@keyframes duelBeamRight {
  0% { right:-46%; opacity:0; transform:scaleX(.15); }
  18% { opacity:1; }
  65% { right:26%; transform:scaleX(1); opacity:1; }
  100% { right:48%; transform:scaleX(.45); opacity:0; }
}

@keyframes eventBurstText {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.65); }
  25% { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
  100% { opacity:0; transform:translate(-50%,-72%) scale(1); }
}

@keyframes gambleWinHalo {
  0% { transform:scale(1) rotate(0); opacity:.7; }
  35% { transform:scale(1.15) rotate(90deg); opacity:1; }
  70% { transform:scale(.9) rotate(210deg); opacity:.85; }
  100% { transform:scale(1) rotate(360deg); opacity:.72; }
}

@keyframes gambleWinCore {
  0% { transform:rotate(45deg) scale(1); }
  35% { transform:rotate(225deg) scale(1.2); filter:brightness(1.8); }
  72% { transform:rotate(405deg) scale(.92); }
  100% { transform:rotate(765deg) scale(1); }
}

@keyframes gambleLossHalo {
  0% { transform:scale(1); opacity:.7; }
  40% { transform:scale(.82); opacity:.35; }
  70% { transform:scale(.96); opacity:.55; }
  100% { transform:scale(1); opacity:.72; }
}

@keyframes gambleLossCore {
  0% { transform:rotate(45deg) scale(1); }
  35% { transform:rotate(45deg) scale(.72); filter:brightness(.55); }
  65% { transform:rotate(45deg) scale(.9); }
  100% { transform:rotate(45deg) scale(1); }
}

@keyframes gambleSpin {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.55) rotate(0); }
  18% { opacity:1; }
  70% { transform:translate(-50%,-50%) scale(1.35) rotate(540deg); opacity:.95; }
  100% { transform:translate(-50%,-50%) scale(2.05) rotate(900deg); opacity:0; }
}

@keyframes rankHalo {
  0% { transform:scale(1); opacity:.72; }
  25% { transform:scale(1.3); opacity:1; }
  45% { transform:scale(.82); opacity:.82; }
  68% { transform:scale(1.18); opacity:1; }
  100% { transform:scale(1); opacity:.72; }
}

@keyframes rankDiamond {
  0% { transform:rotate(45deg) scale(1); }
  28% { transform:rotate(45deg) scale(1.3); filter:brightness(2); }
  52% { transform:rotate(45deg) scale(.8); }
  72% { transform:rotate(45deg) scale(1.15); filter:brightness(1.5); }
  100% { transform:rotate(45deg) scale(1); }
}

@keyframes rankWave {
  0% { width:48px; height:48px; opacity:.9; }
  100% { width:210px; height:210px; opacity:0; }
}
@keyframes rankFlash {
  0% { opacity:0; transform:translateX(-50%) translateY(5px) scale(.8); }
  22% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  100% { opacity:0; transform:translateX(-50%) translateY(-12px) scale(1.04); }
}