:root {
  color-scheme: dark;
  --bg: #06020c;
  --bg-2: #14081f;
  --card: rgba(20, 11, 32, 0.52);
  --card-border: rgba(255, 215, 130, 0.28);
  --text: #f8f2e8;
  --muted: #d7c7b7;
  --accent: #bd7bff;
  --accent-2: #7c4dff;
  --gold-1: #fff1c2;
  --gold-2: #ffd979;
  --gold-3: #b67a18;
  --success: #66ffd1;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }
body { min-height: 100vh; }
.screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  background:
    linear-gradient(180deg, rgba(4, 3, 8, 0.16), rgba(4, 3, 8, 0.72)),
    linear-gradient(180deg, rgba(12, 5, 18, 0.68), rgba(5, 2, 10, 0.84)),
    url('/background.jpg') center center / cover no-repeat,
    radial-gradient(circle at 50% 20%, rgba(152, 86, 255, 0.18), transparent 32%),
    radial-gradient(circle at 15% 25%, rgba(99, 74, 255, 0.22), transparent 25%),
    radial-gradient(circle at 80% 15%, rgba(255, 99, 220, 0.18), transparent 24%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 0%, rgba(5, 2, 10, 0.12) 52%, rgba(4, 2, 8, 0.64) 100%);
  pointer-events: none;
}
.bg-glow {
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.22;
  pointer-events: none;
}
.bg-glow-a { left: -10vw; bottom: -12vw; background: #7127ff; }
.bg-glow-b { right: -8vw; top: -10vw; background: #d5a23a; }
.stars,
.stars::before,
.stars::after {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.75) 0 1.3px, transparent 1.7px),
    radial-gradient(circle at 80% 65%, rgba(255,255,255,.55) 0 1px, transparent 1.4px),
    radial-gradient(circle at 15% 70%, rgba(255,255,255,.65) 0 1px, transparent 1.4px);
  background-size: 360px 360px;
  content: '';
  opacity: 0.5;
  pointer-events: none;
}
.stars::before { transform: scale(1.25); opacity: 0.35; }
.stars::after { transform: scale(1.6); opacity: 0.18; }
.hud {
  position: absolute;
  top: 32px;
  left: 40px;
  right: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 2;
}
.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--muted);
}
h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(11, 8, 24, 0.55);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  font-size: 14px;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffb84d;
  box-shadow: 0 0 16px currentColor;
}
.status[data-connected='true'] .status-dot { background: var(--success); }
.stack {
  position: relative;
  width: min(1000px, 76vw);
  min-height: 760px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 2;
  perspective: 2200px;
  perspective-origin: center 14%;
  margin-top: 72px;
}
.card {
  --stack-index: 0;
  --stack-y: 0px;
  --stack-z: 0px;
  --stack-scale: 1;
  --stack-rotate: 0deg;
  --stack-opacity: 1;
  --stack-blur: 0px;
  position: absolute;
  width: min(1000px, 76vw);
  padding: 30px 34px;
  border-radius: 34px;
  border: 1px solid var(--card-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255,255,255,0.015)),
    linear-gradient(180deg, rgba(55, 28, 84, 0.46), var(--card));
  box-shadow:
    0 30px 120px rgba(2, 1, 8, 0.58),
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 1px rgba(255, 215, 130, 0.08);
  backdrop-filter: blur(24px) saturate(135%);
  transform-origin: center top;
  transform:
    translate3d(0, var(--stack-y), var(--stack-z))
    scale(var(--stack-scale))
    rotateX(var(--stack-rotate));
  opacity: var(--stack-opacity);
  filter: blur(var(--stack-blur));
  z-index: calc(100 - var(--stack-index));
  transition: transform .85s cubic-bezier(.22, 1, .2, 1), opacity .85s ease, filter .85s ease;
  animation: arrive .8s cubic-bezier(.21, 1, .2, 1);
}
.card.instant { animation-duration: 0.01s; }
.card.leaving {
  animation: leave .45s ease forwards;
}
.card.deep-exit {
  opacity: 0 !important;
  filter: blur(18px) !important;
  transform: translate3d(0, 220px, -760px) scale(0.44) rotateX(26deg) !important;
  pointer-events: none;
}
.card-badge {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 233, 182, 0.18), rgba(161, 108, 16, 0.12));
  color: #ffe8b0;
  border: 1px solid rgba(255, 220, 143, 0.18);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.card-message {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: clamp(28px, 3.4vw, 58px);
  line-height: 1.06;
  font-weight: 700;
  text-wrap: balance;
}
.line {
  display: block;
}
.line-top {
  font-size: clamp(38px, 4vw, 72px);
  letter-spacing: -0.03em;
}
.line-bottom {
  font-size: clamp(20px, 1.65vw, 30px);
  color: rgba(247, 242, 232, 0.94);
}
.card-compact .line-top {
  font-size: clamp(32px, 3.2vw, 56px);
  line-height: 1.02;
}
.card-compact .line-bottom {
  font-size: clamp(18px, 1.45vw, 26px);
}
.card-ultra-compact .line-top {
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.02;
}
.card-ultra-compact .line-bottom {
  font-size: clamp(16px, 1.2vw, 22px);
}
.gold {
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 42%, #f1b951 63%, var(--gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(255, 210, 110, 0.16);
}
.gold-soft {
  filter: drop-shadow(0 0 10px rgba(255, 213, 125, 0.12));
}
.card-meta {
  margin-top: 22px;
  color: rgba(236, 225, 212, 0.82);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 120px, 220px) scale(0.86) rotateX(-10deg);
    filter: blur(12px);
  }
  to {
    opacity: var(--stack-opacity);
    filter: blur(var(--stack-blur));
    transform:
      translate3d(0, var(--stack-y), var(--stack-z))
      scale(var(--stack-scale))
      rotateX(var(--stack-rotate));
  }
}

@keyframes leave {
  from {
    opacity: 1;
    filter: blur(calc(var(--stack-index) * 0.9px));
  }
  to {
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 140px, -420px) scale(0.7) rotateX(18deg);
  }
}

@media (max-width: 900px) {
  .hud {
    left: 22px;
    right: 22px;
    top: 22px;
  }

  .stack,
  .card {
    width: min(94vw, 760px);
  }

  .card {
    padding: 24px;
  }

  .status {
    display: none;
  }
}