:root {
    --cyan: #00f2ff;
    --danger: #ff4444;
    --dark: #050505;
    --glass: rgba(0, 242, 255, 0.1);
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--dark);
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    overflow-x: hidden;
}

/* CRT Overlay pro celý web */
.crt-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 255, 0, 0.03));
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
    z-index: 100;
}

/* Navigace */
.main-nav {
    position: fixed;
    top: 0; width: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: space-between;
    padding: 20px 50px;
    border-bottom: 1px solid var(--cyan);
    z-index: 90;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.main-nav a {
    color: var(--cyan);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

/* Sekce */
section {
    min-height: 100vh;
    padding: 100px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero {
    background: radial-gradient(circle, #111 0%, #000 100%);
    text-align: center;
}

.interface-box {
    background: var(--glass);
    padding: 40px;
    border: 1px solid var(--cyan);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.2);
    border-radius: 15px;
}

.banana-entity {
    font-size: 8rem;
    margin: 40px 0;
    filter: drop-shadow(0 0 20px gold);
    transition: all 0.5s ease;
}

.content-wrapper {
    max-width: 800px;
    width: 100%;
}

h2 {
    color: var(--cyan);
    font-size: 3rem;
    border-left: 5px solid var(--cyan);
    padding-left: 20px;
    margin-bottom: 40px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card {
    background: #111;
    padding: 20px;
    border: 1px solid #333;
}

.danger {
    background-color: #1a0000;
    color: var(--danger);
}

.danger h2 { border-left-color: var(--danger); color: var(--danger); }

/* Animace banánu ze starého kódu */
.green { filter: hue-rotate(90deg); }
.brown { filter: sepia(1.5) brightness(0.5); }
.glitch { animation: glitch 0.1s infinite; }

@keyframes glitch {
    0% { transform: translate(1px); }
    100% { transform: translate(-1px); }
}

input[type="range"] { width: 100%; margin-top: 20px; }