/* Voorspelspel */
.vs-hero { background: var(--navy); color: #fff; padding: 50px 0 110px; position: relative; overflow: hidden; }
.vs-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 0, rgba(250,185,33,.25), transparent 45%), radial-gradient(circle at 0 100%, rgba(226,12,32,.4), transparent 50%); pointer-events: none; }
.vs-hero .wrap { position: relative; }
.vs-hero .lead { max-width: 64ch; }
.vs-body { margin-top: -70px; position: relative; z-index: 2; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 18px; max-width: 1200px; align-items: start; }
.vs-card { background: #fff; border-radius: 22px; padding: clamp(20px, 3vw, 34px); box-shadow: 0 20px 44px -30px rgba(14,50,79,.55); color: var(--navy); }
.vs-side { display: grid; gap: 18px; }
.vs-hist { grid-column: 1 / -1; }
.vs-loading, .vs-note { color: var(--muted); margin: 0; }
.vs-note { font-size: 13.5px; margin-top: 12px; }
.wm-h { margin: 4px 0 8px; font: italic 900 clamp(24px, 2.6vw, 34px)/1.05 var(--heading); text-transform: uppercase; color: var(--navy); }
.vs-when { color: var(--muted); margin: 0 0 22px; }
.vs-when a { color: var(--red); font-weight: 700; }
.vs-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 20px; border-radius: 18px; background: #eef3f7; }
.vs-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font: italic 900 clamp(15px, 1.8vw, 20px)/1.05 var(--heading); text-transform: uppercase; }
.vs-team img { width: clamp(56px, 8vw, 90px); height: clamp(44px, 6vw, 70px); object-fit: contain; }
.vs-nums { display: flex; align-items: center; gap: 10px; }
.vs-nums > span { font: italic 900 40px/1 var(--heading); color: var(--red); }
.vs-num { display: grid; justify-items: center; gap: 4px; }
.vs-num input { width: 72px; height: 76px; border: 2px solid var(--ice-2, #d6e1ea); border-radius: 16px; text-align: center; font: italic 900 46px/1 var(--heading); color: var(--navy); background: #fff; -moz-appearance: textfield; }
.vs-num input::-webkit-outer-spin-button, .vs-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vs-num input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.vs-step { width: 40px; height: 30px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; font: 700 20px/1 var(--body); cursor: pointer; }
.vs-step:hover { background: var(--red); }
.vs-nick { display: grid; gap: 6px; margin: 20px 0 14px; font-weight: 600; font-size: 14px; }
.vs-nick input { height: 48px; border: 2px solid var(--ice-2, #d6e1ea); border-radius: 12px; padding: 0 14px; font: 600 16px var(--body); color: var(--navy); }
.vs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.vs-msg { margin: 12px 0 0; font-weight: 700; color: var(--navy); }
.vs-msg:empty { display: none; }
.vs-me { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.vs-me div { display: grid; gap: 4px; padding: 14px 10px; border-radius: 14px; background: #eef3f7; text-align: center; }
.vs-me b { font: italic 900 36px/1 var(--heading); }
.vs-me span { font-size: 12.5px; color: var(--muted); }
.vs-board { list-style: none; margin: 8px 0 0; padding: 0; }
.vs-board li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ice-2, #e3ebf2); }
.vs-board li:last-child { border-bottom: 0; }
.vs-board li.is-me { background: #fff7e0; border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.vs-board .vs-empty { display: block; color: var(--muted); border: 0; }
.vs-pos { font: italic 900 20px/1 var(--heading); color: var(--muted); }
.vs-board li:nth-child(-n+3) .vs-pos { color: var(--gold); }
.vs-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-name em { color: var(--muted); font-weight: 600; font-style: normal; }
.vs-pts { font: italic 900 22px/1 var(--heading); }
.vs-hlist { list-style: none; margin: 10px 0 0; padding: 0; }
.vs-hlist a { display: grid; grid-template-columns: 1fr auto auto 56px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ice-2, #e3ebf2); color: var(--navy); text-decoration: none; font-size: 15px; }
.vs-hlist li:last-child a { border-bottom: 0; }
.vs-p { text-align: center; padding: 6px 0; border-radius: 8px; background: #eef3f7; font: italic 900 18px/1 var(--heading); }
.vs-p--5 { background: var(--gold); }
.vs-p--3, .vs-p--2 { background: #1f9d55; color: #fff; }
@media (max-width: 900px) {
  .vs-body { grid-template-columns: 1fr; }
  .vs-hlist a { grid-template-columns: 1fr auto 48px; }
  .vs-hlist a span:nth-child(2) { display: none; }
}


.vs-who { margin: 18px 0 14px; color: var(--muted); }
.vs-who b { color: var(--navy); }
.vs-out { border: 0; background: none; padding: 0; color: var(--red); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.vs-login { margin-top: 20px; padding: 20px; border-radius: 16px; border: 2px dashed var(--ice-2, #d6e1ea); }
.vs-login h3 { margin: 0 0 6px; font: italic 900 22px/1 var(--heading); text-transform: uppercase; }
.vs-login p { color: var(--muted); margin: 0 0 6px; }
.vs-login .vs-nick { margin: 12px 0 0; }
.vs-login .btn { margin-top: 16px; }

/* deelnemers totaal en per wedstrijd */
.vs-stats { margin: 4px 0 14px; padding: 14px; border-radius: 14px; background: #eef3f7; }
.vs-tot { display: flex; align-items: baseline; gap: 8px; }
.vs-tot b { font: italic 900 34px/1 var(--heading); }
.vs-tot span { color: var(--muted); font-size: 14px; }
.vs-per { list-style: none; margin: 10px 0 0; padding: 0; }
.vs-per li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #dbe5ee; font-size: 14px; }
.vs-per em { font-style: normal; color: var(--muted); font-weight: 700; margin-left: 4px; }
.vs-per em.is-open { color: #1f9d55; }
.vs-per b { font: italic 900 18px/1 var(--heading); }
.vs-soon { display: grid; gap: 6px; padding: 18px; border-radius: 16px; background: #fff7e0; border: 2px solid var(--gold); }
.vs-soon b { font: italic 900 22px/1.1 var(--heading); text-transform: uppercase; }
.vs-soon span { color: var(--muted); }

.vs-team small { display: none; }
/* mobiel: per team één rij met het eigen scorevakje ernaast */
@media (max-width: 640px) {
  .vs-score { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "th nh" "ta na"; gap: 12px 12px; padding: 14px; }
  .vs-nums { display: contents; }
  .vs-nums > span { display: none; }
  .vs-team { flex-direction: row; text-align: left; gap: 12px; }
  .vs-team img { width: 48px; height: 40px; flex: none; }
  .vs-team span { display: grid; gap: 3px; min-width: 0; }
  .vs-team b { font-size: 17px; line-height: 1.05; overflow-wrap: anywhere; }
  .vs-team small { display: block; font: 600 12px/1 var(--body); color: var(--muted); text-transform: none; letter-spacing: 0; }
  .vs-team--h { grid-area: th; }
  .vs-team--a { grid-area: ta; padding-top: 12px; border-top: 1px solid #d6e1ea; }
  .vs-num--h { grid-area: nh; }
  .vs-num--a { grid-area: na; padding-top: 12px; border-top: 1px solid #d6e1ea; }
  .vs-num { grid-template-columns: 36px 56px 36px; align-items: center; gap: 6px; }
  .vs-num input { width: 56px; height: 56px; font-size: 34px; order: 1; }
  .vs-num .vs-step[data-d="-1"] { order: 0; }
  .vs-num .vs-step[data-d="1"] { order: 2; }
  .vs-step { width: 36px; height: 36px; border-radius: 50%; }
}
@media (max-width: 640px) {
  .vs-play { padding: 18px 16px; }
  .vs-score { padding: 12px; gap: 10px 8px; }
  .vs-team { gap: 8px; }
  .vs-team img { width: 34px; height: 30px; }
  .vs-team b { font-size: 15.5px; }
  .vs-num { grid-template-columns: 30px 46px 30px; gap: 4px; }
  .vs-num input { width: 46px; height: 50px; font-size: 30px; border-radius: 12px; }
  .vs-step { width: 30px; height: 30px; font-size: 18px; }
}

/* tabs en klassementpagina */
.vs-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.1); margin-bottom: 22px; }
.vs-tabs a { padding: 10px 18px; border-radius: 999px; color: rgba(255,255,255,.8); text-decoration: none; font: italic 800 15px/1 var(--heading); text-transform: uppercase; letter-spacing: .03em; }
.vs-tabs a[aria-current="page"] { background: var(--gold); color: var(--navy); }
.vs-all { display: inline-block; margin-top: 14px; }
.vs-body--rank { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.vs-main { display: grid; gap: 18px; }
.vs-body--rank .vs-side { position: sticky; top: 100px; }
.vs-body--rank .vs-score { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "th nh" "ta na"; gap: 10px 8px; padding: 12px; }
.vs-body--rank .vs-nums { display: contents; }
.vs-body--rank .vs-nums > span { display: none; }
.vs-body--rank .vs-team { flex-direction: row; text-align: left; gap: 8px; font-size: 16px; }
.vs-body--rank .vs-team img { width: 36px; height: 30px; }
.vs-body--rank .vs-team span { display: grid; gap: 3px; }
.vs-body--rank .vs-team small { display: block; font: 600 12px/1 var(--body); color: var(--muted); text-transform: none; }
.vs-body--rank .vs-team--h { grid-area: th; } .vs-body--rank .vs-num--h { grid-area: nh; }
.vs-body--rank .vs-team--a { grid-area: ta; padding-top: 10px; border-top: 1px solid #d6e1ea; }
.vs-body--rank .vs-num--a { grid-area: na; padding-top: 10px; border-top: 1px solid #d6e1ea; }
.vs-body--rank .vs-num { grid-template-columns: 30px 46px 30px; align-items: center; gap: 4px; }
.vs-body--rank .vs-num input { width: 46px; height: 50px; font-size: 30px; order: 1; }
.vs-body--rank .vs-step[data-d="-1"] { order: 0; } .vs-body--rank .vs-step[data-d="1"] { order: 2; }
.vs-body--rank .vs-step { width: 30px; height: 30px; border-radius: 50%; font-size: 18px; }
.vs-steps { list-style: none; margin: 8px 0 22px; padding: 0; display: grid; gap: 14px; }
.vs-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.vs-steps li > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; font: italic 900 20px/1 var(--heading); }
.vs-steps strong { display: block; font: italic 900 19px/1.1 var(--heading); text-transform: uppercase; margin-bottom: 4px; }
.vs-steps span { color: var(--muted); }
.vs-rules__h { margin: 20px 0 10px; font: italic 900 20px/1 var(--heading); text-transform: uppercase; }
.vs-pointslist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vs-pointslist li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.vs-pointslist b { display: grid; place-items: center; height: 36px; border-radius: 10px; background: #eef3f7; font: italic 900 22px/1 var(--heading); }
.vs-pointslist li:first-child b { background: var(--gold); }
.vs-pointslist li:nth-child(2) b, .vs-pointslist li:nth-child(3) b { background: #1f9d55; color: #fff; }
.vs-pointslist span { color: #3c5a70; }
.vs-rules p { color: var(--muted); line-height: 1.6; }
.vs-muted { font-size: 13.5px; }
@media (max-width: 900px) { .vs-body--rank { grid-template-columns: 1fr; } .vs-body--rank .vs-side { position: static; order: -1; } }
.vs-tabs { display: flex; width: max-content; max-width: 100%; }