/* RipCores - black, chrome and red, with colourful cel-shaded parts as the stars. */
:root {
  --bg: #060609;
  --bg2: #0d0d13;
  --panel: #12121a;
  --panel2: #191923;
  --line: #2a2a36;
  --ink: #f2f3f7;
  --muted: #9aa0ae;
  --red: #ff1f2d;
  --red2: #b3101b;
  --glow: 0 0 18px rgba(255, 31, 45, 0.55);
  --chrome: linear-gradient(180deg, #ffffff 0%, #d9dde5 38%, #8d93a0 52%, #e9ecf1 70%, #aab0bd 100%);
  --cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --r0: #a7b1c2;
  --r1: #2f9bff;
  --r2: #a855ff;
  --r3: #ffaa00;
  --r4: #ff2e7e;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 31, 45, 0.16), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, 0.018) 46px 48px),
    var(--bg);
  color: var(--ink);
  font: 500 15px/1.45 'Exo 2', system-ui, sans-serif;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
.hidden { display: none !important; }
h1, h2, h3, .display { font-family: 'Russo One', 'Exo 2', sans-serif; font-weight: 400; letter-spacing: 0.02em; margin: 0; }
.chrome-text {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.35);
  filter: drop-shadow(0 0 1px var(--red)) drop-shadow(2px 2px 0 var(--red2)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
}
.muted { color: var(--muted); }

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  background: linear-gradient(180deg, rgba(6, 6, 9, 0.97), rgba(6, 6, 9, 0.85));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 31, 45, 0.35);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; text-decoration: none; height: 44px; }
.brand img { height: 44px; }
.tabs { display: flex; gap: 4px; margin-left: 6px; }
.tabs a {
  text-decoration: none; padding: 8px 16px; font-family: 'Russo One'; font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); clip-path: var(--cut); transition: 0.15s;
}
.tabs a:hover { color: var(--ink); background: var(--panel2); }
.tabs a.active { color: #fff; background: linear-gradient(180deg, var(--red), var(--red2)); box-shadow: var(--glow); }
.wallet { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  background: var(--panel); border: 1px solid var(--line); clip-path: var(--cut); font-weight: 800;
}
.chip i { width: 14px; height: 14px; display: inline-block; }
.chip i.shard { background: linear-gradient(135deg, #ff6b75, var(--red)); transform: rotate(45deg) scale(0.8); box-shadow: var(--glow); }
.chip i.avax { background: #e84142; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff3; }
.mode-banner {
  text-align: center; padding: 6px 12px; font-size: 13px; background: #1a0b0e; color: #ffb3b8;
  border-bottom: 1px solid #3a1218;
}
main { padding: 26px 22px 60px; max-width: 1360px; margin: 0 auto; }

/* ------------------------------------------------------------------ logo fallback */
.logo-fallback {
  display: inline-flex; align-items: center; font-family: 'Russo One'; font-size: 30px; font-style: italic;
  letter-spacing: 0.01em; line-height: 1; transform: skewX(-8deg);
}
.logo-fallback .core {
  width: 0.92em; height: 0.92em; margin: 0 0.02em; display: inline-block; position: relative;
  animation: spin 2.4s linear infinite;
}
.logo-fallback .core svg { width: 100%; height: 100%; overflow: visible; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-logo { font-size: clamp(44px, 8vw, 92px); }

/* ------------------------------------------------------------------ panels & buttons */
.panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); clip-path: var(--cut); padding: 18px; position: relative;
}
.panel::before { content: ''; position: absolute; left: 10px; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--red), transparent 70%); }
.panel h2 { font-size: 20px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.panel h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 14px 0 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 0; cursor: pointer; clip-path: var(--cut);
  font-family: 'Russo One'; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #ff3a46, var(--red2));
  box-shadow: inset 0 1px 0 #ffffff55, inset 0 -3px 0 #0000004d; transition: transform 0.08s, filter 0.15s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn:disabled { filter: grayscale(1) brightness(0.6); cursor: not-allowed; }
.btn-ghost { background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.btn-chrome { background: var(--chrome); color: #16161c; box-shadow: inset 0 -3px 0 #0003; }
.btn-big { padding: 16px 28px; font-size: 19px; }
.btn-sm { padding: 7px 12px; font-size: 12px; }
input.text {
  background: #0a0a0f; border: 1px solid var(--line); padding: 10px 12px; clip-path: var(--cut); width: 100%;
  font-family: 'Russo One'; letter-spacing: 0.15em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ layout helpers */
.grid { display: grid; gap: 18px; }
.cols-2 { grid-template-columns: 1.15fr 1fr; }
.cols-3 { grid-template-columns: 1.05fr 1fr 0.95fr; }
@media (max-width: 1050px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } .tabs a { padding: 8px 10px; } }
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; }
  .wallet .chip { display: none; }
  main { padding: 16px 12px 60px; }
}
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 10px; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ 3D viewers */
.viewer { position: relative; width: 100%; aspect-ratio: 1.15; background: radial-gradient(closest-side, #2a0d12, transparent), #08080c; clip-path: var(--cut); overflow: hidden; }
.viewer canvas { display: block; width: 100%; height: 100%; }
.viewer .overlay { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; gap: 8px; align-items: flex-end; pointer-events: none; }
.viewer .overlay > * { pointer-events: auto; }

/* ------------------------------------------------------------------ part cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card {
  --rc: var(--r0);
  position: relative; cursor: pointer; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--el, #fff) 26%, transparent), transparent 62%), #0c0c12;
  border: 2px solid color-mix(in srgb, var(--rc) 70%, #000); clip-path: var(--cut); padding: 8px 8px 10px; transition: transform 0.12s, box-shadow 0.12s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 22px color-mix(in srgb, var(--rc) 40%, transparent); }
.card.selected { border-color: var(--red); box-shadow: var(--glow); }
.card.disabled { opacity: 0.38; cursor: not-allowed; }
.card img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; filter: drop-shadow(0 6px 8px #000a); }
.card .name { font-family: 'Russo One'; font-size: 13px; line-height: 1.15; margin-top: 4px; min-height: 2.3em; }
.card .meta { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.card .rar { color: var(--rc); }
.card .count { position: absolute; top: 8px; right: 8px; background: var(--red); font-weight: 800; font-size: 12px; padding: 1px 7px; clip-path: var(--cut); }
.card .el { position: absolute; top: 6px; left: 8px; font-size: 15px; }
.card.unowned img { filter: grayscale(0.85) brightness(0.45); }
.r0 { --rc: var(--r0); } .r1 { --rc: var(--r1); } .r2 { --rc: var(--r2); } .r3 { --rc: var(--r3); } .r4 { --rc: var(--r4); }

/* ------------------------------------------------------------------ garage */
.slot {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px;
  background: #0c0c12; border: 1px solid var(--line); clip-path: var(--cut); cursor: pointer; transition: 0.12s;
}
.slot:hover, .slot.open { border-color: var(--red); background: #150b0e; }
.slot img { width: 76px; height: 76px; object-fit: contain; }
.slot .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 800; }
.slot .pname { font-family: 'Russo One'; font-size: 16px; }
.slot .sub { font-size: 12px; color: var(--muted); }
.picker { margin-top: 12px; max-height: 420px; overflow: auto; padding-right: 4px; }
.picker .cards { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.why { font-size: 11px; color: #ff8a92; margin-top: 3px; }

.stat { display: grid; grid-template-columns: 96px 1fr 34px; gap: 8px; align-items: center; margin: 7px 0; font-weight: 800; font-size: 13px; }
.stat .bar { height: 12px; background: #0a0a0f; border: 1px solid var(--line); clip-path: var(--cut); overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--chrome); box-shadow: inset -3px 0 0 var(--red); transition: width 0.3s; }
.stat .v { text-align: right; font-family: 'Russo One'; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; font-weight: 800; background: #0c0c12; border: 1px solid var(--line); clip-path: var(--cut); text-transform: uppercase; letter-spacing: 0.05em; }
.tag.good { border-color: #1f7a43; color: #6dffa8; }
.tag.red { border-color: var(--red2); color: #ff8a92; }
.ability-box { padding: 12px; background: #0c0c12; border: 1px solid var(--line); clip-path: var(--cut); }
.ability-box b { font-family: 'Russo One'; font-size: 17px; }
.power { font-family: 'Russo One'; font-size: 44px; line-height: 1; }

/* ------------------------------------------------------------------ hub */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin: 10px 0 26px; }
.hero p { margin: 0; color: var(--muted); max-width: 640px; }
.mode-card { display: grid; gap: 10px; }
.mode-card .desc { color: var(--muted); font-size: 14px; margin: 0; }
.leader { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid #1d1d27; font-size: 14px; }
.leader b { font-family: 'Russo One'; }
.searching { display: flex; align-items: center; gap: 12px; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* ------------------------------------------------------------------ forge */
.pack {
  display: grid; justify-items: center; gap: 10px; padding: 22px; text-align: center;
  background: radial-gradient(circle at 50% 30%, #3a0c12, #0c0c12 70%); border: 1px solid #3a1218; clip-path: var(--cut);
}
.pack .box {
  width: 150px; height: 190px; clip-path: var(--cut); display: grid; place-items: center;
  background: linear-gradient(160deg, #26262f, #0a0a0f 60%), #111; border: 2px solid var(--red); box-shadow: var(--glow);
  animation: float 3s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-8px) rotate(-1deg); } }
.odds { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; font-size: 13px; }
.reveal { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.reveal .card { width: 190px; animation: flip 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.reveal .card:nth-child(2) { animation-delay: 0.15s; } .reveal .card:nth-child(3) { animation-delay: 0.3s; }
.reveal .card:nth-child(4) { animation-delay: 0.45s; } .reveal .card:nth-child(5) { animation-delay: 0.6s; }
@keyframes flip { from { transform: rotateY(90deg) scale(0.6); opacity: 0; } }
.reveal .card.r3, .reveal .card.r4 { box-shadow: 0 0 34px var(--rc); }

/* ------------------------------------------------------------------ modal & toasts */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0, 0, 0, 0.72); padding: 16px; }
.modal .dialog { width: min(920px, 100%); max-height: 92vh; overflow: auto; }
.modal .close { position: absolute; top: 10px; right: 12px; }
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; }
.toast { padding: 12px 16px; background: var(--panel2); border-left: 4px solid var(--red); clip-path: var(--cut); max-width: 360px; animation: slidein 0.25s ease-out; box-shadow: 0 8px 24px #000a; }
.toast.ok { border-left-color: #2fd47a; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }

/* ------------------------------------------------------------------ battle */
#battle { position: fixed; inset: 0; z-index: 40; background: #000; }
#arenaHost, #arenaHost canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: absolute; inset: 0; pointer-events: none; font-weight: 800; }
.hud > * { pointer-events: auto; }
.plate { position: absolute; top: 16px; width: min(360px, 38vw); padding: 10px 14px; background: linear-gradient(180deg, #16161eee, #0b0b10ee); border: 1px solid var(--line); clip-path: var(--cut); }
.plate.p0 { left: 16px; border-left: 4px solid #3fa0ff; }
.plate.p1 { right: 16px; border-right: 4px solid var(--red); text-align: right; }
.plate .who { font-family: 'Russo One'; font-size: 17px; display: flex; gap: 8px; align-items: center; }
.plate.p1 .who { justify-content: flex-end; }
.plate .sub { font-size: 12px; color: var(--muted); }
.meter { height: 14px; margin-top: 6px; background: #060609; border: 1px solid var(--line); clip-path: var(--cut); position: relative; overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--chrome); transition: width 0.1s linear; }
.plate.p1 .meter i { left: auto; right: 0; }
.meter.burst { height: 7px; }
.meter.burst i { background: linear-gradient(90deg, #ffb020, var(--red)); }
.meter.low i { background: linear-gradient(180deg, #ff6b75, var(--red2)); }
.fxchips { display: flex; gap: 4px; margin-top: 5px; min-height: 18px; flex-wrap: wrap; }
.plate.p1 .fxchips { justify-content: flex-end; }
.fxchips span { font-size: 10px; padding: 1px 6px; clip-path: var(--cut); color: #000; }
.scoreboard { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); text-align: center; padding: 8px 18px; background: #0b0b10ee; border: 1px solid var(--line); clip-path: var(--cut); min-width: 170px; }
.scoreboard .pts { font-family: 'Russo One'; font-size: 30px; line-height: 1; }
.scoreboard .pts .a { color: #6fb8ff; } .scoreboard .pts .b { color: #ff5560; }
.scoreboard .sub { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.announcer {
  position: absolute; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none;
  font-family: 'Russo One'; font-style: italic; font-size: clamp(42px, 9vw, 110px); line-height: 1; transform: skewX(-8deg);
}
.announcer .big { display: inline-block; animation: slam 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.announcer .small { display: block; font-size: 0.32em; margin-top: 10px; color: #fff; text-shadow: 0 2px 0 #000; font-style: normal; }
@keyframes slam { from { transform: scale(2.6); opacity: 0; } }
.ability {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 132px; height: 132px; border-radius: 50%; border: 0; cursor: pointer;
  background: conic-gradient(var(--ab, var(--red)) calc(var(--charge, 0) * 1%), #1b1b24 0);
  display: grid; place-items: center; box-shadow: 0 0 0 4px #000, 0 0 0 6px #33333f, 0 10px 30px #000;
}
.ability .inner { width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2a2a36, #0b0b10); display: grid; place-items: center; text-align: center; padding: 10px; }
.ability .nm { font-family: 'Russo One'; font-size: 13px; line-height: 1.1; }
.ability .key { font-size: 10px; color: var(--muted); margin-top: 3px; letter-spacing: 0.15em; }
.ability.ready { animation: pulse 0.9s ease-in-out infinite; }
.ability.ready .inner { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ab) 70%, #fff), color-mix(in srgb, var(--ab) 55%, #000)); color: #000; }
.ability.ready .key { color: #000; }
.ability.none { opacity: 0.5; cursor: default; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px #000, 0 0 0 6px var(--ab), 0 0 40px var(--ab); } }
.quit { position: absolute; bottom: 18px; left: 18px; }
.result { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.72); z-index: 3; }
.result .panel { width: min(560px, 92vw); text-align: center; }
.result .verdict { font-size: clamp(48px, 10vw, 96px); font-style: italic; transform: skewX(-8deg); }
.result table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.result td { padding: 4px 6px; border-bottom: 1px solid #1d1d27; }
@media (max-width: 720px) {
  .plate { width: 44vw; padding: 6px 8px; top: 8px; }
  .plate .who { font-size: 13px; }
  .scoreboard { top: auto; bottom: 170px; }
  .ability { width: 112px; height: 112px; }
  .ability .inner { width: 92px; height: 92px; }
}

/* RIP launch speed lines */
.speedlines {
  position: absolute; inset: -20%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 3deg, rgba(255, 255, 255, 0.5) 3deg 3.6deg, transparent 3.6deg 7deg, rgba(255, 60, 70, 0.45) 7deg 7.4deg);
  -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 60%);
  mask-image: radial-gradient(circle, transparent 18%, #000 60%);
}
.speedlines.go { animation: speedburst 0.75s ease-out; }
@keyframes speedburst {
  0% { opacity: 0; transform: scale(1.35) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: scale(1) rotate(8deg); }
}

/* Gold-plated parts: the rarest finish. Same stats, much shinier. */
.card.gold { border-color: #ffcf40; background: radial-gradient(circle at 50% 38%, rgba(255, 207, 64, 0.35), transparent 62%), #120e05; box-shadow: 0 0 18px rgba(255, 190, 40, 0.35); }
.card.gold .rar { color: #ffd84a; text-shadow: 0 0 8px #ffb300; }
.card.gold .name { background: linear-gradient(180deg, #fff6c8, #ffcc33 55%, #b8860b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.gold::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, transparent 60%);
  background-size: 250% 100%; animation: goldsweep 2.6s ease-in-out infinite; mix-blend-mode: overlay;
}
.card.gold img { filter: drop-shadow(0 6px 8px #000a) drop-shadow(0 0 10px rgba(255, 200, 50, 0.45)); }
.card.gold.nogoldart img { filter: sepia(1) saturate(3.2) hue-rotate(-12deg) brightness(1.08) drop-shadow(0 0 10px rgba(255, 200, 50, 0.5)); }
@keyframes goldsweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.reveal .card.gold { box-shadow: 0 0 46px #ffc400, 0 0 12px #fff; }
.tag.gold { border-color: #ffcf40; color: #ffd84a; }

/* Mythic rarity: prismatic / holographic */
@property --prism { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.prism-text {
  background: linear-gradient(90deg, #ff3d6e, #ffb23d, #f5ff3d, #3dffa2, #3da8ff, #c13dff, #ff3d6e);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: prismslide 3s linear infinite;
}
@keyframes prismslide { to { background-position: 300% 0; } }
.card.r4:not(.gold) {
  border: 3px solid transparent;
  background:
    radial-gradient(circle at 50% 38%, rgba(190, 120, 255, 0.28), transparent 62%) padding-box,
    linear-gradient(#0c0c12, #0c0c12) padding-box,
    conic-gradient(from var(--prism), #ff3d6e, #ffb23d, #f5ff3d, #3dffa2, #3da8ff, #c13dff, #ff3d6e) border-box;
  animation: prismspin 4s linear infinite;
  box-shadow: 0 0 22px rgba(160, 110, 255, 0.45);
}
@keyframes prismspin { to { --prism: 360deg; } }
.card.r4:not(.gold)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0.35;
  background: linear-gradient(115deg, transparent 20%, #ff3d6e 32%, #f5ff3d 40%, #3dffa2 48%, #3da8ff 56%, transparent 68%);
  background-size: 260% 100%; animation: goldsweep 3.2s ease-in-out infinite;
}
.card.r4:not(.gold) img { filter: drop-shadow(0 6px 8px #000a) drop-shadow(0 0 12px rgba(170, 120, 255, 0.55)); }
.card.r4:not(.gold) .name { background: linear-gradient(90deg, #ffd1e0, #fff6b0, #c9ffe4, #cfe6ff, #ecd1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reveal .card.r4:not(.gold) { box-shadow: 0 0 50px #b26bff, 0 0 18px #3dffa2; }

/* ------------------------------------------------------------------ booster packs */
.packart { width: 168px; filter: drop-shadow(0 14px 18px #000c); animation: float 3s ease-in-out infinite; transition: transform .2s; }
.packart svg { display: block; width: 100%; height: auto; }
.packart:hover { transform: rotate(-3deg) scale(1.05); }
.packart[data-kind="starter"] { animation-delay: -1s; }
.packart[data-kind="shard"] { animation-delay: -2s; }
.rip-stage {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; align-content: center; gap: 22px;
  background: radial-gradient(circle at 50% 45%, rgba(255, 31, 45, 0.28), rgba(0, 0, 0, 0.9) 60%);
  animation: fadein .2s ease-out;
}
@keyframes fadein { from { opacity: 0; } }
.rip-pack { position: relative; width: min(300px, 70vw); aspect-ratio: 300 / 420; cursor: pointer; outline: none; animation: packin .45s cubic-bezier(.2, 1.5, .4, 1) both, rumble .5s .5s ease-in-out infinite; }
.rip-pack > .rip-body, .rip-pack > .rip-top { position: absolute; inset: 0; }
.rip-pack svg { width: 100%; height: 100%; display: block; }
.rip-pack:hover { animation: packin .45s cubic-bezier(.2, 1.5, .4, 1) both, rumble .22s ease-in-out infinite; }
@keyframes packin { from { transform: translateY(60px) scale(.6) rotate(-8deg); opacity: 0; } }
@keyframes rumble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.6deg) translateX(-2px); } 75% { transform: rotate(1.6deg) translateX(2px); } }
.rip-hint { font-size: 26px; letter-spacing: .08em; animation: pulsehint 1s ease-in-out infinite; }
@keyframes pulsehint { 50% { opacity: .55; transform: scale(.96); } }
.rip-count { position: absolute; top: 18%; right: -14px; background: var(--red); color: #fff; font-family: 'Russo One'; font-size: 26px; padding: 4px 12px; clip-path: var(--cut); box-shadow: var(--glow); }
.rip-flash { position: absolute; left: 0; right: 0; height: 0; pointer-events: none; }
/* teases for gold / mythic pulls */
.tease-gold .rip-pack { filter: drop-shadow(0 0 22px #ffc400) drop-shadow(0 0 6px #fff3b0); }
.tease-prism .rip-pack { animation: packin .45s cubic-bezier(.2, 1.5, .4, 1) both, rumble .35s .5s ease-in-out infinite, prismglow 1.4s linear infinite; }
@keyframes prismglow { 0% { filter: drop-shadow(0 0 22px #ff3d6e); } 25% { filter: drop-shadow(0 0 22px #f5ff3d); } 50% { filter: drop-shadow(0 0 22px #3dffa2); } 75% { filter: drop-shadow(0 0 22px #3da8ff); } 100% { filter: drop-shadow(0 0 22px #c13dff); } }
/* the rip */
.ripped .rip-pack { animation: none; cursor: default; }
.ripped .rip-top { animation: tearoff .55s cubic-bezier(.3, .1, .6, 1) forwards; transform-origin: 0% 100%; }
@keyframes tearoff { 0% { transform: none; } 30% { transform: translate(6px, -6px) rotate(-4deg); } 100% { transform: translate(260px, -230px) rotate(38deg); opacity: 0; } }
.ripped .rip-body { animation: bodyjolt .5s ease-out forwards; }
@keyframes bodyjolt { 0% { transform: none; } 20% { transform: translateY(8px) scale(1.02); } 100% { transform: translateY(26px); } }
.ripped .rip-flash::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff, #ffe9a8 30%, rgba(255, 60, 70, .6) 55%, transparent 70%);
  animation: burstlight .9s ease-out forwards;
}
.tease-gold.ripped .rip-flash::before { background: radial-gradient(circle, #fff, #ffe27a 30%, rgba(255, 196, 0, .7) 55%, transparent 70%); }
.tease-prism.ripped .rip-flash::before { background: radial-gradient(circle, #fff, #f5ff3d 22%, #3dffa2 34%, #3da8ff 46%, rgba(193, 61, 255, .7) 58%, transparent 70%); }
@keyframes burstlight { 0% { width: 20px; height: 20px; opacity: 1; } 60% { opacity: 1; } 100% { width: 900px; height: 900px; opacity: 0; } }
.ripped .rip-hint { opacity: 0; transition: opacity .2s; animation: none; }
.rip-stage.done { opacity: 0; transition: opacity .25s; }

.fxchips span.perkchip { background: #fff; color: #111; animation: perkpop .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes perkpop { from { transform: scale(1.8); opacity: 0; } }

/* ------------------------------------------------------------------ furnace */
.furnace { display: grid; grid-template-columns: 190px 1fr; gap: 18px; margin-top: 14px; align-items: start; }
.furnace-pack .packart { width: 170px; }
.furnace .cards { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); max-height: 420px; overflow: auto; padding-right: 4px; }
.burn-step { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.burn-step b { font-family: 'Russo One'; font-size: 16px; min-width: 18px; text-align: center; }
@media (max-width: 720px) { .furnace { grid-template-columns: 1fr; } .furnace-pack { display: none; } }

/* ---------------------------------------------------------------- Battle pass */
.tabs a.pass-tab { color: #e6b8ff; }
.tabs a.pass-tab.active { color: #fff; }
.pass-hero {
  background:
    radial-gradient(700px 260px at 85% 0%, rgba(193, 60, 255, 0.28), transparent 70%),
    radial-gradient(500px 220px at 0% 100%, rgba(226, 44, 104, 0.16), transparent 70%),
    var(--panel);
  border-color: #3a1a5a;
}
.pass-head { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.pass-kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 800; color: #c98cff; }
.pass-title { font-size: clamp(34px, 6vw, 60px); line-height: 1; margin: 4px 0 6px; }
.pass-tier { display: flex; align-items: baseline; gap: 8px; }
.pass-tier b { font-size: 56px; line-height: 1; color: #fff; text-shadow: 0 0 22px #c13cff; }
.xpbar { position: relative; height: 22px; margin-top: 16px; background: #0b0812; border: 1px solid #3a1a5a; clip-path: var(--cut); }
.xpbar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #7a26b2, #e22c68, #ffa85c); transition: width 0.6s; }
.xpbar span { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 800; line-height: 20px; text-shadow: 0 1px 2px #000; }
.pass-buy { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.pass-pack svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(193, 60, 255, 0.35)); }
.pass-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 8px 0 12px; }
.pass-price .display { font-size: 34px; }
.pass-price .muted { font-size: 13px; }
.pass-track { position: relative; overflow-x: auto; display: grid; grid-template-columns: auto 1fr; gap: 8px; padding-bottom: 8px; margin-top: 10px; }
.pr-rows { display: grid; grid-template-rows: 22px 118px 118px; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); position: sticky; left: 0; background: var(--panel); z-index: 1; padding-right: 4px; }
.pr-rows span { display: flex; align-items: center; }
.pr-rows span:first-child { visibility: hidden; }
.pr-rows span:last-child { color: #e6b8ff; }
.pr-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 6px; }
.pr-col { display: grid; grid-template-rows: 22px 118px 118px; gap: 6px; }
.pr-tier { text-align: center; font-family: 'Russo One'; font-size: 13px; color: var(--muted); border-bottom: 3px solid var(--line); }
.pr-col.reached .pr-tier { color: #fff; border-color: #c13cff; }
.pr-col.current .pr-tier { color: #ffa85c; border-color: #ffa85c; }
.pr-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; background: #0d0c14; border: 1px solid var(--line); clip-path: var(--cut); cursor: default; text-align: center; }
.pr-cell.empty { background: transparent; border-style: dashed; opacity: 0.35; }
.pr-cell.premium { background: linear-gradient(180deg, #1a0d2a, #0d0c14); border-color: #3a1a5a; }
.pr-cell.future { opacity: 0.55; }
.pr-cell.locked { opacity: 0.7; }
.pr-cell.claimed { opacity: 0.45; }
.pr-cell.ready { cursor: pointer; border-color: #ffa85c; box-shadow: inset 0 0 18px rgba(255, 168, 92, 0.35); animation: prReady 1.6s ease-in-out infinite; }
.pr-cell.ready:hover { filter: brightness(1.2); }
.pr-cell:disabled.ready { animation: none; }
@keyframes prReady { 50% { box-shadow: inset 0 0 28px rgba(255, 168, 92, 0.6); } }
.pr-label { font-size: 10px; line-height: 1.15; font-weight: 700; color: #d9d4e6; max-height: 2.3em; overflow: hidden; }
.pr-state { font-size: 11px; font-weight: 800; text-transform: uppercase; color: #ffa85c; min-height: 14px; }
.pr-cell.claimed .pr-state { color: #6dffa8; }
.pr-icon { width: 48px; height: 48px; display: grid; place-items: center; }
.pr-icon b { font-family: 'Russo One'; font-size: 18px; }
.pr-icon .shard { display: none; }
.pr-icon:not(.pr-random):not(.pr-part)::before { content: '◆'; color: var(--red); font-size: 18px; margin-right: 2px; }
.pr-icon:not(.pr-random):not(.pr-part) { display: flex; align-items: center; justify-content: center; }
.pr-random { border: 2px solid var(--c); clip-path: var(--cut); background: color-mix(in srgb, var(--c) 18%, #0d0c14); line-height: 1; }
.pr-random b { color: var(--c); font-size: 22px; }
.pr-random small { font-size: 8px; font-weight: 800; text-transform: uppercase; color: var(--c); }
.pr-part img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(193, 60, 255, 0.7)); }
@media (max-width: 720px) {
  .pass-buy { grid-template-columns: 1fr; }
  .pass-pack { max-width: 160px; margin: 0 auto; }
  .pass-tier b { font-size: 44px; }
}

/* ---------------------------------------------------------------- Rank'D */
.rankd-card {
  border-color: #6a0d16;
  background: radial-gradient(520px 200px at 100% 0%, rgba(255, 31, 45, 0.22), transparent 70%), var(--panel);
}
.rankd-title {
  font-family: 'Russo One';
  font-style: italic;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 3px 3px 0 var(--red2), 0 0 18px rgba(255, 31, 45, 0.6);
}
.rankd-btn { background: linear-gradient(180deg, #ff3b47, #a30d18); box-shadow: 0 0 22px rgba(255, 31, 45, 0.45); }
.rankd-stake { display: flex; gap: 8px; margin: 4px 0 10px; }
.rankd-stake img, .rankd-empty {
  width: 64px; height: 64px; object-fit: contain; background: #0c0c12; border: 1px solid #4a1016; clip-path: var(--cut);
  filter: drop-shadow(0 4px 6px #000a);
}
.rankd-empty { display: grid; place-items: center; color: var(--muted); font-family: 'Russo One'; }
.rankd-lock { font-size: 14px; }

.notice { padding: 10px 14px; border: 1px solid #4a3a10; background: rgba(255, 200, 60, 0.08); color: #f3e3b0; clip-path: var(--cut); font-size: 14px; }
.notice a { color: #ffd84a; }