/* BASE.CSS — Design System */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=DM+Serif+Display:ital@0;1&family=Fira+Code:wght@400;500&display=swap');

:root {
  --navy:        #0A1628;
  --navy2:       #0F1F3D;
  --navy3:       #162847;
  --navy4:       #1D3461;
  --gold:        #C9922A;
  --gold2:       #E8B84B;
  --gold3:       #F5D27A;
  --gold-dim:    rgba(201,146,42,0.12);
  --emerald:     #10B981;
  --emerald2:    #34D399;
  --emerald-dim: rgba(16,185,129,0.1);
  --sky:         #0EA5E9;
  --sky2:        #38BDF8;
  --sky-dim:     rgba(14,165,233,0.1);
  --rose:        #F43F5E;
  --rose2:       #FB7185;
  --rose-dim:    rgba(244,63,94,0.1);
  --violet:      #7C3AED;
  --violet2:     #A78BFA;
  --violet-dim:  rgba(124,58,237,0.1);
  --amber:       #F59E0B;
  --amber2:      #FCD34D;
  --amber-dim:   rgba(245,158,11,0.1);
  --bg:          #F0F4F8;
  --surface:     #FFFFFF;
  --surface2:    #F8FAFC;
  --surface3:    #EFF4FB;
  --border:      rgba(10,22,40,0.08);
  --border2:     rgba(10,22,40,0.14);
  --border3:     rgba(10,22,40,0.22);
  --text:        #0A1628;
  --text2:       #3D5480;
  --text3:       #7A93BC;
  --text4:       #B8CBE4;
  --success:     #10B981;
  --success-dim: rgba(16,185,129,0.1);
  --danger:      #F43F5E;
  --danger-dim:  rgba(244,63,94,0.1);
  --warning:     #F59E0B;
  --font:        'Poppins', sans-serif;
  --font-serif:  'DM Serif Display', serif;
  --font-mono:   'Fira Code', monospace;
  --r-xs:   4px;  --r-sm:  8px;
  --r:      14px; --r-lg:  20px;
  --r-xl:   28px; --r-full:9999px;
  --shadow-xs: 0 1px 3px rgba(10,22,40,0.08);
  --shadow-sm: 0 2px 8px rgba(10,22,40,0.1);
  --shadow:    0 4px 16px rgba(10,22,40,0.12);
  --shadow-lg: 0 8px 32px rgba(10,22,40,0.16);
  --shadow-xl: 0 20px 60px rgba(10,22,40,0.2);
  --shadow-gold: 0 4px 20px rgba(201,146,42,0.3);
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --ease-out:    cubic-bezier(0,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast: 120ms; --dur: 220ms; --dur-slow: 380ms;
  --max-w:        480px;
  --bottom-nav-h: 66px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  min-height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; }
img { max-width:100%; display:block; height:auto; }
input,select,textarea { font-family:inherit; }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

/* Animations */
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes scaleIn  { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
@keyframes bounceIn { 0%{transform:scale(0.6);opacity:0} 60%{transform:scale(1.1);opacity:1} 80%{transform:scale(0.95)} 100%{transform:scale(1)} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes shimmer  { to{transform:translateX(200%)} }
@keyframes shake    { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes greenFlash { 0%,100%{background:transparent} 50%{background:rgba(16,185,129,0.15)} }
@keyframes xpFloat  { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-40px)} }
@keyframes rankUp   { 0%{transform:scale(0.5) rotate(-10deg);opacity:0} 60%{transform:scale(1.2) rotate(5deg);opacity:1} 100%{transform:scale(1) rotate(0)} }
@keyframes streakPulse { 0%,100%{transform:scaleY(1) rotate(-2deg)} 50%{transform:scaleY(1.1) rotate(2deg)} }
@keyframes cardFlip { 0%{transform:perspective(600px) rotateY(0)} 50%{transform:perspective(600px) rotateY(90deg);opacity:0.3} 100%{transform:perspective(600px) rotateY(0);opacity:1} }
@keyframes swipeRight { to{transform:translateX(150%) rotate(20deg);opacity:0} }
@keyframes swipeLeft  { to{transform:translateX(-150%) rotate(-20deg);opacity:0} }

.anim-fadeUp  { animation:fadeUp  var(--dur-slow) var(--ease-out) both; }
.anim-fadeIn  { animation:fadeIn  var(--dur) var(--ease-out) both; }
.anim-scaleIn { animation:scaleIn var(--dur) var(--ease-spring) both; }
.anim-bounce  { animation:bounceIn 0.5s var(--ease-spring) both; }
.d1{animation-delay:50ms} .d2{animation-delay:100ms} .d3{animation-delay:150ms}
.d4{animation-delay:200ms} .d5{animation-delay:250ms} .d6{animation-delay:300ms}
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }