/* ===================== TIE-BREAK · estilos ===================== */
/* Paleta Wimbledon: césped + púrpura + crema. Mobile-first. */

/* Salón de la Fama */
.hof-head{ text-align:center; margin-bottom:1rem; }
.hof-head h2{ font-family:"Bebas Neue",sans-serif; letter-spacing:.06em; font-size:1.6rem; color:#f4efe3; margin-bottom:.1rem; }
.hof-card{ background:rgba(217,178,74,.1); border:1px solid #d9b24a; border-radius:16px; padding:1rem 1.1rem; margin-bottom:.9rem; box-shadow:0 0 16px rgba(217,178,74,.12); }
.hof-title{ font-family:"Bebas Neue",sans-serif; letter-spacing:.05em; font-size:1.3rem; color:#d9b24a; margin-bottom:.5rem; text-align:center; }
.hof-row{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.4rem 0; border-top:1px solid rgba(244,239,227,.12); font-size:.95rem; }
.hof-row:first-of-type{ border-top:0; }
.hof-draw{ color:#b9c7bf; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; flex:0 0 auto; }
.hof-pts{ color:#b9c7bf; font-size:.8rem; }
.hof-tb{ font-size:.72rem; color:#9ff0c4; }
.hof-none{ color:#b9c7bf; font-style:italic; }
.champ-tag{ text-align:center; font-family:"Bebas Neue",sans-serif; letter-spacing:.08em; color:#d9b24a; font-size:1.1rem; margin:-.2rem 0 .8rem; }

:root{
  --green:#1a3a2e;        /* verde césped oscuro (fondo) */
  --green-2:#24513f;      /* verde medio */
  --green-3:#2f6b52;      /* verde claro acento */
  --purple:#4b2e63;       /* púrpura Wimbledon */
  --purple-2:#6a3f8a;
  --cream:#f4efe3;        /* crema / blanco hueso */
  --gold:#d9b24a;         /* dorado trofeo */
  --line:rgba(244,239,227,.14);
  --chalk:rgba(255,255,255,.55);     /* línea de cal de la cancha */
  --card:rgba(255,255,255,.05);
  --card-2:rgba(255,255,255,.08);
  --txt:#f4efe3;
  --muted:#b9c7bf;
  --danger:#e06a6a;
  --radius:16px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Outfit",system-ui,sans-serif;
  /* césped: franjas de corte (mowed stripes) tenues sobre verde cancha */
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 46px, rgba(0,0,0,.032) 46px 92px),
    radial-gradient(1200px 600px at 50% -12%, var(--green-2), transparent 60%),
    linear-gradient(180deg, var(--green) 0%, #112720 100%);
  background-attachment:fixed;
  color:var(--txt);
  min-height:100vh;
  line-height:1.45;
}
h1,h2,h3{ margin:0 0 .4em; }
.muted{ color:var(--muted); font-weight:400; }
.fineprint{ color:var(--muted); font-size:.8rem; }
.error{ color:var(--danger); font-size:.9rem; margin:.4rem 0 0; }
.screen{ max-width:760px; margin:0 auto; }
[hidden]{ display:none !important; }

/* ---------- inputs / botones ---------- */
.inp{
  width:100%; padding:.85rem 1rem; border-radius:12px; border:1px solid var(--line);
  background:rgba(0,0,0,.22); color:var(--txt); font-size:1rem; font-family:inherit;
}
.inp::placeholder{ color:#8ea399; }
.inp:focus{ outline:2px solid var(--gold); outline-offset:0; }
.btn-primary{
  width:100%; padding:.9rem 1rem; border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg, var(--purple-2), var(--purple));
  color:#fff; font-size:1.05rem; font-weight:700; font-family:inherit;
  box-shadow:var(--shadow); transition:transform .08s, filter .15s;
}
.btn-primary:active{ transform:translateY(1px) scale(.99); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.btn-ghost{
  width:100%; padding:.8rem 1rem; border:1px solid var(--line); border-radius:12px; cursor:pointer;
  background:transparent; color:var(--txt); font-size:.95rem; font-weight:600; font-family:inherit; margin-top:.5rem;
}
.btn-ghost:hover{ background:var(--card-2); }
.btn-mini{
  padding:.4rem .7rem; border:1px solid var(--line); border-radius:9px; cursor:pointer;
  background:transparent; color:var(--txt); font-size:.8rem; font-family:inherit;
}
.btn-mini:hover{ background:var(--card-2); }

/* ---------- landing ---------- */
.landing{ padding:0 1.1rem 3rem; }
.lhero{ text-align:center; padding:2.6rem 0 1.2rem; }
.logo-mark{ font-size:3.4rem; line-height:1; }
.logo-mark img{ display:inline-block; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.brand{
  font-family:"Bebas Neue",sans-serif; font-size:3.6rem; letter-spacing:.06em;
  margin:.2rem 0 0; color:var(--cream);
  text-shadow:0 2px 0 var(--purple);
}
.tagline{ color:var(--gold); font-weight:700; letter-spacing:.04em; margin:.1rem 0 .35rem; text-transform:uppercase; font-size:.95rem; }
.next-champ{ display:inline-block; margin:0 auto .8rem; padding:.25rem .8rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--cream); font-size:.82rem; font-weight:600; letter-spacing:.02em; }
.sub{ color:var(--muted); max-width:30rem; margin:0 auto 1.4rem; }
.my-groups{ max-width:22rem; margin:0 auto 1.4rem; text-align:left; }
.mg-title{ font-family:"Bebas Neue",sans-serif; letter-spacing:.05em; font-size:1.3rem; color:var(--gold); text-align:center; margin-bottom:.6rem; }
.mg-row{ display:flex; gap:.4rem; margin-bottom:.5rem; }
.mg-enter{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; padding:.7rem .9rem; border:1px solid var(--chalk); border-radius:12px; background:var(--card); color:var(--cream); cursor:pointer; font-family:inherit; text-align:left; }
.mg-enter:hover{ background:var(--card-2); }
.mg-name{ font-weight:700; font-size:1rem; }
.mg-sub{ font-size:.74rem; color:var(--muted); }
.mg-del{ flex:0 0 auto; width:2.6rem; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--muted); font-size:1.2rem; cursor:pointer; }
.mg-del:hover{ color:var(--danger); border-color:var(--danger); }
.mg-or{ text-align:center; color:var(--muted); font-size:.82rem; margin:.9rem 0 .2rem; }
.auth-tabs{ display:flex; gap:.4rem; max-width:22rem; margin:0 auto .8rem; }
.atab{ flex:1; padding:.6rem; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--muted); font-weight:700; font-family:inherit; cursor:pointer; font-size:.88rem; }
.atab.active{ background:var(--purple); color:#fff; border-color:var(--purple); }
.login-form{ max-width:22rem; margin:0 auto; display:flex; flex-direction:column; gap:.7rem; }
.group-card{ text-align:center; }
.group-card h3{ margin-bottom:.1rem; }
.group-code{ font-family:"Bebas Neue",sans-serif; letter-spacing:.28em; font-size:2.5rem; color:var(--gold); margin:.4rem 0 .1rem; text-transform:uppercase; }
.group-members{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin:.7rem 0; }
.gm{ background:var(--card-2); border-radius:999px; padding:.25rem .7rem; font-size:.8rem; }
.gm.owner{ border:1px solid var(--gold); color:var(--cream); }
.install-btn{ max-width:22rem; margin:1rem auto 0; }
.scroll-hint{ color:var(--muted); margin-top:2rem; font-size:.85rem; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

.lwrap{ max-width:38rem; margin:1.5rem auto 0; }
.lsec{ margin:2rem 0; }
.lsec h2{ font-size:1.3rem; border-bottom:2px solid var(--gold); display:inline-block; padding-bottom:.2rem; }
.steps{ display:flex; flex-direction:column; gap:.8rem; margin-top:1rem; }
.step{ display:flex; gap:.9rem; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; }
.step .num{ flex:0 0 2rem; height:2rem; border-radius:50%; background:var(--purple); display:grid; place-items:center; font-weight:800; }
.step h3{ margin:0 0 .15rem; font-size:1rem; }
.step p{ margin:0; color:var(--muted); font-size:.9rem; }
.pts{ display:flex; gap:.7rem; margin-top:1rem; }
.pt{ flex:1; background:var(--card); border:1px solid var(--line); border-radius:14px; text-align:center; padding:1rem .4rem; }
.pt b{ display:block; font-family:"Bebas Neue",sans-serif; font-size:2.2rem; color:var(--cream); line-height:1; }
.pt.gold{ border-color:var(--gold); background:rgba(217,178,74,.12); }
.pt.gold b{ color:var(--gold); }
.pt span{ font-size:.78rem; color:var(--muted); }

/* ---------- app shell ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1rem; background:rgba(18,42,33,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.tb-brand{ font-family:"Bebas Neue",sans-serif; font-size:1.5rem; letter-spacing:.05em; display:flex; align-items:center; gap:.45rem; }
.tb-logo{ display:block; }
.tb-right{ display:flex; align-items:center; gap:.6rem; }
.tb-user{ font-weight:700; font-size:.9rem; color:var(--gold); }

.lock-banner{
  margin:.7rem 1rem 0; padding:.6rem .9rem; border-radius:12px; font-size:.88rem; text-align:center;
  background:rgba(217,178,74,.14); border:1px solid var(--gold); color:var(--cream);
}
.lock-banner.closed{ background:rgba(224,106,106,.14); border-color:var(--danger); }

.tabs{
  position:sticky; top:53px; z-index:15;
  display:flex; gap:.2rem; padding:.5rem 1rem; overflow-x:auto;
  background:rgba(18,42,33,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.tab{
  flex:0 0 auto; padding:.5rem .9rem; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--muted); font-weight:700; font-family:inherit; font-size:.9rem; white-space:nowrap;
}
.tab.active{ background:var(--purple); color:#fff; }

.panel{ padding:1rem; }
.draw-switch{ display:flex; gap:.4rem; margin-bottom:1rem; }
.draw-switch button{
  flex:1; padding:.6rem; border:1px solid var(--line); border-radius:11px; cursor:pointer;
  background:var(--card); color:var(--muted); font-weight:700; font-family:inherit; font-size:.92rem;
}
.draw-switch button.active{ background:var(--green-3); color:#fff; border-color:var(--green-3); }

/* ---------- cards ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; margin-bottom:1rem; }
.card h3{ font-size:1.1rem; }

/* ---------- bracket ---------- */
.bracket{ display:flex; flex-direction:column; gap:1.4rem; }
.round{ }
.round-title{
  font-family:"Bebas Neue",sans-serif; letter-spacing:.08em; font-size:1.1rem; color:var(--gold);
  margin:0 0 .6rem; display:flex; align-items:center; gap:.5rem;
}
.round-title .pts-tag{ font-size:.7rem; font-family:"Outfit"; color:var(--muted); background:var(--card-2); padding:.1rem .5rem; border-radius:999px; }
.match{
  background:var(--card); border:1.5px solid rgba(255,255,255,.28); border-radius:14px; overflow:hidden; margin-bottom:.6rem;
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.18);
}
.match.empty{ opacity:.55; }
.slot{
  display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; cursor:pointer;
  /* línea de cal entre jugadores */
  border-bottom:1.5px solid rgba(255,255,255,.28); transition:background .12s;
}
.slot:last-child{ border-bottom:0; }
.slot:hover{ background:var(--card-2); }
.slot.picked{ background:rgba(47,107,82,.32); }
.slot.tbd{ cursor:default; color:var(--muted); }
.slot.tbd:hover{ background:transparent; }
.slot .seed{ flex:0 0 auto; width:1.4rem; text-align:center; font-size:.75rem; color:var(--muted); }
.slot .pname{ flex:1; font-weight:600; }
.slot .check{ flex:0 0 auto; opacity:0; color:var(--green-3); font-weight:800; }
.slot.picked .check{ opacity:1; color:#9ff0c4; }
/* resultados reales: marca acierto/fallo cuando hay resultado */
.slot.correct{ box-shadow:inset 3px 0 0 #7ee0a6; }
.slot.wrong{ box-shadow:inset 3px 0 0 var(--danger); }
.slot .result-badge{ font-size:.68rem; padding:.05rem .4rem; border-radius:999px; margin-left:.3rem; }
.badge-ok{ background:rgba(126,224,166,.2); color:#9ff0c4; }
.badge-no{ background:rgba(224,106,106,.2); color:#f0a6a6; }

.champ-box{
  margin-top:.4rem; text-align:center; padding:1rem; border-radius:14px;
  border:1px solid var(--gold); background:rgba(217,178,74,.1);
}
.champ-box .lbl{ font-family:"Bebas Neue",sans-serif; letter-spacing:.1em; color:var(--gold); font-size:1rem; }
.champ-box .name{ font-size:1.4rem; font-weight:800; margin-top:.2rem; }
.champ-box .name.empty{ color:var(--muted); font-weight:500; font-size:1rem; }
.champ-box.full{ box-shadow:0 0 18px 2px rgba(217,178,74,.3); border-color:var(--gold); }

.share-bar{ margin-top:.8rem; }
.btn-share{ width:100%; padding:.75rem 1rem; border:1px solid var(--gold); border-radius:12px; cursor:pointer; background:rgba(217,178,74,.1); color:var(--cream); font-size:.95rem; font-weight:700; font-family:inherit; }
.btn-share:hover{ background:rgba(217,178,74,.2); }

.bracket-empty{ text-align:center; color:var(--muted); padding:3rem 1rem; }
.bracket-empty .big{ font-size:2.4rem; }

.save-bar{
  position:sticky; bottom:0; padding:.8rem 0 .2rem; background:linear-gradient(180deg, transparent, #122a21 40%);
}
.save-status{ text-align:center; font-size:.82rem; color:var(--muted); margin-top:.4rem; }

/* ---------- standings ---------- */
.standings{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.srow{ display:flex; align-items:center; gap:.8rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); }
.srow:last-child{ border-bottom:0; }
.srow.me{ background:rgba(75,46,99,.3); }
.srow .pos{ flex:0 0 1.8rem; font-family:"Bebas Neue",sans-serif; font-size:1.3rem; color:var(--muted); text-align:center; }
.srow.top1 .pos{ color:var(--gold); }
.srow .sname{ flex:1; font-weight:600; }
.srow .spts{ font-family:"Bebas Neue",sans-serif; font-size:1.4rem; color:var(--cream); }
.srow .spts small{ font-family:"Outfit"; font-size:.65rem; color:var(--muted); }
.standings-empty{ text-align:center; color:var(--muted); padding:2.5rem 1rem; }
.winner-banner{ border-radius:14px; padding:.85rem 1rem; margin-bottom:1rem; text-align:center; font-size:.95rem; border:1px solid var(--line); background:var(--card); }
.winner-banner b{ color:var(--cream); }
.winner-banner.lead{ background:rgba(75,46,99,.28); border-color:var(--purple-2); }
.winner-banner.champ{ background:rgba(217,178,74,.16); border-color:var(--gold); box-shadow:0 0 0 1px rgba(217,178,74,.25) inset; }
.winner-banner.champ b{ color:var(--gold); }
.winner-banner.pending{ color:var(--muted); }
.tiebreak-card{ background:rgba(75,46,99,.18); border:1px solid var(--purple-2); border-radius:14px; padding:1rem; margin-bottom:1rem; }
.tb-title{ font-family:"Bebas Neue",sans-serif; letter-spacing:.06em; font-size:1.15rem; color:var(--cream); margin-bottom:.3rem; }
.tb-parts{ display:flex; flex-direction:column; gap:.35rem; margin:.7rem 0; }
.tb-part{ display:flex; justify-content:space-between; align-items:center; padding:.45rem .7rem; background:var(--card-2); border-radius:9px; font-size:.9rem; }
.tb-ok{ color:#9ff0c4; font-weight:700; font-size:.82rem; }
.tb-wait{ color:var(--muted); font-size:.82rem; }

/* ---------- chat / tribuna ---------- */
.chat-host{ display:flex; flex-direction:column; gap:.5rem; min-height:40vh; max-height:58vh; overflow-y:auto; padding:.2rem; }
.msg{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.55rem .8rem; }
.msg.mine{ background:rgba(75,46,99,.28); border-color:var(--purple-2); }
.msg .who{ font-weight:700; font-size:.82rem; color:var(--gold); }
.msg .when{ font-size:.7rem; color:var(--muted); margin-left:.4rem; }
.msg .text{ font-size:.95rem; margin-top:.15rem; word-wrap:break-word; }
.chat-empty{ text-align:center; color:var(--muted); padding:2rem; }
.chat-form{ display:flex; gap:.5rem; margin-top:.7rem; }
.chat-form .inp{ flex:1; }
.chat-form .btn-primary{ width:auto; padding:.85rem 1.1rem; }

/* ---------- preferencias de avisos ---------- */
.prefs{ margin-top:1rem; display:flex; flex-direction:column; gap:.5rem; }
.pref{ display:flex; justify-content:space-between; align-items:center; padding:.55rem .8rem; background:var(--card-2); border-radius:10px; font-size:.92rem; }
.pref input{ width:1.2rem; height:1.2rem; accent-color:var(--purple-2); }

/* ---------- admin ---------- */
.admin-sec{ margin-bottom:1.4rem; }
.admin-sec h4{ font-family:"Bebas Neue",sans-serif; letter-spacing:.06em; font-size:1.1rem; color:var(--gold); margin:.2rem 0 .6rem; }
.qf-grid{ display:flex; flex-direction:column; gap:.5rem; }
.qf-row{ display:flex; align-items:center; gap:.4rem; }
.qf-row .qf-lbl{ flex:0 0 2.2rem; font-size:.78rem; color:var(--muted); }
.qf-row .inp{ flex:1; padding:.6rem .7rem; font-size:.9rem; }
.qf-row .vs{ flex:0 0 auto; color:var(--muted); font-size:.8rem; }
.res-grid{ display:flex; flex-direction:column; gap:.4rem; }
.res-row{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; }
.res-row .res-lbl{ flex:0 0 5.5rem; color:var(--muted); }
.res-row select{ flex:1; padding:.55rem; border-radius:9px; background:rgba(0,0,0,.25); color:var(--txt); border:1px solid var(--line); font-family:inherit; }
.row2{ display:flex; gap:.5rem; }
.row2 > *{ flex:1; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:3.6rem; transform:translateX(-50%);
  background:var(--purple); color:#fff; padding:.7rem 1.2rem; border-radius:999px;
  font-weight:600; box-shadow:var(--shadow); z-index:50; max-width:90vw; text-align:center;
  animation:rise .25s ease;
}
.toast.err{ background:var(--danger); }
@keyframes rise{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }

/* ---------- banda de tips (marquesina) ---------- */
.tips-ticker{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; align-items:center; height:40px;
  background:linear-gradient(180deg, rgba(18,42,33,.92), rgba(18,42,33,.98));
  border-top:1px solid var(--chalk); backdrop-filter:blur(8px);
}
.tips-viewport{ flex:1; min-width:0; overflow:hidden; height:100%; display:flex; align-items:center; }
.tips-track{ display:inline-flex; align-items:center; white-space:nowrap; will-change:transform; animation:marquee 70s linear infinite; }
.tips-viewport:hover .tips-track, .tips-viewport:active .tips-track{ animation-play-state:paused; }
.tips-item{ font-size:.86rem; font-weight:600; color:var(--cream); padding:0 2px; }
.tips-dot{ color:var(--gold); font-size:.7rem; margin:0 18px; opacity:.85; }
.tips-close{ flex:0 0 auto; width:38px; height:100%; border:0; background:transparent; color:var(--muted);
  font-size:1.3rem; line-height:1; cursor:pointer; }
.tips-close:hover{ color:var(--cream); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* deja aire para que la banda fija no tape el contenido */
.panel{ padding-bottom:56px; }

@media(min-width:560px){
  .brand{ font-size:4.4rem; }
}