/* KANTO /docs and /ledger: the game's night blue, its menu paper, the coin gold. Every number on these pages comes from
   /api/ledger, so the rules shown are the rules that run. */
:root { --night: #0d0c16; --panel: #17152c; --panel2: #1f1c3a; --line: #2f2950; --ink: #f4f1ea; --ink2: #c3bddd; --ink3: #8a83a8; --gold: #ffd66a; --gold2: #f2a93b; --cyan: #58e0ff; --good: #7cff6b; --ember: #e08a5f;
  --f: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --m: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); color: var(--ink2); font: 16px/1.6 var(--f); }
a { color: var(--cyan); text-decoration: none; } a:hover { text-decoration: underline; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 22px 80px; }
header.top { position: sticky; top: 0; z-index: 5; background: rgba(13, 12, 22, .92); backdrop-filter: blur(6px); border-bottom: 1px solid #221e3d; }
header.top .wrap { display: flex; align-items: center; gap: 18px; height: 58px; padding-bottom: 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold); font: 800 17px/1 var(--f); letter-spacing: .1em; text-decoration: none !important; }
.brand img { width: 30px; height: 30px; border-radius: 50%; }
header.top nav { display: flex; gap: 18px; margin-left: auto; font-weight: 600; font-size: 14px; }
header.top nav a { color: var(--ink2); } header.top nav a.on { color: var(--gold); }
.play { padding: 9px 16px; border-radius: 9px; background: linear-gradient(180deg, #ffd66a, #f2a93b); color: #2a1406 !important; font-weight: 800; box-shadow: 0 3px 0 #9a5a10; }
.hero { padding: 56px 0 26px; }
.hero h1 { margin: 0 0 14px; font: 900 44px/1.05 var(--f); color: var(--ink); letter-spacing: -.01em; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { max-width: 720px; margin: 0; font-size: 18px; color: var(--ink2); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 30px 0 10px; }
.stat { padding: 16px 16px 14px; border-radius: 12px; background: linear-gradient(180deg, #1c1936, #15132a); border: 1px solid #2c2650; }
.stat span { display: block; font: 800 11px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.stat b { display: block; margin-top: 10px; font: 800 24px/1 var(--f); color: #fff3cf; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat i { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--ink3); }
h2 { margin: 46px 0 12px; font: 800 24px/1.2 var(--f); color: var(--ink); }
h3 { margin: 26px 0 8px; font: 800 17px/1.3 var(--f); color: var(--gold); }
p, li { color: var(--ink2); } b, strong { color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.card { padding: 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.card h4 { margin: 0 0 8px; font: 800 15px/1.3 var(--f); color: var(--ink); }
.card p { margin: 0; font-size: 14.5px; }
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #262145; }
th { font: 800 11.5px/1 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
td.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
td.sig a { font-family: var(--m); font-size: 12.5px; }
.k-prize { color: var(--good); } .k-sent { color: var(--cyan); } .k-burn { color: var(--ember); } .k-buy { color: var(--gold); }
.mono { font-family: var(--m); font-size: 13.5px; color: var(--ink); word-break: break-all; }
.note { padding: 14px 16px; border-radius: 10px; background: rgba(88, 224, 255, .06); border: 1px solid rgba(88, 224, 255, .2); color: #c8f6ff; }
footer { margin-top: 60px; padding-top: 18px; border-top: 1px solid #221e3d; font-size: 12.5px; color: var(--ink3); }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } .cards { grid-template-columns: 1fr; } .hero h1 { font-size: 34px; } header.top nav a:not(.play) { display: none; } }