/* =========================================================
   TapJewel Games — shared styles for every page
   Layout: header bar → full-width bands → dark footer.
   Every band uses the same heading, body text and button styles.
   ========================================================= */

/* Headline font (stored in assets/fonts, licence in OFL.txt) */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}

/* ---- Colors: change these to restyle the site ---- */
:root {
  --page: #FFFFFF;      /* plain bands */
  --band: #F3F3F6;      /* tinted bands and cards */
  --ink: #1D1C22;       /* main text */
  --muted: #5B5966;     /* secondary text */
  --line: rgba(29, 28, 34, 0.1);
  --footer: #1E1D23;    /* dark footer */
  --footer-dim: #B9B8C2;

  /* Gem colors (light to dark) and the button color.
     The home page swaps all of these when the gem is tapped. */
  --f1: #CFC6FF;
  --f2: #A596F5;
  --f3: #7B67E8;
  --f4: #5846C4;
  --f5: #3A2C93;
  --accent: #5A43D6;

  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 1rem;
  --band-space: 3.5rem;
  color-scheme: light;
}
:root[data-palette="aquamarine"] { --f1: #BDEFEA; --f2: #8ADAD3; --f3: #4FBDB6; --f4: #2E9A98; --f5: #17615F; --accent: #0F7A78; }
:root[data-palette="rose"]       { --f1: #FFD3DC; --f2: #FBA6B8; --f3: #EE7A96; --f4: #C9507A; --f5: #8F2F59; --accent: #C2346A; }
:root[data-palette="emerald"]    { --f1: #C6F1D5; --f2: #8EDDAA; --f3: #4DBF7D; --f4: #2B975A; --f5: #17603A; --accent: #1D7F4C; }
:root[data-palette="topaz"]      { --f1: #FFE6B8; --f2: #FBC96F; --f3: #F2A23A; --f4: #CF7A1C; --f5: #85480A; --accent: #A65400; }
:root[data-palette="sapphire"]   { --f1: #CCDEFF; --f2: #98BBFA; --f3: #5F8DEB; --f4: #3B66C9; --f5: #22418F; --accent: #2D5AD4; }

@media (min-width: 48rem) {
  :root { --gutter: 2rem; --band-space: 5.5rem; }
}

/* ---- Basics ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* On short pages (support), the content area stretches so the footer sits at the bottom of the window */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--f5);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 68rem);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  z-index: 20;
}
.skip-link:focus { top: 0.5rem; }

/* Gem facet colors (used by every gem drawing) */
.t1 { fill: var(--f1); }
.t2 { fill: var(--f2); }
.t3 { fill: var(--f3); }
.t4 { fill: var(--f4); }
.t5 { fill: var(--f5); }

/* =========================================================
   Shared building blocks — reuse these in every band
   ========================================================= */

/* Bands: full-width horizontal sections */
.band { padding-block: var(--band-space); }
.band--tint { background: var(--band); }

/* One heading style */
.heading {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* One body text style */
.lead {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 34rem;
  text-wrap: pretty;
}

.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* One button style */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}
.button:hover { filter: brightness(0.9); }

/* Apple's badge: shown unaltered, at least 40px tall, with clear space around it */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.center .store-badges { justify-content: center; }
.store-badges a { display: inline-block; border-radius: 0.6rem; }
.store-badges img { height: 3rem; width: auto; }

/* =========================================================
   Header bar (pinned to the top while scrolling on phones;
   on wider screens it stays at the top of the page)
   ========================================================= */
html {
  scroll-padding-top: 4.5rem; /* on phones, links to #games / #about land below the pinned header */
  scrollbar-gutter: stable;   /* the page doesn't shift sideways when the open menu stops scrolling */
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
}
/* The white bar is its own layer, so the phone menu can slide out from behind it */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--page);
}
.site-header > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.brand svg { width: 1.875rem; height: auto; }
.site-header .brand,
.menu-button { position: relative; } /* above the white bar */

/* Menu button (phones only): three lines that turn into an X while the menu is open */
.menu-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0.5rem;
  color: var(--ink);
  cursor: pointer;
}
.menu-button svg { width: 1.5rem; height: 1.5rem; overflow: visible; }
.menu-button .bar { transform-box: fill-box; transform-origin: center; }
.menu-button[aria-expanded="true"] .bar--1 { transform: translateY(5px) rotate(45deg); }
.menu-button[aria-expanded="true"] .bar--2 { opacity: 0; }
.menu-button[aria-expanded="true"] .bar--3 { transform: translateY(-5px) rotate(-45deg); }

/* ---- Menu on phones: drops down from behind the header bar ---- */
.site-menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1; /* under the white bar, over the page */
  padding: calc(3.75rem + 0.5rem) 0 1.25rem;
  background: var(--page);
  border-radius: 0 0 1.5rem 1.5rem;
  box-shadow:
    0 10px 21px 0 rgba(0, 0, 0, 0.06),
    0 39px 39px 0 rgba(0, 0, 0, 0.05),
    0 87px 52px 0 rgba(0, 0, 0, 0.03),
    0 155px 62px 0 rgba(0, 0, 0, 0.01);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
}
.site-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.site-menu.is-closing { visibility: visible; }

.site-menu-list {
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.site-menu-list li { padding-block: 0.375rem; opacity: 0; transition: opacity 0.3s 0.15s; }
.site-menu.is-open li { opacity: 1; }
.site-menu-list li + li { border-top: 1px solid var(--line); }

/* Each link is a pill shape (filled only for the current page).
   On phones its text lines up with "TapJewel Games" in the header:
   gem 1.875rem + gap 0.5rem − the pill's own 1rem padding = 1.375rem. */
.site-menu-link {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 2.5rem;
  margin-left: 1.375rem;
  padding: 0 1rem;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.site-menu-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-menu-link:focus-visible { border-radius: 999px; }
.site-menu-link.is-highlight { color: var(--accent); } /* GAMES, in the gem's color */
/* A pill in the gem's color, white text:
   - the page you're on (SUPPORT or PRIVACY POLICY): aria-current="page"
   - on the home page, the section you're looking at (GAMES or ABOUT US): aria-current="location", set by menu.js */
.site-menu-link[aria-current] { background: var(--accent); color: #fff; }

/* The page behind dims while the menu is open; tapping it closes the menu */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 15; /* under the header, over the page */
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}
.menu-backdrop.is-open {
  opacity: 0.5;
  visibility: visible;
  transition: opacity 0.4s ease;
}
html.menu-lock { overflow: hidden; } /* no scrolling behind the open menu */

/* ---- Wider screens: the same links sit across the header as pill buttons,
        and the header scrolls away with the page ---- */
@media (min-width: 48rem) {
  html { scroll-padding-top: 0; }
  .site-header { position: relative; }

  .menu-button,
  .menu-backdrop { display: none; }

  .site-menu {
    position: relative; /* above the white bar */
    z-index: auto;
    margin-left: auto;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .site-menu-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: auto;
    margin: 0 -0.5rem 0 0; /* the last pill's edge lines up with the page edge, like the menu button did */
  }
  .site-menu-list li { padding-block: 0; opacity: 1; transition: none; }
  .site-menu-list li + li { border-top: 0; }

  .site-menu-link {
    margin-left: 0;
    font-size: 1.0625rem;
    transition: background-color 0.4s ease, color 0.4s ease, filter 0.15s ease;
  }
  .site-menu-link:hover { text-decoration: none; background: var(--band); }
  /* GAMES keeps its gem-colored text, and the current page its pill (both set above, same as on phones) */
  .site-menu-link[aria-current]:hover { background: var(--accent); filter: brightness(0.9); }

  /* A section link just clicked (GAMES, ABOUT US) becomes the same gem-colored pill:
     it holds for 1 second, then fades back (menu.js) */
  .site-menu-link.is-flash { background: var(--accent); color: #fff; transition: none; }
}

/* =========================================================
   Home page
   ========================================================= */

/* ---- Hero: the gem ---- */
.hero {
  padding-block: 1.75rem 2.25rem;
  text-align: center;
}
.hero .heading {
  font-size: clamp(2rem, 9vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0.75rem 0 0;
}

.gem-stage {
  position: relative;
  isolation: isolate;
  width: clamp(11rem, 51vw, 17rem); /* gem twice its old size */
  margin-inline: auto;
}
/* Soft glow behind the gem */
.gem-stage::before {
  content: "";
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--f1) 0%, transparent 62%);
  opacity: 0.9;
  z-index: -1;
}

#gem {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 1.5rem;
  -webkit-tap-highlight-color: transparent;
}
#gem svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Tagline under the gem: smaller and softer than other headings so the gem leads */
.hero .tagline {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #6A6874; /* between the gray bands and black */
  text-wrap: balance;
}

.gem-hint {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}
.gem-hint strong { color: var(--f5); font-weight: 600; }

/* Glow behind each glint, in the current stone's color */
.glint-glow-in  { stop-color: var(--f3); }
.glint-glow-out { stop-color: var(--f3); stop-opacity: 0; }

/* Sparkles that fly out when the gem is tapped */
.spark {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0.9rem;
  height: 0.9rem;
  margin: -0.45rem 0 0 -0.45rem;
  background: var(--f3);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
}

/* "TAP!" that appears with the sparkles: tagline font, 1.2× the tagline size, white */
.tap-word {
  position: absolute;
  left: 50%;
  top: 45%;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(1.2 * clamp(1.5rem, 6vw, 2.25rem));
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 1; /* above the sparkles */
}

/* ---- Game cards ---- */
.games { padding-top: 3rem; }  /* gray band right under the hero */
.games .heading { margin-bottom: 3.5rem; } /* on phones the art reaches up close to the heading already */

/* White card on the gray band, lifted by a soft shadow */
.game {
  max-width: 60rem;
  margin-inline: auto;
  padding: 0 1.25rem 2.25rem;
  background: var(--page);
  border-radius: 1.5rem;
  box-shadow: 0 10px 28px -10px rgba(29, 28, 34, 0.18);
  text-align: center;
  display: flow-root; /* lets the art poke out above the card's top edge */
}
.game + .game { margin-top: 5rem; }

.game h3 {
  margin: 1.75rem 0 0.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.game .lead { margin-inline: auto; }
.game .store-badges { justify-content: center; }
.game-meta {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Game art: three screenshots fanned out like playing cards.
   It pokes out above the top edge of the card. */
.game-art {
  position: relative;
  width: min(100%, 21rem);
  aspect-ratio: 1 / 0.98;
  margin: -2.5rem auto 0;
}
.game-art img {
  position: absolute;
  top: 0;
  left: 28%;
  width: 44%;
  aspect-ratio: 1290 / 2796;
  object-fit: cover;
  border-radius: 0.9rem;
  background: var(--f1);
  box-shadow: 0 10px 28px -10px rgba(29, 28, 34, 0.45);
}
.game-art img:nth-child(1),
.game-art img:nth-child(3) {
  top: 9%;
  width: 37%;
}
.game-art img:nth-child(1) { left: 2%;  transform: rotate(-7deg); }
.game-art img:nth-child(3) { left: 61%; transform: rotate(7deg); }
.game-art img:nth-child(2) { z-index: 1; }

/* ---- About ---- */
.about .button { margin-top: 0.25rem; }

/* =========================================================
   Dark footer
   ========================================================= */
.site-footer {
  background: var(--footer);
  color: #fff;
  padding-block: 3rem 2rem;
  font-size: 0.9375rem;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .brand { color: #fff; }

.footer-top {
  display: grid;
  gap: 1.75rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.5rem;
  color: var(--footer-dim);
  font-size: 0.875rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #fff; }

/* =========================================================
   Wider screens
   ========================================================= */
@media (min-width: 56rem) {
  .hero { padding-block: 4rem 3rem; }
  .games { padding-top: 4.5rem; }
  .games .heading { margin-bottom: 2rem; } /* the art starts right at the heading's bottom edge */

  /* Game card: art on the left, words on the right */
  .game {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    padding: 2.5rem 3.5rem 2.5rem 2rem;
    text-align: left;
  }
  .game-art { margin: -4.5rem 0 0; width: 100%; max-width: 26rem; justify-self: center; }
  .game h3 { margin-top: 0; font-size: 2rem; }
  .game .lead { margin-inline: 0; }
  .game .store-badges { justify-content: flex-start; }

  .footer-top {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .footer-links { justify-content: flex-end; }
}

/* =========================================================
   Motion, only for people who haven't asked for less of it
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  #gem polygon,
  .brand polygon { transition: fill 0.35s ease; }
  .button { transition: filter 0.15s ease, background-color 0.35s ease; }
  /* Menu: drops in with a slight overshoot (0.4s), lifts away quickly (0.2s) */
  .site-menu.is-open    { animation: menu-drop 0.4s ease-in-out; }
  .site-menu.is-closing { animation: menu-lift 0.2s ease-in-out forwards; }
  @keyframes menu-drop {
    0%   { transform: translateY(-100%); opacity: 0; }
    50%  { transform: translateY(5%);    opacity: 1; }
    100% { transform: translateY(0);     opacity: 1; }
  }
  @keyframes menu-lift {
    0%   { transform: translateY(0);     opacity: 1; }
    50%  { transform: translateY(5%);    opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
  }
  .menu-button .bar { transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; }
  .menu-button[aria-expanded="true"] .bar { transition-duration: 0.3s; }
  #gem.pop { animation: pop 0.45s ease; }
  @keyframes pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.07) rotate(-3deg); }
    100% { transform: scale(1); }
  }
  /* Three glints on a 4-second loop, brightest at 1s, 2s and 2.6s.
     Each twinkle grows in for 0.36s, then fades for 0.72s.
     The delay is when it starts growing, so it's 0.36s before its brightest moment. */
  .glint {
    animation: glint 4s ease-in-out 0.64s infinite backwards;
    transform-box: fill-box;
    transform-origin: center;
  }
  .glint--2 { animation-delay: 1.64s; }
  .glint--3 { animation-delay: 2.24s; }
  @keyframes glint {
    0%       { opacity: 0; transform: scale(0.4); }
    9%       { opacity: 1; transform: scale(1); }
    27%, 100% { opacity: 0; transform: scale(0.4); }
  }
  /* Sparkles shoot out fast and settle (easeOutExpo), while they
     shrink, spin and fade at the gentler pace they always had */
  .spark {
    animation:
      spark-move 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
      spark-fade 0.7s ease-out forwards;
  }
  @keyframes spark-move {
    from { translate: 0 0; }
    to   { translate: var(--dx) var(--dy); }
  }
  @keyframes spark-fade {
    from { scale: 1;   rotate: 0deg;  opacity: 1; }
    to   { scale: 0.2; rotate: 90deg; opacity: 0; }
  }
  /* "TAP!" pops in near the middle of the gem, then fades out */
  .tap-word { animation: tap-word 0.8s ease-out forwards; }
  @keyframes tap-word {
    0%   { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.6); }
    15%  { opacity: 1; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1.05); }
    100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .glint, .spark, .tap-word { display: none; }
  /* Menu just fades in and out, no sliding */
  .site-menu { transform: none; transition: opacity 0.15s; }
  .site-menu.is-closing { opacity: 0; }
  .site-menu-list li { transition: none; }
}

/* =========================================================
   Text pages (privacy policy, support)
   ========================================================= */
.doc {
  max-width: 44rem;
  padding-block: 2.5rem 4rem;
}
.doc h1 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.25rem, 9vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.doc h2 {
  margin: 2.5rem 0 0.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
}
.doc p, .doc li { overflow-wrap: anywhere; }
.doc ul { padding-left: 1.25rem; }
.doc li { margin-bottom: 0.5rem; }
.doc .updated { color: var(--muted); margin-top: 0; }