:root {
  --bs-blue: #3b79b6;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #8b2500;
  --bs-orange: #fd7e14;
  --bs-yellow: #e09990;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
	
  --bs-primary: var(--bs-blue);
  --bs-secondary: #34383F;
  --bs-success: #6f8f52;
  --bs-info: #EAFFA8;
  --bs-warning: var(--bs-yellow);
  --bs-danger: var(--bs-red);
  --bs-light: #f8f9fa;
  --bs-dark: #131b27;
  --bs-primary-rgb: 95, 116, 148;
  --bs-secondary-rgb: 52, 56, 63;
  --bs-success-rgb: 135, 148, 95;
  --bs-info-rgb: 234, 255, 168;
  --bs-warning-rgb: 224, 153, 144;
  --bs-danger-rgb: 148, 101, 95;
  --bs-light-rgb: 248,249,250;
  --bs-dark-rgb: 33,37,41;
  --hud-text:#e8eef9;
  --hud-mute:#8fa2ba;
  --hud-b1: rgba(30,40,58,.42);
  --hud-b2: rgba(16,22,34,.42);
  --hud-b-hover1: rgba(50,66,96,.62);
  --hud-b-hover2: rgba(20,28,46,.62);
  --hud-b-active1: rgba(60,86,130,.78);
  --hud-b-active2: rgba(28,40,64,.78);
  --hud-border: rgba(150,190,255,.20);
  --hud-border-strong: rgba(120,170,255,.45);
  --hud-neon:#5aa6ff;          /* цвет подсветки как у подпунктов меню */
  --bs-blue:#3b79b6; --bs-red:#8b2500; --bs-dark:#131b27; --dark-color:#0d0d10;
  --glass-bg-color:rgba(30,30,45,.5); --accent-blue:#4aa0e0; --accent-border:#4d4338;
  --glow-color:#66b5ff; --text-color:#f0f0f0; --base-padding:20px;

  --logo-width:130px; --logo-height:40px;
  --header-height-hud:45px; --header-height-nav:40px;

  --ui-scale:1;
  --hud-row-h:45px;
  --vip-row-h:40px;
  --exit-row-h:56px;
  --mobile-header-total:calc(var(--hud-row-h) + var(--vip-row-h) + var(--exit-row-h));

  /* Плитки меню */
  --tile-h:54px;
  --tile-fz:12px;
  --tile-gap:14px;

  --bs-blue:#3b79b6; --bs-red:#8b2500; --bs-dark:#131b27; --dark-color:#0d0d10;
  --glass-bg-color:rgba(30,30,45,.5); --accent-blue:#4aa0e0; --accent-border:#4d4338;
  --glow-color:#66b5ff; --text-color:#f0f0f0; --base-padding:20px;

  --logo-width:130px; --logo-height:40px;
  --header-height-hud:45px; --header-height-nav:40px;

  --ui-scale:1;
  --hud-row-h:45px;
  --vip-row-h:40px;
  --exit-row-h:56px;
  --mobile-header-total:calc(var(--hud-row-h) + var(--vip-row-h) + var(--exit-row-h));

  /* Плитки меню */
  --tile-h:54px;
  --tile-fz:12px;
  --tile-gap:14px;
  --silk-bg: rgba(14,18,24,.82);
  --silk-edge: rgba(255,255,255,.14);
  --silk-edge-hover: rgba(60,150,255,0.35);
  --silk-text: #e9eef5;
  --silk-muted: rgba(233,238,245,.78);
  --silk-label: #d6deea;
  --silk-gold: #f1c847;
  --silk-gold-soft: #f5d48a;
  --silk-glass:rgba(16,20,28,.55);
  --silk-shadow:0 10px 26px rgba(0,0,0,.35);

  /* подгон размеров баннера */
  --event-max: 1100px;       /* можно 1200px */
  --event-ratio: 21/9;       /* пропорции карточки */
}

body {
  background-image: url(https://img.aliennation.lv/gallery/alien_lk_main_bghw.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* <-- ключевой момент */
  background-position: center top;
  padding-top: calc(var(--header-height-hud) + var(--header-height-nav));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
}


.btn-primary {
    background-image: url(https://img.aliennation.lv/gallery/button.jpg);
	background-size: cover;
    --bs-btn-border-color: #0e6c9c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #003556;
    --bs-btn-hover-border-color: #19354f;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #19354f;
    --bs-btn-active-border-color: #19354f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.35);
}

.btn-warning {
    background-image: url(https://img.aliennation.lv/gallery/button_alert.jpg);
	background-size: cover;
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffb4a3;
    --bs-btn-hover-border-color: #ffb4a3;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffb4a3;
    --bs-btn-active-border-color: #ffb4a3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.35);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}

.bg-custom-red {
    background-image: linear-gradient(310deg, rgba(222, 1, 1, 0.55), transparent 50%);
    color: rgba(222, 1, 1, 0.79)
}

.bg-custom-blue {
    background-image: linear-gradient(310deg, rgba(1, 106, 239, 0.55), transparent 50%);
    color: rgba(1, 106, 239, 0.86);
}

.bg-custom-yellow {
    background-image: linear-gradient(310deg, rgb(255, 208, 31, 0.55), transparent 50%);
    color: rgba(255, 208, 31, 0.90);
}

.bg-custom-brown {
    background-image: linear-gradient(310deg, #7b4a2c, transparent 50%);
    color: #7b4a2c;
}

.bg-custom-green {
    background-image: linear-gradient(310deg, rgb(4, 130, 112, 0.55), transparent 50%);
    color: #048270;
}

.bg-custom-purple {
  background-image: linear-gradient(310deg, rgb(164, 66, 193, 0.42), transparent 50%);
  color: #a442c1a8;
}

.bg-custom-gray {
  background-image: linear-gradient(310deg, rgb(142, 130, 130, 0.75), transparent 50%);
  color: #8e8282;
}

.bg-custom-orange {
  background-image: linear-gradient(310deg, rgb(255, 106, 0, 0.64), transparent 50%);
  color: #ff6a00db;
}

.bg-custom-lightblue {
  background-image: linear-gradient(310deg, rgb(20, 201, 248, 0.57), transparent 50%);
  color: #14c9f8e0;
}
.bg-custom-lightpurple {
  background-image: linear-gradient(310deg, #ab94cca8, transparent 50%);
  color: #ab94cca8;
}

.bg-custom-lightgreen {
  background-image: linear-gradient(310deg, #439845ad, transparent 50%);
    color: #439845;
}

.bg-custom-lightorange1 {
  background-image: linear-gradient(310deg, #ecae7d78, transparent 50%);
    color: #dea579ed;
}

.bg-custom-lightpink {
  background-image: linear-gradient(310deg, #f2707596, transparent 50%);
    color: #fd7c81e3;
}

.bg-custom-coldb {
    background-image: linear-gradient(310deg, #539bf78c, transparent 50%);
    color: #76adf2db;
}

.bg-custom-yellowspecial {
    background-image: linear-gradient(310deg, #cc9824, transparent 50%);
    color: #cc9824;
}

.bg-custom-pinklove {
    background-image: linear-gradient(310deg, #de79a1ed, transparent 50%);
    color: #de79a1ed;
}

.bg-custom-lightred {
    background-image: linear-gradient(310deg, #cf3c3cb8, transparent 50%);
    color: #cf3c3cb8;
}

.bg-custom-vipgreen {
    background-image: linear-gradient(106deg, #47e89e, #000000d4 50%);
    color: #ab94cca8;
}

.bg-custom-lightskin {
    background-image: linear-gradient(310deg, #f4c38b, transparent 50%);
    color: #f4c38b;
}

.text-info1 {
    color: #f7904a;
	font-size: 1.25rem;
}

.text-info2 {
    color: #d73030;
}

.text-info3 {
    color: #45c675;
}

.text-info4 {
    color: #00FFFF;
}

.text-info5 {
    color: #80aad5;
}

.text-info6 {
    color: #f14860cf;
}


.text-info7 {
    color: #d6c74f;
}

.text-info8 {
    color: #e7cebc;
	font-size: 1rem;
}

.text-info9 {
    color: #e6c357;
    font-size: 0.8rem;
}

.text-info10 {
	color: #2dbe60;
    font-size: 1.2rem;
}

.text-info12 {
	color: #2d67be;
    font-size: 1rem;
}

.bg-custom-done {
  background-color: rgba(223,38,56,0.4);
  color: #FFF;
}


.card-img-top {
  max-width: 80%;
  border-radius: 0.7em;
}


.bg1 { 
  /* The image used */
  background-image: url("https://cdn.discordapp.com/attachments/1182324400184373250/1191896040232734840/HollidaysBG.jpg?ex=65a71ab0&is=6594a5b0&hm=fa1bcfeef2cc96ff0940d620c03e7d923a978ce5e111e189d83f4e3f56492216&");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.navbar-gradent {
    background: linear-gradient(339deg, #384f6dbd 0%, #273a4af7);
}

.inside-shadow {
    box-shadow: 1px 1px 2px 1px rgb(9 90 132) inset;
}

.normal-shadow {
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.35);
}

.card-title {
    font-size: 0.9rem;
}

.card-title3 {
    position: inherit;
	background-color: #2434399e;
}

.card-text {
    font-size: 0.7rem;
    color: #FFFFFFFF;
}

.accord-text2{
    font-size: 0.8rem;
    color: #FFFFFFFF;
}
.card-text2 {
    font-size: 1rem;
    color: #FFFFFFFF;
}
.card-text3 {
    font-size: 1.3rem;
    color: #ffd800;
}
.card-text4 {
    font-size: 1rem;
    color: #f9d300;
}

.alert-info {
    --bs-alert-color: #f8f8f8;
    --bs-alert-bg: #192839ba;
    --bs-alert-border-color: #225986;
    --bs-alert-link-color: var(--bs-info-text-emphasis);
}
.alert-success {
color: #ffe9c9 !important;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .04);
    background: linear-gradient(180deg, rgb(28 64 44 / 80%), rgb(60 130 99 / 80%));
    color: #eaf2ff;
    border-color: #27dc8a;
}

.alert-warning {
    color: #ffe9c9 !important;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .04);
    background: linear-gradient(180deg, rgb(78 72 36 / 80%), rgb(147 126 45 / 80%));
    color: #eaf2ff;
    border-color: #dbdc27;
}

.alert-danger {
    color: #ffe9c9 !important;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .04);
    background: linear-gradient(180deg, rgb(64 28 28 / 80%), rgb(130 60 60 / 80%));
    color: #eaf2ff;
    border-color: #dc2727;
}

.alert-light {
    --bs-alert-color: var(--bs-light-text-emphasis);
    --bs-alert-bg: #4338308f;
    --bs-alert-border-color: #574949;
    --bs-alert-link-color: var(--bs-light-text-emphasis);
}

.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: #1c232ae0;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(8px);
  border: 1px solid var(--silk-edge);
  color: var(--silk-text);
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: rgb(52 56 63 / 66%) !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: #549ddf;
    --bs-table-bg-type: #8cc5ff0d;
}

.blink {
    animation: blinker 1.5s linear infinite;
    color: red;
    font-size: 1.5em;
    /* Larger, responsive font size */
    margin-bottom: 20px;
}

@keyframes blinker {
    50% {
       opacity: 0;
    }
}

@media screen and (max-width: 767px) {
    .accordion-style .btn-link {
        padding: 15px 40px 15px 55px;
    }
}

@media screen and (max-width: 575px) {
    .accordion-style .btn-link {
        padding: 15px 30px 15px 55px;
	}
}
.pic {
	
    width: 50px;
    height: 50px;
    object-fit: contain;
}



.table tbody td input[type="checkbox"]:checked::after {
    display: flex;
    align-items: center;
    justify-content: center;
}



.table tbody td {
    padding: 10px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.table tbody td .fa-times {
    color: #a63737;
}


.text-muted {
    font-size: 12.5px;
}

.table tbody tr td:nth-of-type(3) {
    min-width: 320px;
}

.area {
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  animation: blur 1s ease-out infinite;
  text-shadow: 0px 0px 1px #fff, 0px 0px 1px #fff;
}

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 1px #fff,
      0px 0px 1px #fff, 
      0px 0px 2px #fff,
      0px 0px 2px #fff,
      0px 0px 2px #fff,
      0px 0px 2px #fff,
      0px 0px 2px #fff,
      0px 0px 2px #fff,
      0px 0px 5px #fff,
      0px 0px 5px #fff,
      0px 0px 5px #7B96B8,
      0px 0px 15px #7B96B8,
      0px 10px 20px #7B96B8,
      0px 10px 20px #7B96B8,
      0px 10px 20px #7B96B8,
      0px 10px 20px #7B96B8,
      0px -10px 20px #7B96B8,
      0px -10px 20px #7B96B8;
  }
}

@media(min-width: 992px) {
    .container .table-wrap {
        overflow: hidden;
    }
}

/* КНОПКИ (оставляем как раньше) */
.mu-btn,
.mu-btn-long {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-color: transparent;

  font-family: 'Philosopher', sans-serif;
  font-weight: normal;
  text-shadow: 1px 1px 2px #000;
  text-decoration: none;
  color: white;

  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  cursor: pointer;

  transition: all 0.3s ease;
  font-size: clamp(10px, 1.05vw, 15px);
  padding: 0.45em 0.8em;
  aspect-ratio: 7 / 2.2;
  overflow: hidden;
  position: relative;
}

/* РАЗМЕРЫ */
.mu-btn { width: clamp(85px, 13vw, 150px); }
.mu-btn-medium { width: clamp(130px, 17vw, 190px); }
.mu-btn-long { width: clamp(170px, 26vw, 280px); }

/* ФОНЫ */
.mu-btn-blue { background-image: url('https://img.aliennation.lv/gallery/btnblue.png'); }
.mu-btn-red  { background-image: url('https://img.aliennation.lv/gallery/btnred.png'); }
.mu-btn-green{ background-image: url('https://img.aliennation.lv/gallery/btngreen.png'); }

.mu-btn-blue:hover  { filter: drop-shadow(0 0 4px rgba(0, 153, 255, 0.4)); }
.mu-btn-red:hover   { filter: drop-shadow(0 0 4px rgba(255, 50, 50, 0.4)); }
.mu-btn-green:hover { filter: drop-shadow(0 0 4px rgba(50, 255, 50, 0.4)); }

/* ПОДСВЕТКА ТЕКСТА НАВЕДЕНИЕМ — ЭФФЕКТ ВОЛНЫ */
.mu-btn:hover,
.mu-btn-long:hover {
  -webkit-mask-image: linear-gradient(
    -75deg,
    rgba(0, 0, 0, 0.6) 30%,
    #000 50%,
    rgba(0, 0, 0, 0.6) 70%
  );
  -webkit-mask-size: 200%;
  mask-image: linear-gradient(
    -75deg,
    rgba(0, 0, 0, 0.6) 30%,
    #000 50%,
    rgba(0, 0, 0, 0.6) 70%
  );
  mask-size: 200%;
  animation: wave 2s linear infinite;
}

@keyframes wave {
  from {
    -webkit-mask-position: 150%;
            mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
            mask-position: -50%;
  }
}

.mu-select-wrapper {
  position: relative;
  overflow: hidden;
  width: clamp(140px, 18vw, 200px);
  aspect-ratio: 7 / 2.2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mu-select-wrapper select {
  appearance: none;
  background: transparent;
  color: white;
  border: none;
  font-family: 'Philosopher', sans-serif;
  font-size: clamp(10px, 1.2vw, 16px);
  padding: 0 1em;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 2px #000;
  cursor: pointer;
  z-index: 2;
}

/* Убираем стрелочку в Edge/IE */
.mu-select-wrapper select::-ms-expand {
  display: none;
}

/* Дополнительно: убираем фокусное свечение */
.mu-select-wrapper select:focus {
  outline: none;
}

.card-textloc {
    font-size: 0.8rem;
    color: #64a7d9;
    text-align: center;
}

.mu-badge {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 2rem;
  padding: 0 0.6rem;
  margin: 0 0.25rem;

  color: #fff;
  font-family: 'Philosopher', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  text-shadow: 1px 1px 2px #000;

  border: none;
  position: relative;
  overflow: hidden;
  z-index: 0;

  box-sizing: border-box; /* Важно для ::before */
  transition: box-shadow 0.3s ease;
}

.mu-badge span,
.mu-badge img {
  position: relative;
  z-index: 2;
}

.mu-badge img {
  height: 22px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 1px #000) brightness(1.1);
}

.mu-badge span {
  display: inline-block;
  vertical-align: middle;
  line-height: 1rem;
}

/* Подсветка и рамка при наведении — по цветам */
.mu-badge.mu-badge-blue:hover {
  box-shadow: 0 0 8px rgba(0, 153, 255, 0.5);
}
.mu-badge.mu-badge-blue::before {
  border: 2px solid rgba(0, 255, 255, 0.3);
}

.mu-badge.mu-badge-red:hover {
  box-shadow: 0 0 8px rgba(255, 50, 50, 0.5);
}
.mu-badge.mu-badge-red::before {
  border: 2px solid rgba(255, 0, 0, 0.4);
}

.mu-badge.mu-badge-green:hover {
  box-shadow: 0 0 8px rgba(0, 255, 100, 0.5);
}
.mu-badge.mu-badge-green::before {
  border: 2px solid rgba(0, 255, 100, 0.4);
}

/* Адаптивная рамка */
.mu-badge::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease-in-out;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
}

.mu-badge:hover::before {
  transform: scaleX(1);
}

/* Фоны */
.mu-badge-blue {
  background-image: url("https://img.aliennation.lv/gallery/btnbgblue.png");
}

.mu-badge-red {
  background-image: url("https://img.aliennation.lv/gallery/btnbgred.png");
}

.mu-badge-green {
  background-image: url("https://img.aliennation.lv/gallery/btnbggreen.png");
}

.account-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  position: relative;
}

.account-status img {
  height: 28px;
  width: auto;
  display: block;
  z-index: 2;
  filter: drop-shadow(0 0 1px #000) brightness(1.1);
}

.account-status::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease-in-out;
  z-index: 1;
  pointer-events: none;
}

.account-status:hover::before {
  transform: scaleX(1);
}

.status-green::before {
  border-color: rgba(0, 255, 100, 0.5);
}

.status-red::before {
  border-color: rgba(255, 0, 0, 0.5);
}

.beta-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  padding: 2px 8px;
  margin-right: -0.4rem;  /* 👈 текст ближе к бейджу */
  background: #d22323;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transform: rotate(315deg);
  transform-origin: center;
  vertical-align: 7px;
  pointer-events: none;
}

/* Контейнер шире */
.container-xxl{ max-width: 1400px; }

/* Корневой блок */
.ml2-wrap{
  background: rgb(56 74 93 / 56%);
  border: 1px solid #2f3642;
  box-shadow: inset 0 0 10px rgba(255,255,255,.05);
  color:#dce4f0;
}
.ml2-lead{ color:#cfd6e3; font-size:14px; }

/* Иконки (твои из /mu/img/) */
.ml2-ico{
  width: 48px; height: 48px; object-fit: contain; margin-right: .4rem; vertical-align: -3px;
}

/* Инфо-блок (3 колонки) */
.ml2-info{
  display: grid; gap: 12px;
  grid-template-columns: repeat(12,1fr);
}
/* =========================================
   INFO CARDS + TABS · DARK SILK
   ========================================= */

/* Инфо-карточка */
.ml2-info__col{
  position: relative;
  grid-column: span 4;

  background: rgba(0,0,0,.40);
  backdrop-filter: blur(8px);
  border: 1px solid var(--silk-edge);
  border-radius: 16px;
  padding: 1rem 1.1rem;

  color: var(--silk-text);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.ml2-info__col::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(65% 90% at 50% 0%, rgba(255,255,255,.06), transparent 75%),
    radial-gradient(70% 90% at 50% 120%, rgba(0,0,0,.28), transparent 75%);
  mix-blend-mode: overlay;
}
.ml2-info__col:hover{
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

@media (max-width: 991.98px){
  .ml2-info__col{ grid-column: span 12; }
}

/* Заголовок внутри карточки */
.ml2-info__title{
  display:flex; align-items:center; gap:.5rem;
  color: var(--glow-color);
  font-weight: 800;
  margin-bottom: .55rem;
  text-shadow: 0 0 8px rgba(102,181,255,.25);
}
.ml2-info__title .ml2-ico{ width:35px; height:35px; }

/* Список-пули */
.ml2-info__list{
  list-style: none;
  margin: 0;
  padding-left: 1.2rem;
  color: #e8ecf4;
  font-size: 15px;
  line-height: 1.55;
}
.ml2-info__list li{ position:relative; margin:.35rem 0; }
.ml2-info__list li::before{
  content:"";
  position:absolute; left:-1.2rem; top:.6rem;
  width:7px; height:7px; border-radius:2px;
  background: var(--glow-color);
  box-shadow: 0 0 8px rgba(102,181,255,.45);
}

/* =========================
   Вкладки-кнопки (tabs)
   ========================= */
/* ============================================================
   ML2 · TABS (вкладки-кнопки, стеклянный стиль без жёлтого)
   ============================================================ */
  /* Пример CSS, который понадобится для работы PHP-вкладок */
.ml2-tab-content {
    display: none;
}
.ml2-tab-content.active-content {
    display: block;
} 
   
.ml2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* ---- кнопка / вкладка ---- */
.ml2-tabs .btn,
.ml2-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.65rem 1.2rem;
  min-width: 160px;

  border-radius: 12px;
  border: 1px solid var(--hud-border, rgba(255,255,255,.1));
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  color: #cfe6ff;

  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .2px;

  transition: all 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  text-align: center;
  cursor: pointer;
}

/* ---- иконка ---- */
.ml2-tabs .ml2-icon,
.ml2-tab .ml2-ico {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

/* ---- бейдж ---- */
.ml2-tabs .badge {
  background: linear-gradient(135deg, #2ec4c4, #1c7a8a);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(63, 242, 171, 0.45);
  padding: 0.1rem 0.5rem;
}

.ml2-tabs .btn:hover .badge,
.ml2-tab:hover .badge {
  box-shadow: 0 0 12px rgb(63 242 171 / 70%);
}

/* ---- hover ---- */
.ml2-tabs .btn:hover,
.ml2-tab:hover {
  border-color: #3fa8d9;
  color: #b7e9ff;
  background: rgba(20,40,60,.55);
  box-shadow: 0 0 14px rgba(102,181,255,.3);
}

/* ---- active ---- */
.ml2-tabs .btn.active,
.ml2-tab.active {
  background: linear-gradient(180deg, rgba(28,40,64,.8), rgba(60,86,130,.8));
  color: #eaf2ff;
  border-color: #27abdc;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 16px rgba(102,181,255,.35);
}

/* ---- адаптив ---- */
@media (max-width: 768px){
  .ml2-tabs {
    flex-direction: column;
    gap: 0.6rem;
  }
  .ml2-tabs .btn,
  .ml2-tab {
    width: 100%;
    min-width: unset;
    font-size: 1rem;
    padding: 0.7rem 1rem;
  }
}

/* ===== MOBILE FIX: горизонтальная лента со скроллом и snap ===== */
@media (max-width: 767.98px){
  .ml2-tabs{
    display: flex !important;
    flex-wrap: nowrap;
    gap: .5rem;
    padding: .25rem .5rem;

    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    justify-content: flex-start;        /* убираем центрирование */
  }

  /* скрыть полосу прокрутки */
  .ml2-tabs::-webkit-scrollbar{ height: 0; }
  .ml2-tabs{ scrollbar-width: none; }

  .ml2-tab,
  .ml2-tabs .btn{
    flex: 0 0 auto;                     /* не растягиваемся */
    min-width: 118px;
    padding: .55rem .9rem;
    font-size: .98rem;
    border-radius: 10px;
    scroll-snap-align: start;
  }

  .ml2-tabs .ml2-ico{ width: 26px; height: 26px; }

  /* небольшой «буфер» справа, чтобы крайняя кнопка не прилипала к краю экрана */
  .ml2-tabs::after{ content:""; flex: 0 0 .5rem; }
}

/* На случай, если outline/focus обрезается родителем с overflow:hidden */
.ml2-tab:focus-visible,
.ml2-tabs .btn:focus-visible{
  outline: 2px solid #66b5ff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(102,181,255,.25);
}


/* ================================
   MONSTER LEAGUE · DARK SILK EDITION
   ================================ */

/* Сетка карточек */
.ml2-grid {
  display: grid;
  gap: 12px;
}
@media (min-width:576px){ .ml2-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:768px){ .ml2-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:992px){ .ml2-grid{ grid-template-columns:repeat(5,1fr); } }
@media (min-width:1400px){ .ml2-grid{ grid-template-columns:repeat(6,1fr); } }

/* ------------------------------
   Карточка монстра
   ------------------------------ */
.ml2-card {
  position: relative;
  text-align: center;

  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(8px);
  border: 1px solid var(--silk-edge);
  border-radius: 16px;
  padding: .8rem;

  display: flex;
  flex-direction: column;
  align-items: center;

  color: var(--silk-text);
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.ml2-card:hover {
  border-color: rgba(60,150,255,0.35);
  box-shadow:
    0 12px 28px rgba(0,0,0,.55),
    0 0 14px rgba(80,180,255,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* мягкий шёлковый блик */
.ml2-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(70% 90% at 50% 120%, rgba(0,0,0,.25), transparent 70%);
  mix-blend-mode: overlay;
}

/* ------------------------------
   Картинка и имя
   ------------------------------ */
.ml2-img {
  width: 94px;
  height: 94px;
  object-fit: contain;
  display: block;
  margin: 0 auto .4rem;
  padding: 6px;
  border-radius: 12px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.06), rgba(0,0,0,.55));
  box-shadow:
    0 8px 18px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06);
}

.ml2-name {
  font-size: 13px;
  font-weight: 600;
  color: #e8ecf4;
  min-height: 30px;
  margin-bottom: .35rem;
  padding: 0 .25rem;
  text-shadow: 0 0 3px rgba(0,0,0,.6);
}

/* ------------------------------
   Очки
   ------------------------------ */
.ml2-pts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 28px;
  padding: 0 .8rem;
  border-radius: 999px;
  border: 1px solid rgba(150,190,255,.25);
  background: linear-gradient(180deg, rgba(20,25,35,.8), rgba(10,14,22,.85));
  color: var(--glow-color);
  font-weight: 800;
  font-size: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 6px rgba(90,166,255,.15);
  transition: all .25s ease;
}

.ml2-card:hover .ml2-pts {
  border-color: var(--silk-edge-hover);
  color: #ffd36b;
  background: linear-gradient(180deg, rgba(40,32,18,.7), rgba(14,10,6,.9));
  box-shadow:
    0 0 10px rgba(245,182,37,.4),
    inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ------------------------------
   Кнопка "Подробнее"
   ------------------------------ */
.ml2-card button {
  margin-top: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 2rem;
  padding: 0 .9rem;

  background-image: url("https://img.aliennation.lv/gallery/btnbgblue.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  color: #fff;
  font-family: 'Philosopher', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  text-shadow: 1px 1px 2px #000;

  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: box-shadow .25s ease;
}
.ml2-card button:hover,
.ml2-card button:focus {
  box-shadow: 0 0 12px rgba(102,181,255,.35);
  transform: none;
  filter: none;
}


/* =========================
   Popover (окно Подробнее)
   ========================= */
.popover.ml2-popover {
  background: #0f1318;
  border: 1px solid #2f3642;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(78 187 96 / 25%);
  max-width: 280px;
  color: #dce4f0;
  font-size: 13px;
}

.popover.ml2-popover .popover-header {
  background: #1c2027;
  color: #50bec7; /* акцент твоего интерфейса */
  font-weight: 700;
  border-bottom: 1px solid #2f3642;
  font-size: 14px;
}

.popover.ml2-popover .popover-body {
  background: #0f1318;
  color: #dce4f0;
  padding: .75rem .9rem;
}

.popover.ml2-popover strong {
  color: #2d8eb1; /* акцент на числах и локациях */
  font-weight: 700;
}

.popover.ml2-popover a {
  color: #2d8eb1;
  text-decoration: none;
}

.popover.ml2-popover a:hover {
  text-decoration: underline;
}


/* Награды */
.ml-rew-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* ровно 4 колонки */
}

@media (max-width: 992px) {
  .ml-rew-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* на планшетах 3 */
  }
}

@media (max-width: 768px) {
  .ml-rew-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* на телефонах 2 */
  }
}

@media (max-width: 480px) {
  .ml-rew-grid {
    grid-template-columns: 1fr; /* на очень узких — по одной */
  }
}

.ml-rew{
  background: rgb(33 38 47);
  border:1px solid #2d8eb1; border-radius:10px;
  padding:.6rem .9rem; color:#fff; text-align:center; box-shadow:0 0 5px rgba(0,0,0,.4);
}
.ml-rew__range{ color:#67d7f3; font-weight:800; margin-bottom:.2rem; }
.ml-rew__vals{ color:#e6e8ec; }
.ml-rew--note{
  grid-column:1/-1; background:transparent; border:1px dashed rgba(245,182,37,.6);
}

/* Отключаем Bootstrap-эффекты наведения/активации только для кнопок в карточках монстров */
.ml2-card .btn:hover,
.ml2-card .btn:focus,
.ml2-card .btn:active,
.ml2-card .btn.active,
.ml2-card .btn.show,
.ml2-card .btn:first-child:active,
.ml2-card :not(.btn-check)+.btn:active {
  color: inherit !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
}

.text-ml-alien {
    --bs-text-opacity: 1;
    color: rgb(103 215 255) !important;
	text-align: center;
}

/* ================================
   Monster League · единый фон карточек (Dark Silk)
   ================================ */

/* Главные карточки этого блока: шапка, общий счёт, инфоблок, 4 примера-диапазона */
.ml2-hero,
.ml2-total,
.ml-rew-info,
.ml-rew {
  position: relative;
  background: rgba(0,0,0,.40);          /* полупрозрачный тёмный */
  backdrop-filter: blur(8px);           /* мягкий блюр как в Silk */
  border: 1px solid var(--silk-edge);   /* золотистая кромка */
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  /* радиусы не меняем сильно, чтобы не «сломать» верстку */
  border-radius: 12px;
  color: var(--silk-text);
  transition: border-color .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

/* Мягкие «шёлковые» блики сверху/снизу (не влияют на размеры) */
.ml2-hero::before,
.ml2-total::before,
.ml-rew-info::before,
.ml-rew::before {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(65% 90% at 50% 0%, rgba(255,255,255,.06), transparent 75%),
    radial-gradient(70% 90% at 50% 120%, rgba(0,0,0,.28), transparent 75%);
  mix-blend-mode: overlay;
}

/* Ховер только у интерактивных карточек (диапазоны) */
.ml-rew:hover {
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Заголовок «диапазона» — слегка подсветим, без изменения размеров */
.ml-rew__range {
  color: var(--glow-color);
  font-weight: 800;
  text-shadow: 0 0 8px rgba(102,181,255,.25);
}

/* «или» в линиях наград: чуть тише и без розового свечения */
.ml-rew__vals.choice .or {
  color: #bfc8d6;
  font-weight: 700;
  text-transform: lowercase;
  text-shadow: none;
  opacity: .8;
}

/* Внутренние «плашки» наград (если есть .reward) — слегка приподнимем */
.ml-rew .reward {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(160,200,255,.18);
  border-radius: 10px;
  padding: .3rem .5rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Для компактной шапки/общего счёта — радиусы чуть больше, но без изменения размеров */
.ml2-hero { border-radius: 12px; }
.ml2-total { border-radius: 12px; }
.ml2-total:hover {
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* На всякий случай оставим твой уменьшенный общий счёт как есть — только фон меняем */
.ml2-total-label { /* не трогаем твои размеры */ }
.ml2-total-value { /* не трогаем твои размеры */ }

/* =========================================
   ML · Бонусные пометки внутри карточек .ml-rew
   ========================================= */
.ml-rew__extra{
display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 3px 6px;
    font-size: 11px;
    color: #e7edf6;
    background: rgba(0, 0, 0, .35);
    border: 1px dashed rgba(255, 255, 255, .18);
    border-left: 4px solid #9dd6ff;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.ml-rew__extra i{
  font-size: 15px;
  opacity: .95;
  /* цвет иконки под общий акцент */
  color: #9dd6ff;
}

/* Варианты акцентов: сундуки (золото) и условие 200+ (холодный голубой) */
.ml-rew__extra.is-chest{
  border-left-color: #f9d300;
  background: rgba(50,40,0,.28);
}
.ml-rew__extra.is-chest i{ color:#f9d300; }

.ml-rew__extra.is-conditional{
  border-left-color: #9dd6ff;
  background: rgba(15,25,40,.28);
}
.ml-rew__extra.is-conditional i{ color:#9dd6ff; }

/* ===========================================================
   Горизонтальные карточки убийств
   =========================================================== */

/* --- Сетка: 5 в ряд на больших экранах --- */
.ml2-hlist {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 576px) {
  .ml2-hlist {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .ml2-hlist {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .ml2-hlist {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1200px) {
  .ml2-hlist {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ==========================================================
   MONSTER LEAGUE · HORIZONTAL CARD (Dark Silk)
   ========================================================== */

.ml2-hcard {
  display: flex;
  align-items: center;
  gap: 12px;

  /* шёлковый фон */
  background: rgba(0, 0, 0, .40);
  backdrop-filter: blur(8px);
  border: 1px solid var(--silk-edge);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--silk-text);

  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .25s ease, box-shadow .25s ease, transform .15s ease;
  will-change: transform;
}
.ml2-hcard::before {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(65% 90% at 50% 0%, rgba(255,255,255,.06), transparent 75%),
    radial-gradient(70% 90% at 50% 120%, rgba(0,0,0,.28), transparent 75%);
  mix-blend-mode: overlay;
}
.ml2-hcard:hover {
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- Изображение монстра --- */
.ml2-himg {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* --- Блок с названием --- */
.ml2-hmeta {
  flex: 1 1 auto;
  min-width: 0;
}
.ml2-hname {
  color: #e9e9ee;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Бейдж количества убийств --- */
.ml2-hpts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(87, 195, 255, 0.45);
  color: #82d4ff;
  font-weight: 800;
  font-size: 14px;
  background: rgba(87, 195, 255, 0.10);
  box-shadow: inset 0 0 6px rgba(87,195,255,.15);
  transition: all .2s ease;
}
.ml2-hcard:hover .ml2-hpts {
  background: rgba(87,195,255,.20);
  border-color: rgba(245,182,37,.35);
  color: #ffd36b;
  box-shadow: 0 0 8px rgba(245,182,37,.25);
}



/* ============================
   H-CARD · RESPONSIVE TUNING
   ============================ */

/* (опц.) если список — делаем грид-ленту */
.ml2-hlist{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* Десктоп: по 2 в ряд */
}
@media (min-width:1200px){
  .ml2-hlist{ grid-template-columns: repeat(3, minmax(0,1fr)); } /* XL: 3 в ряд */
}
@media (min-width:1600px){
  .ml2-hlist{ grid-template-columns: repeat(4, minmax(0,1fr)); } /* XXL: 4 в ряд */
}

/* Карточка всегда на всю колонку грида */
.ml2-hcard{ width: 100%; }

/* —— breakpoints для размеров внутри карточки —— */

/* LG ≤ 1199px: чуть компактнее */
@media (max-width: 1199.98px){
  .ml2-hcard{ padding: 10px; gap: 10px; }
  .ml2-himg{ width: 56px; height: 56px; flex-basis: 56px; }
  .ml2-hname{ font-size: 12.5px; }
  .ml2-hpts{
    min-width: 42px; height: 26px; padding: 0 .55rem; font-size: 13px;
  }
}

/* MD ≤ 991px: две колонки/компактнее текст */
@media (max-width: 991.98px){
  .ml2-hlist{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ml2-hcard{ padding: 9px; gap: 9px; }
  .ml2-himg{ width: 52px; height: 52px; flex-basis: 52px; }
  .ml2-hname{ font-size: 12px; }
  .ml2-hpts{
    min-width: 40px; height: 24px; padding: 0 .5rem; font-size: 12.5px;
  }
}

/* SM ≤ 768px: одна колонка, ещё компактнее */
@media (max-width: 767.98px){
  .ml2-hlist{ grid-template-columns: 1fr; }
  .ml2-hcard{ padding: 8px; gap: 8px; }
  .ml2-himg{ width: 48px; height: 48px; flex-basis: 48px; }
  .ml2-hname{
    font-size: 12px;
    white-space: nowrap;           /* оставляем в одну строку с троеточием */
    text-overflow: ellipsis;
  }
  .ml2-hpts{
    min-width: 38px; height: 22px; padding: 0 .45rem; font-size: 12px;
  }
}

/* XS ≤ 420px: сверхкомпактный режим */
@media (max-width: 420px){
  .ml2-hcard{ padding: 7px; gap: 7px; border-radius: 10px; }
  .ml2-himg{ width: 44px; height: 44px; flex-basis: 44px; }
  .ml2-hname{ font-size: 11.5px; }
  .ml2-hpts{
    min-width: 34px; height: 20px; padding: 0 .4rem; font-size: 11.5px; border-radius: 999px;
  }
}

/* анимации — уважение к reduced motion */
@media (prefers-reduced-motion: reduce){
  .ml2-hcard{ transition: none; }
  .ml2-hcard:hover{ transform: none; box-shadow: none; }
}


/* --- Заголовок блока убийств --- */
h4.text-warning {
  color: #2d8eb1 !important;
  font-weight: 700;
}

/* Иконки валют и бейджи сумм */
.ml-rew__vals.choice{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
}
.ml-rew__vals .or{
  color:#aeb6c4; opacity:.9; padding:0 .25rem;
}

.reward{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:8px;
  background: rgba(28,32,38,.85);
  border:1px solid #2f3642;
  box-shadow: inset 0 0 6px rgba(255,255,255,.04);
}
.reward b{
  color:#ffd766; font-weight:800; font-size:14px;
  text-shadow: 0 0 6px rgba(245,182,37,.6);
}

.curr-ico{
  width:42px; height:42px; object-fit:contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  image-rendering: -webkit-optimize-contrast;
}

/* чуть компактнее на узких экранах */
@media (max-width: 420px){
  .curr-ico{ width:20px; height:20px; }
  .reward b{ font-size:13px; }
}



/* Бьем специфичностью и !important */
table.table .ml-rank-cell{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important; /* убираем space-between */
  gap:4px !important;                   /* расстояние цифра↔медаль */
}
table.table .ml-rank-no{
  font-weight:700;
  font-size:1.05rem;
  min-width:1.6em;
  text-align:right;
}
table.table .ml-rank-icons{
  display:flex !important;
  align-items:center !important;
  gap:2px !important;                   /* ещё плотнее между иконками */
  margin-left:4px !important;
}
table.table .ml-rank-icons img{
  width:50px !important;                /* размер медали */
  height:50px !important;
  object-fit:contain;
  display:block;
  transform:translateY(1px);
      margin-left: -5px;
}
@media (max-width: 767.98px){
  table.table .ml-rank-icons img{
    width:36px !important;
    height:36px !important;
  }
}


/* ===== ML Register (вписываем в "шёлковую" тему) ===== */
.ml2-register-box{
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
  border: 1px solid var(--silk-edge);
  border-radius: 12px;
  color: var(--silk-text);
  max-width: 520px;                 /* немного шире – как на скрине */
  margin: 36px auto 42px;
  padding: 22px 20px;
  text-align: center;
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.ml2-register-box::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(70% 90% at 50% 120%, rgba(0,0,0,.2), transparent 70%);
  mix-blend-mode: overlay;
}
.ml2-register-box:hover{
  border-color: var(--silk-edge-hover);
  box-shadow:
    0 14px 36px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 8px rgba(245,182,37,.25);
  transform: translateY(-1px);
}

.ml2-register-box h2{
  font-size: 1.45rem;
  color: #a5d2ff;
  margin: 4px 0 10px;
  line-height: 1.25;
  text-shadow: 0 0 3px rgba(0,0,0,.5);
}
.ml2-register-box p{
  margin-bottom: 14px;
  font-size: .95rem;
  opacity: .95;
}

/* Кнопка внутри бокса — ровно по центру, аккуратный ховер */
.ml2-register-box .mu-btn{
  font-size: 0.8rem;
  padding: 7px 30px;
  border-radius: 8px;
  border: 1px solid var(--silk-edge);
  background: rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.25);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.ml2-register-box .mu-btn:hover,
.ml2-register-box .mu-btn:focus{
  border-color: var(--silk-edge-hover);
  box-shadow: 0 0 12px rgba(102,181,255,.35);
}

/* Если используешь зелёную вариацию */
.ml2-register-box .mu-btn.mu-btn-green{
  background-image: url("https://img.aliennation.lv/gallery/btnbgblue.png"); /* как у тебя */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

/* Состояние "уже зарегистрирован" / "успешно" — золотистый акцент */
.ml2-register-box.is-registered{
  border-color: rgba(255,215,0,.35);
  background: rgba(30,25,10,.70);
}
.ml2-register-box.is-registered h2{ color:#ffd875; }
.ml2-register-box.is-registered p{ opacity:1; }


/* Состояние "уже зарегистрирован" / "успешно" — золотистый акцент */
.ml2-register-box.not-registered{
  border-color: rgb(255 101 34 / 35%);
  background: rgb(54 22 14 / 70%);
}
.ml2-register-box.not-registered h2{ color:#ff7a75; }
.ml2-register-box.not-registered p{ opacity:1; }

/* Адаптив */
@media (max-width: 768px){
  .ml2-register-box{ max-width: 92%; padding: 18px 16px; backdrop-filter: blur(5px); }
  .ml2-register-box h2{ font-size: 1.2rem; }
  .ml2-register-box p{ font-size: .9rem; }
  .ml2-register-box .mu-btn{ width:auto; max-width: 220px; }
}
@media (max-width: 480px){
  .ml2-register-box{ max-width: 94%; padding: 14px 12px; border-radius: 10px; backdrop-filter: blur(4px); }
  .ml2-register-box h2{ font-size: 1.05rem; }
  .ml2-register-box p{ font-size: .85rem; }
  .ml2-register-box .mu-btn{ font-size: .9rem; padding: 6px 22px; }
}


/* ===== SilkGlass HUD Pagination (угловатая геометрия + стрелки) ===== */

/* Контейнер */
.dt-paging nav[aria-label="pagination"]{
  display:flex; justify-content:center; align-items:center;
  padding:12px 6px; margin:18px 0;
}
.dt-paging .pagination{
  display:flex; align-items:center; gap:10px;
  margin:0; padding:0; background:none; border:0; list-style:none;
}

/* Базовая кнопка — угловатый «чип» */
.dt-paging .page-link{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-width:38px; height:34px; padding:0 12px;
  color:var(--hud-text); font-weight:700; font-size:13px; letter-spacing:.02em;
  background:linear-gradient(180deg, var(--hud-b1), var(--hud-b2));
  border:1px solid var(--hud-border);
  border-radius:8px;        /* НЕ круглая */
  backdrop-filter: blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
  transition:background .18s ease, border-color .18s ease,
             box-shadow .18s ease, transform .08s ease, color .18s ease;
  overflow:hidden;
}

/* Шёлковый блик */
.dt-paging .page-link::before{
  content:""; position:absolute; left:-15%; right:-15%; top:-45%;
  height:60%; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
  transform:rotate(-8deg);
  pointer-events:none;
  filter:blur(1.5px);
}

/* Подсветка-«лайн» как в меню (появляется при hover/active) */
.dt-paging .page-link::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-6px; height:2px;
  background:linear-gradient(90deg, transparent, var(--hud-neon), transparent);
  opacity:0; transform:scaleX(.6); transform-origin:center;
  transition:opacity .18s ease, transform .18s ease, bottom .18s ease, height .18s ease;
}

/* Hover */
.dt-paging .page-link:hover{
  color:#cfe2ff;
  background:linear-gradient(180deg, var(--hud-b-hover1), var(--hud-b-hover2));
  border-color:var(--hud-border-strong);
  box-shadow:0 0 12px rgba(90,166,255,.28), 0 1px 0 rgba(255,255,255,.06) inset;
  transform:translateY(-1px);
}
.dt-paging .page-link:hover::after{ opacity:.65; transform:scaleX(1); }

/* Активная страница */
.dt-paging .page-item.active .page-link{
  color:#a3d7ff;
  background:linear-gradient(180deg, var(--hud-b-active1), var(--hud-b-active2));
  border-color:var(--hud-border-strong);
  box-shadow:0 0 16px rgba(90,166,255,.36), inset 0 0 16px rgba(70,120,200,.28);
}
.dt-paging .page-item.active .page-link::after{
  opacity:1; bottom:-7px; height:3px;
}

/* Disabled */
.dt-paging .page-item.disabled .page-link{
  color:var(--hud-mute); opacity:.55; pointer-events:none;
  border-color:rgba(255,255,255,.08);
}

/* ------- КАСТОМНЫЕ СТРЕЛКИ-ТРЕУГОЛЬНИКИ С ПОДСВЕТКОЙ ------- */
/* Скрываем bootstrap-иконки внутри кнопок (если есть) */
.dt-paging .page-link.previous i,
.dt-paging .page-link.next i{ display:none; }

/* Геометрия кнопок стрелок */
.dt-paging .page-link.previous,
.dt-paging .page-link.next{
  width:42px; min-width:42px; padding:0;
}

/* Рисуем треугольник маской + неоновая тень */
.dt-paging .page-link.previous::before,
.dt-paging .page-link.next::before{
  content:""; position:absolute; inset:0;
  margin:auto; width:18px; height:18px;
  background:linear-gradient(180deg, #e6e9ef, #aeb8c8);   /* «металл» */
  filter:
    drop-shadow(0 0 10px rgba(90,166,255,.25))
    drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* Маска — левый треугольник */
.dt-paging .page-link.previous::before{
  -webkit-mask:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M15.8 3.5L6 12l9.8 8.5V3.5z' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M15.8 3.5L6 12l9.8 8.5V3.5z' fill='black'/></svg>") center/contain no-repeat;
}

/* Маска — правый треугольник */
.dt-paging .page-link.next::before{
  -webkit-mask:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M8.2 20.5L18 12 8.2 3.5v17z' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M8.2 20.5L18 12 8.2 3.5v17z' fill='black'/></svg>") center/contain no-repeat;
}

/* Hover/active — ярче неон */
.dt-paging .page-link.previous:hover::before,
.dt-paging .page-link.next:hover::before,
.dt-paging .page-item.active .page-link.previous::before,
.dt-paging .page-item.active .page-link.next::before{
  filter:
    drop-shadow(0 0 12px rgba(90,166,255,.45))
    drop-shadow(0 2px 8px rgba(0,0,0,.5));
}

/* ------- Опционально: вместо маски — свои PNG/WEBP иконки ------- */
/* Раскомментируй и укажи пути, если хочешь ровно те стрелки, что на картинках */
/*
.dt-paging .page-link.previous::before{
  width:20px; height:20px;
  background: url('/img/ui/arrow-left.webp') center/contain no-repeat;
  -webkit-mask:none; mask:none;
}
.dt-paging .page-link.next::before{
  width:20px; height:20px;
  background: url('/img/ui/arrow-right.webp') center/contain no-repeat;
  -webkit-mask:none; mask:none;
}
*/

/* Мобильный компакт */
@media (max-width: 768px){
  .dt-paging .pagination{ gap:8px; }
  .dt-paging .page-link{ min-width:32px; height:32px; padding:0 10px; font-size:12px; }
  .dt-paging .page-link.first,
  .dt-paging .page-link.last{ display:none; }
  .dt-paging .page-link.previous,
  .dt-paging .page-link.next{ width:38px; min-width:38px; }
}

/* ===============================
   НОВЫЕ СТИЛИ НАВИГАЦИОННОЙ ПАНЕЛИ
   =============================== */
/* ===============================
   1) БАЗА
   =============================== */

a{ text-decoration:none; color:var(--text-color); transition:.3s; }

/* ===============================
   2) FIXED WRAPPER
   =============================== */
.header-wrapper{
  position:fixed; top:0; left:0; width:100%;
  z-index:1000; background-color:var(--glass-bg-color);
  backdrop-filter:blur(8px); box-shadow:0 4px 20px rgba(0,0,0,.5);
}
/* Исправляем цвет подписи "Аккаунт" */
.hud-item.status-account {
  color: var(--text-color) !important;
}

/* ===============================
   3) HUD
   =============================== */
.hud-bar{
  height:var(--header-height-hud);
  display:flex; justify-content:space-between; align-items:center;
  padding:0 var(--base-padding);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.logo{ height:var(--header-height-hud); display:flex; align-items:center; padding:0 15px; margin-right:30px; }
.logo img{ height:var(--logo-height); width:auto; max-width:var(--logo-width); display:block; filter:drop-shadow(0 0 8px rgba(102,181,255,.7)); }

.mmtop-hud-item{ display:inline-flex; }
.mmtop-logo-img{ height:25px; width:auto; display:block; }

.hud-group{ display:flex; align-items:center; gap:20px; margin-left:auto; }

.hud-item{
  display:flex; align-items:center; justify-content:center;
  white-space:nowrap; font-size:calc(12px * var(--ui-scale));
  padding:calc(3px * var(--ui-scale)) calc(8px * var(--ui-scale));
  border-radius:6px; background-color:rgba(255,255,255,.05);
  border:1px solid transparent; transition:.3s;
}
.hud-item:hover { border-color: var(--glow-color);    transform: translateY(1px);    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(102, 181, 255, 0.5);}
.hud-item strong{ margin-left:5px; font-weight:700; color:var(--glow-color); }

.coin-icon{ width:calc(20px * var(--ui-scale)); height:calc(20px * var(--ui-scale)); margin-right:calc(4px * var(--ui-scale)); background-size:contain; background-repeat:no-repeat; background-position:center; display:inline-block; }

.vip-icon-style{ width:calc(20px * var(--ui-scale)); height:calc(20px * var(--ui-scale)); margin-right:calc(5px * var(--ui-scale)); }
/* ВАЖНО: Эти классы конфликтуют с вашими .text-info3/.text-info2. Используем их только внутри .vip-status: */
.vip-status strong.text-active-green{ color:#4CAF50; font-weight:700; }
.vip-status strong.text-inactive-red{ color:#FF5252; font-weight:600; }

.status-icon-style{ width:calc(20px * var(--ui-scale)); height:calc(20px * var(--ui-scale)); margin-right:calc(5px * var(--ui-scale)); object-fit:contain; }
/* Аналогично, используем только внутри .status-account */
.status-account strong.text-active-green{ color:#4CAF50; font-weight:700; }
.status-account strong.text-inactive-red{ color:#FF5252; font-weight:600; }

/* Выход */
.hud-exit-btn{
  background-color:rgba(255,50,50,.15); border-color:#ff3333; color:#ff6666;
  padding:calc(3px * var(--ui-scale)) calc(10px * var(--ui-scale));
  margin-left:15px; display:flex; align-items:center; text-align:center;
}
.hud-exit-btn:hover{ border-color:#ff6666; background-color:rgba(255,50,50,.25); box-shadow:0 0 10px rgba(255,100,100,.5); }
.hud-exit-btn i{ margin-right:5px; filter:drop-shadow(0 0 2px #ff6666); }

/* Бургер — появится на мобилке */
.menu-toggle{ display:none; color:var(--text-color); font-size:24px; cursor:pointer; margin-left:15px; user-select:none; }

/* ===============================
   4) ДЕСКТОП-НАВИГАЦИЯ
   =============================== */
.nav-bar{
  height:var(--header-height-nav); background-color:rgba(0,0,0,.4);
  backdrop-filter:blur(8px); border-bottom:2px solid var(--accent-border);  border-top:2px solid var(--accent-border);
  width:100%; margin:0; padding-left:calc(var(--base-padding) + 15px); padding-right:var(--base-padding);
}
.menu-desktop{ list-style:none; display:flex; justify-content:flex-start; height:100%; margin:0; padding:0; }
.menu-item{ position:relative; display:flex; align-items:stretch; margin-right:35px; }
.menu-item::after{ content:''; position:absolute; right:-17.5px; top:25%; height:50%; width:1px; background:rgb(98 172 241 / 52%); }
.menu-item:last-child::after{ content:none; }
.menu-item.gm-menu-right{ margin-left:auto !important; margin-right:0 !important; }
.menu-item.gm-menu-right::after{ content:none; }

.menu-link{
  display:flex; align-items:center; padding:0 10px;
  font-weight:700; font-size:calc(13px * var(--ui-scale));
  letter-spacing:.5px; color:var(--text-color); position:relative;
}
.menu-link:hover{ color:var(--glow-color); }
.menu-link::before{ content:''; position:absolute; bottom:0; left:50%; width:0; height:3px; background:var(--glow-color); transition:width .3s, left .3s; }
.menu-link:hover::before{ width:100%; left:0; }
.gm-link{ color:#ff3d00 !important; }

.beta-chip{
  /* Это ваш существующий .beta-chip, просто убедимся, что он тут есть для меню */
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; line-height:1;
  padding:2px 8px; margin-right:-.4rem; background:#d22323; color:#fff; border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.35); transform:rotate(315deg); transform-origin:center; vertical-align:7px; pointer-events:none;
}

/* Выпадающее меню (десктоп hover) */
.submenu{
  display:none; position:absolute; top:100%; left:0; min-width:250px; background:rgba(0,0,0,.9);
  border:1px solid var(--accent-border); border-top:none; list-style:none; z-index:1050; box-shadow:0 8px 15px rgba(0,0,0,.8); padding:0; border-radius:0 0 8px 8px;
  opacity:0; transform:translateY(-5px); transition:opacity .3s, transform .3s;
}
.menu-item:hover>.submenu{ display:block; opacity:1; transform:translateY(0); }
.submenu-right{ left:auto !important; right:0 !important; transform-origin:top right; }
.submenu-item a{ font-size:12px; padding:8px 15px; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.05); transition:color .3s; padding-left:15px; }
.submenu-item a:hover{ color:var(--glow-color); }
.dropdown-divider{ height:1px; margin:.5rem 0; overflow:hidden; background:rgba(255,255,255,.1); }

/* Иконки в подменю (генерируются JS, но стили для них тут) */
.submenu-item a::before{ content:''; display:inline-block; width:25px; height:25px; margin-right:10px; background-size:contain; background-repeat:no-repeat; background-position:center; filter:grayscale(100%) brightness(.8); transition:.3s; }
.submenu-item a:hover::before{ filter:drop-shadow(0 0 4px var(--glow-color)); }

/* ===============================
   5) МОБИЛЬНАЯ ПАНЕЛЬ
   =============================== */

/* ===== БАЗА ===== */
.mobile-panel{
  display:none;
  border-top:none;
}

.mobile-section{ margin:12px 0; }

/* Валюты */
.mobile-currency{
  display:flex; justify-content:center; gap:20px; padding:14px 0;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  margin:8px 12px 16px;
  font-weight:600; color:var(--text-color);
}
.mobile-currency .hud-item strong{ color:var(--glow-color); }

/* ===============================
   5.1 МОБИЛЬНАЯ ПАНЕЛЬ (≤ 991.98px) - (Стиль для position:fixed)
   =============================== */
@media (max-width: 991.98px){
  .mobile-panel{
    position: fixed;
    top: var(--mobile-header-total);
    left: 0; right: 0; bottom: 0;
    z-index: 999;

    /* 🌌 Тёмный стеклянный фон */
    background: rgba(22,25,33,0.55);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);

    /* 🟤 Коричневая рамка по краям панели */
    border: 1px solid var(--accent-border);
    border-top: 2px solid var(--accent-border);
    box-shadow:
      inset 0 0 25px rgba(0,0,0,0.5),
      0 0 12px rgba(77,67,56,0.6);

    padding: 18px 16px;
    overflow-y: auto;

    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .35s ease, transform .35s ease;
    display: none; /* скрыта по умолчанию */
  }

  /* открытое состояние */
  body.nav-open .mobile-panel{
    display:block;
    opacity:1;
    transform:translateY(0);
  }
}

/* ===============================
   5.2 МЕНЮ-ПЛИТКИ
   =============================== */
.mobile-menu .tiles{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--tile-gap);
}
.mobile-menu .tiles > li{
  display:flex; flex-direction:column; gap:8px;
}

/* Плитки (кнопки) */
.mobile-menu .tile-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-height: var(--tile-h); */
    padding: 10px;
    text-align: center;
    font-size: var(--tile-fz);
    /* font-weight: 800; */
    /* text-transform: uppercase; */
    letter-spacing: .03em;
    border: 1px solid #50483d;
    border-radius: 14px;
    background: linear-gradient(313deg, #2b4159, #2b415926), radial-gradient(120% 120% at 50% 0%, #38444d, #38444d0a 60%);
    box-shadow: inset 0 2px 6px #2b4159, inset 0 -2px 10px rgba(0, 0, 0, .55);
    color: #f0f0f0;
    transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease, background .2s ease;
}

/* Hover / Active */
.mobile-menu .tile-btn:hover{
  border-color:#6b5c49;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.35),
    inset 0 -1px 6px rgba(0,0,0,.45),
    0 0 12px rgba(102,181,255,.18);
}

/* Активная плитка при раскрытии */
.mobile-menu .tile-btn.is-active{
  border-color:#7b6a53;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.35),
    inset 0 -1px 8px rgba(0,0,0,.5),
    0 0 15px rgba(102,181,255,.25);
}

/* чип BETA */
.mobile-menu .tile-btn .beta-chip{
  transform:none; margin:0 6px 0 0;
  border-radius:6px; padding:2px 6px;
  font-size:10px;
}

/* ===============================
   5.3 ПОДМЕНЮ-АККОРДЕОН
   =============================== */
.mobile-menu .accordion{
  overflow:hidden;
  max-height:0;
  opacity:0;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  list-style-type:none;
  transition:
    max-height 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.35s ease-in-out,
    padding 0.3s ease-in-out;
}
.mobile-menu .accordion.open{
  max-height:300px;
  opacity:1;
  padding:6px 0;
}
.mobile-menu .accordion li{ list-style:none; }
.mobile-menu .accordion li a{
  display:block;
  padding:8px 14px;
  color:#aeb6c4;
  font-size:12px;
  border-bottom:1px dotted rgba(255,255,255,.08);
  text-align:left;
}
.mobile-menu .accordion li:last-child a{ border-bottom:none; }
.mobile-menu .accordion li a:hover{ color:var(--glow-color); }


/* ===============================
   6) МОБИЛЬНЫЙ БРЕЙКПОИНТ
   =============================== */
@media (max-width: 991.98px){
  :root{ --ui-scale:.92; }

  .nav-bar{ display:none; }
  .menu-toggle{ display:block; }

  /* HUD → 3 ряда, симметрия по краям */
  .hud-bar{
    height:auto;
    padding:0 12px;
    display:grid;
    grid-template-columns: max-content auto max-content;
    grid-template-rows: var(--hud-row-h) var(--vip-row-h) var(--exit-row-h);
    align-items:center;
    column-gap:8px;
  }

  .mmtop-hud-item{ display:none; }
  .hud-group{ display:contents; }

  /* Ряд 1 */
  .logo{
    grid-row:1; grid-column:1;
    padding:0 !important; margin:0; border-right:none;
    justify-content:flex-start;
  }
  .status-account{ grid-row:1; grid-column:1 / 4; justify-self:center; }
  .menu-toggle{
    grid-row:1; grid-column:3; justify-self:end;
    margin:0 !important; padding:0; line-height:1;
  }

  /* Ряд 2: VIP */
  .vip-status{ grid-row:2; grid-column:1 / 4; justify-self:center; }

  /* Ряд 3: Выход — короче и по центру */
  .hud-exit-btn{
    grid-row:3; grid-column:1 / 4; justify-self:center;
    width:auto; min-width:160px; max-width:220px;
    padding:8px 12px; font-size:14px; border-radius:10px; justify-content:center; margin-left: 1px;
  }

  /* Скрываем валюты ТОЛЬКО в шапке */
  .hud-bar .hud-item:has(.coin-icon){ display:none; }
  .hud-bar .hud-item[title="WCoin"],
  .hud-bar .hud-item[title="GoblinPoint"]{ display:none; }

  /* Отступ под фиксированную шапку */
  body{ padding-top: var(--mobile-header-total); }

  /* ----- МОБИЛЬНАЯ ПАНЕЛЬ: slide-down, толкает контент ----- */
  .mobile-panel{
    position: static; inset: auto; z-index: auto;
    display: none; opacity: 0; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;

    background: rgba(22,25,33,0.55);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-top: 1px solid var(--accent-border);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    padding: 16px;
  }
  body.nav-open{ overflow:auto; }
  body.nav-open .mobile-panel{
    display:block; opacity:1; transform:translateY(0);
  }

  /* MMTOP — только логотип, по центру */
  .mobile-mmtop{ text-align:center; }
  .mobile-mmtop h4{ display:none; }
  .mobile-mmtop img{ display:inline-block; height:36px; width:auto; opacity:.95; filter:drop-shadow(0 0 6px rgba(102,181,255,.3)); }
}

/* состояние открытого меню на десктопе не используем */
body.nav-open{ /* оставляем пустым вне мобилы */ }

/* ==========================================================
 * DARK SILK · Полный стиль карточки (ОПТИМИЗИРОВАНО)
 * ========================================================== */

/* -------------------- 0. УНИВЕРСАЛЬНЫЕ ФИКСЫ · ОБЩИЕ -------------------- */

/* 1) Базовая страховка: карточка не шире экрана, без марджинов Bootstrap */
.char-card {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
.char-card .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0; /* обнуляем горизонтальные гаттеры */
}
/* 2) Колонки внутри карточки — нормальные внутренние поля */
.char-card [class^="col-"],
.char-card [class*=" col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
}
/* 3) Изображение: убираем влияние .w-75 у Bootstrap */
.char-card .col-2 .w-75 { width: auto !important; }
.char-card .col-2 img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* -------------------- 1. ОСНОВНАЯ ПАНЕЛЬ (cf-silk) -------------------- */

.char-card.cf-silk {
    position: relative;
    background-color: rgba(0, 0, 0, .4);
    backdrop-filter: blur(8px);
    border: 2px solid var(--silk-edge);
    border-radius: 20px;
    color: var(--silk-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .18s ease;
}
.char-card.cf-silk:hover {
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.char-card.cf-silk::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(90% 120% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%),
        radial-gradient(120% 120% at 50% 120%, rgba(0, 0, 0, .25), transparent 60%);
    mix-blend-mode: overlay;
}
.char-card.cf-silk .row .placeholder { display: none; }
.char-card.cf-silk>.row { align-items: center; }
.char-card.cf-silk .col-2,
.char-card.cf-silk .col-7,
.char-card.cf-silk .col-3 { padding: 18px 22px; }

/* 1.1 ИЗОБРАЖЕНИЕ (cf-silk) */
.char-card.cf-silk .col-2 img {
    padding: 6px;
    background: radial-gradient(60% 60% at 50% 45%, rgba(255, 255, 255, .06), rgba(0, 0, 0, .55));
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* 1.2 ЗАГОЛОВОК / ПОДЗАГОЛОВОК (cf-silk) */
.char-card.cf-silk .card-title {
    position: relative;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--glow-color);
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    line-height: 1.2;
}
.char-card.cf-silk .card-title::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #66b5ff, transparent);
    opacity: 0.5;
}
.char-card.cf-silk .card-text {
    font-weight: 500;
    color: #fd5252;
    text-shadow: 0 0 4px rgba(50, 160, 255, 0.5), 0 0 10px rgba(20, 100, 255, 0.3);
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}

/* 1.3 ТАБЛИЦА СТАТОВ (cf-silk) */
.char-card.cf-silk .table {
    margin-top: 4px;
    color: inherit;
    border-collapse: collapse;
}
.char-card.cf-silk .table tr th:first-child {
    width: 42%;
    padding: 10px 12px;
    font-weight: 700;
    color: var(--silk-label);
    background: rgba(255, 255, 255, .02);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.char-card.cf-silk .table tr th:last-child {
    padding: 10px 12px;
    font-weight: 700;
    color: var(--glow-color);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.char-card.cf-silk .table-striped>tbody>tr:nth-of-type(even)>* {
    background: rgba(255, 255, 255, .015);
}

/* 1.4 БЕЙДЖ "BANNED" (cf-silk) */
.char-card.cf-silk h5[style*="color: red"] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 8px;
    background: linear-gradient(180deg, #b02a2a, #7e1e1e);
    border: 1px solid rgba(255, 120, 120, .3);
    color: #fff !important;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .3px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

/* 1.5 ПРАВАЯ КОЛОНКА (КНОПКИ) · ДЕСКТОП (cf-silk) */
@media (min-width:992px) {
    .char-card.cf-silk .col-3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 14px;
    }
    .char-card.cf-silk .col-3 .row.p-3 {
        padding: 0 !important;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    .char-card.cf-silk .col-3 .mu-btn { min-width: 190px; }
}

/* -------------------- 2. СТИЛИ СМЕНЫ НИКА (cf-rename) -------------------- */

.char-card.cf-rename .row { align-items: center; }
.char-card.cf-rename .col-2 img {
    width: 120px;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    padding: 6px;
    background: radial-gradient(60% 60% at 50% 45%, rgba(255, 255, 255, .06), rgba(0, 0, 0, .55));
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06);
}
.char-card.cf-rename h6 { margin: 0 0 6px; color: #c7d1de; }
.char-card.cf-rename h5 { margin: 0 0 12px; color: #e8ecf4; }

/* 2.1 ПОЛЕ ВВОДА (cf-rename) */
.char-card.cf-rename .form-control {
    background: #0f1621;
    color: #e8ecf4;
    border: 1px solid rgba(255, 255, 255, .12);
    padding: .6rem .8rem;
    border-radius: 10px;
}
.char-card.cf-rename .form-control::placeholder { color: #8fa1b6; }

/* 2.2 ПРАВАЯ КОЛОНКА (КНОПКИ) · ДЕСКТОП (cf-rename) */
@media (min-width: 992px) {
    .char-card.cf-rename .col-3 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .char-card.cf-rename .col-3 .row.p-2 {
        padding: 0 !important;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    .char-card.cf-rename .col-3 .mu-btn { min-width: 170px; }
}

/* -------------------- 3. НОРМАЛИЗАЦИЯ ИНПУТОВ / SELECT -------------------- */

/* 3.1 charstats.php — поля внутри таблицы */
.char-card #stats-form .table tr th:last-child > .form-control,
.char-card #stats-form .table tr th:last-child input[type="text"],
.char-card #stats-form .table tr th:last-child input[type="number"] {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: .55rem .75rem; /* высота и типографика */
    line-height: 1.25;
}

/* 3.2 chclass.php — селект класса */
.char-card form .form-select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: .55rem .75rem;
}

/* -------------------- 4. НОРМАЛИЗАЦИЯ КНОПОК (.mu-btn) -------------------- */

/* 4.1 Общие размеры */
.char-card .mu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 180px;
    height: 52px;
    padding: 10px 22px;
    line-height: 1.2;
    box-sizing: border-box;
}
.char-card .mu-btn.mu-btn-long { min-width: 220px; height: 52px; }

/* 4.2 Контейнеры кнопок (для десктопа/центровки по умолчанию) */
.char-card .col-3,
.char-card .row .text-center,
.char-card .row .align-items-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.char-card .col-3 {
    justify-content: center;
    margin-top: 8px;
}

/* ==========================================================
 * 5. МОБИЛЬНАЯ АДАПТАЦИЯ (max-width: 768px) · ЕДИНЫЙ БЛОК
 * ========================================================== */
@media (max-width: 768px) {

    /* 5.1 АНТИ-ПЕРЕПОЛНЕНИЕ (ANTIOVERFLOW) — базовая геометрия и отступы */
    .char-card,
    .char-card.cf-silk,
    .char-card.cf-rename,
    .char-card:has(#chname) {
        /* Карточка занимает не всю 100%, а экран минус безопасные поля */
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-inline: auto !important; /* перестраховка */

        border-radius: 18px;
        /* Внутренние поля + учет "вырезов" (safe-area) */
        padding-left: max(env(safe-area-inset-left, 12px), clamp(10px, 3vw, 14px));
        padding-right: max(env(safe-area-inset-right, 12px), clamp(10px, 3vw, 14px));
    }
    .char-card.cf-silk { padding-top: 10px; padding-bottom: 10px; } /* специфический паддинг для cf-silk */

    /* 5.2 ПЕРЕСТРОЙКА КОЛОНОК (Изображение/Контент/Кнопки) */
    .char-card > .row:nth-of-type(2),
    .char-card.cf-rename > .row,
    .char-card:has(#chname) > .row {
        display: flex;
        flex-wrap: wrap;
    }

    .char-card > .row:nth-of-type(2) .col-2,
    .char-card.cf-rename .col-2,
    .char-card:has(#chname) .col-2 {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 12px 14px; /* общие поля для аватарки */
        margin-bottom: 10px;
    }
    .char-card > .row:nth-of-type(2) .col-7,
    .char-card > .row:nth-of-type(2) .col-8,
    .char-card.cf-rename .col-7,
    .char-card:has(#chname) .col-7 {
        order: 2;
        width: 100%;
        padding: 8px 14px; /* общие поля для контента */
    }
    .char-card > .row:nth-of-type(2) .col-3,
    .char-card > .row:nth-of-type(2) .col-2:last-child,
    .char-card.cf-rename .col-3,
    .char-card:has(#chname) .col-3 {
        order: 3;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 8px 14px; /* общие поля для кнопок */
    }

    /* 5.3 ИЗОБРАЖЕНИЕ — универсальный размер */
    .char-card .col-2 img {
        width: 156px;
        height: 196px;
        border-radius: 12px;
    }

    /* 5.4 ТАБЛИЦЫ — универсальные стили */
    .char-card .table {
        width: 100%;
        margin: 8px 0 14px;
        border-collapse: collapse;
    }
    .char-card .table th {
        padding: 8px 10px;
        font-size: 14px;
        line-height: 1.25;
    }
    .char-card .table tr th:first-child { width: 48%; }

    /* 5.5 ИНПУТЫ/SELECT — универсальные стили */
    .char-card #stats-form .table tr th:last-child > .form-control,
    .char-card #stats-form .table tr th:last-child input[type="text"],
    .char-card #stats-form .table tr th:last-child input[type="number"],
    .char-card form .form-select,
    .char-card.cf-rename .form-control { /* добавлено для cf-rename */
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 15px;
        min-height: 42px;
        padding: .55rem .75rem;
    }

    /* 5.6 КНОПКИ — универсальные стили */
    .char-card .mu-btn,
    .char-card .mu-btn.mu-btn-long {
        width: 100%;
        min-width: 0;
        max-width: 360px;
        height: 46px;
        padding: 8px 18px;
        font-size: 12px;
    }
    
    /* 5.7 СПЕЦИФИЧЕСКИЕ СТИЛИ (cf-silk) */
    .char-card.cf-silk .card-title {
        font-size: clamp(18px, 5.2vw, 22px);
        margin-bottom: 8px;
    }
    .char-card.cf-silk .card-text {
        font-size: clamp(12px, 3.6vw, 14px);
        margin-bottom: 10px;
    }
    /* 5.8 СПЕЦИФИЧЕСКИЕ СТИЛИ (cf-rename) */
    .char-card.cf-rename h6 { font-size: 14px; margin-bottom: 6px; }
    .char-card.cf-rename h5 { font-size: 20px; margin-bottom: 12px; }
}

/* ================================
   MU · form-select (dark glass + blue)
   Работает с твоим HTML: class="form-select p-2"
   ================================ */

.char-card .form-select,
.form-select.mu { /* .mu — опциональный альтернативный класс */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; min-width: 0; box-sizing: border-box;

  /* фон — тёмное стекло как в интерфейсе */
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.28)),
    /* стрелка: два наклонных треугольника (без картинок) */
    linear-gradient(45deg, transparent 50%, var(--glow-color, #66b5ff) 50%),
    linear-gradient(135deg, var(--glow-color, #66b5ff) 50%, transparent 50%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    0 0,                   /* основная подложка */
    calc(100% - 22px) 55%, /* левая грань стрелки */
    calc(100% - 14px) 55%; /* правая грань стрелки */
  background-size:
    auto,
    6px 6px,
    6px 6px;

  color: var(--hud-text, #e8eef9);
  border: 1px solid var(--hud-border, rgba(150,190,255,.20));
  border-radius: 12px;

  font-family: 'Philosopher', sans-serif;
  font-size: 15px; font-weight: 500; letter-spacing: .2px;

  padding: 10px 44px 10px 14px; /* место под стрелку справа */
  line-height: 1.25;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.25);

  transition: border-color .2s ease,
              box-shadow .2s ease,
              background-color .2s ease,
              filter .2s ease;
}

/* hover / focus — синее свечение, без золота */
.char-card .form-select:hover,
.form-select.mu:hover {
  filter: brightness(1.03);
  border-color: var(--hud-border-strong, rgba(120,170,255,.45));
}
.char-card .form-select:focus,
.form-select.mu:focus {
  outline: none;
  border-color: var(--glow-color, #66b5ff);
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--glow-color, #66b5ff) 35%, transparent),
    inset 0 0 10px color-mix(in oklab, var(--glow-color, #66b5ff) 22%, transparent);
  background-color: rgba(30,32,45,.82);
}

/* disabled */
.char-card .form-select:disabled,
.form-select.mu:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* multiple — убираем стрелку, делаем выше */
.char-card .form-select[multiple],
.form-select.mu[multiple] {
  background-image: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.28));
  padding-right: 14px;
  min-height: 120px;
  overflow-y: auto;
}

/* пункты списка (где браузер позволяет) */
.char-card .form-select option,
.form-select.mu option {
  background: #0f1318;
  color: #e8ecf4;
}

/* размеры как в bootstrap при необходимости */
.char-card .form-select.form-select-sm { padding: 8px 40px 8px 12px; font-size: 14px; border-radius: 10px; }
.char-card .form-select.form-select-lg { padding: 12px 48px 12px 16px; font-size: 16px; border-radius: 12px; }

/* мобильный комфорт */
@media (max-width: 768px){
  .char-card .form-select { font-size: 16px; padding: 12px 46px 12px 14px; }
}

/* ==========================================================
 * MU · form-control (input / number) - ОПТИМИЗИРОВАНО
 * Используются стандартные нативные стрелки для type="number"
 * ========================================================== */

/* -------------------- ОСНОВНОЙ СТИЛЬ INPUT -------------------- */

.char-card .form-control,
.form-control.mu {
    /* Оставляем appearance: auto для number, чтобы нативные стрелки работали */
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto; /* Разрешаем браузерам самим решать, как рисовать number */

    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    background: linear-gradient(180deg, rgba(255, 255, 255, .04), #243546), rgba(30, 32, 45, .75);
    color: var(--hud-text, #e8eef9);

    border: 1px solid var(--hud-border, rgba(150,190,255,.20));
    border-radius: 10px;

    font-family: 'Philosopher', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .2px;

    padding: 10px 14px;
    line-height: 1.25;
    height: 46px;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .06),
        0 2px 8px rgba(0, 0, 0, .25);

    transition: border-color .2s ease,
                box-shadow .2s ease,
                background-color .2s ease,
                filter .2s ease;
}

/* Hover / Focus */
.char-card .form-control:hover,
.form-control.mu:hover {
    filter: brightness(1.03);
    border-color: var(--hud-border-strong, rgba(120, 170, 255, .45));
}

.char-card .form-control:focus,
.form-control.mu:focus {
    outline: none;
    border-color: var(--glow-color, #66b5ff);
    background-color: rgba(30, 32, 45, .85);
    box-shadow:
        0 0 0 2px color-mix(in oklab, var(--glow-color) 35%, transparent),
        inset 0 0 10px color-mix(in oklab, var(--glow-color) 25%, transparent);
}

/* Disabled / readonly */
.char-card .form-control:disabled,
.char-card .form-control[readonly],
.form-control.mu:disabled {
    opacity: .6;
    cursor: not-allowed;
    background: rgba(20, 25, 35, .55);
}

/* Placeholder */
.char-card .form-control::placeholder {
    color: #8fa2ba;
    opacity: .8;
}

/* -------------------- ФИКС СТРЕЛОК ДЛЯ type="number" -------------------- */
/* Этот блок гарантирует, что стрелки всегда отображаются корректно */

.char-card .form-control[type="number"] {
    /* Если в общем стиле было appearance:none (как в оригинале), перебиваем его. */
    -webkit-appearance: number-input;
    -moz-appearance: number-input;
    appearance: auto;

    /* Снимаем принудительный запас, если он был для кастомных стрелок */
    padding-right: 14px;
}

/* Явно разрешаем показ спиннеров в WebKit/Blink (если был глобальный сброс) */
.char-card .form-control[type="number"]::-webkit-outer-spin-button,
.char-card .form-control[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    opacity: 1;
    margin: 0;
}

/* ================================
   MONSTER LEAGUE · DARK SILK HERO
   ================================ */

/* Вся панель */
.ml2-hero-silk{
  background: var(--silk-bg);
  border: 1px solid var(--silk-edge);
  border-radius: 20px;
  color: var(--silk-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ml2-hero-silk:hover{
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Заголовок и подзаголовок */
.ml2-hero-title{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--silk-gold-soft);
  letter-spacing:.5px;
  text-shadow: 0 2px 10px rgba(245,182,37,.18);
}
.ml2-hero-title .ml2-hero-ico{
  width:32px; height:32px; vertical-align:-6px;
}

.ml2-hero-sub{
  color: var(--silk-muted);
  font-size: 15px;
  letter-spacing:.2px;
}

/* Общий счёт — мини-панель */
.ml2-total-box{
  display:inline-block;
  padding: 14px 24px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,26,38,.82), rgba(10,14,22,.9));
  border: 1px solid var(--hud-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 4px 12px rgba(0,0,0,.3);
}
.ml2-total-label{
  font-size: 12.5px;
  letter-spacing:.5px;
  text-transform: uppercase;
  color: var(--silk-muted);
  margin-bottom: 4px;
}
.ml2-total-value{
  font-size: 32px;
  font-weight: 700;
  color: var(--glow-color);
  text-shadow: 0 0 8px rgba(102,181,255,.35);
  line-height: 1;
}

/* Надпись про потенциальную награду (без рамки) */
.ml2-eligible-lead{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #e5eaf2;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: .15px;
  margin: 6px auto 10px;
  max-width: 760px;
}
.ml2-eligible-lead strong{
  color: #2e90b2;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .25px;
  text-shadow: 0 0 3px rgba(245,182,37,.18);
}
.ml2-icon-tiny{ width:15px; height:15px; vertical-align:-2px; margin-right:3px; opacity:.9; }
.ml2-eligible-sub{
  display:inline-block; margin-top:2px;
  color:#b8c0cc; font-size:11px; font-weight:400; line-height:1.4;
}

/* Ряд с наградами (капсулы) */
.ml2-reward-row{
  margin-top:10px;
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:10px;
}
.ml2-or{ color:#aeb7c5; opacity:.65; font-weight:500; padding:0 2px; }

.reward-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px;
  background: linear-gradient(180deg, rgba(25,30,45,.86), rgba(10,14,22,.92));
  border:1px solid rgba(160,200,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.25);
  font-weight:700; font-size:15px; letter-spacing:.2px;
  color:#e9eef6;
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.reward-pill:hover{
  transform: translateY(-1px);
  border-color: var(--silk-edge-hover);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.3);
}
.reward-pill .curr-ico{ width:22px; height:22px; vertical-align:-3px; }

/* цветовые акценты капсул */
.reward-pill--wc   { color: var(--silk-gold);  border-color: rgba(245,182,37,.30); }
.reward-pill--gp   { color: #9fd1ff;          border-color: rgba(150,190,255,.25); }
.reward-pill--ruud { color: #f0a77a;          border-color: rgba(255,185,120,.25); }

/* предупреждение, если очков мало */
.ml2-total .alert.ml2-minreq{
  background: linear-gradient(180deg, rgba(60,40,20,.78), rgba(35,20,10,.9)) !important;
  color:#ffe9c9 !important;
  border:1px solid rgba(255,200,120,.22) !important;
  border-radius:12px; padding:10px 14px;
  font-size:15px; font-weight:600; letter-spacing:.1px;
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}
/* ==========================================================
   MONSTER LEAGUE · REWARD INFO (Dark Silk unified)
   ========================================================== */

/* Основной инфоблок */
.ml-rew-info {
  position: relative;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(8px);
  border: 1px solid var(--silk-edge);
  border-radius: 16px;
  padding: 18px 20px;
  color: var(--silk-text);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 1.2rem;
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

.ml-rew-info::before {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(65% 90% at 50% 0%, rgba(255,255,255,.06), transparent 75%),
    radial-gradient(70% 90% at 50% 120%, rgba(0,0,0,.28), transparent 75%);
  mix-blend-mode: overlay;
}

.ml-rew-info:hover {
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

.ml-rew-info strong {
  color: var(--silk-gold);
  font-weight: 700;
}

/* Маленькие «чипы» с монетками */
.ml-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 600;
  letter-spacing: .1px;
  color: #e8ecf4;
  transition: all .2s ease;
  box-shadow: inset 0 0 6px rgba(255,255,255,.04);
}

.ml-chip:hover {
  background: rgba(245,182,37,.12);
  border-color: rgba(245,182,37,.45);
  box-shadow: 0 0 8px rgba(245,182,37,.25);
}

.ml-chip.grow {
  background: rgba(255,255,255,.04);
}

/* Иконки */
.ico-coin {
  width: 22px;
  height: 22px;
  vertical-align: -4px;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.4));
}

/* Медали топ-3 в тексте */
.ml-medal {
  height: 75px;
  width: auto;
  vertical-align: -6px;
  margin: 0 4px;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.5));
}

/* Цвета подписей */
.text-gold   { color: #ffd36b; text-shadow: 0 0 8px rgba(245,182,37,.25); }
.text-silver { color: #c9cfd8; text-shadow: 0 0 6px rgba(200,210,230,.25); }
.text-bronze { color: #d9a173; text-shadow: 0 0 6px rgba(180,130,90,.25); }

/* Нижняя плашка-примечание */
.ml-rew--note {
  margin-top: 14px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(20,26,36,.6);
  padding: 12px 14px;
  font-size: 14px;
  color: #e7edf6;
  box-shadow: inset 0 0 6px rgba(0,0,0,.25);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.ml-rew--note:hover {
  border-color: var(--silk-edge-hover);
  box-shadow: inset 0 0 8px rgba(255,255,255,.08), 0 0 6px rgba(245,182,37,.25);
}


/* MONSTER LEAGUE · применяем DARK SILK к блоку Лиги */
.ml2-total.cf-silk{
  position: relative;
  background-color: rgba(0,0,0,.4) !important; /* вместо твоего rgba(28,32,38,.9) */
  backdrop-filter: blur(8px);
  border: 1px solid var(--silk-edge);
  border-radius: 20px;                 /* как у cf-silk */
  color: var(--silk-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .18s ease;
}
.ml2-total.cf-silk:hover{
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* необязательно, но красиво: лёгкий верхний блик */
.ml2-total.cf-silk::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 38% at 50% 0%, rgba(255,255,255,.06), transparent 80%),
    radial-gradient(60% 80% at 50% 120%, rgba(0,0,0,.30), transparent 80%);
  mix-blend-mode: overlay;
}

/* ===============================
   Monster League · Claim Rewards
   =============================== */

/* Общая «шёлковая» панель */
.ml-claim{
  position: relative;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(8px);
  border: 1px solid var(--silk-edge);
  border-radius: 16px;
  padding: 18px 20px;
  color: var(--silk-text);
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ml-claim::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(65% 90% at 50% 0%, rgba(255,255,255,.06), transparent 75%),
    radial-gradient(70% 90% at 50% 120%, rgba(0,0,0,.28), transparent 75%);
  mix-blend-mode: overlay;
}
.ml-claim:hover{
  border-color: var(--silk-edge-hover);
  box-shadow:
    0 14px 34px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Заголовок и подзаголовок */
.ml-claim__title{
  margin:0;
  font-weight:800;
  color: var(--silk-gold);
  letter-spacing:.3px;
  text-shadow:0 0 8px rgba(245,182,37,.25);
}
.ml-claim__sub{
  margin: .35rem 0 0;
  color:#e6edf7;
}

/* Большая кнопка «Забрать награду» */
.ml-claim-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.2rem;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(28,40,64,.78), rgba(60,86,130,.78));
  color:#eaf2ff; font-weight:800;
  border:1px solid var(--silk-edge);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 6px 16px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease;
}
.ml-claim-cta:hover{
  transform: translateY(-1px);
  border-color: var(--silk-edge-hover);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 12px rgba(102,181,255,.35);
}

/* Ряд вариантов наград */
.ml-claim-row{
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px;
}

/* Кнопки вариантов (капсулы) */
.ml-claim-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:.6rem 1rem;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(20,25,35,.86), rgba(10,14,22,.92));
  color:#e9eef6; font-weight:800;
  border:1px solid rgba(160,200,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.25);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.ml-claim-btn:hover{
  transform: translateY(-1px);
  border-color: var(--silk-edge-hover);
  box-shadow: 0 8px 16px rgba(0,0,0,.35), 0 0 10px rgba(245,182,37,.25);
}
.ml-claim-btn img{ width:22px; height:22px; vertical-align:-3px; }

/* Цветовые акценты вариантов */
.ml-claim-btn--wc   { color:#ffd36b;  border-color: rgba(245,182,37,.30); }
.ml-claim-btn--gp   { color:#9fd1ff;  border-color: rgba(150,190,255,.25); }
.ml-claim-btn--ruud { color:#f0a77a;  border-color: rgba(255,185,120,.25); }

/* Предупреждение, если очков мало */
.ml-claim--warn{
  background: linear-gradient(180deg, rgba(60,40,20,.78), rgba(35,20,10,.9)) !important;
  color:#ffe9c9 !important;
  border:1px solid rgba(255,200,120,.22) !important;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* элемент-заглушка в гриде убийств */
.ml2-hlist-empty{
  grid-column: 1 / -1;      /* занять ВСЮ строку грида */
  display: flex;            /* и внутри выровнять содержимое */
  justify-content: center;  /* по центру по горизонтали */
  padding: .5rem 0;
}

/* =====================================================
   ОПТИМИЗИРОВАННЫЕ СТИЛИ: карточки достижений + Silk Dark Blur
   Удалено дублирование и перезапись стилей.
   ===================================================== */

/* Контейнер с карточками */
.achv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;                /* промежуток между карточками */
  justify-content: center;
}

/* Каждая карточка */
.achv-grid > [class^="col-"],
.achv-grid > [class*=" col-"] {
  flex: 1 1 calc(33.333% - 20px);   /* 3 в ряд с учётом gap */
  max-width: calc(33.333% - 20px);
  position: relative;
  overflow: hidden;

  /* --- фон Silk Dark из основной темы --- */
  background: rgba(0, 0, 0, .40);
  backdrop-filter: blur(8px);
  border: 1px solid var(--silk-edge, rgba(255,255,255,.08));
  border-radius: 16px;
  padding: 18px 20px;
  color: var(--silk-text, #e3e7ef);
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);

  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* лёгкое сияние при ховере */
.achv-grid > [class^="col-"]:hover,
.achv-grid > [class*=" col-"]:hover {
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* бликовый верхний слой (мягкое освещение Silk) */
.achv-grid > [class^="col-"]::after,
.achv-grid > [class*=" col-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(60% 100% at 50% 120%, rgba(0,0,0,.25), transparent 70%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Цветные ленты заголовков */
.achv-grid h6 {
  margin: -6px -6px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow: 0 0 6px rgba(0,0,0,.6);
}
.achv-grid h6 img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* Текст */
.achv-grid .card-text {
  color: var(--silk-text, #e3e7ef);
  line-height: 1.55;
}
.achv-grid .card-text em {
  color: #8fc9ff;
}

/* ===== адаптив ===== */
@media (max-width: 1200px) {
  .achv-grid > [class^="col-"],
  .achv-grid > [class*=" col-"] {
    flex: 1 1 calc(50% - 20px);   /* 2 в ряд */
    max-width: calc(50% - 20px);
  }
}
@media (max-width: 768px) {
  .achv-grid > [class^="col-"],
  .achv-grid > [class*=" col-"] {
    flex: 1 1 100%;               /* 1 в ряд */
    max-width: 100%;
  }
  .achv-grid { gap: 16px; }
}

/* ===== ACHV · HERO (компактный верхний блок) ===== */
.achv-hero{
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 12px 16px;

  position: relative;
  text-align: center;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(8px);
  border: 1px solid var(--silk-edge, rgba(245,182,37,.22));
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  border-radius: 12px;
  color: var(--silk-text, #e7ecf5);
  overflow: hidden;
}
.achv-hero::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  background:
    radial-gradient(65% 85% at 50% 0%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(70% 95% at 50% 120%, rgba(0,0,0,.26), transparent 70%);
  mix-blend-mode: overlay;
}
.achv-hero h3{
  margin: 0;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .3px;
  color: #ffd36b;
}
.achv-hero p{
  margin: 4px 0 0;
  color: #bfc6d4;
  font-size: .9rem;
  line-height: 1.35;
}

/* адаптив — чуть компактнее на мобилках */
@media (max-width: 576px){
  .achv-hero{ padding: 10px 12px; }
  .achv-hero h3{ font-size: 1rem; }
  .achv-hero p{ font-size: .8rem; }
}

/* ===== Заголовок-пилюля (Объединение дублей) ===== */
.achv-title-wrap{
  display:flex;
  justify-content:center;
  margin: 8px 0 14px; /* Оставлено последнее значение */
}
.achv-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;

  background:rgba(0,0,0,.40);
  backdrop-filter:blur(6px);
  border:1px solid var(--silk-edge,rgba(245,182,37,.22));
  box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);

  color:var(--silk-text,#e8ecf4); /* Оставлено последнее значение */
  font-weight:800;
  letter-spacing:.2px
}

/* Иконка в заголовке-пилюле (Оставлено последнее значение) */
.achv-title img{
  width:35px;
  height:35px;
  object-fit:contain;
  max-width:none;   /* на случай .img-fluid */
}

/* ===== Лид-текст (СТЕКЛО + блюр для читабельности) ===== */
.achv-lead{
  max-width:980px;
  margin:0 auto 18px;
  text-align:center;
  color:#e3e7ef;
  line-height:1.55;
  font-size:15px
}
.achv-lead--glass{
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  border:1px solid var(--silk-edge,rgba(245,182,37,.22));
  border-radius:12px;
  padding:12px 16px;
  box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ===== Стеклянная рамка секции ===== */
.achv-frame{
  position:relative;
  background:rgba(0,0,0,.40);
  backdrop-filter:blur(8px);
  border:1px solid var(--silk-edge,rgba(245,182,37,.22));
  border-radius: var(--bs-border-radius) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--silk-text,#e8ecf4);
  overflow: visible; /* Изменено для работы sticky */
  padding:16px
}
.achv-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;
  background:radial-gradient(90% 120% at 50% 0%,rgba(255,255,255,.04),transparent 60%),
             radial-gradient(120% 120% at 50% 120%,rgba(0,0,0,.25),transparent 60%);
  mix-blend-mode:overlay
}

/* ===== ДВЕ КОЛОНКИ (без bootstrap row/col) ===== */
.achv-two{
  display:flex;
  gap:16px;
  align-items:stretch
}
.achv-acc-wrap{
  flex:1 1 60%;
  min-width:0
}
.achv-media{ /* Враппер для sticky */
  flex: 1 1 40%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Липкий контейнер для медиа (замена .achv-media img) */
.achv-media-sticky {
  position: sticky;
  top: 14px;
  width: 100%;
  max-height: calc(100vh - 28px);
}
.achv-media-sticky img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  display: block;
}

/* ===== Адаптив для двух колонок ===== */
@media (max-width: 991.98px){
  .achv-two{flex-direction:column-reverse}
  .achv-media img{position:static}
  .achv-frame{padding:12px}
}

/* ===== Аккордеон — стеклянные вопросы ===== */
#accordion.accordion-style .card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)
}
#accordion.accordion-style .card-header{
  background:transparent;
  border:none;
  padding:0
}
#accordion.accordion-style .card:hover{
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* основной вопрос/кнопка */
#accordion.accordion-style .btn-link{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  text-decoration:none;

  /* Перезаписанный стиль для цвета и тени */
  color: #e4e1dc;
  text-shadow: 0 0 6px rgba(255,215,130,.35);

  font-weight:700;
  padding:12px 48px 12px 14px;
  position:relative;
  transition: color .25s ease, text-shadow .25s ease;
}
/* при ховере */
#accordion.accordion-style .btn-link:hover {
  color:#a2deff;
  text-shadow: 0 0 8px rgba(255,240,160,.55);
}
/* при раскрытии */
#accordion.accordion-style .btn-link[aria-expanded="true"] {
  color: #dce3e4;
  text-shadow: 0 0 8px rgba(110,200,255,.65);
}

/* «светлячок» слева */
#accordion.accordion-style .btn-link::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle,#6bc9ff 0%,#64b1f8 65%,transparent 66%);
  box-shadow:0 0 14px rgb(107 201 255 / 60%)
}

/* Иконка + / − (объединённые стили) */
#accordion.accordion-style .btn-link::after{
  content:"+";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  line-height:1;

  /* Перезаписанный стиль */
  color: #e4e1dc;
  border: 1px solid rgb(110 213 255 / 40%);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 10px rgb(110 215 255 / 25%), inset 0 1px 0 rgba(255, 255, 255, .06);
}
#accordion.accordion-style .btn-link:hover::after {
  color: #a2deff;
  box-shadow: 0 0 14px rgba(255,235,150,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
#accordion.accordion-style .btn-link[aria-expanded="true"]::after{
  content:"–";
  background: rgba(120,190,255,.15);
  border-color: rgba(120,190,255,.35);
  color: #6ad1ff;
  box-shadow: 0 0 12px rgba(110,200,255,.4);
}

/* Тело аккордеона */
#accordion.accordion-style .card-body{
  background:rgba(0,0,0,.28);
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#dce4f0;
  line-height:1.55
}

/* плавное свечение при наведении на вопрос */
#accordion.accordion-style .card:hover .btn-link {
  text-shadow: 0 0 10px rgba(255,240,180,.45);
}

/* ===== Цветовые акценты текста (с учетом перезаписи) ===== */
/* NOTE: используются !important, чтобы перебить родительские стили, если есть */
.accord-text2{
  color:#ecdcb7 !important;                 /* тёплый бежевый */
  text-shadow: 0 0 6px rgba(236,220,183,.15) !important;
}
.text-info2{
  color:#9dd6ff !important;                 /* холодный голубой */
  text-shadow: 0 0 8px rgba(130,190,255,.25) !important;
}
.text-info3{
  color:#d1b9ff !important;                 /* лиловый */
  text-shadow: 0 0 8px rgba(180,150,255,.22) !important;
}
.text-info4{
  color:#a7f4c1 !important;                 /* мятный */
  text-shadow: 0 0 8px rgba(140,245,190,.2) !important;
}
.text-info7{
  color:#ffc1b4 !important;                 /* персиковый */
  text-shadow: 0 0 8px rgba(255,180,165,.22) !important;
}

/* Акценты для <strong> и <em> */
#accordion .card-body strong,
.achv-frame strong{
  color:#ffd36b !important;                 /* золото под тему */
  font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(255,210,105,.2) !important;
}
#accordion .card-body em,
.achv-frame em{
  color:#a3dbff !important;                 /* нежно-голубой курсив */
  font-style: normal !important;            /* читаемый, без наклона */
  text-shadow: 0 0 6px rgba(160,220,255,.2) !important;
}

/* Для маленьких подсказок/подписей */
#accordion .figure-caption{
  color:#b7c3d6 !important;
  opacity: .95;
}

/* =========================================
   DARK SILK COMPACT — стиль карточек достижений
   ========================================= */
.achv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--silk-edge);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15,20,28,.8), rgba(8,10,15,.85));
  backdrop-filter: blur(6px);
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--silk-text);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.achv-card:hover {
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Изображение слева */
.achv-card .col-md-3.d-lg-flex.d-none {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 10px;
}

.achv-card .col-md-3.d-lg-flex.d-none img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}

/* Центральная часть */
.achv-card .col-md-6 .card-body {
  padding: 10px 12px;
}

.achv-card .card-title {
  color: var(--silk-gold);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
}

.achv-card .card-text {
  color: var(--silk-muted);
  margin-bottom: 4px;
}

/* Прогресс */
.achv-card .progress {
  height: 3px;
  background-color: rgba(255,255,255,.08);
  margin-top: 4px;
  margin-bottom: 0;
}

.achv-card .progress-bar {
  background: linear-gradient(90deg, var(--silk-gold), #ffe788);
}

/* Правая колонка — награда и кнопка */
.achv-card .col-md-3 {
  padding: 8px 12px 10px;
  text-align: center;
}

.achv-card time {
  font-size: 0.75rem;
  color: rgba(233,238,245,.85);
  display: block;
  margin-bottom: 4px;
}

/* Иконка награды */
.achv-card .card-img-top {
  max-width: 76px;
  margin: 4px auto;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}

/* Кнопка завершить */
.quest-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(145deg, #1b2232, #10141a);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 3px 10px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: all .2s ease;
}

.quest-button:hover {
  border-color: rgba(255,255,255,.25);
  background: linear-gradient(145deg, #222b3c, #181b22);
}

/* ---------------------------------
   Цветовые вариации по категориям
   --------------------------------- */
.bg-custom-yellow  { background-image: linear-gradient(135deg, rgb(255 208 31 / 60%), transparent 60%) !important; }
.bg-custom-red     { background-image: linear-gradient(135deg, rgb(225 32 20 / 60%), transparent 60%) !important; }
.bg-custom-purple  { background-image: linear-gradient(135deg, rgb(112 42 234 / 60%), transparent 60%) !important; }
.bg-custom-blue    { background-image: linear-gradient(135deg, rgb(0 74 203 / 60%), transparent 60%) !important; }
.bg-custom-green   { background-image: linear-gradient(135deg, rgb(70 200 130 / 60%), transparent 60%) !important; }
.bg-custom-brown   { background-image: linear-gradient(135deg, rgb(160 110 60), transparent 60%) !important; }
.bg-custom-gray    { background-image: linear-gradient(135deg, rgb(128 128 137 / 60%), transparent 60%) !important; }
.bg-custom-orange  { background-image: linear-gradient(135deg, rgb(184 104 18 / 60%), transparent 60%) !important; }
.bg-custom-lightblue { background-image: linear-gradient(135deg, rgb(29 163 255 / 60%), transparent 60%) !important; }
.bg-custom-lightgreen { background-image: linear-gradient(135deg, rgb(56 163 79 / 60%), transparent 60%) !important; }
.bg-custom-lightpurple { background-image: linear-gradient(135deg, rgb(200 130 255 / 60%), transparent 60%) !important; }

/* ========== 1) Цвет заголовка от bg-custom-* ========== */
.achv-card { --achv-title: var(--silk-gold, #ffd36b); }       /* дефолт */
.achv-card .card-title { color: var(--achv-title); }

/* палитра заголовков под твои бэкграунды */
.achv-card.bg-custom-yellow      { --achv-title:#ffd36b; }
.achv-card.bg-custom-red         { --achv-title:#ff9a8a; }
.achv-card.bg-custom-purple      { --achv-title:#c9a9ff; }
.achv-card.bg-custom-blue        { --achv-title:#9ec7ff; }
.achv-card.bg-custom-lightblue   { --achv-title:#a9d6ff; }
.achv-card.bg-custom-green       { --achv-title:#9fe3c1; }
.achv-card.bg-custom-lightgreen  { --achv-title:#b4f0cf; }
.achv-card.bg-custom-orange      { --achv-title:#ffc78a; }
.achv-card.bg-custom-brown       { --achv-title:#e2b691; }
.achv-card.bg-custom-gray        { --achv-title:#cfd7e4; }
.achv-card.bg-custom-lightpurple { --achv-title:#dfbaff; }


/* ===============================
   Адаптивность карточек достижений
   =============================== */
@media (max-width: 991px) {
  .achv-card {
    max-width: 100% !important;
    width: calc(100% - 20px);
    margin: 0 auto 1rem;
  }

  .achv-card .row.g-0 {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .achv-card .col-md-3.d-lg-flex.d-none {
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.05);
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .achv-card .col-md-6 {
    width: 100%;
  }

  .achv-card .col-md-3 {
    width: 100%;
    padding-top: 0;
    text-align: center;
  }

  .achv-card .quest-button {
    width: 80%;
    margin: 0.4rem auto 0.8rem;
  }

  .achv-card .card-body {
    padding: 0.8rem 1rem;
  }

  .achv-card .card-title {
    font-size: 1rem;
  }

  .achv-card .card-text {
    font-size: 0.85rem;
  }
}

/* =====================================================
   SILK STATIC BONUS BLOCK (2 карточки в ряд, компакт)
   ===================================================== */

.achv-grid-bonus-static {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;                   /* было 24px → карты шире за счёт меньшего зазора */
  justify-content: center;
  margin: 28px auto;           /* было 32px */
  max-width: 1280px;           /* было 1200px → каждая карточка ощутимо шире */
}

.achv-grid-bonus-static .achv-bonus-card {
  flex: 1 1 calc(50% - 16px);  /* было calc(50% - 24px) */
  max-width: calc(50% - 16px);
  position: relative;
  overflow: hidden;

  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
  border: 1px solid var(--silk-edge, rgba(255,255,255,.1));
  border-radius: 16px;         /* было 18px, чуть компактнее визуально */
  padding: 16px;               /* было 22px → ниже высота блока */
  color: var(--silk-text, #e3e7ef);
  box-shadow:
    0 8px 22px rgba(0,0,0,.42), /* немного мягче тень */
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.achv-grid-bonus-static .achv-bonus-card:hover {
  border-color: var(--silk-edge-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Заголовок – меньше и плотнее */
.achv-grid-bonus-static h3 {
  font-size: 1.15rem;          /* было 1.3rem */
  font-weight: 700;
  text-align: center;
  color: var(--accord-text2, #ecdcb7);
  margin-bottom: .6rem;        /* было 1rem */
  text-shadow: 0 0 10px rgba(0,0,0,.6);
}

/* Картинка – как просила, не уменьшаем; только чуть меньше отступ снизу */
.achv-grid-bonus-static img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 0 auto .75rem;       /* было 1rem */
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}

/* Текст – компактнее */
.achv-grid-bonus-static p {
  color: var(--silk-text, #dbe3f0);
  line-height: 1.45;           /* было 1.55 */
  font-size: .9rem;            /* было .95rem */
  margin-bottom: .5rem;        /* плотнее вертикальный ритм */
}

/* адаптив: 1 в ряд */
@media (max-width: 992px) {
  .achv-grid-bonus-static .achv-bonus-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.achv-completed {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 99; /* ключевой момент */
  pointer-events: none;
}


/* баннер по ширине контейнера, высота — по aspect-ratio */
.event-card-wrapper{
  position:relative;
  width:100%;
  max-width:var(--event-max);
  margin:0 auto 18px;
  aspect-ratio:var(--event-ratio);
  border:1px solid var(--silk-edge);
  border-radius:16px;
  overflow:hidden;
  background:#121722;
  box-shadow:var(--silk-shadow), inset 0 1px 0 rgba(255,255,255,.04);
  isolation:isolate;
}
.event-card-wrapper::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(255,255,255,.08); border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* задник (cover) + передний слой (cover/contain по data-fit) */
.event-image-bg{
  position:absolute; inset:0; z-index:0;
  background-image:var(--banner-img);
  background-size:cover; background-position:center;
  filter:blur(6px) saturate(.98) brightness(.95);
  transform:scale(1.03);
}
.event-image-fore{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-position:center;
}
.event-card-wrapper[data-fit="cover"]  .event-image-fore{ object-fit:cover;  }
.event-card-wrapper[data-fit="contain"] .event-image-fore{ object-fit:contain; }

/* затемнение снизу мягче (чтобы картинка не казалась слишком тёмной) */
.event-overlay-content{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%);
}

/* шапка */
.event-head{
  position:absolute; left:18px; right:18px; bottom:16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
}
.event-title{
  margin:0 0 4px;
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  color: var(--accent) !important; /* берём цвет из темы */
  text-shadow: 0 0 6px rgba(var(--badge-shadow), .35); /* свечение под тему */
}

.event-period{ color:var(--silk-muted); font-size:14.5px; }

/* кнопка: без подскока */
.mu-btn-silk{
  appearance:none; cursor:pointer; user-select:none;
  border:1px solid #3a5578; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22)), var(--silk-glass);
  color:var(--silk-text); padding:10px 16px; min-width:220px;
  font-weight:600; letter-spacing:.2px; text-shadow:1px 1px 2px #000;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  transition:border-color .18s ease, box-shadow .18s ease; /* убрали translate */
}
.mu-btn-silk:hover{ border-color:#4d78ab; }
.mu-btn-silk:active{ box-shadow:0 4px 12px rgba(0,0,0,.45); }

/* дровер строго в пределах баннера */
.event-details-panel{
  position:absolute; inset:0; z-index:5;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(28,36,52,.7), rgba(12,16,22,.76));
  backdrop-filter:blur(10px);
  border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(101%);
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  overflow:hidden;
}
.event-details-panel.active{ transform:translateX(0); }

/* внутр. скролл */
.panel-scroll{ position:absolute; inset:0; overflow:auto; padding:18px; }

/* заголовки */
.details-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--accent) !important;
  text-shadow: 0 0 5px rgba(var(--badge-shadow), .35);
}
.details-period{ color:var(--silk-muted); font-size:14px; margin-bottom:8px; }
.details-desc{ color:var(--silk-text); line-height:1.5; margin:0 0 8px; }

/* грид мини-карточек: 4–5 в ряд, центрирование когда их мало */
.cards-grid{
  display:grid; gap:14px; margin-top:10px;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  justify-content:center;            /* центровка если 3 и меньше */
  align-content:start;
}

/* мини-карточка: верх без фона/рамок, низ — тёмный блок */
.mini-card{
  border-radius:14px; overflow:hidden; position:relative;
  background:transparent; border:none;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease;
}
.mini-card:hover{ box-shadow:0 10px 22px rgba(0,0,0,.32); }

/* верх — только PNG монстра */
.mini-card__thumb{
  height:108px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none;
}
.mini-card__thumb img{ max-width:90%; max-height:100%; object-fit:contain; display:block; }

/* низ — инфо-планка */
.mini-card__body{
  background:#0f141c; border-top:1px solid rgba(255,255,255,.06);
  padding:10px 12px 12px; color:var(--silk-text);
}
.mini-card__title{ margin:0 0 6px; font-size:15px; font-weight:800; color:#ffd24d; }

/* строки свойств */
.meta-row{ display:flex; gap:6px; align-items:flex-start; font-size:14px; color:var(--silk-muted); line-height:1.35; margin:2px 0; }
.meta-row i{ flex:0 0 auto; width:16px; text-align:center; filter:drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.meta-text{ color:var(--silk-muted); font-size:14px; line-height:1.45; }

/* босс — бейдж */
.mini-card__badge{
  position:absolute; top:8px; left:8px;
  font-size:11px; font-weight:800; letter-spacing:.6px;
  padding:2px 7px; border-radius:999px;
  color:#1a1000; background:linear-gradient(180deg, #ffd800, #f3c400);
  box-shadow:0 6px 14px rgba(249,211,0,.35);
}

/* крестик — минимализм, без «коробки» */
.close-btn{
  position:absolute; top:10px; right:12px; z-index:10;
  background:none; border:none; color:var(--silk-text); font-size:26px; line-height:1;
  opacity:.8; cursor:pointer; padding:0;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  transition:opacity .15s ease, transform .15s ease;
}
.close-btn:hover{ opacity:1; transform:scale(1.05); }

/* плашка заглушки */
.bottom-plaque{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 18px; color:var(--silk-text);
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25)), rgba(13,17,24,.65);
  border-top:1px solid rgba(255,255,255,.08);
  border-radius:0 0 16px 16px;
}
.placeholder-title{ margin:0 0 5px; }
.placeholder-sub{ margin:0; color:var(--silk-muted); }

/* адаптив */
@media (max-width:576px){
  .event-title{ font-size:24px; }
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mu-btn-silk{ width:100%; min-width:unset; text-align:center; }
}
@media (max-width:420px){
  .cards-grid{ grid-template-columns: 1fr; }
}

/* Базовые значения по умолчанию */
.event-card-wrapper{
  /* ...твои свойства... */
  --accent: #f9d300;         /* цвет заголовков / имен монстров по умолчанию */
  --accent-2: #d9b800;       /* второй оттенок (для градиента бейджа) */
  --badge-shadow: 249,211,0; /* RGB для теней бейджа */
}

/* Привязка переменных к элементам */
.event-title           { color: var(--accent); }
.mini-card__title      { color: var(--accent); }
.mini-card__badge{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 14px rgba(var(--badge-shadow), .35);
  color: #0f0a00;
}

/* ТЕМЫ (можно менять оттенки как захочешь) */
.theme-halloween{
  --accent:   #b58cff; /* фиолетово-сиреневый */
  --accent-2: #7d5fd1;
  --badge-shadow: 183,143,255;
}
.theme-valentine{
  --accent:   #ff9ccf;
  --accent-2: #e070a9;
  --badge-shadow: 255,156,207;
}
.theme-summer{  --accent:#ffd24d; --accent-2:#ffb347; --badge-shadow:255,210,77; }
.theme-pirate{  --accent:#f5b625; --accent-2:#d89e20; --badge-shadow:245,182,37; }
.theme-newyear{ --accent:#9de4ff; --accent-2:#66c9f1; --badge-shadow:157,228,255; }
.theme-school{  --accent:#9dd6ff; --accent-2:#62b2f2; --badge-shadow:157,214,255; }
.theme-birthday{--accent:#ffd36b; --accent-2:#ffb347; --badge-shadow:255,211,107; }
.theme-workers{ --accent:#ffb347; --accent-2:#f19130; --badge-shadow:255,179,71; }

.meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--silk-muted);
  line-height: 1.4;
  margin: 3px 0;
}

.ev-icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.45))
    brightness(1.08)
    contrast(1.1);
  flex-shrink: 0;
  transition: transform .15s ease;
}

/* ========= ЭФФЕКТЫ ДЛЯ БОССОВ ========= */

/* базовая подготовка */
.is-boss .mini-card__thumb{
  position: relative;
  isolation: isolate; /* чтобы свечения не вылезали за карточку */
}

/* 1) мягкое «дыхание» светом под боссом */
.is-boss .mini-card__thumb::before{
  content:"";
  position:absolute; inset:auto 8% -6% 8%; /* снизу эллипс */
  height:38px;
  border-radius:50%;
  background: radial-gradient(ellipse at center,
              color-mix(in oklab, var(--accent) 65%, transparent) 0%,
              color-mix(in oklab, var(--accent) 25%, transparent) 55%,
              transparent 70%);
  filter: blur(8px);
  opacity:.65;
  z-index:0;
  animation: boss-breathe 3.2s ease-in-out infinite;
}

/* 2) лёгкая пульсация контурного сияния у PNG */
.is-boss .mini-card__thumb img{
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.55))
    drop-shadow(0 10px 22px rgba(0,0,0,.35))
    drop-shadow(0 0 12px color-mix(in oklab, var(--accent) 45%, transparent));
  transition: transform .25s ease, filter .25s ease;
}

/* усиление при ховере */
.is-boss:hover .mini-card__thumb img{
  transform: translateY(-2px) scale(1.02);
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.55))
    drop-shadow(0 14px 26px rgba(0,0,0,.42))
    drop-shadow(0 0 18px color-mix(in oklab, var(--accent) 65%, transparent));
}

/* 3) «корона» искорок над боссом (очень деликатно) */
.is-boss .mini-card__thumb::after{
  content:"";
  position:absolute; left:50%; top:4%;
  width:54%; height:34%;
  transform: translateX(-50%);
  background:
    radial-gradient(6px 6px at 20% 20%, color-mix(in oklab, var(--accent) 70%, transparent), transparent 60%),
    radial-gradient(5px 5px at 50% 0%,  color-mix(in oklab, var(--accent-2) 70%, transparent), transparent 60%),
    radial-gradient(6px 6px at 80% 25%, color-mix(in oklab, var(--accent) 70%, transparent), transparent 60%);
  filter: blur(0.6px) drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 60%, transparent));
  opacity:.55;
  animation: boss-sparkle 2.8s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}

/* анимации */
@keyframes boss-breathe{
  0%,100%{ transform: scale(0.96); opacity:.55; }
  50%     { transform: scale(1.06); opacity:.78; }
}
@keyframes boss-sparkle{
  0%,100%{ transform: translateX(-50%) translateY(0); opacity:.45; }
  50%     { transform: translateX(-50%) translateY(-2px); opacity:.7; }
}

/* если пользователь включил «уменьшение движения» — отключаем анимации */
@media (prefers-reduced-motion: reduce){
  .is-boss .mini-card__thumb::before,
  .is-boss .mini-card__thumb::after{ animation: none; }
}

/* ===== BONUSES: компактная карточка, узкая и низкая ===== */
.card.achv-bonus{
  /* подгони эти две переменные под вкус */
  --bonus-w: 22em;      /* ширина карточки (было 25em) */
  --bonus-h: 156px;     /* общая высота карточки */

  position: relative;
  max-width: var(--bonus-w) !important;
  min-height: var(--bonus-h);
  max-height: var(--bonus-h);
  padding-bottom: 44px;                /* место под кнопку */

  border: 1px solid var(--silk-edge);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15,20,28,.80), rgba(8,10,15,.86));
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--silk-text);
  overflow: hidden;
}
.card.achv-bonus .row.g-0{height:100%; display:flex; align-items:stretch;}

/* левая мини-картинка поменьше */
.card.achv-bonus .col-md-3.d-lg-flex.d-none{
  display:flex!important; align-items:center; justify-content:center;
  padding:10px; border-right:1px solid rgba(255,255,255,.06);
}
.card.achv-bonus .col-md-3.d-lg-flex.d-none img{
  width:64px; height:64px; object-fit:cover;
  border-radius:10px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
}

/* центр: плотнее вертикальные отступы */
.card.achv-bonus .col-md-6{display:flex; flex-direction:column; justify-content:center;}
.card.achv-bonus .card-body{padding:8px 12px;}
.card.achv-bonus .card-title{
  margin:0 0 2px; font-weight:700; font-size:.98rem; color:var(--bonus-title,#ffd36b);
}
.card.achv-bonus .card-text{color:var(--silk-muted); margin-bottom:3px;}
.card.achv-bonus .progress{height:3px; background:rgba(255,255,255,.08); margin:4px 0 0;}
.card.achv-bonus .progress-bar{background:linear-gradient(90deg, var(--silk-gold), #ffe788);}

/* правая колонка — компактнее */
.card.achv-bonus .col-md-3:last-child{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:6px 10px 8px; text-align:center;
}
.card.achv-bonus time{font-size:.74rem; color:rgba(233,238,245,.85); margin-bottom:2px; display:block;}
.card.achv-bonus .card-img-top{max-width:68px; margin:2px auto 0; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.card.achv-bonus .card-text2{margin-top:2px; font-weight:700; font-size:.98rem; color:var(--silk-text);}

/* КНОПКА: строго под прогрессом, по центру, фиксированная ширина */
.card.achv-bonus form#donequest{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:10px;
  width:180px;               /* ← если нужно ещё уже: 160px */
  z-index:3;
  display:flex; justify-content:center;
}
.card.achv-bonus form#donequest .quest-button{
  height:30px; padding:0 10px;
  border-radius:8px; font-weight:600; font-size:11px; letter-spacing:.3px;
  color:#fff; background:linear-gradient(145deg,#1b2232,#10141a);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  transition:all .2s ease;
}
.card.achv-bonus form#donequest .quest-button:hover{
  border-color:rgba(255,255,255,.25);
  background:linear-gradient(145deg,#222b3c,#181b22);
}

/* Градиенты из твоего PHP — имена не меняем */
.bg-custom-lightpink    { background-image:linear-gradient(135deg, rgba(255,168,212,.25), rgba(0,0,0,0) 60%) !important; }
.bg-custom-lightorange1 { background-image:linear-gradient(135deg, rgba(255,187,120,.25), rgba(0,0,0,0) 60%) !important; }
.bg-custom-coldb        { background-image:linear-gradient(135deg, rgb(140 103 230 / 63%), rgba(0,0,0,0) 60%) !important; }
.bg-custom-blue         { background-image:linear-gradient(135deg, rgba(0,74,203,.35),  rgba(0,0,0,0) 60%) !important; }
.bg-custom-pinklove     { background-image:linear-gradient(135deg, rgba(255,156,207,.28), rgba(0,0,0,0) 60%) !important; }
.bg-custom-lightred     { background-image:linear-gradient(135deg, rgba(255,110,110,.28), rgba(0,0,0,0) 60%) !important; }
.bg-custom-yellowspecial{ background-image:linear-gradient(135deg, rgba(255,211,107,.28), rgba(0,0,0,0) 60%) !important; }
.bg-custom-orange       { background-image:linear-gradient(135deg, rgba(184,104,18,.32),  rgba(0,0,0,0) 60%) !important; }
.bg-custom-lightskin    { background-image:linear-gradient(135deg, rgba(235,205,180,.22), rgba(0,0,0,0) 60%) !important; }

/* цвет заголовка под выбранный градиент */
.card.achv-bonus{ --bonus-title:#ffd36b; }
.card.achv-bonus.bg-custom-lightpink     { --bonus-title:#ffb8e0; }
.card.achv-bonus.bg-custom-lightorange1  { --bonus-title:#ffd39e; }
.card.achv-bonus.bg-custom-coldb         { --bonus-title:#b58cff; }
.card.achv-bonus.bg-custom-blue          { --bonus-title:#9ec7ff; }
.card.achv-bonus.bg-custom-pinklove      { --bonus-title:#ffc2df; }
.card.achv-bonus.bg-custom-lightred      { --bonus-title:#b29cda; }
.card.achv-bonus.bg-custom-yellowspecial { --bonus-title:#ffd36b; }
.card.achv-bonus.bg-custom-orange        { --bonus-title:#ffc78a; }
.card.achv-bonus.bg-custom-lightskin     { --bonus-title:#f0decc; }

/* адаптив */
@media (max-width: 991px){
  .card.achv-bonus{
    min-height:auto; max-height:none; padding-bottom:12px; max-width:100%!important;
  }
  .card.achv-bonus .row.g-0{flex-direction:column; align-items:center; text-align:center;}
  .card.achv-bonus .col-md-3.d-lg-flex.d-none{
    border-right:none; border-bottom:1px solid rgba(255,255,255,.05);
    margin-bottom:8px; padding-bottom:8px;
  }
  .card.achv-bonus form#donequest{position:static; transform:none; width:80%; margin-top:8px;}
}

.alert.ml2-blue {
    color: #ffe9c9 !important;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .04);
    background: linear-gradient(180deg, rgba(28, 40, 64, .8), rgba(60, 86, 130, .8));
    color: #eaf2ff;
    border-color: #27abdc;
}

.alert-empty {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: #7c5b4c00;
    --bs-alert-border-color: #70481c00;
    --bs-alert-link-color: #ffda6a00;
}

/* =====================================================
   ML · Бейдж "Пример" для существующего .ml-rew--note
   ===================================================== */
.ml-rew--note.example{
  position: relative;
  padding-top: 20px;                    /* место под бейдж */
  border-left: 4px solid #6bb9ff;       /* голубой акцент слева */
  /* ничего не меняем в твоём dashed-бордере: он остаётся */
}

.ml-rew--note.example::before{
    content: "Пример";
    position: absolute;
    top: -10px;
    left: 16px;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #f1f1f1;
    border: 1px solid #6ab8ff;
    border-radius: 8px;
    background: linear-gradient(180deg, #6ab8ff, #0053a1);
    box-shadow: 0 2px 8px rgba(102, 181, 255, .35);
    pointer-events: none;
}

/* Тёплый вариант бейджа для второго примера (опционально) */
.ml-rew--note.example.is-strong{
  border-left-color: #ffc1b4;
}
.ml-rew--note.example.is-strong::before{
  background: linear-gradient(180deg, #ffc1b4, #e9a898);
  border-color: #e39c8a;
  box-shadow: 0 2px 8px rgba(255,193,180,.35);
}