:root {
  --ink: #eaf0ff;
  --muted: #8f9bb7;
  --night: #070812;
  --panel: rgba(12, 14, 28, .88);
  --line: #303754;
  --purple: #9e5cff;
  --purple-2: #c084ff;
  --cyan: #78efff;
  --danger: #ff667a;
  --ok: #67f2b6;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--night);
  font-family: 'Rajdhani', system-ui, sans-serif;
  image-rendering: pixelated;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.025) 0 1px,
    transparent 1px 4px
  );
  mix-blend-mode: overlay;
}

.sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 22%, rgba(95,63,173,.22), transparent 23%),
    linear-gradient(#090a18 0%, #10142d 55%, #1b1730 100%);
}

.moon {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  right: 12%;
  top: 9%;
  background: #d9e4ff;
  box-shadow:
    0 0 55px rgba(193,208,255,.26),
    inset -26px -18px 0 rgba(112,117,157,.18);
  opacity: .82;
  animation: moonFloat 7s ease-in-out infinite;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  box-shadow: 0 0 8px white;
  animation: blink 2s infinite steps(2);
}

.cloud {
  position: absolute;
  width: 180px;
  height: 26px;
  background: rgba(132,142,184,.08);
  box-shadow:
    34px -14px 0 rgba(132,142,184,.08),
    72px 0 0 rgba(132,142,184,.08);
  filter: blur(1px);
}

.c1 { top: 23%; left: -220px; animation: drift 28s linear infinite; }
.c2 {
  top: 40%;
  left: -300px;
  transform: scale(.7);
  animation: drift 38s linear infinite 4s;
}

.mountains {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 42%;
  clip-path: polygon(
    0 100%,0 58%,9% 36%,16% 66%,26% 25%,39% 70%,
    53% 31%,63% 62%,76% 18%,86% 63%,100% 43%,100% 100%
  );
}
.m1 { background: #17172a; opacity: .85; }
.m2 {
  bottom: -6%;
  height: 33%;
  background: #0c0d17;
  opacity: .95;
  transform: scaleX(1.12);
}

.scene {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(430px, 1.2fr) minmax(360px, .8fr);
  align-items: center;
  gap: 4vw;
  max-width: 1380px;
  padding: 48px 6vw;
  margin: auto;
}

.hero-panel {
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.brand-wrap { max-width: 600px; position: relative; z-index: 3; }

.eyebrow {
  margin: 0 0 18px;
  font: 10px/1.8 'Press Start 2P';
  letter-spacing: 2px;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(120,239,255,.5);
}

h1 {
  margin: 0;
  font: 68px/1.06 'Press Start 2P';
  letter-spacing: -5px;
  color: #f5f5ff;
  text-shadow:
    5px 5px 0 #25243e,
    0 0 22px rgba(164,102,255,.2);
}

h1 span {
  color: var(--purple-2);
  text-shadow:
    5px 5px 0 #3b265b,
    0 0 26px rgba(192,132,255,.45);
}

.hero-copy {
  max-width: 550px;
  color: #b1bad0;
  font-size: 20px;
  line-height: 1.55;
  margin: 26px 0 0;
}

.pixel-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--cyan);
  box-shadow:
    8px 0 0 var(--cyan),
    -8px 0 0 var(--cyan),
    0 8px 0 var(--cyan),
    0 -8px 0 var(--cyan);
  animation: blink 1.4s infinite steps(2);
}
.s1 { right: 8%; top: -15px; }
.s2 {
  left: -20px;
  bottom: 10px;
  transform: scale(.6);
  animation-delay: .6s;
}

.character-stage {
  position: absolute;
  width: 420px;
  height: 410px;
  right: -25px;
  bottom: 10px;
}

.glow-ring {
  position: absolute;
  left: 60px;
  top: 50px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px solid rgba(165,100,255,.15);
  box-shadow:
    0 0 60px rgba(148,80,255,.14) inset,
    0 0 45px rgba(148,80,255,.12);
  animation: pulse 3s ease-in-out infinite;
}

.character {
  position: absolute;
  left: 148px;
  top: 76px;
  width: 145px;
  height: 250px;
  animation: bob 2.1s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.5));
}

.head {
  position: absolute;
  left: 45px;
  top: 36px;
  width: 58px;
  height: 66px;
  background: #f0c7b4;
  clip-path: polygon(8% 0,92% 0,100% 85%,68% 100%,31% 100%,0 84%);
}

.hair { position: absolute; background: #23223a; z-index: 4; }

.hair-back {
  left: 35px;
  top: 18px;
  width: 80px;
  height: 92px;
  clip-path: polygon(
    14% 0,90% 6%,100% 55%,83% 100%,75% 55%,62% 71%,
    49% 48%,30% 78%,20% 54%,5% 65%,0 22%
  );
}

.hair-front {
  left: 36px;
  top: 18px;
  width: 75px;
  height: 43px;
  clip-path: polygon(
    0 15%,28% 0,38% 25%,55% 3%,62% 27%,92% 13%,
    74% 66%,60% 48%,50% 87%,37% 49%,22% 74%
  );
}

.eye {
  position: absolute;
  top: 34px;
  width: 8px;
  height: 5px;
  background: #6956ff;
  box-shadow: 0 0 8px #7a68ff;
}
.eye.left { left: 13px; }
.eye.right { right: 13px; }

.neck {
  position: absolute;
  left: 64px;
  top: 96px;
  width: 23px;
  height: 23px;
  background: #d6a68f;
}

.body {
  position: absolute;
  left: 39px;
  top: 112px;
  width: 74px;
  height: 105px;
  background: linear-gradient(90deg,#302b50,#1e2035);
  clip-path: polygon(16% 0,84% 0,100% 100%,0 100%);
}

.coat {
  position: absolute;
  top: 112px;
  width: 37px;
  height: 125px;
  background: #4d2b6a;
}
.coat-left {
  left: 28px;
  clip-path: polygon(27% 0,100% 10%,73% 100%,0 88%);
}
.coat-right {
  right: 22px;
  clip-path: polygon(0 10%,73% 0,100% 88%,25% 100%);
}

.arm {
  position: absolute;
  top: 125px;
  width: 22px;
  height: 93px;
  background: #2e2b48;
}
.arm-left { left: 16px; transform: rotate(12deg); }
.arm-right { right: 8px; transform: rotate(-14deg); }

.sword {
  position: absolute;
  width: 10px;
  height: 145px;
  background: #cad7ff;
  right: -12px;
  top: 86px;
  transform: rotate(28deg);
  box-shadow: 0 0 10px rgba(146,218,255,.5);
}

.floor-shadow {
  position: absolute;
  left: 95px;
  bottom: 55px;
  width: 245px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  filter: blur(8px);
  animation: shadowPulse 2.1s ease-in-out infinite;
}

.auth-card-wrap { display: flex; justify-content: center; }

.auth-card {
  position: relative;
  width: min(100%, 500px);
  padding: 34px;
  background: linear-gradient(180deg, rgba(22,24,45,.96), rgba(12,14,27,.96));
  border: 1px solid #3c4261;
  box-shadow:
    0 26px 70px rgba(0,0,0,.46),
    inset 0 0 0 4px rgba(255,255,255,.012);
  clip-path: polygon(
    12px 0,calc(100% - 12px) 0,100% 12px,
    100% calc(100% - 12px),calc(100% - 12px) 100%,
    12px 100%,0 calc(100% - 12px),0 12px
  );
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(153,113,255,.14);
  pointer-events: none;
}

.card-deco {
  position: absolute;
  width: 25px;
  height: 4px;
  background: var(--purple);
  top: 0;
}
.top-left { left: 25px; }
.top-right { right: 25px; }

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  background: #090b16;
  border: 1px solid #2a2f49;
  margin-bottom: 28px;
}

.tab {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #69728e;
  font: 9px 'Press Start 2P';
  cursor: pointer;
  transition: .2s;
}

.tab.active {
  color: white;
  background: #24243d;
  box-shadow: inset 0 -3px 0 var(--purple);
}

.card-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
}

.mini-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: rgba(158,92,255,.14);
  border: 1px solid rgba(158,92,255,.45);
  color: var(--purple-2);
  font-size: 22px;
}

.card-heading p {
  margin: 0 0 4px;
  color: var(--purple-2);
  font: 8px 'Press Start 2P';
  letter-spacing: 1px;
}

.card-heading h2 { margin: 0; font-size: 27px; }

.field { display: block; margin: 18px 0; }
.field > span {
  display: block;
  margin-bottom: 8px;
  color: #a9b0c4;
  font: 8px 'Press Start 2P';
  letter-spacing: .6px;
}

.field small {
  display: block;
  margin-top: 7px;
  color: #68718a;
  font-size: 13px;
}

.input-shell {
  display: flex;
  align-items: center;
  background: #090b16;
  border: 1px solid #313750;
  transition: .2s;
}

.input-shell:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(158,92,255,.09);
}

.field-icon {
  width: 44px;
  text-align: center;
  color: #727e9b;
}

.input-shell input {
  flex: 1;
  min-width: 0;
  height: 50px;
  border: 0;
  outline: 0;
  background: transparent;
  color: white;
  font: 600 18px 'Rajdhani';
  padding: 0 12px;
}

.input-shell input::placeholder { color: #49516b; }

.eye-btn {
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  color: #7d86a2;
  cursor: pointer;
  font-size: 18px;
}

.message {
  min-height: 20px;
  margin: 8px 0 12px;
  font-weight: 700;
  font-size: 15px;
}
.message.error { color: var(--danger); }
.message.success { color: var(--ok); }

.primary-btn {
  width: 100%;
  height: 58px;
  border: 0;
  color: white;
  background: linear-gradient(90deg,#7136c8,#9a4fe5);
  font: 10px 'Press Start 2P';
  letter-spacing: .5px;
  cursor: pointer;
  box-shadow:
    0 6px 0 #462478,
    0 0 28px rgba(142,73,223,.2);
  transition: transform .12s, filter .12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.primary-btn:hover { filter: brightness(1.13); transform: translateY(-2px); }
.primary-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #462478; }

.arrow { animation: nudge 1s ease-in-out infinite; }

.save-note {
  text-align: center;
  margin-top: 22px;
  color: #6f7892;
  font-size: 13px;
}
.save-note span { color: var(--ok); font-size: 10px; margin-right: 5px; }

.hidden { display: none !important; }

@keyframes blink { 50% { opacity: .25; } }
@keyframes drift { to { left: 115%; } }
@keyframes moonFloat { 50% { transform: translateY(10px); } }
@keyframes pulse { 50% { transform: scale(1.05); opacity: .55; } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes shadowPulse { 50% { transform: scaleX(.9); opacity: .7; } }
@keyframes nudge { 50% { transform: translateX(5px); } }

@media (max-width: 980px) {
  .scene { grid-template-columns: 1fr; gap: 0; padding: 34px 20px; }
  .hero-panel { min-height: 470px; justify-content: flex-start; padding-top: 50px; }
  .character-stage {
    right: 0;
    bottom: -20px;
    transform: scale(.78);
    transform-origin: bottom right;
  }
  h1 { font-size: 48px; }
  .hero-copy { max-width: 62%; }
  .auth-card-wrap { padding-bottom: 50px; }
}

@media (max-width: 620px) {
  .scene { padding: 22px 14px; }
  .hero-panel { min-height: 410px; }
  .brand-wrap { z-index: 5; }
  h1 { font-size: 34px; letter-spacing: -3px; }
  .eyebrow { font-size: 7px; }
  .hero-copy { font-size: 16px; max-width: 78%; }
  .character-stage { right: -85px; bottom: -10px; transform: scale(.63); }
  .auth-card { padding: 25px 20px; }
  .tab { font-size: 7px; }
  .moon { width: 100px; height: 100px; }
  .card-heading h2 { font-size: 23px; }
}