:root{
  --ink:#14170f;
  --ink-soft:rgba(20,23,15,.88);
  --paper:#f1f4ea;
  --moss:#9ec48b;
  --shadow:0 18px 44px rgba(12,18,9,.34);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#bcd3d8}
body{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.eyebrow{
  font-family:"Fragment Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.62;margin:0;
}
button{font:inherit;cursor:pointer}

#veil{
  position:fixed;inset:0;z-index:40;
  display:grid;place-items:center;padding:24px;
  background:linear-gradient(165deg,#1d2617,#101408 62%,#0b0f06);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
}
#veil.gone{opacity:0;transform:scale(1.04);pointer-events:none}
.veil-inner{text-align:center}
#veil h1{
  font-family:Anybody,system-ui,sans-serif;font-weight:900;
  font-size:clamp(58px,14vw,124px);line-height:.86;margin:.12em 0 .22em;
  letter-spacing:-.035em;
  background:linear-gradient(100deg,var(--paper) 28%,var(--moss));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#veil-note{
  font-family:"Fragment Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.5;margin:18px 0 0;
}
#leave{
  position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:21;font-family:"Fragment Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(241,244,234,.62);text-decoration:none;
  background:var(--ink-soft);padding:8px 16px;border-radius:999px;box-shadow:var(--shadow);
  transition:color .25s;
}
#leave:hover{color:var(--paper)}

#hudbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  padding:calc(14px + env(safe-area-inset-top)) 16px 0;
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  opacity:0;transform:translateY(-10px);transition:opacity .5s .2s,transform .5s .2s;
  pointer-events:none;
}
#hudbar.on{opacity:1;transform:none}
.hud-count{
  background:var(--ink-soft);backdrop-filter:blur(10px);
  border-radius:14px;padding:10px 14px 12px;min-width:148px;
  box-shadow:var(--shadow);
}
.hud-count b{display:block;font-family:Anybody,sans-serif;font-weight:700;font-size:22px;margin:2px 0 8px}
.bar{height:3px;border-radius:2px;background:rgba(241,244,234,.18);overflow:hidden}
.bar i{display:block;height:100%;background:var(--moss);transform-origin:left;transform:scaleX(0);
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
#peers{
  display:block;margin-top:9px;
  font-family:"Fragment Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;opacity:.6;
}
#mini{
  width:180px;height:154px;border-radius:14px;
  background:var(--ink-soft);backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}
#hint{
  position:fixed;left:50%;top:calc(22px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-14px);
  z-index:19;background:var(--ink-soft);border-radius:999px;padding:9px 18px;
  font-family:"Fragment Mono",monospace;font-size:12px;opacity:0;
  transition:opacity .4s,transform .4s cubic-bezier(.2,.7,.3,1);pointer-events:none;white-space:nowrap;
}
#hint.on{opacity:.92;transform:translateX(-50%)}

@media (max-width:640px){
  #mini{width:132px;height:114px}
  .hud-count{min-width:126px;padding:9px 12px 10px}
  .hud-count b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}