* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #0f1722; color: #e8eef5;
  -webkit-text-size-adjust: 100%; }

/* nav */
nav { display: flex; gap: .5rem .75rem; align-items: center; padding: .55rem .7rem;
      background: #16202e; position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
nav a { color: #cfe0f5; text-decoration: none; font-size: .9rem; }
nav a.active { color: #7fb2ff; font-weight: 700; }
nav .spacer { flex: 1; }
nav .me { opacity: .7; font-size: .8rem; }

main { max-width: 680px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.3rem; margin: .2rem 0 1rem; }
h2.fase { font-size: .95rem; color: #7fb2ff; margin: 1.4rem 0 .5rem;
  text-transform: uppercase; letter-spacing: .04em; }

.card { background: #16202e; border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
.login { max-width: 340px; margin: 3rem auto; }
.login label { display: block; margin: .6rem 0; }
.login input, .login select { width: 100%; margin-top: .25rem; }

input, select, button { font-size: 1rem; padding: .55rem; border-radius: 8px;
  border: 1px solid #2c3a4d; background: #0f1722; color: #e8eef5; }
button { background: #2563eb; border: 0; cursor: pointer; font-weight: 600; }
.error { color: #ff8080; }

/* bonus */
.bonus h2 { font-size: 1rem; margin: 0 0 .5rem; }
.bonus label { display: block; margin: .6rem 0; font-size: .9rem; }
.bonus input { width: 100%; margin-top: .25rem; }
.bonus button { margin-top: .3rem; }
#bonus-status { margin-left: .5rem; color: #22c55e; }

/* match row (predicciones + partidos) */
.match { padding: .6rem .3rem; border-bottom: 1px solid #1f2b3b; }
.match.locked { opacity: .85; }
.match-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .72rem; opacity: .6; margin-bottom: .45rem; }
.match-meta .pts { margin-left: auto; color: #22c55e; font-weight: 700; opacity: 1; }
.match-meta .lockicon { opacity: 1; }
.match-row { display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .5rem; }
.team { font-size: .92rem; line-height: 1.18; }
.team.local { text-align: right; }
.team.visitor { text-align: left; }
.team .flag { font-size: 1.1rem; }
.score { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.score .g { width: 2.7rem; text-align: center; padding: .5rem .2rem; }
.g.saved { border-color: #22c55e; }
.score-real { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.dash { opacity: .5; }

/* ranking */
table.rank { width: 100%; border-collapse: collapse; }
table.rank th, table.rank td { padding: .5rem; text-align: left; border-bottom: 1px solid #1f2b3b; }
table.rank th { font-size: .8rem; opacity: .7; font-weight: 600; }
table.rank tr.me { background: #1d2b44; }
table.rank td:first-child, table.rank th:first-child { width: 2rem; text-align: center; }

/* reglas / puntos */
.rules h2 { font-size: 1rem; color: #7fb2ff; margin: 1.2rem 0 .5rem; }
.rules h2:first-child { margin-top: 0; }
.rules table { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.rules td { padding: .55rem .4rem; border-bottom: 1px solid #1f2b3b; vertical-align: top; }
.rules td.pts { text-align: right; font-weight: 700; white-space: nowrap; color: #7fb2ff; }
.rules .hint { font-size: .8rem; opacity: .6; margin-top: .15rem; }
.rules ol { padding-left: 1.1rem; line-height: 1.55; font-size: .9rem; margin: .3rem 0 0; }

@media (min-width: 480px) {
  .team { font-size: 1rem; }
  .score .g { width: 3rem; }
}

.grp h3 { font-size: .95rem; margin: 0 0 .4rem; }
.grp-teams { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.grp-team { font-size: .8rem; background: #0f1722; border: 1px solid #2c3a4d;
  border-radius: 6px; padding: .2rem .45rem; opacity: .92; }
.grow { display: flex; align-items: center; gap: .4rem; margin: .25rem 0; }
.grow select { flex: 1; }
.chk { display: inline-flex; align-items: center; gap: .3rem; margin: .3rem .6rem .3rem 0; }
.ko { padding: .35rem 0; border-bottom: 1px solid #1f2b3b; }
.ko .wsel { width: 100%; }
.pending { opacity: .5; font-size: .85rem; }

/* ver porras */
.porra h3 { font-size: 1rem; margin: 0 0 .5rem; color: #7fb2ff; }
.porra .podio { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .92rem; margin-bottom: .45rem; }
.porra .mvp-line { font-size: .88rem; opacity: .9; margin-bottom: .55rem; }
.porra .gw { display: flex; flex-wrap: wrap; gap: .3rem; }

/* curiosidades */
.curio h3 { font-size: 1rem; margin: 0 0 .5rem; }
.curio ul { margin: 0; padding-left: 1.1rem; line-height: 1.5; font-size: .9rem; }
.curio li { margin: .2rem 0; }
.rules h2 { font-size: 1rem; color: #7fb2ff; margin: 1.1rem 0 .4rem; }
.rules h2:first-child { margin-top: 0; }
.rules table { width: 100%; border-collapse: collapse; margin-bottom: .4rem; }
.rules td { padding: .45rem .4rem; border-bottom: 1px solid #1f2b3b; }
.rules td.pts { text-align: right; font-weight: 700; color: #7fb2ff; white-space: nowrap; }