@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

/* =========================================================================================
   E-FIGHT DESIGN SYSTEM — "Title Bout": championship-poster PopCap direction.
   Tokens: color, type, space, motion, elevation, z-index.
   ========================================================================================= */
:root{
  /* ---- surfaces (warm leather/canvas, not cool black) ---- */
  --void:#140d09;
  --bg:#1c140f;
  --surface:#241a12;
  --surface-2:#2c2016;
  --elevated:#342518;
  --line:#4a3620;
  --line-strong:#5a4128;

  /* ---- text (warm cream, not cool white) ---- */
  --text:#f7ede0;
  --text-dim:#b8a48c;
  --text-faint:#8a7860;

  /* ---- brand / accent ---- */
  --accent:#ff3860;
  --accent-2:#ff6b42;
  --cyan:#e8b23d;
  --cyan-2:#c98a1f;
  --gold:#e8b23d;
  --good:#2fe3a0;
  --warn:#ffb23b;
  --danger:#ff4d5e;

  --grad-primary:linear-gradient(135deg,var(--accent),var(--accent-2));
  --grad-cyan:linear-gradient(135deg,var(--cyan),var(--cyan-2));
  --grad-gold:linear-gradient(135deg,#ffe27a,var(--gold),#ff9b3c);

  /* ---- rarity (untouched — encodes real drop-tier meaning, not brand mood) ---- */
  --r-common:#8b8b9c;
  --r-uncommon:#2fe3a0;
  --r-rare:#2dabff;
  --r-epic:#b23bff;
  --r-legendary:#ffc93c;

  /* ---- type ---- */
  --font-display:'Fredoka', 'Segoe UI', sans-serif;
  --font-hero:'Luckiest Guy', 'Fredoka', cursive;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* ---- space / radius ---- */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* ---- motion ---- */
  --fast:150ms; --normal:280ms; --dramatic:600ms; --cinematic:1200ms;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- elevation ---- */
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 10px 34px rgba(0,0,0,.5);
  --shadow-lg:0 24px 64px rgba(0,0,0,.6);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce){
  :root{ --fast:1ms; --normal:1ms; --dramatic:1ms; --cinematic:1ms; }
}
html.reduced-motion{ --fast:1ms !important; --normal:1ms !important; --dramatic:1ms !important; --cinematic:1ms !important; }
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%; background:var(--bg); color:var(--text);
  font-family:var(--font-body); overflow:hidden; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:#fff; }
a{ color:inherit; }
button{ font-family:inherit; }

#app{ position:fixed; inset:0; }
.screen{ position:absolute; inset:0; display:none; }
.screen.active{ display:block; }
.icon{ display:block; flex-shrink:0; }

/* graphics quality gates (Settings > Graphics) */
html[data-fx="low"] .particle, html[data-fx="low"] .confetti, html[data-fx="low"] .ring, html[data-fx="low"] .bg-particle{ display:none !important; }
html[data-fx="medium"] .confetti:nth-child(n+31){ display:none; }

/* ---------------------------------------------------------------------------------------
   Layered background system — used behind landing + chrome screens
   --------------------------------------------------------------------------------------- */
.bg-layers{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.bg-grid{
  position:absolute; inset:-2px; opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
.bg-glow-a{ position:absolute; width:60vw; height:60vw; left:-15vw; top:-20vw; border-radius:50%;
  background:radial-gradient(circle, rgba(255,56,96,.20), transparent 65%); filter:blur(10px);
  animation:drift-a 18s ease-in-out infinite; }
.bg-glow-b{ position:absolute; width:50vw; height:50vw; right:-10vw; bottom:-15vw; border-radius:50%;
  background:radial-gradient(circle, rgba(232,178,61,.16), transparent 65%); filter:blur(10px);
  animation:drift-b 22s ease-in-out infinite; }
@keyframes drift-a{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(4vw,3vw) scale(1.08);} }
@keyframes drift-b{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-3vw,-4vw) scale(1.1);} }
.bg-scanlines{ position:absolute; inset:0; opacity:.05; pointer-events:none;
  background:repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); mix-blend-mode:overlay; }
.bg-particle{ position:absolute; width:3px; height:3px; border-radius:50%; background:var(--cyan); opacity:.5;
  animation:float-up linear infinite; }
@keyframes float-up{ 0%{ transform:translateY(0); opacity:0;} 10%{opacity:.6;} 90%{opacity:.4;} 100%{ transform:translateY(-110vh); opacity:0;} }

/* =========================================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================================= */
.display{ font-family:var(--font-display); font-weight:800; letter-spacing:.01em; text-transform:uppercase; }
.mono{ font-family:var(--font-mono); }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }

/* =========================================================================================
   BUTTONS
   ========================================================================================= */
.btn{
  appearance:none; cursor:pointer; border-radius:var(--r-md); padding:12px 20px;
  font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--text); background:var(--surface-2);
  border:3px solid var(--void); display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 0 var(--void);
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease);
  position:relative; overflow:hidden;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--void); }
.btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--void); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:0 4px 0 var(--void); }
.btn.primary{ background:var(--grad-primary); color:#fff; }
.btn.secondary{ background:var(--grad-cyan); color:#241505; }
.btn.ghost{ background:transparent; border-color:var(--line-strong); box-shadow:none; }
.btn.ghost:hover{ background:var(--surface-2); border-color:var(--line-strong); transform:translateY(-2px); box-shadow:0 4px 0 var(--line-strong); }
.btn.ghost:active{ transform:translateY(2px); box-shadow:none; }
.btn.gold{ background:var(--grad-gold); color:#1a1200; }
.btn.danger{ background:var(--danger); color:#fff; }
.btn.danger[disabled]{ opacity:.35; }

.promo-redeem{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.promo-redeem-row{ display:flex; gap:8px; }
.promo-redeem-row input{ flex:1; min-width:0; text-transform:uppercase; }
.btn.block{ width:100%; }
.btn.lg{ padding:15px 26px; font-size:15px; }
.btn.sm{ padding:8px 14px; font-size:12.5px; border-radius:var(--r-sm); border-width:2px; box-shadow:0 3px 0 var(--void); }
.btn.icon-only{ padding:10px; }
.btn .icon{ width:16px; height:16px; }

/* micro press ripple */
.btn::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle, rgba(255,255,255,.25), transparent 60%);
  opacity:0; transform:scale(.6); transition:opacity var(--fast), transform var(--fast); pointer-events:none; }
.btn:active::after{ opacity:1; transform:scale(1); }

/* =========================================================================================
   CARDS
   ========================================================================================= */
.panel{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:2px solid var(--line-strong); border-radius:var(--r-lg); padding:22px;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.panel.hoverable:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.panel-title{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.panel-title .icon{ width:16px; height:16px; color:var(--cyan); }
.glass{ background:rgba(23,23,32,.55); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(255,255,255,.08); }

/* =========================================================================================
   CHROME — top navigation shown on lobby / leaderboard / profile / locker
   ========================================================================================= */
#appNav{
  position:fixed; top:0; left:0; right:0; height:64px; z-index:900;
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
  background:rgba(28,20,15,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%); opacity:0; pointer-events:none;
  transition:transform var(--normal) var(--ease), opacity var(--normal) var(--ease);
}
#appNav.chrome-visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.nav-left{ display:flex; align-items:center; gap:28px; }
.nav-logo{ display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.nav-logo .mark{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 8px rgba(255,56,96,.5)); }
.nav-logo .mark svg{ width:24px; height:24px; }
.nav-logo .word{ font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.04em; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-link{ position:relative; padding:9px 14px; border-radius:var(--r-sm); font-size:13px; font-weight:700; letter-spacing:.03em;
  color:var(--text-dim); cursor:pointer; display:flex; align-items:center; gap:7px; transition:color var(--fast), background var(--fast); }
.nav-link .icon{ width:15px; height:15px; }
.nav-link:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.nav-link.active{ color:var(--text); }
.nav-link.active::after{ content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--grad-primary); border-radius:2px; }
.nav-right{ display:flex; align-items:center; gap:10px; }
.mode-badge{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.08em; padding:5px 9px;
  border-radius:8px; color:var(--text-faint); border:1px solid var(--line); background:var(--surface-2); }
.mode-badge.live{ color:var(--good); border-color:rgba(47,227,160,.4); background:rgba(47,227,160,.08); }
.nav-balance{ display:flex; align-items:center; gap:7px; background:var(--surface-2); border:1px solid var(--line-strong);
  padding:8px 12px; border-radius:20px; font-family:var(--font-mono); font-weight:700; font-size:13px; cursor:pointer;
  transition:border-color var(--fast); }
.nav-balance:hover{ border-color:var(--gold); }
.nav-balance .icon{ width:15px; height:15px; color:var(--gold); }
.nav-icon-btn{ position:relative; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--line); cursor:pointer; color:var(--text-dim); transition:all var(--fast); }
.nav-icon-btn:hover{ color:var(--text); border-color:var(--line-strong); }
.nav-icon-btn .icon{ width:17px; height:17px; }
.nav-icon-btn .dot{ position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); display:none; }
.nav-icon-btn.has-alert .dot{ display:block; }
.nav-wallet-chip{ display:flex; align-items:center; gap:8px; padding:8px 14px 8px 8px; border-radius:20px;
  background:var(--surface-2); border:1px solid var(--line-strong); cursor:pointer; transition:border-color var(--fast); }
.nav-wallet-chip:hover{ border-color:var(--good); }
.nav-wallet-chip .dot-live{ width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); animation:pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1;} 50%{ opacity:.4;} }
.nav-wallet-chip .addr{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--text-dim); }

/* body padding when chrome is visible */
body.has-chrome .screen.chrome-screen{ padding-top:64px; }

/* =========================================================================================
   LANDING PAGE
   ========================================================================================= */
#screen-landing{ overflow-y:auto; background:radial-gradient(circle at 50% 0%, #2c1f14, var(--bg) 60%); }
.landing-hero{ position:relative; min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:100px 20px 60px; }
.landing-topbar{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px; z-index:5; }
.landing-topbar .nav-logo .word{ font-size:20px; }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:20px; margin-bottom:26px;
  background:rgba(255,56,96,.08); border:1px solid rgba(255,56,96,.35); color:var(--accent); font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; z-index:2; animation:fade-up var(--dramatic) var(--ease) both; }
.hero-badge .dot-live{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse-dot 1.6s infinite; }
.hero-logo-mark{ width:84px; height:84px; display:flex; align-items:center;
  justify-content:center; margin-bottom:22px; filter:drop-shadow(0 0 40px rgba(255,56,96,.4)) drop-shadow(0 14px 30px rgba(0,0,0,.5)); z-index:2;
  animation:fade-up var(--dramatic) var(--ease) both; animation-delay:.05s; }
.hero-logo-mark svg{ width:78px; height:78px; }
.hero-title{ font-family:var(--font-hero); font-weight:400; font-size:clamp(40px,9vw,96px); line-height:.9; letter-spacing:.01em;
  margin:0 0 18px; z-index:2; animation:fade-up var(--dramatic) var(--ease) both; animation-delay:.1s;
  -webkit-text-stroke:3px var(--void); paint-order:stroke fill; text-shadow:0 6px 0 var(--cyan-2); }
.hero-title .accent{ background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ max-width:560px; color:var(--text-dim); font-size:16px; line-height:1.6; margin:0 0 34px; z-index:2;
  animation:fade-up var(--dramatic) var(--ease) both; animation-delay:.16s; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; z-index:2; animation:fade-up var(--dramatic) var(--ease) both; animation-delay:.22s; }
.hero-stats{ display:flex; gap:44px; margin-top:56px; z-index:2; flex-wrap:wrap; justify-content:center;
  animation:fade-up var(--dramatic) var(--ease) both; animation-delay:.3s; }
.hero-stat{ text-align:center; }
.hero-stat .num{ font-family:var(--font-mono); font-weight:700; font-size:26px; color:var(--text); }
.hero-stat .lbl{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; }
@keyframes fade-up{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }

.landing-frame-strip{ position:relative; z-index:2; display:flex; gap:14px; margin-top:60px; padding:0 20px; max-width:900px;
  animation:fade-up var(--dramatic) var(--ease) both; animation-delay:.36s; }
.frame-chip{ flex:1; min-width:120px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface);
  padding:14px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.frame-chip .icon{ width:20px; height:20px; color:var(--cyan); }
.frame-chip span{ font-size:11px; color:var(--text-dim); font-weight:600; letter-spacing:.04em; }

/* =========================================================================================
   LOBBY / SETUP DASHBOARD
   ========================================================================================= */
#screen-lobby{ overflow-y:auto; }
.lobby-grid{ max-width:960px; margin:0 auto; padding:28px 22px 70px; display:grid; grid-template-columns:1.15fr .85fr; gap:20px; }
@media (max-width:860px){ .lobby-grid{ grid-template-columns:1fr; } }
.lobby-head{ grid-column:1/-1; margin-bottom:4px; }
.lobby-head h1{ font-family:var(--font-hero); font-weight:400; font-size:32px; margin:0 0 4px; letter-spacing:.01em; -webkit-text-stroke:2px var(--void); paint-order:stroke fill; }
.lobby-head p{ color:var(--text-dim); font-size:13.5px; margin:0; }

label.field-label{ display:flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:8px; font-weight:700; }
input[type=text], input[type=email]{ width:100%; background:var(--void); border:1px solid var(--line); color:var(--text);
  font-size:15px; padding:13px 15px; border-radius:var(--r-sm); outline:none; transition:border-color var(--fast); font-family:var(--font-body); }
input[type=text]:focus, input[type=email]:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(232,178,61,.12); }
.row{ display:flex; gap:10px; }
.row > *{ flex:1; }

.mode-toggle{ display:flex; gap:8px; }
.mode-opt{ flex:1; text-align:center; padding:14px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--void); cursor:pointer; font-weight:700; color:var(--text-dim); font-size:13.5px;
  transition:all var(--fast) var(--ease); position:relative; }
.mode-opt:hover{ border-color:var(--line-strong); }
.mode-opt.selected{ border-color:var(--accent); color:#fff; background:rgba(255,56,96,.1); box-shadow:0 0 0 1px var(--accent) inset; }
.hint{ font-size:12px; color:var(--text-faint); line-height:1.6; margin-top:10px; }

/* QUICK MATCH — Omegle-style random-opponent 1v1 queue (server/src/routes/matchmaking.js) */
.qm-panel{ border-color:rgba(232,178,61,.4); background:linear-gradient(160deg, rgba(232,178,61,.07), var(--surface)); }
.qm-idle{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.qm-idle-icon{ width:46px; height:46px; border-radius:50%; background:var(--void); border:2px solid var(--gold); color:var(--gold);
  display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 0 14px rgba(232,178,61,.4); animation:bp-spark-pulse 2s ease-in-out infinite; }
.qm-idle-body{ flex:1; min-width:140px; }
.qm-idle-title{ font-family:var(--font-display); font-weight:800; font-size:15px; margin-bottom:2px; }
.qm-idle-sub{ font-size:11.5px; color:var(--text-faint); }
.qm-go-btn{ flex:none; }
.qm-searching{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:10px 0 4px; gap:2px; }
.qm-radar{ position:relative; width:64px; height:64px; display:flex; align-items:center; justify-content:center; color:var(--gold); margin-bottom:8px; }
.qm-radar-ring{ position:absolute; inset:0; border:2px solid var(--gold); border-radius:50%; animation:qm-radar-ping 1.8s ease-out infinite; }
.qm-radar-ring:nth-child(2){ animation-delay:.9s; }
@keyframes qm-radar-ping{ 0%{ transform:scale(.4); opacity:.8;} 100%{ transform:scale(1.8); opacity:0;} }
.qm-searching-title{ font-family:var(--font-display); font-weight:800; font-size:14px; }
.qm-searching-sub{ font-size:11px; color:var(--text-faint); margin-bottom:10px; }

.cam-frame{ position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--void); border:1px solid var(--line);
  aspect-ratio:4/3; max-width:260px; margin:0 auto; }
.cam-frame video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.cam-frame .cam-badge{ position:absolute; left:8px; bottom:8px; display:flex; align-items:center; gap:5px; font-size:10px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 8px; border-radius:12px; background:rgba(0,0,0,.6); color:var(--text-dim); }
.cam-frame.live .cam-badge{ color:var(--good); }
.cam-frame.live .cam-badge .dot-live{ width:6px; height:6px; border-radius:50%; background:var(--good); animation:pulse-dot 1.6s infinite; }
.status-line{ font-size:12.5px; color:var(--text-faint); text-align:center; margin:10px 0 0; min-height:16px; }

.code-display{ font-family:var(--font-mono); font-size:32px; font-weight:700; letter-spacing:8px; text-align:center; padding:16px;
  background:var(--void); border-radius:var(--r-md); border:1px dashed var(--cyan); color:var(--cyan); }
.player-chip{ display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--void);
  border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:6px; font-size:13.5px; font-weight:600; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--good); flex-shrink:0; box-shadow:0 0 6px var(--good); }

/* wallet mini card */
.wallet-card .balance-big{ font-family:var(--font-mono); font-weight:800; font-size:28px; margin:4px 0 2px; }
.wallet-card .balance-sub{ font-size:11.5px; color:var(--text-faint); margin-bottom:16px; }
.wallet-actions{ display:flex; gap:8px; }
.wallet-not-connected{ text-align:center; padding:10px 0 4px; }
.wallet-not-connected .icon{ width:30px; height:30px; color:var(--text-faint); margin-bottom:10px; }

.brand-foot{ text-align:center; color:var(--text-faint); font-size:11px; margin-top:30px; line-height:1.6; grid-column:1/-1; }

/* =========================================================================================
   MODALS (wallet connect / settings / case opening share base)
   ========================================================================================= */
.modal-veil{ position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center;
  background:rgba(4,4,7,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:veil-in var(--normal) var(--ease); }
.modal-veil.active{ display:flex; }
@keyframes veil-in{ from{ opacity:0;} to{ opacity:1;} }
.modal-box{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  width:min(420px,90vw); max-height:86vh; overflow:auto; animation:modal-in var(--dramatic) var(--ease-spring); }
@keyframes modal-in{ from{ opacity:0; transform:translateY(16px) scale(.96);} to{ opacity:1; transform:translateY(0) scale(1);} }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.modal-head h3{ margin:0; font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:.03em; }
.modal-close{ width:32px; height:32px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--fast); }
.modal-close:hover{ color:var(--text); border-color:var(--line-strong); }
.modal-close .icon{ width:14px; height:14px; }
.modal-body{ padding:20px 22px 22px; }

.wallet-opt{ display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--void); cursor:pointer; margin-bottom:10px; transition:all var(--fast) var(--ease); }
.wallet-opt:hover{ border-color:var(--cyan); transform:translateX(3px); background:var(--surface-2); }
.wallet-opt .glyph{ width:42px; height:42px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wallet-opt .glyph .icon{ width:20px; height:20px; color:#fff; }
.wallet-opt .info{ flex:1; min-width:0; }
.wallet-opt .info .name{ font-weight:700; font-size:14px; }
.wallet-opt .info .nets{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }
.wallet-opt .state{ width:18px; height:18px; }
.wallet-opt-badge{ color:var(--cyan); font-weight:700; }
.wallet-opt.disabled{ opacity:.4; cursor:not-allowed; }
.wallet-opt.disabled:hover{ border-color:var(--line); transform:none; background:var(--void); }
.wallet-opt.disabled .wallet-opt-badge{ color:var(--text-faint); }

/* =========================================================================================
   MATCH ARENA
   ========================================================================================= */
#screen-match, #screen-winner{ background:#000; }
#arenaHud{ position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:999; text-align:center; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:4px; }
#modeTag{ font-size:11px; color:var(--text-dim); letter-spacing:.12em; text-transform:uppercase; font-weight:700; }
.arena-timer{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--text); text-shadow:0 2px 12px rgba(0,0,0,.8); }
#arena{ position:absolute; inset:0; }
#centerVs{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; color:rgba(255,255,255,.1);
  font-family:var(--font-display); font-size:56px; font-weight:800; pointer-events:none; }

.tile{
  position:absolute; overflow:hidden; border-radius:var(--r-lg); background:#050508;
  box-shadow:0 0 0 2px var(--tile-color,#333), var(--shadow-lg);
  transition: width .55s var(--ease), height .55s var(--ease), box-shadow var(--normal) var(--ease);
}
.tile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.tile .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), transparent 30%, transparent 60%, rgba(0,0,0,.6)); }

/* PLAYER FRAMES — a persistent border on the fighter's own video tile, rarity-family styled
   (see applyFrameEffect() in script.js) the same way hit/win/camera effects are: one look per
   rarity tier rather than per individual item, with the legendary tier ("Sovereign Frame")
   getting the standalone, most elaborate treatment. */
/* will-change forces its own compositor layer, so animating these (opacity/filter/
   background-position — the latter isn't itself GPU-composited) repaints just this thin
   border layer instead of getting bundled with the constantly-updating <video> beneath it
   every frame — a real cost on GPUs with weaker layer/compositing throughput. */
.tile .frame-border{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; box-sizing:border-box;
  will-change:opacity, filter, background-position; }
.tile .frame-border.frame-common{ border:2px solid var(--frame-color, #8b8b9c); opacity:.85; }
.tile .frame-border.frame-uncommon{ border:3px solid var(--frame-color); box-shadow:0 0 12px var(--frame-color); animation:frame-pulse-soft 2.6s ease-in-out infinite; }
.tile .frame-border.frame-rare{ border:3px solid var(--frame-color); box-shadow:0 0 16px var(--frame-color);
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  background-size:260% 260%; animation:frame-shift 3.2s linear infinite; }
.tile .frame-border.frame-epic{ border:4px solid var(--frame-color); box-shadow:0 0 22px var(--frame-color), inset 0 0 26px rgba(178,59,255,.28); animation:frame-pulse-strong 1.6s ease-in-out infinite; }
.tile .frame-border.frame-legendary{ border:4px solid #ffcf3f; box-shadow:0 0 16px rgba(255,201,60,.65), inset 0 0 60px 14px rgba(255,201,60,.3);
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  background-size:260% 260%; animation:legendary-pulse 1.4s ease-in-out infinite, frame-shift 2.2s linear infinite; }
@keyframes frame-pulse-soft{ 0%,100%{ opacity:.75;} 50%{ opacity:1;} }
@keyframes frame-pulse-strong{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.4);} }
@keyframes frame-shift{ 0%{ background-position:0% 0%;} 100%{ background-position:200% 200%;} }
.tile .hud{ position:absolute; left:12px; right:12px; top:10px; display:flex; justify-content:space-between; align-items:flex-start; z-index:3; }
.tile .hud-left{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.tile .name-row{ display:flex; align-items:center; gap:6px; }
.tile .name{ color:#fff; font-weight:800; font-size:13px; text-shadow:0 1px 4px rgba(0,0,0,.8); font-family:var(--font-display); letter-spacing:.02em; }
.tile .rank-tag{ font-size:9.5px; font-weight:700; color:var(--gold); background:rgba(255,201,60,.15); border:1px solid rgba(255,201,60,.4);
  padding:1px 6px; border-radius:8px; letter-spacing:.04em; }
.tile .energy-bar{ width:110px; height:5px; border-radius:4px; background:rgba(255,255,255,.15); overflow:hidden; }
.tile .energy-fill{ height:100%; border-radius:4px; background:var(--tile-color,#fff); transition:width .5s var(--ease); }
.tile .pct{ color:var(--tile-color,#fff); font-size:18px; font-weight:800; font-family:var(--font-mono); text-shadow:0 1px 6px rgba(0,0,0,.8); }
.tile .conn{ display:flex; align-items:center; gap:3px; margin-top:2px; }
.tile .conn .icon{ width:11px; height:11px; color:var(--good); }
.tile .status-badges{ position:absolute; left:12px; bottom:10px; display:flex; gap:6px; z-index:3; }
.badge{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:4px 8px;
  border-radius:20px; background:rgba(0,0,0,.55); color:var(--text-dim); border:1px solid rgba(255,255,255,.14); }
.badge.guard-high{ color:var(--cyan); border-color:var(--cyan); }
.badge.guard-low{ color:var(--good); border-color:var(--good); }
.badge.guard-parry{ color:var(--warn); border-color:var(--warn); }
.badge.guard-none{ color:var(--accent); border-color:var(--accent); }
.flash{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:4; }
.flash.hit{ background:rgba(255,56,96,.5); }
.flash.block{ background:rgba(232,178,61,.4); }
.flash.show{ opacity:1; }
.punch-label{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) scale(.6); font-family:var(--font-display); font-weight:800;
  font-size:26px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.8); opacity:0; pointer-events:none; z-index:5;
  transition:opacity .25s ease, transform .25s ease; letter-spacing:.04em; }
.punch-label.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.dmg-number{ position:absolute; left:50%; top:56%; transform:translate(-50%,0); font-family:var(--font-mono); font-weight:800;
  font-size:20px; color:var(--accent); text-shadow:0 2px 8px rgba(0,0,0,.8); pointer-events:none; z-index:5; opacity:0; }
.dmg-number.show{ animation:dmg-float var(--dramatic) var(--ease) forwards; }
@keyframes dmg-float{ 0%{ opacity:0; transform:translate(-50%,0);} 20%{ opacity:1;} 100%{ opacity:0; transform:translate(-50%,-30px);} }

/* camera frame states */
.tile.state-ready{ box-shadow:0 0 0 2px var(--tile-color,#333), 0 0 24px rgba(255,255,255,.08), var(--shadow-lg); }
.tile.state-attacking{ box-shadow:0 0 0 3px var(--tile-color,#fff), 0 0 32px var(--tile-color,#fff), var(--shadow-lg); }
.tile.state-blocking{ box-shadow:0 0 0 3px var(--cyan), 0 0 26px rgba(232,178,61,.5), var(--shadow-lg); }
.tile.state-counter{ box-shadow:0 0 0 3px var(--gold), 0 0 40px rgba(255,201,60,.6), var(--shadow-lg); animation:counter-pulse .4s ease; }
@keyframes counter-pulse{ 0%,100%{ filter:brightness(1);} 40%{ filter:brightness(1.5);} }
.tile.state-low{ box-shadow:0 0 0 3px var(--danger), 0 0 20px rgba(255,77,94,.5), var(--shadow-lg); animation:low-pulse 1s ease-in-out infinite; will-change:opacity; }
@keyframes low-pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.75;} }
.tile.state-winner{ box-shadow:0 0 0 3px var(--gold), 0 0 60px rgba(255,201,60,.7), var(--shadow-lg); }
.tile.state-defeated{ filter:grayscale(.7) brightness(.55); }
.tile.state-disconnected{ box-shadow:0 0 0 3px var(--danger); }
.tile.state-disconnected::after{ content:''; position:absolute; inset:0; background:rgba(30,4,8,.55); z-index:6; }
.disc-overlay{ position:absolute; inset:0; z-index:7; display:none; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--danger); text-align:center; }
.tile.state-disconnected .disc-overlay{ display:flex; }
.disc-overlay .icon{ width:26px; height:26px; }
.disc-overlay span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

@keyframes eff-shake{ 0%{transform:translate(0,0);} 20%{transform:translate(-6px,4px);} 40%{transform:translate(5px,-5px);}
  60%{transform:translate(-4px,3px);} 80%{transform:translate(3px,-2px);} 100%{transform:translate(0,0);} }
.tile.shaking{ animation: eff-shake .35s ease; }
#arena.arena-shake{ animation: eff-shake .4s ease; }

#calibrateOverlay{ position:absolute; inset:0; z-index:1000; background:rgba(0,0,0,.78); display:none;
  align-items:center; justify-content:center; flex-direction:column; text-align:center; }
#calibrateOverlay.active{ display:flex; }
#calibrateOverlay .icon{ width:34px; height:34px; color:var(--cyan); margin-bottom:14px; }
#calibrateOverlay h2{ font-family:var(--font-display); font-size:24px; margin:0 0 8px; font-weight:700; }
#calibrateOverlay p{ color:var(--text-dim); max-width:340px; margin:0 0 24px; font-size:14px; line-height:1.5; }
#calibrateNum{ font-family:var(--font-mono); font-size:68px; font-weight:800; color:var(--cyan); text-shadow:0 0 30px rgba(232,178,61,.5); }

/* =========================================================================================
   VS INTRO — plays once per match, right before the guard-position countdown. A true 3-column
   grid ([1fr auto 1fr]) keeps both fighters bilaterally symmetric around the VS regardless of
   name length — the earlier version used two independent fixed-width, independently-centered
   boxes, which looked lopsided whenever the two names weren't close to the same length.
   SFX.vsIntro() times its impact hit to land on the VS's smash-in (see UI.playVsIntro).
   ========================================================================================= */
#vsIntroOverlay{ position:absolute; inset:0; z-index:1001; background:var(--void); display:none;
  flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
#vsIntroOverlay.active{ display:flex; }
.vs-intro-vignette{ position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(232,178,61,.18), transparent 60%); }
.vs-intro-beam{ position:absolute; top:-20%; width:60%; height:140%; opacity:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(232,178,61,.14) 50%, transparent 60%);
  animation:vs-beam-in .8s var(--ease) both; }
.vs-intro-beam-l{ left:-18%; animation-delay:.05s; }
.vs-intro-beam-r{ right:-18%; transform:scaleX(-1); animation-delay:.15s; }
@keyframes vs-beam-in{ from{ opacity:0;} to{ opacity:1;} }

.vs-stage{ position:relative; z-index:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  column-gap:clamp(14px,3.5vw,44px); width:min(1080px,94vw); }
.vs-fighter{ display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; }
.vs-fighter-left{ animation:vs-slide-left .6s var(--ease-spring) both; }
.vs-fighter-right{ animation:vs-slide-right .6s var(--ease-spring) both; animation-delay:.1s; }
@keyframes vs-slide-left{ from{ transform:translateX(-70px); opacity:0;} to{ transform:translateX(0); opacity:1;} }
@keyframes vs-slide-right{ from{ transform:translateX(70px); opacity:0;} to{ transform:translateX(0); opacity:1;} }
.vs-fighter-badge{ width:clamp(46px,7vw,64px); height:clamp(46px,7vw,64px); border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; background:var(--surface); border:3px solid var(--gold);
  font-family:var(--font-hero); font-weight:400; font-size:clamp(18px,2.6vw,26px); color:var(--gold);
  box-shadow:0 0 0 4px var(--void), 0 0 22px rgba(232,178,61,.35); }
.vs-fighter-name{ font-family:var(--font-hero); font-weight:400; font-size:clamp(22px,3.6vw,38px);
  color:#fff; -webkit-text-stroke:2px var(--void); paint-order:stroke fill; letter-spacing:.01em;
  text-shadow:0 4px 0 var(--gold); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-fighter-tag{ font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.22em;
  color:var(--text-dim); text-transform:uppercase; }

/* FFA variant (3-4 fighters, "1v1v1v1") — no single VS glyph makes sense between more than two
   names, so this swaps the [1fr auto 1fr] duel grid for an even N-column row under a header
   label, and every card pops up from below (rather than sliding from a side) since that reads
   fine at any position in the row. Built entirely by UI.playVsIntro in script.js, which decides
   duel vs. FFA off the live roster size — nothing here is FFA-specific markup in the HTML. */
.vs-header{ position:relative; z-index:1; margin-bottom:clamp(16px,3vw,32px); text-align:center;
  font-family:var(--font-hero); font-weight:400; font-size:clamp(20px,3.4vw,34px); letter-spacing:.03em;
  color:var(--gold); -webkit-text-stroke:2px var(--void); paint-order:stroke fill; text-transform:uppercase;
  opacity:0; animation:fade-up .5s var(--ease) both; animation-delay:.05s; }
.vs-header:empty{ display:none; }
.vs-stage.multi{ display:grid; grid-template-columns:repeat(var(--n,3), 1fr); column-gap:clamp(10px,2.5vw,28px); }
.vs-fighter-multi{ animation:vs-pop-up .55s var(--ease-spring) both; }
@keyframes vs-pop-up{ from{ transform:translateY(36px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
.vs-stage.multi .vs-fighter-badge{ width:clamp(38px,6vw,54px); height:clamp(38px,6vw,54px); font-size:clamp(15px,2.2vw,22px); }
.vs-stage.multi .vs-fighter-name{ font-size:clamp(15px,2.6vw,26px); -webkit-text-stroke:1.2px var(--void); text-shadow:0 2px 0 var(--gold); }

.vs-clash-wrap{ position:relative; display:flex; align-items:center; justify-content:center; width:clamp(70px,11vw,120px); height:clamp(70px,11vw,120px); }
.vs-clash-ring{ position:absolute; inset:0; border:3px solid var(--gold); border-radius:50%; opacity:0;
  animation:vs-ring-burst .7s ease-out both; animation-delay:.32s; }
@keyframes vs-ring-burst{ 0%{ transform:scale(.3); opacity:.9;} 100%{ transform:scale(1.8); opacity:0;} }
.vs-clash{ position:relative; z-index:1; font-family:var(--font-hero); font-weight:400; font-size:clamp(42px,7.5vw,80px);
  color:var(--gold); -webkit-text-stroke:4px var(--void); paint-order:stroke fill;
  animation:vs-clash-in .7s var(--ease-spring) both; animation-delay:.3s; opacity:0; }
@keyframes vs-clash-in{ 0%{ transform:scale(3.2) rotate(-8deg); opacity:0;} 60%{ transform:scale(.92) rotate(2deg); opacity:1;}
  80%{ transform:scale(1.1) rotate(0deg);} 100%{ transform:scale(1) rotate(0deg); opacity:1;} }

.vs-tagline{ position:absolute; bottom:15%; left:50%; transform:translateX(-50%); z-index:1;
  font-family:var(--font-hero); font-weight:400; font-size:clamp(40px,8.5vw,84px); letter-spacing:.02em;
  color:#fff; -webkit-text-stroke:4px var(--void); paint-order:stroke fill;
  text-shadow:0 5px 0 var(--danger), 0 0 34px rgba(255,77,94,.55); opacity:0;
  animation:fight-pop .55s var(--ease-spring) both; animation-delay:.95s; }
.vs-tagline::before{ content:''; position:absolute; left:50%; top:50%; z-index:-1; pointer-events:none;
  width:clamp(220px,42vw,420px); height:clamp(220px,42vw,420px); border-radius:2px;
  background:repeating-conic-gradient(from 0deg, rgba(255,77,94,.9) 0deg 5deg, transparent 5deg 22deg);
  transform:translate(-50%,-50%) scale(0); opacity:0;
  animation:fight-burst .7s ease-out both; animation-delay:.95s; }
@keyframes fight-pop{ 0%{ opacity:0; transform:translateX(-50%) scale(.3) rotate(-6deg);}
  55%{ opacity:1; transform:translateX(-50%) scale(1.22) rotate(3deg);}
  100%{ opacity:1; transform:translateX(-50%) scale(1) rotate(0deg);} }
@keyframes fight-burst{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.15) rotate(0deg);}
  35%{ opacity:.95;} 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(30deg);} }
#screen-match.vs-shake{ animation:eff-shake .4s ease; }

.practice-tag{ position:absolute; top:16px; right:16px; z-index:999; background:rgba(255,178,59,.12);
  border:1px solid var(--warn); color:var(--warn); font-size:10.5px; font-weight:800; padding:6px 12px; border-radius:20px;
  display:flex; align-items:center; gap:6px; letter-spacing:.04em; text-transform:uppercase; }
.practice-tag .icon{ width:13px; height:13px; }

/* =========================================================================================
   WINNER / CINEMATIC VICTORY
   ========================================================================================= */
#screen-winner{ display:none; }
#screen-winner.active{ display:flex; align-items:center; justify-content:center; flex-direction:column; }
#winnerVideoWrap{ position:absolute; inset:0; }
#winnerVideoWrap video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); filter:saturate(1.15) contrast(1.05); }
#winnerVideoWrap::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, transparent 35%, rgba(0,0,0,.55) 100%); z-index:1; }
#winnerVideoWrap video{ animation:champion-push-in 1.1s var(--ease) both; }
@keyframes champion-push-in{ from{ transform:scaleX(-1) scale(1.18); filter:saturate(1.15) contrast(1.05) brightness(1.3);}
  to{ transform:scaleX(-1) scale(1); filter:saturate(1.15) contrast(1.05) brightness(1);} }
#winnerFlash{ position:absolute; inset:0; z-index:3; background:#fff; pointer-events:none; opacity:0; }
#winnerFlash.pop{ animation:winner-flash-pop .5s ease-out forwards; }
@keyframes winner-flash-pop{ 0%{ opacity:.9;} 100%{ opacity:0;} }
#winnerOverlay{ position:relative; z-index:2; text-align:center; background:linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.1) 65%);
  width:100%; padding:50px 20px 56px; position:absolute; bottom:0; }
#championFlare{ font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); margin-bottom:6px; opacity:0; animation:champion-flare-in .6s var(--ease-spring) both; animation-delay:.05s;
  text-shadow:0 0 16px rgba(232,178,61,.7); }
@keyframes champion-flare-in{ 0%{ opacity:0; transform:scale(.5) translateY(10px);} 60%{ opacity:1; transform:scale(1.15) translateY(0);} 100%{ opacity:1; transform:scale(1) translateY(0);} }
.winner-crown{ width:52px; height:52px; margin:0 auto 10px; color:var(--gold); filter:drop-shadow(0 0 18px rgba(255,201,60,.6));
  animation:crown-drop var(--cinematic) var(--ease-spring) both; }
@keyframes crown-drop{ from{ opacity:0; transform:translateY(-40px) scale(.6);} to{ opacity:1; transform:translateY(0) scale(1);} }
#screen-winner.champion-shake{ animation:eff-shake .5s ease; }
#winnerName{ font-family:var(--font-hero); font-weight:400; font-size:56px; color:#fff; -webkit-text-stroke:3px var(--void); paint-order:stroke fill;
  text-shadow:0 5px 0 var(--gold); margin:0;
  animation:fade-up var(--dramatic) var(--ease) both; animation-delay:.15s; }
#winnerSub{ color:var(--gold); font-weight:700; letter-spacing:.16em; margin:8px 0 24px; font-size:13px; text-transform:uppercase;
  animation:fade-up var(--dramatic) var(--ease) both; animation-delay:.25s; }
.winner-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; animation:fade-up var(--dramatic) var(--ease) both; animation-delay:.32s; }
#coinsEarnedLine{ animation:fade-up var(--dramatic) var(--ease) both; animation-delay:.4s; }

@keyframes eff-particle{ 0%{ transform:translate(-50%,-50%) translate(0,0) scale(1); opacity:1;}
  100%{ transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.2); opacity:0;} }
.particle{ position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; pointer-events:none;
  animation: eff-particle .55s ease-out forwards; z-index:50; }

@keyframes eff-pow{ 0%{ transform:translate(-50%,-50%) scale(.2) rotate(var(--rot)); opacity:0;}
  30%{ transform:translate(-50%,-50%) scale(1.15) rotate(var(--rot)); opacity:1;}
  100%{ transform:translate(-50%,-50%) scale(1) rotate(var(--rot)); opacity:0;} }
.pow-stamp{ position:absolute; left:50%; top:38%; font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:.03em;
  -webkit-text-stroke:2px #000; animation: eff-pow .5s ease forwards; pointer-events:none; z-index:51; }

@keyframes eff-ring{ 0%{ transform:translate(-50%,-50%) scale(0); opacity:.9;} 100%{ transform:translate(-50%,-50%) scale(3); opacity:0;} }
.ring{ position:absolute; left:50%; top:50%; width:60px; height:60px; border:4px solid; border-radius:50%;
  pointer-events:none; animation: eff-ring .5s ease-out forwards; z-index:49; }

@keyframes eff-flash{ 0%{opacity:.6;} 100%{opacity:0;} }

@keyframes confetti-fall{ 0%{ transform:translateY(-10vh) rotate(0deg); opacity:1;}
  100%{ transform:translateY(110vh) rotate(720deg); opacity:.9;} }
.confetti{ position:absolute; top:0; width:8px; height:14px; animation-name:confetti-fall;
  animation-timing-function:ease-in; animation-fill-mode:forwards; pointer-events:none; z-index:5; }
.legendary-glow{ box-shadow: inset 0 0 220px 44px rgba(255,201,60,.5); animation: legendary-pulse 1.4s ease-in-out infinite; }
@keyframes legendary-pulse{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.25);} }

/* =========================================================================================
   LEADERBOARD / PROFILE / LOCKER (chrome screens)
   ========================================================================================= */
.page-wrap{ max-width:960px; margin:0 auto; padding:28px 22px 70px; position:relative; z-index:1; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.page-head h1{ font-family:var(--font-hero); font-weight:400; font-size:30px; margin:0 0 4px; -webkit-text-stroke:2px var(--void); paint-order:stroke fill; }
.page-head p{ color:var(--text-dim); font-size:13px; margin:0; }

.segmented{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:3px; gap:2px; }
.segmented .seg{ padding:7px 15px; border-radius:16px; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--text-dim);
  cursor:pointer; transition:all var(--fast); }
.segmented .seg.active{ background:var(--grad-primary); color:#fff; }

.lb-table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.lb-table thead th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint);
  font-weight:700; padding:0 14px 6px; }
.lb-row{ background:var(--surface); border:1px solid var(--line); transition:all var(--fast) var(--ease); }
.lb-row td{ padding:13px 14px; font-size:13.5px; }
.lb-row td:first-child{ border-radius:var(--r-sm) 0 0 var(--r-sm); border-left:1px solid var(--line); }
.lb-row td:last-child{ border-radius:0 var(--r-sm) var(--r-sm) 0; border-right:1px solid var(--line); }
.lb-row:hover{ border-color:var(--line-strong); transform:translateX(2px); }
.lb-row.top1{ background:linear-gradient(90deg, rgba(255,201,60,.12), var(--surface)); border-color:rgba(255,201,60,.4); }
.lb-row.top2{ background:linear-gradient(90deg, rgba(200,200,215,.1), var(--surface)); border-color:rgba(200,200,215,.35); }
.lb-row.top3{ background:linear-gradient(90deg, rgba(255,155,79,.1), var(--surface)); border-color:rgba(255,155,79,.35); }
.lb-row.me{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset; }
.lb-rank{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-weight:700; }
.lb-rank .icon{ width:16px; height:16px; }
.lb-fighter{ display:flex; align-items:center; gap:10px; font-weight:700; }
.lb-avatar{ width:30px; height:30px; border-radius:8px; background:var(--grad-cyan); display:flex; align-items:center; justify-content:center; color:#03181c; font-family:var(--font-display); font-weight:800; font-size:13px; flex-shrink:0; }
.lb-streak{ display:inline-flex; align-items:center; gap:4px; color:var(--warn); font-weight:700; }
.lb-streak .icon{ width:12px; height:12px; }
.mono-num{ font-family:var(--font-mono); font-weight:700; }

/* profile */
#screen-profile{ overflow-y:auto; }
.profile-grid{ display:grid; grid-template-columns:1fr 1.6fr; gap:20px; }
@media (max-width:820px){ .profile-grid{ grid-template-columns:1fr; } }
.player-card{ text-align:center; }
.player-avatar{ width:88px; height:88px; border-radius:22px; margin:0 auto 14px; background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:34px; color:#fff;
  box-shadow:0 0 30px rgba(255,56,96,.35); cursor:pointer; transition:transform var(--fast); }
.player-avatar:hover{ transform:scale(1.03); }
.player-avatar.has-emoji{ font-size:44px; background:var(--surface-2); box-shadow:none; border:2px solid var(--line-strong); }
.player-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.player-card h2{ margin:0 0 4px; font-family:var(--font-display); font-size:22px; }
.player-division{ display:inline-flex; align-items:center; gap:6px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:12px; }
.player-division .icon{ width:14px; height:14px; }

.profile-badge-row{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px; }
.profile-badge-chip{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:20px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--text-dim); }
.profile-badge-chip .icon{ width:12px; height:12px; }

.loadout-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:8px; }
.loadout-slot{ background:var(--void); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 6px; text-align:center; }
.loadout-slot .symbol{ display:flex; justify-content:center; margin-bottom:4px; }
.loadout-slot .cat{ font-size:8.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:700; }
.loadout-slot .name{ font-size:10.5px; font-weight:700; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.avatar-current-row{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.avatar-current-preview{ width:64px; height:64px; border-radius:16px; flex-shrink:0; background:var(--void); border:2px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-size:30px; overflow:hidden; }
.avatar-current-preview img{ width:100%; height:100%; object-fit:cover; }
.avatar-picker{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.avatar-opt{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:22px; border-radius:var(--r-sm);
  background:var(--void); border:2px solid var(--line); cursor:pointer; transition:all var(--fast); }
.avatar-opt:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.avatar-opt.selected{ border-color:var(--accent); background:rgba(255,56,96,.12); }
.xp-bar-wrap{ margin-top:16px; text-align:left; }
.xp-bar-label{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-faint); margin-bottom:6px; font-weight:700; }
.xp-bar{ height:8px; border-radius:5px; background:var(--void); border:1px solid var(--line); overflow:hidden; }
.xp-bar-fill{ height:100%; background:var(--grad-cyan); border-radius:5px; transition:width var(--cinematic) var(--ease); box-shadow:0 0 10px rgba(232,178,61,.5); }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.stat-tile{ background:var(--void); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; }
.stat-tile .icon{ width:16px; height:16px; color:var(--cyan); margin-bottom:8px; }
.stat-tile .val{ font-family:var(--font-mono); font-size:22px; font-weight:800; }
.stat-tile .lbl{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

.challenge-row{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--void); margin-bottom:10px; }
.challenge-row .glyph{ width:38px; height:38px; border-radius:var(--r-sm); background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--cyan); }
.challenge-row .glyph .icon{ width:18px; height:18px; }
.challenge-row .body{ flex:1; min-width:0; }
.challenge-row .title{ font-weight:700; font-size:13px; margin-bottom:6px; }
.challenge-row .bar{ height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.challenge-row .bar-fill{ height:100%; background:var(--grad-cyan); border-radius:4px; }
.challenge-row .prog{ font-size:10.5px; color:var(--text-faint); margin-top:4px; font-family:var(--font-mono); }
.challenge-row.done{ border-color:rgba(47,227,160,.4); }
.challenge-row.done .glyph{ background:rgba(47,227,160,.15); color:var(--good); }

/* =========================================================================================
   BATTLE PASS
   ========================================================================================= */
.bp-hero{ position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line);
  background:linear-gradient(160deg, var(--surface-2), var(--surface)); padding:26px 24px; margin-bottom:18px; }
.bp-hero-beam{ position:absolute; top:-30%; width:55%; height:160%; pointer-events:none; opacity:.5;
  background:linear-gradient(100deg, transparent 40%, rgba(232,178,61,.16) 50%, transparent 60%); }
.bp-hero-beam-l{ left:-15%; animation:drift-a 9s ease-in-out infinite; }
.bp-hero-beam-r{ right:-15%; animation:drift-b 11s ease-in-out infinite; }
.bp-hero-body{ position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.bp-hero-eyebrow{ display:inline-flex; align-items:center; gap:6px; color:var(--gold); font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }
.bp-hero-eyebrow .icon{ width:13px; height:13px; }
.bp-hero-text h1{ margin:0 0 6px; }
.bp-hero-text p{ margin:0; max-width:480px; }
.bp-premium-cta{ position:relative; overflow:hidden; flex-shrink:0; }
.bp-premium-cta::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  background-size:260% 260%; animation:frame-shift 2.6s linear infinite; pointer-events:none; }

.bp-progress-panel{ margin-bottom:18px; }
.bp-xp-bar{ position:relative; height:14px; border-radius:8px; background:var(--void); border:1px solid var(--line); overflow:visible; }
.bp-xp-bar-fill{ position:relative; height:100%; border-radius:8px 0 0 8px; overflow:visible;
  background:linear-gradient(90deg, #b8842a, var(--gold)); box-shadow:0 0 12px rgba(232,178,61,.55);
  transition:width var(--cinematic) var(--ease); }
.bp-xp-spark{ position:absolute; right:-5px; top:50%; width:14px; height:14px; border-radius:50%; transform:translateY(-50%);
  background:radial-gradient(circle, #fff6d8, var(--gold) 70%); box-shadow:0 0 10px 3px rgba(255,215,110,.8); animation:bp-spark-pulse 1.3s ease-in-out infinite; }
@keyframes bp-spark-pulse{ 0%,100%{ transform:translateY(-50%) scale(1);} 50%{ transform:translateY(-50%) scale(1.35);} }
.bp-xp-pips{ position:absolute; inset:0; pointer-events:none; }
.bp-xp-pip{ position:absolute; top:50%; width:5px; height:5px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--void); border:1px solid var(--line-2, var(--line)); }
.bp-xp-pip.lit{ background:#fff6d8; border-color:transparent; box-shadow:0 0 6px rgba(255,215,110,.9); }
.bp-next-label{ margin-top:10px; font-size:11.5px; color:var(--text-dim); font-weight:700; font-family:var(--font-mono); }

.bp-track-wrap{ overflow-x:auto; }
.bp-track{ display:grid; grid-auto-flow:column; grid-auto-columns:158px; gap:12px; padding:6px 4px 8px; }
.bp-tier{ position:relative; border:1px solid var(--line); border-radius:var(--r-md); background:var(--void); padding:12px 10px 10px;
  display:flex; flex-direction:column; gap:8px; transition:border-color var(--fast), transform var(--fast) var(--ease); }
.bp-tier:hover{ transform:translateY(-2px); }
.bp-tier.reached{ border-color:rgba(232,178,61,.35); }
.bp-tier.next-tier{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 18px rgba(232,178,61,.35); animation:bp-next-pulse 2s ease-in-out infinite; }
.bp-tier.has-ready:not(.next-tier){ border-color:rgba(47,227,160,.5); }
@keyframes bp-next-pulse{ 0%,100%{ box-shadow:0 0 0 1px var(--gold), 0 0 14px rgba(232,178,61,.3);} 50%{ box-shadow:0 0 0 1px var(--gold), 0 0 24px rgba(232,178,61,.55);} }
.bp-next-flag{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--gold); color:#241505;
  font-size:9px; font-weight:800; letter-spacing:.08em; padding:2px 8px; border-radius:20px; box-shadow:0 2px 6px rgba(0,0,0,.4); z-index:2; }
.bp-tier-num{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); font-weight:700; display:flex; justify-content:space-between; }

.bp-reward{ border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 8px; text-align:center; background:var(--surface);
  position:relative; transition:transform var(--fast) var(--ease), border-color var(--fast); }
.bp-reward.premium{ border-color:rgba(255,201,60,.3); background:linear-gradient(160deg, rgba(255,201,60,.08), var(--surface)); }
.bp-reward.ready{ border-color:var(--good); animation:bp-ready-pulse 1.8s ease-in-out infinite; }
.bp-reward.ready.premium{ border-color:var(--gold); animation:bp-ready-pulse-gold 1.8s ease-in-out infinite; }
@keyframes bp-ready-pulse{ 0%,100%{ box-shadow:0 0 0 rgba(47,227,160,0);} 50%{ box-shadow:0 0 12px rgba(47,227,160,.55);} }
@keyframes bp-ready-pulse-gold{ 0%,100%{ box-shadow:0 0 0 rgba(232,178,61,0);} 50%{ box-shadow:0 0 14px rgba(232,178,61,.65);} }
.bp-reward:hover{ transform:translateY(-2px); }
.bp-reward-icon{ display:flex; align-items:center; justify-content:center; height:44px; margin-bottom:2px; position:relative; }
.bp-reward-icon .icon{ width:38px; height:38px; color:var(--cyan); display:block; transition:transform var(--normal) var(--ease); }
.bp-reward.premium .bp-reward-icon .icon{ color:var(--gold); }
.bp-reward.rarity-uncommon .bp-reward-icon .icon{ animation:rarity-pulse 2.4s ease-in-out infinite; }
.bp-reward.rarity-rare .bp-reward-icon .icon{ animation:rarity-spin 5s linear infinite; }
.bp-reward.rarity-epic .bp-reward-icon .icon{ animation:rarity-epic-pulse 1.8s ease-in-out infinite; filter:drop-shadow(0 0 6px currentColor); }
.bp-reward.rarity-legendary .bp-reward-icon .icon{ animation:rarity-legendary-spin 3.2s ease-in-out infinite; filter:drop-shadow(0 0 10px currentColor); }
.bp-reward .bp-reward-label{ font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; font-weight:700; }
.bp-reward .btn{ width:100%; padding:6px 4px; font-size:10.5px; }
.bp-claim-btn{ position:relative; overflow:hidden; }
.bp-claim-btn::after{ content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 48%, transparent 66%);
  background-size:260% 260%; animation:frame-shift 2.8s linear infinite; pointer-events:none; }
.bp-reward.claimed{ opacity:.6; }
.bp-reward.locked{ opacity:.4; }
.bp-claimed-badge{ position:absolute; top:6px; right:6px; width:16px; height:16px; border-radius:50%; background:var(--good);
  color:#04241a; display:flex; align-items:center; justify-content:center; box-shadow:0 0 6px rgba(47,227,160,.6); }
.bp-claimed-badge .icon{ width:9px; height:9px; }
.bp-empty-slot{ font-size:10px; color:var(--text-faint); padding:14px 0; }
.bp-reward.claim-pop{ animation:bp-claim-pop .5s var(--ease-spring); }
@keyframes bp-claim-pop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.12);} 100%{ transform:scale(1);} }

/* EFC bundle purchase modal */
.efc-bundle{ display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--void); cursor:pointer; margin-bottom:10px; transition:all var(--fast) var(--ease); }
.efc-bundle:hover{ border-color:var(--gold); transform:translateX(3px); }
.efc-bundle .glyph{ width:42px; height:42px; border-radius:var(--r-sm); background:var(--grad-gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.efc-bundle .glyph .icon{ width:20px; height:20px; color:#1a1200; }
.efc-bundle .info{ flex:1; min-width:0; }
.efc-bundle .info .name{ font-weight:700; font-size:14px; }
.efc-bundle .info .amt{ font-size:12px; color:var(--gold); font-family:var(--font-mono); font-weight:700; margin-top:2px; }
.efc-bundle .info .badge{ font-size:10.5px; color:var(--good); margin-left:6px; }
.efc-bundle .price{ font-family:var(--font-mono); font-weight:800; font-size:15px; }

/* =========================================================================================
   LOCKER / COLLECTION
   ========================================================================================= */
#screen-locker{ overflow-y:auto; background:var(--bg); }
#screen-battlepass{ overflow-y:auto; }
.locker-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.locker-tab{ padding:9px 16px; border-radius:20px; border:1px solid var(--line); background:var(--surface); font-size:12.5px;
  font-weight:700; color:var(--text-dim); cursor:pointer; display:flex; align-items:center; gap:7px; transition:all var(--fast); }
.locker-tab .icon{ width:14px; height:14px; }
.locker-tab:hover{ border-color:var(--line-strong); color:var(--text); }
.locker-tab.active{ background:var(--grad-cyan); color:#031318; border-color:transparent; }

.coin-badge{ display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--warn); color:var(--warn); font-weight:700;
  padding:9px 16px; border-radius:20px; font-size:14px; font-family:var(--font-mono); }
.coin-badge .icon{ width:16px; height:16px; }

.case-card{ background:linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px; text-align:center; margin-bottom:24px; position:relative; overflow:hidden; }
.case-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(232,178,61,.12), transparent 60%); }
.case-card .icon-crate{ width:52px; height:52px; color:var(--cyan); margin-bottom:10px; filter:drop-shadow(0 0 16px rgba(232,178,61,.4)); position:relative; }
.case-card h3{ margin:0 0 6px; font-family:var(--font-display); font-size:19px; position:relative; }
.case-card p{ color:var(--text-dim); font-size:13px; margin:0 0 18px; position:relative; }

.locker-section-title{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin:24px 0 12px; font-weight:700; display:flex; align-items:center; gap:8px; }
.locker-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(128px,1fr)); gap:12px; }
.cos-item{ border-radius:var(--r-md); padding:16px 10px 12px; text-align:center; border:1px solid var(--line); background:var(--surface);
  cursor:pointer; position:relative; transition:all var(--fast) var(--ease); }
.cos-item:hover{ transform:translateY(-3px); }
.cos-item.locked{ opacity:.5; cursor:default; }
.cos-item.locked:hover{ transform:none; }
.cos-item.owned.equipped{ box-shadow:0 0 0 2px var(--r-color,#fff) inset, 0 0 20px rgba(255,255,255,.08); }
.cos-item .preview{ width:100%; aspect-ratio:1/1; border-radius:var(--r-sm); background:var(--void); display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.cos-item .preview .icon{ width:44px; height:44px; }
.cos-item .cos-name{ font-size:12px; font-weight:700; margin-top:2px; }
.cos-item .cos-rarity{ font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:800; margin-top:3px; }
.cos-item .equip-tag{ position:absolute; top:8px; right:8px; width:16px; height:16px; border-radius:50%; background:var(--good);
  display:flex; align-items:center; justify-content:center; color:#04140d; }
.cos-item .equip-tag .icon{ width:9px; height:9px; }
.cos-item .limited-tag{ position:absolute; top:8px; left:8px; font-size:8px; font-weight:800; letter-spacing:.06em;
  padding:2px 6px; border-radius:8px; background:linear-gradient(90deg,#ff9142,var(--accent)); color:#fff; z-index:1; }
.cos-item.rarity-legendary{ background:linear-gradient(160deg, rgba(255,201,60,.08), var(--surface)); }
.cos-item.rarity-epic{ background:linear-gradient(160deg, rgba(178,59,255,.08), var(--surface)); }
.cos-item.soon{ opacity:.35; cursor:default; }
.cos-item.soon:hover{ transform:none; }

/* Rarity communicated through motion, not just color — common is static, legendary is a
   full cinematic shimmer + rotation. */
.cos-item .preview .icon{ transition:transform var(--normal) var(--ease); }
.cos-item.rarity-uncommon .preview .icon{ animation:rarity-pulse 2.4s ease-in-out infinite; }
@keyframes rarity-pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.72; transform:scale(1.06);} }
.cos-item.rarity-rare .preview .icon{ animation:rarity-spin 5s linear infinite; }
@keyframes rarity-spin{ to{ transform:rotate(360deg);} }
.cos-item.rarity-epic .preview .icon{ animation:rarity-epic-pulse 1.8s ease-in-out infinite; filter:drop-shadow(0 0 6px currentColor); }
@keyframes rarity-epic-pulse{ 0%,100%{ transform:scale(1) rotate(0deg); filter:drop-shadow(0 0 4px currentColor);} 50%{ transform:scale(1.12) rotate(8deg); filter:drop-shadow(0 0 10px currentColor);} }
.cos-item.rarity-legendary .preview .icon{ animation:rarity-legendary-spin 3.2s ease-in-out infinite; filter:drop-shadow(0 0 10px currentColor); }
@keyframes rarity-legendary-spin{ 0%{ transform:scale(1) rotate(0deg); filter:drop-shadow(0 0 6px currentColor);} 50%{ transform:scale(1.2) rotate(180deg); filter:drop-shadow(0 0 16px currentColor);} 100%{ transform:scale(1) rotate(360deg); filter:drop-shadow(0 0 6px currentColor);} }

/* case strip (multiple case tiers) */
.case-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.case-tile{ background:linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px; text-align:center; cursor:pointer; transition:all var(--fast) var(--ease); position:relative; overflow:hidden; }
.case-tile:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.case-tile .icon{ width:46px; height:46px; color:var(--cyan); margin-bottom:8px; }
.case-tile h4{ margin:0 0 4px; font-size:13px; font-family:var(--font-display); font-weight:700; }
.case-tile .cost{ font-family:var(--font-mono); font-size:12px; color:var(--gold); font-weight:700; }
.case-tile[disabled]{ opacity:.45; cursor:not-allowed; }
/* Drop-rate transparency — one chip per rarity actually in this case's weight table, colored
   to match that rarity everywhere else in the game (RARITY_COLORS, script.js). */
.case-odds{ display:flex; flex-wrap:wrap; gap:4px; margin-top:9px; justify-content:flex-start; }
.case-tile .case-odds{ justify-content:center; }
.odds-chip{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.02em;
  color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent); padding:2px 6px; border-radius:8px; white-space:nowrap; }

/* daily case banner */
.daily-banner{ display:flex; align-items:center; gap:14px; padding:16px 18px; margin-bottom:16px;
  background:linear-gradient(120deg, rgba(232,178,61,.14), var(--surface)); border:2px solid var(--gold-2, var(--gold)); border-radius:var(--r-lg); }
.daily-banner-icon{ width:44px; height:44px; border-radius:12px; background:var(--grad-gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.daily-banner-icon .icon{ width:22px; height:22px; color:#1a1200; }
.daily-banner-body{ flex:1; min-width:0; }
.daily-banner-title{ font-family:var(--font-display); font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:8px; }
.daily-banner-badge{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.06em; color:#1a1200; background:var(--gold); padding:2px 7px; border-radius:6px; }
.daily-banner-sub{ font-size:12px; color:var(--text-dim); margin-top:3px; }
.daily-banner-sub .mono{ font-family:var(--font-mono); color:var(--gold); }
.daily-banner[data-remaining="0"] .daily-banner-sub .mono{ color:var(--text-faint); }

/* challenges */
.challenge-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.challenge-tab{ flex:1; text-align:center; padding:9px 10px; border-radius:var(--r-sm); border:1px solid var(--line);
  font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--text-dim); cursor:pointer; transition:all var(--fast); }
.challenge-tab .mono{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; display:block; margin-top:3px; color:var(--text-faint); }
.challenge-tab.active{ background:var(--grad-gold); color:#1a1200; border-color:transparent; }
.challenge-tab.active .mono{ color:rgba(26,18,0,.7); }
.challenge-claimed{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--good); letter-spacing:.04em; white-space:nowrap; }

/* collection progress */
.collection-progress-head{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-dim); font-weight:700; margin-bottom:10px; }
.collection-progress-head .icon{ width:14px; height:14px; margin-right:6px; vertical-align:-2px; color:var(--cyan); }

/* locker toolbar */
.locker-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.locker-search{ flex:1; min-width:180px; display:flex; align-items:center; gap:8px; background:var(--void);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px; }
.locker-search .icon{ width:15px; height:15px; color:var(--text-faint); flex-shrink:0; }
.locker-search input{ background:none; border:none; outline:none; color:var(--text); font-size:13px; width:100%; font-family:var(--font-body); }
.locker-select{ background:var(--void); border:1px solid var(--line); color:var(--text-dim); border-radius:var(--r-sm);
  padding:9px 12px; font-size:12.5px; font-weight:600; font-family:var(--font-body); cursor:pointer; }
.locker-select:focus{ border-color:var(--cyan); outline:none; }

/* item preview modal */
.item-preview-box{ text-align:center; }
.item-preview-stage{ width:100%; aspect-ratio:16/10; border-radius:var(--r-md); background:var(--void);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; border:1px solid var(--line); }
.item-preview-symbol{ display:block; }
.item-preview-symbol .icon{ width:72px; height:72px; }
.item-preview-rarity{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.item-preview-name{ margin:6px 0 4px; font-family:var(--font-display); font-size:22px; }
.item-preview-meta{ font-size:11.5px; color:var(--text-faint); margin-bottom:10px; text-transform:uppercase; letter-spacing:.05em; }
.item-preview-desc{ color:var(--text-dim); font-size:13.5px; line-height:1.5; margin:0 0 16px; }
.item-preview-status{ font-size:12px; color:var(--good); font-weight:700; margin-bottom:12px; min-height:16px; }

/* =========================================================================================
   CASE OPENING — cinematic
   ========================================================================================= */
#caseModal{ position:fixed; inset:0; z-index:3500; display:none; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(30,10,20,.9), rgba(2,2,4,.96)); backdrop-filter:blur(4px); }
#caseModal.active{ display:flex; }
.case-modal-box{ text-align:center; width:min(400px, 90vw); position:relative; }
.case-stage{ position:relative; height:220px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.case-crate-wrap{ position:relative; width:130px; height:130px; }
.case-crate-wrap .icon{ width:100%; height:100%; color:var(--cyan); filter:drop-shadow(0 0 24px rgba(232,178,61,.5)); }
.case-crate-wrap.spinning .icon{ animation:crate-shake .35s ease-in-out infinite; }
@keyframes crate-shake{ 0%,100%{ transform:rotate(0deg) scale(1);} 25%{ transform:rotate(-4deg) scale(1.02);} 75%{ transform:rotate(4deg) scale(1.02);} }
.case-crate-wrap.bursting .icon{ animation:crate-burst .5s var(--ease-spring) forwards; }
@keyframes crate-burst{ 0%{ transform:scale(1); opacity:1;} 60%{ transform:scale(1.3); opacity:1;} 100%{ transform:scale(.2); opacity:0;} }
.case-flash{ position:absolute; inset:-40px; border-radius:50%; opacity:0; pointer-events:none; }
.case-flash.show{ animation:case-flash-burst .6s ease-out forwards; }
@keyframes case-flash-burst{ 0%{ opacity:0; transform:scale(.3);} 30%{ opacity:.9;} 100%{ opacity:0; transform:scale(2.4);} }
.case-item-reveal{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; transform:scale(.7); }
.case-item-reveal.show{ animation:item-reveal var(--dramatic) var(--ease-spring) forwards; }
@keyframes item-reveal{ to{ opacity:1; transform:scale(1);} }
.case-item-reveal .item-icon{ width:64px; height:64px; }
#caseResultName{ font-family:var(--font-display); font-size:19px; font-weight:800; margin-top:4px; }
#caseResultRarity{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; margin-top:2px; }
#caseResultDup{ font-size:12px; color:var(--text-faint); margin-top:10px; }
.case-rarity-label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:700; }
.case-stage.reveal-shake{ animation: eff-shake .4s ease; }

/* =========================================================================================
   DAILY CASE — a completely different opening beat from the regular crate (shake-then-
   shatter): a glowing orb pulses, splits into two halves that fly apart, and a bright
   glow-burst fills the gap before the item rises — see openDailyCaseFlow() in script.js.
   ========================================================================================= */
#dailyCaseModal{ position:fixed; inset:0; z-index:3500; display:none; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(60,40,10,.9), rgba(2,2,4,.96)); backdrop-filter:blur(4px); }
#dailyCaseModal.active{ display:flex; }
.daily-modal-box .eyebrow{ color:var(--gold); }
.daily-stage{ position:relative; height:220px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.daily-orb-half{
  position:absolute; left:50%; top:50%; width:92px; height:92px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffe27a, var(--gold) 55%, var(--gold-2));
  box-shadow:0 0 40px rgba(232,178,61,.6);
}
.daily-orb-top{ clip-path:inset(0 0 50% 0); transform:translate(-50%,-50%); }
.daily-orb-bottom{ clip-path:inset(50% 0 0 0); transform:translate(-50%,-50%); }
.daily-stage.spinning .daily-orb-top, .daily-stage.spinning .daily-orb-bottom{ animation:daily-orb-pulse 1.1s ease-in-out infinite; }
@keyframes daily-orb-pulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.07); } }
.daily-stage.bursting .daily-orb-top{ animation:daily-orb-open-top .5s var(--ease-spring) forwards; }
.daily-stage.bursting .daily-orb-bottom{ animation:daily-orb-open-bottom .5s var(--ease-spring) forwards; }
@keyframes daily-orb-open-top{ to{ transform:translate(-50%,-145%) scale(.7); opacity:0; } }
@keyframes daily-orb-open-bottom{ to{ transform:translate(-50%,45%) scale(.7); opacity:0; } }
.daily-orb-glow{
  position:absolute; left:50%; top:50%; width:20px; height:20px; border-radius:50%;
  transform:translate(-50%,-50%); opacity:0; pointer-events:none;
  background:radial-gradient(circle, #fff, var(--gold) 40%, transparent 70%);
}
.daily-stage.bursting .daily-orb-glow{ animation:daily-glow-burst .7s ease-out forwards; }
@keyframes daily-glow-burst{ 0%{ opacity:0; width:20px; height:20px; } 35%{ opacity:1; } 100%{ opacity:0; width:340px; height:340px; } }
.daily-stage.reveal-shake{ animation: eff-shake .4s ease; }

/* =========================================================================================
   NOTIFICATIONS
   ========================================================================================= */
#notifications{ position:fixed; top:78px; right:18px; z-index:4000; display:flex; flex-direction:column; gap:10px; width:320px; max-width:90vw; pointer-events:none; }
.notif{ pointer-events:auto; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md); padding:13px 14px;
  display:flex; gap:11px; align-items:flex-start; box-shadow:var(--shadow-md); transform:translateX(120%); opacity:0;
  transition:transform var(--dramatic) var(--ease-spring), opacity var(--normal) var(--ease); }
.notif.show{ transform:translateX(0); opacity:1; }
.notif.hide{ transform:translateX(120%); opacity:0; }
.notif .glyph{ width:32px; height:32px; border-radius:var(--r-sm); background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif .glyph .icon{ width:16px; height:16px; }
.notif.type-success .glyph{ color:var(--good); background:rgba(47,227,160,.12); }
.notif.type-info .glyph{ color:var(--cyan); background:rgba(232,178,61,.12); }
.notif.type-warn .glyph{ color:var(--warn); background:rgba(255,178,59,.12); }
.notif.type-error .glyph{ color:var(--danger); background:rgba(255,77,94,.12); }
.notif .body{ flex:1; min-width:0; }
.notif .title{ font-weight:700; font-size:12.5px; margin-bottom:2px; }
.notif .msg{ font-size:12px; color:var(--text-dim); line-height:1.4; }
.notif .dismiss{ width:20px; height:20px; color:var(--text-faint); cursor:pointer; flex-shrink:0; }
.notif .dismiss .icon{ width:12px; height:12px; }

/* legacy toast (lightweight inline feedback) */
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--surface);
  border:1px solid var(--line-strong); padding:11px 20px; border-radius:var(--r-sm); font-size:13px; color:var(--text);
  z-index:2000; opacity:0; transition:opacity .25s ease; pointer-events:none; box-shadow:var(--shadow-md); }
.toast.show{ opacity:1; }

/* =========================================================================================
   SETTINGS PANEL
   ========================================================================================= */
.settings-group{ margin-bottom:20px; }
.settings-group h4{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin:0 0 12px; font-weight:700; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); }
.settings-row:last-child{ border-bottom:none; }
.settings-row .lbl{ font-size:13.5px; font-weight:600; }
.settings-row .sub{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }
.switch{ position:relative; width:42px; height:24px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line-strong); cursor:pointer; flex-shrink:0; transition:background var(--fast); }
.switch.on{ background:var(--grad-cyan); border-color:transparent; }
.switch .knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform var(--fast) var(--ease); box-shadow:0 1px 4px rgba(0,0,0,.3); }
.switch.on .knob{ transform:translateX(18px); }
.seg-group{ display:flex; gap:6px; }
.seg-btn{ padding:7px 13px; border-radius:8px; border:1px solid var(--line); background:var(--void); font-size:11.5px; font-weight:700; color:var(--text-dim); cursor:pointer; }
.seg-btn.active{ background:var(--grad-primary); color:#fff; border-color:transparent; }
input[type=range]{ width:120px; accent-color:var(--cyan); }

/* =========================================================================================
   SCROLLBAR / MISC
   ========================================================================================= */
::-webkit-scrollbar{ width:8px; } ::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; }
.icon-spin .icon, .icon.spin{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* =========================================================================================
   RESPONSIVE
   ========================================================================================= */
@media (max-width:640px){
  #appNav{ padding:0 12px; }
  .nav-links{ display:none; }
  .hero-stats{ gap:26px; }
  .lobby-grid{ padding:20px 14px 90px; }
  .page-wrap{ padding:20px 14px 90px; }
  #bottomNav{ display:flex; }
  body.has-chrome .screen.chrome-screen{ padding-bottom:70px; }
}
#bottomNav{ display:none; position:fixed; bottom:0; left:0; right:0; height:62px; z-index:900; background:rgba(28,20,15,.9);
  backdrop-filter:blur(16px); border-top:1px solid var(--line); align-items:center; justify-content:space-around; }
#bottomNav.chrome-visible{ display:none; }
@media (max-width:640px){ #bottomNav.chrome-visible{ display:flex; } }
.bnav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-faint); font-size:9.5px; font-weight:700; text-transform:uppercase; }
.bnav-item .icon{ width:19px; height:19px; }
.bnav-item.active{ color:var(--accent); }

/* =========================================================================================
   PUNCH TRAIL — speed-reactive cursor sparks + comic punch popups (see script.js PunchTrail).
   ========================================================================================= */
#punchTrail{ position:fixed; inset:0; pointer-events:none; z-index:2000; }
/* The dot IS the cursor — html.custom-cursor-active (set once PunchTrail confirms it's
   running, see script.js) hides the native OS cursor so this glove replaces it outright
   rather than just decorating it. Text inputs keep the native text-beam cursor below. */
#punchCursorDot{
  position:fixed; left:-100px; top:-100px; width:30px; height:30px;
  pointer-events:none; z-index:2001; transform:translate(-50%,-50%) rotate(-18deg);
  opacity:0; transition:opacity .2s;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
#punchCursorDot svg{ display:block; width:100%; height:100%; }
#punchCursorDot.live{ opacity:1; }
#punchCursorDot.punching{ animation:gloveJab 220ms ease-out; }
@keyframes gloveJab{
  0%{ transform:translate(-50%,-50%) rotate(-18deg) scale(1); }
  40%{ transform:translate(-50%,-50%) rotate(-38deg) scale(.82); }
  100%{ transform:translate(-50%,-50%) rotate(-18deg) scale(1); }
}
html.custom-cursor-active, html.custom-cursor-active *{ cursor:none; }
html.custom-cursor-active input, html.custom-cursor-active textarea,
html.custom-cursor-active [contenteditable="true"]{ cursor:text; }
@media (prefers-reduced-motion: reduce){ #punchCursorDot.punching{ animation:none; } }
.punch-word{
  position:fixed; z-index:2002; pointer-events:none;
  font-family:var(--font-hero); font-weight:400;
  -webkit-text-stroke:2.4px var(--void); paint-order:stroke fill;
  animation:punchWordPop 620ms cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes punchWordPop{
  0%{ transform:translate(-50%,-50%) scale(.3) rotate(var(--rot)); opacity:0; }
  35%{ transform:translate(-50%,-50%) scale(1.15) rotate(var(--rot)); opacity:1; }
  60%{ transform:translate(-50%,-50%) scale(1) rotate(var(--rot)); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(.9) translateY(-24px) rotate(var(--rot)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .punch-word{ animation:none; display:none; } }

/* =========================================================================================
   RANKED GLOVES — profile panel (see script.js ProfileUI.renderGloves).
   ========================================================================================= */
.glove-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); }
.glove-row + .glove-row{ margin-top:10px; }
.glove-swatch{ width:16px; height:16px; border-radius:5px; flex-shrink:0; border:2px solid var(--void); }
.glove-info{ flex:1; min-width:0; }
.glove-info .name{ font-weight:700; font-size:13.5px; }
.glove-info .sub{ font-size:11.5px; color:var(--text-faint); margin-top:2px; font-family:var(--font-mono); }

/* =========================================================================================
   EMOTES — Shift key, usable in the lobby (once someone's joined) or mid-match. See
   script.js triggerEmote()/UI.showEmote(). emoteHint is the always-visible key indicator;
   emote-bubble is the pop-up itself, positioned via JS (getBoundingClientRect) so it works
   the same whether it's anchored to an arena tile or a lobby player-chip.
   ========================================================================================= */
#emoteHint{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(12px);
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--text-dim);
  background:rgba(28,20,15,.85); border:1px solid var(--line-strong); border-radius:20px;
  padding:8px 16px; z-index:300; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
#emoteHint.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
#emoteHint .icon{ width:14px; height:14px; color:var(--gold); }
#emoteHint .key{
  font-family:var(--font-mono); font-weight:700; font-size:10.5px; letter-spacing:.06em;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:5px; padding:2px 6px; color:var(--text);
}

.emote-bubble{
  position:fixed; z-index:400; pointer-events:none;
  transform:translate(-50%,-100%);
  width:44px; height:44px; margin-top:-14px;
  border-radius:14px; background:var(--surface-2); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  animation:emote-pop 1.9s cubic-bezier(.2,.9,.3,1) forwards;
}
.emote-bubble .icon{ width:22px; height:22px; color:var(--gold); }
@keyframes emote-pop{
  0%{ opacity:0; transform:translate(-50%,-70%) scale(.4); }
  15%{ opacity:1; transform:translate(-50%,-100%) scale(1.1); }
  25%{ transform:translate(-50%,-100%) scale(1); }
  80%{ opacity:1; transform:translate(-50%,-108%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-118%) scale(.92); }
}

/* =========================================================================================
   CAMERA EFFECTS — Celestial Frame (the one legendary camera item) gets a standalone
   drifting-starlight overlay on top of its filter — see script.js applyCameraFilter().
   ========================================================================================= */
.camera-celestial-overlay{ position:absolute; inset:0; pointer-events:none; z-index:3; overflow:hidden; }
.camera-celestial-overlay span{
  position:absolute; width:3px; height:3px; border-radius:50%; background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.8);
  animation:celestial-twinkle 3s ease-in-out infinite;
}
@keyframes celestial-twinkle{ 0%,100%{ opacity:.15; transform:scale(.7); } 50%{ opacity:1; transform:scale(1.3); } }

/* =========================================================================================
   EMOTE FX — common..epic share this scaling burst (see UI.playEmoteBurst); legendary
   ("Arena Shaker") is a standalone treatment below instead of just a bigger version of it.
   ========================================================================================= */
.emote-burst-star{
  position:fixed; opacity:0; pointer-events:none; z-index:399; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, var(--gold) 0 18deg, transparent 18deg 36deg);
  animation:emoteBurstStar .6s ease-out both;
}
.emote-burst-ray{
  position:fixed; width:2px; height:0; background:var(--red); opacity:0; z-index:399; pointer-events:none;
  transform-origin:center bottom; animation:emoteBurstRay .5s ease-out both;
}
@keyframes emoteBurstStar{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-10deg); }
  45%{ opacity:.85; transform:translate(-50%,-50%) scale(1.1) rotate(6deg); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.3) rotate(14deg); }
}
@keyframes emoteBurstRay{ 0%{ opacity:0; height:0; } 30%{ opacity:1; } 100%{ opacity:0; height:var(--fx-len); } }

.emote-legend-ring{
  position:fixed; border-radius:50%; border:4px solid var(--gold); opacity:0; pointer-events:none;
  z-index:399; transform:translate(-50%,-50%); animation:emoteLegendRing 1.1s ease-out forwards;
}
@keyframes emoteLegendRing{ 0%{ opacity:.9; width:16px; height:16px; } 100%{ opacity:0; width:320px; height:320px; } }
.emote-legend-flash{
  position:fixed; inset:0; z-index:398; pointer-events:none;
  background:radial-gradient(circle at var(--fx-x) var(--fx-y), rgba(232,178,61,.4), transparent 60%);
  animation:emoteLegendFlash .55s ease-out forwards;
}
@keyframes emoteLegendFlash{ 0%{ opacity:1; } 100%{ opacity:0; } }