/* ===== 0.43 · Load LAST =====
   The sound card and every sound button in the modern night skin (line icons instead of the
   ♫ glyph and the «Речь» word), and the brand mark in the same gold glass. */

/* ---------- line icons on the sound buttons ---------- */
.sound-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.sound-icon { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.sound-icon .sound-off { stroke:var(--m-red,#ff6b7a); stroke-width:2.1; }
.sound-btn.is-off .sound-icon { opacity:.85; }
.sound-btn.is-off .sound-icon .sound-wave { opacity:.35; }
.sound-btn .sound-text { white-space:nowrap; }

/* yard header: «Музыка» / «Голос · вкл» pills */
body.location-shell .head-actions :is(#musicToggle,#sound).sound-btn .sound-icon { width:17px; height:17px; color:var(--m-gold); filter:drop-shadow(0 0 5px #ffd27a59); }
body.location-shell .head-actions :is(#musicToggle,#sound).sound-btn.is-off .sound-icon { color:var(--m-dim); filter:none; }

/* club: «?» · music · voice — three equal square glass keys */
body.club-live #clubGame .club-arena-tools :is(#clubFx,#clubVoice).sound-btn { width:44px; min-width:44px; padding:0; }
body.club-live #clubGame .club-arena-tools .sound-btn .sound-icon { width:22px; height:22px; stroke-width:1.9; }
body.club-live #clubGame .club-arena-tools .sound-btn:not(.is-off) .sound-icon { color:#ffe3a3; filter:drop-shadow(0 0 6px #ffc65a66); }
body.club-live #clubGame .club-arena-tools .sound-btn.is-off .sound-icon { color:#b9afc7; }
body.club-live #clubGame #clubVoice[aria-pressed="true"] { color:var(--club-ink,#f5eefb); }
@media (max-width:700px) {
  body.club-live #clubGame .club-arena-tools :is(#clubFx,#clubVoice).sound-btn { width:44px; min-width:44px; padding:0; }
}
/* blackjack table sound pill */
#tableSound.sound-btn .sound-icon { width:16px; height:16px; }

/* ---------- brand mark: the gold-on-night tile of the modern skin ---------- */
body.location-shell .brandmark {
  border:1px solid #ffd27a66;
  background:
    radial-gradient(120% 90% at 30% 0,#ffd27a38,transparent 60%),
    linear-gradient(160deg,#33293d,#17121d);
  color:#ffe3a3;
  text-shadow:0 0 10px #ffc65a8c,0 1px 0 #0009;
  box-shadow:inset 0 1px #ffffff26,inset 0 -2px #0006,0 0 0 1px #0006,0 6px 18px #ffb34726;
}

/* ---------- the sound card ---------- */
#modal.sound-dialog {
  width:min(520px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  padding:0;
  overflow:auto;
  border:1px solid #ffd27a4d;
  border-radius:20px;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0,#ff5fcf1c,transparent 70%),
    radial-gradient(ellipse 70% 40% at 100% 100%,#5fd8ff10,transparent 70%),
    linear-gradient(180deg,#221c2a,#131016);
  color:var(--m-ink);
  box-shadow:0 24px 90px #000c,inset 0 1px #ffffff14;
}
#modal.sound-dialog::backdrop { background:#08060bc4; backdrop-filter:blur(6px); }
#modal.sound-dialog #modalContent { display:block; padding:24px 24px 20px; }
#modal.sound-dialog .sound-head { display:flex; align-items:center; gap:14px; padding-right:44px; }
#modal.sound-dialog .sound-badge {
  display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:16px;
  border:1px solid #ffd27a59;
  background:radial-gradient(circle at 35% 25%,#ffd27a40,transparent 65%),linear-gradient(160deg,#3a2f45,#1b1622);
  color:#ffe3a3; box-shadow:inset 0 1px #ffffff26,0 0 22px #ffc65a2e;
}
#modal.sound-dialog .sound-badge .sound-icon { width:28px; height:28px; filter:drop-shadow(0 0 6px #ffc65a80); }
#modal.sound-dialog .eyebrow { display:block; margin:0 0 3px; color:var(--m-gold); font-size:11px; font-weight:800; letter-spacing:1.6px; }
#modal.sound-dialog h2 { margin:0; color:#fff1dc; font-size:26px; line-height:1.1; }
#modal.sound-dialog .sound-lead { margin:14px 0 16px; color:var(--m-muted); font-size:14px; line-height:1.45; }
#modal.sound-dialog .sound-rows { display:grid; gap:10px; }
#modal.sound-dialog .sound-row {
  --tone:#ffd27a;
  display:grid; grid-template-columns:34px 1fr auto; grid-template-areas:"icon label value" "range range range";
  align-items:center; column-gap:10px; row-gap:6px;
  padding:12px 14px 8px; border:1px solid var(--m-line); border-radius:14px;
  background:linear-gradient(180deg,#ffffff0a,#ffffff04); box-shadow:inset 0 1px #ffffff0a;
}
#modal.sound-dialog .sound-row[data-kind="speed"] { --tone:#5fd8ff; }
#modal.sound-dialog .sound-row[data-kind="music"] { --tone:#ff5fcf; }
#modal.sound-dialog .sound-row[data-kind="effects"] { --tone:#c8e874; }
#modal.sound-dialog .sound-row-icon {
  grid-area:icon; display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  border:1px solid color-mix(in srgb,var(--tone) 40%,transparent);
  background:color-mix(in srgb,var(--tone) 14%,transparent);
  color:color-mix(in srgb,var(--tone) 80%,#fff);
}
#modal.sound-dialog .sound-row-icon .sound-icon { width:19px; height:19px; }
#modal.sound-dialog .sound-row label { grid-area:label; margin:0; color:#ece4f4; font-size:14px; font-weight:700; }
#modal.sound-dialog .sound-row output {
  grid-area:value; float:none; min-width:58px; padding:3px 9px; border-radius:999px; text-align:center;
  border:1px solid color-mix(in srgb,var(--tone) 35%,transparent);
  background:color-mix(in srgb,var(--tone) 12%,transparent);
  color:color-mix(in srgb,var(--tone) 75%,#fff); font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;
}
#modal.sound-dialog .sound-ticks { grid-column:1/-1; display:flex; justify-content:space-between; margin:-6px 2px 2px; color:var(--m-dim); font-size:11px; font-weight:700; }

/* the slider: a lit track up to the thumb, a glowing round thumb */
#modal.sound-dialog .voice-range {
  grid-area:range; -webkit-appearance:none; appearance:none; display:block; width:100%; height:30px; min-height:30px; margin:0;
  background:transparent; cursor:pointer; accent-color:var(--tone);
}
#modal.sound-dialog .voice-range:focus-visible { outline:2px solid color-mix(in srgb,var(--tone) 70%,#fff); outline-offset:2px; border-radius:8px; }
#modal.sound-dialog .voice-range::-webkit-slider-runnable-track {
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 55%,#000) 0,var(--tone) var(--fill,50%),#ffffff1c var(--fill,50%));
  box-shadow:inset 0 1px 2px #0008;
}
#modal.sound-dialog .voice-range::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%;
  border:2px solid #fff8e8; background:var(--tone);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 22%,transparent),0 0 14px color-mix(in srgb,var(--tone) 70%,transparent),0 2px 4px #0009;
}
#modal.sound-dialog .voice-range::-moz-range-track { height:6px; border-radius:999px; background:#ffffff1c; }
#modal.sound-dialog .voice-range::-moz-range-progress { height:6px; border-radius:999px; background:var(--tone); }
#modal.sound-dialog .voice-range::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; border:2px solid #fff8e8; background:var(--tone);
  box-shadow:0 0 12px color-mix(in srgb,var(--tone) 70%,transparent);
}

/* on/off pills */
#modal.sound-dialog .sound-toggles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
#modal.sound-dialog .sound-toggle {
  display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; margin:0; padding:0 8px;
  border:1px solid var(--m-line-2); border-radius:12px;
  background:linear-gradient(180deg,#2a2433,#1b1722); color:var(--m-muted);
  box-shadow:inset 0 1px #ffffff14,0 3px 0 #0b090e; font:inherit; font-size:13px; font-weight:750; cursor:pointer;
  transition:border-color .15s,box-shadow .15s,color .15s,filter .15s;
}
#modal.sound-dialog .sound-toggle b { font-size:11px; font-weight:800; letter-spacing:.3px; color:var(--m-dim); text-transform:uppercase; }
#modal.sound-dialog .sound-toggle .sound-icon { width:17px; height:17px; }
#modal.sound-dialog .sound-toggle.is-on { border-color:#ffd27a73; color:#fff1dc; box-shadow:inset 0 1px #ffffff1f,0 3px 0 #0b090e,0 0 16px #ffc65a26; }
#modal.sound-dialog .sound-toggle.is-on .sound-icon { color:var(--m-gold); filter:drop-shadow(0 0 5px #ffc65a80); }
#modal.sound-dialog .sound-toggle.is-on b { color:var(--m-lime); }
#modal.sound-dialog .sound-toggle:hover { filter:brightness(1.12); }
#modal.sound-dialog .sound-toggle:focus-visible,
#modal.sound-dialog .sound-test:focus-visible { outline:2px solid var(--m-gold); outline-offset:2px; }
#modal.sound-dialog .sound-test {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; margin:10px 0 0;
  border:1px solid #ffe7a8; border-radius:14px;
  background:linear-gradient(180deg,#ffe39a,#f0b34e); color:#2a1a05;
  box-shadow:inset 0 1px #fff9,0 4px 0 #7a4c12,0 10px 24px #ffb34733; font:inherit; font-size:15px; font-weight:850; cursor:pointer;
}
#modal.sound-dialog .sound-test .sound-icon { width:16px; height:16px; fill:currentColor; stroke:none; }
#modal.sound-dialog .sound-test:hover { filter:brightness(1.05); }
#modal.sound-dialog .sound-test:active { translate:0 2px; box-shadow:inset 0 1px #fff9,0 2px 0 #7a4c12; }
#modal.sound-dialog .sound-status { min-height:0; margin:8px 0 0; color:var(--m-muted); font-size:13px; text-align:center; }
#modal.sound-dialog .sound-status:empty { display:none; }
#modal.sound-dialog #closeModal { top:16px; right:16px; }

@media (max-width:480px) {
  #modal.sound-dialog #modalContent { padding:18px 14px 14px; }
  #modal.sound-dialog h2 { font-size:22px; }
  #modal.sound-dialog .sound-badge { width:44px; height:44px; border-radius:14px; }
  #modal.sound-dialog .sound-lead { margin:10px 0 12px; font-size:13px; }
  #modal.sound-dialog .sound-rows { gap:8px; }
  #modal.sound-dialog .sound-row { padding:10px 12px 6px; }
  #modal.sound-dialog .sound-toggle { flex-direction:column; gap:1px; min-height:52px; font-size:12px; }
}
@media (max-height:560px) and (min-width:600px) {
  /* short landscape phone: two columns of sliders, the pills and «Послушать» share one row */
  #modal.sound-dialog { width:min(780px,calc(100vw - 24px)); }
  #modal.sound-dialog #modalContent { display:grid; grid-template-columns:1fr 1fr 1fr 1.25fr; gap:8px; padding:14px 16px 12px; }
  #modal.sound-dialog :is(.sound-head,.sound-rows,.sound-status) { grid-column:1/-1; }
  #modal.sound-dialog .sound-head { gap:10px; }
  #modal.sound-dialog .sound-badge { width:40px; height:40px; border-radius:12px; }
  #modal.sound-dialog .sound-badge .sound-icon { width:23px; height:23px; }
  #modal.sound-dialog h2 { font-size:21px; }
  #modal.sound-dialog .sound-lead { display:none; }
  #modal.sound-dialog .sound-rows { grid-template-columns:1fr 1fr; gap:8px; }
  #modal.sound-dialog .sound-row { padding:8px 12px 4px; row-gap:2px; }
  #modal.sound-dialog .sound-row-icon { width:30px; height:30px; }
  #modal.sound-dialog .voice-range { height:26px; min-height:26px; }
  #modal.sound-dialog .sound-ticks { margin-top:-4px; }
  #modal.sound-dialog .sound-toggles { display:contents; }
  #modal.sound-dialog .sound-toggle { min-height:42px; }
  #modal.sound-dialog .sound-test { min-height:42px; margin:0; font-size:14px; }
  #modal.sound-dialog .sound-status { margin:0; }
}
@media (forced-colors:active) {
  #modal.sound-dialog .voice-range { -webkit-appearance:auto; appearance:auto; }
}
