/* Fantasy.cr styles - extracted verbatim from index.html main <style> block */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#0d3b72;--card:#0f4080;--card2:#0c3366;--border:#1a5299;
  --gold:#f59e0b;--gold2:#d97706;--green:#10b981;--red:#ef4444;
  --blue:#3b82f6;--blue-light:#93c5fd;--purple:#8b5cf6;
  --text:#f1f5f9;--muted:#64748b;--muted2:#94a3b8;
  --font:'Roboto',system-ui,sans-serif;
}
html{height:100%;}
body{background:#f1f5f9;color:var(--text);font-family:var(--font);min-height:100%;-webkit-font-smoothing:antialiased;overscroll-behavior-y:contain;padding-top:64px;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* ── NAV ── */
nav{background:rgba(4,18,48,0.98);border-bottom:1px solid var(--border);padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.logo{font-size:1.9rem;font-weight:800;color:#f1f5f9;letter-spacing:-0.5px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;}
.logo-f{color:var(--red);letter-spacing:0;}
.logo-rest{color:#f1f5f9;letter-spacing:-0.5px;margin-left:0;}
.logo-cr{color:#f1f5f9;}
.logo sub{font-size:0.55rem;color:var(--muted);font-weight:400;vertical-align:middle;margin-left:3px;letter-spacing:0;}
.nav-mid{display:flex;gap:0;align-items:stretch;height:64px;position:absolute;left:50%;transform:translateX(-50%);}
.nav-tab{background:transparent;border:none;border-bottom:2px solid transparent;color:#f1f5f9;padding:0 20px;cursor:pointer;font-size:0.95rem;font-weight:400;transition:all .18s;font-family:var(--font);letter-spacing:0.2px;white-space:nowrap;opacity:0.75;}
.nav-tab:hover{opacity:1;font-weight:700;transform:scale(1.07);}
.nav-tab.active{color:#f1f5f9;border-bottom-color:var(--blue-light);font-weight:600;opacity:1;}
.nav-tab.active:hover{font-weight:700;transform:scale(1.07);}
.nav-right{display:flex;gap:10px;align-items:center;}
.nav-btn{background:transparent;border:none;cursor:pointer;font-size:0.92rem;font-weight:400;font-family:var(--font);color:var(--muted2);white-space:nowrap;padding:6px 14px;border-radius:8px;transition:color .15s;}
.nav-btn:hover{color:var(--text);}

/* ── USER MENU ── */
.umenu-wrap{position:relative;}
.umenu-trigger{background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;padding:9px 10px;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;transition:border-color .15s;}
.umenu-trigger:hover{border-color:var(--muted2);}
.umenu-trigger span{display:block;width:24px;height:2px;border-radius:2px;}
.umenu-trigger span:nth-child(1){background:#1a4f9c;}
.umenu-trigger span:nth-child(2){background:#ffffff;}
.umenu-trigger span:nth-child(3){background:#cf142b;}
.umenu-trigger span:nth-child(4){background:#ffffff;}
.umenu-trigger span:nth-child(5){background:#1a4f9c;}
.umenu-drop{position:absolute;right:0;top:calc(100% + 8px);background:#0f1623;border:1px solid var(--border);border-radius:14px;padding:6px;min-width:200px;z-index:400;display:none;flex-direction:column;box-shadow:0 16px 40px rgba(0,0,0,.6);}
.umenu-drop.open{display:flex;}
.umenu-drop-header{padding:10px 12px 10px;border-bottom:1px solid var(--border);margin-bottom:5px;}
.umenu-drop-name{font-size:0.88rem;font-weight:600;color:var(--text);}
.umenu-drop-email{font-size:0.72rem;color:var(--muted);margin-top:1px;}
.umenu-item{background:transparent;border:none;color:var(--text);font-size:0.88rem;font-family:var(--font);padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left;transition:background .12s;white-space:nowrap;width:100%;}
.umenu-item:hover{background:rgba(255,255,255,.07);}
.umenu-item.danger{color:var(--red);}
.umenu-sep{height:1px;background:var(--border);margin:5px 0;}

/* ── USER PANELS ── */
#upanel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:500;display:none;justify-content:flex-end;}
#upanel{background:#0d1522;border-left:1px solid var(--border);width:min(440px,100vw);height:100%;display:flex;flex-direction:column;overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);}
#upanel-overlay.open #upanel{transform:translateX(0);}
.upanel-head{padding:20px 22px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;background:#0d1522;z-index:1;}
.upanel-title{font-size:1.05rem;font-weight:800;}
.upanel-close{background:transparent;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .15s;font-family:var(--font);}
.upanel-close:hover{color:var(--text);}
.upanel-body{padding:22px;flex:1;}
.upanel-section{margin-bottom:26px;}
.upanel-section h4{font-size:0.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;}
.upanel-section p{font-size:0.85rem;color:var(--muted2);line-height:1.6;}
.ref-link-box{background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.ref-link-box span{font-size:0.8rem;color:var(--muted2);font-family:monospace;word-break:break-all;}
.faq-item{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden;}
.faq-q{width:100%;background:var(--card);border:none;color:var(--text);font-family:var(--font);font-size:0.88rem;font-weight:600;padding:13px 16px;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;}
.faq-q:hover{background:var(--card2);}
.faq-q .faq-arrow{color:var(--muted);font-size:0.8rem;transition:transform .2s;}
.faq-q.open .faq-arrow{transform:rotate(180deg);}
.faq-a{display:none;padding:12px 16px;font-size:0.82rem;color:var(--muted2);line-height:1.6;border-top:1px solid var(--border);background:var(--card);}
.faq-a.open{display:block;}
.terms-block{font-size:0.82rem;color:var(--muted2);line-height:1.7;}
.btn{padding:7px 16px;border-radius:8px;border:none;cursor:pointer;font-size:0.85rem;font-weight:500;transition:all .15s;font-family:var(--font);white-space:nowrap;}
.btn-ghost{background:transparent;color:var(--muted2);}
.btn-ghost:hover{color:var(--text);}
.btn-gold{background:var(--gold);color:#000;}
.btn-gold:hover{background:var(--gold2);}
.btn-green{background:var(--green);color:#000;}
.btn-green:hover{filter:brightness(0.9);}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{filter:brightness(0.9);}
.btn-red{background:var(--red);color:#fff;}
.btn-sm{padding:9px 14px;font-size:0.8rem;min-height:36px;}

/* ── MOBILE NAV ── */
.nav-hamburger{display:none;background:transparent;border:none;color:var(--text);font-size:1.3rem;cursor:pointer;padding:4px;}
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:#050a12;border-bottom:1px solid var(--border);z-index:99;padding:12px;}
.mobile-menu.open{display:block;}
.mobile-menu .nav-tab{display:block;width:100%;text-align:left;padding:10px 14px;margin-bottom:2px;border-radius:8px;}

/* ── PAGES ── */
.page{display:none;padding:20px;max-width:1280px;margin:0 auto;}
/* The Cuadro bracket wants the whole screen — no 1280px cap / white sides.
   Size the page to its content so the top bars (rules / live / progreso) are as
   wide as the bracket and scroll together with it. Pin the title+save header so
   'Guardar Cuadro' stays on screen while the bracket scrolls sideways. */
#page-bracket{max-width:none;}
/* min-width:max-content is ONLY for the desktop tree (>=1024px); on mobile the tabbed view
   must fit the viewport, else the whole page (panels, scoring legend) overflows horizontally. */
@media(min-width:1024px){
  #page-bracket{min-width:max-content;}
  #page-bracket>.breadcrumb,#page-bracket>.bracket-header{position:sticky;left:20px;width:calc(100vw - 40px);z-index:6;}
}
.page.active{display:block;}

/* ── BREADCRUMB ── */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--muted);margin-bottom:18px;flex-wrap:wrap;}
.breadcrumb a{color:var(--muted2);cursor:pointer;transition:color .15s;}
.breadcrumb a:hover{color:var(--text);}
.breadcrumb span{color:var(--muted);}

/* ── HOME ── */
.hero{text-align:center;padding:28px 20px 24px;position:relative;overflow:visible;}
.hero h1{font-size:clamp(1.7rem,5vw,2.8rem);font-weight:300;line-height:1.25;margin-bottom:10px;letter-spacing:0;}
.hero p{font-size:0.95rem;color:var(--muted2);margin-bottom:6px;}
.hero-badge{display:inline-block;background:transparent;border:1px solid rgba(255,255,255,0.6);color:#f1f5f9;padding:4px 14px;border-radius:20px;font-size:0.78rem;font-weight:600;margin-bottom:20px;}
/* Homepage product showcase — browser-framed screenshot carousel */
.hero-showcase{max-width:820px;margin:28px auto 8px;padding:0 16px;}
.showcase-frame{}
.showcase-bar{display:flex;align-items:center;gap:7px;padding:9px 14px;background:#10254d;border-bottom:1px solid rgba(147,197,253,0.18);}
.showcase-bar .sc-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.sc-dot.r{background:#ff5f57;} .sc-dot.y{background:#febc2e;} .sc-dot.g{background:#28c840;}
.showcase-url{margin-left:12px;font-size:0.72rem;color:#93c5fd;background:rgba(255,255,255,0.06);border-radius:6px;padding:3px 14px;}
.showcase-slide{display:none;position:relative;}
.showcase-slide.active{display:block;}
.showcase-slide img{display:block;width:100%;height:auto;aspect-ratio:1532/882;filter:drop-shadow(0 0 88px rgba(96,165,250,0.62)) drop-shadow(0 20px 42px rgba(0,0,0,0.30));}
.showcase-ph{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#0c1b3a;color:#93c5fd;font-weight:700;font-size:0.9rem;text-align:center;padding:24px;}
.showcase-ph small{font-weight:400;color:var(--muted2);}
.showcase-dots{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.showcase-cdot{width:9px;height:9px;border-radius:50%;background:rgba(147,197,253,0.35);cursor:pointer;transition:all .2s;border:none;padding:0;}
.showcase-cdot.active{background:#3b82f6;width:24px;border-radius:5px;}

/* ── CONCURSOS PAGE ── */
.cf-btn{background:var(--card2);border:1px solid var(--border);color:var(--muted2);padding:5px 13px;border-radius:20px;font-size:0.73rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font);white-space:nowrap;}
.cf-btn:hover{border-color:var(--muted2);color:var(--text);}
.cf-btn.active{background:rgba(96,165,250,0.18);border-color:var(--blue-light);color:var(--blue-light);}
.contest-section{margin-bottom:28px;}
.contest-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;}
.contest-card{background:#1a4e8c;border:1px solid #93c5fd;border-radius:14px;padding:18px 20px 16px;cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;width:min(614px,calc(50% - 6px));height:180px;flex-shrink:0;}
.contest-card[style*="opacity"]{cursor:default;}
.contest-card .cc-icon{font-size:1.4rem;margin-bottom:7px;display:block;}
.contest-card h3{font-size:0.9rem;font-weight:800;margin-bottom:3px;color:var(--text);}
.contest-card p{font-size:0.72rem;color:var(--muted2);line-height:1.4;}
.contest-card .cc-badge{position:absolute;top:12px;right:12px;font-size:0.62rem;font-weight:700;padding:2px 7px;border-radius:10px;border:1px solid transparent;}
.contest-activos{margin-top:10px;font-size:0.7rem;font-weight:600;color:#cbe0f8;display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.3;}
.contest-activos strong{color:var(--gold);font-weight:800;}
.ca-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.22);display:inline-block;flex-shrink:0;}
/* Ruleta de Pilotos — MX1 | MX2 side by side on desktop (keeps the page short) */
.pl-cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.pl-cat-col{min-width:0;}
/* Mobile: MX1/MX2 become a swipeable one-at-a-time carousel with arrow nav. */
.pl-cat-nav{display:none;}
.pl-cat-arrow{background:var(--card2);border:1px solid var(--border);color:#f1f5f9;border-radius:8px;width:40px;height:36px;font-size:1.3rem;line-height:1;cursor:pointer;flex-shrink:0;font-family:var(--font);}
.pl-cat-nav-title{flex:1;text-align:center;font-weight:800;color:var(--red);font-size:0.92rem;}
.pl-cat-head{text-align:center;}
@media(max-width:760px){
  .pl-cats-grid{grid-template-columns:1fr;gap:0;}
  .pl-cats .pl-cat-nav{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
  .pl-cats .pl-cat-head{display:none;}
  .pl-cats .pl-cats-grid .pl-cat-col{display:none;}
  .pl-cats[data-active="0"] .pl-cats-grid .pl-cat-col[data-idx="0"]{display:block;}
  .pl-cats[data-active="1"] .pl-cats-grid .pl-cat-col[data-idx="1"]{display:block;}
}
/* Ruleta de Pilotos — collapsible ranking tab (styled like the Reglas panel) */
.pl-rank-panel{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:2px 0 14px;background:var(--card2);}
.pl-rank-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:transparent;border:none;color:#f1f5f9;font-size:0.82rem;font-weight:600;cursor:pointer;padding:11px 16px;font-family:var(--font);text-align:left;gap:8px;}
.pl-rank-icon{font-size:1.15rem;font-weight:300;color:var(--muted2);line-height:1;flex-shrink:0;}
.pl-rank-body{padding:2px 16px 12px;}
/* Ruleta de Pilotos — visual podium (winner centre/tallest) */
.pl-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:4px 0 10px;}
.pl-pod-col{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0;max-width:160px;}
.pl-pod-sel{width:100%;font-size:0.72rem;color:#f1f5f9;background:var(--card2);}
.pl-pod-name{font-size:0.72rem;font-weight:700;color:#f1f5f9;text-align:center;line-height:1.2;min-height:2.3em;display:flex;align-items:center;justify-content:center;}
.pl-pod-step{width:100%;border-radius:8px 8px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:#0c3366;padding:5px 2px 6px;box-shadow:inset 0 -2px 6px rgba(0,0,0,0.12);}
.pl-pod-place{font-size:0.95rem;font-weight:900;line-height:1;}
.pl-pod-num{font-size:0.68rem;font-weight:800;opacity:0.9;line-height:1;}
.pl-pod-trophy{display:flex;justify-content:center;margin-bottom:2px;}
.pl-pod-trophy svg{width:42px;height:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.28));}
.pl-pod-1 .pl-pod-step{height:70px;background:linear-gradient(180deg,#ffe488,#f5b301);}
.pl-pod-2 .pl-pod-step{height:54px;background:linear-gradient(180deg,#e6edf5,#aeb9c6);}
.pl-pod-3 .pl-pod-step{height:40px;background:linear-gradient(180deg,#f2be92,#cd7f32);}
@media(max-width:768px){.contest-card{width:min(614px,100%);height:auto;min-height:180px;}}
.contest-list{margin-top:12px;}
.contest-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;margin-bottom:10px;}
.contest-item:hover{border-color:var(--blue);background:var(--card2);}
.contest-item-left h4{font-size:0.95rem;font-weight:700;margin-bottom:3px;}
.contest-item-left p{font-size:0.78rem;color:var(--muted);}
.contest-arrow{color:var(--muted);font-size:1.1rem;}

/* ── BRACKET ── */
.bracket-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:12px;flex-wrap:wrap;}
.bracket-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px;}
.btab{flex:1;background:transparent;border:none;color:#f1f5f9;padding:10px 4px;cursor:pointer;font-size:0.78rem;font-weight:700;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .18s;font-family:var(--font);text-align:center;opacity:0.6;letter-spacing:.3px;text-transform:uppercase;}
.btab.active{color:#f1f5f9;border-bottom-color:var(--blue);opacity:1;background:linear-gradient(to top,rgba(59,130,246,0.14) 0%,transparent 80%);}
.btab:hover:not(.active){opacity:1;background:linear-gradient(to top,rgba(59,130,246,0.07) 0%,transparent 80%);}
.bracket-matches-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.round-col{display:flex;flex-direction:column;flex:1;min-width:148px;}
.round-title{text-align:center;padding:8px 4px 10px;font-size:0.65rem;font-weight:700;color:var(--muted);letter-spacing:0.8px;text-transform:uppercase;}
.matches-col{display:flex;flex-direction:column;justify-content:space-around;flex:1;gap:3px;padding:0 3px;}
.match-pair-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card);}
.match-datetime{font-size:0.62rem;color:#fff;text-align:center;padding:6px 8px 3px;letter-spacing:0.4px;font-weight:600;border-bottom:1px solid var(--border);}
.match-venue{font-size:0.58rem;color:var(--muted2);text-align:center;padding:3px 8px 6px;letter-spacing:0.3px;border-top:1px solid var(--border);}
/* Guided-fill banner: nudges the user to the next round once the current one is complete. */
.bracket-next-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding:12px 16px;border-radius:12px;font-size:0.85rem;font-weight:700;}
.bracket-next-banner.done{background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.35);color:#10b981;}
.bracket-next-banner.todo{background:rgba(147,197,253,0.08);border:1px solid var(--border);color:#0c3366;font-weight:700;justify-content:center;}
.bracket-next-banner button{background:#10b981;color:#fff;border:none;border-radius:9px;padding:9px 18px;font-size:0.82rem;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap;}
/* Desktop connected bracket tree (two-sided/mirrored, SVG connectors) */
.bracket-tree{display:flex;align-items:stretch;overflow:visible;padding:4px 0 14px;position:relative;}
.tree-col{display:flex;flex-direction:column;flex:1 0 172px;padding:0 10px;position:relative;z-index:1;}
.match-vs{font-size:0.64rem;color:var(--muted);flex-shrink:0;padding:0 5px;font-weight:600;}
.tree-match .match-team-btn{flex:1;min-width:0;}
.tree-col-hdr{text-align:center;font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#0c3366;padding:2px 0 8px;}
.tree-col-inner{display:flex;flex-direction:column;justify-content:space-around;flex:1;}
.tree-match{position:relative;z-index:1;background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:7px 9px;margin:7px 0;}
.tree-dt{font-size:0.56rem;color:var(--muted);text-align:center;margin-bottom:4px;letter-spacing:.2px;}
.tree-match .match-card{background:transparent;border:none;}
.tree-match .match-card+.match-card{border-top:none;}
.bracket-svg{position:absolute;left:0;top:0;pointer-events:none;z-index:0;}
/* Final made prominent */
.tree-col-final{flex:2 0 260px;}
.tree-brand{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;opacity:0.92;}
.tree-brand-title{font-size:0.9rem;font-weight:800;color:#0c3366;letter-spacing:.2px;line-height:1.4;max-width:220px;}
.tree-brand-sub{font-weight:700;font-size:0.82rem;opacity:0.82;}
.tree-brand-logo{width:104px;height:auto;display:block;margin-top:12px;filter:drop-shadow(0 3px 7px rgba(12,51,102,0.2));}
.tree-col-final .tree-col-inner{justify-content:flex-start;padding-top:96px;}
.tree-col-final .tree-col-hdr{color:var(--gold);font-size:0.82rem;}
.tree-col-final .tree-match{border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(245,158,11,0.14);padding:14px 16px;margin:0;transform:scale(1.12);transform-origin:top center;}
.tree-col-final .match-team-btn .t-code{font-size:0.9rem;}
.tree-champ-lbl-top{text-align:center;font-size:0.66rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin-bottom:7px;}
.tree-venue{font-size:0.54rem;color:var(--muted);text-align:center;margin-top:4px;line-height:1.25;}
.tree-trophy{display:flex;justify-content:center;margin-bottom:2px;}
.tree-trophy svg{width:88px;height:auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,0.28));}
.match-card{background:transparent;border:none;border-radius:0;overflow:hidden;}
.match-card+.match-card{border-top:1px solid var(--border);}
.match-row{display:flex;align-items:center;padding:8px 10px;gap:7px;}
.match-team-btn{flex:1;position:relative;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;padding:8px 6px;cursor:pointer;text-align:center;font-size:0.78rem;font-weight:600;color:#f1f5f9;font-family:var(--font);transition:all .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;}
.t-flag{font-size:1.35rem;line-height:1;display:block;}
.t-code{font-size:0.68rem;font-weight:800;letter-spacing:0.8px;display:block;}
.t-tbd{font-size:0.68rem;font-style:italic;font-weight:400;opacity:0.5;}
.match-team-btn:hover:not(.team-tbd){background:rgba(255,255,255,0.08);border-color:var(--muted2);}
.match-team-btn.team-picked{background:rgba(245,158,11,0.15);border-color:var(--gold);color:var(--gold);}
.match-team-btn.team-correct{background:rgba(16,185,129,0.14);border-color:var(--green);color:var(--green);}
.match-team-btn.team-wrong{opacity:0.35;}
/* Your pick that LOST — clear red so a wrong prediction reads at a glance (vs a team that just lost). */
.match-team-btn.team-wrongpick{background:rgba(239,68,68,0.14);border-color:#ef4444;color:#fca5a5;opacity:1;}
.mc-badge{position:absolute;top:-7px;right:-7px;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.66rem;font-weight:900;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,0.45);}
.mc-badge.mc-ok{background:var(--green);color:#04120a;}
.mc-badge.mc-no{background:#ef4444;color:#fff;}
.match-team-btn.team-tbd{opacity:0.35;cursor:default;font-style:italic;font-weight:400;font-size:0.72rem;}
.match-team-btn.team-espn{border-color:var(--blue-light);color:var(--blue-light);background:rgba(59,130,246,0.1);}
.match-team-btn.team-espn:hover:not(.team-tbd){background:rgba(59,130,246,0.18);border-color:#60a5fa;}
.t-name{font-size:0.7rem;font-weight:700;line-height:1.2;}
.match-x-btn{background:transparent;border:1px solid var(--border);border-radius:6px;color:#f1f5f9;font-size:0.72rem;font-weight:800;padding:6px 9px;cursor:pointer;font-family:var(--font);opacity:0.55;transition:all .15s;letter-spacing:0.5px;flex-shrink:0;}
.match-x-btn:hover:not(:disabled){opacity:1;border-color:var(--muted2);box-shadow:0 0 0 2px rgba(147,197,253,0.2),0 0 10px rgba(147,197,253,0.1);}
.match-x-btn.x-active{background:rgba(100,116,139,0.22);border-color:var(--muted2);opacity:1;}
.match-x-btn:disabled{opacity:0.3;cursor:default;}
.match-sub-picker{border-top:1px solid var(--border);padding:8px 10px;background:rgba(12,51,102,0.5);}
.sub-pick-label{font-size:0.6rem;color:var(--muted2);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:5px;text-align:center;}
.sub-pick-opts{display:flex;gap:6px;}
.sub-pick-opt{flex:1;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:6px;padding:5px 4px;text-align:center;font-size:0.7rem;font-weight:600;color:#f1f5f9;cursor:pointer;transition:all .15s;font-family:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sub-pick-opt:hover{background:rgba(255,255,255,0.08);border-color:var(--muted2);}
.sub-pick-opt.sp-active{background:rgba(245,158,11,0.15);border-color:var(--gold);color:var(--gold);}
.team-name{font-size:0.72rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.team-name.b{font-weight:700;}
.match-div{height:1px;background:var(--border);}
.score-legend{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-top:16px;text-align:center;}
.score-legend .sl-title{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#f1f5f9;margin-bottom:12px;}
.score-legend .sl-items{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:center;align-items:flex-start;}
.score-legend .sl-item{display:flex;flex-direction:column;align-items:center;gap:2px;}
.score-legend .sl-label{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#f1f5f9;}
.score-legend .sl-pts{font-size:0.82rem;font-weight:900;color:#93c5fd;}
.score-legend .sl-desc{font-size:0.65rem;color:var(--muted2);margin-top:1px;}
.locked-banner{background:#0a150a;border:1px solid #1a4020;border-radius:8px;padding:11px 16px;color:var(--green);font-size:0.82rem;margin-bottom:14px;display:none;}
.bracket-id{font-size:0.72rem;color:var(--muted);background:var(--card2);border:1px solid var(--border);padding:3px 10px;border-radius:6px;font-family:monospace;font-weight:600;}

/* ── OVER/UNDER ── */
.ou-section{margin-bottom:28px;}
.ou-section-title{font-size:0.78rem;font-weight:700;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.ou-match{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.ou-teams{font-size:0.85rem;font-weight:600;flex:1;}
.ou-line{font-size:0.75rem;color:var(--muted);margin-top:2px;}
.ou-btns{display:flex;gap:6px;}
.ou-btn{padding:6px 14px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--muted2);font-size:0.78rem;font-weight:700;cursor:pointer;transition:all .15s;font-family:var(--font);}
.ou-btn:hover{border-color:var(--blue);color:var(--blue);}
.ou-btn.selected-over{background:rgba(16,185,129,.15);border-color:var(--green);color:var(--green);}
.ou-btn.selected-under{background:rgba(239,68,68,.12);border-color:var(--red);color:var(--red);}
.ou-btn.correct{background:rgba(16,185,129,.2);border-color:var(--green);color:var(--green);}
.ou-btn.wrong{opacity:.4;}
.ou-single{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;}
.ou-single label{font-size:0.82rem;font-weight:600;display:block;margin-bottom:10px;}
.ou-input{background:var(--card2);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:9px 12px;font-size:0.85rem;width:100%;font-family:var(--font);}
.ou-input:focus{outline:none;border-color:var(--blue);}
.ou-tbd{font-size:0.82rem;color:var(--muted);font-style:italic;}

/* ── GRUPOS ── */
.gtab{background:transparent;border:none;color:var(--text);padding:10px 0;cursor:pointer;font-size:0.85rem;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .18s;font-family:var(--font);flex:1;text-align:center;opacity:0.7;}
.gtab.active{color:var(--text);border-bottom-color:var(--blue);opacity:1;background:linear-gradient(to top,rgba(59,130,246,0.14) 0%,transparent 80%);box-shadow:0 0 0 2px rgba(147,197,253,0.15),0 0 14px rgba(59,130,246,0.12);}
.gtab:hover:not(.active){opacity:1;background:linear-gradient(to top,rgba(147,197,253,0.07) 0%,transparent 80%);}
.concursos-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:0;}
.concursos-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:12px 0 14px;margin-bottom:20px;border-bottom:1px solid var(--border);}
.cf-group{display:flex;align-items:center;gap:8px;}
.cf-label{font-size:0.65rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;}
.cf-select{background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:0.78rem;font-family:var(--font);padding:6px 28px 6px 10px;border-radius:8px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;min-width:150px;max-height:200px;}
.cf-select:focus{outline:none;border-color:var(--blue);}
.cf-select option{background:var(--card);color:var(--text);}
.oficial-toggle{width:100%;padding:11px 14px;border-radius:10px;border:1px solid rgba(241,245,249,0.2);background:rgba(255,255,255,0.04);color:var(--muted2);font-size:0.82rem;font-weight:700;font-family:var(--font);cursor:pointer;text-align:center;margin-top:8px;transition:all .2s;letter-spacing:.2px;}
.oficial-toggle.on{background:rgba(245,158,11,0.14);border-color:var(--gold);color:var(--gold);}
/* collapsible create/join cards */
.gc-card{display:flex;flex-direction:column;transition:all .2s;}
.gc-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:0;}
.gc-header h3{margin:0;font-size:0.9rem;font-weight:700;}
.gc-chevron{font-size:0.78rem;color:var(--muted2);transition:transform .22s;display:inline-block;line-height:1;}
.gc-card.open .gc-chevron{transform:rotate(180deg);}
.gc-body{display:none;margin-top:14px;}
.gc-card.open .gc-body{display:block;}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;}
.card h3{font-size:0.9rem;font-weight:700;margin-bottom:14px;}
.inp{background:var(--card2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-size:0.85rem;width:100%;margin-bottom:10px;outline:none;font-family:var(--font);}
.inp:focus{border-color:var(--blue);}
select.inp option{background:var(--card2);}
.group-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:10px;}
.group-card.official{border-color:rgba(245,158,11,.4);background:linear-gradient(135deg,var(--card),#1a1200);}
.group-meta{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.group-name{font-size:0.95rem;font-weight:700;}
.group-sub{font-size:0.75rem;color:var(--muted);margin-top:2px;}
.group-code{background:#151f30;padding:4px 10px;border-radius:6px;font-family:monospace;font-weight:800;color:var(--gold);font-size:0.85rem;letter-spacing:1px;}
.group-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.wa-btn{background:#25d366;color:#000;padding:7px 13px;border-radius:7px;font-size:0.78rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-family:var(--font);}
.group-stats-row{display:flex;gap:16px;font-size:0.78rem;color:var(--muted);margin-top:8px;flex-wrap:wrap;}
.group-stats-row b{color:var(--text);}
.type-badge{display:inline-block;font-size:0.65rem;font-weight:700;padding:2px 7px;border-radius:20px;margin-right:5px;vertical-align:middle;}
.type-official{background:rgba(245,158,11,.15);color:var(--gold);border:1px solid rgba(245,158,11,.3);}
.type-public{background:rgba(59,130,246,.12);color:var(--blue);border:1px solid rgba(59,130,246,.3);}
.type-private{background:rgba(100,116,139,.12);color:var(--muted2);border:1px solid rgba(100,116,139,.3);}

/* Group rank popup */
#group-rank-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:300;display:none;align-items:center;justify-content:center;padding:16px;}
#group-rank-overlay.open{display:flex;}
.group-rank-box{background:#0d1522;border:1px solid var(--border);border-radius:16px;width:100%;max-width:440px;display:flex;flex-direction:column;max-height:80vh;}
.group-rank-header{padding:18px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0;}
.group-rank-title{font-size:1rem;font-weight:800;margin-bottom:2px;}
.group-rank-sub{font-size:0.75rem;color:var(--muted);}
.grp-mypos{text-align:right;flex-shrink:0;}
.grp-mypos .mypos-val{font-size:1.4rem;font-weight:900;color:var(--gold);line-height:1.1;}
.grp-mypos .mypos-lbl{font-size:0.63rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-top:3px;}
.group-rank-close{background:transparent;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:2px 6px;line-height:1;flex-shrink:0;margin-top:2px;}
.group-rank-close:hover{color:var(--text);}
.group-rank-scroll{overflow-y:auto;padding:14px 20px 18px;flex:1;}
.grp-remove-btn{background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;font-size:0.72rem;padding:2px 6px;border-radius:4px;font-family:var(--font);flex-shrink:0;line-height:1.5;}
.grp-remove-btn:hover{color:var(--red);border-color:rgba(239,68,68,.3);}
.ig-btn{background:#c13584;color:#fff;padding:7px 13px;border-radius:7px;font-size:0.78rem;font-weight:700;border:none;cursor:pointer;font-family:var(--font);white-space:nowrap;}
.ig-btn:hover{filter:brightness(1.1);}
.grp-settings-wrap{position:relative;display:inline-block;}
.grp-settings-btn{background:transparent;border:1px solid var(--border);border-radius:7px;color:var(--muted);cursor:pointer;padding:5px 9px;font-size:1rem;line-height:1.2;transition:all .15s;font-family:var(--font);}
.grp-settings-btn:hover{color:var(--text);border-color:var(--muted2);}
.grp-settings-menu{position:absolute;right:0;top:calc(100% + 6px);background:#111827;border:1px solid var(--border);border-radius:10px;padding:5px;min-width:160px;z-index:50;display:none;flex-direction:column;gap:2px;box-shadow:0 8px 24px rgba(0,0,0,.5);}
.grp-settings-menu.open{display:flex;}
.grp-settings-item{background:transparent;border:none;color:var(--text);font-size:0.82rem;font-family:var(--font);padding:8px 12px;border-radius:7px;cursor:pointer;text-align:left;transition:background .12s;white-space:nowrap;}
.grp-settings-item:hover{background:rgba(255,255,255,.07);}
.grp-settings-item.danger{color:var(--red);}
.lb-scroll{max-height:520px;overflow-y:auto;border-radius:12px;}
.lb-head{display:grid;grid-template-columns:60px 1fr 60px;padding:10px 16px;font-size:0.68rem;font-weight:700;color:var(--muted);letter-spacing:.5px;border-bottom:1px solid var(--border);text-transform:uppercase;position:sticky;top:0;z-index:2;background:var(--card2);}
.lb-row-top{position:sticky;top:37px;z-index:1;background:var(--card);}
.db-cta{transition:transform .2s,box-shadow .2s;}
.db-cta-blue:hover{transform:scale(1.07);box-shadow:0 0 0 2px rgba(147,197,253,0.6),0 0 16px rgba(147,197,253,0.3);}
.browse-group{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.browse-group.official-browse{border-color:rgba(245,158,11,.3);}

/* ── RANKING (dashboard) ── */
.rank-time-filter{display:flex;gap:6px;padding:10px 14px 0;background:transparent;}
.rank-time-btn{flex:1;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.55);padding:5px 4px;cursor:pointer;font-size:0.67rem;font-weight:700;border-radius:6px;transition:all .18s;font-family:var(--font);text-align:center;letter-spacing:.4px;text-transform:uppercase;}
.rank-time-btn.active{background:rgba(96,165,250,0.22);border-color:#60a5fa;color:#fff;}
.rank-time-btn:hover:not(.active){background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.8);}
.rank-scope-filter{display:flex;gap:6px;padding:0 14px 10px;}
.rank-scope-btn{flex:1;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.55);padding:5px 4px;cursor:pointer;font-size:0.67rem;font-weight:700;border-radius:6px;transition:all .18s;font-family:var(--font);text-align:center;letter-spacing:.4px;text-transform:uppercase;}
.rank-scope-btn.active{background:rgba(96,165,250,0.22);border-color:#60a5fa;color:#fff;}
.rank-scope-btn:hover:not(.active){background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.8);}
.contest-rank-section{margin-top:24px;}
.contest-rank-block{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px;}
.contest-rank-title{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.contest-rank-scroll{max-height:220px;overflow-y:auto;}
.dash-ranking-wrap{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:var(--card2);}
#dash-lb-cr,#dash-lb-global{max-height:460px;overflow-y:auto;}
.dash-ranking-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.lb-table{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.lb-row{display:grid;grid-template-columns:60px 1fr 60px;padding:11px 16px;border-bottom:1px solid var(--border);align-items:center;font-size:0.85rem;}
.lb-row:last-child{border-bottom:none;}
.lb-row.me{background:rgba(245,158,11,.06);}
.lb-rank{font-weight:800;}
.lb-pts{text-align:center;font-weight:700;color:var(--gold);}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;}
.stat-card .sv{font-size:1.5rem;font-weight:900;color:var(--gold);margin-bottom:4px;}
.stat-card .sl{font-size:0.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.pick-item{padding:10px 16px;border-bottom:1px solid var(--border);font-size:0.82rem;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.pick-item:last-child{border-bottom:none;}
.pick-correct{color:var(--green);}
.pick-wrong{color:var(--red);}
.contest-select{background:var(--card2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 12px;font-size:0.82rem;font-family:var(--font);margin-bottom:16px;width:100%;max-width:280px;}

/* ── ADMIN ── */
.admin-group-header{display:flex;align-items:center;gap:10px;margin:28px 0 16px;font-size:0.72rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);}
.admin-group-header::before,.admin-group-header::after{content:'';flex:1;height:1px;background:var(--border);}
.admin-contest-label{font-size:0.68rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted2);background:var(--card2);border:1px solid var(--border);border-radius:5px;padding:3px 9px;display:inline-block;margin-bottom:14px;}
.admin-section{margin-bottom:28px;}
.admin-section h3{font-size:0.88rem;font-weight:700;color:var(--gold);margin-bottom:12px;text-transform:uppercase;letter-spacing:.4px;}
/* Admin tabs */
.admin-tab-bar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:24px;padding:12px 0 0;position:sticky;top:56px;z-index:40;background:var(--bg);border-bottom:1px solid var(--border);padding-bottom:10px;}
.admin-tab-btn{padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:var(--card2);color:var(--muted2);font-size:0.76rem;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap;}
.admin-tab-btn:hover{border-color:var(--gold);color:var(--gold);}
.admin-tab-btn.active{background:var(--gold);color:#000;border-color:var(--gold);}
.admin-tab-panel{display:none;}
.admin-tab-panel.active{display:block;}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px;}
.admin-match{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;}
.admin-match label{font-size:0.68rem;color:var(--muted);font-weight:700;letter-spacing:.4px;display:block;margin-bottom:4px;text-transform:uppercase;}
.admin-ctrl{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:20px;}
.admin-ctrl-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.badwords-list{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:10px;font-size:0.78rem;color:var(--muted2);max-height:120px;overflow-y:auto;margin-top:8px;word-break:break-all;line-height:1.8;}
/* group request items */
.req-item{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
.req-meta{font-size:0.78rem;color:var(--muted2);margin-top:3px;}
.req-actions{display:flex;gap:8px;margin-top:10px;}
/* group request modal */
#grq-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:210;align-items:center;justify-content:center;padding:16px;}

/* ── MODAL ── */
#modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;align-items:center;justify-content:center;padding:16px;}
.modal-box{background:#0d1522;border:1px solid var(--border);border-radius:16px;padding:28px;width:100%;max-width:380px;}
.modal-box h2{margin-bottom:20px;font-size:1.1rem;font-weight:800;}
.modal-switch{text-align:center;margin-top:14px;font-size:0.8rem;color:var(--muted);}
.modal-switch a{color:var(--gold);cursor:pointer;}
.err{color:var(--red);font-size:0.78rem;margin-top:8px;display:none;text-align:center;}
.radio-group{display:flex;gap:8px;margin-bottom:10px;}
.radio-opt{flex:1;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:10px;text-align:center;cursor:pointer;font-size:0.78rem;font-weight:600;color:var(--muted2);transition:all .15s;}
.radio-opt.selected{border-color:var(--blue);color:var(--blue);background:rgba(59,130,246,.08);}

/* ── TOAST ── */
#toast{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#111d2e;border:1px solid var(--border);padding:10px 20px;border-radius:8px;z-index:300;font-size:0.82rem;white-space:nowrap;max-width:90vw;font-weight:500;}

/* ── AFFILIATE ── */
.aff{background:linear-gradient(135deg,#08111e,#0a1628);border:1px solid #1a3050;border-radius:12px;padding:14px 18px;margin-top:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.aff p{font-size:0.8rem;color:var(--muted2);}
.aff strong{color:#f1f5f9;}

/* ── DASHBOARD ── */
.dash-hello{margin-bottom:26px;padding-top:4px;}
.dash-hello h2{font-size:clamp(2rem,5vw,2.9rem);font-weight:900;line-height:1.15;letter-spacing:-0.5px;}
.dash-hello h2 span{color:var(--gold);}
.dash-hello h2 .dash-hola{font-size:0.75em;color:var(--text);}
.dash-hello p{font-size:0.82rem;color:var(--muted);margin-top:5px;}

.dash-banners{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px;justify-content:center;}
.dash-banner{border-radius:14px;padding:18px 20px 16px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;width:min(614px,calc(50% - 6px));height:180px;}
@media(max-width:768px){.dash-banners{flex-direction:column;align-items:center;}.dash-banner{width:min(614px,100%);height:auto;min-height:180px;}}
.dash-banner-gold{background:#0c2040;border:1px solid rgba(241,245,249,0.35);}
.dash-banner-gold:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(241,245,249,0.5),0 0 22px rgba(241,245,249,0.1);}
.dash-banner-blue{background:#2d5499;border:1px solid #93c5fd;}
.dash-banner .db-icon{font-size:1.5rem;margin-bottom:8px;}
.dash-banner h4{font-size:0.9rem;font-weight:800;margin-bottom:3px;}
.dash-banner p{font-size:0.72rem;color:var(--muted2);line-height:1.4;}
.db-cta{font-size:0.7rem;font-weight:700;padding:4px 10px;border-radius:6px;border:none;cursor:pointer;margin-top:10px;width:fit-content;font-family:var(--font);}
.db-cta-gold{background:rgba(245,158,11,.18);color:var(--gold);}
.db-cta-blue{background:var(--card2);color:var(--blue);}
.db-cta-purple{background:rgba(139,92,246,.18);color:var(--purple);}
/* Homepage featured banners: no CTA, just a live participant indicator */
.db-home-banner{height:auto;min-height:0;padding:16px 20px;display:block;}
.db-home-activos{font-size:0.78rem;color:rgba(255,255,255,0.82);display:flex;align-items:center;gap:7px;font-weight:600;}
.db-home-dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 6px rgba(52,211,153,0.7);flex-shrink:0;}
@media(max-width:768px){.db-home-banner{min-height:0 !important;padding:12px 16px;}.db-home-banner h2{font-size:0.95rem;}}
.db-badge{font-size:0.68rem;font-weight:700;padding:3px 10px;border-radius:10px;align-self:flex-end;}
.db-badge-live{background:rgba(16,185,129,.15);color:var(--green);border:1px solid rgba(16,185,129,.3);}
.db-badge-soon{background:rgba(100,116,139,.1);color:var(--muted);border:1px solid rgba(100,116,139,.2);}
.db-badge-envivo{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.35);}
.db-badge-oficial{background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.35);}
.db-meta{font-size:0.68rem;color:var(--muted2);margin-top:6px;display:flex;align-items:center;gap:5px;}
.db-meta-dot{width:5px;height:5px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0;animation:pulse 2s infinite;}
.db-meta-dot.soon{background:var(--muted);animation:none;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:4px;animation:pulse 1.2s infinite;}
.ev-match{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:6px;display:flex;align-items:center;gap:12px;}
.ev-match.is-live{border-color:var(--green);box-shadow:0 0 8px rgba(16,185,129,0.2);}
.ev-score{min-width:80px;text-align:center;flex-shrink:0;}
.ev-teams{flex:1;font-size:0.88rem;font-weight:600;}
.ev-teams span{color:var(--muted);font-weight:400;}
.ev-stage{font-size:0.68rem;color:var(--muted2);margin-top:2px;}
.ev-bar-pill{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:6px 12px;white-space:nowrap;font-size:0.78rem;}
.ev-bar-pill.is-live{border-color:var(--green);}
.evf-btn{background:var(--card2);border:1px solid var(--border);color:var(--muted2);}
.evf-btn.evf-active{background:#1a4e8c;border-color:var(--blue);color:var(--text);}
/* Segmented control — one connected group for mutually-exclusive choices (view + status), so they
   read as a single pick rather than four unrelated buttons. Sport pills stay separate: 8 options
   that wrap, each tinted with its own sport color when active. */
.ev-seg{display:inline-flex;background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:2px;gap:2px;}
/* min-width (sized just past the longest label, "Finalizados") makes every segment the same width
   instead of hugging its text, so Lista/Calendario match each other and the status group matches
   them. Mobile drops it — 4 × 104px would overflow a 375px screen — and splits the row evenly. */
.ev-seg-btn{background:transparent;border:0;color:var(--muted2);font-size:0.75rem;font-weight:600;
  padding:6px 13px;min-width:104px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:5px;white-space:nowrap;font-family:inherit;transition:background .15s,color .15s;}
.ev-seg-btn:hover{color:var(--text);}
.ev-seg-btn.ev-seg-active{background:#1a4e8c;color:var(--text);}
@media(max-width:768px){
  .ev-seg{display:flex;width:100%;}
  .ev-seg-btn{min-width:0;flex:1;padding:6px 6px;}
}

/* ── CONTEST OF THE DAY ── */
.dash-cotd{background:linear-gradient(135deg,#0c1320,#111827);border:1px solid var(--border);border-radius:14px;padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.cotd-label{font-size:0.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px;}
.cotd-q{font-size:0.92rem;font-weight:700;color:var(--text);}
.cotd-bar{height:3px;border-radius:2px;margin-top:10px;background:var(--border);overflow:hidden;}
.cotd-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--blue));transition:width .5s ease;}
.cotd-btns{display:flex;gap:10px;flex-shrink:0;}
.cotd-vote{text-align:center;}
.cotd-btn{border:1px solid var(--border);border-radius:9px;padding:8px 22px;font-size:0.85rem;font-weight:700;cursor:pointer;font-family:var(--font);background:transparent;color:var(--text);transition:all .15s;white-space:nowrap;display:block;width:100%;}
.cotd-btn:hover:not(:disabled){background:rgba(255,255,255,.07);}
.cotd-btn.yes:hover:not(:disabled){border-color:var(--green);color:var(--green);}
.cotd-btn.no:hover:not(:disabled){border-color:var(--red);color:var(--red);}
.cotd-btn.picked-yes{background:rgba(16,185,129,.15);border-color:var(--green);color:var(--green);}
.cotd-btn.picked-no{background:rgba(239,68,68,.12);border-color:var(--red);color:var(--red);}
.cotd-btn:disabled{cursor:default;}
.cotd-count{font-size:0.7rem;color:var(--muted);margin-top:5px;}


.dash-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;}
@media(max-width:600px){.dash-filters{grid-template-columns:1fr;}.dash-banner{min-height:unset;}}
.dash-rank-grid{display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:600px){.dash-rank-grid{grid-template-columns:1fr;}}
.dash-filter-group{display:flex;flex-direction:column;gap:6px;}
.dash-filter-group label{font-size:0.75rem;font-weight:700;color:#93c5fd;text-transform:uppercase;letter-spacing:.6px;text-align:center;}
.dash-filter-group select,.dash-filter-group input[type=date]{background:var(--card2);border:1px solid var(--border);border-radius:8px;color:#93c5fd;padding:6px 12px;font-size:0.73rem;font-weight:600;font-family:var(--font);outline:none;width:100%;appearance:auto;-webkit-appearance:auto;text-align:center;transition:border-color .2s,box-shadow .2s,transform .2s;}
.dash-filter-group select:hover,.dash-filter-group input[type=date]:hover{border-color:#93c5fd;box-shadow:0 0 0 2px rgba(147,197,253,0.2);transform:scale(1.025);}
.dash-filter-group select:focus,.dash-filter-group input[type=date]:focus{border-color:var(--blue-light);box-shadow:0 0 0 3px rgba(147,197,253,0.28);transform:scale(1.025);color:var(--text);}
.dash-filter-group input[type=date]::-webkit-calendar-picker-indicator{filter:brightness(0) saturate(100%) invert(72%) sepia(7%) saturate(600%) hue-rotate(185deg) brightness(95%);cursor:pointer;}
/* Filters + stats grouped box */
.dash-filters-stats-wrap{background:#1a4e8c;border:1px solid #93c5fd;border-radius:14px;padding:16px 16px 4px;margin-bottom:12px;}
.dash-filters-stats-wrap .dash-filters{margin-bottom:14px;}
.dash-filters-stats-wrap .dash-stat-row{margin-bottom:0;border:none;background:transparent;padding:10px 0 6px;}
/* Skeleton loader */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.dv.skel{display:inline-block;width:48px;height:1.5rem;border-radius:6px;background:linear-gradient(90deg,var(--card2) 25%,var(--card) 50%,var(--card2) 75%);background-size:800px 100%;animation:shimmer 1.4s infinite;color:transparent;vertical-align:middle;}
.skel{background:linear-gradient(90deg,var(--card2) 25%,var(--card) 50%,var(--card2) 75%);background-size:800px 100%;animation:shimmer 1.4s infinite;}
/* Global interactive glow */
.btn:not(.btn-ghost):hover,.inp:focus,.cf-btn:hover,.contest-card:hover,.contest-dash-card:hover,.radio-opt:hover,.feat:hover,.faq-q:hover,.dash-filter-group select:focus,.dash-filter-group input[type=date]:focus,.umenu-item:hover{box-shadow:0 0 0 2px rgba(147,197,253,0.2),0 0 14px rgba(147,197,253,0.1);}
.dash-filter-date-row{display:flex;gap:6px;align-items:center;}
.dash-filter-date-row span{font-size:0.72rem;color:var(--muted);flex-shrink:0;}
.dash-filter-date-row input{flex:1;min-width:0;}
.dash-filter-rank-row{display:flex;gap:6px;}
.dash-filter-rank-row select{flex:1;min-width:0;}

.dash-stat-row{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px 16px;display:flex;flex-wrap:wrap;margin-bottom:22px;align-items:center;justify-content:center;gap:0;}
.dash-stat{text-align:center;flex:1;min-width:90px;padding:8px 12px;}
.dash-stat .dv{font-size:1.5rem;font-weight:900;color:var(--gold);}
.dash-stat .dl{font-size:0.65rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;}
.dash-stat-sep{width:1px;background:#93c5fd;height:44px;align-self:center;opacity:0.5;}
.rank-change{font-size:0.67rem;font-weight:700;margin-top:3px;}
.rank-up{color:var(--green);}
.rank-down{color:var(--red);}
.rank-same{color:var(--muted);}

.contest-dash-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;cursor:pointer;transition:all .2s;}
.contest-dash-card:hover{border-color:var(--gold);background:var(--card2);}
.contest-dash-card .cdc-left h4{font-size:0.95rem;font-weight:700;margin-bottom:3px;}
.contest-dash-card .cdc-left p{font-size:0.75rem;color:var(--muted);}
.contest-dash-card .cdc-right{display:flex;align-items:center;gap:12px;}
.cdc-pts{font-size:1.1rem;font-weight:800;color:var(--gold);}
.cdc-pts span{font-size:0.7rem;color:var(--muted);font-weight:400;display:block;text-align:right;}

/* ── UTIL ── */
.page-title{font-size:1.2rem;font-weight:800;margin-bottom:16px;letter-spacing:-0.3px;}
.empty{color:var(--muted);font-size:0.85rem;padding:20px 0;}
.divider{height:1px;background:var(--border);margin:20px 0;}
.pill{display:inline-block;font-size:0.68rem;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(16,185,129,.15);color:var(--green);border:1px solid rgba(16,185,129,.3);}
.section-label{font-size:0.7rem;font-weight:700;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  nav{padding:0 14px;}
  .logo sub{display:none;}
  .nav-mid{display:none !important;}
  .nav-hamburger{display:block;}
  /* Homepage (logged-out): no burger — guests can only Ingresar/register, not browse. */
  body:has(#page-home.active) .nav-hamburger{display:none !important;}
  /* Logged-in mobile: the flag user-menu is the ONLY burger, and it carries the nav tabs. */
  #umenu-mobile-nav{display:block !important;}
  .nav-right .btn-ghost{display:none;}
  /* Guest mobile: keep only Ingresar top-right; Concursos/Eventos move to the CTA below the steps. */
  #nav-auth .nav-tab{display:none;}
  .home-steps-cta{display:flex !important;}
  .page{padding:14px;}
  .hero{padding:36px 12px 28px;}
  .hero h1{font-size:1.6rem;}
  .features{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .admin-grid{grid-template-columns:1fr;}
  /* .bracket-grid removed - container handles scroll via overflow-x:auto */
}
@media(max-width:480px){
  .features{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .ou-match{flex-direction:column;align-items:flex-start;}
  .browse-group{flex-direction:column;align-items:flex-start;}
  .hero h1{font-size:1.4rem;}
  #countdown{font-size:1.2rem;}
  /* #home-banner-cuenta and #home-banner-hoja order rules removed —
     these elements are no longer in a flex container so order: has no effect */
  .btn-hero-cta{animation:none !important;}
  /* Crear contest cards — compact list on mobile */
  .crear-contest-grid{grid-template-columns:1fr !important;gap:0 !important;}
  .crear-card{width:100% !important;height:auto !important;min-height:0 !important;border-radius:0 !important;border-bottom:none !important;flex-direction:row !important;align-items:center !important;justify-content:space-between !important;padding:14px 16px !important;}
  .crear-card:first-child{border-radius:12px 12px 0 0 !important;}
  .crear-card:last-child{border-radius:0 0 12px 12px !important;border-bottom:1px solid #93c5fd !important;}
  .crear-card h3{font-size:0.88rem !important;margin-bottom:2px !important;}
  .crear-card p{font-size:0.73rem !important;margin:0 !important;}
  .crear-card > div:last-child{margin-top:0 !important;flex-shrink:0;margin-left:12px;}
}
/* ── Hero CTA ── */
.btn-hero-cta{transition:transform .18s;}
.btn-hero-cta:hover{transform:scale(1.07);}
/* ── Rules Panel ── */
.rules-panel{border:1px solid var(--border);border-radius:10px;margin-bottom:16px;overflow:hidden;}
.rules-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:var(--card);border:none;cursor:pointer;font-family:var(--font);color:var(--text);font-size:0.82rem;font-weight:600;text-align:left;gap:8px;}
.rules-toggle:hover{background:var(--card2);}
.rules-icon{font-size:1.15rem;font-weight:300;color:var(--muted2);line-height:1;flex-shrink:0;}
.rules-body{padding:18px 16px;background:var(--card2);font-size:0.81rem;line-height:1.65;display:none;}
.rules-body h4{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:16px 0 7px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.rules-body h4:first-child{margin-top:0;}
.rules-body p{margin:0 0 8px;color:var(--muted2);}
.rules-body ul{margin:0 0 8px;padding-left:18px;color:var(--muted2);}
.rules-body li{margin-bottom:5px;}
.rules-body strong{color:var(--text);}
.rules-pts{display:grid;grid-template-columns:1fr auto;gap:3px 20px;margin:8px 0;}
.rules-pts span:nth-child(odd){color:var(--muted2);}
.rules-pts span:nth-child(even){font-weight:700;text-align:right;}
.rules-tip{background:rgba(26,79,156,.1);border-left:3px solid #1a4f9c;border-radius:0 8px 8px 0;padding:10px 14px;margin-top:10px;font-size:0.78rem;color:var(--muted2);}
.rules-tip strong{color:#93c5fd;}
.rules-ex{display:grid;grid-template-columns:auto 1fr auto;gap:6px 12px;align-items:center;margin:8px 0;}
.rules-ex-line{font-size:0.72rem;color:var(--muted2);}
.rules-ex-result{font-size:0.78rem;}
.rules-ex-outcome{font-size:0.78rem;font-weight:700;text-align:right;}
/* ── Survivor ── */
.survivor-round-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;}
.survivor-round-card.active-pick{border-color:#1a4f9c;}
.survivor-round-card.completed{border-color:#10b981;}
.survivor-round-card.eliminated{border-color:#ef4444;}
.survivor-team-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:var(--card2);transition:border-color .15s,background .15s;text-align:left;width:100%;font-family:var(--font);}
.survivor-team-btn:hover:not(:disabled){border-color:#1a4f9c;background:rgba(26,79,156,.08);}
.survivor-team-btn.selected{border-color:#10b981;background:rgba(16,185,129,.1);}
.survivor-team-btn:disabled{opacity:.4;cursor:not-allowed;}
.survivor-alive-badge{background:rgba(16,185,129,.15);color:#10b981;border:1px solid rgba(16,185,129,.3);border-radius:20px;padding:4px 14px;font-size:0.78rem;font-weight:700;}
.survivor-dead-badge{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3);border-radius:20px;padding:4px 14px;font-size:0.78rem;font-weight:700;}
/* ── Mobile overrides ── */
@media(max-width:768px){
  /* Dashboard ranking: stack to 1 column */
  #dash-ranking-wrap{grid-template-columns:1fr !important;}
  /* Hide scorer/card details on mobile — not enough space */
  .banner-match-details{display:none !important;}
  /* Dashboard stats: wrap as 3+2 instead of overflow */
  .dash-stat-row{gap:0;flex-wrap:wrap;}
  .dash-stat{min-width:calc(33% - 1px);padding:10px 6px;}
  .dash-stat-sep{display:none;}
  /* Bracket: horizontal scroll container */
  #bracket-container{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .bracket-matches-grid{min-width:320px;}
  /* 3-col aff/minigame row below bracket */
  .bracket-aff-row{grid-template-columns:1fr !important;}
  /* Homepage footer grid */
  .home-footer-grid{grid-template-columns:1fr !important;gap:16px !important;}
  /* Concursos group actions wrap better */
  .group-actions{gap:6px;}
  /* Modal full-width on small screens */
  .modal-box{padding:20px 16px;}
  /* Amigos share buttons full width */
  .amigos-share-row{flex-direction:column;}
  .amigos-share-row .btn{width:100%;justify-content:center;}
  /* OU match: tighter on mobile */
  .ou-match{padding:10px 12px;gap:8px;}
  .ou-btn{padding:5px 10px;font-size:0.75rem;}
  /* Affiliate banner rows */
  .aff{flex-direction:column;align-items:flex-start;gap:8px;}
}
@media(max-width:480px){
  /* Dashboard stat row: 2-col wrap */
  .dash-stat{min-width:calc(50% - 1px);}
  /* SF grid: single col on tiny screens */
  .bracket-sf-grid{grid-template-columns:1fr !important;}
}
main#main-content{display:contents;}
/* White body when home or dashboard page is visible */
body:has(#page-home.active),body:has(#page-dashboard.active){background:#f1f5f9 !important;}
/* Hero — ensure dark text/badge on white background */
#page-home .hero h1,#page-home .hero span{color:#041230 !important;}
#page-home .hero-badge{color:#1e3a6e !important;border-color:rgba(4,18,48,0.3) !important;}
/* Light page canvas: text that sits directly on the #f1f5f9 page background uses
   the dark banner-blue #0c3366 (the 'Cómo Jugar' banner fill) for contrast.
   Cards/banners keep their own light text since they have dark backgrounds. */
.page-title{color:#0c3366 !important;}
.breadcrumb,.breadcrumb a,.breadcrumb span{color:#0c3366 !important;}
.breadcrumb a:hover{color:#1a4e8c !important;}
.btab,.gtab{color:#0c3366 !important;}
.cf-label{color:#0c3366 !important;}
/* Dashboard typewriter header */
#dash-hero{text-align:center;padding:28px 20px 18px;}
#dash-hero .dash-type-line{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:300;line-height:1.15;color:#041230;min-height:calc(clamp(1.5rem,4vw,2.4rem)*1.15);white-space:pre;}
#dash-hero .dash-type-fixed{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:300;line-height:1.15;color:#041230;margin-top:0;letter-spacing:normal;}
#dash-hero-cursor{color:#041230;font-weight:300;animation:blink .7s step-end infinite;}
#hero-tagline.typing::after{content:'|';color:#041230;font-weight:300;animation:blink .7s step-end infinite;}
/* ── Compartir modal ── */
#compartir-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:400;align-items:center;justify-content:center;padding:16px;}
#compartir-modal.open{display:flex;}
.comp-type-btn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:16px 18px;font-size:0.9rem;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .15s;text-align:left;display:flex;align-items:center;gap:10px;width:100%;}
.comp-type-btn:hover{border-color:#93c5fd;background:#1a4e8c;color:#fff;}
/* ── FanQuiz ── */
.fq-card-wrap{position:relative;height:260px;margin:0 auto 24px;max-width:400px;user-select:none;}
.fq-card{position:absolute;inset:0;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 4px 24px rgba(0,0,0,0.3);cursor:grab;transition:transform 0.12s ease,box-shadow 0.12s ease;touch-action:pan-y;}
.fq-card:active{cursor:grabbing;}
.fq-card.dragging{transition:none;}
.fq-card.swipe-yes{transform:translateX(120%) rotate(15deg)!important;opacity:0;transition:transform 0.35s ease,opacity 0.3s ease;}
.fq-card.swipe-no {transform:translateX(-120%) rotate(-15deg)!important;opacity:0;transition:transform 0.35s ease,opacity 0.3s ease;}
.fq-hint-yes{position:absolute;top:18px;left:18px;border:3px solid #10b981;color:#10b981;border-radius:8px;padding:3px 10px;font-weight:900;font-size:0.9rem;opacity:0;transition:opacity 0.1s;}
.fq-hint-no {position:absolute;top:18px;right:18px;border:3px solid #f87171;color:#f87171;border-radius:8px;padding:3px 10px;font-weight:900;font-size:0.9rem;opacity:0;transition:opacity 0.1s;}
.fq-badge{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted2);margin-bottom:10px;}
.fq-question{font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.45;flex:1;display:flex;align-items:center;}
.fq-actions{display:flex;gap:12px;justify-content:center;margin-top:0;}
.fq-btn{flex:1;max-width:140px;padding:12px 0;border-radius:12px;font-size:0.95rem;font-weight:800;border:none;cursor:pointer;font-family:var(--font);transition:transform .1s,opacity .1s;}
.fq-btn:active{transform:scale(0.95);}
.fq-btn-yes{background:#10b981;color:#fff;}
.fq-btn-no {background:#f87171;color:#fff;}
.fq-progress{display:flex;gap:4px;margin-bottom:16px;}
.fq-pip{flex:1;height:4px;border-radius:2px;background:var(--border);}
.fq-pip.done-correct{background:#10b981;}
.fq-pip.done-wrong  {background:#f87171;}
.fq-pip.answered    {background:#475569;}
.fq-pip.current     {background:#93c5fd;}
.fq-result-overlay{position:absolute;inset:0;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:2rem;font-weight:900;pointer-events:none;opacity:0;transition:opacity 0.2s;}
.fq-result-overlay.correct{background:rgba(16,185,129,0.18);color:#10b981;opacity:1;}
.fq-result-overlay.wrong  {background:rgba(248,113,113,0.18);color:#f87171;opacity:1;}
.fq-score-screen{text-align:center;padding:32px 20px;}
.fq-score-big{font-size:3.5rem;font-weight:900;color:var(--gold);}
.fq-score-label{font-size:0.85rem;color:var(--muted2);margin-top:4px;}
.fq-lb-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:var(--card2);margin-bottom:6px;}
.fq-lb-rank{width:24px;font-size:0.8rem;font-weight:700;color:var(--muted2);text-align:center;}
.fq-lb-name{flex:1;font-size:0.85rem;font-weight:600;}
.fq-lb-score{font-size:0.85rem;font-weight:800;color:var(--gold);}
/* ── Live event toast ── */
#live-event-toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(100px);
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:10px 16px;box-shadow:0 6px 28px rgba(0,0,0,0.5);
  z-index:9000;min-width:220px;max-width:300px;
  opacity:0;pointer-events:none;
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s ease;
}
#live-event-toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
#live-event-toast.hide{transform:translateX(-50%) translateY(100px);opacity:0;}

/* ── HOME v2 — sport grid, steps, WA strip ── */
.home-sport-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 4px;}
@media(max-width:640px){.home-sport-grid{grid-template-columns:repeat(2,1fr);}}
.sport-tile{background:rgba(255,255,255,0.07);border:1px solid rgba(147,197,253,0.22);border-radius:12px;padding:16px 12px;min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:all .18s;}
.sport-tile:hover{background:rgba(147,197,253,0.15);border-color:#93c5fd;transform:translateY(-2px);}
.sport-tile .st-name{font-size:0.82rem;font-weight:700;color:#e2e8f0;line-height:1.25;display:block;}
.home-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;gap:0;margin:14px 0 4px;}
.step-arrow{align-self:start;padding-top:17px;color:#93c5fd;opacity:0.5;font-size:1.15rem;font-weight:700;line-height:1;}
@media(max-width:540px){.home-steps{grid-template-columns:1fr;gap:12px;}.step-arrow{display:none;}}
.home-step{text-align:center;padding:8px 10px;}
.home-step .step-num{width:40px;height:40px;border-radius:50%;background:rgba(59,130,246,0.3);border:2px solid #3b82f6;color:#93c5fd;font-size:1rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.home-step h3{font-size:0.82rem;font-weight:700;color:#f1f5f9;margin-bottom:4px;}
.home-step p{font-size:0.72rem;color:rgba(255,255,255,0.65);line-height:1.4;}
.home-steps-cta{display:none;gap:10px;margin-top:16px;}
.wa-strip{background:linear-gradient(135deg,#0d5c4a,#128C7E);border:1px solid rgba(37,211,102,0.35);border-radius:12px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.wa-strip p{font-size:0.82rem;font-weight:600;color:#e2ffe9;margin:0;line-height:1.4;}
.wa-strip a{background:#25D366;color:#fff;font-size:0.75rem;font-weight:800;padding:8px 16px;border-radius:8px;text-decoration:none;white-space:nowrap;flex-shrink:0;}
.wa-strip a:hover{background:#1db954;}
@media(max-width:540px){.wa-strip{flex-direction:column;text-align:center;}.wa-strip a{width:100%;text-align:center;display:block;}}

/* ═══════════════════ Pilot polish layer ═══════════════════
   Refinement-only overrides appended after the base styles:
   typographic rhythm, layered depth, harmonized corners,
   calmer motion, focus rings, and detail polish.
   Same palette, same font, same copy, same layout. */

/* ── 1. Typography rhythm ── */
.hero h1{letter-spacing:-0.02em;}
.dash-hello h2{letter-spacing:-0.02em;}
.page-title{letter-spacing:-0.01em;}
.modal-box h2,.upanel-title,.group-rank-title,.contest-card h3,.dash-banner h4{letter-spacing:-0.01em;}
.hero p,.upanel-section p,.contest-card p,.dash-banner p,.home-step p{line-height:1.55;}
/* Tabular figures so scores, ranks and countdowns never jitter */
.lb-pts,.lb-rank,.cdc-pts,.dash-stat .dv,.stat-card .sv,.grp-mypos .mypos-val,.ev-score,.fq-lb-score,.fq-score-big,#countdown,.group-code,.bracket-id,.cotd-count,.sl-pts{font-variant-numeric:tabular-nums;}

/* ── 2. Depth & materials ── */
/* Frosted-glass fixed nav (solid rgba(4,18,48,.98) fallback stays above) */
@supports((-webkit-backdrop-filter:saturate(180%) blur(20px)) or (backdrop-filter:saturate(180%) blur(20px))){
  nav{background:rgba(4,18,48,0.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);}
  .mobile-menu{background:rgba(4,18,48,0.88);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);}
}
nav{border-bottom:1px solid rgba(147,197,253,0.16);box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(4,18,48,.08);}
.mobile-menu{border-bottom:1px solid rgba(147,197,253,0.16);box-shadow:0 8px 24px rgba(4,18,48,.18);}
/* Layered soft shadows on cards resting on the light page canvas */
.card,.group-card,.contest-item,.stat-card,.contest-dash-card,.browse-group,.survivor-round-card,.ou-match,.ou-single,.admin-ctrl,.admin-match,.lb-table,.dash-ranking-wrap,.dash-stat-row,.dash-cotd,.score-legend,.aff,.wa-strip,.dash-filters-stats-wrap,.contest-card,.dash-banner,.rules-panel,.pl-rank-panel,.faq-item,.req-item,.ev-match{box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(4,18,48,.08);}
.match-pair-wrap,.tree-match{box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px rgba(4,18,48,.08);}
.tree-col-final .tree-match{box-shadow:0 0 0 4px rgba(245,158,11,0.14),0 8px 24px rgba(4,18,48,.14);}
/* Floating surfaces: hairline borders + deeper, softer elevation */
.umenu-drop,.grp-settings-menu{border-color:rgba(147,197,253,0.22);box-shadow:0 1px 2px rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.45),0 32px 64px rgba(4,18,48,.35);}
.modal-box,.group-rank-box{border-color:rgba(147,197,253,0.22);box-shadow:0 1px 2px rgba(0,0,0,.25),0 24px 64px rgba(0,0,0,.5);}
#upanel{box-shadow:-8px 0 40px rgba(0,0,0,.4);}
/* Unified brand-tinted scrim behind every overlay */
#modal-overlay,#upanel-overlay,#group-rank-overlay,#grq-overlay,#compartir-modal{background:rgba(4,18,48,.78);}
@supports((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  #modal-overlay,#upanel-overlay,#group-rank-overlay,#grq-overlay,#compartir-modal{-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);}
}

/* ── 3. Corner harmonization: 10 / 14 / 18 ── */
.card,.group-card,.contest-item,.lb-table,.lb-scroll,.stat-card,.survivor-round-card,.contest-rank-block,.admin-ctrl,.admin-match,.aff,.browse-group,.wa-strip,.ev-match,.ou-match,.ou-single,.sport-tile,.rules-panel,.pl-rank-panel,.faq-item,.score-legend,.req-item{border-radius:14px;}
.modal-box,.group-rank-box{border-radius:18px;}
.btn,.inp,.ou-input,.ou-btn,.cf-select,.contest-select,.umenu-trigger,.umenu-item,.cotd-btn,.wa-btn,.ig-btn,.radio-opt,.admin-tab-btn,.mobile-menu .nav-tab,.pl-cat-arrow,.ev-bar-pill,.bracket-next-banner button,.grp-settings-item{border-radius:10px;}

/* ── 4. Motion: one easing curve, gentle lift, real press states ── */
.btn,.ou-btn,.cotd-btn,.cf-btn,.db-cta,.wa-btn,.ig-btn,.admin-tab-btn,.nav-btn,.umenu-item,.contest-item,.contest-dash-card,.contest-card,.dash-banner,.sport-tile,.match-team-btn,.radio-opt,.comp-type-btn,.survivor-team-btn,.grp-settings-item,.sub-pick-opt,.showcase-cdot,.rank-time-btn,.rank-scope-btn{transition:transform .22s cubic-bezier(.25,.1,.25,1),box-shadow .22s cubic-bezier(.25,.1,.25,1),background-color .22s cubic-bezier(.25,.1,.25,1),border-color .22s cubic-bezier(.25,.1,.25,1),color .18s cubic-bezier(.25,.1,.25,1),opacity .18s ease,filter .18s ease;}
.faq-q,.rules-toggle,.pl-rank-toggle{transition:background-color .22s cubic-bezier(.25,.1,.25,1);}
/* Hover lift */
.btn:not(.btn-ghost):hover,.wa-btn:hover,.ig-btn:hover,.db-cta:hover{transform:translateY(-1px);}
.contest-card:hover,.contest-item:hover,.contest-dash-card:hover,.dash-banner:hover,.sport-tile:hover{transform:translateY(-1px);}
.contest-card:hover{box-shadow:0 0 0 2px rgba(147,197,253,0.2),0 2px 4px rgba(0,0,0,.08),0 16px 40px rgba(4,18,48,.16);}
.contest-item:hover,.contest-dash-card:hover{box-shadow:0 2px 4px rgba(0,0,0,.08),0 16px 40px rgba(4,18,48,.16);}
/* Soften scale-jump hovers into a calm lift */
.btn-hero-cta:hover{transform:translateY(-1px) scale(1.02);}
.db-cta-blue:hover{transform:translateY(-1px);}
/* Nav tabs: no font-weight jump on hover (prevents neighbour reflow) */
.nav-tab{transition:opacity .18s ease,color .18s ease,transform .22s cubic-bezier(.25,.1,.25,1);}
.nav-tab:hover{font-weight:400;transform:translateY(-1px);}
.nav-tab.active:hover{font-weight:600;transform:translateY(-1px);}
/* Press states */
.btn:active,.ou-btn:active,.cotd-btn:active,.cf-btn:active,.db-cta:active,.wa-btn:active,.ig-btn:active,.admin-tab-btn:active,.match-team-btn:active,.comp-type-btn:active,.survivor-team-btn:active,.radio-opt:active,.sport-tile:active,.nav-tab:active,.umenu-item:active,.grp-settings-item:active{transform:scale(0.98);}
.contest-card:active,.contest-item:active,.contest-dash-card:active,.dash-banner:active{transform:translateY(0) scale(0.99);}

/* ── 5. Controls: focus rings instead of default outlines ── */
.inp:focus,.ou-input:focus,.cf-select:focus,.contest-select:focus{outline:none;border-color:var(--blue-light);box-shadow:0 0 0 3px rgba(147,197,253,.25);}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(147,197,253,.55),0 0 0 5px rgba(26,79,156,.18);}

/* ── 6. Detail polish ── */
::selection{background:rgba(26,79,156,.9);color:#f1f5f9;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(26,79,156,.35);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:rgba(26,79,156,.55);}
.lb-scroll,.group-rank-scroll,.contest-rank-scroll,#dash-lb-cr,#dash-lb-global,#upanel,.badwords-list,#bracket-container{scrollbar-width:thin;scrollbar-color:rgba(147,197,253,.35) transparent;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
/* Toasts share one material */
#toast{border-radius:14px;border-color:rgba(147,197,253,.22);box-shadow:0 1px 2px rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.45);padding:12px 22px;}
#live-event-toast{border-color:rgba(147,197,253,.22);box-shadow:0 1px 2px rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.45);}
/* Comfortable tap targets on mobile */
@media(max-width:768px){
  .btn:not(.btn-sm){min-height:44px;}
  .cotd-btn{min-height:44px;}
  .ou-btn{min-height:40px;}
  .nav-btn,.mobile-menu .nav-tab,.umenu-item{min-height:44px;}
}
/* Respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .live-dot,.db-meta-dot,#dash-hero-cursor{animation:none !important;}
}

/* ══ Sport iconography ══════════════════════════════════════════════════════
   Brand SVG sprite icons (<use href="#ic-…">) + ESPN team crests. Icons are
   stroke-based and inherit currentColor; sizes are fixed to avoid layout shift. */
.sp-ic{width:18px;height:18px;flex:none;}
/* Homepage sport grid — icon stacked above the label inside the existing tile */
.sport-tile{flex-direction:column;gap:8px;}
.sport-tile .st-ic{width:30px;height:30px;flex:none;color:var(--blue);transition:color .18s ease;}
.sport-tile:hover .st-ic{color:#93c5fd;}
/* Eventos sport filter chips — small leading glyph, inherits chip text color */
.evf-btn{display:inline-flex;align-items:center;gap:6px;}
.evf-ic{width:16px;height:16px;flex:none;}
/* Contest / crear card titles — small glyph beside the title */
.ci-ic{width:17px;height:17px;flex:none;color:var(--blue-light);vertical-align:-3px;margin-right:7px;}
/* Eventos rows — sport glyph for rows without team crests (races, tenis, UFC) */
.ev-sp-ic{width:18px;height:18px;flex:none;color:var(--blue-light);vertical-align:-4px;margin-right:6px;}
/* Team crests (ESPN logos) — fixed box, soft chip backing, hidden on error */
.ev-crest{width:20px;height:20px;border-radius:4px;object-fit:contain;vertical-align:-5px;margin-right:5px;background:rgba(255,255,255,0.07);}
.ev-crest-sm{width:16px;height:16px;border-radius:4px;object-fit:contain;vertical-align:-3px;margin-right:3px;background:rgba(255,255,255,0.07);}

/* ══════════════════════════════════════════════════════════════════════════
   BOTTOM TAB BAR — native app + mobile web (Apple-style, 5 destinations)
   Hidden by default; shown only for signed-in users (html.is-auth, set by
   native.js) on small screens, and always inside the native shell.
══════════════════════════════════════════════════════════════════════════ */
.tabbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;
  grid-template-columns:repeat(5,1fr);align-items:stretch;
  background:rgba(4,18,48,0.98);border-top:1px solid var(--border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding-bottom:env(safe-area-inset-bottom);}
.tabbar-btn{background:transparent;border:none;cursor:pointer;font-family:var(--font);
  color:var(--muted2);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:8px 2px 6px;min-height:52px;transition:color .15s,transform .1s;
  -webkit-tap-highlight-color:transparent;}
.tabbar-btn svg{width:23px;height:23px;stroke:currentColor;fill:none;}
.tabbar-btn span{font-size:0.62rem;font-weight:600;letter-spacing:0.2px;font-variant-numeric:tabular-nums;}
.tabbar-btn.active{color:var(--blue-light);}
.tabbar-btn.active svg{filter:drop-shadow(0 0 6px rgba(147,197,253,0.45));}
.tabbar-btn:active{transform:scale(0.93);}

@media(max-width:768px){ html.is-auth .tabbar{display:grid;} }
html.native.is-auth .tabbar{display:grid;}
/* Reserve space so page content clears the fixed bar + home-indicator inset. */
@media(max-width:768px){ html.is-auth body{padding-bottom:calc(58px + env(safe-area-inset-bottom));} }
html.native.is-auth body{padding-bottom:calc(58px + env(safe-area-inset-bottom));}
/* Lift the transient toast above the bar when it's shown. */
@media(max-width:768px){ html.is-auth #toast{bottom:calc(70px + env(safe-area-inset-bottom));} }
html.native.is-auth #toast{bottom:calc(70px + env(safe-area-inset-bottom));}

/* ── Native status-bar / notch safe areas: push fixed top nav below the notch ── */
html.native nav{height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);}
html.native body{padding-top:calc(64px + env(safe-area-inset-top));}
html.native .mobile-menu{top:calc(64px + env(safe-area-inset-top));}

/* ══════════════════════════════════════════════════════════════════════════
   FANTASY MOTORSPORT TAB
══════════════════════════════════════════════════════════════════════════ */
.fantasy-hero{max-width:720px;margin:0 auto;padding:28px 18px 10px;text-align:center;}
.fantasy-hero-badge{display:inline-block;font-size:0.66rem;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:#000;background:var(--gold);padding:5px 12px;border-radius:20px;margin-bottom:16px;}
.fantasy-hero h1{font-size:1.9rem;font-weight:900;line-height:1.15;letter-spacing:-0.5px;color:var(--text);margin-bottom:12px;}
.fantasy-hero p{font-size:0.92rem;color:#4a5568;line-height:1.5;max-width:560px;margin:0 auto 22px;}
.fantasy-steps{display:grid;gap:10px;text-align:left;margin-bottom:8px;}
@media(min-width:620px){.fantasy-steps{grid-template-columns:repeat(3,1fr);}}
.fantasy-step{display:flex;gap:11px;align-items:flex-start;background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:14px;}
.fantasy-step>span{flex:none;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#000;
  font-weight:900;font-size:0.85rem;display:flex;align-items:center;justify-content:center;}
.fantasy-step strong{display:block;font-size:0.88rem;color:var(--text);margin-bottom:2px;}
.fantasy-step small{font-size:0.76rem;color:var(--muted2);line-height:1.35;}

.fantasy-card{background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:16px 16px 14px;margin-bottom:14px;box-shadow:0 6px 20px rgba(0,0,0,.22);}
.fantasy-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.fantasy-card-sport{font-size:0.68rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--blue-light);}
.fantasy-card-name{font-size:1.12rem;font-weight:800;color:var(--text);margin-top:2px;}
.fantasy-card-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.fc-budget{display:flex;flex-direction:column;}
.fc-budget small{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.fc-budget strong{font-size:1.05rem;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;}
.fc-badges{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.fc-stat{display:flex;flex-direction:column;align-items:center;background:var(--card2);border:1px solid var(--border);
  border-radius:10px;padding:6px 12px;}
.fc-stat span{font-size:1.15rem;font-weight:900;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;}
.fc-stat small{font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.fc-pill{display:inline-block;font-size:0.66rem;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.fc-pill-gold{background:rgba(245,158,11,.16);color:var(--gold);}
.fc-pill-green{background:rgba(16,185,129,.16);color:#6ee7b7;}
.fc-pill-blue{background:rgba(59,130,246,.16);color:var(--blue-light);}
.fc-pill-red{background:rgba(239,68,68,.16);color:#fca5a5;}
.fantasy-card-cta{display:flex;justify-content:flex-end;}

/* ── Inicio admin quick-entry card (admin-only; also the mobile path in) ── */
/* Button is toggled to display:block by the .admin-only handler, so the flex row
   lives on an inner wrapper (an inline display:block from JS can't break it). */
.fx-admin-card{width:100%;display:block;text-align:left;cursor:pointer;
  background:var(--card2);border:1px solid var(--blue-light);border-radius:14px;padding:12px 16px;margin-bottom:14px;
  font-family:var(--font);transition:background .15s,border-color .15s;}
.fx-admin-card:hover{background:#12457f;}
.fx-admin-card-inner{display:flex;align-items:center;gap:12px;}
.fx-admin-card-ico{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(147,197,253,.16);color:var(--blue-light);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;}
.fx-admin-card-txt{flex:1;min-width:0;display:flex;flex-direction:column;}
.fx-admin-card-txt strong{color:var(--text);font-size:0.9rem;font-weight:700;}
.fx-admin-card-txt small{color:var(--muted2);font-size:0.72rem;margin-top:1px;}
.fx-admin-card-arrow{flex:none;color:var(--blue-light);font-size:1.1rem;}

/* ══ FANTASY MOTOCROSS ENGINE ══ */
.fx-section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;}
.fx-section-head h3{font-size:1rem;font-weight:800;color:var(--text);margin:0;}
.fx-empty{background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:18px 16px;text-align:center;}
.fx-empty p{margin:0;color:var(--muted2);font-size:0.85rem;line-height:1.45;}

/* Sport chooser */
.fx-sport-grid{display:grid;gap:10px;}
.fx-sport{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:15px 16px;font-family:var(--font);}
.fx-sport-on{cursor:pointer;transition:border-color .15s,background .15s;}
.fx-sport-on:hover{border-color:var(--gold);background:#12457f;}
.fx-sport-off{opacity:.6;}
.fx-sport-name{font-size:0.98rem;font-weight:800;color:var(--text);}
.fx-sport-cta{font-size:0.82rem;font-weight:700;color:var(--gold);}
.fx-sport-soon{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);
  background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;}

/* Team card */
.fx-team-grid{display:grid;gap:12px;margin-bottom:12px;}
@media(min-width:520px){.fx-team-grid{grid-template-columns:1fr 1fr;}}
.fx-team-cat{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;}
.fx-team-cat-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.fx-team-cat-head strong{font-size:0.82rem;font-weight:800;color:var(--text);letter-spacing:.4px;}
.fx-livery-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.3);flex:none;}
.fx-slot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid var(--border);}
.fx-slot:first-of-type{border-top:none;}
.fx-slot-name{font-size:0.82rem;color:var(--text);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fx-slot-price{font-size:0.78rem;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;flex:none;}
.fx-team-budget{display:flex;gap:20px;align-items:center;padding:10px 2px 4px;border-top:1px solid var(--border);margin-bottom:8px;}
.fx-actions{display:flex;gap:8px;justify-content:flex-end;}

/* Editor header + budget bar */
.fx-editor-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
.fx-editor-head h3{font-size:1.05rem;font-weight:800;color:var(--text);margin:0 0 2px;}
.fx-editor-head p{font-size:0.78rem;color:var(--muted2);margin:0;line-height:1.4;}
.fx-budget-bar-wrap{position:sticky;top:64px;z-index:5;background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:12px 14px;margin-bottom:14px;box-shadow:0 6px 18px rgba(0,0,0,.24);}
.fx-budget-bar-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px;font-size:0.82rem;color:var(--muted2);}
.fx-budget-bar-top strong{color:var(--green);font-size:1rem;font-variant-numeric:tabular-nums;}
.fx-budget-bar-top strong.fx-over{color:var(--red);}
.fx-budget-count{font-size:0.74rem;font-weight:700;color:var(--blue-light);}
.fx-budget-bar{height:8px;border-radius:6px;background:var(--card2);overflow:hidden;}
.fx-budget-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .2s ease;}
.fx-budget-fill.fx-over-fill{background:var(--red);}
.fx-budget-bot{display:flex;justify-content:space-between;margin-top:5px;}
.fx-budget-bot small{font-size:0.68rem;color:var(--muted);}

/* Category + rider rows */
.fx-cat{margin-bottom:16px;}
.fx-cat-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.fx-cat-head strong{font-size:0.9rem;font-weight:800;color:var(--text);letter-spacing:.4px;}
.fx-cat-count{font-size:0.72rem;font-weight:800;color:var(--muted2);background:var(--card2);border:1px solid var(--border);
  border-radius:20px;padding:2px 9px;font-variant-numeric:tabular-nums;}
.fx-cat-count.fx-cat-full{color:#6ee7b7;border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.14);}
.fx-rider-list{display:flex;flex-direction:column;gap:8px;}
.fx-rider{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 12px;transition:border-color .15s;}
.fx-rider-sel{border-color:var(--gold);background:#12457f;}
.fx-rider-main{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fx-rider-id{display:flex;align-items:center;gap:8px;min-width:0;}
.fx-rider-num{font-size:0.72rem;font-weight:800;color:var(--blue-light);min-width:30px;}
.fx-rider-name{font-size:0.88rem;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fx-rider-right{display:flex;align-items:center;gap:8px;flex:none;}
.fx-rider-price{font-size:0.88rem;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;}
.fx-move{font-size:0.66rem;font-weight:800;padding:2px 7px;border-radius:20px;}
.fx-move-up{color:#6ee7b7;background:rgba(16,185,129,.16);}
.fx-move-down{color:#fca5a5;background:rgba(239,68,68,.16);}
.fx-pick-btn{min-width:78px;}
.fx-rider-form{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.fx-form-label{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.fx-form-chips{display:flex;gap:5px;}
.fx-form-chip{display:inline-flex;align-items:center;gap:4px;font-size:0.72rem;font-weight:800;color:var(--text);
  background:var(--card2);border:1px solid var(--border);border-radius:7px;padding:2px 7px;font-variant-numeric:tabular-nums;}
.fx-form-chip-r{font-size:0.58rem;font-weight:800;color:var(--muted);letter-spacing:.3px;}
.fx-form-chip-out{color:var(--muted);}
.fx-form-empty{font-size:0.72rem;color:var(--muted);font-style:italic;}
.fx-form-toggle{background:transparent;border:none;color:var(--blue-light);font-size:0.72rem;font-weight:700;cursor:pointer;
  font-family:var(--font);padding:2px 4px;margin-left:auto;text-decoration:underline;}
.fx-form-detail{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:4px;}
.fx-form-line{font-size:0.74rem;color:var(--muted2);line-height:1.4;}
.fx-form-line strong{color:var(--text);}

/* Save bar — clean CTAs like the Concursos buttons: solid bg (no shade), no
   shadow, modest rounding, just wider to fit. */
.fx-save-bar{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 2px calc(12px + env(safe-area-inset-bottom));background:var(--bg);}
.fx-save-bar .btn{flex:1 1 0;min-width:0;padding:12px 18px;font-size:0.9rem;font-weight:700;border-radius:10px;box-shadow:none !important;}
.fx-save-bar .btn:hover{box-shadow:none !important;transform:none;}
.fx-save-bar .fx-save-go{flex:2 1 0;}

/* Category label under each bike in the builder */
.fx-bike-cat{text-align:center;font-size:0.95rem;font-weight:800;color:var(--text);letter-spacing:1px;margin:-2px 0 8px;}

/* Fantasy hero (dynamic, main page only) */
/* Match the Inicio "Bienvenido" line exactly: dark navy, light/thin weight. */
.fantasy-hero .fx-hero-type-line{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:300;line-height:1.15;
  letter-spacing:normal;color:#041230;min-height:2.5em;margin-bottom:14px;}
.fx-type-cursor{color:#041230;font-weight:300;animation:fxBlink 1s step-end infinite;}
@keyframes fxBlink{50%{opacity:0;}}

/* Back to sport/league selection */
.fx-back{background:none;border:none;color:var(--blue-light);font-size:0.85rem;font-weight:700;cursor:pointer;
  font-family:var(--font);padding:2px 0;margin-bottom:12px;}

/* Team tile on the main page (one per sport) */
.fx-team-tile{width:100%;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;cursor:pointer;font-family:var(--font);text-align:left;margin-bottom:8px;}
.fx-team-tile-sport{font-size:0.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--blue-light);}
.fx-team-tile-name{font-size:1rem;font-weight:800;color:var(--text);}
.fx-team-tile-arrow{margin-left:auto;color:var(--muted2);font-size:1.1rem;}

/* Server-rejection banner (validate-team guard reverted a cheat) */
.fx-reject{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.45);color:#fca5a5;
  border-radius:12px;padding:11px 14px;font-size:0.82rem;font-weight:600;margin-bottom:14px;line-height:1.4;}

/* "Tu alineación" selected-rider chips with × remove */
.fx-selected{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:12px;}
.fx-selected-lbl{font-size:0.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:8px;}
.fx-chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px;}
.fx-chip-row:last-child{margin-bottom:0;}
.fx-chip-cat{font-size:0.66rem;font-weight:800;color:var(--blue-light);width:34px;flex:none;}
.fx-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:4px 4px 4px 10px;font-size:0.78rem;font-weight:600;color:var(--text);}
.fx-chip-price{font-size:0.68rem;color:var(--muted2);font-variant-numeric:tabular-nums;}
.fx-chip-x{border:none;background:rgba(239,68,68,.16);color:#fca5a5;width:20px;height:20px;border-radius:50%;
  font-size:0.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  -webkit-tap-highlight-color:transparent;}
.fx-chip-x:hover{background:rgba(239,68,68,.3);color:#fff;}

/* Livery picker */
.fx-livery-cat{background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;}
.fx-livery-cat-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.fx-livery-cat-head strong{font-size:0.9rem;font-weight:800;color:var(--text);letter-spacing:.4px;}
.fx-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:9px;}
.fx-swatch{width:100%;aspect-ratio:1;border-radius:10px;border:2px solid var(--border);cursor:pointer;
  transition:transform .12s,border-color .12s;box-shadow:inset 0 1px 3px rgba(0,0,0,.3);}
.fx-swatch:hover{transform:scale(1.06);}
.fx-swatch-on{border-color:#fff;box-shadow:0 0 0 2px var(--gold);}

/* ── Dirtbike graphic + idle exhaust smoke ── */
.fx-bike-wrap{display:flex;justify-content:center;padding:4px 0 2px;}
.fx-bike-preview{padding:4px 0 10px;}
.fx-bike{width:100%;max-width:280px;height:auto;display:block;overflow:visible;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));}
.fxb-tire{fill:#111417;}
.fxb-knob{fill:none;stroke:#08090b;stroke-width:6;stroke-dasharray:2.5 6.5;stroke-linecap:round;}
.fxb-rim{fill:#23272d;stroke:#3c424a;stroke-width:2;}
.fxb-spoke line{stroke:#5a616b;stroke-width:2;}
.fxb-hub{fill:#c3c8cf;}
.fxb-swing{stroke:#7d838b;stroke-width:8;fill:none;stroke-linecap:round;}
.fxb-frame{stroke:#8f959c;stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fxb-metal{stroke:#3f444b;stroke-width:1;}
.fxb-pipe{stroke:#c2c7cd;stroke-width:5;fill:none;stroke-linecap:round;}
.fxb-fork-lo{stroke:#cfd3d8;stroke-width:9;fill:none;stroke-linecap:round;}
.fxb-fork-up{stroke:#3f444b;stroke-width:6;fill:none;stroke-linecap:round;}
.fxb-bar{stroke:#2b2f34;stroke-width:5;fill:none;stroke-linecap:round;}
.fxb-plastic{stroke:rgba(0,0,0,.22);stroke-width:1.2;stroke-linejoin:round;}
.fxb-seat{fill:#191c20;stroke:rgba(0,0,0,.3);stroke-width:1;}
.fxb-sheen{fill:rgba(255,255,255,.16);}
.fx-bike-team{max-width:210px;}

/* Desktop: MX1 + MX2 side by side in the builder; widen the fantasy column so the
   long single list stops leaving the sides empty. */
.fx-cats-grid{display:block;}
@media(min-width:860px){
  #fantasy-body.fx-wide{max-width:1000px !important;}
  .fx-wide .fx-cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
  .fx-wide .fx-budget-bar-wrap{position:static;}
}
.fx-bike-smoke .fxb-smoke{fill:#e8eaed;opacity:0;transform-box:fill-box;transform-origin:center;
  animation-name:fxsmoke;animation-timing-function:ease-out;animation-iteration-count:infinite;}
@keyframes fxsmoke{
  0%{opacity:0;transform:translate(0,0) scale(.35);}
  14%{opacity:.5;}
  55%{opacity:.28;}
  100%{opacity:0;transform:translate(-30px,-34px) scale(1.8);}
}
@media(prefers-reduced-motion:reduce){ .fx-bike-smoke{display:none;} }

/* ── Fantasy leaderboard + leagues ── */
.fx-board-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 6px 20px rgba(0,0,0,.22);}
.fx-board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.fx-board-head h3{font-size:1.05rem;font-weight:800;color:var(--text);margin:0;}
.fx-board-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.fx-board-tab{flex:none;background:var(--card2);border:1px solid var(--border);color:var(--muted2);
  border-radius:20px;padding:5px 13px;font-size:0.76rem;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap;}
.fx-board-tab-on{background:rgba(59,130,246,.16);border-color:var(--blue);color:var(--blue-light);}
.fx-board-load{opacity:.5;font-size:0.8rem;padding:10px 0;}
.fx-board-myrank{display:flex;align-items:center;gap:8px;border-top:1px dashed var(--border);margin-top:6px;padding-top:8px;font-size:0.8rem;}
.fx-board-myrank-n{width:22px;text-align:right;font-weight:800;color:#93c5fd;}
.fx-board-myrank-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1f5f9;}
.fx-board-myrank-s{font-weight:800;color:#f1f5f9;}
.fx-board-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);}
.fx-board-link{background:none;border:none;color:var(--blue-light);font-size:0.82rem;font-weight:600;cursor:pointer;font-family:var(--font);padding:0;}

/* ── Home news / results cards (phase-1 placeholder; styled like the banners) ── */
.home-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:760px){
  .home-news-grid{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  .news-card{scroll-snap-align:start;}
}
.news-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.news-tag{font-size:0.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--blue-light);margin-bottom:6px;}
.news-title{font-size:0.9rem;font-weight:800;color:var(--text);line-height:1.25;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-text{font-size:0.78rem;color:var(--muted2);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-img{margin-top:10px;width:100%;aspect-ratio:16/9;border-radius:8px;object-fit:cover;display:block;}
.news-img-ph{margin-top:10px;width:100%;aspect-ratio:16/9;border-radius:8px;
  background:linear-gradient(135deg,#0c3366,#1a4e8c);display:flex;align-items:center;justify-content:center;}