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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #070709;
    color: #e0e0e0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Star field canvas */
#stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Mascot character canvas */
#mascot {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* Main content */
.container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* Aurora background effect */
.aurora {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.aurora::before,
.aurora::after {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background: radial-gradient(ellipse at 30% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
    animation: auroraDrift 20s ease-in-out infinite alternate;
}

.aurora::after {
    animation-delay: -10s;
    animation-direction: alternate-reverse;
    opacity: 0.7;
}

@keyframes auroraDrift {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(5%, 3%) rotate(2deg) scale(1.05); }
    66% { transform: translate(-3%, 5%) rotate(-1deg) scale(0.98); }
    100% { transform: translate(2%, -2%) rotate(1deg) scale(1.02); }
}

/* Profile image */
.profile-wrapper {
    position: relative;
    margin-bottom: 40px;
    opacity: 0;
    transform: scale(0.8);
    animation: fadeInScale 1s ease-out 0.3s forwards, float 6s ease-in-out infinite 1.3s;
}

.profile-wrapper::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899, #f97316, #3b82f6);
    background-size: 400% 400%;
    border-radius: 50%;
    animation: gradientRotate 6s ease infinite;
    z-index: -1;
    opacity: 0.7;
}

.profile-wrapper::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -2;
    animation: pulse 5s ease-in-out infinite;
}

.profile-img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #0a0a0f;
    display: block;
    transition: transform 0.3s ease;
}

.profile-wrapper:hover .profile-img {
    transform: scale(1.05);
}

@keyframes gradientRotate {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeInScale {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Name */
.name {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out 0.6s forwards;
    background: linear-gradient(90deg, #fff, #a0a0a0, #fff, #8b5cf6, #fff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.name:hover {
    animation: fadeInUp 0.8s ease-out 0.6s forwards, shimmer 2s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.tagline {
    font-size: 1.1rem;
    color: #888;
    font-weight: 400;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

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

/* Work badge */
.work-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: rgba(255, 140, 50, 0.1);
    border: 1px solid rgba(255, 140, 50, 0.3);
    border-radius: 50px;
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeIn 1s ease-out 0.9s forwards;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.work-badge:hover {
    background: rgba(255, 140, 50, 0.25);
    border-color: rgba(255, 140, 50, 0.8);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 30px rgba(255, 140, 50, 0.4), 0 0 25px rgba(255, 140, 50, 0.3), inset 0 0 15px rgba(255, 140, 50, 0.15);
}

.work-badge:hover span {
    text-shadow: 0 0 10px rgba(255, 140, 50, 0.5);
}

.work-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.work-badge span {
    color: #ff8c32;
    font-weight: 500;
    font-size: 1rem;
}

/* Bio section */
.bio {
    max-width: 550px;
    text-align: left;
    line-height: 1.8;
    color: #888;
    font-size: 0.95rem;
    margin-bottom: 50px;
    opacity: 0;
    animation: fadeIn 1s ease-out 1s forwards;
    list-style: none;
    padding: 0;
}

.bio li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.bio li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    border-radius: 50%;
}

.bio li:last-child {
    margin-bottom: 0;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Social links */
.social-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 1s ease-out 1.2s forwards;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #888;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50%;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(139, 92, 246, 0.5);
    color: #fff;
    transform: translateY(-6px) scale(1.1);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.2);
}

.social-link:hover::before {
    opacity: 1;
}

.social-link svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.social-link:hover svg {
    transform: scale(1.1);
}

/* Email link */
.email-link {
    margin-top: 30px;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0;
    animation: fadeIn 1s ease-out 1.4s forwards;
    transition: color 0.3s ease;
}

.email-link:hover {
    color: #8b5cf6;
}

/* Floating objects container */
.floating-objects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* Floating logos */
.floating-logo {
    position: absolute;
    width: 65px;
    height: 65px;
    animation: floatItem 20s ease-in-out infinite;
    transition: all 0.4s ease;
    pointer-events: auto !important;
    cursor: pointer;
    z-index: 10;
}

.floating-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.4;
    filter: grayscale(70%) brightness(0.9);
    transition: all 0.4s ease;
}

.floating-logo:hover {
    transform: scale(1.15);
    animation-play-state: paused;
}

.floating-logo:hover img {
    opacity: 1;
    filter: grayscale(0%) brightness(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 15px rgba(139, 92, 246, 0.4)) drop-shadow(0 0 25px rgba(236, 72, 153, 0.25));
}

/* Logo tooltips */
.floating-logo::after {
    content: attr(data-name) '\A' attr(data-role);
    white-space: pre;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: rgba(10, 10, 20, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.5);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #fff;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 100;
    min-width: 100px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(139, 92, 246, 0.2);
}

.floating-logo::after {
    line-height: 1.4;
}

.floating-logo:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    bottom: -55px;
}

/* Poker card wrapper and tooltip */
.poker-card-wrapper {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}

.poker-card-wrapper .card-tooltip {
    position: absolute;
    bottom: -55px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: rgba(10, 10, 20, 0.95);
    border: 1px solid rgba(251, 191, 36, 0.5);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #fff;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 100;
    min-width: 120px;
    white-space: pre-line;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(251, 191, 36, 0.2);
}

.poker-card-wrapper:hover .card-tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    bottom: -60px;
}

/* Spread logos evenly around edges */
.logo-1 { top: 8%; left: 55%; animation-duration: 22s; animation-delay: 0s; width: 78px; height: 78px; }      /* NASA - top center - 20% bigger */
.logo-2 { top: 75%; left: 85%; animation-duration: 25s; animation-delay: -5s; }   /* Rubin - bottom right */
.logo-3 { top: 85%; left: 58%; animation-duration: 28s; animation-delay: -10s; }  /* Dotlas - bottom center-right */
.logo-4 { top: 45%; left: 92%; animation-duration: 20s; animation-delay: -3s; }   /* UAS - right side */
.logo-5 { top: 75%; left: 15%; animation-duration: 24s; animation-delay: -8s; }   /* Flow - bottom left */
.logo-6 { top: 8%; left: 38%; animation-duration: 26s; animation-delay: -12s; width: 78px; height: 78px; }   /* ACES - 20% bigger */
.logo-7 { top: 45%; left: calc(11.5% - 20px); animation-duration: 23s; animation-delay: -7s; }   /* Brighton - between Flow and black hole */
.logo-8 { top: 85%; left: 25%; animation-duration: 21s; animation-delay: -14s; }  /* Cal - bottom left-center */

@keyframes floatItem {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(15px, -20px) rotate(8deg); }
    50% { transform: translate(-10px, 15px) rotate(-5deg); }
    75% { transform: translate(-20px, -10px) rotate(3deg); }
}

/* Black hole */
.black-hole {
    position: absolute;
    width: 110px;
    height: 110px;
    top: 15%;
    left: 8%;
    animation: floatBlackHole 30s ease-in-out infinite;
}

.event-horizon {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #000 0%, #000 60%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 20px 8px rgba(0, 0, 0, 0.8),
                0 0 40px 15px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

.accretion-disk {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(75deg);
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 140, 50, 0.8) 30deg,
        rgba(255, 200, 100, 0.9) 60deg,
        rgba(255, 255, 200, 1) 90deg,
        rgba(255, 200, 100, 0.9) 120deg,
        rgba(255, 140, 50, 0.8) 150deg,
        transparent 180deg,
        rgba(255, 100, 50, 0.6) 210deg,
        rgba(255, 150, 80, 0.7) 240deg,
        rgba(255, 200, 120, 0.8) 270deg,
        rgba(255, 150, 80, 0.7) 300deg,
        rgba(255, 100, 50, 0.6) 330deg,
        transparent 360deg
    );
    animation: spinDisk 8s linear infinite;
    filter: blur(2px);
    opacity: 0.7;
    z-index: 1;
}

.disk-2 {
    width: 70px;
    height: 70px;
    animation: spinDisk 5s linear infinite reverse;
    opacity: 0.8;
    filter: blur(1px);
    z-index: 2;
}

.disk-3 {
    width: 42px;
    height: 42px;
    animation: spinDisk 3s linear infinite;
    opacity: 0.9;
    filter: blur(0.5px);
    background: conic-gradient(
        from 0deg,
        rgba(255, 220, 180, 0.9) 0deg,
        rgba(255, 255, 220, 1) 90deg,
        rgba(255, 220, 180, 0.9) 180deg,
        rgba(255, 180, 120, 0.8) 270deg,
        rgba(255, 220, 180, 0.9) 360deg
    );
    z-index: 2;
}

.gravitational-lens {
    position: absolute;
    width: 110px;
    height: 110px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 20%,
        rgba(255, 200, 150, 0.05) 30%,
        rgba(255, 180, 120, 0.1) 40%,
        transparent 50%
    );
    box-shadow: inset 0 0 20px rgba(255, 150, 100, 0.2);
    animation: pulseLens 4s ease-in-out infinite;
}

@keyframes spinDisk {
    from { transform: translate(-50%, -50%) rotateX(75deg) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotateX(75deg) rotate(360deg); }
}

@keyframes pulseLens {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

@keyframes floatBlackHole {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(20px, 15px); }
    50% { transform: translate(-10px, 25px); }
    75% { transform: translate(-15px, -10px); }
}

/* Eye-shaped Nebula (like Helix/Cat's Eye) */
.spiral-galaxy {
    position: fixed;
    width: 180px;
    height: 180px;
    top: 10%;
    right: 10%;
    pointer-events: none;
    z-index: 5;
}

/* Outer ring - teal/cyan edge */
.nebula-cloud.cloud-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse 100% 60% at 50% 50%,
        transparent 40%,
        rgba(0, 200, 200, 0.15) 50%,
        rgba(0, 180, 180, 0.3) 60%,
        rgba(0, 150, 150, 0.2) 70%,
        transparent 80%
    );
    filter: blur(3px);
    opacity: 0.9;
    animation: pulseNebula 8s ease-in-out infinite;
}

/* Middle ring - purple/magenta */
.nebula-cloud.cloud-2 {
    position: absolute;
    width: 75%;
    height: 75%;
    top: 12.5%;
    left: 12.5%;
    border-radius: 50%;
    background: radial-gradient(ellipse 100% 70% at 50% 50%,
        transparent 30%,
        rgba(180, 80, 200, 0.2) 45%,
        rgba(200, 100, 220, 0.4) 55%,
        rgba(160, 60, 180, 0.25) 70%,
        transparent 85%
    );
    filter: blur(4px);
    opacity: 0.85;
    animation: pulseNebula 6s ease-in-out infinite reverse;
}

/* Inner ring - pink/red hot gas */
.nebula-cloud.cloud-3 {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    border-radius: 50%;
    background: radial-gradient(ellipse 100% 80% at 50% 50%,
        transparent 20%,
        rgba(255, 100, 150, 0.3) 40%,
        rgba(255, 80, 120, 0.5) 55%,
        rgba(200, 60, 100, 0.3) 70%,
        transparent 90%
    );
    filter: blur(2px);
    opacity: 0.9;
    animation: pulseNebula 5s ease-in-out infinite;
}

/* Central "eye" - bright core */
.nebula-cloud.cloud-4 {
    position: absolute;
    width: 25%;
    height: 25%;
    top: 37.5%;
    left: 37.5%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(200, 220, 255, 0.7) 30%,
        rgba(150, 180, 255, 0.4) 60%,
        transparent 100%
    );
    filter: blur(1px);
    opacity: 1;
    box-shadow: 0 0 20px 5px rgba(200, 220, 255, 0.5),
                0 0 40px 10px rgba(150, 180, 255, 0.3);
    animation: pulseCore 3s ease-in-out infinite;
}

@keyframes pulseNebula {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.05); opacity: 1; }
}

@keyframes pulseCore {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px 5px rgba(200, 220, 255, 0.5), 0 0 40px 10px rgba(150, 180, 255, 0.3); }
    50% { transform: scale(1.1); box-shadow: 0 0 30px 8px rgba(200, 220, 255, 0.7), 0 0 50px 15px rgba(150, 180, 255, 0.4); }
}

/* Star dust particles scattered through nebula */
.star-dust {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 30%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 65%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(2px 2px at 50% 20%, rgba(200,220,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 20% 55%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 45% 80%, rgba(255,200,220,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 25%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 45%, rgba(200,255,255,0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 55% 55%, rgba(255,220,255,0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 30%, rgba(255,255,255,0.65) 0%, transparent 100%);
    animation: twinkleStarDust 4s ease-in-out infinite;
}

.star-dust-2 {
    background-image:
        radial-gradient(1px 1px at 65% 40%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(2px 2px at 50% 45%, rgba(180,200,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 70%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 20% 25%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 85% 35%, rgba(255,180,200,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 75%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 45%, rgba(200,255,220,0.75) 0%, transparent 100%),
        radial-gradient(2px 2px at 60% 15%, rgba(220,200,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 55%, rgba(255,255,255,0.65) 0%, transparent 100%);
    animation: twinkleStarDust 5s ease-in-out infinite reverse;
    animation-delay: -2s;
}

/* Outer glow for the nebula */
.galaxy-glow {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(100, 180, 200, 0.08) 0%,
        rgba(180, 100, 200, 0.05) 30%,
        rgba(200, 80, 150, 0.03) 50%,
        transparent 70%
    );
    animation: pulseGlow 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes twinkleStarDust {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes floatGalaxy {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-10px, 12px); }
    50% { transform: translate(8px, -8px); }
    75% { transform: translate(12px, 5px); }
}

/* Poll styles */
.poll-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: rgba(20, 20, 30, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px 32px;
    z-index: 100;
    opacity: 0;
    animation: fadeIn 1s ease-out 2s forwards;
    min-width: 200px;
}

.poll-question {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
    text-align: center;
}

.poll-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 50px;
    align-items: flex-start;
}

.poll-btn {
    padding: 14px 32px;
    border-radius: 10px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.poll-btn-yes {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.poll-btn-yes:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}

.poll-btn-no {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    position: relative;
    transition: all 0.12s ease;
}

.poll-btn-no:hover {
    background: rgba(239, 68, 68, 0.3);
}

.thumbs-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
}

.floating-thumb {
    position: absolute;
    font-size: 16px;
    animation: thumbFloat 2s ease-out forwards;
    pointer-events: none;
}

@keyframes thumbFloat {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(var(--rot)); }
}

.poll-result {
    display: none;
    text-align: center;
    font-size: 1.3rem;
    color: #10b981;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { transform: scale(0); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Floating poker card - easter egg trigger */
.poker-card {
    position: relative;
    width: 50px;
    height: 70px;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    cursor: pointer;
    animation: floatCard 4s ease-in-out infinite;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    border: 2px solid #333;
}

.poker-card::before {
    content: 'A';
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 12px;
}

.poker-card::after {
    content: 'A';
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

.poker-card:hover {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5), 0 0 20px rgba(251, 191, 36, 0.4);
    border-color: #fbbf24;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(3deg); }
}

/* Slot machine */
.slot-machine {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: linear-gradient(180deg, #2d1f3d 0%, #1a1225 100%);
    border: 2px solid #fbbf24;
    border-radius: 16px;
    padding: 16px;
    z-index: 100;
    opacity: 0;
    animation: fadeIn 1s ease-out 2.5s forwards;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
}

.slot-title {
    text-align: center;
    color: #fbbf24;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.slot-reels {
    display: flex;
    gap: 4px;
    background: #000;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.slot-reel {
    width: 36px;
    height: 44px;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    overflow: hidden;
    border: 1px solid #333;
}

.slot-reel.spinning {
    animation: slotSpin 0.1s linear infinite;
}

@keyframes slotSpin {
    0% { transform: translateY(-5px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(-5px); }
}

.slot-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.slot-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.slot-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.slot-result {
    text-align: center;
    margin-top: 8px;
    font-size: 0.8rem;
    min-height: 20px;
    color: #10b981;
    font-weight: 500;
}

.slot-result.jackpot {
    font-size: 1.1rem;
    animation: jackpotPulse 0.5s ease infinite;
}

@keyframes jackpotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.slot-machine.winning {
    animation: slotGlow 0.3s ease infinite;
    box-shadow: 0 0 50px rgba(251, 191, 36, 0.8), 0 0 100px rgba(251, 191, 36, 0.4);
}

@keyframes slotGlow {
    0%, 100% { box-shadow: 0 0 50px rgba(251, 191, 36, 0.8), 0 0 100px rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 0 70px rgba(251, 191, 36, 1), 0 0 120px rgba(251, 191, 36, 0.6); }
}

/* Screen flash for jackpot */
.screen-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(251, 191, 36, 0.3);
    pointer-events: none;
    z-index: 999;
    animation: flashFade 0.5s ease forwards;
}

@keyframes flashFade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Big jackpot text */
.jackpot-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.8), 0 0 60px rgba(251, 191, 36, 0.5);
    z-index: 1001;
    animation: jackpotTextAnim 2s ease forwards;
    pointer-events: none;
}

@keyframes jackpotTextAnim {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 1; }
    40% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; }
    80% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.8) rotate(0deg); opacity: 0; }
}

/* Card rain animation */
.raining-card {
    position: fixed;
    font-size: 30px;
    pointer-events: none;
    z-index: 1000;
    animation: cardFall linear forwards;
}

@keyframes cardFall {
    0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Black hole suck-in animation */
.black-hole-expanded {
    position: fixed;
    pointer-events: none;
    z-index: 500;
    transform: translate(-50%, -50%);
    transition: none;
}

.black-hole-expanded .event-horizon {
    background: radial-gradient(circle, #000 0%, #000 60%, rgba(0,0,0,0.9) 80%, transparent 100%);
    box-shadow: 0 0 60px 30px rgba(0, 0, 0, 0.9),
                0 0 120px 60px rgba(0, 0, 0, 0.7),
                0 0 200px 100px rgba(0, 0, 0, 0.5);
}

.black-hole-expanded .accretion-disk {
    filter: blur(3px);
}

.black-hole-expanded .disk-2 {
    filter: blur(2px);
}

.black-hole-expanded .disk-3 {
    filter: blur(1px);
}

.screen-blackout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    pointer-events: none;
    z-index: 499;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.screen-blackout.active {
    opacity: 1;
}

.sucking .floating-logo,
.sucking .spiral-galaxy,
.sucking .container,
.sucking .poll-container,
.sucking .slot-machine,
.sucking .poker-card,
.sucking .aurora {
    transition: transform 1.5s cubic-bezier(0.55, 0.055, 0.675, 0.19),
                opacity 1.2s ease-in,
                filter 1s ease-in !important;
}

.big-bang-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 600;
}

.big-bang-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--bh-x, 50%) var(--bh-y, 50%),
        #fff 0%,
        rgba(255, 200, 100, 0.8) 20%,
        rgba(139, 92, 246, 0.5) 40%,
        transparent 70%);
    z-index: 700;
    animation: bigBangFlash 1.5s ease-out forwards;
    pointer-events: none;
}

@keyframes bigBangFlash {
    0% { opacity: 0; transform: scale(0); }
    10% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(3); }
}

.singularity {
    position: fixed;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    z-index: 550;
    box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.8),
                0 0 60px 30px rgba(255, 200, 100, 0.5),
                0 0 100px 50px rgba(139, 92, 246, 0.3);
    transform: translate(-50%, -50%);
    animation: singularityPulse 0.3s ease-in-out infinite;
}

@keyframes singularityPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
}

.proximity-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 400;
    background:
        radial-gradient(circle at var(--bh-x, 50%) var(--bh-y, 50%),
            rgba(139, 92, 246, 0.6) 0%,
            rgba(236, 72, 153, 0.4) 15%,
            rgba(255, 100, 50, 0.3) 30%,
            transparent 50%),
        radial-gradient(circle at var(--bh-x, 50%) var(--bh-y, 50%),
            transparent 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Platformer game styles */
#platformerGame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: none;
}

.game-ui {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2001;
    text-align: center;
    color: #fff;
    font-family: inherit;
    pointer-events: none;
}

.game-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
    margin-bottom: 8px;
}

.game-instructions {
    font-size: 0.9rem;
    color: #888;
}

.game-instructions kbd {
    background: rgba(255,255,255,0.1);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
}

@keyframes winGlowAnim {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

/* Trapdoor animation for jackpot */
.trapdoor-container {
    perspective: 500px;
}

.trapdoor-left,
.trapdoor-right {
    backface-visibility: visible;
}

/* Screen shake effect */
.screen-shake {
    animation: screenShake 0.3s ease-out;
}

@keyframes screenShake {
    0%, 100% { transform: translateX(0) translateY(0); }
    10% { transform: translateX(-10px) translateY(-5px); }
    20% { transform: translateX(10px) translateY(5px); }
    30% { transform: translateX(-8px) translateY(-3px); }
    40% { transform: translateX(8px) translateY(3px); }
    50% { transform: translateX(-5px) translateY(-2px); }
    60% { transform: translateX(5px) translateY(2px); }
    70% { transform: translateX(-3px) translateY(-1px); }
    80% { transform: translateX(3px) translateY(1px); }
    90% { transform: translateX(-1px) translateY(0); }
}

/* Responsive */

/* Large screens / smaller laptops */
@media (max-width: 1200px) {
    .floating-logo {
        width: 55px;
        height: 55px;
    }

    .logo-1, .logo-6 {
        width: 66px;
        height: 66px;
    }

    .spiral-galaxy {
        width: 150px;
        height: 150px;
    }

    .black-hole {
        width: 90px;
        height: 90px;
    }

    .black-hole .accretion-disk {
        width: 82px;
        height: 82px;
    }

    .black-hole .disk-2 {
        width: 57px;
        height: 57px;
    }

    .black-hole .disk-3 {
        width: 34px;
        height: 34px;
    }

    .black-hole .gravitational-lens {
        width: 90px;
        height: 90px;
    }

    .black-hole .event-horizon {
        width: 23px;
        height: 23px;
    }
}

/* Medium screens / tablets landscape */
@media (max-width: 1024px) {
    .container {
        padding: 30px 20px;
    }

    .profile-img {
        width: 200px;
        height: 200px;
    }

    .profile-wrapper {
        margin-bottom: 30px;
    }

    .tagline {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .bio {
        max-width: 480px;
        font-size: 0.9rem;
        margin-bottom: 40px;
    }

    .work-badge {
        padding: 10px 20px;
        margin-bottom: 30px;
    }

    .floating-logo {
        width: 50px;
        height: 50px;
    }

    .logo-1, .logo-6 {
        width: 60px;
        height: 60px;
    }

    .spiral-galaxy {
        width: 120px;
        height: 120px;
        top: 8%;
        right: 5%;
    }

    .black-hole {
        width: 80px;
        height: 80px;
        left: 5%;
    }

    .black-hole .accretion-disk {
        width: 72px;
        height: 72px;
    }

    .black-hole .disk-2 {
        width: 50px;
        height: 50px;
    }

    .black-hole .disk-3 {
        width: 30px;
        height: 30px;
    }

    .black-hole .gravitational-lens {
        width: 80px;
        height: 80px;
    }

    .black-hole .event-horizon {
        width: 20px;
        height: 20px;
    }

    .poll-container {
        bottom: 20px;
        right: 20px;
        padding: 20px 24px;
    }

    .poll-question {
        font-size: 1.1rem;
    }

    .slot-machine {
        bottom: 20px;
        left: 20px;
        padding: 14px;
    }

    .poker-card-wrapper {
        bottom: 60px;
    }
}

/* Tablets portrait */
@media (max-width: 768px) {
    .container {
        padding: 25px 15px;
    }

    .profile-img {
        width: 180px;
        height: 180px;
    }

    .profile-wrapper {
        margin-bottom: 25px;
    }

    .name {
        margin-bottom: 10px;
    }

    .tagline {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }

    .bio {
        max-width: 400px;
        font-size: 0.85rem;
        margin-bottom: 35px;
        line-height: 1.7;
    }

    .bio li {
        margin-bottom: 10px;
    }

    .work-badge {
        padding: 10px 18px;
        gap: 10px;
        margin-bottom: 25px;
    }

    .work-badge span {
        font-size: 0.9rem;
    }

    .work-logo {
        width: 28px;
        height: 28px;
    }

    .social-links {
        gap: 18px;
    }

    .social-link {
        width: 46px;
        height: 46px;
    }

    .social-link svg {
        width: 20px;
        height: 20px;
    }

    .email-link {
        margin-top: 25px;
        font-size: 0.85rem;
    }

    /* Hide decorative floating elements on tablets */
    .floating-logo {
        width: 45px;
        height: 45px;
        opacity: 0.7;
    }

    .logo-1, .logo-6 {
        width: 54px;
        height: 54px;
    }

    .spiral-galaxy {
        width: 100px;
        height: 100px;
        opacity: 0.6;
    }

    .black-hole {
        width: 70px;
        height: 70px;
        opacity: 0.6;
    }

    .black-hole .accretion-disk {
        width: 63px;
        height: 63px;
    }

    .black-hole .disk-2 {
        width: 44px;
        height: 44px;
    }

    .black-hole .disk-3 {
        width: 26px;
        height: 26px;
    }

    .black-hole .gravitational-lens {
        width: 70px;
        height: 70px;
    }

    .black-hole .event-horizon {
        width: 18px;
        height: 18px;
    }

    /* Stack poll and slot machine vertically on right side */
    .poll-container {
        bottom: auto;
        top: 15px;
        right: 15px;
        left: auto;
        padding: 16px 20px;
        min-width: 180px;
    }

    .poll-question {
        font-size: 1rem;
        margin-bottom: 16px;
    }

    .poll-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .slot-machine {
        bottom: auto;
        top: 15px;
        left: 15px;
        padding: 12px;
    }

    .slot-title {
        font-size: 0.8rem;
        margin-bottom: 10px;
    }

    .slot-reel {
        width: 32px;
        height: 40px;
        font-size: 20px;
    }

    .slot-btn {
        padding: 8px;
        font-size: 0.75rem;
    }

    .slot-result {
        font-size: 0.75rem;
    }

    .poker-card-wrapper {
        bottom: 50px;
    }

    .poker-card {
        width: 45px;
        height: 63px;
        font-size: 24px;
    }

    .poker-card::before,
    .poker-card::after {
        font-size: 10px;
    }

    .game-title {
        font-size: 1.3rem;
    }

    .game-instructions {
        font-size: 0.8rem;
    }

    .jackpot-text {
        font-size: 3rem;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .container {
        padding: 20px 15px;
        justify-content: flex-start;
        padding-top: 60px;
    }

    .profile-img {
        width: 150px;
        height: 150px;
    }

    .profile-wrapper {
        margin-bottom: 20px;
    }

    .profile-wrapper::after {
        top: -15px;
        left: -15px;
        right: -15px;
        bottom: -15px;
    }

    .name {
        margin-bottom: 8px;
    }

    .tagline {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    .bio {
        max-width: 100%;
        font-size: 0.8rem;
        margin-bottom: 30px;
        line-height: 1.6;
    }

    .bio li {
        margin-bottom: 8px;
        padding-left: 16px;
    }

    .bio li::before {
        width: 5px;
        height: 5px;
        top: 8px;
    }

    .work-badge {
        padding: 8px 16px;
        gap: 8px;
        margin-bottom: 20px;
    }

    .work-badge span {
        font-size: 0.85rem;
    }

    .work-logo {
        width: 24px;
        height: 24px;
    }

    .social-links {
        gap: 14px;
    }

    .social-link {
        width: 42px;
        height: 42px;
    }

    .social-link svg {
        width: 18px;
        height: 18px;
    }

    .email-link {
        margin-top: 20px;
        font-size: 0.8rem;
    }

    /* Hide decorative elements on mobile */
    .floating-logo,
    .black-hole,
    .spiral-galaxy {
        display: none;
    }

    /* Full-width poll at bottom */
    .poll-container {
        bottom: 15px;
        top: auto;
        right: 15px;
        left: 15px;
        padding: 14px 18px;
        min-width: auto;
    }

    .poll-question {
        font-size: 0.95rem;
        margin-bottom: 14px;
    }

    .poll-buttons {
        gap: 12px;
    }

    .poll-btn {
        padding: 10px 20px;
        font-size: 0.85rem;
        flex: 1;
        min-width: 0;
    }

    /* Hide slot machine on very small screens */
    .slot-machine {
        display: none;
    }

    .poker-card-wrapper {
        bottom: 100px;
    }

    .poker-card {
        width: 40px;
        height: 56px;
        font-size: 20px;
    }

    .poker-card::before,
    .poker-card::after {
        font-size: 9px;
    }

    .game-ui {
        top: 15px;
        width: 90%;
    }

    .game-title {
        font-size: 1.1rem;
    }

    .game-instructions {
        font-size: 0.75rem;
    }

    .jackpot-text {
        font-size: 2.5rem;
    }
}

/* Extra small phones */
@media (max-width: 360px) {
    .container {
        padding: 15px 12px;
        padding-top: 50px;
    }

    .profile-img {
        width: 130px;
        height: 130px;
    }

    .tagline {
        font-size: 0.85rem;
    }

    .bio {
        font-size: 0.75rem;
    }

    .social-links {
        gap: 12px;
    }

    .social-link {
        width: 38px;
        height: 38px;
    }

    .social-link svg {
        width: 16px;
        height: 16px;
    }

    .poll-container {
        padding: 12px 14px;
    }

    .poll-question {
        font-size: 0.85rem;
    }

    .poll-btn {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .container {
        padding: 15px 20px;
        justify-content: center;
    }

    .profile-img {
        width: 100px;
        height: 100px;
    }

    .profile-wrapper {
        margin-bottom: 15px;
    }

    .name {
        margin-bottom: 5px;
    }

    .tagline {
        margin-bottom: 15px;
        font-size: 0.85rem;
    }

    .bio {
        display: none;
    }

    .work-badge {
        margin-bottom: 15px;
        padding: 8px 16px;
    }

    .social-links {
        gap: 12px;
    }

    .social-link {
        width: 36px;
        height: 36px;
    }

    .email-link {
        margin-top: 15px;
    }

    .poll-container,
    .slot-machine,
    .poker-card-wrapper {
        display: none;
    }

    .floating-logo,
    .black-hole,
    .spiral-galaxy {
        display: none;
    }
}