/* Lazarr — you are standing in the graveyard. The scene is the page background, fixed, and the
   content walks away from you down a path with headstones on both sides. No top bar, no panels. */

@font-face{
  font-family:"VT";
  src:url("/fonts/vt323.woff2") format("woff2");
  font-weight:400; font-display:block;
}

:root{
  --night:#12182a;
  --night-2:#0c1120;
  --stone:#8b93a8;
  --stone-dim:#5d6578;
  --grass:#2f4a34;
  --candle:#ffcf66;
  --bone:#e8e3d4;
  --earth:#3a2f26;
  --pix:"VT", ui-monospace, monospace;
  --mono:ui-monospace, "SF Mono", Consolas, monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--night);
  color:var(--bone);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
}
img{image-rendering:pixelated}
h1,h2{font-family:var(--pix); font-weight:400; margin:0; letter-spacing:.5px}
b{color:var(--candle)}
code{font-family:var(--mono); background:#00000047; padding:3px 8px; color:var(--bone)}
.dim{color:var(--stone-dim)}
.fine{font-size:12px}
.empty{color:var(--stone-dim); padding:18px 0; margin:0}

/* ---------- the graveyard itself ---------- */
.sky{
  position:fixed; inset:0; z-index:-2;
  background:url("/art/scene.png") center 62% / cover no-repeat, var(--night);
}
/* Everything below the first screen reads over a darkened version of the same ground. */
.fog{
  position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg, #12182a26 0%, #12182a8c 40%, #0c1120e6 72%, #0c1120 100%);
}

/* ---------- entrance: one full screen, no bar, no panel ---------- */
.entrance{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 18px 60px; position:relative;
}
.entrance-corner{
  position:absolute; top:18px; right:20px;
  display:flex; align-items:center; gap:14px;
}
.watch{font-family:var(--pix); font-size:20px; color:var(--candle)}
.entrance h1{
  font-size:clamp(64px, 13vw, 168px); line-height:.9; color:var(--bone);
  text-shadow:0 0 34px #0c1120, 0 6px 0 #0c112099;
}
.entrance-line{margin:10px 0 26px; font-size:clamp(14px,1.8vw,18px); color:#c3c8d6; max-width:640px}
.entrance-counts{display:flex; gap:34px; font-family:var(--pix); font-size:22px; color:var(--stone)}
.entrance-counts b{font-size:30px}
.scrolldown{
  position:absolute; bottom:28px;
  font-family:var(--pix); font-size:20px; color:var(--candle); text-decoration:none;
  animation:sink 3.6s ease-in-out infinite;
}
@keyframes sink{0%,100%{transform:translateY(0); opacity:.85} 50%{transform:translateY(6px); opacity:1}}
@media (prefers-reduced-motion:reduce){ .scrolldown{animation:none} }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--pix); font-size:19px; letter-spacing:.5px; text-decoration:none;
  background:var(--candle); color:var(--night); border:0; padding:6px 16px; cursor:pointer;
  display:inline-block;
}
.btn:hover{background:#ffe6a3}
.btn[disabled]{background:#3b4257; color:#79809a; cursor:not-allowed}
.btn-quiet{background:transparent; color:var(--bone); border:1px solid #ffffff33}
.btn-quiet:hover{background:#ffffff14; color:var(--candle)}
.btn-small{font-size:15px; padding:3px 10px}

/* ---------- the ground: two rows of stones with a path between them ---------- */
.ground{max-width:1180px; margin:0 auto; padding:10px 18px 70px; position:relative}
.ground-head{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.ground-head h2{font-size:34px}
.sorts{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.chip{
  font-family:var(--pix); font-size:17px; background:transparent; color:var(--stone-dim);
  border:0; border-bottom:1px solid #ffffff1f; padding:2px 4px; cursor:pointer;
}
.chip:hover{color:var(--bone)}
.chip-on{color:var(--candle); border-bottom-color:var(--candle)}

/* the trodden path, drawn not pictured */
.path{
  position:absolute; left:50%; top:96px; bottom:70px; width:clamp(48px, 7vw, 96px);
  transform:translateX(-50%);
  background:
    linear-gradient(180deg, #3a2f2600, #3a2f26cc 12%, #3a2f26cc 88%, #3a2f2600),
    repeating-linear-gradient(180deg, #00000000 0 22px, #00000026 22px 24px);
  filter:blur(.4px);
}
.grid{
  display:grid; grid-template-columns:1fr clamp(48px,7vw,96px) 1fr; gap:18px 0;
  align-items:start;
}
.grid > .empty{grid-column:1 / -1; text-align:center}

/* stones alternate sides, leaning slightly, like a real row */
.plot{
  position:relative; width:min(430px, 100%);
  background:linear-gradient(180deg, #2a3147, #1a2033);
  border:1px solid #3b4460;
  border-radius:120px 120px 6px 6px;
  padding:26px 22px 18px;
  box-shadow:0 18px 0 -12px #0c1120;
}
.plot:nth-child(odd){grid-column:1; justify-self:end; transform:rotate(-.5deg)}
.plot:nth-child(even){grid-column:3; justify-self:start; transform:rotate(.6deg)}
.plot::after{  /* grass at the base */
  content:""; position:absolute; left:8%; right:8%; bottom:-7px; height:10px;
  background:repeating-linear-gradient(90deg, var(--grass) 0 3px, #0000 3px 7px);
}
.plot:hover{border-color:var(--stone)}
.plot-sym{font-family:var(--pix); font-size:30px; color:var(--bone); line-height:1; text-align:center}
.plot-dates{font-size:12px; color:var(--stone-dim); margin:4px 0 14px; text-align:center}
.plot-line{display:flex; justify-content:space-between; font-size:13px; padding:5px 0; border-top:1px solid #ffffff12}
.plot-line b{font-family:var(--pix); font-size:19px; color:var(--candle)}
.plot-bar{height:7px; background:#0e1424; margin:12px 0 10px; border:1px solid #ffffff14}
.plot-bar i{display:block; height:100%; background:var(--candle)}
/* a second button appears on a plot once its dig has something else to do */
.plot-foot .btn + .btn{margin-left:6px}
.plot-foot{display:flex; align-items:center; gap:10px; justify-content:center}
.plot-foot .btn{font-size:16px; padding:4px 12px}
.plot-goal{font-size:12px; color:var(--stone-dim)}
.add-coin{margin:0 auto}

/* ---------- the pit ---------- */
.pitwork{
  max-width:1000px; margin:0 auto 70px; padding:0 18px;
  display:grid; grid-template-columns:300px 1fr; gap:30px; align-items:center;
}
.pit{width:100%; filter:drop-shadow(0 10px 0 #0c112066)}
.pitwork h2{font-size:32px; margin-bottom:10px}
.pitwork p{margin:0 0 12px; font-size:14px; max-width:600px}
.terms{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 26px; margin:16px 0 0}
.terms div{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dotted #ffffff1f; padding:7px 0}
.terms dt{color:var(--stone-dim); font-size:13px; margin:0}
.terms dd{margin:0; font-family:var(--pix); font-size:19px; color:var(--bone)}

/* ---------- raised ---------- */
.raised{max-width:1000px; margin:0 auto 70px; padding:0 18px}
.raised h2{font-size:32px; margin-bottom:12px}
.raised-list{list-style:none; margin:0; padding:0}
.raised-list li{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid #ffffff14; font-size:13px}

/* ---------- lore ---------- */
.lore{max-width:1000px; margin:0 auto 80px; padding:0 18px}
.lore h2{font-size:32px; margin-bottom:14px}
.lore-list{list-style:none; margin:0; padding:0; counter-reset:none}
.lore-list li{display:flex; gap:16px; align-items:baseline; padding:11px 0; border-top:1px solid #ffffff14; font-size:14px}
.lore-list span{font-family:var(--pix); font-size:22px; color:var(--candle); min-width:42px}

/* ---------- the gate on the way out ---------- */
.gate{padding:0 18px 60px; text-align:center}
.plaque{
  max-width:720px; margin:0 auto;
  background:linear-gradient(180deg,#2a3147,#1a2033);
  border:1px solid #3b4460; border-radius:10px 10px 0 0;
  padding:22px 24px 18px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 16px 0 -10px #0c1120;
}
.plaque-name{font-family:var(--pix); font-size:26px; color:var(--candle)}
.links{display:flex; gap:20px; font-family:var(--pix); font-size:19px}
.links a{color:var(--bone); text-decoration:none; border-bottom:1px solid #ffffff33}
.links a:hover{color:var(--candle)}
.gate .fine{margin-top:16px}

@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .grid .plot, .grid .plot:nth-child(odd), .grid .plot:nth-child(even){
    grid-column:1; justify-self:stretch; width:100%; transform:none;
  }
  .path{display:none}
  .pitwork{grid-template-columns:1fr}
  .pit{max-width:220px}
}

/* links that exist but lead nowhere until the coin launches */
.links a.soon{opacity:.4; pointer-events:none; cursor:default}

/* a coin the index has not caught up with yet, added by hand */
.add-coin{
  display:inline-block; margin-top:10px; cursor:pointer;
  background:transparent; border:1px dashed currentColor; opacity:.7;
  font:inherit; font-size:12px; padding:6px 10px; color:inherit;
}
.add-coin:hover{opacity:1}