/* bit9ja promo site: shared brand layer built on the SOFTSWISS Figma foundations
   ("BIT9JA General - Actual": Style, Tournaments, Promotions, VIP pages), so the promo pages read as part of
   www.bit9ja.com. Montserrat throughout; dark green surfaces (page #061E17, chrome #0A2920, card #144038);
   green gradient pill = primary action; #144038 pill = secondary; gold #F6C006 = prizes and 1st place;
   rounded cards (20px) and rows (12px). Designer refinements (Oscar) go on top of this layer.
   Previous Brand-Manual styling: bak-figma/site-pre-figma/promo.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800&display=swap');

:root{
  --bg:#061e17; --chrome:#0a2920; --panel:#144038; --panel-deep:#0a2920; --panel-hi:#1b4c43; --row:#061e17;
  --line:rgba(227,239,235,.08); --line-hi:rgba(227,239,235,.18);
  --text:#f4f8f6; --body-text:#c9d9d5; --muted:#8fa9a1;
  --green:#37a934; --green2:#119133; --green-hi:#4cc34a; --orange:#f6c006; --orange2:#e0ad00; --red:#f6c006;
  --amber:#f49401; --amber2:#d27e01; --silver:#d5dcda; --bronze:#fcc09c;
  --g-green:linear-gradient(180deg,#37a934 0%,#119133 100%);
  --g-orange:linear-gradient(180deg,#f49401 0%,#d27e01 100%);
  --disp:"Montserrat",system-ui,-apple-system,sans-serif; --body:"Montserrat",system-ui,-apple-system,sans-serif;
  --mono:"Montserrat",system-ui,-apple-system,sans-serif;
  --r-card:20px; --r-row:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}

/* ---- chrome ---- */
.top{display:flex;align-items:center;gap:16px;padding:16px 0}
.top .logo{display:block;line-height:0}
.top .logo img{height:30px;width:auto}
.nav{display:flex;gap:2px;margin-left:6px}
.nav a{text-decoration:none;font-weight:800;font-size:14px;color:var(--muted);padding:8px 13px;border-radius:999px;transition:color .15s,background .15s}
.nav a.on{color:var(--text);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.nav a:hover{color:var(--text)}
.spacer{flex:1}
.upd{font-size:11px;color:var(--muted)}
.stale{display:none;color:var(--orange);font-size:12px;font-weight:800}
body.stale .stale{display:inline}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;border:0;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:13px;line-height:1;
  padding:13px 20px;border-radius:12px;color:#04120a;background:var(--g-green);box-shadow:0 10px 26px rgba(0,196,69,.22);
  transition:transform .12s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.orange{background:var(--g-orange);color:#1a0e00;box-shadow:0 10px 26px rgba(255,169,0,.22)}
.btn.ghost{background:var(--panel);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-hi)}
.btn.sm{padding:10px 14px;font-size:11.5px;border-radius:10px}
.btn.lg{padding:17px 28px;font-size:15px;border-radius:14px}
.btn small{display:block;font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0;font-size:12px;opacity:.8;margin-top:5px}
.btn.stack{flex-direction:column;align-items:center;text-align:center}

/* ---- type ---- */
h1.page{font-family:var(--disp);font-weight:900;font-size:clamp(26px,5vw,56px);text-transform:uppercase;line-height:1;letter-spacing:-.02em;margin:22px 0 10px}
h1.page em{font-style:normal;background:var(--g-green);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-o{font-style:normal;background:var(--g-orange);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-g{background:var(--g-green);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 22px;max-width:66ch}
.eyebrow{font-weight:800;font-style:italic;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0 0 8px}
h2.sec{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.6vw,30px);text-transform:uppercase;line-height:1.1;margin:0 0 6px;letter-spacing:-.01em}
h2.sec em{font-style:normal;color:var(--green)}
.sub{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 18px;max-width:70ch}

.pill{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 11px;white-space:nowrap;vertical-align:middle;line-height:1}
.pill.live{background:var(--red);color:#fff;display:inline-flex;align-items:center;gap:7px}
.pill.live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.2s infinite;display:block}
.pill.soon{background:rgba(0,196,69,.14);color:var(--green);box-shadow:inset 0 0 0 1px rgba(0,196,69,.45)}
.pill.done{background:var(--panel-deep);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.pill.tbc{color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);border:1px dashed transparent;background:transparent}
.pill.orange{background:rgba(255,169,0,.14);color:var(--orange);box-shadow:inset 0 0 0 1px rgba(255,169,0,.45)}
@keyframes blink{50%{opacity:.25}}

.panel{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:22px;overflow:hidden}
.card{background:var(--panel-deep);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:16px 18px}
.card h3{margin:0 0 8px;font-family:var(--disp);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}

details.terms{box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;background:var(--panel-deep)}
details.terms summary{cursor:pointer;padding:13px 16px;font-family:var(--disp);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.terms summary::-webkit-details-marker{display:none}
details.terms summary:after{content:"+";color:var(--green);font-size:18px;line-height:1}
details[open].terms summary:after{content:"–"}
details.terms .t{padding:0 16px 14px;font-size:13px;line-height:1.65;color:var(--muted)}
details.terms .t p{margin:0 0 8px}
details.terms .t a{color:var(--green)}

/* ---- footer ---- */
footer.site{margin-top:44px;border-top:1px solid var(--line);padding:24px 0 44px;color:var(--muted);font-size:12.5px;line-height:1.7}
footer.site .row1{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
footer.site .age{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--text);color:var(--text);font-family:var(--disp);font-weight:700;font-size:12px;flex:none}
footer.site .links{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
footer.site .links a{color:var(--muted);text-decoration:none;font-weight:700}
footer.site .links a:hover{color:var(--text)}
footer.site p{margin:0}
footer.site .logo{height:22px;opacity:.9;margin-bottom:14px;display:block}

@media (max-width:640px){
  .nav{display:none}
  .upd{display:none}
  .top{gap:12px}
  .top .logo img{height:26px}
}


/* ================= SOFTSWISS Figma foundations =================
   Deliberately last and !important so every page lines up without editing each one. */
body{background:var(--bg) !important;font-family:var(--body) !important;color:var(--text)}

/* type: Montserrat, headings bold uppercase like the casino's page titles; small labels uppercase 600 */
h1,h2,h3,h1.page,h2.sec{font-family:var(--disp) !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:0 !important}
h1.page em,.grad-g,.hero h2 b,.chero h1 b,.ohero h1 b{background:none !important;-webkit-text-fill-color:currentColor;color:var(--green-hi) !important}
.grad-o{background:none !important;-webkit-text-fill-color:currentColor;color:var(--orange) !important}
.lede,.sub,.bio{color:var(--body-text) !important}
.eyebrow,.pl .when,.stat small,.strip small,.clock small,.when .k small,.em,.kv span,.row.hd,.tab small,.pl .fact small,.code small,.step .k,.show .when span{
  font-family:var(--body) !important;font-style:normal !important;font-weight:600 !important;letter-spacing:.04em !important;text-transform:uppercase}
.eyebrow{font-size:12px !important;color:var(--green-hi) !important}

/* buttons: 40px pills. Primary = green gradient, white text. Secondary = card-green pill. Amber = Register-style */
.btn{font-family:var(--body) !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:.02em !important;font-size:13px;
  min-height:40px;padding:0 24px;border-radius:999px !important;background:var(--g-green) !important;color:#fff !important;box-shadow:none !important}
.btn:hover{transform:none;filter:brightness(1.08)}
.btn.sm{min-height:36px;padding:0 18px;font-size:12px}
.btn.lg{min-height:48px;padding:0 32px;font-size:14px}
.btn.stack{padding:10px 24px}
.btn.ghost,.btn.orange.ghost{background:var(--panel) !important;color:var(--text) !important;box-shadow:none !important}
.btn.ghost:hover{background:var(--panel-hi) !important;filter:none}
.btn.orange{background:var(--g-orange) !important;color:#fff !important}

/* tags: rounded pills on the card green */
.pill{font-family:var(--body) !important;font-weight:700 !important;font-size:10.5px !important;letter-spacing:.04em !important;padding:6px 11px !important;border-radius:999px !important;background:var(--panel) !important;box-shadow:none !important;color:var(--text) !important}
.pill.live{color:#fff !important;background:var(--g-green) !important}
.pill.live i{background:#fff !important}
.pill.soon{color:var(--green-hi) !important;background:rgba(55,169,52,.14) !important}
.pill.orange{color:var(--orange) !important;background:rgba(246,192,6,.12) !important}
.pill.done,.pill.tbc{color:var(--muted) !important;background:var(--row) !important}

/* surfaces: rounded cards on #144038, darker rows inside */
.panel{background:var(--panel) !important;box-shadow:none !important;border-radius:var(--r-card) !important;overflow:hidden}
.card,.board,details.terms,.step,.tk{background:var(--panel) !important;box-shadow:none !important;border-radius:var(--r-card) !important}
.pl .fact,.chero .plat a,.code{border-radius:var(--r-row) !important}
.panel .card,.panel .board,.panel details.terms,.panel .step,.panel .tk,.panel .pl .fact,.card .pl .fact{background:var(--row) !important}
.head,.ohero .body,.strip > div:first-child,.hero.sports,.chero .body{background-image:none !important;background-color:var(--panel) !important}

/* tabs and nav: pills, active = green gradient (Figma Promotions/Tournaments tabs) */
.tab{background:var(--panel) !important;border-radius:999px !important;box-shadow:none !important}
.tab.on{background:var(--g-green) !important;color:#fff !important;box-shadow:none !important}
.nav a{font-weight:600;color:var(--body-text);border-radius:999px !important}
.nav a.on{background:var(--panel) !important;box-shadow:none !important;color:var(--text)}

/* prizes: gold 1st, silver 2nd, bronze 3rd, like the tournament prize table */
.row .pz,.stat b.gold,.strip b.gold,.show .res,.pl .fact .cd.prize{color:var(--orange) !important}
.row.t1 .pl{color:var(--orange) !important}
.row.t2 .pl{color:var(--silver) !important}
.row.t3 .pl{color:var(--bronze) !important}
.code{background:var(--row) !important;box-shadow:inset 0 0 0 1px rgba(55,169,52,.5) !important;font-family:var(--body) !important}

/* footer furniture */
footer.site{color:var(--muted);border-top-color:var(--line)}
footer.site .lockup{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
footer.site .lockup img{height:24px;margin:0;opacity:1}
footer.site .lockup .div{width:1px;height:22px;background:rgba(255,255,255,.3)}
footer.site .lockup .line{font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--text);text-transform:uppercase}

/* the header (Figma chrome #0A2920), and with it the primary CTA, stays on screen while the page scrolls */
.top{position:sticky;top:0;z-index:30;background:var(--chrome);box-shadow:0 1px 0 var(--line);margin:0 -18px;padding:12px 18px !important;min-height:64px}

/* ---- slide-in menu (mirrors bit9ja.com's mobile menu) ---- */
.burger{display:none;width:44px;height:44px;border:0;background:var(--panel);border-radius:999px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;flex:none}
.burger span{display:block;width:18px;height:2px;background:var(--text)}
@media (max-width:900px){.burger{display:flex}.nav{display:none}}
body.menu-open{overflow:hidden}
.drawer{position:fixed;inset:0;z-index:100}
.drawer[hidden]{display:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.drawer .sheet{position:absolute;left:0;top:0;bottom:0;width:min(86vw,360px);background:var(--chrome);box-shadow:1px 0 0 var(--line);padding:16px 16px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;animation:slidein .22s ease}
@keyframes slidein{from{transform:translateX(-100%)}to{transform:none}}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.drawer .dh img{height:26px}
.drawer .x{width:40px;height:40px;border:0;background:var(--panel);border-radius:999px;color:var(--text);font-size:24px;line-height:1;cursor:pointer}
.drawer .dg{display:flex;flex-direction:column;gap:6px}
.drawer .mi{display:flex;align-items:center;gap:14px;padding:12px 16px;text-decoration:none;color:var(--text);font-weight:600;font-size:15px;background:transparent;border-radius:999px}
.drawer .mi svg{width:22px;height:22px;color:var(--green);flex:none}
.drawer .mi.on{background:var(--g-green)}
.drawer .mi.on svg{color:#fff}
.drawer .mi.amber{background:var(--g-orange);color:#fff}
.drawer .mi.amber svg{color:#fff}
.drawer .dl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.drawer .btn{margin-top:4px}
.drawer .df{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* language switch in the header */
.langsw{border:0;cursor:pointer;background:var(--panel);color:var(--text);font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:0 14px;min-height:40px;border-radius:999px}
.langsw:hover{background:var(--panel-hi)}
@media (max-width:640px){.langsw{padding:10px 9px;font-size:11px}}

/* header: casino-style account buttons (Sign in = secondary pill, Register = primary pill) */
.top .signin{margin-left:4px}
@media (max-width:760px){ .top .upd{display:none} .top .btn.sm{min-height:34px;padding:0 13px;font-size:11px} }
@media (max-width:380px){ .top .signin{display:none} }

/* footer: casino footer columns + 18+ roundel */
footer.site .fcols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding-bottom:26px;margin-bottom:22px;border-bottom:1px solid var(--line)}
footer.site .fcol h4{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--text);text-transform:none;letter-spacing:0}
footer.site .fcol a{display:block;font-size:13px;line-height:1.5;color:var(--muted);text-decoration:none;padding:3px 0}
footer.site .fcol a:hover{color:var(--text)}
footer.site .r18{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50% !important;box-shadow:inset 0 0 0 2px var(--muted);font-size:12px;font-weight:800;color:var(--text)}
@media (max-width:760px){ footer.site .fcols{grid-template-columns:repeat(2,1fr);gap:18px 16px} }


/* secondary pill inside a card: the card is already #144038, so the pill takes the row colour (Figma: rows inside cards #061E17) */
.panel .btn.ghost{background:var(--row) !important}
.panel .btn.ghost:hover{background:var(--panel-hi) !important}

/* "Show all" under boards = Figma "SHOW MORE": centred secondary pill */
.morerows{display:block !important;width:auto !important;margin:14px auto 0 !important;min-height:40px;padding:0 26px !important;border-radius:999px !important;background:var(--row) !important;box-shadow:none !important;color:var(--text) !important;font-family:var(--body) !important;font-weight:700 !important;font-size:12px !important;letter-spacing:.02em !important;text-transform:uppercase}
.morerows:hover{background:var(--panel-hi) !important}

/* --- 2 Oct polish: creator names, mobile banners, mobile leaderboard prizes --- */
.crow .bub b{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:640px){
  .slider.slim .track .slide{aspect-ratio:auto !important;flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;background-size:100% auto !important;background-position:top center !important;background-repeat:no-repeat !important;background-color:var(--panel,#144038) !important}
  .slider.slim .track .slide:before{position:static !important;inset:auto !important;background:none !important;display:block;width:100%;aspect-ratio:1534/480;flex:none}
  .slider.slim .track .slide .copy{max-width:100% !important;padding:12px 16px 16px !important}
  .row{grid-template-columns:24px minmax(0,1fr) auto auto !important}
  .row .pz,.row .wg{white-space:nowrap}
}

/* footer compliance: 18+ line and age notice at 15px */
footer.site p.agep{font-size:15px;color:var(--body-text)}
/* anchor targets land below the 64px sticky header */
section[id],h2[id],[id].sec{scroll-margin-top:80px}