/* Spook Show: shared Halloween theme for the player, dashboard and login. */
:root {
  --night: #0d0714;
  --night-2: #1a0f26;
  --night-3: #2a1840;
  --pumpkin: #ff7518;
  --pumpkin-dim: #c4520a;
  --slime: #7cff4f;
  --blood: #ff3b3b;
  --bone: #f3ead8;
  --bone-dim: #b9ad99;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--night);
  color: var(--bone);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, #3b1d5c 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, #3a1a05 0%, transparent 70%),
    var(--night);
  background-attachment: fixed;
}

h1, h2, .spooky {
  font-family: "Creepster", "Chiller", fantasy;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--pumpkin);
  text-shadow: 0 0 12px rgba(255, 117, 24, 0.55), 0 0 40px rgba(255, 117, 24, 0.25);
}

a { color: var(--slime); }

button, .button {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 10px;
  padding: 0.7em 1.2em;
  background: linear-gradient(180deg, var(--pumpkin), var(--pumpkin-dim));
  color: #1a0800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  justify-content: center;
  box-shadow: 0 0 0 rgba(255, 117, 24, 0);
  transition: transform 0.1s, box-shadow 0.2s;
}
button:hover, .button:hover { animation: candle 1.6s infinite; }
button:active, .button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: progress; animation: none; }
button.ghost {
  background: transparent;
  color: var(--bone-dim);
  border: 1px solid var(--night-3);
}
button.ghost:hover { color: var(--bone); border-color: var(--pumpkin-dim); }
button.danger:hover { color: var(--blood); border-color: var(--blood); }

@keyframes candle {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 117, 24, 0.55); }
  20% { box-shadow: 0 0 22px rgba(255, 150, 40, 0.75); }
  45% { box-shadow: 0 0 10px rgba(255, 117, 24, 0.4); }
  70% { box-shadow: 0 0 26px rgba(255, 140, 30, 0.8); }
}

input[type=text], input[type=url], input[type=password], input[inputmode] {
  font: inherit;
  width: 100%;
  padding: 0.75em 0.9em;
  border-radius: 10px;
  border: 1px solid var(--night-3);
  background: var(--night-2);
  color: var(--bone);
  outline: none;
}
input:focus { border-color: var(--pumpkin); box-shadow: 0 0 0 3px rgba(255, 117, 24, 0.2); }
input::placeholder { color: #7d6f8a; }

/* ---- Bats and fog, drawn without image files ---- */
.bats { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bat {
  position: absolute;
  left: -80px;
  width: 64px;
  height: 26px;
  background: #4a2768;
  -webkit-mask: var(--bat) center / contain no-repeat;
  mask: var(--bat) center / contain no-repeat;
  animation: fly linear infinite, flap 0.25s ease-in-out infinite alternate;
  opacity: 0.85;
  --bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M50 14C47 8 45 8 44 12C40 6 30 4 22 8C26 10 27 14 26 18C20 14 10 14 2 20C10 20 16 24 18 30C24 26 32 26 36 32C40 26 46 24 50 28C54 24 60 26 64 32C68 26 76 26 82 30C84 24 90 20 98 20C90 14 80 14 74 18C73 14 74 10 78 8C70 4 60 6 56 12C55 8 53 8 50 14Z'/%3E%3C/svg%3E");
}
.bat:nth-child(1) { top: 12%; animation-duration: 14s, 0.22s; }
.bat:nth-child(2) { top: 28%; width: 40px; animation-duration: 19s, 0.18s; animation-delay: -6s, 0s; }
.bat:nth-child(3) { top: 8%; width: 50px; animation-duration: 23s, 0.26s; animation-delay: -15s, 0s; }
.bat:nth-child(4) { top: 45%; width: 34px; animation-duration: 17s, 0.2s; animation-delay: -10s, 0s; opacity: 0.6; }
@keyframes fly {
  0% { transform: translate(0, 0); }
  25% { transform: translate(30vw, -4vh); }
  50% { transform: translate(60vw, 3vh); }
  75% { transform: translate(85vw, -3vh); }
  100% { transform: translate(calc(100vw + 160px), 2vh); }
}
@keyframes flap { from { scale: 1 1; } to { scale: 0.7 1.15; } }

.fog {
  position: fixed;
  left: -50%;
  right: -50%;
  bottom: -10vh;
  height: 40vh;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 50% at 20% 70%, rgba(200, 190, 230, 0.10), transparent 70%),
    radial-gradient(ellipse 25% 45% at 55% 80%, rgba(200, 190, 230, 0.08), transparent 70%),
    radial-gradient(ellipse 30% 50% at 85% 70%, rgba(200, 190, 230, 0.10), transparent 70%);
  animation: drift 30s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }

@media (prefers-reduced-motion: reduce) {
  .bats, .fog { display: none; }
  button:hover, .button:hover { animation: none; box-shadow: 0 0 14px rgba(255, 117, 24, 0.55); }
}