/* mx-ui v1.4 — мелкие правки интерфейса.
   1) Win (тёмная тема): фон карточки игры и внутренних панелей — как у блока «История игр» (#1a1d29).
   2) Megawheel: фишки суммы — новая отрисовка (svg из megawheel.js после bon42): цветной диск с градиентом,
      белые полоски по краю, внутреннее кольцо, число масштабируется вместе с фишкой (1000 не вылезает).
   3) (убрано в v1.3: кнопки /2 x2 в Tower/Wheel — как было на сайте.)
   4) Slots: подсветка выбранного провайдера (.mx-sel), первый пункт больше не подсвечен всегда.
   5) Профиль: переключатели во включённом состоянии зелёные (тёмная тема).
   6) Меню: круглая кнопка языка в тёмной теме — тёмная, а не белая.
   7) Bubbles («Монета»): эффект результата (.mx-bfx, создаёт mx-ui.js) и анимация монеты при win/lose. */

/* ---------- 1) Win ---------- */
html body:not(.light-theme) .win-page {
  --card: #1a1d29 !important;
  --card2: #1a1d29 !important;
}
html body:not(.light-theme) .win-page .win-card {
  background: #1a1d29 !important;
  background-color: #1a1d29 !important;
  box-shadow: none !important;
}
html body:not(.light-theme) .win-page .win-panel {
  background: #1a1d29 !important;
  background-color: #1a1d29 !important;
}

/* ---------- 2) Megawheel: фишки ---------- */
html body .mw-chips .mw-chip {
  opacity: .72;
  transform: scale(.94);
  transition: transform .16s ease, opacity .16s ease !important;
  -webkit-tap-highlight-color: transparent;
}
html body .mw-chips .mw-chip.on { opacity: 1; transform: scale(1.08); }
html body .mw-chips .mw-chip:active { transform: scale(.9); }
html body .mw-chips .mw-chip svg {
  display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .32)) !important;
}
html body .mw-chips .mw-chip.on svg {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .38)) drop-shadow(0 0 5px rgba(255, 255, 255, .22)) !important;
}
/* градиент диска: цвета через stop-color */
.mw-chip .mw-g1 { stop-color: #94a3b8; }
.mw-chip .mw-g2 { stop-color: #475569; }
.mw-chip1 .mw-g1 { stop-color: #b195ff; }   .mw-chip1 .mw-g2 { stop-color: #6d28d9; }
.mw-chip10 .mw-g1 { stop-color: #ffd75e; }  .mw-chip10 .mw-g2 { stop-color: #e08a00; }
.mw-chip50 .mw-g1 { stop-color: #6eb0ff; }  .mw-chip50 .mw-g2 { stop-color: #2458d8; }
.mw-chip250 .mw-g1 { stop-color: #5ce08d; } .mw-chip250 .mw-g2 { stop-color: #158a44; }
.mw-chip1000 .mw-g1 { stop-color: #ff7b76; }.mw-chip1000 .mw-g2 { stop-color: #d3242b; }
.mw-chip .mw-c-sel { fill: none; stroke: #fff; stroke-width: 2.2; opacity: 0; transition: opacity .16s; }
.mw-chip.on .mw-c-sel { opacity: .95; }
.mw-chip .mw-c-base { stroke: rgba(0, 0, 0, .28); stroke-width: 1; }
.mw-chip .mw-c-str { fill: none; stroke: #fff; stroke-width: 9; stroke-dasharray: 14 18.59; opacity: .96; }
.mw-chip .mw-c-in { fill: #fff; fill-opacity: .14; }
.mw-chip .mw-c-ring { fill: none; stroke: #fff; stroke-width: 1.8; stroke-dasharray: 3.2 2.6; opacity: .8; }
.mw-chip .mw-c-txt {
  fill: #fff; font-weight: 900; letter-spacing: -.5px;
  paint-order: stroke; stroke: rgba(0, 0, 0, .28); stroke-width: 1.3px; stroke-linejoin: round;
}
/* запасной вариант, если старая разметка (span поверх svg) осталась: число не вылезает за фишку */
html body .mw-chips .mw-chip > span { font-size: clamp(11px, 3.9vw, 16px) !important; letter-spacing: -.3px; }
html body .mw-chips .mw-chip .mw-chip__bg { fill-opacity: 1 !important; }

/* ---------- 4) Slots: выбранный провайдер ---------- */
html body .slots_p .slots_box .b1_ .dropdown__inner ul.mx-has-sel li:first-child:not(.mx-sel) {
  background: transparent !important; color: #0f172a !important;
}
html body .slots_p .slots_box .b1_ .dropdown__inner ul.mx-has-sel li:first-child:not(.mx-sel) span {
  background: #eef2f7 !important; color: #64748b !important;
}
html body .slots_p .slots_box .b1_ .dropdown__inner ul.mx-has-sel li.mx-sel { background: #eff6ff !important; color: #1d4ed8 !important; }
html body .slots_p .slots_box .b1_ .dropdown__inner ul.mx-has-sel li.mx-sel span { background: #2563eb !important; color: #ffffff !important; }
html body:not(.light-theme) .slots_p .slots_box .b1_ .dropdown__inner ul.mx-has-sel li:first-child:not(.mx-sel) {
  background: transparent !important; color: #ffffff !important;
}
html body:not(.light-theme) .slots_p .slots_box .b1_ .dropdown__inner ul.mx-has-sel li:first-child:not(.mx-sel) span {
  background: #232a3a !important; color: #94a3b8 !important;
}
html body:not(.light-theme) .slots_p .slots_box .b1_ .dropdown__inner ul.mx-has-sel li.mx-sel { background: #1e2a45 !important; color: #93c5fd !important; }
html body:not(.light-theme) .slots_p .slots_box .b1_ .dropdown__inner ul.mx-has-sel li.mx-sel span { background: #2563eb !important; color: #ffffff !important; }

/* ---------- 5) Профиль: переключатели ---------- */
html body:not(.light-theme) .theme-switch-row .switch.on {
  background: #22c55e !important;
  background-color: #22c55e !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .25), 0 4px 14px rgba(34, 197, 94, .35) !important;
}
html body:not(.light-theme) .theme-switch-row .switch.on .switch-knob {
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3) !important;
}

/* ---------- 6) Меню: кнопка языка ---------- */
html body:not(.light-theme) .langsw-btn {
  background: #262e44 !important;
  background-color: #262e44 !important;
  border-color: #3a4462 !important;
  box-shadow: none !important;
}
html body:not(.light-theme) .langsw-btn:hover { background: #2f3852 !important; background-color: #2f3852 !important; }

/* ---------- 7) Bubbles («Монета»): эффект после игры ---------- */
.mx-bfx { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.mx-bfx::before {
  content: ""; position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,90,.75) 0%, rgba(255,214,90,.28) 38%, rgba(255,214,90,0) 70%);
  animation: mxBfxFlash .55s ease-out forwards;
}
.mx-bfx--lose::before { background: radial-gradient(circle, rgba(239,68,68,.6) 0%, rgba(239,68,68,.2) 40%, rgba(239,68,68,0) 70%); }
.mx-bfx__ring {
  position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%;
  border: 3px solid rgba(255,214,90,.95); box-shadow: 0 0 14px rgba(255,214,90,.55), inset 0 0 10px rgba(255,214,90,.25);
  opacity: 0; animation: mxBfxRing .95s cubic-bezier(.2,.7,.3,1) forwards;
}
.mx-bfx--lose .mx-bfx__ring { border-color: rgba(239,68,68,.9); box-shadow: 0 0 14px rgba(239,68,68,.5); animation-duration: .75s; }
.mx-bfx--big::before { width: 240px; height: 240px; left: -120px; top: -120px; }
.mx-bfx--big .mx-bfx__ring { border-width: 4px; animation-duration: 1.15s; }
.mx-bfx__p {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff4c2 0%, #ffd24a 45%, #e59b00 100%);
  box-shadow: 0 0 8px rgba(255,214,90,.7);
  opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.4);
  animation: mxBfxPart 1s cubic-bezier(.15,.75,.3,1) forwards;
}
.mx-bfx__p--w { background: radial-gradient(circle at 35% 32%, #ffffff 0%, #d8fbe4 50%, #4ade80 100%); box-shadow: 0 0 8px rgba(74,222,128,.7); }
.mx-bfx--lose .mx-bfx__p {
  background: radial-gradient(circle at 35% 32%, #ffd0d0 0%, #f87171 50%, #7f1d1d 100%);
  box-shadow: 0 0 6px rgba(239,68,68,.45); animation-name: mxBfxPartDown;
}
@keyframes mxBfxFlash { 0% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes mxBfxRing { 0% { transform: scale(.55); opacity: 1; } 70% { opacity: .55; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes mxBfxPart {
  0% { transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 0; }
  10% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--d) * .28)) scale(1.2); }
  65% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--d) * .88)) scale(.9); }
  100% { transform: rotate(var(--a)) translateX(var(--d)) scale(.2); opacity: 0; }
}
@keyframes mxBfxPartDown {
  0% { transform: rotate(var(--a)) translateX(0) scale(.5); opacity: 0; }
  15% { opacity: .95; transform: rotate(var(--a)) translateX(calc(var(--d) * .45)) scale(1); }
  100% { transform: rotate(var(--a)) translateX(var(--d)) translateY(26px) scale(.2); opacity: 0; }
}
/* сама монета */
html body .bub-coin.is-win img { animation: mxCoinWin 1.15s cubic-bezier(.2,.75,.25,1) both; }
html body .bub-coin.is-lose img { animation: mxCoinLose .85s ease-in-out both; }
@keyframes mxCoinWin {
  0% { transform: scale(1) rotateY(0deg); filter: drop-shadow(0 0 0 rgba(255,214,90,0)); }
  40% { transform: scale(1.28) rotateY(360deg); filter: drop-shadow(0 0 18px rgba(255,214,90,.95)) brightness(1.25); }
  75% { transform: scale(1.06) rotateY(660deg); filter: drop-shadow(0 0 10px rgba(255,214,90,.6)); }
  100% { transform: scale(1) rotateY(720deg); filter: drop-shadow(0 0 4px rgba(255,214,90,.35)); }
}
@keyframes mxCoinLose {
  0% { transform: translateX(0) rotate(0); filter: none; }
  15% { transform: translateX(-9px) rotate(-10deg); filter: grayscale(.75) brightness(.75); }
  30% { transform: translateX(9px) rotate(9deg); filter: grayscale(.75) brightness(.75); }
  45% { transform: translateX(-7px) rotate(-6deg); }
  60% { transform: translateX(6px) rotate(5deg); filter: grayscale(.4) brightness(.85); }
  78% { transform: translateX(-3px) rotate(-2deg); }
  100% { transform: translateX(0) rotate(0); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-bfx { display: none; }
  html body .bub-coin.is-win img, html body .bub-coin.is-lose img { animation: none !important; }
}