/* Ask the Oracle - mobile-first, brand-aligned, fully theme-driven.
 *
 * Every colour is a CSS custom property. app.js sets these on :root from the
 * active object's palette (see data.js). The values below are the 8-ball
 * object, used as a fallback so the page still renders before JS runs.
 *
 * Every object shares ONE reveal mechanism: a riser carrying the answer text
 * rises from the depths of the object's window. Only the colours and the
 * object's silhouette change between objects, never the motion. */

:root {
  --page-bg: linear-gradient(180deg, #dde5ed 0%, #defff0 100%);
  --page-text: #2f2c28;
  --page-muted: #5e5c5e;
  --surface: #ffffff;
  --surface-border: rgba(0, 0, 0, 0.12);
  --body: #1c1f24;
  --body-highlight: #565b64;
  --body-edge: #000000;
  --window-fill: #1d4ed8;
  --window-deep: #0a1838;
  --window-glow: #3b82f6;
  --answer-text: #eaf1ff;
  --deco1: #ffffff;
  --deco2: #1c1f24;
  --accent: #157623;
  --accent-hover: #0f5a1b;
  --accent-text: #ffffff;

  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  --oracle-size: min(82vw, 56vh, 360px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Arimo', sans-serif;
  color: var(--page-text);
  background: var(--page-bg) fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease, color 0.4s ease;
}

#app {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* ===== Shared header bar (per HEADER_SPECS) ===== */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
  position: relative;
  z-index: 1100;
}

.header-left { flex: 1; min-width: 0; max-width: 85%; }
.header-right { flex-shrink: 0; min-width: 52px; }

.game-title-wrap { position: relative; display: inline-block; }

.game-title-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

.game-title-heading {
  margin: 0;
  font-family: 'League Spartan', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--page-text);
}

.game-title-chevron { font-size: 0.7rem; color: var(--page-muted); }

.game-title-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 170px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.game-title-dropdown[aria-hidden="false"] { display: block; }

.game-nav-link {
  display: block;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: #2f2c28;
  text-decoration: none;
  border-bottom: 1px solid #e2e8f0;
}

.game-nav-link:last-child { border-bottom: none; }
.game-nav-link:hover { background: #defff0; }

/* ===== Game heading + tagline ===== */
.game-intro { text-align: center; margin-top: 0.25rem; }

.game-h1 {
  font-family: 'League Spartan', sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--page-text);
}

.tagline {
  font-family: 'Trocchi', Georgia, serif;
  font-size: 0.98rem;
  color: var(--page-muted);
  margin-top: 0.35rem;
}

/* ===== Question input ===== */
.ask-row { width: 100%; max-width: 440px; }

.question-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--page-muted);
  margin-bottom: 0.35rem;
}

.question-input {
  width: 100%;
  font-family: 'Arimo', sans-serif;
  font-size: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--surface-border);
  background: var(--surface);
  color: var(--page-text);
  outline: none;
  transition: border-color 0.15s, background 0.4s ease;
}

.question-input::placeholder { color: var(--page-muted); opacity: 0.85; }
.question-input:focus { border-color: var(--accent); }

/* ===================================================================
   THE ORACLE OBJECT
   .oracle is a square stage. .oracle__body is the vessel (its silhouette
   changes per object). .oracle__window is the portal the answer rises into.
   =================================================================== */
.oracle-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
}

.oracle {
  position: relative;
  width: var(--oracle-size);
  height: var(--oracle-size);
  cursor: pointer;
}

/* ----- The vessel body (default: a sphere) ----- */
.oracle__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  background: radial-gradient(circle at 32% 27%,
    var(--body-highlight) 0%, var(--body) 45%, var(--body-edge) 100%);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.42),
    inset 0 -24px 46px rgba(0, 0, 0, 0.5),
    inset 0 16px 32px rgba(255, 255, 255, 0.1);
  transition: background 0.4s ease;
}

/* Soft glossy highlight, clipped to whatever shape the body has. */
.oracle__body::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 14%;
  width: 34%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 72%);
  filter: blur(2px);
}

/* ----- The portal window (default: a circle) ----- */
.oracle__window {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 58%;
  height: 58%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  background: radial-gradient(circle at 50% 36%,
    var(--window-deep) 0%, #000000 130%);
  box-shadow:
    inset 0 8px 20px rgba(0, 0, 0, 0.82),
    inset 0 -4px 12px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.5s ease, background 0.4s ease;
}

.oracle.is-revealed .oracle__window {
  box-shadow:
    inset 0 8px 20px rgba(0, 0, 0, 0.65),
    0 0 26px 3px var(--window-glow);
}

/* ----- The riser: carries the answer up from the depths ----- */
.oracle__riser {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: 86%;
  height: 80%;
  transform: translate(-50%, 126%);
  border-radius: 46% 46% 12% 12% / 62% 62% 16% 16%;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(165deg, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0.32) 100%),
    var(--window-fill);
  opacity: 0;
  /* Resting transition = sinking back into the depths. */
  transition:
    transform 0.34s cubic-bezier(0.5, 0, 0.75, 0.3),
    opacity 0.25s ease;
}

/* Revealed transition = the buoyant rise, with a slight overshoot settle. */
.oracle.is-revealed .oracle__riser {
  transform: translate(-50%, 0);
  opacity: 1;
  transition:
    transform 0.66s cubic-bezier(0.34, 1.46, 0.64, 1),
    opacity 0.3s ease;
}

/* ----- The answer text ----- */
.oracle__answer {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 82%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: calc(var(--oracle-size) * 0.058);
  line-height: 1.12;
  color: var(--answer-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.2s ease;
}

.oracle.is-revealed .oracle__answer {
  opacity: 1;
  transition: opacity 0.32s ease 0.34s;
}

/* ----- Decorations: hidden by default, switched on per object ----- */
.oracle__badge,
.oracle__stem,
.oracle__eye,
.oracle__base { display: none; }

/* ===================================================================
   OBJECT: 8-BALL
   =================================================================== */
.oracle--8ball .oracle__badge {
  display: flex;
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 22%;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--deco1);
  color: var(--deco2);
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: calc(var(--oracle-size) * 0.135);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.25), 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 4;
}

/* ===================================================================
   OBJECT: PLASMA ORB - dark glass sphere with an electric core
   =================================================================== */
.oracle--orb .oracle__body {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    0 0 46px 4px var(--window-glow),
    inset 0 -22px 44px rgba(0, 0, 0, 0.6),
    inset 0 14px 30px rgba(255, 255, 255, 0.08);
}

/* Electric core glowing inside the orb. */
.oracle--orb .oracle__body::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: 64%;
  height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--deco1) 0%, var(--window-glow) 40%, rgba(0, 0, 0, 0) 72%);
  opacity: 0.55;
  filter: blur(3px);
}

/* ===================================================================
   OBJECT: SNOW GLOBE - a glass dome on a wooden base
   =================================================================== */
.oracle--snowglobe .oracle__body {
  height: 88%;
  inset: 0 0 auto 0;
  background: radial-gradient(circle at 38% 30%,
    #ffffff 0%, var(--body) 56%, var(--body-edge) 100%);
  box-shadow:
    0 16px 34px rgba(40, 70, 100, 0.35),
    inset 0 -18px 40px rgba(60, 90, 120, 0.4),
    inset 0 12px 26px rgba(255, 255, 255, 0.7);
}

.oracle--snowglobe .oracle__base {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 66%;
  height: 22%;
  transform: translateX(-50%);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--deco1) 0%, var(--deco2) 100%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.oracle--snowglobe .oracle__window {
  top: 50%;
  width: 52%;
  height: 52%;
}

/* A few drifting snow specks inside the globe. */
.oracle--snowglobe .oracle__window::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 26%;
  width: 5%;
  height: 5%;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    calc(var(--oracle-size) * 0.10) calc(var(--oracle-size) * 0.04) 0 -1px rgba(255, 255, 255, 0.85),
    calc(var(--oracle-size) * 0.16) calc(var(--oracle-size) * 0.13) 0 0 rgba(255, 255, 255, 0.65),
    calc(var(--oracle-size) * 0.03) calc(var(--oracle-size) * 0.15) 0 -1px rgba(255, 255, 255, 0.7);
  opacity: 0.8;
}

/* ===================================================================
   OBJECT: JACK-O'-LANTERN - a carved pumpkin
   =================================================================== */
.oracle--pumpkin .oracle__body {
  top: 8%;
  height: 84%;
  border-radius: 48% / 44%;
  background: radial-gradient(circle at 38% 30%,
    var(--body-highlight) 0%, var(--body) 52%, var(--body-edge) 100%);
}

/* Vertical pumpkin ridges. */
.oracle--pumpkin .oracle__body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0 14%,
    rgba(0, 0, 0, 0.12) 16% 18%,
    rgba(0, 0, 0, 0) 20% 33%);
}

.oracle--pumpkin .oracle__stem {
  display: block;
  position: absolute;
  left: 50%;
  top: 1%;
  width: 11%;
  height: 14%;
  transform: translateX(-50%) rotate(-8deg);
  border-radius: 40% 40% 30% 30%;
  background: linear-gradient(180deg, #6f9a3e 0%, var(--deco1) 100%);
  z-index: 3;
}

.oracle--pumpkin .oracle__eye {
  display: block;
  position: absolute;
  top: 40%;
  width: 15%;
  height: 13%;
  background: var(--deco2);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 0 12px 2px var(--window-glow);
  z-index: 3;
}

.oracle--pumpkin .oracle__eye--l { left: 26%; }
.oracle--pumpkin .oracle__eye--r { right: 26%; }

.oracle--pumpkin .oracle__window {
  top: 65%;
  width: 62%;
  height: 44%;
}

/* ===================================================================
   OBJECT: PICKLE - a chunky warty pickle
   =================================================================== */
.oracle--pickle .oracle__body {
  left: 16%;
  width: 68%;
  inset-block: 1% 1%;
  height: auto;
  border-radius: 50% / 20%;
  background: radial-gradient(circle at 38% 22%,
    var(--body-highlight) 0%, var(--body) 50%, var(--body-edge) 100%);
}

/* Warty bumps: raised light spots and a couple of darker dimples. */
.oracle--pickle .oracle__body::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 18%, var(--body-highlight) 0 5%, rgba(0, 0, 0, 0) 6%),
    radial-gradient(circle at 70% 30%, var(--body-highlight) 0 4.5%, rgba(0, 0, 0, 0) 5.5%),
    radial-gradient(circle at 26% 46%, var(--body-highlight) 0 4.5%, rgba(0, 0, 0, 0) 5.5%),
    radial-gradient(circle at 74% 58%, var(--body-highlight) 0 4%, rgba(0, 0, 0, 0) 5%),
    radial-gradient(circle at 34% 74%, var(--body-highlight) 0 4.5%, rgba(0, 0, 0, 0) 5.5%),
    radial-gradient(circle at 64% 84%, var(--body-highlight) 0 4%, rgba(0, 0, 0, 0) 5%),
    radial-gradient(circle at 52% 12%, var(--body-edge) 0 3.5%, rgba(0, 0, 0, 0) 4.5%),
    radial-gradient(circle at 46% 62%, var(--body-edge) 0 3.5%, rgba(0, 0, 0, 0) 4.5%);
  opacity: 0.7;
}

.oracle--pickle .oracle__stem {
  display: block;
  position: absolute;
  left: 50%;
  top: -2%;
  width: 13%;
  height: 13%;
  transform: translateX(-50%);
  border-radius: 46% 46% 38% 38%;
  background: linear-gradient(180deg, var(--body-highlight) 0%, var(--deco1) 100%);
  z-index: 3;
}

.oracle--pickle .oracle__window {
  top: 50%;
  width: 46%;
  height: 58%;
}

/* ===================================================================
   OBJECT: SNEAKER - a chunky side-profile sneaker
   =================================================================== */
.oracle--sneaker .oracle__body {
  inset: 13% 4% 21% 4%;
  height: auto;
  border-radius: 46% 42% 24% 28% / 66% 62% 30% 32%;
  background: linear-gradient(158deg,
    var(--body-highlight) 0%, var(--body) 48%, var(--body-edge) 100%);
  box-shadow: inset 0 -12px 22px rgba(0, 0, 0, 0.28);
}

/* Lace stripes near the top of the upper. */
.oracle--sneaker .oracle__body::before {
  content: "";
  position: absolute;
  left: 27%;
  top: 13%;
  width: 42%;
  height: 30%;
  border-radius: 0;
  filter: none;
  background: repeating-linear-gradient(180deg,
    var(--deco1) 0 16%, rgba(0, 0, 0, 0) 16% 40%);
}

/* A darker toe cap at the front. */
.oracle--sneaker .oracle__body::after {
  content: "";
  position: absolute;
  right: 1%;
  bottom: -3%;
  width: 44%;
  height: 48%;
  border-radius: 52% 58% 46% 50%;
  background: var(--body-edge);
  opacity: 0.4;
}

/* The white sole. */
.oracle--sneaker .oracle__base {
  display: block;
  position: absolute;
  left: 1%;
  bottom: 7%;
  width: 98%;
  height: 20%;
  border-radius: 30% 46% 44% 34% / 56% 78% 72% 56%;
  background: linear-gradient(180deg, var(--deco1) 0%, #d2d6da 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.26);
  z-index: 0;
}

.oracle--sneaker .oracle__window {
  left: 50%;
  top: 47%;
  width: 46%;
  height: 38%;
}

/* ===== Shake: the whole object jitters, then settles ===== */
@keyframes oracle-shake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  8%   { transform: translate(-7px, 3px) rotate(-5deg); }
  17%  { transform: translate(8px, -4px) rotate(6deg); }
  26%  { transform: translate(-9px, 2px) rotate(-7deg); }
  35%  { transform: translate(8px, -3px) rotate(6deg); }
  44%  { transform: translate(-7px, 3px) rotate(-5deg); }
  53%  { transform: translate(6px, -2px) rotate(4deg); }
  62%  { transform: translate(-5px, 2px) rotate(-3deg); }
  71%  { transform: translate(4px, -1px) rotate(3deg); }
  80%  { transform: translate(-3px, 1px) rotate(-2deg); }
  89%  { transform: translate(2px, -1px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.oracle.is-shaking {
  animation: oracle-shake 0.72s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ===== Ask button ===== */
.ask-btn {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.95rem 2.4rem;
  min-height: 52px;
  min-width: 220px;
  color: var(--accent-text);
  background: var(--accent);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: background 0.15s, transform 0.08s, opacity 0.15s;
}

.ask-btn:hover:not(:disabled) { background: var(--accent-hover); }
.ask-btn:active:not(:disabled) { transform: scale(0.96); }
.ask-btn:disabled { opacity: 0.55; cursor: default; }

/* ===== Object switcher ===== */
.object-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.object-picker-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--page-muted);
}

.object-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.object-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  min-height: 28px;
  font-family: 'Arimo', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface);
  color: var(--page-muted);
  border: 1.5px solid var(--surface-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.object-pill:hover { border-color: var(--accent); }

.object-pill[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.suggest-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Arimo', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 4px;
}

.suggest-link:hover { opacity: 0.8; }

/* ===== "About" SEO accordion ===== */
.about {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  overflow: hidden;
}

.about-toggle {
  width: 100%;
  padding: 0.85rem 1.1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: 'Arimo', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--page-text);
}

.about-chevron {
  font-size: 0.7rem;
  color: var(--page-muted);
  transition: transform 0.2s ease;
}

.about.is-open .about-chevron { transform: rotate(180deg); }

.about-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1.1rem;
}

.about.is-open .about-content { max-height: 520px; padding: 0 1.1rem 1.1rem; }

.about-content p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--page-muted);
  margin-bottom: 0.7rem;
}

.about-content p:last-child { margin-bottom: 0; }

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.875rem;
  border-top: 1px solid var(--surface-border);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.footer-links a:hover { text-decoration: underline; }

/* ===== Mobile tweaks ===== */
@media (max-width: 480px) {
  .game-h1 { font-size: 1.6rem; }
  .tagline { font-size: 0.9rem; }
  .ask-btn { font-size: 1.05rem; min-width: 200px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .oracle.is-shaking { animation: none; }
  .oracle__riser,
  .oracle.is-revealed .oracle__riser {
    transform: translate(-50%, 0);
    transition: opacity 0.2s ease;
  }
  .oracle.is-revealed .oracle__answer { transition: opacity 0.2s ease; }
  body, .oracle__body, .oracle__window, .question-input { transition: none; }
}