/* ==========================================================================
   Synxis Games — shared design system
   Display: Syne / Body: Hanken Grotesk / Mono: JetBrains Mono
   ========================================================================== */

/* ---- tokens: light (default) ---- */
:root{
  --ink: #1A1025;
  --ink-soft: #4E3D63;
  --muted: #8C7DA3;
  --paper: #FBF8FF;
  --surface: #FFFFFF;
  --surface-2: #F3ECFC;
  --line: #E6DBF5;
  --line-strong: #D2C0EA;

  /* gradient trio: violet -> magenta -> coral */
  --g1: #6D28D9;
  --g2: #E0339D;
  --g3: #FF7A45;
  --gradient: linear-gradient(135deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%);
  --gradient-soft: linear-gradient(135deg, color-mix(in srgb, var(--g1) 16%, transparent), color-mix(in srgb, var(--g2) 16%, transparent) 55%, color-mix(in srgb, var(--g3) 16%, transparent));

  --accent: #E0339D;
  --accent-ink: #FFFFFF;
  --accent-soft: #FBE3F2;
  --signal-2: #6D28D9;
  --signal-2-soft: #ECE1FB;
  --signal-3: #FF7A45;
  --signal-3-soft: #FFE9DC;
  --focus-ring: #1A1025;
  --shadow: rgba(45,15,65,0.14);

  --font-display: 'Syne', 'Arial Black', sans-serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --maxw: 1140px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-s: 5px;
  --radius-m: 14px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink: #F5F0FF;
    --ink-soft: #CBBEDD;
    --muted: #97889F;
    --paper: #130A1F;
    --surface: #1E1330;
    --surface-2: #281B3D;
    --line: #382A4E;
    --line-strong: #4A3A64;

    --g1: #8B5CF6;
    --g2: #FF57B8;
    --g3: #FF9A5C;
    --gradient: linear-gradient(135deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%);
    --gradient-soft: linear-gradient(135deg, color-mix(in srgb, var(--g1) 26%, transparent), color-mix(in srgb, var(--g2) 26%, transparent) 55%, color-mix(in srgb, var(--g3) 26%, transparent));

    --accent: #FF57B8;
    --accent-ink: #1B0E27;
    --accent-soft: #3A2038;
    --signal-2: #A98BFF;
    --signal-2-soft: #2A2049;
    --signal-3: #FF9A5C;
    --signal-3-soft: #3B2418;
    --shadow: rgba(0,0,0,0.5);
  }
}

:root[data-theme="dark"]{
  --ink: #F5F0FF;
  --ink-soft: #CBBEDD;
  --muted: #97889F;
  --paper: #130A1F;
  --surface: #1E1330;
  --surface-2: #281B3D;
  --line: #382A4E;
  --line-strong: #4A3A64;

  --g1: #8B5CF6;
  --g2: #FF57B8;
  --g3: #FF9A5C;
  --gradient: linear-gradient(135deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%);
  --gradient-soft: linear-gradient(135deg, color-mix(in srgb, var(--g1) 26%, transparent), color-mix(in srgb, var(--g2) 26%, transparent) 55%, color-mix(in srgb, var(--g3) 26%, transparent));

  --accent: #FF57B8;
  --accent-ink: #1B0E27;
  --accent-soft: #3A2038;
  --signal-2: #A98BFF;
  --signal-2-soft: #2A2049;
  --signal-3: #FF9A5C;
  --signal-3-soft: #3B2418;
  --shadow: rgba(0,0,0,0.5);
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
ul{margin:0;padding:0;}
h1,h2,h3,h4,p,figure{margin:0;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* ---- base type ---- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.font-display{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.01em;
  text-wrap:balance;
  color:var(--ink);
}

.h-display{font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:1.02;}
.h-1{font-size:clamp(2.1rem, 4.2vw, 3.1rem); line-height:1.07;}
.h-2{font-size:clamp(1.5rem, 2.6vw, 2rem); line-height:1.15;}
.h-3{font-size:1.2rem; line-height:1.3;}

.lede{font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--ink-soft); max-width:42ch; line-height:1.5;}
.body-text{max-width:62ch; color:var(--ink-soft);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:0.55em;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.mono{font-family:var(--font-mono);}

/* ---- layout ---- */
.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(52px, 8vw, 96px);}
.section-tight{padding-block:clamp(32px, 5vw, 56px);}
.section-border-top{border-top:1px solid var(--line);}

.stack{display:flex;flex-direction:column;}
.gap-xs{gap:10px;} .gap-s{gap:16px;} .gap-m{gap:28px;} .gap-l{gap:48px;}

.grid{display:grid;gap:28px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}
@media (min-width:561px) and (max-width:860px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}

/* ---- logotype ---- */
.logo{display:inline-flex;align-items:baseline;gap:2px;}
.logo-word{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.28rem;
  letter-spacing:-0.01em;
}
.logo-grad{
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logo-word .dim{color:var(--muted);font-weight:700; font-size:0.72em; margin-left:2px;}

/* ---- header / nav ---- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.nav{display:flex; align-items:center; gap:30px;}
.nav-links{display:flex; align-items:center; gap:26px;}
.nav-links a{
  font-size:0.92rem; font-weight:600; color:var(--ink-soft);
  padding-block:6px; border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--ink); border-color:var(--accent);}
.nav-cta{
  font-size:0.85rem; font-weight:700;
  font-family:var(--font-mono);
  padding:9px 16px; border-radius:100px;
  background:var(--gradient); color:var(--accent-ink);
}
.nav-cta:hover{filter:brightness(1.08);}

.nav-toggle{
  display:none; width:40px; height:40px; border-radius:var(--radius-s);
  border:1px solid var(--line); background:var(--surface);
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle svg{width:18px;height:18px;}
.mobile-panel{
  display:none; flex-direction:column; gap:4px;
  padding:10px var(--gutter) 22px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.mobile-panel a{
  padding:12px 4px; font-weight:600; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.mobile-panel a:last-child{border-bottom:none;}
body.nav-open .mobile-panel{display:flex;}

@media (max-width:780px){
  .nav-links, .nav-cta{display:none;}
  .nav-toggle{display:flex;}
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:0.95rem;
  padding:13px 24px; border-radius:100px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, filter .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--gradient); color:var(--accent-ink); box-shadow:0 10px 24px -10px var(--shadow);}
.btn-primary:hover{filter:brightness(1.08); box-shadow:0 14px 28px -10px var(--shadow);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong); border-radius:100px;}
.btn-ghost:hover{border-color:var(--ink);}
.btn-accent{background:var(--gradient); color:var(--accent-ink); box-shadow:0 10px 24px -10px var(--shadow);}
.btn-accent:hover{filter:brightness(1.07);}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px;
}

/* ---- tag / badge ---- */
.tag{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em;
  padding:4px 9px; border-radius:100px; border:1px solid var(--line-strong);
  color:var(--ink-soft); white-space:nowrap;
}
.tag-accent{background:var(--accent-soft); border-color:transparent; color:var(--accent);}
.tag-signal{background:var(--signal-2-soft); border-color:transparent; color:var(--signal-2);}
.tag-signal-3{background:var(--signal-3-soft); border-color:transparent; color:var(--signal-3);}

/* ---- blob / gradient decoration ---- */
.blob-field{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.blob{
  position:absolute; border-radius:50%;
  filter:blur(60px); opacity:0.55;
}
.blob-1{width:380px; height:380px; background:var(--g1); top:-140px; left:-100px;}
.blob-2{width:320px; height:320px; background:var(--g2); top:-40px; right:-80px;}
.blob-3{width:280px; height:280px; background:var(--g3); bottom:-160px; left:38%;}
.hero-rel{position:relative; overflow:hidden;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .blob{opacity:0.4;}
}
:root[data-theme="dark"] .blob{opacity:0.4;}

/* ---- phone mockup ---- */
.phone-mock{
  width:150px; aspect-ratio:9/18.5;
  background:var(--ink); border-radius:22px; padding:7px;
  box-shadow:0 24px 44px -16px var(--shadow);
  flex:none;
}
.phone-mock .screen{
  width:100%; height:100%; border-radius:16px; overflow:hidden;
  position:relative; background:var(--gradient);
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  padding:12px 10px;
}
.phone-mock .screen::before{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:34%; height:5px; border-radius:100px; background:rgba(255,255,255,0.55);
}
.phone-mock .ui-bar{height:9px; border-radius:100px; background:rgba(255,255,255,0.5);}
.phone-mock .ui-bar.w-60{width:60%;}
.phone-mock .ui-bar.w-40{width:40%;}
.phone-mock .ui-chip{
  align-self:flex-start; font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.04em;
  background:rgba(255,255,255,0.85); color:var(--ink); padding:3px 7px; border-radius:100px; margin-bottom:2px;
}
.phone-mock.is-tilt-l{transform:rotate(-7deg);}
.phone-mock.is-tilt-r{transform:rotate(6deg);}

/* ---- cards ---- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:26px;
}

.game-card{
  display:flex; flex-direction:column; gap:16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
  overflow:hidden;
}
.game-card-art{
  aspect-ratio:4/3; position:relative; overflow:hidden;
  background:var(--gradient-soft);
  display:flex; align-items:center; justify-content:center;
}
.game-card-art .phone-mock{width:34%;}
.game-card-art .status-pill{
  position:absolute; top:12px; left:12px;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em;
  padding:4px 9px; border-radius:100px;
  background:color-mix(in srgb, var(--ink) 85%, transparent); color:var(--paper);
}
.game-card-body{padding:0 20px 22px; display:flex; flex-direction:column; gap:10px;}
.game-card-tags{display:flex; gap:6px; flex-wrap:wrap;}

.stat-tile{
  border-top:3px solid transparent;
  border-image:var(--gradient) 1;
  padding-top:14px;
  display:flex; flex-direction:column; gap:4px;
}
.stat-num{font-family:var(--font-display); font-weight:800; font-size:2.1rem; font-variant-numeric:tabular-nums;}
.stat-label{font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);}

.value-card{display:flex; flex-direction:column; gap:10px; position:relative; padding-top:30px;}
.value-card::before{
  content:""; position:absolute; top:0; left:26px; width:34px; height:5px; border-radius:100px;
  background:var(--gradient);
}
.value-card .idx{font-family:var(--font-mono); color:var(--muted); font-size:0.8rem;}

/* ---- timeline (roadmap) ---- */
.timeline{display:flex; flex-direction:column;}
.t-row{
  display:grid; grid-template-columns:140px 1fr; gap:24px;
  padding-block:22px; border-top:1px solid var(--line);
  align-items:baseline;
}
.t-row:first-child{border-top:none;}
.t-row.is-now .t-phase{color:var(--accent);}
.t-phase{font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.04em; color:var(--muted);}
@media (max-width:620px){
  .t-row{grid-template-columns:1fr; gap:6px;}
}

/* ---- job listing ---- */
.job-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 0; border-top:1px solid var(--line);
}
.job-row:first-child{border-top:none;}
@media (max-width:600px){
  .job-row{flex-direction:column; align-items:flex-start; gap:10px;}
}

/* ---- post card (blog) ---- */
.post-card{
  display:flex; flex-direction:column; gap:10px;
  padding-block:26px; border-top:1px solid var(--line);
}
.post-card:first-child{border-top:none;}
.post-meta{display:flex; gap:12px; align-items:center;}

/* ---- forms ---- */
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:0.85rem; font-weight:700;}
.field .hint{font-size:0.8rem; color:var(--muted);}
.field input, .field textarea, .field select{
  font:inherit; font-size:0.97rem;
  padding:12px 14px; border-radius:var(--radius-s);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
}
.field textarea{resize:vertical; min-height:120px;}
.field input::placeholder, .field textarea::placeholder{color:var(--muted);}
.form-status{
  font-family:var(--font-mono); font-size:0.85rem; padding:12px 14px;
  border-radius:var(--radius-s); border:1px solid var(--line);
  display:none;
}
.form-status.is-visible{display:block;}
.form-status.ok{border-color:var(--signal-2); color:var(--signal-2); background:var(--signal-2-soft);}
.form-status.err{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line); padding-block:48px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:780px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr;}
}
.footer-col h4{font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;}
.footer-col a, .footer-col p{font-size:0.92rem; color:var(--ink-soft);}
.footer-links{display:flex; flex-direction:column; gap:10px;}
.footer-bottom{
  margin-top:38px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:0.82rem; color:var(--muted); font-family:var(--font-mono);
}

/* ---- legal documents ---- */
.legal{max-width:70ch;}
.legal h2{font-size:1.25rem; margin-top:40px; margin-bottom:12px;}
.legal h2:first-child{margin-top:0;}
.legal p, .legal li{color:var(--ink-soft); line-height:1.65; margin-bottom:12px;}
.legal ol, .legal ul{padding-left:1.3em; margin-bottom:12px;}
.legal li{margin-bottom:8px;}
.legal strong{color:var(--ink);}

/* ---- misc ---- */
.divider{height:1px; background:var(--line); border:none;}
.skip-link{position:absolute; left:-999px;}
.skip-link:focus{left:12px; top:12px; background:var(--ink); color:var(--paper); padding:8px 12px; border-radius:var(--radius-s); z-index:100;}