/* ZOLAK Calendar - CSS Variables and Base Styles */
:root {
    /* ZOLAK Brand Colors */
    --color-primary-yellow: #FFF80C;
    --color-primary-black: #000000;
    --color-secondary-green: #1DB000;
    --color-secondary-white: #FFFFFF;
    --color-accent-orange: #FF6600;
    
    /* Typography */
    --font-pixel: 'Retron2000', 'Courier New', monospace;
    --font-regular: 'Courier New', monospace;
    
    /* Layout */
    --border-width: 2px;
    --glow-size: 12px;
    --transition-speed: 0.3s;
}

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

html, body {
    min-height: 100vh;
    min-height: 100dvh; /* Fallback for modern browsers */
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height */
    overflow: hidden;
    font-family: var(--font-regular);
    background: var(--color-primary-black);
    color: var(--color-secondary-white);
}

body {
    display: flex;
    flex-direction: column;
}

/* Pixel Text Styling */
.pixel-text {
    font-family: var(--font-pixel);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
}

/* Background Effects */
.bg-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Enhanced Pixel Grid with Glitch Effect */
.pixel-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(90deg, rgba(29, 176, 0, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 248, 12, 0.02) 1px, transparent 1px);
    background-size: 32px 32px;
    animation: gridShift 20s ease-in-out infinite, gridGlitch 8s infinite;
}

/* Advanced Scanlines with RGB Split */
.scanlines {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        transparent 0px,
        rgba(29, 176, 0, 0.03) 1px,
        transparent 2px
    );
    background-size: 100% 4px;
    animation: scanlineMove 0.1s linear infinite, scanlineGlitch 12s infinite;
}

/* Digital Noise Pattern */
.digital-noise {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 248, 12, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 80% 50%, rgba(29, 176, 0, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 40% 20%, rgba(255, 248, 12, 0.01) 1px, transparent 1px);
    background-size: 16px 16px, 24px 24px, 32px 32px;
    animation: digitalNoise 3s linear infinite;
    opacity: 0.7;
}

/* Matrix-style Data Stream */
.data-stream {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(29, 176, 0, 0.01) 50%, transparent 100%),
        linear-gradient(0deg, transparent 0%, rgba(255, 248, 12, 0.005) 50%, transparent 100%);
    background-size: 200px 100vh, 100vw 200px;
    animation: dataFlow 25s linear infinite;
}

/* Chromatic Aberration Effect */
.chromatic-aberration {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, rgba(255, 248, 12, 0.005) 0%, transparent 25%, transparent 75%, rgba(255, 248, 12, 0.005) 100%),
        linear-gradient(-45deg, rgba(29, 176, 0, 0.005) 0%, transparent 25%, transparent 75%, rgba(29, 176, 0, 0.005) 100%);
    background-size: 400px 400px, 600px 600px;
    animation: chromaticShift 15s ease-in-out infinite;
}

/* Holographic Interference Pattern */
.holographic-interference {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(255, 248, 12, 0.01) 2px,
            rgba(255, 248, 12, 0.01) 4px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 3px,
            rgba(29, 176, 0, 0.008) 3px,
            rgba(29, 176, 0, 0.008) 6px
        );
    animation: holographicShimmer 20s ease-in-out infinite;
}

/* Circuit Board Pattern */
.circuit-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(90deg, rgba(29, 176, 0, 0.015) 1px, transparent 1px),
        linear-gradient(0deg, rgba(29, 176, 0, 0.015) 1px, transparent 1px),
        radial-gradient(circle at 25% 25%, rgba(255, 248, 12, 0.02) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(255, 248, 12, 0.02) 2px, transparent 2px);
    background-size: 64px 64px, 64px 64px, 128px 128px, 96px 96px;
    animation: circuitPulse 30s ease-in-out infinite;
    opacity: 0.6;
}

/* Glitch Static Overlay */
.glitch-static {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.002) 20%,
            transparent 21%,
            transparent 40%,
            rgba(255, 248, 12, 0.003) 41%,
            transparent 42%,
            transparent 80%,
            rgba(29, 176, 0, 0.002) 81%,
            transparent 100%
        );
    animation: staticGlitch 0.3s infinite;
}

/* Enhanced Keyframe Animations */
@keyframes gridShift {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(2px, 1px); }
    50% { transform: translate(0, 2px); }
    75% { transform: translate(-1px, 0); }
}

@keyframes gridGlitch {
    0%, 90%, 100% { filter: hue-rotate(0deg) brightness(1); }
    91% { filter: hue-rotate(90deg) brightness(1.2); }
    92% { filter: hue-rotate(-30deg) brightness(0.8); }
    93% { filter: hue-rotate(180deg) brightness(1.1); }
    94% { filter: hue-rotate(0deg) brightness(1); }
}

@keyframes scanlineMove {
    0% { background-position: 0 0; }
    100% { background-position: 0 4px; }
}

@keyframes scanlineGlitch {
    0%, 85%, 100% { opacity: 1; transform: skewX(0deg); }
    86% { opacity: 0.8; transform: skewX(2deg); }
    87% { opacity: 1.2; transform: skewX(-1deg); }
    88% { opacity: 0.9; transform: skewX(0deg); }
}

@keyframes digitalNoise {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.7; }
    25% { transform: translate(1px, -1px) rotate(0.5deg); opacity: 0.5; }
    50% { transform: translate(-1px, 1px) rotate(-0.5deg); opacity: 0.8; }
    75% { transform: translate(1px, 1px) rotate(0.2deg); opacity: 0.6; }
}

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

@keyframes chromaticShift {
    0%, 100% { transform: translateX(0) translateY(0); filter: hue-rotate(0deg); }
    25% { transform: translateX(2px) translateY(-1px); filter: hue-rotate(90deg); }
    50% { transform: translateX(-1px) translateY(2px); filter: hue-rotate(180deg); }
    75% { transform: translateX(1px) translateY(1px); filter: hue-rotate(270deg); }
}

@keyframes holographicShimmer {
    0%, 100% { transform: translateX(0) scale(1); opacity: 0.3; }
    25% { transform: translateX(10px) scale(1.02); opacity: 0.2; }
    50% { transform: translateX(-5px) scale(0.98); opacity: 0.4; }
    75% { transform: translateX(8px) scale(1.01); opacity: 0.25; }
}

@keyframes circuitPulse {
    0%, 100% { opacity: 0.6; filter: brightness(1); }
    20% { opacity: 0.4; filter: brightness(1.2); }
    40% { opacity: 0.8; filter: brightness(0.9); }
    60% { opacity: 0.5; filter: brightness(1.1); }
    80% { opacity: 0.7; filter: brightness(0.95); }
}

@keyframes staticGlitch {
    0% { transform: translateX(0); opacity: 0.1; }
    10% { transform: translateX(-2px); opacity: 0.2; }
    20% { transform: translateX(2px); opacity: 0.05; }
    30% { transform: translateX(-1px); opacity: 0.15; }
    40% { transform: translateX(1px); opacity: 0.08; }
    50% { transform: translateX(-3px); opacity: 0.12; }
    60% { transform: translateX(3px); opacity: 0.06; }
    70% { transform: translateX(-1px); opacity: 0.18; }
    80% { transform: translateX(1px); opacity: 0.04; }
    90% { transform: translateX(-2px); opacity: 0.14; }
    100% { transform: translateX(0); opacity: 0.1; }
}

/* Advanced Text Glitch Effects */
@keyframes titleGlitchEffect {
    0%, 96%, 100% { 
        transform: translateX(0); 
        filter: hue-rotate(0deg); 
    }
    97% { 
        transform: translateX(2px) skewX(1deg); 
        filter: hue-rotate(90deg); 
    }
    98% { 
        transform: translateX(-2px) skewX(-1deg); 
        filter: hue-rotate(180deg); 
    }
    99% { 
        transform: translateX(1px) skewX(0.5deg); 
        filter: hue-rotate(270deg); 
    }
}

@keyframes glitchShift1 {
    0% { transform: translateX(0); }
    20% { transform: translateX(-1px); }
    40% { transform: translateX(1px); }
    60% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

@keyframes glitchShift2 {
    0% { transform: translateX(0); }
    25% { transform: translateX(1px); }
    50% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

@keyframes timeGlow {
    0%, 100% { 
        text-shadow: 
            0 0 10px var(--color-primary-yellow),
            2px 2px 0px rgba(0, 0, 0, 0.9); 
    }
    50% { 
        text-shadow: 
            0 0 20px var(--color-primary-yellow),
            0 0 30px var(--color-primary-yellow),
            2px 2px 0px rgba(0, 0, 0, 0.9); 
    }
}

@keyframes digitalFlicker {
    0%, 99% { opacity: 1; }
    99.1% { opacity: 0.98; }
    99.2% { opacity: 1; }
    99.3% { opacity: 0.97; }
    99.4% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes sectionTitlePulse {
    0%, 100% { 
        text-shadow: 0 0 10px var(--color-secondary-green); 
        transform: scale(1); 
    }
    50% { 
        text-shadow: 
            0 0 15px var(--color-secondary-green),
            0 0 25px var(--color-secondary-green); 
        transform: scale(1.02); 
    }
}

@keyframes energyBeam {
    0% { 
        transform: translateX(-100%); 
        opacity: 0; 
    }
    20% { 
        opacity: 1; 
    }
    80% { 
        opacity: 1; 
    }
    100% { 
        transform: translateX(100%); 
        opacity: 0; 
    }
}

/* News Ticker Glitch Effects */
@keyframes tickerGlow {
    0%, 100% { 
        box-shadow: 
            inset 0 0 0 2px var(--color-primary-black),
            inset 0 0 20px rgba(255, 248, 12, 0.2),
            0 0 20px rgba(255, 248, 12, 0.3); 
    }
    50% { 
        box-shadow: 
            inset 0 0 0 2px var(--color-primary-black),
            inset 0 0 30px rgba(255, 248, 12, 0.4),
            0 0 40px rgba(255, 248, 12, 0.5); 
    }
}

@keyframes tickerSweep {
    0% { 
        transform: translateX(-100%); 
        opacity: 0; 
    }
    20% { 
        opacity: 0.3; 
    }
    80% { 
        opacity: 0.3; 
    }
    100% { 
        transform: translateX(100%); 
        opacity: 0; 
    }
}

/* Camera Container Glitch Effects */
@keyframes cameraBorderGlow {
    0%, 100% { 
        box-shadow: 
            0 0 10px rgba(29, 176, 0, 0.3),
            inset 0 0 15px rgba(29, 176, 0, 0.05); 
    }
    50% { 
        box-shadow: 
            0 0 20px rgba(29, 176, 0, 0.5),
            inset 0 0 25px rgba(29, 176, 0, 0.1); 
    }
}

@keyframes cameraOverlaySweep {
    0% { 
        transform: translateX(-100%) translateY(-100%); 
        opacity: 0; 
    }
    25% { 
        opacity: 0.2; 
    }
    75% { 
        opacity: 0.2; 
    }
    100% { 
        transform: translateX(100%) translateY(100%); 
        opacity: 0; 
    }
}

/* Status Bar Glitch Effects */
@keyframes statusBarPulse {
    0%, 100% { 
        border-color: var(--color-secondary-green); 
        background: rgba(29, 176, 0, 0.1); 
    }
    50% { 
        border-color: rgba(29, 176, 0, 0.8); 
        background: rgba(29, 176, 0, 0.15); 
    }
}

@keyframes statusSweep {
    0% { 
        transform: translateX(-100%); 
        opacity: 0; 
    }
    20% { 
        opacity: 0.5; 
    }
    80% { 
        opacity: 0.5; 
    }
    100% { 
        transform: translateX(100%); 
        opacity: 0; 
    }
}

/* Main Container */
.calendar-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Allow shrinking in flexbox */
    padding: 3px 3px 0 3px; /* Remove bottom padding to eliminate gap */
    gap: 5px; /* Reduced from 20px to 5px for tighter spacing */
}

/* Header */
.calendar-header {
    position: relative;
    display: grid;
    /*
     * Desktop layout: 3-column grid so that
     * - ZOLAK title stays on the far left
     * - Date & time block is always centered
     * - Bitcoin block sits on the far right.
     *
     * 1: header-content (logo + ZOLAK SOUND SYSTEM)
     * 2: datetime-block (centered)
     * 3: header-info-block (Bitcoin)
     */
    grid-template-columns: auto 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 5px 5px;
    border: var(--border-width) solid var(--color-primary-yellow);
    background: linear-gradient(45deg, rgba(255, 248, 12, 0.1), rgba(29, 176, 0, 0.05));
    box-shadow: 
        0 0 var(--glow-size) var(--color-primary-yellow),
        inset 0 0 20px rgba(255, 248, 12, 0.1);
}

.header-content {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    /* Ensure the title group anchors to the far left on desktop grid */
    justify-self: flex-start;
    grid-column: 1;
}

/* Make the combined logo + title link behave like the original flex group */
.header-home-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.logo {
    height: 20px;
    filter: drop-shadow(0 0 8px var(--color-primary-yellow));
}

.header-title {
    font-size: 0.9rem;
    color: var(--color-primary-yellow);
    text-shadow: 
        0 0 10px var(--color-primary-yellow),
        2px 2px 0px rgba(0, 0, 0, 0.9);
    margin: 0;
    position: relative;
    animation: titleGlitchEffect 8s infinite;
}

.header-title::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 2px;
    width: 100%;
    height: 100%;
    color: rgba(255, 0, 0, 0.8);
    z-index: -1;
    animation: glitchShift1 0.3s infinite linear alternate-reverse;
}

.header-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: -2px;
    width: 100%;
    height: 100%;
    color: rgba(0, 255, 255, 0.8);
    z-index: -2;
    animation: glitchShift2 0.3s infinite linear alternate-reverse;
}

/* Date and Time Block - Compact Two-Row Layout */
.datetime-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.current-date {
    font-size: 0.65rem;
    color: var(--color-primary-yellow);
    text-shadow: 
        0 0 8px var(--color-primary-yellow),
        1px 1px 0px rgba(0, 0, 0, 0.9);
    margin: 0;
    letter-spacing: 2px;
    white-space: nowrap;
    font-weight: bold;
    text-align: center;
}

.current-time {
    font-size: 0.65rem;
    color: var(--color-primary-yellow);
    text-shadow: 
        0 0 8px var(--color-primary-yellow),
        1px 1px 0px rgba(0, 0, 0, 0.9);
    margin: 0;
    letter-spacing: 2px;
    white-space: nowrap;
    font-weight: bold;
    text-align: center;
    animation: timeGlow 4s ease-in-out infinite, digitalFlicker 0.1s infinite;
}

/* Header Info Block (Bitcoin and Last Sync) */
.header-info-block {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;
    justify-content: flex-end;
    background: none;
    /* On desktop grid, place the Bitcoin block in the rightmost column */
    grid-column: 3;
    justify-self: flex-end;
}

.header-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Normalized horizontal padding will be applied together with .header-home-link below */
    padding: 0;
    border-radius: 2px;
    white-space: nowrap;
    background: none;
}

/*
 * Ensure the ZOLAK SOUND SYSTEM title area and the Bitcoin price block
 * have identical horizontal paddings on all screens.
 *
 * We attach the same padding to both the clickable home link on the left
 * (.header-home-link) and the Bitcoin info pill on the right (.header-info-item)
 * so their visual insets from the header border match consistently across
 * all breakpoints (desktop, tablet, mobile).
 */
.header-home-link,
.header-info-item {
    padding: 0 12px;
}

/* On one-column mobile screens, remove the extra horizontal padding so the
   header content aligns flush with the calendar header edges. Medium and
   large screens keep the 0 12px padding above. */
@media (max-width: 768px) {
    .header-home-link,
    .header-info-item {
        padding: 0;
    }
}

.header-info-label {
    font-family: var(--font-pixel);
    font-size: 0.8rem;
    color: var(--color-secondary-green);
    text-shadow: 0 0 6px var(--color-secondary-green);
    letter-spacing: 1px;
    background: none;
}

.header-info-value {
    font-family: var(--font-pixel);
    font-size: 0.9rem;
    color: var(--color-primary-yellow);
    font-weight: bold;
    text-shadow: 0 0 8px var(--color-primary-yellow);
    background: none;
    /* Use flex to vertically center spinner and value */
    display: inline-flex;
    align-items: center;
}

/* Political Prisoners Indicator - compact block above video player */
.political-prisoners-indicator {
    /* Make the indicator behave like other left-column boxes */
    display: flex;
    align-items: center;
    justify-content: center; /* Center content inside the indicator */
    gap: 6px;
    flex-direction: row;
    min-width: 0;
    padding: 6px 10px;
    margin-top: 10px;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: var(--border-width) solid var(--color-primary-yellow);
    box-shadow:
        0 0 var(--glow-size) rgba(255, 248, 12, 0.3),
        inset 0 0 20px rgba(255, 248, 12, 0.1);
    /* Match interactive feel of pinned message clickable card */
    transition: all var(--transition-speed) ease;
    cursor: pointer;
    text-decoration: none;
}

/* Inner wrapper to keep spinner, count and label nicely centered as a group */
.prisoners-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.political-prisoners-indicator:link,
.political-prisoners-indicator:visited,
.political-prisoners-indicator:hover,
.political-prisoners-indicator:active {
    text-decoration: none;
}

.political-prisoners-indicator:hover {
    /* Same hover motion / glow language as .pinned-post-card.pinned-post-clickable:hover */
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(255, 248, 12, 0.6),
        inset 0 0 24px rgba(255, 248, 12, 0.2);
    border-color: #FFED4A;
    background: rgba(255, 248, 12, 0.08);
}

.political-prisoners-indicator:active {
    /* Same pressed state as .pinned-post-card.pinned-post-clickable:active */
    transform: translateY(0);
    box-shadow:
        0 2px 6px rgba(255, 248, 12, 0.5),
        inset 0 0 20px rgba(255, 248, 12, 0.15);
}

/* Smaller spinner variant used in the political prisoners block
 * Base .loading-spinner is 40x40 with a 4px border (defined in radio.html).
 * Here we make it visibly smaller and ensure it overrides the base style
 * by using a more specific selector.
 */
.political-prisoners-indicator .loading-spinner.prisoners-spinner {
    width: 18px !important;
    height: 18px !important;
    border-width: 2px !important;
    margin: 0 6px 0 0; /* space before text */
    flex-shrink: 0;
}

.prisoners-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 8px #ff6b6b;
    animation: prisonersPulse 3s ease-in-out infinite;
    flex-shrink: 0;
}

.political-prisoners-indicator.loading .prisoners-dot {
    background: transparent;
    box-shadow: 0 0 12px var(--color-primary-yellow);
    animation: fastPulse 0.5s ease-in-out infinite;
}

.political-prisoners-indicator.updated .prisoners-dot {
    background: transparent;
    box-shadow: 0 0 15px var(--color-secondary-green);
    animation: prisonersUpdatePulse 2s ease-out;
}

.political-prisoners-indicator.changed .prisoners-dot {
    background: transparent;
    box-shadow: 0 0 20px var(--color-primary-yellow);
    animation: prisonersChangePulse 3s ease-out;
}

#prisoners-count {
    font-family: var(--font-pixel);
    font-size: 0.84rem;
    font-weight: bold;
    color: #ff3333;
    text-shadow: 0 0 12px #ff3333, 0 0 20px #ff3333;
    flex-shrink: 0;
}

#bitcoin-price {
    background: none;
}

/* Bitcoin header spinner: smaller so it doesn't stretch the top bar */
#bitcoin-spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
    /* Reset the generic spinner margin so it doesn't increase header height */
    margin: 0 6px 0 0;
    display: inline-block;
    vertical-align: middle;
    /* Prevent flexbox from squashing the spinner into a rectangle */
    flex-shrink: 0;
}

/* Further reduce Bitcoin spinner size on one-column mobile layout (~25% smaller than desktop)
   and keep the header row height stable even when the spinner appears/disappears. */
@media (max-width: 768px) {
    #bitcoin-spinner {
        width: 15px;
        height: 15px;
        border-width: 1.5px; /* 25% thinner than 2px desktop border */
    }

    /* Reserve vertical space for the spinner so the top bar height
       does not change when the Bitcoin value replaces it. */
    .header-info-item {
        min-height: 20px; /* slightly larger than 15px spinner for comfortable padding */
        align-items: center;
    }
}

.prisoners-label {
    font-size: 0.718rem;
    color: var(--color-secondary-white);
    opacity: 0.9;
    letter-spacing: 1px;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.prisoners-label-line1,
.prisoners-label-line2 {
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}

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

@keyframes prisonersUpdatePulse {
    0% { opacity: 1; transform: scale(1); }
    25% { opacity: 0.8; transform: scale(1.3); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes prisonersChangePulse {
    0% { opacity: 1; transform: scale(1); }
    20% { opacity: 0.6; transform: scale(1.5); }
    40% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* Political prisoners particles */
.prisoners-particles {
    position: absolute;
    pointer-events: none;
    z-index: 10;
}

.prisoners-particle {
    position: absolute;
    color: #ff6b6b;
    font-size: 10px;
    animation: prisonersParticleFloat 3s ease-out forwards;
}

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

/* Hide normal header content when saying is showing */
.calendar-header.showing-saying .header-content,
.calendar-header.showing-saying .political-prisoners-indicator,
.calendar-header.showing-saying .current-time,
.calendar-header.showing-saying .header-info-block,
.calendar-header.showing-saying .current-date {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

/* Main Content */
.calendar-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 20px;
}

.current-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.today-section {
    flex: 0 0 auto; /* Only take space needed by content */
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 0; /* Allow shrinking */
    margin-bottom: 20px; /* Add bottom margin for spacing */
}

.upcoming-section {
    flex: 1; /* Take available space */
    display: flex;
    flex-direction: column;
}

/* Remove gap between today's section and upcoming section to maximize event display */
.today-section + .upcoming-section {
    margin-top: -30px;
}

/* Allow upcoming section to use remaining space */
.today-section + .upcoming-section,
.current-section ~ .upcoming-section {
    flex: 1; /* Take all remaining vertical space */
}

.section-title {
    font-size: 0.8rem;
    color: var(--color-secondary-green);
    text-align: center;
    padding: 10px 0 8px 0;
    margin-bottom: 10px;
    border-bottom: var(--border-width) solid var(--color-secondary-green);
    text-shadow: 0 0 10px var(--color-secondary-green);
    position: relative;
    animation: sectionTitlePulse 6s ease-in-out infinite;
}

.section-title::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-primary-yellow) 30%, 
        var(--color-secondary-green) 70%, 
        transparent 100%);
    animation: energyBeam 3s linear infinite;
}

/* Events Container */
.events-container {
    flex: 0 0 auto; /* Only take space needed by content */
    overflow: hidden;
    padding: 8px; /* More compact padding */
    display: flex;
    flex-direction: column;
    gap: 8px; /* More compact gap */
    position: relative;
}

.events-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(29, 176, 0, 0.05) 30%,
        rgba(0, 0, 0, 0.8) 70%,
        rgba(0, 0, 0, 0.95) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Remove fading effect for today's events to preserve borders */
.today-section .events-container::after {
    background: transparent;
}

/* Current Events Container */
.current-events-container {
    overflow: hidden;
    padding: 8px; /* More compact padding */
    display: flex;
    flex-direction: column;
    gap: 8px; /* More compact gap */
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1), rgba(255, 248, 12, 0.05));
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

/* When current-section is inside upcoming-section, match the table width */
.upcoming-section .current-section {
    width: 100%;
    margin-bottom: 15px;
}

.upcoming-section .current-events-container {
    width: 100%;
    max-width: none;
}

/* Current Event Cards */
.current-event-card {
    display: flex;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.15), rgba(255, 248, 12, 0.1));
    border: var(--border-width) solid var(--color-primary-yellow);
    padding: 12px;
    transition: all var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
}

.current-event-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff0000, #ff4444, #ff0000);
    z-index: -1;
    opacity: 0.5;
    animation: currentEventGlow 2s ease-in-out infinite;
}

.current-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 20px;
    flex-shrink: 0;
}

.blinking-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff0000;
    box-shadow: 0 0 15px #ff0000;
    animation: blinkDot 1s ease-in-out infinite;
}

.live-text {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: #ff0000;
    font-weight: bold;
    text-shadow: 0 0 8px #ff0000;
    letter-spacing: 2px;
}

@keyframes blinkDot {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 15px #ff0000;
    }
    50% { 
        opacity: 0.3; 
        transform: scale(0.8);
        box-shadow: 0 0 5px #ff0000;
    }
}

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

/* Event Cards */
.event-card {
    display: flex;
    background: linear-gradient(135deg, rgba(29, 176, 0, 0.1), rgba(255, 248, 12, 0.05));
    border: var(--border-width) solid var(--color-primary-yellow);
    padding: 12px;
    transition: all var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
    align-items: center; /* Align items for better event type indicator positioning */
}

.event-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        var(--color-secondary-green), 
        var(--color-primary-yellow), 
        var(--color-secondary-green)
    );
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.event-card:hover::before {
    opacity: 0.3;
}

.event-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 
        0 8px 20px rgba(29, 176, 0, 0.3),
        0 0 20px rgba(255, 248, 12, 0.2);
}

.event-time {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--color-primary-yellow);
    min-width: 120px;
    text-align: center;
    text-shadow: 0 0 8px var(--color-primary-yellow);
    margin-right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Current Events Layout - Title on Left, Organizer on Right */
.event-title-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 20px;
}

.event-organizer-middle {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.event-title-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 20px;
}

.event-title-middle {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.event-title-main {
    font-family: var(--font-pixel);
    font-size: 0.85rem;
    color: var(--color-secondary-white);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 6px var(--color-secondary-white);
    line-height: 1.3;
    margin: 0;
}

.event-organizer-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 20px;
    min-width: 200px;
}

.event-organizer-name {
    font-size: 0.7rem;
    color: var(--color-primary-yellow);
    line-height: 1.4;
    opacity: 0.9;
    margin: 0;
    text-align: right;
}

.event-title {
    font-family: var(--font-pixel);
    font-size: 0.75rem;
    color: var(--color-secondary-white);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.event-duration {
    font-size: 0.5rem;
    color: var(--color-secondary-green);
    font-weight: bold;
}

.event-location {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.location-type {
    font-size: 0.63rem;
    color: var(--color-primary-yellow);
    font-weight: bold;
    text-transform: uppercase;
}

.location-details {
    font-size: 0.63rem;
    color: var(--color-secondary-white);
    opacity: 0.8;
}

.event-notes {
    font-size: 0.63rem;
    color: var(--color-secondary-white);
    opacity: 0.7;
    line-height: 1.4;
    max-height: 84px; /* Increased proportionally to match larger text */
    overflow: hidden;
}

.event-description {
    font-size: 0.65rem;
    color: var(--color-primary-yellow);
    line-height: 1.4;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(255, 248, 12, 0.1);
    border: 1px solid rgba(255, 248, 12, 0.3);
    border-radius: 2px;
    text-shadow: 0 0 4px rgba(255, 248, 12, 0.3);
    max-height: 100px;
    overflow: hidden;
    word-wrap: break-word;
}

.event-organizer {
    font-family: var(--font-pixel);
    font-size: 0.85rem;
    color: var(--color-primary-yellow);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 6px var(--color-primary-yellow);
    line-height: 1.3;
    margin: 0;
}

.event-title-below {
    font-size: 0.7rem;
    color: var(--color-secondary-white);
    line-height: 1.4;
    opacity: 0.9;
    margin-top: 5px;
    font-weight: normal;
}

.event-title-below.private-title-blur {
    filter: blur(15px);
    -webkit-filter: blur(15px);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: not-allowed;
    opacity: 0.5;
    transition: all 0.3s ease;
    background: rgba(255, 248, 12, 0.15);
    border-radius: 3px;
    padding: 3px 6px;
    position: relative;
}

.event-title-below.private-title-blur:hover {
    filter: blur(20px);
    -webkit-filter: blur(20px);
    opacity: 0.3;
    background: rgba(255, 248, 12, 0.25);
}

.event-title-below.private-title-blur::after {
    content: "🔒";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    filter: none;
    -webkit-filter: none;
    font-size: 6px;
    opacity: 0.8;
    text-shadow: 0 0 4px var(--color-primary-yellow);
    animation: lockPulse 2s ease-in-out infinite;
}

/* Event Type Indicator for Today's Events */
.event-type-indicator {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    padding-left: 15px;
    border-left: 2px solid rgba(255, 248, 12, 0.3);
}

.event-type-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 0; /* Keep pixel perfect */
    border: 1px solid;
    transition: all 0.3s ease;
    min-width: 60px;
    height: 40px;
}

.event-type-status.status-public {
    color: var(--color-secondary-green);
    border-color: var(--color-primary-yellow);
    background: rgba(29, 176, 0, 0.1);
    text-shadow: 0 0 4px var(--color-secondary-green);
}

.event-type-status.status-private {
    color: var(--color-primary-yellow);
    border-color: var(--color-primary-yellow);
    background: rgba(255, 248, 12, 0.1);
    text-shadow: 0 0 4px var(--color-primary-yellow);
}

.event-type-status.status-unknown {
    color: #888;
    border-color: var(--color-primary-yellow);
    background: rgba(136, 136, 136, 0.1);
}

.event-type-status .status-icon {
    width: 20px;
    height: 20px;
}

.event-type-status:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255, 248, 12, 0.5);
}

/* No Events State */
.no-events {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0.8;
}

.no-events-icon {
    font-size: 2rem;
    filter: grayscale(1);
}

.no-events-text {
    font-size: 1rem;
    color: var(--color-secondary-green);
    text-shadow: 0 0 10px var(--color-secondary-green);
}

.no-events-subtitle {
    font-size: 0.84rem;
    color: var(--color-secondary-white);
    opacity: 0.6;
}

/* Three column layout for events center, public wall and camera right */
.three-column-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.layout-wrapper {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow: hidden;
}

/* Left column: Public Wall */
.left-column {
    flex: 1; /* Give proper space for public wall */
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    opacity: 1;
    pointer-events: auto;
}

/* Center column: Events (main content) */
.center-column {
    flex: 3; /* Take most of the space for events */
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

/* Right column: CCTV Videos */
.right-column {
    flex: 2; /* Right side for CCTV cameras */
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    min-height: 0; /* Allow flexbox sizing */
}

/* Camera section within right column */
.camera-section {
    flex: 1; /* Take all available space */
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    min-height: 650px; /* Ensure sufficient height for camera grid */
}

/* Events column styling (now in center) */
.events-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

/* Current section inside center column (events) */
.center-column .current-section,
.events-column .current-section {
    flex: 0 0 auto; /* Only take space needed by content */
}

/* Today section inside center column (events) */
.center-column .today-section,
.events-column .today-section {
    flex: 0 0 auto; /* Only take space needed by content */
    min-height: 0; /* Allow shrinking */
}

/* Upcoming section inside center column (events) */
.center-column .upcoming-section,
.events-column .upcoming-section {
    flex: 1; /* More compact - take 1/2 of remaining space */
    min-height: 0; /* Allow shrinking */
    overflow: hidden;
}

/* Game of Life section inside center column */
.center-column .game-of-life-section,
.events-column .game-of-life-section {
    flex: 1; /* Take 1/2 of remaining space - equal with upcoming */
    min-height: 250px; /* Ensure minimum height for full visibility */
    overflow: hidden;
}

/* Two-column layout for upcoming events and camera (legacy - kept for backwards compatibility) */
.upcoming-content-wrapper {
    flex: 1;
    display: flex;
    gap: 30px;
    overflow: hidden;
}

/* Upcoming Events Container */
/* Upcoming container holds Now Playing (sticky) + Previous Tracks (scrolling) */
.upcoming-container {
    flex: 2; /* Take 2/3 of the space */
    display: flex;
    flex-direction: column;
    /* Let the page handle vertical scrolling; inner blocks manage their own scroll */
    overflow-y: visible;
    overflow-x: hidden;
    background: linear-gradient(135deg, rgba(29, 176, 0, 0.05), rgba(255, 248, 12, 0.02));
    position: relative;
}

/* Previously we hid scrollbars on .upcoming-container when it was scrollable.
   Now scrolling is delegated to inner sections like .previous-tracks-section. */


/* Now Playing Section - Compact Design */
.now-playing-section {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--color-primary-yellow);
    box-shadow: 0 0 15px rgba(29, 176, 0, 0.3);
}

/* Previously Played Tracks Block */
.previous-tracks-section {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 6px 6px 10px 6px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(29, 176, 0, 0.3);
    /* Constrain height so that only the track list scrolls within this block */
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Hide native scrollbar while keeping content scrollable */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.previous-tracks-section::-webkit-scrollbar {
    display: none;
}

.previous-tracks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 9px;
    color: var(--color-primary-yellow);
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.previous-tracks-header .history-label {
    opacity: 0.9;
}

.previous-tracks-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Individual previously played items as small long cards */
.previous-track-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.65);
    opacity: 0.7;
    transition: opacity 0.15s ease-out, background 0.15s ease-out;
}

.previous-track-item:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
}

.previous-track-cover {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * The previous-track cover box should reserve layout space but
     * appear transparent when there is no image. We removed the
     * yellow border and background so that an empty box is visually
     * invisible while still taking up space.
     */
    background: transparent;
    border: none;
    overflow: hidden;
}

.previous-track-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.previous-track-placeholder {
    font-size: 18px;
    color: var(--color-primary-yellow);
    opacity: 0.7;
}

.previous-track-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.previous-track-title {
    font-size: 10px;
    color: var(--color-secondary-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.previous-track-artist,
.previous-track-album,
.previous-track-category {
    font-size: 8px;
    color: rgba(255, 248, 12, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.previous-track-category {
    text-transform: uppercase;
}

.now-playing-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--color-primary-yellow);
    font-weight: bold;
    letter-spacing: 1px;
    width: 100%;
    margin-top: 6px;
}

.now-playing-header .now-playing-remaining {
    font-size: 9px;
    opacity: 0.85;
}

.now-playing-header .blinking-dot {
    width: 8px;
    height: 8px;
    background: #ff0000;
    border-radius: 50%;
    animation: blink 1s infinite;
    box-shadow: 0 0 8px #ff0000;
}

.now-playing-content {
    background: rgba(0, 0, 0, 0.4);
    padding: 12px;
    border: 2px solid var(--color-primary-yellow);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(29, 176, 0, 0.25);
}

.now-playing-content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        var(--color-secondary-green),
        var(--color-primary-yellow),
        var(--color-secondary-green)
    );
    background-size: 200% 200%;
    z-index: 0;
    opacity: 0.12;
    pointer-events: none;
    animation: nowPlayingContentBorderSweep 14s linear infinite;
}

.now-playing-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Layered tech-web/grid + soft radial glows */
    background:
        /* subtle moving scanlines */
        repeating-linear-gradient(
            to right,
            rgba(0, 255, 65, 0.08) 0px,
            rgba(0, 255, 65, 0.08) 1px,
            transparent 1px,
            transparent 3px
        ),
        /* vertical data streams */
        repeating-linear-gradient(
            to bottom,
            rgba(255, 248, 12, 0.05) 0px,
            rgba(255, 248, 12, 0.05) 2px,
            transparent 2px,
            transparent 6px
        ),
        /* diagonal energy beams */
        linear-gradient(135deg,
            transparent 0%,
            rgba(29, 176, 0, 0.08) 30%,
            rgba(255, 248, 12, 0.15) 50%,
            rgba(29, 176, 0, 0.08) 70%,
            transparent 100%
        ),
        /* soft radial glows in corners */
        radial-gradient(circle at 0% 0%, rgba(29, 176, 0, 0.16), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(255, 248, 12, 0.12), transparent 55%);
    background-size: 220% 220%, 120% 120%, 200% 200%, 100% 100%, 100% 100%;
    mix-blend-mode: screen;
    opacity: 0.9;
    pointer-events: none;
    z-index: 1;
    animation: nowPlayingContentGridDrift 26s linear infinite;
}

.now-playing-left-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
    position: relative;
    z-index: 2;
}

.track-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.album-cover-container {
    width: 100px;
    height: 100px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--color-primary-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(255, 248, 12, 0.3);
    position: relative;
    z-index: 2;
    animation: albumCoverGlitch 4s infinite;
}

.album-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Remove baseline gap that could create visible stripes */
}

.album-cover-placeholder {
    font-size: 32px;
    color: var(--color-primary-yellow);
    opacity: 0.5;
}

.album-cover-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 255, 65, 0.2);
    border-top-color: #00FF41;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.track-title {
    font-size: 11px;
    color: #FFF;
    font-weight: bold;
    line-height: 1.3;
    animation: trackTitleGlitch 3s infinite;
}

.track-artist {
    font-size: 9px;
    color: var(--color-secondary-green);
    line-height: 1.2;
    animation: trackTextJitter 2.5s infinite;
}

.track-album {
    font-size: 8px;
    color: var(--color-primary-yellow);
    line-height: 1.2;
    animation: trackTextJitter 2.8s infinite;
}

/* Now Playing Glitch and Jitter Animations */
@keyframes nowPlayingGlitch {
    0%, 92%, 100% { 
        transform: translateX(0) skewX(0deg);
        filter: hue-rotate(0deg);
    }
    93% { 
        transform: translateX(-2px) skewX(-1deg);
        filter: hue-rotate(90deg);
    }
    94% { 
        transform: translateX(2px) skewX(1deg);
        filter: hue-rotate(-90deg);
    }
    95% { 
        transform: translateX(-1px) skewX(0.5deg);
        filter: hue-rotate(180deg);
    }
    96% { 
        transform: translateX(0) skewX(0deg);
        filter: hue-rotate(0deg);
    }
}

@keyframes nowPlayingJitter {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-0.5px, 0.5px); }
    20% { transform: translate(0.5px, -0.5px); }
    30% { transform: translate(-0.5px, -0.5px); }
    40% { transform: translate(0.5px, 0.5px); }
    50% { transform: translate(-0.5px, 0); }
    60% { transform: translate(0.5px, 0); }
    70% { transform: translate(0, -0.5px); }
    80% { transform: translate(0, 0.5px); }
    90% { transform: translate(-0.5px, 0.5px); }
}

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

@keyframes nowPlayingBorderPulse {
    0%, 100% { 
        opacity: 0;
    }
    25% { 
        opacity: 0.3;
    }
    50% { 
        opacity: 0.15;
    }
    75% { 
        opacity: 0.3;
    }
}

@keyframes albumCoverGlitch {
    0%, 95%, 100% { 
        transform: translate(0, 0) scale(1);
        filter: hue-rotate(0deg) brightness(1);
        box-shadow: 0 0 10px rgba(255, 248, 12, 0.3);
    }
    96% { 
        transform: translate(-2px, 0) scale(1.02);
        filter: hue-rotate(90deg) brightness(1.2);
        box-shadow: 0 0 15px rgba(29, 176, 0, 0.6);
    }
    97% { 
        transform: translate(2px, 0) scale(0.98);
        filter: hue-rotate(-90deg) brightness(0.8);
        box-shadow: 0 0 15px rgba(255, 248, 12, 0.6);
    }
    98% { 
        transform: translate(0, -1px) scale(1.01);
        filter: hue-rotate(180deg) brightness(1.1);
        box-shadow: 0 0 20px rgba(29, 176, 0, 0.8);
    }
}

@keyframes trackTitleGlitch {
    0%, 94%, 100% { 
        transform: translateX(0);
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    }
    95% { 
        transform: translateX(-2px);
        text-shadow: 
            -2px 0 rgba(255, 0, 0, 0.7),
            2px 0 rgba(0, 255, 255, 0.7);
    }
    96% { 
        transform: translateX(2px);
        text-shadow: 
            2px 0 rgba(0, 255, 0, 0.7),
            -2px 0 rgba(255, 0, 255, 0.7);
    }
    97% { 
        transform: translateX(-1px);
        text-shadow: 
            -1px 0 rgba(255, 248, 12, 0.7),
            1px 0 rgba(29, 176, 0, 0.7);
    }
}

@keyframes trackTextJitter {
    0%, 100% { 
        transform: translate(0, 0);
        opacity: 1;
    }
    25% { 
        transform: translate(-0.3px, 0.3px);
        opacity: 0.95;
    }
    50% { 
        transform: translate(0.3px, -0.3px);
        opacity: 0.98;
    }
    75% { 
        transform: translate(-0.3px, -0.3px);
        opacity: 0.96;
    }
}

/* Smooth, non-jittery tech animations for now-playing-content background */
@keyframes nowPlayingContentBorderSweep {
    0% {
        background-position: 0% 50%;
        filter: brightness(1) saturate(1);
    }
    25% {
        background-position: 50% 0%;
        filter: brightness(1.05) saturate(1.1);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.08) saturate(1.2);
    }
    75% {
        background-position: 50% 100%;
        filter: brightness(1.04) saturate(1.05);
    }
    100% {
        background-position: 0% 50%;
        filter: brightness(1) saturate(1);
    }
}

@keyframes nowPlayingContentGridDrift {
    0% {
        background-position:
            0% 0%,   /* scanlines */
            0% 0%,   /* vertical streams */
            0% 50%,  /* diagonal beam */
            0% 0%,   /* glow tl */
            100% 100%; /* glow br */
    }
    25% {
        background-position:
            10% 0%,
            0% 10%,
            25% 40%,
            0% 5%,
            100% 95%;
    }
    50% {
        background-position:
            20% 0%,
            0% 20%,
            50% 30%,
            0% 10%,
            100% 90%;
    }
    75% {
        background-position:
            10% 0%,
            0% 30%,
            75% 40%,
            0% 5%,
            100% 95%;
    }
    100% {
        background-position:
            0% 0%,
            0% 40%,
            100% 50%,
            0% 0%,
            100% 100%;
    }
}

/* Radio Player Section - Compact Design */
.radio-player-section {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--color-primary-yellow);
    padding: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(29, 176, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    animation: nowPlayingGlitch 5s infinite, nowPlayingJitter 0.3s infinite;
}

/* Clickability states for the whole radio player section */
.radio-player-section--clickable {
    cursor: pointer;
}

.radio-player-section--locked {
    cursor: default;
}

.radio-player-section::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        var(--color-secondary-green), 
        var(--color-primary-yellow), 
        var(--color-secondary-green)
    );
    z-index: -1;
    opacity: 0;
    animation: nowPlayingBorderPulse 2s ease-in-out infinite;
}

.radio-player-section:hover::before {
    opacity: 0.15;
}

.radio-player-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(29, 176, 0, 0.1) 25%,
        rgba(255, 248, 12, 0.15) 50%,
        rgba(29, 176, 0, 0.1) 75%,
        transparent 100%
    );
    animation: nowPlayingFill 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.radio-player-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(29, 176, 0, 0.3);
}

.radio-icon {
    font-size: 0.8rem;
    filter: grayscale(0);
}

.radio-player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    justify-content: space-between;
}

/* Container for stacked buttons - ensures single position on left */
.radio-button-container {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    contain: layout size;
    border: none !important;
    outline: none !important;
}

.radio-button {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: var(--color-primary-yellow);
    padding: 0;
    height: 32px;
    min-height: 32px;
    width: 32px;
    min-width: 32px;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 4px var(--color-primary-yellow);
    box-shadow: none;
}

.radio-button:hover:not(.inactive) {
    background: rgba(255, 248, 12, 0.15);
    box-shadow: none;
}

.radio-button:active:not(.inactive) {
    box-shadow: none;
}

/* Inactive button state for loading */
.radio-button.inactive {
    cursor: not-allowed;
    pointer-events: none;
}

.play-icon,
.stop-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    display: block;
    line-height: 1;
}

/* Animated spinner for loading button */
.loading-icon {
    display: block;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

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

.play-text,
.stop-text,
.loading-text {
    display: none;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    min-height: 32px;
    flex-shrink: 0;
}

.volume-label {
    font-size: 0.9rem;
    color: var(--color-secondary-white);
    text-shadow: 0 0 4px var(--color-secondary-white);
}

.volume-slider {
    flex: 1;
    max-width: 120px;
    height: 3px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--color-primary-yellow);
    outline: none;
    -webkit-appearance: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: var(--color-primary-yellow);
    cursor: pointer;
    box-shadow: 0 0 6px var(--color-primary-yellow);
}

.volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: var(--color-primary-yellow);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px var(--color-primary-yellow);
}

.volume-value {
    font-size: 0.9rem;
    color: var(--color-primary-yellow);
    text-shadow: 0 0 4px var(--color-primary-yellow);
    min-width: 30px;
}

/* Inactive/disabled volume control state */
.volume-control.inactive {
    opacity: 0.3;
    pointer-events: none;
}

.volume-control.inactive .volume-label,
.volume-control.inactive .volume-value {
    color: #666;
    text-shadow: none;
}

.volume-control.inactive .volume-slider {
    background: rgba(0, 0, 0, 0.8);
    border-color: #444;
    cursor: not-allowed;
}

.volume-control.inactive .volume-slider::-webkit-slider-thumb {
    background: #666;
    box-shadow: none;
    cursor: not-allowed;
}

.volume-control.inactive .volume-slider::-moz-range-thumb {
    background: #666;
    box-shadow: none;
    cursor: not-allowed;
}

.radio-status {
    font-size: 0.9rem;
    color: var(--color-secondary-green);
    text-shadow: 0 0 4px var(--color-secondary-green);
    text-align: left;
    padding: 0 6px;
    height: 32px;
    min-height: 32px;
    background: rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.music-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    width: 20px;
    opacity: 0;
    visibility: hidden;
}

.music-visualizer.active {
    opacity: 1;
    visibility: visible;
}

.music-bar {
    width: 3px;
    background: var(--color-primary-yellow);
    box-shadow: 0 0 6px var(--color-primary-yellow), 0 0 12px rgba(255, 248, 12, 0.5);
    animation: musicPulse 0.8s ease-in-out infinite;
    border-radius: 0;
}

.music-bar:nth-child(1) {
    animation-delay: 0s;
    height: 40%;
}

.music-bar:nth-child(2) {
    animation-delay: 0.2s;
    height: 70%;
}

.music-bar:nth-child(3) {
    animation-delay: 0.4s;
    height: 50%;
}

.music-bar:nth-child(4) {
    animation-delay: 0.6s;
    height: 80%;
}

@keyframes musicPulse {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.5);
    }
}

.status-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.675rem;
    line-height: 1.2;
}

/* Connecting animation - animated dots */
.status-text.connecting::after {
    content: '.';
    display: inline-block;
    animation: connectingDots 1.5s steps(3, end) infinite;
}

@keyframes connectingDots {
    0% {
        content: '.';
    }
    33% {
        content: '..';
    }
    66% {
        content: '...';
    }
}

/* Upcoming Events Table */
.upcoming-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.upcoming-header {
    display: grid;
    grid-template-columns: 130px 120px 1fr 3fr 80px;
    gap: 12px; /* More compact gap */
    padding: 6px 12px; /* More compact padding */
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-secondary-white);
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    text-shadow: 0 0 6px var(--color-secondary-white);
}

/* Force unified styling on all header columns */
.upcoming-header > div {
    color: var(--color-secondary-white) !important;
    font-family: var(--font-pixel) !important;
    font-size: 0.54rem !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 6px var(--color-secondary-white) !important;
    border: none !important;
    background: none !important;
}

.upcoming-row {
    display: grid;
    grid-template-columns: 130px 120px 1fr 3fr 80px;
    gap: 12px; /* More compact gap to match header */
    padding: 6px 12px; /* More compact padding to match header */
    border-bottom: 1px solid rgba(29, 176, 0, 0.3);
    transition: all var(--transition-speed) ease;
    position: relative;
}

.upcoming-row:hover {
    background: linear-gradient(90deg, rgba(255, 248, 12, 0.1), rgba(29, 176, 0, 0.05));
    border-color: var(--color-primary-yellow);
    box-shadow: 0 0 8px rgba(255, 248, 12, 0.3);
}

.upcoming-row:last-child {
    border-bottom: none;
}

/* Column Styles */
.col-date {
    color: var(--color-primary-yellow);
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    text-shadow: 0 0 4px var(--color-primary-yellow);
}

.col-time {
    color: var(--color-secondary-green);
    font-family: var(--font-regular);
    font-weight: bold;
    font-size: 0.72rem;
}

.col-organizer {
    color: var(--color-secondary-white);
    font-family: var(--font-regular);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-title {
    color: var(--color-secondary-white);
    font-family: var(--font-regular);
    font-weight: bold;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

/* Privacy protection for private events */
.col-title.private-title {
    filter: blur(20px);
    -webkit-filter: blur(20px);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: not-allowed;
    opacity: 0.4;
    transition: all 0.3s ease;
    background: rgba(255, 248, 12, 0.2);
    border-radius: 2px;
    padding: 2px 4px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.col-title.private-title:hover {
    filter: blur(25px);
    -webkit-filter: blur(25px);
    opacity: 0.3;
    background: rgba(255, 248, 12, 0.3);
}

.col-title.private-title::after {
    content: "🔒";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    filter: none;
    -webkit-filter: none;
    font-size: 7px;
    opacity: 0.8;
    text-shadow: 0 0 4px var(--color-primary-yellow);
    animation: lockPulse 2s ease-in-out infinite;
}

@keyframes lockPulse {
    0%, 100% { 
        opacity: 0.8;
        transform: translateY(-50%) scale(1);
    }
    50% { 
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
        text-shadow: 0 0 8px var(--color-primary-yellow);
    }
}

.col-status {
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    text-align: center;
    padding: 4px 8px;
    border-radius: 0; /* Keep pixel perfect */
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-public {
    color: var(--color-secondary-green);
    border: none;
    background: rgba(29, 176, 0, 0.1);
    text-shadow: 0 0 4px var(--color-secondary-green);
}

.status-private {
    color: var(--color-primary-yellow);
    border: none;
    background: rgba(255, 248, 12, 0.1);
    text-shadow: 0 0 4px var(--color-primary-yellow);
}

.status-unknown {
    color: #888;
    border-color: var(--color-primary-yellow);
    background: rgba(136, 136, 136, 0.1);
}

/* Status Icon Styles for SVG */
.status-icon {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 4px rgba(255, 248, 12, 0.6));
    transition: all 0.3s ease;
}

.status-public .status-icon {
    filter: drop-shadow(0 0 4px rgba(29, 176, 0, 0.6));
}

.status-private .status-icon {
    filter: drop-shadow(0 0 4px rgba(255, 248, 12, 0.6));
}

.status-icon:hover {
    filter: drop-shadow(0 0 8px rgba(255, 248, 12, 0.8));
    transform: scale(1.1);
}

/* No Upcoming Events */
.no-upcoming {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    gap: 15px;
}

.no-upcoming-icon {
    font-size: 2rem;
    filter: grayscale(1) opacity(0.6);
}

.no-upcoming-text {
    font-size: 0.75rem;
    color: var(--color-secondary-green);
    text-shadow: 0 0 8px var(--color-secondary-green);
}

.no-upcoming-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
}

/* Conway's Game of Life Styles */
.game-of-life-section {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(29, 176, 0, 0.05), rgba(255, 248, 12, 0.02));
    border: var(--border-width) solid var(--color-primary-yellow);
    padding: 0;
    position: relative;
    overflow: hidden;
    max-height: 400px; /* Match game-content-wrapper to prevent empty space */
    box-shadow: 
        0 0 15px rgba(29, 176, 0, 0.3),
        inset 0 0 20px rgba(29, 176, 0, 0.05);
}

.game-of-life-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--color-secondary-green);
    flex-shrink: 0;
}

.game-title {
    font-size: 0.6rem;
    color: var(--color-secondary-green);
    text-shadow: 0 0 8px var(--color-secondary-green);
    margin: 0;
    letter-spacing: 2px;
}

.game-status {
    display: flex;
    gap: 20px;
    font-family: var(--font-pixel);
    font-size: 0.4rem;
}

.generation-counter {
    color: var(--color-primary-yellow);
    text-shadow: 0 0 4px var(--color-primary-yellow);
    letter-spacing: 1px;
}

.restart-timer {
    color: var(--color-secondary-white);
    text-shadow: 0 0 4px var(--color-secondary-white);
    letter-spacing: 1px;
}

.game-grid-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 200px;
}



.game-canvas {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 248, 12, 0.3);
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill;
}

.game-canvas:hover {
    border-color: var(--color-primary-yellow);
    box-shadow: 0 0 8px rgba(255, 248, 12, 0.3);
}

/* Zianon Image Overlay */
.zianon-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    /* Start fully transparent; JS will fade this in only after an image is loaded */
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Smooth transitions */
    /* Ensure no default background image is ever applied via HTML/CSS */
    background-image: none;
    background-color: transparent;
    background-position: center;
    background-size: cover;
}

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

/* Spinner shown while scheduled image is loading */
.zianon-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(255, 248, 12, 0.25);
    border-top-color: rgba(255, 248, 12, 0.9);
    animation: zianon-spin 0.8s linear infinite;
    box-shadow: 0 0 6px rgba(255, 248, 12, 0.6);
}

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

/* Game Content Wrapper - Two Column Layout */
.game-content-wrapper {
    flex: 1;
    display: flex;
    height: 100%;
    min-height: 200px;
    max-height: 400px;
}

/* Gravity Video Container */
.gravity-video-container {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 248, 12, 0.3);
    overflow: hidden;
    width: auto;
    min-width: 0;
}

.gravity-video {
    height: 100%;
    width: auto;
    object-fit: cover;
    display: block;
    filter: 
        contrast(1.1)
        brightness(0.9)
        saturate(1.2)
        hue-rotate(10deg);
    transition: filter 0.3s ease;
}

.gravity-video:hover {
    filter: 
        contrast(1.2)
        brightness(1.0)
        saturate(1.4)
        hue-rotate(15deg);
}



.video-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(255, 255, 255, 0.6);
}

.video-error .error-icon {
    font-size: 1rem;
    margin-bottom: 8px;
    opacity: 0.6;
}

.video-error .error-text {
    font-size: 0.45rem;
    color: var(--color-primary-yellow);
    text-shadow: 0 0 4px var(--color-primary-yellow);
}

/* Adjust Game Grid Container for Split Layout */
.game-content-wrapper .game-grid-container {
    flex: 1;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* Prevent any overflow */
}

/* Overlay header in bottom right corner */
.game-content-wrapper .game-of-life-header {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--color-primary-yellow);
    border-radius: 0; /* Keep pixel perfect */
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.game-content-wrapper .game-status {
    display: flex;
    gap: 15px;
    font-family: var(--font-pixel);
    font-size: 0.35rem;
    justify-content: center;
}

/* Canvas takes full container space */
.game-content-wrapper .game-grid-container .game-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: fill;
}

/* Animation for living cells */
@keyframes cellPulse {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1);
    }
    50% { 
        opacity: 0.8;
        filter: brightness(1.2);
    }
}

/* Camera Grid Layout */
.camera-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 600px; /* Ensure minimum height for visibility */
}

.camera-row {
    display: flex;
    gap: 10px;
    flex: 1; /* Each row takes equal height */
    min-height: 290px; /* Minimum height for each row */
}

/* Camera Stream Container */
.camera-stream-container {
    flex: 1; /* Share space equally between camera streams */
    display: flex;
    flex-direction: column;
    aspect-ratio: 1; /* Force square aspect ratio */
    min-height: 280px; /* Minimum size for visibility */
    max-height: 400px; /* Maximum size to prevent oversizing */
    border: var(--border-width) solid var(--color-primary-yellow);
    background: linear-gradient(135deg, rgba(255, 248, 12, 0.05), rgba(29, 176, 0, 0.02));
    box-shadow: 
        0 0 var(--glow-size) rgba(255, 248, 12, 0.3),
        inset 0 0 20px rgba(255, 248, 12, 0.1);
    overflow: hidden;
}

/* Grid item specific styling */
.camera-stream-container.grid-item {
    aspect-ratio: 1; /* Ensure square shape */
}

/* Empty slot styling */
.camera-stream-container.empty-slot {
    border: var(--border-width) dashed rgba(255, 248, 12, 0.5);
    background: linear-gradient(135deg, rgba(128, 128, 128, 0.05), rgba(64, 64, 64, 0.02));
    box-shadow: 
        0 0 var(--glow-size) rgba(128, 128, 128, 0.2),
        inset 0 0 20px rgba(128, 128, 128, 0.05);
}

.camera-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.5);
}

.placeholder-icon {
    font-size: 1.25rem;
    margin-bottom: 10px;
    opacity: 0.4;
    animation: pulse 3s ease-in-out infinite;
}

.placeholder-text {
    font-size: 0.6rem;
    color: rgba(255, 248, 12, 0.5);
    text-shadow: 0 0 6px rgba(255, 248, 12, 0.3);
    margin-bottom: 5px;
}

.placeholder-subtitle {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.4);
    opacity: 0.7;
    text-align: center;
}

/* Offline indicator styling */
.live-indicator.offline .live-dot {
    background: #666666;
    box-shadow: 0 0 8px #666666;
    animation: none;
}

.live-indicator.offline .live-text {
    color: #666666;
    text-shadow: 0 0 6px #666666;
}

.camera-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px; /* Reduced padding to give more space to video */
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--color-primary-yellow);
    flex-shrink: 0; /* Don't allow header to shrink */
}

.camera-title {
    font-size: 0.7rem;
    color: var(--color-primary-yellow);
    text-shadow: 0 0 8px var(--color-primary-yellow);
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-dot {
    width: 12px;
    height: 12px;
    background: #ff0000;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px #ff0000;
}

.live-text {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: #ff0000;
    text-shadow: 0 0 6px #ff0000;
    letter-spacing: 1px;
    min-width: 70px;
    text-align: center;
    white-space: nowrap;
}

@keyframes livePulse {
    0%, 100% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 12px #ff0000;
    }
}

.camera-stream-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    min-height: 200px; /* Ensure minimum visible size */
}

/* Ensure image content fills wrapper completely */
.camera-stream-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    object-fit: cover;
}

/* Ensure iframe content fills wrapper completely */
.camera-stream-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    border: none !important;
    overflow: hidden !important;
    scrolling: no;
}

/* Remove any possible baseline/padding gaps for the Corridor stream specifically */
#corridor-video-block,
#corridor-video-block .camera-stream-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}
#corridor-video-block {
    position: relative !important;
}
#corridor-video-block .camera-header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    /* Keep visual divider line */
    border-bottom: 1px solid var(--color-primary-yellow);
    background: rgba(0, 0, 0, 0.3);
}
#corridor-video-block .camera-stream-wrapper {
    height: 100% !important; /* Ensure iframe wrapper fills the block height */
}

.camera-stream {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.1) brightness(0.95);
    transition: all 0.3s ease;
}

/* Camera live video stream styling */
.camera-video-stream {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: rgba(0, 0, 0, 0.9);
    transition: opacity 0.3s ease;
    filter: contrast(1.1) brightness(0.95);
}

.camera-video-stream:hover {
    filter: contrast(1.2) brightness(1.05);
    box-shadow: inset 0 0 20px rgba(255, 248, 12, 0.2);
}

/* Specific styling for live video streams */
#entrance-camera-stream,
#gallery-camera-stream,
#cryptobar-camera-stream,
#entrance-sub-camera-stream {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    background: rgba(0, 0, 0, 0.9);
    overflow: hidden !important;
    scrolling: no;
    box-sizing: border-box;
}

/* 90-degree rotation for entrance sub camera */
.camera-rotated {
    transform: rotate(90deg) scale(1.2);
    transform-origin: center center;
}

/* 15% zoom for gallery camera */
#gallery-camera-stream {
    transform: scale(1.15);
    transform-origin: center center;
}

/* Rotation utility classes for cameras */
.camera-rotated-cw {
    transform: rotate(90deg) scale(1.4);
    transform-origin: center center;
}
.camera-rotated-ccw {
    transform: rotate(-90deg);
    transform-origin: center center;
}
/* Corridor stream expects this class name to rotate opposite to 1st floor */
.camera-rotated-ccw-fill {
    transform: rotate(-90deg);
    transform-origin: center center;
}
.camera-rotated-180 {
    transform: rotate(180deg);
    transform-origin: center center;
}
.camera-rotated-270 {
    transform: rotate(270deg);
    transform-origin: center center;
}

/* Ensure no scroll bars appear on any camera iframe content */
.camera-stream-container iframe,
.camera-stream-container iframe body,
.camera-stream-container iframe html {
    overflow: hidden !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}

/* Hide scrollbars for webkit browsers */
.camera-stream-container iframe::-webkit-scrollbar,
.camera-stream-container iframe body::-webkit-scrollbar,
.camera-stream-container iframe html::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* Video-specific styling for H.264 streams */
.camera-stream video,
video.camera-stream {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.1) brightness(0.95);
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.8);
}

.camera-stream:hover,
video.camera-stream:hover {
    filter: contrast(1.2) brightness(1.05);
    box-shadow: inset 0 0 20px rgba(255, 248, 12, 0.2);
}

/* Camera loading state for H.264 streams */
.camera-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.camera-loading .error-text {
    color: var(--color-primary-yellow);
    text-shadow: 0 0 8px var(--color-primary-yellow);
    animation: pulse 2s ease-in-out infinite;
}

/* Camera Error State */
.camera-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    color: var(--color-secondary-white);
}

.error-icon {
    font-size: 1.5rem;
    margin-bottom: 15px;
    opacity: 0.6;
    animation: pulse 2s ease-in-out infinite;
}

.error-text {
    font-size: 0.7rem;
    color: #ff6b6b;
    text-shadow: 0 0 6px #ff6b6b;
    margin-bottom: 10px;
}

.error-subtitle {
    font-size: 0.6rem;
    color: var(--color-secondary-white);
    opacity: 0.7;
    text-align: center;
}

/* News Ticker - ZOLAK Retro Style */
.news-ticker {
    background: var(--color-primary-black);
    border: 4px solid var(--color-primary-yellow);
    border-bottom: none;
    height: 25px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 0;
    box-shadow: 
        inset 0 0 0 2px var(--color-primary-black),
        inset 0 0 20px rgba(255, 248, 12, 0.2),
        0 0 20px rgba(255, 248, 12, 0.3);
    animation: tickerGlow 6s ease-in-out infinite;
    /* iOS Safari: reduce overdraw and respect safe areas */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}

.news-ticker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 248, 12, 0.1) 50%, 
        transparent 100%);
    animation: tickerSweep 4s linear infinite;
    pointer-events: none;
}

/* Inner border removed per user request */

.news-ticker-content {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--color-primary-yellow);
    text-shadow: 
        0 0 8px var(--color-primary-yellow),
        2px 2px 0px var(--color-primary-black);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    /* Ensure smooth animation on iOS Safari */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    animation: scroll-left-slow 240s linear infinite;
    -webkit-animation: scroll-left-slow 240s linear infinite;
}



.news-item {
    padding-right: 60px;
    display: inline-block;
    position: relative;
}

.news-item::before {
    content: "█ ";
    color: var(--color-secondary-green);
    text-shadow: 
        0 0 8px var(--color-secondary-green),
        2px 2px 0px var(--color-primary-black);
    margin-right: 12px;
    font-size: 0.6rem;
}

/* Seamless circular animation - duplicated content */
@keyframes scroll-left-slow {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* WebKit-prefixed keyframes for older iOS Safari */
@-webkit-keyframes scroll-left-slow {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .news-ticker-content {
        -webkit-animation: none !important;
        animation: none !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

/* New Event Animation Overlay */
.new-event-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.new-event-overlay.show {
    opacity: 1;
    visibility: visible;
}

.new-event-content {
    text-align: center;
    position: relative;
    padding: 60px;
    border: 4px solid var(--color-primary-yellow);
    background: linear-gradient(45deg, 
        rgba(255, 248, 12, 0.2), 
        rgba(29, 176, 0, 0.1)
    );
    box-shadow: 
        0 0 40px var(--color-primary-yellow),
        inset 0 0 30px rgba(255, 248, 12, 0.1);
    animation: newEventPulse 5s ease-in-out;
}

.new-event-title {
    font-size: 1.5rem;
    color: var(--color-primary-yellow);
    margin-bottom: 20px;
    text-shadow: 
        0 0 20px var(--color-primary-yellow),
        2px 2px 0px rgba(0, 0, 0, 0.9);
    animation: titleGlow 1s ease-in-out infinite alternate;
}

.new-event-details {
    font-size: 1.05rem;
    color: var(--color-secondary-white);
    font-family: var(--font-regular);
}

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

@keyframes titleGlow {
    0% { text-shadow: 0 0 20px var(--color-primary-yellow), 2px 2px 0px rgba(0, 0, 0, 0.9); }
    100% { text-shadow: 0 0 30px var(--color-primary-yellow), 2px 2px 0px rgba(0, 0, 0, 0.9); }
}

/* Particles Animation */
.new-event-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-primary-yellow);
    border-radius: 50%;
    animation: particleFloat 3s ease-in-out infinite;
}

.particle:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    top: 30%;
    right: 20%;
    animation-delay: 0.6s;
}

.particle:nth-child(3) {
    bottom: 30%;
    left: 30%;
    animation-delay: 1.2s;
}

.particle:nth-child(4) {
    bottom: 20%;
    right: 30%;
    animation-delay: 1.8s;
}

.particle:nth-child(5) {
    top: 50%;
    left: 50%;
    animation-delay: 2.4s;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-20px) scale(1.5);
        opacity: 1;
    }
}

/* New Event Card Animation */
.event-card.new-event {
    animation: newEventSlide 1s ease-out;
}

@keyframes newEventSlide {
    0% {
        opacity: 0;
        transform: translateX(-100px) scale(0.8);
    }
    50% {
        opacity: 0.8;
        transform: translateX(10px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Enhanced New Event Overlay Animations */
.new-event-overlay.shake-animation {
    animation: dramaticShake 0.8s ease-in-out, newEventPulse 5s ease-in-out;
}

@keyframes dramaticShake {
    0%, 100% { transform: translateX(0) scale(1); }
    10% { transform: translateX(-8px) scale(1.02); }
    20% { transform: translateX(8px) scale(0.98); }
    30% { transform: translateX(-6px) scale(1.01); }
    40% { transform: translateX(6px) scale(0.99); }
    50% { transform: translateX(-4px) scale(1.005); }
    60% { transform: translateX(4px) scale(0.995); }
    70% { transform: translateX(-2px) scale(1.002); }
    80% { transform: translateX(2px) scale(0.998); }
    90% { transform: translateX(-1px) scale(1.001); }
}

/* Dramatic particle floating animation */
@keyframes dramaticFloat {
    0% {
        transform: translateY(0px) scale(1) rotate(0deg);
        opacity: 0.8;
        box-shadow: 0 0 5px currentColor;
    }
    25% {
        transform: translateY(-30px) scale(1.5) rotate(90deg);
        opacity: 1;
        box-shadow: 0 0 15px currentColor;
    }
    50% {
        transform: translateY(-60px) scale(2) rotate(180deg);
        opacity: 1;
        box-shadow: 0 0 25px currentColor;
    }
    75% {
        transform: translateY(-30px) scale(1.2) rotate(270deg);
        opacity: 0.8;
        box-shadow: 0 0 10px currentColor;
    }
    100% {
        transform: translateY(0px) scale(1) rotate(360deg);
        opacity: 0.6;
        box-shadow: 0 0 5px currentColor;
    }
}

/* Screen flash animation */
@keyframes screenFlash {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    20% {
        opacity: 0.4;
    }
    30% {
        opacity: 0.9;
    }
    40% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.7;
    }
    60% {
        opacity: 0.1;
    }
    70% {
        opacity: 0.5;
    }
    80% {
        opacity: 0.05;
    }
    90% {
        opacity: 0.2;
    }
    100% {
        opacity: 0;
    }
}

/* Enhanced new event content styling */
.new-event-overlay.show .new-event-content {
    animation: dramaticEntry 1.2s ease-out, continuousPulse 4s ease-in-out 1.2s;
}

@keyframes dramaticEntry {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-15deg);
        filter: blur(10px);
    }
    30% {
        opacity: 0.7;
        transform: scale(1.2) rotate(5deg);
        filter: blur(3px);
    }
    60% {
        opacity: 0.9;
        transform: scale(0.9) rotate(-2deg);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}

@keyframes continuousPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 40px var(--color-primary-yellow);
    }
    50% { 
        transform: scale(1.03);
        box-shadow: 0 0 60px var(--color-primary-yellow), 0 0 80px var(--color-secondary-green);
    }
}

/* Responsive Design */
/* Responsive Design for Three Column Layout */
@media (max-width: 1400px) {
    .layout-wrapper {
        gap: 20px;
    }
    
    .left-column {
        flex: 1; /* Keep reasonable width for left column */
    }
    
    .center-column {
        flex: 3; /* Main space for events */
    }
    
    .right-column {
        flex: 2; /* Right side for cameras */
    }
    
    .camera-stream-container {
        min-height: 220px;
        max-height: 320px;
    }
    
    .camera-grid {
        min-height: 500px;
    }
    
    .camera-section {
        min-height: 550px;
    }
}

@media (max-width: 1200px) {
    .header-title {
        font-size: 0.8rem;
    }
    
    .current-date {
        font-size: 0.6rem;
    }
    
    .current-time {
        font-size: 0.6rem;
    }
    
    .section-title {
        font-size: 0.65rem;
        padding: 8px 0 6px 0;
        margin-bottom: 8px;
    }
    
    .event-time {
        font-size: 0.7rem;
        min-width: 100px;
    }
    
    .event-title {
        font-size: 0.55rem;
    }
    
    /* Adjust three-column layout for medium screens */
    .left-column {
        flex: 1.2; /* Better width for left column at 1200px */
    }
    
    .center-column {
        flex: 2.5; /* Events take center space */
    }
    
    .right-column {
        flex: 1.8; /* Cameras on right */
    }
    
    .layout-wrapper {
        gap: 15px;
    }
    
    .camera-stream-container {
        min-height: 180px;
        max-height: 280px;
    }
    
    .camera-grid {
        min-height: 400px;
    }
    
    .camera-section {
        min-height: 450px;
    }
}

/* Hide date and time for screens below 1100px and rework header to flex layout */
@media (max-width: 1100px) {
    .datetime-block {
        display: none;
    }
    
    /* Change header from grid to flex layout with 3 elements */
    .calendar-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }
    
    /* Left element: header-content (logo + title) */
    .header-content {
        flex: 0 1 auto;
        justify-content: flex-start;
    }
    
    /* Center element: political-prisoners-indicator */
    .political-prisoners-indicator {
        /* Let the indicator size itself to its content instead of stretching
           to fill the entire middle column, which was causing a nearly
           square box on medium-width screens. */
        flex: 0 1 auto;
        width: auto;
        justify-content: center;
    }
    
    /* Right element: header-info-block (Bitcoin) */
    .header-info-block {
        flex: 0 1 auto;
        justify-content: flex-end;
    }
    
    /* Two-row compact layout for political prisoners label */
    .prisoners-label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        white-space: normal;
        line-height: 1;
        gap: 0;
        margin: 0;
        padding: 0;
    }
    
    .prisoners-label-line1,
    .prisoners-label-line2 {
        display: block;
        line-height: 1;
        text-align: left;
        margin: 0;
        padding: 0;
    }
}

/* For screens less than 1000px: show only left and center columns */
@media (max-width: 1000px) {
    .layout-wrapper {
        gap: 15px;
    }
    
    .left-column {
        flex: 1; /* Left column for public wall */
    }
    
    .center-column {
        flex: 2; /* Center column for events */
    }
    
    /* Hide right column (cameras) on smaller screens */
    .right-column {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .calendar-header {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 15px 20px;
    }
    
    .header-content {
        justify-content: center;
    }
    
    .header-title {
        font-size: 0.65rem;
    }
    
    .datetime-block {
        display: none;
    }
    
    .header-info-item {
        font-size: 0.35rem;
    }
    
    .event-card {
        flex-direction: column;
        text-align: center;
    }
    
    .event-time {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .new-event-content {
        padding: 40px 20px;
        margin: 20px;
    }
    
    .new-event-title {
        font-size: 1rem;
    }
    
    .new-event-details {
        font-size: 0.84rem;
    }
    
    /* Stack sections vertically, hide left and right columns, show only center column */
    .layout-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Allow scrolling in parent containers on mobile */
    .calendar-main {
        overflow: visible !important;
    }
    
    .three-column-layout {
        overflow: visible !important;
    }
    
    .layout-wrapper {
        overflow: visible !important;
    }
    
    /* Hide left and right columns on small screens */
    .left-column,
    .right-column {
        display: none !important;
    }
    
    /* Show only center column (events/radio) on small screens */
    .center-column {
        display: flex !important;
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Adjust public wall for mobile */
    .public-wall-wrapper {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 15px;
    }
}

/* Public Wall Section */
.public-wall-section {
    flex: 0 0 auto;
    margin-top: 10px;
}

.public-wall-section-inline {
    flex: 0 0 auto;
    margin-bottom: 10px; /* Space before camera section */
}

.public-wall-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.public-wall-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}


/* Posts Column */
.posts-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* Posts List Container - for displaying all messages */
.posts-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /*
     * Allow scrolling through all recent wall messages inside this
     * container instead of letting it grow indefinitely and being
     * clipped by parent sections.
     */
    flex: 1 1 auto;
    /* Constrain height so an inner scrollbar is always available
       when there are many posts, while still being responsive. */
    max-height: 260px;
    max-height: min(45vh, 260px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-yellow) rgba(0, 0, 0, 0.3);
}

.posts-list-container::-webkit-scrollbar {
    width: 8px;
}

.posts-list-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.posts-list-container::-webkit-scrollbar-thumb {
    background: var(--color-primary-yellow);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(255, 248, 12, 0.5);
}

.posts-list-container::-webkit-scrollbar-thumb:hover {
    background: #ffed4a;
    box-shadow: 0 0 10px rgba(255, 248, 12, 0.8);
}

.recent-posts-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    flex: 1;
    overflow: hidden;
}

.recent-posts-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(29, 176, 0, 0.05) 30%,
        rgba(0, 0, 0, 0.8) 70%,
        rgba(0, 0, 0, 0.95) 100%
    );
    pointer-events: none;
    z-index: 10;
}



.post-card {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--color-primary-yellow);
    border-left: 3px solid var(--color-primary-yellow);
    padding: 8px;
    transition: all var(--transition-speed) ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1;
}

.post-card-with-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 80px;
    max-height: 120px;
    overflow: hidden;
}

.post-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.75) 100%
    );
    z-index: 1;
}

.post-content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}

.post-card-with-image .post-content-wrapper {
    justify-content: center;
    padding: 8px 4px;
}


.post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    font-size: 10px;
}

.post-author {
    color: var(--color-primary-yellow);
    font-family: var(--font-pixel);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 9px;
}

.post-time {
    color: var(--color-secondary-green);
    font-family: var(--font-regular);
    opacity: 0.8;
    font-size: 8px;
}

.post-content {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.post-message {
    color: var(--color-secondary-white);
    font-family: var(--font-regular);
    font-size: 11px;
    line-height: 1.3;
    /*
     * Ensure very long unbroken strings (e.g. long hashes/URLs) do not
     * overflow into the block on the right. "overflow-wrap: anywhere" is
     * the most robust modern option; we keep legacy properties for
     * backwards compatibility.
     */
    word-wrap: break-word;      /* legacy name */
    overflow-wrap: anywhere;    /* preferred modern behavior */
    word-break: break-word;     /* safeguard for older engines */
    flex: 1;
}

.post-image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border: 1px solid var(--color-primary-yellow);
    border-radius: 2px;
    overflow: hidden;
    max-width: 100%;
}

.post-image-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
    display: block;
}


.post-card-with-image .post-message {
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.9),
        0 0 4px rgba(0, 0, 0, 0.8);
    font-weight: 500;
}

.post-card-with-image .post-author {
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.9),
        0 0 4px var(--color-primary-yellow);
    font-weight: bold;
}

.post-card-with-image .post-time {
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.9),
        0 0 4px rgba(0, 0, 0, 0.8);
}

/* No Posts State */
.no-posts {
    text-align: center;
    padding: 30px 15px;
    color: var(--color-secondary-green);
    opacity: 0.6;
}

.no-posts-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    filter: grayscale(1);
}

.no-posts-text {
    font-size: 1rem;
    color: var(--color-secondary-green);
    margin-bottom: 6px;
    text-shadow: 0 0 8px var(--color-secondary-green);
}

.no-posts-subtitle {
    font-family: var(--font-regular);
    color: var(--color-secondary-white);
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Responsive Design for Public Wall */
@media (max-width: 1200px) {
    .post-card-with-image {
        min-height: 100px;
    }
    
    .post-image {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 768px) {
    .post-card {
        padding: 6px;
        gap: 4px;
    }
    
    .post-message {
        font-size: 10px;
    }
    
    .post-content {
        gap: 6px;
    }
    
    .post-card-with-image {
        min-height: 80px;
        aspect-ratio: 2/1;
    }
    
    .post-image {
        width: 48px;
        height: 48px;
    }
    
    .upcoming-header {
        padding: 6px 10px;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
    }
    
    .upcoming-row {
        padding: 8px 10px;
    }
    
    .recent-posts-container {
        flex: 1;
    }
    

}

/* Animation for new posts */
.post-card.new-post {
    animation: newPostSlide 0.5s ease-out;
}

@keyframes newPostSlide {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Compact post image styling for landscape layout */
.public-wall-section {
    margin-bottom: 10px;
}

.public-wall-section-inline {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

/* Wall Posts & Messages Section - Unified Container */
.wall-messages-section {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.5);
    border: var(--border-width) solid var(--color-primary-yellow);
    box-shadow: 
        0 0 var(--glow-size) rgba(255, 248, 12, 0.3),
        inset 0 0 20px rgba(255, 248, 12, 0.1);
    overflow: hidden;
}

.wall-messages-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wall-messages-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--color-primary-yellow);
    flex-shrink: 0;
}

.wall-messages-title {
    font-size: 0.92rem;
    color: var(--color-primary-yellow);
    text-shadow: 0 0 8px var(--color-primary-yellow);
    text-align: center;
    max-width: 100%;
    margin: 0;
    line-height: 1.3;
}

.post-message-button {
    display: inline-block;
    margin-top: 8px;
    padding: 14px 28px;
    background: rgba(255, 248, 12, 0.1);
    border: 2px solid var(--color-primary-yellow);
    color: var(--color-primary-yellow);
    text-decoration: none;
    font-size: 1.33rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 248, 12, 0.3);
    cursor: pointer;
}

.post-message-button:hover {
    background: rgba(255, 248, 12, 0.2);
    box-shadow: 0 0 20px rgba(255, 248, 12, 0.6);
    text-shadow: 0 0 10px var(--color-primary-yellow);
    transform: translateY(-2px);
}

.post-message-button:active {
    transform: translateY(0);
    box-shadow: 0 0 15px rgba(255, 248, 12, 0.4);
}

/* Post Actions Section - Three buttons above game-of-life */
.post-actions-section {
    width: 100%;
    margin-bottom: 10px;
    font-size: 75%;
}

.post-actions-container {
    display: flex;
    gap: 10px;
    width: 100%;
    font-size: 80%;
}

.post-action-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    margin: 0;
    background: rgba(255, 248, 12, 0.1);
    border: 2px solid var(--color-primary-yellow);
    color: var(--color-primary-yellow);
    text-decoration: none;
    font-size: 1.064rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 248, 12, 0.3);
    cursor: pointer;
    text-align: center;
}

.post-action-button:hover {
    background: rgba(255, 248, 12, 0.2);
    box-shadow: 0 0 20px rgba(255, 248, 12, 0.6);
    text-shadow: 0 0 10px var(--color-primary-yellow);
    transform: translateY(-2px);
}

.post-action-button:active {
    transform: translateY(0);
    box-shadow: 0 0 15px rgba(255, 248, 12, 0.4);
}

.wall-messages-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    padding: 8px;
    /* Allow us to anchor a subtle fade-out overlay at the bottom */
    position: relative;
}

/* Bottom fade-out for long wall messages
 * This creates a soft gradient at the end of the entire messages block
 * so a long list of posts visually fades out instead of ending abruptly.
 */
.wall-messages-content::after {
    content: "";
    pointer-events: none; /* Do not block interaction with content underneath */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px; /* Enough to create a noticeable but not overpowering fade */
    /* Fade from transparent to the existing dark background */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.8) 60%,
        rgba(0, 0, 0, 0.95) 100%
    );
    z-index: 1;
}

/* Alternating Display Container Styles */
.alternating-display-container {
    position: relative;
    min-height: 80px;
    overflow: visible;
    /* Allow container to expand dynamically based on content */
}

.display-block {
    position: relative;
    width: 100%;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.display-block[style*="display: none"] {
    display: none !important;
}

.display-block.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

.display-block.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.display-block.slide-up-out {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
}

.display-block.slide-down-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Pinned Message Section Styles */
.pinned-message-section {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pinned-message-container {
    position: relative;
    background: linear-gradient(45deg, rgba(29, 176, 0, 0.05), rgba(255, 248, 12, 0.02));
    padding: 15px;
    min-height: 80px;
}

.pinned-post-card {
    position: relative;
    background: linear-gradient(90deg, 
        #FFF80C 0%, 
        #FFED4A 100%);
    border: 3px solid #FFF80C;
    border-radius: 0;
    padding: 10px 12px 8px 40px; /* Compact padding with left space for pin */
    margin-top: 0;
    transition: all var(--transition-speed) ease;
    box-shadow: 
        0 2px 8px rgba(255, 248, 12, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    overflow: visible; /* Allow pin emoji to be fully visible */
}

.pinned-post-card.pinned-post-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(255, 248, 12, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: #FFED4A;
}

.pinned-post-card.pinned-post-clickable:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 6px rgba(255, 248, 12, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.pinned-post-card::before {
    content: '📌';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: none;
}

/* Enhanced pin visibility for image cards */
.pinned-post-card-with-image::before {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    z-index: 100;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}


.pinned-post-card-with-image {
    position: relative;
    overflow: visible; /* Allow pin emoji to be fully visible */
    border-radius: 0;
    min-height: 100px;
}

.pinned-post-card-with-image.pinned-post-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 16px rgba(255, 248, 12, 0.5),
        0 0 20px rgba(255, 248, 12, 0.3);
}

.pinned-post-card-with-image.pinned-post-clickable:active {
    transform: translateY(0);
}

.pinned-post-image {
    width: 100%;
    height: auto;
    min-height: 100px;
    object-fit: cover;
    display: block;
    filter: brightness(0.85) contrast(1.15) saturate(1.1);
    border-radius: 0;
}

.pinned-post-card-with-image .pinned-post-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 248, 12, 0.4) 0%,
        rgba(255, 237, 74, 0.3) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    backdrop-filter: blur(1px);
    pointer-events: none;
    border-radius: 0;
}


.pinned-post-content-wrapper {
    position: relative;
    z-index: 2;
}

.pinned-post-card-with-image .pinned-post-content-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 70%,
        transparent 100%
    );
    padding: 8px 12px 8px 40px;
    border-radius: 0;
}

.pinned-post-content {
    margin: 0;
}

.pinned-post-message {
    color: var(--color-primary-black);
    line-height: 1.4;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    font-weight: 600;
    /* Match normal post message behavior for long unbroken strings */
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pinned-post-card-with-image .pinned-post-message {
    color: var(--color-secondary-white);
    font-size: 0.9rem;
    font-weight: 600;
    text-shadow: 
        2px 2px 6px rgba(0, 0, 0, 0.9),
        0 0 10px rgba(255, 248, 12, 0.6);
}

.no-pinned-message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 45px;
    padding: 10px 12px;
    background: linear-gradient(90deg, 
        rgba(255, 248, 12, 0.1) 0%, 
        rgba(255, 237, 74, 0.08) 100%);
    border: 1px dashed rgba(255, 248, 12, 0.4);
    border-radius: 0;
}

.no-pinned-icon {
    font-size: 1.3rem;
    opacity: 0.4;
    filter: grayscale(100%);
}

.no-pinned-text {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.88rem;
    font-family: var(--font-regular);
}

.no-pinned-subtitle {
    display: none;
}

/* Responsive adjustments for pinned message */
@media (max-width: 1200px) {
    .pinned-message-container {
        min-height: 70px;
    }
    
    .pinned-post-card {
        padding: 9px 12px 8px 36px;
    }
    
    .pinned-post-card::before {
        font-size: 18px;
        left: 7px;
    }
    
    .pinned-post-message {
        font-size: 0.85rem;
    }
    
    .no-pinned-icon {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .pinned-message-container {
        padding: 10px;
        min-height: 60px;
    }
    
    .pinned-post-card {
        padding: 8px 10px 7px 32px;
        margin-top: 0;
    }
    
    .pinned-post-card::before {
        font-size: 16px;
        left: 6px;
    }
    
    .pinned-post-card-with-image {
        min-height: 90px;
    }
    
    .pinned-post-card-with-image .pinned-post-content-wrapper {
        padding: 7px 10px 7px 32px;
    }
    
    .pinned-post-message {
        font-size: 0.82rem;
        line-height: 1.4;
    }
    
    .no-pinned-message {
        padding: 8px 10px;
        min-height: 40px;
    }
    
    .no-pinned-icon {
        font-size: 1.1rem;
    }
    
    .no-pinned-text {
        font-size: 0.8rem;
    }
}

/* Saying Overlay for Belarusian sayings */
.saying-overlay {
	/* Cover the entire viewport (not just the header) */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Semi‑transparent dark backdrop so the quote floats above the whole page */
	background: radial-gradient(circle at top, rgba(0, 255, 255, 0.12) 0, transparent 55%),
	            radial-gradient(circle at bottom, rgba(255, 0, 128, 0.18) 0, transparent 60%),
	            rgba(3, 3, 10, 0.88);
	border: none;
	opacity: 0;
	visibility: hidden;
	z-index: 2000;
	backdrop-filter: blur(2px);
	transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.saying-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* When a saying is shown, keep the overlay covering the entire
 * header (top bar). The header layout itself stays the same,
 * but normal header content is faded out via the rules above,
 * and the absolute-positioned overlay spans the full area. */
.calendar-header.showing-saying {
	/* Class kept for backwards compatibility – can be used to dim header
	 * content while the full‑screen saying overlay is visible. */
}

.calendar-header.showing-saying .saying-overlay {
	/* The overlay is fixed to the viewport now, so we only ensure it
	 * stretches edge‑to‑edge visually. */
	padding: 0;
}


.saying-content {
	text-align: center;
	max-width: min(80%, 900px);
	padding: 0 20px;
}

.saying-text {
	font-family: var(--font-pixel);
	font-size: 1.2rem;
	color: var(--color-primary-yellow);
	text-shadow:
		0 0 12px var(--color-primary-yellow),
		0 0 24px rgba(255, 255, 255, 0.6),
		2px 2px 0px rgba(0, 0, 0, 0.9);
	margin: 0;
	letter-spacing: 2px;
	font-weight: bold;
	position: relative;
	text-transform: uppercase;
	/* Subtle idle glow/flicker when the boom finished */
	animation: sayingGlow 3s ease-in-out infinite;
}

.saying-text::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 1px;
	width: 100%;
	height: 100%;
	color: rgba(255, 0, 0, 0.6);
	z-index: -1;
	clip-path: inset(0 0 55% 0);
	animation: sayingGlitch1 0.45s infinite linear alternate-reverse;
}

.saying-text::after {
    content: attr(data-text);
    position: absolute;
   	top: 0;
   	left: -1px;
   	width: 100%;
   	height: 100%;
   	color: rgba(0, 255, 255, 0.45);
   	z-index: -2;
   	clip-path: inset(45% 0 0 0);
   	animation: sayingGlitch2 0.45s infinite linear alternate-reverse;
   }

.saying-votes {
    display: none;
}

/* Saying animations */
@keyframes sayingGlow {
	0%, 100% {
		text-shadow:
			0 0 10px var(--color-primary-yellow),
			0 0 26px rgba(255, 255, 255, 0.45),
			2px 2px 0px rgba(0, 0, 0, 0.9);
		filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.35));
	}
	50% {
		text-shadow:
			0 0 20px var(--color-primary-yellow),
			0 0 35px rgba(255, 255, 255, 0.7),
			2px 2px 0px rgba(0, 0, 0, 0.9);
		filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.7));
	}
}

@keyframes sayingGlitch1 {
	0%   { transform: translate(0, 0); opacity: 0.8; }
	10%  { transform: translate(-2px, 1px) skewX(-1deg); }
	25%  { transform: translate(-1px, -1px) skewY(1deg); opacity: 1; }
	40%  { transform: translate(1px, 2px); }
	60%  { transform: translate(2px, -1px) skewX(1deg); opacity: 0.9; }
	80%  { transform: translate(-1px, 1px); }
	100% { transform: translate(0, 0); opacity: 0.85; }
}

@keyframes sayingGlitch2 {
	0%   { transform: translate(0, 0); opacity: 0.8; }
	12%  { transform: translate(2px, -1px) skewX(1deg); }
	28%  { transform: translate(1px, 1px); opacity: 1; }
	45%  { transform: translate(-2px, -1px) skewY(-1deg); }
	65%  { transform: translate(-1px, 2px); opacity: 0.9; }
	82%  { transform: translate(1px, -1px); }
	100% { transform: translate(0, 0); opacity: 0.85; }
}

/* One‑shot "boom" intro for every new saying */
.saying-text.boom {
	animation:
		/* quick impact */
		sayingBoom 700ms cubic-bezier(0.2, 0.9, 0.3, 1) 1,
		/* then idle glow loop */
		sayingGlow 3s ease-in-out 700ms infinite;
}

@keyframes sayingBoom {
	0% {
		transform: scale(0.85) translateY(10px);
		letter-spacing: 6px;
		filter: blur(6px) brightness(0.6);
		opacity: 0;
	}
	40% {
		transform: scale(1.15) translateY(0);
		letter-spacing: 3px;
		filter: blur(1px) brightness(1.3) contrast(1.2);
		opacity: 1;
	}
	60% {
		transform: scale(0.98) translateY(0);
		letter-spacing: 1px;
		filter: blur(0) brightness(1) contrast(1);
	}
	100% {
		transform: scale(1) translateY(0);
		letter-spacing: 2px;
		filter: blur(0) brightness(1) contrast(1);
	}
}

/* YouTube block inside saying overlay */
.saying-video-wrapper {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}

.saying-video-frame {
	position: relative;
	width: clamp(260px, 55vw, 520px);
}

.saying-video-link-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
	padding: 10px 12px 12px;
	background: rgba(0, 0, 0, 0.5);
	border: var(--border-width) solid var(--color-primary-yellow);
	box-shadow:
		0 0 var(--glow-size) rgba(255, 248, 12, 0.3),
		inset 0 0 20px rgba(255, 248, 12, 0.1);
}

.saying-video-title {
	font-family: var(--font-main, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	font-size: 0.88rem;
	line-height: 1.35;
	color: #f7f7f7;
	opacity: 0.92;
}

.saying-video-embed {
	margin-top: 6px;
	border-radius: 6px;
	overflow: hidden;
}

.saying-video-embed-inner {
	position: relative;
	width: 100%;
	/* 16:9 aspect ratio */
	padding-top: 56.25%;
}

.saying-video-embed-inner iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border: none;
}

.saying-video-countdown {
       margin-top: 4px;
       font-family: var(--font-pixel);
       font-size: 0.75rem;
       letter-spacing: 2px;
       text-align: right;
       color: var(--color-primary-yellow);
       opacity: 0.85;
}

@media (max-width: 600px) {
	.saying-video-wrapper {
		margin-top: 24px;
	}

	.saying-video-frame {
		width: 90vw;
	}
}

/* Public Wall Post Card Fade Animations (support for single-message rotator) */
@keyframes postFadeIn {
    0% { opacity: 0; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes postFadeOut {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-2px); }
}

.post-card.fade-in {
    animation: postFadeIn 250ms ease-out;
    will-change: opacity, transform;
}

.post-card.fade-out {
    animation: postFadeOut 200ms ease-in;
    will-change: opacity, transform;
}

/* Person Card Section - Para2022 Database */
.person-card-section {
    flex: 1;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.5);
    border: var(--border-width) solid var(--color-primary-yellow);
    box-shadow: 
        0 0 var(--glow-size) rgba(255, 248, 12, 0.3),
        inset 0 0 20px rgba(255, 248, 12, 0.1);
    overflow: hidden;
}

.person-card-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px;
    /* Enable smooth hover transitions similar to pinned message cards */
    transition: all var(--transition-speed) ease;
}

.person-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--color-primary-yellow);
    flex-shrink: 0;
}

.person-title {
    font-size: 0.596rem;
    color: var(--color-primary-yellow);
    text-shadow: 0 0 8px var(--color-primary-yellow);
    text-align: center;
    max-width: 100%;
    margin: 0;
    line-height: 1.3;
}

.person-content {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    padding: 6px;
}

.person-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-secondary-white);
}

.person-loading .loading-icon {
    font-size: 1.5rem;
    margin-bottom: 15px;
    opacity: 0.6;
    animation: pulse 2s ease-in-out infinite;
}

.person-loading .loading-text {
    font-size: 0.6rem;
    color: var(--color-primary-yellow);
    text-shadow: 0 0 6px var(--color-primary-yellow);
}

.person-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    cursor: pointer;
}

.person-card-link:hover {
    text-decoration: none;
}

.person-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
}

/* Hover / active effects now apply to the outer person-card-container
 * (link wraps the entire container), mirroring pinned post card behavior
 */
.person-card-link:hover .person-card-container {
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(255, 248, 12, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: #FFED4A;
}

.person-card-link:active .person-card-container {
    transform: translateY(0);
    box-shadow:
        0 2px 6px rgba(255, 248, 12, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

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

/* First row: photo + basic info */
.person-row-top {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.person-photo {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border: 2px solid var(--color-primary-yellow);
    box-shadow: 0 0 10px rgba(255, 248, 12, 0.3);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-photo-placeholder {
    font-size: 1.5rem;
    opacity: 0.3;
}

.person-basic-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.person-name {
    font-size: 0.935rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    line-height: 1.2;
}

.person-birthday {
    font-size: 0.765rem;
    color: var(--color-primary-yellow);
    text-shadow: 0 0 4px var(--color-primary-yellow);
}

.person-locality {
    font-size: 0.765rem;
    color: var(--color-secondary-white);
    opacity: 0.9;
}

/* Second row: scrolling content */
.person-row-bottom {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 6px;
    min-height: 100px;
}

.person-scroll-content {
    font-size: 0.756rem;
    color: var(--color-secondary-white);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    position: relative;
}

.scroll-section {
    margin-bottom: 12px;
}

.scroll-section:last-child {
    margin-bottom: 0;
}

.scroll-label {
    color: var(--color-primary-yellow);
    font-weight: bold;
    text-shadow: 0 0 4px var(--color-primary-yellow);
}

/* Scroll animations */
@keyframes scrollDown {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-100% + var(--container-height, 150px))); }
}

@keyframes scrollUp {
    from { transform: translateY(calc(-100% + var(--container-height, 150px))); }
    to { transform: translateY(0); }
}

/* Video Player Section - Local Video Playback */
.video-player-section {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.5);
    border: var(--border-width) solid var(--color-primary-yellow);
    box-shadow: 
        0 0 var(--glow-size) rgba(255, 248, 12, 0.3),
        inset 0 0 20px rgba(255, 248, 12, 0.1);
    overflow: hidden;
}

.video-player-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.video-filename {
    font-size: 0.63rem;
    color: var(--color-secondary-white);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin: 0;
    opacity: 0.8;
}

.video-filename-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 0.63rem;
    color: var(--color-secondary-white);
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 40px);
    margin: 0;
    opacity: 0.9;
    z-index: 5;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 248, 12, 0.3);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.track-category-overlay {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 0.5625rem;
    color: var(--color-secondary-white);
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 4px;
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 10px);
    margin: 0;
    opacity: 0.9;
    z-index: 5;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 248, 12, 0.3);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.video-player-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    overflow: visible; /* Allow video to display at original dimensions */
    min-height: 0; /* Remove height constraint to preserve original video dimensions */
}

.local-video-stream {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Preserve original video dimensions without cropping */
    object-position: center;
    background: rgba(0, 0, 0, 0.9);
    transition: opacity 0.3s ease;
    filter: contrast(1.1) brightness(0.95);
}

.local-video-stream:hover {
    filter: contrast(1.2) brightness(1.05);
    box-shadow: inset 0 0 20px rgba(255, 248, 12, 0.2);
}

.video-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    color: var(--color-secondary-white);
    z-index: 10;
}

.video-error .error-icon {
    font-size: 1.5rem;
    margin-bottom: 15px;
    opacity: 0.6;
    animation: pulse 2s ease-in-out infinite;
}

.video-error .error-text {
    font-size: 0.49rem;
    color: #ff6b6b;
    text-shadow: 0 0 6px #ff6b6b;
    margin-bottom: 10px;
}

.video-error .error-subtitle {
    font-size: 0.42rem;
    color: var(--color-secondary-white);
    opacity: 0.7;
    text-align: center;
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Tablets and smaller devices (up to 1024px) */
@media screen and (max-width: 1024px) {
    html, body {
        overflow-x: hidden;
    }
    
    .calendar-container {
        padding: 15px 15px 0 15px;
        gap: 4px;
    }
    
    .calendar-header {
        padding: 3px 3px;
        gap: 10px;
    }
    
    .header-title {
        font-size: 0.7rem;
    }
    
    .logo {
        height: 32px;
    }
    
    .current-time {
        font-size: 0.6rem;
    }
    
    .current-date {
        font-size: 0.6rem;
    }
    
    /* Adjust video player for tablets */
    .video-player-section,
    .person-card-section {
        min-height: 300px;
        max-height: 400px;
    }
    
    /* Adjust radio controls for tablets */
    .radio-player-section {
        padding: 10px;
    }
    
    .radio-player-controls {
        flex-wrap: nowrap;
        gap: 10px;
        min-height: 42px;
    }
    
    .radio-button-container {
        width: 38px;
        height: 38px;
        border: none !important;
        outline: none !important;
    }
    
    .radio-button {
        width: 38px;
        height: 38px;
        min-height: 38px;
    }
    
    .radio-status {
        padding: 6px 8px;
        min-height: 38px;
    }
    
    .volume-control {
        min-height: 38px;
    }
    
    /* Adjust political prisoners and Bitcoin info */
    .political-prisoners-indicator {
        font-size: 0.65rem;
    }
    
    .header-info-block {
        font-size: 0.65rem;
    }
}

/* Mobile devices (up to 768px) */
@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
    
    .calendar-container {
        padding: 10px 10px 0 10px;
        gap: 3px;
    }
    
    .calendar-header {
        padding: 8px 15px;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .header-content {
        justify-content: center;
    }
    
    .header-title {
        font-size: 0.6rem;
        letter-spacing: 2px;
    }
    
    .logo {
        height: 28px;
    }

    /* On single-column layouts, keep Now Playing fully visible
       and limit the vertical space of the previous tracks block
       so that it shows roughly one item and scrolls internally. */
    .upcoming-container {
        /* Let the page handle vertical scrolling on small screens */
        overflow-y: visible;
    }

    .previous-tracks-section {
        max-height: 90px; /* header + ~1 track item */
        overflow-y: auto;
    }

    .previous-tracks-grid {
        max-height: none; /* let section control the scroll */
    }
    
    .datetime-block {
        display: none;
    }
    
    /* Adjust three-column layout for mobile */
    .three-column-layout .layout-wrapper {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Allow scrolling in parent containers on mobile */
    .calendar-main {
        overflow: visible !important;
    }
    
    .three-column-layout {
        overflow: visible !important;
    }
    
    .layout-wrapper {
        overflow: visible !important;
    }
    
    .left-column,
    .center-column,
    .right-column {
        width: 100% !important;
        min-width: 100% !important;
        flex: none;
    }
    
    /* Hide left and right columns on small screens, show only center */
    .left-column,
    .right-column {
        display: none !important;
    }
    
    /* Ensure center column shows all content with scrolling */
    .center-column {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 25px);
        max-height: calc(100dvh - 25px); /* Dynamic viewport height */
    }

    /* Ensure upcoming/now-playing content is fully visible on mobile */
    .center-column .upcoming-section,
    .events-column .upcoming-section {
        flex: 0 0 auto; /* Let content define height instead of forcing flex growth */
        min-height: auto;
        overflow: visible; /* Avoid inner clipping that hides now-playing-content */
    }

    .upcoming-container {
        flex: none;              /* Do not shrink within upcoming-section on mobile */
        max-height: none;        /* Allow full height for now-playing and upcoming items */
        overflow-y: visible;     /* Disable inner scroll so content is fully visible */
        box-sizing: border-box;
        width: 100%;
    }

    .now-playing-section,
    .now-playing-content {
        width: 100%;
        box-sizing: border-box;
    }

    /* Hide post action buttons on single-column mobile layout */
    .post-actions-section {
        display: none;
    }
    
    /* Adjust video player for mobile */
    .video-player-section {
        min-height: 200px;
        max-height: 300px;
    }
    
    .video-player-wrapper {
        height: 250px;
    }
    
    .person-card-section {
        min-height: 200px;
        max-height: 300px;
    }
    
    /* Adjust radio controls for mobile */
    .radio-player-section {
        padding: 10px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    
    .radio-player-controls {
        flex-wrap: nowrap;
        gap: 10px;
        min-height: 40px;
    }
    
    .radio-button-container {
        width: 36px;
        height: 36px;
        border: none !important;
        outline: none !important;
    }
    
    .radio-button {
        font-size: 0.8rem;
        width: 36px;
        height: 36px;
        min-height: 36px;
    }
    
    .radio-status {
        padding: 6px 8px;
        min-height: 36px;
    }
    
    .volume-control {
        gap: 6px;
        min-height: 36px;
    }
    
    .volume-slider {
        width: 70px;
        min-width: 60px;
    }
    
    .volume-label,
    .volume-value {
        font-size: 0.8rem;
    }
    
    /* Adjust event cards for mobile */
    .event-card {
        padding: 10px;
        font-size: 0.75rem;
    }
    
    .event-time {
        font-size: 0.65rem;
    }
    
    .event-title-main {
        font-size: 0.8rem;
    }

    
    .track-title {
        font-size: 0.8rem;
    }
    
    .track-artist,
    .track-album {
        font-size: 0.7rem;
    }
    
    .album-cover-container {
        width: 100px;
        height: 100px;
    }
    
    .album-cover-placeholder {
        font-size: 24px;
    }
    
    /* Adjust wall posts for mobile */
    .wall-messages-section {
        max-height: 400px;
    }
    
    .post-card {
        padding: 10px;
        font-size: 0.75rem;
    }
    
    /* Adjust joke block */
    #joke-block {
        margin-top: 10px;
        font-size: 0.65rem !important;
        padding: 8px 12px !important;
    }
    
    /* Adjust political prisoners and Bitcoin info */
    .political-prisoners-indicator {
        font-size: 0.55rem;
        padding: 6px 10px;
    }
    
    .prisoners-label {
        font-size: 0.5rem;
    }
    
    .header-info-block {
        font-size: 0.55rem;
    }
    
    .header-info-label,
    .header-info-value {
        font-size: 0.55rem;
    }
    
    /* Adjust Game of Life section */
    .game-of-life-section {
        min-height: 200px;
        max-height: 300px; /* Match game-content-wrapper to prevent empty space */
        flex: 0 0 auto !important;
    }
    
    /* Keep items in row on smaller screens with resizing */
    .game-content-wrapper {
        flex-direction: row !important;
        min-height: 200px;
        max-height: 300px;
    }
    
    .gravity-video-container {
        display: none; /* Hide gravity.mp4 for screens less than 770px */
    }
    
    .game-content-wrapper .game-grid-container {
        flex: 1;
        min-width: 0;
    }
    
    .game-canvas {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Post action buttons: 50% smaller size for mobile screens */
    .post-actions-section {
        flex: 0 0 auto !important;
    }
    
    .post-actions-container {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .post-action-button {
        flex: 0 0 calc(50% - 2.5px);
        max-width: calc(50% - 2.5px);
        padding: 7px 10px;
        font-size: 0.532rem;
    }
    
    /* Fix bottom bar positioning on mobile - always visible at bottom */
    .news-ticker {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        border-bottom: 4px solid var(--color-primary-yellow) !important;
    }
    
    /* Adjust main content to account for fixed bottom bar */
    .calendar-main {
        padding-bottom: 29px !important; /* 25px height + 4px border */
    }
}

/* For screens less than 600px: show only center column */
@media screen and (max-width: 600px) {
    html, body {
        overflow-x: hidden;
    }
    
    .calendar-container {
        padding: 8px 8px 0 8px;
        gap: 2px;
    }
    
    .calendar-header {
        padding: 6px 10px;
    }
    
    .header-title {
        font-size: 0.5rem;
        letter-spacing: 1px;
    }
    
    .logo {
        height: 24px;
    }
    
    .datetime-block {
        display: none;
    }
    
    /* Further reduce text sizes for very small screens */
    .pixel-text {
        letter-spacing: 1px;
    }
    
    /* Adjust three-column layout for small mobile */
    .three-column-layout .layout-wrapper {
        gap: 8px;
    }
    
    /* Adjust video player for small mobile */
    .video-player-section {
        min-height: 180px;
        max-height: 250px;
    }
    
    .video-player-wrapper {
        height: 200px;
    }
    
    .video-title {
        font-size: 0.51rem;
    }
    
    .person-card-section {
        min-height: 150px;
        max-height: 250px;
    }
    
    .person-title {
        font-size: 0.48rem;
    }
    
    /* Adjust radio controls for small mobile */
    .radio-player-section {
        padding: 8px;
        margin-top: 8px;
        margin-bottom: 10px;
    }
    
    .radio-player-controls {
        gap: 8px;
        min-height: 36px;
    }
    
    .radio-button-container {
        width: 32px;
        height: 32px;
        border: none !important;
        outline: none !important;
    }
    
    .radio-button {
        font-size: 0.75rem;
        width: 32px;
        height: 32px;
        min-height: 32px;
    }
    
    .radio-status {
        font-size: 0.7rem;
        padding: 5px 6px;
        min-height: 32px;
    }
    
    .volume-control {
        flex-wrap: nowrap;
        gap: 5px;
        min-height: 32px;
    }
    
    .volume-slider {
        width: 60px;
        min-width: 50px;
    }
    
    .volume-label,
    .volume-value {
        font-size: 0.7rem;
    }
    
    /* Adjust event cards for small mobile */
    .event-card {
        padding: 8px;
        font-size: 0.7rem;
    }
    
    .event-time {
        font-size: 0.6rem;
    }
    
    .event-title-main {
        font-size: 0.75rem;
    }
    
    .event-organizer-name {
        font-size: 0.65rem;
    }
    
    .now-playing-header {
        font-size: 0.65rem;
    }
    
    .track-title {
        font-size: 0.75rem;
    }
    
    .track-artist,
    .track-album {
        font-size: 0.65rem;
    }
    
    .album-cover-container {
        width: 100px;
        height: 100px;
    }
    
    .album-cover-placeholder {
        font-size: 20px;
    }
    
    /* Adjust wall posts for small mobile */
    .wall-messages-section {
        max-height: 350px;
    }
    
    .post-message-button {
        font-size: 0.6rem;
        padding: 6px 10px;
    }
    
    .post-card {
        padding: 8px;
        font-size: 0.7rem;
    }
    
    .post-message {
        font-size: 0.7rem;
    }
    
    .post-author {
        font-size: 0.6rem;
    }
    
    /* Adjust joke block */
    #joke-block {
        font-size: 0.6rem !important;
        padding: 6px 10px !important;
    }
    
    /* Adjust political prisoners and Bitcoin info */
    .political-prisoners-indicator {
        font-size: 0.5rem;
        padding: 5px 8px;
    }
    
    .prisoners-label {
        font-size: 0.45rem;
    }
    
    .prisoners-dot {
        width: 6px;
        height: 6px;
    }
    
    .header-info-block {
        font-size: 0.5rem;
    }
    
    .header-info-label,
    .header-info-value {
        font-size: 0.5rem;
    }
    
    /* Adjust Game of Life section */
    .game-of-life-section {
        min-height: 150px;
        max-height: 250px; /* Match game-content-wrapper to prevent empty space */
        flex: 0 0 auto !important;
    }
    
    /* Keep items in row on very small screens with resizing */
    .game-content-wrapper {
        flex-direction: row !important;
        min-height: 150px;
        max-height: 250px;
    }
    
    .gravity-video-container {
        display: none; /* Hide gravity.mp4 for screens less than 770px */
    }
    
    .game-content-wrapper .game-grid-container {
        flex: 1;
        min-width: 0;
    }
    
    .game-canvas {
        width: 100% !important;
        height: 100% !important;
    }
    
    .game-status {
        font-size: 0.55rem;
    }
    
    /* Post action buttons: 50% smaller size for very small screens */
    .post-actions-section {
        flex: 0 0 auto !important;
    }
    
    .post-actions-container {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .post-action-button {
        flex: 0 0 calc(50% - 2.5px);
        max-width: calc(50% - 2.5px);
        padding: 7px 10px;
        font-size: 0.532rem;
    }
    
    /* Fix bottom bar positioning on mobile - always visible at bottom */
    .news-ticker {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        border-bottom: 4px solid var(--color-primary-yellow) !important;
    }
    
    /* Adjust main content to account for fixed bottom bar */
    .calendar-main {
        padding-bottom: 29px !important; /* 25px height + 4px border */
    }
    
    /* Adjust camera section if present */
    .camera-section {
        min-height: auto;
    }
}

/* Landscape orientation optimization for mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    html, body {
    }
    
    .calendar-header {
        grid-template-columns: repeat(5, 1fr);
        padding: 6px 12px;
        gap: 8px;
    }
    
    .current-time {
        font-size: 0.5rem;
    }
    
    .current-date {
        font-size: 0.5rem;
    }
}

/* Medium-sized displays (typically two-column layout):
 * - Make post action buttons more compact with smaller text and padding
 * - Slightly reduce the gap between buttons
 */
@media screen and (min-width: 770px) and (max-width: 1099px) {
    .post-actions-container {
        gap: 6px;
    }
    
    .post-action-button {
        /* Smaller text than default desktop */
        font-size: 0.75rem;
        /* Further reduce padding to make buttons more compact */
        padding: 6px 10px;
    }
}

/* Decrease button text size by 25% for normal screens larger than 1100px */
@media screen and (min-width: 1100px) {
    .post-action-button {
        font-size: 0.798rem;
    }
}

/* Increase now playing text size by 20% for PC screens */
@media screen and (min-width: 1024px) {
    .now-playing-header {
        font-size: 12px; /* 10px * 1.2 = 12px */
    }
    
    .track-title {
        font-size: 13.2px; /* 11px * 1.2 = 13.2px */
    }
    
    .track-artist {
        font-size: 10.8px; /* 9px * 1.2 = 10.8px */
    }
    
    .track-album {
        font-size: 9.6px; /* 8px * 1.2 = 9.6px */
    }
}

/* Bouncing Belarus Element - Tech Glitchy Shape */
.bouncing-belarus {
    position: fixed;
    width: 30px;
    height: 30px;
    z-index: 999999;
    pointer-events: none;
    will-change: transform;
    animation: belarusGlitchColor 3s infinite, belarusFlicker 0.5s infinite;
}

.bouncing-belarus img {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 8px currentColor);
}

/* Tech Glitchy Color Transitions */
@keyframes belarusGlitchColor {
    0% { 
        filter: drop-shadow(0 0 8px #FFF80C) hue-rotate(0deg) brightness(1.2);
    }
    15% { 
        filter: drop-shadow(0 0 12px #1DB000) hue-rotate(90deg) brightness(1.5);
    }
    30% { 
        filter: drop-shadow(0 0 8px #FF6600) hue-rotate(180deg) brightness(1.3);
    }
    45% { 
        filter: drop-shadow(0 0 10px #FFF80C) hue-rotate(270deg) brightness(1.4);
    }
    60% { 
        filter: drop-shadow(0 0 8px #1DB000) hue-rotate(45deg) brightness(1.2);
    }
    75% { 
        filter: drop-shadow(0 0 12px #FF6600) hue-rotate(135deg) brightness(1.5);
    }
    90% { 
        filter: drop-shadow(0 0 8px #FFF80C) hue-rotate(225deg) brightness(1.3);
    }
    100% { 
        filter: drop-shadow(0 0 8px #FFF80C) hue-rotate(360deg) brightness(1.2);
    }
}

@keyframes belarusFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
    75% { opacity: 0.98; }
}