/**
 * SE Gamification CSS
 * SecurityElites.com — Module 4
 *
 * Covers:
 *  XP Bar, Rank Badges, XP Popup animations, Level-up overlay,
 *  Achievement toasts, Social ticker, Streak widget, Confetti,
 *  Spin button, Near-level alert
 *
 * Uses CSS custom properties — respects LiteSpeed Critical CSS extraction.
 * All animations use GPU-composited properties (transform, opacity) only.
 */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --se-neon    : #00ffe7;
  --se-neon2   : #ff2d78;
  --se-neon3   : #ffe600;
  --se-neon4   : #7b2fff;
  --se-green   : #00ff88;
  --se-bg      : #050a0f;
  --se-bg2     : #080f18;
  --se-bg3     : #0c1520;
  --se-text    : #c8d8e8;
  --se-dim     : #5a7a9a;
  --se-border  : rgba(0,255,231,.15);
  --se-card    : rgba(8,20,35,.9);
  --se-radius  : 4px;
  --xp-color   : var(--se-neon);
  --rarity-color: var(--se-neon);
}

/* ── XP Bar — ARIA + accessibility ───────────────────────────────────────── */
.se-xpbar[role="progressbar"] {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
}

/* Screen-reader-only label for XP bar value */
.se-xpbar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 99px;
  outline: none; /* Custom focus handled via wrapper */
}

.se-xpbar-wrap:focus-within .se-xpbar {
  box-shadow: 0 0 0 2px var(--se-neon, #00ffe7);
}

/* ── XP Bar ───────────────────────────────────────────────── */
.se-xpbar-wrap {
  margin: 12px 0;
  font-family: 'Rajdhani', sans-serif;
}

.se-xpbar-labels {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}

.se-rank-tag {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  color: var(--se-neon);
  background: rgba(0,255,231,.08);
  border: 1px solid rgba(0,255,231,.2);
  padding: 3px 10px;
  border-radius: var(--se-radius);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.se-level-tag {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  color: var(--se-neon3);
  white-space: nowrap;
}

.se-xp-tag {
  margin-left: auto;
  font-size: 12px;
  color: var(--se-dim);
  font-family: 'Share Tech Mono', monospace;
}

.se-xpbar {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
}

.se-xpbar-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--se-neon), #00bbff);
  border-radius: 99px;
  transition: width .8s cubic-bezier(.25,.46,.45,.94);
}

.se-xpbar-glow {
  position: absolute;
  top: -2px; right: -4px;
  width: 8px; height: 12px;
  background: var(--se-neon);
  border-radius: 50%;
  filter: blur(4px);
  opacity: .8;
}

.se-xpbar-sub {
  font-size: 11px;
  color: var(--se-dim);
  margin-top: 5px;
  font-family: 'Share Tech Mono', monospace;
}

.se-levelup-alert {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--se-neon3);
  background: rgba(255,230,0,.08);
  border: 1px solid rgba(255,230,0,.2);
  padding: 3px 10px;
  border-radius: var(--se-radius);
  font-family: 'Orbitron', monospace;
  letter-spacing: 1px;
  animation: se-pulse 1.5s ease-in-out infinite;
}

/* ── Rank Badges ──────────────────────────────────────────── */
.se-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--se-radius);
  border: 1px solid;
  white-space: nowrap;
}

.se-rank--script-kiddie  { color:#8888aa; border-color:rgba(136,136,170,.25); background:rgba(136,136,170,.07); }
.se-rank--recon-beginner { color:#00bbff; border-color:rgba(0,187,255,.25);  background:rgba(0,187,255,.07); }
.se-rank--exploit-hunter { color:#ff6600; border-color:rgba(255,102,0,.25);  background:rgba(255,102,0,.07); }
.se-rank--bug-bounty-pro { color:#ff44cc; border-color:rgba(255,68,204,.25); background:rgba(255,68,204,.07); }
.se-rank--elite-hacker   { color:var(--se-neon); border-color:var(--se-border); background:rgba(0,255,231,.07); }
.se-rank--cyber-legend   { color:var(--se-neon3); border-color:rgba(255,230,0,.3); background:rgba(255,230,0,.07);
                           animation: se-legend-glow 2s ease-in-out infinite; }

/* ── XP Popup ─────────────────────────────────────────────── */
.se-xp-popup {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  font-family: 'Orbitron', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--xp-color, var(--se-neon));
  text-shadow: 0 0 12px var(--xp-color, var(--se-neon));
  animation: se-xp-fly 1.4s cubic-bezier(.19,1,.22,1) forwards;
  white-space: nowrap;
  top: 60%;
}

@keyframes se-xp-fly {
  0%   { opacity: 0;   transform: translateY(0)   scale(.7); }
  15%  { opacity: 1;   transform: translateY(-10px) scale(1.1); }
  80%  { opacity: 1;   transform: translateY(-60px) scale(1); }
  100% { opacity: 0;   transform: translateY(-80px) scale(.85); }
}

/* ── Particles ────────────────────────────────────────────── */
.se-particle {
  position: fixed;
  z-index: 99998;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none;
  animation: se-particle-fly .9s cubic-bezier(.19,1,.22,1) forwards;
}

@keyframes se-particle-fly {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px,0), var(--py,-60px)) scale(0); }
}

/* ── Level-Up Overlay ─────────────────────────────────────── */
.se-levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(5,10,15,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: se-fade-in .3s ease;
  backdrop-filter: blur(8px);
}

.se-lu-inner {
  text-align: center;
  padding: 40px;
  max-width: 480px;
}

/* CRT glitch text */
.se-lu-glitch {
  font-family: 'Orbitron', monospace;
  font-size: clamp(32px,8vw,64px);
  font-weight: 900;
  color: #fff;
  position: relative;
  text-shadow: 0 0 30px var(--se-neon), 0 0 60px rgba(0,255,231,.3);
  animation: se-glitch 1.5s steps(2) infinite;
  letter-spacing: 4px;
}

.se-lu-glitch::before,
.se-lu-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  text-shadow: none;
}

.se-lu-glitch::before {
  color: var(--se-neon2);
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
  animation: se-glitch-slice 1.5s steps(2) infinite;
  transform: translateX(-2px);
}

.se-lu-glitch::after {
  color: var(--se-neon);
  clip-path: polygon(0 65%, 100% 65%, 100% 80%, 0 80%);
  animation: se-glitch-slice 1.5s steps(2) infinite reverse;
  transform: translateX(2px);
}

.se-lu-level {
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  color: var(--se-neon3);
  margin: 12px 0 8px;
  letter-spacing: 3px;
}

.se-lu-rank {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  color: var(--se-text);
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 24px;
}

.se-lu-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.se-lu-share,
.se-lu-close {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: var(--se-radius);
  cursor: pointer;
  border: 1px solid;
  transition: all .2s;
}

.se-lu-share { background: var(--se-neon); color: var(--se-bg); border-color: var(--se-neon); }
.se-lu-share:hover { box-shadow: 0 0 20px rgba(0,255,231,.4); transform: translateY(-1px); }
.se-lu-close { background: transparent; color: var(--se-dim); border-color: rgba(255,255,255,.1); }
.se-lu-close:hover { color: #fff; border-color: rgba(255,255,255,.3); }

/* ── Achievement Toast ─────────────────────────────────────── */
.se-achievement-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 99997;
  background: var(--se-bg2);
  border: 1px solid var(--rarity-color);
  border-radius: var(--se-radius);
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: 300px;
  box-shadow: 0 0 20px rgba(0,0,0,.5), 0 0 10px var(--rarity-color);
  opacity: 0;
  transform: translateX(120%);
  transition: opacity .3s, transform .3s;
  font-family: 'Rajdhani', sans-serif;
}

.se-achievement-toast.visible {
  opacity: 1;
  transform: translateX(0);
}

.se-ach-icon  { font-size: 22px; }
.se-ach-title { font-size: 10px; color: var(--se-dim); text-transform: uppercase; letter-spacing: 2px; font-family:'Orbitron',monospace; }
.se-ach-name  { font-size: 15px; color: #fff; font-weight: 700; margin: 2px 0; }
.se-ach-xp    { font-size: 12px; color: var(--se-neon3); font-family: 'Orbitron', monospace; }

/* ── Social Proof Ticker ──────────────────────────────────── */
.se-social-ticker {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 99996;
  max-width: 280px;
}

.se-social-item {
  background: rgba(8,20,35,.92);
  border: 1px solid rgba(0,255,231,.12);
  border-radius: var(--se-radius);
  padding: 8px 14px;
  margin-bottom: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: var(--se-text);
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .3s, transform .3s;
  backdrop-filter: blur(6px);
}

.se-social-item.visible  { opacity: 1; transform: translateX(0); }
.se-si-name   { color: var(--se-neon); font-weight: 700; }
.se-si-action { color: var(--se-dim); }
.se-si-xp     { color: var(--se-neon3); font-family:'Orbitron',monospace; font-size:11px; }
.se-si-ago    { color: var(--se-dim); font-size: 11px; }

/* ── Streak Widget ────────────────────────────────────────── */
.se-streak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px;
  background: var(--se-bg3);
  border: 1px solid var(--se-border);
  border-radius: var(--se-radius);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.se-streak-fire {
  font-size: 32px;
  line-height: 1;
  animation: se-bounce .6s ease-in-out infinite alternate;
}

.se-streak.urgent .se-streak-fire {
  animation: se-shake .3s ease-in-out infinite;
  filter: grayscale(.5);
}

.se-streak-count {
  font-family: 'Orbitron', monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--se-neon3);
  line-height: 1;
}

.se-streak-label {
  font-size: 11px;
  color: var(--se-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Orbitron', monospace;
}

.se-streak-warn {
  font-size: 11px;
  color: var(--se-neon2);
  margin-top: 6px;
  animation: se-pulse 1s ease-in-out infinite;
}

/* ── Spin Wheel Button ────────────────────────────────────── */
.se-spin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: var(--se-radius);
  border: 1px solid var(--se-neon3);
  background: rgba(255,230,0,.06);
  color: var(--se-neon3);
  cursor: pointer;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}

.se-spin-btn:hover:not(:disabled) {
  background: rgba(255,230,0,.12);
  box-shadow: 0 0 20px rgba(255,230,0,.25);
  transform: translateY(-1px);
}

.se-spin-btn.spinning {
  animation: se-spin-shake .1s ease infinite;
  pointer-events: none;
}

.se-spin-btn.used {
  opacity: .45;
  border-color: rgba(255,255,255,.1);
  color: var(--se-dim);
  cursor: not-allowed;
}

/* ── Confetti ─────────────────────────────────────────────── */
.se-confetti {
  position: fixed;
  top: -10px;
  z-index: 100001;
  pointer-events: none;
  border-radius: 2px;
  animation: se-confetti-fall linear forwards;
}

@keyframes se-confetti-fall {
  0%   { transform: translateY(0)   rotate(0deg)   scaleX(1); opacity:1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg) scaleX(-1); opacity:0; }
}

/* ── Shared Keyframes ─────────────────────────────────────── */
@keyframes se-fade-in   { from{opacity:0} to{opacity:1} }
@keyframes se-pulse     { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes se-bounce    { from{transform:translateY(0)} to{transform:translateY(-4px)} }
@keyframes se-shake     { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
@keyframes se-spin-shake{ 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
@keyframes se-legend-glow {
  0%,100% { box-shadow: 0 0 6px rgba(255,230,0,.3); }
  50%     { box-shadow: 0 0 16px rgba(255,230,0,.6); }
}
@keyframes se-glitch {
  0%  { text-shadow: 2px 0 var(--se-neon2), -2px 0 var(--se-neon); }
  25% { text-shadow:-2px 0 var(--se-neon2),  2px 0 var(--se-neon); }
  50% { text-shadow: 2px 2px var(--se-neon2),-2px -2px var(--se-neon); }
  75% { text-shadow: 0 0 20px var(--se-neon); }
  100%{ text-shadow: 2px 0 var(--se-neon2), -2px 0 var(--se-neon); }
}
@keyframes se-glitch-slice {
  0%  { transform: translateX(-3px); opacity:.8; }
  50% { transform: translateX(3px);  opacity:.6; }
  100%{ transform: translateX(0);    opacity:0; }
}

/* ── Dashboard Grid ───────────────────────────────────────── */
.se-dashboard         { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 20px 0; }
.se-dash-grid         { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; }
.se-card              { background:var(--se-card); border:1px solid var(--se-border); border-radius:var(--se-radius); padding:20px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .se-levelup-overlay .se-lu-inner { padding: 24px 16px; }
  .se-achievement-toast            { right:12px; bottom:12px; max-width:260px; }
  .se-social-ticker                { display:none; }
  .se-lu-glitch                    { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════
   DOPAMINE ENGINE — MISSING FEATURE CSS
   Loot Box · Comeback Banner · Easter Eggs · Milestones
   ══════════════════════════════════════════════════════════ */

/* ── Loot Box ─────────────────────────────────────────── */
.se-lootbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.75); backdrop-filter: blur(4px);
  animation: se-fadein .25s ease;
}
.se-lootbox-inner {
  text-align: center; padding: 40px;
  background: #0d1520; border: 1px solid rgba(0,255,231,.25);
  border-radius: 16px; box-shadow: 0 0 60px rgba(0,255,231,.15);
  min-width: 260px;
}
.se-lootbox-flip {
  width: 120px; height: 120px; margin: 0 auto 20px;
  position: relative; perspective: 600px;
  transform-style: preserve-3d; transition: transform .6s ease;
}
.se-lootbox-flip.flipped { transform: rotateY(180deg); }
.se-lootbox-front,.se-lootbox-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; border-radius: 12px;
  background: rgba(0,255,231,.06); border: 1px solid rgba(0,255,231,.2);
}
.se-lootbox-back { transform: rotateY(180deg); background: rgba(255,68,204,.08); border-color: rgba(255,68,204,.3); }
.se-lootbox-msg { color: #e8f4ff; font-size: .95rem; margin: 0 0 20px; font-family: monospace; }
.se-lootbox-close {
  background: transparent; border: 1px solid rgba(0,255,231,.3); color: #00ffe7;
  padding: 8px 24px; border-radius: 6px; cursor: pointer; font-size: .8rem;
  letter-spacing: 1px; text-transform: uppercase; transition: background .2s;
}
.se-lootbox-close:hover { background: rgba(0,255,231,.1); }

/* ── Comeback Banner ──────────────────────────────────── */
.se-comeback-banner {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 9990; display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #0d1520, #0a1f10);
  border: 1px solid rgba(0,255,136,.4); border-radius: 12px;
  padding: 14px 20px; max-width: 520px; width: 90%;
  box-shadow: 0 4px 30px rgba(0,255,136,.2);
  animation: se-slidein-top .4s ease;
}
.se-cb-icon { font-size: 28px; flex-shrink: 0; }
.se-cb-text { font-size: .85rem; color: #c8d8e8; line-height: 1.5; }
.se-cb-text strong { color: #e8f4ff; }
.se-cb-boost { color: #00ff88; font-weight: 700; }
.se-cb-close {
  margin-left: auto; flex-shrink: 0; background: none; border: none;
  color: #6b8299; font-size: 1.2rem; cursor: pointer; line-height: 1;
  padding: 4px 8px;
}
.se-cb-close:hover { color: #e8f4ff; }
@keyframes se-slidein-top { from{opacity:0;transform:translateX(-50%) translateY(-20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── Easter Egg Pop ───────────────────────────────────── */
.se-easter-egg-pop {
  position: fixed; bottom: 24px; left: 24px; z-index: 9980;
  display: flex; align-items: center; gap: 14px;
  background: #0d1520; border: 1px solid var(--egg-color, #ffe600);
  border-radius: 12px; padding: 14px 20px; max-width: 340px;
  box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 0 1px var(--egg-color,.2);
  opacity: 0; transform: translateX(-30px);
  transition: opacity .35s ease, transform .35s ease;
}
.se-easter-egg-pop.visible { opacity: 1; transform: translateX(0); }
.se-egg-icon { font-size: 32px; flex-shrink: 0; }
.se-egg-title { font-family: 'Orbitron', monospace; font-size: .8rem; font-weight: 700;
  color: var(--egg-color,#ffe600); letter-spacing: 1px; text-transform: uppercase; }
.se-egg-msg { font-size: .78rem; color: #c8d8e8; margin-top: 4px; line-height: 1.4; }

/* ── Milestone Banner ─────────────────────────────────── */
.se-milestone-banner {
  position: fixed; inset: 0; z-index: 9995;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85); backdrop-filter: blur(8px);
  animation: se-fadein .3s ease;
}
.se-mb-inner {
  text-align: center; padding: 48px 40px;
  background: radial-gradient(circle at 50% 0%, rgba(0,255,231,.08) 0%, #0a0f18 70%);
  border: 1px solid var(--milestone-color, #00ffe7);
  border-radius: 20px; max-width: 480px; width: 90%;
  box-shadow: 0 0 80px rgba(0,0,0,.6), 0 0 40px var(--milestone-color,.1);
}
.se-mb-rank {
  font-family: 'Orbitron', monospace; font-size: 2rem; font-weight: 900;
  color: var(--milestone-color,#00ffe7); text-shadow: 0 0 30px currentColor;
  margin-bottom: 16px; letter-spacing: 3px;
  animation: se-glitch-anim 1s steps(2) 3;
}
.se-mb-msg { font-size: 1rem; color: #c8d8e8; line-height: 1.6; margin-bottom: 28px; }
.se-mb-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.se-mb-actions button {
  padding: 10px 24px; border-radius: 8px; font-size: .8rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  border: 1px solid var(--milestone-color,#00ffe7);
  transition: background .2s;
}
.se-mb-actions button:first-child {
  background: var(--milestone-color,#00ffe7); color: #050a0f;
}
.se-mb-actions button:last-child {
  background: transparent; color: var(--milestone-color,#00ffe7);
}
.se-mb-actions button:hover { opacity: .85; }

/* ── Shared fade-in ───────────────────────────────────── */
@keyframes se-fadein { from{opacity:0} to{opacity:1} }

/* ── se-glitch-anim: used by milestone rank reveal banner ── */
@keyframes se-glitch-anim {
  0%   { clip-path: inset(10% 0 80% 0); transform: skew(-3deg); }
  20%  { clip-path: inset(60% 0 10% 0); transform: skew(2deg); }
  40%  { clip-path: inset(30% 0 50% 0); transform: skew(-1deg); }
  60%  { clip-path: inset(80% 0 5%  0); transform: skew(3deg); }
  80%  { clip-path: inset(5%  0 70% 0); transform: skew(-2deg); }
  100% { clip-path: inset(0);           transform: skew(0); }
}

/* ══════════════════════════════════════════════════════════
   MISSIONS + SEASONAL EVENTS — Frontend CSS
   Event Banner · Speedrun Timer · Mission Toast
   ══════════════════════════════════════════════════════════ */

/* ── Seasonal Event Banner (below gamebar) ────────────────── */
.se-event-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 20px; background: linear-gradient(
    90deg, rgba(0,0,0,.6) 0%, color-mix(in srgb, var(--event-color,#00ffe7) 12%, transparent) 100%
  );
  border-bottom: 1px solid var(--event-color,#00ffe7);
  font-size: .82rem; position: relative; z-index: var(--z-header, 100);
}
.se-eb-icon { font-size: 16px; }
.se-eb-text { flex: 1; color: #c8d8e8; }
.se-eb-text strong { color: var(--event-color,#00ffe7); }
.se-eb-timer { color: #6b8299; font-size: .78rem; }
.se-eb-cta {
  padding: 4px 12px; border-radius: 4px; font-size: .75rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--event-color,#00ffe7); color: var(--event-color,#00ffe7);
  transition: background .15s;
}
.se-eb-cta:hover { background: rgba(0,255,231,.1); }
.se-eb-close {
  background: none; border: none; color: #6b8299; font-size: 1.1rem;
  cursor: pointer; padding: 2px 6px; flex-shrink: 0;
}
.se-eb-close:hover { color: #e8f4ff; }

/* ── Speedrun Timer (dashboard widget) ────────────────────── */
.se-speedrun-widget {
  background: var(--bg2,#080f18); border: 1px solid rgba(0,255,231,.2);
  border-radius: 12px; padding: 20px 24px; text-align: center; margin: 16px 0;
}
.se-speedrun-widget.se-sr-expired { border-color: rgba(255,45,120,.4); }
.se-sr-label { font-family: 'Orbitron',monospace; font-size: .7rem; letter-spacing: 2px;
  text-transform: uppercase; color: #6b8299; margin-bottom: 8px; }
.se-sr-elapsed { font-family: monospace; font-size: 2rem; font-weight: 700; color: #00ffe7;
  letter-spacing: 2px; line-height: 1; }
.se-sr-remaining { font-size: .8rem; color: #6b8299; margin-top: 8px; }
.se-sr-expired .se-sr-elapsed { color: #ff2d78; }

/* ── Mission Complete Toast ───────────────────────────────── */
.se-mission-complete-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 9970;
  display: flex; align-items: center; gap: 14px;
  background: #0d1520; border: 1px solid #7b2fff; border-radius: 12px;
  padding: 14px 18px; max-width: 360px; min-width: 280px;
  box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 20px rgba(123,47,255,.2);
  opacity: 0; transform: translateX(30px);
  transition: opacity .35s ease, transform .35s ease;
}
.se-mission-complete-toast.visible { opacity: 1; transform: translateX(0); }
.se-mct-icon { font-size: 28px; flex-shrink: 0; }
.se-mct-body { flex: 1; min-width: 0; }
.se-mct-title { font-family: 'Orbitron',monospace; font-size: .68rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: #7b2fff; margin-bottom: 3px; }
.se-mct-name  { font-size: .9rem; font-weight: 700; color: #e8f4ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-mct-reward { font-size: .75rem; color: #00ffe7; margin-top: 3px; font-family: monospace; }
.se-mct-claim {
  flex-shrink: 0; background: #7b2fff; color: #fff; border: none;
  border-radius: 6px; padding: 8px 16px; font-size: .78rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  transition: opacity .15s;
}
.se-mct-claim:hover { opacity: .85; }

/* ── Shortcode component styles ───────────────────────────────────── */

/* Login prompt */
.se-login-prompt {
  background: var(--se-bg2, #0d1520);
  border: 1px solid var(--se-border, #1e2d3d);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}
.se-login-prompt p { color: var(--se-dim, #5a7a9a); margin-bottom: 12px; }

/* Referral box */
.se-referral-box {
  background: var(--se-bg2, #0d1520);
  border: 1px solid var(--se-neon, #00ffe7);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}
.se-referral-label {
  display: block;
  font-size: .75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--se-neon, #00ffe7);
  margin-bottom: 10px;
}
.se-referral-copy-wrap { display: flex; gap: 8px; }
.se-referral-input {
  flex: 1;
  background: var(--se-bg, #050a0f);
  border: 1px solid var(--se-border, #1e2d3d);
  border-radius: 4px;
  color: #c8d8e8;
  padding: 8px 12px;
  font-family: var(--font-mono, monospace);
  font-size: .85rem;
}

/* Streak widget */
.se-widget-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--se-bg2, #0d1520);
  border: 1px solid rgba(255,107,0,.3);
  border-radius: 999px;
  padding: 6px 14px;
}
.se-streak-flame { font-size: 1.1em; }
.se-streak-count { font-size: 1.2rem; font-weight: 700; color: #ff6b00; }
.se-streak-label { font-size: .75rem; color: var(--se-dim, #5a7a9a); }

/* Coins widget */
.se-widget-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--se-bg2, #0d1520);
  border: 1px solid rgba(255,214,0,.25);
  border-radius: 999px;
  padding: 6px 14px;
}
.se-coins-icon { font-size: 1.1em; }
.se-coins-amount { font-size: 1.1rem; font-weight: 700; color: #ffd600; }
.se-coins-label { font-size: .75rem; color: var(--se-dim, #5a7a9a); }

/* Leaderboard widget */
.se-widget-leaderboard {
  background: var(--se-bg2, #0d1520);
  border: 1px solid var(--se-border, #1e2d3d);
  border-radius: 8px;
  padding: 20px;
}
.se-widget-lb-title {
  font-size: .7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--se-neon, #00ffe7);
  margin: 0 0 14px;
}
.se-widget-lb-list { list-style: none; margin: 0; padding: 0; }
.se-widget-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--se-border, #1e2d3d);
}
.se-widget-lb-row:last-child { border-bottom: none; }
.se-widget-lb-pos { width: 28px; text-align: center; font-size: 1.1em; flex-shrink: 0; }
.se-widget-lb-name { flex: 1; font-size: .9rem; color: #c8d8e8; }
.se-widget-lb-xp { font-size: .8rem; color: var(--se-neon, #00ffe7); white-space: nowrap; }
.se-widget-lb-more {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: .8rem;
  color: var(--se-neon, #00ffe7);
  text-decoration: none;
}
.se-widget-lb-more:hover { text-decoration: underline; }
.se-widget-empty { color: var(--se-dim, #5a7a9a); font-size: .85rem; padding: 12px 0; }

/* Inline level */
.se-inline-level {
  display: inline-block;
  background: var(--se-neon, #00ffe7);
  color: #050a0f;
  font-weight: 700;
  font-size: .75rem;
  border-radius: 4px;
  padding: 2px 7px;
}

/* Spin button shortcode */
.se-shortcode-spin { text-align: center; padding: 24px 0; }
.se-spin-sub { font-size: .8rem; color: var(--se-dim, #5a7a9a); margin-top: 8px; }


/* ── Missing UI classes (audit-added) ─────────────────────────── */

/* Highlight the current user's row in leaderboard */
.se-lb-me {
  background: rgba(0,255,231,.07);
  border-color: var(--se-neon, #00ffe7) !important;
  font-weight: 700;
}
.se-lb-me .se-lb-name { color: var(--se-neon, #00ffe7); }

/* Dashboard mission row (React-rendered) */
.se-mission-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s4, 16px);
  padding: var(--s4, 16px);
  background: var(--bg2, #080f18);
  border: 1px solid var(--border, rgba(0,255,231,.12));
  border-radius: var(--radius, 4px);
  margin-bottom: var(--s3, 12px);
  transition: border-color var(--t-fast);
}
.se-mission-row:hover { border-color: rgba(0,255,231,.3); }
.se-mission-info { display: flex; flex-direction: column; gap: 4px; }
.se-mission-info strong { font: 600 .9rem/1.3 var(--font-ui); color: var(--text-bright, #e8f4f8); }
.se-mission-info small  { font: 400 .75rem/1 var(--font-mono); color: var(--text-dim, #8899aa); }
.se-mission-track { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.se-mission-fill  { height: 100%; background: var(--se-neon, #00ffe7); border-radius: 2px; transition: width .4s ease; }
.se-in-progress   { font: 600 .7rem/1 var(--font-mono); color: var(--text-dim, #8899aa); letter-spacing: 1px; }
.se-claimed       { font: 600 .75rem/1 var(--font-mono); color: var(--se-neon, #00ffe7); }

/* XP progress bar — used in article headers, dashboard hero, shortcode widgets */
.se-xp-bar-wrap   { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.se-xp-bar-track  { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.se-xp-bar-fill   { height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(.4,0,.2,1); min-width: 2px; }
.se-xp-bar-labels { display: flex; justify-content: space-between; font: 500 .7rem/1 var(--font-mono); color: var(--text-dim, #8899aa); }

/* se-xp-tag — inline XP display in article body */
.se-xp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 700 .7rem/1 var(--font-mono);
  color: var(--se-neon, #00ffe7);
  letter-spacing: 1px;
}

/* ── Achievement toast sub-elements ──────────────────────────── */
.se-ach-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.se-ach-body { display: flex; flex-direction: column; gap: 3px; }
.se-ach-title { font: 600 .65rem/1 var(--font-ui, monospace); letter-spacing: 2px;
                text-transform: uppercase; opacity: .7; }
.se-ach-name  { font: 700 .9rem/1.2 var(--font-ui, monospace); color: var(--rarity-color, #00ffe7); }
.se-ach-xp    { font: 600 .7rem/1 var(--font-mono, monospace); color: var(--se-neon, #00ffe7); }

/* ── Easter egg popup sub-elements ───────────────────────────── */
.se-egg-icon { font-size: 2rem; line-height: 1; }
.se-egg-body { display: flex; flex-direction: column; gap: 4px; }
.se-egg-title { font: 700 1rem/1.2 var(--font-display, monospace); color: var(--egg-color, #ffe600); }
.se-egg-msg   { font: 400 .8rem/1.4 var(--font-ui, monospace); opacity: .85; }

/* ── Streak widget urgency state ─────────────────────────────── */
.se-streak-widget { transition: color var(--t-fast); }
.se-streak-widget.urgent { color: #ff4444 !important; animation: se-streak-pulse 1s ease infinite; }
@keyframes se-streak-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ── Milestone banner buttons ─────────────────────────────────── */
.se-mb-share, .se-mb-dismiss {
  padding: 8px 20px; border-radius: var(--radius, 4px);
  font: 600 .75rem/1 var(--font-ui, monospace); letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; border: none;
  transition: opacity var(--t-fast);
}
.se-mb-share   { background: var(--milestone-color, #00ffe7); color: #000; }
.se-mb-dismiss { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #fff; }
.se-mb-share:hover, .se-mb-dismiss:hover { opacity: .8; }

/* ── Branded registration page [se_register_cta] ─────────────── */
.se-register-page      { max-width: 860px; margin: 0 auto; padding: var(--s7, 40px) var(--s5, 24px); }
.se-register-hero      { text-align: center; margin-bottom: var(--s8, 48px); }
.se-register-title     { font: 800 clamp(1.8rem,4vw,2.8rem)/1.1 var(--font-display, monospace);
                          color: var(--text-bright, #e8f4f8); margin-bottom: var(--s3, 12px); }
.se-register-sub       { color: var(--text-dim, #8899aa); font-size: 1.05rem; line-height: 1.5;
                          max-width: 520px; margin: 0 auto var(--s5, 24px); }
.se-register-cta-btn   { font-size: 1.05rem !important; padding: var(--s4, 16px) var(--s7, 40px) !important; }
.se-register-note      { margin-top: var(--s3, 12px); font: 400 .8rem/1 var(--font-mono, monospace);
                          color: var(--text-dim, #8899aa); }
.se-register-perks     { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                          gap: var(--s4, 16px); margin-bottom: var(--s7, 40px); }
.se-register-perk      { background: var(--bg2, #080f18); border: 1px solid var(--border, rgba(0,255,231,.12));
                          border-radius: var(--radius-lg, 8px); padding: var(--s4, 16px); display: flex;
                          gap: var(--s3, 12px); align-items: flex-start;
                          transition: border-color var(--t-fast); }
.se-register-perk:hover{ border-color: rgba(0,255,231,.3); }
.se-register-perk-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.se-register-perk-body strong { display: block; font: 600 .9rem/1.3 var(--font-ui, monospace);
                                 color: var(--text-bright, #e8f4f8); margin-bottom: 4px; }
.se-register-perk-body p { margin: 0; font: 400 .78rem/1.4 var(--font-ui, monospace);
                            color: var(--text-dim, #8899aa); }
.se-register-footer    { text-align: center; padding-top: var(--s5, 24px);
                          border-top: 1px solid var(--border, rgba(0,255,231,.08)); }


/* ── Near-Level Trigger Banner ──────────────────────────────────── */
.se-near-level-banner {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(0,255,231,.12) 0%, rgba(123,47,255,.12) 100%);
  border: 1px solid rgba(0,255,231,.4);
  border-radius: 8px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--se-font-mono, monospace);
  font-size: .85rem;
  color: #e8f4f8;
  z-index: 99990;
  transition: bottom .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 24px rgba(0,255,231,.12);
  white-space: nowrap;
  max-width: 90vw;
}
.se-near-level-banner.se-nl-show { bottom: 24px; }
.se-nl-icon { font-size: 1.1rem; filter: drop-shadow(0 0 6px #00ffe7); }
.se-nl-text strong { color: #00ffe7; }
.se-nl-close {
  background: none; border: none; color: rgba(255,255,255,.4);
  cursor: pointer; font-size: .9rem; padding: 0 0 0 8px; line-height: 1;
}
.se-nl-close:hover { color: #fff; }

/* ── Coin pulse animation (fires on coin balance update) ────────── */
@keyframes se-coin-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); color: #ffe600; }
  60%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
.se-gamebar-stat--coins.se-coin-pulse strong {
  animation: se-coin-pulse .45s ease-out forwards;
}