:root{
  --bg:#0e1117; --panel:#171c26; --panel2:#1f2735; --line:#2a3346;
  --text:#e7ecf3; --muted:#93a0b4; --primary:#16a34a; --primary-2:#22c55e;
  --accent:#3b82f6; --warn:#f59e0b; --danger:#ef4444; --gold:#fbbf24;
  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text); min-height:100vh; position:relative;
  /* Césped con franjas de pasto cortado + profundidad en los bordes */
  background:
    radial-gradient(140% 110% at 50% 40%, transparent 50%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(90deg, #1c8043 0 8%, #178038 8% 16%);
  background-attachment: fixed;
}
/* Líneas del campo de fútbol */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("../img/pitch.svg") center center / cover no-repeat;
}
/* Luz de estadio (brillo superior suave) */
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(700px 380px at 12% 8%, rgba(120,220,160,.18), transparent 70%),
    radial-gradient(700px 380px at 88% 8%, rgba(120,220,160,.18), transparent 70%);
}
.hidden{display:none !important}

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.8rem 1.2rem;
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,#22c55e,#38bdf8,#fbbf24,#ef4444) 1;
  background:rgba(13,18,28,.72); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:.6rem}
.brand h1{font-size:1.15rem; margin:0; line-height:1}
.brand small{color:var(--muted)}
.ball{font-size:1.8rem}
.nav{display:flex; gap:.3rem; margin-left:auto}
.nav button{
  background:transparent; color:var(--muted); border:none; padding:.5rem .9rem;
  border-radius:10px; cursor:pointer; font-size:.95rem; font-weight:600;
}
.nav button:hover{background:var(--panel2); color:var(--text)}
.nav button.active{background:var(--primary); color:#fff}
.user-box{display:flex; align-items:center; gap:.6rem; color:var(--muted)}
.user-box #userName{font-weight:600; color:var(--text)}

/* Avatares (foto de perfil) */
.avatar{width:36px; height:36px; border-radius:50%; object-fit:cover; display:inline-block; flex:none}
.avatar-fallback{
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),#6366f1); color:#fff; font-weight:800;
}
.avatar-sm{width:28px; height:28px; font-size:.82rem}
.avatar-btn{
  padding:0; border:none; background:none; cursor:pointer; border-radius:50%;
  line-height:0; box-shadow:0 0 0 2px rgba(255,255,255,.18); transition:box-shadow .2s;
}
.avatar-btn:hover{box-shadow:0 0 0 2px var(--primary-2)}
.player{display:inline-flex; align-items:center; gap:.55rem}

/* Buttons */
button{font-family:inherit}
.primary{
  background:var(--primary); color:#fff; border:none; padding:.7rem 1rem;
  border-radius:10px; font-weight:700; cursor:pointer; font-size:1rem;
}
.primary:hover{background:var(--primary-2)}
.ghost{background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:.4rem .8rem; border-radius:8px; cursor:pointer}
.ghost:hover{color:var(--text); border-color:var(--muted)}

/* Layout */
main{max-width:920px; margin:0 auto; padding:1.2rem}
.view h2{margin:.2rem 0 1rem}
.muted{color:var(--muted)}

/* Auth */
.auth{display:flex; flex-direction:column; align-items:center; padding-top:2.4rem}
.trophy-hero{margin-bottom:-32px; z-index:2; position:relative}
.trophy-img{
  width:144px; height:144px; object-fit:contain; display:block; background:#fff;
  border-radius:28px; padding:10px;
  border:3px solid rgba(255,255,255,.9); box-shadow:0 18px 45px rgba(0,0,0,.5);
  animation:trophyIn .7s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes trophyIn{from{opacity:0; transform:translateY(-16px) scale(.88)} to{opacity:1; transform:none}}
.card{
  background:rgba(23,28,38,.78); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  padding:1.4rem; width:100%; max-width:400px; box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.auth-card{text-align:center; padding:3rem 1.8rem 2.2rem}
.auth-ball{font-size:3.4rem; line-height:1; filter:drop-shadow(0 6px 18px rgba(34,197,94,.35))}
.auth-title{margin:.8rem 0 .4rem; font-size:1.5rem}
.auth-sub{color:var(--muted); font-size:.95rem; margin:0 0 1.6rem; line-height:1.45}
.ms-btn{
  display:flex; align-items:center; justify-content:center; gap:.7rem; width:100%;
  background:#fff; color:#1b1b1b; border:none; padding:.8rem 1rem; border-radius:11px;
  font-size:1rem; font-weight:700; cursor:pointer; transition:transform .08s, box-shadow .2s;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.ms-btn:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.45)}
.ms-btn:active{transform:translateY(0)}
.auth-note{color:var(--muted); font-size:.8rem; margin:1rem 0 0}
.msg{min-height:1.2em; margin:.8rem 0 0; font-size:.9rem; text-align:center}
.msg.error{color:var(--danger)}
.msg.ok{color:var(--primary-2)}

/* Rules banner */
.rules{
  background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--primary);
  padding:.7rem 1rem; border-radius:10px; margin-bottom:1.2rem; font-size:.9rem; color:var(--muted);
}
.rules b{color:var(--text)}

/* Group blocks */
.group{margin-bottom:1.8rem}
.group-title{
  display:inline-block; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:800;
  background:linear-gradient(135deg,var(--accent),#6366f1); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;
  margin:.2rem 0 .7rem; padding-left:.2rem;
}
.match{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem;
  background:linear-gradient(180deg, rgba(23,28,38,.80), rgba(18,23,33,.80));
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.07); border-radius:14px;
  padding:.85rem 1rem; margin-bottom:.6rem; transition:border-color .2s, transform .08s;
}
.match:hover{border-color:rgba(56,189,248,.45); transform:translateY(-1px)}
.match .team{display:flex; align-items:center; gap:.5rem; min-width:0}
.match .team.home{justify-content:flex-end; text-align:right}
.match .team.away{justify-content:flex-start; text-align:left}
.match .flag{font-size:1.6rem; line-height:1; flex:none; display:inline-flex; align-items:center}
.crest{
  width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 0 0 1px var(--line), 0 2px 6px rgba(0,0,0,.35); background:var(--panel2);
}

/* Resumen de puntos */
.summary{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  background:linear-gradient(135deg,#16321f,#13261a);
  border:1px solid #1f5132; border-radius:14px; padding:1rem 1.2rem; margin-bottom:1.4rem;
}
.sum-main{display:flex; align-items:baseline; gap:.4rem}
.sum-num{font-size:2.2rem; font-weight:900; color:var(--primary-2); line-height:1}
.sum-lbl{color:var(--muted); font-weight:700; text-transform:uppercase; font-size:.75rem; letter-spacing:.06em}
.sum-stats{display:flex; gap:1.1rem; flex-wrap:wrap; color:var(--muted); font-size:.9rem}
.sum-stats b{color:var(--text)}
.match .name{font-weight:700; line-height:1.15; overflow-wrap:anywhere}
.match .scores{display:flex; align-items:center; gap:.35rem}
.score-input{
  width:46px; text-align:center; font-size:1.1rem; font-weight:700;
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  padding:.45rem 0; border-radius:9px;
}
.score-input:focus{outline:none; border-color:var(--primary)}
.score-input:disabled{opacity:.6; cursor:not-allowed}
.vs{color:var(--muted); font-weight:700}
.match .meta{
  grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center;
  font-size:.75rem; color:var(--muted); margin-top:.1rem;
}
.badge{font-size:.7rem; padding:.12rem .5rem; border-radius:99px; font-weight:700}
.badge.locked{background:#3a2a16; color:var(--warn)}
.badge.result{background:#16321f; color:var(--primary-2)}
.badge.pts{background:#1c2a44; color:#93b4ff}
.save-row{display:flex; align-items:center; gap:.8rem; margin:.4rem 0 1.4rem}
.save-row .primary{padding:.55rem 1.4rem}

/* Ranking */
.rank-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px}
table.rank{width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; overflow:hidden}
table.rank th, table.rank td{padding:.7rem .8rem; text-align:left; border-bottom:1px solid var(--line)}
table.rank th{font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
table.rank td.num, table.rank th.num{text-align:center; width:56px}
table.rank tr:last-child td{border-bottom:none}
table.rank tr.me{background:#13261a}
.pos{font-weight:800; color:var(--muted)}
.pos.p1{color:var(--gold)} .pos.p2{color:#cbd5e1} .pos.p3{color:#d4a373}
.pts-big{font-weight:800; color:var(--primary-2); font-size:1.05rem}
.rank-legend{font-size:.78rem; margin:.7rem .2rem 0}

/* Toast */
.toast{
  position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%);
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  padding:.7rem 1.2rem; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.5);
  z-index:50; font-weight:600;
}
.toast.ok{border-color:var(--primary)} .toast.error{border-color:var(--danger)}

.loading{color:var(--muted); padding:2rem; text-align:center}
.all-done{color:var(--primary-2)}

/* Modal (ver pronósticos de un usuario) */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(3px);
  z-index:60; display:flex; align-items:center; justify-content:center; padding:1rem;
}
.modal-box{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  width:100%; max-width:580px; max-height:86vh; display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem; border-bottom:1px solid var(--line);
}
.modal-head h3{margin:0; font-size:1.05rem}
.modal-body{padding:.6rem 1.2rem 1rem; overflow-y:auto}
.pred-row{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.9rem;
}
.pred-row:last-child{border-bottom:none}
.pred-teams{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.pred-teams .crest{width:20px; height:20px}
.pred-teams b{color:var(--primary-2)}

/* ===== TABLET / iPad / ESCRITORIO: partidos en 2 columnas ===== */
@media (min-width:760px){
  main{max-width:980px}
  .group{
    display:grid; grid-template-columns:1fr 1fr; gap:.7rem; align-items:start;
  }
  .group-title{grid-column:1 / -1; margin-bottom:.2rem}
  .match{margin-bottom:0}
}

/* Ajustes finos para iPad (toque cómodo) */
@media (min-width:760px) and (max-width:1100px){
  main{padding:1.4rem 1.6rem}
  .match{padding:.9rem 1rem}
  .match .name{font-size:1rem}
  .score-input{width:50px; height:46px; font-size:1.15rem}
  .crest{width:32px; height:32px}
  .trophy-img{width:160px; height:160px}
  .nav button{font-size:1rem; padding:.55rem 1rem}
}

/* ===================== MÓVIL ===================== */
@media (max-width:600px){
  main{padding:.8rem}
  .topbar{gap:.45rem .7rem; padding:.55rem .7rem}
  .brand h1{font-size:1rem}
  .brand small{font-size:.72rem}
  .ball{font-size:1.5rem}

  /* Nav: barra propia, repartida y deslizable */
  .nav{
    width:100%; order:3; margin:0; justify-content:center;
    overflow-x:auto; -webkit-overflow-scrolling:touch; gap:.25rem;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav button{padding:.5rem .8rem; font-size:.9rem; white-space:nowrap}
  .user-box{margin-left:auto; font-size:.85rem; gap:.45rem}
  .user-box #userName{max-width:32vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .avatar, .avatar-btn{width:32px; height:32px}

  /* Login / trofeo */
  .auth{padding-top:1.6rem}
  .trophy-img{width:116px; height:116px; border-radius:22px; padding:8px}
  .trophy-hero{margin-bottom:-26px}
  .auth-card{padding:2.4rem 1.3rem 1.8rem}
  .auth-title{font-size:1.3rem}

  /* Partidos: compactos y legibles */
  .match{padding:.7rem .6rem; gap:.4rem; border-radius:12px}
  .match .team{gap:.4rem}
  .match .name{font-size:.86rem}
  .crest{width:28px; height:28px}
  .match .flag{font-size:1.3rem}
  .score-input{width:42px; height:44px; font-size:1.05rem; padding:0}
  .match .meta{font-size:.7rem; gap:.3rem; flex-wrap:wrap}

  /* Resumen de puntos */
  .summary{gap:.5rem .9rem; padding:.85rem 1rem}
  .sum-num{font-size:1.9rem}
  .sum-stats{gap:.5rem .85rem; font-size:.82rem; width:100%}

  /* Ranking: deja Pos/Jugador/Pts/Aciertos */
  .col-opt{display:none}
  table.rank th, table.rank td{padding:.6rem .5rem}
  table.rank td.num, table.rank th.num{width:auto}
  .avatar-sm{width:26px; height:26px}

  .rules{font-size:.82rem; padding:.6rem .8rem}
  .view h2{font-size:1.25rem}
  .save-row{position:sticky; bottom:.6rem; z-index:5}
  .save-row .primary{width:100%; padding:.85rem}
  .save-row #saveHint{display:none}
}

@media (max-width:360px){
  .match .name{font-size:.8rem}
  .score-input{width:38px}
  .user-box #userName{display:none}
}