@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{--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);background-color:#0a0518;color:#fff;font-family:Outfit,sans-serif;font-size:18px}html,body,#root{height:100%;min-height:100%;min-height:100dvh;overflow-x:hidden}#root{display:flex;flex-direction:column}@media(min-width:1024px){:root{font-size:24px}}@media(min-width:1920px){:root{font-size:28px}}.safe-container{padding-top:max(1rem,var(--safe-top));padding-bottom:max(1rem,var(--safe-bottom));padding-left:max(1rem,var(--safe-left));padding-right:max(1rem,var(--safe-right))}.center-flex{display:flex;align-items:center;justify-content:center}.full-viewport{width:100%;min-height:100vh;min-height:100dvh}.scroll-container{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.content-safe{padding-bottom:max(2rem,calc(var(--safe-bottom) + 2rem))}.custom-scrollbar::-webkit-scrollbar{width:10px}.custom-scrollbar::-webkit-scrollbar-track{background:#ffffff08;border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f0f6,#0ff6);border-radius:10px;border:2px solid transparent;background-clip:content-box}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#f0f9,#0ff9)}.glass{background:#ffffff0f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}.glass-card{background:linear-gradient(135deg,#140f23d9,#0a0518e6);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border:2px solid rgba(255,255,255,.08);box-shadow:0 8px 32px #00000080,0 0 40px #ff00ff0d,inset 0 1px #ffffff1a}.glass-card-hover:hover{border-color:#ff00ff4d;box-shadow:0 12px 48px #0009,0 0 60px #ff00ff26,inset 0 1px #ffffff26;transform:translateY(-2px)}.gradient-border{position:relative;background:linear-gradient(135deg,#140f23e6,#0a0518f2);border-radius:1.5rem}.gradient-border:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#ff00ff80,#00ffff80);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.text-glow{text-shadow:0 0 20px rgba(255,0,255,.4),0 0 40px rgba(0,255,255,.2),0 2px 4px rgba(0,0,0,.5)}.text-glow-cyan{text-shadow:0 0 20px rgba(0,255,255,.4),0 0 40px rgba(0,255,255,.2)}.text-glow-magenta{text-shadow:0 0 20px rgba(255,0,255,.4),0 0 40px rgba(255,0,255,.2)}.gradient-text-primary{@apply bg-clip-text text-transparent;background-image:linear-gradient(135deg,#f0f,#0ff)}.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}@keyframes spin{to{transform:rotate(360deg)}}