/* ===========================================================
   GEORGE'S WEBSITE: site shell
   Design tokens, skip link, header/nav, footer and focus styles.
   Loaded by EVERY page, including the quiz games, so the header and
   footer look identical everywhere. Page layouts, cards and sections
   live in styles.css (loaded after this file on the main pages only;
   the quiz games keep their own game styles).
   =========================================================== */
/* 2. Design tokens --------------------------------------------------
   Same tokens published in the Garibaldi Grid style guide —
   keep this block in sync if the palette ever changes. */
:root{
  --ink:#121014;
  --surface:#1c1820;
  --surface-raised:#241f29;
  --line: rgba(241,237,233,0.10);
  --line-strong: rgba(241,237,233,0.18);
  --chalk:#f1ede9;
  --chalk-dim:#b9b2ac;
  --chalk-faint:#9a958e; /* lifted from #8a857e so it also passes AA on the raised card colour (4.4:1 before) */

  --garibaldi:#e1102c;
  --garibaldi-ink:#3a0a12;
  --volt:#9d5cff;
  --volt-ink:#241a3a;
  --gold:#f5b942;
  --gold-ink:#3a2a0c;

  /* Accessibility note: the raw brand colours above are tuned for large
     surfaces, glows and borders, where WCAG contrast rules don't apply
     the same way. Used as small TEXT on a dark background, garibaldi and
     volt both fall short of the 4.5:1 AA minimum (measured ~3.5-4.2:1).
     These are lightened, text-safe variants for that specific job — same
     hue, still clearly "the same colour", but legible.
     Gold and chalk-dim/faint are covered separately below. */
  --garibaldi-text:#e84c61;   /* was #e1102c as text → 3.5-3.9:1. Now 4.6-5.1:1 */
  --volt-text:#a264ff;        /* was #9d5cff as text → 4.2-4.9:1. Now 4.5-5.2:1 */
  /* gold (#f5b942) already passes AA as text (7.9-10.7:1) — no variant needed */

  /* A solid button fill needs to hold contrast against chalk (button
     label) text. #e1102c + chalk = 4.18:1 (fails). This fill is ~10%
     darker — 5.0:1 — and reads as the same red at button size. */
  --garibaldi-solid:#ca0e28;

  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --shadow-card: 0 10px 30px rgba(0,0,0,0.45);
  --glow-garibaldi: 0 0 0 1px rgba(225,16,44,0.4), 0 0 28px rgba(225,16,44,0.35);
  --glow-volt: 0 0 0 1px rgba(157,92,255,0.4), 0 0 28px rgba(157,92,255,0.35);
  --glow-gold: 0 0 0 1px rgba(245,185,66,0.4), 0 0 28px rgba(245,185,66,0.35);

  --font-display:'Rajdhani', 'Arial Narrow', sans-serif;
  --font-body:'Manrope', -apple-system, 'Segoe UI', sans-serif;

  --accent: var(--garibaldi);
  --accent-text: var(--garibaldi-text);
  --accent-ink: var(--garibaldi-ink);
  --glow-accent: var(--glow-garibaldi);
  /* Text colour to put ON a filled --btn-bg swatch. Dark ink reads on the
     light accents (gold); light chalk reads on the dark/saturated ones
     (garibaldi's solid fill, volt). Getting this backwards is how you end
     up with a school-zone button at 1.5:1 contrast — see the audit note
     in the button rules below. */
  --btn-bg: var(--garibaldi-solid);
  --on-accent: var(--chalk);
}

/* Per-page accent: the current section's colour drives the nav
   underline, hero glow and primary button on that page only. */
body[data-page="school"], body[data-page="space"]{
  --accent: var(--gold); --accent-text: var(--gold); --accent-ink: var(--gold-ink); --glow-accent: var(--glow-gold);
  --btn-bg: var(--gold); --on-accent: var(--ink); /* chalk-on-gold was 1.52:1 — badly fails AA. Ink-on-gold is 10.7:1. */
}
body[data-page="quiz-zone"], body[data-page="quiz-game"]{
  --accent: var(--volt); --accent-text: var(--volt-text); --accent-ink: var(--volt-ink); --glow-accent: var(--glow-volt);
  --btn-bg: var(--volt); --on-accent: var(--ink);
}
.skip-link{
  position: absolute; left: -9999px; top: 0; background: var(--garibaldi); color: var(--chalk);
  padding: 12px 20px; z-index: 1000; border-radius: 0 0 var(--r-sm) 0; font-family: var(--font-display); font-weight: 600;
}
.skip-link:focus { left: 0; }
/* 5. Header & navigation ---------------------------------------------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(18,16,20,0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-strong);
}
.nav-bar{
  max-width: 1080px; margin: 0 auto; padding: var(--s3) var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.logo{ font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--chalk); }
/* Small "logged in as" box in the header (added by js/main.js, only when logged in). */
.acct-chip{ display: inline-flex; align-items: center; gap: 6px; max-width: 150px; min-height: 36px; padding: 0 12px; margin-right: auto;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--chalk);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; text-decoration: none; }
.acct-chip b{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.acct-chip:hover, .acct-chip:focus-visible{ border-color: var(--gold); color: var(--gold); }
/* Sits beside the logo so the menu links stay exactly where they always were. */
@media (min-width: 761px) and (max-width: 1000px){ .acct-chip b{ display: none; } .acct-chip{ padding: 0 10px; } }
@media (max-width: 760px){ .acct-chip{ margin-left: auto; margin-right: 0; } }
/* The note under the name box at the end of a game. */
.gz-login-note{ flex: 1 0 100%; margin: 8px 2px 0; font-size: 13px; line-height: 1.45; color: #b9b2ac; text-align: left; }
.gz-login-note b{ color: #f1ede9; }
.gz-login-note a{ color: #f5b942; text-decoration: underline; }
.logo span { color: var(--garibaldi); }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; margin-right: 8px; }
.nav-links{ display: flex; gap: var(--s5); }
.nav-links a{
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--chalk-dim); padding-bottom: 4px; border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--chalk); }
.nav-links a[aria-current="page"], .nav-links a[aria-current="true"] { color: var(--accent-text); border-color: var(--accent); }

.nav-toggle{
  display: none; background: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; color: var(--chalk); }

.mobile-nav{
  display: none; flex-direction: column; gap: var(--s2); padding: var(--s4);
  border-top: 1px solid var(--line-strong); background: var(--surface);
}
.mobile-nav a{
  font-family: var(--font-display); font-weight: 600; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-sm); color: var(--chalk-dim); min-height: 44px;
}
.mobile-nav a[aria-current="page"], .mobile-nav a[aria-current="true"] { background: var(--accent-ink); color: var(--accent-text); }
.mobile-nav svg { width: 20px; height: 20px; flex-shrink: 0; }

@media (max-width: 760px){
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  body.nav-open .mobile-nav { display: flex; }
}

/* 9b. Bottom tab bar (phones only) ------------------------------------------
   Injected by js/main.js (initBottomTabs) on the main pages, so the
   thumb-reachable nav an app would have doesn't mean editing every
   page's HTML by hand. Sits above iOS/Android's own home-indicator
   safe area. */
.bottom-tabbar{
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  gap: 2px; padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
  background: rgba(28,24,32,0.88);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.35);
}
.bottom-tabbar a{
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 2px; min-height: 52px; border-radius: var(--r-sm);
  color: var(--chalk-faint); font-family: var(--font-display); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.01em; text-transform: uppercase; transition: color 0.15s ease;
}
.bottom-tabbar a svg{ width: 22px; height: 22px; transition: transform 0.15s ease; }
.bottom-tabbar a[aria-current="page"], .bottom-tabbar a[aria-current="true"]{ color: var(--accent-text); }
.bottom-tabbar a[aria-current="page"] svg, .bottom-tabbar a[aria-current="true"] svg{ transform: translateY(-1px) scale(1.08); }
.bottom-tabbar a:active svg{ transform: scale(0.9); }
@media (max-width: 760px){
  .bottom-tabbar{ display: flex; }
  body.has-bottom-tabbar{ padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body.has-bottom-tabbar .site-footer{ margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce){
  .bottom-tabbar a, .bottom-tabbar a svg{ transition: none; }
}

/* 10. Footer --------------------------------------------------------------- */
.site-footer{
  border-top: 1px solid var(--line); padding-block: var(--s6);
  color: var(--chalk-faint); font-size: 0.85rem;
}
.footer-row{
  max-width: 1080px; margin: 0 auto; padding-inline: var(--s4);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.footer-row a { color: var(--chalk-dim); }
.footer-row a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Shell pieces also need a couple of basics on pages that don't load
   styles.css (the quiz games). */
.site-header, .site-footer, .skip-link { font-family: var(--font-body); }
.site-header a, .site-footer a { text-decoration: none; }
.nav-links, .mobile-nav { list-style: none; margin: 0; padding: 0; }
.site-header svg { display: block; }
.footer-row span { color: var(--chalk-faint); }


[hidden] { display: none !important; }

/* =====================================================================
   MOTION (every page)
   Everything here is progressive: browsers that don't support a feature
   simply show the site as before, and "reduce motion" turns it all off.
   ===================================================================== */

/* 1. Page transitions (View Transitions API). Pages glide into each other;
   the header stays put; named elements (game titles) fly between pages. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out 0.18s ease both; }
::view-transition-new(root) { animation: vt-in 0.34s cubic-bezier(.2,.8,.2,1) both; }
::view-transition-group(*) { animation-duration: 0.38s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* 2. Holographic cards (js/holo.js adds the shine layers and the tilt). */
[data-holo]{
  position: relative; display: block; border-radius: inherit;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); will-change: transform;
}
[data-holo].holo-live { transition: transform 0.08s linear; }
.holo-shine, .holo-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; }
.holo-shine{
  mix-blend-mode: color-dodge; opacity: 0.5;
  background: repeating-linear-gradient(115deg,
    hsla(0,100%,70%,0) 0%, hsla(330,100%,70%,.45) 7%, hsla(50,100%,65%,.45) 14%,
    hsla(160,100%,60%,.45) 21%, hsla(210,100%,65%,.45) 28%, hsla(280,100%,70%,.45) 35%, hsla(0,100%,70%,0) 42%);
  background-size: 260% 260%;
  background-position: var(--mx, 50%) var(--my, 50%);
  animation: holo-idle 7s ease-in-out infinite alternate;
}
[data-holo].holo-live .holo-shine { animation: none; }
.holo-glare{
  mix-blend-mode: overlay; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.75), rgba(255,255,255,0) 50%);
  transition: opacity 0.3s ease;
}
[data-holo].holo-live .holo-glare { opacity: 1; }
@keyframes holo-idle { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }

/* 3. Slowly moving light behind the page headers. */
@property --aurora { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.page-banner::after, .hero::after{
  content: ''; position: absolute; inset: -40%; pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--aurora) at 30% 45%,
    rgba(225,16,44,0.20), rgba(245,185,66,0.10), transparent 30%, rgba(245,185,66,0.06), transparent 60%, rgba(225,16,44,0.20));
  filter: blur(70px); opacity: 0.8;
  animation: aurora 30s linear infinite;
}
.hero { position: relative; overflow: hidden; }
.hero > .wrap, .page-banner > .wrap { position: relative; z-index: 1; }
@keyframes aurora { to { --aurora: 360deg; } }

/* 4. A glowing border that travels round the next Forest match. */
@property --edge { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.match-card{
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--edge), rgba(225,16,44,0.9), rgba(245,185,66,0.7), rgba(241,237,233,0.12) 35%, rgba(241,237,233,0.12) 65%, rgba(225,16,44,0.9)) border-box !important;
  animation: edge 6s linear infinite;
}
@keyframes edge { to { --edge: 360deg; } }

@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
  [data-holo] { transform: none !important; transition: none; }
  .holo-shine { animation: none; }
  .page-banner::after, .hero::after, .match-card { animation: none; }
}
.footer-row .footer-progress { margin-left: var(--s4); }
.footer-row > span { flex: 1 1 260px; }
.footer-row > a { flex: none; }

/* Links in the footer and in the "back / save my progress" rows are easy to hit with a thumb */
.footer-row a, p.links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 6px 8px; }
p.links { display: flex; flex-wrap: wrap; gap: 0 20px; }