/* Faux 3D enter screen: STARS ONLY */
:root{
  --bg0:#05060f; --bg1:#0a0c1a; --bg2:#1b2345;
  --accent:#ffe600; --panel:rgba(0,0,0,.28);
}
html,body{height:100%;margin:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Comic Sans MS', cursive;
  color:#e6f3ff; overflow:hidden;
  background: radial-gradient(1200px 800px at 30% 20%, var(--bg2) 0%, var(--bg1) 60%, var(--bg0) 100%);
}
.field{
  position:fixed; inset:0; pointer-events:none; overflow:hidden;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
  transform-style: preserve-3d;
}
.sprite{
  position:absolute; opacity:.95; will-change: transform, filter;
  animation: float var(--dur,12s) ease-in-out infinite alternate,
             spin var(--rot,14s) linear infinite;
  transform: translateZ(var(--z, 0px));
  image-rendering: auto;
}
.sprite.star{
  background: url('assets/star.gif') center/contain no-repeat;
  width: var(--w, 96px); height: var(--w, 96px);
}

@keyframes float{
  from{ transform: translate3d(var(--x0,0), var(--y0,0), var(--z,0)) rotateZ(0deg) }
  to  { transform: translate3d(var(--x1,0), var(--y1,0), var(--z,0)) rotateZ(0deg) }
}
@keyframes spin{ from{ filter: hue-rotate(0deg) } to{ filter: hue-rotate(360deg) } }

.center{
  position: fixed; inset: 0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  pointer-events:none;
}
.panel{
  background: var(--panel); backdrop-filter: blur(2px);
  border: 2px solid rgba(255,230,0,.5);
  border-radius: 18px; padding: 18px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  pointer-events:auto;
}
h1{ margin:0 0 8px; font-size: clamp(22px, 5vw, 42px);
    text-shadow: 0 0 12px rgba(255,230,0,.35); }
.subtitle{ margin-top:6px; opacity:.9 }
.enter-btn{
  display:inline-block; margin-top: 14px;
  font-size: clamp(18px, 3vw, 28px);
  padding: 14px 22px; border: 3px solid var(--accent);
  border-radius: 16px; color:#111;
  background: linear-gradient(180deg, var(--accent), #ffd180);
  text-decoration:none; font-weight:900;
  box-shadow: 0 8px 40px rgba(255,230,0,.45), inset 0 0 20px rgba(255,255,255,.6);
  transition: transform .12s ease;
}
.enter-btn:hover{ transform: translateY(-2px) scale(1.02) }

.credits{ position:fixed; bottom:12px; left:12px; font-size:12px; opacity:.7 }