/* ==========================================================================
   House of Winners — 4D live results page

   One card per pool, each holding the draw table exactly as it was published.
   The markup is generated from a mirrored copy of the source table
   (page_4dresult_view.php), so these rules have to hold for every shape the
   pools come in: a 5-wide prize grid (Magnum, Toto, Da Ma Cai), two-column
   label/value rows (jackpot pools), a row of lotto balls, and Singapore Toto's
   three-column prize-share table. Nothing here is keyed to a pool name —
   layout comes from the cells' own colspans.
   ========================================================================== */

.hw-fourd{
  background:var(--hw-page-bg,#000);
  padding:40px 0 60px;
}

.hw-fourd__inner{
  width:100%;
  max-width:var(--hw-container,1250px);
  margin-inline:auto;
  padding:0 20px;
}

/* --------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */
.hw-fourd__head{
  text-align:center;
  margin:0 0 30px;
}

.hw-fourd__title{
  margin:0 0 8px;
  font-family:var(--hw-font);
  font-size:3.2rem;
  font-weight:var(--hw-fw,700);
  line-height:1.2;
  background:var(--hw-gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hw-fourd__empty{
  margin:60px 0;
  text-align:center;
  color:var(--hw-muted,#B3B3B3);
  font-size:var(--hw-fs,1.4rem);
}

/* --------------------------------------------------------------------------
   Grid
   A plain grid, so cards line up in rows the way the source board does.
   Three columns, matching the source board. Fixed count rather than auto-fill
   on a minimum width, because the point is to mirror that layout — the card
   simply gets whatever third of the container it lands in.

   Rows are as tall as their tallest card and cards sit at the top of the row,
   so a short card leaves space under it. That is the trade for having every
   card start on the same line — packing them tighter costs the alignment.
   -------------------------------------------------------------------------- */
.hw-fourd__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--hw-gap-md,15px);
  align-items:start;
}

.hw-fourd__card{
  border:1px solid var(--hw-rule,#4D4E4C);
  border-radius:var(--hw-radius,5px);
  background:var(--hw-surface-raised,#1C1C1C);
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   Banner
   --hw-fourd-brand is the operator's own colour, carried over from the source
   markup (resultRedBg → red, resultNavyBg → navy, …) and set per card below.
   Every card falls back to the site gold so an unrecognised pool still looks
   deliberate.
   -------------------------------------------------------------------------- */
.hw-fourd__banner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--hw-gap-xs,5px);
  padding:12px 10px;
  background:var(--hw-fourd-brand,var(--hw-gold,#FACF5A));
  color:var(--hw-fourd-ink,#fff);
  text-align:center;
}

.hw-fourd__logo{
  max-width:120px;
  max-height:34px;
  object-fit:contain;
}

.hw-fourd__pool{
  font-size:var(--hw-fs,1.4rem);
  font-weight:var(--hw-fw,700);
  line-height:var(--hw-lh,1.3);
}

.hw-fourd__date{
  font-size:var(--hw-fs-sm,1.2rem);
  opacity:.85;
}

/* Operator colours, taken verbatim from the source board (style-v4.css:
   .resultYellowBg and friends) so the cards read as the same product.
   --hw-fourd-ink rides along because two of them are light enough to need
   black text — white on #FF0 is unreadable. */
.hw-fourd__card--yellow{ --hw-fourd-brand:#FF0;     --hw-fourd-ink:#000; }
.hw-fourd__card--orange{ --hw-fourd-brand:#ffc107;  --hw-fourd-ink:#000; }
.hw-fourd__card--red   { --hw-fourd-brand:#AD0006; }
.hw-fourd__card--navy  { --hw-fourd-brand:navy; }
.hw-fourd__card--blue  { --hw-fourd-brand:#12689B; }
.hw-fourd__card--green { --hw-fourd-brand:#2f9505; }
.hw-fourd__card--green2{ --hw-fourd-brand:#083e04; }

/* --------------------------------------------------------------------------
   Draw table
   table-layout:fixed so the five prize columns stay equal — with auto layout a
   "----" filler column collapses and the numbers stop lining up between rows.
   -------------------------------------------------------------------------- */
.hw-fourd__table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  font-family:var(--hw-font);
}

.hw-fourd__th{
  padding:6px 8px;
  background:#000;
  color:var(--hw-gold,#FACF5A);
  font-size:var(--hw-fs-sm,1.2rem);
  font-weight:var(--hw-fw,700);
  text-align:center;
  letter-spacing:.02em;
}

.hw-fourd__td{
  padding:7px 4px;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--hw-on-surface,#fff);
  font-size:var(--hw-fs,1.4rem);
  font-weight:var(--hw-fw,700);
  text-align:center;
  /* Prize numbers only ever differ by digit; tabular figures keep the columns
     from jittering between rows. */
  font-variant-numeric:tabular-nums;
  word-break:break-word;
}

/* Filler cells the source prints as "----". Present so the grid still aligns,
   dimmed so they don't read as a result. */
.hw-fourd__td--empty{
  color:var(--hw-rule,#4D4E4C);
  font-weight:400;
}

/* Lotto balls — Magnum's daily draw, Sabah Lotto, Toto 6/58 and friends. */
.hw-fourd__ball{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* sized so a nine-ball draw still fits one line in the narrowest card */
  min-width:24px;
  height:24px;
  margin:1px 0;
  padding:0 3px;
  border-radius:50%;
  background:var(--hw-fourd-brand,var(--hw-gold,#FACF5A));
  color:var(--hw-fourd-ink,#fff);
  font-size:var(--hw-fs-sm,1.2rem);
  line-height:1;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width:991px){
  .hw-fourd__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:575px){
  .hw-fourd{ padding:24px 0 40px; }
  .hw-fourd__inner{ padding:0 12px; }
  .hw-fourd__title{ font-size:2.4rem; }
  .hw-fourd__grid{ grid-template-columns:1fr; }
}