:root{
  --bg:#000000;
  --ink:#dfffdc;
  --accent:#7aff8a;
  --muted:#6e7f6d;
  --red:#ff3b3b;
  --blue:#3b87ff;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  image-rendering: pixelated;
  letter-spacing:.5px;
  overflow:hidden;
}

.hidden{ display:none !important; }

.stage{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:20;
}
.face{
  width:min(360px, 62vw);
  max-width:90vw;
  image-rendering: pixelated;
  filter:none;
  opacity:0;
  transition: opacity .8s ease, transform .3s ease;
  transform: translateY(-14vh);
}
.face.visible{ opacity:1; }
.face.grow{ animation: faceGrow 8s linear forwards; }
@keyframes faceGrow{
  0%   { transform: translateY(-14vh) scale(1);   opacity:1; }
  60%  { transform: translateY(-14vh) scale(2.6); opacity:1; }
  100% { transform: translateY(-14vh) scale(3.2); opacity:1; }
}

.ghosts{
  position:fixed; top:0; left:0; width:100%; height:38vh;
  pointer-events:none; z-index:12;
}
.ghost{
  position:absolute; width:min(120px, 18vw);
  opacity:0; filter:none; image-rendering: pixelated;
  transform: translateY(-10px) scale(0.98);
  animation: ghostFloat 4.8s ease-in-out forwards;
}
@keyframes ghostFloat{
  0%{opacity:0; transform: translateY(-8px) scale(0.98);}
  10%{opacity:.9; transform: translateY(0) scale(1);}
  50%{opacity:.85; transform: translateY(-6px) scale(1.01);}
  80%{opacity:.9; transform: translateY(0) scale(1);}
  100%{opacity:0; transform: translateY(-10px) scale(0.98);}
}

.hud{
  position:fixed; inset:0; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center;
  padding:2.25rem 1.25rem 3.5rem; gap:1rem; pointer-events:none; z-index:4;
}
.typebox{
  width:min(920px, 92vw);
  min-height:90px; max-height:40vh; overflow:auto;
  border:2px solid rgba(122,255,138,.28);
  background: rgba(0,0,0,.78);
  padding:1rem; border-radius:8px; line-height:1.25;
  font-size:clamp(16px, 2.6vw, 28px); pointer-events:auto;
}
.line{ margin:.35rem 0; opacity:.98; }
.typing::after{ content:"▌"; margin-left:.25rem; animation: blink .9s steps(2,end) infinite; }
@keyframes blink{ 0%,50%{opacity:0} 51%,100%{opacity:1} }

.choices{ width:min(920px, 92vw); display:flex; flex-wrap:wrap; gap:.6rem; pointer-events:auto; }
.btn{
  font:inherit; background:#000; color:var(--ink);
  border:2px solid var(--accent); padding:.55rem .95rem; border-radius:8px;
  cursor:pointer; text-transform:lowercase;
  transition: transform .06s ease, filter .06s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.12); }
.btn:active{ transform: translateY(0); filter: brightness(.96); }

.ip-wrap{ margin-top:.6rem; font-size:clamp(20px, 4.5vw, 38px); font-weight:700; letter-spacing:1px; position:relative; display:inline-block; }
.ip{
  position:relative; z-index:3; padding:.1rem .35rem; background:#000;
  border:2px solid rgba(122,255,138,.28); border-radius:6px; text-shadow:none;
}
.ip-glitch::before,.ip-glitch::after{
  content: attr(data-ip); position:absolute; left:0; top:0; padding:.1rem .35rem; border-radius:6px;
  mix-blend-mode: screen; filter: blur(.5px) contrast(1.2); animation: rgbshift .8s infinite linear;
}
.ip-glitch::before{ color:var(--red);  transform: translate(-2px,-1px); }
.ip-glitch::after { color:var(--blue); transform: translate(2px,1px); }
@keyframes rgbshift{
  0%{transform: translate(0,0)} 25%{transform: translate(-2px,0)} 50%{transform: translate(2px,1px)}
  75%{transform: translate(-1px,-1px)} 100%{transform: translate(0,0)}
}

.hungry{
  position:fixed; color:var(--ink); opacity:.9;
  font-size:clamp(16px, 3vw, 32px); pointer-events:none; z-index:15;
  animation: hungryDrift 2.8s ease-out forwards;
}
@keyframes hungryDrift{
  0%{ transform: translate(0,0); opacity:0; }
  10%{ opacity:1; }
  100%{ transform: translate(var(--dx,20px), var(--dy,60px)); opacity:0; }
}

.whiteout{
  position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:999;
  transition: opacity 1.4s ease-in-out;
}
.whiteout.on{ opacity:1; }

.tbc{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:1rem; background:#000; color:var(--ink); z-index:1000; opacity:0; transition: opacity .6s ease;
  text-align:center; padding:2rem;
}
.tbc.show{ opacity:1; }
.tbc h1{ margin:0; font-size:clamp(28px, 6vw, 64px); text-transform:lowercase; }
.tbc .xbtn{
  font:inherit; text-decoration:none; background:#000; color:var(--ink);
  border:2px solid var(--accent); padding:.6rem 1rem; border-radius:8px;
  display:inline-block; transition: transform .06s ease, filter .06s ease;
}
.tbc .xbtn:hover{ transform: translateY(-1px); filter: brightness(1.12); }

.forest{
  position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:10; background:transparent;
}
.fTree{
  position:absolute; top:0; white-space:nowrap; will-change: transform, opacity;
  font-size:clamp(16px, 2.6vw, 28px); color:#123a16; opacity:.85;
  animation: sweep linear infinite;
  text-shadow: 6px 0 0 #0d2910, 12px 0 0 #0a1e0c, 18px 0 0 #071409;
}
@keyframes sweep{ from{ transform: translateX(120vw) } to{ transform: translateX(-160vw) } }

.intro{
  position:fixed; inset:0; display:grid; place-items:center; pointer-events:none;
  font-size:clamp(26px, 6vw, 64px); text-align:center; z-index:11; color:var(--ink);
}
.intro .line{ margin:.2rem 0; }
@keyframes shake{
  0%{ transform: translate(0,0) } 25%{ transform: translate(1px,-1px) }
  50%{ transform: translate(-1px,1px) } 75%{ transform: translate(1px,1px) }
  100%{ transform: translate(0,0) }
}
.shake{ animation: shake .22s ease 2; }

html, body {
  min-height: 100dvh;
}

@media (max-width: 480px) {
  .face{
    width: min(300px, 78vw);
    transform: translateY(-10vh);
  }

  .hud{
    padding: 1.2rem 1rem calc(1rem + env(safe-area-inset-bottom));
    gap: .75rem;
  }

  .typebox{
    font-size: clamp(14px, 4.2vw, 18px);
    min-height: 72px;
    max-height: 34vh;
    padding: .75rem;
  }

  .choices{ gap: .5rem; }
  .btn{
    padding: .6rem .9rem;
    border-radius: 7px;
    font-size: clamp(14px, 3.8vw, 17px);
  }

  .ip-wrap{ font-size: clamp(16px, 6vw, 22px); }

  .ghosts{ height: 32vh; }
  .ghost{ width: min(92px, 22vw); }

  .tbc h1{ font-size: clamp(24px, 8vw, 42px); }
  .tbc .xbtn{ padding: .55rem .9rem; font-size: clamp(14px, 4vw, 16px); }
}

@media (max-height: 540px) {
  .face{
    width: min(280px, 60vw);
    transform: translateY(-6vh);
  }
  .hud{
    padding: .8rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    gap: .5rem;
  }
  .typebox{
    max-height: 28vh;
    font-size: clamp(13px, 2.6vw, 16px);
  }
  .ghosts{ height: 28vh; }
}

@media (min-width: 481px) and (max-width: 820px) {
  .face{
    width: min(340px, 64vw);
    transform: translateY(-12vh);
  }
  .typebox{
    font-size: clamp(15px, 3.2vw, 20px);
    max-height: 36vh;
  }
  .btn{ font-size: clamp(14px, 2.8vw, 18px); }
}

@media (prefers-reduced-motion: reduce) {
  .fTree, .ghost, .face.grow, .hungry { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .whiteout { transition-duration: .2s !important; }
  .face { transition: opacity .3s ease, transform .3s ease; }
}