/* ==================================================
         style.css — organized, documented, utility-first
         Keeps visual rules separate from HTML and removes
         inline styles for better maintenance.
         ================================================== */

:root {
        /* Black / White / Gold theme */
        --bg: #000000;            /* page background */
        --card: #0b0b0b;          /* card background */
        --accent: #d4af37;       /* primary gold */
        --accent-2: #f0d77a;     /* lighter gold */
        --muted: #bfbfbf;        /* muted light gray */
        --glass: rgba(255,255,255,0.03);
        --text: #ffffff;         /* main text */
}

/* --- Reset / base ----------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
        margin: 0;
        font-family: Poppins, Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        /* layered subtle background with gentle motion feel */
        background: radial-gradient(900px 400px at 10% 10%, rgba(212,175,55,0.035), transparent), var(--bg);
        color: var(--text);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
}

.container { width: 100%; max-width: 980px; }

/* --- Header / hero --------------------------------------------------- */
header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.avatar {
        width: 92px; height: 92px; border-radius: 18px;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; color: #0b0b0b; font-size: 20px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
.floating{ animation: float 4s ease-in-out infinite; }
@keyframes float{ 0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)} }

.hero-logo { width: 84px; height: 84px; object-fit:cover; border-radius:14px; display:block }
.avatar-fallback{ display:none; font-weight:700 }
.avatar img + .avatar-fallback{ display:none }
.avatar .avatar-fallback{ display:block }
h1 { margin: 0; font-size: 28px; }
.subtitle { color: var(--muted); margin-top: 6px; }

/* --- Layout ----------------------------------------------------------- */
.grid { display: grid; grid-template-columns: 1fr 360px; gap: 20px; }
@media (max-width: 880px) {
        .grid { grid-template-columns: 1fr; }
        .header-actions { justify-self: start; }
}

/* --- Cards ------------------------------------------------------------ */
.card {
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        border-radius: 12px;
        padding: 18px;
        /* subtle inner white border plus gold outline */
        border: 1px solid rgba(255,255,255,0.03);
        box-shadow: 0 6px 20px rgba(0,0,0,0.6);
        outline: 1px solid rgba(212,175,55,0.18);
}
.card { transition: transform .18s ease, box-shadow .18s ease, outline .12s ease; }
.card:hover{ transform: translateY(-8px); box-shadow: 0 20px 42px rgba(0,0,0,0.6); outline: 2px solid var(--accent); }
.card + .card { margin-top: 16px; }
.right-col .card + .card { margin-top: 14px; }
.card h3 { margin: 0; }

/* --- Buttons / actions ------------------------------------------------ */
.buttons { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.button,
a.button,
button.button { /* make buttons share styles */
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 12px; border-radius: 10px; text-decoration: none;
        background: rgba(255,255,255,0.03); color: var(--text); border: 1px solid rgba(255,255,255,0.06);
        font-weight: 600; cursor: pointer; border: none;
}
a.button { display: inline-flex; }
a.primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #0b0b0b; }

/* --- Typography ------------------------------------------------------- */
.muted { color: var(--muted); }
.small { font-size: 13px; color: var(--muted); }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* --- Right column / status ------------------------------------------- */
.right-col { position: relative; }
.status { display: flex; gap: 10px; align-items: center; }
.live-dot { width: 12px; height: 12px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px rgba(212,175,55,0.25); }
.live-dot.pulse{ animation: pulse 1.6s infinite; }
@keyframes pulse{ 0%{ box-shadow: 0 0 0 0 rgba(212,175,55,0.18);}70%{ box-shadow: 0 0 0 8px rgba(212,175,55,0);}100%{ box-shadow: 0 0 0 0 rgba(212,175,55,0);} }

/* --- Merch ------------------------------------------------------------ */
.merch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.merch { background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)); padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.03); display: flex; gap: 10px; align-items: center; }
.merch img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }

.merch-link { display: block; text-decoration: none; color: inherit; }

.badge{ display:inline-block;background:var(--accent);color:#0b0b0b;padding:4px 8px;border-radius:999px;font-size:12px;margin-left:8px;font-weight:700 }

/* small layout helper */
.stack{ display:flex; flex-direction:column; gap:6px }

/* Make section headers gold */
.card h2, .card h3 { color: var(--accent); margin: 0 0 8px 0; }

/* --- Footer ----------------------------------------------------------- */
footer.card { margin-top: 18px; text-align: center; color: var(--muted); font-size: 13px; }

/* --- Socials (creative pills) ---------------------------------------- */
.social a{
        display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;text-decoration:none;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b0b0b;font-weight:700;box-shadow:0 6px 18px rgba(212,175,55,0.12);transform:translateZ(0);
}
.social a::before{ content:'🔗'; }
.social a:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 20px 40px rgba(212,175,55,0.12); }
.social a + a{ margin-left:8px }

/* --- Copy tooltip ---------------------------------------------------- */
.copied { position: fixed; left: 50%; transform: translateX(-50%); bottom: 28px; background: #ffffff; color: #0b0b0b; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(212,175,55,0.12); display: none; }
.copied.show { display: block; }

/* --- Utilities ------------------------------------------------------- */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }

/* small layout & typography utilities used by the HTML */
.row { display: flex; align-items: center; gap: 8px; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.justify-center { justify-content: center; }
.fw-700 { font-weight: 700; }
.hidden { display: none; }

/* gold utility */
.gold { color: var(--accent); }

/* small responsive tweak for merch grid */
@media (max-width: 560px) {
        .merch-grid { grid-template-columns: 1fr; }
}

/* end of stylesheet */