/* Heylo Bullseye Challenge. Kleuren en knoppen volgen matchflight.com. Alles staat onder .hb zodat het thema er niet doorheen loopt. */
.hb {
  --hb-ground: #15131D;
  --hb-surface: #1E1B2A;
  --hb-navy: #3C3750;
  --hb-cream: #F6E0B6;
  --hb-cream-dim: rgba(246, 224, 182, .64);
  --hb-orange: #F57F20;
  --hb-green: #269E5F;
  --hb-green-hover: #2FB56E;
  --hb-danger: #FF8A73;
  --hb-display: "Dunbar Low", "Jost", "Futura", "Century Gothic", sans-serif;
  --hb-body: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  background: var(--hb-ground);
  color: var(--hb-cream);
  font-family: var(--hb-body);
  font-size: 17px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  container-type: inline-size;
  container-name: hb;
  padding: 24px 20px 56px;
}
.hb *, .hb *::before, .hb *::after { box-sizing: border-box; }
.hb h1, .hb h2, .hb h3, .hb .hb-h2 { font-family: var(--hb-display); font-weight: 700; text-transform: uppercase; line-height: 1.08; margin: 0; color: inherit; text-wrap: balance; }
.hb h1 { font-size: clamp(38px, 7vw, 64px); }
.hb h2, .hb .hb-h2 { font-size: clamp(24px, 3.4vw, 34px); }
.hb h3 { font-size: 18px; letter-spacing: .02em; }
.hb p { margin: 0; color: inherit; font-size: inherit; }
.hb a { color: inherit; }
.hb .hb-hl { color: var(--hb-orange); }
.hb .hb-lede { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4; max-width: 34em; }
.hb .hb-dim { color: var(--hb-cream-dim); }
.hb .hb-small { font-size: 14px; }
.hb .hb-eyebrow { font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--hb-orange); }
.hb .hb-num { font-variant-numeric: tabular-nums; }

/* knoppen, gelijk aan de pills op de site */
.hb .hb-btn { appearance: none; border: 0; cursor: pointer; font: 600 18px var(--hb-body); border-radius: 62px; padding: 13px 22px 13px 27px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1.3; transition: background .15s, transform .15s; }
.hb .hb-btn::after { content: "\2192"; font-weight: 500; }
.hb .hb-primary { background: var(--hb-green); color: var(--hb-cream); }
.hb .hb-primary:hover { background: var(--hb-green-hover); color: var(--hb-cream); }
.hb .hb-cream { background: var(--hb-cream); color: var(--hb-ground); }
.hb .hb-cream:hover { background: #fff; color: var(--hb-ground); }
.hb .hb-ghost { background: transparent; color: var(--hb-cream); box-shadow: inset 0 0 0 1.5px var(--hb-navy); font-size: 15px; padding: 9px 16px; }
.hb .hb-ghost::after { content: none; }
.hb .hb-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--hb-cream-dim); color: var(--hb-cream); }
.hb .hb-btn:active { transform: translateY(1px); }
.hb :is(button, a, input, [tabindex]):focus-visible { outline: 3px solid var(--hb-orange); outline-offset: 2px; }

/* formulieren */
.hb .hb-field { display: grid; gap: 6px; }
.hb .hb-field label { font-weight: 600; font-size: 15px; color: inherit; }
.hb .hb-input { width: 100%; background: var(--hb-surface); border: 1.5px solid var(--hb-navy); color: var(--hb-cream); font: 500 18px var(--hb-body); padding: 13px 16px; border-radius: 12px; margin: 0; box-shadow: none; }
.hb .hb-input::placeholder { color: rgba(246, 224, 182, .35); }
.hb .hb-input:focus { border-color: var(--hb-orange); outline: none; }
.hb .hb-check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; cursor: pointer; font-size: 15px; line-height: 1.4; font-weight: 400; }
.hb .hb-check input { width: 24px; height: 24px; accent-color: var(--hb-green); margin: 0; }
.hb .hb-err { color: var(--hb-danger); font-size: 14px; font-weight: 500; }
.hb .hb-err:empty { display: none; }

/* meedoen */
/* Center the join view vertically when it is shorter than the viewport. */
.hb[data-view="meedoen"] { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.hb .hb-join { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
.hb .hb-intro { display: grid; gap: 22px; }
.hb .hb-steps { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 12px; counter-reset: s; }
.hb .hb-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline; margin: 0; }
.hb .hb-steps li::before { content: counter(s); font: 700 20px var(--hb-display); color: var(--hb-orange); }
.hb .hb-prizes { border-top: 1px solid var(--hb-navy); padding-top: 18px; display: grid; gap: 8px; }
.hb .hb-prizes div { display: grid; grid-template-columns: 8.2em 1fr; gap: 12px; }
.hb .hb-prizes .hb-k { color: var(--hb-cream-dim); }
.hb .hb-panel { background: var(--hb-surface); border: 1px solid var(--hb-navy); border-radius: 20px; padding: 28px; display: grid; gap: 18px; }
.hb .hb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hb .hb-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hb .hb-done { display: grid; gap: 18px; }
.hb .hb-tickets { display: grid; gap: 14px; }
.hb .hb-ticket { background: var(--hb-cream); color: var(--hb-ground); border-radius: 20px; padding: 24px 26px; display: grid; gap: 6px; }
.hb .hb-ticket .hb-nr { font: 700 56px/1 var(--hb-display); }
.hb .hb-ticket .hb-who { font-weight: 600; font-size: 20px; }
.hb .hb-ticket .hb-status { font-size: 15px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed rgba(21, 19, 29, .35); }
.hb .hb-ticket b { font-variant-numeric: tabular-nums; }
.hb .hb-gate { max-width: 420px; display: grid; gap: 14px; }

/* team */
.hb .hb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hb-navy); border-bottom: 1px solid var(--hb-navy); margin-bottom: 30px; }
.hb .hb-stat { padding: 16px 18px 16px 0; }
.hb .hb-stat + .hb-stat { padding-left: 18px; border-left: 1px solid var(--hb-navy); }
.hb .hb-stat .hb-v { font: 700 32px/1.1 var(--hb-display); font-variant-numeric: tabular-nums; }
.hb .hb-stat .hb-l { font-size: 13px; color: var(--hb-cream-dim); }
.hb .hb-team { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 36px; align-items: start; }
.hb .hb-entry { position: sticky; top: 12px; }
.hb .hb-picked { background: var(--hb-navy); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.hb .hb-picked .hb-nm { font-weight: 600; }
.hb .hb-mm { font: 700 40px var(--hb-display); text-align: center; padding-top: 10px; padding-bottom: 10px; font-variant-numeric: tabular-nums; }
.hb .hb-plist { list-style: none; margin: 0; padding: 0; }
.hb .hb-plist li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 0; margin: 0; border-bottom: 1px solid var(--hb-navy); }
.hb .hb-plist .hb-n { color: var(--hb-orange); font-weight: 700; font-variant-numeric: tabular-nums; }
.hb .hb-plist .hb-nm { font-weight: 600; overflow-wrap: break-word; }
.hb .hb-plist .hb-em { font-size: 13px; color: var(--hb-cream-dim); overflow-wrap: break-word; }
.hb .hb-plist .hb-sc { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; white-space: nowrap; }
.hb .hb-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; background: var(--hb-navy); color: var(--hb-cream); margin-left: 6px; vertical-align: 2px; }
.hb .hb-tag.hb-opt { background: rgba(38, 158, 95, .25); color: #7FE0AC; }
.hb .hb-tag.hb-tie { background: var(--hb-orange); color: var(--hb-ground); }
.hb .hb-standoff { background: rgba(245, 127, 32, .12); border: 1px solid var(--hb-orange); border-radius: 16px; padding: 18px 20px; margin-bottom: 26px; display: grid; gap: 12px; }
.hb .hb-so-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 10px; align-items: center; }
.hb .hb-standoff .hb-input { padding: 9px 12px; font-size: 16px; }
.hb .hb-queue { background: var(--hb-navy); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.hb .hb-desk { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hb-navy); display: grid; gap: 12px; }
.hb .hb-desk .hb-input { padding: 10px 14px; font-size: 16px; }
.hb details.hb-more { margin-top: 18px; }
.hb details.hb-more summary { cursor: pointer; font-weight: 600; }

/* scherm */
.hb .hb-board { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.hb .hb-board > *, .hb .hb-side > *, .hb .hb-qr > * { min-width: 0; max-width: 100%; }
.hb .hb-head { display: grid; gap: 8px; margin-bottom: 22px; }
.hb .hb-rank { list-style: none; margin: 0; padding: 0; }
.hb .hb-rank li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 13px 18px; margin: 0; border-bottom: 1px solid var(--hb-navy); }
.hb .hb-rank .hb-pos { font: 700 26px var(--hb-display); color: var(--hb-cream-dim); font-variant-numeric: tabular-nums; }
.hb .hb-rank .hb-name { font-weight: 600; font-size: clamp(19px, 2.2vw, 26px); overflow-wrap: break-word; }
.hb .hb-rank .hb-val { font: 700 clamp(22px, 2.6vw, 32px) var(--hb-display); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.hb .hb-rank .hb-val small { font: 500 14px var(--hb-body); color: var(--hb-cream-dim); margin-left: 4px; text-transform: none; }
.hb .hb-rank .hb-avg { display: block; font: 400 13px var(--hb-body); color: var(--hb-cream-dim); text-align: right; }
.hb .hb-rank li.hb-first { background: var(--hb-cream); color: var(--hb-ground); border-radius: 16px; border-bottom-color: transparent; padding-top: 18px; padding-bottom: 18px; margin-bottom: 4px; }
.hb .hb-rank li.hb-first .hb-pos { color: var(--hb-orange); font-size: 38px; }
.hb .hb-rank li.hb-first .hb-val small, .hb .hb-rank li.hb-first .hb-avg { color: rgba(21, 19, 29, .62); }
.hb .hb-rank li.hb-first .hb-name { font-size: clamp(22px, 2.8vw, 32px); }
.hb .hb-rank li.hb-podium .hb-pos { color: var(--hb-orange); }
.hb .hb-rank li.hb-flash { animation: hb-flash 1.6s ease-out; }
@keyframes hb-flash { from { box-shadow: inset 0 0 0 2px var(--hb-orange); } to { box-shadow: inset 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .hb .hb-rank li.hb-flash { animation: none; } .hb .hb-btn { transition: none; } }
.hb .hb-side { display: grid; gap: 22px; }
.hb .hb-qr { background: var(--hb-cream); color: var(--hb-ground); border-radius: 20px; padding: 22px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.hb .hb-qr svg { width: 100%; max-width: 230px; height: auto; display: block; }
.hb .hb-qr h3 { font-size: 22px; }
.hb .hb-qr .hb-url { font-size: 13px; overflow-wrap: break-word; color: rgba(21, 19, 29, .6); }
.hb .hb-empty { padding: 28px 0; color: var(--hb-cream-dim); }
.hb .hb-offline { color: var(--hb-danger); font-size: 14px; font-weight: 500; }

.hb .hb-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--hb-cream); color: var(--hb-ground); font-weight: 600; padding: 12px 22px; border-radius: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); max-width: calc(100% - 32px); z-index: 1000; }
.hb [hidden] { display: none !important; }

@media (max-width: 860px) {
  .hb .hb-join, .hb .hb-team, .hb .hb-board { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hb .hb-entry { position: static; }
  .hb .hb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb .hb-stat:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--hb-navy); }
  .hb .hb-stat:nth-child(4) { border-top: 1px solid var(--hb-navy); }
  .hb .hb-join.hb-is-done .hb-intro { order: 2; }
}
@media (max-width: 480px) {
  .hb { font-size: 16px; padding: 18px 16px 48px; }
  .hb .hb-panel { padding: 22px 18px; }
  .hb .hb-two { grid-template-columns: minmax(0, 1fr); }
  .hb .hb-plist li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .hb .hb-plist li .hb-act { grid-column: 2 / -1; justify-self: start; }
  .hb .hb-rank li { grid-template-columns: 44px minmax(0, 1fr) auto; padding-left: 12px; padding-right: 12px; gap: 10px; }
  .hb .hb-so-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .hb .hb-so-row .hb-btn { grid-column: 1 / -1; justify-self: start; }
}

/* Dezelfde regels op containerbreedte, omdat de pagina in een kolom van het thema kan staan. */
@container hb (max-width: 860px) {
  .hb .hb-join, .hb .hb-team, .hb .hb-board { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hb .hb-entry { position: static; }
  .hb .hb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb .hb-stat:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--hb-navy); }
  .hb .hb-stat:nth-child(4) { border-top: 1px solid var(--hb-navy); }
  .hb .hb-join.hb-is-done .hb-intro { order: 2; }
}
@container hb (max-width: 480px) {
  .hb { font-size: 16px; padding: 18px 16px 48px; }
  .hb .hb-panel { padding: 22px 18px; }
  .hb .hb-two { grid-template-columns: minmax(0, 1fr); }
  .hb .hb-plist li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .hb .hb-plist li .hb-act { grid-column: 2 / -1; justify-self: start; }
  .hb .hb-rank li { grid-template-columns: 44px minmax(0, 1fr) auto; padding-left: 12px; padding-right: 12px; gap: 10px; }
  .hb .hb-so-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .hb .hb-so-row .hb-btn { grid-column: 1 / -1; justify-self: start; }
}