/* ==========================================================================
   House of Winners — home page

   The hero slideshow is intentionally NOT styled here. Banner text is baked
   into the uploaded artwork, so a slide is just an image — the existing owl
   carousel and .intro-slide markup already do that correctly and are left
   alone. slide_caption / slide_desc / slide_button_name stay unrendered.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Announcement bar
   Same getHomeNotice() content. Replaces <marquee>, which is deprecated and
   non-standard; pause-on-hover is preserved.
   -------------------------------------------------------------------------- */
.hw-announce{
  min-height:40px;
  height:40px;          /* fixed: the bar is one text row, never two */
  display:flex;
  align-items:center;
  background:var(--hw-surface,#121212);
  color:var(--hw-gold-mid,#F3C961);
  overflow:hidden;
}
/* Full-bleed, NOT held to var(--hw-container) like the sections around it.
   The bar is a scrolling marquee: constrained to the content column the text
   appeared and vanished ~95px inside a band that runs the full width, which
   read as a clipping bug. The 20px padding is a margin, not a column — it
   keeps the icon off the window edge while the text still runs the full
   width. */
.hw-announce__inner{
  display:flex;
  align-items:center;      /* icon and text share a vertical centre line */
  gap:13px;
  width:100%;
  height:100%;
  padding:0 20px;          /* height is fixed on .hw-announce, so no y-padding */
}
/* Supplied asset is 21x18 (the Figma frame said 25x25). */
.hw-announce__icon{
  width:21px;
  height:18px;
  flex:0 0 auto;
  display:block;
  object-fit:contain;
}
.hw-announce__viewport{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}
.hw-announce__track,
.hw-announce__track *{white-space:nowrap;}
.hw-announce__track *{display:inline;margin:0;}
.hw-announce__track{
  display:inline-block;
  padding-left:100%;
  font-family:var(--hw-font);
  font-size:var(--hw-fs-sm,1.2rem);
  line-height:1.4;
  color:var(--hw-gold-mid,#F3C961);
  animation:hw-marquee 22s linear infinite;
  will-change:transform;
}
.hw-announce__viewport:hover .hw-announce__track{animation-play-state:paused;}

@keyframes hw-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-100%);}
}

/* NOTE: no prefers-reduced-motion opt-out here. Normally this animation would
   stop for users who ask their OS to reduce motion, but a permanently scrolling
   notice was requested explicitly. Re-add the opt-out if that changes. */

/* ==========================================================================
   Media placeholder — remove each .hw-ph as its asset lands
   ========================================================================== */
.hw-ph{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  padding:10px;
  border:1px dashed rgba(255,255,255,.16);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 10px,transparent 10px,transparent 20px);
  color:#9A9A9A;font-size:12px;letter-spacing:.04em;text-align:center;
}
.hw-ph--sm{font-size:10px;padding:4px;}

/* ==========================================================================
   Game category bands (Live Casino / Slot Game)
   ========================================================================== */
.hw-cat{
  position:relative;
  /* Match the artwork's own ratio. The supplied files are 1440 x 450 (the
     Figma frame said 806 — the exports are the truth). Equal ratios mean
     background-size:cover has nothing to crop, so the text baked into the
     bottom-right of the image stays whole at any width. */
  aspect-ratio:1440 / 450;
  display:flex;
  align-items:center;
  background:var(--hw-page-bg,#000);
  overflow:hidden;
}
/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio:1/1){
  .hw-cat{min-height:0;height:31.25vw;max-height:450px;}
}
.hw-cat__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
.hw-cat__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--hw-container);
  margin-inline:auto;padding:40px 20px;
}
.hw-cat__panel{width:min(340px,46%);}
.hw-cat__title{
  margin:0 0 18px;
  font-family:var(--hw-font);
  font-size:18px;line-height:1.2;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--hw-on-surface,#fff);
}
.hw-cat__list{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0;}
.hw-cat__empty{color:var(--hw-muted,#B3B3B3);font-size:var(--hw-fs-sm,1.2rem);}

/* Provider tile — a single pre-composed image, no CSS frame.
   Natural size is 191 x 45; --hw-tile-w is the one lever if you want them
   larger or smaller than the artwork. */
.hw-tile{
  --hw-tile-w:191px;
  display:block;
  width:var(--hw-tile-w);
  max-width:100%;
  aspect-ratio:191 / 45;
  text-decoration:none;
  transition:transform .15s ease,filter .15s ease;
}
.hw-tile img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:left center;
  display:block;
}
.hw-tile:hover{transform:translateX(3px);filter:brightness(1.1);}

/* ==========================================================================
   How its works
   ========================================================================== */
.hw-how{
  background:var(--hw-page-bg,#000);
  width:100%;
  padding:56px 20px;
  text-align:center;
}
.hw-how__title{
  margin:0 0 40px;
  font-family:var(--hw-font);
  font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--hw-on-surface,#fff);
}
.hw-how__list{
  list-style:none;margin:0 auto;padding:0;
  max-width:var(--hw-container);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(20px,4vw,44px);
}
.hw-how__item{display:flex;flex-direction:column;align-items:center;gap:14px;width:120px;}
.hw-how__tile{
  width:80px;height:80px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--hw-gold-line,#9F853F);
  border-radius:4px;
  overflow:hidden;
}
.hw-how__tile img{max-width:60%;height:auto;}
.hw-how__label{
  font-family:var(--hw-font);
  font-size:var(--hw-fs-sm,1.2rem);font-weight:400;
  color:var(--hw-on-surface,#fff);
}

/* ==========================================================================
   Latest video + live transaction
   ========================================================================== */
/* Full-bleed: the legacy theme sets body{background:#fff}, so a centred
   max-width section leaves white bands either side. */
.hw-lv{
  background:var(--hw-page-bg,#000);
  width:100%;
  padding:20px 0 64px;
}
.hw-lv__inner{
  max-width:var(--hw-container);
  margin-inline:auto;
  padding-inline:20px;
  display:flex;flex-wrap:wrap;
  gap:clamp(20px,3vw,40px);
}
.hw-lv__col{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:14px;}
.hw-lv__title{
  margin:0;
  font-family:var(--hw-font);
  font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--hw-on-surface,#fff);
}
.hw-lv__frame{
  position:relative;
  aspect-ratio:16/10;
  border:2px solid var(--hw-gold-line,#9F853F);
  border-radius:4px;
  overflow:hidden;
  background:#0d0d0d;
}
.hw-lv__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.hw-txn{
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:6px;
  padding:12px;
  background:rgba(255,255,255,.02);
  display:flex;flex-direction:column;gap:12px;
}
.hw-txn__tabs{display:flex;gap:10px;}
.hw-txn__tab{
  flex:1 1 0;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:8px 12px;
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  font-family:var(--hw-font);
  font-size:var(--hw-fs-sm,1.2rem);font-weight:700;
  text-transform:uppercase;
  color:var(--hw-muted,#B3B3B3);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.hw-txn__tab svg{width:16px;height:16px;flex:0 0 auto;}
.hw-txn__tab:hover{color:var(--hw-gold,#FACF5A);border-color:var(--hw-gold-line,#9F853F);}
.hw-txn__tab.is-active{
  background:rgba(250,207,90,.10);
  border-color:var(--hw-gold-line,#9F853F);
  color:var(--hw-gold,#FACF5A);
}

/* overflow-y must be explicit: paired with a `visible` axis CSS promotes it to
   auto, and the ticker's translateY adds scrollable overflow -> stray scrollbar. */
.hw-txn__scroll{overflow-x:auto;overflow-y:hidden;}
.hw-txn__table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--hw-font);
  font-size:var(--hw-fs-sm,1.2rem);
  color:var(--hw-on-surface,#fff);
}
.hw-txn__table th{
  padding:8px 10px;
  text-align:center;
  font-weight:700;
  color:var(--hw-on-surface,#fff);
  border-bottom:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
}
.hw-txn__table td{
  padding:7px 10px;
  text-align:center;
  white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.05);
}
/* td.hw-txn__amt, not .hw-txn__amt — a bare class loses to
   `.hw-txn__table td`, which sets its own colour below. */
.hw-txn__table td.hw-txn__amt{color:var(--hw-txn-amt,#8FD18F);font-weight:700;}

/* Ticker rotation. Timings from luckybet777; 16px not 1rem because this theme's
   root is 10px (style.css:2). On the span — transform on a <td> is unreliable. */
@keyframes hwTxnOut{
  0%   {opacity:1;transform:translateY(0);}
  100% {opacity:0;transform:translateY(-16px);}
}
@keyframes hwTxnIn{
  0%   {opacity:0;transform:translateY(16px);}
  100% {opacity:1;transform:translateY(0);}
}
.hw-txn__val{display:inline-block;}
.hw-txn__val.is-in {animation:hwTxnIn .45s cubic-bezier(.22,1,.36,1) both;}
.hw-txn__val.is-out{animation:hwTxnOut .3s ease-in both;}
.hw-txn__time{color:var(--hw-muted,#B3B3B3);}

@media (max-width:768px){
  .hw-cat__panel{width:100%;}
  .hw-how__item{width:96px;}
  .hw-how__tile{width:64px;height:64px;}
}

/* ==========================================================================
   Slideshow seam
   default-style.css:96 gives .intro-slider-container / .intro-slide a fixed
   360px height and a #eee background, which shows as a light band and a gap
   above the notice bar. Match the page instead and close the seam.
   ========================================================================== */
.intro-slider-container,
.intro-slider-container .intro-slide{
  background-color:var(--hw-page-bg,#000);
}
#desktop-view .intro-slider-container{margin-bottom:0;}
#desktop-view .intro-slider-container .owl-carousel{margin-bottom:0;}
.hw-announce{margin-top:0;}

/* ==========================================================================
   Slideshow — show the full banner (no crop)
   Banners are authored at 1440x450 (3.2:1). default-style.css forces the slide
   to a fixed / viewport height (up to 750px) and paints it with
   background-size:cover, so the box is far taller than the art and cover has to
   crop the left/right edges. Drive the height from the banner's own aspect
   ratio instead, so the whole image is always visible.
   ========================================================================== */
#desktop-view .intro-slider-container,
#desktop-view .intro-slider-container .intro-slide{
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:1440 / 450;
}

/* Mobile: main-style.css:1198 pins the slide to 250px !important, so cover
   crops by a different amount at every width. The 480x390 banners only carry
   artwork between y71 and y266; the rest is padding. A 2:1 box at 32% keeps
   the width whole and trims that padding instead of the art. */
#mobile-view .intro-slider-container,
#mobile-view .intro-slider-container .intro-slide{
  height:auto !important;
  min-height:0;
  max-height:none;
}
/* Ratio on the slide only — the container stays auto so the dots below it are
   part of its height rather than overflowing the box. */
#mobile-view .intro-slider-container .intro-slide{
  aspect-ratio:2 / 1;
  background-size:cover;
  background-position:center 32%;
}
/* Dots sat 20px inside the slide, which lands on the banner text now that the
   box is cropped tight. Drop them out of the art instead of over it. */
#mobile-view .intro-slider-container .owl-simple.owl-nav-inside .owl-dots{
  position:static;
  margin:6px 0 2px;
}

/* ==========================================================================
   MOBILE — deliberately not designed yet.
   A separate mobile Figma is coming; these rules only stop the desktop
   layout from breaking outright on a narrow screen. Replace wholesale when
   the mobile frames arrive rather than building on them.
   ========================================================================== */

/* ==========================================================================
   MOBILE — from the mobile Figma (393px frame)
   ========================================================================== */

/* Category icon row + Upcoming Matches are mobile-only components; the two
   big desktop bands are their desktop equivalent. */
.hw-catrow,
.hw-match{display:none;}

@media (max-width:767px){

  /* Desktop bands off, mobile row on */
  .hw-cat{display:none;}
  .hw-catrow{display:block;background:var(--hw-page-bg,#000);padding:16px 10px 4px;}
  .hw-catrow ul{
    display:flex;justify-content:space-between;align-items:flex-start;
    gap:10px;list-style:none;margin:0;padding:0;
    max-width:374px;margin-inline:auto;
  }
  .hw-catrow li{flex:1 1 0;min-width:0;}
  .hw-catrow a{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    text-decoration:none;
  }
  .hw-catrow__icon{width:30px;height:30px;display:block;}
  .hw-catrow__icon img{width:100%;height:100%;object-fit:contain;display:block;}
  .hw-catrow__label{
    font-family:var(--hw-font);
    font-size:10px;line-height:1.2;font-weight:700;
    letter-spacing:-0.05em;text-align:center;
    color:var(--hw-on-surface,#fff);
  }

  /* Upcoming matches */
  .hw-match{
    display:block;background:var(--hw-page-bg,#000);
    padding:20px 10px 0;
  }
  .hw-match__title{
    margin:0 0 16px;
    font-family:var(--hw-font);
    font-size:18px;line-height:21px;font-weight:700;
    text-align:center;text-transform:uppercase;
    color:var(--hw-on-surface,#fff);
  }
  .hw-match__card{
    display:flex;align-items:flex-end;justify-content:center;
    gap:11px;padding:16px;
    max-width:374px;margin-inline:auto;
    border:1px solid #F8CD59;
    border-radius:20px;
  }
  .hw-match__side{
    flex:0 0 108px;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    text-align:center;
  }
  .hw-match__crest{
    width:108px;height:108px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #949595;border-radius:100px;
    overflow:hidden;
  }
  .hw-match__crest img{width:70px;height:70px;object-fit:contain;display:block;}
  .hw-match__team{
    font-family:var(--hw-font);font-size:12px;line-height:14px;font-weight:700;
    color:var(--hw-on-surface,#fff);
  }
  .hw-match__odds{
    font-family:var(--hw-font);font-size:16px;line-height:23px;font-weight:900;
    color:#FCC12E;
  }
  .hw-match__where{
    font-family:var(--hw-font);font-size:10px;line-height:11px;font-weight:700;
    color:var(--hw-muted,#B3B3B3);
  }
  .hw-match__mid{
    flex:0 0 100px;
    display:flex;flex-direction:column;align-items:center;gap:14px;
    padding:6px 0;
  }
  .hw-match__vs{
    font-family:var(--hw-font);font-size:36px;line-height:41px;font-weight:700;
    color:var(--hw-on-surface,#fff);
  }
  .hw-match__bet{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:30px;padding:8px 18px;
    background:#D7A634;border-radius:20px;
    font-family:var(--hw-font);font-size:10px;line-height:11px;font-weight:700;
    text-transform:uppercase;text-decoration:none;color:#000;
    white-space:nowrap;
  }
  .hw-match__when{
    font-family:var(--hw-font);font-size:10px;line-height:11px;
    font-weight:700;font-style:italic;text-align:center;
    color:var(--hw-muted,#B3B3B3);
  }

  /* Section headings all centre at 18px on mobile */
  .hw-how__title,
  .hw-lv__title{font-size:18px;line-height:21px;text-align:center;}

  .hw-how{padding:20px 10px;}
  .hw-how__list{gap:6px;}
  .hw-how__item{width:70px;gap:12px;}
  .hw-how__tile{width:70px;height:70px;border:0;}
  .hw-how__label{font-size:12px;}

  .hw-lv{padding:20px 0 0;}
  .hw-lv__inner{flex-direction:column;gap:16px;padding-inline:10px;}
  .hw-lv__frame{border:1px solid var(--hw-gold,#FACF5A);border-radius:15px;}
  .hw-txn{border:1px solid var(--hw-gold,#FACF5A);border-radius:15px;padding:10px;gap:15px;}
  .hw-txn__tabs{gap:10px;}
  .hw-txn__tab{border-radius:8px;font-size:10px;min-height:40px;}
  .hw-txn__tab.is-active{background:#000;box-shadow:inset 0 0 80px rgba(240,192,64,.3);}
  .hw-txn__table th{color:var(--hw-gold,#FACF5A);font-size:12px;}
  .hw-txn__table td{font-size:12px;color:#EEEEEE;}
  .hw-txn__table td.hw-txn__amt{color:var(--hw-txn-amt,#8FD18F);}
  .hw-txn__table td.hw-txn__time{color:#EEEEEE;}

  /* Notice bar has no READ ALL on mobile. The mobile frame insets its row by
     6px (381 wide in a 393 frame), unlike the full-bleed desktop bar. */
  .hw-announce{min-height:30px;height:30px;}
  .hw-announce__inner{padding:0 6px;}
}