/* GOLDRUSH reading pages (how it works, economy, ledger): site.css is the game's sheet, this one lets a page scroll and read. */
html, body { overflow: auto; height: auto; }
body { user-select: text; -webkit-user-select: text; background: var(--bg); }
#game { z-index: 0; }                                                      /* the live mine behind the page: js/tour.js sinks it as you scroll */
.d-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 1rem 2.4rem; background: rgba(11, 10, 15, .94); border-bottom: 1px solid var(--line); box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .5); }
.d-wrap { position: relative; z-index: 1; max-width: 68rem; min-height: 100vh; margin: 0 auto; padding: 3.2rem 2.6rem 6rem; background: linear-gradient(180deg, rgba(11, 10, 15, .93), rgba(11, 10, 15, .9)); border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); box-shadow: 0 0 7rem 2rem rgba(0, 0, 0, .55); }
.d-kick { font: 700 .86rem/1 var(--hud); letter-spacing: .26em; color: var(--gold); }
h1 { margin: .8rem 0 0; font: 400 clamp(2.8rem, 5.4vw, 5rem)/.95 var(--disp); letter-spacing: .02em; color: var(--ink); text-shadow: 0 .06em 0 rgba(0, 0, 0, .5); }
h1 em { font-style: normal; background: linear-gradient(180deg, #fff3b0 0%, #ffcf3a 45%, #e88410 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.d-lead { margin: 1.3rem 0 0; max-width: 44rem; font-size: 1.12rem; line-height: 1.6; color: #d9d0c2; }
h2 { margin: 4rem 0 1.2rem; font: 400 1.9rem/1 var(--disp); letter-spacing: .06em; color: var(--ink); display: flex; align-items: center; gap: .8rem; }
h2::before { content: ''; width: .7rem; height: .7rem; transform: rotate(45deg); background: var(--gold); }
p { font-size: 1rem; line-height: 1.65; color: var(--dim); max-width: 46rem; }
p b, li b { color: var(--ink); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 2.4rem; }
.tile { padding: 1.1rem 1.2rem; border-radius: .9rem; background: var(--glass); border: 1px solid var(--line); display: grid; gap: .5rem; }
.tile span { font: 700 .72rem/1 var(--hud); letter-spacing: .22em; color: var(--dim); }
.tile b { font: 700 1.9rem/1 var(--hud); font-variant-numeric: tabular-nums; color: var(--gold); }
.tile.g b { color: var(--green); } .tile.w b { color: var(--ink); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; counter-reset: s; }
.step { padding: 1.3rem 1.3rem 1.4rem; border-radius: .9rem; background: rgba(255, 255, 255, .035); border: 1px solid var(--line-2); counter-increment: s; }
.step::before { content: counter(s, decimal-leading-zero); font: 400 2.2rem/1 var(--disp); color: var(--gold); }
.step h3 { margin: .7rem 0 .4rem; font: 400 1.2rem/1 var(--disp); letter-spacing: .08em; color: var(--ink); }
.step p { margin: 0; font-size: .95rem; }
table { width: 100%; border-collapse: collapse; font: 600 .98rem/1.2 var(--hud); }
th { text-align: left; padding: .7rem .9rem; font: 700 .72rem/1 var(--hud); letter-spacing: .2em; color: var(--dim); border-bottom: 1px solid var(--line); }
td { padding: .7rem .9rem; border-bottom: 1px solid var(--line-2); color: #d9d0c2; font-variant-numeric: tabular-nums; }
td.n, th.n { text-align: right; } td b { color: var(--ink); } td.sol { color: var(--gold); } td.ok { color: var(--green); } td a { color: var(--cyan); }
.t-nav a.btn-gold, .t-nav a.btn-gold:hover { color: #2a1503; font-size: 1rem; padding: .6em 1.2em; }
.ore { display: inline-block; width: .7rem; height: .7rem; margin-right: .5rem; transform: rotate(45deg); border-radius: .12rem; }
.box { border-radius: .9rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); overflow: hidden; }
.rules { display: grid; gap: .6rem; margin: 0; padding: 0; max-width: 48rem; }
.rules li { padding-left: 1.2rem; position: relative; font-size: 1rem; line-height: 1.6; color: var(--dim); }
.rules li::before { content: ''; position: absolute; left: 0; top: .6em; width: .42rem; height: .42rem; transform: rotate(45deg); background: var(--gold); }
.empty { padding: 2rem; text-align: center; color: var(--faint); font: 600 1rem/1 var(--hud); letter-spacing: .1em; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: 1fr; } .d-wrap { padding: 2rem 1.2rem 4rem; } }
.t-nav a.here { color: var(--gold); }
/* the loop: where SOL comes from, where it goes */
.flow { display: grid; grid-template-columns: 1fr auto 1.15fr auto 1fr auto 1fr; align-items: stretch; gap: .7rem; margin-top: 1.4rem; }
.fbox { padding: 1.1rem 1.1rem 1.2rem; border-radius: .9rem; background: rgba(255, 255, 255, .035); border: 1px solid var(--line-2); display: grid; gap: .5rem; align-content: start; }
.fbox h3 { margin: 0; font: 400 1.1rem/1 var(--disp); letter-spacing: .1em; color: var(--ink); }
.fbox p { margin: 0; font-size: .9rem; line-height: 1.5; }
.fbox b.big { font: 700 1.7rem/1 var(--hud); font-variant-numeric: tabular-nums; color: var(--gold); }
.fbox.pool { background: linear-gradient(180deg, rgba(255, 207, 58, .13), rgba(255, 207, 58, .03)); border-color: rgba(255, 207, 58, .45); box-shadow: 0 0 2.4rem rgba(255, 190, 40, .12); }
.fbox.out b.big { color: var(--green); }
.farrow { display: grid; align-content: center; justify-items: center; gap: .35rem; min-width: 5.6rem; font: 700 .68rem/1.25 var(--hud); letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--dim); }
.farrow i { font: 400 1.5rem/1 var(--disp); font-style: normal; color: var(--gold); }
.farrow.back i { color: var(--green); }
.rule { margin-top: 1.4rem; padding: 1.2rem 1.4rem; border-radius: .9rem; border: 1px solid rgba(255, 207, 58, .4); background: rgba(255, 207, 58, .06); font: 600 1.25rem/1.4 var(--hud); color: var(--ink); }
.rule b { color: var(--gold); } .rule em { font-style: normal; color: var(--green); }
td small { display: block; margin-top: .2rem; font: 600 .8rem/1 var(--hud); color: var(--faint); }
td.pc { color: var(--ink); } th.c, td.c { text-align: center; }
.up-grid td { padding: .6rem .5rem; } .up-grid td.c b { display: block; color: var(--gold); font-weight: 700; }
.note { margin-top: .9rem; font-size: .9rem; color: var(--faint); }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } .farrow { min-width: 0; padding: .2rem 0; } .farrow i { transform: rotate(90deg); } .box { overflow-x: auto; } }