:root{
  --tappy-bg:#070014;
  --tappy-card:#13093a;
  --tappy-card-2:#090422;
  --tappy-cyan:#22f7ff;
  --tappy-pink:#ff21d6;
  --tappy-purple:#9b52ff;
  --tappy-violet:#2f287d;
  --tappy-text:#f4f2ff;
  --tappy-muted:#9ca4d8;
  --tappy-line:rgba(34,247,255,.72);
  --tappy-font:"Orbitron","Rajdhani","Share Tech Mono","Courier New",monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;margin:0;padding:0;overflow-x:hidden;background:var(--tappy-bg);}
body.tappy-auth-body{font-family:var(--tappy-font);color:var(--tappy-text);background:#050010;}

.tappy-auth-wrap{min-height:100svh;width:100%;}
.tappy-auth-screen{
  position:relative;
  min-height:100svh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:24px 14px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 18% 0%, rgba(255,33,214,.35), transparent 29%),
    radial-gradient(circle at 84% 8%, rgba(34,247,255,.22), transparent 27%),
    linear-gradient(180deg, rgba(11,0,38,.92), rgba(7,0,20,.94) 48%, rgba(28,13,75,.98)),
    url('../img/tappy-cyber-bg.svg') center/cover no-repeat;
}
.tappy-auth-screen:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  mix-blend-mode:screen;
  opacity:.42;
}
.tappy-auth-screen:after{
  content:"";
  position:absolute;
  inset:auto -20% 0;
  height:34%;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(82,35,206,.48));
  filter:blur(2px);
}

.tappy-phone-safe{position:relative;z-index:2;width:100%;max-width:390px;margin:auto;}
.tappy-auth-card{
  position:relative;
  width:100%;
  border-radius:20px;
  padding:28px 22px 26px;
  background:
    linear-gradient(180deg, rgba(25,12,68,.94), rgba(10,5,36,.98)),
    radial-gradient(circle at 50% 0%, rgba(34,247,255,.16), transparent 55%);
  border:2px solid var(--tappy-line);
  box-shadow:
    0 0 0 1px rgba(34,247,255,.17) inset,
    0 0 25px rgba(34,247,255,.62),
    0 0 58px rgba(155,82,255,.36),
    0 28px 90px rgba(0,0,0,.72);
  overflow:hidden;
  isolation:isolate;
}
.tappy-auth-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, transparent, rgba(255,33,214,.07), transparent),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
}
.tappy-auth-card:after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-2;
  border-radius:20px;
  background:linear-gradient(135deg, var(--tappy-cyan), transparent 28%, var(--tappy-pink) 56%, var(--tappy-cyan));
  opacity:.22;
  filter:blur(18px);
}

.tappy-brand{text-align:center;margin:0 auto 17px;position:relative;}

.tappy-logo-stage{
  position:relative;
  width:104px;
  height:104px;
  margin:0 auto 4px;
  display:grid;
  place-items:center;
  isolation:isolate;
  filter:drop-shadow(0 0 16px rgba(34,247,255,.52)) drop-shadow(0 0 24px rgba(255,33,214,.28));
  transform-style:preserve-3d;
  animation:tappyMascotFloat 2.7s ease-in-out infinite;
}
.tappy-logo-stage:before{
  content:"";
  position:absolute;
  inset:12px;
  z-index:-3;
  border-radius:50%;
  background:radial-gradient(circle, rgba(34,247,255,.18), rgba(255,33,214,.11) 45%, transparent 70%);
  filter:blur(10px);
  animation:tappyAuraPulse 1.8s ease-in-out infinite;
}
.tappy-logo-stage:after{
  content:"";
  position:absolute;
  inset:6px;
  z-index:-2;
  border-radius:46% 54% 49% 51%;
  border:1px solid rgba(34,247,255,.26);
  box-shadow:0 0 18px rgba(34,247,255,.18), inset 0 0 18px rgba(255,33,214,.08);
  transform:rotate(-8deg);
  animation:tappyOrbitTilt 3.6s linear infinite;
}
.tappy-mascot-logo{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  transform:translateZ(18px);
}
.tappy-logo-aura{
  position:absolute;
  z-index:-4;
  width:72px;
  height:72px;
  border-radius:50%;
  opacity:.65;
  filter:blur(18px);
}
.tappy-logo-aura-cyan{background:#22f7ff;left:7px;top:12px;animation:tappyAuraMove 3.2s ease-in-out infinite;}
.tappy-logo-aura-pink{background:#ff21d6;right:5px;bottom:8px;animation:tappyAuraMove 3.2s ease-in-out infinite reverse;}
.tappy-logo-scan{
  position:absolute;
  z-index:4;
  left:19%;
  top:13%;
  width:62%;
  height:74%;
  border-radius:40%;
  overflow:hidden;
  pointer-events:none;
  opacity:.68;
  mix-blend-mode:screen;
}
.tappy-logo-scan:before{
  content:"";
  position:absolute;
  inset:-35% -30%;
  background:linear-gradient(100deg, transparent 34%, rgba(255,255,255,.44) 46%, transparent 58%);
  transform:translateX(-130%) rotate(9deg);
  animation:tappyLogoShine 2.9s ease-in-out infinite;
}
.tappy-logo-spark{
  position:absolute;
  z-index:3;
  width:6px;
  height:6px;
  border-radius:2px;
  background:#22f7ff;
  box-shadow:0 0 10px currentColor;
  animation:tappySparkPop 1.6s ease-in-out infinite;
}
.tappy-logo-spark.spark-1{left:11px;top:28px;color:#22f7ff;animation-delay:.05s;}
.tappy-logo-spark.spark-2{right:10px;top:38px;color:#ff21d6;animation-delay:.42s;}
.tappy-logo-spark.spark-3{left:50%;bottom:4px;color:#ffc01e;animation-delay:.82s;}

.tappy-logo-text{
  position:relative;
  display:inline-block;
  font-size:31px;
  line-height:1;
  font-weight:1000;
  letter-spacing:2px;
  color:#fff;
  text-shadow:
    3px 0 0 var(--tappy-cyan),
    -3px 0 0 var(--tappy-pink),
    0 0 18px rgba(255,255,255,.45),
    0 0 35px rgba(34,247,255,.42);
  animation:tappyGlitch 3.2s infinite steps(1,end);
}
.tappy-logo-text:before,.tappy-logo-text:after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.76;
}
.tappy-logo-text:before{transform:translate(2px,-1px);color:var(--tappy-cyan);clip-path:inset(0 0 55% 0);}
.tappy-logo-text:after{transform:translate(-2px,1px);color:var(--tappy-pink);clip-path:inset(52% 0 0 0);}
.tappy-tagline{
  margin-top:10px;
  font-size:9.5px;
  letter-spacing:8px;
  text-indent:8px;
  font-weight:800;
  color:#9ffbff;
  text-shadow:0 0 12px rgba(34,247,255,.8);
}
.tappy-tagline span{color:#ff52df;text-shadow:0 0 10px rgba(255,33,214,.8)}

.tappy-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0 0 14px;
}
.tappy-tab{
  height:41px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  text-decoration:none;
  color:#fff;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.7px;
  background:#312873;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.25);
  transition:.18s ease;
}
.tappy-tab.active{
  color:#03061a;
  background:linear-gradient(135deg,#22f7ff 0%,#2ce9ff 55%,#9b52ff 100%);
  box-shadow:0 0 18px rgba(34,247,255,.5), 0 9px 24px rgba(0,0,0,.35);
}
.tappy-tab:not(.active):active{transform:scale(.98)}

.tappy-form{display:flex;flex-direction:column;gap:12px;}
.tappy-field{
  position:relative;
  height:49px;
  width:100%;
  display:flex;
  align-items:center;
  border-radius:8px;
  border:2px solid rgba(101,65,190,.66);
  background:rgba(10,5,35,.78);
  box-shadow:inset 0 0 18px rgba(9,2,30,.82), 0 0 0 rgba(34,247,255,0);
  overflow:hidden;
  transition:.18s ease;
}
.tappy-field:focus-within{
  border-color:rgba(34,247,255,.92);
  box-shadow:0 0 16px rgba(34,247,255,.28), inset 0 0 18px rgba(9,2,30,.82);
}
.tappy-field input{
  width:100%;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#f8f4ff;
  padding:0 15px;
  font-family:var(--tappy-font);
  font-size:13px;
  font-weight:900;
  letter-spacing:.3px;
}
.tappy-field input::placeholder{color:#b6b0d7;opacity:.95;}
.tappy-field-password input{padding-right:48px;}
.tappy-eye{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--tappy-cyan);
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  text-shadow:0 0 12px rgba(34,247,255,.8);
}
.tappy-eye.is-on{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.86), 0 0 20px rgba(255,33,214,.7);}

.tappy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 2px;}
.tappy-remember{display:inline-flex;align-items:center;gap:7px;font-family:Arial,sans-serif;color:#c8cbdf;font-size:10px;}
.tappy-remember input{width:12px;height:12px;accent-color:var(--tappy-cyan);}
.tappy-mini-link,.tappy-card-footer a{
  color:#34f7ff;
  text-decoration:none;
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:800;
  text-shadow:0 0 9px rgba(34,247,255,.7);
}
.tappy-submit{
  width:100%;
  height:51px;
  margin-top:1px;
  border:0;
  border-radius:9px;
  color:#fff;
  cursor:pointer;
  font-family:var(--tappy-font);
  font-size:15px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  background:linear-gradient(100deg,#ff21d6 0%,#f22ed8 33%,#b24cff 72%,#8d5fff 100%);
  box-shadow:0 0 21px rgba(255,33,214,.46), 0 12px 25px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.28);
  transition:.18s ease;
}
.tappy-submit:active{transform:translateY(1px) scale(.99)}
.tappy-submit:disabled{opacity:.68;cursor:not-allowed;transform:none;}

.tappy-card-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin-top:16px;
  min-height:34px;
  text-align:center;
}
.tappy-card-footer strong{
  margin-top:2px;
  font-size:11px;
  letter-spacing:.4px;
  color:#a4a0db;
  text-shadow:0 0 10px rgba(155,82,255,.55);
}
.tappy-card-footer small{
  display:block;
  color:#bbb7d7;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:none;
}
.tappy-auth-card-register .tappy-card-footer{gap:2px;margin-top:15px;}
.tappy-auth-card-register .tappy-submit{margin-top:0;height:51px;}

.tappy-toast{
  position:fixed;
  z-index:999999;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(92vw,380px);
  padding:13px 14px;
  border-radius:12px;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  text-align:center;
  background:linear-gradient(135deg,#0f936a,#16c784);
  box-shadow:0 18px 45px rgba(0,0,0,.46), 0 0 18px rgba(34,247,255,.22);
}
.tappy-toast.err{background:linear-gradient(135deg,#b4236f,#d92c2c);}

.tappy-page-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#070014;
  color:#9ffbff;
  font-family:var(--tappy-font);
  font-size:11px;
  letter-spacing:2px;
  transition:opacity .22s ease;
}
.tappy-loader-ring{
  width:46px;
  height:46px;
  border-radius:50%;
  border:3px solid rgba(34,247,255,.16);
  border-top-color:var(--tappy-cyan);
  border-right-color:var(--tappy-pink);
  animation:tappySpin .75s linear infinite;
  box-shadow:0 0 20px rgba(34,247,255,.42);
}

@keyframes tappySpin{to{transform:rotate(360deg)}}

@keyframes tappyMascotFloat{
  0%,100%{transform:translateY(0) rotateX(0deg) rotateZ(-1deg) scale(1);}
  45%{transform:translateY(-7px) rotateX(8deg) rotateZ(2deg) scale(1.035);}
  72%{transform:translateY(2px) rotateX(-4deg) rotateZ(-1deg) scale(.992);}
}
@keyframes tappyAuraPulse{
  0%,100%{opacity:.62;transform:scale(.92);}
  50%{opacity:1;transform:scale(1.16);}
}
@keyframes tappyOrbitTilt{
  0%{transform:rotate(-8deg) scale(.96);opacity:.38;}
  50%{transform:rotate(12deg) scale(1.03);opacity:.78;}
  100%{transform:rotate(352deg) scale(.96);opacity:.38;}
}
@keyframes tappyAuraMove{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(9px,-6px) scale(1.12);}
}
@keyframes tappyLogoShine{
  0%,38%{transform:translateX(-145%) rotate(9deg);opacity:0;}
  52%{opacity:.65;}
  72%,100%{transform:translateX(145%) rotate(9deg);opacity:0;}
}
@keyframes tappySparkPop{
  0%,100%{opacity:.15;transform:scale(.45) rotate(0deg);}
  50%{opacity:1;transform:scale(1.25) rotate(45deg);}
}

@keyframes tappyGlitch{
  0%,88%,100%{transform:none;filter:none;}
  90%{transform:translate(1px,-1px);filter:hue-rotate(18deg);}
  92%{transform:translate(-2px,1px);filter:hue-rotate(-18deg);}
  94%{transform:translate(2px,0);}
}

@media (max-width:420px){
  .tappy-auth-screen{align-items:flex-start;padding:38px 20px 22px;}
  .tappy-phone-safe{max-width:344px;}
  .tappy-auth-card{padding:27px 20px 25px;border-radius:20px;}
  .tappy-logo-stage{width:96px;height:96px;margin-bottom:3px;}
  .tappy-logo-text{font-size:29px;}
  .tappy-tagline{font-size:9px;letter-spacing:7px;text-indent:7px;}
  .tappy-tab{height:40px;font-size:10.5px;}
  .tappy-field{height:48px;}
  .tappy-submit{height:50px;}
}

@media (max-width:360px){
  .tappy-auth-screen{padding-left:14px;padding-right:14px;}
  .tappy-auth-card{padding:24px 18px;}
  .tappy-logo-stage{width:88px;height:88px;}
  .tappy-logo-text{font-size:27px;}
  .tappy-tagline{letter-spacing:5px;text-indent:5px;}
}


@media (prefers-reduced-motion:reduce){
  .tappy-logo-stage,
  .tappy-logo-stage:before,
  .tappy-logo-stage:after,
  .tappy-logo-aura,
  .tappy-logo-scan:before,
  .tappy-logo-spark,
  .tappy-logo-text,
  .tappy-loader-ring{animation:none!important;}
}


/* Tappy global music button for login/register pages */
.tappy-auth-music{
  position:fixed;
  right:14px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:50;
  min-width:92px;
  height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(0,240,255,.35);
  background:linear-gradient(145deg,rgba(17,10,45,.88),rgba(5,8,26,.94));
  box-shadow:0 0 20px rgba(0,240,255,.14),inset 0 1px 0 rgba(255,255,255,.08);
  color:#00f0ff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-family:'Orbitron','Rajdhani','Share Tech Mono',system-ui,sans-serif;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tappy-auth-music .note{font-size:17px;line-height:1;filter:drop-shadow(0 0 8px rgba(0,240,255,.75))}
.tappy-auth-music.is-playing{
  color:#39ff14;
  border-color:rgba(57,255,20,.35);
  animation:tappyAuthMusicPulse 1.6s ease-in-out infinite;
}
@keyframes tappyAuthMusicPulse{
  0%,100%{transform:translateY(0);box-shadow:0 0 18px rgba(57,255,20,.18)}
  50%{transform:translateY(-2px);box-shadow:0 0 28px rgba(57,255,20,.30)}
}