:root{
  --bg0:#05060a;
  --bg1:#070a12;
  --text:#e9edf7;
  --muted:rgba(233,237,247,.72);
  --glass:rgba(14,18,30,.56);
  --stroke:rgba(255,255,255,.10);
  --glow:#57d6ff;
  --glow2:#b55bff;
  --gold:#ffe17a;
  --crawl:#ffd64a;
  --red:#ff2a2a;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --r: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1000px 700px at 20% 15%, rgba(87,214,255,.10), transparent 55%),
              radial-gradient(900px 600px at 80% 10%, rgba(181,91,255,.10), transparent 55%),
              radial-gradient(900px 700px at 40% 90%, rgba(255,225,122,.06), transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
}

.bg{position:fixed; inset:0; z-index:-1}
.stars{position:absolute; inset:0; width:100%; height:100%}
.nebula{
  position:absolute; inset:-20%;
  background:
    radial-gradient(60% 40% at 20% 35%, rgba(87,214,255,.12), transparent 60%),
    radial-gradient(55% 35% at 75% 25%, rgba(181,91,255,.12), transparent 62%),
    radial-gradient(60% 45% at 55% 78%, rgba(255,225,122,.08), transparent 62%);
  filter: blur(18px) saturate(1.05);
  opacity:.95;
}
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(140% 110% at 50% 40%, transparent 54%, rgba(0,0,0,.55) 92%);
  pointer-events:none;
}

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:
    max(22px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  max-width: 520px;
  margin: 0 auto;
}

.hero{
  padding-top: 6px;
  text-align:center;
}
.kicker{
  margin: 10px 0 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(87,214,255,.88);
}
.title{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: clamp(30px, 6.4vw, 42px);
  line-height: 1.05;
  text-shadow: 0 0 14px rgba(87,214,255,.10), 0 0 36px rgba(181,91,255,.10);
}
.subtitle{
  margin: 0 auto;
  max-width: 40ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.card{
  background: linear-gradient(180deg, rgba(14,18,30,.60), rgba(10,12,20,.46));
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wishes h2{
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,225,122,.92);
}

.crawlViewport{
  --y: 0;
  --z: 0;
  height: min(46vh, 340px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(255,214,74,.05), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.22));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
  position: relative;
  /* Keep text visible nearly to edges; just a subtle fade. */
  mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
}
.crawlViewport::-webkit-scrollbar{display:none}

.scroller{
  font-weight: 900;
  font-size: 170%;
  text-align: justify;
  height: 100%;
  width: min(100%, 20em);
  position: sticky;
  top: 0;
  margin: 0 auto;
  transform: perspective(350px) rotateX(40deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  /* Don't clip here; only the outer crawlViewport should clip. */
  overflow: visible;
}
.crawlSpacer{height: 1200px}
.crawl{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform:
    translateY(calc(var(--y) * 1px))
    translateZ(calc(var(--z) * 1px));
  will-change: transform;
  padding-bottom: 30vh;
}

.crawl, .crawl p{
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
}
.crawl p{
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.35;
  color: rgba(255,214,74,.94);
  text-shadow: 0 0 16px rgba(255,214,74,.10);
  font-size: 18px;
}
.crawlLead{
  text-align: center;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 40px !important;
  opacity: .92;
}
.crawlTitle{
  text-align: center;
  font-size: 22px !important;
  letter-spacing: .06em;
  margin-bottom: 18px !important;
}
.crawlEnd{
  text-align: center;
  font-size: 20px !important;
  margin-top: 18px !important;
}

.hint{
  margin: 10px 0 0;
  color: rgba(233,237,247,.58);
  font-size: 12px;
}

.cta{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  text-align:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 14px;
  border-radius: 18px;
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(233,237,247,.92);
  background: linear-gradient(180deg, rgba(18,20,28,.70), rgba(12,14,20,.48));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 58px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:active{transform: translateY(1px) scale(.99)}
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.10),
    0 0 0 8px rgba(87,214,255,.18),
    0 18px 58px rgba(0,0,0,.55);
}

.saber{
  position: relative;
  justify-content: flex-start;
  overflow: hidden;
  padding-left: 12px;
  padding-right: 18px;
  border-radius: 20px;
  border-color: rgba(255,255,255,.16);
}
.saberLabel{
  flex: 1;
  text-align: center;
  padding: 0 6px;
  font-weight: 900;
  position: relative;
  z-index: 3;
}
.saberHilt{
  width: 56px;
  height: 20px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.06)),
    linear-gradient(90deg, rgba(30,33,44,1), rgba(15,16,22,1));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.25),
    0 10px 22px rgba(0,0,0,.35);
  position: relative;
  z-index: 3;
}
.saberHilt::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 3px;
  width: 10px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255,225,122,.35);
  box-shadow: 0 0 0 1px rgba(255,225,122,.18);
}
.saberHilt::after{
  content:"";
  position:absolute;
  right: 8px;
  top: 2px;
  width: 10px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,.10);
}
.saberBlade{
  position:absolute;
  left: 66px;
  right: 14px;
  height: 10px;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  border-radius: 999px;
  background: rgba(0,0,0,0);
  opacity: 0;
  z-index: 1;
  transition: transform .18s ease, opacity .18s ease;
}
.saberBlade::before,
.saberBlade::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
}
.saberBlade::before{
  background:
    radial-gradient(120% 180% at 18% 50%, rgba(255,255,255,.85), rgba(255,255,255,.10) 32%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, rgba(255,110,110,.35), rgba(255,42,42,1) 42%, rgba(255,42,42,1));
  filter:
    blur(0.8px)
    saturate(1.35)
    drop-shadow(0 0 10px rgba(255,42,42,.40))
    drop-shadow(0 0 26px rgba(255,42,42,.22));
  opacity: .95;
}
.saberBlade::after{
  inset: -9px -10px;
  background: radial-gradient(70% 140% at 35% 50%, rgba(255,42,42,.55), rgba(255,42,42,0) 70%);
  filter: blur(8px);
  opacity: .9;
}
.saber:hover .saberBlade,
.saber.ignite .saberBlade,
.saber:focus-visible .saberBlade{
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
  animation: saberFlicker 1.35s infinite linear;
}
.saber:hover,
.saber.ignite,
.saber:focus-visible{
  border-color: rgba(255,42,42,.30);
  box-shadow:
    0 18px 58px rgba(0,0,0,.55),
    0 0 0 8px rgba(255,42,42,.08);
}

@keyframes saberFlicker{
  0%{filter: none}
  12%{filter: brightness(1.02)}
  24%{filter: brightness(0.98)}
  41%{filter: brightness(1.05)}
  56%{filter: brightness(1.00)}
  71%{filter: brightness(1.06)}
  100%{filter: none}
}

.small{
  margin: 0;
  color: rgba(233,237,247,.62);
  font-size: 12px;
  line-height: 1.45;
}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.footer{
  margin-top:auto;
  padding: 4px 0 2px;
  text-align:center;
  color: rgba(233,237,247,.56);
  font-size: 12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.spark{
  width: 8px; height:8px;
  border-radius: 999px;
  background: rgba(255,225,122,.95);
  box-shadow: 0 0 12px rgba(255,225,122,.55), 0 0 26px rgba(87,214,255,.25);
}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .saberBlade{transition:none}
  .crawl{will-change: auto}
}