/* ===========================================================
   SHABAAN GAME — shared styles  (dark blue-green industrial)
   Legal entity: SHABAAN RICE LIMITED · shabababa.com
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#0A0F0F;
  --ink-2:#0E1615;
  --petrol:#06312E;
  --petrol-2:#0A403B;
  --jade:#19E0A8;
  --aqua:#5FE0C4;
  --line:rgba(95,224,196,0.16);
  --line-2:rgba(95,224,196,0.28);
  --fg:#DCE9E5;
  --fg-dim:#7E938D;
  --fg-mute:#4F625E;

  --dsp:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'IBM Plex Mono',monospace;

  --rail:64px;
  --maxw:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--fg);font-family:var(--body);
  line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--dsp);font-weight:600;line-height:1.02;letter-spacing:-0.02em}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jade)}
.dim{color:var(--fg-dim)}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---- left rail ---- */
.rail{position:fixed;top:0;left:0;width:var(--rail);height:100vh;z-index:40;
  border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;padding:22px 0;background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.rail .r-top{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);
  font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--fg-dim)}
.rail .r-mark{width:12px;height:12px;background:var(--jade);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.rail .r-bot{writing-mode:vertical-rl;font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;color:var(--fg-mute)}
.page{margin-left:var(--rail)}

/* ---- nav ---- */
header.nav{position:sticky;top:0;z-index:30;background:rgba(10,15,15,.78);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;
  max-width:var(--maxw);margin:0 auto;padding:0 32px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--dsp);font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.logo .glyph{width:30px;height:30px;border:1.5px solid var(--jade);display:grid;place-items:center;position:relative}
.logo .glyph::before{content:"";width:12px;height:12px;background:var(--jade);
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.logo small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;color:var(--fg-dim);font-weight:400;margin-top:2px}
nav.links{display:flex;gap:6px;align-items:center}
nav.links a{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);padding:8px 14px;transition:color .2s}
nav.links a:hover{color:var(--jade)}
.nav-cta{border:1px solid var(--line-2);color:var(--jade)!important;transition:background .2s,border-color .2s}
.nav-cta:hover{background:var(--jade);color:var(--ink)!important;border-color:var(--jade)}
.burger{display:none;background:none;border:1px solid var(--line-2);color:var(--jade);width:42px;height:42px;cursor:pointer}
.burger svg{width:20px;height:20px}

/* ---- buttons ---- */
.btn{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--line-2);cursor:pointer;transition:.2s;display:inline-flex;gap:10px;align-items:center}
.btn.solid{background:var(--jade);color:var(--ink);border-color:var(--jade);font-weight:500}
.btn.solid:hover{background:var(--aqua);border-color:var(--aqua)}
.btn.line:hover{border-color:var(--jade);color:var(--jade)}

/* ---- hero ---- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;min-height:calc(100vh - 72px)}
.hero-l{padding:74px 32px 54px;display:flex;flex-direction:column;justify-content:center;
  max-width:calc(var(--maxw)*0.6);margin-left:max(0px,calc((100vw - var(--rail) - var(--maxw))/2))}
.hero-tag{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.hero-tag .bar{height:1px;width:56px;background:var(--line-2)}
h1.hero-h{font-size:clamp(2.6rem,6.4vw,5.4rem);font-weight:700}
h1.hero-h em{font-style:normal;color:var(--jade)}
.hero-l p.lead{margin:26px 0 0;max-width:46ch;color:var(--fg-dim);font-size:1.12rem}
.hero-actions{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.hero-r{position:relative;border-left:1px solid var(--line);
  background:radial-gradient(120% 90% at 80% 20%,var(--petrol),transparent 60%),var(--ink-2);
  display:grid;place-items:center;overflow:hidden}
.hero-r svg{width:100%;height:100%;display:block}
.coord{position:absolute;bottom:20px;left:24px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--fg-mute)}

/* ---- ticker ---- */
.ticker{border-bottom:1px solid var(--line);background:var(--ink-2);overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;gap:0;animation:scroll 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:16px;padding:16px 30px;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--fg-dim)}
.ticker span b{color:var(--jade);font-weight:500}
.ticker span::before{content:"◆";color:var(--aqua);font-size:.6rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---- section frame ---- */
section.blk{border-bottom:1px solid var(--line);padding:96px 0}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;margin-bottom:56px}
.sec-head .idx{font-family:var(--mono);font-size:.78rem;color:var(--jade);letter-spacing:.1em}
.sec-head h2{font-size:clamp(1.9rem,3.8vw,3rem)}
.sec-head .sub{grid-column:2;color:var(--fg-dim);max-width:60ch;margin-top:6px}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:34px 26px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .n{font-family:var(--dsp);font-size:2.9rem;font-weight:600;color:var(--fg);line-height:1}
.stat .n span{color:var(--jade)}
.stat .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin-top:12px}

/* ---- about ---- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about p{color:var(--fg-dim);margin-bottom:18px;font-size:1.04rem}
.about p strong{color:var(--fg);font-weight:600}
.about .facts{border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.fact .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--jade);white-space:nowrap}
.fact .v{color:var(--fg)}

/* ---- games grid ---- */
.games{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.game{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;position:relative;transition:background .25s;display:flex;flex-direction:column}
.game:hover{background:var(--ink-2)}
.game .art{aspect-ratio:16/10;border-bottom:1px solid var(--line);display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,var(--petrol),var(--ink-2))}
.game .art svg{width:44%}
.game .meta{padding:26px 28px 30px}
.game .gno{font-family:var(--mono);font-size:.72rem;color:var(--fg-mute);letter-spacing:.1em}
.game h3{font-size:1.4rem;margin:12px 0 4px}
.game .genre{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--jade)}
.game p{color:var(--fg-dim);font-size:.94rem;margin:16px 0 20px}
.game .plat{display:flex;gap:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--fg-dim)}
.game .plat span{border:1px solid var(--line);padding:5px 10px}

/* ---- process / pillars ---- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.step{padding:36px 26px 40px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step .sno{font-family:var(--dsp);font-size:3.4rem;font-weight:700;line-height:.8;-webkit-text-stroke:1px var(--line-2);color:transparent}
.step h3{font-size:1.25rem;margin:18px 0 10px}
.step p{color:var(--fg-dim);font-size:.94rem}
.step .tick{position:absolute;top:44px;right:26px;width:8px;height:8px;background:var(--jade);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* ---- split ---- */
.split{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line)}
.split .visual{background:radial-gradient(130% 100% at 20% 30%,var(--petrol),var(--ink-2));
  border-right:1px solid var(--line);display:grid;place-items:center;padding:40px;min-height:340px}
.split .visual svg{width:80%;max-width:280px}
.split .body{padding:48px 44px}
.split .body h2{font-size:2rem;margin-bottom:20px}
.qlist{list-style:none;margin-top:26px}
.qlist li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--line);color:var(--fg-dim)}
.qlist li b{color:var(--fg);font-weight:600;display:block;font-family:var(--dsp)}
.qlist .m{font-family:var(--mono);font-size:.72rem;color:var(--jade);letter-spacing:.1em;padding-top:3px}

/* ---- reach ---- */
.reach{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.region{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.region .rn{font-family:var(--dsp);font-size:1.2rem}
.region .rv{font-family:var(--mono);font-size:.8rem;color:var(--jade)}
.region .rc{font-family:var(--mono);font-size:.72rem;color:var(--fg-mute)}

/* ---- contact ---- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:22px}
.cinfo{border-top:1px solid var(--line);margin-top:30px}
.cinfo .row{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.cinfo .row .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--jade)}
.cinfo .row .v{color:var(--fg)}
.cinfo .row .v a:hover{color:var(--jade)}
.form{border:1px solid var(--line);padding:34px}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:8px}
.field input,.field textarea{width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--fg);font-family:var(--body);font-size:.95rem;padding:13px 15px;outline:none;transition:border-color .2s}
.field input:focus,.field textarea:focus{border-color:var(--jade)}
.field textarea{resize:vertical;min-height:110px}
.form .btn{width:100%;justify-content:center}
.form-note{font-family:var(--mono);font-size:.66rem;color:var(--fg-mute);margin-top:14px;letter-spacing:.06em}

/* ---- legal / prose ---- */
.page-head{padding:74px 0 30px;border-bottom:1px solid var(--line)}
.page-head .idx{font-family:var(--mono);font-size:.74rem;color:var(--jade);letter-spacing:.14em;text-transform:uppercase}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-top:16px}
.page-head .meta{font-family:var(--mono);font-size:.72rem;color:var(--fg-mute);letter-spacing:.1em;margin-top:14px}
.prose{max-width:820px;margin:0 auto;padding:64px 0}
.prose h2{font-family:var(--dsp);font-size:1.4rem;color:var(--fg);margin:2.4em 0 .6em;padding-top:1.2em;border-top:1px solid var(--line)}
.prose h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:1.05rem;margin:1.6em 0 .4em;color:var(--aqua)}
.prose p,.prose li{color:var(--fg-dim);margin-bottom:14px}
.prose strong{color:var(--fg);font-weight:600}
.prose a{color:var(--jade)}
.prose a:hover{color:var(--aqua)}
.prose ul{padding-left:1.2em;margin-bottom:16px}
.prose li{margin-bottom:8px}
.callout{border:1px solid var(--line-2);border-left:3px solid var(--jade);background:var(--ink-2);padding:20px 24px;margin:22px 0}
.callout p:last-child,.callout ul:last-child,.callout li:last-child{margin-bottom:0}
.callout .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);display:block;margin-bottom:10px}

/* ---- footer ---- */
footer{padding:64px 0 34px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.foot-top p{color:var(--fg-dim);max-width:40ch;margin-top:18px;font-size:.95rem}
.foot-top .addr{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--fg-mute);margin-top:18px;font-style:normal;line-height:1.8}
.foot-col h5{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:16px}
.foot-col a{display:block;padding:6px 0;color:var(--fg);font-size:.92rem;transition:color .2s}
.foot-col a:hover{color:var(--jade)}
.foot-bot{display:flex;justify-content:space-between;padding-top:26px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--fg-mute);flex-wrap:wrap;gap:10px}

/* ---- responsive ---- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-r{min-height:280px;border-left:0;border-top:1px solid var(--line)}
  .hero-l{max-width:none;margin-left:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
  .about,.reach,.contact{grid-template-columns:1fr;gap:40px}
  .games{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:0}
  .split{grid-template-columns:1fr}
  .split .visual{border-right:0;border-bottom:1px solid var(--line)}
  .foot-top{grid-template-columns:1fr}
}
@media(max-width:640px){
  :root{--rail:0px}
  .rail{display:none}
  nav.links{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:var(--ink-2);border-bottom:1px solid var(--line);padding:12px 0}
  nav.links.open{display:flex}
  nav.links a{padding:14px 32px}
  .burger{display:grid;place-items:center}
  .games,.flow{grid-template-columns:1fr}
  .game,.step{border-right:0}
  .stats{grid-template-columns:1fr 1fr}
  .shell{padding:0 20px}
  .nav-in{padding:0 20px}
  .hero-l{padding:54px 20px 44px}
}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}html{scroll-behavior:auto}}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}