/* UFL Puskás 25 Winner Landing
   Simple, single-file deploy (index.html + assets).
   Colors sampled from the reference: background #F7C663, text #0B0B0B
*/

:root{
  --bg:#F7C663;
  --ink:#0B0B0B;
  --inkSoft:rgba(11,11,11,.72);
  --card:#101010;
  --card2:#151515;
  --pill:#0B0B0B;
  --pillText:#F7C663;
  --radius:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 14px;
}

.hero{
  width:min(980px, 100%);
  text-align:center;
}

.hero__logo{
  width:min(680px, 92%);
  height:auto;
  display:block;
  margin:0 auto 14px;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.10));
}

.hero__kicker{
  margin:10px 0 8px;
  font-weight:700;
  letter-spacing:.14em;
  font-size:12px;
}

.hero__title{
  margin:0 0 14px;
  font-family: Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif;
  font-weight:900;
  letter-spacing:.02em;
  font-size: clamp(38px, 5.6vw, 74px);
  line-height: .95;
  text-transform:uppercase;
}

.winner{
  margin:0 auto 18px;
  width:min(860px, 100%);
  padding:18px 18px;
  border-radius:var(--radius);
  background: rgba(255,255,255,.18);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}

.winner__name{
  font-family: Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif;
  font-size: clamp(34px, 4.6vw, 60px);
  text-transform:uppercase;
  letter-spacing:.02em;
}

.winner__meta{
  margin-top:6px;
  font-weight:700;
  color:var(--inkSoft);
  font-size: clamp(14px, 1.7vw, 18px);
}

.videoCard{
  width:min(860px, 100%);
  margin:0 auto;
  padding:14px;
  border-radius:22px;
  background: linear-gradient(180deg, var(--card2), var(--card));
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}

.videoCard__top{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--pill);
  color:var(--pillText);
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pill--soft{
  background: rgba(0,0,0,.55);
  color: rgba(247,198,99,.95);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:none;
}

.pill code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  padding:2px 6px;
  border-radius:999px;
  background: rgba(247,198,99,.14);
  color: rgba(247,198,99,.95);
}

.video16x9{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:16px;
  overflow:hidden;
  background:#0b0b0b;
}

.video16x9 video,
.video16x9 iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.footer{
  width:min(860px, 100%);
  margin:18px auto 0;
  opacity:.9;
}

.footer__line{
  height:1px;
  background: rgba(0,0,0,.16);
  margin:0 auto 10px;
  width: 88%;
}

.footer__text{
  margin:0;
  font-weight:700;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
}