:root{
  --pink:#f7c663;
  --black:#0f0f10;
  --white:#ffffff;
  --accent:#ffb6c1;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--pink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--white);
}

.header{
  max-width:1200px;
  margin:24px auto 8px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:16px;
}

.brand{
  display:flex; align-items:center; gap:12px;
}
.brand .dot{
  width:10px; height:10px; border-radius:50%; background:var(--black);
}

h1{
  font-size:28px;
  letter-spacing:1px;
  color:var(--black);
  margin:0;
}

.container{
  max-width:1200px;
  margin:0 auto 80px;
  padding:16px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap:18px;
}

@media(min-width:520px){ .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(min-width:820px){ .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(min-width:1100px){ .grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card{
  background:var(--black);
  border-radius:8px;
  position:relative;
  overflow:hidden;
  padding:10px;
  display:flex;
  flex-direction:column;
  min-height:280px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

.thumb-wrap{
  position:relative;
  background:#000;
  border-radius:6px;
  overflow:hidden;
  aspect-ratio: 9/12;
  display:flex; align-items:center; justify-content:center;
}

video, .poster{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.play-icon{
  position:absolute;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.35);
  display:grid; place-items:center;
  backdrop-filter: blur(4px);
  cursor:pointer;
}

.play-icon svg{ width:18px; height:18px; }

.card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}

.meta{
  line-height:1.15;
}

.meta .title{ font-weight:800; font-size:16px; letter-spacing:.5px;}
.meta .sub{ font-size:11px; opacity:.8; }

.like{
  margin-left:auto;
  display:flex; gap:8px; align-items:center;
  user-select:none;
}

.heart{
  width:28px; height:28px; cursor:pointer;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  transition: transform .08s ease;
}

.heart:active{ transform: scale(.92); }

.heart svg{ width:18px; height:18px; }

.heart.liked svg path{ fill: #ff5a93; }

.count{
  font-size:12px; opacity:.8;
}

.limiter{
  background:rgba(0,0,0,.75);
  color:var(--white);
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  padding:10px 14px; border-radius:999px; font-size:14px;
  display:none;
}

.footer{
  max-width:1200px; margin:30px auto 60px; padding:0 16px;
  color:#222;
  font-size:13px;
}

.badge{
  background:var(--black);
  color:var(--accent);
  padding:3px 10px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.3px;
}

.password-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; z-index:50;
}

.password-box{
  background:var(--black); color:var(--white);
  padding:24px; border-radius:12px; width:min(92vw, 420px);
}

.password-box h2{ margin:0 0 10px; font-size:18px; }
.password-box input{ width:100%; padding:10px; border-radius:8px; border:1px solid #333; background:#0c0c0c; color:white; }
.password-box button{ margin-top:10px; padding:10px 14px; border-radius:8px; border:0; background:var(--accent); color:#000; font-weight:800; cursor:pointer; }

.results-table{
  width:100%;
  border-collapse:collapse;
  background:var(--black);
  border-radius:10px;
  overflow:hidden;
}
.results-table th, .results-table td{
  padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.06);
}
.results-table th{ text-align:left; font-size:12px; opacity:.8; }
.results-table td{ font-size:14px; }


.poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:2;
}
.thumb-wrap{ position:relative; }

.thumb-wrap{ position:relative; }
.poster{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:2;
  pointer-events:none; /* don't block taps */
}
.play-icon{
  z-index:3;
}
video{
  position:relative;
  z-index:1;
  background:#000;
}



/* v12: prominent popup fix */
.popup{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.popup-box{
  width:min(92vw, 420px);
  background: #0f0f10;
  color: #fff;
  border: 2px solid #f7c663;
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  text-align:center;
  transform: translateY(8px);
  opacity: 0;
  animation: popIn .25s ease forwards;
}
.popup-box h3{ margin:0 0 6px; font-size:18px; letter-spacing:.3px; }
.popup-box p{ margin:0; font-size:14px; opacity:.95; }
.popup-box .close{
  margin-top: 12px;
  background: #f7c663;
  color: #111;
  border:0;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
@keyframes popIn{
  to{ transform: translateY(0); opacity: 1; }
}

.count{ display:none !important; }

/* v13 Leaderboard hero */
.hero{
  max-width:1200px;
  margin: 8px auto 6px;
  padding: 24px 16px 0;
  text-align:center;
  color:#0f0f10;
}
.hero-logo{
  width:100%; height:100%; object-fit:contain; display:block; margin: 0 auto 8px;
}
.limit-note{
  display:inline-block;
  background:#0f0f10;
  color:#f7c663;
  font-weight:800;
  letter-spacing:.3px;
  border-radius:999px;
  padding:5px 12px;
  margin-bottom:8px;
    font-size: 11px;
}
.hero-title{
  margin:6px 0 2px;
  font-size:44px;
  font-weight:800;
  letter-spacing:1px;
}
.hero-sub{
  margin:0 auto 14px;
  font-size:16px;
  max-width:720px;
}

.top3{
  margin: 10px auto 16px;
  max-width: 900px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.top3-row{
  display:grid;
  grid-template-columns: 64px 1fr 140px 90px;
  align-items:center;
  gap:8px;
  padding:14px 14px;
  background:#111;
  color:#fff;
  border-bottom: 1px solid rgb(247 198 99);
}
.top3-row:nth-child(odd){ background:#151515; }
.top3-rank{
  width:40px; height:40px; border-radius:999px; background:#f7c663; color:#111;
  display:grid; place-items:center; font-weight:900; margin:0 auto;
}
.top3-name{ font-weight:800; letter-spacing:.2px; font-size: 11px; }
.top3-team{ text-align:center; opacity:.9; font-size:14px; }
.top3-votes{
  justify-self:center;
  background:#f7c663; color:#111; font-weight:800; border-radius:999px; padding:6px 10px;
}

@media (max-width: 720px){
  .top3-row{ grid-template-columns: 52px 1fr 90px 70px; }
  .hero-title{ font-size:36px; }
}