/* style.css — layout: backdrop, canvas layers, screens, logo, loader. */
body { background: #080b1a; color: var(--ink); }

#bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(1000px 800px at 85% 20%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(1100px 900px at 50% 100%, rgba(255,93,179,.22), transparent 60%),
    linear-gradient(160deg, var(--bg-a), var(--bg-b) 40%, var(--bg-c));
  background-size: 200% 200%;
  animation: bgShift 24s ease-in-out infinite;
}
#fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#game { position: fixed; inset: 0; z-index: 2; display: block; }

/* screens */
.scr {
  position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 26px; text-align: center;
  opacity: 0; pointer-events: none; transform: translateY(14px) scale(.98);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, 1.2, .3, 1);
}
.scr.on { opacity: 1; pointer-events: auto; transform: none; }

.logo {
  font-size: clamp(40px, 11vw, 80px); font-weight: 900; letter-spacing: -2px; line-height: .9;
  background: linear-gradient(120deg, #a58bff, var(--accent-2) 55%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 40px rgba(124,92,255,.45));
}
.logo .sub { display: block; font-size: .22em; font-weight: 800; letter-spacing: 8px; color: var(--muted); -webkit-text-fill-color: var(--muted); margin-top: 8px; }
.tag { color: var(--muted); max-width: 340px; font-size: 14px; line-height: 1.6; margin: 16px 0 26px; }

#win .stars { font-size: 44px; letter-spacing: 6px; margin: 6px 0 4px; color: #ffd84d; }
#win .big { font-size: 30px; font-weight: 900; }

#loader { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: #080b1a; }
#loader .ring { width: 48px; height: 48px; border: 4px solid rgba(124,92,255,.25); border-top-color: var(--accent-2); border-radius: 50%; animation: spin 1s linear infinite; }

.hidden { display: none !important; }