/* Baun & Fox Cinema — Premium Dark Cinema Theme */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

/* =====================================================
   Design tokens — single theme, no selector needed
   ===================================================== */
:root {
    /* Gold palette */
    --gold:            #c8962c;
    --gold-bright:     #e8b84b;
    --gold-dim:        #8a6420;
    --crimson:         #7a1c1c;
    --amber:           #96701e;

    /* Surface hierarchy — warm dark blacks */
    --bg-primary:      #080706;
    --bg-secondary:    #100e0c;
    --bg-tertiary:     #1b1814;
    --bg-theater:      #0a0807;
    --bg-cinema:       #000000;

    /* Typography */
    --text-primary:    #ede8dc;
    --text-secondary:  #9a8a72;
    --text-dim:        #5a4f42;

    /* Backward-compat aliases */
    --cyber-primary:   var(--gold);
    --cyber-secondary: var(--crimson);
    --cyber-accent:    var(--amber);
    --cyber-gold:      var(--gold-bright);
    --cyber-red:       var(--crimson);
    --cyber-border:    rgba(200, 150, 44, 0.18);

    /* Shadows */
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.5);
    --shadow-md:      0 4px 20px rgba(0,0,0,0.55);
    --shadow-lg:      0 8px 40px rgba(0,0,0,0.65);
    --shadow-glow:    0 0 20px rgba(200,150,44,0.35), 0 0 40px rgba(200,150,44,0.12);
    --shadow-theater: 0 0 36px rgba(200,150,44,0.12), 0 0 72px rgba(122,28,28,0.08);

    /* Spacing scale (4-based) */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 3rem;      /* 48px */
    --space-8: 4rem;      /* 64px */

    /* Radii */
    --radius-sm:   3px;
    --radius-md:   6px;
    --radius-lg:   12px;
    --radius-pill: 999px;

    /* Type scale */
    --text-2xs: 0.65rem;   /* 10.4px - lozenge labels */
    --text-xs:  0.72rem;   /* 11.5px - meta */
    --text-sm:  0.85rem;   /* 13.6px - body small */
    --text-md:  0.95rem;   /* 15.2px - body */
    --text-lg:  1.05rem;   /* 16.8px - h3 */
    --text-xl:  1.25rem;   /* 20px   - h2 */
    --text-2xl: 1.6rem;    /* 25.6px - h1 */
    --text-3xl: 2rem;      /* 32px   - display */

    /* Transitions */
    --t-fast: 120ms ease;
    --t-base: 180ms ease;
    --t-slow: 280ms ease;

    /* Borders */
    --border-subtle:  1px solid rgba(200, 150, 44, 0.12);
    --border-default: 1px solid rgba(200, 150, 44, 0.22);
    --border-strong:  1px solid var(--gold-dim);

    /* Focus ring — gold, never clipped */
    --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--gold);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Warm screen-glow radiating from top — feels like a lit cinema room */
    background: radial-gradient(ellipse at 50% 0%, #1c1408 0%, var(--bg-primary) 65%);
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--text-primary);
}

/* =====================================================
   Landing page (index.html)
   ===================================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

header {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 3rem;
    padding: 3rem 0;
    position: relative;
}

header h1 {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 3rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    letter-spacing: 3px;
}

header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.action-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.card {
    background: var(--bg-tertiary);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(200, 150, 44, 0.12);
    text-align: center;
    transition: all 0.25s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(200, 150, 44, 0.3);
}

.card h2 {
    color: var(--gold);
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-family: 'Cinzel', Georgia, serif;
}

.card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.card input {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(200, 150, 44, 0.2);
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    transition: all 0.2s;
}

.card input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(200, 150, 44, 0.2);
}

.card input::placeholder {
    color: var(--text-dim);
}

/* =====================================================
   Buttons
   ===================================================== */
.btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold-dim), var(--gold));
    color: var(--bg-cinema);
    box-shadow: 0 2px 12px rgba(200, 150, 44, 0.3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-bright));
    box-shadow: 0 4px 20px rgba(200, 150, 44, 0.5);
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(200, 150, 44, 0.1);
    border: 1px solid rgba(200, 150, 44, 0.3);
    color: var(--gold);
    font-weight: 600;
}

.btn-secondary:hover {
    background: rgba(200, 150, 44, 0.2);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(200, 150, 44, 0.2);
}

/* Small utility buttons throughout the UI */
.btn-small {
    padding: 0.35rem 0.8rem;
    font-size: 0.72rem;
    border: 1px solid rgba(200, 150, 44, 0.3);
    border-radius: 4px;
    cursor: pointer;
    background: rgba(200, 150, 44, 0.07);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.btn-small:hover {
    background: rgba(200, 150, 44, 0.14);
    border-color: var(--gold);
    color: var(--gold-bright);
    box-shadow: 0 0 8px rgba(200, 150, 44, 0.2);
}

#showLibraryBtn {
    border-color: rgba(200, 150, 44, 0.4);
    color: var(--gold);
    margin-left: 0.5rem;
}

#showLibraryBtn:hover {
    background: rgba(200, 150, 44, 0.15);
    box-shadow: 0 0 10px rgba(200, 150, 44, 0.3);
}

.btn-danger {
    border-color: rgba(122, 28, 28, 0.5);
    background: rgba(122, 28, 28, 0.08);
    color: #fad6d6;
}

.btn-danger:hover {
    background: rgba(122, 28, 28, 0.18);
    border-color: #9a3a3a;
    color: #ffe6e6;
    box-shadow: 0 0 10px rgba(122, 28, 28, 0.4);
}

/* Solid destructive variant for irreversible actions (power off, etc.) */
.btn-danger-solid {
    border-color: #9a3a3a;
    background: linear-gradient(180deg, #8a2828 0%, #6b1f1f 100%);
    color: #ffe6e6;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.btn-danger-solid:hover {
    background: linear-gradient(180deg, #a43030 0%, #802424 100%);
    border-color: #c85050;
    box-shadow: 0 0 14px rgba(180, 50, 50, 0.5);
    color: #fff;
}
.btn-danger-solid:disabled {
    opacity: 0.65;
    cursor: default;
}

/* Power-off icon button — ghost-red pill in the top bar */
.btn-icon--power {
    color: #d28686;
    border-color: rgba(122, 28, 28, 0.4);
    background: rgba(122, 28, 28, 0.06);
    margin-left: var(--space-2);
}
.btn-icon--power:hover {
    color: #ffd6d6;
    border-color: #9a3a3a;
    background: rgba(122, 28, 28, 0.18);
    box-shadow: 0 0 10px rgba(122, 28, 28, 0.4);
}

/* Danger modal — subtle red glow around the content card */
.modal-content--danger {
    border-color: rgba(154, 58, 58, 0.5);
    box-shadow: 0 0 30px rgba(122, 28, 28, 0.25);
}
.poweroff-msg {
    color: var(--text-dim);
    margin: var(--space-3) 0;
    line-height: 1.5;
}

/* ---------- CRT shutdown animation ----------
   Mimics an old CRT television powering off: image collapses to a
   single bright horizontal scan line, then to a fading dot, then
   black. Triggered when the server broadcasts "server_shutdown" so
   everyone in the party sees the effect at the same moment. */
@keyframes crt-shutdown {
    0%   { transform: scale(1, 1);          filter: brightness(1)   contrast(1); }
    35%  { transform: scale(1, 1);          filter: brightness(1.1) contrast(1.05); }
    50%  { transform: scale(1, 0.0035);     filter: brightness(3.5) contrast(1.6); }
    62%  { transform: scale(1, 0.0035);     filter: brightness(4)   contrast(2); }
    78%  { transform: scale(0.18, 0.0035);  filter: brightness(5)   contrast(2.4); }
    92%  { transform: scale(0.012, 0.0035); filter: brightness(6)   contrast(3); opacity: 1; }
    100% { transform: scale(0, 0);          filter: brightness(0); opacity: 0; }
}

@keyframes crt-flash {
    0%, 100% { opacity: 0; }
    48%, 56% { opacity: 0.85; }
}

html.crt-shutting-down {
    background: #000 !important;
    overflow: hidden !important;
}
html.crt-shutting-down body {
    background: #000 !important;
    animation: crt-shutdown 1.6s cubic-bezier(0.6, 0, 0.75, 0.35) forwards;
    transform-origin: 50% 50%;
    overflow: hidden;
    pointer-events: none;
}

/* Brief white scan-line flash overlay on top of the squeezed image */
.crt-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(220, 230, 255, 0.6) 50%, transparent 75%);
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    animation: crt-flash 1.6s cubic-bezier(0.6, 0, 0.75, 0.35) forwards;
    mix-blend-mode: screen;
}

/* =====================================================
   Component vocabulary (Phase 2 of UI overhaul)
   These supersede the older ad-hoc button/input rules.
   The `.btn-small`, `.btn-primary` etc. rules above stay for backward
   compat but everything new should use the tokens below.
   ===================================================== */

/* Icon-only buttons — circular tap target, used for close/dismiss */
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-default);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
    font-size: var(--text-md);
    line-height: 1;
    flex-shrink: 0;
}
.btn-icon:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(200, 150, 44, 0.08);
}

.btn-icon.is-spinning {
    color: var(--gold);
    border-color: var(--gold);
    cursor: progress;
    animation: btn-spin 1.1s linear infinite;
}
@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Ghost button — low-contrast text-style action */
.btn-ghost {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
    white-space: nowrap;
}
.btn-ghost:hover { color: var(--gold-bright); border-color: var(--gold); background: rgba(200, 150, 44, 0.06); }

/* Form inputs — unified */
.input,
.select,
.textarea,
.search-input,
.stream-select,
input[type="text"].input,
input[type="password"].input,
input[type="search"].input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-primary);
    border: var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}
.input:hover,
.select:hover,
.textarea:hover,
.stream-select:hover,
.search-input:hover { border-color: var(--gold-dim); background: rgba(200, 150, 44, 0.03); }
.input:focus,
.select:focus,
.textarea:focus,
.stream-select:focus,
.search-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 150, 44, 0.15); background: var(--bg-primary); }
.input::placeholder,
.search-input::placeholder,
.textarea::placeholder { color: var(--text-dim); }

/* Custom-styled select with gold chevron — replaces the native UA look */
.select,
select.select,
.stream-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23c8962c' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 12px 8px;
    padding-right: calc(var(--space-4) + 18px);
    cursor: pointer;
}
.select option,
.stream-select option { background: var(--bg-secondary); color: var(--text-primary); }

/* Lozenges — unified pill component */
.lozenge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
    border: var(--border-default);
    background: rgba(200, 150, 44, 0.08);
    color: var(--gold-bright);
}
.lozenge--muted { background: rgba(200, 150, 44, 0.04); border-color: rgba(200, 150, 44, 0.12); color: var(--text-secondary); }
.lozenge--warn  { background: #2a1d10; border-color: rgba(255, 184, 107, 0.4); color: #ffd9b3; }
.lozenge--crit  { background: #2a1010; border-color: rgba(255, 138, 138, 0.4); color: #ffd6d6; }
.lozenge--solid { background: linear-gradient(135deg, var(--gold-dim), var(--gold)); border-color: transparent; color: var(--bg-cinema); font-weight: 600; }

/* Modal — unified header/body/footer skeleton */
.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.modal__header h2 {
    margin: 0;
    font-size: var(--text-lg);
    font-family: 'Cinzel', Georgia, serif;
    color: var(--gold);
    letter-spacing: 0.05em;
}
.modal__body { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }
.modal__body p { margin: 0 0 var(--space-3); }
.modal__field {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-dim);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
    text-transform: uppercase;
}
.modal__footer {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--space-5);
}
.modal__footer-spacer { flex: 1; }

.modal__inline-tools {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
}
.link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--text-xs);
    color: var(--text-dim);
    text-decoration: underline;
    text-decoration-color: rgba(200, 150, 44, 0.3);
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.link-btn:hover { color: var(--gold-bright); text-decoration-color: var(--gold); }
.link-btn:disabled { opacity: 0.5; cursor: default; }
.link-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

/* Stack utilities for vertical rhythm */
.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-mb-3 { margin-bottom: var(--space-3); display: block; }

.text-dim { color: var(--text-dim); }

/* Modal size variants — drop the inline max-width */
.modal-content--sm { max-width: 480px; }
.modal-content--md { max-width: 560px; }
.modal-content--lg { max-width: 640px; }

.modal-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    font-family: 'Cinzel', Georgia, serif;
    color: var(--gold);
    letter-spacing: 0.05em;
}
.modal-title--danger { color: #ff8a8a; -webkit-text-fill-color: #ff8a8a; }
.modal-body-emphasis { margin: 0 0 var(--space-2); color: var(--text-primary); }
.modal-body-meta { margin: 0 0 var(--space-5); color: var(--text-dim); font-size: var(--text-sm); }

.form-status {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-dim);
    min-height: 1.2em;
}

.textarea--mono {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    resize: vertical;
}

/* Movie popout — header bits */
.popout-title {
    margin: 0;
    font-size: var(--text-xl);
    font-family: 'Cinzel', Georgia, serif;
    color: var(--gold);
    letter-spacing: 0.04em;
    line-height: 1.3;
}
.popout-meta-year { color: var(--text-dim); font-weight: 400; font-family: inherit; }
.popout-meta-rating {
    color: var(--gold-bright);
    font-weight: 600;
    font-size: var(--text-md);
    margin-left: var(--space-2);
    font-family: inherit;
    -webkit-text-fill-color: var(--gold-bright);
}
.popout-meta-runtime {
    color: var(--text-dim);
    font-weight: 400;
    font-size: var(--text-md);
    margin-left: var(--space-1);
    font-family: inherit;
}

.popout-overview {
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: 1.55;
    margin-bottom: var(--space-4);
    flex: 1;
    overflow-y: auto;
}
.popout-hint {
    margin: 0 0 var(--space-3);
    color: var(--text-dim);
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* Candidate picker — stronger components */
.candidate-card {
    width: 100%;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    color: inherit;
    font: inherit;
    text-align: left;
}
.candidate-card:hover:not(:disabled) { background: var(--bg-tertiary); border-color: var(--gold); transform: translateY(-1px); }
.candidate-card:disabled { cursor: default; opacity: 0.55; }
.candidate-card--selected { border-color: var(--gold); background: rgba(200, 150, 44, 0.08); }
.candidate-card__poster {
    width: 64px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--bg-primary);
}
.candidate-card__poster--empty { background: var(--bg-primary); }
.candidate-card__body { flex: 1; min-width: 0; }
.candidate-card__title { font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.candidate-card__year { color: var(--text-dim); font-weight: 400; }
.candidate-card__likely { font-size: var(--text-2xs); }
.candidate-card__overview { color: var(--text-dim); font-size: var(--text-xs); line-height: 1.5; margin-top: var(--space-1); }
.candidate-card__applying { margin-top: var(--space-2); color: var(--gold); font-size: var(--text-xs); }

/* Identify-picker search row */
.identify-search {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-subtle);
}
.identify-search__row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}
.identify-search__name { flex: 1; min-width: 0; }
.identify-search__year { width: 5.5rem; flex-shrink: 0; text-align: center; }
.identify-search__status {
    margin-top: var(--space-2);
    color: var(--text-dim);
    font-size: var(--text-xs);
    font-style: italic;
}

/* About modal layout */
.modal-content--scroll { max-height: 80vh; overflow-y: auto; }

.about-lead {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: 1.55;
}
.about-fork {
    margin: 0 0 var(--space-5);
    color: var(--text-dim);
    font-size: var(--text-sm);
    line-height: 1.6;
}
.about-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.section-eyebrow {
    font-family: 'Cinzel', Georgia, serif;
    font-size: var(--text-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-subtle);
    font-weight: 600;
    background: none;
    -webkit-text-fill-color: var(--gold);
}

/* Inline gold link inside body copy */
.text-link {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 150, 44, 0.3);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.text-link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

/* Pill-shaped link, used for Source / external refs in modals */
.link-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background: rgba(200, 150, 44, 0.08);
    border: var(--border-default);
    border-radius: var(--radius-md);
    color: var(--gold);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.link-pill:hover { background: rgba(200, 150, 44, 0.16); border-color: var(--gold); color: var(--gold-bright); }

/* =====================================================
   Phase 4 — Polish: focus rings, loading skeleton,
   empty states, micro-interactions
   ===================================================== */

/* Unified keyboard focus ring on every interactive element */
.btn:focus-visible,
.btn-small:focus-visible,
.btn-icon:focus-visible,
.btn-ghost:focus-visible,
.btn-primary:focus-visible,
.btn-danger:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.search-input:focus-visible,
.stream-select:focus-visible,
.candidate-card:focus-visible,
.library-item:focus-visible,
.nav-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Library list — loading skeleton replaces "Loading libraries..." */
.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
}
.skeleton-row {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
}
.skeleton-thumb {
    width: 44px;
    height: 66px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--bg-tertiary) 0%, rgba(200,150,44,0.06) 50%, var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}
.skeleton-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
}
.skeleton-line {
    height: 10px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-tertiary) 0%, rgba(200,150,44,0.06) 50%, var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}
.skeleton-line--short { width: 50%; }
.skeleton-line--mid   { width: 75%; }
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty state shown when a library returns no items */
.empty-state {
    text-align: center;
    padding: var(--space-7) var(--space-4);
    color: var(--text-dim);
}
.empty-state__icon {
    font-size: 3rem;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}
.empty-state__title {
    font-family: 'Cinzel', Georgia, serif;
    color: var(--gold);
    font-size: var(--text-md);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.empty-state__hint {
    font-size: var(--text-sm);
    line-height: 1.5;
    max-width: 240px;
    margin: 0 auto;
}

/* Subtle entrance animations */
@keyframes pop-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.movie-popout-panel,
.modal .modal-content { animation: pop-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Library item rating pop on update — keyframe */
@keyframes rating-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); color: var(--gold-bright); }
    100% { transform: scale(1); }
}
.library-item-rating--updated { animation: rating-pop 600ms ease; }

/* Library scroll: smoother sentinel */
.load-more-sentinel {
    color: var(--text-dim) !important;
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Tighter, more consistent transition story */
.btn,
.btn-small,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-icon,
.btn-ghost,
.nav-btn,
.library-item {
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

#status {
    text-align: center;
    color: var(--text-primary);
    font-size: 1rem;
    padding: 1rem;
}

/* =====================================================
   Party page layout
   ===================================================== */
.party-page {
    background: radial-gradient(ellipse at 50% 0%, #1c1408 0%, var(--bg-primary) 65%);
    background-attachment: fixed;
    color: var(--text-primary);
}

.party-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.party-header {
    background: linear-gradient(180deg, #1a1510 0%, var(--bg-primary) 100%);
    padding: 0.75rem 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(200, 150, 44, 0.25);
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
    position: relative;
    transition: padding 180ms ease, min-height 180ms ease;
    overflow: hidden;
}

/* Collapsed state — header shrinks to a thin strip with just the toggle
   visible, freeing up vertical space for the video player. State is
   persisted in localStorage so the choice survives refreshes. */
.party-header--collapsed {
    padding: 0;
    min-height: 14px;
}
.party-header--collapsed > div {
    display: none;
}

/* Floating chevron in the header's top-right corner that toggles collapse.
   Stays visible in both expanded and collapsed states. */
.header-collapse-toggle {
    position: absolute;
    top: 4px;
    right: 10px;
    z-index: 5;
    width: 24px;
    height: 16px;
    line-height: 14px;
    padding: 0;
    background: rgba(200, 150, 44, 0.08);
    border: 1px solid rgba(200, 150, 44, 0.25);
    border-radius: 4px;
    color: var(--gold-bright);
    font-size: 11px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 120ms ease, background 120ms ease;
}
.header-collapse-toggle:hover {
    opacity: 1;
    background: rgba(200, 150, 44, 0.18);
}
.party-header--collapsed .header-collapse-toggle {
    top: 1px;
    opacity: 0.7;
}

/* Subtle gold shimmer line at very top of header */
.party-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold-dim) 30%,
        var(--gold-bright) 50%,
        var(--gold-dim) 70%,
        transparent 100%);
    opacity: 0.6;
}

.party-header h1 {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.35rem;
    color: var(--gold-bright);
    font-weight: 600;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(200, 150, 44, 0.3);
    background: none;
    -webkit-text-fill-color: var(--gold-bright);
}

.party-code {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.party-code strong {
    color: var(--text-primary);
    font-family: monospace;
    background: var(--bg-tertiary);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    margin: 0 0.4rem;
    border: 1px solid rgba(200, 150, 44, 0.2);
    letter-spacing: 2px;
    font-weight: 700;
}

.version-watermark {
    /* Reset native <button> styling so it reads as a subtle text watermark */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-dim);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.2s;
    letter-spacing: 0.5px;
    font-family: 'Cinzel', Georgia, serif;
}

.version-watermark:hover {
    opacity: 1;
    color: var(--gold);
    background: none;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#userCount {
    color: var(--gold-dim);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =====================================================
   Main content layout
   ===================================================== */
.party-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* =====================================================
   Library Sidebar
   ===================================================== */
.library-sidebar {
    width: 320px;
    background: var(--bg-secondary);
    border-right: 1px solid rgba(200, 150, 44, 0.18);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;  /* anchor for inline movie popout panel */
}

.library-sidebar.hidden {
    width: 0;
    min-width: 0;
    border-right: none;
    overflow: hidden;
    padding: 0;
}

.library-sidebar.hidden .sidebar-header,
.library-sidebar.hidden .search-container,
.library-sidebar.hidden .library-nav,
.library-sidebar.hidden .library-content {
    opacity: 0;
    pointer-events: none;
}

.sidebar-header {
    padding: 0.85rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(200, 150, 44, 0.2);
    background: var(--bg-secondary);
    position: relative;
}

/* Left gold accent bar */
.sidebar-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--gold), transparent);
}

.sidebar-header h2 {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.9rem;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: none;
    -webkit-text-fill-color: var(--gold);
    white-space: nowrap;
    margin: 0;
}

.search-container {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid rgba(200, 150, 44, 0.1);
    position: relative;
    background: var(--bg-primary);
}

.search-input {
    width: 100%;
    padding: 0.45rem 2rem 0.45rem 0.65rem;
    background: var(--bg-tertiary);
    border: 1px solid rgba(200, 150, 44, 0.15);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: rgba(200, 150, 44, 0.4);
    box-shadow: 0 0 8px rgba(200, 150, 44, 0.15);
}

.search-input::placeholder {
    color: var(--text-dim);
}

.clear-search-btn {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.clear-search-btn:hover {
    color: var(--text-secondary);
}

/* Library nav tabs */
.library-nav {
    display: flex;
    padding: 0;
    gap: 0;
    border-bottom: 1px solid rgba(200, 150, 44, 0.15);
    background: var(--bg-secondary);
}

.nav-btn {
    flex: 1;
    padding: 0.55rem 0.4rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.nav-btn:hover {
    color: var(--text-secondary);
    background: rgba(200, 150, 44, 0.04);
    border-bottom-color: rgba(200, 150, 44, 0.25);
}

.nav-btn.active {
    background: transparent;
    border-bottom: 2px solid var(--gold);
    color: var(--gold-bright);
    font-weight: 700;
    box-shadow: none;
}

.library-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--bg-primary);
}

/* Library items — poster card style */
.library-item {
    background: var(--bg-secondary);
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid transparent;
    border-left: 2px solid transparent;
}

.library-item:hover {
    background: var(--bg-tertiary);
    border-color: rgba(200, 150, 44, 0.12);
    border-left-color: var(--gold);
    box-shadow: var(--shadow-sm);
}

.library-item img {
    width: 44px;
    height: 66px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(200, 150, 44, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.library-item-info {
    flex: 1;
    min-width: 0;
}

.library-item-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-item-meta {
    font-size: 0.78rem;
    color: var(--text-dim);
}

.library-item-rating {
    margin-left: 0.5rem;
    color: var(--gold-bright);
    font-weight: 600;
}

.library-item-genres {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* ---------- Genre filter (Movies tab) ----------
   Dropdown trigger that expands into a panel of large-row genre toggles.
   Designed for iPad — every interactive element is at least 44pt tall. */
.movie-filter-bar {
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid rgba(200, 150, 44, 0.12);
    background: rgba(0, 0, 0, 0.15);
    position: relative;
}
.movie-filter-bar__controls {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.movie-filter-bar__sort {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(200, 150, 44, 0.35);
    background: rgba(200, 150, 44, 0.06);
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
    transition: border-color 120ms ease, background 120ms ease;
}
.movie-filter-bar__sort:hover {
    border-color: rgba(200, 150, 44, 0.6);
    background: rgba(200, 150, 44, 0.12);
}
.movie-filter-bar__sort--on {
    border-color: var(--gold-bright);
    background: rgba(200, 150, 44, 0.22);
    color: var(--gold-bright);
}
.movie-filter-bar__trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(200, 150, 44, 0.35);
    background: rgba(200, 150, 44, 0.06);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, background 120ms ease;
}
.movie-filter-bar__trigger:hover {
    border-color: rgba(200, 150, 44, 0.6);
    background: rgba(200, 150, 44, 0.12);
}
.movie-filter-bar__label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.movie-filter-bar__summary {
    flex: 1;
    color: var(--gold-bright);
    font-weight: 600;
    font-size: 0.85rem;
}
.movie-filter-bar__chevron {
    color: var(--gold-bright);
    font-size: 0.7rem;
    transition: transform 180ms ease;
}
.movie-filter-bar[data-open="1"] .movie-filter-bar__chevron {
    transform: rotate(180deg);
}
.movie-filter-bar__panel {
    margin-top: 0.4rem;
    border-radius: 8px;
    border: 1px solid rgba(200, 150, 44, 0.25);
    background: var(--bg-secondary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-height: 55vh;
    overflow-y: auto;
    padding: 0.3rem;
}
.movie-filter-bar__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 120ms ease;
}
.filter-row:hover {
    background: #1f1812;
}
.filter-row__check {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid rgba(200, 150, 44, 0.45);
    background: #1a1410;
    color: #ede8dc;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.filter-row__name {
    flex: 1;
    font-size: 0.9rem;
}
.filter-row__count {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.filter-row--on {
    background: rgba(200, 150, 44, 0.12);
}
.filter-row--on .filter-row__check {
    background: linear-gradient(135deg, var(--gold-dim), var(--gold));
    border-color: transparent;
    color: #1a1410;
}
.filter-row--clear {
    color: #fad6d6;
    justify-content: center;
    border: 1px solid rgba(122, 28, 28, 0.35);
    background: rgba(122, 28, 28, 0.06);
    margin-bottom: 0.4rem;
}
.filter-row--clear:hover {
    border-color: #9a3a3a;
    background: rgba(122, 28, 28, 0.16);
    color: #ffe6e6;
}

.lozenge--mini {
    padding: 0.1rem 0.5rem;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: rgba(200, 150, 44, 0.05);
    border-color: rgba(200, 150, 44, 0.18);
}

/* Subtle blue tint for the language lozenge so it pops against the
   gold genre lozenges — quick visual cue that a film is foreign-lang
   and therefore subtitled. */
.lozenge--lang {
    color: #b8d4f7;
    background: rgba(96, 165, 250, 0.08);
    border-color: rgba(96, 165, 250, 0.3);
    font-weight: 600;
}

/* Uncertain variant — used when the language came from TMDB's
   production-origin field rather than the file's audio track tag.
   Italic + dashed border + '?' suffix in the label carry the
   "this might be an English dub even though TMDB says German" signal
   without sacrificing legibility. */
.lozenge--lang-uncertain {
    color: #94aac4;
    font-style: italic;
    font-weight: 500;
    border-style: dashed;
    background: rgba(96, 165, 250, 0.04);
}

/* Codec lozenge — flags problematic video codecs (XviD, HEVC, VP9, AV1,
   MPEG-2) that can't be stream-copied and require live ffmpeg re-encoding
   every play. Amber so it reads as "heads-up, not error", matching the
   ⚠ glyph prefix in the label. */
.lozenge--codec {
    color: #ffc966;
    background: rgba(255, 170, 60, 0.08);
    border-color: rgba(255, 170, 60, 0.35);
    font-weight: 600;
}

/* Marquee-studio lozenge — high-contrast badge for prestige indie studios
   (A24, etc.). Sits leftmost in the lozenge row to maximise visibility. */
.lozenge--studio {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* A24 brand: the famous solid black square with white type. We match it
   directly rather than tinting through the theme palette — the whole point
   is for it to read as the A24 logo at a glance. */
.lozenge--studio-a24 {
    background: #000;
    color: #fff;
    border-color: #000;
}

.sidebar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid rgba(200, 150, 44, 0.1);
    background: rgba(8, 7, 6, 0.4);
}

.sidebar-toolbar .btn-small {
    white-space: nowrap;
    flex-shrink: 0;
}

.disk-usage {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: rgba(200, 150, 44, 0.08);
    border: 1px solid rgba(200, 150, 44, 0.2);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    min-width: 0;
    cursor: pointer;
    user-select: none;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.disk-usage:hover {
    color: var(--gold-bright);
    border-color: var(--gold);
    background: rgba(200, 150, 44, 0.14);
}
.disk-usage:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.disk-usage.is-refreshing { opacity: 0.55; cursor: progress; }

.disk-usage.warn {
    color: #ffd9b3;
    border-color: rgba(255, 184, 107, 0.4);
    background: #2a1d10;
}

.disk-usage.crit {
    color: #ffd6d6;
    border-color: rgba(255, 138, 138, 0.4);
    background: #2a1010;
}

.candidate-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 55vh;
    overflow-y: auto;
}

.changelog-entry {
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(200, 150, 44, 0.18);
}

.changelog-entry.current {
    border-left-color: var(--gold);
}

.changelog-version {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.95rem;
    color: var(--gold-bright);
    font-weight: 600;
    margin-bottom: 0.4rem;
    letter-spacing: 0.04em;
}

.changelog-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    background: rgba(200, 150, 44, 0.18);
    border: 1px solid rgba(200, 150, 44, 0.4);
    border-radius: 999px;
    color: var(--gold-bright);
    font-family: inherit;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    vertical-align: middle;
}

.changelog-entry ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-secondary, #a09880);
    font-size: 0.85rem;
    line-height: 1.55;
}

.changelog-entry ul li {
    margin-bottom: 0.2rem;
}

.unmute-overlay {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    /* Solid background so contrast is unambiguous on any video frame */
    background: #0e0c0a;
    border: 2px solid var(--gold);
    border-radius: 999px;
    /* Comfortably larger than Apple's 44pt touch-target minimum */
    min-height: 56px;
    padding: 0.85rem 1.5rem;
    color: #ffe8a8;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    z-index: 90;
    -webkit-tap-highlight-color: transparent;
    animation: unmute-pulse 2.2s ease-in-out infinite;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.unmute-overlay:hover,
.unmute-overlay:active {
    color: #fff;
    border-color: var(--gold-bright);
    background: #1a1510;
}

@keyframes unmute-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(200, 150, 44, 0.5); }
    50%      { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 14px rgba(200, 150, 44, 0); }
}

/* Even larger on actual iPads / coarse-pointer devices */
@media (pointer: coarse) {
    .unmute-overlay {
        font-size: 1.2rem;
        min-height: 64px;
        padding: 1rem 1.75rem;
    }
}

.tap-to-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 7, 6, 0.85);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    color: var(--gold);
    font-family: 'Cinzel', Georgia, serif;
    transition: background 0.18s ease;
}

.tap-to-play-overlay:hover {
    background: rgba(8, 7, 6, 0.92);
}

.tap-to-play-icon {
    font-size: 5rem;
    line-height: 1;
    text-shadow: 0 0 24px rgba(200, 150, 44, 0.5);
}

.tap-to-play-text {
    margin-top: 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.movie-popout-panel {
    position: absolute;
    inset: 0;
    background: var(--bg-secondary);
    border-left: 2px solid var(--gold);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6);
    padding: 1rem;
    overflow-y: auto;
    z-index: 5;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.popout-genres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.library-item-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.25rem 0.4rem;
    border-radius: 3px;
    opacity: 0.35;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    line-height: 1;
}

.library-item:hover .library-item-delete {
    opacity: 0.6;
}

.library-item-delete:hover {
    opacity: 1 !important;
    background: rgba(255, 68, 68, 0.18);
}

/* =====================================================
   Video area
   ===================================================== */
.video-area {
    flex: 1;
    display: flex;
    flex-direction: row;
    background: var(--bg-primary);
    overflow: hidden;
}

.no-video-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder {
    text-align: center;
    color: var(--text-dim);
}

.placeholder h2 {
    font-family: 'Cinzel', Georgia, serif;
    margin-bottom: 0.5rem;
    color: var(--gold-dim);
    font-size: 1.4rem;
    letter-spacing: 1px;
    background: none;
    -webkit-text-fill-color: var(--gold-dim);
}

.placeholder p {
    font-size: 0.9rem;
    color: var(--text-dim);
}

.video-player {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.85rem;
    overflow-y: auto;
    min-height: 0;
    min-width: 0;
    position: relative;
}

/* ---------- Pre-buffer overlay ----------
   Shown after a fresh video load while hls.js is filling the forward
   buffer. Covers the video element and gates play behind a visible
   progress indicator. */
.prebuffer-overlay {
    position: absolute;
    inset: 0.85rem 0.85rem auto 0.85rem;
    max-height: 70vh;
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.92) 0%, rgba(15, 18, 24, 0.88) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    z-index: 50;
    border-radius: var(--radius-md);
    pointer-events: auto;
}
.prebuffer-overlay__title {
    font-family: 'Cinzel', serif;
    font-size: var(--text-lg);
    color: var(--gold-bright);
    letter-spacing: 0.04em;
}
.prebuffer-overlay__hint {
    font-size: var(--text-sm);
    color: var(--text-dim);
}
.prebuffer-overlay__progress {
    width: min(360px, 70%);
    height: 6px;
    background: rgba(200, 150, 44, 0.12);
    border-radius: 999px;
    overflow: hidden;
}
.prebuffer-overlay__progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
    transition: width 0.25s ease;
}
.prebuffer-overlay__count {
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.prebuffer-overlay__btn {
    margin-top: var(--space-2);
    min-width: 180px;
}
.prebuffer-overlay--ready .prebuffer-overlay__progress-fill {
    background: linear-gradient(90deg, var(--gold-bright), #ffd97a);
    box-shadow: 0 0 12px rgba(255, 217, 122, 0.5);
}

/* The cinema screen */
#videoElement {
    width: 100%;
    max-height: 70vh;
    background: #000;
    border-radius: 3px;
    flex-shrink: 0;
    /* Subtle ring + deep shadow — the video is the star, not the border */
    box-shadow:
        0 0 0 1px rgba(200, 150, 44, 0.2),
        0 12px 48px rgba(0, 0, 0, 0.85),
        0 0 60px rgba(200, 150, 44, 0.05);
    border: none;
    outline: none;
}

/* Clean fullscreen */
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
video:-ms-fullscreen,
#videoElement:fullscreen,
#videoElement:-webkit-full-screen,
#videoElement:-moz-full-screen,
#videoElement:-ms-fullscreen {
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

video::backdrop,
video::-webkit-backdrop,
#videoElement::backdrop,
#videoElement::-webkit-backdrop {
    background-color: #000;
}

/* Video meta row — title, controls */
.video-meta {
    display: flex;
    gap: 2rem;
    padding: 0.75rem 0 0;
    align-items: flex-start;
}

.video-meta-row {
    display: flex;
    gap: 2rem;
    align-items: flex-end;
    width: 100%;
}

.video-info {
    flex: 1;
    min-width: 0;
}

.video-info h2 {
    font-family: 'Cinzel', Georgia, serif;
    color: var(--gold);
    background: none;
    -webkit-text-fill-color: var(--gold);
    margin-bottom: 0.35rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-info p {
    color: var(--text-dim);
    font-size: 0.82rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-controls {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.stream-controls {
    display: flex;
    flex-direction: row;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.stream-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 120px;
    max-width: 240px;
}

.stop-button-group {
    flex: 0 0 auto;
    margin-left: 0.3rem;
    min-width: auto;
}

.stream-control-group label {
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stream-select {
    padding: 0.4rem 0.6rem;
    background: var(--bg-tertiary);
    border: 1px solid rgba(200, 150, 44, 0.18);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    min-width: 160px;
    transition: all 0.2s;
}

.stream-select:hover {
    border-color: rgba(200, 150, 44, 0.35);
    color: var(--text-primary);
}

.stream-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(200, 150, 44, 0.2);
}

.stream-select option {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* =====================================================
   Chat
   ===================================================== */
.chat-container {
    background: var(--bg-secondary);
    border-left: 1px solid rgba(200, 150, 44, 0.18);
    width: 320px;
    min-width: 220px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
}

.chat-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.2s;
}

.chat-resize-handle:hover,
.chat-resize-handle.dragging {
    background: rgba(200, 150, 44, 0.2);
}

.chat-resize-handle::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 24px;
    background: var(--gold-dim);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.2s;
}

.chat-resize-handle:hover::after,
.chat-resize-handle.dragging::after {
    opacity: 1;
}

.chat-header {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(200, 150, 44, 0.18);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header h3 {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.8rem;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: none;
    -webkit-text-fill-color: var(--gold);
}

.chat-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.6rem;
    color: var(--text-dim);
    transition: color 0.2s;
    line-height: 1;
}

.chat-toggle-btn:hover {
    color: var(--gold);
}

.chat-container.collapsed {
    width: 2rem;
    min-width: 0;
}

.chat-container.collapsed .chat-header {
    justify-content: center;
    padding: 0.65rem 0.25rem;
}

.chat-container.collapsed .chat-header h3,
.chat-container.collapsed .chat-resize-handle,
.chat-container.collapsed .participant-section,
.chat-container.collapsed .chat-messages,
.chat-container.collapsed .chat-input {
    display: none;
}

.participant-section {
    border-bottom: 1px solid rgba(200, 150, 44, 0.1);
}

.participant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s;
}

.participant-header:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
}

.participant-chevron {
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.participant-chevron.collapsed {
    transform: rotate(-90deg);
}

.participant-items {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 120px;
    overflow-y: auto;
}

.participant-items.hidden {
    display: none;
}

.participant-items li {
    padding: 0.25rem 0.75rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.participant-self {
    color: var(--gold) !important;
    font-weight: 600;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.65rem;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chat-message {
    display: flex;
    width: 100%;
    margin-bottom: 0.15rem;
}

.chat-message-other {
    justify-content: flex-start;
}

.chat-message-mine {
    justify-content: flex-end;
}

.chat-message-bubble {
    max-width: 75%;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.chat-message-other .chat-message-bubble {
    background: var(--bg-tertiary);
    border: 1px solid rgba(200, 150, 44, 0.08);
    border-bottom-left-radius: 3px;
}

.chat-message-mine .chat-message-bubble {
    background: linear-gradient(135deg, rgba(138, 100, 32, 0.35), rgba(200, 150, 44, 0.25));
    border: 1px solid rgba(200, 150, 44, 0.2);
    border-bottom-right-radius: 3px;
}

.chat-message-username {
    font-weight: 700;
    font-size: 0.72rem;
    display: block;
    margin-bottom: 0.2rem;
    opacity: 0.8;
}

.chat-message-other .chat-message-username {
    color: var(--gold);
}

.chat-message-mine .chat-message-username {
    color: rgba(232, 184, 75, 0.9);
}

.chat-message-text {
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.4;
    word-wrap: break-word;
    display: block;
}

.chat-message-system {
    color: var(--text-dim);
    font-style: italic;
    text-align: left;
    background: transparent;
    border-left: 2px solid rgba(200, 150, 44, 0.2);
    border-radius: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
    align-self: flex-start;
    max-width: 90%;
}

.chat-input {
    display: flex;
    gap: 0.4rem;
    padding: 0.65rem;
    background: var(--bg-secondary);
    border-top: 1px solid rgba(200, 150, 44, 0.1);
}

.chat-input input {
    flex: 1;
    padding: 0.45rem 0.6rem;
    background: var(--bg-primary);
    border: 1px solid rgba(200, 150, 44, 0.18);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.chat-input input:focus {
    outline: none;
    border-color: rgba(200, 150, 44, 0.45);
    box-shadow: 0 0 8px rgba(200, 150, 44, 0.12);
}

.chat-input input::placeholder {
    color: var(--text-dim);
}

/* =====================================================
   Modal
   ===================================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 7, 6, 0.92);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* The about modal uses the native <dialog> element. Reset UA defaults so
   our .modal styling (full-viewport overlay, centered content) shines
   through, and hide the UA ::backdrop since we draw our own. */
dialog.modal {
    border: none;
    padding: 0;
    max-width: none;
    max-height: none;
    color: inherit;
}
dialog.modal:not([open]) { display: none; }
dialog.modal::backdrop { background: transparent; }

.modal-content {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    border: 1px solid rgba(200, 150, 44, 0.25);
    box-shadow:
        0 24px 80px rgba(0,0,0,0.8),
        0 0 40px rgba(200, 150, 44, 0.08);
}

.modal-content h2 {
    font-family: 'Cinzel', Georgia, serif;
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: var(--text-primary);
    margin-bottom: 0.85rem;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 1px;
}

.modal-content p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.modal-content input {
    width: 100%;
    padding: 0.7rem;
    background: var(--bg-tertiary);
    border: 1px solid rgba(200, 150, 44, 0.25);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.modal-content input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 14px rgba(200, 150, 44, 0.25);
}

.modal-content input::placeholder {
    color: var(--text-dim);
}

/* =====================================================
   Scrollbars — thin, refined
   ===================================================== */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: rgba(200, 150, 44, 0.25);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 150, 44, 0.45);
}

/* =====================================================
   Skip Intro button
   ===================================================== */
.skip-intro-button {
    position: absolute;
    bottom: 215px;
    right: 80px;
    padding: 10px 22px;
    background: rgba(8, 7, 6, 0.88);
    color: var(--gold-bright);
    border: 1px solid var(--gold);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 1000;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Cinzel', Georgia, serif;
}

.skip-intro-button:hover {
    background: var(--gold);
    color: var(--bg-cinema);
    box-shadow: 0 4px 20px rgba(200, 150, 44, 0.45);
    transform: scale(1.04);
}

.skip-intro-button:active {
    transform: scale(1.01);
}

/* =====================================================
   Autoplay toggle button
   ===================================================== */
.autoplay-toggle {
    padding: 0.4rem 0.85rem;
    background: rgba(200, 150, 44, 0.1);
    border: 1px solid rgba(200, 150, 44, 0.3);
    color: var(--gold);
    font-weight: 600;
    min-width: 65px;
    transition: all 0.2s ease;
    border-radius: 4px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.autoplay-toggle:hover {
    background: rgba(200, 150, 44, 0.18);
    box-shadow: 0 0 10px rgba(200, 150, 44, 0.2);
}

.autoplay-toggle[data-enabled="false"] {
    background: transparent;
    border-color: rgba(90, 79, 66, 0.4);
    color: var(--text-dim);
    box-shadow: none;
}

.autoplay-toggle[data-enabled="false"]:hover {
    background: rgba(90, 79, 66, 0.08);
    border-color: var(--text-dim);
    color: var(--text-secondary);
}

.autoplay-toggle-group {
    min-width: 80px;
    max-width: 110px;
}

/* =====================================================
   Autoplay countdown overlay
   ===================================================== */
.autoplay-countdown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 7, 6, 0.95);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.countdown-content {
    text-align: center;
    padding: 2.5rem 3rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid rgba(200, 150, 44, 0.25);
    box-shadow: 0 0 60px rgba(0,0,0,0.8), 0 0 40px rgba(200, 150, 44, 0.06);
    max-width: 480px;
}

.countdown-content h3 {
    font-family: 'Cinzel', Georgia, serif;
    color: var(--gold-bright);
    background: none;
    -webkit-text-fill-color: var(--gold-bright);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.countdown-content p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.countdown-timer {
    margin: 1.5rem 0;
}

.countdown-timer span {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--gold);
    background: none;
    -webkit-text-fill-color: var(--gold);
    display: inline-block;
    animation: pulse 1s ease-in-out infinite;
    text-shadow: 0 0 24px rgba(200, 150, 44, 0.5);
    font-family: 'Cinzel', Georgia, serif;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.08); opacity: 0.85; }
}

#cancelAutoplayBtn {
    margin-top: 1rem;
    padding: 0.65rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 1024px) {
    .video-area {
        flex-direction: column;
    }

    .video-meta {
        flex-direction: column;
        gap: 0.75rem;
    }

    .video-info p {
        -webkit-line-clamp: 2;
    }

    .stream-controls {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .stream-control-group {
        flex: 1;
        min-width: 140px;
    }

    .chat-container {
        width: 100% !important;
        min-width: 100%;
        max-width: 100%;
        height: 240px;
        min-height: 240px;
        max-height: 240px;
        border-left: none;
        border-top: 1px solid rgba(200, 150, 44, 0.18);
    }

    .chat-resize-handle {
        display: none;
    }

    #videoElement {
        max-height: 50vh;
    }
}

@media (max-width: 768px) {
    .library-sidebar {
        position: absolute;
        height: 100%;
        z-index: 100;
    }

    .library-sidebar.hidden {
        transform: translateX(-100%);
        width: 320px;
        min-width: 320px;
    }
}