/* KK8 mobile — app-style theme */
/* iOS shows a sideways scroll that Chromium hides: overflow-x on body alone is not
   enough, it has to sit on html, and clip rather than hidden so no scroll container
   is created. The rest of the portfolio already carries this. */
html{overflow-x:clip;max-width:100%}

:root{
  --blue:#0b5cff; --blue-d:#0842c4; --blue-l:#3b82f6;
  --navy:#0a1b4d; --navy-2:#12256a;
  --ink:#101828; --muted:#5b6577; --line:#e4e9f2;
  --bg:#eef2fb; --card:#ffffff; --chip:#e8effe; --chip-ink:#0842c4;
  --gold:#ffb020; --ok:#12b76a;
  --radius:18px; --radius-sm:12px;
  --col:720px; --tab-h:64px;
  --shadow:0 6px 22px rgba(16,34,80,.10); --shadow-sm:0 2px 8px rgba(16,34,80,.08);
  font-synthesis:none;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.55; padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{line-height:1.2;margin:0;font-weight:800;letter-spacing:-.01em}
p{margin:.5em 0}

/* ---- app column (a centred "phone" frame on wide screens) ---- */
.appbar,.app-main,.appft,.tabbar{max-width:var(--col);margin-inline:auto}
.app-main{padding:14px 14px 8px}

/* ---- top bar ---- */
.appbar{position:sticky;top:0;z-index:40;
  background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;
  border-radius:0 0 16px 16px;box-shadow:var(--shadow-sm)}
.app-in{display:flex;align-items:center;gap:10px;padding:10px 14px}
.app-brand{display:flex;align-items:center;gap:8px;margin-right:auto;flex-shrink:0}
.ap-badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:30px;padding:0 10px;white-space:nowrap;line-height:1;
  background:linear-gradient(135deg,var(--blue-l),var(--blue));border-radius:9px;
  font-weight:900;font-size:16px;color:#fff;box-shadow:0 2px 8px rgba(11,92,255,.5)}
.ap-badge b{color:var(--gold)}
.ap-tag{font-size:10px;letter-spacing:.18em;font-weight:700;color:#a9c0ff}
.app-right{display:flex;align-items:center;gap:8px}
.langpop{position:relative}
.langpop>summary{list-style:none;cursor:pointer;font-size:13px;font-weight:700;color:#fff;
  padding:6px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.08)}
.langpop>summary::-webkit-details-marker{display:none}
.langpop>summary i{font-style:normal}
.langpop-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:grid;gap:2px;min-width:120px;z-index:50}
.langpop-menu a{padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600}
.langpop-menu a.on{background:var(--chip);color:var(--chip-ink)}

/* ---- buttons ---- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,var(--blue-l),var(--blue));color:#fff!important;font-weight:800;
  padding:11px 18px;border-radius:999px;box-shadow:0 6px 16px rgba(11,92,255,.35);border:0;cursor:pointer;
  font-size:15px;transition:transform .08s ease,box-shadow .2s}
.cta:active{transform:translateY(1px)}
.cta.wide{width:100%;margin-top:12px}
.app-join{padding:8px 16px;font-size:14px}
.btn-sm{padding:8px 14px;font-size:13px}
.ghost{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;
  font-weight:700;border:1.5px solid var(--blue);color:var(--blue)!important;background:#fff}
.sec-cta{margin:6px 0 2px;text-align:center}

/* ---- app hero ---- */
.apphero{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  background:var(--navy);color:#fff;isolation:isolate}
.apphero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:-1}
.apphero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,27,77,.35),rgba(10,27,77,.92))}
.apphero-copy{padding:20px 18px 18px}
.apphero-copy h1{font-size:24px;margin:8px 0}
.apphero-copy p{color:#cdd9f7;font-size:14.5px;margin:0 0 14px}
.apphero-cta{display:flex;gap:10px;flex-wrap:wrap}
.apphero-cta .ghost{border-color:rgba(255,255,255,.6);color:#fff!important;background:rgba(255,255,255,.08)}
.apphero-metrics{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap;font-size:12px;color:#b9c8ee}
.apphero-metrics b{color:#fff;font-size:15px;display:inline-block;margin-right:4px}

.chip{display:inline-block;background:var(--chip);color:var(--chip-ink);font-weight:800;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.apphero .chip{background:rgba(255,255,255,.16);color:#dbe6ff}

/* ---- stories rail ---- */
.stories{display:flex;gap:14px;overflow-x:auto;padding:14px 2px 4px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{flex:0 0 auto;width:66px;text-align:center}
.story-ring{display:block;width:64px;height:64px;border-radius:50%;padding:3px;
  background:conic-gradient(from 210deg,var(--blue),var(--gold),var(--blue));overflow:hidden}
.story-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff}
.story-lb{display:block;font-size:11px;font-weight:600;margin-top:6px;color:var(--muted)}

/* ---- live win feed ticker ---- */
.ticker{overflow:hidden;background:linear-gradient(120deg,#0842c4,#0b5cff);color:#fff;
  border-radius:999px;margin:12px 0;padding:9px 0;box-shadow:var(--shadow-sm)}
.ticker-track{display:inline-flex;gap:26px;white-space:nowrap;animation:tk 34s linear infinite;padding-left:26px}
.ticker .tk{font-size:12.5px;font-weight:600}
.ticker .tk b{color:var(--gold)}
@keyframes tk{to{transform:translateX(-50%)}}

/* ---- content blocks ---- */
.block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 14px;margin:14px 0;box-shadow:var(--shadow-sm)}
.block-h{margin-bottom:6px}
.block-h h2{font-size:19px;margin-top:8px}
.block .sub{color:var(--muted);font-size:14px;margin:6px 0 0}
.section{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 14px;margin:14px 0;box-shadow:var(--shadow-sm)}
.section.wrap h2,.section h2{font-size:19px;margin:6px 0}
.section .eyebrow,.eyebrow{display:inline-block;color:var(--chip-ink);background:var(--chip);
  font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.wrap{width:100%}
.faq{}

/* ---- grids & cards ---- */
.grid{display:grid;gap:12px}
.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:var(--shadow-sm);position:relative}
.card .thumb{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.gcard .thumb{aspect-ratio:16/10}
.card .body{padding:9px 10px}
.card .body h3{font-size:13.5px}
.card .play{position:absolute;top:8px;right:8px;background:var(--gold);color:#0a1b4d;font-weight:900;
  font-size:10px;padding:3px 8px;border-radius:999px;letter-spacing:.05em}
.catcard .cat-ov{position:absolute;left:0;right:0;bottom:0;padding:10px;color:#fff;
  background:linear-gradient(0deg,rgba(10,27,77,.9),transparent)}
.catcard .cat-ov h3{font-size:14px}
.catcard .cat-ov p{font-size:11px;color:#cbd8f6;margin:2px 0 0}
.catcard .thumb{aspect-ratio:4/3;object-position:center}
.cat-tag{position:absolute;top:8px;left:8px;background:var(--blue);color:#fff;font-weight:800;
  font-size:10px;padding:3px 8px;border-radius:999px}

.tilegrid{gap:10px}
.tilecard{position:relative;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm)}
.tilecard img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.tilecard .play{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#0a1b4d;font-weight:900;font-size:10px;padding:3px 10px;border-radius:999px}

/* ---- dealers ---- */
.dealer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.dealer-card{position:relative;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm)}
.dealer-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.dealer-card span{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;color:#fff;font-weight:700;
  font-size:12px;background:linear-gradient(0deg,rgba(10,27,77,.9),transparent)}

/* ---- feature cards ---- */
.feature{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fbfcff}
.feature .ic{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;font-size:20px;
  background:var(--chip);border-radius:12px}
.feature h3{font-size:14.5px}
.feature p{font-size:13px;color:var(--muted);margin:3px 0 0}

/* ---- provider cards ---- */
.pfgrid{gap:12px}
.pfcard{background:#fbfcff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px}
.pf-logo{height:40px;display:flex;align-items:center;margin-bottom:8px}
.pf-logo img{max-height:34px;width:auto;object-fit:contain}
.pfcard h3{font-size:15px}
.pfcard p{font-size:12.5px;color:var(--muted);margin:5px 0 0}

/* ---- promo cards ---- */
.promo-b{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm)}
.promo-art{position:relative}
.promo-art .top{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center}
.promo-title{position:absolute;left:0;right:0;bottom:0;padding:10px;
  background:linear-gradient(0deg,rgba(10,27,77,.85),transparent)}
.promo-title h3{color:#fff;font-size:15px}
.promo-b .body{padding:11px}
.promo-b .body p{font-size:12.5px;color:var(--muted);margin:0 0 10px}

/* ---- logo strip ---- */
.logostrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lg{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px;font-weight:700;font-size:12px;color:var(--muted);min-height:52px;text-align:center}
.lg-img img{max-height:26px;width:auto;object-fit:contain}

/* ---- prose ---- */
.block>div[style*="max-width"],.section>div[style*="max-width"]{max-width:100%!important}
.block p,.section p{font-size:14.5px;color:#33415c}
.block h3,.section h3{font-size:15px;margin:14px 0 2px}
.block a[href]:not(.cta):not(.btn),.section a[href]:not(.cta):not(.btn){color:var(--blue);font-weight:600}

/* ---- FAQ ---- */
details{background:#fbfcff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0}
details[open]{border-color:var(--blue-l);box-shadow:var(--shadow-sm)}
summary{cursor:pointer;font-weight:700;font-size:14.5px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--blue);font-weight:900}
details[open] summary::after{content:"–"}
details p{margin:10px 0 0;font-size:13.5px;color:var(--muted)}

/* ---- page header ---- */
.phead{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);margin-bottom:4px}
.phead-media img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.phead-copy{padding:16px 14px}
.phead-copy h1{font-size:23px;margin:8px 0}
.phead-copy p{font-size:14.5px;color:var(--muted)}

/* ---- trustbar (compact) ---- */
.trustbar{margin:14px 0}
.trustbar .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.trustbar .t{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px}
.trustbar .t .ic{font-size:18px}
.trustbar .t b{font-size:13px;display:block}
.trustbar .t span{font-size:11px;color:var(--muted)}

/* ---- footer ---- */
.appft{background:var(--navy);color:#c7d3f0;margin-top:20px;border-radius:20px 20px 0 0;padding:22px 16px 26px}
.appft-brand{display:inline-block;margin-bottom:8px}
.appft-about{font-size:12.5px;color:#a9b8de;margin:0 0 12px}
.appft-soc{display:flex;gap:10px;margin-bottom:14px}
.appft-soc a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border-radius:50%}
.appft-soc svg{width:16px;height:16px;fill:#fff;display:block}
.appft-rail{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 0;border-block:1px solid rgba(255,255,255,.12)}
.appft-rail a{font-size:12.5px;color:#c7d3f0}
.appft-pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0}
.appft-pay>span{font-size:11px;color:#8ea0cc;width:100%}
.appft .logostrip{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.appft .lg{background:#fff;border:1px solid rgba(255,255,255,.55);padding:10px 12px;min-height:48px}
.appft .lg-img img{max-height:28px}
.appft-legal{font-size:11px;color:#8ea0cc;margin-top:12px;line-height:1.7}
.eighteen,.age{display:inline-grid;place-items:center;min-width:22px;height:22px;background:var(--gold);
  color:#0a1b4d;font-weight:900;font-size:11px;border-radius:6px;vertical-align:middle;margin-right:4px}
.ft-trust{display:grid;gap:10px;padding:12px 0 0}
.ftt{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ftt-l{font-size:11px;color:#8ea0cc;width:100%}
.bchip{display:inline-flex;align-items:center;background:#fff;border-radius:8px;padding:7px 10px;min-height:34px}
.bchip img{max-height:26px;width:auto}
.bchip-emblem img{max-height:30px}

/* ---- sticky bottom tab bar (the app's primary nav) ---- */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--col);
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(16,34,80,.08);
  display:flex;align-items:stretch;justify-content:space-around;z-index:60}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted);font-size:10.5px;font-weight:600}
.tab-ic{font-size:20px;line-height:1}
.tab.on{color:var(--blue)}
.tab.on .tab-ic{transform:translateY(-1px)}
.tab-fab{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:56px;height:56px;
  border-radius:50%;display:grid;place-items:center;font-size:20px;color:#fff;
  background:linear-gradient(135deg,var(--blue-l),var(--blue));box-shadow:0 8px 20px rgba(11,92,255,.5)}

/* ---- wider screens: keep the phone frame, add breathing room ---- */
@media(min-width:560px){
  .g-3,.g-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dealer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .apphero-copy h1{font-size:28px}
}
@media(min-width:760px){
  body{background:#dde6f7}
  .app-main{padding:16px 16px 8px}
}

/* ---- card links must not inherit the .cta button frame (no blue border/padding) ---- */
.card.cta,.gcard.cta,.dealer-card.cta,.tilecard.cta,.gtile.cta,.promo.cta{
  display:block!important;width:100%;padding:0!important;background:var(--card)!important;
  color:var(--ink)!important;box-shadow:var(--shadow-sm);border-radius:var(--radius-sm);overflow:hidden}
.gcard.cta{border:1px solid var(--line)}

/* ---- main menu popover (hamburger in the top bar) ---- */
.menupop{position:relative}
.menupop>summary{list-style:none;cursor:pointer;color:#fff;padding:6px 9px;border-radius:10px;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);display:grid;place-items:center}
.menupop>summary::-webkit-details-marker{display:none}
.menupop>summary svg{width:18px;height:18px;fill:#fff;display:block}
.menu-sheet{position:absolute;left:0;top:calc(100% + 8px);z-index:70;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;min-width:250px}
.menu-sheet a{padding:10px 12px;border-radius:9px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.menu-sheet a:hover,.menu-sheet a.on{background:var(--chip);color:var(--chip-ink)}
.menu-sheet .mi-ic{font-size:15px}
/* header popovers are <details> too — keep the FAQ details styling off them */
.menupop,.langpop{background:none!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important}
.menupop>summary::after,.langpop>summary::after{content:none!important;display:none!important}

/* === 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/dealers/ag-gaming.jpg"]{object-position:48.4% 23.1%}
img[src$="/assets/img/dealers/big-gaming.jpg"]{object-position:49.1% 13.6%}
img[src$="/assets/img/dealers/choice-gaming.jpg"]{object-position:48.6% 11.2%}
img[src$="/assets/img/dealers/dream-gaming.jpg"]{object-position:52.6% 22.2%}
img[src$="/assets/img/dealers/evolution.jpg"]{object-position:46.7% 25.2%}
img[src$="/assets/img/dealers/jdb.jpg"]{object-position:47.4% 26.4%}
img[src$="/assets/img/dealers/mt-live.jpg"]{object-position:41.4% 16.1%}
img[src$="/assets/img/dealers/playtech.jpg"]{object-position:47.9% 25.5%}
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/sa-gaming.jpg"]{object-position:49.8% 18.5%}
img[src$="/assets/img/dealers/sexy.jpg"]{object-position:48.1% 21.5%}
img[src$="/assets/img/dealers/wm-casino.jpg"]{object-position:51.4% 17.8%}
img[src$="/assets/img/dealers/xpg.jpg"]{object-position:40.7% 24.3%}
/* === end image focal points === */

/* === mobile card shape === */
/* A two-column grid of text cards makes each card a thin vertical strip on a
   phone. Picture tiles stay two-up; only word cards collapse. */
@media(max-width:560px){
  .grid.g-3:has(> .pfcard){grid-template-columns:minmax(0,1fr)}
  .grid.g-4:has(> .feature){grid-template-columns:minmax(0,1fr)}
  .grid.g-3:has(> .feature){grid-template-columns:minmax(0,1fr)}
}
/* === end mobile card shape === */

/* A button should never sit flush on whatever precedes it. */
.appsec .wrap>div>*+a.cta{margin-top:18px}