:root{--font-title: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1)}.theme-light{--bg-app: linear-gradient(135deg, #f5f3ff 0%, #e0e7ff 100%);--bg-card: rgba(255, 255, 255, .7);--bg-card-hover: rgba(255, 255, 255, .95);--border-card: rgba(255, 255, 255, .4);--shadow-card: 0 10px 30px rgba(99, 102, 241, .06);--shadow-card-hover: 0 20px 40px rgba(99, 102, 241, .12);--text-primary: #1e1b4b;--text-secondary: #4f46e5;--text-muted: #6b7280;--text-light: #ffffff;--primary: #6366f1;--primary-hover: #4f46e5;--primary-glow: rgba(99, 102, 241, .3);--accent-streak: #ff7a00;--accent-streak-glow: rgba(255, 122, 0, .2);--accent-xp: #facc15;--accent-league: #10b981;--accent-secondary: #ec4899;--glass-bg: rgba(255, 255, 255, .45);--glass-border: rgba(255, 255, 255, .5);--glass-blur: blur(20px)}.theme-dark{--bg-app: radial-gradient(circle at top, #0f1016 0%, #050508 100%);--bg-card: rgba(18, 19, 31, .65);--bg-card-hover: rgba(25, 26, 41, .85);--border-card: rgba(255, 255, 255, .06);--shadow-card: 0 15px 35px rgba(0, 0, 0, .3);--shadow-card-hover: 0 25px 50px rgba(0, 0, 0, .5);--text-primary: #f8fafc;--text-secondary: #a5b4fc;--text-muted: #94a3b8;--text-light: #ffffff;--primary: #818cf8;--primary-hover: #6366f1;--primary-glow: rgba(129, 140, 248, .4);--accent-streak: #f97316;--accent-streak-glow: rgba(249, 115, 22, .3);--accent-xp: #fde047;--accent-league: #34d399;--accent-secondary: #f472b6;--glass-bg: rgba(15, 16, 26, .55);--glass-border: rgba(255, 255, 255, .08);--glass-blur: blur(25px)}.glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);transition:all var(--transition-normal)}.glass-interactive:hover{background:var(--bg-card-hover);border-color:#fff3;transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}@keyframes pulse-slow{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}@keyframes beat{0%,to{transform:scale(1)}25%{transform:scale(1.1)}40%{transform:scale(1.05)}60%{transform:scale(1.15)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{transform:translate(30px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes float-heart{0%{transform:translateY(0) translate(0) scale(.6);opacity:1}to{transform:translateY(-120px) translate(var(--drift-x, 20px)) scale(1.2);opacity:0}}@keyframes stage-glow{0%,to{box-shadow:0 0 20px #818cf84d,inset 0 0 15px #818cf833}50%{box-shadow:0 0 40px #f472b680,inset 0 0 25px #f472b64d}}.animate-float{animation:float 4s ease-in-out infinite}.animate-pulse-slow{animation:pulse-slow 3s ease-in-out infinite}.animate-beat{animation:beat 1.2s ease-in-out infinite}.animate-fade-in{animation:fadeInUp .5s cubic-bezier(.16,1,.3,1) forwards}.badge-live-pulse{position:relative}.badge-live-pulse:after{content:"";position:absolute;top:-2px;right:-2px;width:8px;height:8px;background-color:var(--accent-secondary);border-radius:50%;animation:pulse-slow 1.5s infinite}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:#0c0a1a;color:var(--text-primary);min-height:100vh;min-height:100dvh;width:100%;overflow:hidden}#root{width:100%;height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center}h1,h2,h3,h4,h5,h6{font-family:var(--font-title);font-weight:700;letter-spacing:-.02em}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.app-container{width:100%;height:100vh;height:100dvh;position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--bg-app);transition:background var(--transition-slow)}@media (min-width: 1024px) and (display-mode: browser){body{background:radial-gradient(circle at center,#1e1b4b,#03001e);overflow:hidden;padding:20px;height:100vh;height:100dvh}.app-container{width:412px;height:min(892px,calc(100vh - 40px));border-radius:40px;box-shadow:0 25px 60px -10px #000000b3,0 0 0 12px #ffffff0d,0 0 0 13px #ffffff1a;margin:0 auto;position:relative}}.tab-content{flex:1;overflow-y:auto;padding:calc(12px + env(safe-area-inset-top)) 20px calc(90px + env(safe-area-inset-bottom)) 20px;position:relative}.nav-bar{position:absolute;bottom:0;left:0;right:0;height:calc(80px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;justify-content:space-around;align-items:center;padding:0 10px;border-top:1px solid var(--glass-border);z-index:50;border-radius:0;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}@media (min-width: 1024px) and (display-mode: browser){.nav-bar{border-bottom-left-radius:40px;border-bottom-right-radius:40px}}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);font-size:10px;font-weight:500;background:none;border:none;cursor:pointer;width:60px;height:60px;transition:all var(--transition-fast);text-decoration:none}.nav-item.active{color:var(--primary)}.nav-item-center{position:relative;top:-20px;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary) 0%,var(--accent-secondary) 100%);display:flex;justify-content:center;align-items:center;color:#fff;box-shadow:0 8px 24px #6366f166;border:4px solid var(--bg-card-hover);transition:transform var(--transition-spring),box-shadow var(--transition-fast)}.nav-item-center:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 28px #6366f180}.view-enter{opacity:0;transform:scale(.98)}.view-enter-active{opacity:1;transform:scale(1);transition:opacity var(--transition-normal),transform var(--transition-normal)}
