/* Release 366: three priced games under the home headline, and the "where do you bet" line (static/js/home_next.js) */
.home-next { margin: 22px 0 0; max-width: 640px; }
/* the room the three games take is kept while they load, so nothing below jumps (layout shift) */
/* release 370 (design panel): the room matches what arrives (three cards and the foot line: 221px on desktop; 353px with the
   region offer), so a slow feed moves nothing below (layout shift was up to 0.27 on desktop) */
.home-next.is-loading { min-height: 221px; }
.home-next.is-loading.has-offer { min-height: 353px; }
/* release 370 (design panel): the region offer is one tap, with 44px buttons (was a 22px underlined link) */
.home-next .hn-region { margin: 0 0 12px; padding: 12px; border: 1px solid #e4e4e7; border-radius: 12px; background: #fafafa; font-size: 14px; line-height: 1.45; color: #3f3f46; }
.home-next .hn-region p { margin: 0; }
.home-next .hn-region-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.home-next .hn-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; color: #08111C; font: 600 15px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.home-next .hn-chip:hover { border-color: #08111C; }
.home-next .hn-chip.is-main { border-color: #19EFAE; background: #19EFAE; }
.home-next .hn-chip.is-main:hover { background: #12d89b; }
.home-next .hn-chip.is-link { border-color: transparent; background: none; padding: 0 8px; text-decoration: underline; text-underline-offset: 3px; }
.home-next .hn-chip:disabled { opacity: .7; cursor: progress; }
.home-next .hn-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-next .hn-card { display: grid; gap: 4px; align-content: start; padding: 12px 13px; border: 1px solid #e4e4e7; border-radius: 10px; background: #fff; color: #18181b; text-decoration: none; }
.home-next .hn-card:hover { border-color: #08111C; }
.home-next .hn-card:focus-visible, .home-next a:focus-visible, .home-next button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.home-next .hn-k { font-size: 12px; font-weight: 600; color: #52525b; letter-spacing: .01em; }
.home-next .hn-t { font-size: 14.5px; line-height: 1.3; }
.home-next .hn-l { font-size: 13.5px; color: #3f3f46; }
.home-next .hn-l strong { color: #08111C; font-variant-numeric: tabular-nums; }
.home-next .hn-m { font-size: 12.5px; font-weight: 600; color: #047857; }
.home-next .hn-foot { margin: 2px 0 0; font-size: 12.5px; color: #63636b; }
.home-next .hn-foot a { color: #08111C; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }   /* release 370: 44px target */
@media (max-width: 720px) { .home-next .hn-row { grid-template-columns: 1fr; gap: 8px; } .home-next .hn-card { padding: 10px 12px; gap: 2px; } .home-next.is-loading { min-height: 380px; } .home-next.is-loading.has-offer { min-height: 560px; }
  .home-next .hn-region-acts .hn-chip.is-main { flex: 1 1 100%; justify-content: center; } }