/* ==============================================
   SEQUENZ 1: DER HINTERGRUND WIRD KOMPLETT HELL
============================================== */
.terminal-fixed-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url("/img/commandcentral.webp") center/cover no-repeat;
    z-index: 1;
    filter: brightness(0);
    transition: filter 1.5s ease 0.3s;
}

body.gates-open .terminal-fixed-bg {
    filter: brightness(1);
}

/* ==============================================
   KINO-FOKUS: TERMINAL VERSCHWOMMEN ZU KLAR (commandcentral.css)
============================================== */
#terminal-history {
    /* FIXED oder ABSOLUTE funktioniert hier beides, 
       aber FIXED ist am PC sicherer gegen Layout-Verschiebungen */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;

    /* DIE HEILIGE GRENZE: Nutzt die 80px vom PC-Root */
    bottom: var(--footer-height) !important;
    height: auto !important;

    /* WICHTIG: Muss ÜBER dem Background (z-index 1) liegen */
    z-index: 20 !important;

    /* Deine Animationen */
    opacity: 0;
    filter: blur(25px) brightness(0.1);
    transform: scale(0.95);
    transition:
        opacity 1.2s ease,
        filter 1.2s ease,
        transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);

    display: block; /* Sicherstellen, dass es kein d-none Konflikt gibt */
    overflow: hidden;
}

/* Damit die Spalten auch wirklich die volle Höhe nutzen */
.terminal-grid {
    display: flex;
    width: 100%;
    height: 100%;
}

body.gates-open #terminal-history {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1);
    transition-delay: 0.8s;
}

/* Das Raster */
.terminal-grid {
    display: flex;
    width: 100%;
    height: 100%;
}

.terminal-column {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Die Boxen (UNTEN VERANKERT & KOMPAKT) */
.terminal-col-list {
    position: absolute;
    bottom: 3%;
    height: 40%;
    width: 85%;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ==============================================
   FARBIGE SCROLLBARS (Pro Spalte)
============================================== */
.mobile-list-container.col-orange,
.col-orange .terminal-col-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 106, 0, 0.4) transparent;
}

.mobile-list-container.col-purple,
 .col-purple .terminal-col-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(188, 19, 254, 0.4) transparent;
}
.mobile-list-container.col-green,
.col-green .terminal-col-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(121, 169, 72, 0.4) transparent;
}

.mobile-list-container,
.terminal-col-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
    list-style: none;
    margin: 0;
}
.mobile-list-container::-webkit-scrollbar,
.terminal-col-scroll::-webkit-scrollbar {
    width: 4px;
}
.mobile-list-container::-webkit-scrollbar-track ,
.terminal-col-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-list-container.col-orange::-webkit-scrollbar-thumb,
.col-orange .terminal-col-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 106, 0, 0.4);
    border-radius: 10px;
}
.mobile-list-container.col-orange::-webkit-scrollbar-thumb:hover,
.col-orange .terminal-col-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 106, 0, 0.8);
}

.mobile-list-container.col-purple::-webkit-scrollbar-thumb,
.col-purple .terminal-col-scroll::-webkit-scrollbar-thumb {
    background: rgba(188, 19, 254, 0.4);
    border-radius: 10px;
}
.mobile-list-container.col-purple::-webkit-scrollbar-thumb:hover ,
.col-purple .terminal-col-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(188, 19, 254, 0.8);
}

.mobile-list-container.col-green::-webkit-scrollbar-thumb,
.col-green .terminal-col-scroll::-webkit-scrollbar-thumb {
    background: rgba(121, 169, 72, 0.4);
    border-radius: 10px;
}
.mobile-list-container.col-green::-webkit-scrollbar-thumb:hover ,
.col-green .terminal-col-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(121, 169, 72, 0.8);
}

/* Die Items (Text & Cover) */
.terminal-list-item {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.25s ease;
}
.col-orange .terminal-list-item:hover {
    transform: scale(1.06);
    background: rgba(97, 63, 0, 0.23);
}
.col-green .terminal-list-item:hover {
    transform: scale(1.06);
    background: rgba(12, 68, 0, 0.24);
}
.col-purple .terminal-list-item:hover {
    transform: scale(1.06);
    background: rgba(65, 0, 97, 0.33);
}

.item-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.item-content .meta {
    font-family: "Orbitron", sans-serif;
    font-size: 0.6rem;
    color: #ffffff;
    opacity: 0.5;
    margin-bottom: 2px;
}
.item-content .title-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: #ffffff !important;
    transition: 0.2s;
}

.small-cover {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 2px;
    margin-right: 15px;
    filter: saturate(0.5) brightness(0.7);
    transition: all 0.3s ease;
}

/* Hover Effekte */
.col-orange .terminal-list-item:hover .title-text {
    color: var(--orange-color) !important;
    text-shadow: 0 0 8px var(--orange-color);
}
.col-purple .terminal-list-item:hover .title-text {
    color: #ff4dff !important;
    text-shadow: 0 0 10px #ff4dff;
}
.col-green .terminal-list-item:hover .title-text {
    color: var(--brand-green) !important;
    text-shadow: 0 0 8px var(--brand-green);
}
.terminal-list-item:hover .meta {
    opacity: 0.8;
}
.terminal-list-item:hover .small-cover {
    filter: saturate(1.2) brightness(1.1);
}


/* ==============================================
	TABELLEN HINTERGRUNDFARBE
============================================== */

.col-orange .terminal-col-list, .mobile-list-container.col-orange {
	background: linear-gradient(135deg, rgba(15, 8, 0, 0.96), rgba(30, 12, 0, 0.92)) !important;	
	border: 1.8px solid rgba(255, 92, 0, 0.73) !important;
	animation: pulse-orange 3.5s infinite ease-in-out !important;
}
.col-purple .terminal-col-list, .mobile-list-container.col-purple {
	background: linear-gradient(135deg, rgba(12, 0, 15, 0.96), rgba(25, 0, 35, 0.92)) !important;
	border: 1.8px solid rgba(175, 0, 243, 0.73) !important;
	animation: pulse-purple 3.5s infinite ease-in-out !important;
}	
.col-green .terminal-col-list, .mobile-list-container.col-green {
	background: linear-gradient(135deg, rgba(5, 10, 5, 0.96), rgba(10, 25, 10, 0.92)) !important;
	border: 1.8px solid rgba(45, 213, 0, 0.73) !important;
	animation: pulse-green 3.5s infinite ease-in-out !important;
}



.col-purple .terminal-col-list {
	animation-delay: 1.1s !important;
}

.col-green .terminal-col-list {
	animation-delay: 2.2s !important;
}

/* ==============================================
   Beleuchtete Elemente (ATMUNGS-EFFEKT)
============================================== */

.col-orange .terminal-col-list {
    animation: pulse-orange 4s infinite ease-in-out;
}
.col-purple .terminal-col-list {
    animation: pulse-purple 4s infinite ease-in-out 1.3s;
}
.col-green .terminal-col-list {
    animation: pulse-green 4s infinite ease-in-out 2.6s;
}

.btn-go-midtempo {
    animation: pulse-orange 4s infinite ease-in-out;
}
.btn-go-dmt1,
.btn-go-dmt2 {
    animation: pulse-purple 4s infinite ease-in-out;
}
.btn-go-gigs {
    animation: pulse-green 4s infinite ease-in-out;
}


/* Verstärkter Glow beim Klick */
.btn-go-midtempo.button-clicked {
    box-shadow:
        0 0 25px rgba(255, 106, 0, 1),
        inset 0 0 25px rgba(255, 106, 0, 0.8) !important;
    border-color: #ff8a2f !important;
    transition: all 0.1s ease !important;
    
}

.btn-go-dmt1.button-clicked,
.btn-go-dmt2.button-clicked, #open-gates-btn.button-clicked {
    box-shadow:
        0 0 25px rgba(188, 19, 254, 1),
        inset 0 0 25px rgba(188, 19, 254, 0.8) !important;
    border-color: #c635ff !important;
    transition: all 0.1s ease !important;
}

.btn-go-gigs.button-clicked {
    box-shadow:
        0 0 25px rgba(121, 169, 72, 1),
        inset 0 0 25px rgba(121, 169, 72, 0.8) !important;
    border-color: #9aff40 !important;
    transition: all 0.1s ease !important;

}

/* Statischer Basis-Glow für Mobile */
.btn-go-midtempo {
    border-color: rgb(255, 93, 1) !important;
    filter: drop-shadow(1px -1px 1px #ff8a00ff);
    box-shadow:
        0 0 5px #ff8400c4,
        inset 0 0 2px #923c00bf;
}

.btn-go-dmt1, .btn-go-dmt2, #open-gates-btn {
    border-color: #8e00ffff !important;
    filter: drop-shadow(1px -1px 3px #c900ffff);
    box-shadow:
        0 0 5px #3b00539e,
        inset 0 0 2px #8600c7f4;
}

.btn-go-gigs {
    border-color: rgb(23, 171, 0)  !important;
    filter: drop-shadow(1px -1px 4px #19ff00ff);
    box-shadow:
        0 0 5px rgba(121, 169, 72, 0.4),
        inset 0 0 2px rgba(121, 169, 72, 0.2);
}

/* ==============================================
   TABLET & HOCHFORMAT OPTIMIERUNGEN
============================================== */

/* 1. Generelle Tablet-Anpassung für die Listen (Abstände) */
@media (min-width: 768px) and (max-width: 1024px) {
    .terminal-col-list {
        bottom: 6%;
        height: 32%;
    }
}

/* 2. Spezielles Hintergrundbild: IMMER wenn das Format hochkant ist (Breite egal!) */
@media (min-width: 768px) and (orientation: portrait) {
    .terminal-fixed-bg {
        /* top center sorgt dafür, dass die Schrift oben bleibt! */
        background: url("/img/tabletcentral_vertical.webp") top center / cover no-repeat !important;
    }
    
  

    .terminal-col-list {
        bottom: 8%;
    }
}