.bibi-row { width: min(100% - 48px, 68rem); margin-inline: auto; padding-top: 12px; }
.bibi-mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; position: relative; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.bibi-mini::after { content: ''; position: absolute; inset: auto 0 6px; height: 3px; border-radius: 50%; background: linear-gradient(90deg, transparent, #bee9f2 4%, #8acddd 50%, #bee9f2 96%, transparent); pointer-events: none; }
.bibi-mini:disabled { cursor: default; }
.bibi-mini img, .bibi-mini canvas { display: block; grid-area: 2 / 1; width: 100%; height: 112px; }
.bibi-mini img { object-fit: contain; object-position: left bottom; }
.bibi-hud { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; text-align: left; font-size: .875rem; line-height: 1.3; color: var(--secondary); }
.bibi-score { color: var(--ice-blue); font-variant-numeric: tabular-nums; }
.bibi-mini:disabled .bibi-hud { visibility: hidden; }
.home-with-bibi .hero { min-height: calc(100svh - 225px); }
.home-with-bibi .gameplay { width: min(100%, clamp(9rem, calc((100svh - 352px) * 396 / 858), 22rem)); }
@media (max-width: 760px) {
  .bibi-row { width: calc(100% - 40px); }
  .home-with-bibi .hero { min-height: auto; padding-top: 20px; }
  .home-with-bibi .gameplay { width: min(100%, clamp(12rem, calc((100svh - 420px) * 396 / 858), 18rem)); }
}