/* Gemfall — the app's visual language, ready to paste.
   Values lifted from Gemfall/UI/Components.swift and Gemfall/Scene/Art.swift. */

:root {
  /* Ground */
  --ink:       #0B0A1D;
  --ink-deep:  #160C2B;
  --violet:    #351A5F;

  /* Accents */
  --gold:      #FFD65C;
  --mint:      #7AE6C8;
  --rose:      #FA678B;

  /* Support */
  --stone:     #6B7085;
  --ice:       #ADE6FF;

  /* Text is white at reduced opacity rather than grey — it keeps the accents
     readable against the violet and is what the game's HUD does. */
  --text:      rgba(255, 255, 255, 1);
  --text-body: rgba(255, 255, 255, 0.72);
  --text-mute: rgba(255, 255, 255, 0.45);

  --radius:    24px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-body);
  font-family: Nunito, Quicksand, "Varela Round", -apple-system, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.6;
}

/* The backdrop: a vertical ink→violet gradient with three big blurred blooms over it.
   The blur is what makes it read as light rather than as three coloured circles. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
              var(--ink) 0%, var(--ink-deep) 45%, rgba(53, 26, 95, 0.55) 100%);
  overflow: hidden;
}
.backdrop::before,
.backdrop::after,
.backdrop > .bloom {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.backdrop::before { width: 420px; height: 420px; background: rgba(250, 103, 139, 0.30); top: 8%;  left: -6%; }
.backdrop::after  { width: 380px; height: 380px; background: rgba(122, 230, 200, 0.22); top: 46%; right: -8%; }
.backdrop > .bloom{ width: 300px; height: 300px; background: rgba(255, 214, 92, 0.14);  bottom: 6%; left: 30%; }

h1, h2, h3 {
  color: var(--text);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Small caps labels — the HUD's "SCORE" / "BEST" treatment. */
.label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Every surface in the app is this: a barely-there white fill over a blur, with a
   border that fades from lit at the top to nothing at the bottom. */
.panel {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius);
  border: 1px solid transparent;
  border-image: linear-gradient(to bottom,
                rgba(255,255,255,0.28), rgba(255,255,255,0.06)) 1;
  padding: 1.5rem;
}
/* border-image squares the corners off; use this instead when radius matters. */
.panel-rounded {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 1.5rem;
}

.button {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border-radius: 20px;
  background: linear-gradient(to bottom, var(--gold), rgba(255, 214, 92, 0.72));
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(255, 214, 92, 0.45);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.button:active { transform: scale(0.96); }

.button-quiet {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border-radius: 20px;
  border: 1.5px solid rgba(255, 214, 92, 0.55);
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
}

a { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}