/* SCRPLAY — royal-blue + gold casino portal shell (original build; genre/palette of a
   Malaysian casino floor, our own code). Namespaced .sp- to stay distinct from other brands. */
:root{
  --bg:#07122e;            /* deep navy base */
  --bg-2:#0b1b44;          /* raised panels */
  --bg-3:#0e2155;          /* cards */
  --bg-grad-a:#0a1838;
  --bg-grad-b:#061023;
  --line:#1c3268;          /* hairlines */
  --ink:#eaf0ff;           /* primary text */
  --mut:#9fb4e0;           /* secondary text */
  --blue:#2f6bff;          /* primary blue */
  --blue-2:#5b8dff;        /* bright blue */
  --gold:#f6cf4a;          /* gold accent */
  --gold-2:#ffe38a;        /* light gold */
  --purple:#7c4dff;        /* complementary purple */
  --purple-2:#b79bff;
  --teal:#20d3c2;          /* complementary light teal/turquoise */
  --teal-2:#7eeadf;
  --green:#28c76f;         /* deposit green */
  --red:#ff5a6a;           /* withdraw red */
  --radius:14px;
  --maxw:1280px;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,"Noto Sans","Noto Sans SC",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{margin:0;background:
  radial-gradient(1200px 600px at 50% -5%,rgba(47,107,255,.18),transparent 60%),
  linear-gradient(180deg,var(--bg-grad-a),var(--bg-grad-b));
  background-attachment:fixed;color:var(--ink);font-family:var(--font);line-height:1.5;
  padding-bottom:72px}  /* room for fixed bottom nav */
a{color:var(--blue-2);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 14px}

/* ---------- top bar ---------- */
.sp-top{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,#0a1a44,#0a1738);
  border-bottom:1px solid var(--line);box-shadow:0 6px 24px -12px #000}
.sp-top .bar{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:10px 14px}
.sp-burger{background:transparent;border:0;color:var(--gold);font-size:24px;cursor:pointer;display:none;padding:7px 10px;line-height:1}
.sp-logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:22px;letter-spacing:-.02em;
  margin-right:auto}
.sp-logo .b{color:var(--blue-2)}.sp-logo .g{color:var(--gold)}
.sp-logo .seal{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#0c3b8f,#07214f);
  border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--gold);font-weight:900;font-style:italic}
.sp-cats{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.sp-cats a{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:10px;color:var(--ink);
  font-weight:700;font-size:13px;background:linear-gradient(180deg,#12275e,#0d1d47);border:1px solid var(--line)}
.sp-cats a .ic{width:20px;height:20px}
.sp-cats a.active,.sp-cats a:hover{background:linear-gradient(180deg,#2a57c8,#1b3a8f);border-color:var(--blue-2)}
.sp-auth{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font-weight:800;
  border-radius:10px;padding:9px 16px;font-size:14px}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#3a2a00;
  box-shadow:0 6px 16px -6px rgba(246,207,74,.6)}
.btn-blue{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-lg{padding:13px 22px;font-size:16px;border-radius:12px}
.btn-wide{width:100%;justify-content:center}
.langsel{display:flex;gap:4px;margin-left:6px}
.langsel a{padding:9px 11px;border-radius:7px;font-size:12px;color:var(--mut);border:1px solid var(--line);line-height:1}
.langsel a.on{color:var(--gold);border-color:var(--gold)}
/* mobile dropdown menu (opened by the hamburger) */
.sp-mobnav{display:none}
html.mob-open .sp-mobnav{display:block;background:#0a1738;border-top:1px solid var(--line);padding:6px 14px 12px}
.sp-mobnav a{display:block;padding:13px 6px;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
.sp-mobnav a .ic{margin-right:10px}
.sp-mobnav .langsel{display:flex;gap:8px;padding-top:12px}
@media(min-width:1041px){.sp-mobnav{display:none !important}}

/* ---------- casino floor grid ---------- */
.sp-floor{display:grid;grid-template-columns:200px 1fr 250px;gap:14px;max-width:var(--maxw);
  margin:14px auto;padding:0 14px;align-items:start}
.sp-col{display:flex;flex-direction:column;gap:12px}
.panel{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.panel-h{padding:9px 12px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid var(--line);background:rgba(47,107,255,.08)}
.panel-b{padding:12px}

/* promo banner widget */
.promo-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.promo-card img{width:100%;height:120px;object-fit:cover}
.promo-card .cap{position:absolute;inset:auto 0 0 0;padding:10px;background:linear-gradient(0deg,rgba(4,10,28,.95),transparent);
  font-weight:800;font-size:14px}
.promo-card .cap b{color:var(--gold)}

/* mini tiles */
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini{background:linear-gradient(180deg,#13285f,#0d1d47);border:1px solid var(--line);border-radius:11px;
  padding:10px;text-align:center;font-weight:700;font-size:12px;color:var(--ink)}
.mini .n{display:block;font-size:11px;color:var(--mut);margin-top:3px;font-weight:600}
.mini.teal{background:linear-gradient(180deg,#0e5a57,#09302f);border-color:#1c7f78}
.mini.teal .n{color:var(--teal-2)}
.mini.purple{background:linear-gradient(180deg,#3a2a7a,#241952);border-color:#5a46a8}
.mini.purple .n{color:var(--purple-2)}
.panel.pp .panel-h{color:var(--purple-2);background:rgba(124,77,255,.12)}
.panel.tl .panel-h{color:var(--teal-2);background:rgba(32,211,194,.12)}
.cscore .sc{color:var(--teal-2)}.cscore .vs{color:var(--purple-2)}
.promo-card.app{border:1px solid var(--teal);box-shadow:0 0 0 1px rgba(32,211,194,.25)}
.promo-card.app .cap{color:var(--teal-2)}

/* live transaction feed */
.feed{max-height:230px;overflow:hidden}
.feed table{width:100%;border-collapse:collapse;font-size:11px}
.feed th{color:var(--mut);text-align:left;padding:5px 8px;font-weight:700;border-bottom:1px solid var(--line)}
.feed td{padding:5px 8px;border-bottom:1px solid rgba(28,50,104,.5);font-variant-numeric:tabular-nums}
.feed .dep{color:var(--green);font-weight:800}
.feed .wd{color:var(--red);font-weight:800}

/* category pills (center top) */
.sp-pills{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
.sp-pill{border:1px solid #d8a93a;border-radius:13px;
  padding:14px 8px;text-align:center;font-weight:900;font-size:13px;color:#3a2a00;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 7px 16px -8px rgba(246,207,74,.55);transition:.15s}
.sp-pill:hover{transform:translateY(-2px);box-shadow:0 11px 22px -8px rgba(246,207,74,.75)}
.sp-pill .emoji{font-size:26px}
.sp-pill .sub{font-size:9px;font-weight:800;letter-spacing:.08em;color:#6b4e00;opacity:.85}

/* game grid */
.sp-section-h{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px}
.sp-section-h h2{font-size:17px}.sp-section-h h2 .g{color:var(--gold)}
.sp-section-h a{font-size:12px;color:var(--gold);font-weight:700;padding:8px 6px;display:inline-block;line-height:1}
.sp-search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:0 16px;margin-bottom:16px;box-shadow:0 6px 16px -10px rgba(0,0,0,.6)}
.sp-search .mag{color:#2f6bff;font-size:17px;font-weight:900}
.sp-search input{border:0;outline:0;flex:1;font-size:15px;color:#0a1430;background:transparent;font-family:inherit;padding:15px 0;min-height:46px}
.mini-grid.m3{grid-template-columns:1fr 1fr 1fr}
.cscore{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:center;font-weight:800;font-size:13px}
.cscore .vs{color:var(--gold);font-size:12px}.cscore .sc{font-size:20px;color:var(--gold-2)}
.game-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.gcard{position:relative;border-radius:13px;overflow:hidden;border:2px solid var(--gold);
  background:var(--bg-3);box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
.gcard .art{position:relative;aspect-ratio:1/1}
.gcard img{width:100%;height:100%;object-fit:cover}
.gcard .nm{padding:7px 8px 8px;font-size:12px;font-weight:800;color:var(--gold-2);text-align:center;
  background:linear-gradient(180deg,#0e2155,#0a1738);border-top:1px solid rgba(246,207,74,.3)}
.gcard .nm .roll{display:block;font-size:9px;font-weight:700;letter-spacing:.04em;color:#9fb4e0;margin-top:2px}
.gcard .badge{position:absolute;top:6px;left:6px;background:var(--red);color:#fff;font-size:9px;font-weight:900;
  padding:2px 7px;border-radius:20px;letter-spacing:.05em}
.gcard .badge.hot{background:#ff3b3b}.gcard .badge.new{background:var(--green)}
.gcard .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:.15s;
  background:rgba(7,18,46,.55);font-weight:900;color:var(--gold);letter-spacing:.1em}
.gcard:hover .play{opacity:1}

/* provider / dealer logos */
.logo-row{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:10px}
.logo-row .lg{background:#fff;border-radius:10px;padding:8px;height:52px;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.logo-row .lg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.dealer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.dealer-card{border-radius:13px;overflow:hidden;border:1px solid var(--line);position:relative}
.dealer-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.dealer-card span{position:absolute;inset:auto 0 0 0;padding:7px;font-size:12px;font-weight:800;
  background:linear-gradient(0deg,rgba(4,10,28,.95),transparent)}

/* right panel: login / balance */
.acct{padding:14px}
.acct .bal{font-size:12px;color:var(--mut)}
.acct .amt{font-size:26px;font-weight:900;color:var(--gold);margin:2px 0 10px;font-variant-numeric:tabular-nums}
.acct .row{display:flex;gap:8px;margin-bottom:8px}
.acct .meta{font-size:12px;color:var(--mut);line-height:1.7;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.acct .meta b{color:var(--ink)}

/* ---------- bottom app nav ---------- */
.sp-bottom{position:fixed;left:0;right:0;bottom:0;z-index:50;background:linear-gradient(0deg,#0a1a44,#0a1636);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;
  padding:8px 6px 10px}
.sp-bottom a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mut);font-size:11px;font-weight:700}
.sp-bottom a .ic{font-size:19px}
.sp-bottom a.mid{margin-top:-24px}
.sp-bottom a.mid .coin{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#0c3b8f,#07214f);
  border:2px solid var(--gold);display:grid;place-items:center;color:var(--gold);font-weight:900;font-style:italic;font-size:20px;
  box-shadow:0 8px 20px -6px rgba(246,207,74,.5)}
.sp-bottom a.active{color:var(--gold)}

/* ---------- content pages (inner) ---------- */
.sp-content{max-width:1040px;margin:18px auto;padding:0 14px}
.crumbs{font-size:12px;color:var(--mut);margin-bottom:14px}
.pagehero{background:linear-gradient(120deg,#12306f,#0a1838);border:1px solid var(--line);
  border-radius:18px;padding:30px;margin-bottom:22px}
.pagehero .eyebrow{color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.pagehero h1{font-size:30px;margin:8px 0 10px}.pagehero p{color:var(--mut);max-width:680px}
.sp-content h2{font-size:22px;margin:26px 0 12px}
.sp-content h2 .g{color:var(--gold)}
.sp-content p{color:#cdd8f3;margin:0 0 14px}
.sp-content .lead{font-size:17px;color:var(--ink)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.feat .f{background:var(--bg-3);border:1px solid var(--line);border-radius:13px;padding:16px}
.feat .f h3{color:var(--gold);font-size:15px;margin-bottom:6px}
.feat .f p{font-size:14px;margin:0;color:var(--mut)}
.faq{margin:14px 0}
.faq details{background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.faq summary{font-weight:800;cursor:pointer}
.faq p{margin:10px 0 0;color:var(--mut)}
.sec-cta{text-align:center;margin:26px 0}
.relbox{max-width:1040px;margin:10px auto 0;padding:14px;color:var(--mut);font-size:13px}
.relbox a{color:var(--gold);font-weight:700}

/* ---------- footer ---------- */
.sp-ft{border-top:1px solid var(--line);margin-top:26px;background:#071024}
.sp-ft .wrap{padding:26px 14px}
.sp-ft .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
.sp-ft h4{color:var(--gold);font-size:13px;margin-bottom:10px}
.sp-ft a{display:block;color:var(--mut);font-size:13px;margin-bottom:7px}
.sp-ft .social{display:flex;gap:10px;margin-top:12px}
.sp-ft .social a{width:42px;height:42px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center}
.sp-ft .social svg{width:17px;height:17px;fill:var(--mut)}
.sp-pay{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sp-pay .lbl{font-size:12px;color:var(--mut);margin-right:4px}
.sp-pay .lg{background:#fff;border-radius:8px;padding:5px;height:38px;width:92px;display:flex;
  align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.sp-pay .lg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.legal{margin-top:16px;color:var(--mut);font-size:12px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.eighteen{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;font-size:10px;margin-right:6px}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .sp-floor{grid-template-columns:1fr}
  .sp-col.left{order:2}.sp-col.center{order:1}.sp-col.right{order:0}
  .sp-cats{display:none}
  .sp-burger{display:block}
  .game-grid{grid-template-columns:repeat(3,1fr)}
  .logo-row{grid-template-columns:repeat(4,1fr)}
  .dealer-grid{grid-template-columns:repeat(2,1fr)}
  .sp-ft .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .sp-top .bar{gap:8px}
  .sp-auth .langsel{display:none}            /* language switcher moves into the hamburger menu */
  .sp-top .bar .btn{padding:8px 11px;font-size:13px}
  .sp-logo{font-size:18px}.sp-logo .seal{width:26px;height:26px}
  .sp-pills{grid-template-columns:repeat(3,1fr)}
  .game-grid{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:1fr}
  .pagehero{padding:20px}.pagehero h1{font-size:24px}
  .logo-row{grid-template-columns:repeat(3,1fr)}
}

/* Small phones. Burger, lockup and the Login/Register pair are all nowrap, so at 320 the bar
   measured 342px and dragged the document sideways. Give back the spare padding on the burger,
   the lockup and the two buttons; both buttons stay visible and keep their touch height. */
@media(max-width:400px){
  .sp-top .bar{gap:6px}
  .sp-burger{padding:7px 8px}
  .sp-logo{gap:6px;font-size:16px}
  .sp-auth{gap:6px}
  .sp-top .bar .btn{padding:8px 8px;font-size:12px;white-space:nowrap}
  /* The footer's first column is as wide as its four 42px social chips in one unbreakable row -
     198px inside a 136px track - and a bare 1fr track is min-content wide, so the footer pushed
     the Malay pages sideways. Let the chips wrap and cap both tracks. */
  .sp-ft .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .sp-ft .social{flex-wrap:wrap;gap:8px}
}

/* === 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/cat-poker.jpg"]{object-position:14.2% 64.5%}
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%}
img[src$="/assets/img/game-lion.jpg"]{object-position:50.9% 36.6%}
img[src$="/assets/img/game-mermaid.jpg"]{object-position:50.2% 18.1%}
img[src$="/assets/img/game-pharaoh.jpg"]{object-position:50.7% 37.2%}
/* === end image focal points === */