/* ========================================
   Home — desktop (>=720px, autenticado). Tablero orientado a la acción:
   saludo, torneo destacado full-row (.spotlight-card, en home-spotlight.css),
   grilla de torneos, actividad reciente y valla de sponsors full-width.
   Reusa las cards del home mobile (.mhome-*) y el clock del estadio
   (.sb-count__clk). Markup en app/views/lobby/_desktop_home.html.erb.
   ======================================== */

.dhome { display: none; }

@media (min-width: 720px) {
  .dhome { display: flex; flex-direction: column; gap: 26px; }
  /* Los section-label traen un margin pensado para páginas largas; acá el
     gap de las filas ya separa, así que lo neutralizamos. */
  .dhome .section-label { margin: 0 0 12px; }
}

/* ─── Saludo ─── */
.dhome-greet__hi { font-size: 27px; font-weight: 700; color: var(--ink-bright); line-height: 1.1; }
.dhome-greet__sub { font-size: 15px; color: var(--muted); margin-top: 4px; }
.dhome-greet__sub > strong { color: var(--accent); font-weight: 600; }

.dhome-section { display: flex; flex-direction: column; }

/* ─── Tus torneos — fila que se desliza con flechas ───
   Nunca crece en alto: una sola fila horizontal con scroll-snap; con muchos
   torneos se navega con prev/next (row_carousel_controller). Con pocos, las
   cards se estiran a llenar el ancho (flex-grow). */
.dhome-row__head { display: flex; align-items: center; justify-content: space-between; }
.dhome-row__head .section-label { margin: 0; }
.dhome-row__nav { display: flex; gap: 8px; }
.dhome-row__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  cursor: pointer; transition: border-color 150ms, color 150ms, background 150ms;
}
.dhome-row__arrow:hover { border-color: var(--accent); color: var(--accent); background: var(--card-2); }
.dhome-row__arrow[hidden] { display: none; }

.dhome-row {
  display: flex; gap: 14px; margin-top: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dhome-row::-webkit-scrollbar { display: none; }
/* Cada celda: ancho fijo (~3 visibles), pero crecen para llenar si sobran. La
   card de adentro estira a la altura de la celda. */
.dhome-row__cell { flex: 1 0 300px; max-width: 420px; scroll-snap-align: start; display: flex; }
.dhome-row__cell > .mhome-tcard { flex: 1; }

/* ─── Actividad reciente — feed social estilo C ───
   Cada logro es un evento: el color del kind INUNDA la card (gradiente teñido,
   no gris) y el dato va gigante a la derecha tipo scoreboard. Una publicación
   visible a la vez; el carousel_controller las pasa de a una con fade y
   propaga --accent-color del slide activo al contenedor (dots + glow). */
.dhome-feed { position: relative; }
.dhome-feed__stage { position: relative; min-height: 104px; }
.dhome-post {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 22px;
  padding: 20px 26px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent-color, var(--green)) 35%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent-color, var(--green)) 20%, #0b0e0c) 0%, #0b0e0c 62%);
  overflow: hidden;
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; pointer-events: none;
}
.dhome-post.active { opacity: 1; transform: none; pointer-events: auto; }
/* Halo difuso en la esquina, del color del logro. */
.dhome-post::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-color, var(--green)) 28%, transparent), transparent);
  pointer-events: none;
}
.dhome-post > * { position: relative; z-index: 1; }

/* Identidad: avatar + usuario/tiempo */
.dhome-post__id { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.dhome-post__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);
}
.dhome-post__who { min-width: 0; }
.dhome-post__user { display: block; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.1; text-decoration: none; transition: color 150ms; }
.dhome-post__user:hover { color: var(--accent); }
.dhome-post__time { font-size: 12px; color: var(--muted); }

/* Centro: tag del logro + frase. Separado de la identidad por una línea teñida. */
.dhome-post__mid {
  flex: 1; min-width: 0;
  padding-left: 22px; border-left: 1px solid color-mix(in srgb, var(--accent-color, var(--green)) 30%, transparent);
}
.dhome-post__tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-family: var(--font-scoreboard); font-size: 22px; letter-spacing: 0.04em; line-height: 1;
  color: var(--accent-color, var(--green));
}
.dhome-post__tag svg { width: 18px; height: 18px; }
.dhome-post__text { font-size: 14.5px; color: #d6dbd6; line-height: 1.4; }
.dhome-post__text strong { color: #fff; font-weight: 700; }

/* Dato gigante a la derecha (scoreboard). */
.dhome-post__big { flex: 0 0 auto; text-align: center; }
.dhome-post__big > b {
  display: block; font-family: var(--font-scoreboard); font-size: 52px; line-height: 0.85; color: #fff;
}
.dhome-post__big > i {
  font-style: normal; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-color, var(--green));
}

/* Dots (pasar de a uno). */
.dhome-feed__dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.dhome-feed__dots > b { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: .3s; }
.dhome-feed__dots > b.-on { background: var(--accent-color, var(--green)); width: 20px; border-radius: 99px; }

.dhome-feed.-empty {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 18px; text-align: center; color: var(--fg-2); font-size: 14px;
}

/* Color por kind: define --accent-color en el slide; el carousel_controller
   lo propaga al contenedor para teñir los dots. Hardcodeado (sin depender de
   orden de carga), mismos hex que el feed mobile. */
.dhome-post.activity-bubble--exact_hit        { --accent-color: #22c55e; }
.dhome-post.activity-bubble--perfect_day      { --accent-color: #4ade80; }
.dhome-post.activity-bubble--painful_miss     { --accent-color: #ef4444; }
.dhome-post.activity-bubble--cold_streak      { --accent-color: #94a3b8; }
.dhome-post.activity-bubble--hat_trick        { --accent-color: #f97316; }
.dhome-post.activity-bubble--ranking_jump     { --accent-color: #38bdf8; }
.dhome-post.activity-bubble--badge_unlocked   { --accent-color: #f5c518; }
.dhome-post.activity-bubble--new_leader       { --accent-color: #f5c518; }
.dhome-post.activity-bubble--centurion        { --accent-color: #e879f9; }
.dhome-post.activity-bubble--premium_unlocked { --accent-color: #a78bfa; }

/* La valla de sponsors va full-width (.dhome es flex column): el showcase ya
   está diseñado para ancho — logo grande + texto al lado. Le damos aire. */
.dhome > .sponsor-showcase { padding: 22px 24px; }