:root {
    --bg-color: #070b16;
    --card-bg: #131416;
    --accent: #e6eeff;
    --text-main: #c4d0ea;
    --text-dim: #8a95ad;
    --cathode-glow: rgba(125, 158, 222, 0.18);
    --border: rgba(132, 153, 198, 0.28);
    --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--bg-color);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

/* Wallpaper Background */
.wallpaper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(180deg, rgba(3, 4, 6, 0.72) 0%, rgba(4, 5, 8, 0.8) 52%, rgba(3, 3, 5, 0.86) 100%),
        url('../../../assets/pages/home/images/wallpapers/wallpaper.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(0.22) saturate(0.65) contrast(1.04) brightness(0.46);
    z-index: -1;
    transform: scale(1.02);
    animation: wallpaper-drift 42s ease-in-out infinite alternate;
}

.wallpaper::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(56% 38% at 80% 14%, rgba(55, 137, 234, 0.13) 0%, rgba(55, 137, 234, 0) 72%),
        radial-gradient(44% 30% at 20% 88%, rgba(158, 170, 192, 0.1) 0%, rgba(158, 170, 192, 0) 75%);
    opacity: 0.5;
    pointer-events: none;
}

.wallpaper::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(130% 86% at 50% 36%, transparent 40%, rgba(0, 0, 0, 0.74) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.54) 100%);
    pointer-events: none;
}

@keyframes wallpaper-drift {
    from { transform: scale(1.02) translate3d(-4px, -2px, 0); }
    to { transform: scale(1.04) translate3d(4px, 2px, 0); }
}

/* Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.02;
    z-index: 100;
    background-image: var(--grain);
}

/* Scanline Effect */
.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 51%,
        transparent 51%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 5;
}

.card-container {
    width: 340px;
    position: relative;
    perspective: 1000px;
    animation: float 6s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotateX(2deg); }
    50% { transform: translateY(-15px) rotateX(-2deg); }
}

/* The Card */
.card {
    width: 340px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.52), inset 0 0 24px var(--cathode-glow);
    backdrop-filter: blur(20px);
}

/* Banner */
.banner {
    height: 100px;
    background: #000000;
    border-bottom: 1px solid var(--border);
}

/* Profile Section */
.profile-header {
    padding: 0 16px;
    position: relative;
    margin-top: -42px;
    margin-bottom: 12px;
}

.pfp-container {
    width: 84px;
    height: 84px;
    background: var(--card-bg);
    border-radius: 50%;
    padding: 3px;
    position: relative;
}

.pfp {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #222 url('../../../assets/pages/home/images/profile/pfp.png') center / cover no-repeat;
    border: 1px solid var(--border);
}

.status-indicator {
    width: 22px;
    height: 22px;
    background: #0d152b;
    border-radius: 50%;
    position: absolute;
    bottom: 4px;
    right: 4px;
    border: 4px solid var(--bg-color);
    box-shadow: 0 0 12px rgba(6, 10, 22, 0.55);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
}

.status-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
}

/* Badges */
.badges {
    position: absolute;
    right: 16px;
    top: 52px;
    display: flex;
    gap: 4px;
    background: rgba(12, 18, 35, 0.55);
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.badge-item {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.badge-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
    transition: transform 0.18s ease;
}

.badge-item:hover .badge-icon,
.badge-item:focus-visible .badge-icon {
    transform: translateY(-1px) scale(1.05);
}

.badge-item:focus-visible {
    outline: 1px solid rgba(185, 207, 255, 0.72);
    outline-offset: 2px;
    border-radius: 4px;
}

.badge-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(132, 141, 158, 0.35);
    background: #161a20;
    color: #d6dbe5;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 9999;
}

.badge-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: #161a20;
    border-right: 1px solid rgba(132, 141, 158, 0.35);
    border-bottom: 1px solid rgba(132, 141, 158, 0.35);
    transform: translateX(-50%) rotate(45deg);
}

.badge-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Content */
.content {
    padding: 0 16px 20px 16px;
}

.username-row {
    margin-bottom: 12px;
}

.username {
    font-size: 20px;
    color: var(--accent);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.discriminator {
    color: var(--text-dim);
    font-family: 'Space Mono', monospace;
    font-size: 14px;
}

.divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}

.section-title {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 700;
}

.identity-line {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: var(--accent);
    letter-spacing: -0.3px;
    margin-bottom: 10px;
    text-shadow: 0 0 14px rgba(188, 211, 255, 0.2);
}

.bio {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main);
}

.bio-link {
    color: #3789EA;
    text-decoration: none;
    border-bottom: 1px solid rgba(55, 137, 234, 0.42);
    transition: color 0.14s ease, border-color 0.14s ease;
}

.bio-prefix {
    color: var(--text-dim);
    margin-right: 6px;
}

.bio-link:hover,
.bio-link:focus-visible {
    color: #66a5ef;
    border-color: rgba(102, 165, 239, 0.78);
    outline: none;
}

/* Now Playing Section */
.activity-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    position: relative;
    overflow: hidden;
}

.activity-image {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: #1a1a1a;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.activity-image::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--grain);
    opacity: 0.08;
}

.song-cover::after {
    display: none;
}

.song-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.activity-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.activity-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}

.activity-state {
    font-size: 11px;
    color: var(--text-dim);
    font-family: 'Space Mono', monospace;
}

.audio-player {
    display: none;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.player-toggle {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.player-toggle:hover {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.04);
}

.player-toggle:focus-visible {
    outline: 1px solid rgba(185, 207, 255, 0.72);
    outline-offset: 2px;
}

.player-icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
    display: block;
}

.player-icon-pause {
    display: none;
}

.player-toggle.is-playing .player-icon-play {
    display: none;
}

.player-toggle.is-playing .player-icon-pause {
    display: block;
}

.player-main {
    flex: 1;
    min-width: 0;
}

.player-time {
    display: block;
    white-space: nowrap;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
}

.player-progress {
    --player-track-size: 3px;
    --player-thumb-size: 10px;
    width: 100%;
    margin: 0;
    cursor: pointer;
    accent-color: #98a8c7;
    height: 12px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.player-progress::-webkit-slider-runnable-track {
    height: var(--player-track-size);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.player-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--player-thumb-size);
    height: var(--player-thumb-size);
    margin-top: calc((var(--player-track-size) - var(--player-thumb-size)) / 2);
    border-radius: 50%;
    background: #c7d5f0;
    border: 0;
}

.player-progress::-moz-range-progress {
    height: var(--player-track-size);
    border-radius: 999px;
    background: #c7d5f0;
}

.player-progress::-moz-range-track {
    height: var(--player-track-size);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.player-progress::-moz-range-thumb {
    width: var(--player-thumb-size);
    height: var(--player-thumb-size);
    border-radius: 50%;
    background: #c7d5f0;
    border: 0;
}

.player-bottom {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.volume-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 86px;
}

.volume-icon {
    width: 11px;
    height: 11px;
    fill: var(--text-dim);
    flex-shrink: 0;
}

.volume-slider {
    --volume-track-size: 2px;
    --volume-thumb-size: 8px;
    width: 72px;
    margin: 0;
    cursor: pointer;
    accent-color: #98a8c7;
    height: 12px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.volume-slider::-webkit-slider-runnable-track {
    height: var(--volume-track-size);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--volume-thumb-size);
    height: var(--volume-thumb-size);
    margin-top: calc((var(--volume-track-size) - var(--volume-thumb-size)) / 2);
    border-radius: 50%;
    background: #c7d5f0;
    border: 0;
}

.volume-slider::-moz-range-track {
    height: var(--volume-track-size);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.volume-slider::-moz-range-progress {
    height: var(--volume-track-size);
    border-radius: 999px;
    background: #c7d5f0;
}

.volume-slider::-moz-range-thumb {
    width: var(--volume-thumb-size);
    height: var(--volume-thumb-size);
    border-radius: 50%;
    background: #c7d5f0;
    border: 0;
}

.movie-subtitle {
    position: absolute;
    left: 50%;
    top: calc(100% + 26px);
    width: 100%;
    --sync-rx: 0deg;
    --sync-ry: 0deg;
    transform: translateX(-50%) perspective(1000px) rotateX(calc(14deg + var(--sync-rx))) rotateY(var(--sync-ry));
    text-align: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.38), inset 0 0 18px rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.14s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 30;
}

.movie-subtitle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.05), transparent 38%, transparent 62%, rgba(255, 255, 255, 0.03));
    pointer-events: none;
    z-index: 0;
}

.movie-subtitle.is-hidden,
.movie-subtitle.is-empty {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) perspective(1000px) rotateX(14deg) rotateY(0deg);
    pointer-events: none;
}

.movie-subtitle-line {
    margin: 0;
    position: relative;
    z-index: 1;
    font-family: 'Space Mono', monospace;
    font-size: clamp(14px, 1.55vw, 19px);
    font-weight: 700;
    letter-spacing: 0.9px;
    line-height: 1.26;
    color: var(--text-main);
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05),
        0 2px 0 rgba(0, 0, 0, 0.94),
        0 4px 0 rgba(0, 0, 0, 0.8),
        0 8px 12px rgba(0, 0, 0, 0.84),
        0 16px 28px rgba(0, 0, 0, 0.82);
    white-space: pre-wrap;
    transition: color 0.16s ease, text-shadow 0.16s ease;
}

.movie-subtitle-line.is-refresh {
    animation: subtitle-line-burst 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes subtitle-line-burst {
    0% {
        opacity: 0;
        transform: translateY(7px) scale(0.985);
        filter: blur(0.9px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.movie-subtitle:not(.is-hidden):not(.is-empty):hover .movie-subtitle-line {
    color: var(--accent);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 0 rgba(0, 0, 0, 0.95),
        0 4px 0 rgba(0, 0, 0, 0.84),
        0 10px 14px rgba(0, 0, 0, 0.9),
        0 18px 34px rgba(0, 0, 0, 0.86);
}

.enter-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.enter-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.enter-gate {
    width: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    transform: translateY(0);
    transition: opacity 0.16s ease;
}

.enter-gate:hover {
    opacity: 0.92;
}

.enter-gate:focus-visible {
    outline: 1px dashed rgba(187, 194, 209, 0.46);
    outline-offset: 8px;
}

.enter-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(20px, 1.9vw, 34px);
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: lowercase;
    color: #8d93a0;
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.68);
    transition: color 0.16s ease;
    animation: enter-title-pulse 2.4s ease-in-out infinite;
    transform-origin: center;
}

.enter-subtitle {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.55px;
    color: #5d6472;
    text-transform: lowercase;
    transition: color 0.16s ease;
}

.enter-gate:hover .enter-title {
    color: #a3a9b6;
}

.enter-gate:hover .enter-subtitle {
    color: #6a7280;
}

@keyframes enter-title-pulse {
    0% {
        color: #737b89;
        text-shadow: 0 3px 16px rgba(0, 0, 0, 0.62);
        transform: scale(0.985);
        opacity: 0.84;
    }
    50% {
        color: #c7ceda;
        text-shadow:
            0 3px 30px rgba(0, 0, 0, 0.76),
            0 0 22px rgba(167, 176, 196, 0.32);
        transform: scale(1.015);
        opacity: 1;
    }
    100% {
        color: #737b89;
        text-shadow: 0 3px 16px rgba(0, 0, 0, 0.62);
        transform: scale(0.985);
        opacity: 0.84;
    }
}

.card:hover .scanlines {
    animation: flicker 0.1s infinite;
}

@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 0.9; }
}

/* CRT Screen curve simulation */
.card::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 10;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}