:root{
    --bg: #0a0c08;
    --bg-alt: #12140d;
    --bg-panel: #16180f;
    --parchment: #e9dfc3;
    --muted: #a89f86;
    --gold: #c9a961;
    --gold-bright: #e8c874;
    --blood: #8a2b32;
    --blood-dark: #4a1519;
    --moss: #3f4a37;
    --line: rgba(201,169,97,0.28);
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--parchment);
    font-family: 'EB Garamond', serif;
    font-size: 19px;
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* subtle paper-grain texture, generated in-browser, no external assets */
  .grain{
    position: fixed; inset:0; pointer-events:none; z-index: 2;
    opacity: 0.05; mix-blend-mode: overlay;
  }

  h1,h2,h3{ font-family: 'Cinzel', serif; letter-spacing: 0.04em; margin: 0; }
  .eyebrow{
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.85;
  }

  a{ color: inherit; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  }

  /* ---------- NAV ---------- */
  nav{
    position: fixed; top:0; left:0; right:0; z-index: 50;
    display:flex; align-items:center; justify-content: space-between;
    padding: 18px 5%;
    background: linear-gradient(to bottom, rgba(10,12,8,0.92), rgba(10,12,8,0));
    backdrop-filter: blur(2px);
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand svg{ width: 26px; height: 26px; }
  .brand span{
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gold-bright);
    letter-spacing: 0.06em;
  }
  .nav-links{ display:flex; gap: 34px; }
  .nav-links a{
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    transition: color 0.25s;
  }
  .nav-links a:hover{ color: var(--gold-bright); }
  @media (max-width: 720px){ .nav-links{ display:none; } }

  /* ---------- HERO ---------- */
  .hero{
    position: relative;
    min-height: 100svh;
    display:flex; flex-direction: column; align-items:center; justify-content:center;
    text-align:center;
    padding: 120px 24px 80px;
    background:
      radial-gradient(ellipse 80% 60% at 50% 15%, rgba(138,43,50,0.16), transparent 60%),
      radial-gradient(ellipse 60% 50% at 50% 100%, rgba(63,74,55,0.22), transparent 60%),
      var(--bg);
    overflow: hidden;
  }
  .embers{ position:absolute; inset:0; pointer-events:none; z-index:1; }
  .ember{
    position:absolute; bottom:-10px; border-radius:50%;
    background: radial-gradient(circle, var(--gold-bright), var(--blood) 70%, transparent 75%);
    opacity: 0; filter: blur(0.3px);
    animation: rise linear infinite;
  }
  @keyframes rise{
    0%{ transform: translateY(0) translateX(0); opacity:0; }
    8%{ opacity: 0.9; }
    100%{ transform: translateY(-100vh) translateX(var(--drift, 20px)); opacity:0; }
  }

  .crest{ width: 64px; height: 64px; margin-bottom: 22px; opacity:0.95; position:relative; z-index:2; }
  .hero h1{
    position:relative; z-index:2;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(2.8rem, 9vw, 6rem);
    color: var(--gold-bright);
    text-shadow: 0 0 40px rgba(232,200,116,0.25), 0 2px 0 rgba(0,0,0,0.4);
  }
  .hero .tagline{
    position:relative; z-index:2;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 1.35rem;
    color: var(--parchment);
    max-width: 620px;
    margin: 18px auto 8px;
  }
  .hero .sub{
    position:relative; z-index:2;
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 40px;
    font-size: 1.02rem;
  }

  .ip-tablet{
    position:relative; z-index:2;
    display:inline-flex; align-items:center; gap: 16px;
    background: linear-gradient(180deg, var(--bg-panel), var(--bg-alt));
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .ip-tablet .label{ font-family:'Cinzel', serif; font-size:0.68rem; letter-spacing:0.18em; color: var(--muted); text-transform:uppercase; }
  .ip-tablet .value{ font-family:'JetBrains Mono', monospace; font-size: 1.1rem; color: var(--gold-bright); }
  .copy-btn{
    font-family: 'Cinzel', serif;
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--moss); color: var(--parchment);
    border: 1px solid var(--line);
    padding: 9px 14px; border-radius: 4px;
    cursor:pointer; transition: background 0.2s, transform 0.15s;
  }
  .copy-btn:hover{ background: #4d5a44; }
  .copy-btn:active{ transform: scale(0.96); }

  .hero-ctas{ position:relative; z-index:2; margin-top: 26px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 13px 26px; border-radius: 4px; text-decoration:none;
    border: 1px solid var(--line); transition: all 0.25s;
  }
  .btn-primary{ background: linear-gradient(180deg, var(--blood), var(--blood-dark)); color: var(--parchment); border-color: rgba(201,169,97,0.4); }
  .btn-primary:hover{ box-shadow: 0 0 24px rgba(138,43,50,0.55); transform: translateY(-1px); }
  .btn-ghost{ color: var(--gold-bright); background: transparent; }
  .btn-ghost:hover{ background: rgba(201,169,97,0.08); }

  .scroll-cue{
    position:absolute; bottom: 26px; left:50%; transform: translateX(-50%);
    z-index:2; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.2em;
    font-family:'Cinzel', serif; text-transform: uppercase; opacity:0.7;
  }

  /* ---------- ORNAMENT DIVIDER ---------- */
  .ornament{
    display:flex; align-items:center; justify-content:center; gap:16px;
    padding: 6px 0 46px; opacity: 0.85;
  }
  .ornament svg{ width: 120px; height: auto; color: var(--gold); }

  /* ---------- SECTION SHELL ---------- */
  section.charter{ padding: 20px 6% 90px; max-width: 1180px; margin: 0 auto; }
  .section-head{ text-align:center; margin-bottom: 54px; }
  .section-head h2{ font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--gold-bright); margin-top: 10px; }
  .section-head p{ color: var(--muted); max-width: 560px; margin: 14px auto 0; }

  /* ---------- JOIN STEPS ---------- */
  .steps{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  }
  @media (max-width: 900px){ .steps{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }
  .step{
    position:relative;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 26px 22px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  }
  .step .rune{ font-family:'Cinzel Decorative', serif; font-size: 1.6rem; color: var(--blood); opacity:0.55; margin-bottom: 10px; }
  .step h3{ font-size: 1.02rem; color: var(--parchment); margin-bottom: 8px; letter-spacing: 0.02em; }
  .step p{ color: var(--muted); font-size: 0.95rem; margin:0; }

  /* ---------- STORE ---------- */
  .tiers{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  @media (max-width: 900px){ .tiers{ grid-template-columns: 1fr; max-width: 420px; margin:0 auto; } }
  .tier{
    position: relative;
    background: linear-gradient(180deg, var(--bg-panel), var(--bg-alt));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 36px 28px 30px;
    text-align:center;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .tier:hover{ transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,0.45); }
  .tier.featured{ border-color: var(--gold); box-shadow: 0 0 0 1px rgba(201,169,97,0.35), 0 20px 60px rgba(201,169,97,0.08); }
  .tier .seal{ width: 46px; height:46px; margin: 0 auto 16px; color: var(--gold); }
  .tier .name{ font-family:'Cinzel', serif; font-size: 1.3rem; color: var(--gold-bright); letter-spacing: 0.06em; }
  .tier .price{ font-family:'JetBrains Mono', monospace; color: var(--parchment); font-size: 1.5rem; margin: 12px 0 20px; }
  .tier .price span{ font-size: 0.85rem; color: var(--muted); }
  .tier ul{ list-style:none; padding:0; margin: 0 0 26px; text-align:left; }
  .tier li{ padding: 7px 0; border-bottom: 1px dashed rgba(201,169,97,0.15); color: var(--parchment); font-size: 0.95rem; }
  .tier li:last-child{ border-bottom: none; }
  .tier li::before{ content:"◆ "; color: var(--blood); font-size: 0.7em; }
  .tier .buy{
    display:inline-block; width:100%; text-align:center;
    font-family:'Cinzel', serif; font-size: 0.75rem; letter-spacing:0.1em; text-transform:uppercase;
    padding: 12px; border-radius: 4px; text-decoration:none;
    background: var(--moss); color: var(--parchment); border: 1px solid var(--line);
    transition: background 0.2s;
  }
  .tier.featured .buy{ background: linear-gradient(180deg, var(--blood), var(--blood-dark)); }
  .tier .buy:hover{ filter: brightness(1.15); }
  .tier .badge{
    position:absolute; top: -13px; left:50%; transform: translateX(-50%);
    background: var(--gold); color: #1a1204; font-family:'Cinzel', serif;
    font-size: 0.62rem; letter-spacing: 0.14em; text-transform:uppercase;
    padding: 5px 14px; border-radius: 20px;
  }

  /* ---------- RULES ---------- */
  .rules-tablet{
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 44px clamp(20px, 6vw, 60px);
    position: relative;
  }
  .rules-tablet::before, .rules-tablet::after{
    content:""; position:absolute; left: 50%; transform: translateX(-50%);
    width: 70%; height: 1px; background: var(--line);
  }
  .rules-tablet::before{ top: 14px; }
  .rules-tablet::after{ bottom: 14px; }
  .rules-list{ list-style:none; padding:0; margin:0; columns: 2; column-gap: 48px; }
  @media (max-width: 720px){ .rules-list{ columns: 1; } }
  .rules-list li{
    break-inside: avoid; display:flex; gap: 14px; align-items:flex-start;
    padding: 16px 0; border-bottom: 1px solid rgba(201,169,97,0.12);
  }
  .rules-list .num{ font-family:'Cinzel', serif; color: var(--blood); font-weight:700; font-size:0.95rem; min-width: 26px; }
  .rules-list .txt strong{ display:block; color: var(--gold-bright); font-family:'Cinzel', serif; font-size:0.88rem; letter-spacing:0.02em; margin-bottom: 3px; }
  .rules-list .txt span{ color: var(--muted); font-size: 0.94rem; }

  /* ---------- DISCORD BAND ---------- */
  .discord-band{
    margin: 0 6% 100px; padding: 60px clamp(20px,6vw,70px);
    border-radius: 10px; text-align:center;
    background:
      radial-gradient(ellipse 70% 100% at 50% 0%, rgba(88,101,242,0.14), transparent 60%),
      linear-gradient(180deg, var(--bg-panel), var(--bg-alt));
    border: 1px solid var(--line);
  }
  .discord-band h2{ font-size: clamp(1.6rem, 3.6vw, 2.2rem); color: var(--gold-bright); margin: 14px 0 12px; }
  .discord-band p{ color: var(--muted); max-width: 480px; margin: 0 auto 28px; }

  footer{
    text-align:center; padding: 34px 24px 44px;
    color: var(--muted); font-size: 0.85rem;
    border-top: 1px solid var(--line);
  }
  footer .brand span{ font-size: 0.95rem; }
  footer .fine{ margin-top: 8px; opacity: 0.6; font-size: 0.78rem; }

/* ---------- NAV AUTH ---------- */
.nav-auth{ display:flex; gap:10px; align-items:center; }
.nav-auth-btn{ padding: 8px 16px; font-size: 0.7rem; }
.nav-balance{
  font-family:'JetBrains Mono', monospace; color: var(--gold-bright);
  font-size: 0.85rem; padding: 8px 14px; border: 1px solid var(--line); border-radius: 4px;
}
@media (max-width: 720px){ .nav-auth{ display:none; } }

/* ---------- AUTH PAGES (login/register) ---------- */
.auth-wrap{
  min-height: 100svh; display:flex; align-items:center; justify-content:center;
  padding: 140px 20px 80px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(138,43,50,0.14), transparent 60%),
    var(--bg);
}
.auth-card{
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-alt));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 40px 34px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.auth-card .crest-sm{ width: 44px; height:44px; display:block; margin: 0 auto 16px; color: var(--gold); }
.auth-card h1{
  font-family:'Cinzel Decorative', serif; font-size: 1.6rem; text-align:center;
  color: var(--gold-bright); margin-bottom: 6px;
}
.auth-card .sub{ text-align:center; color: var(--muted); font-size: 0.92rem; margin-bottom: 28px; }

.field{ margin-bottom: 18px; }
.field label{
  display:block; font-family:'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.field input{
  width: 100%; background: rgba(0,0,0,0.25); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 14px; color: var(--parchment);
  font-family: 'EB Garamond', serif; font-size: 1rem;
  transition: border-color 0.2s;
}
.field input:focus{ outline:none; border-color: var(--gold); }

.auth-submit{
  width:100%; margin-top: 6px; cursor:pointer;
  font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 14px; border-radius: 4px; border: 1px solid rgba(201,169,97,0.4);
  background: linear-gradient(180deg, var(--blood), var(--blood-dark)); color: var(--parchment);
  transition: box-shadow 0.25s, transform 0.15s;
}
.auth-submit:hover{ box-shadow: 0 0 24px rgba(138,43,50,0.55); }
.auth-submit:active{ transform: scale(0.98); }
.auth-submit:disabled{ opacity: 0.55; cursor:not-allowed; }

.auth-switch{ text-align:center; margin-top: 22px; font-size: 0.92rem; color: var(--muted); }
.auth-switch a{ color: var(--gold-bright); text-decoration: none; border-bottom: 1px dotted var(--gold); }

.msg{
  border-radius: 4px; padding: 11px 14px; font-size: 0.9rem; margin-bottom: 18px;
  display:none; border: 1px solid transparent;
}
.msg.error{ display:block; background: rgba(138,43,50,0.15); border-color: rgba(138,43,50,0.5); color: #e8a8ad; }
.msg.success{ display:block; background: rgba(63,74,55,0.2); border-color: rgba(63,74,55,0.6); color: #c8e0bc; }

/* ---------- DASHBOARD ---------- */
.dash-wrap{ max-width: 900px; margin: 0 auto; padding: 140px 6% 100px; }
.dash-head{ text-align:center; margin-bottom: 46px; }
.dash-head h1{ font-family:'Cinzel Decorative', serif; font-size: clamp(1.8rem,4vw,2.6rem); color: var(--gold-bright); }
.dash-grid{ display:grid; grid-template-columns: 1.1fr 1.4fr; gap: 26px; }
@media (max-width: 780px){ .dash-grid{ grid-template-columns: 1fr; } }

.dash-panel{
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; padding: 30px 28px;
}
.dash-panel h2{ font-size: 1.1rem; color: var(--gold-bright); margin-bottom: 18px; letter-spacing: 0.03em; }

.balance-display{ text-align:center; padding: 18px 0 26px; }
.balance-display .amount{
  font-family:'JetBrains Mono', monospace; font-size: 2.6rem; color: var(--gold-bright);
}
.balance-display .cur{ font-size: 1.1rem; color: var(--muted); }
.balance-display .label{ font-family:'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.16em; text-transform:uppercase; color: var(--muted); margin-top: 6px; }

.mc-status{ display:flex; align-items:center; gap: 12px; padding: 14px 0; }
.mc-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--blood); flex-shrink:0; }
.mc-dot.linked{ background: #7fae6c; box-shadow: 0 0 10px rgba(127,174,108,0.6); }
.verify-code-box{
  font-family:'JetBrains Mono', monospace; font-size: 1.3rem; letter-spacing: 0.15em;
  color: var(--gold-bright); background: rgba(0,0,0,0.3); border: 1px dashed var(--line);
  border-radius: 4px; padding: 12px; text-align:center; margin: 14px 0;
}
.hint{ color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

.deposit-row{ display:flex; gap: 10px; flex-wrap:wrap; margin-bottom: 14px; }
.chip{
  font-family:'JetBrains Mono', monospace; padding: 9px 16px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--parchment); cursor:pointer; background: transparent;
  transition: all 0.2s;
}
.chip:hover, .chip.active{ border-color: var(--gold); color: var(--gold-bright); background: rgba(201,169,97,0.08); }

.logout-link{ display:block; text-align:center; margin-top: 30px; color: var(--muted); font-size: 0.88rem; text-decoration:none; border-bottom: 1px dotted var(--muted); }