/*
    Film del giorno — l'aspetto delle sue pagine pubbliche (README daily D61).

    Una sala cinematografica: il sipario di velluto rosso con le luci del marquee, la pellicola con i fori
    attorno alle foto, il biglietto con le tacche per gli indizi, il ciak per l'etichetta. Titoli da cartellone
    (maiuscolo, stretto, oro); le citazioni come in un copione. Sopra le forme del foglio del modulo
    (dailyguess.css, importato qui sotto: il layout carica i fogli dei giochi accesi, e il Film non deve
    dipendere dal Personaggio acceso).

    Tutto disegnato qui, solo CSS e SVG nostri: nessuna immagine protetta, nessun font esterno (D49) —
    il carattere dei titoli è la prima famiglia stretta che il sistema ha.

    Tutto sotto .theme-film, la classe che il layout mette sul contenitore della pagina, sulla scheda e sulla
    card in home. Le VARIANTI per tipo stanno sulle classi dg-cat-* che le pagine mettono su ciò che mostrano
    (il tipo è il primo indizio: non è uno spoiler): film dal vero = la base (pellicola e ciak); serie TV = lo
    schermo del televisore (cornice, scanline sottili, numero di stagione e di episodio); animazione = il
    fotogramma disegnato (bordo a mano, stelline, linee di movimento). Cambiano pochi ornamenti, non la grafica.
*/

@import url("dailyguess.css");

.theme-film {
    --bg: #fbf6ee;
    --surface: #fffdf9;
    --surface-2: #f6ede1;
    --line: #eadfce;
    --line-strong: #d6c3a4;
    --ink: #24161a;
    --ink-soft: #5a464a;
    --ink-faint: #85706f;

    --accent: #a4161f;
    --accent-ink: #ffffff;
    --accent-soft: #f8e4e1;

    --film-red: #b3202b;
    --film-red-deep: #5c0f19;
    --film-gold: #e9b949;
    --film-gold-deep: #b9801f;
    --film-ticket: #f6ebd3;
    --film-ticket-ink: #3a2a1c;
    --film-dark: #130b0d;
    --film-hole: #f2e8d5;
    --film-osd: #6dff9a;

    --dg-sun: var(--film-gold);
    --dg-paper: #fffaf0;
    --dg-hero:
        linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 20%, transparent 80%, rgba(0, 0, 0, .5)),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .26) 0 14px, rgba(255, 255, 255, .05) 14px 28px, rgba(0, 0, 0, .16) 28px 42px),
        linear-gradient(180deg, #8e1a26 0%, #6b1320 55%, #430b14 100%);
    --dg-poster: "Impact", "Haettenschweiler", "Arial Narrow Bold", "Franklin Gothic Medium", "Arial Narrow", "Roboto Condensed", sans-serif;
    --dg-script: "Courier New", Courier, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
    .theme-film {
        --bg: #0b0708;
        --surface: #161012;
        --surface-2: #1e1417;
        --line: #2b1b20;
        --line-strong: #4a2a32;
        --ink: #f6efe6;
        --ink-soft: #cdbfb2;
        --ink-faint: #968578;

        --accent: #f0c15a;
        --accent-ink: #1a1002;
        --accent-soft: #2b2010;

        --film-red: #d03a44;
        --film-ticket: #efe1c4;
        --film-dark: #060304;
        --film-hole: #d9ccb4;

        --dg-paper: #f3e8d2;
        --dg-hero:
            linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 20%, transparent 80%, rgba(0, 0, 0, .55)),
            repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 14px, rgba(255, 255, 255, .04) 14px 28px, rgba(0, 0, 0, .2) 28px 42px),
            linear-gradient(180deg, #701420 0%, #4d0d18 55%, #2e0810 100%);
    }
}

/* ---------- titoli da cartellone ---------- */

.theme-film main h1,
.theme-film main h2,
.theme-film .dg-snap .dg-name,
.theme-film .dg-plate-t {
    font-family: var(--dg-poster);
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.theme-film main h2 { font-size: 1.55rem; }

.theme-film .dg-hero h1,
.theme-film .dg-reveal h1 {
    font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.8rem);
    line-height: 1.02;
    color: #f7e2a6;
    background: linear-gradient(180deg, #fff3cf 0%, var(--film-gold) 55%, var(--film-gold-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
}

.game-tab.theme-film.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- pulsanti ---------- */

.theme-film .dg-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .78rem 1.45rem;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #ffd978, var(--film-gold) 45%, #d98a1b);
    color: #2a1703;
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 10px 26px -10px #f0a91b, inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: transform .15s ease, box-shadow .15s ease;
}

.theme-film .dg-cta:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 32px -10px #f0a91b, inset 0 1px 0 rgba(255, 255, 255, .55); }

.theme-film .dg-ghost {
    display: inline-flex;
    align-items: center;
    padding: .74rem 1.25rem;
    border-radius: 999px;
    border: 2px solid rgba(247, 226, 166, .6);
    color: #f7e2a6;
    font-weight: 700;
    text-decoration: none;
}

.theme-film .dg-ghost:hover { background: rgba(247, 226, 166, .14); text-decoration: none; }

/* ---------- la sala: sipario e luci del marquee ---------- */

.theme-film .dg-hero {
    background: var(--dg-hero);
    padding-block: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
    box-shadow: 0 26px 60px -30px #6b1320, inset 0 0 0 1px rgba(255, 215, 120, .18);
}

/* Le luci: due file di lampadine, in alto e in basso, che si accendono a turno. */
.theme-film .dg-hero::before,
.theme-film .dg-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    top: auto;
    bottom: auto;
    font-size: 0;
    transform: none;
    opacity: 1;
    color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Ccircle cx='14' cy='7' r='6.2' fill='%23ffb703' opacity='.22'/%3E%3Ccircle cx='14' cy='7' r='3.6' fill='%23ffd978'/%3E%3C/svg%3E") 0 0 / 28px 14px repeat-x;
    filter: drop-shadow(0 0 3px rgba(255, 183, 3, .8));
    pointer-events: none;
}

.theme-film .dg-hero::before { top: 10px; animation: film-lights 2.4s steps(1, end) infinite; }
.theme-film .dg-hero::after { bottom: 10px; animation: film-lights 2.4s steps(1, end) infinite reverse; }

@keyframes film-lights {
    0% { background-position-x: 0; opacity: 1; }
    50% { background-position-x: 14px; opacity: .78; }
}

.theme-film .dg-hero .dg-kicker {
    position: relative;
    padding: .62rem .85rem .32rem;
    margin-top: .35rem;
    border-radius: 4px;
    background: #17100f;
    color: #f7e2a6;
    letter-spacing: .12em;
    font-family: var(--dg-script);
    font-size: .76rem;
    overflow: hidden;
}

/* Il ciak: le strisce oblique sul bordo di sopra. */
.theme-film .dg-hero .dg-kicker::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 9px;
    background: repeating-linear-gradient(115deg, #f6efe6 0 11px, #17100f 11px 22px);
}

.theme-film .dg-hero p { color: rgba(255, 244, 220, .92); }
.theme-film .dg-hero .dg-count { color: rgba(255, 244, 220, .85); }
.theme-film .dg-hero .dg-count strong { color: #f7e2a6; }

/* ---------- la foto nella pellicola ---------- */

.theme-film .dg-polaroid {
    --cap: 2.9rem;
    position: relative;
    max-width: 340px;
    padding: .9rem 2.1rem var(--cap);
    background: var(--film-dark);
    border-radius: 6px;
    box-shadow: 0 24px 46px -18px rgba(0, 0, 0, .75);
    transform: rotate(-2deg);
}

.theme-film .dg-polaroid.tilt-right { transform: rotate(2deg); }
.theme-film .dg-polaroid:hover { transform: rotate(0deg) scale(1.02); }

/* I fori della pellicola, ai due lati. */
.theme-film .dg-polaroid::before,
.theme-film .dg-polaroid::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Crect x='3' y='6' width='10' height='16' rx='2.5' fill='%23f2e8d5'/%3E%3C/svg%3E") 0 0 / 16px 28px repeat-y;
    opacity: .9;
    pointer-events: none;
}

.theme-film .dg-polaroid::before { left: 7px; }
.theme-film .dg-polaroid::after { right: 7px; }

.theme-film .dg-polaroid img {
    aspect-ratio: 4 / 5;
    object-position: center 22%;
    border-radius: 2px;
    background: #2a1b1f;
    outline: 1px solid rgba(255, 215, 120, .25);
    outline-offset: -1px;
    filter: contrast(1.04) saturate(1.05);
}

.theme-film .dg-polaroid figcaption {
    bottom: .75rem;
    font-family: var(--dg-script);
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .06em;
    color: var(--film-gold);
}

.theme-film .dg-polaroid figcaption .dg-who {
    display: block;
    margin-top: .1rem;
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: .02em;
    color: #e9dcc5;
}

/* Il bollino «?» è il tagliando del biglietto, con le tacche ai lati. */
.theme-film .dg-sticker {
    top: -14px;
    right: -14px;
    width: 70px;
    height: 46px;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffd978, var(--film-gold));
    color: #2a1703;
    font-family: var(--dg-poster);
    font-size: 1.9rem;
    transform: rotate(9deg);
    box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .55);
    -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 97%, #000) 100% 0 / 51% 100% no-repeat;
    mask: radial-gradient(circle 7px at 0 50%, transparent 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 97%, #000) 100% 0 / 51% 100% no-repeat;
}

/* La foto del titolo, a round chiuso: sotto la data c'è anche chi è nella foto, quindi più spazio per la didascalia. */
.theme-film .dg-reveal { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.theme-film .dg-reveal .dg-polaroid { --cap: 4.4rem; }

@media (max-width: 760px) {
    .theme-film .dg-reveal { grid-template-columns: minmax(0, 1fr); }
}

.theme-film .dg-reveal .dg-was {
    background: linear-gradient(135deg, #ffd978, var(--film-gold) 55%, #d98a1b);
    color: #2a1703;
    font-family: var(--dg-script);
    letter-spacing: .1em;
}

/* ---------- gli indizi come biglietti del cinema ---------- */

.theme-film .dg-bubble {
    padding: 1rem 1.4rem 1rem 1.5rem;
    border: 0;
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent calc(3.4rem - 1px), rgba(58, 42, 28, .28) calc(3.4rem - 1px) 3.4rem, transparent 3.4rem),
        var(--film-ticket);
    color: var(--film-ticket-ink);
    font-weight: 600;
    box-shadow: none;
    -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) 100% 0 / 51% 100% no-repeat;
    mask: radial-gradient(circle 9px at 0 50%, transparent 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) 100% 0 / 51% 100% no-repeat;
}

.theme-film .dg-bubble::after { display: none; }

.theme-film .dg-bubble .dg-label {
    font-family: var(--dg-script);
    color: var(--film-red);
    letter-spacing: .1em;
}

.theme-film .dg-hero .dg-bubble { color: var(--film-ticket-ink); }

/* ---------- la scala: i fotogrammi di una pellicola ---------- */

.theme-film .dg-ladder {
    position: relative;
    padding: 2rem 1.2rem 1.7rem;
    border: 0;
    border-radius: 6px;
    background: var(--film-dark);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
}

.theme-film .dg-ladder::before,
.theme-film .dg-ladder::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Crect x='6' y='3' width='16' height='10' rx='2.5' fill='%23f2e8d5'/%3E%3C/svg%3E") 0 0 / 28px 16px repeat-x;
    opacity: .9;
}

.theme-film .dg-ladder::before { top: 6px; }
.theme-film .dg-ladder::after { bottom: 6px; }

.theme-film .dg-step .dg-step-l { color: #cdbfb2; font-family: var(--dg-script); }
.theme-film .dg-step .dg-bar { border-radius: 4px; color: #2a1703; font-family: var(--dg-poster); font-weight: 400; letter-spacing: .03em; text-shadow: none; }
.theme-film .dg-step:nth-child(1) { --c: #ffd978; }
.theme-film .dg-step:nth-child(2) { --c: var(--film-gold); }
.theme-film .dg-step:nth-child(3) { --c: #e09a2b; }
.theme-film .dg-step:nth-child(4) { --c: #d6742c; }
.theme-film .dg-step:nth-child(5) { --c: #c9482f; }
.theme-film .dg-step:nth-child(6) { --c: #b3202b; }
.theme-film .dg-step:nth-child(7) { --c: #8a1521; }
.theme-film .dg-step:nth-child(n + 5) .dg-bar { color: #fff4dc; }

@media (max-width: 560px) {
    .theme-film .dg-ladder { padding-inline: .6rem; gap: .35rem; }
    .theme-film .dg-step .dg-bar { font-size: .95rem; }
    .theme-film .dg-step .dg-step-l { font-size: .68rem; }
}

.theme-film .dg-move { border-top: 0; position: relative; overflow: hidden; padding-top: 1.7rem; }

.theme-film .dg-move::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 10px;
    background: repeating-linear-gradient(115deg, #f6efe6 0 11px, #17100f 11px 22px);
}

/* ---------- archivio: una parete di fotogrammi ---------- */

.theme-film .dg-snap {
    position: relative;
    padding: 1.7rem .65rem 1.9rem;
    background: var(--film-dark);
    border-radius: 4px;
    color: #f3e9d8;
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .8);
}

.theme-film .dg-snap::before,
.theme-film .dg-snap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Crect x='6' y='3' width='16' height='10' rx='2.5' fill='%23f2e8d5'/%3E%3C/svg%3E") 0 0 / 28px 16px repeat-x;
    opacity: .85;
    pointer-events: none;
}

.theme-film .dg-snap::before { top: 5px; }
.theme-film .dg-snap::after { bottom: 5px; }

.theme-film .dg-snap img { aspect-ratio: 4 / 5; object-position: center 22%; background: #2a1b1f; border-radius: 2px; }
.theme-film .dg-snap .dg-date { color: var(--film-gold); font-family: var(--dg-script); letter-spacing: .04em; }
.theme-film .dg-snap .dg-name { font-size: 1.2rem; color: #fff4dc; }
.theme-film .dg-snap .dg-meter-l { color: #cdbfb2; }
.theme-film .dg-snap .dg-snap-know { color: #d8cab6; font-style: italic; }
.theme-film .dg-meter { background: #2e2023; }
.theme-film .dg-meter span { background: linear-gradient(90deg, var(--film-gold-deep), var(--film-gold)); }

/* ---------- il round chiuso ---------- */

.theme-film .dg-clues li {
    border-radius: 8px;
    background: var(--film-ticket);
    color: var(--film-ticket-ink);
    border-color: transparent;
}

.theme-film .dg-clues li::before { background: var(--film-red); color: #fff4dc; font-family: var(--dg-poster); font-weight: 400; }
.theme-film .dg-clues li:nth-child(n) { --c: var(--film-red); }

.theme-film .dg-tile:nth-child(1) { --c: var(--film-gold); }
.theme-film .dg-tile:nth-child(2) { --c: #d6742c; }
.theme-film .dg-tile:nth-child(3) { --c: var(--film-red); }
.theme-film .dg-tile:nth-child(4) { --c: #8a1521; }

.theme-film .dg-talk { background: linear-gradient(150deg, var(--accent-soft), var(--surface) 80%); }

/* «Lo sapevi?»: la pagina di un copione, con la citazione in carattere da macchina da scrivere. */
.theme-film .dg-know {
    position: relative;
    background: var(--surface);
    border-color: var(--line-strong);
}

.theme-film .dg-know::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    border-radius: 20px 0 0 20px;
    background: repeating-linear-gradient(180deg, var(--film-gold) 0 14px, transparent 14px 28px);
    opacity: .75;
}

.theme-film .dg-quote blockquote { font-family: var(--dg-script); font-size: 1rem; }
.theme-film .dg-quote blockquote::before { font-family: var(--dg-poster); color: var(--film-red); }
.theme-film .dg-fact-icon { background: var(--accent-soft); }

.theme-film .dg-facts [data-kind="incipit"] .dg-fact-icon::before { content: "📖"; }
.theme-film .dg-facts [data-kind="oscar"] .dg-fact-icon::before { content: "🏆"; }
.theme-film .dg-facts [data-kind="boxoffice"] .dg-fact-icon::before { content: "💰"; }
.theme-film .dg-facts [data-kind="budget"] .dg-fact-icon::before { content: "🧾"; }
.theme-film .dg-facts [data-kind="basedon"] .dg-fact-icon::before { content: "📚"; }
.theme-film .dg-facts [data-kind="filming"] .dg-fact-icon::before { content: "🎥"; }
.theme-film .dg-facts [data-kind="sequel"] .dg-fact-icon::before { content: "⏭️"; }

/* Le foto degli indizi, con chi c'è e il credito: provini appesi. */
.theme-film .dg-plate { border-radius: 4px; background: var(--film-dark); color: #f3e9d8; border: 0; padding: .55rem .55rem 0; }
.theme-film .dg-plate img { aspect-ratio: 4 / 5; object-position: center 22%; border-radius: 2px; }
.theme-film .dg-plate-n { color: var(--film-gold); font-family: var(--dg-script); }
.theme-film .dg-plate-t { color: #fff4dc; }
.theme-film .dg-plate-c { color: #b9aa96; }
.theme-film .dg-plate-c a { color: #f0c15a; }

/* ---------- il video: uno schermo con il sipario ---------- */

.theme-film .dg-video { margin-bottom: 1rem; }

.theme-film .dg-video-box { margin: 0; }

.theme-film .dg-video-frame {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at center, rgba(255, 224, 150, .22), transparent 62%),
        var(--dg-hero);
    border: 6px solid var(--film-dark);
    box-shadow: 0 0 0 1px var(--line-strong), 0 22px 44px -24px rgba(0, 0, 0, .8);
}

.theme-film .dg-video-box.is-live .dg-video-frame { background: #000; }
.theme-film .dg-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.theme-film .dg-video-play {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    border: 0;
    background: transparent;
    color: #f7e2a6;
    font: inherit;
    font-family: var(--dg-poster);
    font-size: 1.15rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

.theme-film .dg-video-play[hidden] { display: none; }

.theme-film .dg-video-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd978, var(--film-gold) 55%, #d98a1b);
    box-shadow: 0 0 0 6px rgba(255, 217, 120, .22), 0 12px 28px -8px #000;
    transition: transform .15s ease;
}

.theme-film .dg-video-icon::before {
    content: "";
    margin-left: 6px;
    border-style: solid;
    border-width: 14px 0 14px 23px;
    border-color: transparent transparent transparent #2a1703;
}

.theme-film .dg-video-play:hover .dg-video-icon,
.theme-film .dg-video-play:focus-visible .dg-video-icon { transform: scale(1.08); }

.theme-film .dg-video-box figcaption { margin-top: .5rem; font-size: .8rem; color: var(--ink-faint); font-family: var(--dg-script); overflow-wrap: anywhere; }

/* ---------- classifica ---------- */

.theme-film .dg-place.p1 { --c: var(--film-gold); }
.theme-film .dg-initial { background: var(--accent-soft); color: var(--accent); }

/* =====================================================================================================
   Le varianti per tipo (README daily D61). Poche cose cambiano: la cornice della foto, gli ornamenti
   della sala, la carta dell'archivio. Il film dal vero è la base qui sopra.
   ===================================================================================================== */

/* ---------- serie TV: lo schermo del televisore ---------- */

.theme-film .dg-hero.dg-cat-serie {
    border: 10px solid #1b1517;
    border-radius: 34px;
    padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.2rem);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, .6), 0 26px 60px -30px #6b1320, 0 0 0 2px var(--line-strong);
}

/* Le scanline sottili sopra tutto lo schermo. */
.theme-film .dg-hero.dg-cat-serie::before {
    inset: 0;
    top: 0;
    height: auto;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .17) 0 1px, transparent 1px 3px);
    filter: none;
    animation: none;
    z-index: 2;
}

/* L'indicazione a schermo: stagione ed episodio, verde da televisore. */
.theme-film .dg-hero.dg-cat-serie::after {
    content: "S01 · E01";
    top: 1rem;
    bottom: auto;
    left: auto;
    right: 1.4rem;
    height: auto;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .12em;
    font-family: var(--dg-script);
    color: var(--film-osd);
    text-shadow: 0 0 8px rgba(109, 255, 154, .7);
    background: none;
    filter: none;
    animation: none;
    z-index: 3;
}

.theme-film .dg-hero.dg-cat-serie .dg-polaroid { border-radius: 24px; padding: 1rem 1rem var(--cap); background: #1b1517; }
.theme-film .dg-hero.dg-cat-serie .dg-polaroid::before,
.theme-film .dg-hero.dg-cat-serie .dg-polaroid::after,
.theme-film .dg-round.dg-cat-serie .dg-polaroid::before,
.theme-film .dg-round.dg-cat-serie .dg-polaroid::after,
.theme-film .dg-snap.dg-cat-serie::before { background: none; }

.theme-film .dg-round.dg-cat-serie .dg-polaroid { border-radius: 24px; padding: 1rem 1rem var(--cap); background: #1b1517; }

/* Lo schermo di una foto: le scanline sopra l'immagine, la spia del televisore in basso a sinistra. */
.theme-film .dg-hero.dg-cat-serie .dg-polaroid::before,
.theme-film .dg-round.dg-cat-serie .dg-polaroid::before {
    inset: 1rem 1rem var(--cap);
    left: 1rem;
    width: auto;
    border-radius: 14px;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .45);
    opacity: 1;
}

.theme-film .dg-hero.dg-cat-serie .dg-polaroid::after,
.theme-film .dg-round.dg-cat-serie .dg-polaroid::after {
    inset: auto auto .95rem 1.2rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--film-osd);
    box-shadow: 0 0 8px var(--film-osd);
    opacity: 1;
}

.theme-film .dg-hero.dg-cat-serie .dg-polaroid img,
.theme-film .dg-round.dg-cat-serie .dg-polaroid img { border-radius: 14px; }

.theme-film .dg-hero.dg-cat-serie .dg-polaroid figcaption,
.theme-film .dg-round.dg-cat-serie .dg-polaroid figcaption { left: 2.4rem; right: 1rem; text-align: left; }

/* Una cartolina dell'archivio che è una serie: un piccolo televisore, con stagione ed episodio sull'immagine. */
.theme-film .dg-snap.dg-cat-serie {
    padding: .7rem .7rem .85rem;
    border-radius: 20px;
    border: 5px solid #241b1e;
    background: #1b1517;
}

.theme-film .dg-snap.dg-cat-serie::before {
    inset: .7rem .7rem auto;
    bottom: auto;
    left: .7rem;
    right: .7rem;
    height: auto;
    aspect-ratio: 4 / 5;
    z-index: 2;
    border-radius: 12px;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
    opacity: 1;
}

.theme-film .dg-snap.dg-cat-serie::after {
    content: "S01 · E01";
    inset: 1.1rem auto auto 1.1rem;
    width: auto;
    height: auto;
    z-index: 3;
    padding: .2rem .35rem;
    border-radius: 3px;
    font: 700 .7rem/1 var(--dg-script);
    letter-spacing: .1em;
    color: var(--film-osd);
    text-shadow: 0 0 6px rgba(109, 255, 154, .7);
    background: rgba(0, 0, 0, .6);
    opacity: 1;
}

.theme-film .dg-snap.dg-cat-serie img { border-radius: 12px; }

/* ---------- animazione: il fotogramma disegnato ---------- */

.theme-film .dg-hero.dg-cat-film-animazione,
.theme-film .dg-hero.dg-cat-serie-animazione {
    background:
        repeating-conic-gradient(from 0deg at 14% 52%, rgba(255, 255, 255, .075) 0 3deg, transparent 3deg 10deg),
        var(--dg-hero);
    border: 4px solid var(--film-gold);
    border-radius: 34px 22px 38px 24px / 24px 36px 22px 34px;
}

/* Al posto delle lampadine: stelline sparse. */
.theme-film .dg-hero.dg-cat-film-animazione::before,
.theme-film .dg-hero.dg-cat-serie-animazione::before {
    inset: 0;
    top: 0;
    height: auto;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z' fill='%23ffe9a8'/%3E%3C/svg%3E") 8% 22% / 22px 22px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z' fill='%23ffe9a8'/%3E%3C/svg%3E") 46% 12% / 14px 14px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z' fill='%23ffe9a8'/%3E%3C/svg%3E") 94% 70% / 26px 26px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z' fill='%23ffe9a8'/%3E%3C/svg%3E") 38% 90% / 16px 16px no-repeat;
    filter: drop-shadow(0 0 5px rgba(255, 233, 168, .8));
    animation: film-twinkle 3.2s ease-in-out infinite;
}

.theme-film .dg-hero.dg-cat-film-animazione::after,
.theme-film .dg-hero.dg-cat-serie-animazione::after { display: none; }

@keyframes film-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* La foto: un fotogramma con il bordo tracciato a mano, senza fori. */
.theme-film .dg-hero.dg-cat-film-animazione .dg-polaroid,
.theme-film .dg-hero.dg-cat-serie-animazione .dg-polaroid,
.theme-film .dg-round.dg-cat-film-animazione .dg-polaroid,
.theme-film .dg-round.dg-cat-serie-animazione .dg-polaroid {
    padding: 1rem 1rem var(--cap);
    border-radius: 18px 26px 16px 28px / 26px 16px 28px 18px;
    background: #fffaf0;
    border: 3px solid #2b1a10;
    box-shadow: 6px 8px 0 #2b1a10, 0 24px 44px -18px rgba(0, 0, 0, .6);
}

.theme-film .dg-hero.dg-cat-film-animazione .dg-polaroid::before,
.theme-film .dg-hero.dg-cat-serie-animazione .dg-polaroid::before,
.theme-film .dg-round.dg-cat-film-animazione .dg-polaroid::before,
.theme-film .dg-round.dg-cat-serie-animazione .dg-polaroid::before {
    inset: .5rem;
    width: auto;
    border: 2px dashed #2b1a10;
    border-radius: 14px 22px 12px 24px / 22px 12px 24px 14px;
    background: none;
    opacity: .45;
}

/* Le linee di movimento, dietro l'angolo in basso a destra della foto. */
.theme-film .dg-hero.dg-cat-film-animazione .dg-polaroid::after,
.theme-film .dg-hero.dg-cat-serie-animazione .dg-polaroid::after,
.theme-film .dg-round.dg-cat-film-animazione .dg-polaroid::after,
.theme-film .dg-round.dg-cat-serie-animazione .dg-polaroid::after {
    inset: auto auto .8rem 1rem;
    width: 52px;
    height: 24px;
    background: repeating-linear-gradient(180deg, #2b1a10 0 3px, transparent 3px 8px);
    -webkit-mask: linear-gradient(90deg, #000 40%, transparent);
    mask: linear-gradient(90deg, #000 40%, transparent);
    opacity: .8;
}

.theme-film .dg-hero.dg-cat-film-animazione .dg-polaroid img,
.theme-film .dg-hero.dg-cat-serie-animazione .dg-polaroid img,
.theme-film .dg-round.dg-cat-film-animazione .dg-polaroid img,
.theme-film .dg-round.dg-cat-serie-animazione .dg-polaroid img {
    border-radius: 12px 20px 10px 22px / 20px 10px 22px 12px;
    outline: 2px solid #2b1a10;
    outline-offset: -2px;
}

.theme-film .dg-hero.dg-cat-film-animazione .dg-polaroid figcaption,
.theme-film .dg-hero.dg-cat-serie-animazione .dg-polaroid figcaption,
.theme-film .dg-round.dg-cat-film-animazione .dg-polaroid figcaption,
.theme-film .dg-round.dg-cat-serie-animazione .dg-polaroid figcaption { color: #2b1a10; left: 4.6rem; right: 1rem; text-align: left; }

.theme-film .dg-round.dg-cat-film-animazione .dg-polaroid figcaption .dg-who,
.theme-film .dg-round.dg-cat-serie-animazione .dg-polaroid figcaption .dg-who { color: #5a3a24; }

/* Una cartolina dell'archivio d'animazione: carta chiara, bordo a mano, una stellina. */
.theme-film .dg-snap.dg-cat-film-animazione,
.theme-film .dg-snap.dg-cat-serie-animazione {
    padding: .7rem .7rem .85rem;
    border: 3px solid #2b1a10;
    border-radius: 16px 24px 14px 26px / 24px 14px 26px 16px;
    background: #fffaf0;
    color: #2b1a10;
    box-shadow: 5px 6px 0 #2b1a10;
}

.theme-film .dg-snap.dg-cat-film-animazione::before,
.theme-film .dg-snap.dg-cat-serie-animazione::before {
    inset: auto;
    top: .15rem;
    right: .3rem;
    left: auto;
    width: 26px;
    height: 26px;
    z-index: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z' fill='%23e9b949' stroke='%232b1a10' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 1;
}

.theme-film .dg-snap.dg-cat-film-animazione::after,
.theme-film .dg-snap.dg-cat-serie-animazione::after { display: none; }

.theme-film .dg-snap.dg-cat-film-animazione img,
.theme-film .dg-snap.dg-cat-serie-animazione img { border-radius: 10px 16px 8px 18px / 16px 8px 18px 10px; outline: 2px solid #2b1a10; outline-offset: -2px; }
.theme-film .dg-snap.dg-cat-film-animazione .dg-date,
.theme-film .dg-snap.dg-cat-serie-animazione .dg-date { color: #8a4b1c; }
.theme-film .dg-snap.dg-cat-film-animazione .dg-name,
.theme-film .dg-snap.dg-cat-serie-animazione .dg-name { color: #2b1a10; }
.theme-film .dg-snap.dg-cat-film-animazione .dg-meter-l,
.theme-film .dg-snap.dg-cat-serie-animazione .dg-meter-l,
.theme-film .dg-snap.dg-cat-film-animazione .dg-snap-know,
.theme-film .dg-snap.dg-cat-serie-animazione .dg-snap-know { color: #5a3a24; }
.theme-film .dg-snap.dg-cat-film-animazione .dg-meter,
.theme-film .dg-snap.dg-cat-serie-animazione .dg-meter { background: #eadcc3; }

/* Una serie d'animazione porta anche la spia del televisore, piccola, sull'angolo. */
.theme-film .dg-snap.dg-cat-serie-animazione { border-bottom-width: 6px; }

/* Sul telefono l'archivio è a due colonne: una scheda per riga sarebbe una parete di fotogrammi alti due schermi. */
@media (max-width: 560px) {
    .theme-film .dg-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .7rem; }
    .theme-film .dg-snap { padding-inline: .45rem; }
    .theme-film .dg-snap .dg-name { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-film .dg-polaroid,
    .theme-film .dg-polaroid:hover,
    .theme-film .dg-cta:hover { transform: none; }

    .theme-film .dg-hero::before,
    .theme-film .dg-hero::after { animation: none; }
}