/* Look and feel borrowed from the classic I Spy picture-riddle books:
   a busy pile of toys, a cream circle badge with an orange ring, a tall red "I SPY",
   and riddles set in an old-fashioned serif. */

:root {
  --red: #d42a2a;
  --logo-red: #d01c23;
  --red-text: #b81c22;
  --ring: #ee6a1f;
  --red-dark: #9e1a1d;
  --gold: #f6b730;
  --green: #17713b;
  --blue: #2357a6;
  --paper: #fffdf6;
  --ink: #1d1a17;
  --ink-soft: #5a4f43;
  --wood: #5a3a22;

  /* The book covers use a tall, condensed, high-contrast serif; Noto Serif Display Condensed is the closest free match. */
  --font-logo: "Noto Serif Display", "Didot", "Bodoni 72", Georgia, serif;
  --font-label: var(--font-logo);
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-serif);
  color: var(--ink);
}

/* MindAR puts the camera <video> inside body; the scene sits on top of it. */
body { position: relative; }
#ar-scene { position: fixed; inset: 0; width: 100%; height: 100%; }
.a-enter-vr, .a-enter-ar { display: none !important; } /* A-Frame's VR/fullscreen button isn't needed */

/* ---------- Cover screens (start + done) ---------- */

.screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.5vh, 32px);
  padding: 24px 16px 64px;
  text-align: center;
  background: var(--wood);
  overflow: hidden;
}

.clutter { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover > :not(.clutter) { position: relative; z-index: 1; }

/* The cover circle: see-through white with a single orange ring, so the toys show through. */
.badge {
  --badge: min(86vw, 50vh, 400px);
  --u: calc(var(--badge) / 100); /* 1% of the badge width, so everything inside scales together */
  position: relative;
  width: var(--badge);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(7 * var(--u));
  background: rgb(255 255 255 / 0.9);
  border: calc(3.4 * var(--u)) solid var(--ring);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
}

.badge-arc {
  position: absolute;
  inset: calc(2 * var(--u));
  width: calc(100% - 4 * var(--u));
  height: calc(100% - 4 * var(--u));
  overflow: visible;
}
.badge-arc text {
  font-family: var(--font-serif);
  font-size: 8.5px;
  font-style: italic;
  letter-spacing: 0.04em;
  fill: var(--ink);
}

.logo {
  margin: calc(9 * var(--u)) 0 calc(2 * var(--u));
  font-family: var(--font-logo);
  font-weight: 900;
  font-stretch: 62.5%;
  font-size: calc(33 * var(--u));
  line-height: 0.88;
  /* The book logo is narrower and taller than any free font, so squeeze it a little. */
  transform: scale(0.84, 1.14);
  letter-spacing: 0;
  color: var(--logo-red);
  white-space: nowrap;
}
.logo-long { font-size: calc(24 * var(--u)); }

/* The second, coloured title word, like "THINGS THAT GO" or "CHRISTMAS". */
.badge-title {
  margin: 0;
  font-family: var(--font-logo);
  font-weight: 900;
  font-stretch: 62.5%;
  font-size: calc(14 * var(--u));
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}

.badge-sub {
  margin: calc(2.2 * var(--u)) 0 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(3.7 * var(--u));
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}

.badge-credits {
  margin: calc(2 * var(--u)) 0 0;
  font-size: calc(3.5 * var(--u));
  line-height: 1.45;
  color: var(--ink);
}
.badge-credits em { font-style: normal; font-weight: 700; color: var(--red-text); }

/* Green round sticker on the badge's edge, like "NEW CHALLENGES INCLUDED!" */
.sticker {
  position: absolute;
  z-index: 2;
  top: calc(-1 * var(--u));
  left: calc(-2 * var(--u));
  width: calc(24 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  border: calc(0.9 * var(--u)) solid #fff;
  outline: calc(0.6 * var(--u)) solid var(--green);
  color: #fff;
  font-family: var(--font-logo);
  font-weight: 900;
  font-stretch: 62.5%;
  font-size: calc(5.4 * var(--u));
  line-height: 0.95;
  text-transform: uppercase;
  transform: rotate(-14deg);
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.35);
}

.cover-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.fine-print {
  margin: 0;
  max-width: 34ch;
  padding: 8px 14px;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.35);
}

/* The little red publisher label at the bottom of every cover. */
.publisher-tab {
  position: absolute !important;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 14px;
  background: var(--red);
  color: #fff;
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.tab-icon {
  width: 14px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M0 1l5.5 1.2V10L0 8.8zM12 1L6.5 2.2V10L12 8.8z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Cards over the camera (riddle + found), like the white riddle boxes in the books ---------- */

.card {
  position: fixed;
  z-index: 10;
  left: 16px;
  right: 16px;
  max-width: 480px;
  margin: 0 auto;
  padding: 34px 22px 20px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
  text-align: center;
}
.card-bottom { bottom: calc(16px + env(safe-area-inset-bottom)); }

.mini-badge {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 4px solid var(--ring);
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.3);
  font-family: var(--font-logo);
  font-weight: 900;
  font-stretch: 62.5%;
  font-size: 1.4rem;
  color: var(--logo-red);
}

.eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-label);
  font-weight: 900;
  font-stretch: 62.5%;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red-text);
}

.riddle {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.6;
  white-space: pre-line; /* riddles can be written as rhyming lines */
}
.hint { margin: 10px 0 0; font-style: italic; color: var(--ink-soft); }

.found-name {
  margin: 0;
  font-family: var(--font-logo);
  font-weight: 900;
  font-stretch: 62.5%;
  font-size: 2.2rem;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--blue);
}
.found-student { margin: 6px 0 0; color: var(--ink); }
.found-student b { color: var(--red-text); }

.row { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-label);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease;
}
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: var(--red);
  border-color: var(--red-dark);
  color: #fff;
  box-shadow: 0 3px 0 var(--red-dark);
}
.btn-big { min-width: 200px; min-height: 54px; font-size: 1.3rem; border-width: 3px; }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Toast ---------- */

#toast {
  position: fixed;
  z-index: 30;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-style: italic;
  text-align: center;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}