:root{
  --bg:#0b0b0b;
  --accent:#7fe23a; /* goo/green */
  --muted:#dcdcdc;
  --card:#111;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg),#060606 60%);
  color:var(--muted);
  overflow:hidden;
}
.stripes{
  position:fixed;inset:0;z-index:0;
  background-image:repeating-linear-gradient(90deg,#000 0 28px,#fff 28px 56px);
  opacity:0.12;
  filter:grayscale(1) contrast(1.2);
  transform:skewY(-6deg);
  animation:slide 12s linear infinite;
}
@keyframes slide{from{background-position:0 0}to{background-position:1200px 0}}

.container{position:relative;z-index:2;padding:5vh 6vw;max-width:980px;margin:0 auto}
.hero{margin-bottom:1.5rem}
.title{
  font-size:clamp(40px,12vw,120px);
  margin:0;line-height:0.9;letter-spacing:0.02em;
  color:#fff;
  display:inline-block;
  text-transform:uppercase;
  text-shadow:0 6px 20px rgba(0,0,0,0.8),
              0 0 10px rgba(127,226,58,0.06);
  transition:transform .25s ease, text-shadow .25s ease;
}
.title:hover{transform:translateY(-6px) rotate(-1deg);text-shadow:0 12px 30px rgba(0,0,0,0.9),0 0 22px rgba(127,226,58,0.35)}
.subtitle{color:#bdbdbd;margin:.25rem 0 1rem}

.controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
input#name{padding:.6rem .8rem;border-radius:6px;border:1px solid rgba(255,255,255,0.08);background:#0c0c0c;color:var(--muted);min-width:180px}
.btn{padding:.6rem .9rem;border-radius:6px;border:0;background:linear-gradient(180deg,#222,#111);color:#fff;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,0.6)}
.btn.alt{background:transparent;border:1px solid rgba(255,255,255,0.06)}

.card{margin-top:1.8rem;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:1.2rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);backdrop-filter: blur(2px)}
.card h2{margin:.2rem 0 .6rem;color:#fff}

.slime{position:fixed;left:0;bottom:0;width:100%;height:30vh;pointer-events:none;z-index:1;background:radial-gradient(40% 40% at 20% 80%, rgba(127,226,58,0.14), transparent 20%),radial-gradient(30% 30% at 80% 70%, rgba(127,226,58,0.08), transparent 30%);filter:blur(18px);opacity:0.9}

/* summoned state */
body.summoned .slime{filter:blur(12px);opacity:1}
body.summoned .title{animation:shake 0.6s infinite alternate, glow 1.8s ease-in-out infinite}
@keyframes shake{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
@keyframes glow{0%{text-shadow:0 6px 30px rgba(0,0,0,0.9)}50%{text-shadow:0 12px 40px rgba(127,226,58,0.8)}100%{text-shadow:0 6px 30px rgba(0,0,0,0.9)}}

/* summoned overlay */
.summon-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10}
.summon-card{background:linear-gradient(180deg,rgba(0,0,0,0.75),rgba(0,0,0,0.9));padding:2rem 2.6rem;border-radius:14px;border:1px solid rgba(127,226,58,0.14);text-align:center;box-shadow:0 12px 40px rgba(0,0,0,0.7)}
.summon-card h3{color:var(--accent);font-size:2.2rem;margin:0 0 .4rem}
.summon-card p{color:#ddd;margin:0}

/* Ghosts */
.ghosts{position:fixed;left:0;top:6vh;width:100%;height:60vh;pointer-events:none;z-index:1;overflow:visible}
.ghost{mix-blend-mode:screen;opacity:0.9;filter:drop-shadow(0 8px 12px rgba(0,0,0,0.6));position:absolute}
.ghost.g1{left:4%;animation:float 6s ease-in-out infinite;transform-origin:center}
.ghost.g2{left:70%;top:8vh;animation:float 7s ease-in-out .6s infinite;transform-origin:center}
.ghost.g3{left:45%;top:2vh;animation:float 5.3s ease-in-out .9s infinite;transform-origin:center}

@keyframes float{0%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-28px) rotate(4deg)}100%{transform:translateY(0) rotate(-4deg)}}

/* Event banner */
.event-banner{margin-top:.6rem;background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);display:inline-flex;gap:.6rem;align-items:center;padding:.25rem .6rem;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.event-banner .movie-title{color:var(--accent);font-weight:700;margin-left:.4rem}
.event-banner .when{color:#ddd;margin-left:.2rem}
.event-banner .dot{color:#fff;opacity:.6;margin:0 .3rem}

/* Sandworm visuals */
.sandworm{position:fixed;left:-10%;bottom:-6%;width:120%;height:26vh;z-index:3;pointer-events:none}
.worm-ellipse{transform-origin:center;transition:opacity .4s ease,transform .8s ease}
.worm-mouth{transition:opacity .3s ease,stroke-width .3s ease}

/* summoned worm entrance */
body.summoned .worm-ellipse{opacity:1;animation:wormRise 1s ease forwards}
body.summoned .worm-mouth{opacity:1;animation:mouthOpen 1s 0.6s ease forwards}

@keyframes wormRise{0%{transform:translateY(50px) scale(0.7)}60%{transform:translateY(-6px) scale(1.03)}100%{transform:translateY(0) scale(1)}}
@keyframes mouthOpen{0%{stroke-width:0}100%{stroke-width:6}}

/* responsive tweaks */
@media (max-width:560px){
  .ghost.g1{left:2%;width:90px}
  .ghost.g2{left:72%}
  .ghost.g3{left:50%}
  .sandworm{height:34vh}
}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media (max-width:560px){
  .controls{gap:.4rem}
  .title{font-size:56px}
}