@import url('../fonts/fonts.css');

:root {
  --paper: #f6f0e7;
  --paper-2: #efe6d9;
  --card: #fffaf3;
  --ink: #1d1712;
  --ink-2: #5d5148;
  --ink-3: #8c7f74;
  --line: #e2d6c6;
  --coral: #e2603a;
  --coral-soft: #fbe0d4;
  --blue: #2747c9;
  --blue-soft: #dfe5fb;
  --green: #2f8a57;
  --radius: 18px;
  --hand: 'Caveat', cursive;
  --serif: 'Instrument Serif', serif;
  --sans: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --surface: #fff;
  --glass: rgba(246, 240, 231, .88);
  --grain: rgba(60, 40, 20, .05);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #15100c; --paper-2: #211913; --card: #1c1511; --surface: #241b15;
  --ink: #f4eadf; --ink-2: #cdbdad; --ink-3: #9b8c7f; --line: #3a2e25;
  --coral: #ff7d55; --coral-soft: #3b2219; --blue: #8ea2ff; --blue-soft: #1f2645; --green: #62d394;
  --glass: rgba(21, 16, 12, .86); --grain: rgba(255, 230, 200, .035);
  color-scheme: dark;
}
:root[data-theme="dark"] img.mascot-shadow, :root[data-theme="dark"] .hero-duo img { filter: drop-shadow(0 12px 30px rgba(255, 140, 90, .12)); }
:root[data-theme="dark"] .tag.green { background: #1d3527; }
:root[data-theme="dark"] .tag.coral { color: #ffb093; }
:root[data-theme="dark"] .quest.done, :root[data-theme="dark"] .module.done { background: #1c2b22; border-color: #2f4a3a; }
:root[data-theme="dark"] .mystery { background: #2a2214; border-color: #4a3c20; }
:root[data-theme="dark"] .cal .on { color: #1c1511; }
:root[data-theme="dark"] .cell.hit { background: #1f3d2c; }
:root[data-theme="dark"] .passport { background: var(--card); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  transition: background-color .25s, color .25s;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
/* subtle paper grain */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--grain) 1px, transparent 1px);
  background-size: 22px 22px;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

.hand { font-family: var(--hand); }
.serif-i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--coral); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer; transition: box-shadow .2s, background .2s;
  box-shadow: 3px 3px 0 var(--coral);
}
.btn:hover { box-shadow: 5px 5px 0 var(--coral); }
.btn:active { box-shadow: 1px 1px 0 var(--coral); }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--line); }
.btn.ghost:hover { box-shadow: 5px 5px 0 var(--ink-3); }
.btn.sm { padding: 8px 14px; font-size: 14px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: pulse 1.8s infinite; }

/* doodle helpers */
.doodle path, .doodle line, .doodle circle, .doodle ellipse, .doodle polyline {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.draw path, .draw circle, .draw ellipse, .draw polyline, .draw line {
  stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1.4s cubic-bezier(.6, .1, .3, 1);
}
.draw.in path, .draw.in circle, .draw.in ellipse, .draw.in polyline, .draw.in line { stroke-dashoffset: 0; }

.bubble {
  position: relative; display: inline-block;
  background: var(--card); border: 2px solid var(--ink);
  border-radius: 18px 18px 18px 4px;
  padding: 8px 14px; font-family: var(--hand); font-size: 22px; line-height: 1.1;
  box-shadow: 2px 3px 0 var(--ink);
}

/* motion */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 92%, 100% { opacity: 0; } 95% { opacity: 1; } }
@keyframes jitter { 0% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } 100% { transform: rotate(-.6deg); } }

.bob { animation: bob 4.5s ease-in-out infinite; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }

/* confetti */
.confetti-piece {
  position: fixed; top: -12px; width: 10px; height: 14px; z-index: 9999; pointer-events: none;
  border-radius: 2px; animation: fall linear forwards;
}
@keyframes fall { to { transform: translate(var(--dx), 105vh) rotate(var(--rot)); } }

/* toast */
.toast-wrap { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9000; }
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 16px;
  padding: 10px 16px 10px 10px; box-shadow: 3px 4px 0 var(--ink);
  animation: fadeUp .35s; max-width: 360px; font-size: 14px;
}
.toast img { width: 46px; height: 46px; object-fit: contain; }
.toast b { display: block; font-family: var(--hand); font-size: 22px; line-height: 1; }

/* accessibility */
.skip { position: absolute; left: 12px; top: -60px; z-index: 10000; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; transition: top .15s; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.theme-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.theme-btn:hover { border-color: var(--ink); }
.theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-moon { display: inline-block; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="reduce"] .reveal { opacity: 1; transform: none; }
:root[data-motion="reduce"] .draw path, :root[data-motion="reduce"] .draw circle, :root[data-motion="reduce"] .draw polyline, :root[data-motion="reduce"] .draw line { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .draw path, .draw circle, .draw ellipse, .draw polyline, .draw line { stroke-dashoffset: 0; }
  .reveal { opacity: 1; transform: none; }
}

h1, h2, h3, h4, .btn, .cta, .brand, .logo, .nav-item, .view-head h1, .pill, .q-t, .tag { font-family: var(--display); }
h1, h2 { font-weight: 800; letter-spacing: -.025em; }