/* Theme: cinema (category "film") - a dark auditorium: red velvet curtains at the sides,
 * two slowly sweeping spotlights from the top corners and a row of marquee bulbs along the bottom. */

html[data-ordleg-theme="cinema"] {
  --bg: radial-gradient(ellipse 60% 45% at 50% 0%, #2a1b30 0%, rgba(42, 27, 48, 0) 100%),
        radial-gradient(ellipse 80% 40% at 50% 100%, #1d0d14 0%, rgba(29, 13, 20, 0) 100%),
        linear-gradient(180deg, #110d16 0%, #0a080d 100%);
  --fg: #fff8e8;
  --fg-muted: #cdc2b0;
  --accent: #ffc93c;
  --accent-fg: #1f1500;
  --card: rgba(255, 248, 232, 0.07);
  --card-strong: rgba(19, 15, 24, 0.96);
  --card-border: rgba(255, 201, 60, 0.22);
  --taboo: #ff7070;
  --taboo-bg: rgba(255, 90, 90, 0.14);
  --timer-ok: #ffc93c;
  --timer-warn: #ef4444;
  --ok: #6ee7a0;
  --bad: #ff8a8a;
  --subtle: rgba(255, 248, 232, 0.15);
  --selected-bg: rgba(255, 201, 60, 0.14);
  --selected-ring: rgba(255, 201, 60, 0.28);
  --overlay: rgba(4, 3, 6, 0.8);
}

/* --- Red velvet curtains on both sides (folds drawn with gradients) --- */
html[data-ordleg-theme="cinema"] .theme-deco .deco-a,
html[data-ordleg-theme="cinema"] .theme-deco .deco-b {
  top: 0;
  bottom: 0;
  width: clamp(14px, 2.4vw, 90px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(90deg, #4a0713 0, #8a1426 clamp(4px, 0.4vw, 15px), #5a0a18 clamp(7px, 0.8vw, 30px));
  box-shadow: 0.4vw 0 1.6vw rgba(0, 0, 0, 0.6);
}
html[data-ordleg-theme="cinema"] .theme-deco .deco-a { left: 0; }
html[data-ordleg-theme="cinema"] .theme-deco .deco-b {
  right: 0;
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(270deg, #4a0713 0, #8a1426 clamp(4px, 0.4vw, 15px), #5a0a18 clamp(7px, 0.8vw, 30px));
  box-shadow: -0.4vw 0 1.6vw rgba(0, 0, 0, 0.6);
}
/* valance: a scalloped velvet drape along the top edge with a thin gold trim */
html[data-ordleg-theme="cinema"] .theme-deco .deco-a::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(30px, 5vh, 110px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.4) 100%),
    repeating-linear-gradient(90deg, #5a0a18 0, #92172a clamp(10px, 1.2vw, 44px), #5a0a18 clamp(20px, 2.4vw, 88px));
  -webkit-mask-image: linear-gradient(#000 0 55%, transparent 55%), radial-gradient(ellipse 50% 45% at 50% 55%, #000 97%, transparent 100%);
  -webkit-mask-size: 100% 100%, clamp(20px, 2.4vw, 88px) 100%;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-image: linear-gradient(#000 0 55%, transparent 55%), radial-gradient(ellipse 50% 45% at 50% 55%, #000 97%, transparent 100%);
  mask-size: 100% 100%, clamp(20px, 2.4vw, 88px) 100%;
  mask-repeat: no-repeat, repeat-x;
  filter: drop-shadow(0 0.4vh 0.6vh rgba(0, 0, 0, 0.6));
}

/* --- Spotlights: soft warm beams from the top corners, fading out above the word card --- */
html[data-ordleg-theme="cinema"] .theme-deco .deco-a::before,
html[data-ordleg-theme="cinema"] .theme-deco .deco-b::before {
  content: "";
  position: fixed;
  top: -10vh;
  width: 40vw;
  height: 70vh;
  will-change: transform;
}
html[data-ordleg-theme="cinema"] .theme-deco .deco-a::before {
  left: 1vw;
  background: conic-gradient(from 124deg at 0 0, rgba(255, 236, 190, 0) 0deg, rgba(255, 236, 190, 0.17) 7deg, rgba(255, 236, 190, 0.26) 12deg, rgba(255, 236, 190, 0.17) 17deg, rgba(255, 236, 190, 0) 24deg);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0 0, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 100% 100% at 0 0, #000 25%, transparent 80%);
  transform-origin: 0 0;
  animation: ordleg-cinema-sweep-l 18s ease-in-out infinite alternate;
}
html[data-ordleg-theme="cinema"] .theme-deco .deco-b::before {
  right: 1vw;
  background: conic-gradient(from 212deg at 100% 0, rgba(255, 236, 190, 0) 0deg, rgba(255, 236, 190, 0.17) 7deg, rgba(255, 236, 190, 0.26) 12deg, rgba(255, 236, 190, 0.17) 17deg, rgba(255, 236, 190, 0) 24deg);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 100% 100% at 100% 0, #000 25%, transparent 80%);
  transform-origin: 100% 0;
  animation: ordleg-cinema-sweep-r 18s ease-in-out -9s infinite alternate;
}
@keyframes ordleg-cinema-sweep-l { from { transform: rotate(-10deg); } to { transform: rotate(8deg); } }
@keyframes ordleg-cinema-sweep-r { from { transform: rotate(10deg); } to { transform: rotate(-8deg); } }

/* --- Marquee bulbs along the bottom edge: unlit sockets, with odd and even bulbs glowing in turn --- */
html[data-ordleg-theme="cinema"] .theme-deco .deco-c {
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(16px, 2.6vh, 60px);
  background:
    radial-gradient(circle closest-side at 50% 50%, #6b4a12 0 38%, rgba(107, 74, 18, 0) 44%) 0 0 / clamp(16px, 1.6vw, 58px) 100% repeat-x,
    linear-gradient(180deg, #2a1d0c, #160f06);
  border-top: 1px solid rgba(255, 201, 60, 0.4);
}
html[data-ordleg-theme="cinema"] .theme-deco .deco-c::before,
html[data-ordleg-theme="cinema"] .theme-deco .deco-c::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle closest-side at 50% 50%, #fff6cf 0 22%, #ffd04a 40%, rgba(255, 184, 40, 0.5) 62%, rgba(255, 184, 40, 0) 100%);
  background-size: clamp(32px, 3.2vw, 116px) 100%;
  background-repeat: repeat-x;
  will-change: opacity;
}
html[data-ordleg-theme="cinema"] .theme-deco .deco-c::before {
  background-position: calc(-1 * clamp(8px, 0.8vw, 29px)) 0;
  animation: ordleg-cinema-bulbs 2.6s ease-in-out infinite alternate;
}
html[data-ordleg-theme="cinema"] .theme-deco .deco-c::after {
  background-position: clamp(8px, 0.8vw, 29px) 0;
  animation: ordleg-cinema-bulbs 2.6s ease-in-out infinite alternate-reverse;
}
@keyframes ordleg-cinema-bulbs { from { opacity: 0.2; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html[data-ordleg-theme="cinema"] .theme-deco .deco-a::before,
  html[data-ordleg-theme="cinema"] .theme-deco .deco-b::before,
  html[data-ordleg-theme="cinema"] .theme-deco .deco-c::before,
  html[data-ordleg-theme="cinema"] .theme-deco .deco-c::after { animation: none; }
}

/* Dark text on the timeout banner (>= 5.2:1; white was only ~3.3:1) */
html[data-ordleg-theme="cinema"] { --timer-warn-fg: #1a0508; }