:root{
  /* jouw palette */
  --c1:#fff23b;
  --c2:#f6ba65;
  --c3:#f09582;
  --c4:#ee878d;

  /* neutrals */
  --black:#0b0b0b;
  --white:#ffffff;

  --text: var(--black);
  --muted: rgba(11,11,11,.62);

  --line: rgba(11,11,11,.12);
  --line2: rgba(11,11,11,.18);

  --card: rgba(255,255,255,.86);
  --cardSolid: #fff;
  
  --shadow: 0 22px 70px rgba(0,0,0,.22);
  --radius: 18px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  min-height:100vh;
  padding:24px;
}

body {
	background: linear-gradient(90deg, #FFF043, #0096C6);
	height: 100vh;
	font-family: 'Roboto';
	}



.logo {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
    width: 400px;
    margin: 40px 0px 40px 0px;
}


.logoklein {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
    width: 200px;
    margin: 20px 0px 20px 0px;
}



.wrap{max-width:1040px;margin:0 auto}

.header{
  display:flex;
  gap:16px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:18px;
}

.title{display:flex;flex-direction:column;gap:6px}
.title h1{
  margin:0;
  font-size:34px;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.title .sub{
  color:var(--muted);
  font-size:13px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.60);
  border-radius:999px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
  color:var(--muted);
  font-size:13px;
  backdrop-filter: blur(10px);
}
.pill strong{color:var(--black);font-weight:900}

.pill strong.open{
  /* open = “bright” */
  background: linear-gradient(90deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pill strong.closed{
  background: linear-gradient(90deg, var(--c3), var(--c4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card{
  background: var(--card);
  border:1px solid rgba(255,255,255,.65);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

/* subtiele “aura” rondom de card */
.card:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(255,242,59,.55),
    rgba(246,186,101,.50),
    rgba(240,149,130,.45),
    rgba(238,135,141,.45)
  );
  filter: blur(18px);
  opacity:.22;
}

.cardTop{
  padding:18px 18px 14px 18px;
  border-bottom:1px solid rgba(11,11,11,.08);
  background:
    linear-gradient(90deg,
      rgba(255,242,59,.55),
      rgba(246,186,101,.42),
      rgba(240,149,130,.36),
      rgba(238,135,141,.36)
    );
  position:relative;
  z-index:1;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(11,11,11,.16);
  background: rgba(255,255,255,.76);
  color: rgba(11,11,11,.72);
}

.qtext{
  font-size:14px;
  color: rgba(11,11,11,.70);
  margin-top:10px;
  line-height:1.45;
  max-width:900px;
}

.statusRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}

.tableWrap{
  overflow:auto;
  background: var(--cardSolid);
  position:relative;
  z-index:1;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
  background: var(--cardSolid);
}

thead th{
  position:sticky;
  top:0;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px);
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--line2);
  color: rgba(11,11,11,.70);
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
}

tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  white-space:nowrap;
}

tbody tr:nth-child(2n){
  background: rgba(11,11,11,.02);
}

tbody tr:hover{
  background: linear-gradient(90deg,
    rgba(255,242,59,.25),
    rgba(246,186,101,.18),
    rgba(240,149,130,.14),
    rgba(238,135,141,.12)
  );
}

.nr{
  font-family:var(--mono);
  width:90px;
  color: rgba(11,11,11,.65);
}

.nick{
  font-weight:900;
  letter-spacing:.2px;
  max-width:460px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pts{
  font-family:var(--mono);
  font-weight:900;
  text-align:right;
  width:160px;
  color: rgba(11,11,11,.92);
}

.delta{
  width:140px;
  font-family:var(--mono);
  font-weight:900;
}

.deltaBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(11,11,11,.16);
  background: rgba(255,255,255,.85);
}

/* Δ kleurmapping: omhoog = warm geel, omlaag = roze, new = oranje */
.delta-up{
  border-color: rgba(255,242,59,.55);
  box-shadow: 0 0 0 3px rgba(255,242,59,.22) inset;
}
.delta-down{
  border-color: rgba(238,135,141,.55);
  box-shadow: 0 0 0 3px rgba(238,135,141,.18) inset;
}
.delta-same{
  border-color: rgba(11,11,11,.18);
  color: rgba(11,11,11,.60);
}
.delta-new{
  border-color: rgba(246,186,101,.60);
  box-shadow: 0 0 0 3px rgba(246,186,101,.22) inset;
}

/* podium rijen: subtiel en helder */
tbody tr.podium-1{
  background: linear-gradient(90deg, rgba(255,242,59,.40), rgba(255,255,255,1));
}
tbody tr.podium-2{
  background: linear-gradient(90deg, rgba(246,186,101,.30), rgba(255,255,255,1));
}
tbody tr.podium-3{
  background: linear-gradient(90deg, rgba(240,149,130,.26), rgba(255,255,255,1));
}

/* badge kolom (als je die toegevoegd hebt) */
.badgeCell{width:54px}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(11,11,11,.14);
  background: rgba(255,255,255,.88);
  font-size:16px;
  line-height:1;
}
.badge.hot{
  border-color: rgba(255,242,59,.55);
  box-shadow: 0 0 0 3px rgba(255,242,59,.22) inset;
}
.badge.crown{
  border-color: rgba(255,242,59,.65);
  box-shadow: 0 0 0 3px rgba(255,242,59,.26) inset;
}
.badge.new{
  border-color: rgba(246,186,101,.65);
  box-shadow: 0 0 0 3px rgba(246,186,101,.22) inset;
}

.footer{
  margin-top:14px;
  color: rgba(11,11,11,.55);
  font-size:12px;
  text-align:center;
}
.footer code{
  font-family:var(--mono);
  background: rgba(255,255,255,.76);
  border:1px solid rgba(11,11,11,.14);
  padding:2px 6px;
  border-radius:8px;
  color: var(--black);
}

tbody tr:hover{
  background: linear-gradient(90deg,
    rgba(255,242,59,.42),
    rgba(246,186,101,.30),
    rgba(240,149,130,.22),
    rgba(238,135,141,.20)
  );
}

/* LOGO / HEADER */
.site-header {
  text-align: center;
  padding: 20px 0;
}

.logo {
  width: 180px;
  margin: 0 auto;
}

@media (min-width: 600px) { .logo { width: 260px; } }
@media (min-width: 900px) { .logo { width: 320px; } }