:root { --main: #00f2ff; --bg: #000; }
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--bg); color: white;
    font-family: 'Segoe UI', sans-serif; display: flex;
    height: 100vh; overflow: hidden; flex-direction: row;
}

/* Sidebar canali */
#sidebar {
    width: 260px; background: #111; display: flex;
    flex-direction: column; border-right: 1px solid #333;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100; flex-shrink: 0;
}
.brand { padding: 25px 15px; text-align: center; border-bottom: 1px solid #333; }
.brand h1 { font-size: 0.9rem; letter-spacing: 3px; color: var(--main); margin: 0; text-shadow: 0 0 10px var(--main); }
.menu { padding: 15px; flex-grow: 1; overflow-y: auto; }
.btn {
    width: 100%; padding: 14px; margin-bottom: 10px; background: rgba(255,255,255,0.02);
    border: 1px solid #333; color: #888; cursor: pointer; border-radius: 6px;
    text-align: left; font-size: 13px; font-weight: 600; transition: 0.2s;
}
.btn:hover, .btn:focus-visible { border-color: var(--main); color: #fff; }
.btn.active { background: var(--main); color: #000; border-color: #fff; font-weight: bold; }
.btn span { margin-right: 10px; opacity: 0.5; font-family: monospace; }

/* Schermo */
#tv-viewport {
    flex-grow: 1; display: flex; align-items: center;
    justify-content: center; background: #000; position: relative;
}
.video-container { width: 100%; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

#channel-message {
    position: absolute; inset: 0; margin: 0; z-index: 15;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    color: var(--main); font-family: monospace; letter-spacing: 2px; text-align: center;
}
#channel-message[hidden] { display: none; }

/* Disturbo durante la sintonizzazione (solo CSS, niente GIF esterne) */
#noise {
    position: absolute; inset: 0; pointer-events: none; z-index: 20;
    opacity: 0; transition: opacity 0.2s;
    background: repeating-linear-gradient(0deg, #1a1a1a 0 2px, #4a4a4a 2px 4px);
}
#scanlines {
    position: absolute; inset: 0; pointer-events: none; z-index: 10;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
    background-size: 100% 3px;
}
.info-bar {
    position: absolute; bottom: 20px; right: 20px; font-family: monospace; font-size: 11px;
    color: var(--main); z-index: 30; background: rgba(0,0,0,0.5); padding: 5px;
}

/* Mobile: canali in alto, si nascondono da soli */
@media (max-width: 768px) {
    #sidebar {
        position: absolute; top: 0; left: 0; width: 100%;
        height: auto; border-right: none; border-bottom: 1px solid var(--main);
        transform: translateY(0);
    }
    #sidebar.hidden { transform: translateY(-100%); }
    .menu { display: flex; overflow-x: auto; gap: 10px; padding: 10px; scrollbar-width: none; }
    .menu::-webkit-scrollbar { display: none; }
    .btn { width: auto; white-space: nowrap; margin-bottom: 0; padding: 10px 15px; }
    .brand { display: none; }
}