/* Pile of Bones — site styles (B244). Palette + fonts come from tokens.css. */

  /* ---------- ground rules ---------- */
  * { margin:0; padding:0; box-sizing:border-box; }
  html { color-scheme:dark; scroll-behavior:smooth; }
  html, body { overflow-x:clip; }
  body {
    background:var(--ground);
    color:var(--bone);
    font-family:var(--sans);
    font-size:18px;
    line-height:1.6;
  }
  img { display:block; }
  a { color:inherit; }
  ::selection { background:var(--ember); color:#171106; }

  :root {
    --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --dim:#a89b83;               /* muted bone */
    --s0:#191410; --s1:#141009; --s2:#100d08;
    --s3:#0c0906; --s4:#090705; --s5:#050403;
  }

  /* ---------- strata ---------- */
  .stratum { position:relative; }
  .stratum > .wrap { position:relative; z-index:2; max-width:880px; margin:0 auto; padding:96px 24px; }
  .stratum::before {              /* real dungeon masonry, fading with depth */
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url("art/dungeon-floor.png") repeat;
    background-size:440px 956px;  /* 2x, integer */
    image-rendering:pixelated;
  }
  .s0 { background:var(--s0); } .s0::before { opacity:.42; }
  .s1 { background:var(--s1); } .s1::before { opacity:.30; }
  .s2 { background:var(--s2); } .s2::before { opacity:.22; }
  .s3 { background:var(--s3); } .s3::before { opacity:.15; }
  .s4 { background:var(--s4); } .s4::before { opacity:.10; }
  .s5 { background:var(--s5); } .s5::before { opacity:.05; }

  /* pixel-stepped boundary between strata */
  .edge { height:32px; position:relative; z-index:1; background:var(--below); }
  .edge::before {
    content:""; position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(to right, var(--above) 0 48px, transparent 48px 96px),
      repeating-linear-gradient(to right, transparent 0 24px, var(--above) 24px 72px, transparent 72px 96px);
    background-size:96px 16px, 96px 16px;
    background-position:0 0, 0 16px;
    background-repeat:repeat-x, repeat-x;
  }

  /* depth marker that rails each stratum: feet in amber, then the phrase */
  .tag {
    display:flex; align-items:center; gap:16px;
    font-size:16px; letter-spacing:2px;
    margin-bottom:48px; white-space:nowrap;
  }
  .tag .ft { color:var(--ember); }
  .tag .ph { color:var(--dim); }
  .tag .rule { flex:1; height:2px; background:var(--hairline); min-width:32px; }
  @media (max-width:520px) { .tag { white-space:normal; } }

  /* ---------- type ---------- */
  h1, .display { font-family:"BoneChisel", "m5x7", monospace; font-weight:normal; }
  h2 { font-family:inherit; font-weight:600; font-size:32px; line-height:1.15; margin-bottom:24px; }
  .kicker { font-size:16px; letter-spacing:2px; color:var(--dim); }
  .body { color:var(--dim); max-width:620px; }
  .body strong { color:var(--bone); font-weight:normal; }
  .fine { font-size:16px; color:var(--dim); }
  .fine a { color:var(--dim); }
  .fine a:hover { color:var(--bone); }

  /* m5x7 survives only as the small-16px pixel voice + accents (B249); prose is Plex Sans */
  .tag, .whisper, .kicker, .fine, .cta-note, .caption, .specials figcaption,
  .stat i, .stat small, .panel .count, .card .type, .card .flavor, .form-note,
  footer p, .rail a, .descend-hint, .deep .stamp { font-family:"m5x7", monospace; }

  /* ---------- buttons: the app's crypt plates, 9-sliced ---------- */
  .btn {
    display:inline-block; text-decoration:none; cursor:pointer;
    font-family:"m5x7", monospace; font-size:32px; line-height:1;
    color:var(--bone); text-align:center;
    appearance:none; -webkit-appearance:none;  /* keep native <button> chrome from overriding the plate */
    background:none;
    border:24px solid transparent;
    border-image:url("art/button-crypt-green.png") 12 fill stretch;
    image-rendering:pixelated;
    padding:0 16px 4px;           /* the plate art carries its own bottom lip */
    min-width:160px;
  }
  .btn:hover, .btn:focus-visible { filter:brightness(1.15); }
  .btn:active { transform:translateY(2px); filter:brightness(.95); }
  .btn:focus-visible { outline:2px solid var(--ember); outline-offset:4px; }
  .btn.stone { border-image-source:url("art/button-crypt.png"); }
  .cta-note { margin-top:16px; font-size:16px; color:var(--dim); letter-spacing:1px; }

  /* ---------- hero (surface) ---------- */
  .hero .wrap { padding-top:80px; padding-bottom:0; text-align:center; }
  .hero-glow {
    position:absolute; inset:0 0 auto 0; height:420px; z-index:1; pointer-events:none;
    background:radial-gradient(closest-side at 50% 0, rgba(230,158,0,.14), transparent 78%);
  }
  .whisper { font-size:16px; letter-spacing:2px; color:var(--dim); }
  .hero h1 {
    font-size:48px; line-height:.95; color:var(--bone);
    margin:24px 0 16px; text-shadow:0 6px 0 rgba(0,0,0,.55);
  }
  .hero .pitch { color:var(--dim); max-width:560px; margin:0 auto 40px; }
  .hero .pitch strong { color:var(--bone); font-weight:normal; }
  #rollo { margin:0 auto; width:96px; height:96px; }
  .descend-hint { margin:64px 0 8px; display:flex; flex-direction:column; align-items:center; gap:8px;
    font-size:16px; letter-spacing:4px; color:var(--dim); }
  .descend-hint img { width:32px; height:32px; transform:rotate(90deg); animation:bob .9s steps(2) infinite alternate; }
  @keyframes bob { from { transform:rotate(90deg) translateX(0); } to { transform:rotate(90deg) translateX(8px); } }

  /* dice shelf sitting on the surface floor */
  .shelf { position:relative; z-index:2; padding-top:24px; }
  .shelf .dice { position:relative; z-index:2; display:flex; justify-content:center; align-items:flex-end; gap:16px;
    transform:translateY(22px); }
  .shelf .dice img { width:96px; height:96px; }
  .shelf .floor {
    height:72px; border-top:4px solid #000;
    background:url("art/dungeon-floor.png") repeat; background-size:440px 956px;
    image-rendering:pixelated;
    box-shadow:inset 0 10px 0 rgba(0,0,0,.35);
  }
  .m-hide { display:none; }
  @media (min-width:760px) {
    .m-hide { display:block; }
  }

  /* ---------- depth 1 : the bones ---------- */
  .die-run { display:flex; flex-wrap:wrap; gap:8px; margin:40px 0 8px; }
  .die-run img { width:64px; height:64px; }
  .caption { font-size:16px; color:var(--dim); letter-spacing:1px; margin-bottom:48px; }
  .specials { display:grid; grid-template-columns:repeat(3, max-content); gap:24px 32px; margin:40px 0 48px; }
  @media (min-width:760px) { .specials { grid-template-columns:repeat(6, max-content); } }
  .specials figure { display:flex; flex-direction:column; align-items:center; gap:8px; }
  .specials img { width:96px; height:96px; }
  .specials figcaption { font-size:16px; letter-spacing:2px; color:var(--dim); }
  .stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; }
  @media (min-width:760px) { .stats { grid-template-columns:repeat(4, 1fr); } }
  .stat { border:2px solid var(--hairline); background:rgba(28,24,21,.6); padding:20px 16px 16px; text-align:center; }
  .stat b { display:block; font-weight:600; font-size:48px; line-height:1; color:var(--bone); }
  .stat i { font-style:normal; font-size:16px; letter-spacing:2px; color:var(--dim); }
  .stat small { display:block; font-size:16px; color:var(--ember); margin-top:4px; }

  /* ---------- depth 2 : footage ---------- */
  .footage { display:flex; flex-wrap:wrap; gap:48px; align-items:center; justify-content:center; }
  .phone {
    background:#1d1712; padding:12px 12px 36px; position:relative;
    box-shadow:inset 0 0 0 2px #000, 0 16px 0 rgba(0,0,0,.35);
    clip-path:polygon(0 12px,12px 12px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,
      100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,
      12px 100%,12px calc(100% - 12px),0 calc(100% - 12px));
  }
  .phone::after { /* home slit */
    content:""; position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
    width:64px; height:8px; background:#0b0806;
  }
  .screen {
    width:280px; aspect-ratio:590/1280; position:relative; overflow:hidden; background:#08070a;
  }
  .screen video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
  .screen video.gone { display:none; }
  .sealed {
    position:absolute; inset:0; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
    text-align:center; padding:24px;
    background:linear-gradient(rgba(4,5,9,.62), rgba(4,5,9,.62)),
      url("art/dungeon-floor.png") repeat; background-size:auto, 440px 956px;
    image-rendering:pixelated; box-shadow:inset 0 0 0 2px #000, inset 0 0 96px rgba(0,0,0,.8);
  }
  .sealed img { width:96px; height:96px; image-rendering:pixelated; }
  .sealed .kicker { color:var(--ember); }
  .beats { max-width:400px; display:flex; flex-direction:column; gap:32px; }
  .beat { border-left:2px solid var(--hairline); padding-left:20px; }
  .beat p { color:var(--dim); }
  .beat p strong { color:var(--bone); font-weight:normal; }

  /* ---------- depth 3 : the goods ---------- */
  .shopkeep { display:flex; gap:24px; align-items:center; margin-bottom:48px; flex-wrap:wrap; }
  .shopkeep img { width:96px; height:96px; }
  .shopkeep p { color:var(--dim); max-width:520px; }
  .shopkeep p strong { color:var(--bone); font-weight:normal; }
  .gold { color:var(--gold); }
  .panels { display:grid; gap:24px; }
  @media (min-width:760px) { .panels { grid-template-columns:1fr 1fr; } .panel.wide { grid-column:1 / -1; } }
  .panel { border:2px solid var(--hairline); background:rgba(28,24,21,.55); padding:32px 24px; }
  .panel h3 { font-weight:600; font-size:24px; margin-bottom:4px; }
  .panel .count { font-size:16px; letter-spacing:2px; color:var(--ember); margin-bottom:16px; }
  .panel p { font-size:16px; color:var(--dim); margin-bottom:24px; max-width:560px; }
  .icon-row { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
  .icon-row img { width:64px; height:64px; }
  .icon-row img.tall { width:64px; height:96px; }

  /* ---------- depth 4 : records ---------- */
  .cards { display:flex; flex-wrap:wrap; gap:24px; margin:48px 0; }
  .card {
    flex:1 1 148px; max-width:220px; min-width:148px;
    border:2px solid var(--hairline); background:var(--slate);
    padding:24px 16px 20px; text-align:center;
  }
  .card .art { height:144px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
  .card .art img { image-rendering:pixelated; }
  .card h3 { font-weight:600; font-size:24px; line-height:1.1; }
  .card .type { font-size:16px; letter-spacing:2px; color:var(--ember); margin:8px 0; }
  .card .flavor { font-size:16px; color:var(--dim); }

  /* ---------- the deep + the form ---------- */
  .deep .wrap { text-align:center; padding-top:128px; padding-bottom:112px; }
  .deep h2.display { font-size:48px; color:var(--bone); margin-bottom:24px; text-shadow:0 6px 0 rgba(0,0,0,.7); }
  @media (min-width:760px) { .deep h2.display { font-size:64px; } }
  .deep .body { margin:0 auto 48px; }
  .deep .stamp { font-size:32px; color:var(--ember); letter-spacing:2px; margin-top:56px; }
  .deep #wisp { margin:0 auto 32px; width:96px; height:96px; }
  .join { max-width:560px; margin:0 auto; }
  .join label { display:block; margin-bottom:16px; letter-spacing:1px; }
  .join .row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .join input[type="email"] {
    flex:1 1 240px; min-width:240px;
    font-family:"m5x7", monospace; font-size:32px; line-height:1; color:var(--bone);
    background:rgba(28,24,21,.8); border:2px solid var(--hairline); padding:20px 16px 24px;
  }
  .join input[type="email"]::placeholder { color:#5f564a; }
  .join input[type="email"]:focus { outline:none; border-color:var(--ember); }
  .join .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
  .form-note { min-height:24px; margin-top:24px; font-size:16px; letter-spacing:1px; color:var(--ember); }
  .form-note.err { color:var(--rerolls); }

  /* ---------- footer ---------- */
  footer { background:#030202; border-top:2px solid var(--hairline); }
  footer .wrap { max-width:880px; margin:0 auto; padding:40px 24px 48px; text-align:center; }
  footer p { font-size:16px; color:var(--dim); letter-spacing:1px; }
  footer p + p { margin-top:8px; }

  /* ---------- descent rail ---------- */
  .rail { display:none; }
  @media (min-width:1100px) {
    .rail {
      display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
      position:fixed; z-index:10; right:32px; top:50%; transform:translateY(-50%);
      height:64vh; min-height:400px;
    }
    .rail .line {
      position:absolute; right:11px; top:0; bottom:0; width:2px; background:var(--hairline);
    }
    .rail .fill {
      position:absolute; right:11px; top:0; width:2px; height:0; background:var(--ember);
    }
    .rail a {
      position:relative; z-index:1; display:flex; align-items:center; gap:12px;
      text-decoration:none; font-size:16px; letter-spacing:2px; color:var(--dim);
    }
    /* 8px square centered on the 2px line (line center sits 12px from the rail's right edge) */
    .rail a::after { content:""; width:8px; height:8px; margin-right:8px; background:var(--hairline); box-shadow:0 0 0 4px var(--ground); }
    .rail a.live { color:var(--ember); }
    .rail a.live::after { background:var(--ember); }
    .rail a:hover { color:var(--bone); }
  }

  /* ---------- reveals (transform-only: content is never invisible) ---------- */
  html.js .rev { transform:translateY(24px); transition:transform .55s ease-out; }
  html.js .rev.on { transform:none; }

  /* ---------- reduced motion pins everything ---------- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation:none !important; transition:none !important; }
    html.js .rev { transform:none; }
  }