/* ============================================================
   PixiePal — core: tokens, reset, layout, chrome
   Two real themes:
     .theme-night  → magical, low-light, hotel-room / evening use
     .theme-sun    → maximum contrast, sun-readable, in-park daytime use
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand ramp — dusk purple → gold. Never uses Disney trade dress. */
  --violet-050: #f3f0ff;
  --violet-200: #cfc2ff;
  --violet-400: #a78bfa;
  --violet-600: #7c5cf0;
  --violet-800: #3b2d80;
  --violet-950: #14103a;
  --ink-999: #07061a;

  --gold-300: #ffe08a;
  --gold-400: #ffc857;
  --gold-600: #e0a021;

  --rose-400: #ff6fb5;
  --mint-400: #4ade80;
  --sky-400: #38bdf8;
  --amber-400: #fbbf24;
  --red-400: #fb7185;

  /* Typography */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Avenir Next", "Trebuchet MS", var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale */
  --t-xs: 0.72rem;
  --t-sm: 0.82rem;
  --t-md: 0.94rem;
  --t-lg: 1.08rem;
  --t-xl: clamp(1.2rem, 3.4vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 5vw, 2.1rem);
  --t-3xl: clamp(1.9rem, 7vw, 3rem);

  /* Space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Thumb-reach: nothing tappable smaller than this. */
  --tap: 46px;

  --nav-h: calc(58px + env(safe-area-inset-bottom, 0px));
  --top-h: 54px;
  /* Real on-screen height of the top bar. Anything sticky below it, or any hash
     jump, has to clear the Dynamic Island too — not just the 54px of chrome. */
  --top-total: calc(var(--top-h) + env(safe-area-inset-top, 0px));
  /* Landscape puts the notch on a side, so horizontal gutters are a floor, not a constant. */
  --gutter-l: max(var(--s-4), env(safe-area-inset-left, 0px));
  --gutter-r: max(var(--s-4), env(safe-area-inset-right, 0px));
  --maxw: 720px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 240ms;
}

/* ---------- 2. Theme: Night (default) ---------- */
.theme-night {
  color-scheme: dark;
  --bg: var(--ink-999);
  --bg-grad: radial-gradient(1200px 700px at 50% -12%, #2a1f66 0%, #140f38 42%, #07061a 100%);
  --surface: rgba(31, 25, 74, 0.72);
  --surface-2: rgba(46, 38, 100, 0.66);
  --surface-solid: #1a1443;
  --hairline: rgba(167, 139, 250, 0.22);
  --hairline-strong: rgba(167, 139, 250, 0.42);

  --ink: #f4f1ff;
  --ink-2: #c9c1ec;
  --ink-3: #8f86bd;

  --accent: var(--gold-400);
  --accent-ink: #2a1c00;
  --accent-2: var(--violet-400);
  --accent-3: var(--rose-400);

  --ok: var(--mint-400);
  --warn: var(--amber-400);
  --bad: var(--red-400);
  --info: var(--sky-400);

  --shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 18px 50px rgba(0, 0, 0, 0.6);
  --glow: 0 0 26px rgba(255, 200, 87, 0.32);
  --blur: blur(16px) saturate(150%);
  --starfield-opacity: 1;
}

/* ---------- 3. Theme: Sun (in-park daylight) ---------- */
.theme-sun {
  color-scheme: light;
  --bg: #fffdf6;
  --bg-grad: linear-gradient(178deg, #fffdf6 0%, #fff6e4 100%);
  --surface: #ffffff;
  --surface-2: #fff5df;
  --surface-solid: #ffffff;
  /* Glare eats low-alpha hairlines first: card edges stop existing outdoors. */
  --hairline: rgba(20, 16, 58, 0.24);
  --hairline-strong: rgba(20, 16, 58, 0.42);

  --ink: #120e30;
  --ink-2: #3d3568;
  /* Was #625a8a (6.2:1). Muted text here is mostly 11–12px meta, read at arm's
     length in August sun — 8.3:1 keeps the hierarchy but survives the glare. */
  --ink-3: #4f4772;
  /* Same reason: the smallest step of the scale is a hair bigger in daylight. */
  --t-xs: 0.75rem;

  --accent: #7a4e00;
  --accent-ink: #ffffff;
  --accent-2: #5b34c9;
  --accent-3: #b3216d;

  --ok: #0f7a3d;
  --warn: #96590a;
  --bad: #b3261e;
  --info: #0a5f96;

  --shadow: 0 3px 12px rgba(20, 16, 58, 0.14);
  --shadow-lift: 0 10px 26px rgba(20, 16, 58, 0.2);
  --glow: none;
  --blur: none;
  --starfield-opacity: 0;
}

/* ---------- 4. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Hash targets must land below the sticky bar, not underneath it. */
  scroll-padding-top: calc(var(--top-total) + var(--s-3));
}
body {
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `none`, not `contain`: contain only stops chaining, it still lets the document
     itself bounce — which in standalone mode drags the status bar gap into view. */
  overscroll-behavior-y: none;
  touch-action: manipulation;
}
img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
input,
select,
textarea {
  /* Under 16px iOS Safari zooms the page on focus and never zooms back out.
     16px is a hard floor here, not a type-scale opinion. */
  font-size: max(16px, 1em);
}
/* A long press on a control shouldn't select its label or raise the callout menu —
   in a queue that reads as a bug. Controls only. */
button,
summary,
.chip,
.badge,
.nav,
.switch {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* ...but answers, trivia and prose are things people genuinely want to copy. */
.qopt,
.msg__body,
.quiz__q,
.jentry__text,
.prose {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
a {
  color: var(--accent-2);
  text-decoration-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
  text-underline-offset: 3px;
}
ul,
ol {
  list-style: none;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
::selection {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--ink);
}

/* ---------- 5. Starfield (night only, pure CSS, zero assets) ---------- */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--starfield-opacity);
  transition: opacity 600ms var(--ease-out);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent),
    radial-gradient(1px 1px at 28% 62%, #ffe7b0 50%, transparent),
    radial-gradient(1.6px 1.6px at 47% 12%, #fff 50%, transparent),
    radial-gradient(1px 1px at 63% 44%, #d9ccff 50%, transparent),
    radial-gradient(1.3px 1.3px at 79% 24%, #fff 50%, transparent),
    radial-gradient(1px 1px at 88% 70%, #ffe7b0 50%, transparent),
    radial-gradient(1.1px 1.1px at 8% 82%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 36% 88%, #d9ccff 50%, transparent),
    radial-gradient(1px 1px at 55% 74%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 71% 91%, #fff 50%, transparent),
    radial-gradient(1px 1px at 94% 38%, #fff 50%, transparent),
    radial-gradient(1.4px 1.4px at 19% 40%, #ffe7b0 50%, transparent);
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from {
    opacity: calc(var(--starfield-opacity) * 0.45);
  }
  to {
    opacity: calc(var(--starfield-opacity) * 1);
  }
}

/* ---------- 6. App layout ---------- */
#app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--top-total);
  padding: env(safe-area-inset-top, 0px) var(--gutter-r) 0 var(--gutter-l);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hairline);
}
.topbar__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__btn {
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  font-size: 1.15rem;
  color: var(--ink-2);
  transition: background var(--dur), transform var(--dur) var(--ease-spring);
}
.topbar__btn:active {
  transform: scale(0.88);
  background: var(--surface-2);
}

main#view {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s-4) var(--gutter-r) calc(var(--nav-h) + var(--s-7)) var(--gutter-l);
  animation: viewIn 320ms var(--ease-out);
}
@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- 7. Bottom navigation ---------- */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Landscape: the notch side would otherwise swallow a whole tab. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-top: 1px solid var(--hairline);
}
.nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  position: relative;
  transition: color var(--dur);
}
.nav__item .ico {
  font-size: 1.28rem;
  line-height: 1;
  transition: transform var(--dur) var(--ease-spring);
}
.nav__item[aria-current="page"] {
  color: var(--accent);
}
.nav__item[aria-current="page"] .ico {
  transform: translateY(-3px) scale(1.14);
}
.nav__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 26px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: var(--glow);
}
.nav__item:active .ico {
  transform: scale(0.86);
}

/* ---------- 8. Utility ---------- */
.stack > * + * {
  margin-top: var(--s-4);
}
.stack-sm > * + * {
  margin-top: var(--s-2);
}
.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.row-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.grow {
  flex: 1;
  min-width: 0;
}
.center {
  text-align: center;
}
.muted {
  color: var(--ink-3);
}
.dim {
  color: var(--ink-2);
}
.tiny {
  font-size: var(--t-xs);
}
.small {
  font-size: var(--t-sm);
}
.bold {
  font-weight: 700;
}
.nowrap {
  white-space: nowrap;
}
.hidden {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.scroll-x {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-2);
  margin-inline: calc(var(--s-4) * -1);
  padding-inline: var(--s-4);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Without this, running out of rail hands the gesture to Safari's swipe-back
     and the whole view slides away mid-browse. */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: contain;
}
.scroll-x::-webkit-scrollbar {
  display: none;
}
.scroll-x > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* ---------- 9. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 10. Wider screens: the phone app grows up gracefully ---------- */
@media (min-width: 860px) {
  :root {
    --maxw: 980px;
  }
  .nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: var(--s-4);
    width: min(680px, calc(100% - var(--s-6)));
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lift);
    height: 62px;
    padding-bottom: 0;
  }
  main#view {
    padding-bottom: calc(var(--s-8) + var(--s-7));
  }
}