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

:root {
  --ash:   #c8bfb0;
  --bone:  #e8dfd0;
  --rust:  #8b3a2a;
  --blood: #5c1a0e;
  --dark:  #0a0806;
  --gold:  #b8922a;
  --dim:   #3a3028;
}

html, body { width:100%; height:100%; background:var(--dark); color:var(--bone); font-family:'Cormorant Garamond',serif; overflow:hidden; }

canvas#bg { position:fixed; inset:0; z-index:0; pointer-events:none; }

body::after {
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size:180px; opacity:0.06; mix-blend-mode:overlay;
}
body::before {
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,0.88) 100%);
}

/* Topbar */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:50; height:56px;
  display:flex; align-items:center; justify-content:space-between; padding:0 32px;
  background:rgba(10,8,6,0.72); border-bottom:1px solid rgba(184,146,42,0.1); backdrop-filter:blur(14px);
}
.topbar-brand { display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer; }
.topbar-name { font-family:'Cinzel Decorative',serif; font-size:15px; font-weight:700; color:var(--bone); letter-spacing:0.08em; }
#topbar-status { font-family:'Cinzel Decorative',serif; font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ash); padding:7px 16px; border:1px solid rgba(184,146,42,0.2); transition:all 0.3s; }

/* Stage */
.stage { position:relative; z-index:10; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding-top:56px; }

/* Card */
.card {
  width:min(500px,92vw); padding:50px 46px 42px;
  background:rgba(10,8,6,0.8); border:1px solid rgba(184,146,42,0.18);
  backdrop-filter:blur(16px); position:relative;
  animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) both;
}
.card::before { content:''; position:absolute; top:-1px; left:-1px; width:22px; height:22px; border:2px solid var(--gold); border-right:none; border-bottom:none; opacity:0.5; }
.card::after  { content:''; position:absolute; bottom:-1px; right:-1px; width:22px; height:22px; border:2px solid var(--gold); border-left:none; border-top:none; opacity:0.5; }
.c-tr { position:absolute; top:-1px; right:-1px; width:22px; height:22px; border:2px solid var(--gold); border-left:none; border-bottom:none; opacity:0.5; }
.c-bl { position:absolute; bottom:-1px; left:-1px; width:22px; height:22px; border:2px solid var(--gold); border-right:none; border-top:none; opacity:0.5; }

/* Views */
.view { display:none; flex-direction:column; align-items:center; text-align:center; }
.view.active { display:flex; animation:fadeUp 0.45s cubic-bezier(0.16,1,0.3,1) both; }

/* Typography */
.eyebrow { font-family:'Cinzel Decorative',serif; font-size:9px; letter-spacing:0.45em; text-transform:uppercase; color:var(--gold); opacity:0.65; margin-bottom:10px; display:block; }
.view h1 { font-family:'Cinzel Decorative',serif; font-size:clamp(42px,8vw,60px); font-weight:900; line-height:1; color:var(--bone); text-shadow:0 0 40px rgba(184,146,42,0.3); animation:pulseGlow 4s ease-in-out infinite alternate; margin-bottom:8px; }
.view h2 { font-family:'Cinzel Decorative',serif; font-size:clamp(20px,4vw,28px); font-weight:700; color:var(--bone); letter-spacing:0.06em; margin-bottom:8px; }
.sub { font-style:italic; font-size:13px; letter-spacing:0.18em; color:var(--ash); opacity:0.5; }
.desc { font-size:14px; font-weight:300; font-style:italic; line-height:1.85; color:var(--ash); opacity:0.8; max-width:380px; letter-spacing:0.02em; }

/* Divider */
.divider { display:flex; align-items:center; gap:14px; width:100%; margin:22px 0; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:linear-gradient(to right,transparent,rgba(184,146,42,0.3)); }
.divider::after { transform:scaleX(-1); }
.divider span { font-family:'Cinzel Decorative',serif; font-size:13px; color:var(--gold); opacity:0.4; }

/* Step dots */
.steps { display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.step-dot { width:8px; height:8px; border:1px solid rgba(184,146,42,0.35); border-radius:50%; background:transparent; transition:all 0.4s ease; }
.step-dot.active { background:var(--gold); border-color:var(--gold); box-shadow:0 0 10px rgba(184,146,42,0.5); }
.step-dot.done { background:rgba(184,146,42,0.35); border-color:rgba(184,146,42,0.5); }
.step-line { flex:1; height:1px; background:rgba(184,146,42,0.15); }

/* Buttons */
.btn-stack { display:flex; flex-direction:column; gap:11px; width:100%; margin-top:26px; }
.btn {
  cursor:pointer; border:none; width:100%; padding:15px 26px;
  font-family:'Cinzel Decorative',serif; font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  transition:all 0.3s ease; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.btn:disabled { opacity:0.45; cursor:not-allowed; transform:none !important; }
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.04); opacity:0; transition:opacity 0.2s; }
.btn:not(:disabled):hover::after { opacity:1; }

.btn-primary { background:linear-gradient(135deg,var(--rust) 0%,var(--blood) 100%); color:var(--bone); border:1px solid rgba(139,58,42,0.5); }
.btn-primary:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(92,26,14,0.5),0 0 0 1px rgba(184,146,42,0.2); }

.btn-ghost { background:transparent; color:var(--ash); border:1px solid rgba(184,146,42,0.2); }
.btn-ghost:not(:disabled):hover { border-color:rgba(184,146,42,0.45); color:var(--bone); }

.btn-discord { background:linear-gradient(135deg,#3a4a9a 0%,#2a3680 100%); color:#fff; border:1px solid rgba(88,101,242,0.4); }
.btn-discord:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(88,101,242,0.28); }

.btn-roblox { background:linear-gradient(135deg,#c23a3a 0%,#8a1a1a 100%); color:#fff; border:1px solid rgba(226,68,68,0.4); }
.btn-roblox:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(226,68,68,0.22); }

.btn-danger { background:transparent; color:#c47a6a; border:1px solid rgba(139,58,42,0.3); font-size:9px; }
.btn-danger:not(:disabled):hover { background:rgba(92,26,14,0.2); border-color:rgba(139,58,42,0.55); }

.btn-icon { width:17px; height:17px; flex-shrink:0; }
.spinner { width:13px; height:13px; border:2px solid rgba(255,255,255,0.2); border-top-color:rgba(255,255,255,0.75); border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0; }

/* Profile */
.avatar-row { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:18px; }
.avatar-wrap { display:flex; flex-direction:column; align-items:center; gap:7px; }
.avatar-wrap img { width:68px; height:68px; border-radius:50%; border:2px solid rgba(184,146,42,0.22); box-shadow:0 0 18px rgba(184,146,42,0.1); object-fit:cover; }
.avatar-label { font-family:'Cinzel Decorative',serif; font-size:8px; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); opacity:0.55; }
.avatar-sep { font-size:20px; color:var(--gold); opacity:0.25; margin-bottom:14px; }
.profile-name { font-size:19px; font-weight:600; color:var(--bone); letter-spacing:0.04em; margin-bottom:6px; }
.profile-ids { font-size:11px; letter-spacing:0.06em; color:var(--ash); opacity:0.6; line-height:1.9; }

/* Discord mini badge (step 2) */
.discord-badge { display:flex; align-items:center; gap:10px; padding:10px 16px; border:1px solid rgba(88,101,242,0.25); background:rgba(58,74,154,0.12); margin-bottom:4px; }
.discord-badge img { width:36px; height:36px; border-radius:50%; border:1px solid rgba(88,101,242,0.3); object-fit:cover; }
.discord-badge-name { font-size:13px; color:var(--bone); font-weight:400; }
.discord-badge-label { font-family:'Cinzel Decorative',serif; font-size:7px; letter-spacing:0.2em; color:#7289da; opacity:0.7; text-transform:uppercase; }

/* ToS foot */
.tos-foot { margin-top:18px; }
.tos-foot button { background:none; border:none; cursor:pointer; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px; letter-spacing:0.08em; color:var(--dim); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(58,48,40,0.5); transition:color 0.2s; padding:4px 8px; }
.tos-foot button:hover { color:var(--ash); }

/* Error box */
.error-box { width:100%; padding:12px 16px; background:rgba(92,26,14,0.3); border:1px solid rgba(139,58,42,0.4); border-left:3px solid var(--rust); font-size:12px; letter-spacing:0.04em; color:#d49080; line-height:1.65; margin-bottom:18px; animation:fadeUp 0.3s ease both; }

/* Modals */
.modal-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.8); backdrop-filter:blur(7px); align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }

.modal { width:min(460px,90vw); background:#110e0b; border:1px solid rgba(184,146,42,0.22); padding:40px 36px 32px; position:relative; animation:fadeUp 0.4s cubic-bezier(0.16,1,0.3,1) both; }

.modal-confirm { text-align:center; }
.modal-confirm .conf-icon { font-size:26px; margin-bottom:14px; opacity:0.4; filter:sepia(1) saturate(2) hue-rotate(-10deg); }
.modal-confirm h2 { font-family:'Cinzel Decorative',serif; font-size:18px; color:var(--bone); letter-spacing:0.08em; margin-bottom:14px; }
.modal-confirm p { font-size:13px; font-weight:300; line-height:1.85; color:var(--ash); opacity:0.85; }
.modal-actions { display:flex; justify-content:center; gap:12px; margin-top:26px; flex-wrap:wrap; }
.modal-actions .btn { width:auto; padding:13px 26px; }

.modal-tos { padding:0; max-height:72vh; overflow-y:auto; }
.modal-tos-inner { padding:36px 34px 28px; }
.modal-tabs { display:flex; border-bottom:1px solid rgba(184,146,42,0.14); margin-bottom:26px; }
.modal-tab { background:none; border:none; cursor:pointer; font-family:'Cinzel Decorative',serif; font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--dim); padding:9px 18px 11px; transition:color 0.2s; position:relative; }
.modal-tab::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--gold); opacity:0; transition:opacity 0.2s; }
.modal-tab:hover { color:var(--ash); }
.modal-tab.active { color:var(--gold); }
.modal-tab.active::after { opacity:1; }
.modal-section { display:none; }
.modal-section.active { display:block; }
.modal-section h3 { font-family:'Cinzel Decorative',serif; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); opacity:0.8; margin:18px 0 7px; }
.modal-section p { font-size:13px; font-weight:300; line-height:1.85; color:var(--ash); margin-bottom:11px; }
.modal-section ul { padding-left:18px; margin-bottom:10px; }
.modal-section ul li { font-size:13px; font-weight:300; line-height:1.75; color:var(--ash); margin-bottom:4px; }
.modal-date { font-size:11px; letter-spacing:0.06em; color:var(--dim); margin-bottom:6px; }
.modal-consent { margin-top:16px; padding:11px 14px; border-left:2px solid rgba(184,146,42,0.3); font-style:italic; font-size:12px; line-height:1.7; color:var(--ash); opacity:0.7; }
.modal-close-btn { display:block; margin:22px auto 0; cursor:pointer; padding:10px 26px; font-family:'Cinzel Decorative',serif; font-size:9px; letter-spacing:0.25em; background:transparent; color:var(--ash); border:1px solid rgba(200,191,176,0.18); transition:all 0.25s; }
.modal-close-btn:hover { border-color:rgba(200,191,176,0.42); color:var(--bone); }
.inline-link { background:none; border:none; cursor:pointer; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:13px; color:var(--gold); opacity:0.85; text-decoration:underline; text-underline-offset:3px; padding:0; transition:opacity 0.2s; }
.inline-link:hover { opacity:1; }
.modal-tos::-webkit-scrollbar { width:4px; }
.modal-tos::-webkit-scrollbar-track { background:transparent; }
.modal-tos::-webkit-scrollbar-thumb { background:rgba(184,146,42,0.2); border-radius:2px; }

/* Footer */
.site-footer { position:fixed; bottom:0; left:0; right:0; z-index:20; text-align:center; padding:14px; font-size:11px; letter-spacing:0.08em; color:var(--dim); background:linear-gradient(to top,rgba(10,8,6,0.7),transparent); }
.footer-link { background:none; border:none; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:11px; letter-spacing:0.08em; color:var(--dim); text-decoration:underline; text-underline-offset:3px; transition:color 0.2s; padding:0; }
.footer-link:hover { color:var(--ash); }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes pulseGlow { from{text-shadow:0 0 30px rgba(184,146,42,0.2),0 0 60px rgba(139,58,42,0.1)} to{text-shadow:0 0 55px rgba(184,146,42,0.45),0 0 110px rgba(139,58,42,0.3)} }
@keyframes spin { to{transform:rotate(360deg)} }