:root{
  --bg1:#0a0014; --bg2:#1b0033; --bg3:#2b0049;
  --accent:#ff6a00; --accent2:#9b5cff; --accent3:#ff1fb8;
  --glass: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.15);
  --text:#f6f6f6; --muted:#b9b9c2;
}

html,body{min-height:100vh}
*{box-sizing:border-box}
body{
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, #4a008a22, transparent),
             radial-gradient(900px 500px at 20% -10%, #ff6a0022, transparent),
             linear-gradient(180deg, var(--bg1), var(--bg2));
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
footer{
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, #4a008a22, transparent),
             radial-gradient(900px 500px at 20% -10%, #ff6a0022, transparent),
             linear-gradient(180deg, var(--bg1), var(--bg2));
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Scene */
.scene{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1}
.scene .stars{
  position:absolute; inset:0; background:
    radial-gradient(#fff, transparent 2px) 0 0/3px 3px,
    radial-gradient(#fff3, transparent 2px) 1.5rem 1.5rem/4px 4px;
  opacity:.25;
  animation: twinkle 6s linear infinite alternate;
}
@keyframes twinkle{to{opacity:.5}}
.scene .moon{
  position:absolute; top:8vh; right:8vw;
  width:120px; height:120px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffe291 60%, #0000 62%),
              radial-gradient(circle at 70% 60%, #00000022, transparent 50%);
  box-shadow: 0 0 40px 10px #ffe29122, 0 0 120px 40px #ffd54a11;
  filter:saturate(1.2);
}
.scene .lasers{
  position:absolute; bottom:0; left:0; right:0; height:40vh;
  background:
    conic-gradient(from 190deg at 80% 100%, #ff6a0040 0 10deg, #0000 10deg 360deg),
    conic-gradient(from 170deg at 20% 100%, #9b5cff40 0 14deg, #0000 14deg 360deg);
  mix-blend-mode: screen; opacity:.6; animation: sweep 8s linear infinite;
}
@keyframes sweep{ to{ filter:hue-rotate(360deg)} }

.bats .bat{
  position:absolute; width:28px; height:10px; background:#000;
  border-radius: 10px 10px 2px 2px; top:15vh; left:-10%;
  transform-origin:center; opacity:.8; filter: drop-shadow(0 0 6px #0008);
}
.bat::before, .bat::after{
  content:""; position:absolute; width:18px; height:10px; top:-2px; background:#000; border-radius: 10px 10px 0 10px;
}
.bat::after{ right:-14px; transform: scaleX(-1);}
.b1{ animation: fly 14s linear infinite;}
.b2{ animation: fly 18s 1.5s linear infinite; top:22vh}
.b3{ animation: fly 20s .5s linear infinite; top:30vh}
@keyframes fly{
  0%{ transform: translateX(-10%) translateY(0) }
  50%{ transform: translateX(110vw) translateY(-8vh) }
  100%{ transform: translateX(210vw) translateY(2vh) }
}

/* Equalizer */
.equalizer{ position:fixed; bottom:0; left:0; right:0; height:64px; display:flex; gap:6px; justify-content:center; opacity:.35}
.equalizer i{ width:6px; background: linear-gradient(180deg, var(--accent2), var(--accent3)); display:block; border-radius:2px; animation: bars 1.2s ease-in-out infinite; }
.equalizer i:nth-child(odd){ animation-duration:.9s}
.equalizer i:nth-child(3){ animation-delay:.2s}
.equalizer i:nth-child(5){ animation-delay:.4s}
.equalizer i:nth-child(7){ animation-delay:.6s}
@keyframes bars{ 0%,100%{ height:10px } 50%{ height:52px } }

/* Glass UI */
.nav-glass, .content-glass, .footer-glass, .card.fancy, .flash{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--border); border-radius: 16px; backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px #0008;
}
.nav-glass{ margin-top: .75rem }
.brand{ font-family: Creepster, Inter, sans-serif; font-size: 1.15rem; letter-spacing:.5px }
.pumpkin{ filter: drop-shadow(0 0 6px #ff6a00aa) }

.hero{ text-align:center; margin-top:1rem; margin-bottom:1.25rem }
.creep{ font-family: Creepster, Inter, sans-serif; font-size: clamp(2.2rem, 5vw, 3.2rem); color:#ffd54a; text-shadow: 0 0 24px #ffc40055}
.tagline{ color:var(--muted) }
.hero-cta{ display:flex; gap:.75rem; justify-content:center; margin-top:.75rem }

.cards .card{ text-align:center }
.gallery .card .polaroid{
  padding:.5rem; background:#fff; border-radius:10px; transform: rotate(-1.5deg);
  box-shadow: 0 10px 20px #0007;
}
.gallery .card:nth-child(2n) .polaroid{ transform: rotate(1.5deg) }
.gallery img{ width:100%; height:280px; object-fit:cover; border-radius:6px }

/* Buttons */
.btn-glow, .btn-outline, button[type=submit].btn-glow{
  border-radius: 12px; border: 1px solid transparent; padding:.6rem 1rem; font-weight:600;
}
.btn-glow{ background: radial-gradient(120% 120% at 50% 0%, var(--accent2), var(--accent)); color:#fff;
  box-shadow: 0 0 20px #ff6a0066, inset 0 0 10px #ffffff22; transition: transform .15s ease, box-shadow .2s ease}
.btn-glow:hover{ transform: translateY(-1px); box-shadow: 0 0 30px #ff6a00aa }
.btn-outline{ background: transparent; border-color: var(--border); color:#fff }
.btn-outline:hover{ border-color:#fff }

/* Forms */
label > input[type=text], label > input[type=email], label > input[type=file]{
  background: var(--glass); border:1px solid var(--border); color:#fff; border-radius:10px;
}
label.drop{ border:2px dashed var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; min-height:120px; color:var(--muted)}
label.drop input{ opacity:0; position:absolute; inset:0; cursor:pointer }
label.drop:hover{ border-color:#fff; color:#fff }

.grid.two{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: .8rem }
.actions{ display:flex; gap:.6rem; margin-top:.6rem }

.flash{ padding:.75rem .9rem; margin:.6rem 0 }
p{ color: var(--muted)}
a{ color: var(--muted)}
h4{ color: var(--muted)}

h3{ color: var(--muted)}
input{ color:var(--muted)}
label{ color:var(--muted)}
.creep2{ font-family: Creepster, Inter, sans-serif; font-size: clamp(2.2rem, 2vw, 3.2rem); color:#ffd54a; text-shadow: 0 0 24px #ffc40055}
.creep3{ font-family: Creepster, Inter, sans-serif; font-size: clamp(1.5rem, 1vw, 2.5rem); color:#ffd54a; text-shadow: 0 0 24px #ffc40055}
.muted{ color:var(--muted) }
.center{text-align:center}


.preview {
  margin-top: 1rem;
  text-align: center;
}

.preview img {
  max-width: 560px;          /* limit the preview width */
  max-height: 480px;         /* prevent tall images from expanding the card */
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 0 16px rgba(255,106,0,0.3);
  margin-top: 0.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.preview img:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(255,140,0,0.7);
}

@media (max-width: 600px) {
  .preview img {
    max-width: 400px;
    max-height: 360px;
  }
}

.flash-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.flash-box {
  padding: 0.8rem 1rem;
  border-radius: 10px;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  border: none;
}

/* Solid background colors for each category */
.flash-box.error {
  background: #fc6868;          /* red for errors */
}

.flash-box.info {
  background: #27f527;          /* green for success/info */
}

.flash-box.warning {
  background: #e69100;          /* optional orange warning */
}

.flash-box.notice {
  background: #007bff;          /* optional blue notice */
}

/* Fixed 3-column ranking grid */
.ranking-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* always 3 columns */
  gap: 1.5rem;                           /* spacing between cards */
  margin: 1.5rem 2.5rem;                 /* outer margins (left & right) */
  justify-items: stretch;
  align-items: start;
}

/* Card styling inside ranking grid */
.ranking-grid .card {
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  text-align: center;
  padding: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ranking-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(255,106,0,0.3);
}


.ranking-grid img {
  width: 100%;
  height: 240px;
  object-fit: contain;   /* show the whole image */
  background-color: rgba(255, 255, 255, 0.05); /* subtle backdrop */
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

/* Responsive tweak: fewer columns on smaller screens */
@media (max-width: 1000px) {
  .ranking-grid {
    grid-template-columns: repeat(2, 1fr);
    margin: 1rem 1.5rem;
  }
}

@media (max-width: 640px) {
  .ranking-grid {
    grid-template-columns: 1fr;
    margin: 1rem;
  }
}
.border-margin{
  margin-left:10vw;
  margin-right:10vw;
}