:root{
  --bg0:#05070b;
  --bg1:#070a10;
  --panel:#0b1020cc;
  --panel2:#0b0f18e6;
  --line:#1a2644;
  --text:#d6e2ff;
  --muted:#8ea3cc;
  --neon:#2af4ff;
  --neon2:#1aa9ff;
  --gold:#ffcf5a;
  --danger:#ff4d6d;
  --ok:#4dffb5;
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 70% 15%, rgba(42,244,255,.08), transparent 60%),
    radial-gradient(900px 600px at 15% 10%, rgba(255,207,90,.06), transparent 55%),
    radial-gradient(1000px 700px at 60% 95%, rgba(26,169,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.scanlines{
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05),
    rgba(255,255,255,.05) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 7px
  );
  mix-blend-mode:overlay;
  opacity:.08;
  pointer-events:none;
  z-index:4;
}
.noise{
  position:fixed; inset:-20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  opacity:.05;
  animation: noiseShift 7s steps(2,end) infinite;
  pointer-events:none;
  z-index:5;
}
@keyframes noiseShift{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-2%,2%,0)}
  50%{transform:translate3d(2%,-1%,0)}
  75%{transform:translate3d(1%,3%,0)}
  100%{transform:translate3d(0,0,0)}
}

.wrap{max-width:1180px; margin:0 auto; padding: 24px 18px 72px}

.topbar{
  position:sticky; top:0;
  z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(26,38,68,.7);
  background: linear-gradient(180deg, rgba(5,7,11,.85), rgba(5,7,11,.55));
  backdrop-filter: blur(10px);
}
.topbar__left{display:flex; align-items:center; gap:12px}
.sigil{
  width:42px; height:42px; border-radius:10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(42,244,255,.35), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(255,207,90,.22), transparent 60%),
    linear-gradient(180deg, rgba(26,169,255,.22), rgba(5,7,11,.0));
  border:1px solid rgba(42,244,255,.28);
  box-shadow: 0 0 24px rgba(42,244,255,.12), inset 0 0 30px rgba(255,207,90,.06);
  position:relative;
}
.sigil::after{
  content:"";
  position:absolute; inset:10px;
  border:1px dashed rgba(42,244,255,.5);
  border-radius:8px;
  transform: rotate(12deg);
  opacity:.7;
}
.brand__title{font-weight:700; letter-spacing:.2px}
.brand__sub{font-family:var(--mono); font-size:12px; color:var(--muted)}

.topbar__right{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.5px;
  color:var(--text);
  text-decoration:none;
  border:1px solid rgba(26,38,68,.8);
  background: rgba(11,15,24,.5);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.chip:hover{transform: translateY(-1px); border-color: rgba(42,244,255,.35); box-shadow: 0 10px 40px rgba(0,0,0,.35)}
.chip--gold{border-color: rgba(255,207,90,.35); background: rgba(255,207,90,.08)}
.chip--button{cursor:pointer}

.neon{color:var(--neon); text-shadow: 0 0 16px rgba(42,244,255,.25)}
.gold{color:var(--gold); text-shadow: 0 0 18px rgba(255,207,90,.18)}
.muted{color:var(--muted)}

.hero{
  position:relative;
  margin-top: 22px;
  padding: 22px 0 18px;
}
.hero__bg{
  position:absolute; inset:-120px -50px -40px -50px;
  z-index:0;
  pointer-events:none;
  opacity:1;
}
.portal{
  position:absolute;
  width: 620px; height: 620px;
  right: -120px; top: -50px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(42,244,255,.22), rgba(42,244,255,.07) 30%, rgba(255,207,90,.05) 45%, transparent 62%),
    radial-gradient(circle at 60% 40%, rgba(26,169,255,.12), transparent 55%),
    radial-gradient(circle at 40% 60%, rgba(255,207,90,.08), transparent 58%);
  filter: blur(.2px);
  box-shadow: 0 0 90px rgba(42,244,255,.18);
  animation: portalPulse 6.5s ease-in-out infinite;
}
@keyframes portalPulse{
  0%,100%{transform: translate3d(0,0,0) scale(1); opacity:.95}
  50%{transform: translate3d(-6px,8px,0) scale(1.03); opacity:1}
}
.hood{
  position:absolute;
  width: 520px; height: 520px;
  left: -130px; top: -30px;
  background:
    radial-gradient(closest-side at 60% 55%, rgba(0,0,0,.0), rgba(0,0,0,.85) 70%),
    radial-gradient(closest-side at 62% 48%, rgba(42,244,255,.08), transparent 62%),
    radial-gradient(closest-side at 42% 65%, rgba(255,207,90,.06), transparent 64%);
  border-radius: 50%;
  opacity:.9;
  transform: rotate(-10deg);
}

.hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; gap:14px}
  .portal{right:-240px; top:-140px; width:520px; height:520px}
  .hood{left:-220px; top:-160px; width:480px; height:480px}
}

.kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1.6px;
  color:rgba(214,226,255,.8);
  margin-bottom:10px;
}
.glitch{position:relative; display:inline-block}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position:absolute; inset:0;
  opacity:.6;
  pointer-events:none;
}
.glitch::before{transform: translate(1px,-1px); color: rgba(42,244,255,.85); clip-path: polygon(0 0, 100% 0, 100% 45%, 0 35%)}
.glitch::after{transform: translate(-1px,1px); color: rgba(255,207,90,.8); clip-path: polygon(0 60%, 100% 50%, 100% 100%, 0 100%)}

.hero__h1{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.05;
  letter-spacing:-.4px;
}
@media (max-width: 520px){
  .hero__h1{font-size:34px}
}
.hero__p{margin:0 0 14px; color:rgba(214,226,255,.84); max-width: 62ch}
.fineprint{
  margin-top:14px;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(142,163,204,.86);
}

.meters{
  display:grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap:10px;
  margin-top:14px;
}
@media (max-width: 980px){
  .meters{grid-template-columns: 1fr 1fr; }
  .meter--right{grid-column: 1 / -1}
}
.meter{
  border:1px solid rgba(26,38,68,.7);
  border-radius:14px;
  background: rgba(11,15,24,.45);
  padding: 12px 12px 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.meter__label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.6px;
  color:rgba(142,163,204,.92);
  text-transform:uppercase;
}
.meter__value{
  margin-top:4px;
  font-weight:700;
  font-size:22px;
  letter-spacing:.2px;
}

.panel{
  border:1px solid rgba(26,38,68,.9);
  background: linear-gradient(180deg, rgba(11,16,32,.66), rgba(11,15,24,.52));
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  position:relative;
}
.panel::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 180px at 50% 0%, rgba(42,244,255,.14), transparent 60%);
  pointer-events:none;
}
.panel__title{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-bottom:1px solid rgba(26,38,68,.75);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.9px;
  color: rgba(214,226,255,.9);
  text-transform:uppercase;
  background: rgba(11,15,24,.6);
}
.panel__titleRight{color: rgba(142,163,204,.95)}
.dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--neon);
  box-shadow: 0 0 18px rgba(42,244,255,.55);
  display:inline-block;
  margin-right:10px;
}

.form{padding:14px}
.label{
  display:flex; gap:10px; align-items:baseline; justify-content:space-between;
  font-weight:600;
  margin: 10px 0 6px;
}
.label__hint{font-family:var(--mono); font-weight:400; font-size:11px; color: rgba(142,163,204,.92)}
.textarea{
  width:100%;
  min-height: 190px;
  resize: vertical;
  border-radius:14px;
  padding: 12px 12px;
  font-size:14px;
  line-height:1.5;
  color: var(--text);
  border:1px solid rgba(26,38,68,.95);
  background: rgba(5,7,11,.55);
  outline:none;
  box-shadow: inset 0 0 40px rgba(0,0,0,.38);
}
.textarea:focus{border-color: rgba(42,244,255,.45); box-shadow: inset 0 0 40px rgba(0,0,0,.38), 0 0 0 3px rgba(42,244,255,.08)}

.row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 520px){.row{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column}
.input{
  width:100%;
  border-radius:12px;
  padding: 10px 10px;
  font-size:14px;
  color: var(--text);
  border:1px solid rgba(26,38,68,.95);
  background: rgba(5,7,11,.55);
  outline:none;
}
.input:focus{border-color: rgba(255,207,90,.45); box-shadow: 0 0 0 3px rgba(255,207,90,.08)}

.check{
  display:flex; gap:10px; align-items:center;
  margin: 12px 0;
  font-family:var(--mono);
  font-size:12px;
  color: rgba(214,226,255,.9);
}
.check input{accent-color: var(--neon)}

.recaptchaBox{
  border:1px dashed rgba(26,38,68,.9);
  background: rgba(11,15,24,.35);
  border-radius:14px;
  padding: 12px;
  margin: 10px 0 12px;
}
.recaptchaMount{min-height:78px}
.recaptchaNote{
  margin-top:10px;
  font-family:var(--mono);
  font-size:11px;
  color: rgba(142,163,204,.92);
}

.btn{
  width:100%;
  border:0;
  border-radius: 14px;
  padding: 14px 14px;
  cursor:pointer;
  background: linear-gradient(90deg, rgba(42,244,255,.18), rgba(26,169,255,.16), rgba(255,207,90,.14));
  color: var(--text);
  font-weight:700;
  letter-spacing:.2px;
  position:relative;
  box-shadow: 0 14px 80px rgba(42,244,255,.08), 0 18px 60px rgba(0,0,0,.45);
  border:1px solid rgba(42,244,255,.25);
  overflow:hidden;
}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn__text{position:relative; z-index:2}
.btn__glow{
  position:absolute; inset:-40% -20%;
  background: radial-gradient(circle at 50% 50%, rgba(42,244,255,.25), transparent 55%);
  animation: glowSweep 3.5s ease-in-out infinite;
}
@keyframes glowSweep{
  0%,100%{transform: translate3d(-10%,0,0) rotate(6deg); opacity:.7}
  50%{transform: translate3d(10%,0,0) rotate(-8deg); opacity:1}
}
.btn:hover{border-color: rgba(255,207,90,.32)}

.form__error{
  margin-top:10px;
  font-family:var(--mono);
  font-size:12px;
  color: var(--danger);
  min-height: 16px;
}

.replyWrap{margin-top: 16px}
.replyHeader{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding: 8px 0 12px;
}
.replyHeader__title{font-weight:700; font-size:18px}
.replyHeader__actions{display:flex; gap:10px; flex-wrap:wrap}

.replyCard{
  border-radius: 16px;
  border:1px solid rgba(26,38,68,.9);
  background: linear-gradient(180deg, rgba(11,16,32,.75), rgba(11,15,24,.55));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.replyCard::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(900px 220px at 30% 0%, rgba(255,207,90,.10), transparent 65%),
              radial-gradient(900px 220px at 80% 0%, rgba(42,244,255,.10), transparent 65%);
  pointer-events:none;
}
.replyCard__grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:0;
}
@media (max-width: 980px){.replyCard__grid{grid-template-columns:1fr}}
.replyCard__left,.replyCard__right{padding: 16px 16px 14px; position:relative; z-index:1}
.replyCard__left{border-right:1px solid rgba(26,38,68,.8)}
@media (max-width: 980px){.replyCard__left{border-right:0; border-bottom:1px solid rgba(26,38,68,.8)}}

.cardLabel{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(142,163,204,.95);
  margin-bottom: 10px;
}
.quote{
  font-size:15px;
  line-height:1.55;
  color: rgba(214,226,255,.92);
  white-space:pre-wrap;
}
.replyText{
  margin:0;
  font-family:var(--mono);
  font-size:13px;
  line-height:1.5;
  color: rgba(214,226,255,.92);
  white-space:pre-wrap;
}
.mini{
  margin-top: 10px;
  font-family:var(--mono);
  font-size:12px;
  color: rgba(142,163,204,.95);
}

.imageOut{
  margin-top: 12px;
  border:1px solid rgba(26,38,68,.85);
  border-radius: 16px;
  background: rgba(11,15,24,.4);
  padding: 12px;
}
.imageOut__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.imageOut__title{
  font-family:var(--mono);
  font-size:12px;
  color: rgba(142,163,204,.95);
}
canvas{
  width:100%;
  height:auto;
  border-radius: 12px;
  border:1px solid rgba(26,38,68,.8);
  background: #060913;
}

.section{margin-top: 54px}
.section__head{margin-bottom: 14px}
.section__title{margin:0; font-size:28px; letter-spacing:-.3px}
.section__sub{margin-top:6px; color: rgba(214,226,255,.78)}

.leader{
  border:1px solid rgba(26,38,68,.85);
  border-radius: 16px;
  background: rgba(11,15,24,.45);
  padding: 12px;
  margin: 14px 0 14px;
}
.leader__title{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: rgba(142,163,204,.96);
  margin-bottom: 10px;
}
.leader__items{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px}
@media (max-width: 980px){.leader__items{grid-template-columns:1fr}}
.leaderItem{
  border-radius: 14px;
  border:1px solid rgba(26,38,68,.8);
  background: linear-gradient(180deg, rgba(5,7,11,.45), rgba(11,15,24,.35));
  padding: 10px 10px;
  position:relative;
  overflow:hidden;
}
.leaderItem::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(280px 60px at 50% 0%, rgba(255,207,90,.12), transparent 60%);
  pointer-events:none;
}
.leaderItem__top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; position:relative; z-index:1}
.leaderItem__score{font-family:var(--mono); color: var(--gold); font-weight:700}
.leaderItem__txt{
  margin-top: 6px;
  font-size:13px;
  line-height:1.45;
  color: rgba(214,226,255,.86);
  position:relative; z-index:1;
}

.wallDivider{
  margin: 10px 0 14px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(5,7,11,0), rgba(42,244,255,.4), rgba(255,207,90,.25), rgba(5,7,11,0));
  opacity: .8;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){.grid{grid-template-columns:1fr}}
.card{
  border-radius: 16px;
  border:1px solid rgba(26,38,68,.85);
  background: rgba(11,15,24,.45);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  overflow:hidden;
  position:relative;
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(450px 120px at 20% 0%, rgba(42,244,255,.10), transparent 60%),
    radial-gradient(450px 120px at 80% 0%, rgba(255,207,90,.08), transparent 60%);
  pointer-events:none;
}
.card__inner{padding: 12px 12px 12px; position:relative; z-index:1}
.card__meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono);
  font-size:11px;
  color: rgba(142,163,204,.95);
  letter-spacing:.6px;
  text-transform:uppercase;
}
.card__legend{color: rgba(255,207,90,.95)}
.card__conf{
  margin-top: 8px;
  font-size:13px;
  line-height:1.5;
  color: rgba(214,226,255,.9);
  white-space:pre-wrap;
}
.card__reply{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(26,38,68,.7);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.45;
  color: rgba(214,226,255,.88);
  white-space:pre-wrap;
}
.card--glitch{
  animation: cardGlitch 7.5s ease-in-out infinite;
}
@keyframes cardGlitch{
  0%,96%,100%{transform: translate3d(0,0,0)}
  97%{transform: translate3d(0,-1px,0)}
  98%{transform: translate3d(-1px,1px,0)}
  99%{transform: translate3d(1px,0,0)}
}

.center{display:flex; justify-content:center; margin-top: 14px}

.lore, .time{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){.lore,.time{grid-template-columns:1fr}}
.lore__card, .time__card{
  border:1px solid rgba(26,38,68,.85);
  border-radius: 16px;
  background: rgba(11,15,24,.4);
  padding: 14px;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.lore__card::before, .time__card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(500px 110px at 50% 0%, rgba(42,244,255,.10), transparent 60%);
  pointer-events:none;
}
.lore__k, .time__k{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: rgba(142,163,204,.95);
  margin-bottom: 8px;
  position:relative; z-index:1;
}
.lore__p, .time__p{
  margin:0;
  color: rgba(214,226,255,.86);
  position:relative; z-index:1;
  line-height:1.55;
}
.time__p--small{margin-top:10px; font-family:var(--mono); font-size:12px}

.footer{
  margin-top: 56px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 12px;
  border-top:1px solid rgba(26,38,68,.65);
  padding-top: 18px;
}
.footer__title{font-weight:700}
.footer__sub{font-family:var(--mono); font-size:12px; color: rgba(142,163,204,.92); margin-top:6px}

/* Mobile refinements */
@media (max-width: 640px){
  .wrap{
    padding: 18px 14px 56px;
  }
  .topbar{
    padding: 10px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .topbar__right{
    width: 100%;
    gap: 6px;
    overflow-x: auto;
  }
  .hero{
    margin-top: 18px;
    padding-top: 14px;
  }
  .hero__bg{
    inset: -80px -40px -20px -40px;
  }
  .portal{
    width: 420px;
    height: 420px;
    right: -180px;
    top: -120px;
  }
  .hood{
    width: 360px;
    height: 360px;
    left: -140px;
    top: -120px;
  }
  .hero__p{
    font-size: 14px;
  }
  .meters{
    grid-template-columns: 1fr;
  }
  .panel{
    border-radius: 14px;
  }
  .replyHeader{
    flex-direction: column;
    align-items: flex-start;
  }
  .imageOut__row{
    flex-direction: column;
    align-items: flex-start;
  }
  .footer{
    flex-direction: column;
    align-items: flex-start;
  }
}