:root{
  --bg:#ffffff;
  --fg:#000000;
  --magenta:#FF00AA;
  --accent:#3C4BF4;
  --color-kit-dark-array: 191,55,248;
  --color-kit-black-array: 0,0,0;
}
*{box-sizing:border-box}
html,body{height:100%; -webkit-text-size-adjust:100%}
body{
  margin:0; color:#fff;
  background-image:
    linear-gradient(to bottom, rgba(var(--color-kit-dark-array), 0.69), rgba(var(--color-kit-black-array), 1)),
    url('/images/DSC01083.jpg');
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-attachment: fixed !important;
  font-family: Inter, system-ui, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 720px){ body{ background-attachment: scroll, fixed; } }
.header{
  display:flex; align-items:center; justify-content:center;
  padding:10px 16px; border-bottom:1px solid #111; background:#000; position:relative;
}
.brand{ display:flex; align-items:center; gap:0 }
.brand > div{ display:none }
.brand img{ height:48px }
@media (min-width: 720px){ .brand img{ height:64px } }

.back {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    font-size: 13px;
}

/* Panels/Cards on dark bg */
.panel{ background:#fff; color:#111; border-radius:12px; border:1px solid rgba(0,0,0,.12); padding:16px }
.card{ color:#111 }

/* Heading colors */
h2{ color:#fff }
.panel h2{ color:#111 }

/* Constrain page width on desktop while keeping mobile full-bleed */
main{ max-width: 640px; margin: 0 auto; }
.grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; padding:16px;
}
.card{
  border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; display:flex; flex-direction:column;
  transition:transform .12s ease, box-shadow .12s ease;
  color: black !important;
  -webkit-tap-highlight-color:transparent;
}
.card:active{ transform:scale(.97) }
.keyart{ aspect-ratio: 16/9; width:100%; background:#f6f6f6; object-fit:cover }
.content{ padding:12px 12px 14px }
.name{ font-family: Anton, Impact, 'Arial Black', sans-serif; font-size:14px; text-transform:uppercase }
.meta{ font-size:12px; color:#555; margin-top:4px }
.desc{ font-size:13px; color:#333; margin-top:8px; min-height:40px; line-height:1.4 }
.actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap }
.btn{ padding:8px 12px; font-size:13px; border-radius:8px; border:1px solid #ddd; background:#fafafa; color:#111; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent }
.btn:active{ transform:scale(.95) }
.btn.primary{ background:var(--magenta); color:#fff; border-color:var(--magenta) }
.badge{ display:inline-block; background:#000; color:#fff; font-size:11px; padding:2px 6px; border-radius:999px }
.footer{ padding:16px; font-size:11px; color:#666; text-align:center; border-top:1px solid rgba(255,255,255,.08) }

/* Live scoreboard */
.list{ max-width:980px; margin:24px auto; padding:0 20px }
.score-item{
  display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid #eee; border-radius:12px; background:#fff;
  transform-origin: 50% 50%; transition: transform .35s ease, opacity .2s ease, box-shadow .2s ease;
}
.score-item:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08) }
.score-rank{ width:28px; text-align:center; font-family: Anton; font-size:18px }
.score-poster{ width:80px; height:45px; background:#f2f2f2; object-fit:cover; border-radius:8px }
.score-main{ flex:1; min-width:0 }
.score-name{ font-family: Anton; text-transform:uppercase; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.score-votes{ font-weight:800; color:var(--magenta) }

/* Thank you screen handled inline in vote page */