/* ==================================================================
   wincrown.live - site sheet, loaded last, after base.css,
   style.css and theme4.css.

   Goal: a Theme 4 shell that reads as WinCrown and not as any
   other build in the repository.

   1. A green tinted near black ground, warm gold for anything
      actionable, and the brand's true red kept for the pill markers
      so gold and red never compete in the same element.
   2. Headings carry a small gold lozenge to their left, echoing the
      stones set in the crown mark, rather than a bar or a rule.
   3. Topic markers are deep red pills with pale gold lettering.
   4. Two column arithmetic block: the figure, then what it costs
      the reader to reach it.
   5. Supplied artwork keeps its transparent background and sits in
      a gold to green wash so it never floats on flat black.
   ================================================================== */

:root {
  --font-display: 'Segoe UI', 'Noto Sans', 'DejaVu Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Segoe UI', 'Noto Sans', 'DejaVu Sans', system-ui, -apple-system, sans-serif;
  --font-num: 'DejaVu Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --wc-rule: rgba(230, 208, 138, 0.26);
  --wc-rule-strong: rgba(255, 184, 51, 0.46);
  --wc-red-wash: rgba(213, 1, 31, 0.08);
  --wc-gold-wash: rgba(255, 184, 51, 0.09);
}

/* ---- 1. Sidebar: deep green gradient, gold hairline ------------- */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 264px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wi-sidebar {
    border-left: 0;
    border-right: 1px solid var(--color-border, #2d3427);
    background: linear-gradient(180deg, rgba(34, 39, 29, 0.62), rgba(8, 10, 7, 0.94));
  }
  .wi-main { min-width: 0; margin-inline: auto; }
}

.wi-sidebar__nav-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.6rem;
  color: var(--color-text-faint, #828a76);
}

.wi-sidebar__nav-label-text {
  display: inline-block;
  padding: 0 0 0.34rem;
  font-size: 0.63rem;
  letter-spacing: 1.9px;
  border-bottom: 2px solid var(--color-accent, #ffb833);
  color: var(--color-accent, #ffb833);
}

/* ---- 2. Headings ------------------------------------------------ */
h1, h2, h3, h4,
.hero h1,
.page-hero h1,
.wi-hero__title,
.wi-page-header h1,
.content-section h2,
.content-section h3,
.wi-seo__heading,
.wi-games-tabs__title,
.wi-payments__title,
.wi-faq__title,
.wi-cta-banner__title,
.wi-banking__title,
.section-title,
.seo-content h2,
.seo-content h3,
.wi-faq-item__question,
.faq-accordion__question {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: 0;
  hyphens: none;
}

h1, .wi-page-header h1, .wi-hero__title { line-height: 1.14; font-weight: 700; }
h2 { line-height: 1.28; }
h3 {
  line-height: 1.36;
  font-size: 1.05rem;
  color: var(--color-accent-secondary, #e6d08a);
}

.wi-main p,
.wi-main li,
.wi-main td,
.wi-main th {
  font-family: var(--font-body);
  hyphens: none;
  overflow-wrap: break-word;
}

.wi-page-header__eyebrow,
.wi-hero__eyebrow,
.wi-footer__col-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

/* A small gold lozenge stands to the left of every section heading,
   the same shape as the stones set into the crown mark. */
.wi-main .content-section .container > h2,
.wi-main .seo-content h2 {
  position: relative;
  border-bottom: 0;
  padding-bottom: 0;
  padding-left: 1.55rem;
  overflow: hidden;
}
.wi-main .content-section .container > h2::before,
.wi-main .seo-content h2::before {
  content: "";
  position: absolute;
  top: 0.36em;
  left: 1px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--color-accent-hover, #ffcd6b), var(--color-accent, #ffb833));
  border-radius: 2px;
}

/* ---- 3. Topic marker: deep red pill, pale gold lettering -------- */
.step {
  display: inline-block;
  vertical-align: 0.14em;
  margin-right: 12px;
  padding: 0.26em 0.62em;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-accent-secondary, #e6d08a);
  background: linear-gradient(180deg, var(--color-cta, #d5011f), var(--color-cta-hover, #870302));
  border: 1px solid rgba(255, 184, 51, 0.34);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- 4. Arithmetic block: the figure, then what it asks back ---- */
.pairs {
  margin: 1.7rem 0;
  border: 1px solid var(--color-border, #2d3427);
  border-radius: 8px;
  overflow: hidden;
}

.pr-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 0;
  border-bottom: 1px solid var(--color-border, #2d3427);
}
.pr-row:last-child { border-bottom: 0; }
.pr-row:nth-child(even) { background: rgba(34, 39, 29, 0.5); }

.pr-row > span {
  padding: 0.72rem 0.95rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted, #b0b6a5);
  border-right: 1px solid var(--color-border, #2d3427);
}
.pr-row > span:last-child { border-right: 0; }

.pr-key {
  color: var(--color-accent, #ffb833);
  font-family: var(--font-num);
  font-size: 0.86rem;
}
.pr-val { color: var(--color-text, #eceee8); }

.pr-head > span {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--color-text, #eceee8);
  background: rgba(8, 10, 7, 0.7);
}

@media (max-width: 700px) {
  .pr-row { grid-template-columns: 1fr; }
  .pr-row > span { border-right: 0; border-bottom: 1px dotted var(--wc-rule); }
  .pr-row > span:last-child { border-bottom: 0; }
  .pr-head { display: block; padding: 0.55rem 0.95rem 0.5rem; background: rgba(8, 10, 7, 0.7); }
  .pr-head > span { display: inline; padding: 0; border: 0; background: none; }
  .pr-head > span + span::before { content: "\00A0\2192\00A0"; color: var(--color-text-muted, #b0b6a5); }
  .pr-row:not(.pr-head) > .pr-val { border-left: 3px solid var(--color-accent, #ffb833); }
}

/* Figures inside running text */
.fig {
  font-family: var(--font-num);
  font-size: 0.93em;
  letter-spacing: -0.01em;
  color: var(--color-text, #eceee8);
}

/* ---- 5. Box for the terms the operator has not published -------- */
.blank-fields {
  margin: 1.8rem 0;
  padding: 1.1rem 1.3rem 0.95rem;
  background: var(--wc-red-wash);
  border: 1px solid var(--wc-rule);
  border-left: 3px solid var(--color-accent-secondary, #e6d08a);
  border-radius: 0 8px 8px 0;
}
.blank-fields h3 {
  margin: 0 0 0.6rem;
  font-size: 0.99rem;
  color: var(--color-text, #eceee8);
}
.blank-fields ul { margin: 0; padding-left: 1.15rem; }
.blank-fields li { margin-bottom: 0.42rem; }

/* ---- 6. Aside paragraph ---------------------------------------- */
p.aside {
  margin: 1.5rem 0;
  padding: 0.9rem 1.15rem;
  background: var(--color-surface, #181c15);
  border: 1px solid var(--wc-rule-strong);
  border-left: 3px solid var(--color-accent, #ffb833);
  border-radius: 0 8px 8px 0;
  font-size: 0.96rem;
  color: var(--color-text-muted, #b0b6a5);
}

/* ---- 7. Supplied artwork, transparent background --------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  background:
    radial-gradient(120% 78% at 30% 12%, rgba(255, 184, 51, 0.19) 0%, rgba(122, 196, 122, 0.06) 54%, rgba(8, 10, 7, 0) 100%);
  border-radius: 8px;
  filter: drop-shadow(0 14px 26px rgba(4, 6, 3, 0.62));
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 761px) {
  .shot { width: 296px; max-width: 42%; }
  .shot--right { float: right; margin-left: 1.9rem; }
  .shot--left  { float: left;  margin-right: 1.9rem; }
}

@media (max-width: 760px) {
  .shot {
    width: 100%;
    max-width: 330px;
    margin-inline: auto;
    float: none;
  }
}

/* A following section must not slide up beside a floated image. */
.wi-main .content-section .container::after {
  content: "";
  display: block;
  clear: both;
}

/* ---- 8. Hero recoloured ---------------------------------------- */
.wi-hero::before {
  background: linear-gradient(
    92deg,
    rgba(8, 10, 7, 0.96) 0%,
    rgba(28, 33, 23, 0.7) 50%,
    rgba(28, 33, 23, 0.08) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent, #ffb833);
  border-color: var(--wc-rule-strong);
  background: var(--wc-gold-wash);
  border-radius: 999px;
}

/* ---- 9. Sticky bar at the bottom ------------------------------- */
.sticky-cta {
  background: rgba(8, 10, 7, 0.96);
  border-top: 1px solid var(--color-accent-dark, #a8741a);
}
.sticky-cta__bonus {
  text-transform: none;
  letter-spacing: 0;
}

/* ---- 10. Accent details ---------------------------------------- */
.wi-sidebar__cta a { color: var(--color-cta-text, #1a1205); }
.wi-pay { border-radius: 6px; }
blockquote, .wi-infobox { border-left: 3px solid var(--color-accent, #ffb833); }

/* ---- 11. Tables, readable on a phone too ----------------------- */
.wi-main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.94rem;
}
.wi-main thead th {
  font-family: var(--font-display);
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--color-accent, #ffb833);
  border-bottom: 1px solid var(--color-accent-dark, #a8741a);
  padding: 0.6rem 0.7rem;
}
.wi-main tbody td {
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--color-border, #2d3427);
  vertical-align: top;
}
.wi-main tbody tr:nth-child(even) td {
  background: rgba(34, 39, 29, 0.5);
}

@media (max-width: 760px) {
  .wi-main table { display: block; overflow-x: auto; }
  .wi-main table thead,
  .wi-main table tbody { min-width: 34rem; }
}

/* ---- Sticky bar: keep it compact on narrow screens ------------- */
@media (max-width: 640px) {
  .sticky-cta__bonus {
    font-size: .74rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sticky-cta__text { min-width: 0; }
  .sticky-cta .container { gap: .6rem; }
}

/* ---- Table scroll container -------------------------------------
   The comparison tables carry four to six columns, which is more
   than a 390px viewport can hold. Wrapping them lets the table keep
   its own natural column widths and scroll sideways inside the
   column instead of pushing the whole page wider. */
.tw {
  margin: var(--space-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--wc-rule);
  background: rgba(8, 10, 7, 0.4);
}
.tw > table {
  margin: 0;
  border: 0;
  min-width: 34rem;
}
@media (max-width: 620px) {
  .tw { box-shadow: inset -12px 0 12px -12px rgba(0, 0, 0, 0.65); }
  .tw > table { min-width: 30rem; font-size: 0.92rem; }
  .tw > table th,
  .tw > table td { padding: 0.55rem 0.7rem; }
}

/* Brand tints for the chips theme4 does not colour. */
.wi-pay--neteller .wi-pay__name { color: #8dc63f; }
.wi-pay--skrill   .wi-pay__name { color: #c589dd; }
.wi-pay--maestro  .wi-pay__name { color: #6c9bd2; letter-spacing: 0.4px; }
.wi-pay--voucher  .wi-pay__name { color: #58c5c0; }
.wi-pay--ewallet  .wi-pay__name { color: #7fb0e8; }
.wi-pay--crypto   .wi-pay__name { color: #f7931a; }
.wi-pay--bank     .wi-pay__name { color: #a9c99a; letter-spacing: 0.6px; }

/* ---- Centred call to action -------------------------------------
   The h2 rule elsewhere on the site hangs a gold lozenge off the
   left edge of the heading. Inside a centred banner that lozenge
   detaches from the text and reads as a stray mark, so it is
   removed here and the heading keeps the centred alignment. */
.cta-banner h2::before { display: none; }
.cta-banner h2 { padding-left: 0; text-align: center; }
.cta-banner .container--narrow p { max-width: 46rem; margin-left: auto; margin-right: auto; }

/* ---- Payments strip, wrapped -------------------------------------
   Nine methods will not fit the content column at any viewport, and
   the theme default scrolls them sideways, which leaves the last
   chip sliced against the panel border and hides the rest behind a
   gesture. Wrapping onto a second row keeps every method legible at
   a glance, which is the only reason the strip is here. */
.wi-payments__strip {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 10px;
}
.wi-payments__strip .wi-pay { flex: 1 1 auto; }
@media (max-width: 520px) {
  .wi-payments__strip .wi-pay { min-width: 88px; }
}

/* ---- Optional table columns on a phone ---------------------------
   The comparison tables carry a third explanatory column that is
   useful on a desktop and merely squeezes the first two on a phone.
   Below 760px that column is dropped and the table stops needing a
   sideways gesture at all. */
@media (max-width: 760px) {
  .tw table .opt { display: none; }
  .tw table { font-size: 0.83rem; }
  .tw table th,
  .tw table td { padding-left: 0.6rem; padding-right: 0.6rem; }
}

@media (max-width: 460px) {
  .tw table { font-size: 0.76rem; }
  .tw > table,
  .wi-main table tbody { min-width: 0; }
  .tw table th { white-space: normal; line-height: 1.25; }
  .tw table th,
  .tw table td { padding-left: 0.48rem; padding-right: 0.48rem; }
  .tw { box-shadow: none; }
}

/* ---- The question block gets a full section heading --------------
   Left as the theme delivers it, the question block heading is a
   size smaller than every other heading on the page and carries no
   marker, so it reads as a stray label rather than the last part of
   the argument. It is given the same weight and the same lozenge. */
.wi-faq-accordion__title {
  position: relative;
  margin-bottom: var(--space-6);
  padding-left: 1.55rem;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.4px;
  text-align: left;
  color: var(--color-text, #eceee8);
}
.wi-faq-accordion__title::before {
  content: "";
  position: absolute;
  top: 0.36em;
  left: 1px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--color-accent-hover, #ffcd6b), var(--color-accent, #ffb833));
  border-radius: 2px;
}

/* ---- Three column tables take the full content width -------------
   A two column table sits happily next to a floated figure. A three
   column one does not: the last column loses room and its wording
   ends up clipped against the figure. Any table carrying a third
   column therefore drops below the figure and uses the whole width. */
.tw--wide { clear: both; }

/* ---- One action colour, and it is the red ------------------------
   The theme paints its own buttons with the accent, which here is
   the gold. Near white lettering on that gold is close to illegible
   and it also leaves the page with no single colour that means
   "this is the action". The brand already answers that: the red.
   Every primary action is therefore red, and the gold goes back to
   doing what it does best, which is marking and underlining. */
.wi-hero__cta--primary,
.wi-topbar-auth__btn--solid,
.wi-mobile-topbar__cta,
.wi-sidebar__cta > a,
.wi-sidebar__cta a {
  background: var(--color-cta, #d5011f);
  color: var(--color-cta-text, #fff6f6);
  border-color: var(--color-cta, #d5011f);
}
.wi-hero__cta--primary:hover,
.wi-topbar-auth__btn--solid:hover,
.wi-mobile-topbar__cta:hover,
.wi-sidebar__cta > a:hover,
.wi-sidebar__cta a:hover {
  background: var(--color-cta-hover, #f0263f);
  border-color: var(--color-cta-hover, #f0263f);
  color: var(--color-cta-text, #fff6f6);
}

/* The active navigation row is tinted with a leftover theme orange
   that belongs to no part of this palette. It becomes a gold wash. */
.wi-sidebar__nav a.active {
  background: rgba(255, 184, 51, 0.13);
}

/* ---- Tables whose third column is the whole point ----------------
   Dropping the optional column on a phone is right almost everywhere,
   but not where that column carries the answer the section promises.
   Those tables keep all three and pay for it with a smaller size. */
@media (max-width: 760px) {
  .tw--keep-all table .opt { display: table-cell; }
  .tw--keep-all { overflow-x: visible; }
  .tw--keep-all table {
    font-size: 0.78rem;
    table-layout: fixed;
    width: 100%;
    min-width: 0;
  }
  .tw--keep-all table th,
  .tw--keep-all table td {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    white-space: normal;
  }
  .tw--keep-all table th:nth-child(1),
  .tw--keep-all table td:nth-child(1) { width: 32%; }
  .tw--keep-all table th:nth-child(2),
  .tw--keep-all table td:nth-child(2) { width: 21%; }
  .tw--keep-all table th:nth-child(3),
  .tw--keep-all table td:nth-child(3) { width: 47%; }
  .tw--keep-all table th,
  .tw--keep-all table td { padding-left: 0.42rem; padding-right: 0.42rem; }
}
@media (max-width: 460px) {
  .tw--keep-all table { font-size: 0.66rem; }
  .tw--keep-all table th,
  .tw--keep-all table td { padding-left: 0.26rem; padding-right: 0.26rem; }
}