/* =========================================
   HOME: MAIN_HUB por zonas respirables
   Bento solo donde aporta; el resto fluye
   abierto sobre el fondo, sin encajonar
   ========================================= */

.bento {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(12, 1fr);
}

.bento > * {
  grid-column: span 12;
}

@media (min-width: 1100px) {
  .b-dialog   { grid-column: span 12; }
  .b-terminal { grid-column: span 7; }
  .b-player   { grid-column: span 5; }
  .b-tape     { grid-column: 2 / span 5; }
  .b-disks    { grid-column: span 5; }
  .b-feed     { grid-column: span 7; }
  .b-chat     { grid-column: span 4; }
}

@media (min-width: 760px) and (max-width: 1099px) {
  .b-terminal, .b-player, .b-tape, .b-disks, .b-feed, .b-chat {
    grid-column: span 6;
  }
}

/* --- CONTADOR GLOBAL: display arcade de créditos --- */
.coin-counter {
  -webkit-backdrop-filter: blur(5px);
  align-items: center;
  backdrop-filter: blur(5px);
  background-color: var(--panel-bg-deep);
  border: 2px solid rgba(var(--rgb-yellow), 0.6);
  box-shadow: 0 0 14px rgba(var(--rgb-yellow), 0.25);
  clip-path: var(--clip-panel);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 auto 26px;
  max-width: 420px;
  padding: 14px 26px;
  text-align: center;
}

.coin-counter-label {
  color: var(--pastel-yellow);
  font-family: var(--font-hud);
  font-size: 0.55rem;
  letter-spacing: 2px;
}

/* Número estilo marcador de máquina recreativa */
.coin-counter-num {
  color: var(--neon-yellow);
  font-family: var(--font-hud);
  font-size: 1.5rem;
  letter-spacing: 4px;
  text-shadow: 0 0 14px rgba(var(--rgb-yellow), 0.7);
}

.coin-counter-sub {
  color: var(--text-dim);
  font-family: var(--font-pixel);
  font-size: 1.05rem;
}

/* El diálogo de la NPC va suelto entre el hero y las zonas */
.dialog-solo {
  margin: 6px auto 26px;
  max-width: 900px;
}

/* Los paneles dentro del bento no llevan margen propio */
.bento .panel,
.bento .dialog-box {
  box-sizing: border-box;
  height: 100%;
  margin-bottom: 0;
}

/* --- FEED ABIERTO: noticias y parches sin caja --- */
.feed-block {
  padding: 4px 8px;
}

.feed-block .news-banner {
  margin-bottom: 22px;
}

.feed-title {
  color: var(--text-dim);
  font-family: var(--font-hud);
  font-size: 0.55rem;
  letter-spacing: 2px;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.feed-title::before {
  color: var(--neon-purple);
  content: "▮ ";
}

/* El changelog cuelga abierto de una línea de datos */
.feed-block .update-list {
  border-left: 2px dashed rgba(var(--rgb-purple), 0.45);
  padding-left: 16px;
}

.feed-block .update-list li {
  border-bottom: none;
  padding: 6px 0;
}

/* --- TIRA DE CONTACTO: botones sueltos, sin caja --- */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 40px 0 10px;
}

/* --- EMBED MINI junto al webring --- */
.embed-mini {
  margin: 0 auto;
  max-width: 320px;
  text-align: center;
}

.embed-mini .hud-label {
  display: block;
  margin-bottom: 8px;
}

.embed-preview {
  display: block;
  image-rendering: pixelated;
  margin: 0 auto 8px;
}