:root{
  --bg:#040a18;--text:#f7f9ff;--muted:#9cabc4;--blue:#168cff;--purple:#8d4bff;
  --orange:#ff9c19;--green:#38db79;--card-bg:rgba(9,20,42,.62);--card-border:rgba(80,130,200,.28)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 70% 18%,rgba(0,123,255,.18),transparent 26%),
    radial-gradient(circle at 25% 70%,rgba(125,62,255,.12),transparent 28%),
    linear-gradient(180deg,#030817 0%,#061020 58%,#040a18 100%);
}
.scene{position:relative;min-height:100%;display:grid;place-items:center;padding:24px 24px 80px;isolation:isolate;overflow:hidden}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,black 20%,black 78%,transparent);opacity:.45;z-index:-4}
.orb{position:absolute;width:560px;height:180px;border-radius:50%;bottom:9%;left:50%;transform:translateX(-50%);border:1px solid rgba(0,177,255,.22);background:radial-gradient(ellipse,rgba(0,198,255,.24),rgba(0,91,255,.10) 32%,transparent 68%);box-shadow:0 0 60px rgba(0,119,255,.20),inset 0 0 32px rgba(0,189,255,.12);z-index:-2;animation:orbpulse 6s ease-in-out infinite}
@keyframes orbpulse{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.03)}}

.stars{position:absolute;inset:0;z-index:-3;pointer-events:none}
.stars i{position:absolute;width:2px;height:2px;background:#bcd6ff;border-radius:50%;opacity:.5;animation:twinkle 3.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}

/* Floating background accents (original) */
.float{position:absolute;width:30px;height:30px;border-radius:6px;border:1px solid rgba(93,139,255,.5);background:rgba(31,71,170,.12);box-shadow:0 0 22px rgba(53,104,255,.20);transform:rotate(28deg);animation:drift 7s ease-in-out infinite;z-index:-1}
.f1{left:11%;top:17%}.f2{right:12%;top:20%;width:52px;height:52px;animation-delay:-2s}.f3{right:18%;bottom:22%;width:24px;height:24px;animation-delay:-4s}.f4{left:19%;bottom:26%;width:38px;height:38px;animation-delay:-1s}
@keyframes drift{0%,100%{transform:translateY(0) rotate(28deg)}50%{transform:translateY(-15px) rotate(36deg)}}

/* Voxel world scattered behind the card, using real in-game block renders */
.voxel-world{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.vx{position:absolute;filter:drop-shadow(0 16px 22px rgba(0,0,10,.5))}
.vx.cube{width:64px;height:auto;animation:cubebob 7s ease-in-out infinite}
.vx.cube img{display:block;width:100%;height:auto;animation-name:cubespin;animation-timing-function:linear;animation-iteration-count:infinite}
.c1{left:6%;top:36%;width:58px;animation-delay:-1s}
.c2{right:9%;top:10%;width:46px;animation-delay:-3.2s}
.c3{right:6%;bottom:30%;width:82px;animation-delay:-2.1s}
.c4{left:15%;bottom:12%;width:40px;animation-delay:-4.6s}
.c5{left:42%;top:6%;width:34px;animation-delay:-0.4s;opacity:.9}
.c6{right:27%;bottom:8%;width:36px;animation-delay:-5.4s;opacity:.85}
.c7{left:26%;top:64%;width:30px;animation-delay:-2.8s;opacity:.75}
/* Each cube spins at its own random speed, direction and phase so none of them stay in sync. */
.c1 img{animation-duration:12s;animation-direction:normal;animation-delay:-3s}
.c2 img{animation-duration:27s;animation-direction:reverse;animation-delay:-9s}
.c3 img{animation-duration:9s;animation-direction:normal;animation-delay:-1s}
.c4 img{animation-duration:34s;animation-direction:reverse;animation-delay:-20s}
.c5 img{animation-duration:15s;animation-direction:normal;animation-delay:-6s}
.c6 img{animation-duration:21s;animation-direction:reverse;animation-delay:-4s}
.c7 img{animation-duration:18s;animation-direction:normal;animation-delay:-11s}
@keyframes cubebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes cubespin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.vx.player{height:280px;width:auto;animation:playerbob 8s ease-in-out infinite}
.player-left{left:3%;bottom:0;animation-delay:-1.2s}
.player-right{right:3%;bottom:0;animation-delay:-4.4s}
@keyframes playerbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Occasional shooting stars streaking across the whole sky, roughly every 5s combined */
.shooting-stars{position:absolute;inset:0;overflow:hidden}
.shooting-star{position:absolute;width:2px;height:110px;border-radius:2px;opacity:0;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#eaf4ff 65%,rgba(255,255,255,0));
  filter:drop-shadow(0 0 5px #bcd6ff);
  transform:rotate(var(--ang)) translateY(0);
  animation:shoot 15s linear infinite}
.ss1{top:4%;left:80%;--ang:-58deg;animation-delay:0s}
.ss2{top:38%;left:12%;--ang:62deg;animation-delay:-5s}
.ss3{top:62%;left:55%;--ang:-50deg;animation-delay:-10s}
@keyframes shoot{
  0%{opacity:0;transform:rotate(var(--ang)) translateY(0)}
  1%{opacity:1}
  9%{opacity:0;transform:rotate(var(--ang)) translateY(65vh)}
  100%{opacity:0;transform:rotate(var(--ang)) translateY(65vh)}
}

@media(max-width:1300px){
  .vx.player{height:220px}
}
@media(max-width:950px){
  .vx.player{display:none}
}
@media(max-width:700px){
  .vx.cube{width:38px!important}
}

@media(prefers-reduced-motion:reduce){
  .float,.orb,.vx,.vx.cube img,.stars i,.shooting-star{animation:none!important}
}

.card{width:min(760px,100%);text-align:center;padding:34px 24px;position:relative;z-index:1}
.brand{display:inline-flex;align-items:center;justify-content:center;margin-bottom:22px}.brand-logo{display:block;width:360px;height:auto;object-fit:contain;filter:drop-shadow(0 8px 28px rgba(20,90,220,.4));transform:translate(-16px,24px)}
.eyebrow{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;margin-bottom:18px;border:1px solid rgba(94,160,255,.5);border-radius:999px;background:rgba(9,24,46,.66);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:900;overflow:hidden;animation:eyebrowglow 2.6s ease-in-out infinite}
.eyebrow-text{background:linear-gradient(90deg,#8ecaff,#c9b3ff,#8ee3ff,#8ecaff);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:eyebrowshine 4s linear infinite}
@keyframes eyebrowshine{to{background-position:-300% 0}}
@keyframes eyebrowglow{0%,100%{box-shadow:0 0 0 rgba(56,150,255,0);border-color:rgba(94,160,255,.5)}50%{box-shadow:0 0 16px rgba(56,150,255,.4);border-color:rgba(140,190,255,.85)}}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(56,219,121,.55);animation:dotpulse 1.8s ease-in-out infinite}
@keyframes dotpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
h1{margin:0;font-size:clamp(3rem,7.4vw,6.2rem);line-height:.9;letter-spacing:-.07em}
h1 .accent{display:block;background:linear-gradient(180deg,#8ee3ff,#168cff 50%,#7b50ff);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:100% 200%;animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0 0}50%{background-position:0 40%}}
.sub{margin:20px auto 0;max-width:560px;color:#b2bfd3;font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.6}
.hint{margin-top:28px;display:inline-flex;align-items:center;gap:12px;color:#9fb2cc;font-size:1rem;font-weight:600}
.spark{width:30px;height:1px;background:linear-gradient(90deg,transparent,#2c9cff)}
footer{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#5e708b;font-size:.68rem;letter-spacing:.04em}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Signup card */
.signup-card{
  position:relative;margin:34px auto 0;max-width:520px;padding:2px;border-radius:22px;
  background:linear-gradient(135deg,rgba(46,140,255,.55),rgba(141,75,255,.4),rgba(46,140,255,.15));
  animation:fadeUp .8s ease .1s both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.signup-glow{position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(0,180,255,0),rgba(0,180,255,.5),rgba(150,80,255,.5),rgba(0,180,255,0) 60%);animation:spin 6s linear infinite;opacity:.35;filter:blur(20px);z-index:0;border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
.signup-body,.signup-success{position:relative;z-index:1;background:var(--card-bg);backdrop-filter:blur(14px);border-radius:20px;padding:30px 28px 26px;border:1px solid var(--card-border)}
.signup-title{margin:0 0 8px;font-size:1.4rem;font-weight:900;letter-spacing:-.02em}
.signup-copy{margin:0 auto;max-width:400px;color:var(--muted);font-size:.92rem;line-height:1.55}
.signup-copy.nickname-note{margin-top:10px;color:#8ecaff}

#signup-form{margin-top:20px}
.field-single{background:rgba(3,10,24,.6);border:1px solid rgba(80,130,200,.35);border-radius:14px;padding:2px;transition:border-color .2s,box-shadow .2s}
.field-single:focus-within{border-color:rgba(56,150,255,.75);box-shadow:0 0 0 4px rgba(22,140,255,.15)}
.field-single input{width:100%;background:transparent;border:0;outline:0;color:var(--text);font-size:.95rem;padding:11px 12px;font-family:inherit}
.field-single input::placeholder{color:#5f7392}
.nickname-hint{margin:8px 2px 14px;color:#5e7092;font-size:.72rem;text-align:left}

.input-row{display:flex;gap:8px;background:rgba(3,10,24,.6);border:1px solid rgba(80,130,200,.35);border-radius:14px;padding:6px;transition:border-color .2s,box-shadow .2s}
.input-row:focus-within{border-color:rgba(56,150,255,.75);box-shadow:0 0 0 4px rgba(22,140,255,.15)}
.input-row input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font-size:.95rem;padding:11px 12px;font-family:inherit}
.input-row input::placeholder{color:#5f7392}
.input-row button{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:0;border-radius:10px;
  padding:0 18px;font-weight:800;font-size:.9rem;color:#04101f;cursor:pointer;
  background:linear-gradient(135deg,#3fc0ff,#168cff);box-shadow:0 8px 18px rgba(22,140,255,.35);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.input-row button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(22,140,255,.45)}
.input-row button:active{transform:translateY(0) scale(.98)}
.input-row button svg{transition:transform .2s ease}
.input-row button:hover svg{transform:translateX(3px)}
.input-row button:disabled{opacity:.6;cursor:default;transform:none;filter:grayscale(.2)}

.input-error{margin:10px 2px 0;color:#ff8b8b;font-size:.78rem;text-align:left;height:0;overflow:hidden;opacity:0;transition:opacity .2s ease}
.input-error.show{height:auto;opacity:1;margin-top:10px}
.input-row.error{border-color:rgba(255,90,90,.6);animation:shake .35s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.signup-fineprint{margin:14px 0 0;color:#5e7092;font-size:.72rem}

.signup-success{animation:popIn .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.success-check{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  color:#041a10;background:linear-gradient(135deg,#7cf5ab,var(--green));
  box-shadow:0 0 0 6px rgba(56,219,121,.14),0 10px 26px rgba(56,219,121,.35);
}
#check-path{stroke-dasharray:26;stroke-dashoffset:26;animation:draw .5s ease .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.link-btn{margin-top:16px;background:none;border:0;color:#8ecaff;font-size:.82rem;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:#bfe1ff}

@media(max-width:700px){
  .scene{padding:18px 14px 90px}
  .card{padding:20px 4px}
  .brand{margin-bottom:24px}
  .brand-logo{width:260px;transform:translate(-8px,16px)}
  .orb{width:380px}
  .f2{right:5%}.f1{left:4%}
  .signup-body,.signup-success{padding:24px 18px 22px}
  .input-row{flex-direction:column}
  .input-row button{justify-content:center;padding:11px}
  .vx.tower,.vx.cube{transform-origin:center}
}