/* ============================================================
   DUNGEONCOIN WHITEPAPER v1.0
   Tokens, three layers. Components consume the semantic layer
   only; zero hardcoded hex below the semantic block.

   This surface is the LIT state of the landing page's world:
   the primitives below are the landing page's `.lit` flip-zone
   values, promoted to the page ground so the two surfaces read
   as one brand. The legend is identical:
     gold   = the currency, escrow, prize pool
     ember  = players and entry fees
     teal   = winners and payouts
     violet = developer share, Dungeon Labs
   ============================================================ */
:root{
  /* --- primitive --- */
  --p-paper-50:#f6f4ee;
  --p-paper-300:#c9c4b8;
  --p-line-warm:rgba(50,42,28,.30);
  --p-line-warm-soft:rgba(50,42,28,.16);
  /* legend variants for dark plates (same values as the landing page's) */
  --p-ember-300:#ff7a59;
  --p-teal-300:#4fd1b5;
  --p-violet-300:#b699ff;

  /* --- semantic --- */
  --surface:var(--p-paper-100);
  --surface-raised:var(--p-paper-50);
  --surface-inset:var(--p-paper-200);
  --ink:var(--p-ink-warm);
  --ink-muted:var(--p-ink-warm-mut);
  --line:var(--p-line-warm);
  --line-soft:var(--p-line-warm-soft);
  --accent-text:var(--p-gold-700);
  --accent-fill:var(--p-gold-700);
  --on-accent:var(--p-paper-50);   /* pale ink on the gold chip: 5.13:1, gold-160 measured 4.30 and failed AA */
  --link:var(--p-ember-700);
  --plate-bg:var(--p-graphite-950);
  --plate-bg-raised:var(--p-graphite-900);
  --plate-ink:var(--p-white);
  --plate-ink-muted:var(--p-mist-300);
  --plate-line:var(--p-line-cool);
  --plate-accent:var(--p-gold-300);
  --legend-gold:var(--p-gold-700);
  --legend-ember:var(--p-ember-700);
  --legend-teal:var(--p-teal-700);
  --legend-violet:var(--p-violet-700);
  /* absolute, not ch: a ch-based measure re-resolves against each element's
     own font size, so lead paragraphs ran wider than everything else */
  --measure:690px;
  --margin-col:264px;
  --motion-base:260ms;
  --motion-draw:900ms;
  color-scheme:light;
}

/* ---------- component layer ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--surface);
  color:var(--ink);
  font-family:'Newsreader','Iowan Old Style',Georgia,serif;
  font-size:19px;line-height:1.68;
  font-variant-numeric:oldstyle-nums;
  overflow-x:hidden;
}
img,svg{max-width:100%}
::selection{background:var(--p-gold-160);color:var(--p-gold-ink)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--surface);
  padding:15px 18px;font:700 14px/1 'Martian Mono',monospace;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px}

/* ---------- reading progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:transparent;z-index:40;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--accent-fill);
  transform:scaleX(0);transform-origin:0 50%}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.masthead .row{max-width:1220px;margin:0 auto;padding:11px clamp(20px,4vw,48px);display:flex;align-items:center;gap:18px}
.wordmark{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:800;font-size:21px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:9px;line-height:1;padding:12px 0;min-height:44px}
.ticker{font-family:'Martian Mono',monospace;font-size:12.5px;font-weight:700;letter-spacing:.06em;line-height:1;
  color:var(--on-accent);background:var(--accent-fill);padding:4px 9px;border-radius:2px;display:inline-flex;align-items:center}
.masthead .doctype{font:400 11px/1 'Martian Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);padding-left:18px;border-left:1px solid var(--line);}
.masthead .spacer{margin-left:auto}
.mini{font:400 11.5px/1 'Martian Mono',monospace;letter-spacing:.04em;color:var(--ink-muted);
  text-decoration:none;background:none;border:1px solid var(--line);border-radius:2px;
  padding:12px 13px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:7px;
  transition:color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}
.mini:hover{color:var(--accent-text);border-color:var(--accent-text)}
.mini:active{transform:translateY(1px)}
.mini{white-space:nowrap}
.mini .ic{display:none;flex:none}
.lbl-short{display:none}
/* below the site's burger breakpoint the two actions compress to icon
   buttons (home / print): the full labels stop fitting well before 640 */
@media (max-width:900px){
  .mini{padding:12px;min-width:44px;justify-content:center}
  .mini .ic{display:block}
  .mini .lbl{display:none}
}
@media (max-width:640px){
  .masthead .doctype{display:none}
  .masthead .row{gap:12px;padding-left:16px;padding-right:16px}
  .shell{padding:0 16px}
  .foot{padding-left:16px;padding-right:16px}
}

/* ---------- shell ---------- */
.shell{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1120px){.shell{grid-template-columns:212px minmax(0,1fr);column-gap:56px}}

/* ---------- contents rail ---------- */
.rail{display:none}
@media (min-width:1120px){
  .rail{display:block;position:sticky;top:78px;align-self:start;padding:56px 0 40px;max-height:calc(100vh - 96px);overflow-y:auto}
}
.rail .rail-h{font:400 10.5px/1 'Martian Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:16px}
.rail ol{list-style:none;display:flex;flex-direction:column;gap:2px}
.rail a{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--ink-muted);
  font-size:15.5px;line-height:1.35;padding:9px 0 9px 11px;border-left:2px solid var(--line-soft);
  transition:color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}
.rail a:hover{color:var(--ink);border-color:var(--line)}
.rail a[aria-current="true"]{color:var(--ink);border-color:var(--accent-fill)}
.rail a .n{font:400 10.5px/1.6 'Martian Mono',monospace;color:var(--accent-text);flex:0 0 18px}

/* ---------- document ---------- */
.doc{padding-bottom:64px;min-width:0}
.sec{padding:56px 0;border-top:1px solid var(--line-soft)}
.sec:first-child{border-top:0}
/* the document runs one full-width column at every size: running text,
   section heads, tables, and plates all share the same width */
.sec{display:flow-root}
.doc .sec > *{max-width:none}
@media (min-width:1120px){
  /* wide screens: the margin plates pull right and the text wraps around
     them (the print layout already works this way) */
  .sec > .margin{float:right;width:var(--margin-col);margin:6px 0 22px 44px}
}
.sec > * + *{margin-top:1.15em}
.sec > h2 + *{margin-top:1.4em}

p{max-width:var(--measure);text-wrap:pretty}
p + p{margin-top:1.05em}
strong{font-weight:700}
em{font-style:italic}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2.5px;
  transition:color var(--motion-fast) var(--ease-out)}
a:hover{color:var(--ink)}

/* section headers */
.shead{display:flex;align-items:baseline;gap:18px;border-top:2px solid var(--accent-fill);
  padding-top:14px;margin-bottom:6px;max-width:var(--measure)}
.shead .num{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:800;
  font-size:54px;line-height:.82;color:var(--accent-text);font-variant-numeric:lining-nums;
  letter-spacing:.01em;flex:0 0 auto}
.shead h2{font-weight:600;font-size:clamp(27px,3.4vw,35px);line-height:1.14;letter-spacing:-.012em}
h3{font-weight:600;font-size:21px;line-height:1.3;margin-top:1.9em!important;letter-spacing:-.008em}
.eyebrow{font:400 10.5px/1.5 'Martian Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted)}

/* lead paragraph */
.lead{font-size:22.5px;line-height:1.56;color:var(--ink)}

/* ---------- cover ---------- */
.cover{padding:clamp(48px,7vw,96px) 0 60px}
.cover .seal{width:72px;height:72px;display:block;margin-bottom:26px}
h1{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:800;
  font-size:clamp(54px,11.5vw,132px);line-height:.86;letter-spacing:.005em;text-transform:uppercase;
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
h1 .tk{font-family:'Martian Mono',monospace;font-size:clamp(11px,1.2vw,15px);font-weight:700;
  letter-spacing:.05em;color:var(--on-accent);background:var(--accent-fill);padding:6px 10px;
  border-radius:2px;text-transform:none;align-self:center}
.cover .sub{font-size:clamp(23px,3.2vw,33px);line-height:1.25;margin-top:20px;max-width:22ch;
  letter-spacing:-.01em}
.cover .thesis{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);max-width:var(--measure)}
.cover .thesis q{quotes:none;font-style:italic;font-size:21px;line-height:1.5;display:block}
.cover .imprint{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 26px;
  font:400 11.5px/1.6 'Martian Mono',monospace;letter-spacing:.05em;color:var(--ink-muted)}
/* ---------- plates (game art lives in windows cut into the paper) ---------- */
figure{margin:0}
.plate{background:var(--plate-bg);border:1px solid var(--plate-line);border-radius:2px;
  padding:14px;color:var(--plate-ink)}
.plate .frame{background:var(--plate-bg-raised);border:1px solid var(--plate-line);
  display:flex;align-items:center;justify-content:center;padding:14px;min-height:120px}
.plate img{display:block;image-rendering:pixelated}
.plate img.smooth{image-rendering:auto}
.plate figcaption{margin-top:12px;font:400 10.5px/1.55 'Martian Mono',monospace;letter-spacing:.03em;
  color:var(--plate-ink-muted)}
.plate figcaption b{display:block;color:var(--plate-accent);font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:5px}
.plate.wide{margin-top:44px}
.plate.wide .frame{padding:0;border:0}
.plate.coin .frame{padding:0;background:none}
.plate.coin img{width:100%;height:auto}
.plate.wide img{width:100%;height:auto}
.margin{margin-top:34px}
@media (min-width:1120px){.margin{margin-top:0}}

/* ---------- figures (diagrams) ---------- */
.fig{margin-top:40px;max-width:var(--measure)}
.fig .canvas{background:var(--surface-raised);border:1px solid var(--line);border-radius:2px;padding:20px 18px;
  overflow-x:auto}
.fig svg{display:block;min-width:520px;margin:0 auto}
.fig figcaption{margin-top:12px;font:400 11.5px/1.6 'Martian Mono',monospace;letter-spacing:.02em;
  color:var(--ink-muted)}
.fig figcaption b{color:var(--accent-text);font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  margin-right:8px}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;
  font:400 10.5px/1.5 'Martian Mono',monospace;letter-spacing:.03em;color:var(--ink-muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:12px;height:3px;border-radius:1px;flex:0 0 12px}
.legend i.g{background:var(--legend-gold)} .legend i.e{background:var(--legend-ember)}
.legend i.t{background:var(--legend-teal)} .legend i.v{background:var(--legend-violet)}
.legend i.dash{background:none;border-top:3px dashed var(--legend-gold)}

/* svg drawing primitives */
.fig .ln{fill:none;stroke-width:1.6;stroke-linecap:round}
.fig .ln.g{stroke:var(--legend-gold)} .fig .ln.e{stroke:var(--legend-ember)}
.fig .ln.t{stroke:var(--legend-teal)} .fig .ln.v{stroke:var(--legend-violet)}
.fig .ln.k{stroke:var(--ink)}
.fig .box{fill:none;stroke:var(--ink);stroke-width:1.4}
.fig .box.g{stroke:var(--legend-gold)} .fig .box.e{stroke:var(--legend-ember)}
.fig .box.t{stroke:var(--legend-teal)} .fig .box.v{stroke:var(--legend-violet)}
.fig text{font-family:'Martian Mono',monospace;font-size:10px;letter-spacing:.02em;fill:var(--ink)}
.fig text.mut{fill:var(--ink-muted);font-size:9px}
.fig text.ttl{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.js-anim .fig .drawable{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset var(--motion-draw) var(--ease-out)}
.js-anim .fig .fade{opacity:0;transition:opacity var(--motion-base) var(--ease-out)}
.js-anim .fig.in .drawable{stroke-dashoffset:0}
.js-anim .fig.in .fade{opacity:1}
/* staged reveal so the eye follows the flow */
.js-anim .fig.in .d2{transition-delay:.14s} .js-anim .fig.in .d3{transition-delay:.28s}
.js-anim .fig.in .d4{transition-delay:.42s} .js-anim .fig.in .d5{transition-delay:.56s}

/* ---------- tables ---------- */
.tbl{margin-top:36px;max-width:var(--measure);border-top:1px solid var(--ink);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:16.5px}
.tbl.data table{font-family:'Martian Mono',monospace;font-size:12.5px;letter-spacing:.01em;
  font-variant-numeric:lining-nums}
th{text-align:left;font:400 10.5px/1.5 'Martian Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);padding:11px 14px 11px 0;vertical-align:top;
  border-bottom:1px solid var(--line)}
td{padding:13px 14px 13px 0;vertical-align:top;border-bottom:1px solid var(--line-soft);line-height:1.5}
td:last-child,th:last-child{padding-right:0}
.tbl.split th:first-child{color:var(--legend-teal)}
.tbl.split th:last-child{color:var(--legend-ember)}
.tbl caption{caption-side:bottom;text-align:left;margin-top:12px;
  font:400 11px/1.6 'Martian Mono',monospace;color:var(--ink-muted);letter-spacing:.02em}

/* ---------- game roster ---------- */
.roster{display:grid;gap:20px;margin-top:36px;max-width:var(--measure)}
.game{border:1px solid var(--plate-line);border-radius:2px;background:var(--plate-bg-raised);
  display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden}
@media (min-width:620px){.game{grid-template-columns:168px minmax(0,1fr)}}
/* wider art column on wide screens. This has to come after the 620px rule:
   same specificity, so source order decides, and declaring it up in the
   section-layout block left it dead. */
@media (min-width:1120px){.game{grid-template-columns:240px minmax(0,1fr)}}
.game .art{background:var(--plate-bg);border-right:1px solid var(--plate-line);
  display:flex;align-items:center;justify-content:center;padding:20px;min-height:150px}
.game .art img{display:block;image-rendering:pixelated}
.game .art img.smooth{image-rendering:auto}
.game .art.veiled{position:relative;background:repeating-linear-gradient(135deg,var(--plate-bg-raised) 0 8px,var(--plate-bg) 8px 16px)}
.game .art.veiled span{font:400 10px/1.6 'Martian Mono',monospace;color:var(--plate-ink-muted);
  text-align:center;letter-spacing:.04em}
/* wide key art fills its cell instead of sitting on the sprite padding */
.game .art.keyart{padding:0}
.game .art.keyart img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.game .body{padding:20px;color:var(--plate-ink-muted)}
.game h3{margin-top:0!important;font-size:20px;color:var(--plate-ink)}
.game p{font-size:17px;line-height:1.55;margin-top:8px}
.game .body a{color:var(--p-ember-300)}
.game .body a:hover{color:var(--plate-ink)}
.playlink{display:inline-block;padding:12px 2px;min-height:44px}
.pill{display:inline-flex;align-items:center;gap:7px;font:400 10px/1 'Martian Mono',monospace;
  letter-spacing:.09em;text-transform:uppercase;border:1px solid currentColor;border-radius:2px;
  padding:5px 8px;margin-bottom:12px}
.pill.live{color:var(--legend-teal)} .pill.soon{color:var(--legend-ember)}
.pill.teaser{color:var(--legend-violet)}
/* pills on the dark game plates take the light legend variants */
.game .pill.live{color:var(--p-teal-300)} .game .pill.soon{color:var(--p-ember-300)}
.game .pill.teaser{color:var(--p-violet-300)}
.pill b{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- legal + refs ---------- */
.legalbox{margin-top:26px;max-width:var(--measure);background:var(--surface-raised);
  border:1px solid var(--line);border-left-width:3px;border-radius:2px;padding:22px 24px}
.legalbox p{font-size:15.5px;line-height:1.6;color:var(--ink-muted);max-width:none}
.refs{margin-top:26px;max-width:var(--measure);list-style:none;counter-reset:r}
.refs li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);font-size:16.5px;line-height:1.5}
.refs li::before{counter-increment:r;content:"[" counter(r) "]";
  font:400 11px/1.7 'Martian Mono',monospace;color:var(--accent-text)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--ink);margin-top:20px}
.foot{max-width:1220px;margin:0 auto;padding:34px clamp(20px,4vw,48px) 56px;display:flex;flex-wrap:wrap;
  gap:18px 34px;align-items:baseline}
.foot .who{font:400 11.5px/1.6 'Martian Mono',monospace;letter-spacing:.05em;color:var(--ink-muted)}
.foot nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:14px 22px}
.foot nav a{font:400 11.5px/1.6 'Martian Mono',monospace;letter-spacing:.03em;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line);
  display:inline-flex;align-items:center;min-height:44px}
.foot nav a:hover{color:var(--accent-text);border-color:var(--accent-text)}

/* ---------- entrance motion (floor only: transform + opacity) ---------- */
.js-anim .rise{opacity:0;transform:translateY(10px);
  transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
.js-anim .rise.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js-anim .rise{opacity:1;transform:none;transition:none}
  .js-anim .fig .drawable{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .js-anim .fig .fade{opacity:1;transition:none}
  .progress i{transition:none}
  *{scroll-behavior:auto!important}
}

/* ---------- print: this is how the PDF is produced ---------- */
@media print{
  @page{margin:18mm 16mm}
  :root{--surface:#fff;--surface-raised:#fff;--surface-inset:#eee;--ink:#000;--ink-muted:#333;
    --line:rgba(0,0,0,.45);--line-soft:rgba(0,0,0,.2)}
  body{font-size:10.5pt;line-height:1.5}
  .progress,.masthead,.rail,.mini,footer nav{display:none!important}
  .shell{display:block;max-width:none;padding:0}
  .sec{display:block;padding:0;border-top:0;break-before:page}
  .cover{break-after:page;padding:0}
  .sec > .margin{float:right;width:38%;margin:4pt 0 12pt 16pt}
  .sec::after{content:"";display:block;clear:both}
  p,.fig,.tbl,.roster,.legalbox,.refs,.shead{max-width:none}
  .plate,.plate .frame,.game,.game .art{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .plate,.fig,.game,.refs li{break-inside:avoid}
  .fig svg{min-width:0;width:100%}
  /* these must carry the `.js-anim` prefix. Without it they lose on
     specificity to the rules that hide the element on screen, so anything
     the reader has not scrolled past prints blank — the reduced-motion
     block above gets this right. */
  .js-anim .fig .drawable{stroke-dasharray:none;stroke-dashoffset:0}
  .js-anim .fig .fade{opacity:1}
  .js-anim .rise{opacity:1;transform:none}
  h1{font-size:44pt}
  .cover .sub{font-size:19pt}
  a{color:var(--ink);text-decoration:none;border-bottom:.5pt solid var(--line)}
  a[href^="http"]::after{content:" (" attr(href) ")";font-family:'Martian Mono',monospace;font-size:7.5pt;
    color:var(--ink-muted);word-break:break-all}
  .foot{padding:12pt 0 0}
}