/* ===== ARTUR RIASON111 - TOKYO GHOUL EDITION ===== */

:root {
    --ghoul-red: #ff2d55;
    --blood-red: #c41e3a;
    --pure-white: #ffffff;
    --cream-white: #0a0a0f;
    --dark-red: #8b0000;
    --neon-green: #00ff41;
    --space-black: #050508;
    --nebula-purple: #1a0a2e;
}

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

/* Performance optimizations */
.floating-flower,
.floating-star,
.rocket-wrapper,
.roulette-track {
    will-change: transform;
}

.content-section {
    contain: layout style;
}

.roulette-frame {
    contain: layout paint;
}

body {
    background: var(--space-black);
    color: var(--pure-white);
    font-family: 'Russo One', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===== SPACE BACKGROUND ===== */
.bg-flowers {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: 
        /* Stars */
        radial-gradient(1px 1px at 20px 30px, white, transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 50px 160px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90px 40px, white, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 160px 120px, white, transparent),
        radial-gradient(1px 1px at 200px 50px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 220px 150px, white, transparent),
        radial-gradient(1px 1px at 300px 90px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 350px 180px, white, transparent),
        radial-gradient(1px 1px at 400px 60px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 450px 130px, white, transparent),
        radial-gradient(1px 1px at 500px 200px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 550px 40px, white, transparent),
        radial-gradient(1.5px 1.5px at 600px 100px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 650px 170px, white, transparent),
        radial-gradient(1px 1px at 700px 80px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 750px 220px, white, transparent),
        radial-gradient(1px 1px at 800px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 850px 140px, white, transparent),
        /* Nebula glow */
        radial-gradient(ellipse at 10% 90%, rgba(255, 45, 85, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 10%, rgba(196, 30, 58, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(26, 10, 46, 0.3) 0%, transparent 70%),
        radial-gradient(ellipse at 80% 80%, rgba(255, 45, 85, 0.08) 0%, transparent 40%);
    background-color: var(--space-black);
    background-size: 900px 300px, 900px 300px, 900px 300px, 900px 300px, 900px 300px,
                     900px 300px, 900px 300px, 900px 300px, 900px 300px, 900px 300px,
                     900px 300px, 900px 300px, 900px 300px, 900px 300px, 900px 300px,
                     900px 300px, 900px 300px, 900px 300px, 900px 300px, 900px 300px,
                     100% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: twinkle 8s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0% { opacity: 1; }
    100% { opacity: 0.85; }
}

/* ===== FLOATING FLOWERS ===== */
.floating-flower {
    position: fixed;
    z-index: 1;
    opacity: 0.7;
    animation: floatFlower 20s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 45, 85, 0.8)) drop-shadow(0 0 30px rgba(255, 45, 85, 0.4));
}

.floating-flower:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; width: 80px; height: 80px; }
.floating-flower:nth-child(2) { top: 60%; right: 10%; animation-delay: -5s; width: 100px; height: 100px; }
.floating-flower:nth-child(3) { bottom: 20%; left: 15%; animation-delay: -10s; width: 70px; height: 70px; }
.floating-flower:nth-child(4) { top: 30%; right: 5%; animation-delay: -15s; width: 90px; height: 90px; }

.floating-flower g path {
    fill: #ff2d55;
    stroke: #ff6b8a;
}

.floating-flower g circle {
    fill: #ffd700;
}

@keyframes floatFlower {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(-30px) rotate(10deg); }
    75% { transform: translateY(-15px) rotate(5deg); }
}

/* ===== FLOATING ABSURD STARS ===== */
.floating-star {
    position: fixed;
    width: 150px;
    height: 150px;
    z-index: 0;
    opacity: 0.25;
    filter: drop-shadow(0 0 20px rgba(255, 45, 85, 0.6));
    animation: floatStar 15s ease-in-out infinite, spinStar 20s linear infinite;
}

.floating-star-left {
    left: 3%;
    top: 40%;
    animation-delay: 0s;
}

.floating-star-right {
    right: 3%;
    top: 35%;
    animation-delay: -7s;
    animation-direction: reverse;
}

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

@keyframes spinStar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== TOP BANNER ===== */
.top-banner {
    background: linear-gradient(135deg, var(--ghoul-red), var(--blood-red));
    color: var(--pure-white);
    padding: 15px;
    text-align: center;
    font-size: 0.9rem;
    border-bottom: 3px solid var(--dark-red);
}

.top-banner .steam-rant {
    font-size: 1.1rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.top-banner .no-prank {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 204, 0, 0.5);
    animation: shake 0.5s infinite;
}

/* ===== ANIMATIONS ===== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.glitch {
    position: relative;
    animation: glitch 2s infinite;
}

@keyframes glitch {
    0%, 90%, 100% { transform: translate(0); }
    92% { transform: translate(-3px, 0); filter: hue-rotate(90deg); }
    94% { transform: translate(3px, 0); }
    96% { transform: translate(-2px, 0); filter: hue-rotate(-90deg); }
    98% { transform: translate(2px, 0); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes avatarPulse {
    0%, 100% { box-shadow: 0 0 0 5px var(--pure-white), 0 0 0 10px var(--ghoul-red), 0 0 30px rgba(196, 30, 58, 0.5); }
    50% { box-shadow: 0 0 0 5px var(--pure-white), 0 0 0 10px var(--ghoul-red), 0 0 60px rgba(196, 30, 58, 0.8); }
}

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

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

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


/* ===== HEADER ===== */
header {
    text-align: center;
    padding: 40px 20px;
    position: relative;
    background: linear-gradient(180deg, rgba(196, 30, 58, 0.05), transparent);
}

.avatar-container {
    width: 180px;
    height: 180px;
    margin: 0 auto 30px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 2;
    border: 6px solid #ff2d55;
    box-shadow: 
        0 0 0 4px var(--pure-white),
        0 0 0 8px #ff2d55,
        0 0 40px rgba(255, 45, 85, 0.6);
    transition: none;
}

.avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 3;
    border-radius: 50%;
}

/* ===== PLANET SYSTEM (Orbiting Ascendants) ===== */
.planet-system {
    position: relative;
    width: 350px;
    height: 350px;
    margin: 0 auto 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.orbit {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: orbitRotate 8s linear infinite;
    pointer-events: none;
}

.orbit-1 { animation-duration: 6s; }
.orbit-2 { animation-duration: 8s; animation-direction: reverse; }
.orbit-3 { animation-duration: 10s; }
.orbit-4 { animation-duration: 7s; animation-direction: reverse; }
.orbit-5 { animation-duration: 9s; }
.orbit-6 { animation-duration: 5s; animation-direction: reverse; }

.orbiting-rank {
    position: absolute;
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 45, 85, 0.5));
    animation: counterRotate 8s linear infinite;
}

.orbit-1 .orbiting-rank { top: 5%; left: 50%; animation-duration: 6s; }
.orbit-2 .orbiting-rank { top: 50%; right: 0%; animation-duration: 8s; animation-direction: reverse; }
.orbit-3 .orbiting-rank { bottom: 10%; left: 15%; animation-duration: 10s; }
.orbit-4 .orbiting-rank { top: 20%; left: 5%; animation-duration: 7s; animation-direction: reverse; }
.orbit-5 .orbiting-rank { bottom: 5%; right: 20%; animation-duration: 9s; }
.orbit-6 .orbiting-rank { top: 35%; right: 5%; animation-duration: 5s; animation-direction: reverse; }

@keyframes orbitRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes counterRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

h1 {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: #ff2d55;
    text-shadow: 0 0 30px rgba(255, 45, 85, 0.6), 3px 3px 0 var(--pure-white), 6px 6px 0 #aa0022;
    letter-spacing: 5px;
    margin-bottom: 10px;
    transition: none;
}

h2 {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--ghoul-red);
    text-align: center;
    margin-bottom: 40px;
    text-shadow: 0 0 20px rgba(255, 45, 85, 0.5), 2px 2px 0 var(--dark-red);
}

/* ===== DONATION BUTTON ===== */
.donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 35px;
    margin: 20px 0;
    background: linear-gradient(135deg, #ff6b00, #ff2d55, #ff6b00);
    background-size: 200% 200%;
    color: var(--pure-white);
    text-decoration: none;
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 3px;
    border-radius: 50px;
    border: 3px solid #ffd700;
    box-shadow: 
        0 0 20px rgba(255, 107, 0, 0.6),
        0 0 40px rgba(255, 45, 85, 0.4),
        0 5px 30px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    animation: donateGlow 2s ease-in-out infinite, gradientShift 3s ease infinite;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
}

.donate-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: rotate(45deg);
    animation: donateShine 3s ease-in-out infinite;
}

.donate-btn:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 
        0 0 40px rgba(255, 107, 0, 0.8),
        0 0 80px rgba(255, 45, 85, 0.6),
        0 10px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.2);
    border-color: #fff;
}

.donate-btn:active {
    transform: scale(1.02);
}

.donate-icon {
    font-size: 1.5rem;
    animation: donateIconBounce 1s ease-in-out infinite;
}

.donate-text {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.donate-hearts {
    font-size: 1.2rem;
    animation: donateHeartPulse 1s ease-in-out infinite;
}

@keyframes donateGlow {
    0%, 100% { 
        box-shadow: 
            0 0 20px rgba(255, 107, 0, 0.6),
            0 0 40px rgba(255, 45, 85, 0.4),
            0 5px 30px rgba(0, 0, 0, 0.3),
            inset 0 0 20px rgba(255, 255, 255, 0.1);
    }
    50% { 
        box-shadow: 
            0 0 30px rgba(255, 107, 0, 0.8),
            0 0 60px rgba(255, 45, 85, 0.6),
            0 5px 30px rgba(0, 0, 0, 0.3),
            inset 0 0 30px rgba(255, 255, 255, 0.2);
    }
}

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

@keyframes donateShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

@keyframes donateIconBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-5deg); }
    75% { transform: translateY(-3px) rotate(5deg); }
}

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

.subtitle {
    font-size: 1.5rem;
    color: var(--blood-red);
    margin-bottom: 20px;
    font-style: italic;
}

.intro {
    font-size: 1.3rem;
    color: #ddd;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
    background: rgba(10, 10, 15, 0.8);
    padding: 20px;
    border-radius: 15px;
    border: 3px solid var(--ghoul-red);
    box-shadow: 0 0 30px rgba(255, 45, 85, 0.2);
    backdrop-filter: blur(10px);
}

.intro span {
    color: var(--ghoul-red);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 45, 85, 0.5);
}

/* ===== TAB BUTTONS ===== */
.tab-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 30px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.tab-btn {
    padding: 15px 30px;
    font-family: 'Russo One', sans-serif;
    font-size: 1rem;
    background: rgba(15, 15, 25, 0.9);
    color: var(--ghoul-red);
    border: 3px solid var(--ghoul-red);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 4px 4px 0 var(--blood-red), 0 0 15px rgba(255, 45, 85, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
}

.tab-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ghoul-red), 0 0 25px rgba(255, 45, 85, 0.4);
}

.tab-btn.active {
    background: var(--ghoul-red);
    color: var(--pure-white);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--blood-red), 0 0 30px rgba(255, 45, 85, 0.5);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.tab-btn .icon {
    font-size: 1.3rem;
}

/* ===== CONTENT SECTIONS ===== */
.content-section {
    display: none;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeIn 0.4s ease;
}

.content-section.active {
    display: block;
}

/* ===== FACT CARDS ===== */
.facts-grid {
    display: grid;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.fact-card {
    background: rgba(15, 15, 25, 0.9);
    border: 3px solid var(--ghoul-red);
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 5px 5px 0 var(--blood-red), 0 0 20px rgba(255, 45, 85, 0.15);
    backdrop-filter: blur(10px);
}

.fact-card:hover {
    transform: translate(-5px, -5px);
    box-shadow: 10px 10px 0 var(--ghoul-red), 0 0 40px rgba(255, 45, 85, 0.3);
}

.fact-card .icon {
    font-size: 2rem;
    margin-right: 15px;
}

.fact-card p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ddd;
}

.fact-card .highlight {
    color: var(--ghoul-red);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 45, 85, 0.5);
}

.fact-card.special {
    background: linear-gradient(145deg, rgba(255, 45, 85, 0.2), rgba(15, 15, 25, 0.95));
    border-width: 4px;
    box-shadow: 5px 5px 0 var(--blood-red), 0 0 30px rgba(255, 45, 85, 0.25);
}

/* ===== GAME CARDS ===== */
.games-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.game-card {
    width: 300px;
    background: rgba(15, 15, 25, 0.9);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    border: 3px solid var(--ghoul-red);
    transition: all 0.4s ease;
    box-shadow: 5px 5px 0 var(--blood-red), 0 0 25px rgba(255, 45, 85, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 320px;
    backdrop-filter: blur(10px);
}

.game-card:hover {
    transform: translateY(-10px) rotate(2deg);
    box-shadow: 10px 15px 0 var(--ghoul-red), 0 0 50px rgba(255, 45, 85, 0.35);
}

.game-card h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    letter-spacing: 3px;
    color: var(--ghoul-red);
}

.rank-image {
    width: 120px;
    height: 120px;
    margin: 20px 0;
    object-fit: contain;
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
    display: block;
    flex-shrink: 0;
}

.game-card:hover .rank-image {
    transform: scale(1.15) rotate(-5deg);
}

.rank-name {
    font-size: 1.3rem;
    color: var(--pure-white);
    margin-top: 15px;
    padding: 10px 20px;
    background: var(--ghoul-red);
    border-radius: 25px;
    display: inline-block;
}

/* ===== MESSAGES SECTION ===== */
.messages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.message-card {
    background: rgba(15, 15, 25, 0.95);
    border: 3px solid var(--ghoul-red);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 0 30px rgba(255, 45, 85, 0.2);
}

.message-card:hover {
    transform: translateY(-10px) rotate(1deg);
    box-shadow: 0 0 50px rgba(255, 45, 85, 0.4), 0 20px 40px rgba(0, 0, 0, 0.3);
}

.message-header {
    background: linear-gradient(135deg, var(--ghoul-red), var(--blood-red));
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.message-icon {
    font-size: 1.5rem;
}

.message-title {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pure-white);
    letter-spacing: 2px;
}

.message-image-wrapper {
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.message-screenshot {
    max-width: 100%;
    border-radius: 10px;
    border: 2px solid rgba(255, 45, 85, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.message-card:hover .message-screenshot {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 45, 85, 0.3);
}

.message-caption {
    background: rgba(255, 45, 85, 0.1);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(255, 45, 85, 0.2);
    border-bottom: 1px solid rgba(255, 45, 85, 0.2);
}

.caption-emoji {
    font-size: 1.3rem;
}

.message-caption span:last-child {
    font-family: 'Russo One', sans-serif;
    font-size: 1.2rem;
    color: var(--ghoul-red);
    font-style: italic;
}

.message-description {
    padding: 15px 20px;
    color: #aaa;
    font-size: 0.95rem;
    text-align: center;
}

/* ===== ROCKET ANIMATION ===== */
.plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .plans-grid {
        grid-template-columns: 1fr;
    }
}

.plan-column {
    display: flex;
    flex-direction: column;
}

.plan-title {
    text-align: center;
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 15px;
}

.expectation-title {
    color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), transparent);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.reality-title {
    color: #888;
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.2), transparent);
    text-shadow: 0 0 10px rgba(100, 100, 100, 0.5);
}

.rocket-container {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 20px;
    border: 3px solid var(--ghoul-red);
    box-shadow: 0 0 50px rgba(255, 45, 85, 0.2);
}

.rocket-container.expectation {
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.1) 0%, rgba(255, 45, 85, 0.05) 50%, transparent 70%);
}

.rocket-container.reality {
    background: radial-gradient(ellipse at center, rgba(100, 100, 100, 0.1) 0%, rgba(50, 50, 50, 0.05) 50%, transparent 70%);
    border-color: #555;
}

.rank-track {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 10px;
}

.rank-station {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.3;
    transform: scale(0.7);
    transition: all 0.5s ease;
    animation: stationPulse 8s ease-in-out infinite;
    animation-delay: var(--delay);
}

.rank-station img {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transition: all 0.5s ease;
}

.rank-station span {
    margin-top: 5px;
    font-size: 0.65rem;
    color: #888;
    transition: all 0.5s ease;
}

.rank-station.radiant-station img {
    width: 55px;
    height: 55px;
}

.rank-station.radiant-station span {
    color: #ffd700;
    font-size: 0.8rem;
    font-weight: bold;
}

.rank-station.sad-station img {
    width: 55px;
    height: 55px;
}

.rank-station.sad-station span {
    color: #ff4444;
    font-size: 0.8rem;
}

.reality-station {
    animation: stationPulseDown 8s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes stationPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.7); }
    12.5% { opacity: 1; transform: scale(1); }
    25% { opacity: 0.3; transform: scale(0.7); }
}

@keyframes stationPulseDown {
    0%, 100% { opacity: 0.3; transform: scale(0.7); }
    12.5% { opacity: 1; transform: scale(1); filter: grayscale(0); }
    25% { opacity: 0.3; transform: scale(0.7); filter: grayscale(0.5); }
}

/* Rocket Wrapper */
.rocket-wrapper {
    position: absolute;
    z-index: 10;
}

.rocket {
    width: 70px;
    height: 105px;
    filter: drop-shadow(0 0 20px rgba(255, 45, 85, 0.8));
}

.rocket.falling {
    filter: drop-shadow(0 0 10px rgba(100, 100, 100, 0.5));
}

.rocket-svg {
    width: 100%;
    height: 100%;
}

.rocket-fire {
    animation: firePulse 0.1s ease-in-out infinite alternate;
}

.rocket-smoke {
    animation: smokePulse 0.3s ease-in-out infinite alternate;
}

@keyframes firePulse {
    0% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1.2); opacity: 0.8; }
}

@keyframes smokePulse {
    0% { transform: scaleY(1) translateY(0); opacity: 0.6; }
    100% { transform: scaleY(1.1) translateY(5px); opacity: 0.3; }
}

/* Rocket UP animation (Expectation) */
.rocket-up {
    animation: rocketFlyUp 8s ease-in-out infinite;
}

@keyframes rocketFlyUp {
    0% {
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%) scale(2.5) rotate(0deg);
        opacity: 1;
    }
    10% {
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%) scale(2.5) rotate(0deg);
        opacity: 1;
    }
    20% {
        left: 10%;
        bottom: 120px;
        transform: scale(1) rotate(-30deg);
        opacity: 1;
    }
    35% {
        left: 25%;
        bottom: 180px;
        transform: scale(1) rotate(-35deg);
    }
    50% {
        left: 45%;
        bottom: 230px;
        transform: scale(1) rotate(-40deg);
    }
    65% {
        left: 60%;
        bottom: 280px;
        transform: scale(1) rotate(-35deg);
    }
    80% {
        left: 75%;
        bottom: 330px;
        transform: scale(1.2) rotate(-30deg);
    }
    90% {
        left: 80%;
        bottom: 360px;
        transform: scale(1.3) rotate(-25deg);
    }
    95% {
        left: 82%;
        bottom: 370px;
        transform: scale(1.4) rotate(-20deg);
        opacity: 1;
    }
    100% {
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%) scale(2.5) rotate(0deg);
        opacity: 1;
    }
}

/* Rocket DOWN animation (Reality) */
.rocket-down {
    animation: rocketFlyDown 8s ease-in-out infinite;
}

@keyframes rocketFlyDown {
    0% {
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%) scale(2.5) rotate(0deg);
        opacity: 1;
    }
    10% {
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%) scale(2.5) rotate(0deg);
        opacity: 1;
    }
    20% {
        left: 10%;
        bottom: 320px;
        transform: scale(1) rotate(-30deg);
        opacity: 1;
    }
    30% {
        left: 20%;
        bottom: 280px;
        transform: scale(1) rotate(10deg);
    }
    40% {
        left: 35%;
        bottom: 300px;
        transform: scale(1) rotate(-20deg);
    }
    50% {
        left: 45%;
        bottom: 250px;
        transform: scale(1) rotate(30deg);
    }
    60% {
        left: 55%;
        bottom: 200px;
        transform: scale(1) rotate(50deg);
    }
    70% {
        left: 65%;
        bottom: 160px;
        transform: scale(1) rotate(70deg);
    }
    85% {
        left: 78%;
        bottom: 120px;
        transform: scale(1.1) rotate(100deg);
    }
    95% {
        left: 82%;
        bottom: 100px;
        transform: scale(1) rotate(120deg);
        opacity: 1;
    }
    100% {
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%) scale(2.5) rotate(0deg);
        opacity: 1;
    }
}

/* Messages */
.king-message {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    animation: kingAppear 8s ease-in-out infinite;
    z-index: 20;
}

.king-text {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffd700;
    text-shadow: 
        0 0 10px #ffd700,
        0 0 20px #ffd700,
        0 0 40px #ff6b00,
        2px 2px 0 var(--blood-red);
    display: block;
    white-space: nowrap;
}

.crown {
    font-size: 2.5rem;
    display: block;
    margin-top: 5px;
    animation: crownBounce 0.5s ease-in-out infinite alternate;
}

.sad-message {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    animation: sadAppear 8s ease-in-out infinite;
    z-index: 20;
}

.sad-text {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ff4444;
    text-shadow: 2px 2px 0 #330000, 0 0 10px rgba(255, 68, 68, 0.5);
    display: block;
}

.sad-text2 {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ff2d55;
    text-shadow: 0 0 10px #ff2d55, 2px 2px 0 #330000;
    display: block;
    margin-top: 5px;
}

.sad-emoji {
    font-size: 2.5rem;
    display: block;
    margin-top: 10px;
    animation: angryShake 0.15s ease-in-out infinite;
}

@keyframes kingAppear {
    0%, 75% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    85% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    92% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    98% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}

@keyframes sadAppear {
    0%, 75% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    85% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    92% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    98% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}

@keyframes crownBounce {
    0% { transform: translateY(0) rotate(-5deg); }
    100% { transform: translateY(-5px) rotate(5deg); }
}

@keyframes sadShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@keyframes angryShake {
    0%, 100% { transform: translateX(0) scale(1); }
    25% { transform: translateX(-5px) scale(1.1); }
    50% { transform: translateX(5px) scale(1); }
    75% { transform: translateX(-5px) scale(1.1); }
}

/* Stars in rocket container */
.rocket-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(1px 1px at 10% 20%, white, transparent),
        radial-gradient(1px 1px at 30% 40%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 50% 10%, white, transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90% 50%, white, transparent),
        radial-gradient(1.5px 1.5px at 20% 60%, white, transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 80% 90%, rgba(255,255,255,0.5), transparent);
    pointer-events: none;
}

/* ===== BANNED SECTION ===== */
.banned-container {
    text-align: center;
}

.banned-banner {
    background: linear-gradient(135deg, var(--ghoul-red), var(--blood-red));
    padding: 60px 20px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(196, 30, 58, 0.4);
    max-width: 800px;
    margin: 0 auto;
}

.banned-banner::before,
.banned-banner::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    background: repeating-linear-gradient(90deg, var(--pure-white) 0px, var(--pure-white) 20px, var(--ghoul-red) 20px, var(--ghoul-red) 40px);
}

.banned-banner::before { top: 0; left: 0; }
.banned-banner::after { bottom: 0; left: 0; }

.banned-text {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--pure-white);
    text-shadow: 
        4px 4px 0 var(--dark-red),
        -2px -2px 0 var(--dark-red),
        0 0 20px rgba(255, 45, 85, 0.5);
    animation: banFlash 1s ease-in-out infinite;
    margin-bottom: 30px;
}

.happy-gif {
    width: 300px;
    max-width: 100%;
    border-radius: 15px;
    border: 5px solid var(--pure-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ===== CLIPS SECTION ===== */
.clips-container {
    max-width: 900px;
    margin: 0 auto;
}

.twitch-embed {
    position: relative;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    border: 5px solid var(--ghoul-red);
    box-shadow: 10px 10px 0 var(--blood-red);
    margin-bottom: 30px;
    background: #000;
}

.twitch-embed iframe {
    width: 100%;
    height: 450px;
    border: none;
    display: block;
}

.clips-link {
    display: block;
    text-align: center;
    margin-top: 30px;
}

.clips-link a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    background: var(--ghoul-red);
    color: var(--pure-white);
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    border: 3px solid var(--blood-red);
    box-shadow: 5px 5px 0 var(--blood-red);
}

.clips-link a:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--blood-red);
}

/* ===== FOOTER ===== */
footer {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--ghoul-red), var(--blood-red));
    color: var(--pure-white);
    margin-top: 60px;
}

footer p {
    font-size: 0.9rem;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--space-black);
}

::-webkit-scrollbar-thumb {
    background: var(--ghoul-red);
    border-radius: 6px;
    border: 2px solid var(--space-black);
    box-shadow: 0 0 10px rgba(255, 45, 85, 0.5);
}

/* ===== RESPONSIVE ===== */
/* ===== AGENT ROULETTE ===== */
.case-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto 40px;
}

.case-card {
    background: rgba(15, 15, 25, 0.95);
    border: 3px solid var(--ghoul-red);
    border-radius: 15px;
    padding: 20px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 4px 4px 0 var(--blood-red), 0 0 20px rgba(255, 45, 85, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.case-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 45, 85, 0.1), transparent);
    transition: left 0.5s ease;
}

.case-card:hover::before {
    left: 100%;
}

.case-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--ghoul-red), 0 0 30px rgba(255, 45, 85, 0.3);
}

.case-card.active {
    background: linear-gradient(145deg, rgba(255, 45, 85, 0.3), rgba(15, 15, 25, 0.95));
    border-color: #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 7px 7px 0 var(--blood-red);
}

.case-card.case-all {
    border-color: #ffd700;
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), rgba(15, 15, 25, 0.95));
}

.case-card.case-all:hover {
    box-shadow: 7px 7px 0 #ffd700, 0 0 30px rgba(255, 215, 0, 0.3);
}

.case-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 10px currentColor);
}

.case-title {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pure-white);
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.case-preview {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
}

.case-preview img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid rgba(255, 45, 85, 0.5);
    background: rgba(0, 0, 0, 0.5);
    object-fit: cover;
    transition: all 0.3s ease;
}

.case-card:hover .case-preview img {
    transform: scale(1.1);
    border-color: var(--ghoul-red);
}

.case-preview.all-preview img {
    border-color: rgba(255, 215, 0, 0.5);
}

.case-count {
    font-size: 0.8rem;
    color: #888;
    margin-top: 5px;
}

/* Role Icons */
.role-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

/* Roulette Container */
.roulette-wrapper {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.roulette-frame {
    position: relative;
    width: 100%;
    height: 180px;
    background: rgba(10, 10, 20, 0.95);
    border: 4px solid var(--ghoul-red);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        inset 0 0 50px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(255, 45, 85, 0.3),
        8px 8px 0 var(--blood-red);
}

.roulette-pointer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #ffd700, #ff6b00);
    z-index: 20;
    box-shadow: 0 0 20px #ffd700, 0 0 40px rgba(255, 215, 0, 0.5);
}

.roulette-pointer::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #ffd700;
    filter: drop-shadow(0 0 10px #ffd700);
}

.roulette-pointer::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 20px solid #ffd700;
    filter: drop-shadow(0 0 10px #ffd700);
}

.roulette-track {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 15px 0;
    transition: transform 0.1s linear;
}

.roulette-item {
    flex-shrink: 0;
    width: 130px;
    height: 150px;
    margin: 0 5px;
    background: rgba(20, 20, 35, 0.9);
    border: 3px solid rgba(255, 45, 85, 0.5);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: all 0.2s ease;
}

.roulette-item img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    margin-bottom: 8px;
}

.roulette-item .agent-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pure-white);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.roulette-item .agent-role {
    font-size: 0.65rem;
    color: #888;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.roulette-item .agent-role img,
.role-icon-small {
    width: 14px;
    height: 14px;
    margin: 0;
    filter: brightness(0) invert(1) opacity(0.8);
    vertical-align: middle;
}

.role-icon-result {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    vertical-align: middle;
    margin-right: 5px;
}

/* Glow edges */
.roulette-frame::before,
.roulette-frame::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.roulette-frame::before {
    left: 0;
    background: linear-gradient(90deg, rgba(10, 10, 20, 1), transparent);
}

.roulette-frame::after {
    right: 0;
    background: linear-gradient(-90deg, rgba(10, 10, 20, 1), transparent);
}

/* Spin Button */
.spin-btn {
    margin-top: 30px;
    padding: 18px 60px;
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    background: linear-gradient(145deg, var(--ghoul-red), var(--blood-red));
    color: var(--pure-white);
    border: 4px solid var(--blood-red);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 6px 6px 0 var(--dark-red), 0 0 30px rgba(255, 45, 85, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.spin-btn:hover:not(:disabled) {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--dark-red), 0 0 50px rgba(255, 45, 85, 0.6);
}

.spin-btn:active:not(:disabled) {
    transform: translate(0, 0);
    box-shadow: 3px 3px 0 var(--dark-red);
}

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

.spin-btn.spinning {
    animation: btnPulse 0.5s ease-in-out infinite;
}

.spin-icon {
    font-size: 1.5rem;
    animation: spinIcon 2s linear infinite;
}

.spin-btn:disabled .spin-icon {
    animation: spinIcon 0.3s linear infinite;
}

@keyframes spinIcon {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes btnPulse {
    0%, 100% { box-shadow: 6px 6px 0 var(--dark-red), 0 0 30px rgba(255, 45, 85, 0.4); }
    50% { box-shadow: 6px 6px 0 var(--dark-red), 0 0 50px rgba(255, 45, 85, 0.7); }
}

/* Result Display */
.roulette-result {
    margin-top: 40px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.roulette-result.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.result-agent {
    background: linear-gradient(145deg, rgba(255, 45, 85, 0.2), rgba(15, 15, 25, 0.95));
    border: 4px solid var(--ghoul-red);
    border-radius: 25px;
    padding: 30px;
    max-width: 350px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 
        0 0 50px rgba(255, 45, 85, 0.4),
        8px 8px 0 var(--blood-red);
    animation: resultGlow 2s ease-in-out infinite;
}

@keyframes resultGlow {
    0%, 100% { box-shadow: 0 0 50px rgba(255, 45, 85, 0.4), 8px 8px 0 var(--blood-red); }
    50% { box-shadow: 0 0 80px rgba(255, 45, 85, 0.6), 8px 8px 0 var(--blood-red); }
}

.result-agent img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.5));
    animation: resultFloat 3s ease-in-out infinite;
}

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

.result-name {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--pure-white);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 15px;
    text-shadow: 0 0 20px rgba(255, 45, 85, 0.5), 2px 2px 0 var(--blood-red);
}

.result-role {
    font-size: 1rem;
    color: var(--ghoul-red);
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.result-role img {
    width: 24px;
    height: 24px;
    filter: none;
    animation: none;
}

/* Spinning state highlighting */
.roulette-item.highlight {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

/* ===== EXCUSE WHEEL ===== */
.wheel-container {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.wheel-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
}

.wheel {
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    box-shadow: 
        0 0 0 8px var(--ghoul-red),
        0 0 0 12px var(--blood-red),
        0 0 0 16px #0a0a0f,
        0 0 60px rgba(255, 45, 85, 0.5),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

#wheelCanvas {
    display: block;
}

/* Wheel Pointer */
.wheel-pointer {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

.pointer-arrow {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #ffd700;
    position: relative;
}

.pointer-arrow::before {
    content: '';
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.pointer-arrow::after {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid #fff;
    opacity: 0.3;
}

/* Wheel Spin Button */
.wheel-spin-btn {
    margin-top: 20px;
}

/* Excuse Result */
.excuse-result {
    margin-top: 40px;
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.excuse-result.show {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.excuse-text-wrapper {
    background: linear-gradient(145deg, rgba(255, 45, 85, 0.25), rgba(15, 15, 25, 0.95));
    border: 4px solid var(--ghoul-red);
    border-radius: 25px;
    padding: 40px 30px;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 
        0 0 60px rgba(255, 45, 85, 0.4),
        8px 8px 0 var(--blood-red);
    animation: excuseGlow 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.excuse-text-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 45, 85, 0.1) 0%, transparent 60%);
    animation: excuseShine 3s ease-in-out infinite;
}

@keyframes excuseGlow {
    0%, 100% { box-shadow: 0 0 60px rgba(255, 45, 85, 0.4), 8px 8px 0 var(--blood-red); }
    50% { box-shadow: 0 0 100px rgba(255, 45, 85, 0.6), 8px 8px 0 var(--blood-red); }
}

@keyframes excuseShine {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.excuse-emoji {
    font-size: 4rem;
    margin-bottom: 15px;
    animation: excuseEmojiBounce 1s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes excuseEmojiBounce {
    0%, 100% { transform: scale(1) rotate(-5deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

.excuse-label {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: #888;
    letter-spacing: 3px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.excuse-text {
    font-family: 'Orbitron', 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--pure-white);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 
        0 0 30px rgba(255, 45, 85, 0.8),
        3px 3px 0 var(--blood-red);
    margin-bottom: 15px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.excuse-subtext {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    position: relative;
    z-index: 1;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.3rem; letter-spacing: 1px; }
    .banned-text { font-size: 1.4rem; letter-spacing: 1px; }
    .games-grid { flex-direction: column; align-items: center; }
    .tab-btn { padding: 12px 20px; font-size: 0.9rem; }
    .top-banner .no-prank { font-size: 0.7rem; letter-spacing: 1px; }
    .absurd-svg { width: 150px; height: 150px; }
    .twitch-embed iframe { height: 300px; }
    
    .case-selection {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .case-card {
        padding: 15px 10px;
    }
    
    .case-icon {
        font-size: 2rem;
    }
    
    .case-title {
        font-size: 0.8rem;
    }
    
    .case-preview img {
        width: 28px;
        height: 28px;
    }
    
    .roulette-frame {
        height: 150px;
    }
    
    .roulette-item {
        width: 100px;
        height: 120px;
    }
    
    .roulette-item img {
        width: 60px;
        height: 60px;
    }
    
    .roulette-item .agent-name {
        font-size: 0.65rem;
    }
    
    .spin-btn {
        padding: 15px 40px;
        font-size: 1rem;
    }
    
    .result-agent img {
        width: 120px;
        height: 120px;
    }
    
    .result-name {
        font-size: 1.5rem;
    }
    
    /* Wheel mobile */
    .wheel {
        width: 300px;
        height: 300px;
    }
    
    #wheelCanvas {
        width: 300px;
        height: 300px;
    }
    
    .pointer-arrow {
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
        border-top: 35px solid #ffd700;
    }
    
    .pointer-arrow::before {
        width: 15px;
        height: 15px;
        top: -40px;
    }
    
    .wheel-pointer {
        top: -18px;
    }
    
    .excuse-text {
        font-size: 1.3rem;
    }
    
    .excuse-emoji {
        font-size: 3rem;
    }
    
    .excuse-text-wrapper {
        padding: 30px 20px;
    }
}