@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap";:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #1e1b4b, #0f172a, #172554);--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--primary: #8b5cf6;--primary-hover: #7c3aed;--text-light: #f8fafc;--text-dim: #94a3b8;--accent: #10b981;--danger: #ef4444}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,sans-serif}body{background:var(--bg-gradient);background-size:300% 300%;animation:gradientBG 15s ease infinite;color:var(--text-light);min-height:100vh;display:flex;justify-content:center;align-items:center}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#app{width:100%;max-width:500px;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:1rem}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:24px;padding:2rem;width:100%;box-shadow:0 8px 32px #0000004d;transition:transform .3s ease}h1.title{text-align:center;font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(to right,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}p.subtitle{text-align:center;color:var(--text-dim);margin-bottom:2rem;font-size:1rem}.input-field{width:100%;background:#0003;border:1px solid var(--glass-border);border-radius:12px;padding:1rem;color:#fff;font-size:1.1rem;margin-bottom:1rem;outline:none;transition:all .2s;text-align:center;letter-spacing:2px}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 2px #8b5cf64d}.btn{width:100%;padding:1rem;border-radius:12px;border:none;font-size:1.1rem;font-weight:600;cursor:pointer;background:var(--primary);color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);margin-bottom:1rem}.btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #8b5cf666}.btn:active{transform:translateY(0)}.btn.secondary{background:#8b5cf626;border:1px solid var(--primary);color:#ddd6fe}.btn.secondary:hover{background:#8b5cf659;color:#fff}.room-info{display:flex;justify-content:space-between;background:#0003;padding:1rem;border-radius:12px;margin-bottom:1.5rem}.player-card{text-align:center;flex:1;opacity:.5;transition:opacity .3s}.player-card.active{opacity:1}.avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#fbbf24,#f59e0b);margin:0 auto .5rem;display:flex;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700}.history-item{background:#ffffff08;padding:.8rem;border-radius:8px;margin-bottom:.5rem;display:flex;justify-content:space-between;border:1px solid var(--glass-border)}.history-item.me{border-left:3px solid var(--accent)}.history-item.opponent{border-left:3px solid var(--danger)}.tag{background:var(--primary);padding:.2rem .6rem;border-radius:4px;font-size:.8rem}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease,transform .3s ease}.fade-enter-from,.fade-leave-to{opacity:0;transform:translateY(10px)}.shake{animation:shakeX .4s cubic-bezier(.36,.07,.19,.97) both;border-color:var(--danger)!important}@keyframes shakeX{0%,to{transform:translate(0)}20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}