/* Liverpool888 CASINO - light, gold-forward casino. Hero-led + horizontal pill tabs + 2-col main.
   Namespaced .lc- */
:root{
  --red:#c8102e; --red-2:#9c0c23; --red-ink:#6f0817;
  --gold:#e6b325; --gold-2:#f6d479; --gold-ink:#5a4100;
  --green:#0b6b53; --green-2:#0e8265;
  --ink:#191b1f; --mut:#6a7079; --line:#e6e8ec; --bg:#f4f5f7; --card:#fff; --soft:#fff6e6;
  --font:"Segoe UI",Roboto,Arial,"Noto Sans SC",sans-serif;
  --r:14px; --sh:0 2px 10px rgba(20,22,28,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.55;padding-bottom:64px}
a{color:var(--red);text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:1.25}
.lc-wrap{max-width:1240px;margin:0 auto;padding:0 16px}

/* ---------- header ---------- */
.lc-top{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--gold);box-shadow:var(--sh)}
.lc-top .lc-wrap{display:flex;align-items:center;gap:16px;height:62px}
.lc-logo{display:flex;align-items:center;gap:9px;flex:none}
.lc-logo svg{width:34px;height:40px}
.lc-logo b{font-family:"Arial Black",Arial,sans-serif;font-size:20px;color:var(--red);letter-spacing:.01em;white-space:nowrap;line-height:1}
.lc-logo b i{font-style:normal;color:var(--gold-ink);background:var(--gold-2);padding:0 4px;border-radius:5px}
.lc-menu{display:flex;gap:4px;margin-left:8px}
.lc-menu a{padding:9px 12px;font-size:14px;font-weight:700;color:var(--ink);border-radius:9px;white-space:nowrap}
.lc-menu a:hover{background:var(--soft)}
.lc-menu a[aria-current]{color:var(--red);background:var(--red-soft,#fdecef)}
.lc-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.lc-lang{display:flex;gap:3px}
.lc-lang a{font-size:12px;font-weight:700;color:var(--mut);border:1px solid var(--line);border-radius:7px;padding:8px 9px;line-height:1;white-space:nowrap}
.lc-lang a.on{color:#fff;background:var(--red);border-color:var(--red)}
.lc-burger{display:none;background:none;border:0;font-size:26px;color:var(--ink);cursor:pointer;padding:4px 8px}
.lc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:800;border-radius:10px;padding:10px 16px;font-size:14px;border:0;cursor:pointer;text-align:center;white-space:nowrap}
.lc-btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--gold-ink);box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.lc-btn-red{background:linear-gradient(180deg,#e2213c,var(--red-2));color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.lc-btn-ghost{background:#fff;color:var(--red);border:2px solid var(--red)}
.lc-btn-lg{padding:14px 22px;font-size:16px}
.lc-drawer{display:none;background:#fff;border-top:1px solid var(--line)}
html.lc-open .lc-drawer{display:block}
.lc-drawer a{display:block;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink)}

/* ---------- hero ---------- */
.lc-hero{position:relative;margin:16px auto;max-width:1240px;border-radius:18px;overflow:hidden;box-shadow:var(--sh)}
.lc-hero>img{width:100%;aspect-ratio:16/6;object-fit:cover;min-height:260px}
.lc-hero .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 44px;
  background:linear-gradient(90deg,rgba(111,8,23,.9) 0%,rgba(156,12,35,.62) 46%,rgba(156,12,35,0) 78%);color:#fff;max-width:760px}
.lc-hero .eb{display:inline-block;align-self:flex-start;background:var(--gold-2);color:var(--gold-ink);font-weight:800;font-size:12px;border-radius:20px;padding:5px 14px;text-transform:uppercase;letter-spacing:.05em}
.lc-hero h1{font-family:"Arial Black",Arial,sans-serif;font-size:34px;line-height:1.08;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.lc-hero p{font-size:15.5px;max-width:48ch;margin:0}
.lc-hero .act{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.lc-hstat{display:flex;gap:22px;margin-top:6px;font-size:13px}
.lc-hstat b{display:block;font-family:"Arial Black",Arial,sans-serif;font-size:19px;color:var(--gold-2)}

/* ---------- category pill tabs ---------- */
.lc-cats{display:flex;gap:10px;overflow-x:auto;padding:4px 0 6px;scrollbar-width:none}
.lc-cats::-webkit-scrollbar{display:none}
.lc-cat{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:92px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:12px 8px;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:var(--sh)}
.lc-cat .i{font-size:24px;line-height:1}
.lc-cat.on{background:linear-gradient(180deg,#e2213c,var(--red-2));color:#fff;border-color:var(--red-2)}

/* ---------- main 2-col ---------- */
.lc-main{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:18px;align-items:start;margin:18px auto}
.lc-col{min-width:0;display:flex;flex-direction:column;gap:18px}
.lc-sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lc-sh h2{font-size:19px;display:flex;align-items:center;gap:9px}
.lc-sh h2:before{content:"";width:6px;height:20px;background:var(--gold);border-radius:3px}
.lc-sh a{font-size:13px;font-weight:700}
/* game grid: white cards, gold hairline */
.lc-games{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lc-game{min-width:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--sh);border:1px solid var(--line);color:var(--ink)}
.lc-game img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.lc-game .m{padding:7px 9px}
.lc-game b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-game small{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--mut);margin-top:2px}
.lc-game small i{font-style:normal;background:var(--gold-2);color:var(--gold-ink);border-radius:4px;padding:0 5px;font-weight:800}
/* providers: white pills */
.lc-provs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lc-prov{min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:12px;padding:14px 10px;box-shadow:var(--sh);height:72px}
.lc-prov img{max-height:40px;max-width:78%;width:auto;object-fit:contain}
.lc-prov.dark{background:linear-gradient(180deg,#b3142b,#7d0718);border-top-color:var(--gold-2)}
.lc-prov span{font-family:"Arial Black",Arial,sans-serif;color:var(--red-2);font-size:14px}
/* promo trio */
.lc-promos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lc-promo{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--sh);display:block}
.lc-promo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lc-promo .cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:12px 14px;
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 62%);color:#fff}
.lc-promo .cap b{font-size:15px}.lc-promo .cap span{font-size:12px;color:var(--gold-2);font-weight:700}
/* matches */
.lc-matches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lc-match{background:#fff;border-radius:12px;padding:11px 13px;box-shadow:var(--sh);border-top:3px solid var(--red)}
.lc-match .lg{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);font-weight:700}
.lc-match .tm{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;margin:9px 0;font-weight:800;font-size:13px;text-align:center}
.lc-match .tm i{font-style:normal;color:var(--red);font-size:11px}
.lc-match .od{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lc-match .od a{background:var(--soft);border:1px solid var(--gold-2);border-radius:7px;text-align:center;padding:6px 2px;font-size:11px;color:var(--gold-ink);font-weight:700}
.lc-match .od a b{display:block;color:var(--ink);font-size:13px}
/* 4d */
.lc-4d{background:linear-gradient(135deg,#fff,var(--soft));border:1px solid var(--gold-2);border-radius:14px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lc-4d h3{font-size:16px;color:var(--red-2)}
.lc-4d .num{display:flex;gap:7px;margin:10px 0}
.lc-4d .num span{width:46px;height:56px;border-radius:9px;background:linear-gradient(180deg,#e2213c,var(--red-2));color:#fff;font-family:"Arial Black",Arial,sans-serif;font-size:28px;display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.lc-4d ul{margin:0;padding:0;list-style:none;font-size:13px}
.lc-4d li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--gold-2);padding:6px 0}
.lc-4d li b{color:var(--red-2);letter-spacing:.08em}
/* chip rows */
.lc-chips{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.lc-chips .chip{background:#fff;border:1px solid var(--line);border-radius:9px;height:40px;padding:6px 10px;display:flex;align-items:center}
.lc-chips .chip img{height:26px;width:auto}
/* right column cards */
.lc-side{background:#fff;border-radius:14px;box-shadow:var(--sh);padding:16px;border-top:4px solid var(--gold)}
.lc-side.acct{border-top-color:var(--red);background:linear-gradient(180deg,#fff,#fff)}
.lc-side .two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.lc-side .bal{display:flex;justify-content:space-between;align-items:center;margin:14px 0 2px;font-weight:800}
.lc-side .bal b{font-size:24px;color:var(--red-2)}
.lc-side .meta{font-size:12px;color:var(--mut);margin-bottom:10px}
.lc-side .stack{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.lc-side h3{font-size:15px;margin-bottom:4px}
.lc-side .note{font-size:11.5px;color:var(--mut);margin:2px 0 10px}
.lc-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.lc-days div{text-align:center;font-size:9.5px;font-weight:700;color:var(--mut)}
.lc-days div span{display:grid;place-items:center;height:30px;background:var(--soft);border-radius:7px;font-size:16px;margin-bottom:3px}
.lc-days div.g span{background:var(--gold-2)}
.lc-vip{margin-top:0;border-radius:14px;overflow:hidden;box-shadow:var(--sh);position:relative;display:block}
.lc-vip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.lc-vip .cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 60%);color:#fff}
.lc-vip .cap b{font-size:16px}.lc-vip .cap span{font-size:12px;color:var(--gold-2);font-weight:700}

/* ---------- content ---------- */
.lc-content{max-width:1060px;margin:26px auto;padding:28px 32px;background:#fff;border-radius:16px;box-shadow:var(--sh)}
.lc-content h1{font-size:28px;color:var(--red-2);margin-bottom:10px}
.lc-content h2{font-size:21px;margin:26px 0 8px;padding-left:12px;border-left:5px solid var(--gold)}
.lc-content p,.lc-content li{color:#33363b;font-size:15.5px}
.lc-content .lead{font-size:17px;color:#2b2e33}
.lc-content a{font-weight:700;text-decoration:underline;text-decoration-color:rgba(200,16,46,.35);text-underline-offset:3px}
.lc-ph{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:center;margin-bottom:6px}
.lc-ph .eb{display:inline-block;background:var(--soft);color:var(--gold-ink);font-weight:800;font-size:12px;border-radius:20px;padding:4px 12px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
.lc-ph img{border-radius:14px;height:auto;aspect-ratio:4/3;object-fit:cover;width:100%}
.lc-ph .act{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.lc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.lc-kpis div{background:var(--soft);border:1px solid var(--gold-2);border-radius:12px;padding:14px;text-align:center}
.lc-kpis b{display:block;font-size:22px;color:var(--red-2)}
.lc-kpis span{font-size:12px;color:var(--mut);font-weight:700}
.lc-tbl{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
.lc-tbl th{background:var(--red);color:#fff;text-align:left;padding:9px 11px}
.lc-tbl td{border-bottom:1px solid var(--line);padding:9px 11px}
.lc-tbl tr:nth-child(even) td{background:#fafafa}
.lc-tw{overflow-x:auto}
.lc-faq details{border:1px solid var(--line);border-radius:11px;margin:9px 0;background:#fff}
.lc-faq summary{cursor:pointer;padding:13px 15px;font-weight:700;list-style:none}
.lc-faq summary::-webkit-details-marker{display:none}
.lc-faq summary:after{content:"+";float:right;color:var(--red);font-weight:800}
.lc-faq details[open] summary:after{content:"\2013"}
.lc-faq details p{margin:0;padding:0 15px 13px}
.lc-band{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(90deg,var(--red-2),var(--red));color:#fff;border-radius:14px;padding:18px 20px;margin:26px 0 4px}
.lc-band b{font-size:18px}

/* ---------- footer + bottom nav ---------- */
.lc-foot{background:#141518;color:#c7cad0;padding:32px 0 18px;margin-top:22px;font-size:13.5px}
.lc-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:22px}
.lc-foot h4{color:#fff;font-size:14px;margin-bottom:10px}
.lc-foot a{display:block;color:#c7cad0;padding:5px 0}
.lc-foot .lc-logo b{color:#fff}
.lc-foot .soc{display:flex;gap:9px;margin-top:12px}
.lc-foot .soc a{width:36px;height:36px;border-radius:50%;background:#262a30;display:grid;place-items:center;padding:0}
.lc-foot .soc svg{width:17px;height:17px;fill:#fff}
.lc-foot .pay,.lc-foot .trust{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 10px;align-items:center}
.lc-foot .pay span{background:#fff;border-radius:7px;height:34px;padding:4px 8px;display:flex;align-items:center}
.lc-foot .pay img{height:24px;width:auto}
.lc-foot .trust span{background:#262a30;border-radius:7px;height:34px;padding:5px 8px;display:flex;align-items:center}
.lc-foot .trust img{height:22px;width:auto}
.lc-foot .legal{border-top:1px solid #30343b;margin-top:14px;padding-top:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px}
.lc-foot .age{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--gold);color:#fff;font-weight:800;font-size:10px;margin-right:6px}
.lc-tab{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);height:58px;box-shadow:0 -3px 12px rgba(0,0,0,.1)}
.lc-tab a{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mut);font-size:10.5px;font-weight:800;gap:2px}
.lc-tab a .i{font-size:20px;line-height:1}
.lc-tab a.on{color:var(--red)}
.lc-tab a.mid{color:#fff}
.lc-tab a.mid .i{margin-top:-20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--gold-ink);display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.25);font-size:24px}
.lc-scta{display:none}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .lc-main{grid-template-columns:1fr}
  .lc-games{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lc-provs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  body{padding-bottom:118px}
  .lc-menu{display:none}
  .lc-burger{display:block}
  .lc-top .lc-wrap{gap:10px}
  .lc-top .lc-right{gap:6px}
  .lc-top .lc-right .lc-btn{display:none}        /* sticky CTA + burger cover register; stops header overflow */
  /* hero: image becomes a filling background so the overlay text defines the height and never clips */
  .lc-hero{margin:12px 14px;overflow:hidden}
  .lc-hero>img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;min-height:0;object-fit:cover}
  .lc-hero .ov{position:relative;inset:auto;max-width:none;padding:22px 18px;
    background:linear-gradient(0deg,rgba(111,8,23,.94),rgba(124,9,27,.78) 55%,rgba(156,12,35,.6))}
  .lc-hero h1{font-size:24px}
  .lc-hero p{font-size:14.5px;max-width:none}
  .lc-games{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lc-provs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lc-promos{grid-template-columns:1fr}
  .lc-matches{grid-template-columns:1fr}
  .lc-4d{grid-template-columns:1fr}
  .lc-content{margin:16px;padding:20px 17px}
  .lc-ph{grid-template-columns:1fr}
  .lc-kpis{grid-template-columns:repeat(2,1fr)}
  .lc-foot .cols{grid-template-columns:1fr 1fr}
  .lc-foot .cols>div:first-child{grid-column:1/-1}
  .lc-scta{display:block;position:fixed;left:0;right:0;bottom:58px;z-index:59;padding:7px 10px;background:rgba(255,255,255,.97);box-shadow:0 -2px 10px rgba(0,0,0,.12)}
  .lc-scta a{display:flex;width:100%;justify-content:center;font-size:15px;padding:12px;border-radius:11px}
}
@media(max-width:400px){
  .lc-games{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lc-logo b{font-size:17px}
  .lc-logo svg{width:30px;height:36px}
  /* The logo wordmark and the language chips are both nowrap, so on a 360px screen their
     min-content widths add up past the viewport and the header pushes the page sideways.
     Tighten the header gutter and the chips rather than letting anything wrap. */
  .lc-top .lc-wrap{padding:0 10px;gap:8px}
  .lc-top .lc-right{gap:5px}
  .lc-lang{gap:2px}
  .lc-lang a{padding:7px 5px}
}
/* The pass above was not enough: at 320 the row still measured 351px, because the wordmark and
   the three language chips are all nowrap and nothing in the row can give way. Take the wordmark
   and the chips the rest of the way down; nothing wraps and nothing is hidden. */
@media(max-width:340px){
  .lc-top .lc-wrap{gap:6px}
  .lc-logo{gap:6px}
  .lc-logo b{font-size:14px}
  .lc-top .lc-right{gap:4px}
  .lc-lang a{padding:7px 3px}
}

/* === image focal points === */
/* The part of the picture that must survive the crop is pinned to the same
   point of the box. */
img[src$="/assets/img/banner-welcome.jpg"]{object-position:36.5% 88.2%}
img[src$="/assets/img/dealers/big-gaming.jpg"]{object-position:57.2% 11.0%}
img[src$="/assets/img/dealers/choice-gaming.jpg"]{object-position:48.6% 11.2%}
img[src$="/assets/img/dealers/dream-gaming.jpg"]{object-position:38.2% 45.7%}
img[src$="/assets/img/dealers/evolution.jpg"]{object-position:47.4% 25.0%}
img[src$="/assets/img/dealers/mt-live.jpg"]{object-position:41.4% 16.1%}
img[src$="/assets/img/dealers/playtech.png"]{object-position:48.1% 21.0%}
img[src$="/assets/img/dealers/qtech.jpg"]{object-position:50.5% 13.6%}
img[src$="/assets/img/dealers/xpg.jpg"]{object-position:40.7% 24.3%}
/* === end image focal points === */