/* 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);
}

/* Allow band page to scroll vertically */
.band-page {
    overflow: auto;
}

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: visible;
}

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

/* Left column: Public Wall */
.left-column {
    flex: 1; /* Give proper space for public wall */
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    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: visible;
}

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

/* Band page specific layout tweaks */
.band-page .calendar-main {
    overflow: visible;
}

.band-layout .layout-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    align-items: start;
}

.band-layout .left-column,
.band-layout .center-column,
.band-layout .right-column {
    overflow: visible;
    min-height: 0;
}

.band-photo {
    width: 100%;
    border: var(--border-width) solid var(--color-primary-yellow);
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.band-photo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.band-photo.placeholder {
    color: var(--color-primary-yellow);
    text-shadow: 0 0 8px var(--color-primary-yellow);
}

.band-about .band-extra {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.band-extra-item {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 0.95rem;
}

.band-extra-item .extra-label {
    text-transform: uppercase;
    color: var(--color-primary-yellow);
    font-weight: 700;
    letter-spacing: 1px;
}

.band-extra-item .extra-value {
    color: var(--color-secondary-white);
}

/* -----------------------------------------------------------------------
 * Band page: provenance badges for country / genre / tag values.
 *
 * .band-extra-item--provenance  — flex row that wraps when values overflow.
 * .band-provenance-values       — flex container for all value+badge chips.
 * .band-provenance-entry        — groups one value text with its badges.
 * .band-provenance-text         — the human-readable value label.
 * .band-source-badge            — dimmed [source] superscript citation chip.
 * ----------------------------------------------------------------------- */
.band-extra-item--provenance {
    align-items: flex-start;
}

.band-provenance-values {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    line-height: 1.6;
}

.band-provenance-entry {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}

.band-provenance-entry:not(:last-child)::after {
    content: ",";
    color: var(--color-secondary-white, #fff);
    opacity: 0.6;
    margin-right: 2px;
}

.band-provenance-text {
    color: var(--color-secondary-white, #fff);
}

/* Country link on band detail page: inherits provenance-text colour and adds
   a subtle underline affordance so visitors know the value is navigable.
   Navigates to /country/<value>/ where they can discover other bands from
   the same origin. */
.band-country-link {
    color: var(--color-secondary-white, #fff);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
    transition: color 0.15s, border-color 0.15s;
}

.band-country-link:hover {
    color: var(--color-primary-yellow, #FFF80C);
    border-bottom-color: var(--color-primary-yellow, #FFF80C);
}

/* Genre link on band/album detail pages: navigates to /genre/<tag>/ so visitors
   and crawlers can discover other artists with the same genre (backlog item 8). */
.band-genre-link {
    color: var(--color-secondary-white, #fff);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
    transition: color 0.15s, border-color 0.15s;
}

.band-genre-link:hover {
    color: var(--color-primary-yellow, #FFF80C);
    border-bottom-color: var(--color-primary-yellow, #FFF80C);
}

/* Label link on album detail pages: navigates to /label/<slug>/ (backlog item 8). */
.band-label-link {
    color: var(--color-secondary-white, #fff);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
    transition: color 0.15s, border-color 0.15s;
}

.band-label-link:hover {
    color: var(--color-primary-yellow, #FFF80C);
    border-bottom-color: var(--color-primary-yellow, #FFF80C);
}

.band-source-badge {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: rgba(29, 176, 0, 0.7);
    letter-spacing: 0.5px;
    vertical-align: super;
    line-height: 1;
    cursor: default;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.band-source-badge:hover {
    color: var(--color-interactive-green, #1DB000);
}

/* -----------------------------------------------------------------------
 * Band page: info-panel — shared card container used by ABOUT, TRACKS,
 * SOURCES and LAST.FM sections on the band detail page.
 * ----------------------------------------------------------------------- */
.info-panel {
    border: var(--border-width, 2px) solid var(--color-primary-yellow, #FFF80C);
    background: rgba(0, 0, 0, 0.55);
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-panel-title {
    color: var(--color-primary-yellow, #FFF80C);
    font-size: 1rem;
    letter-spacing: 2px;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.info-panel-body {
    color: var(--color-secondary-white, #fff);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

/* -----------------------------------------------------------------------
 * Band page: LLM-generated description panel
 * ----------------------------------------------------------------------- */
.band-llm-panel {
    border-color: var(--color-interactive-green, #1DB000);
}

.llm-ai-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 5px;
    background: var(--color-interactive-green, #1DB000);
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
    vertical-align: middle;
}

.band-no-description {
    opacity: 0.45;
    letter-spacing: 2px;
}

.llm-provenance {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    border-top: 1px solid rgba(29, 176, 0, 0.3);
    padding-top: 8px;
}

.llm-provenance-item {
    display: inline-flex;
    gap: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

.llm-provenance-label {
    color: var(--color-interactive-green, #1DB000);
    font-weight: bold;
    letter-spacing: 1px;
}

.llm-provenance-value {
    color: var(--color-secondary-white, #fff);
    opacity: 0.8;
}

/* -----------------------------------------------------------------------
 * Band page: Wikipedia language-edition badge strip
 * Shown inside the Sources panel when one or more Wikipedia sitelinks are
 * present in external_links.  Each edition gets a small pill badge with the
 * ISO language code; colours follow the retro-futuristic yellow/black theme.
 * ----------------------------------------------------------------------- */
.band-wikipedia-editions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 6px;
    flex-wrap: wrap;
}

.band-wikipedia-label {
    color: var(--color-primary-yellow, #FFF80C);
    font-size: 0.78rem;
    letter-spacing: 2px;
    white-space: nowrap;
}

.band-wikipedia-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.band-wikipedia-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #000;
    color: var(--color-primary-yellow, #FFF80C);
    border: 1px solid var(--color-primary-yellow, #FFF80C);
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.15s, color 0.15s;
}

.band-wikipedia-badge:hover {
    background: var(--color-primary-yellow, #FFF80C);
    color: #000;
    text-decoration: none;
}

/* -----------------------------------------------------------------------
 * Band page: Wikipedia extract panel
 * Displays the first-paragraph Wikipedia summary per language edition,
 * with a language badge, a link to the full article, and a freshness
 * timestamp sourced from the aggregator payload's wikipedia_freshness map.
 * ----------------------------------------------------------------------- */
.band-wikipedia-extract-panel {
    border-left: 3px solid var(--color-green, #1DB000);
}

.wikipedia-extract-entry {
    padding: 8px 0;
}

.wikipedia-extract-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.wikipedia-lang-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-green, #1DB000);
    color: #000;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.wikipedia-extract-link {
    color: var(--color-primary-yellow, #FFF80C);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}

.wikipedia-extract-link:hover {
    border-bottom-color: var(--color-primary-yellow, #FFF80C);
    text-decoration: none;
}

.wikipedia-extract-text {
    color: #ccc;
    line-height: 1.6;
    margin: 0 0 8px;
    font-size: 0.9rem;
}

.wikipedia-extract-freshness {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.wikipedia-source-badge {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--color-green, #1DB000);
    letter-spacing: 1px;
}

.wikipedia-extract-divider {
    border: none;
    border-top: 1px solid rgba(29, 176, 0, 0.25);
    margin: 10px 0;
}

/* -----------------------------------------------------------------------
 * Band page: TheAudioDB per-language biography panel
 * ----------------------------------------------------------------------- */
.band-audiodb-biographies-panel {
    border-left: 3px solid var(--color-primary-yellow, #FFF80C);
}

.band-audiodb-biographies-panel .info-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.audiodb-source-badge {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--color-primary-yellow, #FFF80C);
    letter-spacing: 1px;
    font-weight: 400;
}

.audiodb-biography-entry {
    padding: 8px 0;
}

.audiodb-biography-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.audiodb-lang-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-primary-yellow, #FFF80C);
    color: #000;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.audiodb-biography-text {
    color: #ccc;
    line-height: 1.6;
    margin: 0 0 8px;
    font-size: 0.9rem;
}

.audiodb-biography-divider {
    border: none;
    border-top: 1px solid rgba(255, 248, 12, 0.2);
    margin: 10px 0;
}

/* -----------------------------------------------------------------------
 * Band page: track list with album-cover thumbnails
 * ----------------------------------------------------------------------- */
.track-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.track-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 248, 12, 0.1);
}

.track-item:last-child {
    border-bottom: none;
}

/* Square thumbnail for album art beside each track */
.track-thumb {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 1px solid var(--color-primary-yellow, #FFF80C);
    display: block;
}

/* Placeholder box when no artwork is available */
.track-thumb--placeholder {
    background: rgba(255, 248, 12, 0.07);
    border: 1px solid rgba(255, 248, 12, 0.25);
}

/* -----------------------------------------------------------------------
 * Band page: Last.fm popularity stats block
 * ----------------------------------------------------------------------- */
.lastfm-stats {
    margin-top: 12px;
}

.lastfm-stats-title {
    color: var(--color-primary-yellow, #FFF80C);
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.lastfm-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 248, 12, 0.15);
}

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

.lastfm-stat-label {
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lastfm-stat-value {
    color: var(--color-primary-yellow, #FFF80C);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Band members list — reuses the lastfm-stats panel shape */
.band-members-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.band-member-item {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 248, 12, 0.15);
}

.band-member-item:last-child {
    border-bottom: none;
}

.band-member-name {
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* -----------------------------------------------------------------------
 * Band page: album list (ALBUMS panel in right column)
 * ----------------------------------------------------------------------- */
.album-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.album-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 248, 12, 0.12);
}

.album-item:last-child {
    border-bottom: none;
}

.album-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid var(--color-primary-yellow, #FFF80C);
    display: block;
}

.album-thumb--placeholder {
    background: rgba(255, 248, 12, 0.07);
    border: 1px solid rgba(255, 248, 12, 0.25);
}

.album-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.album-title-link {
    text-decoration: none;
    color: inherit;
}

.album-title-link:hover .album-title {
    color: var(--color-interactive-green, #1DB000);
}

.album-title {
    font-size: 0.85rem;
    color: var(--color-primary-yellow, #FFF80C);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 240px;
}

.album-year {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.5px;
}

.album-track-count {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
}

/* -----------------------------------------------------------------------
 * Band/Album page: Sources and References section
 * ----------------------------------------------------------------------- */
.band-sources {
    margin-top: 24px;
}

.band-sources details summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    padding: 4px 0;
}

.band-sources details summary::-webkit-details-marker {
    display: none;
}

.band-sources details summary::before {
    content: '[+] ';
    color: var(--color-interactive-green, #1DB000);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

.band-sources details[open] summary::before {
    content: '[-] ';
}

.band-sources-links {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.band-sources-link a {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--color-interactive-green, #1DB000);
    text-decoration: underline;
    letter-spacing: 0.5px;
}

.band-sources-link a:hover {
    color: var(--color-primary-yellow, #FFF80C);
}

/* -----------------------------------------------------------------------
 * Band/Album page: footer branding
 * ----------------------------------------------------------------------- */
.band-footer-logo {
    display: flex;
    justify-content: center;
    padding: 40px 0 24px;
}

.band-footer-logo .header-home-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.band-footer-logo .header-title {
    font-size: 1.1rem;
    letter-spacing: 4px;
    color: var(--color-primary-yellow, #FFF80C);
    opacity: 0.7;
    margin: 0;
}

.band-footer-logo .header-title:hover {
    opacity: 1;
}

/* -----------------------------------------------------------------------
 * Album page: tracklist (ordered list variant)
 * ----------------------------------------------------------------------- */
.album-tracklist {
    list-style: none;
    counter-reset: track-counter;
    padding: 0;
    margin: 0;
}

.album-track-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 248, 12, 0.1);
}

.album-track-item:last-child {
    border-bottom: none;
}

.track-number {
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    min-width: 20px;
}

/* -----------------------------------------------------------------------
 * Album page: link from header to band page
 * ----------------------------------------------------------------------- */
.album-band-link {
    color: var(--color-primary-yellow, #FFF80C);
    text-decoration: underline;
    font-family: 'Courier New', monospace;
}

.album-band-link:hover {
    color: var(--color-interactive-green, #1DB000);
    text-decoration: none;
}

/* -----------------------------------------------------------------------
 * Breadcrumb navigation trail — band/album/track detail pages
 *
 * Renders a horizontal SITE > BANDS > BAND > PAGE trail just below the
 * page header.  Uses the same Courier New / yellow / green palette as
 * the rest of the retro-futuristic theme.  The separator ›› is styled
 * with a muted colour to keep the active crumb prominent.
 * ----------------------------------------------------------------------- */
.page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 6px 0 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 248, 12, 0.18);
    margin-bottom: 12px;
}

.page-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 0;
}

/* The ›› separator rendered via ::after pseudo-element */
.page-breadcrumb__item:not(:last-child)::after {
    content: '›';
    color: rgba(255, 255, 255, 0.35);
    margin: 0 6px;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
}

/* Clickable crumb links */
.page-breadcrumb__link {
    color: var(--color-primary-yellow, #FFF80C);
    text-decoration: none;
    transition: color 0.15s ease;
}

.page-breadcrumb__link:hover,
.page-breadcrumb__link:focus {
    color: var(--color-interactive-green, #1DB000);
    text-decoration: underline;
    outline: 1px dotted var(--color-interactive-green, #1DB000);
    outline-offset: 2px;
}

/* Final (current-page) crumb — not a link, muted colour */
.page-breadcrumb__current {
    color: rgba(255, 255, 255, 0.65);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile: reduce font size and allow full truncation */
@media (max-width: 600px) {
    .page-breadcrumb {
        font-size: 0.65rem;
        padding: 5px 0 6px;
    }
    .page-breadcrumb__current {
        max-width: 160px;
    }
}

/* -----------------------------------------------------------------------
 * Album page: per-source description entries
 * ----------------------------------------------------------------------- */
.album-description-entry {
    border-top: 1px solid rgba(255, 248, 12, 0.15);
    padding-top: 8px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.album-description-entry:first-child {
    border-top: none;
    padding-top: 0;
}

/* ListenBrainz release row reused from band page */
.lb-release-row {
    gap: 6px;
}

.lb-release-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.lb-release-count {
    white-space: nowrap;
}

/* 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;
    /* Prevent self-scroll; delegate scrolling to specific inner sections (e.g., previous-tracks-section) */
    overflow-y: hidden;
    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-wrapper {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    align-items: stretch;
    height: 250px;
    flex: 0 0 250px;
}

.previous-tracks-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 6px 0 6px;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    max-height: none;
    overflow: hidden;
    position: relative;
    /* Hide native scrollbar while keeping content scrollable */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.previous-tracks-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.previous-tracks-side {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    height: 100%;
}

/* Gravity video when placed next to previously on air */
.previous-tracks-side .gravity-video-container {
    width: 100%;
    height: 100%;
}

.previous-tracks-side .gravity-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 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;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* 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-grid::-webkit-scrollbar {
    display: none;
}

/* Profile / liked tracks page */
.profile-page {
    min-height: 100vh;
}

.tracks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.track-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px;
    padding: 10px;
    border: 2px solid rgba(255, 248, 12, 0.3);
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 15px rgba(255, 248, 12, 0.25);
    align-items: center;
}

.track-card .track-cover {
    width: 80px;
    height: 80px;
    background: rgba(255, 248, 12, 0.05);
    border: 1px solid rgba(255, 248, 12, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.track-card .track-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.track-cover-placeholder {
    font-size: 24px;
    color: var(--color-primary-yellow);
    opacity: 0.8;
}

.track-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.track-title {
    font-size: 14px;
    color: var(--color-secondary-white);
}

.track-subtitle {
    font-size: 11px;
    color: rgba(255, 248, 12, 0.8);
}

.track-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 248, 12, 0.35);
    background: rgba(255, 248, 12, 0.08);
    color: var(--color-secondary-white);
    font-size: 10px;
    letter-spacing: 0.5px;
}

.empty-state {
    border: 2px dashed rgba(255, 248, 12, 0.5);
    background: rgba(0, 0, 0, 0.6);
    padding: 32px;
    text-align: center;
    box-shadow: 0 0 20px rgba(255, 248, 12, 0.25);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.empty-text {
    color: var(--color-primary-yellow);
    margin-bottom: 4px;
}

.empty-description {
    color: var(--color-secondary-white);
    margin-bottom: 12px;
    opacity: 0.85;
}

/* 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 auto;
    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;
}

.now-playing-right-column {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 2;
}

.now-playing-like {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    align-self: stretch;
    height: 100%;
    row-gap: 4px;
}

.like-button {
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-primary-yellow);
    background: rgba(0, 0, 0, 0.6);
    color: var(--color-primary-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), background var(--transition-speed);
    box-shadow: 0 0 8px rgba(255, 248, 12, 0.25);
}

.like-button svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.like-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(255, 248, 12, 0.45);
}

.like-button.is-active {
    background: rgba(29, 176, 0, 0.25);
    color: var(--color-secondary-green);
    box-shadow: 0 0 10px rgba(29, 176, 0, 0.5);
}

.like-button.is-loading {
    opacity: 0.65;
    cursor: wait;
}

.like-button.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
    box-shadow: 0 0 4px rgba(255, 248, 12, 0.12);
    background: rgba(0, 0, 0, 0.35);
}

.like-button.is-hidden {
    display: none;
}

.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;
    margin-top: 10px;
    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;
    /* Let JS-calculated pixel size stay intact */
    width: auto;
    height: auto;
    object-fit: contain;
}

.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);
    /* Hide yellow border until the video is confirmed loaded */
    border: 1px solid transparent;
    overflow: hidden;
    width: auto;
    min-width: 0;
}

.gravity-video-container.is-loaded {
    border-color: rgba(255, 248, 12, 0.3);
}

.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;
    left: 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;
    }
}

/* Rework header to flex layout while keeping date/time visible down to tablet widths */
@media (max-width: 1100px) {
    .datetime-block {
        display: flex;
        order: 2;
        flex: 0 1 auto;
        align-items: center;
    }
    
    /* 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;
        flex-wrap: wrap;
    }
    
    /* Left element: header-content (logo + title) */
    .header-content {
        flex: 0 1 auto;
        justify-content: flex-start;
        order: 1;
    }
    
    /* 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;
        order: 3;
    }
    
    /* 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;
    max-height: 250px;
}

.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-top: 10px;
    font-size: 75%;
}

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

.post-action-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    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: 0.82rem;
    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;
    min-width: 0;
}

/* Ensure pixel-text post action buttons use consistent sizing across breakpoints */
.post-action-button.pixel-text {
    font-size: 0.75rem !important;
    padding: 5px 5px !important;
}

.right-column .post-action-button {
    flex: 1 1 calc(50% - 8px);
}

.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);
}

/* Disabled state for post action buttons (e.g., Submit when unauthenticated) */
.post-action-button--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.6);
    text-shadow: none;
}

.post-action-button--disabled:hover,
.post-action-button--disabled:active {
    background: rgba(255, 248, 12, 0.1);
    box-shadow: none;
    transform: none;
}

.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: none;
    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%;
    /* 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;
    max-height: 250px;
}

.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(-1 * var(--scroll-distance, 0px))); }
}

@keyframes scrollUp {
    from { transform: translateY(calc(-1 * var(--scroll-distance, 0px))); }
    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 */
    /* Keep a stable 9:16 (1080x1920) placeholder while the video loads */
    aspect-ratio: 16 / 9;
    width: 100%;
}

.video-start-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    z-index: 20;
    text-align: center;
    padding: 20px;
    overflow: hidden;
}

.video-start-overlay::before,
.video-start-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.video-start-overlay::before {
    background: rgba(0, 0, 0, 0.65);
}

.video-start-overlay.has-thumbnail::before {
    background-image: var(--start-thumbnail-url);
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    transform: scale(1.05);
}

.video-start-overlay::after {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45),
        rgba(0, 0, 0, 0.7)
    );
}

.video-start-button {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid var(--color-primary-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 248, 12, 0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    z-index: 1;
}

.video-start-button:hover {
    transform: scale(1.04);
    box-shadow: 0 0 16px rgba(255, 248, 12, 0.8);
    background: rgba(0, 0, 0, 0.65);
}

.video-start-button:active {
    transform: scale(0.98);
}

.video-play-icon {
    display: block;
    width: 32px;
    height: 32px;
    font-size: 32px;
    line-height: 1;
    color: var(--color-primary-yellow);
    text-shadow: 0 0 8px rgba(255, 248, 12, 0.85);
    margin-left: 2px; /* Slight nudge to center the triangle visually */
}

.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;
}

/* Haha overlay fade effects */
#haha-overlay {
    opacity: 0;
    transition: opacity 0.5s ease;
}

#haha-overlay.is-visible {
    opacity: 1;
}

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

/* Tablets and smaller devices (up to 1024px) */
@media screen and (max-width: 1024px) {
    html, body {
        overflow-x: hidden;
    }
    
    /* Stack band columns on tablets */
    .band-layout .layout-wrapper {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .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 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;
    }

    /* Stack band columns and ensure visibility on mobile */
    .band-layout .layout-wrapper {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .band-layout .left-column,
    .band-layout .center-column,
    .band-layout .right-column {
        display: block;
        width: 100%;
    }
    .band-photo {
        max-width: 100%;
    }

    /* 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 {
        /* Keep scrolling delegated to child sections; avoid container scrollbar */
        overflow-y: hidden;
    }

    .previous-tracks-section {
        /* Keep consistent height across breakpoints to match large screens */
        max-height: 200px;
        overflow-y: auto;
    }

    /* Hide side video when layout collapses to single column */
    .previous-tracks-side {
        width: 0;
    }

    .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;
    }

    /* Keep band page columns visible on mobile */
    .band-layout .left-column,
    .band-layout .center-column,
    .band-layout .right-column {
        display: block !important;
        width: 100% !important;
        min-width: 100% !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: hidden;      /* 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;
    }
    
    /* 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: 250px;
    }
    
    .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: 250px;
    }
    
    .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 */
    }
}

/* ============================================
   BAND DETAIL PAGE — MOBILE RESPONSIVE STYLES
   (Only .band-* and .band-layout selectors are
   modified here; radio.html selectors are untouched.)
   ============================================ */

/* Tablets (≤768px): compress headings and thumbnails */
@media screen and (max-width: 768px) {
    /* Scale down info-panel headings inside the band layout */
    .band-layout .info-panel-title {
        font-size: 0.85rem;
        letter-spacing: 1px;
    }

    /* Reduce album thumbnail size so rows stay compact in single-column view */
    .band-layout .album-thumb {
        width: 32px;
        height: 32px;
    }

    /* Reduce track thumbnail size to match album thumb on mobile */
    .band-layout .track-thumb {
        width: 26px;
        height: 26px;
    }

    /* Band photo: remove fixed padding so image fills full width cleanly */
    .band-layout .band-photo {
        padding: 6px;
    }

    /* LLM panel: tighten internal padding */
    .band-layout .band-llm-panel {
        padding: 12px;
    }

    /* Wikipedia and AudioDB biographies: allow wrapping badge rows */
    .band-wikipedia-badges,
    .band-audiodb-biographies-panel .info-panel-title {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Member list: reduce spacing between entries */
    .band-members-list {
        gap: 4px;
    }

    /* Sources section summary: smaller text on mobile */
    .band-sources details summary {
        font-size: 0.8rem;
    }

    /* Extra metadata items: smaller text */
    .band-extra-item {
        font-size: 0.85rem;
    }
}

/* Small phones (≤480px): further reduce band page elements */
@media screen and (max-width: 480px) {
    /* Heading becomes very compact on small phones */
    .band-layout .info-panel-title {
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

    /* Further shrink thumbnail sizes */
    .band-layout .album-thumb {
        width: 28px;
        height: 28px;
    }

    .band-layout .track-thumb {
        width: 22px;
        height: 22px;
    }

    /* Tighten info panel padding on very small screens */
    .band-layout .info-panel {
        padding: 10px;
    }

    /* Extra item font size: minimum readable size */
    .band-extra-item {
        font-size: 0.78rem;
    }

    /* Band name heading (pixel-text h1 in band header) */
    .band-page .header-title {
        font-size: clamp(0.7rem, 4vw, 1rem);
        letter-spacing: 2px;
    }

    /* Wikipedia edition badges: smaller on tiny screens */
    .band-wikipedia-badge {
        font-size: 0.6rem;
        padding: 1px 4px;
    }

    /* Sources link text: fit on one line */
    .band-sources-link a {
        font-size: 0.75rem;
    }
}

/* ============================================
   ALBUM DETAIL PAGE — MOBILE RESPONSIVE STYLES
   (Only .album-* and .band-layout selectors
   scoped to album-specific elements are modified
   here; radio.html selectors are untouched.)
   ============================================ */

/* Tablets and phones (≤768px): stack three columns to single column */
@media screen and (max-width: 768px) {
    /* Ensure the album page header breadcrumb ("BY: BandName / YEAR: 2020")
       wraps gracefully instead of overflowing the viewport. */
    .band-page .band-meta.header-info-block {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    /* Album band link in header: keep it readable at small size */
    .album-band-link {
        font-size: 0.85rem;
    }

    /* Tracklist: allow title text to wrap rather than overflow */
    .album-track-item {
        flex-wrap: wrap;
        gap: 2px 6px;
        align-items: baseline;
    }

    /* Track title (pixel-text span): wrap long names */
    .album-track-item .track-title {
        white-space: normal;
        word-break: break-word;
        flex: 1 1 auto;
    }

    /* Track duration: stay on the same line if space allows, otherwise wrap */
    .album-track-item .track-duration {
        flex-shrink: 0;
        font-size: 0.7rem;
    }

    /* Per-source description entries: slightly tighter padding */
    .album-description-entry {
        padding-top: 6px;
        margin-top: 2px;
    }

    /* Cover art placeholder text: scale down inside fixed-height box */
    .band-layout .band-photo.placeholder .pixel-text {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    /* ListenBrainz / Last.fm stat rows in left column: wrap on overflow */
    .lastfm-stat-row {
        flex-wrap: wrap;
        gap: 2px;
    }

    /* LB release name in top-recordings panel: allow wrapping */
    .lb-release-name {
        white-space: normal;
        word-break: break-word;
        flex: 1 1 0;
        min-width: 0;
    }

    /* Album sources section: slightly smaller summary text */
    .album-sources details summary {
        font-size: 0.8rem;
    }

    /* Sources links list: smaller font on narrow screens */
    .album-sources .band-sources-links a {
        font-size: 0.78rem;
    }
}

/* Small phones (≤480px): further tighten album page elements */
@media screen and (max-width: 480px) {
    /* Tracklist track numbers: minimal width to reclaim space */
    .album-track-item .track-number {
        min-width: 16px;
        font-size: 0.68rem;
    }

    /* Tighten tracklist row padding on tiny screens */
    .album-track-item {
        padding: 4px 0;
    }

    /* Stat panel headings: compact */
    .lastfm-stats-title {
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

    /* Stat row label/value: shrink text slightly */
    .lastfm-stat-label,
    .lastfm-stat-value {
        font-size: 0.72rem;
    }

    /* Album description provenance row: wrap at smallest widths */
    .llm-provenance {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Album page header title: clamp to viewport width */
    .band-page .header-title {
        font-size: clamp(0.55rem, 3.5vw, 0.9rem);
    }

    /* Band credits list items: tighten spacing */
    #album-credits .band-member-item {
        font-size: 0.78rem;
        gap: 2px;
    }
}

/* 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; }
}

/* -----------------------------------------------------------------------
 * Bilingual section heading: Belarusian (BE) subtitle below the EN heading.
 * Used on band/album/track detail pages to honour the EN + BE bilingual
 * requirement from CLAUDE.md without altering the primary pixel-text style.
 * ----------------------------------------------------------------------- */
.panel-title-be {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--color-interactive-green, #1DB000);
    text-transform: uppercase;
    margin-top: 2px;
    opacity: 0.85;
    line-height: 1.2;
}

/* When the heading is an h3 (sidebar panels) the BE label is slightly smaller */
h3 .panel-title-be {
    font-size: 0.55rem;
}

/* -----------------------------------------------------------------------
 * Global navigation bar — rendered on all public non-index pages between
 * the page header and the breadcrumb / main content.
 *
 * Links: BANDS / ГУРТЫ · ALBUMS / АЛЬБОМЫ · SEARCH / ПОШУК
 * Theme: horizontal strip, yellow text on black, green hover, no rounded
 * corners, Retron2000 font for labels, uppercase.
 * ----------------------------------------------------------------------- */
/* AI-642: Skip-to-content link (WCAG 2.4.1 "Bypass Blocks").
   Encyclopedia detail pages stack two nav bars plus decorative background
   effects before the main content, so keyboard / screen-reader users need a
   way to jump straight to the article body. The anchor is the first focusable
   element in <body> and is positioned off-screen until it receives keyboard
   focus, at which point it slides into view as a themed pixel chip (yellow on
   black, Courier New, square corners — no rounded edges per the theme rules).
   It is intentionally not display:none / visibility:hidden so it remains
   reachable by Tab and announced by assistive tech. */
.skip-to-content {
    position: absolute;
    left: 8px;
    top: -48px; /* hidden above the viewport until focused */
    z-index: 1000;
    padding: 8px 14px;
    background: #FFF80C; /* CTA yellow */
    color: #000000;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #000000;
    border-radius: 0; /* honour no-rounded-corners theme rule */
    transition: top 0.15s ease-in-out;
}

.skip-to-content:focus {
    top: 8px; /* slide into the top-left corner on focus */
    outline: 2px solid #1DB000; /* interactive-green focus ring */
}

/* Belarusian sub-label inside the skip link, shown on the same line. */
.skip-to-content__be {
    margin-left: 6px;
    color: #1DB000;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0;
    background: #000;
    border-bottom: 1px solid rgba(255, 248, 12, 0.25);
    border-top: 1px solid rgba(255, 248, 12, 0.08);
    padding: 0;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.site-nav__link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 20px;
    font-family: 'Retron2000', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFF80C;
    text-decoration: none;
    border-right: 1px solid rgba(255, 248, 12, 0.1);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.site-nav__link:last-child {
    border-right: none;
}

.site-nav__link:hover,
.site-nav__link:focus {
    background: #0d0d0d;
    color: #1DB000;
    outline: none;
}

/* Active state: the current section is highlighted with green underline */
.site-nav__link--active {
    color: #1DB000;
    border-bottom: 2px solid #1DB000;
}

/* Bilingual label below the EN title */
.site-nav__be {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 1px;
    line-height: 1;
}

.site-nav__link:hover .site-nav__be,
.site-nav__link:focus .site-nav__be {
    color: rgba(29, 176, 0, 0.65);
}

.site-nav__link--active .site-nav__be {
    color: rgba(29, 176, 0, 0.55);
}

/* Mobile: tighten horizontal padding so all three links fit without scrolling */
@media (max-width: 480px) {
    .site-nav__link {
        padding: 7px 14px;
        font-size: 0.7rem;
    }
    .site-nav__be {
        font-size: 0.5rem;
    }
}

/* ======================================================================
   PERFORMANCE OPTIMIZATIONS (appended)
   ----------------------------------------------------------------------
   The ZOLAK index is intentionally effects-heavy on desktop, but the
   full-screen decorative overlays and the dozens of sub-second infinite
   glitch/jitter/flicker animations pegged the GPU and CPU on small / low
   power devices. The rules below strip the perpetual decorative motion on
   small screens, touch devices, and for users who ask for reduced motion,
   while keeping functional motion (the news ticker scroll and loading
   spinners). Appended last so it overrides earlier rules by source order.
   ====================================================================== */

/* --- Users who explicitly request reduced motion: kill ALL motion. ----- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        -webkit-animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    /* The whole .bg-effects stack is purely decorative — drop it entirely. */
    .bg-effects { display: none !important; }
}

/* --- Small screens & touch devices: strip perpetual decorative motion. -- */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    /* 8 full-viewport fixed overlays each running an infinite animation
       (scanlines repaint at 0.1s, static glitch 0.3s, noise, chromatic
       aberration, holographic shimmer, …). This is the single biggest GPU
       drain on phones and adds zero functional value — remove it. */
    .bg-effects { display: none !important; }

    /* Disable every perpetual decorative animation. The :not() carve-outs
       below re-enable the handful of functional ones. */
    *, *::before, *::after {
        animation: none !important;
        -webkit-animation: none !important;
    }

    /* Drop expensive compositor work that does not animate but is costly to
       paint on low-end GPUs when combined with everything else. */
    .header-title::before,
    .header-title::after,
    .saying-text::before,
    .saying-text::after { display: none !important; }

    /* --- Re-enable FUNCTIONAL motion only --- */

    /* News ticker has to scroll to be readable. */
    .news-ticker-content {
        animation: scroll-left-slow 240s linear infinite !important;
        -webkit-animation: scroll-left-slow 240s linear infinite !important;
    }

    /* Loading spinners convey state — keep them spinning. */
    .loading-spinner,
    .album-cover-spinner,
    .loading-icon {
        animation: spin 1s linear infinite !important;
        -webkit-animation: spin 1s linear infinite !important;
    }
    .zianon-spinner {
        animation: zianon-spin 0.8s linear infinite !important;
        -webkit-animation: zianon-spin 0.8s linear infinite !important;
    }
}