/* ==========================================================
   rx-theme.css - RaXa Games liquid-glass theme for every game
   ----------------------------------------------------------
   THE RULE
   - Home page (index.html): the RaXa scene (mountain lake, sleeping pandas, glowing wires).
   - Every game: the RaXa night sky (#03050c with soft twinkling stars) + RaXa liquid glass
     for every panel and button, Google Sans Flex, white text and white glow, the white
     RaXa logo, and the same round glass Home button at the top left.
   - Colour comes from the game content (planets, animals, instruments), never from the
     panels or buttons: those always stay clear glass with white text.

   HOW TO USE
   - Link it:    <link rel="stylesheet" href="../assets/rx-theme.css">
   - or paste this whole file inside a <style> in the game's <head> (it needs no other file).
   - Add class="rx-sky" to <body> for the night sky, then use the classes below.
   ========================================================== */
:root {
  --rx-font: "Google Sans Flex", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --rx-bg: #03050c;                                   /* night sky */
  --rx-ink: #ffffff;                                  /* main text */
  --rx-soft: rgba(255,255,255,.72);                   /* second text */
  --glass-bg: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 65%, rgba(255,255,255,.04)), linear-gradient(rgba(8,10,16,.35), rgba(8,10,16,.35));
  --glass-filter: blur(6px) saturate(130%);
  --glass-border: rgba(255,255,255,.2);
  --glass-border-hi: rgba(255,255,255,.8);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 28px rgba(0,0,0,.3);
  --glow-rest: 0 0 16px rgba(255,255,255,.22);
  --glow-hover: 0 0 22px rgba(255,255,255,.35);
  --rx-radius: 22px;                                  /* panels */
  --rx-radius-btn: 18px;                              /* buttons */
  --rx-tap: 64px;                                     /* smallest touch target for little fingers */
  --rx-ok: #7dffb0;                                   /* correct-answer glow */
  --rx-oops: #ffb37d;                                 /* gentle "try again" glow (never red) */
}

/* ---------- page: night sky with soft twinkling stars (no picture needed) ---------- */
.rx-sky {
  margin: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden; isolation: isolate;   /* stars sit behind all content */
  color: var(--rx-ink); font-family: var(--rx-font);
  background:
    radial-gradient(ellipse at 50% 35%, rgba(40,60,110,.28) 0%, rgba(3,5,12,0) 60%),
    var(--rx-bg);
}
.rx-sky::before, .rx-sky::after {
  content: ""; position: fixed; inset: -50%; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 72%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 33%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 84%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 69% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 83% 61%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 92% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 91%, #fff 50%, transparent 51%);
  background-size: 50% 50%;
  opacity: .55; animation: rxTwinkle 7s ease-in-out infinite;
}
.rx-sky::after { background-size: 37% 41%; background-position: 13% 29%; opacity: .35; animation-delay: -3.5s; }
@keyframes rxTwinkle { 0%, 100% { opacity: .55; } 50% { opacity: .2; } }

/* ---------- liquid glass panel ---------- */
.rx-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); border-radius: var(--rx-radius);
  box-shadow: var(--glass-shadow); color: var(--rx-ink);
}

/* ---------- glass button (big, round-cornered, white text) ---------- */
.rx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: var(--rx-tap); min-height: var(--rx-tap); padding: 0 26px;
  font: 600 clamp(18px, 2.2vw, 24px)/1 var(--rx-font); color: var(--rx-ink); text-decoration: none;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); border-radius: var(--rx-radius-btn); box-shadow: var(--glass-shadow);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.rx-btn:hover, .rx-btn:focus-visible, .rx-btn.is-on { border-color: var(--glass-border-hi); box-shadow: var(--glow-hover); outline: none; }
.rx-btn:active { transform: scale(.95); }
.rx-btn svg { width: 1.3em; height: 1.3em; flex: none; }
/* round icon-only button */
.rx-btn--icon { width: var(--rx-tap); padding: 0; border-radius: 50%; }
/* small icon frame inside a card (same as the home cards) */
.rx-ico-frame {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 15px;
  border: 1px solid rgba(255,255,255,.45); box-shadow: var(--glow-rest);
}

/* ---------- Home button: same place and look in every game ---------- */
.rx-home {
  position: fixed; z-index: 40;
  top: calc(env(safe-area-inset-top, 0px) + 14px); left: calc(env(safe-area-inset-left, 0px) + 14px);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--rx-tap); height: var(--rx-tap); border-radius: 20px; color: #fff; text-decoration: none;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.rx-home:hover, .rx-home:focus-visible { border-color: var(--glass-border-hi); box-shadow: var(--glow-hover); outline: none; }
.rx-home:active { transform: scale(.94); }
.rx-home svg { width: 32px; height: 32px; }
/* house icon to paste inside .rx-home:
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></svg> */

/* ---------- text ---------- */
.rx-title { margin: 0; font: 700 clamp(30px, 5vw, 64px)/1.05 var(--rx-font); letter-spacing: -.02em; color: #fff;
  text-shadow: 0 0 18px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.8); }
.rx-sub { margin: 0; font: 400 clamp(16px, 2vw, 22px)/1.3 var(--rx-font); color: var(--rx-soft); }
.rx-logo-img { width: clamp(110px, 14vw, 170px); height: auto; filter: drop-shadow(0 0 14px rgba(255,255,255,.35)); }

/* ---------- feedback: correct = bright happy glow, try again = soft warm glow and a little wobble ---------- */
.rx-yay  { border-color: var(--rx-ok) !important; box-shadow: 0 0 26px rgba(125,255,176,.55) !important; animation: rxPop .45s ease; }
.rx-oops { border-color: var(--rx-oops) !important; box-shadow: 0 0 20px rgba(255,179,125,.45) !important; animation: rxWobble .45s ease; }
@keyframes rxPop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes rxWobble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px) rotate(-2deg); } 75% { transform: translateX(6px) rotate(2deg); } }

/* ---------- landscape-first sizing for phones held sideways ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --rx-tap: 54px; }
  .rx-home { border-radius: 17px; }
  .rx-title { font-size: clamp(24px, 7vh, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .rx-sky::before, .rx-sky::after, .rx-yay, .rx-oops { animation: none; }
  .rx-btn, .rx-home { transition: none; }
}