/* vDAA theme ("Wolves at aurora"). The art pass edits THIS file and drops images in public/art/; app.css only reads these tokens.
   Look: a pixel-art night plaza under an aurora, dark glass panels, a heavy display headline, a gold coin counter,
   small pixel-font labels. Palette and type follow design/home-mockup.html. */

/* Fonts are self-hosted (public/fonts, SIL Open Font License, licence texts alongside) so no student browser contacts a third party. */
@font-face { font-family: 'Lilita One'; src: url('/fonts/LilitaOne-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/Nunito-Variable.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('/fonts/Silkscreen-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;

  /* palette */
  --royal: #1f3fa6;
  --ice: #7fd3f7;
  --snow: #f4f8ff;
  --night: #0e1630;
  --gold: #f5c451;
  --lime: #b5d334;
  --ember: #f26b3a;
  --aurora: #46e0b0;

  /* type */
  --font-display: 'Lilita One', 'Arial Black', Impact, system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-pixel: 'Silkscreen', ui-monospace, Menlo, Consolas, monospace;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-base: 1.0625rem;
  --text-small: 0.875rem;
  --text-display: clamp(2.25rem, 7vw, 4.5rem);
  --text-hero: clamp(3.25rem, 13vw, 7rem);

  /* colour roles */
  --ink: var(--snow);
  --ink-muted: #c3d4f5;
  --ink-on-accent: #3a2a05;
  --accent: var(--gold);          /* coins, hero numbers, focus ring */
  --accent-strong: #d9a21f;
  --accent-glow: rgba(245, 196, 81, 0.45);
  --label: var(--ice);
  --ok: var(--lime);
  --bad: #ff9a7a;                 /* ember, lightened for contrast on dark glass */
  --coin-face: var(--gold);
  --coin-rim: #b98a1f;
  --coin-shine: #fff3b8;

  /* buttons */
  --btn-bg: linear-gradient(180deg, #2f5bdb, var(--royal));
  --btn-bg-hover: linear-gradient(180deg, #4a74f0, #2748b8);
  --btn-ink: var(--snow);
  --btn-border: var(--ice);
  --btn-shadow: 0 3px 0 #11246b;

  /* glass panels */
  --glass-bg: rgba(10, 18, 44, 0.62);
  --pill-bg: rgba(8, 14, 36, 0.86);   /* text that sits on the photo outside a glass panel: darker than glass so it reads on bright day art */
  --glass-bg-solid: #0c1534;      /* used when backdrop-filter is unavailable */
  --glass-border: rgba(180, 215, 255, 0.24);
  --glass-shadow: 0 10px 32px rgba(3, 6, 20, 0.5);
  --blur: 10px;
  --field-bg: rgba(180, 215, 255, 0.1);
  --field-border: rgba(180, 215, 255, 0.4);
  --row-line: rgba(180, 215, 255, 0.16);
  --text-shadow: 0 1px 4px rgba(3, 6, 20, 0.95);   /* keeps loose text readable over the artwork */

  /* shape */
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --tap: 48px;                    /* minimum touch target */

  /* scene: image layer (per zone) over a gradient fallback, then a shade for legibility */
  --scene-image: none;
  --scene-sky: radial-gradient(70% 50% at 70% 8%, rgba(70, 224, 176, 0.3), transparent 70%), linear-gradient(180deg, #0e1630 0%, #14275f 55%, #1f3fa6 100%);
  --scene-shade: linear-gradient(0deg, rgba(8, 14, 36, 0.7) 0%, rgba(8, 14, 36, 0) 30%), rgba(8, 14, 36, 0.08);
  --scene-fallback: var(--night);

  /* mascot slot, bottom-right */
  --mascot-image: url('/art/wolf.png');   /* the DAA Wolf, after the school mascot (design/mascot/wolf-8104.png) */
  --mascot-size: 220px;

  /* print (PIN cards stay black on white whatever the theme) */
  --print-paper: #ffffff;
  --print-ink: #000000;
  --print-line: #888888;

  /* four-point sparkle before pixel labels */
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.7 9.3L24 12l-9.3 2.7L12 24l-2.7-9.3L0 12l9.3-2.7z'/%3E%3C/svg%3E");
}

/* ---------- scenes: one photo per zone, a night and a day version (public/art/scenes/<zone>-night|day.webp) ----------
   Which photo a screen shows: data-zone on .scene is the building key (student.js), 'gate' on the login screen, 'teach' in the console.
   Day or night follows real Edmonton sunrise and sunset (public/daylight.js sets data-daypart); the day photo fades in over the night one. */
.scene[data-zone='gate'], .scene[data-zone='housing']            { --scene-night: url('/art/scenes/gate-night.webp');         --scene-day: url('/art/scenes/gate-day.webp'); }
/* The Agora photo (agora-night|day.webp) is held back until the Indigenous education lead has reviewed it (PLAN.md "Respect");
   the gate stands in for the town until then. */
.scene[data-zone='town'], .scene[data-zone='job'], .scene[data-zone='venture-row']             { --scene-night: url('/art/scenes/gate-night.webp');         --scene-day: url('/art/scenes/gate-day.webp'); }
.scene[data-zone='bank'], .scene[data-zone='bank-of-daa'],
.scene[data-zone='credit'], .scene[data-zone='exchange'], .scene[data-zone='teach']           { --scene-night: url('/art/scenes/council-night.webp');      --scene-day: url('/art/scenes/council-day.webp'); }
.scene[data-zone='bills'], .scene[data-zone='networth']         { --scene-night: url('/art/scenes/archive-night.webp');      --scene-day: url('/art/scenes/archive-day.webp'); }
.scene[data-zone='amphitheatre']                                { --scene-night: url('/art/scenes/amphitheatre-night.webp'); --scene-day: url('/art/scenes/amphitheatre-day.webp'); }
.scene[data-zone='insurance']                                   { --scene-night: url('/art/scenes/arena-night.webp');        --scene-day: url('/art/scenes/arena-day.webp'); }

/* ---------- full-bleed background ---------- */
body { margin: 0; background: var(--scene-fallback); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; }
.scene {
  --scene-night: url('/art/scenes/gate-night.webp'); --scene-day: url('/art/scenes/gate-day.webp');   /* any other zone: the gate (the Agora, once reviewed) */
  position: fixed; inset: 0; z-index: -1;
  background-color: var(--scene-fallback);
  background-image: var(--scene-night), var(--scene-sky);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.scene::before {                      /* the day photo, faded in by day */
  content: ''; position: absolute; inset: 0;
  background: var(--scene-day) center / cover no-repeat;
  opacity: 0; transition: opacity 2.5s ease;
}
.scene[data-daypart='day']::before { opacity: 1; }
.scene::after { content: ''; position: absolute; inset: 0; background: var(--scene-shade); }
.scene[data-daypart='day'] { --scene-shade: linear-gradient(0deg, rgba(8, 14, 36, 0.72) 0%, rgba(8, 14, 36, 0.15) 45%), rgba(8, 14, 36, 0.28); }   /* bright photos need more shade under the glass */

/* ---------- glass panel ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-bg-solid); }
}

/* ---------- display type ---------- */
.display {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--text-display); line-height: 0.98; letter-spacing: 0.01em; margin: 0;
  overflow-wrap: anywhere; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.label {
  font-family: var(--font-pixel); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; line-height: 1.4;
  color: var(--label); display: inline-flex; align-items: center; gap: 0.7em;
}
.label::before {
  content: ''; width: 1.1em; height: 1.1em; background: var(--gold); flex: none;
  -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat;
  animation: twinkle 3.2s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.8); } }

/* ---------- hero number with coin ---------- */
.hero { display: flex; align-items: center; gap: 0.25em; font-family: var(--font-display); font-size: var(--text-hero); line-height: 1; color: var(--accent); text-shadow: 0 3px 0 #7a5410, 0 0 28px var(--accent-glow); }
.hero .coin { width: 0.9em; height: 0.9em; flex: none; filter: drop-shadow(0 0 14px var(--accent-glow)); }
.coin .face { fill: var(--coin-face); }
.coin .rim { fill: none; stroke: var(--coin-rim); stroke-width: 2.5; }
.coin .shine { fill: none; stroke: var(--coin-shine); stroke-width: 2; stroke-linecap: round; }
.coin .mark { fill: var(--coin-rim); font-family: var(--font-display); }

/* ---------- top-right pill bar ---------- */
.pills { position: absolute; top: 12px; right: 12px; z-index: 10; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0 16px;
  font: 700 0.9rem var(--font-body); color: var(--ink); cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
}
.pill:hover { border-color: var(--ice); }
.pill[aria-pressed='true'] { border-color: var(--ice); }
.pill svg { width: 1.25em; height: 1.25em; }

/* ---------- reserved mascot slot, bottom-right ---------- */
.mascot {
  position: fixed; right: 8px; bottom: 0; z-index: 1; pointer-events: none;
  width: var(--mascot-size); height: var(--mascot-size);
  background: var(--mascot-image) right bottom / contain no-repeat;
}
@media (max-width: 720px) { :root { --mascot-size: 0px; } }

/* ---------- focus ---------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}