/* ═══════════════════════════════════════════════════════════════════
   WASTELAND — STYLE.CSS
   Полная версия: базовые стили + форум + профиль + правила + админка
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ═══════════ 1. ПЕРЕМЕННЫЕ ═══════════ */
:root {
  --bg: #0b0712;
  --panel: #130d20;
  --panel2: #1a112b;
  --line: rgba(197, 161, 255, .14);
  --text: #f7f2ff;
  --muted: #a59ab8;
  --purple: #b78aff;
  --purple2: #8b5cf6;
  --pink: #df91ff;
  --green: #8cf2c4;
  --danger: #ff7b94;
  --radius: 20px;
  --primary: #b78aff;
  --primary2: #d5b6ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; display: block; }

/* ═══════════ 2. ФОН (звёзды + луна) ═══════════ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 7% 18%, rgba(255,255,255,.75) 50%, transparent 100%),
    radial-gradient(1px 1px at 18% 72%, rgba(219,190,255,.8) 50%, transparent 100%),
    radial-gradient(2px 2px at 29% 31%, rgba(255,255,255,.65) 50%, transparent 100%),
    radial-gradient(1px 1px at 42% 83%, rgba(220,190,255,.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 57% 14%, rgba(255,255,255,.65) 50%, transparent 100%),
    radial-gradient(2px 2px at 69% 57%, rgba(220,190,255,.6) 50%, transparent 100%),
    radial-gradient(1px 1px at 82% 34%, rgba(255,255,255,.8) 50%, transparent 100%),
    radial-gradient(1px 1px at 94% 77%, rgba(220,190,255,.75) 50%, transparent 100%),
    radial-gradient(ellipse at 75% 17%, rgba(118,48,190,.13), transparent 34%),
    linear-gradient(180deg, #0b0712, #0d0815 55%, #09060e);
  animation: starGlow 7s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  z-index: -2;
  pointer-events: none;
  width: clamp(100px, 15vw, 190px);
  aspect-ratio: 1;
  top: clamp(90px, 13vh, 150px);
  right: clamp(5vw, 13vw, 220px);
  border-radius: 50%;
  opacity: .72;
  background:
    radial-gradient(circle at 34% 29%, rgba(255,255,255,.8) 0, rgba(236,214,255,.3) 2%, transparent 9%),
    radial-gradient(circle at 68% 63%, rgba(54,17,86,.4) 0, transparent 16%),
    radial-gradient(circle at 35% 65%, rgba(69,24,110,.36) 0, transparent 13%),
    radial-gradient(circle at 30% 25%, #f3eaff 0%, #d8b9ff 20%, #a76be5 49%, #6a36a1 72%, #28113f 100%);
  box-shadow: 0 0 26px rgba(174,95,255,.24), 0 0 70px rgba(142,58,220,.18),
              inset -18px -14px 28px rgba(20,5,36,.48);
  animation: moonDrift 16s ease-in-out infinite, moonGlow 6s ease-in-out infinite alternate;
}

.ambient {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .1;
  pointer-events: none;
  z-index: -1;
}
.ambient-one { background: #8b5cf6; top: 10%; left: -250px; animation: ambientDrift 13s ease-in-out infinite; }
.ambient-two { background: #ce72ff; bottom: 0; right: -250px; animation: ambientDrift 16s ease-in-out infinite reverse; }

/* ═══════════ 3. ШАПКА ═══════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 17px max(5.5vw, 22px);
  background: rgba(11, 7, 18, .78);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.1;
  min-width: 0;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  background: linear-gradient(135deg, #b68aff, #7742d5);
  box-shadow: 0 8px 25px #8b5cf633;
  color: white;
  font-size: 25px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.07);
  box-shadow: 0 0 28px #a777ff77;
}
.brand-logo {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 13px #a000ff55);
  transition: transform .25s ease, filter .25s ease;
}
.brand:hover .brand-logo {
  transform: scale(1.06);
  filter: drop-shadow(0 0 19px #b000ff99);
}
.brand-wordmark {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.7px;
}
.brand-wordmark small {
  display: block;
  margin-top: 7px;
  font-size: 8px;
  letter-spacing: 2px;
  color: #9988ac;
  font-weight: 700;
}
.brand small {
  display: block;
  margin-top: 5px;
  font: 600 8px Manrope, sans-serif;
  letter-spacing: 2.2px;
  color: #9384a9;
}
.purple { color: var(--purple); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
}
.nav > a {
  font-size: 12px;
  font-weight: 700;
  color: #bdb3cc;
  transition: .2s;
  position: relative;
}
.nav > a:not(.nav-login):not(.nav-icon)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  transition: right .25s ease;
}
.nav > a:not(.nav-login):not(.nav-icon):hover::after { right: 0; }
.nav > a:hover, .nav-admin { color: var(--purple) !important; }

.nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9d70e84a;
  border-radius: 10px;
  padding: 10px 17px;
  color: #f5eaff;
  background: #a575f01a;
  font-weight: 700;
  font-size: 12px;
}

.nav-icon {
  position: relative;
  font-size: 16px;
  padding: 6px 4px;
}
.badge-count {
  position: absolute;
  top: -2px;
  right: -8px;
  background: #ef4444;
  color: white;
  font-size: 9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.logout-form { margin: 0; }
.logout-form button { cursor: pointer; }
.mobile-menu {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: white;
  padding: 8px 11px;
}

/* ═══════════ 4. ОБЩИЙ КОНТЕЙНЕР ═══════════ */
.page-wrap {
  width: min(1160px, 89vw);
  margin: 0 auto;
  min-height: 65vh;
}

/* ═══════════ 5. КНОПКИ ═══════════ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 11px 17px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s, border-color .2s, filter .2s, box-shadow .25s;
  text-decoration: none;
}
.button:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.button-primary {
  color: white;
  background: linear-gradient(115deg, #a675f2, #7543d2);
  background-size: 200% 100%;
  box-shadow: 0 9px 25px #8a5be52c;
}
.button-primary:hover { box-shadow: 0 12px 32px #8a5be555; }
.button-outline {
  border-color: #b78aff45;
  color: #e4d2ff;
  background: #a777ff09;
}
.button-muted {
  border-color: var(--line);
  color: #d8cbe8;
  background: #ffffff08;
}
.button-danger {
  border-color: #ff7b943d;
  background: #ff7b9410;
  color: #ff9bae;
}
.button-large { padding: 14px 20px; min-height: 48px; }
.full-width { width: 100%; }

.text-link { color: #d6b6ff; font-weight: 800; font-size: 12px; }
.muted { color: var(--muted); font-size: 12px; }

/* ═══════════ 6. ЗАГОЛОВКИ ═══════════ */
.hero h1, .page-heading h1, .dashboard-header h1, .auth-side h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(42px, 5.4vw, 68px);
  line-height: 1.08;
  letter-spacing: -2.6px;
  margin: 22px 0 20px;
}
.gradient-text {
  background: linear-gradient(100deg, #e0c6ff, #a777ff 48%, #edb1ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2.4px;
  font-weight: 800;
  color: #bca0e7;
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow .pulse { animation: starTwinkle 1.8s ease-in-out infinite; }
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #bd8cff;
  box-shadow: 0 0 15px #bd8cff;
}

.page-heading { text-align: center; padding: 70px 0 40px; }
.page-heading .eyebrow { justify-content: center; }
.page-heading h1 { font-size: clamp(36px, 5vw, 54px); margin: 15px 0; }
.page-heading > p { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 13px; }
.page-heading.compact { padding: 40px 0 25px; text-align: left; }
.page-heading.compact .eyebrow { justify-content: flex-start; }

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 25px;
  margin-bottom: 27px;
}
.section-heading h2, .join-panel h2, .content-panel h2 {
  font: 700 clamp(27px, 3.5vw, 38px)/1.2 "Space Grotesk", sans-serif;
  letter-spacing: -1px;
  margin: 10px 0;
}
.section-heading > p { max-width: 330px; color: var(--muted); font-size: 12px; }

/* ═══════════ 7. ХИРО ═══════════ */
.portal-hero {
  padding: 70px 0 28px;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.portal-hero .eyebrow { justify-content: center; }
.portal-hero h1 {
  font: 700 clamp(44px, 6vw, 72px)/1.04 "Space Grotesk", sans-serif;
  letter-spacing: -2.8px;
  margin: 22px 0 18px;
}
.portal-hero .hero-description { margin: 0 auto; max-width: 680px; }
.portal-tags {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 25px;
  color: #9c8bad;
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 800;
}
.hero-description {
  max-width: 480px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 29px 0; }

/* ═══════════ 8. КАРТОЧКИ ИГР ═══════════ */
.game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 20px 0 60px;
}
.game-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 390px;
  padding: 30px;
  border: 1px solid #b78aff2e;
  border-radius: 22px;
  background: linear-gradient(145deg, #1b1230, #100a18 75%);
  box-shadow: 0 18px 55px #0002;
  transition: transform .28s, border-color .28s, box-shadow .28s;
}
.game-card:hover {
  transform: translateY(-5px);
  border-color: #b78aff78;
  box-shadow: 0 22px 60px #0004;
}
.game-card-glow {
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  right: -65px;
  top: -70px;
  border-radius: 50%;
  background: #9c58f5;
  opacity: .18;
  filter: blur(75px);
}
.game-card-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 1px solid #c9a1ff38;
  border-radius: 18px;
  background: #b78aff12;
  color: #dfc6ff;
  font-size: 32px;
  box-shadow: 0 0 35px #a777ff12;
}
.game-kicker {
  margin-top: 24px;
  color: #a995c1;
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 800;
}
.game-card h2 {
  font: 700 clamp(30px, 4vw, 42px)/1.1 "Space Grotesk", sans-serif;
  margin: 8px 0;
}
.game-card p { color: var(--muted); font-size: 13px; max-width: 360px; line-height: 1.8; }
.game-card-ip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 20px;
  padding: 12px 14px;
  border: 1px solid #ffffff12;
  background: #0002;
  border-radius: 11px;
  width: 100%;
  max-width: 350px;
}
.game-card-ip small { font-size: 8px; letter-spacing: 1.7px; color: #9b8bac; font-weight: 800; }
.game-card-ip strong { font-size: 13px; overflow-wrap: anywhere; }
.game-card .button { margin-top: auto; }

/* Палитра карточек */
.game-card-purple { background: linear-gradient(145deg, #1b1230, #100a18 75%); border-color: #b78aff2e; }
.game-card-purple .game-card-glow { background: #9c58f5; opacity: .18; }
.game-card-purple .game-card-icon { border-color: #c9a1ff38; background: #b78aff12; color: #dfc6ff; }
.game-card-purple .game-kicker { color: #a995c1; }

.game-card-orange { background: linear-gradient(145deg, #291b1a, #130b12 75%); border-color: #ff9a6330; }
.game-card-orange .game-card-glow { background: #ff773f; opacity: .16; }
.game-card-orange .game-card-icon { border-color: #ffb28b38; background: #ff8b5312; color: #ffc1a1; }
.game-card-orange .game-kicker { color: #c1a995; }

.game-card-blue { background: linear-gradient(145deg, #131e33, #0a101c 75%); border-color: #6ba8ff2e; }
.game-card-blue .game-card-glow { background: #4c8eff; opacity: .18; }
.game-card-blue .game-card-icon { border-color: #8bb8ff38; background: #4c8eff12; color: #c1d9ff; }
.game-card-blue .game-kicker { color: #95a9c1; }

.game-card-green { background: linear-gradient(145deg, #122619, #0a1610 75%); border-color: #6bff9a2e; }
.game-card-green .game-card-glow { background: #22c55e; opacity: .18; }
.game-card-green .game-card-icon { border-color: #8bffb838; background: #22c55e12; color: #b8ffd1; }
.game-card-green .game-kicker { color: #95c1a9; }

.game-card-red { background: linear-gradient(145deg, #2b1418, #160a0d 75%); border-color: #ff5c7a2e; }
.game-card-red .game-card-glow { background: #ef4444; opacity: .18; }
.game-card-red .game-card-icon { border-color: #ff8ba338; background: #ef444412; color: #ffb8c1; }
.game-card-red .game-kicker { color: #c19595; }

.game-card-pink { background: linear-gradient(145deg, #2b1424, #160a12 75%); border-color: #ff6bd62e; }
.game-card-pink .game-card-glow { background: #ec4899; opacity: .18; }
.game-card-pink .game-card-icon { border-color: #ff8be838; background: #ec489912; color: #ffb8f0; }
.game-card-pink .game-kicker { color: #c195b8; }

.game-card-cyan { background: linear-gradient(145deg, #132629, #0a1617 75%); border-color: #6be5ff2e; }
.game-card-cyan .game-card-glow { background: #06b6d4; opacity: .18; }
.game-card-cyan .game-card-icon { border-color: #8bf0ff38; background: #06b6d412; color: #b8f5ff; }
.game-card-cyan .game-kicker { color: #95c1c1; }

.game-card-gold { background: linear-gradient(145deg, #2b2413, #16100a 75%); border-color: #ffd24c2e; }
.game-card-gold .game-card-glow { background: #eab308; opacity: .18; }
.game-card-gold .game-card-icon { border-color: #ffe08b38; background: #eab30812; color: #fff0b8; }
.game-card-gold .game-kicker { color: #c1b895; }

/* ═══════════ 9. СТРАНИЦА ИГРЫ ═══════════ */
.game-detail-hero { position: relative; padding: 40px 0 55px; max-width: 850px; }
.back-link { display: inline-flex; color: #c7addf; font-size: 12px; font-weight: 800; margin-bottom: 30px; }
.game-detail-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 20px;
  border: 1px solid #b78aff45;
  background: #b78aff12;
  color: #d9bbff;
  font-size: 34px;
  box-shadow: 0 0 45px #9c58f525;
}
.game-detail-hero h1 {
  font: 700 clamp(42px, 5.5vw, 65px)/1.08 "Space Grotesk", sans-serif;
  letter-spacing: -2px;
  margin: 18px 0;
}
.game-detail-hero .server-address { margin-top: 25px; }
.game-detail-hero > .muted { margin-top: 15px; }

.server-address {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  background: #170f24b8;
  border-radius: 14px;
  max-width: 350px;
}
.server-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #9b6de91d;
  color: #d3b5ff;
  font-size: 21px;
}
.server-address small {
  display: block;
  color: #9688a9;
  font-size: 9px;
  letter-spacing: 1.8px;
  font-weight: 800;
}
.server-address strong { font-size: 14px; letter-spacing: .3px; }
.copy-button {
  margin-left: auto;
  background: #b78aff12;
  color: #e3caff;
  border: 1px solid #b78aff30;
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 19px;
}

.game-detail-color-purple .gradient-text { background: linear-gradient(100deg, #e0c6ff, #a777ff 48%, #edb1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-detail-color-orange .gradient-text { background: linear-gradient(100deg, #ffe0c9, #ff9b6e 55%, #f5c7a9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-detail-color-blue .gradient-text { background: linear-gradient(100deg, #c9e0ff, #6e9bff 55%, #a9c7f5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-detail-color-green .gradient-text { background: linear-gradient(100deg, #c9ffe0, #6eff9b 55%, #a9f5c7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-detail-color-red .gradient-text { background: linear-gradient(100deg, #ffc9d2, #ff6e88 55%, #f5a9b8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-detail-color-pink .gradient-text { background: linear-gradient(100deg, #ffc9f0, #ff6ec7 55%, #f5a9e0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-detail-color-cyan .gradient-text { background: linear-gradient(100deg, #c9f5ff, #6ee0ff 55%, #a9e8f5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-detail-color-gold .gradient-text { background: linear-gradient(100deg, #fff0c9, #ffc94c 55%, #f5e0a9); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ═══════════ 10. НОВОСТИ ═══════════ */
.feature-section, .news-section { padding: 55px 0 75px; }
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.news-card {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #140d20c9;
  padding: 22px;
  transition: .25s;
  min-width: 0;
}
.news-card:hover { transform: translateY(-4px); border-color: #b78aff4d; }
.news-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: #82748f;
  font-size: 9px;
}
.news-tag {
  background: #a777ff1b;
  color: #c6a4ff;
  border-radius: 6px;
  padding: 5px 8px;
  letter-spacing: 1px;
  font-weight: 800;
}
.news-card h3 {
  font: 700 18px "Space Grotesk", sans-serif;
  margin: 20px 0 9px;
}
.news-card p { font-size: 12px; color: var(--muted); line-height: 1.85; }
.news-author {
  border-top: 1px solid #ffffff0c;
  padding-top: 13px;
  margin-top: 18px;
  color: #88789a;
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 800;
}
.news-grid-page { padding-bottom: 70px; }
.preserve-lines { white-space: pre-line; }

/* ═══════════ 11. ПРАВИЛА (публичные) ═══════════ */
.rules-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding-bottom: 70px;
}
.rules-nav {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #140d20ad;
}
.rules-nav-title {
  font: 800 10px "Space Grotesk", sans-serif;
  letter-spacing: 1.5px;
  color: #9988ac;
  margin-bottom: 8px;
}
.rules-nav a {
  font-size: 12px;
  font-weight: 700;
  color: #bcaecc;
  padding: 9px 11px;
  border-radius: 8px;
  transition: .2s;
  border-left: 2px solid transparent;
}
.rules-nav a:hover {
  background: #b78aff15;
  color: #dec6ff;
  border-left-color: #b78aff;
}
.rules-section { margin-bottom: 50px; scroll-margin-top: 100px; }
.rules-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ffffff0c;
}
.rules-section-num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #b68aff, #7742d5);
  color: white;
  font: 700 22px "Space Grotesk", sans-serif;
  box-shadow: 0 8px 25px #8b5cf633;
  flex-shrink: 0;
}
.rules-section-header h2 {
  font: 700 26px "Space Grotesk", sans-serif;
  letter-spacing: -.5px;
  margin: 0;
}
.rules-list { display: flex; flex-direction: column; gap: 10px; }
.rule-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #140d20ad;
  transition: .2s;
}
.rule-card:hover { border-color: #b78aff4d; }
.rule-card-punish { border-left: 3px solid #ff7b9455; }
.rule-index { font: 700 22px "Space Grotesk", sans-serif; color: #a77bdf; line-height: 1.2; }
.rule-card p { margin: 0 0 8px; font-size: 13px; color: var(--text); line-height: 1.75; }
.rule-card p:last-child { margin-bottom: 0; }
.rule-card p strong { color: #e5d4ff; font-weight: 700; }
.rule-note {
  display: block;
  margin: 6px 0 !important;
  padding: 8px 12px;
  background: #a777ff10;
  border-left: 2px solid #b78aff55;
  border-radius: 6px;
  font-size: 11px !important;
  color: #c9b8e0 !important;
  font-style: italic;
}
.rule-punish {
  display: inline-block;
  margin: 8px 0 0 !important;
  padding: 5px 12px;
  background: #ff7b9415;
  border: 1px solid #ff7b9440;
  border-radius: 8px;
  font-size: 10px !important;
  font-weight: 800;
  color: #ff9bae !important;
}
.notice-panel, .shop-notice {
  padding: 17px 20px;
  border: 1px solid #b78aff2a;
  background: #a777ff0c;
  border-radius: 13px;
  color: #d8c5ef;
  font-size: 12px;
}
.notice-panel { max-width: 850px; margin: 0 auto 65px; }
.notice-panel p { margin: 5px 0 0; color: var(--muted); }

/* ═══════════ 12. МАГАЗИН ═══════════ */
.shop-notice { max-width: 900px; margin: 0 auto 25px; }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  padding-bottom: 70px;
}
.product-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #150e21;
  transition: .25s;
}
.product-card:hover { transform: translateY(-4px); border-color: #b78aff4d; }
.product-art {
  height: 155px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 65%, #9857e95c, transparent 45%),
              linear-gradient(135deg, #28163f, #100a1b);
}
.product-art::before, .product-art::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border: 1px solid #c69aff18;
  border-radius: 50%;
}
.product-art::after { width: 155px; height: 155px; }
.product-crystal { font-size: 68px; color: #d3b3ff; text-shadow: 0 0 30px #b477ffb0; z-index: 1; }
.product-art-label {
  position: absolute;
  bottom: 12px;
  left: 15px;
  font-size: 8px;
  letter-spacing: 2px;
  color: #9b84b6;
  font-weight: 800;
}
.product-info { padding: 20px; }
.product-kicker { font-size: 8px; letter-spacing: 1.7px; color: #9f83c3; font-weight: 800; }
.product-info h3 { font: 700 18px "Space Grotesk", sans-serif; margin: 8px 0; }
.product-info p { min-height: 65px; margin: 0; font-size: 12px; color: var(--muted); line-height: 1.85; }
.product-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #ffffff0d;
  padding-top: 16px;
  margin-top: 15px;
}
.product-bottom > strong { font: 700 20px "Space Grotesk", sans-serif; }
.product-bottom .button { font-size: 10px; padding: 10px; }

/* ═══════════ 13. АВТОРИЗАЦИЯ ═══════════ */
.auth-layout {
  min-height: 620px;
  display: grid;
  grid-template-columns: 1fr .9fr;
  align-items: center;
  gap: 55px;
  padding: 50px 0;
}
.auth-side { position: relative; min-height: 360px; padding: 30px 0; }
.auth-side h1 { font-size: clamp(42px, 5vw, 62px); }
.auth-side p { max-width: 370px; color: var(--muted); font-size: 13px; }
.auth-decoration {
  font: 700 210px/.8 "Space Grotesk", sans-serif;
  color: #b78aff12;
  position: absolute;
  bottom: -45px;
  right: 15px;
  z-index: -1;
}
.auth-decoration span { color: #db8cff1c; }
.auth-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #1b122a, #100a18);
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 25px 70px #0002;
}
.auth-card h2 { font: 700 27px "Space Grotesk", sans-serif; margin: 10px 0 5px; }
.auth-card > .muted { margin: 0 0 22px; }
.auth-switch { text-align: center; color: var(--muted); font-size: 11px; margin-top: 20px; }
.auth-switch a { color: #d5b6ff; font-weight: 800; }

/* ═══════════ 14. ФОРМЫ ═══════════ */
.form-stack, .admin-form { display: grid; gap: 15px; }
.form-stack label, .admin-form label {
  display: grid;
  gap: 7px;
  color: #cbbddb;
  font-size: 11px;
  font-weight: 700;
}
.form-stack input, .admin-form input, .admin-form textarea, .inline-form select {
  width: 100%;
  border: 1px solid #b78aff25;
  border-radius: 10px;
  background: #0d0815;
  color: #f7f2ff;
  padding: 12px 13px;
  outline: none;
  font-size: 12px;
}
.form-stack input:focus, .admin-form input:focus, .admin-form textarea:focus {
  border-color: #b78aff9c;
  box-shadow: 0 0 0 3px #b78aff10;
}
.admin-form {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.admin-form label:nth-child(3) { grid-column: 1/-1; }
.admin-form textarea { resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.admin-form .button { justify-self: start; }
.checkbox-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 9px;
  color: #cbbddb;
  font-size: 11px;
  font-weight: 700;
}
.checkbox-label input[type=checkbox] { width: auto; accent-color: #a675f2; }

.fine-print { color: #756985; font-size: 9px; line-height: 1.7; margin-top: 18px; }
.fine-print a, .cookie-banner p a { color: #d3b2ff; text-decoration: underline; }

/* ═══════════ 15. ПРОФИЛЬ ═══════════ */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 55px 0 25px;
}
.dashboard-header h1 { font-size: clamp(35px, 4.5vw, 50px); margin: 10px 0; }
.dashboard-header p { margin: 0; }

.profile-avatar {
  width: 74px;
  height: 74px;
  border-radius: 23px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #c7a1ff, #7741d1);
  font: 700 31px "Space Grotesk", sans-serif;
  box-shadow: 0 10px 35px #8651d833;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.profile-avatar.big { width: 120px; height: 120px; font-size: 40px; margin-bottom: 15px; }

.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 15px 0 20px; }

.profile-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 25px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #a777ff15;
  border: 1px solid #b78aff40;
  color: #d5b8ff;
  font-size: 11px;
  font-weight: 700;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #ffffff0b;
  flex-wrap: wrap;
}
.settings-row:last-of-type { border-bottom: 0; }
.settings-info { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 240px; }
.settings-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #a777ff12;
  border: 1px solid #b78aff30;
  font-size: 22px;
  flex-shrink: 0;
}
.settings-info strong { display: block; color: var(--text); font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.settings-info small { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; flex-wrap: wrap; }
.settings-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* ═══════════ 16. STATS ═══════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin: 0 0 25px;
}
.stat-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  background: #160f22a8;
  min-width: 0;
}
.stat-card small {
  display: block;
  color: #9483a7;
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 800;
}
.stat-card strong {
  display: block;
  margin-top: 7px;
  font: 700 20px "Space Grotesk", sans-serif;
  overflow-wrap: anywhere;
}

/* ═══════════ 17. КОНТЕНТ-ПАНЕЛИ ═══════════ */
.content-panel {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #140d20ad;
  padding: 23px;
  margin-bottom: 20px;
}
.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.panel-heading h2 { font-size: 24px; margin: 6px 0; }

.empty-state { text-align: center; padding: 35px 10px 40px; }
.empty-state > span { font-size: 35px; color: #c3a0ff; }
.empty-state h3 { font: 700 19px "Space Grotesk", sans-serif; margin: 10px 0 5px; }
.empty-state p { font-size: 12px; color: var(--muted); margin: 0 0 12px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 600px; }
th { text-align: left; color: #a594ba; font-size: 9px; letter-spacing: 1px; font-weight: 800; }
th, td { padding: 13px 10px; border-bottom: 1px solid #ffffff0b; vertical-align: middle; }
td { color: #d4c7e1; }
tbody tr:last-child td { border-bottom: 0; }

.status-pill {
  display: inline-block;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 9px;
  background: #a777ff15;
  color: #d5b5ff;
}
.status-completed { background: #8cf2c41a; color: #9df0c9; }
.status-cancelled { background: #ff7b941a; color: #ff9bac; }
.status-processing { background: #ffd27a1a; color: #ffdda0; }

/* ═══════════ 18. ФОРУМ ═══════════ */
.forum-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.forum-categories { display: flex; flex-direction: column; gap: 10px; padding-bottom: 60px; }
.forum-category {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #140d20ad;
  transition: .2s;
}
.forum-category:hover { border-color: #b78aff5a; }
.forum-cat-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #a777ff15;
  font-size: 24px;
  border: 1px solid #b78aff30;
}
.forum-cat-name { font: 700 17px "Space Grotesk", sans-serif; color: #e5d4ff; }
.forum-cat-body p { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.forum-cat-stats { display: flex; flex-direction: column; text-align: center; font-size: 10px; color: var(--muted); }
.forum-cat-stats strong { font: 700 18px "Space Grotesk", sans-serif; color: var(--text); }
.forum-cat-last { font-size: 11px; max-width: 220px; }
.forum-cat-last a { color: #d5b6ff; display: block; }
.forum-cat-last small { color: var(--muted); }

.forum-toolbar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.forum-threads { display: flex; flex-direction: column; gap: 8px; padding-bottom: 60px; }
.forum-thread-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #140d20ad;
}
.forum-thread-row.pinned { border-color: #ffd27a5a; background: #2b1f0f20; }
.thread-marker { font-size: 20px; text-align: center; }
.thread-title { color: #e5d4ff; font: 700 15px "Space Grotesk", sans-serif; display: block; }
.thread-body small { color: var(--muted); font-size: 11px; }
.thread-stats { display: flex; flex-direction: column; text-align: center; gap: 3px; }
.thread-stats strong { font: 700 14px "Space Grotesk", sans-serif; }
.thread-stats small { color: var(--muted); font-size: 9px; }
.forum-form { max-width: 900px; padding-bottom: 40px; }

.forum-posts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.forum-post {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #140d20ad;
}
.post-author { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.post-avatar {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #c7a1ff, #7741d1);
  color: white;
  font: 700 30px "Space Grotesk", sans-serif;
  overflow: hidden;
}
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-username { color: #d5b6ff; font-weight: 800; font-size: 14px; }
.post-role, .post-online { font-size: 10px; color: var(--muted); }
.post-body { min-width: 0; }
.post-meta { font-size: 10px; color: #7c6d8e; margin-bottom: 10px; }
.post-text { color: var(--text); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.post-actions { display: flex; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffffff0b; }
.like-btn {
  background: #a777ff15;
  border: 1px solid #b78aff30;
  color: #d5b6ff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}
.like-btn.voted { background: #a777ff40; border-color: #b78aff80; }

.forum-latest { display: flex; flex-direction: column; gap: 8px; }
.forum-latest-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #140d20ad;
  transition: .2s;
}
.forum-latest-item:hover { border-color: #b78aff5a; transform: translateX(4px); }
.forum-latest-item small { color: var(--muted); font-size: 11px; display: block; margin-top: 4px; }

/* ═══════════ 19. АДМИНКА ═══════════ */
.admin-badge {
  border: 1px solid #b78aff43;
  background: #b78aff13;
  border-radius: 10px;
  padding: 10px 13px;
  color: #d7bbff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}
.admin-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 55px;
}
.admin-sidebar {
  position: sticky;
  top: 90px;
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #140d20;
}
.admin-sidebar a {
  font-size: 11px;
  font-weight: 700;
  color: #bcaecc;
  padding: 11px;
  border-radius: 8px;
}
.admin-sidebar a:hover { background: #b78aff13; color: #dec6ff; }
.admin-main { min-width: 0; }

.admin-list { border-top: 1px solid #ffffff0c; }
.admin-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid #ffffff0b;
}
.admin-list-row strong, .admin-list-row small { display: block; }
.admin-list-row strong { font-size: 11px; }
.admin-list-row small {
  max-width: 500px;
  color: #8f819e;
  font-size: 10px;
  overflow-wrap: anywhere;
  margin-top: 4px;
}
.admin-list-row .button { flex-shrink: 0; font-size: 10px; padding: 8px 10px; }
.admin-list-page { flex-wrap: wrap; }
.admin-list-info { min-width: 220px; flex: 1 1 auto; }
.admin-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.admin-actions .button { font-size: 10px; padding: 8px 10px; }

.inline-form { display: flex; align-items: center; gap: 7px; }
.inline-form select { width: auto; max-width: 130px; padding: 8px; }
.inline-form .button { padding: 8px; font-size: 9px; white-space: nowrap; }

.page-edit {
  width: 100%;
  margin-top: 14px;
  border-top: 1px dashed #b78aff30;
  padding-top: 12px;
}
.page-edit summary {
  cursor: pointer;
  color: #d6b6ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
}
.page-edit[open] summary { margin-bottom: 12px; }
.page-edit textarea { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }

/* Правила в админке */
.rule-admin-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  background: #0f0819;
}
.rule-admin-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #ffffff0c;
  flex-wrap: wrap;
}
.rule-admin-section-title strong {
  display: block;
  color: #e5d4ff;
  font: 700 15px "Space Grotesk", sans-serif;
}
.rule-admin-section-title small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}
.rule-admin-items { display: flex; flex-direction: column; gap: 10px; }
.rule-admin-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: #140d20ad;
}
.rule-admin-item-punish { border-left: 3px solid #ff7b9466; }
.rule-admin-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rule-admin-item-head strong {
  font: 700 14px "Space Grotesk", sans-serif;
  color: #a77bdf;
}
.rule-admin-item p { font-size: 12px; color: var(--text); line-height: 1.7; margin: 0 0 8px; }
.rule-admin-item .rule-note,
.rule-admin-item .rule-punish { margin: 6px 0 !important; }

.site-logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px dashed #b78aff55;
  border-radius: 14px;
  background: radial-gradient(circle, #a000ff18, transparent 70%);
}
.site-logo-preview img {
  width: 180px;
  height: 180px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 20px #9d00ff44);
}
.logo-upload-form { align-items: end; }
.logo-upload-form label { grid-column: 1/-1; }
.logo-upload-form input[type=file] { padding: 10px; }
.logo-upload-form .button { grid-column: 1/-1; }

/* ═══════════ 20. ПРАВОВЫЕ / ОШИБКИ ═══════════ */
.legal-panel {
  max-width: 850px;
  margin: 0 auto 70px;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 30px;
  background: #150e21ad;
}
.legal-panel h2 { font: 700 18px "Space Grotesk", sans-serif; margin: 22px 0 7px; }
.legal-panel h2:first-child { margin-top: 0; }
.legal-panel p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.error-page { text-align: center; padding: 100px 0; }
.error-code { font: 700 100px/.95 "Space Grotesk", sans-serif; color: #b78aff; }
.error-page h1 { font: 600 24px "Space Grotesk", sans-serif; margin: 25px auto; }

/* ═══════════ 21. ФЛЕШ-СООБЩЕНИЯ ═══════════ */
.flash-stack { padding-top: 15px; }
.flash {
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  background: #160f22;
}
.flash-success { border-color: #8cf2c444; color: #a9f8d4; }
.flash-error { border-color: #ff7b9444; color: #ffb1bf; }
.flash-warning { border-color: #ffd27a44; color: #ffdda0; }

/* ═══════════ 22. COOKIE ═══════════ */
.cookie-banner {
  position: fixed;
  z-index: 100;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 28px));
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #c6a3ff4d;
  border-radius: 16px;
  background: #171023f5;
  box-shadow: 0 15px 55px #0009;
  backdrop-filter: blur(20px);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner strong { font-size: 13px; }
.cookie-banner p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-actions .button { font-size: 10px; padding: 10px; }

/* ═══════════ 23. TOAST ═══════════ */
.copy-toast {
  position: fixed;
  z-index: 150;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #251738;
  border: 1px solid #b78aff55;
  color: #f3eaff;
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 10px 35px #0008;
  font-size: 12px;
  white-space: nowrap;
  animation: riseIn .25s ease both;
}

/* ═══════════ 24. CAPTCHA ═══════════ */
.captcha-block {
  display: flex;
  justify-content: center;
  margin: 6px 0 4px;
  min-height: 78px;
}
.captcha-block .h-captcha,
.captcha-block .cf-turnstile { transform-origin: center; }

/* ═══════════ 25. ПОДВАЛ ═══════════ */
.footer {
  margin-top: 64px;
  background: #07070a;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: #85858f;
  padding: 34px max(24px, calc((100vw - 1400px)/2)) 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(240px, 1.7fr) repeat(3, minmax(120px, 1fr));
  gap: 44px;
  padding: 0 0 42px;
  align-items: start;
}
.footer-about { display: block; min-width: 0; width: 100%; }
.footer-about > .footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  text-decoration: none;
}
.footer-about > .footer-brand .brand-logo {
  display: block;
  width: 76px;
  height: 76px;
  min-width: 76px;
  flex: 0 0 76px;
  object-fit: contain;
}
.footer-about > .footer-brand .brand-wordmark {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.footer-about > .footer-brand .brand-wordmark small {
  display: block;
  margin-top: 6px;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 1.5px;
}
.footer-about > p {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.footer-server-ip { color: #ff4b32; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
}
.footer-column strong { color: #f8f8fa; font-size: 13px; letter-spacing: .06em; margin: 2px 0 7px; }
.footer-column a, .footer-column .footer-muted {
  color: #85858f;
  text-decoration: none;
  transition: color .2s, transform .2s;
}
.footer-column a:hover { color: #ff563d; transform: translateX(3px); }

.footer .copyright {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 20px 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: #70707b;
}

/* ═══════════ 26. АНИМАЦИИ ═══════════ */
@keyframes ambientDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(35px, -28px, 0) scale(1.12); }
}
@keyframes moonDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(-14px, 17px, 0) rotate(3deg); }
}
@keyframes moonGlow {
  from { opacity: .58; filter: brightness(.92); }
  to { opacity: .82; filter: brightness(1.12); }
}
@keyframes starGlow {
  from { filter: brightness(.8); }
  to { filter: brightness(1.08); }
}
@keyframes starTwinkle {
  0%, 100% { opacity: .2; }
  50% { opacity: .8; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ВАЖНО: reveal-on-scroll отключён — иначе контент в админке не виден */
.js-reveal { opacity: 1; transform: none; }
.js-reveal.is-visible { opacity: 1; transform: none; }

/* ═══════════ 27. СВЕТЛАЯ ТЕМА ═══════════ */
body[data-theme="light"] {
  --bg: #f5f3f9;
  --text: #1a1028;
  --muted: #6b5a80;
  --line: rgba(120, 80, 180, .15);
}
body[data-theme="light"]::before {
  background:
    radial-gradient(ellipse at 15% 5%, rgba(180, 130, 255, .15), transparent 40%),
    linear-gradient(180deg, #f5f3f9, #ebe6f5 55%, #e8e1f5);
}
body[data-theme="light"]::after { opacity: .3; }
body[data-theme="light"] .game-card,
body[data-theme="light"] .content-panel,
body[data-theme="light"] .news-card,
body[data-theme="light"] .forum-category,
body[data-theme="light"] .forum-post,
body[data-theme="light"] .forum-thread-row,
body[data-theme="light"] .forum-latest-item,
body[data-theme="light"] .auth-card,
body[data-theme="light"] .stat-card,
body[data-theme="light"] .legal-panel,
body[data-theme="light"] .rule-card {
  background: #ffffffcc;
}
body[data-theme="light"] .site-header {
  background: rgba(245, 243, 249, .85);
  border-bottom: 1px solid rgba(120, 80, 180, .1);
}
body[data-theme="light"] .nav > a { color: #6b5a80; }
body[data-theme="light"] .nav > a:hover { color: #7c3aed; }

/* ═══════════ 28. АДАПТИВ ═══════════ */
@media (max-width: 900px) {
  .site-header { padding: 14px 5.5vw; }
  .nav { gap: 13px; }
  .nav > a { font-size: 11px; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; display: flex; flex-wrap: wrap; }
  .admin-sidebar a { padding: 8px; }
  .product-bottom { align-items: flex-start; flex-direction: column; }
  .product-bottom .button { width: 100%; }
  .rules-layout { grid-template-columns: 1fr; }
  .rules-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .rules-nav-title { width: 100%; }
  .rules-nav a { padding: 7px 10px; font-size: 11px; }
}

@media (max-width: 780px) {
  .forum-category { grid-template-columns: 1fr; gap: 10px; }
  .forum-cat-stats { flex-direction: row; gap: 20px; }
  .forum-cat-last { max-width: none; }
}

@media (max-width: 760px) {
  .footer { padding-left: 20px; padding-right: 20px; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; }
  .footer-about { grid-column: 1/-1; }
  .footer .copyright { flex-direction: column; gap: 8px; }
  .footer-about > .footer-brand .brand-logo { width: 64px; height: 64px; min-width: 64px; flex-basis: 64px; }
  .footer-about > .footer-brand .brand-wordmark { font-size: 20px; }
}

@media (max-width: 680px) {
  .site-header { flex-wrap: wrap; }
  .mobile-menu { display: block; }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 0 3px;
    gap: 4px;
  }
  .nav.nav-open { display: flex; }
  .nav > a, .nav-login { display: block; padding: 11px 12px; }
  .logout-form { padding: 0 12px; }
  .nav-login { text-align: center; }
  .nav-icon { display: inline-flex; justify-content: flex-start; }

  .game-grid, .feature-grid, .news-grid, .shop-grid { grid-template-columns: 1fr; }
  .game-card { min-height: 360px; padding: 24px; }
  .game-detail-hero { padding: 30px 0 40px; }
  .game-detail-hero h1 { letter-spacing: -1.3px; }
  .portal-hero { padding: 45px 0 20px; }
  .portal-hero h1 { letter-spacing: -1.8px; }
  .portal-tags { gap: 9px; font-size: 8px; }

  .section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .feature-section, .news-section { padding: 38px 0 48px; }
  .page-heading { padding: 48px 0 30px; }
  .page-heading h1 { font-size: 39px; letter-spacing: -1.5px; }

  .auth-layout { grid-template-columns: 1fr; gap: 5px; padding: 35px 0; }
  .auth-side { min-height: auto; padding: 10px 0 20px; }
  .auth-side h1 { font-size: 42px; margin: 15px 0 8px; }
  .auth-decoration { display: none; }
  .auth-card { padding: 22px; }

  .dashboard-header { padding: 35px 0 20px; }
  .dashboard-header h1 { font-size: 35px; }
  .profile-avatar { width: 58px; height: 58px; border-radius: 18px; }

  .stats-grid, .forum-stats { grid-template-columns: 1fr; gap: 8px; }
  .stat-card { padding: 13px 16px; }
  .stat-card strong { font-size: 17px; }

  .content-panel { padding: 16px; }
  .panel-heading { align-items: flex-start; flex-direction: column; }

  .rule-card { grid-template-columns: 45px 1fr; gap: 12px; padding: 15px 16px; }
  .rule-index { font-size: 18px; }
  .rules-section-header h2 { font-size: 21px; }
  .rules-section-num { width: 40px; height: 40px; font-size: 18px; }

  .admin-form { grid-template-columns: 1fr; }
  .admin-form label:nth-child(3) { grid-column: auto; }
  .admin-list-row { align-items: flex-start; }
  .inline-form { flex-wrap: wrap; }

  .legal-panel { padding: 21px; }
  .product-art { height: 175px; }
  .cookie-banner { align-items: stretch; flex-direction: column; gap: 12px; padding: 15px; }
  .cookie-actions { width: 100%; }
  .cookie-actions .button { flex: 1; }

  .forum-post { grid-template-columns: 1fr; }
  .post-author { flex-direction: row; flex-wrap: wrap; }

  .settings-row { flex-direction: column; align-items: flex-start; }
  .settings-actions { width: 100%; }
  .settings-actions form { width: 100%; }
  .settings-actions .button { width: 100%; }

  body::after { width: 96px; top: 135px; right: 7vw; opacity: .45; }
  .captcha-block { transform: scale(.92); }
}

@media (max-width: 420px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .footer-column { font-size: 13px; }
  .footer-about > .footer-brand { gap: 10px; }
  .footer-about > .footer-brand .brand-logo { width: 56px; height: 56px; min-width: 56px; flex-basis: 56px; }
  .footer-about > .footer-brand .brand-wordmark { font-size: 18px; }
}

/* ═══════════ 29. PREFERS-REDUCED-MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
  .js-reveal { opacity: 1; transform: none; }
  body::before, body::after { animation: none !important; }
}
/* ═══════════ 30. СТАТУС СЕРВЕРОВ ═══════════ */
.game-status-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .3px;
  backdrop-filter: blur(8px);
  border: 1px solid;
}
.game-status-badge.online {
  background: rgba(16, 185, 129, .15);
  border-color: rgba(16, 185, 129, .45);
  color: #34d399;
}
.game-status-badge.offline {
  background: rgba(239, 68, 68, .15);
  border-color: rgba(239, 68, 68, .45);
  color: #f87171;
}
.game-status-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.game-status-badge.online .dot {
  animation: pulseDot 1.8s ease-in-out infinite;
  box-shadow: 0 0 8px currentColor;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}

.server-status-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #140d20ad;
  max-width: 500px;
}
.server-status-card.online { border-color: rgba(16, 185, 129, .35); }
.server-status-card.offline { border-color: rgba(239, 68, 68, .35); }
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.server-status-card.online .status-dot {
  background: #34d399;
  box-shadow: 0 0 12px #34d399aa;
  animation: pulseDot 1.8s ease-in-out infinite;
}
.server-status-card.offline .status-dot { background: #f87171; }
.status-info { flex: 1 1 auto; min-width: 140px; }
.status-info strong {
  display: block;
  font: 700 15px "Space Grotesk", sans-serif;
  margin-bottom: 3px;
}
.status-info small { color: var(--muted); font-size: 11px; }
.status-players {
  text-align: right;
  padding-left: 16px;
  border-left: 1px solid #ffffff10;
}
.status-players strong {
  display: block;
  font: 700 20px "Space Grotesk", sans-serif;
  color: #e5d4ff;
}
.status-players small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1.2px;
  font-weight: 800;
}

/* Админ-форма: чекбоксы на всю ширину */
.admin-form label.checkbox-label { grid-column: 1 / -1; }
/* ═══════════ 30. СТАТУС СЕРВЕРОВ ═══════════ */
.game-status-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .3px;
  backdrop-filter: blur(8px);
  border: 1px solid;
}
.game-status-badge.online {
  background: rgba(16, 185, 129, .15);
  border-color: rgba(16, 185, 129, .45);
  color: #34d399;
}
.game-status-badge.offline {
  background: rgba(239, 68, 68, .15);
  border-color: rgba(239, 68, 68, .45);
  color: #f87171;
}
.game-status-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.game-status-badge.online .dot {
  animation: pulseDot 1.8s ease-in-out infinite;
  box-shadow: 0 0 8px currentColor;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}

.server-status-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #140d20ad;
  max-width: 500px;
}
.server-status-card.online { border-color: rgba(16, 185, 129, .35); }
.server-status-card.offline { border-color: rgba(239, 68, 68, .35); }
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.server-status-card.online .status-dot {
  background: #34d399;
  box-shadow: 0 0 12px #34d399aa;
  animation: pulseDot 1.8s ease-in-out infinite;
}
.server-status-card.offline .status-dot { background: #f87171; }
.status-info { flex: 1 1 auto; min-width: 140px; }
.status-info strong {
  display: block;
  font: 700 15px "Space Grotesk", sans-serif;
  margin-bottom: 3px;
}
.status-info small { color: var(--muted); font-size: 11px; }
.status-players {
  text-align: right;
  padding-left: 16px;
  border-left: 1px solid #ffffff10;
}
.status-players strong {
  display: block;
  font: 700 20px "Space Grotesk", sans-serif;
  color: #e5d4ff;
}
.status-players small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1.2px;
  font-weight: 800;
}

.admin-form label.checkbox-label { grid-column: 1 / -1; }
/* ═══════════ 31. КРАСИВЫЕ КАРТОЧКИ ОСОБЕННОСТЕЙ ═══════════ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 25px;
}

.feature-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(145deg, #1b1230, #100a18 75%);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 138, 255, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(183, 138, 255, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 92, 246, 0.1);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(183, 138, 255, 0.1);
  border: 1px solid rgba(183, 138, 255, 0.2);
  color: #d8b9ff;
  font-size: 20px;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

.feature-content {
  flex: 1;
}

.feature-content h3 {
  font: 700 16px "Space Grotesk", sans-serif;
  color: #f7f2ff;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}

.feature-content p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}
/* Кнопка скачивания модов */
.mods-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(115deg, #3b82f6, #2563eb); /* Синий цвет в стиле загрузки */
  box-shadow: 0 9px 25px rgba(37, 99, 235, 0.3);
  color: #fff;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
}
.mods-download-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5);
  filter: brightness(1.1);
}