/* =========================================================
   A-DERIC — shared stylesheet
   Palette is strictly black / gray / white, no accent color.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --void:    #030303;
  --ink:     #0c0c0c;
  --panel:   #121212;
  --charcoal:#1d1d1d;
  --line:    #2b2b2b;
  --ash:     #4a4a4a;
  --stone:   #8a8a86;
  --silver:  #c7c6c1;
  --bone:    #eeece7;
  --pure:    #ffffff;

  --serif: 'Cinzel', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--silver);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

::selection{ background:var(--bone); color:var(--void); }

:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:3px;
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Nav ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(3,3,3,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
  max-width:1120px; margin:0 auto;
}
.wordmark{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.3rem;
  letter-spacing:.04em;
  color:var(--bone);
}
.wordmark span{ color:var(--stone); }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  font-size:.92rem; color:var(--stone);
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--bone); }
.nav-cta{
  border:1px solid var(--ash);
  padding:9px 18px;
  border-radius:2px;
  color:var(--bone) !important;
  font-size:.88rem;
}
.nav-cta:hover{ border-color:var(--bone); background:var(--charcoal); }
.nav-toggle{ display:none; }

/* ---------- Buttons / form ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 26px;
  border-radius:2px;
  border:1px solid var(--bone);
  background:var(--bone);
  color:var(--void);
  font-family:var(--sans);
  font-weight:600;
  font-size:.94rem;
  cursor:pointer;
  transition:opacity .2s ease, transform .15s ease;
}
.btn:hover{ opacity:.85; }
.btn:active{ transform:translateY(1px); }
.btn.ghost{
  background:transparent; color:var(--bone); border:1px solid var(--ash);
}
.btn.ghost:hover{ border-color:var(--bone); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn.full{ width:100%; }

label{ display:block; font-size:.85rem; color:var(--stone); margin:0 0 6px; }
input{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--bone);
  padding:12px 14px;
  border-radius:2px;
  font-family:var(--sans);
  font-size:.96rem;
  margin-bottom:18px;
}
input:focus{ border-color:var(--ash); outline:none; }

.field-error{ color:var(--stone); font-size:.85rem; margin:-12px 0 16px; }

/* ---------- Hero ---------- */
.hero{
  padding:96px 24px 64px;
  text-align:center;
}
.eyebrow-note{
  color:var(--stone);
  font-size:.85rem;
  letter-spacing:.02em;
  max-width:520px;
  margin:0 auto 28px;
}
.hero h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.3rem, 6vw, 4.4rem);
  color:var(--bone);
  margin:0 0 20px;
  letter-spacing:.01em;
}
.hero p.lede{
  max-width:560px;
  margin:0 auto 40px;
  color:var(--silver);
  font-size:1.08rem;
}
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }

/* ---------- 3D coin ---------- */
.coin-stage{
  perspective:1400px;
  width:280px; height:280px;
  margin:56px auto 24px;
}
.coin{
  width:100%; height:100%;
  position:relative;
  transform-style:preserve-3d;
  animation:spin 11s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .coin{ animation:none; }
}
.coin-face{
  position:absolute; inset:0;
  clip-path: polygon(
    50% 1%, 63% 4%, 75% 3%, 85% 12%, 96% 18%, 99% 31%,
    97% 44%, 100% 56%, 94% 68%, 96% 80%, 85% 88%, 74% 97%,
    62% 95%, 50% 100%, 38% 96%, 26% 98%, 14% 89%, 4% 82%,
    2% 69%, 6% 57%, 1% 45%, 4% 32%, 13% 21%, 24% 13%, 36% 5%
  );
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14), rgba(0,0,0,0) 40%),
    linear-gradient(155deg, #3a3a3a, #0a0a0a 70%);
  border:1px solid #4a4a4a;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden;
}
.coin-face.front img{
  width:78%; height:78%;
  object-fit:cover;
  border-radius:50%;
  filter:grayscale(1) contrast(1.15) brightness(1.05);
  mix-blend-mode:screen;
  opacity:.92;
}
.coin-face.back{
  transform:rotateY(180deg);
}
.coin-face.back .glyph{
  font-family:var(--serif);
  color:var(--stone);
  font-size:2.6rem;
  letter-spacing:.06em;
}
.coin-edge{
  position:absolute; inset:0;
  transform:translateZ(-7px);
  clip-path: polygon(
    50% 1%, 63% 4%, 75% 3%, 85% 12%, 96% 18%, 99% 31%,
    97% 44%, 100% 56%, 94% 68%, 96% 80%, 85% 88%, 74% 97%,
    62% 95%, 50% 100%, 38% 96%, 26% 98%, 14% 89%, 4% 82%,
    2% 69%, 6% 57%, 1% 45%, 4% 32%, 13% 21%, 24% 13%, 36% 5%
  );
  background:repeating-linear-gradient(90deg, #050505 0 2px, #2c2c2c 2px 4px);
}
@keyframes spin{
  from{ transform:rotateY(0deg); }
  to{ transform:rotateY(360deg); }
}
.coin-caption{
  text-align:center; color:var(--stone); font-size:.82rem; margin-top:8px;
}

/* ---------- Sections ---------- */
section{ padding:80px 24px; border-top:1px solid var(--line); }
.section-head{ max-width:640px; margin:0 0 48px; }
.section-head h2{
  font-family:var(--serif);
  color:var(--bone);
  font-size:clamp(1.6rem, 3.4vw, 2.3rem);
  margin:0 0 14px;
  font-weight:600;
}
.section-head p{ color:var(--stone); font-size:1rem; max-width:520px; }

.panel-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.panel{
  background:var(--ink);
  padding:32px 28px;
}
.panel h3{
  font-family:var(--serif); color:var(--bone);
  font-size:1.15rem; margin:0 0 12px; font-weight:600;
}
.panel p{ color:var(--stone); font-size:.94rem; margin:0; }
.panel .mark{ color:var(--ash); font-size:.8rem; letter-spacing:.14em; margin-bottom:14px; display:block; }

.lore-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
.lore-grid p{ margin:0 0 18px; color:var(--silver); }
.lore-grid .rule-list{ border-top:1px solid var(--line); }
.rule-list div{
  border-bottom:1px solid var(--line);
  padding:16px 0;
  display:flex; justify-content:space-between; gap:16px;
  color:var(--stone); font-size:.92rem;
}
.rule-list div b{ color:var(--bone); font-weight:500; }

.disclaimer{
  border:1px solid var(--line);
  padding:20px 22px;
  color:var(--stone);
  font-size:.86rem;
  margin-top:28px;
}

/* ---------- Cards / dashboard ---------- */
.card{
  background:var(--ink);
  border:1px solid var(--line);
  padding:28px;
}
.balance-card{
  text-align:center;
  padding:52px 28px;
}
.balance-card .label{ color:var(--stone); font-size:.85rem; margin-bottom:10px; }
.balance-card .amount{
  font-family:var(--serif);
  color:var(--bone);
  font-size:clamp(2.4rem, 6vw, 3.6rem);
  font-weight:600;
}
.balance-card .unit{ color:var(--stone); font-size:1.1rem; margin-left:8px; }

.tx-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--line);
  gap:16px;
}
.tx-row:last-child{ border-bottom:none; }
.tx-main{ display:flex; flex-direction:column; }
.tx-main .who{ color:var(--bone); font-size:.94rem; }
.tx-main .when{ color:var(--stone); font-size:.8rem; margin-top:2px; }
.tx-amount{ font-family:var(--serif); font-size:1rem; }
.tx-amount.in{ color:var(--bone); }
.tx-amount.out{ color:var(--stone); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.empty-note{ color:var(--stone); font-size:.9rem; padding:28px 0; text-align:center; }

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:40px 24px;
  color:var(--ash);
  font-size:.82rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* ---------- Auth page ---------- */
.auth-shell{
  min-height:calc(100vh - 74px);
  display:flex; align-items:center; justify-content:center;
  padding:48px 24px;
}
.auth-card{
  width:100%; max-width:400px;
  background:var(--ink);
  border:1px solid var(--line);
  padding:36px 32px;
}
.auth-card h1{
  font-family:var(--serif); color:var(--bone);
  font-size:1.6rem; margin:0 0 6px; font-weight:600;
}
.auth-card .sub{ color:var(--stone); font-size:.9rem; margin-bottom:28px; }
.auth-toggle{
  display:flex; border:1px solid var(--line); margin-bottom:26px;
}
.auth-toggle button{
  flex:1; background:none; border:none; color:var(--stone);
  padding:11px 0; font-family:var(--sans); font-size:.88rem; cursor:pointer;
}
.auth-toggle button.active{ background:var(--charcoal); color:var(--bone); }
.status-msg{ font-size:.86rem; color:var(--stone); margin-top:14px; text-align:center; min-height:1.2em; }

/* ---------- Code block ---------- */
pre{
  background:var(--ink);
  border:1px solid var(--line);
  padding:20px;
  overflow-x:auto;
  font-size:.84rem;
  color:var(--silver);
  line-height:1.55;
}
code{ font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .panel-grid{ grid-template-columns:1fr; }
  .lore-grid{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .nav-links{
    position:fixed; inset:74px 0 auto 0;
    background:var(--void);
    flex-direction:column; align-items:flex-start;
    padding:20px 24px; border-bottom:1px solid var(--line);
    display:none;
    gap:18px;
  }
  .nav-links.open{ display:flex; }
  .nav-toggle{
    display:block; background:none; border:1px solid var(--ash);
    color:var(--bone); padding:8px 12px; border-radius:2px;
  }
}