/* ============================================================
   E811PRO PUBG CLAN — style.css
   PUBG HUD Aesthetic — Mobile First
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Bebas+Neue&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  /* PUBG Color Palette */
  --pubg-orange:   #f0a500;
  --pubg-orange-d: #c47f00;
  --pubg-tan:      #d4b483;
  --pubg-tan-l:    #e8d4a8;
  --pubg-tan-d:    #8a6a3a;
  --red:           #d0212b;
  --red-bright:    #ff2d38;
  --red-dark:      #8a0d14;
  --fire:          #e85d04;
  --silver:        #c8c8d0;
  --silver-l:      #e8e8f0;
  --silver-dim:    #7a7a88;
  --dark:          #0a0906;
  --darker:        #050403;
  --panel:         #0f0e0b;
  --panel2:        #161410;
  --panel3:        #1e1b14;
  --border:        #2a2620;
  --border2:       #3a3530;
  --text:          #d4c9b0;
  --muted:         #6a6050;
  --green:         #5ab96a;
  --gold:          #f0a500;
  --gold-d:        #c47f00;

  --grad-orange: linear-gradient(135deg, #f0a500 0%, #e85d04 100%);
  --grad-silver: linear-gradient(135deg, #888 0%, #ddd 50%, #999 100%);
  --grad-dark:   linear-gradient(180deg, #161410 0%, #050403 100%);
  --grad-red:    linear-gradient(135deg, #d0212b 0%, #e85d04 100%);

  --glow-orange: 0 0 20px rgba(240,165,0,0.45), 0 0 40px rgba(240,165,0,0.2);
  --glow-red:    0 0 20px rgba(208,33,43,0.45), 0 0 40px rgba(208,33,43,0.2);

  --header-h: 60px;
  --mobile-nav-h: 56px;
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  background: var(--darker);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Page main — pushes footer to bottom */
#page-main {
  flex: 1;
  min-height: 0;
  padding-top: var(--header-h);
}

/* PUBG scanlines overlay */
body::before {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 3px
  );
  pointer-events:none; z-index:9999;
}

/* Vignette */
body::after {
  content:'';
  position:fixed; inset:0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
  pointer-events:none; z-index:9998;
}

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background: var(--darker); }
::-webkit-scrollbar-thumb { background: var(--gold-d); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ===== LAYOUT ===== */
.container { max-width:1400px; margin:0 auto; padding:0 16px; }
@media (min-width:768px) { .container { padding:0 24px; } }

.section {
  padding: 40px 0 60px;
  min-height: 0;
}

/* ===== HEADER — Desktop ===== */
header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height: var(--header-h);
  background: rgba(5,4,3,0.97);
  border-bottom: 1px solid rgba(240,165,0,0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@media (max-width: 900px) {
  header {
    background: rgba(4,3,2,0.98) !important;
    border-bottom: 1px solid rgba(240,165,0,0.3);
  }
}

/* PUBG HUD bottom line */
header::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240,165,0,0.6) 20%,
    rgba(240,165,0,1) 50%,
    rgba(240,165,0,0.6) 80%,
    transparent 100%
  );
}

/* Corner decorations — HUD style */
header::before {
  content:'';
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:
    linear-gradient(90deg, rgba(240,165,0,0.08) 0px, transparent 3px),
    linear-gradient(270deg, rgba(240,165,0,0.08) 0px, transparent 3px);
  pointer-events:none;
}

.header-inner {
  max-width:1400px; margin:0 auto; padding:0 16px;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
@media (min-width:768px) { .header-inner { padding:0 24px; } }

/* LOGO */
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.logo-img {
  height:44px; width:auto;
  filter: drop-shadow(0 0 10px rgba(240,165,0,0.5));
  transition: filter .3s;
}
.logo-img:hover { filter: drop-shadow(0 0 18px rgba(240,165,0,0.8)); }
.logo-text-wrap { display:flex; flex-direction:column; line-height:1; }
.logo-name {
  font-family:'Bebas Neue',sans-serif;
  font-size:22px; letter-spacing:5px;
  background: var(--grad-silver);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.logo-sub {
  font-size:9px; letter-spacing:4px;
  color:var(--gold);
  font-family:'Share Tech Mono',monospace;
  margin-top:2px;
}

/* ── DESKTOP NAV ── */
nav {
  display:none;
  align-items:center;
  gap:0;
  position:relative;
}
@media (min-width:900px) { nav { display:flex; } }

nav a {
  color:var(--muted); text-decoration:none;
  font-size:11px; font-weight:700; letter-spacing:2px;
  padding:8px 11px; transition:color .2s, background .2s; position:relative;
  font-family:'Rajdhani',sans-serif; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:5px;
}
nav a::before {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--grad-orange);
  transform:scaleX(0); transition:transform .25s; transform-origin:center;
}
nav a:hover, nav a.active { color:var(--tan-l, #e8d4a8); }
nav a:hover::before, nav a.active::before { transform:scaleX(1); }

/* Nav icon */
.nav-icon { font-size:13px; line-height:1; }

/* Vertical separator */
.nav-sep {
  display:inline-block; width:1px; height:18px;
  background:linear-gradient(180deg, transparent, rgba(240,165,0,0.35), transparent);
  margin:0 4px; flex-shrink:0;
}

/* ── DROPDOWN NAVIGATION ── */
.nav-dropdown {
  position:relative;
  display:inline-flex;
  align-items:center;
  /* Prevent dropdown from pushing layout */
  z-index:1;
}
.nav-dropdown:hover {
  z-index:9998;
}

.nav-dropdown-btn {
  background:transparent;
  border:none;
  cursor:pointer;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  padding:8px 11px;
  font-family:'Rajdhani',sans-serif;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:color .2s;
  position:relative;
  white-space:nowrap;
}
.nav-dropdown-btn::before {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--grad-orange);
  transform:scaleX(0); transition:transform .25s; transform-origin:center;
}
.nav-dropdown:hover .nav-dropdown-btn,
.nav-dropdown-btn.active {
  color:#f0a500;
}
.nav-dropdown:hover .nav-dropdown-btn::before,
.nav-dropdown-btn.active::before {
  transform:scaleX(1);
}

.nav-dd-arrow {
  font-size:9px;
  opacity:0.6;
  transition:transform .2s;
  display:inline-block;
}
.nav-dropdown:hover .nav-dd-arrow {
  transform:rotate(180deg);
}

/* Dropdown menu */
.nav-dropdown-menu {
  position:absolute;
  top:100%;
  left:0;
  width:200px;
  background:#0d0d0d;
  border:1px solid rgba(240,165,0,0.25);
  border-top:2px solid var(--gold, #f0a500);
  opacity:0;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease;
  z-index:9999;
  box-shadow:0 16px 40px rgba(0,0,0,0.8);
  /* Prevent overflow off right edge */
  max-width:calc(100vw - 20px);
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.nav-dropdown-menu a {
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--muted);
  text-decoration:none;
  font-family:'Share Tech Mono',monospace;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background .12s, color .12s, padding-left .12s;
  white-space:nowrap;
  width:100%;
  box-sizing:border-box;
}
.nav-dropdown-menu a:last-child { border-bottom:none; }
.nav-dropdown-menu a:hover {
  background:rgba(240,165,0,0.08);
  color:var(--gold, #f0a500);
  padding-left:18px;
}
.nav-dropdown-menu a.active {
  color:var(--gold, #f0a500);
  background:rgba(240,165,0,0.05);
  border-left:2px solid var(--gold, #f0a500);
  padding-left:12px;
}
.nav-dropdown-menu a::before { display:none; }
/* Last dropdown opens to the left to avoid viewport overflow */
.nav-dropdown.dd-right .nav-dropdown-menu {
  left:auto;
  right:0;
}


/* Clan-Aktionen: subtle orange tint on hover */
nav a.nav-action:hover, nav a.nav-action.active { color:#f0a500; }
nav a.nav-action::before { background:var(--grad-orange); }

/* Teamspeak: blue accent */
nav a.nav-special { color:#5b9bd5; }
nav a.nav-special:hover, nav a.nav-special.active { color:#7db8e8; }
nav a.nav-special::before { background:linear-gradient(90deg,#007acc,#005a99); }

/* Bewerben: gold pill CTA */
nav a.nav-cta {
  color:#0d0d0d;
  background:linear-gradient(135deg,#f0a500,#c47f00);
  padding:6px 14px;
  font-size:10px; letter-spacing:2.5px;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  margin-left:4px;
}
nav a.nav-cta:hover { background:linear-gradient(135deg,#ffc62a,#e09500); color:#000; }
nav a.nav-cta::before { display:none; }
nav a.nav-cta.active { background:linear-gradient(135deg,#ffd050,#f0a500); }

/* Admin link */
nav a.nav-admin { color:var(--gold); font-size:11px; }
nav a.nav-admin:hover { color:#ffd050; }

.header-right { display:flex; align-items:center; gap:8px; }

/* USER MENU */
.user-menu-wrap { position:relative; }
.user-menu-btn {
  display:flex; align-items:center; gap:8px;
  background:none; border:1px solid rgba(240,165,0,0.3);
  color:var(--text); padding:6px 12px; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:1px; transition:all .2s;
}
.user-menu-btn:hover { border-color:var(--gold); color:#fff; box-shadow:var(--glow-orange); }
.user-av {
  width:26px; height:26px; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-size:9px; color:var(--gold);
  overflow:hidden; flex-shrink:0;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.user-av img { width:100%; height:100%; object-fit:cover; }
.user-dropdown {
  display:none; position:absolute; top:calc(100% + 4px); right:0; width:220px;
  background:var(--panel); border:1px solid rgba(240,165,0,0.25);
  border-top:2px solid var(--gold); z-index:500;
  box-shadow:var(--glow-orange);
}
.user-dropdown.open { display:block; }
.user-dropdown a, .user-dropdown button {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 16px; font-size:13px; color:var(--text);
  text-decoration:none; background:none; border:none; cursor:pointer;
  font-family:'Rajdhani',sans-serif; letter-spacing:1px; transition:all .15s;
  border-bottom:1px solid var(--border);
}
.user-dropdown a:hover, .user-dropdown button:hover {
  color:#fff; background:rgba(240,165,0,0.08);
}

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 22px; font-family:'Rajdhani',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:2px;
  cursor:pointer; border:none; transition:all .2s; text-transform:uppercase;
  text-decoration:none; position:relative; overflow:hidden;
  clip-path:polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
/* PUBG button shimmer */
.btn::after {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition:left .4s;
}
.btn:hover::after { left:140%; }

.btn-red {
  background: var(--grad-red); color:#fff;
  box-shadow: 0 2px 12px rgba(208,33,43,0.3);
}
.btn-red:hover { box-shadow:var(--glow-red); transform:translateY(-1px); }
.btn-gold {
  background: var(--grad-orange); color:#0a0906;
  box-shadow: 0 2px 12px rgba(240,165,0,0.3);
  font-weight:900;
}
.btn-gold:hover { box-shadow:var(--glow-orange); transform:translateY(-1px); }
.btn-silver {
  background: rgba(255,255,255,.92);
  color: #111;
  border: 2px solid rgba(255,255,255,.6);
  text-shadow: none;
  font-weight: 700;
}
.btn-silver:hover {
  background: #fff;
  border-color: var(--gold);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255,255,255,.25);
}
.btn-outline {
  background:transparent; border:1px solid var(--border2); color:var(--muted);
  clip-path:none;
}
.btn-outline:hover { border-color:var(--gold); color:var(--silver-l); }
.btn-ghost {
  background:transparent; border:1px solid rgba(240,165,0,0.4); color:var(--gold);
  clip-path:none;
}
.btn-ghost:hover { background:rgba(240,165,0,0.1); border-color:var(--gold); color:#fff; }
.btn-dark {
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.85);
  clip-path: none;
  backdrop-filter: blur(4px);
}
.btn-dark:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}
.btn-sm { padding:5px 13px; font-size:11px; letter-spacing:1.5px; clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%); }
.btn-full { width:100%; padding:13px; font-size:14px; }

/* ===== FORMS ===== */
.form-group { margin-bottom:18px; }
.form-label {
  display:block; font-family:'Share Tech Mono',monospace;
  font-size:10px; letter-spacing:2.5px; color:var(--muted);
  margin-bottom:7px; text-transform:uppercase;
}
.form-input, .form-textarea, .form-select {
  width:100%; background:rgba(0,0,0,0.6);
  border:1px solid var(--border2);
  border-bottom:2px solid var(--border2);
  color:var(--text); padding:11px 14px;
  font-family:'Rajdhani',sans-serif; font-size:15px;
  outline:none; transition:all .2s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color:var(--gold);
  border-bottom-color:var(--gold);
  box-shadow:0 0 0 1px rgba(240,165,0,0.15), inset 0 -2px 0 var(--gold);
  background:rgba(240,165,0,0.03);
}
.form-textarea { min-height:110px; resize:vertical; }
.form-select { cursor:pointer; }
.form-select option { background:var(--panel); }
.form-row { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:600px) { .form-row { grid-template-columns:1fr 1fr; } }

/* ===== ALERTS ===== */
.alert {
  padding:12px 16px; border-left:3px solid; font-size:14px;
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
  font-family:'Rajdhani',sans-serif; letter-spacing:0.5px;
}
.alert-success { background:rgba(90,185,106,.08); border-color:var(--green); color:var(--green); }
.alert-error   { background:rgba(208,33,43,.1);   border-color:var(--red);   color:var(--red-bright); }
.alert-info    { background:rgba(240,165,0,.07);  border-color:var(--gold);  color:var(--pubg-tan); }
.alert-warn    { background:rgba(232,93,4,.08);   border-color:var(--fire);  color:var(--fire); }

/* ===== CARDS ===== */
.card {
  background:var(--panel); border:1px solid var(--border);
  position:relative;
}
/* PUBG corner accent */
.card::before {
  content:''; position:absolute; top:0; left:0;
  width:8px; height:8px;
  border-top:2px solid var(--gold);
  border-left:2px solid var(--gold);
  pointer-events:none;
}
.card::after {
  content:''; position:absolute; bottom:0; right:0;
  width:8px; height:8px;
  border-bottom:2px solid rgba(240,165,0,0.3);
  border-right:2px solid rgba(240,165,0,0.3);
  pointer-events:none;
}
.card-header {
  padding:13px 20px; border-bottom:1px solid var(--border);
  background:linear-gradient(90deg, rgba(240,165,0,0.04), transparent);
}
.card-body { padding:18px 20px; }
.card-title {
  font-family:'Orbitron',sans-serif; font-size:11px;
  font-weight:700; letter-spacing:3px; color:var(--gold); text-transform:uppercase;
}

/* ===== SECTION TITLES ===== */
.page-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(24px,4vw,38px); letter-spacing:4px; color:#fff;
}
.page-title span { color:var(--gold); }
.title-line {
  width:60px; height:2px; background:var(--grad-orange); margin-top:6px;
}
.section-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:32px;
}

/* ===== HERO ===== */
.hero {
  min-height:100svh; padding-top:0;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
}
.hero-banner { position:absolute; inset:0; background:#030403; }
.hero-banner img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  opacity:0.5; filter:saturate(1.2) brightness(0.65);
}
.hero-banner::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,4,3,0.4) 0%, transparent 25%, transparent 55%, rgba(5,4,3,0.97) 100%),
    linear-gradient(90deg, rgba(5,4,3,0.75) 0%, transparent 60%, rgba(5,4,3,0.5) 100%);
}

/* HUD corner overlays */
.hero-hud-tl, .hero-hud-tr, .hero-hud-bl, .hero-hud-br {
  position:absolute; z-index:3; pointer-events:none;
  width:60px; height:60px;
}
@media (min-width:600px) { .hero-hud-tl, .hero-hud-tr, .hero-hud-bl, .hero-hud-br { width:90px; height:90px; } }
.hero-hud-tl { top:var(--header-h); left:0; border-top:2px solid rgba(240,165,0,0.5); border-left:2px solid rgba(240,165,0,0.5); }
.hero-hud-tr { top:var(--header-h); right:0; border-top:2px solid rgba(240,165,0,0.5); border-right:2px solid rgba(240,165,0,0.5); }
.hero-hud-bl { bottom:0; left:0; border-bottom:2px solid rgba(240,165,0,0.3); border-left:2px solid rgba(240,165,0,0.3); }
.hero-hud-br { bottom:0; right:0; border-bottom:2px solid rgba(240,165,0,0.3); border-right:2px solid rgba(240,165,0,0.3); }

.hero-content {
  position:relative; z-index:2; flex:1;
  display:flex; align-items:center;
  padding:40px 0 60px;
}
.hero-inner { max-width:1400px; margin:0 auto; padding:0 16px; width:100%; }
@media (min-width:768px) { .hero-inner { padding:0 24px; } }

/* PUBG status badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:3px;
  color:var(--gold); border:1px solid rgba(240,165,0,0.35);
  padding:5px 13px; margin-bottom:20px;
  background:rgba(240,165,0,0.06);
  text-transform:uppercase;
}
.hero-badge::before {
  content:''; width:6px; height:6px; background:var(--gold);
  border-radius:50%; animation:blink 2s infinite;
  box-shadow:0 0 6px var(--gold); flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.15} }

.hero-h1 {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,11vw,120px);
  line-height:0.9; letter-spacing:2px; color:#fff;
}
.hero-h1 .name-e811 {
  background:var(--grad-silver);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.9));
  display:block;
}
.hero-h1 .name-pro { color:var(--gold); text-shadow:var(--glow-orange); }
.hero-h1 .name-clan {
  color:rgba(212,196,176,0.6); font-size:0.35em;
  letter-spacing:10px; display:block; margin-top:6px;
}

.hero-desc {
  margin-top:20px; font-size:16px; color:rgba(212,196,176,0.7);
  max-width:420px; line-height:1.6;
}
@media (min-width:768px) { .hero-desc { font-size:17px; max-width:480px; } }

.hero-btns { margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-btns .btn { font-size:13px; padding:13px 28px; letter-spacing:2px; }
@media (min-width:480px) { .hero-btns .btn { font-size:15px; padding:14px 36px; } }

/* PUBG-style stats bar */
.hero-stats {
  margin-top:48px;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:rgba(240,165,0,0.2);
  border:1px solid rgba(240,165,0,0.2);
  max-width:480px;
  position:relative;
}
@media (min-width:480px) { .hero-stats { grid-template-columns:repeat(4,1fr); max-width:640px; } }
.hero-stats::before {
  content:'CLAN STATUS';
  position:absolute; top:-20px; left:0;
  font-family:'Share Tech Mono',monospace; font-size:9px;
  letter-spacing:3px; color:rgba(240,165,0,0.5);
}
.hero-stat {
  background:rgba(5,4,3,0.8); padding:18px 14px; text-align:center;
  backdrop-filter:blur(4px);
}
.hero-stat-num {
  font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:2px;
  color:var(--gold); text-shadow:var(--glow-orange); line-height:1;
}
.hero-stat-lbl {
  font-size:9px; letter-spacing:2px; color:var(--muted);
  margin-top:4px; font-family:'Share Tech Mono',monospace; text-transform:uppercase;
}

/* ===== FEED ===== */
.feed-grid {
  display:grid; grid-template-columns:1fr;
  gap:20px; align-items:start;
}
@media (min-width:900px) {
  .feed-grid { grid-template-columns:1fr 300px; }
}
@media (min-width:1100px) {
  .feed-grid { grid-template-columns:1fr 320px; }
}

/* POST CARD */
.post-card {
  background:var(--panel); border:1px solid var(--border);
  margin-bottom:12px; overflow:hidden; transition:border-color .2s;
  position:relative;
}
.post-card:hover { border-color:rgba(240,165,0,0.3); }
.post-card::before {
  content:''; position:absolute; top:0; left:0; width:2px; height:0;
  background:var(--grad-orange); transition:height .3s;
}
.post-card:hover::before { height:100%; }

.post-head { padding:14px 16px 10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
@media (min-width:480px) { .post-head { padding:16px 20px 12px; gap:12px; } }
.post-av {
  width:40px; height:40px; flex-shrink:0;
  border:2px solid rgba(240,165,0,0.4);
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-size:11px; color:var(--gold);
  background:rgba(240,165,0,0.06); overflow:hidden;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
@media (min-width:480px) { .post-av { width:44px; height:44px; } }
.post-av img { width:100%; height:100%; object-fit:cover; }
.post-meta { flex:1; min-width:0; }
.post-author { font-weight:700; color:#fff; font-size:14px; }
@media (min-width:480px) { .post-author { font-size:15px; } }
.post-time { font-size:10px; color:var(--muted); font-family:'Share Tech Mono',monospace; margin-top:2px; }
.post-type {
  font-size:9px; letter-spacing:2px; padding:3px 8px;
  border:1px solid; font-family:'Share Tech Mono',monospace; white-space:nowrap;
}
.type-news    { color:#ff9800; border-color:rgba(255,152,0,.5); background:rgba(255,152,0,.06); }
.type-event   { color:#4fc3f7; border-color:rgba(79,195,247,.4); }
.type-media   { color:var(--fire); border-color:rgba(232,93,4,.4); background:rgba(232,93,4,.05); }
.type-general { color:var(--muted); border-color:var(--border); }

.post-body { padding:0 16px 12px; }
@media (min-width:480px) { .post-body { padding:0 20px 14px; } }
.post-title {
  font-family:'Bebas Neue',sans-serif; font-size:20px;
  color:#fff; letter-spacing:1.5px; margin-bottom:8px; line-height:1.2;
}
@media (min-width:480px) { .post-title { font-size:22px; } }
.post-text { font-size:14px; color:var(--text); line-height:1.65; white-space:pre-line; }
@media (min-width:480px) { .post-text { font-size:15px; } }
.post-media { width:100%; max-height:320px; object-fit:cover; display:block; margin:12px 0; filter:brightness(.85); }
.post-video { width:100%; max-height:320px; display:block; margin:12px 0; background:#000; }
.post-foot {
  padding:8px 16px; border-top:1px solid var(--border);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
@media (min-width:480px) { .post-foot { padding:10px 20px; gap:14px; } }
.post-action {
  display:flex; align-items:center; gap:5px; font-size:13px;
  color:var(--muted); cursor:pointer; padding:5px 6px; transition:all .2s;
  background:none; border:none; font-family:'Rajdhani',sans-serif; letter-spacing:1px;
}
.post-action:hover { color:var(--gold); }
.post-action.liked { color:var(--red-bright); }
.pinned-badge {
  margin-left:auto; font-size:9px; letter-spacing:2px; color:var(--gold);
  padding:2px 8px; border:1px solid rgba(240,165,0,0.4);
  font-family:'Share Tech Mono',monospace;
}

/* Comments */
.comments-wrap { border-top:1px solid var(--border); padding:14px 16px; background:rgba(0,0,0,0.25); }
@media (min-width:480px) { .comments-wrap { padding:16px 20px; } }
.comment-item { display:flex; gap:10px; margin-bottom:12px; }
.comment-av {
  width:30px; height:30px; flex-shrink:0;
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-size:9px; color:var(--gold);
  background:rgba(240,165,0,0.05); overflow:hidden;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.comment-av img { width:100%; height:100%; object-fit:cover; }
.comment-author { font-size:12px; font-weight:700; color:#fff; }
.comment-text { font-size:13px; color:var(--text); margin-top:2px; line-height:1.5; }
.comment-input-row { display:flex; gap:8px; margin-top:12px; }
.comment-input {
  flex:1; background:rgba(0,0,0,0.5); border:1px solid var(--border2);
  color:var(--text); padding:9px 12px; font-family:'Rajdhani',sans-serif;
  font-size:14px; outline:none; transition:all .2s; min-width:0;
}
.comment-input:focus { border-color:var(--gold); }

/* Create post bar */
.create-bar {
  background:var(--panel); border:1px solid var(--border);
  padding:12px 16px; display:flex; align-items:center; gap:10px;
  margin-bottom:12px; cursor:pointer; transition:border-color .2s;
}
@media (min-width:480px) { .create-bar { padding:14px 18px; } }
.create-bar:hover { border-color:rgba(240,165,0,0.35); }
.create-bar-placeholder { flex:1; color:var(--muted); font-size:14px; }

/* ===== SIDEBAR ===== */
.sidebar-widget { background:var(--panel); border:1px solid var(--border); margin-bottom:12px; overflow:hidden; }
.widget-head {
  padding:11px 16px; font-family:'Bebas Neue',sans-serif; font-size:15px;
  letter-spacing:3px; color:var(--silver); border-bottom:1px solid var(--border);
  background:linear-gradient(90deg, rgba(240,165,0,0.07), transparent);
  display:flex; align-items:center; gap:8px;
}
.widget-body { padding:13px 16px; }
.online-item { display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:9px; }
.dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dot-online  { background:var(--green); box-shadow:0 0 5px var(--green); }
.dot-away    { background:#f39c12; }
.dot-offline { background:var(--border2); }
.online-name { flex:1; font-size:14px; }
.online-role { font-size:9px; color:var(--muted); font-family:'Share Tech Mono',monospace; letter-spacing:1px; }
.event-item {
  padding:10px 11px; background:rgba(240,165,0,0.04);
  border-left:2px solid var(--gold); margin-bottom:9px;
}
.event-date { font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--gold); letter-spacing:1px; margin-bottom:3px; }
.event-name { font-size:14px; color:#fff; font-weight:700; font-family:'Bebas Neue',sans-serif; letter-spacing:1px; }
.event-info { font-size:11px; color:var(--muted); margin-top:2px; }

/* ===== MEMBERS ===== */
.members-grid {
  display:grid; grid-template-columns:1fr;
  gap:2px; background:rgba(240,165,0,0.12); border:1px solid rgba(240,165,0,0.12);
}
@media (min-width:480px) { .members-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px) { .members-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px) { .members-grid { grid-template-columns:repeat(4,1fr); } }

.member-card {
  background:var(--panel); padding:20px; position:relative;
  overflow:hidden; transition:background .2s;
}
@media (min-width:480px) { .member-card { padding:24px; } }
.member-card:hover { background:var(--panel2); }
.member-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.member-hex {
  width:52px; height:52px; flex-shrink:0; overflow:hidden;
  border:2px solid rgba(240,165,0,0.35);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:rgba(240,165,0,0.07);
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-size:14px; color:var(--gold);
  transition:border-color .2s;
}
@media (min-width:480px) { .member-hex { width:56px; height:56px; } }
.member-hex img { width:100%; height:100%; object-fit:cover; }
.member-card:hover .member-hex { border-color:var(--gold); }
.member-name { font-family:'Bebas Neue',sans-serif; font-size:17px; color:#fff; letter-spacing:2px; }
.member-role-lbl { font-size:9px; letter-spacing:2px; color:var(--gold); margin-top:2px; font-family:'Share Tech Mono',monospace; }
.member-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding-top:12px; border-top:1px solid var(--border); }
.ms { text-align:center; }
.ms-val { font-family:'Share Tech Mono',monospace; font-size:13px; color:var(--silver); }
.ms-key { font-size:8px; color:var(--muted); letter-spacing:1.5px; margin-top:2px; text-transform:uppercase; }

/* Badges */
.badge {
  position:absolute; top:12px; right:12px;
  font-size:8px; letter-spacing:1.5px; padding:3px 7px;
  border:1px solid; font-family:'Share Tech Mono',monospace;
  text-transform:uppercase;
}
.badge-leader   { color:#f0a500; border-color:#f0a500; background:rgba(240,165,0,.08); }
.badge-officer  { color:var(--silver); border-color:var(--silver); background:rgba(200,200,208,.04); }
.badge-member   { color:var(--muted); border-color:var(--border); }
.badge-recruit  { color:var(--fire); border-color:var(--fire); background:rgba(232,93,4,.05); }
.badge-applicant{ color:#444; border-color:#333; }

/* ===== RANKING ===== */
.rank-table { width:100%; border-collapse:collapse; }
.rank-table th {
  text-align:left; padding:11px 12px;
  font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2.5px; color:var(--muted);
  border-bottom:1px solid var(--border); background:rgba(240,165,0,0.03);
  white-space:nowrap;
}
@media (min-width:600px) { .rank-table th { padding:12px 18px; } }
.rank-table td { padding:12px 12px; border-bottom:1px solid var(--border); font-size:13px; transition:background .15s; }
@media (min-width:600px) { .rank-table td { padding:14px 18px; font-size:14px; } }
.rank-table tr:hover td { background:rgba(240,165,0,0.03); }
.rank-num { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:1px; color:var(--muted); width:44px; }
.tr-1 .rank-num { color:#ffd700; text-shadow:0 0 10px rgba(255,215,0,.5); }
.tr-2 .rank-num { color:var(--silver); }
.tr-3 .rank-num { color:#cd7f32; }
.rank-player { display:flex; align-items:center; gap:10px; }
.rank-av {
  width:34px; height:34px; border:2px solid rgba(240,165,0,.3); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-size:9px; color:var(--gold);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  overflow:hidden; background:rgba(240,165,0,.05);
}
@media (min-width:600px) { .rank-av { width:38px; height:38px; } }
.rank-av img { width:100%; height:100%; object-fit:cover; }
.kd-wrap { width:80px; height:3px; background:var(--border); }
@media (min-width:600px) { .kd-wrap { width:110px; } }
.kd-bar { height:100%; background:var(--grad-orange); }

/* ===== PROFILE ===== */
.profile-banner-wrap {
  position:relative; height:180px; overflow:hidden;
  background:linear-gradient(135deg, #1a0f05 0%, #0a0600 100%);
  border:1px solid var(--border);
}
@media (min-width:600px) { .profile-banner-wrap { height:220px; } }
@media (min-width:900px) { .profile-banner-wrap { height:260px; } }
.profile-banner-wrap img.banner-img { width:100%; height:100%; object-fit:cover; filter:brightness(.7); }
.profile-banner-default {
  width:100%; height:100%;
  background:linear-gradient(135deg, #1a0f05 0%, #0d0800 40%, #1a0a00 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.profile-banner-default::before {
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(240,165,0,.02) 30px, rgba(240,165,0,.02) 60px);
}
.profile-banner-overlay { position:absolute; bottom:0; left:0; right:0; height:80px; background:linear-gradient(transparent,rgba(5,4,3,.95)); }
.banner-edit-btn {
  position:absolute; top:12px; right:12px;
  background:rgba(0,0,0,.75); border:1px solid rgba(240,165,0,.4);
  color:var(--silver); padding:6px 12px; font-size:10px; letter-spacing:2px;
  cursor:pointer; font-family:'Share Tech Mono',monospace; transition:all .2s;
}
.banner-edit-btn:hover { border-color:var(--gold); color:#fff; background:rgba(240,165,0,.15); }
.profile-info-row {
  background:var(--panel); border:1px solid var(--border); border-top:none;
  padding:0 16px 24px; position:relative;
}
@media (min-width:600px) { .profile-info-row { padding:0 28px 28px; } }
.profile-avatar-wrap { display:flex; align-items:flex-end; gap:16px; margin-bottom:18px; }
@media (min-width:600px) { .profile-avatar-wrap { gap:22px; } }
.profile-avatar-outer {
  width:80px; height:80px; margin-top:-40px;
  border:3px solid var(--gold); flex-shrink:0;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--panel); overflow:hidden; position:relative;
  box-shadow:var(--glow-orange);
}
@media (min-width:600px) { .profile-avatar-outer { width:110px; height:110px; margin-top:-55px; } }
.profile-avatar-outer img { width:100%; height:100%; object-fit:cover; }
.profile-avatar-initials {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:32px; color:var(--gold);
  background:rgba(240,165,0,0.07);
}
.avatar-edit-btn {
  position:absolute; bottom:2px; right:2px;
  background:rgba(0,0,0,.9); border:1px solid var(--gold);
  color:var(--gold); width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; cursor:pointer; border-radius:50%; transition:all .2s;
}
.avatar-edit-btn:hover { background:var(--gold); color:#000; }
.profile-name-block { padding-bottom:4px; }
.profile-username { font-family:'Bebas Neue',sans-serif; font-size:26px; color:#fff; letter-spacing:3px; line-height:1; }
@media (min-width:600px) { .profile-username { font-size:32px; } }
.profile-role-tag {
  display:inline-block; font-size:9px; letter-spacing:2px; color:var(--gold);
  border:1px solid rgba(240,165,0,.4); padding:3px 9px; margin-top:6px;
  background:rgba(240,165,0,.06); font-family:'Share Tech Mono',monospace;
}
.profile-bio { font-size:14px; color:var(--muted); margin-top:10px; max-width:600px; line-height:1.6; }
.profile-stats { display:flex; gap:20px; margin-top:16px; flex-wrap:wrap; }
@media (min-width:480px) { .profile-stats { gap:32px; } }
.pstat-val { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:1px; color:var(--gold); text-shadow:var(--glow-orange); }
@media (min-width:480px) { .pstat-val { font-size:28px; } }
.pstat-key { font-size:9px; letter-spacing:2px; color:var(--muted); margin-top:2px; font-family:'Share Tech Mono',monospace; }
.profile-actions { position:absolute; top:14px; right:16px; display:flex; gap:8px; }
@media (min-width:600px) { .profile-actions { top:20px; right:28px; } }
.profile-grid { display:grid; grid-template-columns:1fr; gap:18px; align-items:start; margin-top:18px; }
@media (min-width:900px) { .profile-grid { grid-template-columns:2fr 1fr; gap:22px; } }

/* ===== GALLERY ===== */
.gallery-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
}
@media (min-width:600px) { .gallery-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px) { .gallery-grid { grid-template-columns:repeat(4,1fr); } }
.gallery-item { aspect-ratio:16/10; background:var(--panel); position:relative; overflow:hidden; cursor:pointer; }
.gallery-item img, .gallery-item video { width:100%; height:100%; object-fit:cover; filter:brightness(.75) saturate(.8); transition:all .3s; }
.gallery-item:hover img, .gallery-item:hover video { filter:brightness(1) saturate(1.1); transform:scale(1.03); }
.gallery-overlay { position:absolute; inset:0; background:rgba(240,165,0,.12); opacity:0; transition:opacity .2s; display:flex; align-items:center; justify-content:center; font-size:24px; }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--muted); font-size:10px; letter-spacing:2px; font-family:'Share Tech Mono',monospace; }
.gallery-label { position:absolute; bottom:0; left:0; right:0; padding:8px 10px; background:linear-gradient(transparent,rgba(0,0,0,.85)); }
.gallery-label-title { font-family:'Bebas Neue',sans-serif; font-size:13px; color:#fff; letter-spacing:1px; }
.gallery-label-sub { font-size:9px; color:var(--muted); }

/* ===== APPLY ===== */
.apply-layout { display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
@media (min-width:900px) { .apply-layout { grid-template-columns:1fr 1fr; gap:40px; } }
.apply-form { background:var(--panel); border:1px solid var(--border); border-top:2px solid var(--gold); padding:22px; }
@media (min-width:480px) { .apply-form { padding:30px; } }
.req-item { display:flex; gap:12px; padding:11px 13px; background:var(--panel); border:1px solid var(--border); margin-bottom:7px; transition:border-color .2s; }
.req-item:hover { border-color:rgba(240,165,0,.3); }
.req-icon { font-size:16px; flex-shrink:0; }
.req-text { font-size:14px; color:var(--text); line-height:1.4; }

/* ===== UPLOAD ZONE ===== */
.upload-zone {
  border:2px dashed var(--border2); padding:22px; text-align:center;
  cursor:pointer; transition:all .2s;
  font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:1px;
}
@media (min-width:480px) { .upload-zone { padding:28px; } }
.upload-zone:hover { border-color:var(--gold); background:rgba(240,165,0,.04); color:var(--silver); }
.upload-zone input { display:none; }

/* ===== MODAL ===== */
.modal-bg {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.9); z-index:2000;
  align-items:center; justify-content:center;
  backdrop-filter:blur(6px); padding:16px;
}
.modal-bg.open { display:flex; }
.modal-box {
  background:var(--panel); border:1px solid var(--border2);
  border-top:2px solid var(--gold); width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto;
  box-shadow:var(--glow-orange);
  position:relative;
}
/* Modal HUD corners */
.modal-box::before {
  content:''; position:absolute; bottom:0; right:0;
  width:16px; height:16px;
  border-bottom:2px solid rgba(240,165,0,0.3);
  border-right:2px solid rgba(240,165,0,0.3);
  pointer-events:none;
}
.modal-head {
  padding:18px 22px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-title { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--gold); letter-spacing:3px; }
.modal-close {
  width:30px; height:30px; background:var(--border); border:none;
  cursor:pointer; color:var(--muted); font-size:16px;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.modal-close:hover { background:var(--red); color:#fff; }
.modal-body { padding:22px; }

/* ===== TOAST ===== */
.toasts { display:none; } /* ersetzt durch e811Notify in app.js */


/* ===== ADMIN — siehe admin.css ===== */

/* ===== PAGINATION ===== */
.pagination { display:flex; gap:4px; margin-top:20px; justify-content:center; flex-wrap:wrap; }
.page-btn {
  padding:7px 13px; background:var(--panel); border:1px solid var(--border);
  color:var(--muted); text-decoration:none; font-size:12px; transition:all .2s;
}
.page-btn:hover, .page-btn.active { border-color:var(--gold); color:#fff; background:rgba(240,165,0,.07); }

/* ===== SEARCH ===== */
.search-bar { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }
.search-input {
  background:var(--panel); border:1px solid var(--border2);
  color:var(--text); padding:9px 13px; font-family:'Rajdhani',sans-serif;
  font-size:14px; outline:none; flex:1; min-width:150px; transition:all .2s;
}
.search-input:focus { border-color:var(--gold); }

/* Divider */
.divider {
  position:relative; text-align:center; color:var(--muted);
  font-size:10px; letter-spacing:2px; margin:16px 0;
  font-family:'Share Tech Mono',monospace;
}
.divider::before,.divider::after {
  content:''; position:absolute; top:50%; width:calc(50% - 28px); height:1px; background:var(--border);
}
.divider::before{left:0} .divider::after{right:0}

/* Notif badge */
.notif-badge { background:var(--red); color:#fff; font-size:9px; padding:2px 6px; border-radius:10px; margin-left:4px; }

/* Messages */
.msg-bubble { padding:10px 13px; max-width:75%; font-size:14px; line-height:1.5; }
.msg-mine   { background:rgba(240,165,0,.12); border:1px solid rgba(240,165,0,.25); margin-left:auto; }
.msg-theirs { background:var(--panel2); border:1px solid var(--border); }

/* Admin branding */
.branding-preview { border:1px solid var(--border); overflow:hidden; margin-bottom:18px; }
.branding-banner-prev { height:100px; background:var(--panel2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
@media (min-width:480px) { .branding-banner-prev { height:120px; } }
.branding-banner-prev img { width:100%; height:100%; object-fit:cover; }
.branding-logo-prev { display:flex; align-items:center; gap:14px; padding:14px; background:var(--panel); border-top:1px solid var(--border); }
.branding-logo-prev img { height:44px; width:auto; }

/* ===== PUBG-SPECIFIC EXTRAS ===== */

/* Kill feed style dividers */
.killfeed-line {
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:rgba(240,165,0,0.04); border-left:2px solid var(--gold);
  font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--muted);
  letter-spacing:1px; margin-bottom:6px;
}

/* Zone indicator */
.zone-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px;
  color:#4fc3f7; border:1px solid rgba(79,195,247,0.35);
  padding:3px 10px; background:rgba(79,195,247,0.05);
}

/* HUD health bar style */
.hud-bar-wrap { height:3px; background:var(--border); width:100%; }
.hud-bar { height:100%; background:var(--grad-orange); transition:width 1s; }

/* Level indicator */
.level-badge {
  font-family:'Orbitron',sans-serif; font-size:9px; font-weight:700;
  color:var(--gold); border:1px solid rgba(240,165,0,0.5);
  padding:2px 7px; letter-spacing:1px; background:rgba(240,165,0,0.07);
}

/* Rank tier colors */
.rank-bronze  { color:#cd7f32; }
.rank-silver  { color:#c0c0c0; }
.rank-gold    { color:#ffd700; }
.rank-plat    { color:#4fc3f7; }
.rank-diamond { color:#9b59b6; }
.rank-master  { color:var(--gold); text-shadow:var(--glow-orange); }

/* Print/export hide */
@media print { .header, .bottom-nav, .mobile-nav, .toasts { display:none; } }

/* ===== UTILITY ===== */
.hidden { display:none !important; }
.text-gold { color:var(--gold); }
.text-red  { color:var(--red-bright); }
.text-muted { color:var(--muted); }
.text-center { text-align:center; }
.mt-auto { margin-top:auto; }
.gap-8  { gap:8px; }
.flex   { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }

/* ===== MOBILE NAV (added) ===== */

/* Username hide on very small screens */
@media (max-width:400px) { .nav-username { display:none; } }

/* Desktop-only elements */
@media (max-width:899px) { .desktop-only { display:none !important; } }

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: rgba(5,4,3,0.99);
  backdrop-filter: blur(20px);
  border-top: 2px solid rgba(240,165,0,0.3);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.open { display: block; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

.mobile-nav-inner {
  padding: 20px 0 80px;
  display: flex;
  flex-direction: column;
}

.mobile-nav-section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(240,165,0,0.4);
  padding: 14px 24px 6px;
  text-transform: uppercase;
}

.mobile-nav-sep {
  height: 1px;
  background: rgba(240,165,0,0.1);
  margin: 10px 24px;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 24px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: rgba(212,196,176,0.7);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.15s;
  position: relative;
}
.mobile-nav-link span:first-child {
  font-size: 20px;
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}
.mobile-nav-link:hover,
.mobile-nav-link:active {
  color: #fff;
  background: rgba(240,165,0,0.06);
  border-left-color: var(--gold);
}
.mobile-nav-link.active {
  color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(240,165,0,0.05);
}

/* HAMBURGER */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 9px 8px;
  background: none;
  border: 1px solid var(--border2);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
@media (min-width: 900px) { .hamburger { display: none; } }
.hamburger:hover { border-color: var(--gold); }
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  transition: all 0.28s cubic-bezier(.23,1,.32,1);
  transform-origin: center;
  border-radius: 1px;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--gold); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--gold); }

/* BOTTOM NAV BAR — scrollbar, alle Seiten */
.bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 998;
  background: rgba(5,4,3,0.97);
  border-top: 1px solid rgba(240,165,0,0.2);
  height: var(--mobile-nav-h);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bottom-nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .bottom-nav { display: none; } }

.bottom-nav a {
  flex: 0 0 auto;
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--muted);
  font-size: 7.5px;
  letter-spacing: 0.8px;
  font-family: 'Share Tech Mono', monospace;
  transition: all 0.2s;
  padding: 5px 6px;
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav a::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: var(--grad-orange);
  transform: scaleX(0);
  transition: transform 0.2s;
}
.bottom-nav a:hover,
.bottom-nav a.active {
  color: var(--gold);
}
.bottom-nav a:hover::before,
.bottom-nav a.active::before {
  transform: scaleX(1);
}
.bottom-nav-icon {
  font-size: 18px;
  line-height: 1;
}

/* Body padding for bottom nav on mobile */
@media (max-width: 899px) {
  body { padding-bottom: var(--mobile-nav-h); }
}

/* ===== RESPONSIVE FIXES ===== */

/* Modals full-screen on mobile */
@media (max-width: 600px) {
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal-box { max-width: 100%; max-height: 92vh; border-radius: 0; }
}

/* Hero adjustments mobile */
@media (max-width: 480px) {
  .hero-h1 { font-size: 52px; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn { width: 100%; justify-content: center; text-align: center; min-height: 50px; }
  .hero-stats { max-width: 100%; }
}

/* Tables scroll on mobile */
@media (max-width: 700px) {
  .rank-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rank-table { min-width: 500px; }
  /* Hide less important columns */
  .rank-hide-mobile { display: none; }
}

/* Profile on mobile */
@media (max-width: 600px) {
  .profile-actions { position: static; margin-top: 14px; }
  .profile-stats { gap: 16px; }
}

/* Feed create bar touch */
@media (max-width: 899px) {
  .sidebar-widget { display: none; }
  .feed-grid { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .sidebar-widget { display: block; }
}

/* Touch-friendly tap targets */
@media (max-width: 899px) {
  .btn { min-height: 44px; }
  .form-input, .form-textarea, .form-select { font-size: 16px; } /* prevent iOS zoom */
  .post-action { min-height: 40px; min-width: 40px; }
  .comment-input { font-size: 16px; }
}

/* Gallery 2-col on small mobile */
@media (max-width: 400px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* Members 1-col on small mobile */
@media (max-width: 400px) {
  .members-grid { grid-template-columns: 1fr; }
}


/* ===== REACTIONS ===== */
.reactions-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
@media (min-width:480px) { .reactions-bar { padding: 8px 20px; gap: 6px; } }

.reaction-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  padding: 5px 10px; cursor: pointer; font-size: 15px;
  transition: all .15s; border-radius: 0;
  font-family: inherit; color: var(--text);
  -webkit-tap-highlight-color: transparent;
  min-height: 34px;
}
.reaction-btn:hover {
  background: rgba(240,165,0,0.1);
  border-color: rgba(240,165,0,0.4);
  transform: scale(1.1);
}
.reaction-btn.active {
  background: rgba(240,165,0,0.15);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(240,165,0,0.25);
}
.reaction-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: 0.5px;
}
.reaction-btn.active .reaction-count { color: var(--gold); }

/* Bounce animation on react */
@keyframes reactBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.reaction-btn.bouncing { animation: reactBounce .35s ease; }

/* ===== EVENT CARDS (home page) ===== */
.event-card {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 16px;
  transition: border-color .2s;
}
.event-card:hover { border-left-color: var(--fire); }

.event-date-block {
  text-align: center; flex-shrink: 0;
  background: rgba(240,165,0,0.08);
  border: 1px solid rgba(240,165,0,0.25);
  padding: 8px 12px; min-width: 52px;
}
.edb-day  { font-family:'Bebas Neue',sans-serif; font-size:26px; color:var(--gold); line-height:1; }
.edb-mon  { font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:2px; margin-top:1px; }
.edb-time { font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--text); margin-top:3px; }

.event-reg-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; color: var(--muted); letter-spacing: 1px;
}

.evt-reg-btn {
  transition: all .2s;
}
.evt-reg-btn[data-registered="true"] {
  background: rgba(90,185,106,0.1) !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
}

/* ===== PUBG MODE STATS BREAKDOWN ===== */
.pubg-modes { width: 100%; }

.pubg-modes-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.pubg-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.pubg-mode-card {
  background: rgba(240,165,0,0.04);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  padding: 10px 12px;
  transition: border-color .2s, background .2s;
}
.pubg-mode-card:hover {
  background: rgba(240,165,0,0.08);
  border-left-color: var(--fire);
}

.pubg-mode-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 8px;
}

.pubg-mode-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pubg-mode-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
}

.pubg-mode-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: var(--text);
  line-height: 1;
}

.pubg-mode-key {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 600px) {
  .pubg-modes-grid {
    grid-template-columns: 1fr;
  }
}

/* Gesamt-Karte */
.pubg-mode-total {
  border-left: 2px solid var(--fire) !important;
  background: rgba(240,165,0,0.08) !important;
  grid-column: 1 / -1; /* full width — spans all columns */
}
.pubg-mode-total .pubg-mode-label {
  color: var(--fire);
  font-size: 16px;
}
.pubg-mode-total .pubg-mode-val {
  font-size: 22px;
  color: var(--gold);
}
.pubg-mode-total .pubg-mode-stats {
  gap: 24px;
}
/* ── Discord OAuth Button ─────────────────────────────────── */
.btn-discord-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #5865F2;
  color: #fff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-discord-oauth:hover {
  background: #4752c4;
  transform: translateY(-1px);
}
.btn-discord-oauth:active { transform: translateY(0); }

.divider-oauth {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
}
.divider-oauth::before,
.divider-oauth::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}


/* ============================================================
   MOBILE OPTIMIZATION — E811PRO
   Safe Area · Touch · Performance · PWA
   ============================================================ */

/* ── Safe Area Insets (iPhone Notch / Dynamic Island) ────── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* Header respects notch when in standalone/PWA mode */
@media (display-mode: standalone) {
  header {
    padding-top: var(--safe-top);
    height: calc(var(--header-h) + var(--safe-top));
  }
  .header-inner {
    height: var(--header-h);
  }
  #page-main {
    padding-top: calc(var(--header-h) + var(--safe-top));
  }
  .hero-section {
    padding-top: calc(var(--header-h) + var(--safe-top));
    margin-top: calc(-1 * (var(--header-h) + var(--safe-top)));
  }
}

/* Bottom Nav — safe area for iPhone home indicator */
.bottom-nav {
  padding-bottom: var(--safe-bottom);
  height: calc(var(--mobile-nav-h) + var(--safe-bottom));
}
@media (max-width: 899px) {
  body {
    padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom));
  }
}

/* Horizontal safe area */
.header-inner,
.hero-inner,
.container {
  padding-left:  max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}
@media (min-width: 768px) {
  .header-inner,
  .hero-inner,
  .container {
    padding-left:  max(24px, var(--safe-left));
    padding-right: max(24px, var(--safe-right));
  }
}

/* ── Touch Feedback & Active States ─────────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Buttons — visible press feedback on mobile */
@media (hover: none) and (pointer: coarse) {
  .btn:active {
    transform: scale(0.97);
    opacity: 0.9;
  }
  .post-card:active {
    border-color: rgba(240,165,0,0.35);
  }
  .mobile-nav a:active {
    background: rgba(240,165,0,0.08);
    color: var(--gold);
  }
  .bottom-nav a:active {
    color: var(--gold);
  }
  .reaction-btn:active {
    background: rgba(240,165,0,0.15);
    border-color: rgba(240,165,0,0.5);
    transform: scale(1.1);
  }
  .bottom-nav a:active::before {
    transform: scaleX(1);
  }
  /* Member cards */
  .member-card:active {
    border-color: rgba(240,165,0,0.3);
  }
  /* Create bar */
  .create-bar:active {
    border-color: rgba(240,165,0,0.35);
  }
}

/* ── Scroll Performance ──────────────────────────────────── */
.mobile-nav {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal-bg {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal-box {
  -webkit-overflow-scrolling: touch;
}
#notifDropdown {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent body scroll when modal/nav is open */
body.nav-open,
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ── Mobile Hero Section ─────────────────────────────────── */
@media (max-width: 480px) {
  /* More compact hero on small screens */
  .hero-content {
    padding: 28px 0 48px;
  }
  .hero-badge {
    font-size: 9px;
    padding: 4px 10px;
    margin-bottom: 14px;
  }
  .hero-h1 {
    font-size: clamp(44px, 13vw, 64px);
  }
  .hero-h1 .name-clan {
    letter-spacing: 6px;
  }
  .hero-desc {
    font-size: 14px;
    margin-top: 14px;
    max-width: 100%;
  }
  .hero-btns {
    margin-top: 22px;
    gap: 10px;
  }
  .hero-btns .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 14px;
  }
  /* Stats grid — better on small screens */
  .hero-stats {
    margin-top: 32px;
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-stat {
    padding: 14px 10px;
  }
  .hero-stat-num {
    font-size: 28px;
  }
  .hero-stat-lbl {
    font-size: 8px;
    letter-spacing: 1.5px;
  }
}

/* ── Modal as Bottom Sheet on Mobile ────────────────────── */
@media (max-width: 600px) {
  .modal-bg {
    padding: 0;
    align-items: flex-end;
  }
  .modal-box {
    max-width: 100%;
    width: 100%;
    max-height: 92svh;
    border-radius: 12px 12px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 2px solid var(--gold);
    /* Slide up animation */
    animation: slideUp .28s cubic-bezier(0.32, 0.72, 0, 1);
    /* Bottom safe area */
    padding-bottom: var(--safe-bottom);
  }
  .modal-box::before {
    /* Handle indicator */
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(240,165,0,0.35);
    border-radius: 2px;
    margin: 8px auto 0;
  }
  .modal-head {
    padding-top: 12px;
  }
  .modal-body {
    overflow-y: auto;
    max-height: calc(92svh - 80px);
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(22px, var(--safe-bottom));
  }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Notification Dropdown Mobile ───────────────────────── */
@media (max-width: 600px) {
  #notifDropdown {
    right: 0;
    left: 0;
    width: 100%;
    border-left: none;
    border-right: none;
    max-height: 60vh;
  }
}

/* ── Post Cards — tighter on mobile ─────────────────────── */
@media (max-width: 480px) {
  .post-type {
    font-size: 8px;
    padding: 2px 7px;
    letter-spacing: 1.5px;
  }
  .post-media {
    max-height: 260px;
    object-fit: cover;
    width: 100%;
  }
  .pinned-badge {
    font-size: 9px;
  }
}

/* ── Create Post Bar — mobile friendly ──────────────────── */
@media (max-width: 899px) {
  .create-bar {
    border-left: 2px solid rgba(240,165,0,0.3);
    transition: border-color .2s;
  }
  .create-bar:active {
    border-left-color: var(--gold);
  }
}

/* ── Forms — full-width select on mobile ────────────────── */
@media (max-width: 600px) {
  .form-select {
    font-size: 16px; /* prevent iOS zoom */
    background-image: none;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile Nav — larger touch targets ──────────────────── */
@media (max-width: 899px) {
  .mobile-nav a {
    padding: 18px 28px;
    min-height: 52px;
  }
  .mobile-nav-icon {
    font-size: 22px;
  }
}

/* ── Bottom Nav Icon Size ────────────────────────────────── */
@media (max-width: 380px) {
  .bottom-nav a {
    font-size: 8px;
    letter-spacing: 0.5px;
    gap: 2px;
  }
  .bottom-nav-icon {
    font-size: 16px;
  }
}

/* ── User Menu Dropdown — doesn't clip on mobile ─────────── */
@media (max-width: 600px) {
  .user-menu-dropdown {
    position: fixed;
    right: 8px;
    top: auto;
    left: auto;
    width: min(220px, calc(100vw - 16px));
  }
}

/* ── Ranking Table — horizontal scroll hint ─────────────── */
@media (max-width: 700px) {
  .rank-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Scroll shadow hint */
    background:
      linear-gradient(to right, var(--darker) 20px, transparent) left,
      linear-gradient(to left,  var(--darker) 20px, transparent) right;
    background-attachment: local;
    background-size: 40px 100%;
    background-repeat: no-repeat;
  }
}

/* ── Gallery — touch-friendly ───────────────────────────── */
@media (max-width: 600px) {
  .gallery-item {
    aspect-ratio: 4/3;
  }
}

/* ── Profile — compact on mobile ────────────────────────── */
@media (max-width: 480px) {
  .profile-info-block {
    padding: 14px 16px 16px;
  }
  .profile-name {
    font-size: clamp(24px, 8vw, 36px);
  }
  .profile-stats {
    gap: 12px;
    flex-wrap: wrap;
  }
}

/* ── Overscroll Behavior ─────────────────────────────────── */
html {
  overscroll-behavior-y: none;
}
.modal-box,
.mobile-nav,
#notifDropdown {
  overscroll-behavior: contain;
}

/* ── Image Loading Skeleton ──────────────────────────────── */
img[loading="lazy"] {
  background: var(--panel2);
}

/* ── PWA Standalone Status Bar gap fix ──────────────────── */
@media (display-mode: standalone) {
  .bottom-nav {
    height: calc(var(--mobile-nav-h) + var(--safe-bottom));
  }
}

/* ── Utility: text doesn't overflow on small screens ─────── */
@media (max-width: 480px) {
  .post-title {
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .post-text {
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .comment-text {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ===== PAGE BANNER BACKGROUND — fixed hinter Content ===== */
.page-banner-bg {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  z-index: -1;          /* hinter allem anderen */
  pointer-events: none;
}
.page-banner-bg .hero-banner {
  position: absolute;
  inset: 0;
  background: #030403;
}
.page-banner-bg .hero-banner img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: 0.45;
  filter: saturate(1.2) brightness(0.6);
}
.page-banner-bg .hero-banner::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5,4,3,0.15) 0%,
      transparent 20%,
      rgba(5,4,3,0.6) 65%,
      var(--darker) 100%
    ),
    linear-gradient(90deg,
      rgba(5,4,3,0.5) 0%,
      transparent 40%,
      transparent 60%,
      rgba(5,4,3,0.5) 100%
    );
}
/* HUD corner lines */
.page-banner-bg .hero-hud-tl {
  position: absolute; top: var(--header-h); left: 0;
  width: 60px; height: 60px;
  border-top: 2px solid rgba(240,165,0,0.5);
  border-left: 2px solid rgba(240,165,0,0.5);
  pointer-events: none;
}
.page-banner-bg .hero-hud-tr {
  position: absolute; top: var(--header-h); right: 0;
  width: 60px; height: 60px;
  border-top: 2px solid rgba(240,165,0,0.5);
  border-right: 2px solid rgba(240,165,0,0.5);
  pointer-events: none;
}
.page-banner-bg .hero-hud-bl {
  position: absolute; bottom: 0; left: 0;
  width: 60px; height: 60px;
  border-bottom: 2px solid rgba(240,165,0,0.3);
  border-left: 2px solid rgba(240,165,0,0.3);
  pointer-events: none;
}
.page-banner-bg .hero-hud-br {
  position: absolute; bottom: 0; right: 0;
  width: 60px; height: 60px;
  border-bottom: 2px solid rgba(240,165,0,0.3);
  border-right: 2px solid rgba(240,165,0,0.3);
  pointer-events: none;
}

/* Body background transparent so banner shows through */
body:has(.page-banner-bg) {
  background: transparent;
}

/* Sections after the fixed banner: transparent top, solid further down */
body:has(.page-banner-bg) .section,
body:has(.page-banner-bg) > div:not(.page-banner-bg) {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════
   NOTIFICATION SYSTEM — Global styles
   ═══════════════════════════════════════════════════════ */

/* Notification bell pulse when unread > 0 */
#notifBtn:has(#notifBadge:not([style*="display:none"])) #notifBellIcon {
  animation: ncBellShake 2.4s ease-in-out 1s infinite;
}
@keyframes ncBellShake {
  0%,100%   { transform: rotate(0deg); }
  5%        { transform: rotate(-12deg); }
  10%       { transform: rotate(12deg); }
  15%       { transform: rotate(-8deg); }
  20%       { transform: rotate(8deg); }
  25%,95%   { transform: rotate(0deg); }
}

/* Dropdown scrollbar */
#notifDropdown::-webkit-scrollbar       { width: 4px; }
#notifDropdown::-webkit-scrollbar-track { background: transparent; }
#notifDropdown::-webkit-scrollbar-thumb { background: var(--border2); }

/* nc-dd-item hover */
.nc-dd-item { transition: background .12s; }

/* Notification page — filter pills active state glow */
.nc-filter.active {
  box-shadow: 0 0 12px rgba(240,165,0,.15);
}

/* Notification item hover glow */
.nc-item:hover {
  box-shadow: 0 2px 16px rgba(0,0,0,.4);
}

/* ══════════════════════════════════
   NEXT LEVEL TABS (Global)
══════════════════════════════════ */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
  padding: 10px 20px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 2.5px;
  color: rgba(212, 201, 176, 0.4);
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid transparent;
  border-bottom: none;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  padding-top: 8px;
}

.admin-tab.active {
  color: var(--gold);
  background: linear-gradient(0deg, rgba(240, 165, 0, 0.08) 0%, rgba(240, 165, 0, 0.02) 100%);
  border: 1px solid rgba(240, 165, 0, 0.2);
  border-bottom-color: #030403; /* Matches --darker background */
  padding-top: 8px;
  text-shadow: 0 0 15px rgba(240, 165, 0, 0.3);
}

.admin-tab.active::after {
  content: '';
  position: absolute;
  top: 4px; right: 8px;
  width: 3px; height: 3px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  border-radius: 50%;
}

.admin-tab .tab-icon {
  font-size: 14px;
  filter: grayscale(1) opacity(0.5);
  transition: all 0.3s;
}
.admin-tab.active .tab-icon,
.admin-tab:hover .tab-icon {
  filter: grayscale(0) opacity(1);
  transform: scale(1.1);
}