/* GMR Wiki – ALAP design (korábban: "új design terv", ?design=newdesign).
   A korábbi alap a styles-olddesign2.css (?design=olddesign2), a legrégebbi a
   styles-classic.css (?design=classic) – lásd assets/theme-switch.js. */
:root{
  --bg:#0b0b0b;
  --panel:#111111;
  --panel-2:#171717;
  --green:#1ec65b;
  --green-2:#16b653;
  --green-dark:#0f8d3e;
  --line-soft:#1d1d1d;
  --text:#f7f7f7;
  --muted:#a3a3a3;
  --black:#050505;
  --line:#262626;
  --shadow:0 12px 32px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ---------- Egyedi görgetősáv – a böngésző alapértelmezettje helyett ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(30,198,91,.45) var(--bg)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{
  background:rgba(30,198,91,.35);border-radius:4px;
  border:3px solid var(--bg);background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--green)}
::-webkit-scrollbar-corner{background:var(--bg)}
/* Egységes vektoros ikonok (nyilak, chevronok, +/×) – lásd script.js ICON_*
   konstansok. display:block + flex-shrink, hogy sosem torzuljanak/tördelődjenek
   a szövegközi gombokban, a currentColor pedig a szülő .color-ját örökli. */
.icon-glyph{display:block;flex-shrink:0}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  padding:10px 18px 0;
  background:linear-gradient(180deg,rgba(11,11,11,.98),rgba(11,11,11,.90) 75%,rgba(11,11,11,0));
  backdrop-filter:blur(8px);
}
.nav-shell{
  max-width:1260px;
  height:84px;
  margin:0 auto;
  padding:0 20px 0 32px;
  border-radius:6px;
  background:#111111;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  align-items:center;
  gap:12px;
}
.nav-left,.nav-right{display:flex;align-items:center;gap:30px}
.nav-right{justify-content:flex-end}
.nav-link{font-weight:700;font-size:15px}
.nav-link:hover,.social:hover{color:var(--green)}
.brand{
  width:58px;
  height:58px;
  margin:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  overflow:hidden;
  background:transparent;
  filter:drop-shadow(0 0 12px rgba(30,198,91,.18));
}
.brand img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.social{
  color:var(--green);font-weight:800;font-size:22px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:4px;
  transition:color .15s ease,background .15s ease,transform .15s ease;
}
.social svg{width:21px;height:21px;display:block}
.nav-right .social + .social{margin-left:-16px}
.social:hover{color:#5ceb92;background:rgba(30,198,91,.12);transform:translateY(-1px)}
/* A fejléc EGYETLEN fő cselekvése a "Jelentkezés". A szerkesztő-belépés
   szándékosan nincs itt: az az oldalsáv fejlécében van (.editor-link),
   mert staff-funkció, nem a látogatóknak szól. */
.apply-btn{
  padding:20px 32px;
  border-radius:6px;
  background:var(--green);
  color:#fff;
  font-weight:800;
}
.apply-btn:hover{background:var(--green-2)}
.menu-btn,.close-btn{
  display:none;
  border:0;background:transparent;color:#fff;font-size:26px;
}

.page-shell{
  max-width:1500px;
  margin:30px auto 80px;
  padding:0 24px;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:30px;
}
.sidebar{
  position:sticky;
  top:125px;
  align-self:start;
  background:var(--panel);
  border-radius:6px;
  padding:22px;
  min-height:calc(100vh - 160px);
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.sidebar-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
.sidebar-head h2{margin:0;font-size:34px}
/* A "Szerkesztő" link és a mobil bezáró gomb egy csoportban, jobbra. */
.sidebar-head-actions{display:flex;align-items:center;gap:8px;flex:none;margin-top:2px}

/* Staff-belépés a "GMR 4.0 · Wiki" felirat mellett. Halk, apró elem: a
   látogatók 99%-ának nem szól, ezért nem versenyezhet a menüpontokkal. */
.editor-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  border-radius:4px;
  border:1px solid rgba(30,198,91,.28);
  color:rgba(255,255,255,.66);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.editor-link .icon-glyph{flex:none;opacity:.85}
.editor-link:hover{
  background:rgba(30,198,91,.1);
  border-color:var(--green);
  color:var(--green);
}
/* Belépve ("Szerkesztő") halvány zöld jelzés, hogy látszódjon az élő munkamenet. */
.editor-link.is-active{
  color:var(--green);
  border-color:rgba(30,198,91,.5);
  background:rgba(30,198,91,.08);
}
.editor-link.is-active:hover{background:rgba(30,198,91,.16)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--green)}
.sidebar-search{
  display:flex;align-items:center;gap:8px;
  border:1px solid #444;
  background:#202121;
  padding:11px 13px;border-radius:4px;margin:8px 0 16px;
}
.sidebar-search input{
  width:100%;border:0;outline:0;background:transparent;color:#fff;
}
.sidebar-search:focus-within{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(30,198,91,.22);
}
.side-section{display:flex;flex-direction:column;gap:7px}
.side-cat-links{display:contents}
.side-link{
  border:0;text-align:left;padding:12px 14px;border-radius:4px;
  background:transparent;color:#ddd;font-weight:600;
}
.side-link:hover,.side-link.active{background:var(--green);color:#111}
.sidebar-foot{
  margin-top:34px;padding-top:20px;border-top:1px solid #3d3e3e;
  display:flex;flex-direction:column;gap:7px;color:#969696;
}
.content{min-width:0}
.hero{
  display:grid;
  grid-template-columns:.78fr 1.55fr;
  gap:28px;
  min-height:520px;
  align-items:center;
}
.hero-copy{padding:40px 16px}
.hero-badge{
  display:inline-flex;
  padding:8px 12px;
  background:rgba(30,198,91,.12);
  border:1px solid rgba(30,198,91,.35);
  border-radius:4px;
  color:var(--green);
  font-size:12px;font-weight:800;letter-spacing:1.2px;
}
.hero h1{font-size:54px;line-height:1.04;margin:18px 0 18px;max-width:620px}
.hero p{font-size:18px;line-height:1.7;color:#c8c8c8;max-width:620px}
.hero-art{
  position:relative;
  min-height:500px;
  overflow:hidden;
  border-radius:6px;
  background:
    linear-gradient(180deg,rgba(18,100,48,.15),rgba(4,39,18,.45)),
    radial-gradient(circle at 25% 20%,#39e276 0 4%,transparent 28%),
    linear-gradient(140deg,#2e9d58 0%,#1f7947 32%,#123e2a 75%,#0e291d 100%);
  box-shadow:inset 0 0 80px rgba(0,0,0,.35);
}
.hero-art:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 78% 25%,rgba(255,255,255,.11),transparent 17%),
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 50%);
  mix-blend-mode:screen;
}
.cityline{
  position:absolute;left:9%;right:7%;bottom:20%;height:58%;
  display:flex;align-items:flex-end;gap:14px;opacity:.78;
}
.cityline span{
  flex:1;background:linear-gradient(180deg,#0e2b1c,#07150e);
  border-radius:2px;box-shadow:inset 8px 0 0 rgba(255,255,255,.018);
}
.cityline span:nth-child(3n){flex:.65}
.road{
  position:absolute;left:-10%;right:-6%;bottom:-18%;height:45%;
  background:linear-gradient(180deg,#142c1e,#07100b);
  transform:skewY(-4deg);
  border-top:4px solid rgba(48,255,118,.25);
}
.hero-mark{
  position:absolute;right:28px;bottom:28px;
  padding:16px 18px;border-radius:6px;
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.10);
  font-weight:800;font-size:28px;line-height:.9;
}
.hero-mark small{font-size:10px;letter-spacing:1px;color:var(--green)}
.hero-search{
  margin-top:24px;
  display:flex;gap:10px;align-items:center;
  background:#2d2e2e;border:1px solid #454646;border-radius:6px;padding:15px 17px;
  max-width:620px;
}
.hero-search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:16px}
.hero-search:focus-within{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(30,198,91,.2);
}
.quick-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.quick-tags button{
  border:1px solid var(--green);background:transparent;color:var(--green);
  padding:9px 13px;border-radius:4px;font-weight:700;
}
.quick-tags button:hover{background:var(--green);color:#111}
.intro-card{
  margin:42px 0;
  background:var(--green);
  color:#0c0c0c;
  border-radius:6px;
  padding:44px 55px;
  text-align:center;
}
.intro-card h2{font-size:42px;margin:0 0 14px}
.intro-card p{margin:0 auto;max-width:820px;line-height:1.65;font-size:17px}
.section-head{
  display:flex;align-items:end;justify-content:space-between;
  margin:30px 0 18px;
}
.section-head.second{margin-top:48px}
.section-head h1,.section-head h2{margin:4px 0 0;font-size:40px}
.muted{color:var(--muted)}
.category-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}

.category-card{
  min-height:220px;
  background:linear-gradient(180deg,#111111 0%, #0e0e0e 100%);
  border-radius:6px;
  padding:0;
  border:1px solid rgba(255,255,255,.02);
  transition:.18s ease;
  position:relative;
  overflow:hidden;
  text-align:left;
  isolation:isolate;
}
.category-card:hover{transform:translateY(-4px);border-color:rgba(30,198,91,.45)}
.category-art{
  position:absolute;inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.78;
  filter:saturate(.95);
}
.category-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(17,20,18,.22) 0%, rgba(17,20,18,.48) 38%, rgba(17,20,18,.88) 100%),
    radial-gradient(circle at 78% 18%, rgba(30,198,91,.18), transparent 28%);
}
.category-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  justify-content:flex-end;
  min-height:220px;
  padding:22px;
}
.category-icon{
  position:absolute;
  left:22px;top:22px;
  width:48px;height:48px;border-radius:4px;background:var(--green);
  color:#111;display:grid;place-items:center;font-weight:900;
  box-shadow:0 10px 25px rgba(30,198,91,.18);
}
.category-card h3{margin:0 0 8px;font-size:20px}
.category-card p{margin:0;color:#d0d0d0;line-height:1.55;font-size:14px;max-width:90%}

.article-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.article-card{
  background:var(--green);color:#101010;border-radius:6px;padding:22px;min-height:180px;
  border:0;text-align:left;transition:.18s ease;
}
.article-card:hover{transform:translateY(-4px);filter:brightness(1.05)}
.article-card small{font-weight:800;opacity:.65;text-transform:uppercase;letter-spacing:1px}
.article-card h3{font-size:22px;margin:10px 0 10px}
.article-card p{line-height:1.55;margin:0}
.breadcrumbs{display:flex;align-items:center;gap:8px;color:#aaa;margin:20px 0 28px;flex-wrap:wrap}
.breadcrumbs button{border:0;background:none;color:var(--green);padding:0}

/* Egyetlen vissza gomb a korábbi morzsamenü helyett. */
.back-home{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:4px;
  border:1px solid rgba(30,198,91,.38);
  background:rgba(30,198,91,.1);
  color:#6cf0a1;font-weight:800;font-size:13.5px;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.back-home:hover{
  background:rgba(30,198,91,.2);
  border-color:rgba(30,198,91,.65);
  transform:translateX(-2px);
}
.article-list{display:flex;flex-direction:column;gap:12px}
.list-item{
  width:100%;border:1px solid #2a2a2a;background:var(--panel);
  border-radius:6px;padding:20px;text-align:left;color:#fff;
  display:flex;justify-content:space-between;gap:20px;align-items:center
}
.list-item:hover{border-color:var(--green)}
.list-item h3{margin:0 0 6px}
.list-item p{margin:0;color:#aaa}
.list-item .arrow{color:var(--green);font-size:24px}
.article-hero{
  background:linear-gradient(135deg,#1a482a,#1ec65b 150%);
  border-radius:6px;padding:44px;margin-bottom:24px;
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
}
.article-hero-text{flex:1;min-width:0}
/* Karakter-cikkeknél a portré ide kerül, a zöld sáv jobb oldalára –
   ha nincs portré (a legtöbb cikknél), a .hidden miatt egyszerűen nincs
   második flex-elem, a szöveg-blokk pedig változatlanul tölti ki a helyet. */
.article-hero-portrait{
  flex:none;width:150px;height:200px;object-fit:cover;border-radius:6px;
  border:3px solid rgba(255,255,255,.28);box-shadow:0 16px 38px rgba(0,0,0,.35);
}
.article-category{
  display:inline-block;background:#0b2414;color:#7bf2a5;padding:8px 12px;border-radius:4px;font-size:12px;font-weight:800
}
.article-hero h1{font-size:50px;margin:16px 0 10px}
.article-hero p{max-width:850px;font-size:19px;line-height:1.65;color:#e9f9ee}
.article-meta{display:flex;align-items:center;gap:8px;color:#bce9c8;font-size:13px;margin-top:20px}
.article-edit-link{
  margin-left:auto;padding:6px 14px;border-radius:4px;font-weight:700;
  color:var(--green);border:1px solid rgba(30,198,91,.4);
}
.article-edit-link:hover{background:rgba(30,198,91,.12);color:#5ceb92}
.article-author-link{color:#bce9c8;text-decoration:none;border-bottom:1px dotted transparent}
.article-author-link:empty{display:none}
.article-author-link:hover{color:var(--green);border-bottom-color:var(--green)}
/* Névtelen szerző: href nélküli link, nem kattintható. */
.article-author-link:not([href]),.article-author-link:not([href]):hover{color:#bce9c8;border-bottom-color:transparent;cursor:default}
.article-editors-wrap{position:relative;display:inline-flex}
.article-editors-btn{
  background:none;border:1px solid rgba(188,233,200,.3);color:#bce9c8;
  border-radius:4px;padding:2px 10px;font-size:12px;cursor:pointer;font-family:inherit;
}
.article-editors-btn:hover{color:var(--green);border-color:rgba(30,198,91,.5)}
.article-editors-panel{
  position:absolute;top:calc(100% + 6px);left:0;min-width:200px;max-width:280px;
  background:#0f1c14;border:1px solid rgba(30,198,91,.3);border-radius:4px;
  padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.4);z-index:20;
}
.article-editors-panel a,.article-editors-panel span{
  display:block;padding:6px 8px;border-radius:2px;color:#e9f9ee;text-decoration:none;font-size:13px;
}
.article-editors-panel a:hover{background:rgba(30,198,91,.12);color:#5ceb92}
.article-editors-details{position:relative}
.article-editors-details summary{
  list-style:none;cursor:pointer;color:#bce9c8;border:1px solid rgba(188,233,200,.3);
  border-radius:4px;padding:2px 10px;font-size:12px;
}
.article-editors-details summary::-webkit-details-marker{display:none}
.article-editors-details summary:hover{color:var(--green);border-color:rgba(30,198,91,.5)}
.article-editors-panel--static{position:absolute;top:calc(100% + 6px);left:0}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;align-items:start}
.article-layout.no-toc{grid-template-columns:minmax(0,1fr)}
.article-body{
  background:var(--panel);border-radius:6px;padding:34px 38px;line-height:1.75;
}
.article-body h2{font-size:30px;margin-top:40px;scroll-margin-top:130px;clear:both}
.article-body h2:first-child{margin-top:0}
.article-body p,.article-body li{color:#d1d1d1}
.article-body ul{padding-left:22px}
.callout{
  background:#1f3d29;border-left:4px solid var(--green);
  padding:16px 18px;border-radius:4px;margin:22px 0;color:#e5ffe9
}
.toc{
  position:sticky;top:125px;background:var(--panel);border-radius:6px;padding:20px;
}
.toc-title{font-weight:800;margin-bottom:12px}
.toc a{display:block;color:#aaa;padding:7px 0;font-size:14px}
.toc a:hover{color:var(--green)}
.overlay{display:none}

@media (max-width:1150px){
  .nav-left .nav-link{display:none}
  .nav-shell{grid-template-columns:1fr 70px 1fr}
  .menu-btn{display:block}
  .page-shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed;z-index:120;left:16px;top:16px;bottom:16px;width:min(340px,calc(100vw - 32px));
    min-height:auto;transform:translateX(-120%);transition:.2s ease
  }
  .sidebar.open{transform:translateX(0)}
  .close-btn{display:block}
  .overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.56);z-index:110
  }
  .overlay.open{display:block}
  .hero{grid-template-columns:1fr}
  .hero-art{min-height:420px}
  .hero-copy{padding-bottom:0}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .article-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .topbar{padding:8px}
  .nav-shell{height:70px;padding:0 14px;border-radius:6px}
  .nav-right .social{display:none}
  .apply-btn{padding:14px 18px;font-size:13px}
  .brand{width:48px;height:48px}
  .page-shell{padding:0 14px;margin-top:10px}
  .hero{min-height:auto}
  .hero-copy{padding:30px 4px 14px}
  .hero h1{font-size:39px}
  .hero-art{min-height:320px}
  .intro-card{padding:34px 22px}
  .intro-card h2{font-size:31px}
  .category-grid,.article-grid{grid-template-columns:1fr}
  .section-head{align-items:flex-start;gap:8px;flex-direction:column}
  .section-head h1,.section-head h2{font-size:32px}
  .article-layout{grid-template-columns:1fr}
  .toc{display:none}
  .article-hero{padding:28px 24px}
  .article-hero h1{font-size:36px}
  .article-hero-portrait{width:110px;height:147px}
  .article-body{padding:26px 22px}
}


/* --- GMR szerver statisztika --- */
.server-stats{
  position:relative;
  align-self:start;
  display:flex;
  flex-direction:column;
  height:480px;  /* tartalék érték; desktopon a JS a Parancsok gombhoz méri */
  padding:30px;
  border-radius:6px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 5%,rgba(42,229,111,.27),transparent 38%),
    linear-gradient(145deg,#183e28 0%,#10311f 48%,#081b11 100%);
  border:1px solid rgba(46,220,108,.12);
  box-shadow:inset 0 0 70px rgba(0,0,0,.24),0 22px 60px rgba(0,0,0,.16);
}
.server-stats:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 32%);
}
.stats-head,.stats-foot,.stat-cards,.chart-panel{position:relative;z-index:1}
.stats-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.stats-kicker{display:flex;align-items:center;gap:8px;color:#c8f8d8;font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}
.status-dot{width:9px;height:9px;border-radius:50%;background:#6e7470;box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.status-dot.online{background:#2ee36e;box-shadow:0 0 12px rgba(46,227,110,.7)}
.status-dot.offline{background:#ef5350}
.stats-head h3{font-size:30px;margin:8px 0 0}
.range-tabs{
  flex:none;display:flex;padding:3px;border-radius:4px;
  background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.07);
}
.range-tabs button{
  border:0;background:transparent;color:#9fb5a7;
  padding:6px 12px;border-radius:4px;font-weight:800;font-size:11.5px;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.range-tabs button:hover{color:#d6f5e2}
.range-tabs button.active{background:var(--green);color:#092112}
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 10px}
.mini-stat{
  padding:14px 15px;border-radius:4px;background:rgba(7,24,14,.55);
  border:1px solid rgba(255,255,255,.055);backdrop-filter:blur(5px)
}
.mini-stat span{display:block;color:#91a99a;font-size:11px;font-weight:700;margin-bottom:6px}
.mini-stat strong{display:block;font-size:24px;line-height:1;color:#f4fff7}
.mini-stat strong b{font-size:28px;color:#58e98c}
.mini-stat strong small{font-size:12px;color:#91a99a;font-weight:600}
/* 7 napos játékosszám-grafikon.
   Tartalmában a GMR desktop widget STAT panelét követi
   (7 napos csúcs / átlag / idősor), de a Wiki zöld arculatában. */
.chart-panel{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;
  margin-top:10px;padding:16px 16px 12px;border-radius:6px;
  background:rgba(5,19,11,.46);border:1px solid rgba(255,255,255,.045);
}
.chart-panel-head{display:flex;align-items:center;gap:10px}
.chart-eyebrow{
  color:#c8f8d8;font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
}
/* Az egyetlen státuszsor a panel alján van (#lastUpdated). */
#lastUpdated.is-stale{color:#e8c46a}
#lastUpdated.is-error{color:#ff8a87}
.chart-wrap{
  position:relative;flex:1;min-height:100px;border-radius:4px;
  background:rgba(2,11,6,.5);border:1px solid rgba(255,255,255,.04);
  overflow:hidden;
}
#playerChart{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
#playerChart.is-panning{cursor:grabbing}

/* Csak nagyított nézetben jelenik meg. */
.chart-reset{
  position:absolute;top:8px;right:8px;z-index:4;
  padding:6px 11px;border-radius:4px;font-size:11px;font-weight:800;
  color:#cdf6dd;background:rgba(6,24,14,.86);
  border:1px solid rgba(82,232,135,.34);
  transition:background .15s ease,border-color .15s ease;
}
.chart-reset:hover{background:rgba(30,198,91,.2);border-color:rgba(82,232,135,.6)}
.chart-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:6px;padding:24px;text-align:center;color:#9bb6a3;pointer-events:none;
}
.chart-empty strong{color:#e9fff0;font-size:14px}
.chart-empty span{max-width:40ch;line-height:1.5;font-size:12px}
.chart-empty.hidden{display:none!important}
.chart-tooltip{
  position:absolute;display:none;pointer-events:none;z-index:3;
  background:#0a1710;border:1px solid rgba(82,232,135,.3);box-shadow:0 10px 28px rgba(0,0,0,.35);
  padding:8px 11px;border-radius:4px;font-size:12px;color:#e9fff0;white-space:nowrap;line-height:1.45;
}
.chart-tooltip b{color:#62f096}
.chart-axis{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#74877c;font-size:10.5px;font-weight:700}
.chart-hint{color:#5d6e64;font-weight:600;text-align:center}
@media(max-width:620px){ .chart-hint{display:none} }
.stats-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px;font-size:12px;color:#8da095}
.stats-foot a{color:#58e98c;font-weight:800}
@media (max-width:760px){
  .server-stats{height:auto;padding:22px 16px}
  .stats-head{flex-direction:column}
  .stat-cards{grid-template-columns:repeat(2,1fr)}
  .chart-panel{padding:13px 13px 10px}
  .chart-wrap{flex:none;height:180px}
  .stats-foot{align-items:flex-start;flex-direction:column}
}


/* =========================
   GMR SZABÁLYZAT
   ========================= */
.rules-page{padding-bottom:70px}
.rules-hero{
  position:relative;overflow:hidden;
  display:flex;justify-content:space-between;align-items:center;gap:30px;
  padding:48px 52px;border-radius:6px;
  background:
    radial-gradient(circle at 88% 10%,rgba(78,255,137,.22),transparent 26%),
    linear-gradient(135deg,#163e27 0%,#102d1e 56%,#0a1c12 100%);
  border:1px solid rgba(66,226,120,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.16);
}
.rules-hero:after{
  content:"";position:absolute;right:-90px;bottom:-150px;width:420px;height:420px;
  border:1px solid rgba(52,223,112,.08);border-radius:50%;
  box-shadow:0 0 0 50px rgba(52,223,112,.025),0 0 0 100px rgba(52,223,112,.018)
}
.rules-hero-copy{position:relative;z-index:1}
.rules-badge{
  display:inline-flex;padding:8px 12px;border-radius:4px;
  background:rgba(30,198,91,.14);border:1px solid rgba(30,198,91,.34);
  color:#74efa0;font-size:11px;font-weight:800;letter-spacing:1.2px
}
.rules-hero h1,.rules-hero .hero-title{font-size:52px;margin:16px 0 10px;letter-spacing:-1.8px}
.rules-hero p{max-width:680px;margin:0;color:#cce0d2;font-size:17px;line-height:1.65}
.rules-meta{display:flex;align-items:center;gap:10px;margin-top:20px;color:#9fb6a7;font-size:13px}
.rules-meta a{color:#5be98d;font-weight:800}
.rules-emblem{
  position:relative;z-index:1;flex:0 0 175px;height:175px;border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(4,15,9,.46);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(8px);box-shadow:inset 0 0 40px rgba(0,0,0,.2)
}
.rules-emblem img{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(30,198,91,.26))}
.rules-emblem span{font-size:10px;letter-spacing:2px;color:#64e992;font-weight:900}

.rules-notice{
  margin:20px 0 22px;padding:24px 28px;border-radius:6px;
  background:linear-gradient(135deg,rgba(30,198,91,.15),rgba(30,198,91,.055));
  border:1px solid rgba(30,198,91,.21);color:#d9e9df;line-height:1.65
}
.rules-notice p{margin:7px 0}
.rules-notice p:first-child{margin-top:0}
.rules-notice p:last-child{margin-bottom:0}
.rules-notice strong{color:#fff}
.rules-notice a{color:#62ec93;font-weight:800}

.rules-toolbar{display:flex;gap:12px;align-items:center;margin:22px 0}
.rules-search{
  flex:1;display:flex;align-items:center;gap:10px;min-height:56px;
  background:#111111;border:1px solid #2a2a2a;border-radius:6px;padding:0 16px
}
.rules-search:focus-within{border-color:rgba(30,198,91,.72);box-shadow:0 0 0 3px rgba(30,198,91,.08)}
.rules-search span{color:#55dc83;font-size:22px}
.rules-search input{flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:15px}
.rules-search input::placeholder{color:#777}
.rules-search button{border:0;background:transparent;color:#858585;font-size:22px;padding:6px}
.rules-search button:hover{color:#fff}
.rules-expand-all{
  min-height:56px;padding:0 19px;border-radius:6px;border:1px solid rgba(30,198,91,.28);
  background:rgba(30,198,91,.075);color:#62e991;font-weight:800
}
.rules-expand-all:hover{background:var(--green);color:#09140d}

.rules-chapter-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.rules-chapter-card{
  position:relative;min-height:145px;padding:22px;border:1px solid rgba(255,255,255,.045);
  border-radius:6px;background:#111111;color:#fff;text-align:left;overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,background .18s ease
}
.rules-chapter-card:after{
  content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-30px;top:-42px;
  background:rgba(30,198,91,.09)
}
.rules-chapter-card:hover{transform:translateY(-3px);border-color:rgba(30,198,91,.4);background:#2b2e2c}
.chapter-index{display:block;color:#52e486;font-weight:900;font-size:12px;margin-bottom:24px}
.rules-chapter-card small{display:block;color:#6d8e77;font-weight:800;font-size:10px;letter-spacing:1.2px}
.rules-chapter-card strong{display:block;font-size:18px;margin-top:5px;max-width:85%}
.rules-chapter-card em{display:block;margin-top:10px;color:#9aab9e;font-style:normal;font-size:12px}

.rules-intro{
  margin:28px 0;padding:30px 34px;border-radius:6px;background:#111111;border-left:4px solid var(--green)
}
.rules-section-label{color:#54e587;font-size:11px;letter-spacing:1.4px;font-weight:900;margin-bottom:10px}
.rules-intro p{margin:7px 0;color:#d1d5d2;line-height:1.7}

.rules-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:22px;align-items:start}
.rules-nav{
  position:sticky;top:125px;background:#111111;border-radius:6px;padding:16px;border:1px solid rgba(255,255,255,.035)
}
.rules-nav-title{font-weight:800;font-size:12px;color:#8b9c90;text-transform:uppercase;letter-spacing:1.2px;padding:7px 9px 12px}
.rules-nav button{
  width:100%;display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:8px;
  border:0;background:transparent;color:#d0d5d1;border-radius:4px;text-align:left;
  padding:11px 10px;font-size:12px;line-height:1.35
}
.rules-nav button:hover{background:rgba(30,198,91,.1);color:#fff}
.rules-nav button>span{display:grid;place-items:center;width:27px;height:27px;border-radius:4px;background:#1f3c29;color:#5be98d;font-weight:900}
.rules-nav button small{color:#6d7b71}
.rules-content{min-width:0}
.rules-section{scroll-margin-top:125px;margin-bottom:34px}
.rules-section-hidden{display:none}
.rules-section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-bottom:14px;padding:8px 2px
}
.rules-section-head h2{font-size:31px;margin:5px 0 5px}
.rules-section-head p{margin:0;color:#969f99;line-height:1.55;max-width:680px}
.rules-count{flex:none;color:#63e990;background:rgba(30,198,91,.09);border:1px solid rgba(30,198,91,.18);padding:8px 11px;border-radius:4px;font-size:11px;font-weight:800}

.rules-list{display:flex;flex-direction:column;gap:10px}
.rule-card{
  background:#111111;border:1px solid rgba(255,255,255,.045);border-radius:6px;overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease
}
.rule-card:hover{border-color:rgba(30,198,91,.22)}
.rule-card.open{border-color:rgba(30,198,91,.36);box-shadow:0 16px 36px rgba(0,0,0,.12)}
.rule-filter-hidden{display:none}
.rule-head{
  width:100%;display:grid;grid-template-columns:54px minmax(0,1fr) 38px;align-items:center;gap:14px;
  border:0;background:transparent;color:#fff;text-align:left;padding:17px 18px
}
.rule-number{
  display:grid;place-items:center;min-height:44px;padding:0 8px;border-radius:4px;
  background:#1ec65b;color:#07130b;font-weight:900;font-size:13px
}
.rule-head-copy{min-width:0}
.rule-head-copy strong{display:block;font-size:16px}
.rule-head-copy small{
  display:block;margin-top:5px;color:#8f9992;font-size:12px;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.rule-toggle{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:#222423;color:#5ce88d;font-size:23px;line-height:1;transition:transform .2s ease,background .2s ease
}
.rule-card.open .rule-toggle{transform:rotate(45deg);background:#173823}
.rule-card.open .rule-head-copy small{display:none}
.rule-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.rule-card.open .rule-body{grid-template-rows:1fr}
.rule-body-inner{overflow:hidden;padding:0 90px 0 86px;color:#d1d6d2;line-height:1.72}
.rule-card.open .rule-body-inner{padding-bottom:12px}
.rule-body-inner p{margin:0 0 12px}
.rule-body-inner strong{color:#fff}
.rule-body-inner em{color:#bfc8c1}
.rule-body-inner ul,.rule-body-inner ol{padding-left:22px;margin:8px 0 15px}
.rule-body-inner li{margin:5px 0}
.rule-body-inner a{color:#5ce88d}
.rule-actions{
  overflow:hidden;display:flex;justify-content:flex-end;
  margin:0 18px 0 86px;border-top:1px solid rgba(255,255,255,.05)
}
.rule-card.open .rule-actions{padding:10px 0 13px}
.copy-rule-link{
  border:0;background:transparent;color:#6fde96;font-size:11px;font-weight:800;padding:6px 0
}
.rules-image-placeholder{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:15px 0;padding:14px;
  border-radius:4px;border:1px dashed rgba(30,198,91,.25);background:rgba(30,198,91,.04);color:#a8b4ac
}
.rules-image-placeholder span{font-size:20px}
.rules-image-placeholder strong{color:#dce7df}
.rules-image-placeholder small{width:100%;padding-left:30px;color:#7e8b82}
.rules-no-results{padding:45px;text-align:center;border-radius:6px;background:#111111}
.rules-no-results strong{display:block;font-size:24px}
.rules-no-results span{display:block;margin-top:7px;color:#999}

@media(max-width:1000px){
  .rules-layout{grid-template-columns:1fr}
  .rules-nav{position:static;display:flex;gap:7px;overflow:auto}
  .rules-nav-title{display:none}
  .rules-nav button{min-width:190px}
}
@media(max-width:760px){
  .rules-hero{padding:32px 24px}
  .rules-hero h1,.rules-hero .hero-title{font-size:38px}
  .rules-emblem{display:none}
  .rules-toolbar{align-items:stretch;flex-direction:column}
  .rules-chapter-cards{grid-template-columns:1fr}
  .rules-layout{display:block}
  .rules-nav{margin-bottom:20px}
  .rules-section-head{align-items:flex-start;flex-direction:column}
  .rule-head{grid-template-columns:48px minmax(0,1fr) 32px;padding:14px 12px;gap:10px}
  .rule-body-inner{padding-left:70px;padding-right:14px}
  .rule-actions{margin-left:70px}
}


/* =========================
   ÚTMUTATÓK / MUNKÁK / BILLENTYŰK / PARANCSOK
   ========================= */
.help-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.help-quick-card{
  min-height:145px;border:1px solid rgba(255,255,255,.045);border-radius:6px;
  background:#111111;color:#fff;text-align:left;padding:20px;display:flex;gap:15px;align-items:flex-start;
  transition:.18s ease
}
.help-quick-card:hover{transform:translateY(-3px);border-color:rgba(30,198,91,.42);background:#2b2e2c}
.help-quick-icon{
  width:43px;height:43px;border-radius:4px;background:var(--green);color:#07130b;
  display:grid;place-items:center;font-size:20px;font-weight:900;flex:none
}
.help-quick-card small{display:block;color:#5fe68c;font-size:10px;font-weight:900;letter-spacing:1px}
.help-quick-card strong{display:block;font-size:17px;margin:5px 0 5px}
.help-quick-card p{margin:0;color:#9da59f;font-size:12px;line-height:1.45}

.resource-page{padding-bottom:70px}
.resource-hero{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:34px;
  padding:48px 52px;margin-bottom:22px;border-radius:6px;
  background:
    radial-gradient(circle at 82% 12%,rgba(57,231,118,.22),transparent 25%),
    linear-gradient(135deg,#164128 0%,#102d1e 58%,#091a11 100%);
  border:1px solid rgba(59,226,116,.14);box-shadow:0 24px 60px rgba(0,0,0,.14)
}
.resource-hero:after{
  content:"";position:absolute;right:-100px;top:-180px;width:430px;height:430px;border-radius:50%;
  border:1px solid rgba(74,235,132,.08);box-shadow:0 0 0 55px rgba(74,235,132,.025),0 0 0 110px rgba(74,235,132,.017)
}
.compact-resource-hero{padding-top:38px;padding-bottom:38px}
.resource-hero>div:first-child{position:relative;z-index:1}
.resource-badge{
  display:inline-flex;padding:8px 11px;border-radius:4px;background:rgba(30,198,91,.13);
  border:1px solid rgba(30,198,91,.31);color:#68e997;font-size:11px;font-weight:900;letter-spacing:1px
}
/* A nezet-cimek h2-k (lasd lent): egy dokumentumban egyetlen h1 legyen,
   es az index.html-ben egyszerre 10 nezet van a DOM-ban. A .hero-title
   osztaly tartja meg a korabbi h1-megjelenest. */
.resource-hero h1,.resource-hero .hero-title{font-size:48px;line-height:1.05;margin:16px 0 10px;letter-spacing:-1.5px}
.resource-hero p{max-width:760px;margin:0;color:#c6d9cc;font-size:17px;line-height:1.65}
.resource-hero-mark{
  position:relative;z-index:1;flex:0 0 155px;height:155px;border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(4,15,9,.48);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(8px)
}
.resource-hero-mark>span{font-size:30px;color:#4ce583;margin-bottom:3px}
.resource-hero-mark b{font-size:29px}
.resource-hero-mark small{font-size:9px;letter-spacing:2px;color:#58e98b;font-weight:900}

.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.video-grid-featured{grid-template-columns:repeat(2,1fr)}
.video-card{
  overflow:hidden;border-radius:6px;background:#111111;border:1px solid rgba(255,255,255,.045);
  transition:.18s ease
}
.video-card:hover{transform:translateY(-3px);border-color:rgba(30,198,91,.33)}
.video-frame{position:relative;aspect-ratio:16/9;background:#101311}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-copy{padding:20px}
.video-tag{
  display:inline-block;padding:6px 8px;border-radius:4px;background:rgba(30,198,91,.12);
  color:#57e589;font-size:9px;font-weight:900;letter-spacing:1px
}
.video-copy h2{font-size:19px;line-height:1.3;margin:11px 0 8px}
.featured-video .video-copy h2{font-size:22px}
.video-copy p{margin:0 0 15px;color:#aeb5b0;line-height:1.55;font-size:13px}
.video-copy a{color:#58e98c;font-size:12px;font-weight:900}

.resource-link-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.resource-link-row button{
  min-height:84px;border:1px solid rgba(255,255,255,.045);border-radius:6px;background:#111111;color:#fff;
  display:grid;grid-template-columns:40px 1fr 20px;gap:12px;align-items:center;text-align:left;padding:15px
}
.resource-link-row button:hover{border-color:rgba(30,198,91,.38)}
.resource-link-row button>span{width:40px;height:40px;border-radius:4px;background:#1b4329;color:#5de98d;display:grid;place-items:center;font-weight:900}
.resource-link-row strong{display:block;font-size:14px}
.resource-link-row small{display:block;margin-top:3px;color:#929b95}
.resource-link-row b{color:#51e485;font-size:20px}

.guide-tip{
  display:flex;gap:13px;align-items:flex-start;margin-top:18px;padding:18px 20px;border-radius:6px;
  background:linear-gradient(135deg,rgba(30,198,91,.11),rgba(30,198,91,.045));
  border:1px solid rgba(30,198,91,.17)
}
.guide-tip>span{font-size:22px}
.guide-tip strong{font-size:14px}
.guide-tip p{margin:4px 0 0;color:#aeb8b1;line-height:1.5;font-size:13px}
.tips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

.keyboard-poster{
  background:#111111;border:1px solid rgba(255,255,255,.045);border-radius:6px;padding:18px;margin-bottom:20px
}
.keyboard-poster-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;padding:5px 5px 16px}
.keyboard-poster-head h2{margin:4px 0 0;font-size:28px}
.keyboard-poster img{display:block;width:100%;border-radius:4px;background:#122016}
.controls-toolbar,.command-toolbar{display:flex;align-items:center;gap:12px;margin:18px 0}
.controls-search,.command-search{
  min-height:56px;flex:1;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:6px;
  background:#111111;border:1px solid #2a2a2a
}
.controls-search:focus-within,.command-search:focus-within{border-color:rgba(30,198,91,.7);box-shadow:0 0 0 3px rgba(30,198,91,.07)}
.controls-search>span,.command-search>span{font-size:20px;color:#52e385}
.controls-search input,.command-search input{flex:1;border:0;outline:0;background:transparent;color:#fff}
.controls-search button,.command-search button{border:0;background:transparent;color:#89908b;font-size:21px}
.keybind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.keybind-card{
  min-height:84px;padding:14px;border-radius:4px;background:#111111;border:1px solid rgba(255,255,255,.045);
  display:grid;grid-template-columns:68px 1fr;gap:13px;align-items:center
}
.keybind-card:hover{border-color:rgba(30,198,91,.3)}
.keycap{
  min-width:60px;min-height:48px;padding:7px 8px;border-radius:4px;background:linear-gradient(180deg,#20ca5d,#16a94d);
  color:#07130b;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);display:grid;place-items:center;font-weight:900;font-size:12px;text-align:center
}
.keybind-card small{display:block;color:#5ce88d;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.9px}
.keybind-card strong{display:block;margin-top:4px;font-size:12px;line-height:1.42;color:#e7ebe8}

.command-count{
  min-height:56px;min-width:105px;border-radius:6px;background:#173a24;border:1px solid rgba(30,198,91,.18);
  display:flex;align-items:center;justify-content:center;gap:6px;color:#c9d8ce
}
.command-count b{font-size:22px;color:#5ce88d}.command-count span{font-size:11px}
.command-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.command-tabs button{
  border:1px solid #2a2a2a;background:#111111;color:#aab0ac;padding:9px 13px;border-radius:4px;font-size:11px;font-weight:800
}
.command-tabs button:hover,.command-tabs button.active{background:var(--green);border-color:var(--green);color:#07130b}
.command-list{display:flex;flex-direction:column;gap:9px}
.command-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 17px;border-radius:6px;
  background:#111111;border:1px solid rgba(255,255,255,.045)
}
.command-card:hover{border-color:rgba(30,198,91,.28)}
.command-main{display:grid;grid-template-columns:110px 1fr;gap:15px;align-items:center;min-width:0}
.command-code{
  display:grid;place-items:center;min-height:45px;padding:8px 10px;border-radius:4px;background:#173f27;
  color:#5ce98e;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900
}
.command-main small{display:block;color:#6ee698;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.8px}
.command-main strong{display:block;margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:#f4f7f5}
.command-main p{margin:5px 0 0;color:#9ca49f;font-size:12px;line-height:1.45}
.copy-command{
  flex:none;border:1px solid rgba(30,198,91,.24);background:rgba(30,198,91,.065);color:#5ce98d;
  padding:9px 12px;border-radius:4px;font-size:10px;font-weight:900
}
.copy-command:hover{background:var(--green);color:#07130b}
.resource-empty{
  grid-column:1/-1;padding:36px;border-radius:6px;background:#111111;text-align:center;color:#8f9992
}
.resource-empty strong{display:block;color:#fff;font-size:20px;margin-bottom:6px}

@media(max-width:1100px){
  .help-quick-grid{grid-template-columns:repeat(2,1fr)}
  .keybind-grid{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .video-grid-featured{grid-template-columns:1fr}
}
@media(max-width:760px){
  .help-quick-grid,.video-grid,.resource-link-row,.keybind-grid,.tips-grid{grid-template-columns:1fr}
  .resource-hero{padding:30px 22px}
  .resource-hero h1,.resource-hero .hero-title{font-size:37px}
  .resource-hero-mark{display:none}
  .keyboard-poster{padding:10px}
  .keyboard-poster-head{align-items:flex-start;flex-direction:column}
  .command-toolbar{align-items:stretch;flex-direction:column}
  .command-count{width:100%}
  .command-main{grid-template-columns:1fr}
  .command-code{justify-self:start}
  .command-card{align-items:flex-start}
}


/* YouTube 153-safe preview / lazy embed */
.youtube-embed{position:absolute;inset:0;width:100%;height:100%;background:#0b0d0c}
.youtube-embed>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.youtube-preview{position:absolute;inset:0;overflow:hidden;background:#090b0a}
.youtube-preview:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.58));
  pointer-events:none
}
.youtube-preview img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.78)}
.youtube-play{
  position:absolute;z-index:2;left:50%;top:48%;transform:translate(-50%,-50%);
  width:66px;height:50px;border:0;border-radius:4px;background:#ff0033;color:#fff;
  font-size:24px;display:grid;place-items:center;box-shadow:0 14px 36px rgba(0,0,0,.38)
}
.youtube-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.youtube-preview-note{
  position:absolute;z-index:2;left:17px;right:17px;bottom:14px;
  display:flex;flex-direction:column;gap:3px;text-shadow:0 2px 8px rgba(0,0,0,.8)
}
.youtube-preview-note strong{font-size:13px;color:#fff}
.youtube-preview-note small{font-size:10px;color:#c8d0ca}
.youtube-local-mode .youtube-play{background:#292d2a;border:1px solid rgba(255,255,255,.14)}


/* =========================
   GY.I.K.
   ========================= */
.faq-hero{margin-bottom:18px}
.faq-toolbar{margin:18px 0}
.faq-search{
  min-height:56px;display:flex;align-items:center;gap:10px;
  background:#111111;border:1px solid #2a2a2a;border-radius:6px;padding:0 16px
}
.faq-search:focus-within{border-color:rgba(30,198,91,.68);box-shadow:0 0 0 3px rgba(30,198,91,.07)}
.faq-search>span{color:#59e78b;font-size:21px}
.faq-search input{flex:1;border:0;outline:0;background:transparent;color:#fff}
.faq-search button{border:0;background:transparent;color:#8b938d;font-size:21px}

.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-card{
  overflow:hidden;border-radius:6px;background:#111111;
  border:1px solid rgba(255,255,255,.045);
  transition:border-color .18s ease,box-shadow .18s ease
}
.faq-card:hover{border-color:rgba(30,198,91,.26)}
.faq-card.open{
  border-color:rgba(30,198,91,.40);
  box-shadow:0 18px 40px rgba(0,0,0,.12)
}
.faq-question{
  width:100%;min-height:76px;border:0;background:transparent;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  text-align:left;padding:20px 24px;font-size:17px;font-weight:800
}
.faq-question b{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#1e3927;color:#59e78b;font-size:20px;transition:transform .2s ease
}
.faq-card.open .faq-question b{transform:rotate(180deg)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.faq-card.open .faq-answer{grid-template-rows:1fr}
.faq-answer-inner{
  overflow:hidden;padding:0 24px;color:#d2d7d3;line-height:1.65
}
.faq-card.open .faq-answer-inner{padding-bottom:24px}
.faq-answer-inner p{margin:0 0 12px}
.faq-answer-inner ul{margin:8px 0 14px;padding-left:20px}
.faq-answer-inner li{margin:5px 0}
.faq-answer-inner strong{color:#fff}
.faq-warning{
  margin-top:16px;padding:15px 17px;border-radius:4px;
  background:rgba(30,198,91,.09);border-left:4px solid var(--green);color:#dce8df
}
@media(max-width:760px){
  .faq-question{padding:17px 16px;font-size:15px}
  .faq-answer-inner{padding-left:16px;padding-right:16px}
}


/* =========================
   v11 – fix oldalsáv + belső görgetés + zöld munkacímek
   ========================= */
.category-card{color:var(--text)}
.category-card h3{color:#65ec95}
#jobsView .video-copy h2,
#jobsView .video-copy li,
#jobsView .video-copy li::marker,
#jobsView .resource-link-row strong,
#jobsView .job-list-title{
  color:#65ec95;
}

/* A bal wiki-sáv desktopon mozdulatlan marad, csak a tartalom görgethető.
   CSAK azokra az oldalakra vonatkozik, ahol TÉNYLEG van oldalsáv (az SPA
   főoldala, .page-shell:not(.page-shell--solo)) - a szerveroldali egy-
   hasábos oldalakon (cikk, kategória, jogi, szerkesztő - .page-shell--solo)
   nincs mit fixen tartani, és ez a szabály korábban ott is lezárta a teljes
   body görgetését (html,body{overflow:hidden}), ezért a lábléc (jogi
   linkek) sosem vált elérhetővé görgetéssel. Azokon az oldalakon marad a
   normál, egész oldalas görgetés.
   Csak egérrel használható eszközön (hover+pointer:fine) él: telefonon
   "asztali oldal" módban a böngésző széles ablakot jelez, de ott a zárolt
   body miatt az ujjal húzás nem görgette az oldalt. */
@media (min-width:1151px) and (hover:hover) and (pointer:fine){
  html,body{height:100%;overflow:hidden}
  /* Oldalsáv nélküli oldalak (cikk/kategória/jogi/szerkesztő - lásd a <body
     class="page-solo">-t) nem kapják meg ezt a trükköt: nincs mit fixen
     tartani, és emiatt korábban a teljes body nem volt görgethető, így a
     lábléc (jogi linkek) elérhetetlen volt. Ott marad az egyszerű,
     oldal-szintű görgetés. */
  html.page-solo,body.page-solo{height:auto;overflow:visible}
  .topbar{position:relative;top:auto;flex:none}
  .page-shell:not(.page-shell--solo){
    height:calc(100vh - 124px);
    min-height:0;
    margin:30px auto 0;
    padding-bottom:22px;
    overflow:hidden;
  }
  .page-shell--solo{height:auto;overflow:visible}
  .page-shell:not(.page-shell--solo) .sidebar{
    position:relative;
    top:auto;
    height:100%;
    min-height:0;
    max-height:none;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  /* A kategória-linkek listája nőhet (pl. új kategória hozzáadásakor) – ezért
     ÖNMAGÁBAN görgethető, a fejléc/keresés fent, a lábléc (Interaktív
     közösségi tudástár / © GMR) pedig MINDIG látható marad lent, sosem
     vágódik le a fix magasságú .sidebar overflow:hidden-je miatt. */
  .side-section{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:4px}
  .side-section::-webkit-scrollbar{width:6px}
  .side-section::-webkit-scrollbar-track{background:transparent}
  .side-section::-webkit-scrollbar-thumb{background:#3a5d45;border-radius:4px}
  .side-section{scrollbar-color:#3a5d45 transparent;scrollbar-width:thin}
  .sidebar-foot{margin-top:0;flex:0 0 auto}
  .page-shell:not(.page-shell--solo) .content{
    height:100%;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scroll-behavior:smooth;
    scrollbar-gutter:stable;
    padding-right:10px;
    padding-bottom:80px;
  }
  .content::-webkit-scrollbar{width:10px}
  .content::-webkit-scrollbar-track{background:transparent}
  .content::-webkit-scrollbar-thumb{background:#3a5d45;border-radius:4px;border:2px solid var(--bg)}
  .content::-webkit-scrollbar-thumb:hover{background:#4c7e5b}
  .content{scrollbar-color:#3a5d45 transparent;scrollbar-width:thin}
}

/* Érintőképernyő széles (asztali oldal) módban: a sticky oldalsáv, ha magasabb a
   képernyőnél, nem görgethető, így a kategóriák alja elérhetetlen lenne. Ezért itt
   az oldalsáv az oldallal együtt mozog (normál oldalgörgetés). */
@media (min-width:1151px) and (pointer:coarse), (min-width:1151px) and (hover:none){
  .sidebar{position:relative;top:auto;min-height:0}
}

/* Alacsonyabb desktop kijelzőn összébb húzzuk a fix oldalsávot, hogy ne kelljen görgetni. */
@media (min-width:1151px) and (max-height:820px){
  .sidebar{padding:15px 17px;border-radius:6px}
  .sidebar-head{margin-bottom:2px}
  .sidebar-head h2{font-size:27px}
  .editor-link{padding:5px 9px;font-size:11px;gap:5px}
  .sidebar-search{margin:5px 0 8px;padding:8px 11px}
  .side-section{gap:3px}
  .side-link{padding:7px 11px;font-size:12px}
  .sidebar-foot{padding-top:9px;gap:3px;font-size:10px}

  .server-stats{height:400px;padding:20px}
  .stats-head h3{font-size:22px;margin-top:5px}
  .stat-cards{margin:14px 0 8px;gap:8px}
  .mini-stat{padding:10px 12px}
  .mini-stat strong{font-size:20px}
  .mini-stat strong b{font-size:23px}
  .chart-panel{padding:12px 12px 9px}
}

/* Keresési eredmény típusjelölések */
.search-type{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:5px;
  color:#65ec95;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase
}
.list-item.search-hit h3{color:#eef8f1}
.list-item.search-hit em{font-style:normal;color:#65ec95;font-weight:800}
.search-result-meta{margin-top:7px;color:#74837a;font-size:10px;font-weight:700}



/* =========================
   FRAKCIÓK
   ========================= */
.factions-hero{margin-bottom:20px}
.faction-type-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.faction-type-card{
  position:relative;
  min-height:320px;
  overflow:hidden;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.05);
  background:#111111;
  color:#fff;
  padding:0;
  text-align:left;
  transition:.2s ease;
}
.faction-type-card:hover{
  transform:translateY(-5px);
  border-color:rgba(30,198,91,.40);
  box-shadow:0 22px 50px rgba(0,0,0,.18);
}
.faction-type-art{
  height:145px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.faction-type-art:before,
.faction-type-art:after{
  content:"";
  position:absolute;
  border-radius:50%;
}
.faction-type-art:before{
  width:190px;height:190px;
  right:-40px;top:-55px;
  background:rgba(30,198,91,.11);
}
.faction-type-art:after{
  width:110px;height:110px;
  left:-25px;bottom:-45px;
  border:1px solid rgba(30,198,91,.10);
}
.faction-type-icon{
  position:relative;
  z-index:1;
  width:80px;height:80px;
  border-radius:6px;
  display:grid;place-items:center;
  font-size:34px;
  background:rgba(30,198,91,.12);
  border:1px solid rgba(30,198,91,.20);
  color:#62ee94;
}
.faction-type-copy{padding:23px 24px 25px}
.faction-type-kicker{
  display:block;
  margin-bottom:7px;
  color:#5de98e;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
}
.faction-type-copy h2{
  margin:0 0 9px;
  font-size:25px;
  color:#fff;
}
.faction-type-copy p{
  margin:0 0 22px;
  color:#aeb7b1;
  line-height:1.55;
  min-height:48px;
}
.faction-type-link{
  color:#5ce98d;
  font-size:12px;
  font-weight:900;
}
.faction-type-card.illegal .faction-type-art{
  background:linear-gradient(145deg,rgba(30,198,91,.10),rgba(7,22,13,.86));
}
.faction-type-card.legal .faction-type-art{
  background:linear-gradient(145deg,rgba(53,178,101,.13),rgba(9,29,18,.90));
}
.faction-type-card.state .faction-type-art{
  background:linear-gradient(145deg,rgba(76,226,131,.14),rgba(8,26,16,.90));
}

.faction-list-panel{
  margin-top:20px;
  padding:28px;
  border-radius:6px;
  background:#111111;
  border:1px solid rgba(255,255,255,.045);
}
.faction-list-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom:20px;
}
.faction-list-head h2{
  margin:5px 0 7px;
  font-size:31px;
}
.faction-list-head p{
  margin:0;
  color:#9fa9a2;
}
.faction-back{
  border:1px solid rgba(30,198,91,.25);
  background:rgba(30,198,91,.07);
  color:#62e992;
  padding:10px 13px;
  border-radius:4px;
  font-size:11px;
  font-weight:900;
}
.faction-back:hover{
  background:var(--green);
  color:#07130b;
}
.faction-placeholder-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.faction-placeholder-card{
  min-height:155px;
  border-radius:6px;
  background:#0f0f0f;
  border:1px solid rgba(255,255,255,.04);
  padding:18px;
}
.faction-placeholder-index{
  display:inline-grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:4px;
  background:#1ec65b;
  color:#07130b;
  font-weight:900;
  margin-bottom:18px;
}
.faction-placeholder-card small{
  display:block;
  color:#5ee98e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.9px;
}
.faction-placeholder-card strong{
  display:block;
  margin-top:4px;
  font-size:17px;
}
.faction-placeholder-card p{
  margin:8px 0 0;
  color:#8f9992;
  font-size:12px;
  line-height:1.5;
}

@media(max-width:1000px){
  .faction-type-grid,
  .faction-placeholder-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:760px){
  .faction-type-card{min-height:auto}
  .faction-type-art{height:120px}
  .faction-list-head{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* v14 – közvetlen frakciólista */
.faction-direct-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.faction-card{
  width:100%;
  min-height:110px;
  display:grid;
  grid-template-columns:62px 1fr 28px;
  align-items:center;
  gap:15px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:6px;
  background:#0f0f0f;
  color:#fff;
  text-align:left;
  padding:16px;
  transition:.18s ease;
}
.faction-card:hover{
  transform:translateY(-2px);
  border-color:rgba(30,198,91,.36);
  background:#272b28;
}
.faction-card-logo{
  width:62px;height:62px;
  border-radius:4px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#1ec65b,#159849);
  color:#07130b;
  font-weight:900;
  font-size:18px;
  box-shadow:0 10px 25px rgba(30,198,91,.12);
}
.faction-card-copy{min-width:0}
.faction-card-copy small{
  display:block;
  color:#5ce98d;
  font-size:9px;
  font-weight:900;
  letter-spacing:.8px;
}
.faction-card-copy strong{
  display:block;
  margin-top:4px;
  font-size:18px;
}
.faction-card-copy p{
  margin:6px 0 0;
  color:#929d96;
  font-size:12px;
  line-height:1.45;
}
.faction-card-arrow{
  color:#5ce98d;
  font-size:22px;
  font-weight:900;
}
.faction-empty{
  padding:36px 24px;
  border-radius:6px;
  background:#0f0f0f;
  border:1px dashed rgba(30,198,91,.22);
  text-align:center;
}
.faction-empty strong{
  display:block;
  color:#fff;
  font-size:18px;
}
.faction-empty span{
  display:block;
  margin-top:7px;
  color:#8f9992;
  line-height:1.5;
}

.faction-detail-panel{
  margin-top:20px;
  padding:28px;
  border-radius:6px;
  background:#111111;
  border:1px solid rgba(255,255,255,.045);
}
.faction-detail-back{
  border:1px solid rgba(30,198,91,.25);
  background:rgba(30,198,91,.07);
  color:#62e992;
  padding:10px 13px;
  border-radius:4px;
  font-size:11px;
  font-weight:900;
  margin-bottom:22px;
}
.faction-detail-back:hover{
  background:var(--green);
  color:#07130b;
}
.faction-detail-hero{
  display:flex;
  align-items:center;
  gap:20px;
  padding:22px;
  border-radius:6px;
  background:linear-gradient(135deg,rgba(30,198,91,.11),rgba(30,198,91,.03));
  border:1px solid rgba(30,198,91,.12);
}
.faction-detail-logo{
  width:88px;height:88px;
  flex:none;
  display:grid;place-items:center;
  border-radius:6px;
  background:linear-gradient(145deg,#1ec65b,#159849);
  color:#07130b;
  font-size:23px;
  font-weight:900;
}
.faction-detail-hero h2{
  margin:5px 0 7px;
  font-size:31px;
}
.faction-detail-hero p{
  margin:0;
  color:#a8b2ab;
}
.faction-detail-body{
  margin-top:18px;
  padding:24px;
  border-radius:6px;
  background:#0f0f0f;
  color:#d2d7d3;
  line-height:1.7;
}
.faction-detail-body h3{
  color:#61eb92;
}
.faction-detail-empty{
  text-align:center;
  padding:20px;
}
.faction-detail-empty strong{
  display:block;
  color:#fff;
  font-size:18px;
}
.faction-detail-empty span{
  display:block;
  margin-top:7px;
  color:#909b94;
}

@media(max-width:900px){
  .faction-direct-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .faction-detail-hero{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================
   v15 – Interaktív billentyűzet
   ========================= */
.interactive-keyboard-poster{
  padding:18px;
  background:
    radial-gradient(circle at 18% 0%,rgba(30,198,91,.08),transparent 30%),
    #111111;
}
.keyboard-help{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  max-width:460px;
  color:#aab5ad;
  font-size:12px;
  line-height:1.45;
  text-align:right;
}
.keyboard-help strong{color:#65ed95}
.keyboard-help-dot{
  width:9px;height:9px;border-radius:50%;
  background:#3ce879;
  box-shadow:0 0 0 5px rgba(60,232,121,.08),0 0 18px rgba(60,232,121,.35);
  flex:none;
}

/* Telefonon a billentyűzet nem zsugorodik olvashatatlanra:
   olvasható méretben marad, és oldalra húzva nézhető végig.
   Így a hotspotok érintőfelülete is használható marad. */
.keyboard-scroll{
  border-radius:6px;
}
.keyboard-swipe-hint{
  display:none;
  margin:8px 0 0;
  text-align:center;
  font-size:11px;
  font-weight:700;
  color:#7d9287;
  letter-spacing:.3px;
}

.keyboard-visual{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  background:#101612;
  border:1px solid rgba(78,233,132,.13);
  box-shadow:inset 0 0 35px rgba(0,0,0,.28);
}
.keyboard-visual>img{
  display:block;
  width:100%;
  height:auto;
  /* Valódi méret 1385x405px. Enélkül a magasság csak a kép letöltése UTÁN
     dől el (width:100%/height:auto miatt), ami észrevehető elrendezés-
     ugrást okoz a Billentyűzet nézet megnyitásakor – az aspect-ratio a
     helyet a letöltés ELŐTT, a konténer aktuális szélessége alapján
     lefoglalja, a reszponzív/görgethető méretezés megtartásával. */
  aspect-ratio:1385/405;
  border-radius:0;
  user-select:none;
  pointer-events:none;
}
.keyboard-hotspots{
  position:absolute;
  inset:0;
  z-index:4;
}
.keyboard-hotspot{
  position:absolute;
  border:0;
  border-radius:2px;
  background:rgba(50,255,116,.015);
  outline:1px solid transparent;
  cursor:pointer;
  transition:
    background .12s ease,
    outline-color .12s ease,
    box-shadow .12s ease,
    transform .12s ease;
}
.keyboard-hotspot:hover,
.keyboard-hotspot:focus,
.keyboard-hotspot.is-active{
  background:rgba(65,255,126,.24);
  outline:2px solid rgba(100,255,152,.95);
  box-shadow:
    0 0 0 3px rgba(49,238,112,.14),
    0 0 24px rgba(49,238,112,.72),
    inset 0 0 14px rgba(112,255,159,.22);
  transform:scale(1.06);
  z-index:8;
}

.keyboard-active-info{
  margin-top:12px;
  min-height:72px;
  display:grid;
  grid-template-columns:58px 1fr;
  align-items:center;
  gap:13px;
  padding:12px 14px;
  border-radius:4px;
  background:linear-gradient(135deg,rgba(30,198,91,.08),rgba(30,198,91,.025));
  border:1px solid rgba(30,198,91,.15);
}
.keyboard-active-key{
  min-width:54px;
  height:46px;
  padding:0 7px;
  display:grid;
  place-items:center;
  border-radius:4px;
  background:linear-gradient(180deg,#22d665,#16ad50);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 8px 18px rgba(30,198,91,.12);
  color:#06120a;
  font-weight:900;
  font-size:12px;
  text-align:center;
}
.keyboard-active-info small{
  display:block;
  color:#56e78a;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}
.keyboard-active-info strong{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:14px;
}
.keyboard-active-info p{
  margin:3px 0 0;
  color:#8f9c93;
  font-size:11px;
}

.keybind-card{
  position:relative;
  overflow:hidden;
}
.keybind-match-indicator{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%) translateX(8px);
  opacity:0;
  color:#07130b;
  font-size:19px;
  font-weight:900;
  transition:.16s ease;
}
.keybind-card.is-key-match{
  border-color:#48ed84 !important;
  background:
    linear-gradient(135deg,rgba(49,226,111,.27),rgba(30,198,91,.10)),
    #111111 !important;
  box-shadow:
    0 0 0 2px rgba(63,239,125,.12),
    0 0 30px rgba(31,214,91,.35),
    inset 0 0 30px rgba(62,238,124,.08);
  transform:translateY(-2px) scale(1.015);
}
.keybind-card.is-key-match .keycap{
  background:linear-gradient(180deg,#6dff9f,#27df6b);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.16),
    0 0 20px rgba(85,255,144,.55);
}
.keybind-card.is-key-match small{
  color:#7bffa8;
}
.keybind-card.is-key-match strong{
  color:#fff;
  text-shadow:0 0 14px rgba(88,255,145,.24);
}
.keybind-card.is-key-match .keybind-match-indicator{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.keybind-card.is-key-clicked{
  animation:keybindPulse .85s ease;
}
@keyframes keybindPulse{
  0%,100%{filter:brightness(1)}
  45%{filter:brightness(1.38)}
}

@media(max-width:760px){
  .keyboard-help{
    justify-content:flex-start;
    text-align:left;
    max-width:none;
  }
  .keyboard-poster-head{
    gap:12px;
  }
  .keyboard-active-info{
    grid-template-columns:50px 1fr;
  }
  .keyboard-active-key{
    min-width:48px;
    height:42px;
  }
  /* Telefonon nincs hover, de a billentyűk érintéssel kattinthatók. */
  .keyboard-hotspot{
    min-width:18px;
    min-height:18px;
  }
}


/* =========================
   v15.3 – Kompakt billentyűzet nézet
   ========================= */
#controlsView .resource-hero{
  margin-bottom:14px;
}
.interactive-keyboard-poster{
  padding:14px;
  margin-bottom:12px;
}
.keyboard-poster-head{
  padding:2px 2px 12px;
}
.keyboard-poster-head h2{
  font-size:24px;
}
.keyboard-help{
  font-size:11px;
  max-width:390px;
}
.keyboard-visual{
  border-radius:4px;
}
.keyboard-hotspot{
  border-radius:2px;
}
.keyboard-hotspot:hover,
.keyboard-hotspot:focus,
.keyboard-hotspot.is-active{
  transform:scale(1.03);
  box-shadow:
    0 0 0 2px rgba(49,238,112,.14),
    0 0 14px rgba(49,238,112,.60),
    inset 0 0 10px rgba(112,255,159,.18);
}
.keyboard-active-info{
  margin-top:10px;
  min-height:62px;
  gap:11px;
  padding:10px 12px;
}
.keyboard-active-key{
  min-width:50px;
  height:42px;
  font-size:11px;
}
.keyboard-active-info strong{
  font-size:13px;
}
.keyboard-active-info p{
  font-size:10px;
}

.controls-toolbar{
  margin:10px 0 10px;
}
.controls-search{
  min-height:48px;
  padding:0 14px;
  border-radius:4px;
}
.controls-search > span{
  font-size:18px;
}
.controls-search button{
  font-size:18px;
}

.keybind-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  max-height:430px;
  overflow-y:auto;
  padding-right:4px;
  align-content:start;
  scroll-behavior:smooth;
}
.keybind-grid::-webkit-scrollbar{
  width:8px;
}
.keybind-grid::-webkit-scrollbar-track{
  background:rgba(255,255,255,.03);
  border-radius:4px;
}
.keybind-grid::-webkit-scrollbar-thumb{
  background:rgba(92,232,141,.35);
  border-radius:4px;
}
.keybind-grid::-webkit-scrollbar-thumb:hover{
  background:rgba(92,232,141,.55);
}

.keybind-card{
  min-height:74px;
  padding:12px;
  border-radius:4px;
  grid-template-columns:58px 1fr;
  gap:10px;
  scroll-margin:10px;
}
.keycap{
  min-width:54px;
  min-height:42px;
  padding:6px 7px;
  border-radius:4px;
  font-size:11px;
}
.keybind-card strong{
  font-size:11px;
  line-height:1.33;
}
.keybind-card small{
  font-size:8px;
}
.keybind-match-indicator{
  right:10px;
  font-size:16px;
}

.tips-grid{
  margin-top:12px;
}

@media(max-width:1400px){
  .keybind-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-height:410px;
  }
}

@media(max-width:980px){
  .keybind-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
}

@media(max-width:760px){
  .interactive-keyboard-poster{
    padding:10px;
  }
  .keyboard-poster-head h2{
    font-size:22px;
  }
  .controls-search{
    min-height:44px;
  }
}


/* =========================
   v15.4 – Kisebb, arányosabb bind kártyák
   ========================= */
.keybind-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  max-height:385px;
  overflow-y:auto;
  padding:6px 10px 10px 6px;
  align-content:start;
  scrollbar-gutter:stable;
}

.keybind-card{
  min-height:64px;
  padding:10px 12px;
  border-radius:4px;
  grid-template-columns:54px 1fr;
  gap:10px;
}

.keycap{
  min-width:50px;
  min-height:38px;
  padding:5px 6px;
  border-radius:4px;
  font-size:10px;
}

.keybind-card small{
  font-size:8px;
  letter-spacing:.8px;
}

.keybind-card strong{
  font-size:10.5px;
  line-height:1.28;
}

.keybind-match-indicator{
  right:9px;
  font-size:14px;
}

.keybind-card.is-key-match{
  border-color:#48ed84 !important;
  background:
    linear-gradient(135deg,rgba(49,226,111,.22),rgba(30,198,91,.08)),
    #111111 !important;
  box-shadow:
    0 0 0 1px rgba(72,237,132,.45),
    inset 0 0 0 1px rgba(95,255,154,.16),
    inset 0 0 24px rgba(62,238,124,.07);
  transform:translateY(-1px);
}

.keybind-card.is-key-match .keycap{
  background:linear-gradient(180deg,#61f996,#23d865);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.16),
    0 0 12px rgba(85,255,144,.30);
}

.controls-search{
  min-height:46px;
  border-radius:4px;
}

@media(min-width:1500px){
  .keybind-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    max-height:370px;
  }
}

@media(max-width:1200px){
  .keybind-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    max-height:390px;
  }
}

@media(max-width:980px){
  .keybind-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-height:none;
    overflow:visible;
    padding:0;
  }
}

@media(max-width:760px){
  .keybind-card{
    min-height:68px;
  }
}


/* =========================
   AKADÁLYMENTESÍTÉS
   ========================= */

/* Csökkentett mozgás: aki a rendszerében kikapcsolta az animációkat,
   annál se fusson átmenet, animáció vagy lágy görgetés. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
}

/* Egységes, jól látható fókuszjelzés billentyűzetes navigációhoz. */
:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid #64ff98;
  outline-offset:2px;
  border-radius:4px;
}


/* =========================
   BILLENTYŰZET TÉRKÉP MOBILON
   ========================= */

/* A kép 1385x405 px, azaz nagyon széles. Telefon szélességre zsugorítva a
   billentyűk ~8px-esek lennének, a hotspotok érintőfelülete pedig ~9px –
   ujjal eltalálhatatlan, ezért tűnt elcsúszottnak.

   Megoldás: a billentyűzet olvasható minimális szélességen marad, és a
   keretén belül vízszintesen görgethető. A kép és a hotspot-réteg együtt
   méreteződik, így az igazítás pontos marad. */
@media (max-width:1000px){
  .keyboard-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scrollbar-color:#3a5d45 transparent;
  }
  .keyboard-scroll::-webkit-scrollbar{height:7px}
  .keyboard-scroll::-webkit-scrollbar-track{background:transparent}
  .keyboard-scroll::-webkit-scrollbar-thumb{background:#3a5d45;border-radius:4px}

  /* 1000px-es billentyűzetnél a hotspotok ~27x26px-esek – ujjal is
     eltalálhatók. Kisebb kijelzőn 900px, hogy ne kelljen túl sokat húzni. */
  .keyboard-visual{
    min-width:1000px;
  }
}

@media (max-width:560px){
  .keyboard-visual{
    min-width:900px;
  }
}

/* A tippet a JS kapcsolja be, ha a keret tényleg görgethető. */
.keyboard-swipe-hint.is-visible{
  display:block;
}

/* Érintésnél nincs hover, ezért a kiválasztott billentyű jelölése
   határozottabb, és a találati felület is nagyobb. */
@media (hover:none){
  .keyboard-hotspot{
    background:rgba(50,255,116,.06);
    outline-color:rgba(82,232,135,.28);
  }
  .keyboard-hotspot.is-active{
    background:rgba(50,255,116,.3);
  }
}


/* =========================
   INGATLAN ÚTMUTATÓK
   (cikkek kész HTML törzzsel: listák, kereszthivatkozások)
   ========================= */

.article-body ol{padding-left:22px;margin:14px 0}
.article-body ul{margin:14px 0}
.article-body li{margin:6px 0}
.article-body li::marker{color:var(--green)}
.article-body strong{color:#eafff0}
.article-body section{margin-top:6px}

/* Kereszthivatkozás másik útmutatóra. */
.guide-link{
  color:#5ceb92;
  font-weight:700;
  border-bottom:1px solid rgba(92,235,146,.32);
  transition:color .15s ease,border-color .15s ease;
}
.guide-link:hover{
  color:#8bf7b5;
  border-bottom-color:rgba(139,247,181,.7);
}

/* A cikk végén a többi ingatlan-téma. */
.guide-related{
  margin-top:38px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.07);
}
.guide-related h2{font-size:22px !important;margin-top:0 !important}
.guide-related-links{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}
.guide-related-links a{
  padding:9px 15px;
  border-radius:4px;
  background:rgba(7,24,14,.5);
  border:1px solid rgba(255,255,255,.09);
  color:#d3ecdb;
  font-size:13px;
  font-weight:700;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.guide-related-links a:hover{
  background:rgba(30,198,91,.16);
  border-color:rgba(46,220,108,.5);
  color:#8bf7b5;
}

@media (max-width:760px){
  .article-body ol,.article-body ul{padding-left:20px}
  .guide-related-links a{font-size:12.5px;padding:8px 13px}
}


/* =========================================================
   WIKI-SZERKESZTŐBEN KÉSZÜLT CIKKEK
   A blokk-renderer ezeket az osztályokat állítja elő.
   ========================================================= */

/* --- táblázat --- */
.article-body .wiki-table-wrap{
  overflow-x:auto;margin:22px 0;border-radius:4px;border:1px solid var(--line);
}
.article-body .wiki-table{
  width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px;
}
.article-body .wiki-table th{
  background:var(--panel-2);color:#eafff0;text-align:left;
  padding:12px 14px;font-weight:700;border-bottom:1px solid var(--line);
}
.article-body .wiki-table td{
  padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:#d1d1d1;
}
.article-body .wiki-table tr:last-child td{border-bottom:0}
.article-body .wiki-table tbody tr:hover td{background:rgba(30,198,91,.045)}

/* --- kép --- */
.article-body .wiki-figure{margin:22px auto;text-align:center}
.article-body .wiki-figure img{
  max-width:100%;height:auto;border-radius:4px;display:block;margin:0 auto;
}
.article-body .wiki-figure figcaption{
  margin-top:9px;font-size:12.5px;color:#9aa49d;
}
.article-body .wiki-figure--sm{max-width:340px}
.article-body .wiki-figure--md{max-width:560px}
.article-body .wiki-figure--lg{max-width:820px}
.article-body .wiki-figure--full{max-width:100%}

/* --- balra/jobbra úsztatott kép: a szöveg körbefolyja, klasszikus fórum-
   szerkesztő minta (phpBB/vBulletin "kép balra/jobbra igazítása"). --- */
.article-body .wiki-figure--left{float:left;margin:6px 24px 16px 0;text-align:left}
.article-body .wiki-figure--right{float:right;margin:6px 0 16px 24px;text-align:left}
.article-body .wiki-figure--left img,
.article-body .wiki-figure--right img{margin:0}

/* --- cikkbe ágyazott videó --- */
.article-body .video-frame{margin:22px 0;border-radius:6px;overflow:hidden}
.article-body .wiki-hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.article-body .guide-tip{margin:22px 0}

/* --- a nézetek alján megjelenő cikklista --- */
.wiki-extra-articles{margin-top:30px}

@media (max-width:760px){
  .article-body .wiki-table{font-size:13px}
  .article-body .wiki-table th,.article-body .wiki-table td{padding:9px 11px}
  .article-body .wiki-figure--sm,
  .article-body .wiki-figure--md,
  .article-body .wiki-figure--lg{max-width:100%}
  .article-body .wiki-figure--left,
  .article-body .wiki-figure--right{float:none;margin:16px auto;text-align:center}
}

/* --- karakterek blokk (kép + név, kattintható kártyák) --- */
.article-body .wiki-character-grid{
  display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:14px;margin:22px 0;
}
.article-body .wiki-character-grid--cols-2{--cols:2}
.article-body .wiki-character-grid--cols-3{--cols:3}
.article-body .wiki-character-grid--cols-4{--cols:4}
.article-body .wiki-character-grid--cols-5{--cols:5}
.article-body .wiki-character-grid--cols-6{--cols:6}
.article-body .wiki-character-card{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px;border-radius:4px;text-align:center;
  background:var(--panel-2,#171717);border:1px solid var(--line);
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
}
.article-body .wiki-character-card:hover{
  border-color:rgba(30,198,91,.5);transform:translateY(-3px);background:rgba(30,198,91,.06);
}
.article-body .wiki-character-card img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block;
}
.article-body .wiki-character-card span{font-weight:700;font-size:13.5px;color:var(--text)}
.article-body .wiki-character-card small{display:block;color:var(--dim,#9aa5a0);font-size:12px;line-height:1.4}

@media (max-width:760px){
  .article-body .wiki-character-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* --- "Karakterek" kategórialista: egyedi kártyarács + helyi kereső ---
   A generikus .article-list (sima soros lista) helyett ez a rács jelenik
   meg, amikor a listView a Karakterek kategóriát mutatja (lásd script.js
   openCharacterCategory/renderCharacterList). */
.list-search{
  display:flex;align-items:center;gap:8px;
  border:1px solid #2a2a2a;background:var(--panel);
  padding:13px 16px;border-radius:4px;margin:0 0 18px;
}
.list-search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:14.5px}
.list-search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(30,198,91,.18)}

.article-list.article-list--characters{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}
@media (min-width:760px){
  /* Teljes képernyőn (tartalom-oszlop szélességénél) 3 kártya férjen egy sorba. */
  .article-list.article-list--characters{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.character-card{
  display:flex;flex-direction:row;align-items:stretch;text-align:left;gap:16px;
  width:100%;border:1px solid #2a2a2a;background:var(--panel);
  border-radius:6px;padding:14px;color:#fff;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
}
.character-card:hover{border-color:var(--green);transform:translateY(-3px);background:rgba(30,198,91,.06)}
.character-card-portrait{width:112px;aspect-ratio:3/4;border-radius:4px;overflow:hidden;flex:0 0 auto}
.character-card-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.character-card-fallback{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a482a,#1ec65b 150%);
  color:#fff;font-weight:800;font-size:32px;
}
.character-card-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;overflow:hidden}
.character-card-copy strong{
  display:block;font-size:18px;font-weight:800;margin-bottom:6px;line-height:1.25;
  overflow-wrap:anywhere;word-break:break-word;
}
.character-card-copy p{margin:0;color:#aaa;font-size:13px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}

/* =====================================================
   Szerveroldalon renderelt cikkoldal (cikk.php, /cikk/<slug>)
   Az oldal ugyanezt a stíluslapot használja, mint az egyoldalas
   felület – csak az a néhány szabály kell hozzá, ami ott nincs.
   ===================================================== */

/* Nincs bal oldali menü, tehát a rács egyhasábos. */
.page-shell--solo{grid-template-columns:1fr}

/* A YouTube-előnézet ezen az oldalon valódi link (nincs JS, ami lejátszót
   töltene be), de nem szabad aláhúzott, kék linknek látszania. */
.youtube-preview-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

/* =====================================================
   Jogi lábléc
   ===================================================== */

.site-footer{
  border-top:1px solid var(--line);
  margin-top:60px;
  padding:28px 24px 40px;
  background:rgba(0,0,0,.14);
}
.site-footer-inner{max-width:1500px;margin:0 auto}
.site-footer-links{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  margin-bottom:14px;
}
.site-footer-links a{
  color:#9fb6a8;font-size:13.5px;font-weight:600;
  text-decoration:none;border-bottom:1px solid transparent;
}
.site-footer-links a:hover{color:var(--green);border-bottom-color:rgba(30,198,91,.5)}
.site-footer-note{
  margin:0;color:#7e8b83;font-size:12.5px;line-height:1.65;max-width:70ch;
}

/* =====================================================
   Jogi oldalak (jogi.php)
   ===================================================== */

.legal-lead{margin:10px 0 0;color:#aab6ae;font-size:16px;line-height:1.6;max-width:70ch}

/* A jogi szöveg hosszú és sűrű – a mérete és a sortávja szándékosan
   olvasásra van hangolva, nem a wiki-cikkek ritmusára. */
.legal-body{max-width:78ch}
.legal-body h2{margin:38px 0 12px;font-size:23px;color:#eaffef}
.legal-body h3{margin:24px 0 8px;font-size:17px;color:#cfe8d8}
.legal-body p{line-height:1.75;margin:0 0 14px}
.legal-body ul{line-height:1.75;margin:0 0 16px;padding-left:22px}
.legal-body li{margin-bottom:7px}
.legal-body table th{white-space:nowrap;vertical-align:top}
.legal-body code{
  background:#2a2b2b;padding:2px 7px;border-radius:2px;font-size:13px;
}

/* Kitöltetlen helyőrzők figyelmeztetése. Feltűnőnek KELL lennie: félkész
   jogi szöveget nem szabad véglegesnek látszani hagyni. */
.legal-draft{
  margin:22px 0 8px;padding:18px 22px;border-radius:6px;
  background:rgba(214,138,30,.12);
  border:1px solid rgba(232,164,54,.42);
}
.legal-draft strong{display:block;color:#ffc978;margin-bottom:8px;font-size:15px}
.legal-draft p{margin:0 0 8px;color:#d9c3a3;font-size:13.5px;line-height:1.65}
.legal-draft p:last-child{margin-bottom:0}
.legal-draft code{background:rgba(0,0,0,.3);padding:2px 7px;border-radius:2px}

/* A Frakciók nyitóoldalán, a kategóriakártyák alatt álló áttekintő cikkek.
   Nincs külön címsora – szándékosan, mert nem "kapcsolódó" tartalom, hanem
   maga a kategória áttekintője. */
.faction-overview-articles{margin-top:22px}


/* =========================================================
   Streamerek oldal
   Egy oszlop, egymás alatt – az élők legfelül, erős kiemeléssel.
   ========================================================= */
.streamer-list{
  display:flex;flex-direction:column;gap:14px;
}
.streamer-card{
  display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:6px;
  width:100%;
  background:#111111;border:1px solid rgba(255,255,255,.06);
  transition:border-color .2s ease,background .2s ease;
}
.streamer-card--live{
  border-color:rgba(233,58,90,.55);
  background:linear-gradient(135deg,rgba(233,58,90,.12),rgba(41,42,42,1) 55%);
  box-shadow:0 0 0 1px rgba(233,58,90,.15),0 14px 34px rgba(233,58,90,.12);
}
.streamer-avatar{
  width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
  background:#1c1d1d;
}
.streamer-avatar--empty{
  display:grid;place-items:center;color:#8b9c90;font-weight:900;font-size:24px;
}
.streamer-card--live .streamer-avatar{
  box-shadow:0 0 0 3px rgba(233,58,90,.6),0 0 18px rgba(233,58,90,.35);
}
.streamer-body{min-width:0;flex:1}
.streamer-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.streamer-name-row h3{margin:0;font-size:19px;color:#f4fff7}
.streamer-live-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(233,58,90,.16);color:#ff97ab;
  padding:3px 10px;border-radius:4px;font-size:11.5px;font-weight:900;
  letter-spacing:.4px;animation:streamer-live-pulse 1.8s ease-in-out infinite;
}
@keyframes streamer-live-pulse{0%,100%{opacity:1}50%{opacity:.55}}
/* Offline: szándékosan halvány, semleges - nem hiba, csak tájékoztatás. */
.streamer-offline-badge{
  display:inline-flex;align-items:center;
  background:rgba(255,255,255,.06);color:#8b9c90;
  padding:3px 10px;border-radius:4px;font-size:11.5px;font-weight:800;
  letter-spacing:.4px;
}
.streamer-live-title{margin:4px 0 0;color:#ffc7d0;font-size:13.5px;font-style:italic}
.streamer-desc{margin:6px 0 0;color:#c3c9c5;font-size:14.5px;line-height:1.55}
.streamer-desc a{color:#8bf7b5;text-decoration:underline}
.streamer-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
/* A Twitch-link a streamer FŐ hivatkozása – ez SOSEM zsugorodik ikon-only
   állapotra (ellentétben a többi közösségimédia-linkkel lentebb), a szöveg
   mindig látszik, bármilyen szűk is a képernyő. */
.streamer-twitch-link{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  background:rgba(145,71,255,.16);color:#c9a8ff;
  padding:6px 13px;border-radius:4px;font-weight:800;font-size:12.5px;
  text-decoration:none;white-space:nowrap;
}
.streamer-twitch-link svg{width:15px;height:15px;flex:none}
.streamer-twitch-link:hover{background:rgba(145,71,255,.26);color:#dcc4ff}

/*
 * Közösségimédia-linkek: amíg elfér, ikon + platformnév (mint egy chip),
 * szűk nézetben (lásd media query lent) csak az ikon marad - így a sor
 * sosem törik szét zavaróan sok kártyaelem között.
 * Minden platform a SAJÁT márkaszínét kapja, hogy első pillantásra
 * megkülönböztethetők legyenek egymástól, de a sötét panelen belül maradva.
 */
.streamer-social{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:4px;font-weight:800;font-size:12.5px;
  background:rgba(255,255,255,.06);text-decoration:none;
  transition:background .15s ease,filter .15s ease;
}
.streamer-social svg{width:15px;height:15px;flex:none}
.streamer-social:hover{filter:brightness(1.15)}
.streamer-social--youtube{color:#ff5f5f;background:rgba(255,0,0,.12)}
.streamer-social--facebook{color:#7db2ff;background:rgba(24,119,242,.14)}
.streamer-social--discord{color:#a7b3ff;background:rgba(88,101,242,.16)}
.streamer-social--instagram{color:#ff9fc4;background:rgba(225,48,108,.16)}
.streamer-social--x{color:#e7e9ea;background:rgba(255,255,255,.09)}
.streamer-social--kick{color:#6bff3a;background:rgba(83,252,24,.12)}
.streamer-social--tiktok{color:#ff7aa2;background:rgba(254,44,85,.13)}

@media (max-width:640px){
  .streamer-card{flex-direction:column;align-items:flex-start;padding:18px}
}
/* Szűk helyen csak az ikon marad a közösségimédia-linkeken - a chip
   kerekre zsugorodik, hogy a sor ne törjön össze sok platform esetén. */
@media (max-width:700px){
  .streamer-social{padding:6px;width:27px;height:27px}
  .streamer-social-label{display:none}
}

/* =========================================================
   Cikkíró profil (szerkeszto.php)
   ========================================================= */
/* A cikk-hero (.article-hero) nagy, hosszú szövegre méretezett zöld sávja
   túl sok helyet foglalna egy névből + egy jelvényből álló fejlécnek –
   itt kb. harmadára csökkentjük, és a portré méretét/arányát külön,
   nagyobb specifikussággal állítjuk, hogy tényleg pontos kör legyen
   (a megosztott .article-hero-portrait szélessége/magassága eltérő,
   ovális lenne kör helyett). */
.author-hero{padding:18px 28px;gap:20px;margin-bottom:20px}
.author-hero .article-category{margin-bottom:0}
.author-hero h1{font-size:26px;margin:8px 0 0;line-height:1.2}
.author-hero .author-avatar{
  flex:none;width:88px;height:88px;aspect-ratio:1/1;
  border-radius:50%;object-fit:cover;object-position:center;
  border:3px solid rgba(255,255,255,.28);box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.author-avatar{border-radius:50%;object-fit:cover}
.author-stats{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0}
.author-stat{
  flex:1;min-width:160px;padding:18px 20px;border-radius:6px;
  background:#111111;border:1px solid rgba(255,255,255,.06);
}
.author-stat strong{display:block;font-size:28px;color:#f4fff7;line-height:1.15}
.author-stat span{display:block;margin-top:4px;color:#9ca49f;font-size:13px}
.author-search-box{
  min-height:52px;display:flex;align-items:center;gap:10px;
  background:#111111;border:1px solid #2a2a2a;border-radius:6px;padding:0 16px;
  margin-bottom:14px;
}
.author-search-box:focus-within{border-color:rgba(30,198,91,.68);box-shadow:0 0 0 3px rgba(30,198,91,.07)}
.author-search-box>span{color:#59e78b;font-size:19px}
.author-search-box input{flex:1;border:0;outline:0;background:transparent;color:#fff;padding:12px 0}
.author-article-item.hidden{display:none}

@media (max-width:640px){
  .author-stats{flex-direction:column}
}

/* Cikkíró rang-jelvény (szerkeszto.php) */
.author-rank-badge{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:6px 13px;border-radius:4px;font-weight:800;font-size:13px;
  color:var(--rank-color,#8b9c90);
  /* Egységes fekete háttér: a zöld hero-sávon a sötétebb rangszínek is olvashatók maradnak. */ background:#0b0b0b;
  border:1px solid color-mix(in srgb, var(--rank-color,#8b9c90) 55%, #0b0b0b);box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* ---------- Süti-hozzájárulási sáv (assets/consent.js) ----------
   Alul megjelenő, széles, jól látható sáv – de NEM modal: nincs sötétített
   háttér és nincs görgetés-zár, az oldal mögötte végig használható. (A
   korábbi teljes képernyős változat lezárta a görgetést; ha egy reklám-
   blokkoló elrejtette az ablakot, a zár bent ragadt, és az oldal nem volt
   görgethető.) Amíg a sáv látszik, az oldal alja a sáv magasságával
   megtoldódik (--cookie-consent-h, a consent.js méri), így semmi nem marad
   mögötte elérhetetlenül. */
.cookie-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  display:flex;justify-content:center;
  padding:0 16px 16px;
  pointer-events:none;
}
.cookie-consent[hidden]{display:none}
html.cookie-consent-open body{padding-bottom:var(--cookie-consent-h,0px)}
.cookie-consent-inner{
  pointer-events:auto;
  max-width:1200px;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:36px;align-items:center;
  background:var(--panel);
  border:1px solid var(--green);
  border-radius:6px;
  padding:28px 32px;
  box-shadow:0 -12px 40px rgba(0,0,0,.55);
  text-align:left;
}
.cookie-consent-inner>*{grid-column:1}
.cookie-consent-eyebrow{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--green)}
.cookie-consent-inner h2{margin:8px 0 10px;font-size:24px;color:var(--text)}
.cookie-consent-inner p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.cookie-consent-inner a{color:var(--green);border-bottom:1px solid rgba(30,198,91,.4)}
.cookie-consent-actions{grid-column:2;grid-row:1 / span 3;display:flex;flex-direction:column;gap:10px;min-width:200px}
.cookie-consent-btn{
  padding:14px 30px;border-radius:4px;font-weight:800;font-size:15px;
  cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
  font-family:inherit;
}
.cookie-consent-btn--accept{background:var(--green);border:1px solid var(--green);color:#111}
.cookie-consent-btn--accept:hover{background:var(--green-2)}
.cookie-consent-btn--decline{background:transparent;border:1px solid var(--line);color:var(--muted)}
.cookie-consent-btn--decline:hover{border-color:var(--muted);color:var(--text)}

/* Süti-oldal szövegközi gombja – a többi gombhoz igazítva, nem böngésző-alap. */
.cookie-settings-btn{
  padding:6px 16px;border-radius:4px;font-weight:800;font-size:13.5px;
  font-family:inherit;cursor:pointer;
  background:var(--green);border:1px solid var(--green);color:#111;
  transition:background .15s ease;
}
.cookie-settings-btn:hover{background:var(--green-2)}

@media (max-width:760px){
  .cookie-consent{padding:0 10px 10px}
  .cookie-consent-inner{grid-template-columns:minmax(0,1fr);padding:20px 18px;max-height:70vh;overflow-y:auto}
  .cookie-consent-inner h2{font-size:20px}
  .cookie-consent-inner p{font-size:14px}
  .cookie-consent-actions{grid-column:1;grid-row:auto;flex-direction:row;margin-top:16px;min-width:0}
  .cookie-consent-btn{flex:1;padding:13px 10px}
}
.author-rank-icon{font-size:14px;line-height:1}


/* =====================================================================
   NEW DESIGN – a GMR szerver-UI nyelve (admin panel, karakterszerkesztő,
   főmenü, profil): közel fekete felületek, 1px szegély, kis lekerekítés,
   nagybetűs betűközös címkék, zöld kiemelés. Csak megjelenés.
   ===================================================================== */
:root{
  --nd-border:#262626;
  --nd-border-hi:#333;
  --nd-green-bg:rgba(30,198,91,.10);
  --nd-green-bd:rgba(30,198,91,.45);
}
body{background:#0b0b0b;letter-spacing:.005em}
h1,h2,h3{letter-spacing:-.01em}

/* Fejléc: lapos sáv, alatta vékony vonal */
.topbar{padding:0;background:rgba(11,11,11,.92);border-bottom:1px solid var(--nd-border)}
.nav-shell{max-width:none;height:64px;padding:0 24px;border-radius:0;background:transparent;box-shadow:none}
.nav-link{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#c9c9c9}
.brand{width:44px;height:44px;border-radius:4px;filter:none}
.apply-btn{padding:11px 22px;border-radius:4px;background:var(--nd-green-bg);color:var(--green);
  border:1px solid var(--nd-green-bd);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.apply-btn:hover{background:var(--green);color:#07130b}

/* Oldalsáv + panelek */
.sidebar{background:#0f0f0f;border:1px solid var(--nd-border);border-radius:6px;box-shadow:none;top:84px}
.side-link{border-radius:4px;font-size:13px;font-weight:700;border:1px solid transparent}
.side-link:hover{background:#161616;border-color:var(--nd-border)}
.side-link.active,.side-link.active:hover,.side-link[aria-current="page"]{background:var(--nd-green-bg);border-color:var(--nd-green-bd);color:var(--green)}

.category-card,.article-card,.list-item,.rule-card,.video-card,.help-quick-card,
.rules-chapter-card,.stat-cards>*{
  background:#111;border:1px solid var(--nd-border);border-radius:6px;box-shadow:none;
  transition:border-color .15s ease,background .15s ease}
.category-card:hover,.article-card:hover,.list-item:hover,.rules-chapter-card:hover,.help-quick-card:hover{
  border-color:var(--nd-green-bd);background:#141414;transform:none}

/* Hero-k: lapos, vonalas */
.hero,.rules-hero,.resource-hero,.article-hero{border:1px solid var(--nd-border);border-radius:6px;box-shadow:none}
.hero-badge,.rules-badge,.resource-badge{border-radius:4px;border:1px solid var(--nd-green-bd);
  background:var(--nd-green-bg);color:var(--green);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em}
.hero-search,.search-box{border-radius:4px;background:#0f0f0f;border:1px solid var(--nd-border)}
.hero-search:focus-within{border-color:var(--nd-green-bd)}

/* Kis címkék, chipek: nagybetűs, betűközös */
.quick-tags button,.rules-count,.article-card small,.rules-nav-title,.toc-title,
.help-quick-card small,.rules-chapter-card small{
  text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.quick-tags button{background:#111;border:1px solid var(--nd-border);border-radius:4px;color:#cfcfcf;font-size:11px}
.quick-tags button:hover{background:var(--nd-green-bg);border-color:var(--nd-green-bd);color:var(--green)}

/* Táblázatok / listák vékony vonallal */
table{border-collapse:collapse}
th{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8a8a8a;font-weight:800}
th,td{border-color:var(--nd-border)!important}

/* Beviteli mezők */
input,textarea,select{border-radius:4px}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--nd-green-bd)}

.intro-card{background:var(--nd-green-bg);border:1px solid var(--nd-green-bd);color:#fff;box-shadow:none}
.intro-card h2{text-transform:uppercase;letter-spacing:.02em}
.hero-art,.rules-hero,.resource-hero{
  background:radial-gradient(circle at 20% 0%,rgba(30,198,91,.14),transparent 55%),#0f0f0f;box-shadow:none}
.hero-art:before,.hero-art:after,.rules-hero:before,.rules-hero:after,.resource-hero:before,.resource-hero:after{opacity:.25}
.section-head h1,.section-head h2{text-transform:uppercase;letter-spacing:.01em}

/* Felső sáv: középre igazított, széle a tartalom (page-shell) szélével egyezik */
.topbar{padding:12px 24px 0;background:linear-gradient(180deg,rgba(11,11,11,.98),rgba(11,11,11,.9) 75%,rgba(11,11,11,0));border-bottom:0}
.nav-shell{max-width:1452px;margin:0 auto;height:60px;padding:0 20px;border:1px solid var(--nd-border);
  border-radius:6px;background:#0f0f0f;box-shadow:none}

/* ---------- Kontraszt-javítások (sötét felületen mindig világos szöveg) ---------- */
.side-link,.side-link:hover{color:#e9e9e9}
.side-link.active,.side-link.active:hover{color:var(--green)}
.article-card{color:#f2f2f2}
.article-card small{color:var(--green);opacity:1}
.article-card p{color:#b5b5b5}
.article-card:hover{filter:none}
.range-tabs button.active,.range-tabs button.active:hover{color:#092112}
.chart-hint{color:#9fb0a6}
.rules-search input::placeholder{color:#8c8c8c}
.rules-nav button small{color:#8f9d94}

/* Parancslista: szélesebb parancs-oszlop, hogy a hosszú nevek (/clearstuckprops, /streamermode) egy sorban maradjanak */
.command-main{grid-template-columns:200px 1fr}
.command-code{white-space:nowrap;font-size:13px;padding:8px 14px}
@media (max-width:900px){.command-main{grid-template-columns:1fr}}

/* ---------- Menüpont-állapotok (a szerver-UI oldalsávja szerint) ----------
   alap: halvány szürke · hover: sötét kártya vékony kerettel, fehér szöveg ·
   aktív: zöld árnyalatú háttér, zöld szöveg, élénk zöld sáv a bal szélen. */
.side-link{
  border:1px solid transparent;border-radius:6px;background:transparent;
  color:#a8a8a8;font-weight:700;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.side-link:hover{
  background:#181818;border-color:#2a2a2a;color:#fff;box-shadow:none;
}
.side-link.active,.side-link.active:hover,.side-link[aria-current="page"]{
  background:rgba(30,198,91,.12);border-color:rgba(30,198,91,.35);color:var(--green);
  box-shadow:inset 3px 0 0 var(--green);
}

/* --- igazítás: cím/bekezdés/lista (szöveg) és videó/táblázat/karakterek (doboz) --- */
.wiki-align--center{text-align:center}
.wiki-align--right{text-align:right}
ul.wiki-align--center,ol.wiki-align--center,ul.wiki-align--right,ol.wiki-align--right{list-style-position:inside;padding-left:0}
.video-frame.wiki-box--center,.video-frame.wiki-box--right{max-width:560px}
.video-frame.wiki-box--center{margin-left:auto;margin-right:auto}
.video-frame.wiki-box--right{margin-left:auto;margin-right:0}
.wiki-table-wrap.wiki-box--center,.wiki-table-wrap.wiki-box--right{width:fit-content;max-width:100%}
.wiki-table-wrap.wiki-box--center{margin-left:auto;margin-right:auto}
.wiki-table-wrap.wiki-box--right{margin-left:auto;margin-right:0}
.wiki-box--center>.wiki-table,.wiki-box--right>.wiki-table{width:auto}
.wiki-character-grid.wiki-box--center,.wiki-character-grid.wiki-box--right{display:flex;flex-wrap:wrap}
.wiki-character-grid.wiki-box--center{justify-content:center}
.wiki-character-grid.wiki-box--right{justify-content:flex-end}
.wiki-character-grid.wiki-box--center>.wiki-character-card,.wiki-character-grid.wiki-box--right>.wiki-character-card{box-sizing:border-box;width:calc((100% - (var(--cols,4) - 1) * 14px) / var(--cols,4) - .1px)}
@media (max-width:760px){
  .wiki-character-grid.wiki-box--center,.wiki-character-grid.wiki-box--right{--cols:2 !important}
}

/* A karakter-rács mindig új sorban kezdődik: nem csúszik a balra/jobbra úsztatott kép mellé. */
.wiki-character-grid{clear:both}


/* =====================================================================
   Közös javítások (minden designban azonos)
   ===================================================================== */

/* Az új lapon nyíló linkek nyila a szöveg MELLETT álljon, ne alatta.
   Az .icon-glyph alapból display:block - flex szülőben ez mindegy, de sima
   (inline) linkben külön sorba törte a nyilat (pl. "Megnyitás YouTube-on"). */
a > .icon-glyph{display:inline-block;vertical-align:-2px}

/* Parancslista: "láthatatlan táblázat" - balra a parancs nagyban, mellette a
   leírás. Nincs zöld doboz, nincs kategória-címke, a parancs csak egyszer szerepel. */
.command-list{gap:0;border-top:1px solid rgba(255,255,255,.07)}
.command-card{
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.07);
  border-radius:0;padding:13px 6px;box-shadow:none
}
.command-card:hover{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.07)}
.command-main{flex:1;grid-template-columns:minmax(170px,280px) 1fr;gap:24px}
.command-usage{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:17px;overflow-wrap:anywhere
}
/* Maga a parancs fehér, félkövér; az argumentumok halványabbak, vékonyabbak. */
.command-name{color:#fff;font-weight:800}
.command-args{color:#7fcf9c;font-weight:500;font-size:.88em;margin-left:4px}
.command-desc{margin:0;color:#b9c1bc;font-size:14px;line-height:1.5}
@media (max-width:900px){.command-main{grid-template-columns:1fr;gap:4px}}

/* "98 / 220": a max. érték egy sorban maradjon a jelenlegi számmal
   (a .mini-stat span címke-stílusa korábban külön sorba törte). */
.mini-stat strong{white-space:nowrap}
.mini-stat strong small span{display:inline;margin:0;font-size:inherit;font-weight:inherit;color:inherit}

/* Rajzolt billentyűzet (Billentyűzet kiosztás oldal).
   Az egység (--kb-u) a billentyűzet szélességéből jön (konténer-lekérdezés),
   így mindig kifér, sosem kell külön oldalra görgetni. Teljes szélesség:
   15 (fő rész) + 0,5 + 3 (navigáció) + 0,5 + 4 (numerikus) = 23 egység. */
.kb-panel{margin:18px 0;padding:20px;border-radius:6px;background:#111;border:1px solid rgba(255,255,255,.06)}
.kb{container-type:inline-size;display:flex;flex-wrap:wrap;align-items:flex-start}
.kb-block{
  --kb-u:calc(100cqw / 23);--kb-q:calc(var(--kb-u) / 4);
  display:grid;grid-auto-rows:var(--kb-u)
}
.kb-nav,.kb-num{margin-left:calc(var(--kb-u) * .5)}
@container (max-width:820px){
  .kb-num{display:none}
  .kb-block{--kb-u:calc(100cqw / 18.5)}
}
@container (max-width:520px){
  .kb-block{--kb-u:calc(100cqw / 15)}
  .kb-nav{margin:calc(var(--kb-u) * .4) 0 0}
}
.kb-key{
  margin:2px;min-width:0;padding:0 2px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:5px;background:#1b1b1b;border:1px solid #282828;border-bottom-width:3px;
  color:#7d7d7d;font:600 calc(var(--kb-u) * .3)/1.05 Inter,Arial,sans-serif;
  user-select:none;-webkit-user-select:none
}
.kb-key.is-wide{font-size:calc(var(--kb-u) * .21)}
.kb-key.is-bound{
  background:#143820;border-color:#1f6d3c;color:#eafff1;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease
}
.kb-key.is-bound:hover{background:#1b4c2b;border-color:var(--green)}
.kb-key.is-active,.kb-key.is-active:hover{background:var(--green);border-color:#0e8a3c;color:#07130b}
.kb-key:focus-visible{outline:2px solid #fff;outline-offset:1px}
.kb-panel .keyboard-active-info{margin:16px 0 0}

/* A funkciólista az oldallal együtt görög, nincs saját görgetősávja. */
.keybind-grid{max-height:none!important;overflow:visible!important;padding-right:0!important}



/* =====================================================================
   ÚJ DESIGN TERV – főoldal és elrendezés
   ===================================================================== */

/* Fejléc: logó a bal szélen, középen kereső */
.nav-shell{
  grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-areas:"brand left search right";gap:28px
}
.brand{grid-area:brand;margin:0}
.nav-left{grid-area:left}
.nav-right{grid-area:right}
.nav-search{
  grid-area:search;justify-self:center;width:100%;max-width:520px;
  display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;
  border:1px solid var(--nd-border);border-radius:4px;background:#0b0b0b;
  transition:border-color .15s ease
}
.nav-search:focus-within{border-color:var(--nd-green-bd)}
.nav-search>span{color:var(--green);font-size:18px;line-height:1}
.nav-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:14px}
.nav-search input::placeholder{color:#8c8c8c}
@media (max-width:1150px){
  .nav-shell{grid-template-areas:"left brand search right";gap:14px}
}
@media (max-width:620px){
  .nav-search{display:none}
}

/* Letisztult főoldal: nincs kereső, gyorscímkék, szlogen-sáv és kategória-rács */
.hero-search,.quick-tags,.intro-card,#categoryHead,#categoryGrid{display:none}
#categoryHead + #categoryGrid + .section-head{margin-top:34px}

/* A szlogen halkan, a bevezető szöveg alatt */
.hero p.hero-motto{
  display:block;margin:16px 0 0;padding-left:14px;border-left:2px solid var(--green);
  color:#9fb0a6;font-size:15px;line-height:1.6;font-style:italic;max-width:620px
}

/* Szerver aktivitás külön sorban, teljes szélességben, egyenletes belső térrel */
/* A hero-doboz belső margója minden oldalon egyforma. */
#homeView .hero{grid-template-columns:1fr;min-height:0;gap:20px;align-items:start;padding:32px}
#homeView .hero-copy{padding:0}
#homeView .hero-copy > :last-child{margin-bottom:0}
@media (max-width:760px){ #homeView .hero{padding:20px} }
.server-stats{height:auto;padding:24px}
.stats-head{align-items:center}
.stats-head h3{margin-top:6px}
.stat-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 0}
.mini-stat--fill{display:none}
.mini-stat{padding:16px}
/* A grafikon nem kap külön keretes dobozt: ugyanazzal a térközzel áll a
   kártyák alatt, mint ami a panel szélén van. */
.chart-panel{margin-top:16px;padding:0;gap:8px;background:none;border:0}
.chart-panel-head,.chart-hint{display:none}
.chart-wrap{flex:none;height:260px}
.stats-foot{margin-top:16px}
@media (max-width:760px){
  .server-stats{padding:16px}
  .stats-head{align-items:flex-start}
  .stat-cards{gap:8px;margin-top:16px}
  .chart-panel{margin-top:8px}
  .mini-stat{padding:12px}
  .mini-stat strong{font-size:18px}
  .mini-stat strong b{font-size:21px}
  .chart-wrap{height:200px}
}

/* A szerver aktivitás a kezdőlap legalján (a script.js teszi a #homeView végére) */
#homeView > .server-stats{margin-top:40px}

/* Grafikon: függőleges vezetővonal a kurzorhoz legközelebbi mintánál */
.chart-crosshair{
  position:absolute;display:none;width:0;z-index:2;pointer-events:none;
  border-left:1px dashed rgba(100,243,151,.65)
}
.chart-crosshair.is-visible{display:block}
.chart-crosshair i{
  position:absolute;left:-5px;top:calc(var(--dot-y,0px) - 5px);
  width:9px;height:9px;border-radius:50%;background:#64f397;
  box-shadow:0 0 0 3px rgba(100,243,151,.25)
}

/* Normál, egész oldalas görgetés: a lábléc a teljes oldal alatt áll
   (a script.js a .page-shell után teszi), alatta nincs üres görgethető rész. */
html,body{overscroll-behavior-y:none}
html{scroll-padding-top:90px}
@media (min-width:1151px) and (hover:hover) and (pointer:fine){
  html,body{height:auto;overflow:visible}
  .topbar{position:sticky;top:0}
  .page-shell:not(.page-shell--solo){height:auto;overflow:visible;margin:24px auto 0;padding-bottom:0}
  .page-shell:not(.page-shell--solo) .sidebar{
    position:sticky;top:90px;height:auto;max-height:calc(100vh - 110px)
  }
  .page-shell:not(.page-shell--solo) .content{height:auto;overflow:visible;padding-right:0;padding-bottom:0}
}
.site-footer{margin-top:48px}

/* A Népszerű cikkek blokk mindig 3 kártya: közepes szélességen is 3 oszlop,
   hogy a harmadik ne lógjon egyedül egy új sorban. */
@media (min-width:761px) and (max-width:1150px){ #featuredArticles{grid-template-columns:repeat(3,1fr)} }

/* A keresőmezők beépített törlés (×) gombja a böngészőben alapból kék –
   a wiki zöldjére cseréljük (ugyanaz az X, maszkként rajzolva). */
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-left:6px;cursor:pointer;
  background-color:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover{background-color:var(--green-2,#5ceb92)}

/* Az új tervben a felső (fejléc) kereső az egyetlen: az oldalsáv keresője
   a kategórialista felett lekerül. Telefonon viszont a felső kereső rejtett
   (nem fér el), ott a menüben lévő oldalsáv-kereső marad meg. */
.sidebar-search{display:none}
@media (max-width:620px){ .sidebar-search{display:flex} }

/* Telefonon / tableten a menü (oldalsáv) fix, a képernyőhöz rögzített fiók:
   ha a kategórialista hosszabb a kijelzőnél, magán a menün belül kell tudni
   ujjal görgetni – különben az alsó menüpontok elérhetetlenek. A görgetés
   nem "szivárog át" a mögötte lévő oldalra. */
@media (max-width:1150px){
  .sidebar{
    top:16px;bottom:16px;max-height:calc(100dvh - 32px);
    overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  }
}

/* Nyitott telefonos menünél a mögötte lévő oldal nem görgethető (a script.js
   a body-t a helyén rögzíti), így az ujjal húzás mindig a menüt görgeti. */
@media (max-width:1150px){
  html.menu-open,html.menu-open body{overflow:hidden;overscroll-behavior:none}
  html.menu-open body{position:fixed;left:0;right:0;width:100%}
  .overlay{touch-action:none}
}

/* A kártyák (cikkek, kategóriák, frakciók, szabályzat-fejezetek, karakterek)
   <button> elemek, amelyek tartalmát a böngésző alapból függőlegesen középre
   teszi – egy sorban a rövidebb kártyák tartalma így lejjebb csúszott. A
   tartalom mindenhol felülről induljon, akkor is, ha a kártyák eltérő
   hosszúságúak. */
.article-card,.category-card,.faction-type-card,.rules-chapter-card{
  display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch
}
.character-card{align-items:flex-start}
.character-card-copy{justify-content:flex-start;align-self:flex-start}
.faction-card{align-items:start}
.faction-card-arrow{align-self:center}
.help-quick-card{align-items:flex-start}

/* Képek a Szabályzat pontjaiban (a szerkesztő "Kép beszúrása" gombja
   <figure class="wiki-figure">-t tesz a szabály szövegébe). A kép a pont
   szélességéhez igazodik, kattintásra nagyobb méretben is megnézhető. */
.rule-body-inner .wiki-figure{margin:14px 0 16px;max-width:760px}
.rule-body-inner .wiki-figure img{
  display:block;max-width:100%;height:auto;border-radius:6px;
  border:1px solid rgba(255,255,255,.08);cursor:zoom-in
}
.rule-body-inner .wiki-figure figcaption{margin-top:7px;font-size:13px;color:#9aa59d;line-height:1.5}
@media (max-width:760px){
  .rule-body-inner .wiki-figure{margin:12px 0}
}

/* Nagyító nézet a Szabályzat képeihez (script.js). */
.image-lightbox{
  position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.88);cursor:zoom-out
}
.image-lightbox[hidden]{display:none}
.image-lightbox img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.image-lightbox-close{
  position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.6);color:#fff;font-size:22px;cursor:pointer
}

/* A belépett streamer saját kártyáján: "Saját profil szerkesztése" gomb. */
.streamer-edit-link{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:4px;
  border:1px solid var(--nd-green-bd,rgba(30,198,91,.4));color:var(--green);font-size:13px;font-weight:800
}
.streamer-edit-link:hover{background:rgba(30,198,91,.1)}

/* Stream-figyelő: automatikusan talált GMR 4.0 adások a Streamerek oldalon. */
.streamers-found-head{display:flex;flex-direction:column;gap:3px;margin:22px 0 4px}
.streamers-found-eyebrow{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--green)}
.streamers-found-head small{color:#9aa59d;font-size:13px}
.streamer-viewers{font-size:12.5px;font-weight:700;color:#c9d2cc}
.streamer-card--found{border-style:dashed}

/* Frakció-logó (a cikk portré-mezője a "Frakciók" kategóriánál): négyzetes,
   a teljes kép látszik (contain), átlátszó háttérrel is jól mutat. */
.article-hero-portrait.is-logo{width:150px;height:150px;object-fit:contain;background:rgba(0,0,0,.28);padding:10px;box-sizing:border-box}
.faction-card-logo.has-img{background:#0f1c14;padding:5px;box-sizing:border-box;overflow:hidden}
.faction-card-logo.has-img img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:760px){
  .article-hero-portrait.is-logo{width:110px;height:110px}
}