:root{
  --bg:#16120c; --panel:#1d1812; --panel-edge:#3a3122; --inset:#120e09;
  --parchment:#d8ccb4; --muted:#8d8268; --gold:#f0b83c;
  --gp-g:#5dde6f; --xp:#4cae3f; --xp-dark:#2c6b25;
}
*{box-sizing:border-box; margin:0}
body{
  background:var(--bg); color:var(--parchment);
  font-family:"IBM Plex Mono",monospace; font-size:14px; line-height:1.5;
  padding:24px 16px 64px; max-width:980px; margin:0 auto;
}
header{margin-bottom:20px}
.eyebrow{font-size:11px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase}
h1{font-family:Cinzel,serif; font-weight:700; font-size:clamp(34px,6vw,56px);
   letter-spacing:.12em; color:var(--gold); line-height:1.1; text-shadow:0 2px 0 #000}
.lede{color:var(--muted); margin-top:6px}
.gp-g{color:var(--gp-g)}
.empty{color:var(--muted); padding:48px 8px; text-align:center;
   border:1px solid var(--panel-edge); background:var(--panel); margin-top:24px}

.hero{display:flex; align-items:center; gap:20px; margin:24px 0}
.coin{width:96px; height:96px; image-rendering:pixelated; flex-shrink:0}
.hero-num{flex:1; min-width:0}
.banknum{font-size:clamp(24px,5vw,40px); font-weight:600; color:var(--gold); text-shadow:0 1px 0 #000}
.xpbar{height:26px; margin-top:8px; background:var(--inset); border:1px solid #000;
   box-shadow:inset 0 0 0 1px var(--panel-edge); position:relative; overflow:hidden}
.xpfill{height:100%; width:0%;
   background:linear-gradient(180deg,var(--xp) 0 50%,var(--xp-dark) 50% 100%); transition:width .8s ease}
.xplabel{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
   font-size:12px; font-weight:600; color:#fff; text-shadow:0 1px 0 #000}

.panel{background:var(--panel); border:1px solid var(--panel-edge); box-shadow:0 0 0 1px #000; padding:14px; margin-top:16px}
.panel h2{font-family:Cinzel,serif; font-size:15px; font-weight:600; letter-spacing:.12em;
   text-transform:uppercase; color:var(--gold); margin-bottom:10px}
.chart{height:300px}

.stats{margin-top:16px; background:var(--panel); border:1px solid var(--panel-edge); box-shadow:0 0 0 1px #000; padding:6px 14px}
.stat{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed #2c2516}
.stat:last-child{border-bottom:0}
.stat .k{color:var(--muted)}
.hint{color:#5f5944; font-size:11px}

footer{margin-top:28px; font-size:11px; color:var(--muted)}
@media (prefers-reduced-motion:reduce){.xpfill{transition:none}}
@media (max-width:560px){.hero{flex-direction:column; text-align:center}}