:root{
  --bg0:#07070a;
  --bg1:#0b0b10;
  --fg:#f4f4f6;
  --muted:#b9b9c4;
  --gold:#f3c25a;
  --gold2:#ffdf8a;
  --line:rgba(255,255,255,0.10);
  --danger:#ff4d4d;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(243,194,90,0.18), transparent 60%),
    radial-gradient(900px 700px at 10% 40%, rgba(255,223,138,0.10), transparent 60%),
    radial-gradient(800px 600px at 90% 70%, rgba(243,194,90,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Subtle grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.shell{
  min-height:100%;
  display:flex;
  /* Always stack brand ABOVE the gate */
  flex-direction: column;
  flex-wrap: nowrap;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:56px 18px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero{
  text-align:center;
  margin-bottom:0;
  width: min(760px, 100%);
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:14px;
}

.logo{
  width:76px;
  height:76px;
  filter: drop-shadow(0 10px 30px rgba(243,194,90,0.35));
}

.logoTop{
  display:block;
  margin: 0 auto 14px;
}

.brandText{ text-align:left; }
.brandName{
  letter-spacing:0.22em;
  font-weight:700;
  font-size:12px;
  color:rgba(255,255,255,0.86);
}
.brandHint{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,0.55);
}

.title{
  margin:0;
  font-size:46px;
  letter-spacing:-0.03em;
  line-height:1.05;
}

.tagline{
  margin:12px 0 0;
  font-size:16px;
  color:var(--muted);
}

.gate{
  width:min(760px, 100%);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 18px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
}

.gateTitle{
  margin:0 0 18px;
  text-align:center;
  font-size:20px;
  font-weight:600;
  color:rgba(255,255,255,0.92);
}

.em{
  font-weight:800;
  color:var(--gold2);
  text-shadow: 0 0 18px rgba(243,194,90,0.28);
}

.puzzle{ 
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  background: rgba(255,255,255,0.03);
}

.puzzleLabel{
  font-size:12px;
  color:rgba(255,255,255,0.6);
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.puzzleExpr{
  margin-top:10px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(243,194,90,0.22);
  background: rgba(0,0,0,0.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:18px;
  line-height:1.25;
  color:rgba(255,255,255,0.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: opacity 250ms ease, transform 250ms ease;
  word-break: break-word;
}

.puzzleExpr.fadeOut{ opacity:0; transform: translateY(4px); }

.answer{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.answerInput{
  flex:1;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.40);
  padding:12px 12px;
  color:var(--fg);
  font-size:15px;
  outline:none;
}

.answerInput:focus{
  border-color: rgba(243,194,90,0.42);
  box-shadow: 0 0 0 4px rgba(243,194,90,0.14);
}

.answerBtn{
  border-radius:12px;
  border:1px solid rgba(243,194,90,0.45);
  background: linear-gradient(180deg, rgba(243,194,90,0.18), rgba(243,194,90,0.05));
  color: rgba(255,255,255,0.92);
  font-weight:650;
  padding:12px 14px;
  cursor:pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.answerBtn:hover{ transform: translateY(-1px); border-color: rgba(255,223,138,0.75); }
.answerBtn:active{ transform: translateY(0px); }

.result{
  margin-top:10px;
  min-height:22px;
  font-size:13px;
  color: rgba(255,255,255,0.72);
}

.result.error{ color: rgba(255,77,77,0.95); }

.shake{
  animation: shake 220ms ease-in-out 0s 2;
}

@keyframes shake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  50%{ transform: translateX(4px); }
  75%{ transform: translateX(-3px); }
  100%{ transform: translateX(0); }
}

.footer{
  margin-top:14px;
  text-align:center;
  color: rgba(255,255,255,0.45);
}

.tiny{ font-size:12px; }

/* Stack layout on smaller screens */
@media (max-width:900px){
  .shell{
    gap:24px;
    padding:48px 18px;
  }
}


/* Mobile tweaks */
@media (max-width:420px){
  .title{ font-size:38px; }
  .answer{ flex-direction:column; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .puzzleExpr{ transition:none; }
  .shake{ animation:none; }
}