/* Linda Movie Night — Discord Activity Player */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-dark: #0a0a0f;
    --bg-surface: #13131a;
    --bg-elevated: #1a1a24;
    --text-primary: #e4e4ed;
    --text-secondary: #8888a0;
    --accent: #7c6aef;
    --accent-glow: rgba(124, 106, 239, 0.3);
}

html, body {
    height: 100%; width: 100%; overflow: hidden;
    background: var(--bg-dark); color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#app { width: 100%; height: 100%; display: flex; flex-direction: column; }

.loading-screen {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; gap: 1.5rem;
}
.loading-screen p { font-size: 1.1rem; color: var(--text-secondary); }

.spinner {
    width: 48px; height: 48px;
    border: 3px solid var(--bg-elevated); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.8s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#player-container { display: flex; flex-direction: column; height: 100%; width: 100%; }

#title-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1.25rem; background: var(--bg-surface);
    border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
#title-bar h1 {
    font-size: 1rem; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%;
}

.btn-icon {
    background: var(--bg-elevated); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary); padding: 0.35rem 0.65rem; border-radius: 6px;
    cursor: pointer; font-size: 0.8rem; font-weight: 700; transition: all 0.2s ease;
}
.btn-icon:hover { background: rgba(124,106,239,0.15); color: var(--accent); border-color: var(--accent); }
.btn-icon.active { background: var(--accent); color: white; border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }

#video-wrapper {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: #000; overflow: hidden;
}
#video-player { width: 100%; height: 100%; object-fit: contain; background: #000; }

video::cue {
    background: rgba(0,0,0,0.75); color: white; font-size: 1.1rem;
    font-family: 'Inter', sans-serif; padding: 0.25em 0.5em; border-radius: 4px;
}

.error-content {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; gap: 1rem; text-align: center; padding: 2rem;
}
.error-icon { font-size: 3rem; }
.error-content h2 { font-size: 1.3rem; }
.error-content p { color: var(--text-secondary); font-size: 0.95rem; max-width: 400px; }

.hidden { display: none !important; }