*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#0a0a1a;--card:rgba(20,20,40,.9);--border:rgba(255,255,255,.08);--purple:#a855f7;--blue:#6366f1;--green:#22c55e;--gold:#fbbf24;--text:#fff;--text2:rgba(255,255,255,.6);--text3:rgba(255,255,255,.35)}body{font-family:Montserrat,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5}.arcade-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 20% 40%,rgba(168,85,247,.1) 0,transparent 50%),radial-gradient(ellipse at 80% 60%,rgba(99,102,241,.08) 0,transparent 50%);pointer-events:none;z-index:0}.lobby-container{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:24px 20px}.lobby-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;margin-bottom:28px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:16px}.lobby-logo{display:flex;align-items:center;gap:12px}.logo-icon{width:40px;height:40px;color:var(--purple)}.lobby-logo h1{font-size:1.6rem;font-weight:900;background:linear-gradient(135deg,#fff,#c084fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.logo-subtitle{font-size:.7rem;color:var(--text2);text-transform:uppercase;letter-spacing:2px}.lobby-stats{display:flex;gap:10px}.stat-pill{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:50px;font-size:.85rem;font-weight:700;background:var(--card);border:1px solid var(--border)}.stat-pill.gold{border-color:#fbbf244d;color:var(--gold)}.stat-pill.online{border-color:#22c55e4d;color:var(--green)}.online-dot{width:8px;height:8px;background:var(--green);border-radius:50%;animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.section-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.section-title{display:flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:700}.section-line{flex:1;height:1px;background:linear-gradient(to right,rgba(168,85,247,.4),transparent)}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:32px}.game-card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:.3s}.game-card:hover{transform:translateY(-4px);border-color:#a855f74d;box-shadow:0 20px 40px #0006}.game-card-image{width:100%;height:160px;display:flex;align-items:center;justify-content:center;position:relative}.game-card-image.uno{background:linear-gradient(135deg,#dc2626,#ea580c)}.game-card-image.parques{background:linear-gradient(135deg,#b45309,#d97706)}.card-visual{display:flex;gap:8px;align-items:center}.uno-card-preview{width:55px;height:80px;border-radius:10px;border:3px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;color:#fff;box-shadow:0 8px 20px #0000004d}.uno-card-preview.red{background:#dc2626;transform:rotate(-8deg)}.uno-card-preview.blue{background:#2563eb;transform:rotate(10deg) translateY(-8px)}.parques-board-preview,.parques-preview{width:100px;height:100px;position:relative;transform:rotate(45deg)}.preview-home{position:absolute;width:45%;height:45%;border-radius:10px}.preview-home.red{top:0;left:0;background:#dc2626}.preview-home.blue{top:0;right:0;background:#2563eb}.preview-home.green{bottom:0;left:0;background:#059669}.preview-home.yellow{bottom:0;right:0;background:#ca8a04}.preview-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);width:24px;height:24px;background:#fff;border-radius:50%}.game-card-content{padding:20px}.game-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.game-card-title{font-size:1.2rem;font-weight:800}.game-badge{padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.game-badge.active{background:#22c55e26;color:var(--green);border:1px solid rgba(34,197,94,.2)}.game-card-description{font-size:.85rem;color:var(--text2);margin-bottom:12px}.game-meta-row{display:flex;gap:14px;margin-bottom:12px}.meta-item{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--text3)}.betting-bar{background:#00000040;border-radius:10px;padding:10px;margin-bottom:14px}.bet-chips,.bet-options-mini{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.bet-chip{padding:5px 12px;border-radius:8px;font-size:.75rem;font-weight:700;background:#ffffff0d;border:1px solid var(--border);color:var(--text3)}.bet-chip.active{background:#fbbf2426;border-color:var(--gold);color:var(--gold)}.game-actions{display:flex;gap:6px;flex-wrap:nowrap}.btn-play{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 8px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;font-weight:700;font-size:.8rem;cursor:pointer;transition:.2s;font-family:inherit}.btn-play:hover{transform:translateY(-2px);box-shadow:0 6px 16px #a855f74d}.btn-rooms{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 8px;border-radius:10px;border:1px solid var(--border);background:#ffffff0d;color:var(--text2);font-weight:700;font-size:.8rem;cursor:pointer;transition:.2s;font-family:inherit}.btn-rooms:hover{background:#ffffff1a;color:var(--text)}.btn-rooms.active{background:#a855f726;border-color:#a855f766;color:var(--purple)}.btn-1v1{background:linear-gradient(135deg,#ff6b6b,#ee5a5a)!important;border:none!important;color:#fff!important}.btn-1v1:hover{box-shadow:0 6px 16px #ff6b6b4d}.game-card.expanded{border-color:#a855f74d;box-shadow:0 20px 40px #0006,0 0 0 1px #a855f71a}.rooms-inline{padding:0 20px 20px;border-top:1px solid var(--border);margin-top:4px;animation:.3s slideUp}.rooms-inline-header{display:flex;justify-content:space-between;align-items:center;padding:14px 0 10px}.rooms-inline-title{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--text2)}.btn-create-inline{display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:10px;border:1px solid rgba(168,85,247,.3);background:#a855f71a;color:var(--purple);font-weight:700;font-size:.78rem;cursor:pointer;transition:.2s;font-family:inherit}.btn-create-inline:hover{background:#a855f733}.empty-rooms-mini{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px;color:var(--text3);text-align:center}.empty-rooms-mini p{font-size:.85rem}.rooms-section{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:20px;margin-bottom:28px;display:none}.rooms-section.visible{display:block}.rooms-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.room-tab{padding:8px 18px;border-radius:10px;border:1px solid var(--border);background:0 0;color:var(--text3);font-weight:700;font-size:.8rem;cursor:pointer;transition:.2s;font-family:inherit}.room-tab.active{background:#a855f726;border-color:#a855f74d;color:var(--purple)}.rooms-list{display:flex;flex-direction:column;gap:10px}.room-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:#ffffff08;border:1px solid var(--border);border-radius:14px;transition:.2s}.room-item:hover{background:#ffffff0d;border-color:#a855f733}.room-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.room-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.room-icon.uno{background:linear-gradient(135deg,#dc2626,#991b1b)}.room-icon.parques{background:linear-gradient(135deg,#b45309,#92400e)}.room-details{min-width:0}.room-details h3{font-size:.9rem;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-details p{font-size:.75rem;color:var(--text3);margin-bottom:4px}.room-tags{display:flex;gap:5px}.tag{padding:2px 8px;border-radius:6px;font-size:.7rem;font-weight:700}.tag.mode{background:#a855f726;color:var(--purple)}.room-bet{display:flex;align-items:center;gap:5px;color:var(--gold);font-weight:700;font-size:.85rem;flex-shrink:0}.room-players{font-size:.8rem;color:var(--text3);flex-shrink:0}.btn-join{display:flex;align-items:center;gap:5px;padding:8px 18px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;font-weight:700;font-size:.8rem;cursor:pointer;transition:.2s;font-family:inherit;flex-shrink:0}.btn-join:hover{transform:scale(1.05)}.btn-join.full{background:#ffffff0d;color:var(--text3);cursor:not-allowed;transform:none}.room-players-bar{display:flex;align-items:center;gap:8px}.players-avatars{display:flex;gap:-6px}.mini-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;border:2px solid var(--card);margin-left:-6px}.mini-avatar:first-child{margin-left:0}.mini-avatar.empty{background:#ffffff0d;border-color:#ffffff1a}.btn-refresh.spinning{animation:1s linear infinite spin}.empty-rooms{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px;color:var(--text3);text-align:center}.spinner{width:28px;height:28px;border:3px solid rgba(168,85,247,.2);border-top-color:var(--purple);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-create-room{width:100%;margin-top:14px;padding:14px;border-radius:14px;border:2px dashed var(--border);background:#a855f70d;color:var(--purple);font-weight:700;font-size:.9rem;cursor:pointer;transition:.2s;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px}.btn-create-room:hover{background:#a855f71a;border-style:solid;border-color:#a855f74d}.info-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}.info-card{display:flex;align-items:center;gap:14px;padding:18px;background:var(--card);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:.2s}.info-card:hover{border-color:#a855f733}.info-icon{width:40px;height:40px;border-radius:10px;background:#a855f726;display:flex;align-items:center;justify-content:center;color:var(--purple);flex-shrink:0}.info-content{flex:1}.info-content h4{font-size:.9rem;font-weight:700;margin-bottom:3px}.info-content p{font-size:.78rem;color:var(--text3)}.info-arrow{color:var(--text3);flex-shrink:0;transition:.2s}.info-card:hover .info-arrow{color:var(--purple);transform:translate(4px)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-overlay.active{display:flex}.modal-content{background:linear-gradient(180deg,#1a1a2e,#0f0f1e);border:1px solid var(--border);border-radius:20px;padding:24px;max-width:420px;width:100%;box-shadow:0 20px 60px #00000080;animation:.3s slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-title{display:flex;align-items:center;gap:8px;font-size:1.2rem;font-weight:800}.btn-close,.btn-close-modal{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:#ffffff0d;color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.btn-close-modal:hover,.btn-close:hover{background:#ffffff1a;color:var(--text)}.form-group{margin-bottom:16px}.form-label{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--text2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.form-select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0003;color:var(--text);font-size:.9rem;font-family:inherit;outline:0}.form-select:focus{border-color:var(--purple);box-shadow:0 0 0 3px #a855f71a}.bet-options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bet-option-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:12px;border:2px solid var(--border);background:#0003;color:var(--text2);font-weight:700;font-size:.85rem;cursor:pointer;transition:.2s;font-family:inherit}.bet-option-btn.selected{border-color:var(--gold);background:#fbbf241a;color:var(--gold)}.toggle-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.toggle-label{font-size:.85rem;color:var(--text2)}.toggle-switch{position:relative;width:44px;height:24px;display:inline-block}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff1a;border-radius:24px;transition:.3s;border:1px solid var(--border);cursor:pointer}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.3s}input:checked+.toggle-slider{background:var(--purple);border-color:var(--purple)}input:checked+.toggle-slider:before{transform:translate(20px)}.modal-buttons{display:flex;gap:10px;margin-top:20px}.btn-modal{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:12px;border:none;font-weight:700;font-size:.85rem;cursor:pointer;transition:.2s;font-family:inherit}.btn-modal.primary{background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff}.btn-modal.primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #a855f74d}.btn-modal.secondary{background:#ffffff0d;color:var(--text2);border:1px solid var(--border)}.btn-modal.secondary:hover{background:#ffffff1a;color:var(--text)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);padding:12px 24px;border-radius:14px;font-weight:700;font-size:.85rem;z-index:2000;display:none;align-items:center;gap:8px;box-shadow:0 10px 40px #0006;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);animation:.3s toastSlide}.toast.success{background:#22c55ef2;color:#fff}.toast.error{background:#ef4444f2;color:#fff}.toast.info{background:#a855f7f2;color:#fff}@keyframes toastSlide{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}@media (max-width:768px){.lobby-header{flex-direction:column;text-align:center}.lobby-stats{width:100%;justify-content:center}.games-grid{grid-template-columns:1fr}.game-actions{flex-direction:row}.room-item{flex-direction:column;align-items:flex-start;gap:10px}.btn-join{width:100%;justify-content:center}.bet-options-grid{grid-template-columns:repeat(2,1fr)}.info-section{grid-template-columns:1fr}.modal-content{padding:20px}}@media (max-width:420px){.lobby-container{padding:16px 12px}.game-actions{flex-wrap:wrap}.btn-1v1,.btn-play,.btn-rooms{min-width:calc(50% - 3px);font-size:.75rem}}