/* =============== Base =============== */
:root{
  --bg0:#05080c;
  --bg1:#0a111a;
  --panel: rgba(7, 13, 20, 0.68);
  --panel-border: rgba(160, 220, 255, 0.14);

  --text: #e7f2ff;
  --muted: rgba(231,242,255,0.72);

  --ice: #bfe7ff;
  --ice-strong:#e7fbff;

  --glow: rgba(120, 210, 255, 0.70);
  --glow-soft: rgba(120, 210, 255, 0.25);

  --danger: #ff8aa0;

  --radius: 18px;
  --shadow: 0 14px 55px rgba(0,0,0,0.55);
  --focus: 0 0 0 3px rgba(120,210,255,0.35);

  --maxw: 980px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 600px at 50% 25%, #0c1c2e 0%, var(--bg0) 55%, #03060a 100%);
  min-height:100vh;
  overflow-x:hidden;
}

a{ color: var(--ice); text-decoration:none; }
a:hover{ text-decoration:underline; }

.skip-link{
  position:absolute;
  left:-999px;
  top: 10px;
  padding: 10px 14px;
  background: #0b1726;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  color: var(--text);
  z-index: 9999;
}
.skip-link:focus{ left: 10px; outline: none; box-shadow: var(--focus); }

.page{
  position:relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 72px 16px;
}

/* =============== Background =============== */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
}
.bg__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: blur(8px) saturate(1.05) contrast(1.05);
  opacity: 0.55;
  transform: scale(1.03);
}
.bg__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 50% 35%, rgba(120,210,255,0.10) 0%, rgba(3,6,10,0.85) 65%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg, rgba(7,13,20,0.35), rgba(7,13,20,0.82));
}
.bg__grain{
  position:absolute;
  inset:0;
  opacity: 0.06;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* =============== Gate Card =============== */
.gate{
  width: 100%;
  display:flex;
  justify-content:center;
}
.gate__card{
  width: min(560px, 100%);
  padding: 34px 28px 26px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align:center;
  position:relative;
}
.gate__card--wide{
  width: min(720px, 100%);
}

.title{
  margin: 0 0 14px;
  letter-spacing: 0.18em;
  font-weight: 650;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  color: var(--ice-strong);
  text-shadow:
    0 0 12px var(--glow),
    0 0 28px var(--glow-soft);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.35));
}
.title--sm{
  font-size: clamp(30px, 5vw, 48px);
}

.subtitle{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.form{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  align-items:center;
}

.input{
  width: 100%;
  max-width: 460px;
  height: 54px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(160, 220, 255, 0.18);
  background: rgba(5, 10, 16, 0.55);
  color: var(--text);
  font-size: 16px;
  outline:none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset;
}
.input::placeholder{ color: rgba(231,242,255,0.35); }
.input:focus{
  border-color: rgba(160,220,255,0.45);
  box-shadow: var(--focus);
}

.btn{
  width: 100%;
  max-width: 260px;
  height: 50px;
  border-radius: 12px;
  border: 1px solid rgba(160,220,255,0.22);
  background: linear-gradient(180deg, rgba(120,210,255,0.18), rgba(120,210,255,0.10));
  color: var(--ice-strong);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor:pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(160,220,255,0.38);
  box-shadow: 0 0 0 1px rgba(120,210,255,0.15), 0 12px 28px rgba(0,0,0,0.25);
}
.btn:active{ transform: translateY(0px); }
.btn:focus{ outline:none; box-shadow: var(--focus); }

.btn--ghost{
  background: rgba(10, 18, 28, 0.40);
}

.attempts{
  margin: 16px 0 0;
  color: rgba(231,242,255,0.60);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.status{
  margin: 10px 0 0;
  min-height: 22px;
  color: rgba(231,242,255,0.82);
  font-size: 14px;
}
.status--danger{ color: var(--danger); }

.tiny-hint{
  margin-top: 16px;
  display:flex;
  justify-content:center;
  gap: 10px;
  opacity: 0.55;
}
.dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(160,220,255,0.35);
  box-shadow: 0 0 10px rgba(120,210,255,0.18);
}

/* =============== Shake =============== */
.shake{
  animation: shake 360ms ease;
}
@keyframes shake{
  0%{ transform: translateX(0); }
  15%{ transform: translateX(-10px); }
  30%{ transform: translateX(9px); }
  45%{ transform: translateX(-7px); }
  60%{ transform: translateX(6px); }
  75%{ transform: translateX(-4px); }
  100%{ transform: translateX(0); }
}

/* =============== Unlocked Page =============== */
.headline{
  margin: 6px 0 18px;
  color: rgba(231,242,255,0.88);
  font-size: 18px;
  line-height: 1.45;
}

.reward{
  display:grid;
  gap: 18px;
  margin-top: 10px;
}

.codeBox{
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(160,220,255,0.18);
  background: rgba(5, 10, 16, 0.42);
}
.codeBox__label{
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(231,242,255,0.65);
  margin-bottom: 10px;
}
.codeBox__row{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
}
.codeBox__code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 18px;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(160,220,255,0.18);
  background: rgba(8, 16, 24, 0.55);
  color: var(--ice-strong);
  text-shadow: 0 0 10px rgba(120,210,255,0.16);
}

.note{
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(231,242,255,0.64);
  line-height: 1.45;
}

.links{
  display:grid;
  gap: 12px;
  justify-items:center;
}

.divider{
  height: 1px;
  background: rgba(160,220,255,0.14);
  margin: 6px 0;
}

.small{
  margin: 0;
  font-size: 13px;
  color: rgba(231,242,255,0.60);
}

.claimed{
  margin-top: 10px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 138, 160, 0.22);
  background: rgba(20, 8, 12, 0.35);
}
.claimed__title{
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.claimed__text{
  margin: 0 0 12px;
  color: rgba(231,242,255,0.72);
}

.link{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(160,220,255,0.18);
  background: rgba(8, 16, 24, 0.35);
}
.link:focus{ outline:none; box-shadow: var(--focus); }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}