/* style.css - WestMTA style clone (MSZGAMS) */
:root{
  --bg: #0b0b0d;
  --panel: #141418;
  --muted: #9aa0a6;
  --accent: #8fc3e4;
  --accent-2: rgb(143, 195, 228);
  --glass: rgba(255,255,255,0.02);
  --radius: 12px;
  --container: 1180px;
  --header-h: 60px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Roboto Condensed", Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  background: linear-gradient(280deg, #08090a 0%, #0b0b0d 60%);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* layout container */
.msz-container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px;}

/* header */
.msz-header{ height:var(--header-h); background:#0a0b0d; border-bottom:1px solid rgba(255,255,255,0.02); position:sticky; top:0; z-index:40;}
.msz-header-inner{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.msz-logo{ width:36px; height:36px; object-fit:cover; border-radius:8px; margin-right:12px; }
.msz-left{ display:flex; align-items:center; gap:10px; }
.msz-nav{ flex:1; }
.msz-menu{ display:flex; list-style:none; gap:18px; align-items:center; }
.msz-menu-item a{ color:var(--muted); text-decoration:none; font-weight:600; padding:14px 6px; display:inline-block; }
.msz-menu-item.active a{ color:var(--accent); border-bottom:3px solid var(--accent); padding-bottom:11px; }
.msz-right .msz-login{ color:var(--muted); text-decoration:none; font-weight:600; padding:8px 12px; border-radius:8px;}

/* dropdown */
.dropdown{ position:relative; }
.msz-drop{ display:none; position:absolute; top:45px; left:0; background:#0b0b0d; border:1px solid rgba(255,255,255,0.03); padding:8px; border-radius:8px; min-width:200px; box-shadow:0 6px 20px rgba(0,0,0,0.6); }
.dropdown:hover .msz-drop{ display:block; }
.msz-drop li{ list-style:none; }
.msz-drop li a{ display:block; padding:8px 10px; color:var(--muted); text-decoration:none; font-size:14px; }
.msz-drop li a:hover{ background:rgba(255,255,255,0.02); color:#fff; border-radius:6px; }


/* HERO */
.msz-hero{ position:relative; height:620px; display:flex; align-items:center; justify-content:center; margin-bottom:40px; overflow:hidden; }
.msz-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(0.35) saturate(0.95); transform:scale(1.04); }

.msz-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(220deg, rgba(11, 11, 13, 0.6) 0%, rgba(11, 11, 13, 0.85) 20%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* számok lent */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2); /* neon glow */
    backdrop-filter: blur(4px);
}
.msz-hero-inner{ position:relative; z-index:2; text-align:center; color:#dfe9f8; }
.msz-hero-logo{ width:120px; height:120px; object-fit:contain; margin:0 auto 8px; filter: drop-shadow(0 12px 30px rgba(79,124,255,0.12)); }
.msz-hero-title{ font-size:28px; margin-bottom:8px; color:var(--accent); font-weight:700; text-shadow: 0 6px 30px rgba(79,124,255,0.06); }
.msz-hero-sub{ color:var(--muted); margin-bottom:18px; font-size:15px; }
.msz-hero-ctas{ display:flex; gap:12px; justify-content:center; align-items:center; }
.msz-cta-play{ background:linear-gradient(90deg,var(--accent)); color:#ffffff; padding:10px 18px; border-radius:10px; text-decoration:none; font-weight:700; }
.msz-cta-login{ border:1px solid rgba(255,255,255,0.06); color:var(--muted); padding:10px 14px; border-radius:8px; text-decoration:none; }

.msz-cta-login:hover{ background:rgba(143, 195, 228,0.7); color:#ffffff; }


/* quick cards */
.msz-quick{ margin-bottom:40px; }
.msz-section-title{ font-size:20px; margin-bottom:18px; color:#f1f5f9; display:flex; align-items:center; gap:12px; }
.msz-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.msz-card{ background:var(--panel); padding:20px; border-radius:5px; border:1px solid rgba(255,255,255,0.02); box-shadow: 0 6px 20px rgba(0,0,0,0.6);}
.msz-card h3{ margin-bottom:8px; font-size:16px;padding: 2px }
.msz-card p{ color:var(--muted); margin-bottom:12px; }
.msz-btn{ display:inline-block; padding:7px 12px; background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--muted); text-decoration:none; border-radius:8px; }
.msz-btn-primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#ffffff; border:none; }

.msz-btn:hover{ background:rgba(143, 195, 228,0.7); color:#ffffff; }

/* news */
.msz-news{ margin-bottom:40px; }
.msz-news-list{ display:flex; flex-direction:column; gap:12px; }
.msz-news-item{ display:flex; gap:18px; background:var(--glass); padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,0.02); }
.msz-news-thumb{ width:180px; height:110px; border-radius:10px; background-size:cover; background-position:center; flex-shrink:0; }
.msz-news-body h3{ margin-bottom:6px; }
.msz-meta{ color:var(--muted); font-size:13px; margin-top:8px; }

/* server panel */
.msz-server-status-section{ margin-bottom:60px; }
.msz-panel{ background:var(--panel); padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,0.02); }
.msz-status-grid{ display:flex; gap:18px; color:var(--muted); margin-bottom:12px; }
.msz-player{ background:rgba(255,255,255,0.02); padding:8px 10px; border-radius:8px; display:inline-block; margin:6px; color:var(--muted); }
.msz-no-players{ color:var(--muted); padding:8px 10px; }

/* footer */
.msz-footer{ padding:26px 0; color:var(--muted); background:transparent; border-top:1px solid rgba(255,255,255,0.01); text-align:center; }

/* responsive */
@media (max-width:900px){
  .msz-cards{ grid-template-columns: 1fr; }
  .msz-news-item{ flex-direction:column; }
  .msz-news-thumb{ width:100%; height:160px; }
  .msz-hero{ height:360px; }
  .msz-hero-title{ font-size:28px; }
  .msz-menu{ display:none; }
}


/* Szekció alap */
.msz-spec-section {
    width: 100%;
    margin: 60px 0;
    text-align: center;
    font-family: "Roboto Condensed", Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Cím */
.msz-section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #fff;
    text-shadow: 0 0 14px rgba(255,255,255,0.15);
}

/* Kártyák konténer */
.msz-spec-cards {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Alap kártya */
.msz-spec-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 22px;
    max-width: 560px;
    width: 100%;
    backdrop-filter: blur(6px);
    text-align: left;
    position: relative;
    transition: 0.25s ease;
}


/* Kártya cím */
.msz-spec-card h3 {
    font-size: 19px;
    color: #fff;
    margin-bottom: 14px;
}

.msz-spec-card ul {
    padding: 0;
    list-style: none;
}

.msz-spec-card ul li {
    margin-bottom: 8px;
    font-size: 15px;
    color: #d3d3d3;
}

/* Ajánlott kiemelése */
.msz-spec-recommended {
    border: 1px solid #30ff8a;

}

/* Ajánlott jelölés */
.msz-spec-badge {
    position: absolute;
    top: -12px;
    right: 14px;
    background: #30ff8a;
    color: #0f1712;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;

}


.server-status {
    position: absolute;
    right: -340px;
    bottom: -170px;
    background: rgba(0,0,0,0.2);
    color: white;
    padding: 10px 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    backdrop-filter: blur(5px);
    z-index: 5;
}

/* Mobil nézet (kisebb kijelzők) */
@media (max-width: 600px) {
    .server-status {
        right: 10px;
        bottom: -50px;
        font-size: 12px;
        padding: 8px 12px;
    }
}
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: gray;
}