/* ═══════════════════════════════════════════════════════════════════════
   ONYX CIRCUIT — Onyx·Realms skin over HexGL's multi.css (loaded AFTER it).
   Palette: obsidian #0a0710 / violet #7c3aed / cyan #3aa6f0 / gold #f3c969.
   Grade deliberately LIFTED (owner 2026-08-09: the dark pass read too dark) —
   lavender text, glowing accents, no murk. Cosmetic only.
   ═══════════════════════════════════════════════════════════════════════ */

html, body { background: #0a0710; }

#global {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124,58,237,.28), rgba(10,7,16,0) 55%),
    radial-gradient(90% 70% at 50% 100%, rgba(58,166,240,.16), rgba(10,7,16,0) 60%),
    linear-gradient(180deg, #16102a 0%, #0a0710 100%);
}

/* Title: CSS text replaces the stock HexGL title.png */
#title { background-image: none; display: flex; flex-direction: column; align-items: center; padding-top: 7vh; }
#title .onyx-t1 {
  font-size: clamp(3.2em, 12vw, 7em);
  letter-spacing: .12em;
  color: #f3c969;
  text-shadow: 0 0 18px rgba(243,201,105,.45), 0 0 60px rgba(124,58,237,.55);
  line-height: .95;
}
#title .onyx-t2 {
  font-size: clamp(1.1em, 4vw, 2em);
  letter-spacing: .55em;
  text-indent: .55em;
  color: #b9a8e8;
  text-shadow: 0 0 14px rgba(124,58,237,.7);
}
#title .onyx-t3 {
  margin-top: 1.2em;
  font-size: .95em;
  letter-spacing: .2em;
  color: #8c7ab2;
}
#title .onyx-t3 b { color: #7fe9f5; font-weight: normal; }

/* Menu: lavender resting, gold hover, violet light-strips */
#menu { color: #b9a8e8; }
#menu div {
  text-shadow: 0 0 12px rgba(124,58,237,.85);
  background: linear-gradient(to right, rgba(124,58,237,0) 0%, rgba(124,58,237,.38) 40%, rgba(124,58,237,.38) 60%, rgba(124,58,237,0) 100%);
}
#menu div:hover { color: #f3c969; }
#start { color: #f3c969; text-shadow: 0 0 16px rgba(243,201,105,.6), 0 0 40px rgba(124,58,237,.8); }
#start:hover { color: #ffe9b0 !important; }

/* Interstitials + loader + results: obsidian, violet→cyan progress */
#step-2, #step-3, #step-5 { background-color: #0a0710; color: #ece4ff; }
#step-3 #progressbar {
  background: linear-gradient(90deg, #7c3aed, #3aa6f0 60%, #f3c969);
  box-shadow: 0 0 24px rgba(124,58,237,.8);
}
#step-5 #time { color: #f3c969; text-shadow: 0 0 18px rgba(243,201,105,.5); }

#credits { color: #ece4ff; }
#credits h3 { color: #f3c969; }

/* Reduced motion: kill the floating title/backdrop loops */
@media (prefers-reduced-motion: reduce) {
  #global, #title, #menu div { animation: none !important; transition: none !important; }
}

/* 380px portrait */
@media (max-width: 480px) {
  #menu { font-size: 1.5em; }
  #step-2, #step-5 { font-size: 1.4em; }
  #step-5 #time { font-size: 3em; }
}