/* =========================================================
   ODD LITTLE GAMES — site stylesheet

   One file, two stages:
     body.hub    — the dark plum hub page (index.html)
     body.legal  — the light paper document pages
                   (privacy.html, terms.html)

   Both share the token block below, so the mark, the hub,
   and the small print stay the same brand.
   ========================================================= */

:root{
  /* Background family — the studio's plum. Not from the logo;
     it's the stage the character stands on.                    */
  --ink:      #211A2E;   /* deep plum background */
  --ink-2:    #2C2340;   /* raised surface       */
  --ink-3:    #3A2F52;   /* card / border        */
  --muted:    #ABA1C0;   /* secondary text       */

  /* Everything below is sampled straight from logo.svg,
     so the site and the mark are the same brand.              */
  --cream:      #FCFCFA; /* logo white   — primary text        */
  --cream-pale: #FDECAE; /* logo pale    — soft accent         */
  --butter:     #FCCD6B; /* logo eye     — primary accent      */
  --butter-lit: #FDE389; /* logo eye hi  — hover / tertiary    */
  --coral:      #FD7159; /* logo body    — secondary accent    */
  --coral-deep: #FC5F47; /* logo shadow  — depth               */
  --coral-lit:  #FEA490; /* logo shine   — fourth token colour */
  --coral-rim:  #D44D39; /* logo rim     — edges               */

  /* Paper family — the light stage the legal pages sit on.    */
  --paper:     #FBF7EF;
  --paper-2:   #F3ECDD;
  --line:      #E4D9C4;
  --body-ink:  #2A2338;
  --body-muted:#6A5F7A;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --maxw: 1080px;    /* hub content width      */
  --measure: 66ch;   /* legal reading column   */
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

:focus-visible{ outline:2.5px solid var(--butter); outline-offset:3px; border-radius:6px; }


/* =========================================================
   HUB — index.html
   ========================================================= */

.hub *{ margin:0; padding:0; }

body.hub{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.hub a{ color:inherit; }

.hub .wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* soft dotted texture, like a board surface */
body.hub::before{
  content:"";
  position:fixed; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size:22px 22px;
  pointer-events:none;
  z-index:0;
}
.hub header, .hub main, .hub footer{ position:relative; z-index:1; }

/* ---------- header ---------- */
.hub header{
  padding:22px 0;
}
.hub .bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.hub .brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--display);
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:-.01em;
  text-decoration:none;
}
.hub .brand .mark{
  width:32px; height:32px; flex:none;
  display:block;
  object-fit:contain;              /* logo is 474x492, don't squash it */
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.hub .brand:hover .mark{ transform:rotate(-8deg) scale(1.06); }

.hub nav.links{ display:flex; gap:8px; align-items:center; }
.hub nav.links a{
  font-family:var(--mono);
  font-size:.8rem;
  text-decoration:none;
  color:var(--muted);
  padding:8px 12px;
  border-radius:9px;
  transition:color .18s, background .18s;
}
.hub nav.links a:hover{ color:var(--cream); background:var(--ink-2); }
.hub nav.links a.support{ color:var(--ink); background:var(--butter); font-weight:700; }
.hub nav.links a.support:hover{ background:var(--butter-lit); color:var(--ink); }

/* ---------- hero ---------- */
.hub .hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:center;
  padding:70px 0 84px;
}
.hub .eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--butter);
  margin-bottom:22px;
}
.hub .hero h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.6rem, 6vw, 4.2rem);
  line-height:.98;
  letter-spacing:-.025em;
  margin-bottom:24px;
}
.hub .hero h1 em{ font-style:normal; color:var(--coral); }
.hub .hero p.lede{
  font-size:1.12rem;
  color:var(--muted);
  max-width:34ch;
  margin-bottom:34px;
}
.hub .cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.hub .btn{
  font-family:var(--body);
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  padding:14px 22px;
  border-radius:13px;
  transition:transform .12s ease, background .18s, box-shadow .18s;
  display:inline-flex; align-items:center; gap:9px;
}
.hub .btn:active{ transform:translateY(1px); }
.hub .btn-primary{
  background:var(--butter); color:var(--ink);
  box-shadow:0 0 0 0 rgba(252,205,107,.5);
}
.hub .btn-primary:hover{ background:var(--butter-lit); box-shadow:0 8px 24px -8px rgba(252,205,107,.6); }
.hub .btn-ghost{
  background:transparent; color:var(--cream);
  border:1.5px solid var(--ink-3);
}
.hub .btn-ghost:hover{ border-color:var(--muted); background:var(--ink-2); }

/* ---------- signature: the little board ---------- */
.hub .board-frame{
  justify-self:center;
  width:100%;
  max-width:320px;
}
.hub .board{
  position:relative;
  background:var(--ink-2);
  border:1.5px solid var(--ink-3);
  border-radius:20px;
  padding:18px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:1fr;
  gap:12px;
  aspect-ratio:4/3;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.55);
}
.hub .cell{
  background:var(--ink);
  border-radius:11px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.hub .cell.dot::after{
  content:"";
  display:block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ink-3);
  margin:calc(50% - 3px) auto 0;
}
.hub .token{
  position:absolute;
  width:52px; height:52px;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1);
  z-index:2;
  filter:drop-shadow(0 8px 18px rgba(253,113,89,.45));
  pointer-events:none;
}
.hub .token img{
  width:100%; height:100%;
  display:block;
  object-fit:contain;              /* logo is 474x492, don't squash it */
}
/* the character flips to face whichever way it just hopped */
.hub .token.facing-left img{ transform:scaleX(-1); }
.hub .board-caption{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--muted);
  text-align:center;
  margin-top:16px;
}

/* ---------- section scaffolding ---------- */
.hub section{ padding:64px 0; }
.hub .sec-head{ margin-bottom:38px; }
.hub .sec-eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--coral-lit);
  margin-bottom:12px;
}
.hub .sec-head h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  letter-spacing:-.02em;
}
.hub .sec-head p{ color:var(--muted); max-width:52ch; margin-top:10px; }

/* ---------- the shelf (games) ---------- */
.hub .shelf{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:18px;
}
.hub .game{
  position:relative;
  background:var(--ink-2);
  border:1.5px solid var(--ink-3);
  border-radius:16px;
  padding:22px 20px 20px;
  text-decoration:none;
  display:flex; flex-direction:column;
  min-height:190px;
  transition:transform .16s ease, border-color .18s;
  overflow:hidden;
}
.hub .game::before{ /* coloured "spine" */
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:5px;
  background:var(--spine, var(--butter));
}
.hub .game:hover{ transform:translateY(-4px); border-color:var(--spine, var(--butter)); }
.hub .game .tag{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--spine, var(--butter));
  margin-bottom:14px;
}
.hub .game h3{
  font-family:var(--display);
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.hub .game p{ color:var(--muted); font-size:.94rem; margin-bottom:16px; }
.hub .game .play{
  margin-top:auto;
  font-weight:600;
  font-size:.92rem;
  color:var(--cream);
  display:inline-flex; align-items:center; gap:7px;
}
.hub .game .play span{ transition:transform .16s; }
.hub .game:hover .play span{ transform:translateX(4px); }

/* ---------- support strip ---------- */
.hub .support-strip{
  background:linear-gradient(135deg, var(--ink-2), #33264c);
  border:1.5px solid var(--ink-3);
  border-radius:24px;
  padding:44px;
  display:grid;
  grid-template-columns:1.4fr auto;
  gap:32px;
  align-items:center;
}
.hub .support-strip h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing:-.02em;
  margin-bottom:12px;
}
.hub .support-strip p{ color:var(--muted); max-width:46ch; }
.hub .support-strip .btn-primary{ white-space:nowrap; }

/* ---------- footer ---------- */
.hub footer{
  padding:52px 0 40px;
  border-top:1px solid var(--ink-3);
  margin-top:40px;
}
.hub .foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
}
.hub .foot .socials{ display:flex; gap:8px; flex-wrap:wrap; }
.hub .foot .socials a{
  font-family:var(--mono);
  font-size:.82rem;
  text-decoration:none;
  color:var(--muted);
  padding:8px 13px;
  border:1px solid var(--ink-3);
  border-radius:10px;
  transition:color .18s, border-color .18s;
}
.hub .foot .socials a:hover{ color:var(--cream); border-color:var(--muted); }
.hub .foot .small-print{
  display:flex; align-items:center; flex-wrap:wrap; gap:16px;
  font-family:var(--mono); font-size:.78rem; color:var(--muted);
}
.hub .foot .small-print a{ color:var(--muted); text-decoration:none; }
.hub .foot .small-print a:hover{ color:var(--cream); }
.hub .foot .copy{ font-family:var(--mono); font-size:.78rem; color:var(--muted); }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hub .hero{ grid-template-columns:1fr; gap:44px; padding:48px 0 60px; }
  .hub .board-frame{ max-width:300px; order:-1; }
  .hub .support-strip{ grid-template-columns:1fr; padding:32px; }
}
@media (max-width:480px){
  .hub nav.links a:not(.support){ display:none; }
}


/* =========================================================
   LEGAL DOCUMENTS — privacy.html, terms.html
   ========================================================= */

body.legal{
  margin:0; background:var(--paper); color:var(--body-ink);
  font-family:var(--body);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.legal a{ color:var(--coral-rim); text-underline-offset:3px; text-decoration-thickness:1px; }
.legal a:hover{ color:var(--coral-deep); }
.legal :focus-visible{ outline-color:var(--coral-rim); }

/* ---- header band: the brand's dark plum stage ---- */
.legal .masthead{
  background:var(--ink);
  color:var(--cream);
  border-bottom:3px solid var(--butter);
}
.legal .masthead-inner{
  max-width:1100px; margin:0 auto; padding:28px 32px 34px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.legal .brand{
  display:flex; align-items:center; gap:14px;
  color:var(--cream); text-decoration:none; font-weight:600;
}
.legal .peek{
  width:46px; height:46px; flex:0 0 auto;
  display:block;
  object-fit:contain;              /* logo is 474x492, don't squash it */
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.legal .brand:hover .peek{ transform:rotate(-8deg) scale(1.06); }
.legal .brand-word{
  font-family:var(--display); font-weight:800;
  letter-spacing:-0.03em; font-size:19px; line-height:1;
}
.legal .doc-kicker{
  margin-left:auto; text-align:right; color:var(--muted);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.legal .title-wrap{ max-width:1100px; margin:0 auto; padding:6px 32px 40px; }
.legal h1{
  font-family:var(--display); font-weight:800;
  letter-spacing:-0.03em; line-height:1.02;
  font-size:clamp(2.4rem,6vw,4rem); color:var(--cream); margin:0;
}
.legal .updated{ color:var(--muted); margin:14px 0 0; font-size:14.5px; }

/* ---- layout: sticky contents rail + reading column ---- */
.legal .shell{
  max-width:1100px; margin:0 auto; padding:0 32px 90px;
  display:grid; grid-template-columns:230px 1fr; gap:56px;
}
.legal nav.toc{
  position:sticky; top:24px; align-self:start;
  font-size:14px; line-height:1.5; padding-top:44px;
}
.legal nav.toc .toc-label{
  font-family:var(--display); font-weight:800;
  letter-spacing:-0.02em; font-size:13px; text-transform:uppercase;
  color:var(--body-muted); margin:0 0 12px;
}
.legal nav.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.legal nav.toc li{ counter-increment:toc; margin:0 0 3px; }
.legal nav.toc a{
  display:block; padding:5px 10px 5px 30px; position:relative;
  color:var(--body-muted); text-decoration:none; border-radius:7px;
}
.legal nav.toc a::before{
  content:counter(toc,decimal-leading-zero);
  position:absolute; left:8px; top:5px;
  font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--coral);
  font-weight:600;
}
.legal nav.toc a:hover{ background:var(--paper-2); color:var(--ink); }

.legal main{ max-width:var(--measure); padding-top:44px; counter-reset:sec; }
.legal .lede{
  font-size:19px; color:var(--body-ink); border-left:3px solid var(--coral);
  padding:2px 0 2px 20px; margin:0 0 8px;
}
.legal section{
  counter-increment:sec; padding:34px 0 4px;
  border-top:1px solid var(--line); margin-top:30px;
}
.legal section:first-of-type{ border-top:0; margin-top:26px; }
.legal h2{
  font-family:var(--display); font-weight:800;
  letter-spacing:-0.025em; font-size:1.55rem; line-height:1.1;
  color:var(--ink); margin:0 0 6px; display:flex; gap:14px; align-items:baseline;
}
.legal h2::before{
  content:counter(sec,decimal-leading-zero);
  font-size:1rem; color:var(--coral); font-weight:800;
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.legal h3{
  font-family:var(--body); font-weight:600; font-size:1.02rem;
  color:var(--ink); margin:22px 0 2px;
}
.legal p{ margin:12px 0; }
.legal ul{ margin:12px 0; padding-left:22px; }
.legal li{ margin:7px 0; }

/* the plain-English gist under each heading */
.legal .short{
  display:block; font-weight:500; color:var(--coral-rim);
  background:linear-gradient(transparent 60%, rgba(253,205,107,.35) 0);
  margin:0 0 4px; font-size:15.5px;
}
.legal .short b{ color:var(--coral-rim); font-weight:600; }

/* highlighted template placeholders */
.legal .fill{
  color:var(--coral-rim); font-weight:500;
  border-bottom:1px dotted var(--coral); padding:0 1px;
  background:rgba(253,113,89,.07);
}

.legal .callout{
  background:var(--paper-2); border:1px solid var(--line);
  border-left:3px solid var(--butter); border-radius:10px;
  padding:16px 20px; margin:22px 0; font-size:15.5px;
}
.legal .callout strong{ color:var(--ink); }

.legal .emph{
  background:var(--ink); color:var(--cream); border-radius:10px;
  padding:18px 22px; margin:22px 0; font-size:15.5px; line-height:1.6;
}
.legal .emph strong{ color:var(--butter-lit); }

.legal footer{
  max-width:1100px; margin:0 auto; padding:34px 32px 60px;
  color:var(--body-muted); font-size:14px;
  border-top:1px solid var(--line);
  display:flex; gap:24px; flex-wrap:wrap; align-items:center;
}
.legal footer .foot-links{ margin-left:auto; display:flex; gap:20px; }
.legal footer a{ color:var(--body-muted); }
.legal footer a:hover{ color:var(--coral-rim); }

@media (max-width:820px){
  .legal .shell{ grid-template-columns:1fr; gap:0; }
  .legal nav.toc{ position:static; padding-top:24px; border-bottom:1px solid var(--line); padding-bottom:20px; }
  .legal nav.toc ol{ columns:2; column-gap:18px; }
  .legal main{ padding-top:26px; }
  .legal .masthead-inner,
  .legal .title-wrap,
  .legal .shell,
  .legal footer{ padding-left:22px; padding-right:22px; }
}


/* =========================================================
   MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hub .token{ transition:none; }
  *{ animation:none !important; }
}