/* Graphics extension over the current store player. Voice mode retains its product cover. */
.drkm-v2 .drkm-scene:has(.drkm-sound-art) {
  background-image:linear-gradient(90deg,rgba(11,35,42,.72),rgba(11,35,42,.28) 63%,rgba(11,35,42,.04)),url('assets/evening-lake.webp');
  background-size:cover; background-position:center; min-height:280px;
}
.drkm-v2:has(.drkm-presets [data-drkpg-icon="tree"][aria-pressed="true"]) .drkm-scene:has(.drkm-sound-art) {
  background-image:linear-gradient(90deg,rgba(11,35,32,.78),rgba(11,35,32,.34) 63%,rgba(11,35,32,.06)),url('assets/forest-dusk.webp');
}
.drkm-v2 .drkm-scene:has(.drkm-sound-art) h2 { color:#fff; }
.drkm-v2 .drkm-scene:has(.drkm-sound-art) :is(.drkm-scene-badge,.drkm-live-dot,.drkm-scene-bottom,.drkm-scene-copy>p) { color:#e5efea; }
.drkm-v2 .drkm-scene .drkm-sound-art { background:#e0f0e51c; color:#e5efea; border:1px solid #dae9df55; }
.drkm-v2 .drkm-track { grid-template-columns:60px minmax(0,1fr) 18px!important; }
.drkm-v2 .drkm-track img { width:60px; height:60px; aspect-ratio:1; object-fit:contain; border-radius:8px; }
.drkm-v2 .drkm-presets button { position:relative; }

/* Keep the dialog header and category controls visible while the sound list scrolls. */
.drkm-v2 .drkm-catalog-dialog[open] {
  display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto;
  width:min(960px,calc(100vw - 40px)); max-width:960px;
  height:min(780px,calc(100dvh - 48px)); max-height:calc(100dvh - 48px);
  padding:28px; overflow:hidden; border-radius:22px;
}
.drkm-v2 .drkm-catalog-dialog>header { margin-bottom:22px; }
.drkm-v2 .drkm-catalog-dialog>header button { width:44px; min-height:44px; flex-shrink:0; }
.drkm-v2 .drkm-catalog-dialog h2 { font-size:25px; line-height:1.3; }
.drkm-v2 .drkm-catalog-dialog .drkm-eyebrow { font-size:10px; }
.drkm-v2 .drkm-catalog-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.drkm-v2 .drkm-catalog-tabs button { font-size:12px; min-height:48px; padding:10px 12px; gap:8px; }
.drkm-v2 .drkm-catalog-tabs button small { opacity:1; color:var(--muted); font-size:11px; margin-left:auto; }
.drkm-v2 .drkm-catalog-tabs button.is-selected { border-color:var(--accent); box-shadow:inset 0 -2px var(--accent); }
.drkm-v2 .drkm-catalog-search input { font-size:14px; min-height:48px; }
.drkm-v2 .drkm-catalog-search input::placeholder { color:var(--muted); opacity:1; }
.drkm-v2 .drkm-catalog-search button { font-size:12px; }
.drkm-v2 .drkm-catalog-list { min-height:0; max-height:none; gap:10px; align-content:start; overscroll-behavior:contain; }
.drkm-v2 .drkm-catalog-list>.drkm-no-layer { font-size:12px; min-height:44px; }
.drkm-v2 .drkm-sound-option { min-width:0; min-height:88px; border-radius:12px; }
.drkm-v2 .drkm-sound-pick { gap:12px; padding:14px 8px 14px 12px; min-width:0; }
.drkm-v2 .drkm-sound-pick>span:nth-child(2) { min-width:0; }
.drkm-v2 .drkm-sound-pick strong { font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.drkm-v2 .drkm-sound-pick small { font-size:11px; line-height:1.5; color:var(--muted); }
.drkm-v2 .drkm-sound-pick:disabled { opacity:1; color:var(--ink); }
.drkm-v2 .drkm-sound-pick:disabled:hover { background:transparent; }
.drkm-v2 .drkm-sound-pick .drkm-channel-icon { width:44px; height:44px; border-radius:12px; }
.drkm-v2 button.drkm-favorite { min-width:44px; min-height:44px; width:44px; flex-shrink:0; }
.drkm-v2 .drkm-catalog-dialog>footer { font-size:12px; line-height:1.55; padding-top:18px; }

/* Library pictograms use Font Awesome Free from the existing WordPress library. */
.drkm-v2 [data-drkpg-icon] { --drkpg-tone:#267b80; --drkpg-tint:#e8f4f0; }
.drkm-v2 [data-drkpg-icon="cloud-rain"],.drkm-v2 [data-drkpg-icon="cloud-moon-rain"],.drkm-v2 [data-drkpg-icon="cloud-bolt"],.drkm-v2 [data-drkpg-icon="water"] { --drkpg-tone:#39718b; --drkpg-tint:#eaf2f8; }
.drkm-v2 [data-drkpg-icon="tree"],.drkm-v2 [data-drkpg-icon="dove"] { --drkpg-tone:#557847; --drkpg-tint:#edf3e6; }
.drkm-v2 [data-drkpg-icon="fire"],.drkm-v2 [data-drkpg-icon="guitar"],.drkm-v2 [data-drkpg-icon="music"],.drkm-v2 [data-drkpg-icon="bell"],.drkm-v2 [data-drkpg-icon="drum"] { --drkpg-tone:#967133; --drkpg-tint:#f9f1df; }
.drkm-v2 [data-drkpg-icon="sliders"],.drkm-v2 [data-drkpg-icon="moon"] { --drkpg-tone:#816ca3; --drkpg-tint:#f1edf7; }
.drkm-v2.drkm-night [data-drkpg-icon] { --drkpg-tone:#b2d5c5; --drkpg-tint:#29473e; }
.drkm-v2.drkm-night [data-drkpg-icon="cloud-rain"],.drkm-v2.drkm-night [data-drkpg-icon="cloud-moon-rain"],.drkm-v2.drkm-night [data-drkpg-icon="cloud-bolt"],.drkm-v2.drkm-night [data-drkpg-icon="water"] { --drkpg-tone:#a9cedd; --drkpg-tint:#293f4a; }
.drkm-v2.drkm-night [data-drkpg-icon="fire"],.drkm-v2.drkm-night [data-drkpg-icon="music"],.drkm-v2.drkm-night [data-drkpg-icon="guitar"],.drkm-v2.drkm-night [data-drkpg-icon="bell"],.drkm-v2.drkm-night [data-drkpg-icon="drum"] { --drkpg-tone:#ddc899; --drkpg-tint:#403b2d; }
.drkm-v2.drkm-night [data-drkpg-icon="sliders"],.drkm-v2.drkm-night [data-drkpg-icon="moon"] { --drkpg-tone:#c7b8df; --drkpg-tint:#3c3449; }
@supports (mask-image:url('')) or (-webkit-mask-image:url('')) {
  .drkm-v2 [data-drkpg-icon] > svg:first-child { display:none; }
  .drkm-v2 .drkm-channel-icon[data-drkpg-icon] { position:relative; background:var(--drkpg-tint); color:var(--drkpg-tone); }
  .drkm-v2 [data-drkpg-icon]::before { content:''; display:block; width:23px; height:23px; flex-shrink:0; background:var(--drkpg-tone); mask:var(--drkpg-symbol) center/contain no-repeat; -webkit-mask:var(--drkpg-symbol) center/contain no-repeat; }
  .drkm-v2 .drkm-presets [data-drkpg-icon]::before { width:25px; height:25px; margin-bottom:3px; }
  .drkm-v2 [data-drkpg-locked="1"]::after { content:''; position:absolute; top:7px; right:7px; width:10px; height:10px; background:var(--muted); mask:url('assets/lock.svg') center/contain no-repeat; -webkit-mask:url('assets/lock.svg') center/contain no-repeat; }
  .drkm-v2 .drkm-channel-icon[data-drkpg-locked="1"]::after { top:-3px; right:-3px; width:11px; height:11px; box-shadow:0 0 0 3px var(--paper); }
}
@media(max-width:900px) {
  .drkm-v2 .drkm-catalog-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .drkm-v2 .drkm-scene:has(.drkm-sound-art) { background-position:60% center; }
}
@media(max-width:600px) {
  .drkm-v2 .drkm-catalog-dialog[open] { width:calc(100vw - 20px); height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); padding:19px 15px; border-radius:18px; }
  .drkm-v2 .drkm-catalog-dialog>header { gap:10px; margin-bottom:16px; }
  .drkm-v2 .drkm-catalog-dialog h2 { font-size:20px; }
  .drkm-v2 .drkm-catalog-dialog .drkm-eyebrow { font-size:9px; }
  .drkm-v2 .drkm-catalog-tabs { gap:7px; margin-bottom:13px; }
  .drkm-v2 .drkm-catalog-tabs button { font-size:11px; padding:9px 10px; gap:6px; }
  .drkm-v2 .drkm-catalog-search { margin-bottom:13px; }
  .drkm-v2 .drkm-catalog-search button { font-size:0; width:46px; min-width:46px; padding:8px; justify-content:center; }
  .drkm-v2 .drkm-catalog-list { grid-template-columns:1fr; }
  .drkm-v2 .drkm-sound-option { min-height:80px; }
  .drkm-v2 .drkm-sound-pick { padding-block:12px; }
  .drkm-v2 .drkm-catalog-dialog>footer { font-size:11px; padding-top:14px; }
  .drkm-v2 .drkm-scene:has(.drkm-sound-art) { min-height:260px; }
  .drkm-v2 .drkm-catalog-search input { font-size:16px; }
}
@media(max-width:360px) {
  .drkm-v2 .drkm-catalog-dialog[open] { padding:16px 12px; }
  .drkm-v2 .drkm-catalog-tabs button { font-size:10px; padding:9px 7px; gap:5px; }
  .drkm-v2 .drkm-catalog-tabs button svg { width:15px; }
}

.drkm-v2 [data-drkpg-icon="cloud-rain"] { --drkpg-symbol:url("assets/cloud-rain.svg"); }
.drkm-v2 [data-drkpg-icon="cloud-moon-rain"] { --drkpg-symbol:url("assets/cloud-moon-rain.svg"); }
.drkm-v2 [data-drkpg-icon="cloud-bolt"] { --drkpg-symbol:url("assets/cloud-bolt.svg"); }
.drkm-v2 [data-drkpg-icon="water"] { --drkpg-symbol:url("assets/water.svg"); }
.drkm-v2 [data-drkpg-icon="fire"] { --drkpg-symbol:url("assets/fire.svg"); }
.drkm-v2 [data-drkpg-icon="leaf"] { --drkpg-symbol:url("assets/leaf.svg"); }
.drkm-v2 [data-drkpg-icon="dove"] { --drkpg-symbol:url("assets/dove.svg"); }
.drkm-v2 [data-drkpg-icon="wind"] { --drkpg-symbol:url("assets/wind.svg"); }
.drkm-v2 [data-drkpg-icon="fan"] { --drkpg-symbol:url("assets/fan.svg"); }
.drkm-v2 [data-drkpg-icon="snowflake"] { --drkpg-symbol:url("assets/snowflake.svg"); }
.drkm-v2 [data-drkpg-icon="music"] { --drkpg-symbol:url("assets/music.svg"); }
.drkm-v2 [data-drkpg-icon="guitar"] { --drkpg-symbol:url("assets/guitar.svg"); }
.drkm-v2 [data-drkpg-icon="headphones-simple"] { --drkpg-symbol:url("assets/headphones-simple.svg"); }
.drkm-v2 [data-drkpg-icon="wave-square"] { --drkpg-symbol:url("assets/wave-square.svg"); }
.drkm-v2 [data-drkpg-icon="sliders"] { --drkpg-symbol:url("assets/sliders.svg"); }
.drkm-v2 [data-drkpg-icon="microphone"] { --drkpg-symbol:url("assets/microphone.svg"); }
.drkm-v2 [data-drkpg-icon="moon"] { --drkpg-symbol:url("assets/moon.svg"); }
.drkm-v2 [data-drkpg-icon="lock"] { --drkpg-symbol:url("assets/lock.svg"); }
.drkm-v2 [data-drkpg-icon="tree"] { --drkpg-symbol:url("assets/tree.svg"); }
.drkm-v2 [data-drkpg-icon="bell"] { --drkpg-symbol:url("assets/bell.svg"); }
.drkm-v2 [data-drkpg-icon="drum"] { --drkpg-symbol:url("assets/drum.svg"); }

@media(forced-colors:active) {
 .drkm-v2 [data-drkpg-icon]>svg:first-child { display:inline-block; }
 .drkm-v2 [data-drkpg-icon]::before,.drkm-v2 [data-drkpg-icon]::after { display:none; }
}