@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--surface:#0d0f0f;--surface-container-lowest:#000;--surface-container-low:#121414;--surface-container:#181a1a;--surface-container-high:#1d2020;--surface-container-highest:#232626;--surface-bright:#2a2d2d;--primary:#a6ffb6;--primary-container:#00fd7e;--primary-dim:#00ee76;--on-primary-container:#000;--secondary-fixed:#f7e600;--on-secondary-fixed:#1a1800;--on-surface:#f4f3f3;--on-surface-variant:#888a8a;--background:#0d0f0f;--outline:#ffffff0f;--outline-variant:#ffffff1f;--error:#ff7351;--font-headline:"Barlow Condensed", sans-serif;--font-body:"Manrope", sans-serif;--ease-out:cubic-bezier(.22, 1, .36, 1)}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle;line-height:1}body{font-family:var(--font-body);background:var(--background);color:var(--on-surface);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}body:before{content:"";z-index:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:200px 200px;position:fixed;inset:0}.main,header,footer,.modal-overlay{z-index:1;position:relative}.main{grid-template-columns:1fr 296px;align-items:start;gap:24px;max-width:1400px;margin:0 auto;padding:28px 32px;display:grid}.main-left{flex-direction:column;gap:24px;display:flex}.hero-section{border:1px solid var(--outline);background:linear-gradient(135deg,#00ff8c14,#0009);border-radius:20px;padding:28px;transition:border-color .2s;position:relative;overflow:hidden;box-shadow:0 8px 32px -8px #0009,inset 0 1px #ffffff05}@media (hover:hover) and (pointer:fine){.hero-section:hover{border-color:var(--outline-variant);border-left-color:var(--primary-container)}}.hero-bg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;right:0}.hero-bg img{object-fit:cover;opacity:.08;width:100%;height:100%}.hero-bg:after{content:"";background:linear-gradient(to right, var(--surface-container-low) 20%, transparent);position:absolute;inset:0}.hero-content{z-index:1;position:relative}.hero-greeting{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:3px;color:var(--on-surface-variant);align-items:center;gap:10px;margin-bottom:6px;font-size:11px;font-weight:700;display:flex}.hero-greeting:before{content:"";background:var(--primary-container);width:20px;height:2px}.hero-title{font-family:var(--font-headline);text-transform:uppercase;margin-bottom:22px;font-size:clamp(32px,4vw,52px);font-weight:900;line-height:.95}.hero-title em{color:var(--primary);font-style:normal}.hero-stats{gap:24px;margin-top:20px;display:flex}.hero-stat{background:#ffffff08;border-radius:12px;min-width:110px;padding:14px 18px}.hero-stat-label{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:2.5px;color:var(--on-surface-variant);margin-bottom:4px;font-size:10px;font-weight:600}.hero-stat-value{font-family:var(--font-headline);letter-spacing:-.5px;font-size:36px;font-weight:900;line-height:1}.hero-stat-value.yellow{color:var(--secondary-fixed)}.hero-stat-value.green{color:var(--primary-container)}.hero-stat-value sup{color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:1px;margin-left:4px;font-size:10px;font-weight:600}.sec-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.sec-title{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1.5px;align-items:center;gap:10px;font-size:16px;font-weight:800;display:flex}.sec-bar{background:var(--primary-container);border-radius:0;flex-shrink:0;width:4px;height:18px}.sec-link{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1px;color:var(--primary-container);cursor:pointer;background:0 0;border:none;font-size:11px;font-weight:700;text-decoration:none;transition:opacity .15s}@media (hover:hover) and (pointer:fine){.sec-link:hover{opacity:.6}}.solo-banner{background:var(--surface-container-low);border:1px solid var(--outline);border-left:4px solid var(--secondary-fixed);transition:transform .18s var(--ease-out), border-color .18s ease;will-change:transform;border-radius:4px;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 32px -8px #0009,inset 0 1px #ffffff05}@media (hover:hover) and (pointer:fine){.solo-banner:hover{border-color:var(--outline-variant);border-left-color:var(--secondary-fixed);transform:translateY(-1px)}}.solo-banner:active{transition-duration:80ms;transform:translateY(0)}.solo-eyebrow{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:3px;color:var(--secondary-fixed);align-items:center;gap:6px;margin-bottom:5px;font-size:10px;font-weight:700;display:flex}.solo-title{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:22px;font-weight:900;line-height:1}.solo-desc{font-family:var(--font-body);color:var(--on-surface-variant);max-width:400px;font-size:12px;line-height:1.5}.btn-ghost{border:2px solid var(--outline-variant);color:var(--secondary-fixed);font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;white-space:nowrap;background:0 0;border-radius:2px;flex-shrink:0;padding:9px 18px;font-size:11px;font-weight:700;transition:border-color .15s}@media (hover:hover) and (pointer:fine){.btn-ghost:hover{border-color:var(--secondary-fixed)}}.grupos-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.grupo-card{border:1px solid var(--outline);cursor:pointer;transition:transform .2s var(--ease-out), border-color .2s ease, box-shadow .2s ease;will-change:transform;background:#ffffff05;border-radius:14px;align-items:center;gap:12px;padding:14px;display:flex;box-shadow:0 8px 32px -8px #0009,inset 0 1px #ffffff05}@media (hover:hover) and (pointer:fine){.grupo-card:hover{border-color:#00ff8c4d;transform:translate(4px);box-shadow:0 12px 40px -10px #000c,inset 0 1px #ffffff0a}}.grupo-card:active{transition-duration:80ms;transform:translateY(0)}.grupo-icon{background:var(--surface-container-highest);width:40px;height:40px;color:var(--primary-container);border-radius:2px;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s;display:flex}@media (hover:hover) and (pointer:fine){.grupo-card:hover .grupo-icon{background:var(--surface-container-high)}}.grupo-name{font-family:var(--font-headline);letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;margin-bottom:3px;font-size:13px;font-weight:700;overflow:hidden}.grupo-pos{font-family:var(--font-body);text-transform:uppercase;color:var(--on-surface-variant);font-size:10px}.grupo-pos strong{color:var(--secondary-fixed);font-family:var(--font-headline);font-size:12px}.grupo-arrow{color:var(--on-surface-variant);transition:color .15s ease, transform .18s var(--ease-out);flex-shrink:0;margin-left:auto}@media (hover:hover) and (pointer:fine){.grupo-card:hover .grupo-arrow{color:var(--primary-container);transform:translate(3px)}}.grupo-empty{background:var(--surface-container-low);border:2px dashed var(--outline);text-align:center;color:var(--on-surface-variant);font-family:var(--font-body);border-radius:4px;grid-column:1/-1;padding:28px;font-size:13px}.grupo-empty strong{color:var(--on-surface);font-family:var(--font-headline);text-transform:uppercase;margin-bottom:4px;font-size:15px;font-weight:700;display:block}.jogos-grid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.match-card{transition:transform .2s var(--ease-out), border-color .2s ease, box-shadow .2s ease;will-change:transform;background:#ffffff05;border:1px solid #ffffff0d;border-radius:16px;box-shadow:0 8px 32px -8px #0009,inset 0 1px #ffffff05}@media (hover:hover) and (pointer:fine){.match-card:hover{border-color:#00ff8c4d;transform:translateY(-2px);box-shadow:0 12px 40px -10px #000c,inset 0 1px #ffffff0a}}.match-card:active{transition-duration:80ms;transform:translateY(0)}.match-card.won{border-left:3px solid var(--primary-container)}.match-card.live{border-left:3px solid var(--error)}.match-header{background:var(--surface-container);font-family:var(--font-headline);text-transform:uppercase;letter-spacing:2px;color:var(--on-surface-variant);border-radius:16px 16px 0 0;justify-content:space-between;align-items:center;padding:7px 14px;font-size:10px;font-weight:700;display:flex}.match-header.won-header{background:var(--surface-container-high);color:var(--primary-container)}.match-header.live-header{background:var(--surface-container-high);color:var(--error)}@keyframes live-pulse{0%,to{opacity:1}50%{opacity:.3}}.live-dot{background:var(--error);border-radius:50%;width:6px;height:6px;margin-right:4px;animation:1.4s ease-in-out infinite live-pulse;display:inline-block}.match-body{flex-direction:column;align-items:center;padding:18px 14px;display:flex}.match-teams{justify-content:center;align-items:center;gap:14px;width:100%;display:flex}.match-team{flex-direction:column;flex:1;align-items:center;gap:7px;display:flex}.team-flag{background:var(--surface-container-highest);border:1px solid var(--outline);width:52px;height:38px;transition:transform .18s var(--ease-out);will-change:transform;border-radius:2px;justify-content:center;align-items:center;font-size:26px;display:flex}@media (hover:hover) and (pointer:fine){.match-card:hover .team-flag{transform:scale(1.05)}}.team-flag.dimmed{filter:grayscale(.9);opacity:.4}@media (hover:hover) and (pointer:fine){.match-card:hover .team-flag.dimmed{transform:none}}.team-name{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:.5px;text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:80px;font-size:13px;font-weight:700;overflow:hidden}.match-score{flex-shrink:0;align-items:center;gap:7px;display:flex}.score-input{border:1px solid var(--outline);text-align:center;width:48px;height:54px;font-family:var(--font-headline);color:var(--primary-container);cursor:text;-moz-appearance:textfield;background:#0000004d;border-radius:4px;outline:none;font-size:28px;font-weight:900;transition:border-color .15s;box-shadow:inset 0 2px 4px #00000080}.score-input::-webkit-inner-spin-button{-webkit-appearance:none}.score-input::-webkit-outer-spin-button{-webkit-appearance:none}.score-input:focus{border-color:var(--primary-container)}.score-input::placeholder{color:var(--outline-variant);font-size:28px}.score-static{background:var(--surface-container);border:1px solid var(--outline);width:48px;height:54px;font-family:var(--font-headline);color:var(--on-surface);border-radius:2px;justify-content:center;align-items:center;font-size:32px;font-weight:900;display:flex}.score-sep{font-family:var(--font-headline);color:var(--outline-variant);font-size:18px;font-weight:700}.match-result-footer{border-top:1px solid var(--outline);justify-content:space-between;align-items:center;width:100%;margin-top:12px;padding-top:11px;display:flex}.result-label{font-family:var(--font-body);text-transform:uppercase;color:var(--on-surface-variant);letter-spacing:.5px;font-size:10px}.result-label strong{color:var(--on-surface);font-family:var(--font-headline)}.cravou{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1.5px;color:var(--on-primary-container);background:var(--primary-container);border-radius:2px;padding:3px 10px;font-size:10px;font-weight:900}.btn-match{width:100%;font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;transition:background .12s ease, border-color .12s ease, transform .12s var(--ease-out);will-change:transform;border-radius:2px;margin-top:13px;padding:10px;font-size:11px;font-weight:900}.btn-match:active{transition-duration:80ms;transform:scale(.98)}.btn-match-primary{background:linear-gradient(180deg, var(--primary-container) 0%, #00d66a 100%);color:var(--on-primary-container);border:1px solid #a6ffb6;box-shadow:0 2px 8px #00fd7e33}@media (hover:hover) and (pointer:fine){.btn-match-primary:hover{background:linear-gradient(180deg, #1aff8c 0%, var(--primary-container) 100%);box-shadow:0 4px 12px #00fd7e4d}}.btn-match-outline{border:2px solid var(--primary-container);color:var(--primary-container);background:0 0}@media (hover:hover) and (pointer:fine){.btn-match-outline:hover{background:#00fd7e14}}.btn-match-ghost{border:2px solid var(--outline);color:var(--on-surface-variant);background:0 0;flex-shrink:0;padding:0 10px}@media (hover:hover) and (pointer:fine){.btn-match-ghost:hover{border-color:var(--outline-variant);color:var(--on-surface)}}.match-empty{text-align:center;background:var(--surface-container-low);border:2px dashed var(--outline);color:var(--on-surface-variant);font-family:var(--font-body);border-radius:4px;grid-column:1/-1;padding:32px;font-size:13px}.match-empty strong{color:var(--on-surface);font-family:var(--font-headline);text-transform:uppercase;margin-bottom:4px;font-size:15px;font-weight:700;display:block}.ranking-card{background:var(--surface-container-low);border:1px solid var(--outline);border-radius:4px;padding:18px;position:sticky;top:20px;box-shadow:0 8px 32px -8px #0009,inset 0 1px #ffffff05}.rank-title{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:2px;align-items:center;gap:8px;margin-bottom:14px;font-size:16px;font-weight:800;display:flex}.rank-tabs{background:var(--surface-container);border:1px solid var(--outline);border-radius:2px;gap:2px;margin-bottom:14px;padding:3px;display:flex}.rank-tab{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1px;text-align:center;cursor:pointer;color:var(--on-surface-variant);background:0 0;border:none;border-radius:1px;flex:1;padding:6px;font-size:11px;font-weight:700;transition:background .12s,color .12s}.rank-tab.active{background:var(--primary-container);color:var(--on-primary-container)}.rank-list{flex-direction:column;display:flex}.rank-item{cursor:default;border-left:3px solid #0000;align-items:center;gap:10px;padding:9px 10px;transition:background .1s;display:flex}@media (hover:hover) and (pointer:fine){.rank-item:hover{background:var(--surface-container)}}.rank-item.highlight{background:linear-gradient(90deg,#ffd70026,#0000);border-radius:10px}.rank-item.me{border-left:3px solid var(--primary-container);background:linear-gradient(90deg,#00fd7e14 0%,#0000 100%);border-radius:0 4px 4px 0}.rank-num{font-family:var(--font-headline);text-align:center;width:28px;color:var(--on-surface-variant);flex-shrink:0;font-size:20px;font-weight:900;line-height:1}.rank-num.top1{color:var(--secondary-fixed)}.rank-av{background:var(--surface-container-highest);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:15px;display:flex;overflow:hidden}.rank-av.me-ring{box-shadow:0 0 0 2px var(--background), 0 0 0 4px var(--primary-container)}.rank-info{flex:1;min-width:0}.rank-name{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;overflow:hidden}.rank-name.me-name{color:var(--primary-container)}.rank-loc{font-family:var(--font-body);color:var(--on-surface-variant);font-size:10px}.rank-score{font-family:var(--font-headline);color:var(--on-surface-variant);flex-shrink:0;font-size:16px;font-weight:800}.rank-divider{border:none;border-top:1px solid var(--outline);margin:6px 0}.btn-see-all{border:2px solid var(--outline);width:100%;color:var(--on-surface-variant);font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;background:0 0;border-radius:2px;margin-top:12px;padding:10px;font-size:11px;font-weight:700;transition:border-color .15s,color .15s}@media (hover:hover) and (pointer:fine){.btn-see-all:hover{border-color:var(--secondary-fixed);color:var(--secondary-fixed)}}.modal-overlay{z-index:100;background:#000000d9;justify-content:center;align-items:center;animation:.12s both fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface-container-low);border:1px solid var(--outline);border-top:4px solid var(--primary-container);width:100%;max-width:420px;animation:slideUp .2s var(--ease-out) both;border-radius:4px;padding:28px}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-title{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;font-size:28px;font-weight:900;line-height:1}.modal-desc{font-family:var(--font-body);color:var(--on-surface-variant);margin-bottom:22px;font-size:13px;line-height:1.5}.modal-tabs{background:var(--surface-container);border:1px solid var(--outline);border-radius:2px;gap:2px;margin-bottom:22px;padding:3px;display:flex}.modal-tab{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1px;text-align:center;cursor:pointer;color:var(--on-surface-variant);background:0 0;border:none;border-radius:1px;flex:1;padding:9px;font-size:12px;font-weight:700;transition:background .12s,color .12s}.modal-tab.active{background:var(--primary-container);color:var(--on-primary-container)}.form-label{font-family:var(--font-headline);text-transform:uppercase;letter-spacing:2px;color:var(--on-surface-variant);margin-bottom:7px;font-size:10px;font-weight:700;display:block}.form-input{background:var(--surface-container);border:2px solid var(--outline);width:100%;color:var(--on-surface);font-family:var(--font-body);border-radius:2px;outline:none;margin-bottom:16px;padding:12px 14px;font-size:14px;transition:border-color .15s}.form-input:focus{border-color:var(--primary-container)}.form-input::placeholder{color:var(--outline-variant)}.modal-actions{gap:10px;display:flex}.modal-cancel{border:2px solid var(--outline);color:var(--on-surface-variant);font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1px;cursor:pointer;background:0 0;border-radius:2px;flex:1;padding:12px;font-size:12px;font-weight:700;transition:border-color .15s,color .15s}@media (hover:hover) and (pointer:fine){.modal-cancel:hover{border-color:var(--outline-variant);color:var(--on-surface)}}.modal-confirm{background:linear-gradient(180deg, var(--primary-container) 0%, #00d66a 100%);color:var(--on-primary-container);font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;transition:background .12s ease, box-shadow .12s ease, transform .12s var(--ease-out);will-change:transform;border:1px solid #a6ffb6;border-radius:2px;flex:2;padding:12px;font-size:12px;font-weight:900;box-shadow:0 2px 8px #00fd7e33}@media (hover:hover) and (pointer:fine){.modal-confirm:hover{background:linear-gradient(180deg, #1aff8c 0%, var(--primary-container) 100%);box-shadow:0 4px 12px #00fd7e4d}}.modal-confirm:active{transition-duration:80ms;transform:scale(.98)}.modal-confirm:disabled{opacity:.5;cursor:not-allowed}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.toast{z-index:200;background:var(--primary-container);font-family:var(--font-headline);text-transform:uppercase;letter-spacing:1px;color:#000;animation:toast-in .2s var(--ease-out) both;border-radius:4px;align-items:center;gap:8px;padding:11px 18px;font-size:13px;font-weight:900;display:flex;position:fixed;bottom:24px;right:24px}.toast.toast-err{background:var(--surface-container-high);border:1px solid var(--error);color:var(--error)}.skel{background:var(--surface-container);animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.7}50%{opacity:.25}}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fadeUp .3s var(--ease-out) both}.fade-up-1{animation:fadeUp .3s var(--ease-out) 50ms both}.fade-up-2{animation:fadeUp .3s var(--ease-out) .1s both}.fade-up-3{animation:fadeUp .3s var(--ease-out) .15s both}.fade-up-4{animation:fadeUp .3s var(--ease-out) .2s both}@media (prefers-reduced-motion:reduce){.fade-up,.fade-up-1,.fade-up-2,.fade-up-3,.fade-up-4{opacity:1;animation:none}.match-card,.grupo-card,.solo-banner{will-change:auto;transition:border-color .15s}.modal,.modal-overlay,.toast{animation:none}.skel{opacity:.4;animation:none}.live-dot{opacity:1;animation:none}.btn-match:active,.modal-confirm:active,.grupo-card:active,.solo-banner:active{transform:none}}@media (max-width:1080px){.main{grid-template-columns:1fr}}@media (max-width:640px){.main{padding:16px}.jogos-grid,.grupos-grid{grid-template-columns:1fr}.hero-stat-value{font-size:28px}.hero-stats{flex-wrap:wrap;gap:12px}}
