/* Home mobile (<=719px) — próximo palpito + slider de torneos + carrusel de
   actividad. Es el home de los usuarios autenticados en mobile; en desktop
   toma la posta el home-desktop (.dhome). Ver lobby/_mobile_home.html.erb. */

.mhome { display: none; }

@media (max-width: 719px) {
  .mhome { display: flex; flex-direction: column; gap: 12px; }
}

.mhome-section { display: flex; flex-direction: column; gap: 8px; }
/* El .section-label trae un margin: 28px 0 14px pensado para páginas largas;
   acá el gap de las secciones ya separa, así que lo neutralizamos. */
.mhome .section-label { margin: 2px 0 0; }

/* — Saludo */
.mhome-greet { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mhome-greet__hi { font-size: 19px; font-weight: 700; color: var(--ink); }
.mhome-greet__sub { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; }
.mhome-greet__sub > strong { color: var(--accent); }

/* Avatar del saludo: link al perfil con distintivo de plan/rol.
   Free = anillo verde (default). Premium = corona + anillo dorado.
   Admin = escudo + anillo azul "verificado" (prioridad sobre premium). */
.mhome-ava { position: relative; display: inline-flex; flex: 0 0 auto; text-decoration: none; }
.mhome-ava.-premium .avatar {
  border-color: var(--accent); color: var(--accent); background: rgba(10, 219, 198, 0.12);
  box-shadow: 0 0 0 2px rgba(10, 219, 198, 0.18), 0 0 16px var(--green-glow);
}
.mhome-ava.-admin .avatar {
  border-color: var(--blue); color: var(--blue); background: rgba(108, 172, 228, 0.12);
  box-shadow: 0 0 0 2px rgba(108, 172, 228, 0.20), 0 0 16px rgba(108, 172, 228, 0.35);
}
.mhome-ava__badge {
  position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid var(--bg);
}
.mhome-ava__badge.-premium { background: var(--gold); color: var(--amarilla-ink); }
.mhome-ava__badge.-admin { background: var(--blue); color: #0b1626; }
.mhome-ava__badge svg { width: 12px; height: 12px; }

/* — Hero: próximo partido. Estética "cancha de noche" (estilo estadio
   desktop): fondo verde-negro, glow + spotlight verde, scanlines, línea y
   círculo central, y una valla LED que recorre el borde superior. */
.mhome-hero {
  position: relative;
  overflow: hidden;
  background: #0b0e0c;
  border: 1px solid rgba(10, 219, 198, 0.22);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 0 44px rgba(10, 219, 198, 0.07), 0 16px 40px rgba(0, 0, 0, 0.5);
}
.mhome-hero > * { position: relative; z-index: 1; }
.mhome-hero__pitch {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(10, 219, 198, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(10, 219, 198, 0.06), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 5px);
}
.mhome-hero__pitch::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.07);
}
.mhome-hero__pitch::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 140px; height: 140px;
  transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 50%;
}
.mhome-hero__led {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.mhome-hero__led::after {
  content: ""; position: absolute; top: 0; left: -35%; width: 35%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--green), var(--accent), transparent);
  animation: mhome-led 3s ease-in-out infinite;
}
@keyframes mhome-led { 0% { left: -35%; } 60%, 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .mhome-hero__led::after { animation: none; } }
.mhome-hero__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mhome-hero__top .cap { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.mhome-hero__when {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--coral); white-space: nowrap;
}
.mhome-hero__teams { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.mhome-hero__vs { font-family: var(--font-scoreboard); font-size: 26px; color: var(--ink-soft); }
.mhome-team { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.mhome-team__name { font-size: 13px; font-weight: 600; text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhome-team .cl-logo { width: 44px; height: 44px; }
/* Vacío: sin cancha, card neutra. */
.mhome-hero.-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--card); border-color: var(--line); box-shadow: none; text-align: center;
}
.mhome-hero__empty-tx { color: var(--fg-2); font-size: 13.5px; }

/* CTA dorado primario (compartido hero / vacío) */
.mhome-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink); font-weight: 700; font-size: 15px;
  padding: 13px; border-radius: 14px; text-decoration: none;
  box-shadow: 0 8px 28px rgba(10, 219, 198, 0.26);
  transition: filter 150ms, box-shadow 150ms, transform 150ms;
}
.mhome-cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 32px rgba(10, 219, 198, 0.34);
  transform: translateY(-1px);
}

/* — Tabs */
.mhome-tabs { display: flex; flex-direction: column; gap: 10px; }
.mhome-tabs__head { display: flex; gap: 8px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px; }
.mhome-tabs__btn { flex: 1; border: none; background: none; color: var(--muted);
  font-family: var(--font); font-weight: 600; font-size: 13px; padding: 9px; border-radius: 9px; cursor: pointer; }
.mhome-tabs__btn.-active { background: var(--card); color: var(--ink); }
.mhome-tabs__pane.-hidden { display: none; }

/* — Slider de torneos (scroll-snap nativo + dots) */
.mhome-slider__track {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mhome-slider__track::-webkit-scrollbar { display: none; }
.mhome-slider__slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; }
/* La card llena su slide para que todas queden a la misma altura (el track
   estira los slides al más alto, pero la card no crece sola). */
.mhome-slider__slide > .mhome-tcard { flex: 1; }
.mhome-slider__dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.mhome-slider__dots > b { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: .3s; }
.mhome-slider__dots > b.-on { background: var(--accent); width: 20px; border-radius: 99px; }

.mhome-tcard {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  min-height: 150px;
  background: #0b0e0c; border: 1px solid rgba(10, 219, 198, 0.16); border-radius: 16px;
  padding: 15px; text-decoration: none; color: var(--ink);
  box-shadow: 0 0 30px rgba(10, 219, 198, 0.06);
}
.mhome-tcard > * { position: relative; z-index: 1; }
/* Cancha de las cards sin arte cargado: spotlight verde en una esquina +
   scanlines (sin línea/círculo central para no competir con el contenido). */
.mhome-tcard__pitch {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(10, 219, 198, 0.12), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 5px);
}
.mhome-tcard.-upcoming { border-color: rgba(10, 219, 198, 0.20); }
.mhome-tcard.-upcoming .mhome-tcard__pitch {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(10, 219, 198, 0.10), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 5px);
}
.mhome-tcard.-featured { border-color: rgba(10, 219, 198, 0.30); }
/* Arte del torneo de fondo (si tiene bg cargado), con velo oscuro para que
   el texto siga legible. */
.mhome-tcard__bg { position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; opacity: .38;
  filter: blur(3px); transform: scale(1.12); }
.mhome-tcard.-hasbg::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(18, 20, 19, 0.62) 0%, rgba(18, 20, 19, 0.88) 55%, rgba(18, 20, 19, 0.97) 100%); }
.mhome-tcard__glow { position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; z-index: 0;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 219, 198, 0.18), transparent); }
.mhome-tcard.-upcoming .mhome-tcard__glow { background: radial-gradient(closest-side, rgba(10, 219, 198, 0.18), transparent); }
.mhome-tcard.-hasbg .mhome-tcard__glow { display: none; }
.mhome-tcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mhome-tcard__badge { width: 44px; height: 44px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; background: rgba(26, 29, 27, 0.55);
  border: 1px solid var(--line); overflow: hidden; }
.mhome-tcard__badge img { width: 30px; height: 30px; object-fit: contain; }
.mhome-tcard__badge svg { color: var(--accent); }
.mhome-tcard__flag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent); padding: 4px 9px; border-radius: 99px; }
.mhome-tcard__name { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.mhome-tcard__status { display: inline-flex; align-items: center; gap: 6px; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
/* Countdown compacto dentro de la card de torneo */
.mhome-tcard__count { display: flex; gap: 8px; margin: 10px 0 4px; }
.mhome-tcard__count .blk { display: flex; flex-direction: column; align-items: center;
  background: rgba(26, 29, 27, 0.55); border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 0; min-width: 46px; }
.mhome-tcard__count .blk > b { font-family: var(--font-scoreboard); font-size: 22px; line-height: 1; color: var(--accent); }
.mhome-tcard__count .blk > i { font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-style: normal; margin-top: 3px; }
.mhome-tcard__status .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mhome-tcard__status.-live { color: var(--green); }
.mhome-tcard__status.-gold { color: var(--accent); }
.mhome-tcard__bar { height: 6px; border-radius: 99px; background: var(--bg-2); margin: 10px 0 6px; overflow: hidden; }
.mhome-tcard__bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green2)); }
.mhome-tcard.-upcoming .mhome-tcard__bar > i { background: var(--accent); }
.mhome-tcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.mhome-tcard__foot .pl { font-size: 12px; color: var(--muted); }
.mhome-tcard__foot .pl > strong { color: var(--ink); }
.mhome-tcard__foot .go { font-size: 12px; color: var(--accent); font-weight: 700; }
.mhome-tcard.-empty { text-align: center; }
.mhome-tcard__empty-tx { font-size: 13px; color: var(--fg-2); margin: 8px 0 14px; }
.mhome-tcard__cta { display: inline-block; color: var(--accent); font-weight: 700; font-size: 13px; text-decoration: none; }

/* — Carrusel de actividad (un ítem que rota). Mismo look tintado que el feed
   desktop (.dhome-post), adaptado a una columna angosta: card teñida por kind
   con halo, avatar + usuario, tag scoreboard y el dato grande. Cada slide
   setea --accent-color (.activity-bubble--<kind>); el carousel lo sube al
   contenedor para teñir los dots. */
.mhome-act { position: relative; }
.mhome-act__stage { position: relative; min-height: 138px; }
.mhome-act__item {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 16px; border-radius: 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-color, var(--green)) 35%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-color, var(--green)) 20%, #0b0e0c) 0%, #0b0e0c 64%);
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; pointer-events: none;
}
.mhome-act__item.active { opacity: 1; transform: none; pointer-events: auto; }
/* Halo difuso en la esquina, del color del logro. */
.mhome-act__item::after {
  content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-color, var(--green)) 26%, transparent), transparent);
  pointer-events: none;
}
.mhome-act__item > * { position: relative; z-index: 1; }
.mhome-act__top { display: flex; align-items: center; gap: 10px; }
.mhome-act__ava .avatar {
  border: 2px solid var(--accent-color, var(--green));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, var(--green)) 16%, transparent);
}
.mhome-act__who { min-width: 0; flex: 1; }
.mhome-act__user { display: block; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.1; text-decoration: none; transition: color 150ms; }
.mhome-act__user:active { color: var(--accent); }
.mhome-act__time { font-size: 11px; color: var(--muted); }
.mhome-act__big { flex: 0 0 auto; text-align: center; line-height: 1; }
.mhome-act__big > b { display: block; font-family: var(--font-scoreboard); font-size: 30px; line-height: .85; color: #fff; }
.mhome-act__big > i { font-style: normal; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-color, var(--green)); }
.mhome-act__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-scoreboard); font-size: 18px; letter-spacing: .04em; line-height: 1;
  color: var(--accent-color, var(--green));
}
.mhome-act__tag svg { width: 16px; height: 16px; }
.mhome-act__text { font-size: 13px; color: #d6dbd6; line-height: 1.4; }
.mhome-act__text strong { color: #fff; font-weight: 700; }
.mhome-act__arr {
  position: absolute; top: 40%; transform: translateY(-50%);
  z-index: 2;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 19px; line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}
/* Área táctil ≥44px sin agrandar el círculo visible (34px). */
.mhome-act__arr::after { content: ""; position: absolute; inset: -5px; }
.mhome-act__arr.-prev { left: 6px; }
.mhome-act__arr.-next { right: 6px; }
.mhome-act__arr:hover { background: var(--accent-color, var(--accent)); }
.mhome-act__dots { display: flex; gap: 5px; justify-content: center; margin-top: 12px; }
.mhome-act__dots > b { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: .3s; }
.mhome-act__dots > b.-on { background: var(--accent-color, var(--green)); width: 18px; border-radius: 99px; }

/* Color por kind: define --accent-color en el slide (mismos hex que el feed
   desktop); el borde, el halo, el tag y el dato lo leen de ahí. */
.mhome-act__item.activity-bubble--exact_hit        { --accent-color: #22c55e; }
.mhome-act__item.activity-bubble--perfect_day      { --accent-color: #4ade80; }
.mhome-act__item.activity-bubble--painful_miss     { --accent-color: #ef4444; }
.mhome-act__item.activity-bubble--cold_streak      { --accent-color: #94a3b8; }
.mhome-act__item.activity-bubble--hat_trick        { --accent-color: #f97316; }
.mhome-act__item.activity-bubble--ranking_jump     { --accent-color: #38bdf8; }
.mhome-act__item.activity-bubble--badge_unlocked   { --accent-color: #f5c518; }
.mhome-act__item.activity-bubble--new_leader       { --accent-color: #f5c518; }
.mhome-act__item.activity-bubble--centurion        { --accent-color: #e879f9; }
.mhome-act__item.activity-bubble--premium_unlocked { --accent-color: #a78bfa; }