/* CYBERPUNK OVERRIDES */
:root {
  --primary: #ff7b20;
  --accent: #ff9a2b;
  --bg: #0d0a07;
  --surface: #13100d;
  --text: #f6efe2;
  --text-2: #e0d5c0;
  --border: #1a1612;
  --muted: #a39682;
}
html, body { background: var(--bg) !important; color: var(--text) !important; }
a, a:visited { color: var(--cp-accent) !important; }
h1, h2, h3, h4, h5, h6 {
  color: var(--cp-text-2) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
button, .btn, input[type=button], input[type=submit] {
  background: linear-gradient(90deg, #ff7b20, #d06bff), var(--cp-text-2)) !important;
  color: #ff7b20 !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: 8px !important;
}
.card, .panel, .modal-content, .container, .wrapper {
  background: var(--cp-bg-card) !important;
  border: 1px solid var(--cp-border) !important;
  box-shadow: 0 0 12px rgba(0,0,0,0.6);
}
.neon {
  text-shadow: 0 0 6px var(--cp-accent), 0 0 12px var(--cp-accent);
}


:root{
  --brand-1: #ff7b20;
  --brand-2: #ff7b20;
  --brand-3: #ff7b20;
  --brand-4: #ff7b20;
  --brand-5: #ff7b20;
  --brand-6: #ff7b20;
  --brand-7: #ff7b20;
  --brand-8: #ff7b20;
  --brand-9: #ff7b20;
  --brand-10: #ff7b20;
}


/* === Sound Button Refresh === */
.sound, .sound-btn, .btn-sound, .btn__sound, .sound-button,
.volume, .volume-btn, .btn-volume,
.audio, .audio-btn, .btn-audio,
.mute, .unmute, .mute-toggle, .sound-toggle,
[data-sound], [data-audio], [data-role="sound"], [data-role="audio"] {
  background: var(--brand-1, #ff7b20);
  color: #ff7b20;
  border: 1px solid color-mix(in oklab, var(--brand-1, #ff7b20) 70%, black);
  border-radius: 12px;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.sound svg, .sound-btn svg, .btn-sound svg, .sound-button svg,
.volume svg, .volume-btn svg, .btn-volume svg,
.audio svg, .audio-btn svg, .btn-audio svg,
.mute svg, .unmute svg, .mute-toggle svg, .sound-toggle svg {
  width: 20px; height: 20px;
  fill: currentColor; stroke: currentColor;
}
.sound:hover, .sound-btn:hover, .btn-sound:hover, .sound-button:hover,
.volume:hover, .volume-btn:hover, .btn-volume:hover,
.audio:hover, .audio-btn:hover, .btn-audio:hover,
.mute:hover, .unmute:hover, .mute-toggle:hover, .sound-toggle:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--brand-1, #ff7b20) 90%, var(--brand-2, #ff7b20));
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.sound:active, .sound-btn:active, .btn-sound:active, .sound-button:active,
.volume:active, .volume-btn:active, .btn-volume:active,
.audio:active, .audio-btn:active, .btn-audio:active,
.mute:active, .unmute:active, .mute-toggle:active, .sound-toggle:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.sound.is-muted, .sound.muted, .btn-sound.is-muted, .sound-button.is-muted,
.mute, .mute-toggle.is-muted {
  background: color-mix(in oklab, var(--brand-1, #ff7b20) 20%, black);
  color: #ff7b20;
  border-color: color-mix(in oklab, var(--brand-1, #ff7b20) 30%, black);
  opacity: .9;
}
/* If it's a fixed corner button */
.sound.fixed, .sound-btn.fixed, .btn-sound.fixed, .sound-button.fixed {
  position: fixed; right: 18px; bottom: 18px;
  z-index: 1000;
}



/* === Force override for the sound toggle (id-based) === */
#sound-toggle,
#sound_btn,
#volume-toggle,
#mute-toggle {
  background: var(--brand-1) !important;
  color: #ff7b20 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 2px solid color-mix(in oklab, var(--brand-1) 60%, black) !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}
#sound-toggle:hover,
#sound_btn:hover,
#volume-toggle:hover,
#mute-toggle:hover {
  background: color-mix(in oklab, var(--brand-1) 85%, var(--brand-2, #ff7b20)) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.2) !important;
}
#sound-toggle svg,
#sound_btn svg,
#volume-toggle svg,
#mute-toggle svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* muted state */
#sound-toggle.is-muted,
#sound_btn.is-muted,
#volume-toggle.is-muted,
#mute-toggle.is-muted {
  background: color-mix(in oklab, var(--brand-1) 25%, black) !important;
  color: #ff7b20 !important;
  border-color: color-mix(in oklab, var(--brand-1) 35%, black) !important;
}



/* === Sound button design tweak === */
#sound-toggle, #sound_btn, #volume-toggle, #mute-toggle,
.sound, .sound-btn, .btn-sound, .sound-button, .sound-toggle {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(90deg, #ff7b20, #d06bff) 94%, white) 0%, var(--brand-1) 60%, color-mix(in oklab, var(--brand-1) 80%, black) 100%) !important;
  color: #ff7b20 !important;
  border: 1px solid color-mix(in oklab, var(--brand-1) 50%, black) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
  display: inline-flex; align-items: center; justify-content: center;
}
#sound-toggle:hover, #sound_btn:hover, #volume-toggle:hover, #mute-toggle:hover,
.sound:hover, .sound-btn:hover, .btn-sound:hover, .sound-button:hover, .sound-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.26) !important;
}
#sound-toggle svg, #sound_btn svg, #volume-toggle svg, #mute-toggle svg,
.sound svg, .sound-btn svg, .btn-sound svg, .sound-button svg, .sound-toggle svg {
  width: 22px !important; height: 22px !important;
  fill: currentColor !important; stroke: currentColor !important;
}



/* === Playing highlight for sound button === */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-1, #ff7b20) 40%, transparent); }
  100% { box-shadow: 0 0 0 12px color-mix(in oklab, var(--brand-1, #ff7b20) 0%, transparent); }
}
#sound-toggle.is-playing, #sound_btn.is-playing, #volume-toggle.is-playing, #mute-toggle.is-playing,
.sound.is-playing, .sound-btn.is-playing, .btn-sound.is-playing, .sound-button.is-playing, .sound-toggle.is-playing {
  background: color-mix(in oklab, var(--brand-1, #ff7b20) 90%, white) !important;
  color: #ff7b20 !important;
  animation: pulseRing 1.2s ease-out infinite;
}

/* Optional icon swap if there are .icon--play / .icon--mute elements */
.sound .icon--mute, .sound-btn .icon--mute, .btn-sound .icon--mute, .sound-button .icon--mute,
#sound-toggle .icon--mute, #sound_btn .icon--mute, #volume-toggle .icon--mute, #mute-toggle .icon--mute { display: inline; }
.sound.is-playing .icon--mute, .sound-btn.is-playing .icon--mute, .btn-sound.is-playing .icon--mute, .sound-button.is-playing .icon--mute,
#sound-toggle.is-playing .icon--mute, #sound_btn.is-playing .icon--mute, #volume-toggle.is-playing .icon--mute, #mute-toggle.is-playing .icon--mute { display: none; }
.sound .icon--play, .sound-btn .icon--play, .btn-sound .icon--play, .sound-button .icon--play,
#sound-toggle .icon--play, #sound_btn .icon--play, #volume-toggle .icon--play, #mute-toggle .icon--play { display: none; }
.sound.is-playing .icon--play, .sound-btn.is-playing .icon--play, .btn-sound.is-playing .icon--play, .sound-button.is-playing .icon--play,
#sound-toggle.is-playing .icon--play, #sound_btn.is-playing .icon--play, #volume-toggle.is-playing .icon--play, #mute-toggle.is-playing .icon--play { display: inline; }



/* === Iconless sound button: no mute/unmute picture, only highlight === */
#sound-toggle, #sound_btn, #volume-toggle, #mute-toggle,
.sound, .sound-btn, .btn-sound, .sound-button, .sound-toggle {
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  position: relative;
  overflow: hidden;
}

/* Hide any inner <img> or <svg> icons inside the button */
#sound-toggle img, #sound_btn img, #volume-toggle img, #mute-toggle img,
.sound img, .sound-btn img, .btn-sound img, .sound-button img, .sound-toggle img,
#sound-toggle svg, #sound_btn svg, #volume-toggle svg, #mute-toggle svg,
.sound svg, .sound-btn svg, .btn-sound svg, .sound-button svg, .sound-toggle svg {
  display: none !important;
  visibility: hidden !important;
}

/* Remove strike/lines made via pseudo-elements */
#sound-toggle::before, #sound-toggle::after,
#sound_btn::before, #sound_btn::after,
#volume-toggle::before, #volume-toggle::after,
#mute-toggle::before, #mute-toggle::after,
.sound::before, .sound::after,
.sound-btn::before, .sound-btn::after,
.btn-sound::before, .btn-sound::after,
.sound-button::before, .sound-button::after,
.sound-toggle::before, .sound-toggle::after {
  content: none !important;
}

/* Keep the nice circle look */
#sound-toggle, #sound_btn, #volume-toggle, #mute-toggle,
.sound, .sound-btn, .btn-sound, .sound-button, .sound-toggle {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: 1px solid color-mix(in oklab, var(--brand-1) 50%, black) !important;
  background: linear-gradient(90deg, #ff7b20, #d06bff) 94%, white) 0%, var(--brand-1) 60%, color-mix(in oklab, var(--brand-1) 80%, black) 100%) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
}

/* Playing highlight remains */
#sound-toggle.is-playing, #sound_btn.is-playing, #volume-toggle.is-playing, #mute-toggle.is-playing,
.sound.is-playing, .sound-btn.is-playing, .btn-sound.is-playing, .sound-button.is-playing, .sound-toggle.is-playing {
  animation: pulseRing 1.2s ease-out infinite;
  background: color-mix(in oklab, var(--brand-1) 90%, white) !important;
}



/* === Enforce iconless button even if the element is an <img> === */
img#sound-toggle, img#sound_btn, img#volume-toggle, img#mute-toggle,
img.sound, img.sound-btn, img.btn-sound, img.sound-button, img.sound-toggle {
  content: "" !important; /* has no effect on <img>, but keep for completeness */
  src: none !important; /* some browsers ignore; JS also removes src */
  image-rendering: auto !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  display: inline-block !important;
}

/* If some background-image slips through, hide it via blend */
#sound-toggle, #sound_btn, #volume-toggle, #mute-toggle,
.sound, .sound-btn, .btn-sound, .sound-button, .sound-toggle {
  background-blend-mode: normal !important;
}



/* === Force iconless sound button === */
#sound-toggle, #sound_btn, #volume-toggle, #mute-toggle,
.sound, .sound-btn, .btn-sound, .sound-button, .sound-toggle {
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  position: relative;
  overflow: hidden;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: 1px solid color-mix(in oklab, var(--brand-1,#ff7b20) 50%, black) !important;
  background: linear-gradient(90deg, #ff7b20, #d06bff) 94%, white) 0%, var(--brand-1,#ff7b20) 60%, color-mix(in oklab, var(--brand-1,#ff7b20) 80%, black) 100%) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
  display: inline-flex; align-items: center; justify-content: center;
}
#sound-toggle img, #sound_btn img, #volume-toggle img, #mute-toggle img,
.sound img, .sound-btn img, .btn-sound img, .sound-button img, .sound-toggle img,
#sound-toggle svg, #sound_btn svg, #volume-toggle svg, #mute-toggle svg,
.sound svg, .sound-btn svg, .btn-sound svg, .sound-button svg, .sound-toggle svg {
  display: none !important;
}
#sound-toggle::before, #sound-toggle::after,
#sound_btn::before, #sound_btn::after,
#volume-toggle::before, #volume-toggle::after,
#mute-toggle::before, #mute-toggle::after,
.sound::before, .sound::after,
.sound-btn::before, .sound-btn::after,
.btn-sound::before, .btn-sound::after,
.sound-button::before, .sound-button::after,
.sound-toggle::before, .sound-toggle::after {
  content: none !important;
}

/* Highlight while playing */
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-1,#ff7b20) 40%, transparent);} 100% { box-shadow: 0 0 0 12px color-mix(in oklab, var(--brand-1,#ff7b20) 0%, transparent);} }
#sound-toggle.is-playing, #sound_btn.is-playing, #volume-toggle.is-playing, #mute-toggle.is-playing,
.sound.is-playing, .sound-btn.is-playing, .btn-sound.is-playing, .sound-button.is-playing, .sound-toggle.is-playing {
  animation: pulseRing 1.2s ease-out infinite;
  background: color-mix(in oklab, var(--brand-1,#ff7b20) 90%, white) !important;
}




/* === CYBERPUNK READABILITY v3 ===
   Делает текст читабельным на пёстрых фонах/картинках.
*/
:root {
  --cp-readable-bg: rgba(0,0,0,.45);
  --cp-readable-bg-strong: rgba(0,0,0,.6);
  --cp-stroke: rgba(0,0,0,.85);
}

/* Базовая подсветка текста (мягкий контур + тень) */
body, body * {
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.35);
}

/* Заголовки — лёгкий обвод для контраста */
h1, h2, h3, h4, h5, h6 {
  -webkit-text-stroke: 0 transparent !important;
  paint-order: stroke fill;
}

/* Чип/плашка под текст, если он находится поверх изображения/героя/баннера */
[class*="hero"], [class*="banner"], [class*="slide"], [class*="header"], [class*="cover"],
.hero, .banner, .slide, .header, .cover, [style*="background-image"], .on-image, .overlay-text {
  position: relative;
}
[class*="hero"] *, [class*="banner"] *, [class*="slide"] *, [class*="header"] *, [class*="cover"] *,
[style*="background-image"] *, .on-image *, .overlay-text * {
  text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6);
}

/* Полупрозрачный фон-«пилюля» для ключевых текстовых элементов */
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] h3, [class*="hero"] p,
[class*="banner"] h1, [class*="banner"] h2, [class*="banner"] h3, [class*="banner"] p,
[class*="slide"] h1, [class*="slide"] h2, [class*="slide"] h3, [class*="slide"] p,
[style*="background-image"] h1, [style*="background-image"] h2, [style*="background-image"] h3, [style*="background-image"] p,
.on-image h1, .on-image h2, .on-image h3, .on-image p,
.overlay-text {
  display: inline-block;
  background: var(--cp-readable-bg);
  padding: .35rem .6rem;
  border-radius: .6rem;
  backdrop-filter: blur(2px);
  box-decoration-break: clone;
}

/* Цифры/счётчики/бейджи */
[class*="counter"], [class*="stat"], [class*="score"], [class*="num"], .badge, .label, .tag, .pill {
  background: var(--cp-readable-bg-strong) !important;
  padding: .2rem .45rem !important;
  border-radius: .5rem !important;
  -webkit-text-stroke: 0 transparent !important;
}

/* Кнопки — повышаем контраст текста на градиентах */
button, .btn, input[type=button], input[type=submit] {
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

/* Текстовые ссылки на изображениях — дополнительный фон */
[class*="hero"] a, [class*="banner"] a, [style*="background-image"] a, .on-image a {
  background: var(--cp-readable-bg);
  padding: .15rem .35rem;
  border-radius: .4rem;
}


/* v4: hide big empty rectangles around socials */
div:empty, section:empty { display: none !important; }
.social, .socials, .social-row, .icons, .links { display: inline-flex; gap: .6rem; }


/* v5 cleanup: hide empty blocks & broken images */
div:empty, section:empty { display:none !important; }
img[data-broken="true"] { display:none !important; }
img[data-broken="true"] + * { margin-left: 0 !important; }
.card:empty, .panel:empty, .box:empty, .placeholder:empty { display:none !important; }