:root {
  --bg:#0b100e;
  --panel:#151e18;
  --panel2:#1b271f;
  --line:#304034;
  --ink:#f5f7f0;
  --muted:#aab5a8;
  --lime:#b9f75c;
  --gold:#ffc627;
  --red:#ff6565}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  line-height:1.5}
a {
  color:inherit;
  text-decoration:none}
button,input,textarea,select {
  font:inherit}
button {
  cursor:pointer}
h1,h2,h3,p {
  margin-top:0}
.top {
  height:78px;
  position:sticky;
  top:0;
  z-index:10;
  background:#0b100eed;
  backdrop-filter:blur(15px);
  border-bottom:1px solid #2a362b;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(5vw,18px);
  gap:20px}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  font-weight:1000;
  font-size:21px;
  letter-spacing:-1px;
  line-height:1}
.brand .banana {
  font-size:34px}
.brand small {
  display:block;
  font-size:9px;
  letter-spacing:2px;
  color:#a5b59e;
  margin-top:7px}
.gold {
  color:var(--gold)}
.lime {
  color:var(--lime)}
nav {
  display:flex;
  gap:24px;
  align-items:center;
  font-size:14px;
  font-weight:700}
nav a:hover {
  color:var(--gold)}
.staff-link {
  color:var(--lime)}
.hero {
  min-height:580px;
  position:relative;
  background:linear-gradient(90deg,#081009eb 0%,#0a110acb 38%,#0a110a22 100%),url('/hero.png') center 51%/cover no-repeat;
  display:flex;
  align-items:center;
  padding:70px max(5vw,18px);
  overflow:hidden}
.hero-copy {
  position:relative;
  max-width:760px}
.eyebrow,.kicker {
  font-size:12px;
  color:var(--lime);
  font-weight:900;
  letter-spacing:2px}
.hero h1 {
  font-size:clamp(44px,7.1vw,100px);
  line-height:.99;
  font-weight:1000;
  letter-spacing:-4px;
  margin:18px 0 24px;
  text-shadow:0 5px 30px #000b}
.hero h1 em {
  font-style:normal;
  color:var(--gold)}
.hero p {
  color:#f1f0d9;
  font-size:clamp(16px,2vw,21px);
  max-width:560px}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:27px}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:13px 20px;
  border-radius:9px;
  border:1px solid transparent;
  font-weight:900;
  transition:.15s}
.btn:hover {
  transform:translateY(-2px)}
.primary {
  background:var(--gold);
  color:#171b07}
.ghost {
  background:#19231dcc;
  color:var(--ink);
  border-color:#526150}
.container {
  max-width:1200px;
  margin:0 auto;
  padding:100px 24px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:32px}
.section-heading h2,.teams-section h2,.form-intro h2 {
  font-size:clamp(34px,4.5vw,58px);
  line-height:1.04;
  letter-spacing:-2px;
  margin:10px 0 15px}
.section-heading p,.teams-section p,.form-intro p {
  color:var(--muted)}
.stats {
  display:flex;
  gap:10px}
.stats div {
  min-width:100px;
  background:#162019;
  border:1px solid var(--line);
  padding:15px;
  border-radius:12px;
  text-align:center}
.stats strong {
  display:block;
  font-size:30px;
  color:var(--lime)}
.stats div:nth-child(2) strong {
  color:var(--red)}
.stats div:nth-child(3) strong {
  color:var(--gold)}
.stats small {
  font-size:10px;
  color:var(--muted);
  font-weight:900;
  letter-spacing:1px}
.tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 0}
.tabs button {
  border:1px solid var(--line);
  background:#18221a;
  color:var(--muted);
  padding:10px 15px;
  border-radius:8px;
  font-weight:800}
.tabs .active {
  color:#12190d;
  background:var(--lime);
  border-color:var(--lime)}
.players {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px}
.player-card {
  background:var(--panel);
  border:1px solid var(--line);
  padding:19px;
  border-radius:14px}
.player-card .avatar {
  font-size:29px;
  background:#263728;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:12px;
  margin-bottom:12px}
.player-card strong {
  display:block;
  font-size:18px;
  overflow-wrap:anywhere}
.player-card small {
  color:var(--muted)}
.pill {
  display:inline-block;
  margin-top:12px;
  background:#273a22;
  padding:5px 10px;
  border-radius:100px;
  color:var(--lime);
  font-size:12px;
  font-weight:900}
.pill.dead {
  background:#4b2424;
  color:#ff9696}
.teams-section {
  background:linear-gradient(110deg,#172318,#101a13)}
.team-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:28px}
.team-card {
  border:1px solid var(--line);
  border-radius:14px;
  background:#202e22;
  padding:20px}
.team-card h3 {
  color:var(--gold);
  overflow-wrap:anywhere}
.team-card ul {
  padding-left:20px;
  color:var(--muted);
  margin-bottom:0}
.team-card li {
  margin:5px 0}
.apply-section {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px;
  align-items:start}
.form-intro {
  position:sticky;
  top:120px}
.tip {
  padding:20px;
  border-radius:12px;
  border:1px solid #445132;
  background:#242e1d;
  margin-top:35px}
.panel {
  border:1px solid var(--line);
  background:var(--panel);
  padding:29px;
  border-radius:16px;
  box-shadow:0 12px 34px #0002}
.panel h3 {
  font-size:24px}
.panel label {
  display:block;
  margin:16px 0;
  font-size:14px;
  font-weight:800}
input,textarea,select {
  display:block;
  width:100%;
  margin-top:8px;
  border:1px solid #425444;
  background:#0e1710;
  color:var(--ink);
  border-radius:9px;
  padding:13px 14px;
  outline:none}
input:focus,textarea:focus,select:focus {
  border-color:var(--lime)}
textarea {
  resize:vertical}
.privacy {
  font-size:12px;
  color:var(--muted)}
.submit {
  width:100%;
  margin-top:10px}
.message {
  font-size:14px;
  margin-top:12px;
  min-height:10px}
.message.error {
  color:#ff9696}
.message.success {
  color:var(--lime)}
.admin-section {
  border-top:1px solid var(--line)}
.login {
  max-width:450px}
.admin-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:36px}
.admin-section h3 {
  margin:28px 0 12px}
.applications {
  display:grid;
  gap:12px}
.application {
  border:1px solid var(--line);
  background:var(--panel);
  padding:20px;
  border-radius:13px;
  overflow-wrap:anywhere}
.application-top {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px}
.application h4 {
  margin:0;
  font-size:19px}
.application p {
  color:#c4cec1;
  white-space:pre-wrap}
.application small {
  color:var(--muted)}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:14px}
.actions button {
  padding:9px 12px;
  border-radius:8px;
  border:1px solid #516450;
  background:#233225;
  color:white;
  font-weight:800}
.actions .accept {
  background:#2b642e}
.actions .reject {
  background:#7a3030}
.player-form {
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto auto;
  gap:10px;
  align-items:end}
.player-form label {
  margin:0}
.player-form button {
  white-space:nowrap}
.empty {
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:12px;
  padding:30px;
  text-align:center;
  grid-column:1/-1}
.foot {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:32px;
  padding-bottom:32px;
  color:var(--muted);
  font-size:13px}
footer {
  border-top:1px solid var(--line)}
[hidden] {
  display:none!important}
@media(max-width:850px) {
  .apply-section {
  grid-template-columns:1fr;
  gap:25px}
.form-intro {
  position:static}
.player-form {
  grid-template-columns:1fr 1fr}
.section-heading {
  align-items:start;
  flex-direction:column}
.hero {
  min-height:530px}
}
@media(max-width:540px) {
  .top {
  height:auto;
  min-height:82px;
  display:block;
  padding:14px 15px}
.brand {
  font-size:18px}
nav {
  gap:13px;
  margin-top:13px;
  font-size:12px;
  flex-wrap:wrap}
.hero {
  padding:70px 20px;
  min-height:500px;
  background-position:55% center}
.hero h1 {
  letter-spacing:-2px}
.container {
  padding:70px 18px}
.stats {
  width:100%}
.stats div {
  min-width:0;
  flex:1}
.player-form {
  grid-template-columns:1fr}
.foot {
  flex-direction:column}
}


/* ==============================================
   BANAANSMP HARDCORE 2 - OOST ROOD / WEST BLAUW
   Dedicated selectors, no inline styles required.
   ============================================== */
:root {
  --oost-rood: #ff5757;
  --west-blauw: #3b82f6;
}

.teams-section .teams-heading .heading-oost,
.teams-section .teams-heading .heading-oost * {
  color: #ff5757 !important;
  -webkit-text-fill-color: #ff5757 !important;
  text-shadow: none;
}

.teams-section .teams-heading .heading-west,
.teams-section .teams-heading .heading-west * {
  color: #3b82f6 !important;
  -webkit-text-fill-color: #3b82f6 !important;
  text-shadow: none;
}

.teams-section .teams-heading .heading-amp {
  color: #f5f7f0 !important;
  -webkit-text-fill-color: #f5f7f0 !important;
}

.teams-section .team-card-oost {
  border: 2px solid var(--oost-rood) !important;
  background: linear-gradient(135deg, rgba(255, 87, 87, 0.13), #19201a) !important;
}
.teams-section .team-card-oost h3 {
  color: var(--oost-rood) !important;
  -webkit-text-fill-color: var(--oost-rood) !important;
}
.teams-section .team-card-west {
  border: 2px solid var(--west-blauw) !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), #19201a) !important;
}
.teams-section .team-card-west h3 {
  color: var(--west-blauw) !important;
  -webkit-text-fill-color: var(--west-blauw) !important;
}

/* Speler bewerken: apart venster */
.player-edit-modal{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid #35523d;border-radius:18px;background:#151e18;color:#f5f7f0;padding:0;box-shadow:0 24px 90px #000b;}
.player-edit-modal::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}
.player-edit-modal .modal-inner{display:grid;gap:18px;padding:28px}
.player-edit-modal .modal-heading{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.player-edit-modal .modal-heading small{color:#b9f75c;font-size:11px;letter-spacing:1.5px;font-weight:800}
.player-edit-modal .modal-heading h2{font-size:26px;line-height:1.2;margin:6px 0 0;color:#fff;-webkit-text-fill-color:#fff}
.player-edit-modal .modal-x{border:1px solid #506356;background:#202f26;color:#fff;border-radius:10px;cursor:pointer;font-size:24px;min-width:40px;min-height:40px}
.player-edit-modal label{display:grid;gap:8px;font-weight:700;font-size:14px}
.player-edit-modal input,.player-edit-modal select{width:100%;min-height:46px;padding:10px 12px;background:#0e1711;color:#fff;border:1px solid #47604e;border-radius:9px;font:inherit}
.player-edit-modal input:focus,.player-edit-modal select:focus{outline:2px solid #b9f75c;outline-offset:1px}
.player-edit-modal .modal-buttons{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.player-edit-modal .modal-buttons button{min-height:44px}
#teams h2 span:first-child{color:#ff5757!important;-webkit-text-fill-color:#ff5757!important;background:none!important}
#teams h2 span:last-child{color:#3b82f6!important;-webkit-text-fill-color:#3b82f6!important;background:none!important}

/* Discord-knop op de voorpagina */
.hero-actions .discord-btn{background:#5865f2;color:#fff;-webkit-text-fill-color:#fff;border:1px solid #7983f7;box-shadow:0 8px 24px rgba(88,101,242,.28);text-decoration:none}
.hero-actions .discord-btn:hover{background:#4752c4;border-color:#abb1fc;transform:translateY(-2px)}
.hero-actions .discord-btn:focus-visible{outline:3px solid #c9ceff;outline-offset:3px}

/* Custom BanaanSMP team badges & leaders */
.avatar-logo {width:44px;height:44px;object-fit:contain;}
.team-title-icon {width:29px;height:29px;object-fit:contain;vertical-align:middle;margin-right:5px;}
.member-logo {width:24px;height:24px;object-fit:contain;flex-shrink:0;}
.team-members {padding-left:0;list-style:none;}
.team-members li {display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:8px 0;padding:8px;border-radius:10px;background:#0002;}
.team-members li small {margin-left:auto;}
.leader-member {border:1px solid #d9ba5480;background:#dfb95012 !important;}
.leader-label {display:inline-flex;padding:3px 7px;margin-left:5px;border-radius:999px;background:#e7bb451a;border:1px solid #bda64c;color:#ffdb74;font-size:11px;font-weight:800;white-space:nowrap;vertical-align:middle;}
.player-leader {border-color:#bda64c;box-shadow:0 0 0 1px #bda64c22;}
#teams .heading-oost{color:#ff5757!important;-webkit-text-fill-color:#ff5757!important;background:none!important;}
#teams .heading-west{color:#3b82f6!important;-webkit-text-fill-color:#3b82f6!important;background:none!important;}

/* V2: Mobiele homepage, aanmeldmelding en uitgeschakelde spelers */
.signup-callout{background:linear-gradient(125deg,#1b281f,#121b18 55%,#202111);border-top:1px solid #344338;border-bottom:1px solid #344338}
.signup-callout .container{padding-top:36px;padding-bottom:36px}
.signup-callout-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.signup-callout h2{color:#ffc627;font-size:clamp(25px,3vw,36px);margin:5px 0 10px}
.signup-callout p{margin:0;color:#ced7cc;max-width:680px}
.streamer-field{border:1px solid #405345;border-radius:12px;padding:16px;margin:18px 0;min-width:0}
.streamer-field legend{font-weight:900;padding:0 8px}
.streamer-field .streamer-option{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.streamer-field .streamer-option input{width:18px;height:18px;accent-color:#b9f75c}
.streamer-field #streamUrlWrap{margin-top:12px}
.death-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
.death-details{border-top:1px solid #573332;margin-top:12px;padding-top:10px;color:#e3cccc;font-size:12px;overflow-wrap:anywhere}
.death-details b{color:#ff9995}
.team-members li .death-details{width:100%;flex-basis:100%}
/* Preserve forced title colors against inherited fill styles */
#teams .heading-oost{color:#ff5757!important;-webkit-text-fill-color:#ff5757!important}
#teams .heading-west{color:#3b82f6!important;-webkit-text-fill-color:#3b82f6!important}
@media(max-width:700px){
 .hero{min-height:auto!important;padding:82px 20px 74px!important;background:linear-gradient(180deg,rgba(8,15,11,.68) 0%,rgba(8,14,11,.92) 78%),url('/hero.png') center 33%/cover no-repeat!important}
 .hero h1{font-size:clamp(39px,11vw,66px)!important;letter-spacing:-1.8px!important;line-height:1.03!important}
 .hero-copy{max-width:100%}
 .hero p{font-size:16px}
 .hero-actions{flex-direction:column;align-items:stretch}
 .hero-actions .btn{width:100%;justify-content:center}
 .container{padding-left:18px!important;padding-right:18px!important}
 .signup-callout-inner{flex-direction:column;align-items:stretch}
 .signup-callout .btn{align-self:stretch}
 .death-fields{grid-template-columns:1fr}
 .player-card{min-width:0}
}
[data-death-fields][hidden], #streamUrlWrap[hidden] {display:none!important}

/* Streamer popup + compacte mobiele keuzeknoppen */
.streamer-choices{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0;}
.streamer-field{border:1px solid var(--line);border-radius:12px;padding:15px;margin:14px 0;min-width:0;}
.streamer-field legend{font-weight:850;padding:0 6px;}
.streamer-option{display:flex!important;align-items:center;gap:9px;background:#16241c;border:1px solid #405348;border-radius:10px;padding:12px!important;margin:0!important;cursor:pointer;flex:1;min-width:175px;}
.streamer-option input{width:18px!important;height:18px!important;min-height:0!important;flex:none;accent-color:#b9f75c;}
.streamer-summary{color:#b9f75c;font-size:13px;margin:5px 0;}
.streamer-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(5px)}
.streamer-modal .modal-inner{max-width:530px}
@media(max-width:600px){.streamer-choices{flex-direction:column;align-items:stretch}.streamer-option{min-width:0;width:100%}}