/* Kumuls World Cup page (shared/kumuls/_page.php), mobile + desktop.
   Always dark, in a 540px column like the mock (kumuls-world-cup.html). */
.ku-page {
  --ku-bg: #0c0c0f;
  --ku-panel: #16161b;
  --ku-panel2: #1c1c22;
  --ku-line: rgba(255, 255, 255, 0.08);
  --ku-gold: #f0c24b;
  --ku-gold-soft: rgba(240, 194, 75, 0.14);
  --ku-gold-line: rgba(240, 194, 75, 0.38);
  --ku-btn: linear-gradient(180deg, #f8d56a 0%, #f0c24b 45%, #dda63c 100%);
  --ku-muted: #8b8b99;
  --ku-red: #e5393f;
  --ku-png-red: #ce1126;
  --ku-png-gold: #fcd116;

  background: var(--ku-bg);
  color: #fff;
  font-family: var(--font-brand);
  line-height: 1.5;
}
.ku-defs { position: absolute; }

.ku-stripe {
  height: 0.25rem;
  background: linear-gradient(90deg, var(--ku-png-red) 0 33%, #000 33% 66%, var(--ku-png-gold) 66%);
}
.ku-wrap {
  max-width: 33.75rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---------- shared bits ---------- */
.ku-panel {
  border: 0.0625rem solid var(--ku-line);
  border-radius: 1.125rem;
  background: var(--ku-panel);
}
.ku-btn {
  display: block;
  padding: 0.875rem;
  border-radius: 0.625rem;
  background: var(--ku-btn);
  box-shadow: 0 0.25rem 0.875rem rgba(240, 194, 75, 0.25);
  color: #1a1405;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.ku-btn.is-line {
  border: 0.09375rem solid var(--ku-gold);
  background: transparent;
  box-shadow: none;
  color: var(--ku-gold);
}
.ku-btn[aria-disabled="true"] {
  background: #2a2a31;
  box-shadow: none;
  color: #6f6f7a;
  pointer-events: none;
}
.ku-live {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border: 0.0625rem solid rgba(229, 57, 63, 0.45);
  border-radius: 6.1875rem;
  background: rgba(229, 57, 63, 0.14);
  color: var(--ku-red);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09375rem;
}
.ku-live i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--ku-red);
  animation: ku-blink 1.4s infinite;
}
@keyframes ku-blink { 50% { opacity: 0.25; } }

.ku-sec { padding: 1.375rem 0; }
.ku-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}
.ku-head h2 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.375rem;
  font-weight: 600;
}
.ku-head h2 svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--ku-gold);
}

/* ---------- top bar ---------- */
.ku-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 0;
}
.ku-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border: 0.0625rem solid var(--ku-gold-line);
  border-radius: 6.1875rem;
  background: var(--ku-gold-soft);
  color: var(--ku-gold);
  font-size: 0.875rem;
  font-weight: 600;
}
.ku-back svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* ---------- hero + facts ---------- */
.ku-hero {
  margin-top: 0.25rem;
  padding: 1.25rem 1.125rem;
  text-align: center;
}
.ku-hero h1 {
  font-size: 1.5rem;
  font-weight: 700;
}
.ku-hero .ku-btn + .ku-btn { margin-top: 0.625rem; }
.ku-prize {
  margin: 0.875rem 0;
  padding: 0.875rem;
  border: 0.0625rem solid var(--ku-gold-line);
  border-radius: 0.875rem;
  background: radial-gradient(ellipse at 50% 0%, rgba(240, 194, 75, 0.22), transparent 70%), var(--ku-panel2);
}
.ku-amt {
  background: var(--ku-btn);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
}
.ku-prize-lbl {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.0625rem;
}
.ku-credit {
  margin-top: 0.5rem;
  color: #ddd;
  font-size: 0.8125rem;
}
.ku-credit b { color: var(--ku-gold); }

.ku-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.ku-fact {
  padding: 0.75rem 0.375rem;
  border-radius: 0.875rem;
  text-align: center;
}
.ku-fact b {
  display: block;
  color: var(--ku-gold);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
}
.ku-fact span {
  display: block;
  margin-top: 0.125rem;
  color: var(--ku-muted);
  font-size: 0.71875rem;
  line-height: 1.3;
}

/* ---------- nation block ---------- */
.ku-nation {
  position: relative;
  overflow: hidden;
  border: 0.09375rem solid rgba(252, 209, 22, 0.55);
  border-radius: 1.25rem;
  background: var(--ku-flag) 62% 30% / cover no-repeat;
  box-shadow: 0 0 0 0.0625rem #000, 0 0.75rem 2.125rem rgba(206, 17, 38, 0.25);
}
.ku-nation::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.15) 100%);
}
.ku-nation-copy {
  position: relative;
  max-width: 80%;
  padding: 1.375rem 1.125rem 0.25rem;
}
.ku-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background: var(--ku-png-gold);
  color: #000;
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.125rem;
}
.ku-tag img {
  width: 1rem;
  height: 0.75rem;
  border-radius: 0.125rem;
  object-fit: cover;
}
.ku-nation h3 {
  margin-top: 0.5rem;
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.6);
}
.ku-nation h3 em {
  color: var(--ku-png-gold);
  font-style: normal;
}
.ku-nation p {
  margin-top: 0.5rem;
  color: #ececec;
  font-size: 0.875rem;
  text-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.7);
}
.ku-love {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.375rem 0.875rem;
  border: 0.09375rem solid var(--ku-png-gold);
  border-radius: 6.1875rem;
  background: rgba(0, 0, 0, 0.55);
  color: var(--ku-png-gold);
  font-size: 0.9375rem;
  font-weight: 900;
  letter-spacing: 0.09375rem;
  text-transform: uppercase;
  text-shadow: 0 0 0.75rem rgba(252, 209, 22, 0.4);
}
.ku-love svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--ku-png-red);
  filter: drop-shadow(0 0 0.25rem rgba(206, 17, 38, 0.8));
}
.ku-roar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.125rem;
  text-align: center;
}
.ku-roar div {
  padding: 0.5rem 0.25rem;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.0625rem;
  line-height: 1.15;
  text-transform: uppercase;
}
.ku-roar div:nth-child(1) { background: var(--ku-png-red); color: #fff; }
.ku-roar div:nth-child(2) { background: #000; color: var(--ku-png-gold); }
.ku-roar div:nth-child(3) { background: var(--ku-png-gold); color: #000; }
.ku-roar-big {
  position: relative;
  padding: 0.5625rem 0.625rem;
  background: #000;
  color: var(--ku-png-gold);
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: 0.125rem;
  text-align: center;
  text-shadow: 0 0 1.125rem rgba(252, 209, 22, 0.45);
}

/* ---------- match cards ---------- */
.ku-match {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.875rem;
}
.ku-match[data-state="open"] { border-color: rgba(229, 57, 63, 0.5); }
.ku-match[data-state="closed"] .ku-match-top,
.ku-match[data-state="closed"] .ku-match-info {
  opacity: 0.55;
  filter: grayscale(0.9);
}
.ku-match-top {
  padding: 0.875rem 0.875rem 1rem;
  background: linear-gradient(160deg, #1d1530, #120f1c);
}
.ku-match-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.ku-round {
  color: var(--ku-gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.125rem;
}
.ku-pill {
  padding: 0.1875rem 0.625rem;
  border-radius: 0.375rem;
  background: #3a3a44;
  color: #bbb;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.0625rem;
}
.ku-match[data-state="open"] .ku-pill {
  background: var(--ku-red);
  color: #fff;
}
.ku-match[data-state="open"] .ku-pill::before { content: '● '; }
.ku-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
}
.ku-team { text-align: center; }
.ku-team img {
  width: 4.75rem;
  height: 3.1875rem;
  margin: 0 auto;
  object-fit: cover;
  border: 0.0625rem solid rgba(255, 255, 255, 0.18);
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
}
.ku-team img.is-samoa { object-position: left; }
.ku-team b {
  display: block;
  margin-top: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03125rem;
}
.ku-vs {
  color: var(--ku-gold);
  font-size: 1.375rem;
  font-weight: 900;
}
.ku-match-info {
  display: grid;
  gap: 0.1875rem;
  padding: 0.75rem 1rem 0;
  color: #cfcfd8;
  font-size: 0.84375rem;
}
.ku-match-info div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ku-match-info svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--ku-gold);
  stroke-width: 2;
}
.ku-state {
  margin: 0.75rem 1rem;
  color: var(--ku-gold);
  font-size: 0.8125rem;
  font-weight: 500;
}
.ku-state b { font-variant-numeric: tabular-nums; }
.ku-via {
  display: block;
  margin-top: 0.25rem;
  color: var(--ku-muted);
  font-size: 0.78125rem;
  font-weight: 400;
}
.ku-match:not([data-state="open"]) .ku-via { display: none; }
.ku-match .ku-btn { margin: 0 1rem 1rem; }
.ku-fine {
  color: var(--ku-muted);
  font-size: 0.75rem;
  text-align: center;
}

/* ---------- how to bet ---------- */
.ku-first {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.625rem;
  padding: 0.875rem 1rem;
  border-color: var(--ku-gold-line);
  background: linear-gradient(90deg, rgba(240, 194, 75, 0.12), var(--ku-panel) 60%);
}
.ku-first-ic {
  display: grid;
  place-items: center;
  flex: 0 0 2.25rem;
  height: 2.25rem;
  border: 0.125rem solid var(--ku-gold);
  border-radius: 50%;
  color: var(--ku-gold);
  font-weight: 800;
}
.ku-first p {
  color: #ddd;
  font-size: 0.875rem;
}
.ku-first b { color: var(--ku-gold); }

.ku-steps {
  display: grid;
  gap: 0.5rem;
  list-style: none;
}
.ku-steps li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
}
.ku-steps span {
  display: grid;
  place-items: center;
  flex: 0 0 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--ku-btn);
  color: #1a1405;
  font-size: 0.875rem;
  font-weight: 800;
}

.ku-shot {
  margin-top: 0.75rem;
  padding: 1rem;
}
.ku-shot h4 {
  margin-bottom: 0.625rem;
  color: var(--ku-gold);
  font-size: 0.75rem;
  letter-spacing: 0.125rem;
}
.ku-shot-box {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border: 0.0625rem solid var(--ku-gold-line);
  border-radius: 0.625rem;
  background: #000;
  cursor: zoom-in;
}
.ku-shot-box img { width: 100%; }
.ku-video {
  display: block;
  width: 100%;
  border: 0.0625rem solid var(--ku-gold-line);
  border-radius: 0.625rem;
  background: #000;
}
.ku-note {
  margin-top: 0.5rem;
  color: var(--ku-muted);
  font-size: 0.78125rem;
}
.ku-hl {
  position: absolute;
  border: 0.125rem solid var(--ku-gold);
  border-radius: 0.375rem;
  box-shadow: 0 0 0.625rem rgba(240, 194, 75, 0.6);
}
/* tapping-finger markers, numbered like the steps */
.ku-mk {
  position: absolute;
  width: 1.5rem;
  height: 1.75rem;
  filter: drop-shadow(0 0.125rem 0.1875rem rgba(0, 0, 0, 0.7));
  animation: ku-tap 1.4s ease-in-out infinite;
}
.ku-hand {
  display: block;
  width: 100%;
  height: 100%;
}
.ku-mk b {
  position: absolute;
  right: -0.4375rem;
  bottom: -0.3125rem;
  min-width: 1.0625rem;
  height: 1.0625rem;
  padding: 0 0.25rem;
  border: 0.09375rem solid #fff;
  border-radius: 6.1875rem;
  background: var(--ku-red);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.0625rem;
  text-align: center;
}
@keyframes ku-tap {
  0%, 100% { transform: translate(-44%, -2%); }
  50% { transform: translate(-44%, 10%); }
}

.ku-bet {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
  padding: 0.9375rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
.ku-bet svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}
.ku-help {
  margin-top: 0.75rem;
  color: #ccc;
  font-size: 0.875rem;
  text-align: center;
}
.ku-help a {
  color: var(--ku-gold);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- screenshot lightbox ---------- */
.ku-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  overflow: auto;
  background: #050506;
}
.ku-lightbox[hidden] { display: none; }
.ku-lightbox-inner {
  position: relative;
  width: 56.25rem;
  margin: 3.75rem 1rem 1.875rem;
}
.ku-lightbox-inner img { border-radius: 0.5rem; }
.ku-lightbox .ku-mk {
  width: 2.375rem;
  height: 2.75rem;
}
.ku-lightbox .ku-mk b {
  right: -0.5625rem;
  bottom: -0.375rem;
  min-width: 1.375rem;
  height: 1.375rem;
  font-size: 0.8125rem;
  line-height: 1.375rem;
}
.ku-lightbox-hint {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 1.375rem 1rem 0.875rem;
  background: #050506;
  color: var(--ku-muted);
  font-size: 0.78125rem;
}
.ku-lightbox-close {
  position: fixed;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border: 0.0625rem solid var(--ku-gold-line);
  border-radius: 50%;
  background: var(--ku-panel2);
  color: var(--ku-gold);
  font-size: 1.375rem;
}

/* ---------- share ---------- */
.ku-share {
  padding-bottom: 0.625rem;
  text-align: center;
}
.ku-share h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.ku-share h2 svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--ku-gold);
}
.ku-share-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.875rem;
}
.ku-share-row button {
  display: grid;
  place-items: center;
  width: 3.125rem;
  height: 3.125rem;
  border: 0.0625rem solid var(--ku-gold-line);
  border-radius: 50%;
  background: var(--ku-panel2);
}
.ku-share-row svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: var(--ku-gold);
}

/* ---------- rules + footer ---------- */
.ku-rules {
  padding: 1rem 1rem 1rem 2.125rem;
  list-style: disc;
}
.ku-rules li {
  margin-bottom: 0.4375rem;
  color: #c9c9d3;
  font-size: 0.84375rem;
}
.ku-rules li::marker { color: var(--ku-gold); }
.ku-rules b { color: var(--ku-gold); }
.ku-foot {
  padding: 1.25rem 0 2.5rem;
  color: var(--ku-muted);
  font-size: 0.75rem;
  text-align: center;
}

@media (max-width: 23.125rem) {
  .ku-team img { width: 4rem; height: 2.6875rem; }
  .ku-nation-copy { max-width: 88%; }
  .ku-nation h3 { font-size: 1.4375rem; }
}

/* Desktop: clear the taller fixed header when jumping to a section. */
.d-main .ku-sec,
.d-main .ku-match { scroll-margin-top: calc(var(--d-hdr-h) - 5rem + 1rem); }

/* ---------- PC (desktop view only): wide page, two columns ---------- */
.d-main .ku-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "top     top"
    "hero    nation"
    "facts   facts"
    "matches matches"
    "how     how"
    "share   rules"
    "foot    foot";
  column-gap: 1.75rem;
  max-width: 72rem;
  padding: 0 1.5rem;
}
.d-main .ku-topbar       { grid-area: top; }
.d-main .ku-hero         { grid-area: hero; display: flex; flex-direction: column; justify-content: center; margin-top: 0; }
.d-main .ku-sec-nation   { grid-area: nation; padding: 0; }
.d-main .ku-facts        { grid-area: facts; margin-top: 1.25rem; }
.d-main #ku-matches      { grid-area: matches; }
.d-main #ku-how          { grid-area: how; }
.d-main .ku-share        { grid-area: share; align-self: start; }
.d-main .ku-sec-rules    { grid-area: rules; }
.d-main .ku-foot         { grid-area: foot; }

/* hero + nation the same height, side by side */
.d-main .ku-nation { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.d-main .ku-hero h1 { font-size: 1.75rem; }
.d-main .ku-amt { font-size: 4.5rem; }

/* both matches side by side */
.d-main #ku-matches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.25rem;
}
.d-main #ku-matches > .ku-head,
.d-main #ku-matches > .ku-fine { grid-column: 1 / -1; }
.d-main .ku-match { display: flex; flex-direction: column; margin-bottom: 0; }
.d-main .ku-match .ku-btn { margin-top: auto; }
.d-main #ku-matches > .ku-fine { margin-top: 0.875rem; }

/* how to bet: steps + Bet Now on the left, picture + video on the right */
.d-main #ku-how {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 1.75rem;
  align-items: start;
}
.d-main #ku-how > .ku-head  { grid-column: 1 / -1; }
.d-main .ku-how-steps       { grid-column: 1; grid-row: 2; }
.d-main .ku-how-cta         { grid-column: 1; grid-row: 3; }
.d-main .ku-how-media       { grid-column: 2; grid-row: 2 / span 2; }
.d-main .ku-how-media .ku-shot:first-child { margin-top: 0; }
.d-main .ku-share { padding-top: 1.375rem; }