@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');

:root { color-scheme: dark; font-family: 'DM Sans', sans-serif; background: #141310; color: #f1eadb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: #141310 url('assets/autumn-halloween-neighborhood.png') center top / cover no-repeat fixed; }
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(4, 7, 12, .50), rgba(4, 3, 2, .38)); pointer-events: none; }
main { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 0 24px 24px; }
.stage { position: relative; width: 100%; flex: 1; min-height: 330px; padding: 0 0 42px; }
.ghost-anchor { position: absolute; top: 0; left: 58%; transform: translateX(-50%); }
.ghost { position: relative; display: block; width: min(350px, 31vw, 52svh); border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transform-origin: 50% 0%; will-change: transform; z-index: 1; }
.ghost img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.ghost-light { position: absolute; inset: 15% 12% 9%; z-index: 2; pointer-events: none; opacity: 0; border-radius: 45%; background: radial-gradient(ellipse 42% 52% at 50% 49%, rgba(194, 255, 103, .98) 0%, rgba(48, 255, 73, .82) 30%, rgba(0, 184, 44, .42) 55%, transparent 76%); mix-blend-mode: multiply; }
.ghost.is-haunting .ghost-light { animation: ghost-glow .42s ease-in-out infinite alternate; }
.ghost:focus-visible { outline: 1px dashed #bd8c59; outline-offset: 12px; border-radius: 45%; }
.shadow { display: none; }
.instruction { color: #fff1dc; font-size: 11px; letter-spacing: .09em; margin: 14px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(17, 10, 6, .58); backdrop-filter: blur(8px); text-shadow: 0 1px 2px #000; }
.instruction span { color: #bd8c59; padding: 0 8px; }
.status { height: 18px; font-size: 11px; color: #bd8c59; margin: 8px 0 0; }
footer { display: flex; align-items: center; gap: 8px; color: rgba(255, 241, 220, .72); font-size: 10px; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }
footer span { color: #bd8c59; }
footer a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgba(189, 140, 89, .65); }
footer a:hover, footer a:focus-visible { color: #fff1dc; text-decoration-color: #bd8c59; }
@keyframes ghost-glow {
  from { opacity: .48; filter: brightness(.92) saturate(1.15) drop-shadow(0 7px 13px rgba(38, 255, 76, .35)); }
  to { opacity: .82; filter: brightness(1.12) saturate(1.5) drop-shadow(0 9px 20px rgba(38, 255, 76, .65)); }
}
@media (max-width: 600px) {
  body { background-position: 72% top; background-attachment: scroll; }
  main { padding-inline: 12px; }
  .ghost-anchor { left: 70%; }
  .ghost { width: min(290px, 74vw, 48svh); }
  .instruction { font-size: 9px; }
}
@media (max-height: 650px) { .stage { min-height: 230px; } .ghost { width: min(280px, 46vw, 48svh); } }