/* MysticValley – FINAL (háttérkép + logó + ikonok) */
:root{
  --panel: rgba(14, 18, 30, .72);
  --panel2: rgba(10, 14, 24, .58);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.16);

  --text:#EAF2FF;
  --muted: rgba(234,242,255,.72);

  --g:#3DFF7B;
  --b:#61C7FF;
  --y:#FFD45E;

  --radius:18px;
  --shadow: 0 14px 50px rgba(0,0,0,.55);

  --pixel: "Press Start 2P", system-ui;
  --ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--ui);
  color: var(--text);
  overflow-x:hidden;

  /* A KÜLDÖTT HÁTTÉR */
  background-image: url("img/background.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* sötét overlay a jobb olvashatóságért */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 900px at 70% 0%, rgba(97,199,255,.14), transparent 55%),
    radial-gradient(900px 700px at 15% 30%, rgba(61,255,123,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72));
}

/* Pixel canvas overlay */
#pixelCanvas{
  position:fixed;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  opacity:.35;
  pointer-events:none;
}

.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 18px 80px;
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 18px;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}

.brand{
  display:flex; align-items:center; gap:12px;
  color: var(--text);
  text-decoration:none;
}
.brand__logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.35));
}
.brand__text{
  font-family: var(--pixel);
  font-size: 13px;
  letter-spacing:.6px;
  display:none; /* letisztult: csak logó mobilon is */
}
@media (min-width: 860px){
  .brand__text{ display:inline; }
}

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
}
.nav a{
  color: var(--muted);
  text-decoration:none;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.nav a:hover{
  color: var(--text);
  background: rgba(255,255,255,.05);
  border-color: var(--stroke);
  transform: translateY(-1px);
}
.nav__cta{
  color:#071015 !important;
  background: linear-gradient(135deg, var(--y), #fff0b7);
  border-color: rgba(0,0,0,.12) !important;
}

.burger{
  display:none;
  background: transparent;
  border: 0;
  padding: 10px;
  border-radius: 14px;
  cursor:pointer;
}
.burger span{
  display:block;
  width:26px;
  height:2px;
  background: rgba(234,242,255,.88);
  margin: 6px 0;
  border-radius: 2px;
}

/* HERO */
.hero{
  min-height: calc(100vh - 70px);
  display:grid;
  grid-template-columns: 1.15fr .9fr;
  gap: 16px;
  padding: 14px 0 6px;
  align-items: start;
}

.pill{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke);
  color: var(--muted);
  font-weight: 700;
  width: fit-content;
}

.title{
  margin: 12px 0 8px;
  font-family: var(--pixel);
  font-size: 26px;
  line-height: 1.35;
}
.glow{ text-shadow: 0 0 26px rgba(97,199,255,.22); }

.lead{
  margin:0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 62ch;
}

.ipbox{
  margin: 14px 0 10px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.small{ color: var(--muted); font-size: 12px; font-weight: 700; }
.ip{
  font-family: var(--pixel);
  font-size: 13px;
  letter-spacing: .6px;
  margin-top: 6px;
}

.cta{ display:flex; gap:10px; flex-wrap:wrap; }

.micro{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.dot{
  width:10px; height:10px; border-radius: 999px;
  background: rgba(61,255,123,.95);
  box-shadow: 0 0 22px rgba(61,255,123,.20);
}

.panel{
  background: var(--panel2);
  border: 1px solid var(--stroke);
  border-radius: calc(var(--radius) + 2px);
  padding: 16px;
  box-shadow: var(--shadow);
}
.panel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.panel__title{ font-family: var(--pixel); font-size: 12px; }
.chip{
  font-family: var(--pixel);
  font-size: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  color:#071015;
  background: linear-gradient(135deg, rgba(61,255,123,.92), rgba(97,199,255,.8));
  border: 1px solid rgba(0,0,0,.14);
}
.rows{ margin-top: 10px; }
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--muted);
}
.row b{ color: var(--text); }

.note{
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.mini{
  margin-top: 12px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(97,199,255,.22);
  background: rgba(97,199,255,.06);
}
.mini__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  background: rgba(97,199,255,.95);
  box-shadow: 0 0 22px rgba(97,199,255,.30);
}

/* Sections */
.section{ margin-top: 34px; }
.section--alt{
  border-radius: calc(var(--radius) + 6px);
  padding: 22px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}
.h2{
  font-family: var(--pixel);
  font-size: 16px;
  margin: 0 0 14px;
}
.muted{ color: var(--muted); }
.hint{ color: var(--muted); margin-top: 12px; }

/* Cards grid */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.card{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  padding: 14px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.18);
}
.card h3{ margin:0 0 8px; font-size: 16px; }
.card p{ margin:0; color: var(--muted); line-height: 1.55; }

/* Modes with images */
.modes{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mode{
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mode:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.18);
}
.mode__img{
  height: 140px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background-size: cover;
  background-position: center;
  position: relative;
}
.mode__img::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.62));
}
.mode__body{ padding: 14px; }
.mode__body h3{ margin:0 0 6px; }
.mode__body p{ margin:0; color: var(--muted); line-height: 1.55; }

/* Rules */
.rules{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.rule{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}
.rule__num{
  font-family: var(--pixel);
  font-size: 11px;
  color:#071015;
  background: linear-gradient(135deg, rgba(255,212,94,.95), rgba(97,199,255,.78));
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 10px;
  height: fit-content;
}

/* Team */
.team{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.member{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  padding: 14px;
}
.member__top{
  display:flex;
  align-items:center;
  gap: 12px;
}
.avatar{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,212,94,.92), rgba(97,199,255,.78));
  border: 1px solid rgba(0,0,0,.14);
}
.avatar--g{ background: linear-gradient(135deg, rgba(61,255,123,.95), rgba(255,212,94,.72)); }
.avatar--b{ background: linear-gradient(135deg, rgba(97,199,255,.95), rgba(61,255,123,.72)); }
.member__name{ font-weight: 800; font-size: 16px; }
.member__rank{ margin-top: 4px; color: var(--muted); font-weight: 700; }
.member__desc{ margin: 12px 0 0; color: var(--muted); line-height: 1.6; }

/* Social buttons with icons */
.social{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}
.sbtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .2px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.sbtn img{
  width: 18px;
  height: 18px;
  display:block;
}
.sbtn span{ font-weight: 800; }
.sbtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
}

/* Contact */
.contact{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.contact__card{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  color: var(--text);
  text-decoration:none;
  transition: transform .18s ease, background .18s ease;
}
.contact__card:hover{ transform: translateY(-2px); background: rgba(0,0,0,.34); }
.contact__icon{ font-size: 22px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  text-decoration:none;
  color: var(--text);
  font-weight: 800;
  letter-spacing:.2px;
  background: rgba(255,255,255,.04);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }
.btn--primary{
  background: linear-gradient(135deg, rgba(61,255,123,.95), rgba(97,199,255,.82));
  color:#071015;
  border-color: rgba(0,0,0,.12);
}
.btn--secondary{
  background: linear-gradient(135deg, rgba(255,212,94,.95), rgba(97,199,255,.82));
  color:#071015;
  border-color: rgba(0,0,0,.12);
}
.btn--ghost{ background: rgba(255,255,255,.03); }

/* Footer */
.footer{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  padding: 18px;
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.70);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  color: var(--text);
  pointer-events:none;
  transition: .22s ease;
  z-index: 70;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Reveal animáció */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.show{
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .hero{ min-height: auto; grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .modes{ grid-template-columns: 1fr; }
  .rules{ grid-template-columns: 1fr; }
  .team{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
}
@media (max-width: 780px){
  .burger{ display:inline-block; }
  .nav{
    position:absolute;
    top: 66px;
    left: 12px;
    right: 12px;
    display:none;
    flex-direction: column;
    background: rgba(0,0,0,.62);
    border: 1px solid var(--stroke);
    border-radius: 18px;
    padding: 10px;
    backdrop-filter: blur(16px);
  }
  .nav.open{ display:flex; }
  .nav a{ width: 100%; }
}


/* Big hero logo under navbar */
.hero-logo{
  display:flex;
  justify-content:center;
  margin: 10px 0 20px;
}
.hero-logo img{
  max-width: 220px;
  width: 100%;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
}

/* Always show navbar text */
.brand__text--show{ display:inline !important; }


.subtitle{
  margin: 4px 0 14px;
  font-family: var(--pixel);
  font-size: 14px;
  opacity: .9;
}


/* News carousel under IP */
.news{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.news__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.news__title{
  margin:0;
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: .4px;
}
.news__controls{
  display:flex;
  gap: 8px;
}
.nbtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.nbtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
}

.news__viewport{
  overflow:hidden;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.news__track{
  display:flex;
  transition: transform .35s ease;
  will-change: transform;
}
.news__slide{
  min-width: 100%;
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 12px;
}
.news__img{
  height: 110px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow:hidden;
}
.news__img::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
}
.news__body{ padding-top: 2px; }
.news__headline{
  font-weight: 900;
  font-size: 16px;
}
.news__text{
  margin-top: 8px;
  line-height: 1.6;
}

.news__dots{
  display:flex;
  justify-content:center;
  gap: 8px;
  padding: 10px 0 12px;
}
.dotbtn{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease;
}
.dotbtn[aria-selected="true"]{
  background: rgba(97,199,255,.85);
  transform: scale(1.1);
}

/* News responsive */
@media (max-width: 520px){
  .news__slide{
    grid-template-columns: 1fr;
  }
  .news__img{ height: 140px; }
}


/* IP tip above news */
.ip-tip{
  margin: 8px 0 10px;
  font-weight: 700;
  opacity: .9;
}
.ip-tip b{ color: var(--text); }


/* Staff profile images */
.avatar-img{
  width:46px;
  height:46px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}


/* Rank glow (Owner/Admin/Mod) */
.member--owner .member__rank{
  color: rgba(255,90,90,.95);
  text-shadow: 0 0 18px rgba(255,90,90,.45), 0 0 32px rgba(255,90,90,.25);
}
.member--admin .member__rank{
  color: rgba(255,90,90,.95);
  text-shadow: 0 0 18px rgba(255,90,90,.45), 0 0 32px rgba(255,90,90,.25);
}
.member--mod .member__rank{
  color: rgba(97,199,255,.95);
  text-shadow: 0 0 18px rgba(97,199,255,.35), 0 0 32px rgba(97,199,255,.18);
}


/* Mode "ÚJ" badge (toggle: add/remove .is-new on the <article class="mode">) */
.mode__badge{
  position:absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .6px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #071015;
  background: linear-gradient(135deg, rgba(97,199,255,.95), rgba(61,255,123,.85));
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.mode:not(.is-new) .mode__badge{
  display:none;
}


/* ================= ANNOUNCEMENT BAR ================= */
.announce-bar{
  position:sticky;
  top:0;
  z-index:99;
  background: linear-gradient(90deg, rgba(97,199,255,.95), rgba(61,255,123,.9));
  color:#071015;
  font-weight:900;
  text-align:center;
  padding:8px 14px;
  font-size:13px;
}
/* ================================================ */

/* ================= STAFF POPUP ================= */
.staff-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:120;
}
.staff-modal.open{ display:block; }

.staff-modal__bg{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}

.staff-modal__card{
  position:relative;
  max-width:420px;
  margin: 10vh auto;
  background: rgba(10,14,24,.95);
  border-radius:20px;
  padding:22px;
  border:1px solid rgba(255,255,255,.15);
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.staff-modal__card img{
  width:120px;
  height:120px;
  border-radius:20px;
  object-fit:cover;
  margin-bottom:12px;
}

.staff-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  border:0;
  background:none;
  font-size:20px;
  color:white;
  cursor:pointer;
}

.modal-rank{
  font-weight:900;
  margin:6px 0;
}

.staff-clickable{
  cursor:pointer;
}
/* ============================================== */


/* ================= KÖZÉPRE IGAZÍTÁS (KÖNNYŰ KIKAPCSOLNI) =================
   Ha mégis vissza akarod: töröld ezt a blokkot, vagy kommenteld ki.
======================================================================= */

/* Hero bal oldal (cím, leírás, IP, hírek) középre */
.hero__left{
  text-align: center;
  display:flex;
  flex-direction: column;
  align-items: center;
}

/* A kis pill és micro is középre */
.pill{ margin-left:auto; margin-right:auto; }
.micro{ justify-content:center; }

/* Szövegek ne nyúljanak túl szélesre */
.lead{
  margin-left:auto;
  margin-right:auto;
}

/* IP doboz és Hírek legyen szépen középen, fix max szélességgel */
.ipbox, .news{
  width: 100%;
  max-width: 720px;
  margin-left:auto;
  margin-right:auto;
}

/* IP doboz legyen középen és szépen törjön mobilon */
.ipbox{
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.ipbox__meta{
  text-align:center;
}

/* Szekció címek középre */
.h2{
  text-align:center;
}

/* A szekciók alatti leíró sorok is középre, ha van */
.section > .muted{
  text-align:center;
}

/* ===================================================================== */


/* ================= SHOP / BOLT GOMB ================= */
.shop-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:8px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,212,94,.9), rgba(97,199,255,.8));
  color:#071015;
  font-weight:900;
  text-decoration:none;
  transition: transform .18s ease, filter .18s ease;
}
.shop-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}
/* =============================================== */


/* Shop button below the updates mini box */
.shop-btn--below{
  width: fit-content;
  margin-top: 10px;
}


/* Centered shop area */
.shop-wrap{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
  margin-top: 10px;
}
.shop-note{
  margin-top: 8px;
  max-width: 360px;
  line-height: 1.5;
}


/* Contact icon images */
.contact__icon img{
  width: 26px;
  height: 26px;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}


/* ================= BETÖLTŐ ANIMÁCIÓ ================= */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 900px at 70% 0%, rgba(97,199,255,.18), transparent 55%),
    radial-gradient(900px 700px at 15% 30%, rgba(61,255,123,.14), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.86));
  backdrop-filter: blur(10px);
  transition: opacity .45s ease, transform .45s ease;
}
.preloader.hide{
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.preloader__card{
  text-align: center;
  width: min(520px, calc(100% - 32px));
  padding: 24px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,24,.65);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
}
.preloader__logo{
  width: 160px;
}
.preloader__text{
  margin-top: 14px;
  font-family: var(--pixel);
}
.preloader__bar{
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(10, 14px);
  gap: 8px;
  justify-content: center;
}
.preloader__bar span{
  width: 14px;
  height: 14px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  animation: preloadPulse 1.2s infinite ease-in-out;
}
@keyframes preloadPulse{
  0%{opacity:.3}
  50%{opacity:1}
  100%{opacity:.3}
}
.preloader__hint{
  margin-top: 12px;
  color: var(--muted);
}
/* ================================================ */


/* Preloader százalék */
.preloader__percent{
  margin-top: 6px;
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: .6px;
  opacity: .9;
}


/* Preloader logo pulzálás */
.preloader__logo{
  animation: logoPulse 1.2s infinite ease-in-out;
}
@keyframes logoPulse{
  0%{ transform: scale(1); filter: drop-shadow(0 0 0 rgba(97,199,255,0)); }
  50%{ transform: scale(1.06); filter: drop-shadow(0 0 28px rgba(97,199,255,.55)); }
  100%{ transform: scale(1); filter: drop-shadow(0 0 0 rgba(97,199,255,0)); }
}


/* ================= SHOP NEON CSÍK EFFECT ================= */
.shop-btn{
  position: relative;
  overflow: hidden;
}

.shop-btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-120%;
  width:40%;
  height:180%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(97,199,255,.25),
    rgba(97,199,255,.85),
    rgba(97,199,255,.25),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events:none;
}

.shop-btn:hover::after{
  animation: neonSweep .7s ease-out forwards;
}

@keyframes neonSweep{
  from{ left:-120%; }
  to{ left:140%; }
}
/* =============================================== */


/* ================= SHOP NEON CSÍK EFFECT (FIXED) ================= */
.shop-wrap .shop-btn{
  position: relative !important;
  overflow: hidden !important;
}

.shop-wrap .shop-btn::after{
  content:"";
  position:absolute;
  inset: -40% auto -40% -120%;
  width:40%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(97,199,255,.35),
    rgba(97,199,255,1),
    rgba(97,199,255,.35),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events:none;
  opacity:.9;
}

.shop-wrap .shop-btn:hover::after{
  animation: neonSweep 0.7s ease-out forwards;
}

@keyframes neonSweep{
  from{ left:-120%; }
  to{ left:140%; }
}
/* ====================================================== */


/* ================= SHOP BUTTON BORDER-ONLY NEON (FINAL) ================= */
.shop-btn,
.shop-wrap .shop-btn{
  background: transparent !important;
  background-image: none !important;
  border: 2px solid rgba(97,199,255,0.9) !important;
  color: rgba(97,199,255,0.95) !important;
  box-shadow:
    0 0 8px rgba(97,199,255,.6),
    0 0 18px rgba(97,199,255,.45),
    inset 0 0 10px rgba(97,199,255,.25) !important;
}

.shop-btn:hover,
.shop-wrap .shop-btn:hover{
  box-shadow:
    0 0 14px rgba(97,199,255,.9),
    0 0 30px rgba(97,199,255,.75),
    inset 0 0 16px rgba(97,199,255,.4) !important;
}

/* neon csík csak a BORDER-en */
.shop-btn::after,
.shop-wrap .shop-btn::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(97,199,255,.8),
    transparent
  );
  opacity:0;
  pointer-events:none;
}

.shop-btn:hover::after,
.shop-wrap .shop-btn:hover::after{
  opacity:1;
  animation: borderSweep 0.9s linear infinite;
}

@keyframes borderSweep{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}
/* ======================================================== */


/* Live status chip fit */
#stChip{
  white-space: nowrap;
}


/* ================= DESKTOP CENTER FIX ================= */

/* Main hero container center */
.hero{
  display:flex !important;
  justify-content:center !important;
}

.hero__grid{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Quick info panel + shop */
.quick, .mini, .news, .ipbox, .shop-wrap{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Status rows */
.rows{
  margin-left:auto;
  margin-right:auto;
}

/* Sections content */
.section > *{
  margin-left:auto;
  margin-right:auto;
}

/* Card grids */
.modes, .features, .rules, .team, .contact-grid{
  justify-content:center !important;
}

/* Footer */
.footer{
  text-align:center;
}

/* =============================================== */


/* ================= FIX: ANNOUNCEMENT BAR + MOBIL TÖRÉS =================
   - Megoldja, hogy a felső bejelentés ne takarja a navbart
   - Mobilon a hero ne maradjon két oszlopban / ne csússzon szét
======================================================================== */

/* Announcement bar legyen fix felül, a navbar pedig lejjebb */
:root{ --announce-h: 40px; }

.announce-bar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
}

.topbar{
  top: var(--announce-h) !important;
}

/* ha van fixed header, a tartalom ne csússzon alá */
body{
  padding-top: calc(var(--announce-h) + 6px);
}

/* Mobil / kisebb képernyő: minden szépen egymás alá */
@media (max-width: 900px){
  .hero{ display:block !important; }
  .hero__grid{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .hero__left, .hero__right{
    width: 100% !important;
    max-width: 720px;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .ipbox{
    justify-content:center !important;
  }
  .news__top{
    gap: 10px;
  }
}

/* Desktop: center, de csak nagy képernyőn */
@media (min-width: 901px){
  .hero{ display:block !important; } /* ne flexelje szét */
  .hero__grid{ margin-left:auto !important; margin-right:auto !important; }
}
/* ===================================================================== */


/* ====== SHOP / BOLT – BLUE GLOW NO SHINE ====== */
.shop-wrap{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
  margin-top: 12px;
}

.shop-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 12px 18px;
  border-radius: 14px;

  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: .6px;

  color: #bfe9ff !important;
  text-decoration:none;

  background: rgba(10,25,40,.9) !important;
  border: 2px solid #3dbbff !important;

  box-shadow:
    0 0 14px rgba(61,187,255,.55),
    0 0 34px rgba(61,187,255,.25);

  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* TELJESEN kikapcsoljuk a shine / csík effektet */
.shop-btn::after{
  display:none !important;
  content:none !important;
}

.shop-btn:hover{
  filter: brightness(1.1);
  box-shadow:
    0 0 20px rgba(61,187,255,.85),
    0 0 46px rgba(61,187,255,.45);
}

.shop-btn:active{
  transform: scale(.97);
}

.shop-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(61,187,255,.9),
    0 0 30px rgba(61,187,255,.6);
}

.shop-btn--below{
  margin-top: 10px;
  width: fit-content;
}

.shop-note{
  margin-top: 8px;
  max-width: 360px;
  line-height: 1.5;
}
/* ====== /BLUE GLOW NO SHINE ====== */


/* ================= GLOBAL NAVBAR FIX (NO ANNOUNCEMENT BAR) ================= */
.topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  z-index: 500;
}
body{
  padding-top: 80px !important;
}
/* ========================================================================== */



/* ===================== GLOBAL POLISH PACK =====================
   Easy to tweak:
   --glowCyan controls cyan glow strength
   --glowGreen controls green glow strength
=================================================================*/
:root{
  --glowCyan: rgba(97,199,255,.22);
  --glowCyan2: rgba(97,199,255,.40);
  --glowGreen: rgba(61,255,123,.22);
  --glassA: rgba(10,14,24,.55);
}

/* Smooth reveal: fade + slight slide + blur */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(8px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Navbar active underline glow */
.nav a{
  position: relative;
}
.nav a.active::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background: rgba(97,199,255,.85);
  box-shadow: 0 0 16px var(--glowCyan2);
}

/* Buttons: subtle shine sweep on hover */
.btn, .button, .cta, .shop-btn{
  position: relative;
  overflow: hidden;
}
.btn::before, .button::before, .cta::before, .shop-btn::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-40%;
  width:40%;
  height:140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  transition: opacity .18s ease;
}
.btn:hover::before, .button:hover::before, .cta:hover::before, .shop-btn:hover::before{
  opacity: 1;
  animation: shineSweep .85s ease;
}
@keyframes shineSweep{
  from{ left:-40%; }
  to{ left:120%; }
}

/* Logo float (hero) */
.hero-logo img, .hero__logo img, .logo-big{
  animation: floatLogo 5.5s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes floatLogo{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* Section separators */
.section{
  position: relative;
}
.section + .section::before{
  content:"";
  position:absolute;
  top:-14px;
  left:50%;
  transform: translateX(-50%);
  width:min(520px, 90%);
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  box-shadow: 0 0 18px var(--glowCyan);
}

/* Info rows hover */
.row{
  transition: background .15s ease, transform .15s ease;
  border-radius: 12px;
  padding: 8px 10px;
}
.row:hover{
  background: rgba(255,255,255,.05);
}

/* Ping colors */
.ping-good{ color: rgba(61,255,123,.95) !important; text-shadow: 0 0 12px var(--glowGreen); }
.ping-ok{ color: rgba(255,215,120,.95) !important; text-shadow: 0 0 10px rgba(255,215,120,.18); }
.ping-bad{ color: rgba(255,90,90,.95) !important; text-shadow: 0 0 10px rgba(255,90,90,.18); }

/* Burger -> X (3 lines required) */
.burger.open .burger__line:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.burger.open .burger__line:nth-child(2){
  opacity: 0;
}
.burger.open .burger__line:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}
.burger__line{
  transition: transform .18s ease, opacity .18s ease;
}

/* ============================================================= */


/* ================= HERO STATS ================= */
.hero-stats{
  max-width: 780px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.hero-stat{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  padding: 12px 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  text-align: center;
}
.hero-stat .k{
  font-family: var(--pixel, "Press Start 2P", system-ui);
  font-size: 11px;
  opacity: .9;
}
.hero-stat .v{
  margin-top: 8px;
  font-weight: 900;
  font-size: 18px;
}
@media (max-width: 720px){
  .hero-stats{ grid-template-columns: 1fr; }
}
/* ============================================= */


/* ================= BURGER SPAN FIX ================= */
.burger{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.burger span{
  display:block;
  width:22px;
  height:2px;
  background: rgba(225,242,255,.92);
  border-radius:2px;
  box-shadow: 0 0 12px rgba(97,199,255,.20);
  transition: transform .18s ease, opacity .18s ease;
}
.burger span:nth-child(1){ transform: translateY(-6px); }
.burger span:nth-child(3){ transform: translateY(6px); }

.burger.open span:nth-child(1){ transform: translateY(0) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(0) rotate(-45deg); }
/* =================================================== */

/* ================= REVEAL FAILSAFE ================= */
@keyframes _revealFallback { to { opacity:1; transform:none; filter:none; } }
.reveal{ animation: _revealFallback .001s linear 1; animation-delay:.85s; animation-fill-mode:forwards; }
/* =================================================== */