/* Cinema theme for personal.html#scene -- active only while body.theme-cinema
   is set by assets/personal-cinema.js.
   v1 (2026-09-29): marquee sign, red-velvet curtains around a glowing screen,
   yellow subtitles, seat-row silhouettes, film strips with sprocket holes. */

body.theme-cinema {
    --cn-gold: #f3c969; --cn-red: #8e0f14; --cn-sub: #ffe14d; --cn-text: #efe6d8; --cn-dim: #a39a8c;
    background: radial-gradient(ellipse 80% 55% at 50% 22%, #2a1a14 0%, #0d0908 60%) fixed #0d0908;
}
body.theme-cinema .gallery-wrap { max-width: 1240px; padding: 0 20px 5rem; }
body.theme-cinema .back-bar,
body.theme-cinema .hero-title,
body.theme-cinema .hero-sub,
body.theme-cinema .category-view-header,
body.theme-cinema .pcms-admin-only[onclick="openDraftModal()"],
body.theme-cinema[data-cn-cat="scene"] .gallery-section[data-category="scene"] { display: none !important; }

#cinemaView { display: none; font-family: 'Outfit', 'Mitr', var(--font-body, 'Plus Jakarta Sans', 'Sarabun'), sans-serif; color: var(--cn-text); }
body.theme-cinema #cinemaView { display: block; }

.cn-btn, .cn-ctl {
    background: rgba(243,201,105,0.08); color: var(--cn-gold); border: 1px solid rgba(243,201,105,0.45); border-radius: 999px;
    padding: 7px 16px; font: inherit; font-size: .88rem; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.cn-btn:hover, .cn-ctl:hover { background: var(--cn-gold); color: #1a0f0a; }
.cn-btn:focus-visible, .cn-ctl:focus-visible, .cn-clip:focus-visible, .cn-cell:focus-visible, .cn-play:focus-visible { outline: 2px solid var(--cn-sub); outline-offset: 3px; }

/* ---------- marquee sign ---------- */
.cn-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 22px 0 18px; }
.cn-top > .cn-btn { justify-self: start; }
.cn-add-slot { justify-self: end; }
.cn-marquee {
    position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px 34px 10px;
    background: #1c0d09; border: 3px solid var(--cn-gold); border-radius: 6px;
    box-shadow: 0 0 0 6px #1c0d09, 0 0 0 8px rgba(243,201,105,0.5), 0 0 40px rgba(243,201,105,0.25);
}
/* Bulb border: dots in the frame that twinkle. */
.cn-marquee::before {
    content: ''; position: absolute; inset: -9px; border-radius: 10px; pointer-events: none;
    background:
        radial-gradient(circle, #fff6d0 0 2.5px, transparent 3px) 0 0 / 16px 16px repeat-x,
        radial-gradient(circle, #fff6d0 0 2.5px, transparent 3px) 0 100% / 16px 16px repeat-x;
    background-position: 4px -5px, 4px calc(100% + 5px);
    filter: drop-shadow(0 0 3px #ffd36a);
    animation: cnBulbs 1.6s steps(2) infinite;
}
@keyframes cnBulbs { 50% { opacity: .55; } }
.cn-marquee-small { font-size: .72rem; letter-spacing: .4em; color: var(--cn-gold); text-transform: uppercase; }
.cn-marquee-big { font-family: 'Bebas Neue', 'Outfit', 'Mitr', sans-serif; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: .12em; color: #fff3cf; text-shadow: 0 0 12px rgba(255,210,110,0.7), 0 0 30px rgba(255,160,60,0.35); }

/* ---------- theatre: curtains + screen + seats ---------- */
.cn-theatre { position: relative; padding: 46px 9% 110px; margin: 0 -20px 30px; overflow: hidden; scroll-margin-top: 70px; }
.cn-valance {
    position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 3;
    background: repeating-linear-gradient(90deg, #6d070b 0 22px, #a3161c 22px 34px, #6d070b 34px 56px);
    border-bottom: 3px solid var(--cn-gold);
    -webkit-mask: radial-gradient(28px 20px at 28px 100%, transparent 98%, #000) 0 0 / 56px 100%;
            mask: radial-gradient(28px 20px at 28px 100%, transparent 98%, #000) 0 0 / 56px 100%;
}
.cn-curtain {
    position: absolute; top: 0; bottom: 60px; width: 8.5%; z-index: 2;
    background: repeating-linear-gradient(90deg, #5c0409 0, #a1141b 9%, #c41f27 13%, #a1141b 17%, #5c0409 25%);
    box-shadow: inset 0 -40px 60px rgba(0,0,0,0.55);
}
.cn-curtain.is-l { left: 0; border-bottom-right-radius: 60% 18%; }
.cn-curtain.is-r { right: 0; border-bottom-left-radius: 60% 18%; }
.cn-screen-host { position: relative; z-index: 3; }
.cn-screen {
    position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 4px;
    box-shadow: 0 0 0 6px #111, 0 0 60px rgba(255,236,200,0.18), 0 30px 90px rgba(255,220,170,0.12);
}
.cn-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-noart { display: grid; place-items: center; font-size: 4rem; }
.cn-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%), linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 32%); pointer-events: none; }
.cn-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Subtitle: the scene title as a line of dialogue. */
.cn-sub {
    position: absolute; left: 6%; right: 6%; bottom: 6%; margin: 0; text-align: center; z-index: 1;
    font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.7rem); line-height: 1.3; color: var(--cn-sub);
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 8px rgba(0,0,0,0.8);
}
.cn-screen.is-empty { display: grid; place-items: center; }
.cn-screen.is-empty .cn-sub { position: static; }
.cn-play {
    position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 1;
    width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); cursor: pointer;
    background: rgba(0,0,0,0.45); color: #fff; display: grid; place-items: center; padding-left: 6px;
    backdrop-filter: blur(2px); transition: transform .2s ease, background .2s ease;
}
.cn-play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(196,31,39,0.85); border-color: #fff; }
.cn-seats {
    position: absolute; left: -2%; right: -2%; bottom: 0; height: 82px; z-index: 2; pointer-events: none;
    background:
        radial-gradient(ellipse 34px 30px at 50% 100%, #050303 96%, transparent 100%) 0 100% / 78px 60px repeat-x,
        radial-gradient(ellipse 34px 30px at 50% 100%, #150c0a 96%, transparent 100%) 39px 100% / 78px 82px repeat-x;
}
.cn-controls { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 18px 0 0; padding: 0; }
.cn-now { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; flex: 1 1 280px; text-align: center; }
.cn-now-title { font-size: 1.05rem; font-weight: 600; color: #fff; }
.cn-now-meta { font-size: .82rem; color: var(--cn-dim); }
.cn-stars { color: var(--cn-gold); letter-spacing: .06em; }
.cn-stars i { font-style: normal; color: rgba(255,255,255,0.18); }
.cn-clips { display: flex; gap: 6px; margin-top: 4px; }
.cn-clip { background: none; border: 1px solid rgba(255,255,255,0.25); color: var(--cn-text); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .75rem; cursor: pointer; }
.cn-clip.is-on { background: var(--cn-sub); color: #1a0f0a; border-color: var(--cn-sub); }
.cn-noclip { font-size: .75rem; color: var(--cn-dim); font-style: italic; }

/* ---------- film strips ---------- */
.cn-reel { margin: 0 0 34px; }
.cn-reel-title { margin: 0 0 10px; font-family: 'Bebas Neue', 'Outfit', 'Mitr', sans-serif; font-weight: 400; font-size: 1.9rem; letter-spacing: .08em; color: #fff3cf; }
.cn-reel-title em { font-style: normal; font-family: 'Outfit', 'Mitr', sans-serif; font-size: 1rem; color: var(--cn-gold); letter-spacing: .08em; margin-left: 4px; }
.cn-reel-title span { font-family: 'Outfit', 'Mitr', sans-serif; font-size: .8rem; color: var(--cn-dim); letter-spacing: 0; margin-left: 6px; }
.cn-r5 .cn-reel-title { color: var(--cn-gold); text-shadow: 0 0 14px rgba(243,201,105,0.45); }
.cn-strip {
    position: relative; background: #0a0a0a; padding: 22px 0; margin: 0 -20px;
    box-shadow: inset 0 0 0 1px #222, 0 10px 30px rgba(0,0,0,0.5);
}
/* Sprocket holes along both edges. */
.cn-strip::before, .cn-strip::after {
    content: ''; position: absolute; left: 0; right: 0; height: 10px; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 8px, #e9dfcf 8px 20px, transparent 20px 30px);
    opacity: .85; border-radius: 2px;
}
.cn-strip::before { top: 6px; }
.cn-strip::after { bottom: 6px; }
.cn-strip-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 10px; overflow-x: auto; padding: 0 20px; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.cn-strip-track:has(> :nth-child(5)) { grid-auto-columns: 272px; }
.cn-cell { border: 0; padding: 0; background: #000; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.cn-cell-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cn-cell-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) brightness(.72); transition: filter .25s ease, transform .35s ease; }
.cn-cell:hover .cn-cell-img img, .cn-cell:focus-visible .cn-cell-img img, .cn-cell.is-on .cn-cell-img img { filter: none; transform: scale(1.04); }
.cn-cell.is-on { box-shadow: 0 0 0 3px var(--cn-sub); }
.cn-cell-play { position: absolute; left: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: .7rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.6); }
.cn-cell-sub {
    position: absolute; left: 6px; right: 6px; bottom: 7px; text-align: center; font-weight: 600; font-size: .86rem; line-height: 1.25; color: var(--cn-sub);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 6px #000;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* The review modal follows the theme while it's open over the scenes page. */
body.theme-cinema .modal-content { background: #1a1210; border-color: #3a2a22; }
body.theme-cinema .modal-tag { color: #1a0f0a; background: var(--cn-gold); }

@media (prefers-reduced-motion: reduce) {
    .cn-marquee::before { animation: none; }
    .cn-cell-img img, .cn-play { transition: none; }
}
@media (max-width: 760px) {
    .cn-top { grid-template-columns: 1fr auto; }
    .cn-marquee { grid-column: 1 / -1; grid-row: 1; justify-self: center; padding: 10px 20px 8px; }
    .cn-top > .cn-btn, .cn-add-slot { grid-row: 2; }
    .cn-theatre { padding: 34px 5% 80px; }
    .cn-curtain { width: 5%; }
    .cn-controls { margin: 14px 0 0; gap: 8px; }
    .cn-now { order: -1; flex-basis: 100%; }
    .cn-ctl { padding: 6px 12px; font-size: .8rem; }
    .cn-play { width: 60px; height: 60px; }
    .cn-seats { height: 60px; }
    .cn-strip-track, .cn-strip-track:has(> :nth-child(5)) { grid-auto-columns: 72%; }
}

/* ---------- admin dialog: add scene / manage clips (outside #cinemaView) ---------- */
.cn-dlg { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.75); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; font-family: 'Outfit', 'Mitr', 'Plus Jakarta Sans', 'Sarabun', sans-serif; }
.cn-dlg-card { width: min(640px, 100%); background: #1c1210; color: #efe6d8; border: 1px solid #3a2a22; border-top: 3px solid #f3c969; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.7); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.cn-dlg-card h3 { margin: 0; font-size: 1.2rem; color: #fff3cf; font-weight: 600; }
.cn-f { display: flex; flex-direction: column; gap: 6px; }
.cn-f > span { font-size: .8rem; color: #f3c969; }
.cn-f > span small { color: #a39a8c; }
.cn-f input[type="text"], .cn-f input[type="url"] { background: #0f0a09; border: 1px solid #4a3a30; border-radius: 8px; color: #fff; font: inherit; font-size: .92rem; padding: 9px 11px; outline: none; min-width: 0; }
.cn-f input:focus { border-color: #f3c969; }
.cn-f-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cn-f-row input[type="url"] { flex: 1 1 240px; }
.cn-f-cover { width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin-top: 4px; }
.cn-stars-pick button { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: rgba(255,255,255,0.2); cursor: pointer; padding: 0 1px; }
.cn-stars-pick button.is-on { color: #f3c969; }
.cn-clip-list { display: flex; flex-direction: column; gap: 8px; }
.cn-clip-row { display: flex; align-items: center; gap: 10px; background: #0f0a09; border: 1px solid #3a2a22; border-radius: 8px; padding: 6px; }
.cn-clip-row img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.cn-clip-row a { color: #ffe14d; font-size: .85rem; text-decoration: none; }
.cn-clip-row a:hover { text-decoration: underline; }
.cn-first-tag { font-size: .72rem; color: #1a0f0a; background: #ffe14d; border-radius: 999px; padding: 2px 8px; }
.cn-dlg-empty { margin: 0; color: #a39a8c; font-size: .85rem; }
.cn-grow { flex: 1; }
.cn-mini { background: rgba(243,201,105,0.1); color: #f3c969; border: 1px solid rgba(243,201,105,0.4); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.cn-mini:hover { background: #f3c969; color: #1a0f0a; }
.cn-mini.is-del { color: #ff8a73; border-color: rgba(255,138,115,0.45); background: rgba(255,138,115,0.08); }
.cn-mini.is-del:hover { background: #d83a2c; color: #fff; }
.cn-save { background: #c41f27; color: #fff; border: 0; border-radius: 999px; padding: 8px 20px; font: inherit; font-weight: 600; cursor: pointer; }
.cn-save:disabled { opacity: .5; cursor: default; }
.cn-dlg-err { margin: 0; color: #ff8a73; font-size: .85rem; }
.cn-dlg-err:empty { display: none; }
.cn-dlg-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid #3a2a22; padding-top: 14px; }
.cn-dlg button:focus-visible, .cn-dlg a:focus-visible, .cn-dlg label:focus-within { outline: 2px solid #ffe14d; outline-offset: 2px; }
@media (max-width: 560px) { .cn-clip-row { flex-wrap: wrap; } .cn-clip-row img { width: 96px; } }

/* Add button: an admit-one ticket (admin) */
.cn-add { position: relative; border: 0 !important; border-radius: 4px !important; padding: 9px 22px !important; color: #1a1206 !important; font-weight: 800; letter-spacing: .03em;
    background: linear-gradient(180deg, #ffe08a, #f3c969) !important; box-shadow: 0 6px 16px rgba(243,201,105,0.3);
    -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
.cn-add:hover { filter: brightness(1.06); transform: translateY(-1px); }