/* PITHEAD — tema gelap "Ember Vault": hitam hangat, tulang, tembaga bara. Dimuat PALING AKHIR di semua halaman. */
:root {
  --paper: #0a0806;
  --paper2: #12100c;
  --paper3: #1b1712;
  --ink: #efe6d6;
  --ink2: #b4aa99;
  --ink3: #7d7466;
  --line: rgba(239, 230, 214, .085);
  --line2: rgba(239, 230, 214, .17);
  --copper: #e07b39;
  --copper2: #f3a35e;
  --copper-soft: rgba(224, 123, 57, .13);
  --brass: #d6a54e;
  --brass-soft: rgba(214, 165, 78, .12);
  --mint: #63d3a6;
  --mint-soft: rgba(99, 211, 166, .11);
  --font: 'Geist', system-ui, -apple-system, sans-serif;
  --display: 'Cinzel', 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
body { background: var(--paper); color: var(--ink); font-family: var(--font); }
::selection { background: var(--copper); color: #120c08; }

/* tipografi judul ala game AAA: kapital klasik, jarak lebar, tanpa glow/gradasi */
h1, h2, .display { font-family: var(--display) !important; font-weight: 600 !important; letter-spacing: .015em !important; font-stretch: normal !important; text-transform: none; }
h3 { letter-spacing: -.005em; }
.k { color: var(--ink3); }

/* nav */
.nav { background: rgba(10, 8, 6, .72); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px) saturate(1.2); }
.brand { font-family: var(--display); font-weight: 700; letter-spacing: .16em; font-size: 16px; }
.brand .mark { width: 30px; height: 30px; }
.nav .links a { color: var(--ink3); font-weight: 500; letter-spacing: .01em; }
.nav .links a.on, .nav .links a:hover { color: var(--ink); }

/* tombol: tulang solid (utama), tembaga (aksi game), garis (sekunder) */
.btn { background: var(--ink); color: #120e0a; border-color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 24px -14px rgba(0, 0, 0, .9); font-weight: 600; }
.btn:hover { background: #fff7ea; }
.btn.copper { background: linear-gradient(180deg, #ea8a48, #cf6a2c); border-color: #e07b39; color: #1a0d05; box-shadow: 0 1px 0 rgba(255, 220, 190, .45) inset, 0 0 0 1px rgba(0, 0, 0, .4), 0 14px 30px -14px rgba(224, 123, 57, .7); }
.btn.copper:hover { background: linear-gradient(180deg, #f39a5a, #d8743a); }
.btn.ghost { color: var(--ink); border-color: var(--line2); background: rgba(239, 230, 214, .02); }
.btn.ghost:hover { border-color: var(--ink2); background: rgba(239, 230, 214, .05); }
.btn.outline-accent { color: var(--copper2); border-color: rgba(224, 123, 57, .6); background: rgba(224, 123, 57, .06); }
.pill, .ico, .chip, .copy { background: rgba(239, 230, 214, .03); border-color: var(--line2); }
.ico:hover, .chip:hover { border-color: var(--ink2); }

/* kartu & permukaan */
.card, .step, .pcard, .vcard, .tabs, .strip, .proof, .plate { background: linear-gradient(180deg, rgba(239, 230, 214, .035), rgba(239, 230, 214, .012)) !important; border-color: var(--line) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset !important; }
.frame { box-shadow: 0 0 0 1px var(--line2), 0 40px 90px -40px rgba(0, 0, 0, .9) !important; }
.cacard .addr, .cabar .addr { background: transparent; }
.cacard .status, .cabar .status, .status { background: var(--brass-soft) !important; color: var(--brass) !important; }
.cacard .status.live, .cabar .status.live, .status.live { background: var(--mint-soft) !important; color: var(--mint) !important; }
.tbl th { color: var(--ink3); }
.tbl td { border-bottom-color: var(--line); }
.tbl .tile { color: #1a0d05; }
.toast { background: var(--ink); color: #120e0a; }
.modal { background: rgba(0, 0, 0, .7); }
.modal .box { background: var(--paper2); border-color: var(--line2); }
.wlist button { background: var(--paper3); border-color: var(--line); color: var(--ink); }
.faq details { border-color: var(--line); }
footer { border-top-color: var(--line); }
.trust li { border-color: var(--line); }
code { color: var(--copper2); }

/* halaman Mine */
.amtbox { background: rgba(0, 0, 0, .35) !important; border-color: var(--line2) !important; }
.amtbox:focus-within { border-color: var(--copper) !important; }
.g { background: rgba(239, 230, 214, .025); border-color: var(--line); color: var(--ink2); }
.g:hover { border-color: var(--ink3); }
.g.solo { background: rgba(214, 165, 78, .07); border-color: rgba(214, 165, 78, .28); }
.g.sel { background: linear-gradient(180deg, #ea8a48, #cf6a2c); border-color: #e07b39; color: #1a0d05; }
.g.sel .amt { color: rgba(26, 13, 5, .7); }
.g.sel .bar { background: rgba(0, 0, 0, .2); } .g.sel .bar i { background: #1a0d05; }
.g.sel:after { color: #1a0d05; }
.g.mine { box-shadow: inset 0 0 0 1.5px var(--mint); }
.g.mine.sel { box-shadow: inset 0 0 0 1.5px #1a0d05; }
.g.locked { background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(239, 230, 214, .05) 5px 7px); }
.g .bar { background: rgba(239, 230, 214, .08); }
.meter { background: rgba(239, 230, 214, .08); }
.tabbar button.on { background: var(--ink); color: #120e0a; }
.youtiles .t { background: var(--copper-soft); color: var(--copper2); }
.youtiles .t.s { background: var(--brass-soft); color: var(--brass); }
.youtiles .t.w { background: var(--copper); color: #1a0d05; }
.claimrow b { color: var(--mint); }
.txmsg.ok { color: var(--mint); } .txmsg.err { color: #ff8a6a; }
.stage .banner { background: rgba(14, 11, 8, .92); color: var(--ink); border: 1px solid var(--line2); backdrop-filter: blur(8px); }
.stage .banner small { color: var(--ink2); }
.stage .banner.you { background: linear-gradient(180deg, #ea8a48, #cf6a2c); color: #1a0d05; border-color: #e07b39; }
.stage .banner.you .k, .stage .banner.you small { color: rgba(26, 13, 5, .75); }
.stage .banner.you b { color: #1a0d05; }
.chips span { color: #1a0d05; }
.chips span.r { background: var(--paper3); color: var(--ink3); }
#connectBtn.connected { background: rgba(239, 230, 214, .04); color: var(--ink); border-color: var(--line2); box-shadow: none; }

/* Verify & guide */
.vverdict.ok { background: var(--mint-soft); color: var(--mint); }
.vverdict.bad { background: rgba(255, 110, 80, .12); color: #ff8a6a; }
.toc a.on { background: rgba(239, 230, 214, .04); }
.ch code, .formula { background: rgba(0, 0, 0, .35); border-color: var(--line); }
.timeline, .ch .tbl { background: rgba(239, 230, 214, .02); border-color: var(--line); }
.split5050 i:first-child { background: linear-gradient(180deg, #ea8a48, #cf6a2c); color: #1a0d05; }
.split5050 i:last-child { background: var(--paper3); color: var(--ink2); }
.duo .minigrid i { background: rgba(239, 230, 214, .03); border-color: var(--line); }
.minigrid i.s { background-color: var(--brass-soft); border-color: rgba(214, 165, 78, .45); }
.minigrid i.w { background: var(--copper); border-color: var(--copper); }