/* Theme artwork is made from CSS shapes; no downloads or image assets. */
.haunting { display:none; pointer-events:none; }
.seasonal-atmosphere { display:none; }
.day-picker { margin:0 0 20px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.day-picker-heading { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.day-picker-heading label { font-weight:700; }
.day-picker-heading span, .day-picker p { color:var(--sub); font-size:.8rem; }
.day-picker p { margin:10px 0 0; line-height:1.5; }
.day-picker-controls { display:flex; gap:8px; }
.day-picker-controls select { flex:1; min-width:0; }
.event-date-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.event-date-fields label { display:grid; gap:8px; font-size:.85rem; color:var(--sub); min-width:0; }
.event-date-fields input { width:100%; min-width:0; color-scheme:dark; }
.admin-person { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.admin-person a { color:var(--text); overflow-wrap:anywhere; }
.admin-person button { margin-left:auto; }
#admin-list { margin-bottom:16px; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }

html[data-theme="halloween"] {
  --bg1:#0e0a18; --bg2:#191124; --card:#1d1529;
  --red:#b54b09; --red-bright:#ffae50; --red-dark:#66320f;
  --green:#a6e578; --amber:#ffcd82; --gold:#ffc666;
  --text:#fff5e9; --sub:#d2c3de; --border:#533655;
  --glow-red:rgba(255,145,39,.22); color-scheme:dark;
}
[data-theme="halloween"] .header {
  padding-top:94px;
  background:radial-gradient(ellipse at 50% 0, #59304988, transparent 65%), linear-gradient(160deg,#2f1b3a,#140f20 70%);
  border-color:#97552d; box-shadow:0 14px 38px #0008, inset 0 1px 0 #ffc66633;
}
[data-theme="halloween"] .header h1 { color:#ffe5bd; text-shadow:3px 3px #16091c, 0 0 25px #ed833755; }
[data-theme="halloween"] .header .subtitle { color:#ffb45e; letter-spacing:4px; }
[data-theme="halloween"] .header-bullets { background:#100c1bbb; border-color:#694356; }
[data-theme="halloween"] .header-bullet-item::marker { color:#c97936; }
[data-theme="halloween"] .nav-bar { background:#1c1429; border-color:#533655; }
[data-theme="halloween"] .nav-btn.active { background:linear-gradient(135deg,#a94809,#613416); }
[data-theme="halloween"] .hour-card,
[data-theme="halloween"] .admin-card { background:linear-gradient(150deg,#24192f,#18121f); border-color:#533655; }
[data-theme="halloween"] .hour-card.bonus-hour { border-color:var(--gold); }
[data-theme="halloween"] .slot { background:#130e1d; }
[data-theme="halloween"] .slot.open { border-color:#a16b3b; }
[data-theme="halloween"] .slot.filled { border-color:#537443; }
[data-theme="halloween"] .btn-primary { background:linear-gradient(135deg,#a74708,#763608); color:#fff5e9; border-color:#be6b25; }
[data-theme="halloween"] .btn-green { background:#253e21; color:#d9fbc7; border-color:#67954e; }
[data-theme="halloween"] .settings-bar { background:#21172d; border-color:#533655; }
[data-theme="halloween"] .login-card { background:#201629; border-color:#97552d; }
[data-theme="halloween"] .haunting { display:block; position:absolute; inset:0 0 auto; height:86px; overflow:hidden; }
/* Lantern: ribbed pumpkin, stem, triangular eyes and a cutout grin. */
.pumpkin { position:absolute; top:30px; left:calc(50% - 30px); width:60px; height:45px; border-radius:45%;
  background:repeating-radial-gradient(ellipse at center,#ec8729 0 9px,#b95013 10px 12px);
  box-shadow:0 0 32px #e8792433; }
.pumpkin::before { content:""; position:absolute; width:9px; height:12px; left:27px; top:-10px; background:#87a457; border-radius:3px; transform:rotate(18deg); }
.pumpkin::after { content:""; position:absolute; width:38px; height:10px; left:11px; bottom:8px; background:#301829; border-radius:0 0 50% 50%; clip-path:polygon(0 0,30% 0,30% 35%,45% 35%,45% 0,75% 0,75% 35%,90% 35%,90% 0,100% 0,90% 100%,10% 100%); }
.pumpkin i::before,.pumpkin i::after { content:""; position:absolute; top:9px; width:13px; height:12px; background:#301829; clip-path:polygon(50% 0,100% 100%,0 100%); }
.pumpkin i::before { left:11px; }.pumpkin i::after { right:11px; }
/* A quiet floating ghost, with a scalloped sheet and three dark features. */
.ghost { position:absolute; left:22%; top:23px; width:37px; height:49px; background:#e9ddf0; border-radius:50% 50% 0 0;
  clip-path:polygon(0 0,100% 0,100% 100%,80% 87%,60% 100%,40% 87%,20% 100%,0 87%); }
.ghost::before { content:""; position:absolute; left:9px; top:17px; width:6px; height:8px; background:#32213e; border-radius:50%; box-shadow:14px 0 #32213e; }
.ghost::after { content:""; position:absolute; left:16px; top:30px; width:7px; height:9px; background:#32213e; border-radius:50%; }
/* Corner web and an eight-legged visitor. */
.web { --web-size:86px; position:absolute; left:0; top:0; width:var(--web-size); height:var(--web-size); opacity:.6;
  /* A quarter-circle silhouette with fading thread ends, not a square crop. */
  border-bottom-right-radius:100%;
  -webkit-mask-image:radial-gradient(circle var(--web-size) at 0 0,#000 0 70%,#0009 86%,transparent 100%);
  mask-image:radial-gradient(circle var(--web-size) at 0 0,#000 0 70%,#0009 86%,transparent 100%);
  background:repeating-radial-gradient(circle at 0 0,transparent 0 16px,#d8c7e8 17px 18px,transparent 19px 20px); }
.web i { position:absolute; top:0; left:0; width:100%; height:1px; background:#d8c7e8; transform-origin:0 0; transform:rotate(22.5deg); }
.web i:nth-child(2) { transform:rotate(45deg); }.web i:nth-child(3) { transform:rotate(67.5deg); }
.web { overflow:hidden; }
.spider { position:absolute; right:8%; top:34px; width:17px; height:22px; border-radius:50%; background:#bc99ce; }
.spider::before { content:""; position:absolute; left:8px; bottom:20px; width:1px; height:36px; background:#a680b5; }
.spider::after { content:""; position:absolute; top:-6px; left:-12px; width:41px; height:34px;
  background:linear-gradient(35deg,transparent 43%,#bc99ce 45% 58%,transparent 60%) left top / 14px 9px repeat-y,
    linear-gradient(-35deg,transparent 43%,#bc99ce 45% 58%,transparent 60%) right top / 14px 9px repeat-y; }
.spider i { position:absolute; top:6px; left:4px; width:3px; height:4px; border-radius:50%; background:#30203c; box-shadow:6px 0 #30203c; }
/* Skull and ribcage silhouette. */
.skeleton { position:absolute; right:23%; top:18px; width:31px; height:29px; border-radius:45% 45% 30% 30%; background:#eadbc5; }
.skeleton::before { content:""; position:absolute; left:6px; top:10px; width:7px; height:8px; background:#30203c; border-radius:50%; box-shadow:13px 0 #30203c; }
.skeleton::after { content:""; position:absolute; left:10px; top:23px; width:12px; height:9px; background:repeating-linear-gradient(90deg,#eadbc5 0 3px,#30203c 3px 4px); }
.skeleton i { position:absolute; top:34px; left:3px; width:26px; height:22px; border:3px solid #eadbc5; border-radius:40%; background:repeating-linear-gradient(0deg,transparent 0 4px,#eadbc5 4px 6px); }
.skeleton b { position:absolute; top:30px; left:14px; width:4px; height:36px; background:#eadbc5; }
.skeleton i::before,.skeleton i::after { content:""; position:absolute; top:0; width:3px; height:20px; background:#eadbc5; }
.skeleton i::before { left:-9px; transform:rotate(15deg); }.skeleton i::after { right:-9px; transform:rotate(-15deg); }
.skeleton b::before,.skeleton b::after { content:""; position:absolute; top:28px; width:3px; height:12px; background:#eadbc5; }
.skeleton b::before { left:-4px; transform:rotate(20deg); }.skeleton b::after { right:-4px; transform:rotate(-20deg); }
/* Animate only transform and opacity so layout and touch targets stay still. */
[data-theme="halloween"] #app, [data-theme="halloween"] #login-screen { position:relative; z-index:1; }
[data-theme="halloween"] .seasonal-atmosphere {
  display:block; position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
[data-theme="halloween"] .seasonal-atmosphere::before {
  content:""; position:absolute; inset:-12%; opacity:.32;
  background:radial-gradient(ellipse at 10% 75%,#a987b733,transparent 44%),
    radial-gradient(ellipse at 85% 20%,#e8985433,transparent 40%);
  animation:halloween-mist 28s ease-in-out infinite alternate;
}
[data-theme="halloween"] .seasonal-atmosphere span {
  position:absolute; left:8%; bottom:-12px; width:5px; height:5px; border-radius:50%;
  background:#ffc078; box-shadow:0 0 10px 3px #ff8e3033; opacity:0;
  animation:halloween-ember 22s linear infinite;
}
[data-theme="halloween"] .seasonal-atmosphere span:nth-child(2) { left:26%; animation-duration:28s; animation-delay:-12s; }
[data-theme="halloween"] .seasonal-atmosphere span:nth-child(3) { left:48%; animation-duration:24s; animation-delay:-6s; }
[data-theme="halloween"] .seasonal-atmosphere span:nth-child(4) { left:69%; animation-duration:30s; animation-delay:-23s; }
[data-theme="halloween"] .seasonal-atmosphere span:nth-child(5) { left:85%; animation-duration:26s; animation-delay:-17s; }
[data-theme="halloween"] .seasonal-atmosphere span:nth-child(6) { left:95%; animation-duration:32s; animation-delay:-4s; }
[data-theme="halloween"] .seasonal-atmosphere span:nth-child(7) { left:18%; animation-duration:25s; animation-delay:-19s; }
[data-theme="halloween"] .seasonal-atmosphere span:nth-child(8) { left:38%; animation-duration:31s; animation-delay:-9s; }
[data-theme="halloween"] .seasonal-atmosphere span:nth-child(9) { left:61%; animation-duration:23s; animation-delay:-15s; }
[data-theme="halloween"] .seasonal-atmosphere span:nth-child(10) { left:78%; animation-duration:29s; animation-delay:-21s; }
[data-theme="halloween"] .ghost { animation:ghost-float 6s ease-in-out infinite; }
[data-theme="halloween"] .spider { transform-origin:50% -34px; animation:spider-sway 8s ease-in-out infinite; }
[data-theme="halloween"] .pumpkin { transform-origin:50% 90%; animation:pumpkin-rock 7s ease-in-out infinite; }
[data-theme="halloween"] .pumpkin i { position:absolute; inset:0; }
[data-theme="halloween"] .pumpkin i::before,
[data-theme="halloween"] .pumpkin i::after { background:#ffe3a0; animation:lantern-glow 4s ease-in-out infinite alternate; }
[data-theme="halloween"] .skeleton { transform-origin:50% 60px; animation:skeleton-sway 9s ease-in-out infinite; }
[data-theme="halloween"] .skeleton i::after { transform-origin:50% 0; animation:skeleton-wave 5s ease-in-out infinite; }
@keyframes ghost-float {
  0%,100% { transform:translate(-3px,2px) rotate(-6deg); }
  50% { transform:translate(4px,-7px) rotate(5deg); }
}
@keyframes spider-sway { 0%,100% { transform:rotate(-9deg); } 50% { transform:rotate(9deg); } }
@keyframes pumpkin-rock { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); } }
@keyframes lantern-glow { from { opacity:.35; } to { opacity:1; } }
@keyframes skeleton-sway { 0%,100% { transform:rotate(4deg); } 50% { transform:rotate(-4deg); } }
@keyframes skeleton-wave { 0%,65%,100% { transform:rotate(-15deg); } 78%,90% { transform:rotate(-65deg); } 84%,96% { transform:rotate(-35deg); } }
@keyframes halloween-mist { from { transform:translate(-3%,2%) scale(1); } to { transform:translate(3%,-2%) scale(1.06); } }
@keyframes halloween-ember {
  0% { transform:translate(0,0); opacity:0; }
  15% { opacity:.45; }
  70% { opacity:.3; }
  100% { transform:translate(-36px,-110vh); opacity:0; }
}
@media (max-width:600px) {
  .event-date-fields { grid-template-columns:1fr; }
  .admin-row .grow { min-width:0; max-width:100%; }
  .admin-row select.grow { flex-basis:100%; }
  .admin-field { max-width:100%; }
  .day-picker { padding:12px; }
  .day-picker-controls { gap:6px; }
  .day-picker-controls .btn { padding:10px 13px; }
  .day-picker-controls select { font-size:.8rem; padding:8px 4px; }
  .btn, .nav-btn, .admin-field { min-height:44px; }
  .nav-btn { white-space:normal; overflow-wrap:anywhere; }
  .admin-toggle { min-height:44px; align-items:center; }
  input, select { font-size:16px; }
  [data-theme="halloween"] .header { padding-top:88px; }
  [data-theme="halloween"] .header .subtitle { letter-spacing:2px; font-size:.78rem; }
  .ghost { left:19%; }.skeleton { right:20%; }.spider { right:6%; }
  .web { --web-size:64px; }
  /* Five small particles on phones; no large animated mist layer. */
  .seasonal-atmosphere::before, .seasonal-atmosphere span:nth-child(even) { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  [data-theme="halloween"] .haunting *,
  [data-theme="halloween"] .haunting *::before,
  [data-theme="halloween"] .haunting *::after { animation:none !important; }
  [data-theme="halloween"] .seasonal-atmosphere { display:none; }
}