:root {
  color-scheme: dark;
  --bg: #080a0f;
  --panel: rgba(17, 21, 29, .94);
  --panel-2: rgba(26, 31, 41, .96);
  --text: #f7f8fa;
  --muted: #a4adbb;
  --line: rgba(255,255,255,.095);
  --black-team: #11141a;
  --black-team-soft: #202632;
  --yellow: #ffd21c;
  --yellow-soft: #ffe45f;
  --blue: #22466d;
  --green: #8ce8a8;
  --green-bg: rgba(44, 191, 94, .13);
  --amber: #f6c84d;
  --amber-bg: rgba(246, 200, 77, .075);
  --shadow: 0 22px 65px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 8% 8%, rgba(255,210,28,.10), transparent 28rem),
    radial-gradient(circle at 92% 17%, rgba(34,70,109,.20), transparent 31rem),
    linear-gradient(145deg, #07090d 0%, #0c1017 48%, #080a0f 100%);
  color: var(--text);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(30deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%);
  background-size: 40px 70px;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.shell { width: min(1080px, calc(100% - 28px)); margin: 0 auto; padding: 42px 0 36px; position: relative; }
.hero { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 24px; }
.hero-copy { display: flex; gap: 16px; align-items: center; min-width: 0; }
.club-mark { width: 9px; height: 80px; border-radius: 99px; overflow: hidden; display: flex; flex-direction: column; flex: 0 0 auto; box-shadow: 0 0 26px rgba(255,210,28,.14); }
.club-mark-black { flex: 1; background: #171c25; }
.club-mark-yellow { flex: 1; background: var(--yellow); }
.eyebrow, .section-kicker { margin: 0 0 7px; font-size: .75rem; font-weight: 850; letter-spacing: .2em; }
.eyebrow { color: var(--yellow); }
.regular-kicker { color: #9db2c9; }
.substitute-kicker { color: var(--amber); }
h1 { margin: 0; font-size: clamp(2.25rem, 8vw, 4.6rem); line-height: .95; letter-spacing: -.055em; }
.intro { margin: 14px 0 0; color: var(--muted); max-width: 690px; font-size: 1.01rem; line-height: 1.55; }
.presence-badge { flex: 0 0 auto; padding: 10px 15px; border: 1px solid rgba(140,232,168,.25); border-radius: 999px; color: var(--green); background: var(--green-bg); font-weight: 800; box-shadow: 0 8px 28px rgba(0,0,0,.18); }

.card { border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-radius: 22px; box-shadow: var(--shadow); }
.attendance-card { padding: 22px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.section-head h2, .team-heading h2 { margin: 0; }
.section-head p:not(.section-kicker) { margin: 5px 0 0; color: var(--muted); font-size: .91rem; line-height: 1.45; }

.players-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.player-toggle {
  min-height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
  text-align: left;
}
.player-toggle:hover { transform: translateY(-1px); border-color: rgba(255,210,28,.28); }
.player-toggle.present { background: var(--green-bg); border-color: rgba(140,232,168,.34); box-shadow: inset 3px 0 0 rgba(140,232,168,.65); }
.player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.player-state { flex: 0 0 auto; color: var(--muted); font-size: .73rem; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; }
.player-toggle.present .player-state { color: var(--green); }

.substitutes-divider { display: flex; align-items: center; gap: 12px; margin: 29px 0 23px; color: rgba(246,200,77,.72); font-size: .66rem; letter-spacing: .22em; font-weight: 900; }
.substitutes-divider::before, .substitutes-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(246,200,77,.28)); }
.substitutes-divider::after { background: linear-gradient(90deg, rgba(246,200,77,.28), transparent); }
.substitutes-head { align-items: flex-end; }
.substitutes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.substitute-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  padding: 6px;
  border: 1px dashed rgba(246,200,77,.20);
  border-radius: 14px;
  background: var(--amber-bg);
  transition: border-color .14s ease, background .14s ease;
}
.substitute-row.present { border-style: solid; border-color: rgba(140,232,168,.34); background: var(--green-bg); }
.substitute-name-wrap { position: relative; min-width: 0; }
.substitute-name-input {
  width: 100%; height: 42px; padding: 0 34px 0 10px;
  border: 1px solid transparent; border-radius: 10px; outline: none;
  background: rgba(0,0,0,.17); color: var(--text); font-weight: 700;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.substitute-name-input:hover { border-color: rgba(246,200,77,.22); }
.substitute-name-input:focus { border-color: rgba(255,210,28,.46); background: rgba(0,0,0,.25); box-shadow: 0 0 0 3px rgba(255,210,28,.07); }
.edit-hint { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: rgba(246,200,77,.72); pointer-events: none; font-size: .82rem; }
.substitute-presence {
  min-width: 104px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 10px; padding: 0 10px;
  background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer;
  font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .045em;
}
.substitute-presence.present { border-color: rgba(140,232,168,.28); color: var(--green); background: rgba(44,191,94,.08); }
.presence-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }

.actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 16px 0; }
.button { min-height: 48px; border-radius: 14px; border: 1px solid transparent; padding: 0 17px; cursor: pointer; font-weight: 850; transition: transform .14s ease, filter .14s ease, border-color .14s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: default; }
.button-primary { color: #0b0e14; background: linear-gradient(105deg, #fff176 0%, var(--yellow) 46%, #d9a900 100%); box-shadow: 0 13px 30px rgba(255,210,28,.16); }
.button-secondary { background: #171b23; border-color: rgba(255,255,255,.12); color: var(--text); }
.button-ghost { min-height: 38px; background: transparent; border-color: var(--line); color: var(--muted); }
.button-add { min-height: 40px; background: rgba(246,200,77,.08); border-color: rgba(246,200,77,.22); color: #ffe69b; white-space: nowrap; }
.button-add:hover { border-color: rgba(246,200,77,.40); background: rgba(246,200,77,.12); }

.teams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.team-card { padding: 20px; overflow: hidden; position: relative; }
.team-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; }
.team-card-black { background: linear-gradient(155deg, rgba(34,42,55,.98), rgba(12,15,20,.98)); border-color: rgba(130,150,176,.18); }
.team-card-black::before { background: linear-gradient(90deg, #08090c, #35465a, #08090c); }
.team-card-yellow { background: linear-gradient(155deg, rgba(255,218,42,.98), rgba(223,172,0,.98)); border-color: rgba(255,235,130,.55); color: #11141a; }
.team-card-yellow::before { background: linear-gradient(90deg, #ffe854, #fff4a2, #e3ad00); }
.team-identity { display: flex; align-items: center; gap: 17px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.team-card-yellow .team-identity { border-bottom-color: rgba(18,20,26,.14); }
.kit-frame { width: 94px; height: 104px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; }
.kit-frame-black { background: radial-gradient(circle at 50% 35%, #3b4552, #11151b 70%); border: 1px solid rgba(255,255,255,.10); }
.kit-frame-yellow { background: rgba(255,255,255,.72); border: 1px solid rgba(20,20,20,.09); }
.team-kit { display: block; max-width: 84px; max-height: 96px; width: auto; height: auto; object-fit: contain; mix-blend-mode: normal; }
.team-title-wrap { min-width: 0; }
.team-label { display: block; margin-bottom: 7px; font-size: .69rem; letter-spacing: .2em; font-weight: 900; color: #9fb0c5; }
.team-card-yellow .team-label { color: rgba(17,20,26,.60); }
.team-heading { display: flex; gap: 11px; align-items: center; }
.team-heading h2 { font-size: clamp(1.45rem, 5vw, 2rem); }
.team-number { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.07); color: #d5dfeb; font-size: .75rem; font-weight: 900; }
.team-card-yellow .team-number { background: rgba(17,20,26,.12); color: #11141a; }
.team-list { list-style: none; padding: 13px 0 0; margin: 0; display: grid; gap: 7px; counter-reset: teamplayer; }
.team-list li:not(.empty) { counter-increment: teamplayer; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.055); font-weight: 750; }
.team-card-yellow .team-list li:not(.empty) { background: rgba(255,255,255,.42); border: 1px solid rgba(20,20,20,.06); }
.team-list li:not(.empty)::before { content: counter(teamplayer); display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: 10px; border-radius: 50%; background: rgba(255,255,255,.08); color: #b6c1cf; font-size: .72rem; }
.team-card-yellow .team-list li:not(.empty)::before { background: rgba(17,20,26,.11); color: #171a20; }
.empty { color: var(--muted); padding: 14px 2px; }
.team-card-yellow .empty { color: rgba(17,20,26,.58); }

.status-message { min-height: 24px; margin: 15px 3px 0; color: var(--muted); text-align: center; }
.status-message.error { color: #fca5a5; }
footer { display: flex; align-items: center; justify-content: center; gap: 9px; color: #657184; font-size: .8rem; padding-top: 28px; }
.footer-swatch { width: 9px; height: 9px; border-radius: 50%; }
.footer-black { background: #202733; border: 1px solid #455364; }
.footer-yellow { background: var(--yellow); }

@media (max-width: 780px) {
  .shell { width: min(100% - 20px, 650px); padding-top: 26px; }
  .hero { align-items: flex-start; flex-direction: column; }
  .players-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .substitutes-grid { grid-template-columns: 1fr; }
  .teams-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .substitutes-head { align-items: flex-start; flex-direction: column; }
  .button-add { width: 100%; }
  .team-identity { gap: 13px; }
  .kit-frame { width: 82px; height: 92px; }
  .team-kit { max-width: 73px; max-height: 85px; }
}

@media (max-width: 480px) {
  .shell { width: min(100% - 14px, 480px); }
  .attendance-card, .team-card { padding: 16px; border-radius: 18px; }
  .hero-copy { align-items: flex-start; gap: 11px; }
  .club-mark { height: 67px; width: 7px; }
  .players-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .player-toggle { min-height: 50px; padding: 9px 10px; }
  .player-state { font-size: .64rem; }
  .actions { grid-template-columns: 1fr; }
  .button { width: 100%; }
  .section-head { align-items: flex-start; }
  .substitute-row { grid-template-columns: 1fr; }
  .substitute-presence { min-height: 38px; width: 100%; }
}

/* =========================================================
   TEAM CARD POLISH v1.3
   Prominentere ZWART / GEEL identiteit
   ========================================================= */

/* Iets meer ruimte rond de identiteit van het team */
.team-identity {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ZWART / GEEL groter en duidelijker */
.team-label {
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1;
  margin-bottom: 10px;
}

/* Nummer staat nu als echte team-badge */
.team-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 48px;
  height: 38px;
  padding: 0 12px;

  border-radius: 10px;

  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* Zwarte kaart */
.team-card-black .team-label {
  color: #f4f6fa;
}

.team-card-black .team-number {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Gele kaart */
.team-card-yellow .team-label {
  color: #161616;
}

.team-card-yellow .team-number {
  color: #171717;
  background: rgba(0, 0, 0, 0.09);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Shirt iets prominenter */
.team-kit {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
}

/* Frame rond shirt iets groter */
.kit-frame {
  width: 86px;
  height: 86px;
  flex: 0 0 86px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
}

/* De titelzone mooi verticaal centreren */
.team-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Geen overbodige ruimte meer waar vroeger Team 1 / Team 2 stond */
.team-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mobiel: iets compacter */
@media (max-width: 600px) {
  .team-identity {
    gap: 13px;
  }

  .team-label {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .team-number {
    min-width: 43px;
    height: 34px;
    font-size: 0.9rem;
  }

  .kit-frame {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }

  .team-kit {
    width: 68px;
    height: 68px;
  }
}