/* Kerstlampjes: de lichtslinger neemt een eigen strook boven de app in. */
#kerstSnoer{position:relative;flex:0 0 34px;height:34px;overflow:hidden;pointer-events:none;isolation:isolate;z-index:4000;background:linear-gradient(180deg,#17251e,#17221f 65%,#1a1d27);border-bottom:1px solid #c4b98e0d;--kerst-strength:.7}
#kerstSnoer[hidden]{display:none}#kerstSnoer svg{display:block;width:100%;height:34px;overflow:visible}#kerstSnoer .kerst-wire{fill:none;stroke:#52634f;stroke-width:1.2}#kerstSnoer .kerst-wire-shadow{fill:none;stroke:#070e0b;stroke-width:2.3;transform:translateY(1px)}#kerstSnoer .kerst-socket{fill:#54634c;stroke:#899477;stroke-width:.4}#kerstSnoer .kerst-filament{fill:#fff9df;opacity:.9}#kerstSnoer .kerst-halo{opacity:calc(var(--kerst-strength)*.8)}#kerstSnoer .kerst-bulb{opacity:calc(.35 + var(--kerst-strength)*.65)}#kerstSnoer.twinkle .kerst-light{animation:kerstTwinkle var(--kerst-duration,3.2s) ease-in-out infinite;animation-delay:var(--kerst-delay)}
@keyframes kerstTwinkle{0%,100%{opacity:.48}20%{opacity:1}45%{opacity:.24}68%{opacity:.92}84%{opacity:.4}}
/* De slinger blijft boven schermvullende vensters; de bediening krijgt ruimte eronder. */
body.christmas-lights-on{--christmas-bar-height:34px}
@media (max-width:720px), (min-width:721px) and (max-width:900px) and (orientation:portrait), (orientation:landscape) and (max-height:600px) and (max-width:1100px){
  body.christmas-lights-on #dutySetup{top:var(--christmas-bar-height);height:calc(100dvh - var(--christmas-bar-height))}
}
@media(max-width:680px){body.christmas-lights-on{--christmas-bar-height:30px}}
@media(max-width:680px){#kerstSnoer{flex-basis:30px;height:30px}#kerstSnoer svg{height:30px}}
@media(prefers-reduced-motion:reduce){#kerstSnoer .kerst-light{animation:none!important}}