/* HungarikumET.hu — Enemy Territory inspired (gritty HUD) */
:root{
  --bg:#07070a;
  --bg2:#0b0b10;
  --panel:rgba(12,12,18,.78);
  --panel2:rgba(16,16,24,.78);
  --text:#e9e9ef;
  --muted:#b9b9c9;
  --line:rgba(255,255,255,.10);
  --accent:#ff9f1a;          /* warm HUD orange */
  --accent2:#c83cff;         /* subtle purple neon for depth */
  --good:#2bd576;
  --bad:#ff4d4d;
  --shadow:0 12px 34px rgba(0,0,0,.45);
  --r:16px;
  --hud: rgba(255,159,26,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Trebuchet MS", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 20% 10%, rgba(255,159,26,.10) 0%, rgba(255,159,26,0) 55%),
    radial-gradient(900px 600px at 70% 0%, rgba(200,60,255,.08) 0%, rgba(200,60,255,0) 60%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  line-height:1.55;
  overflow-x:hidden;
}

/* Subtle ET-ish grit + scanlines overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.02) 0px,
      rgba(255,255,255,.02) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode:overlay;
  opacity:.18;
}
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,159,26,.06), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(200,60,255,.04), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.03), transparent 55%);
  filter: blur(10px);
  opacity:.55;
}

a{color:inherit}
.container{max-width:1120px; margin:0 auto; padding:20px 16px 64px; position:relative}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(6,6,10,.78);
  border-bottom:1px solid rgba(255,159,26,.12);
}
.nav{
  max-width:1120px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:14px; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo{
  width:44px; height:44px; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,159,26,.16), rgba(255,159,26,0));
  border:1px solid rgba(255,159,26,.25);
  display:grid; place-items:center;
  font-weight:1000; letter-spacing:.8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.brand .name{
  font-weight:950;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.flag span{font-weight:950}
.flag .hun{color:#e11d2e}
.flag .gari{color:#ffffff; text-shadow:0 0 8px rgba(255,255,255,.12)}
.flag .kum{color:#18a34a}

.menu{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.menu a{
  text-decoration:none;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--muted);
  font-weight:850;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.menu a:hover{
  border-color:rgba(255,159,26,.22);
  color:var(--text);
  background:rgba(255,159,26,.10)
}
.menu a.active{
  background:rgba(255,159,26,.16);
  border-color:rgba(255,159,26,.38);
  color:var(--text)
}

.right{display:flex; align-items:center; gap:10px}
.smallbtn{
  cursor:pointer;
  border:1px solid rgba(255,159,26,.18);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
  font-weight:900;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  letter-spacing:.3px;
}
.smallbtn:hover{background:rgba(255,159,26,.10); border-color:rgba(255,159,26,.30)}
.smallbtn.primary{
  background: linear-gradient(180deg, rgba(255,159,26,1), rgba(255,159,26,.78));
  border-color:transparent;
  color:#1b1200;
}
.smallbtn.primary:hover{filter:brightness(.96)}
.lang{
  display:flex; gap:6px; align-items:center;
  border:1px solid rgba(255,159,26,.18);
  background:rgba(255,255,255,.03);
  padding:6px; border-radius:999px;
}
.lang button{
  cursor:pointer;
  border:0; background:transparent; color:var(--muted);
  font-weight:950; padding:6px 10px; border-radius:999px;
  letter-spacing:.6px;
}
.lang button.active{background:rgba(255,159,26,.14); color:var(--text)}

.hero{
  margin-top:18px;
  border:1px solid rgba(255,159,26,.18);
  border-radius:var(--r);
  background:
    linear-gradient(180deg, rgba(255,159,26,.14), rgba(255,159,26,0)),
    radial-gradient(800px 300px at 10% 0%, rgba(255,255,255,.06), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-inner{
  padding:22px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
}
.h-title{
  margin:0;
  font-size:34px;
  line-height:1.05;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.h-sub{margin:10px 0 0; color:var(--muted)}
.badges{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}
.badge{
  padding:8px 10px; border-radius:999px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,159,26,.20);
  color:rgba(233,233,239,.86);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.9px;
}

.panel{
  border:1px solid rgba(255,159,26,.16);
  border-radius:var(--r);
  background: var(--panel);
  padding:16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.iprow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
code.ip{
  font-size:16px;
  font-weight:950;
  background:rgba(255,159,26,.14);
  border:1px solid rgba(255,159,26,.35);
  padding:8px 10px;
  border-radius:12px;
}
.note{color:var(--muted); font-size:13px; margin-top:10px}

.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.card{
  grid-column: span 6;
  border:1px solid rgba(255,159,26,.14);
  border-radius:var(--r);
  background:rgba(255,255,255,.035);
  padding:16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset;
}
.card h2{
  margin:0 0 8px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.card p{margin:0; color:var(--muted)}
@media (max-width:800px){
  .card{grid-column: span 12}
}

.section-title{
  margin:26px 0 12px;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.tablewrap{
  border:1px solid rgba(255,159,26,.14);
  border-radius:var(--r);
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
table{width:100%; border-collapse:collapse}
th,td{padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left}
th{font-size:12px; color:var(--muted); letter-spacing:.9px; text-transform:uppercase}
td{color:var(--text)}
tr:last-child td{border-bottom:0}
.muted{color:var(--muted)}
.kicker{color:var(--muted); font-size:13px; margin-top:6px}

.footer{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,159,26,.14);
  color:rgba(233,233,239,.55);
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:rgba(10,10,16,.92);
  border:1px solid rgba(255,159,26,.18);
  border-radius:14px;
  padding:10px 12px;
  box-shadow: var(--shadow);
  display:none;
  color:var(--text);
  font-weight:950;
}
.toast.show{display:block}

.inline-links{display:flex; gap:10px; flex-wrap:wrap}
.inline-links a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px dashed rgba(255,159,26,.25);
}
.inline-links a:hover{color:var(--text)}



/* --- Layout with sidebars (desktop) --- */
.layout{
  max-width:1400px;
  margin:0 auto;
  padding:20px 16px 64px;
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr) 320px;
  gap:16px;
  position:relative;
}
@media (max-width: 1200px){
  .layout{grid-template-columns: 300px minmax(0, 1fr); }
  .rightbar{display:none;}
}
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr; }
  .leftbar,.rightbar{display:none;}
}
.maincol{min-width:0}
.sidecard{
  border:1px solid rgba(255,159,26,.14);
  border-radius:var(--r);
  background:rgba(255,255,255,.035);
  padding:14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset;
}
.sidecard h3{
  margin:0 0 10px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.9px;
  color:rgba(233,233,239,.9);
}
.sidecard .muted{font-size:13px}
.sidecard iframe{
  width:100%;
  border:0;
  border-radius:12px;
}

/* smaller, cleaner HUN logo */
.logo{
  width:38px; height:38px; border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  font-weight:1000;
  letter-spacing:.2px;
}
.logo span{
  font-size:16px;
  line-height:1;
}


/* === v8: Full-width layout + clean top banner === */

/* Full-width 3-column page layout (desktop) */
.layout{
  width:100%;
  max-width:none;
  margin:0;
  padding:20px 24px 64px;
  display:grid;
  grid-template-columns: 360px minmax(0, 1fr) 360px;
  gap:20px;
}

@media (max-width: 1200px){
  .layout{grid-template-columns: 320px minmax(0, 1fr);}
  .rightbar{display:none;}
}
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr;}
  .leftbar,.rightbar{display:none;}
}

/* Full-width topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  width:100%;
}
.nav{
  max-width:none;
  margin:0;
  padding:12px 24px;
}

/* Align topbar content with the 3-column layout */
.navgrid{
  width:100%;
  display:grid;
  grid-template-columns: 360px 1fr 360px;
  gap:20px;
  align-items:center;
}
.navgrid .brand{justify-self:start}
.navgrid .menu{justify-self:center}
.navgrid .right{justify-self:end}
@media (max-width: 1200px){
  .navgrid{grid-template-columns: 320px 1fr;}
  .navgrid .menu{justify-self:start}
  .navgrid .right{justify-self:end}
}
@media (max-width: 980px){
  .navgrid{grid-template-columns: 1fr; gap:10px;}
  .navgrid .menu{justify-self:start; flex-wrap:wrap}
  .navgrid .right{justify-self:start; flex-wrap:wrap}
}

/* Clean ET-style masthead banner */
.masthead{
  width:100%;
  height:92px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,159,26,.14);
  background:
    radial-gradient(900px 160px at 18% 40%, rgba(255,159,26,.22) 0%, rgba(255,159,26,0) 65%),
    radial-gradient(900px 160px at 82% 35%, rgba(200,60,255,.12) 0%, rgba(200,60,255,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.84));
}
.masthead::before{
  content:"";
  position:absolute; inset:-40px -60px;
  background:
    linear-gradient(90deg, rgba(255,159,26,.18), rgba(255,159,26,0) 30%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,0) 2px 10px);
  opacity:.70;
}
.masthead::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, rgba(0,0,0,0) 1px 6px);
  mix-blend-mode:overlay;
  opacity:.16;
}
.masthead-inner{
  height:100%;
  display:grid;
  grid-template-columns: 360px 1fr 360px;
  gap:20px;
  align-items:center;
  padding:0 24px;
  position:relative;
  z-index:2;
}
@media (max-width: 1200px){
  .masthead-inner{grid-template-columns: 320px 1fr;}
  .masthead-inner .mh-right{display:none;}
}
@media (max-width: 980px){
  .masthead{height:72px;}
  .masthead-inner{grid-template-columns: 1fr;}
  .masthead-inner .mh-left{display:none;}
}
.mh-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,159,26,.22);
  background:rgba(0,0,0,.30);
}
.mh-title{margin:0; font-weight:1000; text-transform:uppercase; letter-spacing:1px; font-size:13px;}
.mh-sub{margin:2px 0 0; font-size:12px; color:rgba(233,233,239,.60);}
.mh-center{display:flex; justify-content:center;}
.mh-tag{
  font-weight:1000;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,159,26,.20);
  background:rgba(255,159,26,.10);
}


/* === v9: Pro ET header (horizontal menu + right controls + bigger title) === */
.navgrid{
  grid-template-columns: auto 1fr auto !important;
}
.menu{
  justify-self:center;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:center;
  gap:10px;
}
.menu a{
  white-space:nowrap;
}
.right{
  justify-self:end;
  display:flex;
  gap:10px;
  align-items:center;
}
.brand .name{
  font-size:18px;
  line-height:1.05;
}
.brand .name .flag{
  font-weight:1000;
}
.brand .name::after{
  content:"";
}
@media (max-width: 1200px){
  .menu{flex-wrap:wrap !important; justify-content:flex-start;}
  .navgrid{grid-template-columns: auto 1fr !important;}
}
@media (max-width: 980px){
  .menu{flex-wrap:wrap !important;}
}


/* Masthead aligns with header */
.masthead-inner{
  grid-template-columns: auto 1fr auto !important;
}



/* === v11: Discord icon + pro ET button styling + online pulse === */

/* Base: replace any discord emoji/icon with image via helper class */
.discord-icon,
.icon-discord{
  display:inline-block;
  width:22px;
  height:22px;
  margin-right:8px;
  background-image:url("/assets/img/discord-icon.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  vertical-align:middle;
  transform: translateY(-1px);
}

/* Dynamic sizing: menu vs buttons */
.nav .discord-icon{width:18px;height:18px;margin-right:6px;transform:translateY(-1px);}
.smallbtn .discord-icon{width:22px;height:22px;margin-right:8px;}

/* Auto-prepend icon for discord links/buttons even if HTML doesn't include span */
a[href*="discord.gg"]::before,
a[href*="discord.com/invite"]::before,
a[data-discord]::before{
  content:"";
  display:inline-block;
  width:22px;
  height:22px;
  margin-right:8px;
  background-image:url("/assets/img/discord-icon.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  vertical-align:middle;
  transform: translateY(-1px);
}
.nav a[href*="discord.gg"]::before,
.nav a[href*="discord.com/invite"]::before,
.nav a[data-discord]::before{
  width:18px;height:18px;margin-right:6px;
}

/* Remove old emoji spacing if present (safe) */
a[href*="discord.gg"] .emoji,
a[href*="discord.com/invite"] .emoji{display:none}

/* ET “metal frame” for Discord buttons */
.smallbtn.discord,
a[href*="discord.gg"].smallbtn,
a[href*="discord.com/invite"].smallbtn{
  position:relative;
  border:1px solid rgba(120,140,255,.35) !important;
  background: linear-gradient(180deg, rgba(120,140,255,.20), rgba(0,0,0,.25));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 10px 24px rgba(0,0,0,.22);
}
.smallbtn.discord::after,
a[href*="discord.gg"].smallbtn::after,
a[href*="discord.com/invite"].smallbtn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0) 25%),
    linear-gradient(270deg, rgba(255,255,255,.10), rgba(255,255,255,0) 25%);
  opacity:.35;
  mix-blend-mode:overlay;
}

/* Hover: stronger HUD glow */
.smallbtn.discord:hover,
a[href*="discord.gg"].smallbtn:hover,
a[href*="discord.com/invite"].smallbtn:hover{
  filter: saturate(1.05);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 10px 24px rgba(0,0,0,.22),
    0 0 0 2px rgba(120,140,255,.15),
    0 0 22px rgba(120,140,255,.28);
}

/* Online pulse: applies only when body has .discord-online */
@keyframes discordPulse {
  0%   { box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 10px 24px rgba(0,0,0,.22), 0 0 0 0 rgba(120,140,255,.00), 0 0 0 rgba(120,140,255,0); }
  50%  { box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 10px 24px rgba(0,0,0,.22), 0 0 0 6px rgba(120,140,255,.10), 0 0 24px rgba(120,140,255,.28); }
  100% { box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 10px 24px rgba(0,0,0,.22), 0 0 0 0 rgba(120,140,255,.00), 0 0 0 rgba(120,140,255,0); }
}

body.discord-online a[href*="discord.gg"].smallbtn,
body.discord-online a[href*="discord.com/invite"].smallbtn,
body.discord-online .smallbtn.discord{
  animation: discordPulse 1.8s ease-in-out infinite;
}

/* Small indicator dot next to Discord label when online */
body.discord-online a[href*="discord.gg"].smallbtn::before,
body.discord-online a[href*="discord.com/invite"].smallbtn::before{
  /* keep icon; add dot via shadow on icon */
  filter: drop-shadow(0 0 8px rgba(120,140,255,.55));
}



/* === v12: Facebook icon replace + ET button style === */

.facebook-icon,
.icon-facebook{
  display:inline-block;
  width:22px;
  height:22px;
  margin-right:8px;
  background-image:url("/assets/img/facebook-icon.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  vertical-align:middle;
  transform: translateY(-1px);
}

/* Auto-prepend icon for facebook links */
a[href*="facebook.com"]::before{
  content:"";
  display:inline-block;
  width:22px;
  height:22px;
  margin-right:8px;
  background-image:url("/assets/img/facebook-icon.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  vertical-align:middle;
  transform: translateY(-1px);
}
.nav a[href*="facebook.com"]::before{
  width:18px;height:18px;margin-right:6px;
}

/* ET metal frame for Facebook buttons */
.smallbtn.facebook,
a[href*="facebook.com"].smallbtn{
  position:relative;
  border:1px solid rgba(66,103,178,.45) !important;
  background: linear-gradient(180deg, rgba(66,103,178,.28), rgba(0,0,0,.25));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 10px 24px rgba(0,0,0,.22);
}
.smallbtn.facebook:hover,
a[href*="facebook.com"].smallbtn:hover{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 10px 24px rgba(0,0,0,.22),
    0 0 18px rgba(66,103,178,.35);
}



/* === v13: Tooltips + Discord online green + Facebook new-post flash === */

/* Tooltip base */
.icon-label{
  position:relative;
}
.icon-label[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  bottom: calc(100% + 10px);
  left:50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.9);
  color:#fff;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  transform-origin: bottom center;
}
.icon-label[data-tooltip]::before{
  content:"";
  position:absolute;
  bottom: calc(100% + 4px);
  left:50%;
  transform: translateX(-50%);
  border:6px solid transparent;
  border-top-color: rgba(0,0,0,.9);
  opacity:0;
  transition: opacity .2s ease;
}
.icon-label:hover::after,
.icon-label:hover::before{
  opacity:1;
}

/* Discord online = green label */
body.discord-online .icon-label.discord .label{
  color:#3dff7a;
  text-shadow: 0 0 6px rgba(61,255,122,.65);
}

/* Facebook new post flash */
@keyframes fbFlash{
  0%{ color:#fff; }
  50%{ color:#5fa8ff; text-shadow:0 0 10px rgba(95,168,255,.8); }
  100%{ color:#fff; }
}
body.facebook-newpost .icon-label.facebook .label{
  animation: fbFlash 1.2s ease-in-out infinite;
}



/* === v14: Force visible labels next to icons === */
.smallbtn.icon-label,
a.smallbtn.icon-label{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  color: var(--text) !important;
}
.smallbtn.icon-label .label{
  display:inline-block !important;
  opacity:1 !important;
  visibility:visible !important;
  color: inherit !important;
}
/* If we inject real <span class="...-icon">, disable auto ::before to avoid layout glitches */
.icon-label.has-icon::before{ content: none !important; display:none !important; }



/* === v17: Single full-width HERO banner (stable) === */
.masthead{display:none !important;}

.superhero{
  width:100%;
  padding:26px 24px 22px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,170,40,.18);
  background:
    linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.88));
}
.superhero::before{
  content:"";
  position:absolute;
  inset:-40px -60px;
  background-image:url("/assets/img/superhero-bg.jpg");
  background-size:cover;
  background-position:center;
  filter: blur(16px) saturate(1.05) contrast(1.05);
  opacity:.62;
  transform: scale(1.07);
}
.superhero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 220px at 22% 20%, rgba(255,170,40,.20), transparent 70%),
    radial-gradient(900px 220px at 78% 30%, rgba(170,70,255,.12), transparent 75%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 6px);
  opacity:.16;
  pointer-events:none;
}
.superhero-inner{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  animation: fadeInUp .65s ease-out both;
}
.titleblock{text-align:left; min-width:260px;}
.kicker{
  font-size:12px;
  letter-spacing:2.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.maintitle{
  margin:6px 0 0;
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight:1000;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#f5f5f5;
  text-shadow: 0 0 10px rgba(255,170,40,.28), 0 0 26px rgba(255,170,40,.14);
}
.maintitle .hun-red{color:#ff4b4b;}
.maintitle .hun-white{color:#ffffff;}
.maintitle .hun-green{color:#3dff7a;}
.subtitle{
  margin-top:8px;
  font-size:13px;
  color:rgba(255,255,255,.70);
}
.cta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ipchip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,170,40,.18);
  background: rgba(0,0,0,.25);
}
.joinbtn{
  cursor:pointer;
  border:1px solid rgba(255,170,40,.35);
  background: linear-gradient(180deg, rgba(255,170,40,.24), rgba(0,0,0,.28));
  color: rgba(255,255,255,.92);
  padding:10px 14px;
  border-radius:14px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 10px 24px rgba(0,0,0,.22);
}
.joinbtn:hover{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 10px 24px rgba(0,0,0,.22),
    0 0 22px rgba(255,170,40,.22);
}

@media (max-width: 760px){
  .titleblock{text-align:center; width:100%;}
  .cta{justify-content:center; width:100%;}
}

/* General tooltip for any element with data-tooltip */
[data-tooltip]{ position:relative; }
[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  bottom: calc(100% + 10px);
  left:50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.9);
  color:#fff;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
[data-tooltip]::before{
  content:"";
  position:absolute;
  bottom: calc(100% + 4px);
  left:50%;
  transform: translateX(-50%);
  border:6px solid transparent;
  border-top-color: rgba(0,0,0,.9);
  opacity:0;
  transition: opacity .2s ease;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before{ opacity:1; }



/* === v18: Hero redesign (centered, full-width, no JOIN button) === */
.superhero{
  padding:34px 24px 30px;
}
.superhero-inner{
  max-width: 1600px;
  margin: 0 auto;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.titleblock{width:100%; text-align:center;}
.kicker{font-size:12px; letter-spacing:3px;}
.subtitle{font-size:13px;}
.cta{width:100%; justify-content:center;}
.ipchip{
  cursor:pointer;
  user-select:none;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(255,170,40,.22);
  background: rgba(0,0,0,.30);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 10px 24px rgba(0,0,0,.20);
}
.ipchip:hover{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 10px 24px rgba(0,0,0,.20),
    0 0 18px rgba(255,170,40,.18);
}
.ipchip .copyhint{
  margin-left:10px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: rgba(255,255,255,.55);
}
@media (max-width: 760px){
  .superhero{padding:28px 16px 24px;}
  .ipchip{width: 100%; justify-content:center;}
}



/* === v19: Hero placement + full-width fix === */
.superhero{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  display:block;
}
.superhero-inner{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}



/* === v20: Force hero to sit ABOVE layout, never inside columns === */
.superhero{
  display:block !important;
  clear:both !important;
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  position:relative !important;
  z-index:1;
}
.layout{ position:relative; z-index:2; }



/* === v21: Hero box bottom alignment + colored HUN badge === */
.badge .hun-red{color:#ff4b4b;}
.badge .hun-white{color:#ffffff;}
.badge .hun-green{color:#3dff7a;}

.superhero-inner{
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 360px;
  justify-content: flex-start !important;
}
.superhero .cta{
  margin-top: auto !important;
  padding-top: 18px;
}
@media (max-width: 760px){
  .superhero-inner{min-height: 320px;}
}



/* === v22: Hero on top + glass menu overlay + scroll indicator + mobile compact hero === */

/* Hero should be at the very top */
.superhero{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  position:relative !important;
}

/* Glass topbar over hero */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,10,14,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,170,40,.14);
}

/* Add subtle glass shine */
.topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: rgba(255,255,255,.10);
  pointer-events:none;
}

/* Scroll indicator */
.scroll-indicator{
  position:absolute;
  left:50%;
  bottom:10px;
  transform: translateX(-50%);
  width:38px;
  height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.85);
  border:1px solid rgba(255,170,40,.18);
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  animation: scrollBounce 1.6s ease-in-out infinite;
  user-select:none;
}
@keyframes scrollBounce{
  0%,100%{ transform: translateX(-50%) translateY(0); opacity:.75; }
  50%{ transform: translateX(-50%) translateY(6px); opacity:1; }
}

/* Mobile compact hero */
@media (max-width: 760px){
  .superhero{ padding: 18px 16px 18px; }
  .superhero-inner{ min-height: 240px !important; }
  .maintitle{ font-size: clamp(26px, 9vw, 44px); letter-spacing: 3px; }
  .subtitle{ font-size: 12px; }
  .ipchip{ width: 100%; }
  .scroll-indicator{ bottom: 8px; width:34px; height:34px; }
}



/* Mobile collapsed hero state */
@media (max-width: 760px){
  .superhero.hero-collapsed{
    padding: 10px 16px 10px !important;
  }
  .superhero.hero-collapsed .subtitle,
  .superhero.hero-collapsed .cta,
  .superhero.hero-collapsed .scroll-indicator{
    display:none !important;
  }
  .superhero.hero-collapsed .kicker{
    display:none !important;
  }
  .superhero.hero-collapsed .superhero-inner{
    min-height: 0 !important;
  }
}



/* === v23: Tighten hero vertical spacing === */
.superhero{ padding: 26px 24px 18px !important; }
.superhero-inner{ min-height: 300px !important; gap: 10px !important; }
.kicker{ margin-bottom: 4px !important; }
.maintitle{ margin: 0 !important; line-height: 1.02 !important; }
.subtitle{ margin-top: 6px !important; }
.cta{ padding-top: 10px !important; }
.ipchip{ margin-top: 4px !important; }
.scroll-indicator{ bottom: 8px !important; }

@media (max-width: 760px){
  .superhero{ padding: 18px 16px 14px !important; }
  .superhero-inner{ min-height: 240px !important; }
  .subtitle{ margin-top: 6px !important; }
  .cta{ padding-top: 8px !important; }
}



/* === v24: Remove forced vertical spacing in hero (no auto push) === */
.superhero-inner{
  min-height: unset !important;
  justify-content: center !important;
  gap: 6px !important;
}
.superhero .cta{
  margin-top: 8px !important;
  padding-top: 0 !important;
}
.superhero .titleblock{
  margin: 0 !important;
}
.kicker{ margin: 0 0 2px 0 !important; line-height: 1.2 !important; }
.subtitle{ margin: 6px 0 0 0 !important; line-height: 1.25 !important; }
.ipchip{ margin: 6px 0 0 0 !important; }
.scroll-indicator{ display:none !important; } /* avoids needing extra bottom room */

@media (max-width: 760px){
  .superhero-inner{ gap: 4px !important; }
  .superhero .cta{ margin-top: 6px !important; }
}



/* === v1.1 UI refresh (small polish) === */
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid rgba(255,159,26,.65); outline-offset:2px}
/* Typography polish */
.h-title{font-size:clamp(26px, 3vw, 42px); line-height:1.06}
.h-sub{font-size:15px}
.section-title{letter-spacing:1.1px}
/* Buttons */
.smallbtn{transition:transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease}
.smallbtn:hover{transform:translateY(-1px)}
.lang button{transition:background .12s ease, color .12s ease}
.menu a{transition:background .12s ease, border-color .12s ease, color .12s ease}
/* Panels / cards */
.panel,.card,.sidecard{transition:transform .14s ease, border-color .14s ease, background .14s ease}
.panel:hover,.card:hover,.sidecard:hover{transform:translateY(-2px); border-color:rgba(255,159,26,.22)}
/* Hero spacing */
.hero-inner{padding:26px; gap:20px}
.badges{gap:8px}
.badge{padding:7px 10px}
/* Quick join row */
.btnrow{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
/* Tables */
.tablewrap table tbody tr:hover td{background:rgba(255,255,255,.02)}
th,td{vertical-align:top}
/* Sidebars on mobile: keep them, but put main first */
@media (max-width: 980px){
  .layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "main"
      "left"
      "right";
  }
  .leftbar{grid-area:left; display:block}
  .maincol{grid-area:main}
  .rightbar{grid-area:right; display:block}
  .sidecard iframe{height:420px}
}


/* Trackbase server status panel */
.servermon-panel .servermon{min-height:220px}
.servermon-panel .servermon iframe{width:100%}
/* === swap_discord_trackbase v1.1 === */
.embed iframe{width:100%; border:0; border-radius:12px}
.discord-panel .embed iframe{height:520px}
.servermon-sidecard .servermon{min-height:640px}
.servermon-sidecard .servermon iframe{width:100%}
@media (max-width: 1200px){
  .servermon-sidecard .servermon{min-height:520px}
}


/* === trackbase_pheight_centered === */
/* Center embeds inside their panels (Trackbase + Discord) */
.servermon, .embed{display:flex; justify-content:center; align-items:flex-start}
.servermon iframe, .embed iframe{max-width:100%}
/* Slight optical nudge so embeds sit nicely centered in their sections */
.discord-panel, .servermon-sidecard{padding-left:18px; padding-right:18px}
@media (max-width: 980px){
  .discord-panel, .servermon-sidecard{padding-left:14px; padding-right:14px}
}