/* ─── Starkspin — CSS commun ────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Bebas+Neue&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  background: #030303;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb { background: rgba(200,160,60,0.3); border-radius: 2px; }
*{scrollbar-width:thin;scrollbar-color:rgba(200,160,60,0.3) rgba(255,255,255,0.03)}

@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes dotBlink { 0%,100% { opacity:1; } 50% { opacity:0.2; } }
@keyframes shimmer { 0%,100% { opacity:0.5; } 50% { opacity:1; } }

/* ─── Doc root ──────────────────────────────────────────────────────────────── */
.doc-root { min-height:100vh; width:100%; background:radial-gradient(ellipse 80% 60% at 50% 0%,#1a1005 0%,#0d0d0d 55%,#050505 100%); font-family:'Cormorant Garamond',Georgia,serif; color:#e8e0d0; overflow-x:hidden; }
.doc-section { animation:fadeUp 0.4s ease both; position:relative; z-index:15; }
.doc-header { width:100%; border-bottom:1px solid rgba(200,160,60,0.15); display:flex; justify-content:space-between; align-items:center; }
.doc-layout { display:flex; max-width:1100px; margin:0 auto; }
.doc-nav { width:200px; flex-shrink:0; }
.doc-nav-sticky { position:sticky; top:40px; }
.doc-content { flex:1; min-width:0; }

.doc-nav-btn { display:block; width:100%; text-align:left; padding:9px 12px; margin-bottom:4px; border-radius:8px; border:none; border-left:2px solid transparent; cursor:pointer; background:transparent; color:rgba(200,180,160,0.4); font-family:sans-serif; font-size:12px; transition:all 0.2s; outline:none; }
.doc-nav-btn:hover { color:rgba(200,160,60,0.7); }
.doc-nav-btn.active { background:rgba(200,160,60,0.1); color:#c8a03c; border-left-color:#c8a03c; }

.doc-tabs { display:flex; gap:4px; overflow-x:auto; margin-bottom:24px; padding-bottom:4px; }
.doc-tab-btn { flex-shrink:0; padding:7px 14px; border-radius:20px; cursor:pointer; background:rgba(255,255,255,0.04); color:rgba(200,180,160,0.4); font-family:sans-serif; font-size:10px; letter-spacing:1px; border:1px solid rgba(255,255,255,0.06); outline:none; -webkit-tap-highlight-color:transparent; transition:all 0.2s; }
.doc-tab-btn.active { background:rgba(200,160,60,0.15); color:#c8a03c; border-color:rgba(200,160,60,0.15); }

.doc-card { background:rgba(11,11,11,0.9); position:relative; z-index:15; border:1px solid rgba(200,160,60,0.15); border-radius:12px; padding:20px 24px; }
.doc-card-sm { padding:14px 16px; }
.doc-card-purple { border-color:rgba(120,80,220,0.3); background:rgba(120,80,220,0.05); }

.doc-step { display:flex; gap:16px; margin-bottom:20px; }
.doc-step-num { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:rgba(200,160,60,0.1); border:1px solid rgba(200,160,60,0.15); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:14px; color:#c8a03c; padding-top:2px; margin-top:2px; }
.doc-step-title { font-size:13px; font-weight:600; color:#e8e0d0; font-family:sans-serif; margin-bottom:6px; }
.doc-step-body  { font-size:12px; color:rgba(200,180,160,0.6); font-family:sans-serif; line-height:1.7; }
.doc-step-body a { color:#c8a03c; }

.doc-code { background:rgba(5,5,5,0.9); position:relative; z-index:15; border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:10px 14px; margin:8px 0; font-family:monospace; font-size:11px; color:rgba(200,220,200,0.8); letter-spacing:0.5px; line-height:1.6; overflow-x:auto; word-break:break-all; }

.doc-divider { display:flex; align-items:center; gap:12px; margin:32px 0 24px; }
.doc-divider-l { flex:1; height:1px; background:linear-gradient(to right,transparent,rgba(200,160,60,0.15)); }
.doc-divider-r { flex:1; height:1px; background:linear-gradient(to left,transparent,rgba(200,160,60,0.15)); }
.doc-divider-dot { width:4px; height:4px; border-radius:50%; background:rgba(200,160,60,0.5); }

.doc-tag { display:inline-block; font-size:9px; letter-spacing:2px; padding:4px 7px 2px; border-radius:10px; font-family:sans-serif; text-transform:uppercase; font-weight:600; background:rgba(200,160,60,0.1); color:#c8a03c; border:1px solid rgba(200,160,60,0.15); }

.bet-row { display:grid; grid-template-columns:1fr 80px 80px 60px; gap:8px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-family:sans-serif; font-size:11px; align-items:center; }
.bet-type { color:#c8a03c; font-weight:600; }
.bet-meta { color:rgba(200,180,160,0.5); font-size:10px; }
.bet-mult { color:#ffd700; font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:13px; }

.wallet-cards { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.wallet-card { flex:1 1 160px; padding:14px 16px; border-radius:10px; background:rgba(200,160,60,0.05); border:1px solid rgba(200,160,60,0.15); text-decoration:none; transition:all 0.2s; display:block; }
.wallet-card:hover { border-color:rgba(200,160,60,0.5); background:rgba(200,160,60,0.1); text-decoration:none; }
.wallet-name { font-size:12px; font-weight:700; color:#c8a03c; font-family:sans-serif; margin-bottom:4px; }
.wallet-desc { font-size:11px; color:rgba(200,180,160,0.5); font-family:sans-serif; }

.entropy-grid { display:grid; gap:10px; }
.entropy-item { background:rgba(11,11,11,0.9); position:relative; z-index:15; border:1px solid rgba(255,255,255,0.05); border-radius:8px; padding:12px 14px; }
.entropy-label { font-size:10px; font-family:monospace; margin-bottom:6px; }
.entropy-desc  { font-size:11px; color:rgba(200,180,160,0.5); font-family:sans-serif; line-height:1.6; }

.red-nums { display:flex; flex-wrap:wrap; gap:6px; }
.red-num { width:32px; height:32px; border-radius:6px; background:rgba(139,21,21,0.8); border:1px solid rgba(192,57,43,0.5); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:white; font-family:sans-serif; }

.verify-card { display:flex; gap:12px; align-items:flex-start; }
.verify-icon  { flex-shrink:0; color:rgba(200,160,60,0.5); display:flex; align-items:flex-start; padding-top:2px; }
.verify-label { font-size:12px; font-weight:600; color:rgba(200,180,160,0.9); font-family:sans-serif; margin-bottom:4px; }
.verify-desc  { font-size:11px; color:rgba(200,180,160,0.5); font-family:sans-serif; line-height:1.6; }

.s-label { font-size:10px; letter-spacing:4px; color:rgba(200,160,60,0.5); text-transform:uppercase; font-family:sans-serif; margin-bottom:8px; }
.s-h1    { color:#ffffff; font-family:'Bebas Neue',sans-serif; letter-spacing:4px; margin-bottom:8px; }
.s-h2    { font-size:18px; color:#ffffff; font-family:'Bebas Neue',sans-serif; letter-spacing:3px; }
.s-p     { font-family:sans-serif; color:rgba(200,180,160,0.6); line-height:1.7; }

a { color:#c8a03c; text-decoration:none; }
a:hover { text-decoration:underline; }

.doc-footer { text-align:center; border-top:1px solid rgba(200,160,60,0.15); margin-top:40px; }
.doc-footer-links { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:8px; }
.doc-footer-link { font-size:10px; color:rgba(200,160,60,0.3); font-family:sans-serif; letter-spacing:2px; text-decoration:none; transition:color 0.2s; }
.doc-footer-link:hover { color:#c8a03c; text-decoration:none; }

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .doc-layout { flex-direction:column; }
  .doc-nav { width:100%; }
  .entropy-grid { grid-template-columns:1fr; }
}
@media (min-width: 768px) {
  .doc-tabs { display:none; }
  .doc-layout { padding:40px 48px; }
  .doc-nav { margin-right:48px; }
  .entropy-grid { grid-template-columns:1fr 1fr; }
}

/* ── Golden stardust ── */
@keyframes twinkle1 { 0%,100%{opacity:0.15} 50%{opacity:0.7} }
@keyframes twinkle2 { 0%,100%{opacity:0.1} 40%{opacity:0.55} }
@keyframes twinkle3 { 0%,100%{opacity:0.12} 60%{opacity:0.6} }
.stardust { position:fixed; border-radius:50%; background:#c8a03c; pointer-events:none; z-index:10; }

/* ── Golden info card (replaces purple) ── */
.doc-card-gold { border-color:rgba(200,160,60,0.3); background:rgba(15,12,5,0.9); }

/* ── Mobile ── */
@media (max-width: 767px) {
  .doc-header-subtitle { display:none !important; }
  .doc-nav { margin-bottom:24px; }
}