@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    background: #2a2a2a;
    font-family: 'Roboto', Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* TV Container */
.tv-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* TV Frame - 1990s Style */
.tv-frame {
    width: 90vw;
    height: 80vh;
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d, #404040);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.9),
        inset 0 2px 8px rgba(255, 255, 255, 0.05),
        0 0 0 3px #000,
        0 0 0 6px #333;
    position: relative;
    border: 2px solid #555;
}

.tv-frame::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 1px solid #666;
    border-radius: 4px;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(0,0,0,0.3), rgba(255,255,255,0.05));
}

/* TV Screen - 1990s Style */
.tv-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        inset 0 0 60px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(0, 0, 0, 0.7);
    border: 1px solid #444;
}

/* Static Overlay */
.static-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    animation: static 0.1s infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes static {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Channel Info Bar */
.channel-info {
    display: none;
}



.live-indicator {
    display: none;
}

.current-time {
    display: none;
}

/* Content Area */
#content-area {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    overflow: hidden;
    min-height: 400px;
    background: transparent;
}

/* Loading Indicator */
.loading-indicator {
    text-align: center;
    color: #fff;
    z-index: 5;
}

.loading-text {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #3498db;
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.8);
}

.loading-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.loading-dots span {
    width: 12px;
    height: 12px;
    background: #3498db;
    border-radius: 50%;
    animation: loadingDot 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes loadingDot {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

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

#content-area > * {
    animation: contentFadeIn 0.8s ease-in-out;
}

/* Content Transitions */
/* .content-fade-out and .content-transition classes removed */

/* Clean Content Style */
.content-style {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    text-align: center;
    color: #fff;
    font-family: 'Courier New', monospace;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* News Crawl */
.news-crawl {
    display: none;
}

/* Signal Quality */
.signal-quality {
    display: none;
}

/* TV Stand - 1990s Style */
.tv-stand {
    width: 200px;
    height: 60px;
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d, #404040);
    border-radius: 4px;
    margin-top: 15px;
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.8),
        0 0 0 2px #000,
        0 0 0 4px #333;
    border: 1px solid #555;
    position: relative;
}

.tv-stand::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 8px;
    background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
    border-radius: 2px;
    border: 1px solid #444;
}

/* Content Type Styles */
.weather-display {
    text-align: center;
    color: #fff;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.weather-icon {
    font-size: 80px;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

.weather-temp, .weather-city, .weather-condition {
    font-size: 24px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* New Content Types */
.loading-simulator {
    text-align: center;
    color: #fff;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    --loading-speed: medium;
    --loading-style: minimal;
    --loading-theme: blue;
    --loading-color: #ff6b6b;
    --loading-font: Roboto;
    --loading-shape: rectangle;
}

/* The Bortsons Show */
.bortsons-display {
    text-align: center;
    color: #fff;
    padding: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', monospace;
    background-size: cover;
    background-position: center;
    position: relative;
}

.bortsons-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.bortsons-display > * {
    position: relative;
    z-index: 2;
}

.bortsons-header {
    margin-bottom: 30px;
    margin-top: -20px;
}

.bortsons-title-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

.show-title {
    font-size: 72px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    margin-bottom: 20px;
    letter-spacing: 3px;
}

.episode-info {
    font-size: 28px;
    color: #64b5f6;
    font-style: italic;
    opacity: 0.8;
}

.bortsons-content {
    max-width: 1200px;
    width: 100%;
}

.episode-title-display {
    margin-bottom: 30px;
    text-align: center;
}

.episode-title {
    font-size: 32px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    letter-spacing: 2px;
    font-style: italic;
}

.conversation-container {
    margin-bottom: 40px;
}

.character-line {
    margin-bottom: 25px;
    text-align: left;
    padding: 15px;
    background: rgba(100, 181, 246, 0.1);
    border-left: 4px solid #64b5f6;
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
}

.character-line.hidden-line {
    opacity: 0.3;
    transform: translateX(-20px);
    filter: blur(1px);
}

.character-line.current-line {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    background: rgba(100, 181, 246, 0.2);
    border-left: 4px solid #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.character-name {
    font-size: 20px;
    font-weight: bold;
    color: #64b5f6;
    margin-right: 10px;
    text-shadow: 0 0 8px rgba(100, 181, 246, 0.6);
}

.dialogue {
    font-size: 18px;
    color: #fff;
    line-height: 1.4;
    font-style: italic;
}

/* Character Display Layout */
.characters-display {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 30px;
}

.character-left, .character-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.character-left {
    flex-direction: column;
}

.character-right {
    flex-direction: column;
}

/* ASCII Character Styles */
.ascii-character {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    margin: 10px 0;
    white-space: pre;
    transition: all 0.3s ease;
}

.ascii-character.speaking {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    transform: scale(1.05);
}

.character-name {
    font-size: 16px;
    font-weight: bold;
    color: #64b5f6;
    text-align: center;
    margin-top: 5px;
    text-shadow: 0 0 8px rgba(100, 181, 246, 0.6);
}

/* Speech Bubble Styles */
.speech-bubble {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 350px;
    min-width: 280px;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.6),
        inset 0 0 10px rgba(255, 215, 0, 0.2);
    display: none;
    z-index: 10;
    backdrop-filter: blur(5px);
}

.speech-bubble::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent;
}

/* Speech bubble for left character (points right) */
.character-left .speech-bubble {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 20px;
}

.character-left .speech-bubble::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #ffd700;
}

/* Speech bubble for right character (points left) */
.character-right .speech-bubble {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 20px;
}

.character-right .speech-bubble::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #ffd700;
}

.dialogue-text {
    font-size: 14px;
    color: #fff;
    line-height: 1.3;
    font-weight: 500;
    text-align: center;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Background Objects */
.background-objects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.background-object {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    animation: float 8s ease-in-out infinite;
    user-select: none;
}

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



.loading-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--loading-color, #ffd700);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    font-family: var(--loading-font, 'Roboto'), sans-serif;
}

.loading-bar-container {
    width: 300px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--loading-color, #fff);
    border-radius: 20px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
}

.loading-bar {
    height: 100%;
    background: var(--loading-color, linear-gradient(90deg, #ff6b9d, #c44569, #f39c12, #e67e22));
    border-radius: 18px;
    animation: loadingAnimation 3s ease-in-out infinite;
}

/* Color variations */
.loading-simulator[data-color="#ff6b6b"] .loading-bar {
    background: #ff6b6b;
}

.loading-simulator[data-color="#4ecdc4"] .loading-bar {
    background: #4ecdc4;
}

.loading-simulator[data-color="#45b7d1"] .loading-bar {
    background: #45b7d1;
}

.loading-simulator[data-color="#96ceb4"] .loading-bar {
    background: #96ceb4;
}

.loading-simulator[data-color="#feca57"] .loading-bar {
    background: #feca57;
}

.loading-simulator[data-color="#ff9ff3"] .loading-bar {
    background: #ff9ff3;
}

.loading-simulator[data-color="#54a0ff"] .loading-bar {
    background: #54a0ff;
}

.loading-simulator[data-color="#5f27cd"] .loading-bar {
    background: #5f27cd;
}

.loading-simulator[data-color="#e74c3c"] .loading-bar {
    background: #e74c3c;
}

.loading-simulator[data-color="#2ecc71"] .loading-bar {
    background: #2ecc71;
}

.loading-simulator[data-color="#f39c12"] .loading-bar {
    background: #f39c12;
}

.loading-simulator[data-color="#9b59b6"] .loading-bar {
    background: #9b59b6;
}

.loading-simulator[data-color="#1abc9c"] .loading-bar {
    background: #1abc9c;
}

.loading-simulator[data-color="#e67e22"] .loading-bar {
    background: #e67e22;
}

.loading-simulator[data-color="#34495e"] .loading-bar {
    background: #34495e;
}

/* Font variations */
.loading-simulator[data-font="Roboto"] {
    font-family: 'Roboto', sans-serif;
}

.loading-simulator[data-font="Arial"] {
    font-family: Arial, sans-serif;
}

.loading-simulator[data-font="Helvetica"] {
    font-family: Helvetica, sans-serif;
}

.loading-simulator[data-font="Georgia"] {
    font-family: Georgia, serif;
}

.loading-simulator[data-font="Times New Roman"] {
    font-family: 'Times New Roman', serif;
}

.loading-simulator[data-font="Verdana"] {
    font-family: Verdana, sans-serif;
}

.loading-simulator[data-font="Courier New"] {
    font-family: 'Courier New', monospace;
}

.loading-simulator[data-font="Impact"] {
    font-family: Impact, sans-serif;
}

.loading-simulator[data-font="Comic Sans MS"] {
    font-family: 'Comic Sans MS', cursive;
}

.loading-simulator[data-font="Trebuchet MS"] {
    font-family: 'Trebuchet MS', sans-serif;
}

/* Speed variations */
.loading-simulator[data-speed="slow"] .loading-bar {
    animation-duration: 12s;
}

.loading-simulator[data-speed="medium"] .loading-bar {
    animation-duration: 8s;
}

.loading-simulator[data-speed="fast"] .loading-bar {
    animation-duration: 4s;
}

.loading-simulator[data-speed="ultra-slow"] .loading-bar {
    animation-duration: 16s;
}

.loading-simulator[data-speed="lightning"] .loading-bar {
    animation-duration: 2s;
}

/* Style variations */
.loading-simulator[data-style="fancy"] .loading-bar {
    background: linear-gradient(90deg, #ff6b9d, #c44569, #f39c12, #e67e22, #ff6b9d);
    background-size: 200% 100%;
    animation: loadingAnimation 3s ease-in-out infinite, fancyShimmer 2s ease-in-out infinite;
}

.loading-simulator[data-style="retro"] .loading-bar {
    background: repeating-linear-gradient(
        90deg,
        #ff6b9d 0px,
        #ff6b9d 20px,
        #c44569 20px,
        #c44569 40px
    );
}

.loading-simulator[data-style="futuristic"] .loading-bar {
    background: linear-gradient(90deg, #00ffff, #ff00ff, #ffff00, #00ff00);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

.loading-simulator[data-style="organic"] .loading-bar {
    background: radial-gradient(ellipse at center, #ff6b9d, #c44569);
    border-radius: 50px;
}

/* Theme variations */
.loading-simulator[data-theme="blue"] .loading-bar {
    background: linear-gradient(90deg, #3498db, #2980b9, #5dade2, #85c1e9);
}

.loading-simulator[data-theme="green"] .loading-bar {
    background: linear-gradient(90deg, #2ecc71, #27ae60, #58d68d, #82e0aa);
}

.loading-simulator[data-theme="purple"] .loading-bar {
    background: linear-gradient(90deg, #9b59b6, #8e44ad, #bb8fce, #d2b4de);
}

.loading-simulator[data-theme="orange"] .loading-bar {
    background: linear-gradient(90deg, #e67e22, #d35400, #f39c12, #f8c471);
}

.loading-simulator[data-theme="rainbow"] .loading-bar {
    background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #8000ff);
    background-size: 300% 100%;
    animation: loadingAnimation 3s ease-in-out infinite, rainbowShift 3s ease-in-out infinite;
}

@keyframes loadingAnimation {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes fancyShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.loading-text {
    font-size: 18px;
    color: #fff;
    margin-top: 20px;
}



/* Text Display */
.text-display {
    text-align: center;
    color: #fff;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.text-content {
    font-size: 32px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 20px;
    max-width: 80%;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    position: relative;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 2s steps(40, end) forwards;
}

/* Typewriter container */
.text-content::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 0;
    height: 100%;
    width: 3px;
    background: #fff;
    animation: blink-caret 0.75s step-end infinite;
    animation-delay: 2s; /* Start blinking after typing is complete */
}

/* Typewriter animation */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

/* Blinking cursor animation */
@keyframes blink-caret {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

.text-source {
    font-size: 14px;
    color: #87ceeb;
    font-style: italic;
}

.text-counter {
    font-size: 12px;
    color: #aaa;
    margin-top: 10px;
    opacity: 0.7;
}

/* Word Search Display */
.word-search-display {
    text-align: center;
    color: #fff;
    padding: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', monospace;
}

.word-search-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.word-search-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.word-search-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.word-search-row {
    display: flex;
    gap: 5px;
}

.word-search-cell {
    width: 35px;
    height: 35px;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}



.word-search-words {
    min-width: 150px;
    text-align: left;
}

.word-search-word {
    font-size: 16px;
    margin: 8px 0;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    border-left: 3px solid #fff;
    transition: all 0.3s ease;
}





/* Glitch Display */
.glitch-display {
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.glitch-effect {
    width: 300px;
    height: 300px;
    margin-bottom: 30px;
    position: relative;
}

.glitch-effect.corruption {
    background: repeating-linear-gradient(
        45deg,
        transparent 0px,
        transparent 10px,
        rgba(255, 0, 0, 0.3) 10px,
        rgba(255, 0, 0, 0.3) 20px
    );
    animation: corruptionGlitch var(--glitch-duration, 2s) ease-in-out infinite;
}

.glitch-effect.fragmentation {
    background: 
        radial-gradient(circle at 25% 25%, rgba(0, 255, 255, 0.5) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(255, 0, 255, 0.5) 2px, transparent 2px);
    background-size: 30px 30px;
    animation: fragmentationGlitch var(--glitch-duration, 2s) ease-in-out infinite;
}

.glitch-effect.distortion {
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 5px,
        rgba(255, 255, 0, 0.4) 5px,
        rgba(255, 255, 0, 0.4) 10px
    );
    animation: distortionGlitch var(--glitch-duration, 2s) ease-in-out infinite;
}

.glitch-effect.interference {
    background: 
        linear-gradient(90deg, transparent 0px, transparent 15px, rgba(0, 255, 0, 0.3) 15px, rgba(0, 255, 0, 0.3) 30px),
        linear-gradient(0deg, transparent 0px, transparent 15px, rgba(255, 0, 0, 0.3) 15px, rgba(255, 0, 0, 0.3) 30px);
    background-size: 30px 30px;
    animation: interferenceGlitch var(--glitch-duration, 2s) ease-in-out infinite;
}

.glitch-effect.noise {
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: noiseGlitch var(--glitch-duration, 2s) ease-in-out infinite;
}

.glitch-info {
    text-align: center;
    color: #fff;
}

.glitch-type, .glitch-intensity, .glitch-frequency {
    font-size: 18px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

[data-intensity="mild"] { --glitch-duration: 3s; }
[data-intensity="moderate"] { --glitch-duration: 2s; }
[data-intensity="severe"] { --glitch-duration: 1s; }

[data-frequency="low"] { --glitch-duration: 4s; }
[data-frequency="medium"] { --glitch-duration: 2s; }
[data-frequency="high"] { --glitch-duration: 1s; }

@keyframes corruptionGlitch {
    0%, 100% { transform: skew(0deg); opacity: 1; }
    25% { transform: skew(2deg); opacity: 0.8; }
    50% { transform: skew(-2deg); opacity: 0.9; }
    75% { transform: skew(1deg); opacity: 0.7; }
}

@keyframes fragmentationGlitch {
    0%, 100% { transform: scale(1) rotate(0deg); }
    33% { transform: scale(1.1) rotate(5deg); }
    66% { transform: scale(0.9) rotate(-5deg); }
}

@keyframes distortionGlitch {
    0%, 100% { transform: perspective(100px) rotateX(0deg); }
    50% { transform: perspective(100px) rotateX(10deg); }
}

@keyframes interferenceGlitch {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(2px, -2px); }
    50% { transform: translate(-2px, 2px); }
    75% { transform: translate(1px, -1px); }
}

@keyframes noiseGlitch {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Hologram */
.hologram {
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.holo-circle {
    position: absolute;
    border: 2px solid;
    border-radius: 50%;
    animation: holoPulse 3s ease-in-out infinite;
}

.holo-1 { 
    width: 200px; 
    height: 200px; 
    top: 20%; 
    left: 20%; 
    animation-delay: 0s; 
    border-color: var(--holo-color, #00ffff);
    animation-duration: var(--holo-speed, 3s);
}
.holo-2 { 
    width: 300px; 
    height: 300px; 
    top: 15%; 
    left: 15%; 
    animation-delay: 0.5s; 
    border-color: var(--holo-color, #00ffff);
    animation-duration: var(--holo-speed, 3s);
}
.holo-3 { 
    width: 400px; 
    height: 400px; 
    top: 10%; 
    left: 10%; 
    animation-delay: 1s; 
    border-color: var(--holo-color, #00ffff);
    animation-duration: var(--holo-speed, 3s);
}

.holo-4 { 
    width: 250px; 
    height: 250px; 
    top: 60%; 
    left: 70%; 
    animation-delay: 1.5s; 
    border-color: var(--holo-color, #00ffff);
    animation-duration: var(--holo-speed, 3s);
}

.holo-5 { 
    width: 180px; 
    height: 180px; 
    top: 70%; 
    left: 25%; 
    animation-delay: 2s; 
    border-color: var(--holo-color, #00ffff);
    animation-duration: var(--holo-speed, 3s);
}

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

/* Additional hologram effects */
.holo-circle::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 1px solid;
    border-color: inherit;
    border-radius: 50%;
    opacity: 0.5;
    animation: holoRipple 2s ease-out infinite;
}

.holo-circle::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 1px solid;
    border-color: inherit;
    border-radius: 50%;
    opacity: 0.3;
    animation: holoRipple 3s ease-out infinite;
    animation-delay: 1s;
}

@keyframes holoRipple {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.2); opacity: 0; }
}





/* Digital Display */
.digital-display {
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.digital-pattern {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.digital-pattern.grid {
    background-image: 
        linear-gradient(var(--pattern-color, #00ff00) 1px, transparent 1px),
        linear-gradient(90deg, var(--pattern-color, #00ff00) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: gridMove var(--animation-speed, 2s) linear infinite;
}

.digital-pattern.circuit {
    background: radial-gradient(circle at 30% 30%, var(--pattern-color, #00ff00) 2px, transparent 2px),
                radial-gradient(circle at 70% 70%, var(--pattern-color, #00ff00) 2px, transparent 2px);
    background-size: 50px 50px;
    animation: circuitPulse var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.binary {
    background: repeating-linear-gradient(
        0deg,
        var(--pattern-color, #00ff00) 0px,
        var(--pattern-color, #00ff00) 3px,
        transparent 3px,
        transparent 6px
    );
    animation: binaryScroll var(--animation-speed, 2s) linear infinite;
}

.digital-pattern.matrix {
    background: repeating-linear-gradient(
        45deg,
        var(--pattern-color, #00ff00) 0px,
        var(--pattern-color, #00ff00) 2px,
        transparent 2px,
        transparent 8px
    );
    background-size: 20px 20px;
    animation: matrixPulse var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.neural {
    background: radial-gradient(circle at 20% 20%, var(--pattern-color, #00ff00) 1px, transparent 1px),
                radial-gradient(circle at 80% 80%, var(--pattern-color, #00ff00) 1px, transparent 1px),
                radial-gradient(circle at 50% 50%, var(--pattern-color, #00ff00) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: neuralConnect var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.pixel {
    background-image: 
        radial-gradient(circle at 25% 25%, var(--pattern-color, #00ff00) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, var(--pattern-color, #00ff00) 2px, transparent 2px);
    background-size: 15px 15px;
    animation: pixelFlicker var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.wave {
    background: repeating-linear-gradient(
        0deg,
        var(--pattern-color, #00ff00) 0px,
        var(--pattern-color, #00ff00) 4px,
        transparent 4px,
        transparent 8px
    );
    background-size: 100% 16px;
    animation: waveFlow var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.spiral {
    background: conic-gradient(
        from 0deg,
        var(--pattern-color, #00ff00) 0deg,
        transparent 60deg,
        var(--pattern-color, #00ff00) 120deg,
        transparent 180deg,
        var(--pattern-color, #00ff00) 240deg,
        transparent 300deg
    );
    background-size: 100px 100px;
    animation: spiralPulse var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.fractal {
    background: 
        radial-gradient(circle at 20% 20%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 40% 40%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 60% 60%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, var(--pattern-color, #00ff00) 1px, transparent 1px);
    background-size: 30px 30px, 60px 60px, 90px 90px, 120px 120px;
    animation: fractalPulse var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.data {
    background: repeating-linear-gradient(
        90deg,
        var(--pattern-color, #00ff00) 0px,
        var(--pattern-color, #00ff00) 2px,
        transparent 2px,
        transparent 10px
    );
    background-size: 20px 100%;
    animation: dataFlow var(--animation-speed, 2s) linear infinite;
}

/* New Digital Patterns */
.digital-pattern.glitch {
    background: 
        repeating-linear-gradient(45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 2px, transparent 2px, transparent 8px),
        repeating-linear-gradient(-45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 1px, transparent 1px, transparent 6px);
    background-size: 20px 20px, 15px 15px;
    animation: glitchEffect var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.hologram {
    background: 
        radial-gradient(circle at 25% 25%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, var(--pattern-color, #00ff00) 1px, transparent 1px);
    background-size: 25px 25px;
    animation: hologramFloat var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.cyber {
    background: 
        linear-gradient(90deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 1px, transparent 1px, transparent 20px),
        linear-gradient(0deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 1px, transparent 1px, transparent 20px);
    background-size: 20px 20px;
    animation: cyberScan var(--animation-speed, 2s) linear infinite;
}

.digital-pattern.quantum {
    background: 
        radial-gradient(circle at 20% 20%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 40% 60%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 60% 40%, var(--pattern-color, #00ff00) 1px, transparent 1px);
    background-size: 35px 35px;
    animation: quantumPulse var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.synthwave {
    background: 
        linear-gradient(0deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 3px, transparent 3px, transparent 15px),
        linear-gradient(90deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 2px, transparent 2px, transparent 25px);
    background-size: 25px 25px;
    animation: synthwavePulse var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.retro {
    background: 
        repeating-linear-gradient(45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 4px, transparent 4px, transparent 12px),
        repeating-linear-gradient(-45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 3px, transparent 3px, transparent 10px);
    background-size: 30px 30px;
    animation: retroShift var(--animation-speed, 2s) linear infinite;
}

.digital-pattern.futuristic {
    background: 
        linear-gradient(45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 2px, transparent 2px, transparent 8px),
        linear-gradient(-45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 2px, transparent 2px, transparent 8px),
        linear-gradient(0deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 1px, transparent 1px, transparent 6px);
    background-size: 16px 16px, 16px 16px, 100% 6px;
    animation: futuristicPulse var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.organic {
    background: 
        radial-gradient(ellipse at 30% 30%, var(--pattern-color, #00ff00) 2px, transparent 2px),
        radial-gradient(ellipse at 70% 70%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 50%, var(--pattern-color, #00ff00) 3px, transparent 3px);
    background-size: 40px 40px, 30px 30px, 50px 50px;
    animation: organicFlow var(--animation-speed, 2s) ease-in-out infinite;
}

.digital-pattern.geometric {
    background: 
        linear-gradient(45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 2px, transparent 2px, transparent 8px),
        linear-gradient(-45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 2px, transparent 2px, transparent 8px);
    background-size: 16px 16px;
    animation: geometricShift var(--animation-speed, 2s) linear infinite;
}

.digital-pattern.abstract {
    background: 
        radial-gradient(circle at 25% 25%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 10% 90%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 90% 10%, var(--pattern-color, #00ff00) 1px, transparent 1px);
    background-size: 20px 20px, 15px 15px, 25px 25px, 18px 18px, 22px 22px;
    animation: abstractPulse var(--animation-speed, 2s) ease-in-out infinite;
}

/* New Glitch and Psychedelic Digital Patterns */
.digital-pattern.glitch-intense {
    background: 
        repeating-linear-gradient(45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(-45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 2px, transparent 2px, transparent 6px),
        repeating-linear-gradient(90deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 1px, transparent 1px, transparent 3px);
    background-size: 8px 8px, 12px 12px, 6px 6px;
    animation: glitchIntense var(--animation-speed, 1s) ease-in-out infinite;
}

.digital-pattern.psychedelic {
    background: 
        conic-gradient(from 0deg, var(--pattern-color, #00ff00) 0deg, transparent 30deg, var(--pattern-color, #00ff00) 60deg, transparent 90deg, var(--pattern-color, #00ff00) 120deg, transparent 150deg, var(--pattern-color, #00ff00) 180deg, transparent 210deg, var(--pattern-color, #00ff00) 240deg, transparent 270deg, var(--pattern-color, #00ff00) 300deg, transparent 330deg),
        radial-gradient(circle at 50% 50%, var(--pattern-color, #00ff00) 1px, transparent 1px);
    background-size: 60px 60px, 40px 40px;
    animation: psychedelicSpin var(--animation-speed, 3s) linear infinite;
}

.digital-pattern.neon {
    background: 
        linear-gradient(90deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 2px, transparent 2px, transparent 15px),
        linear-gradient(0deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 2px, transparent 2px, transparent 15px),
        radial-gradient(circle at 25% 25%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, var(--pattern-color, #00ff00) 1px, transparent 1px);
    background-size: 30px 30px, 30px 30px, 20px 20px, 20px 20px;
    animation: neonPulse var(--animation-speed, 1.5s) ease-in-out infinite;
}

.digital-pattern.vaporwave {
    background: 
        repeating-linear-gradient(45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 3px, transparent 3px, transparent 10px),
        repeating-linear-gradient(-45deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 2px, transparent 2px, transparent 8px),
        linear-gradient(0deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 1px, transparent 1px, transparent 12px);
    background-size: 20px 20px, 16px 16px, 100% 24px;
    animation: vaporwaveFlow var(--animation-speed, 4s) ease-in-out infinite;
}

.digital-pattern.cyberpunk {
    background: 
        linear-gradient(90deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 1px, transparent 1px, transparent 8px),
        linear-gradient(0deg, var(--pattern-color, #00ff00) 0px, var(--pattern-color, #00ff00) 1px, transparent 1px, transparent 8px),
        radial-gradient(circle at 20% 20%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, var(--pattern-color, #00ff00) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, var(--pattern-color, #00ff00) 1px, transparent 1px);
    background-size: 16px 16px, 16px 16px, 12px 12px, 12px 12px, 8px 8px;
    animation: cyberpunkScan var(--animation-speed, 2.5s) linear infinite;
}


@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(20px, 20px); }
}

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

@keyframes binaryScroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(6px); }
}

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

@keyframes neuralConnect {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes pixelFlicker {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes waveFlow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

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

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

@keyframes dataStream {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100px); }
}

@keyframes dataFlow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100px); }
}

/* New Digital Patterns Animations */
@keyframes glitchEffect {
    0% { transform: skew(0deg); opacity: 1; }
    25% { transform: skew(2deg); opacity: 0.8; }
    50% { transform: skew(-2deg); opacity: 0.9; }
    75% { transform: skew(1deg); opacity: 0.7; }
}

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

@keyframes cyberScan {
    0% { transform: translateX(0); }
    100% { transform: translateX(10px); }
}

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

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

@keyframes retroShift {
    0% { transform: translateX(0); }
    100% { transform: translateX(5px); }
}

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

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

@keyframes geometricShift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

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

/* New Glitch and Psychedelic Digital Patterns Animations */
@keyframes glitchIntense {
    0% { transform: skew(0deg); opacity: 1; }
    25% { transform: skew(2deg); opacity: 0.8; }
    50% { transform: skew(-2deg); opacity: 0.9; }
    75% { transform: skew(1deg); opacity: 0.7; }
}

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

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

@keyframes vaporwaveFlow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

@keyframes cyberpunkScan {
    0% { transform: translateX(0); }
    100% { transform: translateX(10px); }
}



/* Shapes Display */
.shapes-display {
    position: relative;
    width: 100%;
    height: 100%;
    --shape-color: #ff6b6b;
    --shape-size: medium;
    --shape-pattern: solid;
    --shape-type: circle;
    --num-shapes: 10;
}

.shape {
    position: absolute;
    animation: shapeFloat 4s ease-in-out infinite;
    background: var(--shape-color);
    width: 60px;
    height: 60px;
    border: 2px solid var(--shape-color);
}

/* Shape type variations */
.shape[data-type="circle"] {
    border-radius: 50%;
}

.shape[data-type="square"] {
    border-radius: 0;
}

.shape[data-type="triangle"] {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: var(--shape-color);
}

.shape[data-type="diamond"] {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape[data-type="star"] {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.shape[data-type="hexagon"] {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.shape[data-type="oval"] {
    border-radius: 50%;
}

.shape[data-type="rectangle"] {
    border-radius: 0;
}

/* Special styling for letters and numbers to ensure visibility */
.shape[data-type="letter"],
.shape[data-type="number"] {
    z-index: 100;
    display: block !important;
    text-align: center !important;
    font-weight: 900 !important;
    font-family: 'Arial Black', 'Arial', sans-serif !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.shape[data-type="letter"] span,
.shape[data-type="number"] span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 900 !important;
    text-shadow: 
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    pointer-events: none !important;
    user-select: none !important;
    line-height: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}



/* Ensure text content is always visible */
.shape[data-type="letter"] span,
.shape[data-type="number"] span {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Size variations */
.shapes-display[data-size="tiny"] .shape {
    transform: scale(0.4);
}

.shapes-display[data-size="small"] .shape {
    transform: scale(0.7);
}

.shapes-display[data-size="medium"] .shape {
    transform: scale(1);
}

.shapes-display[data-size="large"] .shape {
    transform: scale(1.3);
}

.shapes-display[data-size="extra-large"] .shape {
    transform: scale(1.6);
}

.shapes-display[data-size="huge"] .shape {
    transform: scale(2);
}

/* Pattern variations */
.shapes-display[data-pattern="solid"] .shape {
    background: var(--shape-color);
}

.shapes-display[data-pattern="striped"] .shape {
    background: repeating-linear-gradient(
        45deg,
        var(--shape-color),
        var(--shape-color) 10px,
        transparent 10px,
        transparent 20px
    );
}

.shapes-display[data-pattern="dotted"] .shape {
    background: radial-gradient(circle at 25% 25%, var(--shape-color) 2px, transparent 2px),
                radial-gradient(circle at 75% 75%, var(--shape-color) 2px, transparent 2px),
                var(--shape-color);
    background-size: 20px 20px;
}

.shapes-display[data-pattern="gradient"] .shape {
    background: linear-gradient(45deg, var(--shape-color), transparent, var(--shape-color));
}

.shapes-display[data-pattern="outline"] .shape {
    background: transparent;
    border: 8px solid var(--shape-color);
}

.shapes-display[data-pattern="checkered"] .shape {
    background: repeating-conic-gradient(
        var(--shape-color) 0deg 90deg,
        transparent 90deg 180deg
    );
    background-size: 20px 20px;
}

.shapes-display[data-pattern="polka-dot"] .shape {
    background: radial-gradient(circle at 30% 30%, var(--shape-color) 3px, transparent 3px),
                radial-gradient(circle at 70% 70%, var(--shape-color) 3px, transparent 3px),
                var(--shape-color);
    background-size: 25px 25px;
}

.shapes-display[data-pattern="zigzag"] .shape {
    background: repeating-linear-gradient(
        45deg,
        var(--shape-color) 0px,
        var(--shape-color) 8px,
        transparent 8px,
        transparent 16px
    );
}

/* New Glitch and Psychedelic Shape Patterns */
.shapes-display[data-pattern="glitch"] .shape {
    background: var(--shape-color);
    animation: shapeGlitch var(--animation-speed, 2s) ease-in-out infinite;
    filter: drop-shadow(0 0 10px var(--shape-color));
}

.shapes-display[data-pattern="neon"] .shape {
    background: var(--shape-color);
    animation: shapeNeon var(--animation-speed, 1.5s) ease-in-out infinite;
    filter: drop-shadow(0 0 15px var(--shape-color));
}

.shapes-display[data-pattern="vaporwave"] .shape {
    background: var(--shape-color);
    animation: shapeVaporwave var(--animation-speed, 3s) ease-in-out infinite;
    filter: drop-shadow(0 0 12px var(--shape-color));
}

.shapes-display[data-pattern="cyberpunk"] .shape {
    background: var(--shape-color);
    animation: shapeCyberpunk var(--animation-speed, 2.5s) linear infinite;
    filter: drop-shadow(0 0 20px var(--shape-color));
}

.shapes-display[data-pattern="psychedelic"] .shape {
    background: var(--shape-color);
    animation: shapePsychedelic var(--animation-speed, 4s) linear infinite;
    filter: drop-shadow(0 0 18px var(--shape-color));
}

/* Dynamic sizing for variable number of shapes */
.shapes-display[data-num-shapes="5"] .shape {
    width: 80px;
    height: 80px;
}

.shapes-display[data-num-shapes="10"] .shape {
    width: 60px;
    height: 60px;
}

.shapes-display[data-num-shapes="15"] .shape {
    width: 50px;
    height: 50px;
}

.shapes-display[data-num-shapes="20"] .shape {
    width: 40px;
    height: 40px;
}

.shapes-display[data-num-shapes="25"] .shape {
    width: 35px;
    height: 35px;
}



/* New Shape Pattern Animations */
@keyframes shapeGlitch {
    0% { transform: skew(0deg) scale(1); opacity: 1; }
    25% { transform: skew(2deg) scale(1.05); opacity: 0.8; }
    50% { transform: skew(-2deg) scale(0.95); opacity: 0.9; }
    75% { transform: skew(1deg) scale(1.02); opacity: 0.7; }
    100% { transform: skew(0deg) scale(1); opacity: 1; }
}

@keyframes shapeNeon {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px var(--shape-color)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 25px var(--shape-color)); }
}

@keyframes shapeVaporwave {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(8px) scale(1.05); }
}

@keyframes shapeCyberpunk {
    0% { transform: translateX(0); }
    100% { transform: translateX(15px); }
}

@keyframes shapePsychedelic {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

/* AI Shapes */
.ai-shapes {
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ai-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.ai-subtitle {
    font-size: 18px;
    color: #87ceeb;
    margin-bottom: 40px;
    font-style: italic;
}

.ai-shape {
    width: var(--shape-width, 150px);
    height: var(--shape-height, 150px);
    margin: 30px auto;
    animation: aiShapeGlow 2s ease-in-out infinite alternate;
}

.ai-shape.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 calc(var(--shape-width, 150px) / 2) calc(var(--shape-height, 150px) * 0.866) calc(var(--shape-width, 150px) / 2);
    border-color: transparent transparent var(--shape-color, #00ff00) transparent;
}

.ai-shape.circle {
    border-radius: 50%;
    background: var(--shape-color, #00ff00);
}

.ai-shape.square {
    background: var(--shape-color, #00ff00);
}

.ai-shape.diamond {
    background: var(--shape-color, #00ff00);
    transform: rotate(45deg);
}

.ai-shape.star {
    background: var(--shape-color, #00ff00);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.ai-shape.hexagon {
    background: var(--shape-color, #00ff00);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.ai-shape.pentagon {
    background: var(--shape-color, #00ff00);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.ai-description {
    font-size: 16px;
    color: #ccc;
    max-width: 80%;
    line-height: 1.5;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

@keyframes aiShapeGlow {
    from { filter: drop-shadow(0 0 5px currentColor); }
    to { filter: drop-shadow(0 0 15px currentColor); }
}

/* TV Indicators - Corner Elements */
.tv-indicator {
    position: absolute;
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Top Left - LIVE Indicator */
.live-indicator {
    top: 20px;
    left: 20px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: livePulse 2s ease-in-out infinite;
}

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

/* Top Right - Signal Quality */
.signal-quality {
    top: 20px;
    right: 20px;
}

.signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 20px;
}

.signal-bars .bar {
    width: 3px;
    background: #fff;
    border-radius: 1px;
    animation: signalBars 3s ease-in-out infinite;
}

.signal-bars .bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.signal-bars .bar:nth-child(2) { height: 10px; animation-delay: 0.2s; }
.signal-bars .bar:nth-child(3) { height: 14px; animation-delay: 0.4s; }
.signal-bars .bar:nth-child(4) { height: 18px; animation-delay: 0.6s; }

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

/* Bottom Left - Time Display */
.time-display {
    bottom: 20px;
    left: 20px;
}



#current-time {
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

/* KBTV Branding - Bottom Right Corner */
.kbtv-branding {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    text-align: center;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

.kbtv-logo {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
    color: #fff;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Live Cams */
.live-cams {
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.cam-title {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    z-index: 10;
}

.cam-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.cam-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    filter: contrast(1.1) brightness(1.05) saturate(1.2);
    animation: camZoom 8s ease-in-out infinite;
}

.cam-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        0deg,
        rgba(0, 255, 0, 0.1) 0%,
        transparent 20%,
        transparent 80%,
        rgba(0, 255, 0, 0.1) 100%
    );
    pointer-events: none;
}

.cam-static {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 8px 8px, 12px 12px, 15px 15px, 10px 10px, 10px 10px, 6px 6px, 6px 6px;
    animation: staticNoise 0.02s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

/* Live Cam Animations */
@keyframes staticNoise {
    0% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.6;
    }
    25% { 
        transform: translate(-2px, 1px) scale(1.02); 
        opacity: 0.7;
    }
    50% { 
        transform: translate(1px, -2px) scale(0.98); 
        opacity: 0.8;

    }
    75% { 
        transform: translate(-1px, -1px) scale(1.01); 
        opacity: 0.6;
    }
    100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.6;
    }
}

/* Cam Image Zoom Animation */
@keyframes camZoom {
    0% { 
        transform: scale(1.02); 
    }
    25% { 
        transform: scale(1.025); 
    }
    50% { 
        transform: scale(1.03); 
    }
    75% { 
        transform: scale(1.025); 
    }
    100% { 
        transform: scale(1.02); 
    }
}

/* Hologram Display */
.hologram-display {
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.holo-element {
    position: absolute;
    animation: holoFloat 4s ease-in-out infinite;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.holo-element:hover {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes holoFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg) scale(1); 
        opacity: 0.8;
    }
    25% { 
        transform: translateY(-20px) rotate(90deg) scale(1.05); 
        opacity: 0.9;
    }
    50% { 
        transform: translateY(-40px) rotate(180deg) scale(1.1); 
        opacity: 1;
    }
    75% { 
        transform: translateY(-20px) rotate(270deg) scale(1.05); 
        opacity: 0.9;
    }
}

/* Loading Simulator - Different Loader Types */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    margin: 20px 0;
}

/* Spinner Loader */
.spinner-loader {
    --spinner-color: #00ff00;
    --spinner-speed: medium;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid transparent;
    border-top: 6px solid var(--spinner-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    animation-duration: var(--animation-duration, 1s);
}

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

/* Dots Loader */
.dots-loader {
    --dots-color: #00ff00;
    --dots-speed: medium;
    display: flex;
    gap: 12px;
}

.dot {
    width: 20px;
    height: 20px;
    background: var(--dots-color);
    border-radius: 50%;
    animation: dotsBounce 1.4s ease-in-out infinite both;
    animation-duration: var(--animation-duration, 1.4s);
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }

@keyframes dotsBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Progress Bar Loader */
.progress-loader {
    --progress-color: #00ff00;
    --progress-speed: medium;
    width: 300px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    height: 100%;
    background: var(--progress-color);
    border-radius: 10px;
    animation: progressFill 2s ease-in-out infinite;
    animation-duration: var(--animation-duration, 2s);
}

@keyframes progressFill {
    0% { width: 0%; }
    50% { width: 100%; }
    100% { width: 0%; }
}

/* Circular Loader */
.circular-loader {
    --circular-color: #00ff00;
    --circular-speed: medium;
    position: relative;
    width: 80px;
    height: 80px;
}

.circular-progress {
    width: 100%;
    height: 100%;
    border: 8px solid rgba(255, 255, 255, 0.1);
    border-top: 8px solid var(--circular-color);
    border-radius: 50%;
    animation: circularSpin 1.5s linear infinite;
    animation-duration: var(--animation-duration, 1.5s);
}

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

/* Wave Loader */
.wave-loader {
    --wave-color: #00ff00;
    --wave-speed: medium;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    height: 60px;
}

.wave {
    width: 8px;
    background: var(--wave-color);
    border-radius: 4px;
    animation: waveMove 1.2s ease-in-out infinite;
    animation-duration: var(--animation-duration, 1.2s);
}

.wave:nth-child(1) { height: 20px; animation-delay: -0.4s; }
.wave:nth-child(2) { height: 40px; animation-delay: -0.3s; }
.wave:nth-child(3) { height: 60px; animation-delay: -0.2s; }
.wave:nth-child(4) { height: 40px; animation-delay: -0.1s; }

@keyframes waveMove {
    0%, 40%, 100% { transform: scaleY(0.4); }
    20% { transform: scaleY(1); }
}

/* Facts */
.facts {
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.fact-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.fact-image {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    filter: contrast(1.1) brightness(1.05) saturate(1.2);
    background-color: #1a1a1a;
}

.fact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 255, 0, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 255, 0, 0.1) 100%);
    pointer-events: none;
}

.fact-static {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 8px 8px, 12px 12px, 15px 15px, 10px 10px, 10px 10px, 6px 6px, 6px 6px;
    animation: staticNoise 0.02s linear infinite;
    opacity: 0.6;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* News Display */
.news-display {
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    font-family: 'Courier New', monospace;
}

.news-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    text-align: center;
}

.news-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    animation: newsGlow 3s ease-in-out infinite;
}

.news-summary {
    font-size: 18px;
    line-height: 1.6;
    color: #ccc;
    max-width: 600px;
    margin-bottom: 40px;
}

@keyframes newsGlow {
    0%, 100% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.5); }
    50% { text-shadow: 0 0 25px rgba(255, 255, 255, 0.8), 0 0 35px rgba(0, 255, 0, 0.3); }
}

/* TV Control Panel */
.tv-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    border-radius: 8px;
    border: 2px solid #555;
    box-shadow: 
        0 10px 20px rgba(0, 0, 0, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.tv-button {
    background: linear-gradient(145deg, #2d2d2d, #404040);
    border: 2px solid #666;
    border-radius: 6px;
    padding: 12px 20px;
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.tv-button:hover {
    background: linear-gradient(145deg, #404040, #555);
    border-color: #888;
    transform: translateY(-2px);
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.tv-button:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.button-icon {
    font-size: 20px;
    line-height: 1;
}

.button-text {
    font-size: 12px;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.skip-button {
    border-color: #4CAF50;
}

.skip-button:hover {
    border-color: #66BB6A;
    box-shadow: 
        0 6px 12px rgba(76, 175, 80, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.pause-button {
    border-color: #FF9800;
}

.pause-button:hover {
    border-color: #FFB74D;
    box-shadow: 
        0 6px 12px rgba(255, 152, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.pause-button.paused {
    background: linear-gradient(145deg, #FF9800, #F57C00);
    border-color: #FF9800;
    color: #000;
}

.pause-button.paused:hover {
    background: linear-gradient(145deg, #FFB74D, #FF9800);
    border-color: #FFB74D;
}

/* Channel Button Styles */
.channel-button {
    border-color: #2196F3;
}

.channel-button:hover {
    border-color: #64B5F6;
    box-shadow: 
        0 6px 12px rgba(33, 150, 243, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}



@keyframes shapeFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(180deg); }
}

/* Special animation for letters and numbers to maintain readability */
@keyframes shapeFloatText {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(90deg); }
}

/* Off-Air Channel Styles */
.off-air-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

.off-air-container > div {
    flex: 1;
    position: relative;
    transition: all 0.3s ease;
}

/* Apply different animation to letters and numbers */
.shape[data-type="letter"],
.shape[data-type="number"] {
    animation: shapeFloatText 4s ease-in-out infinite !important;
}

/* Additional styling for better standalone text appearance */
.shape[data-type="letter"],
.shape[data-type="number"] {
    transform-origin: center center !important;
    will-change: transform !important;
}

/* Ensure proper spacing and positioning for text elements */


/* Credits Display */
.credits-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, #000 0%, #1a1a1a 20%, #1a1a1a 80%, #000 100%);
}

.credits-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    box-sizing: border-box;
}

.credits-title {
    font-size: 48px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    margin-bottom: 10px;
    text-align: center;
    font-family: 'Arial Black', 'Arial', sans-serif;
    animation: creditsTitleGlow 3s ease-in-out infinite alternate;
}

.credits-subtitle {
    font-size: 18px;
    color: #87ceeb;
    margin-bottom: 40px;
    text-align: center;
    font-style: italic;
    opacity: 0.8;
}

.credits-roll {
    width: 100%;
    height: calc(100% - 200px);
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.credits-column {
    width: 48%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.left-column {
    animation: creditLineScroll 8s linear infinite;
}

.right-column {
    animation: creditLineScroll 8s linear infinite;
    animation-delay: 4s; /* Stagger the right column for variety */
}

.credit-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: creditLineScroll 8s linear infinite;
    white-space: nowrap;
    width: 48%;
}



.credit-role {
    font-size: 14px;
    color: #ffd700;
    font-weight: 600;
    min-width: 200px;
    text-align: left;
}

.credit-name {
    font-size: 16px;
    color: #ffffff;
    font-weight: 700;
    min-width: 250px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.credit-dept {
    font-size: 12px;
    color: #87ceeb;
    font-weight: 500;
    min-width: 150px;
    text-align: right;
    opacity: 0.8;
}

.credits-footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 20px;
}

.credits-thanks {
    font-size: 16px;
    color: #ffd700;
    margin-bottom: 10px;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.credits-copyright {
    font-size: 12px;
    color: #888;
    opacity: 0.7;
}

/* Credits Animations */
@keyframes creditLineScroll {
    0% {
        transform: translateY(100vh);
        opacity: 0;
    }
    2% {
        opacity: 1;
    }
    98% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh);
        opacity: 0;
    }
}

@keyframes creditsTitleGlow {
    0% {
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
        transform: scale(1);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 215, 0, 0.6);
        transform: scale(1.05);
    }
}

/* Responsive adjustments for credits */
@media (max-width: 768px) {
    .credits-title {
        font-size: 36px;
    }
    
    .credit-line {
        flex-direction: column;
        text-align: center;
        padding: 12px;
    }
    
    .credit-role,
    .credit-name,
    .credit-dept {
        min-width: auto;
        margin: 2px 0;
    }
}

/* Matrix Display */
.matrix-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, #000 0%, #001100 20%, #001100 80%, #000 100%);
}

.matrix-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 255, 0, 0.1) 100%);
    pointer-events: none;
}

.matrix-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    font-weight: 900;
    color: #00ff00;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
    z-index: 10;
    font-family: 'Courier New', monospace;
    animation: matrixTitleGlow 3s ease-in-out infinite alternate;
}

.matrix-subtitle {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: #00dd00;
    z-index: 10;
    font-family: 'Courier New', monospace;
    opacity: 0.8;
}

.matrix-stats {
    position: absolute;
    top: 120px;
    left: 20px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat {
    font-size: 12px;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.matrix-column {
    position: absolute;
    top: -100px;
    width: 20px;
    height: 200px;
    animation: matrixRain linear infinite;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    line-height: 1.2;
    overflow: hidden;
}

.matrix-characters {
    position: relative;
    animation: matrixScroll linear infinite;
    white-space: pre;
    text-shadow: 0 0 5px currentColor;
}

/* Matrix Animations */
@keyframes matrixRain {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes matrixScroll {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

@keyframes matrixTitleGlow {
    0% {
        text-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
        transform: translateX(-50%) scale(1);
    }
    100% {
        text-shadow: 0 0 30px rgba(0, 255, 0, 1), 0 0 40px rgba(0, 255, 0, 0.6);
        transform: translateX(-50%) scale(1.05);
    }
}

/* Neural-Quantum Hybrid Display */
.neural-quantum-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    color: #ffffff;
    font-family: 'Arial Black', 'Arial', sans-serif;
}

.hybrid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.1), transparent),
                radial-gradient(circle at 70% 70%, rgba(255, 0, 255, 0.1), transparent);
    pointer-events: none;
    z-index: 5;
}

.hybrid-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    font-weight: 900;
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    z-index: 20;
    animation: hybridTitleGlow 3s ease-in-out infinite alternate;
}

.hybrid-subtitle {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: #ff00ff;
    z-index: 20;
    opacity: 0.8;
}

.hybrid-stats {
    position: absolute;
    top: 120px;
    left: 20px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hybrid-stats .stat {
    background: rgba(0, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #00ffff;
    border: 1px solid rgba(0, 255, 255, 0.3);
}

.hybrid-system {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.neural-section {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
}

.quantum-section {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
}

.section-label {
    position: absolute;
    top: 160px;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    width: 100%;
    z-index: 15;
}

.neural-section .section-label {
    color: #00ffff;
}

.quantum-section .section-label {
    color: #ff00ff;
}

/* Hybrid Neural Nodes */
.hybrid-neural {
    position: absolute;
    background: radial-gradient(circle, #00ffff, #0080ff);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    animation: hybridNodePulse 2s ease-in-out infinite;
}

.hybrid-neural .node-core {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #ffffff, #00ffff);
    border-radius: 50%;
    position: relative;
}

.hybrid-neural .node-pulse {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 50%;
    animation: hybridNodePulseRing 3s ease-in-out infinite;
}

/* Hybrid Quantum Elements */
.hybrid-quantum {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff00ff, #8000ff);
    border-radius: 2px;
    animation: hybridQubitPulse 2s ease-in-out infinite;
}

.hybrid-quantum .qubit-state {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
}

.hybrid-quantum .state-0 { color: #00ffff; }
.hybrid-quantum .state-1 { color: #ff00ff; }
.hybrid-quantum .state-superposition { color: #ffff00; }

.hybrid-gate {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #ff00ff, #8000ff);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
    animation: hybridGatePulse 2s ease-in-out infinite;
}

.hybrid-gate .gate-symbol {
    color: #ffffff;
    font-weight: 900;
    font-size: 16px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.hybrid-gate .gate-pulse {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid rgba(255, 0, 255, 0.4);
    border-radius: 8px;
    animation: hybridGatePulseRing 3s ease-in-out infinite;
}

/* Hybrid Connections */
.hybrid-connection {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: linear-gradient(45deg, #00ffff, #ff00ff);
    border-radius: 50%;
    animation: hybridConnectionPulse 4s ease-in-out infinite;
}

.hybrid-connection .connection-pulse {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 50%;
    animation: hybridConnectionPulseRing 2s ease-in-out infinite;
}

.hybrid-connection .connection-trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 0, 255, 0.6), transparent);
    border-radius: 50%;
    animation: hybridConnectionTrail 3s ease-in-out infinite;
}

/* Hybrid Effects */
.hybrid-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    pointer-events: none;
}

.data-flow-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    animation: hybridDataFlow 4s linear infinite;
}

.quantum-coherence {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff00ff, transparent);
    animation: hybridQuantumCoherence 3s linear infinite;
}

.neural-quantum-sync {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffff00, transparent);
    animation: hybridSync 5s linear infinite;
}

/* Hybrid Animations */
@keyframes hybridTitleGlow {
    0% {
        text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
        transform: translateX(-50%) scale(1);
    }
    100% {
        text-shadow: 0 0 30px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 255, 255, 0.6);
        transform: translateX(-50%) scale(1.05);
    }
}

@keyframes hybridNodePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
    }
}

@keyframes hybridNodePulseRing {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes hybridQubitPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 0, 255, 0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
    }
}

@keyframes hybridGatePulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
    }
    50% {
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 0 30px rgba(255, 0, 255, 0.8);
    }
}

@keyframes hybridGatePulseRing {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes hybridConnectionPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}

@keyframes hybridConnectionPulseRing {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes hybridConnectionTrail {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes hybridDataFlow {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes hybridQuantumCoherence {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes hybridSync {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Neural Network Display */
.neural-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
}

.neural-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(0, 150, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.neural-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    font-weight: 900;
    color: #00b4ff;
    text-shadow: 0 0 20px rgba(0, 180, 255, 0.8);
    z-index: 10;
    font-family: 'Arial Black', 'Arial', sans-serif;
    animation: neuralTitleGlow 3s ease-in-out infinite alternate;
}

.neural-subtitle {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: #64b5f6;
    z-index: 10;
    font-family: 'Arial', sans-serif;
    opacity: 0.8;
}

.neural-stats {
    position: absolute;
    top: 120px;
    left: 20px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.neural-network {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}

.neural-node {
    position: absolute;
    border-radius: 50%;
    animation: nodePulse 2s ease-in-out infinite;
}

.node-core {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #00b4ff 0%, #0066cc 70%, #004499 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 180, 255, 0.6);
}

.node-pulse {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid rgba(0, 180, 255, 0.3);
    border-radius: 50%;
    animation: nodePulseRing 2s ease-in-out infinite;
}

.neural-connection {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00b4ff, transparent);
    transform-origin: left center;
    animation: connectionFlow 3s ease-in-out infinite;
    opacity: 0.6;
}

.data-flow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.data-stream {
    position: absolute;
    width: 4px;
    height: 20px;
    background: linear-gradient(to bottom, #00b4ff, #64b5f6, #90caf9);
    border-radius: 2px;
    animation: dataStreamFlow 4s linear infinite;
    opacity: 0.8;
}

/* Neural Network Animations */
@keyframes nodePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

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

@keyframes connectionFlow {
    0%, 100% {
        opacity: 0.3;
        transform: scaleX(0.8);
    }
    50% {
        opacity: 0.8;
        transform: scaleX(1.2);
    }
}

@keyframes dataStreamFlow {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes neuralTitleGlow {
    0% {
        text-shadow: 0 0 20px rgba(0, 180, 255, 0.8);
        transform: translateX(-50%) scale(1);
    }
    100% {
        text-shadow: 0 0 30px rgba(0, 180, 255, 1), 0 0 40px rgba(0, 180, 255, 0.6);
        transform: translateX(-50%) scale(1.05);
    }
}

/* Quantum Computing Display */
.quantum-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #2e0a4a 100%);
}

.quantum-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(138, 43, 226, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.quantum-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    font-weight: 900;
    color: #8a2be2;
    text-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
    z-index: 10;
    font-family: 'Arial Black', 'Arial', sans-serif;
    animation: quantumTitleGlow 3s ease-in-out infinite alternate;
}

.quantum-subtitle {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: #9370db;
    z-index: 10;
    font-family: 'Arial', sans-serif;
    opacity: 0.8;
}

.quantum-stats {
    position: absolute;
    top: 120px;
    left: 20px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quantum-circuit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}

.qubit-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8a2be2, transparent);
    animation: qubitLinePulse 2s ease-in-out infinite;
}

.qubit-state {
    position: absolute;
    left: 10px;
    top: -10px;
    display: flex;
    gap: 10px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #8a2be2;
}

.state-0, .state-1, .state-superposition {
    background: rgba(138, 43, 226, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(138, 43, 226, 0.5);
    animation: stateFlicker 1.5s ease-in-out infinite;
}

.quantum-gate {
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #8a2be2 0%, #4b0082 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.6);
    animation: gatePulse 2s ease-in-out infinite;
}

.gate-symbol {
    z-index: 2;
}

.gate-pulse {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: 12px;
    animation: gatePulseRing 2s ease-in-out infinite;
}

.entanglement-line {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, #8a2be2, #9370db, #8a2be2);
    animation: entanglementPulse 3s ease-in-out infinite;
    opacity: 0.7;
}

.entanglement-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #8a2be2, transparent);
    animation: entanglementFlow 2s ease-in-out infinite;
}

.quantum-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.superposition-effect, .interference-pattern, .coherence-wave {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.3), transparent);
    animation: quantumEffectFloat 4s ease-in-out infinite;
}

/* Quantum Computing Animations */
@keyframes qubitLinePulse {
    0%, 100% {
        opacity: 0.5;
        transform: scaleY(1);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.5);
    }
}

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

@keyframes gatePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(138, 43, 226, 0.6);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(138, 43, 226, 0.8);
    }
}

@keyframes gatePulseRing {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes entanglementPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scaleY(1);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

@keyframes entanglementFlow {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes quantumEffectFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 0.6;
    }
}

@keyframes quantumTitleGlow {
    0% {
        text-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
        transform: translateX(-50%) scale(1);
    }
    100% {
        text-shadow: 0 0 30px rgba(138, 43, 226, 1), 0 0 40px rgba(138, 43, 226, 0.6);
        transform: translateX(-50%) scale(1.05);
    }
}

/* Holographic Display */
.holographic-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
    perspective: 1000px;
}

.holographic-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.holographic-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    font-weight: 900;
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    z-index: 10;
    font-family: 'Arial Black', 'Arial', sans-serif;
    animation: holographicTitleGlow 3s ease-in-out infinite alternate;
}

.holographic-subtitle {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: #40e0d0;
    z-index: 10;
    font-family: 'Arial', sans-serif;
    opacity: 0.8;
}

.holographic-stats {
    position: absolute;
    top: 120px;
    left: 20px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.holographic-scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    transform-style: preserve-3d;
}

.hologram-object {
    position: absolute;
    transform-style: preserve-3d;
    animation: hologramFloat 6s ease-in-out infinite;
}

.object-wireframe {
    width: 100%;
    height: 100%;
    border: 2px solid #00ffff;
    position: relative;
    animation: wireframePulse 2s ease-in-out infinite;
}

.object-wireframe.cube {
    transform: rotateX(45deg) rotateY(45deg);
}

.object-wireframe.sphere {
    border-radius: 50%;
}

.object-wireframe.pyramid {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.object-wireframe.cylinder {
    border-radius: 50% / 20%;
}

.object-wireframe.torus {
    border-radius: 50%;
    box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.5);
}

.object-wireframe.dodecahedron {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.object-wireframe.icosahedron {
    clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
}

.object-wireframe.octahedron {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.object-surface {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.1), rgba(0, 255, 255, 0.05));
    border-radius: inherit;
    animation: surfaceShimmer 3s ease-in-out infinite;
}

.object-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.3), transparent);
    border-radius: inherit;
    animation: glowPulse 2s ease-in-out infinite;
}

.light-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 100px;
    transform-origin: center bottom;
    animation: lightRayRotate 8s linear infinite;
}

.ray-core {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #00ffff, transparent);
    animation: rayPulse 2s ease-in-out infinite;
}

.ray-trail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 255, 255, 0.3), transparent);
    animation: trailFade 1s ease-in-out infinite;
}

.interference-pattern {
    position: absolute;
    width: 100px;
    height: 100px;
    animation: interferenceRotate 4s linear infinite;
}

.interference-pattern.concentric {
    background: radial-gradient(circle, transparent 0%, rgba(0, 255, 255, 0.2) 50%, transparent 100%);
}

.interference-pattern.spiral {
    background: conic-gradient(from 0deg, transparent, rgba(0, 255, 255, 0.2), transparent);
}

.interference-pattern.grid {
    background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 255, 0.2) 50%, transparent 100%),
                linear-gradient(0deg, transparent 0%, rgba(0, 255, 255, 0.2) 50%, transparent 100%);
    background-size: 20px 20px;
}

.interference-pattern.wave {
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 255, 255, 0.2) 10px, rgba(0, 255, 255, 0.2) 20px);
}

.interference-pattern.fractal {
    background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(0, 255, 255, 0.2) 0%, transparent 50%);
}

.holographic-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.depth-field, .refraction-effect, .quantum-tunnel {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.2), transparent);
    animation: holographicEffectFloat 5s ease-in-out infinite;
}

/* Holographic Animations */
@keyframes hologramFloat {
    0%, 100% {
        transform: translateZ(0px) rotateY(0deg);
    }
    50% {
        transform: translateZ(50px) rotateY(180deg);
    }
}

@keyframes wireframePulse {
    0%, 100% {
        border-color: #00ffff;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    }
    50% {
        border-color: #40e0d0;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    }
}

@keyframes surfaceShimmer {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes glowPulse {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

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

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

@keyframes trailFade {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

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

@keyframes holographicEffectFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-30px) scale(1.3);
        opacity: 0.5;
    }
}

@keyframes holographicTitleGlow {
    0% {
        text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
        transform: translateX(-50%) scale(1);
    }
    100% {
        text-shadow: 0 0 30px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 255, 255, 0.6);
        transform: translateX(-50%) scale(1.05);
    }
}

/* Cyberpunk City Display */
.cyberpunk-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 50%, #2a0a2a 100%);
}

.cyberpunk-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(255, 20, 147, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.cyberpunk-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    font-weight: 900;
    color: #ff1493;
    text-shadow: 0 0 20px rgba(255, 20, 147, 0.8);
    z-index: 10;
    font-family: 'Arial Black', 'Arial', sans-serif;
    animation: cyberpunkTitleGlow 3s ease-in-out infinite alternate;
}

.cyberpunk-subtitle {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: #ff69b4;
    z-index: 10;
    font-family: 'Arial', sans-serif;
    opacity: 0.8;
}

.cyberpunk-stats {
    position: absolute;
    top: 120px;
    left: 20px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cyberpunk-scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}

.cyberpunk-building {
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, #1a1a1a 0%, #2a2a2a 50%, #3a3a3a 100%);
    border: 1px solid rgba(255, 20, 147, 0.3);
    animation: buildingGlow 4s ease-in-out infinite;
}

.building-structure {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
}

.building-windows {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(90deg, transparent 0%, transparent 8px, rgba(255, 20, 147, 0.1) 8px, rgba(255, 20, 147, 0.1) 16px),
                repeating-linear-gradient(0deg, transparent 0%, transparent 8px, rgba(255, 20, 147, 0.1) 8px, rgba(255, 20, 147, 0.1) 16px);
    background-size: 16px 16px;
    animation: windowFlicker 2s ease-in-out infinite;
}

.building-neon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff1493, #ff69b4, #ff1493);
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.8);
    animation: neonPulse 1.5s ease-in-out infinite;
}

.building-smoke {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(128, 128, 128, 0.6), transparent);
    border-radius: 50%;
    animation: smokeRise 3s ease-in-out infinite;
}

.cyberpunk-vehicle {
    position: absolute;
    width: 40px;
    height: 20px;
    animation: vehicleFly 8s linear infinite;
}

.vehicle-body {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ff1493, #ff69b4);
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.6);
}

.vehicle-lights {
    position: absolute;
    top: -2px;
    left: 5px;
    right: 5px;
    height: 4px;
    background: linear-gradient(90deg, #00ffff, #ff1493, #00ffff);
    border-radius: 2px;
    animation: vehicleLightsBlink 0.5s ease-in-out infinite alternate;
}

.vehicle-trail {
    position: absolute;
    top: 50%;
    left: -20px;
    width: 20px;
    height: 2px;
    background: linear-gradient(to right, transparent, #ff1493);
    animation: trailFade 1s ease-in-out infinite;
}

.cyberpunk-hologram {
    position: absolute;
    width: 60px;
    height: 40px;
    animation: hologramFloat 4s ease-in-out infinite;
}

.hologram-content {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 20, 147, 0.3), rgba(0, 255, 255, 0.3));
    border: 2px solid rgba(255, 20, 147, 0.5);
    border-radius: 8px;
    position: relative;
}

.hologram-glitch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 20, 147, 0.2) 50%, transparent 100%);
    animation: glitchEffect 0.1s ease-in-out infinite;
}

.hologram-flicker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    animation: flickerEffect 2s ease-in-out infinite;
}

.neon-sign {
    position: absolute;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #ff1493;
    border-radius: 8px;
    animation: neonSignGlow 2s ease-in-out infinite;
}

.sign-text {
    color: #ff1493;
    font-weight: bold;
    font-family: 'Arial Black', 'Arial', sans-serif;
    text-shadow: 0 0 10px rgba(255, 20, 147, 0.8);
    z-index: 2;
    position: relative;
}

.sign-glow {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(circle, rgba(255, 20, 147, 0.3), transparent);
    border-radius: 12px;
    animation: signGlowPulse 2s ease-in-out infinite;
}

.sign-flicker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 20, 147, 0.1);
    border-radius: 6px;
    animation: signFlicker 0.5s ease-in-out infinite;
}

.cyberpunk-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.rain-effect, .glitch-overlay, .data-stream {
    position: absolute;
    animation: cyberpunkEffectFloat 6s ease-in-out infinite;
}

.rain-effect {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(90deg, transparent 0%, transparent 98%, rgba(0, 255, 255, 0.3) 98%, rgba(0, 255, 255, 0.3) 100%);
    background-size: 4px 4px;
    animation: rainFall 1s linear infinite;
}

.glitch-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 0%, rgba(255, 20, 147, 0.1) 50%, transparent 100%);
    animation: glitchOverlay 3s ease-in-out infinite;
}

.data-stream {
    width: 4px;
    height: 100px;
    background: linear-gradient(to bottom, #ff1493, #00ffff);
    border-radius: 2px;
    animation: dataStreamFlow 4s linear infinite;
}

/* Cyberpunk Animations */
@keyframes buildingGlow {
    0%, 100% {
        border-color: rgba(255, 20, 147, 0.3);
        box-shadow: 0 0 10px rgba(255, 20, 147, 0.2);
    }
    50% {
        border-color: rgba(255, 20, 147, 0.6);
        box-shadow: 0 0 20px rgba(255, 20, 147, 0.4);
    }
}

@keyframes windowFlicker {
    0%, 100% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.3;
    }
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 20, 147, 0.8);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 20, 147, 1);
    }
}

@keyframes smokeRise {
    0% {
        transform: translateX(-50%) translateY(0px);
        opacity: 0.6;
    }
    100% {
        transform: translateX(-50%) translateY(-40px);
        opacity: 0;
    }
}

@keyframes vehicleFly {
    0% {
        transform: translateX(-100px) translateY(0px);
    }
    100% {
        transform: translateX(calc(100vw + 100px)) translateY(-20px);
    }
}

@keyframes vehicleLightsBlink {
    0% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

@keyframes trailFade {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

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

@keyframes glitchEffect {
    0%, 100% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(2px);
    }
}

@keyframes flickerEffect {
    0%, 100% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.3;
    }
}

@keyframes neonSignGlow {
    0%, 100% {
        border-color: #ff1493;
        box-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
    }
    50% {
        border-color: #ff69b4;
        box-shadow: 0 0 20px rgba(255, 20, 147, 0.8);
    }
}

@keyframes signGlowPulse {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes signFlicker {
    0%, 100% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.2;
    }
}

@keyframes cyberpunkEffectFloat {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-15px);
        opacity: 0.6;
    }
}

@keyframes rainFall {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

@keyframes glitchOverlay {
    0%, 100% {
        opacity: 0.1;
        transform: skew(0deg);
    }
    25% {
        opacity: 0.2;
        transform: skew(1deg);
    }
    75% {
        opacity: 0.15;
        transform: skew(-1deg);
    }
}

@keyframes dataStreamFlow {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes cyberpunkTitleGlow {
    0% {
        text-shadow: 0 0 20px rgba(255, 20, 147, 0.8);
        transform: translateX(-50%) scale(1);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 20, 147, 1), 0 0 40px rgba(255, 20, 147, 0.6);
        transform: translateX(-50%) scale(1.05);
    }
}



/* Weather Display */
.weather-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #87ceeb, #98d8e8, #b0e0e6);
    color: #ffffff;
}

.weather-scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.weather-cloud {
    position: absolute;
    width: 80px;
    height: 40px;
    animation: cloudFloat 20s linear infinite;
}

.cloud-body {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.cloud-shadow {
    position: absolute;
    bottom: -10px;
    left: 10px;
    right: 10px;
    height: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    filter: blur(5px);
}

.weather-particle {
    position: absolute;
    top: -10px;
    width: var(--particle-size);
    height: var(--particle-size);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: particleFall var(--particle-speed) linear infinite;
}

.weather-particle.rainy { background: #87ceeb; }
.weather-particle.snowy { background: #ffffff; }
.weather-particle.stormy { background: #4169e1; }
.weather-particle.hail { background: #b0c4de; }

.weather-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    pointer-events: none;
}

.atmospheric-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(135, 206, 235, 0.1), transparent);
    animation: atmosphericPulse 8s ease-in-out infinite;
}

.wind-streams {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 50px, rgba(255, 255, 255, 0.1) 50px, rgba(255, 255, 255, 0.1) 100px);
    animation: windStream 15s linear infinite;
}

.temperature-field {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 165, 0, 0.1), transparent);
    animation: temperatureShift 12s ease-in-out infinite;
}

/* Sports Display */
.sports-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #2c3e50, #34495e, #2c3e50);
    color: #ffffff;
}

.sports-scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.sports-player {
    position: absolute;
    border-radius: 50%;
    animation: playerMove 8s ease-in-out infinite;
}

.player-body {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #3498db, #2980b9);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.6);
}

.sports-player.team-b .player-body {
    background: radial-gradient(circle, #e74c3c, #c0392b);
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
}

.player-shadow {
    position: absolute;
    bottom: -8px;
    left: 10%;
    right: 10%;
    height: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    filter: blur(4px);
}

.player-movement {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid rgba(52, 152, 219, 0.4);
    border-radius: 50%;
    animation: playerPulse 3s ease-in-out infinite;
}

.sports-ball {
    position: absolute;
    border-radius: 50%;
    animation: ballBounce 4s ease-in-out infinite;
}

.ball-core {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #f39c12, #e67e22);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.6);
}

.ball-trail {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(243, 156, 18, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ballTrail 2s ease-in-out infinite;
}

.sports-effect {
    position: absolute;
    width: 30px;
    height: 30px;
    animation: effectPulse 5s ease-in-out infinite;
}

.effect-pulse {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.6), transparent);
    border-radius: 50%;
    animation: pulseRing 2s ease-in-out infinite;
}

.effect-trail {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(52, 152, 219, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: trailExpand 3s ease-in-out infinite;
}

.sports-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    pointer-events: none;
}

.crowd-noise {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 98%, rgba(255, 255, 255, 0.05) 98%, rgba(255, 255, 255, 0.05) 100%);
    background-size: 100% 3px;
    animation: crowdNoise 0.5s linear infinite;
}

.stadium-lights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1), transparent),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1), transparent);
    animation: stadiumLights 8s ease-in-out infinite;
}

.game-energy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(52, 152, 219, 0.1) 50%, transparent 100%);
    animation: gameEnergy 6s ease-in-out infinite;
}

/* Entertainment Display */
.entertainment-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #8e44ad, #9b59b6, #8e44ad);
    color: #ffffff;
}

.entertainment-scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.entertainment-spotlight {
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    animation: spotlightSweep 12s linear infinite;
}

.spotlight-beam {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
    transform-origin: top;
    animation: beamIntensity 4s ease-in-out infinite;
}

.spotlight-core {
    position: absolute;
    top: 0;
    left: -2px;
    width: 8px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.entertainment-particle {
    position: absolute;
    border-radius: 50%;
    animation: particleFloat 8s ease-in-out infinite;
}

.entertainment-particle.sparkle {
    background: radial-gradient(circle, #f1c40f, #f39c12);
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.8);
}

.entertainment-particle.glitter {
    background: radial-gradient(circle, #e74c3c, #c0392b);
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.8);
}

.entertainment-effect {
    position: absolute;
    width: 40px;
    height: 40px;
    animation: effectGlow 6s ease-in-out infinite;
}

.effect-pulse {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.6), transparent);
    border-radius: 50%;
    animation: pulseExpand 3s ease-in-out infinite;
}

.effect-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(142, 68, 173, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: waveExpand 4s ease-in-out infinite;
}

.entertainment-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    pointer-events: none;
}

.stage-lights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(241, 196, 15, 0.1), transparent),
                radial-gradient(circle at 70% 70%, rgba(231, 76, 60, 0.1), transparent);
    animation: stageLights 10s ease-in-out infinite;
}

.crowd-energy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 100px, rgba(142, 68, 173, 0.1) 100px, rgba(142, 68, 173, 0.1) 200px);
    animation: crowdEnergy 8s linear infinite;
}

.performance-aura {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(142, 68, 173, 0.1) 50%, transparent 100%);
    animation: performanceAura 12s ease-in-out infinite;
}

/* Videos Display */
.videos-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #000;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    outline: none;
    transition: filter 0.5s ease-in-out;
}

/* Responsive adjustments for videos */
@media (max-width: 768px) {
    .video-player {
        object-fit: cover;
    }
}

/* Weather Animations */
@keyframes cloudFloat {
    0% { transform: translateX(-100px) scale(1); }
    50% { transform: translateX(50vw) scale(1.1); }
    100% { transform: translateX(100vw) scale(1); }
}

@keyframes particleFall {
    0% { transform: translateY(-10px); opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes atmosphericPulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

@keyframes windStream {
    0% { transform: translateX(-100px); }
    100% { transform: translateX(100vw); }
}

@keyframes temperatureShift {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(1.1); }
}

/* Sports Animations */
@keyframes playerMove {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(20px, -15px) scale(1.1); }
    50% { transform: translate(40px, 0) scale(1); }
    75% { transform: translate(20px, 15px) scale(0.9); }
}

@keyframes playerPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes ballBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.1); }
}

@keyframes ballTrail {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.3; }
}

@keyframes effectPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

@keyframes pulseRing {
    0% { transform: scale(0.5); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes trailExpand {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.3; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

@keyframes crowdNoise {
    0% { transform: translateY(0); }
    100% { transform: translateY(3px); }
}

@keyframes stadiumLights {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}

@keyframes gameEnergy {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* Entertainment Animations */
@keyframes spotlightSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes beamIntensity {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
}

@keyframes particleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 1; }
    25% { transform: translateY(-20px) rotate(90deg); opacity: 0.8; }
    50% { transform: translateY(-40px) rotate(180deg); opacity: 0.6; }
    75% { transform: translateY(-20px) rotate(270deg); opacity: 0.8; }
}

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

@keyframes pulseExpand {
    0% { transform: scale(0.5); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes waveExpand {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

@keyframes stageLights {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}

@keyframes crowdEnergy {
    0% { transform: translateX(-100px); }
    100% { transform: translateX(100vw); }
}

@keyframes performanceAura {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(1.1); }
}

/* Bots Display Styles */
.bots-display {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    color: #fff;
    font-family: 'Courier New', monospace;
    position: relative;
    overflow: hidden;
}

.bots-header {
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #00ff41;
    background: rgba(0, 255, 65, 0.1);
}

.game-title {
    font-size: 2.5em;
    font-weight: bold;
    color: #00ff41;
    text-shadow: 0 0 20px #00ff41;
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.game-stats {
    font-size: 1.2em;
    color: #00d4ff;
    opacity: 0.8;
}

.bots-container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
}

.bot-status {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #00ff41;
    border-radius: 8px;
    flex: 1;
    position: relative;
}

.bot-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(45deg, #00ff41, #00d4ff);
    position: relative;
    overflow: hidden;
}

.bot-1-avatar {
    background: linear-gradient(45deg, #ff6b6b, #ff8e53);
}

.bot-2-avatar {
    background: linear-gradient(45deg, #4ecdc4, #44a08d);
}

.bot-avatar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.bot-info {
    flex: 1;
}

.bot-name {
    font-size: 1.5em;
    font-weight: bold;
    color: #00ff41;
    margin-bottom: 5px;
}

.bot-personality {
    font-size: 0.9em;
    color: #00d4ff;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bot-status-text {
    font-size: 0.8em;
    color: #fff;
    opacity: 0.8;
}

.bot-activity-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00ff41;
    animation: botThinking 2s infinite;
}

@keyframes botThinking {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.game-board-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
}

.game-board {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #00ff41;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
}

/* Battleship Board */
.battleship-board {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 1px;
    width: 300px;
    height: 300px;
    background: #0a0a0a;
    border: 2px solid #00ff41;
    border-radius: 4px;
    padding: 8px;
}

.battleship-cell {
    background: rgba(0, 255, 65, 0.05);
    border: 1px solid rgba(0, 255, 65, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 1em;
    font-weight: bold;
    color: #00ff41;
    transition: all 0.3s ease;
    min-width: 28px;
    min-height: 28px;
}

.battleship-cell:hover {
    background: rgba(0, 255, 65, 0.15);
    transform: scale(1.05);
    z-index: 2;
}

.cell-ship {
    background: rgba(0, 255, 65, 0.2);
    border-color: #00ff41;
}

.cell-hit {
    background: rgba(255, 107, 107, 0.3);
    border-color: #ff6b6b;
    color: #ff6b6b;
    text-shadow: 0 0 10px #ff6b6b;
}

.cell-miss {
    background: rgba(0, 212, 255, 0.2);
    border-color: #00d4ff;
    color: #00d4ff;
    text-shadow: 0 0 10px #00d4ff;
}

.cell-empty {
    color: transparent;
}

.cell-c {
    background: rgba(255, 107, 107, 0.3);
    border-color: #ff6b6b;
}

.cell-b {
    background: rgba(78, 205, 196, 0.3);
    border-color: #4ecdc4;
}

.cell-r {
    background: rgba(255, 142, 83, 0.3);
    border-color: #ff8e53;
}

.cell-s {
    background: rgba(255, 193, 7, 0.3);
    border-color: #ffc107;
}

.cell-d {
    background: rgba(156, 39, 176, 0.3);
    border-color: #9c27b0;
}

/* Connect Four Board */
.cf-board {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 3px;
    width: 350px;
    height: 300px;
}

.cf-cell {
    background: rgba(0, 255, 65, 0.1);
    border: 1px solid #00ff41;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 1.2em;
    font-weight: bold;
    transition: all 0.3s ease;
}

.cf-cell:hover {
    background: rgba(0, 255, 65, 0.2);
    transform: scale(1.1);
}

.cell-r {
    background: radial-gradient(circle, #ff6b6b, #ff4757);
    color: #fff;
    text-shadow: 0 0 5px #ff6b6b;
}

.cell-y {
    background: radial-gradient(circle, #ffa502, #ff6348);
    color: #fff;
    text-shadow: 0 0 5px #ffa502;
}

/* Checkers Board */
.checkers-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 0;
    width: 320px;
    height: 320px;
    border: 2px solid #00ff41;
}

.checkers-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.cell-dark {
    background: #8b4513;
}

.cell-light {
    background: #deb887;
}

.piece {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.piece-r {
    background: radial-gradient(circle, #ff6b6b, #ff4757);
}

.piece-b {
    background: radial-gradient(circle, #2c3e50, #34495e);
}

/* Othello Board */
.othello-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 0;
    width: 320px;
    height: 320px;
    border: 2px solid #00ff41;
}

.othello-cell {
    background: #228b22;
    border: 1px solid #006400;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.othello-cell .piece {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cell-w .piece {
    background: radial-gradient(circle, #fff, #f0f0f0);
}

.cell-b .piece {
    background: radial-gradient(circle, #000, #333);
}

/* Gomoku Board */
.gomoku-board {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
    gap: 0;
    width: 300px;
    height: 300px;
    border: 2px solid #00ff41;
    background: #deb887;
}

.gomoku-cell {
    border: 1px solid #8b4513;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.gomoku-cell .piece {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #000;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cell-b .piece {
    background: radial-gradient(circle, #000, #333);
}

.cell-w .piece {
    background: radial-gradient(circle, #fff, #f0f0f0);
}

.game-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.thinking-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
    animation: thinkingPulse 3s infinite;
}

@keyframes thinkingPulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

.move-highlights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.2) 0%, transparent 70%);
    animation: highlightPulse 2s infinite;
}

@keyframes highlightPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.2; }
}

.game-energy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 65, 0.1) 50%, transparent 70%);
    animation: energyFlow 4s infinite;
}

@keyframes energyFlow {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.bots-footer {
    padding: 20px;
    border-top: 2px solid #00ff41;
    background: rgba(0, 255, 65, 0.1);
}

.game-controls {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.control-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #00ff41;
    border-radius: 4px;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff41;
    animation: indicatorPulse 1.5s infinite;
}

@keyframes indicatorPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.indicator-text {
    font-size: 0.8em;
    color: #00ff41;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Video Games Display Styles */
.video-games-display {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(135deg, #1a0a2e, #16213e, #0f3460);
    color: #fff;
    font-family: 'Courier New', monospace;
    position: relative;
    overflow: hidden;
}

.vg-header {
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.vg-title {
    font-size: 2.5em;
    font-weight: bold;
    color: #ff6b6b;
    text-shadow: 0 0 20px #ff6b6b;
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.vg-stats {
    font-size: 1.2em;
    color: #ffd93d;
    opacity: 0.8;
}

.vg-bots-container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
}

.vg-bot-status {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #ff6b6b;
    border-radius: 8px;
    flex: 1;
    position: relative;
}

.vg-bot-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b6b, #ff8e53);
    position: relative;
    overflow: hidden;
}

.vg-bot-1-avatar {
    background: linear-gradient(45deg, #ff6b6b, #ff8e53);
}

.vg-bot-2-avatar {
    background: linear-gradient(45deg, #4ecdc4, #44a08d);
}

.vg-bot-avatar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.vg-bot-info {
    flex: 1;
}

.vg-bot-name {
    font-size: 1.5em;
    font-weight: bold;
    color: #ff6b6b;
    margin-bottom: 5px;
}

.vg-bot-personality {
    font-size: 0.9em;
    color: #ffd93d;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vg-bot-status-text {
    font-size: 0.8em;
    color: #fff;
    opacity: 0.8;
}

.vg-bot-activity-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6b6b;
    animation: vgBotThinking 2s infinite;
}

@keyframes vgBotThinking {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.vg-game-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
}

.vg-game-screen {
    background: rgba(0, 0, 0, 0.9);
    border: 3px solid #ff6b6b;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.4);
    min-width: 400px;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Pong Game */
.pong-arena {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    border: 2px solid #fff;
    border-radius: 4px;
}

.pong-paddle {
    position: absolute;
    width: 15px;
    height: 80px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px #fff;
}

.paddle-left {
    left: 20px;
}

.paddle-right {
    right: 20px;
}

.pong-ball {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ff6b6b;
    border-radius: 50%;
    box-shadow: 0 0 15px #ff6b6b;
    animation: pongBounce 2s infinite;
}

@keyframes pongBounce {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(100px, -50px); }
    50% { transform: translate(200px, 50px); }
    75% { transform: translate(100px, -30px); }
}

.pong-center-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
    opacity: 0.5;
}

.pong-score {
    position: absolute;
    top: 20px;
    font-size: 2em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px #fff;
}

.left-score {
    left: 30px;
}

.right-score {
    right: 30px;
}

/* Tetris Game */
.tetris-board {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(20, 1fr);
    gap: 1px;
    width: 300px;
    height: 600px;
    background: #000;
    border: 2px solid #fff;
    padding: 10px;
}

.tetris-cell {
    background: #000;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
}

.tetris-i { background: #00ffff; }
.tetris-o { background: #ffff00; }
.tetris-t { background: #800080; }
.tetris-s { background: #00ff00; }
.tetris-z { background: #ff0000; }
.tetris-j { background: #0000ff; }
.tetris-l { background: #ffa500; }

/* Snake Game */
.snake-arena {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    border: 2px solid #00ff00;
    border-radius: 4px;
}

.snake-segment {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    transition: all 0.1s ease;
}

.snake-head {
    background: #00ff00;
    box-shadow: 0 0 15px #00ff00;
}

.snake-body {
    background: #00cc00;
    box-shadow: 0 0 10px #00cc00;
}

.snake-food {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff0000;
    animation: foodPulse 1s infinite;
}

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

/* Breakout Game */
.breakout-arena {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    border: 2px solid #ffd93d;
    border-radius: 4px;
}

.breakout-bricks {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 2px;
    padding: 20px;
    height: 60%;
}

.breakout-brick {
    background: #ff6b6b;
    border-radius: 2px;
    box-shadow: 0 0 5px #ff6b6b;
}

.brick-type-0 { background: #ff6b6b; }
.brick-type-1 { background: #4ecdc4; }
.brick-type-2 { background: #ffd93d; }
.brick-type-3 { background: #9c27b0; }

.breakout-paddle {
    position: absolute;
    bottom: 20px;
    width: 80px;
    height: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px #fff;
}

.breakout-ball {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
    animation: breakoutBounce 3s infinite;
}

@keyframes breakoutBounce {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(50px, -100px); }
    50% { transform: translate(100px, 0); }
    75% { transform: translate(50px, -50px); }
}

/* Space Invaders Game */
.space-invaders-arena {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    border: 2px solid #4ecdc4;
    border-radius: 4px;
}

.space-aliens {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    padding: 20px;
    height: 50%;
}

.space-alien {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    animation: alienFloat 2s infinite;
}

.alien-type-0 { background: #ff6b6b; color: #ff6b6b; }
.alien-type-1 { background: #4ecdc4; color: #4ecdc4; }
.alien-type-2 { background: #ffd93d; color: #ffd93d; }

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

.space-player {
    position: absolute;
    bottom: 20px;
    width: 40px;
    height: 20px;
    background: #4ecdc4;
    border-radius: 4px;
    box-shadow: 0 0 15px #4ecdc4;
}

.space-bullet {
    position: absolute;
    width: 4px;
    height: 15px;
    background: #ffd93d;
    border-radius: 2px;
    box-shadow: 0 0 10px #ffd93d;
    animation: bulletMove 1s infinite;
}

@keyframes bulletMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100px); }
}

.vg-game-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.vg-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 107, 107, 0.1) 2px,
        rgba(255, 107, 107, 0.1) 4px
    );
    animation: scanlines 0.1s infinite;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

.vg-glitch-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 107, 107, 0.05);
    animation: glitchEffect 3s infinite;
}

@keyframes glitchEffect {
    0%, 90%, 100% { opacity: 0; }
    5%, 85% { opacity: 0.1; }
}

.vg-crt-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

.vg-footer {
    padding: 20px;
    border-top: 2px solid #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.vg-controls {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.vg-control-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #ff6b6b;
    border-radius: 4px;
}

.vg-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6b6b;
    animation: vgIndicatorPulse 1.5s infinite;
}

@keyframes vgIndicatorPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.vg-indicator-text {
    font-size: 0.8em;
    color: #ff6b6b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Channel Display Styles */
.channel-display-container {
    position: relative;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    padding: 12px 24px;
    border-radius: 20px;
    border: 2px solid #2196F3;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    min-width: 250px;
    align-self: center;
}

/* Board Display Two-Column Layout */
.board-layout {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 15px;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.board-left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px 15px 15px 40px;
    max-width: 300px;
}

.board-right-column {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    min-width: 400px;
}

.board-header {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 40px;
}

.game-title {
    font-size: 26px;
    font-weight: bold;
    color: #2196F3;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.6);
}

.game-stats {
    font-size: 15px;
    color: #90CAF9;
    font-family: 'Courier New', monospace;
}

.bots-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.game-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.control-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: 6px;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    background: #2196F3;
    border-radius: 50%;
    animation: indicatorPulse 1.5s infinite;
}

.indicator-text {
    font-size: 12px;
    color: #90CAF9;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

/* Game Board Styling */
.game-board-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.game-board {
    transform: scale(1.2);
    margin: 30px;
}

.game-effects {
    position: relative;
    width: 100%;
    height: 100%;
}

@keyframes indicatorPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.channel-label {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #2196F3;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.6);
}

.channel-number {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.8);
    letter-spacing: 1px;
}