@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;600;700;800&display=swap');

:root{
  --red:#e52323;
  --blue:#1677e8;
  --ink:#101114;
  --paper:#f4f1eb;
  --muted:#777;
}
*{box-sizing:border-box}
body{
  margin:0;background:#161719;color:var(--ink);
  font-family:Inter,system-ui,sans-serif;
}
.hero{
  background:
    radial-gradient(circle at 15% 20%,rgba(229,35,35,.28),transparent 30%),
    radial-gradient(circle at 85% 20%,rgba(22,119,232,.28),transparent 30%),
    #101112;
  color:#fff;padding:24px 18px 34px;border-bottom:5px solid #fff;
}
.hero-inner{max-width:1100px;margin:auto;text-align:center}
.brand{font-family:Anton,sans-serif;font-size:clamp(42px,8vw,92px);line-height:.95;letter-spacing:1px;text-transform:uppercase;text-shadow:5px 5px 0 #000}
.red{color:var(--red)} .blue{color:var(--blue)} .white{color:#fff}
.tagline{font-family:Anton,sans-serif;font-size:clamp(20px,3vw,32px);margin:16px 0 22px;letter-spacing:1px}
.poster{display:block;width:min(100%,1000px);max-height:470px;object-fit:cover;object-position:center;border:4px solid #fff;border-radius:20px;margin:0 auto;box-shadow:10px 10px 0 #000}
main{max-width:1000px;margin:0 auto;padding:28px 16px 50px}
.card{background:var(--paper);border:4px solid #111;border-radius:20px;box-shadow:8px 8px 0 #000;padding:26px}
h1,h2{font-family:Anton,sans-serif;letter-spacing:1px;margin:0 0 10px;text-transform:uppercase}
h1{font-size:34px}.intro{margin-top:0;color:#444}
form{display:grid;gap:14px}
.upload{
  border:3px dashed #111;border-radius:14px;padding:24px;text-align:center;
  cursor:pointer;background:#fff;font-weight:800
}
.upload:hover{background:#e9e6df}
.upload input{display:none}
.preview-wrap{max-width:260px}
.preview{width:100%;display:block;border-radius:12px;border:3px solid #111}
label[for="comment"]{font-weight:800}
textarea{
  width:100%;resize:vertical;border:3px solid #111;border-radius:12px;
  padding:13px;font:600 16px Inter;background:#fff;min-height:90px
}
.counter-row{position:relative}
#counter{position:absolute;right:12px;bottom:10px;font-size:12px;font-weight:800;color:#777}
button{
  border:3px solid #111;background:var(--red);color:#fff;border-radius:12px;
  padding:15px 18px;font:800 16px Inter;cursor:pointer;box-shadow:5px 5px 0 #111
}
button:hover{transform:translate(-1px,-1px)}
button:disabled{opacity:.6;cursor:wait}
.status{min-height:22px;font-weight:700;margin:0}
.reviews{margin-top:48px;color:#fff}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.section-title h2{font-size:30px}
.small-btn{font-size:13px;padding:8px 12px;background:#fff;color:#111;box-shadow:3px 3px 0 #000}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.review{
  background:var(--paper);color:#111;border:3px solid #111;border-radius:16px;
  overflow:hidden;box-shadow:5px 5px 0 #000
}
.review img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#ddd}
.review-body{padding:13px}.review-body p{margin:0;font-weight:700;line-height:1.35}
.date{display:block;color:#777;font-size:11px;margin-top:9px}
.loading{color:#ddd}
.empty{color:#ddd;border:2px dashed #777;padding:24px;border-radius:12px;text-align:center}
footer{background:#08090a;color:#fff;text-align:center;padding:28px 16px;font-size:15px}
footer strong{color:var(--blue)}
@media(max-width:650px){
  .poster{max-height:none}
  .section-title{align-items:flex-start;flex-direction:column}
  .card{padding:20px}
}