/* SEO Halloween Game - shared styles */
:root {
  --bg: #000;
  --orange: #ff7518;
  --bone: #f5ead8;
  --blood: #e3261b;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--orange); }
body {
  font-family: "Rubik", "Arial Black", Impact, sans-serif;
  font-weight: 800;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-x: hidden;
}
main { width: 100%; max-width: 900px; padding: 48px 16px; position: relative; z-index: 1; }
p { margin: 0 auto 0.6em; line-height: 1.25; }
a { color: var(--bone); }

.creepy { font-family: "Creepster", Impact, fantasy; font-weight: 400; letter-spacing: 0.04em; }
.title  { font-size: clamp(3rem, 12vw, 7rem); text-shadow: 0 0 24px rgba(255, 117, 24, .55); margin-bottom: .2em; }
.word   { font-size: clamp(4rem, 18vw, 10rem); color: var(--bone); text-shadow: 0 0 30px var(--orange); margin: .1em 0; }
.big    { font-size: clamp(1.8rem, 5.5vw, 3.2rem); }
.mid    { font-size: clamp(1.25rem, 3.6vw, 2rem); font-weight: 500; color: var(--bone); max-width: 760px; }
.rhyme  { font-size: clamp(1.3rem, 3.8vw, 2.2rem); color: var(--bone); font-weight: 500; line-height: 1.45; }
.blood  { color: var(--blood); }
sup a   { color: var(--orange); text-decoration: none; }
a.plain { color: inherit; text-decoration: none; }

/* Hidden clue: black text on the black background */
.shh, .shh * { color: #000 !important; text-shadow: none !important; }

.art      { display: block; width: min(100%, 440px); height: auto; margin: 1.2em auto; }
.art.wide { width: min(100%, 640px); }
.art-img  { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; }
.art-img.cat { max-width: 380px; margin: 1em auto; }

.author {
  margin: 2.5em auto 0; max-width: 680px; text-align: left;
  border: 3px dashed var(--orange); border-radius: 14px; padding: 1em 1.3em;
  font-size: 1rem; font-weight: 500; color: var(--bone);
}
.author p { margin: .35em 0; }
.author span { color: var(--orange); font-weight: 800; text-transform: uppercase; font-size: .8em; letter-spacing: .08em; margin-right: .4em; }
.author .source { font-size: .85em; opacity: .8; margin-top: .9em; }

/* Decorations */
.decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.web-corner { position: absolute; top: 0; left: 0; width: 160px; }
.bat { position: absolute; width: 60px; }
.bat1 { top: 12%; animation: fly 14s linear infinite; }
.bat2 { top: 28%; width: 40px; animation: fly 19s linear infinite 4s; }
@keyframes fly {
  0%   { left: -80px; transform: translateY(0); }
  25%  { transform: translateY(-30px); }
  50%  { transform: translateY(15px); }
  75%  { transform: translateY(-20px); }
  100% { left: 110%; transform: translateY(0); }
}
.float  { animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px); } }
.wobble { animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.swing  { transform-origin: top center; animation: swing 3.5s ease-in-out infinite; }
@keyframes swing { 50% { transform: rotate(8deg); } 0%, 100% { transform: rotate(-8deg); } }
.zz { animation: zz 2s ease-in-out infinite; }
@keyframes zz { 50% { opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .bat1 { left: 70%; } .bat2 { left: 15%; }
}