/* Bloquear "Force dark mode" do Samsung Internet / Chrome Android. Declarar color-scheme dark no avisa o browser que o site já é escuro e não precisa de ser invertido. Funciona em Samsung Internet 14+ e Chrome 81+. */ html{color-scheme: dark;} /* Touch UX globais: remover o flash azul que o iOS/Android desenha no toque */ *{-webkit-tap-highlight-color:transparent;} /* Em devices touch (sem hover real), os :hover ficam "presos" depois do toque, dando a sensação de que outros elementos ficam destacados após interagir com um. Por isso desactivamos APENAS os :hover persistentes — o estado :active (durante o toque) continua a funcionar para feedback imediato. Truque: usamos @media (hover:hover) na regra original para que o :hover só apareça em devices com mouse. Em touch, nem chega a aplicar. Para que isto funcione, as regras já existentes ".X:hover{...}" passam a estar dentro de @media(hover:hover) — feito de forma cirúrgica abaixo. */ @media (hover:none){ /* Apagar APENAS o background residual de hover em elementos clicáveis. Não mexer em transform, color, ou border porque estes podem fazer parte do design intencional. Se algum :hover for visível em mobile, aplica-se a estas zonas. */ .mc:hover, .lbi:hover, .pcard:hover, .pcard.done:hover, .pcard.draft:hover, .ajornada-card:hover, .smenu-btn:hover, .mobile-menu-btn:hover, .lb-filter-btn:hover, .tab-btn:hover, .ptab:hover, .mtab:hover, .fi-btn:hover, .pclose:hover, .mclose:hover, .side-menu-close:hover, .notif-bell:hover, .notif-item:hover, .cal-match-row:hover, .bracket-match:hover, .card-item:hover{ background:inherit; transform:none; } /* Restaurar visualmente os elementos que ESTÃO seleccionados/activos */ .tb-btn.active{color:var(--gold) !important;} .smenu-btn.active{background:rgba(240,165,0,.14) !important;border-color:rgba(240,165,0,.3) !important;color:var(--gold) !important;} .tab-btn.active{color:var(--gold) !important;} .lb-filter-btn.active{background:var(--gold) !important;color:#000 !important;border-color:var(--gold) !important;} .ptab.active,.mtab.active{color:var(--gold) !important;} } :root{ color-scheme: dark; --bg:#060c1a;--bg2:#0d1526;--bg3:#14203a;--bg4:#1a2a48; --gold:#f0a500;--gold2:#ffd060; --blue:#00b4d8;--green:#00e676;--red:#ff4d6d;--purple:#a855f7; --text:#edf2fa;--muted:#9babc2;--muted2:#556881; --border:rgba(255,255,255,.07);--card:rgba(255,255,255,.04); --r:12px; /* Tipografia — Outfit (geométrica elegante e esbelta) */ --fd:'Outfit',system-ui,sans-serif; /* DISPLAY — títulos, hero */ --fx:'Outfit',system-ui,sans-serif; /* NUMERAIS — scores, pontos */ --fu:'Outfit',system-ui,sans-serif; /* UI — labels, botões, meta */ --fc:'Outfit',system-ui,sans-serif; /* MICRO */ --fb:'Outfit',system-ui,sans-serif; /* BODY — texto corrente */ } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:var(--bg);color:var(--text);font-family:'Outfit',system-ui,sans-serif;font-weight:400;min-height:100vh;} body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 100% 60% at 50% -5%,rgba(240,165,0,.14) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 90% 90%,rgba(0,180,216,.09) 0%,transparent 55%),radial-gradient(ellipse 40% 40% at 10% 70%,rgba(168,85,247,.06) 0%,transparent 55%);} .btn{font-family:var(--fu);font-weight:600;letter-spacing:.5px;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;transition:all .2s;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;} .btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000;padding:9px 22px;} .btn-gold:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(240,165,0,.45);} .btn-ghost{background:var(--card);color:var(--text);padding:9px 18px;border:1px solid var(--border);} .btn-ghost:hover{border-color:var(--gold);color:var(--gold);} .btn-sm{padding:6px 14px;font-size:.78rem;} .btn-danger{background:rgba(255,77,109,.1);color:var(--red);border:1px solid rgba(255,77,109,.2);} .btn-danger:hover{background:rgba(255,77,109,.2);} .btn-full{width:100%;justify-content:center;padding:14px;font-size:1rem;} /* HEADER */ header{position:sticky;top:0;z-index:300;background:rgba(6,12,26,.94);backdrop-filter:blur(22px);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top, 0px);} .hdr{max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:66px;} .logo{display:flex;align-items:center;gap:12px;min-width:0;} .logo-text{min-width:0;overflow:hidden;} .logo-t{width:44px;height:44px;flex-shrink:0;} .logo-name{font-family:var(--fd);font-weight:700;font-size:1.3rem;letter-spacing:-.2px;background:linear-gradient(135deg,var(--gold),var(--gold2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;white-space:nowrap;} .logo-sub{font-family:var(--fu);font-size:.6rem;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-top:1px;white-space:nowrap;} .hdr-r{display:flex;gap:8px;align-items:center;} .upill{display:flex;align-items:center;gap:8px;background:rgba(240,165,0,.08);border:1px solid rgba(240,165,0,.25);border-radius:20px;padding:5px 14px 5px 6px;font-family:var(--fu);font-size:.85rem;color:var(--gold);} .upill .upill-first{display:none;} /* em desktop usa-se o nome completo */ .uav{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#000;font-weight:700;} /* FLAGS */ .fi{border-radius:4px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.5);flex-shrink:0;} .fi-sm{width:54px;height:36px;} .fi-md{width:76px;height:50px;} .fi-lg{width:120px;height:80px;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.6);} .fi-xs{width:28px;height:19px;border-radius:2px;} /* MAIN */ main{max-width:1280px;margin:0 auto;padding:2rem;position:relative;z-index:1;} /* HERO */ .hero{text-align:center;padding:.5rem 0 1.5rem;} .hero.hero-has-dash{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;text-align:left;align-items:center;padding:.5rem 0 1.5rem;} .hero.hero-has-dash .hero-badge{justify-self:start;} .hero.hero-has-dash .hero-hosts{justify-content:flex-start;} .hero.hero-has-dash h1{text-align:left;} .hero.hero-has-dash p{text-align:left;} .hero.hero-has-dash .wc-emblem{margin:.8rem 0 1rem;justify-content:flex-start;} .hero.hero-has-dash #heroDashboard{grid-column:2;grid-row:1 / span 10;align-self:center;} .hero.hero-has-dash .hero-img{margin:0 0 1rem;} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.2);border-radius:20px;padding:5px 16px;font-family:var(--fu);font-size:.75rem;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:1.2rem;font-weight:500;} .hero h1{font-family:var(--fd);font-weight:800;font-size:clamp(2.4rem,6.8vw,4.8rem);letter-spacing:-1.5px;line-height:.9;background:linear-gradient(160deg,#fff 0%,var(--gold) 55%,var(--gold2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.6rem;} .hero-hosts{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:.8rem;} .hero-hosts .fi{width:32px;height:21px;border-radius:3px;} .hero p{font-family:var(--fu);color:var(--muted);font-size:.95rem;letter-spacing:3px;text-transform:uppercase;font-weight:400;} .wc-emblem{display:flex;justify-content:center;align-items:center;margin:.8rem auto 1.2rem;filter:drop-shadow(0 8px 24px rgba(240,165,0,.25));} .wc-emblem svg{width:auto;height:140px;max-width:100%;display:block;} /* ════════════════════════════════════════ NEWSROOM — JORNAL DESPORTIVO (Home tab) ══════════════════════════════════════ */ /* Variáveis para a "stack" sticky (header + tabs-nav) em desktop */ :root{--header-h:66px;--tabs-nav-h:60px;} /* Gap entre tabs-nav e masthead — praticamente inexistente */ #tab-home{padding-top:0 !important;} #tab-home .newsroom{margin-top:0 !important;} /* Dashboard do utilizador autenticado (entre masthead e manchete) */ #tab-home #heroDashboard{margin:1.2rem 0 2rem;} /* Em mobile, o card "O Meu Ranking" passa para o menu lateral — escondemos aqui */ @media (max-width:768px){ #tab-home #heroDashboard{display:none !important;} } /* Tipografia do jornal — Oswald para títulos, Outfit para corpo */ .newsroom{--fn:'Oswald','Outfit',system-ui,sans-serif;} /* ─── BLOCO DA IMAGEM — desaparece com o scroll ─── */ .np-hero-image{text-align:center;} .np-brand-img{display:block;max-width:min(380px,72%);width:100%;height:auto;margin:0 auto;filter:drop-shadow(0 8px 24px rgba(240,165,0,.25));} /* Botão "Conhecer mascotes" dentro do sticky de Cartas Coleccionáveis */ .mascots-btn{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.7rem; padding:.45rem 1rem; background:linear-gradient(135deg, rgba(240,165,0,.12), rgba(240,165,0,.06)); border:1px solid rgba(240,165,0,.35); border-radius:999px; color:var(--gold); font-family:var(--fu); font-size:.72rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; cursor:pointer; transition:all .2s ease; } .mascots-btn:hover{ background:linear-gradient(135deg, rgba(240,165,0,.22), rgba(240,165,0,.12)); border-color:rgba(240,165,0,.6); box-shadow:0 4px 14px rgba(240,165,0,.18); transform:translateY(-1px); } .mascots-btn-ic{font-size:.85rem;line-height:1;} /* Modal "Conhecer mascotes" — vista de grelha (previews) */ .mascots-thumbs{ display:grid; /* 6 colunas virtuais para conseguir 2 em cima (3 cols cada) + 3 em baixo (2 cols cada) */ grid-template-columns:repeat(6, 1fr); gap:1rem; padding:.4rem 0 .2rem; max-width:520px; margin:0 auto; } /* Linha 1 (Paulo + Galo): 2 retratos, 2 cols cada, centrados (offset de 1 col) */ .mascots-thumbs > .mascot-thumb:nth-child(1){ grid-column:2 / span 2; } .mascots-thumbs > .mascot-thumb:nth-child(2){ grid-column:4 / span 2; } /* Linha 2 (Maple + Clutch + Zayu): 3 retratos, 2 cols cada */ .mascots-thumbs > .mascot-thumb:nth-child(3), .mascots-thumbs > .mascot-thumb:nth-child(4), .mascots-thumbs > .mascot-thumb:nth-child(5){ grid-column:span 2; } /* Em ecrãs muito estreitos, fallback para coluna única */ @media (max-width:380px){ .mascots-thumbs{ grid-template-columns:repeat(2, 1fr); max-width:none; } .mascots-thumbs > .mascot-thumb:nth-child(1), .mascots-thumbs > .mascot-thumb:nth-child(2), .mascots-thumbs > .mascot-thumb:nth-child(3), .mascots-thumbs > .mascot-thumb:nth-child(4), .mascots-thumbs > .mascot-thumb:nth-child(5){ grid-column:span 1; } } .mascot-thumb{ display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:.6rem .4rem; background:transparent; border:none; cursor:pointer; transition:transform .2s ease; border-radius:12px; font-family:inherit; color:inherit; } .mascot-thumb:hover{ transform:translateY(-3px); background:rgba(240,165,0,.05); } .mascot-thumb-img{ width:88px; height:88px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 35% 30%, rgba(240,165,0,.16) 0%, rgba(255,255,255,.02) 60%, transparent 100%); border:2px double rgba(240,165,0,.5); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 14px rgba(240,165,0,.06), 0 4px 12px rgba(0,0,0,.3); transition:border-color .2s ease, box-shadow .2s ease; } .mascot-thumb:hover .mascot-thumb-img{ border-color:rgba(240,165,0,.85); box-shadow:inset 0 0 18px rgba(240,165,0,.12), 0 6px 18px rgba(240,165,0,.18); } .mascot-thumb-img img{ width:100%; height:100%; object-fit:cover; } .mascot-thumb-emoji{ font-size:2.4rem; filter:drop-shadow(0 3px 6px rgba(0,0,0,.4)); } .mascot-thumb-name{ font-family:var(--fn); font-size:.85rem; font-weight:700; color:var(--gold); letter-spacing:.4px; text-align:center; line-height:1.1; } /* Modal "Conhecer mascotes" — vista de detalhe */ .mascot-detail{ animation:fadeUp .25s ease; } .mascot-detail-content{ text-align:center; } .mascot-detail-img{ margin:0 auto 1.1rem; display:flex; align-items:center; justify-content:center; height:280px; position:relative; } /* Glow dourado por trás do figurino — cria "halo" que destaca a mascote */ .mascot-detail-img::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 55%, rgba(240,165,0,.28) 0%, rgba(240,165,0,.12) 35%, transparent 70%); pointer-events:none; z-index:0; filter:blur(8px); } .mascot-detail-img img{ height:100%; width:auto; position:relative; z-index:1; filter:drop-shadow(0 8px 24px rgba(0,0,0,.4)) drop-shadow(0 0 14px rgba(240,165,0,.18)); } .mascot-detail-emoji{ font-size:4.5rem; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); } .mascot-detail-name{ font-family:var(--fn); font-size:1.5rem; font-weight:700; color:var(--gold); letter-spacing:.6px; margin:0 0 .3rem; } .mascot-detail-role{ font-family:var(--fu); font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:1.4px; text-transform:uppercase; margin-bottom:1rem; } .mascot-detail-desc{ font-size:.92rem; line-height:1.55; color:var(--text); margin:0; padding:0 .4rem; } /* ─── MASTHEAD COMPACTO — sempre sticky (global), top muda por breakpoint ─── */ :root{--sticky-top:var(--header-h);} /* default mobile: só header */ .np-masthead{position:sticky;top:var(--sticky-top);z-index:100;text-align:center;margin:0 0 1.5rem;padding:.3rem .2rem .2rem;background:rgba(6,12,26,.85);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);} /* Fade gradiente acima do masthead — para o gold glow da imagem não ser cortado a direito */ .np-masthead::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:32px;background:linear-gradient(to bottom,rgba(6,12,26,0),rgba(6,12,26,.85));pointer-events:none;} .np-masthead-rule{height:0;border-top:3px double rgba(255,255,255,.65);} /* Variante "capa de revista" sem hero (usado em Cartas). Sticky como o do Início, mas o título precisa de respirar menos no topo porque não há hero image acima. */ .np-masthead-cards{ /* Padding interno em vez de offset externo, para o blur do sticky cobrir todo o espaço (sem fenda transparente entre header e título). */ padding-top: .5rem; padding-bottom: .5rem; margin-bottom: 1.5rem; } @media (max-width: 768px){ /* Em mobile o
é mais compacto que o desktop. Ajustar --header-h para o tamanho real medido (62px porque o logo-name passou a 2 linhas). */ :root{--header-h:62px;} } .np-masthead-cards::before{ /* O ::before do .np-masthead base desenha um gradient de 32px de altura ACIMA do masthead (bottom:100%). Era para fazer fade-in com o hero do Diário da Liga. Na variante "capa de revista" não há hero, logo este gradient cria um espaço fantasma com tom escuro que parece um buraco. Forçamos a desactivação completa. */ display: none !important; content: none !important; height: 0 !important; background: none !important; } .np-masthead-cards .np-title{ margin: 0; padding-top: 0; } .np-masthead-cards .np-tagline{ margin-top: .5rem; } /* Masthead com barra de filtros embutida (Mundial, Fantasy) */ .np-masthead-with-filters .np-masthead-filters{ margin-top: .8rem; display: flex; flex-wrap: wrap; justify-content: center; } .np-masthead-with-filters .np-masthead-filters .trow, .np-masthead-with-filters .np-masthead-filters .lb-filter-wrap{ margin: 0; flex: 1 1 100%; justify-content: center; } @media (max-width: 760px){ /* Permitir scroll horizontal nos botões em mobile sem rebentar layout. Centrar quando cabem (Mundial — 3 botões); se não couberem (Fantasy — 8), o flex-wrap deixa-os caber em 2 linhas centradas. */ .np-masthead-with-filters .np-masthead-filters{ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; justify-content: center; padding: 0 .5rem; } .np-masthead-with-filters .np-masthead-filters .trow, .np-masthead-with-filters .np-masthead-filters .lb-filter-wrap{ flex-wrap: wrap; justify-content: center; } .np-masthead-with-filters .np-masthead-filters::-webkit-scrollbar{display: none;} } /* Reduzir padding-top dos tabs que usam o masthead capa-de-revista. ATENÇÃO: usa !important para vencer regras mobile que estavam a aplicar padding extra. Sem isto havia gap escuro entre header e título no mobile. */ #tab-cards, #tab-jogos, #tab-calendario, #tab-mundial, #tab-fantasy, #tab-predicts{padding-top: 0 !important;} /* Linha única: edição (esquerda) | título (centro) | data (direita), tudo alinhado ao topo */ .np-masthead-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:1rem;padding:.2rem 0;} .np-edition{justify-self:start;} .np-date{justify-self:end;} .np-edition,.np-date{font-family:var(--fu);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-weight:500;padding-top:.5rem;} /* Título do diário — destaque do masthead */ .np-title{font-family:var(--fn);font-weight:700;font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:-.5px;text-transform:uppercase;background:linear-gradient(160deg,#fff 0%,var(--gold) 60%,var(--gold2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;line-height:1.05;text-align:center;padding-top:.05em;} /* Subtítulo discreto */ .np-tagline{font-family:var(--fu);font-size:.6rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted);font-weight:500;margin-top:.5rem;opacity:.75;} /* ─── MANCHETE (front-page lead) ─── */ .np-manchete{position:relative;background:linear-gradient(180deg,rgba(240,165,0,.05) 0%,rgba(255,255,255,.012) 100%);border-top:3px solid var(--gold);border-bottom:1px solid var(--border);padding:1.6rem 1.8rem 1.6rem;margin-bottom:2rem;} /* Split layout: texto à esquerda, figurino à direita (desktop) */ .np-manchete-top{display:flex;gap:2rem;align-items:flex-start;margin-bottom:.4rem;} .np-manchete-text{flex:1;min-width:0;} .np-figurino{flex-shrink:0;width:200px;margin:0;text-align:center;} .np-figurino-frame{position:relative;width:160px;height:160px;margin:0 auto .9rem;border-radius:50%;border:2px double rgba(240,165,0,.7);background:radial-gradient(circle at 35% 30%,rgba(240,165,0,.15) 0%,rgba(255,255,255,.02) 60%,transparent 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 0 30px rgba(240,165,0,.08);} /* Anel exterior fino — toque editorial */ .np-figurino-frame::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(255,255,255,.08);pointer-events:none;} .np-figurino-avatar{font-size:5rem;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));} .np-figurino-cap{font-family:var(--fn);} .np-figurino-cap strong{display:block;font-weight:700;font-size:1.05rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text);margin-bottom:.2rem;} .np-figurino-cap span{display:block;font-family:var(--fu);font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:500;} .np-kicker{display:inline-block;font-family:var(--fu);font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;padding-bottom:.55rem;border-bottom:1px solid rgba(240,165,0,.3);} .np-headline{font-family:var(--fn);font-weight:700;font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.05;letter-spacing:-1.5px;text-transform:uppercase;color:var(--text);margin:0 0 .7rem;} .np-deck{font-family:var(--fb);font-size:1.05rem;line-height:1.45;color:#cdd6e4;font-weight:300;font-style:italic;max-width:48rem;margin:0 0 1.4rem;} .np-pullquote{font-family:var(--fn);font-weight:500;font-style:italic;font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.3;color:var(--gold);margin:1.4rem 0;padding:.4rem 0 .4rem 1.2rem;border-left:3px solid var(--gold);} .np-pullquote-attr{display:block;font-family:var(--fu);font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:.6rem;} .np-body-cols{column-count:1;column-gap:2rem;margin-bottom:1.2rem;} @media (min-width:769px){.np-body-cols{column-count:2;}} .np-body{font-family:var(--fb);font-size:.95rem;line-height:1.65;color:#c5d0e0;margin:0 0 .8rem;break-inside:avoid;font-weight:400;} .np-dropcap{float:left;font-family:var(--fn);font-weight:700;font-size:3.4rem;line-height:.85;margin:.05em .5rem -.1em 0;color:var(--gold);} .np-byline{font-family:var(--fu);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border);padding-top:.9rem;font-style:italic;font-weight:500;} /* ─── 🚨 ALERTA CM — banner tabloide (versão moderada) ─── */ .alerta-cm{ position:relative; background:linear-gradient(180deg,rgba(180,30,30,.18) 0%,rgba(120,20,20,.14) 100%); border:1px solid rgba(220,60,60,.45); border-left:3px solid #d63838; border-radius:4px; padding:.85rem 1.2rem 1rem; margin:0 0 2rem; } .alerta-cm-header{display:flex;align-items:center;gap:.55rem;margin-bottom:.45rem;} .alerta-cm-flash{font-size:1rem;} .alerta-cm-label{ font-family:var(--fu); font-weight:800; font-size:.72rem; letter-spacing:3px; text-transform:uppercase; color:#ff8a8a; } .alerta-cm-pulse{ width:6px;height:6px;border-radius:50%;background:#ff5252; box-shadow:0 0 0 0 rgba(255,82,82,.5); animation:alerta-pulse 2s ease-out infinite; margin-left:auto; } .alerta-cm-text{ font-family:var(--fn); font-weight:600; font-size:clamp(.98rem,2vw,1.15rem); line-height:1.3; color:var(--text); } @keyframes alerta-pulse{ 0%{box-shadow:0 0 0 0 rgba(255,82,82,.5);} 70%{box-shadow:0 0 0 8px rgba(255,82,82,0);} 100%{box-shadow:0 0 0 0 rgba(255,82,82,0);} } @media(max-width:768px){ .alerta-cm{padding:.75rem 1rem .85rem;margin-bottom:1.4rem;} .alerta-cm-label{font-size:.66rem;letter-spacing:2.5px;} .alerta-cm-text{font-size:.95rem;} } /* ─── DIVISOR DE SECÇÃO ─── */ .np-section-rule{display:flex;align-items:center;gap:1.2rem;margin:0 0 1.4rem;} .np-section-rule::before,.np-section-rule::after{content:'';flex:1;height:1px;background:var(--border);} .np-section-title{font-family:var(--fn);font-weight:600;font-size:1rem;letter-spacing:5px;text-transform:uppercase;color:var(--gold);} /* ─── NOTÍCIAS SECUNDÁRIAS — grid ─── */ .np-stories{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.6rem 2rem;} .np-story{position:relative;padding:1.1rem 0 1.2rem;border-top:2px solid var(--accent,var(--gold));} .np-story-num{position:absolute;top:.55rem;right:0;font-family:var(--fn);font-weight:600;font-size:.85rem;color:var(--muted2);letter-spacing:1.5px;} .np-story-cat{display:block;font-family:var(--fu);font-size:.62rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent,var(--gold));margin-bottom:.6rem;} .np-story-headline{font-family:var(--fn);font-weight:700;font-size:1.18rem;line-height:1.15;letter-spacing:-.3px;text-transform:uppercase;margin:0 0 .55rem;color:var(--text);} .np-story-body{font-family:var(--fb);font-size:.86rem;line-height:1.5;color:#aab6c8;margin:0 0 .75rem;font-weight:400;} .np-story-meta{font-family:var(--fu);font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);font-style:italic;font-weight:500;} /* Cores acento por categoria */ .np-cat-podium{--accent:var(--gold);} .np-cat-perfect{--accent:var(--purple);} .np-cat-rise{--accent:var(--green);} .np-cat-fall{--accent:var(--red);} .np-cat-cross{--accent:var(--blue);} .np-cat-streak{--accent:var(--gold2);} /* ─── RESUMO DA EDIÇÃO ANTERIOR — bloco textual sóbrio ─── */ .np-recap{margin:2rem 0 0;padding:1.4rem 1.6rem;border-left:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.02);} .np-recap-label{font-family:var(--fu);font-size:.62rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;} .np-recap-text{font-family:var(--fb);font-size:.94rem;line-height:1.55;color:#aab6c8;font-style:italic;margin:0 0 .8rem;font-weight:300;} .np-recap-meta{font-family:var(--fu);font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);} /* ─── ALINHAMENTO DE HOJE — rodapé discreto, horizontal ─── */ .np-lineup{margin:2rem 0 0;border-top:1px solid var(--border);padding-top:1rem;} .np-lineup-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.8rem;} .np-lineup-title{font-family:var(--fu);font-weight:600;font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--muted);} .np-lineup-date{font-family:var(--fu);font-size:.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);font-weight:500;} /* Colunas horizontais — cada jogo é uma coluna pequena, conteúdo centrado */ .np-lineup-grid{display:flex;gap:1.5rem;flex-wrap:wrap;} .np-lineup-col{display:flex;flex-direction:column;align-items:center;gap:.15rem;flex:1;min-width:0;text-align:center;} .np-lineup-time{font-family:var(--fn);font-weight:600;font-size:.78rem;letter-spacing:1.5px;color:var(--gold);font-variant-numeric:tabular-nums;text-transform:uppercase;} .np-lineup-match{font-family:var(--fb);font-weight:500;font-size:.85rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;} .np-lineup-match em{font-style:italic;font-weight:400;color:var(--muted);margin:0 .25rem;} .np-lineup-foot{margin-top:1rem;text-align:center;} .np-lineup-next{font-family:var(--fu);font-size:.6rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted2);font-weight:500;opacity:.8;} /* ─── ESTADO VAZIO / ERRO ─── */ .np-empty{text-align:center;padding:3rem 1.5rem;margin:2rem 0;border:1px dashed var(--border);border-radius:14px;background:rgba(255,255,255,.015);} .np-empty-icon{font-size:2.5rem;margin-bottom:.6rem;opacity:.6;} .np-empty-title{font-family:var(--fn);font-weight:600;font-size:1.2rem;color:var(--text);letter-spacing:-.2px;margin-bottom:.4rem;} .np-empty-msg{font-family:var(--fb);font-size:.9rem;color:var(--muted);line-height:1.5;max-width:30rem;margin:0 auto;} @media (max-width:768px){ .np-brand-img{max-width:240px;} /* No mobile o sticky encaixa por baixo do header (sem tabs-nav). Override só de margens. */ .np-masthead{margin-left:-.8rem;margin-right:-.8rem;padding-left:.8rem;padding-right:.8rem;} /* Em mobile mantemos o mesmo layout do desktop (linha única) — só ajustamos tamanhos */ .np-edition{font-size:.62rem;letter-spacing:1.3px;} .np-date{font-size:.62rem;letter-spacing:1.3px;} .np-manchete{padding:1.3rem 1.3rem 1.4rem;margin-bottom:1.4rem;} /* Em mobile: figurino acima do texto, mais compacto */ .np-manchete-top{flex-direction:column-reverse;gap:1.2rem;} .np-figurino{width:100%;max-width:200px;margin:0 auto;} .np-figurino-frame{width:130px;height:130px;} .np-figurino-avatar{font-size:4rem;} .np-stories{grid-template-columns:1fr;gap:1.4rem;} /* Resumo da edição anterior — mais compacto em mobile */ .np-recap{margin-top:1.6rem;padding:1.2rem 1.2rem;} .np-recap-text{font-size:.9rem;} /* Alinhamento — em mobile só ajustamos cabeçalho e gap */ .np-lineup{margin-top:2rem;} .np-lineup-head{flex-direction:column;align-items:flex-start;gap:.3rem;margin-bottom:.8rem;} } /* TABS — Minimal Dots, versão editorial */ .tabs-nav{display:flex;justify-content:center;align-items:center;gap:1.8rem;background:rgba(6,12,26,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:none;border-radius:0;padding:14px 2rem;margin-top:2rem;margin-bottom:1rem;overflow-x:auto;scrollbar-width:none;position:relative;} .tabs-nav::-webkit-scrollbar{display:none;} /* Hairline dourada subtil em baixo — desvanece nas pontas */ .tabs-nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(240,165,0,.22) 30%,rgba(240,165,0,.22) 70%,transparent 100%);pointer-events:none;} .tab-btn{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 2px;border-radius:0;border:none;background:transparent;color:var(--muted);font-family:var(--fu);font-size:.85rem;font-weight:600;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;transition:color .2s;white-space:nowrap;} /* Dot separator entre tabs */ .tab-btn:not(:last-child)::after{content:'•';position:absolute;right:calc(-1.8rem / 2);top:50%;transform:translate(50%,-50%);color:var(--muted2);font-size:.7rem;pointer-events:none;opacity:.6;} .tab-btn.active{background:transparent;color:var(--gold);border:none;} /* Sublinhado dourado SOBRE a hairline — com glow */ .tab-btn.active::before{content:'';position:absolute;left:0;right:0;bottom:-14px;height:2px;background:var(--gold);box-shadow:0 0 10px rgba(240,165,0,.55);border-radius:2px;} .tab-btn:hover:not(.active){color:var(--text);background:transparent;} .tc{display:none;padding-top:2rem;animation:fadeUp .3s ease;} .tc.active{display:block;} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} /* SECTION HEADER */ .sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:8px;} .stitle{font-family:var(--fd);font-weight:700;font-size:1.75rem;letter-spacing:-.8px;} .smeta{font-family:var(--fu);font-size:.9rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;} /* STAT BOXES */ .srow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.5rem;} .sbox{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.2rem;min-width:0;} .sval{font-family:var(--fx);font-weight:700;font-size:2.3rem;line-height:1;letter-spacing:-1.2px;} .slbl{font-family:var(--fu);font-size:.8rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:3px;} @media (max-width:560px){ /* Permitir 4 cartões na mesma linha em mobile, mais compactos */ .srow{grid-template-columns:repeat(4,1fr) !important;gap:5px !important;} .sbox{padding:.55rem .35rem !important;text-align:center;} .sval{font-size:1.4rem !important;letter-spacing:-.5px;} .slbl{font-size:.55rem !important;letter-spacing:.4px;line-height:1.15;margin-top:4px;} } /* Ecrãs médios entre 561-768px: também 4 colunas (mas com padding intermédio) */ @media (min-width:561px) and (max-width:768px){ .sbox{padding:.7rem .5rem;text-align:center;} .sval{font-size:1.7rem;letter-spacing:-.5px;} .slbl{font-size:.65rem;letter-spacing:.6px;} } /* ───────────────────────────────────── BRACKET MOBILE — vista vertical compacta ───────────────────────────────────── */ @media (max-width:768px){ .bracket-wrapper{padding:8px 0;overflow-x:hidden;} .bracket-container{ flex-direction:column !important; min-width:0 !important; width:100% !important; padding:8px !important; gap:14px !important; } .bracket-round{ width:100% !important; flex:0 0 auto !important; } .round-title{ font-size:.85rem !important; padding:8px 12px !important; margin-bottom:8px !important; border-radius:8px !important; border-bottom:1px solid var(--gold) !important; } .round-content{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; } .bracket-match{ margin:0 !important; padding:8px 10px !important; min-height:auto !important; } .bracket-match.final{min-height:auto !important;} /* A ronda "Final" só tem 2 jogos especiais — fica em 1 coluna */ .bracket-final-col .round-content{grid-template-columns:1fr !important;} /* Esconder linhas conectoras SVG (não fazem sentido na vista vertical) */ #bracket-svg{display:none !important;} /* Tamanhos das fontes nos jogos do bracket em mobile */ .bm-gamenum{font-size:.62rem !important;padding:2px 6px !important;} .bm-team-name{font-size:.78rem !important;} .bm-score{font-size:1.1rem !important;} } @media (max-width:420px){ /* Em ecrãs muito pequenos, ainda 2 colunas mas mais compactos */ .round-content{gap:4px !important;} .bm-team-name{font-size:.72rem !important;} } /* ═══ MATCH CARDS — redesigned ═══ */ .mg{display:grid;gap:10px;} .mc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .2s;overflow:hidden;display:flex;flex-direction:column;} .mc:hover{border-color:rgba(240,165,0,.3);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35);} .mc.live{border-color:rgba(0,230,118,.3);} .mc.live .mc-topbar{background:linear-gradient(90deg,rgba(0,230,118,.12),transparent);} .mc.ended{opacity:.72;} /* top info bar — full width, no overlap */ .mc-topbar{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.05);} .mc-topbar-l{font-family:var(--fu);font-size:.78rem;color:var(--muted2);letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:8px;} .mc-gamenum{font-family:var(--fu);font-weight:600;font-size:.95rem;color:var(--gold);letter-spacing:1px;} .mc-topbar-r{display:flex;align-items:center;gap:6px;} /* content row */ .mc-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1rem 1.4rem;} .mc-team{display:flex;flex-direction:column;gap:6px;} .mc-team.h{align-items:flex-start;} .mc-team.a{align-items:flex-end;} .mc-name{font-family:var(--fu);font-weight:700;font-size:1rem;letter-spacing:.5px;text-transform:uppercase;} .mc-mid{display:flex;flex-direction:column;align-items:center;gap:5px;} .mc-score{font-family:var(--fx);font-weight:700;font-size:2.5rem;letter-spacing:-1.5px;line-height:1;} .mc-vs{font-family:var(--fu);font-weight:600;font-size:1.6rem;color:var(--muted2);letter-spacing:2px;} /* predict bar */ .mc-pred-bar{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;border-top:1px solid rgba(255,255,255,.05);background:rgba(0,180,216,.06);} .mc-pred-bar.pts-pos{background:rgba(0,230,118,.07);} .mc-pred-bar.pts-neg{background:rgba(255,77,109,.06);} .mc-pred-info{font-family:var(--fu);font-size:.88rem;color:var(--blue);display:flex;align-items:center;gap:6px;} .mc-pred-pts{font-family:var(--fu);font-weight:700;font-size:1.2rem;letter-spacing:1px;} .bge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-family:var(--fu);font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;} .b-live{background:rgba(0,230,118,.12);color:var(--green);} .b-up{background:rgba(0,180,216,.1);color:var(--blue);} .b-end{background:rgba(255,255,255,.06);color:var(--muted);} .b-gold{background:rgba(240,165,0,.12);color:var(--gold);} .ldot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.5s infinite;display:inline-block;} @keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}} /* GROUPS */ .gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;} .gc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;} .gh{background:var(--bg3);padding:9px 14px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border);} .gbadge{width:28px;height:28px;background:linear-gradient(135deg,var(--gold),var(--gold2));border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--fu);font-weight:700;font-size:1.1rem;color:#000;} .glbl{font-family:var(--fu);font-weight:700;font-size:.93rem;letter-spacing:1px;text-transform:uppercase;} .st{width:100%;border-collapse:collapse;font-family:var(--fu);font-size:.82rem;} .st th{padding:7px 10px;text-align:center;color:var(--muted);font-size:.68rem;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border);font-weight:600;} .st th:first-child{text-align:left;} .st td{padding:9px 10px;text-align:center;border-bottom:1px solid rgba(255,255,255,.03);} .st td:first-child{text-align:left;} .st tr:last-child td{border-bottom:none;} .st tr:hover td{background:rgba(255,255,255,.02);} .st tr.q1 td:first-child{border-left:3px solid var(--green);} .st tr.q2 td:first-child{border-left:3px solid var(--blue);} .tcell{display:flex;align-items:center;gap:8px;font-weight:700;} .ptsv{font-family:var(--fu);font-weight:700;font-size:1.1rem;color:var(--gold);} /* ═══ LEADERBOARD ═══ */ .lb{display:grid;gap:9px;margin-top:1rem;} .lbi{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.4rem;display:flex;align-items:center;gap:1.2rem;transition:all .2s;position:relative;overflow:hidden;cursor:pointer;} .lbi:hover{border-color:rgba(240,165,0,.3);transform:translateX(4px);box-shadow:0 4px 20px rgba(0,0,0,.3);} .lbi.r1{background:linear-gradient(135deg,rgba(240,165,0,.13),rgba(240,165,0,.03));border-color:rgba(240,165,0,.32);} .lbi.r2{background:linear-gradient(135deg,rgba(192,192,192,.09),transparent);border-color:rgba(192,192,192,.22);} .lbi.r3{background:linear-gradient(135deg,rgba(205,127,50,.09),transparent);border-color:rgba(205,127,50,.22);} .lbi-shine{position:absolute;top:0;left:0;right:0;height:1px;} .lbi.r1 .lbi-shine{background:linear-gradient(90deg,transparent,var(--gold),transparent);} .lbi.r2 .lbi-shine{background:linear-gradient(90deg,transparent,#c0c0c0,transparent);} .lbi.r3 .lbi-shine{background:linear-gradient(90deg,transparent,#cd7f32,transparent);} .lrank{font-family:var(--fd);font-weight:700;font-size:1.8rem;color:var(--muted2);min-width:36px;text-align:center;line-height:1;letter-spacing:-.5px;} .lrank.c1{color:var(--gold)}.lrank.c2{color:#c0c0c0}.lrank.c3{color:#cd7f32} .lav{width:44px;height:44px;border-radius:50%;background:var(--bg3);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;} .linf{flex:1;min-width:0;} .lname{font-family:var(--fb);font-weight:700;font-size:1.1rem;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .lmeta{font-family:var(--fb);font-size:.85rem;color:var(--muted);margin-top:3px;letter-spacing:.2px;} .lchamp{font-size:.75rem;color:var(--muted2);margin-top:3px;font-family:var(--fu);} .lbar{height:3px;background:var(--bg3);border-radius:2px;margin-top:7px;overflow:hidden;} .lbarfill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:2px;transition:width .8s ease;} .lpts{text-align:right;flex-shrink:0;} .lptsv{font-family:var(--fx);font-weight:700;font-size:2.3rem;line-height:1;letter-spacing:-1.2px;} .lptsl{font-family:var(--fu);font-size:.68rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;} .lbi-arrow{color:var(--muted2);font-size:.8rem;flex-shrink:0;} /* USER HIGHLIGHT IN LEADERBOARD */ .lbi.is-me{background:rgba(240,165,0,.08);border-color:rgba(240,165,0,.3);} .lbi.is-me .lbi-shine{background:linear-gradient(90deg,transparent,var(--gold),transparent);} .lbi-me-tag{font-family:var(--fu);font-size:.68rem;color:var(--gold);background:rgba(240,165,0,.15);border:1px solid rgba(240,165,0,.3);padding:1px 8px;border-radius:12px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;font-weight:600;} /* STREAK INDICATOR */ .streak-badge{display:inline-flex;align-items:center;gap:3px;font-family:var(--fx);font-weight:700;font-size:.82rem;color:#ff8c00;white-space:nowrap;} /* FORM BARS (last 5 games) */ .form-bars{display:flex;gap:2px;align-items:flex-end;height:22px;margin-top:5px;} .form-bar{width:6px;border-radius:2px 2px 0 0;min-height:2px;transition:height .4s ease;} .form-bar.fb-5{background:var(--green);height:100%;} .form-bar.fb-4{background:#ffdd00;height:80%;} .form-bar.fb-3{background:var(--blue);height:60%;} .form-bar.fb-1{background:#ffa94d;height:30%;} .form-bar.fb-0{background:var(--red);height:12%;} .form-bar.fb-null{background:var(--muted2);height:6%;} /* ═══ LOGGED-IN DASHBOARD (hero right panel) ═══ */ .hero-dashboard{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center;padding:2rem 0 1.5rem;max-width:1100px;margin:0 auto;} .hero-left{text-align:left;} .hero-left .hero-badge{margin-bottom:.8rem;} .hero-left h1{text-align:left;} .hero-left p{text-align:left;} .hero-right{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;position:relative;overflow:hidden;} .hero-right::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 80% 0%,rgba(240,165,0,.08),transparent);pointer-events:none;} .dash-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;position:relative;z-index:1;} .dash-rank{font-family:var(--fx);font-weight:700;font-size:2.8rem;color:var(--gold);line-height:1;letter-spacing:-1.5px;} .dash-rank-sub{font-family:var(--fu);font-size:.78rem;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:1px;} .dash-pts{text-align:right;} .dash-pts-val{font-family:var(--fx);font-weight:700;font-size:2.6rem;color:var(--green);line-height:1;letter-spacing:-1.2px;} .dash-pts-lbl{font-family:var(--fu);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px;} .dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;z-index:1;} .dash-stat{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:10px 8px;text-align:center;} .dash-stat-icon{font-size:1.2rem;margin-bottom:4px;} .dash-stat-val{font-family:var(--fx);font-weight:700;font-size:1.5rem;color:var(--text);line-height:1;letter-spacing:-.5px;} .dash-stat-lbl{font-family:var(--fu);font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:3px;} .dash-form{margin-top:1rem;position:relative;z-index:1;} .dash-form-title{font-family:var(--fu);font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;} .dash-form-bars{display:flex;gap:4px;align-items:flex-end;height:36px;} .dash-form-bar{flex:1;border-radius:3px 3px 0 0;min-height:3px;transition:height .6s ease;} .dash-form-bar.fb-5{background:var(--green);} .dash-form-bar.fb-4{background:#ffdd00;} .dash-form-bar.fb-3{background:var(--blue);} .dash-form-bar.fb-1{background:#ffa94d;} .dash-form-bar.fb-0{background:var(--red);} .dash-form-bar.fb-null{background:var(--muted2);} .dash-form-meta{display:flex;justify-content:space-between;font-family:var(--fu);font-size:.6rem;color:var(--muted2);margin-top:3px;text-transform:uppercase;letter-spacing:.5px;} /* CONFETTI */ .confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden;} .confetti-piece{position:absolute;top:-10px;width:10px;height:14px;opacity:.9;animation:confettiFall 3s ease-out forwards;} @keyframes confettiFall{ 0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1;} 50%{opacity:1;} 100%{transform:translateY(100vh) rotate(720deg) scale(0.4);opacity:0;} } /* ═══ PÓDIO ═══ */ .podium-wrap{display:flex;align-items:flex-end;justify-content:center;gap:16px;padding:2rem 1rem 0;margin-bottom:.5rem;flex-wrap:wrap;} .podium-slot{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;max-width:200px;cursor:pointer;} .podium-slot:hover .podium-av{transform:scale(1.05);} .podium-av{font-size:2.4rem;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .2s;} .podium-slot.p1 .podium-av{background:linear-gradient(135deg,rgba(240,165,0,.25),rgba(240,165,0,.05));border:3px solid var(--gold);box-shadow:0 0 28px rgba(240,165,0,.3);width:76px;height:76px;font-size:2.8rem;} .podium-slot.p2 .podium-av{background:linear-gradient(135deg,rgba(192,192,192,.2),rgba(192,192,192,.04));border:3px solid #c0c0c0;} .podium-slot.p3 .podium-av{background:linear-gradient(135deg,rgba(205,127,50,.2),rgba(205,127,50,.04));border:3px solid #cd7f32;} .podium-crown{position:absolute;top:-16px;font-size:1.2rem;} .podium-name{font-family:var(--fu);font-weight:700;font-size:.95rem;letter-spacing:.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} .podium-team{font-family:var(--fu);font-size:.72rem;color:var(--muted);text-align:center;} .podium-pts{font-family:var(--fx);font-weight:700;font-size:1.8rem;line-height:1;text-align:center;letter-spacing:-1px;} .podium-slot.p1 .podium-pts{font-size:2.2rem;color:var(--gold);} .podium-slot.p2 .podium-pts{color:#c0c0c0;} .podium-slot.p3 .podium-pts{color:#cd7f32;} .podium-base{border-radius:12px 12px 0 0;width:100%;display:flex;align-items:center;justify-content:center;padding:8px 4px;} .podium-slot.p1 .podium-base{height:90px;background:linear-gradient(180deg,rgba(240,165,0,.22),rgba(240,165,0,.06));border:1px solid rgba(240,165,0,.25);border-bottom:none;} .podium-slot.p2 .podium-base{height:64px;background:linear-gradient(180deg,rgba(192,192,192,.15),rgba(192,192,192,.04));border:1px solid rgba(192,192,192,.2);border-bottom:none;} .podium-slot.p3 .podium-base{height:48px;background:linear-gradient(180deg,rgba(205,127,50,.15),rgba(205,127,50,.04));border:1px solid rgba(205,127,50,.2);border-bottom:none;} .podium-medal{font-family:var(--fd);font-weight:700;font-size:1.4rem;} .podium-slot.p1 .podium-medal{color:var(--gold);} .podium-slot.p2 .podium-medal{color:#c0c0c0;} .podium-slot.p3 .podium-medal{color:#cd7f32;} .podium-divider{height:3px;background:linear-gradient(90deg,transparent,rgba(240,165,0,.3),transparent);border-radius:2px;margin:0.5rem 0 1.5rem;} /* LANTERNA VERMELHA — último classificado */ .podium-gap{width:1px;background:linear-gradient(to bottom,transparent,var(--muted2),transparent);align-self:stretch;margin:1.2rem .3rem 0;min-height:80px;} .podium-slot.lanterna{max-width:130px;} .podium-slot.lanterna .podium-av{background:linear-gradient(135deg,rgba(255,77,109,.25),rgba(255,77,109,.04));border:3px solid var(--red);box-shadow:0 0 22px rgba(255,77,109,.25);width:54px;height:54px;font-size:1.9rem;position:relative;} .podium-slot.lanterna .podium-crown{color:var(--red);} .podium-slot.lanterna .podium-pts{color:var(--red);font-size:1.4rem;} .podium-slot.lanterna .podium-base{height:30px;background:linear-gradient(180deg,rgba(255,77,109,.2),rgba(255,77,109,.04));border:1px solid rgba(255,77,109,.3);border-bottom:none;} .podium-slot.lanterna .podium-medal{font-size:1.3rem;} /* ═══ LB FILTERS — same style as .tgl ═══ */ .lb-filter-wrap{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;} .lb-filter-btn{font-family:var(--fu);font-size:.78rem;font-weight:700;letter-spacing:.5px;padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;text-transform:uppercase;white-space:nowrap;} .lb-filter-btn.active{background:var(--gold);color:#000;border-color:var(--gold);} .lb-filter-btn:hover:not(.active){color:var(--text);background:rgba(255,255,255,.04);} .lb-sub-filter-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;width:100%;justify-content:center;} .lb-sub-filter-btn,.adm-tb-scope-btn{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--muted);font-family:var(--fu);font-size:.78rem;font-weight:700;letter-spacing:.5px;padding:5px 14px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;text-transform:uppercase;white-space:nowrap;} .lb-sub-filter-btn:hover:not(.active),.adm-tb-scope-btn:hover:not(.active){color:var(--text);border-color:var(--gold);background:rgba(255,255,255,.04);} .lb-sub-filter-btn.active,.adm-tb-scope-btn.active{background:var(--gold);color:#000;border-color:var(--gold);} .adm-tb-scope-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem;} /* RULES */ .rbox{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;margin-bottom:1.5rem;} .rtitle{font-family:var(--fd);font-weight:700;font-size:1.4rem;letter-spacing:-.4px;color:var(--gold);margin-bottom:1rem;} .rphase{font-family:var(--fu);font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;margin-top:.8rem;} .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px;} .rul{display:flex;align-items:center;gap:10px;background:var(--bg2);border-radius:8px;padding:10px 14px;} .rpts{font-family:var(--fx);font-weight:700;font-size:1.6rem;color:var(--gold);min-width:44px;letter-spacing:-.5px;} .rdesc{font-family:var(--fu);font-size:.83rem;line-height:1.3;} .rmax{display:flex;align-items:center;gap:8px;background:rgba(240,165,0,.06);border:1px dashed rgba(240,165,0,.25);border-radius:8px;padding:8px 14px;margin-top:8px;font-family:var(--fu);font-size:.82rem;color:var(--gold);} /* JORNADA CARDS */ .jornada-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);margin-bottom:1.2rem;overflow:hidden;} .jornada-card.submitted{border-color:rgba(0,230,118,.25);} .jornada-hdr{background:var(--bg3);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;gap:10px;} .jornada-hdr:hover{background:rgba(255,255,255,.03);} .jornada-hdr .jornada-toggle{font-family:var(--fu);font-size:.9rem;color:var(--muted);transition:transform .25s;display:inline-block;width:16px;text-align:center;flex-shrink:0;} .jornada-card.collapsed .jornada-toggle{transform:rotate(-90deg);} .jornada-card.collapsed .jornada-matches, .jornada-card.collapsed .jornada-submit, .jornada-card.collapsed .pred-window-banner, .jornada-card.collapsed > div[style*="padding:0 1rem"]{display:none;} .jornada-card.collapsed .jornada-hdr{border-bottom:none;} /* Mini status under jornada title — uses same styling as calendar's cal-pred-window for visual harmony */ .jornada-mini-status{padding:10px 16px;display:flex;align-items:center;gap:8px;font-family:var(--fb);font-size:.88rem;letter-spacing:.3px;line-height:1.4;border-bottom:1px solid var(--border);} @media (max-width:560px){ .jornada-mini-status{padding:9px 12px;font-size:.78rem;align-items:flex-start;flex-wrap:wrap;line-height:1.5;} .jornada-mini-status .jms-dot{margin-top:6px;} .jornada-mini-status strong{display:inline;} } .jornada-card.collapsed .jornada-mini-status{border-bottom:none;} .jornada-mini-status.pwm-open{background:rgba(0,230,118,.08);border-bottom-color:rgba(0,230,118,.15);color:var(--green);} .jornada-mini-status.pwm-soon{background:rgba(240,165,0,.06);border-bottom-color:rgba(240,165,0,.15);color:var(--gold);} .jornada-mini-status.pwm-closed{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.06);color:var(--muted);} .jornada-mini-status.pwm-late{background:linear-gradient(90deg,rgba(255,140,0,.08),rgba(255,77,109,.05));border-bottom-color:rgba(255,140,0,.2);color:#ffae6c;} .jornada-mini-status .jms-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .jornada-mini-status.pwm-open .jms-dot{background:var(--green);animation:blink 1.5s infinite;} .jornada-mini-status.pwm-soon .jms-dot{background:var(--gold);} .jornada-mini-status.pwm-closed .jms-dot{background:var(--muted2);} .jornada-mini-status.pwm-late .jms-dot{background:#ffae6c;} .jornada-badge{font-family:var(--fu);font-weight:600;font-size:1rem;letter-spacing:1px;color:var(--gold);flex:1;min-width:0;} .jornada-matches{padding:1rem;} .jornada-sep{height:1px;background:var(--border);margin:.8rem 0;} .jornada-submit{padding:1rem;border-top:1px solid var(--border);background:rgba(0,0,0,.15);} .pcard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem;transition:all .2s;margin-bottom:10px;} .pcard:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.02);} .pcard.done{background:rgba(0,230,118,.05);border-color:rgba(0,230,118,.25);} .pcard.draft{background:rgba(0,180,216,.04);border-color:rgba(0,180,216,.25);} .pdraft-small{display:flex;align-items:center;gap:6px;font-family:var(--fu);font-size:.85rem;color:var(--blue);margin-top:.7rem;font-weight:600;justify-content:center;padding-top:.7rem;border-top:1px dashed rgba(0,180,216,.2);} .phdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:12px;} .pteams{display:flex;align-items:center;gap:8px;font-family:var(--fu);font-weight:700;font-size:.95rem;flex:1;min-width:0;} .pteams .pteam-label{display:flex;align-items:center;gap:6px;min-width:0;} .pteams .pteam-label span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pvs{color:var(--muted2);font-size:.85rem;font-weight:500;flex-shrink:0;} .pinfo{font-family:var(--fu);font-size:.78rem;color:var(--muted);white-space:nowrap;flex-shrink:0;letter-spacing:.3px;} .pinputs{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:nowrap;} .sw{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;} .sw-lbl{font-family:var(--fu);font-size:.62rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-weight:600;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sinput{width:68px;height:60px;background:var(--bg2);border:2px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--fx);font-weight:700;font-size:2rem;text-align:center;outline:none;transition:border-color .2s;-moz-appearance:textfield;} .sinput::-webkit-outer-spin-button,.sinput::-webkit-inner-spin-button{-webkit-appearance:none;} .sinput:focus{border-color:var(--gold);} .sinput:disabled{opacity:.5;cursor:not-allowed;} .sdash{font-family:var(--fd);font-weight:500;font-size:1.6rem;color:var(--muted2);} .qualifier-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:.8rem;padding:.6rem;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.2);border-radius:8px;} .qualifier-lbl{font-family:var(--fu);font-size:.68rem;color:var(--purple);letter-spacing:1px;text-transform:uppercase;} .qualifier-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;} .qbtn{font-family:var(--fu);font-size:.78rem;font-weight:700;padding:6px 14px;border-radius:20px;border:1px solid rgba(168,85,247,.3);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;} .qbtn.active{background:rgba(168,85,247,.2);color:var(--purple);border-color:var(--purple);} .qbtn:disabled{opacity:.4;cursor:not-allowed;} .psaved-small{display:flex;align-items:center;gap:6px;font-family:var(--fu);font-size:.85rem;color:var(--green);margin-top:.7rem;font-weight:600;justify-content:center;padding-top:.7rem;border-top:1px dashed rgba(0,230,118,.2);} /* PREDICTION WINDOW BANNER */ .pred-window-banner{display:flex;align-items:center;gap:8px;padding:10px 16px;font-family:var(--fu);font-size:.85rem;letter-spacing:.3px;line-height:1.4;border-bottom:1px solid var(--border);} .pred-window-banner strong{font-weight:700;} .pwb-open{background:rgba(0,230,118,.08);color:var(--green);border-bottom-color:rgba(0,230,118,.2);} .pwb-soon{background:rgba(255,221,0,.06);color:#ffdd00;border-bottom-color:rgba(255,221,0,.2);} .pwb-closed{background:rgba(255,77,109,.07);color:#ff8c9c;border-bottom-color:rgba(255,77,109,.2);} .pwb-late{background:linear-gradient(90deg,rgba(255,140,0,.12),rgba(255,77,109,.08));color:#ffae6c;border-bottom-color:rgba(255,140,0,.3);} /* Late-blocked match card */ .pcard.late-blocked{background:rgba(255,77,109,.04);border-color:rgba(255,77,109,.2);opacity:.7;} .pcard.late-blocked .sinput{background:rgba(255,77,109,.04);border-color:rgba(255,77,109,.15);} .plate-small{display:flex;align-items:center;gap:6px;font-family:var(--fu);font-size:.82rem;color:#ff8c9c;margin-top:.7rem;font-weight:500;justify-content:center;padding-top:.7rem;border-top:1px dashed rgba(255,77,109,.2);} .plate-small strong{color:#ff6b85;} .jornada-progress{height:3px;background:var(--bg3);border-radius:2px;margin:.6rem 0 .2rem;} .jornada-progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--blue));border-radius:2px;transition:width .4s ease;} .hist-pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.4rem;margin-bottom:10px;} /* ═══ CHAMPION PICKER ═══ */ .champ-picker{background:linear-gradient(135deg,rgba(240,165,0,.08),rgba(168,85,247,.05));border:1px solid rgba(240,165,0,.2);border-radius:var(--r);padding:1.2rem 1.4rem;margin-bottom:1.4rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;} .champ-picker.locked{background:linear-gradient(135deg,rgba(240,165,0,.18),rgba(240,165,0,.04));border-color:rgba(240,165,0,.45);} .champ-picker-hdr{flex:1;min-width:220px;} .champ-picker-title{font-family:var(--fu);font-size:1.3rem;letter-spacing:2px;color:var(--gold);margin-bottom:2px;} .champ-picker-sub{font-family:var(--fu);font-size:.78rem;color:var(--muted);letter-spacing:.5px;} .champ-picker-body{min-width:240px;flex:1;display:flex;gap:10px;align-items:center;} .champ-picker-body .finp{flex:1;min-width:0;} .champ-picker-warn{width:100%;font-family:var(--fu);font-size:.75rem;color:var(--gold);background:rgba(240,165,0,.06);border:1px dashed rgba(240,165,0,.3);border-radius:8px;padding:6px 12px;letter-spacing:.3px;} .champ-locked-display{flex:1;display:flex;align-items:center;gap:12px;font-family:var(--fu);font-size:1.05rem;font-weight:700;color:var(--gold);background:rgba(240,165,0,.08);border:1px solid rgba(240,165,0,.2);border-radius:10px;padding:10px 14px;} .champ-locked-display .fi{width:32px;height:22px;border-radius:3px;} .champ-locked-lock{margin-left:auto;font-size:.9rem;color:var(--muted);font-weight:400;letter-spacing:1px;text-transform:uppercase;} .champ-blocked-banner{background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.25);border-radius:var(--r);padding:.9rem 1.2rem;font-family:var(--fu);font-size:.88rem;color:var(--red);margin-bottom:1rem;display:flex;align-items:flex-start;gap:10px;line-height:1.45;} .champ-blocked-banner .cbb-icon{flex-shrink:0;} .champ-blocked-banner .cbb-text{flex:1;min-width:0;} .champ-blocked-banner .cbb-text strong{color:var(--red);font-weight:700;} @media (max-width:560px){ .champ-picker{flex-direction:column;align-items:stretch;padding:1rem 1rem 1.1rem;gap:.7rem;} .champ-picker-hdr{min-width:0;width:100%;} .champ-picker-title{font-size:1.05rem;letter-spacing:1.2px;} .champ-blocked-banner{padding:.8rem .9rem;font-size:.78rem;line-height:1.4;align-items:flex-start;gap:8px;} .champ-picker-warn{font-size:.7rem;padding:8px 10px;line-height:1.4;} .champ-picker-sub{font-size:.78rem !important;line-height:1.4;} .champ-picker-body{flex-direction:column;gap:8px;min-width:0;width:100%;} .champ-picker-body .finp, .champ-picker-body .fsel{width:100%;} .champ-picker-body .btn-gold{width:100%;} /* Estado bloqueado (jogador já confirmou): também stack em mobile */ .champ-locked-display{flex-wrap:wrap;font-size:.95rem;padding:9px 12px;gap:8px;} .champ-locked-lock{margin-left:0;font-size:.7rem;} } .psaved{margin-top:1.2rem;background:rgba(0,230,118,.1);border:1px solid rgba(0,230,118,.2);border-radius:8px;padding:10px 16px;font-family:var(--fu);font-size:.88rem;color:var(--green);text-align:center;} .ppts{margin-top:6px;background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.15);border-radius:8px;padding:8px 16px;font-family:var(--fu);font-size:.85rem;color:var(--gold);text-align:center;} .perr{margin-top:6px;background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.2);border-radius:8px;padding:8px 16px;font-family:var(--fu);font-size:.85rem;color:var(--red);text-align:center;} /* ═══ CALENDAR TAB ═══ */ .cal-jornada{background:var(--card);border:1px solid var(--border);border-radius:var(--r);margin-bottom:1.4rem;overflow:hidden;} .cal-jornada-hdr{background:var(--bg3);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);} .cal-title{font-family:var(--fu);font-weight:600;font-size:1.15rem;letter-spacing:1px;color:var(--gold);} .cal-window{font-family:var(--fu);font-size:.75rem;display:flex;align-items:center;gap:8px;} .cal-window-badge{padding:3px 10px;border-radius:20px;font-family:var(--fu);font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;} .cal-win-open{background:rgba(0,230,118,.12);color:var(--green);border:1px solid rgba(0,230,118,.25);} .cal-win-soon{background:rgba(240,165,0,.12);color:var(--gold);border:1px solid rgba(240,165,0,.25);} .cal-win-closed{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid rgba(255,255,255,.1);} .cal-match-row{display:grid;grid-template-columns:60px 1fr auto 1fr auto;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04);} .cal-match-row:last-child{border-bottom:none;} .cal-match-row:hover{background:rgba(240,165,0,.06);} .cal-gamenum{font-family:var(--fu);font-weight:600;font-size:.9rem;color:var(--gold);letter-spacing:1px;white-space:nowrap;} .cal-team{font-family:var(--fu);font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:6px;} .cal-team.away{justify-content:flex-end;} .cal-score{font-family:var(--fx);font-weight:700;font-size:1.4rem;letter-spacing:0;text-align:center;color:var(--text);} .cal-score.upcoming{color:var(--muted2);font-size:1rem;letter-spacing:1px;} .cal-time{font-family:var(--fu);font-size:.75rem;color:var(--muted);text-align:center;min-width:62px;display:flex;flex-direction:column;gap:2px;} .cal-time-date{font-family:var(--fu);font-size:.7rem;color:var(--gold);font-weight:600;letter-spacing:.3px;} /* ═══ Day navigation (Jogos tab) ═══ */ .day-nav{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:10px;margin:1.2rem 0 1.5rem;} .day-cell{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:14px 12px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-height:88px;justify-content:center;} .day-cell:hover{border-color:var(--gold);background:rgba(240,165,0,.04);transform:translateY(-1px);} .day-cell.current{border-color:var(--gold);background:linear-gradient(135deg,rgba(240,165,0,.12),rgba(240,165,0,.04));cursor:default;box-shadow:0 4px 18px rgba(240,165,0,.15);} .day-cell.current:hover{transform:none;} .day-cell.disabled{opacity:.35;cursor:not-allowed;pointer-events:none;} .day-cell-label{font-family:var(--fu);font-size:.7rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:4px;} .day-cell.current .day-cell-label{color:var(--gold);} .day-cell-date{font-family:var(--fd);font-weight:700;font-size:1.15rem;color:var(--text);letter-spacing:-.3px;} .day-cell.current .day-cell-date{color:var(--gold);font-size:1.3rem;} .day-cell-info{font-family:var(--fu);font-size:.72rem;color:var(--muted);letter-spacing:.3px;} .day-cell.current .day-cell-info{color:var(--text);font-weight:600;} @media (max-width:560px){ .day-nav{grid-template-columns:1fr 1.4fr 1fr;gap:6px;} .day-cell{padding:10px 6px;min-height:74px;} .day-cell-date{font-size:.95rem;} .day-cell.current .day-cell-date{font-size:1.1rem;} .day-cell-info{font-size:.65rem;} } /* ═══ Countdown to first match ═══ */ .countdown-card{background:linear-gradient(135deg,var(--bg3),rgba(240,165,0,.05));border:1px solid rgba(240,165,0,.25);border-radius:14px;padding:1.4rem 1.5rem;margin:1.2rem 0;text-align:center;position:relative;overflow:hidden;} .countdown-card::before{content:'';position:absolute;top:-50%;left:-20%;width:140%;height:200%;background:radial-gradient(ellipse at center,rgba(240,165,0,.12) 0%,transparent 60%);pointer-events:none;} .countdown-title{font-family:var(--fu);font-size:.78rem;color:var(--gold);letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:.4rem;position:relative;z-index:1;} .countdown-subtitle{font-family:var(--fd);font-weight:700;font-size:1.4rem;letter-spacing:-.5px;color:var(--text);margin-bottom:1.2rem;position:relative;z-index:1;} .countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px;margin:0 auto;position:relative;z-index:1;} .countdown-unit{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 8px;display:flex;flex-direction:column;gap:4px;} .countdown-num{font-family:var(--fx);font-weight:700;font-size:2.4rem;color:var(--gold);letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums;} .countdown-lbl{font-family:var(--fu);font-size:.65rem;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;font-weight:600;} @media (max-width:560px){ .countdown-card{padding:1.1rem 1rem;} .countdown-subtitle{font-size:1.1rem;} .countdown-grid{gap:5px;} .countdown-unit{padding:10px 4px;} .countdown-num{font-size:1.7rem;} .countdown-lbl{font-size:.55rem;letter-spacing:.6px;} } /* Toggle switch */ .cd-toggle{position:relative;display:inline-block;width:48px;height:24px;flex-shrink:0;} .cd-toggle input{opacity:0;width:0;height:0;} .cd-toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--bg);border:1px solid var(--border);border-radius:24px;transition:.25s;} .cd-toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background:var(--muted);border-radius:50%;transition:.25s;} .cd-toggle input:checked + .cd-toggle-slider{background:rgba(240,165,0,.18);border-color:var(--gold);} .cd-toggle input:checked + .cd-toggle-slider:before{transform:translateX(24px);background:var(--gold);} /* ═══ Notifications bell + panel ═══ */ /* ───────────────────────────────────── TAB BAR FIXA (mobile) — substitui hamburguer ───────────────────────────────────── */ #tabBar{ display:none; position:fixed; bottom:0; left:0; right:0; background:var(--bg2); border-top:1px solid var(--border); z-index:300; /* Padding bottom: ~metade do safe-area do iOS (~17px no iPhone X+). Compromisso entre demasiado colado ao fundo e demasiado alto. */ padding:6px 4px calc(env(safe-area-inset-bottom, 0px) / 2); box-shadow:0 -4px 16px rgba(0,0,0,.4); } #tabBar .tab-bar-inner{ display:flex; justify-content:space-around; align-items:center; max-width:520px; margin:0 auto; gap:2px; } .tb-btn{ flex:1; background:none; border:none; padding:8px 4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; font-family:var(--fu); font-size:.6rem; font-weight:600; color:var(--muted); letter-spacing:.3px; text-transform:uppercase; transition:color .15s; position:relative; min-height:48px; border-radius:8px; -webkit-tap-highlight-color:transparent; text-align:center; line-height:1.25; } /* Estado de press apenas em devices com hover (não toca em mobile touch) */ @media (hover:hover){ .tb-btn:hover{background:rgba(240,165,0,.05);} } /* Estado :active (durante o toque/click) — efeito "pushed in": o elemento afunda ligeiramente com sombra interna, dando sensação física de pressão. Funciona em mobile (touch) e desktop (mouse-down). */ /* Tab bar mobile — botões dourados afundam */ .tb-btn:active{ background:rgba(240,165,0,.18); transform:scale(.94); box-shadow:inset 0 2px 6px rgba(0,0,0,.25); transition:transform .1s, background .1s, box-shadow .1s; } /* Menu lateral — botões com fundo dourado mais profundo */ .smenu-btn:active{ background:rgba(240,165,0,.22); transform:scale(.98) translateY(1px); box-shadow:inset 0 2px 8px rgba(0,0,0,.3); border-color:rgba(240,165,0,.5); transition:transform .1s, background .1s, box-shadow .1s; } /* Cards interactivos (jogos, jogadores, etc.) — afundam ligeiramente */ .mc:active,.pcard:active,.ajornada-card:active,.cal-match-row:active, .bracket-match:active,.lbi:active,.notif-item:active,.card-item:active{ transform:scale(.985) translateY(1px); box-shadow:inset 0 1px 6px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.15); transition:transform .1s, box-shadow .1s; } /* Botões dourados (btn-gold) — afundam com sombra mais forte */ .btn-gold:active{ transform:translateY(1px) scale(.98); box-shadow:inset 0 2px 8px rgba(0,0,0,.35); filter:brightness(.9); transition:transform .1s, box-shadow .1s, filter .1s; } /* Botões fantasma e ícones — efeito mais subtil */ .btn-ghost:active,button.btn:active:not(.btn-gold){ transform:translateY(1px) scale(.98); box-shadow:inset 0 1px 4px rgba(0,0,0,.25); filter:brightness(.85); transition:transform .1s, box-shadow .1s, filter .1s; } /* Filtros do leaderboard — afundam com bg dourado */ .lb-filter-btn:active{ background:rgba(240,165,0,.2); transform:scale(.96); box-shadow:inset 0 2px 5px rgba(0,0,0,.25); } /* Tabs do header e ptabs do painel detalhe */ .tab-btn:active,.ptab:active,.mtab:active{ background:rgba(240,165,0,.12); transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.2); } /* Botões de cenário (Fantasy Impact) */ .fi-btn:active{ background:rgba(240,165,0,.18); transform:scale(.96); box-shadow:inset 0 2px 5px rgba(0,0,0,.25); } /* Botões circulares (cruzes, sino) — afundam mais visivelmente */ .pclose:active,.mclose:active,.side-menu-close:active,.notif-bell:active{ transform:scale(.88); background:var(--bg4); box-shadow:inset 0 2px 6px rgba(0,0,0,.4); transition:transform .1s, background .1s, box-shadow .1s; } .tb-btn.active{color:var(--gold);} .tb-btn .tb-icon{font-size:1.2rem;line-height:1;} .tb-btn.active .tb-icon{transform:scale(1.1);} .tb-btn .tb-badge{ position:absolute; top:4px; right:18%; background:var(--red); color:#fff; font-size:.55rem; font-weight:700; min-width:14px; height:14px; padding:0 3px; border-radius:7px; display:flex; align-items:center; justify-content:center; letter-spacing:0; } @media (max-width:768px){ #tabBar{display:block;} /* Padding bottom do body: 54px base + ~metade do safe-area do iOS para conteúdo não ficar tapado */ body{padding-bottom:calc(54px + env(safe-area-inset-bottom, 0px) / 2);} /* Esconder o hamburger e o mobile menu — substituídos pela tab bar */ .hamburger{display:none !important;} .mobile-menu{display:none !important;} /* Indicar quando há notificação */ } @media (min-width:769px){ #tabBar{display:none !important;} /* tabs-nav é o primeiro filho do
e fica encostada ao header (h=66px). Tirar top padding do main para isso acontecer sem margens negativas. */ main{padding-top:0;} /* Estende a barra de ponta a ponta do
com margens negativas */ .tabs-nav{position:sticky;top:var(--header-h);z-index:200;margin:0 -2rem 0;box-shadow:0 4px 14px rgba(0,0,0,.3);} /* MASTHEAD em desktop: sticky abaixo da tabs-nav. A imagem (.np-hero-image, antes deste elemento no DOM) faz scroll normal e desaparece. Só o título + meta + tagline ficam fixos. */ :root{--sticky-top:calc(var(--header-h) + var(--tabs-nav-h));} .np-masthead{margin-left:-2rem;margin-right:-2rem;padding-left:2rem;padding-right:2rem;} } .notif-bell{position:relative;background:var(--bg3);border:1px solid var(--border);border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .15s;color:var(--text);flex-shrink:0;} /* ───────────────────────────────────── SIDE MENU — slide-out direita (mobile) ───────────────────────────────────── */ #sideMenuBackdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:401; opacity:0; pointer-events:none; transition:opacity .3s ease; } #sideMenuBackdrop.open{opacity:1;pointer-events:auto;} #sideMenu{ position:fixed; top:0; right:0; bottom:0; width:340px; max-width:88vw; background:var(--bg2); border-left:1px solid var(--border); z-index:402; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; box-shadow:-8px 0 24px rgba(0,0,0,.4); } #sideMenu.open{transform:translateX(0);} .side-menu-close{ position:absolute; top:14px; right:14px; width:36px; height:36px; background:var(--bg3); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.95rem; color:var(--muted); z-index:10; transition:all .15s; } .side-menu-close:hover{color:var(--text);background:var(--bg4);} #sideMenuContent{padding:54px 18px 24px;display:flex;flex-direction:column;gap:14px;} /* Cabeçalho do utilizador no menu lateral */ .smenu-user{ background:linear-gradient(135deg,rgba(240,165,0,.15),rgba(240,165,0,.04)); border:1px solid rgba(240,165,0,.3); border-radius:14px; padding:18px; } .smenu-user-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;} .smenu-user-av{ width:52px; height:52px; border-radius:50%; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:1.7rem; flex-shrink:0; } .smenu-user-info{flex:1;min-width:0;} .smenu-user-name{font-family:var(--fu);font-weight:700;font-size:1.1rem;color:var(--text);letter-spacing:.5px;line-height:1.1;} .smenu-user-team{font-family:var(--fb);font-size:.82rem;color:var(--muted);margin-top:3px;} .smenu-user-champ{font-family:var(--fb);font-size:.78rem;color:var(--gold);margin-top:5px;} /* Stats grid no header do user */ .smenu-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px;} .smenu-stat{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;padding:9px 4px;text-align:center;} .smenu-stat-val{font-family:var(--fu);font-weight:800;font-size:1.15rem;color:var(--gold);line-height:1.1;} .smenu-stat-lbl{font-family:var(--fu);font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:3px;font-weight:600;} /* Forma — últimos 5 jogos (no fundo do card do menu lateral) */ .smenu-form{ margin-top:12px; padding-top:10px; border-top:1px solid var(--border); } .smenu-form-lbl{ font-family:var(--fu); font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin-bottom:6px; text-align:center; } .smenu-form-bars{ display:flex; gap:5px; align-items:flex-end; height:30px; padding:0 4px; } .smenu-form-bar{ flex:1; border-radius:3px 3px 0 0; min-height:3px; transition:height .6s ease; } .smenu-form-bar.fb-5{background:var(--green);} .smenu-form-bar.fb-4{background:#ffdd00;} .smenu-form-bar.fb-3{background:var(--blue);} .smenu-form-bar.fb-1{background:#ffa94d;} .smenu-form-bar.fb-0{background:var(--red);} .smenu-form-bar.fb-null{background:var(--muted2);opacity:.4;} /* Admin / guest variantes */ .smenu-user.admin{ background:linear-gradient(135deg,rgba(255,77,109,.15),rgba(255,77,109,.04)); border-color:rgba(255,77,109,.3); } .smenu-user.admin .smenu-user-team{color:var(--red);} .smenu-user.guest{ background:var(--bg3); border-color:var(--border); text-align:center; padding:24px 18px; } /* Itens de navegação no menu lateral */ .smenu-section-label{ font-family:var(--fu); font-size:.65rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; padding:0 4px; margin:6px 0 -4px; } .smenu-btn{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:var(--bg3); color:var(--text); font-family:var(--fu); font-size:.95rem; font-weight:600; letter-spacing:.4px; cursor:pointer; transition:all .15s; text-transform:uppercase; width:100%; text-align:left; position:relative; } .smenu-btn:hover{background:rgba(240,165,0,.1);border-color:rgba(240,165,0,.3);color:var(--gold);} .smenu-btn.active{background:rgba(240,165,0,.14);border-color:rgba(240,165,0,.3);color:var(--gold);} .smenu-btn .smenu-ic{font-size:1.2rem;width:24px;text-align:center;flex-shrink:0;} .smenu-btn.danger{color:var(--red);border-color:rgba(255,77,109,.25);} .smenu-btn.danger:hover{background:rgba(255,77,109,.08);border-color:var(--red);} .smenu-btn-badge{margin-left:auto;background:var(--red);color:#fff;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:0;} .smenu-divider{height:1px;background:var(--border);margin:4px 0;} /* Grid 2x para a secção Navegação no menu lateral mobile. Items mais compactos, vê-se mais sem scroll. */ .smenu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .smenu-btn-grid{ flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px 8px; text-align:center; font-size:.78rem; letter-spacing:.3px; min-height:80px; } .smenu-btn-grid .smenu-ic{ font-size:1.6rem; width:auto; } .smenu-btn-grid .smenu-lbl{ line-height:1.1; } /* Badge no botão de Notificações em grid: overlay top-right */ .smenu-btn-badge-grid{ position:absolute; top:6px; right:6px; margin:0 !important; } /* ───────────────────────────────────── TOASTS — feedback breve (3s) ───────────────────────────────────── */ #toastContainer{position:fixed;top:80px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 32px));pointer-events:none;} .toast{ background:var(--bg3); border:1px solid var(--border); border-left:4px solid var(--gold); border-radius:8px; padding:12px 16px; font-family:var(--fb); font-size:.88rem; color:var(--text); box-shadow:0 8px 28px rgba(0,0,0,.4); display:flex; align-items:flex-start; gap:10px; pointer-events:auto; animation:toastIn .3s cubic-bezier(.34,1.56,.64,1); max-width:100%; } .toast.toast-out{animation:toastOut .25s ease-in forwards;} .toast.success{border-left-color:var(--green);} .toast.error{border-left-color:var(--red);} .toast.warning{border-left-color:var(--gold);} .toast.info{border-left-color:var(--blue);} .toast-icon{font-size:1.1rem;flex-shrink:0;line-height:1.4;} .toast-msg{flex:1;line-height:1.4;} .toast-msg strong{color:var(--gold);font-weight:700;} .toast-close{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:0;flex-shrink:0;line-height:1;opacity:.6;transition:opacity .15s;} .toast-close:hover{opacity:1;color:var(--text);} @keyframes toastIn{ from{transform:translateX(380px);opacity:0;} to{transform:translateX(0);opacity:1;} } @keyframes toastOut{ from{transform:translateX(0);opacity:1;max-height:200px;margin-bottom:10px;} to{transform:translateX(380px);opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;} } @media (max-width:520px){ #toastContainer{top:70px;right:8px;left:8px;max-width:none;} } /* ───────────────────────────────────── LOADER inicial — splash enquanto DB carrega ───────────────────────────────────── */ #initLoader{ position:fixed; inset:0; background:var(--bg); z-index:9998; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:24px; transition:opacity .35s ease-out; } #initLoader.fade{opacity:0;pointer-events:none;} .init-loader-emblem{font-size:3rem;animation:spinEmblem 2s linear infinite;} .init-loader-text{font-family:var(--fu);font-size:.78rem;letter-spacing:3px;color:var(--muted);text-transform:uppercase;} .init-loader-bar{ width:200px; height:3px; background:var(--bg3); border-radius:3px; overflow:hidden; position:relative; } .init-loader-bar::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:loaderSlide 1.4s ease-in-out infinite; } @keyframes spinEmblem{ 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} } @keyframes loaderSlide{ 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} } .init-loader-brand{ display:flex; flex-direction:column; align-items:center; gap:10px; } .init-loader-logo{ width:104px; height:104px; display:block; transform:translateX(3px); } .init-loader-subtitle{ font-family:var(--fd); font-weight:700; font-size:1.1rem; letter-spacing:3px; text-transform:uppercase; color:var(--gold2); line-height:1; } /* ───────────────────────────────────── OFFLINE banner (quando Supabase falha) ───────────────────────────────────── */ #offlineBanner{ position:fixed; top:0; left:0; right:0; background:var(--red); color:#fff; text-align:center; padding:8px 16px; font-family:var(--fu); font-size:.78rem; letter-spacing:.5px; z-index:10000; display:none; box-shadow:0 2px 8px rgba(0,0,0,.4); } #offlineBanner.visible{display:block;animation:slideDown .25s ease-out;} @keyframes slideDown{from{transform:translateY(-100%);}to{transform:translateY(0);}} .notif-bell.flash{animation:notifFlash 1s ease-out;} @keyframes notifFlash{ 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(240,165,0,.8);} 30%{transform:scale(1.2) rotate(-12deg);box-shadow:0 0 0 8px rgba(240,165,0,.4);} 60%{transform:scale(1.1) rotate(8deg);box-shadow:0 0 0 14px rgba(240,165,0,0);} 100%{transform:scale(1) rotate(0);box-shadow:0 0 0 0 rgba(240,165,0,0);} } .notif-bell:hover{border-color:var(--gold);background:rgba(240,165,0,.05);} .notif-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-family:var(--fu);font-size:.65rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;padding:0 5px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);letter-spacing:0;} #notifBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);z-index:401;opacity:0;pointer-events:none;transition:opacity .25s;} #notifBackdrop.open{opacity:1;pointer-events:auto;} #notifPanel{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:100vw;background:var(--bg2);border-left:1px solid var(--border);z-index:402;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);} #notifPanel.open{transform:translateX(0);} .notif-hdr{padding:1rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;} .notif-title{font-family:var(--fd);font-weight:700;font-size:1.15rem;letter-spacing:-.3px;color:var(--text);} .notif-actions{display:flex;gap:6px;align-items:center;} .notif-clear{background:transparent;border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-family:var(--fu);font-size:.7rem;color:var(--muted);cursor:pointer;letter-spacing:.3px;transition:all .15s;} .notif-clear:hover{color:var(--text);border-color:var(--muted);} .notif-x{background:var(--bg3);border:1px solid var(--border);border-radius:50%;width:28px;height:28px;cursor:pointer;color:var(--muted);font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all .15s;} .notif-x:hover{color:var(--text);border-color:var(--gold);} .notif-list{flex:1;min-height:0;overflow-y:auto;padding:.6rem 0;} .notif-empty{padding:3rem 1.5rem;text-align:center;color:var(--muted);font-family:var(--fu);font-size:.9rem;} .notif-empty-icon{font-size:2.5rem;margin-bottom:.6rem;opacity:.5;} .notif-item{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;display:flex;gap:10px;align-items:flex-start;} .notif-item:hover{background:rgba(255,255,255,.02);} .notif-item.unread{background:rgba(240,165,0,.04);border-left:3px solid var(--gold);padding-left:13px;} .notif-item.unread:hover{background:rgba(240,165,0,.08);} .notif-icon{font-size:1.4rem;flex-shrink:0;margin-top:2px;} .notif-body{flex:1;min-width:0;} .notif-msg{font-family:var(--fb);font-size:.9rem;color:var(--text);line-height:1.4;margin-bottom:3px;} .notif-msg strong{color:var(--gold);font-weight:700;} .notif-msg .pos-pts{color:var(--green);} .notif-msg .neg-pts{color:var(--red);} .notif-time{font-family:var(--fu);font-size:.7rem;color:var(--muted);letter-spacing:.3px;} /* ═══════════════════════════════════════════════════════════ 🎴 COLECCIONÁVEIS — Premium FUT-style cards ═══════════════════════════════════════════════════════════ */ .cards-section{margin-bottom:3rem;} .cards-section-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.2rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px;} .cards-section-num{font-family:var(--fu);font-size:.72rem;color:var(--muted);letter-spacing:2px;} .cards-section-title{font-family:var(--fd);font-weight:800;font-size:1.6rem;letter-spacing:-.5px;color:var(--text);display:flex;align-items:center;gap:10px;} .cards-section-title .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);} .cards-section-meta{font-family:var(--fu);font-size:.74rem;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;} .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;} /* Base card frame */ .coll-card{ position:relative; aspect-ratio: 3/4.4; border-radius:14px; cursor:pointer; overflow:hidden; background:linear-gradient(180deg,#1a1f2e 0%,#0d1019 100%); border:1px solid rgba(255,255,255,.08); transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s; font-family:var(--fu); user-select:none; } .coll-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.4);} .coll-card.locked{filter:grayscale(.85);opacity:.55;cursor:default;} .coll-card.locked:hover{transform:none;box-shadow:none;} .coll-card.locked::after{content:'🔒';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2.5rem;opacity:.6;z-index:5;text-shadow:0 2px 8px rgba(0,0,0,.5);} /* Tier banner at top */ .coll-tier{ position:absolute;top:10px;left:10px; font-family:var(--fu);font-size:.62rem;font-weight:700; letter-spacing:1.5px;text-transform:uppercase; padding:3px 9px;border-radius:6px; background:rgba(0,0,0,.55);backdrop-filter:blur(4px); z-index:3; } .coll-pts{ position:absolute;top:10px;right:10px; font-family:var(--fx);font-weight:700;font-size:.78rem; padding:3px 9px;border-radius:6px; background:rgba(0,0,0,.55);backdrop-filter:blur(4px); z-index:3;letter-spacing:.3px; } /* Big background number (card-001 etc) — watermark style */ .coll-bgnum{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); font-family:var(--fd);font-weight:900;font-size:13rem; letter-spacing:-15px;line-height:1; opacity:.06;color:#fff; pointer-events:none;z-index:1; font-variant-numeric:tabular-nums; text-align:center; } /* Center artwork halo */ .coll-art{ position:absolute;top:32%;left:50%; transform:translate(-50%,-50%); width:90px;height:90px; display:flex;align-items:center;justify-content:center; z-index:2; } .coll-art-circle{ position:absolute;inset:-6px; border:2.5px solid currentColor; border-radius:50%; opacity:.85; } .coll-art-icon{ width:60px;height:60px; border-radius:50%; background:currentColor; display:flex;align-items:center;justify-content:center; font-size:1.8rem; z-index:2; box-shadow:0 4px 18px rgba(0,0,0,.35); } /* Image-based cards (overrides emoji icon) */ .coll-card.has-image .coll-art{ position:absolute; top:34px; left:4%; right:4%; bottom:22%; width:auto; height:auto; aspect-ratio:auto; transform:none !important; /* override edition-groups rotation/translate */ z-index:2; pointer-events:none; } /* Defensive: ensure ALL editions on has-image cards use the rectangular bounding box */ .coll-card.has-image.edition-matches .coll-art, .coll-card.has-image.edition-general .coll-art, .coll-card.has-image.edition-groups .coll-art, .coll-card.has-image.edition-playoffs .coll-art{ transform:none !important; top:34px; left:4%; right:4%; bottom:22%; width:auto; height:auto; } .coll-art-image{ width:100%; height:100%; display:block; position:relative; } .coll-art-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)); } /* Move the watermark number further behind the image for legibility */ .coll-card.has-image .coll-bgnum{ top:50%; opacity:.1; } /* Keep tier+pts banners floating on top */ .coll-card.has-image .coll-tier, .coll-card.has-image .coll-pts{z-index:4;} /* Smooth transition to bottom info area without solid black */ .coll-card.has-image .coll-info{ background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.78) 100%); padding-top:18px; } /* Bottom info area */ .coll-info{ position:absolute;left:0;right:0;bottom:0; padding:14px 14px 12px; text-align:center; z-index:3; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 50%); } .coll-name{font-family:var(--fd);font-weight:800;font-size:1rem;color:var(--text);letter-spacing:0;text-transform:uppercase;margin-bottom:3px;line-height:1.15;} .coll-desc{font-family:var(--fu);font-size:.62rem;color:rgba(255,255,255,.55);letter-spacing:.2px;line-height:1.3;} .coll-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.08);font-family:var(--fu);font-size:.6rem;color:rgba(255,255,255,.4);letter-spacing:.5px;} .coll-foot .stars{color:var(--gold);letter-spacing:1px;} /* ─── RARITIES ─── */ /* LEGENDARY (5pts perfect / 1st place) */ .coll-card.legendary{background:radial-gradient(ellipse at top,rgba(240,165,0,.25) 0%,#1a0e02 65%,#0a0500 100%);border-color:rgba(240,165,0,.45);} .coll-card.legendary .coll-tier{color:#ffd96b;border:1px solid rgba(240,165,0,.5);} .coll-card.legendary .coll-pts{color:#ffd96b;border:1px solid rgba(240,165,0,.5);} .coll-card.legendary .coll-art{color:#ffc83a;} .coll-card.legendary .coll-name{color:#ffd96b;} .coll-card.legendary .coll-bgnum{color:#ffc83a;opacity:.08;} .coll-card.legendary::before{ content:'';position:absolute;inset:0; background: repeating-linear-gradient(45deg,rgba(255,200,58,.04) 0px,rgba(255,200,58,.04) 2px,transparent 2px,transparent 8px), radial-gradient(circle at 25% 80%,rgba(255,200,58,.18) 0%,transparent 50%), radial-gradient(circle at 75% 20%,rgba(255,200,58,.12) 0%,transparent 50%); pointer-events:none;z-index:0; } /* EPIC (4pts / podium) */ .coll-card.epic{background:radial-gradient(ellipse at top,rgba(168,85,247,.18) 0%,#0e0820 65%,#06030f 100%);border-color:rgba(168,85,247,.4);} .coll-card.epic .coll-tier{color:#c89bff;border:1px solid rgba(168,85,247,.5);} .coll-card.epic .coll-pts{color:#c89bff;border:1px solid rgba(168,85,247,.5);} .coll-card.epic .coll-art{color:#a855f7;} .coll-card.epic .coll-name{color:#c89bff;} .coll-card.epic .coll-bgnum{color:#a855f7;opacity:.08;} .coll-card.epic::before{ content:'';position:absolute;inset:0; background: radial-gradient(circle at 30% 70%,rgba(168,85,247,.18) 0%,transparent 50%), radial-gradient(circle at 70% 30%,rgba(168,85,247,.12) 0%,transparent 50%); pointer-events:none;z-index:0; } /* RARE (3pts / top 5) */ .coll-card.rare{background:radial-gradient(ellipse at top,rgba(0,180,216,.18) 0%,#02101a 65%,#000810 100%);border-color:rgba(0,180,216,.4);} .coll-card.rare .coll-tier{color:#5cd5ff;border:1px solid rgba(0,180,216,.5);} .coll-card.rare .coll-pts{color:#5cd5ff;border:1px solid rgba(0,180,216,.5);} .coll-card.rare .coll-art{color:#00b4d8;} .coll-card.rare .coll-name{color:#5cd5ff;} .coll-card.rare .coll-bgnum{color:#00b4d8;opacity:.08;} .coll-card.rare::before{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 50% 60%,rgba(0,180,216,.18) 0%,transparent 60%); pointer-events:none;z-index:0; } /* UNCOMMON (1pt / top 10 / metade superior) */ .coll-card.uncommon{background:radial-gradient(ellipse at top,rgba(0,230,118,.13) 0%,#021510 65%,#00080a 100%);border-color:rgba(0,230,118,.35);} .coll-card.uncommon .coll-tier{color:#5dffa6;border:1px solid rgba(0,230,118,.5);} .coll-card.uncommon .coll-pts{color:#5dffa6;border:1px solid rgba(0,230,118,.5);} .coll-card.uncommon .coll-art{color:#00e676;} .coll-card.uncommon .coll-name{color:#5dffa6;} .coll-card.uncommon .coll-bgnum{color:#00e676;opacity:.08;} /* COMMON (0pts) */ .coll-card.common{background:linear-gradient(180deg,#1a1f2e 0%,#0d1019 100%);border-color:rgba(255,255,255,.1);} .coll-card.common .coll-tier{color:#a8b4c5;border:1px solid rgba(255,255,255,.15);} .coll-card.common .coll-pts{color:#a8b4c5;border:1px solid rgba(255,255,255,.15);} .coll-card.common .coll-art{color:#a8b4c5;} .coll-card.common .coll-name{color:#dde4ee;} .coll-card.common .coll-bgnum{color:#a8b4c5;opacity:.08;} /* MYTHIC — for "lanterna vermelha" */ .coll-card.mythic{background:radial-gradient(ellipse at top,rgba(255,77,109,.2) 0%,#1a0306 65%,#0a0000 100%);border-color:rgba(255,77,109,.45);} .coll-card.mythic .coll-tier{color:#ff8c9c;border:1px solid rgba(255,77,109,.5);} .coll-card.mythic .coll-pts{color:#ff8c9c;border:1px solid rgba(255,77,109,.5);} .coll-card.mythic .coll-art{color:#ff4d6d;} .coll-card.mythic .coll-name{color:#ff8c9c;} .coll-card.mythic .coll-bgnum{color:#ff4d6d;opacity:.08;} .coll-card.mythic::before{ content:'';position:absolute;inset:0; background: repeating-linear-gradient(135deg,rgba(255,77,109,.04) 0px,rgba(255,77,109,.04) 2px,transparent 2px,transparent 10px), radial-gradient(circle at 50% 80%,rgba(255,77,109,.2) 0%,transparent 60%); pointer-events:none;z-index:0; } /* === SECRET tier (Cartas Secretas — Único, dark indigo/violet) === */ .coll-card.secret{background:radial-gradient(ellipse at top,rgba(123,97,255,.22) 0%,#0c0820 65%,#04020e 100%);border-color:rgba(123,97,255,.45);} .coll-card.secret .coll-tier{color:#c6b8ff;border:1px solid rgba(123,97,255,.5);} .coll-card.secret .coll-pts{color:#c6b8ff;border:1px solid rgba(123,97,255,.5);} .coll-card.secret .coll-art{color:#9d80ff;} .coll-card.secret .coll-name{color:#c6b8ff;} .coll-card.secret .coll-bgnum{color:#9d80ff;opacity:.08;} /* === MYSTERY locked overlay — applies when card.mystery && !unlocked. Overrides every tier rule with neutral charcoal so no hint leaks through. === */ .coll-card.mystery-locked{ background:linear-gradient(180deg,#1c1c22 0%,#0a0a0d 100%); border-color:rgba(255,255,255,.08); filter:none; opacity:1; cursor:pointer; overflow:visible; } .coll-card.mystery-locked .coll-tier, .coll-card.mystery-locked .coll-pts, .coll-card.mystery-locked .coll-name, .coll-card.mystery-locked .coll-desc{color:#5a5a66;} .coll-card.mystery-locked .coll-art-icon{text-shadow:0 0 24px rgba(255,255,255,.08);} .coll-card.mystery-locked::after{content:none;} .coll-card.mystery-locked:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.6);} .mystery-curtain { position: absolute; inset: 0; border-radius: inherit; transform: scale(1.02); transform-origin: center; clip-path: url(#curtainWave); -webkit-clip-path: url(#curtainWave); background: linear-gradient( 180deg, transparent 3px, rgba(0,0,0,0.55) 6px, transparent 22px ), radial-gradient( ellipse 85% 65% at 50% 35%, rgba(220,140,90,0.10) 0%, transparent 65% ), radial-gradient( ellipse 80% 20% at 50% 100%, rgba(255,200,150,0.05) 0%, transparent 100% ), linear-gradient( 0deg, rgba(0,0,0,0.30) 0%, transparent 20px ), repeating-linear-gradient( 90deg, rgba(0,0,0,0.55) 0px, rgba(0,0,0,0.25) 4px, rgba(255,255,255,0.02) 8px, rgba(255,255,255,0.06) 18px, rgba(255,255,255,0.10) 24px, rgba(255,255,255,0.04) 28px, transparent 32px, rgba(0,0,0,0.20) 36px, rgba(0,0,0,0.55) 44px ), linear-gradient(180deg, #0d0404 0%, #150808 10%, #1f0a0a 22%, #3a1414 35%, #5a1e1e 48%, #3a1414 60%, #1f0a0a 75%, #0d0404 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; z-index: 10; cursor: pointer; } .mystery-curtain-text { font-family: var(--fx); font-size: clamp(0.85rem, 3.5vw, 1.15rem); font-weight: 800; color: #5a5a66; letter-spacing: 2px; } .curtain-rod { position: absolute; top: -5px; left: -3px; right: -3px; height: 10px; background: linear-gradient(180deg, #ffe87c 0%, #d4af37 15%, #ffd700 30%, #aa7c11 50%, #d4af37 65%, #b8860b 85%, #8b6914 100% ); border-radius: 6px; box-shadow: 0 12px 20px -6px rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,215,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.4); z-index: 12; pointer-events: none; } .curtain-rod::before { display: none; } .curtain-rod::after { display: none; } .curtain-hem { position: absolute; bottom: -2px; left: -3px; right: -3px; height: 14px; clip-path: url(#curtainWave); -webkit-clip-path: url(#curtainWave); background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.05) 4px, rgba(0,0,0,0.12) 8px, rgba(0,0,0,0.25) 12px, rgba(0,0,0,0.40) 15px, rgba(0,0,0,0.55) 17px, rgba(0,0,0,0.65) 18px, transparent 20px ); z-index: 12; pointer-events: none; } .curtain-rings { position: absolute; top: 3px; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, transparent 0px, transparent 14px, rgba(212,175,55,0.6) 14px, rgba(212,175,55,0.6) 18px, transparent 18px, transparent 30px ); z-index: 13; pointer-events: none; } /* ─── EDITION VARIANTS (different card layouts/themes per category) ─── */ /* Padrão único para todas as edições — feixes verticais luminosos */ .coll-card::after{ content:'';position:absolute;inset:0; background: linear-gradient(90deg,transparent 0%,transparent 16%,rgba(255,255,255,.06) 18%,rgba(255,255,255,.06) 20%,transparent 22%,transparent 78%,rgba(255,255,255,.06) 80%,rgba(255,255,255,.06) 82%,transparent 84%), linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 25%,transparent 75%,rgba(0,0,0,.15) 100%); pointer-events:none;z-index:1; } .coll-card.edition-groups .coll-art{transform:translate(-50%,-50%) rotate(-3deg);} .coll-card.edition-playoffs .coll-art-circle{ border-style:double;border-width:5px; } /* RESPONSIVE */ @media (max-width:680px){ /* Cabeçalho da secção mais compacto */ .cards-section{margin-bottom:1.6rem;} .cards-section-hdr{ margin-bottom:.7rem; padding-bottom:.4rem; flex-wrap:nowrap; gap:6px; } .cards-section-title{font-size:1.05rem;} .cards-section-num{font-size:.62rem;letter-spacing:1px;} .cards-section-meta{font-size:.62rem;letter-spacing:.8px;} /* Grid 2-colunas em mobile, cartas tamanho médio */ .cards-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } .coll-card{ aspect-ratio:3/4; } .coll-art{width:74px;height:74px;top:32%;} .coll-art-icon{width:52px;height:52px;font-size:1.5rem;} .coll-name{ font-size:.78rem; line-height:1.15; margin-bottom:0; /* Limitar a 2 linhas com ellipsis se for muito comprido */ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Esconder descrição em mobile - só aparece ao abrir detalhe */ .coll-desc{display:none;} .coll-bgnum{font-size:8.5rem;letter-spacing:-10px;} .coll-tier{font-size:.54rem;padding:2px 7px;letter-spacing:1px;} .coll-pts{font-size:.68rem;padding:2px 7px;} .coll-card.locked::after{font-size:2.2rem;} } /* Em ecrãs muito pequenos (<360px) */ @media (max-width:360px){ .cards-grid{gap:8px;} .coll-art{width:64px;height:64px;} .coll-art-icon{width:46px;height:46px;font-size:1.3rem;} .coll-name{font-size:.72rem;} } /* ─── CARD DETAIL MODAL ─── */ .cdm-content{display:flex;flex-direction:column;align-items:center;gap:1.4rem;padding:.5rem .5rem 0;} .cdm-card-wrap{width:280px;max-width:80vw;aspect-ratio:3/4.4;} .cdm-info{text-align:center;width:100%;max-width:380px;} .cdm-status{display:inline-block;padding:5px 14px;border-radius:14px;font-family:var(--fu);font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:.6rem;} .cdm-status.unlocked{background:rgba(0,230,118,.12);color:var(--green);border:1px solid rgba(0,230,118,.35);} .cdm-status.locked{background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--border);} .cdm-name{font-family:var(--fd);font-weight:800;font-size:1.65rem;letter-spacing:-.4px;color:var(--text);margin-bottom:.5rem;line-height:1.15;} .cdm-desc{font-family:var(--fb);font-size:.92rem;color:var(--muted);line-height:1.45;margin-bottom:1rem;} .cdm-meta{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;font-family:var(--fu);font-size:.84rem;color:var(--text);text-align:left;} .cdm-meta-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;} .cdm-meta-row + .cdm-meta-row{border-top:1px dashed var(--border);} .cdm-meta-row .lbl{color:var(--muted);font-size:.78rem;letter-spacing:.3px;} .cdm-meta-row .val{font-weight:700;color:var(--text);} .cdm-meta-row .val.gold{color:var(--gold);} .cal-pred-window{background:rgba(0,230,118,.08);border-top:1px solid rgba(0,230,118,.15);padding:10px 16px;display:flex;align-items:center;gap:8px;font-family:var(--fb);font-size:.88rem;color:var(--green);letter-spacing:.3px;line-height:1.4;} .cal-pred-window-closed{background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.06);padding:10px 16px;font-family:var(--fb);font-size:.88rem;color:var(--muted);letter-spacing:.3px;line-height:1.4;} .cal-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .cal-dot-open{background:var(--green);animation:blink 1.5s infinite;} .cal-dot-soon{background:var(--gold);} .cal-dot-closed{background:var(--muted2);} /* ═══ PLAYER DETAIL PANEL ═══ */ #playerPanel{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:100vw;background:var(--bg2);border-left:1px solid var(--border);z-index:402;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);} #playerPanel.open{transform:translateX(0);} #ppback{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:401;opacity:0;pointer-events:none;transition:opacity .3s;} #ppback.open{opacity:1;pointer-events:all;} .pp-hero{background:linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 100%);padding:2rem 2rem 1.5rem;border-bottom:1px solid var(--border);position:relative;} .pp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(240,165,0,.1) 0%,transparent 70%);} .pp-av{width:72px;height:72px;border-radius:50%;background:var(--bg3);border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:2.2rem;margin:0 auto 1rem;position:relative;} .pp-name{font-family:var(--fd);font-weight:700;font-size:1.7rem;letter-spacing:-.7px;text-align:center;} .pp-team{font-family:var(--fu);font-size:.85rem;color:var(--muted);text-align:center;margin-top:3px;} .pp-stats{display:flex;gap:16px;justify-content:center;margin-top:1rem;} .pp-stat{text-align:center;} .pp-stat-val{font-family:var(--fx);font-weight:700;font-size:1.6rem;color:var(--gold);letter-spacing:-.8px;} .pp-stat-lbl{font-family:var(--fu);font-size:.65rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;} .pp-body{padding:1.5rem;flex:1;} .pp-section-title{font-family:var(--fu);font-size:.75rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:.8rem;margin-top:1.2rem;} .pp-section-title:first-child{margin-top:0;} .pp-match-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;margin-bottom:6px;background:rgba(255,255,255,.03);} .pp-match-row:hover{background:rgba(255,255,255,.06);} .pp-match-teams{font-family:var(--fb);font-size:.95rem;font-weight:700;letter-spacing:.2px;} .pp-match-meta{font-family:var(--fb);font-size:.82rem;color:var(--muted);letter-spacing:.2px;} .pp-pred-score{font-family:var(--fx);font-weight:700;font-size:1.15rem;letter-spacing:1px;} .pp-result-score{font-family:var(--fx);font-weight:700;font-size:1.15rem;letter-spacing:1px;} .pp-pts-badge{font-family:var(--fu);font-weight:700;font-size:1.1rem;padding:3px 10px;border-radius:20px;white-space:nowrap;} .pp-pts-good{color:var(--green);background:rgba(0,230,118,.12);} .pp-pts-ok{color:var(--blue);background:rgba(0,180,216,.1);} .pp-pts-zero{color:var(--muted);background:rgba(255,255,255,.05);} .pp-pts-pend{color:var(--muted);background:rgba(255,255,255,.05);} .pp-match-num{font-family:var(--fu);font-weight:600;font-size:.82rem;color:var(--muted2);} .pp-subs-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:10px 12px;border-radius:8px;margin-bottom:6px;background:rgba(255,255,255,.03);font-family:var(--fu);} .pp-subs-jor{font-weight:700;color:var(--text);font-size:.88rem;} .pp-subs-stamp{color:var(--muted);font-size:.78rem;} .pp-subs-stamp strong{color:var(--text);font-family:var(--fx);letter-spacing:.5px;} .pp-subs-rank{font-family:var(--fx);font-weight:700;color:var(--gold);font-size:1.1rem;letter-spacing:.5px;} .pp-subs-total{font-weight:400;color:var(--muted);font-size:.78rem;font-family:var(--fu);letter-spacing:0;} .pp-subs-empty{opacity:.6;} .pp-subs-empty .pp-subs-meta{grid-column:2 / 4;text-align:right;color:var(--muted2);font-size:.78rem;} /* DETAIL PANEL (match) */ #detailPanel{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:100vw;background:var(--bg2);border-left:1px solid var(--border);z-index:400;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;} #detailPanel.open{transform:translateX(0);} #pback{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:399;opacity:0;pointer-events:none;transition:opacity .3s;} #pback.open{opacity:1;pointer-events:all;} .pclose{position:sticky;top:14px;align-self:flex-end;margin:14px 16px -36px auto;width:36px;height:36px;padding:0;background:var(--bg3);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;font-size:.9rem;color:var(--muted);transition:all .2s;z-index:500;flex-shrink:0;backdrop-filter:blur(4px);box-sizing:border-box;line-height:1;} .pclose:hover{color:var(--text);border-color:rgba(255,255,255,.2);} .phero{background:linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 100%);padding:3.5rem 2rem 1.8rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;position:sticky;top:0;z-index:5;overflow:hidden;flex-shrink:0;} .phero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(240,165,0,.1) 0%,transparent 70%);pointer-events:none;} .pteams-row{display:flex;align-items:center;gap:1.25rem;position:relative;z-index:2;max-width:100%;} .pteam{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;max-width:120px;} .pteam-name{font-family:var(--fb);font-weight:700;font-size:1.05rem;letter-spacing:.8px;text-transform:uppercase;line-height:1.15;word-break:break-word;} .pscore-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;} .pscore{font-family:var(--fx);font-weight:700;font-size:3.2rem;letter-spacing:-2px;line-height:1;min-width:90px;text-align:center;white-space:nowrap;} .pvst{font-family:var(--fd);font-weight:600;font-size:1.8rem;color:var(--muted2);letter-spacing:4px;} .pmeta{font-family:var(--fu);font-size:.88rem;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;position:relative;z-index:2;margin-top:.2rem;padding:4px 12px;background:rgba(0,0,0,.35);border-radius:20px;border:1px solid var(--border);} /* Admin live match controls */ .admin-live-panel{background:linear-gradient(135deg,rgba(255,77,109,.08),rgba(240,165,0,.05));border:1px solid rgba(255,77,109,.25);border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1.2rem;} .admin-live-title{font-family:var(--fd);font-weight:700;font-size:1.1rem;color:var(--red);letter-spacing:-.3px;margin-bottom:.8rem;display:flex;align-items:center;gap:8px;} .admin-live-inputs{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap;} .admin-live-inputs .sinput{width:60px;height:52px;font-size:1.8rem;} .admin-live-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;} .admin-live-actions .btn{flex:1;min-width:120px;} .badge-live-decorrer{display:inline-flex;align-items:center;gap:6px;background:rgba(255,77,109,.15);border:1px solid rgba(255,77,109,.4);color:#ff6b85;padding:3px 12px;border-radius:20px;font-family:var(--fu);font-weight:700;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;} .badge-live-decorrer .ldot{width:6px;height:6px;background:#ff6b85;border-radius:50%;animation:pulse 1.4s ease-in-out infinite;} /* ════════════════════════════════════════ DIÁRIO DA LIGA — admin (mockup) ══════════════════════════════════════ */ .diario-subtabs{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:3px;margin-bottom:1.4rem;overflow-x:auto;scrollbar-width:none;} .diario-subtabs::-webkit-scrollbar{display:none;} .diario-subtab{flex-shrink:0;padding:8px 14px;border:none;background:transparent;color:var(--muted);font-family:var(--fu);font-size:.78rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;border-radius:7px;transition:all .2s;white-space:nowrap;} .diario-subtab.active{background:var(--bg);color:var(--gold);box-shadow:0 1px 3px rgba(0,0,0,.3);} .diario-subtab:hover:not(.active){color:var(--text);} /* Barra do estado da edição */ .diario-edition-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,rgba(240,165,0,.06),rgba(255,255,255,.015));border:1px solid rgba(240,165,0,.25);border-radius:10px;padding:.9rem 1.2rem;margin-bottom:1.4rem;flex-wrap:wrap;} .diario-edition-num{font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--gold);letter-spacing:-.2px;} .diario-edition-when{font-family:var(--fu);font-size:.78rem;color:var(--muted);margin-top:.15rem;} .diario-edition-when strong{color:var(--text);} .diario-edition-actions{display:flex;gap:8px;flex-wrap:wrap;} /* Section labels */ .diario-section-label{font-family:var(--fu);font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:1rem 0 .8rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);} /* Cards de notícia editáveis */ .diario-news-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:1rem 1.2rem;margin-bottom:.8rem;transition:border-color .2s;} .diario-news-card.is-lead{border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(240,165,0,.04),var(--bg3) 30%);} .diario-news-card.is-cut{border-style:dashed;background:rgba(255,255,255,.01);} .diario-news-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.7rem;flex-wrap:wrap;} .diario-news-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--fu);font-size:.66rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1px solid;} .tag-podium{color:var(--gold);border-color:rgba(240,165,0,.4);background:rgba(240,165,0,.08);} .tag-perfect{color:var(--purple);border-color:rgba(168,85,247,.4);background:rgba(168,85,247,.08);} .tag-rise{color:var(--green);border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08);} .tag-fall{color:var(--red);border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08);} .tag-cross{color:var(--blue);border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.08);} .tag-streak{color:var(--gold2);border-color:rgba(252,211,77,.4);background:rgba(252,211,77,.08);} .tag-recap{color:var(--muted);border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.03);} .tag-lineup{color:var(--text);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);} .diario-news-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .diario-news-source{font-family:var(--fu);font-size:.65rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);font-style:italic;} .diario-news-pos{font-family:var(--fu);font-size:.7rem;font-weight:700;color:var(--muted);background:var(--bg);padding:2px 7px;border-radius:5px;} .diario-news-cut-reason{font-family:var(--fu);font-size:.7rem;color:var(--red);font-style:italic;} .diario-pill-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--muted);cursor:pointer;font-size:.85rem;transition:all .15s;padding:0;} .diario-pill-btn:hover{color:var(--text);border-color:rgba(240,165,0,.4);background:rgba(240,165,0,.05);} .diario-pill-btn.is-active{color:var(--gold);border-color:rgba(240,165,0,.5);background:rgba(240,165,0,.1);} .diario-pill-btn-danger:hover{color:var(--red);border-color:rgba(255,77,109,.45);background:rgba(255,77,109,.08);} /* Form fields */ .diario-news-fields{display:flex;flex-direction:column;gap:.5rem;} .diario-news-fields label{font-family:var(--fu);font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:.3rem;} .diario-input{background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--fb);font-size:.88rem;padding:8px 10px;outline:none;transition:border-color .15s;width:100%;font-weight:400;line-height:1.4;} .diario-input:focus{border-color:rgba(240,165,0,.5);background:var(--bg2);} textarea.diario-input{resize:vertical;min-height:50px;font-family:var(--fb);} /* Details (factos) */ .diario-details{margin-top:.4rem;} .diario-details summary{cursor:pointer;font-family:var(--fu);font-size:.7rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);padding:.3rem 0;} .diario-details summary:hover{color:var(--muted);} .diario-facts{font-family:'Courier New',monospace;font-size:.75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.7rem .9rem;color:var(--muted);margin:.4rem 0 0;overflow-x:auto;line-height:1.5;} /* Add button */ .diario-add-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:.8rem;background:transparent;border:1px dashed var(--border);border-radius:8px;color:var(--muted);font-family:var(--fu);font-size:.78rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .2s;margin-top:.5rem;} .diario-add-btn:hover{border-color:rgba(240,165,0,.4);color:var(--gold);background:rgba(240,165,0,.03);} .diario-add-btn-sm{padding:.5rem;font-size:.7rem;} /* Lineup preview no card de rodapé */ .diario-lineup-preview{display:flex;flex-direction:column;gap:.3rem;font-family:var(--fb);font-size:.85rem;color:var(--muted);} .diario-lineup-preview strong{color:var(--gold);font-family:var(--fn);font-weight:600;font-variant-numeric:tabular-nums;margin-right:.6rem;} /* Templates */ .diario-template-group{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:1rem 1.2rem;margin-bottom:.8rem;} .diario-template-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.8rem;flex-wrap:wrap;} .diario-template-list{display:flex;flex-direction:column;gap:.5rem;} .diario-template-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.5rem;} .diario-template-label{font-family:var(--fu);font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);} /* Configurações */ .diario-config-grid{display:flex;flex-direction:column;gap:1rem;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:1.2rem;} .diario-config-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;} .diario-config-row label:not(.cd-toggle){font-family:var(--fu);font-size:.78rem;font-weight:600;color:var(--text);min-width:200px;flex:1;} .diario-events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.6rem;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:1.2rem;} .diario-event-toggle{display:flex;align-items:center;gap:8px;font-family:var(--fu);font-size:.82rem;color:var(--text);cursor:pointer;padding:.4rem;border-radius:6px;transition:background .15s;} .diario-event-toggle:hover{background:rgba(255,255,255,.03);} .diario-event-toggle input{accent-color:var(--gold);} /* Edições anteriores */ .diario-history-list{display:flex;flex-direction:column;gap:.5rem;} .diario-history-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;transition:border-color .15s;} .diario-history-row:hover{border-color:rgba(240,165,0,.3);} .diario-history-row-zero{border-color:rgba(168,85,247,.3);background:linear-gradient(90deg,rgba(168,85,247,.04),var(--bg3) 30%);} .diario-history-num{font-family:var(--fn);font-weight:700;font-size:1.1rem;color:var(--gold);min-width:60px;} .diario-history-row-zero .diario-history-num{color:var(--purple);} .diario-history-info{display:flex;flex-direction:column;gap:.15rem;min-width:0;} .diario-history-info strong{font-family:var(--fd);font-weight:600;font-size:.95rem;color:var(--text);} .diario-history-info span{font-family:var(--fu);font-size:.72rem;color:var(--muted);letter-spacing:.5px;} .diario-history-actions{display:flex;gap:6px;flex-wrap:wrap;} /* Logs */ .diario-log-list{display:flex;flex-direction:column;gap:4px;font-family:var(--fu);} .diario-log-row{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:.8rem;padding:.6rem .9rem;border-radius:6px;font-size:.78rem;background:var(--bg3);border:1px solid var(--border);} .diario-log-row.diario-log-cut{opacity:.55;} .diario-log-time{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;} .diario-log-type{font-size:.62rem !important;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;border:1px solid;} .diario-log-msg{color:var(--text);font-family:var(--fb);font-size:.82rem;} .diario-log-status{font-size:.7rem;font-weight:600;color:var(--muted);} .diario-log-ok .diario-log-status{color:var(--green);} .diario-log-cut .diario-log-status{color:var(--red);} /* Mobile adjustments */ @media (max-width:768px){ .diario-news-card{padding:.85rem .9rem;} .diario-news-head{gap:.5rem;} .diario-news-controls{justify-content:flex-end;width:100%;} .diario-template-row{grid-template-columns:1fr;} .diario-history-row{grid-template-columns:auto 1fr;} .diario-history-actions{grid-column:1/-1;justify-content:flex-end;} .diario-log-row{grid-template-columns:auto 1fr;row-gap:.3rem;} .diario-log-msg{grid-column:1/-1;} .diario-log-status{grid-column:2;justify-self:end;} } .ptabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;} .ptab{flex:1;padding:14px;font-family:var(--fu);font-size:.85rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;border-bottom:2px solid transparent;position:relative;top:1px;line-height:1.3;} .ptab.active{color:var(--gold);border-bottom-color:var(--gold);} .ptab:hover:not(.active){color:var(--text);} .pbody{padding:1.5rem;flex:1;} .ptc{display:none;animation:fadeUp .25s ease;} .ptc.active{display:block;} /* STAT BARS */ .sbrow{margin-bottom:1rem;} .sblbl{display:flex;justify-content:space-between;font-family:var(--fu);font-size:.82rem;margin-bottom:5px;} .sbval{font-weight:700;} .sbtrack{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;display:flex;} .sbhome{background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:3px 0 0 3px;transition:width 1s ease;} .sbaway{background:linear-gradient(90deg,var(--blue),#0096c7);border-radius:0 3px 3px 0;transition:width 1s ease;} /* TIMELINE */ .tl{margin-top:1.5rem;} .tltitle{font-family:var(--fu);font-size:.78rem;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.8rem;} .tlev{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);} .tlev:last-child{border-bottom:none;} .tlmin{font-family:var(--fu);font-weight:700;font-size:1.05rem;color:var(--muted);min-width:36px;} .tlico{font-size:1rem;} .tlinfo{font-family:var(--fu);font-size:.88rem;} .tlpl{font-weight:700;} .tltm{color:var(--muted);font-size:.78rem;} /* PREDS TABLE */ .ptable{width:100%;border-collapse:collapse;font-family:var(--fu);font-size:.85rem;} .ptable th{padding:8px 10px;text-align:left;color:var(--muted);font-size:.72rem;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border);} .ptable th:nth-child(2),.ptable td:nth-child(2){text-align:center;} .ptable th:last-child{text-align:right;} .ptable td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.04);} .ptable td:last-child{text-align:right;} .ptable tr:last-child td{border-bottom:none;} .ppl{display:flex;align-items:center;gap:8px;} .ppav{width:28px;height:28px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;} .psc{font-family:var(--fx);font-weight:700;font-size:1.25rem;letter-spacing:1px;} .pbadge{font-family:var(--fu);font-weight:700;font-size:1.3rem;} .pbadge.exact{color:var(--green);} .pbadge.winplus{color:#ffdd00;} .pbadge.win{color:var(--blue);} .pbadge.partial{color:#ffa94d;} .pbadge.wrong{color:var(--red);} .pbadge.pend{color:var(--muted);} /* ═══ MATRIX MODAL (prognósticos grid) ═══ */ .matrix-hero{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,var(--bg3),var(--bg2));border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:1.1rem;flex-wrap:wrap;} .matrix-hero .mh-team{display:flex;align-items:center;gap:8px;font-family:var(--fu);font-weight:700;font-size:.95rem;letter-spacing:.5px;text-transform:uppercase;} .matrix-hero .mh-score{font-family:var(--fu);font-size:1.7rem;color:var(--gold);letter-spacing:3px;padding:2px 12px;background:var(--bg);border-radius:6px;} .matrix-hero .mh-vs{font-family:var(--fu);font-size:1.4rem;color:var(--muted2);} .matrix-hero .mh-gamenum{font-family:var(--fu);font-size:.7rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;width:100%;text-align:center;margin-top:4px;} .matrix-scroll{overflow-x:auto;margin:0 -.4rem 1rem;padding:0 .4rem;} .matrix-grid{display:grid;grid-template-columns:auto repeat(6,minmax(88px,1fr));gap:3px;min-width:640px;} .matrix-axis-lbl{font-family:var(--fu);font-size:.65rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;text-align:center;display:flex;align-items:center;justify-content:center;padding:2px;} .matrix-axis-top{background:rgba(240,165,0,.14);border:1px solid rgba(240,165,0,.3);border-radius:4px;color:var(--gold);font-family:var(--fu);font-size:1.05rem;font-weight:700;letter-spacing:0;min-height:30px;} .matrix-axis-side{background:rgba(0,180,216,.14);border:1px solid rgba(0,180,216,.3);border-radius:4px;color:var(--blue);font-family:var(--fu);font-size:1.05rem;font-weight:700;letter-spacing:0;min-width:36px;} .matrix-corner{background:linear-gradient(180deg,rgba(240,165,0,.18),rgba(0,180,216,.18));border:1px solid rgba(240,165,0,.25);border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--fu);font-size:.65rem;font-weight:700;letter-spacing:.5px;line-height:1.2;text-align:center;padding:4px;gap:2px;} .matrix-corner span{display:block;} .matrix-corner .mc-fora{color:var(--gold);text-transform:uppercase;} .matrix-corner .mc-casa{color:var(--blue);text-transform:uppercase;} .matrix-cell{display:flex;flex-direction:column;background:var(--bg3);border:1px solid var(--border);border-radius:5px;transition:all .15s;padding:4px 3px;gap:2px;min-height:44px;} .matrix-cell.empty{opacity:.25;min-height:34px;} .matrix-cell-hdr{display:flex;align-items:center;justify-content:space-between;gap:4px;font-family:var(--fu);font-size:.58rem;color:var(--muted);font-weight:600;padding:0 2px 2px;border-bottom:1px dashed rgba(255,255,255,.06);margin-bottom:2px;} .matrix-cell.empty .matrix-cell-hdr{border-bottom:none;margin-bottom:0;} .matrix-cell-score{letter-spacing:.5px;} .matrix-cell-count{font-family:var(--fu);font-weight:700;font-size:.95rem;line-height:1;color:var(--text);} .matrix-chips-col{display:flex;flex-direction:column;gap:2px;} .matrix-name-chip{font-family:var(--fu);font-size:.64rem;padding:3px 5px;background:rgba(255,255,255,.06);border-radius:3px;line-height:1.15;text-align:center;letter-spacing:.2px;word-break:break-word;hyphens:auto;} .matrix-name-chip.is-me{background:rgba(240,165,0,.2);color:var(--gold);font-weight:700;} /* color categories */ .matrix-cell.m-exact{background:rgba(0,230,118,.18);border-color:rgba(0,230,118,.5);} .matrix-cell.m-exact .matrix-cell-count{color:var(--green);} .matrix-cell.m-winplus{background:rgba(255,221,0,.15);border-color:rgba(255,221,0,.4);} .matrix-cell.m-winplus .matrix-cell-count{color:#ffdd00;} .matrix-cell.m-win{background:rgba(0,180,216,.14);border-color:rgba(0,180,216,.35);} .matrix-cell.m-win .matrix-cell-count{color:var(--blue);} .matrix-cell.m-partial{background:rgba(255,169,77,.13);border-color:rgba(255,169,77,.35);} .matrix-cell.m-partial .matrix-cell-count{color:#ffa94d;} .matrix-cell.m-zero{background:rgba(255,77,109,.1);border-color:rgba(255,77,109,.3);} .matrix-cell.m-zero .matrix-cell-count{color:var(--red);} .matrix-cell.m-pending{background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.3);} .matrix-cell.m-pending .matrix-cell-count{color:var(--purple);} .matrix-actual{outline:2px solid var(--gold);outline-offset:1px;position:relative;} .matrix-actual::before{content:'★';position:absolute;top:-7px;right:-7px;background:var(--gold);color:#000;width:16px;height:16px;border-radius:50%;font-size:.7rem;display:flex;align-items:center;justify-content:center;z-index:2;} .matrix-legend{display:flex;flex-wrap:wrap;gap:6px 10px;font-family:var(--fu);font-size:.7rem;margin:0 0 1.2rem;padding:10px 12px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:8px;} .matrix-legend-item{display:flex;align-items:center;gap:5px;} .matrix-legend-dot{width:12px;height:12px;border-radius:3px;} .matrix-player-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;font-family:var(--fu);font-size:.78rem;} .matrix-player-chip.is-me{background:rgba(240,165,0,.1);border-color:rgba(240,165,0,.3);color:var(--gold);} .matrix-selected-list{display:flex;flex-wrap:wrap;gap:5px;} .matrix-empty-sel{font-family:var(--fu);font-size:.8rem;color:var(--muted);text-align:center;padding:10px;} /* FANTASY IMPACT */ .fi-btns{display:flex;gap:6px;margin-bottom:1.2rem;flex-wrap:wrap;} .fi-btn{font-family:var(--fu);font-size:.78rem;font-weight:700;letter-spacing:.5px;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;text-transform:uppercase;} .fi-btn.active{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000;border-color:transparent;} .fit{width:100%;border-collapse:collapse;font-family:var(--fu);font-size:.83rem;} .fit th{padding:7px 10px;text-align:left;color:var(--muted);font-size:.7rem;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border);} .fit th:last-child{text-align:right;} .fit td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.04);} .fit td:last-child{text-align:right;} .fit tr:last-child td{border-bottom:none;} .firank{font-family:var(--fu);font-weight:700;font-size:1.3rem;} .fich{font-family:var(--fu);font-size:.82rem;font-weight:700;min-width:24px;display:inline-block;text-align:center;} .up{color:var(--green)}.dn{color:var(--red)}.eq{color:var(--muted);} /* MODAL */ .mo{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s;} .mo.open{opacity:1;pointer-events:all;} .mwrap{position:relative;width:100%;max-width:480px;} .modal{background:var(--bg2);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:2rem 1.8rem;width:100%;transform:scale(.94) translateY(10px);transition:transform .3s;max-height:90vh;overflow-y:auto;overflow-x:hidden;} .mo.open .modal{transform:scale(1) translateY(0);} .mx{position:absolute;top:-10px;right:-10px;width:34px;height:34px;padding:0;background:var(--bg3);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;font-size:.9rem;color:var(--muted);transition:all .2s;z-index:2;box-sizing:border-box;line-height:1;} .mx:hover{color:var(--text);border-color:rgba(255,255,255,.2);} .mtitle{font-family:var(--fd);font-weight:700;font-size:1.95rem;letter-spacing:-.8px;margin-bottom:.3rem;overflow-wrap:break-word;} .msub{color:#b8c4d6;font-family:var(--fu);font-size:.95rem;margin-bottom:1.5rem;font-weight:500;} .fg{margin-bottom:1.15rem;} .flbl{display:block;font-family:var(--fu);font-size:.82rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#b8c4d6;margin-bottom:7px;} .finp{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 16px;color:var(--text);font-family:var(--fb);font-size:1rem;outline:none;transition:border-color .2s;} .finp:focus{border-color:var(--gold);} .finp::placeholder{color:var(--muted2);} .fsel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237a8ba0'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;cursor:pointer;} .fsel option{background:var(--bg2);} .mact{display:flex;gap:10px;margin-top:2rem;} .merr{color:var(--red);font-family:var(--fu);font-size:.85rem;margin-top:8px;display:none;} /* ADMIN */ #adminSection{display:none;max-width:1280px;margin:0 auto;padding:0 2rem 3rem;position:relative;z-index:1;} /* Mobile-friendly admin */ @media (max-width:680px){ #adminSection{padding:0 10px 2rem;overflow-x:hidden;} #adminSection h2{font-size:1.2rem !important;} #adminSection h3{font-size:1rem !important;} /* Ad-boxes (cards) com padding reduzido em mobile */ #adminSection .adbox{padding:1rem .85rem !important;} #adminSection .adtitle{font-size:1.1rem !important;margin-bottom:.6rem !important;} #adminSection .sbox{padding:10px !important;} #adminSection .sval{font-size:1.4rem !important;} #adminSection .slbl{font-size:.65rem !important;} /* Listas e tabelas admin: scroll horizontal em vez de cortar */ #adminSection table{font-size:.78rem;} #adminSection .scrollable{overflow-x:auto;-webkit-overflow-scrolling:touch;} /* Botões admin mais compactos em mobile */ #adminSection .btn-sm{padding:6px 10px;font-size:.72rem;} /* Garantir que NADA dentro do admin extravasa horizontalmente */ #adminSection *{max-width:100%;box-sizing:border-box;} /* Inputs/selects: sempre 100% width */ #adminSection input,#adminSection select,#adminSection textarea{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } } /* Jornada window editor rows */ .jw-row{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:12px 18px;align-items:center;} .jw-row.modified{border-color:rgba(0,180,216,.4);background:rgba(0,180,216,.04);} .jw-row .jw-label{font-family:var(--fu);font-weight:700;font-size:.95rem;color:var(--text);grid-column:1 / -1;display:flex;align-items:center;gap:10px;} .jw-row .jw-mod-badge{font-family:var(--fu);font-size:.65rem;font-weight:700;background:rgba(0,180,216,.18);color:var(--blue);padding:2px 8px;border-radius:8px;letter-spacing:.5px;text-transform:uppercase;} .jw-row .jw-fields{display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .jw-row .jw-field{display:flex;flex-direction:column;gap:4px;} .jw-row .jw-field label{font-family:var(--fu);font-size:.7rem;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;font-weight:600;} .jw-row .jw-field input{background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--fu);font-size:.85rem;padding:7px 10px;outline:none;color-scheme:dark;} .jw-row .jw-field input:focus{border-color:var(--gold);} .jw-row .jw-actions{display:flex;gap:6px;} .jw-row .jw-actions button{font-family:var(--fu);font-size:.75rem;font-weight:600;padding:8px 12px;border-radius:6px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text);transition:all .15s;} .jw-row .jw-actions .jw-save{background:var(--gold);color:#000;border-color:var(--gold);} .jw-row .jw-actions .jw-save:hover{background:var(--gold2);} .jw-row .jw-actions .jw-reset{color:var(--muted);} .jw-row .jw-actions .jw-reset:hover{color:var(--text);border-color:var(--muted2);} .jw-row .jw-actions button:disabled{opacity:.4;cursor:not-allowed;} @media (max-width:680px){ .jw-row{grid-template-columns:1fr;padding:12px 14px;} .jw-row .jw-fields{flex-direction:column;align-items:stretch;gap:10px;} .jw-row .jw-field{width:100%;} .jw-row .jw-field input{width:100%;box-sizing:border-box;} .jw-row .jw-actions{justify-content:stretch;} .jw-row .jw-actions button{flex:1;} } /* ═══ ADMIN — Mobile fixes para countdown e gestão de utilizadores ═══ */ @media (max-width:680px){ /* Countdown: força inputs em coluna única */ #adminSection [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; } #adminSection input[type="text"], #adminSection input[type="datetime-local"], #adminSection input[type="number"]{ width:100% !important; box-sizing:border-box !important; max-width:100%; } /* Gestão de utilizadores: empilhar avatar/info/acções */ .auser-row{ flex-wrap:wrap; padding:12px; } .auser-info{flex:1 1 calc(100% - 56px);min-width:0;} .auser-actions{ flex:1 1 100%; justify-content:stretch; margin-top:6px; gap:6px; } .auser-actions .btn-sm{ flex:1 1 auto; font-size:.7rem; padding:6px 8px; white-space:nowrap; } /* Modal de utilizador editor: inputs full width */ #modal-editplayer input, #modal-editplayer select{width:100% !important;box-sizing:border-box;} } /* ═══ ADMIN — USERS (compact row list) ═══ */ .auser-row{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:8px;display:flex;align-items:center;gap:14px;transition:background .15s;} .auser-row:hover{background:rgba(255,255,255,.02);} .auser-avatar{width:38px;height:38px;background:var(--bg);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;} .auser-info{flex:1;min-width:0;} .auser-name{font-family:var(--fd);font-weight:700;font-size:.98rem;color:var(--text);letter-spacing:-.3px;} .auser-team{font-family:var(--fu);font-size:.76rem;color:var(--muted);} .auser-actions{display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0;} /* ═══ ADMIN — USER PREDS (modal content) ═══ */ .up-jcard{background:var(--bg3);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;} .up-jcard.submitted{border-color:rgba(0,230,118,.3);} .up-jcard.empty{opacity:.55;} .up-jhdr{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--bg);cursor:pointer;transition:background .15s;} .up-jhdr:hover{background:rgba(255,255,255,.025);} .up-jhdr .up-jname{flex:1;font-family:var(--fd);font-weight:700;color:var(--text);font-size:.95rem;letter-spacing:-.2px;} .up-jhdr .up-jstatus{font-family:var(--fu);font-size:.74rem;letter-spacing:.3px;} .up-jstatus.sub{color:var(--green);font-weight:700;} .up-jstatus.pend{color:var(--muted);} .up-jhdr .up-jtime{font-family:var(--fu);font-size:.7rem;color:var(--muted);} .up-jhdr .up-jarrow{color:var(--muted);font-size:.85rem;transition:transform .2s;} .up-jcard.open .up-jarrow{transform:rotate(90deg);} .up-jbody{display:none;border-top:1px solid var(--border);background:var(--bg);} .up-jcard.open .up-jbody{display:block;} .up-jactions{display:flex;gap:6px;padding:8px 14px;border-bottom:1px dashed var(--border);background:rgba(255,77,109,.03);} .up-prow{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.03);font-family:var(--fu);font-size:.84rem;} .up-prow:last-child{border-bottom:none;} .up-prow .up-gnum{font-family:var(--fu);font-size:.68rem;color:var(--gold);background:var(--bg2);padding:2px 8px;border-radius:8px;font-weight:700;letter-spacing:.3px;} .up-prow .up-teams{color:var(--text);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .up-prow .up-score{font-family:var(--fx);font-weight:700;font-size:1rem;letter-spacing:-.5px;padding:2px 10px;border-radius:5px;background:var(--bg2);color:var(--blue);} .up-prow .up-score.empty{color:var(--muted);font-style:italic;font-weight:400;background:transparent;font-size:.82rem;} .up-prow .up-pts{font-family:var(--fu);font-size:.72rem;font-weight:700;letter-spacing:.3px;} .up-prow .up-pts.exact{color:var(--green);} .up-prow .up-pts.winplus{color:#ffdd00;} .up-prow .up-pts.win{color:var(--blue);} .up-prow .up-pts.partial{color:#ffa94d;} .up-prow .up-pts.zero{color:#ff8c9c;} .up-prow .up-time{font-family:var(--fu);font-size:.68rem;color:var(--muted);} .up-prow .up-del{background:transparent;border:1px solid rgba(255,77,109,.25);color:var(--red);font-family:var(--fu);font-size:.7rem;padding:3px 8px;border-radius:5px;cursor:pointer;transition:all .15s;} .up-prow .up-del:hover{background:rgba(255,77,109,.12);border-color:var(--red);} .up-prow .up-del:disabled{opacity:.3;cursor:not-allowed;} .up-empty-row{padding:10px 14px;font-family:var(--fu);font-size:.78rem;color:var(--muted);font-style:italic;text-align:center;} @media (max-width:560px){ .up-prow{grid-template-columns:1fr auto;gap:6px 10px;} .up-prow .up-gnum,.up-prow .up-time{grid-column:1 / -1;} .up-prow .up-pts{grid-column:1 / -1;text-align:right;} } /* ═══ ADMIN — JORNADA CARDS ═══ */ .ajornada-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin-bottom:10px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .15s;} .ajornada-card:hover{border-color:var(--gold);background:rgba(240,165,0,.04);transform:translateX(2px);} .ajornada-info{flex:1;min-width:0;} .ajornada-title{font-family:var(--fd);font-weight:700;font-size:1.02rem;color:var(--text);letter-spacing:-.3px;} .ajornada-meta{font-family:var(--fu);font-size:.76rem;color:var(--muted);margin-top:2px;line-height:1.4;} .ajornada-arrow{color:var(--muted);font-size:1.2rem;flex-shrink:0;} /* ═══ ADMIN — JORNADA PREDICTIONS TABLE (modal) ═══ */ .jp-table-wrap{overflow:auto;max-height:60vh;border:1px solid var(--border);border-radius:8px;} .jp-table{border-collapse:separate;border-spacing:0;font-family:var(--fu);font-size:.82rem;width:100%;} .jp-table th,.jp-table td{padding:8px 10px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);text-align:center;white-space:nowrap;} .jp-table th:last-child,.jp-table td:last-child{border-right:none;} .jp-table tr:last-child td{border-bottom:none;} .jp-table thead th{background:var(--bg);position:sticky;top:0;z-index:3;color:var(--gold);font-size:.74rem;letter-spacing:.5px;text-transform:uppercase;font-weight:700;} .jp-table tbody td.jp-match-cell,.jp-table tbody th.jp-match-col{background:var(--bg);position:sticky;left:0;z-index:2;text-align:left;color:var(--text);min-width:200px;max-width:260px;white-space:normal;line-height:1.3;} .jp-table thead th:first-child{z-index:4;left:0;} .jp-match-col{min-width:200px;} .jp-match-cell{padding:8px 12px !important;} .jp-match-label{font-family:var(--fu);font-size:.7rem;color:var(--gold);background:var(--bg2);padding:1px 6px;border-radius:6px;display:inline-block;margin-bottom:4px;font-weight:700;} .jp-match-teams{font-family:var(--fb);font-weight:600;color:var(--text);font-size:.86rem;} .jp-match-result{font-family:var(--fu);font-size:.7rem;color:var(--green);margin-top:3px;font-weight:600;} .jp-player-col{min-width:120px;} .jp-player-head{display:flex;flex-direction:column;align-items:center;gap:2px;} .jp-player-avatar{font-size:1rem;} .jp-player-name{font-family:var(--fd);font-weight:700;color:var(--text);font-size:.82rem;letter-spacing:-.2px;text-transform:none;} .jp-player-time{font-family:var(--fu);font-size:.62rem;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500;} .jp-cell{cursor:pointer;transition:all .15s;position:relative;font-family:var(--fx);font-weight:700;color:var(--blue);font-size:.95rem;letter-spacing:-.5px;} .jp-cell:hover{background:rgba(255,77,109,.1) !important;} .jp-cell:hover::after{content:'🗑️';position:absolute;right:4px;top:4px;font-size:.7rem;} .jp-cell.empty{color:var(--muted2);font-style:italic;font-weight:400;cursor:default;} .jp-cell.empty:hover{background:transparent !important;} .jp-cell.empty:hover::after{display:none;} .jp-cell-score{font-size:1rem;} .jp-cell-qual{font-family:var(--fu);font-size:.65rem;color:var(--purple);font-weight:500;margin-top:2px;letter-spacing:0;} .jp-cell-pts{font-family:var(--fu);font-size:.65rem;font-weight:700;margin-top:2px;letter-spacing:.3px;} .jp-table tbody tr:nth-child(even) td:not(.jp-match-cell),.jp-table tbody tr:nth-child(even) th.jp-match-col{background:rgba(255,255,255,.015);} .jp-cell.pts-exact{background:rgba(0,230,118,.12);color:var(--green);} .jp-cell.pts-winplus{background:rgba(255,221,0,.1);color:#ffdd00;} .jp-cell.pts-win{background:rgba(0,180,216,.1);color:var(--blue);} .jp-cell.pts-partial{background:rgba(255,169,77,.1);color:#ffa94d;} .jp-cell.pts-zero{background:rgba(255,77,109,.08);color:#ff8c9c;} .jp-cell.pts-exact .jp-cell-pts{color:var(--green);} .jp-cell.pts-winplus .jp-cell-pts{color:#ffdd00;} .jp-cell.pts-win .jp-cell-pts{color:var(--blue);} .jp-cell.pts-partial .jp-cell-pts{color:#ffa94d;} .jp-cell.pts-zero .jp-cell-pts{color:#ff8c9c;} .jp-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:12px 14px;margin-top:10px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;font-family:var(--fu);font-size:.78rem;color:var(--text);} .jp-legend-item{display:flex;align-items:center;gap:5px;} .jp-swatch{width:14px;height:14px;border-radius:3px;display:inline-block;} .jp-swatch.pts-exact{background:rgba(0,230,118,.4);} .jp-swatch.pts-winplus{background:rgba(255,221,0,.4);} .jp-swatch.pts-win{background:rgba(0,180,216,.4);} .jp-swatch.pts-partial{background:rgba(255,169,77,.4);} .jp-swatch.pts-zero{background:rgba(255,77,109,.4);} /* JP Modal — fixed-height layout, single scroll on the table */ .modal.jp-modal{ display:flex; flex-direction:column; max-height:92vh; height:92vh; overflow:hidden; /* kill the .modal default overflow:auto so we don't get an outer scroll */ padding:1.5rem 1.5rem 1.2rem; position:relative; } .modal.jp-modal .mtitle{flex-shrink:0;margin-bottom:0;padding-right:40px;} .modal.jp-modal .msub{flex-shrink:0;margin-bottom:1rem;} .modal.jp-modal #jpModalBody{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; } .modal.jp-modal .jp-table-wrap{ flex:1; min-height:0; max-height:none; overflow:auto; } .modal.jp-modal .jp-legend{flex-shrink:0;} .modal.jp-modal .mx{ position:absolute; top:14px; right:14px; width:32px; height:32px; } /* User Preds Modal — fixed-height layout, single scroll on the body */ .modal.up-modal{ display:flex; flex-direction:column; max-height:88vh; overflow:hidden; padding:1.5rem 1.5rem 1.2rem; position:relative; } .modal.up-modal .mtitle{flex-shrink:0;margin-bottom:0;padding-right:40px;} .modal.up-modal .msub{flex-shrink:0;margin-bottom:1rem;} .modal.up-modal #upModalBody{flex:1;min-height:0;overflow:auto;} .modal.up-modal .mx{position:absolute;top:14px;right:14px;width:32px;height:32px;} /* Card detail modal — reposition close X inside the modal */ .modal.card-detail-modal .mx{ position:absolute; top:14px; right:14px; width:32px; height:32px; z-index:20; } /* Admin user cards modal */ .modal.user-cards-modal{max-height:88vh;overflow-y:auto;} .modal.user-cards-modal .mx{position:absolute;top:14px;right:14px;width:32px;height:32px;} .uc-summary{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-family:var(--fu);} .uc-summary-stat{font-size:.82rem;color:var(--muted);} .uc-summary-stat strong{color:var(--gold);font-size:1rem;} .uc-section{margin-top:1.2rem;} .uc-section-title{font-family:var(--fu);font-size:.74rem;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border);} .uc-card-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;font-family:var(--fu);} .uc-card-row.unlocked{border-color:rgba(0,230,118,.25);background:rgba(0,230,118,.04);} .uc-card-row.locked{opacity:.5;} .uc-card-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--bg);flex-shrink:0;} .uc-card-info{min-width:0;} .uc-card-name{font-family:var(--fd);font-weight:700;font-size:.92rem;color:var(--text);letter-spacing:-.2px;} .uc-card-meta{font-family:var(--fu);font-size:.72rem;color:var(--muted);margin-top:2px;} .uc-card-tier{font-family:var(--fu);font-size:.65rem;font-weight:700;letter-spacing:1px;padding:3px 8px;border-radius:5px;text-transform:uppercase;flex-shrink:0;} .uc-card-tier.legendary{color:#ffd96b;background:rgba(240,165,0,.1);} .uc-card-tier.mythic{color:#ff8c9c;background:rgba(255,77,109,.1);} .uc-card-tier.epic{color:#c89bff;background:rgba(168,85,247,.1);} .uc-card-tier.rare{color:#5cd5ff;background:rgba(0,180,216,.1);} .uc-card-tier.uncommon{color:#5dffa6;background:rgba(0,230,118,.1);} .uc-card-tier.common{color:#a8b4c5;background:rgba(255,255,255,.04);} .uc-card-action{flex-shrink:0;} .uc-btn-revoke{background:transparent;border:1px solid rgba(255,77,109,.3);color:#ff8c9c;border-radius:5px;padding:5px 10px;font-family:var(--fu);font-size:.72rem;cursor:pointer;transition:all .15s;} .uc-btn-revoke:hover{background:rgba(255,77,109,.1);border-color:var(--red);color:var(--red);} .uc-btn-locked{font-family:var(--fu);font-size:.7rem;color:var(--muted);font-style:italic;padding:5px 8px;} @media (max-width:520px){ .uc-card-row{grid-template-columns:auto 1fr auto;gap:8px;padding:8px 10px;} .uc-card-tier{display:none;} .uc-card-name{font-size:.85rem;} .uc-card-meta{font-size:.66rem;} } .up-jornada{background:var(--bg3);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;} .up-jornada-hdr{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--bg);} .up-jornada-hdr .up-jname{font-family:var(--fd);font-weight:700;font-size:.98rem;color:var(--text);letter-spacing:-.2px;flex:1;min-width:0;} .up-jornada-hdr .up-jstatus{font-family:var(--fu);font-size:.74rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;padding:3px 10px;border-radius:12px;} .up-jornada-hdr .up-jstatus.submitted{background:rgba(0,230,118,.12);color:var(--green);border:1px solid rgba(0,230,118,.3);} .up-jornada-hdr .up-jstatus.partial{background:rgba(255,221,0,.1);color:#ffdd00;border:1px solid rgba(255,221,0,.3);} .up-jornada-hdr .up-jstatus.empty{background:rgba(255,77,109,.06);color:#ff8c9c;border:1px solid rgba(255,77,109,.2);} .up-jornada-time{font-family:var(--fu);font-size:.72rem;color:var(--muted);padding:0 16px 8px;font-style:italic;} .up-jornada-actions{padding:0 16px 10px;display:flex;gap:6px;justify-content:flex-end;} .up-jornada-actions .btn{font-size:.72rem;padding:5px 10px;} .up-preds-list{padding:0 16px 12px;display:flex;flex-direction:column;gap:4px;} .up-pred-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:7px 10px;background:var(--bg);border-radius:6px;font-family:var(--fu);font-size:.82rem;} .up-pred-row.empty-row{opacity:.5;} .up-pred-gnum{font-family:var(--fu);font-size:.65rem;color:var(--gold);background:var(--bg2);padding:1px 7px;border-radius:8px;font-weight:700;} .up-pred-teams{color:var(--text);font-weight:600;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .up-pred-score{font-family:var(--fx);font-weight:700;color:var(--blue);font-size:.95rem;letter-spacing:-.5px;min-width:40px;text-align:center;} .up-pred-score.empty{color:var(--muted2);font-style:italic;font-weight:400;} .up-pred-score.exact{color:var(--green);} .up-pred-score.winplus{color:#ffdd00;} .up-pred-score.win{color:var(--blue);} .up-pred-score.partial{color:#ffa94d;} .up-pred-score.zero{color:#ff8c9c;} .up-pred-pts{font-family:var(--fu);font-size:.7rem;font-weight:700;letter-spacing:.3px;} .up-pred-pts.exact{color:var(--green);} .up-pred-pts.winplus{color:#ffdd00;} .up-pred-pts.win{color:var(--blue);} .up-pred-pts.partial{color:#ffa94d;} .up-pred-pts.zero{color:#ff8c9c;} .up-pred-del{background:transparent;border:1px solid rgba(255,77,109,.3);color:#ff8c9c;border-radius:5px;padding:3px 8px;font-family:var(--fu);font-size:.7rem;cursor:pointer;transition:all .15s;} .up-pred-del:hover{background:rgba(255,77,109,.1);border-color:var(--red);color:var(--red);} .up-pred-del:disabled{opacity:.3;cursor:not-allowed;} .up-summary{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 18px;font-family:var(--fu);font-size:.82rem;} .up-summary .lbl{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;} .up-summary .val{color:var(--text);font-weight:700;font-size:.92rem;} .up-summary .val.gold{color:var(--gold);} .up-summary .val.muted{color:var(--muted);font-weight:500;font-style:italic;} @media (max-width:640px){ .up-pred-row{grid-template-columns:auto 1fr auto;gap:6px;} .up-pred-row .up-pred-pts{display:none;} .up-pred-teams{font-size:.75rem;} } .adbox{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;margin-bottom:1.2rem;} .adtitle{font-family:var(--fd);font-weight:600;font-size:1.35rem;letter-spacing:-.3px;color:var(--muted);margin-bottom:1rem;} .adrow{display:flex;justify-content:space-between;align-items:center;background:var(--bg2);border-radius:8px;padding:10px 14px;font-family:var(--fu);margin-bottom:8px;} .adname{font-weight:700;font-size:.93rem;} .admeta{color:var(--muted);font-size:.78rem;} .adpreds-section{background:var(--bg3);border-radius:8px;padding:10px 14px;margin-top:6px;margin-bottom:8px;display:none;} .adpreds-section.open{display:block;} /* ═══ NEW ADMIN: Jornada list (predictions management) ═══ */ .ajornada-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:1rem 1.3rem;margin-bottom:8px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .15s;} .ajornada-card:hover{border-color:var(--gold);background:rgba(240,165,0,.04);} .ajornada-info{flex:1;min-width:0;} .ajornada-title{font-family:var(--fd);font-weight:700;font-size:1.05rem;color:var(--text);letter-spacing:-.2px;margin-bottom:3px;} .ajornada-meta{font-family:var(--fu);font-size:.78rem;color:var(--muted);letter-spacing:.2px;} .ajornada-arrow{font-family:var(--fd);font-size:1.4rem;color:var(--muted2);transition:all .15s;} .ajornada-card:hover .ajornada-arrow{color:var(--gold);transform:translateX(3px);} /* ═══ NEW ADMIN: Predictions table modal ═══ */ .jp-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:8px;background:var(--bg);} .jp-table{border-collapse:collapse;font-family:var(--fu);font-size:.82rem;width:100%;} .jp-table th, .jp-table td{padding:8px 10px;border:1px solid var(--border);vertical-align:middle;} .jp-match-col{position:sticky;left:0;background:var(--bg2);z-index:2;text-align:left;font-family:var(--fu);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;min-width:200px;} .jp-player-col{background:var(--bg2);min-width:130px;text-align:center;} .jp-player-head{display:flex;flex-direction:column;align-items:center;gap:3px;} .jp-player-avatar{font-size:1.2rem;} .jp-player-name{font-weight:700;color:var(--text);font-size:.82rem;letter-spacing:-.2px;} .jp-player-time{font-size:.65rem;color:var(--muted);font-weight:500;letter-spacing:.3px;} .jp-match-cell{position:sticky;left:0;background:var(--bg2);z-index:1;text-align:left;} .jp-match-label{font-family:var(--fu);font-size:.7rem;color:var(--gold);font-weight:700;letter-spacing:.5px;text-transform:uppercase;} .jp-match-teams{font-family:var(--fu);font-size:.85rem;color:var(--text);font-weight:600;margin-top:1px;} .jp-match-result{font-family:var(--fx);font-size:.78rem;color:var(--green);font-weight:700;margin-top:2px;} .jp-cell{text-align:center;cursor:pointer;transition:all .12s;} .jp-cell:hover{outline:2px solid var(--red);outline-offset:-2px;} .jp-cell.empty{color:var(--muted2);cursor:default;} .jp-cell.empty:hover{outline:none;} .jp-cell-score{font-family:var(--fx);font-weight:700;font-size:1rem;color:var(--text);} .jp-cell-qual{font-family:var(--fu);font-size:.65rem;color:var(--purple);margin-top:1px;} .jp-cell-pts{font-family:var(--fu);font-size:.65rem;font-weight:700;margin-top:2px;letter-spacing:.3px;} .jp-cell.pts-exact{background:rgba(0,230,118,.18);} .jp-cell.pts-exact .jp-cell-pts{color:var(--green);} .jp-cell.pts-winplus{background:rgba(255,221,0,.16);} .jp-cell.pts-winplus .jp-cell-pts{color:#ffdd00;} .jp-cell.pts-win{background:rgba(0,180,216,.16);} .jp-cell.pts-win .jp-cell-pts{color:var(--blue);} .jp-cell.pts-partial{background:rgba(255,140,0,.16);} .jp-cell.pts-partial .jp-cell-pts{color:#ff9500;} .jp-cell.pts-zero{background:rgba(255,77,109,.13);} .jp-cell.pts-zero .jp-cell-pts{color:var(--red);} .jp-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:14px;font-family:var(--fu);font-size:.78rem;color:var(--text);background:var(--bg3);border-radius:8px;margin-top:1rem;} .jp-legend-item{display:inline-flex;align-items:center;gap:6px;} .jp-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;} .jp-swatch.pts-exact{background:rgba(0,230,118,.35);} .jp-swatch.pts-winplus{background:rgba(255,221,0,.32);} .jp-swatch.pts-win{background:rgba(0,180,216,.32);} .jp-swatch.pts-partial{background:rgba(255,140,0,.32);} .jp-swatch.pts-zero{background:rgba(255,77,109,.28);} .adpred-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);font-family:var(--fu);font-size:.8rem;} .adpred-row:last-child{border-bottom:none;} /* EMPTY */ .empty{text-align:center;padding:3rem 1rem;} .empty-icon{font-size:3rem;margin-bottom:1rem;} .empty-title{font-family:var(--fu);font-size:1.2rem;font-weight:700;margin-bottom:.5rem;} .empty-sub{font-family:var(--fu);font-size:.9rem;color:var(--muted);} /* TOGGLE */ .trow{display:flex;gap:5px;flex-wrap:wrap;} .tgl{font-family:var(--fu);font-size:.78rem;font-weight:700;letter-spacing:.5px;padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;text-transform:uppercase;} .tgl.active{background:var(--gold);color:#000;border-color:var(--gold);} .divider{height:1px;background:var(--border);margin:2rem 0;} /* BRACKET */ .bracket-wrapper{position:relative;width:100%;padding:20px 0;overflow-x:auto;} .bracket-container{display:flex;justify-content:space-between;gap:20px;padding:40px 25px;position:relative;width:100%;min-width:1100px;box-sizing:border-box;} .bracket-round{flex:1;display:flex;flex-direction:column;z-index:2;position:relative;} .round-title{text-align:center;font-family:var(--fu);font-weight:600;color:var(--gold);font-size:1.05rem;padding:10px;margin-bottom:25px;background:var(--bg3);border-bottom:2px solid var(--gold);text-transform:uppercase;letter-spacing:1px;} .round-content{flex:1;display:flex;flex-direction:column;justify-content:space-around;} .bracket-match{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 10px 8px;margin:10px 0;width:100%;min-height:78px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.5);position:relative;box-sizing:border-box;cursor:pointer;transition:all .15s;} .bracket-match:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:0 6px 20px rgba(240,165,0,.2);} .bm-gamenum{position:absolute;top:-8px;left:10px;background:var(--bg);border:1px solid var(--gold);border-radius:10px;padding:1px 8px;font-family:var(--fu);font-size:.62rem;font-weight:700;color:var(--gold);letter-spacing:.5px;} .bm-team{font-family:var(--fu);font-size:.78rem;padding:4px 2px;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:6px;border-bottom:1px dashed rgba(255,255,255,.05);} .bm-team:last-child{border-bottom:none;} .bm-team-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:4px;} .bm-team.placeholder .bm-team-name{color:var(--muted);font-style:italic;font-size:.7rem;padding-right:6px;letter-spacing:.2px;} .bm-team.winner{color:var(--gold);font-weight:700;} .bm-score{font-family:var(--fu);font-weight:700;color:var(--blue);background:var(--bg);padding:1px 7px;border-radius:4px;min-width:22px;text-align:center;font-size:.82rem;} .bm-score.pending{color:var(--muted2);background:transparent;} .bracket-match.ended{border-color:rgba(0,230,118,.3);} .bracket-match.live{border-color:var(--red);box-shadow:0 0 18px rgba(255,77,109,.25);} .bracket-match.final{border:2px solid var(--gold);background:linear-gradient(135deg,rgba(240,165,0,.08),rgba(240,165,0,.02));box-shadow:0 0 30px rgba(240,165,0,.25);min-height:90px;} .bracket-match.final .bm-gamenum{background:var(--gold);color:#000;border-color:var(--gold);} .bracket-match.third{border:2px solid #cd7f32;background:linear-gradient(135deg,rgba(205,127,50,.08),rgba(205,127,50,.02));box-shadow:0 0 20px rgba(205,127,50,.2);} .bracket-match.third .bm-gamenum{background:#cd7f32;color:#000;border-color:#cd7f32;} #bracket-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;} /* ACERCA DE modal info */ .about-section{margin-bottom:1.3rem;} .about-section-title{font-family:var(--fu);font-weight:600;font-size:1.25rem;letter-spacing:1px;color:var(--gold);margin-bottom:.7rem;} .about-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:.55rem;font-family:var(--fb);font-size:.95rem;line-height:1.5;color:#d8dee9;} .about-row strong{color:#fff;} .about-icon{font-size:1.1rem;flex-shrink:0;margin-top:.1rem;} /* ═══ HAMBURGER MENU ═══ */ .hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;transition:background .2s;} .hamburger:hover{background:rgba(255,255,255,.06);} .hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s;} .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);} .hamburger.open span:nth-child(2){opacity:0;} .hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);} .mobile-menu{display:none;position:fixed;top:66px;left:0;right:0;bottom:0;background:rgba(6,12,26,.97);backdrop-filter:blur(20px);z-index:290;padding:1rem;flex-direction:column;gap:6px;animation:fadeUp .2s ease;} .mobile-menu.open{display:flex;} .mobile-menu-btn{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);font-family:var(--fu);font-size:1.05rem;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:all .2s;text-transform:uppercase;} .mobile-menu-btn:hover{background:rgba(240,165,0,.1);border-color:rgba(240,165,0,.3);color:var(--gold);} .mobile-menu-btn.active{background:rgba(240,165,0,.14);border-color:rgba(240,165,0,.3);color:var(--gold);} .mobile-menu-btn .mm-icon{font-size:1.3rem;width:28px;text-align:center;} .mobile-menu-btn.danger{color:var(--red);border-color:rgba(255,77,109,.3);} .mobile-menu-btn.danger:hover{background:rgba(255,77,109,.08);border-color:var(--red);} #mobileMenuUser{padding:16px 20px;background:linear-gradient(135deg,rgba(240,165,0,.12),rgba(240,165,0,.04));border:1px solid rgba(240,165,0,.25);border-radius:12px;margin-bottom:6px;display:none;} #mobileMenuUser.show{display:flex;align-items:center;gap:12px;} #mobileMenuUser .mmu-av{width:42px;height:42px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;} #mobileMenuUser .mmu-info{flex:1;min-width:0;} #mobileMenuUser .mmu-name{font-family:var(--fu);font-weight:700;color:var(--text);font-size:1rem;letter-spacing:.5px;line-height:1.2;} #mobileMenuUser .mmu-team{font-family:var(--fb);font-size:.78rem;color:var(--muted);margin-top:2px;} #mobileMenuUser .mmu-admin{margin-top:6px;font-family:var(--fu);font-size:.65rem;font-weight:700;color:var(--red);background:rgba(255,77,109,.15);padding:3px 8px;border-radius:6px;letter-spacing:.5px;display:inline-block;} /* ═══ COMPREHENSIVE MOBILE ═══ */ @media(max-width:768px){ /* Proteção: nunca scroll horizontal em mobile. CRÍTICO: NUNCA pôr overflow:hidden/clip/auto em ancestors de elementos com position:sticky (como o .np-masthead). Se pormos, o sticky deixa de funcionar. Por isso só aplicamos a protecção ao . */ html{overflow-x:hidden;max-width:100vw;} /* Header */ .hdr{padding:0 1rem;height:62px;} /* Em mobile, o .logo-name passa a coluna: "LIGA PG" em cima, "MUNDIAL 2026" em baixo */ .logo-name{font-size:.95rem;letter-spacing:.4px;line-height:1.05;display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap;overflow:hidden;} /* O separador "·" deixa de fazer sentido em coluna — escondê-lo */ .logo-name-sep{display:none;} /* "MUNDIAL 2026" mais pequeno mas com a mesma cor dourada que "LIGA PG" */ .logo-name-sub{font-size:.7rem;letter-spacing:1px;line-height:1.1;margin-top:1px;} .logo-sub{font-size:.5rem;letter-spacing:1.3px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1;margin-top:1px;} .logo-t{width:34px;height:34px;} .hdr-r .btn span{display:none;} .hdr-r{gap:5px;} .btn-sm{padding:5px 10px;font-size:.72rem;} .hamburger{display:flex;} /* Tabs — hidden on mobile, replaced by hamburger */ .tabs-nav{display:none;} /* Main — padding-top:0 para o sticky encostar ao header da app */ main{padding:0 .8rem .8rem;} /* Hero */ .hero{padding:.3rem 0 1rem;} .hero h1{font-size:2.4rem;letter-spacing:1px;} .hero p{font-size:.85rem;letter-spacing:1px;} .hero-badge{font-size:.7rem;padding:4px 12px;} .wc-emblem svg{height:90px;} .hero.hero-has-dash{grid-template-columns:1fr;text-align:center;} .hero.hero-has-dash .hero-badge{justify-self:center;} .hero.hero-has-dash .hero-hosts{justify-content:center;} .hero.hero-has-dash h1,.hero.hero-has-dash p{text-align:center;} .hero.hero-has-dash .wc-emblem{justify-content:center;} .hero.hero-has-dash #heroDashboard{grid-column:1;grid-row:auto;} /* Hero escondida em mobile via JS quando não é apropriado mostrar */ .hero.hide-mobile{display:none;} /* ─── HERO COMPACTA (Versão 2) ─── Quando .hero tem class .hero-compact, em mobile vira 1 linha simples com só o título + sub-título pequeno. Usado em tabs que não são "Jogos". */ .hero.hero-compact{ padding:.7rem 0 .5rem !important; text-align:center; display:block !important; grid-template-columns:none !important; } .hero.hero-compact .hero-badge, .hero.hero-compact .hero-hosts, .hero.hero-compact p, .hero.hero-compact .wc-emblem, .hero.hero-compact #heroDashboard, .hero.hero-compact .hero-cta{display:none !important;} .hero.hero-compact h1{ font-size:1.05rem !important; letter-spacing:1.5px !important; margin:0 !important; line-height:1.1 !important; background:linear-gradient(135deg,var(--gold),var(--gold2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero.hero-compact h1 br{display:none;} .hero.hero-compact h1::after{ content:' · WC2026'; font-size:.65rem; letter-spacing:1px; color:var(--muted); -webkit-text-fill-color:var(--muted); font-weight:400; margin-left:6px; vertical-align:middle; } /* Section headers */ .sh{flex-direction:column;align-items:flex-start;gap:8px;} .stitle{font-size:1.6rem;} /* Stat boxes em ecrãs médios — regra .srow específica em outra media query abaixo */ .sval{font-size:2rem;} /* Match cards */ .mc-body{padding:.8rem 1rem;gap:.6rem;} .fi-sm{width:40px;height:27px;} .mc-name{font-size:.88rem;} .mc-score{font-size:2.2rem;letter-spacing:1px;} .mc-topbar{padding:6px 10px;} .mc-pred-bar{padding:6px 10px;flex-wrap:wrap;gap:4px;} /* Groups */ .gg{grid-template-columns:1fr;} .st{font-size:.78rem;} .st th,.st td{padding:7px 6px;} /* Podium */ .podium-wrap{gap:8px;padding:1rem .5rem 0;} .podium-slot{max-width:120px;} .podium-av{width:52px;height:52px;font-size:2rem;} .podium-slot.p1 .podium-av{width:64px;height:64px;font-size:2.4rem;} .podium-name{font-size:.82rem;} .podium-pts{font-size:1.4rem;} .podium-slot.p1 .podium-pts{font-size:1.7rem;} .podium-slot.p1 .podium-base{height:70px;} .podium-slot.p2 .podium-base{height:50px;} .podium-slot.p3 .podium-base{height:36px;} /* Leaderboard */ .lbi{padding:.8rem 1rem;gap:.8rem;} .lrank{font-size:1.5rem;min-width:28px;} .lav{width:36px;height:36px;font-size:1.1rem;} .lname{font-size:.95rem;} .lmeta{font-size:.78rem;} .lptsv{font-size:2rem;} .form-bars{height:18px;} .form-bar{width:5px;} /* LB Filters — wrap em vez de scroll horizontal */ .lb-filter-wrap{flex-wrap:wrap;gap:6px;justify-content:center;} .lb-filter-btn{font-size:.7rem;padding:5px 11px;} .lb-sub-filter-btn,.adm-tb-scope-btn{font-size:.7rem;padding:5px 11px;} .lb-sub-filter-wrap{justify-content:center;} /* Calendar — vista compacta de 2 linhas em mobile */ .cal-match-row{ display:grid !important; grid-template-columns:1fr auto 1fr !important; grid-template-rows:auto auto !important; grid-template-areas: "meta meta meta" "home score away" !important; gap:6px 8px !important; padding:10px 12px !important; align-items:center !important; } /* Linha 1: meta info (jogo nº + data/hora) numa flex */ .cal-match-row::before{ content:''; grid-area:meta; display:none; } .cal-gamenum{ grid-area:meta; display:flex; justify-content:space-between; align-items:center; font-size:.7rem !important; color:var(--muted) !important; letter-spacing:.5px; width:100%; } .cal-gamenum::after{ content:attr(data-when); color:var(--gold); font-weight:600; font-size:.7rem; } /* Esconder cal-time original em mobile (info migra para o ::after do gamenum) */ .cal-time{display:none !important;} /* Equipas na 2ª linha */ .cal-team{ font-size:.85rem !important; gap:6px !important; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cal-team:first-of-type{grid-area:home;} .cal-team.away{grid-area:away;} .cal-team .fi-xs{width:22px;height:15px;flex-shrink:0;} .cal-score{ grid-area:score; font-size:1.2rem !important; letter-spacing:1px; padding:0 8px; text-align:center; min-width:48px; } /* Container da jornada */ .cal-jornada-hdr{padding:14px 14px 8px !important;flex-wrap:wrap;gap:6px !important;} .cal-title{font-size:.95rem !important;} .cal-pred-window,.cal-pred-window-closed{ font-size:.72rem !important; padding:8px 12px !important; line-height:1.4; } .cal-window-badge{font-size:.62rem !important;padding:3px 8px !important;} /* Predict cards — layout limpo em mobile */ .pcard{padding:.85rem .9rem !important;} .phdr{ flex-direction:column !important; align-items:center !important; gap:6px !important; margin-bottom:.7rem !important; } .pinfo{ font-size:.7rem !important; color:var(--muted); text-align:center; width:100%; } /* Equipas: cada uma em sua linha com bandeira + nome */ .pteams{ width:100%; display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px !important; font-size:.88rem; } .pteams .pteam-label{justify-content:flex-start;} .pteams .pteam-label:last-child{justify-content:flex-end;} .pteams .pteam-label span{font-size:.85rem;} .pteams .fi-sm{width:30px;height:20px;flex-shrink:0;} .pvs{font-size:.78rem;color:var(--muted2);} /* Inputs do prognóstico */ .sinput{width:64px !important;height:56px !important;font-size:1.9rem !important;} .pinputs{gap:10px !important;} .sdash{font-size:1.4rem;color:var(--muted2);} /* Detail panel */ #detailPanel,#playerPanel{width:100%;} .phero{padding:3rem 1rem 1.2rem;gap:1rem;} .fi-md{width:56px;height:38px;} .pteam-name{font-size:.88rem;} .pscore{font-size:2.8rem;letter-spacing:1px;} .pmeta{font-size:.75rem;padding:3px 10px;} .pbody{padding:1rem;} .ptab{padding:10px 6px;font-size:.78rem;letter-spacing:.5px;} /* Player panel */ .pp-hero{padding:1.5rem 1rem 1rem;} .pp-av{width:56px;height:56px;font-size:1.8rem;} .pp-name{font-size:1.4rem;} .pp-stats{gap:10px;} .pp-stat-val{font-size:1.3rem;} .pp-match-row{grid-template-columns:auto 1fr auto;gap:8px;padding:8px 10px;} /* Dashboard */ .dash-rank{font-size:2.2rem;} .dash-pts-val{font-size:2.2rem;} .dash-stats{gap:6px;} .dash-stat{padding:8px 6px;} .dash-stat-val{font-size:1.3rem;} /* Modals */ .modal{padding:1.5rem 1.2rem;border-radius:16px;} .mtitle{font-size:1.8rem;} .mact{flex-direction:column;} .mact .btn{width:100%;} /* Matrix */ .matrix-grid{min-width:520px;grid-template-columns:auto repeat(6,minmax(72px,1fr));} .matrix-name-chip{font-size:.58rem;padding:2px 3px;} /* Bracket */ .bracket-container{min-width:800px;} /* Rules */ .rgrid{grid-template-columns:1fr;} .rbox{padding:1rem;} /* Jornada */ .jornada-hdr{flex-direction:column;gap:6px;align-items:flex-start;} /* User pill */ .upill{padding:4px 10px 4px 4px;font-size:.78rem;} .uav{width:22px;height:22px;font-size:.65rem;} /* fi-lg fallback */ .fi-lg{width:70px;height:47px;} } /* Extra small screens */ @media(max-width:420px){ .hero h1{font-size:2rem;} .mc-score{font-size:1.8rem;} .sinput{width:52px;height:46px;font-size:1.6rem;} .podium-wrap{gap:4px;padding:.8rem .2rem 0;} .podium-slot{max-width:100px;} .podium-av{width:44px;height:44px;font-size:1.6rem;} .podium-slot.p1 .podium-av{width:54px;height:54px;font-size:2rem;} /* Lanterna em mobile: pequena, claramente menor que o pódio */ .podium-slot.lanterna{max-width:90px;} .podium-slot.lanterna .podium-av{width:38px;height:38px;font-size:1.3rem;} .podium-slot.lanterna .podium-pts{font-size:1rem;} .podium-slot.lanterna .podium-base{height:22px;} .pscore{font-size:2.2rem;} .lbi{padding:.6rem .8rem;gap:.6rem;} .dash-rank{font-size:1.8rem;} .dash-pts-val{font-size:1.8rem;} .hdr-r .btn:not(.hamburger){padding:4px 8px;font-size:.68rem;} } /* ═══ MOBILE HEADER LIMPEZA ═══ */ /* Em mobile, o header mostra apenas primeiro nome (sem avatar) para utilizadores autenticados. Botão Acerca escondido — está no menu lateral. Botão Sair mantém-se. */ @media(max-width:768px){ /* User pill: só primeiro nome, sem avatar, mais compacta */ .hdr-r .upill .uav{display:none;} .hdr-r .upill .upill-full{display:none;} .hdr-r .upill .upill-first{display:inline;} .hdr-r .upill{padding:4px 12px;font-size:.8rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Botão "Acerca" no header mobile esconde-se — está no menu */ .hdr-r .btn[onclick*="about"]{display:none;} /* Badge ADMIN mais compacto */ .hdr-r .upill[style*="ADMIN"]{display:inline-flex;font-size:.6rem;padding:2px 6px;} } /* Em ecrãs muito pequenos (<360px iPhone SE), max-width mais apertado */ @media(max-width:360px){ .hdr-r .upill{max-width:90px;font-size:.75rem;} /* Logo ainda menor para garantir que cabe */ .logo-name{font-size:.82rem;letter-spacing:0;} .logo-name-sub{font-size:.6rem;letter-spacing:.8px;} .logo-sub{font-size:.46rem;letter-spacing:1px;} .logo-t{width:30px;height:30px;} }