/* SasiPlays — Sasiverse Brand Design System */
@import url('/shared/fonts/fonts.css');

:root {
  --c-primary:   #00D4FF;
  --c-secondary: #FF6B35;
  --c-charity:   #7CFC00;
  --c-hype:      #FF0080;
  --c-bg:        #0A0E1A;
  --c-surface:   #12182B;
  --c-surface2:  #1A2540;
  --c-text:      #E8F4FD;
  --c-muted:     #6B84A8;
  --c-gold:      #FFD700;
  --c-twitch:    #9146FF;
  --c-youtube:   #FF0000;
  --c-kick:      #53FC18;
  --c-facebook:  #1877F2;
  --font-head:   'Rajdhani', sans-serif;
  --font-hud:    'Orbitron', monospace;
  --font-body:   'Inter', sans-serif;
  --glow-primary: 0 0 8px var(--c-primary), 0 0 20px rgba(0,212,255,0.3);
  --glow-charity: 0 0 8px var(--c-charity), 0 0 20px rgba(124,252,0,0.3);
  --glow-hype:    0 0 12px var(--c-hype), 0 0 30px rgba(255,0,128,0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: transparent;
  overflow: hidden;
}

/* ── Angled card (clip-path) ─────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border-left: 3px solid var(--c-primary);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  padding: 12px 16px;
  position: relative;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: linear-gradient(135deg, rgba(0,212,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Scanline overlay (very subtle) ─────────────────────────────────────── */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 3px,
    rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
}

/* ── Glow border card variant ────────────────────────────────────────────── */
.card-glow {
  box-shadow: var(--glow-primary);
}
.card-charity { border-left-color: var(--c-charity); }
.card-charity.card-glow { box-shadow: var(--glow-charity); }

/* ── Typography ──────────────────────────────────────────────────────────── */
.font-head  { font-family: var(--font-head); font-weight: 700; }
.font-hud   { font-family: var(--font-hud); font-weight: 400; }
.font-body  { font-family: var(--font-body); }

.text-primary   { color: var(--c-primary); }
.text-secondary { color: var(--c-secondary); }
.text-charity   { color: var(--c-charity); }
.text-hype      { color: var(--c-hype); }
.text-gold      { color: var(--c-gold); }
.text-muted     { color: var(--c-muted); }

/* ── Platform badge ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-head);
  flex-shrink: 0;
}
.badge-twitch   { background: var(--c-twitch); color: #fff; }
.badge-youtube  { background: var(--c-youtube); color: #fff; }
.badge-kick     { background: var(--c-kick); color: #000; }
.badge-facebook { background: var(--c-facebook); color: #fff; }

/* ── Animated progress bar ───────────────────────────────────────────────── */
.progress-track {
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  height: 8px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-charity) 0%, #B4F740 100%);
  box-shadow: var(--glow-charity);
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-fill.full { animation: goalPulse 1s ease infinite; }

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes pulse-primary {
  0%, 100% { box-shadow: var(--glow-primary); }
  50%       { box-shadow: 0 0 16px var(--c-primary), 0 0 40px rgba(0,212,255,0.5); }
}
@keyframes pulse-charity {
  0%, 100% { box-shadow: var(--glow-charity); }
  50%       { box-shadow: 0 0 20px var(--c-charity), 0 0 50px rgba(124,252,0,0.5); }
}
@keyframes goalPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
@keyframes borderRace {
  0%   { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}
@keyframes ringExpand {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes countUp {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes wave {
  0%,100% { transform: skewX(0deg) skewY(0deg); }
  25%      { transform: skewX(2deg) skewY(1deg); }
  75%      { transform: skewX(-2deg) skewY(-1deg); }
}