:root {
    --velvet: #1B1216;
    --velvet-raised: #261A1F;
    --line: #3B2A31;
    --text: #F3ECE8;
    --muted: #A8969C;
    --paper: #F1E6D2;
    --paper-ink: #2A1D1A;
    --stamp: #D6453D;
    --stamp-pressed: #BC3830;

    --font: 'Instrument Sans', system-ui, sans-serif;
    --font-marquee: 'Big Shoulders Display', 'Instrument Sans', sans-serif;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    color-scheme: dark;
}

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

html,
body {
    height: 100%;
}

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--velvet);
    -webkit-font-smoothing: antialiased;
}

[hidden] {
    display: none !important;
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--paper);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ms {
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    line-height: 1;
    font-feature-settings: 'liga';
    user-select: none;
}

/* Lobbies: an old cinema. Velvet curtains draw back from the screen, a bulb-lit marquee holds the title,
   the projector's beam lands on the screen where the film is dropped, and two seats in the front row are taken */
.lobby {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(64px + var(--safe-top)) clamp(56px, 12vw, 180px) calc(130px + var(--safe-bottom));
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255, 236, 200, 0.10), transparent 70%),
        radial-gradient(ellipse at 50% 110%, #2A1418 0%, var(--velvet) 55%, #0E090B 100%);
}

.lobby-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Curtains: folds of red velvet that open once the page loads */
.curtains {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.35)),
        repeating-linear-gradient(90deg, #7A1520 0 14px, #A0212E 22px, #C2323C 30px, #A0212E 38px, #7A1520 52px);
    box-shadow: inset 0 -60px 80px rgba(0, 0, 0, 0.45);
    animation: curtain-open 1.8s 0.2s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

.curtain-left {
    left: 0;
    transform-origin: left;
    border-radius: 0 0 60% 0 / 0 0 8% 0;
}

.curtain-right {
    right: 0;
    transform-origin: right;
    border-radius: 0 0 0 60% / 0 0 0 8%;
}

@keyframes curtain-open {
    to { width: clamp(44px, 10vw, 150px); }
}

/* Scalloped valance across the top, trimmed in gold */
.valance {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(46px + var(--safe-top));
    background:
        radial-gradient(circle at 30px -6px, #9A1E2A 26px, transparent 27px) 0 100% / 60px 100% repeat-x,
        linear-gradient(180deg, #6E121C, #9A1E2A);
    -webkit-mask: radial-gradient(circle at 30px 0, #000 34px, transparent 35px) 0 100% / 60px 100% repeat-x, linear-gradient(#000 0 0) top / 100% 70% no-repeat;
    mask: radial-gradient(circle at 30px 0, #000 34px, transparent 35px) 0 100% / 60px 100% repeat-x, linear-gradient(#000 0 0) top / 100% 70% no-repeat;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.valance::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(70% - 3px);
    height: 3px;
    background: linear-gradient(90deg, #8A6420, #E7C36A, #8A6420);
}

.theater .lang-switch {
    position: absolute;
    top: calc(56px + var(--safe-top));
    right: clamp(56px, 11vw, 170px);
    z-index: 4;
    display: flex;
    padding: 3px;
    border: 1px solid rgba(231, 195, 106, 0.4);
    border-radius: 999px;
    background: rgba(27, 18, 22, 0.8);
}

.lang-switch button {
    min-width: 40px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
    transition: background 0.15s, color 0.15s;
}

.lang-switch button:hover {
    color: var(--text);
}

.lang-switch button[aria-pressed="true"] {
    background: #E7C36A;
    color: var(--paper-ink);
}

/* Marquee: the title on a sign framed by chasing bulbs */
.marquee {
    position: relative;
    padding: 18px 34px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, #2B1519, #1A0D10);
    box-shadow: 0 0 0 3px #8A6420, 0 0 0 6px #2B1519, 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 200, 110, 0.18);
}

.marquee::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 9px;
    padding: 8px;
    background: radial-gradient(circle, #FFF1C4 0 3px, rgba(255, 210, 120, 0.55) 4px, transparent 6px) 0 0 / 18px 18px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: bulbs 1.2s steps(2) infinite;
    pointer-events: none;
}

@keyframes bulbs {
    to { background-position: 18px 0; }
}

.lobby-title {
    position: relative;
    padding: 0 10px;
    font-family: var(--font-marquee);
    font-size: clamp(38px, 7vw, 68px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #FFF3D6;
    text-shadow: 0 0 18px rgba(255, 200, 110, 0.55), 0 0 2px #FFF;
}

/* The invite's title is a longer sentence, so its sign uses smaller letters */
#guest-lobby .lobby-title {
    font-size: clamp(30px, 4.6vw, 48px);
    line-height: 1.05;
}

.lobby-intro {
    margin-top: 22px;
    max-width: 480px;
    color: var(--muted);
}

/* The screen: a bright, slightly curved silver screen that the projector lights */
.drop-zone {
    position: relative;
    width: 100%;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 40px 24px 34px;
    border-radius: 8px / 20px;
    background:
        radial-gradient(ellipse 70% 80% at 50% 40%, #FFFDF6, #EDE4D2 70%, #D9CDB6);
    color: var(--paper-ink);
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 0 6px #120B0D, 0 0 70px rgba(255, 240, 205, 0.35), inset 0 0 40px rgba(120, 90, 50, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Projector beam from the back of the hall */
.drop-zone::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 8%;
    right: 8%;
    top: 60%;
    height: 90vh;
    background: linear-gradient(0deg, rgba(255, 240, 205, 0), rgba(255, 240, 205, 0.12) 70%, rgba(255, 240, 205, 0.2));
    clip-path: polygon(0 0, 100% 0, 51% 100%, 49% 100%);
    animation: flicker 3.2s steps(8) infinite;
    pointer-events: none;
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    30% { opacity: 0.8; }
    55% { opacity: 0.95; }
    70% { opacity: 0.75; }
}

.drop-zone:hover,
.drop-zone.is-dragging {
    transform: scale(1.015);
    box-shadow: 0 0 0 6px #120B0D, 0 0 90px rgba(255, 240, 205, 0.5), inset 0 0 40px rgba(120, 90, 50, 0.2);
}

.drop-zone.is-dragging {
    outline: 3px dashed var(--stamp);
    outline-offset: -14px;
}

.drop-zone:focus-within {
    outline: 3px solid var(--stamp);
    outline-offset: 4px;
}

.drop-icon {
    font-size: 46px;
    color: var(--stamp);
}

.drop-title {
    font-family: var(--font-marquee);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.drop-hint {
    max-width: 380px;
    font-size: 14px;
    color: rgba(42, 29, 26, 0.7);
}

/* YouTube link: a slim ticket-window field under the screen */
.youtube-form {
    width: 100%;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.youtube-or {
    font-size: 14px;
    color: var(--muted);
}

.link-row {
    display: flex;
    gap: 8px;
}

.link-input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--velvet-raised);
    font-size: 16px;
}

.link-input:focus {
    outline: none;
    border-color: var(--paper);
}

.link-go {
    flex-shrink: 0;
    height: 48px;
    padding: 0 22px;
    border-radius: 24px;
    background: var(--stamp);
    color: #FFF;
    font-weight: 600;
}

.link-go:hover {
    background: var(--stamp-pressed);
}

.lobby-error {
    margin-top: 16px;
    padding: 12px 14px;
    border-left: 3px solid var(--stamp);
    border-radius: 4px;
    background: rgba(214, 69, 61, 0.14);
    font-size: 15px;
    text-align: left;
}

.lobby-note {
    margin-top: 16px;
    font-size: 14px;
    color: var(--muted);
}

/* The note and the tip, printed on two torn ticket stubs */
.stubs {
    width: 100%;
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stub {
    margin: 0;
    padding: 14px 16px;
    border-radius: 6px;
    background: var(--paper);
    color: rgba(42, 29, 26, 0.8);
    font-size: 13.5px;
    text-align: left;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
    -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 7px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}

.stub:first-child {
    transform: rotate(-1.2deg);
}

.stub:last-child {
    transform: rotate(1deg);
}

.stub strong {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-marquee);
    font-size: 18px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--stamp);
}

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 22px;
    border-radius: 12px;
    background: var(--stamp);
    color: #FFF;
    font-size: 17px;
    font-weight: 600;
}

.primary-button:hover {
    background: var(--stamp-pressed);
}

.lobby .primary-button {
    margin-top: 24px;
    min-width: 240px;
    height: 56px;
    border-radius: 999px;
    font-family: var(--font-marquee);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(214, 69, 61, 0.4);
}

.text-button {
    padding: 8px 0;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.text-button:hover {
    color: var(--text);
}

/* Front row of seats; the two in the middle are you and your friend */
.seats {
    position: absolute;
    left: 50%;
    bottom: calc(-18px + var(--safe-bottom));
    z-index: 2;
    display: flex;
    gap: clamp(6px, 1.2vw, 14px);
    transform: translateX(-50%);
    pointer-events: none;
}

.seat {
    position: relative;
    width: clamp(46px, 7vw, 86px);
    height: clamp(62px, 9vw, 108px);
    border-radius: 18px 18px 6px 6px;
    background: linear-gradient(180deg, #5A1019, #2E080D);
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.06), 0 -2px 20px rgba(0, 0, 0, 0.6);
}

.seat::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 22%;
    height: 12px;
    border-radius: 6px;
    background: #1E0508;
}

/* Heads of the two people in the middle, watching the screen */
.head {
    position: absolute;
    left: 50%;
    top: -38%;
    width: 58%;
    aspect-ratio: 0.85;
    border-radius: 50% 50% 44% 44%;
    background: #0B0607;
    transform: translateX(-50%);
    box-shadow: 0 0 22px rgba(255, 240, 205, 0.12);
}

.head::after {
    content: '';
    position: absolute;
    left: -30%;
    right: -30%;
    top: 88%;
    height: 50%;
    border-radius: 50% 50% 0 0;
    background: #0B0607;
}

.head-friend {
    width: 52%;
    top: -30%;
    animation: lean 5s ease-in-out infinite;
}

@keyframes lean {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    50% { transform: translateX(-54%) rotate(-6deg); }
}

/* Films kept on this device, shown as strips of film with sprocket holes */
.library {
    width: 100%;
    margin-top: 32px;
    text-align: left;
}

.library-title {
    font-family: var(--font-marquee);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #E7C36A;
}

.library-usage {
    margin-top: 2px;
    font-size: 14px;
    color: var(--muted);
}

.library-list {
    margin-top: 12px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.library-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 10px 16px 16px;
    border-radius: 4px;
    background:
        radial-gradient(circle, rgba(255, 240, 205, 0.55) 0 2.5px, transparent 3px) 4px 3px / 14px 10px repeat-x,
        radial-gradient(circle, rgba(255, 240, 205, 0.55) 0 2.5px, transparent 3px) 4px calc(100% - 3px) / 14px 10px repeat-x,
        #140C0E;
    border: 1px solid #3B2A31;
}

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

.library-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-meta {
    font-size: 13px;
    color: var(--muted);
}

.library-progress {
    height: 3px;
    margin-top: 6px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}

.library-progress span {
    display: block;
    height: 100%;
    background: var(--stamp);
}

.library-delete {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
}

.library-delete:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
}

/* Second tap confirms, so a film is never deleted by accident */
.library-delete.is-confirming {
    background: var(--stamp);
    color: #FFF;
}

.lobby .ticket {
    width: 100%;
    max-width: 440px;
    margin-top: 28px;
    transform: rotate(-2deg);
}

@media (max-width: 640px) {
    .lobby {
        padding: calc(62px + var(--safe-top)) 44px calc(100px + var(--safe-bottom));
    }

    .theater .lang-switch {
        right: 50%;
        transform: translateX(50%);
        top: calc(50px + var(--safe-top));
    }

    .marquee {
        margin-top: 26px;
        padding: 14px 18px 12px;
    }

    .stubs {
        grid-template-columns: 1fr;
    }

    .seats .seat:nth-child(-n+3),
    .seats .seat:nth-last-child(-n+3) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .curtain {
        animation: none;
        width: clamp(44px, 10vw, 150px);
    }

    .marquee::before,
    .drop-zone::before,
    .head-friend {
        animation: none;
    }
}

/* Ticket: the room code printed on a perforated cinema ticket */
.ticket {
    margin-top: 24px;
    display: flex;
    color: var(--paper-ink);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

.ticket-main,
.ticket-stub {
    background: var(--paper);
}

/* Half-circle notches at both ends of the tear line */
.ticket-main {
    -webkit-mask:
        radial-gradient(circle 10px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 10px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle 10px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 10px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 18px;
    border-radius: 12px 0 0 12px;
    text-align: left;
}

.ticket-stub {
    width: 72px;
    display: grid;
    place-items: center;
    border-left: 2px dashed rgba(42, 29, 26, 0.35);
    border-radius: 0 12px 12px 0;
    color: var(--stamp);
    -webkit-mask:
        radial-gradient(circle 10px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 10px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle 10px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 10px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}

.ticket-stub .ms {
    font-size: 32px;
}

.ticket-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(42, 29, 26, 0.6);
}

.ticket-room {
    font-family: var(--font-marquee);
    font-size: clamp(34px, 10vw, 46px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.ticket-title {
    margin-top: 8px;
    font-size: 14px;
    color: rgba(42, 29, 26, 0.75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-title:empty {
    display: none;
}

/* Watch screen */
.yt-box iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Catches taps and mouse moves that the YouTube frame would otherwise swallow */
.yt-shield {
    position: absolute;
    inset: 0;
}

.watch {
    position: fixed;
    inset: 0;
    background: #000;
    overflow: hidden;
    --chat-space: 0px;
    --chat-width: 360px;
}

.player {
    position: absolute;
    top: 0;
    left: 0;
    /* Video elements don't stretch between offsets, so size it explicitly beside the chat */
    width: calc(100% - var(--chat-space));
    height: 100%;
    object-fit: contain;
    background: #000;
}

.topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: var(--chat-space);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(12px + var(--safe-top)) 12px 32px 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    transition: opacity 0.25s;
}

.title {
    min-width: 0;
    font-family: var(--font-marquee);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--muted);
}

.status.is-live {
    color: var(--text);
}

.status.is-live::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--stamp);
    vertical-align: 1px;
}

.topbar .chat-toggle {
    margin-left: auto;
}

.icon-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text);
}

.icon-button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.controls {
    position: absolute;
    left: 0;
    right: var(--chat-space);
    bottom: 0;
    padding: 40px 16px calc(12px + var(--safe-bottom));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    transition: opacity 0.25s;
}

/* Controls fade out while playing and come back on any pointer or key activity */
.watch.is-idle .controls,
.watch.is-idle .topbar {
    opacity: 0;
    pointer-events: none;
}

.watch.is-idle {
    cursor: none;
}

.seek {
    width: 100%;
    height: 20px;
    appearance: none;
    background: transparent;
    cursor: pointer;
    --progress: 0%;
    --buffered: 0%;
}

.seek::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--stamp) var(--progress), rgba(255, 255, 255, 0.55) var(--progress), rgba(255, 255, 255, 0.55) var(--buffered), rgba(255, 255, 255, 0.25) var(--buffered));
}

.seek::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--stamp) var(--progress), rgba(255, 255, 255, 0.55) var(--progress), rgba(255, 255, 255, 0.55) var(--buffered), rgba(255, 255, 255, 0.25) var(--buffered));
}

.seek::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--paper);
}

.seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: var(--paper);
}

.control-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.play-button {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    color: var(--paper-ink);
}

.play-button .ms {
    font-size: 32px;
}

.time {
    margin-left: 8px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
}

.push-right {
    margin-left: auto;
}

/* Subtitles: drawn on each side from shared cues, since captured video frames don't include text tracks */
.subtitle {
    position: absolute;
    left: calc((100% - var(--chat-space)) / 2);
    bottom: calc(120px + var(--safe-bottom));
    transform: translateX(-50%);
    width: max-content;
    max-width: min(90%, 900px);
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    font-size: clamp(17px, 2.6vw, 30px);
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: pre-line;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    transition: bottom 0.25s;
}

.watch.is-idle .subtitle {
    bottom: calc(40px + var(--safe-bottom));
}

.subs-panel {
    position: absolute;
    right: calc(16px + var(--chat-space));
    bottom: calc(112px + var(--safe-bottom));
    z-index: 6;
    width: min(320px, calc(100% - 32px));
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--velvet-raised);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.source-panel {
    top: calc(64px + var(--safe-top));
    bottom: auto;
}

.source-form {
    margin-top: 6px;
}

.source-form .link-row {
    margin-top: 6px;
}

.source-panel .link-input,
.source-panel .link-go {
    height: 44px;
}

.subs-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subs-hint {
    margin-top: 4px;
    font-size: 14px;
    color: var(--muted);
}

.subs-pick {
    width: 100%;
    height: 44px;
    margin-top: 12px;
    font-size: 15px;
}

.subs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    font-size: 15px;
}

.subs-row-hint {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.subs-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--stamp);
}

.stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.stepper button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 18px;
}

.stepper button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.stepper span {
    min-width: 58px;
    text-align: center;
    font-size: 14px;
}

.subs-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
}

.icon-button.is-active {
    color: var(--paper);
    background: rgba(241, 230, 210, 0.16);
}

/* Drop target hint while dragging a file over the player */
.watch.is-dragging::after {
    content: 'Altyazı ya da video dosyasını bırak';
    position: absolute;
    inset: 16px;
    z-index: 7;
    display: grid;
    place-items: center;
    border: 2px dashed var(--paper);
    border-radius: 16px;
    background: rgba(27, 18, 22, 0.85);
    font-size: 20px;
    font-weight: 600;
}

/* Waiting / invite overlay */
.overlay {
    position: absolute;
    inset: 0;
    right: var(--chat-space);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 120px;
    background: rgba(27, 18, 22, 0.88);
}

.overlay-card {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.overlay-status {
    font-size: 17px;
    color: var(--muted);
}

.overlay-status:empty {
    display: none;
}

.invite {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.invite-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.invite-actions .primary-button {
    width: 100%;
}

#unmute {
    margin-top: 16px;
}

/* Voice: the other side's mic state, lit while they speak */
.remote-voice {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: var(--muted);
    transition: background-color 0.15s, color 0.15s;
}

.remote-voice .ms {
    font-size: 18px;
}

.remote-voice.is-speaking {
    background: var(--stamp);
    color: #FFF;
}

/* Mic on: filled like the play button so it's obvious you're being heard; the film ducking toggle shows its state the same way */
#mic.is-on,
#duck.is-on {
    background: var(--stamp);
    color: #FFF;
}

/* Camera bubbles: small, in a corner of the picture, draggable to any other corner */
.faces {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.faces.is-dragging {
    cursor: grabbing;
    transition: none;
}

.faces[data-corner="top-right"] {
    top: calc(64px + var(--safe-top));
    right: calc(16px + var(--chat-space));
}

.faces[data-corner="top-left"] {
    top: calc(64px + var(--safe-top));
    left: 16px;
    align-items: flex-start;
}

.faces[data-corner="bottom-right"] {
    bottom: calc(120px + var(--safe-bottom));
    right: calc(16px + var(--chat-space));
    flex-direction: column-reverse;
}

.faces[data-corner="bottom-left"] {
    bottom: calc(120px + var(--safe-bottom));
    left: 16px;
    align-items: flex-start;
    flex-direction: column-reverse;
}

.face {
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 2px solid rgba(241, 230, 210, 0.35);
    border-radius: 12px;
    background: #000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: width 0.2s;
}

.remote-face {
    width: 176px;
    cursor: zoom-in;
}

/* Enlarged: a real view of the other person, still leaving most of the film visible */
.remote-face.is-large {
    width: min(38vw, 480px);
    cursor: zoom-out;
}

.self-face {
    width: 96px;
    transform: scaleX(-1);
}

/* While the other person is enlarged, your own preview tucks into its corner */
.faces.has-large .self-face {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 72px;
    border-width: 1px;
}

.faces.has-large[data-corner$="left"] .self-face {
    right: auto;
    left: 8px;
}

#camera.is-on {
    background: var(--stamp);
    color: #FFF;
}

@media (max-width: 480px) {
    .remote-face {
        width: 120px;
    }

    /* On a portrait phone this fills the empty band above the film */
    .remote-face.is-large {
        width: min(calc(100vw - 32px), 300px);
    }

    .self-face {
        width: 72px;
    }
}

/* Chat: a side column on wide screens (the picture shrinks to fit), a bottom sheet on phones */
.unread {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--stamp);
    color: #FFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.chat {
    position: absolute;
    z-index: 8;
    display: flex;
    flex-direction: column;
    background: var(--velvet-raised);
    cursor: auto;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(8px + var(--safe-top)) 8px 8px 20px;
    border-bottom: 1px solid var(--line);
}

.chat-header h2 {
    font-family: var(--font-marquee);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-empty {
    margin: auto 0;
    padding: 0 8px;
    font-size: 15px;
    color: var(--muted);
    text-align: center;
    text-wrap: balance;
}

.chat-message {
    max-width: 85%;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.chat-message.is-mine {
    align-self: flex-end;
    border-radius: 14px 14px 4px 14px;
    background: var(--stamp);
    color: #FFF;
}

.chat-message.is-theirs {
    align-self: flex-start;
    border-radius: 14px 14px 14px 4px;
    background: #3A2830;
}

.chat-sender {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.chat-message.is-system {
    align-self: center;
    padding: 2px 0;
    font-size: 13px;
    color: var(--muted);
    background: none;
}

.chat-form {
    display: flex;
    gap: 8px;
    padding: 12px 12px calc(12px + var(--safe-bottom));
    border-top: 1px solid var(--line);
}

.chat-form input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--velvet);
    font-size: 16px;
}

.chat-form input:focus {
    outline: none;
    border-color: var(--paper);
}

.chat-form input:disabled {
    opacity: 0.6;
}

.send-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--stamp);
    color: #FFF;
}

.send-button:disabled {
    background: var(--line);
    color: var(--muted);
}

@media (max-width: 899px) {
    .chat {
        left: 0;
        right: 0;
        bottom: 0;
        height: 55dvh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5);
    }

    .chat-header {
        padding-top: 8px;
    }

    /* Keep the film visible above the chat sheet */
    .watch.chat-open .player {
        height: 45dvh;
    }

    .watch.chat-open .subtitle {
        bottom: calc(55dvh + 12px);
    }
}

@media (min-width: 900px) {
    .watch.chat-open {
        --chat-space: var(--chat-width);
    }

    .chat {
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--chat-width);
        border-left: 1px solid var(--line);
    }
}

/* Toast */
.toast {
    position: fixed;
    left: 50%;
    top: calc(72px + var(--safe-top));
    z-index: 20;
    max-width: calc(100% - 32px);
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--paper);
    color: var(--paper-ink);
    font-size: 15px;
    font-weight: 500;
    opacity: 0;
    transform: translate(-50%, -8px);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 480px) {
    .time {
        margin-left: 4px;
        font-size: 13px;
    }

    .control-row {
        gap: 2px;
    }

    .control-row .icon-button {
        width: 38px;
        height: 38px;
    }

    /* Phones set the volume with their own buttons, which leaves room for the mic */
    #mute {
        display: none;
    }
}

/* Small phones: the time moves above the seek bar so every button fits in one row */
@media (max-width: 400px) {
    .time {
        position: absolute;
        top: 16px;
        right: 16px;
        margin: 0;
        font-size: 12px;
    }

    .push-right {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}