* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

:root {
    color-scheme: dark;
    --ink: #080d13;
    --text: #edf5fa;
    --muted: rgba(213, 227, 238, 0.68);
    --aqua: #73e5dc;
    --aqua-strong: #42cfc5;
    --glass: rgba(28, 89, 96, 0.23);
    --glass-hover: rgba(38, 133, 137, 0.38);
    --line: rgba(133, 231, 220, 0.34);
}

html, body { min-height: 100%; }

body {
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    color: var(--text);
    background: var(--ink);
    font-family: 'Space Grotesk', sans-serif;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 18% 18%, rgba(32, 113, 156, 0.25), transparent 38%),
        radial-gradient(ellipse at 82% 72%, rgba(22, 126, 117, 0.20), transparent 42%),
        radial-gradient(ellipse at 58% 5%, rgba(185, 125, 53, 0.10), transparent 34%),
        linear-gradient(145deg, #101923 0%, #080d13 48%, #0c151c 100%);
    animation: atmosphere 18s ease-in-out infinite alternate;
}

@keyframes atmosphere {
    from { background-position: 0% 0%, 100% 100%, 50% 0%, 0% 0%; }
    to { background-position: 20% 12%, 80% 75%, 60% 10%, 0% 0%; }
}

.container {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 420px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 48px 24px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (min-width: 768px) {
    .container {
        min-height: 90vh;
        margin: 5vh auto;
        padding: 50px 30px;
        border: 1px solid rgba(185, 218, 237, 0.13);
        border-radius: 24px;
        background: linear-gradient(145deg, rgba(20, 34, 47, 0.72), rgba(11, 19, 28, 0.76));
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
}

.ambient-glow {
    position: absolute;
    top: 14%;
    z-index: -1;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(26, 144, 178, 0.22);
    filter: blur(62px);
    pointer-events: none;
    animation: glowDrift 7s ease-in-out infinite alternate;
}

@keyframes glowDrift {
    to { transform: translate(22px, 16px) scale(1.12); opacity: 0.72; }
}

.skeleton-wrapper {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(8, 13, 19, 0.84);
    backdrop-filter: blur(12px);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.skeleton-wrapper.loaded { visibility: hidden; opacity: 0; pointer-events: none; }
.shimmer { border-radius: 50px; background: linear-gradient(90deg, rgba(255,255,255,0.035) 25%, rgba(114,200,242,0.16) 50%, rgba(255,255,255,0.035) 75%); background-size: 200% 100%; animation: shimmerMove 1.5s infinite; }
@keyframes shimmerMove { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.sk-avatar { width: 95px; height: 95px; margin-bottom: 10px; border-radius: 50%; }
.sk-title { width: 160px; height: 24px; margin-bottom: 8px; border-radius: 6px; }
.sk-subtitle { width: 110px; height: 14px; margin-bottom: 8px; border-radius: 4px; }
.sk-card { width: 88%; height: 48px; margin-bottom: 14px; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

body.web-ready .fade-in { opacity: 0; animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }

.profile { display: flex; flex-direction: column; align-items: center; }
.avatar { width: 100px; height: 100px; margin: 0 auto 12px; padding: 4px; border: 2px solid rgba(91, 207, 220, 0.78); border-radius: 50%; background: rgba(16, 24, 33, 0.9); box-shadow: 0 0 0 6px rgba(74, 191, 215, 0.06), 0 0 34px rgba(36, 165, 203, 0.30), 0 10px 28px rgba(0,0,0,0.58); animation: floatAvatar 4s ease-in-out infinite; object-fit: cover; }
@keyframes floatAvatar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.greeting { margin-bottom: 5px; color: var(--muted); font-size: 0.72rem; letter-spacing: 1px; }
h1 { margin-bottom: 5px; color: #f3f8fc; font-size: 1.65rem; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; text-shadow: 0 0 24px rgba(92, 197, 232, 0.28); }
.username { margin-bottom: 8px; color: var(--aqua); font-size: 0.72rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; }

.profile-discord { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 28px; padding: 6px 11px; border: 1px solid rgba(133, 231, 220, 0.24); border-radius: 999px; background: rgba(15, 35, 40, 0.48); color: var(--muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; }
.profile-discord > i { color: var(--aqua); font-size: 0.88rem; }

.links-container { display: flex; width: 90%; margin: 0 auto; flex-direction: column; gap: 14px; }
.link-card { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 12px; overflow: hidden; padding: 15px 22px; border: 1px solid rgba(133, 231, 220, 0.34); border-radius: 50px; background: var(--glass); color: #eafffc; font-size: 0.88rem; font-weight: 600; letter-spacing: 1.5px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.link-card::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-110%); background: linear-gradient(105deg, transparent 10%, rgba(131, 244, 227, 0.16) 48%, rgba(114, 200, 242, 0.12) 65%, transparent 90%); transition: transform 0.65s ease; }
.link-card > i { position: relative; z-index: 2; width: 20px; color: var(--aqua); font-size: 1.15rem; text-align: center; transition: transform 0.25s ease, color 0.25s ease; }
.link-card > span { position: relative; z-index: 2; transition: letter-spacing 0.25s ease; }
.link-card:hover, .link-card:active { transform: translateY(-3px) scale(1.025); border-color: rgba(115, 229, 220, 0.62); background: var(--glass-hover); box-shadow: 0 12px 30px rgba(0,0,0,0.36), 0 0 22px rgba(52, 200, 194, 0.18); }
.link-card:hover::before, .link-card:active::before { transform: translateX(110%); }
.link-card:hover > i, .link-card:active > i { transform: scale(1.15); color: #fff; }
.link-card:hover > span, .link-card:active > span { letter-spacing: 1.8px; }

.discord-icon-wrapper { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; }
.discord-icon-wrapper > i { color: var(--aqua); }
.discord-status-dot { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #74808b; box-shadow: 0 0 0 2px rgba(8, 13, 19, 0.75); transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.discord-status-dot.status-online { background: #43d17d; box-shadow: 0 0 9px rgba(67, 209, 125, 0.75); }
.discord-status-dot.status-idle { background: #ffbf69; box-shadow: 0 0 9px rgba(255, 191, 105, 0.70); }
.discord-status-dot.status-dnd { background: #ff5b68; box-shadow: 0 0 9px rgba(255, 91, 104, 0.70); }
.discord-status-dot.status-offline { background: #74808b; }

.ripple { position: absolute; z-index: 1; border-radius: 50%; transform: scale(0); background: rgba(131, 244, 227, 0.22); pointer-events: none; animation: ripple-anim 0.6s linear; }
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }
.footer { margin-top: 42px; color: rgba(213, 227, 238, 0.43); font-size: 0.6rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; }

@media (max-width: 420px) { .container { padding-right: 18px; padding-left: 18px; } .links-container { width: 94%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }