/* ==========================================================================
   Pixelands — "Dig Down" homepage
   The page is a core sample. You start in the sky and the scroll takes you
   down through soil, stone, the ore seam and the deep, out at bedrock.
   Every band is a real block texture from the client's own atlas.

   Loads AFTER site.css and only restyles the homepage. Interior pages
   (privacy, terms, support…) keep site.css untouched.
   ========================================================================== */

.dig {
  /* strata — each band's ground colour, sampled from its own tile */
  --sky-hi:   #7fc3ff;
  --sky-lo:   #3f93da;
  --soil:     #4a2f18;
  --stone:    #2b2a38;
  --seam:     #4a2e17;
  --deep:     #1c1730;
  --bedrock:  #08070d;

  --gold:     #ffc94a;
  --gold-dk:  #a9761a;
  --paper:    #f2eee6;
  --dim:      #b9b3cc;
  --dimmer:   #7d7896;
  --rule:     rgba(255,255,255,.14);

  --ink:      #0f2941;   /* type on the bright sky band */
  --tile:     64px;

  --display: "Lilita One", "Segoe UI", system-ui, sans-serif;
  --body:    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  background: var(--bedrock);
  color: var(--paper);
  font-family: var(--body);
}

/* Lilita One is the display face shipped inside the client. Self-hosted so
   the homepage has no third-party font dependency. */
@font-face {
  font-family: "Lilita One";
  src: url("../fonts/LilitaOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

.dig h1, .dig h2, .dig h3, .dig .rd-lg {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .01em;
  margin: 0;
  text-wrap: balance;
}
.dig .rd { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dig img { image-rendering: pixelated; }

/* ---------- depth gauge -------------------------------------------------
   Reads the scroll as metres. Fixed to the left gutter, and only shown
   where there is genuinely room beside the 940px measure. */
.dig-gauge {
  position: fixed; left: 16px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: none; width: 90px;
  background: rgba(14,12,22,.92);
  border: 2px solid #3b3752; border-radius: 10px;
  padding: 11px 8px; text-align: center;
}
.dig-gauge b {
  display: block; font-family: var(--mono); font-size: 21px;
  color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.dig-gauge span {
  display: block; font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dimmer); margin-top: 3px;
}
.dig-gauge .rail {
  height: 96px; width: 4px; margin: 11px auto 0;
  background: #2a2740; border-radius: 99px; position: relative;
}
.dig-gauge .rail i {
  position: absolute; left: -3px; top: 0; width: 10px; height: 10px;
  border-radius: 50%; background: var(--gold);
  transition: top .12s linear;
}
@media (min-width: 1210px) { .dig-gauge { display: block; } }

/* ---------- band scaffolding -------------------------------------------- */
.dig-band { position: relative; padding: 84px 24px; }
.dig-band > .in { max-width: 940px; margin: 0 auto; position: relative; z-index: 2; }
/* No rule dividing one band from the next. That 4px black line existed to separate six DIFFERENT
   strata textures, each of which stopped where the next began. The ocean is one continuous scene
   behind all of them now, so a hard line across it cuts the water in half at every section --
   the levels are marked by their own plates (LEVEL 1 / SHALLOW CAVERNS) and by the backdrop
   deepening as you scroll, which is the honest way to show a descent. */

/* ==========================================================================
   MINE LEVELS
   Each band is a rendered mine level, not a texture. web/tools/build-mine-strips.py
   builds an actual block world per level -- solid rock in that level's own mix,
   tunnels carved by the same downward-biased random walk the server uses, the
   cave background showing behind the gaps, ore veins, stalactites, cobwebs,
   hazard barriers, lit torches -- and bakes the mine's lighting into it. The
   strips tile on both axes, so a band of any height is a continuous world.

     Level 0  Surface Mine       Carbonite
     Level 1  Shallow Caverns    Gold
     Level 2  Deep Mines         Diamond
     Level 3  The Abyss          Ruby
     Level 5  The Twilight Zone  Crystal
     Level 6  Silent Abyss       Aetherium

   The copy then sits in the client's own HUD panel -- #1e1b2a fill, 3px
   #c9c6e4 rounded stroke, sampled from spr_hud_panel -- because that is how
   the game composites UI: a panel floating over the world, not text on rock.
   ========================================================================== */

/* THE BACKGROUND IS THE FISHING MINI-GAME. #ocean is one fixed canvas behind the whole page
   (assets/js/ocean.js) drawing the descent view: a channel of water walled with real game blocks,
   narrowing with depth, hazards growing off the walls, fish swimming between them.

   So the bands are TRANSPARENT now -- they are the HUD panels floating over that scene, which is
   exactly what the mini-game looks like. background-color is the fallback the canvas would leave
   behind if JS is off or the art 404s, so it stays a plausible deep-water blue rather than black. */
.mine {
  position: relative;
  background: transparent;   /* the #ocean canvas below is the background; an opaque colour here hides it
                                outright. The deep-water fallback lives on #ocean itself, BEHIND the page,
                                so a JS-off visitor still gets water rather than a black band. */
  image-rendering: pixelated;
}

/* Fixed, so the scene sits still while the panels scroll over it -- you are descending past the
   water rather than dragging it with you. Behind everything (z-index 0; .mine > .in is 3) and
   inert to the pointer. The hero and footer paint their own opaque backgrounds and so cover it. */
#ocean {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  opacity: 0; transition: opacity .45s ease;
  background: rgb(46, 99, 133);
}
#ocean.on { opacity: 1; }

/* Seats the panel in the world. HALVED when the tiled strips were replaced by the world render:
   half its old job was breaking up the repeat's seams, and there is no repeat any more -- and the
   render is a screenshot of a mine with the game's own darkness already baked in, so the old values
   were a second cave layer on top of a cave and the world stopped reading as anything at all. */
.mine::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 88% 80% at 50% 50%, transparent 62%, rgba(4,20,34,.20) 100%);
}

/* the panel: the client's HUD chrome, floating over the level */
.mine > .in {
  position: relative; z-index: 3;
  max-width: 840px;                 /* narrower than the 940 measure: the level
                                       has to be visible either side of the panel
                                       or there is no point rendering it */
  background: rgba(30,27,42,.93);
  border: 3px solid #c9c6e4;
  border-radius: 12px;
  padding: 34px 38px 38px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
@media (max-width: 640px) {
  .mine > .in { padding: 24px 20px 26px; border-width: 2px; border-radius: 9px; }
}

/* the level plate, hung on the panel's top edge like a world sign */
.mine-level {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  background: #14121e; border: 2px solid #c9c6e4; border-radius: 6px;
  padding: 6px 12px; margin: -50px 0 20px;
}
.mine-level b { font-weight: 400; color: #fff2cf; }
.mine-level i {
  width: 18px; height: 18px; font-style: normal; flex: none;
  background: var(--ore) center / contain no-repeat;
  image-rendering: pixelated;
}

/* --- the levels ------------------------------------------------------- */
/* --world is gone: the ocean canvas is the background for every band now. --ore stays -- it is the
   little icon on the level plate, naming that level's ore, and has nothing to do with the backdrop. */
.mine-l0 { --ore: url("../img/mine/ore-carbonite.png"); }
.mine-l1 { --ore: url("../img/mine/ore-gold.png"); }
.mine-l2 { --ore: url("../img/mine/ore-diamond.png"); }
.mine-l3 { --ore: url("../img/mine/ore-ruby.png"); }
.mine-l5 { --ore: url("../img/mine/ore-crystal.png"); }
.mine-l6 { --ore: url("../img/mine/ore-aether.png"); }

/* ---------- sky: the surface you are standing on before you dig --------- */
.dig-sky {
  /* No background: #ocean paints this band's sky, forest and terrain as one scene so the world
     build can sit in front of the trees and behind the headline. See drawHero() in ocean.js. */
  background: transparent;
  color: var(--ink);
  padding: 22px 24px 148px;
  overflow: hidden;
}
.dig-sky::before {
  display: block; z-index: 2;
  background: linear-gradient(100deg,
    rgba(196,228,255,.94) 0%, rgba(196,228,255,.66) 40%, rgba(196,228,255,0) 70%);
}
/* the pixel forest horizon, then a grass lip the soil band butts against */
/* .forest and .lip are drawn on the canvas now (drawHero), not as DOM layers -- the world build has
   to render between them and the headline. The elements stay in the markup as the no-canvas
   fallback; ocean.js hides them once it has actually started drawing. */
.dig-sky .forest {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: url("../img/hero.png") center bottom / cover no-repeat;
  image-rendering: pixelated; opacity: .96; z-index: 1;
  -webkit-mask-image: linear-gradient(transparent, #000 32%);
          mask-image: linear-gradient(transparent, #000 32%);
}
.dig-sky .lip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 3;
  background: url("../img/tiles/grass-top.png") 0 0 / var(--tile) var(--tile) repeat-x;
  image-rendering: pixelated;
}
.dig-sky > .in { z-index: 4; }
/* canvas is live: the DOM sky furniture would only double up on what it draws */
.ocean-on .dig-sky { background: transparent; }
.ocean-on .dig-sky .forest,
.ocean-on .dig-sky .lip { display: none; }

.dig-nav {
  max-width: 940px; margin: 0 auto 46px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  position: relative; z-index: 5;
}
.dig-nav .brand { margin-right: auto; display: block; }
.dig-nav .brand img { height: 34px; width: auto; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.dig-nav a {
  font-family: var(--display); font-size: 15px; color: #0c2740;
  text-decoration: none; padding: 4px 2px; border-bottom: 3px solid transparent;
}
.dig-nav a:hover, .dig-nav a[aria-current="page"] { border-bottom-color: #0c2740; }

.dig-sky h1 {
  font-size: clamp(40px, 7vw, 78px); line-height: .95;
  text-shadow: 0 4px 0 rgba(255,255,255,.32);
}
.dig-lead {
  font-size: 19px; line-height: 1.5; max-width: 42ch;
  color: #0d2740; margin: 18px 0 0; font-weight: 600;
}
.dig-sub { font-size: 16px; line-height: 1.6; max-width: 52ch; color: #0c2740; margin: 12px 0 0; }
.dig-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.dig-note { font-size: 14px; color: #0c2740; font-weight: 600; margin: 20px 0 0; }

/* ---------- the button: flat face, hard offset shadow, real press -------- */
.dig-btn {
  display: inline-block; cursor: pointer;
  font-family: var(--display); font-size: 17px; letter-spacing: .02em;
  background: var(--gold); color: #3a2a05; text-decoration: none;
  border: 3px solid #0e0c16; border-radius: 4px;
  padding: 12px 24px;
  box-shadow: 5px 5px 0 #0e0c16;
  transition: transform .08s ease, box-shadow .08s ease;
}
.dig-btn:hover { text-decoration: none; }
.dig-btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #0e0c16; }
.dig-btn.alt { background: var(--paper); color: #0e0c16; }
.dig-btn.on-dark { border-color: #000; box-shadow: 5px 5px 0 #000; }

/* ---------- band headings ----------------------------------------------- */
.dig-layer {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(255,201,74,.42); border-radius: 4px;
  padding: 5px 11px; margin-bottom: 18px;
}
.dig-band h2 { font-size: clamp(29px, 4.4vw, 46px); line-height: 1.02; }
.dig-intro { font-size: 17px; line-height: 1.65; color: var(--dim); max-width: 62ch; margin: 16px 0 0; }

/* ---------- feature rows ------------------------------------------------ */
.dig-rows { display: grid; gap: 2px; margin-top: 32px; border: 2px solid var(--rule); }
.dig-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 18px; align-items: center;
  padding: 17px 19px; background: rgba(10,9,16,.74);
  transition: background .15s ease;
}
.dig-row:hover { background: rgba(255,201,74,.10); }
.dig-row img { width: 48px; height: 48px; }
.dig-row h3 { font-size: 20px; }
.dig-row p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--dim); }
/* --dimmer at 11px lands on ~4.5:1 -- technically AA, too tight to read
   comfortably at that size. --dim takes it to ~8:1 for nothing. */
.dig-row .rd { font-size: 11px; color: var(--dim); letter-spacing: .1em; white-space: nowrap; }
@media (max-width: 640px) {
  .dig-row { grid-template-columns: 48px 1fr; gap: 14px; }
  .dig-row .rd { display: none; }
}

/* ---------- platforms --------------------------------------------------- */
.dig-plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
@media (max-width: 780px) { .dig-plats { grid-template-columns: 1fr; } }
.dig-plat {
  background: rgba(10,9,16,.82); border: 2px solid var(--rule);
  padding: 20px; display: flex; flex-direction: column;
}
.dig-plat .rd {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  display: block; margin-bottom: 9px; color: var(--gold);
}
.dig-plat .rd.soon { color: var(--dimmer); }
.dig-plat h3 { font-size: 22px; }
.dig-plat p { font-size: 14.5px; color: var(--dim); line-height: 1.55; margin: 9px 0 18px; }
.dig-plat .dig-btn { margin-top: auto; align-self: flex-start; font-size: 15px; padding: 10px 18px; }
.dig-plat .dig-btn[aria-disabled="true"] {
  background: #2a2740; color: var(--dim); box-shadow: 5px 5px 0 #000; cursor: default;
}
.dig-plat .dig-btn[aria-disabled="true"]:active { transform: none; box-shadow: 5px 5px 0 #000; }

/* ---------- notices ----------------------------------------------------- */
.dig-notice {
  margin-top: 22px; padding: 18px 20px;
  background: rgba(10,9,16,.7); border-left: 4px solid var(--gold);
  font-size: 15px; line-height: 1.6; color: var(--dim);
}
.dig-notice p { margin: 0; }
.dig-notice p + p { margin-top: 10px; }
.dig-notice strong { color: var(--paper); }
.dig-notice a { color: var(--gold); }

/* ---------- community --------------------------------------------------- */
.dig-contacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
@media (max-width: 900px) { .dig-contacts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dig-contacts { grid-template-columns: 1fr; } }
.dig-contact { background: rgba(10,9,16,.82); border: 2px solid var(--rule); padding: 17px; }
.dig-contact h3 { font-size: 18px; }
.dig-contact p { font-size: 13.5px; color: var(--dim); line-height: 1.5; margin: 6px 0 10px; }
.dig-contact a { color: var(--gold); font-size: 14px; word-break: break-word; }

/* ---------- bedrock + footer -------------------------------------------- */
.dig-bedrock {
  background: var(--bedrock); border-top: 4px solid #1a1826;
  padding: 68px 24px 54px; text-align: center;
}
.dig-bedrock h2 { font-size: clamp(27px, 4vw, 42px); }
.dig-bedrock p { color: var(--dimmer); max-width: 50ch; margin: 14px auto 0; font-size: 15px; line-height: 1.6; }
.dig-bedrock .dig-cta { justify-content: center; margin-top: 28px; }

.dig-foot { background: var(--bedrock); padding: 0 24px 56px; }
.dig-foot .in { max-width: 940px; margin: 0 auto; }
.dig-foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px;
  padding-top: 44px; border-top: 1px solid #1e1b2c;
}
@media (max-width: 780px) { .dig-foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
.dig-foot-brand img { height: 30px; width: auto; margin-bottom: 12px; }
.dig-foot-brand p { color: var(--dimmer); font-size: 14px; line-height: 1.6; margin: 0; max-width: 34ch; }
.dig-foot h4 {
  font-family: var(--display); font-weight: 400; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--paper); margin: 0 0 12px;
}
.dig-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dig-foot a { color: var(--dimmer); font-size: 14px; text-decoration: none; }
.dig-foot a:hover { color: var(--gold); text-decoration: underline; }
.dig-foot-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid #1e1b2c;
  color: var(--dimmer); font-size: 13.5px;
}

/* ---------- focus + motion ---------------------------------------------- */
.dig a:focus-visible, .dig .dig-btn:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px;
}
.dig-sky a:focus-visible { outline-color: #0e0c16; }

@media (prefers-reduced-motion: reduce) {
  .dig *, .dig *::before, .dig *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   INTERIOR PAGES
   Downloads, support, legal and the rest reuse the existing site.css markup
   verbatim — nothing in those files changes but the <body> class and one
   <link>. What follows restyles those classes into the Dig Down language.

   Concept: the homepage is the descent, so every interior page sits BELOW the
   surface. The sticky header carries the grass fringe along its bottom edge —
   the grass line is up there, and you are reading from under it.

   Specificity note: `.dig h1, .dig h2, .dig h3` above sets `margin: 0`, which
   is right for the homepage components but would collapse the spacing in
   long-form copy. Interior headings therefore restate their margins at
   `.dig <ctx> h*` (0,2,1), which outranks it.
   ========================================================================== */

/* ---------- header: the grass line, above you --------------------------- */
.dig .site-head {
  background: rgba(14,12,22,.94);
  border-bottom: 0;
  padding-bottom: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
}
.dig .site-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: url("../img/tiles/grass-edge.png") 0 0 / 64px 18px repeat-x;
  image-rendering: pixelated;
}
.dig .site-head .wrap { position: relative; z-index: 1; }
.dig .site-head .brand img { height: 26px; width: auto; }
.dig .nav a {
  font-family: var(--display); font-weight: 400; font-size: 15px;
  color: var(--dim); letter-spacing: .01em;
  border-bottom: 3px solid transparent; padding-bottom: 2px;
}
.dig .nav a:hover { color: var(--paper); text-decoration: none; }
.dig .nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- page head: the first stratum under the grass ---------------- */
.dig .page-head {
  position: relative;
  background: var(--soil) url("../img/tiles/soil.png") 0 0 / var(--tile) var(--tile);
  border-bottom: 4px solid rgba(0,0,0,.55);
  padding: 64px 0 52px;
}
.dig .page-head::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(10,9,16,.62), rgba(10,9,16,.84));
}
.dig .page-head .wrap { position: relative; z-index: 1; }
.dig .page-head h1 { font-size: clamp(30px, 4.6vw, 46px); margin: 0 0 12px; line-height: 1.02; }
.dig .page-head .updated {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin: 0;
}

/* ---------- ground ------------------------------------------------------ */
.dig .doc, .dig .section { background: var(--bedrock); }
.dig .section-alt {
  background: #100e18; border-top: 1px solid #1e1b2c; border-bottom: 1px solid #1e1b2c;
}
/* Long-form copy gets no tile behind it. A texture under 400 lines of terms is
   noise, and the descent has already been made on the way in. */
.dig .doc { padding: 52px 0 92px; }
.dig .doc h2 { font-family: var(--display); font-size: 25px; margin: 2.4em 0 .6em; letter-spacing: .01em; }
.dig .doc h2:first-child { margin-top: 0; }
.dig .doc h3 { font-family: var(--display); font-size: 19px; margin: 1.9em 0 .5em; letter-spacing: .01em; }
.dig .doc li::marker { color: var(--gold); }
.dig .doc p, .dig .doc li { color: #cfcadf; }

.dig .section h2 { font-size: clamp(26px, 3.6vw, 36px); margin: 0 0 12px; }
.dig .section .kicker {
  font-family: var(--mono); font-weight: 400; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
}
.dig .section .intro { color: var(--dim); }

/* ---------- surfaces: flat fill, 2px rule, square corners --------------- */
.dig .card,
.dig .contact-card,
.dig .toc,
.dig details.faq {
  background: rgba(255,255,255,.035);
  border: 2px solid var(--rule);
  border-radius: 4px;
}
.dig .card h3, .dig .contact-card h3 { font-family: var(--display); font-size: 19px; margin: 0 0 8px; }
.dig .card p, .dig .contact-card p { color: var(--dim); }
.dig .card .ico {
  background: rgba(255,255,255,.06); border: 2px solid var(--rule);
  border-radius: 4px; width: 42px; height: 42px;
}
.dig .contact-card a { color: var(--gold); }

.dig .notice {
  background: rgba(255,255,255,.035);
  border: 0; border-left: 4px solid var(--gold); border-radius: 0;
  padding: 18px 22px;
}
.dig .notice.green { border-left-color: #52d67a; }
.dig .notice.red   { border-left-color: #f2555a; }
.dig .notice strong { color: var(--paper); }

.dig .toc h2 {
  font-family: var(--mono); font-size: 11px !important;
  letter-spacing: .16em; color: var(--gold); margin: 0 0 12px !important;
}
.dig .toc a { color: #cfcadf; }
.dig .toc a:hover { color: var(--gold); }

.dig details.faq summary {
  font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .01em;
}
.dig details.faq summary::after { color: var(--gold); }
.dig details.faq .faq-body { color: var(--dim); }

/* ---------- steps: numbered because these ARE a sequence ---------------- */
.dig .steps > li::before {
  font-family: var(--display); font-weight: 400; font-size: 16px;
  background: var(--gold); color: #3a2a05;
  border-radius: 4px; border: 2px solid #0e0c16;
}
.dig .steps h3 { font-family: var(--display); font-size: 18px; margin: 0 0 .3em; }
.dig .steps p { color: var(--dim); }

/* ---------- tables ------------------------------------------------------ */
.dig .doc table { font-size: 15px; }
.dig .doc th, .dig .doc td { border: 1px solid var(--rule); }
.dig .doc th {
  background: rgba(255,255,255,.06); font-family: var(--display);
  font-weight: 400; letter-spacing: .02em; color: var(--paper);
}
.dig .doc td { color: var(--dim); }
.dig .doc td:first-child { color: var(--paper); }

/* ---------- buttons: the same press as the homepage --------------------- */
.dig .btn {
  font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .02em;
  border-radius: 4px; border: 3px solid #0e0c16;
  box-shadow: 5px 5px 0 #0e0c16;
  transition: transform .08s ease, box-shadow .08s ease;
}
.dig .btn:hover { text-decoration: none; }
.dig .btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #0e0c16; }
/* a.btn beats the `.dig .section a` link colour below, which would otherwise
   paint gold text on a gold button */
.dig a.btn-primary, .dig .btn-primary { background: var(--gold); color: #3a2a05; }
.dig a.btn-ghost, .dig .btn-ghost { background: rgba(255,255,255,.06); color: var(--paper); }
/* not a real disabled control -- it states iOS availability, so it has to
   clear AA like any other text (--dimmer only managed 3.42:1 here) */
.dig .btn[aria-disabled="true"] { background: #2a2740; color: var(--dim); }
.dig .btn[aria-disabled="true"]:active { transform: none; box-shadow: 5px 5px 0 #0e0c16; }
/* the offset shadow needs room the old flat buttons did not */
.dig .btn + .btn { margin-left: 14px; }
.dig .dl-card .btn { margin-bottom: 5px; }

/* ---------- downloads --------------------------------------------------- */
.dig .dl-card.is-live { border-color: var(--gold); }
.dig .dl-meta { border-top: 1px solid var(--rule); color: var(--dim); }
.dig .dl-meta b { color: var(--paper); }
.dig .hash {
  background: rgba(0,0,0,.45); border: 1px solid var(--rule);
  border-radius: 4px; color: var(--dim);
}

/* ---------- forms ------------------------------------------------------- */
.dig input[type="text"], .dig input[type="email"], .dig textarea, .dig select {
  background: rgba(0,0,0,.45); border: 2px solid var(--rule);
  border-radius: 4px; color: var(--paper);
}
.dig input:focus, .dig textarea:focus, .dig select:focus { border-color: var(--gold); }
.dig .form-row label, .dig fieldset legend {
  font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .01em;
}
.dig .form-row .hint { font-family: var(--body); color: var(--dim); }
.dig .choice label { font-family: var(--body); font-size: 15.5px; }

/* ---------- badges ------------------------------------------------------ */
.dig .badge {
  font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .12em; border-radius: 3px;
  background: rgba(255,255,255,.08); color: var(--dim);
}
.dig .badge.soon { background: rgba(255,201,74,.16); color: var(--gold); }

/* ---------- error pages ------------------------------------------------- */
.dig .error-main { background: var(--bedrock); }
.dig .error-title { font-family: var(--display); font-size: clamp(30px, 5vw, 44px); margin: 0 0 12px; }

/* ---------- footer ------------------------------------------------------ */
.dig .site-foot {
  background: var(--bedrock); border-top: 4px solid #1a1826;
  padding: 52px 0 44px;
}
.dig .site-foot .foot-grid h4 {
  font-family: var(--display); font-weight: 400; font-size: 14px;
  letter-spacing: .1em; color: var(--paper); margin: 0 0 12px;
}
.dig .site-foot .foot-grid a { color: var(--dimmer); }
.dig .site-foot .foot-grid a:hover { color: var(--gold); }
.dig .site-foot .foot-brand p { color: var(--dimmer); }
.dig .site-foot .foot-bottom { border-top: 1px solid #1e1b2c; color: var(--dimmer); }

/* ---------- links ------------------------------------------------------- */
/* :not(.btn) so this never reaches a button label */
.dig .doc a:not(.btn),
.dig .section a:not(.btn),
.dig .notice a:not(.btn) { color: var(--gold); }

@media (max-width: 620px) {
  /* the offset shadow costs real width on a phone */
  .dig .btn { box-shadow: 4px 4px 0 #0e0c16; }
  .dig .btn + .btn { margin-left: 0; margin-top: 12px; }
}

/* ==========================================================================
   WIKI  (/wiki/*)
   Loads site.css -> wiki.css -> dig.css, so this wins over both. wiki.css
   keeps owning the STRUCTURE (grids, the article/infobox split, the sticky
   stack); everything here is only its skin.

   The one thing that is not cosmetic: wiki.css pins .w-subhead to
   `top: 67px`, a hard-coded measurement of the OLD .site-head (66px min-height
   + 1px border). The Dig header is taller because it carries the grass fringe,
   so both sticky offsets are re-derived from --head-h below. Change the
   header's height and only that token needs touching.
   ========================================================================== */

/* FALLBACKS ONLY. The header's real height is not a constant -- the primary
   nav wraps to a second row on a narrow screen -- so wiki.js measures it and
   overwrites both tokens as an inline style on <body>. These values only have
   to be close enough to look right with JavaScript off. */
.dig {
  --head-h: 84px;                                   /* 66 min-height + 18 fringe */
  --stack:  137px;                                  /* --head-h + the 53px subhead */
}
@media (max-width: 620px) { .dig { --head-h: 92px; --stack: 145px; } }

.dig .w-subhead { top: var(--head-h); background: rgba(16,14,24,.94); border-bottom: 1px solid var(--rule); }
.dig .w-panel, .dig .w-article-body h2 { scroll-margin-top: var(--stack); }
.dig .w-infobox { top: calc(var(--stack) + 10px); }

/* ---------- sub-header -------------------------------------------------- */
.dig .w-logo {
  font-family: var(--display); font-weight: 400; font-size: 17px;
  letter-spacing: .04em; color: var(--gold);
}
.dig .w-nav-links a { color: var(--dim); font-weight: 600; }
.dig .w-nav-links a:hover { color: var(--gold); }
.dig .w-nav-toggle { border: 2px solid var(--rule); border-radius: 4px; color: var(--paper); }

/* every wiki text field, one look */
.dig .w-search input,
.dig .w-hero-search input,
.dig .it-filter {
  background: rgba(0,0,0,.45); color: var(--paper);
  border: 2px solid var(--rule); border-radius: 4px;
}
.dig .w-search input:focus,
.dig .w-hero-search input:focus,
.dig .it-filter:focus { border-color: var(--gold); }

/* ---------- breadcrumbs read as a path down ----------------------------- */
.dig .w-crumbs {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--dimmer);
}
.dig .w-crumbs a { color: var(--dim); }
.dig .w-crumbs a:hover { color: var(--gold); }

/* ---------- headings ---------------------------------------------------- */
.dig .w-pagehead h1 { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); margin: 0; }
.dig .w-hero h1 { font-family: var(--display); font-size: clamp(30px, 4.4vw, 44px); margin: 0 0 12px; }
.dig .w-panel > h2, .dig .w-panel-head h2 { font-family: var(--display); font-size: 24px; margin: 0 0 12px; }
.dig .w-article-body h2 {
  font-family: var(--display); font-size: 24px; margin: 32px 0 10px;
  padding-bottom: 8px; border-bottom: 2px solid var(--rule); letter-spacing: .01em;
}
.dig .w-article-body h3 { font-family: var(--display); font-size: 19px; margin: 22px 0 8px; letter-spacing: .01em; }
.dig .w-dir h2 { font-family: var(--display); font-size: 23px; margin: 0 0 14px; }
.dig .it-tablehead { font-family: var(--display); font-weight: 400; font-size: 21px; margin: 18px 0 12px; }
.dig .id-card h2 { font-family: var(--display); font-size: 27px; margin: 0; }
.dig .ib-title {
  font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .02em;
  background: rgba(255,255,255,.07); border-bottom: 2px solid var(--rule);
}
.dig .ws-title { font-family: var(--display); font-weight: 400; font-size: 19px; }

.dig .w-subhead-label, .dig .id-sechead {
  font-family: var(--mono); font-weight: 400; font-size: 11px;
  letter-spacing: .16em; color: var(--gold);
}

/* ---------- the hub hero is a seam, like the homepage's bands ----------- */
.dig .w-hero {
  position: relative; overflow: hidden;
  background: var(--stone) url("../img/tiles/stone.png") 0 0 / var(--tile) var(--tile);
  border: 2px solid var(--rule); border-radius: 4px;
}
.dig .w-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(10,9,16,.42), rgba(10,9,16,.72));
}
.dig .w-hero > * { position: relative; z-index: 1; }
.dig .w-hero-sub { color: #d3cfe2; }

/* ---------- panels and boxes: flat fill, 2px rule, square -------------- */
.dig .w-panel,
.dig .w-infobox,
.dig .id-box,
.dig .it-status {
  background: rgba(255,255,255,.035);
  border: 2px solid var(--rule); border-radius: 4px;
}
.dig .w-panel-intro { color: var(--dim); }
.dig .ib-img, .dig .id-card { background: rgba(0,0,0,.3); border-bottom: 2px solid var(--rule); }
.dig .ib-img { color: var(--gold); }
.dig .id-ico {
  background: rgba(0,0,0,.45); border: 2px solid var(--rule);
  border-radius: 4px; color: var(--gold);
}
.dig .id-flavor, .dig .id-props li { color: var(--dim); }
.dig .id-props strong { color: var(--paper); }
.dig .it-status.warn { border-left: 4px solid var(--gold); }

.dig .w-note {
  background: rgba(255,255,255,.035);
  border: 0; border-left: 4px solid var(--gold); border-radius: 0;
  color: var(--dim);
}
.dig .w-note strong { color: var(--paper); }
.dig .w-lead { color: var(--paper); }

/* ---------- link lists, tiles and tags ---------------------------------- */
.dig .w-linklist a,
.dig .w-tile {
  background: rgba(255,255,255,.05); border: 2px solid var(--rule);
  border-radius: 4px; color: var(--paper);
}
.dig .w-linklist a:hover,
.dig .w-tile:hover { background: rgba(255,201,74,.10); border-color: var(--gold); }
.dig .w-tile .ico { color: var(--gold); }

.dig .w-cats { border-top: 2px solid var(--rule); }
.dig .w-cats .lbl { font-family: var(--mono); font-weight: 400; letter-spacing: .14em; color: var(--gold); }
.dig .w-cats a {
  background: rgba(255,255,255,.05); border: 1px solid var(--rule);
  border-radius: 3px; color: var(--dim);
}
.dig .w-cats a:hover { color: var(--gold); border-color: var(--gold); }

.dig .it-count, .dig .it-rarity, .dig .ws-kind {
  font-family: var(--mono); font-weight: 400; border-radius: 3px;
  background: rgba(0,0,0,.4); border: 1px solid var(--rule); color: var(--dim);
}

/* ---------- buttons: the same press as everywhere else ------------------ */
.dig .w-btn {
  font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .02em;
  background: rgba(255,255,255,.06); color: var(--paper);
  border: 3px solid #0e0c16; border-radius: 4px;
  box-shadow: 4px 4px 0 #0e0c16;
  transition: transform .08s ease, box-shadow .08s ease;
}
.dig .w-btn:hover { background: rgba(255,255,255,.11); }
.dig .w-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #0e0c16; }
.dig a.w-btn.primary, .dig .w-btn.primary { background: var(--gold); color: #3a2a05; }
.dig a.w-btn.primary:hover, .dig .w-btn.primary:hover { background: #ffd76e; }

/* ---------- tables ------------------------------------------------------ */
.dig .w-article-body th, .dig .w-article-body td,
.dig .it-table th, .dig .it-table td { border: 1px solid var(--rule); }
.dig .w-article-body th, .dig .it-table thead th {
  background: rgba(255,255,255,.06); font-family: var(--display);
  font-weight: 400; letter-spacing: .02em; color: var(--paper);
}
.dig .it-table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.dig .it-desc { color: var(--dim); }
.dig .it-ico.ph { background: rgba(255,255,255,.06); border: 1px solid var(--rule); border-radius: 4px; }
.dig .w-infobox th, .dig .w-infobox td,
.dig .id-data th, .dig .id-data td { border-top: 1px solid var(--rule); }
.dig .w-infobox th, .dig .id-data th { color: var(--dim); }
.dig .v-gold { color: var(--gold); }

/* ---------- search results ---------------------------------------------- */
.dig .ws-list li { border-bottom: 1px solid var(--rule); }
.dig .ws-list li:first-child { border-top: 1px solid var(--rule); }
.dig .ws-summary, .dig .ws-snip { color: var(--dim); }
.dig .ws-url { font-family: var(--mono); font-size: 12px; color: var(--dimmer); }
.dig .ws-snip mark { background: rgba(255,201,74,.24); color: var(--paper); }
.dig .w-loading { color: var(--dim); }

@media (max-width: 620px) {
  .dig .w-btn { box-shadow: 3px 3px 0 #0e0c16; }
  .dig .w-btn:active { transform: translate(3px, 3px); }
}