.short-film-invitation, .short-film-dialog, .short-film-tab {
    font-family: 'Inter', sans-serif; box-sizing: border-box;
}
/* A small walnut television: convex glass, two tuning dials and a speaker. */
.short-film-invitation, .short-film-dialog {
    color: #f1ebcf; border: 3px solid #2e1913; border-radius: 24px;
    background: repeating-linear-gradient(3deg, #0000 0 4px, #2d130b26 5px 6px),
        linear-gradient(110deg, #765039, #a67a51 40%, #704831 75%, #4c3023);
    box-shadow: inset 0 0 0 2px #c09b6b80, inset 0 -8px 12px #25110e80, 0 14px 40px #0008;
    grid-template-columns: minmax(0, 1fr) 34px; gap: 12px;
    padding: 16px 13px 20px 16px;
}
.short-film-invitation[hidden] { display: none; }
.short-film-invitation {
    display: grid; position: fixed; left: 22px; bottom: 72px; z-index: 950;
    width: min(360px, calc(100vw - 36px));
}
.short-film-tv-aerial { position: absolute; left: 50%; top: -37px; width: 2px; height: 38px; pointer-events: none; }
.short-film-tv-aerial::before, .short-film-tv-aerial::after {
    content: ''; position: absolute; bottom: 0; width: 3px; height: 45px;
    background: linear-gradient(90deg, #6f6c62, #dedacb, #7f7b70); border-radius: 2px;
    transform-origin: center bottom; box-shadow: 0 1px 2px #0008;
}
.short-film-tv-aerial::before { transform: rotate(-47deg); }
.short-film-tv-aerial::after { transform: rotate(40deg); height: 38px; }
.short-film-tv-screen {
    --text: #f1ebcf; --text-muted: #c4c5b5; --red: #df6976; --burgundy: #7f2035;
    --red-dark: #a04558; --line: #c4c5b54d; --surface: #111a16;
    position: relative; isolation: isolate; min-width: 0;
    border: 7px solid #24251f; border-radius: 40px / 26px;
    padding: 22px 16px; color: var(--text); text-align: center;
    background: radial-gradient(ellipse at 46% 42%, #304138, #18251f 65%, #0a110e);
    box-shadow: 0 0 0 2px #c5b18a, 0 0 0 4px #37281f, inset 0 0 24px 8px #0009;
}
.short-film-tv-screen::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(132deg, #f1ebcf14, #fff0 34%),
        repeating-linear-gradient(0deg, #0000 0 2px, #0002 2px 3px);
}
.short-film-tv-controls { display: flex; flex-direction: column; align-items: center; gap: 13px; padding-top: 6px; pointer-events: none; }
.short-film-tv-dial {
    position: relative; display: block; flex: 0 0 auto; width: 29px; height: 29px; border-radius: 50%;
    border: 3px solid #352a22;
    background: radial-gradient(circle at 35% 30%, #e7ddbf, #b09f7c 62%, #756c55 66%, #e0d4af 73%);
    box-shadow: 1px 2px 2px #0008, 0 0 0 2px #c0a47b;
}
.short-film-tv-dial::after { content: ''; position: absolute; top: 2px; left: 10px; height: 15px; width: 2px; background: #4a4131; transform: rotate(28deg); }
.short-film-tv-dial + .short-film-tv-dial { transform: rotate(65deg); }
.short-film-tv-speaker { width: 25px; min-height: 63px; flex: 1; max-height: 110px; border-radius: 5px; background: repeating-linear-gradient(0deg, #34251d 0 3px, #b18a5d 3px 5px); box-shadow: inset 0 0 0 2px #4d3325; }
.short-film-tv-light { display: block; width: 5px; height: 5px; margin-top: 0; border-radius: 50%; background: #e9ae6f; box-shadow: 0 0 6px #f1ba77; }
.short-film-eyebrow { display: block; color: #d3c9a8; font-size: 9px; font-weight: 500; letter-spacing: .14em; }
.short-film-logo { display: block; width: 110px; height: 40px; object-fit: contain; margin: 0 auto 15px; filter: brightness(0) invert(1); }
.short-film-open {
    display: block; width: 100%; border: 0; background: none; padding: 11px 0 0; color: inherit;
    font: 32px/1.05 'Bebas Neue', Impact, sans-serif; letter-spacing: .02em; text-align: center; cursor: pointer;
}
.short-film-invitation p { font-size: 11px; line-height: 1.5; margin: 10px auto 0; max-width: 200px; color: var(--text-muted); }
.short-film-dismiss {
    position: absolute; right: -9px; top: -13px; z-index: 2; width: 34px; height: 34px;
    border: 2px solid #b08b65; border-radius: 50%; background: #30211b; color: #f1ebcf; font-size: 24px; cursor: pointer;
    box-shadow: 0 2px 5px #0007;
}
.short-film-tab {
    position: fixed; bottom: 20px; left: 22px; z-index: 940;
    color: var(--text); background: var(--surface-raised);
    border: 1px solid var(--line); border-radius: 8px; padding: 12px 17px;
    box-shadow: 0 3px 16px #0003; font-size: 12px; font-weight: 500; cursor: pointer;
}
.short-film-dialog {
    width: min(650px, calc(100vw - 36px)); max-height: calc(100dvh - 76px);
    margin: auto; padding: 22px 18px 26px 22px; gap: 18px;
    grid-template-columns: minmax(0, 1fr) 40px; overflow: visible;
}
.short-film-dialog[open] { display: grid; }
.short-film-dialog::backdrop { background: #090708cc; backdrop-filter: blur(8px); }
.short-film-dialog .short-film-tv-screen { max-height: calc(100dvh - 132px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #9b9a7e #17221c; padding: 24px 25px; overscroll-behavior: contain; }
.short-film-dialog .short-film-tv-controls { padding-top: 25px; }
.short-film-dialog .short-film-tv-dial { width: 34px; height: 34px; }
.short-film-dialog .short-film-tv-dial::after { left: 12px; top: 4px; }
.short-film-dialog .short-film-tv-speaker { flex: 0 0 100px; margin-top: 8px; }
.short-film-dialog h2 { font: 57px/.95 'Bebas Neue', Impact, sans-serif; letter-spacing: .025em; margin: 15px 0 20px; color: var(--text); }
.short-film-dialog h2 span { color: var(--red); }
.short-film-dialog p { font-size: 13px; line-height: 1.65; margin: 0 0 14px; }
.short-film-dialog .short-film-intro { color: var(--text-muted); }
.short-film-dialog form { margin-top: 22px; text-align: left; }
.short-film-dialog label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 14px; }
.short-film-dialog input {
    display: block; width: 100%; min-height: 44px; margin-top: 7px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text);
    font: 16px/1.3 'Inter', sans-serif; box-sizing: border-box;
}
.short-film-dialog input::placeholder { color: var(--text-muted); opacity: .8; }
.short-film-dialog :focus-visible, .short-film-invitation :focus-visible, .short-film-tab:focus-visible { outline: 2px solid #df6976; outline-offset: 3px; }
.short-film-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.short-film-fields label { min-width: 0; }
.short-film-dialog .short-film-help { font-size: 11px; line-height: 1.55; color: var(--text-muted); }
.short-film-help a { color: inherit; text-decoration: underline; }
.short-film-dialog .short-film-trap { display: none; }
.short-film-submit { width: 100%; padding: 15px 18px; margin: 4px 0 12px; border: 0; border-radius: 7px; background: var(--burgundy); color: #faf5f0; font: 500 14px 'Inter', sans-serif; cursor: pointer; }
.short-film-submit:hover { background: var(--red-dark); }
.short-film-submit span { float: right; }
.short-film-submit:disabled { opacity: .7; cursor: default; }
.short-film-dialog .short-film-status:empty { display: none; }
.short-film-dialog .short-film-status { padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
body:has(dialog[open]) .short-film-tab,
body:has(.modal-overlay.active) .short-film-tab,
body:has(.shipping-modal.active) .short-film-tab,
body:has(.coin-modal.active) .short-film-tab,
body:has(dialog[open]) .short-film-invitation,
body:has(.modal-overlay.active) .short-film-invitation,
body:has(.shipping-modal.active) .short-film-invitation,
body:has(.coin-modal.active) .short-film-invitation { visibility: hidden; }
@media (max-width: 768px) {
    .short-film-tab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); left: 14px; padding: 11px 13px; }
    .short-film-invitation { bottom: calc(124px + env(safe-area-inset-bottom, 0px)); left: 18px; }
    .short-film-dialog { padding: 15px 10px 18px 14px; gap: 9px; grid-template-columns: minmax(0, 1fr) 28px; }
    .short-film-dialog .short-film-tv-screen { padding: 22px 15px; max-height: calc(100dvh - 114px); border-width: 5px; border-radius: 30px / 20px; }
    .short-film-dialog .short-film-tv-dial { width: 25px; height: 25px; }
    .short-film-dialog .short-film-tv-dial::after { left: 8px; top: 1px; height: 13px; }
    .short-film-dialog h2 { font-size: 46px; }
    .short-film-fields { grid-template-columns: 1fr; gap: 0; }
}