@import"https://fonts.googleapis.com/css2?family=Fredoka+One&family=Outfit:wght@300;400;600;700;900&family=Space+Mono:wght@400;700&display=swap";@tailwind base;@tailwind components;@tailwind utilities;:root{--bg-deep: #0f091a;--bg-sidebar: #1a0b2e;--accent-pink: #d946ef;--accent-cyan: #06b6d4;--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .5);--glass-bg: rgba(255, 255, 255, .04);--glass-border: rgba(255, 255, 255, .08);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);background-color:var(--bg-deep);color:var(--text-primary);font-family:Outfit,sans-serif;font-size:16px}html,body,#root{height:100%;overflow:hidden;background-color:var(--bg-deep)}.fortune-glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border)}.fortune-card{background:linear-gradient(135deg,#ffffff08,#ffffff03);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.05);border-radius:2rem;box-shadow:0 10px 40px #0006}.fortune-card-hover:hover{border-color:var(--accent-pink);box-shadow:0 0 30px #d946ef33;transform:translateY(-4px);transition:all .3s cubic-bezier(.2,.8,.2,1)}.text-gradient-pink{background:linear-gradient(to right,#f472b6,#d946ef);-webkit-background-clip:text;background-clip:text;color:transparent}.text-gradient-cyan{background:linear-gradient(to right,#22d3ee,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}.shadow-fortune{box-shadow:0 0 50px #d946ef26}@keyframes pulse-soft{0%,to{opacity:.8}50%{opacity:1;transform:scale(1.02)}}.animate-pulse-soft{animation:pulse-soft 3s ease-in-out infinite}@keyframes narrator-bar-wave{0%,to{transform:scaleY(.2)}50%{transform:scaleY(1)}}.narrator-bar{height:10px;transform-origin:bottom;animation:narrator-bar-wave .6s ease-in-out infinite}@keyframes persona-spin-cw{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes persona-spin-ccw{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.persona-ring-outer{animation:persona-spin-cw 12s linear infinite}.persona-ring-inner{animation:persona-spin-ccw 18s linear infinite}.gradient-text-secondary{@apply bg-clip-text text-transparent;background-image:linear-gradient(135deg,#0ff,#0f8)}.gradient-text-warm{@apply bg-clip-text text-transparent;background-image:linear-gradient(135deg,#ff6b6b,#ffa502)}.text-huge{font-size:clamp(8rem,20vw,15rem);line-height:.9;font-weight:900}.text-massive{font-size:clamp(10rem,25vw,20rem);line-height:.85;font-weight:900}@keyframes float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10px,-15px) scale(1.02)}}@keyframes float-gentle{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #ff00ff4d,0 0 40px #ff00ff1a}50%{box-shadow:0 0 40px #ff00ff80,0 0 80px #f0f3}}@keyframes pulse-glow-cyan{0%,to{box-shadow:0 0 20px #00ffff4d,0 0 40px #00ffff1a}50%{box-shadow:0 0 40px #00ffff80,0 0 80px #0ff3}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes entrance-pop{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes entrance-slide-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes entrance-fade{0%{opacity:0}to{opacity:1}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce-gentle{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.animate-float{animation:float 8s ease-in-out infinite}.animate-float-gentle{animation:float-gentle 3s ease-in-out infinite}.animate-pulse-glow{animation:pulse-glow 2.5s ease-in-out infinite}.animate-pulse-glow-cyan{animation:pulse-glow-cyan 2.5s ease-in-out infinite}.animate-shimmer{animation:shimmer 2s linear infinite}.animate-entrance-pop{animation:entrance-pop .4s cubic-bezier(.34,1.56,.64,1) forwards}.animate-entrance-slide{animation:entrance-slide-up .5s ease-out forwards}.animate-entrance-fade{animation:entrance-fade .3s ease-out forwards}.animate-spin-slow{animation:spin-slow 3s linear infinite}.animate-bounce-gentle{animation:bounce-gentle 2s ease-in-out infinite}.animate-wiggle{animation:wiggle .5s ease-in-out infinite}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.btn-base{@apply font-bold rounded-2xl transition-all duration-200;@apply active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed;-webkit-tap-highlight-color:transparent}.btn-primary{@apply btn-base bg-game-primary text-white;@apply hover:brightness-110 hover:-translate-y-0.5;box-shadow:0 8px 30px #ff00ff4d}.btn-primary:hover:not(:disabled){box-shadow:0 12px 40px #ff00ff80}.btn-secondary{@apply btn-base bg-game-secondary text-game-bg;@apply hover:brightness-110 hover:-translate-y-0.5;box-shadow:0 8px 30px #00ffff4d}.btn-secondary:hover:not(:disabled){box-shadow:0 12px 40px #00ffff80}.btn-ghost{@apply btn-base bg-white/5 text-white border-2 border-white/10;@apply hover:bg-white/10 hover:border-white/20;}.btn-xl{@apply px-10 py-6 text-2xl md:text-3xl;}.btn-lg{@apply px-8 py-4 text-xl;}.btn-md{@apply px-6 py-3 text-lg;}.input-base{@apply w-full bg-white/5 border-2 border-white/10 rounded-2xl;@apply px-6 py-4 text-white text-center font-bold;@apply focus:outline-none focus:border-game-primary;@apply transition-all duration-200;@apply placeholder:text-white/20;}.input-base:focus{box-shadow:0 0 30px #f0f3}.input-xl{@apply px-8 py-6 text-4xl md:text-5xl rounded-3xl;letter-spacing:.3em}.input-lg{@apply px-6 py-5 text-2xl md:text-3xl rounded-2xl;}.card{@apply glass-card rounded-3xl p-6 transition-all duration-300;}.card-hover{@apply card;}.card-hover:hover{@apply -translate-y-1;border-color:#ff00ff4d;box-shadow:0 20px 60px #00000080,0 0 60px #ff00ff1a}.card-game{@apply card cursor-pointer;@apply hover:-translate-y-2 hover:scale-[1.02];}.bg-game{background-color:#0a0518;background-image:radial-gradient(ellipse at 20% 0%,rgba(255,0,255,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(0,255,255,.15) 0%,transparent 50%)}.bg-noise{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")}.orb-magenta{position:fixed;width:clamp(300px,50vw,600px);height:clamp(300px,50vw,600px);background:radial-gradient(circle,rgba(255,0,255,.3) 0%,transparent 70%);filter:blur(80px);opacity:.5;pointer-events:none;animation:float 10s ease-in-out infinite}.orb-cyan{position:fixed;width:clamp(300px,50vw,600px);height:clamp(300px,50vw,600px);background:radial-gradient(circle,rgba(0,255,255,.3) 0%,transparent 70%);filter:blur(80px);opacity:.5;pointer-events:none;animation:float 10s ease-in-out infinite reverse}.touch-target{min-height:48px;min-width:48px}*{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid rgba(255,0,255,.5);outline-offset:2px}.status-connected{@apply w-3 h-3 rounded-full bg-green-500;box-shadow:0 0 10px #22c55e80;animation:pulse-glow 2s ease-in-out infinite}.status-disconnected{@apply w-3 h-3 rounded-full bg-red-500;box-shadow:0 0 10px #ef444480}.room-code{font-family:Space Mono,monospace;font-size:clamp(6rem,18vw,14rem);font-weight:700;letter-spacing:.15em;line-height:1;color:#fff;text-shadow:0 0 60px rgba(255,255,255,.4),0 0 120px rgba(255,0,255,.3)}.shadow-glow-magenta{box-shadow:0 0 40px #ff00ff4d}.shadow-glow-cyan{box-shadow:0 0 40px #00ffff4d}.shadow-glow-green{box-shadow:0 0 40px #22c55e4d}.shadow-glow-red{box-shadow:0 0 40px #ef44444d}.center-absolute{@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;}.no-select{user-select:none;-webkit-user-select:none}.loader-ring{@apply w-16 h-16 border-4 border-white/10 border-t-game-primary rounded-full;animation:spin 1s linear infinite}.loader-dots{display:flex;gap:.5rem}.loader-dots span{@apply w-3 h-3 rounded-full bg-game-primary;animation:bounce-gentle .6s ease-in-out infinite}.loader-dots span:nth-child(2){animation-delay:.1s}.loader-dots span:nth-child(3){animation-delay:.2s}.gpu-accelerated{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}.shadow-glow{box-shadow:0 0 15px currentColor}@keyframes spin{to{transform:rotate(360deg)}}