:root{
  --bg:#07041a;
  --bg2:#120a35;
  --ink:#e8e6ff;
  --dim:#a79fe0;
  --blue:#3fd0ff;
  --violet:#8a5cff;
  --pink:#c86bff;
  --ok:#3ff08a;
  --bad:#ff4d6d;
  --glow:0 0 24px rgba(138,92,255,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100%;
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% -10%, #241560 0%, transparent 60%),
    radial-gradient(900px 600px at 10% 110%, #0d2a63 0%, transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 60%,#05030f 100%);
  overflow-x:hidden;
}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.grid{
  position:absolute;inset:-40% -20% -10% -20%;
  background-image:
    linear-gradient(rgba(120,90,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,90,255,.16) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(500px) rotateX(62deg);
  transform-origin:50% 100%;
  mask-image:linear-gradient(180deg,transparent 0%,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%,transparent 100%);
  animation:drift 14s linear infinite;
  opacity:.7;
}
@keyframes drift{from{background-position:0 0,0 0}to{background-position:0 64px,64px 0}}

.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:float 18s ease-in-out infinite}
.orb-a{width:46vmax;height:46vmax;left:-14vmax;top:-16vmax;background:radial-gradient(circle,#6a2cff,transparent 65%)}
.orb-b{width:38vmax;height:38vmax;right:-12vmax;top:6vmax;background:radial-gradient(circle,#12a8ff,transparent 65%);animation-delay:-6s}
.orb-c{width:42vmax;height:42vmax;left:22vmax;bottom:-22vmax;background:radial-gradient(circle,#c045ff,transparent 65%);animation-delay:-11s}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(3vmax,-3vmax,0)}}

.scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* ---------- layout ---------- */
.gate{
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;
  padding:8vh 20px 90px;
  text-align:center;
}

/* ---------- headline ---------- */
.welcome{
  margin:0 0 12vh;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.05;
  text-transform:none;
}
.welcome .line1,.welcome .line2{display:block}
.line1{
  font-size:clamp(44px,10vw,120px);
  background:linear-gradient(92deg,#8fe6ff,#b79bff 45%,#f09bff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(140,100,255,.35);
  animation:pulse 5s ease-in-out infinite;
}
.line2{
  margin-top:.15em;
  font-size:clamp(22px,4.6vw,54px);
  font-weight:600;
  color:#cfc6ff;
  text-shadow:var(--glow);
}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.dots{display:inline-block;animation:blink 1.6s steps(4,end) infinite;width:1.2em;text-align:left;overflow:hidden;vertical-align:bottom}
@keyframes blink{0%{width:0}100%{width:1.2em}}

/* ---------- entry ---------- */
.entry{margin:0 auto;max-width:720px}
.prompt{
  margin:0 0 22px;
  font-size:clamp(14px,2.1vw,20px);
  color:var(--dim);
  letter-spacing:.06em;
}

.pinrow{display:flex;align-items:center;justify-content:center;gap:16px}

.pinbox{
  display:flex;gap:18px;align-items:flex-end;
  padding:20px 26px;
  border:1px solid rgba(140,110,255,.45);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(30,18,80,.72),rgba(12,8,40,.72));
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 10px 40px rgba(80,40,200,.35),var(--glow);
  backdrop-filter:blur(6px);
}
.pinbox.shake{animation:shake .45s}
@keyframes shake{
  10%,90%{transform:translateX(-3px)}30%,70%{transform:translateX(6px)}50%{transform:translateX(-8px)}
}
.pinbox.bad{border-color:rgba(255,77,109,.8);box-shadow:0 0 30px rgba(255,77,109,.45)}
.pinbox.good{border-color:rgba(63,240,138,.8);box-shadow:0 0 34px rgba(63,240,138,.5)}
.pinbox.checking{border-color:rgba(63,208,255,.8);animation:checking 1s linear infinite}
@keyframes checking{0%,100%{box-shadow:0 0 18px rgba(63,208,255,.35)}50%{box-shadow:0 0 38px rgba(138,92,255,.7)}}

.slot{position:relative;display:flex;flex-direction:column;align-items:center;width:clamp(38px,7vw,58px)}
.slot .digit{
  font-style:normal;font-weight:800;
  font-size:clamp(28px,5.4vw,44px);
  line-height:1.1;height:1.1em;
  color:#fff;text-shadow:0 0 18px rgba(120,200,255,.9);
}
.slot .rule{display:block;width:100%;height:4px;border-radius:3px;background:rgba(180,160,255,.45)}
.slot.active .rule{background:linear-gradient(90deg,var(--blue),var(--pink));box-shadow:0 0 14px var(--violet);animation:caret 1.1s ease-in-out infinite}
@keyframes caret{0%,100%{opacity:.35}50%{opacity:1}}
.slot.filled .rule{background:linear-gradient(90deg,#5ee7ff,#9b7bff)}
.slot.pop .digit{animation:landing .32s cubic-bezier(.2,1.6,.4,1)}
@keyframes landing{from{transform:scale(2.1);opacity:0}to{transform:scale(1);opacity:1}}

.submit{
  display:grid;place-items:center;
  width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(63,240,138,.7);
  background:radial-gradient(circle at 35% 30%,rgba(63,240,138,.35),rgba(10,40,25,.85));
  color:var(--ok);cursor:pointer;
  box-shadow:0 0 22px rgba(63,240,138,.35);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
}
.submit svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.submit:hover{transform:scale(1.07);box-shadow:0 0 34px rgba(63,240,138,.6)}
.submit:active{transform:scale(.95)}
.submit[disabled]{opacity:.35;cursor:not-allowed;filter:grayscale(.5)}

.error{
  min-height:1.6em;margin:18px 0 0;
  color:var(--bad);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:clamp(13px,1.8vw,17px);
  opacity:0;transition:opacity .2s ease;
  text-shadow:0 0 16px rgba(255,77,109,.6);
}
.error.show{opacity:1;animation:shake .45s}

.clear{
  margin-top:10px;padding:6px 16px;
  background:none;border:1px solid rgba(160,140,255,.35);border-radius:20px;
  color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.clear:hover{color:#fff;border-color:var(--violet)}

/* ---------- bubbles ---------- */
.pool{margin-top:8vh}
.bubbles{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.8vw,22px);
  max-width:960px;margin:0 auto;
}
.bubble{
  position:relative;
  width:clamp(48px,7.4vw,72px);height:clamp(48px,7.4vw,72px);
  border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;
  color:#fff;
  font-weight:800;
  font-size:clamp(17px,2.6vw,26px);
  letter-spacing:-.02em;
  text-shadow:0 2px 6px rgba(0,0,0,.45),0 0 12px rgba(160,220,255,.75);
  background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.85),rgba(255,255,255,.12) 34%,transparent 46%),
    radial-gradient(circle at 70% 78%,rgba(200,110,255,.55),transparent 55%),
    radial-gradient(circle at 50% 50%,rgba(63,208,255,.32),rgba(90,50,200,.28));
  box-shadow:
    0 0 0 1px rgba(190,220,255,.45) inset,
    0 0 18px rgba(120,90,255,.5),
    0 8px 22px rgba(0,0,0,.35);
  animation:bob 6s ease-in-out infinite;
  transition:transform .18s ease,box-shadow .2s ease;
  will-change:transform;
}
.bubble:hover{transform:translateY(-6px) scale(1.09);box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,0 0 30px rgba(160,120,255,.85),0 10px 26px rgba(0,0,0,.4)}
.bubble:active{transform:scale(.94)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.bubble.popped{animation:pop .34s forwards;pointer-events:none}
@keyframes pop{
  0%{transform:scale(1);opacity:1;filter:blur(0)}
  45%{transform:scale(1.45);opacity:.75;filter:blur(1px)}
  100%{transform:scale(1.9);opacity:0;filter:blur(4px)}
}
.bubble.used{visibility:hidden;pointer-events:none}

/* pop shards */
.shard{
  position:fixed;z-index:40;pointer-events:none;
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,rgba(160,220,255,.7));
  box-shadow:0 0 10px rgba(160,200,255,.9);
  animation:shard .55s ease-out forwards;
}
@keyframes shard{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* flying digit */
.flyer{position:fixed;inset:0;z-index:50;pointer-events:none}
.fly{
  position:fixed;
  font-weight:800;color:#fff;
  text-shadow:0 0 22px rgba(120,200,255,1),0 0 40px rgba(160,90,255,.9);
  transform:translate(-50%,-50%);
  transition:left .52s cubic-bezier(.55,-.25,.3,1.25),top .52s cubic-bezier(.55,-.25,.3,1.25),font-size .52s ease,opacity .5s ease;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}
@media (max-width:520px){
  .gate{padding-top:6vh}
  .welcome{margin-bottom:8vh}
  .pinrow{gap:10px}
  .submit{width:54px;height:54px}
}