/* ── Reset & base ── */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:linear-gradient(135deg,#e8e0d5 0%,#f5f0e8 100%);
  font:13px "Segoe UI",Tahoma,Arial,sans-serif;
  color:#2a2520;
  min-height:100vh;
}
a{text-decoration:none;color:inherit;}

/* ════════════════════════════════
   TOPBAR
════════════════════════════════ */
#mc-nav{position:sticky;top:0;z-index:1000;}

.mc-top{
  background:linear-gradient(180deg,#2b2620 0%,#1e1a16 100%);
  border-bottom:2px solid #3a3028;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;gap:12px;
}
.mc-logo-block{display:flex;align-items:center;gap:0;flex-shrink:0;}
.mc-logo-text{font-size:26px;font-weight:900;letter-spacing:2px;color:#c8a830;text-shadow:0 1px 4px rgba(0,0,0,.6);line-height:1;transition:.12s;}
.mc-logo-text:hover{color:#e0c050;}
.mc-logo-text em{color:#d94040;font-style:normal;}
.mc-logo-sub{font-size:10px;color:#7a7068;margin-top:2px;letter-spacing:.5px;}
.mc-beta-badge{display:inline-block;background:linear-gradient(135deg,#d94040,#b02020);color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:20px;text-transform:uppercase;vertical-align:middle;margin-left:8px;box-shadow:0 1px 4px rgba(217,64,64,.5);}

/* desktop badges */
.mc-player-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.mc-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:6px;padding:5px 10px;font-size:12px;color:#c8c0b4;white-space:nowrap;
}
.mc-badge strong{color:#fff;font-weight:700;}
.mc-badge.gold{background:rgba(200,168,48,.15);border-color:rgba(200,168,48,.35);color:#c8a830;}
.mc-badge.gold strong{color:#e0c050;}
.mc-badge.clock{font-family:'Courier New',monospace;font-weight:700;font-size:13px;background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.08);letter-spacing:1px;min-width:82px;justify-content:center;}
.mc-badge.online{background:rgba(80,140,60,.2);border-color:rgba(80,140,60,.4);color:#90cc78;}

/* hamburger — mobiel only */
.mc-hamburger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:40px;height:40px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;cursor:pointer;flex-shrink:0;
}
.mc-hamburger span{display:block;width:22px;height:2px;background:#c8a830;border-radius:2px;transition:.25s;}
.mc-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mc-hamburger.open span:nth-child(2){opacity:0;}
.mc-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile responsive */
@media (max-width: 768px){
  .mc-hamburger{ display:flex; }
  .mc-logo-text{ font-size: 20px !important; }
  .mc-player-badges{ display: none !important; }
  .mc-infobar{ overflow-x: auto; }
  .mc-infobar-right{ display: none !important; }
  
  /* Hide desktop columns on mobile */
  .mc-nav5{ display: none !important; }
  
  /* Show drawer on mobile */
  .mc-drawer{ display: block !important; }
}

/* ════════════════════════════════
   INFOBAR
════════════════════════════════ */
.mc-infobar{
  background:#161410;border-bottom:1px solid #2a2520;
  padding:7px 18px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.mc-infobar-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mc-page-label{
  background:#2a2218;border:1px solid #3a3028;border-radius:5px;
  padding:4px 12px;font-size:12px;font-weight:700;color:#c8a830;
  text-transform:uppercase;letter-spacing:.5px;
}
.mc-misdaden-btn{
  background:#8a1c1c;border:1px solid #a02424;
  color:#fff;padding:4px 12px;border-radius:5px;font-size:12px;font-weight:700;transition:.15s;
}
.mc-misdaden-btn:hover,.mc-misdaden-btn.mc-active{background:#c02828;border-color:#e03030;}

.mc-infobar-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mc-money{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#b0a898;
  background:#1e1c18;border:1px solid #2a2520;border-radius:5px;padding:4px 10px;white-space:nowrap;
}
.mc-money strong{color:#e0d8cc;}
.mc-money.cash strong{color:#d4b84a;}
.mc-money.bank strong{color:#7ab870;}
.mc-money.cred strong{color:#6090d0;}
.mc-msg{
  display:inline-flex;align-items:center;gap:5px;
  background:#1e1c18;border:1px solid #2a2520;border-radius:5px;padding:4px 10px;font-size:12px;color:#b0a898;transition:.15s;
}
.mc-msg:hover{border-color:#5a8a4a;color:#fff;}
.mc-msg.new-msg{background:#5a1010;border-color:#8a1c1c;color:#ffaaaa;animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.6;}}
.mc-msg .mc-badge-cnt{background:#c02828;color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px;}
.mc-loc{display:inline-flex;align-items:center;gap:4px;background:#1e1c18;border:1px solid #2a2520;border-radius:5px;padding:4px 10px;font-size:12px;color:#b0a898;transition:.15s;}
.mc-loc:hover{border-color:#c8a830;color:#e0d8cc;cursor:pointer;}
.mc-money[href]:hover{border-color:#c8a830;color:#fff;filter:brightness(1.15);cursor:pointer;}
.mc-xp-mini{display:inline-flex;align-items:center;gap:5px;background:#1e1c18;border:1px solid #2a2520;border-radius:5px;padding:4px 10px;font-size:11px;color:#7a7068;}
.mc-xp-mini .xp-tr{width:60px;height:6px;background:#2a2520;border-radius:3px;overflow:hidden;}
.mc-xp-mini .xp-fl{height:100%;border-radius:3px;background:linear-gradient(90deg,#6a9a3a,#a0cc58);}

/* ════════════════════════════════
   5-KOLOM NAVIGATIE (desktop)
════════════════════════════════ */
.mc-nav5{background:linear-gradient(180deg,#252018 0%,#1c1810 100%);border-bottom:3px solid #8a1c1c;}
.mc-nav5-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);}
.mc-col{border-right:1px solid #2e2820;position:relative;}
.mc-col:last-child{border-right:none;}
.mc-col-title{
  background:linear-gradient(180deg,#2e2218 0%,#221a12 100%);border-bottom:1px solid #3a2e20;
  padding:9px 14px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;
  color:#c8a830;cursor:default;user-select:none;
}
.mc-col ul{
  list-style:none;padding:6px 0;
  position:absolute;top:100%;left:0;right:0;
  background:linear-gradient(180deg,#252018 0%,#1c1810 100%);
  border:1px solid #3a2e20;border-top:none;box-shadow:0 6px 18px rgba(0,0,0,.5);
  display:none;z-index:500;min-width:160px;
}
.mc-col:hover ul{display:block;}

/* Altijd-open modus — heel menu tegelijk naar beneden bij hover op de balk */
.mc-nav5.menu-open:hover .mc-col ul{display:block;}
.mc-col li{padding:0;}
.mc-col a{
  display:flex;align-items:center;gap:6px;padding:6px 14px;
  font-size:12px;color:#b8b0a4;transition:.12s;white-space:nowrap;
}
.mc-col a::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:#3a3028;flex-shrink:0;transition:.12s;}
.mc-col a:hover{background:rgba(255,255,255,.05);color:#fff;}
.mc-col a:hover::before{background:#c8a830;}
.mc-col a.mc-active{color:#fff;background:rgba(138,28,28,.25);}
.mc-col a.mc-active::before{background:#e03030;}
.mc-col a.mc-admin{color:#c8a830;}
.mc-col a.mc-admin::before{background:#c8a830;}

/* ════════════════════════════════
   MOBIEL DRAWER
════════════════════════════════ */
.mc-drawer{
  display:none; /* alleen mobiel */
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;
  background:#1a1612;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.mc-drawer.open{transform:translateX(0);}

.mc-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(180deg,#2b2620 0%,#1e1a16 100%);
  border-bottom:2px solid #3a3028;
  position:sticky;top:0;z-index:2;
}
.mc-drawer-logo{font-size:20px;font-weight:900;color:#c8a830;letter-spacing:2px;transition:.12s;}
.mc-drawer-logo:hover{color:#e0c050;}
.mc-drawer-logo em{color:#d94040;font-style:normal;}
.mc-drawer-close{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;cursor:pointer;font-size:18px;color:#c8c0b4;
  padding:0;outline:none;-webkit-appearance:none;touch-action:manipulation;
}

/* player strip inside drawer */
.mc-drawer-player{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:12px 16px;background:#161210;border-bottom:1px solid #2a2218;
}
.mc-dp-item{background:#1e1c18;border:1px solid #2a2520;border-radius:7px;padding:8px 10px;}
.mc-dp-link{display:block;text-decoration:none;transition:background .15s,border-color .15s;}
.mc-dp-link:hover,.mc-dp-link:active{background:#2a2620;border-color:#4a3e30;}
.mc-dp-label{font-size:10px;color:#6a6058;margin-bottom:2px;}
.mc-dp-value{font-size:14px;font-weight:700;color:#e0d8cc;}
.mc-dp-value.gold{color:#d4b84a;}
.mc-dp-value.green{color:#7ab870;}
.mc-dp-value.blue{color:#6090d0;}
.mc-drawer-close:hover,.mc-drawer-close:active{background:rgba(255,255,255,.18);}

/* XP bar in drawer */
.mc-drawer-xp{padding:10px 16px;background:#161210;border-bottom:1px solid #2a2218;}
.mc-drawer-xp-label{display:flex;justify-content:space-between;font-size:11px;color:#6a6058;margin-bottom:5px;}
.mc-drawer-xp-bar{height:8px;border-radius:999px;background:#2a2520;overflow:hidden;}
.mc-drawer-xp-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#6a9a3a,#a0cc58);}

/* nav sections */
.mc-drawer-section{}
.mc-drawer-section-title{
  padding:10px 16px 8px;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  color:#c8a830;background:#1a1612;
  border-bottom:1px solid #2a2218;
  position:sticky;top:67px; /* height of drawer-head */
  z-index:1;
}
.mc-drawer-links{list-style:none;border-bottom:1px solid #222018;}
.mc-drawer-links li{}
.mc-drawer-links a{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;font-size:14px;color:#b8b0a4;
  border-bottom:1px solid #1e1c18;transition:.12s;
}
.mc-drawer-links a:last-child{border-bottom:none;}
.mc-drawer-links a::before{
  content:'';display:block;width:6px;height:6px;border-radius:50%;
  background:#3a3028;flex-shrink:0;
}
.mc-drawer-links a:active,.mc-drawer-links a:focus{background:rgba(255,255,255,.04);}
.mc-drawer-links a.mc-active{color:#fff;background:rgba(138,28,28,.2);}
.mc-drawer-links a.mc-active::before{background:#e03030;}
.mc-drawer-links a.mc-admin{color:#c8a830;}

/* overlay achtergrond */
.mc-overlay{
  display:none;
  position:fixed;inset:0;z-index:998;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
}
.mc-overlay.open{display:block;}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media(max-width:768px){
  /* desktop nav verbergen */
  .mc-nav5{display:none;}
  .mc-infobar{display:none;}
  .mc-player-badges{display:none;}

  /* hamburger tonen */
  .mc-hamburger{display:flex;}

  /* drawer aanzetten */
  .mc-drawer{display:block;}

  /* topbar compact */
  .mc-top{padding:10px 14px;}
  .mc-logo-text{font-size:22px;}
}