:root{
  --bg:#0b0410;
  --bg2:#170a24;
  --orange:#ff7518;
  --purple:#8a2be2;
  --green:#7fff00;
  --card:#1c0f2b;
  --text:#f3e9ff;
  --muted:#b79fd1;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,sans-serif;
  background:linear-gradient(160deg,var(--bg),var(--bg2));
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 15% 20%, rgba(138,43,226,.18), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(255,117,24,.15), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(127,255,0,.08), transparent 45%);
}

/* Flying bats */
.bats{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bat{position:absolute;font-size:1.6rem;opacity:.5;animation:fly 18s linear infinite}
.bat:nth-child(1){top:12%;animation-duration:20s}
.bat:nth-child(2){top:30%;animation-duration:26s;animation-delay:-5s;font-size:1.1rem}
.bat:nth-child(3){top:55%;animation-duration:22s;animation-delay:-9s}
.bat:nth-child(4){top:70%;animation-duration:30s;animation-delay:-3s;font-size:2rem}
.bat:nth-child(5){top:85%;animation-duration:24s;animation-delay:-12s;font-size:1.3rem}
@keyframes fly{
  0%{left:-10%;transform:translateY(0) scaleX(1)}
  50%{transform:translateY(-40px) scaleX(1)}
  100%{left:110%;transform:translateY(10px) scaleX(1)}
}

.hero{text-align:center;padding:3.5rem 1rem 2.5rem;position:relative;z-index:1}
.logo{
  font-family:'Creepster',cursive;
  font-size:clamp(2.5rem,8vw,5rem);
  color:var(--orange);
  letter-spacing:2px;
  text-shadow:0 0 12px rgba(255,117,24,.7),0 0 30px rgba(138,43,226,.5);
  animation:flicker 4s infinite;
}
@keyframes flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.5}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}
.tagline{color:var(--muted);margin:.8rem 0 1.4rem;font-size:1.05rem}

.btn{cursor:pointer;border:none;border-radius:10px;font-weight:800;font-family:inherit;padding:.7rem 1.3rem;font-size:1rem;transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#1a0a00;box-shadow:0 0 16px rgba(255,117,24,.5)}
.btn-ghost{background:transparent;border:2px solid var(--purple);color:var(--text)}
.btn-ghost:hover{background:var(--purple);box-shadow:0 0 16px rgba(138,43,226,.6)}

.container{max-width:1200px;margin:0 auto;padding:0 1rem 3rem;position:relative;z-index:1}
.toolbar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1.8rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{cursor:pointer;background:var(--card);border:1px solid rgba(138,43,226,.4);color:var(--text);padding:.5rem .9rem;border-radius:20px;font-family:inherit;font-weight:600;font-size:.9rem;transition:.2s}
.chip:hover{border-color:var(--orange)}
.chip.active{background:var(--purple);border-color:var(--purple);color:#fff}
.search{background:var(--card);border:1px solid rgba(138,43,226,.4);color:var(--text);padding:.6rem 1rem;border-radius:20px;font-family:inherit;min-width:200px;flex:1;max-width:320px}
.search:focus{outline:none;border-color:var(--orange)}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.card{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid rgba(138,43,226,.3);transition:transform .2s,box-shadow .25s;cursor:pointer;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(138,43,226,.4)}
.thumb{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .play{position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;opacity:.85;text-shadow:0 0 12px #000}
.card-body{padding:1rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.card-cat{font-size:.75rem;color:var(--green);text-transform:uppercase;letter-spacing:1px;font-weight:800}
.card-title{font-size:1.1rem;font-weight:800;line-height:1.25}
.card-desc{font-size:.85rem;color:var(--muted);flex:1}
.card-meta{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);margin-top:.3rem}
.stars-static{color:var(--orange)}

.empty{text-align:center;color:var(--muted);padding:3rem 1rem;font-size:1.1rem}
.hidden{display:none!important}

.footer{text-align:center;padding:2rem 1rem;color:var(--muted);border-top:1px solid rgba(138,43,226,.25);position:relative;z-index:1}

/* Modals */
.modal{position:fixed;inset:0;background:rgba(4,1,8,.85);display:grid;place-items:center;z-index:50;padding:1rem;backdrop-filter:blur(3px)}
.modal-box{background:linear-gradient(160deg,#1c0f2b,#12071d);border:1px solid var(--purple);border-radius:16px;padding:2rem;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 0 40px rgba(138,43,226,.5)}
.modal-wide{max-width:760px}
.modal-close{position:absolute;top:.6rem;right:.9rem;background:none;border:none;color:var(--muted);font-size:2rem;cursor:pointer;line-height:1}
.modal-close:hover{color:var(--orange)}
.modal h2{color:var(--orange);margin-bottom:1.2rem;font-family:'Creepster',cursive;letter-spacing:1px;font-size:1.8rem}

form label{display:block;margin-bottom:1rem;font-weight:600;font-size:.9rem;color:var(--muted)}
form input,form select,form textarea{width:100%;margin-top:.35rem;background:#0f0719;border:1px solid rgba(138,43,226,.4);color:var(--text);padding:.65rem;border-radius:8px;font-family:inherit;font-size:1rem}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--orange)}
.form-msg{min-height:1.2rem;font-size:.85rem;margin-bottom:.6rem}
.form-msg.error{color:#ff6b6b}
.form-msg.success{color:var(--green)}

.detail-embed{position:relative;aspect-ratio:16/9;width:100%;border-radius:12px;overflow:hidden;background:#000;margin-bottom:1rem}
.detail-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.detail-title{font-size:1.4rem;font-weight:800;margin-bottom:.3rem;color:var(--text)}
.detail-cat{color:var(--green);font-size:.8rem;text-transform:uppercase;letter-spacing:1px;font-weight:800;margin-bottom:.6rem}
.detail-desc{color:var(--muted);margin-bottom:1rem}

.rating-block{margin:1rem 0;padding:1rem;background:#0f0719;border-radius:10px}
.rating-block h3,.comments-block h3{color:var(--orange);margin-bottom:.6rem;font-size:1.1rem}
.rate-stars{font-size:1.8rem;cursor:pointer;display:inline-flex;gap:.2rem}
.rate-stars span{color:#55456b;transition:.15s}
.rate-stars span.on{color:var(--orange);text-shadow:0 0 8px rgba(255,117,24,.7)}
.rating-avg{color:var(--muted);font-size:.9rem;margin-top:.5rem}

.comments-block{margin-top:1rem}
.comment-form input,.comment-form textarea{margin-bottom:.6rem}
.comment{background:#0f0719;border-left:3px solid var(--purple);padding:.7rem .9rem;border-radius:6px;margin-bottom:.6rem}
.comment .c-author{font-weight:800;color:var(--orange);font-size:.9rem}
.comment .c-date{color:var(--muted);font-size:.75rem;margin-left:.4rem}
.comment .c-body{margin-top:.3rem;font-size:.92rem;color:var(--text)}
.no-comments{color:var(--muted);font-size:.9rem}

@media(max-width:600px){
  .modal-box{padding:1.4rem}
  .toolbar{flex-direction:column;align-items:stretch}
  .search{max-width:none}
}