/* Runtime audit, 2026-09-04.
 * Full legacy mobile capture keeps the locally loaded Code Pro faces for the
 * page-top and promo display headings; the former serif fallback came from
 * an incomplete font load, not from home_games.css. */
.legacy-public:has(.homegames) .page-top .homegames-page-title,
.legacy-public .homegames .homegames-promo__title {
  font-family: 'Code Pro Black', 'Arial Black', sans-serif;
  font-weight: 400;
}

/* `inner.php` renders the imported 1920×345 source photo as a single cover
 * image.  The generic FastAPI page-top otherwise repeats it at natural size. */
.legacy-public:has(.homegames) .page-top {
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.legacy-public .homegames-promo-top { padding-top: 0; }
.legacy-public .homegames-promo__title {
  margin: 0 0 50px;
  font-size: 36px;
  line-height: 1.15;
}
.legacy-public .homegames-promo__title::before { top: 12px; left: -15px; }
.legacy-public .homegames-promo__logo::before { top: 6px; z-index: 0; }
.legacy-public .homegames-promo__logo span { z-index: 1; }
.legacy-public .homegames-promo-body { padding: 30px 0 40px; }
.legacy-public .homegames-promo-features { margin-bottom: 50px; }
.legacy-public .homegames-promo-features-item__title {
  margin-bottom: 15px;
  font-size: 20px;
  line-height: 24px;
}
.legacy-public .homegames-item__title { padding: 20px 0 15px; }
/* The literal home_games.css card waves are positive-z pseudo-elements on
 * .homegames-item. The former FastAPI layer promoted the white title/price
 * panels above them, flattening both torn paper edges. */
.legacy-public .homegames-item__title,
.legacy-public .homegames-item__price { z-index: auto; }
.legacy-public .homegames-item__title::before,
.legacy-public .homegames-item__price::before {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  content: '';
  background: linear-gradient(to right, #fff 70%, transparent 30%) 0 100% / 25px 2px repeat-x;
}
.legacy-public .homegames-item__title::before { bottom: -7px; }
.legacy-public .homegames-item__event {
  display: flex;
  height: 100px;
  align-items: center;
  padding: 0 20px 0 95px;
  font-size: 19px;
  line-height: 22px;
}
.legacy-public .homegames-item__event span { position: absolute; top: 0; left: 0; width: 85px; margin: 0; }
.legacy-public .homegames-item__event img { width: 100%; height: auto; max-height: 100%; }
.legacy-public .homegames-item-content { padding: 20px 0; }
.legacy-public .homegames-item-features { gap: 0; }
.legacy-public .homegames-item-features__item {
  left: -15px;
  margin: 0 15px 20px 0;
  padding: 7px 30px;
  font-size: 15px;
}
.legacy-public .homegames-item-features__item:last-child { margin-bottom: 10px; }
.legacy-public .homegames-item-features__item::before {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;
  content: '';
  border-style: solid;
  border-width: 0 0 11px 15px;
  border-color: transparent transparent #a09fa6;
}
.legacy-public .homegames-item__text { margin: 0; padding: 0 15px; line-height: 22px; font-weight: 300; }
.legacy-public .homegames-item__price { padding: 10px 0 15px; font-size: 21px; }
.legacy-public .homegames-item__price::before { top: -7px; }
.legacy-public .homegames-item__price strong { padding-left: 35px; background-size: 26px 17px; font-size: 30px; }
/* The source SVG deliberately leaves the upper part of its bottom wave
 * transparent so the white price panel forms the torn edge.  A fractional
 * raster seam could nevertheless reveal a white line below that wave on some
 * cards.  Keep the source drawing and cover only that outside seam with the
 * page background. */
.legacy-public .homegames-item::after { bottom: -1px; height: 9px; box-shadow: 0 1px 0 #2f2e42; }
.legacy-public .homegames-type-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: -12px 0 34px; }
.legacy-public .homegames-type-filter { display: inline-flex; min-height: 50px; align-items: center; gap: 10px; padding: 8px 17px 8px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 26px; color: #fff; font-size: 13px; font-weight: 800; line-height: 1.1; text-decoration: none; text-transform: uppercase; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.legacy-public .homegames-type-filter:hover, .legacy-public .homegames-type-filter:focus-visible { border-color: #fcea1c; background: rgba(252,234,28,.15); color: #fff; transform: translateY(-2px); }
.legacy-public .homegames-type-filter:focus-visible { outline: 3px solid #fcea1c; outline-offset: 3px; }
.legacy-public .homegames-type-filter.is-active { border-color: #fcea1c; background: #fcea1c; color: #302509; }
.legacy-public .homegames-type-filter img { width: 34px; height: 34px; object-fit: contain; }
/* The old standalone dialog CSS makes every form a two-column grid.  This
 * route uses the source register-modal rows, so keep their summary and status
 * in the intended one-column document flow. */
.legacy-public .legacy-home-game-modal .register-modal__form { display: block; }
.legacy-public .home-game-price-breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: -15px 0 27px; background: #e4e3e9; }
.legacy-public .home-game-price-breakdown div { min-width: 0; padding: 10px 11px; background: #f7f6f8; }
.legacy-public .home-game-price-breakdown dt { color: #716f9a; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.legacy-public .home-game-price-breakdown dd { overflow: hidden; margin: 5px 0 0; color: #2f2e42; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.legacy-public [data-home-game-status][data-state="checking"] { background: #f2f1f5; color: #716f9a; }
.legacy-public [data-home-game-status][data-state="success"] { background: #eef8ef; color: #287738; }
.legacy-public .home-game-promo-control button:disabled,
.legacy-public .legacy-home-game-modal .register-modal__button:disabled { cursor: wait; opacity: .64; }
.legacy-public .home-game-promo-control button[aria-busy="true"]::after,
.legacy-public .legacy-home-game-modal .register-modal__button[aria-busy="true"]::after { display: inline-block; width: .82em; height: .82em; margin-left: .48em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ''; animation: home-game-button-spin .7s linear infinite; vertical-align: -.08em; }
@keyframes home-game-button-spin { to { transform: rotate(360deg); } }
.legacy-public .homegames-item_coming { align-items: flex-start; min-height: 400px; font-size: 40px; line-height: 45px; }
.legacy-public .homegames-item_coming > span { position: relative; display: block; width: 100%; padding-left: 45px; text-align: left; }
.legacy-public .homegames-item_coming > span::before { position: absolute; top: -50px; left: 50%; width: 40px; height: 40px; margin-left: -20px; content: ''; background: url('/static/site-assets/home-games/icon-plus.svg') center/contain no-repeat; }
.legacy-public .homegames-item_coming > span span { padding-left: 110px; }

/* The actual source attributes are rendered by the Jinja port.  Motion itself
 * is controlled locally in legacy-home-games.js, so no legacy AOS/jQuery
 * bundle can hide content when JavaScript is unavailable. */
@media (prefers-reduced-motion: reduce) {
  .legacy-public .homegames .legacy-home-games-aos-node { opacity: 1 !important; animation: none !important; transition: none !important; }
}

@media (max-width: 1599px) {
  .legacy-public .homegames-promo-features-item { position: static; }
  .legacy-public .homegames-promo-features-item__title { flex-grow: 1; margin-bottom: 30px; }
}
@media (max-width: 767px) {
  .legacy-public .homegames-item_coming > span,
  .legacy-public .homegames-item_coming > span span { padding-left: 0; text-align: center; }
}
@media (max-width: 639px) {
  .legacy-public:has(.homegames) .page-top { padding-right: 0; padding-left: 0; }
  .legacy-public:has(.homegames) .page-top .homegames-page-title { font-family: 'Code Pro Black', 'Arial Black', sans-serif; font-size: 30px; line-height: 45px; }
  .legacy-public .homegames .homegames-promo__title { font-family: 'Code Pro Black', 'Arial Black', sans-serif; }
  .legacy-public .homegames .homegames-promo__title .thin-text { font-family: 'Code Pro Light', Arial, sans-serif; }
  /* Literal `home_games.css` compact feature copy.  The wider audit selector
     above must not retain its desktop 20px/30px box at the source breakpoint. */
  .legacy-public .homegames-promo-features-item__title { margin-bottom: 15px; font-size: 17px; }
  .legacy-public .homegames-type-filters { flex-wrap: nowrap; margin-right: -15px; padding: 0 15px 5px 0; overflow-x: auto; scrollbar-width: thin; }
  .legacy-public .homegames-type-filter { flex: 0 0 auto; min-height: 46px; padding-right: 14px; font-size: 12px; }
  .legacy-public .home-game-price-breakdown { grid-template-columns: 1fr; margin-top: -14px; }
  .legacy-public .home-game-price-breakdown div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .legacy-public .home-game-price-breakdown dd { margin-top: 0; }
}
@media (max-width: 479px) {
  .legacy-public .homegames-promo-features-item__title { margin-bottom: 20px; font-size: 20px; }
}

/* Legacy desktop is a connected infographic, not a five-column card grid.
 * The source stylesheet switches to a compact 3+2 grid at 1599px, but that
 * loses the composition shown on the original desktop landing.  Preserve its
 * original positions and SVG paths down to the tablet breakpoint; the
 * existing <=1010px rules continue to provide the accessible compact layout.
 */
@media (min-width: 1011px) {
  .legacy-public .homegames-promo-body::before,
  .legacy-public .homegames-promo-body::after { display: block; }
  .legacy-public .homegames-promo-features {
    display: flex;
    flex-wrap: nowrap;
    align-items: initial;
    justify-content: initial;
    gap: 0;
    margin-bottom: 50px;
    padding: 0 110px;
  }
  .legacy-public .homegames-promo-features-item,
  .legacy-public .homegames-promo-features-item:nth-child(1),
  .legacy-public .homegames-promo-features-item:nth-child(2),
  .legacy-public .homegames-promo-features-item:nth-child(3),
  .legacy-public .homegames-promo-features-item:nth-child(5) {
    position: relative;
    flex: 1 1 25%;
    max-width: 25%;
    margin: 0;
    text-align: left;
    transform: none;
  }
  .legacy-public .homegames-promo-features-item::after {
    position: absolute;
    display: block;
    content: '';
    background-repeat: no-repeat;
  }
  .legacy-public .homegames-promo-features-item-body { display: block; height: auto; cursor: pointer; }
  .legacy-public .homegames-promo-features-item__title {
    min-height: 0;
    margin: 0 0 15px;
    padding: 0;
    color: #fff;
    font-size: 20px;
    line-height: 24px;
  }
  .legacy-public .homegames-promo-features-item_1 { margin-top: 80px !important; }
  .legacy-public .homegames-promo-features-item_1::after {
    top: 8px;
    left: 200px;
    width: 195px;
    height: 150px;
    background-image: url('/static/legacy-source/images/homegames-arrow1.svg');
  }
  .legacy-public .homegames-promo-features-item_1 .homegames-promo-features-item__title { max-width: 175px; margin-bottom: 50px; }
  .legacy-public .homegames-promo-features-item_2 { margin-top: 250px !important; }
  .legacy-public .homegames-promo-features-item_2::after {
    top: -240px;
    left: 120px;
    width: 159px;
    height: 248px;
    background-image: url('/static/legacy-source/images/homegames-arrow2.svg');
  }
  .legacy-public .homegames-promo-features-item_2 .homegames-promo-features-item__title { max-width: 175px; }
  .legacy-public .homegames-promo-features-item_3 { margin-top: 35px !important; }
  .legacy-public .homegames-promo-features-item_3::after {
    top: 5px;
    left: 240px;
    width: 154px;
    height: 101px;
    background-image: url('/static/legacy-source/images/homegames-arrow3.svg');
  }
  .legacy-public .homegames-promo-features-item_3 .homegames-promo-features-item__title { max-width: 230px; }
  .legacy-public .homegames-promo-features-item_4 {
    position: absolute;
    top: -15px;
    right: 0;
    width: 270px;
    max-width: none;
  }
  .legacy-public .homegames-promo-features-item_4::after {
    top: 60px;
    left: 130px;
    width: 107px;
    height: 266px;
    background-image: url('/static/legacy-source/images/homegames-arrow4.svg');
  }
  .legacy-public .homegames-promo-features-item_4 .homegames-promo-features-item__title { margin-bottom: 50px; }
  .legacy-public .homegames-promo-features-item_5 { margin-top: 250px !important; }
}