/* ============================================================
   Westio (westio.games) - site overrides
   Funnel Display headings, Funnel Sans text.
   Graphite app ground, slate cards, the orange gradient of the Join Now
   and Claim buttons, with emerald and indigo accents from the Tuesday
   Reload and Showdown Tournament cards in the supplied app screens.
   Centred column, 1160 px. Welcome card left, copy right.
   ============================================================ */
:root {
  --font-display: "Funnel Display", "Segoe UI", Arial, sans-serif;
  --font-body: "Funnel Sans", "Segoe UI", Arial, sans-serif;
  --wg-or1: #ffb648;
  --wg-or2: #f1742c;
  --wg-or-soft: rgba(255, 166, 64, 0.12);
  --wg-ink: #101217;
  --wg-ink-2: #0b0d11;
  --wg-card: #181b22;
  --wg-card-2: #1f232c;
  --wg-card-3: #272c37;
  --wg-rule: #2c313c;
  --wg-white: #f6f4f0;
  --wg-text: #cfd3dc;
  --wg-faint: #959cab;
  --wg-emerald: #1d5a43;
  --wg-indigo: #34296e;
  --wg-brown: #5a2f14;
  --wg-on-or: #1d1208;
}

body {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.72;
  color: var(--wg-text);
  background: var(--wg-ink);
}
.container { max-width: 1160px; }

/* ---------- Header: app bar with pill buttons ---------- */
.site-header.wg-header {
  background: rgba(16, 18, 23, 0.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wg-rule);
}
.site-header .site-logo img { height: 32px; width: auto; }
.nav-main--desktop { gap: 6px; }
.nav-main--desktop a {
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 0.34rem 0.9rem; border-radius: 999px; color: var(--wg-text);
  background: var(--wg-card-2); border: 1px solid var(--wg-rule);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-main--desktop a:hover { color: var(--wg-on-or); background: linear-gradient(90deg, var(--wg-or1), var(--wg-or2)); border-color: transparent; }
.btn { font-family: var(--font-body); font-weight: 700; letter-spacing: 0; border-radius: 999px; }
.btn--primary, main a.btn--primary, .wg-register {
  background: linear-gradient(90deg, var(--wg-or1), var(--wg-or2)); color: var(--wg-on-or) !important;
  border: 0; box-shadow: 0 8px 22px rgba(241, 116, 44, 0.22);
}
.btn--primary:hover, main a.btn--primary:hover { background: linear-gradient(90deg, #ffc56a, #f58646); color: var(--wg-on-or) !important; }
.btn--outline { background: transparent; color: var(--wg-white); border: 1.5px solid var(--wg-or1); }
.btn--outline:hover { background: var(--wg-or-soft); color: #ffffff; border-color: var(--wg-or1); }

/* ---------- Language switcher: nine languages ---------- */
.lang-switcher__toggle { border-radius: 999px; border-color: var(--wg-rule); background: var(--wg-card-2); }
.wg-code {
  display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--wg-card-3); border: 1px solid var(--wg-rule);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--wg-or1);
}
.lang-switcher__toggle .lang-switcher__code { display: none; }
.lang-switcher__menu {
  width: 340px; max-width: 92vw; display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px;
  padding: 8px; background: var(--wg-card); border: 1px solid var(--wg-rule); border-radius: 16px;
  right: 0; left: auto; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.lang-switcher:not(.is-open) .lang-switcher__menu { display: none !important; }
.lang-switcher__menu a { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 6px 10px; color: var(--wg-white); }
.lang-switcher__menu a:hover { background: var(--wg-or-soft); }
.lang-switcher__menu li[aria-selected="true"] a { background: var(--wg-or-soft); }
.lang-switcher__menu li[aria-selected="true"] .wg-code { background: linear-gradient(90deg, var(--wg-or1), var(--wg-or2)); color: var(--wg-on-or); border-color: transparent; }
.nav-mobile { left: auto; }
.nav-mobile a { border-radius: 12px; }
.nav-mobile__langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.nav-mobile__lang { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; padding: 6px 8px; border-radius: 10px; }
.nav-mobile__lang.is-active { background: var(--wg-or-soft); }

/* ---------- Hero: welcome card left, copy right ---------- */
.wg-hero { padding: 34px 0 14px; background: transparent; border: 0; text-align: left; }
.wg-hero__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 44px; align-items: center;
  padding: 40px; border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(241, 116, 44, 0.22), transparent 46%),
    radial-gradient(circle at 0% 100%, rgba(52, 41, 110, 0.35), transparent 50%),
    var(--wg-card);
  border: 1px solid var(--wg-rule);
}
.wg-hero .hero__content { max-width: none; margin: 0; text-align: left; display: block; }
.wg-kicker {
  margin: 0 0 12px; font-family: var(--font-body); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wg-or1);
}
.wg-hero h1 {
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.95rem, 3.2vw, 2.85rem); line-height: 1.1; color: var(--wg-white); letter-spacing: -0.01em;
}
.wg-or { background: linear-gradient(90deg, var(--wg-or1), var(--wg-or2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wg-hero__lead p { margin: 0; max-width: 60ch; color: var(--wg-text); font-size: 1.12rem; }
.wg-hero__ctas { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.wg-chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.wg-chip {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 0.92rem; font-weight: 600;
  color: var(--wg-white); background: var(--wg-card-3); border: 1px solid var(--wg-rule); text-decoration: none;
}
.wg-chip:hover { border-color: var(--wg-or1); color: var(--wg-or1); }

/* Welcome card: brown to orange like the app banner */
.wg-offer {
  position: relative; padding: 24px 24px 20px; border-radius: 20px; color: var(--wg-white);
  background: linear-gradient(150deg, #7a3d12 0%, var(--wg-brown) 45%, #2a1a10 100%);
  border: 1px solid rgba(255, 182, 72, 0.35); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
}
.wg-offer::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 182, 72, 0.35), transparent 70%); pointer-events: none;
}
.wg-offer__eyebrow { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wg-or1); }
.wg-offer__total { margin: 0 0 16px; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1.15; color: #ffffff; }
.wg-offer__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.wg-offer__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(16, 18, 23, 0.42); }
.wg-offer__k { font-size: 0.9rem; color: #e7d6c4; }
.wg-offer__v { text-align: right; font-weight: 700; font-size: 0.96rem; line-height: 1.25; color: var(--wg-or1); }
.wg-offer__btn { display: inline-flex; width: 100%; justify-content: center; }
.wg-offer__note { margin: 12px 0 0; font-size: 0.82rem; line-height: 1.45; color: #d8c5b2; }
@media (max-width: 900px) {
  .wg-hero { padding: 18px 0 8px; }
  .wg-hero__grid { grid-template-columns: 1fr; gap: 24px; padding: 24px 18px; }
  .wg-hero__copy { order: -1; }
}

/* ---------- Key figures: six separate tiles ---------- */
.wg-stats { padding: 10px 0 20px; }
.wg-stats__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.wg-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 12px; border-radius: 16px;
  background: var(--wg-card); border: 1px solid var(--wg-rule);
}
.wg-stat__v { font-family: var(--font-display); font-weight: 800; font-size: 1.34rem; line-height: 1.2; color: var(--wg-or1); white-space: nowrap; }
.wg-stat__l { font-size: 0.86rem; line-height: 1.3; color: var(--wg-faint); }
@media (max-width: 1000px) { .wg-stats__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wg-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .wg-stat__v { font-size: 1.15rem; } }

/* ---------- Sections ---------- */
.content-section { padding: 50px 0 30px; background: transparent; border: 0; }
.content-section--alt { background: var(--wg-ink-2); border-top: 1px solid #1c2028; border-bottom: 1px solid #1c2028; }
.content-section > .container { max-width: 1160px; }
.content-section h2 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.18; letter-spacing: -0.01em;
  color: var(--wg-white); margin: 0 0 20px; padding: 0 0 0 18px; border: 0; max-width: none; position: relative;
}
.content-section h2::after { display: none !important; }
.content-section h2::before {
  content: "" !important; display: block !important; position: absolute; left: 0; top: 0.18em; bottom: 0.14em; width: 6px; border-radius: 6px;
  background: linear-gradient(180deg, var(--wg-or1), var(--wg-or2));
}
.content-section h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; line-height: 1.32;
  color: var(--wg-or1); margin: 28px 0 10px; padding: 0; border: 0; text-transform: none;
}
.content-section p { margin-bottom: 1rem; color: var(--wg-text); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.4rem; color: var(--wg-text); }
.content-section ul li::marker { color: var(--wg-or1); }
.content-section a:not(.btn) { color: var(--wg-or1); }
.content-section strong { color: #ffffff; }
.wg-callout {
  display: flow-root; margin: 6px 0 20px !important; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(29, 90, 67, 0.55), rgba(24, 27, 34, 0.9)); border: 1px solid #2d5a49; color: #e3ece7 !important;
}
@media (max-width: 900px) { .content-section { padding: 36px 0 20px; } }

/* ---------- Figure tiles inside sections ---------- */
.wg-figs { margin: 18px 0 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wg-fig { padding: 12px 14px; border-radius: 16px; background: var(--wg-card-2); border: 1px solid var(--wg-rule); }
.wg-fig:nth-child(2) { background: linear-gradient(140deg, rgba(29, 90, 67, 0.45), var(--wg-card-2)); }
.wg-fig:nth-child(3) { background: linear-gradient(140deg, rgba(52, 41, 110, 0.55), var(--wg-card-2)); }
.wg-fig:nth-child(4) { background: linear-gradient(140deg, rgba(90, 47, 20, 0.6), var(--wg-card-2)); }
.wg-fig__v { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; line-height: 1.2; color: var(--wg-white); }
.wg-fig__l { display: block; font-size: 0.88rem; line-height: 1.3; color: var(--wg-faint); }

/* ---------- Supplied artwork beside the text (transparent PNGs, 900 x 1000) ---------- */
.content-section .section-illus--transparent {
  width: 380px; max-width: 380px; height: auto; background: transparent; box-shadow: none; border-radius: 0;
}
.content-section .section-illus--right { float: right; margin: -20px -40px 0 0; }
.content-section .section-illus--left { float: left; margin: -20px 0 0 -40px; }
@media (max-width: 1260px) {
  .content-section .section-illus--right { margin-right: 0; }
  .content-section .section-illus--left { margin-left: 0; }
}
.wg-clear { clear: both; }
@media (max-width: 1000px) { .wg-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .content-section .section-illus--transparent,
  .content-section .section-illus--right,
  .content-section .section-illus--left { float: none; display: block; width: 360px; max-width: 100%; margin: -16px auto 0; shape-outside: none; }
}

/* ---------- Tables: slate head with orange labels ---------- */
.wg-table-wrap { clear: none; display: flow-root; margin: 22px 0 26px; border: 1px solid var(--wg-rule); border-radius: 18px; overflow: hidden; background: var(--wg-card); }
.wg-table-wrap .wg-table-title {
  margin: 0; padding: 12px 16px; max-width: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--wg-white); background: var(--wg-card-3);
}
.wg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .wg-table-wrap table { width: 100%; min-width: 480px; border-collapse: collapse; margin: 0; border: 0; display: table; font-size: 1rem; }
.content-section .wg-table-wrap th, .content-section .wg-table-wrap td { padding: 10px 16px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--wg-rule); white-space: normal; }
.content-section .wg-table-wrap tbody tr:last-child td { border-bottom: 0; }
.content-section .wg-table-wrap thead th {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wg-or1); background: var(--wg-card-2);
}
.content-section .wg-table-wrap tbody tr:hover td { background: rgba(255, 182, 72, 0.05); }
.content-section .wg-table-wrap td:first-child { color: var(--wg-white); font-weight: 600; }
.wg-table-note { font-size: 0.92rem; color: var(--wg-faint); padding: 10px 16px; margin: 0 !important; border-top: 1px solid var(--wg-rule); max-width: none !important; }
@media (max-width: 600px) {
  .content-section .wg-table-wrap table { min-width: 0; table-layout: fixed; font-size: 0.9rem; }
  .content-section .wg-table-wrap th, .content-section .wg-table-wrap td { padding: 8px 8px; overflow-wrap: break-word; hyphens: auto; }
  .content-section .wg-table-wrap thead th { font-size: 0.7rem; letter-spacing: 0.04em; }
}

/* ---------- Numbered steps: orange discs ---------- */
.wg-steps { display: flow-root; counter-reset: wgstep; list-style: none; margin: 14px 0 22px !important; padding: 0; }
.wg-steps li { counter-increment: wgstep; position: relative; padding: 3px 0 6px 46px; margin-bottom: 10px; }
.wg-steps li::before {
  content: counter(wgstep); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 0.92rem;
  color: var(--wg-on-or); background: linear-gradient(135deg, var(--wg-or1), var(--wg-or2));
}

/* ---------- FAQ: chevron cards ---------- */
.wg-faq { clear: both; margin: 18px 0 8px; display: grid; gap: 8px; }
.wg-faq details { border: 1px solid var(--wg-rule); border-radius: 16px; background: var(--wg-card); }
.wg-faq summary { cursor: pointer; list-style: none; padding: 14px 52px 14px 18px; position: relative; font-weight: 700; font-size: 1.04rem; color: var(--wg-white); }
.wg-faq summary::-webkit-details-marker { display: none; }
.wg-faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--wg-or1); border-bottom: 2px solid var(--wg-or1); transform: rotate(45deg); transition: transform 0.15s ease;
}
.wg-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.wg-faq details[open] { border-color: rgba(255, 182, 72, 0.45); }
.wg-faq details p { padding: 0 18px 16px; margin: 0; }

/* ---------- Join card, footer, sticky bar ---------- */
.wg-join { padding: 40px 0 48px; }
.wg-join__panel {
  display: flex; align-items: center; gap: 22px; padding: 24px 28px; border-radius: 22px;
  background: radial-gradient(circle at 100% 50%, rgba(241, 116, 44, 0.25), transparent 55%), var(--wg-card);
  border: 1px solid rgba(255, 182, 72, 0.35);
}
.wg-join__mark { flex-shrink: 0; width: 64px; height: 64px; }
.wg-join__text { flex: 1 1 auto; min-width: 0; }
.wg-join__text .wg-join__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; color: var(--wg-white); }
.wg-join__text p { margin: 0; max-width: 66ch; color: var(--wg-text); }
.wg-join .btn { flex-shrink: 0; }
@media (max-width: 760px) { .wg-join__panel { flex-direction: column; align-items: flex-start; padding: 20px 18px; } }
.site-footer.wg-footer { background: var(--wg-ink-2); border-top: 1px solid var(--wg-rule); }
.site-footer h5 { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; text-transform: none; color: var(--wg-or1); }
.site-footer .site-logo img { height: 30px; width: auto; }
.footer-badge { border-color: var(--wg-rule); border-radius: 999px; color: var(--wg-white); background: var(--wg-card-2); }
.sticky-cta { border-top: 1px solid var(--wg-rule); background: rgba(16, 18, 23, 0.96); }
.sticky-cta__text span:first-child { font-family: var(--font-display); font-weight: 800; color: var(--wg-white); }
.sticky-cta__bonus { color: var(--wg-or1); font-weight: 700; }

/* ---------- Anchors, mobile header ---------- */
.content-section[id] { scroll-margin-top: 80px; }
@media (max-width: 1180px) {
  .nav-main--desktop a { padding: 0.3rem 0.62rem; font-size: 0.88rem; }
  .nav-actions .wg-login { display: none; }
}
@media (max-width: 640px) {
  .site-header .container { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .site-header .site-logo img { height: 26px; width: auto; }
  .site-header .site-logo { min-width: 0; flex-shrink: 0; margin-right: 2px; }
  .nav-toggle { flex-shrink: 0; margin-left: 2px; }
  .btn--mobile-cta { margin-left: auto; font-size: 0.82rem !important; padding: 0.45rem 0.85rem !important; white-space: nowrap; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; }
  .sticky-cta__text span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.95rem; line-height: 1.3; }
  .sticky-cta .btn { white-space: nowrap; }
  .wg-figs { gap: 8px; }
}
@media (max-width: 380px) { .btn--mobile-cta { font-size: 0.72rem !important; padding: 0.42rem 0.55rem !important; } }

.content-section p, .content-section li, .content-section ul, .content-section ol { max-width: none; }
.content-section h2 { clear: none; overflow: visible; }
.content-section h3 { clear: none; display: flow-root; }
.content-section ul, .content-section ol.wg-steps { display: flow-root; padding-left: 1.2rem; margin-left: 0; }
.content-section ol.wg-steps { padding-left: 0; }
.hero h1, .content-section h2, .content-section h3, .wg-table-wrap .wg-table-title { text-transform: none; }
.content-section .wg-table-wrap table:has(tr > :nth-child(6)) th,
.content-section .wg-table-wrap table:has(tr > :nth-child(6)) td { white-space: nowrap; hyphens: none; }
.content-section .wg-table-wrap table:has(tr > :nth-child(6)) { table-layout: auto; width: max-content; min-width: 100%; }