/* Ancient Paleo Quest — shared theme (v5.1).
   One place for the site's look: colours, type, spacing, radii, cards and buttons.
   Used by the Hub now. The 16 games will link this same file once Migisi signs off on the Hub look (Step 4),
   so a theme change is one edit here, not sixteen.
   Rule of thumb from Dawson's notes: daylight, stone, dust and growing things — no night sky, glow, sparkle or jewel tones. */

/* ---------- font: Source Sans 3 (SIL OFL, fonts/SourceSans3-OFL.txt), self-hosted ---------- */
@font-face{font-family:"Source Sans 3";src:url("../fonts/SourceSans3-wght.woff2") format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/SourceSans3-Italic-wght.woff2") format("woff2");
  font-weight:200 900;font-style:italic;font-display:swap}

:root{
  /* colours — daylight sky */
  --c-sky-top:#7aa8d4;
  --c-sky-mid:#cfe1ee;
  --c-sky-warm:#f3dcae;          /* golden-hour haze near the horizon */
  /* colours — stone, parchment, ink */
  --c-stone-light:#f1e2c2;
  --c-stone:#d9bd86;
  --c-stone-deep:#a77d3f;
  --c-stone-shadow:#7a5220;
  --c-parchment-hi:#f6e6bf;
  --c-parchment:#ecd39c;
  --c-parchment-lo:#dcb877;
  --c-ink:#2a1a0c;              /* main text: near-black brown */
  --c-ink-soft:#4a3320;
  --c-accent:#6b3410;           /* links, "Open" labels */
  --c-olive:#5d6b2f;
  --c-focus:#2f5f8a;            /* keyboard focus ring (not a glow) */
  /* woven band across the top of every card */
  --band-red:#8e2a1e; --band-gold:#d9a43c; --band-blue:#1f3a6b;

  /* type */
  --font-ui:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --fw-body:400; --fw-emph:500; --fw-head:600; --fw-strong:700;
  --fs-xs:.8125rem;   /* 13px */
  --fs-sm:.9375rem;   /* 15px */
  --fs-md:1.0625rem;  /* 17px body */
  --fs-lg:1.25rem;    /* 20px */
  --fs-xl:1.5rem;     /* 24px card titles */
  --fs-2xl:clamp(1.9rem,6vw,2.6rem); /* page title */
  --lh-tight:1.2; --lh-body:1.45;

  /* spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:32px;

  /* radii */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  /* shadows: soft and neutral, never a glow */
  --shadow-card:0 2px 0 var(--c-stone-shadow),0 8px 18px rgba(40,25,10,.28);
  --shadow-card-hover:0 2px 0 var(--c-stone-shadow),0 12px 24px rgba(40,25,10,.32);
  --shadow-btn:0 2px 0 var(--c-stone-shadow);

  /* controls */
  --tap-min:44px;

  /* phone layout: walls of Jerusalem pinned as a band at the bottom */
  --band-h:clamp(118px,21vh,180px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--c-sky-mid)}
html,body{min-height:100%;font-family:var(--font-ui);font-weight:var(--fw-body);font-size:100%;color:var(--c-ink);
  -webkit-tap-highlight-color:transparent;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{background:transparent;line-height:var(--lh-body)}

/* ---------- parchment card (the Hub's strongest element; games will reuse .pq-card) ---------- */
.pq-card{position:relative;overflow:hidden;color:var(--c-ink);border-radius:var(--r-md);
  background:
    radial-gradient(circle at 12% 8%,rgba(255,240,205,.75),transparent 45%),
    radial-gradient(circle at 80% 90%,rgba(150,105,45,.18),transparent 55%),
    repeating-radial-gradient(circle at 30% 40%,rgba(120,85,40,.045) 0 2px,transparent 2px 7px),
    linear-gradient(160deg,var(--c-parchment-hi) 0%,var(--c-parchment) 55%,var(--c-parchment-lo) 100%);
  border:1px solid var(--c-stone-deep);
  box-shadow:inset 2px 2px 0 rgba(255,248,225,.55),inset -2px -2px 0 rgba(120,80,30,.25),var(--shadow-card)}
.pq-card::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;
  background:repeating-linear-gradient(90deg,var(--band-red) 0 8px,var(--band-gold) 8px 12px,var(--band-blue) 12px 20px,var(--band-gold) 20px 24px)}

/* ---------- button ---------- */
.pq-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap-min);
  padding:var(--sp-2) var(--sp-5);border-radius:var(--r-pill);border:1px solid var(--c-stone-deep);
  background:linear-gradient(180deg,var(--c-parchment-hi),var(--c-stone));color:var(--c-ink);
  font:var(--fw-head) var(--fs-md)/1.2 var(--font-ui);text-decoration:none;cursor:pointer;box-shadow:var(--shadow-btn)}
.pq-btn:active{transform:translateY(1px);box-shadow:none}
.pq-btn:focus-visible,a:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.pq-btn[hidden]{display:none!important}

/* =====================================================================================
   HUB PAGE
   ===================================================================================== */
.hub-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,var(--c-sky-top),var(--c-sky-mid) 45%,var(--c-sky-warm))}
.hub-scene .layer{position:absolute;left:-4%;right:-4%;bottom:0;height:100%;background-repeat:no-repeat;
  background-position:50% 100%;background-size:cover;will-change:transform}
.hub-scene .far{background-image:url(../home/far-day.webp);top:-6%;height:112%}
.hub-scene .mid{background-image:url(../home/mid.webp);background-size:auto 34%;background-repeat:repeat-x;bottom:-2%}
.hub-scene .near{background-image:url(../home/near.webp);background-size:auto 62%;bottom:-3%}

/* phone/narrow: the walls + olive trees are an always-visible band at the bottom, in front of the scrolling cards */
.hub-band{display:none}
@media (max-width:700px){
  .hub-scene .mid,.hub-scene .near{display:none}
  .hub-scene .far{top:0;height:auto;bottom:calc(var(--band-h) * .45);background-size:cover;background-position:50% 100%}
  .hub-band{display:block;position:fixed;left:0;right:0;bottom:0;height:var(--band-h);z-index:3;pointer-events:none}
  .hub-band .wall{position:absolute;left:0;right:0;bottom:0;height:70%;
    background:url(../home/wall-band.webp) repeat-x;background-size:auto 100%;background-position:50% 100%}
  .hub-band .olive-l,.hub-band .olive-r{position:absolute;bottom:0;height:116%;width:auto;aspect-ratio:530/755;
    background-repeat:no-repeat;background-size:contain;background-position:0 100%}
  .hub-band .olive-l{left:-9%;background-image:url(../home/olive-left.webp)}
  .hub-band .olive-r{right:-9%;aspect-ratio:510/740;background-image:url(../home/olive-right.webp);background-position:100% 100%}
  /* the cards scroll in the space above the wall, so the band never covers them */
  body.hub .hub-app{position:fixed;left:0;right:0;top:0;bottom:calc(var(--band-h) * .68);overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;padding-top:calc(var(--sp-4) + env(safe-area-inset-top,0px));
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent)}
}

.hub-app{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:var(--sp-5) var(--sp-3) var(--sp-6)}

.hub-hero{text-align:center;padding:var(--sp-5) var(--sp-4) var(--sp-4);margin-bottom:var(--sp-5)}
.hub-hero h1{font-weight:var(--fw-strong);font-size:var(--fs-2xl);line-height:var(--lh-tight);margin:var(--sp-2) 0 var(--sp-2);color:var(--c-ink);letter-spacing:0}
.hub-hero .lead{max-width:38rem;margin:0 auto;font-size:var(--fs-lg);line-height:1.4;color:var(--c-ink-soft)}
.hub-hero .tip{margin-top:var(--sp-3);display:inline-block;font-size:var(--fs-md);font-weight:var(--fw-head);color:var(--c-accent)}
.hub-hero .install-row{margin-top:var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;align-items:center}
.hub-hero .install-hint{font-size:var(--fs-sm);color:var(--c-ink-soft);max-width:26rem;line-height:1.4}
.hub-hero .install-hint strong{color:var(--c-accent);font-weight:var(--fw-strong)}

.hub-grid{display:grid;gap:var(--sp-4)}
@media (min-width:640px){.hub-grid{grid-template-columns:1fr 1fr}}
a.hub-game{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:var(--sp-5) var(--sp-4) var(--sp-4);min-height:158px;
  transition:transform .15s,box-shadow .15s}
a.hub-game:hover,a.hub-game:focus-visible{transform:translateY(-2px);
  box-shadow:inset 2px 2px 0 rgba(255,248,225,.55),inset -2px -2px 0 rgba(120,80,30,.25),var(--shadow-card-hover)}
a.hub-game.wide{grid-column:1/-1}
a.hub-game .ico{width:96px;height:96px;flex:none;margin:4px 0 6px 2px;border-radius:50%;display:block;background:#2b2a4a;
  box-shadow:0 0 0 2px var(--c-stone-deep),0 2px 4px rgba(60,30,5,.35)}
@media (max-width:600px){a.hub-game .ico{width:84px;height:84px}}
a.hub-game h2{font-weight:var(--fw-strong);font-size:var(--fs-xl);line-height:var(--lh-tight);color:var(--c-ink);margin:0}
a.hub-game p{margin:0;color:var(--c-ink-soft);font-size:var(--fs-md);line-height:1.4;flex:1}
a.hub-game .go{font-weight:var(--fw-head);color:var(--c-accent);font-size:var(--fs-sm);margin-top:4px}

.hub-foot{margin-top:var(--sp-5);text-align:center;padding:var(--sp-4)}
.hub-foot p{font-size:var(--fs-sm);color:var(--c-ink-soft);line-height:1.45}
.hub-foot strong{color:var(--c-accent)}
body.hub #paleoFooter{position:relative;z-index:1;font-family:var(--font-ui);font-size:var(--fs-xs)}
body.hub #paleoFooter a{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 4px}

@media (prefers-reduced-motion:reduce){.hub-scene .layer{transform:none!important}a.hub-game{transition:none}}