/* club99official.net - the operator floor.
   Royal indigo ground, gold for money, rebuilt from the real Club99 floor. The organising idea
   is the live transactions ledger: three columns on desktop with the hero and the ledger on the
   left, the shelves in the middle and the account panel on the right.
   Namespace: .c9-  */

:root{
  --ink:#070b24;          /* page ground: deep indigo, almost black */
  --ink2:#0e1540;         /* raised panel */
  --pan:#0a1032;          /* inset panel */
  --line:#232d6e;
  --gold:#ffd700;         /* money, CTAs, the wordmark */
  --gold2:#c9a227;
  --text:#e8ebff;
  --mute:#9aa3d4;
  --win:#36d399;          /* deposits in */
  --out:#ffb648;          /* withdrawals out */
  --rad:14px;
  --mx:1320px;
}

*{box-sizing:border-box}
html{overflow-x:clip}   /* body-only overflow-x fools Chromium but not iOS */
body{
  margin:0;background:var(--ink);color:var(--text);
  font:16px/1.65 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,
       "PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;min-width:0}   /* height:auto or injected attrs beat aspect-ratio */
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(25px,4.1vw,42px);letter-spacing:-.01em}
h2{font-size:clamp(20px,2.7vw,29px)}
h3{font-size:18px}
p{margin:0 0 1em}
main{display:block}
table{border-collapse:collapse}

/* A hide utility has to beat every rule it switches off (CLAUDE.md, the vr7 trap). */
.c9-hide{display:none!important}
.c9-off{display:none!important}

/* ---------------------------------------------------------------- buttons */
.c9-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;border-radius:10px;font-weight:700;font-size:14px;
  border:1px solid transparent;cursor:pointer;min-height:44px;text-align:center}
.c9-btn.p,.c9-btn.g{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#241c00;
  box-shadow:0 6px 18px rgba(255,215,0,.22)}
.c9-btn.o{background:transparent;border-color:var(--gold);color:var(--gold)}
.c9-btn.lg{padding:14px 24px;font-size:16px;min-height:50px}

/* ---------------------------------------------------------------- chrome */
.c9-head{position:static;background:linear-gradient(180deg,#0b1340,#070b24);
  border-bottom:1px solid var(--line)}
.c9-head .bar{max-width:var(--mx);margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:10px 16px;flex-wrap:wrap;row-gap:10px}
/* The whole lockup must NOT be nowrap. The subtitle is 22 characters at .13em tracking, which
   is wider than a 375 viewport, and a nowrap ancestor made it push the document 155px sideways
   from inside the footer -- where nothing measured "wider than the viewport", because the
   element itself was not oversized, only unbreakable. */
.c9-logo{display:flex;align-items:center;gap:9px;font-weight:800;min-width:0}
/* The inline mark carries a viewBox but no width/height, so as a flex item with width:auto it
   takes its max-content and fills the column -- in the footer it measured 343px and pushed the
   wordmark to x=368 on a 375 viewport. An SVG in a flex cell always needs an explicit box. */
.c9-logo svg{flex:0 0 auto;width:34px;height:34px}
.c9-foot .c9-logo svg{width:30px;height:30px}
.c9-logo .wm{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.c9-logo .wm b{font-size:21px;color:var(--gold);letter-spacing:.02em;white-space:nowrap;
  text-shadow:0 0 14px rgba(255,215,0,.35)}
.c9-logo .wm small{font-size:9.5px;color:var(--mute);letter-spacing:.11em;min-width:0;
  overflow-wrap:anywhere}
@media(max-width:420px){.c9-logo .wm small{font-size:8.5px;letter-spacing:.06em}}
.c9-burger{width:44px;height:44px;display:none;align-items:center;justify-content:center;
  background:var(--ink2);border:1px solid var(--line);border-radius:10px;color:var(--text);
  font-size:17px;cursor:pointer}
.c9-acct{display:flex;gap:8px;align-items:center;margin-left:auto}
.c9-lang{display:flex;gap:5px}
.c9-lang a{white-space:nowrap;font-size:12px;padding:7px 10px;border-radius:999px;
  background:var(--ink2);border:1px solid var(--line);color:var(--mute);min-height:34px;
  display:inline-flex;align-items:center}
.c9-lang a.on{background:var(--gold);color:#241c00;border-color:var(--gold);font-weight:700}

/* category bar, with the studio panel that drops from each item */
.c9-menu{background:var(--ink2);border-bottom:1px solid var(--line);position:relative}
.c9-menu{max-width:none;display:flex;justify-content:center}
.c9-menu .it{position:relative;display:inline-block}
.c9-menu .it>a{display:block;padding:12px 15px;font-size:14px;color:var(--mute);
  white-space:nowrap;border-bottom:2px solid transparent}
.c9-menu .it:hover>a,.c9-menu .it:focus-within>a{color:var(--gold);border-bottom-color:var(--gold)}
.c9-menu .pan{display:none;position:absolute;top:100%;left:0;z-index:30;min-width:280px;
  background:var(--ink2);border:1px solid var(--line);border-radius:0 0 12px 12px;
  padding:12px;gap:9px;flex-wrap:wrap}
.c9-menu .it:hover .pan,.c9-menu .it:focus-within .pan{display:flex}
.c9-menu .pan .dark{background:#f2f4ff;border-radius:8px;padding:8px 11px;height:44px;
  display:flex;align-items:center;justify-content:center;min-width:0;flex:0 1 auto}
.c9-menu .pan .dark img{max-height:22px;width:auto;min-width:0;object-fit:contain}

.c9-tick{background:#060a1e;border-bottom:1px solid var(--line);overflow:hidden}
.c9-tick p{max-width:var(--mx);margin:0 auto;padding:7px 16px;font-size:13px;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------------------------------------------------------- the floor */
.c9-floor{max-width:var(--mx);margin:0 auto;padding:16px;display:grid;gap:16px;
  grid-template-columns:1fr}
.c9-floor .col{display:flex;flex-direction:column;gap:16px;min-width:0}
/* phone order: the account panel (register button) first, in the thumb zone */
.c9-floor .col.r{order:1}
.c9-floor .col.l{order:2}
.c9-floor .col.m{order:3}
@media(min-width:1040px){
  .c9-floor{grid-template-columns:300px minmax(0,1fr) 268px;align-items:start}
  .c9-floor .col.l{order:1}
  .c9-floor .col.m{order:2}
  .c9-floor .col.r{order:3;position:sticky;top:12px}
}

/* The hero sits in a ~300px column, so an absolutely positioned caption over a fixed-aspect
   image clips whatever does not fit -- and what it clipped was the H1 and the eyebrow, the two
   things that must never be cut. Stack instead: the picture keeps its aspect, the words sit
   under it in normal flow and the box grows to hold them. */
.c9-hero{position:relative;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);
  background:var(--ink2);display:flex;flex-direction:column}
.c9-hero img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;flex:0 0 auto}
.c9-hero .tx{position:static;padding:14px 16px 16px;background:var(--ink2)}
.c9-hero .eb{display:inline-block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}
.c9-hero h1{font-size:clamp(20px,2.4vw,26px);margin-bottom:.4em}
.c9-hero .lead{font-size:13.5px;color:var(--mute);margin-bottom:12px}
.c9-hero .act{display:flex;gap:9px;flex-wrap:wrap}

/* the live transactions ledger - this brand's signature */
.c9-ledger{background:var(--ink2);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden}
.c9-ledger .hd{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--pan);
  border-bottom:1px solid var(--line);font-size:13px}
.c9-ledger .hd em{font-style:normal;color:#ff6b6b;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;margin-left:auto}
.c9-ledger .dot{width:7px;height:7px;border-radius:50%;background:#ff6b6b;
  box-shadow:0 0 0 0 rgba(255,107,107,.7);animation:c9pulse 2s infinite;flex:0 0 auto}
@keyframes c9pulse{70%{box-shadow:0 0 0 7px rgba(255,107,107,0)}
                   100%{box-shadow:0 0 0 0 rgba(255,107,107,0)}}
@media(prefers-reduced-motion:reduce){.c9-ledger .dot{animation:none}}
.c9-ledger table{width:100%;font-size:12.5px;font-variant-numeric:tabular-nums}
.c9-ledger th{background:var(--pan);color:var(--mute);font-weight:600;padding:7px 10px;
  text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.c9-ledger td{padding:7px 10px;border-top:1px solid rgba(35,45,110,.6)}
.c9-ledger .ph{color:var(--mute)}
.c9-ledger .am{text-align:right;font-weight:700}
.c9-ledger .am.in{color:var(--win)}
.c9-ledger .am.out{color:var(--out)}

.c9-ref{background:linear-gradient(145deg,#141c52,#0d1238);border:1px solid var(--line);
  border-radius:var(--rad);padding:15px}
.c9-ref b{display:block;color:var(--gold);font-size:15px;margin-bottom:6px}
.c9-ref p{font-size:13px;color:var(--mute);margin-bottom:11px}

.c9-acct-panel{background:var(--ink2);border:1px solid var(--line);border-radius:var(--rad);
  padding:14px;display:flex;flex-direction:column;gap:11px}
.c9-acct-panel .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.c9-acct-panel .btns .c9-btn{padding:11px 6px;font-size:13px}
.c9-acct-panel .bal{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:10px 12px;background:var(--pan);border-radius:10px;border:1px solid var(--line)}
.c9-acct-panel .bal span{font-size:12px;color:var(--mute)}
.c9-acct-panel .bal b{font-size:19px;color:var(--gold);font-variant-numeric:tabular-nums}
.c9-acct-panel .row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 12px;border-radius:10px;background:var(--pan);border:1px solid var(--line);
  min-height:44px}
.c9-acct-panel .row b{font-size:13.5px}
.c9-acct-panel .row em{font-style:normal;font-size:12px;color:var(--mute)}
.c9-acct-panel .note{font-size:12px;color:var(--mute);margin:0}
.c9-acct-panel .chan{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.c9-acct-panel .ch{display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-radius:10px;
  background:var(--pan);border:1px solid var(--line);min-height:44px;justify-content:center;
  min-width:0}
.c9-acct-panel .ch b{font-size:12.5px}
.c9-acct-panel .ch em{font-style:normal;font-size:10.5px;color:var(--mute)}
.c9-acct-panel .ch.tg b{color:#4aa8e8}
.c9-acct-panel .ch.wa b{color:#4ad07d}

.c9-trust{display:flex;flex-wrap:wrap;gap:8px}
.c9-trust span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mute);
  background:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:7px 12px}
.c9-trust i{color:var(--gold);font-style:normal}

/* ---------------------------------------------------------------- shelf */
.c9-shelf{background:var(--ink2);border:1px solid var(--line);border-radius:var(--rad);padding:14px}
.c9-shelf .hd{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.c9-shelf .hd h2{margin:0;font-size:18px}
.c9-shelf .lnk{margin-left:auto;font-size:12.5px;color:var(--gold)}
.c9-shelf .tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
.c9-shelf .tabs::-webkit-scrollbar{display:none}
.c9-shelf .tb{background:var(--pan);border:1px solid var(--line);color:var(--mute);
  padding:9px 14px;border-radius:999px;font-size:13px;white-space:nowrap;min-height:40px;
  cursor:pointer}
.c9-shelf .tb.on{background:var(--gold);border-color:var(--gold);color:#241c00;font-weight:700}
.c9-games{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.c9-games{grid-template-columns:repeat(3,1fr)}}
.gc{display:block;background:var(--pan);border:1px solid var(--line);border-radius:11px;
  overflow:hidden;min-width:0}
.gc img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.gc .mt{padding:7px 9px;display:flex;flex-direction:column;gap:1px;min-width:0}
.gc .mt b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.gc .mt em{font-style:normal;font-size:11px;color:var(--gold2)}

/* category tiles */
.c9-cats{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.c9-cats{grid-template-columns:repeat(3,1fr)}}
.c9-cats .tile{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  min-width:0}
.c9-cats .tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.c9-cats .cap{position:absolute;inset:auto 0 0 0;padding:9px 11px;
  background:linear-gradient(180deg,rgba(7,11,36,0),rgba(7,11,36,.95) 55%);
  display:flex;flex-direction:column;gap:1px;min-width:0}
.c9-cats .cap b{font-size:13.5px;color:var(--gold)}
.c9-cats .cap em{font-style:normal;font-size:11.5px;color:var(--mute);line-height:1.35}

/* ---------------------------------------------------------------- registers */
.c9-poker,.c9-live,.c9-esp,.c9-pool,.c9-wall,.c9-apk{max-width:var(--mx);margin:0 auto 22px;
  padding:0 16px}
.c9-poker .hd h2{margin-bottom:.3em}
.c9-poker .hd p,.c9-live p{color:var(--mute);font-size:14px;max-width:66ch}
.c9-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rad);
  border:1px solid var(--line)}
.c9-tbl,.c9-poker table{width:100%;background:var(--ink2);font-size:14px;
  font-variant-numeric:tabular-nums}
.c9-poker table{border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.c9-tbl th,.c9-poker th{background:var(--pan);color:var(--mute);text-align:left;padding:10px 13px;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.c9-tbl td,.c9-poker td{padding:10px 13px;border-top:1px solid rgba(35,45,110,.6)}
.c9-tbl .amt{text-align:right;color:var(--gold);font-weight:700}
.c9-live .c9-btn,.c9-poker .c9-btn{margin-top:13px}

/* provider wall */
.c9-wall .logos{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:12px}
/* ONE chip treatment sitewide (feedback_one_chip_per_site): pale plate, so a dark-ink or
   thin-stroke wordmark cannot wash out against the indigo ground. */
.c9-wall .dark{display:flex;align-items:center;justify-content:center;min-width:0;flex:0 1 auto;
  background:#f2f4ff;border:1px solid #d8ddf5;border-radius:10px;padding:10px 14px;height:54px}
.c9-wall .dark img{max-height:26px;width:auto;min-width:0;object-fit:contain}
.c9-wall .sub{font-size:13px;color:var(--mute);margin:0 0 8px}
.c9-wall .chips{display:flex;flex-wrap:wrap;gap:7px}
.c9-wall .chip{font-size:12px;color:var(--mute);background:var(--pan);border:1px solid var(--line);
  border-radius:999px;padding:6px 11px}

/* esports board */
.c9-esp{display:grid;gap:16px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.c9-esp{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.c9-esp .tx .eb{display:inline-block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}
.c9-esp .tx p{color:var(--mute);font-size:14.5px}
.c9-esp .mk{list-style:none;padding:0;margin:0 0 15px;display:flex;flex-wrap:wrap;gap:7px}
.c9-esp .mk li{font-size:12.5px;background:var(--pan);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;color:var(--mute)}
.c9-esp .ti{display:flex;flex-wrap:wrap;gap:9px;align-content:start}
.c9-esp .t{font-size:13px;font-weight:700;color:var(--gold);background:var(--pan);
  border:1px solid var(--gold2);border-radius:10px;padding:11px 14px}
.c9-esp .bk{flex:1 1 100%;font-size:12.5px;color:var(--mute);margin-top:4px}

/* jackpot pool */
.c9-pool{text-align:center;background:linear-gradient(145deg,#141c52,#0b1134);
  border:1px solid var(--gold2);border-radius:var(--rad);padding:22px 16px;
  max-width:calc(var(--mx) - 32px)}
.c9-pool .jp{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-bottom:9px}
.c9-pool .jp span{font-size:14px;color:var(--mute);letter-spacing:.1em}
.c9-pool .jp b{font-size:clamp(28px,5.5vw,46px);color:var(--gold);
  font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(255,215,0,.3)}
.c9-pool p{color:var(--mute);font-size:13.5px;max-width:62ch;margin:0 auto 13px}

/* APK block */
.c9-apk{display:grid;gap:16px;grid-template-columns:1fr;align-items:center}
@media(min-width:820px){.c9-apk{grid-template-columns:270px minmax(0,1fr)}}
.c9-apk img{border-radius:var(--rad);border:1px solid var(--line);width:100%}
.c9-apk .tx p{color:var(--mute);font-size:14.5px}
.c9-apk .meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.c9-apk .meta span{font-size:12px;color:var(--mute);background:var(--pan);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px}

/* ---------------------------------------------------------------- page body */
.c9-content{max-width:860px;margin:0 auto;padding:0 16px 26px}
.c9-content h2{margin-top:1.5em}
.c9-content a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.c9-kpis{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin:0 0 20px;padding:0;
  list-style:none}
@media(min-width:640px){.c9-kpis{grid-template-columns:repeat(4,1fr)}}
.c9-kpis li{background:var(--ink2);border:1px solid var(--line);border-radius:12px;padding:13px}
.c9-kpis b{display:block;font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums}
.c9-kpis span{font-size:12px;color:var(--mute)}
.c9-steps{list-style:none;counter-reset:s;padding:0;margin:0 0 22px}
.c9-steps li{counter-increment:s;position:relative;padding:0 0 14px 44px}
.c9-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:31px;height:31px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--gold);color:#241c00;font-weight:800;font-size:14px}
.c9-steps b{display:block;margin-bottom:2px}
.c9-content .c9-tw{margin:0 0 22px}
.c9-faq{margin:0 0 22px}
.c9-faq details{background:var(--ink2);border:1px solid var(--line);border-radius:11px;
  padding:12px 15px;margin-bottom:9px}
.c9-faq summary{cursor:pointer;font-weight:700;min-height:28px}
.c9-band{background:linear-gradient(145deg,#141c52,#0b1134);border:1px solid var(--gold2);
  border-radius:var(--rad);padding:19px;margin:0 0 22px;text-align:center}
.c9-band b{display:block;font-size:18px;color:var(--gold);margin-bottom:6px}
.c9-band p{color:var(--mute);font-size:14px}

/* ---------------------------------------------------------------- footer */
.c9-foot{background:#050818;border-top:1px solid var(--line);padding:26px 0 96px;margin-top:26px}
.c9-foot .cols{max-width:var(--mx);margin:0 auto;padding:0 16px;display:grid;gap:22px;
  grid-template-columns:1fr}
@media(min-width:760px){.c9-foot .cols{grid-template-columns:2fr 1fr 1fr}}
.c9-foot .w h4,.c9-foot .w b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);display:block;margin:0 0 9px}
.c9-foot ul{list-style:none;padding:0;margin:0}
.c9-foot li{margin-bottom:6px;font-size:13.5px;color:var(--mute)}
.c9-foot .ab{font-size:13px;color:var(--mute);max-width:56ch}
.c9-foot .c9-logo{margin-bottom:10px}
.c9-foot .pay,.c9-foot .trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.c9-foot .pay span,.c9-foot .trust span{display:flex;align-items:center;justify-content:center;
  min-width:0;flex:0 1 auto;background:#f2f4ff;border:1px solid #d8ddf5;border-radius:8px;
  padding:7px 10px;height:40px}
.c9-foot .pay img,.c9-foot .trust img{max-height:22px;width:auto;min-width:0;object-fit:contain}
.c9-foot .soc{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.c9-foot .lic,.c9-foot .rg{font-size:12.5px;color:var(--mute);margin:11px 0 0}
.c9-foot .cr{max-width:var(--mx);margin:16px auto 0;padding:13px 16px 0;
  border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
.coin{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gold);
  min-height:44px}

/* bottom app bar + sticky CTA */
.c9-bar{position:fixed;inset:auto 0 0 0;z-index:40;background:var(--pan);
  border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom)}
.c9-bar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;
  font-size:10.5px;color:var(--mute);min-height:54px;justify-content:center;text-align:center}
.c9-bar .i{font-style:normal;font-size:17px;color:var(--gold)}
@media(min-width:1040px){.c9-bar{display:none}.c9-foot{padding-bottom:26px}}
.c9-scta{position:fixed;inset:auto 14px 64px auto;z-index:41}
@media(min-width:1040px){.c9-scta{inset:auto 20px 20px auto}}

/* ---------------------------------------------------------------- entry modal */
.c9-pop{position:fixed;inset:0;z-index:60;background:rgba(3,5,18,.84);display:none;
  align-items:center;justify-content:center;padding:16px}
.c9-pop.on{display:flex}
.c9-pop .bx{position:relative;background:var(--ink2);border:1px solid var(--gold2);
  border-radius:16px;max-width:380px;width:100%;max-height:92vh;overflow:hidden;
  display:flex;flex-direction:column}
/* .bx is overflow:hidden for its corners, so the close control lives INSIDE it */
.c9-pop .x{position:absolute;top:9px;right:9px;width:34px;height:34px;border-radius:50%;
  background:var(--pan);border:1px solid var(--line);color:var(--text);z-index:2;cursor:pointer;
  font-size:15px;line-height:1}
.c9-pop .hd{padding:16px 18px 0}
.c9-pop .panes{overflow-y:auto}
.c9-pop .pane{padding:18px}
.c9-pop .eb{display:inline-block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}
.c9-pop .big{display:block;font-size:26px;color:var(--gold);font-weight:800;margin-bottom:7px;
  font-variant-numeric:tabular-nums}
.c9-pop p{font-size:14px;color:var(--mute);margin-bottom:15px}
.c9-pop .pg{display:flex;align-items:center;gap:8px;padding:11px 16px;
  border-top:1px solid var(--line);background:var(--pan)}
.c9-pop .pv,.c9-pop .nx{width:38px;height:38px;border-radius:9px;background:var(--ink2);
  border:1px solid var(--line);color:var(--text);cursor:pointer;font-size:15px}
.c9-pop .ct{font-size:12px;color:var(--mute);margin-left:auto;font-variant-numeric:tabular-nums}
.c9-pop .dots{display:flex;gap:5px}
.c9-pop .dot{width:9px;height:9px;border-radius:50%;background:var(--line);
  border:0;padding:0;cursor:pointer}
.c9-pop .dot.on{background:var(--gold)}

/* ---------------------------------------------------------------- phones */
@media(max-width:1039px){
  .c9-burger{display:flex}
  .c9-menu{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .c9-menu::-webkit-scrollbar{display:none}
  .c9-menu .pan{display:none!important}   /* no hover on touch; the bar scrolls instead */
  .c9-acct{order:3;width:100%;margin-left:0;justify-content:space-between;flex-wrap:wrap;
    row-gap:8px;min-width:0}
  .c9-acct .c9-btn{flex:1 1 auto;max-width:190px;min-width:0}
  .c9-lang{min-width:0;flex-wrap:wrap}
}
@media(max-width:400px){
  /* At 320 the three language chips plus Login and Register overflow a single row by 19px.
     Give the chips their own line; the two buttons then split the width underneath. */
  .c9-acct{justify-content:flex-start;gap:8px}
  .c9-lang{flex:1 1 100%;order:-1}
  .c9-acct .c9-btn{flex:1 1 calc(50% - 4px);max-width:none}
  .c9-lang a{padding:6px 9px;font-size:11.5px}
  .c9-floor{padding:12px}
  .c9-games{gap:8px}
  .c9-ledger table{font-size:11.5px}
  .c9-ledger td,.c9-ledger th{padding:6px 8px}
}