/**
 * DoggyMining — shared theme for the static pages (/, /docs, /sim).
 *
 * Extracted verbatim from the landing page, which is the reference for the
 * game's visual language. It lives in one file because it previously lived in
 * three <style> blocks that drifted: the litepaper and the calculator ended up
 * with smaller section titles, unstyled h3s and prose floating on the backdrop
 * instead of sitting in panels, so they read as a different site.
 *
 * The app (/app) is a Vite bundle with its own src/index.css and does not use
 * this — it shares the language, not the stylesheet.
 */

:root{
  --bg:#071b27;
  --panel:rgba(38,38,38,.92);--card:#343434;--card-lite:#3a3a3a;--border-lite:#8a8a8a;--ink:#171717;
  --off-white:#f2efe9;--grey:#bdbdbd;--dim:#8f8f8f;
  --gold-1:#ffc61a;--gold-2:#ff9d00;--gold-bevel:#c97f00;
  --green:#5ee65e;--green-edge:#2f8f2f;--red:#ff2e57;--blue:#58b7ff;--purple:#b96bff;
  --font-display:'Fira Sans',system-ui,sans-serif;--font-body:'Prompt',system-ui,sans-serif;
  --hard-shadow:0 3px 0 rgba(0,0,0,.35);
  --panel-shadow:0 0 0 4px rgba(20,20,20,.55),0 14px 34px rgba(0,0,0,.35);
  --radius-panel:26px;--radius-card:16px;--radius-btn:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--off-white);font:15px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* the app's backdrop, minus the blur so text stays crisp */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg);pointer-events:none}
.backdrop::before{content:'';position:absolute;inset:0;background:
  radial-gradient(60% 48% at 6% 106%,#17614b 0%,rgba(23,97,75,0) 70%),
  radial-gradient(54% 42% at 94% 102%,#1a6a50 0%,rgba(26,106,80,0) 66%),
  radial-gradient(42% 34% at 30% 110%,#2a7d5c 0%,rgba(42,125,92,0) 70%),
  radial-gradient(48% 38% at 66% 108%,#1d5c46 0%,rgba(29,92,70,0) 68%),
  radial-gradient(70% 42% at 50% -16%,#10475c 0%,rgba(16,71,92,0) 64%)}

.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:20px 20px 90px}
/* Long-form pages set a narrower measure; the chrome stays identical. */
.wrap.reading{max-width:880px}

/* nav */
nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:48px}
nav .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:800;font-style:italic;font-size:19px;color:var(--off-white);text-decoration:none}
nav .brand img{width:34px;height:34px}
nav a.lnk{color:var(--grey);text-decoration:none;font-weight:600;font-size:14px}
nav a.lnk:hover{color:var(--off-white)}
nav .sp{flex:1}

/* chunky gold title, same construction as the app */
.ui-title{position:relative;display:inline-block;margin:0;font-family:var(--font-display);
  font-weight:800;font-style:italic;letter-spacing:.01em;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.38));line-height:1.05}
.ui-title .stroke{position:absolute;inset:0;-webkit-text-stroke:8px #2a2313;color:#2a2313}
.ui-title .fill{position:relative;background:linear-gradient(180deg,var(--gold-2) 8%,var(--gold-1) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.t-xl{font-size:clamp(38px,7.4vw,74px)}
.t-md{font-size:clamp(24px,3.6vw,34px)}
.t-sm{font-size:clamp(19px,2.4vw,23px)}

/* buttons */
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 26px;border-radius:var(--radius-btn);font-family:var(--font-display);
  font-weight:800;font-style:italic;font-size:16px;text-decoration:none;cursor:pointer;
  border:2px solid var(--ink);background:var(--card-lite);color:var(--off-white);box-shadow:var(--hard-shadow);
  transition:transform .12s cubic-bezier(.34,1.56,.64,1)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn.gold{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:#3a2a00;
  border-color:var(--gold-bevel)}
.note{color:var(--dim);font-size:13px;margin-top:12px}

/* panels + sections */
.panel{background:var(--panel);border:2px solid var(--border-lite);border-radius:var(--radius-panel);
  box-shadow:var(--panel-shadow);padding:26px 22px;margin:22px 0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sec{margin-top:64px}
.sec > .ui-title{margin-bottom:6px}
.sub{color:var(--grey);margin:0 0 18px;max-width:66ch}

/* prose inside panels — the litepaper is the heavy user */
.panel > :first-child{margin-top:0}
.panel > :last-child{margin-bottom:0}
p{color:var(--grey);margin:0 0 14px}
p b,li b,td b{color:var(--off-white)}
a{color:var(--gold-1)}
ul{padding-left:20px;color:var(--grey);margin:0 0 14px}
li{margin:7px 0}
h3{font-family:var(--font-display);font-weight:800;font-style:italic;font-size:16.5px;
  margin:22px 0 8px;color:var(--gold-1)}
h3:first-child{margin-top:0}
/* Identifiers read as one token, so they must not split mid-name — `sellMiner()`
   wrapping to `sellMiner` / `()` looks like two different things. Only the long
   hex addresses are allowed to break. */
code{background:#2b2b2b;border:1px solid #4a4a4a;padding:2px 6px;border-radius:6px;
  font-size:13px;color:var(--gold-1);white-space:nowrap}
code.addr{white-space:normal;word-break:break-all}

/* stat + step + dog grids */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--card);border:2px solid var(--ink);border-radius:var(--radius-card);
  padding:18px;box-shadow:var(--hard-shadow)}
.card .big{display:block;font-family:var(--font-display);font-weight:800;font-style:italic;
  font-size:32px;line-height:1.1;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.card h3{margin:6px 0 4px;font-family:var(--font-display);font-weight:700;font-style:normal;
  font-size:16px;color:var(--off-white)}
.card p{margin:0;color:var(--grey);font-size:14px}

/* accented callout cards — a coloured spine, used for asides */
.card.spine{border-left-width:5px;padding-bottom:4px}
.card.spine > :last-child{margin-bottom:14px}
.card.spine.good{border-left-color:var(--green)}
.card.spine.warn{border-left-color:var(--red)}
.card.spine.info{border-left-color:var(--blue)}
.card.spine.gold{border-left-color:var(--gold-1)}

.step{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:2px solid var(--ink);
  border-radius:var(--radius-card);padding:16px;box-shadow:var(--hard-shadow)}
.step .n{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-style:italic;font-size:16px;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:#3a2a00;border:2px solid var(--gold-bevel)}
.step h3{margin:2px 0 4px;font-family:var(--font-display);font-style:normal;font-size:16px;
  font-weight:700;color:var(--off-white)}
.step p{margin:0;color:var(--grey);font-size:14px}

.dogs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.dogcard{background:var(--card);border:2px solid var(--ink);border-radius:var(--radius-card);
  padding:10px;text-align:center;box-shadow:var(--hard-shadow)}
.dogcard img{width:100%;aspect-ratio:1/.8;object-fit:cover;object-position:center top;
  border-radius:11px;display:block;margin-bottom:9px;background:#1a1730}
.dogcard .nm{display:block;font-family:var(--font-display);font-weight:700;font-size:14.5px}
.dogcard .sp{display:block;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}

/* tables */
.scrollx{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid rgba(138,138,138,.28)}
th{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:600}
td{color:var(--grey)}
td.num{font-variant-numeric:tabular-nums;color:var(--off-white);text-align:right}
th.num{text-align:right}
td.no{color:var(--green);font-weight:600}
td.yes{color:var(--gold-1);font-weight:600}

/* form controls */
label{display:block;font-size:12.5px;color:var(--dim);margin:16px 0 6px}
input{width:100%;background:#2b2b2b;border:2px solid var(--ink);border-radius:11px;
  padding:12px 14px;color:var(--off-white);font:inherit;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.32)}
input:focus{outline:none;border-color:var(--gold-1)}

.toggle{display:flex;gap:8px;flex-wrap:wrap}
.toggle button{font:inherit;font-family:var(--font-display);font-weight:700;font-size:13.5px;
  cursor:pointer;padding:10px 16px;border-radius:var(--radius-btn);border:2px solid var(--ink);
  background:var(--card-lite);color:var(--grey);box-shadow:var(--hard-shadow);
  transition:transform .12s cubic-bezier(.34,1.56,.64,1)}
.toggle button:hover{transform:translateY(-2px)}
.toggle button.on{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  color:#3a2a00;border-color:var(--gold-bevel)}
.toggle button:focus-visible{outline:2px solid var(--gold-1);outline-offset:3px}

.warn{border-color:rgba(255,46,87,.5)}
.warn p{color:var(--grey);margin:0}
.warn b{color:var(--off-white)}

.foot{margin-top:70px;padding-top:22px;border-top:1px solid rgba(138,138,138,.25);
  color:var(--dim);font-size:13px}
.foot a{color:var(--gold-1)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero p.lede{margin-left:auto;margin-right:auto}
  .cta{justify-content:center}
  .ui-title .stroke{-webkit-text-stroke-width:6px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}